@html-graph/html-graph 8.3.0 → 8.4.0

package/dist/html-graph.js

@@ -91,7 +91,7 @@ class Ae {
     };
   }
 }
-class Ke {
+class qe {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -111,7 +111,7 @@ class Ke {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class Qe {
+class Ke {
   constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -135,7 +135,7 @@ class Qe {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ke(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new qe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -189,7 +189,7 @@ class Qe {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class Ze {
+class Qe {
   constructor(e, t) {
     o(this, "deferredNodes", /* @__PURE__ */ new Set());
     o(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -243,7 +243,7 @@ class Ze {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class Q {
+class K {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -260,10 +260,10 @@ class Q {
   }
 }
 const x = () => {
-  const r = new Q();
+  const r = new K();
   return [r, r];
 };
-class X {
+class Y {
   constructor(e) {
     o(this, "counter", 0);
     this.checkExists = e;
@@ -281,13 +281,13 @@ class X {
 }
 class Ee {
   constructor(e, t, s, i, n, a) {
-    o(this, "nodeIdGenerator", new X(
+    o(this, "nodeIdGenerator", new Y(
       (e) => this.graphStore.hasNode(e)
     ));
-    o(this, "portIdGenerator", new X(
+    o(this, "portIdGenerator", new Y(
       (e) => this.graphStore.hasPort(e)
     ));
-    o(this, "edgeIdGenerator", new X(
+    o(this, "edgeIdGenerator", new Y(
       (e) => this.graphStore.hasEdge(e)
     ));
     o(this, "onAfterNodeAdded", (e) => {
@@ -467,7 +467,7 @@ class Ee {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.viewportStore.destroy(), this.destroyed = !0);
   }
 }
-class qe {
+class Ze {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -522,7 +522,7 @@ class xe {
     o(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     o(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
     o(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new qe());
+    o(this, "elementPorts", new Ze());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -837,7 +837,7 @@ class Je {
     this.observer.disconnect();
   }
 }
-class Z {
+class Q {
   constructor(e) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
@@ -860,7 +860,7 @@ class Z {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
   static configure(e) {
-    new Z(e);
+    new Q(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
@@ -870,9 +870,9 @@ class Z {
 const _e = (r, e, t) => {
   const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= i && t <= i + a;
-}, et = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => _e(e, t, s) && et(r, t, s), B = (r, e) => {
+}, et = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => _e(e, t, s) && et(r, t, s), $ = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, $ = (r) => {
+}, U = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -932,7 +932,7 @@ var N = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "
 const Pe = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), p = {
+}), w = {
   x: 0,
   y: 0
 }, m = (r, e, t) => ({
@@ -954,7 +954,7 @@ const Pe = (r, e) => ({
     flipX: d,
     flipY: c
   };
-}, W = (r, e, t, s) => ({
+}, z = (r, e, t, s) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
@@ -966,9 +966,9 @@ class rt {
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
     const s = m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), i = m(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
@@ -979,7 +979,7 @@ class rt {
     }, a = {
       x: i.x - this.params.targetDirection.x * this.params.curvature,
       y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
     this.path = `${d}${h}${c}`;
   }
 }
@@ -989,10 +989,10 @@ class st {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      w
+    ) : w, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1000,9 +1000,9 @@ class st {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
-      { x: i, y: p.y },
+      { x: i, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), g = {
       x: c.x + h,
       y: c.y + d
@@ -1013,10 +1013,10 @@ class st {
     ), u = {
       x: l.x + h,
       y: l.y + d
-    }, w = {
+    }, p = {
       x: (g.x + u.x) / 2,
       y: (g.y + u.y) / 2
-    }, y = {
+    }, f = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, E = {
@@ -1032,23 +1032,23 @@ class st {
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${S.x} ${S.y} ${w.x} ${w.y}`,
+      `C ${f.x} ${f.y} ${S.x} ${S.y} ${p.x} ${p.y}`,
       `C ${b.x} ${b.y} ${E.x} ${E.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = z(p, e.flipX, e.flipY, e.to);
   }
 }
-const q = Object.freeze({
+const Z = Object.freeze({
   edgeColor: "--edge-color"
-}), Te = (r) => {
+}), Ce = (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(q.edgeColor, r), e;
-}, Ce = (r) => {
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(Z.edgeColor, r), e;
+}, Te = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, U = () => {
+  return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, O = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${q.edgeColor})`), r;
+  return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
 }, De = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
@@ -1061,13 +1061,13 @@ const q = Object.freeze({
     let i = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, g = 0, l = 0;
-      const u = d > 0, w = d < s, y = u && w;
-      if (u && (c = -i, g = -n, l = a), w) {
+      const u = d > 0, p = d < s, f = u && p;
+      if (u && (c = -i, g = -n, l = a), p) {
         const V = r[d + 1];
         i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const S = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = y ? { x: h.x + i * S, y: h.y + n * S } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, R = y ? { x: h.x + c * P, y: h.y + g * P } : h;
-      d > 0 && t.push(`L ${R.x} ${R.y}`), y && t.push(
+      const S = a !== 0 ? Math.min((f ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = f ? { x: h.x + i * S, y: h.y + n * S } : h, P = l !== 0 ? Math.min((f ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, L = f ? { x: h.x + c * P, y: h.y + g * P } : h;
+      d > 0 && t.push(`L ${L.x} ${L.y}`), f && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${b.x} ${b.y}`
       );
     });
@@ -1082,10 +1082,10 @@ class ot {
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
     const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, i = this.params.hasTargetArrow ? m(
+      w
+    ) : w, i = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1093,9 +1093,9 @@ class ot {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
-      { x: a, y: p.y },
+      { x: a, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), d = m(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
@@ -1103,12 +1103,12 @@ class ot {
     ), c = Math.max((h.x + d.x) / 2, n), g = this.params.to.y / 2, l = {
       x: this.params.flipX > 0 ? c : -n,
       y: h.y
-    }, u = { x: l.x, y: g }, w = {
+    }, u = { x: l.x, y: g }, p = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, y = { x: w.x, y: g };
+    }, f = { x: p.x, y: g };
     this.path = D(
-      [s, h, l, u, y, w, d, i],
+      [s, h, l, u, f, p, d, i],
       this.params.roundness
     );
   }
@@ -1119,10 +1119,10 @@ class it {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      w
+    ) : w, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1130,15 +1130,15 @@ class it {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: p.y },
+      { x: i, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
-    this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = D(
+    ), u = { x: l.x + d, y: l.y + c }, p = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
+    this.midpoint = z(p, e.flipX, e.flipY, e.to), this.path = D(
       [t, n, g, u, l, s],
       this.params.roundness
     );
@@ -1152,10 +1152,10 @@ class nt {
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
     const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, i = this.params.hasTargetArrow ? m(
+      w
+    ) : w, i = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1163,9 +1163,9 @@ class nt {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
-      { x: n, y: p.y },
+      { x: n, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), h = m(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
@@ -1182,10 +1182,10 @@ class at {
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
     const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, i = this.params.hasTargetArrow ? m(
+      w
+    ) : w, i = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1193,9 +1193,9 @@ class at {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
-      { x: a, y: p.y },
+      { x: a, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), d = m(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
@@ -1203,12 +1203,12 @@ class at {
     ), c = Math.max((h.y + d.y) / 2, n), g = this.params.to.x / 2, l = {
       x: h.x,
       y: this.params.flipY > 0 ? c : -n
-    }, u = { x: g, y: l.y }, w = {
+    }, u = { x: g, y: l.y }, p = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, y = { x: g, y: w.y };
+    }, f = { x: g, y: p.y };
     this.path = D(
-      [s, h, l, u, y, w, d, i],
+      [s, h, l, u, f, p, d, i],
       this.params.roundness
     );
   }
@@ -1219,17 +1219,17 @@ class J {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
-      { x: this.params.arrowLength, y: p.y },
-      { x: i, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
+      { x: i, y: w.y },
       { x: i, y: this.params.side },
       { x: n, y: this.params.side },
       { x: n, y: -this.params.side },
       { x: i, y: -this.params.side },
-      { x: i, y: p.y },
-      { x: this.params.arrowLength, y: p.y }
+      { x: i, y: w.y },
+      { x: this.params.arrowLength, y: w.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, p)
-    ), d = `M ${p.x} ${p.y} L ${h[0].x} ${h[0].y} `;
+      (c) => m(c, this.params.sourceDirection, w)
+    ), d = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${D(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
@@ -1239,19 +1239,19 @@ class ht {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (y) => m(y, this.params.sourceDirection, p)
+      (f) => m(f, this.params.sourceDirection, w)
     ), u = [
       `M ${l[0].x} ${l[0].y}`,
       `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
       `A ${s} ${s} 0 1 0 ${l[2].x} ${l[2].y}`,
       `A ${t} ${t} 0 0 1 ${l[0].x} ${l[0].y}`
-    ].join(" "), w = `M 0 0 L ${l[0].x} ${l[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
+    ].join(" "), p = `M 0 0 L ${l[0].x} ${l[0].y} `;
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : p}${u}`, this.midpoint = l[3];
   }
 }
 class dt {
@@ -1273,7 +1273,7 @@ class dt {
       offset: this.params.sourceOffset,
       hasArrow: this.params.hasSourceArrow,
       flip: 1,
-      shift: p
+      shift: w
     }), n = this.createDirectLinePoint({
       offset: this.params.targetOffset,
       hasArrow: this.params.hasTargetArrow,
@@ -1296,10 +1296,10 @@ class ct {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      w
+    ) : w, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1307,9 +1307,9 @@ class ct {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: p.y },
+      { x: i, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), a = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
@@ -1318,7 +1318,7 @@ class ct {
       x: (n.x + a.x) / 2,
       y: g
     };
-    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = D(
+    this.midpoint = z(l, e.flipX, e.flipY, e.to), this.path = D(
       [
         t,
         n,
@@ -1337,10 +1337,10 @@ class lt {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      w
+    ) : w, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1348,9 +1348,9 @@ class lt {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: p.y },
+      { x: i, y: w.y },
       this.params.sourceDirection,
-      p
+      w
     ), a = m(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
@@ -1359,7 +1359,7 @@ class lt {
       x: g,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = D(
+    this.midpoint = z(l, e.flipX, e.flipY, e.to), this.path = D(
       [
         t,
         n,
@@ -1372,7 +1372,7 @@ class lt {
     );
   }
 }
-const f = Object.freeze({
+const y = Object.freeze({
   color: "#777777",
   width: 1,
   arrowLength: 20,
@@ -1395,7 +1395,7 @@ const f = Object.freeze({
   interactiveWidth: 10,
   preOffset: 0
 }), pe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class z {
+class k {
   constructor(e) {
     o(this, "svg");
     o(this, "group", De());
@@ -1405,7 +1405,7 @@ class z {
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
     o(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Te(e.color), this.svg.appendChild(this.group), this.line = Ce(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = U(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = U(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ce(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Ne(
@@ -1427,52 +1427,52 @@ class z {
     };
     let l = { x: -c.x, y: -c.y }, u;
     e.category === M.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === M.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
-    const w = u(
+    const p = u(
       d,
       c,
       g,
       a,
       h
     );
-    this.line.setAttribute("d", w.path);
-    let y = null;
-    this.sourceArrow && (y = this.arrowRenderer({
+    this.line.setAttribute("d", p.path);
+    let f = null;
+    this.sourceArrow && (f = this.arrowRenderer({
       direction: d,
-      shift: p,
+      shift: w,
       arrowLength: this.params.arrowLength
-    }), this.sourceArrow.setAttribute("d", y));
+    }), this.sourceArrow.setAttribute("d", f));
     let E = null;
     this.targetArrow && (E = this.arrowRenderer({
       direction: l,
       shift: g,
       arrowLength: this.params.arrowLength
     }), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: w,
-      sourceArrowPath: y,
+      edgePath: p,
+      sourceArrowPath: f,
       targetArrowPath: E
     });
   }
 }
 const gt = (r) => (e) => {
   const s = [
-    p,
+    w,
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => m(h, e.direction, p)
+    (h) => m(h, e.direction, w)
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
   })), i = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
   return `${i} ${n} ${a} Z`;
 }, ut = (r) => (e) => {
-  const t = r.radius, s = e.arrowLength, i = (s * s + 2 * s * t) / (2 * t), n = i + t, a = s + t - t * (s + t) / n, h = t * i / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
-    (y) => m(y, e.direction, p)
-  ).map((y) => ({
-    x: y.x + e.shift.x,
-    y: y.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
-  return `${g} ${l} ${u} ${w}`;
+  const t = r.radius, s = e.arrowLength, i = (s * s + 2 * s * t) / (2 * t), n = i + t, a = s + t - t * (s + t) / n, h = t * i / n, c = [w, { x: a, y: -h }, { x: a, y: h }].map(
+    (f) => m(f, e.direction, w)
+  ).map((f) => ({
+    x: f.x + e.shift.x,
+    y: f.y + e.shift.y
+  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${g} ${l} ${u} ${p}`;
 }, pt = (r) => (e) => {
   const t = r.smallRadius, s = r.radius, i = m(
     {
@@ -1487,30 +1487,30 @@ const gt = (r) => (e) => {
       x: e.arrowLength + r.smallRadius,
       y: 0
     }
-  ), a = [p, { x: i.x, y: -i.y }, i].map(
-    (l) => m(l, e.direction, p)
+  ), a = [w, { x: i.x, y: -i.y }, i].map(
+    (l) => m(l, e.direction, w)
   ).map((l) => ({
     x: l.x + e.shift.x,
     y: l.y + e.shift.y
   })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${s} ${s} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${s} ${s} 0 0 1 ${a[0].x} ${a[0].y}`;
   return `${h} ${d} ${c} ${g}`;
-}, F = (r) => {
+}, I = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "triangle":
       return gt({
-        radius: r.radius ?? f.polygonArrowRadius
+        radius: r.radius ?? y.polygonArrowRadius
       });
     case "arc":
       return ut({
-        radius: r.radius ?? f.circleArrowRadius
+        radius: r.radius ?? y.circleArrowRadius
       });
     default:
       return pt({
-        smallRadius: r.smallRadius ?? f.wedgeArrowSmallRadius,
-        angle: r.angle ?? f.wedgeArrowAngle,
-        radius: r.radius ?? f.wedgeArrowRadius
+        smallRadius: r.smallRadius ?? y.wedgeArrowSmallRadius,
+        angle: r.angle ?? y.wedgeArrowAngle,
+        radius: r.radius ?? y.wedgeArrowRadius
       });
   }
 };
@@ -1561,10 +1561,10 @@ class wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
-      color: (e == null ? void 0 : e.color) ?? f.color,
-      width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? y.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? y.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? y.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? y.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? y.color,
+      width: (e == null ? void 0 : e.width) ?? y.width,
+      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1577,7 +1577,7 @@ class wt {
     this.pathShape.render(e);
   }
 }
-class yt {
+class ft {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1626,16 +1626,16 @@ class yt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? f.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? f.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? f.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
-      color: (e == null ? void 0 : e.color) ?? f.color,
-      width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? y.color,
+      width: (e == null ? void 0 : e.width) ?? y.width,
+      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1648,7 +1648,7 @@ class yt {
     this.pathShape.render(e);
   }
 }
-class ft {
+class yt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1698,16 +1698,16 @@ class ft {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? f.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? f.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? f.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
-      color: (e == null ? void 0 : e.color) ?? f.color,
-      width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? y.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? y.color,
+      width: (e == null ? void 0 : e.width) ?? y.width,
+      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1769,16 +1769,16 @@ class mt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? f.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? f.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? f.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
-      color: (e == null ? void 0 : e.color) ?? f.color,
-      width: (e == null ? void 0 : e.width) ?? f.width,
-      arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? y.color,
+      width: (e == null ? void 0 : e.width) ?? y.width,
+      arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1791,7 +1791,7 @@ class mt {
     this.pathShape.render(e);
   }
 }
-class Le {
+class Re {
   constructor(e) {
     o(this, "svg");
     o(this, "group", De());
@@ -1806,7 +1806,7 @@ class Le {
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
     o(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = x(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = F((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Te(this.color), this.svg.appendChild(this.group), this.line = Ce(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = U(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = U(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = x(), this.color = (e == null ? void 0 : e.color) ?? y.color, this.width = (e == null ? void 0 : e.width) ?? y.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? y.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? y.preOffset, this.svg = Ce(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Ne(
@@ -1828,31 +1828,31 @@ class Le {
     if (u === 0)
       this.sourceArrow !== null && (g = "", this.sourceArrow.setAttribute("d", g)), this.targetArrow !== null && (l = "", this.targetArrow.setAttribute("d", l));
     else {
-      const w = {
+      const p = {
         x: d.x / u,
         y: d.y / u
       };
       if (this.sourceArrow) {
-        const y = {
-          x: w.x * this.sourceOffset,
-          y: w.y * this.sourceOffset
+        const f = {
+          x: p.x * this.sourceOffset,
+          y: p.y * this.sourceOffset
         };
         g = this.arrowRenderer({
-          direction: w,
-          shift: y,
+          direction: p,
+          shift: f,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", g);
       }
       if (this.targetArrow) {
-        const y = {
-          x: w.x * this.targetOffset,
-          y: w.y * this.targetOffset
+        const f = {
+          x: p.x * this.targetOffset,
+          y: p.y * this.targetOffset
         };
         l = this.arrowRenderer({
-          direction: { x: -w.x, y: -w.y },
+          direction: { x: -p.x, y: -p.y },
           shift: {
-            x: d.x - y.x,
-            y: d.y - y.y
+            x: d.x - f.x,
+            y: d.y - f.y
           },
           arrowLength: this.arrowLength
         }), this.targetArrow.setAttribute("d", l);
@@ -1880,7 +1880,7 @@ class Et extends Error {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Re {
+class Le {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
@@ -1892,12 +1892,12 @@ class Re {
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Re)
+    if (this.baseEdge = e, e instanceof Le)
       throw new Et(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-    const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
+    const s = (t == null ? void 0 : t.distance) ?? y.interactiveWidth;
     this.interactiveLine = At(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = we(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = we(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);
     });
@@ -1906,7 +1906,7 @@ class Re {
     this.baseEdge.render(e);
   }
 }
-class dr {
+class ur {
   constructor(e, t) {
     o(this, "group");
     o(this, "line");
@@ -2049,7 +2049,7 @@ const Ie = (r, e) => {
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Le(),
+      shapeFactory: () => new Re(),
       priorityFn: () => 0
     },
     ports: {
@@ -2065,7 +2065,7 @@ const Ie = (r, e) => {
     a
   );
 };
-class k {
+class H {
   constructor(e, t, s, i) {
     o(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2090,7 +2090,7 @@ class k {
       }));
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -2122,7 +2122,7 @@ class k {
     });
     o(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -2149,7 +2149,7 @@ class k {
     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 k(e, t, s, i);
+    new H(e, t, s, i);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2249,7 +2249,7 @@ class _ {
         nodeId: i,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, B(this.element, this.params.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, $(this.element, this.params.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2285,7 +2285,7 @@ class _ {
       });
     });
     o(this, "onWindowMouseMove", (e) => {
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -2306,7 +2306,7 @@ class _ {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -2352,7 +2352,7 @@ class _ {
     }
   }
   cancelMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, B(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, $(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2403,7 +2403,7 @@ const bt = (r, e, t) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
-}), I = (r) => {
+}), B = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
@@ -2422,7 +2422,7 @@ const bt = (r, e, t) => ({
     touches: e
   };
 };
-class H {
+class X {
   constructor(e, t, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
@@ -2432,14 +2432,14 @@ class H {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (B(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && ($(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,
@@ -2465,10 +2465,10 @@ class H {
     });
     o(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = I(e);
+        this.prevTouches = B(e);
         return;
       }
-      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = B(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2477,9 +2477,9 @@ class H {
       }), this.startRegisteredTransform();
     });
     o(this, "onWindowTouchMove", (e) => {
-      const t = I(e);
+      const t = B(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;
@@ -2494,7 +2494,7 @@ class H {
       this.prevTouches = t;
     });
     o(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = B(e) : this.stopTouchDrag();
     });
     o(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
@@ -2512,7 +2512,7 @@ class H {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new H(e, t, s, i);
+    new X(e, t, s, i);
   }
   moveViewport(e, t) {
     const s = this.viewport.getViewportMatrix(), i = bt(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
@@ -2533,7 +2533,7 @@ class H {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    $(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2610,7 +2610,7 @@ class ee {
         this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
       }
     };
-    H.configure(
+    X.configure(
       e,
       this.element,
       this.window,
@@ -2651,10 +2651,10 @@ class ee {
 const Nt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Tt = () => {
+}, Ct = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Ct = () => {
+}, Tt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2664,8 +2664,8 @@ const Nt = () => {
 class te {
   constructor(e, t, s) {
     o(this, "svg", Nt());
-    o(this, "patternRenderingRectangle", Tt());
-    o(this, "pattern", Ct());
+    o(this, "patternRenderingRectangle", Ct());
+    o(this, "pattern", Tt());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2710,7 +2710,7 @@ class re {
     this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ie(
       this.overlayLayer,
       this.viewportStore
-    ), k.configure(
+    ), H.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2761,10 +2761,10 @@ class re {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [w, y] = this.isTargetDragging ? [l, u] : [u, l];
-    this.overlayCanvas.addNode($(w)), this.overlayCanvas.addNode($(y)), this.overlayCanvas.addEdge({
-      from: w.overlayNodeId,
-      to: y.overlayNodeId,
+    const [p, f] = this.isTargetDragging ? [l, u] : [u, l];
+    this.overlayCanvas.addNode(U(p)), this.overlayCanvas.addNode(U(f)), this.overlayCanvas.addEdge({
+      from: p.overlayNodeId,
+      to: f.overlayNodeId,
       shape: this.params.edgeShapeFactory(N.EdgeId)
     });
   }
@@ -2806,7 +2806,7 @@ class se {
     this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ie(
       this.overlayLayer,
       this.viewportStore
-    ), k.configure(
+    ), H.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2844,10 +2844,10 @@ class se {
     const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
       x: g.x + g.width / 2,
       y: g.y + g.height / 2
-    }, u = this.overlayLayer.getBoundingClientRect(), w = this.canvas.viewport.createContentCoords({
+    }, u = this.overlayLayer.getBoundingClientRect(), p = this.canvas.viewport.createContentCoords({
       x: l.x - u.x,
       y: l.y - u.y
-    }), y = this.canvas.viewport.createContentCoords({
+    }), f = this.canvas.viewport.createContentCoords({
       x: t.x - u.x,
       y: t.y - u.y
     });
@@ -2860,19 +2860,19 @@ class se {
     }, this.canvas.removeEdge(s);
     const E = {
       overlayNodeId: N.StaticNodeId,
-      portCoords: w,
+      portCoords: p,
       portDirection: c.direction
     }, S = {
       overlayNodeId: N.DraggingNodeId,
-      portCoords: y,
+      portCoords: f,
       portDirection: d.direction
-    }, [b, T] = this.isTargetDragging ? [E, S] : [S, E];
-    this.overlayCanvas.addNode($(b)), this.overlayCanvas.addNode($(T));
+    }, [b, C] = this.isTargetDragging ? [E, S] : [S, E];
+    this.overlayCanvas.addNode(U(b)), this.overlayCanvas.addNode(U(C));
     const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(N.EdgeId) : i.shape;
     return this.overlayCanvas.addEdge({
       id: N.EdgeId,
       from: b.overlayNodeId,
-      to: T.overlayNodeId,
+      to: C.overlayNodeId,
       shape: P
     }), !0;
   }
@@ -2933,7 +2933,7 @@ class oe {
     new oe(e, t);
   }
 }
-class O {
+class W {
   constructor(e, t, s) {
     o(this, "applyScheduled", !1);
     o(this, "apply", () => {
@@ -2950,7 +2950,7 @@ class O {
     });
   }
   static configure(e, t, s) {
-    new O(
+    new W(
       e,
       t,
       s
@@ -2976,7 +2976,7 @@ class Dt {
         break;
       }
       case "topologyChangeMacrotask": {
-        O.configure(
+        W.configure(
           e.graph,
           i,
           (n) => {
@@ -2988,7 +2988,7 @@ class Dt {
         break;
       }
       case "topologyChangeMicrotask": {
-        O.configure(
+        W.configure(
           e.graph,
           i,
           (n) => {
@@ -3033,36 +3033,36 @@ class ie {
     new ie(e, t, s);
   }
 }
-const Lt = () => {
+const Rt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, j = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, ye = () => {
+}, fe = () => {
   const r = j();
   return r.style.pointerEvents = "none", r;
 };
-class Rt {
+class Lt {
   constructor(e) {
     o(this, "background", j());
     o(this, "main", j());
-    o(this, "overlayConnectablePorts", ye());
-    o(this, "overlayDraggableEdges", ye());
-    o(this, "host", Lt());
+    o(this, "overlayConnectablePorts", fe());
+    o(this, "overlayDraggableEdges", fe());
+    o(this, "host", Rt());
     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 K = (r) => () => r, fe = K(0), Vt = () => {
+const q = (r) => () => r, ye = q(0), Vt = () => {
   let r = 0;
   return () => r++;
 }, Ft = (r, e) => {
-  let t = fe, s = fe;
+  let t = ye, s = ye;
   const i = Vt();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = K(r)), typeof e == "number" && (s = K(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = q(r)), typeof e == "number" && (s = q(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
@@ -3071,7 +3071,7 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
     return r;
   switch (r.type) {
     case "straight":
-      return () => new ft({
+      return () => new yt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3085,7 +3085,7 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new yt({
+      return () => new ft({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3111,7 +3111,7 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Le({
+      return () => new Re({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3156,11 +3156,11 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
     }
   };
 }, Bt = (r) => {
-  var w, y, E, S, b, T;
-  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
-  }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
+  var p, f, E, S, b, C;
+  const e = ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? (() => {
+  }), t = ((f = r.events) == null ? void 0 : f.onNodeDrag) ?? (() => {
   }), s = r.nodeDragVerifier ?? (() => !0), i = ((E = r.events) == null ? void 0 : E.onNodeDragFinished) ?? (() => {
-  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (S = r.mouse) == null ? void 0 : S.dragCursor, d = h !== void 0 ? h : "grab", c = (b = r.mouse) == null ? void 0 : b.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (T = r.mouse) == null ? void 0 : T.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
+  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (S = r.mouse) == null ? void 0 : S.dragCursor, d = h !== void 0 ? h : "grab", c = (b = r.mouse) == null ? void 0 : b.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (C = r.mouse) == null ? void 0 : C.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
   return {
     moveOnTop: n,
     moveEdgesOnTop: a,
@@ -3230,17 +3230,17 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
       });
   }
 }, ve = (r) => {
-  var y, E, S, b, T, P, R, V, ae, he, de, ce;
-  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  var f, E, S, b, C, P, L, V, ae, he, de, ce;
+  const e = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
   s !== void 0 ? Array.isArray(s) ? i = Ot(
     s.map(
-      (C) => me(C)
+      (T) => me(T)
     )
-  ) : i = me(s) : i = (C) => C.nextTransform;
+  ) : i = me(s) : i = (T) => T.nextTransform;
   const n = ((E = r == null ? void 0 : r.shift) == null ? void 0 : E.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
   }), h = ((b = r == null ? void 0 : r.events) == null ? void 0 : b.onTransformChange) ?? (() => {
-  }), d = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseDownEventVerifier, c = d !== void 0 ? d : (C) => C.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (C) => C.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
+  }), d = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (T) => T.button === 0, u = (L = r == null ? void 0 : r.scale) == null ? void 0 : L.mouseWheelEventVerifier, p = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
@@ -3253,7 +3253,7 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
     shiftCursor: n,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l,
-    mouseWheelEventVerifier: w,
+    mouseWheelEventVerifier: p,
     scaleWheelFinishTimeout: ((he = r == null ? void 0 : r.scale) == null ? void 0 : he.wheelFinishTimeout) ?? 500,
     onResizeTransformStarted: ((de = r == null ? void 0 : r.events) == null ? void 0 : de.onResizeTransformStarted) ?? (() => {
     }),
@@ -3297,8 +3297,8 @@ const K = (r) => () => r, fe = K(0), Vt = () => {
 }, Xt = (r, e) => {
   var c, g, l;
   const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, i = (u) => u.button === 0, n = (u) => {
-    const w = e.getPortAdjacentEdgeIds(u);
-    return w.length > 0 ? w[w.length - 1] : null;
+    const p = e.getPortAdjacentEdgeIds(u);
+    return p.length > 0 ? p[p.length - 1] : null;
   }, a = () => {
   }, h = () => {
   }, d = () => {
@@ -3331,21 +3331,6 @@ class jt extends Error {
     o(this, "name", "CanvasBuilderError");
   }
 }
-const v = Object.freeze({
-  seed: "HTMLGraph is awesome",
-  maxTimeDeltaSec: 0.01,
-  nodeCharge: 1e5,
-  nodeMass: 1,
-  edgeEquilibriumLength: 300,
-  edgeStiffness: 1e3,
-  dtSec: 0.01,
-  maxIterations: 1e3,
-  convergenceVelocity: 10,
-  maxForce: 1e7,
-  nodeForceCoefficient: 1,
-  barnesHutAreaRadiusThreshold: 0.01,
-  barnesHutTheta: 1
-});
 class Be {
   constructor(e, t, s) {
     o(this, "dt");
@@ -3379,8 +3364,8 @@ class Be {
       const s = this.graph.getEdge(t), i = this.graph.getPort(s.from), n = this.graph.getPort(s.to), a = this.currentCoords.get(i.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
         a,
         h
-      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(i.nodeId), y = e.get(n.nodeId);
-      w.x += l, w.y += u, y.x -= l, y.y -= u;
+      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, p = e.get(i.nodeId), f = e.get(n.nodeId);
+      p.x += l, p.y += u, f.x -= l, f.y -= u;
     });
   }
 }
@@ -3409,7 +3394,7 @@ const Ue = (r) => {
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
   return Math.min(e, r.maxForce);
 };
-class Kt {
+class qt {
   constructor(e) {
     o(this, "nodeCharge");
     o(this, "distanceVectorGenerator");
@@ -3430,13 +3415,13 @@ class Kt {
           targetCharge: this.nodeCharge,
           distance: l.d,
           maxForce: this.maxForce
-        }), w = u * l.ex, y = u * l.ey, E = t.get(a), S = t.get(d);
-        E.x -= w, E.y -= y, S.x += w, S.y += y;
+        }), p = u * l.ex, f = u * l.ey, E = t.get(a), S = t.get(d);
+        E.x -= p, E.y -= f, S.x += p, S.y += f;
       }
     }
   }
 }
-const Qt = (r) => {
+const Kt = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -3454,7 +3439,7 @@ const Qt = (r) => {
     radius: h / 2
   };
 };
-class Zt {
+class Qt {
   constructor(e) {
     o(this, "root");
     o(this, "leaves", /* @__PURE__ */ new Map());
@@ -3509,8 +3494,8 @@ class Zt {
     this.sortedParentNodes.push(e);
     const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = i / 2;
     e.nodeIds.forEach((u) => {
-      const { x: w, y } = this.coords.get(u);
-      w < t ? y < s ? d.add(u) : h.add(u) : y < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
+      const { x: p, y: f } = this.coords.get(u);
+      p < t ? f < s ? d.add(u) : h.add(u) : f < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
     });
     const g = {
       parent: e,
@@ -3611,7 +3596,7 @@ class Zt {
     }), { x: t / e.size, y: s / e.size };
   }
 }
-class qt {
+class Zt {
   constructor(e) {
     o(this, "areaRadiusThreshold");
     o(this, "nodeMass");
@@ -3623,7 +3608,7 @@ class qt {
     this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
   }
   apply(e, t) {
-    const s = Qt(e), i = new Zt({
+    const s = Kt(e), i = new Qt({
       box: s,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -3773,7 +3758,7 @@ class qt {
     }
   }
 }
-const Oe = (r) => r.theta !== 0 ? new qt({
+const Oe = (r) => r.theta !== 0 ? new Zt({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3781,7 +3766,7 @@ const Oe = (r) => r.theta !== 0 ? new qt({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new Kt({
+}) : new qt({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3798,11 +3783,11 @@ class We {
       x: g.x - l,
       y: g.y - l
     };
-    return n.forEach((w) => {
-      const y = t.getNode(w);
-      i.set(w, {
-        x: y.x ?? u.x + a * this.rand(),
-        y: y.y ?? u.y + a * this.rand()
+    return n.forEach((p) => {
+      const f = t.getNode(p);
+      i.set(p, {
+        x: f.x ?? u.x + a * this.rand(),
+        y: f.y ?? u.y + a * this.rand()
       });
     }), i;
   }
@@ -3853,6 +3838,131 @@ class Jt {
   }
 }
 class _t {
+  constructor(e) {
+    o(this, "forest", /* @__PURE__ */ new Set());
+    o(this, "remainingNodeIds");
+    for (this.graph = e, this.remainingNodeIds = new Set(this.graph.getAllNodeIds()); this.remainingNodeIds.size > 0; ) {
+      const [t] = this.remainingNodeIds;
+      this.traverse(t);
+    }
+  }
+  generate() {
+    return this.forest;
+  }
+  traverse(e) {
+    const t = {
+      nodeId: e,
+      children: /* @__PURE__ */ new Set()
+    }, s = [];
+    this.forest.add({ root: t, sequence: s });
+    let i = [t];
+    for (; i.length > 0; ) {
+      const n = [];
+      i.forEach((a) => {
+        s.push(a), this.remainingNodeIds.delete(a.nodeId);
+        const h = this.graph.getNodeOutgoingEdgeIds(a.nodeId).map((g) => {
+          const l = this.graph.getEdge(g);
+          return this.graph.getPort(l.to).nodeId;
+        }), d = this.graph.getNodeIncomingEdgeIds(a.nodeId).map((g) => {
+          const l = this.graph.getEdge(g);
+          return this.graph.getPort(l.from).nodeId;
+        });
+        [...h, ...d].forEach((g) => {
+          if (!this.remainingNodeIds.has(g))
+            return;
+          const l = {
+            nodeId: g,
+            children: /* @__PURE__ */ new Set()
+          };
+          a.children.add(l), n.push(l);
+        });
+      }), i = n;
+    }
+  }
+}
+class er {
+  constructor(e) {
+    o(this, "baseRadius");
+    this.baseRadius = e.radius;
+  }
+  resolve(e) {
+    let t = 0, s = -1 / 0;
+    const i = [];
+    e.forEach((h) => {
+      h === null ? (t += this.baseRadius, i.push(t), t += this.baseRadius) : t + this.baseRadius - h < s ? (s += h, i.push(s), t = s + this.baseRadius, s += h) : (t += this.baseRadius, i.push(t), s = t + h, t += this.baseRadius);
+    });
+    const n = t / 2;
+    let a = 0;
+    if (e.length > 0) {
+      const h = e[e.length - 1] ?? 0, d = i[i.length - 1];
+      a = Math.max(
+        a,
+        d + h - t
+      );
+      const c = e[0] ?? 0, g = i[0];
+      a = Math.max(a, c - g);
+    }
+    return {
+      offsets: i.map((h) => h - n),
+      radius: n + a
+    };
+  }
+}
+class tr {
+  constructor(e, t) {
+    o(this, "offsets", /* @__PURE__ */ new Map());
+    o(this, "childrenRadii", /* @__PURE__ */ new Map());
+    o(this, "layerNodePlacementResolver");
+    this.tree = e, this.layerNodePlacementResolver = new er({
+      radius: t.spaceAroundRadius
+    }), [...this.tree.sequence].reverse().forEach((s) => {
+      if (s.children.size === 0)
+        this.childrenRadii.set(s.nodeId, null);
+      else {
+        const i = Array.from(s.children).map(
+          (h) => this.childrenRadii.get(h.nodeId)
+        ), n = this.layerNodePlacementResolver.resolve(i);
+        this.childrenRadii.set(s.nodeId, n.radius);
+        let a = 0;
+        s.children.forEach((h) => {
+          this.offsets.set(h.nodeId, n.offsets[a]), a++;
+        });
+      }
+    }), this.offsets.set(this.tree.root.nodeId, 0);
+  }
+  generate() {
+    return this.offsets;
+  }
+}
+class rr {
+  constructor(e) {
+    this.params = e;
+  }
+  calculateCoordinates(e) {
+    const t = /* @__PURE__ */ new Map(), i = new _t(e.graph).generate();
+    let n = 0;
+    return i.forEach((a) => {
+      t.set(a.root.nodeId, { x: n, y: 0 });
+      const d = new tr(a, {
+        spaceAroundRadius: this.params.layerSpace / 2
+      }).generate();
+      let c = [a.root];
+      for (; c.length > 0; ) {
+        const g = [];
+        n += this.params.layerWidth, c.forEach((l) => {
+          l.children.forEach((u) => {
+            const p = t.get(l.nodeId).y;
+            t.set(u.nodeId, {
+              y: p + d.get(u.nodeId),
+              x: n
+            }), g.push(u);
+          });
+        }), c = g;
+      }
+    }), t;
+  }
+}
+class sr {
   constructor(e) {
     o(this, "distanceVectorGenerator");
     o(this, "nodeForcesApplicationStrategy");
@@ -3906,14 +4016,28 @@ const ze = (r) => {
   r |= 0, e |= 0, t |= 0, s |= 0;
   const i = (r + e | 0) + s | 0;
   return s = s + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + i | 0, (i >>> 0) / 4294967296;
-}, er = (r) => {
+}, v = Object.freeze({
+  seed: "HTMLGraph is awesome",
+  maxTimeDeltaSec: 0.01,
+  nodeCharge: 1e5,
+  nodeMass: 1,
+  edgeEquilibriumLength: 300,
+  edgeStiffness: 1e3,
+  dtSec: 0.01,
+  maxIterations: 1e3,
+  convergenceVelocity: 10,
+  maxForce: 1e7,
+  nodeForceCoefficient: 1,
+  barnesHutAreaRadiusThreshold: 0.01,
+  barnesHutTheta: 1
+}), or = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
       const s = ze((r == null ? void 0 : r.seed) ?? v.seed), i = ke(s[0], s[1], s[2], s[3]);
-      return new _t({
+      return new sr({
         rand: i,
         maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
         nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? v.nodeCharge,
@@ -3928,32 +4052,47 @@ const ze = (r) => {
       });
     }
   }
-}, Y = {
+}, G = {
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
   },
   onAfterApplied: () => {
   }
-}, tr = (r) => {
+}, ir = (r) => {
   var t, s;
   return {
-    algorithm: er((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Y.staticNodeResolver,
-    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? Y.onBeforeApplied,
-    onAfterApplied: ((s = r == null ? void 0 : r.events) == null ? void 0 : s.onAfterApplied) ?? Y.onAfterApplied
+    algorithm: or((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? G.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? G.onBeforeApplied,
+    onAfterApplied: ((s = r == null ? void 0 : r.events) == null ? void 0 : s.onAfterApplied) ?? G.onAfterApplied
   };
-}, rr = (r) => r instanceof Q ? {
+}, nr = (r) => r instanceof K ? {
   type: "manual",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeMacrotask"
 } : {
   type: "topologyChangeMicrotask"
-}, sr = (r) => {
+}, F = Object.freeze({
+  staticNodeResolver: () => !1,
+  onBeforeApplied: () => {
+  },
+  onAfterApplied: () => {
+  },
+  hierarchicalLayout: {
+    layerWidth: 300,
+    layerSpace: 300
+  }
+}), ar = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
+    case "hierarchical":
+      return new rr({
+        layerWidth: r.layerWidth ?? F.hierarchicalLayout.layerWidth,
+        layerSpace: r.layerSpace ?? F.hierarchicalLayout.layerSpace
+      });
     default: {
       const s = ze((r == null ? void 0 : r.seed) ?? v.seed), i = ke(s[0], s[1], s[2], s[3]);
       return new Jt({
@@ -3972,22 +4111,16 @@ const ze = (r) => {
       });
     }
   }
-}, G = {
-  staticNodeResolver: () => !1,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  }
-}, or = (r) => {
+}, hr = (r) => {
   var e, t;
   return {
-    algorithm: sr(r == null ? void 0 : r.algorithm),
-    applyOn: rr(r == null ? void 0 : r.applyOn),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? G.staticNodeResolver,
-    onBeforeApplied: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onBeforeApplied) ?? G.onBeforeApplied,
-    onAfterApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onAfterApplied) ?? G.onAfterApplied
+    algorithm: ar(r == null ? void 0 : r.algorithm),
+    applyOn: nr(r == null ? void 0 : r.applyOn),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? F.staticNodeResolver,
+    onBeforeApplied: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onBeforeApplied) ?? F.onBeforeApplied,
+    onAfterApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onAfterApplied) ?? F.onAfterApplied
   };
-}, ir = (r, e) => ({
+}, dr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -3995,17 +4128,17 @@ const ze = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), nr = (r, e) => {
+}), cr = (r, e) => {
   r.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.onBeforeClear.subscribe(() => {
     e.clear();
   });
-}, ar = (r, e) => ({
+}, lr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
 });
-class cr {
+class pr {
   constructor(e) {
     o(this, "used", !1);
     o(this, "canvasDefaults", {});
@@ -4025,7 +4158,7 @@ class cr {
     o(this, "hasUserDraggableEdges", !1);
     o(this, "hasAnimatedLayout", !1);
     o(this, "hasLayout", !1);
-    o(this, "boxRenderingTrigger", new Q());
+    o(this, "boxRenderingTrigger", new K());
     o(this, "graphStore");
     o(this, "viewportStore");
     o(this, "graph");
@@ -4102,7 +4235,7 @@ class cr {
     if (this.used)
       throw new jt("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Rt(this.element), t = this.createHtmlView(e.main), s = It(this.canvasDefaults), i = new Ee(
+    const e = new Lt(this.element), t = this.createHtmlView(e.main), s = It(this.canvasDefaults), i = new Ee(
       this.graph,
       this.viewport,
       this.graphStore,
@@ -4114,9 +4247,9 @@ class cr {
       i,
       kt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && Z.configure(i), this.hasDraggableNodes) {
+    ), this.hasNodeResizeReactiveEdges && Q.configure(i), this.hasDraggableNodes) {
       let a = Bt(this.dragConfig);
-      this.hasAnimatedLayout && (a = ir(
+      this.hasAnimatedLayout && (a = dr(
         a,
         this.animationStaticNodes
       )), _.configure(
@@ -4160,22 +4293,22 @@ class cr {
       ve(this.transformConfig),
       this.boxRenderingTrigger,
       Yt(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && H.configure(
+    ) : this.hasTransformableViewport && X.configure(
       i,
       e.main,
       this.window,
       ve(this.transformConfig)
     ), this.hasLayout && Dt.configure(
       i,
-      or(this.layoutConfig)
+      hr(this.layoutConfig)
     ), this.hasAnimatedLayout) {
-      let a = tr(
+      let a = ir(
         this.animatedLayoutConfig
       );
-      this.hasDraggableNodes && (nr(
+      this.hasDraggableNodes && (cr(
         i.graph,
         this.animationStaticNodes
-      ), a = ar(
+      ), a = lr(
         a,
         this.animationStaticNodes
       )), ie.configure(i, a, this.window);
@@ -4191,26 +4324,26 @@ class cr {
       this.viewportStore,
       e
     );
-    return this.virtualScrollConfig !== void 0 && (t = new Qe(
+    return this.virtualScrollConfig !== void 0 && (t = new Ke(
       t,
       this.graphStore,
       this.boxRenderingTrigger,
       Gt(this.virtualScrollConfig)
-    )), new Ze(t, this.graphStore);
+    )), new Qe(t, this.graphStore);
   }
 }
 export {
   wt as BezierEdgeShape,
-  cr as CanvasBuilder,
+  pr as CanvasBuilder,
   jt as CanvasBuilderError,
   A as CanvasError,
   M as ConnectionCategory,
-  Le as DirectEdgeShape,
-  Q as EventSubject,
-  yt as HorizontalEdgeShape,
+  Re as DirectEdgeShape,
+  K as EventSubject,
+  ft as HorizontalEdgeShape,
   Et as InteractiveEdgeError,
-  Re as InteractiveEdgeShape,
-  dr as MidpointEdgeShape,
-  ft as StraightEdgeShape,
+  Le as InteractiveEdgeShape,
+  ur as MidpointEdgeShape,
+  yt as StraightEdgeShape,
   mt as VerticalEdgeShape
 };