border

ui-spacetimechart/src/components/SimpleRect.tsx

@@ -1,7 +1,8 @@
-import { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useDraw } from '../hooks/useCanvas';
 import { type DrawingFunction } from '../lib/types';
+import { drawDottedBorder } from '../utils/canvas';
 
 export type FillStyle =
   | string
@@ -24,8 +25,9 @@ export const SimpleRect = ({
   spaceEnd,
   fillStyle,
 }: PatternRectProps) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
   const drawRegion = useCallback<DrawingFunction>(
-    (ctx, { getSpacePixel, getTimePixel, spaceAxis }) => {
+    (ctx, { getSpacePixel, getTimePixel, spaceAxis, timePixelOffset, spacePixelOffset }) => {
       const timeStartPixel = getTimePixel(Number(timeStart));
       const endTimePixel = getTimePixel(Number(timeEnd));
       const spaceStartPixel = getSpacePixel(spaceStart);
@@ -48,15 +50,53 @@ export const SimpleRect = ({
       if (spaceAxis === 'x') {
         ctx.translate(spaceStartPixel, timeStartPixel);
         ctx.fillRect(0, 0, areaSpaceSize, areaTimeSize);
+        // drawDottedBorder(
+        //   ctx,
+        //   { x: 0, y: 0, width: areaSpaceSize, height: areaTimeSize },
+        //   { lineWidth: 1, dotRadius: 0.6, spacing: 4 }
+        // );
       } else {
         ctx.translate(timeStartPixel, spaceStartPixel);
         ctx.fillRect(0, 0, areaTimeSize, areaSpaceSize);
+        // drawDottedBorder(
+        //   ctx,
+        //   { x: 0, y: 0, width: areaTimeSize, height: areaSpaceSize },
+        //   { lineWidth: 1, dotRadius: 0.6, spacing: 4 }
+        // );
       }
       ctx.restore();
+      if (overlayRef.current) {
+        let borderSpaceSize, borderTimeSize, borderSpaceStart, borderTimeStart;
+        if (areaSpaceSize >= 0) {
+          borderSpaceSize = areaSpaceSize;
+          borderSpaceStart = spaceStartPixel;
+        } else {
+          borderSpaceSize = -areaSpaceSize;
+          borderSpaceStart = spaceStartPixel + areaSpaceSize;
+        }
+        if (areaTimeSize >= 0) {
+          borderTimeSize = areaTimeSize;
+          borderTimeStart = timeStartPixel;
+        } else {
+          borderTimeSize = -areaTimeSize;
+          borderTimeStart = timeStartPixel + areaTimeSize;
+        }
+        if (spaceAxis === 'x') {
+          overlayRef.current.style.left = `${borderSpaceStart}px`;
+          overlayRef.current.style.top = `${borderTimeStart}px`;
+          overlayRef.current.style.width = `${borderSpaceSize}px`;
+          overlayRef.current.style.height = `${borderTimeSize}px`;
+        } else {
+          overlayRef.current.style.left = `${borderTimeStart}px`;
+          overlayRef.current.style.top = `${borderSpaceStart}px`;
+          overlayRef.current.style.width = `${borderTimeSize}px`;
+          overlayRef.current.style.height = `${borderSpaceSize}px`;
+        }
+      }
     },
     [timeStart, timeEnd, spaceStart, spaceEnd, fillStyle]
   );
   useDraw('background', drawRegion);
 
-  return null;
+  return <div ref={overlayRef} className="simple-rect-border-box" />;
 };

ui-spacetimechart/src/stories/draw-rectangle.stories.tsx

@@ -124,7 +124,6 @@ const DrawRectangleWrapper = ({
           handleZoom(state.zoomValue + delta, x);
         }}
         onPan={({ initialPosition, position, isPanning, data, initialData }) => {
-          console.log('onPan', position.y, data.position);
           const diff = getDiff(initialPosition, position);
           setState((prev) => {
             // when releasing the mouse, onPan is called one last time with isPanning false
@@ -177,7 +176,7 @@ const DrawRectangleWrapper = ({
             timeEnd={state.rect.timeEnd}
             spaceStart={state.rect.spaceStart}
             spaceEnd={state.rect.spaceEnd}
-            fillStyle={'red'}
+            fillStyle={'#00000003'}
           />
         )}
         <MouseTracker />

ui-spacetimechart/src/styles/main.css

@@ -2,6 +2,10 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+.space-time-chart {
+  overflow: hidden;
+}
+
 .spacetimechart-tooltip {
   position: absolute;
   background-color: rgba(0, 0, 0, 0.85);
@@ -46,3 +50,53 @@
     text-overflow: ellipsis;
   }
 }
+
+.simple-rect-border-box {
+  position: relative;
+  border: none; /* Remove default border */
+}
+
+.simple-rect-border-box::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    repeating-linear-gradient(
+        90deg,
+        black 0px,
+        black 1px,
+        transparent 1px,
+        transparent 4px
+      )
+      top / 100% 1px no-repeat,
+    repeating-linear-gradient(
+        90deg,
+        black 0px,
+        black 1px,
+        transparent 1px,
+        transparent 4px
+      )
+      bottom / 100% 1px no-repeat,
+    repeating-linear-gradient(
+        0deg,
+        black 0px,
+        black 1px,
+        transparent 1px,
+        transparent 4px
+      )
+      left / 1px 100% no-repeat,
+    repeating-linear-gradient(
+        0deg,
+        black 0px,
+        black 1px,
+        transparent 1px,
+        transparent 4px
+      )
+      right / 1px 100% no-repeat;
+  content: "";
+  pointer-events: none;
+}
+

ui-spacetimechart/src/utils/canvas.ts

@@ -310,3 +310,37 @@ export function computeVisibleTimeMarkers<T>(
   });
   return result;
 }
+
+export function drawDottedBorder(
+  ctx: CanvasRenderingContext2D,
+  rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  },
+  dots: { lineWidth: number; dotRadius: number; spacing: number }
+) {
+  const { x, y, width, height } = rect;
+  const { lineWidth, dotRadius, spacing } = dots;
+  ctx.lineWidth = lineWidth;
+
+  function drawDot(cx: number, cy: number) {
+    // White border
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.arc(cx, cy, dotRadius + 0.5, 0, Math.PI * 2); // Slightly larger circle for the border
+    ctx.fill();
+
+    // Black inner dot
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  for (let i = x; i < x + width; i += spacing) drawDot(i, y);
+  for (let i = x; i < x + width; i += spacing) drawDot(i, y + height);
+  for (let i = y; i < y + height; i += spacing) drawDot(x, i);
+  for (let i = y; i < y + height; i += spacing) drawDot(x + width, i);
+}