Skip to content

Commit 11bf1b7

Browse files
jacomyalclarani
jacomyal
authored and
clarani
committed
front: improves PSLs highlighting in editor
Fix #5799. Details: - Moves hardcoded speed colors from SpeedLimits.tsx and SNCF_PSL.tsx to colors.ts (so that they are transformed by transformTheme in GeoJSONs.tsx) - Always adds edited entity ID to selection in SpeedSectionEditionLayers so that GeoJSONs always draws everything else as unemphasized - Improves the transformTheme call in GeoJSONs.tsx, so that bright colors are not always turned to white (the old formula was not working well with the speed colors)
1 parent 41df33e commit 11bf1b7

File tree

5 files changed

+93
-30
lines changed

5 files changed

+93
-30
lines changed

‎front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -40,21 +40,27 @@ export const SpeedSectionEditionLayers: FC = () => {
4040
const { mapStyle, layersSettings, issuesSettings, showIGNBDORTHO } = useSelector(getMap);
4141
const infraId = useSelector(getInfraID);
4242
const selection = useMemo(() => {
43+
const res: string[] = [entity.properties.id];
44+
4345
// Dragging an extremity:
44-
if (interactionState.type === 'moveRangeExtremity')
45-
return [(entity.properties.track_ranges || [])[interactionState.rangeIndex].track];
46+
if (interactionState.type === 'moveRangeExtremity') {
47+
res.push((entity.properties.track_ranges || [])[interactionState.rangeIndex].track);
48+
}
4649

4750
// Custom hovered element:
48-
if (hoveredItem?.speedSectionItemType) return [hoveredItem.track.properties.id];
51+
else if (hoveredItem?.speedSectionItemType) {
52+
res.push(hoveredItem.track.properties.id);
53+
}
4954

5055
// EditorEntity hovered element:
51-
if (
56+
else if (
5257
hoveredItem?.type === 'TrackSection' &&
5358
!(entity.properties.track_ranges || []).find((range) => range.track === hoveredItem.id)
54-
)
55-
return [hoveredItem.id];
59+
) {
60+
res.push(hoveredItem.id);
61+
}
5662

57-
return undefined;
63+
return res;
5864
}, [interactionState, hoveredItem, entity]);
5965

6066
const speedSectionsFeature: FeatureCollection = useMemo(() => {

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

+44
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import { Theme } from '../../../types';
33
const bpBg = '#405cb1';
44
const bpMedium = '#98aedd';
55
const bpLight = '#e4eaf6';
6+
const speedNone = '#b9b9b9';
7+
const speed30 = '#ef5151';
8+
const speed60 = '#fbb286';
9+
const speed100 = '#fdf479';
10+
const speed140 = '#e0fe64';
11+
const speed160 = '#9eff77';
12+
const speed220 = '#89f7d8';
13+
const speedOver220 = '#91d3ff';
614

715
const colors: Record<string, Theme> = {
816
normal: {
@@ -85,6 +93,7 @@ const colors: Record<string, Theme> = {
8593
detailhalo: '#ffffff',
8694
text: '#4d4f53',
8795
halo: '#ffffff',
96+
color: '#747678',
8897
},
8998
radio: {
9099
text: '#5596c8',
@@ -120,6 +129,14 @@ const colors: Record<string, Theme> = {
120129
detailhalo: '#ffffff',
121130
text: '#4d4f53',
122131
halo: '#ffffff',
132+
speedNone,
133+
speed30,
134+
speed60,
135+
speed100,
136+
speed140,
137+
speed160,
138+
speed220,
139+
speedOver220,
123140
},
124141
station: {
125142
circle: '#555555',
@@ -237,6 +254,7 @@ const colors: Record<string, Theme> = {
237254
detailhalo: '#0b011d',
238255
text: '#3a86ff',
239256
halo: '#000000',
257+
color: '#747678',
240258
},
241259
radio: {
242260
text: '#5596c8',
@@ -272,6 +290,14 @@ const colors: Record<string, Theme> = {
272290
detailhalo: '#0b011d',
273291
text: '#3a86ff',
274292
halo: '#000000',
293+
speedNone,
294+
speed30,
295+
speed60,
296+
speed100,
297+
speed140,
298+
speed160,
299+
speed220,
300+
speedOver220,
275301
},
276302
station: {
277303
circle: '#3a86ff',
@@ -389,6 +415,7 @@ const colors: Record<string, Theme> = {
389415
detailhalo: bpBg,
390416
text: bpLight,
391417
halo: bpBg,
418+
color: '#747678',
392419
},
393420
radio: {
394421
text: bpMedium,
@@ -424,6 +451,14 @@ const colors: Record<string, Theme> = {
424451
detailhalo: bpBg,
425452
text: bpLight,
426453
halo: bpBg,
454+
speedNone,
455+
speed30,
456+
speed60,
457+
speed100,
458+
speed140,
459+
speed160,
460+
speed220,
461+
speedOver220,
427462
},
428463
station: {
429464
circle: bpLight,
@@ -541,6 +576,7 @@ const colors: Record<string, Theme> = {
541576
detailhalo: '#ffffff',
542577
text: '#4d4f53',
543578
halo: '#ffffff',
579+
color: '#747678',
544580
},
545581
radio: {
546582
text: '#5596c8',
@@ -576,6 +612,14 @@ const colors: Record<string, Theme> = {
576612
detailhalo: '#ffffff',
577613
text: '#4d4f53',
578614
halo: '#ffffff',
615+
speedNone,
616+
speed30,
617+
speed60,
618+
speed100,
619+
speed140,
620+
speed160,
621+
speed220,
622+
speedOver220,
579623
},
580624
station: {
581625
circle: '#555555',

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

+13-3
Original file line numberDiff line numberDiff line change
@@ -294,20 +294,27 @@ function getPSLSignsLayers(context: LayerContext, prefix: string): LayerProps[]
294294

295295
function getPSLLayers(context: LayerContext, prefix: string): LayerProps[] {
296296
const filter = getPSLFilter(context.layersSettings);
297+
const bgProps = getPSLSpeedLineBGLayerProps(context);
298+
const layerProps = getPSLSpeedLineLayerProps(context);
299+
297300
return [
298301
{
299302
...getPSLSpeedValueLayerProps(context),
300303
id: `${prefix}geo/psl-value`,
301304
filter,
302305
},
303306
{
304-
...getPSLSpeedLineBGLayerProps(context),
307+
...bgProps,
305308
id: `${prefix}geo/psl-line-bg`,
309+
paint: context.isEmphasized ? bgProps.paint : { ...bgProps.paint, 'line-width': 1 },
306310
filter,
307311
},
308312
{
309-
...getPSLSpeedLineLayerProps(context),
313+
...layerProps,
310314
id: `${prefix}geo/psl-line`,
315+
paint: context.isEmphasized
316+
? layerProps.paint
317+
: { ...layerProps.paint, 'line-width': 1, 'line-opacity': 0.2 },
311318
filter,
312319
},
313320
];
@@ -439,7 +446,10 @@ const GeoJSONs: FC<{
439446
const infraID = useSelector(getInfraID);
440447
const selectedPrefix = `${prefix}selected/`;
441448
const hiddenColors = useMemo(
442-
() => transformTheme(colors, (color) => chroma(color).desaturate(50).brighten(1).hex()),
449+
() =>
450+
transformTheme(colors, (color) =>
451+
chroma.average([color, colors.background.color], 'lab', [1.5, 1]).hex()
452+
),
443453
[colors]
444454
);
445455

‎front/src/common/Map/Layers/SpeedLimits.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,11 @@ export function getSpeedSectionsFilter(
4444
}
4545

4646
export function getSpeedSectionsLineLayerProps({
47+
colors,
4748
sourceTable,
4849
layersSettings,
4950
}: {
50-
colors?: Theme;
51+
colors: Theme;
5152
sourceTable?: string;
5253
layersSettings: MapState['layersSettings'];
5354
}): OmitLayer<LineLayer> {
@@ -68,20 +69,20 @@ export function getSpeedSectionsLineLayerProps({
6869
[
6970
'case',
7071
['all', ['>', ['var', 'speed_limit'], 220]],
71-
'rgba(145, 211, 255, 1)',
72+
colors.speed.speedOver220,
7273
['all', ['>', ['var', 'speed_limit'], 160], ['<=', ['var', 'speed_limit'], 220]],
73-
'rgba(137, 247, 216, 1)',
74+
colors.speed.speed220,
7475
['all', ['>=', ['var', 'speed_limit'], 140], ['<=', ['var', 'speed_limit'], 160]],
75-
'rgba(158, 255, 119, 1)',
76+
colors.speed.speed160,
7677
['all', ['>=', ['var', 'speed_limit'], 100], ['<', ['var', 'speed_limit'], 140]],
77-
'rgba(224, 254, 100, 1)',
78+
colors.speed.speed140,
7879
['all', ['>', ['var', 'speed_limit'], 60], ['<', ['var', 'speed_limit'], 100]],
79-
'rgba(253, 244, 121, 1)',
80+
colors.speed.speed100,
8081
['all', ['<=', ['var', 'speed_limit'], 60], ['>', ['var', 'speed_limit'], 30]],
81-
'rgba(251, 178, 134, 1)',
82+
colors.speed.speed60,
8283
['all', ['<=', ['var', 'speed_limit'], 30]],
83-
'rgba(239, 81, 81, 1)',
84-
'rgba(185, 185, 185, 1)',
84+
colors.speed.speed30,
85+
colors.speed.speedNone,
8586
],
8687
],
8788
'line-width': 4,

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

+13-11
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,10 @@ export function getPSLSpeedValueLayerProps({
7171
}
7272

7373
export function getPSLSpeedLineBGLayerProps({
74+
colors,
7475
sourceTable,
7576
}: {
76-
colors?: Theme;
77+
colors: Theme;
7778
sourceTable?: string;
7879
layersSettings?: MapState['layersSettings'];
7980
}): OmitLayer<LineLayer> {
@@ -86,7 +87,7 @@ export function getPSLSpeedLineBGLayerProps({
8687
'line-cap': ['step', ['zoom'], 'round', 15, 'square'],
8788
},
8889
paint: {
89-
'line-color': '#747678',
90+
'line-color': colors.psl.color,
9091
'line-width': 3,
9192
'line-offset': 0,
9293
'line-opacity': 1,
@@ -100,10 +101,11 @@ export function getPSLSpeedLineBGLayerProps({
100101
}
101102

102103
export function getPSLSpeedLineLayerProps({
104+
colors,
103105
sourceTable,
104106
layersSettings,
105107
}: {
106-
colors?: Theme;
108+
colors: Theme;
107109
sourceTable?: string;
108110
layersSettings: MapState['layersSettings'];
109111
}): OmitLayer<LineLayer> {
@@ -123,20 +125,20 @@ export function getPSLSpeedLineLayerProps({
123125
[
124126
'case',
125127
['all', ['>', ['var', 'speed_limit'], 220]],
126-
'rgba(145, 211, 255, 1)',
128+
colors.speed.speedOver220,
127129
['all', ['>', ['var', 'speed_limit'], 160], ['<=', ['var', 'speed_limit'], 220]],
128-
'rgba(137, 247, 216, 1)',
130+
colors.speed.speed220,
129131
['all', ['>=', ['var', 'speed_limit'], 140], ['<=', ['var', 'speed_limit'], 160]],
130-
'rgba(158, 255, 119, 1)',
132+
colors.speed.speed160,
131133
['all', ['>=', ['var', 'speed_limit'], 100], ['<', ['var', 'speed_limit'], 140]],
132-
'rgba(224, 254, 100, 1)',
134+
colors.speed.speed140,
133135
['all', ['>', ['var', 'speed_limit'], 60], ['<', ['var', 'speed_limit'], 100]],
134-
'rgba(253, 244, 121, 1)',
136+
colors.speed.speed100,
135137
['all', ['<=', ['var', 'speed_limit'], 60], ['>', ['var', 'speed_limit'], 30]],
136-
'rgba(251, 178, 134, 1)',
138+
colors.speed.speed60,
137139
['all', ['<=', ['var', 'speed_limit'], 30]],
138-
'rgba(239, 81, 81, 1)',
139-
'rgba(185, 185, 185, 1)',
140+
colors.speed.speed30,
141+
colors.speed.speedNone,
140142
],
141143
],
142144
'line-width': 3,

0 commit comments

Comments
 (0)