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

@@ -68,12 +68,12 @@ import Layout from "#layouts/layoutCAD.astro";
 </div>
 
 
- <div class="controls">
+  <div class="controls">
     <button onclick="clearCanvas()">Clear</button>
   </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>
 
@@ -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 startX = null;
-    let startY = null;
     let capturedLines = [];
+    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,75 +112,134 @@ import Layout from "#layouts/layoutCAD.astro";
       ctx.stroke();
     }
 
+    // Clear the canvas and reset everything
     function clearCanvas() {
-  // Löscht den gesamten Canvas
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      firstStartPoint = null;
+      lastEndPoint = null;
+      drawGrid();
+      updateLineLog();
+    }
 
-  // Setzt die Liste der gezeichneten Linien und Punkte zurück
-  capturedLines = [];
-  firstStartPoint = null;
-  lastEndPoint = null;
-
-  // Zeichnet das Raster neu
-  drawGrid();
-
-  // Aktualisiert das Log, um es zu leeren
-  updateLineLog();
-}
-    
-
-
-
-
-    // Update the captured lines log
+    // Update the captured points and lines log
     function updateLineLog() {
       lineLog.innerHTML = capturedLines
         .map((line, index) => {
-          const lengthInMeters = calculateLineLengthInMeters(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>`;
+          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>`;
         })
         .join('');
     }
 
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+    // Calculate the length of a line
+    function calculateLineLength(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
+      return Math.sqrt(dx * dx + dy * dy);
     }
 
-    // Mouse events
+    // Mouse move event for snapping the cursor to the grid
+    canvas.addEventListener('mousemove', (e) => {
+      const mouseX = snapToGrid(e.offsetX);
+      const mouseY = snapToGrid(e.offsetY);
+
+      // Clear the canvas and redraw the grid
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawGrid();
+
+      // Redraw all existing lines and points
+      redrawLinesAndPoints();
+
+      // Draw a marker at the snapped position
+      drawCursorMarker(mouseX, mouseY);
+    });
+
+    // Draw a marker to represent the snapped cursor position
+    function drawCursorMarker(x, y) {
+      ctx.beginPath();
+      ctx.fillStyle = "#ff0000"; // Red marker for cursor
+      ctx.arc(x, y, 4, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+
+    // Redraw all existing lines and points
+    function redrawLinesAndPoints() {
+      for (const line of capturedLines) {
+        if (line.startX === line.endX && line.startY === line.endY) {
+          drawPoint(line.startX, line.startY);
+        } else {
+          drawLine(line.startX, line.startY, line.endX, line.endY);
+        }
+      }
+    }
+
+    // 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 or point
+      let startX, startY;
+
+      if (!lastEndPoint) {
+        // 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) {
+        // For subsequent lines, start at the last endpoint
+        startX = lastEndPoint.x;
+        startY = lastEndPoint.y;
+      } else {
+        // Invalid starting point for a line
+        return;
+      }
+
+      // Determine the endpoint
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
-      if (startX !== null && startY !== null) {
-        // Draw the final line
+      // If it's a point, draw a point
+      if (startX === endX && startY === endY) {
+        drawPoint(startX, startY);
+      } else {
+        // Otherwise, draw the line
         drawLine(startX, startY, endX, endY);
-
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
       }
 
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
+      // Update the last endpoint
+      lastEndPoint = { x: endX, y: endY };
+
+      // Capture the line or point details
+      capturedLines.push({ startX, startY, endX, endY });
+      updateLineLog();
     });
 
-    // Drawing functions
+    // Function to draw a line
     function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
+      ctx.strokeStyle = "#000000"; // Black lines
+      ctx.lineWidth = 2;
       ctx.moveTo(x1, y1);
       ctx.lineTo(x2, y2);
       ctx.stroke();
     }
 
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
+    // 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>
 
   <style>