Vcs/space origin

storybook/stories/TrackOccupancyDiagram/TrackOccupancyDiagram.stories.tsx

@@ -149,7 +149,7 @@ const TrackOccupancyDiagram = ({
     }
 
     const getTimePixel = getTimeToPixel(timeOrigin, timePixelOffset, timeScale);
-    const getSpacePixel = getSpaceToPixel(spacePixelOffset, spaceScaleTree);
+    const getSpacePixel = getSpaceToPixel(spaceOrigin, spacePixelOffset, spaceScaleTree);
     const getPoint = getDataToPoint(getTimePixel, getSpacePixel, timeAxis, spaceAxis);
     const getTime = getPixelToTime(timeOrigin, timePixelOffset, timeScale);
     const getSpace = getPixelToSpace(spaceOrigin, spacePixelOffset, spaceScaleTree);

ui-spacetimechart/src/components/PatternRect.tsx

@@ -1,7 +1,6 @@
-import { useCallback } from 'react';
+import React from 'react';
 
-import { useDraw } from '../hooks/useCanvas';
-import { type DrawingFunction } from '../lib/types';
+import { SimpleRect } from './SimpleRect';
 
 export type PatternRectProps = {
   timeStart: Date;
@@ -21,36 +20,17 @@ export const PatternRect = ({
   spaceEnd,
   imageElement,
 }: PatternRectProps) => {
-  const drawRegion = useCallback<DrawingFunction>(
-    (ctx, { getSpacePixel, getTimePixel, spaceAxis }) => {
-      const timeStartPixel = getTimePixel(Number(timeStart));
-      const endTimePixel = getTimePixel(Number(timeEnd));
-      const spaceStartPixel = getSpacePixel(spaceStart);
-      const spaceEndPixel = getSpacePixel(spaceEnd);
-
-      const areaSpaceSize = spaceEndPixel - spaceStartPixel;
-      const areaTimeSize = endTimePixel - timeStartPixel;
-      if (!areaSpaceSize || !areaTimeSize) return;
-
-      const pattern = ctx.createPattern(imageElement, 'repeat');
-      if (!pattern) {
-        return;
-      }
-
-      ctx.save();
-      ctx.fillStyle = pattern;
-      if (spaceAxis === 'x') {
-        ctx.translate(spaceStartPixel, timeStartPixel);
-        ctx.fillRect(0, 0, areaSpaceSize, areaTimeSize);
-      } else {
-        ctx.translate(timeStartPixel, spaceStartPixel);
-        ctx.fillRect(0, 0, areaTimeSize, areaSpaceSize);
-      }
-      ctx.restore();
-    },
-    [timeStart, timeEnd, spaceStart, spaceEnd, imageElement]
+  const drawPattern = (ctx: CanvasRenderingContext2D) => {
+    const pattern = ctx.createPattern(imageElement, 'repeat');
+    return pattern;
+  };
+  return (
+    <SimpleRect
+      timeStart={timeStart}
+      timeEnd={timeEnd}
+      spaceStart={spaceStart}
+      spaceEnd={spaceEnd}
+      fillStyle={drawPattern}
+    />
   );
-  useDraw('background', drawRegion);
-
-  return null;
 };

ui-spacetimechart/src/components/SimpleRect.tsx

@@ -0,0 +1,63 @@
+import { useCallback } from 'react';
+
+import { useDraw } from '../hooks/useCanvas';
+import { type DrawingFunction } from '../lib/types';
+
+export type FillStyle =
+  | string
+  | CanvasPattern
+  | CanvasGradient
+  | ((ctx: CanvasRenderingContext2D) => string | CanvasPattern | CanvasGradient | null);
+
+export type PatternRectProps = {
+  timeStart: Date;
+  timeEnd: Date;
+  spaceStart: number; // mm
+  spaceEnd: number; // mm
+  fillStyle: FillStyle;
+};
+
+export const SimpleRect = ({
+  timeStart,
+  timeEnd,
+  spaceStart,
+  spaceEnd,
+  fillStyle,
+}: PatternRectProps) => {
+  const drawRegion = useCallback<DrawingFunction>(
+    (ctx, { getSpacePixel, getTimePixel, spaceAxis, spaceScaleTree }) => {
+      const timeStartPixel = getTimePixel(Number(timeStart));
+      const endTimePixel = getTimePixel(Number(timeEnd));
+      const spaceStartPixel = getSpacePixel(spaceStart);
+      const spaceEndPixel = getSpacePixel(spaceEnd);
+      console.log('rect', spaceStart, spaceEnd, spaceStartPixel, spaceEndPixel, spaceScaleTree);
+
+      const areaSpaceSize = spaceEndPixel - spaceStartPixel;
+      const areaTimeSize = endTimePixel - timeStartPixel;
+      if (!areaSpaceSize || !areaTimeSize) return;
+
+      ctx.save();
+      if (typeof fillStyle === 'function') {
+        const pattern = fillStyle(ctx);
+        if (!pattern) {
+          return;
+        }
+        ctx.fillStyle = pattern;
+      } else {
+        ctx.fillStyle = fillStyle;
+      }
+      if (spaceAxis === 'x') {
+        ctx.translate(spaceStartPixel, timeStartPixel);
+        ctx.fillRect(0, 0, areaSpaceSize, areaTimeSize);
+      } else {
+        ctx.translate(timeStartPixel, spaceStartPixel);
+        ctx.fillRect(0, 0, areaTimeSize, areaSpaceSize);
+      }
+      ctx.restore();
+    },
+    [timeStart, timeEnd, spaceStart, spaceEnd, fillStyle]
+  );
+  useDraw('background', drawRegion);
+
+  return null;
+};

ui-spacetimechart/src/components/SpaceGraduations.tsx

@@ -24,6 +24,7 @@ const SpaceGraduations = () => {
         const styles = spaceGraduationsStyles[point.importanceLevel || 0];
         if (!styles) return;
 
+        console.log('graduation');
         ctx.strokeStyle = styles.color;
         ctx.lineWidth = styles.width;
         ctx.globalAlpha = styles.opacity || 1;
@@ -34,6 +35,7 @@ const SpaceGraduations = () => {
 
         const spacePixel = getSpacePixel(point.position);
 
+        console.log('spacePixel', spacePixel);
         ctx.beginPath();
         if (!swapAxis) {
           ctx.moveTo(0, spacePixel);

ui-spacetimechart/src/components/SpaceTimeChart.tsx

@@ -94,6 +94,7 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
 
   const contextState: SpaceTimeChartContextType = useMemo(() => {
     const spaceScaleTree = spaceScalesToBinaryTree(spaceOrigin, spaceScales);
+    console.log('tree', spaceOrigin, spaceScales, spaceScaleTree);
     const timeAxis = !swapAxis ? 'x' : 'y';
     const spaceAxis = !swapAxis ? 'y' : 'x';
 
@@ -109,8 +110,10 @@ export const SpaceTimeChart = (props: SpaceTimeChartProps) => {
       spacePixelOffset = xOffset;
     }
 
+    // console.log('spaceOrigin', spaceOrigin);
+    // console.table(spaceScaleTree);
     const getTimePixel = getTimeToPixel(timeOrigin, timePixelOffset, timeScale);
-    const getSpacePixel = getSpaceToPixel(spacePixelOffset, spaceScaleTree);
+    const getSpacePixel = getSpaceToPixel(spaceOrigin, spacePixelOffset, spaceScaleTree);
     const getPoint = getDataToPoint(getTimePixel, getSpacePixel, timeAxis, spaceAxis);
     const getTime = getPixelToTime(timeOrigin, timePixelOffset, timeScale);
     const getSpace = getPixelToSpace(spaceOrigin, spacePixelOffset, spaceScaleTree);

ui-spacetimechart/src/components/TimeCaptions.tsx

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useDraw } from '../hooks/useCanvas';
 import { MINUTE } from '../lib/consts';
 import { type DrawingFunction } from '../lib/types';
+import { displayElementsBasedOnZoom } from '../utils/canvas';
 
 const MINUTES_FORMATTER = (t: number) => `:${new Date(t).getMinutes().toString().padStart(2, '0')}`;
 const HOURS_FORMATTER = (t: number, pixelsPerMinute: number) => {
@@ -71,20 +72,17 @@ const TimeCaptions = () => {
         return false;
       });
 
-      // - Keys are times in ms
-      // - Values are the highest level on each time
-      const labelMarks: Record<number, { level: number; rangeIndex: number }> = {};
-      timeRanges.map((range, i) => {
-        const labelLevel = labelLevels[i];
-
-        if (!labelLevel) return;
-
-        let t = Math.floor(minT / range) * range;
-        while (t <= maxT) {
-          if (labelLevel) labelMarks[t] = { level: labelLevel, rangeIndex: i };
-          t += range;
-        }
+      const labelMarkFormatter = (labelLevel: number, i: number) => ({
+        level: labelLevel,
+        rangeIndex: i,
       });
+      const labelMarks = displayElementsBasedOnZoom(
+        minT,
+        maxT,
+        timeRanges,
+        labelLevels,
+        labelMarkFormatter
+      );
 
       // Render caption background:
       ctx.fillStyle = background;

ui-spacetimechart/src/components/TimeGraduations.tsx

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useDraw } from '../hooks/useCanvas';
 import { MINUTE } from '../lib/consts';
 import { type DrawingFunction } from '../lib/types';
+import { displayElementsBasedOnZoom } from '../utils/canvas';
 
 const TimeGraduations = () => {
   const drawingFunction = useCallback<DrawingFunction>(
@@ -37,20 +38,7 @@ const TimeGraduations = () => {
         return false;
       });
 
-      // - Keys are times in ms
-      // - Values are the highest level on each time
-      const gridMarks: Record<number, number> = {};
-      timeRanges.map((range, i) => {
-        const gridlinesLevel = gridlinesLevels[i];
-
-        if (!gridlinesLevel) return;
-
-        let t = Math.floor(minT / range) * range;
-        while (t <= maxT) {
-          gridMarks[t] = gridlinesLevel;
-          t += range;
-        }
-      });
+      const gridMarks = displayElementsBasedOnZoom<number>(minT, maxT, timeRanges, gridlinesLevels);
 
       // Render grid lines:
       for (const t in gridMarks) {

ui-spacetimechart/src/stories/additional-data.stories.tsx

@@ -187,6 +187,7 @@ const Wrapper = ({ swapAxis, spaceScaleType }: WrapperProps) => {
     panning: null,
   });
 
+  // console.log(state.xOffset, state.yOffset);
   return (
     <div className="absolute inset-0">
       <SpaceTimeChart
@@ -201,7 +202,7 @@ const Wrapper = ({ swapAxis, spaceScaleType }: WrapperProps) => {
             ? { size: 50 * state.yZoomLevel }
             : { coefficient: 150 / state.yZoomLevel }),
         }))}
-        timeOrigin={+new Date('2024/04/02')}
+        timeOrigin={+new Date('2024-04-02T00:00:00')}
         timeScale={60000 / state.xZoomLevel}
         xOffset={state.xOffset}
         yOffset={state.yOffset}