@html-graph/html-graph 8.19.1 → 8.21.0

package/dist/html-graph.min.js

@@ -1,22 +1,22 @@
-var nt = Object.defineProperty;
-var at = (r, e, t) => e in r ? nt(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => at(r, typeof e != "symbol" ? e + "" : e, t);
-var I = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(I || {});
-const ht = () => {
+var ht = Object.defineProperty;
+var dt = (r, e, t) => e in r ? ht(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => dt(r, typeof e != "symbol" ? e + "" : e, t);
+var U = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(U || {});
+const ct = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, dt = () => {
+}, lt = () => {
   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;
-}, ct = (r) => {
+}, ut = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, lt = (r) => {
+}, gt = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class Ve {
+class Fe {
   constructor(e, t, o) {
-    i(this, "host", ht());
-    i(this, "container", dt());
+    i(this, "host", ct());
+    i(this, "container", lt());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     i(this, "applyTransform", () => {
@@ -27,11 +27,11 @@ class Ve {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    ct(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    ut(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);
-    lt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    gt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -71,9 +71,9 @@ class Ve {
       n,
       h,
       d
-    ), l = this.createEdgeRenderPort(s, a, h, d);
-    let u = I.Line;
-    o.element === s.element ? u = I.PortCycle : o.nodeId === s.nodeId && (u = I.NodeCycle), t.payload.shape.render({ from: c, to: l, category: u });
+    ), u = this.createEdgeRenderPort(s, a, h, d);
+    let l = U.Line;
+    o.element === s.element ? l = U.PortCycle : o.nodeId === s.nodeId && (l = U.NodeCycle), t.payload.shape.render({ from: c, to: u, category: l });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -93,7 +93,7 @@ class Ve {
     };
   }
 }
-class ut {
+class pt {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -109,11 +109,11 @@ class ut {
     return o >= this.xFrom && o <= this.xTo && s >= this.yFrom && s <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
-    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), u = Math.max(n.y, a.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && u >= this.yFrom;
   }
 }
-class gt {
+class wt {
   constructor(e, t, o, s) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -125,8 +125,8 @@ class gt {
         const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
         h && !d ? t.add(a) : !h && d && o.add(a);
       }), this.graphStore.getAllEdgeIds().forEach((a) => {
-        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, u = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(l) || (t.add(l), o.delete(l)), this.renderingBox.hasNode(u) || (t.add(u), o.delete(u))), h && !d ? s.add(a) : !h && d && n.add(a);
+        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), u = this.graphStore.getPort(c.from).nodeId, l = this.graphStore.getPort(c.to).nodeId;
+        h && (this.renderingBox.hasNode(u) || (t.add(u), o.delete(u)), this.renderingBox.hasNode(l) || (t.add(l), o.delete(l))), h && !d ? s.add(a) : !h && d && n.add(a);
       }), n.forEach((a) => {
         this.handleDetachEdge(a);
       }), o.forEach((a) => {
@@ -137,7 +137,7 @@ class gt {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new ut(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new pt(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -191,7 +191,7 @@ class gt {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class pt {
+class yt {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -265,7 +265,7 @@ const C = () => {
   const r = new q();
   return [r, r];
 };
-class Ie {
+class Ue {
   constructor(e, t, o, s) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
@@ -318,7 +318,7 @@ class Ie {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class wt {
+class ft {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -358,13 +358,13 @@ class wt {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class A extends Error {
+class S extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasError");
   }
 }
-const S = Object.freeze({
+const b = Object.freeze({
   accessNonexistingNode: (r) => `Failed to access node with ID ${JSON.stringify(r)} because it does not exist`,
   addNodeWithExistingId: (r) => `Failed to add node with ID ${JSON.stringify(r)} because a node with this ID already exists`,
   addNodeWithElementInUse: (r, e) => `Failed to add node with ID ${JSON.stringify(r)} because its HTML element is already attached to node with ID ${JSON.stringify(e)}`,
@@ -387,7 +387,7 @@ const S = Object.freeze({
   removeNonexistentEdge: (r) => `Failed to remove edge with ID ${JSON.stringify(r)} because it does not exist`,
   accessEdgesForNonexistentPort: (r) => `Failed to access edges for port with ID ${JSON.stringify(r)} because the port does not exist`
 });
-class Fe {
+class $e {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -396,7 +396,7 @@ class Fe {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new wt());
+    i(this, "elementPorts", new ft());
     i(this, "edgesElementsMap", /* @__PURE__ */ new Map());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
@@ -432,16 +432,16 @@ class Fe {
   getNode(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new A(S.accessNonexistingNode(e));
+      throw new S(b.accessNonexistingNode(e));
     return t;
   }
   addNode(e) {
     if (this.hasNode(e.id))
-      throw new A(S.addNodeWithExistingId(e.id));
+      throw new S(b.addNodeWithExistingId(e.id));
     const t = this.findNodeIdByElement(e.element);
     if (t !== void 0)
-      throw new A(
-        S.addNodeWithElementInUse(e.id, t)
+      throw new S(
+        b.addNodeWithElementInUse(e.id, t)
       );
     const o = /* @__PURE__ */ new Map(), s = {
       element: e.element,
@@ -463,13 +463,13 @@ class Fe {
   }
   updateNode(e, t) {
     if (!this.hasNode(e))
-      throw new A(S.updateNonexistentNode(e));
+      throw new S(b.updateNonexistentNode(e));
     const { payload: o } = this.nodes.get(e);
     o.x = t.x ?? o.x, o.y = t.y ?? o.y, o.centerFn = t.centerFn ?? o.centerFn, t.priority !== void 0 && (o.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
     if (!this.hasNode(e))
-      throw new A(S.removeNonexistentNode(e));
+      throw new S(b.removeNonexistentNode(e));
     this.beforeNodeRemovedEmitter.emit(e);
     const t = this.getNode(e);
     this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
@@ -480,15 +480,15 @@ class Fe {
   getPort(e) {
     const t = this.ports.get(e);
     if (t === void 0)
-      throw new A(S.accessNonexistentPort(e));
+      throw new S(b.accessNonexistentPort(e));
     return t;
   }
   addPort(e) {
     if (this.hasPort(e.id))
-      throw new A(S.addPortWithExistingId(e.id));
+      throw new S(b.addPortWithExistingId(e.id));
     if (!this.hasNode(e.nodeId))
-      throw new A(
-        S.addPortToNonexistentNode(e.id, e.nodeId)
+      throw new S(
+        b.addPortToNonexistentNode(e.id, e.nodeId)
       );
     this.ports.set(e.id, {
       element: e.element,
@@ -500,7 +500,7 @@ class Fe {
   }
   updatePort(e, t) {
     if (!this.hasPort(e))
-      throw new A(S.updateNonexistentPort(e));
+      throw new S(b.updateNonexistentPort(e));
     const o = this.getPort(e).payload;
     o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
   }
@@ -513,14 +513,14 @@ class Fe {
   getNodePortIds(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new A(
-        S.accessPortsOfNonexistentNode(e)
+      throw new S(
+        b.accessPortsOfNonexistentNode(e)
       );
     return Array.from(t.ports.keys());
   }
   removePort(e) {
     if (!this.hasPort(e))
-      throw new A(S.removeNonexistentPort(e));
+      throw new S(b.removeNonexistentPort(e));
     const t = this.getPort(e).nodeId;
     this.beforePortRemovedEmitter.emit(e), this.getNode(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
   }
@@ -530,7 +530,7 @@ class Fe {
   getEdge(e) {
     const t = this.edges.get(e);
     if (t === void 0)
-      throw new A(S.accessNonexistentEdge(e));
+      throw new S(b.accessNonexistentEdge(e));
     return t;
   }
   findEdgeIdByElement(e) {
@@ -538,33 +538,33 @@ class Fe {
   }
   addEdge(e) {
     if (this.hasEdge(e.id))
-      throw new A(S.addEdgeWithExistingId(e.id));
+      throw new S(b.addEdgeWithExistingId(e.id));
     if (!this.hasPort(e.from))
-      throw new A(
-        S.addEdgeFromNonexistentPort(e.id, e.from)
+      throw new S(
+        b.addEdgeFromNonexistentPort(e.id, e.from)
       );
     if (!this.hasPort(e.to))
-      throw new A(
-        S.addEdgeToNonexistentPort(e.id, e.to)
+      throw new S(
+        b.addEdgeToNonexistentPort(e.id, e.to)
       );
     const t = this.findEdgeIdByElement(e.shape.svg);
     if (t !== void 0)
-      throw new A(
-        S.addEdgeWithElementInUse(e.id, t)
+      throw new S(
+        b.addEdgeWithElementInUse(e.id, t)
       );
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
   updateEdge(e, t) {
     if (!this.hasEdge(e))
-      throw new A(S.updateNonexistentEdge(e));
+      throw new S(b.updateNonexistentEdge(e));
     if (t.from !== void 0 || t.to !== void 0) {
       if (t.from !== void 0 && !this.hasPort(t.from))
-        throw new A(
-          S.updateNonexistentEdgeSource(e, t.from)
+        throw new S(
+          b.updateNonexistentEdgeSource(e, t.from)
         );
       if (t.to !== void 0 && !this.hasPort(t.to))
-        throw new A(
-          S.updateNonexistentEdgeTarget(e, t.to)
+        throw new S(
+          b.updateNonexistentEdgeTarget(e, t.to)
         );
       const s = this.getEdge(e), n = s.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
@@ -583,7 +583,7 @@ class Fe {
   }
   removeEdge(e) {
     if (!this.hasEdge(e))
-      throw new A(S.removeNonexistentEdge(e));
+      throw new S(b.removeNonexistentEdge(e));
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
@@ -592,24 +592,24 @@ class Fe {
   getPortIncomingEdgeIds(e) {
     const t = this.portIncomingEdges.get(e);
     if (t === void 0)
-      throw new A(
-        S.accessEdgesForNonexistentPort(e)
+      throw new S(
+        b.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
   getPortOutgoingEdgeIds(e) {
     const t = this.portOutgoingEdges.get(e);
     if (t === void 0)
-      throw new A(
-        S.accessEdgesForNonexistentPort(e)
+      throw new S(
+        b.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
   getPortCycleEdgeIds(e) {
     const t = this.portCycleEdges.get(e);
     if (t === void 0)
-      throw new A(
-        S.accessEdgesForNonexistentPort(e)
+      throw new S(
+        b.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
@@ -686,18 +686,18 @@ const me = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), Ee = {
+}), xe = {
   scale: 1,
   x: 0,
   y: 0
-}, xe = (r, e) => ({
+}, Ee = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class ft {
+class vt {
   constructor(e) {
-    i(this, "viewportMatrix", Ee);
-    i(this, "contentMatrix", Ee);
+    i(this, "viewportMatrix", xe);
+    i(this, "contentMatrix", xe);
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
@@ -734,10 +734,10 @@ class ft {
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return xe(this.viewportMatrix, e);
+    return Ee(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return xe(this.contentMatrix, e);
+    return Ee(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
@@ -776,16 +776,16 @@ class ee {
     this.canvas.updateNode(t);
   }
 }
-const yt = (r, e, t) => {
+const mt = (r, e, t) => {
   const { x: o, y: s, width: n, height: a } = r.getBoundingClientRect();
   return e >= o && e <= o + n && t >= s && t <= s + a;
-}, vt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
-class mt {
+}, xt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
+class Et {
   constructor(e, t) {
     this.element = e, this.win = t;
   }
   verify(e, t) {
-    return yt(this.element, e, t) && vt(this.win, e, t);
+    return mt(this.element, e, t) && xt(this.win, e, t);
   }
 }
 const H = (r, e) => {
@@ -805,7 +805,7 @@ const H = (r, e) => {
       }
     ]
   };
-}, Et = (r, e) => {
+}, At = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const o = r.findPortIdsByElement(t)[0] ?? null;
@@ -824,21 +824,21 @@ const H = (r, e) => {
     status: "notFound"
   };
 };
-function* Ue(r, e) {
+function* Be(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const o of t) {
     if (o.shadowRoot !== null) {
-      const s = Ue(o.shadowRoot, e);
+      const s = Be(o.shadowRoot, e);
       for (const n of s)
         yield n;
     }
     yield o;
   }
 }
-const $e = (r, e) => {
-  const t = Ue(document, e);
+const Oe = (r, e) => {
+  const t = Be(document, e);
   for (const o of t) {
-    const s = Et(r, o);
+    const s = At(r, o);
     if (s.status === "portFound")
       return s.portId;
     if (s.status === "nodeEncountered")
@@ -846,14 +846,14 @@ const $e = (r, e) => {
   }
   return null;
 };
-var M = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(M || {});
-const Be = (r, e) => ({
+var R = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(R || {});
+const We = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), m = (r, e, t) => ({
+}), x = (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)
-}), Oe = (r, e, t) => {
+}), ze = (r, e, t) => {
   const o = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -870,7 +870,7 @@ const Be = (r, e) => ({
     to: { x: s.x - n, y: s.y - a }
   };
 };
-class xt {
+class St {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -883,27 +883,27 @@ class xt {
       curvature: h,
       hasSourceArrow: d,
       hasTargetArrow: c
-    } = e, l = (t.x + o.x) / 2, u = (t.y + o.y) / 2;
-    this.midpoint = { x: l, y: u };
-    const g = m(
+    } = e, u = (t.x + o.x) / 2, l = (t.y + o.y) / 2;
+    this.midpoint = { x: u, y: l };
+    const g = x(
       { x: t.x + s, y: t.y },
       n,
       t
-    ), p = m(
+    ), p = x(
       { x: o.x - s, y: o.y },
       a,
       o
     ), w = {
       x: g.x + n.x * h,
       y: g.y + n.y * h
-    }, f = {
+    }, y = {
       x: p.x - a.x * h,
       y: p.y - a.y * h
-    }, y = `M ${g.x} ${g.y} C ${w.x} ${w.y}, ${f.x} ${f.y}, ${p.x} ${p.y}`, E = d ? "" : `M ${t.x} ${t.y} L ${g.x} ${g.y} `, x = c ? "" : ` M ${p.x} ${p.y} L ${o.x} ${o.y}`;
-    this.path = `${E}${y}${x}`;
+    }, f = `M ${g.x} ${g.y} C ${w.x} ${w.y}, ${y.x} ${y.y}, ${p.x} ${p.y}`, m = d ? "" : `M ${t.x} ${t.y} L ${g.x} ${g.y} `, E = c ? "" : ` M ${p.x} ${p.y} L ${o.x} ${o.y}`;
+    this.path = `${m}${f}${E}`;
   }
 }
-class At {
+class bt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -916,95 +916,95 @@ class At {
       detourDir: h,
       from: d,
       to: c,
-      arrowLength: l,
-      detourDistance: u
-    } = e, g = t ? m(
-      { x: d.x + l, y: d.y },
+      arrowLength: u,
+      detourDistance: l
+    } = e, g = t ? x(
+      { x: d.x + u, y: d.y },
       n,
       d
-    ) : d, p = o ? m(
+    ) : d, p = o ? x(
       {
-        x: c.x - l,
+        x: c.x - u,
         y: c.y
       },
       a,
       c
-    ) : c, w = Math.cos(h) * u, f = Math.sin(h) * u, y = m(
-      { x: d.x + l, y: d.y },
+    ) : c, w = Math.cos(h) * l, y = Math.sin(h) * l, f = x(
+      { x: d.x + u, y: d.y },
       n,
       d
-    ), E = {
-      x: y.x + w,
-      y: y.y + f
-    }, x = m(
-      { x: c.x - l, y: c.y },
+    ), m = {
+      x: f.x + w,
+      y: f.y + y
+    }, E = x(
+      { x: c.x - u, y: c.y },
       a,
       c
-    ), N = {
-      x: x.x + w,
-      y: x.y + f
+    ), A = {
+      x: E.x + w,
+      y: E.y + y
     }, T = {
-      x: (E.x + N.x) / 2,
-      y: (E.y + N.y) / 2
+      x: (m.x + A.x) / 2,
+      y: (m.y + A.y) / 2
+    }, M = {
+      x: f.x + s * n.x,
+      y: f.y + s * n.y
+    }, L = {
+      x: E.x - s * a.x,
+      y: E.y - s * a.y
+    }, V = {
+      x: f.x + w,
+      y: f.y + y
     }, D = {
-      x: y.x + s * n.x,
-      y: y.y + s * n.y
-    }, F = {
-      x: x.x - s * a.x,
-      y: x.y - s * a.y
-    }, U = {
-      x: y.x + w,
-      y: y.y + f
-    }, R = {
-      x: x.x + w,
-      y: x.y + f
+      x: E.x + w,
+      y: E.y + y
     };
     this.path = [
       `M ${g.x} ${g.y}`,
-      `L ${y.x} ${y.y}`,
-      `C ${D.x} ${D.y} ${U.x} ${U.y} ${T.x} ${T.y}`,
-      `C ${R.x} ${R.y} ${F.x} ${F.y} ${x.x} ${x.y}`,
+      `L ${f.x} ${f.y}`,
+      `C ${M.x} ${M.y} ${V.x} ${V.y} ${T.x} ${T.y}`,
+      `C ${D.x} ${D.y} ${L.x} ${L.y} ${E.x} ${E.y}`,
       `L ${p.x} ${p.y}`
     ].join(" "), this.midpoint = T;
   }
 }
 const te = Object.freeze({
   edgeColor: "--edge-color"
-}), We = (r) => {
+}), ke = (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(te.edgeColor, r), e;
-}, ze = (r) => {
+}, He = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", `var(${te.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, X = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${te.edgeColor})`), r;
-}, ke = (r, e) => {
+}, Ye = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`;
-}, V = (r, e) => {
+}, F = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const o = r.length - 1;
     let s = 0, n = 0, a = 0;
     r.forEach((h, d) => {
-      let c = 0, l = 0, u = 0;
+      let c = 0, u = 0, l = 0;
       const g = d > 0, p = d < o, w = g && p;
-      if (g && (c = -s, l = -n, u = a), p) {
-        const D = r[d + 1];
-        s = D.x - h.x, n = D.y - h.y, a = Math.sqrt(s * s + n * n);
+      if (g && (c = -s, u = -n, l = a), p) {
+        const M = r[d + 1];
+        s = M.x - h.x, n = M.y - h.y, a = Math.sqrt(s * s + n * n);
       }
-      const y = a !== 0 ? Math.min((w ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, E = w ? { x: h.x + s * y, y: h.y + n * y } : h, N = u !== 0 ? Math.min((w ? e : 0) / u, d > 1 ? 0.5 : 1) : 0, T = w ? { x: h.x + c * N, y: h.y + l * N } : h;
+      const f = a !== 0 ? Math.min((w ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, m = w ? { x: h.x + s * f, y: h.y + n * f } : h, A = l !== 0 ? Math.min((w ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, T = w ? { x: h.x + c * A, y: h.y + u * A } : h;
       d > 0 && t.push(`L ${T.x} ${T.y}`), w && t.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${E.x} ${E.y}`
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${m.x} ${m.y}`
       );
     });
   }
   return t.join(" ");
-}, St = (r, e) => {
+}, Pt = (r, e) => {
   const t = r.linePoint, o = e.linePoint, s = o.x - t.x >= 0, n = r.dirX >= 0, a = e.dirX >= 0;
   if (n === a) {
-    const u = n === s, g = (t.x + o.x) / 2, p = (t.y + o.y) / 2, w = { x: g, y: p };
-    return u ? {
+    const l = n === s, g = (t.x + o.x) / 2, p = (t.y + o.y) / 2, w = { x: g, y: p };
+    return l ? {
       points: [
         r.arrowPoint,
         { x: w.x, y: t.y },
@@ -1026,19 +1026,19 @@ const te = Object.freeze({
   }
   const d = n === s, c = (t.y + o.y) / 2;
   if (d) {
-    const u = { x: o.x, y: t.y };
+    const l = { x: o.x, y: t.y };
     return {
-      points: [r.arrowPoint, u, o, e.arrowPoint],
-      midpoint: { x: u.x, y: c }
+      points: [r.arrowPoint, l, o, e.arrowPoint],
+      midpoint: { x: l.x, y: c }
     };
   }
-  const l = { x: t.x, y: o.y };
+  const u = { x: t.x, y: o.y };
   return {
-    points: [r.arrowPoint, t, l, e.arrowPoint],
-    midpoint: { x: l.x, y: c }
+    points: [r.arrowPoint, t, u, e.arrowPoint],
+    midpoint: { x: u.x, y: c }
   };
 };
-class bt {
+class Nt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1051,23 +1051,23 @@ class bt {
       arrowOffset: h,
       roundness: d,
       hasSourceArrow: c,
-      hasTargetArrow: l
-    } = e, u = c ? m(
+      hasTargetArrow: u
+    } = e, l = c ? x(
       { x: t.x + a, y: t.y },
       s,
       t
-    ) : t, g = l ? m({ x: o.x - a, y: o.y }, n, o) : o, p = a + h, w = m(
+    ) : t, g = u ? x({ x: o.x - a, y: o.y }, n, o) : o, p = a + h, w = x(
       { x: t.x + p, y: t.y },
       s,
       t
-    ), f = m({ x: o.x - p, y: o.y }, n, o), y = St(
-      { arrowPoint: u, linePoint: w, dirX: s.x },
-      { arrowPoint: g, linePoint: f, dirX: n.x }
+    ), y = x({ x: o.x - p, y: o.y }, n, o), f = Pt(
+      { arrowPoint: l, linePoint: w, dirX: s.x },
+      { arrowPoint: g, linePoint: y, dirX: n.x }
     );
-    this.path = V(y.points, d), this.midpoint = y.midpoint;
+    this.path = F(f.points, d), this.midpoint = f.midpoint;
   }
 }
-class Pt {
+class Ct {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1080,45 +1080,45 @@ class Pt {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      detourDir: l,
-      detourDistance: u,
+      detourDir: u,
+      detourDistance: l,
       roundness: g
-    } = e, p = t ? m(
+    } = e, p = t ? x(
       { x: s.x + a, y: s.y },
       h,
       s
-    ) : s, w = o ? m(
+    ) : s, w = o ? x(
       {
         x: n.x - a,
         y: n.y
       },
       d,
       n
-    ) : n, f = a + c, y = Math.cos(l) * u, E = Math.sin(l) * u, x = m(
-      { x: s.x + f, y: s.y },
+    ) : n, y = a + c, f = Math.cos(u) * l, m = Math.sin(u) * l, E = x(
+      { x: s.x + y, y: s.y },
       h,
       s
-    ), N = {
-      x: x.x + y,
-      y: x.y + E
-    }, T = m(
-      { x: n.x - f, y: n.y },
+    ), A = {
+      x: E.x + f,
+      y: E.y + m
+    }, T = x(
+      { x: n.x - y, y: n.y },
       d,
       n
-    ), D = {
-      x: T.x + y,
-      y: T.y + E
+    ), M = {
+      x: T.x + f,
+      y: T.y + m
     };
     this.midpoint = {
-      x: (N.x + D.x) / 2,
-      y: (N.y + D.y) / 2
-    }, this.path = V(
-      [p, x, N, D, T, w],
+      x: (A.x + M.x) / 2,
+      y: (A.y + M.y) / 2
+    }, this.path = F(
+      [p, E, A, M, T, w],
       g
     );
   }
 }
-class Nt {
+class Tt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1131,8 +1131,8 @@ class Nt {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: l
-    } = e, u = this.createArrowPoint(
+      roundness: u
+    } = e, l = this.createArrowPoint(
       s,
       h,
       t,
@@ -1142,13 +1142,13 @@ class Nt {
       d,
       o,
       -a
-    ), p = a + c, w = { x: t.x + p, y: t.y }, f = m(w, h, t), y = { x: o.x - p, y: o.y }, E = m(y, d, o);
-    this.path = V(
-      [u, f, E, g],
-      l
+    ), p = a + c, w = { x: t.x + p, y: t.y }, y = x(w, h, t), f = { x: o.x - p, y: o.y }, m = x(f, d, o);
+    this.path = F(
+      [l, y, m, g],
+      u
     );
-    const x = (f.x + E.x) / 2, N = (f.y + E.y) / 2;
-    this.midpoint = { x, y: N };
+    const E = (y.x + m.x) / 2, A = (y.y + m.y) / 2;
+    this.midpoint = { x: E, y: A };
   }
   createArrowPoint(e, t, o, s) {
     if (!e)
@@ -1157,14 +1157,14 @@ class Nt {
       x: o.x + s,
       y: o.y
     };
-    return m(n, t, o);
+    return x(n, t, o);
   }
 }
-const Ct = (r, e) => {
+const Mt = (r, e) => {
   const t = r.linePoint, o = e.linePoint, s = o.y - t.y >= 0, n = r.dirY >= 0, a = e.dirY >= 0;
   if (n === a) {
-    const u = n === s, g = (t.x + o.x) / 2, p = (t.y + o.y) / 2, w = { x: g, y: p };
-    return u ? {
+    const l = n === s, g = (t.x + o.x) / 2, p = (t.y + o.y) / 2, w = { x: g, y: p };
+    return l ? {
       points: [
         r.arrowPoint,
         { x: t.x, y: w.y },
@@ -1186,19 +1186,19 @@ const Ct = (r, e) => {
   }
   const d = n === s, c = (t.x + o.x) / 2;
   if (d) {
-    const u = { x: t.x, y: o.y };
+    const l = { x: t.x, y: o.y };
     return {
-      points: [r.arrowPoint, u, o, e.arrowPoint],
-      midpoint: { x: c, y: u.y }
+      points: [r.arrowPoint, l, o, e.arrowPoint],
+      midpoint: { x: c, y: l.y }
     };
   }
-  const l = { x: o.x, y: t.y };
+  const u = { x: o.x, y: t.y };
   return {
-    points: [r.arrowPoint, t, l, e.arrowPoint],
-    midpoint: { x: c, y: l.y }
+    points: [r.arrowPoint, t, u, e.arrowPoint],
+    midpoint: { x: c, y: u.y }
   };
 };
-class Tt {
+class Dt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1211,27 +1211,27 @@ class Tt {
       arrowOffset: h,
       fromDir: d,
       toDir: c,
-      roundness: l
-    } = e, u = s ? m(
+      roundness: u
+    } = e, l = s ? x(
       { x: t.x + a, y: t.y },
       d,
       t
-    ) : t, g = n ? m({ x: o.x - a, y: o.y }, c, o) : o, p = a + h, w = m(
+    ) : t, g = n ? x({ x: o.x - a, y: o.y }, c, o) : o, p = a + h, w = x(
       { x: t.x + p, y: t.y },
       d,
       t
-    ), f = m({ x: o.x - p, y: o.y }, c, o), y = Ct(
-      { arrowPoint: u, linePoint: w, dirY: d.y },
-      { arrowPoint: g, linePoint: f, dirY: c.y }
+    ), y = x({ x: o.x - p, y: o.y }, c, o), f = Mt(
+      { arrowPoint: l, linePoint: w, dirY: d.y },
+      { arrowPoint: g, linePoint: y, dirY: c.y }
     );
-    this.path = V(y.points, l), this.midpoint = y.midpoint;
+    this.path = F(f.points, u), this.midpoint = f.midpoint;
   }
 }
 class re {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { side: t, arrowLength: o, arrowOffset: s, dir: n, origin: a, hasArrow: h } = e, d = o + s, c = d + 2 * t, u = [
+    const { side: t, arrowLength: o, arrowOffset: s, dir: n, origin: a, hasArrow: h } = e, d = o + s, c = d + 2 * t, l = [
       { x: o, y: 0 },
       { x: d, y: 0 },
       { x: d, y: t },
@@ -1240,78 +1240,33 @@ class re {
       { x: d, y: -t },
       { x: d, y: 0 },
       { x: o, y: 0 }
-    ].map((p) => m(p, n, { x: 0, y: 0 })).map((p) => ({ x: p.x + a.x, y: p.y + a.y })), g = `M ${a.x} ${a.y} L ${u[0].x} ${u[0].y} `;
-    this.path = `${h ? "" : g}${V(u, e.roundness)}`, this.midpoint = { x: (u[3].x + u[4].x) / 2, y: (u[3].y + u[4].y) / 2 };
+    ].map((p) => x(p, n, { x: 0, y: 0 })).map((p) => ({ x: p.x + a.x, y: p.y + a.y })), g = `M ${a.x} ${a.y} L ${l[0].x} ${l[0].y} `;
+    this.path = `${h ? "" : g}${F(l, e.roundness)}`, this.midpoint = { x: (l[3].x + l[4].x) / 2, y: (l[3].y + l[4].y) / 2 };
   }
 }
-class Mt {
+class Rt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, l = Math.sqrt(d * d - s * s), u = l * s / d, g = l + o + t, p = t + u, f = [
+    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, u = Math.sqrt(d * d - s * s), l = u * s / d, g = u + o + t, p = t + l, y = [
       { x: t, y: 0 },
       { x: p, y: c },
       { x: p, y: -c },
       { x: g, y: 0 }
-    ].map((x) => m(x, n, { x: 0, y: 0 })).map((x) => ({ x: x.x + a.x, y: x.y + a.y })), y = [
-      `M ${f[0].x} ${f[0].y}`,
-      `A ${s} ${s} 0 0 1 ${f[1].x} ${f[1].y}`,
-      `A ${o} ${o} 0 1 0 ${f[2].x} ${f[2].y}`,
-      `A ${s} ${s} 0 0 1 ${f[0].x} ${f[0].y}`
-    ].join(" "), E = `M ${a.x} ${a.y} L ${f[0].x} ${f[0].y} `;
-    this.path = `${h ? "" : E}${y}`, this.midpoint = f[3];
-  }
-}
-class Dt {
-  constructor(e) {
-    i(this, "path");
-    i(this, "midpoint");
-    i(this, "diagonalDistance");
-    const {
-      from: t,
-      to: o,
-      sourceOffset: s,
-      targetOffset: n,
-      hasSourceArrow: a,
-      hasTargetArrow: h,
-      arrowLength: d
-    } = e;
-    this.midpoint = { x: (t.x + o.x) / 2, y: (t.y + o.y) / 2 };
-    const c = o.x - t.x, l = o.y - t.y;
-    if (this.diagonalDistance = Math.sqrt(c * c + l * l), this.diagonalDistance === 0) {
-      this.path = "";
-      return;
-    }
-    const u = { x: c, y: l }, g = this.createDirectLinePoint({
-      offset: s,
-      hasArrow: a,
-      flip: 1,
-      shift: t,
-      arrowLength: d,
-      dir: u
-    }), p = this.createDirectLinePoint({
-      offset: n,
-      hasArrow: h,
-      flip: -1,
-      shift: o,
-      arrowLength: d,
-      dir: u
-    });
-    this.path = `M ${g.x} ${g.y} L ${p.x} ${p.y}`;
-  }
-  createDirectLinePoint(e) {
-    const t = e.hasArrow ? e.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance, { dir: n, shift: a } = e;
-    return {
-      x: n.x * s + a.x,
-      y: n.y * s + a.y
-    };
+    ].map((E) => x(E, n, { x: 0, y: 0 })).map((E) => ({ x: E.x + a.x, y: E.y + a.y })), f = [
+      `M ${y[0].x} ${y[0].y}`,
+      `A ${s} ${s} 0 0 1 ${y[1].x} ${y[1].y}`,
+      `A ${o} ${o} 0 1 0 ${y[2].x} ${y[2].y}`,
+      `A ${s} ${s} 0 0 1 ${y[0].x} ${y[0].y}`
+    ].join(" "), m = `M ${a.x} ${a.y} L ${y[0].x} ${y[0].y} `;
+    this.path = `${h ? "" : m}${f}`, this.midpoint = y[3];
   }
 }
-const Rt = (r, e, t) => {
+const Lt = (r, e, t) => {
   const o = Math.max(r.y, e.y), s = Math.min(r.y, e.y);
   return (t >= 0 ? o : s) + t;
 };
-class Lt {
+class Vt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1324,49 +1279,49 @@ class Lt {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: l,
-      detourDistance: u
-    } = e, g = t ? m(
+      roundness: u,
+      detourDistance: l
+    } = e, g = t ? x(
       { x: n.x + s, y: n.y },
       h,
       n
-    ) : n, p = o ? m(
+    ) : n, p = o ? x(
       {
         x: a.x - s,
         y: a.y
       },
       d,
       a
-    ) : a, w = s + c, f = m(
+    ) : a, w = s + c, y = x(
       { x: n.x + w, y: n.y },
       h,
       n
-    ), y = m(
+    ), f = x(
       { x: a.x - w, y: a.y },
       d,
       a
-    ), E = Rt(f, y, u);
+    ), m = Lt(y, f, l);
     this.midpoint = {
-      x: (f.x + y.x) / 2,
-      y: E
-    }, this.path = V(
+      x: (y.x + f.x) / 2,
+      y: m
+    }, this.path = F(
       [
         g,
-        f,
-        { x: f.x, y: E },
-        { x: y.x, y: E },
         y,
+        { x: y.x, y: m },
+        { x: f.x, y: m },
+        f,
         p
       ],
-      l
+      u
     );
   }
 }
-const Vt = (r, e, t) => {
+const It = (r, e, t) => {
   const o = Math.max(r.x, e.x), s = Math.min(r.x, e.x);
   return (t >= 0 ? o : s) + t;
 };
-class It {
+class Ft {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1379,41 +1334,41 @@ class It {
       from: h,
       to: d,
       arrowOffset: c,
-      detourDistance: l,
-      roundness: u
-    } = e, g = t ? m(
+      detourDistance: u,
+      roundness: l
+    } = e, g = t ? x(
       { x: h.x + s, y: h.y },
       n,
       h
-    ) : h, p = o ? m(
+    ) : h, p = o ? x(
       {
         x: d.x - s,
         y: d.y
       },
       a,
       d
-    ) : d, w = s + c, f = m(
+    ) : d, w = s + c, y = x(
       { x: h.x + w, y: h.y },
       n,
       h
-    ), y = m(
+    ), f = x(
       { x: d.x - w, y: d.y },
       a,
       d
-    ), E = Vt(f, y, l);
+    ), m = It(y, f, u);
     this.midpoint = {
-      x: E,
-      y: (f.y + y.y) / 2
-    }, this.path = V(
+      x: m,
+      y: (y.y + f.y) / 2
+    }, this.path = F(
       [
         g,
-        f,
-        { x: E, y: f.y },
-        { x: E, y: y.y },
         y,
+        { x: m, y: y.y },
+        { x: m, y: f.y },
+        f,
         p
       ],
-      u
+      l
     );
   }
 }
@@ -1438,7 +1393,7 @@ const v = Object.freeze({
   smallCycleRadius: 15,
   curvature: 90,
   interactiveWidth: 10,
-  preOffset: 0
+  portOffset: 0
 }), Ae = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
 class G {
   constructor(e) {
@@ -1453,19 +1408,19 @@ class G {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = C(), this.arrowRenderer = this.params.arrowRenderer, this.svg = We(e.color), this.svg.appendChild(this.group), this.line = ze(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = C(), this.arrowRenderer = this.params.arrowRenderer, this.svg = ke(e.color), this.svg.appendChild(this.group), this.line = He(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = Oe(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = ze(
       e.from,
       e.to,
       this.params.padding
     );
-    ke(this.svg, { x: t, y: o, width: s, height: n });
+    Ye(this.svg, { x: t, y: o, width: s, height: n });
     const d = Ae(e.from.direction), c = Ae(e.to.direction);
-    let l = { x: -c.x, y: -c.y }, u;
-    e.category === I.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === I.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
-    const g = u(a, h, d, c);
+    let u = { x: -c.x, y: -c.y }, l;
+    e.category === U.PortCycle ? (l = this.params.createCyclePath, u = d) : e.category === U.NodeCycle ? l = this.params.createDetourPath : l = this.params.createLinePath;
+    const g = l(a, h, d, c);
     this.line.setAttribute("d", g.path);
     let p = null;
     this.sourceArrow && (p = this.arrowRenderer({
@@ -1475,7 +1430,7 @@ class G {
     }), this.sourceArrow.setAttribute("d", p));
     let w = null;
     this.targetArrow && (w = this.arrowRenderer({
-      direction: l,
+      direction: u,
       shift: h,
       arrowLength: this.params.arrowLength
     }), this.targetArrow.setAttribute("d", w)), this.afterRenderEmitter.emit({
@@ -1485,32 +1440,32 @@ class G {
     });
   }
 }
-const Ft = (r) => (e) => {
+const Ut = (r) => (e) => {
   const o = [
     { x: 0, y: 0 },
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => m(h, e.direction, { x: 0, y: 0 })
+    (h) => x(h, e.direction, { x: 0, y: 0 })
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
   })), s = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
   return `${s} ${n} ${a} Z`;
-}, Ut = (r) => (e) => {
+}, $t = (r) => (e) => {
   const t = r.radius, o = e.arrowLength, s = (o * o + 2 * o * t) / (2 * t), n = s + t, a = o + t - t * (o + t) / n, h = t * s / n, c = [
     { x: 0, y: 0 },
     { x: a, y: -h },
     { x: a, y: h }
   ].map(
-    (w) => m(w, e.direction, { x: 0, y: 0 })
+    (w) => x(w, e.direction, { x: 0, y: 0 })
   ).map((w) => ({
     x: w.x + e.shift.x,
     y: w.y + e.shift.y
-  })), l = `M ${c[0].x} ${c[0].y}`, u = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, g = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
-  return `${l} ${u} ${g} ${p}`;
-}, $t = (r) => (e) => {
-  const t = r.smallRadius, o = r.radius, s = m(
+  })), u = `M ${c[0].x} ${c[0].y}`, l = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, g = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${u} ${l} ${g} ${p}`;
+}, Bt = (r) => (e) => {
+  const t = r.smallRadius, o = r.radius, s = x(
     {
       x: e.arrowLength,
       y: 0
@@ -1524,33 +1479,33 @@ const Ft = (r) => (e) => {
       y: 0
     }
   ), a = [{ x: 0, y: 0 }, { x: s.x, y: -s.y }, s].map(
-    (u) => m(u, e.direction, { x: 0, y: 0 })
-  ).map((u) => ({
-    x: u.x + e.shift.x,
-    y: u.y + e.shift.y
-  })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, l = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
-  return `${h} ${d} ${c} ${l}`;
+    (l) => x(l, e.direction, { x: 0, y: 0 })
+  ).map((l) => ({
+    x: l.x + e.shift.x,
+    y: l.y + e.shift.y
+  })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, u = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
+  return `${h} ${d} ${c} ${u}`;
 }, B = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "triangle":
-      return Ft({
+      return Ut({
         radius: r.radius ?? v.polygonArrowRadius
       });
     case "arc":
-      return Ut({
+      return $t({
         radius: r.radius ?? v.circleArrowRadius
       });
     default:
-      return $t({
+      return Bt({
         smallRadius: r.smallRadius ?? v.wedgeArrowSmallRadius,
         angle: r.angle ?? v.wedgeArrowAngle,
         radius: r.radius ?? v.wedgeArrowRadius
       });
   }
 }, O = 50;
-class Bt {
+class Ot {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1567,7 +1522,7 @@ class Bt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new Mt({
+    i(this, "createCyclePath", (e, t, o) => new Rt({
       origin: e,
       dir: o,
       radius: this.portCycleRadius,
@@ -1575,7 +1530,7 @@ class Bt {
       arrowLength: this.arrowLength,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new At({
+    i(this, "createDetourPath", (e, t, o, s) => new bt({
       from: e,
       to: t,
       fromDir: o,
@@ -1587,7 +1542,7 @@ class Bt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new xt({
+    i(this, "createLinePath", (e, t, o, s) => new St({
       from: e,
       to: t,
       fromDir: o,
@@ -1615,7 +1570,7 @@ class Bt {
   }
 }
 const Se = (r) => Math.cos(r) > 0 ? 0 : Math.PI;
-class Ot {
+class Wt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1640,7 +1595,7 @@ class Ot {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Lt({
+    i(this, "createDetourPath", (e, t, o, s) => new Vt({
       from: e,
       to: t,
       fromDir: o,
@@ -1652,7 +1607,7 @@ class Ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new bt({
+    i(this, "createLinePath", (e, t, o, s) => new Nt({
       from: e,
       to: t,
       fromDir: o,
@@ -1697,7 +1652,7 @@ class Ot {
     });
   }
 }
-class Wt {
+class zt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1723,7 +1678,7 @@ class Wt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Pt({
+    i(this, "createDetourPath", (e, t, o, s) => new Ct({
       from: e,
       to: t,
       fromDir: o,
@@ -1736,7 +1691,7 @@ class Wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new Nt({
+    i(this, "createLinePath", (e, t, o, s) => new Tt({
       from: e,
       to: t,
       fromDir: o,
@@ -1771,7 +1726,7 @@ class Wt {
   }
 }
 const be = Math.PI / 2, Pe = (r) => Math.sin(r) > 0 ? be : -be;
-class zt {
+class kt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1796,7 +1751,7 @@ class zt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new It({
+    i(this, "createDetourPath", (e, t, o, s) => new Ft({
       from: e,
       to: t,
       fromDir: o,
@@ -1808,7 +1763,7 @@ class zt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new Tt({
+    i(this, "createLinePath", (e, t, o, s) => new Dt({
       from: e,
       to: t,
       fromDir: o,
@@ -1853,7 +1808,11 @@ class zt {
     });
   }
 }
-class He {
+const Ht = (r) => {
+  const { direction: e, radius: t } = r, { x: o, y: s } = e, { horizontal: n, vertical: a } = t, h = s / o, d = Math.abs(a / h), c = Math.abs(n * h), u = Math.min(n, d), l = Math.min(a, c);
+  return Math.sqrt(u * u + l * l);
+}, Ne = (r) => typeof r == "number" ? () => r : r === "box" ? Ht : r, Ce = v.portOffset;
+class Xe {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1866,88 +1825,116 @@ class He {
     i(this, "color");
     i(this, "width");
     i(this, "arrowLength");
-    i(this, "sourceOffset");
-    i(this, "targetOffset");
+    i(this, "sourceOffsetFn");
+    i(this, "targetOffsetFn");
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = C(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = B((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = We(this.color), this.svg.appendChild(this.group), this.line = ze(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = C(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = B((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffsetFn = Ne(
+      (e == null ? void 0 : e.sourceOffset) ?? Ce
+    ), this.targetOffsetFn = Ne(
+      (e == null ? void 0 : e.targetOffset) ?? Ce
+    ), this.svg = ke(this.color), this.svg.appendChild(this.group), this.line = He(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = Oe(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = ze(
       e.from,
       e.to,
       O
     );
-    ke(this.svg, { x: t, y: o, width: s, height: n });
-    const d = new Dt({
-      from: a,
-      to: h,
-      sourceOffset: this.sourceOffset,
-      targetOffset: this.targetOffset,
-      hasSourceArrow: this.sourceArrow !== null,
-      hasTargetArrow: this.targetArrow !== null,
-      arrowLength: this.arrowLength
-    });
-    this.line.setAttribute("d", d.path);
-    let c = null, l = null;
-    const u = d.diagonalDistance;
-    if (u === 0)
-      this.sourceArrow !== null && (c = "", this.sourceArrow.setAttribute("d", c)), this.targetArrow !== null && (l = "", this.targetArrow.setAttribute("d", l));
-    else {
-      const g = {
-        x: (h.x - a.x) / u,
-        y: (h.y - a.y) / u
-      };
-      if (this.sourceArrow) {
-        const p = {
-          x: g.x * this.sourceOffset + a.x,
-          y: g.y * this.sourceOffset + a.y
-        };
-        c = this.arrowRenderer({
-          direction: g,
-          shift: p,
-          arrowLength: this.arrowLength
-        }), this.sourceArrow.setAttribute("d", c);
+    Ye(this.svg, { x: t, y: o, width: s, height: n });
+    const d = h.x - a.x, c = h.y - a.y, u = Math.sqrt(d * d + c * c);
+    if (u === 0) {
+      this.renderEmpty(a);
+      return;
+    }
+    const l = { x: d / u, y: c / u }, g = this.sourceOffsetFn({
+      direction: { x: l.x, y: l.y },
+      radius: {
+        horizontal: e.from.width / 2,
+        vertical: e.from.height / 2
       }
-      if (this.targetArrow) {
-        const p = {
-          x: g.x * this.targetOffset,
-          y: g.y * this.targetOffset
-        };
-        l = this.arrowRenderer({
-          direction: { x: -g.x, y: -g.y },
-          shift: {
-            x: h.x - p.x,
-            y: h.y - p.y
-          },
-          arrowLength: this.arrowLength
-        }), this.targetArrow.setAttribute("d", l);
+    }), p = this.targetOffsetFn({
+      direction: { x: -l.x, y: -l.y },
+      radius: {
+        horizontal: e.to.width / 2,
+        vertical: e.to.height / 2
       }
+    }), w = {
+      x: a.x + g * l.x,
+      y: a.y + g * l.y
+    }, y = {
+      x: h.x - p * l.x,
+      y: h.y - p * l.y
+    }, f = this.sourceArrow !== null ? this.arrowLength : 0, m = {
+      x: w.x + f * l.x,
+      y: w.y + f * l.y
+    }, E = this.targetArrow !== null ? this.arrowLength : 0, A = {
+      x: y.x - E * l.x,
+      y: y.y - E * l.y
+    }, T = {
+      x: (w.x + y.x) / 2,
+      y: (w.y + y.y) / 2
+    }, M = `M ${m.x} ${m.y} L ${A.x} ${A.y}`;
+    this.line.setAttribute("d", M);
+    let L = null, V = null;
+    if (this.sourceArrow) {
+      const D = {
+        x: l.x * g + a.x,
+        y: l.y * g + a.y
+      };
+      L = this.arrowRenderer({
+        direction: l,
+        shift: D,
+        arrowLength: this.arrowLength
+      }), this.sourceArrow.setAttribute("d", L);
+    }
+    if (this.targetArrow) {
+      const D = {
+        x: l.x * p,
+        y: l.y * p
+      };
+      V = this.arrowRenderer({
+        direction: { x: -l.x, y: -l.y },
+        shift: {
+          x: h.x - D.x,
+          y: h.y - D.y
+        },
+        arrowLength: this.arrowLength
+      }), this.targetArrow.setAttribute("d", V);
     }
     this.afterRenderEmitter.emit({
-      edgePath: d,
-      sourceArrowPath: c,
-      targetArrowPath: l
+      edgePath: { path: M, midpoint: T },
+      sourceArrowPath: L,
+      targetArrowPath: V
+    });
+  }
+  renderEmpty(e) {
+    const t = "";
+    let o = null, s = null;
+    this.line.setAttribute("d", t), this.sourceArrow !== null && (o = "", this.sourceArrow.setAttribute("d", o)), this.targetArrow !== null && (s = "", this.targetArrow.setAttribute("d", s)), this.afterRenderEmitter.emit({
+      edgePath: { path: t, midpoint: e },
+      sourceArrowPath: o,
+      targetArrowPath: s
     });
   }
 }
-const kt = () => {
+const Yt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, Ht = (r) => {
+}, Xt = (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;
-}, Ne = (r) => {
+}, Te = (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 Yt extends Error {
+class Gt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Ye {
+class Ge {
   constructor(e, t) {
     i(this, "svg");
     i(this, "group");
@@ -1959,18 +1946,18 @@ class Ye {
      * @deprecated
      * use shape.svg instead
      */
-    i(this, "handle", kt());
+    i(this, "handle", Yt());
     i(this, "onAfterRender");
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Ye)
-      throw new Yt(
+    if (this.baseEdge = e, e instanceof Ge)
+      throw new Gt(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
     const o = (t == null ? void 0 : t.distance) ?? v.interactiveWidth;
-    this.interactiveLine = Ht(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Ne(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Ne(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
+    this.interactiveLine = Xt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Te(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Te(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
       this.interactiveLine.setAttribute("d", s.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", s.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", s.targetArrowPath);
     });
   }
@@ -1978,7 +1965,7 @@ class Ye {
     this.baseEdge.render(e);
   }
 }
-class Zr {
+class qr {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -1995,7 +1982,7 @@ class Zr {
     this.baseShape.render(e);
   }
 }
-class Xe {
+class je {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -2110,7 +2097,7 @@ class K {
     this.counter = 0;
   }
 }
-class Ge {
+class Je {
   constructor(e, t, o) {
     i(this, "nodeIdGenerator", new K(
       (e) => this.graphStore.hasNode(e)
@@ -2241,18 +2228,18 @@ class Ge {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const Xt = (r) => {
+const jt = (r) => {
   setTimeout(() => {
     r();
   });
-}, Ce = (r) => {
+}, Me = (r) => {
   queueMicrotask(() => {
     r();
   });
 }, oe = (r) => {
   r();
 };
-class je {
+class Ke {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
@@ -2275,7 +2262,7 @@ class je {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const Gt = (r, e) => Symbol.iterator in r ? {
+const Jt = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
   contentPadding: e.focus.contentPadding,
@@ -2285,16 +2272,16 @@ const Gt = (r, e) => Symbol.iterator in r ? {
   nodes: r.nodes ?? [],
   contentPadding: r.contentPadding ?? r.contentOffset ?? e.focus.contentPadding,
   animationDuration: r.animationDuration ?? e.focus.animationDuration
-}, Je = (r, e, t) => ({
+}, Qe = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Ke = (r, e, t, o) => ({
+}), Ze = (r, e, t, o) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * o + r.y
 });
-class Qe {
+class _e {
   constructor(e, t, o, s) {
     this.graphStore = e, this.viewportStore = t, this.params = o, this.win = s;
   }
@@ -2306,22 +2293,22 @@ class Qe {
   }
   center(e, t) {
     const { width: o, height: s } = this.viewportStore.getDimensions(), n = { x: o / 2, y: s / 2 }, a = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - n.x, c = h.y - n.y;
-    let l = Je(a, d, c);
-    const u = t == null ? void 0 : t.contentScale;
-    if (u !== void 0) {
-      const p = 1 / u;
-      l = Ke(
-        l,
+    let u = Qe(a, d, c);
+    const l = t == null ? void 0 : t.contentScale;
+    if (l !== void 0) {
+      const p = 1 / l;
+      u = Ze(
+        u,
         p / a.scale,
         n.x,
         n.y
       );
     }
     const g = (t == null ? void 0 : t.animationDuration) ?? 0;
-    g > 0 ? this.animateNavigation(a, l, g) : this.viewportStore.patchViewportMatrix(l);
+    g > 0 ? this.animateNavigation(a, u, g) : this.viewportStore.patchViewportMatrix(u);
   }
   focus(e) {
-    const t = Gt(e ?? {}, this.params);
+    const t = Jt(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2342,12 +2329,12 @@ class Qe {
       const d = {
         x: (t + o) / 2,
         y: (s + n) / 2
-      }, { scale: c } = this.viewportStore.getContentMatrix(), l = (n - s) * c, u = (o - t) * c, { width: g, height: p } = this.viewportStore.getDimensions(), w = Math.max(
-        u / g,
-        l / p
-      ), f = w > 1 ? c / w : c, y = Math.max(f, e.minContentScale);
+      }, { scale: c } = this.viewportStore.getContentMatrix(), u = (n - s) * c, l = (o - t) * c, { width: g, height: p } = this.viewportStore.getDimensions(), w = Math.max(
+        l / g,
+        u / p
+      ), y = w > 1 ? c / w : c, f = Math.max(y, e.minContentScale);
       this.center(d, {
-        contentScale: y,
+        contentScale: f,
         animationDuration: e.animationDuration
       });
     }
@@ -2370,20 +2357,20 @@ class Qe {
     this.win.requestAnimationFrame(a);
   }
 }
-const Ze = (r, e, t) => {
-  const o = new Fe(), s = new Xe(o), n = new je(e), a = new Ve(o, e, r), h = {
+const qe = (r, e, t) => {
+  const o = new $e(), s = new je(o), n = new Ke(e), a = new Fe(o, e, r), h = {
     nodes: {
-      centerFn: Be,
+      centerFn: We,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new He(),
+      shapeFactory: () => new Xe(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
-  }, d = new Ge(
+  }, d = new Je(
     o,
     a,
     h
@@ -2394,13 +2381,13 @@ const Ze = (r, e, t) => {
       schedule: oe,
       animationDuration: 0
     }
-  }, l = new Qe(
+  }, u = new _e(
     o,
     e,
     c,
     t
   );
-  return new Ie(s, n, d, l);
+  return new Ue(s, n, d, u);
 };
 class j {
   constructor(e, t, o, s) {
@@ -2502,7 +2489,7 @@ class j {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class jt {
+class Kt {
   constructor() {
     i(this, "field", "_htmlGraphTags");
   }
@@ -2610,7 +2597,7 @@ const ne = (r, e) => ({
   from: r.isDirect ? r.staticPortId : e,
   to: r.isDirect ? e : r.staticPortId
 });
-class Te {
+class De {
   constructor(e, t) {
     this.graph = e, this.connectionAllowedVerifier = t;
   }
@@ -2618,18 +2605,18 @@ class Te {
     let t, o = 1 / 0;
     const { cursor: s } = e;
     return this.graph.getAllPortIds().forEach((n) => {
-      const { element: a, direction: h, nodeId: d } = this.graph.getPort(n), { x: c, y: l } = this.graph.getNode(d);
-      if (c === null || l === null)
+      const { element: a, direction: h, nodeId: d } = this.graph.getPort(n), { x: c, y: u } = this.graph.getNode(d);
+      if (c === null || u === null)
         return;
-      const u = ne(e, n);
-      if (!this.connectionAllowedVerifier(u))
+      const l = ne(e, n);
+      if (!this.connectionAllowedVerifier(l))
         return;
-      const { top: g, left: p, width: w, height: f } = a.getBoundingClientRect(), y = { x: p + w / 2, y: g + f / 2 }, E = s.x - y.x, x = s.y - y.y, N = Math.sqrt(E * E + x * x);
-      N < o && (o = N, t = h);
+      const { top: g, left: p, width: w, height: y } = a.getBoundingClientRect(), f = { x: p + w / 2, y: g + y / 2 }, m = s.x - f.x, E = s.y - f.y, A = Math.sqrt(m * m + E * E);
+      A < o && (o = A, t = h);
     }), t;
   }
 }
-class Jt {
+class Qt {
   constructor(e) {
     this.direction = e;
   }
@@ -2947,7 +2934,7 @@ class J {
     );
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = Je(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), s = Qe(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: s,
       canvasWidth: n,
@@ -2956,7 +2943,7 @@ class J {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), n = Ke(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), n = Ze(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: n,
       canvasWidth: a,
@@ -3068,27 +3055,27 @@ class he {
   }
   scheduleEnsureViewportAreaLoaded() {
     setTimeout(() => {
-      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, l = s + a + this.nodeHorizontal, u = n + h + this.nodeVertical;
-      this.loadedArea.xFrom < d && this.loadedArea.xTo > l && this.loadedArea.yFrom < c && this.loadedArea.yTo > u || this.loadAreaAroundViewport();
+      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, u = s + a + this.nodeHorizontal, l = n + h + this.nodeVertical;
+      this.loadedArea.xFrom < d && this.loadedArea.xTo > u && this.loadedArea.yFrom < c && this.loadedArea.yTo > l || this.loadAreaAroundViewport();
     });
   }
   loadAreaAroundViewport() {
-    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, l = 3 * a + 2 * this.nodeHorizontal, u = 3 * h + 2 * this.nodeVertical;
+    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, u = 3 * a + 2 * this.nodeHorizontal, l = 3 * h + 2 * this.nodeVertical;
     this.trigger.emit({
       x: d,
       y: c,
-      width: l,
-      height: u
+      width: u,
+      height: l
     });
   }
 }
-const Kt = () => {
+const Zt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Qt = () => {
+}, _t = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Zt = () => {
+}, qt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -3097,9 +3084,9 @@ const Kt = () => {
 };
 class de {
   constructor(e, t, o) {
-    i(this, "svg", Kt());
-    i(this, "patternRenderingRectangle", Qt());
-    i(this, "pattern", Zt());
+    i(this, "svg", Zt());
+    i(this, "patternRenderingRectangle", _t());
+    i(this, "pattern", qt());
     i(this, "patternContent");
     i(this, "tileWidth");
     i(this, "tileHeight");
@@ -3141,7 +3128,7 @@ class ce {
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = Ze(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = qe(
       this.overlayLayer,
       this.viewportStore,
       this.window
@@ -3150,8 +3137,8 @@ class ce {
       mouseDownEventVerifier: this.params.mouseDownEventVerifier,
       mouseUpEventVerifier: this.params.mouseUpEventVerifier,
       onPointerDownVerifier: (d, c) => {
-        const l = this.params.connectionTypeResolver(d);
-        return l === null ? !1 : (this.grabPort(d, c, l), !0);
+        const u = this.params.connectionTypeResolver(d);
+        return u === null ? !1 : (this.grabPort(d, c, u), !0);
       },
       onPointerMove: (d) => {
         this.moveDraggingPort(d);
@@ -3185,11 +3172,11 @@ class ce {
     const s = this.canvas.graph.getPort(e), n = s.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
       x: a - d.x,
       y: h - d.y
-    }), l = this.canvas.viewport.createContentCoords({
+    }), u = this.canvas.viewport.createContentCoords({
       x: t.x - d.x,
       y: t.y - d.y
-    }), u = {
-      overlayNodeId: M.StaticNodeId,
+    }), l = {
+      overlayNodeId: R.StaticNodeId,
       portCoords: c,
       portDirection: s.direction
     }, g = o === "direct";
@@ -3203,21 +3190,21 @@ class ce {
         ...this.edgeInProgress
       }
     ), w = {
-      overlayNodeId: M.DraggingNodeId,
-      portCoords: l,
+      overlayNodeId: R.DraggingNodeId,
+      portCoords: u,
       portDirection: p ?? s.direction
-    }, [f, y] = g ? [u, w] : [w, u];
-    this.overlayCanvas.addNode(Y(f)), this.overlayCanvas.addNode(Y(y)), this.overlayCanvas.addEdge({
-      from: f.overlayNodeId,
-      to: y.overlayNodeId,
-      shape: this.params.edgeShapeFactory(M.EdgeId)
+    }, [y, f] = g ? [l, w] : [w, l];
+    this.overlayCanvas.addNode(Y(y)), this.overlayCanvas.addNode(Y(f)), this.overlayCanvas.addEdge({
+      from: y.overlayNodeId,
+      to: f.overlayNodeId,
+      shape: this.params.edgeShapeFactory(R.EdgeId)
     });
   }
   resetDragState() {
     this.edgeInProgress = null, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = $e(this.canvas.graph, e);
+    const t = Oe(this.canvas.graph, e);
     if (t === null) {
       this.params.onEdgeCreationInterrupted(this.edgeInProgress);
       return;
@@ -3239,10 +3226,10 @@ class ce {
       cursor: e,
       ...this.edgeInProgress
     });
-    this.overlayCanvas.updateNode(M.DraggingNodeId, {
+    this.overlayCanvas.updateNode(R.DraggingNodeId, {
       x: o.x,
       y: o.y
-    }).updatePort(M.DraggingNodeId, { direction: s });
+    }).updatePort(R.DraggingNodeId, { direction: s });
   }
 }
 class le {
@@ -3253,7 +3240,7 @@ class le {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = Ze(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = qe(
       this.overlayLayer,
       this.viewportStore,
       this.window
@@ -3302,12 +3289,12 @@ class le {
       return !1;
     const s = this.canvas.graph.getEdge(o), n = e === s.from, a = e === s.to, h = n ? s.to : s.from;
     this.edgeInProgress = { staticPortId: h, isDirect: a };
-    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), u = {
-      x: l.x + l.width / 2,
-      y: l.y + l.height / 2
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), u = c.element.getBoundingClientRect(), l = {
+      x: u.x + u.width / 2,
+      y: u.y + u.height / 2
     }, g = this.overlayLayer.getBoundingClientRect(), p = this.canvas.viewport.createContentCoords({
-      x: u.x - g.x,
-      y: u.y - g.y
+      x: l.x - g.x,
+      y: l.y - g.y
     }), w = this.canvas.viewport.createContentCoords({
       x: t.x - g.x,
       y: t.y - g.y
@@ -3319,26 +3306,26 @@ class le {
       shape: s.shape,
       priority: s.priority
     }, this.canvas.removeEdge(o);
-    const f = {
-      overlayNodeId: M.StaticNodeId,
+    const y = {
+      overlayNodeId: R.StaticNodeId,
       portCoords: p,
       portDirection: c.direction
-    }, y = this.params.draggingPortDirectionResolver.resolve(
+    }, f = this.params.draggingPortDirectionResolver.resolve(
       {
         cursor: t,
         ...this.edgeInProgress
       }
-    ), E = {
-      overlayNodeId: M.DraggingNodeId,
+    ), m = {
+      overlayNodeId: R.DraggingNodeId,
       portCoords: w,
-      portDirection: y ?? d.direction
-    }, [x, N] = a ? [f, E] : [E, f];
-    this.overlayCanvas.addNode(Y(x)), this.overlayCanvas.addNode(Y(N));
-    const T = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
+      portDirection: f ?? d.direction
+    }, [E, A] = a ? [y, m] : [m, y];
+    this.overlayCanvas.addNode(Y(E)), this.overlayCanvas.addNode(Y(A));
+    const T = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(R.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
-      id: M.EdgeId,
-      from: x.overlayNodeId,
-      to: N.overlayNodeId,
+      id: R.EdgeId,
+      from: E.overlayNodeId,
+      to: A.overlayNodeId,
       shape: T
     }), !0;
   }
@@ -3353,14 +3340,14 @@ class le {
       cursor: e,
       ...this.edgeInProgress
     });
-    this.overlayCanvas.updateNode(M.DraggingNodeId, {
+    this.overlayCanvas.updateNode(R.DraggingNodeId, {
       x: s.x,
       y: s.y
-    }).updatePort(M.DraggingNodeId, { direction: n });
+    }).updatePort(R.DraggingNodeId, { direction: n });
   }
   tryCreateConnection(e) {
-    const t = $e(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(M.EdgeId), t === null) {
+    const t = Oe(this.canvas.graph, e);
+    if (this.overlayCanvas.removeEdge(R.EdgeId), t === null) {
       const c = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: c.id,
@@ -3435,7 +3422,7 @@ class ge {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class _t {
+class er {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -3449,9 +3436,9 @@ class _t {
     }), this.params.onAfterApplied();
   }
 }
-class qt {
+class tr {
   static configure(e, t) {
-    const o = t.applyOn, s = new _t(e, t.algorithm, {
+    const o = t.applyOn, s = new er(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
@@ -3475,7 +3462,7 @@ class qt {
     }
   }
 }
-class er {
+class rr {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3490,7 +3477,7 @@ class er {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class tr {
+class or {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -3511,11 +3498,11 @@ class pe {
     i(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = o, this.applier = new tr(e, t.algorithm, {
+    this.win = o, this.applier = new or(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new er(this.win, this.step);
+    }), new rr(this.win, this.step);
   }
   static configure(e, t, o) {
     new pe(e, t, o);
@@ -3564,7 +3551,7 @@ class we {
     );
   }
 }
-class fe {
+class ye {
   constructor(e, t, o, s, n) {
     i(this, "configurator");
     i(this, "selectionHandledTag", se);
@@ -3598,7 +3585,7 @@ class fe {
     ), this.canvas.graph.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.canvas.graph.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
   static configure(e, t, o, s, n) {
-    new fe(
+    new ye(
       e,
       t,
       o,
@@ -3607,7 +3594,7 @@ class fe {
     );
   }
 }
-class ye {
+class fe {
   constructor(e, t, o, s, n, a) {
     i(this, "configurator");
     i(this, "onCanvasSelected");
@@ -3628,7 +3615,7 @@ class ye {
     });
   }
   static configure(e, t, o, s, n, a) {
-    new ye(
+    new fe(
       e,
       t,
       o,
@@ -3638,30 +3625,30 @@ class ye {
     );
   }
 }
-const rr = () => {
+const sr = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Q = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Me = () => {
+}, Re = () => {
   const r = Q();
   return r.style.pointerEvents = "none", r;
 };
-class or {
+class ir {
   constructor(e) {
     i(this, "background", Q());
     i(this, "main", Q());
-    i(this, "overlayConnectablePorts", Me());
-    i(this, "overlayDraggableEdges", Me());
-    i(this, "host", rr());
+    i(this, "overlayConnectablePorts", Re());
+    i(this, "overlayDraggableEdges", Re());
+    i(this, "host", sr());
     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 b = Object.freeze({
+const P = Object.freeze({
   seed: "HTMLGraph is awesome",
   maxTimeDeltaSec: 0.01,
   nodeCharge: 1e5,
@@ -3675,23 +3662,23 @@ const b = Object.freeze({
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), L = Object.freeze({
+}), I = Object.freeze({
   mouseDownEventVerifier: (r) => r.button === 0,
   mouseUpEventVerifier: (r) => r.button === 0,
   movementThreshold: 10
-}), P = () => {
-}, _e = (r, e, t) => r === "closest-connectable-port" ? new Te(
+}), N = () => {
+}, et = (r, e, t) => r === "closest-connectable-port" ? new De(
   e,
   t
-) : r === "nearest-connectable-port" ? new Te(
+) : r === "nearest-connectable-port" ? new De(
   e,
   t
-) : new Jt(r), ve = (r) => {
+) : new Qt(r), ve = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new Wt({
+      return () => new zt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3705,7 +3692,7 @@ const b = Object.freeze({
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Ot({
+      return () => new Wt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3718,7 +3705,7 @@ const b = Object.freeze({
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new zt({
+      return () => new kt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3731,7 +3718,7 @@ const b = Object.freeze({
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new He({
+      return () => new Xe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3742,7 +3729,7 @@ const b = Object.freeze({
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Bt({
+      return () => new Ot({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3756,9 +3743,9 @@ const b = Object.freeze({
         detourDirection: r.detourDirection
       });
   }
-}, sr = (r) => {
-  var l, u, g, p, w, f;
-  const e = r.nodeDragVerifier ?? (() => !0), t = r.moveOnTop !== !1, o = r.moveEdgesOnTop !== !1 && t, s = (l = r.mouse) == null ? void 0 : l.dragCursor, n = s !== void 0 ? s : "grab", a = (u = r.mouse) == null ? void 0 : u.mouseDownEventVerifier, h = a !== void 0 ? a : (y) => y.button === 0, d = (g = r.mouse) == null ? void 0 : g.mouseUpEventVerifier, c = d !== void 0 ? d : (y) => y.button === 0;
+}, nr = (r) => {
+  var u, l, g, p, w, y;
+  const e = r.nodeDragVerifier ?? (() => !0), t = r.moveOnTop !== !1, o = r.moveEdgesOnTop !== !1 && t, s = (u = r.mouse) == null ? void 0 : u.dragCursor, n = s !== void 0 ? s : "grab", a = (l = r.mouse) == null ? void 0 : l.mouseDownEventVerifier, h = a !== void 0 ? a : (f) => f.button === 0, d = (g = r.mouse) == null ? void 0 : g.mouseUpEventVerifier, c = d !== void 0 ? d : (f) => f.button === 0;
   return {
     moveOnTop: t,
     moveEdgesOnTop: o,
@@ -3766,43 +3753,43 @@ const b = Object.freeze({
     gridSize: r.gridSize ?? null,
     mouseDownEventVerifier: h,
     mouseUpEventVerifier: c,
-    onNodeDragStarted: ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? P,
-    onNodeDrag: ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? P,
+    onNodeDragStarted: ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? N,
+    onNodeDrag: ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? N,
     nodeDragVerifier: e,
-    onNodeDragFinished: ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? P
+    onNodeDragFinished: ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? N
   };
-}, ir = (r) => {
+}, ar = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, s = 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 < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
-    const l = n.canvasHeight * n.prevTransform.scale, u = s - l;
-    return h > u && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, u)), { scale: n.nextTransform.scale, x: a, y: h };
+    const u = n.canvasHeight * n.prevTransform.scale, l = s - u;
+    return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, nr = (r) => {
+}, hr = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, s = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
-    let d = h.scale, c = h.x, l = h.y;
+    let d = h.scale, c = h.x, u = h.y;
     if (h.scale > s && h.scale > a.scale) {
-      d = Math.max(a.scale, s), c = a.x, l = a.y;
-      const u = (d - a.scale) / (h.scale - a.scale);
-      c = a.x + (h.x - a.x) * u, l = a.y + (h.y - a.y) * u;
+      d = Math.max(a.scale, s), c = a.x, u = a.y;
+      const l = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * l, u = a.y + (h.y - a.y) * l;
     }
     if (h.scale < o && h.scale < a.scale) {
-      d = Math.min(a.scale, o), c = a.x, l = a.y;
-      const u = (d - a.scale) / (h.scale - a.scale);
-      c = a.x + (h.x - a.x) * u, l = a.y + (h.y - a.y) * u;
+      d = Math.min(a.scale, o), c = a.x, u = a.y;
+      const l = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * l, u = a.y + (h.y - a.y) * l;
     }
     return {
       scale: d,
       x: c,
-      y: l
+      y: u
     };
   };
-}, ar = (r) => (e) => r.reduce(
+}, dr = (r) => (e) => r.reduce(
   (t, o) => o({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3810,59 +3797,59 @@ const b = Object.freeze({
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), De = (r) => {
+), Le = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return nr({
+      return hr({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return ir({
+      return ar({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, Re = (r) => {
-  var g, p, w, f, y, E, x, N, T, D, F, U;
+}, Ve = (r) => {
+  var g, p, w, y, f, m, E, A, T, M, L, V;
   const e = (g = r == null ? void 0 : r.scale) == null ? void 0 : g.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let s;
-  o !== void 0 ? Array.isArray(o) ? s = ar(
+  o !== void 0 ? Array.isArray(o) ? s = dr(
     o.map(
-      (R) => De(R)
+      (D) => Le(D)
     )
-  ) : s = De(o) : s = (R) => R.nextTransform;
-  const n = ((p = r == null ? void 0 : r.shift) == null ? void 0 : p.cursor) !== void 0 ? r.shift.cursor : "grab", a = (w = r == null ? void 0 : r.shift) == null ? void 0 : w.mouseDownEventVerifier, h = a !== void 0 ? a : (R) => R.button === 0, d = (f = r == null ? void 0 : r.shift) == null ? void 0 : f.mouseUpEventVerifier, c = d !== void 0 ? d : (R) => R.button === 0, l = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelEventVerifier, u = l !== void 0 ? l : () => !0;
+  ) : s = Le(o) : s = (D) => D.nextTransform;
+  const n = ((p = r == null ? void 0 : r.shift) == null ? void 0 : p.cursor) !== void 0 ? r.shift.cursor : "grab", a = (w = r == null ? void 0 : r.shift) == null ? void 0 : w.mouseDownEventVerifier, h = a !== void 0 ? a : (D) => D.button === 0, d = (y = r == null ? void 0 : r.shift) == null ? void 0 : y.mouseUpEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, u = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelEventVerifier, l = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onTransformStarted) ?? P,
-    onTransformFinished: ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformFinished) ?? P,
-    onBeforeTransformChange: ((N = r == null ? void 0 : r.events) == null ? void 0 : N.onBeforeTransformChange) ?? P,
-    onTransformChange: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onTransformChange) ?? P,
+    onTransformStarted: ((m = r == null ? void 0 : r.events) == null ? void 0 : m.onTransformStarted) ?? N,
+    onTransformFinished: ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onTransformFinished) ?? N,
+    onBeforeTransformChange: ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onBeforeTransformChange) ?? N,
+    onTransformChange: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onTransformChange) ?? N,
     transformPreprocessor: s,
     shiftCursor: n,
     mouseDownEventVerifier: h,
     mouseUpEventVerifier: c,
-    mouseWheelEventVerifier: u,
-    scaleWheelFinishTimeout: ((D = r == null ? void 0 : r.scale) == null ? void 0 : D.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((F = r == null ? void 0 : r.events) == null ? void 0 : F.onResizeTransformStarted) ?? P,
-    onResizeTransformFinished: ((U = r == null ? void 0 : r.events) == null ? void 0 : U.onResizeTransformFinished) ?? P
+    mouseWheelEventVerifier: l,
+    scaleWheelFinishTimeout: ((M = r == null ? void 0 : r.scale) == null ? void 0 : M.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((L = r == null ? void 0 : r.events) == null ? void 0 : L.onResizeTransformStarted) ?? N,
+    onResizeTransformFinished: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onResizeTransformFinished) ?? N
   };
-}, hr = (r, e) => {
+}, cr = (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;
-}, dr = (r) => r instanceof SVGElement ? r : hr(
+}, lr = (r) => r instanceof SVGElement ? r : cr(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), cr = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = dr(r.renderer ?? {});
+), ur = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = lr(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: o,
@@ -3874,13 +3861,13 @@ const b = Object.freeze({
   connectionPreprocessor: (r) => r,
   connectionAllowedVerifier: () => !0,
   mouseEventVerifier: (r) => r.button === 0
-}), lr = (r, e, t) => {
+}), gr = (r, e, t) => {
   var s, n, a;
   const o = r.connectionAllowedVerifier ?? $.connectionAllowedVerifier;
   return {
     connectionTypeResolver: r.connectionTypeResolver ?? $.connectionTypeResolver,
     connectionAllowedVerifier: o,
-    draggingPortDirectionResolver: _e(
+    draggingPortDirectionResolver: et(
       r.dragPortDirection,
       t,
       o
@@ -3889,9 +3876,9 @@ const b = Object.freeze({
     connectionPreprocessor: r.connectionPreprocessor ?? $.connectionPreprocessor,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? $.mouseEventVerifier,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? $.mouseEventVerifier,
-    onAfterEdgeCreated: ((s = r.events) == null ? void 0 : s.onAfterEdgeCreated) ?? P,
-    onEdgeCreationInterrupted: ((n = r.events) == null ? void 0 : n.onEdgeCreationInterrupted) ?? P,
-    onEdgeCreationPrevented: ((a = r.events) == null ? void 0 : a.onEdgeCreationPrevented) ?? P
+    onAfterEdgeCreated: ((s = r.events) == null ? void 0 : s.onAfterEdgeCreated) ?? N,
+    onEdgeCreationInterrupted: ((n = r.events) == null ? void 0 : n.onEdgeCreationInterrupted) ?? N,
+    onEdgeCreationPrevented: ((a = r.events) == null ? void 0 : a.onEdgeCreationPrevented) ?? N
   };
 }, z = Object.freeze({
   connectionAllowedVerifier: () => !0,
@@ -3899,7 +3886,7 @@ const b = Object.freeze({
   // TODO: remove ctrl key
   mouseDownEventVerifier: (r) => r.button === 0 && r.ctrlKey,
   mouseUpEventVerifier: (r) => r.button === 0
-}), ur = (r, e) => {
+}), pr = (r, e) => {
   var s, n, a;
   const t = (h) => {
     const d = e.getPortAdjacentEdgeIds(h);
@@ -3912,32 +3899,32 @@ const b = Object.freeze({
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? z.mouseUpEventVerifier,
     draggingEdgeResolver: r.draggingEdgeResolver ?? t,
     draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ve(r.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((s = r.events) == null ? void 0 : s.onAfterEdgeReattached) ?? P,
-    onEdgeReattachInterrupted: ((n = r.events) == null ? void 0 : n.onEdgeReattachInterrupted) ?? P,
-    onEdgeReattachPrevented: ((a = r.events) == null ? void 0 : a.onEdgeReattachPrevented) ?? P,
-    draggingPortDirectionResolver: _e(
+    onAfterEdgeReattached: ((s = r.events) == null ? void 0 : s.onAfterEdgeReattached) ?? N,
+    onEdgeReattachInterrupted: ((n = r.events) == null ? void 0 : n.onEdgeReattachInterrupted) ?? N,
+    onEdgeReattachPrevented: ((a = r.events) == null ? void 0 : a.onEdgeReattachPrevented) ?? N,
+    draggingPortDirectionResolver: et(
       r.dragPortDirection,
       e,
       o
     )
   };
-}, gr = (r) => ({
+}, wr = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), pr = (r) => {
+}), yr = (r) => {
   var e, t;
   return {
-    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? P,
-    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? P
+    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? N,
+    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? N
   };
 };
-class wr extends Error {
+class fr extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasBuilderError");
   }
 }
-class qe {
+class tt {
   constructor(e, t, o) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3970,12 +3957,12 @@ class qe {
       const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), n = this.graph.getPort(o.to), a = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
         a,
         h
-      ), l = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, u = d.ex * l, g = d.ey * l, p = e.get(s.nodeId), w = e.get(n.nodeId);
-      p.x += u, p.y += g, w.x -= u, w.y -= g;
+      ), u = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * u, g = d.ey * u, p = e.get(s.nodeId), w = e.get(n.nodeId);
+      p.x += l, p.y += g, w.x -= l, w.y -= g;
     });
   }
 }
-class et {
+class rt {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3994,13 +3981,13 @@ class et {
     return { ex: h, ey: d, d: a };
   }
 }
-const tt = (r) => {
+const ot = (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 fr {
+class vr {
   constructor(e) {
     i(this, "nodeCharge");
     i(this, "distanceVectorGenerator");
@@ -4012,22 +3999,22 @@ class fr {
     for (let n = 0; n < s; n++) {
       const a = o[n];
       for (let h = n + 1; h < s; h++) {
-        const d = o[h], c = e.get(a), l = e.get(d), u = this.distanceVectorGenerator.create(
+        const d = o[h], c = e.get(a), u = e.get(d), l = this.distanceVectorGenerator.create(
           c,
-          l
-        ), g = tt({
+          u
+        ), g = ot({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
-          distance: u.d,
+          distance: l.d,
           maxForce: this.maxForce
-        }), p = g * u.ex, w = g * u.ey, f = t.get(a), y = t.get(d);
-        f.x -= p, f.y -= w, y.x += p, y.y += w;
+        }), p = g * l.ex, w = g * l.ey, y = t.get(a), f = t.get(d);
+        y.x -= p, y.y -= w, f.x += p, f.y += w;
       }
     }
   }
 }
-const yr = (r) => {
+const mr = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -4045,7 +4032,7 @@ const yr = (r) => {
     radius: h / 2
   };
 };
-class vr {
+class xr {
   constructor(e) {
     i(this, "root");
     i(this, "leaves", /* @__PURE__ */ new Map());
@@ -4103,13 +4090,13 @@ class vr {
       const { x: p, y: w } = this.coords.get(g);
       p < t ? w < o ? d.add(g) : h.add(g) : w < o ? a.add(g) : n.add(g), e.nodeIds.delete(g);
     });
-    const l = {
+    const u = {
       parent: e,
       lb: null,
       lt: null,
       rb: null,
       rt: null
-    }, u = [];
+    }, l = [];
     if (n.size > 0) {
       const g = {
         nodeIds: n,
@@ -4124,9 +4111,9 @@ class vr {
           centerY: o + c,
           radius: c
         },
-        ...l
+        ...u
       };
-      e.rt = g, u.push(g);
+      e.rt = g, l.push(g);
     }
     if (a.size > 0) {
       const g = {
@@ -4142,9 +4129,9 @@ class vr {
           centerY: o - c,
           radius: c
         },
-        ...l
+        ...u
       };
-      e.rb = g, u.push(g);
+      e.rb = g, l.push(g);
     }
     if (h.size > 0) {
       const g = {
@@ -4160,9 +4147,9 @@ class vr {
           centerY: o + c,
           radius: c
         },
-        ...l
+        ...u
       };
-      e.lt = g, u.push(g);
+      e.lt = g, l.push(g);
     }
     if (d.size > 0) {
       const g = {
@@ -4178,11 +4165,11 @@ class vr {
           centerY: o - c,
           radius: c
         },
-        ...l
+        ...u
       };
-      e.lb = g, u.push(g);
+      e.lb = g, l.push(g);
     }
-    return 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) => {
@@ -4202,7 +4189,7 @@ class vr {
     }), { x: t / e.size, y: o / e.size };
   }
 }
-class mr {
+class Er {
   constructor(e) {
     i(this, "areaRadiusThreshold");
     i(this, "nodeMass");
@@ -4214,7 +4201,7 @@ class mr {
     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 o = yr(e), s = new vr({
+    const o = mr(e), s = new xr({
       box: o,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -4329,7 +4316,7 @@ class mr {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), o = tt({
+    ), o = ot({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -4364,7 +4351,7 @@ class mr {
     }
   }
 }
-const rt = (r) => r.theta !== 0 ? new mr({
+const st = (r) => r.theta !== 0 ? new Er({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -4372,13 +4359,13 @@ const rt = (r) => r.theta !== 0 ? new mr({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new fr({
+}) : new vr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class ot {
+class it {
   constructor(e) {
     i(this, "rand");
     i(this, "sparsity");
@@ -4386,22 +4373,22 @@ class ot {
   }
   calculateCoordinates(e) {
     const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((w) => {
-      const f = t.getNode(w);
-      return f.x === null || f.y === null;
-    }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, l = o.createContentCoords(c), u = a / 2, g = {
-      x: l.x - u,
-      y: l.y - u
+      const y = t.getNode(w);
+      return y.x === null || y.y === null;
+    }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, u = o.createContentCoords(c), l = a / 2, g = {
+      x: u.x - l,
+      y: u.y - l
     };
     return t.getAllNodeIds().forEach((w) => {
-      const f = t.getNode(w);
+      const y = t.getNode(w);
       s.set(w, {
-        x: f.x ?? g.x + a * this.rand(),
-        y: f.y ?? g.y + a * this.rand()
+        x: y.x ?? g.x + a * this.rand(),
+        y: y.y ?? g.y + a * this.rand()
       });
     }), s;
   }
 }
-class Er {
+class Ar {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4412,7 +4399,7 @@ class Er {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "convergenceVelocity");
-    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new et(e.rand), this.nodeForcesApplicationStrategy = rt({
+    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new rt(e.rand), this.nodeForcesApplicationStrategy = st({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4420,7 +4407,7 @@ class Er {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new ot({
+    }), this.fillerLayoutAlgorithm = new it({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4430,7 +4417,7 @@ class Er {
       graph: t,
       viewport: o
     });
-    for (let n = 0; n < this.maxIterations && !(new qe(
+    for (let n = 0; n < this.maxIterations && !(new tt(
       t,
       s,
       {
@@ -4446,7 +4433,7 @@ class Er {
     return s;
   }
 }
-class xr {
+class Sr {
   constructor(e, t) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
@@ -4487,7 +4474,7 @@ class xr {
     }
   }
 }
-class Ar {
+class br {
   constructor(e) {
     this.params = e;
   }
@@ -4495,17 +4482,17 @@ class Ar {
     let t = 0;
     const o = [], s = e.length - 1, n = [];
     e.forEach((h, d) => {
-      if (t += this.params.spaceAroundRadius, h.forEach((c, l) => {
-        n[l] === void 0 ? n[l] = {
+      if (t += this.params.spaceAroundRadius, h.forEach((c, u) => {
+        n[u] === void 0 ? n[u] = {
           start: t + c.start,
           end: t + c.end
-        } : n[l].end = t + c.end;
+        } : n[u].end = t + c.end;
       }), o.push(t), d !== s) {
-        const c = e[d + 1], l = n.map((u) => ({
-          start: u.start - t,
-          end: u.end - t
+        const c = e[d + 1], u = n.map((l) => ({
+          start: l.start - t,
+          end: l.end - t
         }));
-        t += this.calculateMaxDiff(l, c);
+        t += this.calculateMaxDiff(u, c);
       }
       t += this.params.spaceAroundRadius;
     });
@@ -4528,12 +4515,12 @@ class Ar {
     return o - 2 * this.params.spaceAroundRadius;
   }
 }
-class Sr {
+class Pr {
   constructor(e, t) {
     i(this, "offsets", /* @__PURE__ */ new Map());
     i(this, "treeSpans", /* @__PURE__ */ new Map());
     this.tree = e;
-    const o = t.spaceAroundRadius, s = new Ar({
+    const o = t.spaceAroundRadius, s = new br({
       spaceAroundRadius: o
     });
     [...this.tree.sequence].reverse().forEach((n) => {
@@ -4555,40 +4542,40 @@ class Sr {
     return this.offsets;
   }
 }
-class br {
+class Nr {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), s = new xr(
+    const t = /* @__PURE__ */ new Map(), s = new Sr(
       e.graph,
       this.params.nextLayerNodesResolver
     ).generate();
     let n = 0;
     return s.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
-      const d = new Sr(a, {
+      const d = new Pr(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
       let c = [a.root];
       for (; c.length > 0; ) {
-        const l = [];
-        n += this.params.layerWidth, c.forEach((u) => {
-          u.children.forEach((g) => {
-            const p = t.get(u.nodeId).y;
+        const u = [];
+        n += this.params.layerWidth, c.forEach((l) => {
+          l.children.forEach((g) => {
+            const p = t.get(l.nodeId).y;
             t.set(g.nodeId, {
               y: p + d.get(g.nodeId),
               x: n
-            }), l.push(g);
+            }), u.push(g);
           });
-        }), c = l;
+        }), c = u;
       }
     }), t.forEach((a, h) => {
       t.set(h, this.params.transform(a));
     }), t;
   }
 }
-const Pr = (r) => {
+const Cr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((n) => {
     const a = e.getEdge(n);
     return e.getPort(a.to).nodeId;
@@ -4597,20 +4584,20 @@ const Pr = (r) => {
     return e.getPort(a.from).nodeId;
   });
   return /* @__PURE__ */ new Set([...o, ...s]);
-}, Nr = (r) => {
+}, Tr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((s) => {
     const n = e.getEdge(s);
     return e.getPort(n.to).nodeId;
   });
   return new Set(o);
-}, Cr = (r) => {
+}, Mr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeIncomingEdgeIds(t).map((s) => {
     const n = e.getEdge(s);
     return e.getPort(n.from).nodeId;
   });
   return new Set(o);
 };
-class Tr {
+class Dr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4620,7 +4607,7 @@ class Tr {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "fillerLayoutAlgorithm");
-    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new et(e.rand), this.nodeForcesApplicationStrategy = rt({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new rt(e.rand), this.nodeForcesApplicationStrategy = st({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4628,7 +4615,7 @@ class Tr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new ot({
+    }), this.fillerLayoutAlgorithm = new it({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4638,7 +4625,7 @@ class Tr {
       graph: t,
       viewport: o
     });
-    return new qe(
+    return new tt(
       t,
       n,
       {
@@ -4650,65 +4637,65 @@ class Tr {
         edgeStiffness: this.edgeStiffness
       }
     ).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((c) => {
-      const l = t.getNode(c);
-      return l.x === null || l.y === null;
+      const u = t.getNode(c);
+      return u.x === null || u.y === null;
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const st = (r) => {
+const nt = (r) => {
   let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
   for (let n = 0, a; n < r.length; n++)
     a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = o ^ Math.imul(t ^ a, 2869860233), o = s ^ Math.imul(o ^ a, 951274213), s = e ^ Math.imul(s ^ a, 2716044179);
   return e = Math.imul(o ^ e >>> 18, 597399067), t = Math.imul(s ^ t >>> 22, 2869860233), o = Math.imul(e ^ o >>> 17, 951274213), s = Math.imul(t ^ s >>> 19, 2716044179), e ^= t ^ o ^ s, t ^= e, o ^= e, s ^= e, [e >>> 0, t >>> 0, o >>> 0, s >>> 0];
-}, it = (r, e, t, o) => function() {
+}, at = (r, e, t, o) => function() {
   r |= 0, e |= 0, t |= 0, o |= 0;
   const s = (r + e | 0) + o | 0;
   return o = o + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + s | 0, (s >>> 0) / 4294967296;
-}, Mr = (r) => {
+}, Rr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const o = st((r == null ? void 0 : r.seed) ?? b.seed), s = it(o[0], o[1], o[2], o[3]);
-      return new Tr({
+      const o = nt((r == null ? void 0 : r.seed) ?? P.seed), s = at(o[0], o[1], o[2], o[3]);
+      return new Dr({
         rand: s,
-        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? b.maxTimeDeltaSec,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? b.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? b.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? b.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? b.edgeStiffness,
+        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? P.maxTimeDeltaSec,
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? P.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? P.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? P.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? P.edgeStiffness,
         // TODO: rename no `minVelocity`
-        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? b.convergenceVelocity,
-        maxForce: (r == null ? void 0 : r.maxForce) ?? b.maxForce,
-        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? b.nodeForceCoefficient,
-        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? b.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? b.barnesHutAreaRadiusThreshold
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? P.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? P.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? P.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? P.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? P.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, Dr = {
+}, Lr = {
   staticNodeResolver: () => !1
-}, Rr = (r) => {
+}, Vr = (r) => {
   var t, o;
   return {
-    algorithm: Mr((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Dr.staticNodeResolver,
-    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? P,
-    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? P
+    algorithm: Rr((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Lr.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? N,
+    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? N
   };
-}, Lr = (r) => r instanceof q ? {
+}, Ir = (r) => r instanceof q ? {
   type: "trigger",
   trigger: r
 } : r === "topologyChangeMicrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Ce
+  schedule: Me
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Xt
+  schedule: jt
 } : {
   type: "topologyChangeSchedule",
-  schedule: Ce
+  schedule: Me
 }, Z = Object.freeze({
   staticNodeResolver: () => !1,
   hierarchicalLayout: {
@@ -4722,7 +4709,7 @@ const st = (r) => {
   d: r.d * e.a + r.e * e.d,
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
-}), Vr = (r) => {
+}), Fr = (r) => {
   const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
     a: n / h,
@@ -4733,7 +4720,7 @@ const st = (r) => {
     f: (o * s - e * a) / h
   };
 };
-class Ir {
+class Ur {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4777,7 +4764,7 @@ class Ir {
     const o = k(
       t,
       e
-    ), s = Vr(t);
+    ), s = Fr(t);
     return k(o, s);
   }
   createShiftBaseMatrix(e) {
@@ -4822,7 +4809,7 @@ class Ir {
     };
   }
 }
-const Fr = (r) => {
+const $r = (r) => {
   if (r === void 0)
     return (s) => s;
   if (typeof r == "function")
@@ -4836,7 +4823,7 @@ const Fr = (r) => {
     e: 1,
     f: 0
   };
-  const o = new Ir();
+  const o = new Ur();
   return e.forEach((s) => {
     const n = o.resolve(s);
     t = k(t, n);
@@ -4847,59 +4834,59 @@ const Fr = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, Ur = (r) => {
+}, Br = (r) => {
   if (typeof r == "function")
     return r;
   switch (r) {
     case "outgoing":
-      return Nr;
+      return Tr;
     case "incoming":
-      return Cr;
+      return Mr;
     default:
-      return Pr;
+      return Cr;
   }
-}, $r = (r) => {
+}, Or = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
-      return new br({
+      return new Nr({
         layerWidth: r.layerWidth ?? Z.hierarchicalLayout.layerWidth,
         layerSpace: r.layerSpace ?? Z.hierarchicalLayout.layerSpace,
-        transform: Fr(r.transform),
-        nextLayerNodesResolver: Ur(
+        transform: $r(r.transform),
+        nextLayerNodesResolver: Br(
           r.nextLayerNodesResolver
         )
       });
     default: {
-      const o = st((r == null ? void 0 : r.seed) ?? b.seed), s = it(o[0], o[1], o[2], o[3]);
-      return new Er({
-        dtSec: (r == null ? void 0 : r.dtSec) ?? b.dtSec,
-        maxIterations: (r == null ? void 0 : r.maxIterations) ?? b.maxIterations,
+      const o = nt((r == null ? void 0 : r.seed) ?? P.seed), s = at(o[0], o[1], o[2], o[3]);
+      return new Ar({
+        dtSec: (r == null ? void 0 : r.dtSec) ?? P.dtSec,
+        maxIterations: (r == null ? void 0 : r.maxIterations) ?? P.maxIterations,
         rand: s,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? b.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? b.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? b.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? b.edgeStiffness,
-        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? b.convergenceVelocity,
-        maxForce: (r == null ? void 0 : r.maxForce) ?? b.maxForce,
-        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? b.nodeForceCoefficient,
-        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? b.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? b.barnesHutAreaRadiusThreshold
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? P.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? P.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? P.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? P.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? P.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? P.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? P.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? P.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? P.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, Br = (r) => {
+}, Wr = (r) => {
   var e, t;
   return {
-    algorithm: $r(r.algorithm),
-    applyOn: Lr(r.applyOn),
+    algorithm: Or(r.algorithm),
+    applyOn: Ir(r.applyOn),
     staticNodeResolver: r.staticNodeResolver ?? Z.staticNodeResolver,
-    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? P,
-    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? P
+    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? N,
+    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? N
   };
-}, Or = (r, e) => ({
+}, zr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4907,7 +4894,7 @@ const Fr = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Wr = (r, e) => {
+}), kr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4915,28 +4902,28 @@ const Fr = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, zr = (r, e) => ({
+}, Hr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), _ = (r) => () => r, Le = _(0), kr = () => {
+}), _ = (r) => () => r, Ie = _(0), Yr = () => {
   let r = 0;
   return () => r++;
-}, Hr = (r, e) => {
-  let t = Le, o = Le;
-  const s = kr();
+}, Xr = (r, e) => {
+  let t = Ie, o = Ie;
+  const s = Yr();
   return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = _(r)), typeof e == "number" && (o = _(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
-}, Yr = (r) => {
+}, Gr = (r) => {
   var t, o, s, n, a;
-  const e = Hr(
+  const e = Xr(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? Be,
+      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? We,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
@@ -4947,9 +4934,9 @@ const Fr = (r) => {
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Xr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : oe, Gr = (r) => {
+}, jr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : oe, Jr = (r) => {
   var o, s, n, a;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Xr(r.layoutParams) : oe;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? jr(r.layoutParams) : oe;
   return {
     focus: {
       contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4958,23 +4945,23 @@ const Fr = (r) => {
       animationDuration: ((a = e.focus) == null ? void 0 : a.animationDuration) ?? 0
     }
   };
-}, jr = (r) => ({
+}, Kr = (r) => ({
   onNodeSelected: r.onNodeSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? L.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? L.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? L.movementThreshold
-}), Jr = (r) => ({
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? I.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? I.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? I.movementThreshold
+}), Qr = (r) => ({
   onCanvasSelected: r.onCanvasSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? L.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? L.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? L.movementThreshold
-}), Kr = (r) => ({
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? I.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? I.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? I.movementThreshold
+}), Zr = (r) => ({
   onEdgeSelected: r.onEdgeSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? L.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? L.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? L.movementThreshold
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? I.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? I.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? I.movementThreshold
 });
-class _r {
+class eo {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -5001,8 +4988,8 @@ class _r {
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     i(this, "pointInsideVerifier");
-    i(this, "eventTagger", new jt());
-    this.element = e, this.pointInsideVerifier = new mt(e, this.window);
+    i(this, "eventTagger", new Kt());
+    this.element = e, this.pointInsideVerifier = new Et(e, this.window);
   }
   setDefaults(e) {
     return this.canvasDefaults = e, this;
@@ -5045,44 +5032,44 @@ class _r {
   }
   build() {
     if (this.used)
-      throw new wr(
+      throw new fr(
         "Failed to build Canvas because CanvasBuilder is a single-use object"
       );
     this.used = !0;
-    const e = new ft(this.element), t = new Fe(), o = new or(this.element), s = this.createHtmlView(
+    const e = new vt(this.element), t = new $e(), o = new ir(this.element), s = this.createHtmlView(
       o.main,
       t,
       e
-    ), n = Yr(
+    ), n = Gr(
       this.canvasDefaults
-    ), a = new Ge(
+    ), a = new Je(
       t,
       s,
       n
-    ), h = Br(this.layoutConfig), d = Gr({
+    ), h = Wr(this.layoutConfig), d = Jr({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
-    }), c = new Qe(
+    }), c = new _e(
       t,
       e,
       d,
       this.window
-    ), l = new je(e), u = new Xe(t), g = new Ie(
-      u,
+    ), u = new Ke(e), l = new je(t), g = new Ue(
       l,
+      u,
       a,
       c
     );
     if (this.hasBackground && de.configure(
       g,
-      cr(this.backgroundConfig),
+      ur(this.backgroundConfig),
       o.background
     ), this.hasNodeResizeReactiveEdges && ee.configure(g), this.userSelectableEdgesConfig !== void 0) {
-      const p = Kr(
+      const p = Zr(
         this.userSelectableEdgesConfig
       );
-      fe.configure(
+      ye.configure(
         g,
         this.window,
         this.pointInsideVerifier,
@@ -5091,7 +5078,7 @@ class _r {
       );
     }
     if (this.userSelectableNodesConfig !== void 0) {
-      const p = jr(
+      const p = Kr(
         this.userSelectableNodesConfig
       );
       we.configure(
@@ -5103,10 +5090,10 @@ class _r {
       );
     }
     if (this.userSelectableCanvasConfig !== void 0) {
-      const p = Jr(
+      const p = Qr(
         this.userSelectableCanvasConfig
       );
-      ye.configure(
+      fe.configure(
         g,
         o.main,
         this.window,
@@ -5116,8 +5103,8 @@ class _r {
       );
     }
     if (this.hasDraggableNodes) {
-      let p = sr(this.dragConfig);
-      this.hasAnimatedLayout && (p = Or(
+      let p = nr(this.dragConfig);
+      this.hasAnimatedLayout && (p = zr(
         p,
         this.animationStaticNodes
       )), ae.configure(
@@ -5129,7 +5116,7 @@ class _r {
       );
     }
     if (this.hasUserConnectablePorts) {
-      const p = lr(
+      const p = gr(
         this.connectablePortsConfig,
         n.edges.shapeFactory,
         g.graph
@@ -5144,7 +5131,7 @@ class _r {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const p = ur(
+      const p = pr(
         this.draggableEdgesConfig,
         g.graph
       );
@@ -5161,22 +5148,22 @@ class _r {
       g,
       o.main,
       this.window,
-      Re(this.transformConfig),
+      Ve(this.transformConfig),
       this.boxRenderingTrigger,
       this.pointInsideVerifier,
-      gr(this.virtualScrollConfig)
+      wr(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && J.configure(
       g,
       o.main,
       this.window,
       this.pointInsideVerifier,
-      Re(this.transformConfig)
-    ), this.hasLayout && qt.configure(g, h), this.hasAnimatedLayout) {
-      let p = Rr(this.animatedLayoutConfig);
-      this.hasDraggableNodes && (Wr(
+      Ve(this.transformConfig)
+    ), this.hasLayout && tr.configure(g, h), this.hasAnimatedLayout) {
+      let p = Vr(this.animatedLayoutConfig);
+      this.hasDraggableNodes && (kr(
         g,
         this.animationStaticNodes
-      ), p = zr(
+      ), p = Hr(
         p,
         this.animationStaticNodes
       )), pe.configure(g, p, this.window);
@@ -5186,27 +5173,28 @@ class _r {
     }), g;
   }
   createHtmlView(e, t, o) {
-    let s = new Ve(t, o, e);
-    return this.virtualScrollConfig !== void 0 && (s = new gt(
+    let s = new Fe(t, o, e);
+    return this.virtualScrollConfig !== void 0 && (s = new wt(
       s,
       t,
       this.boxRenderingTrigger,
-      pr(this.virtualScrollConfig)
-    )), s = new pt(s, t), s;
+      yr(this.virtualScrollConfig)
+    )), s = new yt(s, t), s;
   }
 }
 export {
-  Bt as BezierEdgeShape,
-  _r as CanvasBuilder,
-  wr as CanvasBuilderError,
-  A as CanvasError,
-  I as ConnectionCategory,
-  He as DirectEdgeShape,
+  Ot as BezierEdgeShape,
+  eo as CanvasBuilder,
+  fr as CanvasBuilderError,
+  S as CanvasError,
+  U as ConnectionCategory,
+  Xe as DirectEdgeShape,
   q as EventSubject,
-  Ot as HorizontalEdgeShape,
-  Yt as InteractiveEdgeError,
-  Ye as InteractiveEdgeShape,
-  Zr as MidpointEdgeShape,
-  Wt as StraightEdgeShape,
-  zt as VerticalEdgeShape
+  Wt as HorizontalEdgeShape,
+  Gt as InteractiveEdgeError,
+  Ge as InteractiveEdgeShape,
+  qr as MidpointEdgeShape,
+  zt as StraightEdgeShape,
+  kt as VerticalEdgeShape,
+  Ht as boxPortOffsetFn
 };