style: refine acrylic workbench surfaces

2026-07-15 17:07:32 +08:00
parent 8978f2d167
commit 16ecb69d00
41 changed files with 838 additions and 606 deletions
@@ -1,20 +1,57 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
 import { describe, expect, it, vi } from "vitest";
-import { fitNetworkBounds } from "./camera";
+import {
+  fitNetworkBounds,
+  getResponsiveWorkbenchPadding,
+  getWorkbenchPadding
+} from "./camera";
 import { WATER_NETWORK_GLOBAL_VIEW } from "./sources";

+function createMap(width = 1280, height = 720) {
+  const fitBounds = vi.fn();
+  const map = {
+    fitBounds,
+    getCanvas: () => ({ clientWidth: width, clientHeight: height, width, height })
+  } as unknown as MapLibreMap;
+
+  return { fitBounds, map };
+}
+
+describe("workbench camera padding", () => {
+  it.each([
+    { agentOpen: false, conditionOpen: false, expected: { top: 72, right: 72, bottom: 32, left: 160 } },
+    { agentOpen: true, conditionOpen: false, expected: { top: 72, right: 72, bottom: 32, left: 484 } },
+    { agentOpen: false, conditionOpen: true, expected: { top: 72, right: 504, bottom: 32, left: 160 } },
+    { agentOpen: true, conditionOpen: true, expected: { top: 72, right: 504, bottom: 32, left: 484 } }
+  ])("covers agent=$agentOpen and condition=$conditionOpen", ({ agentOpen, conditionOpen, expected }) => {
+    expect(getWorkbenchPadding(agentOpen, conditionOpen)).toEqual(expected);
+  });
+
+  it("caps combined padding on constrained desktop widths", () => {
+    const { map } = createMap(1024, 720);
+    const padding = getResponsiveWorkbenchPadding(map, true, true);
+
+    expect(padding.left + padding.right).toBeLessThanOrEqual(Math.floor(1024 * 0.58) + 1);
+    expect(padding.top + padding.bottom).toBeLessThanOrEqual(Math.floor(720 * 0.58) + 1);
+    expect(padding.left).toBeGreaterThan(padding.top);
+    expect(padding.right).toBeGreaterThan(padding.top);
+  });
+
+  it("uses mobile-safe padding below the dock breakpoint", () => {
+    const { map } = createMap(375, 667);
+
+    expect(getResponsiveWorkbenchPadding(map, true, true)).toEqual({
+      top: 72,
+      right: 24,
+      bottom: 72,
+      left: 24
+    });
+  });
+});
+
 describe("fitNetworkBounds", () => {
-  it("fits the global WebMercator bbox through MapLibre lng/lat bounds", () => {
-    const fitBounds = vi.fn();
-    const map = {
-      fitBounds,
-      getCanvas: () => ({
-        clientWidth: 1280,
-        clientHeight: 720,
-        width: 1280,
-        height: 720
-      })
-    } as unknown as MapLibreMap;
+  it("preserves the original global extent for initial and home views", () => {
+    const { fitBounds, map } = createMap();

    fitNetworkBounds(map, WATER_NETWORK_GLOBAL_VIEW);