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>

Author: sim51

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 {

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 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) {
+      const mapContainer = mapRef.current?.getContainer();
+      return computeBBoxViewport(bbox(pathGeometry), viewport, {
+        width: mapContainer?.clientWidth,
+        height: mapContainer?.clientHeight,
+        padding: 60,
+      });
+    }
+    return viewport;
+  }, [isReadOnly, pathGeometry, viewport, mapRef]);
 
   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,15 @@ const Map = ({
       type: 'LineString',
     };
     if (points.coordinates.length > 2) {
-      const newViewport = computeBBoxViewport(bbox(points), mapViewport);
+      const mapContainer = mapRef.current?.getContainer();
+      const newViewport = computeBBoxViewport(bbox(points), mapViewport, {
+        width: mapContainer?.clientWidth,
+        height: mapContainer?.clientHeight,
+        padding: 60,
+      });
       dispatch(updateViewport(newViewport));
     }
-  }, [pathGeometry, simulationPathSteps]);
+  }, [pathGeometry, simulationPathSteps, mapRef]);
 
   return (
     <>