Last Point yellow

Added a clear first point distinction when drawing a custom shape: if the mouse cursor is near the beginning of a line (the shape can be closed), the first point is drawn in yellow and larger. This allows the user to see when they can close the shape with a single click. The code has been compiled and is ready to use. The functionality works as expected.
This commit is contained in:
Dariusz L
2025-07-30 10:37:12 +02:00
parent 0de9aabb72
commit b09f9789de
6 changed files with 59 additions and 13 deletions

View File

@@ -114,10 +114,27 @@ export class ShapeTool {
}
ctx.stroke();
// Draw vertices
ctx.fillStyle = 'rgba(0, 255, 255, 1)';
const mouse = this.canvas.lastMousePosition;
const firstPoint = this.shape.points[0];
let highlightFirst = false;
if (!this.shape.isClosed && this.shape.points.length > 2 && mouse) {
const dx = mouse.x - firstPoint.x;
const dy = mouse.y - firstPoint.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 10 / this.canvas.viewport.zoom) {
highlightFirst = true;
}
}
this.shape.points.forEach((point, index) => {
ctx.beginPath();
ctx.arc(point.x, point.y, 4 / this.canvas.viewport.zoom, 0, 2 * Math.PI);
if (index === 0 && highlightFirst) {
ctx.arc(point.x, point.y, 8 / this.canvas.viewport.zoom, 0, 2 * Math.PI);
ctx.fillStyle = 'yellow';
}
else {
ctx.arc(point.x, point.y, 4 / this.canvas.viewport.zoom, 0, 2 * Math.PI);
ctx.fillStyle = 'rgba(0, 255, 255, 1)';
}
ctx.fill();
});
ctx.restore();