diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx index e235ff598..404ca1822 100644 --- a/web/src/components/settings/PolygonCanvas.tsx +++ b/web/src/components/settings/PolygonCanvas.tsx @@ -60,7 +60,7 @@ export function PolygonCanvas({ return [stage.getPointerPosition()!.x, stage.getPointerPosition()!.y]; }; - const isMouseOverPoint = (polygon: Polygon, mousePos: number[]) => { + const isMouseOverFirstPoint = (polygon: Polygon, mousePos: number[]) => { if (!polygon || !polygon.points) { return false; } @@ -72,6 +72,25 @@ export function PolygonCanvas({ return distance < 15; }; + const isMouseOverAnyPoint = (polygon: Polygon, mousePos: number[]) => { + if (!polygon || !polygon.points || polygon.points.length === 0) { + return false; + } + + for (let i = 1; i < polygon.points.length; i++) { + const point = polygon.points[i]; + const distance = Math.hypot( + mousePos[0] - point[0], + mousePos[1] - point[1], + ); + if (distance < 15) { + return true; + } + } + + return false; + }; + const handleMouseDown = (e: KonvaEventObject) => { if (activePolygonIndex === undefined || !polygons) { return; @@ -84,7 +103,7 @@ export function PolygonCanvas({ if ( activePolygon.points.length >= 3 && - isMouseOverPoint(activePolygon, mousePos) + isMouseOverFirstPoint(activePolygon, mousePos) ) { // Close the polygon updatedPolygons[activePolygonIndex] = { @@ -93,7 +112,10 @@ export function PolygonCanvas({ }; setPolygons(updatedPolygons); } else { - if (!activePolygon.isFinished) { + if ( + !activePolygon.isFinished && + !isMouseOverAnyPoint(activePolygon, mousePos) + ) { // Add a new point to the active polygon updatedPolygons[activePolygonIndex] = { ...activePolygon, @@ -136,6 +158,24 @@ export function PolygonCanvas({ } }; + const handleMouseOverAnyPoint = ( + e: KonvaEventObject, + ) => { + if (activePolygonIndex === undefined || !polygons) { + return; + } + e.target.getStage()!.container().style.cursor = "move"; + }; + + const handleMouseOutAnyPoint = ( + e: KonvaEventObject, + ) => { + if (activePolygonIndex === undefined || !polygons) { + return; + } + e.target.getStage()!.container().style.cursor = "default"; + }; + const handlePointDragMove = ( e: KonvaEventObject, ) => { @@ -215,6 +255,8 @@ export function PolygonCanvas({ handleGroupDragEnd={handleGroupDragEnd} handleMouseOverStartPoint={handleMouseOverStartPoint} handleMouseOutStartPoint={handleMouseOutStartPoint} + handleMouseOverAnyPoint={handleMouseOverAnyPoint} + handleMouseOutAnyPoint={handleMouseOutAnyPoint} /> ), )} diff --git a/web/src/components/settings/PolygonDrawer.tsx b/web/src/components/settings/PolygonDrawer.tsx index 861bae1d9..4824da7dd 100644 --- a/web/src/components/settings/PolygonDrawer.tsx +++ b/web/src/components/settings/PolygonDrawer.tsx @@ -20,6 +20,12 @@ type PolygonDrawerProps = { handleMouseOutStartPoint: ( e: KonvaEventObject, ) => void; + handleMouseOverAnyPoint: ( + e: KonvaEventObject, + ) => void; + handleMouseOutAnyPoint: ( + e: KonvaEventObject, + ) => void; }; export default function PolygonDrawer({ @@ -33,6 +39,8 @@ export default function PolygonDrawer({ handleGroupDragEnd, handleMouseOverStartPoint, handleMouseOutStartPoint, + handleMouseOverAnyPoint, + handleMouseOutAnyPoint, }: PolygonDrawerProps) { const vertexRadius = 6; const [stage, setStage] = useState(); @@ -121,6 +129,13 @@ export default function PolygonDrawer({ onMouseOut: handleMouseOutStartPoint, } : null; + const otherPointsAttr = + index !== 0 + ? { + onMouseOver: handleMouseOverAnyPoint, + onMouseOut: handleMouseOutAnyPoint, + } + : null; return ( ); })}