ui-chart: spacetimechart: bordered path layer

Co-authored-by: Uriel-Sautron <[email protected]> Signed-off-by: Math_R_ <[email protected]>
OpenRailAssociation · Mar 7, 2025 · b833579 · b833579
1 parent 57effe7
commit b833579
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 4 deletions.
diff --git a/ui-charts/src/spaceTimeChart/components/PathLayer.tsx b/ui-charts/src/spaceTimeChart/components/PathLayer.tsx
@@ -35,6 +35,7 @@ type PathStyle = {
   opacity?: number;
   lineCap?: CanvasLineCap;
 };
+
 export type PathLevel = 1 | 2 | 3 | 4;
 const STYLES: Record<PathLevel, PathStyle> = {
   1: {
@@ -66,6 +67,13 @@ export type PathLayerProps = {
   color: string;
   pickingTolerance?: number;
   level?: PathLevel;
+  border?: {
+    offset: number;
+    level: PathLevel;
+    color: string;
+    width?: number;
+    backgroundColor?: string;
+  };
 };
 
 /**
@@ -79,6 +87,7 @@ export const PathLayer = ({
   color,
   level = DEFAULT_LEVEL,
   pickingTolerance = DEFAULT_PICKING_TOLERANCE,
+  border,
 }: PathLayerProps) => {
   /**
    * This function returns the list of points to join to draw the path. It will be both used to
@@ -336,8 +345,48 @@ export const PathLayer = ({
     [path]
   );
 
+  const drawBorder = useCallback<DrawingFunction>(
+    (ctx, stcContext) => {
+      if (!border) return;
+      const borderWidth = border.width || 1;
+      const mainPathStyle = STYLES[level];
+      const totalPathWidth = border.offset * 2 + mainPathStyle.width;
+
+      const segments = getPathSegments(stcContext);
+      ctx.save();
+      const drawSegments = (lineWidth: number, borderColor = border.color) => {
+        ctx.strokeStyle = borderColor;
+        ctx.lineWidth = lineWidth;
+        ctx.beginPath();
+        segments.forEach(({ x, y }, i) => {
+          if (x === segments[i - 1]?.x && y === segments[i - 1]?.y) return;
+          if (i === 0) {
+            ctx.moveTo(x, y);
+          } else if (i === segments.length - 1) {
+            ctx.lineTo(x - border.offset / 2, y);
+          } else {
+            ctx.lineTo(x, y);
+          }
+        });
+        ctx.stroke();
+      };
+
+      drawSegments(totalPathWidth + borderWidth * 2);
+
+      if (border.backgroundColor) {
+        drawSegments(totalPathWidth, border.backgroundColor);
+      }
+
+      ctx.restore();
+    },
+    [border, getPathSegments, level]
+  );
+
   const drawAll = useCallback<DrawingFunction>(
     (ctx, stcContext) => {
+      if (border !== undefined) {
+        drawBorder(ctx, stcContext);
+      }
       // Draw stops:
       ctx.strokeStyle = color;
       ctx.lineWidth = PAUSE_THICKNESS;
@@ -383,6 +432,8 @@ export const PathLayer = ({
       drawExtremities,
       computePathLength,
       drawLabel,
+      drawBorder,
+      border,
       path.label,
     ]
   );

diff --git a/ui-charts/src/spaceTimeChart/stories/additional-data.stories.tsx b/ui-charts/src/spaceTimeChart/stories/additional-data.stories.tsx
@@ -36,6 +36,8 @@ const CLOSED_DOORS = [
   },
 ];
 
+const DEFAULT_PATH_LEVEL = 2;
+
 type MonoTrackSpaceProps = {
   from: number;
   to: number;
@@ -257,7 +259,13 @@ const Wrapper = ({ swapAxis, spaceScaleType }: WrapperProps) => {
         }}
       >
         {PATHS.map((path) => (
-          <PathLayer key={path.id} path={path} color={path.color} />
+          <PathLayer
+            key={path.id}
+            path={path}
+            color={path.color}
+            border={path.border}
+            level={path.level || DEFAULT_PATH_LEVEL}
+          />
         ))}
         {MONO_TRACK_SPACES.map(({ from, to }, i) => (
           <MonoTrackSpace key={i} from={from} to={to} />

diff --git a/ui-charts/src/spaceTimeChart/stories/base-rendering.stories.tsx b/ui-charts/src/spaceTimeChart/stories/base-rendering.stories.tsx
@@ -62,7 +62,13 @@ const Wrapper = ({
         yOffset={yOffset}
       >
         {paths.map((path) => (
-          <PathLayer key={path.id} path={path} color={path.color} />
+          <PathLayer
+            key={path.id}
+            path={path}
+            color={path.color}
+            border={path.border}
+            level={path.level || 2}
+          />
         ))}
       </SpaceTimeChart>
     </div>

diff --git a/ui-charts/src/spaceTimeChart/stories/custom-styles.stories.tsx b/ui-charts/src/spaceTimeChart/stories/custom-styles.stories.tsx
@@ -195,7 +195,13 @@ const Wrapper = ({ color1, color2, color3, spaceScaleType }: WrapperProps) => {
         }}
       >
         {PATHS.map((path) => (
-          <PathLayer key={path.id} path={path} color={path.color} />
+          <PathLayer
+            key={path.id}
+            path={path}
+            color={path.color}
+            border={path.border}
+            level={path.level || 2}
+          />
         ))}
       </SpaceTimeChart>
     </div>

diff --git a/ui-charts/src/spaceTimeChart/stories/lib/paths.ts b/ui-charts/src/spaceTimeChart/stories/lib/paths.ts
@@ -1,6 +1,7 @@
 import { keyBy } from 'lodash';
 
 import type { OperationalPoint, PathData } from '../../lib/types';
+import { PathLevel } from '../../components/PathLayer';
 
 const KM = 1000;
 const MIN = 60 * 1000;
@@ -123,7 +124,54 @@ export const START_DATE = new Date('2024/04/02');
 
 // TODO:
 // Store and share the hardcoded colors with other stories that use the GET as well
-export const PATHS: (PathData & { color: string })[] = [
+export const PATHS: (PathData & {
+  color: string;
+  border?: {
+    offset: number;
+    level: PathLevel;
+    color: string;
+    backgroundColor?: string;
+  };
+  level?: PathLevel;
+})[] = [
+  // Paced Train
+  ...getPaths(
+    'Paced',
+    OPERATIONAL_POINTS,
+    3 * MIN,
+    60 * MIN,
+    (80 * KM) / (60 * MIN),
+    2,
+    +START_DATE + 10 * MIN,
+    {
+      color: '#B2539E',
+      border: {
+        offset: 3.5,
+        color: '#B2539E',
+        level: 2,
+        backgroundColor: '#FAF2F8',
+      },
+    }
+  ),
+  ...getPaths(
+    'Selected Paced',
+    OPERATIONAL_POINTS,
+    3 * MIN,
+    60 * MIN,
+    (80 * KM) / (60 * MIN),
+    1,
+    +START_DATE + 40 * MIN,
+    {
+      color: '#B2539E',
+      level: 1,
+      border: {
+        offset: 4,
+        color: 'transparent',
+        level: 2,
+        backgroundColor: '#FAE6F6',
+      },
+    }
+  ),
   // Omnibuses:
   ...getPaths(
     'omnibus',