@html-graph/html-graph 1.1.1 → 1.2.0

package/dist/main.js

@@ -1,13 +1,13 @@
 var de = Object.defineProperty;
 var ce = (t, e, r) => e in t ? de(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var i = (t, e, r) => ce(t, typeof e != "symbol" ? e + "" : e, r);
-const Z = (t, e) => ({
+const q = (t, e) => ({
   x: t / 2,
   y: e / 2
 }), v = (t, e, r) => ({
   x: e.x * t.x - e.y * t.y + ((1 - e.x) * r.x + e.y * r.y),
   y: e.y * t.x + e.x * t.y + ((1 - e.x) * r.y - e.y * r.x)
-}), N = (t, e, r) => ({ x: e * Math.cos(t), y: r * Math.sin(t) }), w = {
+}), p = (t, e, r) => ({ x: e * Math.cos(t), y: r * Math.sin(t) }), w = {
   x: 0,
   y: 0
 }, T = (t, e, r, o) => {
@@ -15,23 +15,23 @@ const Z = (t, e) => ({
     w,
     { x: r, y: o },
     { x: r, y: -o }
-  ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), s = `M ${d[0].x} ${d[0].y}`, h = `L ${d[1].x} ${d[1].y}`, c = `L ${d[2].x} ${d[2].y}`;
-  return `${s} ${h} ${c}`;
-}, $ = (t, e) => {
+  ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${d[0].x} ${d[0].y}`, h = `L ${d[1].x} ${d[1].y}`, c = `L ${d[2].x} ${d[2].y}`;
+  return `${n} ${h} ${c}`;
+}, U = (t, e) => {
   const r = [];
   if (t.length > 0 && r.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && r.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
     const o = t.length - 1;
-    let n = 0, d = 0, s = 0;
+    let s = 0, d = 0, n = 0;
     t.forEach((h, c) => {
-      let a = 0, l = 0, u = 0;
-      const f = c > 0, A = c < o, y = f && A;
-      if (f && (a = -n, l = -d, u = s), A) {
-        const L = t[c + 1];
-        n = L.x - h.x, d = L.y - h.y, s = Math.sqrt(n * n + d * d);
+      let a = 0, l = 0, g = 0;
+      const f = c > 0, x = c < o, y = f && x;
+      if (f && (a = -s, l = -d, g = n), x) {
+        const D = t[c + 1];
+        s = D.x - h.x, d = D.y - h.y, n = Math.sqrt(s * s + d * d);
       }
-      const E = s !== 0 ? Math.min((y ? e : 0) / s, c < o - 1 ? 0.5 : 1) : 0, C = y ? { x: h.x + n * E, y: h.y + d * E } : h, P = u !== 0 ? Math.min((y ? e : 0) / u, c > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + a * P, y: h.y + l * P } : h;
-      c > 0 && r.push(`L ${D.x} ${D.y}`), y && r.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${C.x} ${C.y}`
+      const E = n !== 0 ? Math.min((y ? e : 0) / n, c < o - 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + s * E, y: h.y + d * E } : h, M = g !== 0 ? Math.min((y ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, V = y ? { x: h.x + a * M, y: h.y + l * M } : h;
+      c > 0 && r.push(`L ${V.x} ${V.y}`), y && r.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${N.x} ${N.y}`
       );
     });
   }
@@ -45,7 +45,7 @@ const Z = (t, e) => ({
 }, Y = (t, e) => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("stroke", t), r.setAttribute("stroke-width", `${e}`), r.setAttribute("fill", "none"), r;
-}, p = (t) => {
+}, b = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", t), e;
 }, X = (t, e) => {
@@ -55,11 +55,11 @@ const Z = (t, e) => ({
   }, o = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, n = Math.min(r.x, o.x), d = Math.min(r.y, o.y), s = Math.abs(o.x - r.x), h = Math.abs(o.y - r.y), c = r.x <= o.x ? 1 : -1, a = r.y <= o.y ? 1 : -1;
+  }, s = Math.min(r.x, o.x), d = Math.min(r.y, o.y), n = Math.abs(o.x - r.x), h = Math.abs(o.y - r.y), c = r.x <= o.x ? 1 : -1, a = r.y <= o.y ? 1 : -1;
   return {
-    x: n,
+    x: s,
     y: d,
-    width: s,
+    width: n,
     height: h,
     flipX: c,
     flipY: a
@@ -76,11 +76,11 @@ const Z = (t, e) => ({
   ), o = {
     x: e.x + t.fromVect.x * t.curvature,
     y: e.y + t.fromVect.y * t.curvature
-  }, n = {
+  }, s = {
     x: r.x - t.toVect.x * t.curvature,
     y: r.y - t.toVect.y * t.curvature
-  }, d = `M ${e.x} ${e.y} C ${o.x} ${o.y}, ${n.x} ${n.y}, ${r.x} ${r.y}`, s = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, h = t.hasTargetArrow ? "" : ` M ${r.x} ${r.y} L ${t.to.x} ${t.to.y}`;
-  return `${s}${d}${h}`;
+  }, d = `M ${e.x} ${e.y} C ${o.x} ${o.y}, ${s.x} ${s.y}, ${r.x} ${r.y}`, n = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, h = t.hasTargetArrow ? "" : ` M ${r.x} ${r.y} L ${t.to.x} ${t.to.y}`;
+  return `${n}${d}${h}`;
 }, le = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
@@ -90,41 +90,41 @@ const Z = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, o = t.arrowLength, n = Math.cos(t.detourDirection) * t.detourDistance, d = Math.sin(t.detourDirection) * t.detourDistance, s = n * t.flipX, h = d * t.flipY, c = v(
+  ) : t.to, o = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, d = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, h = d * t.flipY, c = v(
     { x: o, y: w.y },
     t.fromVect,
     w
   ), a = {
-    x: c.x + s,
+    x: c.x + n,
     y: c.y + h
   }, l = v(
     { x: t.to.x - o, y: t.to.y },
     t.toVect,
     t.to
-  ), u = {
-    x: l.x + s,
+  ), g = {
+    x: l.x + n,
     y: l.y + h
-  }, f = { x: (a.x + u.x) / 2, y: (a.y + u.y) / 2 }, A = {
+  }, f = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
     x: c.x + t.curvature * t.fromVect.x,
     y: c.y + t.curvature * t.fromVect.y
   }, y = {
     x: l.x - t.curvature * t.toVect.x,
     y: l.y - t.curvature * t.toVect.y
   }, m = {
-    x: c.x + s,
+    x: c.x + n,
     y: c.y + h
   }, E = {
-    x: l.x + s,
+    x: l.x + n,
     y: l.y + h
   };
   return [
     `M ${e.x} ${e.y}`,
     `L ${c.x} ${c.y}`,
-    `C ${A.x} ${A.y} ${m.x} ${m.y} ${f.x} ${f.y}`,
+    `C ${x.x} ${x.y} ${m.x} ${m.y} ${f.x} ${f.y}`,
     `C ${E.x} ${E.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
     `L ${r.x} ${r.y}`
   ].join(" ");
-}, ue = (t) => {
+}, ge = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
@@ -133,16 +133,16 @@ const Z = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, o = t.arrowLength + t.arrowOffset, n = o - t.roundness, d = v({ x: n, y: w.y }, t.fromVect, w), s = v(
-    { x: t.to.x - n, y: t.to.y },
+  ) : t.to, o = t.arrowLength + t.arrowOffset, s = o - t.roundness, d = v({ x: s, y: w.y }, t.fromVect, w), n = v(
+    { x: t.to.x - s, y: t.to.y },
     t.toVect,
     t.to
-  ), h = Math.max((d.x + s.x) / 2, o), c = t.to.y / 2, a = { x: t.flipX > 0 ? h : -o, y: d.y }, l = { x: a.x, y: c }, u = {
+  ), h = Math.max((d.x + n.x) / 2, o), c = t.to.y / 2, a = { x: t.flipX > 0 ? h : -o, y: d.y }, l = { x: a.x, y: c }, g = {
     x: t.flipX > 0 ? t.to.x - h : t.to.x + o,
-    y: s.y
-  }, f = { x: u.x, y: c };
-  return $(
-    [e, d, a, l, f, u, s, r],
+    y: n.y
+  }, f = { x: g.x, y: c };
+  return U(
+    [e, d, a, l, f, g, n, r],
     t.roundness
   );
 }, j = (t) => {
@@ -154,20 +154,20 @@ const Z = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, o = t.arrowLength + t.arrowOffset, n = v(
+  ) : t.to, o = t.arrowLength + t.arrowOffset, s = v(
     { x: o, y: w.y },
     t.fromVect,
     w
-  ), d = Math.cos(t.detourDirection) * t.detourDistance, s = Math.sin(t.detourDirection) * t.detourDistance, h = d * t.flipX, c = s * t.flipY, a = { x: n.x + h, y: n.y + c }, l = v(
+  ), d = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, h = d * t.flipX, c = n * t.flipY, a = { x: s.x + h, y: s.y + c }, l = v(
     { x: t.to.x - o, y: t.to.y },
     t.toVect,
     t.to
-  ), u = { x: l.x + h, y: l.y + c };
-  return $(
-    [e, n, a, u, l, r],
+  ), g = { x: l.x + h, y: l.y + c };
+  return U(
+    [e, s, a, g, l, r],
     t.roundness
   );
-}, ge = (t) => {
+}, ue = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
     t.fromVect,
@@ -176,12 +176,12 @@ const Z = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, o = t.arrowLength + t.arrowOffset, n = v({ x: o, y: w.y }, t.fromVect, w), d = v(
+  ) : t.to, o = t.arrowLength + t.arrowOffset, s = v({ x: o, y: w.y }, t.fromVect, w), d = v(
     { x: t.to.x - o, y: t.to.y },
     t.toVect,
     t.to
   );
-  return $([e, n, d, r], t.roundness);
+  return U([e, s, d, r], t.roundness);
 }, we = (t) => {
   const e = t.hasSourceArrow ? v(
     { x: t.arrowLength, y: w.y },
@@ -191,45 +191,45 @@ const Z = (t, e) => ({
     { x: t.to.x - t.arrowLength, y: t.to.y },
     t.toVect,
     t.to
-  ) : t.to, o = t.arrowLength + t.arrowOffset, n = o - t.roundness, d = v({ x: n, y: w.y }, t.fromVect, w), s = v(
-    { x: t.to.x - n, y: t.to.y },
+  ) : t.to, o = t.arrowLength + t.arrowOffset, s = o - t.roundness, d = v({ x: s, y: w.y }, t.fromVect, w), n = v(
+    { x: t.to.x - s, y: t.to.y },
     t.toVect,
     t.to
-  ), h = Math.max((d.y + s.y) / 2, o), c = t.to.x / 2, a = { x: d.x, y: t.flipY > 0 ? h : -o }, l = { x: c, y: a.y }, u = {
-    x: s.x,
+  ), h = Math.max((d.y + n.y) / 2, o), c = t.to.x / 2, a = { x: d.x, y: t.flipY > 0 ? h : -o }, l = { x: c, y: a.y }, g = {
+    x: n.x,
     y: t.flipY > 0 ? t.to.y - h : t.to.y + o
-  }, f = { x: c, y: u.y };
-  return $(
-    [e, d, a, l, f, u, s, r],
+  }, f = { x: c, y: g.y };
+  return U(
+    [e, d, a, l, f, g, n, r],
     t.roundness
   );
 }, H = (t) => {
-  const e = t.arrowOffset, r = t.side, o = t.arrowLength + e, n = o + 2 * r, s = [
+  const e = t.arrowOffset, r = t.side, o = t.arrowLength + e, s = o + 2 * r, n = [
     { x: t.arrowLength, y: w.y },
     { x: o, y: w.y },
     { x: o, y: t.side },
-    { x: n, y: t.side },
-    { x: n, y: -t.side },
+    { x: s, y: t.side },
+    { x: s, y: -t.side },
     { x: o, y: -t.side },
     { x: o, y: w.y },
     { x: t.arrowLength, y: w.y }
   ].map(
     (c) => v(c, t.fromVect, w)
-  ), h = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : h}${$(s, t.roundness)}`;
+  ), h = `M ${w.x} ${w.y} L ${n[0].x} ${n[0].y} `;
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : h}${U(n, t.roundness)}`;
 }, fe = (t) => {
-  const e = t.smallRadius, r = t.radius, o = Math.sqrt(e * e + r * r), n = e + r, d = t.arrowLength + o * (1 - r / n), s = e * r / n, c = [
+  const e = t.smallRadius, r = t.radius, o = Math.sqrt(e * e + r * r), s = e + r, d = t.arrowLength + o * (1 - r / s), n = e * r / s, c = [
     { x: t.arrowLength, y: w.y },
-    { x: d, y: s },
-    { x: d, y: -s }
-  ].map((u) => v(u, t.fromVect, w)), a = [
+    { x: d, y: n },
+    { x: d, y: -n }
+  ].map((g) => v(g, t.fromVect, w)), a = [
     `M ${c[0].x} ${c[0].y}`,
     `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
     `A ${r} ${r} 0 1 0 ${c[2].x} ${c[2].y}`,
     `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
   ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
   return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
-}, g = Object.freeze({
+}, u = Object.freeze({
   color: "#777777",
   width: 1,
   arrowLength: 15,
@@ -246,7 +246,7 @@ const Z = (t, e) => ({
   smallCycleRadius: 15,
   curvature: 90
 });
-class q {
+class O {
   constructor(e) {
     i(this, "svg", B());
     i(this, "group", k());
@@ -262,37 +262,37 @@ class q {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? g.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? g.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? g.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
-    const r = (e == null ? void 0 : e.color) ?? g.color, o = (e == null ? void 0 : e.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = Y(r, o), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(r), this.group.appendChild(this.targetArrow));
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (e == null ? void 0 : e.color) ?? u.color, o = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = Y(r, o), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = b(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = b(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
+    const { x: r, y: o, width: s, height: d, flipX: n, flipY: h } = X(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${s}, ${h})`;
-    const c = N(
+    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
+    const c = p(
       e.from.direction,
-      s,
+      n,
       h
-    ), a = N(e.to.direction, s, h), l = {
-      x: n,
+    ), a = p(e.to.direction, n, h), l = {
+      x: s,
       y: d
     };
-    let u, f = a, A = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (u = fe({
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = fe({
       fromVect: c,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = le({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = le({
       to: l,
       fromVect: c,
       toVect: a,
-      flipX: s,
+      flipX: n,
       flipY: h,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
@@ -300,7 +300,7 @@ class q {
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : u = ae({
+    }) : g = ae({
       to: l,
       fromVect: c,
       toVect: a,
@@ -308,7 +308,7 @@ class q {
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", u), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const y = T(
         c,
         w,
@@ -321,14 +321,14 @@ class q {
       const y = T(
         f,
         l,
-        A,
+        x,
         this.arrowWidth
       );
       this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class O {
+class ee {
   constructor(e) {
     i(this, "svg", B());
     i(this, "group", k());
@@ -344,32 +344,32 @@ class O {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? g.cycleSquareSide;
-    const r = (e == null ? void 0 : e.roundness) ?? g.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const r = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
       r,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
-    const o = (e == null ? void 0 : e.color) ?? g.color, n = (e == null ? void 0 : e.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = Y(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(o), this.group.appendChild(this.targetArrow));
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const o = (e == null ? void 0 : e.color) ?? u.color, s = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = Y(o, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = b(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = b(o), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
+    const { x: r, y: o, width: s, height: d, flipX: n, flipY: h } = X(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${s}, ${h})`;
-    const c = N(
+    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
+    const c = p(
       e.from.direction,
-      s,
+      n,
       h
-    ), a = N(e.to.direction, s, h), l = {
-      x: n,
+    ), a = p(e.to.direction, n, h), l = {
+      x: s,
       y: d
     };
-    let u, f = a, A = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (u = H({
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = H({
       fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -377,11 +377,11 @@ class O {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = j({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
       to: l,
       fromVect: c,
       toVect: a,
-      flipX: s,
+      flipX: n,
       flipY: h,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -390,17 +390,17 @@ class O {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : u = ue({
+    }) : g = ge({
       to: l,
       fromVect: c,
       toVect: a,
-      flipX: s,
+      flipX: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", u), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const y = T(
         c,
         w,
@@ -413,14 +413,14 @@ class O {
       const y = T(
         f,
         l,
-        A,
+        x,
         this.arrowWidth
       );
       this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class ee {
+class te {
   constructor(e) {
     i(this, "svg", B());
     i(this, "group", k());
@@ -436,32 +436,32 @@ class ee {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? g.cycleSquareSide;
-    const r = (e == null ? void 0 : e.roundness) ?? g.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const r = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
       r,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
-    const o = (e == null ? void 0 : e.color) ?? g.color, n = (e == null ? void 0 : e.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = Y(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(o), this.group.appendChild(this.targetArrow));
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const o = (e == null ? void 0 : e.color) ?? u.color, s = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = Y(o, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = b(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = b(o), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
+    const { x: r, y: o, width: s, height: d, flipX: n, flipY: h } = X(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${s}, ${h})`;
-    const c = N(
+    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
+    const c = p(
       e.from.direction,
-      s,
+      n,
       h
-    ), a = N(e.to.direction, s, h), l = {
-      x: n,
+    ), a = p(e.to.direction, n, h), l = {
+      x: s,
       y: d
     };
-    let u, f = a, A = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (u = H({
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = H({
       fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -469,11 +469,11 @@ class ee {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = j({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
       to: l,
       fromVect: c,
       toVect: a,
-      flipX: s,
+      flipX: n,
       flipY: h,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -482,7 +482,7 @@ class ee {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : u = ge({
+    }) : g = ue({
       to: l,
       fromVect: c,
       toVect: a,
@@ -491,7 +491,7 @@ class ee {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", u), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const y = T(
         c,
         w,
@@ -504,14 +504,14 @@ class ee {
       const y = T(
         f,
         l,
-        A,
+        x,
         this.arrowWidth
       );
       this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class te {
+class re {
   constructor(e) {
     i(this, "svg", B());
     i(this, "group", k());
@@ -527,32 +527,32 @@ class te {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? g.cycleSquareSide;
-    const r = (e == null ? void 0 : e.roundness) ?? g.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const r = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
       r,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
-    const o = (e == null ? void 0 : e.color) ?? g.color, n = (e == null ? void 0 : e.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = Y(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(o), this.group.appendChild(this.targetArrow));
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const o = (e == null ? void 0 : e.color) ?? u.color, s = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = Y(o, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = b(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = b(o), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
+    const { x: r, y: o, width: s, height: d, flipX: n, flipY: h } = X(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${s}, ${h})`;
-    const c = N(
+    this.svg.style.transform = `translate(${r}px, ${o}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
+    const c = p(
       e.from.direction,
-      s,
+      n,
       h
-    ), a = N(e.to.direction, s, h), l = {
-      x: n,
+    ), a = p(e.to.direction, n, h), l = {
+      x: s,
       y: d
     };
-    let u, f = a, A = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (u = H({
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = H({
       fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -560,11 +560,11 @@ class te {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = j({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
       to: l,
       fromVect: c,
       toVect: a,
-      flipX: s,
+      flipX: n,
       flipY: h,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -573,7 +573,7 @@ class te {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : u = we({
+    }) : g = we({
       to: l,
       fromVect: c,
       toVect: a,
@@ -583,7 +583,7 @@ class te {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", u), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const y = T(
         c,
         w,
@@ -596,7 +596,7 @@ class te {
       const y = T(
         f,
         l,
-        A,
+        x,
         this.arrowWidth
       );
       this.targetArrow.setAttribute("d", y);
@@ -608,7 +608,7 @@ const ye = (t) => {
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new ee({
+      return () => new te({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -622,7 +622,7 @@ const ye = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new O({
+      return () => new ee({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -636,7 +636,7 @@ const ye = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new te({
+      return () => new re({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -650,7 +650,7 @@ const ye = (t) => {
         detourDirection: t.detourDirection
       });
     default:
-      return () => new q({
+      return () => new O({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -664,38 +664,38 @@ const ye = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, V = (t) => () => t, I = V(0), M = () => {
+}, $ = (t) => () => t, I = $(0), P = () => {
   let t = 0;
   return () => t++;
 }, ve = (t, e) => {
   let r = I, o = I;
-  t === "incremental" && (r = M()), e === "incremental" && (o = M());
-  const n = M();
-  return t === "shared-incremental" && (r = n), e === "shared-incremental" && (o = n), typeof t == "number" && (r = V(t)), typeof e == "number" && (o = V(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
+  t === "incremental" && (r = P()), e === "incremental" && (o = P());
+  const s = P();
+  return t === "shared-incremental" && (r = s), e === "shared-incremental" && (o = s), typeof t == "number" && (r = $(t)), typeof e == "number" && (o = $(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
     nodesPriorityFn: r,
     edgesPriorityFn: o
   };
-}, Ae = (t) => {
-  var r, o, n, d, s;
+}, xe = (t) => {
+  var r, o, s, d, n;
   const e = ve(
     (r = t == null ? void 0 : t.nodes) == null ? void 0 : r.priority,
     (o = t == null ? void 0 : t.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Z,
+      centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? q,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((d = t == null ? void 0 : t.ports) == null ? void 0 : d.direction) ?? 0
     },
     edges: {
-      shapeFactory: ye(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
+      shapeFactory: ye(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class re {
+class oe {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -783,8 +783,8 @@ class re {
     return this.edges.get(e);
   }
   removeEdge(e) {
-    const r = this.edges.get(e), o = r.from, n = r.to;
-    this.cycleEdges.get(o).delete(e), this.cycleEdges.get(n).delete(e), this.incommingEdges.get(o).delete(e), this.incommingEdges.get(n).delete(e), this.outcommingEdges.get(o).delete(e), this.outcommingEdges.get(n).delete(e), this.edges.delete(e);
+    const r = this.edges.get(e), o = r.from, s = r.to;
+    this.cycleEdges.get(o).delete(e), this.cycleEdges.get(s).delete(e), this.incommingEdges.get(o).delete(e), this.incommingEdges.get(s).delete(e), this.outcommingEdges.get(o).delete(e), this.outcommingEdges.get(s).delete(e), this.edges.delete(e);
   }
   clear() {
     this.edges.clear(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.ports.clear(), this.nodePorts.clear(), this.portNodeId.clear(), this.nodes.clear();
@@ -808,22 +808,22 @@ class re {
   getNodeIncomingEdgeIds(e) {
     const r = Array.from(this.nodePorts.get(e).keys());
     let o = [];
-    return r.forEach((n) => {
-      o = [...o, ...this.getPortIncomingEdgeIds(n)];
+    return r.forEach((s) => {
+      o = [...o, ...this.getPortIncomingEdgeIds(s)];
     }), o;
   }
   getNodeOutcomingEdgeIds(e) {
     const r = Array.from(this.nodePorts.get(e).keys());
     let o = [];
-    return r.forEach((n) => {
-      o = [...o, ...this.getPortOutcomingEdgeIds(n)];
+    return r.forEach((s) => {
+      o = [...o, ...this.getPortOutcomingEdgeIds(s)];
     }), o;
   }
   getNodeCycleEdgeIds(e) {
     const r = Array.from(this.nodePorts.get(e).keys());
     let o = [];
-    return r.forEach((n) => {
-      o = [...o, ...this.getPortCycleEdgeIds(n)];
+    return r.forEach((s) => {
+      o = [...o, ...this.getPortCycleEdgeIds(s)];
     }), o;
   }
   getNodeAdjacentEdgeIds(e) {
@@ -834,7 +834,7 @@ class re {
     ];
   }
 }
-class xe {
+class Ae {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -851,21 +851,21 @@ class xe {
   }
 }
 const S = () => {
-  const t = new xe();
+  const t = new Ae();
   return [t, t];
-}, _ = (t) => ({
+}, J = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), J = {
+}), Q = {
   scale: 1,
   x: 0,
   y: 0
 };
-class oe {
+class ie {
   constructor() {
-    i(this, "viewportMatrix", J);
-    i(this, "contentMatrix", J);
+    i(this, "viewportMatrix", Q);
+    i(this, "contentMatrix", Q);
     i(this, "emitter");
     i(this, "onAfterUpdate");
     [this.emitter, this.onAfterUpdate] = S();
@@ -881,17 +881,17 @@ class oe {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = _(this.viewportMatrix), this.emitter.emit();
+    }, this.contentMatrix = J(this.viewportMatrix), this.emitter.emit();
   }
   patchContentMatrix(e) {
     this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = _(this.contentMatrix), this.emitter.emit();
+    }, this.viewportMatrix = J(this.contentMatrix), this.emitter.emit();
   }
 }
-class ie {
+class ne {
   constructor(e) {
     this.transformer = e;
   }
@@ -912,14 +912,18 @@ const Ee = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
 };
-class ne {
+class K {
   constructor(e, r) {
     i(this, "canvasWrapper", null);
     i(this, "host", Ee());
     i(this, "container", Se());
     i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    this.graphStore = e, this.viewportTransformer = r, this.host.appendChild(this.container);
+    i(this, "applyTransform", () => {
+      const e = this.viewportTransformer.getContentMatrix();
+      this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
+    });
+    this.graphStore = e, this.viewportTransformer = r, this.host.appendChild(this.container), this.viewportTransformer.onAfterUpdate.subscribe(this.applyTransform);
   }
   attach(e) {
     this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host);
@@ -927,10 +931,6 @@ class ne {
   detach() {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
-  applyTransform() {
-    const e = this.viewportTransformer.getContentMatrix();
-    this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
-  }
   attachNode(e) {
     const r = this.graphStore.getNode(e), o = me();
     o.appendChild(r.element), this.container.appendChild(o), this.nodeIdToWrapperElementMap.set(e, o), this.updateNodeCoordinates(e), this.updateNodePriority(e), o.style.visibility = "visible";
@@ -955,10 +955,10 @@ class ne {
     });
   }
   destroy() {
-    this.clear(), this.detach(), this.host.removeChild(this.container);
+    this.clear(), this.detach(), this.viewportTransformer.onAfterUpdate.unsubscribe(this.applyTransform), this.host.removeChild(this.container);
   }
   updateNodeCoordinates(e) {
-    const r = this.nodeIdToWrapperElementMap.get(e), o = this.graphStore.getNode(e), { width: n, height: d } = o.element.getBoundingClientRect(), s = this.viewportTransformer.getViewportMatrix().scale, h = o.centerFn(n, d), c = o.x - s * h.x, a = o.y - s * h.y;
+    const r = this.nodeIdToWrapperElementMap.get(e), o = this.graphStore.getNode(e), { width: s, height: d } = o.element.getBoundingClientRect(), n = this.viewportTransformer.getViewportMatrix().scale, h = o.centerFn(s, d), c = o.x - n * h.x, a = o.y - n * h.y;
     r.style.transform = `translate(${c}px, ${a}px)`;
   }
   updateNodePriority(e) {
@@ -972,13 +972,13 @@ class ne {
     this.edgeIdToElementMap.set(e, o.shape.svg), this.container.appendChild(o.shape.svg);
   }
   renderEdge(e) {
-    const r = this.graphStore.getEdge(e), o = this.graphStore.getPort(r.from), n = this.graphStore.getPort(r.to), d = o.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix(), a = {
+    const r = this.graphStore.getEdge(e), o = this.graphStore.getPort(r.from), s = this.graphStore.getPort(r.to), d = o.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix(), a = {
       x: c.scale * (d.left - h.left) + c.x,
       y: c.scale * (d.top - h.top) + c.y
     }, l = {
-      x: c.scale * (s.left - h.left) + c.x,
-      y: c.scale * (s.top - h.top) + c.y
-    }, u = {
+      x: c.scale * (n.left - h.left) + c.x,
+      y: c.scale * (n.top - h.top) + c.y
+    }, g = {
       x: a.x,
       y: a.y,
       width: d.width * c.scale,
@@ -989,14 +989,14 @@ class ne {
     }, f = {
       x: l.x,
       y: l.y,
-      width: s.width * c.scale,
-      height: s.height * c.scale,
-      direction: n.direction,
+      width: n.width * c.scale,
+      height: n.height * c.scale,
+      direction: s.direction,
       portId: r.to,
       nodeId: this.graphStore.getPortNodeId(r.to)
     };
     r.shape.render({
-      from: u,
+      from: g,
       to: f
     });
   }
@@ -1005,7 +1005,111 @@ class ne {
     r.shape.svg.style.zIndex = `${r.priority}`;
   }
 }
-class U {
+class Ne {
+  constructor(e) {
+    i(this, "xFrom", 1 / 0);
+    i(this, "yFrom", 1 / 0);
+    i(this, "xTo", 1 / 0);
+    i(this, "yTo", 1 / 0);
+    this.graphStore = e;
+  }
+  setRenderingBox(e) {
+    this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
+  }
+  hasNode(e) {
+    const r = this.graphStore.getNode(e);
+    return r.x >= this.xFrom && r.x <= this.xTo && r.y >= this.yFrom && r.y <= this.yTo;
+  }
+  hasEdge(e) {
+    const r = this.graphStore.getEdge(e), o = this.graphStore.getPortNodeId(r.from), s = this.graphStore.getPortNodeId(r.to), d = this.graphStore.getNode(o), n = this.graphStore.getNode(s), h = Math.min(d.x, n.x), c = Math.max(d.x, n.x), a = Math.min(d.y, n.y), l = Math.max(d.y, n.y);
+    return h <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
+  }
+}
+class pe {
+  constructor(e, r, o) {
+    i(this, "attachedNodes", /* @__PURE__ */ new Set());
+    i(this, "attachedEdges", /* @__PURE__ */ new Set());
+    i(this, "renderingBox");
+    i(this, "updateViewport", (e) => {
+      this.renderingBox.setRenderingBox(e);
+      const r = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set();
+      this.graphStore.getAllNodeIds().forEach((n) => {
+        const h = this.renderingBox.hasNode(n), c = this.attachedNodes.has(n);
+        h && !c ? r.add(n) : !h && c && o.add(n);
+      }), this.graphStore.getAllEdgeIds().forEach((n) => {
+        const h = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPortNodeId(a.from), g = this.graphStore.getPortNodeId(a.to);
+        h && (this.renderingBox.hasNode(l) || (r.add(l), o.delete(l)), this.renderingBox.hasNode(g) || (r.add(g), o.delete(g))), h && !c ? s.add(n) : !h && c && d.add(n);
+      }), d.forEach((n) => {
+        this.handleDetachEdge(n);
+      }), o.forEach((n) => {
+        this.handleDetachNode(n);
+      }), r.forEach((n) => {
+        this.handleAttachNode(n);
+      }), s.forEach((n) => {
+        this.handleAttachEdge(n);
+      });
+    });
+    this.htmlView = e, this.graphStore = r, this.trigger = o, this.renderingBox = new Ne(this.graphStore), this.trigger.subscribe(this.updateViewport);
+  }
+  attach(e) {
+    this.htmlView.attach(e);
+  }
+  detach() {
+    this.htmlView.detach();
+  }
+  attachNode(e) {
+    this.renderingBox.hasNode(e) && this.handleAttachNode(e);
+  }
+  detachNode(e) {
+    this.attachedNodes.has(e) && this.handleDetachNode(e);
+  }
+  attachEdge(e) {
+    this.renderingBox.hasEdge(e) && this.attachSingleEdge(e);
+  }
+  detachEdge(e) {
+    this.attachedEdges.has(e) && this.handleDetachEdge(e);
+  }
+  updateNodeCoordinates(e) {
+    this.attachedNodes.has(e) ? this.htmlView.updateNodeCoordinates(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((r) => {
+      this.attachSingleEdge(r);
+    }));
+  }
+  updateNodePriority(e) {
+    this.attachedNodes.has(e) && this.htmlView.updateNodePriority(e);
+  }
+  updateEdgeShape(e) {
+    this.attachedEdges.has(e) && this.htmlView.updateEdgeShape(e);
+  }
+  renderEdge(e) {
+    this.attachedEdges.has(e) && this.htmlView.renderEdge(e);
+  }
+  updateEdgePriority(e) {
+    this.attachedEdges.has(e) && this.htmlView.updateEdgePriority(e);
+  }
+  clear() {
+    this.htmlView.clear(), this.attachedNodes.clear(), this.attachedEdges.clear();
+  }
+  destroy() {
+    this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
+  }
+  attachSingleEdge(e) {
+    const r = this.graphStore.getEdge(e), o = this.graphStore.getPortNodeId(r.from), s = this.graphStore.getPortNodeId(r.to);
+    this.attachedNodes.has(o) || this.handleAttachNode(o), this.attachedNodes.has(s) || this.handleAttachNode(s), this.handleAttachEdge(e);
+  }
+  handleAttachNode(e) {
+    this.attachedNodes.add(e), this.htmlView.attachNode(e);
+  }
+  handleDetachNode(e) {
+    this.htmlView.detachNode(e), this.attachedNodes.delete(e);
+  }
+  handleAttachEdge(e) {
+    this.attachedEdges.add(e), this.htmlView.attachEdge(e);
+  }
+  handleDetachEdge(e) {
+    this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
+  }
+}
+class L {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -1021,7 +1125,7 @@ class U {
     this.counter = 0;
   }
 }
-class x extends Error {
+class A extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "HtmlGraphError");
@@ -1029,13 +1133,13 @@ class x extends Error {
 }
 class se {
   constructor(e, r) {
-    i(this, "nodeIdGenerator", new U(
+    i(this, "nodeIdGenerator", new L(
       (e) => this.graphStore.getNode(e) !== void 0
     ));
-    i(this, "portIdGenerator", new U(
+    i(this, "portIdGenerator", new L(
       (e) => this.graphStore.getPort(e) !== void 0
     ));
-    i(this, "edgeIdGenerator", new U(
+    i(this, "edgeIdGenerator", new L(
       (e) => this.graphStore.getEdge(e) !== void 0
     ));
     i(this, "onAfterNodeAdded");
@@ -1063,7 +1167,7 @@ class se {
   addNode(e) {
     const r = this.nodeIdGenerator.create(e.id);
     if (this.graphStore.getNode(r) !== void 0)
-      throw new x("failed to add node with existing id");
+      throw new A("failed to add node with existing id");
     this.graphStore.addNode({
       nodeId: r,
       element: e.element,
@@ -1083,9 +1187,9 @@ class se {
   markPort(e) {
     const r = this.portIdGenerator.create(e.id);
     if (this.graphStore.getPort(r) !== void 0)
-      throw new x("failed to add port with existing id");
+      throw new A("failed to add port with existing id");
     if (this.graphStore.getNode(e.nodeId) === void 0)
-      throw new x("failed to set port on nonexisting node");
+      throw new A("failed to set port on nonexisting node");
     this.graphStore.addPort({
       portId: r,
       element: e.element,
@@ -1096,11 +1200,11 @@ class se {
   addEdge(e) {
     const r = this.edgeIdGenerator.create(e.id);
     if (this.graphStore.getEdge(r) !== void 0)
-      throw new x("failed to add edge with existing id");
+      throw new A("failed to add edge with existing id");
     if (this.graphStore.getPort(e.from) === void 0)
-      throw new x("failed to add edge from nonexisting port");
+      throw new A("failed to add edge from nonexisting port");
     if (this.graphStore.getPort(e.to) === void 0)
-      throw new x("failed to add edge to nonexisting port");
+      throw new A("failed to add edge to nonexisting port");
     this.graphStore.addEdge({
       edgeId: r,
       from: e.from,
@@ -1112,36 +1216,36 @@ class se {
   updateEdge(e, r) {
     const o = this.graphStore.getEdge(e);
     if (o === void 0)
-      throw new x("failed to update nonexisting edge");
+      throw new A("failed to update nonexisting edge");
     r.shape !== void 0 && (o.shape = r.shape, this.onAfterEdgeShapeUpdatedEmitter.emit(e)), r.from !== void 0 && this.graphStore.updateEdgeFrom(e, r.from), r.to !== void 0 && this.graphStore.updateEdgeTo(e, r.to), this.onAfterEdgeUpdatedEmitter.emit(e), r.priority !== void 0 && (o.priority = r.priority, this.onAfterEdgePriorityUpdatedEmitter.emit(e));
   }
   updatePort(e, r) {
     const o = this.graphStore.getPort(e);
     if (o === void 0)
-      throw new x("failed to unset nonexisting port");
+      throw new A("failed to unset nonexisting port");
     o.direction = r.direction ?? o.direction, this.onAfterPortUpdatedEmitter.emit(e);
   }
   updateNode(e, r) {
     const o = this.graphStore.getNode(e);
     if (o === void 0)
-      throw new x("failed to update nonexisting node");
+      throw new A("failed to update nonexisting node");
     o.x = (r == null ? void 0 : r.x) ?? o.x, o.y = (r == null ? void 0 : r.y) ?? o.y, o.centerFn = r.centerFn ?? o.centerFn, this.onAfterNodeUpdatedEmitter.emit(e), r.priority !== void 0 && (o.priority = r.priority, this.onAfterNodePriorityUpdatedEmitter.emit(e));
   }
   removeEdge(e) {
     if (this.graphStore.getEdge(e) === void 0)
-      throw new x("failed to remove nonexisting edge");
+      throw new A("failed to remove nonexisting edge");
     this.onBeforeEdgeRemovedEmitter.emit(e), this.graphStore.removeEdge(e);
   }
   unmarkPort(e) {
     if (this.graphStore.getPort(e) === void 0)
-      throw new x("failed to unset nonexisting port");
+      throw new A("failed to unset nonexisting port");
     this.graphStore.getPortAdjacentEdgeIds(e).forEach((r) => {
       this.removeEdge(r);
     }), this.graphStore.removePort(e);
   }
   removeNode(e) {
     if (this.graphStore.getNode(e) === void 0)
-      throw new x("failed to remove nonexisting node");
+      throw new A("failed to remove nonexisting node");
     this.graphStore.getNodePortIds(e).forEach((r) => {
       this.unmarkPort(r);
     }), this.onBeforeNodeRemovedEmitter.emit(e), this.graphStore.removeNode(e);
@@ -1215,61 +1319,56 @@ class he {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class ke {
+class Ge {
   constructor(e) {
     i(this, "transformation");
     i(this, "model");
     i(this, "internalTransformation");
     i(this, "internalModel");
     i(this, "graphStoreController");
-    i(this, "htmlController");
+    i(this, "htmlView");
     i(this, "onAfterNodeAdded", (e) => {
-      this.htmlController.attachNode(e);
+      this.htmlView.attachNode(e);
     });
     i(this, "onAfterEdgeAdded", (e) => {
-      this.htmlController.attachEdge(e);
+      this.htmlView.attachEdge(e);
     });
     i(this, "onAfterEdgeShapeUpdated", (e) => {
-      this.htmlController.updateEdgeShape(e);
+      this.htmlView.updateEdgeShape(e);
     });
     i(this, "onAfterEdgePriorityUpdated", (e) => {
-      this.htmlController.updateEdgePriority(e);
+      this.htmlView.updateEdgePriority(e);
     });
     i(this, "onAfterEdgeUpdated", (e) => {
-      this.htmlController.renderEdge(e);
+      this.htmlView.renderEdge(e);
     });
     i(this, "onAfterPortUpdated", (e) => {
       this.internalModel.getPortAdjacentEdgeIds(e).forEach((o) => {
-        this.htmlController.renderEdge(o);
+        this.htmlView.renderEdge(o);
       });
     });
     i(this, "onAfterNodePriorityUpdated", (e) => {
-      this.htmlController.updateNodePriority(e);
+      this.htmlView.updateNodePriority(e);
     });
     i(this, "onAfterNodeUpdated", (e) => {
-      this.htmlController.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
-        this.htmlController.renderEdge(o);
+      this.htmlView.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
+        this.htmlView.renderEdge(o);
       });
     });
     i(this, "onBeforeEdgeRemoved", (e) => {
-      this.htmlController.detachEdge(e);
+      this.htmlView.detachEdge(e);
     });
     i(this, "onBeforeNodeRemoved", (e) => {
-      this.htmlController.detachNode(e);
-    });
-    i(this, "onAfterTransformUpdate", () => {
-      this.htmlController.applyTransform();
+      this.htmlView.detachNode(e);
     });
-    this.internalModel = new re(), this.model = new he(this.internalModel), this.internalTransformation = new oe(), this.transformation = new ie(
+    this.internalModel = new oe(), this.model = new he(this.internalModel), this.internalTransformation = new ie(), this.transformation = new ne(
       this.internalTransformation
-    ), this.htmlController = new ne(
+    ), this.htmlView = new K(
       this.internalModel,
       this.internalTransformation
     ), this.graphStoreController = new se(
       this.internalModel,
-      Ae(e)
-    ), this.internalTransformation.onAfterUpdate.subscribe(
-      this.onAfterTransformUpdate
+      xe(e)
     ), this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
     ), this.graphStoreController.onAfterEdgePriorityUpdated.subscribe(
@@ -1289,10 +1388,10 @@ class ke {
     );
   }
   attach(e) {
-    return this.htmlController.attach(e), this;
+    return this.htmlView.attach(e), this;
   }
   detach() {
-    return this.htmlController.detach(), this;
+    return this.htmlView.detach(), this;
   }
   addNode(e) {
     return this.graphStoreController.addNode(e), this;
@@ -1328,12 +1427,10 @@ class ke {
     return this.internalTransformation.patchContentMatrix(e), this;
   }
   clear() {
-    return this.htmlController.clear(), this.graphStoreController.clear(), this;
+    return this.htmlView.clear(), this.graphStoreController.clear(), this;
   }
   destroy() {
-    this.htmlController.destroy(), this.graphStoreController.clear(), this.internalTransformation.onAfterUpdate.unsubscribe(
-      this.onAfterTransformUpdate
-    ), this.graphStoreController.onAfterNodeAdded.unsubscribe(
+    this.htmlView.destroy(), this.graphStoreController.clear(), this.graphStoreController.onAfterNodeAdded.unsubscribe(
       this.onAfterNodeAdded
     ), this.graphStoreController.onAfterEdgeAdded.unsubscribe(
       this.onAfterEdgeAdded
@@ -1356,54 +1453,49 @@ class ke {
     );
   }
 }
-class Ce {
+class Te {
   constructor(e) {
     i(this, "transformation");
     i(this, "model");
     i(this, "internalTransformation");
     i(this, "internalModel");
     i(this, "graphStoreController");
-    i(this, "htmlController");
+    i(this, "htmlView");
     i(this, "onAfterNodeAdded", (e) => {
-      this.htmlController.attachNode(e);
+      this.htmlView.attachNode(e);
     });
     i(this, "onAfterEdgeAdded", (e) => {
-      this.htmlController.attachEdge(e);
+      this.htmlView.attachEdge(e);
     });
     i(this, "onAfterEdgeShapeUpdated", (e) => {
-      this.htmlController.updateEdgeShape(e);
+      this.htmlView.updateEdgeShape(e);
     });
     i(this, "onAfterEdgePriorityUpdated", (e) => {
-      this.htmlController.updateEdgePriority(e);
+      this.htmlView.updateEdgePriority(e);
     });
     i(this, "onAfterEdgeUpdated", (e) => {
-      this.htmlController.renderEdge(e);
+      this.htmlView.renderEdge(e);
     });
     i(this, "onAfterPortUpdated", (e) => {
       this.internalModel.getPortAdjacentEdgeIds(e).forEach((o) => {
-        this.htmlController.renderEdge(o);
+        this.htmlView.renderEdge(o);
       });
     });
     i(this, "onAfterNodePriorityUpdated", (e) => {
-      this.htmlController.updateNodePriority(e);
+      this.htmlView.updateNodePriority(e);
     });
     i(this, "onAfterNodeUpdated", (e) => {
-      this.htmlController.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
-        this.htmlController.renderEdge(o);
+      this.htmlView.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
+        this.htmlView.renderEdge(o);
       });
     });
     i(this, "onBeforeEdgeRemoved", (e) => {
-      this.htmlController.detachEdge(e);
+      this.htmlView.detachEdge(e);
     });
     i(this, "onBeforeNodeRemoved", (e) => {
-      this.htmlController.detachNode(e);
+      this.htmlView.detachNode(e);
     });
-    i(this, "onAfterTransformUpdate", () => {
-      this.htmlController.applyTransform();
-    });
-    this.model = e.publicGraphStore, this.internalModel = e.graphStore, this.internalTransformation = e.viewportTransformer, this.transformation = e.publicViewportTransformer, this.htmlController = e.htmlController, this.graphStoreController = e.graphStoreController, this.internalTransformation.onAfterUpdate.subscribe(
-      this.onAfterTransformUpdate
-    ), this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(
+    this.model = e.publicGraphStore, this.internalModel = e.graphStore, this.internalTransformation = e.viewportTransformer, this.transformation = e.publicViewportTransformer, this.htmlView = e.htmlView, this.graphStoreController = e.graphStoreController, this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
     ), this.graphStoreController.onAfterEdgePriorityUpdated.subscribe(
       this.onAfterEdgePriorityUpdated
@@ -1422,10 +1514,10 @@ class Ce {
     );
   }
   attach(e) {
-    return this.htmlController.attach(e), this;
+    return this.htmlView.attach(e), this;
   }
   detach() {
-    return this.htmlController.detach(), this;
+    return this.htmlView.detach(), this;
   }
   addNode(e) {
     return this.graphStoreController.addNode(e), this;
@@ -1461,12 +1553,10 @@ class Ce {
     return this.internalTransformation.patchContentMatrix(e), this;
   }
   clear() {
-    return this.htmlController.clear(), this.graphStoreController.clear(), this;
+    return this.htmlView.clear(), this.graphStoreController.clear(), this;
   }
   destroy() {
-    this.htmlController.destroy(), this.graphStoreController.clear(), this.internalTransformation.onAfterUpdate.unsubscribe(
-      this.onAfterTransformUpdate
-    ), this.graphStoreController.onAfterNodeAdded.unsubscribe(
+    this.htmlView.destroy(), this.graphStoreController.clear(), this.graphStoreController.onAfterNodeAdded.unsubscribe(
       this.onAfterNodeAdded
     ), this.graphStoreController.onAfterEdgeAdded.unsubscribe(
       this.onAfterEdgeAdded
@@ -1489,12 +1579,12 @@ class Ce {
     );
   }
 }
-const Ne = (t) => {
+const be = (t) => {
   if (typeof t == "function")
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new ee({
+      return () => new te({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1508,7 +1598,7 @@ const Ne = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new O({
+      return () => new ee({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1522,7 +1612,7 @@ const Ne = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new te({
+      return () => new re({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1536,7 +1626,7 @@ const Ne = (t) => {
         detourDirection: t.detourDirection
       });
     default:
-      return () => new q({
+      return () => new O({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -1550,81 +1640,82 @@ const Ne = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, Te = (t, e) => {
+}, Ce = (t, e) => {
   let r = I, o = I;
-  t === "incremental" && (r = M()), e === "incremental" && (o = M());
-  const n = M();
-  return t === "shared-incremental" && (r = n), e === "shared-incremental" && (o = n), typeof t == "number" && (r = V(t)), typeof e == "number" && (o = V(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
+  t === "incremental" && (r = P()), e === "incremental" && (o = P());
+  const s = P();
+  return t === "shared-incremental" && (r = s), e === "shared-incremental" && (o = s), typeof t == "number" && (r = $(t)), typeof e == "number" && (o = $(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
     nodesPriorityFn: r,
     edgesPriorityFn: o
   };
-}, pe = (t) => {
-  var r, o, n, d, s;
-  const e = Te(
+}, Pe = (t) => {
+  var r, o, s, d, n;
+  const e = Ce(
     (r = t == null ? void 0 : t.nodes) == null ? void 0 : r.priority,
     (o = t == null ? void 0 : t.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Z,
+      centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? q,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((d = t == null ? void 0 : t.ports) == null ? void 0 : d.direction) ?? 0
     },
     edges: {
-      shapeFactory: Ne(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
+      shapeFactory: be(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class be {
-  constructor(e) {
+class Me {
+  constructor(e, r) {
     i(this, "publicViewportTransformer");
     i(this, "publicGraphStore");
     i(this, "viewportTransformer");
     i(this, "graphStore");
-    i(this, "htmlController");
+    i(this, "htmlView");
     i(this, "graphStoreController");
-    this.graphStore = new re(), this.publicGraphStore = new he(this.graphStore), this.viewportTransformer = new oe(), this.publicViewportTransformer = new ie(
+    this.graphStore = new oe(), this.publicGraphStore = new he(this.graphStore), this.viewportTransformer = new ie(), this.publicViewportTransformer = new ne(
       this.viewportTransformer
-    ), this.htmlController = new ne(
-      this.graphStore,
-      this.viewportTransformer
-    ), this.graphStoreController = new se(
+    ), this.htmlView = r(this.graphStore, this.viewportTransformer), this.graphStoreController = new se(
       this.graphStore,
-      pe(e)
+      Pe(e)
     );
   }
 }
-const W = (t, e, r) => {
-  const { x: o, y: n, width: d, height: s } = t.getBoundingClientRect();
-  return e >= o && e <= o + d && r >= n && r <= n + s;
+const Ve = (t, e) => new K(t, e), De = (t) => (e, r) => new pe(
+  new K(e, r),
+  e,
+  t
+), W = (t, e, r) => {
+  const { x: o, y: s, width: d, height: n } = t.getBoundingClientRect();
+  return e >= o && e <= o + d && r >= s && r <= s + n;
 }, R = (t, e, r) => e >= 0 && e <= t.innerWidth && r >= 0 && r <= t.innerHeight, F = (t, e) => {
   e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
-}, Me = (t) => {
-  var u, f, A, y, m, E;
-  const e = ((u = t == null ? void 0 : t.events) == null ? void 0 : u.onNodeDrag) ?? (() => {
-  }), r = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), o = ((A = t == null ? void 0 : t.events) == null ? void 0 : A.onNodeDragFinished) ?? (() => {
-  }), n = (t == null ? void 0 : t.moveOnTop) === !1, d = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, s = d !== void 0 ? d : "grab", h = (m = t == null ? void 0 : t.mouse) == null ? void 0 : m.mouseDownEventVerifier, c = h !== void 0 ? h : (C) => C.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
+}, Le = (t) => {
+  var g, f, x, y, m, E;
+  const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
+  }), r = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), o = ((x = t == null ? void 0 : t.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
+  }), s = (t == null ? void 0 : t.moveOnTop) === !1, d = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, n = d !== void 0 ? d : "grab", h = (m = t == null ? void 0 : t.mouse) == null ? void 0 : m.mouseDownEventVerifier, c = h !== void 0 ? h : (N) => N.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
   return {
-    freezePriority: n,
-    dragCursor: s,
+    freezePriority: s,
+    dragCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: a !== void 0 ? a : (C) => C.button === 0,
+    mouseUpEventVerifier: a !== void 0 ? a : (N) => N.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: r,
     onNodeDragFinished: o
   };
 };
-class Pe {
+class $e {
   constructor(e, r) {
     i(this, "model");
     i(this, "transformation");
     i(this, "maxNodePriority", 0);
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "grabbedNodeId", null);
-    i(this, "nodeIdGenerator", new U(
+    i(this, "nodeIdGenerator", new L(
       (e) => this.nodes.has(e)
     ));
     i(this, "element", null);
@@ -1647,8 +1738,8 @@ class Pe {
         return;
       }
       if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
-        const o = r.clientX - this.previousTouchCoords.x, n = r.clientY - this.previousTouchCoords.y;
-        this.dragNode(this.grabbedNodeId, o, n), this.previousTouchCoords = {
+        const o = r.clientX - this.previousTouchCoords.x, s = r.clientY - this.previousTouchCoords.y;
+        this.dragNode(this.grabbedNodeId, o, s), this.previousTouchCoords = {
           x: e.touches[0].clientX,
           y: e.touches[0].clientY
         };
@@ -1660,7 +1751,7 @@ class Pe {
     i(this, "previousTouchCoords", null);
     i(this, "window", window);
     i(this, "options");
-    this.canvas = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.options = Me(r ?? {});
+    this.canvas = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.options = Le(r ?? {});
   }
   attach(e) {
     return this.detach(), this.element = e, this.canvas.attach(this.element), this;
@@ -1674,33 +1765,33 @@ class Pe {
     const o = (d) => {
       if (this.element === null || !this.options.mouseDownEventVerifier(d))
         return;
-      const s = this.model.getNode(r);
+      const n = this.model.getNode(r);
       this.options.onBeforeNodeDrag({
         nodeId: r,
         element: e.element,
-        x: s.x,
-        y: s.y
+        x: n.x,
+        y: n.y
       }) && (d.stopImmediatePropagation(), this.grabbedNodeId = r, F(this.element, this.options.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
-    }, n = (d) => {
+    }, s = (d) => {
       if (d.touches.length !== 1)
         return;
       d.stopImmediatePropagation(), this.previousTouchCoords = {
         x: d.touches[0].clientX,
         y: d.touches[0].clientY
       };
-      const s = this.model.getNode(r);
+      const n = this.model.getNode(r);
       this.options.onBeforeNodeDrag({
         nodeId: r,
         element: e.element,
-        x: s.x,
-        y: s.y
+        x: n.x,
+        y: n.y
       }) && (this.grabbedNodeId = r, this.moveNodeOnTop(r), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
     };
     return this.nodes.set(r, {
       element: e.element,
       onMouseDown: o,
-      onTouchStart: n
-    }), e.element.addEventListener("mousedown", o), e.element.addEventListener("touchstart", n), this;
+      onTouchStart: s
+    }), e.element.addEventListener("mousedown", o), e.element.addEventListener("touchstart", s), this;
   }
   updateNode(e, r) {
     return this.canvas.updateNode(e, r), this.updateMaxNodePriority(e), this;
@@ -1742,14 +1833,14 @@ class Pe {
     this.detach(), this.clear(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
   dragNode(e, r, o) {
-    const n = this.model.getNode(e);
-    if (n === null)
+    const s = this.model.getNode(e);
+    if (s === null)
       return;
-    const d = this.canvas.transformation.getContentMatrix(), s = d.scale * n.x + d.x, h = d.scale * n.y + d.y, c = s + r, a = h + o, l = this.canvas.transformation.getViewportMatrix(), u = l.scale * c + l.x, f = l.scale * a + l.y;
-    this.canvas.updateNode(e, { x: u, y: f }), this.options.onNodeDrag({
+    const d = this.canvas.transformation.getContentMatrix(), n = d.scale * s.x + d.x, h = d.scale * s.y + d.y, c = n + r, a = h + o, l = this.canvas.transformation.getViewportMatrix(), g = l.scale * c + l.x, f = l.scale * a + l.y;
+    this.canvas.updateNode(e, { x: g, y: f }), this.options.onNodeDrag({
       nodeId: e,
-      element: n.element,
-      x: u,
+      element: s.element,
+      x: g,
       y: f
     });
   }
@@ -1762,8 +1853,8 @@ class Pe {
       return;
     this.maxNodePriority += 2, this.updateNode(e, { priority: this.maxNodePriority });
     const r = this.maxNodePriority - 1;
-    this.model.getNodeAdjacentEdgeIds(e).forEach((n) => {
-      this.updateEdge(n, { priority: r });
+    this.model.getNodeAdjacentEdgeIds(e).forEach((s) => {
+      this.updateEdge(s, { priority: r });
     });
   }
   cancelMouseDrag() {
@@ -1792,30 +1883,30 @@ class Pe {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const De = (t) => {
-  const e = t.minX !== null ? t.minX : -1 / 0, r = t.maxX !== null ? t.maxX : 1 / 0, o = t.minY !== null ? t.minY : -1 / 0, n = t.maxY !== null ? t.maxY : 1 / 0;
+const Ue = (t) => {
+  const e = t.minX !== null ? t.minX : -1 / 0, r = t.maxX !== null ? t.maxX : 1 / 0, o = t.minY !== null ? t.minY : -1 / 0, s = t.maxY !== null ? t.maxY : 1 / 0;
   return (d) => {
-    let s = d.nextTransform.x, h = d.nextTransform.y;
-    s < e && s < d.prevTransform.x && (s = Math.min(d.prevTransform.x, e));
+    let n = d.nextTransform.x, h = d.nextTransform.y;
+    n < e && n < d.prevTransform.x && (n = Math.min(d.prevTransform.x, e));
     const c = d.canvasWidth * d.prevTransform.scale, a = r - c;
-    s > a && s > d.prevTransform.x && (s = Math.max(d.prevTransform.x, a)), h < o && h < d.prevTransform.y && (h = Math.min(d.prevTransform.y, o));
-    const l = d.canvasHeight * d.prevTransform.scale, u = n - l;
-    return h > u && h > d.prevTransform.y && (h = Math.max(d.prevTransform.y, u)), { scale: d.nextTransform.scale, x: s, y: h };
+    n > a && n > d.prevTransform.x && (n = Math.max(d.prevTransform.x, a)), h < o && h < d.prevTransform.y && (h = Math.min(d.prevTransform.y, o));
+    const l = d.canvasHeight * d.prevTransform.scale, g = s - l;
+    return h > g && h > d.prevTransform.y && (h = Math.max(d.prevTransform.y, g)), { scale: d.nextTransform.scale, x: n, y: h };
   };
-}, Le = (t) => {
-  const e = t.maxContentScale, r = t.minContentScale, o = e !== null ? 1 / e : 0, n = r !== null ? 1 / r : 1 / 0;
+}, Ie = (t) => {
+  const e = t.maxContentScale, r = t.minContentScale, o = e !== null ? 1 / e : 0, s = r !== null ? 1 / r : 1 / 0;
   return (d) => {
-    const s = d.prevTransform, h = d.nextTransform;
+    const n = d.prevTransform, h = d.nextTransform;
     let c = h.scale, a = h.x, l = h.y;
-    if (h.scale > n && h.scale > s.scale) {
-      c = Math.max(s.scale, n), a = s.x, l = s.y;
-      const u = (c - s.scale) / (h.scale - s.scale);
-      a = s.x + (h.x - s.x) * u, l = s.y + (h.y - s.y) * u;
+    if (h.scale > s && h.scale > n.scale) {
+      c = Math.max(n.scale, s), a = n.x, l = n.y;
+      const g = (c - n.scale) / (h.scale - n.scale);
+      a = n.x + (h.x - n.x) * g, l = n.y + (h.y - n.y) * g;
     }
-    if (h.scale < o && h.scale < s.scale) {
-      c = Math.min(s.scale, o), a = s.x, l = s.y;
-      const u = (c - s.scale) / (h.scale - s.scale);
-      a = s.x + (h.x - s.x) * u, l = s.y + (h.y - s.y) * u;
+    if (h.scale < o && h.scale < n.scale) {
+      c = Math.min(n.scale, o), a = n.x, l = n.y;
+      const g = (c - n.scale) / (h.scale - n.scale);
+      a = n.x + (h.x - n.x) * g, l = n.y + (h.y - n.y) * g;
     }
     return {
       scale: c,
@@ -1823,7 +1914,7 @@ const De = (t) => {
       y: l
     };
   };
-}, Ue = (t) => (e) => t.reduce(
+}, We = (t) => (e) => t.reduce(
   (r, o) => o({
     prevTransform: e.prevTransform,
     nextTransform: r,
@@ -1831,48 +1922,48 @@ const De = (t) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), Q = (t) => {
+), Z = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return Le({
+      return Ie({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return De({
+      return Ue({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, Ve = (t) => {
-  var y, m, E, C, z, P, D, L, K;
+}, Re = (t) => {
+  var y, m, E, N, z, M, V, D, _;
   const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, r = e !== void 0 ? e : 1.2, o = t == null ? void 0 : t.transformPreprocessor;
-  let n;
-  o !== void 0 ? Array.isArray(o) ? n = Ue(
+  let s;
+  o !== void 0 ? Array.isArray(o) ? s = We(
     o.map(
-      (b) => Q(b)
+      (C) => Z(C)
     )
-  ) : n = Q(o) : n = (b) => b.nextTransform;
-  const d = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab", s = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), h = ((C = t == null ? void 0 : t.events) == null ? void 0 : C.onTransformChange) ?? (() => {
-  }), c = (z = t == null ? void 0 : t.shift) == null ? void 0 : z.mouseDownEventVerifier, a = c !== void 0 ? c : (b) => b.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, u = l !== void 0 ? l : (b) => b.button === 0, f = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, A = f !== void 0 ? f : () => !0;
+  ) : s = Z(o) : s = (C) => C.nextTransform;
+  const d = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+  }), h = ((N = t == null ? void 0 : t.events) == null ? void 0 : N.onTransformChange) ?? (() => {
+  }), c = (z = t == null ? void 0 : t.shift) == null ? void 0 : z.mouseDownEventVerifier, a = c !== void 0 ? c : (C) => C.button === 0, l = (M = t == null ? void 0 : t.shift) == null ? void 0 : M.mouseUpEventVerifier, g = l !== void 0 ? l : (C) => C.button === 0, f = (V = t == null ? void 0 : t.scale) == null ? void 0 : V.mouseWheelEventVerifier, x = f !== void 0 ? f : () => !0;
   return {
     wheelSensitivity: r,
-    onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
+    onTransformStarted: ((D = t == null ? void 0 : t.events) == null ? void 0 : D.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onTransformFinished) ?? (() => {
+    onTransformFinished: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onTransformFinished) ?? (() => {
     }),
-    onBeforeTransformChange: s,
+    onBeforeTransformChange: n,
     onTransformChange: h,
-    transformPreprocessor: n,
+    transformPreprocessor: s,
     shiftCursor: d,
     mouseDownEventVerifier: a,
-    mouseUpEventVerifier: u,
-    mouseWheelEventVerifier: A
+    mouseUpEventVerifier: g,
+    mouseWheelEventVerifier: x
   };
 }, G = (t) => {
   const e = [], r = t.touches.length;
@@ -1881,27 +1972,27 @@ const De = (t) => {
   const o = e.reduce(
     (h, c) => [h[0] + c[0], h[1] + c[1]],
     [0, 0]
-  ), n = [o[0] / r, o[1] / r], s = e.map((h) => [h[0] - n[0], h[1] - n[1]]).reduce(
+  ), s = [o[0] / r, o[1] / r], n = e.map((h) => [h[0] - s[0], h[1] - s[1]]).reduce(
     (h, c) => h + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
     0
   );
   return {
-    x: n[0],
-    y: n[1],
-    scale: s / r,
+    x: s[0],
+    y: s[1],
+    scale: n / r,
     touchesCnt: r,
     touches: e
   };
-}, $e = (t, e, r) => ({
+}, Fe = (t, e, r) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * r
-}), Ie = (t, e, r, o) => ({
+}), Be = (t, e, r, o) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * r + t.x,
   y: t.scale * (1 - e) * o + t.y
 });
-class We {
+class ke {
   constructor(e, r) {
     i(this, "model");
     i(this, "transformation");
@@ -1926,8 +2017,8 @@ class We {
       if (!this.options.mouseWheelEventVerifier(e))
         return;
       e.preventDefault(), this.options.onTransformStarted();
-      const { left: r, top: o } = this.element.getBoundingClientRect(), n = e.clientX - r, d = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
-      this.scaleViewport(this.element, h, n, d), this.options.onTransformFinished();
+      const { left: r, top: o } = this.element.getBoundingClientRect(), s = e.clientX - r, d = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
+      this.scaleViewport(this.element, h, s, d), this.options.onTransformFinished();
     });
     i(this, "onTouchStart", (e) => {
       this.prevTouches = G(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
@@ -1948,7 +2039,7 @@ class We {
         -(o.x - this.prevTouches.x),
         -(o.y - this.prevTouches.y)
       ), o.touchesCnt === 2) {
-        const { left: d, top: s } = r.getBoundingClientRect(), h = this.prevTouches.x - d, c = this.prevTouches.y - s, l = 1 / (o.scale / this.prevTouches.scale);
+        const { left: d, top: n } = r.getBoundingClientRect(), h = this.prevTouches.x - d, c = this.prevTouches.y - n, l = 1 / (o.scale / this.prevTouches.scale);
         this.scaleViewport(r, l, h, c);
       }
       this.prevTouches = o;
@@ -1957,16 +2048,16 @@ class We {
       e.touches.length > 0 ? this.prevTouches = G(e) : this.stopTouchDrag();
     });
     i(this, "observer", new ResizeObserver(() => {
-      const e = this.canvas.transformation.getViewportMatrix(), { width: r, height: o } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
+      const e = this.canvas.transformation.getViewportMatrix(), { width: r, height: o } = this.element.getBoundingClientRect(), s = this.options.transformPreprocessor({
         prevTransform: e,
         nextTransform: e,
         canvasWidth: r,
         canvasHeight: o
       });
-      this.canvas.patchViewportMatrix(n), this.options.onTransformChange();
+      this.canvas.patchViewportMatrix(s), this.options.onTransformChange();
     }));
     i(this, "options");
-    this.canvas = e, this.options = Ve(r), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    this.canvas = e, this.options = Re(r), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
   attach(e) {
     return this.detach(), this.element = e, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), this;
@@ -2015,19 +2106,19 @@ class We {
   }
   moveViewport(e, r, o) {
     this.options.onBeforeTransformChange();
-    const n = this.transformation.getViewportMatrix(), d = $e(n, r, o), { width: s, height: h } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
-      prevTransform: n,
+    const s = this.transformation.getViewportMatrix(), d = Fe(s, r, o), { width: n, height: h } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
+      prevTransform: s,
       nextTransform: d,
-      canvasWidth: s,
+      canvasWidth: n,
       canvasHeight: h
     });
     this.canvas.patchViewportMatrix(c), this.options.onTransformChange();
   }
-  scaleViewport(e, r, o, n) {
+  scaleViewport(e, r, o, s) {
     this.options.onBeforeTransformChange();
-    const d = this.canvas.transformation.getViewportMatrix(), s = Ie(d, r, o, n), { width: h, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
+    const d = this.canvas.transformation.getViewportMatrix(), n = Be(d, r, o, s), { width: h, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
       prevTransform: d,
-      nextTransform: s,
+      nextTransform: n,
       canvasWidth: h,
       canvasHeight: c
     });
@@ -2046,7 +2137,7 @@ class We {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Re {
+class Ye {
   constructor() {
     i(this, "keyMap", /* @__PURE__ */ new Map());
     i(this, "valueMap", /* @__PURE__ */ new Map());
@@ -2083,19 +2174,19 @@ class Re {
     this.keyMap.clear(), this.valueMap.clear();
   }
 }
-class Fe {
+class Xe {
   constructor(e) {
     i(this, "transformation");
     i(this, "model");
-    i(this, "nodes", new Re());
-    i(this, "nodeIdGenerator", new U(
+    i(this, "nodes", new Ye());
+    i(this, "nodeIdGenerator", new L(
       (e) => this.nodes.hasKey(e)
     ));
     i(this, "nodesResizeObserver");
     this.canvas = e, this.nodesResizeObserver = new window.ResizeObserver((r) => {
       r.forEach((o) => {
-        const n = o.target;
-        this.handleNodeResize(n);
+        const s = o.target;
+        this.handleNodeResize(s);
       });
     }), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
@@ -2152,12 +2243,12 @@ class Fe {
   }
   handleNodeResize(e) {
     const r = this.nodes.getByValue(e);
-    this.canvas.updateNode(r), this.model.getNodeAdjacentEdgeIds(r).forEach((n) => {
-      this.canvas.updateEdge(n);
+    this.canvas.updateNode(r), this.model.getNodeAdjacentEdgeIds(r).forEach((s) => {
+      this.canvas.updateEdge(s);
     });
   }
 }
-class Ye {
+class je {
   constructor() {
     i(this, "coreOptions", {});
     i(this, "dragOptions");
@@ -2165,10 +2256,17 @@ class Ye {
     i(this, "hasDraggableNode", !1);
     i(this, "hasTransformableViewport", !1);
     i(this, "hasResizeReactiveNodes", !1);
+    i(this, "boxRenderingTrigger", null);
   }
+  /**
+   * specifies options for fundamental aspects of visualization
+   */
   setOptions(e) {
     return this.coreOptions = e, this;
   }
+  /**
+   * enables nodes draggable bu user
+   */
   setUserDraggableNodes(e) {
     return this.hasDraggableNode = !0, this.dragOptions = e, this;
   }
@@ -2179,32 +2277,48 @@ class Ye {
   setUserTransformableCanvas(e) {
     return this.setUserTransformableViewport(e);
   }
+  /**
+   * enables viewport transformable by user
+   */
   setUserTransformableViewport(e) {
     return this.hasTransformableViewport = !0, this.transformOptions = e, this;
   }
+  /**
+   * enables automatic edges update on node resize
+   */
   setResizeReactiveNodes() {
     return this.hasResizeReactiveNodes = !0, this;
   }
+  /**
+   * sets emitter for rendering graph inside bounded area
+   */
+  setBoxRenderingTrigger(e) {
+    return this.boxRenderingTrigger = e, this;
+  }
+  /**
+   * builds final canvas
+   */
   build() {
-    const e = new be(this.coreOptions);
-    let r = new Ce(e);
-    return this.hasResizeReactiveNodes && (r = new Fe(r)), this.hasDraggableNode && (r = new Pe(r, this.dragOptions)), this.hasTransformableViewport && (r = new We(
-      r,
+    const e = this.boxRenderingTrigger !== null ? De(this.boxRenderingTrigger) : Ve, r = new Me(this.coreOptions, e);
+    let o = new Te(r);
+    return this.hasResizeReactiveNodes && (o = new Xe(o)), this.hasDraggableNode && (o = new $e(o, this.dragOptions)), this.hasTransformableViewport && (o = new ke(
+      o,
       this.transformOptions
-    )), r;
+    )), o;
   }
 }
 export {
-  q as BezierEdgeShape,
-  Ye as CanvasBuilder,
-  ke as CanvasCore,
-  O as HorizontalEdgeShape,
-  Ye as HtmlGraphBuilder,
-  x as HtmlGraphError,
-  Fe as ResizeReactiveNodesCanvas,
-  ee as StraightEdgeShape,
-  Pe as UserDraggableNodesCanvas,
-  We as UserTransformableCanvas,
-  We as UserTransformableViewportCanvas,
-  te as VerticalEdgeShape
+  O as BezierEdgeShape,
+  je as CanvasBuilder,
+  Ge as CanvasCore,
+  Ae as EventSubject,
+  ee as HorizontalEdgeShape,
+  je as HtmlGraphBuilder,
+  A as HtmlGraphError,
+  Xe as ResizeReactiveNodesCanvas,
+  te as StraightEdgeShape,
+  $e as UserDraggableNodesCanvas,
+  ke as UserTransformableCanvas,
+  ke as UserTransformableViewportCanvas,
+  re as VerticalEdgeShape
 };