diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro index ab5ccc27..6be1d25a 100644 --- a/src/pages/energieausweis-erstellen/index.astro +++ b/src/pages/energieausweis-erstellen/index.astro @@ -29,9 +29,9 @@ import Widget2 from "#components/Widget.svelte"; 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 (set to 10 for coarser grid) - let startX = null; - let startY = null; + const gridSize = 10; // Size of each grid cell in pixels + let lastEndPoint = null; + let lastStartPoint = null; let capturedLines = []; // Snap a coordinate to the nearest grid point @@ -64,8 +64,8 @@ import Widget2 from "#components/Widget.svelte"; function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); capturedLines = []; - startX = null; - startY = null; + lastEndPoint = null; + lastStartPoint = null; drawGrid(); // Redraw the grid after clearing updateLineLog(); } @@ -90,21 +90,43 @@ import Widget2 from "#components/Widget.svelte"; // Mouse events canvas.addEventListener('mousedown', (e) => { + const clickX = snapToGrid(e.offsetX); + const clickY = snapToGrid(e.offsetY); + + // Determine the starting point for the new line + let startX, startY; + + if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) { + // Snap to the last endpoint + startX = lastEndPoint.x; + startY = lastEndPoint.y; + } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) { + // Snap to the last starting point + startX = lastStartPoint.x; + startY = lastStartPoint.y; + } else if (!capturedLines.length) { + // First line can start anywhere + startX = clickX; + startY = clickY; + } else { + // If click doesn't match a valid connection, do nothing + return; + } + + // Determine the endpoint const endX = snapToGrid(e.offsetX); const endY = snapToGrid(e.offsetY); - if (startX !== null && startY !== null) { - // Draw the final line - drawLine(startX, startY, endX, endY); + // Draw the line + drawLine(startX, startY, endX, endY); - // Capture the line details - capturedLines.push({ startX, startY, endX, endY }); - updateLineLog(); - } + // Update the last start and end points + lastStartPoint = { x: startX, y: startY }; + lastEndPoint = { x: endX, y: endY }; - // Update the start position for the next line - startX = endX; - startY = endY; + // Capture the line details + capturedLines.push({ startX, startY, endX, endY }); + updateLineLog(); }); // Drawing functions @@ -122,6 +144,5 @@ import Widget2 from "#components/Widget.svelte"; -