fix(security): upgrade MapLibre runtime

src/features/workbench/hooks/use-workbench-map.ts

@@ -1,11 +1,12 @@
 import "maplibre-gl/dist/maplibre-gl.css";
 
 import type { FeatureCollection, Geometry, Point } from "geojson";
-import maplibregl, {
-  type GeoJSONSource,
-  type Map as MapLibreMap,
-  type MapSourceDataEvent,
-  type StyleSpecification
+import * as maplibregl from "maplibre-gl";
+import type {
+  GeoJSONSource,
+  Map as MapLibreMap,
+  MapSourceDataEvent,
+  StyleSpecification
 } from "maplibre-gl";
 import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import type { AccessTokenProvider } from "@/shared/auth/keycloak-auth";
@@ -271,9 +272,13 @@ export function useWorkbenchMap({
       style: createBaseStyle(mapboxToken, tiandituToken),
       pitch: 0,
       bearing: 0,
+      dragRotate: false,
+      touchPitch: false,
       maxZoom: MAP_MAX_ZOOM,
-      antialias: true,
-      preserveDrawingBuffer: true,
+      canvasContextAttributes: {
+        antialias: true,
+        preserveDrawingBuffer: true
+      },
       trackResize: false,
       attributionControl: false
     });

src/features/workbench/map/camera.ts

@@ -4,6 +4,7 @@ import { WATER_NETWORK_GLOBAL_VIEW } from "./sources";
 
 type LngLatBounds = [[number, number], [number, number]];
 type WebMercatorBbox = readonly [number, number, number, number];
+type CompletePaddingOptions = Required<PaddingOptions>;
 
 export type NetworkViewParams = {
   bbox3857: WebMercatorBbox;
@@ -11,19 +12,19 @@ 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 };
+const GLOBAL_VIEW_PADDING: CompletePaddingOptions = { top: 96, right: 48, bottom: 48, left: 48 };
 export function getWorkbenchPadding(
   leftPanelOpen: boolean,
   rightPanelOpen: boolean,
   conditionPanelExpanded = false,
   agentPanelWidth?: number
-): PaddingOptions {
-  return getWorkbenchCameraPadding(1280, {
+): CompletePaddingOptions {
+  return completePadding(getWorkbenchCameraPadding(1280, {
     agentOpen: leftPanelOpen,
     agentWidth: agentPanelWidth,
     conditionOpen: rightPanelOpen,
     conditionExpanded: conditionPanelExpanded
-  });
+  }));
 }
 
 export function getResponsiveWorkbenchPadding(
@@ -32,7 +33,7 @@ export function getResponsiveWorkbenchPadding(
   rightPanelOpen: boolean,
   conditionPanelExpanded = false,
   agentPanelWidth?: number
-): PaddingOptions {
+): CompletePaddingOptions {
   const width = getMapViewportSize(map).width;
   return getResponsivePadding(
     map,
@@ -59,10 +60,14 @@ export function fitNetworkBounds(
   });
 }
 
-export function getResponsivePadding(map: MapLibreMap, padding: PaddingOptions): PaddingOptions {
+export function getResponsivePadding(
+  map: MapLibreMap,
+  padding: PaddingOptions
+): CompletePaddingOptions {
+  const complete = completePadding(padding);
   const { width, height } = getMapViewportSize(map);
-  const horizontalPadding = padding.left + padding.right;
-  const verticalPadding = padding.top + padding.bottom;
+  const horizontalPadding = complete.left + complete.right;
+  const verticalPadding = complete.top + complete.bottom;
   const maxHorizontalPadding = width * 0.58;
   const maxVerticalPadding = height * 0.58;
   const horizontalScale = horizontalPadding > 0 ? maxHorizontalPadding / horizontalPadding : 1;
@@ -70,14 +75,23 @@ export function getResponsivePadding(map: MapLibreMap, padding: PaddingOptions):
   const scale = Math.min(1, horizontalScale, verticalScale);
 
   if (scale >= 1) {
-    return padding;
+    return complete;
   }
 
   return {
-    top: Math.round(padding.top * scale),
-    right: Math.round(padding.right * scale),
-    bottom: Math.round(padding.bottom * scale),
-    left: Math.round(padding.left * scale)
+    top: Math.round(complete.top * scale),
+    right: Math.round(complete.right * scale),
+    bottom: Math.round(complete.bottom * scale),
+    left: Math.round(complete.left * scale)
+  };
+}
+
+function completePadding(padding: PaddingOptions): CompletePaddingOptions {
+  return {
+    top: padding.top ?? 0,
+    right: padding.right ?? 0,
+    bottom: padding.bottom ?? 0,
+    left: padding.left ?? 0
   };
 }
 

src/features/workbench/map/city-scene-control.ts

@@ -1,4 +1,5 @@
-import maplibregl, { type Map as MapLibreMap } from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
+import type { Map as MapLibreMap } from "maplibre-gl";
 import {
   CITY_LAYERS,
   CITY_LIGHT,

src/features/workbench/map/export-view.ts

@@ -1,4 +1,5 @@
-import maplibregl, { type Map as MapLibreMap, type StyleSpecification } from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
+import type { Map as MapLibreMap, StyleSpecification } from "maplibre-gl";
 import type { MapFeatureInteractionState } from "../hooks/use-map-interactions";
 
 const MAX_EXPORT_DIMENSION = 4096;
@@ -38,8 +39,10 @@ export async function exportMapViewImage(map: MapLibreMap, { scale, targetLongEd
     zoom: map.getZoom(),
     pitch: map.getPitch(),
     bearing: map.getBearing(),
-    antialias: true,
-    preserveDrawingBuffer: true,
+    canvasContextAttributes: {
+      antialias: true,
+      preserveDrawingBuffer: true
+    },
     interactive: false,
     attributionControl: false,
     fadeDuration: 0

src/features/workbench/map/layer-group-style.ts

@@ -1,4 +1,7 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
+
+type PaintPropertyName = Parameters<MapLibreMap["setPaintProperty"]>[1];
+type LayoutPropertyName = Parameters<MapLibreMap["setLayoutProperty"]>[1];
 import { MAP_STYLE_TOKENS } from "./map-colors";
 import { SUPPLY_LAYER_VISUALS } from "./map-layer-visuals";
 import {
@@ -182,11 +185,11 @@ function scale(value: unknown, multiplier: number): unknown {
   return ["*", value, multiplier];
 }
 
-function setPaint(map: MapLibreMap, layerId: string, property: string, value: unknown) {
+function setPaint(map: MapLibreMap, layerId: string, property: PaintPropertyName, value: unknown) {
   if (map.getLayer(layerId)) map.setPaintProperty(layerId, property, (value ?? null) as never);
 }
 
-function setLayout(map: MapLibreMap, layerId: string, property: string, value: unknown) {
+function setLayout(map: MapLibreMap, layerId: string, property: LayoutPropertyName, value: unknown) {
   if (map.getLayer(layerId) && typeof map.setLayoutProperty === "function") {
     map.setLayoutProperty(layerId, property, (value ?? null) as never);
   }

src/main.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { setWorkerUrl } from "maplibre-gl";
+import maplibreWorkerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
 
 import { AuthStartupScreen } from "@/app/auth-startup-screen";
 import { initializeAuthentication } from "@/shared/auth/keycloak-auth";
@@ -8,6 +10,8 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import "katex/dist/katex.min.css";
 import "streamdown/styles.css";
 
+setWorkerUrl(maplibreWorkerUrl);
+
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 
 root.render(<AuthStartupScreen />);