@html-graph/html-graph 8.6.0 → 8.7.0

package/dist/html-graph.js

@@ -10,6 +10,8 @@ const Ze = () => {
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
 }, _e = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
+}, et = (r) => {
+  r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
 class Ee {
   constructor(e, t, s) {
@@ -29,7 +31,7 @@ class Ee {
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
-    this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    et(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -47,7 +49,7 @@ class Ee {
     });
   }
   destroy() {
-    this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
+    this.clear(), this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
     const t = this.graphStore.getNode(e), { width: s, height: o } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(s, o), d = a.x - n * h.x, c = a.y - n * h.y;
@@ -91,7 +93,7 @@ class Ee {
     };
   }
 }
-class et {
+class tt {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -111,7 +113,7 @@ class et {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class tt {
+class rt {
   constructor(e, t, s, o) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -135,7 +137,7 @@ class tt {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new et(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new tt(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -189,7 +191,7 @@ class tt {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class rt {
+class st {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -316,7 +318,7 @@ class Se {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class st {
+class ot {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -371,7 +373,7 @@ class be {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new st());
+    i(this, "elementPorts", new ot());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
     i(this, "afterNodeUpdatedEmitter");
@@ -637,7 +639,7 @@ const ue = (r) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class ot {
+class it {
   constructor(e) {
     i(this, "viewportMatrix", pe);
     i(this, "contentMatrix", pe);
@@ -698,15 +700,18 @@ class Q {
       const t = this.canvas.graph.getNode(e);
       this.elementToNodeId.delete(t.element), this.nodesResizeObserver.unobserve(t.element);
     });
-    i(this, "onBeforeClear", () => {
+    i(this, "reset", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
+    i(this, "revert", () => {
+      this.reset();
+    });
     this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
       t.forEach((s) => {
         const o = s.target;
         this.handleNodeResize(o);
       });
-    }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
+    }), 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);
@@ -716,10 +721,10 @@ class Q {
     this.canvas.updateNode(t);
   }
 }
-const it = (r, e, t) => {
+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;
-}, nt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => it(e, t, s) && nt(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");
@@ -736,7 +741,7 @@ const it = (r, e, t) => {
       }
     ]
   };
-}, at = (r, e) => {
+}, ht = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const s = r.findPortIdsByElement(t)[0] ?? null;
@@ -769,7 +774,7 @@ function* Pe(r, e) {
 const Ce = (r, e) => {
   const t = Pe(document, e);
   for (const s of t) {
-    const o = at(r, s);
+    const o = ht(r, s);
     if (o.status === "portFound")
       return o.portId;
     if (o.status === "nodeEncountered")
@@ -781,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) => ({
@@ -807,7 +812,7 @@ const Ne = (r, e) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class ht {
+class dt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -815,9 +820,9 @@ class ht {
     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,
@@ -828,20 +833,20 @@ class ht {
     }, 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}`;
   }
 }
-class dt {
+class ct {
   constructor(e) {
     i(this, "path");
     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
@@ -849,9 +854,9 @@ class dt {
       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
@@ -862,10 +867,10 @@ class dt {
     ), u = {
       x: l.x + h,
       y: l.y + d
-    }, p = {
+    }, w = {
       x: (g.x + u.x) / 2,
       y: (g.y + u.y) / 2
-    }, f = {
+    }, p = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
@@ -881,10 +886,10 @@ class dt {
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${f.x} ${f.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({
@@ -910,20 +915,20 @@ 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, f = 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((f ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = f ? { x: h.x + o * x, y: h.y + n * x } : h, C = l !== 0 ? Math.min((f ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, L = f ? { x: h.x + c * C, y: h.y + g * C } : h;
-      d > 0 && t.push(`L ${L.x} ${L.y}`), f && 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}`
       );
     });
   }
   return t.join(" ");
 };
-class ct {
+class lt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -931,10 +936,10 @@ class ct {
     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
@@ -942,9 +947,9 @@ class ct {
       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,
@@ -952,26 +957,26 @@ class ct {
     ), 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
-    }, f = { x: p.x, y: g };
+    }, p = { x: w.x, y: g };
     this.path = M(
-      [s, h, l, u, f, p, d, o],
+      [s, h, l, u, p, w, d, o],
       this.params.roundness
     );
   }
 }
-class lt {
+class gt {
   constructor(e) {
     i(this, "path");
     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
@@ -979,21 +984,21 @@ class lt {
       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
     );
   }
 }
-class gt {
+class ut {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1001,10 +1006,10 @@ class gt {
     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
@@ -1012,9 +1017,9 @@ class gt {
       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,
@@ -1023,7 +1028,7 @@ class gt {
     this.path = M([s, a, h, o], this.params.roundness);
   }
 }
-class ut {
+class pt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1031,10 +1036,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
@@ -1042,9 +1047,9 @@ class ut {
       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,
@@ -1052,12 +1057,12 @@ class ut {
     ), 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
-    }, f = { x: g, y: p.y };
+    }, p = { x: g, y: w.y };
     this.path = M(
-      [s, h, l, u, f, p, d, o],
+      [s, h, l, u, p, w, d, o],
       this.params.roundness
     );
   }
@@ -1068,42 +1073,42 @@ 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 };
   }
 }
-class pt {
+class wt {
   constructor(e) {
     i(this, "path");
     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(
-      (f) => m(f, 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 wt {
+class yt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1122,7 +1127,7 @@ class wt {
       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,
@@ -1145,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
@@ -1156,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,
@@ -1180,16 +1185,16 @@ class ft {
     );
   }
 }
-class yt {
+class mt {
   constructor(e) {
     i(this, "path");
     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
@@ -1197,9 +1202,9 @@ class yt {
       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,
@@ -1221,7 +1226,7 @@ class yt {
     );
   }
 }
-const y = Object.freeze({
+const f = Object.freeze({
   color: "#777777",
   width: 1,
   arrowLength: 20,
@@ -1243,7 +1248,7 @@ const y = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), fe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+}), ye = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
 class k {
   constructor(e) {
     i(this, "svg");
@@ -1262,11 +1267,11 @@ class k {
       e.to
     );
     Le(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = fe(
+    const d = ye(
       e.from.direction,
       a,
       h
-    ), c = fe(
+    ), c = ye(
       e.to.direction,
       a,
       h
@@ -1276,53 +1281,53 @@ class k {
     };
     let l = { x: -c.x, y: -c.y }, u;
     e.category === D.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === D.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
-    const p = u(
+    const w = u(
       d,
       c,
       g,
       a,
       h
     );
-    this.line.setAttribute("d", p.path);
-    let f = null;
-    this.sourceArrow && (f = 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", f));
+    }), 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: f,
+      edgePath: w,
+      sourceArrowPath: p,
       targetArrowPath: v
     });
   }
 }
-const mt = (r) => (e) => {
+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`;
-}, vt = (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(
-    (f) => m(f, e.direction, w)
-  ).map((f) => ({
-    x: f.x + e.shift.x,
-    y: f.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${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}`;
 }, 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 = [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(
     {
       x: e.arrowLength,
@@ -1336,8 +1341,8 @@ const mt = (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
@@ -1348,22 +1353,22 @@ const mt = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return mt({
-        radius: r.radius ?? y.polygonArrowRadius
+      return vt({
+        radius: r.radius ?? f.polygonArrowRadius
       });
     case "arc":
-      return vt({
-        radius: r.radius ?? y.circleArrowRadius
+      return At({
+        radius: r.radius ?? f.circleArrowRadius
       });
     default:
-      return At({
-        smallRadius: r.smallRadius ?? y.wedgeArrowSmallRadius,
-        angle: r.angle ?? y.wedgeArrowAngle,
-        radius: r.radius ?? y.wedgeArrowRadius
+      return xt({
+        smallRadius: r.smallRadius ?? f.wedgeArrowSmallRadius,
+        angle: r.angle ?? f.wedgeArrowAngle,
+        radius: r.radius ?? f.wedgeArrowRadius
       });
   }
 };
-class xt {
+class Et {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1380,7 +1385,7 @@ class xt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new pt({
+    i(this, "createCyclePath", (e) => new wt({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1388,7 +1393,7 @@ class xt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new dt({
+    i(this, "createDetourPath", (e, t, s, o, n) => new ct({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1401,7 +1406,7 @@ class xt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s) => new ht({
+    i(this, "createLinePath", (e, t, s) => new dt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1410,9 +1415,9 @@ class xt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? y.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? y.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? y.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? y.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
-      color: (e == null ? void 0 : e.color) ?? y.color,
-      width: (e == null ? void 0 : e.width) ?? y.width,
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? f.color,
+      width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
@@ -1426,7 +1431,7 @@ class xt {
     this.pathShape.render(e);
   }
 }
-class Et {
+class St {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1464,7 +1469,7 @@ class Et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s, o) => new ct({
+    i(this, "createLinePath", (e, t, s, o) => new lt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1475,15 +1480,15 @@ class Et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? f.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? f.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? f.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
-      color: (e == null ? void 0 : e.color) ?? y.color,
-      width: (e == null ? void 0 : e.width) ?? y.width,
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? f.color,
+      width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
@@ -1497,7 +1502,7 @@ class Et {
     this.pathShape.render(e);
   }
 }
-class St {
+class bt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1523,7 +1528,7 @@ class St {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new lt({
+    i(this, "createDetourPath", (e, t, s, o, n) => new gt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1537,7 +1542,7 @@ class St {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s) => new gt({
+    i(this, "createLinePath", (e, t, s) => new ut({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1547,15 +1552,15 @@ class St {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? f.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? f.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? f.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? y.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
-      color: (e == null ? void 0 : e.color) ?? y.color,
-      width: (e == null ? void 0 : e.width) ?? y.width,
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? f.color,
+      width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
@@ -1569,7 +1574,7 @@ class St {
     this.pathShape.render(e);
   }
 }
-class bt {
+class Pt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1594,7 +1599,7 @@ class bt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, s, o, n) => new yt({
+    i(this, "createDetourPath", (e, t, s, o, n) => new mt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1607,7 +1612,7 @@ class bt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, s, o, n) => new ut({
+    i(this, "createLinePath", (e, t, s, o, n) => new pt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1618,15 +1623,15 @@ class bt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? f.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? f.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? f.roundness;
     this.roundness = Math.min(
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
-      color: (e == null ? void 0 : e.color) ?? y.color,
-      width: (e == null ? void 0 : e.width) ?? y.width,
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+      color: (e == null ? void 0 : e.color) ?? f.color,
+      width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
@@ -1655,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) ?? y.color, this.width = (e == null ? void 0 : e.width) ?? y.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? y.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? y.preOffset, this.svg = 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));
+    [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(
@@ -1663,7 +1668,7 @@ class Ve {
       e.to
     );
     Le(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: o, y: n }, c = new wt({
+    const d = { x: o, y: n }, c = new yt({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1677,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 f = {
-          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: f,
+          direction: w,
+          shift: p,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", g);
       }
       if (this.targetArrow) {
-        const f = {
-          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 - f.x,
-            y: d.y - f.y
+            x: d.x - p.x,
+            y: d.y - p.y
           },
           arrowLength: this.arrowLength
         }), this.targetArrow.setAttribute("d", l);
@@ -1714,17 +1719,17 @@ class Ve {
     });
   }
 }
-const Pt = () => {
+const Ct = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, Ct = (r) => {
+}, Nt = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, ye = (r) => {
+}, fe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class Nt extends Error {
+class Tt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
@@ -1736,18 +1741,18 @@ class Fe {
     i(this, "line");
     i(this, "sourceArrow");
     i(this, "targetArrow");
-    i(this, "handle", Pt());
+    i(this, "handle", Ct());
     i(this, "onAfterRender");
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
     if (this.baseEdge = e, e instanceof Fe)
-      throw new Nt(
+      throw new Tt(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-    const s = (t == null ? void 0 : t.distance) ?? y.interactiveWidth;
-    this.interactiveLine = Ct(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ye(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ye(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
+    const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
+    this.interactiveLine = Nt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = fe(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = fe(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
       this.interactiveLine.setAttribute("d", o.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", o.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", o.targetArrowPath);
     });
   }
@@ -1755,7 +1760,7 @@ class Fe {
     this.baseEdge.render(e);
   }
 }
-class Pr {
+class Cr {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -2006,7 +2011,7 @@ class Be {
     this.graphStore.clear();
   }
   destroy() {
-    this.clear(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
+    this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
       this.onAfterEdgeShapeUpdated
@@ -2015,11 +2020,11 @@ class Be {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const Tt = (r) => {
+const Mt = (r) => {
   setTimeout(() => {
     r();
   });
-}, Mt = (r) => {
+}, Dt = (r) => {
   queueMicrotask(() => {
     r();
   });
@@ -2049,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
@@ -2092,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);
     });
@@ -2113,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, f = u / 2, v = Math.max(
-        c / p,
-        g / f
+      }, 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 });
     }
@@ -2223,16 +2228,16 @@ class H {
       const t = e.changedTouches[0];
       this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
     });
-    i(this, "onBeforeClear", () => {
+    i(this, "reset", () => {
       this.canvas.graph.getAllPortIds().forEach((e) => {
         const t = this.canvas.graph.getPort(e);
         this.unhookPortEvents(t.element);
       });
     });
-    i(this, "onBeforeDestroy", () => {
-      this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
+    i(this, "revert", () => {
+      this.params.onStopDrag(), this.reset(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = o, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = t, this.window = s, this.params = o, 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, s, o) {
     new H(e, t, s, o);
@@ -2260,7 +2265,7 @@ class H {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Rt {
+class Lt {
   constructor(e, t, s) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = s;
   }
@@ -2274,7 +2279,7 @@ class Rt {
     }), this.params.onAfterApplied();
   }
 }
-class Lt {
+class Vt {
   constructor(e, t, s) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = s;
   }
@@ -2310,15 +2315,6 @@ class ee {
       const { element: t } = this.graph.getNode(e);
       t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
     });
-    i(this, "onBeforeDestroy", () => {
-      this.removeMouseDragListeners(), this.removeTouchDragListeners();
-    });
-    i(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllNodeIds().forEach((e) => {
-        const { element: t } = this.canvas.graph.getNode(e);
-        t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
-      }), this.maxNodePriority = 0;
-    });
     i(this, "onMouseDown", (e) => {
       const t = e;
       if (!this.params.mouseDownEventVerifier(t))
@@ -2409,7 +2405,16 @@ class ee {
     i(this, "onWindowTouchFinish", () => {
       this.cancelTouchDrag();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = o, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    i(this, "reset", () => {
+      this.canvas.graph.getAllNodeIds().forEach((e) => {
+        const { element: t } = this.canvas.graph.getNode(e);
+        t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
+      }), this.maxNodePriority = 0;
+    });
+    i(this, "revert", () => {
+      this.reset(), this.removeMouseDragListeners(), this.removeTouchDragListeners();
+    });
+    this.canvas = e, this.element = t, this.window = s, this.params = o, 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, s, o) {
     new ee(e, t, s, o);
@@ -2506,7 +2511,7 @@ class Y {
     i(this, "prevTouches", null);
     i(this, "wheelFinishTimer", null);
     i(this, "transformInProgress", !1);
-    i(this, "onBeforeDestroy", () => {
+    i(this, "revert", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     i(this, "onMouseDown", (e) => {
@@ -2587,7 +2592,7 @@ class Y {
       passive: !0
     }), this.element.addEventListener("touchstart", this.onTouchStart, {
       passive: !0
-    }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    }), e.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, s, o) {
     new Y(e, t, s, o);
@@ -2726,13 +2731,13 @@ class te {
     });
   }
 }
-const Vt = () => {
+const Ft = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Ft = () => {
+}, It = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, It = () => {
+}, Bt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2741,9 +2746,9 @@ const Vt = () => {
 };
 class re {
   constructor(e, t, s) {
-    i(this, "svg", Vt());
-    i(this, "patternRenderingRectangle", Ft());
-    i(this, "pattern", It());
+    i(this, "svg", Ft());
+    i(this, "patternRenderingRectangle", It());
+    i(this, "pattern", Bt());
     i(this, "patternContent");
     i(this, "tileWidth");
     i(this, "tileHeight");
@@ -2839,10 +2844,10 @@ class se {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [p, f] = this.isTargetDragging ? [l, u] : [u, l];
-    this.overlayCanvas.addNode(O(p)), this.overlayCanvas.addNode(O(f)), this.overlayCanvas.addEdge({
-      from: p.overlayNodeId,
-      to: f.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)
     });
   }
@@ -2922,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
-    }), f = this.canvas.viewport.createContentCoords({
+    }), p = this.canvas.viewport.createContentCoords({
       x: t.x - u.x,
       y: t.y - u.y
     });
@@ -2938,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: f,
+      portCoords: p,
       portDirection: d.direction
     }, [b, P] = this.isTargetDragging ? [v, x] : [x, v];
     this.overlayCanvas.addNode(O(b)), this.overlayCanvas.addNode(O(P));
@@ -3038,9 +3043,9 @@ class ne {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class Bt {
+class $t {
   static configure(e, t) {
-    const s = t.applyOn, o = new Rt(e, t.algorithm, {
+    const s = t.applyOn, o = new Lt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
@@ -3064,7 +3069,7 @@ class Bt {
     }
   }
 }
-class $t {
+class Ut {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3085,17 +3090,17 @@ class ae {
     i(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = s, this.applier = new Lt(e, t.algorithm, {
+    this.win = s, this.applier = new Vt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new $t(this.win, this.step);
+    }), new Ut(this.win, this.step);
   }
   static configure(e, t, s) {
     new ae(e, t, s);
   }
 }
-const Ut = () => {
+const Ot = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, j = () => {
@@ -3105,23 +3110,23 @@ const Ut = () => {
   const r = j();
   return r.style.pointerEvents = "none", r;
 };
-class Ot {
+class Wt {
   constructor(e) {
     i(this, "background", j());
     i(this, "main", j());
     i(this, "overlayConnectablePorts", me());
     i(this, "overlayDraggableEdges", me());
-    i(this, "host", Ut());
+    i(this, "host", Ot());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const Wt = (r) => {
-  var p, f, v, x, b, P;
-  const e = ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? (() => {
-  }), t = ((f = r.events) == null ? void 0 : f.onNodeDrag) ?? (() => {
+const zt = (r) => {
+  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 {
@@ -3136,7 +3141,7 @@ const Wt = (r) => {
     nodeDragVerifier: s,
     onNodeDragFinished: o
   };
-}, zt = (r) => {
+}, kt = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, o = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
@@ -3146,7 +3151,7 @@ const Wt = (r) => {
     const g = n.canvasHeight * n.prevTransform.scale, l = o - g;
     return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, kt = (r) => {
+}, Ht = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, o = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -3167,7 +3172,7 @@ const Wt = (r) => {
       y: g
     };
   };
-}, Ht = (r) => (e) => r.reduce(
+}, Yt = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3180,12 +3185,12 @@ const Wt = (r) => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return kt({
+      return Ht({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return zt({
+      return kt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
@@ -3193,17 +3198,17 @@ const Wt = (r) => {
       });
   }
 }, Ae = (r) => {
-  var f, v, x, b, P, C, L, V, de, ce, le, ge;
-  const e = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  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 = Ht(
+  s !== void 0 ? Array.isArray(s) ? o = Yt(
     s.map(
       (T) => ve(T)
     )
   ) : 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) ?? (() => {
@@ -3216,24 +3221,24 @@ const Wt = (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) ?? (() => {
     }),
     onResizeTransformFinished: ((ge = r == null ? void 0 : r.events) == null ? void 0 : ge.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Yt = (r, e) => {
+}, Xt = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, Xt = (r) => r instanceof SVGElement ? r : Yt(
+}, Gt = (r) => r instanceof SVGElement ? r : Xt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), Gt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = Xt(r.renderer ?? {});
+), jt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = Gt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
@@ -3245,7 +3250,7 @@ const Wt = (r) => {
     return r;
   switch (r.type) {
     case "straight":
-      return () => new St({
+      return () => new bt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3259,7 +3264,7 @@ const Wt = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Et({
+      return () => new St({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3272,7 +3277,7 @@ const Wt = (r) => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new bt({
+      return () => new Pt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3296,7 +3301,7 @@ const Wt = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new xt({
+      return () => new Et({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3310,7 +3315,7 @@ const Wt = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, jt = (r, e, t) => {
+}, qt = (r, e, t) => {
   var c, g, l;
   const s = () => "direct", o = (u) => u, n = (u) => u.button === 0, a = () => {
   }, h = () => {
@@ -3327,11 +3332,11 @@ const Wt = (r) => {
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? he(r.edgeShape) : e
   };
-}, qt = (r, e) => {
+}, 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 = () => {
@@ -3346,10 +3351,10 @@ const Wt = (r) => {
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
   };
-}, Kt = (r) => ({
+}, Qt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Qt = (r) => {
+}), Zt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3358,7 +3363,7 @@ const Wt = (r) => {
     })
   };
 };
-class Zt extends Error {
+class Jt extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasBuilderError");
@@ -3397,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), f = e.get(n.nodeId);
-      p.x += l, p.y += u, f.x -= l, f.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;
     });
   }
 }
@@ -3427,7 +3432,7 @@ const Ye = (r) => {
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
   return Math.min(e, r.maxForce);
 };
-class Jt {
+class _t {
   constructor(e) {
     i(this, "nodeCharge");
     i(this, "distanceVectorGenerator");
@@ -3448,13 +3453,13 @@ class Jt {
           targetCharge: this.nodeCharge,
           distance: l.d,
           maxForce: this.maxForce
-        }), p = u * l.ex, f = u * l.ey, v = t.get(a), x = t.get(d);
-        v.x -= p, v.y -= f, x.x += p, x.y += f;
+        }), 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;
       }
     }
   }
 }
-const _t = (r) => {
+const er = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -3472,7 +3477,7 @@ const _t = (r) => {
     radius: h / 2
   };
 };
-class er {
+class tr {
   constructor(e) {
     i(this, "root");
     i(this, "leaves", /* @__PURE__ */ new Map());
@@ -3527,8 +3532,8 @@ class er {
     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: f } = this.coords.get(u);
-      p < t ? f < s ? d.add(u) : h.add(u) : f < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
+      const { 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,
@@ -3629,7 +3634,7 @@ class er {
     }), { x: t / e.size, y: s / e.size };
   }
 }
-class tr {
+class rr {
   constructor(e) {
     i(this, "areaRadiusThreshold");
     i(this, "nodeMass");
@@ -3641,7 +3646,7 @@ class tr {
     this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
   }
   apply(e, t) {
-    const s = _t(e), o = new er({
+    const s = er(e), o = new tr({
       box: s,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -3791,7 +3796,7 @@ class tr {
     }
   }
 }
-const Xe = (r) => r.theta !== 0 ? new tr({
+const Xe = (r) => r.theta !== 0 ? new rr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3799,7 +3804,7 @@ const Xe = (r) => r.theta !== 0 ? new tr({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new Jt({
+}) : new _t({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3812,23 +3817,23 @@ 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((f) => {
-      const v = t.getNode(f);
+    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((f) => {
-      const v = t.getNode(f);
-      o.set(f, {
+    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()
       });
     }), o;
   }
 }
-class rr {
+class sr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -3873,7 +3878,7 @@ class rr {
     return o;
   }
 }
-class sr {
+class or {
   constructor(e) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
@@ -3916,70 +3921,80 @@ class sr {
     }
   }
 }
-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), t += this.params.spaceAroundRadius, d !== o) {
+        const c = e[d + 1];
+        t += this.calculateMaxDiff(h, c);
+      }
     });
-    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 ir {
+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 or({
-      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() {
     return this.offsets;
   }
 }
-class nr {
+class ar {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), o = new sr(e.graph).generate();
+    const t = /* @__PURE__ */ new Map(), o = new or(e.graph).generate();
     let n = 0;
     return o.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
-      const d = new ir(a, {
+      const d = new nr(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
       let c = [a.root];
@@ -3987,21 +4002,20 @@ class nr {
         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;
   }
 }
-class ar {
+class hr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4069,14 +4083,14 @@ const je = (r) => {
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), hr = (r) => {
+}), dr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
       const s = je((r == null ? void 0 : r.seed) ?? A.seed), o = qe(s[0], s[1], s[2], s[3]);
-      return new ar({
+      return new hr({
         rand: o,
         maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? A.maxTimeDeltaSec,
         nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? A.nodeCharge,
@@ -4097,23 +4111,23 @@ const je = (r) => {
   },
   onAfterApplied: () => {
   }
-}, dr = (r) => {
+}, cr = (r) => {
   var t, s;
   return {
-    algorithm: hr((r == null ? void 0 : r.algorithm) ?? {}),
+    algorithm: dr((r == null ? void 0 : r.algorithm) ?? {}),
     staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? G.staticNodeResolver,
     onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? G.onBeforeApplied,
     onAfterApplied: ((s = r == null ? void 0 : r.events) == null ? void 0 : s.onAfterApplied) ?? G.onAfterApplied
   };
-}, cr = (r) => r instanceof K ? {
+}, lr = (r) => r instanceof K ? {
   type: "trigger",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Tt
+  schedule: Mt
 } : {
   type: "topologyChangeSchedule",
-  schedule: Mt
+  schedule: Dt
 }, F = Object.freeze({
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
@@ -4131,7 +4145,7 @@ const je = (r) => {
   d: r.d * e.a + r.e * e.d,
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
-}), lr = (r) => {
+}), gr = (r) => {
   const { a: e, b: t, c: s, d: o, e: n, f: a } = r, h = e * n - t * o;
   return {
     a: n / h,
@@ -4142,7 +4156,7 @@ const je = (r) => {
     f: (s * o - e * a) / h
   };
 };
-class gr {
+class ur {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4186,7 +4200,7 @@ class gr {
     const s = $(
       t,
       e
-    ), o = lr(t);
+    ), o = gr(t);
     return $(s, o);
   }
   createShiftBaseMatrix(e) {
@@ -4231,7 +4245,7 @@ class gr {
     };
   }
 }
-const ur = (r) => {
+const pr = (r) => {
   if (r === void 0)
     return (o) => o;
   if (typeof r == "function")
@@ -4245,7 +4259,7 @@ const ur = (r) => {
     e: 1,
     f: 0
   };
-  const s = new gr();
+  const s = new ur();
   return e.forEach((o) => {
     const n = s.resolve(o);
     t = $(t, n);
@@ -4256,20 +4270,20 @@ const ur = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, pr = (r) => {
+}, wr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
-      return new nr({
+      return new ar({
         layerWidth: r.layerWidth ?? F.hierarchicalLayout.layerWidth,
         layerSpace: r.layerSpace ?? F.hierarchicalLayout.layerSpace,
-        transform: ur(r.transform)
+        transform: pr(r.transform)
       });
     default: {
       const s = je((r == null ? void 0 : r.seed) ?? A.seed), o = qe(s[0], s[1], s[2], s[3]);
-      return new rr({
+      return new sr({
         dtSec: (r == null ? void 0 : r.dtSec) ?? A.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? A.maxIterations,
         rand: o,
@@ -4285,11 +4299,11 @@ const ur = (r) => {
       });
     }
   }
-}, wr = (r) => {
+}, yr = (r) => {
   var e, t;
   return {
-    algorithm: pr(r.algorithm),
-    applyOn: cr(r.applyOn),
+    algorithm: wr(r.algorithm),
+    applyOn: lr(r.applyOn),
     staticNodeResolver: r.staticNodeResolver ?? F.staticNodeResolver,
     onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? F.onBeforeApplied,
     onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? F.onAfterApplied
@@ -4302,28 +4316,30 @@ const ur = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), yr = (r, e) => {
-  r.onBeforeNodeRemoved.subscribe((t) => {
+}), mr = (r, e) => {
+  r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
-  }), r.onBeforeClear.subscribe(() => {
+  }), r.graph.onBeforeClear.subscribe(() => {
+    e.clear();
+  }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, mr = (r, e) => ({
+}, vr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), q = (r) => () => r, xe = q(0), vr = () => {
+}), q = (r) => () => r, xe = q(0), Ar = () => {
   let r = 0;
   return () => r++;
-}, Ar = (r, e) => {
+}, xr = (r, e) => {
   let t = xe, s = xe;
-  const o = vr();
+  const o = Ar();
   return r === "incremental" && (t = o), e === "incremental" && (s = o), typeof r == "number" && (t = q(r)), typeof e == "number" && (s = q(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
-}, xr = (r) => {
+}, Er = (r) => {
   var t, s, o, n, a;
-  const e = Ar(
+  const e = xr(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
@@ -4340,9 +4356,9 @@ const ur = (r) => {
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Er = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : _, Sr = (r) => {
+}, Sr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : _, br = (r) => {
   var s, o;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Er(r.layoutParams) : _;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? Sr(r.layoutParams) : _;
   return {
     focus: {
       contentOffset: ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4351,7 +4367,7 @@ const ur = (r) => {
     }
   };
 };
-class Cr {
+class Nr {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4372,13 +4388,9 @@ class Cr {
     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 ot(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;
@@ -4412,126 +4424,126 @@ class Cr {
   }
   build() {
     if (this.used)
-      throw new Zt("CanvasBuilder is a single use object");
+      throw new Jt("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Ot(this.element), t = this.createHtmlView(e.main), s = xr(
+    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 = wr(this.layoutConfig), a = Sr({
+      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,
-      Gt(this.backgroundConfig),
-      e.background
-    ), this.hasNodeResizeReactiveEdges && Q.configure(d), this.hasDraggableNodes) {
-      let g = Wt(this.dragConfig);
-      this.hasAnimatedLayout && (g = fr(
-        g,
+      u,
+      jt(this.backgroundConfig),
+      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 = jt(
+      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 = qt(
+      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,
-      Kt(this.virtualScrollConfig)
+      Qt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && Y.configure(
-      d,
-      e.main,
+      u,
+      s.main,
       this.window,
       Ae(this.transformConfig)
-    ), this.hasLayout && Bt.configure(d, n), this.hasAnimatedLayout) {
-      let g = dr(
+    ), this.hasLayout && $t.configure(u, h), this.hasAnimatedLayout) {
+      let p = cr(
         this.animatedLayoutConfig
       );
-      this.hasDraggableNodes && (yr(
-        d.graph,
+      this.hasDraggableNodes && (mr(
+        u,
         this.animationStaticNodes
-      ), g = mr(
-        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 tt(
+  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,
-      Qt(this.virtualScrollConfig)
-    )), t = new rt(t, this.graphStore), t;
+      Zt(this.virtualScrollConfig)
+    )), o = new st(o, t), o;
   }
 }
 export {
-  xt as BezierEdgeShape,
-  Cr as CanvasBuilder,
-  Zt as CanvasBuilderError,
+  Et as BezierEdgeShape,
+  Nr as CanvasBuilder,
+  Jt as CanvasBuilderError,
   E as CanvasError,
   D as ConnectionCategory,
   Ve as DirectEdgeShape,
   K as EventSubject,
-  Et as HorizontalEdgeShape,
-  Nt as InteractiveEdgeError,
+  St as HorizontalEdgeShape,
+  Tt as InteractiveEdgeError,
   Fe as InteractiveEdgeShape,
-  Pr as MidpointEdgeShape,
-  St as StraightEdgeShape,
-  bt as VerticalEdgeShape
+  Cr as MidpointEdgeShape,
+  bt as StraightEdgeShape,
+  Pt as VerticalEdgeShape
 };