@html-graph/html-graph 8.7.3 → 8.8.0

package/dist/html-graph.js

@@ -1,22 +1,22 @@
-var Ke = Object.defineProperty;
-var Qe = (r, e, t) => e in r ? Ke(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => Qe(r, typeof e != "symbol" ? e + "" : e, t);
-var D = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(D || {});
-const Ze = () => {
+var Qe = Object.defineProperty;
+var Ze = (r, e, t) => e in r ? Qe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => Ze(r, typeof e != "symbol" ? e + "" : e, t);
+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;
-}, Je = () => {
+}, qe = () => {
   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;
-}, _e = (r) => {
-  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 }, et = (r) => {
+  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
+}, tt = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class Ee {
+class Se {
   constructor(e, t, s) {
-    i(this, "host", Ze());
-    i(this, "container", Je());
+    i(this, "host", _e());
+    i(this, "container", qe());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     i(this, "applyTransform", () => {
@@ -27,11 +27,11 @@ class Ee {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    _e(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    et(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);
-    et(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    tt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -72,8 +72,8 @@ class Ee {
       h,
       d
     ), g = this.createEdgeRenderPort(o, a, h, d);
-    let l = D.Line;
-    s.element === o.element ? l = D.PortCycle : s.nodeId === o.nodeId && (l = D.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
+    let l = R.Line;
+    s.element === o.element ? l = R.PortCycle : s.nodeId === o.nodeId && (l = R.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -93,7 +93,7 @@ class Ee {
     };
   }
 }
-class tt {
+class rt {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -113,7 +113,7 @@ class tt {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class rt {
+class st {
   constructor(e, t, s, o) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -137,7 +137,7 @@ class rt {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new tt(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new rt(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -191,7 +191,7 @@ class rt {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class st {
+class ot {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -245,7 +245,7 @@ class st {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class K {
+class Q {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -261,16 +261,16 @@ class K {
     });
   }
 }
-const S = () => {
-  const r = new K();
+const b = () => {
+  const r = new Q();
   return [r, r];
 };
-class Se {
+class be {
   constructor(e, t, s, o) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
     i(this, "onBeforeDestroy");
-    this.graph = e, this.viewport = t, this.graphController = s, this.viewportController = o, [this.beforeDestroyEmitter, this.onBeforeDestroy] = S();
+    this.graph = e, this.viewport = t, this.graphController = s, this.viewportController = o, [this.beforeDestroyEmitter, this.onBeforeDestroy] = b();
   }
   addNode(e) {
     return this.graphController.addNode(e), this;
@@ -318,7 +318,7 @@ class Se {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class ot {
+class it {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -358,13 +358,35 @@ class ot {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class x extends Error {
+class A extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasError");
   }
 }
-class be {
+const E = Object.freeze({
+  accessNonexistingNode: (r) => `Failed to access node with ID ${JSON.stringify(r)} because it does not exist`,
+  addNodeWithExistingId: (r) => `Failed to add node with ID ${JSON.stringify(r)} because a node with this ID already exists`,
+  addNodeWithElementInUse: (r, e) => `Failed to add node with ID ${JSON.stringify(r)} because its HTML element is already attached to node with ID ${JSON.stringify(e)}`,
+  updateNonexistentNode: (r) => `Failed to update node with ID ${JSON.stringify(r)} because it does not exist`,
+  removeNonexistentNode: (r) => `Failed to remove node with ID ${JSON.stringify(r)} because it does not exist`,
+  accessNonexistentPort: (r) => `Failed to access port with ID ${JSON.stringify(r)} because it does not exist`,
+  addPortWithExistingId: (r) => `Failed to add port with ID ${JSON.stringify(r)} because a port with this ID already exists`,
+  addPortToNonexistentNode: (r, e) => `Failed to add port with ID ${JSON.stringify(r)} to node with ID ${JSON.stringify(e)} because the node does not exist`,
+  updateNonexistentPort: (r) => `Failed to update port with ID ${JSON.stringify(r)} because it does not exist`,
+  accessPortsOfNonexistentNode: (r) => `Failed to access ports of node with ID ${JSON.stringify(r)} because the node does not exist`,
+  removeNonexistentPort: (r) => `Failed to remove port with ID ${JSON.stringify(r)} because it does not exist`,
+  accessNonexistentEdge: (r) => `Failed to access edge with ID ${JSON.stringify(r)} because it does not exist`,
+  addEdgeWithExistingId: (r) => `Failed to add edge with ID ${JSON.stringify(r)} because an edge with this ID already exists`,
+  addEdgeFromNonexistentPort: (r, e) => `Failed to add edge with ID ${JSON.stringify(r)} from port with ID ${JSON.stringify(e)} because the port does not exist`,
+  addEdgeToNonexistentPort: (r, e) => `Failed to add edge with ID ${JSON.stringify(r)} to port with ID ${JSON.stringify(e)} because the port does not exist`,
+  updateNonexistentEdge: (r) => `Failed to update edge with ID ${JSON.stringify(r)} because it does not exist`,
+  updateNonexistentEdgeSource: (r, e) => `Failed to update source of edge with ID ${JSON.stringify(r)} because source port with ID ${JSON.stringify(e)} does not exist`,
+  updateNonexistentEdgeTarget: (r, e) => `Failed to update target of edge with ID ${JSON.stringify(r)} because target port with ID ${JSON.stringify(e)} does not exist`,
+  removeNonexistentEdge: (r) => `Failed to remove edge with ID ${JSON.stringify(r)} because it does not exist`,
+  accessEdgesForNonexistentPort: (r) => `Failed to access edges for port with ID ${JSON.stringify(r)} because the port does not exist`
+});
+class Ne {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -373,7 +395,7 @@ class be {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new ot());
+    i(this, "elementPorts", new it());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
     i(this, "afterNodeUpdatedEmitter");
@@ -400,7 +422,7 @@ class be {
     i(this, "onBeforeEdgeRemoved");
     i(this, "beforeClearEmitter");
     i(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = S(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = S(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = S(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = S(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = S(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = S(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = S(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = S(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = S(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = S(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = S(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = S(), [this.beforeClearEmitter, this.onBeforeClear] = S();
+    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = b(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = b(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = b(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = b(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = b(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = b(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = b(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = b(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = b(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = b(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = b(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = b(), [this.beforeClearEmitter, this.onBeforeClear] = b();
   }
   hasNode(e) {
     return this.nodes.has(e);
@@ -408,17 +430,18 @@ class be {
   getNode(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new x("failed to access nonexistent node");
+      throw new A(E.accessNonexistingNode(e));
     return t;
   }
   addNode(e) {
     if (this.hasNode(e.id))
-      throw new x("failed to add node with existing id");
-    if (this.findNodeIdByElement(e.element) !== void 0)
-      throw new x(
-        "failed to add node with html element already in use by another node"
+      throw new A(E.addNodeWithExistingId(e.id));
+    const t = this.findNodeIdByElement(e.element);
+    if (t !== void 0)
+      throw new A(
+        E.addNodeWithElementInUse(e.id, t)
       );
-    const t = /* @__PURE__ */ new Map(), s = {
+    const s = /* @__PURE__ */ new Map(), o = {
       element: e.element,
       payload: {
         x: e.x,
@@ -426,9 +449,9 @@ class be {
         centerFn: e.centerFn,
         priority: e.priority
       },
-      ports: t
+      ports: s
     };
-    this.nodes.set(e.id, s), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(e.id, o), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
@@ -438,15 +461,15 @@ class be {
   }
   updateNode(e, t) {
     if (!this.hasNode(e))
-      throw new x("failed to update nonexistent node");
+      throw new A(E.updateNonexistentNode(e));
     const { payload: s } = this.nodes.get(e);
     s.x = t.x ?? s.x, s.y = t.y ?? s.y, s.centerFn = t.centerFn ?? s.centerFn, t.priority !== void 0 && (s.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
     if (!this.hasNode(e))
-      throw new x("failed to remove nonexistent node");
+      throw new A(E.removeNonexistentNode(e));
     this.beforeNodeRemovedEmitter.emit(e);
-    const t = this.nodes.get(e);
+    const t = this.getNode(e);
     this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
   }
   hasPort(e) {
@@ -455,26 +478,28 @@ class be {
   getPort(e) {
     const t = this.ports.get(e);
     if (t === void 0)
-      throw new x("failed to access nonexistent port");
+      throw new A(E.accessNonexistentPort(e));
     return t;
   }
   addPort(e) {
     if (this.hasPort(e.id))
-      throw new x("failed to add port with existing id");
+      throw new A(E.addPortWithExistingId(e.id));
     if (!this.hasNode(e.nodeId))
-      throw new x("failed to add port to nonexistent node");
+      throw new A(
+        E.addPortToNonexistentNode(e.id, e.nodeId)
+      );
     this.ports.set(e.id, {
       element: e.element,
       payload: {
         direction: e.direction
       },
       nodeId: e.nodeId
-    }), this.elementPorts.addRecord(e.element, e.id), this.portCycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.portIncomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.portOutgoingEdges.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.portOutgoingEdges.set(e.id, /* @__PURE__ */ new Set()), this.getNode(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
   updatePort(e, t) {
     if (!this.hasPort(e))
-      throw new x("failed to update nonexistent port");
-    const s = this.ports.get(e).payload;
+      throw new A(E.updateNonexistentPort(e));
+    const s = this.getPort(e).payload;
     s.direction = t.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
@@ -486,14 +511,16 @@ class be {
   getNodePortIds(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new x("failed to access port ids of nonexistent node");
+      throw new A(
+        E.accessPortsOfNonexistentNode(e)
+      );
     return Array.from(t.ports.keys());
   }
   removePort(e) {
     if (!this.hasPort(e))
-      throw new x("failed to remove nonexistent port");
-    const t = this.ports.get(e).nodeId;
-    this.beforePortRemovedEmitter.emit(e), this.nodes.get(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
+      throw new A(E.removeNonexistentPort(e));
+    const t = this.getPort(e).nodeId;
+    this.beforePortRemovedEmitter.emit(e), this.getNode(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
   }
   hasEdge(e) {
     return this.edges.has(e);
@@ -501,23 +528,35 @@ class be {
   getEdge(e) {
     const t = this.edges.get(e);
     if (t === void 0)
-      throw new x("failed to access nonexistent edge");
+      throw new A(E.accessNonexistentEdge(e));
     return t;
   }
   addEdge(e) {
     if (this.hasEdge(e.id))
-      throw new x("failed to add edge with existing id");
+      throw new A(E.addEdgeWithExistingId(e.id));
     if (!this.hasPort(e.from))
-      throw new x("failed to add edge from nonexistent port");
+      throw new A(
+        E.addEdgeFromNonexistentPort(e.id, e.from)
+      );
     if (!this.hasPort(e.to))
-      throw new x("failed to add edge to nonexistent port");
+      throw new A(
+        E.addEdgeToNonexistentPort(e.id, e.to)
+      );
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
   updateEdge(e, t) {
     if (!this.hasEdge(e))
-      throw new x("failed to update nonexistent edge");
+      throw new A(E.updateNonexistentEdge(e));
     if (t.from !== void 0 || t.to !== void 0) {
-      const o = this.edges.get(e), n = o.payload;
+      if (t.from !== void 0 && !this.hasPort(t.from))
+        throw new A(
+          E.updateNonexistentEdgeSource(e, t.from)
+        );
+      if (t.to !== void 0 && !this.hasPort(t.to))
+        throw new A(
+          E.updateNonexistentEdgeTarget(e, t.to)
+        );
+      const o = this.getEdge(e), n = o.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
         id: e,
         from: t.from ?? o.from,
@@ -534,7 +573,7 @@ class be {
   }
   removeEdge(e) {
     if (!this.hasEdge(e))
-      throw new x("failed to remove nonexistent edge");
+      throw new A(E.removeNonexistentEdge(e));
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
@@ -543,19 +582,25 @@ class be {
   getPortIncomingEdgeIds(e) {
     const t = this.portIncomingEdges.get(e);
     if (t === void 0)
-      throw new x("failed to access edges for nonexistent port");
+      throw new A(
+        E.accessEdgesForNonexistentPort(e)
+      );
     return Array.from(t);
   }
   getPortOutgoingEdgeIds(e) {
     const t = this.portOutgoingEdges.get(e);
     if (t === void 0)
-      throw new x("failed to access edges for nonexistent port");
+      throw new A(
+        E.accessEdgesForNonexistentPort(e)
+      );
     return Array.from(t);
   }
   getPortCycleEdgeIds(e) {
     const t = this.portCycleEdges.get(e);
     if (t === void 0)
-      throw new x("failed to access edges for nonexistent port");
+      throw new A(
+        E.accessEdgesForNonexistentPort(e)
+      );
     return Array.from(t);
   }
   getPortAdjacentEdgeIds(e) {
@@ -623,26 +668,26 @@ class be {
     }), e.from !== e.to ? (this.portOutgoingEdges.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), s = t.from, o = t.to;
-    this.portCycleEdges.get(s).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(s).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutgoingEdges.get(s).delete(e), this.portOutgoingEdges.get(o).delete(e), this.edges.delete(e);
+    const { from: t, to: s } = this.getEdge(e);
+    this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(s).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(s).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(s).delete(e), this.edges.delete(e);
   }
 }
-const ue = (r) => ({
+const pe = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), pe = {
+}), we = {
   scale: 1,
   x: 0,
   y: 0
-}, we = (r, e) => ({
+}, ye = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class it {
+class nt {
   constructor(e) {
-    i(this, "viewportMatrix", pe);
-    i(this, "contentMatrix", pe);
+    i(this, "viewportMatrix", we);
+    i(this, "contentMatrix", we);
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
@@ -652,7 +697,7 @@ class it {
     i(this, "observer", new ResizeObserver(() => {
       this.afterResizeEmitter.emit();
     }));
-    this.host = e, [this.afterUpdateEmitter, this.onAfterUpdated] = S(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = S(), [this.afterResizeEmitter, this.onAfterResize] = S(), this.observer.observe(this.host);
+    this.host = e, [this.afterUpdateEmitter, this.onAfterUpdated] = b(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = b(), [this.afterResizeEmitter, this.onAfterResize] = b(), this.observer.observe(this.host);
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -665,30 +710,30 @@ class it {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ue(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = pe(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.beforeUpdateEmitter.emit(), this.viewportMatrix = ue(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = pe(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
   getDimensions() {
     const { width: e, height: t } = this.host.getBoundingClientRect();
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return we(this.viewportMatrix, e);
+    return ye(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return we(this.contentMatrix, e);
+    return ye(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
   }
 }
-class Q {
+class Z {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -714,19 +759,19 @@ class Q {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e) {
-    new Q(e);
+    new Z(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const nt = (r, e, t) => {
+const at = (r, e, t) => {
   const { x: s, y: o, width: n, height: a } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= o && t <= o + a;
-}, at = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => nt(e, t, s) && at(r, t, s), U = (r, e) => {
+}, ht = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => at(e, t, s) && ht(r, t, s), O = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, O = (r) => {
+}, W = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -741,7 +786,7 @@ const nt = (r, e, t) => {
       }
     ]
   };
-}, ht = (r, e) => {
+}, dt = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const s = r.findPortIdsByElement(t)[0] ?? null;
@@ -774,7 +819,7 @@ function* Pe(r, e) {
 const Ce = (r, e) => {
   const t = Pe(document, e);
   for (const s of t) {
-    const o = ht(r, s);
+    const o = dt(r, s);
     if (o.status === "portFound")
       return o.portId;
     if (o.status === "nodeEncountered")
@@ -783,7 +828,7 @@ const Ce = (r, e) => {
   return null;
 };
 var C = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(C || {});
-const Ne = (r, e) => ({
+const Te = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), y = {
@@ -792,7 +837,7 @@ const Ne = (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)
-}), Te = (r, e) => {
+}), Me = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -808,11 +853,11 @@ const Ne = (r, e) => ({
     flipX: d,
     flipY: c
   };
-}, z = (r, e, t, s) => ({
+}, k = (r, e, t, s) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class dt {
+class ct {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -837,7 +882,7 @@ class dt {
     this.path = `${d}${h}${c}`;
   }
 }
-class ct {
+class lt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -876,39 +921,39 @@ class ct {
     }, v = {
       x: l.x - this.params.curvature * this.params.targetDirection.x,
       y: l.y - this.params.curvature * this.params.targetDirection.y
-    }, E = {
+    }, S = {
       x: c.x + h,
       y: c.y + d
-    }, b = {
+    }, N = {
       x: l.x + h,
       y: l.y + d
     };
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${p.x} ${p.y} ${E.x} ${E.y} ${w.x} ${w.y}`,
-      `C ${b.x} ${b.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
+      `C ${p.x} ${p.y} ${S.x} ${S.y} ${w.x} ${w.y}`,
+      `C ${N.x} ${N.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = z(w, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = k(w, e.flipX, e.flipY, e.to);
   }
 }
-const Z = Object.freeze({
+const _ = Object.freeze({
   edgeColor: "--edge-color"
-}), Me = (r) => {
+}), De = (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(Z.edgeColor, r), e;
-}, De = (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(_.edgeColor, r), e;
+}, Re = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, W = () => {
+  return e.setAttribute("stroke", `var(${_.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, z = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
-}, Re = () => {
+  return r.setAttribute("fill", `var(${_.edgeColor})`), r;
+}, Le = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Le = (r, e) => {
+}, Fe = (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) => {
+}, D = (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 s = r.length - 1;
@@ -920,15 +965,15 @@ const Z = Object.freeze({
         const V = r[d + 1];
         o = V.x - h.x, n = V.y - h.y, a = Math.sqrt(o * o + n * n);
       }
-      const E = a !== 0 ? Math.min((p ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = p ? { x: h.x + o * E, y: h.y + n * E } : h, P = l !== 0 ? Math.min((p ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, L = p ? { x: h.x + c * P, y: h.y + g * P } : h;
-      d > 0 && t.push(`L ${L.x} ${L.y}`), p && t.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${b.x} ${b.y}`
+      const S = a !== 0 ? Math.min((p ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, N = p ? { x: h.x + o * S, y: h.y + n * S } : h, P = l !== 0 ? Math.min((p ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, F = p ? { x: h.x + c * P, y: h.y + g * P } : h;
+      d > 0 && t.push(`L ${F.x} ${F.y}`), p && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${N.x} ${N.y}`
       );
     });
   }
   return t.join(" ");
 };
-class lt {
+class gt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -961,13 +1006,13 @@ class lt {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
     }, p = { x: w.x, y: g };
-    this.path = M(
+    this.path = D(
       [s, h, l, u, p, w, d, o],
       this.params.roundness
     );
   }
 }
-class gt {
+class ut {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -992,13 +1037,13 @@ class gt {
       this.params.targetDirection,
       this.params.to
     ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
-    this.midpoint = z(w, e.flipX, e.flipY, e.to), this.path = M(
+    this.midpoint = k(w, e.flipX, e.flipY, e.to), this.path = D(
       [t, n, g, u, l, s],
       this.params.roundness
     );
   }
 }
-class ut {
+class pt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1025,10 +1070,10 @@ class ut {
       this.params.targetDirection,
       this.params.to
     );
-    this.path = M([s, a, h, o], this.params.roundness);
+    this.path = D([s, a, h, o], this.params.roundness);
   }
 }
-class pt {
+class wt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1061,13 +1106,13 @@ class pt {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
     }, p = { x: g, y: w.y };
-    this.path = M(
+    this.path = D(
       [s, h, l, u, p, w, d, o],
       this.params.roundness
     );
   }
 }
-class J {
+class q {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1084,10 +1129,10 @@ class J {
     ].map(
       (c) => m(c, this.params.sourceDirection, y)
     ), d = `M ${y.x} ${y.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}${D(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class wt {
+class yt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1108,7 +1153,7 @@ class wt {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
   }
 }
-class yt {
+class ft {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1144,7 +1189,7 @@ class yt {
     };
   }
 }
-class ft {
+class mt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1172,7 +1217,7 @@ class ft {
       x: (n.x + a.x) / 2,
       y: g
     };
-    this.midpoint = z(l, e.flipX, e.flipY, e.to), this.path = M(
+    this.midpoint = k(l, e.flipX, e.flipY, e.to), this.path = D(
       [
         t,
         n,
@@ -1185,7 +1230,7 @@ class ft {
     );
   }
 }
-class mt {
+class vt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1213,7 +1258,7 @@ class mt {
       x: g,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = z(l, e.flipX, e.flipY, e.to), this.path = M(
+    this.midpoint = k(l, e.flipX, e.flipY, e.to), this.path = D(
       [
         t,
         n,
@@ -1248,30 +1293,30 @@ const f = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ye = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class k {
+}), fe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class H {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", Re());
+    i(this, "group", Le());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = S(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Me(e.color), this.svg.appendChild(this.group), this.line = De(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = b(), this.arrowRenderer = this.params.arrowRenderer, this.svg = De(e.color), this.svg.appendChild(this.group), this.line = Re(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = z(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = z(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = Te(
+    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = Me(
       e.from,
       e.to
     );
-    Le(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = ye(
+    Fe(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = fe(
       e.from.direction,
       a,
       h
-    ), c = ye(
+    ), c = fe(
       e.to.direction,
       a,
       h
@@ -1280,7 +1325,7 @@ class k {
       y: n
     };
     let l = { x: -c.x, y: -c.y }, u;
-    e.category === D.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === D.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
+    e.category === R.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === R.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
     const w = u(
       d,
       c,
@@ -1307,7 +1352,7 @@ class k {
     });
   }
 }
-const vt = (r) => (e) => {
+const xt = (r) => (e) => {
   const s = [
     y,
     { x: e.arrowLength, y: r.radius },
@@ -1327,7 +1372,7 @@ const vt = (r) => (e) => {
     y: p.y + e.shift.y
   })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${o} ${o} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${o} ${o} 0 0 0 ${c[0].x} ${c[0].y}`;
   return `${g} ${l} ${u} ${w}`;
-}, xt = (r) => (e) => {
+}, Et = (r) => (e) => {
   const t = r.smallRadius, s = r.radius, o = m(
     {
       x: e.arrowLength,
@@ -1348,12 +1393,12 @@ const vt = (r) => (e) => {
     y: l.y + e.shift.y
   })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${s} ${s} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${s} ${s} 0 0 1 ${a[0].x} ${a[0].y}`;
   return `${h} ${d} ${c} ${g}`;
-}, I = (r) => {
+}, $ = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "triangle":
-      return vt({
+      return xt({
         radius: r.radius ?? f.polygonArrowRadius
       });
     case "arc":
@@ -1361,14 +1406,14 @@ const vt = (r) => (e) => {
         radius: r.radius ?? f.circleArrowRadius
       });
     default:
-      return xt({
+      return Et({
         smallRadius: r.smallRadius ?? f.wedgeArrowSmallRadius,
         angle: r.angle ?? f.wedgeArrowAngle,
         radius: r.radius ?? f.wedgeArrowRadius
       });
   }
 };
-class Et {
+class St {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1385,7 +1430,7 @@ class Et {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new wt({
+    i(this, "createCyclePath", (e) => new yt({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1393,7 +1438,7 @@ class Et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new ct({
+    i(this, "createDetourPath", (e, t, s, o, n) => new lt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1406,7 +1451,7 @@ class Et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s) => new dt({
+    i(this, "createLinePath", (e, t, s) => new ct({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1415,10 +1460,10 @@ class Et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1431,7 +1476,7 @@ class Et {
     this.pathShape.render(e);
   }
 }
-class St {
+class bt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1447,7 +1492,7 @@ class St {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new J({
+    i(this, "createCyclePath", (e) => new q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1456,7 +1501,7 @@ class St {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new ft({
+    i(this, "createDetourPath", (e, t, s, o, n) => new mt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1469,7 +1514,7 @@ class St {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s, o) => new lt({
+    i(this, "createLinePath", (e, t, s, o) => new gt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1486,10 +1531,10 @@ class St {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1502,7 +1547,7 @@ class St {
     this.pathShape.render(e);
   }
 }
-class bt {
+class Nt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1519,7 +1564,7 @@ class bt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new J({
+    i(this, "createCyclePath", (e) => new q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1528,7 +1573,7 @@ class bt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new gt({
+    i(this, "createDetourPath", (e, t, s, o, n) => new ut({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1542,7 +1587,7 @@ class bt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s) => new ut({
+    i(this, "createLinePath", (e, t, s) => new pt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1558,10 +1603,10 @@ class bt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1590,7 +1635,7 @@ class Pt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new J({
+    i(this, "createCyclePath", (e) => new q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1599,7 +1644,7 @@ class Pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new mt({
+    i(this, "createDetourPath", (e, t, s, o, n) => new vt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1612,7 +1657,7 @@ class Pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s, o, n) => new pt({
+    i(this, "createLinePath", (e, t, s, o, n) => new wt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1629,10 +1674,10 @@ class Pt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1648,7 +1693,7 @@ class Pt {
 class Ve {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", Re());
+    i(this, "group", Le());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1660,15 +1705,15 @@ class Ve {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = S(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Me(this.color), this.svg.appendChild(this.group), this.line = De(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = b(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = $((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = De(this.color), this.svg.appendChild(this.group), this.line = Re(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = z(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = z(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = Te(
+    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = Me(
       e.from,
       e.to
     );
-    Le(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: o, y: n }, c = new yt({
+    Fe(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: o, y: n }, c = new ft({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1722,19 +1767,19 @@ class Ve {
 const Ct = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, Nt = (r) => {
+}, Tt = (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;
-}, fe = (r) => {
+}, me = (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 Tt extends Error {
+class Mt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Fe {
+class Ie {
   constructor(e, t) {
     i(this, "svg");
     i(this, "group");
@@ -1746,13 +1791,13 @@ class Fe {
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Fe)
-      throw new Tt(
+    if (this.baseEdge = e, e instanceof Ie)
+      throw new Mt(
         "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 s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
-    this.interactiveLine = Nt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = fe(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = fe(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
+    this.interactiveLine = Tt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = me(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = me(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
       this.interactiveLine.setAttribute("d", o.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", o.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", o.targetArrowPath);
     });
   }
@@ -1777,7 +1822,7 @@ class Cr {
     this.baseShape.render(e);
   }
 }
-class Ie {
+class $e {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -1873,7 +1918,7 @@ class Ie {
     return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class X {
+class G {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -1891,13 +1936,13 @@ class X {
 }
 class Be {
   constructor(e, t, s) {
-    i(this, "nodeIdGenerator", new X(
+    i(this, "nodeIdGenerator", new G(
       (e) => this.graphStore.hasNode(e)
     ));
-    i(this, "portIdGenerator", new X(
+    i(this, "portIdGenerator", new G(
       (e) => this.graphStore.hasPort(e)
     ));
-    i(this, "edgeIdGenerator", new X(
+    i(this, "edgeIdGenerator", new G(
       (e) => this.graphStore.hasEdge(e)
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -2020,18 +2065,18 @@ class Be {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const Mt = (r) => {
+const Dt = (r) => {
   setTimeout(() => {
     r();
   });
-}, Dt = (r) => {
+}, Rt = (r) => {
   queueMicrotask(() => {
     r();
   });
-}, _ = (r) => {
+}, ee = (r) => {
   r();
 };
-class $e {
+class Ue {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
@@ -2054,7 +2099,7 @@ class $e {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const Rt = (r, e) => Symbol.iterator in r ? {
+const Lt = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
   contentOffset: e.focus.contentOffset
@@ -2062,16 +2107,16 @@ const Rt = (r, e) => Symbol.iterator in r ? {
   minContentScale: r.minContentScale ?? e.focus.minContentScale,
   nodes: r.nodes ?? [],
   contentOffset: r.contentOffset ?? e.focus.contentOffset
-}, Ue = (r, e, t) => ({
+}, Oe = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Oe = (r, e, t, s) => ({
+}), We = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
 });
-class We {
+class ze {
   constructor(e, t, s) {
     this.graphStore = e, this.viewportStore = t, this.params = s;
   }
@@ -2083,11 +2128,11 @@ class We {
   }
   center(e, t) {
     const { width: s, height: o } = this.viewportStore.getDimensions(), n = { x: s / 2, y: o / 2 }, a = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - n.x, c = h.y - n.y;
-    let g = Ue(a, d, c);
+    let g = Oe(a, d, c);
     const l = t == null ? void 0 : t.contentScale;
     if (l !== void 0) {
       const u = 1 / l;
-      g = Oe(
+      g = We(
         g,
         u / a.scale,
         n.x,
@@ -2097,7 +2142,7 @@ class We {
     this.viewportStore.patchViewportMatrix(g);
   }
   focus(e) {
-    const t = Rt(e ?? {}, this.params);
+    const t = Lt(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2121,15 +2166,15 @@ class We {
       }, { scale: c } = this.viewportStore.getContentMatrix(), g = (n - o) * c, l = (s - t) * c, { width: u, height: w } = this.viewportStore.getDimensions(), p = Math.max(
         l / u,
         g / w
-      ), v = p > 1 ? c / p : c, E = Math.max(v, e.minContentScale);
-      this.center(d, { contentScale: E });
+      ), v = p > 1 ? c / p : c, S = Math.max(v, e.minContentScale);
+      this.center(d, { contentScale: S });
     }
   }
 }
-const ze = (r, e) => {
-  const t = new be(), s = new Ie(t), o = new $e(e), n = new Ee(t, e, r), a = {
+const ke = (r, e) => {
+  const t = new Ne(), s = new $e(t), o = new Ue(e), n = new Se(t, e, r), a = {
     nodes: {
-      centerFn: Ne,
+      centerFn: Te,
       priorityFn: () => 0
     },
     edges: {
@@ -2147,16 +2192,16 @@ const ze = (r, e) => {
     focus: {
       contentOffset: 0,
       minContentScale: 0,
-      schedule: _
+      schedule: ee
     }
-  }, c = new We(
+  }, c = new ze(
     t,
     e,
     d
   );
-  return new Se(s, o, h, c);
+  return new be(s, o, h, c);
 };
-class H {
+class Y {
   constructor(e, t, s, o) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2181,7 +2226,7 @@ class H {
       }));
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!R(
+      if (!L(
         this.window,
         this.element,
         e.clientX,
@@ -2213,7 +2258,7 @@ class H {
     });
     i(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!R(
+      if (!L(
         this.window,
         this.element,
         t.clientX,
@@ -2240,7 +2285,7 @@ class H {
     this.canvas = e, this.element = t, this.window = s, this.params = o, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, s, o) {
-    new H(e, t, s, o);
+    new Y(e, t, s, o);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2265,7 +2310,7 @@ class H {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Lt {
+class Ft {
   constructor(e, t, s) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = s;
   }
@@ -2294,7 +2339,7 @@ class Vt {
     }), this.params.onAfterApplied();
   }
 }
-class ee {
+class te {
   constructor(e, t, s, o) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2331,7 +2376,7 @@ class ee {
         nodeId: o,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, O(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2367,7 +2412,7 @@ class ee {
       });
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!R(
+      if (!L(
         this.window,
         this.element,
         e.clientX,
@@ -2388,7 +2433,7 @@ class ee {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!R(
+      if (!L(
         this.window,
         this.element,
         t.clientX,
@@ -2417,7 +2462,7 @@ class ee {
     this.canvas = e, this.element = t, this.window = s, this.params = o, 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.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, s, o) {
-    new ee(e, t, s, o);
+    new te(e, t, s, o);
   }
   moveNode(e, t) {
     if (!this.graph.hasNode(e.nodeId))
@@ -2443,7 +2488,7 @@ class ee {
     }
   }
   cancelMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, O(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2505,7 +2550,7 @@ const B = (r) => {
     touches: e
   };
 };
-class Y {
+class X {
   constructor(e, t, s, o) {
     i(this, "viewport");
     i(this, "prevTouches", null);
@@ -2515,14 +2560,14 @@ class Y {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     i(this, "onMouseDown", (e) => {
-      this.params.mouseDownEventVerifier(e) && (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && (O(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
     i(this, "onWindowMouseMove", (e) => {
-      const t = R(
+      const t = L(
         this.window,
         this.element,
         e.clientX,
@@ -2562,7 +2607,7 @@ class Y {
     i(this, "onWindowTouchMove", (e) => {
       const t = B(e);
       if (!t.touches.every(
-        (o) => R(this.window, this.element, o[0], o[1])
+        (o) => L(this.window, this.element, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2595,10 +2640,10 @@ class Y {
     }), e.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, s, o) {
-    new Y(e, t, s, o);
+    new X(e, t, s, o);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), o = Ue(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), o = Oe(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: o,
       canvasWidth: n,
@@ -2607,7 +2652,7 @@ class Y {
     this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const o = this.canvas.viewport.getViewportMatrix(), n = Oe(o, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const o = this.canvas.viewport.getViewportMatrix(), n = We(o, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: n,
       canvasWidth: a,
@@ -2616,7 +2661,7 @@ class Y {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    O(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2646,7 +2691,7 @@ class Y {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
   }
 }
-class te {
+class re {
   constructor(e, t, s, o, n, a) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
@@ -2693,7 +2738,7 @@ class te {
         this.scheduleLoadAreaAroundViewport(), o.onTransformFinished();
       }
     };
-    Y.configure(
+    X.configure(
       e,
       this.element,
       this.window,
@@ -2701,7 +2746,7 @@ class te {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, s, o, n, a) {
-    new te(
+    new re(
       e,
       t,
       s,
@@ -2731,10 +2776,10 @@ class te {
     });
   }
 }
-const Ft = () => {
+const It = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, It = () => {
+}, $t = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
 }, Bt = () => {
@@ -2744,10 +2789,10 @@ const Ft = () => {
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class re {
+class se {
   constructor(e, t, s) {
-    i(this, "svg", Ft());
-    i(this, "patternRenderingRectangle", It());
+    i(this, "svg", It());
+    i(this, "patternRenderingRectangle", $t());
     i(this, "pattern", Bt());
     i(this, "patternContent");
     i(this, "tileWidth");
@@ -2769,7 +2814,7 @@ class re {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, s) {
-    new re(e, t, s);
+    new se(e, t, s);
   }
   updateVisibility() {
     const { scale: e } = this.canvas.viewport.getViewportMatrix(), t = e > this.maxViewportScale;
@@ -2782,7 +2827,7 @@ class re {
     this.pattern.setAttribute("width", `${s}`), this.pattern.setAttribute("height", `${o}`);
   }
 }
-class se {
+class oe {
   constructor(e, t, s, o, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -2790,10 +2835,10 @@ class se {
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = ze(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = ke(
       this.overlayLayer,
       this.viewportStore
-    ), H.configure(
+    ), Y.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2817,7 +2862,7 @@ class se {
     );
   }
   static configure(e, t, s, o, n) {
-    new se(
+    new oe(
       e,
       t,
       s,
@@ -2845,7 +2890,7 @@ class se {
     };
     this.isTargetDragging = s === "direct";
     const [w, p] = this.isTargetDragging ? [l, u] : [u, l];
-    this.overlayCanvas.addNode(O(w)), this.overlayCanvas.addNode(O(p)), this.overlayCanvas.addEdge({
+    this.overlayCanvas.addNode(W(w)), this.overlayCanvas.addNode(W(p)), this.overlayCanvas.addEdge({
       from: w.overlayNodeId,
       to: p.overlayNodeId,
       shape: this.params.edgeShapeFactory(C.EdgeId)
@@ -2877,7 +2922,7 @@ class se {
     });
   }
 }
-class oe {
+class ie {
   constructor(e, t, s, o, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -2886,10 +2931,10 @@ class oe {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = ze(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = ke(
       this.overlayLayer,
       this.viewportStore
-    ), H.configure(
+    ), Y.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2910,7 +2955,7 @@ class oe {
     );
   }
   static configure(e, t, s, o, n) {
-    new oe(
+    new ie(
       e,
       t,
       s,
@@ -2945,17 +2990,17 @@ class oe {
       overlayNodeId: C.StaticNodeId,
       portCoords: w,
       portDirection: c.direction
-    }, E = {
+    }, S = {
       overlayNodeId: C.DraggingNodeId,
       portCoords: p,
       portDirection: d.direction
-    }, [b, N] = this.isTargetDragging ? [v, E] : [E, v];
-    this.overlayCanvas.addNode(O(b)), this.overlayCanvas.addNode(O(N));
+    }, [N, T] = this.isTargetDragging ? [v, S] : [S, v];
+    this.overlayCanvas.addNode(W(N)), this.overlayCanvas.addNode(W(T));
     const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(C.EdgeId) : o.shape;
     return this.overlayCanvas.addEdge({
       id: C.EdgeId,
-      from: b.overlayNodeId,
-      to: N.overlayNodeId,
+      from: N.overlayNodeId,
+      to: T.overlayNodeId,
       shape: P
     }), !0;
   }
@@ -3006,17 +3051,17 @@ class oe {
     }
   }
 }
-class ie {
+class ne {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new ie(e, t);
+    new ne(e, t);
   }
 }
-class ne {
+class ae {
   constructor(e, t, s) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
@@ -3033,7 +3078,7 @@ class ne {
     });
   }
   static configure(e, t, s) {
-    new ne(
+    new ae(
       e,
       t,
       s
@@ -3043,23 +3088,23 @@ class ne {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class $t {
+class Ut {
   static configure(e, t) {
-    const s = t.applyOn, o = new Lt(e, t.algorithm, {
+    const s = t.applyOn, o = new Ft(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
     });
     switch (s.type) {
       case "trigger": {
-        ie.configure(
+        ne.configure(
           o,
           s.trigger
         );
         break;
       }
       case "topologyChangeSchedule": {
-        ne.configure(
+        ae.configure(
           e.graph,
           o,
           s.schedule
@@ -3069,7 +3114,7 @@ class $t {
     }
   }
 }
-class Ut {
+class Ot {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3084,7 +3129,7 @@ class Ut {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class ae {
+class he {
   constructor(e, t, s) {
     i(this, "applier");
     i(this, "step", (e) => {
@@ -3094,41 +3139,41 @@ class ae {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new Ut(this.win, this.step);
+    }), new Ot(this.win, this.step);
   }
   static configure(e, t, s) {
-    new ae(e, t, s);
+    new he(e, t, s);
   }
 }
-const Ot = () => {
+const Wt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, j = () => {
+}, J = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, me = () => {
-  const r = j();
+}, ve = () => {
+  const r = J();
   return r.style.pointerEvents = "none", r;
 };
-class Wt {
+class zt {
   constructor(e) {
-    i(this, "background", j());
-    i(this, "main", j());
-    i(this, "overlayConnectablePorts", me());
-    i(this, "overlayDraggableEdges", me());
-    i(this, "host", Ot());
+    i(this, "background", J());
+    i(this, "main", J());
+    i(this, "overlayConnectablePorts", ve());
+    i(this, "overlayDraggableEdges", ve());
+    i(this, "host", Wt());
     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 zt = (r) => {
-  var w, p, v, E, b, N;
+const kt = (r) => {
+  var w, p, v, S, N, T;
   const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
   }), t = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
   }), s = r.nodeDragVerifier ?? (() => !0), o = ((v = r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
-  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (E = r.mouse) == null ? void 0 : E.dragCursor, d = h !== void 0 ? h : "grab", c = (b = r.mouse) == null ? void 0 : b.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (N = r.mouse) == null ? void 0 : N.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
+  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (S = r.mouse) == null ? void 0 : S.dragCursor, d = h !== void 0 ? h : "grab", c = (N = r.mouse) == null ? void 0 : N.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (T = r.mouse) == null ? void 0 : T.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
   return {
     moveOnTop: n,
     moveEdgesOnTop: a,
@@ -3141,7 +3186,7 @@ const zt = (r) => {
     nodeDragVerifier: s,
     onNodeDragFinished: o
   };
-}, kt = (r) => {
+}, Ht = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, o = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
@@ -3151,7 +3196,7 @@ const zt = (r) => {
     const g = n.canvasHeight * n.prevTransform.scale, l = o - g;
     return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, Ht = (r) => {
+}, Yt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, o = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -3172,7 +3217,7 @@ const zt = (r) => {
       y: g
     };
   };
-}, Yt = (r) => (e) => r.reduce(
+}, Xt = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3180,17 +3225,17 @@ const zt = (r) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ve = (r) => {
+), xe = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Ht({
+      return Yt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return kt({
+      return Ht({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
@@ -3198,22 +3243,22 @@ const zt = (r) => {
       });
   }
 }, Ae = (r) => {
-  var p, v, E, b, N, P, L, V, de, ce, le, ge;
+  var p, v, S, N, T, P, F, V, ce, le, ge, ue;
   const e = (p = r == null ? void 0 : r.scale) == null ? void 0 : p.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let o;
-  s !== void 0 ? Array.isArray(s) ? o = Yt(
+  s !== void 0 ? Array.isArray(s) ? o = Xt(
     s.map(
-      (T) => ve(T)
+      (M) => xe(M)
     )
-  ) : o = ve(s) : o = (T) => T.nextTransform;
-  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), h = ((b = r == null ? void 0 : r.events) == null ? void 0 : b.onTransformChange) ?? (() => {
-  }), d = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (T) => T.button === 0, u = (L = r == null ? void 0 : r.scale) == null ? void 0 : L.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
+  ) : o = xe(s) : o = (M) => M.nextTransform;
+  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
+  }), h = ((N = r == null ? void 0 : r.events) == null ? void 0 : N.onTransformChange) ?? (() => {
+  }), d = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (M) => M.button === 0, u = (F = r == null ? void 0 : r.scale) == null ? void 0 : F.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((de = r == null ? void 0 : r.events) == null ? void 0 : de.onTransformFinished) ?? (() => {
+    onTransformFinished: ((ce = r == null ? void 0 : r.events) == null ? void 0 : ce.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
@@ -3222,35 +3267,35 @@ const zt = (r) => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l,
     mouseWheelEventVerifier: w,
-    scaleWheelFinishTimeout: ((ce = r == null ? void 0 : r.scale) == null ? void 0 : ce.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((le = r == null ? void 0 : r.events) == null ? void 0 : le.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((le = r == null ? void 0 : r.scale) == null ? void 0 : le.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((ge = r == null ? void 0 : r.events) == null ? void 0 : ge.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((ge = r == null ? void 0 : r.events) == null ? void 0 : ge.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((ue = r == null ? void 0 : r.events) == null ? void 0 : ue.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Xt = (r, e) => {
+}, Gt = (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;
-}, Gt = (r) => r instanceof SVGElement ? r : Xt(
+}, jt = (r) => r instanceof SVGElement ? r : Gt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), jt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = Gt(r.renderer ?? {});
+), Jt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = jt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
     renderer: o,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, he = (r) => {
+}, de = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new bt({
+      return () => new Nt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3264,7 +3309,7 @@ const zt = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new St({
+      return () => new bt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3301,7 +3346,7 @@ const zt = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Et({
+      return () => new St({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3315,7 +3360,7 @@ const zt = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, qt = (r, e, t) => {
+}, Kt = (r, e, t) => {
   var c, g, l;
   const s = () => "direct", o = (u) => u, n = (u) => u.button === 0, a = () => {
   }, h = () => {
@@ -3330,9 +3375,9 @@ const zt = (r) => {
     onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((l = r.events) == null ? void 0 : l.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? he(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? de(r.edgeShape) : e
   };
-}, Kt = (r, e) => {
+}, Qt = (r, e) => {
   var c, g, l;
   const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, o = (u) => u.button === 0, n = (u) => {
     const w = e.getPortAdjacentEdgeIds(u);
@@ -3346,15 +3391,15 @@ const zt = (r) => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? o,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? he(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? de(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
   };
-}, Qt = (r) => ({
+}, Zt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Zt = (r) => {
+}), _t = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3363,13 +3408,13 @@ const zt = (r) => {
     })
   };
 };
-class Jt extends Error {
+class qt extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasBuilderError");
   }
 }
-class ke {
+class He {
   constructor(e, t, s) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3407,7 +3452,7 @@ class ke {
     });
   }
 }
-class He {
+class Ye {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3426,13 +3471,13 @@ class He {
     return { ex: h, ey: d, d: a };
   }
 }
-const Ye = (r) => {
+const Xe = (r) => {
   if (r.distance === 0)
     return r.maxForce;
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
   return Math.min(e, r.maxForce);
 };
-class _t {
+class er {
   constructor(e) {
     i(this, "nodeCharge");
     i(this, "distanceVectorGenerator");
@@ -3447,19 +3492,19 @@ class _t {
         const d = s[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
           c,
           g
-        ), u = Ye({
+        ), u = Xe({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
           distance: l.d,
           maxForce: this.maxForce
-        }), w = u * l.ex, p = u * l.ey, v = t.get(a), E = t.get(d);
-        v.x -= w, v.y -= p, E.x += w, E.y += p;
+        }), w = u * l.ex, p = u * l.ey, v = t.get(a), S = t.get(d);
+        v.x -= w, v.y -= p, S.x += w, S.y += p;
       }
     }
   }
 }
-const er = (r) => {
+const tr = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -3477,7 +3522,7 @@ const er = (r) => {
     radius: h / 2
   };
 };
-class tr {
+class rr {
   constructor(e) {
     i(this, "root");
     i(this, "leaves", /* @__PURE__ */ new Map());
@@ -3634,7 +3679,7 @@ class tr {
     }), { x: t / e.size, y: s / e.size };
   }
 }
-class rr {
+class sr {
   constructor(e) {
     i(this, "areaRadiusThreshold");
     i(this, "nodeMass");
@@ -3646,7 +3691,7 @@ class rr {
     this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
   }
   apply(e, t) {
-    const s = er(e), o = new tr({
+    const s = tr(e), o = new rr({
       box: s,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -3761,7 +3806,7 @@ class rr {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), s = Ye({
+    ), s = Xe({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -3796,7 +3841,7 @@ class rr {
     }
   }
 }
-const Xe = (r) => r.theta !== 0 ? new rr({
+const Ge = (r) => r.theta !== 0 ? new sr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3804,13 +3849,13 @@ const Xe = (r) => r.theta !== 0 ? new rr({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new _t({
+}) : new er({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class Ge {
+class je {
   constructor(e) {
     i(this, "rand");
     i(this, "sparsity");
@@ -3833,7 +3878,7 @@ class Ge {
     }), o;
   }
 }
-class sr {
+class or {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -3844,7 +3889,7 @@ class sr {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "convergenceVelocity");
-    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new He(e.rand), this.nodeForcesApplicationStrategy = Xe({
+    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Ye(e.rand), this.nodeForcesApplicationStrategy = Ge({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -3852,7 +3897,7 @@ class sr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Ge({
+    }), this.fillerLayoutAlgorithm = new je({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -3862,7 +3907,7 @@ class sr {
       graph: t,
       viewport: s
     });
-    for (let n = 0; n < this.maxIterations && !(new ke(
+    for (let n = 0; n < this.maxIterations && !(new He(
       t,
       o,
       {
@@ -3878,7 +3923,7 @@ class sr {
     return o;
   }
 }
-class or {
+class ir {
   constructor(e) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
@@ -3897,10 +3942,10 @@ class or {
     }, s = [];
     this.forest.add({ root: t, sequence: s });
     let o = [t];
-    for (; o.length > 0; ) {
+    for (this.remainingNodeIds.delete(t.nodeId); o.length > 0; ) {
       const n = [];
       o.forEach((a) => {
-        s.push(a), this.remainingNodeIds.delete(a.nodeId);
+        s.push(a);
         const h = this.graph.getNodeOutgoingEdgeIds(a.nodeId).map((g) => {
           const l = this.graph.getEdge(g);
           return this.graph.getPort(l.to).nodeId;
@@ -3914,6 +3959,7 @@ class or {
         ])).forEach((g) => {
           if (!this.remainingNodeIds.has(g))
             return;
+          this.remainingNodeIds.delete(g);
           const l = {
             nodeId: g,
             children: /* @__PURE__ */ new Set()
@@ -3924,7 +3970,7 @@ class or {
     }
   }
 }
-class ir {
+class nr {
   constructor(e) {
     this.params = e;
   }
@@ -3965,12 +4011,12 @@ class ir {
     return s - 2 * this.params.spaceAroundRadius;
   }
 }
-class nr {
+class ar {
   constructor(e, t) {
     i(this, "offsets", /* @__PURE__ */ new Map());
     i(this, "treeSpans", /* @__PURE__ */ new Map());
     this.tree = e;
-    const s = t.spaceAroundRadius, o = new ir({
+    const s = t.spaceAroundRadius, o = new nr({
       spaceAroundRadius: s
     });
     [...this.tree.sequence].reverse().forEach((n) => {
@@ -3992,16 +4038,16 @@ class nr {
     return this.offsets;
   }
 }
-class ar {
+class hr {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), o = new or(e.graph).generate();
+    const t = /* @__PURE__ */ new Map(), o = new ir(e.graph).generate();
     let n = 0;
     return o.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
-      const d = new nr(a, {
+      const d = new ar(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
       let c = [a.root];
@@ -4022,7 +4068,7 @@ class ar {
     }), t;
   }
 }
-class hr {
+class dr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4032,7 +4078,7 @@ class hr {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "fillerLayoutAlgorithm");
-    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new He(e.rand), this.nodeForcesApplicationStrategy = Xe({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ye(e.rand), this.nodeForcesApplicationStrategy = Ge({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4040,7 +4086,7 @@ class hr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Ge({
+    }), this.fillerLayoutAlgorithm = new je({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4050,7 +4096,7 @@ class hr {
       graph: t,
       viewport: s
     });
-    return new ke(
+    return new He(
       t,
       n,
       {
@@ -4067,16 +4113,16 @@ class hr {
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const je = (r) => {
+const Je = (r) => {
   let e = 1779033703, t = 3144134277, s = 1013904242, o = 2773480762;
   for (let n = 0, a; n < r.length; n++)
     a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = s ^ Math.imul(t ^ a, 2869860233), s = o ^ Math.imul(s ^ a, 951274213), o = e ^ Math.imul(o ^ a, 2716044179);
   return e = Math.imul(s ^ e >>> 18, 597399067), t = Math.imul(o ^ t >>> 22, 2869860233), s = Math.imul(e ^ s >>> 17, 951274213), o = Math.imul(t ^ o >>> 19, 2716044179), e ^= t ^ s ^ o, t ^= e, s ^= e, o ^= e, [e >>> 0, t >>> 0, s >>> 0, o >>> 0];
-}, qe = (r, e, t, s) => function() {
+}, Ke = (r, e, t, s) => function() {
   r |= 0, e |= 0, t |= 0, s |= 0;
   const o = (r + e | 0) + s | 0;
   return s = s + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + o | 0, (o >>> 0) / 4294967296;
-}, A = Object.freeze({
+}, x = Object.freeze({
   seed: "HTMLGraph is awesome",
   maxTimeDeltaSec: 0.01,
   nodeCharge: 1e5,
@@ -4090,52 +4136,52 @@ const je = (r) => {
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), dr = (r) => {
+}), cr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const s = je((r == null ? void 0 : r.seed) ?? A.seed), o = qe(s[0], s[1], s[2], s[3]);
-      return new hr({
+      const s = Je((r == null ? void 0 : r.seed) ?? x.seed), o = Ke(s[0], s[1], s[2], s[3]);
+      return new dr({
         rand: o,
-        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? A.maxTimeDeltaSec,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? A.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? A.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? A.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? A.edgeStiffness,
-        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? A.convergenceVelocity,
-        maxForce: (r == null ? void 0 : r.maxForce) ?? A.maxForce,
-        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? A.nodeForceCoefficient,
-        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? A.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? A.barnesHutAreaRadiusThreshold
+        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? x.maxTimeDeltaSec,
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? x.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? x.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? x.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? x.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? x.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? x.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? x.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? x.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? x.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, G = {
+}, j = {
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
   },
   onAfterApplied: () => {
   }
-}, cr = (r) => {
+}, lr = (r) => {
   var t, s;
   return {
-    algorithm: dr((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? G.staticNodeResolver,
-    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? G.onBeforeApplied,
-    onAfterApplied: ((s = r == null ? void 0 : r.events) == null ? void 0 : s.onAfterApplied) ?? G.onAfterApplied
+    algorithm: cr((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? j.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? j.onBeforeApplied,
+    onAfterApplied: ((s = r == null ? void 0 : r.events) == null ? void 0 : s.onAfterApplied) ?? j.onAfterApplied
   };
-}, lr = (r) => r instanceof K ? {
+}, gr = (r) => r instanceof Q ? {
   type: "trigger",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Mt
+  schedule: Dt
 } : {
   type: "topologyChangeSchedule",
-  schedule: Dt
-}, F = Object.freeze({
+  schedule: Rt
+}, I = Object.freeze({
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
   },
@@ -4145,14 +4191,14 @@ const je = (r) => {
     layerWidth: 300,
     layerSpace: 300
   }
-}), $ = (r, e) => ({
+}), U = (r, e) => ({
   a: r.a * e.a + r.b * e.d,
   b: r.a * e.b + r.b * e.e,
   c: r.a * e.c + r.b * e.f + r.c,
   d: r.d * e.a + r.e * e.d,
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
-}), gr = (r) => {
+}), ur = (r) => {
   const { a: e, b: t, c: s, d: o, e: n, f: a } = r, h = e * n - t * o;
   return {
     a: n / h,
@@ -4163,7 +4209,7 @@ const je = (r) => {
     f: (s * o - e * a) / h
   };
 };
-class ur {
+class pr {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4197,18 +4243,18 @@ class ur {
     return this.createRelativeTransform(s, o);
   }
   createMirrorRelativeMatrix(e, t) {
-    const s = this.createMirrorYBaseMatrix(), o = $(
+    const s = this.createMirrorYBaseMatrix(), o = U(
       this.createShiftBaseMatrix(t),
       this.createRotateBaseMatrix(e)
     );
     return this.createRelativeTransform(s, o);
   }
   createRelativeTransform(e, t) {
-    const s = $(
+    const s = U(
       t,
       e
-    ), o = gr(t);
-    return $(s, o);
+    ), o = ur(t);
+    return U(s, o);
   }
   createShiftBaseMatrix(e) {
     return {
@@ -4252,7 +4298,7 @@ class ur {
     };
   }
 }
-const pr = (r) => {
+const wr = (r) => {
   if (r === void 0)
     return (o) => o;
   if (typeof r == "function")
@@ -4266,10 +4312,10 @@ const pr = (r) => {
     e: 1,
     f: 0
   };
-  const s = new ur();
+  const s = new pr();
   return e.forEach((o) => {
     const n = s.resolve(o);
-    t = $(t, n);
+    t = U(t, n);
   }), (o) => {
     const { x: n, y: a } = o;
     return {
@@ -4277,45 +4323,45 @@ const pr = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, wr = (r) => {
+}, yr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
-      return new ar({
-        layerWidth: r.layerWidth ?? F.hierarchicalLayout.layerWidth,
-        layerSpace: r.layerSpace ?? F.hierarchicalLayout.layerSpace,
-        transform: pr(r.transform)
+      return new hr({
+        layerWidth: r.layerWidth ?? I.hierarchicalLayout.layerWidth,
+        layerSpace: r.layerSpace ?? I.hierarchicalLayout.layerSpace,
+        transform: wr(r.transform)
       });
     default: {
-      const s = je((r == null ? void 0 : r.seed) ?? A.seed), o = qe(s[0], s[1], s[2], s[3]);
-      return new sr({
-        dtSec: (r == null ? void 0 : r.dtSec) ?? A.dtSec,
-        maxIterations: (r == null ? void 0 : r.maxIterations) ?? A.maxIterations,
+      const s = Je((r == null ? void 0 : r.seed) ?? x.seed), o = Ke(s[0], s[1], s[2], s[3]);
+      return new or({
+        dtSec: (r == null ? void 0 : r.dtSec) ?? x.dtSec,
+        maxIterations: (r == null ? void 0 : r.maxIterations) ?? x.maxIterations,
         rand: o,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? A.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? A.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? A.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? A.edgeStiffness,
-        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? A.convergenceVelocity,
-        maxForce: (r == null ? void 0 : r.maxForce) ?? A.maxForce,
-        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? A.nodeForceCoefficient,
-        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? A.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? A.barnesHutAreaRadiusThreshold
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? x.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? x.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? x.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? x.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? x.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? x.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? x.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? x.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? x.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, yr = (r) => {
+}, fr = (r) => {
   var e, t;
   return {
-    algorithm: wr(r.algorithm),
-    applyOn: lr(r.applyOn),
-    staticNodeResolver: r.staticNodeResolver ?? F.staticNodeResolver,
-    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? F.onBeforeApplied,
-    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? F.onAfterApplied
+    algorithm: yr(r.algorithm),
+    applyOn: gr(r.applyOn),
+    staticNodeResolver: r.staticNodeResolver ?? I.staticNodeResolver,
+    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? I.onBeforeApplied,
+    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? I.onAfterApplied
   };
-}, fr = (r, e) => ({
+}, mr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4323,7 +4369,7 @@ const pr = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), mr = (r, e) => {
+}), vr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4331,41 +4377,41 @@ const pr = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, vr = (r, e) => ({
+}, xr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), q = (r) => () => r, xe = q(0), Ar = () => {
+}), K = (r) => () => r, Ee = K(0), Ar = () => {
   let r = 0;
   return () => r++;
-}, xr = (r, e) => {
-  let t = xe, s = xe;
+}, Er = (r, e) => {
+  let t = Ee, s = Ee;
   const o = Ar();
-  return r === "incremental" && (t = o), e === "incremental" && (s = o), typeof r == "number" && (t = q(r)), typeof e == "number" && (s = q(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+  return r === "incremental" && (t = o), e === "incremental" && (s = o), typeof r == "number" && (t = K(r)), typeof e == "number" && (s = K(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
-}, Er = (r) => {
+}, Sr = (r) => {
   var t, s, o, n, a;
-  const e = xr(
+  const e = Er(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((o = r.nodes) == null ? void 0 : o.centerFn) ?? Ne,
+      centerFn: ((o = r.nodes) == null ? void 0 : o.centerFn) ?? Te,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: he(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: de(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Sr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : _, br = (r) => {
+}, br = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : ee, Nr = (r) => {
   var s, o;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Sr(r.layoutParams) : _;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? br(r.layoutParams) : ee;
   return {
     focus: {
       contentOffset: ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4374,7 +4420,7 @@ const pr = (r) => {
     }
   };
 };
-class Nr {
+class Tr {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4394,7 +4440,7 @@ class Nr {
     i(this, "hasUserDraggableEdges", !1);
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
-    i(this, "boxRenderingTrigger", new K());
+    i(this, "boxRenderingTrigger", new Q());
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     this.element = e;
@@ -4431,42 +4477,44 @@ class Nr {
   }
   build() {
     if (this.used)
-      throw new Jt("CanvasBuilder is a single use object");
+      throw new qt(
+        "Failed to build Canvas because CanvasBuilder is a single-use object"
+      );
     this.used = !0;
-    const e = new it(this.element), t = new be(), s = new Wt(this.element), o = this.createHtmlView(
+    const e = new nt(this.element), t = new Ne(), s = new zt(this.element), o = this.createHtmlView(
       s.main,
       t,
       e
-    ), n = Er(
+    ), n = Sr(
       this.canvasDefaults
     ), a = new Be(
       t,
       o,
       n
-    ), h = yr(this.layoutConfig), d = br({
+    ), h = fr(this.layoutConfig), d = Nr({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
-    }), c = new We(
+    }), c = new ze(
       t,
       e,
       d
-    ), g = new $e(e), l = new Ie(t), u = new Se(
+    ), g = new Ue(e), l = new $e(t), u = new be(
       l,
       g,
       a,
       c
     );
-    if (this.hasBackground && re.configure(
+    if (this.hasBackground && se.configure(
       u,
-      jt(this.backgroundConfig),
+      Jt(this.backgroundConfig),
       s.background
-    ), this.hasNodeResizeReactiveEdges && Q.configure(u), this.hasDraggableNodes) {
-      let p = zt(this.dragConfig);
-      this.hasAnimatedLayout && (p = fr(
+    ), this.hasNodeResizeReactiveEdges && Z.configure(u), this.hasDraggableNodes) {
+      let p = kt(this.dragConfig);
+      this.hasAnimatedLayout && (p = mr(
         p,
         this.animationStaticNodes
-      )), ee.configure(
+      )), te.configure(
         u,
         s.main,
         this.window,
@@ -4474,12 +4522,12 @@ class Nr {
       );
     }
     if (this.hasUserConnectablePorts) {
-      const p = qt(
+      const p = Kt(
         this.connectablePortsConfig,
         n.edges.shapeFactory,
         n.ports.direction
       );
-      se.configure(
+      oe.configure(
         u,
         s.overlayConnectablePorts,
         e,
@@ -4488,11 +4536,11 @@ class Nr {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const p = Kt(
+      const p = Qt(
         this.draggableEdgesConfig,
         u.graph
       );
-      oe.configure(
+      ie.configure(
         u,
         s.overlayDraggableEdges,
         e,
@@ -4500,29 +4548,29 @@ class Nr {
         p
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? te.configure(
+    if (this.virtualScrollConfig !== void 0 ? re.configure(
       u,
       s.main,
       this.window,
       Ae(this.transformConfig),
       this.boxRenderingTrigger,
-      Qt(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && Y.configure(
+      Zt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && X.configure(
       u,
       s.main,
       this.window,
       Ae(this.transformConfig)
-    ), this.hasLayout && $t.configure(u, h), this.hasAnimatedLayout) {
-      let p = cr(
+    ), this.hasLayout && Ut.configure(u, h), this.hasAnimatedLayout) {
+      let p = lr(
         this.animatedLayoutConfig
       );
-      this.hasDraggableNodes && (mr(
+      this.hasDraggableNodes && (vr(
         u,
         this.animationStaticNodes
-      ), p = vr(
+      ), p = xr(
         p,
         this.animationStaticNodes
-      )), ae.configure(u, p, this.window);
+      )), he.configure(u, p, this.window);
     }
     const w = () => {
       s.destroy(), u.onBeforeDestroy.unsubscribe(w);
@@ -4530,27 +4578,27 @@ class Nr {
     return u.onBeforeDestroy.subscribe(w), u;
   }
   createHtmlView(e, t, s) {
-    let o = new Ee(t, s, e);
-    return this.virtualScrollConfig !== void 0 && (o = new rt(
+    let o = new Se(t, s, e);
+    return this.virtualScrollConfig !== void 0 && (o = new st(
       o,
       t,
       this.boxRenderingTrigger,
-      Zt(this.virtualScrollConfig)
-    )), o = new st(o, t), o;
+      _t(this.virtualScrollConfig)
+    )), o = new ot(o, t), o;
   }
 }
 export {
-  Et as BezierEdgeShape,
-  Nr as CanvasBuilder,
-  Jt as CanvasBuilderError,
-  x as CanvasError,
-  D as ConnectionCategory,
+  St as BezierEdgeShape,
+  Tr as CanvasBuilder,
+  qt as CanvasBuilderError,
+  A as CanvasError,
+  R as ConnectionCategory,
   Ve as DirectEdgeShape,
-  K as EventSubject,
-  St as HorizontalEdgeShape,
-  Tt as InteractiveEdgeError,
-  Fe as InteractiveEdgeShape,
+  Q as EventSubject,
+  bt as HorizontalEdgeShape,
+  Mt as InteractiveEdgeError,
+  Ie as InteractiveEdgeShape,
   Cr as MidpointEdgeShape,
-  bt as StraightEdgeShape,
+  Nt as StraightEdgeShape,
   Pt as VerticalEdgeShape
 };