@dxos/react-ui-canvas 0.8.1 → 0.8.2-main.10c050d

package/dist/lib/node/index.cjs

@@ -54,19 +54,23 @@ __export(node_exports, {
   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 d3 = __toESM(require("d3"));
+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");
@@ -127,8 +131,8 @@ var getZoomTransform = ({ scale, offset, pos, newScale }) => {
   };
 };
 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 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,
@@ -141,14 +145,14 @@ var zoomInPlace = (setTransform, pos, offset, current, next, delay = 200) => {
 var noop = () => {
 };
 var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
-  const is = d3.interpolateObject({
+  const is = (0, import_d3.interpolateObject)({
     scale: current.scale,
     ...current.offset
   }, {
     scale: next.scale,
     ...next.offset
   });
-  d3.transition().ease(d3.easeSinOut).duration(delay).tween("zoom", () => (t) => {
+  (0, import_d3.transition)().ease(import_d3.easeSinOut).duration(delay).tween("zoom", () => (t) => {
     const { scale, x, y } = is(t);
     setTransform({
       scale,
@@ -171,118 +175,144 @@ var createPath = (points, join = false) => {
   ].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 _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 }) => /* @__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
+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();
   }
-}, /* @__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 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();
@@ -399,148 +429,158 @@ var hasFocus = (element) => {
   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);
+  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
+          }
+        });
       }
-    };
-  }, [
-    ref
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement(CanvasContext.Provider, {
-    value: {
-      root: ref.current,
-      ready,
+    }, [
       width,
       height,
       scale,
-      offset,
-      styles,
+      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,
-      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)))
-      ];
+      scale,
+      offset,
+      width,
+      height
+    ]);
+    const styles = (0, import_react.useMemo)(() => {
       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
+        // NOTE: Order is important.
+        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+        visibility: width && height ? "visible" : "hidden"
       };
-    } else {
+    }, [
+      scale,
+      offset
+    ]);
+    (0, import_react.useImperativeHandle)(forwardedRef, () => {
       return {
-        ...state,
-        frames: state.frames + 1
+        setProjection: async (projection2) => {
+          setProjection(projection2);
+        }
       };
-    }
-  }, {
-    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);
+    }, [
+      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);
     };
-  }, []);
-  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
-    }
-  }))));
+    (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,
@@ -555,52 +595,62 @@ var defaultOffset = {
 };
 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 _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) => {
-  const { scale, offset } = useCanvasContext();
-  return /* @__PURE__ */ import_react6.default.createElement(GridComponent, {
-    ...props,
-    scale,
-    offset
-  });
+  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,