Mask/zone editor fixes (#22732)

* add guards to reject missing sub commands * mask/zone bugfixes - fix websocket crash when creating a new mask or zone before a name is assigned - fix deleted masks and zones not disappearing from the list until navigating away - fix deleting profile override not reverting to the base mask in the list - fix inertia defaulting to nan * disable save button on invalid form state * fix validation for speed estimation * ensure polygon is closed before allowing save * require all masks and zones to be on the base config * clarify dialog message and tooltip when removing an override * clarify docs
2026-04-03 05:44:52 +03:00 · 2026-04-02 09:15:51 -05:00 · 2026-04-02 09:15:51 -05:00 · 5059311c9d
commit 5059311c9d
parent adc8c2a6e8
9 changed files with 235 additions and 86 deletions
--- a/docs/docs/configuration/profiles.md
+++ b/docs/docs/configuration/profiles.md
@ -120,7 +120,7 @@ The following camera configuration sections can be overridden in a profile:

 :::note

-Only the fields you explicitly set in a profile override are applied. All other fields retain their base configuration values. For zones, profile zones are merged with the camera's base zones — any zone defined in the profile will override or add to the base zones.
+Only the fields you explicitly set in a profile override are applied. All other fields retain their base configuration values. For masks and zones, profile zones **override** the camera's base masks and zones. If configuring profiles via YAML, you should not define masks or zones in profiles that are not defined in the base config.

 :::

--- a/frigate/api/camera.py
+++ b/frigate/api/camera.py
@ -1224,6 +1224,15 @@ def camera_set(
            status_code=400,
        )

+    if not sub_command and feature in _SUB_COMMAND_FEATURES:
+        return JSONResponse(
+            content={
+                "success": False,
+                "message": f"Feature '{feature}' requires a sub-command (e.g. mask or zone name)",
+            },
+            status_code=400,
+        )
+
    if camera_name == "*":
        cameras = list(frigate_config.cameras.keys())
    elif camera_name not in frigate_config.cameras:
--- a/frigate/comms/dispatcher.py
+++ b/frigate/comms/dispatcher.py
@ -118,10 +118,21 @@ class Dispatcher:

            try:
                if command_type == "set":
+                    # Commands that require a sub-command (mask/zone name)
+                    sub_command_required = {
+                        "motion_mask",
+                        "object_mask",
+                        "zone",
+                    }
                    if sub_command:
                        self._camera_settings_handlers[command](
                            camera_name, sub_command, payload
                        )
+                    elif command in sub_command_required:
+                        logger.error(
+                            "Command %s requires a sub-command (mask/zone name)",
+                            command,
+                        )
                    else:
                        self._camera_settings_handlers[command](camera_name, payload)
                elif command_type == "ptz":
--- a/web/public/locales/en/views/settings.json
+++ b/web/public/locales/en/views/settings.json
@ -539,6 +539,7 @@
    },
    "restart_required": "Restart required (masks/zones changed)",
    "disabledInConfig": "Item is disabled in the config file",
+    "addDisabledProfile": "Add to the base config first, then override in the profile",
    "profileBase": "(base)",
    "profileOverride": "(override)",
    "toast": {
@ -613,6 +614,10 @@
          "desc": "Are you sure you want to delete the {{type}} <em>{{name}}</em>?",
          "success": "{{name}} has been deleted."
        },
+        "revertOverride": {
+          "title": "Revert to Base Config",
+          "desc": "This will remove the profile override for the {{type}} <em>{{name}}</em> and revert to the base configuration."
+        },
        "error": {
          "mustBeFinished": "Polygon drawing must be finished before saving."
        }
--- a/web/src/components/settings/MotionMaskEditPane.tsx
+++ b/web/src/components/settings/MotionMaskEditPane.tsx
@ -74,9 +74,11 @@ export default function MotionMaskEditPane({
    }
  }, [polygons, activePolygonIndex]);

+  const maskCamera = polygon?.camera || "";
+  const maskName = polygon?.name || "";
  const { send: sendMotionMaskState } = useMotionMaskState(
-    polygon?.camera || "",
-    polygon?.name || "",
+    maskCamera,
+    maskName,
  );

  const cameraConfig = useMemo(() => {
@ -154,7 +156,7 @@ export default function MotionMaskEditPane({
      message: t("masksAndZones.form.name.error.mustNotBeEmpty"),
    }),
    enabled: z.boolean(),
-    isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
+    isFinished: z.boolean().refine((val) => val === true, {
      message: t("masksAndZones.form.polygonDrawing.error.mustBeFinished"),
    }),
  });
@ -170,6 +172,12 @@ export default function MotionMaskEditPane({
    },
  });

+  useEffect(() => {
+    if (polygon?.isFinished !== undefined) {
+      form.setValue("isFinished", polygon.isFinished, { shouldValidate: true });
+    }
+  }, [polygon?.isFinished, form]);
+
  const saveToConfig = useCallback(
    async ({
      name: maskId,
@ -250,8 +258,8 @@ export default function MotionMaskEditPane({
              },
            );
            updateConfig();
-            // Only publish WS state for base config
-            if (!editingProfile) {
+            // Only publish WS state for base config when mask has a name
+            if (!editingProfile && maskName) {
              sendMotionMaskState(enabled ? "ON" : "OFF");
            }
          } else {
@ -291,6 +299,7 @@ export default function MotionMaskEditPane({
      cameraConfig,
      t,
      sendMotionMaskState,
+      maskName,
      editingProfile,
    ],
  );
@ -449,7 +458,7 @@ export default function MotionMaskEditPane({
                <Button
                  variant="select"
                  aria-label={t("button.save", { ns: "common" })}
-                  disabled={isLoading}
+                  disabled={isLoading || !form.formState.isValid}
                  className="flex flex-1"
                  type="submit"
                >
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@ -80,9 +80,10 @@ export default function ObjectMaskEditPane({
    }
  }, [polygons, activePolygonIndex]);

+  const maskName = polygon?.name || "";
  const { send: sendObjectMaskState } = useObjectMaskState(
    polygon?.camera || "",
-    polygon?.name || "",
+    maskName,
  );

  const cameraConfig = useMemo(() => {
@ -143,7 +144,7 @@ export default function ObjectMaskEditPane({
    }),
    enabled: z.boolean(),
    objects: z.string(),
-    isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
+    isFinished: z.boolean().refine((val) => val === true, {
      message: t("masksAndZones.form.polygonDrawing.error.mustBeFinished"),
    }),
  });
@ -160,6 +161,12 @@ export default function ObjectMaskEditPane({
    },
  });

+  useEffect(() => {
+    if (polygon?.isFinished !== undefined) {
+      form.setValue("isFinished", polygon.isFinished, { shouldValidate: true });
+    }
+  }, [polygon?.isFinished, form]);
+
  const saveToConfig = useCallback(
    async ({
      name: maskId,
@ -256,8 +263,8 @@ export default function ObjectMaskEditPane({
              },
            );
            updateConfig();
-            // Only publish WS state for base config
-            if (!editingProfile) {
+            // Only publish WS state for base config when mask has a name
+            if (!editingProfile && maskName) {
              sendObjectMaskState(enabled ? "ON" : "OFF");
            }
          } else {
@ -300,6 +307,7 @@ export default function ObjectMaskEditPane({
      cameraConfig,
      t,
      sendObjectMaskState,
+      maskName,
      editingProfile,
    ],
  );
@ -454,7 +462,7 @@ export default function ObjectMaskEditPane({
                </Button>
                <Button
                  variant="select"
-                  disabled={isLoading}
+                  disabled={isLoading || !form.formState.isValid}
                  className="flex flex-1"
                  aria-label={t("button.save", { ns: "common" })}
                  type="submit"
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@ -30,7 +30,6 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { reviewQueries } from "@/utils/zoneEdutUtil";
 import IconWrapper from "../ui/icon-wrapper";
-import { buttonVariants } from "../ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { cn } from "@/lib/utils";
@ -51,6 +50,7 @@ type PolygonItemProps = {
  setLoadingPolygonIndex: (index: number | undefined) => void;
  editingProfile?: string | null;
  allProfileNames?: string[];
+  onDeleted?: () => void;
 };

 export default function PolygonItem({
@ -67,6 +67,7 @@ export default function PolygonItem({
  setLoadingPolygonIndex,
  editingProfile,
  allProfileNames,
+  onDeleted,
 }: PolygonItemProps) {
  const { t } = useTranslation("views/settings");
  const { data: config, mutate: updateConfig } =
@ -152,7 +153,19 @@ export default function PolygonItem({
            cameraConfig?.review.alerts.required_zones || [],
            cameraConfig?.review.detections.required_zones || [],
          );
-          url = `cameras.${polygon.camera}.zones.${polygon.name}${alertQueries}${detectionQueries}`;
+          // Also delete from profiles that have overrides for this zone
+          let profileQueries = "";
+          if (allProfileNames && cameraConfig) {
+            for (const profileName of allProfileNames) {
+              if (
+                cameraConfig.profiles?.[profileName]?.zones?.[polygon.name] !==
+                undefined
+              ) {
+                profileQueries += `&cameras.${polygon.camera}.profiles.${profileName}.zones.${polygon.name}`;
+              }
+            }
+          }
+          url = `cameras.${polygon.camera}.zones.${polygon.name}${alertQueries}${detectionQueries}${profileQueries}`;
        }

        await axios
@ -169,6 +182,7 @@ export default function PolygonItem({
                { position: "top-center" },
              );
              updateConfig();
+              onDeleted?.();
            } else {
              toast.error(
                t("toast.save.error.title", {
@ -211,11 +225,41 @@ export default function PolygonItem({
                },
              };

+      let cameraUpdate: Record<string, unknown>;
+      if (editingProfile) {
+        cameraUpdate = { profiles: { [editingProfile]: deleteSection } };
+      } else {
+        // Base mode: also delete from profiles that have overrides for this mask
+        const profileDeletes: Record<string, unknown> = {};
+        if (allProfileNames && cameraConfig) {
+          for (const profileName of allProfileNames) {
+            const profileData = cameraConfig.profiles?.[profileName];
+            if (!profileData) continue;
+
+            const hasMask =
+              polygon.type === "motion_mask"
+                ? profileData.motion?.mask?.[polygon.name] !== undefined
+                : polygon.type === "object_mask"
+                  ? profileData.objects?.mask?.[polygon.name] !== undefined ||
+                    Object.values(profileData.objects?.filters || {}).some(
+                      (f) => f?.mask?.[polygon.name] !== undefined,
+                    )
+                  : false;
+
+            if (hasMask) {
+              profileDeletes[profileName] = deleteSection;
+            }
+          }
+        }
+        cameraUpdate =
+          Object.keys(profileDeletes).length > 0
+            ? { ...deleteSection, profiles: profileDeletes }
+            : deleteSection;
+      }
+
      const configUpdate = {
        cameras: {
-          [polygon.camera]: editingProfile
-            ? { profiles: { [editingProfile]: deleteSection } }
-            : deleteSection,
+          [polygon.camera]: cameraUpdate,
        },
      };

@ -234,6 +278,7 @@ export default function PolygonItem({
              { position: "top-center" },
            );
            updateConfig();
+            onDeleted?.();
          } else {
            toast.error(
              t("toast.save.error.title", {
@ -267,6 +312,8 @@ export default function PolygonItem({
      index,
      setLoadingPolygonIndex,
      editingProfile,
+      allProfileNames,
+      onDeleted,
    ],
  );

@ -425,32 +472,51 @@ export default function PolygonItem({
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>
-                {t("masksAndZones.form.polygonDrawing.delete.title")}
+                {polygon.polygonSource === "override"
+                  ? t("masksAndZones.form.polygonDrawing.revertOverride.title")
+                  : t("masksAndZones.form.polygonDrawing.delete.title")}
              </AlertDialogTitle>
            </AlertDialogHeader>
            <AlertDialogDescription>
-              <Trans
-                ns="views/settings"
-                values={{
-                  type: t(
-                    `masksAndZones.form.polygonDrawing.type.${polygon.type}`,
-                    { ns: "views/settings" },
-                  ),
-                  name: polygon.friendly_name ?? polygon.name,
-                }}
-              >
-                masksAndZones.form.polygonDrawing.delete.desc
-              </Trans>
+              {polygon.polygonSource === "override" ? (
+                <Trans
+                  ns="views/settings"
+                  values={{
+                    type: t(
+                      `masksAndZones.form.polygonDrawing.type.${polygon.type}`,
+                      { ns: "views/settings" },
+                    ),
+                    name: polygon.friendly_name ?? polygon.name,
+                  }}
+                >
+                  masksAndZones.form.polygonDrawing.revertOverride.desc
+                </Trans>
+              ) : (
+                <Trans
+                  ns="views/settings"
+                  values={{
+                    type: t(
+                      `masksAndZones.form.polygonDrawing.type.${polygon.type}`,
+                      { ns: "views/settings" },
+                    ),
+                    name: polygon.friendly_name ?? polygon.name,
+                  }}
+                >
+                  masksAndZones.form.polygonDrawing.delete.desc
+                </Trans>
+              )}
            </AlertDialogDescription>
            <AlertDialogFooter>
              <AlertDialogCancel>
                {t("button.cancel", { ns: "common" })}
              </AlertDialogCancel>
              <AlertDialogAction
-                className={buttonVariants({ variant: "destructive" })}
+                className="bg-destructive text-white hover:bg-destructive/90"
                onClick={handleDelete}
              >
-                {t("button.delete", { ns: "common" })}
+                {polygon.polygonSource === "override"
+                  ? t("masksAndZones.form.polygonDrawing.revertOverride.title")
+                  : t("button.delete", { ns: "common" })}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
@ -563,7 +629,9 @@ export default function PolygonItem({
                />
              </TooltipTrigger>
              <TooltipContent>
-                {t("button.delete", { ns: "common" })}
+                {polygon.polygonSource === "override"
+                  ? t("masksAndZones.form.polygonDrawing.revertOverride.title")
+                  : t("button.delete", { ns: "common" })}
              </TooltipContent>
            </Tooltip>
          </div>
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@ -91,10 +91,8 @@ export default function ZoneEditPane({
    }
  }, [polygons, activePolygonIndex]);

-  const { send: sendZoneState } = useZoneState(
-    polygon?.camera || "",
-    polygon?.name || "",
-  );
+  const zoneName = polygon?.name || "";
+  const { send: sendZoneState } = useZoneState(polygon?.camera || "", zoneName);

  const cameraConfig = useMemo(() => {
    if (polygon?.camera && config) {
@ -210,7 +208,7 @@ export default function ZoneEditPane({
        })
        .optional()
        .or(z.literal("")),
-      isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
+      isFinished: z.boolean().refine((val) => val === true, {
        message: t("masksAndZones.form.polygonDrawing.error.mustBeFinished"),
      }),
      objects: z.array(z.string()).optional(),
@ -295,7 +293,7 @@ export default function ZoneEditPane({

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
-    mode: "onBlur",
+    mode: "onChange",
    defaultValues: {
      name: polygon?.name ?? "",
      friendly_name: polygon?.friendly_name ?? polygon?.name ?? "",
@ -303,8 +301,8 @@ export default function ZoneEditPane({
        resolvedZoneData?.enabled !== undefined
          ? resolvedZoneData.enabled
          : (polygon?.enabled ?? true),
-      inertia: resolvedZoneData?.inertia,
-      loitering_time: resolvedZoneData?.loitering_time,
+      inertia: resolvedZoneData?.inertia ?? 3,
+      loitering_time: resolvedZoneData?.loitering_time ?? 0,
      isFinished: polygon?.isFinished ?? false,
      objects: polygon?.objects ?? [],
      speedEstimation: !!(lineA || lineB || lineC || lineD),
@ -316,18 +314,31 @@ export default function ZoneEditPane({
    },
  });

+  const watchSpeedEstimation = form.watch("speedEstimation");
+  const watchLineA = form.watch("lineA");
+  const watchLineB = form.watch("lineB");
+  const watchLineC = form.watch("lineC");
+  const watchLineD = form.watch("lineD");
+
+  const canSave =
+    form.formState.isValid &&
+    (!watchSpeedEstimation ||
+      (!!watchLineA && !!watchLineB && !!watchLineC && !!watchLineD));
+
  useEffect(() => {
-    if (
-      form.watch("speedEstimation") &&
-      polygon &&
-      polygon.points.length !== 4
-    ) {
+    if (watchSpeedEstimation && polygon && polygon.points.length !== 4) {
      toast.error(
        t("masksAndZones.zones.speedThreshold.toast.error.pointLengthError"),
      );
      form.setValue("speedEstimation", false);
    }
-  }, [polygon, form, t]);
+  }, [polygon, form, t, watchSpeedEstimation]);
+
+  useEffect(() => {
+    if (polygon?.isFinished !== undefined) {
+      form.setValue("isFinished", polygon.isFinished, { shouldValidate: true });
+    }
+  }, [polygon?.isFinished, form]);

  const saveToConfig = useCallback(
    async (
@ -516,8 +527,8 @@ export default function ZoneEditPane({
              },
            );
            updateConfig();
-            // Only publish WS state for base config (not profiles)
-            if (!editingProfile) {
+            // Only publish WS state for base config when zone has a name
+            if (!editingProfile && zoneName) {
              sendZoneState(enabled ? "ON" : "OFF");
            }
          } else {
@ -968,7 +979,7 @@ export default function ZoneEditPane({
            </Button>
            <Button
              variant="select"
-              disabled={isLoading}
+              disabled={isLoading || !canSave}
              className="flex flex-1"
              aria-label={t("button.save", { ns: "common" })}
              type="submit"
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@ -201,6 +201,16 @@ export default function MasksAndZonesView({
    setUnsavedChanges(false);
  }, [editingPolygons, setUnsavedChanges]);

+  const handlePolygonDeleted = useCallback(() => {
+    // Temporarily clear the edit pane guard so the useEffect that
+    // rebuilds editingPolygons from config will run when the fresh
+    // config arrives via updateConfig(). This handles all cases:
+    // base deletes, profile override deletes (which revert to base),
+    // and profile-only deletes.
+    setEditPane(undefined);
+    setActivePolygonIndex(undefined);
+  }, [setEditPane, setActivePolygonIndex]);
+
  useEffect(() => {
    if (isLoading) {
      return;
@ -806,20 +816,25 @@ export default function MasksAndZonesView({
                        </HoverCard>
                        <Tooltip>
                          <TooltipTrigger asChild>
-                            <Button
-                              variant="secondary"
-                              className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
-                              aria-label={t("masksAndZones.zones.add")}
-                              onClick={() => {
-                                setEditPane("zone");
-                                handleNewPolygon("zone");
-                              }}
-                            >
-                              <LuPlus />
-                            </Button>
+                            <span className="inline-flex">
+                              <Button
+                                variant="secondary"
+                                className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                                aria-label={t("masksAndZones.zones.add")}
+                                disabled={!!currentEditingProfile}
+                                onClick={() => {
+                                  setEditPane("zone");
+                                  handleNewPolygon("zone");
+                                }}
+                              >
+                                <LuPlus />
+                              </Button>
+                            </span>
                          </TooltipTrigger>
                          <TooltipContent>
-                            {t("masksAndZones.zones.add")}
+                            {currentEditingProfile
+                              ? t("masksAndZones.addDisabledProfile")
+                              : t("masksAndZones.zones.add")}
                          </TooltipContent>
                        </Tooltip>
                      </div>
@ -843,6 +858,7 @@ export default function MasksAndZonesView({
                            setLoadingPolygonIndex={setLoadingPolygonIndex}
                            editingProfile={currentEditingProfile}
                            allProfileNames={profileState?.allProfileNames}
+                            onDeleted={handlePolygonDeleted}
                          />
                        ))}
                    </div>
@ -880,20 +896,25 @@ export default function MasksAndZonesView({
                        </HoverCard>
                        <Tooltip>
                          <TooltipTrigger asChild>
-                            <Button
-                              variant="secondary"
-                              className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
-                              aria-label={t("masksAndZones.motionMasks.add")}
-                              onClick={() => {
-                                setEditPane("motion_mask");
-                                handleNewPolygon("motion_mask");
-                              }}
-                            >
-                              <LuPlus />
-                            </Button>
+                            <span className="inline-flex">
+                              <Button
+                                variant="secondary"
+                                className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                                aria-label={t("masksAndZones.motionMasks.add")}
+                                disabled={!!currentEditingProfile}
+                                onClick={() => {
+                                  setEditPane("motion_mask");
+                                  handleNewPolygon("motion_mask");
+                                }}
+                              >
+                                <LuPlus />
+                              </Button>
+                            </span>
                          </TooltipTrigger>
                          <TooltipContent>
-                            {t("masksAndZones.motionMasks.add")}
+                            {currentEditingProfile
+                              ? t("masksAndZones.addDisabledProfile")
+                              : t("masksAndZones.motionMasks.add")}
                          </TooltipContent>
                        </Tooltip>
                      </div>
@ -919,6 +940,7 @@ export default function MasksAndZonesView({
                            setLoadingPolygonIndex={setLoadingPolygonIndex}
                            editingProfile={currentEditingProfile}
                            allProfileNames={profileState?.allProfileNames}
+                            onDeleted={handlePolygonDeleted}
                          />
                        ))}
                    </div>
@ -956,20 +978,25 @@ export default function MasksAndZonesView({
                        </HoverCard>
                        <Tooltip>
                          <TooltipTrigger asChild>
-                            <Button
-                              variant="secondary"
-                              className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
-                              aria-label={t("masksAndZones.objectMasks.add")}
-                              onClick={() => {
-                                setEditPane("object_mask");
-                                handleNewPolygon("object_mask");
-                              }}
-                            >
-                              <LuPlus />
-                            </Button>
+                            <span className="inline-flex">
+                              <Button
+                                variant="secondary"
+                                className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                                aria-label={t("masksAndZones.objectMasks.add")}
+                                disabled={!!currentEditingProfile}
+                                onClick={() => {
+                                  setEditPane("object_mask");
+                                  handleNewPolygon("object_mask");
+                                }}
+                              >
+                                <LuPlus />
+                              </Button>
+                            </span>
                          </TooltipTrigger>
                          <TooltipContent>
-                            {t("masksAndZones.objectMasks.add")}
+                            {currentEditingProfile
+                              ? t("masksAndZones.addDisabledProfile")
+                              : t("masksAndZones.objectMasks.add")}
                          </TooltipContent>
                        </Tooltip>
                      </div>
@ -995,6 +1022,7 @@ export default function MasksAndZonesView({
                            setLoadingPolygonIndex={setLoadingPolygonIndex}
                            editingProfile={currentEditingProfile}
                            allProfileNames={profileState?.allProfileNames}
+                            onDeleted={handlePolygonDeleted}
                          />
                        ))}
                    </div>