@dxos/react-ui-canvas 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/CellGrid/state/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './atoms';
+export * from './types';
+export * from './viewport';

package/src/components/CellGrid/state/types.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export type CellCoord = { col: number; row: number };
+
+export type Cell<T = unknown> = {
+  col: number;
+  row: number;
+  length: number;
+  data?: T;
+};
+
+export type Viewport = {
+  /** World-space scroll offset (pixels). */
+  scrollX: number;
+  scrollY: number;
+  /** Cell dimensions in pixels at zoomX = 1. */
+  baseCellWidth: number;
+  cellHeight: number;
+  /** Horizontal zoom factor. */
+  zoomX: number;
+};
+
+export type SelectionRange = {
+  col0: number;
+  row0: number;
+  col1: number;
+  row1: number;
+};
+
+export type Selection = {
+  range: SelectionRange | null;
+};
+
+export type Tool = 'toggle' | 'select' | 'resize' | 'edit' | 'delete';
+
+export type Row = { id: string; label?: string };
+
+export type Headers = { left: number; top: number };

package/src/components/CellGrid/state/viewport.test.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { defaultViewport } from './atoms';
+import { hitTestCell, screenToWorld, visibleCellRange, visibleCells, worldToScreen } from './viewport';
+
+const headers = { left: 80, top: 24 };
+
+describe('viewport', () => {
+  test('worldToScreen / screenToWorld round-trip', ({ expect }) => {
+    const viewport = { ...defaultViewport(), scrollX: 100, scrollY: 50 };
+    const { x, y } = worldToScreen(viewport, headers, { col: 5, row: 3 });
+    const back = screenToWorld(viewport, headers, { x, y });
+    expect(back.col).toBeCloseTo(5);
+    expect(back.row).toBeCloseTo(3);
+  });
+
+  test('hitTestCell returns null in header region', ({ expect }) => {
+    const viewport = defaultViewport();
+    expect(hitTestCell(viewport, headers, { x: 10, y: 10 })).toBeNull();
+    expect(hitTestCell(viewport, headers, { x: 200, y: 10 })).toBeNull();
+    expect(hitTestCell(viewport, headers, { x: 10, y: 200 })).toBeNull();
+  });
+
+  test('hitTestCell floors fractional coords', ({ expect }) => {
+    const viewport = { ...defaultViewport(), baseCellWidth: 20, cellHeight: 20 };
+    const coord = hitTestCell(viewport, headers, { x: 80 + 25, y: 24 + 45 });
+    expect(coord).toEqual({ col: 1, row: 2 });
+  });
+
+  test('visibleCellRange respects scroll', ({ expect }) => {
+    const viewport = { ...defaultViewport(), scrollX: 240, baseCellWidth: 24, cellHeight: 24 };
+    const range = visibleCellRange(viewport, headers, { width: 400, height: 200 });
+    expect(range.minCol).toBe(10);
+  });
+
+  test('visibleCells filters by row and column extent', ({ expect }) => {
+    const cells = new Map([
+      ['0,0', { col: 0, row: 0, length: 1 }],
+      ['100,0', { col: 100, row: 0, length: 1 }],
+      ['5,5', { col: 5, row: 5, length: 1 }],
+      ['8,1', { col: 8, row: 1, length: 10 }],
+    ]);
+    const result = Array.from(visibleCells(cells, { minCol: 0, maxCol: 12, minRow: 0, maxRow: 2 }));
+    expect(result.map((cell) => `${cell.col},${cell.row}`).sort()).toEqual(['0,0', '8,1']);
+  });
+});

package/src/components/CellGrid/state/viewport.ts

@@ -0,0 +1,94 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type { Cell, CellCoord, Headers, Viewport } from './types';
+
+export const cellKey = (col: number, row: number): string => `${col},${row}`;
+
+export const cellWidth = (viewport: Viewport): number => viewport.baseCellWidth * viewport.zoomX;
+
+/**
+ * Convert a cell's world coordinates to screen-space pixel rectangle (relative to canvas origin).
+ */
+export const worldToScreen = (
+  viewport: Viewport,
+  headers: Headers,
+  coord: { col: number; row: number; length?: number },
+): { x: number; y: number; w: number; h: number } => {
+  const w = cellWidth(viewport);
+  return {
+    x: headers.left + coord.col * w - viewport.scrollX,
+    y: headers.top + coord.row * viewport.cellHeight - viewport.scrollY,
+    w: (coord.length ?? 1) * w,
+    h: viewport.cellHeight,
+  };
+};
+
+/**
+ * Convert screen-space pixels (relative to canvas origin) to fractional cell coordinates.
+ */
+export const screenToWorld = (
+  viewport: Viewport,
+  headers: Headers,
+  point: { x: number; y: number },
+): { col: number; row: number } => {
+  const w = cellWidth(viewport);
+  return {
+    col: (point.x - headers.left + viewport.scrollX) / w,
+    row: (point.y - headers.top + viewport.scrollY) / viewport.cellHeight,
+  };
+};
+
+export const hitTestCell = (
+  viewport: Viewport,
+  headers: Headers,
+  point: { x: number; y: number },
+): CellCoord | null => {
+  if (point.x < headers.left || point.y < headers.top) {
+    return null;
+  }
+  const { col, row } = screenToWorld(viewport, headers, point);
+  if (col < 0 || row < 0) {
+    return null;
+  }
+  return { col: Math.floor(col), row: Math.floor(row) };
+};
+
+/**
+ * Compute the inclusive range of cell coordinates intersecting the visible content rect.
+ */
+export const visibleCellRange = (
+  viewport: Viewport,
+  headers: Headers,
+  size: { width: number; height: number },
+): { minCol: number; maxCol: number; minRow: number; maxRow: number } => {
+  const w = cellWidth(viewport);
+  const innerW = Math.max(0, size.width - headers.left);
+  const innerH = Math.max(0, size.height - headers.top);
+  const minCol = Math.max(0, Math.floor(viewport.scrollX / w));
+  const maxCol = Math.floor((viewport.scrollX + innerW) / w);
+  const minRow = Math.max(0, Math.floor(viewport.scrollY / viewport.cellHeight));
+  const maxRow = Math.floor((viewport.scrollY + innerH) / viewport.cellHeight);
+  return { minCol, maxCol, minRow, maxRow };
+};
+
+/**
+ * Iterate sparse cell map, yielding only cells whose horizontal extent intersects visible cols and whose row is visible.
+ */
+export const visibleCells = function* <T>(
+  cells: ReadonlyMap<string, Cell<T>>,
+  range: { minCol: number; maxCol: number; minRow: number; maxRow: number },
+): Generator<Cell<T>> {
+  for (const cell of cells.values()) {
+    if (cell.row < range.minRow || cell.row > range.maxRow) {
+      continue;
+    }
+    const start = cell.col;
+    const end = cell.col + cell.length - 1;
+    if (end < range.minCol || start > range.maxCol) {
+      continue;
+    }
+    yield cell;
+  }
+};

package/src/components/FPS.tsx

@@ -6,7 +6,7 @@
 import React, { useEffect, useReducer, useRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export type FPSProps = ThemedClassName<{
   width?: number;
@@ -53,7 +53,7 @@ export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }
     },
   );
 
-  const requestRef = useRef<number>();
+  const requestRef = useRef<number | null>(null);
   const tick = () => {
     dispatch();
     requestRef.current = requestAnimationFrame(tick);
@@ -73,7 +73,7 @@ export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }
       style={{ width: width + 6 }}
       className={mx(
         'relative flex flex-col p-0.5',
-        'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',
+        'bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator',
         classNames,
       )}
     >

package/src/components/Grid/Grid.stories.tsx

@@ -2,15 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type ProjectionState } from '../../hooks';
-
 import { GridComponent, type GridProps } from './Grid';
 
 const DefaultStory = (props: GridProps) => {
@@ -24,16 +21,19 @@ const DefaultStory = (props: GridProps) => {
   );
 };
 
-const meta: Meta<GridProps> = {
+const meta = {
   title: 'ui/react-ui-canvas/Grid',
   component: GridComponent,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof GridComponent>;
 
 export default meta;
 
-type Story = StoryObj<GridProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/Grid/Grid.tsx

@@ -5,7 +5,7 @@
 import React, { forwardRef, useId, useMemo } from 'react';
 
 import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useCanvasContext } from '../../hooks';
 import { type Point } from '../../types';
@@ -18,6 +18,8 @@ const defaultOffset: Point = { x: 0, y: 0 };
 
 const createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;
 
+// TODO(burdon): Click to drag.
+
 export type GridProps = ThemedClassName<{
   size?: number;
   scale?: number;
@@ -25,32 +27,34 @@ export type GridProps = ThemedClassName<{
   showAxes?: boolean;
 }>;
 
+// TODO(burdon): Use id of parent canvas.
+export const Grid = (props: GridProps) => {
+  const { scale, offset } = useCanvasContext();
+  return <GridComponent {...props} scale={scale} offset={offset} />;
+};
+
 export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
   (
     { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },
     forwardedRef,
   ) => {
     const svgRef = useForwardedRef(forwardedRef);
+    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
+
     const instanceId = useId();
     const grids = useMemo(
       () =>
         gridRatios
           .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))
-          .filter(({ size }) => size >= gridSize && size <= 256),
+          .filter(({ size }) => size >= gridSize && size <= 128),
       [gridSize, scale],
     );
 
-    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
-
     return (
       <svg
         {...testId('dx-canvas-grid')}
         ref={svgRef}
-        className={mx(
-          'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',
-          'stroke-neutral-500',
-          classNames,
-        )}
+        className={mx('dx-fullscreen pointer-events-none touch-none select-none', 'stroke-neutral-500', classNames)}
       >
         {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}
         <defs>
@@ -79,9 +83,3 @@ export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
     );
   },
 );
-
-// TODO(burdon): Use id of parent canvas.
-export const Grid = (props: GridProps) => {
-  const { scale, offset } = useCanvasContext();
-  return <GridComponent {...props} scale={scale} offset={offset} />;
-};

package/src/components/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './Canvas';
+export * from './CellGrid';
 export * from './FPS';
 export * from './Grid';

package/src/hooks/index.ts

@@ -4,4 +4,5 @@
 
 export * from './projection';
 export * from './useCanvasContext';
+export * from './useDrag';
 export * from './useWheel';

package/src/hooks/useDrag.tsx

@@ -0,0 +1,96 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { bind } from 'bind-event-listener';
+import { useEffect, useRef } from 'react';
+
+import { useCanvasContext } from './useCanvasContext';
+
+export type DragOptions = {
+  // TODO(burdon): Add constraints?
+};
+
+/**
+ * Handle drag events to update the transform state (offset).
+ */
+export const useDrag = (_options: DragOptions = {}) => {
+  const { root, setProjection } = useCanvasContext();
+
+  // Track drag state.
+  const state = useRef<{
+    panning: boolean;
+    x: number;
+    y: number;
+  }>({ panning: false, x: 0, y: 0 });
+
+  useEffect(() => {
+    if (!root) {
+      return;
+    }
+
+    // TODO(burdon): Use d3-drag?
+    return bind(root, {
+      type: 'pointerdown',
+      listener: (ev: PointerEvent) => {
+        // Only left click.
+        if (ev.button !== 0) {
+          return;
+        }
+
+        if (ev.defaultPrevented) {
+          return;
+        }
+
+        if (ev.target !== root || ev.shiftKey) {
+          return;
+        }
+
+        // Check if clicking on an interactive element?
+        // For now, assume if it bubbled to root, it's fair game unless prevented.
+
+        ev.preventDefault(); // Prevent text selection.
+        root.setPointerCapture(ev.pointerId);
+        state.current = { panning: true, x: ev.clientX, y: ev.clientY };
+
+        const moveUnbind = bind(root, {
+          type: 'pointermove',
+          listener: (ev: PointerEvent) => {
+            if (!state.current.panning) {
+              return;
+            }
+
+            // Calculate delta.
+            const dx = ev.clientX - state.current.x;
+            const dy = ev.clientY - state.current.y;
+
+            state.current.x = ev.clientX;
+            state.current.y = ev.clientY;
+
+            setProjection((prev) => ({
+              ...prev,
+              offset: {
+                x: prev.offset.x + dx,
+                y: prev.offset.y + dy,
+              },
+            }));
+          },
+        });
+
+        const upUnbind = bind(root, {
+          type: 'pointerup',
+          listener: (ev: PointerEvent) => {
+            state.current.panning = false;
+            root.releasePointerCapture(ev.pointerId);
+            moveUnbind();
+            upUnbind();
+            // Clean up lostpointercapture as well?
+          },
+        });
+
+        // Handle cancellation/lost capture just in case?
+        // Using setPointerCapture usually handles this well on the element.
+      },
+    });
+  }, [root]);
+};

package/src/hooks/useWheel.tsx

@@ -6,7 +6,6 @@ import { bindAll } from 'bind-event-listener';
 import { useEffect } from 'react';
 
 import { getRelativePoint } from '../util';
-
 import { getZoomTransform } from './projection';
 import { useCanvasContext } from './useCanvasContext';
 
@@ -34,9 +33,6 @@ export const useWheel = (options: WheelOptions = defaultOptions) => {
         options: { capture: true, passive: false },
         listener: (ev: WheelEvent) => {
           const zooming = isWheelZooming(ev);
-          if (!hasFocus(root) && !zooming) {
-            return;
-          }
 
           ev.preventDefault();
           if (zooming && !options.zoom) {
@@ -82,27 +78,3 @@ const isWheelZooming = (ev: WheelEvent): boolean => {
 
   return false;
 };
-
-const hasFocus = (element: HTMLElement): boolean => {
-  const activeElement = document.activeElement;
-  if (!activeElement) {
-    return false;
-  }
-
-  // Handle shadow DOM.
-  let shadowActive = activeElement;
-  while (shadowActive?.shadowRoot?.activeElement) {
-    shadowActive = shadowActive.shadowRoot.activeElement;
-  }
-
-  // Check if element or any parent has focus.
-  let current: HTMLElement | null = element;
-  while (current) {
-    if (current === activeElement || current === shadowActive) {
-      return true;
-    }
-    current = current.parentElement;
-  }
-
-  return false;
-};

package/src/types.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });
 export const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });

package/src/util/svg.stories.tsx

@@ -2,18 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import type { Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { Arrow, createPath } from './svg';
 import { testId } from './util';
 
 const DefaultStory = () => (
-  <svg className='border border-neutral-500 w-[30rem] h-[400px]'>
+  <svg className='border border-separator w-[30rem] h-[400px]'>
     <defs>
       <Arrow id='arrow-start' classNames='fill-none stroke-red-500' dir='start' />
       <Arrow id='arrow-end' classNames='fill-none stroke-red-500' dir='end' />
@@ -31,15 +29,17 @@ const DefaultStory = () => (
   </svg>
 );
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-canvas/svg',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/util/svg.tsx

@@ -5,7 +5,7 @@
 import React, { type PropsWithChildren, type SVGProps } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type Dimension, type Point } from '../types';