@html-graph/html-graph 7.6.0 → 7.8.0

package/dist/html-graph.js

@@ -1,6 +1,6 @@
-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);
+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 M = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(M || {});
 const He = () => {
   const r = document.createElement("div");
@@ -243,7 +243,7 @@ class qe {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class G {
+class j {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -260,10 +260,10 @@ class G {
   }
 }
 const E = () => {
-  const r = new G();
+  const r = new j();
   return [r, r];
 };
-class H {
+class X {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -287,13 +287,13 @@ class b extends Error {
 }
 class ve {
   constructor(e, t, o, s, n, a) {
-    i(this, "nodeIdGenerator", new H(
+    i(this, "nodeIdGenerator", new X(
       (e) => this.graphStore.getNode(e) !== void 0
     ));
-    i(this, "portIdGenerator", new H(
+    i(this, "portIdGenerator", new X(
       (e) => this.graphStore.getPort(e) !== void 0
     ));
-    i(this, "edgeIdGenerator", new H(
+    i(this, "edgeIdGenerator", new X(
       (e) => this.graphStore.getEdge(e) !== void 0
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -809,7 +809,7 @@ class Qe {
     this.observer.disconnect();
   }
 }
-class j {
+class q {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -832,7 +832,7 @@ class j {
     }), 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 j(e);
+    new q(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
@@ -900,7 +900,7 @@ const xe = (r, e) => {
   }
   return null;
 };
-var T = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(T || {});
+var C = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(C || {});
 const Se = (r, e) => ({
   x: r / 2,
   y: e / 2
@@ -926,7 +926,7 @@ const Se = (r, e) => ({
     flipX: d,
     flipY: c
   };
-}, O = (r, e, t, o) => ({
+}, W = (r, e, t, o) => ({
   x: e * r.x + (1 - e) / 2 * o.x,
   y: t * r.y + (1 - t) / 2 * o.y
 });
@@ -1007,21 +1007,21 @@ class tt {
       `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 ${o.x} ${o.y}`
-    ].join(" "), this.midpoint = O(w, e.flipX, e.flipY, e.to);
+    ].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;
-}, Te = (r) => {
+  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;
+}, Ce = (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;
 }, B = () => {
   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;
+}, Te = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
 }, De = (r, e) => {
@@ -1110,7 +1110,7 @@ class ot {
       this.params.targetDirection,
       this.params.to
     ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
-    this.midpoint = O(w, e.flipX, e.flipY, e.to), this.path = N(
+    this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = N(
       [t, n, g, u, l, o],
       this.params.roundness
     );
@@ -1185,7 +1185,7 @@ class it {
     );
   }
 }
-class K {
+class Q {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1290,7 +1290,7 @@ class ht {
       x: (n.x + a.x) / 2,
       y: g
     };
-    this.midpoint = O(l, e.flipX, e.flipY, e.to), this.path = N(
+    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = N(
       [
         t,
         n,
@@ -1331,7 +1331,7 @@ class dt {
       x: g,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = O(l, e.flipX, e.flipY, e.to), this.path = N(
+    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = N(
       [
         t,
         n,
@@ -1367,17 +1367,17 @@ const f = Object.freeze({
   interactiveWidth: 10,
   preOffset: 0
 }), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class W {
+class k {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", Ce());
+    i(this, "group", Te());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Ce(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: o, width: s, height: n, flipX: a, flipY: h } = be(
@@ -1533,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 W({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? f.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? f.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? f.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1565,7 +1565,7 @@ class pt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new K({
+    i(this, "createCyclePath", (e) => new Q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1604,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 W({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1637,7 +1637,7 @@ class wt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new K({
+    i(this, "createCyclePath", (e) => new Q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1676,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 W({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? f.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1708,7 +1708,7 @@ class ft {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e) => new K({
+    i(this, "createCyclePath", (e) => new Q({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1747,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 W({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? f.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? f.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? f.hasTargetArrow, this.pathShape = new k({
       color: (e == null ? void 0 : e.color) ?? f.color,
       width: (e == null ? void 0 : e.width) ?? f.width,
       arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1766,7 +1766,7 @@ class ft {
 class Ne {
   constructor(e) {
     i(this, "svg");
-    i(this, "group", Ce());
+    i(this, "group", Te());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -1778,7 +1778,7 @@ class Ne {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = F((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = F((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = Ce(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: o, width: s, height: n, flipX: a, flipY: h } = be(
@@ -2141,7 +2141,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, o, s) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2262,7 +2262,7 @@ class Q {
     this.canvas = e, this.element = t, this.window = o, this.params = s, 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, o, s) {
-    new Q(e, t, o, s);
+    new Z(e, t, o, s);
   }
   moveNode(e, t) {
     if (this.graph.getNode(e.nodeId) === null)
@@ -2358,7 +2358,7 @@ const At = (r, e, t) => ({
     touches: e
   };
 };
-class k {
+class H {
   constructor(e, t, o, s) {
     i(this, "viewport");
     i(this, "prevTouches", null);
@@ -2448,7 +2448,7 @@ class k {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, o, s) {
-    new k(e, t, o, s);
+    new H(e, t, o, s);
   }
   moveViewport(e, t) {
     const o = this.viewport.getViewportMatrix(), s = At(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
@@ -2499,7 +2499,7 @@ class k {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
   }
 }
-class Z {
+class J {
   constructor(e, t, o, s, n, a) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
@@ -2546,7 +2546,7 @@ class Z {
         this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
       }
     };
-    k.configure(
+    H.configure(
       e,
       this.element,
       this.window,
@@ -2554,7 +2554,7 @@ class Z {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, o, s, n, a) {
-    new Z(
+    new J(
       e,
       t,
       o,
@@ -2597,7 +2597,7 @@ const xt = () => {
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class J {
+class _ {
   constructor(e, t, o) {
     i(this, "svg", xt());
     i(this, "patternRenderingRectangle", St());
@@ -2622,7 +2622,7 @@ class J {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new J(e, t, o);
+    new _(e, t, o);
   }
   updateVisibility() {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
@@ -2635,7 +2635,7 @@ class J {
     this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
   }
 }
-class _ {
+class ee {
   constructor(e, t, o, s, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -2670,7 +2670,7 @@ class _ {
     );
   }
   static configure(e, t, o, s, n) {
-    new _(
+    new ee(
       e,
       t,
       o,
@@ -2688,11 +2688,11 @@ class _ {
       x: t.x - d.x,
       y: t.y - d.y
     }), l = {
-      overlayNodeId: T.StaticNodeId,
+      overlayNodeId: C.StaticNodeId,
       portCoords: c,
       portDirection: s.direction
     }, u = {
-      overlayNodeId: T.DraggingNodeId,
+      overlayNodeId: C.DraggingNodeId,
       portCoords: g,
       portDirection: this.params.dragPortDirection
     };
@@ -2701,7 +2701,7 @@ class _ {
     this.overlayCanvas.addNode(U(w)), this.overlayCanvas.addNode(U(y)), this.overlayCanvas.addEdge({
       from: w.overlayNodeId,
       to: y.overlayNodeId,
-      shape: this.params.edgeShapeFactory(T.EdgeId)
+      shape: this.params.edgeShapeFactory(C.EdgeId)
     });
   }
   resetDragState() {
@@ -2724,13 +2724,13 @@ class _ {
       x: e.x - t.x,
       y: e.y - t.y
     });
-    this.overlayCanvas.updateNode(T.DraggingNodeId, {
+    this.overlayCanvas.updateNode(C.DraggingNodeId, {
       x: o.x,
       y: o.y
     });
   }
 }
-class ee {
+class te {
   constructor(e, t, o, s, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -2763,7 +2763,7 @@ class ee {
     );
   }
   static configure(e, t, o, s, n) {
-    new ee(
+    new te(
       e,
       t,
       o,
@@ -2798,20 +2798,20 @@ class ee {
       priority: s.priority
     }, this.canvas.removeEdge(o);
     const A = {
-      overlayNodeId: T.StaticNodeId,
+      overlayNodeId: C.StaticNodeId,
       portCoords: w,
       portDirection: c.direction
     }, x = {
-      overlayNodeId: T.DraggingNodeId,
+      overlayNodeId: C.DraggingNodeId,
       portCoords: y,
       portDirection: d.direction
-    }, [S, C] = this.isTargetDragging ? [A, x] : [x, A];
-    this.overlayCanvas.addNode(U(S)), this.overlayCanvas.addNode(U(C));
-    const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.EdgeId) : s.shape;
+    }, [S, T] = this.isTargetDragging ? [A, x] : [x, A];
+    this.overlayCanvas.addNode(U(S)), this.overlayCanvas.addNode(U(T));
+    const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(C.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
-      id: T.EdgeId,
+      id: C.EdgeId,
       from: S.overlayNodeId,
-      to: C.overlayNodeId,
+      to: T.overlayNodeId,
       shape: P
     }), !0;
   }
@@ -2823,14 +2823,14 @@ class ee {
       x: e.x - t.x,
       y: e.y - t.y
     }, s = this.canvas.viewport.createContentCoords(o);
-    this.overlayCanvas.updateNode(T.DraggingNodeId, {
+    this.overlayCanvas.updateNode(C.DraggingNodeId, {
       x: s.x,
       y: s.y
     });
   }
   tryCreateConnection(e) {
     const t = xe(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
+    if (this.overlayCanvas.removeEdge(C.EdgeId), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -2862,29 +2862,40 @@ class ee {
     }
   }
 }
-class te {
+class re {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.trigger = o, this.trigger.subscribe(() => {
       this.applyLayout();
     });
   }
   static configure(e, t, o) {
-    new te(
+    new re(
       e,
       t,
       o
     );
   }
   applyLayout() {
-    this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
+    this.layoutAlgorithm.calculateCoordinates(
+      this.canvas.graph,
+      this.canvas.viewport
+    ).forEach((t, o) => {
       this.canvas.updateNode(o, t);
     });
   }
 }
-class re {
-  constructor(e, t) {
+class O {
+  constructor(e, t, o) {
     i(this, "applyScheduled", !1);
-    this.canvas = e, this.layoutAlgorithm = t, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
+    i(this, "apply", () => {
+      this.applyScheduled = !1, this.layoutAlgorithm.calculateCoordinates(
+        this.canvas.graph,
+        this.canvas.viewport
+      ).forEach((t, o) => {
+        this.canvas.updateNode(o, t);
+      });
+    });
+    this.canvas = e, this.layoutAlgorithm = t, this.defererFn = o, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
       this.scheduleApply();
     }), this.canvas.graph.onBeforeNodeRemoved.subscribe(() => {
       this.scheduleApply();
@@ -2894,21 +2905,15 @@ class re {
       this.scheduleApply();
     });
   }
-  static configure(e, t) {
-    new re(
+  static configure(e, t, o) {
+    new O(
       e,
-      t
+      t,
+      o
     );
   }
   scheduleApply() {
-    this.applyScheduled || (this.applyScheduled = !0, setTimeout(() => {
-      this.applyScheduled = !1, this.applyLayout();
-    }));
-  }
-  applyLayout() {
-    this.layoutAlgorithm.calculateCoordinates(this.canvas.graph).forEach((t, o) => {
-      this.canvas.updateNode(o, t);
-    });
+    this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
 class Pt {
@@ -2916,24 +2921,41 @@ class Pt {
     const o = t.applyOn;
     switch (o.type) {
       case "manual": {
-        te.configure(
+        re.configure(
           e,
           t.algorithm,
           o.trigger
         );
         break;
       }
-      case "topologyChangeTimeout": {
-        re.configure(
+      case "topologyChangeMacrotask": {
+        O.configure(
           e,
-          t.algorithm
+          t.algorithm,
+          (s) => {
+            setTimeout(() => {
+              s();
+            });
+          }
+        );
+        break;
+      }
+      case "topologyChangeMicrotask": {
+        O.configure(
+          e,
+          t.algorithm,
+          (s) => {
+            queueMicrotask(() => {
+              s();
+            });
+          }
         );
         break;
       }
     }
   }
 }
-class Tt {
+class Ct {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -2953,47 +2975,48 @@ class oe {
     i(this, "step", (e) => {
       this.algorithm.calculateNextCoordinates(
         this.canvas.graph,
-        e
+        e,
+        this.canvas.viewport
       ).forEach((o, s) => {
         this.staticNodes.has(s) || this.canvas.updateNode(s, { x: o.x, y: o.y });
       });
     });
-    this.canvas = e, this.algorithm = t, this.staticNodes = o, this.win = s, new Tt(this.win, this.step);
+    this.canvas = e, this.algorithm = t, this.staticNodes = o, this.win = s, new Ct(this.win, this.step);
   }
   static configure(e, t, o, s) {
     new oe(e, t, o, s);
   }
 }
-const Ct = () => {
+const Tt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, X = () => {
+}, Y = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
 }, pe = () => {
-  const r = X();
+  const r = Y();
   return r.style.pointerEvents = "none", r;
 };
 class Dt {
   constructor(e) {
-    i(this, "background", X());
-    i(this, "main", X());
+    i(this, "background", Y());
+    i(this, "main", Y());
     i(this, "overlayConnectablePorts", pe());
     i(this, "overlayDraggableEdges", pe());
-    i(this, "host", Ct());
+    i(this, "host", Tt());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const Y = (r) => () => r, we = Y(0), Nt = () => {
+const G = (r) => () => r, we = G(0), Nt = () => {
   let r = 0;
   return () => r++;
 }, Mt = (r, e) => {
   let t = we, o = we;
   const s = Nt();
-  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = Y(r)), typeof e == "number" && (o = Y(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = G(r)), typeof e == "number" && (o = G(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
@@ -3087,11 +3110,11 @@ const Y = (r) => () => r, we = Y(0), Nt = () => {
     }
   };
 }, Rt = (r) => {
-  var w, y, A, x, S, C;
+  var w, y, A, x, S, T;
   const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
   }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
   }), o = r.nodeDragVerifier ?? (() => !0), s = ((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 = (C = r.mouse) == null ? void 0 : C.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
+  }), 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 = (T = r.mouse) == null ? void 0 : T.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
   return {
     moveOnTop: n,
     moveEdgesOnTop: a,
@@ -3161,7 +3184,7 @@ const Y = (r) => () => r, we = Y(0), Nt = () => {
       });
   }
 }, ye = (r) => {
-  var y, A, x, S, C, P, R, V, ie, ne, ae, he;
+  var y, A, x, S, T, P, R, V, ie, ne, ae, he;
   const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let s;
   o !== void 0 ? Array.isArray(o) ? s = It(
@@ -3171,7 +3194,7 @@ const Y = (r) => () => r, we = Y(0), Nt = () => {
   ) : s = fe(o) : s = (D) => D.nextTransform;
   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 : (D) => D.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (D) => D.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
+  }), d = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (D) => D.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
@@ -3244,10 +3267,10 @@ const Y = (r) => () => r, we = Y(0), Nt = () => {
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
   };
-}, zt = (r) => ({
+}, kt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), kt = (r) => {
+}), zt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3714,15 +3737,18 @@ class Be {
     i(this, "sparsity");
     this.rand = e.rand, this.sparsity = e.sparsity;
   }
-  calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), o = e.getAllNodeIds(), s = Math.sqrt(o.length) * this.sparsity;
-    return o.forEach((n) => {
-      const a = e.getNode(n);
-      t.set(n, {
-        x: a.x ?? s * this.rand(),
-        y: a.y ?? s * this.rand()
+  calculateCoordinates(e, t) {
+    const o = /* @__PURE__ */ new Map(), s = e.getAllNodeIds(), n = Math.sqrt(s.length) * this.sparsity, { width: a, height: h } = t.getDimensions(), d = { x: a / 2, y: h / 2 }, c = t.createContentCoords(d), g = n / 2, l = {
+      x: c.x - g,
+      y: c.y - g
+    };
+    return s.forEach((u) => {
+      const w = e.getNode(u);
+      o.set(u, {
+        x: w.x ?? l.x + n * this.rand(),
+        y: w.y ?? l.y + n * this.rand()
       });
-    }), t;
+    }), o;
   }
 }
 class qt {
@@ -3751,12 +3777,15 @@ class qt {
       sparsity: e.edgeEquilibriumLength
     });
   }
-  calculateCoordinates(e) {
-    const t = this.fillerLayoutAlgorithm.calculateCoordinates(e);
-    for (let o = 0; o < this.maxIterations; o++) {
-      const s = new Fe(
+  calculateCoordinates(e, t) {
+    const o = this.fillerLayoutAlgorithm.calculateCoordinates(
+      e,
+      t
+    );
+    for (let s = 0; s < this.maxIterations; s++) {
+      const n = new Fe(
         e,
-        t,
+        o,
         {
           distanceVectorGenerator: this.distanceVectorGenerator,
           nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -3765,11 +3794,11 @@ class qt {
           edgeEquilibriumLength: this.edgeEquilibriumLength,
           edgeStiffness: this.edgeStiffness
         }
-      ), [n, a] = s.apply();
-      if (n < this.convergenceDelta || a < this.convergenceVelocity)
+      ), [a, h] = n.apply();
+      if (a < this.convergenceDelta || h < this.convergenceVelocity)
         break;
     }
-    return t;
+    return o;
   }
 }
 class Kt {
@@ -3797,10 +3826,13 @@ class Kt {
       sparsity: e.edgeEquilibriumLength
     });
   }
-  calculateNextCoordinates(e, t) {
-    const o = this.fillerLayoutAlgorithm.calculateCoordinates(e), s = new Fe(
+  calculateNextCoordinates(e, t, o) {
+    const s = this.fillerLayoutAlgorithm.calculateCoordinates(
       e,
-      o,
+      o
+    ), n = new Fe(
+      e,
+      s,
       {
         distanceVectorGenerator: this.distanceVectorGenerator,
         nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -3809,11 +3841,11 @@ class Kt {
         edgeEquilibriumLength: this.edgeEquilibriumLength,
         edgeStiffness: this.edgeStiffness
       }
-    ), [n, a] = s.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() : o;
+    ), [a, h] = n.apply();
+    return (a < this.convergenceDelta || h < this.convergenceVelocity) && !e.getAllNodeIds().some((c) => {
+      const g = e.getNode(c);
+      return g.x === null || g.y === null;
+    }) ? /* @__PURE__ */ new Map() : s;
   }
 }
 const Oe = (r) => {
@@ -3865,11 +3897,15 @@ const Oe = (r) => {
       });
     }
   }
-}, Zt = (r) => r instanceof G ? {
+}, Zt = (r) => r instanceof j ? {
   type: "manual",
   trigger: r
+} : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
+  type: "topologyChangeMacrotask"
+} : (r == null ? void 0 : r.type) === "topologyChangeTimeout" ? {
+  type: "topologyChangeMacrotask"
 } : {
-  type: "topologyChangeTimeout"
+  type: "topologyChangeMicrotask"
 }, Jt = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
@@ -3933,7 +3969,7 @@ class sr {
     i(this, "hasUserDraggableEdges", !1);
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
-    i(this, "boxRenderingTrigger", new G());
+    i(this, "boxRenderingTrigger", new j());
     i(this, "graphStore");
     i(this, "viewportStore");
     i(this, "graph");
@@ -4018,16 +4054,16 @@ class sr {
       t,
       o
     );
-    if (this.hasBackground && J.configure(
+    if (this.hasBackground && _.configure(
       s,
       Bt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && j.configure(s), this.hasDraggableNodes) {
+    ), this.hasNodeResizeReactiveEdges && q.configure(s), this.hasDraggableNodes) {
       let a = Rt(this.dragConfig);
       this.hasAnimatedLayout && (a = er(
         a,
         this.animationStaticNodes
-      )), Q.configure(
+      )), Z.configure(
         s,
         e.main,
         this.window,
@@ -4040,7 +4076,7 @@ class sr {
         o.edges.shapeFactory,
         o.ports.direction
       );
-      _.configure(
+      ee.configure(
         s,
         e.overlayConnectablePorts,
         this.viewportStore,
@@ -4053,7 +4089,7 @@ class sr {
         this.draggableEdgesConfig,
         s.graph
       );
-      ee.configure(
+      te.configure(
         s,
         e.overlayDraggableEdges,
         this.viewportStore,
@@ -4061,14 +4097,14 @@ class sr {
         a
       );
     }
-    this.virtualScrollConfig !== void 0 ? Z.configure(
+    this.virtualScrollConfig !== void 0 ? J.configure(
       s,
       e.main,
       this.window,
       ye(this.transformConfig),
       this.boxRenderingTrigger,
-      zt(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && k.configure(
+      kt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && H.configure(
       s,
       e.main,
       this.window,
@@ -4100,7 +4136,7 @@ class sr {
       t,
       this.graphStore,
       this.boxRenderingTrigger,
-      kt(this.virtualScrollConfig)
+      zt(this.virtualScrollConfig)
     )), new qe(t, this.graphStore);
   }
 }
@@ -4111,7 +4147,7 @@ export {
   b as CanvasError,
   M as ConnectionCategory,
   Ne as DirectEdgeShape,
-  G as EventSubject,
+  j as EventSubject,
   pt as HorizontalEdgeShape,
   vt as InteractiveEdgeError,
   Me as InteractiveEdgeShape,