@html-graph/html-graph 5.0.1 → 6.0.0

package/dist/html-graph.js

@@ -1,24 +1,24 @@
-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);
+var Ce = Object.defineProperty;
+var Ve = (r, e, t) => e in r ? Ce(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var s = (r, e, t) => Ve(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 Le = () => {
+var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
+const $e = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ce = () => {
+}, Ue = () => {
   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;
-}, Ve = (r) => {
+}, Ie = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
-class ue {
+class ye {
   constructor(e, t, o) {
-    s(this, "host", Le());
-    s(this, "container", Ce());
+    s(this, "host", $e());
+    s(this, "container", Ue());
     s(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     s(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     s(this, "applyTransform", () => {
@@ -29,7 +29,7 @@ class ue {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ve(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ie(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);
@@ -54,7 +54,7 @@ class ue {
     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), { payload: h } = t, d = h.x - n * a.x, c = h.y - n * a.y;
+    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) {
@@ -79,8 +79,8 @@ class ue {
       h,
       d
     );
-    let g = L.Line;
-    o.element === i.element ? g = L.PortCycle : o.nodeId === i.nodeId && (g = L.NodeCycle), t.payload.shape.render({ from: c, to: l, category: g });
+    let g = R.Line;
+    o.element === i.element ? g = R.PortCycle : o.nodeId === i.nodeId && (g = R.NodeCycle), t.payload.shape.render({ from: c, to: l, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -100,7 +100,7 @@ class ue {
     };
   }
 }
-class $e {
+class Be {
   constructor(e) {
     s(this, "xFrom", 1 / 0);
     s(this, "yFrom", 1 / 0);
@@ -120,7 +120,7 @@ class $e {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Ue {
+class Oe {
   constructor(e, t, o, i) {
     s(this, "attachedNodes", /* @__PURE__ */ new Set());
     s(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -144,7 +144,7 @@ class Ue {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = i, this.renderingBox = new $e(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = i, this.renderingBox = new Be(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -198,40 +198,38 @@ class Ue {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class Ie {
+class Fe {
   constructor(e, t) {
     s(this, "deferredNodes", /* @__PURE__ */ new Set());
     s(this, "deferredEdges", /* @__PURE__ */ new Set());
     this.htmlView = e, this.graphStore = t;
   }
   attachNode(e) {
-    const t = this.graphStore.getNode(e);
-    t.payload.x !== null && t.payload.y !== null ? this.htmlView.attachNode(e) : this.deferredNodes.add(e);
+    this.isNodeValid(e) ? this.htmlView.attachNode(e) : this.deferredNodes.add(e);
   }
   detachNode(e) {
     this.deferredNodes.has(e) ? this.deferredNodes.delete(e) : this.htmlView.detachNode(e);
   }
   attachEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to);
-    this.deferredNodes.has(o.nodeId) || this.deferredNodes.has(i.nodeId) ? this.deferredEdges.add(e) : this.htmlView.attachEdge(e);
+    this.isEdgeValid(e) ? this.htmlView.attachEdge(e) : this.deferredEdges.add(e);
   }
   detachEdge(e) {
     this.deferredEdges.has(e) ? this.deferredEdges.delete(e) : this.htmlView.detachEdge(e);
   }
   updateNodePosition(e) {
-    this.deferredNodes.has(e) || this.htmlView.updateNodePosition(e);
+    this.deferredNodes.has(e) ? this.tryAttachNode(e) : this.htmlView.updateNodePosition(e);
   }
   updateNodePriority(e) {
-    this.deferredNodes.has(e) || this.htmlView.updateNodePriority(e);
+    this.deferredNodes.has(e) ? this.tryAttachNode(e) : this.htmlView.updateNodePriority(e);
   }
   updateEdgeShape(e) {
-    this.deferredEdges.has(e) || this.htmlView.updateEdgeShape(e);
+    this.deferredEdges.has(e) ? this.tryAttachEdge(e) : this.htmlView.updateEdgeShape(e);
   }
   renderEdge(e) {
-    this.deferredEdges.has(e) || this.htmlView.renderEdge(e);
+    this.deferredEdges.has(e) ? this.tryAttachEdge(e) : this.htmlView.renderEdge(e);
   }
   updateEdgePriority(e) {
-    this.deferredEdges.has(e) || this.htmlView.updateEdgePriority(e);
+    this.deferredEdges.has(e) ? this.tryAttachEdge(e) : this.htmlView.updateEdgePriority(e);
   }
   clear() {
     this.deferredNodes.clear(), this.deferredEdges.clear(), this.htmlView.clear();
@@ -239,8 +237,22 @@ class Ie {
   destroy() {
     this.htmlView.destroy();
   }
+  isNodeValid(e) {
+    const t = this.graphStore.getNode(e);
+    return !(t.payload.x === null || t.payload.y === null);
+  }
+  tryAttachNode(e) {
+    this.isNodeValid(e) && (this.deferredNodes.delete(e), this.htmlView.attachNode(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));
+  }
+  tryAttachEdge(e) {
+    this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
+  }
 }
-class pe {
+class j {
   constructor() {
     s(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -257,7 +269,7 @@ class pe {
   }
 }
 const E = () => {
-  const r = new pe();
+  const r = new j();
   return [r, r];
 };
 class X {
@@ -282,16 +294,16 @@ class S extends Error {
     s(this, "name", "CanvasError");
   }
 }
-class we {
+class me {
   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);
@@ -365,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)
@@ -498,7 +510,7 @@ class we {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class Be {
+class We {
   constructor() {
     s(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     s(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -538,16 +550,16 @@ class Be {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class fe {
+class ve {
   constructor() {
     s(this, "nodes", /* @__PURE__ */ new Map());
     s(this, "ports", /* @__PURE__ */ new Map());
     s(this, "edges", /* @__PURE__ */ new Map());
     s(this, "nodesElementsMap", /* @__PURE__ */ new Map());
-    s(this, "incomingEdges", /* @__PURE__ */ new Map());
-    s(this, "outcomingEdges", /* @__PURE__ */ new Map());
-    s(this, "cycleEdges", /* @__PURE__ */ new Map());
-    s(this, "elementPorts", new Be());
+    s(this, "portIncomingEdges", /* @__PURE__ */ new Map());
+    s(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
+    s(this, "portCycleEdges", /* @__PURE__ */ new Map());
+    s(this, "elementPorts", new We());
     s(this, "afterNodeAddedEmitter");
     s(this, "onAfterNodeAdded");
     s(this, "afterNodeUpdatedEmitter");
@@ -614,7 +626,7 @@ class fe {
         direction: e.direction
       },
       nodeId: e.nodeId
-    }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
+    }), this.elementPorts.addRecord(e.element, e.id), this.portCycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.portIncomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.portOutcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
   getPort(e) {
     return this.ports.get(e);
@@ -665,16 +677,16 @@ class fe {
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
-    this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
+    this.beforeClearEmitter.emit(), this.portIncomingEdges.clear(), this.portOutcomingEdges.clear(), this.portCycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
   getPortIncomingEdgeIds(e) {
-    return Array.from(this.incomingEdges.get(e));
+    return Array.from(this.portIncomingEdges.get(e));
   }
   getPortOutgoingEdgeIds(e) {
-    return Array.from(this.outcomingEdges.get(e));
+    return Array.from(this.portOutcomingEdges.get(e));
   }
   getPortCycleEdgeIds(e) {
-    return Array.from(this.cycleEdges.get(e));
+    return Array.from(this.portCycleEdges.get(e));
   }
   getPortAdjacentEdgeIds(e) {
     return [
@@ -684,32 +696,51 @@ class fe {
     ];
   }
   getNodeIncomingEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys());
-    let o = [];
+    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
     return t.forEach((i) => {
-      o = [...o, ...this.getPortIncomingEdgeIds(i)];
+      this.getPortIncomingEdgeIds(i).filter((n) => {
+        const a = this.getEdge(n);
+        return this.getPort(a.from).nodeId !== e;
+      }).forEach((n) => {
+        o.push(n);
+      });
     }), o;
   }
   getNodeOutgoingEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys());
-    let o = [];
+    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
     return t.forEach((i) => {
-      o = [...o, ...this.getPortOutgoingEdgeIds(i)];
+      this.getPortOutgoingEdgeIds(i).filter((n) => {
+        const a = this.getEdge(n);
+        return this.getPort(a.to).nodeId !== e;
+      }).forEach((n) => {
+        o.push(n);
+      });
     }), o;
   }
   getNodeCycleEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys());
-    let o = [];
+    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
     return t.forEach((i) => {
-      o = [...o, ...this.getPortCycleEdgeIds(i)];
+      this.getPortCycleEdgeIds(i).forEach((n) => {
+        o.push(n);
+      }), this.getPortIncomingEdgeIds(i).filter((n) => {
+        const a = this.getEdge(n);
+        return this.getPort(a.to).nodeId === e;
+      }).forEach((n) => {
+        o.push(n);
+      });
     }), o;
   }
   getNodeAdjacentEdgeIds(e) {
-    return [
-      ...this.getNodeIncomingEdgeIds(e),
-      ...this.getNodeOutgoingEdgeIds(e),
-      ...this.getNodeCycleEdgeIds(e)
-    ];
+    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
+    return t.forEach((i) => {
+      this.getPortIncomingEdgeIds(i).forEach((n) => {
+        o.push(n);
+      }), this.getPortOutgoingEdgeIds(i).forEach((n) => {
+        o.push(n);
+      }), this.getPortCycleEdgeIds(i).forEach((n) => {
+        o.push(n);
+      });
+    }), o;
   }
   addEdgeInternal(e) {
     this.edges.set(e.id, {
@@ -719,26 +750,26 @@ class fe {
         shape: e.shape,
         priority: e.priority
       }
-    }), e.from !== e.to ? (this.outcomingEdges.get(e.from).add(e.id), this.incomingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
+    }), e.from !== e.to ? (this.portOutcomingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id)) : this.portCycleEdges.get(e.from).add(e.id);
   }
   removeEdgeInternal(e) {
     const t = this.edges.get(e), o = t.from, i = t.to;
-    this.cycleEdges.get(o).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(o).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(o).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
+    this.portCycleEdges.get(o).delete(e), this.portCycleEdges.get(i).delete(e), this.portIncomingEdges.get(o).delete(e), this.portIncomingEdges.get(i).delete(e), this.portOutcomingEdges.get(o).delete(e), this.portOutcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const ie = (r) => ({
+const de = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ne = {
+}), ce = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Fe {
+class ke {
   constructor() {
-    s(this, "viewportMatrix", ne);
-    s(this, "contentMatrix", ne);
+    s(this, "viewportMatrix", ce);
+    s(this, "contentMatrix", ce);
     s(this, "afterUpdateEmitter");
     s(this, "onAfterUpdated");
     [this.afterUpdateEmitter, this.onAfterUpdated] = E();
@@ -754,17 +785,17 @@ class Fe {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = ie(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = de(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = de(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class j {
+class G {
   constructor(e) {
     s(this, "elementToNodeId", /* @__PURE__ */ new Map());
     s(this, "nodesResizeObserver");
@@ -787,17 +818,17 @@ class j {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
   static configure(e) {
-    new j(e);
+    new G(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const Oe = (r, e, t) => {
+const ze = (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;
-}, 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) => {
+}, Xe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, o) => ze(e, t, o) && Xe(r, t, o), I = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, B = (r) => {
   const e = document.createElement("div");
@@ -814,22 +845,22 @@ const Oe = (r, e, t) => {
       }
     ]
   };
-}, ke = (r, e) => {
+}, Ye = (r, e) => {
   let t = e, o = null;
   for (; t !== null && (o = r.getElementPortIds(t)[0] ?? null, o === null); )
     t = t.parentElement;
   return o;
-}, ye = (r, e) => {
+}, Ee = (r, e) => {
   const t = document.elementsFromPoint(e.x, e.y);
   for (const o of t) {
-    const i = ke(r, o);
+    const i = Ye(r, o);
     if (i !== null)
       return i;
   }
   return null;
 };
 var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
-const me = (r, e) => ({
+const Ae = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), u = {
@@ -838,7 +869,7 @@ const me = (r, e) => ({
 }, m = (r, e, t) => ({
   x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
   y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
-}), ve = (r, e) => {
+}), xe = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -854,11 +885,11 @@ const me = (r, e) => ({
     flipX: d,
     flipY: c
   };
-}, O = (r, e, t, o) => ({
+}, F = (r, e, t, o) => ({
   x: e * r.x + (1 - e) / 2 * o.x,
   y: t * r.y + (1 - t) / 2 * o.y
 });
-class ze {
+class He {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -883,7 +914,7 @@ class ze {
     this.path = `${d}${h}${c}`;
   }
 }
-class Xe {
+class je {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -935,26 +966,26 @@ class Xe {
       `C ${y.x} ${y.y} ${x.x} ${x.y} ${f.x} ${f.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);
+    ].join(" "), this.midpoint = F(f, e.flipX, e.flipY, e.to);
   }
 }
-const G = Object.freeze({
+const K = Object.freeze({
   edgeColor: "--edge-color"
-}), Ee = (r) => {
+}), Se = (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;
-}, Ae = (r) => {
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
+}, Pe = (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 = () => {
+  return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, O = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${G.edgeColor})`), r;
-}, xe = () => {
+  return r.setAttribute("fill", `var(${K.edgeColor})`), r;
+}, be = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Se = (r, e) => {
+}, Te = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
-}, M = (r, e) => {
+}, L = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const o = r.length - 1;
@@ -966,15 +997,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, 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(
+      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, N = y ? { x: h.x + c * b, y: h.y + l * b } : h;
+      d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${A.x} ${A.y}`
       );
     });
   }
   return t.join(" ");
 };
-class Ye {
+class Ge {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1007,13 +1038,13 @@ class Ye {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
     }, y = { x: f.x, y: l };
-    this.path = M(
+    this.path = L(
       [o, h, g, p, y, f, d, i],
       this.params.roundness
     );
   }
 }
-class He {
+class Ke {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1038,13 +1069,13 @@ class He {
       this.params.targetDirection,
       this.params.to
     ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
-    this.midpoint = O(f, e.flipX, e.flipY, e.to), this.path = M(
+    this.midpoint = F(f, e.flipX, e.flipY, e.to), this.path = L(
       [t, n, l, p, g, o],
       this.params.roundness
     );
   }
 }
-class je {
+class Ze {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1071,10 +1102,10 @@ class je {
       this.params.targetDirection,
       this.params.to
     );
-    this.path = M([o, a, h, i], this.params.roundness);
+    this.path = L([o, a, h, i], this.params.roundness);
   }
 }
-class Ge {
+class Je {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1107,13 +1138,13 @@ class Ge {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
     }, y = { x: l, y: f.y };
-    this.path = M(
+    this.path = L(
       [o, h, g, p, y, f, d, i],
       this.params.roundness
     );
   }
 }
-class K {
+class Z {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1130,10 +1161,10 @@ class K {
     ].map(
       (c) => m(c, this.params.sourceDirection, u)
     ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
-    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 };
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${L(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class Ke {
+class Qe {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1154,7 +1185,7 @@ class Ke {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
   }
 }
-class Ze {
+class _e {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1190,7 +1221,7 @@ class Ze {
     };
   }
 }
-class Je {
+class qe {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1218,7 +1249,7 @@ class Je {
       x: (n.x + a.x) / 2,
       y: l
     };
-    this.midpoint = O(g, e.flipX, e.flipY, e.to), this.path = M(
+    this.midpoint = F(g, e.flipX, e.flipY, e.to), this.path = L(
       [
         t,
         n,
@@ -1231,7 +1262,7 @@ class Je {
     );
   }
 }
-class Qe {
+class et {
   constructor(e) {
     s(this, "path");
     s(this, "midpoint");
@@ -1259,7 +1290,7 @@ class Qe {
       x: l,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = O(g, e.flipX, e.flipY, e.to), this.path = M(
+    this.midpoint = F(g, e.flipX, e.flipY, e.to), this.path = L(
       [
         t,
         n,
@@ -1294,30 +1325,30 @@ const w = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ae = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+}), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
 class W {
   constructor(e) {
     s(this, "svg");
-    s(this, "group", xe());
+    s(this, "group", be());
     s(this, "line");
     s(this, "sourceArrow", null);
     s(this, "targetArrow", null);
     s(this, "onAfterRender");
     s(this, "afterRenderEmitter");
     s(this, "arrowRenderer");
-    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));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Se(e.color), this.svg.appendChild(this.group), this.line = Pe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
+    const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = xe(
       e.from,
       e.to
     );
-    Se(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = ae(
+    Te(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = ge(
       e.from.direction,
       a,
       h
-    ), c = ae(
+    ), c = ge(
       e.to.direction,
       a,
       h
@@ -1326,7 +1357,7 @@ class W {
       y: n
     };
     let g = { x: -c.x, y: -c.y }, p;
-    e.category === L.PortCycle ? (p = this.params.createCyclePath, g = d) : e.category === L.NodeCycle ? p = this.params.createDetourPath : p = this.params.createLinePath;
+    e.category === R.PortCycle ? (p = this.params.createCyclePath, g = d) : e.category === R.NodeCycle ? p = this.params.createDetourPath : p = this.params.createLinePath;
     const f = p(
       d,
       c,
@@ -1353,7 +1384,7 @@ class W {
     });
   }
 }
-const _e = (r) => (e) => {
+const tt = (r) => (e) => {
   const o = [
     u,
     { x: e.arrowLength, y: r.radius },
@@ -1365,7 +1396,7 @@ const _e = (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`;
-}, qe = (r) => (e) => {
+}, rt = (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) => ({
@@ -1373,7 +1404,7 @@ const _e = (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}`;
-}, et = (r) => (e) => {
+}, ot = (r) => (e) => {
   const t = r.smallRadius, o = r.radius, i = m(
     {
       x: e.arrowLength,
@@ -1399,22 +1430,22 @@ const _e = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return _e({
+      return tt({
         radius: r.radius ?? w.polygonArrowRadius
       });
     case "arc":
-      return qe({
+      return rt({
         radius: r.radius ?? w.circleArrowRadius
       });
     default:
-      return et({
+      return ot({
         smallRadius: r.smallRadius ?? w.wedgeArrowSmallRadius,
         angle: r.angle ?? w.wedgeArrowAngle,
         radius: r.radius ?? w.wedgeArrowRadius
       });
   }
 };
-class tt {
+class st {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1431,7 +1462,7 @@ class tt {
     s(this, "hasSourceArrow");
     s(this, "hasTargetArrow");
     s(this, "pathShape");
-    s(this, "createCyclePath", (e) => new Ke({
+    s(this, "createCyclePath", (e) => new Qe({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1439,7 +1470,7 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new Xe({
+    s(this, "createDetourPath", (e, t, o, i, n) => new je({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1452,7 +1483,7 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o) => new ze({
+    s(this, "createLinePath", (e, t, o) => new He({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1477,7 +1508,7 @@ class tt {
     this.pathShape.render(e);
   }
 }
-class rt {
+class it {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1493,7 +1524,7 @@ class rt {
     s(this, "hasSourceArrow");
     s(this, "hasTargetArrow");
     s(this, "pathShape");
-    s(this, "createCyclePath", (e) => new K({
+    s(this, "createCyclePath", (e) => new Z({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1502,7 +1533,7 @@ class rt {
       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,
@@ -1515,7 +1546,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o, i) => new Ye({
+    s(this, "createLinePath", (e, t, o, i) => new Ge({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1548,7 +1579,7 @@ class rt {
     this.pathShape.render(e);
   }
 }
-class ot {
+class nt {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1565,7 +1596,7 @@ class ot {
     s(this, "hasSourceArrow");
     s(this, "hasTargetArrow");
     s(this, "pathShape");
-    s(this, "createCyclePath", (e) => new K({
+    s(this, "createCyclePath", (e) => new Z({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1574,7 +1605,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new He({
+    s(this, "createDetourPath", (e, t, o, i, n) => new Ke({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1588,7 +1619,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o) => new je({
+    s(this, "createLinePath", (e, t, o) => new Ze({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1620,7 +1651,7 @@ class ot {
     this.pathShape.render(e);
   }
 }
-class st {
+class at {
   constructor(e) {
     s(this, "svg");
     s(this, "group");
@@ -1636,7 +1667,7 @@ class st {
     s(this, "hasSourceArrow");
     s(this, "hasTargetArrow");
     s(this, "pathShape");
-    s(this, "createCyclePath", (e) => new K({
+    s(this, "createCyclePath", (e) => new Z({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1645,7 +1676,7 @@ class st {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createDetourPath", (e, t, o, i, n) => new Qe({
+    s(this, "createDetourPath", (e, t, o, i, n) => new et({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1658,7 +1689,7 @@ class st {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    s(this, "createLinePath", (e, t, o, i, n) => new Ge({
+    s(this, "createLinePath", (e, t, o, i, n) => new Je({
       to: o,
       sourceDirection: e,
       targetDirection: t,
@@ -1691,10 +1722,10 @@ class st {
     this.pathShape.render(e);
   }
 }
-class Pe {
+class Ne {
   constructor(e) {
     s(this, "svg");
-    s(this, "group", xe());
+    s(this, "group", be());
     s(this, "line");
     s(this, "sourceArrow", null);
     s(this, "targetArrow", null);
@@ -1706,15 +1737,15 @@ class Pe {
     s(this, "onAfterRender");
     s(this, "afterRenderEmitter");
     s(this, "arrowRenderer");
-    [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));
+    [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 = Se(this.color), this.svg.appendChild(this.group), this.line = Pe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
+    const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = xe(
       e.from,
       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 Ze({
+    Te(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 _e({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1765,40 +1796,40 @@ class Pe {
     });
   }
 }
-const it = () => {
+const ht = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, nt = (r) => {
+}, dt = (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) => {
+}, le = (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 at extends Error {
+class ct extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class be {
+class De {
   constructor(e, t) {
     s(this, "svg");
     s(this, "group");
     s(this, "line");
     s(this, "sourceArrow");
     s(this, "targetArrow");
-    s(this, "handle", it());
+    s(this, "handle", ht());
     s(this, "onAfterRender");
     s(this, "interactiveLine");
     s(this, "interactiveSourceArrow", null);
     s(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof be)
-      throw new at(
+    if (this.baseEdge = e, e instanceof De)
+      throw new ct(
         "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 = 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 = dt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = le(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = le(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);
     });
   }
@@ -1806,7 +1837,7 @@ class be {
     this.baseEdge.render(e);
   }
 }
-class Lt {
+class kt {
   constructor(e, t) {
     s(this, "group");
     s(this, "line");
@@ -1823,7 +1854,7 @@ class Lt {
     this.baseShape.render(e);
   }
 }
-class Te {
+class Le {
   constructor(e) {
     s(this, "onAfterNodeAdded");
     s(this, "onAfterNodeUpdated");
@@ -1916,7 +1947,7 @@ class Te {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class De {
+class Me {
   constructor(e) {
     s(this, "onAfterUpdated");
     this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
@@ -1928,21 +1959,21 @@ class De {
     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 = {
+const Re = (r, e) => {
+  const t = new ve(), o = new Le(t), i = new Me(e), n = new ye(t, e, r), a = {
     nodes: {
-      centerFn: me,
+      centerFn: Ae,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Pe(),
+      shapeFactory: () => new Ne(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
   };
-  return new we(
+  return new me(
     o,
     i,
     t,
@@ -2058,7 +2089,7 @@ class k {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Z {
+class J {
   constructor(e, t, o, i) {
     s(this, "grabbedNode", null);
     s(this, "maxNodePriority", 0);
@@ -2179,7 +2210,7 @@ class Z {
     this.canvas = e, this.element = t, this.window = o, this.params = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, o, i) {
-    new Z(e, t, o, i);
+    new J(e, t, o, i);
   }
   moveNode(e, t) {
     if (this.graph.getNode(e.nodeId) === null)
@@ -2248,11 +2279,11 @@ class Z {
     return e;
   }
 }
-const ht = (r, e, t) => ({
+const gt = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), dt = (r, e, t, o) => ({
+}), lt = (r, e, t, o) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * o + r.y
@@ -2375,7 +2406,7 @@ class z {
     new z(e, t, o, i);
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), i = ht(o, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), i = gt(o, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: i,
       canvasWidth: n,
@@ -2384,7 +2415,7 @@ class z {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = dt(i, e, t, o), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = lt(i, e, t, o), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: a,
@@ -2414,7 +2445,7 @@ class z {
     this.transformInProgress = !1, this.params.onTransformFinished();
   }
 }
-class J {
+class Q {
   constructor(e, t, o, i, n, a) {
     s(this, "canvasResizeObserver");
     s(this, "nodeHorizontal");
@@ -2473,7 +2504,7 @@ class J {
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, o, i, n, a) {
-    new J(
+    new Q(
       e,
       t,
       o,
@@ -2496,24 +2527,24 @@ class J {
     this.trigger.emit({ x: o, y: i, width: n, height: a });
   }
 }
-const ct = () => {
+const ut = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, gt = () => {
+}, pt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, lt = () => {
+}, wt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class Q {
+class _ {
   constructor(e, t, o) {
-    s(this, "svg", ct());
-    s(this, "patternRenderingRectangle", gt());
-    s(this, "pattern", lt());
+    s(this, "svg", ut());
+    s(this, "patternRenderingRectangle", pt());
+    s(this, "pattern", wt());
     s(this, "patternContent");
     s(this, "tileWidth");
     s(this, "tileHeight");
@@ -2538,14 +2569,14 @@ class Q {
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new Q(e, t, o);
+    new _(e, t, o);
   }
   updateVisibility() {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
     t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
   }
 }
-class _ {
+class q {
   constructor(e, t, o, i, n) {
     s(this, "overlayCanvas");
     s(this, "staticPortId", null);
@@ -2553,7 +2584,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 = Ne(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Re(
       this.overlayLayer,
       this.viewportStore
     ), k.configure(
@@ -2580,7 +2611,7 @@ class _ {
     );
   }
   static configure(e, t, o, i, n) {
-    new _(
+    new q(
       e,
       t,
       o,
@@ -2618,7 +2649,7 @@ class _ {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = ye(this.canvas.graph, e), o = this.staticPortId;
+    const t = Ee(this.canvas.graph, e), o = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: o,
@@ -2640,7 +2671,7 @@ class _ {
     });
   }
 }
-class q {
+class ee {
   constructor(e, t, o, i, n) {
     s(this, "overlayCanvas");
     s(this, "staticPortId", null);
@@ -2649,7 +2680,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 = Ne(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Re(
       this.overlayLayer,
       this.viewportStore
     ), k.configure(
@@ -2673,7 +2704,7 @@ class q {
     );
   }
   static configure(e, t, o, i, n) {
-    new q(
+    new ee(
       e,
       t,
       o,
@@ -2715,14 +2746,14 @@ class q {
       overlayId: P.Dragging,
       portCoords: v,
       portDirection: d.direction
-    }, [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;
+    }, [M, b] = this.isTargetDragging ? [x, A] : [A, x];
+    this.overlayCanvas.addNode(B(M)), this.overlayCanvas.addNode(B(b));
+    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
       id: P.Edge,
-      from: R.overlayId,
+      from: M.overlayId,
       to: b.overlayId,
-      shape: D
+      shape: N
     }), !0;
   }
   resetDragState() {
@@ -2739,7 +2770,7 @@ class q {
     });
   }
   tryCreateConnection(e) {
-    const t = ye(this.canvas.graph, e);
+    const t = Ee(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -2772,45 +2803,147 @@ class q {
     }
   }
 }
-const ut = () => {
+class te {
+  constructor(e, t, o) {
+    this.canvas = e, this.layoutAlgorithm = t, this.trigger = o, this.trigger.subscribe(() => {
+      this.applyLayout();
+    });
+  }
+  static configure(e, t, o) {
+    new te(
+      e,
+      t,
+      o
+    );
+  }
+  applyLayout() {
+    this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
+      this.canvas.updateNode(o, t);
+    });
+  }
+}
+class re {
+  constructor(e, t) {
+    s(this, "applyScheduled", !1);
+    this.canvas = e, this.layoutAlgorithm = t, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
+      this.scheduleApply();
+    }), this.canvas.graph.onBeforeNodeRemoved.subscribe(() => {
+      this.scheduleApply();
+    }), this.canvas.graph.onAfterEdgeAdded.subscribe(() => {
+      this.scheduleApply();
+    }), this.canvas.graph.onBeforeEdgeRemoved.subscribe(() => {
+      this.scheduleApply();
+    });
+  }
+  static configure(e, t) {
+    new re(
+      e,
+      t
+    );
+  }
+  scheduleApply() {
+    this.applyScheduled || (this.applyScheduled = !0, setTimeout(() => {
+      this.applyScheduled = !1, this.applyLayout();
+    }));
+  }
+  applyLayout() {
+    this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
+      this.canvas.updateNode(o, t);
+    });
+  }
+}
+class ft {
+  static configure(e, t) {
+    const o = t.applyOn;
+    switch (o.type) {
+      case "manual": {
+        te.configure(
+          e,
+          t.algorithm,
+          o.trigger
+        );
+        break;
+      }
+      case "topologyChangeTimeout": {
+        re.configure(
+          e,
+          t.algorithm
+        );
+        break;
+      }
+    }
+  }
+}
+class yt {
+  constructor(e, t) {
+    s(this, "previousTimeStamp");
+    s(this, "step", (e) => {
+      if (this.previousTimeStamp === void 0)
+        this.previousTimeStamp = e;
+      else {
+        const t = (e - this.previousTimeStamp) / 1e3;
+        this.previousTimeStamp = e, this.callback(t);
+      }
+      this.win.requestAnimationFrame(this.step);
+    });
+    this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
+  }
+}
+class oe {
+  constructor(e, t, o, i) {
+    s(this, "step", (e) => {
+      this.params.algorithm.calculateNextCoordinates(
+        this.canvas.graph,
+        e
+      ).forEach((o, i) => {
+        this.staticNodes.has(i) || this.canvas.updateNode(i, { x: o.x, y: o.y });
+      });
+    });
+    this.canvas = e, this.params = t, this.staticNodes = o, this.win = i, new yt(this.win, this.step);
+  }
+  static configure(e, t, o, i) {
+    new oe(e, t, o, i);
+  }
+}
+const mt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Y = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, de = () => {
+}, ue = () => {
   const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class pt {
+class vt {
   constructor(e) {
     s(this, "background", Y());
     s(this, "main", Y());
-    s(this, "overlayConnectablePorts", de());
-    s(this, "overlayDraggableEdges", de());
-    s(this, "host", ut());
+    s(this, "overlayConnectablePorts", ue());
+    s(this, "overlayDraggableEdges", ue());
+    s(this, "host", mt());
     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), wt = () => {
+const H = (r) => () => r, pe = H(0), Et = () => {
   let r = 0;
   return () => r++;
-}, ft = (r, e) => {
-  let t = ce, o = ce;
-  const i = wt();
+}, At = (r, e) => {
+  let t = pe, o = pe;
+  const i = Et();
   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
   };
-}, ee = (r) => {
+}, se = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new ot({
+      return () => new nt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2824,7 +2957,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new rt({
+      return () => new it({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2837,7 +2970,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new st({
+      return () => new at({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2850,7 +2983,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Pe({
+      return () => new Ne({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2861,7 +2994,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new tt({
+      return () => new st({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2875,26 +3008,26 @@ const H = (r) => () => r, ce = H(0), wt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, yt = (r) => {
+}, xt = (r) => {
   var t, o, i, n, a;
-  const e = ft(
+  const e = At(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? Ae,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ee(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: se(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, mt = (r) => {
+}, St = (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) ?? (() => {
@@ -2910,7 +3043,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     nodeDragVerifier: t,
     onNodeDragFinished: o
   };
-}, vt = (r) => {
+}, Pt = (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;
@@ -2920,7 +3053,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     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 };
   };
-}, Et = (r) => {
+}, bt = (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;
@@ -2941,7 +3074,7 @@ const H = (r) => () => r, ce = H(0), wt = () => {
       y: l
     };
   };
-}, At = (r) => (e) => r.reduce(
+}, Tt = (r) => (e) => r.reduce(
   (t, o) => o({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -2949,40 +3082,40 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ge = (r) => {
+), we = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Et({
+      return bt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return vt({
+      return Pt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, le = (r) => {
-  var y, v, x, A, R, b, D, V, te, re, oe, se;
+}, fe = (r) => {
+  var y, v, x, A, M, b, N, V, ie, ne, ae, he;
   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(
+  o !== void 0 ? Array.isArray(o) ? i = Tt(
     o.map(
-      (N) => ge(N)
+      (D) => we(D)
     )
-  ) : i = ge(o) : i = (N) => N.nextTransform;
+  ) : i = we(o) : i = (D) => D.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 = ((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;
+  }), d = (M = r == null ? void 0 : r.shift) == null ? void 0 : M.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (D) => D.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
+    onTransformFinished: ((ie = r == null ? void 0 : r.events) == null ? void 0 : ie.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
@@ -2991,30 +3124,30 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: f,
-    scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((ne = r == null ? void 0 : r.scale) == null ? void 0 : ne.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((ae = r == null ? void 0 : r.events) == null ? void 0 : ae.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((he = r == null ? void 0 : r.events) == null ? void 0 : he.onResizeTransformFinished) ?? (() => {
     })
   };
-}, xt = (r, e) => {
+}, Nt = (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;
-}, St = (r) => r instanceof SVGElement ? r : xt(
+}, Dt = (r) => r instanceof SVGElement ? r : Nt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), 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 ?? {});
+), Lt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, i = Dt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: o,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, bt = (r, e, t) => {
+}, Mt = (r, e, t) => {
   var c, l, g;
   const o = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
   }, h = () => {
@@ -3029,9 +3162,9 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? se(r.edgeShape) : e
   };
-}, Tt = (r, e) => {
+}, Rt = (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);
@@ -3045,15 +3178,15 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? se(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, Dt = (r) => ({
+}, Ct = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Nt = (r) => {
+}), Vt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3062,13 +3195,36 @@ const H = (r) => () => r, ce = H(0), wt = () => {
     })
   };
 };
-class Mt extends Error {
+class $t extends Error {
   constructor() {
     super(...arguments);
     s(this, "name", "CanvasBuilderError");
   }
 }
-class Ct {
+const Ut = (r) => ({
+  algorithm: r.algorithm
+}), It = (r) => r instanceof j ? {
+  type: "manual",
+  trigger: r
+} : {
+  type: "topologyChangeTimeout"
+}, Bt = (r) => ({
+  algorithm: r.algorithm,
+  applyOn: It(r.applyOn)
+}), Ot = (r, e) => ({
+  ...r,
+  nodeDragVerifier: (t) => (e.add(t), r.nodeDragVerifier(t)),
+  onNodeDragFinished: (t) => {
+    e.delete(t), r.onNodeDragFinished(t);
+  }
+}), Ft = (r, e) => {
+  r.onBeforeNodeRemoved.subscribe((t) => {
+    e.delete(t);
+  }), r.onBeforeClear.subscribe(() => {
+    e.clear();
+  });
+};
+class zt {
   constructor(e) {
     s(this, "used", !1);
     s(this, "canvasDefaults", {});
@@ -3078,18 +3234,21 @@ class Ct {
     s(this, "connectablePortsConfig", {});
     s(this, "draggableEdgesConfig", {});
     s(this, "virtualScrollConfig");
-    s(this, "hasDraggableNode", !1);
+    s(this, "layoutConfig");
+    s(this, "animatedLayoutConfig");
+    s(this, "hasDraggableNodes", !1);
     s(this, "hasTransformableViewport", !1);
     s(this, "hasNodeResizeReactiveEdges", !1);
     s(this, "hasBackground", !1);
     s(this, "hasUserConnectablePorts", !1);
     s(this, "hasUserDraggableEdges", !1);
-    s(this, "boxRenderingTrigger", new pe());
-    s(this, "graphStore", new fe());
-    s(this, "viewportStore", new Fe());
-    s(this, "graph", new Te(this.graphStore));
-    s(this, "viewport", new De(this.viewportStore));
+    s(this, "boxRenderingTrigger", new j());
+    s(this, "graphStore", new ve());
+    s(this, "viewportStore", new ke());
+    s(this, "graph", new Le(this.graphStore));
+    s(this, "viewport", new Me(this.viewportStore));
     s(this, "window", window);
+    s(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     this.element = e;
   }
   /**
@@ -3102,7 +3261,7 @@ class Ct {
    * enables nodes draggable by user
    */
   enableUserDraggableNodes(e) {
-    return this.hasDraggableNode = !0, this.dragConfig = e ?? {}, this;
+    return this.hasDraggableNodes = !0, this.dragConfig = e ?? {}, this;
   }
   /**
    * enables viewport transformable by user
@@ -3135,29 +3294,44 @@ class Ct {
   enableUserConnectablePorts(e) {
     return this.hasUserConnectablePorts = !0, this.connectablePortsConfig = e ?? {}, this;
   }
+  /**
+   * enables edges dragging by dragging one of the adjacent ports
+   */
   enableUserDraggableEdges(e) {
     return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
   }
+  /**
+   * enables nodes positioning with specified layout
+   */
+  enableLayout(e) {
+    return this.layoutConfig = e, this.animatedLayoutConfig = void 0, this;
+  }
+  /**
+   * enables animated nodes positioning with specified layout
+   */
+  enableAnimatedLayout(e) {
+    return this.animatedLayoutConfig = e, this.layoutConfig = void 0, this;
+  }
   /**
    * builds final canvas
    */
   build() {
     if (this.used)
-      throw new Mt("CanvasBuilder is a single use object");
+      throw new $t("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new pt(this.element);
-    let t = new ue(
+    const e = new vt(this.element);
+    let t = new ye(
       this.graphStore,
       this.viewportStore,
       e.main
     );
-    this.virtualScrollConfig !== void 0 && (t = new Ue(
+    this.virtualScrollConfig !== void 0 && (t = new Oe(
       t,
       this.graphStore,
       this.boxRenderingTrigger,
-      Nt(this.virtualScrollConfig)
-    )), t = new Ie(t, this.graphStore);
-    const o = yt(this.canvasDefaults), i = new we(
+      Vt(this.virtualScrollConfig)
+    )), t = new Fe(t, this.graphStore);
+    const o = xt(this.canvasDefaults), i = new me(
       this.graph,
       this.viewport,
       this.graphStore,
@@ -3165,22 +3339,29 @@ class Ct {
       t,
       o
     );
-    if (this.hasBackground && Q.configure(
+    if (this.hasBackground && _.configure(
       i,
-      Pt(this.backgroundConfig),
+      Lt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && j.configure(i), this.hasDraggableNode && Z.configure(
-      i,
-      e.main,
-      this.window,
-      mt(this.dragConfig)
-    ), this.hasUserConnectablePorts) {
-      const a = bt(
+    ), this.hasNodeResizeReactiveEdges && G.configure(i), this.hasDraggableNodes) {
+      let a = St(this.dragConfig);
+      this.animatedLayoutConfig !== void 0 && (a = Ot(
+        a,
+        this.animationStaticNodes
+      )), J.configure(
+        i,
+        e.main,
+        this.window,
+        a
+      );
+    }
+    if (this.hasUserConnectablePorts) {
+      const a = Mt(
         this.connectablePortsConfig,
         o.edges.shapeFactory,
         o.ports.direction
       );
-      _.configure(
+      q.configure(
         i,
         e.overlayConnectablePorts,
         this.viewportStore,
@@ -3189,11 +3370,11 @@ class Ct {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const a = Tt(
+      const a = Rt(
         this.draggableEdgesConfig,
         i.graph
       );
-      q.configure(
+      ee.configure(
         i,
         e.overlayDraggableEdges,
         this.viewportStore,
@@ -3201,19 +3382,30 @@ class Ct {
         a
       );
     }
-    this.virtualScrollConfig !== void 0 ? J.configure(
+    this.virtualScrollConfig !== void 0 ? Q.configure(
       i,
       e.main,
       this.window,
-      le(this.transformConfig),
+      fe(this.transformConfig),
       this.boxRenderingTrigger,
-      Dt(this.virtualScrollConfig)
+      Ct(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && z.configure(
       i,
       e.main,
       this.window,
-      le(this.transformConfig)
-    );
+      fe(this.transformConfig)
+    ), this.layoutConfig !== void 0 && ft.configure(
+      i,
+      Bt(this.layoutConfig)
+    ), this.animatedLayoutConfig !== void 0 && (Ft(
+      i.graph,
+      this.animationStaticNodes
+    ), oe.configure(
+      i,
+      Ut(this.animatedLayoutConfig),
+      this.animationStaticNodes,
+      this.window
+    ));
     const n = () => {
       e.destroy(), i.onBeforeDestroy.unsubscribe(n);
     };
@@ -3221,15 +3413,16 @@ class Ct {
   }
 }
 export {
-  tt as BezierEdgeShape,
-  Ct as CanvasBuilder,
-  Mt as CanvasBuilderError,
+  st as BezierEdgeShape,
+  zt as CanvasBuilder,
+  $t as CanvasBuilderError,
   S as CanvasError,
-  Pe as DirectEdgeShape,
-  rt as HorizontalEdgeShape,
-  at as InteractiveEdgeError,
-  be as InteractiveEdgeShape,
-  Lt as MidpointEdgeShape,
-  ot as StraightEdgeShape,
-  st as VerticalEdgeShape
+  Ne as DirectEdgeShape,
+  j as EventSubject,
+  it as HorizontalEdgeShape,
+  ct as InteractiveEdgeError,
+  De as InteractiveEdgeShape,
+  kt as MidpointEdgeShape,
+  nt as StraightEdgeShape,
+  at as VerticalEdgeShape
 };