@dxos/react-ui-canvas 0.7.5-feature-compute.4d9d99a

package/src/components/Canvas/Canvas.stories.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Canvas } from './Canvas';
+import { useCanvasContext, useWheel } from '../../hooks';
+import { type Point } from '../../types';
+import { testId } from '../../util';
+import { Grid, type GridProps } from '../Grid';
+
+const size = 128;
+
+const points: Point[] = [0, (2 * Math.PI) / 3, (2 * Math.PI * 2) / 3].map((a, i) => ({
+  x: Math.round(Math.cos(a - Math.PI / 2) * size * 1.5),
+  y: Math.round(Math.sin(a - Math.PI / 2) * size * 1.5),
+}));
+
+const Render = (props: GridProps) => {
+  return (
+    <Canvas>
+      <Grid {...props} />
+      <Content />
+    </Canvas>
+  );
+};
+
+const TwoCanvases = (props: GridProps) => {
+  return (
+    <div className='grid grid-cols-2 gap-2 w-full h-full'>
+      <div className='h-full relative'>
+        <Canvas>
+          <Grid {...props} />
+          <Content />
+        </Canvas>
+      </div>
+      <div className='h-full relative'>
+        <Canvas>
+          <Grid {...props} />
+          <Content />
+        </Canvas>
+      </div>
+    </div>
+  );
+};
+
+const Content = () => {
+  useWheel();
+  return (
+    <div>
+      {points.map(({ x, y }, i) => (
+        <Item key={i} x={x} y={y} />
+      ))}
+    </div>
+  );
+};
+
+const Item = (p: Point) => {
+  const { projection } = useCanvasContext();
+  const r = (projection.scale * size) / 2;
+  const [{ x, y }] = projection.toScreen([p]);
+  const rect = {
+    left: x - size / 2,
+    top: y - size / 2,
+    width: size,
+    height: size,
+  };
+
+  return (
+    <div {...testId('dx-test', true)}>
+      <div className='absolute flex justify-center items-center' style={rect}>
+        <div className='font-mono'>
+          ({p.x},{p.y})
+        </div>
+      </div>
+
+      {/* NOTE: Width and height are not important since overflow-visible. */}
+      <svg className='absolute overflow-visible'>
+        <circle cx={x} cy={y} r={r} className='stroke-red-500 storke-width-2 fill-none' />
+      </svg>
+    </div>
+  );
+};
+
+const meta: Meta<GridProps> = {
+  title: 'ui/react-ui-canvas/Canvas',
+  component: Grid,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+export default meta;
+
+type Story = StoryObj<GridProps>;
+
+export const Default: Story = {
+  args: { size: 16 },
+};
+
+export const SideBySide: Story = {
+  args: { size: 16 },
+  render: TwoCanvases,
+};

package/src/components/Canvas/Canvas.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, {
+  type CSSProperties,
+  type HTMLAttributes,
+  type PropsWithChildren,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';
+
+export interface CanvasController {
+  setProjection(projection: ProjectionState): Promise<void>;
+}
+
+export type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;
+
+/**
+ * Root canvas component.
+ * Manages CSS projection.
+ */
+export const Canvas = forwardRef<CanvasController, CanvasProps>(
+  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
+    // Size.
+    const { ref, width = 0, height = 0 } = useResizeDetector();
+
+    // Ready when initially resized.
+    const [ready, setReady] = useState(false);
+
+    // Projection.
+    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });
+    useEffect(() => {
+      if (width && height && offset === defaultOrigin) {
+        setProjection({ scale, offset: { x: width / 2, y: height / 2 } });
+      }
+    }, [width, height, scale, offset]);
+
+    // Projection mapper.
+    const projection = useMemo(() => new ProjectionMapper(), []);
+    useEffect(() => {
+      projection.update({ width, height }, scale, offset);
+      if (offset !== defaultOrigin) {
+        setReady(true);
+      }
+    }, [projection, scale, offset, width, height]);
+
+    // CSS transforms.
+    const styles = useMemo<CSSProperties>(() => {
+      return {
+        // NOTE: Order is important.
+        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+        visibility: width && height ? 'visible' : 'hidden',
+      };
+    }, [scale, offset]);
+
+    // Controller.
+    useImperativeHandle(
+      forwardedRef,
+      () => {
+        return {
+          setProjection: async (projection: ProjectionState) => {
+            setProjection(projection);
+          },
+        };
+      },
+      [ref],
+    );
+
+    return (
+      <CanvasContext.Provider
+        value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}
+      >
+        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>
+          {ready ? children : null}
+        </div>
+      </CanvasContext.Provider>
+    );
+  },
+);

package/src/components/Canvas/index.ts

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

package/src/components/FPS.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+// Adapted from: https://github.com/smplrspace/react-fps-stats
+//
+
+import React, { useEffect, useReducer, useRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type FPSProps = 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>();
+  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 text-xs text-subdued 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/components/Grid/Grid.stories.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useRef, useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { GridComponent, type GridProps } from './Grid';
+import { type ProjectionState } from '../../hooks';
+
+const Render = (props: GridProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [{ scale, offset }] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
+
+  return (
+    <div ref={ref} className='grow'>
+      <GridComponent scale={scale} offset={offset} {...props} />
+    </div>
+  );
+};
+
+const meta: Meta<GridProps> = {
+  title: 'ui/react-ui-canvas/Grid',
+  component: GridComponent,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+export default meta;
+
+type Story = StoryObj<GridProps>;
+
+export const Default: Story = {
+  args: {
+    size: 16,
+  },
+};

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef, useMemo, useId } from 'react';
+
+import { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useCanvasContext } from '../../hooks';
+import { type Point } from '../../types';
+import { GridPattern, testId } from '../../util';
+
+const gridRatios = [1 / 4, 1, 4, 16];
+
+const defaultGridSize = 16;
+const defaultOffset: Point = { x: 0, y: 0 };
+
+const createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;
+
+export type GridProps = ThemedClassName<{
+  size?: number;
+  scale?: number;
+  offset?: Point;
+  showAxes?: boolean;
+}>;
+
+export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
+  (
+    { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },
+    forwardedRef,
+  ) => {
+    const svgRef = useForwardedRef(forwardedRef);
+    const instanceId = useId();
+    const grids = useMemo(
+      () =>
+        gridRatios
+          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))
+          .filter(({ size }) => size >= gridSize && size <= 256),
+      [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,
+        )}
+      >
+        {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}
+        <defs>
+          {grids.map(({ id, size }) => (
+            <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />
+          ))}
+        </defs>
+        {showAxes && (
+          <>
+            <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />
+            <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />
+          </>
+        )}
+        <g>
+          {grids.map(({ id }, i) => (
+            <rect
+              key={id}
+              opacity={0.1 + i * 0.05}
+              fill={`url(#${createId(instanceId, id)})`}
+              width='100%'
+              height='100%'
+            />
+          ))}
+        </g>
+      </svg>
+    );
+  },
+);
+
+// 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/Grid/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Canvas';
+export * from './FPS';
+export * from './Grid';

package/src/hooks/index.ts

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

package/src/hooks/projection.tsx

@@ -0,0 +1,156 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as d3 from 'd3';
+import {
+  type Matrix,
+  applyToPoints,
+  compose,
+  identity,
+  inverse,
+  scale as scaleMatrix,
+  translate as translateMatrix,
+} from 'transformation-matrix';
+
+import { type Point, type Dimension } from '../types';
+
+export const defaultOrigin: Point = { x: 0, y: 0 };
+
+// TODO(burdon): Rotation also?
+export type ProjectionState = {
+  scale: number;
+  offset: Point;
+};
+
+/**
+ * Maps between screen and model coordinates.
+ */
+export interface Projection {
+  get bounds(): Dimension;
+  get scale(): number;
+  get offset(): Point;
+
+  /**
+   * Maps the model space to the screen offset (from the top-left of the element).
+   */
+  toScreen(points: Point[]): Point[];
+
+  /**
+   * Maps the pointer coordinate (from the top-left of the element) to the model space.
+   */
+  toModel(points: Point[]): Point[];
+}
+
+export class ProjectionMapper implements Projection {
+  private _bounds: Dimension = { width: 0, height: 0 };
+  private _scale: number = 1;
+  private _offset: Point = defaultOrigin;
+  private _toScreen: Matrix = identity();
+  private _toModel: Matrix = identity();
+
+  constructor(bounds?: Dimension, scale?: number, offset?: Point) {
+    if (bounds && scale && offset) {
+      this.update(bounds, scale, offset);
+    }
+  }
+
+  update(bounds: Dimension, scale: number, offset: Point) {
+    this._bounds = bounds;
+    this._scale = scale;
+    this._offset = offset;
+    this._toScreen = compose(
+      // NOTE: Order is important.
+      translateMatrix(this._offset.x, this._offset.y),
+      scaleMatrix(this._scale),
+      // TODO(burdon): Flip.
+      // flipX(),
+    );
+    this._toModel = inverse(this._toScreen);
+    return this;
+  }
+
+  get bounds() {
+    return this._bounds;
+  }
+
+  get scale() {
+    return this._scale;
+  }
+
+  get offset() {
+    return this._offset;
+  }
+
+  toScreen(points: Point[]): Point[] {
+    return applyToPoints(this._toScreen, points);
+  }
+
+  toModel(points: Point[]): Point[] {
+    return applyToPoints(this._toModel, points);
+  }
+}
+
+/**
+ * Maintain position while zooming.
+ */
+export const getZoomTransform = ({
+  scale,
+  offset,
+  pos,
+  newScale,
+}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {
+  return {
+    scale: newScale,
+    offset: {
+      x: pos.x - (pos.x - offset.x) * (newScale / scale),
+      y: pos.y - (pos.y - offset.y) * (newScale / scale),
+    },
+  };
+};
+
+/**
+ * Zoom while keeping the specified position in place.
+ */
+// TODO(burdon): Convert to object.
+export const zoomInPlace = (
+  setTransform: (state: ProjectionState) => void,
+  pos: Point,
+  offset: Point,
+  current: number,
+  next: number,
+  delay = 200,
+) => {
+  const is = d3.interpolate(current, next);
+  d3.transition()
+    .ease(d3.easeSinOut)
+    .duration(delay)
+    .tween('zoom', () => (t) => {
+      const newScale = is(t);
+      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));
+    });
+};
+
+const noop = () => {};
+
+/**
+ * Zoom to new scale and position.
+ */
+// TODO(burdon): Convert to object.
+export const zoomTo = (
+  setTransform: (state: ProjectionState) => void,
+  current: ProjectionState,
+  next: ProjectionState,
+  delay = 200,
+  cb = noop,
+) => {
+  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });
+  d3.transition()
+    .ease(d3.easeSinOut)
+    .duration(delay)
+    .tween('zoom', () => (t) => {
+      const { scale, x, y } = is(t);
+      setTransform({ scale, offset: { x, y } });
+    })
+    .on('end', cb);
+};

package/src/hooks/useCanvasContext.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+
+import { type Projection, type ProjectionState } from './projection';
+
+export type CanvasContext = ProjectionState & {
+  root: HTMLDivElement;
+  ready: boolean;
+  width: number;
+  height: number;
+  styles: CSSProperties;
+  projection: Projection;
+  setProjection: Dispatch<SetStateAction<ProjectionState>>;
+};
+
+/**
+ * @internal
+ */
+// TODO(burdon): Use radix?
+export const CanvasContext = createContext<CanvasContext | null>(null);
+
+export const useCanvasContext = (): CanvasContext => {
+  return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));
+};