From 07b3160dffe184aae18202ed027876ebd2b0e4b1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 9 Aug 2024 07:46:18 -0500
Subject: [PATCH] Add right click to delete points in desktop mask/zone editor
 (#12744)

---
 web/src/components/settings/PolygonCanvas.tsx | 26 +++++++++++++++++++
 .../settings/PolygonEditControls.tsx          |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index 6121293e5..e6851b63c 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@@ -114,6 +114,29 @@ export function PolygonCanvas({
     const mousePos = stage.getPointerPosition() ?? { x: 0, y: 0 };
     const intersection = stage.getIntersection(mousePos);
 
+    // right click on desktops to delete a point
+    if (
+      e.evt instanceof MouseEvent &&
+      e.evt.button === 2 &&
+      intersection?.getClassName() == "Circle"
+    ) {
+      const pointIndex = parseInt(intersection.name()?.split("-")[1]);
+      if (!isNaN(pointIndex)) {
+        const updatedPoints = activePolygon.points.filter(
+          (_, index) => index !== pointIndex,
+        );
+        updatedPolygons[activePolygonIndex] = {
+          ...activePolygon,
+          points: updatedPoints,
+          pointsOrder: activePolygon.pointsOrder?.filter(
+            (_, index) => index !== pointIndex,
+          ),
+        };
+        setPolygons(updatedPolygons);
+      }
+      return;
+    }
+
     if (
       activePolygon.points.length >= 3 &&
       intersection?.getClassName() == "Circle" &&
@@ -236,6 +259,9 @@ export function PolygonCanvas({
       onMouseDown={handleMouseDown}
       onTouchStart={handleMouseDown}
       onMouseOver={handleStageMouseOver}
+      onContextMenu={(e) => {
+        e.evt.preventDefault();
+      }}
     >
       <Layer>
         <Image
diff --git a/web/src/components/settings/PolygonEditControls.tsx b/web/src/components/settings/PolygonEditControls.tsx
index b903a5c1f..6c3d005ba 100644
--- a/web/src/components/settings/PolygonEditControls.tsx
+++ b/web/src/components/settings/PolygonEditControls.tsx
@@ -80,7 +80,7 @@ export default function PolygonEditControls({
             <MdUndo className="text-secondary-foreground" />
           </Button>
         </TooltipTrigger>
-        <TooltipContent>Undo</TooltipContent>
+        <TooltipContent>Remove last point</TooltipContent>
       </Tooltip>
       <Tooltip>
         <TooltipTrigger asChild>