front: rework layer activation

SarahBellaha · SarahBellaha · commit 2ed39a8e2f34 · 2023-11-13T14:15:20.000Z
diff --git a/front/public/locales/en/map-settings.json b/front/public/locales/en/map-settings.json
@@ -6,7 +6,6 @@
   "detectors": "Detectors",
   "jdz": "Zone junction",
   "layers": "Data layers",
-  "lights": "Light signals",
   "mapSettings": "Map settings",
   "mapstyles": {
     "blueprint": "Blueprint",
@@ -19,6 +18,7 @@
   "signals": "Signals",
   "signalingtype": "Signalling block type",
   "signalisation": "Signaling",
+  "signals": "Light signals",
   "showIGNBDORTHO": "BD Ortho photo ©IGN",
   "showIGNSCAN25": "SCAN PLAN/25/100 ©IGN",
   "showIGNCadastre": "Cadastre ©IGN",
diff --git a/front/public/locales/en/translation.json b/front/public/locales/en/translation.json
@@ -167,8 +167,8 @@
       "frozen-layer": "needed for the active tool",
       "layer-selected-items_one": "One item selected",
       "layer-selected-items_other": "{{count}} items selected",
-      "selection-warning_one": "An element will be deselected during confirmation.",
-      "selection-warning_other": "{{count}} elements will be deselected during confirmation.",
+      "selection-warning_one": "An element has been deselected.",
+      "selection-warning_other": "{{count}} elements have been deselected.",
       "no-speed-limit-tag": "No composition code"
     },
     "linear-metadata": {
diff --git a/front/public/locales/fr/map-settings.json b/front/public/locales/fr/map-settings.json
@@ -6,7 +6,6 @@
   "detectors": "Détecteurs",
   "jdz": "Joints de zone",
   "layers": "Couches de données",
-  "lights": "Signaux lumineux",
   "mapSettings": "Paramètres cartographie",
   "mapstyles": {
     "blueprint": "Blueprint",
@@ -19,6 +18,7 @@
   "signals": "Signals",
   "signalingtype": "Type de block",
   "signalisation": "Signalisation",
+  "signals": "Signaux lumineux",
   "showIGNBDORTHO": "BD Ortho photo ©IGN",
   "showIGNSCAN25": "SCAN PLAN/25/100 ©IGN",
   "showIGNCadastre": "Cadastre ©IGN",
diff --git a/front/public/locales/fr/translation.json b/front/public/locales/fr/translation.json
@@ -167,8 +167,8 @@
       "frozen-layer": "nécessaire pour l'outil actif",
       "layer-selected-items_one": "Un élément sélectionné",
       "layer-selected-items_other": "{{count}} éléments sélectionnés",
-      "selection-warning_one": "Un élément sera désélectionné lors de la confirmation.",
-      "selection-warning_other": "{{count}} éléments seront désélectionnés lors de la confirmation.",
+      "selection-warning_one": "Un élément a été désélectionné.",
+      "selection-warning_other": "{{count}} éléments ont été désélectionnés.",
       "no-speed-limit-tag": "Aucun code de composition"
     },
     "linear-metadata": {
diff --git a/front/src/applications/editor/Editor.tsx b/front/src/applications/editor/Editor.tsx
@@ -11,7 +11,7 @@ import 'common/Map/Map.scss';
 
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import { LoaderState } from 'common/Loader';
-import { loadDataModel, updateTotalsIssue } from 'reducers/editor';
+import { loadDataModel, selectLayers, updateTotalsIssue } from 'reducers/editor';
 import { updateInfraID } from 'reducers/osrdconf';
 import { updateViewport, Viewport } from 'reducers/map';
 import { getInfraID } from 'reducers/osrdconf/selectors';
@@ -27,7 +27,6 @@ import {
   EditorContextType,
   ExtendedEditorContextType,
   FullTool,
-  ReadOnlyEditorContextType,
   Reducer,
 } from './tools/editorContextTypes';
 import { switchProps } from './tools/switchProps';
@@ -176,6 +175,11 @@ const Editor: FC = () => {
   useEffect(() => {
     if (toolAndState.tool.onMount) toolAndState.tool.onMount(extendedContext);
 
+    const layersList = toolAndState.tool.requiredLayers
+      ? new Set([...editorState.editorLayers, ...toolAndState.tool.requiredLayers])
+      : editorState.editorLayers;
+    dispatch(selectLayers(layersList));
+
     return () => {
       if (toolAndState.tool.onUnmount) toolAndState.tool.onUnmount(extendedContext);
     };
@@ -191,7 +195,7 @@ const Editor: FC = () => {
           <div className="tool-box bg-primary">
             {Object.values(TOOL_TYPES).map((toolType: TOOL_TYPES) => {
               const tool = TOOLS[toolType];
-              const { id, icon: IconComponent, labelTranslationKey, isDisabled } = tool;
+              const { id, icon: IconComponent, labelTranslationKey } = tool;
               const label = t(labelTranslationKey);
 
               return (
@@ -206,10 +210,6 @@ const Editor: FC = () => {
                     onClick={() => {
                       switchTool({ toolType, toolState: {} });
                     }}
-                    disabled={
-                      // TODO: clarify the type of extendedContext
-                      isDisabled && isDisabled(extendedContext as ReadOnlyEditorContextType<any>)
-                    }
                   >
                     <span className="sr-only">{label}</span>
                     <IconComponent />
diff --git a/front/src/applications/editor/components/LayersModal.tsx b/front/src/applications/editor/components/LayersModal.tsx
@@ -12,16 +12,16 @@ import signalsIcon from 'assets/pictures/layersicons/layer_signal.svg';
 import pslsIcon from 'assets/pictures/layersicons/layer_tivs.svg';
 
 import SwitchSNCF from 'common/BootstrapSNCF/SwitchSNCF/SwitchSNCF';
-import { useModal, Modal } from 'common/BootstrapSNCF/ModalSNCF';
+import { Modal } from 'common/BootstrapSNCF/ModalSNCF';
 import MapSettingsBackgroundSwitches from 'common/Map/Settings/MapSettingsBackgroundSwitches';
 import { GiElectric } from 'react-icons/gi';
-import { LayerType, EDITOAST_TO_LAYER_DICT, EditoastType } from '../tools/types';
-import { selectLayers } from '../../../reducers/editor';
-import { EditorEntity } from '../../../types';
-import { getMap } from '../../../reducers/map/selectors';
-import { getInfraID } from '../../../reducers/osrdconf/selectors';
-import { osrdEditoastApi } from '../../../common/api/osrdEditoastApi';
-import { updateLayersSettings } from '../../../reducers/map';
+import { LayerType, EDITOAST_TO_LAYER_DICT, EditoastType } from 'applications/editor/tools/types';
+import { selectLayers } from 'reducers/editor';
+import { EditorEntity } from 'types';
+import { getMap } from 'reducers/map/selectors';
+import { getInfraID } from 'reducers/osrdconf/selectors';
+import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
+import { updateLayersSettings } from 'reducers/map';
 
 export const LAYERS: Array<{ layers: LayerType[]; icon: string | JSX.Element }> = [
   { layers: ['track_sections'], icon: trackSectionsIcon },
@@ -40,17 +40,16 @@ interface LayersModalProps {
   initialLayers: Set<LayerType>;
   selection?: EditorEntity[];
   frozenLayers?: Set<LayerType>;
-  onSubmit: (args: { newLayers: Set<LayerType> }) => void;
+  onChange: (args: { newLayers: Set<LayerType> }) => void;
 }
 const LayersModal: FC<LayersModalProps> = ({
   initialLayers,
   selection,
   frozenLayers,
-  onSubmit,
+  onChange,
 }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
-  const { closeModal } = useModal();
   const { layersSettings } = useSelector(getMap);
   const [selectedLayers, setSelectedLayers] = useState<Set<LayerType>>(initialLayers);
   const [speedLimitTag, setSpeedLimitTag] = useState<string | undefined>(
@@ -123,24 +122,31 @@ const LayersModal: FC<LayersModalProps> = ({
             const layerKey = layers.join('-');
             const count = sum(layers.map((id) => selectionCounts[id] || 0));
             const disabled = frozenLayers && layers.some((id) => frozenLayers.has(id));
+            const checked = layers.every((id) => selectedLayers.has(id));
             return (
               <div className="col-lg-6" key={`${layerKey}-${count}-${disabled}`}>
                 <div className="d-flex align-items-center mt-2">
                   <SwitchSNCF
                     type="switch"
-                    onChange={() =>
-                      setSelectedLayers((set) => {
-                        const newSet = new Set(set);
-                        layers.forEach((id) => {
-                          if (newSet.has(id)) newSet.delete(id);
-                          else newSet.add(id);
-                        });
-                        return newSet;
-                      })
-                    }
+                    onChange={() => {
+                      const newSelectedLayersList = layers.reduce((result, layer) => {
+                        if (result.has(layer)) result.delete(layer);
+                        else result.add(layer);
+                        return result;
+                      }, new Set(selectedLayers));
+                      setSelectedLayers(newSelectedLayersList);
+                      dispatch(selectLayers(newSelectedLayersList));
+                      dispatch(
+                        updateLayersSettings({
+                          ...layersSettings,
+                          speedlimittag: speedLimitTag as string,
+                        })
+                      );
+                      onChange({ newLayers: newSelectedLayersList });
+                    }}
                     name={`editor-layer-${layerKey}`}
                     id={`editor-layer-${layerKey}`}
-                    checked={layers.every((id) => selectedLayers.has(id))}
+                    checked={checked}
                     disabled={disabled}
                   />
                   {isString(icon) ? (
@@ -150,7 +156,7 @@ const LayersModal: FC<LayersModalProps> = ({
                   )}
                   <div className="d-flex flex-column">
                     <div>{t(`Editor.layers.${layerKey}`)}</div>
-                    {!!count && (
+                    {!!count && checked && (
                       <div className="small text-muted font-italic">
                         {t('Editor.layers-modal.layer-selected-items', {
                           count,
@@ -198,26 +204,6 @@ const LayersModal: FC<LayersModalProps> = ({
             {t('Editor.layers-modal.selection-warning', { count: unselectCount })}
           </div>
         )}
-        <button type="button" className="btn btn-danger mr-2" onClick={closeModal}>
-          {t('common.cancel')}
-        </button>
-        <button
-          type="button"
-          className="btn btn-primary"
-          onClick={() => {
-            dispatch(selectLayers(selectedLayers));
-            dispatch(
-              updateLayersSettings({
-                ...layersSettings,
-                speedlimittag: speedLimitTag as string,
-              })
-            );
-            onSubmit({ newLayers: selectedLayers });
-            closeModal();
-          }}
-        >
-          {t('common.confirm')}
-        </button>
       </div>
     </Modal>
   );
diff --git a/front/src/applications/editor/nav.tsx b/front/src/applications/editor/nav.tsx
@@ -127,7 +127,7 @@ const NavButtons: NavButton[][] = [
                 ? (toolState as unknown as SelectionState).selection
                 : undefined
             }
-            onSubmit={({ newLayers }) => {
+            onChange={({ newLayers }) => {
               if (activeTool.id === 'select-items') {
                 const currentState = toolState as unknown as SelectionState;
                 (setToolState as unknown as (newState: SelectionState) => void)({
diff --git a/front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx b/front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx
@@ -13,16 +13,16 @@ import GeoJSONs, { SourcesDefinitionsIndex } from 'common/Map/Layers/GeoJSONs';
 import { getEntities, getEntity } from 'applications/editor/data/api';
 import { mapValues } from 'lodash';
 import { Layer, Popup, Source } from 'react-map-gl/maplibre';
-import { getTrackRangeFeatures, isOnModeMove } from '../utils';
-import { RangeEditionState, TrackState } from '../types';
-import { ExtendedEditorContextType } from '../../editorContextTypes';
-import EntitySumUp from '../../../components/EntitySumUp';
-import { LayerType } from '../../types';
+import EntitySumUp from 'applications/editor/components/EntitySumUp';
+import { getTrackRangeFeatures, isOnModeMove } from 'applications/editor/tools/rangeEdition/utils';
+import { RangeEditionState, TrackState } from 'applications/editor/tools/rangeEdition/types';
+import { ExtendedEditorContextType } from 'applications/editor/tools/editorContextTypes';
 
 export const CatenaryEditionLayers: FC = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const {
+    editorState: { editorLayers },
     renderingFingerprint,
     state: { entity, trackSectionsCache, hoveredItem, interactionState, mousePosition },
     setState,
@@ -76,8 +76,6 @@ export const CatenaryEditionLayers: FC = () => {
     return SourcesDefinitionsIndex.catenaries(context, 'rangeEditors/catenaries/');
   }, [mapStyle, showIGNBDORTHO, layersSettings, issuesSettings]);
 
-  const layers = useMemo(() => new Set(['track_sections']) as Set<LayerType>, []);
-
   // Here is where we handle loading the TrackSections attached to the speed section:
   useEffect(() => {
     const trackIDs = entity.properties?.track_ranges?.map((range) => range.track) || [];
@@ -185,7 +183,7 @@ export const CatenaryEditionLayers: FC = () => {
     <>
       <GeoJSONs
         colors={colors[mapStyle]}
-        layers={layers}
+        layers={editorLayers}
         selection={selection}
         fingerprint={renderingFingerprint}
         layersSettings={layersSettings}
diff --git a/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx b/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx
@@ -18,16 +18,20 @@ import {
   getTrackRangeFeatures,
   isOnModeMove,
   speedSectionIsPsl,
-} from '../utils';
-import { PslSignFeature, RangeEditionState, TrackState } from '../types';
-import { ExtendedEditorContextType } from '../../editorContextTypes';
-import EntitySumUp from '../../../components/EntitySumUp';
-import { LayerType } from '../../types';
+} from 'applications/editor/tools/rangeEdition/utils';
+import {
+  PslSignFeature,
+  RangeEditionState,
+  TrackState,
+} from 'applications/editor/tools/rangeEdition/types';
+import { ExtendedEditorContextType } from 'applications/editor/tools/editorContextTypes';
+import EntitySumUp from 'applications/editor/components/EntitySumUp';
 
 export const SpeedSectionEditionLayers: FC = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const {
+    editorState: { editorLayers },
     renderingFingerprint,
     state: { entity, trackSectionsCache, hoveredItem, interactionState, mousePosition },
     setState,
@@ -97,8 +101,6 @@ export const SpeedSectionEditionLayers: FC = () => {
     return [...pslLayers, ...pslSignLayers];
   }, [isPSL, mapStyle, showIGNBDORTHO, layersSettings, issuesSettings]);
 
-  const layers = useMemo(() => new Set(['track_sections']) as Set<LayerType>, []);
-
   // Here is where we handle loading the TrackSections attached to the speed section:
   useEffect(() => {
     const trackIDs = entity.properties?.track_ranges?.map((range) => range.track) || [];
@@ -217,7 +219,7 @@ export const SpeedSectionEditionLayers: FC = () => {
     <>
       <GeoJSONs
         colors={colors[mapStyle]}
-        layers={layers}
+        layers={editorLayers}
         selection={selection}
         fingerprint={renderingFingerprint}
         layersSettings={layersSettings}

Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ const NavButtons: NavButton[][] = [`
`127`	`127`	`? (toolState as unknown as SelectionState).selection`
`128`	`128`	`: undefined`
`129`	`129`	`}`
`130`		`- onSubmit={({ newLayers }) => {`
	`130`	`+ onChange={({ newLayers }) => {`
`131`	`131`	`if (activeTool.id === 'select-items') {`
`132`	`132`	`const currentState = toolState as unknown as SelectionState;`
`133`	`133`	`(setToolState as unknown as (newState: SelectionState) => void)({`