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

package/dist/lib/node/index.cjs

@@ -0,0 +1,641 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var node_exports = {};
+__export(node_exports, {
+  Arrow: () => Arrow,
+  Canvas: () => Canvas,
+  CanvasContext: () => CanvasContext,
+  DATA_TEST_ID: () => DATA_TEST_ID,
+  Dimension: () => Dimension,
+  FPS: () => FPS,
+  Grid: () => Grid,
+  GridComponent: () => GridComponent,
+  GridPattern: () => GridPattern,
+  Marker: () => Marker,
+  Markers: () => Markers,
+  Point: () => Point,
+  ProjectionMapper: () => ProjectionMapper,
+  Rect: () => Rect,
+  createPath: () => createPath,
+  defaultOrigin: () => defaultOrigin,
+  getRelativePoint: () => getRelativePoint,
+  getZoomTransform: () => getZoomTransform,
+  inspectElement: () => inspectElement,
+  testId: () => testId,
+  useCanvasContext: () => useCanvasContext,
+  useWheel: () => useWheel,
+  zoomInPlace: () => zoomInPlace,
+  zoomTo: () => zoomTo
+});
+module.exports = __toCommonJS(node_exports);
+var import_react = __toESM(require("react"));
+var import_react_resize_detector = require("react-resize-detector");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var d3 = __toESM(require("d3"));
+var import_transformation_matrix = require("transformation-matrix");
+var import_react2 = require("react");
+var import_debug = require("@dxos/debug");
+var import_bind_event_listener = require("bind-event-listener");
+var import_react3 = require("react");
+var import_react4 = __toESM(require("react"));
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react5 = __toESM(require("react"));
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react6 = __toESM(require("react"));
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_effect = require("@dxos/effect");
+var defaultOrigin = {
+  x: 0,
+  y: 0
+};
+var ProjectionMapper = class {
+  constructor(bounds, scale, offset) {
+    this._bounds = {
+      width: 0,
+      height: 0
+    };
+    this._scale = 1;
+    this._offset = defaultOrigin;
+    this._toScreen = (0, import_transformation_matrix.identity)();
+    this._toModel = (0, import_transformation_matrix.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 = (0, import_transformation_matrix.compose)(
+      // NOTE: Order is important.
+      (0, import_transformation_matrix.translate)(this._offset.x, this._offset.y),
+      (0, import_transformation_matrix.scale)(this._scale)
+    );
+    this._toModel = (0, import_transformation_matrix.inverse)(this._toScreen);
+    return this;
+  }
+  get bounds() {
+    return this._bounds;
+  }
+  get scale() {
+    return this._scale;
+  }
+  get offset() {
+    return this._offset;
+  }
+  toScreen(points) {
+    return (0, import_transformation_matrix.applyToPoints)(this._toScreen, points);
+  }
+  toModel(points) {
+    return (0, import_transformation_matrix.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 noop = () => {
+};
+var zoomTo = (setTransform, current, next, 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);
+};
+var CanvasContext = /* @__PURE__ */ (0, import_react2.createContext)(null);
+var useCanvasContext = () => {
+  return (0, import_react2.useContext)(CanvasContext) ?? (0, import_debug.raise)(new Error("Missing CanvasContext"));
+};
+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__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(Arrow, {
+    id: `${id}-arrow-start`,
+    dir: "start",
+    classNames
+  }), /* @__PURE__ */ import_react4.default.createElement(Arrow, {
+    id: `${id}-arrow-end`,
+    dir: "end",
+    classNames
+  }), /* @__PURE__ */ import_react4.default.createElement(Arrow, {
+    id: `${id}-triangle-start`,
+    dir: "start",
+    closed: true,
+    classNames
+  }), /* @__PURE__ */ import_react4.default.createElement(Arrow, {
+    id: `${id}-triangle-end`,
+    dir: "end",
+    closed: true,
+    classNames
+  }), /* @__PURE__ */ import_react4.default.createElement(Marker, {
+    id: `${id}-circle`,
+    pos: {
+      x: 8,
+      y: 8
+    },
+    size: {
+      width: 16,
+      height: 16
+    }
+  }, /* @__PURE__ */ import_react4.default.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 5,
+    stroke: "context-stroke",
+    className: (0, import_react_ui_theme2.mx)(classNames)
+  })));
+};
+var Marker = ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }) => /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(Marker, {
+  id,
+  size: {
+    width: size,
+    height: size
+  },
+  pos: dir === "end" ? {
+    x: size,
+    y: size / 2
+  } : {
+    x: 0,
+    y: size / 2
+  }
+}, /* @__PURE__ */ import_react4.default.createElement("path", {
+  fill: closed ? void 0 : "none",
+  stroke: "context-stroke",
+  className: (0, import_react_ui_theme2.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__ */ import_react4.default.createElement("pattern", {
+  id,
+  x: (size / 2 + offset.x) % size,
+  y: (size / 2 + offset.y) % size,
+  width: size,
+  height: size,
+  patternUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ import_react4.default.createElement("g", {
+  className: (0, import_react_ui_theme2.mx)(classNames)
+}, /* @__PURE__ */ import_react4.default.createElement("line", {
+  x1: 0,
+  y1: size / 2,
+  x2: size,
+  y2: size / 2
+}), /* @__PURE__ */ import_react4.default.createElement("line", {
+  x1: size / 2,
+  y1: 0,
+  x2: size / 2,
+  y2: size
+})));
+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 inspectElement = (el) => {
+  window.INSPECT = () => {
+    window.inspect(el);
+    window.element = el;
+    console.log("Open storybook in expanded window;\nthen run INSPECT()");
+    console.log(el);
+  };
+};
+var DATA_TEST_ID = "data-test-id";
+var defaultOptions = {
+  zoom: true
+};
+var useWheel = (options = defaultOptions) => {
+  const { root, setProjection } = useCanvasContext();
+  (0, import_react3.useEffect)(() => {
+    if (!root) {
+      return;
+    }
+    return (0, import_bind_event_listener.bindAll)(root, [
+      {
+        type: "wheel",
+        options: {
+          capture: true,
+          passive: false
+        },
+        listener: (ev) => {
+          const zooming = isWheelZooming(ev);
+          if (!hasFocus(root) && !zooming) {
+            return;
+          }
+          ev.preventDefault();
+          if (zooming && !options.zoom) {
+            return;
+          }
+          if (ev.ctrlKey) {
+            if (!root) {
+              return;
+            }
+            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
+  ]);
+};
+var isWheelZooming = (ev) => {
+  if (ev.ctrlKey || ev.metaKey) {
+    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;
+  }
+  return false;
+};
+var hasFocus = (element) => {
+  const activeElement = document.activeElement;
+  if (!activeElement) {
+    return false;
+  }
+  let shadowActive = activeElement;
+  while (shadowActive?.shadowRoot?.activeElement) {
+    shadowActive = shadowActive.shadowRoot.activeElement;
+  }
+  let current = element;
+  while (current) {
+    if (current === activeElement || current === shadowActive) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+};
+var Canvas = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
+  const { ref, width = 0, height = 0 } = (0, import_react_resize_detector.useResizeDetector)();
+  const [ready, setReady] = (0, import_react.useState)(false);
+  const [{ scale, offset }, setProjection] = (0, import_react.useState)({
+    scale: _scale,
+    offset: _offset
+  });
+  (0, import_react.useEffect)(() => {
+    if (width && height && offset === defaultOrigin) {
+      setProjection({
+        scale,
+        offset: {
+          x: width / 2,
+          y: height / 2
+        }
+      });
+    }
+  }, [
+    width,
+    height,
+    scale,
+    offset
+  ]);
+  const projection = (0, import_react.useMemo)(() => new ProjectionMapper(), []);
+  (0, import_react.useEffect)(() => {
+    projection.update({
+      width,
+      height
+    }, scale, offset);
+    if (offset !== defaultOrigin) {
+      setReady(true);
+    }
+  }, [
+    projection,
+    scale,
+    offset,
+    width,
+    height
+  ]);
+  const styles = (0, import_react.useMemo)(() => {
+    return {
+      // NOTE: Order is important.
+      transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+      visibility: width && height ? "visible" : "hidden"
+    };
+  }, [
+    scale,
+    offset
+  ]);
+  (0, import_react.useImperativeHandle)(forwardedRef, () => {
+    return {
+      setProjection: async (projection2) => {
+        setProjection(projection2);
+      }
+    };
+  }, [
+    ref
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement(CanvasContext.Provider, {
+    value: {
+      root: ref.current,
+      ready,
+      width,
+      height,
+      scale,
+      offset,
+      styles,
+      projection,
+      setProjection
+    }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    ...props,
+    className: (0, import_react_ui_theme.mx)("absolute inset-0 overflow-hidden", classNames),
+    ref
+  }, ready ? children : null));
+});
+var SEC = 1e3;
+var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
+  const [{ fps, max, len }, dispatch] = (0, import_react5.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 = (0, import_react5.useRef)();
+  const tick = () => {
+    dispatch();
+    requestRef.current = requestAnimationFrame(tick);
+  };
+  (0, import_react5.useEffect)(() => {
+    requestRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
+    style: {
+      width: width + 6
+    },
+    className: (0, import_react_ui_theme3.mx)("relative flex flex-col p-0.5", "bg-base text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
+  }, /* @__PURE__ */ import_react5.default.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ import_react5.default.createElement("div", {
+    className: "w-full relative",
+    style: {
+      height
+    }
+  }, fps.map((frame, i) => /* @__PURE__ */ import_react5.default.createElement("div", {
+    key: `fps-${i}`,
+    className: bar,
+    style: {
+      position: "absolute",
+      bottom: 0,
+      right: `${len - 1 - i}px`,
+      height: `${height * frame / max}px`,
+      width: 1
+    }
+  }))));
+};
+var gridRatios = [
+  1 / 4,
+  1,
+  4,
+  16
+];
+var defaultGridSize = 16;
+var defaultOffset = {
+  x: 0,
+  y: 0
+};
+var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
+var GridComponent = /* @__PURE__ */ (0, import_react6.forwardRef)(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames }, forwardedRef) => {
+  const svgRef = (0, import_react_ui.useForwardedRef)(forwardedRef);
+  const instanceId = (0, import_react6.useId)();
+  const grids = (0, import_react6.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 /* @__PURE__ */ import_react6.default.createElement("svg", {
+    ...testId("dx-canvas-grid"),
+    ref: svgRef,
+    className: (0, import_react_ui_theme4.mx)("absolute inset-0 w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames)
+  }, /* @__PURE__ */ import_react6.default.createElement("defs", null, grids.map(({ id, size }) => /* @__PURE__ */ import_react6.default.createElement(GridPattern, {
+    key: id,
+    id: createId(instanceId, id),
+    offset,
+    size
+  }))), showAxes && /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("line", {
+    x1: 0,
+    y1: offset.y,
+    x2: width,
+    y2: offset.y,
+    className: "stroke-neutral-500 opacity-40"
+  }), /* @__PURE__ */ import_react6.default.createElement("line", {
+    x1: offset.x,
+    y1: 0,
+    x2: offset.x,
+    y2: height,
+    className: "stroke-neutral-500 opacity-40"
+  })), /* @__PURE__ */ import_react6.default.createElement("g", null, grids.map(({ id }, i) => /* @__PURE__ */ import_react6.default.createElement("rect", {
+    key: id,
+    opacity: 0.1 + i * 0.05,
+    fill: `url(#${createId(instanceId, id)})`,
+    width: "100%",
+    height: "100%"
+  }))));
+});
+var Grid = (props) => {
+  const { scale, offset } = useCanvasContext();
+  return /* @__PURE__ */ import_react6.default.createElement(GridComponent, {
+    ...props,
+    scale,
+    offset
+  });
+};
+var Point = import_effect.S.Struct({
+  x: import_effect.S.Number,
+  y: import_effect.S.Number
+});
+var Dimension = import_effect.S.Struct({
+  width: import_effect.S.Number,
+  height: import_effect.S.Number
+});
+var Rect = import_effect.S.extend(Point, Dimension);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Arrow,
+  Canvas,
+  CanvasContext,
+  DATA_TEST_ID,
+  Dimension,
+  FPS,
+  Grid,
+  GridComponent,
+  GridPattern,
+  Marker,
+  Markers,
+  Point,
+  ProjectionMapper,
+  Rect,
+  createPath,
+  defaultOrigin,
+  getRelativePoint,
+  getZoomTransform,
+  inspectElement,
+  testId,
+  useCanvasContext,
+  useWheel,
+  zoomInPlace,
+  zoomTo
+});
+//# sourceMappingURL=index.cjs.map