src/pages/energieausweis-erstellen/index.astro

@@ -29,9 +29,9 @@ import Widget2 from "#components/Widget.svelte";
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
     const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 10; // Size of each grid cell in pixels (set to 10 for coarser grid)
-    let startX = null;
-    let startY = null;
+    const gridSize = 10; // Size of each grid cell in pixels
+    let lastEndPoint = null;
+    let lastStartPoint = null;
     let capturedLines = [];
 
     // Snap a coordinate to the nearest grid point
@@ -64,8 +64,8 @@ import Widget2 from "#components/Widget.svelte";
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      startX = null;
-      startY = null;
+      lastEndPoint = null;
+      lastStartPoint = null;
       drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
@@ -90,21 +90,43 @@ import Widget2 from "#components/Widget.svelte";
 
     // Mouse events
     canvas.addEventListener('mousedown', (e) => {
+      const clickX = snapToGrid(e.offsetX);
+      const clickY = snapToGrid(e.offsetY);
+
+      // Determine the starting point for the new line
+      let startX, startY;
+
+      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // Snap to the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
+        // Snap to the last starting point
+        startX = lastStartPoint.x;
+        startY = lastStartPoint.y;
+      } else if (!capturedLines.length) {
+        // First line can start anywhere
+        startX = clickX;
+        startY = clickY;
+      } else {
+        // If click doesn't match a valid connection, do nothing
+        return;
+      }
+
+      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      if (startX !== null && startY !== null) {
-        // Draw the final line
-        drawLine(startX, startY, endX, endY);
+      // Draw the line
+      drawLine(startX, startY, endX, endY);
 
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
-      }
+      // Update the last start and end points
+      lastStartPoint = { x: startX, y: startY };
+      lastEndPoint = { x: endX, y: endY };
 
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
+      // Capture the line details
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
     });
 
     // Drawing functions
@@ -122,6 +144,5 @@ import Widget2 from "#components/Widget.svelte";
   </script>
 
 
-
 </Layout>