---

import Layout from "#layouts/cadLayout.astro";

---


<Layout title="CAD">

<h1 class="text-3xl">CAD</h1>

<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>
    const canvas = document.getElementById('cadCanvas');
    const ctx = canvas.getContext('2d');
    const lineLog = document.getElementById('line-log');
    const pixelToMeter = 0.025; // Conversion factor: 1 pixel = 0.025 meter
    const gridSize = 20; // 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();
    }

    // Clear the canvas and reset logs
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      capturedLines = [];
      startX = null;
      startY = null;
      drawGrid(); // Redraw the grid after clearing
      updateLineLog();
    }

    // Update the captured 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>`;
        })
        .join('');
    }

    // 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();
    }



// Track whether we are actively drawing a temporary line
let isMouseOverCanvas = false;

// Event to draw a temporary line
canvas.addEventListener('mousemove', (e) => {
  if (!lastEndPoint || !isMouseOverCanvas) return;

  const cursorX = snapToGrid(e.offsetX);
  const cursorY = snapToGrid(e.offsetY);

  // Clear the canvas (excluding the captured drawings)
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawGrid();

  // Redraw all captured lines
  capturedLines.forEach(line => {
    drawLine(line.startX, line.startY, line.endX, line.endY);
  });

  // Draw the temporary line
  drawTemporaryLine(lastEndPoint.x, lastEndPoint.y, cursorX, cursorY);
});

// Mouse enters canvas
canvas.addEventListener('mouseenter', () => {
  isMouseOverCanvas = true;
});

// Mouse leaves canvas
canvas.addEventListener('mouseleave', () => {
  isMouseOverCanvas = false;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawGrid();

  // Redraw all captured lines
  capturedLines.forEach(line => {
    drawLine(line.startX, line.startY, line.endX, line.endY);
  });
});

// Function to draw a temporary line
function drawTemporaryLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.strokeStyle = "#aaaaaa"; // Light gray for the temporary line
  ctx.lineWidth = 1;
  ctx.setLineDash([5, 5]); // Dashed line
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.setLineDash([]); // Reset to solid lines for permanent drawings
}


    // Initialize canvas
    drawGrid(); // Draw the grid when the page loads
  </script>

</Layout>

