From 024bcb21eeddb9b092826e2d6142f825bf066c55 Mon Sep 17 00:00:00 2001
From: Benoit Simard <contact@bsimard.com>
Date: Tue, 7 Jan 2025 11:57:08 +0100
Subject: [PATCH] front: enhance viewport computation function

Adding optional parameters on function `computeBBoxViewport` to take
care of the map height/width

Related to #10240 & #10144

Signed-off-by: Benoit Simard <contact@bsimard.com>
---
 .../src/common/Map/WarpedMap/core/helpers.ts  | 14 +++++++---
 .../components/ManageTrainSchedule/Map.tsx    | 27 ++++++++++++-------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/front/src/common/Map/WarpedMap/core/helpers.ts b/front/src/common/Map/WarpedMap/core/helpers.ts
index 071f4e71dd5..ec77b41c2a3 100644
--- a/front/src/common/Map/WarpedMap/core/helpers.ts
+++ b/front/src/common/Map/WarpedMap/core/helpers.ts
@@ -187,15 +187,23 @@ export function simplifyFeature(feature: MapGeoJSONFeature): Feature {
   };
 }
 
-export function computeBBoxViewport(boundingBox: BBox | Position, initialViewport: Viewport) {
+export function computeBBoxViewport(
+  boundingBox: BBox | Position,
+  initialViewport: Viewport,
+  opts?: { width?: number; height?: number; padding?: number }
+): Viewport {
   const [minLng, minLat, maxLng, maxLat] = boundingBox;
-  const viewportTemp = new WebMercatorViewport({ ...initialViewport, width: 600, height: 400 });
+  const viewportTemp = new WebMercatorViewport({
+    ...initialViewport,
+    width: opts?.width || 600,
+    height: opts?.height || 400,
+  });
   const { longitude, latitude, zoom } = viewportTemp.fitBounds(
     [
       [minLng, minLat],
       [maxLng, maxLat],
     ],
-    { padding: 40 }
+    { padding: opts?.padding ?? 40 }
   );
 
   return {
diff --git a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx
index b7581ad554e..031741d0ca8 100644
--- a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx
+++ b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx
@@ -90,17 +90,24 @@ const Map = ({
   const infraID = useInfraID();
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(getMap);
+  const mapRef = useRef<MapRef | null>(null);
+  const mapContainer = useMemo(() => mapRef.current?.getContainer(), [mapRef.current]);
 
   const pathGeometry = useMemo(
     () => geometry || pathProperties?.geometry,
     [pathProperties, geometry]
   );
 
-  const mapViewport = useMemo(
-    () =>
-      isReadOnly && pathGeometry ? computeBBoxViewport(bbox(pathGeometry), viewport) : viewport,
-    [isReadOnly, pathGeometry, viewport]
-  );
+  const mapViewport = useMemo(() => {
+    if (isReadOnly && pathGeometry) {
+      return computeBBoxViewport(bbox(pathGeometry), viewport, {
+        width: mapContainer?.clientWidth,
+        height: mapContainer?.clientHeight,
+        padding: 60,
+      });
+    }
+    return viewport;
+  }, [isReadOnly, pathGeometry, viewport, mapContainer]);
 
   const [mapIsLoaded, setMapIsLoaded] = useState(false);
 
@@ -112,8 +119,6 @@ const Map = ({
     [dispatch]
   );
 
-  const mapRef = useRef<MapRef | null>(null);
-
   const scaleControlStyle = {
     left: 20,
     bottom: 20,
@@ -214,10 +219,14 @@ const Map = ({
       type: 'LineString',
     };
     if (points.coordinates.length > 2) {
-      const newViewport = computeBBoxViewport(bbox(points), mapViewport);
+      const newViewport = computeBBoxViewport(bbox(points), mapViewport, {
+        width: mapContainer?.clientWidth,
+        height: mapContainer?.clientHeight,
+        padding: 60,
+      });
       dispatch(updateViewport(newViewport));
     }
-  }, [pathGeometry, simulationPathSteps]);
+  }, [pathGeometry, simulationPathSteps, mapContainer]);
 
   return (
     <>