@dxos/react-ui-canvas 0.8.3 → 0.8.4-main.2e9d522

package/dist/lib/node/index.cjs

@@ -1,691 +0,0 @@
-"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_tracking = require("@preact-signals/safe-react/tracking");
-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 import_d3 = 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_tracking2 = require("@preact-signals/safe-react/tracking");
-var import_react4 = __toESM(require("react"));
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_tracking3 = require("@preact-signals/safe-react/tracking");
-var import_react5 = __toESM(require("react"));
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_tracking4 = require("@preact-signals/safe-react/tracking");
-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("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 = (0, import_d3.interpolate)(current, next);
-  (0, import_d3.transition)().ease(import_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 = (0, import_d3.interpolateObject)({
-    scale: current.scale,
-    ...current.offset
-  }, {
-    scale: next.scale,
-    ...next.offset
-  });
-  (0, import_d3.transition)().ease(import_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 }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    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)
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var Marker = ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__PURE__ */ import_react4.default.createElement("marker", {
-      id,
-      className,
-      refX,
-      refY,
-      markerWidth,
-      markerHeight,
-      markerUnits: "strokeWidth",
-      orient: "auto",
-      ...rest
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var Arrow = ({ classNames, id, size = 16, dir = "end", closed = false }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__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)
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var GridPattern = ({ classNames, id, size, offset }) => {
-  var _effect = (0, import_tracking2.useSignals)();
-  try {
-    return /* @__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
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-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) => {
-  var _effect = (0, import_tracking.useSignals)();
-  try {
-    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));
-  } finally {
-    _effect.f();
-  }
-});
-var SEC = 1e3;
-var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
-  var _effect = (0, import_tracking3.useSignals)();
-  try {
-    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-baseSurface 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
-      }
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-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) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    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%"
-    }))));
-  } finally {
-    _effect.f();
-  }
-});
-var Grid = (props) => {
-  var _effect = (0, import_tracking4.useSignals)();
-  try {
-    const { scale, offset } = useCanvasContext();
-    return /* @__PURE__ */ import_react6.default.createElement(GridComponent, {
-      ...props,
-      scale,
-      offset
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var Point = import_effect.Schema.Struct({
-  x: import_effect.Schema.Number,
-  y: import_effect.Schema.Number
-});
-var Dimension = import_effect.Schema.Struct({
-  width: import_effect.Schema.Number,
-  height: import_effect.Schema.Number
-});
-var Rect = import_effect.Schema.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