New mask/zone editor and motion tuner (#11020)

* initial working konva * working multi polygons * multi zones * clean up * new zone dialog * clean up * relative coordinates and colors * fix color order * better motion tuner * objects for zones * progress * merge dev * edit pane * motion and object masks * filtering * add objects and unsaved to type * motion tuner, edit controls, tooltips * object and motion edit panes * polygon item component, switch color, object form, hover cards * working zone edit pane * working motion masks * object masks and deletion of all types * use FilterSwitch * motion tuner fixes and tweaks * clean up * tweaks * spaces in camera name * tweaks * allow dragging of points while drawing polygon * turn off editing mode when switching camera * limit interpolated coordinates and use crosshair cursor * padding * fix tooltip trigger for icons * konva tweaks * consolidate * fix top menu items on mobile
2024-04-19 06:34:07 -05:00
parent a1905f5604
commit 5f15641b1b
39 changed files with 4170 additions and 65 deletions
--- a/web/src/components/settings/PolygonEditControls.tsx
+++ b/web/src/components/settings/PolygonEditControls.tsx
@@ -0,0 +1,81 @@
+import { Polygon } from "@/types/canvas";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { MdOutlineRestartAlt, MdUndo } from "react-icons/md";
+import { Button } from "../ui/button";
+
+type PolygonEditControlsProps = {
+  polygons: Polygon[];
+  setPolygons: React.Dispatch<React.SetStateAction<Polygon[]>>;
+  activePolygonIndex: number | undefined;
+};
+
+export default function PolygonEditControls({
+  polygons,
+  setPolygons,
+  activePolygonIndex,
+}: PolygonEditControlsProps) {
+  const undo = () => {
+    if (activePolygonIndex === undefined || !polygons) {
+      return;
+    }
+
+    const updatedPolygons = [...polygons];
+    const activePolygon = updatedPolygons[activePolygonIndex];
+    updatedPolygons[activePolygonIndex] = {
+      ...activePolygon,
+      points: [...activePolygon.points.slice(0, -1)],
+      isFinished: false,
+    };
+    setPolygons(updatedPolygons);
+  };
+
+  const reset = () => {
+    if (activePolygonIndex === undefined || !polygons) {
+      return;
+    }
+
+    const updatedPolygons = [...polygons];
+    const activePolygon = updatedPolygons[activePolygonIndex];
+    updatedPolygons[activePolygonIndex] = {
+      ...activePolygon,
+      points: [],
+      isFinished: false,
+    };
+    setPolygons(updatedPolygons);
+  };
+
+  if (activePolygonIndex === undefined || !polygons) {
+    return;
+  }
+
+  return (
+    <div className="flex flex-row justify-center gap-2">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="default"
+            className="size-6 p-1 rounded-md"
+            disabled={!polygons[activePolygonIndex].points.length}
+            onClick={undo}
+          >
+            <MdUndo className="text-secondary-foreground" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Undo</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="default"
+            className="size-6 p-1 rounded-md"
+            disabled={!polygons[activePolygonIndex].points.length}
+            onClick={reset}
+          >
+            <MdOutlineRestartAlt className="text-secondary-foreground" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Reset</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}