CAD

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

@@ -73,7 +73,7 @@ import Layout from "#layouts/layoutCAD.astro";
   </div>
   <canvas id="cadCanvas" width="800" height="600"></canvas>
   <div class="log">
-    <strong>Captured Lines:</strong>
+    <strong>Captured Points and Lines:</strong>
     <ul id="line-log"></ul>
   </div>
 
@@ -122,10 +122,14 @@ import Layout from "#layouts/layoutCAD.astro";
       updateLineLog();
     }
 
-    // Update the captured lines log
+    // Update the captured points and lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
+          const isPoint = line.startX === line.endX && line.startY === line.endY;
+          if (isPoint) {
+            return `<li>Point: (${line.startX}, ${line.startY})</li>`;
+          }
           const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
           return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
         })
@@ -139,25 +143,25 @@ import Layout from "#layouts/layoutCAD.astro";
       return Math.sqrt(dx * dx + dy * dy);
     }
 
-    // Mouse event for drawing lines
+    // Mouse event for drawing lines and points
     canvas.addEventListener('mousedown', (e) => {
       const clickX = snapToGrid(e.offsetX);
       const clickY = snapToGrid(e.offsetY);
 
-      // Determine starting point for the line
+      // Determine starting point for the line or point
       let startX, startY;
 
       if (!lastEndPoint) {
-        // First line can start anywhere
+        // For the first line or point, set the start point anywhere
         startX = clickX;
         startY = clickY;
         firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
       } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // Subsequent lines must start at the last endpoint
+        // For subsequent lines, start at the last endpoint
         startX = lastEndPoint.x;
         startY = lastEndPoint.y;
       } else {
-        // Invalid starting point
+        // Invalid starting point for a line
         return;
       }
 
@@ -165,24 +169,18 @@ import Layout from "#layouts/layoutCAD.astro";
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // Check if the end point is valid:
+      // Draw a point if the start and end are the same
-      // - Must not be the same as the start point
+      if (startX === endX && startY === endY) {
-      // - Must be a valid grid point or the first start point
+        drawPoint(startX, startY);
-      const isValidEndPoint =
+      } else {
-        (endX !== startX || endY !== startY) &&
-        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || endX % gridSize === 0 && endY % gridSize === 0);
-
-      if (!isValidEndPoint) {
-        return;
-      }
-
         // Draw the line
         drawLine(startX, startY, endX, endY);
+      }
 
       // Update the last endpoint
       lastEndPoint = { x: endX, y: endY };
 
-      // Capture the line details
+      // Capture the line or point details
       capturedLines.push({ startX, startY, endX, endY });
       updateLineLog();
     });
@@ -197,6 +195,14 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
+    // Function to draw a point
+    function drawPoint(x, y) {
+      ctx.beginPath();
+      ctx.fillStyle = "#000000"; // Black point
+      ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
+      ctx.fill();
+    }
+
     // Initialize the canvas
     drawGrid();
   </script>