@html-graph/html-graph 5.0.0 → 5.1.0

package/dist/html-graph.js

@@ -1,25 +1,26 @@
-var De = Object.defineProperty;
-var Ne = (r, e, t) => e in r ? De(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var s = (r, e, t) => Ne(r, typeof e != "symbol" ? e + "" : e, t);
+var Me = Object.defineProperty;
+var Re = (r, e, t) => e in r ? Me(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var s = (r, e, t) => Re(r, typeof e != "symbol" ? e + "" : e, t);
 const T = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
 var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
-const Me = () => {
+const Le = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Re = () => {
+}, Ce = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, Le = (r) => {
+}, Ve = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
 class ue {
   constructor(e, t, o) {
-    s(this, "host", Me());
-    s(this, "container", Re());
+    s(this, "host", Le());
+    s(this, "container", Ce());
     s(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    s(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     s(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
       this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
@@ -28,11 +29,11 @@ class ue {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Le(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ve(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
-    this.container.removeChild(t.element);
+    this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -45,16 +46,16 @@ class ue {
   clear() {
     this.edgeIdToElementMap.forEach((e, t) => {
       this.detachEdge(t);
-    }), this.graphStore.getAllNodeIds().forEach((e) => {
+    }), this.attachedNodeIds.forEach((e) => {
       this.detachNode(e);
     });
   }
   destroy() {
-    this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
+    this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: o, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.payload.centerFn(o, i), h = t.payload.x - n * a.x, d = t.payload.y - n * a.y;
-    t.element.style.transform = `translate(${h}px, ${d}px)`;
+    const t = this.graphStore.getNode(e), { width: o, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(o, i), d = a.x - n * h.x, c = a.y - n * h.y;
+    t.element.style.transform = `translate(${d}px, ${c}px)`;
   }
   updateNodePriority(e) {
     const t = this.graphStore.getNode(e);
@@ -99,7 +100,7 @@ class ue {
     };
   }
 }
-class Ce {
+class $e {
   constructor(e) {
     s(this, "xFrom", 1 / 0);
     s(this, "yFrom", 1 / 0);
@@ -111,15 +112,15 @@ class Ce {
     this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
   }
   hasNode(e) {
-    const t = this.graphStore.getNode(e).payload;
-    return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
+    const t = this.graphStore.getNode(e).payload, { x: o, y: i } = t;
+    return o >= this.xFrom && o <= this.xTo && i >= this.yFrom && i <= this.yTo;
   }
   hasEdge(e) {
     const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(i).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Ve {
+class Ue {
   constructor(e, t, o, i) {
     s(this, "attachedNodes", /* @__PURE__ */ new Set());
     s(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -143,7 +144,7 @@ class Ve {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = i, this.renderingBox = new Ce(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = i, this.renderingBox = new $e(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -197,131 +198,80 @@ class Ve {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class pe {
-  constructor() {
-    s(this, "callbacks", /* @__PURE__ */ new Set());
-  }
-  subscribe(e) {
-    this.callbacks.add(e);
-  }
-  unsubscribe(e) {
-    this.callbacks.delete(e);
-  }
-  emit(e) {
-    this.callbacks.forEach((t) => {
-      t(e);
-    });
-  }
-}
-const A = () => {
-  const r = new pe();
-  return [r, r];
-};
-class $e {
-  constructor(e) {
-    s(this, "onAfterUpdated");
-    this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
-  }
-  getViewportMatrix() {
-    return { ...this.viewportStore.getViewportMatrix() };
+class Ie {
+  constructor(e, t) {
+    s(this, "deferredNodes", /* @__PURE__ */ new Set());
+    s(this, "deferredEdges", /* @__PURE__ */ new Set());
+    this.htmlView = e, this.graphStore = t;
   }
-  getContentMatrix() {
-    return { ...this.viewportStore.getContentMatrix() };
+  attachNode(e) {
+    this.isNodeValid(e) ? this.htmlView.attachNode(e) : this.deferredNodes.add(e);
   }
-}
-class Ie {
-  constructor(e) {
-    s(this, "onAfterNodeAdded");
-    s(this, "onAfterNodeUpdated");
-    s(this, "onAfterNodePriorityUpdated");
-    s(this, "onBeforeNodeRemoved");
-    s(this, "onAfterPortMarked");
-    s(this, "onAfterPortUpdated");
-    s(this, "onBeforePortUnmarked");
-    s(this, "onAfterEdgeAdded");
-    s(this, "onAfterEdgeShapeUpdated");
-    s(this, "onAfterEdgeUpdated");
-    s(this, "onAfterEdgePriorityUpdated");
-    s(this, "onBeforeEdgeRemoved");
-    s(this, "onBeforeClear");
-    this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
+  detachNode(e) {
+    this.deferredNodes.has(e) ? this.deferredNodes.delete(e) : this.htmlView.detachNode(e);
   }
-  getNode(e) {
-    const t = this.graphStore.getNode(e);
-    if (t === void 0)
-      return null;
-    const o = t.payload;
-    return {
-      element: t.element,
-      x: o.x,
-      y: o.y,
-      centerFn: o.centerFn,
-      priority: o.priority
-    };
+  attachEdge(e) {
+    this.isEdgeValid(e) ? this.htmlView.attachEdge(e) : this.deferredEdges.add(e);
   }
-  getElementNodeId(e) {
-    return this.graphStore.getElementNodeId(e) ?? null;
+  detachEdge(e) {
+    this.deferredEdges.has(e) ? this.deferredEdges.delete(e) : this.htmlView.detachEdge(e);
   }
-  getAllNodeIds() {
-    return this.graphStore.getAllNodeIds();
+  updateNodePosition(e) {
+    this.deferredNodes.has(e) ? this.tryAttachNode(e) : this.htmlView.updateNodePosition(e);
   }
-  getPort(e) {
-    const t = this.graphStore.getPort(e);
-    return t === void 0 ? null : {
-      element: t.element,
-      direction: t.payload.direction,
-      nodeId: t.nodeId
-    };
+  updateNodePriority(e) {
+    this.deferredNodes.has(e) ? this.tryAttachNode(e) : this.htmlView.updateNodePriority(e);
   }
-  getAllPortIds() {
-    return this.graphStore.getAllPortIds();
+  updateEdgeShape(e) {
+    this.deferredEdges.has(e) ? this.tryAttachEdge(e) : this.htmlView.updateEdgeShape(e);
   }
-  getNodePortIds(e) {
-    return this.graphStore.getNodePortIds(e) ?? null;
+  renderEdge(e) {
+    this.deferredEdges.has(e) ? this.tryAttachEdge(e) : this.htmlView.renderEdge(e);
   }
-  getElementPortIds(e) {
-    return [...this.graphStore.getElementPortIds(e)];
+  updateEdgePriority(e) {
+    this.deferredEdges.has(e) ? this.tryAttachEdge(e) : this.htmlView.updateEdgePriority(e);
   }
-  getAllEdgeIds() {
-    return this.graphStore.getAllEdgeIds();
+  clear() {
+    this.deferredNodes.clear(), this.deferredEdges.clear(), this.htmlView.clear();
   }
-  getEdge(e) {
-    const t = this.graphStore.getEdge(e);
-    if (t === void 0)
-      return null;
-    const o = t.payload;
-    return {
-      from: t.from,
-      to: t.to,
-      priority: o.priority,
-      shape: o.shape
-    };
+  destroy() {
+    this.htmlView.destroy();
   }
-  getPortIncomingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
+  isNodeValid(e) {
+    const t = this.graphStore.getNode(e);
+    return !(t.payload.x === null || t.payload.y === null);
   }
-  getPortOutgoingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(e);
+  tryAttachNode(e) {
+    this.isNodeValid(e) && (this.deferredNodes.delete(e), this.htmlView.attachNode(e));
   }
-  getPortCycleEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
+  isEdgeValid(e) {
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to);
+    return !(this.deferredNodes.has(o.nodeId) || this.deferredNodes.has(i.nodeId));
   }
-  getPortAdjacentEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
+  tryAttachEdge(e) {
+    this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
-  getNodeIncomingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
+}
+class pe {
+  constructor() {
+    s(this, "callbacks", /* @__PURE__ */ new Set());
   }
-  getNodeOutgoingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(e);
+  subscribe(e) {
+    this.callbacks.add(e);
   }
-  getNodeCycleEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
+  unsubscribe(e) {
+    this.callbacks.delete(e);
   }
-  getNodeAdjacentEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
+  emit(e) {
+    this.callbacks.forEach((t) => {
+      t(e);
+    });
   }
 }
+const E = () => {
+  const r = new pe();
+  return [r, r];
+};
 class X {
   constructor(e) {
     s(this, "counter", 0);
@@ -345,23 +295,15 @@ class S extends Error {
   }
 }
 class we {
-  constructor(e, t, o, i) {
-    /**
-     * provides api for accessing model of rendered graph
-     */
-    s(this, "graph");
-    /**
-     * provides api for accessing viewport state
-     */
-    s(this, "viewport");
+  constructor(e, t, o, i, n, a) {
     s(this, "nodeIdGenerator", new X(
-      (e) => this.graph.getNode(e) !== null
+      (e) => this.graphStore.getNode(e) !== void 0
     ));
     s(this, "portIdGenerator", new X(
-      (e) => this.graph.getPort(e) !== null
+      (e) => this.graphStore.getPort(e) !== void 0
     ));
     s(this, "edgeIdGenerator", new X(
-      (e) => this.graph.getEdge(e) !== null
+      (e) => this.graphStore.getEdge(e) !== void 0
     ));
     s(this, "onAfterNodeAdded", (e) => {
       this.htmlView.attachNode(e);
@@ -413,13 +355,13 @@ class we {
      * emits event just before destruction of canvas
      */
     s(this, "onBeforeDestroy");
-    this.graphStore = e, this.viewportStore = t, this.htmlView = o, this.params = i, this.graph = new Ie(this.graphStore), this.viewport = new $e(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.graph = e, this.viewport = t, this.graphStore = o, this.viewportStore = i, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
     ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = A();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = E();
   }
   /**
    * adds new node
@@ -435,8 +377,8 @@ class we {
     if (this.graphStore.addNode({
       id: t,
       element: e.element,
-      x: e.x,
-      y: e.y,
+      x: e.x ?? null,
+      y: e.y ?? null,
       centerFn: e.centerFn ?? this.params.nodes.centerFn,
       priority: e.priority ?? this.params.nodes.priorityFn()
     }), e.ports !== void 0)
@@ -454,7 +396,7 @@ class we {
    */
   updateNode(e, t) {
     if (this.graphStore.getNode(e) === void 0)
-      throw new S("failed to update non existing node");
+      throw new S("failed to update nonexistent node");
     return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
@@ -464,7 +406,7 @@ class we {
    */
   removeNode(e) {
     if (this.graphStore.getNode(e) === void 0)
-      throw new S("failed to remove non existing node");
+      throw new S("failed to remove nonexistent node");
     return this.graphStore.removeNode(e), this;
   }
   /**
@@ -497,7 +439,7 @@ class we {
    */
   unmarkPort(e) {
     if (this.graphStore.getPort(e) === void 0)
-      throw new S("failed to unmark non existing port");
+      throw new S("failed to unmark nonexistent port");
     return this.graphStore.removePort(e), this;
   }
   /**
@@ -535,6 +477,13 @@ class we {
       throw new S("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
+  /**
+   * clears canvas from nodes and edges
+   * canvas gets rolled back to initial state and can be reused
+   */
+  clear() {
+    return this.graphStore.clear(), this;
+  }
   /**
    * applies transformation for viewport matrix
    */
@@ -547,13 +496,6 @@ class we {
   patchContentMatrix(e) {
     return this.viewportStore.patchContentMatrix(e), this;
   }
-  /**
-   * clears canvas from nodes and edges
-   * canvas gets rolled back to initial state and can be reused
-   */
-  clear() {
-    return this.graphStore.clear(), this;
-  }
   /**
    * destroys canvas
    * canvas element gets rolled back to initial state, and can not be reused
@@ -568,7 +510,7 @@ class we {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class Ue {
+class Be {
   constructor() {
     s(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     s(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -617,7 +559,7 @@ class fe {
     s(this, "incomingEdges", /* @__PURE__ */ new Map());
     s(this, "outcomingEdges", /* @__PURE__ */ new Map());
     s(this, "cycleEdges", /* @__PURE__ */ new Map());
-    s(this, "elementPorts", new Ue());
+    s(this, "elementPorts", new Be());
     s(this, "afterNodeAddedEmitter");
     s(this, "onAfterNodeAdded");
     s(this, "afterNodeUpdatedEmitter");
@@ -644,7 +586,7 @@ class fe {
     s(this, "onBeforeEdgeRemoved");
     s(this, "beforeClearEmitter");
     s(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
+    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = E(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = E(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = E(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = E(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.beforeClearEmitter, this.onBeforeClear] = E();
   }
   addNode(e) {
     const t = /* @__PURE__ */ new Map(), o = {
@@ -805,13 +747,13 @@ const ie = (r) => ({
   x: 0,
   y: 0
 };
-class Be {
+class Fe {
   constructor() {
     s(this, "viewportMatrix", ne);
     s(this, "contentMatrix", ne);
     s(this, "afterUpdateEmitter");
     s(this, "onAfterUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = A();
+    [this.afterUpdateEmitter, this.onAfterUpdated] = E();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -864,10 +806,10 @@ class j {
     this.canvas.updateNode(t);
   }
 }
-const Fe = (r, e, t) => {
+const Oe = (r, e, t) => {
   const { x: o, y: i, width: n, height: a } = r.getBoundingClientRect();
   return e >= o && e <= o + n && t >= i && t <= i + a;
-}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, o) => Fe(e, t, o) && Oe(r, t, o), U = (r, e) => {
+}, We = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, o) => Oe(e, t, o) && We(r, t, o), I = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, B = (r) => {
   const e = document.createElement("div");
@@ -884,7 +826,7 @@ const Fe = (r, e, t) => {
       }
     ]
   };
-}, We = (r, e) => {
+}, ke = (r, e) => {
   let t = e, o = null;
   for (; t !== null && (o = r.getElementPortIds(t)[0] ?? null, o === null); )
     t = t.parentElement;
@@ -892,7 +834,7 @@ const Fe = (r, e, t) => {
 }, ye = (r, e) => {
   const t = document.elementsFromPoint(e.x, e.y);
   for (const o of t) {
-    const i = We(r, o);
+    const i = ke(r, o);
     if (i !== null)
       return i;
   }
@@ -928,7 +870,7 @@ const me = (r, e) => ({
   x: e * r.x + (1 - e) / 2 * o.x,
   y: t * r.y + (1 - t) / 2 * o.y
 });
-class ke {
+class ze {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -953,7 +895,7 @@ class ke {
     this.path = `${d}${h}${c}`;
   }
 }
-class ze {
+class Xe {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -995,7 +937,7 @@ class ze {
     }, x = {
       x: c.x + h,
       y: c.y + d
-    }, E = {
+    }, A = {
       x: g.x + h,
       y: g.y + d
     };
@@ -1003,17 +945,17 @@ class ze {
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
       `C ${y.x} ${y.y} ${x.x} ${x.y} ${f.x} ${f.y}`,
-      `C ${E.x} ${E.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
+      `C ${A.x} ${A.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
       `L ${o.x} ${o.y}`
     ].join(" "), this.midpoint = O(f, e.flipX, e.flipY, e.to);
   }
 }
 const G = Object.freeze({
   edgeColor: "--edge-color"
-}), Ae = (r) => {
+}), Ee = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
-}, Ee = (r) => {
+}, Ae = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, F = () => {
@@ -1036,15 +978,15 @@ const G = Object.freeze({
         const V = r[d + 1];
         i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, E = y ? { x: h.x + i * x, y: h.y + n * x } : h, b = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + c * b, y: h.y + l * b } : h;
+      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, A = y ? { x: h.x + i * x, y: h.y + n * x } : h, b = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + c * b, y: h.y + l * b } : h;
       d > 0 && t.push(`L ${D.x} ${D.y}`), y && t.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${E.x} ${E.y}`
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${A.x} ${A.y}`
       );
     });
   }
   return t.join(" ");
 };
-class Xe {
+class Ye {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1083,7 +1025,7 @@ class Xe {
     );
   }
 }
-class Ye {
+class He {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1114,7 +1056,7 @@ class Ye {
     );
   }
 }
-class He {
+class je {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1144,7 +1086,7 @@ class He {
     this.path = M([o, a, h, i], this.params.roundness);
   }
 }
-class je {
+class Ge {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1203,7 +1145,7 @@ class K {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${M(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class Ge {
+class Ke {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1224,7 +1166,7 @@ class Ge {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
   }
 }
-class Ke {
+class Ze {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1260,7 +1202,7 @@ class Ke {
     };
   }
 }
-class Ze {
+class Je {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1301,7 +1243,7 @@ class Ze {
     );
   }
 }
-class Je {
+class Qe {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1375,7 +1317,7 @@ class W {
     s(this, "onAfterRender");
     s(this, "afterRenderEmitter");
     s(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Ee(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ee(e.color), this.svg.appendChild(this.group), this.line = Ae(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
@@ -1423,7 +1365,7 @@ class W {
     });
   }
 }
-const Qe = (r) => (e) => {
+const _e = (r) => (e) => {
   const o = [
     u,
     { x: e.arrowLength, y: r.radius },
@@ -1435,7 +1377,7 @@ const Qe = (r) => (e) => {
     y: h.y + e.shift.y
   })), i = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
   return `${i} ${n} ${a} Z`;
-}, _e = (r) => (e) => {
+}, qe = (r) => (e) => {
   const t = r.radius, o = e.arrowLength, i = (o * o + 2 * o * t) / (2 * t), n = i + t, a = o + t - t * (o + t) / n, h = t * i / n, c = [u, { x: a, y: -h }, { x: a, y: h }].map(
     (y) => m(y, e.direction, u)
   ).map((y) => ({
@@ -1443,7 +1385,7 @@ const Qe = (r) => (e) => {
     y: y.y + e.shift.y
   })), l = `M ${c[0].x} ${c[0].y}`, g = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, p = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, f = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
   return `${l} ${g} ${p} ${f}`;
-}, qe = (r) => (e) => {
+}, et = (r) => (e) => {
   const t = r.smallRadius, o = r.radius, i = m(
     {
       x: e.arrowLength,
@@ -1469,22 +1411,22 @@ const Qe = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return Qe({
+      return _e({
         radius: r.radius ?? w.polygonArrowRadius
       });
     case "arc":
-      return _e({
+      return qe({
         radius: r.radius ?? w.circleArrowRadius
       });
     default:
-      return qe({
+      return et({
         smallRadius: r.smallRadius ?? w.wedgeArrowSmallRadius,
         angle: r.angle ?? w.wedgeArrowAngle,
         radius: r.radius ?? w.wedgeArrowRadius
       });
   }
 };
-class et {
+class tt {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1501,7 +1443,7 @@ class et {
     s(this, "hasSourceArrow");
     s(this, "hasTargetArrow");
     s(this, "pathShape");
-    s(this, "createCyclePath", (e) => new Ge({
+    s(this, "createCyclePath", (e) => new Ke({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1509,7 +1451,7 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new ze({
+    s(this, "createDetourPath", (e, t, o, i, n) => new Xe({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1522,7 +1464,7 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o) => new ke({
+    s(this, "createLinePath", (e, t, o) => new ze({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1547,7 +1489,7 @@ class et {
     this.pathShape.render(e);
   }
 }
-class tt {
+class rt {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1572,7 +1514,7 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new Ze({
+    s(this, "createDetourPath", (e, t, o, i, n) => new Je({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1585,7 +1527,7 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o, i) => new Xe({
+    s(this, "createLinePath", (e, t, o, i) => new Ye({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1618,7 +1560,7 @@ class tt {
     this.pathShape.render(e);
   }
 }
-class rt {
+class ot {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1644,7 +1586,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new Ye({
+    s(this, "createDetourPath", (e, t, o, i, n) => new He({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1658,7 +1600,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o) => new He({
+    s(this, "createLinePath", (e, t, o) => new je({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1690,7 +1632,7 @@ class rt {
     this.pathShape.render(e);
   }
 }
-class ot {
+class st {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1715,7 +1657,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new Je({
+    s(this, "createDetourPath", (e, t, o, i, n) => new Qe({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1728,7 +1670,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o, i, n) => new je({
+    s(this, "createLinePath", (e, t, o, i, n) => new Ge({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1776,7 +1718,7 @@ class Pe {
     s(this, "onAfterRender");
     s(this, "afterRenderEmitter");
     s(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? w.color, this.width = (e == null ? void 0 : e.width) ?? w.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowRenderer = $((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? w.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? w.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Ee(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? w.color, this.width = (e == null ? void 0 : e.width) ?? w.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowRenderer = $((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? w.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? w.preOffset, this.svg = Ee(this.color), this.svg.appendChild(this.group), this.line = Ae(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
@@ -1784,7 +1726,7 @@ class Pe {
       e.to
     );
     Se(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: i, y: n }, c = new Ke({
+    const d = { x: i, y: n }, c = new Ze({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1835,17 +1777,17 @@ class Pe {
     });
   }
 }
-const st = () => {
+const it = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, it = (r) => {
+}, nt = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
 }, he = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class nt extends Error {
+class at extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
@@ -1857,18 +1799,18 @@ class be {
     s(this, "line");
     s(this, "sourceArrow");
     s(this, "targetArrow");
-    s(this, "handle", st());
+    s(this, "handle", it());
     s(this, "onAfterRender");
     s(this, "interactiveLine");
     s(this, "interactiveSourceArrow", null);
     s(this, "interactiveTargetArrow", null);
     if (this.baseEdge = e, e instanceof be)
-      throw new nt(
+      throw new at(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
     const o = (t == null ? void 0 : t.distance) ?? w.interactiveWidth;
-    this.interactiveLine = it(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = he(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = he(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = nt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = he(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = he(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
@@ -1876,7 +1818,7 @@ class be {
     this.baseEdge.render(e);
   }
 }
-class Rt {
+class Lt {
   constructor(e, t) {
     s(this, "group");
     s(this, "line");
@@ -1893,8 +1835,113 @@ class Rt {
     this.baseShape.render(e);
   }
 }
-const Te = (r, e) => {
-  const t = new fe(), o = new ue(t, e, r), i = {
+class Te {
+  constructor(e) {
+    s(this, "onAfterNodeAdded");
+    s(this, "onAfterNodeUpdated");
+    s(this, "onAfterNodePriorityUpdated");
+    s(this, "onBeforeNodeRemoved");
+    s(this, "onAfterPortMarked");
+    s(this, "onAfterPortUpdated");
+    s(this, "onBeforePortUnmarked");
+    s(this, "onAfterEdgeAdded");
+    s(this, "onAfterEdgeShapeUpdated");
+    s(this, "onAfterEdgeUpdated");
+    s(this, "onAfterEdgePriorityUpdated");
+    s(this, "onBeforeEdgeRemoved");
+    s(this, "onBeforeClear");
+    this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
+  }
+  getNode(e) {
+    const t = this.graphStore.getNode(e);
+    if (t === void 0)
+      return null;
+    const o = t.payload;
+    return {
+      element: t.element,
+      x: o.x,
+      y: o.y,
+      centerFn: o.centerFn,
+      priority: o.priority
+    };
+  }
+  getElementNodeId(e) {
+    return this.graphStore.getElementNodeId(e) ?? null;
+  }
+  getAllNodeIds() {
+    return this.graphStore.getAllNodeIds();
+  }
+  getPort(e) {
+    const t = this.graphStore.getPort(e);
+    return t === void 0 ? null : {
+      element: t.element,
+      direction: t.payload.direction,
+      nodeId: t.nodeId
+    };
+  }
+  getAllPortIds() {
+    return this.graphStore.getAllPortIds();
+  }
+  getNodePortIds(e) {
+    return this.graphStore.getNodePortIds(e) ?? null;
+  }
+  getElementPortIds(e) {
+    return [...this.graphStore.getElementPortIds(e)];
+  }
+  getAllEdgeIds() {
+    return this.graphStore.getAllEdgeIds();
+  }
+  getEdge(e) {
+    const t = this.graphStore.getEdge(e);
+    if (t === void 0)
+      return null;
+    const o = t.payload;
+    return {
+      from: t.from,
+      to: t.to,
+      priority: o.priority,
+      shape: o.shape
+    };
+  }
+  getPortIncomingEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
+  }
+  getPortOutgoingEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(e);
+  }
+  getPortCycleEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
+  }
+  getPortAdjacentEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
+  }
+  getNodeIncomingEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
+  }
+  getNodeOutgoingEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(e);
+  }
+  getNodeCycleEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
+  }
+  getNodeAdjacentEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
+  }
+}
+class De {
+  constructor(e) {
+    s(this, "onAfterUpdated");
+    this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
+  }
+  getViewportMatrix() {
+    return { ...this.viewportStore.getViewportMatrix() };
+  }
+  getContentMatrix() {
+    return { ...this.viewportStore.getContentMatrix() };
+  }
+}
+const Ne = (r, e) => {
+  const t = new fe(), o = new Te(t), i = new De(e), n = new ue(t, e, r), a = {
     nodes: {
       centerFn: me,
       priorityFn: () => 0
@@ -1907,7 +1954,14 @@ const Te = (r, e) => {
       direction: 0
     }
   };
-  return new we(t, e, o, i);
+  return new we(
+    o,
+    i,
+    t,
+    e,
+    n,
+    a
+  );
 };
 class k {
   constructor(e, t, o, i) {
@@ -2061,7 +2115,7 @@ class Z {
         nodeId: o,
         dx: a.x - i.x,
         dy: a.y - i.y
-      }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, I(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2163,7 +2217,7 @@ class Z {
     }
   }
   cancelMouseDrag() {
-    this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, I(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2206,15 +2260,15 @@ class Z {
     return e;
   }
 }
-const at = (r, e, t) => ({
+const ht = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), ht = (r, e, t, o) => ({
+}), dt = (r, e, t, o) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * o + r.y
-}), I = (r) => {
+}), U = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
@@ -2243,7 +2297,7 @@ class z {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     s(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (I(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2276,10 +2330,10 @@ class z {
     });
     s(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = I(e);
+        this.prevTouches = U(e);
         return;
       }
-      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = U(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2288,7 +2342,7 @@ class z {
       }), this.startRegisteredTransform();
     });
     s(this, "onWindowTouchMove", (e) => {
-      const t = I(e);
+      const t = U(e);
       if (!t.touches.every(
         (i) => C(this.window, this.element, i[0], i[1])
       )) {
@@ -2305,7 +2359,7 @@ class z {
       this.prevTouches = t;
     });
     s(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = U(e) : this.stopTouchDrag();
     });
     s(this, "observer", new ResizeObserver(() => {
       const e = this.viewport.getViewportMatrix(), { width: t, height: o } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
@@ -2333,7 +2387,7 @@ class z {
     new z(e, t, o, i);
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), i = at(o, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), i = ht(o, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: i,
       canvasWidth: n,
@@ -2342,7 +2396,7 @@ class z {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = ht(i, e, t, o), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = dt(i, e, t, o), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: a,
@@ -2351,7 +2405,7 @@ class z {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2454,13 +2508,13 @@ class J {
     this.trigger.emit({ x: o, y: i, width: n, height: a });
   }
 }
-const dt = () => {
+const ct = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, ct = () => {
+}, gt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, gt = () => {
+}, lt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2469,9 +2523,9 @@ const dt = () => {
 };
 class Q {
   constructor(e, t, o) {
-    s(this, "svg", dt());
-    s(this, "patternRenderingRectangle", ct());
-    s(this, "pattern", gt());
+    s(this, "svg", ct());
+    s(this, "patternRenderingRectangle", gt());
+    s(this, "pattern", lt());
     s(this, "patternContent");
     s(this, "tileWidth");
     s(this, "tileHeight");
@@ -2511,7 +2565,7 @@ class _ {
     s(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Te(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
     ), k.configure(
@@ -2607,7 +2661,7 @@ class q {
     s(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Te(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
     ), k.configure(
@@ -2669,11 +2723,11 @@ class q {
       overlayId: P.Static,
       portCoords: y,
       portDirection: c.direction
-    }, E = {
+    }, A = {
       overlayId: P.Dragging,
       portCoords: v,
       portDirection: d.direction
-    }, [R, b] = this.isTargetDragging ? [x, E] : [E, x];
+    }, [R, b] = this.isTargetDragging ? [x, A] : [A, x];
     this.overlayCanvas.addNode(B(R)), this.overlayCanvas.addNode(B(b));
     const D = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
@@ -2730,7 +2784,7 @@ class q {
     }
   }
 }
-const lt = () => {
+const ut = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Y = () => {
@@ -2740,25 +2794,25 @@ const lt = () => {
   const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class ut {
+class pt {
   constructor(e) {
     s(this, "background", Y());
     s(this, "main", Y());
     s(this, "overlayConnectablePorts", de());
     s(this, "overlayDraggableEdges", de());
-    s(this, "host", lt());
+    s(this, "host", ut());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const H = (r) => () => r, ce = H(0), pt = () => {
+const H = (r) => () => r, ce = H(0), wt = () => {
   let r = 0;
   return () => r++;
-}, wt = (r, e) => {
+}, ft = (r, e) => {
   let t = ce, o = ce;
-  const i = pt();
+  const i = wt();
   return r === "incremental" && (t = i), e === "incremental" && (o = i), typeof r == "number" && (t = H(r)), typeof e == "number" && (o = H(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
@@ -2768,7 +2822,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     return r;
   switch (r.type) {
     case "straight":
-      return () => new rt({
+      return () => new ot({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2782,7 +2836,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new tt({
+      return () => new rt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2795,7 +2849,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new ot({
+      return () => new st({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2819,7 +2873,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new et({
+      return () => new tt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2833,9 +2887,9 @@ const H = (r) => () => r, ce = H(0), pt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, ft = (r) => {
+}, yt = (r) => {
   var t, o, i, n, a;
-  const e = wt(
+  const e = ft(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
@@ -2852,11 +2906,11 @@ const H = (r) => () => r, ce = H(0), pt = () => {
       priorityFn: e.edgesPriorityFn
     }
   };
-}, yt = (r) => {
+}, mt = (r) => {
   var p, f, y, v, x;
   const e = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
   }), t = r.nodeDragVerifier ?? (() => !0), o = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (E) => E.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (E) => E.button === 0;
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (A) => A.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (A) => A.button === 0;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
@@ -2868,7 +2922,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     nodeDragVerifier: t,
     onNodeDragFinished: o
   };
-}, mt = (r) => {
+}, vt = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
@@ -2878,7 +2932,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
     return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, vt = (r) => {
+}, Et = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -2912,12 +2966,12 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return vt({
+      return Et({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return mt({
+      return vt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
@@ -2925,7 +2979,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
       });
   }
 }, le = (r) => {
-  var y, v, x, E, R, b, D, V, te, re, oe, se;
+  var y, v, x, A, R, b, D, V, te, re, oe, se;
   const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let i;
   o !== void 0 ? Array.isArray(o) ? i = At(
@@ -2934,7 +2988,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     )
   ) : i = ge(o) : i = (N) => N.nextTransform;
   const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
-  }), h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onTransformChange) ?? (() => {
+  }), h = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onTransformChange) ?? (() => {
   }), d = (R = r == null ? void 0 : r.shift) == null ? void 0 : R.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (N) => N.button === 0, p = (D = r == null ? void 0 : r.scale) == null ? void 0 : D.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
@@ -2955,24 +3009,24 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Et = (r, e) => {
+}, xt = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, xt = (r) => r instanceof SVGElement ? r : Et(
+}, St = (r) => r instanceof SVGElement ? r : xt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), St = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, i = xt(r.renderer ?? {});
+), Pt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, i = St(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: o,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, Pt = (r, e, t) => {
+}, bt = (r, e, t) => {
   var c, l, g;
   const o = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
   }, h = () => {
@@ -2989,7 +3043,7 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
   };
-}, bt = (r, e) => {
+}, Tt = (r, e) => {
   var c, l, g;
   const t = (p) => p, o = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
     const f = e.getPortAdjacentEdgeIds(p);
@@ -3008,10 +3062,10 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, Tt = (r) => ({
+}, Dt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Dt = (r) => {
+}), Nt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3020,13 +3074,13 @@ const H = (r) => () => r, ce = H(0), pt = () => {
     })
   };
 };
-class Nt extends Error {
+class Mt extends Error {
   constructor() {
     super(...arguments);
     s(this, "name", "CanvasBuilderError");
   }
 }
-class Lt {
+class Ct {
   constructor(e) {
     s(this, "used", !1);
     s(this, "canvasDefaults", {});
@@ -3044,7 +3098,9 @@ class Lt {
     s(this, "hasUserDraggableEdges", !1);
     s(this, "boxRenderingTrigger", new pe());
     s(this, "graphStore", new fe());
-    s(this, "viewportStore", new Be());
+    s(this, "viewportStore", new Fe());
+    s(this, "graph", new Te(this.graphStore));
+    s(this, "viewport", new De(this.viewportStore));
     s(this, "window", window);
     this.element = e;
   }
@@ -3099,21 +3155,23 @@ class Lt {
    */
   build() {
     if (this.used)
-      throw new Nt("CanvasBuilder is a single use object");
+      throw new Mt("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new ut(this.element);
+    const e = new pt(this.element);
     let t = new ue(
       this.graphStore,
       this.viewportStore,
       e.main
     );
-    this.virtualScrollConfig !== void 0 && (t = new Ve(
+    this.virtualScrollConfig !== void 0 && (t = new Ue(
       t,
       this.graphStore,
       this.boxRenderingTrigger,
-      Dt(this.virtualScrollConfig)
-    ));
-    const o = ft(this.canvasDefaults), i = new we(
+      Nt(this.virtualScrollConfig)
+    )), t = new Ie(t, this.graphStore);
+    const o = yt(this.canvasDefaults), i = new we(
+      this.graph,
+      this.viewport,
       this.graphStore,
       this.viewportStore,
       t,
@@ -3121,15 +3179,15 @@ class Lt {
     );
     if (this.hasBackground && Q.configure(
       i,
-      St(this.backgroundConfig),
+      Pt(this.backgroundConfig),
       e.background
     ), this.hasNodeResizeReactiveEdges && j.configure(i), this.hasDraggableNode && Z.configure(
       i,
       e.main,
       this.window,
-      yt(this.dragConfig)
+      mt(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const a = Pt(
+      const a = bt(
         this.connectablePortsConfig,
         o.edges.shapeFactory,
         o.ports.direction
@@ -3143,7 +3201,7 @@ class Lt {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const a = bt(
+      const a = Tt(
         this.draggableEdgesConfig,
         i.graph
       );
@@ -3161,7 +3219,7 @@ class Lt {
       this.window,
       le(this.transformConfig),
       this.boxRenderingTrigger,
-      Tt(this.virtualScrollConfig)
+      Dt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && z.configure(
       i,
       e.main,
@@ -3175,15 +3233,15 @@ class Lt {
   }
 }
 export {
-  et as BezierEdgeShape,
-  Lt as CanvasBuilder,
-  Nt as CanvasBuilderError,
+  tt as BezierEdgeShape,
+  Ct as CanvasBuilder,
+  Mt as CanvasBuilderError,
   S as CanvasError,
   Pe as DirectEdgeShape,
-  tt as HorizontalEdgeShape,
-  nt as InteractiveEdgeError,
+  rt as HorizontalEdgeShape,
+  at as InteractiveEdgeError,
   be as InteractiveEdgeShape,
-  Rt as MidpointEdgeShape,
-  rt as StraightEdgeShape,
-  ot as VerticalEdgeShape
+  Lt as MidpointEdgeShape,
+  ot as StraightEdgeShape,
+  st as VerticalEdgeShape
 };