82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
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;
|
|
}
|