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

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dxos/react-ui-canvas
+
+Basic canvas with pan and zoom.

package/dist/lib/browser/index.mjs

@@ -0,0 +1,525 @@
+// packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
+import React2, { forwardRef, useEffect as useEffect2, useImperativeHandle, useMemo, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-canvas/src/hooks/projection.tsx
+import * as d3 from "d3";
+import { applyToPoints, compose, inverse, translate as translateMatrix, identity, scale as scaleMatrix } from "transformation-matrix";
+var defaultOffset = {
+  x: 0,
+  y: 0
+};
+var ProjectionMapper = class {
+  constructor(bounds, scale, offset) {
+    this._bounds = {
+      width: 0,
+      height: 0
+    };
+    this._scale = 1;
+    this._offset = defaultOffset;
+    this._toScreen = identity();
+    this._toModel = identity();
+    if (bounds && scale && offset) {
+      this.update(bounds, scale, offset);
+    }
+  }
+  update(bounds, scale, offset) {
+    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) {
+    return applyToPoints(this._toScreen, points);
+  }
+  toModel(points) {
+    return applyToPoints(this._toModel, points);
+  }
+};
+var getZoomTransform = ({ scale, offset, pos, newScale }) => {
+  return {
+    scale: newScale,
+    offset: {
+      x: pos.x - (pos.x - offset.x) * (newScale / scale),
+      y: pos.y - (pos.y - offset.y) * (newScale / scale)
+    }
+  };
+};
+var zoomInPlace = (setTransform, pos, offset, current, next, 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
+    }));
+  });
+};
+var zoomTo = (setTransform, current, next, 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
+      }
+    });
+  });
+};
+
+// packages/ui/react-ui-canvas/src/hooks/useProjection.tsx
+import { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+var CanvasContext = /* @__PURE__ */ createContext(null);
+var useProjection = () => {
+  return useContext(CanvasContext) ?? raise(new Error("Missing CanvasContext"));
+};
+
+// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+import { bindAll } from "bind-event-listener";
+import { useEffect } from "react";
+
+// packages/ui/react-ui-canvas/src/util/svg.tsx
+import React from "react";
+import { mx } from "@dxos/react-ui-theme";
+var createPath = (points, join = false) => {
+  return [
+    "M",
+    points.map(({ x, y }) => `${x},${y}`).join(" L "),
+    join ? "Z" : ""
+  ].join(" ");
+};
+var Markers = ({ id = "dx-marker", classNames }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-arrow-start`,
+    dir: "start",
+    classNames
+  }), /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-arrow-end`,
+    dir: "end",
+    classNames
+  }), /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-triangle-start`,
+    dir: "start",
+    closed: true,
+    classNames
+  }), /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-triangle-end`,
+    dir: "end",
+    closed: true,
+    classNames
+  }), /* @__PURE__ */ React.createElement(Marker, {
+    id: `${id}-circle`,
+    pos: {
+      x: 6,
+      y: 6
+    },
+    size: {
+      width: 12,
+      height: 12
+    }
+  }, /* @__PURE__ */ React.createElement("circle", {
+    cx: 6,
+    cy: 6,
+    r: 5,
+    stroke: "context-stroke",
+    className: mx(classNames)
+  })));
+};
+var Marker = ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }) => /* @__PURE__ */ React.createElement("marker", {
+  id,
+  className,
+  refX,
+  refY,
+  markerWidth,
+  markerHeight,
+  markerUnits: "strokeWidth",
+  orient: "auto",
+  ...rest
+}, children);
+var Arrow = ({ classNames, id, size = 16, dir = "end", closed = false }) => /* @__PURE__ */ React.createElement(Marker, {
+  id,
+  size: {
+    width: size,
+    height: size
+  },
+  pos: dir === "end" ? {
+    x: size,
+    y: size / 2
+  } : {
+    x: 0,
+    y: size / 2
+  }
+}, /* @__PURE__ */ React.createElement("path", {
+  fill: closed ? void 0 : "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)
+}));
+var GridPattern = ({ classNames, id, size, offset }) => /* @__PURE__ */ React.createElement("pattern", {
+  id,
+  x: (size / 2 + offset.x) % size,
+  y: (size / 2 + offset.y) % size,
+  width: size,
+  height: size,
+  patternUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React.createElement("g", {
+  className: mx(classNames)
+}, /* @__PURE__ */ React.createElement("line", {
+  x1: 0,
+  y1: size / 2,
+  x2: size,
+  y2: size / 2
+}), /* @__PURE__ */ React.createElement("line", {
+  x1: size / 2,
+  y1: 0,
+  x2: size / 2,
+  y2: size
+})));
+
+// packages/ui/react-ui-canvas/src/util/util.ts
+var logged = false;
+var getRelativePoint = (el, ev) => {
+  const rect = el.getBoundingClientRect();
+  return {
+    x: ev.clientX - rect.x,
+    y: ev.clientY - rect.top
+  };
+};
+var testId = (id, inspect = false) => {
+  if (inspect) {
+    if (!logged) {
+      console.log("Open storybook in expanded window;\nthen run INSPECT()");
+      logged = true;
+    }
+    window.INSPECT = () => {
+      const el = document.querySelector(`[data-test-id="${id}"]`);
+      window.inspect(el);
+      console.log(el);
+    };
+  }
+  return {
+    [DATA_TEST_ID]: id
+  };
+};
+var DATA_TEST_ID = "data-test-id";
+
+// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+var useWheel = (el, setProjection) => {
+  useEffect(() => {
+    if (!el) {
+      return;
+    }
+    return bindAll(el, [
+      {
+        type: "wheel",
+        options: {
+          capture: true,
+          passive: false
+        },
+        listener: (ev) => {
+          ev.preventDefault();
+          if (ev.ctrlKey) {
+            if (!el) {
+              return;
+            }
+            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
+  ]);
+};
+
+// packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
+var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale = 1, offset: _offset = defaultOffset, ...props }, forwardedRef) => {
+  const { ref, width = 0, height = 0 } = useResizeDetector();
+  const [{ scale, offset }, setProjection] = useState({
+    scale: _scale,
+    offset: _offset
+  });
+  useEffect2(() => {
+    if (width && height && offset === defaultOffset) {
+      setProjection({
+        scale,
+        offset: {
+          x: width / 2,
+          y: height / 2
+        }
+      });
+    }
+  }, [
+    width,
+    height,
+    scale,
+    offset
+  ]);
+  const projection = useMemo(() => new ProjectionMapper(), []);
+  useEffect2(() => {
+    projection.update({
+      width,
+      height
+    }, scale, offset);
+  }, [
+    projection,
+    scale,
+    offset,
+    width,
+    height
+  ]);
+  const styles = useMemo(() => {
+    return {
+      // NOTE: Order is important.
+      transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+      visibility: width && height ? "visible" : "hidden"
+    };
+  }, [
+    scale,
+    offset
+  ]);
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      setProjection: async (projection2) => {
+        setProjection(projection2);
+      }
+    };
+  }, [
+    ref
+  ]);
+  return /* @__PURE__ */ React2.createElement(CanvasContext.Provider, {
+    value: {
+      root: ref.current,
+      width,
+      height,
+      scale,
+      offset,
+      styles,
+      projection,
+      setProjection
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    ...props,
+    className: mx2("absolute inset-0 overflow-hidden", classNames),
+    ref
+  }, children));
+});
+
+// packages/ui/react-ui-canvas/src/components/FPS.tsx
+import React3, { useEffect as useEffect3, useReducer, useRef } from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var SEC = 1e3;
+var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
+  const [{ fps, max, len }, dispatch] = useReducer((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();
+  const tick = () => {
+    dispatch();
+    requestRef.current = requestAnimationFrame(tick);
+  };
+  useEffect3(() => {
+    requestRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React3.createElement("div", {
+    style: {
+      width: width + 6
+    },
+    className: mx3("relative flex flex-col p-0.5", "bg-base text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
+  }, /* @__PURE__ */ React3.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ React3.createElement("div", {
+    className: "w-full relative",
+    style: {
+      height
+    }
+  }, fps.map((frame, i) => /* @__PURE__ */ React3.createElement("div", {
+    key: `fps-${i}`,
+    className: bar,
+    style: {
+      position: "absolute",
+      bottom: 0,
+      right: `${len - 1 - i}px`,
+      height: `${height * frame / max}px`,
+      width: 1
+    }
+  }))));
+};
+
+// packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx
+import React4, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+var gridRatios = [
+  1 / 4,
+  1,
+  4,
+  16
+];
+var defaultOffset2 = {
+  x: 0,
+  y: 0
+};
+var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
+var Grid = /* @__PURE__ */ forwardRef2(({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset2, classNames }, forwardedRef) => {
+  const grids = useMemo2(() => gridRatios.map((ratio) => ({
+    id: ratio,
+    size: ratio * gridSize * scale
+  })).filter(({ size }) => size >= gridSize && size <= 256), [
+    gridSize,
+    scale
+  ]);
+  return /* @__PURE__ */ React4.createElement("svg", {
+    ...testId("dx-canvas-grid"),
+    ref: forwardedRef,
+    className: mx4("absolute inset-0 w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames)
+  }, /* @__PURE__ */ React4.createElement("defs", null, grids.map(({ id, size }) => /* @__PURE__ */ React4.createElement(GridPattern, {
+    key: id,
+    id: createId(parentId, id),
+    offset,
+    size
+  }))), /* @__PURE__ */ React4.createElement("g", null, grids.map(({ id }, i) => /* @__PURE__ */ React4.createElement("rect", {
+    key: id,
+    opacity: 0.1 + i * 0.05,
+    fill: `url(#${createId(parentId, id)})`,
+    width: "100%",
+    height: "100%"
+  }))));
+});
+
+// packages/ui/react-ui-canvas/src/types.ts
+import { S } from "@dxos/effect";
+var Point = S.Struct({
+  x: S.Number,
+  y: S.Number
+});
+var Dimension = S.Struct({
+  width: S.Number,
+  height: S.Number
+});
+var Rect = S.extend(Point, Dimension);
+export {
+  Arrow,
+  Canvas,
+  CanvasContext,
+  DATA_TEST_ID,
+  Dimension,
+  FPS,
+  Grid,
+  GridPattern,
+  Marker,
+  Markers,
+  Point,
+  ProjectionMapper,
+  Rect,
+  createPath,
+  defaultOffset,
+  getRelativePoint,
+  getZoomTransform,
+  testId,
+  useProjection,
+  useWheel,
+  zoomInPlace,
+  zoomTo
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useProjection.tsx", "../../../src/hooks/useWheel.tsx", "../../../src/util/svg.tsx", "../../../src/util/util.ts", "../../../src/components/FPS.tsx", "../../../src/components/Grid/Grid.tsx", "../../../src/types.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type CSSProperties,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { defaultOffset, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';\n\nexport interface CanvasController {\n  setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\n        setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n      }\n    }, [width, height, scale, offset]);\n\n    // Projection mapper.\n    const projection = useMemo(() => new ProjectionMapper(), []);\n    useEffect(() => {\n      projection.update({ width, height }, scale, offset);\n    }, [projection, scale, offset, width, height]);\n\n    // CSS transforms.\n    const styles = useMemo<CSSProperties>(() => {\n      return {\n        // NOTE: Order is important.\n        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n        visibility: width && height ? 'visible' : 'hidden',\n      };\n    }, [scale, offset]);\n\n    // Controller.\n    useImperativeHandle(\n      forwardedRef,\n      () => {\n        return {\n          setProjection: async (projection: ProjectionState) => {\n            setProjection(projection);\n          },\n        };\n      },\n      [ref],\n    );\n\n    return (\n      <CanvasContext.Provider\n        value={{ root: ref.current, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n  get bounds(): Dimension;\n  get scale(): number;\n  get offset(): Point;\n\n  /**\n   * Maps the model space to the screen offset (from the top-left of the element).\n   */\n  toScreen(points: Point[]): Point[];\n\n  /**\n   * Maps the pointer coordinate (from the top-left of the element) to the model space.\n   */\n  toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n  private _bounds: Dimension = { width: 0, height: 0 };\n  private _scale: number = 1;\n  private _offset: Point = defaultOffset;\n  private _toScreen: Matrix = identity();\n  private _toModel: Matrix = identity();\n\n  constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n    if (bounds && scale && offset) {\n      this.update(bounds, scale, offset);\n    }\n  }\n\n  update(bounds: Dimension, scale: number, offset: Point) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\n    this._toModel = inverse(this._toScreen);\n    return this;\n  }\n\n  get bounds() {\n    return this._bounds;\n  }\n\n  get scale() {\n    return this._scale;\n  }\n\n  get offset() {\n    return this._offset;\n  }\n\n  toScreen(points: Point[]): Point[] {\n    return applyToPoints(this._toScreen, points);\n  }\n\n  toModel(points: Point[]): Point[] {\n    return applyToPoints(this._toModel, points);\n  }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n  scale,\n  offset,\n  pos,\n  newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n  return {\n    scale: newScale,\n    offset: {\n      x: pos.x - (pos.x - offset.x) * (newScale / scale),\n      y: pos.y - (pos.y - offset.y) * (newScale / scale),\n    },\n  };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n  setTransform: (state: ProjectionState) => void,\n  pos: Point,\n  offset: Point,\n  current: number,\n  next: number,\n  delay = 200,\n) => {\n  const is = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n  setTransform: (state: ProjectionState) => void,\n  current: ProjectionState,\n  next: ProjectionState,\n  delay = 200,\n) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n  root: HTMLDivElement;\n  width: number;\n  height: number;\n  styles: CSSProperties;\n  projection: Projection;\n  setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useProjection = (): CanvasContext => {\n  return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, ev);\n              const scaleSensitivity = 0.01;\n              const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n              return getZoomTransform({ scale, offset, newScale, pos });\n            });\n          } else {\n            setProjection(({ scale, offset: { x, y } }) => {\n              return {\n                scale,\n                offset: {\n                  x: x - ev.deltaX,\n                  y: y - ev.deltaY,\n                },\n              };\n            });\n          }\n        },\n      },\n    ]);\n  }, [el, setProjection]);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n//  - https://airbnb.io/visx/gallery\n//  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n  return (\n    <>\n      <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n      <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n      <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n      <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n      <Marker id={`${id}-circle`} pos={{ x: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n      </Marker>\n    </>\n  );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n  PropsWithChildren<\n    ThemedClassName<{\n      id: string;\n      pos: Point;\n      size: Dimension;\n      fill?: boolean;\n    }>\n  >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n  id,\n  className,\n  children,\n  pos: { x: refX, y: refY },\n  size: { width: markerWidth, height: markerHeight },\n  fill,\n  ...rest\n}: MarkerProps) => (\n  <marker\n    id={id}\n    className={className}\n    {...{\n      refX,\n      refY,\n      markerWidth,\n      markerHeight,\n      markerUnits: 'strokeWidth',\n      orient: 'auto',\n      ...rest,\n    }}\n  >\n    {children}\n  </marker>\n);\n\nexport const Arrow = ({\n  classNames,\n  id,\n  size = 16,\n  dir = 'end',\n  closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n  <Marker\n    id={id}\n    size={{ width: size, height: size }}\n    pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n  >\n    <path\n      fill={closed ? undefined : 'none'}\n      stroke={'context-stroke'}\n      className={mx(classNames)}\n      d={createPath(\n        dir === 'end'\n          ? [\n              { x: 1, y: 1 },\n              { x: size, y: size / 2 },\n              { x: 1, y: size - 1 },\n            ]\n          : [\n              { x: size - 1, y: 1 },\n              { x: 0, y: size / 2 },\n              { x: size - 1, y: size - 1 },\n            ],\n        closed,\n      )}\n    />\n  </Marker>\n);\n\nexport const GridPattern = ({\n  classNames,\n  id,\n  size,\n  offset,\n}: ThemedClassName<{ id: string; size: number; offset: Point }>) => (\n  <pattern\n    id={id}\n    x={(size / 2 + offset.x) % size}\n    y={(size / 2 + offset.y) % size}\n    width={size}\n    height={size}\n    patternUnits='userSpaceOnUse'\n  >\n    {/* TODO(burdon): vars. */}\n    <g className={mx(classNames)}>\n      <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n      <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n    </g>\n  </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n  const rect = el.getBoundingClientRect();\n  return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n  if (inspect) {\n    if (!logged) {\n      // eslint-disable-next-line no-console\n      console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n      logged = true;\n    }\n\n    (window as any).INSPECT = () => {\n      const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n      (window as any).inspect(el);\n      // eslint-disable-next-line no-console\n      console.log(el);\n    };\n  }\n\n  return { [DATA_TEST_ID]: id };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n  width?: number;\n  height?: number;\n  bar?: string;\n}>;\n\ntype State = {\n  max: number;\n  len: number;\n  fps: number[];\n  frames: number;\n  prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n  const [{ fps, max, len }, dispatch] = useReducer(\n    (state: State) => {\n      const currentTime = Date.now();\n      if (currentTime > state.prevTime + SEC) {\n        const nextFPS = [\n          ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n          Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n        ];\n        return {\n          max: Math.max(state.max, ...nextFPS),\n          len: Math.min(state.len + nextFPS.length, width),\n          fps: [...state.fps, ...nextFPS].slice(-width),\n          frames: 1,\n          prevTime: currentTime,\n        };\n      } else {\n        return { ...state, frames: state.frames + 1 };\n      }\n    },\n    {\n      max: 0,\n      len: 0,\n      fps: [],\n      frames: 0,\n      prevTime: Date.now(),\n    },\n  );\n\n  const requestRef = useRef<number>();\n  const tick = () => {\n    dispatch();\n    requestRef.current = requestAnimationFrame(tick);\n  };\n\n  useEffect(() => {\n    requestRef.current = requestAnimationFrame(tick);\n    return () => {\n      if (requestRef.current) {\n        cancelAnimationFrame(requestRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      style={{ width: width + 6 }}\n      className={mx(\n        'relative flex flex-col p-0.5',\n        'bg-base text-xs text-subdued font-thin pointer-events-none border border-separator',\n        classNames,\n      )}\n    >\n      <div>{fps[len - 1]} FPS</div>\n      <div className='w-full relative' style={{ height }}>\n        {fps.map((frame, i) => (\n          <div\n            key={`fps-${i}`}\n            className={bar}\n            style={{\n              position: 'absolute',\n              bottom: 0,\n              right: `${len - 1 - i}px`,\n              height: `${(height * frame) / max}px`,\n              width: 1,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useMemo } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\n    const grids = useMemo(\n      () =>\n        gridRatios\n          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n          .filter(({ size }) => size >= gridSize && size <= 256),\n      [gridSize, scale],\n    );\n\n    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\n        className={mx(\n          'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',\n          'stroke-neutral-500',\n          classNames,\n        )}\n      >\n        {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n        <defs>\n          {grids.map(({ id, size }) => (\n            <GridPattern key={id} id={createId(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
+  "mappings": "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",
+  "names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "inverse", "translate", "translateMatrix", "identity", "scale", "scaleMatrix", "defaultOffset", "x", "y", "ProjectionMapper", "constructor", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "d3", "transition", "ease", "easeSinOut", "duration", "tween", "t", "zoomTo", "interpolateObject", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useProjection", "useContext", "raise", "Error", "bindAll", "useEffect", "React", "mx", "createPath", "points", "join", "map", "x", "y", "Markers", "id", "classNames", "Arrow", "dir", "closed", "Marker", "pos", "size", "width", "height", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "offset", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "x", "clientX", "y", "clientY", "top", "testId", "id", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "useWheel", "el", "setProjection", "useEffect", "bindAll", "type", "options", "capture", "passive", "listener", "ev", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOffset", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "setProjection", "useState", "useEffect", "x", "y", "projection", "useMemo", "ProjectionMapper", "update", "styles", "transform", "visibility", "useImperativeHandle", "React", "CanvasContext", "Provider", "value", "root", "current", "div", "role", "className", "mx", "React", "useEffect", "useReducer", "useRef", "mx", "SEC", "FPS", "classNames", "width", "height", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "Math", "floor", "fill", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "current", "requestAnimationFrame", "useEffect", "cancelAnimationFrame", "React", "div", "style", "className", "mx", "map", "frame", "i", "key", "position", "bottom", "right", "React", "forwardRef", "useMemo", "mx", "gridRatios", "defaultOffset", "x", "y", "createId", "parent", "grid", "Grid", "forwardRef", "id", "parentId", "size", "gridSize", "scale", "offset", "classNames", "forwardedRef", "grids", "useMemo", "map", "ratio", "filter", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "g", "i", "rect", "opacity", "fill", "width", "height", "S", "Point", "S", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
+}

package/dist/lib/browser/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11640,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytes":2104,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":12581,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":6037,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":8640,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":511,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9035,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":507,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":663,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-canvas/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30793},"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytesInOutput":2064},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/types.ts":{"bytesInOutput":198}},"bytes":13308}}}