diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts index 7bfb69b1e..95062d90f 100755 --- 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 index b655fa24d..5887a2443 100755 --- 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,