allow dragging of points while drawing polygon

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<MouseEvent | TouchEvent>) => {
     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<MouseEvent | TouchEvent>,
+  ) => {
+    if (activePolygonIndex === undefined || !polygons) {
+      return;
+    }
+    e.target.getStage()!.container().style.cursor = "move";
+  };
+
+  const handleMouseOutAnyPoint = (
+    e: KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => {
+    if (activePolygonIndex === undefined || !polygons) {
+      return;
+    }
+    e.target.getStage()!.container().style.cursor = "default";
+  };
+
   const handlePointDragMove = (
     e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
@@ -215,6 +255,8 @@ export function PolygonCanvas({
                 handleGroupDragEnd={handleGroupDragEnd}
                 handleMouseOverStartPoint={handleMouseOverStartPoint}
                 handleMouseOutStartPoint={handleMouseOutStartPoint}
+                handleMouseOverAnyPoint={handleMouseOverAnyPoint}
+                handleMouseOutAnyPoint={handleMouseOutAnyPoint}
               />
             ),
         )}

web/src/components/settings/PolygonDrawer.tsx

@@ -20,6 +20,12 @@ type PolygonDrawerProps = {
   handleMouseOutStartPoint: (
     e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => void;
+  handleMouseOverAnyPoint: (
+    e: KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => void;
+  handleMouseOutAnyPoint: (
+    e: KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => 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<Konva.Stage>();
@@ -121,6 +129,13 @@ export default function PolygonDrawer({
                 onMouseOut: handleMouseOutStartPoint,
               }
             : null;
+        const otherPointsAttr =
+          index !== 0
+            ? {
+                onMouseOver: handleMouseOverAnyPoint,
+                onMouseOut: handleMouseOutAnyPoint,
+              }
+            : null;
 
         return (
           <Circle
@@ -146,6 +161,7 @@ export default function PolygonDrawer({
               }
             }}
             {...startPointAttr}
+            {...otherPointsAttr}
           />
         );
       })}