@html-graph/html-graph 8.6.1 → 8.7.1

package/dist/html-graph.js

@@ -1,7 +1,7 @@
 var Ke = Object.defineProperty;
 var Qe = (r, e, t) => e in r ? Ke(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var i = (r, e, t) => Qe(r, typeof e != "symbol" ? e + "" : e, t);
-var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
+var D = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(D || {});
 const Ze = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
@@ -72,8 +72,8 @@ class Ee {
       h,
       d
     ), g = this.createEdgeRenderPort(o, a, h, d);
-    let l = R.Line;
-    s.element === o.element ? l = R.PortCycle : s.nodeId === o.nodeId && (l = R.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
+    let l = D.Line;
+    s.element === o.element ? l = D.PortCycle : s.nodeId === o.nodeId && (l = D.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -724,7 +724,7 @@ class Q {
 const nt = (r, e, t) => {
   const { x: s, y: o, width: n, height: a } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= o && t <= o + a;
-}, at = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, D = (r, e, t, s) => nt(e, t, s) && at(r, t, s), U = (r, e) => {
+}, at = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => nt(e, t, s) && at(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, O = (r) => {
   const e = document.createElement("div");
@@ -786,7 +786,7 @@ var N = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "
 const Ne = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), w = {
+}), y = {
   x: 0,
   y: 0
 }, m = (r, e, t) => ({
@@ -820,9 +820,9 @@ class dt {
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
     const s = m(
-      { x: this.params.arrowLength, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), o = m(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
@@ -833,7 +833,7 @@ class dt {
     }, a = {
       x: o.x - this.params.targetDirection.x * this.params.curvature,
       y: o.y - this.params.targetDirection.y * this.params.curvature
-    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${o.x} ${o.y}`, d = this.params.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${o.x} ${o.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}, ${o.x} ${o.y}`, d = this.params.hasSourceArrow ? "" : `M ${y.x} ${y.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${this.params.to.x} ${this.params.to.y}`;
     this.path = `${d}${h}${c}`;
   }
 }
@@ -843,10 +843,10 @@ class ct {
     i(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? m(
+      y
+    ) : y, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -854,9 +854,9 @@ class ct {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, o = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
-      { x: o, y: w.y },
+      { x: o, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), g = {
       x: c.x + h,
       y: c.y + d
@@ -867,10 +867,10 @@ class ct {
     ), u = {
       x: l.x + h,
       y: l.y + d
-    }, p = {
+    }, w = {
       x: (g.x + u.x) / 2,
       y: (g.y + u.y) / 2
-    }, y = {
+    }, p = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
@@ -886,10 +886,10 @@ class ct {
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${x.x} ${x.y} ${p.x} ${p.y}`,
+      `C ${p.x} ${p.y} ${x.x} ${x.y} ${w.x} ${w.y}`,
       `C ${b.x} ${b.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = z(p, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = z(w, e.flipX, e.flipY, e.to);
   }
 }
 const Z = Object.freeze({
@@ -897,13 +897,13 @@ const Z = Object.freeze({
 }), Me = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(Z.edgeColor, r), e;
-}, Re = (r) => {
+}, De = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, W = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
-}, De = () => {
+}, Re = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
 }, Le = (r, e) => {
@@ -915,13 +915,13 @@ const Z = Object.freeze({
     let o = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, g = 0, l = 0;
-      const u = d > 0, p = d < s, y = u && p;
-      if (u && (c = -o, g = -n, l = a), p) {
+      const u = d > 0, w = d < s, p = u && w;
+      if (u && (c = -o, g = -n, l = a), w) {
         const V = r[d + 1];
         o = V.x - h.x, n = V.y - h.y, a = Math.sqrt(o * o + n * n);
       }
-      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = y ? { x: h.x + o * x, y: h.y + n * x } : h, C = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, L = y ? { x: h.x + c * C, y: h.y + g * C } : h;
-      d > 0 && t.push(`L ${L.x} ${L.y}`), y && t.push(
+      const x = a !== 0 ? Math.min((p ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = p ? { x: h.x + o * x, y: h.y + n * x } : h, C = l !== 0 ? Math.min((p ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, L = p ? { x: h.x + c * C, y: h.y + g * C } : h;
+      d > 0 && t.push(`L ${L.x} ${L.y}`), p && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${b.x} ${b.y}`
       );
     });
@@ -936,10 +936,10 @@ class lt {
     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: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, o = this.params.hasTargetArrow ? m(
+      y
+    ) : y, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -947,9 +947,9 @@ class lt {
       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: w.y },
+      { x: a, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), d = m(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
@@ -957,12 +957,12 @@ class lt {
     ), 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 }, p = {
+    }, u = { x: l.x, y: g }, w = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, y = { x: p.x, y: g };
+    }, p = { x: w.x, y: g };
     this.path = M(
-      [s, h, l, u, y, p, d, o],
+      [s, h, l, u, p, w, d, o],
       this.params.roundness
     );
   }
@@ -973,10 +973,10 @@ class gt {
     i(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? m(
+      y
+    ) : y, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -984,15 +984,15 @@ class gt {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: o, y: w.y },
+      { x: o, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
       { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), u = { x: l.x + d, y: l.y + c }, 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 = M(
+    ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
+    this.midpoint = z(w, e.flipX, e.flipY, e.to), this.path = M(
       [t, n, g, u, l, s],
       this.params.roundness
     );
@@ -1006,10 +1006,10 @@ class ut {
     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: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, o = this.params.hasTargetArrow ? m(
+      y
+    ) : y, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1017,9 +1017,9 @@ class ut {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
-      { x: n, y: w.y },
+      { x: n, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), h = m(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
@@ -1036,10 +1036,10 @@ class pt {
     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: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, o = this.params.hasTargetArrow ? m(
+      y
+    ) : y, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1047,9 +1047,9 @@ class pt {
       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: w.y },
+      { x: a, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), d = m(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
@@ -1057,12 +1057,12 @@ class pt {
     ), 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 }, p = {
+    }, u = { x: g, y: l.y }, w = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, y = { x: g, y: p.y };
+    }, p = { x: g, y: w.y };
     this.path = M(
-      [s, h, l, u, y, p, d, o],
+      [s, h, l, u, p, w, d, o],
       this.params.roundness
     );
   }
@@ -1073,17 +1073,17 @@ class J {
     i(this, "midpoint");
     this.params = e;
     const t = this.params.arrowOffset, s = this.params.side, o = this.params.arrowLength + t, n = o + 2 * s, h = [
-      { x: this.params.arrowLength, y: w.y },
-      { x: o, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
+      { x: o, y: y.y },
       { x: o, y: this.params.side },
       { x: n, y: this.params.side },
       { x: n, y: -this.params.side },
       { x: o, y: -this.params.side },
-      { x: o, y: w.y },
-      { x: this.params.arrowLength, y: w.y }
+      { x: o, y: y.y },
+      { x: this.params.arrowLength, y: y.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, w)
-    ), d = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
+      (c) => m(c, this.params.sourceDirection, y)
+    ), d = `M ${y.x} ${y.y} L ${h[0].x} ${h[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${M(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
@@ -1093,19 +1093,19 @@ class wt {
     i(this, "midpoint");
     this.params = e;
     const t = this.params.smallRadius, s = this.params.radius, o = t + s, n = t * s / o, a = Math.sqrt(o * o - t * t), h = a * t / o, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
-      { x: this.params.arrowLength, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (y) => m(y, this.params.sourceDirection, w)
+      (p) => m(p, this.params.sourceDirection, y)
     ), 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(" "), 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];
+    ].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];
   }
 }
 class yt {
@@ -1127,7 +1127,7 @@ class yt {
       offset: this.params.sourceOffset,
       hasArrow: this.params.hasSourceArrow,
       flip: 1,
-      shift: w
+      shift: y
     }), n = this.createDirectLinePoint({
       offset: this.params.targetOffset,
       hasArrow: this.params.hasTargetArrow,
@@ -1150,10 +1150,10 @@ class ft {
     i(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? m(
+      y
+    ) : y, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1161,9 +1161,9 @@ class ft {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: o, y: w.y },
+      { x: o, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), a = m(
       { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
@@ -1191,10 +1191,10 @@ class mt {
     i(this, "midpoint");
     this.params = e;
     const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: w.y },
+      { x: this.params.arrowLength, y: y.y },
       this.params.sourceDirection,
-      w
-    ) : w, s = this.params.hasTargetArrow ? m(
+      y
+    ) : y, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1202,9 +1202,9 @@ class mt {
       this.params.targetDirection,
       this.params.to
     ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: o, y: w.y },
+      { x: o, y: y.y },
       this.params.sourceDirection,
-      w
+      y
     ), a = m(
       { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
@@ -1252,14 +1252,14 @@ const f = Object.freeze({
 class k {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", De());
+    i(this, "group", Re());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = S(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Me(e.color), this.svg.appendChild(this.group), this.line = Re(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = S(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Me(e.color), this.svg.appendChild(this.group), this.line = De(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = Te(
@@ -1280,53 +1280,53 @@ class k {
       y: n
     };
     let l = { x: -c.x, y: -c.y }, u;
-    e.category === R.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === R.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
-    const p = u(
+    e.category === D.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === D.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
+    const w = u(
       d,
       c,
       g,
       a,
       h
     );
-    this.line.setAttribute("d", p.path);
-    let y = null;
-    this.sourceArrow && (y = this.arrowRenderer({
+    this.line.setAttribute("d", w.path);
+    let p = null;
+    this.sourceArrow && (p = this.arrowRenderer({
       direction: d,
-      shift: w,
+      shift: y,
       arrowLength: this.params.arrowLength
-    }), this.sourceArrow.setAttribute("d", y));
+    }), this.sourceArrow.setAttribute("d", p));
     let v = null;
     this.targetArrow && (v = this.arrowRenderer({
       direction: l,
       shift: g,
       arrowLength: this.params.arrowLength
     }), this.targetArrow.setAttribute("d", v)), this.afterRenderEmitter.emit({
-      edgePath: p,
-      sourceArrowPath: y,
+      edgePath: w,
+      sourceArrowPath: p,
       targetArrowPath: v
     });
   }
 }
 const vt = (r) => (e) => {
   const s = [
-    w,
+    y,
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => m(h, e.direction, w)
+    (h) => m(h, e.direction, y)
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
   })), o = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
   return `${o} ${n} ${a} Z`;
 }, At = (r) => (e) => {
-  const t = r.radius, s = e.arrowLength, o = (s * s + 2 * s * t) / (2 * t), n = o + t, a = s + t - t * (s + t) / n, h = t * o / n, c = [w, { x: a, y: -h }, { x: a, y: h }].map(
-    (y) => m(y, e.direction, w)
-  ).map((y) => ({
-    x: y.x + e.shift.x,
-    y: y.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${o} ${o} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${o} ${o} 0 0 0 ${c[0].x} ${c[0].y}`;
-  return `${g} ${l} ${u} ${p}`;
+  const t = r.radius, s = e.arrowLength, o = (s * s + 2 * s * t) / (2 * t), n = o + t, a = s + t - t * (s + t) / n, h = t * o / n, c = [y, { x: a, y: -h }, { x: a, y: h }].map(
+    (p) => m(p, e.direction, y)
+  ).map((p) => ({
+    x: p.x + e.shift.x,
+    y: p.y + e.shift.y
+  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${o} ${o} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${o} ${o} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${g} ${l} ${u} ${w}`;
 }, xt = (r) => (e) => {
   const t = r.smallRadius, s = r.radius, o = m(
     {
@@ -1341,8 +1341,8 @@ const vt = (r) => (e) => {
       x: e.arrowLength + r.smallRadius,
       y: 0
     }
-  ), a = [w, { x: o.x, y: -o.y }, o].map(
-    (l) => m(l, e.direction, w)
+  ), a = [y, { x: o.x, y: -o.y }, o].map(
+    (l) => m(l, e.direction, y)
   ).map((l) => ({
     x: l.x + e.shift.x,
     y: l.y + e.shift.y
@@ -1648,7 +1648,7 @@ class Pt {
 class Ve {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", De());
+    i(this, "group", Re());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1660,7 +1660,7 @@ class Ve {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = S(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Me(this.color), this.svg.appendChild(this.group), this.line = Re(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = S(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Me(this.color), this.svg.appendChild(this.group), this.line = De(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = Te(
@@ -1682,31 +1682,31 @@ class Ve {
     if (u === 0)
       this.sourceArrow !== null && (g = "", this.sourceArrow.setAttribute("d", g)), this.targetArrow !== null && (l = "", this.targetArrow.setAttribute("d", l));
     else {
-      const p = {
+      const w = {
         x: d.x / u,
         y: d.y / u
       };
       if (this.sourceArrow) {
-        const y = {
-          x: p.x * this.sourceOffset,
-          y: p.y * this.sourceOffset
+        const p = {
+          x: w.x * this.sourceOffset,
+          y: w.y * this.sourceOffset
         };
         g = this.arrowRenderer({
-          direction: p,
-          shift: y,
+          direction: w,
+          shift: p,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", g);
       }
       if (this.targetArrow) {
-        const y = {
-          x: p.x * this.targetOffset,
-          y: p.y * this.targetOffset
+        const p = {
+          x: w.x * this.targetOffset,
+          y: w.y * this.targetOffset
         };
         l = this.arrowRenderer({
-          direction: { x: -p.x, y: -p.y },
+          direction: { x: -w.x, y: -w.y },
           shift: {
-            x: d.x - y.x,
-            y: d.y - y.y
+            x: d.x - p.x,
+            y: d.y - p.y
           },
           arrowLength: this.arrowLength
         }), this.targetArrow.setAttribute("d", l);
@@ -2024,7 +2024,7 @@ const Mt = (r) => {
   setTimeout(() => {
     r();
   });
-}, Rt = (r) => {
+}, Dt = (r) => {
   queueMicrotask(() => {
     r();
   });
@@ -2054,7 +2054,7 @@ class $e {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const Dt = (r, e) => Symbol.iterator in r ? {
+const Rt = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
   contentOffset: e.focus.contentOffset
@@ -2097,7 +2097,7 @@ class We {
     this.viewportStore.patchViewportMatrix(g);
   }
   focus(e) {
-    const t = Dt(e ?? {}, this.params);
+    const t = Rt(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2118,9 +2118,9 @@ class We {
       const d = {
         x: (t + s) / 2,
         y: (o + n) / 2
-      }, c = (s - t) / 2, g = (n - o) / 2, { width: l, height: u } = this.viewportStore.getDimensions(), p = l / 2, y = u / 2, v = Math.max(
-        c / p,
-        g / y
+      }, c = (s - t) / 2, g = (n - o) / 2, { width: l, height: u } = this.viewportStore.getDimensions(), w = l / 2, p = u / 2, v = Math.max(
+        c / w,
+        g / p
       ), { scale: x } = this.viewportStore.getContentMatrix(), b = v > 1 ? x / v : x, P = Math.max(b, e.minContentScale);
       this.center(d, { contentScale: P });
     }
@@ -2181,7 +2181,7 @@ class H {
       }));
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!D(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -2213,7 +2213,7 @@ class H {
     });
     i(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!D(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -2367,7 +2367,7 @@ class ee {
       });
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!D(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -2388,7 +2388,7 @@ class ee {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!D(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -2522,7 +2522,7 @@ class Y {
       }), this.startRegisteredTransform());
     });
     i(this, "onWindowMouseMove", (e) => {
-      const t = D(
+      const t = R(
         this.window,
         this.element,
         e.clientX,
@@ -2562,7 +2562,7 @@ class Y {
     i(this, "onWindowTouchMove", (e) => {
       const t = B(e);
       if (!t.touches.every(
-        (o) => D(this.window, this.element, o[0], o[1])
+        (o) => R(this.window, this.element, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2844,10 +2844,10 @@ class se {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [p, y] = this.isTargetDragging ? [l, u] : [u, l];
-    this.overlayCanvas.addNode(O(p)), this.overlayCanvas.addNode(O(y)), this.overlayCanvas.addEdge({
-      from: p.overlayNodeId,
-      to: y.overlayNodeId,
+    const [w, p] = this.isTargetDragging ? [l, u] : [u, l];
+    this.overlayCanvas.addNode(O(w)), this.overlayCanvas.addNode(O(p)), this.overlayCanvas.addEdge({
+      from: w.overlayNodeId,
+      to: p.overlayNodeId,
       shape: this.params.edgeShapeFactory(N.EdgeId)
     });
   }
@@ -2927,10 +2927,10 @@ class oe {
     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(), p = this.canvas.viewport.createContentCoords({
+    }, u = this.overlayLayer.getBoundingClientRect(), w = this.canvas.viewport.createContentCoords({
       x: l.x - u.x,
       y: l.y - u.y
-    }), y = this.canvas.viewport.createContentCoords({
+    }), p = this.canvas.viewport.createContentCoords({
       x: t.x - u.x,
       y: t.y - u.y
     });
@@ -2943,11 +2943,11 @@ class oe {
     }, this.canvas.removeEdge(s);
     const v = {
       overlayNodeId: N.StaticNodeId,
-      portCoords: p,
+      portCoords: w,
       portDirection: c.direction
     }, x = {
       overlayNodeId: N.DraggingNodeId,
-      portCoords: y,
+      portCoords: p,
       portDirection: d.direction
     }, [b, P] = this.isTargetDragging ? [v, x] : [x, v];
     this.overlayCanvas.addNode(O(b)), this.overlayCanvas.addNode(O(P));
@@ -3124,9 +3124,9 @@ class Wt {
   }
 }
 const zt = (r) => {
-  var p, y, v, x, b, P;
-  const e = ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? (() => {
-  }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
+  var w, p, v, x, b, P;
+  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
+  }), t = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
   }), s = r.nodeDragVerifier ?? (() => !0), o = ((v = r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
   }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (x = r.mouse) == null ? void 0 : x.dragCursor, d = h !== void 0 ? h : "grab", c = (b = r.mouse) == null ? void 0 : b.mouseDownEventVerifier, g = c !== void 0 ? c : (C) => C.button === 0, l = (P = r.mouse) == null ? void 0 : P.mouseUpEventVerifier, u = l !== void 0 ? l : (C) => C.button === 0;
   return {
@@ -3198,8 +3198,8 @@ const zt = (r) => {
       });
   }
 }, Ae = (r) => {
-  var y, v, x, b, P, C, L, V, de, ce, le, ge;
-  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 p, v, x, b, P, C, L, V, de, ce, le, ge;
+  const e = (p = r == null ? void 0 : r.scale) == null ? void 0 : p.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let o;
   s !== void 0 ? Array.isArray(s) ? o = Yt(
     s.map(
@@ -3208,7 +3208,7 @@ const zt = (r) => {
   ) : o = ve(s) : o = (T) => T.nextTransform;
   const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
   }), h = ((b = r == null ? void 0 : r.events) == null ? void 0 : b.onTransformChange) ?? (() => {
-  }), d = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, g = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.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;
+  }), d = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, g = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.mouseUpEventVerifier, l = g !== void 0 ? g : (T) => T.button === 0, u = (L = r == null ? void 0 : r.scale) == null ? void 0 : L.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
@@ -3221,7 +3221,7 @@ const zt = (r) => {
     shiftCursor: n,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l,
-    mouseWheelEventVerifier: p,
+    mouseWheelEventVerifier: w,
     scaleWheelFinishTimeout: ((ce = r == null ? void 0 : r.scale) == null ? void 0 : ce.wheelFinishTimeout) ?? 500,
     onResizeTransformStarted: ((le = r == null ? void 0 : r.events) == null ? void 0 : le.onResizeTransformStarted) ?? (() => {
     }),
@@ -3335,8 +3335,8 @@ const zt = (r) => {
 }, Kt = (r, e) => {
   var c, g, l;
   const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, o = (u) => u.button === 0, n = (u) => {
-    const p = e.getPortAdjacentEdgeIds(u);
-    return p.length > 0 ? p[p.length - 1] : null;
+    const w = e.getPortAdjacentEdgeIds(u);
+    return w.length > 0 ? w[w.length - 1] : null;
   }, a = () => {
   }, h = () => {
   }, d = () => {
@@ -3402,8 +3402,8 @@ class ke {
       const s = this.graph.getEdge(t), o = this.graph.getPort(s.from), n = this.graph.getPort(s.to), a = this.currentCoords.get(o.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
         a,
         h
-      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, p = e.get(o.nodeId), y = e.get(n.nodeId);
-      p.x += l, p.y += u, y.x -= l, y.y -= u;
+      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(o.nodeId), p = e.get(n.nodeId);
+      w.x += l, w.y += u, p.x -= l, p.y -= u;
     });
   }
 }
@@ -3453,8 +3453,8 @@ class _t {
           targetCharge: this.nodeCharge,
           distance: l.d,
           maxForce: this.maxForce
-        }), p = u * l.ex, y = u * l.ey, v = t.get(a), x = t.get(d);
-        v.x -= p, v.y -= y, x.x += p, x.y += y;
+        }), w = u * l.ex, p = u * l.ey, v = t.get(a), x = t.get(d);
+        v.x -= w, v.y -= p, x.x += w, x.y += p;
       }
     }
   }
@@ -3532,8 +3532,8 @@ class tr {
     this.sortedParentNodes.push(e);
     const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = o / 2;
     e.nodeIds.forEach((u) => {
-      const { x: p, y } = this.coords.get(u);
-      p < t ? y < s ? d.add(u) : h.add(u) : y < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
+      const { x: w, y: p } = this.coords.get(u);
+      w < t ? p < s ? d.add(u) : h.add(u) : p < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
     });
     const g = {
       parent: e,
@@ -3817,16 +3817,16 @@ class Ge {
     this.rand = e.rand, this.sparsity = e.sparsity;
   }
   calculateCoordinates(e) {
-    const { graph: t, viewport: s } = e, o = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((y) => {
-      const v = t.getNode(y);
+    const { graph: t, viewport: s } = e, o = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((p) => {
+      const v = t.getNode(p);
       return v.x === null || v.y === null;
     }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = s.getDimensions(), c = { x: h / 2, y: d / 2 }, g = s.createContentCoords(c), l = a / 2, u = {
       x: g.x - l,
       y: g.y - l
     };
-    return t.getAllNodeIds().forEach((y) => {
-      const v = t.getNode(y);
-      o.set(y, {
+    return t.getAllNodeIds().forEach((p) => {
+      const v = t.getNode(p);
+      o.set(p, {
         x: v.x ?? u.x + a * this.rand(),
         y: v.y ?? u.y + a * this.rand()
       });
@@ -3923,52 +3923,71 @@ class or {
 }
 class ir {
   constructor(e) {
-    i(this, "baseRadius");
-    this.baseRadius = e.radius;
+    this.params = e;
   }
-  resolve(e) {
-    let t = 0, s = -1 / 0;
-    const o = [];
-    e.forEach((h) => {
-      h === null ? (t += this.baseRadius, o.push(t), t += this.baseRadius) : t + this.baseRadius - h < s ? (s += h, o.push(s), t = s + this.baseRadius, s += h) : (t += this.baseRadius, o.push(t), s = t + h, t += this.baseRadius);
+  generate(e) {
+    let t = 0;
+    const s = [], o = e.length - 1, n = [];
+    e.forEach((h, d) => {
+      if (t += this.params.spaceAroundRadius, h.forEach((c, g) => {
+        n[g] === void 0 ? n[g] = {
+          start: t + c.start,
+          end: t + c.end
+        } : n[g].end = t + c.end;
+      }), s.push(t), d !== o) {
+        const c = e[d + 1];
+        t += this.calculateMaxDiff(
+          // subtree,
+          // TODO: consider finer options
+          n.map((g) => ({
+            start: g.start - t,
+            end: g.end - t
+          })),
+          c
+        );
+      }
+      t += this.params.spaceAroundRadius;
     });
-    const n = t / 2;
-    let a = 0;
-    if (e.length > 0) {
-      const h = e[e.length - 1] ?? 0, d = o[o.length - 1];
-      a = Math.max(
-        a,
-        d + h - t
-      );
-      const c = e[0] ?? 0, g = o[0];
-      a = Math.max(a, c - g);
-    }
+    const a = t / 2;
     return {
-      offsets: o.map((h) => h - n),
-      radius: n + a
+      childOffsets: s.map((h) => h - a),
+      subtreeSpans: n.map((h) => ({
+        start: h.start - a,
+        end: h.end - a
+      }))
     };
   }
+  calculateMaxDiff(e, t) {
+    let s = 0;
+    const o = Math.min(e.length, t.length);
+    for (let n = 0; n < o; n++) {
+      const a = e[n].end - t[n].start;
+      s = Math.max(s, a);
+    }
+    return s - 2 * this.params.spaceAroundRadius;
+  }
 }
 class nr {
   constructor(e, t) {
     i(this, "offsets", /* @__PURE__ */ new Map());
-    i(this, "childrenRadii", /* @__PURE__ */ new Map());
-    i(this, "layerNodePlacementResolver");
-    this.tree = e, this.layerNodePlacementResolver = new ir({
-      radius: t.spaceAroundRadius
-    }), [...this.tree.sequence].reverse().forEach((s) => {
-      if (s.children.size === 0)
-        this.childrenRadii.set(s.nodeId, null);
-      else {
-        const o = Array.from(s.children).map(
-          (h) => this.childrenRadii.get(h.nodeId)
-        ), n = this.layerNodePlacementResolver.resolve(o);
-        this.childrenRadii.set(s.nodeId, n.radius);
-        let a = 0;
-        s.children.forEach((h) => {
-          this.offsets.set(h.nodeId, n.offsets[a]), a++;
-        });
-      }
+    i(this, "treeSpans", /* @__PURE__ */ new Map());
+    this.tree = e;
+    const s = t.spaceAroundRadius, o = new ir({
+      spaceAroundRadius: s
+    });
+    [...this.tree.sequence].reverse().forEach((n) => {
+      const a = Array.from(n.children).map(
+        (c) => this.treeSpans.get(c.nodeId)
+      ), h = o.generate(a);
+      let d = 0;
+      n.children.forEach((c) => {
+        this.offsets.set(c.nodeId, h.childOffsets[d]), d++;
+      }), this.treeSpans.set(n.nodeId, [
+        { start: -s, end: s },
+        ...h.subtreeSpans
+      ]), n.children.forEach((c) => {
+        this.treeSpans.delete(c.nodeId);
+      });
     }), this.offsets.set(this.tree.root.nodeId, 0);
   }
   generate() {
@@ -3992,17 +4011,16 @@ class ar {
         const g = [];
         n += this.params.layerWidth, c.forEach((l) => {
           l.children.forEach((u) => {
-            const p = t.get(l.nodeId).y;
+            const w = t.get(l.nodeId).y;
             t.set(u.nodeId, {
-              y: p + d.get(u.nodeId),
+              y: w + d.get(u.nodeId),
               x: n
             }), g.push(u);
           });
         }), c = g;
       }
-    }), t.forEach((a) => {
-      const h = this.params.transform(a);
-      a.x = h.x, a.y = h.y;
+    }), t.forEach((a, h) => {
+      t.set(h, this.params.transform(a));
     }), t;
   }
 }
@@ -4118,7 +4136,7 @@ const je = (r) => {
   schedule: Mt
 } : {
   type: "topologyChangeSchedule",
-  schedule: Rt
+  schedule: Dt
 }, F = Object.freeze({
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
@@ -4379,13 +4397,9 @@ class Nr {
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
     i(this, "boxRenderingTrigger", new K());
-    i(this, "graphStore");
-    i(this, "viewportStore");
-    i(this, "graph");
-    i(this, "viewport");
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
-    this.element = e, this.viewportStore = new it(this.element), this.viewport = new $e(this.viewportStore), this.graphStore = new be(), this.graph = new Ie(this.graphStore);
+    this.element = e;
   }
   setDefaults(e) {
     return this.canvasDefaults = e, this;
@@ -4421,110 +4435,110 @@ class Nr {
     if (this.used)
       throw new Jt("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Wt(this.element), t = this.createHtmlView(e.main), s = Er(
+    const e = new it(this.element), t = new be(), s = new Wt(this.element), o = this.createHtmlView(
+      s.main,
+      t,
+      e
+    ), n = Er(
       this.canvasDefaults
-    ), o = new Be(
-      this.graphStore,
+    ), a = new Be(
       t,
-      s
-    ), n = yr(this.layoutConfig), a = br({
+      o,
+      n
+    ), h = yr(this.layoutConfig), d = br({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
-      layoutParams: n
-    }), h = new We(
-      this.graphStore,
-      this.viewportStore,
-      a
-    ), d = new Se(
-      this.graph,
-      this.viewport,
-      o,
-      h
+      layoutParams: h
+    }), c = new We(
+      t,
+      e,
+      d
+    ), g = new $e(e), l = new Ie(t), u = new Se(
+      l,
+      g,
+      a,
+      c
     );
     if (this.hasBackground && re.configure(
-      d,
+      u,
       jt(this.backgroundConfig),
-      e.background
-    ), this.hasNodeResizeReactiveEdges && Q.configure(d), this.hasDraggableNodes) {
-      let g = zt(this.dragConfig);
-      this.hasAnimatedLayout && (g = fr(
-        g,
+      s.background
+    ), this.hasNodeResizeReactiveEdges && Q.configure(u), this.hasDraggableNodes) {
+      let p = zt(this.dragConfig);
+      this.hasAnimatedLayout && (p = fr(
+        p,
         this.animationStaticNodes
       )), ee.configure(
-        d,
-        e.main,
+        u,
+        s.main,
         this.window,
-        g
+        p
       );
     }
     if (this.hasUserConnectablePorts) {
-      const g = qt(
+      const p = qt(
         this.connectablePortsConfig,
-        s.edges.shapeFactory,
-        s.ports.direction
+        n.edges.shapeFactory,
+        n.ports.direction
       );
       se.configure(
-        d,
-        e.overlayConnectablePorts,
-        this.viewportStore,
+        u,
+        s.overlayConnectablePorts,
+        e,
         this.window,
-        g
+        p
       );
     }
     if (this.hasUserDraggableEdges) {
-      const g = Kt(
+      const p = Kt(
         this.draggableEdgesConfig,
-        d.graph
+        u.graph
       );
       oe.configure(
-        d,
-        e.overlayDraggableEdges,
-        this.viewportStore,
+        u,
+        s.overlayDraggableEdges,
+        e,
         this.window,
-        g
+        p
       );
     }
     if (this.virtualScrollConfig !== void 0 ? te.configure(
-      d,
-      e.main,
+      u,
+      s.main,
       this.window,
       Ae(this.transformConfig),
       this.boxRenderingTrigger,
       Qt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && Y.configure(
-      d,
-      e.main,
+      u,
+      s.main,
       this.window,
       Ae(this.transformConfig)
-    ), this.hasLayout && $t.configure(d, n), this.hasAnimatedLayout) {
-      let g = cr(
+    ), this.hasLayout && $t.configure(u, h), this.hasAnimatedLayout) {
+      let p = cr(
         this.animatedLayoutConfig
       );
       this.hasDraggableNodes && (mr(
-        d,
+        u,
         this.animationStaticNodes
-      ), g = vr(
-        g,
+      ), p = vr(
+        p,
         this.animationStaticNodes
-      )), ae.configure(d, g, this.window);
+      )), ae.configure(u, p, this.window);
     }
-    const c = () => {
-      e.destroy(), d.onBeforeDestroy.unsubscribe(c);
+    const w = () => {
+      s.destroy(), u.onBeforeDestroy.unsubscribe(w);
     };
-    return d.onBeforeDestroy.subscribe(c), d;
+    return u.onBeforeDestroy.subscribe(w), u;
   }
-  createHtmlView(e) {
-    let t = new Ee(
-      this.graphStore,
-      this.viewportStore,
-      e
-    );
-    return this.virtualScrollConfig !== void 0 && (t = new rt(
+  createHtmlView(e, t, s) {
+    let o = new Ee(t, s, e);
+    return this.virtualScrollConfig !== void 0 && (o = new rt(
+      o,
       t,
-      this.graphStore,
       this.boxRenderingTrigger,
       Zt(this.virtualScrollConfig)
-    )), t = new st(t, this.graphStore), t;
+    )), o = new st(o, t), o;
   }
 }
 export {
@@ -4532,7 +4546,7 @@ export {
   Nr as CanvasBuilder,
   Jt as CanvasBuilderError,
   E as CanvasError,
-  R as ConnectionCategory,
+  D as ConnectionCategory,
   Ve as DirectEdgeShape,
   K as EventSubject,
   St as HorizontalEdgeShape,