ui-trackoccupancydiagram: add through train

- create drawThroughTrain and drawDefaultZone function Co-authored-by: Yohh <[email protected]> Signed-off-by: Uriel-Sautron <[email protected]>
OpenRailAssociation · Dec 6, 2024 · c6a937d · c6a937d
1 parent c6fe372
commit c6a937d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 23 deletions.
diff --git a/storybook/stories/samples/TrackOccupancyDiagramSamples/occupancyZones.ts b/storybook/stories/samples/TrackOccupancyDiagramSamples/occupancyZones.ts
@@ -8,7 +8,7 @@ const OccupancyZones = [
     originStation: 'FOO',
     destinationStation: 'BAR',
     arrivalTime: new Date('2024/04/02 01:30'),
-    departureTime: new Date('2024/04/02 01:31'),
+    departureTime: new Date('2024/04/02 01:30'),
   },
   {
     id: '2',
@@ -96,7 +96,7 @@ const OccupancyZones = [
     arrivalTime: new Date('2024/04/02 00:40'),
     originStation: 'FOO',
     destinationStation: 'BAR',
-    departureTime: new Date('2024/04/02 00:41'),
+    departureTime: new Date('2024/04/02 00:40'),
   },
   {
     id: '10',
@@ -228,7 +228,7 @@ const OccupancyZones = [
     originStation: 'FOO',
     destinationStation: 'BAR',
     arrivalTime: new Date('2024/04/02 02:59'),
-    departureTime: new Date('2024/04/02 03:00'),
+    departureTime: new Date('2024/04/02 02:59'),
   },
 ];
 

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts
@@ -7,6 +7,33 @@ import {
   COLORS,
 } from '../../consts';
 import type { OccupancyZone, Track } from '../../types';
+type DrawZone = {
+  ctx: CanvasRenderingContext2D;
+  arrivalTime: number;
+  departureTime: number;
+};
+
+const drawDefaultZone = ({ ctx, arrivalTime, departureTime }: DrawZone) => {
+  ctx.beginPath();
+  ctx.rect(arrivalTime, OCCUPANCY_ZONE_START, departureTime! - arrivalTime, OCCUPANCY_ZONE_HEIGHT);
+  ctx.fill();
+  ctx.stroke();
+};
+
+const drawThroughTrain = ({ ctx, arrivalTime }: Omit<DrawZone, 'departureTime'>) => {
+  ctx.beginPath();
+  ctx.moveTo(arrivalTime - 1, OCCUPANCY_ZONE_START + 1.5);
+  ctx.lineTo(arrivalTime - 4.5, OCCUPANCY_ZONE_START - 3.5);
+  ctx.lineTo(arrivalTime + 4.5, OCCUPANCY_ZONE_START - 3.5);
+  ctx.lineTo(arrivalTime + 1, OCCUPANCY_ZONE_START + 1.5);
+  ctx.lineTo(arrivalTime + 4.5, OCCUPANCY_ZONE_START + 6.5);
+  ctx.lineTo(arrivalTime - 4.5, OCCUPANCY_ZONE_START + 6.5);
+  ctx.lineTo(arrivalTime - 1, OCCUPANCY_ZONE_START + 1.5);
+  ctx.fill();
+  ctx.moveTo(arrivalTime - 1, OCCUPANCY_ZONE_START + 1.5);
+  ctx.lineTo(arrivalTime + 1, OCCUPANCY_ZONE_START + 1.5);
+  ctx.stroke();
+};
 
 export const drawOccupancyZones = ({
   ctx,
@@ -35,25 +62,25 @@ export const drawOccupancyZones = ({
       filteredOccupancyZone.forEach((zone) => {
         const arrivalTime = getTimePixel(zone.arrivalTime.getTime());
         const departureTime = getTimePixel(zone.departureTime.getTime());
+        const isThroughTrain = arrivalTime === departureTime;
 
         ctx.fillStyle = zone.color;
         ctx.strokeStyle = COLORS.WHITE_100;
         ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.rect(
-          arrivalTime,
-          OCCUPANCY_ZONE_START,
-          departureTime - arrivalTime,
-          OCCUPANCY_ZONE_HEIGHT
-        );
-        ctx.fill();
-        ctx.stroke();
+        ctx.lineJoin = 'round';
+        ctx.lineCap = 'round';
 
+        if (isThroughTrain) {
+          drawThroughTrain({ ctx, arrivalTime });
+        } else {
+          drawDefaultZone({ ctx, arrivalTime, departureTime });
+        }
         drawOccupancyZonesTexts({
           ctx,
           zone,
           arrivalTime,
           departureTime,
+          isThroughTrain,
         });
       });
     }

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZonesTexts.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZonesTexts.ts
@@ -22,6 +22,7 @@ export const drawOccupancyZonesTexts = ({
   zone,
   arrivalTime,
   departureTime,
+  isThroughTrain,
 }: {
   ctx: CanvasRenderingContext2D;
   zone: {
@@ -33,6 +34,7 @@ export const drawOccupancyZonesTexts = ({
   };
   arrivalTime: number;
   departureTime: number;
+  isThroughTrain: boolean;
 }) => {
   const zoneOccupancyLength = departureTime - arrivalTime - STROKE_WIDTH;
 
@@ -84,17 +86,18 @@ export const drawOccupancyZonesTexts = ({
     stroke: textStroke,
   });
 
-  drawText({
-    ctx,
-    text: zone.departureTime.getMinutes().toLocaleString('fr-FR', { minimumIntegerDigits: 2 }),
-    x: departureTime,
-    y: OCCUPANCY_ZONE_START + MINUTES_TEXT_OFFSET,
-    color: GREY_80,
-    xPosition: xDeparturePosition,
-    yPosition: 'top',
-    font: '400 12px IBM Plex Sans',
-    stroke: textStroke,
-  });
+  if (!isThroughTrain)
+    drawText({
+      ctx,
+      text: zone.departureTime.getMinutes().toLocaleString('fr-FR', { minimumIntegerDigits: 2 }),
+      x: departureTime,
+      y: OCCUPANCY_ZONE_START + MINUTES_TEXT_OFFSET,
+      color: GREY_80,
+      xPosition: xDeparturePosition,
+      yPosition: 'top',
+      font: '400 12px IBM Plex Sans',
+      stroke: textStroke,
+    });
 
   // origin & destination
   drawText({