limit interpolated coordinates and use crosshair cursor

web/src/components/settings/PolygonCanvas.tsx

@@ -222,6 +222,27 @@ export function PolygonCanvas({
     }
   };
 
+  const handleStageMouseOver = (
+    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => {
+    if (activePolygonIndex === undefined || !polygons) {
+      return;
+    }
+
+    const updatedPolygons = [...polygons];
+    const activePolygon = updatedPolygons[activePolygonIndex];
+
+    if (activePolygon.isFinished) return;
+    e.target.getStage()!.container().style.cursor = "crosshair";
+  };
+
+  const handleStageMouseOut = (
+    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => {
+    if (!e.target) return;
+    e.target.getStage()!.container().style.cursor = "default";
+  };
+
   return (
     <Stage
       ref={stageRef}
@@ -229,6 +250,8 @@ export function PolygonCanvas({
       height={height}
       onMouseDown={handleMouseDown}
       onTouchStart={handleMouseDown}
+      onMouseOver={handleStageMouseOver}
+      onMouseOut={handleStageMouseOut}
     >
       <Layer>
         <Image

web/src/utils/canvasUtil.ts

@@ -56,8 +56,8 @@ export const interpolatePoints = (
   const newPoints: number[][] = [];
 
   for (const [x, y] of points) {
-    const newX = +((x * newWidth) / width).toFixed(3);
+    const newX = Math.min(+((x * newWidth) / width).toFixed(3), newWidth);
-    const newY = +((y * newHeight) / height).toFixed(3);
+    const newY = Math.min(+((y * newHeight) / height).toFixed(3), newHeight);
     newPoints.push([newX, newY]);
   }