feat: refresh workbench visual layout

src/features/workbench/map/camera.ts

@@ -1,7 +1,5 @@
 import type { Map as MapLibreMap, PaddingOptions } from "maplibre-gl";
-import {
-  getWorkbenchCameraPadding
-} from "../layout/workbench-layout";
+import { getWorkbenchCameraPadding } from "../layout/workbench-layout";
 import { WATER_NETWORK_GLOBAL_VIEW } from "./sources";
 
 type LngLatBounds = [[number, number], [number, number]];
@@ -14,24 +12,35 @@ export type NetworkViewParams = {
 const WEB_MERCATOR_RADIUS = 6378137;
 const GLOBAL_VIEW_MAX_ZOOM = 13;
 const GLOBAL_VIEW_PADDING: PaddingOptions = { top: 96, right: 48, bottom: 48, left: 48 };
-export function getWorkbenchPadding(leftPanelOpen: boolean, rightPanelOpen: boolean): PaddingOptions {
+export function getWorkbenchPadding(
+  leftPanelOpen: boolean,
+  rightPanelOpen: boolean,
+  conditionPanelExpanded = false,
+  agentPanelWidth?: number
+): PaddingOptions {
   return getWorkbenchCameraPadding(1280, {
     agentOpen: leftPanelOpen,
-    conditionOpen: rightPanelOpen
+    agentWidth: agentPanelWidth,
+    conditionOpen: rightPanelOpen,
+    conditionExpanded: conditionPanelExpanded
   });
 }
 
 export function getResponsiveWorkbenchPadding(
   map: MapLibreMap,
   leftPanelOpen: boolean,
-  rightPanelOpen: boolean
+  rightPanelOpen: boolean,
+  conditionPanelExpanded = false,
+  agentPanelWidth?: number
 ): PaddingOptions {
   const width = getMapViewportSize(map).width;
   return getResponsivePadding(
     map,
     getWorkbenchCameraPadding(width, {
       agentOpen: leftPanelOpen,
-      conditionOpen: rightPanelOpen
+      agentWidth: agentPanelWidth,
+      conditionOpen: rightPanelOpen,
+      conditionExpanded: conditionPanelExpanded
     })
   );
 }
@@ -41,14 +50,11 @@ export function fitNetworkBounds(
   viewParams: NetworkViewParams = WATER_NETWORK_GLOBAL_VIEW,
   padding: PaddingOptions = GLOBAL_VIEW_PADDING
 ) {
-  map.fitBounds(
-    getLngLatBoundsFromBbox3857(viewParams.bbox3857),
-    {
-      padding: getResponsivePadding(map, padding),
-      maxZoom: GLOBAL_VIEW_MAX_ZOOM,
-      duration: 600
-    }
-  );
+  map.fitBounds(getLngLatBoundsFromBbox3857(viewParams.bbox3857), {
+    padding: getResponsivePadding(map, padding),
+    maxZoom: GLOBAL_VIEW_MAX_ZOOM,
+    duration: 600
+  });
 }
 
 export function getResponsivePadding(map: MapLibreMap, padding: PaddingOptions): PaddingOptions {
@@ -84,10 +90,7 @@ function getMapViewportSize(map: MapLibreMap) {
 function getLngLatBoundsFromBbox3857(bbox3857: WebMercatorBbox): LngLatBounds {
   const [minX, minY, maxX, maxY] = bbox3857;
 
-  return [
-    webMercatorToLngLat(minX, minY),
-    webMercatorToLngLat(maxX, maxY)
-  ];
+  return [webMercatorToLngLat(minX, minY), webMercatorToLngLat(maxX, maxY)];
 }
 
 function webMercatorToLngLat(x: number, y: number): [number, number] {