Merge pull request #164 from IBCornelsen/Jens

CAD

src/pages/energieausweis-erstellen/index.astro

@@ -15,7 +15,7 @@ import Widget2 from "#components/Widget.svelte";
 </div>
 
 
- <div class="controls">
+<div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
@@ -30,9 +30,9 @@ import Widget2 from "#components/Widget.svelte";
     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
-    let lastEndPoint = null;
-    let lastStartPoint = null;
     let capturedLines = [];
+    let lastEndPoint = null; // Tracks the end point of the last line
+    let firstStartPoint = null; // Tracks the start point of the first line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -65,7 +65,7 @@ import Widget2 from "#components/Widget.svelte";
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
       lastEndPoint = null;
-      lastStartPoint = null;
+      firstStartPoint = null;
       drawGrid(); // Redraw the grid after clearing
       updateLineLog();
     }
@@ -96,20 +96,17 @@ import Widget2 from "#components/Widget.svelte";
       // 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
+      if (!lastEndPoint) {
+        // For the first line, set the start point anywhere
         startX = clickX;
         startY = clickY;
+        firstStartPoint = { x: startX, y: startY }; // Save the first start point
+      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
+        // For subsequent lines, start at the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
       } else {
-        // If click doesn't match a valid connection, do nothing
+        // If not a valid start point, do nothing
         return;
       }
 
@@ -117,16 +114,21 @@ import Widget2 from "#components/Widget.svelte";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Avoid drawing a "point" as a line
-      if (startX === endX && startY === endY) {
+      // The endpoint must be either:
+      // - A valid grid point
+      // - The start point of the first line
+      const isValidEndPoint =
+        (endX !== startX || endY !== startY) &&
+        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);
+
+      if (!isValidEndPoint) {
         return;
       }
 
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
-      // Update the last start and end points
-      lastStartPoint = { x: startX, y: startY };
+      // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
       // Capture the line details