motion and object masks

web/src/components/settings/MasksAndZones.tsx

@@ -1,24 +1,30 @@
-import { Separator } from "@/components/ui/separator";
-
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PolygonCanvas } from "./PolygonCanvas";
-import { Polygon } from "@/types/canvas";
+import { Polygon, PolygonType } from "@/types/canvas";
 import { interpolatePoints, toRGBColorString } from "@/utils/canvasUtil";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
-import { NewZoneButton } from "./NewZoneButton";
 import { Skeleton } from "../ui/skeleton";
 import { useResizeObserver } from "@/hooks/resize-observer";
-import { LuCopy, LuPencil, LuTrash } from "react-icons/lu";
+import { LuCopy, LuPencil, LuPlusSquare, LuTrash } from "react-icons/lu";
 import { FaDrawPolygon } from "react-icons/fa";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
-import Heading from "../ui/heading";
-import { Input } from "../ui/input";
 import { ZoneEditPane } from "./ZoneEditPane";
+import { Button } from "../ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
 
 const parseCoordinates = (coordinatesString: string) => {
   const coordinates = coordinatesString.split(",");
@@ -33,6 +39,139 @@ const parseCoordinates = (coordinatesString: string) => {
   return points;
 };
 
+type PolygonItemProps = {
+  polygon: Polygon;
+  setAllPolygons: React.Dispatch<React.SetStateAction<Polygon[]>>;
+  index: number;
+  activePolygonIndex: number | undefined;
+  hoveredPolygonIndex: number | null;
+  setHoveredPolygonIndex: (index: number | null) => void;
+  deleteDialogOpen: boolean;
+  setDeleteDialogOpen: (open: boolean) => void;
+  setActivePolygonIndex: (index: number | undefined) => void;
+  setEditPane: (type: PolygonType) => void;
+  handleCopyCoordinates: (index: number) => void;
+};
+
+function PolygonItem({
+  polygon,
+  setAllPolygons,
+  index,
+  activePolygonIndex,
+  hoveredPolygonIndex,
+  setHoveredPolygonIndex,
+  deleteDialogOpen,
+  setDeleteDialogOpen,
+  setActivePolygonIndex,
+  setEditPane,
+  handleCopyCoordinates,
+}: PolygonItemProps) {
+  return (
+    <div
+      key={index}
+      className="flex p-1 rounded-lg flex-row items-center justify-between mx-2 mb-1 transition-background duration-100"
+      onMouseEnter={() => setHoveredPolygonIndex(index)}
+      onMouseLeave={() => setHoveredPolygonIndex(null)}
+      style={{
+        backgroundColor:
+          hoveredPolygonIndex === index
+            ? toRGBColorString(polygon.color, false)
+            : "",
+      }}
+    >
+      {isMobile && <></>}
+      <div
+        className={`flex items-center ${
+          activePolygonIndex === index
+            ? "text-primary"
+            : "text-muted-foreground"
+        }`}
+      >
+        <FaDrawPolygon
+          className="size-4 mr-2"
+          style={{
+            fill: toRGBColorString(polygon.color, true),
+            color: toRGBColorString(polygon.color, true),
+          }}
+        />
+        <p className="cursor-default">{polygon.name}</p>
+      </div>
+      {deleteDialogOpen && (
+        <AlertDialog
+          open={deleteDialogOpen}
+          onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogDescription>
+              Are you sure you want to delete this{" "}
+              {polygon.type.replace("_", " ")}?
+            </AlertDialogDescription>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  setAllPolygons((oldPolygons) => {
+                    return oldPolygons.filter((_, i) => i !== index);
+                  });
+                  setActivePolygonIndex(undefined);
+                }}
+              >
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+      {hoveredPolygonIndex === index && (
+        <div className="flex flex-row gap-2">
+          <div
+            className="cursor-pointer"
+            onClick={() => {
+              setActivePolygonIndex(index);
+              setEditPane(polygon.type);
+            }}
+          >
+            <LuPencil
+              className={`size-4 ${
+                activePolygonIndex === index
+                  ? "text-primary"
+                  : "text-muted-foreground"
+              }`}
+            />
+          </div>
+          <div
+            className="cursor-pointer"
+            onClick={() => handleCopyCoordinates(index)}
+          >
+            <LuCopy
+              className={`size-4 ${
+                activePolygonIndex === index
+                  ? "text-primary"
+                  : "text-muted-foreground"
+              }`}
+            />
+          </div>
+          <div
+            className="cursor-pointer"
+            onClick={() => setDeleteDialogOpen(true)}
+          >
+            <LuTrash
+              className={`size-4 ${
+                activePolygonIndex === index
+                  ? "text-primary fill-primary"
+                  : "text-muted-foreground fill-muted-foreground"
+              }`}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export type ZoneObjects = {
   camera: string;
   zoneName: string;
@@ -41,24 +180,30 @@ export type ZoneObjects = {
 
 type MasksAndZoneProps = {
   selectedCamera: string;
-  setSelectedCamera: React.Dispatch<React.SetStateAction<string>>;
 };
 
-export default function MasksAndZones({
+export default function MasksAndZones({ selectedCamera }: MasksAndZoneProps) {
-  selectedCamera,
-  setSelectedCamera,
-}: MasksAndZoneProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
-  const [zonePolygons, setZonePolygons] = useState<Polygon[]>([]);
+  const [allPolygons, setAllPolygons] = useState<Polygon[]>([]);
+  const [editingPolygons, setEditingPolygons] = useState<Polygon[]>();
   const [zoneObjects, setZoneObjects] = useState<ZoneObjects[]>([]);
   const [activePolygonIndex, setActivePolygonIndex] = useState<
     number | undefined
   >(undefined);
+  const [hoveredPolygonIndex, setHoveredPolygonIndex] = useState<number | null>(
+    null,
+  );
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const editViews = ["zone", "motion_mask", "object_mask", undefined] as const;
+  // const polygonTypes = [
+  //   "zone",
+  //   "motion_mask",
+  //   "object_mask",
+  //   undefined,
+  // ] as const;
 
-  type EditPaneType = (typeof editViews)[number];
+  // type EditPaneType = (typeof polygonTypes)[number];
-  const [editPane, setEditPane] = useState<EditPaneType>(undefined);
+  const [editPane, setEditPane] = useState<PolygonType | undefined>(undefined);
 
   const cameras = useMemo(() => {
     if (!config) {
@@ -121,94 +266,76 @@ export default function MasksAndZones({
     [setZoneObjects],
   );
 
-  const growe = useMemo(() => {
+  // const getCameraAspect = useCallback(
-    if (!cameraConfig) {
+  //   (cam: string) => {
-      return;
+  //     if (!config) {
-    }
+  //       return undefined;
+  //     }
 
-    const aspectRatio = cameraConfig.detect.width / cameraConfig.detect.height;
+  //     const camera = config.cameras[cam];
 
-    if (aspectRatio > 2) {
+  //     if (!camera) {
-      return "aspect-wide";
+  //       return undefined;
-    } else if (aspectRatio < 16 / 9) {
+  //     }
-      if (isDesktop) {
-        return "size-full aspect-tall";
-      } else {
-        return "size-full";
-      }
-    } else {
-      return "size-full aspect-video";
-    }
-  }, [cameraConfig]);
 
-  const getCameraAspect = useCallback(
+  //     return camera.detect.width / camera.detect.height;
-    (cam: string) => {
+  //   },
-      if (!config) {
+  //   [config],
-        return undefined;
+  // );
-      }
-
-      const camera = config.cameras[cam];
-
-      if (!camera) {
-        return undefined;
-      }
-
-      return camera.detect.width / camera.detect.height;
-    },
-    [config],
-  );
-
-  const mainCameraAspect = useMemo(() => {
-    const aspectRatio = getCameraAspect(selectedCamera);
-
-    if (!aspectRatio) {
-      return "normal";
-    } else if (aspectRatio > 2) {
-      return "wide";
-    } else if (aspectRatio < 16 / 9) {
-      return "tall";
-    } else {
-      return "normal";
-    }
-  }, [getCameraAspect, selectedCamera]);
-
-  const grow = useMemo(() => {
-    if (mainCameraAspect == "wide") {
-      return "w-full aspect-wide";
-    } else if (mainCameraAspect == "tall") {
-      if (isDesktop) {
-        return "size-full aspect-tall flex flex-col justify-center";
-      } else {
-        return "size-full";
-      }
-    } else {
-      return "w-full aspect-video";
-    }
-  }, [mainCameraAspect]);
 
   const [{ width: containerWidth, height: containerHeight }] =
     useResizeObserver(containerRef);
 
-  const { width, height } = cameraConfig
+  // const { width: detectWidth, height: detectHeight } = cameraConfig
-    ? cameraConfig.detect
+  //   ? cameraConfig.detect
-    : { width: 1, height: 1 };
+  //   : { width: 1, height: 1 };
-  const aspectRatio = width / height;
+  const aspectRatio = useMemo(() => {
+    if (!config) {
+      return undefined;
+    }
+
+    const camera = config.cameras[selectedCamera];
+
+    if (!camera) {
+      return undefined;
+    }
+
+    return camera.detect.width / camera.detect.height;
+  }, [config, selectedCamera]);
+
+  const detectHeight = useMemo(() => {
+    if (!config) {
+      return undefined;
+    }
+
+    const camera = config.cameras[selectedCamera];
+
+    if (!camera) {
+      return undefined;
+    }
+
+    return camera.detect.height;
+  }, [config, selectedCamera]);
 
   const stretch = true;
-  const fitAspect = 16 / 9;
+  const fitAspect = 1;
-  // console.log(containerRef.current?.clientHeight);
 
   const scaledHeight = useMemo(() => {
-    const scaledHeight =
+    if (containerRef.current && aspectRatio && detectHeight) {
-      aspectRatio < (fitAspect ?? 0)
+      console.log("recalc", Date.now());
-        ? Math.floor(
+      const scaledHeight =
-            Math.min(containerHeight, containerRef.current?.clientHeight),
+        aspectRatio < (fitAspect ?? 0)
-          )
+          ? Math.floor(
-        : Math.floor(containerWidth / aspectRatio);
+              Math.min(containerHeight, containerRef.current?.clientHeight),
-    const finalHeight = stretch ? scaledHeight : Math.min(scaledHeight, height);
+            )
+          : Math.floor(containerWidth / aspectRatio);
+      const finalHeight = stretch
+        ? scaledHeight
+        : Math.min(scaledHeight, detectHeight);
 
-    if (finalHeight > 0) {
+      if (finalHeight > 0) {
-      return finalHeight;
+        return finalHeight;
+      }
     }
 
     return 100;
@@ -217,19 +344,52 @@ export default function MasksAndZones({
     containerWidth,
     containerHeight,
     fitAspect,
-    height,
+    detectHeight,
     stretch,
   ]);
 
-  const scaledWidth = useMemo(
+  const scaledWidth = useMemo(() => {
-    () => Math.ceil(scaledHeight * aspectRatio),
+    if (aspectRatio && scaledHeight) {
-    [scaledHeight, aspectRatio],
+      return Math.ceil(scaledHeight * aspectRatio);
-  );
+    }
+
+    return 100;
+  }, [scaledHeight, aspectRatio]);
+
+  const handleNewPolygon = (type: PolygonType) => {
+    setAllPolygons([
+      ...(allPolygons || []),
+      {
+        points: [],
+        isFinished: false,
+        // isUnsaved: true,
+        type,
+        name: "",
+        camera: selectedCamera,
+        color: [0, 0, 220],
+      },
+    ]);
+    setActivePolygonIndex(allPolygons.length);
+  };
+
+  const handleCancel = useCallback(() => {
+    setEditPane(undefined);
+    // setAllPolygons(allPolygons.filter((poly) => !poly.isUnsaved));
+    setActivePolygonIndex(undefined);
+    setHoveredPolygonIndex(null);
+  }, []);
+
+  const handleSave = useCallback(() => {
+    setAllPolygons([...(editingPolygons ?? [])]);
+    setActivePolygonIndex(undefined);
+    setEditPane(undefined);
+    setHoveredPolygonIndex(null);
+  }, [editingPolygons]);
 
   const handleCopyCoordinates = useCallback(
     (index: number) => {
-      if (zonePolygons) {
+      if (allPolygons && scaledWidth) {
-        const poly = zonePolygons[index];
+        const poly = allPolygons[index];
         copy(
           interpolatePoints(poly.points, scaledWidth, scaledHeight, 1, 1)
             .map((point) => `${point[0]},${point[1]}`)
@@ -240,13 +400,14 @@ export default function MasksAndZones({
         toast.error("Could not copy coordinates to clipboard.");
       }
     },
-    [zonePolygons, scaledHeight, scaledWidth],
+    [allPolygons, scaledHeight, scaledWidth],
   );
 
   useEffect(() => {
-    if (cameraConfig && containerRef.current) {
+    if (cameraConfig && containerRef.current && scaledWidth) {
-      setZonePolygons(
+      setAllPolygons([
-        Object.entries(cameraConfig.zones).map(([name, zoneData]) => ({
+        ...Object.entries(cameraConfig.zones).map(([name, zoneData]) => ({
+          type: "zone" as PolygonType, // Add the type property here
           camera: cameraConfig.name,
           name,
           points: interpolatePoints(
@@ -259,7 +420,46 @@ export default function MasksAndZones({
           isFinished: true,
           color: zoneData.color,
         })),
-      );
+        ...Object.entries(cameraConfig.motion.mask).map(([, maskData]) => ({
+          type: "motion_mask" as PolygonType,
+          camera: cameraConfig.name,
+          name: "motion_mask",
+          points: interpolatePoints(
+            parseCoordinates(maskData),
+            1,
+            1,
+            scaledWidth,
+            scaledHeight,
+          ),
+          isFinished: true,
+          color: [0, 0, 255],
+        })),
+        ...Object.entries(cameraConfig.objects.filters).flatMap(
+          ([objectName, { mask }]): Polygon[] =>
+            mask !== null && mask !== undefined
+              ? mask.flatMap((maskItem) =>
+                  maskItem !== null && maskItem !== undefined
+                    ? [
+                        {
+                          type: "object_mask" as PolygonType,
+                          camera: cameraConfig.name,
+                          name: objectName,
+                          points: interpolatePoints(
+                            parseCoordinates(maskItem),
+                            1,
+                            1,
+                            scaledWidth,
+                            scaledHeight,
+                          ),
+                          isFinished: true,
+                          color: [128, 128, 128],
+                        },
+                      ]
+                    : [],
+                )
+              : [],
+        ),
+      ]);
 
       setZoneObjects(
         Object.entries(cameraConfig.zones).map(([name, zoneData]) => ({
@@ -273,6 +473,13 @@ export default function MasksAndZones({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cameraConfig, containerRef]);
 
+  useEffect(() => {
+    if (editPane === undefined) {
+      setEditingPolygons([...allPolygons]);
+      console.log(allPolygons);
+    }
+  }, [setEditingPolygons, allPolygons, editPane]);
+
   // useEffect(() => {
   //   console.log(
   //     "config zone objects",
@@ -297,120 +504,133 @@ export default function MasksAndZones({
 
   return (
     <>
-      {cameraConfig && zonePolygons && (
+      {cameraConfig && allPolygons && (
         <div className="flex flex-col md:flex-row size-full">
           <Toaster position="top-center" />
           <div className="flex flex-col order-last w-full overflow-y-auto md:w-3/12 md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
-            {/* <div className="flex mb-3">
-              <Separator />
-            </div> */}
             {editPane == "zone" && (
               <ZoneEditPane
-                polygons={zonePolygons}
+                polygons={allPolygons}
                 activePolygonIndex={activePolygonIndex}
-                onCancel={() => {
+                onCancel={handleCancel}
-                  setEditPane(undefined);
+                onSave={handleSave}
-                  setActivePolygonIndex(undefined);
-                }}
               />
             )}
             {editPane == "motion_mask" && (
               <ZoneEditPane
-                polygons={zonePolygons}
+                polygons={allPolygons}
                 activePolygonIndex={activePolygonIndex}
-                onCancel={() => {
+                onCancel={handleCancel}
-                  setEditPane(undefined);
-                  setActivePolygonIndex(undefined);
-                }}
               />
             )}
             {editPane == "object_mask" && (
               <ZoneEditPane
-                polygons={zonePolygons}
+                polygons={allPolygons}
                 activePolygonIndex={activePolygonIndex}
-                onCancel={() => {
+                onCancel={handleCancel}
-                  setEditPane(undefined);
-                  setActivePolygonIndex(undefined);
-                }}
               />
             )}
             {editPane == undefined && (
               <>
                 <div className="flex flex-row justify-between items-center mb-3">
                   <div className="text-md">Zones</div>
-                  <NewZoneButton
+                  <Button
-                    camera={cameraConfig.name}
+                    variant="ghost"
-                    polygons={zonePolygons}
+                    className="h-8 px-0"
-                    setPolygons={setZonePolygons}
+                    onClick={() => {
-                    activePolygonIndex={activePolygonIndex}
+                      setEditPane("zone");
-                    setActivePolygonIndex={setActivePolygonIndex}
+                      handleNewPolygon("zone");
-                  />
+                    }}
-                </div>
-                {zonePolygons.map((polygon, index) => (
-                  <div
-                    key={index}
-                    className="flex p-1 rounded-lg flex-row items-center justify-between mx-2 mb-1"
-                    // style={{
-                    //   backgroundColor:
-                    //     activePolygonIndex === index
-                    //       ? toRGBColorString(polygon.color, false)
-                    //       : "",
-                    // }}
                   >
-                    <div
+                    <LuPlusSquare />
-                      className={`flex items-center ${activePolygonIndex === index ? "text-primary" : "text-muted-foreground"}`}
+                  </Button>
-                    >
+                </div>
-                      <FaDrawPolygon
+                {allPolygons
-                        className="size-4 mr-2"
+                  .flatMap((polygon, index) =>
-                        style={{
+                    polygon.type === "zone" ? [{ polygon, index }] : [],
-                          fill: toRGBColorString(polygon.color, true),
+                  )
-                          color: toRGBColorString(polygon.color, true),
+                  .map(({ polygon, index }) => (
-                        }}
+                    <PolygonItem
-                      />
+                      key={index}
-                      <p>{polygon.name}</p>
+                      polygon={polygon}
-                    </div>
+                      index={index}
-                    <div className="flex flex-row gap-2">
+                      activePolygonIndex={activePolygonIndex}
-                      <div
+                      hoveredPolygonIndex={hoveredPolygonIndex}
-                        className="cursor-pointer"
+                      setHoveredPolygonIndex={setHoveredPolygonIndex}
-                        onClick={() => {
+                      deleteDialogOpen={deleteDialogOpen}
-                          setActivePolygonIndex(index);
+                      setDeleteDialogOpen={setDeleteDialogOpen}
-                          setEditPane("zone");
+                      setActivePolygonIndex={setActivePolygonIndex}
-                          // if (activePolygonIndex == index) {
+                      setEditPane={setEditPane}
-                          //   setActivePolygonIndex(null);
+                      setAllPolygons={setAllPolygons}
-
+                      handleCopyCoordinates={handleCopyCoordinates}
-                          // } else {
+                    />
-                          //   setActivePolygonIndex(index);
+                  ))}
-                          // }
+                <div className="flex flex-row justify-between items-center my-3">
-                        }}
+                  <div className="text-md">Motion Masks</div>
-                      >
+                  <Button
-                        <LuPencil
+                    variant="ghost"
-                          className={`size-4 ${activePolygonIndex === index ? "text-primary" : "text-muted-foreground"}`}
+                    className="h-8 px-0"
-                        />
+                    onClick={() => {
-                      </div>
+                      setEditPane("motion_mask");
-                      <div
+                      handleNewPolygon("motion_mask");
-                        className="cursor-pointer"
+                    }}
-                        onClick={() => handleCopyCoordinates(index)}
+                  >
-                      >
+                    <LuPlusSquare />
-                        <LuCopy
+                  </Button>
-                          className={`size-4 ${activePolygonIndex === index ? "text-primary" : "text-muted-foreground"}`}
+                </div>
-                        />
+                {allPolygons
-                      </div>
+                  .flatMap((polygon, index) =>
-                      <div
+                    polygon.type === "motion_mask" ? [{ polygon, index }] : [],
-                        className="cursor-pointer"
+                  )
-                        onClick={() => {
+                  .map(({ polygon, index }) => (
-                          setZonePolygons((oldPolygons) => {
+                    <PolygonItem
-                            return oldPolygons.filter((_, i) => i !== index);
+                      key={index}
-                          });
+                      polygon={polygon}
-                          setActivePolygonIndex(undefined);
+                      index={index}
-                        }}
+                      activePolygonIndex={activePolygonIndex}
-                      >
+                      hoveredPolygonIndex={hoveredPolygonIndex}
-                        <LuTrash
+                      setHoveredPolygonIndex={setHoveredPolygonIndex}
-                          className={`size-4 ${activePolygonIndex === index ? "text-primary fill-primary" : "text-muted-foreground fill-muted-foreground"}`}
+                      deleteDialogOpen={deleteDialogOpen}
-                        />
+                      setDeleteDialogOpen={setDeleteDialogOpen}
-                      </div>
+                      setActivePolygonIndex={setActivePolygonIndex}
-                    </div>
+                      setEditPane={setEditPane}
-                  </div>
+                      setAllPolygons={setAllPolygons}
-                ))}
+                      handleCopyCoordinates={handleCopyCoordinates}
+                    />
+                  ))}
+                <div className="flex flex-row justify-between items-center my-3">
+                  <div className="text-md">Object Masks</div>
+                  <Button
+                    variant="ghost"
+                    className="h-8 px-0"
+                    onClick={() => {
+                      setEditPane("motion_mask");
+                      handleNewPolygon("motion_mask");
+                    }}
+                  >
+                    <LuPlusSquare />
+                  </Button>
+                </div>
+                {allPolygons
+                  .flatMap((polygon, index) =>
+                    polygon.type === "object_mask" ? [{ polygon, index }] : [],
+                  )
+                  .map(({ polygon, index }) => (
+                    <PolygonItem
+                      key={index}
+                      polygon={polygon}
+                      index={index}
+                      activePolygonIndex={activePolygonIndex}
+                      hoveredPolygonIndex={hoveredPolygonIndex}
+                      setHoveredPolygonIndex={setHoveredPolygonIndex}
+                      deleteDialogOpen={deleteDialogOpen}
+                      setDeleteDialogOpen={setDeleteDialogOpen}
+                      setActivePolygonIndex={setActivePolygonIndex}
+                      setEditPane={setEditPane}
+                      setAllPolygons={setAllPolygons}
+                      handleCopyCoordinates={handleCopyCoordinates}
+                    />
+                  ))}
               </>
             )}
             {/* <Table>
@@ -422,7 +642,7 @@ export default function MasksAndZones({
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {zonePolygons.map((polygon, index) => (
+                {allPolygons.map((polygon, index) => (
                   <TableRow key={index}>
                     <TableCell className="font-medium">
                       {polygon.name}
@@ -469,16 +689,16 @@ export default function MasksAndZones({
             </div>
             <ZoneControls
               camera={cameraConfig.name}
-              polygons={zonePolygons}
+              polygons={allPolygons}
-              setPolygons={setZonePolygons}
+              setPolygons={setAllPolygons}
               activePolygonIndex={activePolygonIndex}
               setActivePolygonIndex={setActivePolygonIndex}
             />
             <div className="flex flex-col justify-center items-center m-auto w-[30%] bg-secondary">
               <pre style={{ whiteSpace: "pre-wrap" }}>
                 {JSON.stringify(
-                  zonePolygons &&
+                  allPolygons &&
-                    zonePolygons.map((polygon) =>
+                    allPolygons.map((polygon) =>
                       interpolatePoints(
                         polygon.points,
                         scaledWidth,
@@ -503,9 +723,11 @@ export default function MasksAndZones({
                   camera={cameraConfig.name}
                   width={scaledWidth}
                   height={scaledHeight}
-                  polygons={zonePolygons}
+                  scale={1}
-                  setPolygons={setZonePolygons}
+                  polygons={editingPolygons}
+                  setPolygons={setEditingPolygons}
                   activePolygonIndex={activePolygonIndex}
+                  hoveredPolygonIndex={hoveredPolygonIndex}
                 />
               ) : (
                 <Skeleton className="w-full h-full" />

web/src/components/settings/NewZoneButton.tsx

@@ -73,6 +73,7 @@ export function NewZoneButton({
       {
         points: [],
         isFinished: false,
+        // isUnsaved: true,
         name: zoneName,
         camera: camera,
         color: [220, 0, 0],

web/src/components/settings/PolygonCanvas.tsx

@@ -1,27 +1,32 @@
 import React, { useMemo, useRef, useState, useEffect } from "react";
 import PolygonDrawer from "./PolygonDrawer";
-import { Stage, Layer, Image } from "react-konva";
+import { Stage, Layer, Image, Text } from "react-konva";
 import Konva from "konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { Polygon } from "@/types/canvas";
 import { useApiHost } from "@/api";
+import { getAveragePoint } from "@/utils/canvasUtil";
 
 type PolygonCanvasProps = {
   camera: string;
   width: number;
   height: number;
+  scale: number;
   polygons: Polygon[];
   setPolygons: React.Dispatch<React.SetStateAction<Polygon[]>>;
   activePolygonIndex: number | undefined;
+  hoveredPolygonIndex: number | null;
 };
 
 export function PolygonCanvas({
   camera,
   width,
   height,
+  scale,
   polygons,
   setPolygons,
   activePolygonIndex,
+  hoveredPolygonIndex,
 }: PolygonCanvasProps) {
   const [image, setImage] = useState<HTMLImageElement | undefined>();
   const imageRef = useRef<Konva.Image | null>(null);
@@ -68,7 +73,7 @@ export function PolygonCanvas({
   };
 
   const handleMouseDown = (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
-    if (!activePolygonIndex || !polygons) {
+    if (activePolygonIndex === undefined || !polygons) {
       return;
     }
 
@@ -103,7 +108,7 @@ export function PolygonCanvas({
   const handleMouseOverStartPoint = (
     e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
-    if (!activePolygonIndex || !polygons) {
+    if (activePolygonIndex === undefined || !polygons) {
       return;
     }
 
@@ -118,7 +123,7 @@ export function PolygonCanvas({
   ) => {
     e.currentTarget.scale({ x: 1, y: 1 });
 
-    if (!activePolygonIndex || !polygons) {
+    if (activePolygonIndex === undefined || !polygons) {
       return;
     }
 
@@ -134,7 +139,7 @@ export function PolygonCanvas({
   const handlePointDragMove = (
     e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
-    if (!activePolygonIndex || !polygons) {
+    if (activePolygonIndex === undefined || !polygons) {
       return;
     }
 
@@ -165,7 +170,7 @@ export function PolygonCanvas({
   };
 
   const handleGroupDragEnd = (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
-    if (activePolygonIndex && e.target.name() === "polygon") {
+    if (activePolygonIndex !== undefined && e.target.name() === "polygon") {
       const updatedPolygons = [...polygons];
       const activePolygon = updatedPolygons[activePolygonIndex];
       const result: number[][] = [];
@@ -186,6 +191,8 @@ export function PolygonCanvas({
       ref={stageRef}
       width={width}
       height={height}
+      scaleX={scale}
+      scaleY={scale}
       onMouseDown={handleMouseDown}
       onTouchStart={handleMouseDown}
     >
@@ -199,18 +206,34 @@ export function PolygonCanvas({
           height={height}
         />
         {polygons?.map((polygon, index) => (
-          <PolygonDrawer
+          <React.Fragment key={index}>
-            key={index}
+            <PolygonDrawer
-            points={polygon.points}
+              key={index}
-            flattenedPoints={flattenPoints(polygon.points)}
+              points={polygon.points}
-            isActive={index === activePolygonIndex}
+              flattenedPoints={flattenPoints(polygon.points)}
-            isFinished={polygon.isFinished}
+              isActive={index === activePolygonIndex}
-            color={polygon.color}
+              isHovered={index === hoveredPolygonIndex}
-            handlePointDragMove={handlePointDragMove}
+              isFinished={polygon.isFinished}
-            handleGroupDragEnd={handleGroupDragEnd}
+              color={polygon.color}
-            handleMouseOverStartPoint={handleMouseOverStartPoint}
+              handlePointDragMove={handlePointDragMove}
-            handleMouseOutStartPoint={handleMouseOutStartPoint}
+              handleGroupDragEnd={handleGroupDragEnd}
-          />
+              handleMouseOverStartPoint={handleMouseOverStartPoint}
+              handleMouseOutStartPoint={handleMouseOutStartPoint}
+            />
+            {index === hoveredPolygonIndex && (
+              <Text
+                text={polygon.name}
+                align="left"
+                verticalAlign="top"
+                x={
+                  getAveragePoint(flattenPoints(polygon.points)).x
+                  // - (polygon.name.length * 16 * 0.6) / 2
+                }
+                y={getAveragePoint(flattenPoints(polygon.points)).y} //- 16 / 2}
+                fontSize={16}
+              />
+            )}
+          </React.Fragment>
         ))}
       </Layer>
     </Stage>

web/src/components/settings/PolygonDrawer.tsx

@@ -9,6 +9,7 @@ type PolygonDrawerProps = {
   points: number[][];
   flattenedPoints: number[];
   isActive: boolean;
+  isHovered: boolean;
   isFinished: boolean;
   color: number[];
   handlePointDragMove: (e: KonvaEventObject<MouseEvent | TouchEvent>) => void;
@@ -25,6 +26,7 @@ export default function PolygonDrawer({
   points,
   flattenedPoints,
   isActive,
+  isHovered,
   isFinished,
   color,
   handlePointDragMove,
@@ -99,7 +101,7 @@ export default function PolygonDrawer({
         stroke={colorString(true)}
         strokeWidth={3}
         closed={isFinished}
-        fill={colorString(isActive ? true : false)}
+        fill={colorString(isActive || isHovered ? true : false)}
       />
       {points.map((point, index) => {
         if (!isActive) {

web/src/components/settings/ZoneEditPane.tsx

@@ -16,7 +16,7 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { useEffect, useMemo, useState } from "react";
 import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
 import { FaObjectGroup } from "react-icons/fa";
-import { ATTRIBUTES, FrigateConfig } from "@/types/frigateConfig";
+import { ATTRIBUTES, CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { isMobile } from "react-device-detect";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -88,7 +88,9 @@ export function ZoneObjectSelector({
   }, [cameraConfig, zoneName]);
 
   const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
-    zoneLabels,
+    zoneLabels.every((label, index) => label === allLabels[index])
+      ? undefined
+      : zoneLabels,
   );
 
   useEffect(() => {
@@ -103,7 +105,7 @@ export function ZoneObjectSelector({
             className="mx-2 text-primary cursor-pointer"
             htmlFor="allLabels"
           >
-            All Labels
+            All Objects
           </Label>
           <Switch
             className="ml-1"
@@ -160,25 +162,65 @@ export function ZoneObjectSelector({
   );
 }
 
-const formSchema = z.object({
-  name: z.string().min(2, {
-    message: "Zone name must be at least 2 characters.",
-  }),
-  inertia: z.number(),
-  loitering_time: z.number(),
-});
-
 type ZoneEditPaneProps = {
   polygons: Polygon[];
   activePolygonIndex?: number;
-  onCancel: () => void;
+  onSave?: () => void;
+  onCancel?: () => void;
 };
 
 export function ZoneEditPane({
   polygons,
   activePolygonIndex,
+  onSave,
   onCancel,
 }: ZoneEditPaneProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const cameras = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.values(config.cameras)
+      .filter((conf) => conf.ui.dashboard && conf.enabled)
+      .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
+  }, [config]);
+
+  const formSchema = z.object({
+    name: z
+      .string()
+      .min(2, {
+        message: "Zone name must be at least 2 characters.",
+      })
+      .transform((val: string) => val.trim().replace(/\s+/g, "_"))
+      .refine(
+        (value: string) => {
+          return !cameras.map((cam) => cam.name).includes(value);
+        },
+        {
+          message: "Zone name must not be the name of a camera.",
+        },
+      )
+      .refine(
+        (value: string) => {
+          return !polygons
+            .filter((polygon, index) => index !== activePolygonIndex)
+            .map((polygon) => polygon.name)
+            .includes(value);
+        },
+        {
+          message: "Zone name already exists on this camera.",
+        },
+      ),
+    inertia: z.coerce.number().min(1, {
+      message: "Inertia must be above 0.",
+    }),
+    loitering_time: z.coerce.number().min(0, {
+      message: "Loitering time must be greater than or equal to 0.",
+    }),
+  });
+
   const polygon = useMemo(() => {
     if (polygons && activePolygonIndex !== undefined) {
       return polygons[activePolygonIndex];
@@ -189,15 +231,27 @@ export function ZoneEditPane({
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
+    mode: "onChange",
     defaultValues: {
-      name: "",
+      name: polygon?.name ?? "",
-      inertia: 3,
+      inertia:
-      loitering_time: 10,
+        ((polygon &&
+          polygon.camera &&
+          polygon.name &&
+          config?.cameras[polygon.camera]?.zones[polygon.name]
+            ?.inertia) as number) ?? 3,
+      loitering_time:
+        ((polygon &&
+          polygon.camera &&
+          polygon.name &&
+          config?.cameras[polygon.camera]?.zones[polygon.name]
+            ?.loitering_time) as number) ?? 0,
     },
   });
 
   function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
+    console.log(values, polygons[activePolygonIndex]);
+    onSave();
   }
 
   if (!polygon) {
@@ -206,7 +260,7 @@ export function ZoneEditPane({
 
   return (
     <>
-      <Heading as="h3">Edit Zone</Heading>
+      <Heading as="h3">Zone</Heading>
       <div className="flex my-3">
         <Separator className="bg-secondary" />
       </div>
@@ -220,10 +274,7 @@ export function ZoneEditPane({
               <FormItem>
                 <FormLabel>Name</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input placeholder={polygon.name} {...field} />
-                    placeholder={polygon.name ?? "Enter a name..."}
-                    {...field}
-                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -285,7 +336,57 @@ export function ZoneEditPane({
               }}
             />
           </FormItem>
-          <div className="flex flex-row gap-2">
+          <div className="flex my-3">
+            <Separator className="bg-secondary" />
+          </div>
+          <FormItem>
+            <FormLabel>Alerts and Detections</FormLabel>
+            <FormDescription>
+              When an object enters this zone, ensure it is marked as an alert
+              or detection.
+            </FormDescription>
+            <FormControl>
+              <div className="flex flex-col gap-2.5">
+                <div className="flex flex-row justify-between items-center">
+                  <Label
+                    className="mx-2 text-primary cursor-pointer"
+                    htmlFor="mark_alert"
+                  >
+                    Required for Alert
+                  </Label>
+                  <Switch
+                    className="ml-1"
+                    id="mark_alert"
+                    checked={false}
+                    onCheckedChange={(isChecked) => {
+                      if (isChecked) {
+                        return;
+                      }
+                    }}
+                  />
+                </div>
+                <div className="flex flex-row justify-between items-center">
+                  <Label
+                    className="mx-2 text-primary cursor-pointer"
+                    htmlFor="mark_detection"
+                  >
+                    Required for Detection
+                  </Label>
+                  <Switch
+                    className="ml-1"
+                    id="mark_detection"
+                    checked={false}
+                    onCheckedChange={(isChecked) => {
+                      if (isChecked) {
+                        return;
+                      }
+                    }}
+                  />
+                </div>
+              </div>
+            </FormControl>
+          </FormItem>
+          <div className="flex flex-row gap-2 pt-5">
             <Button className="flex flex-1" onClick={onCancel}>
               Cancel
             </Button>

web/src/types/canvas.ts

@@ -1,7 +1,11 @@
+export type PolygonType = "zone" | "motion_mask" | "object_mask";
+
 export type Polygon = {
   camera: string;
   name: string;
+  type: PolygonType;
   points: number[][];
   isFinished: boolean;
+  // isUnsaved: boolean;
   color: number[];
 };

web/src/types/frigateConfig.ts

@@ -108,7 +108,7 @@ export interface CameraConfig {
   objects: {
     filters: {
       [objectName: string]: {
-        mask: string | null;
+        mask: string[] | null;
         max_area: number;
         max_ratio: number;
         min_area: number;
@@ -201,6 +201,7 @@ export interface CameraConfig {
       coordinates: string;
       filters: Record<string, unknown>;
       inertia: number;
+      loitering_time: number;
       objects: string[];
       color: number[];
     };
@@ -330,7 +331,7 @@ export interface FrigateConfig {
   objects: {
     filters: {
       [objectName: string]: {
-        mask: string | null;
+        mask: string[] | null;
         max_area: number;
         max_ratio: number;
         min_area: number;