@html-graph/html-graph 3.16.0 → 3.17.0

package/dist/html-graph.js

@@ -1,22 +1,23 @@
-var Ne = Object.defineProperty;
-var Me = (r, e, t) => e in r ? Ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Me(r, typeof e != "symbol" ? e + "" : e, t);
-const Le = () => {
+var Me = Object.defineProperty;
+var Le = (r, e, t) => e in r ? Me(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => Le(r, typeof e != "symbol" ? e + "" : e, t);
+const Re = () => {
   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;
-}, Re = () => {
+}, Ce = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ce = (r) => {
+}, Ve = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 }, T = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class ue {
+var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
+class pe {
   constructor(e, t, s) {
-    o(this, "host", Re());
-    o(this, "container", Le());
+    o(this, "host", Ce());
+    o(this, "container", Re());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -26,7 +27,7 @@ class ue {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ve(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -78,7 +79,8 @@ class ue {
       a,
       d
     );
-    t.shape.render({ from: c, to: l });
+    let g = L.Line;
+    s.element === i.element ? g = L.PortCycle : s.nodeId === i.nodeId && (g = L.NodeCycle), t.shape.render({ from: c, to: l, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -100,7 +102,7 @@ class ue {
     };
   }
 }
-class Ie {
+class Ue {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -120,8 +122,8 @@ class Ie {
     return a <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Ue {
-  constructor(e, t, s) {
+class Ie {
+  constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
     o(this, "renderingBox");
@@ -144,7 +146,7 @@ class Ue {
         this.handleAttachEdge(h);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ue(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -186,10 +188,10 @@ class Ue {
     this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
   }
   handleAttachNode(e) {
-    this.attachedNodes.add(e), this.htmlView.attachNode(e);
+    this.attachedNodes.add(e), this.params.onBeforeNodeAttached(e), this.htmlView.attachNode(e);
   }
   handleDetachNode(e) {
-    this.htmlView.detachNode(e), this.attachedNodes.delete(e);
+    this.htmlView.detachNode(e), this.params.onAfterNodeDetached(e), this.attachedNodes.delete(e);
   }
   handleAttachEdge(e) {
     this.attachedEdges.add(e), this.htmlView.attachEdge(e);
@@ -198,7 +200,7 @@ class Ue {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class pe {
+class we {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -215,10 +217,10 @@ class pe {
   }
 }
 const A = () => {
-  const r = new pe();
+  const r = new we();
   return [r, r];
 };
-class Ve {
+class Be {
   constructor(e) {
     o(this, "onBeforeUpdated");
     o(this, "onAfterUpdated");
@@ -231,7 +233,7 @@ class Ve {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Be {
+class We {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -339,7 +341,7 @@ class Be {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class O {
+class k {
   constructor(e) {
     o(this, "counter", 0);
     this.checkExists = e;
@@ -361,7 +363,7 @@ class S extends Error {
     o(this, "name", "HtmlGraphError");
   }
 }
-class we {
+class fe {
   constructor(e, t, s, i, n) {
     /**
      * provides api for accessing model of rendered graph
@@ -371,13 +373,13 @@ class we {
      * provides api for accessing viewport state
      */
     o(this, "viewport");
-    o(this, "nodeIdGenerator", new O(
+    o(this, "nodeIdGenerator", new k(
       (e) => this.graph.getNode(e) !== null
     ));
-    o(this, "portIdGenerator", new O(
+    o(this, "portIdGenerator", new k(
       (e) => this.graph.getPort(e) !== null
     ));
-    o(this, "edgeIdGenerator", new O(
+    o(this, "edgeIdGenerator", new k(
       (e) => this.graph.getEdge(e) !== null
     ));
     o(this, "onAfterNodeAdded", (e) => {
@@ -429,7 +431,7 @@ class we {
      * emits event just before destruction of canvas
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new Be(this.graphStore), this.viewport = new Ve(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Be(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
@@ -584,7 +586,7 @@ class we {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class We {
+class $e {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -624,7 +626,7 @@ class We {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class fe {
+class ve {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -633,7 +635,7 @@ class fe {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new We());
+    o(this, "elementPorts", new $e());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -806,19 +808,19 @@ class fe {
     this.cycleEdges.get(s).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const se = (r) => ({
+const ie = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ie = {
+}), ne = {
   scale: 1,
   x: 0,
   y: 0
 };
-class $e {
+class Fe {
   constructor() {
-    o(this, "viewportMatrix", ie);
-    o(this, "contentMatrix", ie);
+    o(this, "viewportMatrix", ne);
+    o(this, "contentMatrix", ne);
     o(this, "afterUpdateEmitter");
     o(this, "onAfterUpdated");
     o(this, "beforeUpdateEmitter");
@@ -836,17 +838,17 @@ class $e {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = se(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = ie(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.beforeUpdateEmitter.emit(), this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = se(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class Y {
+class H {
   constructor(e) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
@@ -872,19 +874,19 @@ class Y {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e) {
-    new Y(e);
+    new H(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const Fe = (r, e, t) => {
+const Oe = (r, e, t) => {
   const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= i && t <= i + h;
-}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
+}, ke = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => Oe(e, t, s) && ke(r, t, s), I = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, V = (r) => {
+}, B = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayId,
@@ -899,22 +901,22 @@ const Fe = (r, e, t) => {
       }
     ]
   };
-}, ke = (r, e) => {
+}, ze = (r, e) => {
   let t = e, s = null;
   for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
     t = t.parentElement;
   return s;
-}, ve = (r, e) => {
+}, me = (r, e) => {
   const t = document.elementsFromPoint(e.x, e.y);
   for (const s of t) {
-    const i = ke(r, s);
+    const i = ze(r, s);
     if (i !== null)
       return i;
   }
   return null;
 };
-var b = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(b || {});
-const me = (r, e) => ({
+var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
+const ye = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), m = (r, e, t) => ({
@@ -924,7 +926,7 @@ const me = (r, e) => ({
   x: 0,
   y: 0
 };
-class ze {
+class Xe {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -949,11 +951,11 @@ class ze {
     this.path = `${d}${a}${c}`;
   }
 }
-const ye = (r, e, t, s) => ({
+const Ee = (r, e, t, s) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class Xe {
+class Ye {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1005,10 +1007,10 @@ class Xe {
       `C ${v.x} ${v.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
       `C ${x.x} ${x.y} ${y.x} ${y.y} ${g.x} ${g.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = ye(f, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = Ee(f, e.flipX, e.flipY, e.to);
   }
 }
-const C = (r, e) => {
+const V = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const s = r.length - 1;
@@ -1017,8 +1019,8 @@ const C = (r, e) => {
       let c = 0, l = 0, g = 0;
       const p = d > 0, f = d < s, v = p && f;
       if (p && (c = -i, l = -n, g = h), f) {
-        const R = r[d + 1];
-        i = R.x - a.x, n = R.y - a.y, h = Math.sqrt(i * i + n * n);
+        const C = r[d + 1];
+        i = C.x - a.x, n = C.y - a.y, h = Math.sqrt(i * i + n * n);
       }
       const E = h !== 0 ? Math.min((v ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: a.x + i * E, y: a.y + n * E } : a, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: a.x + c * D, y: a.y + l * D } : a;
       d > 0 && t.push(`L ${N.x} ${N.y}`), v && t.push(
@@ -1028,7 +1030,7 @@ const C = (r, e) => {
   }
   return t.join(" ");
 };
-class Ye {
+class He {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1061,13 +1063,13 @@ class Ye {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
     }, v = { x: f.x, y: l };
-    this.path = C(
+    this.path = V(
       [s, a, g, p, v, f, d, i],
       this.params.roundness
     );
   }
 }
-class H {
+class j {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1092,13 +1094,13 @@ class H {
       this.params.targetDirection,
       this.params.to
     ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
-    this.midpoint = ye(f, e.flipX, e.flipY, e.to), this.path = C(
+    this.midpoint = Ee(f, e.flipX, e.flipY, e.to), this.path = V(
       [t, n, l, p, g, s],
       this.params.roundness
     );
   }
 }
-class He {
+class je {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1125,10 +1127,10 @@ class He {
       this.params.targetDirection,
       this.params.to
     );
-    this.path = C([s, h, a, i], this.params.roundness);
+    this.path = V([s, h, a, i], this.params.roundness);
   }
 }
-class je {
+class Ge {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1161,13 +1163,13 @@ class je {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
     }, v = { x: l, y: f.y };
-    this.path = C(
+    this.path = V(
       [s, a, g, p, v, f, d, i],
       this.params.roundness
     );
   }
 }
-class j {
+class G {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1184,10 +1186,10 @@ class j {
     ].map(
       (c) => m(c, this.params.sourceDirection, w)
     ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${C(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${V(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
   }
 }
-class Ge {
+class Ke {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1208,7 +1210,7 @@ class Ge {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
   }
 }
-class Ke {
+class Ze {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1244,22 +1246,22 @@ class Ke {
     };
   }
 }
-const Ee = (r, e) => {
+const Ae = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
-}, G = Object.freeze({
+}, K = Object.freeze({
   edgeColor: "--edge-color"
-}), Ae = (r) => {
+}), xe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
-}, B = () => {
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
+}, W = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${G.edgeColor})`), r;
-}, xe = () => {
+  return r.setAttribute("fill", `var(${K.edgeColor})`), r;
+}, Se = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Se = (r) => {
+}, Pe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+  return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, be = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
@@ -1276,7 +1278,7 @@ const Ee = (r, e) => {
     flipX: d,
     flipY: c
   };
-}, k = (r, e, t, s) => {
+}, z = (r, e, t, s) => {
   const n = [
     w,
     { x: t, y: s },
@@ -1301,29 +1303,29 @@ const Ee = (r, e) => {
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ne = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class W {
+}), he = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class $ {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", xe());
+    o(this, "group", Se());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = xe(e.color), this.svg.appendChild(this.group), this.line = Pe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
       e.from,
       e.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = ne(
+    Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = he(
       e.from.direction,
       h,
       a
-    ), c = ne(
+    ), c = he(
       e.to.direction,
       h,
       a
@@ -1332,7 +1334,7 @@ class W {
       y: n
     };
     let g = c, p = -this.params.arrowLength, f;
-    e.from.portId === e.to.portId ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? f = this.params.createDetourPath : f = this.params.createLinePath;
+    e.category === L.PortCycle ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.category === L.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
     const v = f(
       d,
       c,
@@ -1342,14 +1344,14 @@ class W {
     );
     this.line.setAttribute("d", v.path);
     let y = null;
-    this.sourceArrow && (y = k(
+    this.sourceArrow && (y = z(
       d,
       w,
       this.params.arrowLength,
       this.params.arrowWidth
     ), this.sourceArrow.setAttribute("d", y));
     let E = null;
-    this.targetArrow && (E = k(
+    this.targetArrow && (E = z(
       g,
       l,
       p,
@@ -1361,7 +1363,7 @@ class W {
     });
   }
 }
-class Ze {
+class Je {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1379,7 +1381,7 @@ class Ze {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Ge({
+    o(this, "createCyclePath", (e) => new Ke({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1387,7 +1389,7 @@ class Ze {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
+    o(this, "createDetourPath", (e, t, s, i, n) => new Ye({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1400,7 +1402,7 @@ class Ze {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new ze({
+    o(this, "createLinePath", (e, t, s) => new Xe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1409,7 +1411,7 @@ class Ze {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1425,7 +1427,7 @@ class Ze {
     this.pathShape.render(e);
   }
 }
-class Je {
+class Qe {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1443,7 +1445,7 @@ class Je {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new j({
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1452,7 +1454,7 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1466,7 +1468,7 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new Ye({
+    o(this, "createLinePath", (e, t, s, i) => new He({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1483,7 +1485,7 @@ class Je {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1499,7 +1501,7 @@ class Je {
     this.pathShape.render(e);
   }
 }
-class Qe {
+class _e {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1517,7 +1519,7 @@ class Qe {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new j({
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1526,7 +1528,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1540,7 +1542,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new He({
+    o(this, "createLinePath", (e, t, s) => new je({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1556,7 +1558,7 @@ class Qe {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1572,7 +1574,7 @@ class Qe {
     this.pathShape.render(e);
   }
 }
-class _e {
+class qe {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1590,7 +1592,7 @@ class _e {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new j({
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1599,7 +1601,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1613,7 +1615,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new je({
+    o(this, "createLinePath", (e, t, s, i, n) => new Ge({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1630,7 +1632,7 @@ class _e {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new W({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1646,7 +1648,7 @@ class _e {
     this.pathShape.render(e);
   }
 }
-const he = (r) => {
+const ae = (r) => {
   if (r.diagonalDistance === 0)
     return "";
   const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
@@ -1656,17 +1658,17 @@ const he = (r) => {
     x: t / r.diagonalDistance,
     y: s / r.diagonalDistance
   };
-  return k(
+  return z(
     n,
     i,
     r.arrowLength,
     r.arrowWidth
   );
 };
-class Pe {
+class Te {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", xe());
+    o(this, "group", Se());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -1678,15 +1680,15 @@ class Pe {
     o(this, "targetOffset");
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = xe(this.color), this.svg.appendChild(this.group), this.line = Pe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
       e.from,
       e.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = { x: i, y: n }, c = new Ke({
+    Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = { x: i, y: n }, c = new Ze({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1696,7 +1698,7 @@ class Pe {
     });
     this.line.setAttribute("d", c.path);
     let l = null;
-    this.sourceArrow && (l = he({
+    this.sourceArrow && (l = ae({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.sourceOffset,
@@ -1706,7 +1708,7 @@ class Pe {
       arrowLength: this.arrowLength
     }), this.sourceArrow.setAttribute("d", l));
     let g = null;
-    this.targetArrow && (g = he({
+    this.targetArrow && (g = ae({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.targetOffset,
@@ -1721,40 +1723,40 @@ class Pe {
     });
   }
 }
-const qe = () => {
+const et = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, et = (r) => {
+}, tt = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, ae = (r) => {
+}, de = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class tt extends Error {
+class rt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Te {
+class De {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", qe());
+    o(this, "handle", et());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Te)
-      throw new tt(
+    if (this.baseEdge = e, e instanceof De)
+      throw new rt(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
     const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
-    this.interactiveLine = et(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ae(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ae(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = tt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = de(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = de(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
@@ -1762,7 +1764,7 @@ class Te {
     this.baseEdge.render(e);
   }
 }
-class xt {
+class bt {
   constructor(e, t) {
     o(this, "group");
     o(this, "line");
@@ -1784,21 +1786,21 @@ class xt {
     this.baseShape.render(e);
   }
 }
-const De = (r, e) => {
-  const t = new fe(), s = new ue(t, e, r), i = {
+const Ne = (r, e) => {
+  const t = new ve(), s = new pe(t, e, r), i = {
     nodes: {
-      centerFn: me,
+      centerFn: ye,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Pe(),
+      shapeFactory: () => new Te(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
   };
-  return new we(
+  return new fe(
     r,
     t,
     e,
@@ -1806,7 +1808,7 @@ const De = (r, e) => {
     i
   );
 };
-class K {
+class Z {
   constructor(e, t, s, i) {
     o(this, "grabbedNodeId", null);
     o(this, "maxNodePriority", 0);
@@ -1846,7 +1848,7 @@ class K {
         element: i.element,
         x: i.x,
         y: i.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, U(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, I(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
@@ -1874,7 +1876,7 @@ class K {
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -1892,7 +1894,7 @@ class K {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -1915,7 +1917,7 @@ class K {
     this.canvas = e, this.element = t, this.window = s, this.config = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new K(e, t, s, i);
+    new Z(e, t, s, i);
   }
   dragNode(e, t, s) {
     const i = this.graph.getNode(e);
@@ -1953,7 +1955,7 @@ class K {
       element: e.element,
       x: e.x,
       y: e.y
-    }), this.grabbedNodeId = null, U(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, I(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1976,15 +1978,15 @@ class K {
     this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
 }
-const rt = (r, e, t) => ({
+const ot = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), ot = (r, e, t, s) => ({
+}), st = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
-}), I = (r) => {
+}), U = (r) => {
   const e = [], t = r.touches.length;
   for (let a = 0; a < t; a++)
     e.push([r.touches[a].clientX, r.touches[a].clientY]);
@@ -2003,7 +2005,7 @@ const rt = (r, e, t) => ({
     touches: e
   };
 };
-class $ {
+class F {
   constructor(e, t, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
@@ -2013,14 +2015,14 @@ class $ {
       this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("wheel", this.preventWheelScaleListener), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (I(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
     o(this, "onWindowMouseMove", (e) => {
-      const t = L(
+      const t = R(
         this.window,
         this.element,
         e.clientX,
@@ -2046,10 +2048,10 @@ class $ {
     });
     o(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = I(e);
+        this.prevTouches = U(e);
         return;
       }
-      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = U(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2058,9 +2060,9 @@ class $ {
       }), this.startRegisteredTransform();
     });
     o(this, "onWindowTouchMove", (e) => {
-      const t = I(e);
+      const t = U(e);
       if (!t.touches.every(
-        (i) => L(this.window, this.element, i[0], i[1])
+        (i) => R(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2075,7 +2077,7 @@ class $ {
       this.prevTouches = t;
     });
     o(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = U(e) : this.stopTouchDrag();
     });
     o(this, "observer", new ResizeObserver(() => {
       const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
@@ -2100,10 +2102,10 @@ class $ {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new $(e, t, s, i);
+    new F(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = rt(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = ot(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
@@ -2112,7 +2114,7 @@ class $ {
     this.performTransform(a);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = ot(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = st(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: h,
@@ -2121,7 +2123,7 @@ class $ {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2142,7 +2144,7 @@ class $ {
     this.transformInProgress = !1, this.params.onTransformFinished();
   }
 }
-class Z {
+class J {
   constructor(e, t, s, i, n, h) {
     o(this, "canvasResizeObserver");
     o(this, "nodeHorizontal");
@@ -2174,7 +2176,7 @@ class Z {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     o(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
+    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
@@ -2198,7 +2200,7 @@ class Z {
         this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
       }
     };
-    $.configure(
+    F.configure(
       e,
       this.element,
       this.window,
@@ -2206,7 +2208,7 @@ class Z {
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i, n, h) {
-    new Z(
+    new J(
       e,
       t,
       s,
@@ -2229,24 +2231,24 @@ class Z {
     this.trigger.emit({ x: s, y: i, width: n, height: h });
   }
 }
-const st = () => {
+const it = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, it = () => {
+}, nt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, nt = () => {
+}, ht = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class J {
+class Q {
   constructor(e, t, s) {
-    o(this, "svg", st());
-    o(this, "patternRenderingRectangle", it());
-    o(this, "pattern", nt());
+    o(this, "svg", it());
+    o(this, "patternRenderingRectangle", nt());
+    o(this, "pattern", ht());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2276,14 +2278,14 @@ class J {
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.host), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated(), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s) {
-    new J(e, t, s);
+    new Q(e, t, s);
   }
   updateVisibility() {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
     t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-class F {
+class O {
   constructor(e, t, s, i) {
     o(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2307,7 +2309,7 @@ class F {
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -2338,7 +2340,7 @@ class F {
     });
     o(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -2367,7 +2369,7 @@ class F {
     this.canvas = e, this.element = t, this.window = s, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new F(e, t, s, i);
+    new O(e, t, s, i);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2386,7 +2388,7 @@ class F {
     this.params.onStopDrag(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Q {
+class _ {
   constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
@@ -2394,10 +2396,10 @@ class Q {
     o(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
-    ), F.configure(
+    ), O.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2421,7 +2423,7 @@ class Q {
     );
   }
   static configure(e, t, s, i, n) {
-    new Q(
+    new _(
       e,
       t,
       s,
@@ -2439,27 +2441,27 @@ class Q {
       x: t.x - d.x,
       y: t.y - d.y
     }), p = {
-      overlayId: b.Static,
+      overlayId: P.Static,
       portCoords: l,
       portDirection: i.direction
     }, f = {
-      overlayId: b.Dragging,
+      overlayId: P.Dragging,
       portCoords: g,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
     const [v, y] = this.isTargetDragging ? [p, f] : [f, p];
-    this.overlayCanvas.addNode(V(v)), this.overlayCanvas.addNode(V(y)), this.overlayCanvas.addEdge({
+    this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addEdge({
       from: v.overlayId,
       to: y.overlayId,
-      shape: this.params.edgeShapeFactory(b.Edge)
+      shape: this.params.edgeShapeFactory(P.Edge)
     });
   }
   resetDragState() {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = ve(this.canvas.graph, e);
+    const t = me(this.canvas.graph, e);
     if (t === null) {
       this.params.onEdgeCreationInterrupted(
         this.staticPortId,
@@ -2475,13 +2477,13 @@ class Q {
       x: e.x - t.x,
       y: e.y - t.y
     }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
 }
-class _ {
+class q {
   constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
@@ -2490,10 +2492,10 @@ class _ {
     o(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
-    ), F.configure(
+    ), O.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2514,7 +2516,7 @@ class _ {
     );
   }
   static configure(e, t, s, i, n) {
-    new _(
+    new q(
       e,
       t,
       s,
@@ -2549,19 +2551,19 @@ class _ {
       priority: i.priority
     }, this.canvas.removeEdge(s);
     const E = {
-      overlayId: b.Static,
+      overlayId: P.Static,
       portCoords: v,
       portDirection: c.direction
     }, x = {
-      overlayId: b.Dragging,
+      overlayId: P.Dragging,
       portCoords: y,
       portDirection: d.direction
-    }, [P, D] = this.isTargetDragging ? [E, x] : [x, E];
-    this.overlayCanvas.addNode(V(P)), this.overlayCanvas.addNode(V(D));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(b.Edge) : i.shape;
+    }, [b, D] = this.isTargetDragging ? [E, x] : [x, E];
+    this.overlayCanvas.addNode(B(b)), this.overlayCanvas.addNode(B(D));
+    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
-      id: b.Edge,
-      from: P.overlayId,
+      id: P.Edge,
+      from: b.overlayId,
       to: D.overlayId,
       shape: N
     }), !0;
@@ -2574,14 +2576,14 @@ class _ {
       x: e.x - t.x,
       y: e.y - t.y
     }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
   tryCreateConnection(e) {
-    const t = ve(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
+    const t = me(this.canvas.graph, e);
+    if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -2613,45 +2615,45 @@ class _ {
     }
   }
 }
-const ht = () => {
+const at = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, z = () => {
+}, X = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, de = () => {
-  const r = z();
+}, ce = () => {
+  const r = X();
   return r.style.pointerEvents = "none", r;
 };
-class at {
+class dt {
   constructor(e) {
-    o(this, "background", z());
-    o(this, "main", z());
-    o(this, "overlayConnectablePorts", de());
-    o(this, "overlayDraggableEdges", de());
-    o(this, "host", ht());
+    o(this, "background", X());
+    o(this, "main", X());
+    o(this, "overlayConnectablePorts", ce());
+    o(this, "overlayDraggableEdges", ce());
+    o(this, "host", at());
     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 X = (r) => () => r, ce = X(0), dt = () => {
+const Y = (r) => () => r, ge = Y(0), ct = () => {
   let r = 0;
   return () => r++;
-}, ct = (r, e) => {
-  let t = ce, s = ce;
-  const i = dt();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = X(r)), typeof e == "number" && (s = X(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+}, gt = (r, e) => {
+  let t = ge, s = ge;
+  const i = ct();
+  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = Y(r)), typeof e == "number" && (s = Y(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
-}, q = (r) => {
+}, ee = (r) => {
   if (typeof r == "function")
     return r;
   switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new Qe({
+      return () => new _e({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2665,7 +2667,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Je({
+      return () => new Qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2679,7 +2681,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
     case "vertical":
-      return () => new _e({
+      return () => new qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2693,7 +2695,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
     case "direct":
-      return () => new Pe({
+      return () => new Te({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2704,7 +2706,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Ze({
+      return () => new Je({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2718,41 +2720,41 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, gt = (r) => {
+}, lt = (r) => {
   var t, s, i, n, h;
-  const e = ct(
+  const e = gt(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? ye,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: q(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: ee(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, lt = (r) => {
+}, ut = (r) => {
   var p, f, v, y, E, x;
   const e = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
   }), t = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
-  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (P) => P.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
+  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
     dragCursor: a,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: l !== void 0 ? l : (P) => P.button === 0,
+    mouseUpEventVerifier: l !== void 0 ? l : (b) => b.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: t,
     onNodeDragFinished: s
   };
-}, ut = (r) => {
+}, pt = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let h = n.nextTransform.x, a = n.nextTransform.y;
@@ -2762,7 +2764,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
     return a > g && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: h, y: a };
   };
-}, pt = (r) => {
+}, wt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const h = n.prevTransform, a = n.nextTransform;
@@ -2783,7 +2785,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
       y: l
     };
   };
-}, wt = (r) => (e) => r.reduce(
+}, ft = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -2791,40 +2793,40 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ge = (r) => {
+), le = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return pt({
+      return wt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return ut({
+      return pt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, le = (r) => {
-  var v, y, E, x, P, D, N, R, ee, te, re, oe;
+}, ue = (r) => {
+  var v, y, E, x, b, D, N, C, te, re, oe, se;
   const e = (v = r == null ? void 0 : r.scale) == null ? void 0 : v.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = wt(
+  s !== void 0 ? Array.isArray(s) ? i = ft(
     s.map(
-      (M) => ge(M)
+      (M) => le(M)
     )
-  ) : i = ge(s) : i = (M) => M.nextTransform;
+  ) : i = le(s) : i = (M) => M.nextTransform;
   const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
+  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((R = r == null ? void 0 : r.events) == null ? void 0 : R.onTransformStarted) ?? (() => {
+    onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((ee = r == null ? void 0 : r.events) == null ? void 0 : ee.onTransformFinished) ?? (() => {
+    onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: h,
     onTransformChange: a,
@@ -2833,30 +2835,30 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: f,
-    scaleWheelFinishTimeout: ((te = r == null ? void 0 : r.scale) == null ? void 0 : te.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((re = r == null ? void 0 : r.events) == null ? void 0 : re.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
     })
   };
-}, ft = (r, e) => {
+}, vt = (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;
-}, vt = (r) => r instanceof SVGElement ? r : ft(
+}, mt = (r) => r instanceof SVGElement ? r : vt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), mt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = vt(r.renderer ?? {});
+), yt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = mt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, yt = (r, e, t) => {
+}, Et = (r, e, t) => {
   var c, l, g;
   const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
   }, a = () => {
@@ -2871,9 +2873,9 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? a,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? q(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
   };
-}, Et = (r, e) => {
+}, At = (r, e) => {
   var c, l, g;
   const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
     const f = e.getPortAdjacentEdgeIds(p);
@@ -2887,13 +2889,24 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? q(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? h,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? a
   };
+}, xt = (r) => ({
+  nodeVerticalRadius: r.nodeContainingRadius.vertical,
+  nodeHorizontalRadius: r.nodeContainingRadius.horizontal
+}), St = (r) => {
+  var e, t;
+  return {
+    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
+    }),
+    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? (() => {
+    })
+  };
 };
-class St {
+class Tt {
   constructor(e) {
     o(this, "element", null);
     o(this, "canvasDefaults", {});
@@ -2945,6 +2958,8 @@ class St {
     return this.hasResizeReactiveNodes = !0, this;
   }
   /**
+   * @deprecated
+   * do not use
    * sets emitter for rendering graph inside bounded area
    */
   enableBoxAreaRendering(e) {
@@ -2981,37 +2996,42 @@ class St {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new pe());
-    const t = new fe(), s = new $e(), i = new at(this.element);
-    let n = new ue(
+    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
+    const t = new ve(), s = new Fe(), i = new dt(this.element);
+    let n = new pe(
       t,
       s,
       i.main
     );
-    e !== void 0 && (n = new Ue(n, t, e));
-    const h = gt(this.canvasDefaults), a = new we(
+    e !== void 0 && (n = new Ie(
+      n,
+      t,
+      e,
+      St(this.virtualScrollConfig)
+    ));
+    const h = lt(this.canvasDefaults), a = new fe(
       this.element,
       t,
       s,
       n,
       h
     );
-    if (this.hasBackground && J.configure(
+    if (this.hasBackground && Q.configure(
       a,
-      mt(this.backgroundConfig),
+      yt(this.backgroundConfig),
       i.background
-    ), this.hasResizeReactiveNodes && Y.configure(a), this.hasDraggableNode && K.configure(
+    ), this.hasResizeReactiveNodes && H.configure(a), this.hasDraggableNode && Z.configure(
       a,
       i.main,
       this.window,
-      lt(this.dragConfig)
+      ut(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = yt(
+      const c = Et(
         this.connectablePortsConfig,
         h.edges.shapeFactory,
         h.ports.direction
       );
-      Q.configure(
+      _.configure(
         a,
         i.overlayConnectablePorts,
         s,
@@ -3020,11 +3040,11 @@ class St {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const c = Et(
+      const c = At(
         this.draggableEdgesConfig,
         a.graph
       );
-      _.configure(
+      q.configure(
         a,
         i.overlayDraggableEdges,
         s,
@@ -3032,18 +3052,18 @@ class St {
         c
       );
     }
-    this.virtualScrollConfig !== void 0 ? Z.configure(
+    this.virtualScrollConfig !== void 0 ? J.configure(
       a,
       i.main,
       this.window,
-      le(this.transformConfig),
+      ue(this.transformConfig),
       e,
-      this.virtualScrollConfig
-    ) : this.hasTransformableViewport && $.configure(
+      xt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && F.configure(
       a,
       i.main,
       this.window,
-      le(this.transformConfig)
+      ue(this.transformConfig)
     ), this.reset();
     const d = () => {
       i.destroy(), a.onBeforeDestroy.unsubscribe(d);
@@ -3059,17 +3079,17 @@ class St {
   }
 }
 export {
-  Ze as BezierEdgeShape,
-  St as CanvasBuilder,
-  Pe as DirectEdgeShape,
-  pe as EventSubject,
-  Je as HorizontalEdgeShape,
+  Je as BezierEdgeShape,
+  Tt as CanvasBuilder,
+  Te as DirectEdgeShape,
+  we as EventSubject,
+  Qe as HorizontalEdgeShape,
   S as HtmlGraphError,
-  tt as InteractiveEdgeError,
-  Te as InteractiveEdgeShape,
-  W as LineEdgeShape,
-  xt as MedianEdgeShape,
-  xt as MidpointEdgeShape,
-  Qe as StraightEdgeShape,
-  _e as VerticalEdgeShape
+  rt as InteractiveEdgeError,
+  De as InteractiveEdgeShape,
+  $ as LineEdgeShape,
+  bt as MedianEdgeShape,
+  bt as MidpointEdgeShape,
+  _e as StraightEdgeShape,
+  qe as VerticalEdgeShape
 };