@deck.gl-community/graph-layers 9.0.2 → 9.1.0-beta.2

package/dist/index.cjs

@@ -34,8 +34,6 @@ var __publicField = (obj, key, value) => {
 // dist/index.js
 var dist_exports = {};
 __export(dist_exports, {
-  BaseLayout: () => BaseLayout,
-  CompositeEdgeLayer: () => EdgeLayer,
   D3ForceLayout: () => D3ForceLayout,
   EDGE_DECORATOR_TYPE: () => EDGE_DECORATOR_TYPE,
   EDGE_TYPE: () => EDGE_TYPE,
@@ -45,21 +43,29 @@ __export(dist_exports, {
   Graph: () => Graph,
   GraphEngine: () => GraphEngine,
   GraphLayer: () => GraphLayer,
-  JSONLoader: () => JSONLoader,
-  LAYOUT_STATE: () => LAYOUT_STATE,
+  GraphLayout: () => GraphLayout,
+  JSONLoader: () => JSONLoader2,
   MARKER_TYPE: () => MARKER_TYPE,
   NODE_STATE: () => NODE_STATE,
   NODE_TYPE: () => NODE_TYPE,
   Node: () => Node,
   SimpleLayout: () => SimpleLayout,
-  basicEdgeParser: () => basicEdgeParser,
-  basicNodeParser: () => basicNodeParser,
+  ViewControlWidget: () => ViewControlWidget,
+  _HivePlotLayout: () => HivePlotLayout,
+  _MultigraphLayout: () => ForceMultiGraphLayout,
+  _RadialLayout: () => RadialLayout,
   createGraph: () => createGraph,
+  loadSimpleJSONGraph: () => loadSimpleJSONGraph,
   log: () => log,
   mixedGetPosition: () => mixedGetPosition
 });
 module.exports = __toCommonJS(dist_exports);
 
+// dist/utils/log.js
+var import_log = require("@probe.gl/log");
+var log = new import_log.Log({ id: "graph-layers" }).enable();
+log.log({ color: import_log.COLOR.CYAN }, "Initialize graph-layers logger.")();
+
 // dist/core/cache.js
 var Cache = class {
   _keys = /* @__PURE__ */ new Map();
@@ -86,120 +92,7 @@ var Cache = class {
   }
 };
 
-// dist/core/graph-engine.js
-var GraphEngine = class extends EventTarget {
-  _graph;
-  _layout;
-  _cache = new Cache();
-  _layoutDirty = false;
-  _transactionInProgress = false;
-  constructor(graph, layout) {
-    super();
-    this._graph = graph;
-    this._layout = layout;
-  }
-  /** Getters */
-  getNodes = () => {
-    this._updateCache("nodes", () => this._graph.getNodes().filter((node) => this.getNodePosition(node)));
-    return this._cache.get("nodes");
-  };
-  getEdges = () => {
-    this._updateCache("edges", () => this._graph.getEdges().filter((edge) => this.getEdgePosition(edge)));
-    return this._cache.get("edges");
-  };
-  getNodePosition = (node) => this._layout.getNodePosition(node);
-  getEdgePosition = (edge) => this._layout.getEdgePosition(edge);
-  getGraphVersion = () => this._graph.version;
-  getLayoutLastUpdate = () => this._layout.version;
-  getLayoutState = () => this._layout.state;
-  /** Operations on the graph */
-  lockNodePosition = (node, x, y) => this._layout.lockNodePosition(node, x, y);
-  unlockNodePosition = (node) => this._layout.unlockNodePosition(node);
-  /**
-   * @fires GraphEngine#onLayoutStart
-   */
-  _onLayoutStart = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutStart"));
-  };
-  /**
-   * @fires GraphEngine#onLayoutChange
-   */
-  _onLayoutChange = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutChange"));
-  };
-  /**
-   * @fires GraphEngine#onLayoutDone
-   */
-  _onLayoutDone = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutDone"));
-  };
-  /**
-   * @fires GraphEngine#onLayoutError
-   */
-  _onLayoutError = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutError"));
-  };
-  _onGraphStructureChanged = (entity) => {
-    this._layoutDirty = true;
-    this._graphChanged();
-  };
-  _onTransactionStart = () => {
-    this._transactionInProgress = true;
-  };
-  _onTransactionEnd = () => {
-    this._transactionInProgress = false;
-    this._graphChanged();
-  };
-  /** Layout calculations */
-  run = () => {
-    this._graph.addEventListener("transactionStart", this._onTransactionStart);
-    this._graph.addEventListener("transactionEnd", this._onTransactionEnd);
-    this._graph.addEventListener("onNodeAdded", this._onGraphStructureChanged);
-    this._graph.addEventListener("onNodeRemoved", this._onGraphStructureChanged);
-    this._graph.addEventListener("onEdgeAdded", this._onGraphStructureChanged);
-    this._graph.addEventListener("onEdgeRemoved", this._onGraphStructureChanged);
-    this._layout.addEventListener("onLayoutStart", this._onLayoutStart);
-    this._layout.addEventListener("onLayoutChange", this._onLayoutChange);
-    this._layout.addEventListener("onLayoutDone", this._onLayoutDone);
-    this._layout.addEventListener("onLayoutError", this._onLayoutError);
-    this._layout.initializeGraph(this._graph);
-    this._layout.start();
-  };
-  clear = () => {
-    this._graph.removeEventListener("transactionStart", this._onTransactionStart);
-    this._graph.removeEventListener("transactionEnd", this._onTransactionEnd);
-    this._graph.removeEventListener("onNodeAdded", this._onGraphStructureChanged);
-    this._graph.removeEventListener("onNodeRemoved", this._onGraphStructureChanged);
-    this._graph.removeEventListener("onEdgeAdded", this._onGraphStructureChanged);
-    this._graph.removeEventListener("onEdgeRemoved", this._onGraphStructureChanged);
-    this._layout.removeEventListener("onLayoutStart", this._onLayoutStart);
-    this._layout.removeEventListener("onLayoutChange", this._onLayoutChange);
-    this._layout.removeEventListener("onLayoutDone", this._onLayoutDone);
-    this._layout.removeEventListener("onLayoutError", this._onLayoutError);
-  };
-  resume = () => this._layout.resume();
-  stop = () => this._layout.stop();
-  _graphChanged = () => {
-    if (this._layoutDirty && !this._transactionInProgress) {
-      this._updateLayout();
-    }
-  };
-  _updateLayout = () => {
-    this._layout.updateGraph(this._graph);
-    this._layout.update();
-    this._layoutDirty = false;
-  };
-  _updateCache(key, updateValue) {
-    this._cache.set(key, updateValue, this._graph.version + this._layout.version);
-  }
-};
-
-// dist/utils/log.js
-var import_probe = require("probe.gl");
-var log = new import_probe.Log({ id: "react-graph-layers" }).enable();
-log.log({ color: import_probe.COLOR.CYAN }, "Initialize react-graph-layers logger.")();
-
-// dist/core/graph.js
+// dist/graph/graph.js
 var Graph = class extends EventTarget {
   /** List object of nodes. */
   _nodeMap = {};
@@ -216,32 +109,38 @@ var Graph = class extends EventTarget {
   _cache = new Cache();
   /**
    * The constructor of the Graph class.
-   * @param  {Object} graph - copy the graph if this exists.
+   * @param graph - copy the graph if this exists.
    */
-  constructor(graph = null) {
+  constructor(propsOrGraph) {
     super();
-    if (graph) {
+    if (propsOrGraph instanceof Graph) {
+      const graph = propsOrGraph;
+      this._name = (graph == null ? void 0 : graph._name) || this._name;
       this._nodeMap = graph._nodeMap;
       this._edgeMap = graph._edgeMap;
-      this._name = graph && graph._name;
+    } else {
+      const props = propsOrGraph;
+      this._name = (props == null ? void 0 : props.name) || this._name;
+      this.batchAddNodes((props == null ? void 0 : props.nodes) || []);
+      this.batchAddEdges((props == null ? void 0 : props.edges) || []);
     }
   }
   /**
    * Set graph name
-   * @param {string} name
+   * @param name
    */
   setGraphName(name) {
     this._name = name;
   }
   /** Get the name of the graph. Default value is the time stamp when creating this graph.
-   * @return {string} graph name.
+   * @return graph name.
    */
   getGraphName() {
     return this._name.toString();
   }
   /**
    * Perform a batch of operations defined by cb before indicating graph is updated
-   * @param {function} cb - a callback fuction containing the operations to perform
+   * @param {function} cb - a callback function containing the operations to perform
    */
   transaction(cb) {
     try {
@@ -253,7 +152,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Add a new node to the graph.
-   * @param {Node} node - expect a Node object to be added to the graph.
+   * @paramnode - expect a Node object to be added to the graph.
    */
   addNode(node) {
     this._nodeMap[node.getId()] = node;
@@ -262,7 +161,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Batch add nodes to the graph.
-   * @param  {Node[]} nodes - a list of nodes to be added.
+   * @param nodes - a list of nodes to be added.
    */
   batchAddNodes(nodes) {
     this._nodeMap = nodes.reduce((res, node) => {
@@ -282,22 +181,22 @@ var Graph = class extends EventTarget {
   }
   /**
    * Get the node map of the graph. The key of the map is the ID of the nodes.
-   * @return {Object} - a map of nodes keyed by node IDs.
+   * @return - a map of nodes keyed by node IDs.
    */
   getNodeMap() {
     return this._nodeMap;
   }
   /**
    * Find a node by id
-   * @param  {String} nodeId The id of the node
-   * @return {Object} Node
+   * @param nodeId The id of the node
+   * @return  Node
    */
   findNode(nodeId) {
     return this._nodeMap[nodeId];
   }
   /**
    * Update the indicated node to the provided value
-   * @param {Node} node
+   * @param node
    */
   updateNode(node) {
     this._nodeMap[node.getId()] = node;
@@ -306,7 +205,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Add a new edge to the graph.
-   * @param {Edge} edge - expect a Edge object to be added to the graph.
+   * @param edge - expect a Edge object to be added to the graph.
    */
   addEdge(edge) {
     const sourceNode = this.findNode(edge.getSourceNodeId());
@@ -323,7 +222,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Batch add edges to the graph
-   * @param  {Edge[]} edges - a list of edges to be added.
+   * @param edges - a list of edges to be added.
    */
   batchAddEdges(edges) {
     edges.forEach((edge) => this.addEdge(edge));
@@ -331,7 +230,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Update the indicated edge to the provided value
-   * @param {Edge} edge
+   * @param edge
    */
   updateEdge(edge) {
     this._edgeMap[edge.getId()] = edge;
@@ -340,7 +239,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Remove a node from the graph by node ID
-   * @param  {String|Number} nodeId - the ID of the target node.
+   * @param nodeId - the ID of the target node.
    */
   removeNode(nodeId) {
     const node = this.findNode(nodeId);
@@ -357,7 +256,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Get all the edges of the graph.
-   * @return {Edge[]} get all the edges in the graph.
+   * @return get all the edges in the graph.
    */
   getEdges() {
     this._updateCache("edges", () => Object.values(this._edgeMap));
@@ -365,7 +264,7 @@ var Graph = class extends EventTarget {
   }
   /**
    * Get the edge map of the graph. The key of the map is the ID of the edges.
-   * @return {Object} - a map of edges keyed by edge IDs.
+   * @return - a map of edges keyed by edge IDs.
    */
   getEdgeMap() {
     return this._edgeMap;
@@ -389,16 +288,16 @@ var Graph = class extends EventTarget {
   }
   /**
    * Find the edge by edge ID.
-   * @param  {String|Number} id - the target edge ID
-   * @return {Edge} - the target edge.
+   * @param id - the target edge ID
+   * @return - the target edge.
    */
   findEdge(edgeId) {
     return this._edgeMap[edgeId];
   }
   /**
    * Return all the connected edges of a node by nodeID.
-   * @param  {String|Number} nodeId - the target node ID
-   * @return {Edge[]} - an array of the connected edges.
+   * @param  nodeId - the target node ID
+   * @return - an array of the connected edges.
    */
   getConnectedEdges(nodeId) {
     const node = this.findNode(nodeId);
@@ -410,8 +309,8 @@ var Graph = class extends EventTarget {
   }
   /**
    * Return all the sibling nodes of a node by nodeID.
-   * @param  {String|Number} nodeId - the target node ID
-   * @return {Node[]} - an array of the sibling nodes.
+   * @param nodeId - the target node ID
+   * @return - an array of the sibling nodes.
    */
   getNodeSiblings(nodeId) {
     const node = this.findNode(nodeId);
@@ -423,8 +322,8 @@ var Graph = class extends EventTarget {
   }
   /**
    * Get the degree of a node.
-   * @param  {String|Number} nodeId - the target node ID.
-   * @return {Number} - the degree of the node.
+   * @param nodeId - the target node ID.
+   * @return - the degree of the node.
    */
   getDegree(nodeId) {
     const node = this.findNode(nodeId);
@@ -471,14 +370,14 @@ var Graph = class extends EventTarget {
   }
   /**
    * Check the equality of two graphs data by checking last update time stamp
-   * @param  {Object} g Another graph to be compared against itself
-   * @return {Bool}   True if the graph is the same as itself.
+   * @param graph Another graph to be compared against itself
+   * @return true if the graph is the same as itself.
    */
-  equals(g) {
-    if (!g || !(g instanceof Graph)) {
+  equals(graph) {
+    if (!graph || !(graph instanceof Graph)) {
       return false;
     }
-    return this.version === g.version;
+    return this.version === graph.version;
   }
   _bumpVersion() {
     this.version += 1;
@@ -584,15 +483,8 @@ var EDGE_DECORATOR_TYPE = {
   LABEL: "EDGE_LABEL",
   FLOW: "FLOW"
 };
-var LAYOUT_STATE = {
-  INIT: "INIT",
-  START: "START",
-  CALCULATING: "CALCULATING",
-  DONE: "DONE",
-  ERROR: "ERROR"
-};
 
-// dist/core/node.js
+// dist/graph/node.js
 var Node = class {
   id;
   /** Keep a reference to origin data. */
@@ -609,8 +501,6 @@ var Node = class {
   isNode = true;
   /**
    * The constructor of a node
-   * @param  {String|Number} options.id   - the unique ID of the node
-   * @param  {Record<string, unknown>} options.data - origin data reference
    */
   constructor({ id, selectable = false, highlightConnectedEdges = false, data = {} }) {
     this.id = id;
@@ -620,7 +510,7 @@ var Node = class {
   }
   /**
    * Return the ID of the node
-   * @return {String|Number} - the ID of the node.
+   * @return - the ID of the node.
    */
   getId() {
     return this.id;
@@ -634,7 +524,7 @@ var Node = class {
   }
   /**
    * Return the in-degree of the node.
-   * @return {Number} - the in-degree of the node.
+   * @return - the in-degree of the node.
    */
   getInDegree() {
     const nodeId = this.getId();
@@ -648,7 +538,7 @@ var Node = class {
   }
   /**
    * Return the out-degree of the node.
-   * @return {Number} - the out-degree of the node.
+   * @return - the out-degree of the node.
    */
   getOutDegree() {
     const nodeId = this.getId();
@@ -662,7 +552,7 @@ var Node = class {
   }
   /**
    * Return all the IDs of the sibling nodes.
-   * @return {String[]} [description]
+   * @return [description]
    */
   getSiblingIds() {
     const nodeId = this.getId();
@@ -677,15 +567,15 @@ var Node = class {
   }
   /**
    * Return all the connected edges.
-   * @return {Object[]} - an array of the connected edges.
+   * @return - an array of the connected edges.
    */
   getConnectedEdges() {
     return Object.values(this._connectedEdges);
   }
   /**
    * Return of the value of the selected property key.
-   * @param  {String} key - property key.
-   * @return {Any} - the value of the property or undefined (not found).
+   * @param key - property key.
+   * @return - the value of the property or undefined (not found).
    */
   getPropertyValue(key) {
     if (this.hasOwnProperty(key)) {
@@ -697,36 +587,36 @@ var Node = class {
   }
   /**
    * Set the new node data.
-   * @param {Record<string, unknown>} data - the new data of the node
+   * @param data - the new data of the node
    */
   setData(data) {
     this._data = data;
   }
   /**
    * Update a data property.
-   * @param {String} key - the key of the property
-   * @param {Any} value - the value of the property.
+   * @param key - the key of the property
+   * @param value - the value of the property.
    */
   setDataProperty(key, value) {
     this._data[key] = value;
   }
   /**
    * Set node state
-   * @param {String} state - one of NODE_STATE
+   * @param state - one of NODE_STATE
    */
   setState(state) {
     this.state = state;
   }
   /**
    * Get node state
-   * @returns {string} state - one of NODE_STATE
+   * @returns state - one of NODE_STATE
    */
   getState() {
     return this.state;
   }
   /**
    * Add connected edges to the node
-   * @param {Edge || Edge[]} edge an edge or an array of edges to be added to this._connectedEdges
+   * @param edge an edge or an array of edges to be added to this._connectedEdges
    */
   addConnectedEdges(edge) {
     const iterableEdges = Array.isArray(edge) ? edge : [edge];
@@ -737,7 +627,7 @@ var Node = class {
   }
   /**
    * Remove edges from this._connectedEdges
-   * @param {Edge | Edge[]} edge an edge or an array of edges to be removed from this._connectedEdges
+   * @param edge an edge or an array of edges to be removed from this._connectedEdges
    */
   removeConnectedEdges(edge) {
     const iterableEdges = Array.isArray(edge) ? edge : [edge];
@@ -761,7 +651,7 @@ var Node = class {
   }
 };
 
-// dist/core/edge.js
+// dist/graph/edge.js
 var Edge = class {
   /** Unique uuid of the edge. */
   id;
@@ -781,11 +671,7 @@ var Edge = class {
   state = EDGE_STATE.DEFAULT;
   /**
    * The constructor
-   * @param  {String|Number} options.id - the unique ID of the edge
-   * @param  {String|Number} options.sourceId - the ID of the source node
-   * @param  {String|Number} options.targetId - the ID of the target node
-   * @param  {Boolean} options.directed - whether the edge is directed or not
-   * @param  {Record<string, unknown>} options.data - origin data reference
+   * @param options.id - information about the edge
    */
   constructor({ id, sourceId, targetId, data, directed = false }) {
     this.id = id;
@@ -810,22 +696,22 @@ var Edge = class {
   }
   /**
    * Get the ID of the source node.
-   * @return {String|Number} the ID of the source node.
+   * @return the ID of the source node.
    */
   getSourceNodeId() {
     return this._sourceId;
   }
   /**
    * Get the ID of the target node.
-   * @return {String|Number} the ID of the target node.
+   * @return the ID of the target node.
    */
   getTargetNodeId() {
     return this._targetId;
   }
   /**
    * Return of the value of the selected property key.
-   * @param  {String} key - property key.
-   * @return {Any} - the value of the property.
+   * @param  key - property key.
+   * @return - the value of the property.
    */
   getPropertyValue(key) {
     if (this.hasOwnProperty(key)) {
@@ -837,29 +723,29 @@ var Edge = class {
   }
   /**
    * Set the origin data as a reference.
-   * @param {Object} data - the origin data.
+   * @param data - the origin data.
    */
   setData(data) {
     this._data = data;
   }
   /**
    * Update a data property.
-   * @param {String} key - the key of the property
-   * @param {Any} value - the value of the property.
+   * @param key - the key of the property
+   * @param value - the value of the property.
    */
   setDataProperty(key, value) {
     this._data[key] = value;
   }
   /**
    * Set edge state
-   * @param {String} state - one of EDGE_STATE
+   * @param state - one of EDGE_STATE
    */
   setState(state) {
     this.state = state;
   }
   /**
    * Get edge state
-   * @returns {string} state - one of EDGE_STATE
+   * @returns state - one of EDGE_STATE
    */
   getState() {
     return this.state;
@@ -875,90 +761,174 @@ var Edge = class {
   }
 };
 
-// dist/core/base-layout.js
-var import_lodash = __toESM(require("lodash.isequal"), 1);
-var BaseLayout = class extends EventTarget {
-  /** Name of the layout. */
-  _name = "BaseLayout";
-  /** Extra configuration options of the layout. */
-  _options;
-  version = 0;
-  state = LAYOUT_STATE.INIT;
-  /**
-   * Constructor of BaseLayout
-   * @param  {Object} options extra configuration options of the layout
-   */
-  constructor(options = {}) {
+// dist/core/graph-engine.js
+var GraphEngine = class extends EventTarget {
+  props;
+  _graph;
+  _layout;
+  _cache = new Cache();
+  _layoutDirty = false;
+  _transactionInProgress = false;
+  constructor(props, layout) {
     super();
-    this._options = options;
+    if (props instanceof Graph) {
+      props = {
+        graph: props,
+        layout
+      };
+    }
+    this.props = props;
+    this._graph = props.graph;
+    this._layout = props.layout;
   }
+  /** Getters */
+  getNodes = () => {
+    this._updateCache("nodes", () => this._graph.getNodes().filter((node) => this.getNodePosition(node)));
+    return this._cache.get("nodes");
+  };
+  getEdges = () => {
+    this._updateCache("edges", () => this._graph.getEdges().filter((edge) => this.getEdgePosition(edge)));
+    return this._cache.get("edges");
+  };
+  getNodePosition = (node) => this._layout.getNodePosition(node);
+  getEdgePosition = (edge) => this._layout.getEdgePosition(edge);
+  getGraphVersion = () => this._graph.version;
+  getLayoutLastUpdate = () => this._layout.version;
+  getLayoutState = () => this._layout.state;
+  /** Operations on the graph */
+  lockNodePosition = (node, x, y) => this._layout.lockNodePosition(node, x, y);
+  unlockNodePosition = (node) => this._layout.unlockNodePosition(node);
   /**
-   * @fires BaseLayout#onLayoutStart
-   * @protected
+   * @fires GraphEngine#onLayoutStart
    */
-  _onLayoutStart() {
-    this._updateState(LAYOUT_STATE.CALCULATING);
+  _onLayoutStart = () => {
     this.dispatchEvent(new CustomEvent("onLayoutStart"));
-  }
+  };
   /**
-   * @fires BaseLayout#onLayoutChange
-   * @protected
+   * @fires GraphEngine#onLayoutChange
    */
-  _onLayoutChange() {
-    this._updateState(LAYOUT_STATE.CALCULATING);
+  _onLayoutChange = () => {
     this.dispatchEvent(new CustomEvent("onLayoutChange"));
-  }
+  };
   /**
-   * @fires BaseLayout#onLayoutDone
-   * @protected
+   * @fires GraphEngine#onLayoutDone
    */
-  _onLayoutDone() {
-    this._updateState(LAYOUT_STATE.DONE);
+  _onLayoutDone = () => {
     this.dispatchEvent(new CustomEvent("onLayoutDone"));
-  }
+  };
   /**
-   * @fires BaseLayout#onLayoutError
-   * @protected
+   * @fires GraphEngine#onLayoutError
    */
-  _onLayoutError() {
-    this._updateState(LAYOUT_STATE.ERROR);
+  _onLayoutError = () => {
     this.dispatchEvent(new CustomEvent("onLayoutError"));
+  };
+  _onGraphStructureChanged = (entity) => {
+    this._layoutDirty = true;
+    this._graphChanged();
+  };
+  _onTransactionStart = () => {
+    this._transactionInProgress = true;
+  };
+  _onTransactionEnd = () => {
+    this._transactionInProgress = false;
+    this._graphChanged();
+  };
+  /** Layout calculations */
+  run = () => {
+    this._graph.addEventListener("transactionStart", this._onTransactionStart);
+    this._graph.addEventListener("transactionEnd", this._onTransactionEnd);
+    this._graph.addEventListener("onNodeAdded", this._onGraphStructureChanged);
+    this._graph.addEventListener("onNodeRemoved", this._onGraphStructureChanged);
+    this._graph.addEventListener("onEdgeAdded", this._onGraphStructureChanged);
+    this._graph.addEventListener("onEdgeRemoved", this._onGraphStructureChanged);
+    this._layout.addEventListener("onLayoutStart", this._onLayoutStart);
+    this._layout.addEventListener("onLayoutChange", this._onLayoutChange);
+    this._layout.addEventListener("onLayoutDone", this._onLayoutDone);
+    this._layout.addEventListener("onLayoutError", this._onLayoutError);
+    this._layout.initializeGraph(this._graph);
+    this._layout.start();
+  };
+  clear = () => {
+    this._graph.removeEventListener("transactionStart", this._onTransactionStart);
+    this._graph.removeEventListener("transactionEnd", this._onTransactionEnd);
+    this._graph.removeEventListener("onNodeAdded", this._onGraphStructureChanged);
+    this._graph.removeEventListener("onNodeRemoved", this._onGraphStructureChanged);
+    this._graph.removeEventListener("onEdgeAdded", this._onGraphStructureChanged);
+    this._graph.removeEventListener("onEdgeRemoved", this._onGraphStructureChanged);
+    this._layout.removeEventListener("onLayoutStart", this._onLayoutStart);
+    this._layout.removeEventListener("onLayoutChange", this._onLayoutChange);
+    this._layout.removeEventListener("onLayoutDone", this._onLayoutDone);
+    this._layout.removeEventListener("onLayoutError", this._onLayoutError);
+  };
+  resume = () => this._layout.resume();
+  stop = () => this._layout.stop();
+  _graphChanged = () => {
+    if (this._layoutDirty && !this._transactionInProgress) {
+      this._updateLayout();
+    }
+  };
+  _updateLayout = () => {
+    this._layout.updateGraph(this._graph);
+    this._layout.update();
+    this._layoutDirty = false;
+  };
+  _updateCache(key, updateValue) {
+    this._cache.set(key, updateValue, this._graph.version + this._layout.version);
+  }
+};
+
+// dist/core/graph-layout.js
+var import_lodash = __toESM(require("lodash.isequal"), 1);
+var GraphLayout = class extends EventTarget {
+  /** Name of the layout. */
+  _name = "GraphLayout";
+  /** Extra configuration options of the layout. */
+  _options;
+  version = 0;
+  state = "INIT";
+  /**
+   * Constructor of GraphLayout
+   * @param options extra configuration options of the layout
+   */
+  constructor(options) {
+    super();
+    this._options = options;
   }
   /**
    * Check the equality of two layouts
-   * @param  {Object} layout The layout to be compared.
-   * @return {Bool}   True if the layout is the same as itself.
+   * @param layout - The layout to be compared.
+   * @return - True if the layout is the same as itself.
    */
   equals(layout) {
-    if (!layout || !(layout instanceof BaseLayout)) {
+    if (!layout || !(layout instanceof GraphLayout)) {
       return false;
     }
     return this._name === layout._name && (0, import_lodash.default)(this._options, layout._options);
   }
   /** virtual functions: will be implemented in the child class */
-  // first time to pass the graph data into this layout
+  /** first time to pass the graph data into this layout */
   initializeGraph(graph) {
   }
-  // update the existing graph
+  /** update the existing graph */
   updateGraph(graph) {
   }
-  // start the layout calculation
+  /** start the layout calculation */
   start() {
   }
-  // update the layout calculation
+  /** update the layout calculation */
   update() {
   }
-  // resume the layout calculation
+  /** resume the layout calculation */
   resume() {
   }
-  // stop the layout calculation
+  /** stop the layout calculation */
   stop() {
   }
-  // access the position of the node in the layout
+  /** access the position of the node in the layout */
   getNodePosition(node) {
     return [0, 0];
   }
-  // access the layout information of the edge
+  /** access the layout information of the edge */
   getEdgePosition(edge) {
     return {
       type: EDGE_TYPE.LINE,
@@ -969,9 +939,9 @@ var BaseLayout = class extends EventTarget {
   }
   /**
    * Pin the node to a designated position, and the node won't move anymore
-   * @param  {Object} node Node to be locked
-   * @param  {Number} x    x coordinate
-   * @param  {Number} y    y coordinate
+   * @param  node Node to be locked
+   * @param  x    x coordinate
+   * @param  y    y coordinate
    */
   lockNodePosition(node, x, y) {
   }
@@ -981,31 +951,106 @@ var BaseLayout = class extends EventTarget {
    */
   unlockNodePosition(node) {
   }
+  // INTERNAL METHODS
   _updateState(state) {
     this.state = state;
     this.version += 1;
   }
+  /** @fires GraphLayout#onLayoutStart */
+  _onLayoutStart = () => {
+    this._updateState("CALCULATING");
+    this.dispatchEvent(new CustomEvent("onLayoutStart"));
+  };
+  /** @fires GraphLayout#onLayoutChange */
+  _onLayoutChange = () => {
+    this._updateState("CALCULATING");
+    this.dispatchEvent(new CustomEvent("onLayoutChange"));
+  };
+  /** @fires GraphLayout#onLayoutDone */
+  _onLayoutDone = () => {
+    this._updateState("DONE");
+    this.dispatchEvent(new CustomEvent("onLayoutDone"));
+  };
+  /** @fires GraphLayout#onLayoutError */
+  _onLayoutError = () => {
+    this._updateState("ERROR");
+    this.dispatchEvent(new CustomEvent("onLayoutError"));
+  };
 };
 
-// dist/layouts/d3-force/d3-force-layout.js
-var import_meta = {};
-var defaultOptions = {
-  alpha: 0.3,
-  resumeAlpha: 0.1,
-  nBodyStrength: -900,
-  nBodyDistanceMin: 100,
-  nBodyDistanceMax: 400,
-  getCollisionRadius: 0
-};
-var D3ForceLayout = class extends BaseLayout {
-  _name = "D3";
-  _positionsByNodeId = /* @__PURE__ */ new Map();
-  _graph;
-  _worker;
-  constructor(options) {
-    super(options);
-    this._options = {
-      ...defaultOptions,
+// dist/layouts/simple-layout.js
+var _SimpleLayout = class extends GraphLayout {
+  _name = "SimpleLayout";
+  _graph = null;
+  _nodeMap = {};
+  _nodePositionMap = {};
+  constructor(options = {}) {
+    super({ ..._SimpleLayout.defaultOptions, ...options });
+  }
+  initializeGraph(graph) {
+    this.updateGraph(graph);
+  }
+  _notifyLayoutComplete() {
+    this._onLayoutStart();
+    this._onLayoutChange();
+    this._onLayoutDone();
+  }
+  start() {
+    this._notifyLayoutComplete();
+  }
+  update() {
+    this._notifyLayoutComplete();
+  }
+  resume() {
+    this._notifyLayoutComplete();
+  }
+  updateGraph(graph) {
+    this._graph = graph;
+    this._nodeMap = graph.getNodes().reduce((res, node) => {
+      res[node.getId()] = node;
+      return res;
+    }, {});
+    this._nodePositionMap = graph.getNodes().reduce((res, node) => {
+      res[node.getId()] = this._options.nodePositionAccessor(node);
+      return res;
+    }, {});
+  }
+  setNodePositionAccessor = (accessor) => {
+    this._options.nodePositionAccessor = accessor;
+  };
+  getNodePosition = (node) => this._nodePositionMap[node.getId()];
+  getEdgePosition = (edge) => {
+    const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];
+    const targetPos = this._nodePositionMap[edge.getTargetNodeId()];
+    return {
+      type: EDGE_TYPE.LINE,
+      sourcePosition: sourcePos,
+      targetPosition: targetPos,
+      controlPoints: []
+    };
+  };
+  lockNodePosition = (node, x, y) => {
+    this._nodePositionMap[node.getId()] = [x, y];
+    this._onLayoutChange();
+    this._onLayoutDone();
+  };
+};
+var SimpleLayout = _SimpleLayout;
+__publicField(SimpleLayout, "defaultOptions", {
+  nodePositionAccessor: (node) => [node.getPropertyValue("x"), node.getPropertyValue("y")]
+});
+
+// dist/layouts/d3-force/d3-force-layout.js
+var import_meta = {};
+var _D3ForceLayout = class extends GraphLayout {
+  _name = "D3";
+  _positionsByNodeId = /* @__PURE__ */ new Map();
+  _graph;
+  _worker;
+  constructor(options) {
+    super(options);
+    this._options = {
+      ..._D3ForceLayout.defaultOptions,
       ...options
     };
   }
@@ -1045,10 +1090,10 @@ var D3ForceLayout = class extends BaseLayout {
       if (event.data.type !== "end") {
         return;
       }
-      event.data.nodes.forEach(({ id, ...d3 }) => this._positionsByNodeId.set(id, {
-        ...d3,
+      event.data.nodes.forEach(({ id, ...d32 }) => this._positionsByNodeId.set(id, {
+        ...d32,
         // precompute so that when we return the node position we do not need to do the conversion
-        coordinates: [d3.x, d3.y]
+        coordinates: [d32.x, d32.y]
       }));
       this._onLayoutChange();
       this._onLayoutDone();
@@ -1099,18 +1144,19 @@ var D3ForceLayout = class extends BaseLayout {
     d3Node.fy = null;
   };
 };
-
-// dist/layouts/gpu-force/gpu-force-layout.js
-var import_meta2 = {};
-var defaultOptions2 = {
+var D3ForceLayout = _D3ForceLayout;
+__publicField(D3ForceLayout, "defaultOptions", {
   alpha: 0.3,
   resumeAlpha: 0.1,
   nBodyStrength: -900,
   nBodyDistanceMin: 100,
   nBodyDistanceMax: 400,
   getCollisionRadius: 0
-};
-var GPUForceLayout = class extends BaseLayout {
+});
+
+// dist/layouts/gpu-force/gpu-force-layout.js
+var import_meta2 = {};
+var _GPUForceLayout = class extends GraphLayout {
   _name = "GPU";
   _d3Graph;
   _nodeMap;
@@ -1118,13 +1164,14 @@ var GPUForceLayout = class extends BaseLayout {
   _graph;
   _worker;
   _callbacks;
-  constructor(options) {
-    super(options);
-    this._name = "GPU";
-    this._options = {
-      ...defaultOptions2,
+  constructor(options = {}) {
+    const _options = {
+      ..._GPUForceLayout.defaultOptions,
       ...options
     };
+    super(_options);
+    this._name = "GPU";
+    this._options = _options;
     this._d3Graph = { nodes: [], edges: [] };
     this._nodeMap = {};
     this._edgeMap = {};
@@ -1316,148 +1363,483 @@ var GPUForceLayout = class extends BaseLayout {
     d3Node.fy = null;
   };
 };
+var GPUForceLayout = _GPUForceLayout;
+__publicField(GPUForceLayout, "defaultOptions", {
+  alpha: 0.3,
+  resumeAlpha: 0.1,
+  nBodyStrength: -900,
+  nBodyDistanceMin: 100,
+  nBodyDistanceMax: 400,
+  getCollisionRadius: 0
+});
 
-// dist/layouts/simple-layout/simple-layout.js
-var defaultOptions3 = {
-  nodePositionAccessor: (node) => [node.getPropertyValue("x"), node.getPropertyValue("y")]
+// dist/layouts/experimental/radial-layout.js
+var traverseTree = (nodeId, nodeMap) => {
+  const node = nodeMap[nodeId];
+  if (node.isLeaf) {
+    return node;
+  }
+  return {
+    ...node,
+    children: node.children.map((nid) => traverseTree(nid, nodeMap))
+  };
 };
-var SimpleLayout = class extends BaseLayout {
-  _name = "SimpleLayout";
+var getLeafNodeCount = (node, count) => {
+  if (!node.children || node.children.length === 0) {
+    return count + 1;
+  }
+  const sum = node.children.reduce((res, c) => {
+    return res + getLeafNodeCount(c, 0);
+  }, 0);
+  return count + sum;
+};
+var getTreeDepth = (node, depth = 0) => {
+  if (node.isLeaf) {
+    return depth;
+  }
+  return getTreeDepth(node.children[0], depth + 1);
+};
+var getPath = (node, targetId, path) => {
+  if (node.id === targetId) {
+    path.push(node.id);
+    return true;
+  }
+  const inChildren = node.children && node.children.some((c) => getPath(c, targetId, path));
+  if (inChildren) {
+    path.push(node.id);
+    return true;
+  }
+  return false;
+};
+var _RadialLayout = class extends GraphLayout {
+  _name = "RadialLayout";
   _graph = null;
-  _nodeMap = {};
-  _nodePositionMap = {};
+  // custom layout data structure
+  _hierarchicalPoints = {};
+  nestedTree;
   constructor(options = {}) {
-    super({ ...defaultOptions3, ...options });
+    super(options);
+    this._options = {
+      ..._RadialLayout.defaultOptions,
+      ...options
+    };
   }
   initializeGraph(graph) {
     this.updateGraph(graph);
   }
-  _notifyLayoutComplete() {
-    this._onLayoutStart();
+  updateGraph(graph) {
+    this._graph = graph;
+  }
+  start() {
+    const nodeCount = this._graph.getNodes().length;
+    if (nodeCount === 0) {
+      return;
+    }
+    const { tree } = this._options;
+    if (!tree || tree.length === 0) {
+      return;
+    }
+    const { radius } = this._options;
+    const unitAngle = 360 / nodeCount;
+    const rootNode = tree[0];
+    const nodeMap = tree.reduce((res, node) => {
+      res[node.id] = {
+        ...node,
+        isLeaf: !node.children || node.children.length === 0
+      };
+      return res;
+    }, {});
+    this.nestedTree = traverseTree(rootNode.id, nodeMap);
+    const totalLevels = getTreeDepth(this.nestedTree, 0);
+    const distanceBetweenLevels = radius / (totalLevels - 1);
+    const calculatePosition = (node, level, startAngle, positionMap) => {
+      const isRoot = node.id === rootNode.id;
+      if (node.children && node.children.length !== 0) {
+        const groupSize = getLeafNodeCount(node, 0);
+        positionMap[node.id] = isRoot ? [0, 0] : rotate(0, 0, 0, distanceBetweenLevels * (level + 1), startAngle + unitAngle * (groupSize / 2));
+        let tempAngle = startAngle;
+        node.children.forEach((n) => {
+          calculatePosition(n, level + 1, tempAngle, positionMap);
+          tempAngle += getLeafNodeCount(n, 0) * unitAngle;
+        });
+      } else {
+        positionMap[node.id] = rotate(0, 0, 0, distanceBetweenLevels * (level + 1), startAngle + unitAngle);
+      }
+    };
+    this._hierarchicalPoints = {};
+    calculatePosition(this.nestedTree, 0, 0, this._hierarchicalPoints);
     this._onLayoutChange();
     this._onLayoutDone();
   }
-  start() {
-    this._notifyLayoutComplete();
+  getNodePosition = (node) => {
+    return this._hierarchicalPoints[node.id];
+  };
+  // spline curve version
+  getEdgePosition = (edge) => {
+    const sourceNodeId = edge.getSourceNodeId();
+    const targetNodeId = edge.getTargetNodeId();
+    const sourceNodePos = this._hierarchicalPoints[sourceNodeId];
+    const targetNodePos = this._hierarchicalPoints[targetNodeId];
+    const sourcePath = [];
+    getPath(this.nestedTree, sourceNodeId, sourcePath);
+    const targetPath = [];
+    getPath(this.nestedTree, targetNodeId, targetPath);
+    const totalLevels = sourcePath.length;
+    let commonAncestorLevel = totalLevels - 1;
+    for (let i = 0; i < totalLevels; i++) {
+      if (sourcePath[i] === targetPath[i]) {
+        commonAncestorLevel = i;
+        break;
+      }
+    }
+    const wayPoints = [];
+    for (let i = 1; i <= commonAncestorLevel; i++) {
+      const nodeId = sourcePath[i];
+      wayPoints.push(this._hierarchicalPoints[nodeId]);
+    }
+    for (let i = commonAncestorLevel - 1; i > 0; i--) {
+      const nodeId = targetPath[i];
+      wayPoints.push(this._hierarchicalPoints[nodeId]);
+    }
+    return {
+      type: EDGE_TYPE.SPLINE_CURVE,
+      sourcePosition: sourceNodePos,
+      targetPosition: targetNodePos,
+      controlPoints: wayPoints
+    };
+  };
+  lockNodePosition = (node, x, y) => {
+    this._hierarchicalPoints[node.id] = [x, y];
+    this._onLayoutChange();
+    this._onLayoutDone();
+  };
+};
+var RadialLayout = _RadialLayout;
+__publicField(RadialLayout, "defaultOptions", {
+  radius: 500
+});
+function rotate(cx, cy, x, y, angle) {
+  const radians = Math.PI / 180 * angle;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const nx = cos * (x - cx) + sin * (y - cy) + cx;
+  const ny = cos * (y - cy) - sin * (x - cx) + cy;
+  return [nx, ny];
+}
+
+// dist/layouts/experimental/force-multi-graph-layout.js
+var d3 = __toESM(require("d3-force"), 1);
+var _ForceMultiGraphLayout = class extends GraphLayout {
+  _name = "ForceMultiGraphLayout";
+  _graph;
+  // d3 part
+  // custom graph data
+  _d3Graph = { nodes: [], edges: [] };
+  _nodeMap = {};
+  _edgeMap = {};
+  _simulator;
+  constructor(options = {}) {
+    super(options);
+    this._options = {
+      ..._ForceMultiGraphLayout.defaultOptions,
+      ...options
+    };
   }
-  update() {
-    this._notifyLayoutComplete();
+  initializeGraph(graph) {
+    this.updateGraph(graph);
+  }
+  _strength = (d3Edge) => {
+    if (d3Edge.isVirtual) {
+      return 1 / d3Edge.edgeCount;
+    }
+    const sourceDegree = this._graph.getDegree(d3Edge.source.id);
+    const targetDegree = this._graph.getDegree(d3Edge.target.id);
+    return 1 / Math.min(sourceDegree, targetDegree);
+  };
+  _generateSimulator() {
+    if (this._simulator) {
+      this._simulator.on("tick", null).on("end", null);
+      this._simulator = null;
+    }
+    const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax } = this._options;
+    const g = this._d3Graph;
+    this._simulator = d3.forceSimulation(g.nodes).force("edge", d3.forceLink(g.edges).id((n) => n.id).strength(this._strength)).force("charge", d3.forceManyBody().strength(nBodyStrength).distanceMin(nBodyDistanceMin).distanceMax(nBodyDistanceMax)).force("center", d3.forceCenter()).alpha(alpha);
+    this._simulator.on("tick", this._onLayoutChange).on("end", this._onLayoutDone);
+  }
+  start() {
+    this._generateSimulator();
+    this._simulator.restart();
   }
   resume() {
-    this._notifyLayoutComplete();
+    this._simulator.restart();
+  }
+  stop() {
+    this._simulator.stop();
   }
   updateGraph(graph) {
     this._graph = graph;
-    this._nodeMap = graph.getNodes().reduce((res, node) => {
-      res[node.getId()] = node;
-      return res;
-    }, {});
-    this._nodePositionMap = graph.getNodes().reduce((res, node) => {
-      res[node.getId()] = this._options.nodePositionAccessor(node);
+    const newNodeMap = {};
+    const newD3Nodes = graph.getNodes().map((node) => {
+      const oldD3Node = this._nodeMap[node.id];
+      const newD3Node = oldD3Node ? oldD3Node : { id: node.id };
+      newNodeMap[node.id] = newD3Node;
+      return newD3Node;
+    });
+    const nodePairs = graph.getEdges().reduce((res, edge) => {
+      const nodes = [edge.getSourceNodeId(), edge.getTargetNodeId()];
+      const pairId = nodes.sort().toString();
+      if (!res[pairId]) {
+        res[pairId] = [edge];
+      } else {
+        res[pairId].push(edge);
+      }
       return res;
     }, {});
+    const newD3Edges = [];
+    const newEdgeMap = {};
+    Object.keys(nodePairs).forEach((pairId) => {
+      const betweenEdges = nodePairs[pairId];
+      const firstEdge = betweenEdges[0];
+      if (betweenEdges.length === 1) {
+        const newD3Edge2 = {
+          type: EDGE_TYPE.LINE,
+          id: firstEdge.getId(),
+          source: newNodeMap[firstEdge.getSourceNodeId()],
+          target: newNodeMap[firstEdge.getTargetNodeId()],
+          isVirtual: false
+        };
+        newEdgeMap[firstEdge.getId()] = newD3Edge2;
+        newD3Edges.push(newD3Edge2);
+        return;
+      }
+      const newD3Edge = {
+        type: EDGE_TYPE.LINE,
+        id: pairId,
+        source: newNodeMap[firstEdge.getSourceNodeId()],
+        target: newNodeMap[firstEdge.getTargetNodeId()],
+        isVirtual: true,
+        edgeCount: betweenEdges.length
+      };
+      newEdgeMap[pairId] = newD3Edge;
+      newD3Edges.push(newD3Edge);
+      betweenEdges.forEach((e, idx) => {
+        newEdgeMap[e.id] = {
+          type: EDGE_TYPE.SPLINE_CURVE,
+          id: e.id,
+          source: newNodeMap[e.getSourceNodeId()],
+          target: newNodeMap[e.getTargetNodeId()],
+          virtualEdgeId: pairId,
+          isVirtual: true,
+          index: idx
+        };
+      });
+    });
+    this._nodeMap = newNodeMap;
+    this._d3Graph.nodes = newD3Nodes;
+    this._edgeMap = newEdgeMap;
+    this._d3Graph.edges = newD3Edges;
   }
-  setNodePositionAccessor = (accessor) => {
-    this._options.nodePositionAccessor = accessor;
+  getNodePosition = (node) => {
+    const d3Node = this._nodeMap[node.id];
+    if (d3Node) {
+      return [d3Node.x, d3Node.y];
+    }
+    return [0, 0];
   };
-  getNodePosition = (node) => this._nodePositionMap[node.getId()];
   getEdgePosition = (edge) => {
-    const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];
-    const targetPos = this._nodePositionMap[edge.getTargetNodeId()];
+    const d3Edge = this._edgeMap[edge.id];
+    if (d3Edge) {
+      if (!d3Edge.isVirtual) {
+        return {
+          type: EDGE_TYPE.LINE,
+          sourcePosition: [d3Edge.source.x, d3Edge.source.y],
+          targetPosition: [d3Edge.target.x, d3Edge.target.y],
+          controlPoints: []
+        };
+      }
+      const virtualEdge = this._edgeMap[d3Edge.virtualEdgeId];
+      const edgeCount = virtualEdge.edgeCount;
+      const sourcePosition = [virtualEdge.source.x, virtualEdge.source.y];
+      const targetPosition = [virtualEdge.target.x, virtualEdge.target.y];
+      const distance = Math.hypot(sourcePosition[0] - targetPosition[0], sourcePosition[1] - targetPosition[1]);
+      const index = d3Edge.index;
+      const direction = index % 2 ? 1 : -1;
+      const symmetricShape = edgeCount % 2 === 0;
+      const offset = Math.max(distance / 10, 5) * (symmetricShape ? Math.floor(index / 2 + 1) : Math.ceil(index / 2));
+      const controlPoint = computeControlPoint(sourcePosition, targetPosition, direction, offset);
+      return {
+        type: EDGE_TYPE.SPLINE_CURVE,
+        sourcePosition,
+        targetPosition,
+        controlPoints: [controlPoint]
+      };
+    }
     return {
       type: EDGE_TYPE.LINE,
-      sourcePosition: sourcePos,
-      targetPosition: targetPos,
+      sourcePosition: [0, 0],
+      targetPosition: [0, 0],
       controlPoints: []
     };
   };
   lockNodePosition = (node, x, y) => {
-    this._nodePositionMap[node.getId()] = [x, y];
+    const d3Node = this._nodeMap[node.id];
+    d3Node.x = x;
+    d3Node.y = y;
     this._onLayoutChange();
     this._onLayoutDone();
   };
 };
+var ForceMultiGraphLayout = _ForceMultiGraphLayout;
+__publicField(ForceMultiGraphLayout, "defaultOptions", {
+  alpha: 3,
+  nBodyStrength: -1200,
+  nBodyDistanceMin: 100,
+  nBodyDistanceMax: 1400
+});
+function computeControlPoint(source, target, direction, offset) {
+  const midPoint = [(source[0] + target[0]) / 2, (source[1] + target[1]) / 2];
+  const dx = target[0] - source[0];
+  const dy = target[1] - source[1];
+  const normal = [dy, -dx];
+  const length = Math.sqrt(Math.pow(normal[0], 2) + Math.pow(normal[1], 2));
+  const normalized = [normal[0] / length, normal[1] / length];
+  return [
+    midPoint[0] + normalized[0] * offset * direction,
+    midPoint[1] + normalized[1] * offset * direction
+  ];
+}
 
-// dist/utils/create-graph.js
-function createGraph({ name, nodes, edges, nodeParser, edgeParser }) {
-  const graph = new Graph();
-  const graphName = name || Date.now();
-  graph.setGraphName(graphName);
-  const glNodes = nodes.map((node) => {
-    const { id } = nodeParser(node);
-    return new Node({
-      id,
-      data: node
-    });
-  });
-  graph.batchAddNodes(glNodes);
-  const glEdges = edges.map((edge) => {
-    const { id, sourceId, targetId, directed } = edgeParser(edge);
-    return new Edge({
-      id,
-      sourceId,
-      targetId,
-      directed,
-      data: edge
-    });
-  });
-  graph.batchAddEdges(glEdges);
-  return graph;
-}
-
-// dist/loaders/node-parsers.js
-function basicNodeParser(node) {
-  if (node.id === void 0) {
-    log.error("Invalid node: id is missing.")();
-    return null;
-  }
-  return { id: node.id };
-}
-
-// dist/loaders/edge-parsers.js
-function basicEdgeParser(edge) {
-  const { id, directed, sourceId, targetId } = edge;
-  if (sourceId === void 0 || targetId === void 0) {
-    log.error("Invalid edge: sourceId or targetId is missing.")();
-    return null;
-  }
-  return {
-    id,
-    directed: directed || false,
-    sourceId,
-    targetId
-  };
-}
-
-// dist/loaders/json-loader.js
-var JSONLoader = ({ json, nodeParser = basicNodeParser, edgeParser = basicEdgeParser }) => {
-  const { name = "default", nodes, edges } = json;
-  if (!nodes) {
-    log.error("Invalid graph: nodes is missing.")();
-    return null;
-  }
-  const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
-  return graph;
-};
-
-// dist/utils/layer-utils.js
-var mixedGetPosition = (getPosition, getOffset2) => {
-  if (!getOffset2) {
-    return getPosition;
-  }
-  if (typeof getOffset2 === "function") {
-    return (d) => {
-      const [x, y] = getPosition(d);
-      const [offX2, offY2] = getOffset2(d);
-      return [x + offX2, y + offY2];
+// dist/layouts/experimental/hive-plot-layout.js
+var _HivePlotLayout = class extends GraphLayout {
+  _name = "HivePlot";
+  _graph;
+  _totalAxis;
+  _axis;
+  _nodeMap = {};
+  _nodePositionMap = {};
+  constructor(options = {}) {
+    super(options);
+    this._options = {
+      ..._HivePlotLayout.defaultOptions,
+      ...options
     };
   }
-  const [offX, offY] = getOffset2;
-  return (d) => {
-    const [x, y] = getPosition(d);
-    return [x + offX, y + offY];
+  initializeGraph(graph) {
+    this.updateGraph(graph);
+  }
+  updateGraph(graph) {
+    const { getNodeAxis, innerRadius, outerRadius } = this._options;
+    this._graph = graph;
+    this._nodeMap = graph.getNodes().reduce((res, node) => {
+      res[node.getId()] = node;
+      return res;
+    }, {});
+    this._axis = graph.getNodes().reduce((res, node) => {
+      const axis = getNodeAxis(node);
+      if (!res[axis]) {
+        res[axis] = [];
+      }
+      res[axis].push(node);
+      return res;
+    }, {});
+    this._axis = Object.keys(this._axis).reduce((res, axis) => {
+      const bucketedNodes = this._axis[axis];
+      const sortedNodes = bucketedNodes.sort((a, b) => {
+        if (a.getDegree() > b.getDegree()) {
+          return 1;
+        }
+        if (a.getDegree() === b.getDegree()) {
+          return 0;
+        }
+        return -1;
+      });
+      res[axis] = sortedNodes;
+      return res;
+    }, {});
+    this._totalAxis = Object.keys(this._axis).length;
+    const center = [0, 0];
+    const angleInterval = 360 / Object.keys(this._axis).length;
+    this._nodePositionMap = Object.keys(this._axis).reduce((res, axis, axisIdx) => {
+      const axisAngle = angleInterval * axisIdx;
+      const bucketedNodes = this._axis[axis];
+      const interval = (outerRadius - innerRadius) / bucketedNodes.length;
+      bucketedNodes.forEach((node, idx) => {
+        const radius = innerRadius + idx * interval;
+        const x = Math.cos(axisAngle / 180 * Math.PI) * radius + center[0];
+        const y = Math.sin(axisAngle / 180 * Math.PI) * radius + center[1];
+        res[node.getId()] = [x, y];
+      });
+      return res;
+    }, {});
+  }
+  start() {
+    this._onLayoutChange();
+    this._onLayoutDone();
+  }
+  getNodePosition = (node) => this._nodePositionMap[node.getId()];
+  getEdgePosition = (edge) => {
+    const { getNodeAxis } = this._options;
+    const sourceNodeId = edge.getSourceNodeId();
+    const targetNodeId = edge.getTargetNodeId();
+    const sourcePosition = this._nodePositionMap[sourceNodeId];
+    const targetPosition = this._nodePositionMap[targetNodeId];
+    const sourceNode = this._nodeMap[sourceNodeId];
+    const targetNode = this._nodeMap[targetNodeId];
+    const sourceNodeAxis = getNodeAxis(sourceNode);
+    const targetNodeAxis = getNodeAxis(targetNode);
+    if (sourceNodeAxis === targetNodeAxis) {
+      return {
+        type: EDGE_TYPE.LINE,
+        sourcePosition,
+        targetPosition,
+        controlPoints: []
+      };
+    }
+    const controlPoint = computeControlPoint2({
+      sourcePosition,
+      sourceNodeAxis,
+      targetPosition,
+      targetNodeAxis,
+      totalAxis: this._totalAxis
+    });
+    return {
+      type: EDGE_TYPE.SPLINE_CURVE,
+      sourcePosition,
+      targetPosition,
+      controlPoints: [controlPoint]
+    };
+  };
+  lockNodePosition = (node, x, y) => {
+    this._nodePositionMap[node.id] = [x, y];
+    this._onLayoutChange();
+    this._onLayoutDone();
   };
 };
+var HivePlotLayout = _HivePlotLayout;
+__publicField(HivePlotLayout, "defaultOptions", {
+  innerRadius: 100,
+  outerRadius: 500,
+  getNodeAxis: (node) => node.getPropertyValue("group")
+});
+function computeControlPoint2({ sourcePosition, sourceNodeAxis, targetPosition, targetNodeAxis, totalAxis }) {
+  const halfAxis = (totalAxis - 1) / 2;
+  const sameSide = sourceNodeAxis <= halfAxis && targetNodeAxis <= halfAxis || sourceNodeAxis > halfAxis && targetNodeAxis > halfAxis;
+  const direction = sameSide && sourceNodeAxis <= halfAxis && targetNodeAxis <= halfAxis ? 1 : -1;
+  const source = sourceNodeAxis < targetNodeAxis && sameSide ? sourcePosition : targetPosition;
+  const target = sourceNodeAxis < targetNodeAxis && sameSide ? targetPosition : sourcePosition;
+  const distance = Math.hypot(source[0] - target[0], source[1] - target[1]);
+  const offset = distance * 0.2;
+  const midPoint = [(source[0] + target[0]) / 2, (source[1] + target[1]) / 2];
+  const dx = target[0] - source[0];
+  const dy = target[1] - source[1];
+  const normal = [dy, -dx];
+  const length = Math.hypot(dy, -dx);
+  const normalized = [normal[0] / length, normal[1] / length];
+  return [
+    midPoint[0] + normalized[0] * offset * direction,
+    midPoint[1] + normalized[1] * offset * direction
+  ];
+}
 
 // dist/layers/graph-layer.js
 var import_core16 = require("@deck.gl/core");
@@ -1845,6 +2227,25 @@ var Stylesheet = class {
   }
 };
 
+// dist/utils/layer-utils.js
+var mixedGetPosition = (getPosition, getOffset2) => {
+  if (!getOffset2) {
+    return getPosition;
+  }
+  if (typeof getOffset2 === "function") {
+    return (d) => {
+      const [x, y] = getPosition(d);
+      const [offX2, offY2] = getOffset2(d);
+      return [x + offX2, y + offY2];
+    };
+  }
+  const [offX, offY] = getOffset2;
+  return (d) => {
+    const [x, y] = getPosition(d);
+    return [x + offX, y + offY];
+  };
+};
+
 // dist/core/interaction-manager.js
 var NODE_TO_EDGE_STATE_MAP = {
   [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,
@@ -2182,8 +2583,6 @@ var fs = (
 
 precision highp float;
 
-uniform float cornerRadius;
-
 varying vec4 vFillColor;
 varying vec2 unitPosition;
 
@@ -2192,7 +2591,7 @@ void main(void) {
   float distToCenter = length(unitPosition);
 
   /* Calculate the cutoff radius for the rounded corners */
-  float threshold = sqrt(2.0) * (1.0 - cornerRadius) + 1.0 * cornerRadius;
+  float threshold = sqrt(2.0) * (1.0 - roundedRectangle.cornerRadius) + 1.0 * roundedRectangle.cornerRadius;
   if (distToCenter <= threshold) {
     gl_FragColor = vFillColor;
   } else {
@@ -2207,19 +2606,33 @@ void main(void) {
 );
 
 // dist/layers/node-layers/rounded-rectangle-layer.js
+var uniformBlock = `uniform roundedRectangleUniforms {
+  float cornerRadius;
+} roundedRectangle;
+`;
+var roundedRectangleUniforms = {
+  name: "roundedRectangle",
+  vs: uniformBlock,
+  fs: uniformBlock,
+  uniformTypes: {
+    cornerRadius: "f32"
+  }
+};
 var RoundedRectangleLayer = class extends RectangleLayer {
-  draw({ uniforms }) {
-    super.draw({
-      uniforms: {
-        ...uniforms,
-        cornerRadius: this.props.cornerRadius
-      }
-    });
+  draw(props) {
+    const { cornerRadius } = this.props;
+    const roundedRectangleProps = { cornerRadius };
+    const model = this.state.model;
+    model.shaderInputs.setProps({ roundedRectangle: roundedRectangleProps });
+    super.draw(props);
   }
   getShaders() {
-    return Object.assign({}, super.getShaders(void 0), {
-      fs
-    });
+    const shaders = super.getShaders(void 0);
+    return {
+      ...shaders,
+      fs,
+      modules: [...shaders.modules, roundedRectangleUniforms]
+    };
   }
 };
 __publicField(RoundedRectangleLayer, "layerName", "RoundedRectangleLayer");
@@ -2229,7 +2642,7 @@ RoundedRectangleLayer.defaultProps = {
   cornerRadius: 0.1
 };
 
-// dist/layers/node-layers/path-rounded-rectange-layer.js
+// dist/layers/node-layers/path-rounded-rectangle-layer.js
 var import_core6 = require("@deck.gl/core");
 var import_layers5 = require("@deck.gl/layers");
 
@@ -2310,7 +2723,7 @@ function getPointsForArc(sweepAngle, degreeFactor, startAngle, circlePoint, radi
   return points;
 }
 
-// dist/layers/node-layers/path-rounded-rectange-layer.js
+// dist/layers/node-layers/path-rounded-rectangle-layer.js
 var generateRoundedRectangle = (node, { getWidth, getHeight, getPosition, getCornerRadius }) => {
   const pos = getPosition(node);
   const width = typeof getWidth === "function" ? getWidth(node) : getWidth;
@@ -3360,6 +3773,69 @@ var FlowLayer = class extends import_core15.CompositeLayer {
 };
 __publicField(FlowLayer, "layerName", "FlowLayer");
 
+// dist/loaders/create-graph.js
+function createGraph(props) {
+  const { name, nodes, edges, nodeParser, edgeParser } = props;
+  const graph = new Graph();
+  const graphName = name || Date.now();
+  graph.setGraphName(graphName);
+  const glNodes = nodes.map((node) => {
+    const { id } = nodeParser(node);
+    return new Node({
+      id,
+      data: node
+    });
+  });
+  graph.batchAddNodes(glNodes);
+  const glEdges = edges.map((edge) => {
+    const { id, sourceId, targetId, directed } = edgeParser(edge);
+    return new Edge({
+      id,
+      sourceId,
+      targetId,
+      directed,
+      data: edge
+    });
+  });
+  graph.batchAddEdges(glEdges);
+  return graph;
+}
+
+// dist/loaders/node-parsers.js
+function basicNodeParser(node) {
+  if (node.id === void 0) {
+    log.error("Invalid node: id is missing.")();
+    return null;
+  }
+  return { id: node.id };
+}
+
+// dist/loaders/edge-parsers.js
+function basicEdgeParser(edge) {
+  const { id, directed, sourceId, targetId } = edge;
+  if (sourceId === void 0 || targetId === void 0) {
+    log.error("Invalid edge: sourceId or targetId is missing.")();
+    return null;
+  }
+  return {
+    id,
+    directed: directed || false,
+    sourceId,
+    targetId
+  };
+}
+
+// dist/loaders/json-loader.js
+var JSONLoader = ({ json, nodeParser = basicNodeParser, edgeParser = basicEdgeParser }) => {
+  const { name = "default", nodes, edges } = json;
+  if (!nodes) {
+    log.error("Invalid graph: nodes is missing.")();
+    return null;
+  }
+  const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
+  return graph;
+};
+
 // dist/layers/graph-layer.js
 var NODE_LAYER_MAP = {
   [NODE_TYPE.RECTANGLE]: RectangleLayer,
@@ -3380,36 +3856,9 @@ var SHARED_LAYER_PROPS = {
     depthTest: false
   }
 };
-var defaultProps3 = {
-  // an array of styles for layers
-  nodeStyle: [],
-  nodeEvents: {
-    onMouseLeave: () => {
-    },
-    onHover: () => {
-    },
-    onMouseEnter: () => {
-    },
-    onClick: () => {
-    },
-    onDrag: () => {
-    }
-  },
-  edgeStyle: {
-    color: "black",
-    strokeWidth: 1,
-    // an array of styles for layers
-    decorators: []
-  },
-  edgeEvents: {
-    onClick: () => {
-    },
-    onHover: () => {
-    }
-  },
-  enableDragging: false
-};
 var GraphLayer = class extends import_core16.CompositeLayer {
+  // @ts-expect-error Some typescript confusion due to override of base class state
+  state;
   forceUpdate = () => {
     if (this.context && this.context.layerManager) {
       this.setNeedsUpdate();
@@ -3418,24 +3867,57 @@ var GraphLayer = class extends import_core16.CompositeLayer {
   };
   constructor(props) {
     super(props);
-    props.engine.addEventListener("onLayoutChange", this.forceUpdate);
   }
   initializeState() {
-    const interactionManager = new InteractionManager(this.props, () => this.forceUpdate());
-    this.state = { interactionManager };
+    this.state = {
+      interactionManager: new InteractionManager(this.props, () => this.forceUpdate())
+    };
+    const engine = this.props.engine;
+    this._setGraphEngine(engine);
   }
   shouldUpdateState({ changeFlags }) {
     return changeFlags.dataChanged || changeFlags.propsChanged;
   }
-  updateState({ props }) {
-    this.state.interactionManager.updateProps(props);
+  updateState({ props, oldProps, changeFlags }) {
+    if (changeFlags.dataChanged && props.data && !(Array.isArray(props.data) && props.data.length === 0)) {
+      const graph = this.props.graphLoader({ json: props.data });
+      const layout = this.props.layout;
+      const graphEngine = new GraphEngine({ graph, layout });
+      this._setGraphEngine(graphEngine);
+      this.state.interactionManager.updateProps(props);
+      this.forceUpdate();
+    } else if (changeFlags.propsChanged && props.graph !== oldProps.graph) {
+      const graphEngine = new GraphEngine({ graph: props.graph, layout: props.layout });
+      this._setGraphEngine(graphEngine);
+      this.state.interactionManager.updateProps(props);
+      this.forceUpdate();
+    }
   }
   finalize() {
-    this.props.engine.removeEventListener("onLayoutChange", this.forceUpdate);
+    this._removeGraphEngine();
+  }
+  _setGraphEngine(graphEngine) {
+    if (graphEngine === this.state.graphEngine) {
+      return;
+    }
+    this._removeGraphEngine();
+    if (graphEngine) {
+      this.state.graphEngine = graphEngine;
+      this.state.graphEngine.run();
+      this.state.graphEngine.addEventListener("onLayoutChange", this.forceUpdate);
+    }
+  }
+  _removeGraphEngine() {
+    if (this.state.graphEngine) {
+      this.state.graphEngine.removeEventListener("onLayoutChange", this.forceUpdate);
+      this.state.graphEngine.clear();
+      this.state.graphEngine = null;
+    }
   }
   createNodeLayers() {
-    const { engine, nodeStyle } = this.props;
-    if (!nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+    const engine = this.state.graphEngine;
+    const { nodeStyle } = this.props;
+    if (!engine || !nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
       return [];
     }
     return nodeStyle.filter(Boolean).map((style, idx) => {
@@ -3466,8 +3948,9 @@ var GraphLayer = class extends import_core16.CompositeLayer {
     });
   }
   createEdgeLayers() {
-    const { edgeStyle, engine } = this.props;
-    if (!edgeStyle) {
+    const engine = this.state.graphEngine;
+    const { edgeStyle } = this.props;
+    if (!engine || !edgeStyle) {
       return [];
     }
     return (Array.isArray(edgeStyle) ? edgeStyle : [edgeStyle]).filter(Boolean).flatMap((style, idx) => {
@@ -3532,9 +4015,273 @@ var GraphLayer = class extends import_core16.CompositeLayer {
     return [this.createEdgeLayers(), this.createNodeLayers()];
   }
 };
+__publicField(GraphLayer, "layerName", "GraphLayer");
 __publicField(GraphLayer, "defaultProps", {
-  pickable: true
+  // Composite layer props
+  // @ts-expect-error composite layer props
+  pickable: true,
+  // Graph props
+  graphLoader: JSONLoader,
+  nodeStyle: [],
+  nodeEvents: {
+    onMouseLeave: () => {
+    },
+    onHover: () => {
+    },
+    onMouseEnter: () => {
+    },
+    onClick: () => {
+    },
+    onDrag: () => {
+    }
+  },
+  edgeStyle: {
+    stroke: "black",
+    strokeWidth: 1,
+    // an array of styles for layers
+    decorators: []
+  },
+  edgeEvents: {
+    onClick: () => {
+    },
+    onHover: () => {
+    }
+  },
+  enableDragging: false
+});
+
+// dist/widgets/view-control-widget.js
+var import_jsx_runtime2 = require("preact/jsx-runtime");
+var import_preact2 = require("preact");
+
+// dist/widgets/long-press-button.js
+var import_jsx_runtime = require("preact/jsx-runtime");
+var import_preact = require("preact");
+var LongPressButton = class extends import_preact.Component {
+  buttonPressTimer = null;
+  _repeat = () => {
+    if (this.buttonPressTimer) {
+      this.props.onClick();
+      this.buttonPressTimer = setTimeout(this._repeat, 100);
+    }
+  };
+  _handleButtonPress = () => {
+    this.buttonPressTimer = setTimeout(this._repeat, 100);
+  };
+  _handleButtonRelease = () => {
+    if (this.buttonPressTimer) {
+      clearTimeout(this.buttonPressTimer);
+    }
+    this.buttonPressTimer = null;
+  };
+  render() {
+    return (0, import_jsx_runtime.jsx)("div", { className: "deck-widget-button", children: (0, import_jsx_runtime.jsx)("div", { style: {
+      pointerEvents: "auto"
+    }, onMouseDown: (event) => {
+      this._handleButtonPress();
+      document.addEventListener("mouseup", this._handleButtonRelease, { once: true });
+    }, children: this.props.children }) });
+  }
+};
+
+// dist/widgets/view-control-widget.js
+var ViewControlWrapper = ({ children }) => (0, import_jsx_runtime2.jsxs)("div", { style: {
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "column",
+  position: "absolute",
+  zIndex: 99,
+  userSelect: "none"
+}, children: [" ", children, " "] });
+var NavigationButtonContainer = ({ children }) => (0, import_jsx_runtime2.jsxs)("div", { style: {
+  background: "#f7f7f7",
+  borderRadius: "23px",
+  border: "0.5px solid #eaeaea",
+  boxShadow: "inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49)",
+  height: "46px",
+  width: "46px"
+}, children: [" ", children, " "] });
+var NavigationButton = (props) => (0, import_jsx_runtime2.jsxs)("div", { onClick: props.onClick, style: {
+  color: "#848484",
+  cursor: "pointer",
+  position: "absolute",
+  left: props.left,
+  top: props.top,
+  transform: `rotate(${props.rotate || 0}deg)`
+  // &:hover,
+  // &:active {
+  //   color: #00ade6;
+  // }
+}, children: [" ", props.children, " "] });
+var ZoomControlWrapper = ({ children }) => (0, import_jsx_runtime2.jsxs)("div", { style: {
+  alignItems: "center",
+  background: "#f7f7f7",
+  border: "0.5px solid #eaeaea",
+  display: "flex",
+  flexDirection: "column",
+  marginTop: "6px",
+  padding: "2px 0",
+  width: "18px"
+}, children: [" ", children, " "] });
+var VerticalSlider = ({ children }) => (0, import_jsx_runtime2.jsxs)("div", { style: {
+  display: "inline-block",
+  height: "100px",
+  padding: "0",
+  width: "10px"
+  // > input[type='range'][orient='vertical'] {
+  //   -webkit-appearance: slider-vertical;
+  //   height: 100px;
+  //   padding: 0;
+  //   margin: 0;
+  //   width: 10px;
+  // }
+}, children: [" ", children, " "] });
+var ZoomControlButton = ({ children }) => (0, import_jsx_runtime2.jsxs)("div", { style: {
+  cursor: "pointer",
+  fontSize: "14px",
+  fontWeight: 500,
+  margin: "-4px"
+  // &:hover,
+  // &:active {
+  //   color: #00ade6;
+  // }
+}, children: [" ", children, " "] });
+var ViewControl = class extends import_preact2.Component {
+  // pan actions
+  panUp = () => this.props.panBy(0, this.props.deltaPan);
+  panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);
+  panLeft = () => this.props.panBy(this.props.deltaPan, 0);
+  panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);
+  // zoom actions
+  zoomIn = () => this.props.zoomBy(this.props.deltaZoom);
+  zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);
+  onChangeZoomLevel = (evt) => {
+    const delta = evt.target.value - this.props.zoomLevel;
+    this.props.zoomBy(delta);
+  };
+  render() {
+    const buttons = [
+      { top: -2, left: 14, rotate: 0, onClick: this.panUp, content: "\u25B2", key: "up" },
+      { top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: "\u25C0", key: "left" },
+      { top: 12, left: 28, rotate: 90, onClick: this.panRight, content: "\u25B6", key: "right" },
+      { top: 25, left: 14, rotate: 180, onClick: this.panDown, content: "\u25BC", key: "down" }
+    ];
+    return (0, import_jsx_runtime2.jsxs)(ViewControlWrapper, { children: [(0, import_jsx_runtime2.jsxs)(NavigationButtonContainer, { children: [buttons.map((b) => (0, import_jsx_runtime2.jsx)(NavigationButton, { top: `${b.top}px`, left: `${b.left}px`, rotate: b.rotate, children: (0, import_jsx_runtime2.jsx)(LongPressButton, { onClick: b.onClick, children: b.content }) }, b.key)), (0, import_jsx_runtime2.jsx)(NavigationButton, { top: "12px", left: "16px", onClick: () => {
+    }, children: "\xA4" })] }), (0, import_jsx_runtime2.jsxs)(ZoomControlWrapper, { children: [(0, import_jsx_runtime2.jsx)(ZoomControlButton, { children: (0, import_jsx_runtime2.jsx)(LongPressButton, { onClick: this.zoomIn, children: "+" }) }), (0, import_jsx_runtime2.jsx)(VerticalSlider, { children: (0, import_jsx_runtime2.jsx)("input", {
+      type: "range",
+      value: this.props.zoomLevel,
+      min: this.props.minZoom,
+      max: this.props.maxZoom,
+      step: this.props.deltaZoom,
+      onChange: this.onChangeZoomLevel,
+      /* @ts-expect-error TODO */
+      orient: "vertical"
+    }) }), (0, import_jsx_runtime2.jsx)(ZoomControlButton, { children: (0, import_jsx_runtime2.jsx)(LongPressButton, { onClick: this.zoomOut, children: "-" }) })] })] });
+  }
+};
+__publicField(ViewControl, "displayName", "ViewControl");
+__publicField(ViewControl, "defaultProps", {
+  id: void 0,
+  viewId: void 0,
+  placement: "top-left",
+  fitBounds: () => {
+  },
+  panBy: () => {
+  },
+  zoomBy: () => {
+  },
+  zoomLevel: 1,
+  deltaPan: 10,
+  deltaZoom: 0.1,
+  minZoom: 0.1,
+  maxZoom: 1,
+  style: {},
+  className: ""
 });
-GraphLayer.layerName = "GraphLayer";
-GraphLayer.defaultProps = defaultProps3;
+var ViewControlWidget = class {
+  id = "zoom";
+  props;
+  placement = "top-left";
+  orientation = "vertical";
+  viewId = null;
+  viewports = {};
+  deck;
+  element;
+  constructor(props) {
+    this.props = { ...ViewControl.defaultProps, ...props };
+    this.id = props.id || "zoom";
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || "top-left";
+    props.style = props.style || {};
+    this.props = props;
+  }
+  onAdd({ deck }) {
+    this.deck = deck;
+    this.element = document.createElement("div");
+    const { style, className } = this.props;
+    this.element.classList.add("deck-widget", "deck-widget-zoom");
+    if (className) {
+      this.element.classList.add(className);
+    }
+    if (style) {
+      Object.entries(style).map(([key, value]) => this.element.style.setProperty(key, value));
+    }
+    const ui = (0, import_jsx_runtime2.jsx)(ViewControl, { ...this.props, zoomBy: this.handleDeltaZoom.bind(this), panBy: this.handlePanBy.bind(this) });
+    (0, import_preact2.render)(ui, this.element);
+    return this.element;
+  }
+  onRemove() {
+    this.deck = void 0;
+    this.element = void 0;
+  }
+  setProps(props) {
+    Object.assign(this.props, props);
+  }
+  onViewportChange(viewport) {
+    this.viewports[viewport.id] = viewport;
+  }
+  handleDeltaZoom(deltaZoom) {
+    for (const view of this.deck.getViewports()) {
+      this.handleZoomView(view, view.zoom + deltaZoom);
+    }
+  }
+  handlePanBy(deltaX, deltaY) {
+    for (const viewport of this.deck.getViewports()) {
+      this.handlePanViewport(viewport, deltaX, deltaY);
+    }
+  }
+  handleZoomView(viewport, nextZoom) {
+    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "default-view";
+    const viewState = this.deck.viewManager.viewState || viewport;
+    const nextViewState = {
+      ...viewState,
+      zoom: nextZoom
+      // transitionDuration: this.props.transitionDuration,
+      // transitionInterpolator: new FlyToInterpolator()
+    };
+    this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+  }
+  handlePanViewport(viewport, deltaX, deltaY) {
+    const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "default-view";
+    const viewState = this.deck.viewManager.viewState || viewport;
+    const nextViewState = {
+      ...viewState,
+      position: [viewport.position[0] + deltaX, viewport.position[1] + deltaY]
+    };
+    this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+  }
+};
+
+// dist/loaders/simple-json-graph-loader.js
+var JSONLoader2 = ({ json, nodeParser, edgeParser }) => loadSimpleJSONGraph(json, { nodeParser, edgeParser });
+function loadSimpleJSONGraph(json, options) {
+  const { nodeParser = basicNodeParser, edgeParser = basicEdgeParser } = options;
+  const { name = "default", nodes, edges } = json;
+  if (!nodes) {
+    log.error("Invalid graph: nodes is missing.")();
+    return null;
+  }
+  const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
+  return graph;
+}
 //# sourceMappingURL=index.cjs.map