@dxos/react-ui-canvas 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e

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';
+
+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

@@ -73,12 +73,12 @@ 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,
       )}
     >
       <div>{fps[len - 1]} FPS</div>
-      <div className='is-full relative' style={{ height }}>
+      <div className='w-full relative' style={{ height }}>
         {fps.map((frame, i) => (
           <div
             key={`fps-${i}`}

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

@@ -5,10 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type ProjectionState } from '../../hooks';
-
 import { GridComponent, type GridProps } from './Grid';
 
 const DefaultStory = (props: GridProps) => {
@@ -16,7 +15,7 @@ const DefaultStory = (props: GridProps) => {
   const [{ scale, offset }] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
 
   return (
-    <div role='none' ref={ref} className='grow'>
+    <div ref={ref} className='grow'>
       <GridComponent scale={scale} offset={offset} {...props} />
     </div>
   );
@@ -26,7 +25,7 @@ const meta = {
   title: 'ui/react-ui-canvas/Grid',
   component: GridComponent,
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Grid/Grid.tsx

@@ -54,11 +54,7 @@ export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
       <svg
         {...testId('dx-canvas-grid')}
         ref={svgRef}
-        className={mx(
-          'absolute inset-0 is-full bs-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>

package/src/components/index.ts

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

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';
 

package/src/util/svg.stories.tsx

@@ -11,7 +11,7 @@ import { Arrow, createPath } from './svg';
 import { testId } from './util';
 
 const DefaultStory = () => (
-  <svg className='border border-separator is-[30rem] bs-[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' />