ui-speedspacechart: display electrical profile names on short ranges

Signed-off-by: romainvalls <[email protected]>
OpenRailAssociation · Feb 10, 2025 · c6d144b · c6d144b
1 parent 4849d09
commit c6d144b
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/ui-speedspacechart/src/components/helpers/drawElements/electricalProfile.ts b/ui-speedspacechart/src/components/helpers/drawElements/electricalProfile.ts
@@ -94,26 +94,36 @@ export const drawElectricalProfile = ({ ctx, width, height, store }: DrawFunctio
           );
           ctx.globalAlpha = 1;
 
-          const profilNameWidth = Math.floor(ctx.measureText(electricalProfile).width);
-          const marginProfilName = 20;
+          const profileNameWidth = Math.floor(ctx.measureText(electricalProfile).width);
+          const marginProfileName = 20;
+
+          const profileNameOverflow = Math.max(
+            profileNameWidth + marginProfileName - profileWidth,
+            0
+          );
 
           // Draw profile name
-          if (profileWidth > profilNameWidth + marginProfilName) {
-            ctx.fillStyle = '#000';
-            ctx.font = '600 14px IBM Plex Sans';
-            ctx.textAlign = 'center';
-            ctx.fillText(`${electricalProfile}`, xStart + profileWidth / 2, topLayer / 2);
-          }
+
+          ctx.fillStyle = '#000';
+          ctx.font = '600 14px IBM Plex Sans';
+          ctx.textAlign = 'center';
+          ctx.fillText(`${electricalProfile}`, xStart + profileWidth / 2, topLayer / 2);
 
           // Draw begin and end position
           ctx.fillStyle = 'rgb(49, 46, 43)';
           ctx.font = '400 14px IBM Plex Sans';
+
           ctx.textAlign = 'right';
-          ctx.fillText(`${(start || 0).toFixed(1)}`, xStart - MARGIN_POSITION_TEXT, topLayer / 2);
+          ctx.fillText(
+            `${(start || 0).toFixed(1)}`,
+            xStart - (MARGIN_POSITION_TEXT + profileNameOverflow / 2),
+            topLayer / 2
+          );
+
           ctx.textAlign = 'left';
           ctx.fillText(
             `${end!.toFixed(1)}`,
-            xStart + profileWidth + MARGIN_POSITION_TEXT,
+            xStart + profileWidth + (MARGIN_POSITION_TEXT + profileNameOverflow / 2),
             topLayer / 2
           );
         }