save

OpenRailAssociation · Feb 21, 2025 · aa4dfa4 · aa4dfa4
1 parent 6464720
commit aa4dfa4
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 14 deletions.
diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
@@ -26,6 +26,13 @@ type State = {
   /** only update after a zoom. used to update back the view scroll value */
   scrollTo: number | null;
   panning: { initialOffset: { x: number; y: number } } | null;
+  zoomMode: boolean;
+  rect: {
+    timeStart: Date;
+    timeEnd: Date;
+    spaceStart: number; // mm
+    spaceEnd: number; // mm
+  } | null;
   isProportional: boolean;
   waypointsChart: Waypoint[];
   scales: SpaceScale[];
@@ -47,12 +54,15 @@ const useManchettesWithSpaceTimeChart = (
     yOffset: 0,
     scrollTo: null,
     panning: null,
+    zoomMode: false,
+    rect: null,
     isProportional: true,
     waypointsChart: [],
     scales: [],
   });
 
-  const { xZoom, yZoom, xOffset, yOffset, scrollTo, panning, isProportional } = state;
+  const { xZoom, yZoom, xOffset, yOffset, scrollTo, panning, zoomMode, rect, isProportional } =
+    state;
 
   const paths = usePaths(projectPathTrainResult, selectedTrain);
 
@@ -189,19 +199,39 @@ const useManchettesWithSpaceTimeChart = (
           handleXZoom(xZoom + delta, position.x);
         }
       },
-      onPan: (payload: {
-        initialPosition: { x: number; y: number };
-        position: { x: number; y: number };
-        isPanning: boolean;
-      }) => {
+      onPan: (payload: Parameters<NonNullable<SpaceTimeChartProps['onPan']>>[0]) => {
         const diff = getDiff(payload.initialPosition, payload.position);
-        const newState = { ...state };
+        setState((prev) => {
+          if (!payload.isPanning) {
+            return {
+              ...prev,
+              panning: null,
+              zoomMode: false,
+            };
+          }
+
+          if (state.zoomMode) {
+            const newRect = {
+              timeStart: new Date(payload.initialData.time),
+              timeEnd: new Date(payload.data.time),
+              spaceStart: payload.initialData.position,
+              spaceEnd: payload.data.position,
+            };
+
+            return {
+              ...prev,
+              rect: newRect,
+            };
+          }
 
-        if (!payload.isPanning) {
-          newState.panning = null;
-        } else if (!panning) {
-          newState.panning = { initialOffset: { x: xOffset, y: yOffset } };
-        } else {
+          if (!panning) {
+            return {
+              ...prev,
+              panning: { initialOffset: { x: xOffset, y: yOffset } },
+            };
+          }
+
+          const newState = { ...prev };
           const { initialOffset } = panning;
           newState.xOffset = initialOffset.x + diff.x;
 
@@ -215,8 +245,8 @@ const useManchettesWithSpaceTimeChart = (
             newState.yOffset = newYPos;
             manchetteWithSpaceTimeChartContainer.current.scrollTop = newYPos;
           }
-        }
-        setState(newState);
+          return newState;
+        });
       },
     }),
     [

diff --git a/ui-manchette-with-spacetimechart/src/stories/rectangle-zoom.stories.tsx b/ui-manchette-with-spacetimechart/src/stories/rectangle-zoom.stories.tsx
@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+
+import Manchette, { type ProjectPathTrainResult, type Waypoint } from '@osrd-project/ui-manchette';
+import { PathLayer, SpaceTimeChart, RectangleZoom } from '@osrd-project/ui-spacetimechart';
+import type { Meta } from '@storybook/react';
+
+import '@osrd-project/ui-core/dist/theme.css';
+import '@osrd-project/ui-manchette/dist/theme.css';
+import '@osrd-project/ui-manchette-with-spacetimechart/dist/theme.css';
+
+import { SAMPLE_WAYPOINTS, SAMPLE_PATHS_DATA } from '../assets/sampleData';
+import useManchettesWithSpaceTimeChart from '../hooks/useManchetteWithSpaceTimeChart';
+
+type ManchetteWithSpaceTimeWrapperProps = {
+  waypoints: Waypoint[];
+  projectPathTrainResult: ProjectPathTrainResult[];
+  selectedTrain: number;
+};
+
+const DEFAULT_HEIGHT = 561;
+
+const ManchetteWithSpaceTimeWrapper = ({
+  waypoints,
+  projectPathTrainResult,
+  selectedTrain,
+}: ManchetteWithSpaceTimeWrapperProps) => {
+  const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
+
+  const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
+    waypoints,
+    projectPathTrainResult,
+    manchetteWithSpaceTimeChartRef,
+    selectedTrain
+  );
+
+  return (
+    <div className="manchette-space-time-chart-wrapper">
+      <div
+        className="header bg-ambientB-5 w-full border-b border-grey-30"
+        style={{ height: '40px' }}
+      ></div>
+      <div
+        ref={manchetteWithSpaceTimeChartRef}
+        className="manchette flex"
+        style={{ height: `${DEFAULT_HEIGHT}px` }}
+        onScroll={handleScroll}
+      >
+        <Manchette {...manchetteProps} />
+        <div
+          className="space-time-chart-container w-full sticky"
+          style={{ bottom: 0, left: 0, top: 2, height: `${DEFAULT_HEIGHT - 6}px` }}
+        >
+          <SpaceTimeChart
+            className="inset-0 absolute h-full"
+            spaceOrigin={0}
+            timeOrigin={Math.min(...projectPathTrainResult.map((p) => +p.departureTime))}
+            {...spaceTimeChartProps}
+          >
+            {spaceTimeChartProps.paths.map((path) => (
+              <PathLayer key={path.id} path={path} color={path.color} level={path.level} />
+            ))}
+            <RectangleZoom rect={spaceTimeChartProps.rect} />
+          </SpaceTimeChart>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ManchetteWithSpaceTimeWrapper> = {
+  title: 'Manchette with SpaceTimeChart/Zoom rectangle',
+  component: ManchetteWithSpaceTimeWrapper,
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    waypoints: SAMPLE_WAYPOINTS,
+    projectPathTrainResult: SAMPLE_PATHS_DATA,
+    selectedTrain: 1,
+  },
+};
diff --git a/ui-spacetimechart/src/components/RectangleZoom.tsx b/ui-spacetimechart/src/components/RectangleZoom.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { DottedBorderRect } from './DottedBorderRect';
+
+export type CanvasRectProps = {
+  rect: {
+    timeStart: Date;
+    timeEnd: Date;
+    spaceStart: number; // mm
+    spaceEnd: number; // mm
+  };
+};
+
+export const RectangleZoom = ({ rect }: CanvasRectProps) => {
+  if (!rect) {
+    return null;
+  }
+  return (
+    <DottedBorderRect
+      timeStart={rect.timeStart}
+      timeEnd={rect.timeEnd}
+      spaceStart={rect.spaceStart}
+      spaceEnd={rect.spaceEnd}
+      lineWidth={1}
+      spacing={4}
+      fillStyle={'#0000000D'} /* black5 */
+    />
+  );
+};
diff --git a/ui-spacetimechart/src/index.ts b/ui-spacetimechart/src/index.ts
@@ -9,3 +9,4 @@ export * from './components/ConflictTooltip';
 export * from './components/OccupancyBlockLayer';
 export * from './components/WorkScheduleLayer';
 export * from './components/PatternRect';
+export * from './components/RectangleZoom';