This commit is contained in:
Jens Cornelsen
2024-12-09 15:44:23 +01:00
parent 17f7530bb8
commit 372d2c6a01

View File

@@ -15,7 +15,7 @@ import Widget2 from "#components/Widget.svelte";
</div> </div>
<div class="controls"> <div class="controls">
<button onclick="clearCanvas()">Clear</button> <button onclick="clearCanvas()">Clear</button>
</div> </div>
<canvas id="cadCanvas" width="800" height="600"></canvas> <canvas id="cadCanvas" width="800" height="600"></canvas>
@@ -30,9 +30,9 @@ import Widget2 from "#components/Widget.svelte";
const lineLog = document.getElementById('line-log'); const lineLog = document.getElementById('line-log');
const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
const gridSize = 10; // Size of each grid cell in pixels const gridSize = 10; // Size of each grid cell in pixels
let lastEndPoint = null;
let lastStartPoint = null;
let capturedLines = []; let capturedLines = [];
let lastEndPoint = null; // Tracks the end point of the last line
let firstStartPoint = null; // Tracks the start point of the first line
// Snap a coordinate to the nearest grid point // Snap a coordinate to the nearest grid point
function snapToGrid(value) { function snapToGrid(value) {
@@ -65,7 +65,7 @@ import Widget2 from "#components/Widget.svelte";
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = []; capturedLines = [];
lastEndPoint = null; lastEndPoint = null;
lastStartPoint = null; firstStartPoint = null;
drawGrid(); // Redraw the grid after clearing drawGrid(); // Redraw the grid after clearing
updateLineLog(); updateLineLog();
} }
@@ -96,20 +96,17 @@ import Widget2 from "#components/Widget.svelte";
// Determine the starting point for the new line // Determine the starting point for the new line
let startX, startY; let startX, startY;
if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) { if (!lastEndPoint) {
// Snap to the last endpoint // For the first line, set the start point anywhere
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; startX = clickX;
startY = clickY; startY = clickY;
firstStartPoint = { x: startX, y: startY }; // Save the first start point
} else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
// For subsequent lines, start at the last endpoint
startX = lastEndPoint.x;
startY = lastEndPoint.y;
} else { } else {
// If click doesn't match a valid connection, do nothing // If not a valid start point, do nothing
return; return;
} }
@@ -117,16 +114,21 @@ import Widget2 from "#components/Widget.svelte";
const endX = snapToGrid(e.offsetX); const endX = snapToGrid(e.offsetX);
const endY = snapToGrid(e.offsetY); const endY = snapToGrid(e.offsetY);
// Avoid drawing a "point" as a line // The endpoint must be either:
if (startX === endX && startY === endY) { // - A valid grid point
// - The start point of the first line
const isValidEndPoint =
(endX !== startX || endY !== startY) &&
(endX === firstStartPoint?.x && endY === firstStartPoint?.y);
if (!isValidEndPoint) {
return; return;
} }
// Draw the line // Draw the line
drawLine(startX, startY, endX, endY); drawLine(startX, startY, endX, endY);
// Update the last start and end points // Update the last endpoint
lastStartPoint = { x: startX, y: startY };
lastEndPoint = { x: endX, y: endY }; lastEndPoint = { x: endX, y: endY };
// Capture the line details // Capture the line details