Merge a0e0f61c59 into 1f1d546326

fix masks and zones layout issues at high browser zoom levels (#22181 )
Bump webpack from 5.103.0 to 5.105.0 in /docs
2026-03-23 08:38:22 +03:00 · 2026-03-03 09:37:36 +02:00 · 2026-03-01 13:41:33 -07:00 · 2026-02-06 07:37:25 +00:00
4 changed files with 69 additions and 34 deletions
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@ -10423,13 +10423,13 @@
      }
    },
    "node_modules/enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
      "license": "MIT",
      "dependencies": {
        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "tapable": "^2.3.0"
      },
      "engines": {
        "node": ">=10.13.0"
@ -10475,9 +10475,9 @@
      }
    },
    "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
      "license": "MIT"
    },
    "node_modules/es-object-atoms": {
@ -21624,9 +21624,9 @@
      }
    },
    "node_modules/terser-webpack-plugin": {
-      "version": "5.3.15",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.15.tgz",
-      "integrity": "sha512-PGkOdpRFK+rb1TzVz+msVhw4YMRT9txLF4kRqvJhGhCM324xuR3REBSHALN+l+sAhKUmz0aotnjp5D+P83mLhQ==",
+      "version": "5.3.16",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
+      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
      "license": "MIT",
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.25",
@ -22613,9 +22613,9 @@
      }
    },
    "node_modules/watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
      "license": "MIT",
      "dependencies": {
        "glob-to-regexp": "^0.4.1",
@ -22651,9 +22651,9 @@
      "license": "BSD-2-Clause"
    },
    "node_modules/webpack": {
-      "version": "5.103.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.103.0.tgz",
-      "integrity": "sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw==",
+      "version": "5.105.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.0.tgz",
+      "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
      "license": "MIT",
      "dependencies": {
        "@types/eslint-scope": "^3.7.7",
@ -22664,10 +22664,10 @@
        "@webassemblyjs/wasm-parser": "^1.14.1",
        "acorn": "^8.15.0",
        "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.26.3",
+        "browserslist": "^4.28.1",
        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.3",
-        "es-module-lexer": "^1.2.1",
+        "enhanced-resolve": "^5.19.0",
+        "es-module-lexer": "^2.0.0",
        "eslint-scope": "5.1.1",
        "events": "^3.2.0",
        "glob-to-regexp": "^0.4.1",
@ -22678,8 +22678,8 @@
        "neo-async": "^2.6.2",
        "schema-utils": "^4.3.3",
        "tapable": "^2.3.0",
-        "terser-webpack-plugin": "^5.3.11",
-        "watchpack": "^2.4.4",
+        "terser-webpack-plugin": "^5.3.16",
+        "watchpack": "^2.5.1",
        "webpack-sources": "^3.3.3"
      },
      "bin": {
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@ -258,7 +258,7 @@ export function PolygonCanvas({
    const updatedPolygons = [...polygons];
    const activePolygon = updatedPolygons[activePolygonIndex];

-    if (containerRef.current && !activePolygon.isFinished) {
+    if (containerRef.current && activePolygon && !activePolygon.isFinished) {
      containerRef.current.style.cursor = "crosshair";
    }
  };
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@ -329,7 +329,7 @@ export default function PolygonItem({

      <div
        key={index}
-        className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
+        className="transition-background relative my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
        data-index={index}
        onMouseEnter={() => setHoveredPolygonIndex(index)}
        onMouseLeave={() => setHoveredPolygonIndex(null)}
@ -341,7 +341,7 @@ export default function PolygonItem({
        }}
      >
        <div
-          className={`flex items-center ${
+          className={`flex min-w-0 items-center ${
            hoveredPolygonIndex === index
              ? "text-primary"
              : "text-primary-variant"
@ -359,7 +359,7 @@ export default function PolygonItem({
                    type="button"
                    onClick={handleToggleEnabled}
                    disabled={isLoading || polygon.enabled_in_config === false}
-                    className="mr-2 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
+                    className="mr-2 shrink-0 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
                  >
                    <PolygonItemIcon
                      className="size-5"
@ -469,7 +469,15 @@ export default function PolygonItem({
          </>
        )}
        {!isMobile && hoveredPolygonIndex === index && (
-          <div className="flex flex-row items-center gap-2">
+          <div
+            className="absolute inset-y-0 right-0 flex flex-row items-center gap-2 rounded-r-lg pl-8 pr-1"
+            style={{
+              background:
+                polygon.color.length === 3
+                  ? `linear-gradient(to right, transparent 0%, rgba(${polygon.color[2]},${polygon.color[1]},${polygon.color[0]},0.85) 40%)`
+                  : "linear-gradient(to right, transparent 0%, rgba(220,0,0,0.85) 40%)",
+            }}
+          >
            <Tooltip>
              <TooltipTrigger asChild>
                <IconWrapper
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@ -64,6 +64,9 @@ export default function MasksAndZonesView({
  );
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [editPane, setEditPane] = useState<PolygonType | undefined>(undefined);
+  const editPaneRef = useRef(editPane);
+  editPaneRef.current = editPane;
+  const prevScaledRef = useRef<{ w: number; h: number } | null>(null);
  const [activeLine, setActiveLine] = useState<number | undefined>();
  const [snapPoints, setSnapPoints] = useState(false);

@ -350,12 +353,36 @@ export default function MasksAndZonesView({
        ...globalObjectMasks,
        ...objectMasks,
      ]);
-      setEditingPolygons([
-        ...zones,
-        ...motionMasks,
-        ...globalObjectMasks,
-        ...objectMasks,
-      ]);
+      // Don't overwrite editingPolygons during editing – layout shifts
+      // from switching to the edit pane can trigger a resize which
+      // recalculates scaledWidth/scaledHeight and would discard the
+      // newly-added polygon. Instead, rescale existing points
+      // proportionally.
+      if (editPaneRef.current === undefined) {
+        setEditingPolygons([
+          ...zones,
+          ...motionMasks,
+          ...globalObjectMasks,
+          ...objectMasks,
+        ]);
+      } else if (
+        prevScaledRef.current &&
+        (prevScaledRef.current.w !== scaledWidth ||
+          prevScaledRef.current.h !== scaledHeight)
+      ) {
+        const prevW = prevScaledRef.current.w;
+        const prevH = prevScaledRef.current.h;
+        setEditingPolygons((prev) =>
+          prev.map((poly) => ({
+            ...poly,
+            points: poly.points.map(([x, y]) => [
+              (x / prevW) * scaledWidth,
+              (y / prevH) * scaledHeight,
+            ]),
+          })),
+        );
+      }
+      prevScaledRef.current = { w: scaledWidth, h: scaledHeight };
    }
    // we know that these deps are correct
    // eslint-disable-next-line react-hooks/exhaustive-deps
@ -431,7 +458,7 @@ export default function MasksAndZonesView({
      {cameraConfig && editingPolygons && (
        <div className="flex size-full flex-col md:flex-row">
          <Toaster position="top-center" closeButton={true} />
-          <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-3 md:mt-0 md:w-3/12">
+          <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-3 md:mt-0 md:w-3/12 md:min-w-0 md:shrink-0">
            {editPane == "zone" && (
              <ZoneEditPane
                polygons={editingPolygons}
@ -707,7 +734,7 @@ export default function MasksAndZonesView({
          <div
            ref={containerRef}
            className={cn(
-              "flex max-h-[50%] md:h-dvh md:max-h-full md:w-7/12 md:grow",
+              "flex max-h-[50%] min-w-0 md:h-dvh md:max-h-full md:w-7/12 md:grow",
              isDesktop && "md:mr-3",
            )}
          >
Author	SHA1	Message	Date
dependabot[bot]	180a208ec6	Merge `a0e0f61c59` into `1f1d546326`	2026-03-03 09:37:36 +02:00
Josh Hawkins	1f1d546326	fix masks and zones layout issues at high browser zoom levels (#22181 ) Some checks failed CI / AMD64 Build (push) Has been cancelled Details CI / ARM Build (push) Has been cancelled Details CI / Jetson Jetpack 6 (push) Has been cancelled Details CI / AMD64 Extra Build (push) Has been cancelled Details CI / ARM Extra Build (push) Has been cancelled Details CI / Synaptics Build (push) Has been cancelled Details CI / Assemble and push default build (push) Has been cancelled Details	2026-03-01 13:41:33 -07:00
dependabot[bot]	a0e0f61c59	Bump webpack from 5.103.0 to 5.105.0 in /docs Bumps [webpack](https://github.com/webpack/webpack) from 5.103.0 to 5.105.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Changelog](https://github.com/webpack/webpack/blob/main/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack/compare/v5.103.0...v5.105.0) --- updated-dependencies: - dependency-name: webpack dependency-version: 5.105.0 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2026-02-06 07:37:25 +00:00