front: carto: display neutral section signs

creation of MastLayer, display with angle.
display neutral section signs conditionnally
split MastLayer
add masts and refs, put in ext SNCF
display neutral section signs with angle

front/src/applications/editor/components/LayersModal.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { groupBy, mapKeys, mapValues, sum, isString, isArray, uniq } from 'lodash';
+import { groupBy, isArray, isString, mapKeys, mapValues, sum, uniq } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { MdSpeed } from 'react-icons/md';
 import { GiElectric } from 'react-icons/gi';
 import { TbRectangleVerticalFilled } from 'react-icons/tb';
 
+import type { EditoastType, LayerType } from 'applications/editor/tools/types';
 import { EDITOAST_TO_LAYER_DICT } from 'applications/editor/tools/types';
-import type { LayerType, EditoastType } from 'applications/editor/tools/types';
 import type { EditorEntity } from 'types';
 
 import pslsIcon from 'assets/pictures/layersicons/layer_tivs.svg';
@@ -16,7 +16,6 @@ import detectorsIcon from 'assets/pictures/layersicons/detectors.svg';
 import signalsIcon from 'assets/pictures/layersicons/layer_signal.svg';
 import bufferStopIcon from 'assets/pictures/layersicons/bufferstop.svg';
 import trackSectionsIcon from 'assets/pictures/layersicons/layer_adv.svg';
-import neutralSectionSignsIcon from 'assets/pictures/layersicons/layer_signal.svg';
 
 import { useInfraID } from 'common/osrdContext';
 import { Modal } from 'common/BootstrapSNCF/ModalSNCF';
@@ -38,7 +37,6 @@ export const LAYERS: Array<{ layers: LayerType[]; icon: string | JSX.Element }>
   { layers: ['speed_sections'], icon: <MdSpeed style={{ width: '20px' }} className="mx-2" /> },
   { layers: ['psl', 'psl_signs'], icon: pslsIcon },
   { layers: ['electrifications'], icon: <GiElectric style={{ width: '20px' }} className="mx-2" /> },
-  { layers: ['neutral_signs'], icon: neutralSectionSignsIcon },
   {
     layers: ['platforms'],
     icon: <TbRectangleVerticalFilled style={{ width: '20px' }} className="mx-2" />,

front/src/applications/editor/tools/types.ts

@@ -27,7 +27,7 @@ export const LAYERS = [
   'routes',
   'signals',
   'speed_sections',
-  'neutral_sections_signs',
+  'neutral_signs',
   'switches',
   'track_sections',
   'platforms',

front/src/applications/referenceMap/Map.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { MapRef } from 'react-map-gl/maplibre';
 import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl/maplibre';
 import { isNil } from 'lodash';
+import type { Viewport } from 'reducers/map';
 import { updateMapSearchMarker, updateViewport } from 'reducers/map';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
-import type { MapRef } from 'react-map-gl/maplibre';
-import type { Viewport } from 'reducers/map';
-
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 import { getMap, getTerrain3DExaggeration } from 'reducers/map/selectors';
 
@@ -25,7 +24,6 @@ import IGN_SCAN25 from 'common/Map/Layers/IGN_SCAN25';
 import IGN_CADASTRE from 'common/Map/Layers/IGN_CADASTRE';
 import MapButtons from 'common/Map/Buttons/MapButtons';
 import NeutralSections from 'common/Map/Layers/extensions/SNCF/NeutralSections';
-import NeutralSectionSigns from '../../common/Map/Layers/extensions/SNCF/NeutralSectionsSigns';
 import OSM from 'common/Map/Layers/OSM';
 /* Objects & various */
 import colors from 'common/Map/Consts/colors';
@@ -45,9 +43,6 @@ import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
 
 import 'common/Map/Map.scss';
 import { useInfraID } from 'common/osrdContext';
-import { getMapMouseEventNearestFeature } from "../../utils/mapHelper";
-import NeutralSectionSigns from "../../common/Map/Layers/NeutralSectionsSigns";
-
 
 function Map() {
   const mapBlankStyle = useMapBlankStyle();
@@ -117,10 +112,6 @@ function Map() {
         cursor="normal"
         style={{ width: '100%', height: '100%' }}
         mapStyle={mapBlankStyle}
-        onMouseDown={(e)=>{
-          const nearestResult = getMapMouseEventNearestFeature(e);
-          console.log("nearestResult", nearestResult);
-        }}
         onMove={(e) => updateViewportChange(e.viewState)}
         onMoveEnd={(e) => updateViewportChange(e.viewState, true)}
         attributionControl={false} // Defined below
@@ -206,12 +197,8 @@ function Map() {
           infraID={infraID}
         />
         <NeutralSections
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.DEAD_SECTIONS.GROUP]}
-          infraID={infraID}
-        />
-        <NeutralSectionSigns
           colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP]}
+          layerOrder={LAYER_GROUPS_ORDER[LAYERS.DEAD_SECTIONS.GROUP]}
           infraID={infraID}
         />
         <BufferStops

front/src/common/Map/Layers/GeoJSONs.tsx

@@ -57,7 +57,7 @@ import {
 
 import type { RootState } from 'reducers';
 import type { MapState } from 'reducers/map';
-import NeutralSectionSigns, { getNeutralSectionsSignLayerProps } from './NeutralSectionsSigns';
+import { getNeutralSectionsSignLayerProps } from './extensions/SNCF/NeutralSectionsSigns';
 
 const POINT_ENTITIES_MIN_ZOOM = 12;
 
@@ -378,7 +378,6 @@ function getErrorsLayers(context: LayerContext, prefix: string): LayerProps[] {
 }
 
 function getNeutralSectionsSignLayers(context: LayerContext, prefix: string): LayerProps[] {
-
   return [
     {
       ...getNeutralSectionsSignLayerProps(context),
@@ -400,7 +399,7 @@ const SOURCES_DEFINITION: {
   { entityType: 'speed_sections', getLayers: getSpeedSectionLayers },
   { entityType: 'psl', getLayers: getPSLLayers },
   { entityType: 'psl_signs', getLayers: getPSLSignsLayers },
-  { entityType: 'neutral_sections_signs', getLayers: getNeutralSectionsSignLayers },
+  { entityType: 'neutral_signs', getLayers: getNeutralSectionsSignLayers },
   { entityType: 'electrifications', getLayers: getElectrificationsLayers },
   { entityType: 'errors', getLayers: getErrorsLayers },
 ];
@@ -446,7 +445,7 @@ interface GeoJSONsProps {
   fingerprint?: string | number;
   isEmphasized?: boolean;
   beforeId?: string;
-  // When true, all layers are rendered (ie "minZoom" restrictions are ignored)
+  // When true, all layers are rendered (ie "minzoom" restrictions are ignored)
   renderAll?: boolean;
   infraID: number | undefined;
 }
@@ -549,8 +548,6 @@ const GeoJSONs = ({
   if (skipSources) {
     return null;
   }
-  console.log('sources', sources);
-
   return (
     <>
       {sources.map((source) => (

front/src/common/Map/Layers/KPLabel.ts

@@ -9,17 +9,17 @@ export default function getKPLabelLayerProps(params: {
   bottomOffset?: number;
   PKFieldName?: string;
   colors: Theme;
-  maxzoom?: number;
   minzoom?: number;
-  angle_kind?: string;
+  maxzoom?: number;
+  anglePropertyName?: string;
 }): OmitLayer<SymbolLayer> {
   const {
     bottomOffset = 2.5,
     colors,
     PKFieldName = 'kp',
-    angle_kind = 'angle',
-    maxzoom = 24,
+    anglePropertyName = 'angle',
     minzoom = 7,
+    maxzoom = 24,
     isSignalisation = false,
     sourceTable,
   } = params;
@@ -35,7 +35,7 @@ export default function getKPLabelLayerProps(params: {
     ? {
         'text-rotation-alignment': 'map',
         'text-pitch-alignment': 'map',
-        'text-rotate': ['get', angle_kind],
+        'text-rotate': ['get', anglePropertyName],
         'text-anchor': [
           'case',
           testSideExpression('LEFT') as ExpressionFilterSpecification,
@@ -64,8 +64,8 @@ export default function getKPLabelLayerProps(params: {
       ['!=', ['literal', null], ['get', PKFieldName]],
       ['!=', '', ['get', PKFieldName]],
     ],
-    maxzoom,
     minzoom,
+    maxzoom,
     layout: {
       'text-field': ['get', PKFieldName],
       'text-font': ['Roboto Medium'],

front/src/common/Map/Layers/MastLayers.tsx

@@ -4,18 +4,20 @@
 import { LayerProps, SymbolLayer } from 'react-map-gl/maplibre';
 import { isNil } from 'lodash';
 import React from 'react';
-import { LayerContext } from './types';
-import { OmitLayer, Theme } from '../../../types';
+import { OmitLayer, Theme } from 'types';
 import OrderedLayer from './OrderedLayer';
 
 export function getCommonSignsMastLayerProps(params: {
   sourceTable?: string;
-  angle_kind?: string;
+  anglePropertyName?: string;
+  minzoom?: number;
+  maxzoom?: number;
 }): OmitLayer<SymbolLayer> {
-  const { angle_kind = 'angle', sourceTable } = params;
+  const { anglePropertyName = 'angle', sourceTable } = params;
   const res: OmitLayer<SymbolLayer> = {
     type: 'symbol',
     minzoom: 11,
+    maxzoom: 24,
     paint: {},
     layout: {
       'text-field': '',
@@ -32,7 +34,7 @@ export function getCommonSignsMastLayerProps(params: {
       'icon-size': 0.7,
       'icon-rotation-alignment': 'map',
       'icon-pitch-alignment': 'map',
-      'icon-rotate': ['get', angle_kind],
+      'icon-rotate': ['get', anglePropertyName],
       'icon-allow-overlap': true,
       'icon-ignore-placement': true,
       'text-allow-overlap': true,
@@ -54,11 +56,11 @@ interface MastLayerProps {
 }
 
 export default function MastLayer(props: MastLayerProps) {
-  const { colors, layerOrder, infraID } = props;
+  const { layerOrder } = props;
 
   const mastsParams: LayerProps = getCommonSignsMastLayerProps({
     sourceTable: 'neutral_signs',
-    angle_kind: 'angle',
+    anglePropertyName: 'angle',
   });
 
   return <OrderedLayer {...mastsParams} layerOrder={layerOrder} />;