@html-graph/html-graph 8.2.0 → 8.3.0

package/dist/html-graph.js

@@ -1,20 +1,20 @@
-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 o = (r, e, t) => ke(r, typeof e != "symbol" ? e + "" : e, t);
+var He = Object.defineProperty;
+var Xe = (r, e, t) => e in r ? He(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => Xe(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 Ye = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Xe = () => {
+}, Ge = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, Ye = (r) => {
+}, je = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
-class me {
+class Ae {
   constructor(e, t, s) {
-    o(this, "host", He());
-    o(this, "container", Xe());
+    o(this, "host", Ye());
+    o(this, "container", Ge());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     o(this, "applyTransform", () => {
@@ -25,7 +25,7 @@ class me {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ye(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    je(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -91,7 +91,7 @@ class me {
     };
   }
 }
-class Ge {
+class Ke {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -111,7 +111,7 @@ class Ge {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class je {
+class Qe {
   constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -135,7 +135,7 @@ class je {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ke(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -189,7 +189,7 @@ class je {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class Ke {
+class Ze {
   constructor(e, t) {
     o(this, "deferredNodes", /* @__PURE__ */ new Set());
     o(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -243,7 +243,7 @@ class Ke {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class j {
+class Q {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -260,7 +260,7 @@ class j {
   }
 }
 const x = () => {
-  const r = new j();
+  const r = new Q();
   return [r, r];
 };
 class X {
@@ -279,7 +279,7 @@ class X {
     this.counter = 0;
   }
 }
-class ve {
+class Ee {
   constructor(e, t, s, i, n, a) {
     o(this, "nodeIdGenerator", new X(
       (e) => this.graphStore.hasNode(e)
@@ -467,7 +467,7 @@ class ve {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.viewportStore.destroy(), this.destroyed = !0);
   }
 }
-class Qe {
+class qe {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -513,7 +513,7 @@ class A extends Error {
     o(this, "name", "CanvasError");
   }
 }
-class Ae {
+class xe {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -522,7 +522,7 @@ class Ae {
     o(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     o(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
     o(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new Qe());
+    o(this, "elementPorts", new qe());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -776,22 +776,22 @@ class Ae {
     this.portCycleEdges.get(s).delete(e), this.portCycleEdges.get(i).delete(e), this.portIncomingEdges.get(s).delete(e), this.portIncomingEdges.get(i).delete(e), this.portOutcomingEdges.get(s).delete(e), this.portOutcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const de = (r) => ({
+const le = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ce = {
+}), ge = {
   scale: 1,
   x: 0,
   y: 0
-}, le = (r, e) => ({
+}, ue = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class Ze {
+class Je {
   constructor(e) {
-    o(this, "viewportMatrix", ce);
-    o(this, "contentMatrix", ce);
+    o(this, "viewportMatrix", ge);
+    o(this, "contentMatrix", ge);
     o(this, "beforeUpdateEmitter");
     o(this, "onBeforeUpdated");
     o(this, "afterUpdateEmitter");
@@ -814,30 +814,30 @@ class Ze {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = de(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = le(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.beforeUpdateEmitter.emit(), this.viewportMatrix = de(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = le(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
   getDimensions() {
     const { width: e, height: t } = this.host.getBoundingClientRect();
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return le(this.viewportMatrix, e);
+    return ue(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return le(this.contentMatrix, e);
+    return ue(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
   }
 }
-class K {
+class Z {
   constructor(e) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
@@ -860,19 +860,19 @@ 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 Z(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const qe = (r, e, t) => {
+const _e = (r, e, t) => {
   const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= i && t <= i + a;
-}, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => qe(e, t, s) && Je(r, t, s), $ = (r, e) => {
+}, et = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => _e(e, t, s) && et(r, t, s), B = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, U = (r) => {
+}, $ = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -887,7 +887,7 @@ const qe = (r, e, t) => {
       }
     ]
   };
-}, _e = (r, e) => {
+}, tt = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const s = r.findPortIdsByElement(t)[0] ?? null;
@@ -906,21 +906,21 @@ const qe = (r, e, t) => {
     status: "notFound"
   };
 };
-function* Ee(r, e) {
+function* Se(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const s of t) {
     if (s.shadowRoot !== null) {
-      const i = Ee(s.shadowRoot, e);
+      const i = Se(s.shadowRoot, e);
       for (const n of i)
         yield n;
     }
     yield s;
   }
 }
-const xe = (r, e) => {
-  const t = Ee(document, e);
+const be = (r, e) => {
+  const t = Se(document, e);
   for (const s of t) {
-    const i = _e(r, s);
+    const i = tt(r, s);
     if (i.status === "portFound")
       return i.portId;
     if (i.status === "nodeEncountered")
@@ -929,7 +929,7 @@ const xe = (r, e) => {
   return null;
 };
 var N = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(N || {});
-const Se = (r, e) => ({
+const Pe = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), p = {
@@ -938,7 +938,7 @@ const Se = (r, e) => ({
 }, m = (r, e, t) => ({
   x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
   y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
-}), be = (r, e) => {
+}), Ne = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -958,7 +958,7 @@ const Se = (r, e) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class et {
+class rt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -983,7 +983,7 @@ class et {
     this.path = `${d}${h}${c}`;
   }
 }
-class tt {
+class st {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1038,21 +1038,21 @@ class tt {
     ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
   }
 }
-const Q = Object.freeze({
+const q = Object.freeze({
   edgeColor: "--edge-color"
-}), Pe = (r) => {
+}), Te = (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;
-}, Ne = (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(q.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;
-}, B = () => {
+  return e.setAttribute("stroke", `var(${q.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, U = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${Q.edgeColor})`), r;
-}, Te = () => {
+  return r.setAttribute("fill", `var(${q.edgeColor})`), r;
+}, De = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Ce = (r, e) => {
+}, Me = (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`;
 }, D = (r, e) => {
   const t = [];
@@ -1074,7 +1074,7 @@ const Q = Object.freeze({
   }
   return t.join(" ");
 };
-class rt {
+class ot {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1113,7 +1113,7 @@ class rt {
     );
   }
 }
-class st {
+class it {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1144,7 +1144,7 @@ class st {
     );
   }
 }
-class ot {
+class nt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1174,7 +1174,7 @@ class ot {
     this.path = D([s, a, h, i], this.params.roundness);
   }
 }
-class it {
+class at {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1213,7 +1213,7 @@ class it {
     );
   }
 }
-class Z {
+class J {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1233,7 +1233,7 @@ class Z {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${D(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class nt {
+class ht {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1254,7 +1254,7 @@ class nt {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
   }
 }
-class at {
+class dt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1290,7 +1290,7 @@ class at {
     };
   }
 }
-class ht {
+class ct {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1331,7 +1331,7 @@ class ht {
     );
   }
 }
-class dt {
+class lt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1394,30 +1394,30 @@ const f = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ge = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+}), pe = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
 class z {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", Te());
+    o(this, "group", De());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
     o(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Ne(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] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Te(e.color), this.svg.appendChild(this.group), this.line = Ce(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = U(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = U(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Ne(
       e.from,
       e.to
     );
-    Ce(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = ge(
+    Me(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = pe(
       e.from.direction,
       a,
       h
-    ), c = ge(
+    ), c = pe(
       e.to.direction,
       a,
       h
@@ -1453,7 +1453,7 @@ class z {
     });
   }
 }
-const ct = (r) => (e) => {
+const gt = (r) => (e) => {
   const s = [
     p,
     { x: e.arrowLength, y: r.radius },
@@ -1465,7 +1465,7 @@ const ct = (r) => (e) => {
     y: h.y + e.shift.y
   })), i = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
   return `${i} ${n} ${a} Z`;
-}, lt = (r) => (e) => {
+}, ut = (r) => (e) => {
   const t = r.radius, s = e.arrowLength, i = (s * s + 2 * s * t) / (2 * t), n = i + t, a = s + t - t * (s + t) / n, h = t * i / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
     (y) => m(y, e.direction, p)
   ).map((y) => ({
@@ -1473,7 +1473,7 @@ const ct = (r) => (e) => {
     y: y.y + e.shift.y
   })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
   return `${g} ${l} ${u} ${w}`;
-}, gt = (r) => (e) => {
+}, pt = (r) => (e) => {
   const t = r.smallRadius, s = r.radius, i = m(
     {
       x: e.arrowLength,
@@ -1499,22 +1499,22 @@ const ct = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return ct({
+      return gt({
         radius: r.radius ?? f.polygonArrowRadius
       });
     case "arc":
-      return lt({
+      return ut({
         radius: r.radius ?? f.circleArrowRadius
       });
     default:
-      return gt({
+      return pt({
         smallRadius: r.smallRadius ?? f.wedgeArrowSmallRadius,
         angle: r.angle ?? f.wedgeArrowAngle,
         radius: r.radius ?? f.wedgeArrowRadius
       });
   }
 };
-class ut {
+class wt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1531,7 +1531,7 @@ class ut {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new nt({
+    o(this, "createCyclePath", (e) => new ht({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1539,7 +1539,7 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new tt({
+    o(this, "createDetourPath", (e, t, s, i, n) => new st({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1552,7 +1552,7 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new et({
+    o(this, "createLinePath", (e, t, s) => new rt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1577,7 +1577,7 @@ class ut {
     this.pathShape.render(e);
   }
 }
-class pt {
+class yt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1593,7 +1593,7 @@ class pt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Z({
+    o(this, "createCyclePath", (e) => new J({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1602,7 +1602,7 @@ class pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new ht({
+    o(this, "createDetourPath", (e, t, s, i, n) => new ct({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1615,7 +1615,7 @@ class pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new rt({
+    o(this, "createLinePath", (e, t, s, i) => new ot({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1648,7 +1648,7 @@ class pt {
     this.pathShape.render(e);
   }
 }
-class wt {
+class ft {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1665,7 +1665,7 @@ class wt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Z({
+    o(this, "createCyclePath", (e) => new J({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1674,7 +1674,7 @@ class wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new st({
+    o(this, "createDetourPath", (e, t, s, i, n) => new it({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1688,7 +1688,7 @@ class wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new ot({
+    o(this, "createLinePath", (e, t, s) => new nt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1720,7 +1720,7 @@ class wt {
     this.pathShape.render(e);
   }
 }
-class yt {
+class mt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1736,7 +1736,7 @@ class yt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Z({
+    o(this, "createCyclePath", (e) => new J({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1745,7 +1745,7 @@ class yt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new dt({
+    o(this, "createDetourPath", (e, t, s, i, n) => new lt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1758,7 +1758,7 @@ class yt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new it({
+    o(this, "createLinePath", (e, t, s, i, n) => new at({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1791,10 +1791,10 @@ class yt {
     this.pathShape.render(e);
   }
 }
-class De {
+class Le {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", Te());
+    o(this, "group", De());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -1806,15 +1806,15 @@ class De {
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
     o(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = x(), 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 = Ne(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] = x(), 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 = Te(this.color), this.svg.appendChild(this.group), this.line = Ce(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = U(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = U(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = be(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Ne(
       e.from,
       e.to
     );
-    Ce(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: i, y: n }, c = new at({
+    Me(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: i, y: n }, c = new dt({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1865,40 +1865,40 @@ class De {
     });
   }
 }
-const ft = () => {
+const vt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, mt = (r) => {
+}, At = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, ue = (r) => {
+}, we = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class vt extends Error {
+class Et extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Me {
+class Re {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", ft());
+    o(this, "handle", vt());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Me)
-      throw new vt(
+    if (this.baseEdge = e, e instanceof Re)
+      throw new Et(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
     const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
-    this.interactiveLine = mt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = At(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = we(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = we(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
@@ -1923,7 +1923,7 @@ class dr {
     this.baseShape.render(e);
   }
 }
-class Le {
+class Ve {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -2019,7 +2019,7 @@ class Le {
     return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class Re {
+class Fe {
   constructor(e) {
     o(this, "onBeforeUpdated");
     o(this, "onAfterUpdated");
@@ -2042,21 +2042,21 @@ class Re {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const Ve = (r, e) => {
-  const t = new Ae(), s = new Le(t), i = new Re(e), n = new me(t, e, r), a = {
+const Ie = (r, e) => {
+  const t = new xe(), s = new Ve(t), i = new Fe(e), n = new Ae(t, e, r), a = {
     nodes: {
-      centerFn: Se,
+      centerFn: Pe,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new De(),
+      shapeFactory: () => new Le(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
   };
-  return new ve(
+  return new Ee(
     s,
     i,
     t,
@@ -2174,34 +2174,36 @@ class k {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class At {
+class xt {
   constructor(e, t, s) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = s;
   }
   apply() {
-    this.layoutAlgorithm.calculateCoordinates({
+    const e = this.layoutAlgorithm.calculateCoordinates({
       graph: this.canvas.graph,
       viewport: this.canvas.viewport
-    }).forEach((t, s) => {
-      this.params.staticNodeResolver(s) || this.canvas.updateNode(s, t);
     });
+    this.params.onBeforeApplied(), e.forEach((t, s) => {
+      this.params.staticNodeResolver(s) || this.canvas.updateNode(s, t);
+    }), this.params.onAfterApplied();
   }
 }
-class Et {
+class St {
   constructor(e, t, s) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = s;
   }
   apply(e) {
-    this.layoutAlgorithm.calculateNextCoordinates({
+    const t = this.layoutAlgorithm.calculateNextCoordinates({
       graph: this.canvas.graph,
       viewport: this.canvas.viewport,
       dt: e
-    }).forEach((s, i) => {
-      this.params.staticNodeResolver(i) || this.canvas.updateNode(i, s);
     });
+    this.params.onBeforeApplied(), t.forEach((s, i) => {
+      this.params.staticNodeResolver(i) || this.canvas.updateNode(i, s);
+    }), this.params.onAfterApplied();
   }
 }
-class q {
+class _ {
   constructor(e, t, s, i) {
     o(this, "grabbedNode", null);
     o(this, "maxNodePriority", 0);
@@ -2247,7 +2249,7 @@ class q {
         nodeId: i,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, $(this.element, this.params.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, B(this.element, this.params.dragCursor), this.moveNodeOnTop(i), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2324,7 +2326,7 @@ class q {
     this.canvas = e, this.element = t, this.window = s, this.params = i, 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, i) {
-    new q(e, t, s, i);
+    new _(e, t, s, i);
   }
   moveNode(e, t) {
     if (!this.graph.hasNode(e.nodeId))
@@ -2350,7 +2352,7 @@ class q {
     }
   }
   cancelMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, $(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, B(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2393,11 +2395,11 @@ class q {
     return e;
   }
 }
-const xt = (r, e, t) => ({
+const bt = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), St = (r, e, t, s) => ({
+}), Pt = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
@@ -2430,7 +2432,7 @@ class H {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || ($(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (B(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2513,7 +2515,7 @@ class H {
     new H(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = xt(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = bt(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
@@ -2522,7 +2524,7 @@ class H {
     this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = St(i, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = Pt(i, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: a,
@@ -2531,7 +2533,7 @@ class H {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    $(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    B(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2561,7 +2563,7 @@ class H {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
   }
 }
-class J {
+class ee {
   constructor(e, t, s, i, n, a) {
     o(this, "nodeHorizontal");
     o(this, "nodeVertical");
@@ -2616,7 +2618,7 @@ class J {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, s, i, n, a) {
-    new J(
+    new ee(
       e,
       t,
       s,
@@ -2646,24 +2648,24 @@ class J {
     });
   }
 }
-const bt = () => {
+const Nt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Pt = () => {
+}, Tt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Nt = () => {
+}, Ct = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class _ {
+class te {
   constructor(e, t, s) {
-    o(this, "svg", bt());
-    o(this, "patternRenderingRectangle", Pt());
-    o(this, "pattern", Nt());
+    o(this, "svg", Nt());
+    o(this, "patternRenderingRectangle", Tt());
+    o(this, "pattern", Ct());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2684,7 +2686,7 @@ class _ {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, s) {
-    new _(e, t, s);
+    new te(e, t, s);
   }
   updateVisibility() {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
@@ -2697,7 +2699,7 @@ class _ {
     this.pattern.setAttribute("width", `${s}`), this.pattern.setAttribute("height", `${i}`);
   }
 }
-class ee {
+class re {
   constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
@@ -2705,7 +2707,7 @@ class ee {
     o(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ve(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ie(
       this.overlayLayer,
       this.viewportStore
     ), k.configure(
@@ -2732,7 +2734,7 @@ class ee {
     );
   }
   static configure(e, t, s, i, n) {
-    new ee(
+    new re(
       e,
       t,
       s,
@@ -2760,7 +2762,7 @@ class ee {
     };
     this.isTargetDragging = s === "direct";
     const [w, y] = this.isTargetDragging ? [l, u] : [u, l];
-    this.overlayCanvas.addNode(U(w)), this.overlayCanvas.addNode(U(y)), this.overlayCanvas.addEdge({
+    this.overlayCanvas.addNode($(w)), this.overlayCanvas.addNode($(y)), this.overlayCanvas.addEdge({
       from: w.overlayNodeId,
       to: y.overlayNodeId,
       shape: this.params.edgeShapeFactory(N.EdgeId)
@@ -2770,7 +2772,7 @@ class ee {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = xe(this.canvas.graph, e), s = this.staticPortId;
+    const t = be(this.canvas.graph, e), s = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: s,
@@ -2792,7 +2794,7 @@ class ee {
     });
   }
 }
-class te {
+class se {
   constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
@@ -2801,7 +2803,7 @@ class te {
     o(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ve(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ie(
       this.overlayLayer,
       this.viewportStore
     ), k.configure(
@@ -2825,7 +2827,7 @@ class te {
     );
   }
   static configure(e, t, s, i, n) {
-    new te(
+    new se(
       e,
       t,
       s,
@@ -2865,7 +2867,7 @@ class te {
       portCoords: y,
       portDirection: d.direction
     }, [b, T] = this.isTargetDragging ? [E, S] : [S, E];
-    this.overlayCanvas.addNode(U(b)), this.overlayCanvas.addNode(U(T));
+    this.overlayCanvas.addNode($(b)), this.overlayCanvas.addNode($(T));
     const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(N.EdgeId) : i.shape;
     return this.overlayCanvas.addEdge({
       id: N.EdgeId,
@@ -2888,7 +2890,7 @@ class te {
     });
   }
   tryCreateConnection(e) {
-    const t = xe(this.canvas.graph, e);
+    const t = be(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(N.EdgeId), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -2921,14 +2923,14 @@ class te {
     }
   }
 }
-class re {
+class oe {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new re(e, t);
+    new oe(e, t);
   }
 }
 class O {
@@ -2958,14 +2960,16 @@ class O {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class Tt {
+class Dt {
   static configure(e, t) {
-    const s = t.applyOn, i = new At(e, t.algorithm, {
-      staticNodeResolver: t.staticNodeResolver
+    const s = t.applyOn, i = new xt(e, t.algorithm, {
+      staticNodeResolver: t.staticNodeResolver,
+      onBeforeApplied: t.onBeforeApplied,
+      onAfterApplied: t.onAfterApplied
     });
     switch (s.type) {
       case "manual": {
-        re.configure(
+        oe.configure(
           i,
           s.trigger
         );
@@ -2998,7 +3002,7 @@ class Tt {
     }
   }
 }
-class Ct {
+class Mt {
   constructor(e, t) {
     o(this, "previousTimeStamp");
     o(this, "step", (e) => {
@@ -3013,59 +3017,61 @@ class Ct {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class se {
+class ie {
   constructor(e, t, s) {
     o(this, "applier");
     o(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = s, this.applier = new Et(e, t.algorithm, {
-      staticNodeResolver: t.staticNodeResolver
-    }), new Ct(this.win, this.step);
+    this.win = s, this.applier = new St(e, t.algorithm, {
+      staticNodeResolver: t.staticNodeResolver,
+      onBeforeApplied: t.onBeforeApplied,
+      onAfterApplied: t.onAfterApplied
+    }), new Mt(this.win, this.step);
   }
   static configure(e, t, s) {
-    new se(e, t, s);
+    new ie(e, t, s);
   }
 }
-const Dt = () => {
+const Lt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, Y = () => {
+}, j = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, pe = () => {
-  const r = Y();
+}, ye = () => {
+  const r = j();
   return r.style.pointerEvents = "none", r;
 };
-class Mt {
+class Rt {
   constructor(e) {
-    o(this, "background", Y());
-    o(this, "main", Y());
-    o(this, "overlayConnectablePorts", pe());
-    o(this, "overlayDraggableEdges", pe());
-    o(this, "host", Dt());
+    o(this, "background", j());
+    o(this, "main", j());
+    o(this, "overlayConnectablePorts", ye());
+    o(this, "overlayDraggableEdges", ye());
+    o(this, "host", Lt());
     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 G = (r) => () => r, we = G(0), Lt = () => {
+const K = (r) => () => r, fe = K(0), Vt = () => {
   let r = 0;
   return () => r++;
-}, Rt = (r, e) => {
-  let t = we, s = we;
-  const i = Lt();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = G(r)), typeof e == "number" && (s = G(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+}, Ft = (r, e) => {
+  let t = fe, s = fe;
+  const i = Vt();
+  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = K(r)), typeof e == "number" && (s = K(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
-}, oe = (r) => {
+}, ne = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new wt({
+      return () => new ft({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3079,7 +3085,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new pt({
+      return () => new yt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3092,7 +3098,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new yt({
+      return () => new mt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3105,7 +3111,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new De({
+      return () => new Le({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3116,7 +3122,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new ut({
+      return () => new wt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3130,26 +3136,26 @@ const G = (r) => () => r, we = G(0), Lt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, Vt = (r) => {
+}, It = (r) => {
   var t, s, i, n, a;
-  const e = Rt(
+  const e = Ft(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? Se,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? Pe,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: oe(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: ne(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Ft = (r) => {
+}, Bt = (r) => {
   var w, y, E, S, b, T;
   const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
   }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
@@ -3167,7 +3173,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     nodeDragVerifier: s,
     onNodeDragFinished: i
   };
-}, It = (r) => {
+}, $t = (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, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
@@ -3177,7 +3183,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     const g = n.canvasHeight * n.prevTransform.scale, l = i - g;
     return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, $t = (r) => {
+}, Ut = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -3198,7 +3204,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
       y: g
     };
   };
-}, Ut = (r) => (e) => r.reduce(
+}, Ot = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3206,32 +3212,32 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ye = (r) => {
+), me = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return $t({
+      return Ut({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return It({
+      return $t({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, fe = (r) => {
-  var y, E, S, b, T, P, R, V, ie, ne, ae, he;
+}, ve = (r) => {
+  var y, E, S, b, T, P, R, V, ae, he, de, ce;
   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 i;
-  s !== void 0 ? Array.isArray(s) ? i = Ut(
+  s !== void 0 ? Array.isArray(s) ? i = Ot(
     s.map(
-      (C) => ye(C)
+      (C) => me(C)
     )
-  ) : i = ye(s) : i = (C) => C.nextTransform;
+  ) : i = me(s) : i = (C) => C.nextTransform;
   const n = ((E = r == null ? void 0 : r.shift) == null ? void 0 : E.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
   }), h = ((b = r == null ? void 0 : r.events) == null ? void 0 : b.onTransformChange) ?? (() => {
   }), d = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseDownEventVerifier, c = d !== void 0 ? d : (C) => C.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (C) => C.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
@@ -3239,7 +3245,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((ie = r == null ? void 0 : r.events) == null ? void 0 : ie.onTransformFinished) ?? (() => {
+    onTransformFinished: ((ae = r == null ? void 0 : r.events) == null ? void 0 : ae.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
@@ -3248,30 +3254,30 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l,
     mouseWheelEventVerifier: w,
-    scaleWheelFinishTimeout: ((ne = r == null ? void 0 : r.scale) == null ? void 0 : ne.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((ae = r == null ? void 0 : r.events) == null ? void 0 : ae.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((he = r == null ? void 0 : r.scale) == null ? void 0 : he.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((de = r == null ? void 0 : r.events) == null ? void 0 : de.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((he = r == null ? void 0 : r.events) == null ? void 0 : he.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((ce = r == null ? void 0 : r.events) == null ? void 0 : ce.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Bt = (r, e) => {
+}, Wt = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, Ot = (r) => r instanceof SVGElement ? r : Bt(
+}, zt = (r) => r instanceof SVGElement ? r : Wt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), Wt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = Ot(r.renderer ?? {});
+), kt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = zt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, zt = (r, e, t) => {
+}, Ht = (r, e, t) => {
   var c, g, l;
   const s = () => "direct", i = (u) => u, n = (u) => u.button === 0, a = () => {
   }, h = () => {
@@ -3286,9 +3292,9 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((l = r.events) == null ? void 0 : l.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? oe(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? ne(r.edgeShape) : e
   };
-}, kt = (r, e) => {
+}, Xt = (r, e) => {
   var c, g, l;
   const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, i = (u) => u.button === 0, n = (u) => {
     const w = e.getPortAdjacentEdgeIds(u);
@@ -3302,15 +3308,15 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? oe(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ne(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
   };
-}, Ht = (r) => ({
+}, Yt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Xt = (r) => {
+}), Gt = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3319,7 +3325,7 @@ const G = (r) => () => r, we = G(0), Lt = () => {
     })
   };
 };
-class Yt extends Error {
+class jt extends Error {
   constructor() {
     super(...arguments);
     o(this, "name", "CanvasBuilderError");
@@ -3340,7 +3346,7 @@ const v = Object.freeze({
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
 });
-class Fe {
+class Be {
   constructor(e, t, s) {
     o(this, "dt");
     o(this, "nodeMass");
@@ -3378,7 +3384,7 @@ class Fe {
     });
   }
 }
-class Ie {
+class $e {
   constructor(e) {
     o(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3397,13 +3403,13 @@ class Ie {
     return { ex: h, ey: d, d: a };
   }
 }
-const $e = (r) => {
+const Ue = (r) => {
   if (r.distance === 0)
     return r.maxForce;
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
   return Math.min(e, r.maxForce);
 };
-class Gt {
+class Kt {
   constructor(e) {
     o(this, "nodeCharge");
     o(this, "distanceVectorGenerator");
@@ -3418,7 +3424,7 @@ class Gt {
         const d = s[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
           c,
           g
-        ), u = $e({
+        ), u = Ue({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
@@ -3430,7 +3436,7 @@ class Gt {
     }
   }
 }
-const jt = (r) => {
+const Qt = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -3448,7 +3454,7 @@ const jt = (r) => {
     radius: h / 2
   };
 };
-class Kt {
+class Zt {
   constructor(e) {
     o(this, "root");
     o(this, "leaves", /* @__PURE__ */ new Map());
@@ -3605,7 +3611,7 @@ class Kt {
     }), { x: t / e.size, y: s / e.size };
   }
 }
-class Qt {
+class qt {
   constructor(e) {
     o(this, "areaRadiusThreshold");
     o(this, "nodeMass");
@@ -3617,7 +3623,7 @@ class Qt {
     this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
   }
   apply(e, t) {
-    const s = jt(e), i = new Kt({
+    const s = Qt(e), i = new Zt({
       box: s,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -3732,7 +3738,7 @@ class Qt {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), s = $e({
+    ), s = Ue({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -3767,7 +3773,7 @@ class Qt {
     }
   }
 }
-const Ue = (r) => r.theta !== 0 ? new Qt({
+const Oe = (r) => r.theta !== 0 ? new qt({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -3775,13 +3781,13 @@ const Ue = (r) => r.theta !== 0 ? new Qt({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new Gt({
+}) : new Kt({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class Be {
+class We {
   constructor(e) {
     o(this, "rand");
     o(this, "sparsity");
@@ -3801,7 +3807,7 @@ class Be {
     }), i;
   }
 }
-class Zt {
+class Jt {
   constructor(e) {
     o(this, "distanceVectorGenerator");
     o(this, "nodeForcesApplicationStrategy");
@@ -3812,7 +3818,7 @@ class Zt {
     o(this, "edgeEquilibriumLength");
     o(this, "edgeStiffness");
     o(this, "convergenceVelocity");
-    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
+    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new $e(e.rand), this.nodeForcesApplicationStrategy = Oe({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -3820,7 +3826,7 @@ class Zt {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Be({
+    }), this.fillerLayoutAlgorithm = new We({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -3830,7 +3836,7 @@ class Zt {
       graph: t,
       viewport: s
     });
-    for (let n = 0; n < this.maxIterations && !(new Fe(
+    for (let n = 0; n < this.maxIterations && !(new Be(
       t,
       i,
       {
@@ -3846,7 +3852,7 @@ class Zt {
     return i;
   }
 }
-class qt {
+class _t {
   constructor(e) {
     o(this, "distanceVectorGenerator");
     o(this, "nodeForcesApplicationStrategy");
@@ -3856,7 +3862,7 @@ class qt {
     o(this, "edgeEquilibriumLength");
     o(this, "edgeStiffness");
     o(this, "fillerLayoutAlgorithm");
-    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({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new $e(e.rand), this.nodeForcesApplicationStrategy = Oe({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -3864,7 +3870,7 @@ class qt {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Be({
+    }), this.fillerLayoutAlgorithm = new We({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -3874,7 +3880,7 @@ class qt {
       graph: t,
       viewport: s
     });
-    return new Fe(
+    return new Be(
       t,
       n,
       {
@@ -3891,23 +3897,23 @@ class qt {
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const Oe = (r) => {
+const ze = (r) => {
   let e = 1779033703, t = 3144134277, s = 1013904242, i = 2773480762;
   for (let n = 0, a; n < r.length; n++)
     a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = s ^ Math.imul(t ^ a, 2869860233), s = i ^ Math.imul(s ^ a, 951274213), i = e ^ Math.imul(i ^ a, 2716044179);
   return e = Math.imul(s ^ e >>> 18, 597399067), t = Math.imul(i ^ t >>> 22, 2869860233), s = Math.imul(e ^ s >>> 17, 951274213), i = Math.imul(t ^ i >>> 19, 2716044179), e ^= t ^ s ^ i, t ^= e, s ^= e, i ^= e, [e >>> 0, t >>> 0, s >>> 0, i >>> 0];
-}, We = (r, e, t, s) => function() {
+}, ke = (r, e, t, s) => function() {
   r |= 0, e |= 0, t |= 0, s |= 0;
   const i = (r + e | 0) + s | 0;
   return s = s + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + i | 0, (i >>> 0) / 4294967296;
-}, Jt = (r) => {
+}, er = (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), i = We(s[0], s[1], s[2], s[3]);
-      return new qt({
+      const s = ze((r == null ? void 0 : r.seed) ?? v.seed), i = ke(s[0], s[1], s[2], s[3]);
+      return new _t({
         rand: i,
         maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
         nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? v.nodeCharge,
@@ -3922,26 +3928,35 @@ const Oe = (r) => {
       });
     }
   }
-}, _t = {
-  staticNodeResolver: () => !1
-}, er = (r) => ({
-  algorithm: Jt((r == null ? void 0 : r.algorithm) ?? {}),
-  staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? _t.staticNodeResolver
-}), tr = (r) => r instanceof j ? {
+}, Y = {
+  staticNodeResolver: () => !1,
+  onBeforeApplied: () => {
+  },
+  onAfterApplied: () => {
+  }
+}, tr = (r) => {
+  var t, s;
+  return {
+    algorithm: er((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Y.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? Y.onBeforeApplied,
+    onAfterApplied: ((s = r == null ? void 0 : r.events) == null ? void 0 : s.onAfterApplied) ?? Y.onAfterApplied
+  };
+}, rr = (r) => r instanceof Q ? {
   type: "manual",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeMacrotask"
 } : {
   type: "topologyChangeMicrotask"
-}, rr = (r) => {
+}, sr = (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), i = We(s[0], s[1], s[2], s[3]);
-      return new Zt({
+      const s = ze((r == null ? void 0 : r.seed) ?? v.seed), i = ke(s[0], s[1], s[2], s[3]);
+      return new Jt({
         dtSec: (r == null ? void 0 : r.dtSec) ?? v.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? v.maxIterations,
         rand: i,
@@ -3957,13 +3972,22 @@ const Oe = (r) => {
       });
     }
   }
-}, sr = {
-  staticNodeResolver: () => !1
-}, or = (r) => ({
-  algorithm: rr(r == null ? void 0 : r.algorithm),
-  applyOn: tr(r == null ? void 0 : r.applyOn),
-  staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? sr.staticNodeResolver
-}), ir = (r, e) => ({
+}, G = {
+  staticNodeResolver: () => !1,
+  onBeforeApplied: () => {
+  },
+  onAfterApplied: () => {
+  }
+}, or = (r) => {
+  var e, t;
+  return {
+    algorithm: sr(r == null ? void 0 : r.algorithm),
+    applyOn: rr(r == null ? void 0 : r.applyOn),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? G.staticNodeResolver,
+    onBeforeApplied: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onBeforeApplied) ?? G.onBeforeApplied,
+    onAfterApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onAfterApplied) ?? G.onAfterApplied
+  };
+}, ir = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4001,14 +4025,14 @@ class cr {
     o(this, "hasUserDraggableEdges", !1);
     o(this, "hasAnimatedLayout", !1);
     o(this, "hasLayout", !1);
-    o(this, "boxRenderingTrigger", new j());
+    o(this, "boxRenderingTrigger", new Q());
     o(this, "graphStore");
     o(this, "viewportStore");
     o(this, "graph");
     o(this, "viewport");
     o(this, "window", window);
     o(this, "animationStaticNodes", /* @__PURE__ */ new Set());
-    this.element = e, this.viewportStore = new Ze(this.element), this.viewport = new Re(this.viewportStore), this.graphStore = new Ae(), this.graph = new Le(this.graphStore);
+    this.element = e, this.viewportStore = new Je(this.element), this.viewport = new Fe(this.viewportStore), this.graphStore = new xe(), this.graph = new Ve(this.graphStore);
   }
   /**
    * specifies default values for graph entities
@@ -4076,9 +4100,9 @@ class cr {
    */
   build() {
     if (this.used)
-      throw new Yt("CanvasBuilder is a single use object");
+      throw new jt("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Mt(this.element), t = this.createHtmlView(e.main), s = Vt(this.canvasDefaults), i = new ve(
+    const e = new Rt(this.element), t = this.createHtmlView(e.main), s = It(this.canvasDefaults), i = new Ee(
       this.graph,
       this.viewport,
       this.graphStore,
@@ -4086,16 +4110,16 @@ class cr {
       t,
       s
     );
-    if (this.hasBackground && _.configure(
+    if (this.hasBackground && te.configure(
       i,
-      Wt(this.backgroundConfig),
+      kt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && K.configure(i), this.hasDraggableNodes) {
-      let a = Ft(this.dragConfig);
+    ), this.hasNodeResizeReactiveEdges && Z.configure(i), this.hasDraggableNodes) {
+      let a = Bt(this.dragConfig);
       this.hasAnimatedLayout && (a = ir(
         a,
         this.animationStaticNodes
-      )), q.configure(
+      )), _.configure(
         i,
         e.main,
         this.window,
@@ -4103,12 +4127,12 @@ class cr {
       );
     }
     if (this.hasUserConnectablePorts) {
-      const a = zt(
+      const a = Ht(
         this.connectablePortsConfig,
         s.edges.shapeFactory,
         s.ports.direction
       );
-      ee.configure(
+      re.configure(
         i,
         e.overlayConnectablePorts,
         this.viewportStore,
@@ -4117,11 +4141,11 @@ class cr {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const a = kt(
+      const a = Xt(
         this.draggableEdgesConfig,
         i.graph
       );
-      te.configure(
+      se.configure(
         i,
         e.overlayDraggableEdges,
         this.viewportStore,
@@ -4129,23 +4153,23 @@ class cr {
         a
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? J.configure(
+    if (this.virtualScrollConfig !== void 0 ? ee.configure(
       i,
       e.main,
       this.window,
-      fe(this.transformConfig),
+      ve(this.transformConfig),
       this.boxRenderingTrigger,
-      Ht(this.virtualScrollConfig)
+      Yt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && H.configure(
       i,
       e.main,
       this.window,
-      fe(this.transformConfig)
-    ), this.hasLayout && Tt.configure(
+      ve(this.transformConfig)
+    ), this.hasLayout && Dt.configure(
       i,
       or(this.layoutConfig)
     ), this.hasAnimatedLayout) {
-      let a = er(
+      let a = tr(
         this.animatedLayoutConfig
       );
       this.hasDraggableNodes && (nr(
@@ -4154,7 +4178,7 @@ class cr {
       ), a = ar(
         a,
         this.animationStaticNodes
-      )), se.configure(i, a, this.window);
+      )), ie.configure(i, a, this.window);
     }
     const n = () => {
       e.destroy(), i.onBeforeDestroy.unsubscribe(n);
@@ -4162,31 +4186,31 @@ class cr {
     return i.onBeforeDestroy.subscribe(n), i;
   }
   createHtmlView(e) {
-    let t = new me(
+    let t = new Ae(
       this.graphStore,
       this.viewportStore,
       e
     );
-    return this.virtualScrollConfig !== void 0 && (t = new je(
+    return this.virtualScrollConfig !== void 0 && (t = new Qe(
       t,
       this.graphStore,
       this.boxRenderingTrigger,
-      Xt(this.virtualScrollConfig)
-    )), new Ke(t, this.graphStore);
+      Gt(this.virtualScrollConfig)
+    )), new Ze(t, this.graphStore);
   }
 }
 export {
-  ut as BezierEdgeShape,
+  wt as BezierEdgeShape,
   cr as CanvasBuilder,
-  Yt as CanvasBuilderError,
+  jt as CanvasBuilderError,
   A as CanvasError,
   M as ConnectionCategory,
-  De as DirectEdgeShape,
-  j as EventSubject,
-  pt as HorizontalEdgeShape,
-  vt as InteractiveEdgeError,
-  Me as InteractiveEdgeShape,
+  Le as DirectEdgeShape,
+  Q as EventSubject,
+  yt as HorizontalEdgeShape,
+  Et as InteractiveEdgeError,
+  Re as InteractiveEdgeShape,
   dr as MidpointEdgeShape,
-  wt as StraightEdgeShape,
-  yt as VerticalEdgeShape
+  ft as StraightEdgeShape,
+  mt as VerticalEdgeShape
 };