front: fix captured map on stdcm sheet

fix comments front: refacto. capture map just after focus on itinerary front: fix capture map when path properties change
OpenRailAssociation · Jul 4, 2024 · 37587e4 · 37587e4
1 parent e69ecb1
commit 37587e4
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 99 deletions.
diff --git a/front/src/common/Map/Search/MapSearchLine.tsx b/front/src/common/Map/Search/MapSearchLine.tsx
@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import type { BoundingBox, SearchResultItemTrack } from 'common/api/osrdEditoastApi';
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
-import { zoomToFeature } from 'common/Map/WarpedMap/core/helpers';
+import { computeBBoxViewport } from 'common/Map/WarpedMap/core/helpers';
 import { useInfraID } from 'common/osrdContext';
 import { updateLineSearchCode, updateMapSearchMarker } from 'reducers/map';
 import type { Viewport } from 'reducers/map';
@@ -74,7 +74,8 @@ const MapSearchLine = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchLine
           type: 'LineString',
           coordinates: coordinates(trackPath),
         });
-        zoomToFeature(boundaries, map.viewport, updateExtViewport);
+        const newViewport = computeBBoxViewport(boundaries, map.viewport);
+        updateExtViewport(newViewport);
       })
       .catch(() => {
         dispatch(updateLineSearchCode(undefined));

diff --git a/front/src/common/Map/WarpedMap/core/helpers.ts b/front/src/common/Map/WarpedMap/core/helpers.ts
@@ -178,17 +178,9 @@ export function simplifyFeature(feature: MapGeoJSONFeature): Feature {
   };
 }
 
-/**
- * Zoom helpers:
- */
-
-export function zoomToFeature(
-  boundingBox: BBox | Position,
-  mapViewport: Viewport,
-  updateExtViewport: (viewport: Viewport) => void
-) {
+export function computeBBoxViewport(boundingBox: BBox | Position, initialViewport: Viewport) {
   const [minLng, minLat, maxLng, maxLat] = boundingBox;
-  const viewportTemp = new WebMercatorViewport({ ...mapViewport, width: 600, height: 400 });
+  const viewportTemp = new WebMercatorViewport({ ...initialViewport, width: 600, height: 400 });
   const { longitude, latitude, zoom } = viewportTemp.fitBounds(
     [
       [minLng, minLat],
@@ -197,11 +189,23 @@ export function zoomToFeature(
     { padding: 40 }
   );
 
-  const newViewport = {
-    ...mapViewport,
+  return {
+    ...initialViewport,
     longitude,
     latitude,
     zoom: zoom > 5 ? zoom : 5,
   };
+}
+
+/**
+ * Zoom helpers:
+ */
+
+export function zoomToFeature(
+  boundingBox: BBox | Position,
+  mapViewport: Viewport,
+  updateExtViewport: (viewport: Viewport) => void
+) {
+  const newViewport = computeBBoxViewport(boundingBox, mapViewport);
   updateExtViewport(newViewport);
 }
diff --git a/front/src/modules/pathfinding/components/Itinerary/Itinerary.tsx b/front/src/modules/pathfinding/components/Itinerary/Itinerary.tsx
@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
 
 import type { PathResponse } from 'common/api/osrdEditoastApi';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
-import { zoomToFeature } from 'common/Map/WarpedMap/core/helpers';
+import { computeBBoxViewport } from 'common/Map/WarpedMap/core/helpers';
 import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import Tipped from 'common/Tipped';
 import Pathfinding from 'modules/pathfinding/components/Pathfinding/Pathfinding';
@@ -41,7 +41,8 @@ function Itinerary({ path }: ItineraryProps) {
   const { openModal } = useModal();
 
   const zoomToFeatureInItinerary = (boundingBox: Position) => {
-    zoomToFeature(boundingBox, map.viewport, setExtViewport);
+    const newViewport = computeBBoxViewport(boundingBox, map.viewport);
+    setExtViewport(newViewport);
   };
 
   const zoomToFeaturePoint = (lngLat?: Position) => {

diff --git a/front/src/modules/pathfinding/components/Itinerary/ItineraryV2.tsx b/front/src/modules/pathfinding/components/Itinerary/ItineraryV2.tsx
@@ -8,7 +8,7 @@ import { useSelector } from 'react-redux';
 
 import type { ManageTrainSchedulePathProperties } from 'applications/operationalStudies/types';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
-import { zoomToFeature } from 'common/Map/WarpedMap/core/helpers';
+import { computeBBoxViewport } from 'common/Map/WarpedMap/core/helpers';
 import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import Tipped from 'common/Tipped';
 import PathfindingV2 from 'modules/pathfinding/components/Pathfinding/PathfindingV2';
@@ -81,7 +81,8 @@ const ItineraryV2 = ({
 
   useEffect(() => {
     if (pathProperties) {
-      zoomToFeature(bbox(pathProperties.geometry), map.viewport, setExtViewport);
+      const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), map.viewport);
+      setExtViewport(newViewport);
     }
   }, [pathProperties]);
 

diff --git a/front/src/modules/simulationResult/components/SimulationResultsMap.tsx b/front/src/modules/simulationResult/components/SimulationResultsMap.tsx
@@ -49,7 +49,7 @@ import Terrain from 'common/Map/Layers/Terrain';
 import TracksGeographic from 'common/Map/Layers/TracksGeographic';
 import TracksOSM from 'common/Map/Layers/TracksOSM';
 import { removeSearchItemMarkersOnMap } from 'common/Map/utils';
-import { zoomToFeature } from 'common/Map/WarpedMap/core/helpers';
+import { computeBBoxViewport } from 'common/Map/WarpedMap/core/helpers';
 import { useInfraID } from 'common/osrdContext';
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 import {
@@ -127,7 +127,8 @@ const Map: FC<MapProps> = () => {
     if (path && !isError) {
       const features = lineString(path.geographic.coordinates);
       setGeojsonPath(features);
-      zoomToFeature(bbox(features), viewport, updateViewportChange);
+      const newViewport = computeBBoxViewport(bbox(features), viewport);
+      updateViewportChange(newViewport);
     } else if (isError) {
       console.info('ERROR', error);
     }

diff --git a/front/src/modules/simulationResult/components/SimulationResultsMapV2.tsx b/front/src/modules/simulationResult/components/SimulationResultsMapV2.tsx
@@ -47,7 +47,7 @@ import Terrain from 'common/Map/Layers/Terrain';
 import TracksGeographic from 'common/Map/Layers/TracksGeographic';
 import TracksOSM from 'common/Map/Layers/TracksOSM';
 import { removeSearchItemMarkersOnMap } from 'common/Map/utils';
-import { zoomToFeature } from 'common/Map/WarpedMap/core/helpers';
+import { computeBBoxViewport } from 'common/Map/WarpedMap/core/helpers';
 import { useInfraID } from 'common/osrdContext';
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 import {
@@ -195,7 +195,10 @@ const Map: FC<MapProps> = ({ geometry }) => {
   }, []);
 
   useEffect(() => {
-    if (geojsonPath) zoomToFeature(bbox(geojsonPath), viewport, updateViewportChange);
+    if (geojsonPath) {
+      const newViewport = computeBBoxViewport(bbox(geojsonPath), viewport);
+      updateViewportChange(newViewport);
+    }
   }, [geojsonPath]);
 
   const handleLoadFinished = () => {

diff --git a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import bbox from '@turf/bbox';
 import type { Feature, Point } from 'geojson';
 import html2canvas from 'html2canvas';
+import { isEqual } from 'lodash';
 import type { MapLayerMouseEvent } from 'maplibre-gl';
 import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl/maplibre';
 import type { MapRef } from 'react-map-gl/maplibre';
@@ -37,6 +39,7 @@ import Terrain from 'common/Map/Layers/Terrain';
 import TracksGeographic from 'common/Map/Layers/TracksGeographic';
 import TracksOSM from 'common/Map/Layers/TracksOSM';
 import { removeSearchItemMarkersOnMap } from 'common/Map/utils';
+import { computeBBoxViewport } from 'common/Map/WarpedMap/core/helpers';
 import { useInfraID, useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
@@ -65,11 +68,11 @@ const Map = ({ pathProperties, setMapCanvas, hideAttribution = false }: MapProps
   const infraID = useInfraID();
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(getMap);
-  const { getGeojson } = useOsrdConfSelectors();
-  const geoJson = useSelector(getGeojson);
   const trainScheduleV2Activated = useSelector(getTrainScheduleV2Activated);
 
   const [mapIsLoaded, setMapIsLoaded] = useState(false);
+  const [showLayers, setShowLayers] = useState(true);
+
   const [snappedPoint, setSnappedPoint] = useState<Feature<Point> | undefined>();
   const { urlLat = '', urlLon = '', urlZoom = '', urlBearing = '', urlPitch = '' } = useParams();
   const dispatch = useAppDispatch();
@@ -80,26 +83,6 @@ const Map = ({ pathProperties, setMapCanvas, hideAttribution = false }: MapProps
 
   const mapRef = useRef<MapRef | null>(null);
 
-  useEffect(() => {
-    const captureMap = async () => {
-      const mapElement = document.getElementById('map-container');
-      if (!mapElement) {
-        console.error('Map element not found');
-        return;
-      }
-      try {
-        if (setMapCanvas) {
-          const canvas = await html2canvas(mapElement);
-          const imageDataURL = canvas.toDataURL();
-          setMapCanvas(imageDataURL);
-        }
-      } catch (error) {
-        console.error('Error capturing map:', error);
-      }
-    };
-    if (mapIsLoaded) captureMap();
-  }, [mapIsLoaded, geoJson, pathProperties]);
-
   const scaleControlStyle = {
     left: 20,
     bottom: 20,
@@ -204,6 +187,32 @@ const Map = ({ pathProperties, setMapCanvas, hideAttribution = false }: MapProps
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (pathProperties && setMapCanvas) {
+      setShowLayers(false);
+    }
+  }, [pathProperties]);
+
+  const captureMap = async () => {
+    if (!pathProperties) return;
+
+    const itineraryViewPort = computeBBoxViewport(bbox(pathProperties.geometry), viewport);
+
+    if (setMapCanvas && !showLayers && isEqual(viewport, itineraryViewPort)) {
+      try {
+        const mapElement = document.getElementById('map-container');
+        if (mapElement) {
+          const canvas = await html2canvas(mapElement);
+          setMapCanvas(canvas.toDataURL());
+        }
+      } catch (error) {
+        console.error('Error capturing map:', error);
+      } finally {
+        setShowLayers(true);
+      }
+    }
+  };
+
   return (
     <>
       <MapButtons
@@ -241,6 +250,7 @@ const Map = ({ pathProperties, setMapCanvas, hideAttribution = false }: MapProps
         onLoad={() => {
           setMapIsLoaded(true);
         }}
+        onIdle={() => captureMap()}
         preserveDrawingBuffer
         id="map-container"
       >
@@ -294,63 +304,67 @@ const Map = ({ pathProperties, setMapCanvas, hideAttribution = false }: MapProps
           layerOrder={LAYER_GROUPS_ORDER[LAYERS.ROUTES.GROUP]}
           infraID={infraID}
         />
-        {layersSettings.operationalpoints && (
-          <OperationalPoints
-            colors={colors[mapStyle]}
-            layerOrder={LAYER_GROUPS_ORDER[LAYERS.OPERATIONAL_POINTS.GROUP]}
-            infraID={infraID}
-          />
-        )}
-        <Electrifications
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.ELECTRIFICATIONS.GROUP]}
-          infraID={infraID}
-        />
-        {layersSettings.neutral_sections && (
-          <NeutralSections
-            colors={colors[mapStyle]}
-            layerOrder={LAYER_GROUPS_ORDER[LAYERS.DEAD_SECTIONS.GROUP]}
-            infraID={infraID}
-          />
-        )}
-        <BufferStops
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.BUFFER_STOPS.GROUP]}
-          infraID={infraID}
-        />
-        <Detectors
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.DETECTORS.GROUP]}
-          infraID={infraID}
-        />
-        <Switches
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.SWITCHES.GROUP]}
-          infraID={infraID}
-        />
+        {showLayers && (
+          <>
+            {layersSettings.operationalpoints && (
+              <OperationalPoints
+                colors={colors[mapStyle]}
+                layerOrder={LAYER_GROUPS_ORDER[LAYERS.OPERATIONAL_POINTS.GROUP]}
+                infraID={infraID}
+              />
+            )}
 
-        <SpeedLimits
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP]}
-          infraID={infraID}
-        />
-        <SNCF_PSL
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP]}
-          infraID={infraID}
-        />
+            <Electrifications
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.ELECTRIFICATIONS.GROUP]}
+              infraID={infraID}
+            />
+            {layersSettings.neutral_sections && (
+              <NeutralSections
+                colors={colors[mapStyle]}
+                layerOrder={LAYER_GROUPS_ORDER[LAYERS.DEAD_SECTIONS.GROUP]}
+                infraID={infraID}
+              />
+            )}
+            <BufferStops
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BUFFER_STOPS.GROUP]}
+              infraID={infraID}
+            />
+            <Detectors
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.DETECTORS.GROUP]}
+              infraID={infraID}
+            />
+            <Switches
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SWITCHES.GROUP]}
+              infraID={infraID}
+            />
 
-        <Signals
-          sourceTable="signals"
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP]}
-          infraID={infraID}
-        />
-        <LineSearchLayer
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.LINE_SEARCH.GROUP]}
-          infraID={infraID}
-        />
+            <SpeedLimits
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP]}
+              infraID={infraID}
+            />
+            <SNCF_PSL
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP]}
+              infraID={infraID}
+            />
 
+            <Signals
+              sourceTable="signals"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP]}
+              infraID={infraID}
+            />
+            <LineSearchLayer
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.LINE_SEARCH.GROUP]}
+              infraID={infraID}
+            />
+          </>
+        )}
         <RenderPopup pathProperties={pathProperties} />
         {mapIsLoaded &&
           (trainScheduleV2Activated ? (

diff --git a/front/src/styles/scss/applications/_stdcm.scss b/front/src/styles/scss/applications/_stdcm.scss
@@ -12,7 +12,7 @@
     height: 85vh;
   }
   &-withSimulation {
-    height: 40vh;
+    height: 60vh;
   }
 }