front: handle new signaling system

Author: Akctarus

front/src/applications/editor/Map.tsx

@@ -20,15 +20,19 @@ import Background from '../../common/Map/Layers/Background';
 import OSM from '../../common/Map/Layers/OSM';
 import Hillshade from '../../common/Map/Layers/Hillshade';
 import Platforms from '../../common/Map/Layers/Platforms';
-import osmBlankStyle from '../../common/Map/Layers/osmBlankStyle';
+import { blankStyle } from '../../common/Map/Layers/blankStyle';
 import IGN_BD_ORTHO from '../../common/Map/Layers/IGN_BD_ORTHO';
 import { Viewport } from '../../reducers/map';
 import { getMapMouseEventNearestFeature } from '../../utils/mapHelper';
 import EditorContext from './context';
 import { EditorState, LAYER_TO_EDITOAST_DICT, LAYERS_SET, LayerType } from './tools/types';
 import { getEntity } from './data/api';
 import { getInfraID, getSwitchTypes } from '../../reducers/osrdconf/selectors';
-import { getShowOSM, getTerrain3DExaggeration } from '../../reducers/map/selectors';
+import {
+  getShowOSM,
+  getSignalingSystems,
+  getTerrain3DExaggeration,
+} from '../../reducers/map/selectors';
 import { CommonToolState } from './tools/commonToolState';
 import { EditorContextType, ExtendedEditorContextType, Tool } from './tools/editorContextTypes';
 
@@ -70,6 +74,8 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
   const editorState = useSelector((state: { editor: EditorState }) => state.editor);
   const showOSM = useSelector(getShowOSM);
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
+  const signalingSystems = useSelector(getSignalingSystems);
+
   const extendedContext = useMemo<ExtendedEditorContextType<CommonToolState>>(
     () => ({
       ...context,
@@ -94,6 +100,8 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
     [activeTool, extendedContext, mapState]
   );
 
+  const spritesStyle = useMemo(() => blankStyle(signalingSystems), [signalingSystems]);
+
   return (
     <>
       <div
@@ -109,7 +117,7 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
           {...viewport}
           ref={mapRef}
           style={{ width: '100%', height: '100%' }}
-          mapStyle={osmBlankStyle}
+          mapStyle={spritesStyle}
           onMove={(e) => setViewport(e.viewState)}
           onMoveStart={() => setMapState((prev) => ({ ...prev, isDragging: true }))}
           onMoveEnd={() => {
@@ -282,7 +290,7 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
           )}
         </ReactMapGL>
       </div>
-      {children}
+      ;{children}
     </>
   );
 };

front/src/applications/referenceMap/Map.tsx

@@ -1,13 +1,13 @@
 import { isNil } from 'lodash';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import ReactMapGL, { AttributionControl, ScaleControl, MapRef } from 'react-map-gl/maplibre';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateViewport, Viewport } from 'reducers/map';
 import { RootState } from 'reducers';
 
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
-import { getTerrain3DExaggeration } from 'reducers/map/selectors';
+import { getSignalingSystems, getTerrain3DExaggeration } from 'reducers/map/selectors';
 
 /* Main data & layers */
 import Background from 'common/Map/Layers/Background';
@@ -36,7 +36,7 @@ import Switches from 'common/Map/Layers/Switches';
 import TracksGeographic from 'common/Map/Layers/TracksGeographic';
 import TracksOSM from 'common/Map/Layers/TracksOSM';
 import colors from 'common/Map/Consts/colors';
-import osmBlankStyle from 'common/Map/Layers/osmBlankStyle';
+import { blankStyle } from 'common/Map/Layers/blankStyle';
 import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
 import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
 
@@ -47,6 +47,7 @@ function Map() {
     (state: RootState) => state.map
   );
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
+  const signalingSystems = useSelector(getSignalingSystems);
   const mapRef = useRef<MapRef | null>(null);
   const { urlLat, urlLon, urlZoom, urlBearing, urlPitch } = useParams();
   const dispatch = useDispatch();
@@ -95,6 +96,8 @@ function Map() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const spritesStyle = useMemo(() => blankStyle(signalingSystems), [signalingSystems]);
+
   return (
     <main className="mastcontainer mastcontainer-map">
       <MapButtons
@@ -108,7 +111,7 @@ function Map() {
         ref={mapRef}
         cursor="normal"
         style={{ width: '100%', height: '100%' }}
-        mapStyle={osmBlankStyle}
+        mapStyle={spritesStyle}
         onMove={(e) => updateViewportChange(e.viewState)}
         onMoveEnd={(e) => updateViewportChange(e.viewState, true)}
         attributionControl={false} // Defined below