@html-graph/html-graph 7.1.1 → 7.3.0

package/dist/html-graph.js

@@ -1,27 +1,27 @@
-var Fe = Object.defineProperty;
-var Oe = (r, e, t) => e in r ? Fe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Oe(r, typeof e != "symbol" ? e + "" : e, t);
+var ke = Object.defineProperty;
+var ze = (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) => ze(r, typeof e != "symbol" ? e + "" : e, t);
 const D = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-var C = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(C || {});
-const We = () => {
+var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
+const He = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, ke = () => {
+}, Xe = () => {
   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;
-}, ze = (r) => {
+}, Ye = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
-class ye {
+class me {
   constructor(e, t, s) {
-    o(this, "host", We());
-    o(this, "container", ke());
-    o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    o(this, "attachedNodeIds", /* @__PURE__ */ new Set());
-    o(this, "applyTransform", () => {
+    i(this, "host", He());
+    i(this, "container", Xe());
+    i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
+    i(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
       this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
     });
@@ -29,7 +29,7 @@ class ye {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    ze(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ye(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -54,7 +54,7 @@ class ye {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(s, i), d = a.x - n * h.x, c = a.y - n * h.y;
+    const t = this.graphStore.getNode(e), { width: s, height: o } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(s, o), d = a.x - n * h.x, c = a.y - n * h.y;
     t.element.style.transform = `translate(${d}px, ${c}px)`;
   }
   updateNodePriority(e) {
@@ -64,87 +64,87 @@ class ye {
   updateEdgeShape(e) {
     const t = this.edgeIdToElementMap.get(e);
     this.container.removeChild(t);
-    const i = this.graphStore.getEdge(e).payload.shape.svg;
-    this.edgeIdToElementMap.set(e, i), this.container.appendChild(i);
+    const o = this.graphStore.getEdge(e).payload.shape.svg;
+    this.edgeIdToElementMap.set(e, o), this.container.appendChild(o);
   }
   renderEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
       s,
       n,
       h,
       d
     ), g = this.createEdgeRenderPort(
-      i,
+      o,
       a,
       h,
       d
     );
-    let l = C.Line;
-    s.element === i.element ? l = C.PortCycle : s.nodeId === i.nodeId && (l = C.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);
     t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
   }
-  createEdgeRenderPort(e, t, s, i) {
+  createEdgeRenderPort(e, t, s, o) {
     const n = {
       x: t.left - s.left,
       y: t.top - s.top
-    }, a = D(i, n);
+    }, a = D(o, n);
     return {
       x: a.x,
       y: a.y,
-      width: t.width * i.scale,
-      height: t.height * i.scale,
+      width: t.width * o.scale,
+      height: t.height * o.scale,
       direction: e.payload.direction
     };
   }
 }
-class Xe {
+class Ge {
   constructor(e) {
-    o(this, "xFrom", 1 / 0);
-    o(this, "yFrom", 1 / 0);
-    o(this, "xTo", 1 / 0);
-    o(this, "yTo", 1 / 0);
+    i(this, "xFrom", 1 / 0);
+    i(this, "yFrom", 1 / 0);
+    i(this, "xTo", 1 / 0);
+    i(this, "yTo", 1 / 0);
     this.graphStore = e;
   }
   setRenderingBox(e) {
     this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
   }
   hasNode(e) {
-    const t = this.graphStore.getNode(e).payload, { x: s, y: i } = t;
-    return s >= this.xFrom && s <= this.xTo && i >= this.yFrom && i <= this.yTo;
+    const t = this.graphStore.getNode(e).payload, { x: s, y: o } = t;
+    return s >= this.xFrom && s <= this.xTo && o >= this.yFrom && o <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(i).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, o = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(o).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class Ye {
-  constructor(e, t, s, i) {
-    o(this, "attachedNodes", /* @__PURE__ */ new Set());
-    o(this, "attachedEdges", /* @__PURE__ */ new Set());
-    o(this, "renderingBox");
-    o(this, "updateViewport", (e) => {
+class je {
+  constructor(e, t, s, o) {
+    i(this, "attachedNodes", /* @__PURE__ */ new Set());
+    i(this, "attachedEdges", /* @__PURE__ */ new Set());
+    i(this, "renderingBox");
+    i(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
-      const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+      const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
       this.graphStore.getAllNodeIds().forEach((a) => {
         const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
         h && !d ? t.add(a) : !h && d && s.add(a);
       }), this.graphStore.getAllEdgeIds().forEach((a) => {
         const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), g = this.graphStore.getPort(c.from).nodeId, l = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(g) || (t.add(g), s.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), s.delete(l))), h && !d ? i.add(a) : !h && d && n.add(a);
+        h && (this.renderingBox.hasNode(g) || (t.add(g), s.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), s.delete(l))), h && !d ? o.add(a) : !h && d && n.add(a);
       }), n.forEach((a) => {
         this.handleDetachEdge(a);
       }), s.forEach((a) => {
         this.handleDetachNode(a);
       }), t.forEach((a) => {
         this.attachedNodes.has(a) || this.handleAttachNode(a);
-      }), i.forEach((a) => {
+      }), o.forEach((a) => {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new Ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -182,8 +182,8 @@ class Ye {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
   attachEdgeEntities(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId;
-    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, o = this.graphStore.getPort(t.to).nodeId;
+    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(o) || this.handleAttachNode(o), this.handleAttachEdge(e);
   }
   handleAttachNode(e) {
     this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
@@ -198,10 +198,10 @@ class Ye {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class He {
+class Ke {
   constructor(e, t) {
-    o(this, "deferredNodes", /* @__PURE__ */ new Set());
-    o(this, "deferredEdges", /* @__PURE__ */ new Set());
+    i(this, "deferredNodes", /* @__PURE__ */ new Set());
+    i(this, "deferredEdges", /* @__PURE__ */ new Set());
     this.htmlView = e, this.graphStore = t;
   }
   attachNode(e) {
@@ -245,16 +245,16 @@ class He {
     this.isNodeValid(e) && (this.deferredNodes.delete(e), this.htmlView.attachNode(e));
   }
   isEdgeValid(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to);
-    return !(this.deferredNodes.has(s.nodeId) || this.deferredNodes.has(i.nodeId));
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to);
+    return !(this.deferredNodes.has(s.nodeId) || this.deferredNodes.has(o.nodeId));
   }
   tryAttachEdge(e) {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class G {
+class j {
   constructor() {
-    o(this, "callbacks", /* @__PURE__ */ new Set());
+    i(this, "callbacks", /* @__PURE__ */ new Set());
   }
   subscribe(e) {
     this.callbacks.add(e);
@@ -268,13 +268,13 @@ class G {
     });
   }
 }
-const x = () => {
-  const r = new G();
+const E = () => {
+  const r = new j();
   return [r, r];
 };
-class Y {
+class X {
   constructor(e) {
-    o(this, "counter", 0);
+    i(this, "counter", 0);
     this.checkExists = e;
   }
   create(e) {
@@ -288,80 +288,80 @@ class Y {
     this.counter = 0;
   }
 }
-class P extends Error {
+class b extends Error {
   constructor() {
     super(...arguments);
-    o(this, "name", "CanvasError");
+    i(this, "name", "CanvasError");
   }
 }
 class ve {
-  constructor(e, t, s, i, n, a) {
-    o(this, "nodeIdGenerator", new Y(
+  constructor(e, t, s, o, n, a) {
+    i(this, "nodeIdGenerator", new X(
       (e) => this.graphStore.getNode(e) !== void 0
     ));
-    o(this, "portIdGenerator", new Y(
+    i(this, "portIdGenerator", new X(
       (e) => this.graphStore.getPort(e) !== void 0
     ));
-    o(this, "edgeIdGenerator", new Y(
+    i(this, "edgeIdGenerator", new X(
       (e) => this.graphStore.getEdge(e) !== void 0
     ));
-    o(this, "onAfterNodeAdded", (e) => {
+    i(this, "onAfterNodeAdded", (e) => {
       this.htmlView.attachNode(e);
     });
-    o(this, "onAfterNodeUpdated", (e) => {
+    i(this, "onAfterNodeUpdated", (e) => {
       this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((s) => {
         this.htmlView.renderEdge(s);
       });
     });
-    o(this, "onAfterNodePriorityUpdated", (e) => {
+    i(this, "onAfterNodePriorityUpdated", (e) => {
       this.htmlView.updateNodePriority(e);
     });
-    o(this, "onBeforeNodeRemoved", (e) => {
+    i(this, "onBeforeNodeRemoved", (e) => {
       this.graphStore.getNodePortIds(e).forEach((t) => {
         this.unmarkPort(t);
       }), this.htmlView.detachNode(e);
     });
-    o(this, "onAfterPortUpdated", (e) => {
+    i(this, "onAfterPortUpdated", (e) => {
       this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
         this.htmlView.renderEdge(s);
       });
     });
-    o(this, "onBeforePortUnmarked", (e) => {
+    i(this, "onBeforePortUnmarked", (e) => {
       this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
         this.removeEdge(t);
       });
     });
-    o(this, "onAfterEdgeAdded", (e) => {
+    i(this, "onAfterEdgeAdded", (e) => {
       this.htmlView.attachEdge(e);
     });
-    o(this, "onAfterEdgeShapeUpdated", (e) => {
+    i(this, "onAfterEdgeShapeUpdated", (e) => {
       this.htmlView.updateEdgeShape(e);
     });
-    o(this, "onAfterEdgeUpdated", (e) => {
+    i(this, "onAfterEdgeUpdated", (e) => {
       this.htmlView.renderEdge(e);
     });
-    o(this, "onAfterEdgePriorityUpdated", (e) => {
+    i(this, "onAfterEdgePriorityUpdated", (e) => {
       this.htmlView.updateEdgePriority(e);
     });
-    o(this, "onBeforeEdgeRemoved", (e) => {
+    i(this, "onBeforeEdgeRemoved", (e) => {
       this.htmlView.detachEdge(e);
     });
-    o(this, "onBeforeClear", () => {
+    i(this, "onBeforeClear", () => {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
     });
-    o(this, "onBeforeDestroyEmitter");
-    o(this, "destroyed", !1);
+    i(this, "onBeforeDestroyEmitter");
+    i(this, "destroyed", !1);
     /**
      * emits event just before destruction of canvas
      */
-    o(this, "onBeforeDestroy");
-    this.graph = e, this.viewport = t, this.graphStore = s, this.viewportStore = i, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    i(this, "onBeforeDestroy");
+    this.graph = e, this.viewport = t, this.graphStore = s, this.viewportStore = o, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
     ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = x();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = E();
   }
   /**
    * adds new node
@@ -369,9 +369,9 @@ class ve {
   addNode(e) {
     const t = this.nodeIdGenerator.create(e.id);
     if (this.graphStore.getNode(t) !== void 0)
-      throw new P("failed to add node with existing id");
+      throw new b("failed to add node with existing id");
     if (this.graphStore.getElementNodeId(e.element) !== void 0)
-      throw new P(
+      throw new b(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
@@ -396,7 +396,7 @@ class ve {
    */
   updateNode(e, t) {
     if (this.graphStore.getNode(e) === void 0)
-      throw new P("failed to update nonexistent node");
+      throw new b("failed to update nonexistent node");
     return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
@@ -406,7 +406,7 @@ class ve {
    */
   removeNode(e) {
     if (this.graphStore.getNode(e) === void 0)
-      throw new P("failed to remove nonexistent node");
+      throw new b("failed to remove nonexistent node");
     return this.graphStore.removeNode(e), this;
   }
   /**
@@ -415,9 +415,9 @@ class ve {
   markPort(e) {
     const t = this.portIdGenerator.create(e.id);
     if (this.graphStore.getPort(t) !== void 0)
-      throw new P("failed to add port with existing id");
+      throw new b("failed to add port with existing id");
     if (this.graphStore.getNode(e.nodeId) === void 0)
-      throw new P("failed to mark port for nonexistent node");
+      throw new b("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: t,
       element: e.element,
@@ -430,7 +430,7 @@ class ve {
    */
   updatePort(e, t) {
     if (this.graphStore.getPort(e) === void 0)
-      throw new P("failed to update nonexistent port");
+      throw new b("failed to update nonexistent port");
     return this.graphStore.updatePort(e, t ?? {}), this;
   }
   /**
@@ -439,7 +439,7 @@ class ve {
    */
   unmarkPort(e) {
     if (this.graphStore.getPort(e) === void 0)
-      throw new P("failed to unmark nonexistent port");
+      throw new b("failed to unmark nonexistent port");
     return this.graphStore.removePort(e), this;
   }
   /**
@@ -448,11 +448,11 @@ class ve {
   addEdge(e) {
     const t = this.edgeIdGenerator.create(e.id);
     if (this.graphStore.getEdge(t) !== void 0)
-      throw new P("failed to add edge with existing id");
+      throw new b("failed to add edge with existing id");
     if (this.graphStore.getPort(e.from) === void 0)
-      throw new P("failed to add edge from nonexistent port");
+      throw new b("failed to add edge from nonexistent port");
     if (this.graphStore.getPort(e.to) === void 0)
-      throw new P("failed to add edge to nonexistent port");
+      throw new b("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: t,
       from: e.from,
@@ -466,7 +466,7 @@ class ve {
    */
   updateEdge(e, t) {
     if (this.graphStore.getEdge(e) === void 0)
-      throw new P("failed to update nonexistent edge");
+      throw new b("failed to update nonexistent edge");
     return this.graphStore.updateEdge(e, t ?? {}), this;
   }
   /**
@@ -474,7 +474,7 @@ class ve {
    */
   removeEdge(e) {
     if (this.graphStore.getEdge(e) === void 0)
-      throw new P("failed to remove nonexistent edge");
+      throw new b("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
   /**
@@ -510,10 +510,10 @@ class ve {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class je {
+class Qe {
   constructor() {
-    o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
-    o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
+    i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
+    i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
   }
   addRecord(e, t) {
     const s = this.singleToMultiMap.get(e);
@@ -550,43 +550,43 @@ class je {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class Ee {
+class xe {
   constructor() {
-    o(this, "nodes", /* @__PURE__ */ new Map());
-    o(this, "ports", /* @__PURE__ */ new Map());
-    o(this, "edges", /* @__PURE__ */ new Map());
-    o(this, "nodesElementsMap", /* @__PURE__ */ new Map());
-    o(this, "portIncomingEdges", /* @__PURE__ */ new Map());
-    o(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
-    o(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new je());
-    o(this, "afterNodeAddedEmitter");
-    o(this, "onAfterNodeAdded");
-    o(this, "afterNodeUpdatedEmitter");
-    o(this, "onAfterNodeUpdated");
-    o(this, "afterNodePriorityUpdatedEmitter");
-    o(this, "onAfterNodePriorityUpdated");
-    o(this, "beforeNodeRemovedEmitter");
-    o(this, "onBeforeNodeRemoved");
-    o(this, "afterPortAddedEmitter");
-    o(this, "onAfterPortAdded");
-    o(this, "afterPortUpdatedEmitter");
-    o(this, "onAfterPortUpdated");
-    o(this, "beforePortRemovedEmitter");
-    o(this, "onBeforePortRemoved");
-    o(this, "afterEdgeAddedEmitter");
-    o(this, "onAfterEdgeAdded");
-    o(this, "afterEdgeShapeUpdatedEmitter");
-    o(this, "onAfterEdgeShapeUpdated");
-    o(this, "afterEdgeUpdatedEmitter");
-    o(this, "onAfterEdgeUpdated");
-    o(this, "afterEdgePriorityUpdatedEmitter");
-    o(this, "onAfterEdgePriorityUpdated");
-    o(this, "beforeEdgeRemovedEmitter");
-    o(this, "onBeforeEdgeRemoved");
-    o(this, "beforeClearEmitter");
-    o(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = x(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = x(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = x(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = x(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = x(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = x(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = x(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = x(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = x(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = x(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = x(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = x(), [this.beforeClearEmitter, this.onBeforeClear] = x();
+    i(this, "nodes", /* @__PURE__ */ new Map());
+    i(this, "ports", /* @__PURE__ */ new Map());
+    i(this, "edges", /* @__PURE__ */ new Map());
+    i(this, "nodesElementsMap", /* @__PURE__ */ new Map());
+    i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
+    i(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
+    i(this, "portCycleEdges", /* @__PURE__ */ new Map());
+    i(this, "elementPorts", new Qe());
+    i(this, "afterNodeAddedEmitter");
+    i(this, "onAfterNodeAdded");
+    i(this, "afterNodeUpdatedEmitter");
+    i(this, "onAfterNodeUpdated");
+    i(this, "afterNodePriorityUpdatedEmitter");
+    i(this, "onAfterNodePriorityUpdated");
+    i(this, "beforeNodeRemovedEmitter");
+    i(this, "onBeforeNodeRemoved");
+    i(this, "afterPortAddedEmitter");
+    i(this, "onAfterPortAdded");
+    i(this, "afterPortUpdatedEmitter");
+    i(this, "onAfterPortUpdated");
+    i(this, "beforePortRemovedEmitter");
+    i(this, "onBeforePortRemoved");
+    i(this, "afterEdgeAddedEmitter");
+    i(this, "onAfterEdgeAdded");
+    i(this, "afterEdgeShapeUpdatedEmitter");
+    i(this, "onAfterEdgeShapeUpdated");
+    i(this, "afterEdgeUpdatedEmitter");
+    i(this, "onAfterEdgeUpdated");
+    i(this, "afterEdgePriorityUpdatedEmitter");
+    i(this, "onAfterEdgePriorityUpdated");
+    i(this, "beforeEdgeRemovedEmitter");
+    i(this, "onBeforeEdgeRemoved");
+    i(this, "beforeClearEmitter");
+    i(this, "onBeforeClear");
+    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = E(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = E(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = E(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = E(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.beforeClearEmitter, this.onBeforeClear] = E();
   }
   addNode(e) {
     const t = /* @__PURE__ */ new Map(), s = {
@@ -655,11 +655,11 @@ class Ee {
   }
   updateEdge(e, t) {
     if (t.from !== void 0 || t.to !== void 0) {
-      const i = this.edges.get(e), n = i.payload;
+      const o = this.edges.get(e), n = o.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
         id: e,
-        from: t.from ?? i.from,
-        to: t.to ?? i.to,
+        from: t.from ?? o.from,
+        to: t.to ?? o.to,
         shape: n.shape,
         priority: n.priority
       });
@@ -697,8 +697,8 @@ class Ee {
   }
   getNodeIncomingEdgeIds(e) {
     const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
-    return t.forEach((i) => {
-      this.getPortIncomingEdgeIds(i).filter((n) => {
+    return t.forEach((o) => {
+      this.getPortIncomingEdgeIds(o).filter((n) => {
         const a = this.getEdge(n);
         return this.getPort(a.from).nodeId !== e;
       }).forEach((n) => {
@@ -708,8 +708,8 @@ class Ee {
   }
   getNodeOutgoingEdgeIds(e) {
     const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
-    return t.forEach((i) => {
-      this.getPortOutgoingEdgeIds(i).filter((n) => {
+    return t.forEach((o) => {
+      this.getPortOutgoingEdgeIds(o).filter((n) => {
         const a = this.getEdge(n);
         return this.getPort(a.to).nodeId !== e;
       }).forEach((n) => {
@@ -719,10 +719,10 @@ class Ee {
   }
   getNodeCycleEdgeIds(e) {
     const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
-    return t.forEach((i) => {
-      this.getPortCycleEdgeIds(i).forEach((n) => {
+    return t.forEach((o) => {
+      this.getPortCycleEdgeIds(o).forEach((n) => {
         s.push(n);
-      }), this.getPortIncomingEdgeIds(i).filter((n) => {
+      }), this.getPortIncomingEdgeIds(o).filter((n) => {
         const a = this.getEdge(n);
         return this.getPort(a.to).nodeId === e;
       }).forEach((n) => {
@@ -732,12 +732,12 @@ class Ee {
   }
   getNodeAdjacentEdgeIds(e) {
     const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
-    return t.forEach((i) => {
-      this.getPortIncomingEdgeIds(i).forEach((n) => {
+    return t.forEach((o) => {
+      this.getPortIncomingEdgeIds(o).forEach((n) => {
         s.push(n);
-      }), this.getPortOutgoingEdgeIds(i).forEach((n) => {
+      }), this.getPortOutgoingEdgeIds(o).forEach((n) => {
         s.push(n);
-      }), this.getPortCycleEdgeIds(i).forEach((n) => {
+      }), this.getPortCycleEdgeIds(o).forEach((n) => {
         s.push(n);
       });
     }), s;
@@ -753,8 +753,8 @@ class Ee {
     }), e.from !== e.to ? (this.portOutcomingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id)) : this.portCycleEdges.get(e.from).add(e.id);
   }
   removeEdgeInternal(e) {
-    const t = this.edges.get(e), s = t.from, i = t.to;
-    this.portCycleEdges.get(s).delete(e), this.portCycleEdges.get(i).delete(e), this.portIncomingEdges.get(s).delete(e), this.portIncomingEdges.get(i).delete(e), this.portOutcomingEdges.get(s).delete(e), this.portOutcomingEdges.get(i).delete(e), this.edges.delete(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.portOutcomingEdges.get(s).delete(e), this.portOutcomingEdges.get(o).delete(e), this.edges.delete(e);
   }
 }
 const ce = (r) => ({
@@ -766,13 +766,13 @@ const ce = (r) => ({
   x: 0,
   y: 0
 };
-class Ge {
+class Ze {
   constructor() {
-    o(this, "viewportMatrix", le);
-    o(this, "contentMatrix", le);
-    o(this, "afterUpdateEmitter");
-    o(this, "onAfterUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = x();
+    i(this, "viewportMatrix", le);
+    i(this, "contentMatrix", le);
+    i(this, "afterUpdateEmitter");
+    i(this, "onAfterUpdated");
+    [this.afterUpdateEmitter, this.onAfterUpdated] = E();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -797,23 +797,23 @@ class Ge {
 }
 class K {
   constructor(e) {
-    o(this, "elementToNodeId", /* @__PURE__ */ new Map());
-    o(this, "nodesResizeObserver");
-    o(this, "onAfterNodeAdded", (e) => {
+    i(this, "elementToNodeId", /* @__PURE__ */ new Map());
+    i(this, "nodesResizeObserver");
+    i(this, "onAfterNodeAdded", (e) => {
       const t = this.canvas.graph.getNode(e);
       this.elementToNodeId.set(t.element, e), this.nodesResizeObserver.observe(t.element);
     });
-    o(this, "onBeforeNodeRemoved", (e) => {
+    i(this, "onBeforeNodeRemoved", (e) => {
       const t = this.canvas.graph.getNode(e);
       this.elementToNodeId.delete(t.element), this.nodesResizeObserver.unobserve(t.element);
     });
-    o(this, "onBeforeClear", () => {
+    i(this, "onBeforeClear", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
     this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
       t.forEach((s) => {
-        const i = s.target;
-        this.handleNodeResize(i);
+        const o = s.target;
+        this.handleNodeResize(o);
       });
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
@@ -825,12 +825,12 @@ class K {
     this.canvas.updateNode(t);
   }
 }
-const Ke = (r, e, t) => {
-  const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
-  return e >= s && e <= s + n && t >= i && t <= i + a;
-}, Ze = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => Ke(e, t, s) && Ze(r, t, s), B = (r, e) => {
+const Je = (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;
+}, qe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, F = (r, e, t, s) => Je(e, t, s) && qe(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, F = (r) => {
+}, B = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayId,
@@ -845,7 +845,7 @@ const Ke = (r, e, t) => {
       }
     ]
   };
-}, Je = (r, e) => {
+}, _e = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const s = r.getElementPortIds(t)[0] ?? null;
@@ -868,44 +868,44 @@ function* Ae(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const s of t) {
     if (s.shadowRoot !== null) {
-      const i = Ae(s.shadowRoot, e);
-      for (const n of i)
+      const o = Ae(s.shadowRoot, e);
+      for (const n of o)
         yield n;
     }
     yield s;
   }
 }
-const xe = (r, e) => {
+const Ee = (r, e) => {
   const t = Ae(document, e);
   for (const s of t) {
-    const i = Je(r, s);
-    if (i.status === "portFound")
-      return i.portId;
-    if (i.status === "nodeEncountered")
+    const o = _e(r, s);
+    if (o.status === "portFound")
+      return o.portId;
+    if (o.status === "nodeEncountered")
       return null;
   }
   return null;
 };
-var b = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(b || {});
+var T = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(T || {});
 const Se = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), p = {
   x: 0,
   y: 0
-}, y = (r, e, t) => ({
+}, 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)
-}), Pe = (r, e) => {
+}), be = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
   }, s = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, i = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
+  }, o = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
   return {
-    x: i,
+    x: o,
     y: n,
     width: a,
     height: h,
@@ -916,18 +916,18 @@ const Se = (r, e) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class Qe {
+class et {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = y(
+    const s = m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ), i = y(
+    ), o = m(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -935,37 +935,37 @@ class Qe {
       x: s.x + this.params.sourceDirection.x * this.params.curvature,
       y: s.y + this.params.sourceDirection.y * this.params.curvature
     }, a = {
-      x: i.x - this.params.targetDirection.x * this.params.curvature,
-      y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+      x: o.x - this.params.targetDirection.x * this.params.curvature,
+      y: o.y - this.params.targetDirection.y * this.params.curvature
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${o.x} ${o.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${this.params.to.x} ${this.params.to.y}`;
     this.path = `${d}${h}${c}`;
   }
 }
-class qe {
+class tt {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? y(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = y(
-      { x: i, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
     ), g = {
       x: c.x + h,
       y: c.y + d
-    }, l = y(
-      { x: this.params.to.x - i, y: this.params.to.y },
+    }, l = m(
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), u = {
@@ -974,87 +974,87 @@ class qe {
     }, w = {
       x: (g.x + u.x) / 2,
       y: (g.y + u.y) / 2
-    }, m = {
+    }, y = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
-    }, v = {
+    }, x = {
       x: l.x - this.params.curvature * this.params.targetDirection.x,
       y: l.y - this.params.curvature * this.params.targetDirection.y
-    }, E = {
+    }, A = {
       x: c.x + h,
       y: c.y + d
-    }, A = {
+    }, S = {
       x: l.x + h,
       y: l.y + d
     };
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${m.x} ${m.y} ${E.x} ${E.y} ${w.x} ${w.y}`,
-      `C ${A.x} ${A.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
+      `C ${y.x} ${y.y} ${A.x} ${A.y} ${w.x} ${w.y}`,
+      `C ${S.x} ${S.y} ${x.x} ${x.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
     ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
   }
 }
-const Z = Object.freeze({
+const Q = Object.freeze({
   edgeColor: "--edge-color"
-}), be = (r) => {
+}), Pe = (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;
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(Q.edgeColor, r), e;
 }, Te = (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;
+  return e.setAttribute("stroke", `var(${Q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, O = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
-}, De = () => {
+  return r.setAttribute("fill", `var(${Q.edgeColor})`), r;
+}, Ce = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Ne = (r, e) => {
+}, De = (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`;
 }, L = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const s = r.length - 1;
-    let i = 0, n = 0, a = 0;
+    let o = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, g = 0, l = 0;
-      const u = d > 0, w = d < s, m = u && w;
-      if (u && (c = -i, g = -n, l = a), w) {
-        const $ = r[d + 1];
-        i = $.x - h.x, n = $.y - h.y, a = Math.sqrt(i * i + n * n);
+      const u = d > 0, w = d < s, y = u && w;
+      if (u && (c = -o, g = -n, l = a), w) {
+        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((m ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, A = m ? { x: h.x + i * E, y: h.y + n * E } : h, T = l !== 0 ? Math.min((m ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = m ? { x: h.x + c * T, y: h.y + g * T } : h;
-      d > 0 && t.push(`L ${N.x} ${N.y}`), m && t.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${A.x} ${A.y}`
+      const A = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + o * A, y: h.y + n * A } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * P, y: h.y + g * P } : h;
+      d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${S.x} ${S.y}`
       );
     });
   }
   return t.join(" ");
 };
-class _e {
+class rt {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
+    const s = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, i = this.params.hasTargetArrow ? y(
+    ) : p, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
       { x: a, y: p.y },
       this.params.sourceDirection,
       p
-    ), d = y(
+    ), d = m(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1064,35 +1064,35 @@ class _e {
     }, u = { x: l.x, y: g }, w = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, m = { x: w.x, y: g };
+    }, y = { x: w.x, y: g };
     this.path = L(
-      [s, h, l, u, m, w, d, i],
+      [s, h, l, u, y, w, d, o],
       this.params.roundness
     );
   }
 }
-class et {
+class st {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? y(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
-      { x: i, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
-    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = y(
-      { x: this.params.to.x - i, y: this.params.to.y },
+    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
+      { x: this.params.to.x - o, y: this.params.to.y },
       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 };
@@ -1102,59 +1102,59 @@ class et {
     );
   }
 }
-class tt {
+class ot {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
+    const s = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, i = this.params.hasTargetArrow ? y(
+    ) : p, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = y(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
       { x: n, y: p.y },
       this.params.sourceDirection,
       p
-    ), h = y(
+    ), h = m(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     );
-    this.path = L([s, a, h, i], this.params.roundness);
+    this.path = L([s, a, h, o], this.params.roundness);
   }
 }
-class rt {
+class it {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? y(
+    const s = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, i = this.params.hasTargetArrow ? y(
+    ) : p, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
       { x: a, y: p.y },
       this.params.sourceDirection,
       p
-    ), d = y(
+    ), d = m(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1164,45 +1164,45 @@ class rt {
     }, u = { x: g, y: l.y }, w = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, m = { x: g, y: w.y };
+    }, y = { x: g, y: w.y };
     this.path = L(
-      [s, h, l, u, m, w, d, i],
+      [s, h, l, u, y, w, d, o],
       this.params.roundness
     );
   }
 }
-class J {
+class Z {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
-    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
+    const t = this.params.arrowOffset, s = this.params.side, o = this.params.arrowLength + t, n = o + 2 * s, h = [
       { x: this.params.arrowLength, y: p.y },
-      { x: i, y: p.y },
-      { x: i, y: this.params.side },
+      { x: o, y: p.y },
+      { x: o, y: this.params.side },
       { x: n, y: this.params.side },
       { x: n, y: -this.params.side },
-      { x: i, y: -this.params.side },
-      { x: i, y: p.y },
+      { x: o, y: -this.params.side },
+      { x: o, y: p.y },
       { x: this.params.arrowLength, y: p.y }
     ].map(
-      (c) => y(c, this.params.sourceDirection, p)
+      (c) => m(c, this.params.sourceDirection, p)
     ), d = `M ${p.x} ${p.y} L ${h[0].x} ${h[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${L(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class st {
+class nt {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
-    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
+    const t = this.params.smallRadius, s = this.params.radius, o = t + s, n = t * s / o, a = Math.sqrt(o * o - t * t), h = a * t / o, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
       { x: this.params.arrowLength, y: p.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (m) => y(m, this.params.sourceDirection, p)
+      (y) => m(y, this.params.sourceDirection, p)
     ), u = [
       `M ${l[0].x} ${l[0].y}`,
       `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
@@ -1212,11 +1212,11 @@ class st {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
   }
 }
-class ot {
+class at {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
-    o(this, "diagonalDistance");
+    i(this, "path");
+    i(this, "midpoint");
+    i(this, "diagonalDistance");
     this.params = e;
     const t = this.params.to;
     if (this.midpoint = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
@@ -1227,7 +1227,7 @@ class ot {
       this.path = "";
       return;
     }
-    const i = this.createDirectLinePoint({
+    const o = this.createDirectLinePoint({
       offset: this.params.sourceOffset,
       hasArrow: this.params.hasSourceArrow,
       flip: 1,
@@ -1238,38 +1238,38 @@ class ot {
       flip: -1,
       shift: this.params.to
     });
-    this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
+    this.path = `M ${o.x} ${o.y} L ${n.x} ${n.y}`;
   }
   createDirectLinePoint(e) {
-    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, i = e.flip * s / this.diagonalDistance;
+    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, o = e.flip * s / this.diagonalDistance;
     return {
-      x: this.params.to.x * i + e.shift.x,
-      y: this.params.to.y * i + e.shift.y
+      x: this.params.to.x * o + e.shift.x,
+      y: this.params.to.y * o + e.shift.y
     };
   }
 }
-class it {
+class ht {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? y(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
-      { x: i, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
-    ), a = y(
-      { x: this.params.to.x - i, y: this.params.to.y },
+    ), a = m(
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.y / 2, c = d + Math.abs(this.params.detourDistance), g = d + c * this.params.flipY * h, l = {
@@ -1289,28 +1289,28 @@ class it {
     );
   }
 }
-class nt {
+class dt {
   constructor(e) {
-    o(this, "path");
-    o(this, "midpoint");
+    i(this, "path");
+    i(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? y(
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? y(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
-      { x: i, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
-    ), a = y(
-      { x: this.params.to.x - i, y: this.params.to.y },
+    ), a = m(
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.x / 2, c = d + Math.abs(this.params.detourDistance), g = d + c * this.params.flipX * h, l = {
@@ -1355,22 +1355,22 @@ const f = Object.freeze({
 }), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
 class k {
   constructor(e) {
-    o(this, "svg");
-    o(this, "group", De());
-    o(this, "line");
-    o(this, "sourceArrow", null);
-    o(this, "targetArrow", null);
-    o(this, "onAfterRender");
-    o(this, "afterRenderEmitter");
-    o(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = be(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
+    i(this, "svg");
+    i(this, "group", Ce());
+    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] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
+    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
       e.from,
       e.to
     );
-    Ne(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    De(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = ge(
       e.from.direction,
       a,
@@ -1380,11 +1380,11 @@ class k {
       a,
       h
     ), g = {
-      x: i,
+      x: o,
       y: n
     };
     let l = { x: -c.x, y: -c.y }, u;
-    e.category === C.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === C.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,
@@ -1393,46 +1393,46 @@ class k {
       h
     );
     this.line.setAttribute("d", w.path);
-    let m = null;
-    this.sourceArrow && (m = this.arrowRenderer({
+    let y = null;
+    this.sourceArrow && (y = this.arrowRenderer({
       direction: d,
       shift: p,
       arrowLength: this.params.arrowLength
-    }), this.sourceArrow.setAttribute("d", m));
-    let v = null;
-    this.targetArrow && (v = this.arrowRenderer({
+    }), this.sourceArrow.setAttribute("d", y));
+    let x = null;
+    this.targetArrow && (x = this.arrowRenderer({
       direction: l,
       shift: g,
       arrowLength: this.params.arrowLength
-    }), this.targetArrow.setAttribute("d", v)), this.afterRenderEmitter.emit({
+    }), this.targetArrow.setAttribute("d", x)), this.afterRenderEmitter.emit({
       edgePath: w,
-      sourceArrowPath: m,
-      targetArrowPath: v
+      sourceArrowPath: y,
+      targetArrowPath: x
     });
   }
 }
-const at = (r) => (e) => {
+const ct = (r) => (e) => {
   const s = [
     p,
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => y(h, e.direction, p)
+    (h) => m(h, e.direction, p)
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
-  })), i = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
-  return `${i} ${n} ${a} Z`;
-}, ht = (r) => (e) => {
-  const t = r.radius, s = e.arrowLength, i = (s * s + 2 * s * t) / (2 * t), n = i + t, a = s + t - t * (s + t) / n, h = t * i / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
-    (m) => y(m, e.direction, p)
-  ).map((m) => ({
-    x: m.x + e.shift.x,
-    y: m.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
+  })), o = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
+  return `${o} ${n} ${a} Z`;
+}, lt = (r) => (e) => {
+  const t = r.radius, s = e.arrowLength, o = (s * s + 2 * s * t) / (2 * t), n = o + t, a = s + t - t * (s + t) / n, h = t * o / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
+    (y) => m(y, e.direction, p)
+  ).map((y) => ({
+    x: y.x + e.shift.x,
+    y: y.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}`;
-}, dt = (r) => (e) => {
-  const t = r.smallRadius, s = r.radius, i = y(
+}, gt = (r) => (e) => {
+  const t = r.smallRadius, s = r.radius, o = m(
     {
       x: e.arrowLength,
       y: 0
@@ -1445,8 +1445,8 @@ const at = (r) => (e) => {
       x: e.arrowLength + r.smallRadius,
       y: 0
     }
-  ), a = [p, { x: i.x, y: -i.y }, i].map(
-    (l) => y(l, e.direction, p)
+  ), a = [p, { x: o.x, y: -o.y }, o].map(
+    (l) => m(l, e.direction, p)
   ).map((l) => ({
     x: l.x + e.shift.x,
     y: l.y + e.shift.y
@@ -1457,39 +1457,39 @@ const at = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return at({
+      return ct({
         radius: r.radius ?? f.polygonArrowRadius
       });
     case "arc":
-      return ht({
+      return lt({
         radius: r.radius ?? f.circleArrowRadius
       });
     default:
-      return dt({
+      return gt({
         smallRadius: r.smallRadius ?? f.wedgeArrowSmallRadius,
         angle: r.angle ?? f.wedgeArrowAngle,
         radius: r.radius ?? f.wedgeArrowRadius
       });
   }
 };
-class ct {
+class ut {
   constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "curvature");
-    o(this, "portCycleRadius");
-    o(this, "portCycleSmallRadius");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new st({
+    i(this, "svg");
+    i(this, "group");
+    i(this, "line");
+    i(this, "sourceArrow");
+    i(this, "targetArrow");
+    i(this, "onAfterRender");
+    i(this, "arrowLength");
+    i(this, "curvature");
+    i(this, "portCycleRadius");
+    i(this, "portCycleSmallRadius");
+    i(this, "detourDirection");
+    i(this, "detourDistance");
+    i(this, "hasSourceArrow");
+    i(this, "hasTargetArrow");
+    i(this, "pathShape");
+    i(this, "createCyclePath", (e) => new nt({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1497,11 +1497,11 @@ class ct {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new qe({
+    i(this, "createDetourPath", (e, t, s, o, n) => new tt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: i,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
@@ -1510,7 +1510,7 @@ class ct {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new Qe({
+    i(this, "createLinePath", (e, t, s) => new et({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1535,23 +1535,23 @@ class ct {
     this.pathShape.render(e);
   }
 }
-class lt {
+class pt {
   constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new J({
+    i(this, "svg");
+    i(this, "group");
+    i(this, "line");
+    i(this, "sourceArrow");
+    i(this, "targetArrow");
+    i(this, "onAfterRender");
+    i(this, "arrowLength");
+    i(this, "arrowOffset");
+    i(this, "roundness");
+    i(this, "cycleSquareSide");
+    i(this, "detourDistance");
+    i(this, "hasSourceArrow");
+    i(this, "hasTargetArrow");
+    i(this, "pathShape");
+    i(this, "createCyclePath", (e) => new Z({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1560,11 +1560,11 @@ class lt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new it({
+    i(this, "createDetourPath", (e, t, s, o, n) => new ht({
       to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: i,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1573,11 +1573,11 @@ class lt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new _e({
+    i(this, "createLinePath", (e, t, s, o) => new rt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: i,
+      flipX: o,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -1606,24 +1606,24 @@ class lt {
     this.pathShape.render(e);
   }
 }
-class gt {
+class wt {
   constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new J({
+    i(this, "svg");
+    i(this, "group");
+    i(this, "line");
+    i(this, "sourceArrow");
+    i(this, "targetArrow");
+    i(this, "onAfterRender");
+    i(this, "arrowLength");
+    i(this, "arrowOffset");
+    i(this, "roundness");
+    i(this, "cycleSquareSide");
+    i(this, "detourDirection");
+    i(this, "detourDistance");
+    i(this, "hasSourceArrow");
+    i(this, "hasTargetArrow");
+    i(this, "pathShape");
+    i(this, "createCyclePath", (e) => new Z({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1632,11 +1632,11 @@ class gt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new et({
+    i(this, "createDetourPath", (e, t, s, o, n) => new st({
       to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: i,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1646,7 +1646,7 @@ class gt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new tt({
+    i(this, "createLinePath", (e, t, s) => new ot({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1678,23 +1678,23 @@ class gt {
     this.pathShape.render(e);
   }
 }
-class ut {
+class ft {
   constructor(e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new J({
+    i(this, "svg");
+    i(this, "group");
+    i(this, "line");
+    i(this, "sourceArrow");
+    i(this, "targetArrow");
+    i(this, "onAfterRender");
+    i(this, "arrowLength");
+    i(this, "arrowOffset");
+    i(this, "roundness");
+    i(this, "cycleSquareSide");
+    i(this, "detourDistance");
+    i(this, "hasSourceArrow");
+    i(this, "hasTargetArrow");
+    i(this, "pathShape");
+    i(this, "createCyclePath", (e) => new Z({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1703,11 +1703,11 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new nt({
+    i(this, "createDetourPath", (e, t, s, o, n) => new dt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: i,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1716,7 +1716,7 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new rt({
+    i(this, "createLinePath", (e, t, s, o, n) => new it({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1749,30 +1749,30 @@ class ut {
     this.pathShape.render(e);
   }
 }
-class Me {
+class Ne {
   constructor(e) {
-    o(this, "svg");
-    o(this, "group", De());
-    o(this, "line");
-    o(this, "sourceArrow", null);
-    o(this, "targetArrow", null);
-    o(this, "color");
-    o(this, "width");
-    o(this, "arrowLength");
-    o(this, "sourceOffset");
-    o(this, "targetOffset");
-    o(this, "onAfterRender");
-    o(this, "afterRenderEmitter");
-    o(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = x(), 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 = be(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
+    i(this, "svg");
+    i(this, "group", Ce());
+    i(this, "line");
+    i(this, "sourceArrow", null);
+    i(this, "targetArrow", null);
+    i(this, "color");
+    i(this, "width");
+    i(this, "arrowLength");
+    i(this, "sourceOffset");
+    i(this, "targetOffset");
+    i(this, "onAfterRender");
+    i(this, "afterRenderEmitter");
+    i(this, "arrowRenderer");
+    [this.afterRenderEmitter, this.onAfterRender] = E(), 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 = Pe(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
+    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
       e.from,
       e.to
     );
-    Ne(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: i, y: n }, c = new ot({
+    De(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 at({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1791,26 +1791,26 @@ class Me {
         y: d.y / u
       };
       if (this.sourceArrow) {
-        const m = {
+        const y = {
           x: w.x * this.sourceOffset,
           y: w.y * this.sourceOffset
         };
         g = this.arrowRenderer({
           direction: w,
-          shift: m,
+          shift: y,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", g);
       }
       if (this.targetArrow) {
-        const m = {
+        const y = {
           x: w.x * this.targetOffset,
           y: w.y * this.targetOffset
         };
         l = this.arrowRenderer({
           direction: { x: -w.x, y: -w.y },
           shift: {
-            x: d.x - m.x,
-            y: d.y - m.y
+            x: d.x - y.x,
+            y: d.y - y.y
           },
           arrowLength: this.arrowLength
         }), this.targetArrow.setAttribute("d", l);
@@ -1823,57 +1823,57 @@ class Me {
     });
   }
 }
-const pt = () => {
+const yt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, wt = (r) => {
+}, mt = (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;
 }, ue = (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 ft extends Error {
+class vt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Le {
+class Me {
   constructor(e, t) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "handle", pt());
-    o(this, "onAfterRender");
-    o(this, "interactiveLine");
-    o(this, "interactiveSourceArrow", null);
-    o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Le)
-      throw new ft(
+    i(this, "svg");
+    i(this, "group");
+    i(this, "line");
+    i(this, "sourceArrow");
+    i(this, "targetArrow");
+    i(this, "handle", yt());
+    i(this, "onAfterRender");
+    i(this, "interactiveLine");
+    i(this, "interactiveSourceArrow", null);
+    i(this, "interactiveTargetArrow", null);
+    if (this.baseEdge = e, e instanceof Me)
+      throw new vt(
         "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 = wt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
-      this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
+    this.interactiveLine = mt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(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);
     });
   }
   render(e) {
     this.baseEdge.render(e);
   }
 }
-class Qt {
+class sr {
   constructor(e, t) {
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "svg");
+    i(this, "group");
+    i(this, "line");
+    i(this, "sourceArrow");
+    i(this, "targetArrow");
+    i(this, "onAfterRender");
+    i(this, "svg");
     this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
-      const i = s.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
+      const o = s.edgePath.midpoint, n = `translate(${o.x}px, ${o.y}px)`;
       this.midpointElement.style.setProperty("transform", n);
     });
   }
@@ -1881,21 +1881,21 @@ class Qt {
     this.baseShape.render(e);
   }
 }
-class Re {
+class Le {
   constructor(e) {
-    o(this, "onAfterNodeAdded");
-    o(this, "onAfterNodeUpdated");
-    o(this, "onAfterNodePriorityUpdated");
-    o(this, "onBeforeNodeRemoved");
-    o(this, "onAfterPortMarked");
-    o(this, "onAfterPortUpdated");
-    o(this, "onBeforePortUnmarked");
-    o(this, "onAfterEdgeAdded");
-    o(this, "onAfterEdgeShapeUpdated");
-    o(this, "onAfterEdgeUpdated");
-    o(this, "onAfterEdgePriorityUpdated");
-    o(this, "onBeforeEdgeRemoved");
-    o(this, "onBeforeClear");
+    i(this, "onAfterNodeAdded");
+    i(this, "onAfterNodeUpdated");
+    i(this, "onAfterNodePriorityUpdated");
+    i(this, "onBeforeNodeRemoved");
+    i(this, "onAfterPortMarked");
+    i(this, "onAfterPortUpdated");
+    i(this, "onBeforePortUnmarked");
+    i(this, "onAfterEdgeAdded");
+    i(this, "onAfterEdgeShapeUpdated");
+    i(this, "onAfterEdgeUpdated");
+    i(this, "onAfterEdgePriorityUpdated");
+    i(this, "onBeforeEdgeRemoved");
+    i(this, "onBeforeClear");
     this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
   }
   getNode(e) {
@@ -1974,9 +1974,9 @@ class Re {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class Ce {
+class Re {
   constructor(e) {
-    o(this, "onAfterUpdated");
+    i(this, "onAfterUpdated");
     this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
   }
   getViewportMatrix() {
@@ -1986,14 +1986,14 @@ class Ce {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-const Ve = (r, e) => {
-  const t = new Ee(), s = new Re(t), i = new Ce(e), n = new ye(t, e, r), a = {
+const Fe = (r, e) => {
+  const t = new xe(), s = new Le(t), o = new Re(e), n = new me(t, e, r), a = {
     nodes: {
       centerFn: Se,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Me(),
+      shapeFactory: () => new Ne(),
       priorityFn: () => 0
     },
     ports: {
@@ -2002,7 +2002,7 @@ const Ve = (r, e) => {
   };
   return new ve(
     s,
-    i,
+    o,
     t,
     e,
     n,
@@ -2010,16 +2010,16 @@ const Ve = (r, e) => {
   );
 };
 class z {
-  constructor(e, t, s, i) {
-    o(this, "onAfterPortMarked", (e) => {
+  constructor(e, t, s, o) {
+    i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
       this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
     });
-    o(this, "onBeforePortUnmarked", (e) => {
+    i(this, "onBeforePortUnmarked", (e) => {
       const t = this.canvas.graph.getPort(e);
       this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
     });
-    o(this, "onPortMouseDown", (e) => {
+    i(this, "onPortMouseDown", (e) => {
       if (!this.params.mouseDownEventVerifier(e))
         return;
       const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
@@ -2032,8 +2032,8 @@ class z {
         passive: !0
       }));
     });
-    o(this, "onWindowMouseMove", (e) => {
-      if (!V(
+    i(this, "onWindowMouseMove", (e) => {
+      if (!F(
         this.window,
         this.element,
         e.clientX,
@@ -2044,14 +2044,14 @@ class z {
       }
       this.params.onPointerMove({ x: e.clientX, y: e.clientY });
     });
-    o(this, "onWindowMouseUp", (e) => {
+    i(this, "onWindowMouseUp", (e) => {
       this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
     });
-    o(this, "onPortTouchStart", (e) => {
+    i(this, "onPortTouchStart", (e) => {
       if (e.touches.length !== 1)
         return;
-      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
-      this.params.onPortPointerDown(i, {
+      const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.getElementPortIds(s)[0];
+      this.params.onPortPointerDown(o, {
         x: t.clientX,
         y: t.clientY
       }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
@@ -2062,9 +2062,9 @@ class z {
         passive: !0
       }));
     });
-    o(this, "onWindowTouchMove", (e) => {
+    i(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!V(
+      if (!F(
         this.window,
         this.element,
         t.clientX,
@@ -2075,23 +2075,23 @@ class z {
       }
       this.params.onPointerMove({ x: t.clientX, y: t.clientY });
     });
-    o(this, "onWindowTouchFinish", (e) => {
+    i(this, "onWindowTouchFinish", (e) => {
       const t = e.changedTouches[0];
       this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
     });
-    o(this, "onBeforeClear", () => {
+    i(this, "onBeforeClear", () => {
       this.canvas.graph.getAllPortIds().forEach((e) => {
         const t = this.canvas.graph.getPort(e);
         this.unhookPortEvents(t.element);
       });
     });
-    o(this, "onBeforeDestroy", () => {
+    i(this, "onBeforeDestroy", () => {
       this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    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.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, s, i) {
-    new z(e, t, s, i);
+  static configure(e, t, s, o) {
+    new z(e, t, s, o);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2116,12 +2116,12 @@ class z {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Q {
-  constructor(e, t, s, i) {
-    o(this, "grabbedNode", null);
-    o(this, "maxNodePriority", 0);
-    o(this, "graph");
-    o(this, "onAfterNodeAdded", (e) => {
+class J {
+  constructor(e, t, s, o) {
+    i(this, "grabbedNode", null);
+    i(this, "maxNodePriority", 0);
+    i(this, "graph");
+    i(this, "onAfterNodeAdded", (e) => {
       this.updateMaxNodePriority(e);
       const t = this.graph.getNode(e);
       t.element.addEventListener("mousedown", this.onMouseDown, {
@@ -2130,50 +2130,50 @@ class Q {
         passive: !0
       });
     });
-    o(this, "onAfterNodeUpdated", (e) => {
+    i(this, "onAfterNodeUpdated", (e) => {
       this.updateMaxNodePriority(e);
     });
-    o(this, "onBeforeNodeRemoved", (e) => {
+    i(this, "onBeforeNodeRemoved", (e) => {
       const t = this.graph.getNode(e);
       t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
     });
-    o(this, "onBeforeDestroy", () => {
+    i(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    o(this, "onBeforeClear", () => {
+    i(this, "onBeforeClear", () => {
       this.canvas.graph.getAllNodeIds().forEach((e) => {
         const t = this.canvas.graph.getNode(e);
         t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
       }), this.maxNodePriority = 0;
     });
-    o(this, "onMouseDown", (e) => {
+    i(this, "onMouseDown", (e) => {
       if (!this.params.mouseDownEventVerifier(e))
         return;
-      const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
+      const t = e.currentTarget, s = this.graph.getElementNodeId(t), o = this.graph.getNode(s);
       if (!this.params.nodeDragVerifier(s))
         return;
-      e.stopPropagation();
+      this.params.onNodeDragStarted(s), e.stopPropagation();
       const a = this.calculateContentPoint({
         x: e.clientX,
         y: e.clientY
       });
       this.grabbedNode = {
         nodeId: s,
-        dx: a.x - i.x,
-        dy: a.y - i.y
-      }, B(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        dx: a.x - o.x,
+        dy: a.y - o.y
+      }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       });
     });
-    o(this, "onTouchStart", (e) => {
+    i(this, "onTouchStart", (e) => {
       if (e.touches.length !== 1)
         return;
       e.stopPropagation();
-      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
+      const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(o);
       if (!this.params.nodeDragVerifier({
-        nodeId: i,
+        nodeId: o,
         element: n.element,
         x: n.x,
         y: n.y
@@ -2184,10 +2184,10 @@ class Q {
         y: t.clientY
       });
       this.grabbedNode = {
-        nodeId: i,
+        nodeId: o,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, this.moveNodeOnTop(i), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      }, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2195,8 +2195,8 @@ class Q {
         passive: !0
       });
     });
-    o(this, "onWindowMouseMove", (e) => {
-      if (!V(
+    i(this, "onWindowMouseMove", (e) => {
+      if (!F(
         this.window,
         this.element,
         e.clientX,
@@ -2210,14 +2210,14 @@ class Q {
         y: e.clientY
       });
     });
-    o(this, "onWindowMouseUp", (e) => {
+    i(this, "onWindowMouseUp", (e) => {
       this.params.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
-    o(this, "onWindowTouchMove", (e) => {
+    i(this, "onWindowTouchMove", (e) => {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!V(
+      if (!F(
         this.window,
         this.element,
         t.clientX,
@@ -2231,20 +2231,20 @@ class Q {
         y: t.clientY
       });
     });
-    o(this, "onWindowTouchFinish", () => {
+    i(this, "onWindowTouchFinish", () => {
       this.cancelTouchDrag();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    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.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, s, i) {
-    new Q(e, t, s, i);
+  static configure(e, t, s, o) {
+    new J(e, t, s, o);
   }
   moveNode(e, t) {
     if (this.graph.getNode(e.nodeId) === null)
       return;
-    const i = this.calculateContentPoint(t), n = {
-      x: i.x - e.dx,
-      y: i.y - e.dy
+    const o = this.calculateContentPoint(t), n = {
+      x: o.x - e.dx,
+      y: o.y - e.dy
     }, a = this.adjustNodeCoords(n);
     this.canvas.updateNode(e.nodeId, {
       x: a.x,
@@ -2255,15 +2255,15 @@ class Q {
     if (this.params.moveOnTop) {
       if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
         const t = this.maxNodePriority;
-        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
-          this.canvas.updateEdge(i, { priority: t });
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((o) => {
+          this.canvas.updateEdge(o, { priority: t });
         });
       }
       this.canvas.updateNode(e, { priority: this.maxNodePriority });
     }
   }
   cancelMouseDrag() {
-    this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, B(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2291,8 +2291,8 @@ class Q {
     const t = this.element.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix();
-    return D(i, s);
+    }, o = this.canvas.viewport.getViewportMatrix();
+    return D(o, s);
   }
   adjustNodeCoords(e) {
     const t = this.params.gridSize;
@@ -2306,51 +2306,51 @@ class Q {
     return e;
   }
 }
-const mt = (r, e, t) => ({
+const xt = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), yt = (r, e, t, s) => ({
+}), At = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
-}), U = (r) => {
+}), $ = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
   const s = e.reduce(
     (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
+  ), o = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - o[0], h[1] - o[1]]).reduce(
     (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
-    x: i[0],
-    y: i[1],
+    x: o[0],
+    y: o[1],
     scale: a / t,
     touchesCnt: t,
     touches: e
   };
 };
-class X {
-  constructor(e, t, s, i) {
-    o(this, "viewport");
-    o(this, "prevTouches", null);
-    o(this, "wheelFinishTimer", null);
-    o(this, "transformInProgress", !1);
-    o(this, "onBeforeDestroy", () => {
+class H {
+  constructor(e, t, s, o) {
+    i(this, "viewport");
+    i(this, "prevTouches", null);
+    i(this, "wheelFinishTimer", null);
+    i(this, "transformInProgress", !1);
+    i(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (B(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+    i(this, "onMouseDown", (e) => {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
-    o(this, "onWindowMouseMove", (e) => {
-      const t = V(
+    i(this, "onWindowMouseMove", (e) => {
+      const t = F(
         this.window,
         this.element,
         e.clientX,
@@ -2360,26 +2360,26 @@ class X {
         this.stopMouseDrag();
         return;
       }
-      const s = -e.movementX, i = -e.movementY;
-      this.moveViewport(s, i);
+      const s = -e.movementX, o = -e.movementY;
+      this.moveViewport(s, o);
     });
-    o(this, "onWindowMouseUp", (e) => {
+    i(this, "onWindowMouseUp", (e) => {
       this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
     });
-    o(this, "onWheelScroll", (e) => {
+    i(this, "onWheelScroll", (e) => {
       if (!this.params.mouseWheelEventVerifier(e))
         return;
-      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
-      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      const { left: t, top: s } = this.element.getBoundingClientRect(), o = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, o, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
-    o(this, "onTouchStart", (e) => {
+    i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = U(e);
+        this.prevTouches = $(e);
         return;
       }
-      this.prevTouches = U(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = $(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2387,10 +2387,10 @@ class X {
         passive: !0
       }), this.startRegisteredTransform();
     });
-    o(this, "onWindowTouchMove", (e) => {
-      const t = U(e);
+    i(this, "onWindowTouchMove", (e) => {
+      const t = $(e);
       if (!t.touches.every(
-        (i) => V(this.window, this.element, i[0], i[1])
+        (o) => F(this.window, this.element, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2399,27 +2399,27 @@ class X {
         -(t.x - this.prevTouches.x),
         -(t.y - this.prevTouches.y)
       ), t.touchesCnt === 2) {
-        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        const { left: o, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - o, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
         this.scaleViewport(c, a, h);
       }
       this.prevTouches = t;
     });
-    o(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = U(e) : this.stopTouchDrag();
+    i(this, "onWindowTouchFinish", (e) => {
+      e.touches.length > 0 ? this.prevTouches = $(e) : this.stopTouchDrag();
     });
-    o(this, "observer", new ResizeObserver(() => {
-      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
+    i(this, "observer", new ResizeObserver(() => {
+      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), o = this.params.transformPreprocessor({
         prevTransform: e,
         nextTransform: e,
         canvasWidth: t,
         canvasHeight: s
       });
-      this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
+      this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
     }));
-    o(this, "preventWheelScaleListener", (e) => {
+    i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = t, this.window = s, this.params = o, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
     }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
@@ -2429,21 +2429,21 @@ class X {
       passive: !0
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, s, i) {
-    new X(e, t, s, i);
+  static configure(e, t, s, o) {
+    new H(e, t, s, o);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = mt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), o = xt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: s,
-      nextTransform: i,
+      nextTransform: o,
       canvasWidth: n,
       canvasHeight: a
     });
     this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = yt(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
-      prevTransform: i,
+    const o = this.canvas.viewport.getViewportMatrix(), n = At(o, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+      prevTransform: o,
       nextTransform: n,
       canvasWidth: a,
       canvasHeight: h
@@ -2451,7 +2451,7 @@ class X {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2473,21 +2473,21 @@ class X {
   }
 }
 class q {
-  constructor(e, t, s, i, n, a) {
-    o(this, "canvasResizeObserver");
-    o(this, "nodeHorizontal");
-    o(this, "nodeVertical");
-    o(this, "viewport");
-    o(this, "viewportWidth", 0);
-    o(this, "viewportHeight", 0);
-    o(this, "viewportMatrix");
-    o(this, "loadedArea", {
+  constructor(e, t, s, o, n, a) {
+    i(this, "canvasResizeObserver");
+    i(this, "nodeHorizontal");
+    i(this, "nodeVertical");
+    i(this, "viewport");
+    i(this, "viewportWidth", 0);
+    i(this, "viewportHeight", 0);
+    i(this, "viewportMatrix");
+    i(this, "loadedArea", {
       xFrom: 1 / 0,
       xTo: 1 / 0,
       yFrom: 1 / 0,
       yTo: 1 / 0
     });
-    o(this, "updateLoadedArea", (e) => {
+    i(this, "updateLoadedArea", (e) => {
       this.loadedArea = {
         xFrom: e.x,
         xTo: e.x + e.width,
@@ -2495,47 +2495,47 @@ class q {
         yTo: e.y + e.height
       };
     });
-    o(this, "onAfterViewportUpdated", () => {
+    i(this, "onAfterViewportUpdated", () => {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
-    o(this, "userTransformInProgress", !1);
+    i(this, "userTransformInProgress", !1);
     this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
     const h = {
-      ...i,
+      ...o,
       onResizeTransformStarted: () => {
-        this.userTransformInProgress = !0, i.onResizeTransformStarted();
+        this.userTransformInProgress = !0, o.onResizeTransformStarted();
       },
       onResizeTransformFinished: () => {
-        this.userTransformInProgress = !1, i.onResizeTransformFinished();
+        this.userTransformInProgress = !1, o.onResizeTransformFinished();
       },
       onBeforeTransformChange: () => {
-        this.userTransformInProgress = !0, i.onBeforeTransformChange();
+        this.userTransformInProgress = !0, o.onBeforeTransformChange();
       },
       onTransformChange: () => {
         this.userTransformInProgress = !1;
         const d = this.viewportMatrix;
-        this.viewportMatrix = this.viewport.getViewportMatrix(), d.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), i.onTransformChange();
+        this.viewportMatrix = this.viewport.getViewportMatrix(), d.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), o.onTransformChange();
       },
       onTransformFinished: () => {
-        this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
+        this.scheduleLoadAreaAroundViewport(), o.onTransformFinished();
       }
     };
-    X.configure(
+    H.configure(
       e,
       this.element,
       this.window,
       h
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(e, t, s, i, n, a) {
+  static configure(e, t, s, o, n, a) {
     new q(
       e,
       t,
       s,
-      i,
+      o,
       n,
       a
     );
@@ -2546,21 +2546,21 @@ class q {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
-    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, o = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
+    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < o && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
-    this.trigger.emit({ x: s, y: i, width: n, height: a });
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, o = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
+    this.trigger.emit({ x: s, y: o, width: n, height: a });
   }
 }
-const vt = () => {
+const Et = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Et = () => {
+}, St = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, At = () => {
+}, bt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2569,29 +2569,29 @@ const vt = () => {
 };
 class _ {
   constructor(e, t, s) {
-    o(this, "svg", vt());
-    o(this, "patternRenderingRectangle", Et());
-    o(this, "pattern", At());
-    o(this, "patternContent");
-    o(this, "tileWidth");
-    o(this, "tileHeight");
-    o(this, "halfTileWidth");
-    o(this, "halfTileHeight");
-    o(this, "maxViewportScale");
-    o(this, "visible", !1);
-    o(this, "resizeObserver", new ResizeObserver((e) => {
-      const t = e[0], { width: s, height: i } = t.contentRect;
-      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
-      const n = this.tileWidth / s, a = this.tileHeight / i;
+    i(this, "svg", Et());
+    i(this, "patternRenderingRectangle", St());
+    i(this, "pattern", bt());
+    i(this, "patternContent");
+    i(this, "tileWidth");
+    i(this, "tileHeight");
+    i(this, "halfTileWidth");
+    i(this, "halfTileHeight");
+    i(this, "maxViewportScale");
+    i(this, "visible", !1);
+    i(this, "resizeObserver", new ResizeObserver((e) => {
+      const t = e[0], { width: s, height: o } = t.contentRect;
+      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${o}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${o}`);
+      const n = this.tileWidth / s, a = this.tileHeight / o;
       this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
     }));
-    o(this, "onAfterTransformUpdated", () => {
-      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
-      this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
+    i(this, "onAfterTransformUpdated", () => {
+      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, o = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
+      this.pattern.setAttribute("patternTransform", o), this.updateVisibility();
     });
     this.canvas = e, this.backgroundHost = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
-    const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
-    this.patternContent.setAttribute("transform", i), this.pattern.appendChild(this.patternContent);
+    const o = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
+    this.patternContent.setAttribute("transform", o), this.pattern.appendChild(this.patternContent);
     const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
@@ -2604,14 +2604,14 @@ class _ {
   }
 }
 class ee {
-  constructor(e, t, s, i, n) {
-    o(this, "overlayCanvas");
-    o(this, "staticPortId", null);
-    o(this, "isTargetDragging", !0);
-    o(this, "onEdgeCreated", (e) => {
+  constructor(e, t, s, o, n) {
+    i(this, "overlayCanvas");
+    i(this, "staticPortId", null);
+    i(this, "isTargetDragging", !0);
+    i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ve(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Fe(
       this.overlayLayer,
       this.viewportStore
     ), z.configure(
@@ -2637,46 +2637,46 @@ class ee {
       }
     );
   }
-  static configure(e, t, s, i, n) {
+  static configure(e, t, s, o, n) {
     new ee(
       e,
       t,
       s,
-      i,
+      o,
       n
     );
   }
   grabPort(e, t, s) {
-    const i = this.canvas.graph.getPort(e);
+    const o = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = D(c, {
+    const n = o.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = D(c, {
       x: a - d.x,
       y: h - d.y
     }), l = D(c, {
       x: t.x - d.x,
       y: t.y - d.y
     }), u = {
-      overlayId: b.Static,
+      overlayId: T.Static,
       portCoords: g,
-      portDirection: i.direction
+      portDirection: o.direction
     }, w = {
-      overlayId: b.Dragging,
+      overlayId: T.Dragging,
       portCoords: l,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [m, v] = this.isTargetDragging ? [u, w] : [w, u];
-    this.overlayCanvas.addNode(F(m)), this.overlayCanvas.addNode(F(v)), this.overlayCanvas.addEdge({
-      from: m.overlayId,
-      to: v.overlayId,
-      shape: this.params.edgeShapeFactory(b.Edge)
+    const [y, x] = this.isTargetDragging ? [u, w] : [w, u];
+    this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(x)), this.overlayCanvas.addEdge({
+      from: y.overlayId,
+      to: x.overlayId,
+      shape: this.params.edgeShapeFactory(T.Edge)
     });
   }
   resetDragState() {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = xe(this.canvas.graph, e), s = this.staticPortId;
+    const t = Ee(this.canvas.graph, e), s = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: s,
@@ -2684,30 +2684,30 @@ class ee {
       });
       return;
     }
-    const i = this.isTargetDragging ? s : t, n = this.isTargetDragging ? t : s, a = { from: i, to: n }, h = this.params.connectionPreprocessor(a);
+    const o = this.isTargetDragging ? s : t, n = this.isTargetDragging ? t : s, a = { from: o, to: n }, h = this.params.connectionPreprocessor(a);
     h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
   }
   moveDraggingPort(e) {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    }, o = this.canvas.viewport.getViewportMatrix(), n = D(o, s);
+    this.overlayCanvas.updateNode(T.Dragging, {
       x: n.x,
       y: n.y
     });
   }
 }
 class te {
-  constructor(e, t, s, i, n) {
-    o(this, "overlayCanvas");
-    o(this, "staticPortId", null);
-    o(this, "isTargetDragging", !0);
-    o(this, "draggingEdgePayload", null);
-    o(this, "onEdgeReattached", (e) => {
+  constructor(e, t, s, o, n) {
+    i(this, "overlayCanvas");
+    i(this, "staticPortId", null);
+    i(this, "isTargetDragging", !0);
+    i(this, "draggingEdgePayload", null);
+    i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ve(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Fe(
       this.overlayLayer,
       this.viewportStore
     ), z.configure(
@@ -2730,12 +2730,12 @@ class te {
       }
     );
   }
-  static configure(e, t, s, i, n) {
+  static configure(e, t, s, o, n) {
     new te(
       e,
       t,
       s,
-      i,
+      o,
       n
     );
   }
@@ -2743,43 +2743,43 @@ class te {
     const s = this.params.draggingEdgeResolver(e);
     if (s === null)
       return !1;
-    const i = this.canvas.graph.getEdge(s);
-    if (i === null)
+    const o = this.canvas.graph.getEdge(s);
+    if (o === null)
       return !1;
-    const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
+    const n = e === o.from, a = e === o.to, h = n ? o.to : o.from;
     this.staticPortId = h, this.isTargetDragging = a;
     const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
       x: g.x + g.width / 2,
       y: g.y + g.height / 2
-    }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), m = D(u, {
+    }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = D(u, {
       x: l.x - w.x,
       y: l.y - w.y
-    }), v = D(u, {
+    }), x = D(u, {
       x: t.x - w.x,
       y: t.y - w.y
     });
     this.draggingEdgePayload = {
       id: s,
-      from: i.from,
-      to: i.to,
-      shape: i.shape,
-      priority: i.priority
+      from: o.from,
+      to: o.to,
+      shape: o.shape,
+      priority: o.priority
     }, this.canvas.removeEdge(s);
-    const E = {
-      overlayId: b.Static,
-      portCoords: m,
+    const A = {
+      overlayId: T.Static,
+      portCoords: y,
       portDirection: c.direction
-    }, A = {
-      overlayId: b.Dragging,
-      portCoords: v,
+    }, S = {
+      overlayId: T.Dragging,
+      portCoords: x,
       portDirection: d.direction
-    }, [R, T] = this.isTargetDragging ? [E, A] : [A, E];
-    this.overlayCanvas.addNode(F(R)), this.overlayCanvas.addNode(F(T));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(b.Edge) : i.shape;
+    }, [C, P] = this.isTargetDragging ? [A, S] : [S, A];
+    this.overlayCanvas.addNode(B(C)), this.overlayCanvas.addNode(B(P));
+    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.Edge) : o.shape;
     return this.overlayCanvas.addEdge({
-      id: b.Edge,
-      from: R.overlayId,
-      to: T.overlayId,
+      id: T.Edge,
+      from: C.overlayId,
+      to: P.overlayId,
       shape: N
     }), !0;
   }
@@ -2790,15 +2790,15 @@ class te {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    }, o = this.canvas.viewport.getViewportMatrix(), n = D(o, s);
+    this.overlayCanvas.updateNode(T.Dragging, {
       x: n.x,
       y: n.y
     });
   }
   tryCreateConnection(e) {
-    const t = xe(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
+    const t = Ee(this.canvas.graph, e);
+    if (this.overlayCanvas.removeEdge(T.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -2809,10 +2809,10 @@ class te {
       });
       return;
     }
-    const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
+    const [s, o] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
       id: n.id,
       from: s,
-      to: i,
+      to: o,
       shape: n.shape,
       priority: n.priority
     }, h = this.params.connectionPreprocessor(a);
@@ -2851,7 +2851,7 @@ class re {
 }
 class se {
   constructor(e, t) {
-    o(this, "applyScheduled", !1);
+    i(this, "applyScheduled", !1);
     this.canvas = e, this.layoutAlgorithm = t, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
       this.scheduleApply();
     }), this.canvas.graph.onBeforeNodeRemoved.subscribe(() => {
@@ -2879,7 +2879,7 @@ class se {
     });
   }
 }
-class xt {
+class Pt {
   static configure(e, t) {
     const s = t.applyOn;
     switch (s.type) {
@@ -2901,10 +2901,10 @@ class xt {
     }
   }
 }
-class St {
+class Tt {
   constructor(e, t) {
-    o(this, "previousTimeStamp");
-    o(this, "step", (e) => {
+    i(this, "previousTimeStamp");
+    i(this, "step", (e) => {
       if (this.previousTimeStamp === void 0)
         this.previousTimeStamp = e;
       else {
@@ -2917,51 +2917,51 @@ class St {
   }
 }
 class oe {
-  constructor(e, t, s, i) {
-    o(this, "step", (e) => {
+  constructor(e, t, s, o) {
+    i(this, "step", (e) => {
       this.algorithm.calculateNextCoordinates(
         this.canvas.graph,
         e
-      ).forEach((s, i) => {
-        this.staticNodes.has(i) || this.canvas.updateNode(i, { x: s.x, y: s.y });
+      ).forEach((s, o) => {
+        this.staticNodes.has(o) || this.canvas.updateNode(o, { x: s.x, y: s.y });
       });
     });
-    this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = i, new St(this.win, this.step);
+    this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = o, new Tt(this.win, this.step);
   }
-  static configure(e, t, s, i) {
-    new oe(e, t, s, i);
+  static configure(e, t, s, o) {
+    new oe(e, t, s, o);
   }
 }
-const Pt = () => {
+const Ct = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, H = () => {
+}, Y = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
 }, pe = () => {
-  const r = H();
+  const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class bt {
+class Dt {
   constructor(e) {
-    o(this, "background", H());
-    o(this, "main", H());
-    o(this, "overlayConnectablePorts", pe());
-    o(this, "overlayDraggableEdges", pe());
-    o(this, "host", Pt());
+    i(this, "background", Y());
+    i(this, "main", Y());
+    i(this, "overlayConnectablePorts", pe());
+    i(this, "overlayDraggableEdges", pe());
+    i(this, "host", Ct());
     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 j = (r) => () => r, we = j(0), Tt = () => {
+const G = (r) => () => r, we = G(0), Nt = () => {
   let r = 0;
   return () => r++;
-}, Dt = (r, e) => {
+}, Mt = (r, e) => {
   let t = we, s = we;
-  const i = Tt();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = j(r)), typeof e == "number" && (s = j(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+  const o = Nt();
+  return r === "incremental" && (t = o), e === "incremental" && (s = o), typeof r == "number" && (t = G(r)), typeof e == "number" && (s = G(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
@@ -2970,7 +2970,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
     return r;
   switch (r.type) {
     case "straight":
-      return () => new gt({
+      return () => new wt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2984,7 +2984,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new lt({
+      return () => new pt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2997,7 +2997,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new ut({
+      return () => new ft({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3010,7 +3010,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Me({
+      return () => new Ne({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3021,7 +3021,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new ct({
+      return () => new ut({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3035,15 +3035,15 @@ const j = (r) => () => r, we = j(0), Tt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, Nt = (r) => {
-  var t, s, i, n, a;
-  const e = Dt(
+}, Lt = (r) => {
+  var t, s, o, n, a;
+  const e = Mt(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? Se,
+      centerFn: ((o = r.nodes) == null ? void 0 : o.centerFn) ?? Se,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
@@ -3054,39 +3054,41 @@ const j = (r) => () => r, we = j(0), Tt = () => {
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Mt = (r) => {
-  var u, w, m, v, E;
-  const e = ((u = r.events) == null ? void 0 : u.onNodeDrag) ?? (() => {
-  }), t = r.nodeDragVerifier ?? (() => !0), s = ((w = r.events) == null ? void 0 : w.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (m = r.mouse) == null ? void 0 : m.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (A) => A.button === 0, g = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, l = g !== void 0 ? g : (A) => A.button === 0;
+}, Rt = (r) => {
+  var w, y, x, A, S, C;
+  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
+  }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
+  }), s = r.nodeDragVerifier ?? (() => !0), o = ((x = r.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
+  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (A = r.mouse) == null ? void 0 : A.dragCursor, d = h !== void 0 ? h : "grab", c = (S = r.mouse) == null ? void 0 : S.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (C = r.mouse) == null ? void 0 : C.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
   return {
-    moveOnTop: i,
-    moveEdgesOnTop: n,
-    dragCursor: h,
+    moveOnTop: n,
+    moveEdgesOnTop: a,
+    dragCursor: d,
     gridSize: r.gridSize ?? null,
-    mouseDownEventVerifier: c,
-    mouseUpEventVerifier: l,
-    onNodeDrag: e,
-    nodeDragVerifier: t,
-    onNodeDragFinished: s
+    mouseDownEventVerifier: g,
+    mouseUpEventVerifier: u,
+    onNodeDragStarted: e,
+    onNodeDrag: t,
+    nodeDragVerifier: s,
+    onNodeDragFinished: o
   };
-}, Lt = (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, i = r.maxY !== null ? r.maxY : 1 / 0;
+}, Ft = (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;
     a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
     const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
     a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
-    const g = n.canvasHeight * n.prevTransform.scale, l = i - g;
+    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 };
   };
-}, Rt = (r) => {
-  const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
+}, Vt = (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;
     let d = h.scale, c = h.x, g = h.y;
-    if (h.scale > i && h.scale > a.scale) {
-      d = Math.max(a.scale, i), c = a.x, g = a.y;
+    if (h.scale > o && h.scale > a.scale) {
+      d = Math.max(a.scale, o), c = a.x, g = a.y;
       const l = (d - a.scale) / (h.scale - a.scale);
       c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
     }
@@ -3101,7 +3103,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
       y: g
     };
   };
-}, Ct = (r) => (e) => r.reduce(
+}, It = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3114,39 +3116,39 @@ const j = (r) => () => r, we = j(0), Tt = () => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Rt({
+      return Vt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Lt({
+      return Ft({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, me = (r) => {
-  var m, v, E, A, R, T, N, $, ne, ae, he, de;
-  const e = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
-  let i;
-  s !== void 0 ? Array.isArray(s) ? i = Ct(
+}, ye = (r) => {
+  var y, x, A, S, C, P, N, V, ne, ae, he, de;
+  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  let o;
+  s !== void 0 ? Array.isArray(s) ? o = It(
     s.map(
       (M) => fe(M)
     )
-  ) : i = fe(s) : i = (M) => M.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 = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onTransformChange) ?? (() => {
-  }), d = (R = r == null ? void 0 : r.shift) == null ? void 0 : R.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, g = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, l = g !== void 0 ? g : (M) => M.button === 0, u = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
+  ) : o = fe(s) : o = (M) => M.nextTransform;
+  const n = ((x = r == null ? void 0 : r.shift) == null ? void 0 : x.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onBeforeTransformChange) ?? (() => {
+  }), h = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
+  }), d = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.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 = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: (($ = r == null ? void 0 : r.events) == null ? void 0 : $.onTransformStarted) ?? (() => {
+    onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((ne = r == null ? void 0 : r.events) == null ? void 0 : ne.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
-    transformPreprocessor: i,
+    transformPreprocessor: o,
     shiftCursor: n,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l,
@@ -3157,32 +3159,32 @@ const j = (r) => () => r, we = j(0), Tt = () => {
     onResizeTransformFinished: ((de = r == null ? void 0 : r.events) == null ? void 0 : de.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Vt = (r, e) => {
+}, $t = (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;
-}, $t = (r) => r instanceof SVGElement ? r : Vt(
+}, Ut = (r) => r instanceof SVGElement ? r : $t(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), It = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = $t(r.renderer ?? {});
+), Bt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = Ut(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
-    renderer: i,
+    renderer: o,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, Ut = (r, e, t) => {
+}, Ot = (r, e, t) => {
   var c, g, l;
-  const s = () => "direct", i = (u) => u, n = (u) => u.button === 0, a = () => {
+  const s = () => "direct", o = (u) => u, n = (u) => u.button === 0, a = () => {
   }, h = () => {
   }, d = () => {
   };
   return {
     connectionTypeResolver: r.connectionTypeResolver ?? s,
-    connectionPreprocessor: r.connectionPreprocessor ?? i,
+    connectionPreprocessor: r.connectionPreprocessor ?? o,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
     onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
@@ -3191,9 +3193,9 @@ const j = (r) => () => r, we = j(0), Tt = () => {
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? ie(r.edgeShape) : e
   };
-}, Bt = (r, e) => {
+}, Wt = (r, e) => {
   var c, g, l;
-  const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, i = (u) => u.button === 0, n = (u) => {
+  const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, o = (u) => u.button === 0, n = (u) => {
     const w = e.getPortAdjacentEdgeIds(u);
     return w.length > 0 ? w[w.length - 1] : null;
   }, a = () => {
@@ -3203,17 +3205,17 @@ const j = (r) => () => r, we = j(0), Tt = () => {
   return {
     connectionPreprocessor: r.connectionPreprocessor ?? t,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? o,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
     draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ie(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
   };
-}, Ft = (r) => ({
+}, kt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Ot = (r) => {
+}), zt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3222,71 +3224,48 @@ const j = (r) => () => r, we = j(0), Tt = () => {
     })
   };
 };
-class Wt extends Error {
+class Ht extends Error {
   constructor() {
     super(...arguments);
-    o(this, "name", "CanvasBuilderError");
-  }
-}
-class kt {
-  constructor(e, t) {
-    this.coordinates = e, this.rand = t;
-  }
-  getVector(e, t) {
-    const s = this.coordinates.get(e), i = this.coordinates.get(t), n = i.x - s.x, a = i.y - s.y, h = n * n + a * a;
-    if (h === 0) {
-      const l = this.rand() * 2 * Math.PI;
-      return { ex: Math.cos(l), ey: Math.sin(l), d2: 1, d: 1 };
-    }
-    const d = Math.sqrt(h), c = n / d, g = a / d;
-    return { ex: c, ey: g, d2: h, d };
+    i(this, "name", "CanvasBuilderError");
   }
 }
-class $e {
+class Ve {
   constructor(e, t, s) {
-    o(this, "dtSec");
-    o(this, "k");
-    o(this, "nodeMass");
-    o(this, "edgeEquilibriumLength");
-    o(this, "edgeStiffness");
-    o(this, "effectiveDistance");
-    this.graph = e, this.currentCoords = t, this.params = s, this.dtSec = this.params.dtSec, this.k = this.params.nodeCharge * this.params.nodeCharge, this.nodeMass = this.params.nodeMass, this.edgeEquilibriumLength = this.params.edgeEquilibriumLength, this.edgeStiffness = this.params.edgeStiffness, this.effectiveDistance = this.params.effectiveDistance;
-  }
-  next() {
+    i(this, "dt");
+    i(this, "nodeMass");
+    i(this, "edgeEquilibriumLength");
+    i(this, "edgeStiffness");
+    i(this, "nodeForcesApplicationStrategy");
+    i(this, "distanceVectorGenerator");
+    this.graph = e, this.currentCoords = t, this.dt = s.dtSec, this.nodeMass = s.nodeMass, this.edgeEquilibriumLength = s.edgeEquilibriumLength, this.edgeStiffness = s.edgeStiffness, this.distanceVectorGenerator = s.distanceVectorGenerator, this.nodeForcesApplicationStrategy = s.nodeForcesApplicationStrategy;
+  }
+  apply() {
     let e = 0;
-    const t = /* @__PURE__ */ new Map(), s = this.graph.getAllNodeIds();
-    s.forEach((a) => {
-      t.set(a, { x: 0, y: 0 });
-    });
-    const i = new kt(
-      this.currentCoords,
-      this.params.rand
-    ), n = s.length;
-    for (let a = 0; a < n; a++) {
-      const h = s[a];
-      for (let d = a + 1; d < n; d++) {
-        const c = s[d], g = i.getVector(h, c);
-        if (g.d > this.effectiveDistance)
-          continue;
-        const l = this.k / g.d2, u = l * g.ex, w = l * g.ey, m = u / 2, v = w / 2, E = t.get(h), A = t.get(c);
-        E.x -= m, E.y -= v, A.x += m, A.y += v;
-      }
-    }
-    return this.graph.getAllEdgeIds().forEach((a) => {
-      const h = this.graph.getEdge(a), d = this.graph.getPort(h.from), c = this.graph.getPort(h.to), g = i.getVector(d.nodeId, c.nodeId), u = (g.d - this.edgeEquilibriumLength) * this.edgeStiffness / 2, w = g.ex * u, m = g.ey * u, v = t.get(d.nodeId), E = t.get(c.nodeId);
-      v.x += w, v.y += m, E.x -= w, E.y -= m;
-    }), this.currentCoords.forEach((a, h) => {
-      const d = t.get(h), c = {
-        x: d.x / this.nodeMass * this.dtSec,
-        y: d.y / this.nodeMass * this.dtSec
-      }, g = c.x * this.dtSec, l = c.y * this.dtSec;
-      a.x += g, a.y += l, e = Math.max(e, Math.sqrt(g * g + l * l));
+    const t = /* @__PURE__ */ new Map();
+    return this.graph.getAllNodeIds().forEach((o) => {
+      t.set(o, { x: 0, y: 0 });
+    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, t), this.applyEdgeForces(t), this.currentCoords.forEach((o, n) => {
+      const a = t.get(n), h = {
+        x: a.x / this.nodeMass * this.dt,
+        y: a.y / this.nodeMass * this.dt
+      }, d = h.x * this.dt, c = h.y * this.dt;
+      o.x += d, o.y += c, e = Math.max(e, Math.sqrt(d * d + c * c));
     }), e;
   }
+  applyEdgeForces(e) {
+    this.graph.getAllEdgeIds().forEach((t) => {
+      const s = this.graph.getEdge(t), o = this.graph.getPort(s.from), n = this.graph.getPort(s.to), a = this.currentCoords.get(o.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
+        a,
+        h
+      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(o.nodeId), y = e.get(n.nodeId);
+      w.x += l, w.y += u, y.x -= l, y.y -= u;
+    });
+  }
 }
 const Ie = (r, e, t) => {
-  const s = /* @__PURE__ */ new Map(), i = r.getAllNodeIds(), n = Math.sqrt(i.length) * t;
-  return i.forEach((a) => {
+  const s = /* @__PURE__ */ new Map(), o = r.getAllNodeIds(), n = Math.sqrt(o.length) * t;
+  return o.forEach((a) => {
     const h = r.getNode(a);
     s.set(a, {
       x: h.x ?? n * e(),
@@ -3294,9 +3273,430 @@ const Ie = (r, e, t) => {
     });
   }), s;
 };
-class zt {
+class $e {
   constructor(e) {
-    this.params = e;
+    i(this, "PI2", 2 * Math.PI);
+    this.rand = e;
+  }
+  create(e, t) {
+    const s = t.x - e.x, o = t.y - e.y, n = s * s + o * o;
+    if (n === 0) {
+      const c = this.PI2 * this.rand();
+      return {
+        ex: Math.cos(c),
+        ey: Math.sin(c),
+        d: 0
+      };
+    }
+    const a = Math.sqrt(n), h = s / a, d = o / a;
+    return { ex: h, ey: d, d: a };
+  }
+}
+const Ue = (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 Xt {
+  constructor(e) {
+    i(this, "effectiveDistance");
+    i(this, "nodeCharge");
+    i(this, "distanceVectorGenerator");
+    i(this, "maxForce");
+    this.effectiveDistance = e.effectiveDistance, this.nodeCharge = e.nodeCharge, this.distanceVectorGenerator = e.distanceVectorGenerator, this.maxForce = e.maxForce;
+  }
+  apply(e, t) {
+    const s = Array.from(t.keys()), o = s.length;
+    for (let n = 0; n < o; n++) {
+      const a = s[n];
+      for (let h = n + 1; h < o; h++) {
+        const d = s[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
+          c,
+          g
+        );
+        if (l.d > this.effectiveDistance)
+          continue;
+        const u = Ue({
+          coefficient: 1,
+          sourceCharge: this.nodeCharge,
+          targetCharge: this.nodeCharge,
+          distance: l.d,
+          maxForce: this.maxForce
+        }), w = u * l.ex, y = u * l.ey, x = t.get(a), A = t.get(d);
+        x.x -= w, x.y -= y, A.x += w, A.y += y;
+      }
+    }
+  }
+}
+const Yt = (r) => {
+  if (r.size === 0)
+    return {
+      centerX: 0,
+      centerY: 0,
+      radius: 0
+    };
+  let e = 1 / 0, t = -1 / 0, s = 1 / 0, o = -1 / 0;
+  r.forEach((d) => {
+    e = Math.min(e, d.x), t = Math.max(t, d.x), s = Math.min(s, d.y), o = Math.max(o, d.y);
+  });
+  const n = t - e, a = o - s, h = Math.max(n, a);
+  return {
+    centerX: (e + t) / 2,
+    centerY: (s + o) / 2,
+    radius: h / 2
+  };
+};
+class Gt {
+  constructor(e) {
+    i(this, "root");
+    i(this, "leaves", /* @__PURE__ */ new Map());
+    i(this, "coords");
+    i(this, "areaRadiusThreshold");
+    i(this, "nodeMass");
+    i(this, "nodeCharge");
+    i(this, "sortedParentNodes", []);
+    this.coords = e.coords, this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.root = {
+      nodeIds: new Set(e.coords.keys()),
+      box: e.box,
+      totalMass: 0,
+      totalCharge: 0,
+      chargeCenter: {
+        x: 0,
+        y: 0
+      },
+      parent: null,
+      lb: null,
+      lt: null,
+      rb: null,
+      rt: null
+    };
+    let t = [this.root];
+    for (; t.length > 0; ) {
+      const s = [];
+      for (; t.length > 0; ) {
+        const o = t.pop();
+        this.processNode(o).forEach((a) => {
+          s.push(a);
+        });
+      }
+      t = s;
+    }
+    this.sortedParentNodes.reverse().forEach((s) => {
+      let o = 0, n = 0, a = 0, h = 0;
+      s.lb !== null && (a += s.lb.totalMass, h += s.lb.totalCharge, o += s.lb.chargeCenter.x * s.lb.totalCharge, n += s.lb.chargeCenter.y * s.lb.totalCharge), s.lt !== null && (a += s.lt.totalMass, h += s.lt.totalCharge, o += s.lt.chargeCenter.x * s.lt.totalCharge, n += s.lt.chargeCenter.y * s.lt.totalCharge), s.rb !== null && (a += s.rb.totalMass, h += s.rb.totalCharge, o += s.rb.chargeCenter.x * s.rb.totalCharge, n += s.rb.chargeCenter.y * s.rb.totalCharge), s.rt !== null && (a += s.rt.totalMass, h += s.rt.totalCharge, o += s.rt.chargeCenter.x * s.rt.totalCharge, n += s.rt.chargeCenter.y * s.rt.totalCharge), s.totalMass = a, s.totalCharge = h, s.chargeCenter.x = o / h, s.chargeCenter.y = n / h;
+    });
+  }
+  getRoot() {
+    return this.root;
+  }
+  getLeaf(e) {
+    return this.leaves.get(e);
+  }
+  processNode(e) {
+    if (e.nodeIds.size < 2)
+      return this.setLeaf(e), [];
+    const { centerX: t, centerY: s, radius: o } = e.box;
+    if (o < this.areaRadiusThreshold)
+      return this.setLeaf(e), [];
+    this.sortedParentNodes.push(e);
+    const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = o / 2;
+    e.nodeIds.forEach((u) => {
+      const { x: w, y } = this.coords.get(u);
+      w < t ? y < s ? d.add(u) : h.add(u) : y < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
+    });
+    const g = {
+      parent: e,
+      lb: null,
+      lt: null,
+      rb: null,
+      rt: null
+    }, l = [];
+    if (n.size > 0) {
+      const u = {
+        nodeIds: n,
+        totalMass: 0,
+        totalCharge: 0,
+        chargeCenter: {
+          x: 0,
+          y: 0
+        },
+        box: {
+          centerX: t + c,
+          centerY: s + c,
+          radius: c
+        },
+        ...g
+      };
+      e.rt = u, l.push(u);
+    }
+    if (a.size > 0) {
+      const u = {
+        nodeIds: a,
+        totalMass: 0,
+        totalCharge: 0,
+        chargeCenter: {
+          x: 0,
+          y: 0
+        },
+        box: {
+          centerX: t + c,
+          centerY: s - c,
+          radius: c
+        },
+        ...g
+      };
+      e.rb = u, l.push(u);
+    }
+    if (h.size > 0) {
+      const u = {
+        nodeIds: h,
+        totalMass: 0,
+        totalCharge: 0,
+        chargeCenter: {
+          x: 0,
+          y: 0
+        },
+        box: {
+          centerX: t - c,
+          centerY: s + c,
+          radius: c
+        },
+        ...g
+      };
+      e.lt = u, l.push(u);
+    }
+    if (d.size > 0) {
+      const u = {
+        nodeIds: d,
+        totalMass: 0,
+        totalCharge: 0,
+        chargeCenter: {
+          x: 0,
+          y: 0
+        },
+        box: {
+          centerX: t - c,
+          centerY: s - c,
+          radius: c
+        },
+        ...g
+      };
+      e.lb = u, l.push(u);
+    }
+    return l;
+  }
+  setLeaf(e) {
+    e.totalMass = this.nodeMass * e.nodeIds.size, e.totalCharge = this.nodeCharge * e.nodeIds.size, e.chargeCenter = this.calculateLeafChargeCenter(e.nodeIds), e.nodeIds.forEach((t) => {
+      this.leaves.set(t, e);
+    });
+  }
+  calculateLeafChargeCenter(e) {
+    if (e.size === 0)
+      return {
+        x: 0,
+        y: 0
+      };
+    let t = 0, s = 0;
+    return e.forEach((o) => {
+      const n = this.coords.get(o);
+      t += n.x, s += n.y;
+    }), { x: t / e.size, y: s / e.size };
+  }
+}
+class jt {
+  constructor(e) {
+    i(this, "areaRadiusThreshold");
+    i(this, "nodeMass");
+    i(this, "nodeCharge");
+    i(this, "theta");
+    i(this, "distanceVectorGenerator");
+    i(this, "nodeForceCoefficient");
+    i(this, "maxForce");
+    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 = Yt(e), o = new Gt({
+      box: s,
+      coords: e,
+      areaRadiusThreshold: this.areaRadiusThreshold,
+      nodeMass: this.nodeMass,
+      nodeCharge: this.nodeCharge
+    });
+    e.forEach((n, a) => {
+      const h = this.calculateForceForNode(
+        o.getLeaf(a),
+        a,
+        e
+      ), d = t.get(a);
+      this.applyForce(d, h);
+    });
+  }
+  calculateForceForNode(e, t, s) {
+    const o = s.get(t), n = { x: 0, y: 0 };
+    e.nodeIds.forEach((h) => {
+      if (h !== t) {
+        const d = s.get(h), c = this.calculateNodeRepulsiveForce({
+          sourceCharge: this.nodeCharge,
+          targetCharge: this.nodeCharge,
+          sourceCoords: d,
+          targetCoords: o
+        });
+        this.applyForce(n, c);
+      }
+    });
+    let a = e;
+    for (; a !== null; ) {
+      const h = a.parent;
+      if (h !== null) {
+        const d = this.distanceVectorGenerator.create(
+          h.chargeCenter,
+          o
+        );
+        h.box.radius * 2 < d.d * this.theta ? (this.tryApplyFarForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.lb,
+          current: a
+        }), this.tryApplyFarForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.rb,
+          current: a
+        }), this.tryApplyFarForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.rt,
+          current: a
+        }), this.tryApplyFarForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.lt,
+          current: a
+        })) : (this.tryApplyNearForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.lb,
+          current: a,
+          nodesCoords: s
+        }), this.tryApplyNearForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.rb,
+          current: a,
+          nodesCoords: s
+        }), this.tryApplyNearForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.rt,
+          current: a,
+          nodesCoords: s
+        }), this.tryApplyNearForce({
+          totalForce: n,
+          targetCoords: o,
+          target: h.lt,
+          current: a,
+          nodesCoords: s
+        }));
+      }
+      a = a.parent;
+    }
+    return n;
+  }
+  calculateExactForce(e, t, s) {
+    const o = { x: 0, y: 0 }, n = [e];
+    for (; n.length > 0; ) {
+      const a = n.pop();
+      a.nodeIds.forEach((h) => {
+        const d = s.get(h), c = this.calculateNodeRepulsiveForce({
+          sourceCharge: this.nodeCharge,
+          targetCharge: this.nodeCharge,
+          sourceCoords: d,
+          targetCoords: t
+        });
+        this.applyForce(o, c);
+      }), a.lb !== null && n.push(a.lb), a.rb !== null && n.push(a.rb), a.lt !== null && n.push(a.lt), a.rt !== null && n.push(a.rt);
+    }
+    return o;
+  }
+  calculateApproximateForce(e, t) {
+    return this.calculateNodeRepulsiveForce({
+      sourceCharge: this.nodeCharge,
+      targetCharge: e.totalCharge,
+      sourceCoords: e.chargeCenter,
+      targetCoords: t
+    });
+  }
+  calculateNodeRepulsiveForce(e) {
+    const t = this.distanceVectorGenerator.create(
+      e.sourceCoords,
+      e.targetCoords
+    ), s = Ue({
+      coefficient: this.nodeForceCoefficient,
+      sourceCharge: e.sourceCharge,
+      targetCharge: e.targetCharge,
+      distance: t.d,
+      maxForce: this.maxForce
+    });
+    return {
+      x: s * t.ex,
+      y: s * t.ey
+    };
+  }
+  applyForce(e, t) {
+    e.x += t.x, e.y += t.y;
+  }
+  tryApplyFarForce(e) {
+    if (e.target !== null && e.target !== e.current) {
+      const t = this.calculateApproximateForce(
+        e.target,
+        e.targetCoords
+      );
+      this.applyForce(e.totalForce, t);
+    }
+  }
+  tryApplyNearForce(e) {
+    if (e.target !== null && e.target !== e.current) {
+      const t = this.calculateExactForce(
+        e.target,
+        e.targetCoords,
+        e.nodesCoords
+      );
+      this.applyForce(e.totalForce, t);
+    }
+  }
+}
+const Be = (r) => r.theta !== 0 ? new jt({
+  nodeCharge: r.nodeCharge,
+  nodeForceCoefficient: r.nodeForceCoefficient,
+  distanceVectorGenerator: r.distanceVectorGenerator,
+  maxForce: r.maxForce,
+  theta: r.theta,
+  nodeMass: r.nodeMass,
+  areaRadiusThreshold: r.areaRadiusThreshold
+}) : new Xt({
+  nodeCharge: r.nodeCharge,
+  nodeForceCoefficient: r.nodeForceCoefficient,
+  distanceVectorGenerator: r.distanceVectorGenerator,
+  effectiveDistance: r.effectiveDistance,
+  maxForce: r.maxForce
+});
+class Kt {
+  constructor(e) {
+    i(this, "distanceVectorGenerator");
+    i(this, "nodeForcesApplicationStrategy");
+    this.params = e, this.distanceVectorGenerator = new $e(
+      this.params.rand
+    ), this.nodeForcesApplicationStrategy = Be({
+      distanceVectorGenerator: this.distanceVectorGenerator,
+      nodeCharge: this.params.nodeCharge,
+      effectiveDistance: this.params.effectiveDistance,
+      maxForce: this.params.maxForce,
+      nodeForceCoefficient: this.params.nodeForceCoefficient,
+      theta: this.params.barnesHutTheta,
+      areaRadiusThreshold: this.params.barnesHutAreaRadiusThreshold,
+      nodeMass: this.params.nodeMass
+    });
   }
   calculateCoordinates(e) {
     const t = Ie(
@@ -3304,22 +3704,36 @@ class zt {
       this.params.rand,
       this.params.edgeEquilibriumLength
     );
-    for (let s = 0; s < this.params.maxIterations && !(new $e(e, t, {
-      rand: this.params.rand,
-      dtSec: this.params.dtSec,
-      nodeMass: this.params.nodeMass,
-      nodeCharge: this.params.nodeCharge,
-      edgeEquilibriumLength: this.params.edgeEquilibriumLength,
-      effectiveDistance: this.params.effectiveDistance,
-      edgeStiffness: this.params.edgeStiffness
-    }).next() < this.params.convergenceDelta); s++)
+    for (let s = 0; s < this.params.maxIterations && !(new Ve(
+      e,
+      t,
+      {
+        distanceVectorGenerator: this.distanceVectorGenerator,
+        nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
+        dtSec: this.params.dtSec,
+        nodeMass: this.params.nodeMass,
+        edgeEquilibriumLength: this.params.edgeEquilibriumLength,
+        edgeStiffness: this.params.edgeStiffness
+      }
+    ).apply() < this.params.convergenceDelta); s++)
       ;
     return t;
   }
 }
-class Xt {
+class Qt {
   constructor(e) {
-    this.params = e;
+    i(this, "distanceVectorGenerator");
+    i(this, "nodeForcesApplicationStrategy");
+    this.params = e, this.distanceVectorGenerator = new $e(e.rand), this.nodeForcesApplicationStrategy = Be({
+      distanceVectorGenerator: this.distanceVectorGenerator,
+      nodeCharge: this.params.nodeCharge,
+      effectiveDistance: this.params.effectiveDistance,
+      maxForce: this.params.maxForce,
+      nodeForceCoefficient: this.params.nodeForceCoefficient,
+      theta: this.params.barnesHutTheta,
+      areaRadiusThreshold: this.params.barnesHutAreaRadiusThreshold,
+      nodeMass: this.params.nodeMass
+    });
   }
   calculateNextCoordinates(e, t) {
     const s = Ie(
@@ -3327,126 +3741,144 @@ class Xt {
       this.params.rand,
       this.params.edgeEquilibriumLength
     );
-    return new $e(e, s, {
-      rand: this.params.rand,
-      dtSec: Math.min(t, this.params.maxTimeDeltaSec),
-      nodeMass: this.params.nodeMass,
-      nodeCharge: this.params.nodeCharge,
-      edgeEquilibriumLength: this.params.edgeEquilibriumLength,
-      effectiveDistance: this.params.effectiveDistance,
-      edgeStiffness: this.params.edgeStiffness
-    }).next() < this.params.convergenceDelta && !e.getAllNodeIds().some((h) => {
+    return new Ve(
+      e,
+      s,
+      {
+        distanceVectorGenerator: this.distanceVectorGenerator,
+        nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
+        dtSec: Math.min(t, this.params.maxTimeDeltaSec),
+        nodeMass: this.params.nodeMass,
+        edgeEquilibriumLength: this.params.edgeEquilibriumLength,
+        edgeStiffness: this.params.edgeStiffness
+      }
+    ).apply() < this.params.convergenceDelta && !e.getAllNodeIds().some((h) => {
       const d = e.getNode(h);
       return d.x === null || d.y === null;
     }) ? /* @__PURE__ */ new Map() : s;
   }
 }
-const Ue = (r) => {
-  let e = 1779033703, t = 3144134277, s = 1013904242, i = 2773480762;
+const Oe = (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 = i ^ Math.imul(s ^ a, 951274213), i = e ^ Math.imul(i ^ a, 2716044179);
-  return e = Math.imul(s ^ e >>> 18, 597399067), t = Math.imul(i ^ t >>> 22, 2869860233), s = Math.imul(e ^ s >>> 17, 951274213), i = Math.imul(t ^ i >>> 19, 2716044179), e ^= t ^ s ^ i, t ^= e, s ^= e, i ^= e, [e >>> 0, t >>> 0, s >>> 0, i >>> 0];
-}, Be = (r, e, t, s) => function() {
+    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];
+}, We = (r, e, t, s) => function() {
   r |= 0, e |= 0, t |= 0, s |= 0;
-  const i = (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 + i | 0, (i >>> 0) / 4294967296;
-}, S = Object.freeze({
+  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;
+}, v = Object.freeze({
   seed: "HTMLGraph is awesome",
-  maxTimeDeltaSec: 0.1,
+  maxTimeDeltaSec: 0.01,
   nodeCharge: 1e5,
   nodeMass: 1,
   edgeEquilibriumLength: 300,
   edgeStiffness: 1e3,
   effectiveDistance: 1e3,
-  dtSec: 0.02,
-  maxIterations: 100,
-  convergenceDelta: 1e-3
-}), Yt = (r) => {
-  var e;
+  dtSec: 0.01,
+  maxIterations: 1e3,
+  convergenceDelta: 1,
+  maxForce: 1e7,
+  nodeForceCoefficient: 1,
+  barnesHutAreaRadiusThreshold: 0.01,
+  barnesHutTheta: 1
+}), Zt = (r) => {
+  var e, t, s;
   switch ((e = r == null ? void 0 : r.algorithm) == null ? void 0 : e.type) {
     case "custom":
       return r.algorithm.instance;
     default: {
-      const t = r == null ? void 0 : r.algorithm, s = Ue((t == null ? void 0 : t.seed) ?? S.seed), i = Be(s[0], s[1], s[2], s[3]);
-      return new Xt({
-        rand: i,
-        maxTimeDeltaSec: (t == null ? void 0 : t.maxTimeDeltaSec) ?? S.maxTimeDeltaSec,
-        nodeCharge: (t == null ? void 0 : t.nodeCharge) ?? S.nodeCharge,
-        nodeMass: (t == null ? void 0 : t.nodeMass) ?? S.nodeMass,
-        edgeEquilibriumLength: (t == null ? void 0 : t.edgeEquilibriumLength) ?? S.edgeEquilibriumLength,
-        effectiveDistance: S.effectiveDistance,
-        edgeStiffness: (t == null ? void 0 : t.edgeStiffness) ?? S.edgeStiffness,
-        convergenceDelta: (t == null ? void 0 : t.convergenceDelta) ?? S.convergenceDelta
+      const o = r == null ? void 0 : r.algorithm, n = Oe((o == null ? void 0 : o.seed) ?? v.seed), a = We(n[0], n[1], n[2], n[3]);
+      return new Qt({
+        rand: a,
+        maxTimeDeltaSec: (o == null ? void 0 : o.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
+        nodeCharge: (o == null ? void 0 : o.nodeCharge) ?? v.nodeCharge,
+        nodeMass: (o == null ? void 0 : o.nodeMass) ?? v.nodeMass,
+        edgeEquilibriumLength: (o == null ? void 0 : o.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
+        effectiveDistance: v.effectiveDistance,
+        edgeStiffness: (o == null ? void 0 : o.edgeStiffness) ?? v.edgeStiffness,
+        convergenceDelta: (o == null ? void 0 : o.convergenceDelta) ?? v.convergenceDelta,
+        maxForce: (o == null ? void 0 : o.maxForce) ?? v.maxForce,
+        nodeForceCoefficient: (o == null ? void 0 : o.nodeForceCoefficient) ?? v.nodeForceCoefficient,
+        barnesHutTheta: ((t = o == null ? void 0 : o.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((s = o == null ? void 0 : o.barnesHut) == null ? void 0 : s.areaRadiusThreshold) ?? v.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, Ht = (r) => r instanceof G ? {
+}, Jt = (r) => r instanceof j ? {
   type: "manual",
   trigger: r
 } : {
   type: "topologyChangeTimeout"
-}, jt = (r) => {
+}, qt = (r) => {
+  var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const e = Ue((r == null ? void 0 : r.seed) ?? S.seed), t = Be(e[0], e[1], e[2], e[3]);
-      return new zt({
-        dtSec: (r == null ? void 0 : r.dtSec) ?? S.dtSec,
-        maxIterations: (r == null ? void 0 : r.maxIterations) ?? S.maxIterations,
-        rand: t,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? S.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? S.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? S.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? S.edgeStiffness,
-        effectiveDistance: (r == null ? void 0 : r.effectiveDistance) ?? S.effectiveDistance,
-        convergenceDelta: (r == null ? void 0 : r.convergenceDelta) ?? S.convergenceDelta
+      const s = Oe((r == null ? void 0 : r.seed) ?? v.seed), o = We(s[0], s[1], s[2], s[3]);
+      return new Kt({
+        dtSec: (r == null ? void 0 : r.dtSec) ?? v.dtSec,
+        maxIterations: (r == null ? void 0 : r.maxIterations) ?? v.maxIterations,
+        rand: o,
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? v.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? v.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? v.edgeStiffness,
+        effectiveDistance: (r == null ? void 0 : r.effectiveDistance) ?? v.effectiveDistance,
+        convergenceDelta: (r == null ? void 0 : r.convergenceDelta) ?? v.convergenceDelta,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? v.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? v.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? v.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? v.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, Gt = (r) => ({
-  algorithm: jt(r == null ? void 0 : r.algorithm),
-  applyOn: Ht(r == null ? void 0 : r.applyOn)
-}), Kt = (r, e) => ({
+}, _t = (r) => ({
+  algorithm: qt(r == null ? void 0 : r.algorithm),
+  applyOn: Jt(r == null ? void 0 : r.applyOn)
+}), er = (r, e) => ({
   ...r,
-  nodeDragVerifier: (t) => (e.add(t), r.nodeDragVerifier(t)),
+  onNodeDragStarted: (t) => {
+    e.add(t), r.onNodeDragStarted(t);
+  },
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Zt = (r, e) => {
+}), tr = (r, e) => {
   r.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.onBeforeClear.subscribe(() => {
     e.clear();
   });
 };
-class qt {
+class or {
   constructor(e) {
-    o(this, "used", !1);
-    o(this, "canvasDefaults", {});
-    o(this, "dragConfig", {});
-    o(this, "transformConfig", {});
-    o(this, "backgroundConfig", {});
-    o(this, "connectablePortsConfig", {});
-    o(this, "draggableEdgesConfig", {});
-    o(this, "virtualScrollConfig");
-    o(this, "layoutConfig", {});
-    o(this, "animatedLayoutConfig", {});
-    o(this, "hasDraggableNodes", !1);
-    o(this, "hasTransformableViewport", !1);
-    o(this, "hasNodeResizeReactiveEdges", !1);
-    o(this, "hasBackground", !1);
-    o(this, "hasUserConnectablePorts", !1);
-    o(this, "hasUserDraggableEdges", !1);
-    o(this, "hasAnimatedLayout", !1);
-    o(this, "hasLayout", !1);
-    o(this, "boxRenderingTrigger", new G());
-    o(this, "graphStore", new Ee());
-    o(this, "viewportStore", new Ge());
-    o(this, "graph", new Re(this.graphStore));
-    o(this, "viewport", new Ce(this.viewportStore));
-    o(this, "window", window);
-    o(this, "animationStaticNodes", /* @__PURE__ */ new Set());
+    i(this, "used", !1);
+    i(this, "canvasDefaults", {});
+    i(this, "dragConfig", {});
+    i(this, "transformConfig", {});
+    i(this, "backgroundConfig", {});
+    i(this, "connectablePortsConfig", {});
+    i(this, "draggableEdgesConfig", {});
+    i(this, "virtualScrollConfig");
+    i(this, "layoutConfig", {});
+    i(this, "animatedLayoutConfig", {});
+    i(this, "hasDraggableNodes", !1);
+    i(this, "hasTransformableViewport", !1);
+    i(this, "hasNodeResizeReactiveEdges", !1);
+    i(this, "hasBackground", !1);
+    i(this, "hasUserConnectablePorts", !1);
+    i(this, "hasUserDraggableEdges", !1);
+    i(this, "hasAnimatedLayout", !1);
+    i(this, "hasLayout", !1);
+    i(this, "boxRenderingTrigger", new j());
+    i(this, "graphStore", new xe());
+    i(this, "viewportStore", new Ze());
+    i(this, "graph", new Le(this.graphStore));
+    i(this, "viewport", new Re(this.viewportStore));
+    i(this, "window", window);
+    i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     this.element = e;
   }
   /**
@@ -3515,21 +3947,21 @@ class qt {
    */
   build() {
     if (this.used)
-      throw new Wt("CanvasBuilder is a single use object");
+      throw new Ht("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new bt(this.element);
-    let t = new ye(
+    const e = new Dt(this.element);
+    let t = new me(
       this.graphStore,
       this.viewportStore,
       e.main
     );
-    this.virtualScrollConfig !== void 0 && (t = new Ye(
+    this.virtualScrollConfig !== void 0 && (t = new je(
       t,
       this.graphStore,
       this.boxRenderingTrigger,
-      Ot(this.virtualScrollConfig)
-    )), t = new He(t, this.graphStore);
-    const s = Nt(this.canvasDefaults), i = new ve(
+      zt(this.virtualScrollConfig)
+    )), t = new Ke(t, this.graphStore);
+    const s = Lt(this.canvasDefaults), o = new ve(
       this.graph,
       this.viewport,
       this.graphStore,
@@ -3538,29 +3970,29 @@ class qt {
       s
     );
     if (this.hasBackground && _.configure(
-      i,
-      It(this.backgroundConfig),
+      o,
+      Bt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && K.configure(i), this.hasDraggableNodes) {
-      let a = Mt(this.dragConfig);
-      this.hasAnimatedLayout && (a = Kt(
+    ), this.hasNodeResizeReactiveEdges && K.configure(o), this.hasDraggableNodes) {
+      let a = Rt(this.dragConfig);
+      this.hasAnimatedLayout && (a = er(
         a,
         this.animationStaticNodes
-      )), Q.configure(
-        i,
+      )), J.configure(
+        o,
         e.main,
         this.window,
         a
       );
     }
     if (this.hasUserConnectablePorts) {
-      const a = Ut(
+      const a = Ot(
         this.connectablePortsConfig,
         s.edges.shapeFactory,
         s.ports.direction
       );
       ee.configure(
-        i,
+        o,
         e.overlayConnectablePorts,
         this.viewportStore,
         this.window,
@@ -3568,12 +4000,12 @@ class qt {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const a = Bt(
+      const a = Wt(
         this.draggableEdgesConfig,
-        i.graph
+        o.graph
       );
       te.configure(
-        i,
+        o,
         e.overlayDraggableEdges,
         this.viewportStore,
         this.window,
@@ -3581,46 +4013,47 @@ class qt {
       );
     }
     this.virtualScrollConfig !== void 0 ? q.configure(
-      i,
+      o,
       e.main,
       this.window,
-      me(this.transformConfig),
+      ye(this.transformConfig),
       this.boxRenderingTrigger,
-      Ft(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && X.configure(
-      i,
+      kt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && H.configure(
+      o,
       e.main,
       this.window,
-      me(this.transformConfig)
-    ), this.hasLayout && xt.configure(
-      i,
-      Gt(this.layoutConfig)
-    ), this.hasAnimatedLayout && (Zt(
-      i.graph,
+      ye(this.transformConfig)
+    ), this.hasLayout && Pt.configure(
+      o,
+      _t(this.layoutConfig)
+    ), this.hasAnimatedLayout && (tr(
+      o.graph,
       this.animationStaticNodes
     ), oe.configure(
-      i,
-      Yt(this.animatedLayoutConfig),
+      o,
+      Zt(this.animatedLayoutConfig),
       this.animationStaticNodes,
       this.window
     ));
     const n = () => {
-      e.destroy(), i.onBeforeDestroy.unsubscribe(n);
+      e.destroy(), o.onBeforeDestroy.unsubscribe(n);
     };
-    return i.onBeforeDestroy.subscribe(n), i;
+    return o.onBeforeDestroy.subscribe(n), o;
   }
 }
 export {
-  ct as BezierEdgeShape,
-  qt as CanvasBuilder,
-  Wt as CanvasBuilderError,
-  P as CanvasError,
-  Me as DirectEdgeShape,
-  G as EventSubject,
-  lt as HorizontalEdgeShape,
-  ft as InteractiveEdgeError,
-  Le as InteractiveEdgeShape,
-  Qt as MidpointEdgeShape,
-  gt as StraightEdgeShape,
-  ut as VerticalEdgeShape
+  ut as BezierEdgeShape,
+  or as CanvasBuilder,
+  Ht as CanvasBuilderError,
+  b as CanvasError,
+  R as ConnectionCategory,
+  Ne as DirectEdgeShape,
+  j as EventSubject,
+  pt as HorizontalEdgeShape,
+  vt as InteractiveEdgeError,
+  Me as InteractiveEdgeShape,
+  sr as MidpointEdgeShape,
+  wt as StraightEdgeShape,
+  ft as VerticalEdgeShape
 };