Masks and zones improvements (#22163)

* migrator and runtime config changes * component changes to use rasterized_mask * frontend * convert none to empty string for config save * i18n * update tests * add enabled config to zones * zones frontend * i18n * docs * tweaks * use dashed stroke to indicate disabled * allow toggle from icon * use filelock to ensure atomic config updates from endpoint * enforce atomic config update in the frontend * toggle via mqtt * fix global object masks * correctly handle global object masks in dispatcher * ws hooks * render masks and zones based on ws enabled state * use enabled_in_config for zones and masks * frontend for enabled_in_config * tweaks * i18n * publish websocket on config save * i18n tweaks * pydantic title and description * i18n generation * tweaks * fix typing
2026-08-02 09:02:15 +03:00 · 2026-02-28 07:04:43 -07:00
parent fa1f9a1fa4
commit 6a21b2952d
37 changed files with 1964 additions and 739 deletions
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { Polygon } from "@/types/canvas";
+import { useWsState } from "@/api/ws";
+
+/**
+ * Hook to get enabled state for a polygon from websocket state.
+ * Memoizes the lookup function to avoid unnecessary re-renders.
+ */
+export function usePolygonStates(polygons: Polygon[]) {
+  const wsState = useWsState();
+
+  // Create a memoized lookup map that only updates when relevant ws values change
+  return useMemo(() => {
+    const stateMap = new Map<string, boolean>();
+
+    polygons.forEach((polygon) => {
+      const topic =
+        polygon.type === "zone"
+          ? `${polygon.camera}/zone/${polygon.name}/state`
+          : polygon.type === "motion_mask"
+            ? `${polygon.camera}/motion_mask/${polygon.name}/state`
+            : `${polygon.camera}/object_mask/${polygon.name}/state`;
+
+      const wsValue = wsState[topic];
+      const enabled =
+        wsValue === "ON"
+          ? true
+          : wsValue === "OFF"
+            ? false
+            : (polygon.enabled ?? true);
+      stateMap.set(
+        `${polygon.camera}/${polygon.type}/${polygon.name}`,
+        enabled,
+      );
+    });
+
+    return (polygon: Polygon) => {
+      return (
+        stateMap.get(`${polygon.camera}/${polygon.type}/${polygon.name}`) ??
+        true
+      );
+    };
+  }, [polygons, wsState]);
+}