fixup! fixup! fixup! ui-trackoccupancydiagram: highlight selected train

OpenRailAssociation · Dec 20, 2024 · ed86fe6 · ed86fe6
1 parent 592b62c
commit ed86fe6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts
@@ -16,8 +16,8 @@ const REMAINING_TRAINS_HEIGHT = 24;
 const REMAINING_TEXT_OFFSET = 12;
 const Y_OFFSET_INCREMENT = 4;
 const MAX_ZONES = 9;
-const X_BACKGROUND_OFFSET = 22;
-const X_TROUGHTRAIN_PADDING = 4;
+const X_BACKGROUND_PADDING = 4;
+const X_TROUGHTRAIN_BACKGROUND_PADDING = 8;
 const BACKGROUND_HEIGHT = 40;
 const SELECTED_TRAIN_ID_GRADIANT = 2;
 
@@ -33,7 +33,7 @@ const drawDefaultZone = ({ ctx, arrivalTimePixel, departureTimePixel, yPosition
   ctx.rect(
     arrivalTimePixel,
     yPosition,
-    departureTimePixel! - arrivalTimePixel,
+    departureTimePixel - arrivalTimePixel,
     OCCUPANCY_ZONE_HEIGHT
   );
   ctx.fill();
@@ -118,17 +118,26 @@ const drawOccupationZone = ({
   ctx.strokeStyle = WHITE_100;
   ctx.lineJoin = 'round';
   ctx.lineCap = 'round';
+  ctx.font = '400 10px IBM Plex Mono';
 
-  const extraWidth = X_BACKGROUND_OFFSET + (isThroughTrain ? X_TROUGHTRAIN_PADDING : 0);
+  const extraWidth = isThroughTrain ? X_TROUGHTRAIN_BACKGROUND_PADDING : X_BACKGROUND_PADDING;
+  const { originTextLength, destinationTextLength } = {
+    originTextLength: ctx.measureText(zone.originStation || '--').width,
+    destinationTextLength: ctx.measureText(zone.destinationStation || '--').width,
+  };
 
   if (selectedTrainId === zone.id) {
     ctx.save();
     ctx.fillStyle = SELECTION_20;
     ctx.beginPath();
     ctx.roundRect(
-      arrivalTimePixel - extraWidth,
+      arrivalTimePixel - originTextLength - extraWidth,
       yPosition - BACKGROUND_HEIGHT / 2,
-      departureTimePixel - arrivalTimePixel + extraWidth * 2,
+      departureTimePixel -
+        arrivalTimePixel +
+        originTextLength +
+        destinationTextLength +
+        extraWidth * 2,
       BACKGROUND_HEIGHT,
       SELECTED_TRAIN_ID_GRADIANT
     );

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZonesTexts.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZonesTexts.ts
@@ -9,7 +9,7 @@ const BREAKPOINTS = {
 const STROKE_WIDTH = 4;
 const X_BACKGROUND_PADDING = 4;
 const X_INITIAL_POSITION_OFFSET = 8;
-const X_MEDIUM_POSITION_OFFSET_BACKGROUND = 20;
+const X_MEDIUM_POSITION_OFFSET_BACKGROUND = 12;
 const Y_INITIAL_POSITION_OFFSET = 5;
 const Y_INITIAL_POSITION_OFFSET_BACKGROUND = 18;
 const X_TROUGHTRAIN_PADDING = 2;
@@ -39,6 +39,8 @@ export const drawOccupancyZonesTexts = ({
   isThroughTrain: boolean;
   selectedTrainId: string;
 }) => {
+  ctx.font = '400 12px IBM Plex Mono';
+
   const zoneOccupancyLength = departureTimePixel - arrivalTimePixel - STROKE_WIDTH;
 
   const isBelowBreakpoint = (breakpoint: keyof typeof BREAKPOINTS) =>
@@ -51,7 +53,7 @@ export const drawOccupancyZonesTexts = ({
     ? {
         xOriginName: arrivalTimePixel - originTextLength + STROKE_WIDTH,
         yOriginName: yPosition - Y_MEDIUM_POSITION_OFFSET,
-        xTrainName: arrivalTimePixel - X_MEDIUM_POSITION_OFFSET_BACKGROUND,
+        xTrainName: arrivalTimePixel - X_MEDIUM_POSITION_OFFSET_BACKGROUND - nameTextLength,
         yTrainName: yPosition - Y_MEDIUM_POSITION_OFFSET_BACKGROUND,
       }
     : {
@@ -70,7 +72,6 @@ export const drawOccupancyZonesTexts = ({
   };
 
   // for setup canvas main font, we have to import directly in the file the font generated by the font-face
-  ctx.font = '400 12px IBM Plex Mono';
 
   // train name
   if (selectedTrainId === zone.id) {
@@ -94,7 +95,7 @@ export const drawOccupancyZonesTexts = ({
   drawText({
     ctx,
     text: zone.arrivalTrainName,
-    x: isThroughTrain ? xOriginName - X_THROUGHTRAIN_OFFSET : xOriginName,
+    x: isBelowBreakpoint('medium') ? xTrainName : xOriginName,
     y: yOriginName,
     color: GREY_50,
     rotateAngle: ROTATE_VALUE,