@html-graph/html-graph 7.3.0 → 7.5.0

package/dist/html-graph.js

@@ -1,7 +1,7 @@
-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);
-const D = (r, e) => ({
+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
 });
@@ -90,7 +90,7 @@ class me {
     const n = {
       x: t.left - s.left,
       y: t.top - s.top
-    }, a = D(o, n);
+    }, a = C(o, n);
     return {
       x: a.x,
       y: a.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 Je = (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;
-}, qe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, F = (r, e, t, s) => Je(e, t, s) && qe(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 Je = (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,27 +1004,27 @@ 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;
-}, Ce = () => {
+  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;
-}, De = (r, e) => {
+}, Ce = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
 }, L = (r, e) => {
   const t = [];
@@ -1021,10 +1035,10 @@ const Q = Object.freeze({
       let c = 0, g = 0, l = 0;
       const u = d > 0, w = d < s, y = 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 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,10 +1367,10 @@ 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", Ce());
+    i(this, "group", De());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1370,7 +1384,7 @@ class k {
       e.from,
       e.to
     );
-    De(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    Ce(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = ge(
       e.from.direction,
       a,
@@ -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) ?? {}),
@@ -1752,7 +1766,7 @@ class ft {
 class Ne {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", Ce());
+    i(this, "group", De());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1771,7 +1785,7 @@ class Ne {
       e.from,
       e.to
     );
-    De(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    Ce(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 at({
       to: d,
       sourceOffset: this.sourceOffset,
@@ -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 Fe = (r, e) => {
-  const t = new xe(), s = new Le(t), o = new Re(e), n = new me(t, e, r), a = {
+const Ve = (r, e) => {
+  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 Fe = (r, e) => {
     a
   );
 };
-class z {
+class k {
   constructor(e, t, s, o) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2033,7 +2052,7 @@ class z {
       }));
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!F(
+      if (!V(
         this.window,
         this.element,
         e.clientX,
@@ -2064,7 +2083,7 @@ class z {
     });
     i(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!F(
+      if (!V(
         this.window,
         this.element,
         t.clientX,
@@ -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 J {
+class Z {
   constructor(e, t, s, o) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2196,7 +2215,7 @@ class J {
       });
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!F(
+      if (!V(
         this.window,
         this.element,
         e.clientX,
@@ -2217,7 +2236,7 @@ class J {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!F(
+      if (!V(
         this.window,
         this.element,
         t.clientX,
@@ -2237,7 +2256,7 @@ class J {
     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 J(e, t, s, o);
+    new Z(e, t, s, o);
   }
   moveNode(e, t) {
     if (this.graph.getNode(e.nodeId) === null)
@@ -2292,7 +2311,7 @@ class J {
       x: e.x - t.x,
       y: e.y - t.y
     }, o = this.canvas.viewport.getViewportMatrix();
-    return D(o, s);
+    return C(o, s);
   }
   adjustNodeCoords(e) {
     const t = this.params.gridSize;
@@ -2306,11 +2325,11 @@ class J {
     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
@@ -2350,7 +2369,7 @@ class H {
       }), this.startRegisteredTransform());
     });
     i(this, "onWindowMouseMove", (e) => {
-      const t = F(
+      const t = V(
         this.window,
         this.element,
         e.clientX,
@@ -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))
@@ -2390,7 +2409,7 @@ class H {
     i(this, "onWindowTouchMove", (e) => {
       const t = $(e);
       if (!t.touches.every(
-        (o) => F(this.window, this.element, o[0], o[1])
+        (o) => V(this.window, this.element, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -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 q {
+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 q {
       };
     });
     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 q {
       },
       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,10 +2545,10 @@ class q {
       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 q(
+    new J(
       e,
       t,
       s,
@@ -2546,15 +2563,22 @@ class q {
     });
   }
   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) {
@@ -2611,10 +2637,10 @@ class ee {
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Fe(
+    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,
@@ -2649,10 +2675,10 @@ class ee {
   grabPort(e, t, s) {
     const o = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = o.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = D(c, {
+    const n = o.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = C(c, {
       x: a - d.x,
       y: h - d.y
-    }), l = D(c, {
+    }), l = C(c, {
       x: t.x - d.x,
       y: t.y - d.y
     }), u = {
@@ -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,
@@ -2691,7 +2717,7 @@ class ee {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, o = this.canvas.viewport.getViewportMatrix(), n = D(o, s);
+    }, o = this.canvas.viewport.getViewportMatrix(), n = C(o, s);
     this.overlayCanvas.updateNode(T.Dragging, {
       x: n.x,
       y: n.y
@@ -2707,10 +2733,10 @@ class te {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Fe(
+    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,
@@ -2751,10 +2777,10 @@ class te {
     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.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = D(u, {
+    }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = C(u, {
       x: l.x - w.x,
       y: l.y - w.y
-    }), x = D(u, {
+    }), A = C(u, {
       x: t.x - w.x,
       y: t.y - w.y
     });
@@ -2765,20 +2791,20 @@ 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
-    }, [C, P] = this.isTargetDragging ? [A, S] : [S, A];
-    this.overlayCanvas.addNode(B(C)), this.overlayCanvas.addNode(B(P));
+    }, [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({
       id: T.Edge,
-      from: C.overlayId,
+      from: D.overlayId,
       to: P.overlayId,
       shape: N
     }), !0;
@@ -2790,14 +2816,14 @@ class te {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, o = this.canvas.viewport.getViewportMatrix(), n = D(o, s);
+    }, o = this.canvas.viewport.getViewportMatrix(), n = C(o, s);
     this.overlayCanvas.updateNode(T.Dragging, {
       x: n.x,
       y: n.y
     });
   }
   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({
@@ -2932,7 +2958,7 @@ class oe {
     new oe(e, t, s, o);
   }
 }
-const Ct = () => {
+const Dt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Y = () => {
@@ -2942,13 +2968,13 @@ const Ct = () => {
   const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class Dt {
+class Ct {
   constructor(e) {
     i(this, "background", Y());
     i(this, "main", Y());
     i(this, "overlayConnectablePorts", pe());
     i(this, "overlayDraggableEdges", pe());
-    i(this, "host", Ct());
+    i(this, "host", Dt());
     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() {
@@ -3055,11 +3081,11 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     }
   };
 }, Rt = (r) => {
-  var w, y, x, A, S, C;
+  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 = (C = r.mouse) == null ? void 0 : C.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,
@@ -3072,7 +3098,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     nodeDragVerifier: s,
     onNodeDragFinished: o
   };
-}, Ft = (r) => {
+}, Vt = (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;
@@ -3082,7 +3108,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     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 };
   };
-}, Vt = (r) => {
+}, Ft = (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;
@@ -3116,12 +3142,12 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Vt({
+      return Ft({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Ft({
+      return Vt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
@@ -3129,7 +3155,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
       });
   }
 }, ye = (r) => {
-  var y, x, A, S, C, P, N, V, 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,12 +3163,12 @@ 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 = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.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;
+  }), 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 {
     wheelSensitivity: t,
-    onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
+    onTransformStarted: ((F = r == null ? void 0 : r.events) == null ? void 0 : F.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((ne = r == null ? void 0 : r.events) == null ? void 0 : ne.onTransformFinished) ?? (() => {
     }),
@@ -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) ?? (() => {
@@ -3230,7 +3256,7 @@ class Ht extends Error {
     i(this, "name", "CanvasBuilderError");
   }
 }
-class Ve {
+class Fe {
   constructor(e, t, s) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3241,17 +3267,22 @@ class Ve {
     this.graph = e, this.currentCoords = t, this.dt = s.dtSec, this.nodeMass = s.nodeMass, this.edgeEquilibriumLength = s.edgeEquilibriumLength, this.edgeStiffness = s.edgeStiffness, this.distanceVectorGenerator = s.distanceVectorGenerator, this.nodeForcesApplicationStrategy = s.nodeForcesApplicationStrategy;
   }
   apply() {
-    let e = 0;
-    const t = /* @__PURE__ */ new Map();
-    return this.graph.getAllNodeIds().forEach((o) => {
-      t.set(o, { x: 0, y: 0 });
-    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, t), this.applyEdgeForces(t), this.currentCoords.forEach((o, n) => {
-      const a = t.get(n), h = {
-        x: a.x / this.nodeMass * this.dt,
-        y: a.y / this.nodeMass * this.dt
-      }, d = h.x * this.dt, c = h.y * this.dt;
-      o.x += d, o.y += c, e = Math.max(e, Math.sqrt(d * d + c * c));
-    }), e;
+    let e = 0, t = 0;
+    const s = /* @__PURE__ */ new Map();
+    return this.graph.getAllNodeIds().forEach((n) => {
+      s.set(n, { x: 0, y: 0 });
+    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, s), this.applyEdgeForces(s), this.currentCoords.forEach((n, a) => {
+      const h = s.get(a), d = {
+        x: h.x / this.nodeMass * this.dt,
+        y: h.y / this.nodeMass * this.dt
+      };
+      t = Math.max(
+        t,
+        Math.sqrt(d.x * d.x + d.y * d.y)
+      );
+      const c = d.x * this.dt, g = d.y * this.dt;
+      n.x += c, n.y += g, e = Math.max(e, Math.sqrt(c * c + g * g));
+    }), [e, t];
   }
   applyEdgeForces(e) {
     this.graph.getAllEdgeIds().forEach((t) => {
@@ -3263,17 +3294,7 @@ class Ve {
     });
   }
 }
-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;
@@ -3292,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));
@@ -3317,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;
       }
     }
   }
@@ -3631,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,
@@ -3666,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,
@@ -3681,80 +3702,111 @@ 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 && !(new Ve(
-      e,
-      t,
-      {
-        distanceVectorGenerator: this.distanceVectorGenerator,
-        nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
-        dtSec: this.params.dtSec,
-        nodeMass: this.params.nodeMass,
-        edgeEquilibriumLength: this.params.edgeEquilibriumLength,
-        edgeStiffness: this.params.edgeStiffness
-      }
-    ).apply() < this.params.convergenceDelta); 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.dtSec,
+          nodeMass: this.nodeMass,
+          edgeEquilibriumLength: this.edgeEquilibriumLength,
+          edgeStiffness: this.edgeStiffness
+        }
+      ), [n, a] = o.apply();
+      if (n < this.convergenceDelta || a < this.convergenceVelocity)
+        break;
+    }
     return t;
   }
 }
-class Qt {
+class Kt {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
-    this.params = e, this.distanceVectorGenerator = new $e(e.rand), this.nodeForcesApplicationStrategy = Be({
+    i(this, "convergenceDelta");
+    i(this, "convergenceVelocity");
+    i(this, "maxTimeDeltaSec");
+    i(this, "nodeMass");
+    i(this, "edgeEquilibriumLength");
+    i(this, "edgeStiffness");
+    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: 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
     });
   }
   calculateNextCoordinates(e, t) {
-    const s = Ie(
-      e,
-      this.params.rand,
-      this.params.edgeEquilibriumLength
-    );
-    return new Ve(
+    const s = this.fillerLayoutAlgorithm.calculateCoordinates(e), o = new Fe(
       e,
       s,
       {
         distanceVectorGenerator: this.distanceVectorGenerator,
         nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
-        dtSec: Math.min(t, this.params.maxTimeDeltaSec),
-        nodeMass: this.params.nodeMass,
-        edgeEquilibriumLength: this.params.edgeEquilibriumLength,
-        edgeStiffness: this.params.edgeStiffness
+        dtSec: Math.min(t, this.maxTimeDeltaSec),
+        nodeMass: this.nodeMass,
+        edgeEquilibriumLength: this.edgeEquilibriumLength,
+        edgeStiffness: this.edgeStiffness
       }
-    ).apply() < this.params.convergenceDelta && !e.getAllNodeIds().some((h) => {
-      const d = e.getNode(h);
-      return d.x === null || d.y === null;
+    ), [n, a] = o.apply();
+    return (n < this.convergenceDelta || a < this.convergenceVelocity) && !e.getAllNodeIds().some((d) => {
+      const c = e.getNode(d);
+      return c.x === null || c.y === null;
     }) ? /* @__PURE__ */ new Map() : s;
   }
 }
@@ -3777,19 +3829,20 @@ const Oe = (r) => {
   effectiveDistance: 1e3,
   dtSec: 0.01,
   maxIterations: 1e3,
-  convergenceDelta: 1,
+  convergenceDelta: 0,
+  convergenceVelocity: 10,
   maxForce: 1e7,
   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,
@@ -3798,6 +3851,7 @@ const Oe = (r) => {
         effectiveDistance: v.effectiveDistance,
         edgeStiffness: (o == null ? void 0 : o.edgeStiffness) ?? v.edgeStiffness,
         convergenceDelta: (o == null ? void 0 : o.convergenceDelta) ?? v.convergenceDelta,
+        convergenceVelocity: (o == null ? void 0 : o.convergenceVelocity) ?? v.convergenceVelocity,
         maxForce: (o == null ? void 0 : o.maxForce) ?? v.maxForce,
         nodeForceCoefficient: (o == null ? void 0 : o.nodeForceCoefficient) ?? v.nodeForceCoefficient,
         barnesHutTheta: ((t = o == null ? void 0 : o.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
@@ -3805,19 +3859,19 @@ const Oe = (r) => {
       });
     }
   }
-}, Jt = (r) => r instanceof j ? {
+}, Zt = (r) => r instanceof j ? {
   type: "manual",
   trigger: r
 } : {
   type: "topologyChangeTimeout"
-}, qt = (r) => {
+}, Jt = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       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,
@@ -3827,6 +3881,7 @@ const Oe = (r) => {
         edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? v.edgeStiffness,
         effectiveDistance: (r == null ? void 0 : r.effectiveDistance) ?? v.effectiveDistance,
         convergenceDelta: (r == null ? void 0 : r.convergenceDelta) ?? v.convergenceDelta,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? v.convergenceVelocity,
         maxForce: (r == null ? void 0 : r.maxForce) ?? v.maxForce,
         nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? v.nodeForceCoefficient,
         barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? v.barnesHutTheta,
@@ -3835,8 +3890,8 @@ const Oe = (r) => {
     }
   }
 }, _t = (r) => ({
-  algorithm: qt(r == null ? void 0 : r.algorithm),
-  applyOn: Jt(r == null ? void 0 : r.applyOn)
+  algorithm: Jt(r == null ? void 0 : r.algorithm),
+  applyOn: Zt(r == null ? void 0 : r.applyOn)
 }), er = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
@@ -3873,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
@@ -3949,19 +4004,7 @@ class or {
     if (this.used)
       throw new Ht("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Dt(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,
@@ -3973,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
-      )), J.configure(
+      )), Z.configure(
         o,
         e.main,
         this.window,
@@ -4012,13 +4055,13 @@ class or {
         a
       );
     }
-    this.virtualScrollConfig !== void 0 ? q.configure(
+    this.virtualScrollConfig !== void 0 ? J.configure(
       o,
       e.main,
       this.window,
       ye(this.transformConfig),
       this.boxRenderingTrigger,
-      kt(this.virtualScrollConfig)
+      zt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && H.configure(
       o,
       e.main,
@@ -4032,7 +4075,7 @@ class or {
       this.animationStaticNodes
     ), oe.configure(
       o,
-      Zt(this.animatedLayoutConfig),
+      Qt(this.animatedLayoutConfig),
       this.animationStaticNodes,
       this.window
     ));
@@ -4041,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,