@dxos/react-ui-canvas 0.7.5-main.499c70c

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

@@ -0,0 +1,43 @@
+//
+// 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 { Grid, type GridProps } from './Grid';
+import { type ProjectionState } from '../../hooks';
+import { useWheel } from '../../hooks';
+
+const Render = (props: GridProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
+  useWheel(ref.current, setProjection);
+
+  return (
+    <div ref={ref} className='grow'>
+      <Grid scale={scale} offset={offset} {...props} />
+    </div>
+  );
+};
+
+const meta: Meta<GridProps> = {
+  title: 'ui/react-ui-canvas/Grid',
+  component: Grid,
+  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,61 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { forwardRef, useMemo } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Point } from '../../types';
+import { GridPattern, testId } from '../../util';
+
+const gridRatios = [1 / 4, 1, 4, 16];
+
+const defaultOffset: Point = { x: 0, y: 0 };
+
+const createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;
+
+export type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;
+
+export const Grid = forwardRef<SVGSVGElement, GridProps>(
+  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {
+    const grids = useMemo(
+      () =>
+        gridRatios
+          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))
+          .filter(({ size }) => size >= gridSize && size <= 256),
+      [gridSize, scale],
+    );
+
+    return (
+      <svg
+        {...testId('dx-canvas-grid')}
+        ref={forwardedRef}
+        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(parentId, id)} offset={offset} size={size} />
+          ))}
+        </defs>
+        <g>
+          {grids.map(({ id }, i) => (
+            <rect
+              key={id}
+              opacity={0.1 + i * 0.05}
+              fill={`url(#${createId(parentId, id)})`}
+              width='100%'
+              height='100%'
+            />
+          ))}
+        </g>
+      </svg>
+    );
+  },
+);

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 './useProjection';
+export * from './useWheel';

package/src/hooks/projection.tsx

@@ -0,0 +1,149 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as d3 from 'd3';
+import {
+  type Matrix,
+  applyToPoints,
+  compose,
+  inverse,
+  translate as translateMatrix,
+  identity,
+  scale as scaleMatrix,
+} from 'transformation-matrix';
+
+import { type Point, type Dimension } from '../types';
+
+export const defaultOffset: Point = { x: 0, y: 0 };
+
+// TODO(burdon): Rotation also?
+export type ProjectionState = {
+  scale: number;
+  offset: Point;
+};
+
+// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,
+//  vs. a reactive object that can trigger updates?
+
+/**
+ * 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 = defaultOffset;
+  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(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));
+    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 }));
+    });
+};
+
+/**
+ * Zoom to new scale and position.
+ */
+// TODO(burdon): Convert to object.
+export const zoomTo = (
+  setTransform: (state: ProjectionState) => void,
+  current: ProjectionState,
+  next: ProjectionState,
+  delay = 200,
+) => {
+  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 } });
+    });
+};

package/src/hooks/useProjection.tsx

@@ -0,0 +1,28 @@
+//
+// 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;
+  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 useProjection = (): CanvasContext => {
+  return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));
+};

package/src/hooks/useWheel.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { bindAll } from 'bind-event-listener';
+import { type Dispatch, type SetStateAction, useEffect } from 'react';
+
+import { getZoomTransform, type ProjectionState } from './projection';
+import { getRelativePoint } from '../util';
+
+/**
+ * Handle wheel events to update the transform state (zoom and offset).
+ */
+export const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {
+  useEffect(() => {
+    if (!el) {
+      return;
+    }
+
+    return bindAll(el, [
+      {
+        type: 'wheel',
+        options: { capture: true, passive: false },
+        listener: (ev: WheelEvent) => {
+          ev.preventDefault();
+
+          // Zoom or pan.
+          if (ev.ctrlKey) {
+            if (!el) {
+              return;
+            }
+
+            // Keep centered while zooming.
+            setProjection(({ scale, offset }) => {
+              const pos = getRelativePoint(el, ev);
+              const scaleSensitivity = 0.01;
+              const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);
+              return getZoomTransform({ scale, offset, newScale, pos });
+            });
+          } else {
+            setProjection(({ scale, offset: { x, y } }) => {
+              return {
+                scale,
+                offset: {
+                  x: x - ev.deltaX,
+                  y: y - ev.deltaY,
+                },
+              };
+            });
+          }
+        },
+      },
+    ]);
+  }, [el, setProjection]);
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './util';

package/src/types.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S } from '@dxos/effect';
+
+export const Point = S.Struct({ x: S.Number, y: S.Number });
+export const Dimension = S.Struct({ width: S.Number, height: S.Number });
+export const Rect = S.extend(Point, Dimension);
+
+export type Point = S.Schema.Type<typeof Point>;
+export type Dimension = S.Schema.Type<typeof Dimension>;
+export type Rect = S.Schema.Type<typeof Rect>;

package/src/util/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './svg';
+export * from './util';

package/src/util/svg.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Meta } from '@storybook/react';
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Arrow, createPath } from './svg';
+import { testId } from './util';
+
+const Render = () => (
+  <svg className='border border-neutral-500 w-[400px] 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' />
+    </defs>
+    <path
+      {...testId('dx-storybook', true)}
+      className={'stroke-red-500'}
+      d={createPath([
+        { x: 100, y: 300 },
+        { x: 300, y: 100 },
+      ])}
+      markerStart={'url(#arrow-start)'}
+      markerEnd={'url(#arrow-end)'}
+    />
+  </svg>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-canvas/svg',
+  render: Render,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export const Default = {};

package/src/util/svg.tsx

@@ -0,0 +1,131 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, type SVGProps } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Dimension, type Point } from '../types';
+
+// Refs
+//  - https://airbnb.io/visx/gallery
+//  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts
+
+export const createPath = (points: Point[], join = false) => {
+  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');
+};
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+ * NOTE: Leave space around shape for line width.
+ */
+export const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {
+  return (
+    <>
+      <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />
+      <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />
+      <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />
+      <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />
+      <Marker id={`${id}-circle`} pos={{ x: 6, y: 6 }} size={{ width: 12, height: 12 }}>
+        <circle cx={6} cy={6} r={5} stroke={'context-stroke'} className={mx(classNames)} />
+      </Marker>
+    </>
+  );
+};
+
+export type MarkerProps = SVGProps<SVGMarkerElement> &
+  PropsWithChildren<
+    ThemedClassName<{
+      id: string;
+      pos: Point;
+      size: Dimension;
+      fill?: boolean;
+    }>
+  >;
+
+/**
+ * https://www.w3.org/TR/SVG2/painting.html#Markers
+ */
+export const Marker = ({
+  id,
+  className,
+  children,
+  pos: { x: refX, y: refY },
+  size: { width: markerWidth, height: markerHeight },
+  fill,
+  ...rest
+}: MarkerProps) => (
+  <marker
+    id={id}
+    className={className}
+    {...{
+      refX,
+      refY,
+      markerWidth,
+      markerHeight,
+      markerUnits: 'strokeWidth',
+      orient: 'auto',
+      ...rest,
+    }}
+  >
+    {children}
+  </marker>
+);
+
+export const Arrow = ({
+  classNames,
+  id,
+  size = 16,
+  dir = 'end',
+  closed = false,
+}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (
+  <Marker
+    id={id}
+    size={{ width: size, height: size }}
+    pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}
+  >
+    <path
+      fill={closed ? undefined : 'none'}
+      stroke={'context-stroke'}
+      className={mx(classNames)}
+      d={createPath(
+        dir === 'end'
+          ? [
+              { x: 1, y: 1 },
+              { x: size, y: size / 2 },
+              { x: 1, y: size - 1 },
+            ]
+          : [
+              { x: size - 1, y: 1 },
+              { x: 0, y: size / 2 },
+              { x: size - 1, y: size - 1 },
+            ],
+        closed,
+      )}
+    />
+  </Marker>
+);
+
+export const GridPattern = ({
+  classNames,
+  id,
+  size,
+  offset,
+}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (
+  <pattern
+    id={id}
+    x={(size / 2 + offset.x) % size}
+    y={(size / 2 + offset.y) % size}
+    width={size}
+    height={size}
+    patternUnits='userSpaceOnUse'
+  >
+    {/* TODO(burdon): vars. */}
+    <g className={mx(classNames)}>
+      <line x1={0} y1={size / 2} x2={size} y2={size / 2} />
+      <line x1={size / 2} y1={0} x2={size / 2} y2={size} />
+    </g>
+  </pattern>
+);

package/src/util/util.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+let logged = false;
+
+/**
+ * Get the relative point of the cursor.
+ * NOTE: ev.offset returns the position relative to the target.
+ */
+export const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {
+  const rect = el.getBoundingClientRect();
+  return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };
+};
+
+/**
+ *
+ */
+// TODO(burdon): Factor out.
+export const testId = <ID = string>(id: ID, inspect = false) => {
+  if (inspect) {
+    if (!logged) {
+      // eslint-disable-next-line no-console
+      console.log('Open storybook in expanded window;\nthen run INSPECT()');
+      logged = true;
+    }
+
+    (window as any).INSPECT = () => {
+      const el = document.querySelector(`[data-test-id="${id}"]`);
+      (window as any).inspect(el);
+      // eslint-disable-next-line no-console
+      console.log(el);
+    };
+  }
+
+  return { [DATA_TEST_ID]: id };
+};
+
+export const DATA_TEST_ID = 'data-test-id';