@dxos/react-ui-canvas 0.8.4-main.c85a9c8dae → 0.8.4-main.d05539e30a

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

@@ -8,7 +8,6 @@ import React, { useRef, useState } from 'react';
 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>
   );

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

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