CAD

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

@@ -81,11 +81,10 @@ import Layout from "#layouts/layoutCAD.astro";
     const canvas = document.getElementById('cadCanvas');
     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
     let capturedLines = [];
-    let lastEndPoint = null; // Tracks the end point of the last line
     let firstStartPoint = null; // Tracks the start point of the first line
+    let lastEndPoint = null; // Tracks the end point of the last line
 
     // Snap a coordinate to the nearest grid point
     function snapToGrid(value) {
@@ -113,13 +112,13 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
-    // Clear the canvas and reset logs
+    // Clear the canvas and reset everything
     function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       capturedLines = [];
-      lastEndPoint = null;
       firstStartPoint = null;
-      drawGrid(); // Redraw the grid after clearing
+      lastEndPoint = null;
+      drawGrid();
       updateLineLog();
     }
 
@@ -127,52 +126,51 @@ import Layout from "#layouts/layoutCAD.astro";
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          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: ${lengthInMeters.toFixed(2)} m</li>`;
+          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
         })
         .join('');
     }
 
-    // Calculate the length of a line in meters
+    // Calculate the length of a line
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+    function calculateLineLength(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
     }
 
-    // Mouse events
+    // Mouse event for drawing lines
     canvas.addEventListener('mousedown', (e) => {
       const clickX = snapToGrid(e.offsetX);
       const clickY = snapToGrid(e.offsetY);
 
-      // Determine the starting point for the new line
+      // Determine starting point for the line
       let startX, startY;
 
       if (!lastEndPoint) {
-        // For the first line, set the start point anywhere
+        // First line can start anywhere
         startX = clickX;
         startY = clickY;
-        firstStartPoint = { x: startX, y: startY }; // Save the first start point
+        firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
       } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
-        // For subsequent lines, start at the last endpoint
+        // Subsequent lines must start at the last endpoint
         startX = lastEndPoint.x;
         startY = lastEndPoint.y;
       } else {
-        // If not a valid start point, do nothing
+        // Invalid starting point
         return;
       }
 
-      // Determine the endpoint
+      // Determine the end point
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      // The endpoint must be either:
+      // Check if the end point is valid:
-      // - A valid grid point (different from the start point)
+      // - Must not be the same as the start point
-      // - The start point of the first line
+      // - Must be a valid grid point or the first start point
       const isValidEndPoint =
         (endX !== startX || endY !== startY) &&
-        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);
+        ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || endX % gridSize === 0 && endY % gridSize === 0);
 
       if (!isValidEndPoint) {
         return;
@@ -181,7 +179,7 @@ import Layout from "#layouts/layoutCAD.astro";
       // Draw the line
       drawLine(startX, startY, endX, endY);
 
-      // Update the last endpoint
+      // Update the last end point
       lastEndPoint = { x: endX, y: endY };
 
       // Capture the line details
@@ -189,18 +187,18 @@ import Layout from "#layouts/layoutCAD.astro";
       updateLineLog();
     });
 
-    // Drawing functions
+    // Function to draw a line
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.strokeStyle = "#000000"; // Black lines
-      ctx.lineWidth = 2; // Thicker lines
+      ctx.lineWidth = 2;
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Initialize canvas
+    // Initialize the canvas
-    drawGrid(); // Draw the grid when the page loads
+    drawGrid();
   </script>
-
+  
 </Layout>