front: make indicator disappear after onclick event on the map

OpenRailAssociation · Dec 11, 2023 · ce10416 · ce10416
1 parent 8a2fd62
commit ce10416
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 59 deletions.
diff --git a/front/src/applications/editor/Map.tsx b/front/src/applications/editor/Map.tsx
@@ -1,39 +1,49 @@
-import React, { FC, PropsWithChildren, useContext, useMemo, useState } from 'react';
+import React, { FC, useContext, useMemo, useState } from 'react';
+import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl/maplibre';
+import { isEmpty, isEqual } from 'lodash';
+import { TFunction } from 'i18next';
 import { useSelector, useDispatch } from 'react-redux';
-import ReactMapGL, { AttributionControl, MapRef, ScaleControl } from 'react-map-gl/maplibre';
 import { withTranslation } from 'react-i18next';
-import { TFunction } from 'i18next';
-import { isEmpty, isEqual } from 'lodash';
 
-import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
-import colors from 'common/Map/Consts/colors';
 import 'common/Map/Map.scss';
+import colors from 'common/Map/Consts/colors';
 
 /* Main data & layers */
-import IGN_SCAN25 from 'common/Map/Layers/IGN_SCAN25';
-import IGN_CADASTRE from 'common/Map/Layers/IGN_CADASTRE';
-import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
-import TracksOSM from 'common/Map/Layers/TracksOSM';
-import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
-import Terrain from 'common/Map/Layers/Terrain';
-
 import Background from 'common/Map/Layers/Background';
-import OSM from 'common/Map/Layers/OSM';
 import Hillshade from 'common/Map/Layers/Hillshade';
+import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
+import IGN_CADASTRE from 'common/Map/Layers/IGN_CADASTRE';
+import IGN_SCAN25 from 'common/Map/Layers/IGN_SCAN25';
+import OSM from 'common/Map/Layers/OSM';
 import PlatformsLayer from 'common/Map/Layers/Platforms';
+import SearchMarker from 'common/Map/Layers/SearchMarker';
+import Terrain from 'common/Map/Layers/Terrain';
+import TracksOSM from 'common/Map/Layers/TracksOSM';
+import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
 import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
-import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
-import { Viewport } from 'reducers/map';
+
+import EditorContext from 'applications/editor/context';
+import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
+import { getEntity } from 'applications/editor/data/api';
 import { getInfraID } from 'reducers/osrdconf/selectors';
-import { getShowOSM, getTerrain3DExaggeration } from 'reducers/map/selectors';
 import { getMapMouseEventNearestFeature } from 'utils/mapHelper';
-import { InfraError } from './components/InfraErrors/types';
-import EditorContext from './context';
-import { EditorState, LAYER_TO_EDITOAST_DICT, LAYERS_SET, LayerType } from './tools/types';
-import { getEntity } from './data/api';
-import { CommonToolState } from './tools/commonToolState';
-import { EditorContextType, ExtendedEditorContextType, Tool } from './tools/editorContextTypes';
-import { useSwitchTypes } from './tools/switchEdition/types';
+import { getMap, getShowOSM, getTerrain3DExaggeration } from 'reducers/map/selectors';
+import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
+import { updateMapSearchMarker } from 'reducers/map';
+import { useSwitchTypes } from 'applications/editor/tools/switchEdition/types';
+
+import type { CommonToolState } from 'applications/editor/tools/commonToolState';
+import type { InfraError } from 'applications/editor/components/InfraErrors/types';
+import type { MapRef } from 'react-map-gl/maplibre';
+import type { PropsWithChildren } from 'react';
+import type { Viewport } from 'reducers/map';
+import type {
+  EditorContextType,
+  ExtendedEditorContextType,
+  Tool,
+} from './tools/editorContextTypes';
+import type { EditorState, LayerType } from './tools/types';
+import { LAYER_TO_EDITOAST_DICT, LAYERS_SET } from './tools/types';
 
 interface MapProps<S extends CommonToolState = CommonToolState> {
   t: TFunction;
@@ -100,6 +110,8 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
     [activeTool, extendedContext, mapState]
   );
 
+  const { mapSearchMarker } = useSelector(getMap);
+
   return (
     <>
       <div
@@ -250,6 +262,7 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
             if (activeTool.onClickMap) {
               activeTool.onClickMap(eventWithFeature, extendedContext);
             }
+            dispatch(updateMapSearchMarker(undefined));
           }}
         >
           <VirtualLayers />
@@ -298,6 +311,9 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
           {activeTool.layersComponent && mapRef.current && (
             <activeTool.layersComponent map={mapRef.current.getMap()} />
           )}
+          {mapSearchMarker !== undefined && (
+            <SearchMarker data={mapSearchMarker} colors={colors[mapStyle]} />
+          )}
         </ReactMapGL>
       </div>
       ;{children}

diff --git a/front/src/applications/referenceMap/Map.tsx b/front/src/applications/referenceMap/Map.tsx
@@ -1,30 +1,35 @@
-import { isNil } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import ReactMapGL, { AttributionControl, ScaleControl, MapRef } from 'react-map-gl/maplibre';
+import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl/maplibre';
+import { isNil } from 'lodash';
+import { updateMapSearchMarker, updateViewport } from 'reducers/map';
 import { useDispatch, useSelector } from 'react-redux';
-import { updateViewport, Viewport } from 'reducers/map';
-import { RootState } from 'reducers';
+import { useParams } from 'react-router-dom';
+
+import type { MapRef } from 'react-map-gl/maplibre';
+import type { RootState } from 'reducers';
+import type { Viewport } from 'reducers/map';
 
-import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 import { getTerrain3DExaggeration } from 'reducers/map/selectors';
+import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 
 /* Main data & layers */
 import Background from 'common/Map/Layers/Background';
+import BufferStops from 'common/Map/Layers/BufferStops';
 import Terrain from 'common/Map/Layers/Terrain';
 import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
-import BufferStops from 'common/Map/Layers/BufferStops';
 /* Settings & Buttons */
-import MapButtons from 'common/Map/Buttons/MapButtons';
-import Detectors from 'common/Map/Layers/Detectors';
 import Catenaries from 'common/Map/Layers/Catenaries';
-import NeutralSections from 'common/Map/Layers/NeutralSections';
+import Detectors from 'common/Map/Layers/Detectors';
 import Hillshade from 'common/Map/Layers/Hillshade';
 import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
 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/NeutralSections';
 import OSM from 'common/Map/Layers/OSM';
 /* Objects & various */
+import colors from 'common/Map/Consts/colors';
+import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
 import OperationalPoints from 'common/Map/Layers/OperationalPoints';
 import PlatformsLayer from 'common/Map/Layers/Platforms';
 import Routes from 'common/Map/Layers/Routes';
@@ -35,10 +40,8 @@ import SNCF_PSL from 'common/Map/Layers/extensions/SNCF/PSL';
 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 { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
 import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
-import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
+import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
 
 import 'common/Map/Map.scss';
 
@@ -131,6 +134,9 @@ function Map() {
         onLoad={() => {
           setMapLoaded(true);
         }}
+        onClick={() => {
+          dispatch(updateMapSearchMarker(undefined));
+        }}
       >
         <VirtualLayers />
         <AttributionControl customAttribution={CUSTOM_ATTRIBUTION} />

diff --git a/front/src/common/Map/Layers/SearchMarker.tsx b/front/src/common/Map/Layers/SearchMarker.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Marker } from 'react-map-gl/maplibre';
 
-import { Theme } from 'types';
-import { MapSearchMarker } from 'reducers/map';
+import type { MapSearchMarker } from 'reducers/map';
+import type { Theme } from 'types';
 
 interface SearchMarkerProps {
   data: MapSearchMarker;
@@ -13,7 +13,12 @@ function SearchMarker(props: SearchMarkerProps) {
   const { data, colors } = props;
 
   return (
-    <Marker longitude={data.lonlat[0]} latitude={data.lonlat[1]} anchor="left">
+    <Marker
+      data-mdb-animation="fade-out"
+      longitude={data.lonlat[0]}
+      latitude={data.lonlat[1]}
+      anchor="left"
+    >
       <div className="map-search-marker">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
           <circle

diff --git a/front/src/common/Map/Map.scss b/front/src/common/Map/Map.scss
@@ -138,3 +138,19 @@
     font-size: 0.9rem;
   }
 }
+
+// .fade-out {
+//   animation-name: fade-out;
+// }
+
+// @keyframes fade-out {
+//   from {
+//     opacity: 1;
+//     transform: scale(3);
+//   }
+
+//   to {
+//     opacity: 0;
+//     transform: scale(0);
+//   }
+// }
diff --git a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx
@@ -1,51 +1,55 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { MapLayerMouseEvent } from 'maplibre-gl';
-import ReactMapGL, { AttributionControl, ScaleControl, MapRef } from 'react-map-gl/maplibre';
+import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl/maplibre';
+import { updateFeatureInfoClickOSRD } from 'reducers/osrdconf';
+import { updateMapSearchMarker, updateViewport } from 'reducers/map';
 import { useDispatch, useSelector } from 'react-redux';
-import { NearestPointOnLine } from '@turf/nearest-point-on-line';
 import { useParams } from 'react-router-dom';
-import { RootState } from 'reducers';
-import { updateFeatureInfoClickOSRD } from 'reducers/osrdconf';
-import { updateViewport, Viewport } from 'reducers/map';
+
+import type { MapLayerMouseEvent } from 'maplibre-gl';
+import type { MapRef } from 'react-map-gl/maplibre';
+import type { NearestPointOnLine } from '@turf/nearest-point-on-line';
+import type { RootState } from 'reducers';
+import type { Viewport } from 'reducers/map';
+
 /* Main data & layers */
 import Background from 'common/Map/Layers/Background';
 import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
 /* Settings & Buttons */
-import MapButtons from 'common/Map/Buttons/MapButtons';
 import Catenaries from 'common/Map/Layers/Catenaries';
-import NeutralSections from 'common/Map/Layers/NeutralSections';
 import Hillshade from 'common/Map/Layers/Hillshade';
-import OSM from 'common/Map/Layers/OSM';
+import MapButtons from 'common/Map/Buttons/MapButtons';
+import NeutralSections from 'common/Map/Layers/NeutralSections';
 import OperationalPoints from 'common/Map/Layers/OperationalPoints';
+import OSM from 'common/Map/Layers/OSM';
 import PlatformsLayer from 'common/Map/Layers/Platforms';
 import RenderItinerary from 'modules/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/RenderItinerary';
 import RenderItineraryMarkers from 'modules/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/RenderItineraryMarkers';
 /* Interactions */
+import BufferStops from 'common/Map/Layers/BufferStops';
+import Detectors from 'common/Map/Layers/Detectors';
 import RenderPopup from 'modules/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/RenderPopup';
 import Routes from 'common/Map/Layers/Routes';
 import SearchMarker from 'common/Map/Layers/SearchMarker';
 import Signals from 'common/Map/Layers/Signals';
 import SnappedMarker from 'common/Map/Layers/SnappedMarker';
 import SpeedLimits from 'common/Map/Layers/SpeedLimits';
-import BufferStops from 'common/Map/Layers/BufferStops';
-import Detectors from 'common/Map/Layers/Detectors';
 import Switches from 'common/Map/Layers/Switches';
 import TracksOSM from 'common/Map/Layers/TracksOSM';
 /* Objects & various */
-import TracksGeographic from 'common/Map/Layers/TracksGeographic';
-import colors from 'common/Map/Consts/colors';
-import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
+import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
+import { getMapMouseEventNearestFeature } from 'utils/mapHelper';
+import { getTerrain3DExaggeration } from 'reducers/map/selectors';
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
-import 'common/Map/Map.scss';
-import SNCF_PSL from 'common/Map/Layers/extensions/SNCF/PSL';
+import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
+import colors from 'common/Map/Consts/colors';
 import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
 import IGN_SCAN25 from 'common/Map/Layers/IGN_SCAN25';
 import IGN_CADASTRE from 'common/Map/Layers/IGN_CADASTRE';
-import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
 import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
+import SNCF_PSL from 'common/Map/Layers/extensions/SNCF/PSL';
 import Terrain from 'common/Map/Layers/Terrain';
-import { getTerrain3DExaggeration } from 'reducers/map/selectors';
-import { getMapMouseEventNearestFeature } from '../../../../utils/mapHelper';
+import TracksGeographic from 'common/Map/Layers/TracksGeographic';
+import 'common/Map/Map.scss';
 
 function Map() {
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(
@@ -101,6 +105,7 @@ function Map() {
         })
       );
     }
+    dispatch(updateMapSearchMarker(undefined));
   };
 
   const onMoveGetFeature = (e: MapLayerMouseEvent) => {