@dxos/plugin-explorer 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/dist/lib/browser/ExplorerContainer-BBZ54DJS.mjs

@@ -0,0 +1,37 @@
+import {
+  useGraphModel
+} from "./chunk-SLB2F5AO.mjs";
+import {
+  ForceGraph
+} from "./chunk-M2BGAY6H.mjs";
+
+// packages/plugins/plugin-explorer/src/components/ExplorerContainer.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useGlobalSearch } from "@dxos/plugin-search";
+import { getSpace } from "@dxos/react-client/echo";
+import { StackItem } from "@dxos/react-ui-stack";
+var ExplorerContainer = ({ role, view }) => {
+  var _effect = _useSignals();
+  try {
+    const space = getSpace(view);
+    const { match } = useGlobalSearch();
+    const model = useGraphModel(space);
+    if (!model || !space) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(StackItem.Content, {
+      size: role === "section" ? "square" : "intrinsic"
+    }, /* @__PURE__ */ React.createElement(ForceGraph, {
+      model,
+      match
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var ExplorerContainer_default = ExplorerContainer;
+export {
+  ExplorerContainer_default as default
+};
+//# sourceMappingURL=ExplorerContainer-BBZ54DJS.mjs.map

package/dist/lib/browser/ExplorerContainer-BBZ54DJS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ExplorerContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { ForceGraph } from './Graph';\nimport { useGraphModel } from '../hooks';\nimport { type ViewType } from '../types';\n\ntype ExplorerContainerProps = {\n  role: string;\n  view: ViewType;\n};\n\nconst ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {\n  const space = getSpace(view);\n  const { match } = useGlobalSearch();\n  const model = useGraphModel(space);\n\n  if (!model || !space) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content size={role === 'section' ? 'square' : 'intrinsic'}>\n      <ForceGraph model={model} match={match} />\n    </StackItem.Content>\n  );\n};\n\nexport default ExplorerContainer;\n"],
+  "mappings": ";;;;;;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,iBAAiB;AAW1B,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,KAAI,MAA0B;;;AAC/D,UAAMC,QAAQC,SAASF,IAAAA;AACvB,UAAM,EAAEG,MAAK,IAAKC,gBAAAA;AAClB,UAAMC,QAAQC,cAAcL,KAAAA;AAE5B,QAAI,CAACI,SAAS,CAACJ,OAAO;AACpB,aAAO;IACT;AAEA,WACE,sBAAA,cAACM,UAAUC,SAAO;MAACC,MAAMV,SAAS,YAAY,WAAW;OACvD,sBAAA,cAACW,YAAAA;MAAWL;MAAcF;;;;;AAGhC;AAEA,IAAA,4BAAeL;",
+  "names": ["React", "useGlobalSearch", "getSpace", "StackItem", "ExplorerContainer", "role", "view", "space", "getSpace", "match", "useGlobalSearch", "model", "useGraphModel", "StackItem", "Content", "size", "ForceGraph"]
+}

package/dist/lib/browser/{chunk-JL7ZGOFE.mjs → chunk-73GQ46YO.mjs}

@@ -1,8 +1,5 @@
-import {
-  SpaceGraphModel
-} from "./chunk-QRPUL5AH.mjs";
-
 // packages/plugins/plugin-explorer/src/components/Chart/Chart.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import * as Plot from "@observablehq/plot";
 import React, { useEffect } from "react";
 import { useResizeDetector } from "react-resize-detector";
@@ -20,43 +17,49 @@ var defaultOptions = {
   fillOpacity: 0.2
 };
 var Chart = ({ items = [], accessor, options = defaultOptions }) => {
-  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
-    refreshRate: 200
-  });
-  useEffect(() => {
-    if (!width || !height) {
-      return;
-    }
-    const plot3 = Plot.plot({
-      grid: true,
+  var _effect = _useSignals();
+  try {
+    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
+      refreshRate: 200
+    });
+    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__ */ React.createElement("div", {
+      ref: containerRef,
+      className: "grow"
     });
-    containerRef.current.append(plot3);
-    return () => plot3?.remove();
-  }, [
-    items,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: containerRef,
-    className: "grow"
-  });
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-explorer/src/components/Globe/Globe.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import * as Plot2 from "@observablehq/plot";
 import React2, { useEffect as useEffect2 } from "react";
 import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
@@ -10770,65 +10773,71 @@ var defaultOptions2 = {
   fill: "#003300"
 };
 var Globe = ({ items = [], accessor, projection = "orthographic", options = defaultOptions2 }) => {
-  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
-    refreshRate: 200
-  });
-  const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
-  useEffect2(() => {
-    if (!width || !height) {
-      return;
-    }
-    const plot3 = Plot2.plot({
-      // https://observablehq.com/plot/features/projections
-      projection: {
-        type: projection,
-        rotate: [
-          -100,
-          -20
+  var _effect = _useSignals2();
+  try {
+    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
+      refreshRate: 200
+    });
+    const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
+    useEffect2(() => {
+      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__ */ React2.createElement("div", {
+      ref: containerRef,
+      className: "grow p-4"
     });
-    containerRef.current.append(plot3);
-    return () => plot3?.remove();
-  }, [
-    items,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    ref: containerRef,
-    className: "grow p-4"
-  });
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-explorer/src/components/Tree/Tree.tsx
-import React3, { useEffect as useEffect3, useState } from "react";
-import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
-import { createSvgContext, SVG, SVGRoot } from "@dxos/gem-core";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { useEffect as useEffect3, useRef, useState } from "react";
 import { useAsyncState } from "@dxos/react-ui";
+import { SVG } from "@dxos/react-ui-graph";
+import { SpaceGraphModel } from "@dxos/schema";
 
 // packages/plugins/plugin-explorer/src/components/Tree/layout/HierarchicalEdgeBundling.ts
 import { cluster, curveBundle, hierarchy, lineRadial, select } from "d3";
@@ -10963,26 +10972,275 @@ var TidyTree = (s, data, options) => {
 };
 var TidyTree_default = TidyTree;
 
-// packages/plugins/plugin-explorer/src/components/Tree/types.ts
-var mapGraphToTreeData = (model, maxDepth = 8) => {
-  const mapNode = (node, depth = 0) => {
-    const treeNode = {
-      id: model.idAccessor(node),
-      label: model.idAccessor(node).slice(0, 8)
+// packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts
+import { Schema } from "effect";
+import { Type } from "@dxos/echo";
+import { ObjectId, Ref, Expando } from "@dxos/echo-schema";
+import { invariant } from "@dxos/invariant";
+import { live } from "@dxos/live-object";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts";
+var TreeNodeType = Schema.Struct({
+  id: ObjectId,
+  children: Schema.mutable(Schema.Array(ObjectId)),
+  data: Schema.mutable(Schema.Record({
+    key: Schema.String,
+    value: Schema.Any
+  })),
+  ref: Schema.optional(Ref(Expando))
+}).pipe(Schema.mutable);
+var TreeType = Schema.Struct({
+  root: ObjectId,
+  nodes: Schema.mutable(Schema.Record({
+    key: ObjectId,
+    value: TreeNodeType
+  }))
+}).pipe(Type.Obj({
+  typename: "dxos.org/type/Tree",
+  version: "0.1.0"
+}));
+var Tree = class _Tree {
+  static {
+    this.create = () => {
+      const id = ObjectId.random();
+      return 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];
+    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 = 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) {
+    invariant(from >= 0 && from < node.children.length, void 0, {
+      F: __dxlog_file,
+      L: 230,
+      S: this,
+      A: [
+        "from >= 0 && from < node.children.length",
+        ""
+      ]
+    });
+    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);
+  }
+};
+
+// packages/plugins/plugin-explorer/src/components/Tree/types/types.ts
+var mapGraphToTreeData = (model, maxDepth = 8) => {
+  let data;
   return data;
 };
 
@@ -11006,66 +11264,68 @@ var renderers = /* @__PURE__ */ new Map([
     HierarchicalEdgeBundling_default
   ]
 ]);
-var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
-  const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space, selected) : void 0, [
-    space,
-    selected
-  ]);
-  const [tree3, setTree] = useState();
-  useEffect3(() => {
-    return model?.subscribe(() => {
-      const tree4 = mapGraphToTreeData(model);
-      setTree(tree4);
-    }, true);
-  }, [
-    model
-  ]);
-  const context = createSvgContext();
-  const { ref, width = 0, height = 0 } = useResizeDetector3();
-  useEffect3(() => {
-    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 = _useSignals3();
+  try {
+    const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space) : void 0, [
+      space,
+      selected
+    ]);
+    const [tree3, setTree] = useState();
+    useEffect3(() => {
+      return model?.subscribe(() => {
+        const tree4 = mapGraphToTreeData(model);
+        setTree(tree4);
+      }, true);
+    }, [
+      model
+    ]);
+    const context = useRef(null);
+    useEffect3(() => {
+      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__ */ React3.createElement("div", {
-    ref,
-    className: "flex grow overflow-hidden",
-    onClick: () => onNodeClick?.()
-  }, /* @__PURE__ */ React3.createElement(SVGRoot, {
-    context
-  }, /* @__PURE__ */ React3.createElement(SVG, null)));
+    }, [
+      context.current,
+      tree3
+    ]);
+    return /* @__PURE__ */ React3.createElement("div", {
+      onClick: () => onNodeClick?.()
+    }, /* @__PURE__ */ React3.createElement(SVG.Root, {
+      ref: context
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-explorer/src/components/index.ts
 import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-6U4GS62Q.mjs"));
+var ExplorerContainer = lazy(() => import("./ExplorerContainer-BBZ54DJS.mjs"));
 
 export {
   Chart,
   Globe,
   defaultTreeLayoutSlots,
-  Tree,
+  Tree2 as Tree,
   ExplorerContainer
 };
-//# sourceMappingURL=chunk-JL7ZGOFE.mjs.map
+//# sourceMappingURL=chunk-73GQ46YO.mjs.map