fix: avoid map refresh on road selection

workbench/client/src/components/MapCanvas.tsx

@@ -4,7 +4,7 @@ import View from 'ol/View';
 import Select from 'ol/interaction/Select';
 import { click } from 'ol/events/condition';
 import type { Road, WorkbenchState } from '../types/state';
-import { createLayers, updateLayers, type LayerName } from '../map/layers';
+import { createLayers, updateLayers, updateSelectedRoad, type LayerName } from '../map/layers';
 
 interface Props {
   state: WorkbenchState;
@@ -72,7 +72,13 @@ export function MapCanvas({ state, selected, visible, scene, onSelectRoad, onFea
     updateLayers(layers, state, selected);
     const extent = layers.osm.getSource()!.getExtent();
     if (extent && Number.isFinite(extent[0])) map.getView().fit(extent, { padding: [48, 48, 48, 48], maxZoom: 19 });
-  }, [state, selected]);
+  }, [state]);
+  useEffect(() => {
+    const layers = layersRef.current;
+    if (!layers) return;
+    updateSelectedRoad(layers, selected);
+    layers.osm.changed();
+  }, [selected]);
   useEffect(() => {
     const layers = layersRef.current;
     if (!layers) return;

workbench/client/src/map/layers.ts

@@ -157,9 +157,14 @@ export function updateLayers(layers: ReturnType<typeof createLayers>, state: Wor
       .filter((item) => item.geometry)
       .map(({ geometry, ...properties }) => ({ type: 'Feature', properties, geometry: geometry! })),
   });
-  put('selectedRoad', { type: 'FeatureCollection', features: [] });
+  updateSelectedRoad(layers, selected);
+}
+
+export function updateSelectedRoad(layers: ReturnType<typeof createLayers>, selected: Road | null) {
+  const source = layers.selectedRoad.getSource()!;
+  source.clear();
   if (selected)
-    get('selectedRoad').addFeature(
+    source.addFeature(
       new Feature({ geometry: new LineString(selected.centerline).transform('EPSG:4326', 'EPSG:3857') }),
     );
 }