@dxos/react-ui-canvas 0.13.0 → 0.14.0

package/src/archive/hooks/projection.tsx

@@ -1,156 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { easeSinOut, interpolate, interpolateObject, transition } from 'd3';
-import {
-  type Matrix,
-  applyToPoints,
-  compose,
-  identity,
-  inverse,
-  scale as scaleMatrix,
-  translate as translateMatrix,
-} from 'transformation-matrix';
-
-import { type Dimension, type Point } from '../types.ts';
-
-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 {
-    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 = interpolate(current, next);
-  transition()
-    .ease(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 = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });
-  transition()
-    .ease(easeSinOut)
-    .duration(delay)
-    .tween('zoom', () => (t) => {
-      const { scale, x, y } = is(t);
-      setTransform({ scale, offset: { x, y } });
-    })
-    .on('end', cb);
-};

package/src/archive/hooks/useCanvasContext.ts

@@ -1,32 +0,0 @@
-//
-// 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.tsx';
-
-// Kept out of the canvas components: react-refresh only fast-refreshes a module whose exports are all
-// components, so a context and hook exported beside one force a full page reload on every edit.
-
-export type CanvasContext = ProjectionState & {
-  root: HTMLDivElement;
-  ready: boolean;
-  width: number;
-  height: number;
-  styles: CSSProperties;
-  projection: Projection;
-  setProjection: Dispatch<SetStateAction<ProjectionState>>;
-};
-
-/**
- * @internal
- */
-// TODO(burdon): Use `createContext` from `@dxos/react-hooks`?
-export const CanvasContext = createContext<CanvasContext | null>(null);
-
-export const useCanvasContext = (): CanvasContext => {
-  return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));
-};

package/src/archive/hooks/useDrag.tsx

@@ -1,96 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { bind } from 'bind-event-listener';
-import { useEffect, useRef } from 'react';
-
-import { useCanvasContext } from './useCanvasContext.ts';
-
-export type DragOptions = {
-  // TODO(burdon): Add constraints?
-};
-
-/**
- * Handle drag events to update the transform state (offset).
- */
-export const useDrag = (_options: DragOptions = {}) => {
-  const { root, setProjection } = useCanvasContext();
-
-  // Track drag state.
-  const state = useRef<{
-    panning: boolean;
-    x: number;
-    y: number;
-  }>({ panning: false, x: 0, y: 0 });
-
-  useEffect(() => {
-    if (!root) {
-      return;
-    }
-
-    // TODO(burdon): Use d3-drag?
-    return bind(root, {
-      type: 'pointerdown',
-      listener: (ev: PointerEvent) => {
-        // Only left click.
-        if (ev.button !== 0) {
-          return;
-        }
-
-        if (ev.defaultPrevented) {
-          return;
-        }
-
-        if (ev.target !== root || ev.shiftKey) {
-          return;
-        }
-
-        // Check if clicking on an interactive element?
-        // For now, assume if it bubbled to root, it's fair game unless prevented.
-
-        ev.preventDefault(); // Prevent text selection.
-        root.setPointerCapture(ev.pointerId);
-        state.current = { panning: true, x: ev.clientX, y: ev.clientY };
-
-        const moveUnbind = bind(root, {
-          type: 'pointermove',
-          listener: (ev: PointerEvent) => {
-            if (!state.current.panning) {
-              return;
-            }
-
-            // Calculate delta.
-            const dx = ev.clientX - state.current.x;
-            const dy = ev.clientY - state.current.y;
-
-            state.current.x = ev.clientX;
-            state.current.y = ev.clientY;
-
-            setProjection((prev) => ({
-              ...prev,
-              offset: {
-                x: prev.offset.x + dx,
-                y: prev.offset.y + dy,
-              },
-            }));
-          },
-        });
-
-        const upUnbind = bind(root, {
-          type: 'pointerup',
-          listener: (ev: PointerEvent) => {
-            state.current.panning = false;
-            root.releasePointerCapture(ev.pointerId);
-            moveUnbind();
-            upUnbind();
-            // Clean up lostpointercapture as well?
-          },
-        });
-
-        // Handle cancellation/lost capture just in case?
-        // Using setPointerCapture usually handles this well on the element.
-      },
-    });
-  }, [root]);
-};

package/src/archive/hooks/useWheel.tsx

@@ -1,80 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { bindAll } from 'bind-event-listener';
-import { useEffect } from 'react';
-
-import { getRelativePoint } from '../util/index.ts';
-import { getZoomTransform } from './projection.tsx';
-import { useCanvasContext } from './useCanvasContext.ts';
-
-export type WheelOptions = {
-  zoom?: boolean;
-};
-
-const defaultOptions: WheelOptions = {
-  zoom: true,
-};
-
-/**
- * Handle wheel events to update the transform state (zoom and offset).
- */
-export const useWheel = (options: WheelOptions = defaultOptions) => {
-  const { root, setProjection } = useCanvasContext();
-  useEffect(() => {
-    if (!root) {
-      return;
-    }
-
-    return bindAll(root, [
-      {
-        type: 'wheel',
-        options: { capture: true, passive: false },
-        listener: (ev: WheelEvent) => {
-          const zooming = isWheelZooming(ev);
-
-          ev.preventDefault();
-          if (zooming && !options.zoom) {
-            return;
-          }
-
-          // Zoom or pan.
-          if (ev.ctrlKey) {
-            if (!root) {
-              return;
-            }
-
-            // Keep centered while zooming.
-            setProjection(({ scale, offset }) => {
-              const pos = getRelativePoint(root, 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,
-                },
-              };
-            });
-          }
-        },
-      },
-    ]);
-  }, [root]);
-};
-
-const isWheelZooming = (ev: WheelEvent): boolean => {
-  // Check for ctrl/cmd key + wheel action.
-  if (ev.ctrlKey || ev.metaKey) {
-    // Some browsers use deltaY, others deltaZ for zoom.
-    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;
-  }
-
-  return false;
-};

package/src/archive/index.ts

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

package/src/archive/types.ts

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

package/src/archive/util/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './svg.tsx';
-export * from './svg-path.ts';
-export * from './util.ts';

package/src/archive/util/svg-path.ts

@@ -1,13 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Point } from '../types.ts';
-
-// Kept out of `svg.tsx`: react-refresh only fast-refreshes a module whose exports are all components,
-// so a helper exported beside them forces a full page reload on every edit.
-
-/** https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
-export const createPath = (points: Point[], join = false) => {
-  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');
-};

package/src/archive/util/svg.stories.tsx

@@ -1,46 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { createPath } from './svg-path.ts';
-import { Arrow } from './svg.tsx';
-import { testId } from './util.ts';
-
-const DefaultStory = () => (
-  <svg className='border border-separator w-[30rem] 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 = {
-  title: 'ui/react-ui-canvas/svg',
-  render: DefaultStory,
-  decorators: [withTheme()],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/archive/util/svg.tsx

@@ -1,128 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type PropsWithChildren, type SVGProps } from 'react';
-
-import type * as Util from '@dxos/react-ui/Util';
-import { mx } from '@dxos/ui-theme';
-
-import { type Dimension, type Point } from '../types.ts';
-import { createPath } from './svg-path.ts';
-
-// Refs
-//  - https://airbnb.io/visx/gallery
-//  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts
-
-/**
- * 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 }: Util.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: 8, y: 8 }} size={{ width: 16, height: 16 }}>
-        <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />
-      </Marker>
-    </>
-  );
-};
-
-export type MarkerProps = SVGProps<SVGMarkerElement> &
-  PropsWithChildren<
-    Util.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,
-}: Util.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,
-}: Util.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/archive/util/util.ts

@@ -1,50 +0,0 @@
-//
-// 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 inspectElement = (el: Element) => {
-  (window as any).INSPECT = () => {
-    (window as any).inspect(el);
-    (window as any).element = el;
-    // eslint-disable-next-line no-console
-    console.log('Open storybook in expanded window;\nthen run INSPECT()');
-    // eslint-disable-next-line no-console
-    console.log(el);
-  };
-};
-
-export const DATA_TEST_ID = 'data-test-id';

package/src/scene.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-// The scene engine, exported as `@dxos/react-ui-canvas/scene` until it replaces the archived canvas.
-export * from './components/index.ts';
-export * from './hooks/index.ts';
-export * from './model/index.ts';
-export * from './utils/index.ts';