OpenRailAssociation · clarani · Mar 6, 2025
@@ -3,7 +3,7 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import { ZoomIn, ZoomOut } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 
-import { INITIAL_OP_LIST_HEIGHT, MAX_ZOOM_Y, MIN_ZOOM_Y } from './consts';
+import { INITIAL_OP_LIST_HEIGHT, MAX_ZOOM_Y, MIN_ZOOM_Y } from '../consts';
 import WaypointList from './WaypointList';
 import type { InteractiveWaypoint, WaypointMenuData } from '../types';
 

@@ -1,12 +1,9 @@
 import React, { useRef } from 'react';
 
-import { PathLayer, SpaceTimeChart, type SpaceTimeChartProps } from '../../../spaceTimeChart';
-import Manchette, {
-  type ProjectPathTrainResult,
-  type Waypoint,
-  type ManchetteProps,
-} from '../../Manchette';
+import Manchette, { type ManchetteProps } from './Manchette';
+import { PathLayer, SpaceTimeChart, type SpaceTimeChartProps } from '../../spaceTimeChart';
 import useManchetteWithSpaceTimeChart from '../hooks/useManchetteWithSpaceTimeChart';
+import { type ProjectPathTrainResult, type Waypoint } from '../types';
 
 export type ManchetteWithSpaceTimeChartProps = {
   waypoints: Waypoint[];

@@ -1,3 +1,5 @@
+export const INITIAL_OP_LIST_HEIGHT = 521;
+
 export const BASE_WAYPOINT_HEIGHT = 32;
 export const INITIAL_WAYPOINT_LIST_HEIGHT = 521;
 export const INITIAL_SPACE_TIME_CHART_HEIGHT = INITIAL_WAYPOINT_LIST_HEIGHT + 40;

@@ -1,17 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import usePaths from './usePaths';
-import type { SpaceScale, SpaceTimeChartProps } from '../../../spaceTimeChart';
-import type { ProjectPathTrainResult, Waypoint } from '../../Manchette';
+import type { SpaceScale, SpaceTimeChartProps } from '../../spaceTimeChart';
 import { MAX_ZOOM_Y, MIN_ZOOM_Y, ZOOM_Y_DELTA, DEFAULT_ZOOM_MS_PER_PX } from '../consts';
+import type { ProjectPathTrainResult, Waypoint } from '../types';
+import { getDistance } from '../utils';
 import {
   computeWaypointsToDisplay,
   getScales,
   zoomX,
   zoomValueToTimeScale,
   timeScaleToZoomValue,
-} from '../helpers';
-import { getDiff } from '../utils/point';
+} from '../utils/helpers';
 
 type State = {
   xZoom: number;
@@ -190,7 +190,7 @@ const useManchettesWithSpaceTimeChart = (
         position: { x: number; y: number };
         isPanning: boolean;
       }) => {
-        const diff = getDiff(payload.initialPosition, payload.position);
+        const diff = getDistance(payload.initialPosition, payload.position);
         const newState = { ...state };
 
         if (!payload.isPanning) {

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
-import { type PathLevel } from '../../../spaceTimeChart';
-import { type ProjectPathTrainResult } from '../../Manchette';
+import { type PathLevel } from '../../spaceTimeChart';
 import { PATH_COLOR_DEFAULT } from '../consts';
+import { type ProjectPathTrainResult } from '../types';
 
 const transformCurve = (curve: ProjectPathTrainResult['spaceTimeCurves'][0], departureTime: Date) =>
   curve.positions.map((position, i) => ({

@@ -1,9 +1,19 @@
-export {
-  default as Manchette,
-  type WaypointMenuData,
-  type Waypoint,
-  type ProjectPathTrainResult,
-  type InteractiveWaypoint,
-} from './Manchette';
-
-export * from './useManchetteWithSpaceTimeChart';
+import '@osrd-project/ui-core/dist/theme.css';
+import './styles/main.css';
+import './consts';
+
+export { default as Manchette, type ManchetteProps } from './components/Manchette';
+export { default as ManchetteWithSpaceTimeChart } from './components/ManchetteWithSpaceTimeChart';
+
+export { DEFAULT_ZOOM_MS_PER_PX } from './consts';
+
+export { default as useManchetteWithSpaceTimeChart } from './hooks/useManchetteWithSpaceTimeChart';
+
+export type {
+  WaypointMenuData,
+  Waypoint,
+  ProjectPathTrainResult,
+  InteractiveWaypoint,
+} from './types';
+
+export { timeScaleToZoomValue } from './utils/helpers';
@@ -4,3 +4,4 @@
 @import 'manchette.css';
 @import 'waypoint.css';
 @import 'waypoint-list.css';
+@import 'menu.css';
@@ -56,3 +56,29 @@
     }
   }
 }
+
+.manchette-space-time-chart-wrapper {
+  border-radius: 10px;
+  box-shadow:
+    0px 4px 9px rgba(0, 0, 0, 0.06),
+    0px 1px 2px rgba(0, 0, 0, 0.19);
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 1);
+  width: 100%;
+  position: relative;
+
+  .manchette {
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.no-scroll {
+      overflow-y: clip;
+    }
+  }
+
+  .space-time-chart-container {
+    height: 561px;
+    width: 100%;
+    bottom: 0;
+  }
+}
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 
-import { BASE_WAYPOINT_HEIGHT } from '../consts';
+import { BASE_WAYPOINT_HEIGHT } from '../../consts';
 import { computeWaypointsToDisplay, getScales } from '../helpers';
 
 // Assuming these types from your code

@@ -1,14 +1,14 @@
 import { clamp } from 'lodash';
 
+import { calcTotalDistance, getHeightWithoutLastWaypoint } from '.';
 import {
   BASE_WAYPOINT_HEIGHT,
   MAX_ZOOM_MS_PER_PX,
   MAX_ZOOM_X,
   MIN_ZOOM_MS_PER_PX,
   MIN_ZOOM_X,
-} from './consts';
-import { calcTotalDistance, getHeightWithoutLastWaypoint } from './utils';
-import type { InteractiveWaypoint, Waypoint } from '../Manchette';
+} from '../consts';
+import type { InteractiveWaypoint, Waypoint } from '../types';
 
 type WaypointsOptions = { isProportional: boolean; yZoom: number; height: number };
 

@@ -9,3 +9,15 @@ export const msToS = (time: number) => time / 1000;
 
 export const calcTotalDistance = <T extends { position: number }>(ops: T[]) =>
   ops.at(-1)!.position - ops.at(0)!.position;
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+export function getDistance(a: Point, b: Point): Point {
+  return {
+    x: b.x - a.x,
+    y: b.y - a.y,
+  };
+}