front: fix speedspacechart-resize-behavior

Signed-off-by: Yohh <[email protected]>
OpenRailAssociation · Dec 5, 2024 · 255cf0a · 255cf0a
1 parent 7022b12
commit 255cf0a
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx b/front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { SpeedSpaceChart } from '@osrd-project/ui-speedspacechart';
 import type {
@@ -45,7 +45,8 @@ const SpeedSpaceChartContainer = ({
   const [baseHeightOfSpeedSpaceChart, setBaseHeightOfSpeedSpaceChart] =
     useState(heightOfSpeedSpaceChart);
 
-  const containerWidth = document.getElementById('container-SpeedSpaceChart')?.clientWidth;
+  const root = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(root.current?.clientWidth || 0);
 
   const speedSpaceChartData = formatData(
     trainSimulation,
@@ -75,6 +76,25 @@ const SpeedSpaceChartContainer = ({
     },
   };
 
+  useEffect(() => {
+    const updateCanvasSize = () => {
+      if (root.current) {
+        setContainerWidth(root.current.clientWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(updateCanvasSize);
+    if (root.current) {
+      resizeObserver.observe(root.current);
+    }
+
+    return () => {
+      if (root.current) {
+        resizeObserver.unobserve(root.current);
+      }
+    };
+  }, []);
+
   return (
     <Rnd
       default={{
@@ -105,6 +125,7 @@ const SpeedSpaceChartContainer = ({
       }}
     >
       <div
+        ref={root}
         id="container-SpeedSpaceChart"
         className="chart"
         style={{ height: `${heightOfSpeedSpaceChartContainer}px` }}