fixup! ui-trackoccupancydiagram: add graduations layer

storybook/stories/samples/TrackOccupancyDiagramSamples/tracks.ts

@@ -1,10 +1,10 @@
 const tracks = [
-  { id: '1', name: '14', line: '123456' },
-  { id: '2', name: '12', line: '123456' },
-  { id: '3', name: '11', line: '123456' },
-  { id: '4', name: '10', line: '123456' },
-  { id: '5', name: '5', line: '123456' },
-  { id: '6', name: '6', line: '123456' },
+  { id: '1', name: 'EV', line: '123456' },
+  { id: '2', name: '2', line: '456123' },
+  { id: '3', name: '2bis', line: '135246' },
+  { id: '4', name: 'Z', line: '654321' },
+  { id: '5', name: '1bis', line: '615243' },
+  { id: '6', name: '1', line: '523416' },
 ];
 
 export default tracks;

ui-trackoccupancydiagram/src/components/TrackOccupancyCanvas.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 
+import OccupancyZonesLayer from './layers/OccupancyZonesLayer';
+import TracksLayer from './layers/TracksLayer';
 import type { Store, TrackOccupancyCanvasProps } from './types';
 
 const TrackOccupancyCanvas = ({
+  tracks,
   zones,
   selectedTrain,
   timeOrigin,
   timeScale,
 }: TrackOccupancyCanvasProps) => {
-  const store: Store = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [store, setStore] = useState<Store>({
+    tracks,
     zones,
     selectedTrain,
     timeOrigin,
@@ -17,22 +22,14 @@ const TrackOccupancyCanvas = ({
     offsetX: 0,
     clientX: 0,
     clientY: 0,
-  };
+  });
 
-  console.warn(
-    'zones:',
-    zones,
-    'selectedTrain:',
-    selectedTrain,
-    'timeOrigin:',
-    timeOrigin,
-    'timeScale:',
-    timeScale,
-    'store:',
-    store
+  return (
+    <div id="track-occupancy-canvas" className="bg-white-100">
+      <TracksLayer />
+      <OccupancyZonesLayer />
+    </div>
   );
-
-  return <div id="track-occupancy-canvas" className="bg-white-100"></div>;
 };
 
 export default TrackOccupancyCanvas;

ui-trackoccupancydiagram/src/components/TrackOccupancyManchette.tsx

@@ -7,10 +7,8 @@ const TrackOccupancyManchette = ({ tracks }: TrackOccupancyManchetteProps) => (
     {tracks.map((track) => (
       <div className="track" key={track.id}>
         <span className="track-line">{track.line}</span>
-        <div className="track-name">
-          <div className="track-name-detail">{track.name}</div>
-          <div className="track-name-rail" />
-        </div>
+        <div className="track-name">{track.name}</div>
+        <div className="track-rail" />
       </div>
     ))}
   </div>

ui-trackoccupancydiagram/src/components/layers/OccupancyZonesLayer.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const OccupancyZonesLayer = () => <canvas id="occupancy-zones-layer" />;
+
+export default OccupancyZonesLayer;

ui-trackoccupancydiagram/src/components/layers/TracksLayer.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TracksLayer = () => <canvas id="tracks-layer" />;
+
+export default TracksLayer;

ui-trackoccupancydiagram/src/components/types.ts

@@ -29,6 +29,7 @@ export type TrackOccupancyManchetteProps = {
 };
 
 export type Store = {
+  tracks: Track[];
   zones: OccupancyZone[];
   selectedTrain: string | null;
   timeOrigin: number; // in ms

ui-trackoccupancydiagram/src/styles/main.css

@@ -2,22 +2,24 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-#track-occupancy-manchette {
+#track-occupancy-manchette,
+#track-occupancy-canvas {
   height: 100%;
   width: 100%;
+  border-radius: inherit;
+}
+
+#track-occupancy-manchette {
   padding: 8px 0;
   @apply bg-ambientB-10;
-  border-radius: inherit;
   box-shadow:
     inset 0 1px 0 0 rgb(255 255 255),
     inset -1px 0 0 0 rgba(0, 0, 0, 0.25);
 }
 
 #track-occupancy-canvas {
-  height: 100%;
-  width: 100%;
   @apply bg-white-100;
-  border-radius: inherit;
+  position: relative;
 }
 
 .track {
@@ -36,30 +38,34 @@
 
   &-name {
     height: 24px;
-    display: flex;
-
-    &-detail {
-      @apply bg-grey-70;
-      border-radius: 4px;
-      box-shadow:
-        0 0 0 2px rgb(255, 255, 255),
-        0 0 0 2.5px rgb(182, 178, 175);
-      padding: 2px 6px;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      @apply text-white-100;
-    }
+    @apply bg-grey-70;
+    border-radius: 4px;
+    box-shadow:
+      0 0 0 2px rgb(255, 255, 255),
+      0 0 0 2.5px rgb(182, 178, 175);
+    padding: 2px 6px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    @apply text-white-100;
+  }
 
-    &-rail {
-      align-self: center;
-      height: 9px;
-      width: 17px;
-      margin-left: 2.5px;
-      margin-right: 1px;
-      @apply bg-white-50;
-      border-top: solid 1px rgb(211, 209, 207);
-      border-bottom: solid 1px rgb(211, 209, 207);
-    }
+  &-rail {
+    align-self: center;
+    height: 9px;
+    width: 17px;
+    margin-left: 2.5px;
+    margin-right: 1px;
+    @apply bg-white-50;
+    border-top: solid 1px rgb(211, 209, 207);
+    border-bottom: solid 1px rgb(211, 209, 207);
   }
 }
+
+#tracks-layer,
+#occupancy-zones-layer {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  padding: 8px 0;
+}