From 565629871bbf0fc6cd02599779cb7a1c92c2c582 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 18 Apr 2024 11:40:30 -0500
Subject: [PATCH] limit interpolated coordinates and use crosshair cursor

---
 web/src/components/settings/PolygonCanvas.tsx | 23 +++++++++++++++++++
 web/src/utils/canvasUtil.ts                   |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index 404ca1822..0602a717b 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/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
diff --git a/web/src/utils/canvasUtil.ts b/web/src/utils/canvasUtil.ts
index 9b2cb70d7..12bd6b167 100644
--- a/web/src/utils/canvasUtil.ts
+++ b/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 newY = +((y * newHeight) / height).toFixed(3);
+    const newX = Math.min(+((x * newWidth) / width).toFixed(3), newWidth);
+    const newY = Math.min(+((y * newHeight) / height).toFixed(3), newHeight);
     newPoints.push([newX, newY]);
   }