@dxos/react-ui-canvas 0.8.4-staging.ac66bdf99f → 0.9.0

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/Grid/Grid.stories.tsx

@@ -15,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>
   );

package/src/components/index.ts

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