@html-graph/html-graph 8.16.0 → 8.17.0

package/dist/html-graph.min.js

@@ -1,7 +1,7 @@
 var qe = Object.defineProperty;
 var et = (r, e, t) => e in r ? qe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var i = (r, e, t) => et(r, typeof e != "symbol" ? e + "" : e, t);
-var V = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(V || {});
+var I = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(I || {});
 const tt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
@@ -13,7 +13,7 @@ const tt = () => {
 }, st = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class Ce {
+class Te {
   constructor(e, t, o) {
     i(this, "host", tt());
     i(this, "container", rt());
@@ -72,8 +72,8 @@ class Ce {
       h,
       d
     ), u = this.createEdgeRenderPort(s, a, h, d);
-    let g = V.Line;
-    o.element === s.element ? g = V.PortCycle : o.nodeId === s.nodeId && (g = V.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
+    let g = I.Line;
+    o.element === s.element ? g = I.PortCycle : o.nodeId === s.nodeId && (g = I.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -245,7 +245,7 @@ class at {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class _ {
+class q {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -262,10 +262,10 @@ class _ {
   }
 }
 const P = () => {
-  const r = new _();
+  const r = new q();
   return [r, r];
 };
-class Te {
+class Ce {
   constructor(e, t, o, s) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
@@ -743,7 +743,7 @@ class dt {
     this.observer.disconnect();
   }
 }
-class q {
+class ee {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -769,7 +769,7 @@ class q {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e) {
-    new q(e);
+    new ee(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
@@ -788,9 +788,9 @@ class ut {
     return ct(this.element, e, t) && lt(this.win, e, t);
   }
 }
-const k = (r, e) => {
+const H = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, H = (r) => {
+}, Y = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -846,7 +846,7 @@ const Re = (r, e) => {
   }
   return null;
 };
-var M = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(M || {});
+var D = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(D || {});
 const Le = (r, e) => ({
   x: r / 2,
   y: e / 2
@@ -889,17 +889,17 @@ class pt {
       { x: t.x + s, y: t.y },
       n,
       t
-    ), w = m(
+    ), p = m(
       { x: o.x - s, y: o.y },
       a,
       o
-    ), p = {
+    ), w = {
       x: l.x + n.x * h,
       y: l.y + n.y * h
     }, y = {
-      x: w.x - a.x * h,
-      y: w.y - a.y * h
-    }, f = `M ${l.x} ${l.y} C ${p.x} ${p.y}, ${y.x} ${y.y}, ${w.x} ${w.y}`, x = d ? "" : `M ${t.x} ${t.y} L ${l.x} ${l.y} `, E = c ? "" : ` M ${w.x} ${w.y} L ${o.x} ${o.y}`;
+      x: p.x - a.x * h,
+      y: p.y - a.y * h
+    }, f = `M ${l.x} ${l.y} C ${w.x} ${w.y}, ${y.x} ${y.y}, ${p.x} ${p.y}`, x = d ? "" : `M ${t.x} ${t.y} L ${l.x} ${l.y} `, E = c ? "" : ` M ${p.x} ${p.y} L ${o.x} ${o.y}`;
     this.path = `${x}${f}${E}`;
   }
 }
@@ -922,79 +922,79 @@ class wt {
       { x: d.x + u, y: d.y },
       n,
       d
-    ) : d, w = o ? m(
+    ) : d, p = o ? m(
       {
         x: c.x - u,
         y: c.y
       },
       a,
       c
-    ) : c, p = Math.cos(h) * g, y = Math.sin(h) * g, f = m(
+    ) : c, w = Math.cos(h) * g, y = Math.sin(h) * g, f = m(
       { x: d.x + u, y: d.y },
       n,
       d
     ), x = {
-      x: f.x + p,
+      x: f.x + w,
       y: f.y + y
     }, E = m(
       { x: c.x - u, y: c.y },
       a,
       c
-    ), N = {
-      x: E.x + p,
+    ), T = {
+      x: E.x + w,
       y: E.y + y
     }, C = {
-      x: (x.x + N.x) / 2,
-      y: (x.y + N.y) / 2
-    }, T = {
+      x: (x.x + T.x) / 2,
+      y: (x.y + T.y) / 2
+    }, M = {
       x: f.x + s * n.x,
       y: f.y + s * n.y
-    }, I = {
+    }, F = {
       x: E.x - s * a.x,
       y: E.y - s * a.y
-    }, F = {
-      x: f.x + p,
-      y: f.y + y
     }, U = {
-      x: E.x + p,
+      x: f.x + w,
+      y: f.y + y
+    }, R = {
+      x: E.x + w,
       y: E.y + y
     };
     this.path = [
       `M ${l.x} ${l.y}`,
       `L ${f.x} ${f.y}`,
-      `C ${T.x} ${T.y} ${F.x} ${F.y} ${C.x} ${C.y}`,
-      `C ${U.x} ${U.y} ${I.x} ${I.y} ${E.x} ${E.y}`,
-      `L ${w.x} ${w.y}`
+      `C ${M.x} ${M.y} ${U.x} ${U.y} ${C.x} ${C.y}`,
+      `C ${R.x} ${R.y} ${F.x} ${F.y} ${E.x} ${E.y}`,
+      `L ${p.x} ${p.y}`
     ].join(" "), this.midpoint = C;
   }
 }
-const ee = Object.freeze({
+const te = Object.freeze({
   edgeColor: "--edge-color"
 }), Ie = (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(ee.edgeColor, r), e;
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(te.edgeColor, r), e;
 }, Fe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${ee.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, Y = () => {
+  return e.setAttribute("stroke", `var(${te.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, X = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${ee.edgeColor})`), r;
+  return r.setAttribute("fill", `var(${te.edgeColor})`), r;
 }, Ue = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`;
-}, L = (r, e) => {
+}, 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 o = r.length - 1;
     let s = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, u = 0, g = 0;
-      const l = d > 0, w = d < o, p = l && w;
-      if (l && (c = -s, u = -n, g = a), w) {
-        const T = r[d + 1];
-        s = T.x - h.x, n = T.y - h.y, a = Math.sqrt(s * s + n * n);
+      const l = d > 0, p = d < o, w = l && p;
+      if (l && (c = -s, u = -n, g = a), p) {
+        const M = r[d + 1];
+        s = M.x - h.x, n = M.y - h.y, a = Math.sqrt(s * s + n * n);
       }
-      const f = a !== 0 ? Math.min((p ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, x = p ? { x: h.x + s * f, y: h.y + n * f } : h, N = g !== 0 ? Math.min((p ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, C = p ? { x: h.x + c * N, y: h.y + u * N } : h;
-      d > 0 && t.push(`L ${C.x} ${C.y}`), p && t.push(
+      const f = a !== 0 ? Math.min((w ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, x = w ? { x: h.x + s * f, y: h.y + n * f } : h, T = g !== 0 ? Math.min((w ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, C = w ? { x: h.x + c * T, y: h.y + u * T } : h;
+      d > 0 && t.push(`L ${C.x} ${C.y}`), w && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
@@ -1061,14 +1061,14 @@ class ft {
       },
       n,
       o
-    ) : o, w = a + h, p = m(
-      { x: t.x + w, y: t.y },
+    ) : o, p = a + h, w = m(
+      { x: t.x + p, y: t.y },
       s,
       t
-    ), y = m({ x: o.x - w, y: o.y }, n, o), f = yt(
+    ), y = m({ x: o.x - p, y: o.y }, n, o), f = yt(
       {
-        x: p.x,
-        y: p.y,
+        x: w.x,
+        y: w.y,
         dirX: s.x
       },
       {
@@ -1077,7 +1077,7 @@ class ft {
         dirX: n.x
       }
     );
-    this.path = L(
+    this.path = V(
       [g, ...f.points, l],
       d
     ), this.midpoint = f.midpoint;
@@ -1099,11 +1099,11 @@ class vt {
       detourDir: u,
       detourDistance: g,
       roundness: l
-    } = e, w = t ? m(
+    } = e, p = t ? m(
       { x: s.x + a, y: s.y },
       h,
       s
-    ) : s, p = o ? m(
+    ) : s, w = o ? m(
       {
         x: n.x - a,
         y: n.y
@@ -1114,22 +1114,22 @@ class vt {
       { x: s.x + y, y: s.y },
       h,
       s
-    ), N = {
+    ), T = {
       x: E.x + f,
       y: E.y + x
     }, C = m(
       { x: n.x - y, y: n.y },
       d,
       n
-    ), T = {
+    ), M = {
       x: C.x + f,
       y: C.y + x
     };
     this.midpoint = {
-      x: (N.x + T.x) / 2,
-      y: (N.y + T.y) / 2
-    }, this.path = L(
-      [w, E, N, T, C, p],
+      x: (T.x + M.x) / 2,
+      y: (T.y + M.y) / 2
+    }, this.path = V(
+      [p, E, T, M, C, w],
       l
     );
   }
@@ -1158,13 +1158,13 @@ class mt {
       d,
       o,
       -a
-    ), w = a + c, p = { x: t.x + w, y: t.y }, y = m(p, h, t), f = { x: o.x - w, y: o.y }, x = m(f, d, o);
-    this.path = L(
+    ), p = a + c, w = { x: t.x + p, y: t.y }, y = m(w, h, t), f = { x: o.x - p, y: o.y }, x = m(f, d, o);
+    this.path = V(
       [g, y, x, l],
       u
     );
-    const E = (y.x + x.x) / 2, N = (y.y + x.y) / 2;
-    this.midpoint = { x: E, y: N };
+    const E = (y.x + x.x) / 2, T = (y.y + x.y) / 2;
+    this.midpoint = { x: E, y: T };
   }
   createArrowPoint(e, t, o, s) {
     if (!e)
@@ -1237,14 +1237,14 @@ class Et {
       },
       c,
       o
-    ) : o, w = a + h, p = m(
-      { x: t.x + w, y: t.y },
+    ) : o, p = a + h, w = m(
+      { x: t.x + p, y: t.y },
       d,
       t
-    ), y = m({ x: o.x - w, y: o.y }, c, o), f = xt(
+    ), y = m({ x: o.x - p, y: o.y }, c, o), f = xt(
       {
-        x: p.x,
-        y: p.y,
+        x: w.x,
+        y: w.y,
         dirY: d.y
       },
       {
@@ -1253,13 +1253,13 @@ class Et {
         dirY: c.y
       }
     );
-    this.path = L(
+    this.path = V(
       [g, ...f.points, l],
       u
     ), this.midpoint = f.midpoint;
   }
 }
-class te {
+class re {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1272,18 +1272,18 @@ class te {
       { x: d, y: -t },
       { x: d, y: 0 },
       { x: o, y: 0 }
-    ].map((w) => m(w, n, { x: 0, y: 0 })).map((w) => ({ x: w.x + a.x, y: w.y + a.y })), l = `M ${a.x} ${a.y} L ${g[0].x} ${g[0].y} `;
-    this.path = `${h ? "" : l}${L(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
+    ].map((p) => m(p, n, { x: 0, y: 0 })).map((p) => ({ x: p.x + a.x, y: p.y + a.y })), l = `M ${a.x} ${a.y} L ${g[0].x} ${g[0].y} `;
+    this.path = `${h ? "" : l}${V(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
   }
 }
 class At {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, u = Math.sqrt(d * d - s * s), g = u * s / d, l = u + o + t, w = t + g, y = [
+    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, u = Math.sqrt(d * d - s * s), g = u * s / d, l = u + o + t, p = t + g, y = [
       { x: t, y: 0 },
-      { x: w, y: c },
-      { x: w, y: -c },
+      { x: p, y: c },
+      { x: p, y: -c },
       { x: l, y: 0 }
     ].map((E) => m(E, n, { x: 0, y: 0 })).map((E) => ({ x: E.x + a.x, y: E.y + a.y })), f = [
       `M ${y[0].x} ${y[0].y}`,
@@ -1321,7 +1321,7 @@ class St {
       shift: t,
       arrowLength: d,
       dir: g
-    }), w = this.createDirectLinePoint({
+    }), p = this.createDirectLinePoint({
       offset: n,
       hasArrow: h,
       flip: -1,
@@ -1329,7 +1329,7 @@ class St {
       arrowLength: d,
       dir: g
     });
-    this.path = `M ${l.x} ${l.y} L ${w.x} ${w.y}`;
+    this.path = `M ${l.x} ${l.y} L ${p.x} ${p.y}`;
   }
   createDirectLinePoint(e) {
     const t = e.hasArrow ? e.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance, { dir: n, shift: a } = e;
@@ -1362,33 +1362,33 @@ class Nt {
       { x: n.x + s, y: n.y },
       h,
       n
-    ) : n, w = o ? m(
+    ) : n, p = o ? m(
       {
         x: a.x - s,
         y: a.y
       },
       d,
       a
-    ) : a, p = s + c, y = m(
-      { x: n.x + p, y: n.y },
+    ) : a, w = s + c, y = m(
+      { x: n.x + w, y: n.y },
       h,
       n
     ), f = m(
-      { x: a.x - p, y: a.y },
+      { x: a.x - w, y: a.y },
       d,
       a
     ), x = bt(y, f, g);
     this.midpoint = {
       x: (y.x + f.x) / 2,
       y: x
-    }, this.path = L(
+    }, this.path = V(
       [
         l,
         y,
         { x: y.x, y: x },
         { x: f.x, y: x },
         f,
-        w
+        p
       ],
       u
     );
@@ -1398,7 +1398,7 @@ const Pt = (r, e, t) => {
   const o = Math.max(r.x, e.x), s = Math.min(r.x, e.x);
   return (t >= 0 ? o : s) + t;
 };
-class Ct {
+class Tt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1417,33 +1417,33 @@ class Ct {
       { x: h.x + s, y: h.y },
       n,
       h
-    ) : h, w = o ? m(
+    ) : h, p = o ? m(
       {
         x: d.x - s,
         y: d.y
       },
       a,
       d
-    ) : d, p = s + c, y = m(
-      { x: h.x + p, y: h.y },
+    ) : d, w = s + c, y = m(
+      { x: h.x + w, y: h.y },
       n,
       h
     ), f = m(
-      { x: d.x - p, y: d.y },
+      { x: d.x - w, y: d.y },
       a,
       d
     ), x = Pt(y, f, u);
     this.midpoint = {
       x,
       y: (y.y + f.y) / 2
-    }, this.path = L(
+    }, this.path = V(
       [
         l,
         y,
         { x, y: y.y },
         { x, y: f.y },
         f,
-        w
+        p
       ],
       g
     );
@@ -1472,7 +1472,7 @@ const v = Object.freeze({
   interactiveWidth: 10,
   preOffset: 0
 }), Ee = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
-class X {
+class G {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1485,7 +1485,7 @@ class X {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ie(e.color), this.svg.appendChild(this.group), this.line = Fe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = Y(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = Y(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ie(e.color), this.svg.appendChild(this.group), this.line = Fe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: o, width: s, height: n, from: a, to: h } = Ve(
@@ -1496,28 +1496,28 @@ class X {
     Ue(this.svg, { x: t, y: o, width: s, height: n });
     const d = Ee(e.from.direction), c = Ee(e.to.direction);
     let u = { x: -c.x, y: -c.y }, g;
-    e.category === V.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === V.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
+    e.category === I.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === I.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
     const l = g(a, h, d, c);
     this.line.setAttribute("d", l.path);
-    let w = null;
-    this.sourceArrow && (w = this.arrowRenderer({
+    let p = null;
+    this.sourceArrow && (p = this.arrowRenderer({
       direction: d,
       shift: a,
       arrowLength: this.params.arrowLength
-    }), this.sourceArrow.setAttribute("d", w));
-    let p = null;
-    this.targetArrow && (p = this.arrowRenderer({
+    }), this.sourceArrow.setAttribute("d", p));
+    let w = null;
+    this.targetArrow && (w = this.arrowRenderer({
       direction: u,
       shift: h,
       arrowLength: this.params.arrowLength
-    }), this.targetArrow.setAttribute("d", p)), this.afterRenderEmitter.emit({
+    }), this.targetArrow.setAttribute("d", w)), this.afterRenderEmitter.emit({
       edgePath: l,
-      sourceArrowPath: w,
-      targetArrowPath: p
+      sourceArrowPath: p,
+      targetArrowPath: w
     });
   }
 }
-const Tt = (r) => (e) => {
+const Ct = (r) => (e) => {
   const o = [
     { x: 0, y: 0 },
     { x: e.arrowLength, y: r.radius },
@@ -1535,12 +1535,12 @@ const Tt = (r) => (e) => {
     { x: a, y: -h },
     { x: a, y: h }
   ].map(
-    (p) => m(p, e.direction, { x: 0, y: 0 })
-  ).map((p) => ({
-    x: p.x + e.shift.x,
-    y: p.y + e.shift.y
-  })), u = `M ${c[0].x} ${c[0].y}`, g = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, l = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
-  return `${u} ${g} ${l} ${w}`;
+    (w) => m(w, e.direction, { x: 0, y: 0 })
+  ).map((w) => ({
+    x: w.x + e.shift.x,
+    y: w.y + e.shift.y
+  })), u = `M ${c[0].x} ${c[0].y}`, g = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, l = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${u} ${g} ${l} ${p}`;
 }, Dt = (r) => (e) => {
   const t = r.smallRadius, o = r.radius, s = m(
     {
@@ -1567,7 +1567,7 @@ const Tt = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return Tt({
+      return Ct({
         radius: r.radius ?? v.polygonArrowRadius
       });
     case "arc":
@@ -1629,7 +1629,7 @@ class Rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? v.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? v.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? v.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new X({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? v.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? v.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? v.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1662,7 +1662,7 @@ class Lt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new te({
+    i(this, "createCyclePath", (e, t, o) => new re({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1700,7 +1700,7 @@ class Lt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new X({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1734,7 +1734,7 @@ class Vt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new te({
+    i(this, "createCyclePath", (e, t, o) => new re({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1773,7 +1773,7 @@ class Vt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new X({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1806,7 +1806,7 @@ class It {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new te({
+    i(this, "createCyclePath", (e, t, o) => new re({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1815,7 +1815,7 @@ class It {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Ct({
+    i(this, "createDetourPath", (e, t, o, s) => new Tt({
       from: e,
       to: t,
       fromDir: o,
@@ -1844,7 +1844,7 @@ class It {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new X({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1879,7 +1879,7 @@ class $e {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = P(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = B((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Ie(this.color), this.svg.appendChild(this.group), this.line = Fe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = Y(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = Y(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = P(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = B((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Ie(this.color), this.svg.appendChild(this.group), this.line = Fe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: o, width: s, height: n, from: a, to: h } = Ve(
@@ -1908,26 +1908,26 @@ class $e {
         y: (h.y - a.y) / g
       };
       if (this.sourceArrow) {
-        const w = {
+        const p = {
           x: l.x * this.sourceOffset,
           y: l.y * this.sourceOffset
         };
         c = this.arrowRenderer({
           direction: l,
-          shift: w,
+          shift: p,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", c);
       }
       if (this.targetArrow) {
-        const w = {
+        const p = {
           x: l.x * this.targetOffset,
           y: l.y * this.targetOffset
         };
         u = this.arrowRenderer({
           direction: { x: -l.x, y: -l.y },
           shift: {
-            x: h.x - w.x,
-            y: h.y - w.y
+            x: h.x - p.x,
+            y: h.y - p.y
           },
           arrowLength: this.arrowLength
         }), this.targetArrow.setAttribute("d", u);
@@ -1962,6 +1962,11 @@ class Be {
     i(this, "line");
     i(this, "sourceArrow");
     i(this, "targetArrow");
+    // TODO: make private
+    /**
+     * @deprecated
+     * do use shape.svg instead
+     */
     i(this, "handle", Ft());
     i(this, "onAfterRender");
     i(this, "interactiveLine");
@@ -1981,7 +1986,7 @@ class Be {
     this.baseEdge.render(e);
   }
 }
-class Hr {
+class Yr {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -2097,7 +2102,7 @@ class Oe {
     return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class J {
+class K {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -2115,13 +2120,13 @@ class J {
 }
 class We {
   constructor(e, t, o) {
-    i(this, "nodeIdGenerator", new J(
+    i(this, "nodeIdGenerator", new K(
       (e) => this.graphStore.hasNode(e)
     ));
-    i(this, "portIdGenerator", new J(
+    i(this, "portIdGenerator", new K(
       (e) => this.graphStore.hasPort(e)
     ));
-    i(this, "edgeIdGenerator", new J(
+    i(this, "edgeIdGenerator", new K(
       (e) => this.graphStore.hasEdge(e)
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -2252,7 +2257,7 @@ const Bt = (r) => {
   queueMicrotask(() => {
     r();
   });
-}, re = (r) => {
+}, oe = (r) => {
   r();
 };
 class ze {
@@ -2312,10 +2317,10 @@ class Ye {
     let u = ke(a, d, c);
     const g = t == null ? void 0 : t.contentScale;
     if (g !== void 0) {
-      const w = 1 / g;
+      const p = 1 / g;
       u = He(
         u,
-        w / a.scale,
+        p / a.scale,
         n.x,
         n.y
       );
@@ -2345,10 +2350,10 @@ class Ye {
       const d = {
         x: (t + o) / 2,
         y: (s + n) / 2
-      }, { scale: c } = this.viewportStore.getContentMatrix(), u = (n - s) * c, g = (o - t) * c, { width: l, height: w } = this.viewportStore.getDimensions(), p = Math.max(
+      }, { scale: c } = this.viewportStore.getContentMatrix(), u = (n - s) * c, g = (o - t) * c, { width: l, height: p } = this.viewportStore.getDimensions(), w = Math.max(
         g / l,
-        u / w
-      ), y = p > 1 ? c / p : c, f = Math.max(y, e.minContentScale);
+        u / p
+      ), y = w > 1 ? c / w : c, f = Math.max(y, e.minContentScale);
       this.center(d, {
         contentScale: f,
         animationDuration: e.animationDuration
@@ -2374,7 +2379,7 @@ class Ye {
   }
 }
 const Xe = (r, e, t) => {
-  const o = new Me(), s = new Oe(o), n = new ze(e), a = new Ce(o, e, r), h = {
+  const o = new Me(), s = new Oe(o), n = new ze(e), a = new Te(o, e, r), h = {
     nodes: {
       centerFn: Le,
       priorityFn: () => 0
@@ -2394,7 +2399,7 @@ const Xe = (r, e, t) => {
     focus: {
       contentPadding: 0,
       minContentScale: 0,
-      schedule: re,
+      schedule: oe,
       animationDuration: 0
     }
   }, u = new Ye(
@@ -2403,9 +2408,9 @@ const Xe = (r, e, t) => {
     c,
     t
   );
-  return new Te(s, n, d, u);
+  return new Ce(s, n, d, u);
 };
-class G {
+class j {
   constructor(e, t, o, s) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2420,7 +2425,7 @@ class G {
       if (!this.params.mouseDownEventVerifier(t))
         return;
       const o = e.currentTarget, s = this.canvas.graph.findPortIdsByElement(o)[0];
-      this.params.onPortPointerDown(s, {
+      this.params.portDragAllowedVerifier(s, {
         x: t.clientX,
         y: t.clientY
       }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
@@ -2434,20 +2439,20 @@ class G {
         e.clientX,
         e.clientY
       )) {
-        this.params.onPointerMoveOutside(), this.stopMouseDrag();
+        this.removeWindowMouseListeners(), this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: e.clientX, y: e.clientY });
     });
     i(this, "onWindowMouseUp", (e) => {
-      this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
+      this.params.mouseUpEventVerifier(e) && (this.removeWindowMouseListeners(), this.params.onPointerUp({ x: e.clientX, y: e.clientY }));
     });
     i(this, "onPortTouchStart", (e) => {
       const t = e;
       if (t.touches.length !== 1)
         return;
       const o = t.touches[0], s = e.currentTarget, n = this.canvas.graph.findPortIdsByElement(s)[0];
-      this.params.onPortPointerDown(n, {
+      this.params.portDragAllowedVerifier(n, {
         x: o.clientX,
         y: o.clientY
       }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
@@ -2464,14 +2469,15 @@ class G {
         t.clientX,
         t.clientY
       )) {
-        this.params.onPointerMoveOutside(), this.stopTouchDrag();
+        this.removeWindowTouchListeners(), this.params.onPointerOutside();
         return;
       }
       this.params.onPointerMove({ x: t.clientX, y: t.clientY });
     });
     i(this, "onWindowTouchFinish", (e) => {
+      this.removeWindowTouchListeners();
       const t = e.changedTouches[0];
-      this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
+      this.params.onPointerUp({ x: t.clientX, y: t.clientY });
     });
     i(this, "reset", () => {
       this.canvas.graph.getAllPortIds().forEach((e) => {
@@ -2480,12 +2486,12 @@ class G {
       });
     });
     i(this, "revert", () => {
-      this.params.onStopDrag(), this.reset(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
+      this.removeWindowMouseListeners(), this.removeWindowTouchListeners(), this.reset();
     });
     this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.params = s, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s) {
-    new G(e, t, o, s);
+    new j(e, t, o, s);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2497,12 +2503,6 @@ class G {
   unhookPortEvents(e) {
     e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
   }
-  stopMouseDrag() {
-    this.params.onStopDrag(), this.removeWindowMouseListeners();
-  }
-  stopTouchDrag() {
-    this.params.onStopDrag(), this.removeWindowTouchListeners();
-  }
   removeWindowMouseListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
   }
@@ -2511,35 +2511,6 @@ class G {
   }
 }
 class zt {
-  constructor(e, t, o) {
-    this.canvas = e, this.layoutAlgorithm = t, this.params = o;
-  }
-  apply() {
-    const e = this.layoutAlgorithm.calculateCoordinates({
-      graph: this.canvas.graph,
-      viewport: this.canvas.viewport
-    });
-    this.params.onBeforeApplied(), e.forEach((t, o) => {
-      this.params.staticNodeResolver(o) || this.canvas.updateNode(o, t);
-    }), this.params.onAfterApplied();
-  }
-}
-class kt {
-  constructor(e, t, o) {
-    this.canvas = e, this.layoutAlgorithm = t, this.params = o;
-  }
-  apply(e) {
-    const t = this.layoutAlgorithm.calculateNextCoordinates({
-      graph: this.canvas.graph,
-      viewport: this.canvas.viewport,
-      dt: e
-    });
-    this.params.onBeforeApplied(), t.forEach((o, s) => {
-      this.params.staticNodeResolver(s) || this.canvas.updateNode(s, o);
-    }), this.params.onAfterApplied();
-  }
-}
-class Ht {
   constructor() {
     i(this, "field", "_htmlGraphTags");
   }
@@ -2552,8 +2523,8 @@ class Ht {
     s === void 0 ? o[this.field] = /* @__PURE__ */ new Set([t]) : s.add(t);
   }
 }
-const oe = Symbol();
-class se {
+const se = Symbol();
+class ie {
   constructor(e, t, o) {
     i(this, "onSelected");
     i(this, "mouseDownEventVerifier");
@@ -2643,7 +2614,7 @@ class se {
     this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
   }
 }
-class ie {
+class ne {
   constructor(e, t, o, s, n) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2680,7 +2651,7 @@ class ie {
         nodeId: s,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, k(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, H(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2762,7 +2733,7 @@ class ie {
     this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.params = n, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s, n) {
-    new ie(
+    new ne(
       e,
       t,
       o,
@@ -2794,7 +2765,7 @@ class ie {
     }
   }
   stopMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, k(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, H(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2856,7 +2827,7 @@ const W = (r) => {
     touches: e
   };
 };
-class j {
+class J {
   constructor(e, t, o, s, n) {
     i(this, "viewport");
     i(this, "prevTouches", null);
@@ -2866,7 +2837,7 @@ class j {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     i(this, "onMouseDown", (e) => {
-      this.params.mouseDownEventVerifier(e) && (k(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && (H(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2944,7 +2915,7 @@ class j {
     }), e.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s, n) {
-    new j(
+    new J(
       e,
       t,
       o,
@@ -2971,7 +2942,7 @@ class j {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    k(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    H(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -3001,7 +2972,7 @@ class j {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
   }
 }
-class ne {
+class ae {
   constructor(e, t, o, s, n, a, h) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
@@ -3048,7 +3019,7 @@ class ne {
         this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
       }
     };
-    j.configure(
+    J.configure(
       e,
       this.element,
       this.window,
@@ -3057,7 +3028,7 @@ class ne {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, o, s, n, a, h) {
-    new ne(
+    new ae(
       e,
       t,
       o,
@@ -3088,24 +3059,24 @@ class ne {
     });
   }
 }
-const Yt = () => {
+const kt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Xt = () => {
+}, Ht = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Gt = () => {
+}, Yt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class ae {
+class he {
   constructor(e, t, o) {
-    i(this, "svg", Yt());
-    i(this, "patternRenderingRectangle", Xt());
-    i(this, "pattern", Gt());
+    i(this, "svg", kt());
+    i(this, "patternRenderingRectangle", Ht());
+    i(this, "pattern", Yt());
     i(this, "patternContent");
     i(this, "tileWidth");
     i(this, "tileHeight");
@@ -3126,7 +3097,7 @@ class ae {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new ae(e, t, o);
+    new he(e, t, o);
   }
   updateVisibility() {
     const { scale: e } = this.canvas.viewport.getViewportMatrix(), t = e > this.maxViewportScale;
@@ -3140,7 +3111,7 @@ class ae {
     }
   }
 }
-class he {
+class de {
   constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -3152,34 +3123,37 @@ class he {
       this.overlayLayer,
       this.viewportStore,
       this.window
-    ), G.configure(
+    );
+    const h = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      portDragAllowedVerifier: (d, c) => {
+        const u = this.params.connectionTypeResolver(d);
+        return u === null ? !1 : (this.grabPort(d, c, u), !0);
+      },
+      onPointerMove: (d) => {
+        this.moveDraggingPort(d);
+      },
+      onPointerUp: (d) => {
+        this.tryCreateConnection(d), this.resetDragState();
+      },
+      onPointerOutside: () => {
+        const d = this.staticPortId, c = this.isTargetDragging;
+        this.resetDragState(), this.params.onEdgeCreationInterrupted({
+          staticPortId: d,
+          isDirect: c
+        });
+      }
+    };
+    j.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
-      {
-        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        onStopDrag: () => {
-          this.resetDragState();
-        },
-        onPortPointerDown: (h, d) => {
-          const c = this.params.connectionTypeResolver(h);
-          return c === null ? !1 : (this.grabPort(h, d, c), !0);
-        },
-        onPointerMove: (h) => {
-          this.moveDraggingPort(h);
-        },
-        onPointerMoveOutside: () => {
-          this.handleEdgeCreationInterrupted();
-        },
-        onPointerUp: (h) => {
-          this.tryCreateConnection(h);
-        }
-      }
+      h
     );
   }
   static configure(e, t, o, s, n, a) {
-    new he(
+    new de(
       e,
       t,
       o,
@@ -3198,20 +3172,20 @@ class he {
       x: t.x - d.x,
       y: t.y - d.y
     }), g = {
-      overlayNodeId: M.StaticNodeId,
+      overlayNodeId: D.StaticNodeId,
       portCoords: c,
       portDirection: s.direction
     }, l = {
-      overlayNodeId: M.DraggingNodeId,
+      overlayNodeId: D.DraggingNodeId,
       portCoords: u,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = o === "direct";
-    const [w, p] = this.isTargetDragging ? [g, l] : [l, g];
-    this.overlayCanvas.addNode(H(w)), this.overlayCanvas.addNode(H(p)), this.overlayCanvas.addEdge({
-      from: w.overlayNodeId,
-      to: p.overlayNodeId,
-      shape: this.params.edgeShapeFactory(M.EdgeId)
+    const [p, w] = this.isTargetDragging ? [g, l] : [l, g];
+    this.overlayCanvas.addNode(Y(p)), this.overlayCanvas.addNode(Y(w)), this.overlayCanvas.addEdge({
+      from: p.overlayNodeId,
+      to: w.overlayNodeId,
+      shape: this.params.edgeShapeFactory(D.EdgeId)
     });
   }
   resetDragState() {
@@ -3220,31 +3194,27 @@ class he {
   tryCreateConnection(e) {
     const t = Re(this.canvas.graph, e);
     if (t === null) {
-      this.handleEdgeCreationInterrupted();
+      this.params.onEdgeCreationInterrupted({
+        staticPortId: this.staticPortId,
+        isDirect: this.isTargetDragging
+      });
       return;
     }
-    const o = this.staticPortId, s = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: s, to: n }, h = this.params.connectionPreprocessor(a);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
+    const o = this.staticPortId, s = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: s, to: n }, h = this.params.connectionAllowedVerifier(a), d = this.params.connectionPreprocessor(a);
+    h && d !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(d), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
   }
   moveDraggingPort(e) {
     const t = this.overlayLayer.getBoundingClientRect(), o = this.canvas.viewport.createContentCoords({
       x: e.x - t.x,
       y: e.y - t.y
     });
-    this.overlayCanvas.updateNode(M.DraggingNodeId, {
+    this.overlayCanvas.updateNode(D.DraggingNodeId, {
       x: o.x,
       y: o.y
     });
   }
-  handleEdgeCreationInterrupted() {
-    const e = this.staticPortId;
-    this.params.onEdgeCreationInterrupted({
-      staticPortId: e,
-      isDirect: this.isTargetDragging
-    });
-  }
 }
-class de {
+class ce {
   constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -3257,40 +3227,37 @@ class de {
       this.overlayLayer,
       this.viewportStore,
       this.window
-    ), G.configure(
+    );
+    const h = {
+      mouseDownEventVerifier: this.params.mouseDownEventVerifier,
+      mouseUpEventVerifier: this.params.mouseUpEventVerifier,
+      portDragAllowedVerifier: (d, c) => this.tryStartEdgeDragging(d, c),
+      onPointerMove: (d) => {
+        this.moveDraggingPort(d);
+      },
+      onPointerUp: (d) => {
+        this.tryCreateConnection(d), this.resetDragState();
+      },
+      onPointerOutside: () => {
+        const d = this.draggingEdgePayload;
+        this.resetDragState(), this.params.onEdgeReattachInterrupted({
+          id: d.id,
+          from: d.from,
+          to: d.to,
+          shape: d.shape,
+          priority: d.priority
+        });
+      }
+    };
+    j.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
-      {
-        mouseDownEventVerifier: this.params.mouseDownEventVerifier,
-        mouseUpEventVerifier: this.params.mouseUpEventVerifier,
-        onStopDrag: () => {
-          this.resetDragState();
-        },
-        onPortPointerDown: (h, d) => this.tryStartEdgeDragging(h, d),
-        onPointerMove: (h) => {
-          this.moveDraggingPort(h);
-        },
-        onPointerMoveOutside: () => {
-          const h = this.draggingEdgePayload;
-          queueMicrotask(() => {
-            this.params.onEdgeReattachInterrupted({
-              id: h.id,
-              from: h.from,
-              to: h.to,
-              shape: h.shape,
-              priority: h.priority
-            });
-          });
-        },
-        onPointerUp: (h) => {
-          this.tryCreateConnection(h);
-        }
-      }
+      h
     );
   }
   static configure(e, t, o, s, n, a) {
-    new de(
+    new ce(
       e,
       t,
       o,
@@ -3301,17 +3268,17 @@ class de {
   }
   tryStartEdgeDragging(e, t) {
     const o = this.params.draggingEdgeResolver(e);
-    if (o === null || !this.canvas.graph.hasEdge(o))
+    if (o === null)
       return !1;
     const s = this.canvas.graph.getEdge(o), n = e === s.from, a = e === s.to, h = n ? s.to : s.from;
     this.staticPortId = h, this.isTargetDragging = a;
     const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), u = c.element.getBoundingClientRect(), g = {
       x: u.x + u.width / 2,
       y: u.y + u.height / 2
-    }, l = this.overlayLayer.getBoundingClientRect(), w = this.canvas.viewport.createContentCoords({
+    }, l = this.overlayLayer.getBoundingClientRect(), p = this.canvas.viewport.createContentCoords({
       x: g.x - l.x,
       y: g.y - l.y
-    }), p = this.canvas.viewport.createContentCoords({
+    }), w = this.canvas.viewport.createContentCoords({
       x: t.x - l.x,
       y: t.y - l.y
     });
@@ -3323,21 +3290,21 @@ class de {
       priority: s.priority
     }, this.canvas.removeEdge(o);
     const y = {
-      overlayNodeId: M.StaticNodeId,
-      portCoords: w,
+      overlayNodeId: D.StaticNodeId,
+      portCoords: p,
       portDirection: c.direction
     }, f = {
-      overlayNodeId: M.DraggingNodeId,
-      portCoords: p,
+      overlayNodeId: D.DraggingNodeId,
+      portCoords: w,
       portDirection: d.direction
     }, [x, E] = this.isTargetDragging ? [y, f] : [f, y];
-    this.overlayCanvas.addNode(H(x)), this.overlayCanvas.addNode(H(E));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
+    this.overlayCanvas.addNode(Y(x)), this.overlayCanvas.addNode(Y(E));
+    const T = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(D.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
-      id: M.EdgeId,
+      id: D.EdgeId,
       from: x.overlayNodeId,
       to: E.overlayNodeId,
-      shape: N
+      shape: T
     }), !0;
   }
   resetDragState() {
@@ -3348,14 +3315,14 @@ class de {
       x: e.x - t.x,
       y: e.y - t.y
     }, s = this.canvas.viewport.createContentCoords(o);
-    this.overlayCanvas.updateNode(M.DraggingNodeId, {
+    this.overlayCanvas.updateNode(D.DraggingNodeId, {
       x: s.x,
       y: s.y
     });
   }
   tryCreateConnection(e) {
     const t = Re(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(M.EdgeId), t === null) {
+    if (this.overlayCanvas.removeEdge(D.EdgeId), t === null) {
       this.handleEdgeReattachInterrupted();
       return;
     }
@@ -3365,17 +3332,20 @@ class de {
       to: s,
       shape: n.shape,
       priority: n.priority
-    }, h = this.params.connectionPreprocessor(a);
-    if (h !== null)
-      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
+    }, h = this.params.connectionAllowedVerifier({
+      from: o,
+      to: s
+    }), d = this.params.connectionPreprocessor(a);
+    if (h && d !== null)
+      this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(d), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
     else {
-      const d = this.draggingEdgePayload;
+      const c = this.draggingEdgePayload;
       this.params.onEdgeReattachPrevented({
-        id: d.id,
-        from: d.from,
-        to: d.to,
-        shape: d.shape,
-        priority: d.priority
+        id: c.id,
+        from: c.from,
+        to: c.to,
+        shape: c.shape,
+        priority: c.priority
       });
     }
   }
@@ -3390,17 +3360,17 @@ class de {
     });
   }
 }
-class ce {
+class le {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new ce(e, t);
+    new le(e, t);
   }
 }
-class le {
+class ue {
   constructor(e, t, o) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
@@ -3417,7 +3387,7 @@ class le {
     });
   }
   static configure(e, t, o) {
-    new le(
+    new ue(
       e,
       t,
       o
@@ -3427,23 +3397,37 @@ class le {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class jt {
+class Xt {
+  constructor(e, t, o) {
+    this.canvas = e, this.layoutAlgorithm = t, this.params = o;
+  }
+  apply() {
+    const e = this.layoutAlgorithm.calculateCoordinates({
+      graph: this.canvas.graph,
+      viewport: this.canvas.viewport
+    });
+    this.params.onBeforeApplied(), e.forEach((t, o) => {
+      this.params.staticNodeResolver(o) || this.canvas.updateNode(o, t);
+    }), this.params.onAfterApplied();
+  }
+}
+class Gt {
   static configure(e, t) {
-    const o = t.applyOn, s = new zt(e, t.algorithm, {
+    const o = t.applyOn, s = new Xt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
     });
     switch (o.type) {
       case "trigger": {
-        ce.configure(
+        le.configure(
           s,
           o.trigger
         );
         break;
       }
       case "topologyChangeSchedule": {
-        le.configure(
+        ue.configure(
           e.graph,
           s,
           o.schedule
@@ -3453,7 +3437,7 @@ class jt {
     }
   }
 }
-class Jt {
+class jt {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3468,27 +3452,42 @@ class Jt {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class ue {
+class Jt {
+  constructor(e, t, o) {
+    this.canvas = e, this.layoutAlgorithm = t, this.params = o;
+  }
+  apply(e) {
+    const t = this.layoutAlgorithm.calculateNextCoordinates({
+      graph: this.canvas.graph,
+      viewport: this.canvas.viewport,
+      dt: e
+    });
+    this.params.onBeforeApplied(), t.forEach((o, s) => {
+      this.params.staticNodeResolver(s) || this.canvas.updateNode(s, o);
+    }), this.params.onAfterApplied();
+  }
+}
+class ge {
   constructor(e, t, o) {
     i(this, "applier");
     i(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = o, this.applier = new kt(e, t.algorithm, {
+    this.win = o, this.applier = new Jt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new Jt(this.win, this.step);
+    }), new jt(this.win, this.step);
   }
   static configure(e, t, o) {
-    new ue(e, t, o);
+    new ge(e, t, o);
   }
 }
-class ge {
+class pe {
   constructor(e, t, o, s, n) {
     i(this, "configurator");
     i(this, "onNodeSelected");
-    i(this, "selectionHandledTag", oe);
+    i(this, "selectionHandledTag", se);
     i(this, "onAfterNodeAdded", (e) => {
       const { element: t } = this.canvas.graph.getNode(e);
       this.configurator.enable(t);
@@ -3503,7 +3502,7 @@ class ge {
         this.configurator.disable(t);
       });
     });
-    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onNodeSelected = n.onNodeSelected, this.configurator = new se(
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onNodeSelected = n.onNodeSelected, this.configurator = new ie(
       this.window,
       this.pointInsideVerifier,
       {
@@ -3518,7 +3517,7 @@ class ge {
     ), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
   static configure(e, t, o, s, n) {
-    new ge(
+    new pe(
       e,
       t,
       o,
@@ -3527,10 +3526,10 @@ class ge {
     );
   }
 }
-class pe {
+class we {
   constructor(e, t, o, s, n) {
     i(this, "configurator");
-    i(this, "selectionHandledTag", oe);
+    i(this, "selectionHandledTag", se);
     i(this, "onEdgeSelected");
     i(this, "onAfterEdgeAdded", (e) => {
       const { shape: t } = this.canvas.graph.getEdge(e);
@@ -3546,7 +3545,7 @@ class pe {
         this.configurator.disable(t.svg);
       });
     });
-    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onEdgeSelected = n.onEdgeSelected, this.configurator = new se(
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onEdgeSelected = n.onEdgeSelected, this.configurator = new ie(
       this.window,
       this.pointInsideVerifier,
       {
@@ -3561,7 +3560,7 @@ class pe {
     ), this.canvas.graph.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.canvas.graph.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
   static configure(e, t, o, s, n) {
-    new pe(
+    new we(
       e,
       t,
       o,
@@ -3570,15 +3569,12 @@ class pe {
     );
   }
 }
-class we {
+class ye {
   constructor(e, t, o, s, n, a) {
     i(this, "configurator");
     i(this, "onCanvasSelected");
-    i(this, "selectionHandledTag", oe);
-    i(this, "restore", () => {
-      this.configurator.disable(this.element);
-    });
-    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.eventTagger = n, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new se(
+    i(this, "selectionHandledTag", se);
+    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.eventTagger = n, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new ie(
       this.window,
       this.pointInsideVerifier,
       {
@@ -3589,10 +3585,12 @@ class we {
         mouseDownEventVerifier: a.mouseDownEventVerifier,
         mouseUpEventVerifier: a.mouseUpEventVerifier
       }
-    ), this.configurator.enable(this.element), this.canvas.onBeforeDestroy.subscribe(this.restore);
+    ), this.configurator.enable(this.element), this.canvas.onBeforeDestroy.subscribe(() => {
+      this.configurator.disable(this.element);
+    });
   }
   static configure(e, t, o, s, n, a) {
-    new we(
+    new ye(
       e,
       t,
       o,
@@ -3625,23 +3623,39 @@ class Qt {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const Zt = (r) => {
-  var w, p, y, f, x, E;
-  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
-  }), t = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
-  }), o = r.nodeDragVerifier ?? (() => !0), s = ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
-  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (f = r.mouse) == null ? void 0 : f.dragCursor, d = h !== void 0 ? h : "grab", c = (x = r.mouse) == null ? void 0 : x.mouseDownEventVerifier, u = c !== void 0 ? c : (N) => N.button === 0, g = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, l = g !== void 0 ? g : (N) => N.button === 0;
+const b = 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
+}), L = Object.freeze({
+  mouseDownEventVerifier: (r) => r.button === 0,
+  mouseUpEventVerifier: (r) => r.button === 0,
+  movementThreshold: 10
+}), N = () => {
+}, Zt = (r) => {
+  var u, g, l, p, w, y;
+  const e = r.nodeDragVerifier ?? (() => !0), t = r.moveOnTop !== !1, o = r.moveEdgesOnTop !== !1 && t, s = (u = r.mouse) == null ? void 0 : u.dragCursor, n = s !== void 0 ? s : "grab", a = (g = r.mouse) == null ? void 0 : g.mouseDownEventVerifier, h = a !== void 0 ? a : (f) => f.button === 0, d = (l = r.mouse) == null ? void 0 : l.mouseUpEventVerifier, c = d !== void 0 ? d : (f) => f.button === 0;
   return {
-    moveOnTop: n,
-    moveEdgesOnTop: a,
-    dragCursor: d,
+    moveOnTop: t,
+    moveEdgesOnTop: o,
+    dragCursor: n,
     gridSize: r.gridSize ?? null,
-    mouseDownEventVerifier: u,
-    mouseUpEventVerifier: l,
-    onNodeDragStarted: e,
-    onNodeDrag: t,
-    nodeDragVerifier: o,
-    onNodeDragFinished: s
+    mouseDownEventVerifier: h,
+    mouseUpEventVerifier: c,
+    onNodeDragStarted: ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? N,
+    onNodeDrag: ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? N,
+    nodeDragVerifier: e,
+    onNodeDragFinished: ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? N
   };
 }, _t = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, s = r.maxY !== null ? r.maxY : 1 / 0;
@@ -3700,35 +3714,29 @@ const Zt = (r) => {
       });
   }
 }, Ne = (r) => {
-  var p, y, f, x, E, N, C, T, I, F, U, fe;
-  const e = (p = r == null ? void 0 : r.scale) == null ? void 0 : p.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
+  var l, p, w, y, f, x, E, T, C, M, F, U;
+  const e = (l = r == null ? void 0 : r.scale) == null ? void 0 : l.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let s;
   o !== void 0 ? Array.isArray(o) ? s = er(
     o.map(
       (R) => be(R)
     )
   ) : s = be(o) : s = (R) => R.nextTransform;
-  const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeTransformChange) ?? (() => {
-  }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (E = r == null ? void 0 : r.shift) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (R) => R.button === 0, u = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseUpEventVerifier, g = u !== void 0 ? u : (R) => R.button === 0, l = (C = r == null ? void 0 : r.scale) == null ? void 0 : C.mouseWheelEventVerifier, w = l !== void 0 ? l : () => !0;
+  const n = ((p = r == null ? void 0 : r.shift) == null ? void 0 : p.cursor) !== void 0 ? r.shift.cursor : "grab", a = (w = r == null ? void 0 : r.shift) == null ? void 0 : w.mouseDownEventVerifier, h = a !== void 0 ? a : (R) => R.button === 0, d = (y = r == null ? void 0 : r.shift) == null ? void 0 : y.mouseUpEventVerifier, c = d !== void 0 ? d : (R) => R.button === 0, u = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelEventVerifier, g = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onTransformStarted) ?? (() => {
-    }),
-    onTransformFinished: ((I = r == null ? void 0 : r.events) == null ? void 0 : I.onTransformFinished) ?? (() => {
-    }),
-    onBeforeTransformChange: a,
-    onTransformChange: h,
+    onTransformStarted: ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformStarted) ?? N,
+    onTransformFinished: ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onTransformFinished) ?? N,
+    onBeforeTransformChange: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onBeforeTransformChange) ?? N,
+    onTransformChange: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformChange) ?? N,
     transformPreprocessor: s,
     shiftCursor: n,
-    mouseDownEventVerifier: c,
-    mouseUpEventVerifier: g,
-    mouseWheelEventVerifier: w,
-    scaleWheelFinishTimeout: ((F = r == null ? void 0 : r.scale) == null ? void 0 : F.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((U = r == null ? void 0 : r.events) == null ? void 0 : U.onResizeTransformStarted) ?? (() => {
-    }),
-    onResizeTransformFinished: ((fe = r == null ? void 0 : r.events) == null ? void 0 : fe.onResizeTransformFinished) ?? (() => {
-    })
+    mouseDownEventVerifier: h,
+    mouseUpEventVerifier: c,
+    mouseWheelEventVerifier: g,
+    scaleWheelFinishTimeout: ((M = r == null ? void 0 : r.scale) == null ? void 0 : M.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((F = r == null ? void 0 : r.events) == null ? void 0 : F.onResizeTransformStarted) ?? N,
+    onResizeTransformFinished: ((U = r == null ? void 0 : r.events) == null ? void 0 : U.onResizeTransformFinished) ?? N
   };
 }, tr = (r, e) => {
   const t = document.createElementNS(
@@ -3747,7 +3755,7 @@ const Zt = (r) => {
     renderer: s,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, ye = (r) => {
+}, fe = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
@@ -3817,41 +3825,46 @@ const Zt = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, sr = (r, e, t) => {
-  var c, u, g;
-  const o = () => "direct", s = (l) => l, n = (l) => l.button === 0, a = () => {
-  }, h = () => {
-  }, d = () => {
-  };
+}, $ = Object.freeze({
+  connectionTypeResolver: () => "direct",
+  connectionPreprocessor: (r) => r,
+  connectionAllowedVerifier: () => !0,
+  mouseEventVerifier: (r) => r.button === 0
+}), sr = (r, e, t) => {
+  var o, s, n;
   return {
-    connectionTypeResolver: r.connectionTypeResolver ?? o,
-    connectionPreprocessor: r.connectionPreprocessor ?? s,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
-    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
-    onEdgeCreationInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeCreationInterrupted) ?? d,
-    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
+    connectionTypeResolver: r.connectionTypeResolver ?? $.connectionTypeResolver,
+    connectionPreprocessor: r.connectionPreprocessor ?? $.connectionPreprocessor,
+    connectionAllowedVerifier: r.connectionAllowedVerifier ?? $.connectionAllowedVerifier,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? $.mouseEventVerifier,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? $.mouseEventVerifier,
+    onAfterEdgeCreated: ((o = r.events) == null ? void 0 : o.onAfterEdgeCreated) ?? N,
+    onEdgeCreationInterrupted: ((s = r.events) == null ? void 0 : s.onEdgeCreationInterrupted) ?? N,
+    onEdgeCreationPrevented: ((n = r.events) == null ? void 0 : n.onEdgeCreationPrevented) ?? N,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? ye(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? fe(r.edgeShape) : e
   };
-}, ir = (r, e) => {
-  var c, u, g;
-  const t = (l) => l, o = (l) => l.button === 0 && l.ctrlKey, s = (l) => l.button === 0, n = (l) => {
-    const w = e.getPortAdjacentEdgeIds(l);
-    return w.length > 0 ? w[w.length - 1] : null;
-  }, a = () => {
-  }, h = () => {
-  }, d = () => {
+}, z = Object.freeze({
+  connectionAllowedVerifier: () => !0,
+  connectionPreprocessor: (r) => r,
+  mouseDownEventVerifier: (r) => r.button === 0 && r.ctrlKey,
+  mouseUpEventVerifier: (r) => r.button === 0
+}), ir = (r, e) => {
+  var o, s, n;
+  const t = (a) => {
+    const h = e.getPortAdjacentEdgeIds(a);
+    return h.length > 0 ? h[h.length - 1] : null;
   };
   return {
-    connectionPreprocessor: r.connectionPreprocessor ?? t,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
-    draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ye(r.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
-    onEdgeReattachInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeReattachInterrupted) ?? d,
-    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
+    connectionPreprocessor: r.connectionPreprocessor ?? z.connectionPreprocessor,
+    connectionAllowedVerifier: r.connectionAllowedVerifier ?? z.connectionAllowedVerifier,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? z.mouseDownEventVerifier,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? z.mouseUpEventVerifier,
+    draggingEdgeResolver: r.draggingEdgeResolver ?? t,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? fe(r.draggingEdgeShape) : null,
+    onAfterEdgeReattached: ((o = r.events) == null ? void 0 : o.onAfterEdgeReattached) ?? N,
+    onEdgeReattachInterrupted: ((s = r.events) == null ? void 0 : s.onEdgeReattachInterrupted) ?? N,
+    onEdgeReattachPrevented: ((n = r.events) == null ? void 0 : n.onEdgeReattachPrevented) ?? N
   };
 }, nr = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
@@ -3859,10 +3872,8 @@ const Zt = (r) => {
 }), ar = (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) ?? (() => {
-    })
+    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? N,
+    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? N
   };
 };
 class hr extends Error {
@@ -3904,8 +3915,8 @@ class Ge {
       const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), n = this.graph.getPort(o.to), a = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
         a,
         h
-      ), u = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, g = d.ex * u, l = d.ey * u, w = e.get(s.nodeId), p = e.get(n.nodeId);
-      w.x += g, w.y += l, p.x -= g, p.y -= l;
+      ), u = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, g = d.ex * u, l = d.ey * u, p = e.get(s.nodeId), w = e.get(n.nodeId);
+      p.x += g, p.y += l, w.x -= g, w.y -= l;
     });
   }
 }
@@ -3955,8 +3966,8 @@ class dr {
           targetCharge: this.nodeCharge,
           distance: g.d,
           maxForce: this.maxForce
-        }), w = l * g.ex, p = l * g.ey, y = t.get(a), f = t.get(d);
-        y.x -= w, y.y -= p, f.x += w, f.y += p;
+        }), p = l * g.ex, w = l * g.ey, y = t.get(a), f = t.get(d);
+        y.x -= p, y.y -= w, f.x += p, f.y += w;
       }
     }
   }
@@ -4034,8 +4045,8 @@ class lr {
     this.sortedParentNodes.push(e);
     const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = s / 2;
     e.nodeIds.forEach((l) => {
-      const { x: w, y: p } = this.coords.get(l);
-      w < t ? p < o ? d.add(l) : h.add(l) : p < o ? a.add(l) : n.add(l), e.nodeIds.delete(l);
+      const { x: p, y: w } = this.coords.get(l);
+      p < t ? w < o ? d.add(l) : h.add(l) : w < o ? a.add(l) : n.add(l), e.nodeIds.delete(l);
     });
     const u = {
       parent: e,
@@ -4319,16 +4330,16 @@ class Qe {
     this.rand = e.rand, this.sparsity = e.sparsity;
   }
   calculateCoordinates(e) {
-    const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((p) => {
-      const y = t.getNode(p);
+    const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((w) => {
+      const y = t.getNode(w);
       return y.x === null || y.y === null;
     }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, u = o.createContentCoords(c), g = a / 2, l = {
       x: u.x - g,
       y: u.y - g
     };
-    return t.getAllNodeIds().forEach((p) => {
-      const y = t.getNode(p);
-      s.set(p, {
+    return t.getAllNodeIds().forEach((w) => {
+      const y = t.getNode(w);
+      s.set(w, {
         x: y.x ?? l.x + a * this.rand(),
         y: y.y ?? l.y + a * this.rand()
       });
@@ -4509,9 +4520,9 @@ class fr {
         const u = [];
         n += this.params.layerWidth, c.forEach((g) => {
           g.children.forEach((l) => {
-            const w = t.get(g.nodeId).y;
+            const p = t.get(g.nodeId).y;
             t.set(l.nodeId, {
-              y: w + d.get(l.nodeId),
+              y: p + d.get(l.nodeId),
               x: n
             }), u.push(l);
           });
@@ -4598,25 +4609,7 @@ const Ze = (r) => {
   r |= 0, e |= 0, t |= 0, o |= 0;
   const s = (r + e | 0) + o | 0;
   return o = o + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + s | 0, (s >>> 0) / 4294967296;
-}, b = 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
-}), D = Object.freeze({
-  mouseDownEventVerifier: (r) => r.button === 0,
-  mouseUpEventVerifier: (r) => r.button === 0,
-  movementThreshold: 10
-}), Ar = (r) => {
+}, Ar = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
@@ -4638,21 +4631,17 @@ const Ze = (r) => {
       });
     }
   }
-}, K = {
-  staticNodeResolver: () => !1,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  }
-}, Sr = (r) => {
+}, Sr = {
+  staticNodeResolver: () => !1
+}, br = (r) => {
   var t, o;
   return {
     algorithm: Ar((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? K.staticNodeResolver,
-    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? K.onBeforeApplied,
-    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? K.onAfterApplied
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Sr.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? N,
+    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? N
   };
-}, br = (r) => r instanceof _ ? {
+}, Nr = (r) => r instanceof q ? {
   type: "trigger",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
@@ -4661,24 +4650,20 @@ const Ze = (r) => {
 } : {
   type: "topologyChangeSchedule",
   schedule: Ot
-}, $ = Object.freeze({
+}, Z = Object.freeze({
   staticNodeResolver: () => !1,
-  onBeforeApplied: () => {
-  },
-  onAfterApplied: () => {
-  },
   hierarchicalLayout: {
     layerWidth: 300,
     layerSpace: 300
   }
-}), z = (r, e) => ({
+}), k = (r, e) => ({
   a: r.a * e.a + r.b * e.d,
   b: r.a * e.b + r.b * e.e,
   c: r.a * e.c + r.b * e.f + r.c,
   d: r.d * e.a + r.e * e.d,
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
-}), Nr = (r) => {
+}), Pr = (r) => {
   const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
     a: n / h,
@@ -4689,7 +4674,7 @@ const Ze = (r) => {
     f: (o * s - e * a) / h
   };
 };
-class Pr {
+class Tr {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4723,18 +4708,18 @@ class Pr {
     return this.createRelativeTransform(o, s);
   }
   createMirrorRelativeMatrix(e, t) {
-    const o = this.createMirrorYBaseMatrix(), s = z(
+    const o = this.createMirrorYBaseMatrix(), s = k(
       this.createShiftBaseMatrix(t),
       this.createRotateBaseMatrix(e)
     );
     return this.createRelativeTransform(o, s);
   }
   createRelativeTransform(e, t) {
-    const o = z(
+    const o = k(
       t,
       e
-    ), s = Nr(t);
-    return z(o, s);
+    ), s = Pr(t);
+    return k(o, s);
   }
   createShiftBaseMatrix(e) {
     return {
@@ -4792,10 +4777,10 @@ const Cr = (r) => {
     e: 1,
     f: 0
   };
-  const o = new Pr();
+  const o = new Tr();
   return e.forEach((s) => {
     const n = o.resolve(s);
-    t = z(t, n);
+    t = k(t, n);
   }), (s) => {
     const { x: n, y: a } = s;
     return {
@@ -4803,7 +4788,7 @@ const Cr = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, Tr = (r) => {
+}, Mr = (r) => {
   if (typeof r == "function")
     return r;
   switch (r) {
@@ -4814,17 +4799,17 @@ const Cr = (r) => {
     default:
       return vr;
   }
-}, Mr = (r) => {
+}, Dr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
       return new fr({
-        layerWidth: r.layerWidth ?? $.hierarchicalLayout.layerWidth,
-        layerSpace: r.layerSpace ?? $.hierarchicalLayout.layerSpace,
+        layerWidth: r.layerWidth ?? Z.hierarchicalLayout.layerWidth,
+        layerSpace: r.layerSpace ?? Z.hierarchicalLayout.layerSpace,
         transform: Cr(r.transform),
-        nextLayerNodesResolver: Tr(
+        nextLayerNodesResolver: Mr(
           r.nextLayerNodesResolver
         )
       });
@@ -4846,16 +4831,16 @@ const Cr = (r) => {
       });
     }
   }
-}, Dr = (r) => {
+}, Rr = (r) => {
   var e, t;
   return {
-    algorithm: Mr(r.algorithm),
-    applyOn: br(r.applyOn),
-    staticNodeResolver: r.staticNodeResolver ?? $.staticNodeResolver,
-    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? $.onBeforeApplied,
-    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? $.onAfterApplied
+    algorithm: Dr(r.algorithm),
+    applyOn: Nr(r.applyOn),
+    staticNodeResolver: r.staticNodeResolver ?? Z.staticNodeResolver,
+    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? N,
+    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? N
   };
-}, Rr = (r, e) => ({
+}, Lr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4863,7 +4848,7 @@ const Cr = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Lr = (r, e) => {
+}), Vr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4871,22 +4856,22 @@ const Cr = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, Vr = (r, e) => ({
+}, Ir = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), Z = (r) => () => r, Pe = Z(0), Ir = () => {
+}), _ = (r) => () => r, Pe = _(0), Fr = () => {
   let r = 0;
   return () => r++;
-}, Fr = (r, e) => {
+}, Ur = (r, e) => {
   let t = Pe, o = Pe;
-  const s = Ir();
-  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = Z(r)), typeof e == "number" && (o = Z(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+  const s = Fr();
+  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = _(r)), typeof e == "number" && (o = _(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
-}, Ur = (r) => {
+}, $r = (r) => {
   var t, o, s, n, a;
-  const e = Fr(
+  const e = Ur(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
@@ -4899,13 +4884,13 @@ const Cr = (r) => {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ye(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: fe(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, $r = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Br = (r) => {
+}, Br = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : oe, Or = (r) => {
   var o, s, n, a;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? $r(r.layoutParams) : re;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? Br(r.layoutParams) : oe;
   return {
     focus: {
       contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4914,23 +4899,23 @@ const Cr = (r) => {
       animationDuration: ((a = e.focus) == null ? void 0 : a.animationDuration) ?? 0
     }
   };
-}, Or = (r) => ({
+}, Wr = (r) => ({
   onNodeSelected: r.onNodeSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? D.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? D.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? D.movementThreshold
-}), Wr = (r) => ({
-  onCanvasSelected: r.onCanvasSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? D.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? D.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? D.movementThreshold
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? L.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? L.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? L.movementThreshold
 }), zr = (r) => ({
+  onCanvasSelected: r.onCanvasSelected,
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? L.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? L.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? L.movementThreshold
+}), kr = (r) => ({
   onEdgeSelected: r.onEdgeSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? D.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? D.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? D.movementThreshold
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? L.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? L.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? L.movementThreshold
 });
-class Yr {
+class Xr {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4953,11 +4938,11 @@ class Yr {
     i(this, "hasUserDraggableEdges", !1);
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
-    i(this, "boxRenderingTrigger", new _());
+    i(this, "boxRenderingTrigger", new q());
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     i(this, "pointInsideVerifier");
-    i(this, "eventTagger", new Ht());
+    i(this, "eventTagger", new zt());
     this.element = e, this.pointInsideVerifier = new ut(e, this.window);
   }
   setDefaults(e) {
@@ -5009,13 +4994,13 @@ class Yr {
       o.main,
       t,
       e
-    ), n = Ur(
+    ), n = $r(
       this.canvasDefaults
     ), a = new We(
       t,
       s,
       n
-    ), h = Dr(this.layoutConfig), d = Br({
+    ), h = Rr(this.layoutConfig), d = Or({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
@@ -5024,21 +5009,21 @@ class Yr {
       e,
       d,
       this.window
-    ), u = new ze(e), g = new Oe(t), l = new Te(
+    ), u = new ze(e), g = new Oe(t), l = new Ce(
       g,
       u,
       a,
       c
     );
-    if (this.hasBackground && ae.configure(
+    if (this.hasBackground && he.configure(
       l,
       or(this.backgroundConfig),
       o.background
-    ), this.hasNodeResizeReactiveEdges && q.configure(l), this.userSelectableEdgesConfig !== void 0) {
-      const p = zr(
+    ), this.hasNodeResizeReactiveEdges && ee.configure(l), this.userSelectableEdgesConfig !== void 0) {
+      const p = kr(
         this.userSelectableEdgesConfig
       );
-      pe.configure(
+      we.configure(
         l,
         this.window,
         this.pointInsideVerifier,
@@ -5047,10 +5032,10 @@ class Yr {
       );
     }
     if (this.userSelectableNodesConfig !== void 0) {
-      const p = Or(
+      const p = Wr(
         this.userSelectableNodesConfig
       );
-      ge.configure(
+      pe.configure(
         l,
         this.window,
         this.pointInsideVerifier,
@@ -5059,10 +5044,10 @@ class Yr {
       );
     }
     if (this.userSelectableCanvasConfig !== void 0) {
-      const p = Wr(
+      const p = zr(
         this.userSelectableCanvasConfig
       );
-      we.configure(
+      ye.configure(
         l,
         o.main,
         this.window,
@@ -5073,10 +5058,10 @@ class Yr {
     }
     if (this.hasDraggableNodes) {
       let p = Zt(this.dragConfig);
-      this.hasAnimatedLayout && (p = Rr(
+      this.hasAnimatedLayout && (p = Lr(
         p,
         this.animationStaticNodes
-      )), ie.configure(
+      )), ne.configure(
         l,
         o.main,
         this.window,
@@ -5090,7 +5075,7 @@ class Yr {
         n.edges.shapeFactory,
         n.ports.direction
       );
-      he.configure(
+      de.configure(
         l,
         o.overlayConnectablePorts,
         e,
@@ -5104,7 +5089,7 @@ class Yr {
         this.draggableEdgesConfig,
         l.graph
       );
-      de.configure(
+      ce.configure(
         l,
         o.overlayDraggableEdges,
         e,
@@ -5113,7 +5098,7 @@ class Yr {
         p
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? ne.configure(
+    if (this.virtualScrollConfig !== void 0 ? ae.configure(
       l,
       o.main,
       this.window,
@@ -5121,31 +5106,28 @@ class Yr {
       this.boxRenderingTrigger,
       this.pointInsideVerifier,
       nr(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && j.configure(
+    ) : this.hasTransformableViewport && J.configure(
       l,
       o.main,
       this.window,
       this.pointInsideVerifier,
       Ne(this.transformConfig)
-    ), this.hasLayout && jt.configure(l, h), this.hasAnimatedLayout) {
-      let p = Sr(
-        this.animatedLayoutConfig
-      );
-      this.hasDraggableNodes && (Lr(
+    ), this.hasLayout && Gt.configure(l, h), this.hasAnimatedLayout) {
+      let p = br(this.animatedLayoutConfig);
+      this.hasDraggableNodes && (Vr(
         l,
         this.animationStaticNodes
-      ), p = Vr(
+      ), p = Ir(
         p,
         this.animationStaticNodes
-      )), ue.configure(l, p, this.window);
+      )), ge.configure(l, p, this.window);
     }
-    const w = () => {
-      o.destroy(), l.onBeforeDestroy.unsubscribe(w);
-    };
-    return l.onBeforeDestroy.subscribe(w), l;
+    return l.onBeforeDestroy.subscribe(() => {
+      o.destroy();
+    }), l;
   }
   createHtmlView(e, t, o) {
-    let s = new Ce(t, o, e);
+    let s = new Te(t, o, e);
     return this.virtualScrollConfig !== void 0 && (s = new nt(
       s,
       t,
@@ -5156,16 +5138,16 @@ class Yr {
 }
 export {
   Rt as BezierEdgeShape,
-  Yr as CanvasBuilder,
+  Xr as CanvasBuilder,
   hr as CanvasBuilderError,
   A as CanvasError,
-  V as ConnectionCategory,
+  I as ConnectionCategory,
   $e as DirectEdgeShape,
-  _ as EventSubject,
+  q as EventSubject,
   Lt as HorizontalEdgeShape,
   $t as InteractiveEdgeError,
   Be as InteractiveEdgeShape,
-  Hr as MidpointEdgeShape,
+  Yr as MidpointEdgeShape,
   Vt as StraightEdgeShape,
   It as VerticalEdgeShape
 };