CAD

src/components/CAD.svelte

@@ -17,80 +17,3 @@
     <ul id="line-log"></ul>
   </div>
 
-  <script>
-    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 = 5; // Size of each grid cell in pixels
-    let startX = null;
-    let startY = null;
-    let capturedLines = [];
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
-
-    // Draw the grid
-    function drawGrid() {
-      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
-      ctx.lineWidth = 0.5;
-
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.height);
-      }
-
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.width, y);
-      }
-
-      ctx.stroke();
-    }
-
-    // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1, y1, x2, y2) {
-      const dx = x2 - x1;
-      const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
-    }
-
-    // Mouse events
-    canvas.addEventListener('mousedown', (e) => {
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      if (startX !== null && startY !== null) {
-        // Draw the final 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;
-    });
-
-    // Drawing functions
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
-  </script>
-

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

@@ -3,6 +3,84 @@
 import Layout from "#layouts/Layout.astro";
 import CAD from "#components/CAD.svelte";
 
+<script>
+    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 = 5; // Size of each grid cell in pixels
+    let startX = null;
+    let startY = null;
+    let capturedLines = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value) {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid() {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e) => {
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      if (startX !== null && startY !== null) {
+        // Draw the final 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;
+    });
+
+    // Drawing functions
+    function drawLine(x1, y1, x2, y2) {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
+
 ---