@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/archive/components/CellGrid/input/wheel.ts

@@ -1,68 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import type * as Registry from 'effect/reactivity/AtomRegistry';
-
-import type { CellGridAtoms } from '../state/atoms.ts';
-import type { Headers } from '../state/types.ts';
-import { cellWidth } from '../state/viewport.ts';
-
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 8;
-
-export type WheelControllerOptions<T> = {
-  registry: Registry.AtomRegistry;
-  atoms: CellGridAtoms<T>;
-  headers: Headers;
-};
-
-/**
- * Attach wheel handlers. Vertical wheel scrolls y; shift+wheel scrolls x;
- * cmd/ctrl+wheel zooms x around the cursor.
- */
-export const attachWheelHandlers = <T>(
-  element: HTMLElement,
-  { registry, atoms, headers }: WheelControllerOptions<T>,
-): (() => void) => {
-  const onWheel = (event: WheelEvent) => {
-    if (event.ctrlKey || event.metaKey) {
-      event.preventDefault();
-      // Zoom around cursor x.
-      const rect = element.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      const factor = Math.exp(-event.deltaY / 200);
-      registry.update(atoms.viewport, (current) => {
-        const nextZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, current.zoomX * factor));
-        if (nextZoom === current.zoomX) {
-          return current;
-        }
-        const w = cellWidth(current);
-        const worldX = (x - headers.left + current.scrollX) / w;
-        const nextW = current.baseCellWidth * nextZoom;
-        const nextScrollX = Math.max(0, worldX * nextW - (x - headers.left));
-        return { ...current, zoomX: nextZoom, scrollX: nextScrollX };
-      });
-      return;
-    }
-
-    const dx = event.shiftKey ? event.deltaY : event.deltaX;
-    const dy = event.shiftKey ? 0 : event.deltaY;
-    const current = registry.get(atoms.viewport);
-    const nextScrollX = Math.max(0, current.scrollX + dx);
-    const nextScrollY = Math.max(0, current.scrollY + dy);
-
-    // Only consume the wheel event if we're actually scrolling within the grid.
-    // When the user wheels up at the top (scrollY === 0 && dy < 0) or wheels left
-    // at the left edge, let the event bubble to the parent so the page or
-    // enclosing container can scroll instead of swallowing the gesture.
-    if (nextScrollX === current.scrollX && nextScrollY === current.scrollY) {
-      return;
-    }
-    event.preventDefault();
-    registry.set(atoms.viewport, { ...current, scrollX: nextScrollX, scrollY: nextScrollY });
-  };
-
-  element.addEventListener('wheel', onWheel, { passive: false });
-  return () => element.removeEventListener('wheel', onWheel);
-};

package/src/archive/components/CellGrid/render/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-export * from './overlay-layer.ts';
-export * from './static-layer.ts';

package/src/archive/components/CellGrid/render/overlay-layer.ts

@@ -1,66 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import type { Headers, Selection, Viewport } from '../state/types.ts';
-import { cellWidth, worldToScreen } from '../state/viewport.ts';
-
-export type OverlayStyle = {
-  playhead: string;
-  selectionFill: string;
-  selectionStroke: string;
-};
-
-export type DrawOverlayOptions = {
-  ctx: CanvasRenderingContext2D;
-  size: { width: number; height: number };
-  viewport: Viewport;
-  headers: Headers;
-  selection: Selection;
-  /** Playhead position in world units (col + fraction), or null when not playing. */
-  playhead: number | null;
-  style: OverlayStyle;
-};
-
-export const drawOverlay = ({ ctx, size, viewport, headers, selection, playhead, style }: DrawOverlayOptions): void => {
-  ctx.clearRect(0, 0, size.width, size.height);
-
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(headers.left, headers.top, size.width - headers.left, size.height - headers.top);
-  ctx.clip();
-
-  // Selection rectangle.
-  if (selection.range) {
-    const { col0, row0, col1, row1 } = selection.range;
-    const minCol = Math.min(col0, col1);
-    const maxCol = Math.max(col0, col1);
-    const minRow = Math.min(row0, row1);
-    const maxRow = Math.max(row0, row1);
-    const tl = worldToScreen(viewport, headers, { col: minCol, row: minRow });
-    const br = worldToScreen(viewport, headers, { col: maxCol + 1, row: maxRow + 1 });
-    ctx.fillStyle = style.selectionFill;
-    ctx.fillRect(tl.x, tl.y, br.x - tl.x, br.y - tl.y);
-    ctx.strokeStyle = style.selectionStroke;
-    ctx.setLineDash([4, 3]);
-    ctx.lineWidth = 1;
-    ctx.strokeRect(tl.x + 0.5, tl.y + 0.5, br.x - tl.x - 1, br.y - tl.y - 1);
-    ctx.setLineDash([]);
-  }
-
-  // Playhead.
-  if (playhead !== null) {
-    const w = cellWidth(viewport);
-    const x = headers.left + playhead * w - viewport.scrollX;
-    if (x >= headers.left && x <= size.width) {
-      ctx.strokeStyle = style.playhead;
-      ctx.lineWidth = 2;
-      ctx.beginPath();
-      ctx.moveTo(x, headers.top);
-      ctx.lineTo(x, size.height);
-      ctx.stroke();
-    }
-  }
-
-  ctx.restore();
-};

package/src/archive/components/CellGrid/render/static-layer.ts

@@ -1,112 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import type { Cell, Headers, Row, Viewport } from '../state/types.ts';
-import { cellWidth, visibleCellRange, visibleCells, worldToScreen } from '../state/viewport.ts';
-
-export type RenderCellArgs<T> = {
-  ctx: CanvasRenderingContext2D;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  cell: Cell<T>;
-};
-
-export type RenderCell<T = unknown> = (args: RenderCellArgs<T>) => void;
-
-export type StaticLayerStyle = {
-  /** Grid line color, e.g. 'rgba(0,0,0,0.08)'. */
-  gridLine: string;
-  /** Row band fill (alternating), e.g. 'rgba(0,0,0,0.02)'. */
-  rowBand?: string;
-  background?: string;
-};
-
-export type DrawCellsOptions<T> = {
-  ctx: CanvasRenderingContext2D;
-  size: { width: number; height: number };
-  viewport: Viewport;
-  headers: Headers;
-  rows: ReadonlyArray<Row>;
-  cells: ReadonlyMap<string, Cell<T>>;
-  renderCell: RenderCell<T>;
-  style: StaticLayerStyle;
-};
-
-/**
- * Paint the static layer: background, gridlines, alternating row bands, and cells.
- * Pure with respect to its inputs (writes only to the supplied ctx).
- */
-export const drawCells = <T>({
-  ctx,
-  size,
-  viewport,
-  headers,
-  rows,
-  cells,
-  renderCell,
-  style,
-}: DrawCellsOptions<T>): void => {
-  ctx.clearRect(0, 0, size.width, size.height);
-
-  if (style.background) {
-    ctx.fillStyle = style.background;
-    ctx.fillRect(0, 0, size.width, size.height);
-  }
-
-  const range = visibleCellRange(viewport, headers, size);
-  const w = cellWidth(viewport);
-  const h = viewport.cellHeight;
-
-  // Row bands. Paint odd rows so the stripe pattern matches the TrackHeader's
-  // label backgrounds (which darken odd row indices) — keeps the frozen left
-  // column and the cell area visually in lockstep.
-  if (style.rowBand) {
-    ctx.fillStyle = style.rowBand;
-    for (let row = range.minRow; row <= Math.min(range.maxRow, rows.length - 1); row++) {
-      if (row % 2 === 0) {
-        continue;
-      }
-      const y = headers.top + row * h - viewport.scrollY;
-      ctx.fillRect(headers.left, y, size.width - headers.left, h);
-    }
-  }
-
-  // Gridlines.
-  ctx.strokeStyle = style.gridLine;
-  ctx.lineWidth = 1;
-  ctx.beginPath();
-  for (let col = range.minCol; col <= range.maxCol + 1; col++) {
-    const x = Math.floor(headers.left + col * w - viewport.scrollX) + 0.5;
-    if (x < headers.left) {
-      continue;
-    }
-    ctx.moveTo(x, headers.top);
-    ctx.lineTo(x, size.height);
-  }
-  for (let row = range.minRow; row <= Math.min(range.maxRow + 1, rows.length); row++) {
-    const y = Math.floor(headers.top + row * h - viewport.scrollY) + 0.5;
-    if (y < headers.top) {
-      continue;
-    }
-    ctx.moveTo(headers.left, y);
-    ctx.lineTo(size.width, y);
-  }
-  ctx.stroke();
-
-  // Cells.
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(headers.left, headers.top, size.width - headers.left, size.height - headers.top);
-  ctx.clip();
-  for (const cell of visibleCells(cells, range)) {
-    if (cell.row >= rows.length) {
-      continue;
-    }
-    const rect = worldToScreen(viewport, headers, cell);
-    renderCell({ ctx, ...rect, cell });
-  }
-  ctx.restore();
-};

package/src/archive/components/CellGrid/state/atoms.ts

@@ -1,43 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import * as Atom from 'effect/reactivity/Atom';
-
-import type { Cell, Selection, Tool, Viewport } from './types.ts';
-
-export type CellGridAtoms<T = unknown> = {
-  cells: Atom.Writable<ReadonlyMap<string, Cell<T>>>;
-  viewport: Atom.Writable<Viewport>;
-  selection: Atom.Writable<Selection>;
-  playhead: Atom.Writable<number | null>;
-  tool: Atom.Writable<Tool>;
-};
-
-export type CellGridAtomsOptions = {
-  cellWidth?: number;
-  cellHeight?: number;
-};
-
-export const defaultViewport = (options: CellGridAtomsOptions = {}): Viewport => ({
-  scrollX: 0,
-  scrollY: 0,
-  baseCellWidth: options.cellWidth ?? 24,
-  cellHeight: options.cellHeight ?? 24,
-  zoomX: 1,
-});
-
-/**
- * Create a fresh set of atoms backing a CellGrid instance. Consumers may pass any of these as props
- * or substitute their own (e.g., a cells atom backed by ECHO).
- *
- * Atoms are marked keepAlive so they preserve state across transient unsubscribe windows (e.g. React
- * Strict Mode mount-unmount-remount). Consumers are responsible for the atoms' lifetime.
- */
-export const createCellGridAtoms = <T = unknown>(options: CellGridAtomsOptions = {}): CellGridAtoms<T> => ({
-  cells: Atom.keepAlive(Atom.make<ReadonlyMap<string, Cell<T>>>(new Map())),
-  viewport: Atom.keepAlive(Atom.make<Viewport>(defaultViewport(options))),
-  selection: Atom.keepAlive(Atom.make<Selection>({ range: null })),
-  playhead: Atom.keepAlive(Atom.make<number | null>(null)),
-  tool: Atom.keepAlive(Atom.make<Tool>('toggle')),
-});

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

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

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

@@ -1,40 +0,0 @@
-//
-// 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/archive/components/CellGrid/state/viewport.test.ts

@@ -1,50 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { describe, test } from 'vitest';
-
-import { defaultViewport } from './atoms.ts';
-import { hitTestCell, screenToWorld, visibleCellRange, visibleCells, worldToScreen } from './viewport.ts';
-
-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/archive/components/CellGrid/state/viewport.ts

@@ -1,94 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import type { Cell, CellCoord, Headers, Viewport } from './types.ts';
-
-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/archive/components/FPS.tsx

@@ -1,98 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-// Adapted from: https://github.com/smplrspace/react-fps-stats
-//
-
-import React, { useEffect, useReducer, useRef } from 'react';
-
-import type * as Util from '@dxos/react-ui/Util';
-import { mx } from '@dxos/ui-theme';
-
-export type FPSProps = Util.ThemedClassName<{
-  width?: number;
-  height?: number;
-  bar?: string;
-}>;
-
-type State = {
-  max: number;
-  len: number;
-  fps: number[];
-  frames: number;
-  prevTime: number;
-};
-
-const SEC = 1_000;
-
-export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {
-  const [{ fps, max, len }, dispatch] = useReducer(
-    (state: State) => {
-      const currentTime = Date.now();
-      if (currentTime > state.prevTime + SEC) {
-        const nextFPS = [
-          ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),
-          Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),
-        ];
-        return {
-          max: Math.max(state.max, ...nextFPS),
-          len: Math.min(state.len + nextFPS.length, width),
-          fps: [...state.fps, ...nextFPS].slice(-width),
-          frames: 1,
-          prevTime: currentTime,
-        };
-      } else {
-        return { ...state, frames: state.frames + 1 };
-      }
-    },
-    {
-      max: 0,
-      len: 0,
-      fps: [],
-      frames: 0,
-      prevTime: Date.now(),
-    },
-  );
-
-  const requestRef = useRef<number | null>(null);
-  const tick = () => {
-    dispatch();
-    requestRef.current = requestAnimationFrame(tick);
-  };
-
-  useEffect(() => {
-    requestRef.current = requestAnimationFrame(tick);
-    return () => {
-      if (requestRef.current) {
-        cancelAnimationFrame(requestRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      style={{ width: width + 6 }}
-      className={mx(
-        'relative flex flex-col p-0.5',
-        'bg-base-surface text-xs text-fg-subtle font-thin pointer-events-none border border-separator',
-        classNames,
-      )}
-    >
-      <div>{fps[len - 1]} FPS</div>
-      <div className='w-full relative' style={{ height }}>
-        {fps.map((frame, i) => (
-          <div
-            key={`fps-${i}`}
-            className={bar}
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              right: `${len - 1 - i}px`,
-              height: `${(height * frame) / max}px`,
-              width: 1,
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/archive/components/Grid/Grid.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import { GridComponent, type GridProps } from '../../../components/Grid/index.ts';
-import { useCanvasContext } from '../../hooks/index.ts';
-
-export type { GridProps };
-export { GridComponent };
-
-// 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/archive/components/Grid/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './Grid.tsx';

package/src/archive/components/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './Canvas/index.ts';
-export * from './CellGrid/index.ts';
-export * from './FPS.tsx';
-export * from './Grid/index.ts';

package/src/archive/hooks/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './projection.tsx';
-export * from './useCanvasContext.ts';
-export * from './useDrag.tsx';
-export * from './useWheel.tsx';