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
@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { getWorkbenchBasemapTone } from "./workbench-layout";
+
+describe("workbench basemap surface tone", () => {
+  it.each([
+    ["mapbox-light", "light"],
+    ["mapbox-satellite", "satellite"],
+    ["none", "none"],
+    ["unknown", "none"]
+  ])("maps %s to %s", (baseLayerId, expectedTone) => {
+    expect(getWorkbenchBasemapTone(baseLayerId)).toBe(expectedTone);
+  });
+});
@@ -0,0 +1,81 @@
+export const WORKBENCH_LAYOUT = {
+  headerHeight: 56,
+  desktopMinWidth: 1024,
+  persistentConditionMinWidth: 1280,
+  wideMinWidth: 1536,
+  collapsedAgentWidth: 136,
+  mapEdgeGap: 24,
+  desktop: {
+    agentWidth: 460,
+    conditionWidth: 432,
+    toolbarWidth: 48,
+    tickerWidth: 420
+  },
+  wide: {
+    agentWidth: 500,
+    conditionWidth: 432,
+    toolbarWidth: 48,
+    tickerWidth: 460
+  }
+} as const;
+
+export type WorkbenchPanelState = {
+  agentOpen: boolean;
+  conditionOpen: boolean;
+};
+
+export type WorkbenchBasemapTone = "light" | "satellite" | "none";
+
+export type WorkbenchViewportLayout = {
+  agentWidth: number;
+  conditionWidth: number;
+  toolbarWidth: number;
+  tickerWidth: number;
+};
+
+export function getWorkbenchViewportLayout(viewportWidth: number): WorkbenchViewportLayout {
+  return viewportWidth >= WORKBENCH_LAYOUT.wideMinWidth
+    ? WORKBENCH_LAYOUT.wide
+    : WORKBENCH_LAYOUT.desktop;
+}
+
+export function getWorkbenchBasemapTone(activeBaseLayerId: string): WorkbenchBasemapTone {
+  if (activeBaseLayerId === "mapbox-light") {
+    return "light";
+  }
+
+  if (activeBaseLayerId === "mapbox-satellite") {
+    return "satellite";
+  }
+
+  return "none";
+}
+
+export function getWorkbenchCameraPadding(viewportWidth: number, panels: WorkbenchPanelState) {
+  if (viewportWidth < WORKBENCH_LAYOUT.desktopMinWidth) {
+    return { top: 72, right: 24, bottom: 72, left: 24 };
+  }
+
+  const layout = getWorkbenchViewportLayout(viewportWidth);
+  const agentWidth = panels.agentOpen ? layout.agentWidth : WORKBENCH_LAYOUT.collapsedAgentWidth;
+  const conditionWidth = panels.conditionOpen ? layout.conditionWidth : 0;
+
+  return {
+    top: WORKBENCH_LAYOUT.headerHeight + 16,
+    right: WORKBENCH_LAYOUT.mapEdgeGap + layout.toolbarWidth + conditionWidth,
+    bottom: 32,
+    left: WORKBENCH_LAYOUT.mapEdgeGap + agentWidth
+  };
+}
+
+export function getWorkbenchLayoutCssVariables() {
+  return {
+    "--workbench-agent-width": `${WORKBENCH_LAYOUT.desktop.agentWidth}px`,
+    "--workbench-agent-width-wide": `${WORKBENCH_LAYOUT.wide.agentWidth}px`,
+    "--workbench-condition-width": `${WORKBENCH_LAYOUT.desktop.conditionWidth}px`,
+    "--workbench-condition-width-wide": `${WORKBENCH_LAYOUT.wide.conditionWidth}px`,
+    "--workbench-toolbar-width": `${WORKBENCH_LAYOUT.desktop.toolbarWidth}px`,
+    "--workbench-ticker-width": `${WORKBENCH_LAYOUT.desktop.tickerWidth}px`,
+    "--workbench-ticker-width-wide": `${WORKBENCH_LAYOUT.wide.tickerWidth}px`
+  } as const;
+}