@html-graph/html-graph 8.9.0 → 8.11.0

package/dist/html-graph.js

@@ -71,9 +71,9 @@ class Ee {
       a,
       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, n, 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);
@@ -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, 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), g = Math.max(a.y, n.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
 class tt {
@@ -125,8 +125,8 @@ class tt {
         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);
+        const h = this.renderingBox.hasEdge(n), d = this.attachedEdges.has(n), c = this.graphStore.getEdge(n), 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(n) : !h && d && a.add(n);
       }), a.forEach((n) => {
         this.handleDetachEdge(n);
       }), o.forEach((n) => {
@@ -864,8 +864,8 @@ class ht {
       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,
@@ -897,28 +897,28 @@ class dt {
       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 },
+      { x: d.x + g, y: d.y },
       a,
       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 },
+    ) : c, y = Math.cos(h) * u, w = Math.sin(h) * u, f = x(
+      { x: d.x + g, y: d.y },
       a,
       d
     ), m = {
       x: f.x + y,
       y: f.y + w
     }, A = x(
-      { x: c.x - u, y: c.y },
+      { x: c.x - g, y: c.y },
       n,
       c
     ), N = {
@@ -930,10 +930,10 @@ class dt {
     }, T = {
       x: f.x + s * a.x,
       y: f.y + s * a.y
-    }, V = {
+    }, I = {
       x: A.x - s * n.x,
       y: A.y - s * n.y
-    }, I = {
+    }, 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;
   }
@@ -968,13 +968,13 @@ const ee = Object.freeze({
     const o = r.length - 1;
     let s = 0, a = 0, n = 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 = -a, u = n), p) {
         const T = r[d + 1];
         s = T.x - h.x, a = T.y - h.y, n = Math.sqrt(s * s + a * a);
       }
-      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 = 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 = 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 },
@@ -1030,12 +1030,12 @@ class lt {
       arrowOffset: h,
       roundness: d,
       hasSourceArrow: c,
-      hasTargetArrow: u
-    } = e, g = c ? x(
+      hasTargetArrow: g
+    } = e, u = c ? x(
       { x: t.x + n, y: t.y },
       s,
       t
-    ) : t, l = u ? x(
+    ) : t, l = g ? x(
       {
         x: o.x - n,
         y: o.y
@@ -1059,7 +1059,7 @@ class lt {
       }
     );
     this.path = R(
-      [g, ...f.points, l],
+      [u, ...f.points, l],
       d
     ), this.midpoint = f.midpoint;
   }
@@ -1077,8 +1077,8 @@ class gt {
       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 },
@@ -1091,7 +1091,7 @@ class gt {
       },
       d,
       a
-    ) : a, w = n + c, f = Math.cos(u) * g, m = Math.sin(u) * g, A = x(
+    ) : a, w = n + c, f = Math.cos(g) * u, m = Math.sin(g) * u, A = x(
       { x: s.x + w, y: s.y },
       h,
       s
@@ -1128,8 +1128,8 @@ class ut {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: u
-    } = e, g = this.createArrowPoint(
+      roundness: g
+    } = e, u = this.createArrowPoint(
       s,
       h,
       t,
@@ -1141,8 +1141,8 @@ class ut {
       -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);
     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 };
@@ -1160,7 +1160,7 @@ class ut {
 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 },
@@ -1206,8 +1206,8 @@ class yt {
       arrowOffset: h,
       fromDir: d,
       toDir: c,
-      roundness: u
-    } = e, g = s ? x(
+      roundness: g
+    } = e, u = s ? x(
       { x: t.x + n, 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: a, origin: n, hasArrow: h } = e, d = o + s, c = d + 2 * t, u = [
       { x: o, y: 0 },
       { x: d, y: 0 },
       { x: d, y: t },
@@ -1253,15 +1253,15 @@ 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, a, { x: 0, y: 0 })).map((p) => ({ x: p.x + n.x, y: p.y + n.y })), l = `M ${n.x} ${n.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: a, origin: n, 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 },
@@ -1290,25 +1290,25 @@ class ft {
       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,
       flip: 1,
       shift: t,
       arrowLength: d,
-      dir: g
+      dir: u
     }), p = this.createDirectLinePoint({
       offset: a,
       hasArrow: h,
       flip: -1,
       shift: o,
       arrowLength: d,
-      dir: g
+      dir: u
     });
     this.path = `M ${l.x} ${l.y} L ${p.x} ${p.y}`;
   }
@@ -1337,8 +1337,8 @@ class xt {
       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 },
       h,
@@ -1358,7 +1358,7 @@ class xt {
       { x: n.x - y, y: n.y },
       d,
       n
-    ), m = vt(w, f, g);
+    ), 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
     );
   }
 }
@@ -1392,8 +1392,8 @@ class At {
       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,
@@ -1413,7 +1413,7 @@ class At {
       { x: d.x - y, y: d.y },
       n,
       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
     );
   }
 }
@@ -1476,9 +1476,9 @@ class X {
     );
     Re(this.svg, { x: t, y: o, width: s, height: a });
     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(n, h, d, c);
     this.line.setAttribute("d", l.path);
     let p = null;
     this.sourceArrow && (p = this.arrowRenderer({
@@ -1488,7 +1488,7 @@ class X {
     }), 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({
@@ -1520,8 +1520,8 @@ const Et = (r) => (e) => {
   ).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(
     {
@@ -1537,12 +1537,12 @@ const Et = (r) => (e) => {
       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}`;
+    (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 ${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}`, g = `A ${o} ${o} 0 0 1 ${n[0].x} ${n[0].y}`;
+  return `${h} ${d} ${c} ${g}`;
 }, U = (r) => {
   if (typeof r == "function")
     return r;
@@ -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 - n.x) / u,
+        y: (h.y - n.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
     });
   }
 }
@@ -1979,7 +1979,7 @@ class Mr {
     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
+  contentPadding: e.focus.contentPadding,
+  animationDuration: e.focus.animationDuration
 } : {
   minContentScale: r.minContentScale ?? e.focus.minContentScale,
   nodes: r.nodes ?? [],
-  contentOffset: r.contentOffset ?? e.focus.contentOffset
+  contentPadding: r.contentPadding ?? r.contentOffset ?? e.focus.contentPadding,
+  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);
@@ -2285,21 +2287,22 @@ class Oe {
   }
   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,
+    let g = Be(n, d, c);
+    const u = t == null ? void 0 : t.contentScale;
+    if (u !== void 0) {
+      const p = 1 / u;
+      g = Ue(
+        g,
+        p / n.scale,
         a.x,
         a.y
       );
     }
-    this.viewportStore.patchViewportMatrix(u);
+    const l = (t == null ? void 0 : t.animationDuration) ?? 0;
+    l > 0 ? this.animateNavigation(n, 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);
     });
@@ -2316,20 +2319,40 @@ class Oe {
       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;
+      t -= e.contentPadding, s -= e.contentPadding, o += e.contentPadding, a += e.contentPadding;
       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
+      }, { scale: c } = this.viewportStore.getContentMatrix(), g = (a - 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 a = {
+      scale: t.scale - e.scale,
+      x: t.x - e.x,
+      y: t.y - e.y
+    }, n = (h) => {
+      s === void 0 && (s = h);
+      const d = Math.min((h - s) / o, 1);
+      d <= 1 && this.viewportStore.patchViewportMatrix({
+        scale: e.scale + d * a.scale,
+        x: e.x + d * a.x,
+        y: e.y + d * a.y
+      }), d < 1 && this.win.requestAnimationFrame(n);
+    };
+    this.win.requestAnimationFrame(n);
+  }
 }
-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), a = new $e(e), n = 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,
-    a,
-    n
-  ), d = {
+  }, d = new Ve(
+    o,
+    n,
+    h
+  ), c = {
     focus: {
-      contentOffset: 0,
+      contentPadding: 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, a, d, g);
 };
 class G {
   constructor(e, t, o, s) {
@@ -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;
   }
@@ -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: a } = this.viewport.getViewportMatrix(), n = e * o, h = t * o, d = s - this.nodeHorizontal, c = a - this.nodeVertical, g = s + n + this.nodeHorizontal, u = a + 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: a } = this.viewport.getViewportMatrix(), n = e * o, h = t * o, d = s - n - this.nodeHorizontal, c = a - h - this.nodeVertical, g = 3 * n + 2 * this.nodeHorizontal, u = 3 * h + 2 * this.nodeVertical;
     this.trigger.emit({
       x: d,
       y: c,
-      width: u,
-      height: g
+      width: g,
+      height: u
     });
   }
 }
@@ -2994,7 +3019,8 @@ class ne {
     });
     this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = a, this.overlayCanvas = We(
       this.overlayLayer,
-      this.viewportStore
+      this.viewportStore,
+      this.window
     ), G.configure(
       this.canvas,
       this.overlayLayer,
@@ -3033,20 +3059,20 @@ class ne {
     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,
       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,
@@ -3090,7 +3116,8 @@ class ae {
     });
     this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = a, this.overlayCanvas = We(
       this.overlayLayer,
-      this.viewportStore
+      this.viewportStore,
+      this.window
     ), G.configure(
       this.canvas,
       this.overlayLayer,
@@ -3126,12 +3153,12 @@ class ae {
       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 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
@@ -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;
+  }), 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, 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,
     dragCursor: d,
     gridSize: r.gridSize ?? null,
-    mouseDownEventVerifier: u,
+    mouseDownEventVerifier: g,
     mouseUpEventVerifier: l,
     onNodeDragStarted: e,
     onNodeDrag: t,
@@ -3350,28 +3377,28 @@ const Yt = (r) => {
     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 };
+    const g = a.canvasHeight * a.prevTransform.scale, u = s - g;
+    return h > u && h > a.prevTransform.y && (h = Math.max(a.prevTransform.y, u)), { scale: a.nextTransform.scale, x: n, 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;
+    let d = h.scale, c = h.x, g = 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;
+      d = Math.max(n.scale, s), c = n.x, g = n.y;
+      const u = (d - n.scale) / (h.scale - n.scale);
+      c = n.x + (h.x - n.x) * u, g = n.y + (h.y - n.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;
+      d = Math.min(n.scale, o), c = n.x, g = n.y;
+      const u = (d - n.scale) / (h.scale - n.scale);
+      c = n.x + (h.x - n.x) * u, g = n.y + (h.y - n.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(
@@ -3410,21 +3437,21 @@ const Yt = (r) => {
   ) : 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) ?? (() => {
   }), 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,
     onTransformChange: h,
     transformPreprocessor: s,
     shiftCursor: a,
     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,7 +3545,7 @@ const Yt = (r) => {
       });
   }
 }, Zt = (r, e, t) => {
-  var c, u, g;
+  var c, g, u;
   const o = () => "direct", s = (l) => l, a = (l) => l.button === 0, n = () => {
   }, h = () => {
   }, d = () => {
@@ -3529,13 +3556,13 @@ const Yt = (r) => {
     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,
+    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;
+  var c, g, u;
   const t = (l) => l, o = (l) => l.button === 0 && l.ctrlKey, s = (l) => l.button === 0, a = (l) => {
     const p = e.getPortAdjacentEdgeIds(l);
     return p.length > 0 ? p[p.length - 1] : null;
@@ -3550,8 +3577,8 @@ const Yt = (r) => {
     draggingEdgeResolver: r.draggingEdgeResolver ?? a,
     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
+    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,
@@ -3604,8 +3631,8 @@ class ze {
       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,
         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(a.nodeId);
+      p.x += u, p.y += l, y.x -= u, y.y -= l;
     });
   }
 }
@@ -3646,16 +3673,16 @@ class rr {
     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(
+        const d = o[h], c = e.get(n), 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(n), f = t.get(d);
         w.x -= p, w.y -= y, f.x += p, f.y += y;
       }
     }
@@ -3737,13 +3764,13 @@ class sr {
       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);
     });
-    const u = {
+    const g = {
       parent: e,
       lb: null,
       lt: null,
       rb: null,
       rt: null
-    }, g = [];
+    }, u = [];
     if (a.size > 0) {
       const l = {
         nodeIds: a,
@@ -3758,9 +3785,9 @@ 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) {
       const l = {
@@ -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) => {
@@ -4022,9 +4049,9 @@ class Xe {
     const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), a = 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
+    }), n = Math.sqrt(a.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, g = o.createContentCoords(c), u = n / 2, l = {
+      x: g.x - u,
+      y: g.y - u
     };
     return t.getAllNodeIds().forEach((y) => {
       const w = t.getNode(y);
@@ -4103,25 +4130,25 @@ class ar {
       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 h = this.graph.getNodeOutgoingEdgeIds(n.nodeId).map((g) => {
+          const u = this.graph.getEdge(g);
+          return this.graph.getPort(u.to).nodeId;
+        }), d = this.graph.getNodeIncomingEdgeIds(n.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);
+          n.children.add(u), a.push(u);
         });
       }), s = a;
     }
@@ -4135,17 +4162,17 @@ class hr {
     let t = 0;
     const o = [], s = e.length - 1, a = [];
     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) => {
+        a[g] === void 0 ? a[g] = {
           start: t + c.start,
           end: t + c.end
-        } : a[u].end = t + c.end;
+        } : a[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 = a.map((u) => ({
+          start: u.start - t,
+          end: u.end - t
         }));
-        t += this.calculateMaxDiff(u, c);
+        t += this.calculateMaxDiff(g, c);
       }
       t += this.params.spaceAroundRadius;
     });
@@ -4209,16 +4236,16 @@ class cr {
       }).generate();
       let c = [n.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 = [];
+        a += 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);
+            }), g.push(l);
           });
-        }), c = u;
+        }), c = g;
       }
     }), t.forEach((n, h) => {
       t.set(h, this.params.transform(n));
@@ -4265,8 +4292,8 @@ class lr {
         edgeStiffness: this.edgeStiffness
       }
     ).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((c) => {
-      const u = t.getNode(c);
-      return u.x === null || u.y === null;
+      const g = t.getNode(c);
+      return g.x === null || g.y === null;
     }) ? /* @__PURE__ */ new Map() : a;
   }
 }
@@ -4567,13 +4594,14 @@ const fr = (r) => {
     }
   };
 }, Pr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Cr = (r) => {
-  var o, s;
+  var o, s, a, 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
+      contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
+      minContentScale: ((a = e.focus) == null ? void 0 : a.minContentScale) ?? 0,
+      schedule: t,
+      animationDuration: ((n = e.focus) == null ? void 0 : n.animationDuration) ?? 0
     }
   };
 };
@@ -4644,7 +4672,7 @@ class Dr {
       e
     ), a = Nr(
       this.canvasDefaults
-    ), n = new Ie(
+    ), n = new Ve(
       t,
       s,
       a
@@ -4655,10 +4683,11 @@ 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,
+      g,
       n,
       c
     );