@html-graph/html-graph 8.9.0 → 8.10.0

package/dist/html-graph.js

@@ -52,7 +52,7 @@ class Ee {
     this.clear(), this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: o, height: s } = t.element.getBoundingClientRect(), a = this.viewportStore.getViewportMatrix().scale, { payload: n } = t, h = n.centerFn(o, s), d = n.x - a * h.x, c = n.y - a * h.y;
+    const t = this.graphStore.getNode(e), { width: o, height: s } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(o, s), d = a.x - n * h.x, c = a.y - n * h.y;
     t.element.style.transform = `translate(${d}px, ${c}px)`;
   }
   updateNodePriority(e) {
@@ -66,27 +66,27 @@ class Ee {
     this.edgeIdToElementMap.set(e, s), this.container.appendChild(s);
   }
   renderEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), s = this.graphStore.getPort(t.to), a = o.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix().scale, c = this.createEdgeRenderPort(
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), s = this.graphStore.getPort(t.to), n = o.element.getBoundingClientRect(), a = s.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix().scale, c = this.createEdgeRenderPort(
       o,
-      a,
+      n,
       h,
       d
-    ), u = this.createEdgeRenderPort(s, n, h, d);
-    let g = L.Line;
-    o.element === s.element ? g = L.PortCycle : o.nodeId === s.nodeId && (g = L.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
+    ), g = this.createEdgeRenderPort(s, a, h, d);
+    let u = L.Line;
+    o.element === s.element ? u = L.PortCycle : o.nodeId === s.nodeId && (u = L.NodeCycle), t.payload.shape.render({ from: c, to: g, category: u });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
     t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
   }
   createEdgeRenderPort(e, t, o, s) {
-    const a = this.viewportStore.createContentCoords({
+    const n = this.viewportStore.createContentCoords({
       x: t.left - o.left,
       y: t.top - o.top
     });
     return {
-      x: a.x,
-      y: a.y,
+      x: n.x,
+      y: n.y,
       width: t.width * s,
       height: t.height * s,
       direction: e.payload.direction
@@ -109,8 +109,8 @@ class et {
     return o >= this.xFrom && o <= this.xTo && s >= this.yFrom && s <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, a = this.graphStore.getNode(o).payload, n = this.graphStore.getNode(s).payload, h = Math.min(a.x, n.x), d = Math.max(a.x, n.x), c = Math.min(a.y, n.y), u = Math.max(a.y, n.y);
-    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && u >= this.yFrom;
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
 class tt {
@@ -120,21 +120,21 @@ class tt {
     i(this, "renderingBox");
     i(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
-      const t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
-      this.graphStore.getAllNodeIds().forEach((n) => {
-        const h = this.renderingBox.hasNode(n), d = this.attachedNodes.has(n);
-        h && !d ? t.add(n) : !h && d && o.add(n);
-      }), this.graphStore.getAllEdgeIds().forEach((n) => {
-        const h = this.renderingBox.hasEdge(n), d = this.attachedEdges.has(n), c = this.graphStore.getEdge(n), u = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(u) || (t.add(u), o.delete(u)), this.renderingBox.hasNode(g) || (t.add(g), o.delete(g))), h && !d ? s.add(n) : !h && d && a.add(n);
-      }), a.forEach((n) => {
-        this.handleDetachEdge(n);
-      }), o.forEach((n) => {
-        this.handleDetachNode(n);
-      }), t.forEach((n) => {
-        this.attachedNodes.has(n) || this.handleAttachNode(n);
-      }), s.forEach((n) => {
-        this.handleAttachEdge(n);
+      const t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+      this.graphStore.getAllNodeIds().forEach((a) => {
+        const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
+        h && !d ? t.add(a) : !h && d && o.add(a);
+      }), this.graphStore.getAllEdgeIds().forEach((a) => {
+        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), g = this.graphStore.getPort(c.from).nodeId, u = this.graphStore.getPort(c.to).nodeId;
+        h && (this.renderingBox.hasNode(g) || (t.add(g), o.delete(g)), this.renderingBox.hasNode(u) || (t.add(u), o.delete(u))), h && !d ? s.add(a) : !h && d && n.add(a);
+      }), n.forEach((a) => {
+        this.handleDetachEdge(a);
+      }), o.forEach((a) => {
+        this.handleDetachNode(a);
+      }), t.forEach((a) => {
+        this.attachedNodes.has(a) || this.handleAttachNode(a);
+      }), s.forEach((a) => {
+        this.handleAttachEdge(a);
       });
     });
     this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new et(this.graphStore), this.trigger.subscribe(this.updateViewport);
@@ -556,13 +556,13 @@ class be {
         throw new S(
           b.updateNonexistentEdgeTarget(e, t.to)
         );
-      const s = this.getEdge(e), a = s.payload;
+      const s = this.getEdge(e), n = s.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
         id: e,
         from: t.from ?? s.from,
         to: t.to ?? s.to,
-        shape: a.shape,
-        priority: a.priority
+        shape: n.shape,
+        priority: n.priority
       });
     }
     const o = this.edges.get(e);
@@ -613,47 +613,47 @@ class be {
   getNodeIncomingEdgeIds(e) {
     const t = Array.from(this.getNode(e).ports.keys()), o = [];
     return t.forEach((s) => {
-      this.getPortIncomingEdgeIds(s).filter((a) => {
-        const n = this.getEdge(a);
-        return this.getPort(n.from).nodeId !== e;
-      }).forEach((a) => {
-        o.push(a);
+      this.getPortIncomingEdgeIds(s).filter((n) => {
+        const a = this.getEdge(n);
+        return this.getPort(a.from).nodeId !== e;
+      }).forEach((n) => {
+        o.push(n);
       });
     }), o;
   }
   getNodeOutgoingEdgeIds(e) {
     const t = Array.from(this.getNode(e).ports.keys()), o = [];
     return t.forEach((s) => {
-      this.getPortOutgoingEdgeIds(s).filter((a) => {
-        const n = this.getEdge(a);
-        return this.getPort(n.to).nodeId !== e;
-      }).forEach((a) => {
-        o.push(a);
+      this.getPortOutgoingEdgeIds(s).filter((n) => {
+        const a = this.getEdge(n);
+        return this.getPort(a.to).nodeId !== e;
+      }).forEach((n) => {
+        o.push(n);
       });
     }), o;
   }
   getNodeCycleEdgeIds(e) {
     const t = Array.from(this.getNode(e).ports.keys()), o = [];
     return t.forEach((s) => {
-      this.getPortCycleEdgeIds(s).forEach((a) => {
-        o.push(a);
-      }), this.getPortIncomingEdgeIds(s).filter((a) => {
-        const n = this.getEdge(a);
-        return this.getPort(n.to).nodeId === e;
-      }).forEach((a) => {
-        o.push(a);
+      this.getPortCycleEdgeIds(s).forEach((n) => {
+        o.push(n);
+      }), this.getPortIncomingEdgeIds(s).filter((n) => {
+        const a = this.getEdge(n);
+        return this.getPort(a.to).nodeId === e;
+      }).forEach((n) => {
+        o.push(n);
       });
     }), o;
   }
   getNodeAdjacentEdgeIds(e) {
     const t = Array.from(this.getNode(e).ports.keys()), o = [];
     return t.forEach((s) => {
-      this.getPortIncomingEdgeIds(s).forEach((a) => {
-        o.push(a);
-      }), this.getPortOutgoingEdgeIds(s).forEach((a) => {
-        o.push(a);
-      }), this.getPortCycleEdgeIds(s).forEach((a) => {
-        o.push(a);
+      this.getPortIncomingEdgeIds(s).forEach((n) => {
+        o.push(n);
+      }), this.getPortOutgoingEdgeIds(s).forEach((n) => {
+        o.push(n);
+      }), this.getPortCycleEdgeIds(s).forEach((n) => {
+        o.push(n);
       });
     }), o;
   }
@@ -767,8 +767,8 @@ class q {
   }
 }
 const it = (r, e, t) => {
-  const { x: o, y: s, width: a, height: n } = r.getBoundingClientRect();
-  return e >= o && e <= o + a && t >= s && t <= s + n;
+  const { x: o, y: s, width: n, height: a } = r.getBoundingClientRect();
+  return e >= o && e <= o + n && t >= s && t <= s + a;
 }, nt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, F = (r, e, t, o) => it(e, t, o) && nt(r, t, o), k = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, H = (r) => {
@@ -810,8 +810,8 @@ function* Ne(r, e) {
   for (const o of t) {
     if (o.shadowRoot !== null) {
       const s = Ne(o.shadowRoot, e);
-      for (const a of s)
-        yield a;
+      for (const n of s)
+        yield n;
     }
     yield o;
   }
@@ -841,14 +841,14 @@ const Ce = (r, e) => ({
   }, s = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, a = Math.min(o.x, s.x) - t, n = Math.min(o.y, s.y) - t, h = 2 * t, d = Math.abs(s.x - o.x) + h, c = Math.abs(s.y - o.y) + h;
+  }, n = Math.min(o.x, s.x) - t, a = Math.min(o.y, s.y) - t, h = 2 * t, d = Math.abs(s.x - o.x) + h, c = Math.abs(s.y - o.y) + h;
   return {
-    x: a,
-    y: n,
+    x: n,
+    y: a,
     width: d,
     height: c,
-    from: { x: o.x - a, y: o.y - n },
-    to: { x: s.x - a, y: s.y - n }
+    from: { x: o.x - n, y: o.y - a },
+    to: { x: s.x - n, y: s.y - a }
   };
 };
 class ht {
@@ -859,27 +859,27 @@ class ht {
       from: t,
       to: o,
       arrowLength: s,
-      fromDir: a,
-      toDir: n,
+      fromDir: n,
+      toDir: a,
       curvature: h,
       hasSourceArrow: d,
       hasTargetArrow: c
-    } = e, u = (t.x + o.x) / 2, g = (t.y + o.y) / 2;
-    this.midpoint = { x: u, y: g };
+    } = e, g = (t.x + o.x) / 2, u = (t.y + o.y) / 2;
+    this.midpoint = { x: g, y: u };
     const l = x(
       { x: t.x + s, y: t.y },
-      a,
+      n,
       t
     ), p = x(
       { x: o.x - s, y: o.y },
-      n,
+      a,
       o
     ), y = {
-      x: l.x + a.x * h,
-      y: l.y + a.y * h
+      x: l.x + n.x * h,
+      y: l.y + n.y * h
     }, w = {
-      x: p.x - n.x * h,
-      y: p.y - n.y * h
+      x: p.x - a.x * h,
+      y: p.y - a.y * h
     }, f = `M ${l.x} ${l.y} C ${y.x} ${y.y}, ${w.x} ${w.y}, ${p.x} ${p.y}`, m = d ? "" : `M ${t.x} ${t.y} L ${l.x} ${l.y} `, A = c ? "" : ` M ${p.x} ${p.y} L ${o.x} ${o.y}`;
     this.path = `${m}${f}${A}`;
   }
@@ -892,34 +892,34 @@ class dt {
       hasSourceArrow: t,
       hasTargetArrow: o,
       curvature: s,
-      fromDir: a,
-      toDir: n,
+      fromDir: n,
+      toDir: a,
       detourDir: h,
       from: d,
       to: c,
-      arrowLength: u,
-      detourDistance: g
+      arrowLength: g,
+      detourDistance: u
     } = e, l = t ? x(
-      { x: d.x + u, y: d.y },
-      a,
+      { x: d.x + g, y: d.y },
+      n,
       d
     ) : d, p = o ? x(
       {
-        x: c.x - u,
+        x: c.x - g,
         y: c.y
       },
-      n,
-      c
-    ) : c, y = Math.cos(h) * g, w = Math.sin(h) * g, f = x(
-      { x: d.x + u, y: d.y },
       a,
+      c
+    ) : c, y = Math.cos(h) * u, w = Math.sin(h) * u, f = x(
+      { x: d.x + g, y: d.y },
+      n,
       d
     ), m = {
       x: f.x + y,
       y: f.y + w
     }, A = x(
-      { x: c.x - u, y: c.y },
-      n,
+      { x: c.x - g, y: c.y },
+      a,
       c
     ), N = {
       x: A.x + y,
@@ -928,12 +928,12 @@ class dt {
       x: (m.x + N.x) / 2,
       y: (m.y + N.y) / 2
     }, T = {
-      x: f.x + s * a.x,
-      y: f.y + s * a.y
-    }, V = {
-      x: A.x - s * n.x,
-      y: A.y - s * n.y
+      x: f.x + s * n.x,
+      y: f.y + s * n.y
     }, I = {
+      x: A.x - s * a.x,
+      y: A.y - s * a.y
+    }, V = {
       x: f.x + y,
       y: f.y + w
     }, $ = {
@@ -943,8 +943,8 @@ class dt {
     this.path = [
       `M ${l.x} ${l.y}`,
       `L ${f.x} ${f.y}`,
-      `C ${T.x} ${T.y} ${I.x} ${I.y} ${C.x} ${C.y}`,
-      `C ${$.x} ${$.y} ${V.x} ${V.y} ${A.x} ${A.y}`,
+      `C ${T.x} ${T.y} ${V.x} ${V.y} ${C.x} ${C.y}`,
+      `C ${$.x} ${$.y} ${I.x} ${I.y} ${A.x} ${A.y}`,
       `L ${p.x} ${p.y}`
     ].join(" "), this.midpoint = C;
   }
@@ -966,15 +966,15 @@ const ee = Object.freeze({
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const o = r.length - 1;
-    let s = 0, a = 0, n = 0;
+    let s = 0, n = 0, a = 0;
     r.forEach((h, d) => {
-      let c = 0, u = 0, g = 0;
+      let c = 0, g = 0, u = 0;
       const l = d > 0, p = d < o, y = l && p;
-      if (l && (c = -s, u = -a, g = n), p) {
+      if (l && (c = -s, g = -n, u = a), p) {
         const T = r[d + 1];
-        s = T.x - h.x, a = T.y - h.y, n = Math.sqrt(s * s + a * a);
+        s = T.x - h.x, n = T.y - h.y, a = Math.sqrt(s * s + n * n);
       }
-      const f = n !== 0 ? Math.min((y ? e : 0) / n, d < o - 1 ? 0.5 : 1) : 0, m = y ? { x: h.x + s * f, y: h.y + a * f } : h, N = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, C = y ? { x: h.x + c * N, y: h.y + u * N } : h;
+      const f = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, m = y ? { x: h.x + s * f, y: h.y + n * f } : h, N = u !== 0 ? Math.min((y ? e : 0) / u, d > 1 ? 0.5 : 1) : 0, C = y ? { x: h.x + c * N, y: h.y + g * N } : h;
       d > 0 && t.push(`L ${C.x} ${C.y}`), y && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${m.x} ${m.y}`
       );
@@ -984,7 +984,7 @@ const ee = Object.freeze({
 }, ct = (r, e) => {
   const t = e.x - r.x >= 0, o = r.dirX >= 0, s = e.dirX >= 0;
   if (o === s) {
-    const c = o === t, u = (r.x + e.x) / 2, g = (r.y + e.y) / 2, l = { x: u, y: g };
+    const c = o === t, g = (r.x + e.x) / 2, u = (r.y + e.y) / 2, l = { x: g, y: u };
     return c ? {
       points: [
         { x: r.x, y: r.y },
@@ -1003,8 +1003,8 @@ const ee = Object.freeze({
       midpoint: l
     };
   }
-  const n = o === t, h = (r.y + e.y) / 2;
-  if (n) {
+  const a = o === t, h = (r.y + e.y) / 2;
+  if (a) {
     const c = { x: e.x, y: r.y };
     return {
       points: [{ x: r.x, y: r.y }, c, { x: e.x, y: e.y }],
@@ -1025,28 +1025,28 @@ class lt {
       from: t,
       to: o,
       fromDir: s,
-      toDir: a,
-      arrowLength: n,
+      toDir: n,
+      arrowLength: a,
       arrowOffset: h,
       roundness: d,
       hasSourceArrow: c,
-      hasTargetArrow: u
-    } = e, g = c ? x(
-      { x: t.x + n, y: t.y },
+      hasTargetArrow: g
+    } = e, u = c ? x(
+      { x: t.x + a, y: t.y },
       s,
       t
-    ) : t, l = u ? x(
+    ) : t, l = g ? x(
       {
-        x: o.x - n,
+        x: o.x - a,
         y: o.y
       },
-      a,
+      n,
       o
-    ) : o, p = n + h, y = x(
+    ) : o, p = a + h, y = x(
       { x: t.x + p, y: t.y },
       s,
       t
-    ), w = x({ x: o.x - p, y: o.y }, a, o), f = ct(
+    ), w = x({ x: o.x - p, y: o.y }, n, o), f = ct(
       {
         x: y.x,
         y: y.y,
@@ -1055,11 +1055,11 @@ class lt {
       {
         x: w.x,
         y: w.y,
-        dirX: a.x
+        dirX: n.x
       }
     );
     this.path = R(
-      [g, ...f.points, l],
+      [u, ...f.points, l],
       d
     ), this.midpoint = f.midpoint;
   }
@@ -1072,26 +1072,26 @@ class gt {
       hasSourceArrow: t,
       hasTargetArrow: o,
       from: s,
-      to: a,
-      arrowLength: n,
+      to: n,
+      arrowLength: a,
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      detourDir: u,
-      detourDistance: g,
+      detourDir: g,
+      detourDistance: u,
       roundness: l
     } = e, p = t ? x(
-      { x: s.x + n, y: s.y },
+      { x: s.x + a, y: s.y },
       h,
       s
     ) : s, y = o ? x(
       {
-        x: a.x - n,
-        y: a.y
+        x: n.x - a,
+        y: n.y
       },
       d,
-      a
-    ) : a, w = n + c, f = Math.cos(u) * g, m = Math.sin(u) * g, A = x(
+      n
+    ) : n, w = a + c, f = Math.cos(g) * u, m = Math.sin(g) * u, A = x(
       { x: s.x + w, y: s.y },
       h,
       s
@@ -1099,9 +1099,9 @@ class gt {
       x: A.x + f,
       y: A.y + m
     }, C = x(
-      { x: a.x - w, y: a.y },
+      { x: n.x - w, y: n.y },
       d,
-      a
+      n
     ), T = {
       x: C.x + f,
       y: C.y + m
@@ -1123,26 +1123,26 @@ class ut {
       from: t,
       to: o,
       hasSourceArrow: s,
-      hasTargetArrow: a,
-      arrowLength: n,
+      hasTargetArrow: n,
+      arrowLength: a,
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: u
-    } = e, g = this.createArrowPoint(
+      roundness: g
+    } = e, u = this.createArrowPoint(
       s,
       h,
       t,
-      n
+      a
     ), l = this.createArrowPoint(
-      a,
+      n,
       d,
       o,
-      -n
-    ), p = n + c, y = { x: t.x + p, y: t.y }, w = x(y, h, t), f = { x: o.x - p, y: o.y }, m = x(f, d, o);
+      -a
+    ), p = a + c, y = { x: t.x + p, y: t.y }, w = x(y, h, t), f = { x: o.x - p, y: o.y }, m = x(f, d, o);
     this.path = R(
-      [g, w, m, l],
-      u
+      [u, w, m, l],
+      g
     );
     const A = (w.x + m.x) / 2, N = (w.y + m.y) / 2;
     this.midpoint = { x: A, y: N };
@@ -1150,17 +1150,17 @@ class ut {
   createArrowPoint(e, t, o, s) {
     if (!e)
       return o;
-    const a = {
+    const n = {
       x: o.x + s,
       y: o.y
     };
-    return x(a, t, o);
+    return x(n, t, o);
   }
 }
 const pt = (r, e) => {
   const t = e.y - r.y >= 0, o = r.dirY >= 0, s = e.dirY >= 0;
   if (o === s) {
-    const c = o === t, u = (r.x + e.x) / 2, g = (r.y + e.y) / 2, l = { x: u, y: g };
+    const c = o === t, g = (r.x + e.x) / 2, u = (r.y + e.y) / 2, l = { x: g, y: u };
     return c ? {
       points: [
         { x: r.x, y: r.y },
@@ -1179,8 +1179,8 @@ const pt = (r, e) => {
       midpoint: l
     };
   }
-  const n = o === t, h = (r.x + e.x) / 2;
-  if (n) {
+  const a = o === t, h = (r.x + e.x) / 2;
+  if (a) {
     const c = { x: r.x, y: e.y };
     return {
       points: [{ x: r.x, y: r.y }, c, { x: e.x, y: e.y }],
@@ -1201,24 +1201,24 @@ class yt {
       from: t,
       to: o,
       hasSourceArrow: s,
-      hasTargetArrow: a,
-      arrowLength: n,
+      hasTargetArrow: n,
+      arrowLength: a,
       arrowOffset: h,
       fromDir: d,
       toDir: c,
-      roundness: u
-    } = e, g = s ? x(
-      { x: t.x + n, y: t.y },
+      roundness: g
+    } = e, u = s ? x(
+      { x: t.x + a, y: t.y },
       d,
       t
-    ) : t, l = a ? x(
+    ) : t, l = n ? x(
       {
-        x: o.x - n,
+        x: o.x - a,
         y: o.y
       },
       c,
       o
-    ) : o, p = n + h, y = x(
+    ) : o, p = a + h, y = x(
       { x: t.x + p, y: t.y },
       d,
       t
@@ -1235,8 +1235,8 @@ class yt {
       }
     );
     this.path = R(
-      [g, ...f.points, l],
-      u
+      [u, ...f.points, l],
+      g
     ), this.midpoint = f.midpoint;
   }
 }
@@ -1244,7 +1244,7 @@ class te {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { side: t, arrowLength: o, arrowOffset: s, dir: a, origin: n, hasArrow: h } = e, d = o + s, c = d + 2 * t, g = [
+    const { side: t, arrowLength: o, arrowOffset: s, dir: n, origin: a, hasArrow: h } = e, d = o + s, c = d + 2 * t, u = [
       { x: o, y: 0 },
       { x: d, y: 0 },
       { x: d, y: t },
@@ -1253,25 +1253,25 @@ class te {
       { x: d, y: -t },
       { x: d, y: 0 },
       { x: o, y: 0 }
-    ].map((p) => x(p, a, { x: 0, y: 0 })).map((p) => ({ x: p.x + n.x, y: p.y + n.y })), l = `M ${n.x} ${n.y} L ${g[0].x} ${g[0].y} `;
-    this.path = `${h ? "" : l}${R(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
+    ].map((p) => x(p, n, { x: 0, y: 0 })).map((p) => ({ x: p.x + a.x, y: p.y + a.y })), l = `M ${a.x} ${a.y} L ${u[0].x} ${u[0].y} `;
+    this.path = `${h ? "" : l}${R(u, e.roundness)}`, this.midpoint = { x: (u[3].x + u[4].x) / 2, y: (u[3].y + u[4].y) / 2 };
   }
 }
 class wt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { arrowLength: t, radius: o, smallRadius: s, dir: a, origin: n, hasArrow: h } = e, d = s + o, c = s * o / d, u = Math.sqrt(d * d - s * s), g = u * s / d, l = u + o + t, p = t + g, w = [
+    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, g = Math.sqrt(d * d - s * s), u = g * s / d, l = g + o + t, p = t + u, w = [
       { x: t, y: 0 },
       { x: p, y: c },
       { x: p, y: -c },
       { x: l, y: 0 }
-    ].map((A) => x(A, a, { x: 0, y: 0 })).map((A) => ({ x: A.x + n.x, y: A.y + n.y })), f = [
+    ].map((A) => x(A, n, { x: 0, y: 0 })).map((A) => ({ x: A.x + a.x, y: A.y + a.y })), f = [
       `M ${w[0].x} ${w[0].y}`,
       `A ${s} ${s} 0 0 1 ${w[1].x} ${w[1].y}`,
       `A ${o} ${o} 0 1 0 ${w[2].x} ${w[2].y}`,
       `A ${s} ${s} 0 0 1 ${w[0].x} ${w[0].y}`
-    ].join(" "), m = `M ${n.x} ${n.y} L ${w[0].x} ${w[0].y} `;
+    ].join(" "), m = `M ${a.x} ${a.y} L ${w[0].x} ${w[0].y} `;
     this.path = `${h ? "" : m}${f}`, this.midpoint = w[3];
   }
 }
@@ -1284,39 +1284,39 @@ class ft {
       from: t,
       to: o,
       sourceOffset: s,
-      targetOffset: a,
-      hasSourceArrow: n,
+      targetOffset: n,
+      hasSourceArrow: a,
       hasTargetArrow: h,
       arrowLength: d
     } = e;
     this.midpoint = { x: (t.x + o.x) / 2, y: (t.y + o.y) / 2 };
-    const c = o.x - t.x, u = o.y - t.y;
-    if (this.diagonalDistance = Math.sqrt(c * c + u * u), this.diagonalDistance === 0) {
+    const c = o.x - t.x, g = o.y - t.y;
+    if (this.diagonalDistance = Math.sqrt(c * c + g * g), this.diagonalDistance === 0) {
       this.path = "";
       return;
     }
-    const g = { x: c, y: u }, l = this.createDirectLinePoint({
+    const u = { x: c, y: g }, l = this.createDirectLinePoint({
       offset: s,
-      hasArrow: n,
+      hasArrow: a,
       flip: 1,
       shift: t,
       arrowLength: d,
-      dir: g
+      dir: u
     }), p = this.createDirectLinePoint({
-      offset: a,
+      offset: n,
       hasArrow: h,
       flip: -1,
       shift: o,
       arrowLength: d,
-      dir: g
+      dir: u
     });
     this.path = `M ${l.x} ${l.y} L ${p.x} ${p.y}`;
   }
   createDirectLinePoint(e) {
-    const t = e.hasArrow ? e.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance, { dir: a, shift: n } = e;
+    const t = e.hasArrow ? e.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance, { dir: n, shift: a } = e;
     return {
-      x: a.x * s + n.x,
-      y: a.y * s + n.y
+      x: n.x * s + a.x,
+      y: n.y * s + a.y
     };
   }
 }
@@ -1332,33 +1332,33 @@ class xt {
       hasSourceArrow: t,
       hasTargetArrow: o,
       arrowLength: s,
-      from: a,
-      to: n,
+      from: n,
+      to: a,
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: u,
-      detourDistance: g
+      roundness: g,
+      detourDistance: u
     } = e, l = t ? x(
-      { x: a.x + s, y: a.y },
+      { x: n.x + s, y: n.y },
       h,
-      a
-    ) : a, p = o ? x(
+      n
+    ) : n, p = o ? x(
       {
-        x: n.x - s,
-        y: n.y
+        x: a.x - s,
+        y: a.y
       },
       d,
-      n
-    ) : n, y = s + c, w = x(
-      { x: a.x + y, y: a.y },
-      h,
       a
+    ) : a, y = s + c, w = x(
+      { x: n.x + y, y: n.y },
+      h,
+      n
     ), f = x(
-      { x: n.x - y, y: n.y },
+      { x: a.x - y, y: a.y },
       d,
-      n
-    ), m = vt(w, f, g);
+      a
+    ), m = vt(w, f, u);
     this.midpoint = {
       x: (w.x + f.x) / 2,
       y: m
@@ -1371,7 +1371,7 @@ class xt {
         f,
         p
       ],
-      u
+      g
     );
   }
 }
@@ -1387,33 +1387,33 @@ class At {
       hasSourceArrow: t,
       hasTargetArrow: o,
       arrowLength: s,
-      fromDir: a,
-      toDir: n,
+      fromDir: n,
+      toDir: a,
       from: h,
       to: d,
       arrowOffset: c,
-      detourDistance: u,
-      roundness: g
+      detourDistance: g,
+      roundness: u
     } = e, l = t ? x(
       { x: h.x + s, y: h.y },
-      a,
+      n,
       h
     ) : h, p = o ? x(
       {
         x: d.x - s,
         y: d.y
       },
-      n,
+      a,
       d
     ) : d, y = s + c, w = x(
       { x: h.x + y, y: h.y },
-      a,
+      n,
       h
     ), f = x(
       { x: d.x - y, y: d.y },
-      n,
+      a,
       d
-    ), m = mt(w, f, u);
+    ), m = mt(w, f, g);
     this.midpoint = {
       x: m,
       y: (w.y + f.y) / 2
@@ -1426,7 +1426,7 @@ class At {
         f,
         p
       ],
-      g
+      u
     );
   }
 }
@@ -1469,26 +1469,26 @@ class X {
     this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Me(e.color), this.svg.appendChild(this.group), this.line = De(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = Y(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = Y(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: a, from: n, to: h } = Te(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = Te(
       e.from,
       e.to,
       this.params.padding
     );
-    Re(this.svg, { x: t, y: o, width: s, height: a });
+    Re(this.svg, { x: t, y: o, width: s, height: n });
     const d = we(e.from.direction), c = we(e.to.direction);
-    let u = { x: -c.x, y: -c.y }, g;
-    e.category === L.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === L.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
-    const l = g(n, h, d, c);
+    let g = { x: -c.x, y: -c.y }, u;
+    e.category === L.PortCycle ? (u = this.params.createCyclePath, g = d) : e.category === L.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
+    const l = u(a, h, d, c);
     this.line.setAttribute("d", l.path);
     let p = null;
     this.sourceArrow && (p = this.arrowRenderer({
       direction: d,
-      shift: n,
+      shift: a,
       arrowLength: this.params.arrowLength
     }), this.sourceArrow.setAttribute("d", p));
     let y = null;
     this.targetArrow && (y = this.arrowRenderer({
-      direction: u,
+      direction: g,
       shift: h,
       arrowLength: this.params.arrowLength
     }), this.targetArrow.setAttribute("d", y)), this.afterRenderEmitter.emit({
@@ -1508,20 +1508,20 @@ const Et = (r) => (e) => {
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
-  })), s = `M ${o[0].x} ${o[0].y}`, a = `L ${o[1].x} ${o[1].y}`, n = `L ${o[2].x} ${o[2].y}`;
-  return `${s} ${a} ${n} Z`;
+  })), s = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
+  return `${s} ${n} ${a} Z`;
 }, St = (r) => (e) => {
-  const t = r.radius, o = e.arrowLength, s = (o * o + 2 * o * t) / (2 * t), a = s + t, n = o + t - t * (o + t) / a, h = t * s / a, c = [
+  const t = r.radius, o = e.arrowLength, s = (o * o + 2 * o * t) / (2 * t), n = s + t, a = o + t - t * (o + t) / n, h = t * s / n, c = [
     { x: 0, y: 0 },
-    { x: n, y: -h },
-    { x: n, y: h }
+    { x: a, y: -h },
+    { x: a, y: h }
   ].map(
     (y) => x(y, e.direction, { x: 0, y: 0 })
   ).map((y) => ({
     x: y.x + e.shift.x,
     y: y.y + e.shift.y
-  })), u = `M ${c[0].x} ${c[0].y}`, g = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, l = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
-  return `${u} ${g} ${l} ${p}`;
+  })), g = `M ${c[0].x} ${c[0].y}`, u = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, l = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${g} ${u} ${l} ${p}`;
 }, bt = (r) => (e) => {
   const t = r.smallRadius, o = r.radius, s = x(
     {
@@ -1536,13 +1536,13 @@ const Et = (r) => (e) => {
       x: e.arrowLength + r.smallRadius,
       y: 0
     }
-  ), n = [{ x: 0, y: 0 }, { x: s.x, y: -s.y }, s].map(
-    (g) => x(g, e.direction, { x: 0, y: 0 })
-  ).map((g) => ({
-    x: g.x + e.shift.x,
-    y: g.y + e.shift.y
-  })), h = `M ${n[0].x} ${n[0].y}`, d = `A ${o} ${o} 0 0 1 ${n[1].x} ${n[1].y}`, c = `A ${t} ${t} 0 0 1 ${n[2].x} ${n[2].y}`, u = `A ${o} ${o} 0 0 1 ${n[0].x} ${n[0].y}`;
-  return `${h} ${d} ${c} ${u}`;
+  ), a = [{ x: 0, y: 0 }, { x: s.x, y: -s.y }, s].map(
+    (u) => x(u, e.direction, { x: 0, y: 0 })
+  ).map((u) => ({
+    x: u.x + e.shift.x,
+    y: u.y + e.shift.y
+  })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
+  return `${h} ${d} ${c} ${g}`;
 }, U = (r) => {
   if (typeof r == "function")
     return r;
@@ -1863,14 +1863,14 @@ class Le {
     [this.afterRenderEmitter, this.onAfterRender] = P(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = U((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Me(this.color), this.svg.appendChild(this.group), this.line = De(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = Y(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = Y(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: a, from: n, to: h } = Te(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = Te(
       e.from,
       e.to,
       O
     );
-    Re(this.svg, { x: t, y: o, width: s, height: a });
+    Re(this.svg, { x: t, y: o, width: s, height: n });
     const d = new ft({
-      from: n,
+      from: a,
       to: h,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1879,14 +1879,14 @@ class Le {
       arrowLength: this.arrowLength
     });
     this.line.setAttribute("d", d.path);
-    let c = null, u = null;
-    const g = d.diagonalDistance;
-    if (g === 0)
-      this.sourceArrow !== null && (c = "", this.sourceArrow.setAttribute("d", c)), this.targetArrow !== null && (u = "", this.targetArrow.setAttribute("d", u));
+    let c = null, g = null;
+    const u = d.diagonalDistance;
+    if (u === 0)
+      this.sourceArrow !== null && (c = "", this.sourceArrow.setAttribute("d", c)), this.targetArrow !== null && (g = "", this.targetArrow.setAttribute("d", g));
     else {
       const l = {
-        x: (h.x - n.x) / g,
-        y: (h.y - n.y) / g
+        x: (h.x - a.x) / u,
+        y: (h.y - a.y) / u
       };
       if (this.sourceArrow) {
         const p = {
@@ -1904,20 +1904,20 @@ class Le {
           x: l.x * this.targetOffset,
           y: l.y * this.targetOffset
         };
-        u = this.arrowRenderer({
+        g = this.arrowRenderer({
           direction: { x: -l.x, y: -l.y },
           shift: {
             x: h.x - p.x,
             y: h.y - p.y
           },
           arrowLength: this.arrowLength
-        }), this.targetArrow.setAttribute("d", u);
+        }), this.targetArrow.setAttribute("d", g);
       }
     }
     this.afterRenderEmitter.emit({
       edgePath: d,
       sourceArrowPath: c,
-      targetArrowPath: u
+      targetArrowPath: g
     });
   }
 }
@@ -1971,15 +1971,15 @@ class Mr {
     i(this, "onAfterRender");
     i(this, "svg");
     this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((o) => {
-      const s = o.edgePath.midpoint, a = `translate(${s.x}px, ${s.y}px)`;
-      this.midpointElement.style.setProperty("transform", a);
+      const s = o.edgePath.midpoint, n = `translate(${s.x}px, ${s.y}px)`;
+      this.midpointElement.style.setProperty("transform", n);
     });
   }
   render(e) {
     this.baseShape.render(e);
   }
 }
-class Ve {
+class Ie {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -2091,7 +2091,7 @@ class J {
     this.counter = 0;
   }
 }
-class Ie {
+class Ve {
   constructor(e, t, o) {
     i(this, "nodeIdGenerator", new J(
       (e) => this.graphStore.hasNode(e)
@@ -2256,14 +2256,16 @@ class $e {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const Vt = (r, e) => Symbol.iterator in r ? {
+const It = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
-  contentOffset: e.focus.contentOffset
+  contentOffset: e.focus.contentOffset,
+  animationDuration: e.focus.animationDuration
 } : {
   minContentScale: r.minContentScale ?? e.focus.minContentScale,
   nodes: r.nodes ?? [],
-  contentOffset: r.contentOffset ?? e.focus.contentOffset
+  contentOffset: r.contentOffset ?? e.focus.contentOffset,
+  animationDuration: r.animationDuration ?? e.focus.animationDuration
 }, Be = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
@@ -2274,8 +2276,8 @@ const Vt = (r, e) => Symbol.iterator in r ? {
   y: r.scale * (1 - e) * o + r.y
 });
 class Oe {
-  constructor(e, t, o) {
-    this.graphStore = e, this.viewportStore = t, this.params = o;
+  constructor(e, t, o, s) {
+    this.graphStore = e, this.viewportStore = t, this.params = o, this.win = s;
   }
   patchViewportMatrix(e) {
     this.viewportStore.patchViewportMatrix(e);
@@ -2284,22 +2286,23 @@ class Oe {
     this.viewportStore.patchContentMatrix(e);
   }
   center(e, t) {
-    const { width: o, height: s } = this.viewportStore.getDimensions(), a = { x: o / 2, y: s / 2 }, n = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - a.x, c = h.y - a.y;
-    let u = Be(n, d, c);
-    const g = t == null ? void 0 : t.contentScale;
-    if (g !== void 0) {
-      const l = 1 / g;
-      u = Ue(
-        u,
-        l / n.scale,
-        a.x,
-        a.y
+    const { width: o, height: s } = this.viewportStore.getDimensions(), n = { x: o / 2, y: s / 2 }, a = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - n.x, c = h.y - n.y;
+    let g = Be(a, d, c);
+    const u = t == null ? void 0 : t.contentScale;
+    if (u !== void 0) {
+      const p = 1 / u;
+      g = Ue(
+        g,
+        p / a.scale,
+        n.x,
+        n.y
       );
     }
-    this.viewportStore.patchViewportMatrix(u);
+    const l = (t == null ? void 0 : t.animationDuration) ?? 0;
+    l > 0 ? this.animateNavigation(a, g, l) : this.viewportStore.patchViewportMatrix(g);
   }
   focus(e) {
-    const t = Vt(e ?? {}, this.params);
+    const t = It(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2308,28 +2311,48 @@ class Oe {
     this.viewportStore.destroy();
   }
   navigate(e) {
-    let t = 1 / 0, o = -1 / 0, s = 1 / 0, a = -1 / 0, n = 0;
+    let t = 1 / 0, o = -1 / 0, s = 1 / 0, n = -1 / 0, a = 0;
     const h = /* @__PURE__ */ new Set();
     for (const d of e.nodes)
       h.add(d);
     if (this.graphStore.getAllNodeIds().forEach((d) => {
       const { payload: c } = this.graphStore.getNode(d);
-      c.x !== null && c.y !== null && (h.size === 0 || h.has(d)) && (t = Math.min(c.x, t), o = Math.max(c.x, o), s = Math.min(c.y, s), a = Math.max(c.y, a), n++);
-    }), n > 0) {
-      t -= e.contentOffset, s -= e.contentOffset, o += e.contentOffset, a += e.contentOffset;
+      c.x !== null && c.y !== null && (h.size === 0 || h.has(d)) && (t = Math.min(c.x, t), o = Math.max(c.x, o), s = Math.min(c.y, s), n = Math.max(c.y, n), a++);
+    }), a > 0) {
+      t -= e.contentOffset, s -= e.contentOffset, o += e.contentOffset, n += e.contentOffset;
       const d = {
         x: (t + o) / 2,
-        y: (s + a) / 2
-      }, { scale: c } = this.viewportStore.getContentMatrix(), u = (a - s) * c, g = (o - t) * c, { width: l, height: p } = this.viewportStore.getDimensions(), y = Math.max(
-        g / l,
-        u / p
+        y: (s + n) / 2
+      }, { scale: c } = this.viewportStore.getContentMatrix(), g = (n - s) * c, u = (o - t) * c, { width: l, height: p } = this.viewportStore.getDimensions(), y = Math.max(
+        u / l,
+        g / p
       ), w = y > 1 ? c / y : c, f = Math.max(w, e.minContentScale);
-      this.center(d, { contentScale: f });
+      this.center(d, {
+        contentScale: f,
+        animationDuration: e.animationDuration
+      });
     }
   }
+  animateNavigation(e, t, o) {
+    let s;
+    const n = {
+      scale: t.scale - e.scale,
+      x: t.x - e.x,
+      y: t.y - e.y
+    }, a = (h) => {
+      s === void 0 && (s = h);
+      const d = Math.min((h - s) / o, 1);
+      d <= 1 && this.viewportStore.patchViewportMatrix({
+        scale: e.scale + d * n.scale,
+        x: e.x + d * n.x,
+        y: e.y + d * n.y
+      }), d < 1 && this.win.requestAnimationFrame(a);
+    };
+    this.win.requestAnimationFrame(a);
+  }
 }
-const We = (r, e) => {
-  const t = new be(), o = new Ve(t), s = new $e(e), a = new Ee(t, e, r), n = {
+const We = (r, e, t) => {
+  const o = new be(), s = new Ie(o), n = new $e(e), a = new Ee(o, e, r), h = {
     nodes: {
       centerFn: Ce,
       priorityFn: () => 0
@@ -2341,22 +2364,24 @@ const We = (r, e) => {
     ports: {
       direction: 0
     }
-  }, h = new Ie(
-    t,
+  }, d = new Ve(
+    o,
     a,
-    n
-  ), d = {
+    h
+  ), c = {
     focus: {
       contentOffset: 0,
       minContentScale: 0,
-      schedule: re
+      schedule: re,
+      animationDuration: 0
     }
-  }, c = new Oe(
-    t,
+  }, g = new Oe(
+    o,
     e,
-    d
+    c,
+    t
   );
-  return new Se(o, s, h, c);
+  return new Se(s, n, d, g);
 };
 class G {
   constructor(e, t, o, s) {
@@ -2401,8 +2426,8 @@ class G {
       const t = e;
       if (t.touches.length !== 1)
         return;
-      const o = t.touches[0], s = e.currentTarget, a = this.canvas.graph.findPortIdsByElement(s)[0];
-      this.params.onPortPointerDown(a, {
+      const o = t.touches[0], s = e.currentTarget, n = this.canvas.graph.findPortIdsByElement(s)[0];
+      this.params.onPortPointerDown(n, {
         x: o.clientX,
         y: o.clientY
       }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
@@ -2467,7 +2492,7 @@ class G {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class It {
+class Vt {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -2521,7 +2546,7 @@ class oe {
       const t = e;
       if (!this.params.mouseDownEventVerifier(t))
         return;
-      const o = e.currentTarget, s = this.graph.findNodeIdByElement(o), a = this.graph.getNode(s);
+      const o = e.currentTarget, s = this.graph.findNodeIdByElement(o), n = this.graph.getNode(s);
       if (!this.params.nodeDragVerifier(s))
         return;
       this.params.onNodeDragStarted(s), e.stopPropagation();
@@ -2531,8 +2556,8 @@ class oe {
       });
       this.grabbedNode = {
         nodeId: s,
-        dx: h.x - a.x,
-        dy: h.y - a.y
+        dx: h.x - n.x,
+        dy: h.y - n.y
       }, k(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
@@ -2544,12 +2569,12 @@ class oe {
       if (t.touches.length !== 1)
         return;
       e.stopPropagation();
-      const o = t.touches[0], s = e.currentTarget, a = this.canvas.graph.findNodeIdByElement(s), n = this.graph.getNode(a);
+      const o = t.touches[0], s = e.currentTarget, n = this.canvas.graph.findNodeIdByElement(s), a = this.graph.getNode(n);
       if (!this.params.nodeDragVerifier({
-        nodeId: a,
-        element: n.element,
-        x: n.x,
-        y: n.y
+        nodeId: n,
+        element: a.element,
+        x: a.x,
+        y: a.y
       }))
         return;
       const d = this.calculateContentPoint({
@@ -2557,10 +2582,10 @@ class oe {
         y: o.clientY
       });
       this.grabbedNode = {
-        nodeId: a,
-        dx: d.x - n.x,
-        dy: d.y - n.y
-      }, this.moveNodeOnTop(a), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        nodeId: n,
+        dx: d.x - a.x,
+        dy: d.y - a.y
+      }, this.moveNodeOnTop(n), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2627,10 +2652,10 @@ class oe {
     const o = this.calculateContentPoint(t), s = {
       x: o.x - e.dx,
       y: o.y - e.dy
-    }, a = this.adjustNodeCoords(s);
+    }, n = this.adjustNodeCoords(s);
     this.canvas.updateNode(e.nodeId, {
-      x: a.x,
-      y: a.y
+      x: n.x,
+      y: n.y
     }), this.params.onNodeDrag(e.nodeId);
   }
   moveNodeOnTop(e) {
@@ -2695,14 +2720,14 @@ const W = (r) => {
   const o = e.reduce(
     (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), s = [o[0] / t, o[1] / t], n = e.map((h) => [h[0] - s[0], h[1] - s[1]]).reduce(
+  ), s = [o[0] / t, o[1] / t], a = e.map((h) => [h[0] - s[0], h[1] - s[1]]).reduce(
     (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
     x: s[0],
     y: s[1],
-    scale: n / t,
+    scale: a / t,
     touchesCnt: t,
     touches: e
   };
@@ -2743,8 +2768,8 @@ class j {
     i(this, "onWheelScroll", (e) => {
       if (!this.params.mouseWheelEventVerifier(e))
         return;
-      const { left: t, top: o } = this.element.getBoundingClientRect(), s = e.clientX - t, a = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
-      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, s, a), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      const { left: t, top: o } = this.element.getBoundingClientRect(), s = e.clientX - t, n = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, s, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
@@ -2773,8 +2798,8 @@ class j {
         -(t.x - this.prevTouches.x),
         -(t.y - this.prevTouches.y)
       ), t.touchesCnt === 2) {
-        const { left: s, top: a } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, h = this.prevTouches.y - a, c = 1 / (t.scale / this.prevTouches.scale);
-        this.scaleViewport(c, n, h);
+        const { left: s, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - s, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        this.scaleViewport(c, a, h);
       }
       this.prevTouches = t;
     });
@@ -2800,19 +2825,19 @@ class j {
     new j(e, t, o, s);
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = Be(o, e, t), { width: a, height: n } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), s = Be(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: s,
-      canvasWidth: a,
-      canvasHeight: n
+      canvasWidth: n,
+      canvasHeight: a
     });
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), a = Ue(s, e, t, o), { width: n, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), n = Ue(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: s,
-      nextTransform: a,
-      canvasWidth: n,
+      nextTransform: n,
+      canvasWidth: a,
       canvasHeight: h
     });
     this.performTransform(d);
@@ -2849,7 +2874,7 @@ class j {
   }
 }
 class se {
-  constructor(e, t, o, s, a, n) {
+  constructor(e, t, o, s, n, a) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
     i(this, "viewport");
@@ -2872,7 +2897,7 @@ class se {
       this.userTransformInProgress || this.loadAreaAroundViewport();
     });
     i(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = o, this.trigger = a, this.params = n, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
+    this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
       this.scheduleLoadAreaAroundViewport();
     });
     const h = {
@@ -2902,14 +2927,14 @@ class se {
       h
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(e, t, o, s, a, n) {
+  static configure(e, t, o, s, n, a) {
     new se(
       e,
       t,
       o,
       s,
-      a,
-      n
+      n,
+      a
     );
   }
   scheduleLoadAreaAroundViewport() {
@@ -2919,17 +2944,17 @@ class se {
   }
   scheduleEnsureViewportAreaLoaded() {
     setTimeout(() => {
-      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: a } = this.viewport.getViewportMatrix(), n = e * o, h = t * o, d = s - this.nodeHorizontal, c = a - this.nodeVertical, u = s + n + this.nodeHorizontal, g = a + h + this.nodeVertical;
-      this.loadedArea.xFrom < d && this.loadedArea.xTo > u && this.loadedArea.yFrom < c && this.loadedArea.yTo > g || this.loadAreaAroundViewport();
+      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, g = s + a + this.nodeHorizontal, u = n + h + this.nodeVertical;
+      this.loadedArea.xFrom < d && this.loadedArea.xTo > g && this.loadedArea.yFrom < c && this.loadedArea.yTo > u || this.loadAreaAroundViewport();
     });
   }
   loadAreaAroundViewport() {
-    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: a } = this.viewport.getViewportMatrix(), n = e * o, h = t * o, d = s - n - this.nodeHorizontal, c = a - h - this.nodeVertical, u = 3 * n + 2 * this.nodeHorizontal, g = 3 * h + 2 * this.nodeVertical;
+    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, u = 3 * h + 2 * this.nodeVertical;
     this.trigger.emit({
       x: d,
       y: c,
-      width: u,
-      height: g
+      width: g,
+      height: u
     });
   }
 }
@@ -2965,8 +2990,8 @@ class ie {
     this.canvas = e, this.backgroundHost = o, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
     const s = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", s), this.pattern.appendChild(this.patternContent);
-    const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    a.appendChild(this.pattern), this.svg.appendChild(a), this.svg.appendChild(this.patternRenderingRectangle), this.updateDimensions(), this.canvas.viewport.onAfterResize.subscribe(() => {
+    const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.updateDimensions(), this.canvas.viewport.onAfterResize.subscribe(() => {
       this.updateDimensions();
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
@@ -2985,16 +3010,17 @@ class ie {
   }
 }
 class ne {
-  constructor(e, t, o, s, a) {
+  constructor(e, t, o, s, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
     i(this, "isTargetDragging", !0);
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = a, this.overlayCanvas = We(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = We(
       this.overlayLayer,
-      this.viewportStore
+      this.viewportStore,
+      this.window
     ), G.configure(
       this.canvas,
       this.overlayLayer,
@@ -3005,48 +3031,48 @@ class ne {
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (n, h) => {
-          const d = this.params.connectionTypeResolver(n);
-          return d === null ? !1 : (this.grabPort(n, h, d), !0);
+        onPortPointerDown: (a, h) => {
+          const d = this.params.connectionTypeResolver(a);
+          return d === null ? !1 : (this.grabPort(a, h, d), !0);
         },
-        onPointerMove: (n) => {
-          this.moveDraggingPort(n);
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
         },
-        onPointerUp: (n) => {
-          this.tryCreateConnection(n);
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
         }
       }
     );
   }
-  static configure(e, t, o, s, a) {
+  static configure(e, t, o, s, n) {
     new ne(
       e,
       t,
       o,
       s,
-      a
+      n
     );
   }
   grabPort(e, t, o) {
     const s = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const a = s.element.getBoundingClientRect(), n = a.x + a.width / 2, h = a.y + a.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
-      x: n - d.x,
+    const n = s.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
+      x: a - d.x,
       y: h - d.y
-    }), u = this.canvas.viewport.createContentCoords({
+    }), g = this.canvas.viewport.createContentCoords({
       x: t.x - d.x,
       y: t.y - d.y
-    }), g = {
+    }), u = {
       overlayNodeId: M.StaticNodeId,
       portCoords: c,
       portDirection: s.direction
     }, l = {
       overlayNodeId: M.DraggingNodeId,
-      portCoords: u,
+      portCoords: g,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = o === "direct";
-    const [p, y] = this.isTargetDragging ? [g, l] : [l, g];
+    const [p, y] = this.isTargetDragging ? [u, l] : [l, u];
     this.overlayCanvas.addNode(H(p)), this.overlayCanvas.addNode(H(y)), this.overlayCanvas.addEdge({
       from: p.overlayNodeId,
       to: y.overlayNodeId,
@@ -3065,8 +3091,8 @@ class ne {
       });
       return;
     }
-    const s = this.isTargetDragging ? o : t, a = this.isTargetDragging ? t : o, n = { from: s, to: a }, h = this.params.connectionPreprocessor(n);
-    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
+    const s = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: s, to: n }, h = this.params.connectionPreprocessor(a);
+    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
   }
   moveDraggingPort(e) {
     const t = this.overlayLayer.getBoundingClientRect(), o = this.canvas.viewport.createContentCoords({
@@ -3080,7 +3106,7 @@ class ne {
   }
 }
 class ae {
-  constructor(e, t, o, s, a) {
+  constructor(e, t, o, s, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
     i(this, "isTargetDragging", !0);
@@ -3088,9 +3114,10 @@ class ae {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = a, this.overlayCanvas = We(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = We(
       this.overlayLayer,
-      this.viewportStore
+      this.viewportStore,
+      this.window
     ), G.configure(
       this.canvas,
       this.overlayLayer,
@@ -3101,37 +3128,37 @@ class ae {
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (n, h) => this.tryStartEdgeDragging(n, h),
-        onPointerMove: (n) => {
-          this.moveDraggingPort(n);
+        onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
+        onPointerMove: (a) => {
+          this.moveDraggingPort(a);
         },
-        onPointerUp: (n) => {
-          this.tryCreateConnection(n);
+        onPointerUp: (a) => {
+          this.tryCreateConnection(a);
         }
       }
     );
   }
-  static configure(e, t, o, s, a) {
+  static configure(e, t, o, s, n) {
     new ae(
       e,
       t,
       o,
       s,
-      a
+      n
     );
   }
   tryStartEdgeDragging(e, t) {
     const o = this.params.draggingEdgeResolver(e);
     if (o === null || !this.canvas.graph.hasEdge(o))
       return !1;
-    const s = this.canvas.graph.getEdge(o), a = e === s.from, n = e === s.to, h = a ? s.to : s.from;
-    this.staticPortId = h, this.isTargetDragging = n;
-    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), u = c.element.getBoundingClientRect(), g = {
-      x: u.x + u.width / 2,
-      y: u.y + u.height / 2
+    const s = this.canvas.graph.getEdge(o), n = e === s.from, a = e === s.to, h = n ? s.to : s.from;
+    this.staticPortId = h, this.isTargetDragging = a;
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), u = {
+      x: g.x + g.width / 2,
+      y: g.y + g.height / 2
     }, l = this.overlayLayer.getBoundingClientRect(), p = this.canvas.viewport.createContentCoords({
-      x: g.x - l.x,
-      y: g.y - l.y
+      x: u.x - l.x,
+      y: u.y - l.y
     }), y = this.canvas.viewport.createContentCoords({
       x: t.x - l.x,
       y: t.y - l.y
@@ -3187,13 +3214,13 @@ class ae {
       });
       return;
     }
-    const [o, s] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], a = this.draggingEdgePayload, n = {
-      id: a.id,
+    const [o, s] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
+      id: n.id,
       from: o,
       to: s,
-      shape: a.shape,
-      priority: a.priority
-    }, h = this.params.connectionPreprocessor(n);
+      shape: n.shape,
+      priority: n.priority
+    }, h = this.params.connectionPreprocessor(a);
     if (h !== null)
       this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);
     else {
@@ -3247,7 +3274,7 @@ class de {
 }
 class Wt {
   static configure(e, t) {
-    const o = t.applyOn, s = new It(e, t.algorithm, {
+    const o = t.applyOn, s = new Vt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
@@ -3330,13 +3357,13 @@ const Yt = (r) => {
   const e = ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? (() => {
   }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
   }), o = r.nodeDragVerifier ?? (() => !0), s = ((w = r.events) == null ? void 0 : w.onNodeDragFinished) ?? (() => {
-  }), a = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && a, h = (f = r.mouse) == null ? void 0 : f.dragCursor, d = h !== void 0 ? h : "grab", c = (m = r.mouse) == null ? void 0 : m.mouseDownEventVerifier, u = c !== void 0 ? c : (N) => N.button === 0, g = (A = r.mouse) == null ? void 0 : A.mouseUpEventVerifier, l = g !== void 0 ? g : (N) => N.button === 0;
+  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (f = r.mouse) == null ? void 0 : f.dragCursor, d = h !== void 0 ? h : "grab", c = (m = r.mouse) == null ? void 0 : m.mouseDownEventVerifier, g = c !== void 0 ? c : (N) => N.button === 0, u = (A = r.mouse) == null ? void 0 : A.mouseUpEventVerifier, l = u !== void 0 ? u : (N) => N.button === 0;
   return {
-    moveOnTop: a,
-    moveEdgesOnTop: n,
+    moveOnTop: n,
+    moveEdgesOnTop: a,
     dragCursor: d,
     gridSize: r.gridSize ?? null,
-    mouseDownEventVerifier: u,
+    mouseDownEventVerifier: g,
     mouseUpEventVerifier: l,
     onNodeDragStarted: e,
     onNodeDrag: t,
@@ -3345,33 +3372,33 @@ const Yt = (r) => {
   };
 }, Xt = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, s = r.maxY !== null ? r.maxY : 1 / 0;
-  return (a) => {
-    let n = a.nextTransform.x, h = a.nextTransform.y;
-    n < e && n < a.prevTransform.x && (n = Math.min(a.prevTransform.x, e));
-    const d = a.canvasWidth * a.prevTransform.scale, c = t - d;
-    n > c && n > a.prevTransform.x && (n = Math.max(a.prevTransform.x, c)), h < o && h < a.prevTransform.y && (h = Math.min(a.prevTransform.y, o));
-    const u = a.canvasHeight * a.prevTransform.scale, g = s - u;
-    return h > g && h > a.prevTransform.y && (h = Math.max(a.prevTransform.y, g)), { scale: a.nextTransform.scale, x: n, y: h };
+  return (n) => {
+    let a = n.nextTransform.x, h = n.nextTransform.y;
+    a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
+    const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
+    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
+    const g = n.canvasHeight * n.prevTransform.scale, u = s - g;
+    return h > u && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, u)), { scale: n.nextTransform.scale, x: a, y: h };
   };
 }, Gt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, s = t !== null ? 1 / t : 1 / 0;
-  return (a) => {
-    const n = a.prevTransform, h = a.nextTransform;
-    let d = h.scale, c = h.x, u = h.y;
-    if (h.scale > s && h.scale > n.scale) {
-      d = Math.max(n.scale, s), c = n.x, u = n.y;
-      const g = (d - n.scale) / (h.scale - n.scale);
-      c = n.x + (h.x - n.x) * g, u = n.y + (h.y - n.y) * g;
+  return (n) => {
+    const a = n.prevTransform, h = n.nextTransform;
+    let d = h.scale, c = h.x, g = h.y;
+    if (h.scale > s && h.scale > a.scale) {
+      d = Math.max(a.scale, s), c = a.x, g = a.y;
+      const u = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * u, g = a.y + (h.y - a.y) * u;
     }
-    if (h.scale < o && h.scale < n.scale) {
-      d = Math.min(n.scale, o), c = n.x, u = n.y;
-      const g = (d - n.scale) / (h.scale - n.scale);
-      c = n.x + (h.x - n.x) * g, u = n.y + (h.y - n.y) * g;
+    if (h.scale < o && h.scale < a.scale) {
+      d = Math.min(a.scale, o), c = a.x, g = a.y;
+      const u = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * u, g = a.y + (h.y - a.y) * u;
     }
     return {
       scale: d,
       x: c,
-      y: u
+      y: g
     };
   };
 }, jt = (r) => (e) => r.reduce(
@@ -3400,7 +3427,7 @@ const Yt = (r) => {
       });
   }
 }, me = (r) => {
-  var y, w, f, m, A, N, C, T, V, I, $, ge;
+  var y, w, f, m, A, N, C, T, I, V, $, ge;
   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 = jt(
@@ -3408,23 +3435,23 @@ const Yt = (r) => {
       (D) => xe(D)
     )
   ) : s = xe(o) : s = (D) => D.nextTransform;
-  const a = ((w = r == null ? void 0 : r.shift) == null ? void 0 : w.cursor) !== void 0 ? r.shift.cursor : "grab", n = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeTransformChange) ?? (() => {
+  const n = ((w = r == null ? void 0 : r.shift) == null ? void 0 : w.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeTransformChange) ?? (() => {
   }), h = ((m = r == null ? void 0 : r.events) == null ? void 0 : m.onTransformChange) ?? (() => {
-  }), d = (A = r == null ? void 0 : r.shift) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, u = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseUpEventVerifier, g = u !== void 0 ? u : (D) => D.button === 0, l = (C = r == null ? void 0 : r.scale) == null ? void 0 : C.mouseWheelEventVerifier, p = l !== void 0 ? l : () => !0;
+  }), d = (A = r == null ? void 0 : r.shift) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, g = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseUpEventVerifier, u = g !== void 0 ? g : (D) => D.button === 0, l = (C = r == null ? void 0 : r.scale) == null ? void 0 : C.mouseWheelEventVerifier, p = l !== void 0 ? l : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformFinished) ?? (() => {
+    onTransformFinished: ((I = r == null ? void 0 : r.events) == null ? void 0 : I.onTransformFinished) ?? (() => {
     }),
-    onBeforeTransformChange: n,
+    onBeforeTransformChange: a,
     onTransformChange: h,
     transformPreprocessor: s,
-    shiftCursor: a,
+    shiftCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: g,
+    mouseUpEventVerifier: u,
     mouseWheelEventVerifier: p,
-    scaleWheelFinishTimeout: ((I = r == null ? void 0 : r.scale) == null ? void 0 : I.wheelFinishTimeout) ?? 500,
+    scaleWheelFinishTimeout: ((V = r == null ? void 0 : r.scale) == null ? void 0 : V.wheelFinishTimeout) ?? 500,
     onResizeTransformStarted: (($ = r == null ? void 0 : r.events) == null ? void 0 : $.onResizeTransformStarted) ?? (() => {
     }),
     onResizeTransformFinished: ((ge = r == null ? void 0 : r.events) == null ? void 0 : ge.onResizeTransformFinished) ?? (() => {
@@ -3518,28 +3545,28 @@ const Yt = (r) => {
       });
   }
 }, Zt = (r, e, t) => {
-  var c, u, g;
-  const o = () => "direct", s = (l) => l, a = (l) => l.button === 0, n = () => {
+  var c, g, u;
+  const o = () => "direct", s = (l) => l, n = (l) => l.button === 0, a = () => {
   }, h = () => {
   }, d = () => {
   };
   return {
     connectionTypeResolver: r.connectionTypeResolver ?? o,
     connectionPreprocessor: r.connectionPreprocessor ?? s,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? a,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? a,
-    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? n,
-    onEdgeCreationInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeCreationInterrupted) ?? d,
-    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
+    onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
+    onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
+    onEdgeCreationPrevented: ((u = r.events) == null ? void 0 : u.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? le(r.edgeShape) : e
   };
 }, _t = (r, e) => {
-  var c, u, g;
-  const t = (l) => l, o = (l) => l.button === 0 && l.ctrlKey, s = (l) => l.button === 0, a = (l) => {
+  var c, g, u;
+  const t = (l) => l, o = (l) => l.button === 0 && l.ctrlKey, s = (l) => l.button === 0, n = (l) => {
     const p = e.getPortAdjacentEdgeIds(l);
     return p.length > 0 ? p[p.length - 1] : null;
-  }, n = () => {
+  }, a = () => {
   }, h = () => {
   }, d = () => {
   };
@@ -3547,11 +3574,11 @@ const Yt = (r) => {
     connectionPreprocessor: r.connectionPreprocessor ?? t,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
-    draggingEdgeResolver: r.draggingEdgeResolver ?? a,
+    draggingEdgeResolver: r.draggingEdgeResolver ?? n,
     draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? le(r.draggingEdgeShape) : null,
-    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? n,
-    onEdgeReattachInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeReattachInterrupted) ?? d,
-    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
+    onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
+    onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
+    onEdgeReattachPrevented: ((u = r.events) == null ? void 0 : u.onEdgeReattachPrevented) ?? h
   };
 }, qt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
@@ -3586,10 +3613,10 @@ class ze {
     const t = /* @__PURE__ */ new Map();
     return this.graph.getAllNodeIds().forEach((s) => {
       t.set(s, { x: 0, y: 0 });
-    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, t), this.applyEdgeForces(t), this.currentCoords.forEach((s, a) => {
-      const n = t.get(a), h = {
-        x: n.x / this.nodeMass * this.dt,
-        y: n.y / this.nodeMass * this.dt
+    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, t), this.applyEdgeForces(t), this.currentCoords.forEach((s, n) => {
+      const a = t.get(n), h = {
+        x: a.x / this.nodeMass * this.dt,
+        y: a.y / this.nodeMass * this.dt
       };
       e = Math.max(
         e,
@@ -3601,11 +3628,11 @@ class ze {
   }
   applyEdgeForces(e) {
     this.graph.getAllEdgeIds().forEach((t) => {
-      const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), a = this.graph.getPort(o.to), n = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(a.nodeId), d = this.distanceVectorGenerator.create(
-        n,
+      const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), n = this.graph.getPort(o.to), a = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
+        a,
         h
-      ), u = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, g = d.ex * u, l = d.ey * u, p = e.get(s.nodeId), y = e.get(a.nodeId);
-      p.x += g, p.y += l, y.x -= g, y.y -= l;
+      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, u = d.ex * g, l = d.ey * g, p = e.get(s.nodeId), y = e.get(n.nodeId);
+      p.x += u, p.y += l, y.x -= u, y.y -= l;
     });
   }
 }
@@ -3615,8 +3642,8 @@ class ke {
     this.rand = e;
   }
   create(e, t) {
-    const o = t.x - e.x, s = t.y - e.y, a = o * o + s * s;
-    if (a === 0) {
+    const o = t.x - e.x, s = t.y - e.y, n = o * o + s * s;
+    if (n === 0) {
       const c = this.PI2 * this.rand();
       return {
         ex: Math.cos(c),
@@ -3624,8 +3651,8 @@ class ke {
         d: 0
       };
     }
-    const n = Math.sqrt(a), h = o / n, d = s / n;
-    return { ex: h, ey: d, d: n };
+    const a = Math.sqrt(n), h = o / a, d = s / a;
+    return { ex: h, ey: d, d: a };
   }
 }
 const He = (r) => {
@@ -3643,19 +3670,19 @@ class rr {
   }
   apply(e, t) {
     const o = Array.from(t.keys()), s = o.length;
-    for (let a = 0; a < s; a++) {
-      const n = o[a];
-      for (let h = a + 1; h < s; h++) {
-        const d = o[h], c = e.get(n), u = e.get(d), g = this.distanceVectorGenerator.create(
+    for (let n = 0; n < s; n++) {
+      const a = o[n];
+      for (let h = n + 1; h < s; h++) {
+        const d = o[h], c = e.get(a), g = e.get(d), u = this.distanceVectorGenerator.create(
           c,
-          u
+          g
         ), l = He({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
-          distance: g.d,
+          distance: u.d,
           maxForce: this.maxForce
-        }), p = l * g.ex, y = l * g.ey, w = t.get(n), f = t.get(d);
+        }), p = l * u.ex, y = l * u.ey, w = t.get(a), f = t.get(d);
         w.x -= p, w.y -= y, f.x += p, f.y += y;
       }
     }
@@ -3672,7 +3699,7 @@ const or = (r) => {
   r.forEach((d) => {
     e = Math.min(e, d.x), t = Math.max(t, d.x), o = Math.min(o, d.y), s = Math.max(s, d.y);
   });
-  const a = t - e, n = s - o, h = Math.max(a, n);
+  const n = t - e, a = s - o, h = Math.max(n, a);
   return {
     centerX: (e + t) / 2,
     centerY: (o + s) / 2,
@@ -3708,15 +3735,15 @@ class sr {
       const o = [];
       for (; t.length > 0; ) {
         const s = t.pop();
-        this.processNode(s).forEach((n) => {
-          o.push(n);
+        this.processNode(s).forEach((a) => {
+          o.push(a);
         });
       }
       t = o;
     }
     this.sortedParentNodes.reverse().forEach((o) => {
-      let s = 0, a = 0, n = 0, h = 0;
-      o.lb !== null && (n += o.lb.totalMass, h += o.lb.totalCharge, s += o.lb.chargeCenter.x * o.lb.totalCharge, a += o.lb.chargeCenter.y * o.lb.totalCharge), o.lt !== null && (n += o.lt.totalMass, h += o.lt.totalCharge, s += o.lt.chargeCenter.x * o.lt.totalCharge, a += o.lt.chargeCenter.y * o.lt.totalCharge), o.rb !== null && (n += o.rb.totalMass, h += o.rb.totalCharge, s += o.rb.chargeCenter.x * o.rb.totalCharge, a += o.rb.chargeCenter.y * o.rb.totalCharge), o.rt !== null && (n += o.rt.totalMass, h += o.rt.totalCharge, s += o.rt.chargeCenter.x * o.rt.totalCharge, a += o.rt.chargeCenter.y * o.rt.totalCharge), o.totalMass = n, o.totalCharge = h, o.chargeCenter.x = s / h, o.chargeCenter.y = a / h;
+      let s = 0, n = 0, a = 0, h = 0;
+      o.lb !== null && (a += o.lb.totalMass, h += o.lb.totalCharge, s += o.lb.chargeCenter.x * o.lb.totalCharge, n += o.lb.chargeCenter.y * o.lb.totalCharge), o.lt !== null && (a += o.lt.totalMass, h += o.lt.totalCharge, s += o.lt.chargeCenter.x * o.lt.totalCharge, n += o.lt.chargeCenter.y * o.lt.totalCharge), o.rb !== null && (a += o.rb.totalMass, h += o.rb.totalCharge, s += o.rb.chargeCenter.x * o.rb.totalCharge, n += o.rb.chargeCenter.y * o.rb.totalCharge), o.rt !== null && (a += o.rt.totalMass, h += o.rt.totalCharge, s += o.rt.chargeCenter.x * o.rt.totalCharge, n += o.rt.chargeCenter.y * o.rt.totalCharge), o.totalMass = a, o.totalCharge = h, o.chargeCenter.x = s / h, o.chargeCenter.y = n / h;
     });
   }
   getRoot() {
@@ -3732,21 +3759,21 @@ class sr {
     if (s < this.areaRadiusThreshold)
       return this.setLeaf(e), [];
     this.sortedParentNodes.push(e);
-    const a = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = s / 2;
+    const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = s / 2;
     e.nodeIds.forEach((l) => {
       const { x: p, y } = this.coords.get(l);
-      p < t ? y < o ? d.add(l) : h.add(l) : y < o ? n.add(l) : a.add(l), e.nodeIds.delete(l);
+      p < t ? y < o ? d.add(l) : h.add(l) : y < o ? a.add(l) : n.add(l), e.nodeIds.delete(l);
     });
-    const u = {
+    const g = {
       parent: e,
       lb: null,
       lt: null,
       rb: null,
       rt: null
-    }, g = [];
-    if (a.size > 0) {
+    }, u = [];
+    if (n.size > 0) {
       const l = {
-        nodeIds: a,
+        nodeIds: n,
         totalMass: 0,
         totalCharge: 0,
         chargeCenter: {
@@ -3758,13 +3785,13 @@ class sr {
           centerY: o + c,
           radius: c
         },
-        ...u
+        ...g
       };
-      e.rt = l, g.push(l);
+      e.rt = l, u.push(l);
     }
-    if (n.size > 0) {
+    if (a.size > 0) {
       const l = {
-        nodeIds: n,
+        nodeIds: a,
         totalMass: 0,
         totalCharge: 0,
         chargeCenter: {
@@ -3776,9 +3803,9 @@ class sr {
           centerY: o - c,
           radius: c
         },
-        ...u
+        ...g
       };
-      e.rb = l, g.push(l);
+      e.rb = l, u.push(l);
     }
     if (h.size > 0) {
       const l = {
@@ -3794,9 +3821,9 @@ class sr {
           centerY: o + c,
           radius: c
         },
-        ...u
+        ...g
       };
-      e.lt = l, g.push(l);
+      e.lt = l, u.push(l);
     }
     if (d.size > 0) {
       const l = {
@@ -3812,11 +3839,11 @@ class sr {
           centerY: o - c,
           radius: c
         },
-        ...u
+        ...g
       };
-      e.lb = l, g.push(l);
+      e.lb = l, u.push(l);
     }
-    return g;
+    return u;
   }
   setLeaf(e) {
     e.totalMass = this.nodeMass * e.nodeIds.size, e.totalCharge = this.nodeCharge * e.nodeIds.size, e.chargeCenter = this.calculateLeafChargeCenter(e.nodeIds), e.nodeIds.forEach((t) => {
@@ -3831,8 +3858,8 @@ class sr {
       };
     let t = 0, o = 0;
     return e.forEach((s) => {
-      const a = this.coords.get(s);
-      t += a.x, o += a.y;
+      const n = this.coords.get(s);
+      t += n.x, o += n.y;
     }), { x: t / e.size, y: o / e.size };
   }
 }
@@ -3855,17 +3882,17 @@ class ir {
       nodeMass: this.nodeMass,
       nodeCharge: this.nodeCharge
     });
-    e.forEach((a, n) => {
+    e.forEach((n, a) => {
       const h = this.calculateForceForNode(
-        s.getLeaf(n),
-        n,
+        s.getLeaf(a),
+        a,
         e
-      ), d = t.get(n);
+      ), d = t.get(a);
       this.applyForce(d, h);
     });
   }
   calculateForceForNode(e, t, o) {
-    const s = o.get(t), a = { x: 0, y: 0 };
+    const s = o.get(t), n = { x: 0, y: 0 };
     e.nodeIds.forEach((h) => {
       if (h !== t) {
         const d = o.get(h), c = this.calculateNodeRepulsiveForce({
@@ -3874,72 +3901,72 @@ class ir {
           sourceCoords: d,
           targetCoords: s
         });
-        this.applyForce(a, c);
+        this.applyForce(n, c);
       }
     });
-    let n = e;
-    for (; n !== null; ) {
-      const h = n.parent;
+    let a = e;
+    for (; a !== null; ) {
+      const h = a.parent;
       if (h !== null) {
         const d = this.distanceVectorGenerator.create(
           h.chargeCenter,
           s
         );
         h.box.radius * 2 < d.d * this.theta ? (this.tryApplyFarForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.lb,
-          current: n
+          current: a
         }), this.tryApplyFarForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.rb,
-          current: n
+          current: a
         }), this.tryApplyFarForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.rt,
-          current: n
+          current: a
         }), this.tryApplyFarForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.lt,
-          current: n
+          current: a
         })) : (this.tryApplyNearForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.lb,
-          current: n,
+          current: a,
           nodesCoords: o
         }), this.tryApplyNearForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.rb,
-          current: n,
+          current: a,
           nodesCoords: o
         }), this.tryApplyNearForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.rt,
-          current: n,
+          current: a,
           nodesCoords: o
         }), this.tryApplyNearForce({
-          totalForce: a,
+          totalForce: n,
           targetCoords: s,
           target: h.lt,
-          current: n,
+          current: a,
           nodesCoords: o
         }));
       }
-      n = n.parent;
+      a = a.parent;
     }
-    return a;
+    return n;
   }
   calculateExactForce(e, t, o) {
-    const s = { x: 0, y: 0 }, a = [e];
-    for (; a.length > 0; ) {
-      const n = a.pop();
-      n.nodeIds.forEach((h) => {
+    const s = { x: 0, y: 0 }, n = [e];
+    for (; n.length > 0; ) {
+      const a = n.pop();
+      a.nodeIds.forEach((h) => {
         const d = o.get(h), c = this.calculateNodeRepulsiveForce({
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
@@ -3947,7 +3974,7 @@ class ir {
           targetCoords: t
         });
         this.applyForce(s, c);
-      }), n.lb !== null && a.push(n.lb), n.rb !== null && a.push(n.rb), n.lt !== null && a.push(n.lt), n.rt !== null && a.push(n.rt);
+      }), a.lb !== null && n.push(a.lb), a.rb !== null && n.push(a.rb), a.lt !== null && n.push(a.lt), a.rt !== null && n.push(a.rt);
     }
     return s;
   }
@@ -4019,18 +4046,18 @@ class Xe {
     this.rand = e.rand, this.sparsity = e.sparsity;
   }
   calculateCoordinates(e) {
-    const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), a = t.getAllNodeIds().filter((y) => {
+    const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((y) => {
       const w = t.getNode(y);
       return w.x === null || w.y === null;
-    }), n = Math.sqrt(a.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, u = o.createContentCoords(c), g = n / 2, l = {
-      x: u.x - g,
-      y: u.y - g
+    }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, g = o.createContentCoords(c), u = a / 2, l = {
+      x: g.x - u,
+      y: g.y - u
     };
     return t.getAllNodeIds().forEach((y) => {
       const w = t.getNode(y);
       s.set(y, {
-        x: w.x ?? l.x + n * this.rand(),
-        y: w.y ?? l.y + n * this.rand()
+        x: w.x ?? l.x + a * this.rand(),
+        y: w.y ?? l.y + a * this.rand()
       });
     }), s;
   }
@@ -4064,7 +4091,7 @@ class nr {
       graph: t,
       viewport: o
     });
-    for (let a = 0; a < this.maxIterations && !(new ze(
+    for (let n = 0; n < this.maxIterations && !(new ze(
       t,
       s,
       {
@@ -4075,7 +4102,7 @@ class nr {
         edgeEquilibriumLength: this.edgeEquilibriumLength,
         edgeStiffness: this.edgeStiffness
       }
-    ).apply() < this.convergenceVelocity); a++)
+    ).apply() < this.convergenceVelocity); n++)
       ;
     return s;
   }
@@ -4100,30 +4127,30 @@ class ar {
     this.forest.add({ root: t, sequence: o });
     let s = [t];
     for (this.remainingNodeIds.delete(t.nodeId); s.length > 0; ) {
-      const a = [];
-      s.forEach((n) => {
-        o.push(n);
-        const h = this.graph.getNodeOutgoingEdgeIds(n.nodeId).map((u) => {
-          const g = this.graph.getEdge(u);
-          return this.graph.getPort(g.to).nodeId;
-        }), d = this.graph.getNodeIncomingEdgeIds(n.nodeId).map((u) => {
-          const g = this.graph.getEdge(u);
-          return this.graph.getPort(g.from).nodeId;
+      const n = [];
+      s.forEach((a) => {
+        o.push(a);
+        const h = this.graph.getNodeOutgoingEdgeIds(a.nodeId).map((g) => {
+          const u = this.graph.getEdge(g);
+          return this.graph.getPort(u.to).nodeId;
+        }), d = this.graph.getNodeIncomingEdgeIds(a.nodeId).map((g) => {
+          const u = this.graph.getEdge(g);
+          return this.graph.getPort(u.from).nodeId;
         });
         (/* @__PURE__ */ new Set([
           ...h,
           ...d
-        ])).forEach((u) => {
-          if (!this.remainingNodeIds.has(u))
+        ])).forEach((g) => {
+          if (!this.remainingNodeIds.has(g))
             return;
-          this.remainingNodeIds.delete(u);
-          const g = {
-            nodeId: u,
+          this.remainingNodeIds.delete(g);
+          const u = {
+            nodeId: g,
             children: /* @__PURE__ */ new Set()
           };
-          n.children.add(g), a.push(g);
+          a.children.add(u), n.push(u);
         });
-      }), s = a;
+      }), s = n;
     }
   }
 }
@@ -4133,37 +4160,37 @@ class hr {
   }
   generate(e) {
     let t = 0;
-    const o = [], s = e.length - 1, a = [];
+    const o = [], s = e.length - 1, n = [];
     e.forEach((h, d) => {
-      if (t += this.params.spaceAroundRadius, h.forEach((c, u) => {
-        a[u] === void 0 ? a[u] = {
+      if (t += this.params.spaceAroundRadius, h.forEach((c, g) => {
+        n[g] === void 0 ? n[g] = {
           start: t + c.start,
           end: t + c.end
-        } : a[u].end = t + c.end;
+        } : n[g].end = t + c.end;
       }), o.push(t), d !== s) {
-        const c = e[d + 1], u = a.map((g) => ({
-          start: g.start - t,
-          end: g.end - t
+        const c = e[d + 1], g = n.map((u) => ({
+          start: u.start - t,
+          end: u.end - t
         }));
-        t += this.calculateMaxDiff(u, c);
+        t += this.calculateMaxDiff(g, c);
       }
       t += this.params.spaceAroundRadius;
     });
-    const n = t / 2;
+    const a = t / 2;
     return {
-      childOffsets: o.map((h) => h - n),
-      subtreeSpans: a.map((h) => ({
-        start: h.start - n,
-        end: h.end - n
+      childOffsets: o.map((h) => h - a),
+      subtreeSpans: n.map((h) => ({
+        start: h.start - a,
+        end: h.end - a
       }))
     };
   }
   calculateMaxDiff(e, t) {
     let o = 0;
     const s = Math.min(e.length, t.length);
-    for (let a = 0; a < s; a++) {
-      const n = e[a].end - t[a].start;
-      o = Math.max(o, n);
+    for (let n = 0; n < s; n++) {
+      const a = e[n].end - t[n].start;
+      o = Math.max(o, a);
     }
     return o - 2 * this.params.spaceAroundRadius;
   }
@@ -4176,17 +4203,17 @@ class dr {
     const o = t.spaceAroundRadius, s = new hr({
       spaceAroundRadius: o
     });
-    [...this.tree.sequence].reverse().forEach((a) => {
-      const n = Array.from(a.children).map(
+    [...this.tree.sequence].reverse().forEach((n) => {
+      const a = Array.from(n.children).map(
         (c) => this.treeSpans.get(c.nodeId)
-      ), h = s.generate(n);
+      ), h = s.generate(a);
       let d = 0;
-      a.children.forEach((c) => {
+      n.children.forEach((c) => {
         this.offsets.set(c.nodeId, h.childOffsets[d]), d++;
-      }), this.treeSpans.set(a.nodeId, [
+      }), this.treeSpans.set(n.nodeId, [
         { start: -o, end: o },
         ...h.subtreeSpans
-      ]), a.children.forEach((c) => {
+      ]), n.children.forEach((c) => {
         this.treeSpans.delete(c.nodeId);
       });
     }), this.offsets.set(this.tree.root.nodeId, 0);
@@ -4201,27 +4228,27 @@ class cr {
   }
   calculateCoordinates(e) {
     const t = /* @__PURE__ */ new Map(), s = new ar(e.graph).generate();
-    let a = 0;
-    return s.forEach((n) => {
-      t.set(n.root.nodeId, { x: a, y: 0 });
-      const d = new dr(n, {
+    let n = 0;
+    return s.forEach((a) => {
+      t.set(a.root.nodeId, { x: n, y: 0 });
+      const d = new dr(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
-      let c = [n.root];
+      let c = [a.root];
       for (; c.length > 0; ) {
-        const u = [];
-        a += this.params.layerWidth, c.forEach((g) => {
-          g.children.forEach((l) => {
-            const p = t.get(g.nodeId).y;
+        const g = [];
+        n += this.params.layerWidth, c.forEach((u) => {
+          u.children.forEach((l) => {
+            const p = t.get(u.nodeId).y;
             t.set(l.nodeId, {
               y: p + d.get(l.nodeId),
-              x: a
-            }), u.push(l);
+              x: n
+            }), g.push(l);
           });
-        }), c = u;
+        }), c = g;
       }
-    }), t.forEach((n, h) => {
-      t.set(h, this.params.transform(n));
+    }), t.forEach((a, h) => {
+      t.set(h, this.params.transform(a));
     }), t;
   }
 }
@@ -4249,13 +4276,13 @@ class lr {
     });
   }
   calculateNextCoordinates(e) {
-    const { graph: t, viewport: o, dt: s } = e, a = this.fillerLayoutAlgorithm.calculateCoordinates({
+    const { graph: t, viewport: o, dt: s } = e, n = this.fillerLayoutAlgorithm.calculateCoordinates({
       graph: t,
       viewport: o
     });
     return new ze(
       t,
-      a,
+      n,
       {
         distanceVectorGenerator: this.distanceVectorGenerator,
         nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -4265,15 +4292,15 @@ class lr {
         edgeStiffness: this.edgeStiffness
       }
     ).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((c) => {
-      const u = t.getNode(c);
-      return u.x === null || u.y === null;
-    }) ? /* @__PURE__ */ new Map() : a;
+      const g = t.getNode(c);
+      return g.x === null || g.y === null;
+    }) ? /* @__PURE__ */ new Map() : n;
   }
 }
 const Ge = (r) => {
   let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
-  for (let a = 0, n; a < r.length; a++)
-    n = r.charCodeAt(a), e = t ^ Math.imul(e ^ n, 597399067), t = o ^ Math.imul(t ^ n, 2869860233), o = s ^ Math.imul(o ^ n, 951274213), s = e ^ Math.imul(s ^ n, 2716044179);
+  for (let n = 0, a; n < r.length; n++)
+    a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = o ^ Math.imul(t ^ a, 2869860233), o = s ^ Math.imul(o ^ a, 951274213), s = e ^ Math.imul(s ^ a, 2716044179);
   return e = Math.imul(o ^ e >>> 18, 597399067), t = Math.imul(s ^ t >>> 22, 2869860233), o = Math.imul(e ^ o >>> 17, 951274213), s = Math.imul(t ^ s >>> 19, 2716044179), e ^= t ^ o ^ s, t ^= e, o ^= e, s ^= e, [e >>> 0, t >>> 0, o >>> 0, s >>> 0];
 }, je = (r, e, t, o) => function() {
   r |= 0, e |= 0, t |= 0, o |= 0;
@@ -4356,14 +4383,14 @@ const Ge = (r) => {
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
 }), yr = (r) => {
-  const { a: e, b: t, c: o, d: s, e: a, f: n } = r, h = e * a - t * s;
+  const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
-    a: a / h,
+    a: n / h,
     b: -t / h,
-    c: (t * n - o * a) / h,
+    c: (t * a - o * n) / h,
     d: -s / h,
     e: e / h,
-    f: (o * s - e * n) / h
+    f: (o * s - e * a) / h
   };
 };
 class wr {
@@ -4471,13 +4498,13 @@ const fr = (r) => {
   };
   const o = new wr();
   return e.forEach((s) => {
-    const a = o.resolve(s);
-    t = z(t, a);
+    const n = o.resolve(s);
+    t = z(t, n);
   }), (s) => {
-    const { x: a, y: n } = s;
+    const { x: n, y: a } = s;
     return {
-      x: t.a * a + t.b * n + t.c,
-      y: t.d * a + t.e * n + t.f
+      x: t.a * n + t.b * a + t.c,
+      y: t.d * n + t.e * a + t.f
     };
   };
 }, vr = (r) => {
@@ -4548,7 +4575,7 @@ const fr = (r) => {
     edgesPriorityFn: o
   };
 }, Nr = (r) => {
-  var t, o, s, a, n;
+  var t, o, s, n, a;
   const e = br(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
@@ -4559,21 +4586,22 @@ const fr = (r) => {
       priorityFn: e.nodesPriorityFn
     },
     ports: {
-      direction: ((a = r.ports) == null ? void 0 : a.direction) ?? 0
+      direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: le(((n = r.edges) == null ? void 0 : n.shape) ?? {}),
+      shapeFactory: le(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 }, Pr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Cr = (r) => {
-  var o, s;
+  var o, s, n;
   const { canvasDefaults: e } = r, t = r.hasLayout ? Pr(r.layoutParams) : re;
   return {
     focus: {
       contentOffset: ((o = e.focus) == null ? void 0 : o.contentOffset) ?? 100,
       minContentScale: ((s = e.focus) == null ? void 0 : s.minContentScale) ?? 0,
-      schedule: t
+      schedule: t,
+      animationDuration: ((n = e.focus) == null ? void 0 : n.animationDuration) ?? 0
     }
   };
 };
@@ -4642,12 +4670,12 @@ class Dr {
       o.main,
       t,
       e
-    ), a = Nr(
+    ), n = Nr(
       this.canvasDefaults
-    ), n = new Ie(
+    ), a = new Ve(
       t,
       s,
-      a
+      n
     ), h = xr(this.layoutConfig), d = Cr({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
@@ -4655,11 +4683,12 @@ class Dr {
     }), c = new Oe(
       t,
       e,
-      d
-    ), u = new $e(e), g = new Ve(t), l = new Se(
-      g,
+      d,
+      this.window
+    ), g = new $e(e), u = new Ie(t), l = new Se(
       u,
-      n,
+      g,
+      a,
       c
     );
     if (this.hasBackground && ie.configure(
@@ -4681,8 +4710,8 @@ class Dr {
     if (this.hasUserConnectablePorts) {
       const y = Zt(
         this.connectablePortsConfig,
-        a.edges.shapeFactory,
-        a.ports.direction
+        n.edges.shapeFactory,
+        n.ports.direction
       );
       ne.configure(
         l,