CAD

src/components/CAD.svelte

@@ -0,0 +1,145 @@
+ <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+
+  <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>
+
+  <script type="ts">
+    
+    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[] = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value: number): number {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid(): void {
+      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();
+    }
+
+    // Clear the canvas and reset logs
+    function clearCanvas(): void {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines.length = 0;
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog(): void {
+      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>`;
+        })
+        .join('');
+    }
+
+    // Calculate the length of a line in meters
+    function calculateLineLengthInMeters(x1: number, y1: number, x2: number, y2: number): number {
+      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: MouseEvent): void => {
+      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: number, y1: number, x2: number, y2: number): void {
+      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>
+