@dxos/plugin-explorer 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/dist/lib/node/{chunk-R4TOGRPE.cjs → chunk-72H5HBTK.cjs}

@@ -26,30 +26,37 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_R4TOGRPE_exports = {};
-__export(chunk_R4TOGRPE_exports, {
+var chunk_72H5HBTK_exports = {};
+__export(chunk_72H5HBTK_exports, {
   Chart: () => Chart,
   ExplorerContainer: () => ExplorerContainer,
   Globe: () => Globe,
-  Tree: () => Tree,
+  Tree: () => Tree2,
   defaultTreeLayoutSlots: () => defaultTreeLayoutSlots
 });
-module.exports = __toCommonJS(chunk_R4TOGRPE_exports);
-var import_chunk_4ZUNNUQD = require("./chunk-4ZUNNUQD.cjs");
+module.exports = __toCommonJS(chunk_72H5HBTK_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var Plot = __toESM(require("@observablehq/plot"));
 var import_react = __toESM(require("react"));
 var import_react_resize_detector = require("react-resize-detector");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 var Plot2 = __toESM(require("@observablehq/plot"));
 var import_react2 = __toESM(require("react"));
 var import_react_resize_detector2 = require("react-resize-detector");
 var topojson = __toESM(require("topojson-client"));
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react3 = __toESM(require("react"));
-var import_react_resize_detector3 = require("react-resize-detector");
-var import_gem_core = require("@dxos/gem-core");
 var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_graph = require("@dxos/react-ui-graph");
+var import_schema = require("@dxos/schema");
 var import_d3 = require("d3");
 var import_d32 = require("d3");
 var import_d33 = require("d3");
+var import_effect = require("effect");
+var import_echo = require("@dxos/echo");
+var import_echo_schema = require("@dxos/echo-schema");
+var import_invariant = require("@dxos/invariant");
+var import_live_object = require("@dxos/live-object");
 var import_react4 = require("react");
 var createAdapter = (prop, accessor) => accessor ? {
   transform: (values) => values.map((value) => accessor(value)[prop])
@@ -61,40 +68,45 @@ var defaultOptions = {
   fillOpacity: 0.2
 };
 var Chart = ({ items = [], accessor, options = defaultOptions }) => {
-  const { ref: containerRef, width = 0, height = 0 } = (0, import_react_resize_detector.useResizeDetector)({
-    refreshRate: 200
-  });
-  (0, import_react.useEffect)(() => {
-    if (!width || !height) {
-      return;
-    }
-    const plot3 = Plot.plot({
-      grid: true,
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const { ref: containerRef, width = 0, height = 0 } = (0, import_react_resize_detector.useResizeDetector)({
+      refreshRate: 200
+    });
+    (0, import_react.useEffect)(() => {
+      if (!width || !height) {
+        return;
+      }
+      const plot3 = Plot.plot({
+        grid: true,
+        width,
+        height,
+        style: {
+          background: "transparent"
+        },
+        marks: [
+          Plot.frame(),
+          Plot.dot(items, {
+            x: createAdapter("x", accessor),
+            y: createAdapter("y", accessor),
+            ...options
+          })
+        ]
+      });
+      containerRef.current.append(plot3);
+      return () => plot3?.remove();
+    }, [
+      items,
       width,
-      height,
-      style: {
-        background: "transparent"
-      },
-      marks: [
-        Plot.frame(),
-        Plot.dot(items, {
-          x: createAdapter("x", accessor),
-          y: createAdapter("y", accessor),
-          ...options
-        })
-      ]
+      height
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      ref: containerRef,
+      className: "grow"
     });
-    containerRef.current.append(plot3);
-    return () => plot3?.remove();
-  }, [
-    items,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    ref: containerRef,
-    className: "grow"
-  });
+  } finally {
+    _effect.f();
+  }
 };
 var countries_110m_default = {
   type: "Topology",
@@ -10801,58 +10813,63 @@ var defaultOptions2 = {
   fill: "#003300"
 };
 var Globe = ({ items = [], accessor, projection = "orthographic", options = defaultOptions2 }) => {
-  const { ref: containerRef, width = 0, height = 0 } = (0, import_react_resize_detector2.useResizeDetector)({
-    refreshRate: 200
-  });
-  const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
-  (0, import_react2.useEffect)(() => {
-    if (!width || !height) {
-      return;
-    }
-    const plot3 = Plot2.plot({
-      // https://observablehq.com/plot/features/projections
-      projection: {
-        type: projection,
-        rotate: [
-          -100,
-          -20
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { ref: containerRef, width = 0, height = 0 } = (0, import_react_resize_detector2.useResizeDetector)({
+      refreshRate: 200
+    });
+    const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
+    (0, import_react2.useEffect)(() => {
+      if (!width || !height) {
+        return;
+      }
+      const plot3 = Plot2.plot({
+        // https://observablehq.com/plot/features/projections
+        projection: {
+          type: projection,
+          rotate: [
+            -100,
+            -20
+          ]
+        },
+        // projection: { type: 'equirectangular', rotate: [-140, -30] },
+        width,
+        height,
+        style: {
+          background: "transparent"
+        },
+        // TODO(burdon): Create simple wrapper for Plot with good defaults.
+        marks: [
+          Plot2.sphere({
+            fill: "lightblue",
+            fillOpacity: 0.5
+          }),
+          Plot2.geo(land, {
+            fill: "darkgreen",
+            fillOpacity: 0.5
+          }),
+          Plot2.graticule(),
+          Plot2.dot(items, {
+            x: createAdapter("lat", accessor),
+            y: createAdapter("lng", accessor),
+            ...options
+          })
         ]
-      },
-      // projection: { type: 'equirectangular', rotate: [-140, -30] },
+      });
+      containerRef.current.append(plot3);
+      return () => plot3?.remove();
+    }, [
+      items,
       width,
-      height,
-      style: {
-        background: "transparent"
-      },
-      // TODO(burdon): Create simple wrapper for Plot with good defaults.
-      marks: [
-        Plot2.sphere({
-          fill: "lightblue",
-          fillOpacity: 0.5
-        }),
-        Plot2.geo(land, {
-          fill: "darkgreen",
-          fillOpacity: 0.5
-        }),
-        Plot2.graticule(),
-        Plot2.dot(items, {
-          x: createAdapter("lat", accessor),
-          y: createAdapter("lng", accessor),
-          ...options
-        })
-      ]
+      height
+    ]);
+    return /* @__PURE__ */ import_react2.default.createElement("div", {
+      ref: containerRef,
+      className: "grow p-4"
     });
-    containerRef.current.append(plot3);
-    return () => plot3?.remove();
-  }, [
-    items,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    ref: containerRef,
-    className: "grow p-4"
-  });
+  } finally {
+    _effect.f();
+  }
 };
 var HierarchicalEdgeBundling = (s, data, options) => {
   const svg = (0, import_d3.select)(s);
@@ -10978,25 +10995,267 @@ var TidyTree = (s, data, options) => {
   }
 };
 var TidyTree_default = TidyTree;
-var mapGraphToTreeData = (model, maxDepth = 8) => {
-  const mapNode = (node, depth = 0) => {
-    const treeNode = {
-      id: model.idAccessor(node),
-      label: model.idAccessor(node).slice(0, 8)
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts";
+var TreeNodeType = import_effect.Schema.Struct({
+  id: import_echo_schema.ObjectId,
+  children: import_effect.Schema.mutable(import_effect.Schema.Array(import_echo_schema.ObjectId)),
+  data: import_effect.Schema.mutable(import_effect.Schema.Record({
+    key: import_effect.Schema.String,
+    value: import_effect.Schema.Any
+  })),
+  ref: import_effect.Schema.optional((0, import_echo_schema.Ref)(import_echo_schema.Expando))
+}).pipe(import_effect.Schema.mutable);
+var TreeType = import_effect.Schema.Struct({
+  root: import_echo_schema.ObjectId,
+  nodes: import_effect.Schema.mutable(import_effect.Schema.Record({
+    key: import_echo_schema.ObjectId,
+    value: TreeNodeType
+  }))
+}).pipe(import_echo.Type.Obj({
+  typename: "dxos.org/type/Tree",
+  version: "0.1.0"
+}));
+var Tree = class _Tree {
+  static {
+    this.create = () => {
+      const id = import_echo_schema.ObjectId.random();
+      return (0, import_live_object.live)(TreeType, {
+        root: id,
+        nodes: {
+          [id]: {
+            id,
+            children: [],
+            data: {
+              text: ""
+            }
+          }
+        }
+      });
     };
-    const links = model.graph.links.filter((link2) => link2.source === treeNode.id);
-    if (depth < maxDepth) {
-      treeNode.children = links.map((link2) => mapNode(model.graph.nodes.find((node2) => model.idAccessor(node2) === link2.target), depth + 1));
+  }
+  constructor(tree3) {
+    this._tree = tree3 ?? _Tree.create();
+  }
+  get tree() {
+    return this._tree;
+  }
+  // TODO(burdon): Make reactive.
+  get size() {
+    return Object.keys(this._tree.nodes).length;
+  }
+  get root() {
+    return this.getNode(this._tree.root);
+  }
+  //
+  // Traversal
+  //
+  /**
+  * Recursively traverse the tree until the callback returns a value.
+  */
+  tranverse(callback, root = this._tree.root, depth = 0) {
+    const node = this._tree.nodes[root];
+    const result = callback(node, depth);
+    if (result !== void 0) {
+      return result;
     }
-    return treeNode;
-  };
-  let data;
-  if (model.selected) {
-    const node = model.graph.nodes.find((node2) => model.idAccessor(node2) === model.selected);
-    if (node) {
-      data = mapNode(node);
+    for (const childId of node.children) {
+      const result2 = this.tranverse(callback, childId, depth + 1);
+      if (result2 !== void 0) {
+        return result2;
+      }
+    }
+  }
+  getNode(id) {
+    const node = this._tree.nodes[id];
+    (0, import_invariant.invariant)(node, void 0, {
+      F: __dxlog_file,
+      L: 100,
+      S: this,
+      A: [
+        "node",
+        ""
+      ]
+    });
+    return node;
+  }
+  /**
+  * Get the children of a node.
+  */
+  getChildNodes(node) {
+    return node.children.map((id) => this.getNode(id));
+  }
+  /**
+  * Get the parent of a node.
+  */
+  getParent(node) {
+    const parent = this.tranverse((n) => {
+      if (n.children.includes(node.id)) {
+        return n;
+      }
+    });
+    return parent ?? null;
+  }
+  /**
+  * Get the next node in the tree.
+  */
+  getNext(node, hierarchical = true) {
+    if (hierarchical && node.children.length) {
+      return this.getChildNodes(node)[0];
+    } else {
+      const parent = this.getParent(node);
+      if (parent) {
+        const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
+        if (idx < parent.children.length - 1) {
+          return this.getNode(parent.children[idx + 1]);
+        } else {
+          return this.getNext(parent, false);
+        }
+      }
+    }
+  }
+  /**
+  * Get the previous node in the tree.
+  */
+  getPrevious(node, hierarchical = true) {
+    const parent = this.getParent(node);
+    const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
+    if (idx === 0) {
+      if (hierarchical) {
+        return parent;
+      }
+    } else {
+      const previous = this.getNode(parent.children[idx - 1]);
+      if (hierarchical && previous.children.length) {
+        return this.getLastDescendent(previous);
+      }
+      return previous;
+    }
+  }
+  /**
+  * Get the last descendent of a node.
+  */
+  getLastDescendent(node) {
+    const children = this.getChildNodes(node);
+    const last = children.length ? children[children.length - 1] : void 0;
+    if (last) {
+      return this.getLastDescendent(last);
+    }
+    return node;
+  }
+  //
+  // Mutations
+  //
+  /**
+  * Clear tree.
+  */
+  clear() {
+    const root = this._tree.nodes[this._tree.root];
+    root.children.length = 0;
+    this._tree.nodes = {
+      [root.id]: root
+    };
+  }
+  /**
+  * Add node.
+  */
+  addNode(parent, node, index) {
+    if (!node) {
+      const id = import_echo_schema.ObjectId.random();
+      node = {
+        id,
+        children: [],
+        data: {
+          text: ""
+        }
+      };
+    }
+    this._tree.nodes[node.id] = node;
+    parent.children.splice(index ?? parent.children.length, 0, node.id);
+    return node;
+  }
+  /**
+  * Delete node.
+  */
+  deleteNode(parent, id) {
+    const node = this._tree.nodes[id];
+    if (!node) {
+      return void 0;
     }
+    delete this._tree.nodes[node.id];
+    const idx = parent.children.findIndex((child) => child === id);
+    if (idx !== -1) {
+      parent.children.splice(idx, 1);
+    }
+    return node;
   }
+  /**
+  * Move child node.
+  */
+  moveNode(node, from, to) {
+    (0, import_invariant.invariant)(from >= 0 && from < node.children.length, void 0, {
+      F: __dxlog_file,
+      L: 230,
+      S: this,
+      A: [
+        "from >= 0 && from < node.children.length",
+        ""
+      ]
+    });
+    (0, import_invariant.invariant)(to >= 0 && to < node.children.length, void 0, {
+      F: __dxlog_file,
+      L: 231,
+      S: this,
+      A: [
+        "to >= 0 && to < node.children.length",
+        ""
+      ]
+    });
+    if (from === to) {
+      return null;
+    }
+    const child = node.children[from];
+    node.children.splice(from, 1);
+    node.children.splice(to, 0, child);
+    return this.getNode(child);
+  }
+  /**
+  * Indent node.
+  */
+  indentNode(node) {
+    const parent = this.getParent(node);
+    if (!parent) {
+      return;
+    }
+    const idx = parent.children.findIndex((child) => child === node.id);
+    if (idx < 1 || idx >= parent.children.length) {
+      return;
+    }
+    const previous = this.getNode(parent.children[idx - 1]);
+    parent.children.splice(idx, 1);
+    previous.children.push(node.id);
+  }
+  /**
+  * Unindent node.
+  */
+  unindentNode(node) {
+    const parent = this.getParent(node);
+    if (!parent) {
+      return;
+    }
+    const ancestor = this.getParent(parent);
+    if (!ancestor) {
+      return;
+    }
+    const nodeIdx = parent.children.findIndex((id) => id === node.id);
+    const [_, ...rest] = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+    parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+    const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
+    ancestor.children.splice(parentIdx + 1, 0, node.id);
+    node.children.push(...rest);
+  }
+};
+var mapGraphToTreeData = (model, maxDepth = 8) => {
+  let data;
   return data;
 };
 var defaultTreeLayoutSlots = {
@@ -11018,57 +11277,59 @@ var renderers = /* @__PURE__ */ new Map([
     HierarchicalEdgeBundling_default
   ]
 ]);
-var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
-  const [model] = (0, import_react_ui.useAsyncState)(async () => space ? new import_chunk_4ZUNNUQD.SpaceGraphModel().open(space, selected) : void 0, [
-    space,
-    selected
-  ]);
-  const [tree3, setTree] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
-    return model?.subscribe(() => {
-      const tree4 = mapGraphToTreeData(model);
-      setTree(tree4);
-    }, true);
-  }, [
-    model
-  ]);
-  const context = (0, import_gem_core.createSvgContext)();
-  const { ref, width = 0, height = 0 } = (0, import_react_resize_detector3.useResizeDetector)();
-  (0, import_react3.useEffect)(() => {
-    if (width && height) {
-      const size = Math.min(width, height);
-      const radius = size * 0.4;
-      const options = {
-        // TODO(burdon): Type.
-        label: (d) => d.label ?? d.id,
-        width,
-        height,
-        radius,
-        marginLeft: (width - radius * 2) / 2,
-        marginRight: (width - radius * 2) / 2,
-        marginTop: (height - radius * 2) / 2,
-        marginBottom: (height - radius * 2) / 2,
-        slots: defaultTreeLayoutSlots
-      };
-      if (tree3) {
-        const renderer = renderers.get(variant);
-        renderer?.(context.ref.current, tree3, options);
+var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const [model] = (0, import_react_ui.useAsyncState)(async () => space ? new import_schema.SpaceGraphModel().open(space) : void 0, [
+      space,
+      selected
+    ]);
+    const [tree3, setTree] = (0, import_react3.useState)();
+    (0, import_react3.useEffect)(() => {
+      return model?.subscribe(() => {
+        const tree4 = mapGraphToTreeData(model);
+        setTree(tree4);
+      }, true);
+    }, [
+      model
+    ]);
+    const context = (0, import_react3.useRef)(null);
+    (0, import_react3.useEffect)(() => {
+      if (context.current) {
+        const { width, height } = context.current.size;
+        const size = Math.min(width, height);
+        const radius = size * 0.4;
+        const options = {
+          // TODO(burdon): Type.
+          label: (d) => d.label ?? d.id,
+          width,
+          height,
+          radius,
+          marginLeft: (width - radius * 2) / 2,
+          marginRight: (width - radius * 2) / 2,
+          marginTop: (height - radius * 2) / 2,
+          marginBottom: (height - radius * 2) / 2,
+          slots: defaultTreeLayoutSlots
+        };
+        if (tree3) {
+          const renderer = renderers.get(variant);
+          renderer?.(context.current.svg, tree3, options);
+        }
       }
-    }
-  }, [
-    tree3,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
-    ref,
-    className: "flex grow overflow-hidden",
-    onClick: () => onNodeClick?.()
-  }, /* @__PURE__ */ import_react3.default.createElement(import_gem_core.SVGRoot, {
-    context
-  }, /* @__PURE__ */ import_react3.default.createElement(import_gem_core.SVG, null)));
+    }, [
+      context.current,
+      tree3
+    ]);
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
+      onClick: () => onNodeClick?.()
+    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_graph.SVG.Root, {
+      ref: context
+    }));
+  } finally {
+    _effect.f();
+  }
 };
-var ExplorerContainer = (0, import_react4.lazy)(() => import("./ExplorerContainer-4RMWCWRX.cjs"));
+var ExplorerContainer = (0, import_react4.lazy)(() => import("./ExplorerContainer-MVP2AM7R.cjs"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Chart,
@@ -11077,4 +11338,4 @@ var ExplorerContainer = (0, import_react4.lazy)(() => import("./ExplorerContaine
   Tree,
   defaultTreeLayoutSlots
 });
-//# sourceMappingURL=chunk-R4TOGRPE.cjs.map
+//# sourceMappingURL=chunk-72H5HBTK.cjs.map