src/pages/faq/erstellung-energieausweise/index.astro

@@ -111,6 +111,61 @@ import Layout from "#layouts/cadLayout.astro";
       ctx.stroke();
     }
 
+
+
+// Track whether we are actively drawing a temporary line
+let isMouseOverCanvas = false;
+
+// Event to draw a temporary line
+canvas.addEventListener('mousemove', (e) => {
+  if (!lastEndPoint || !isMouseOverCanvas) return;
+
+  const cursorX = snapToGrid(e.offsetX);
+  const cursorY = snapToGrid(e.offsetY);
+
+  // Clear the canvas (excluding the captured drawings)
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawGrid();
+
+  // Redraw all captured lines
+  capturedLines.forEach(line => {
+    drawLine(line.startX, line.startY, line.endX, line.endY);
+  });
+
+  // Draw the temporary line
+  drawTemporaryLine(lastEndPoint.x, lastEndPoint.y, cursorX, cursorY);
+});
+
+// Mouse enters canvas
+canvas.addEventListener('mouseenter', () => {
+  isMouseOverCanvas = true;
+});
+
+// Mouse leaves canvas
+canvas.addEventListener('mouseleave', () => {
+  isMouseOverCanvas = false;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawGrid();
+
+  // Redraw all captured lines
+  capturedLines.forEach(line => {
+    drawLine(line.startX, line.startY, line.endX, line.endY);
+  });
+});
+
+// Function to draw a temporary line
+function drawTemporaryLine(x1, y1, x2, y2) {
+  ctx.beginPath();
+  ctx.strokeStyle = "#aaaaaa"; // Light gray for the temporary line
+  ctx.lineWidth = 1;
+  ctx.setLineDash([5, 5]); // Dashed line
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+  ctx.setLineDash([]); // Reset to solid lines for permanent drawings
+}
+
+
     // Initialize canvas
     drawGrid(); // Draw the grid when the page loads
   </script>