@html-graph/html-graph 7.4.0 → 7.5.0

package/dist/html-graph.js

@@ -1,6 +1,6 @@
-var ke = Object.defineProperty;
-var ze = (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) => ze(r, typeof e != "symbol" ? e + "" : e, t);
+var ze = Object.defineProperty;
+var ke = (r, e, t) => e in r ? ze(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => ke(r, typeof e != "symbol" ? e + "" : e, t);
 const C = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
@@ -198,7 +198,7 @@ class je {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class Ke {
+class qe {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -507,10 +507,10 @@ class ve {
       this.onAfterEdgeShapeUpdated
     ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
+    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.viewportStore.destroy(), this.destroyed = !0);
   }
 }
-class Qe {
+class Ke {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -550,7 +550,7 @@ class Qe {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class xe {
+class Ae {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -559,7 +559,7 @@ class xe {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new Qe());
+    i(this, "elementPorts", new Ke());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
     i(this, "afterNodeUpdatedEmitter");
@@ -766,13 +766,20 @@ const ce = (r) => ({
   x: 0,
   y: 0
 };
-class Ze {
-  constructor() {
+class Qe {
+  constructor(e) {
     i(this, "viewportMatrix", le);
     i(this, "contentMatrix", le);
+    i(this, "beforeUpdateEmitter");
+    i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
     i(this, "onAfterUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = E();
+    i(this, "afterResizeEmitter");
+    i(this, "onAfterResize");
+    i(this, "observer", new ResizeObserver(() => {
+      this.afterResizeEmitter.emit();
+    }));
+    this.host = e, [this.afterUpdateEmitter, this.onAfterUpdated] = E(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = E(), [this.afterResizeEmitter, this.onAfterResize] = E(), this.observer.observe(this.host);
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -785,17 +792,24 @@ class Ze {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = ce(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ce(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = ce(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = ce(this.contentMatrix), this.afterUpdateEmitter.emit();
+  }
+  getDimensions() {
+    const { width: e, height: t } = this.host.getBoundingClientRect();
+    return { width: e, height: t };
+  }
+  destroy() {
+    this.observer.disconnect();
   }
 }
-class K {
+class q {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -818,17 +832,17 @@ class K {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
   static configure(e) {
-    new K(e);
+    new q(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const qe = (r, e, t) => {
+const Ze = (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;
-}, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => qe(e, t, s) && Je(r, t, s), U = (r, e) => {
+}, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => Ze(e, t, s) && Je(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, B = (r) => {
   const e = document.createElement("div");
@@ -864,19 +878,19 @@ const qe = (r, e, t) => {
     status: "notFound"
   };
 };
-function* Ae(r, e) {
+function* Ee(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const s of t) {
     if (s.shadowRoot !== null) {
-      const o = Ae(s.shadowRoot, e);
+      const o = Ee(s.shadowRoot, e);
       for (const n of o)
         yield n;
     }
     yield s;
   }
 }
-const Ee = (r, e) => {
-  const t = Ae(document, e);
+const xe = (r, e) => {
+  const t = Ee(document, e);
   for (const s of t) {
     const o = _e(r, s);
     if (o.status === "portFound")
@@ -977,10 +991,10 @@ class tt {
     }, y = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
-    }, x = {
+    }, A = {
       x: l.x - this.params.curvature * this.params.targetDirection.x,
       y: l.y - this.params.curvature * this.params.targetDirection.y
-    }, A = {
+    }, x = {
       x: c.x + h,
       y: c.y + d
     }, S = {
@@ -990,23 +1004,23 @@ class tt {
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${A.x} ${A.y} ${w.x} ${w.y}`,
-      `C ${S.x} ${S.y} ${x.x} ${x.y} ${l.x} ${l.y}`,
+      `C ${y.x} ${y.y} ${x.x} ${x.y} ${w.x} ${w.y}`,
+      `C ${S.x} ${S.y} ${A.x} ${A.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
     ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
   }
 }
-const Q = Object.freeze({
+const K = Object.freeze({
   edgeColor: "--edge-color"
 }), Pe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(Q.edgeColor, r), e;
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
 }, Te = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${Q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+  return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, O = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${Q.edgeColor})`), r;
+  return r.setAttribute("fill", `var(${K.edgeColor})`), r;
 }, De = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
@@ -1024,7 +1038,7 @@ const Q = Object.freeze({
         const F = r[d + 1];
         o = F.x - h.x, n = F.y - h.y, a = Math.sqrt(o * o + n * n);
       }
-      const A = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + o * A, y: h.y + n * A } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * P, y: h.y + g * P } : h;
+      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + o * x, y: h.y + n * x } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * P, y: h.y + g * P } : h;
       d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${S.x} ${S.y}`
       );
@@ -1171,7 +1185,7 @@ class it {
     );
   }
 }
-class Z {
+class Q {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1353,7 +1367,7 @@ const f = Object.freeze({
   interactiveWidth: 10,
   preOffset: 0
 }), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class k {
+class z {
   constructor(e) {
     i(this, "svg");
     i(this, "group", De());
@@ -1399,15 +1413,15 @@ class k {
       shift: p,
       arrowLength: this.params.arrowLength
     }), this.sourceArrow.setAttribute("d", y));
-    let x = null;
-    this.targetArrow && (x = this.arrowRenderer({
+    let A = null;
+    this.targetArrow && (A = this.arrowRenderer({
       direction: l,
       shift: g,
       arrowLength: this.params.arrowLength
-    }), this.targetArrow.setAttribute("d", x)), this.afterRenderEmitter.emit({
+    }), this.targetArrow.setAttribute("d", A)), this.afterRenderEmitter.emit({
       edgePath: w,
       sourceArrowPath: y,
-      targetArrowPath: x
+      targetArrowPath: A
     });
   }
 }
@@ -1519,7 +1533,7 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1551,7 +1565,7 @@ class pt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new Z({
+    i(this, "createCyclePath", (e) => new Q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1590,7 +1604,7 @@ class pt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1623,7 +1637,7 @@ class wt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new Z({
+    i(this, "createCyclePath", (e) => new Q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1662,7 +1676,7 @@ class wt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1694,7 +1708,7 @@ class ft {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new Z({
+    i(this, "createCyclePath", (e) => new Q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1733,7 +1747,7 @@ class ft {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new z({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: I((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1976,8 +1990,10 @@ class Le {
 }
 class Re {
   constructor(e) {
+    i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
-    this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
+    i(this, "onAfterResize");
+    this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated, this.onAfterResize = this.viewportStore.onAfterResize;
   }
   getViewportMatrix() {
     return { ...this.viewportStore.getViewportMatrix() };
@@ -1985,9 +2001,12 @@ class Re {
   getContentMatrix() {
     return { ...this.viewportStore.getContentMatrix() };
   }
+  getDimensions() {
+    return this.viewportStore.getDimensions();
+  }
 }
 const Ve = (r, e) => {
-  const t = new xe(), s = new Le(t), o = new Re(e), n = new me(t, e, r), a = {
+  const t = new Ae(), s = new Le(t), o = new Re(e), n = new me(t, e, r), a = {
     nodes: {
       centerFn: Se,
       priorityFn: () => 0
@@ -2009,7 +2028,7 @@ const Ve = (r, e) => {
     a
   );
 };
-class z {
+class k {
   constructor(e, t, s, o) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2091,7 +2110,7 @@ class z {
     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);
   }
   static configure(e, t, s, o) {
-    new z(e, t, s, o);
+    new k(e, t, s, o);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2116,7 +2135,7 @@ class z {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class q {
+class Z {
   constructor(e, t, s, o) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2237,7 +2256,7 @@ class q {
     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);
   }
   static configure(e, t, s, o) {
-    new q(e, t, s, o);
+    new Z(e, t, s, o);
   }
   moveNode(e, t) {
     if (this.graph.getNode(e.nodeId) === null)
@@ -2306,11 +2325,11 @@ class q {
     return e;
   }
 }
-const xt = (r, e, t) => ({
+const At = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), At = (r, e, t, s) => ({
+}), Et = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
@@ -2364,7 +2383,7 @@ class H {
       this.moveViewport(s, o);
     });
     i(this, "onWindowMouseUp", (e) => {
-      this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
+      this.params.mouseUpEventVerifier(e) && this.stopMouseDrag();
     });
     i(this, "onWheelScroll", (e) => {
       if (!this.params.mouseWheelEventVerifier(e))
@@ -2407,21 +2426,14 @@ class H {
     i(this, "onWindowTouchFinish", (e) => {
       e.touches.length > 0 ? this.prevTouches = $(e) : this.stopTouchDrag();
     });
-    i(this, "observer", new ResizeObserver(() => {
-      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), o = this.params.transformPreprocessor({
-        prevTransform: e,
-        nextTransform: e,
-        canvasWidth: t,
-        canvasHeight: s
-      });
-      this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
-    }));
     i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
     this.canvas = e, this.element = t, this.window = s, this.params = o, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.viewport = e.viewport, this.handleResize(), this.viewport.onAfterResize.subscribe(() => {
+      this.handleResize();
+    }), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
@@ -2433,7 +2445,7 @@ class H {
     new H(e, t, s, o);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), o = xt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), o = At(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: o,
       canvasWidth: n,
@@ -2442,7 +2454,7 @@ class H {
     this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const o = this.canvas.viewport.getViewportMatrix(), n = At(o, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const o = this.canvas.viewport.getViewportMatrix(), n = Et(o, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: n,
       canvasWidth: a,
@@ -2471,16 +2483,22 @@ class H {
   finishRegisteredTransform() {
     this.transformInProgress = !1, this.params.onTransformFinished();
   }
+  handleResize() {
+    const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
+      prevTransform: e,
+      nextTransform: e,
+      canvasWidth: t,
+      canvasHeight: s
+    });
+    this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
+  }
 }
 class J {
   constructor(e, t, s, o, n, a) {
-    i(this, "canvasResizeObserver");
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
     i(this, "viewport");
-    i(this, "viewportWidth", 0);
-    i(this, "viewportHeight", 0);
-    i(this, "viewportMatrix");
+    i(this, "currentScale");
     i(this, "loadedArea", {
       xFrom: 1 / 0,
       xTo: 1 / 0,
@@ -2496,13 +2514,12 @@ class J {
       };
     });
     i(this, "onAfterViewportUpdated", () => {
-      this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
+      this.userTransformInProgress || this.loadAreaAroundViewport();
     });
     i(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
-      const c = d[0];
-      this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
-    }), this.viewport = e.viewport;
+    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
+      this.scheduleLoadAreaAroundViewport();
+    });
     const h = {
       ...o,
       onResizeTransformStarted: () => {
@@ -2516,8 +2533,8 @@ class J {
       },
       onTransformChange: () => {
         this.userTransformInProgress = !1;
-        const d = this.viewportMatrix;
-        this.viewportMatrix = this.viewport.getViewportMatrix(), d.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), o.onTransformChange();
+        const d = this.currentScale;
+        this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), o.onTransformChange();
       },
       onTransformFinished: () => {
         this.scheduleLoadAreaAroundViewport(), o.onTransformFinished();
@@ -2528,7 +2545,7 @@ class J {
       this.element,
       this.window,
       h
-    ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
+    ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, s, o, n, a) {
     new J(
@@ -2546,15 +2563,22 @@ class J {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, o = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
-    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < o && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
+    setTimeout(() => {
+      const { width: e, height: t } = this.viewport.getDimensions(), { scale: s, x: o, y: n } = this.viewport.getViewportMatrix(), a = e * s, h = t * s, d = o - this.nodeHorizontal, c = n - this.nodeVertical, g = o + a + this.nodeHorizontal, l = n + h + this.nodeVertical;
+      this.loadedArea.xFrom < d && this.loadedArea.xTo > g && this.loadedArea.yFrom < c && this.loadedArea.yTo > l || this.loadAreaAroundViewport();
+    });
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, o = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
-    this.trigger.emit({ x: s, y: o, width: n, height: a });
+    const { width: e, height: t } = this.viewport.getDimensions(), { scale: s, x: o, y: n } = this.viewport.getViewportMatrix(), a = e * s, h = t * s, d = o - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, l = 3 * h + 2 * this.nodeVertical;
+    this.trigger.emit({
+      x: d,
+      y: c,
+      width: g,
+      height: l
+    });
   }
 }
-const Et = () => {
+const xt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
 }, St = () => {
@@ -2569,7 +2593,7 @@ const Et = () => {
 };
 class _ {
   constructor(e, t, s) {
-    i(this, "svg", Et());
+    i(this, "svg", xt());
     i(this, "patternRenderingRectangle", St());
     i(this, "pattern", bt());
     i(this, "patternContent");
@@ -2579,12 +2603,6 @@ class _ {
     i(this, "halfTileHeight");
     i(this, "maxViewportScale");
     i(this, "visible", !1);
-    i(this, "resizeObserver", new ResizeObserver((e) => {
-      const t = e[0], { width: s, height: o } = t.contentRect;
-      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${o}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${o}`);
-      const n = this.tileWidth / s, a = this.tileHeight / o;
-      this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
-    }));
     i(this, "onAfterTransformUpdated", () => {
       const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, o = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
       this.pattern.setAttribute("patternTransform", o), this.updateVisibility();
@@ -2593,7 +2611,9 @@ class _ {
     const o = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", o), this.pattern.appendChild(this.patternContent);
     const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
+    n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.updateDimensions(), this.canvas.viewport.onAfterResize.subscribe(() => {
+      this.updateDimensions();
+    }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, s) {
     new _(e, t, s);
@@ -2602,6 +2622,12 @@ class _ {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
     t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
   }
+  updateDimensions() {
+    const { width: e, height: t } = this.canvas.viewport.getDimensions();
+    this.svg.setAttribute("width", `${e}`), this.svg.setAttribute("height", `${t}`), this.patternRenderingRectangle.setAttribute("width", `${e}`), this.patternRenderingRectangle.setAttribute("height", `${t}`);
+    const s = this.tileWidth / e, o = this.tileHeight / t;
+    this.pattern.setAttribute("width", `${s}`), this.pattern.setAttribute("height", `${o}`);
+  }
 }
 class ee {
   constructor(e, t, s, o, n) {
@@ -2614,7 +2640,7 @@ class ee {
     this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Ve(
       this.overlayLayer,
       this.viewportStore
-    ), z.configure(
+    ), k.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2665,10 +2691,10 @@ class ee {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [y, x] = this.isTargetDragging ? [u, w] : [w, u];
-    this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(x)), this.overlayCanvas.addEdge({
+    const [y, A] = this.isTargetDragging ? [u, w] : [w, u];
+    this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(A)), this.overlayCanvas.addEdge({
       from: y.overlayId,
-      to: x.overlayId,
+      to: A.overlayId,
       shape: this.params.edgeShapeFactory(T.Edge)
     });
   }
@@ -2676,7 +2702,7 @@ class ee {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = Ee(this.canvas.graph, e), s = this.staticPortId;
+    const t = xe(this.canvas.graph, e), s = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: s,
@@ -2710,7 +2736,7 @@ class te {
     this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Ve(
       this.overlayLayer,
       this.viewportStore
-    ), z.configure(
+    ), k.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2754,7 +2780,7 @@ class te {
     }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = C(u, {
       x: l.x - w.x,
       y: l.y - w.y
-    }), x = C(u, {
+    }), A = C(u, {
       x: t.x - w.x,
       y: t.y - w.y
     });
@@ -2765,15 +2791,15 @@ class te {
       shape: o.shape,
       priority: o.priority
     }, this.canvas.removeEdge(s);
-    const A = {
+    const x = {
       overlayId: T.Static,
       portCoords: y,
       portDirection: c.direction
     }, S = {
       overlayId: T.Dragging,
-      portCoords: x,
+      portCoords: A,
       portDirection: d.direction
-    }, [D, P] = this.isTargetDragging ? [A, S] : [S, A];
+    }, [D, P] = this.isTargetDragging ? [x, S] : [S, x];
     this.overlayCanvas.addNode(B(D)), this.overlayCanvas.addNode(B(P));
     const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.Edge) : o.shape;
     return this.overlayCanvas.addEdge({
@@ -2797,7 +2823,7 @@ class te {
     });
   }
   tryCreateConnection(e) {
-    const t = Ee(this.canvas.graph, e);
+    const t = xe(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(T.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -3055,11 +3081,11 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     }
   };
 }, Rt = (r) => {
-  var w, y, x, A, S, D;
+  var w, y, A, x, S, D;
   const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
   }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
-  }), s = r.nodeDragVerifier ?? (() => !0), o = ((x = r.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
-  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (A = r.mouse) == null ? void 0 : A.dragCursor, d = h !== void 0 ? h : "grab", c = (S = r.mouse) == null ? void 0 : S.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (D = r.mouse) == null ? void 0 : D.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
+  }), s = r.nodeDragVerifier ?? (() => !0), o = ((A = r.events) == null ? void 0 : A.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 = (S = r.mouse) == null ? void 0 : S.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (D = r.mouse) == null ? void 0 : D.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
   return {
     moveOnTop: n,
     moveEdgesOnTop: a,
@@ -3129,7 +3155,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
       });
   }
 }, ye = (r) => {
-  var y, x, A, S, D, P, N, F, ne, ae, he, de;
+  var y, A, x, S, D, P, N, F, ne, ae, he, de;
   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;
   let o;
   s !== void 0 ? Array.isArray(s) ? o = It(
@@ -3137,7 +3163,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
       (M) => fe(M)
     )
   ) : o = fe(s) : o = (M) => M.nextTransform;
-  const n = ((x = r == null ? void 0 : r.shift) == null ? void 0 : x.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onBeforeTransformChange) ?? (() => {
+  const n = ((A = r == null ? void 0 : r.shift) == null ? void 0 : A.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
   }), h = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
   }), d = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (M) => M.button === 0, u = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
   return {
@@ -3212,10 +3238,10 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
   };
-}, kt = (r) => ({
+}, zt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), zt = (r) => {
+}), kt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3268,17 +3294,7 @@ class Fe {
     });
   }
 }
-const Ie = (r, e, t) => {
-  const s = /* @__PURE__ */ new Map(), o = r.getAllNodeIds(), n = Math.sqrt(o.length) * t;
-  return o.forEach((a) => {
-    const h = r.getNode(a);
-    s.set(a, {
-      x: h.x ?? n * e(),
-      y: h.y ?? n * e()
-    });
-  }), s;
-};
-class $e {
+class Ie {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3297,7 +3313,7 @@ class $e {
     return { ex: h, ey: d, d: a };
   }
 }
-const Ue = (r) => {
+const $e = (r) => {
   if (r.distance === 0)
     return r.maxForce;
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
@@ -3322,14 +3338,14 @@ class Xt {
         );
         if (l.d > this.effectiveDistance)
           continue;
-        const u = Ue({
+        const u = $e({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
           distance: l.d,
           maxForce: this.maxForce
-        }), w = u * l.ex, y = u * l.ey, x = t.get(a), A = t.get(d);
-        x.x -= w, x.y -= y, A.x += w, A.y += y;
+        }), w = u * l.ex, y = u * l.ey, A = t.get(a), x = t.get(d);
+        A.x -= w, A.y -= y, x.x += w, x.y += y;
       }
     }
   }
@@ -3636,7 +3652,7 @@ class jt {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), s = Ue({
+    ), s = $e({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -3671,7 +3687,7 @@ class jt {
     }
   }
 }
-const Be = (r) => r.theta !== 0 ? new jt({
+const Ue = (r) => r.theta !== 0 ? new jt({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3686,49 +3702,71 @@ const Be = (r) => r.theta !== 0 ? new jt({
   effectiveDistance: r.effectiveDistance,
   maxForce: r.maxForce
 });
-class Kt {
+class Be {
+  constructor(e) {
+    i(this, "rand");
+    i(this, "sparsity");
+    this.rand = e.rand, this.sparsity = e.sparsity;
+  }
+  calculateCoordinates(e) {
+    const t = /* @__PURE__ */ new Map(), s = e.getAllNodeIds(), o = Math.sqrt(s.length) * this.sparsity;
+    return s.forEach((n) => {
+      const a = e.getNode(n);
+      t.set(n, {
+        x: a.x ?? o * this.rand(),
+        y: a.y ?? o * this.rand()
+      });
+    }), t;
+  }
+}
+class qt {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
-    this.params = e, this.distanceVectorGenerator = new $e(
-      this.params.rand
-    ), this.nodeForcesApplicationStrategy = Be({
+    i(this, "fillerLayoutAlgorithm");
+    i(this, "maxIterations");
+    i(this, "dtSec");
+    i(this, "nodeMass");
+    i(this, "edgeEquilibriumLength");
+    i(this, "edgeStiffness");
+    i(this, "convergenceDelta");
+    i(this, "convergenceVelocity");
+    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceDelta = e.convergenceDelta, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
       distanceVectorGenerator: this.distanceVectorGenerator,
-      nodeCharge: this.params.nodeCharge,
-      effectiveDistance: this.params.effectiveDistance,
-      maxForce: this.params.maxForce,
-      nodeForceCoefficient: this.params.nodeForceCoefficient,
-      theta: this.params.barnesHutTheta,
-      areaRadiusThreshold: this.params.barnesHutAreaRadiusThreshold,
-      nodeMass: this.params.nodeMass
+      nodeCharge: e.nodeCharge,
+      effectiveDistance: e.effectiveDistance,
+      maxForce: e.maxForce,
+      nodeForceCoefficient: e.nodeForceCoefficient,
+      theta: e.barnesHutTheta,
+      areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
+      nodeMass: e.nodeMass
+    }), this.fillerLayoutAlgorithm = new Be({
+      rand: e.rand,
+      sparsity: e.edgeEquilibriumLength
     });
   }
   calculateCoordinates(e) {
-    const t = Ie(
-      e,
-      this.params.rand,
-      this.params.edgeEquilibriumLength
-    );
-    for (let s = 0; s < this.params.maxIterations; s++) {
+    const t = this.fillerLayoutAlgorithm.calculateCoordinates(e);
+    for (let s = 0; s < this.maxIterations; s++) {
       const o = new Fe(
         e,
         t,
         {
           distanceVectorGenerator: this.distanceVectorGenerator,
           nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
-          dtSec: this.params.dtSec,
-          nodeMass: this.params.nodeMass,
-          edgeEquilibriumLength: this.params.edgeEquilibriumLength,
-          edgeStiffness: this.params.edgeStiffness
+          dtSec: this.dtSec,
+          nodeMass: this.nodeMass,
+          edgeEquilibriumLength: this.edgeEquilibriumLength,
+          edgeStiffness: this.edgeStiffness
         }
       ), [n, a] = o.apply();
-      if (n < this.params.convergenceDelta || a < this.params.convergenceVelocity)
+      if (n < this.convergenceDelta || a < this.convergenceVelocity)
         break;
     }
     return t;
   }
 }
-class Qt {
+class Kt {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -3738,8 +3776,8 @@ class Qt {
     i(this, "nodeMass");
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
-    i(this, "rand");
-    this.convergenceDelta = e.convergenceDelta, this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.rand = e.rand, this.distanceVectorGenerator = new $e(e.rand), this.nodeForcesApplicationStrategy = Be({
+    i(this, "fillerLayoutAlgorithm");
+    this.convergenceDelta = e.convergenceDelta, this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       effectiveDistance: e.effectiveDistance,
@@ -3748,14 +3786,13 @@ class Qt {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
+    }), this.fillerLayoutAlgorithm = new Be({
+      rand: e.rand,
+      sparsity: e.edgeEquilibriumLength
     });
   }
   calculateNextCoordinates(e, t) {
-    const s = Ie(
-      e,
-      this.rand,
-      this.edgeEquilibriumLength
-    ), o = new Fe(
+    const s = this.fillerLayoutAlgorithm.calculateCoordinates(e), o = new Fe(
       e,
       s,
       {
@@ -3798,14 +3835,14 @@ const Oe = (r) => {
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), Zt = (r) => {
+}), Qt = (r) => {
   var e, t, s;
   switch ((e = r == null ? void 0 : r.algorithm) == null ? void 0 : e.type) {
     case "custom":
       return r.algorithm.instance;
     default: {
       const o = r == null ? void 0 : r.algorithm, n = Oe((o == null ? void 0 : o.seed) ?? v.seed), a = We(n[0], n[1], n[2], n[3]);
-      return new Qt({
+      return new Kt({
         rand: a,
         maxTimeDeltaSec: (o == null ? void 0 : o.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
         nodeCharge: (o == null ? void 0 : o.nodeCharge) ?? v.nodeCharge,
@@ -3822,7 +3859,7 @@ const Oe = (r) => {
       });
     }
   }
-}, qt = (r) => r instanceof j ? {
+}, Zt = (r) => r instanceof j ? {
   type: "manual",
   trigger: r
 } : {
@@ -3834,7 +3871,7 @@ const Oe = (r) => {
       return r.instance;
     default: {
       const s = Oe((r == null ? void 0 : r.seed) ?? v.seed), o = We(s[0], s[1], s[2], s[3]);
-      return new Kt({
+      return new qt({
         dtSec: (r == null ? void 0 : r.dtSec) ?? v.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? v.maxIterations,
         rand: o,
@@ -3854,7 +3891,7 @@ const Oe = (r) => {
   }
 }, _t = (r) => ({
   algorithm: Jt(r == null ? void 0 : r.algorithm),
-  applyOn: qt(r == null ? void 0 : r.applyOn)
+  applyOn: Zt(r == null ? void 0 : r.applyOn)
 }), er = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
@@ -3891,13 +3928,13 @@ class or {
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
     i(this, "boxRenderingTrigger", new j());
-    i(this, "graphStore", new xe());
-    i(this, "viewportStore", new Ze());
-    i(this, "graph", new Le(this.graphStore));
-    i(this, "viewport", new Re(this.viewportStore));
+    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.element = e, this.viewportStore = new Qe(this.element), this.viewport = new Re(this.viewportStore), this.graphStore = new Ae(), this.graph = new Le(this.graphStore);
   }
   /**
    * specifies default values for graph entities
@@ -3967,19 +4004,7 @@ class or {
     if (this.used)
       throw new Ht("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Ct(this.element);
-    let t = new me(
-      this.graphStore,
-      this.viewportStore,
-      e.main
-    );
-    this.virtualScrollConfig !== void 0 && (t = new je(
-      t,
-      this.graphStore,
-      this.boxRenderingTrigger,
-      zt(this.virtualScrollConfig)
-    )), t = new Ke(t, this.graphStore);
-    const s = Lt(this.canvasDefaults), o = new ve(
+    const e = new Ct(this.element), t = this.createHtmlView(e.main), s = Lt(this.canvasDefaults), o = new ve(
       this.graph,
       this.viewport,
       this.graphStore,
@@ -3991,12 +4016,12 @@ class or {
       o,
       Bt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && K.configure(o), this.hasDraggableNodes) {
+    ), this.hasNodeResizeReactiveEdges && q.configure(o), this.hasDraggableNodes) {
       let a = Rt(this.dragConfig);
       this.hasAnimatedLayout && (a = er(
         a,
         this.animationStaticNodes
-      )), q.configure(
+      )), Z.configure(
         o,
         e.main,
         this.window,
@@ -4036,7 +4061,7 @@ class or {
       this.window,
       ye(this.transformConfig),
       this.boxRenderingTrigger,
-      kt(this.virtualScrollConfig)
+      zt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && H.configure(
       o,
       e.main,
@@ -4050,7 +4075,7 @@ class or {
       this.animationStaticNodes
     ), oe.configure(
       o,
-      Zt(this.animatedLayoutConfig),
+      Qt(this.animatedLayoutConfig),
       this.animationStaticNodes,
       this.window
     ));
@@ -4059,6 +4084,19 @@ class or {
     };
     return o.onBeforeDestroy.subscribe(n), o;
   }
+  createHtmlView(e) {
+    let t = new me(
+      this.graphStore,
+      this.viewportStore,
+      e
+    );
+    return this.virtualScrollConfig !== void 0 && (t = new je(
+      t,
+      this.graphStore,
+      this.boxRenderingTrigger,
+      kt(this.virtualScrollConfig)
+    )), new qe(t, this.graphStore);
+  }
 }
 export {
   ut as BezierEdgeShape,