front: add KP to PSL SIGNS

Author: nicolaswurtz

front/src/common/Map/Consts/colors.ts

@@ -23,6 +23,11 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: '#b42222',
     },
+    kp: {
+      circle: '#162873',
+      text: '#4d4f53',
+      halo: '#ffffff',
+    },
     kvb: {
       color: '#ffc700',
     },
@@ -95,11 +100,6 @@ const colors: Record<string, Theme> = {
       text: '#e05206',
       halo: '#ffffff',
     },
-    rk: {
-      circle: '#162873',
-      text: '#4d4f53',
-      halo: '#ffffff',
-    },
     sign: {
       text: '#333333',
       halo: '#ffffff',
@@ -175,6 +175,11 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: '#b42222',
     },
+    kp: {
+      circle: '#8338ec',
+      text: '#8338ec',
+      halo: '#8338ec',
+    },
     kvb: {
       color: '#ffc700',
     },
@@ -243,11 +248,6 @@ const colors: Record<string, Theme> = {
     railyard: {
       text: '#8095c3',
     },
-    rk: {
-      circle: '#8338ec',
-      text: '#8338ec',
-      halo: '#8338ec',
-    },
     routes: {
       text: '#e05206',
       halo: '#ffffff',
@@ -319,6 +319,11 @@ const colors: Record<string, Theme> = {
     electricbox: {
       text: bpLight,
     },
+    kp: {
+      circle: bpLight,
+      text: bpLight,
+      halo: bpLight,
+    },
     kvb: {
       color: bpLight,
     },
@@ -387,11 +392,6 @@ const colors: Record<string, Theme> = {
     railyard: {
       text: bpLight,
     },
-    rk: {
-      circle: bpLight,
-      text: bpLight,
-      halo: bpLight,
-    },
     routes: {
       text: bpLight,
       halo: bpBg,

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

@@ -62,6 +62,7 @@ const BufferStops: FC<BufferStopsProps> = ({ colors, layerOrder }) => {
           colors,
           minzoom: 12,
           sourceLayer: 'buffer_stops',
+          fieldName: 'extensions_sncf_kp',
         })}
         id="chartis/osrd_bufferstop_kp/geo"
         layerOrder={layerOrder}

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

@@ -80,6 +80,7 @@ const Detectors: FC<DetectorsProps> = ({ colors, layerOrder }) => {
           colors,
           minzoom: 10,
           sourceLayer: 'detectors',
+          fieldName: 'extensions_sncf_kp',
         })}
         id="chartis/osrd_detectors_kp/geo"
         layerOrder={layerOrder}

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

@@ -10,12 +10,12 @@ import OrderedLayer from 'common/Map/Layers/OrderedLayer';
 import configKPLabelLayer from 'common/Map/Layers/configKPLabelLayer';
 import { getInfraID } from 'reducers/osrdconf/selectors';
 
-interface PlatformProps {
+interface Props {
   colors: Theme;
   layerOrder: number;
 }
 
-export default function OperationalPoints(props: PlatformProps) {
+export default function OperationalPoints(props: Props) {
   const { layersSettings } = useSelector((state: RootState) => state.map);
   const infraID = useSelector(getInfraID);
   const { colors, layerOrder } = props;
@@ -148,6 +148,7 @@ export default function OperationalPoints(props: PlatformProps) {
             colors,
             minzoom: 9.5,
             sourceLayer: 'operational_points',
+            fieldName: 'extensions_sncf_kp',
           })}
           id="chartis/osrd_operational_point_kp/geo"
           layerOrder={layerOrder}

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

@@ -4,41 +4,54 @@ import { Theme } from 'types';
 
 interface PlatformProps {
   colors: Theme;
+  fieldName?: string;
+  leftOffset?: number;
   maxzoom?: number;
   minzoom?: number;
-  leftOffset?: number;
+  rotation?: 'map' | 'viewport' | 'auto';
   sourceLayer: string;
 }
 
 /*
 * signals
-detectors: seulement ceux sous un signal, ceux qu'on genere en sur les tiv de jonction connait pas leur pk
-buffer stops
-les panneaux des psl
-les operational point parts
+OK detectors: seulement ceux sous un signal, ceux qu'on genere en sur les tiv de jonction connait pas leur pk
+OK buffer stops
+OK les panneaux des psl
+OK les operational point parts
 */
 
 export default function configKPLabelLayer(props: PlatformProps) {
-  const { colors, leftOffset = -1, maxzoom = 24, minzoom = 7, sourceLayer } = props;
+  const {
+    colors,
+    fieldName = 'kp',
+    leftOffset = -1,
+    maxzoom = 24,
+    minzoom = 7,
+    rotation = 'viewport',
+    sourceLayer,
+  } = props;
   const rkValue: LayerProps = {
     type: 'symbol',
     'source-layer': sourceLayer,
-    filter: ['!=', '', ['get', 'extensions_sncf_kp']],
+    filter: ['all', ['!=', ['literal', null], ['get', fieldName]], ['!=', '', ['get', fieldName]]],
     maxzoom,
     minzoom,
     layout: {
-      'text-field': ['concat', 'PK ', ['get', 'extensions_sncf_kp']],
+      'text-field': ['concat', 'PK ', ['get', fieldName]],
       'text-font': ['Roboto Medium'],
       'text-size': 9,
       'text-anchor': 'right',
       'text-allow-overlap': true,
       'text-ignore-placement': true,
       'text-offset': [leftOffset, 0.1],
+      'text-rotation-alignment': rotation,
+      'text-pitch-alignment': rotation,
+      'text-rotate': rotation === 'map' ? ['get', 'angle_geo'] : 0,
     },
     paint: {
-      'text-color': colors.rk.text,
+      'text-color': colors.kp.text,
       'text-halo-width': 0,
-      'text-halo-color': colors.rk.halo,
+      'text-halo-color': colors.kp.halo,
       'text-halo-blur': 1,
     },
   };

front/src/common/Map/Layers/extensions/SNCF/SNCF_PSL.tsx

@@ -212,7 +212,7 @@ export default function SNCF_PSL(props: SNCF_PSLProps) {
             layerOrder={layerOrder}
           />
         </Source>
-        <SNCF_PSL_Signs layerOrder={layerOrder} />
+        <SNCF_PSL_Signs colors={colors} layerOrder={layerOrder} />
       </>
     );
   }

front/src/common/Map/Layers/extensions/SNCF/SNCF_PSL_SIGNS.tsx

@@ -3,13 +3,15 @@ import { MAP_URL } from 'common/Map/const';
 import { LayerProps, Source, SymbolLayer } from 'react-map-gl/maplibre';
 import { useSelector } from 'react-redux';
 import { getInfraID } from 'reducers/osrdconf/selectors';
-import { OmitLayer } from 'types';
+import { Theme, OmitLayer } from 'types';
 import { isNil } from 'lodash';
 import { getMap } from 'reducers/map/selectors';
 import OrderedLayer from '../../OrderedLayer';
 import { LayerContext } from '../../types';
+import configKPLabelLayer from '../../configKPLabelLayer';
 
 interface SNCF_PSL_SignsProps {
+  colors: Theme;
   layerOrder?: number;
 }
 
@@ -94,7 +96,7 @@ export function getPSLSignsMastLayerProps({
 
 export default function SNCF_PSL_Signs(props: SNCF_PSL_SignsProps) {
   const infraID = useSelector(getInfraID);
-  const { layerOrder } = props;
+  const { colors, layerOrder } = props;
 
   const { mapStyle } = useSelector(getMap);
   const prefix = mapStyle === 'blueprint' ? 'SCHB ' : '';
@@ -116,6 +118,16 @@ export default function SNCF_PSL_Signs(props: SNCF_PSL_SignsProps) {
     >
       <OrderedLayer {...mastsParams} layerOrder={layerOrder} />
       <OrderedLayer {...signsParams} layerOrder={layerOrder} />
+      <OrderedLayer
+        {...configKPLabelLayer({
+          colors,
+          minzoom: 9.5,
+          sourceLayer: 'psl_signs',
+          rotation: 'map',
+        })}
+        id="chartis/osrd_psl_signs_kp/geo"
+        layerOrder={layerOrder}
+      />
     </Source>
   );
 }