Merge pull request #184 from IBCornelsen/Jens

CAD

src/components/CAD.svelte

@@ -8,32 +8,32 @@
     <ul id="line-log"></ul>
   </div>
 
-  <script type="ts">
+  <div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
 
-    const canvas = document.getElementById('cadCanvas') as HTMLCanvasElement;
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-    const lineLog = document.getElementById('line-log') as HTMLUListElement;
-    const pixelToMeter: number = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize: number = 5; // Size of each grid cell in pixels
-    let startX: number | null = null;
-    let startY: number | null = null;
-
-    interface Line {
-      startX: number;
-      startY: number;
-      endX: number;
-      endY: number;
-    }
-
-    const capturedLines: Line[] = [];
+  <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: number): number {
+    function snapToGrid(value) {
       return Math.round(value / gridSize) * gridSize;
     }
 
     // Draw the grid
-    function drawGrid(): void {
+    function drawGrid() {
       ctx.beginPath();
       ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
       ctx.lineWidth = 0.5;
@@ -54,9 +54,9 @@
     }
 
     // Clear the canvas and reset logs
-    function clearCanvas(): void {
+    function clearCanvas() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
-      capturedLines.length = 0;
+      capturedLines = [];
       startX = null;
       startY = null;
       drawGrid(); // Redraw the grid after clearing
@@ -64,17 +64,17 @@
     }
 
     // Update the captured lines log
-    function updateLineLog(): void {
+    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>`;
+          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
         })
         .join('');
     }
 
     // Calculate the length of a line in meters
-    function calculateLineLengthInMeters(x1: number, y1: number, x2: number, y2: number): number {
+    function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
       const dy = y2 - y1;
       const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
@@ -82,7 +82,7 @@
     }
 
     // Mouse events
-    canvas.addEventListener('mousedown', (e: MouseEvent): void => {
+    canvas.addEventListener('mousedown', (e) => {
       const endX = snapToGrid(e.offsetX);
       const endY = snapToGrid(e.offsetY);
 
@@ -101,7 +101,7 @@
     });
 
     // Drawing functions
-    function drawLine(x1: number, y1: number, x2: number, y2: number): void {
+    function drawLine(x1, y1, x2, y2) {
       ctx.beginPath();
       ctx.strokeStyle = "#000000"; // Black color for lines
       ctx.lineWidth = 2; // Thicker lines