@html-graph/html-graph 0.1.2 → 0.1.3

package/dist/main.js

@@ -1,36 +1,36 @@
 var O = Object.defineProperty;
 var K = (e, t, o) => t in e ? O(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var s = (e, t, o) => K(e, typeof t != "symbol" ? t + "" : t, o);
+var n = (e, t, o) => K(e, typeof t != "symbol" ? t + "" : t, o);
 const _ = (e, t) => ({
   x: e / 2,
   y: t / 2
 }), f = (e, t, o) => ({
   x: t.x * e.x - t.y * e.y + ((1 - t.x) * o.x + t.y * o.y),
   y: t.y * e.x + t.x * e.y + ((1 - t.x) * o.y - t.y * o.x)
-}), A = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), u = {
+}), A = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), w = {
   x: 0,
   y: 0
 }, E = (e, t, o, r) => {
-  const i = [
-    u,
+  const s = [
+    w,
     { x: o, y: r },
     { x: o, y: -r }
-  ].map((l) => f(l, e, u)).map((l) => ({ x: l.x + t.x, y: l.y + t.y })), c = `M ${i[0].x} ${i[0].y}`, d = `L ${i[1].x} ${i[1].y}`, h = `L ${i[2].x} ${i[2].y}`;
-  return `${c} ${d} ${h}`;
+  ].map((l) => f(l, e, w)).map((l) => ({ x: l.x + t.x, y: l.y + t.y })), h = `M ${s[0].x} ${s[0].y}`, d = `L ${s[1].x} ${s[1].y}`, c = `L ${s[2].x} ${s[2].y}`;
+  return `${h} ${d} ${c}`;
 }, C = (e, t) => {
   const o = [];
   if (e.length > 0 && o.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && o.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
     const r = e.length - 1;
-    let n = 0, i = 0, c = 0;
-    e.forEach((d, h) => {
-      let l = 0, a = 0, w = 0;
-      const y = h > 0, x = h < r, v = y && x;
-      if (y && (l = -n, a = -i, w = c), x) {
-        const z = e[h + 1];
-        n = z.x - d.x, i = z.y - d.y, c = Math.sqrt(n * n + i * i);
+    let i = 0, s = 0, h = 0;
+    e.forEach((d, c) => {
+      let l = 0, a = 0, g = 0;
+      const y = c > 0, x = c < r, v = y && x;
+      if (y && (l = -i, a = -s, g = h), x) {
+        const z = e[c + 1];
+        i = z.x - d.x, s = z.y - d.y, h = Math.sqrt(i * i + s * s);
       }
-      const M = c !== 0 ? Math.min((v ? t : 0) / c, h < r - 1 ? 0.5 : 1) : 0, X = v ? { x: d.x + n * M, y: d.y + i * M } : d, k = w !== 0 ? Math.min((v ? t : 0) / w, h > 1 ? 0.5 : 1) : 0, B = v ? { x: d.x + l * k, y: d.y + a * k } : d;
-      h > 0 && o.push(`L ${B.x} ${B.y}`), v && o.push(
+      const M = h !== 0 ? Math.min((v ? t : 0) / h, c < r - 1 ? 0.5 : 1) : 0, X = v ? { x: d.x + i * M, y: d.y + s * M } : d, k = g !== 0 ? Math.min((v ? t : 0) / g, c > 1 ? 0.5 : 1) : 0, B = v ? { x: d.x + l * k, y: d.y + a * k } : d;
+      c > 0 && o.push(`L ${B.x} ${B.y}`), v && o.push(
         `C ${d.x} ${d.y} ${d.x} ${d.y} ${X.x} ${X.y}`
       );
     });
@@ -55,20 +55,20 @@ const _ = (e, t) => ({
   }, r = {
     x: t.x + t.width / 2,
     y: t.y + t.height / 2
-  }, n = Math.min(o.x, r.x), i = Math.min(o.y, r.y), c = Math.abs(r.x - o.x), d = Math.abs(r.y - o.y), h = o.x <= r.x ? 1 : -1, l = o.y <= r.y ? 1 : -1;
+  }, i = Math.min(o.x, r.x), s = Math.min(o.y, r.y), h = Math.abs(r.x - o.x), d = Math.abs(r.y - o.y), c = o.x <= r.x ? 1 : -1, l = o.y <= r.y ? 1 : -1;
   return {
-    x: n,
-    y: i,
-    width: c,
+    x: i,
+    y: s,
+    width: h,
     height: d,
-    flipX: h,
+    flipX: c,
     flipY: l
   };
 }, J = (e) => {
   const t = f(
-    { x: e.arrowLength, y: u.y },
+    { x: e.arrowLength, y: w.y },
     e.fromVect,
-    u
+    w
   ), o = f(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
@@ -76,160 +76,160 @@ const _ = (e, t) => ({
   ), r = {
     x: t.x + e.fromVect.x * e.curvature,
     y: t.y + e.fromVect.y * e.curvature
-  }, n = {
+  }, i = {
     x: o.x - e.toVect.x * e.curvature,
     y: o.y - e.toVect.y * e.curvature
-  }, i = `M ${t.x} ${t.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`, c = e.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${t.x} ${t.y} `, d = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
-  return `${c}${i}${d}`;
+  }, s = `M ${t.x} ${t.y} C ${r.x} ${r.y}, ${i.x} ${i.y}, ${o.x} ${o.y}`, h = e.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${t.x} ${t.y} `, d = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
+  return `${h}${s}${d}`;
 }, Q = (e) => {
   const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: u.y },
+    { x: e.arrowLength, y: w.y },
     e.fromVect,
-    u
-  ) : u, o = e.hasTargetArrow ? f(
+    w
+  ) : w, o = e.hasTargetArrow ? f(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength, n = Math.cos(e.detourDirection) * e.detourDistance, i = Math.sin(e.detourDirection) * e.detourDistance, c = n * e.flipX, d = i * e.flipY, h = f(
-    { x: r, y: u.y },
+  ) : e.to, r = e.arrowLength, i = Math.cos(e.detourDirection) * e.detourDistance, s = Math.sin(e.detourDirection) * e.detourDistance, h = i * e.flipX, d = s * e.flipY, c = f(
+    { x: r, y: w.y },
     e.fromVect,
-    u
+    w
   ), l = {
-    x: h.x + c,
-    y: h.y + d
+    x: c.x + h,
+    y: c.y + d
   }, a = f(
     { x: e.to.x - r, y: e.to.y },
     e.toVect,
     e.to
-  ), w = {
-    x: a.x + c,
+  ), g = {
+    x: a.x + h,
     y: a.y + d
-  }, y = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 }, x = {
-    x: h.x + e.curvature * e.fromVect.x,
-    y: h.y + e.curvature * e.fromVect.y
+  }, y = { x: (l.x + g.x) / 2, y: (l.y + g.y) / 2 }, x = {
+    x: c.x + e.curvature * e.fromVect.x,
+    y: c.y + e.curvature * e.fromVect.y
   }, v = {
     x: a.x - e.curvature * e.toVect.x,
     y: a.y - e.curvature * e.toVect.y
   }, p = {
-    x: h.x + c,
-    y: h.y + d
+    x: c.x + h,
+    y: c.y + d
   }, M = {
-    x: a.x + c,
+    x: a.x + h,
     y: a.y + d
   };
   return [
     `M ${t.x} ${t.y}`,
-    `L ${h.x} ${h.y}`,
+    `L ${c.x} ${c.y}`,
     `C ${x.x} ${x.y} ${p.x} ${p.y} ${y.x} ${y.y}`,
     `C ${M.x} ${M.y} ${v.x} ${v.y} ${a.x} ${a.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
 }, Z = (e) => {
   const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: u.y },
+    { x: e.arrowLength, y: w.y },
     e.fromVect,
-    u
-  ) : u, o = e.hasTargetArrow ? f(
+    w
+  ) : w, o = e.hasTargetArrow ? f(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = r - e.roundness, i = f({ x: n, y: u.y }, e.fromVect, u), c = f(
-    { x: e.to.x - n, y: e.to.y },
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, s = f({ x: i, y: w.y }, e.fromVect, w), h = f(
+    { x: e.to.x - i, y: e.to.y },
     e.toVect,
     e.to
-  ), d = Math.max((i.x + c.x) / 2, r), h = e.to.y / 2, l = { x: e.flipX > 0 ? d : -r, y: i.y }, a = { x: l.x, y: h }, w = {
+  ), d = Math.max((s.x + h.x) / 2, r), c = e.to.y / 2, l = { x: e.flipX > 0 ? d : -r, y: s.y }, a = { x: l.x, y: c }, g = {
     x: e.flipX > 0 ? e.to.x - d : e.to.x + r,
-    y: c.y
-  }, y = { x: w.x, y: h };
+    y: h.y
+  }, y = { x: g.x, y: c };
   return C(
-    [t, i, l, a, y, w, c, o],
+    [t, s, l, a, y, g, h, o],
     e.roundness
   );
 }, R = (e) => {
   const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: u.y },
+    { x: e.arrowLength, y: w.y },
     e.fromVect,
-    u
-  ) : u, o = e.hasTargetArrow ? f(
+    w
+  ) : w, o = e.hasTargetArrow ? f(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = f(
-    { x: r, y: u.y },
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = f(
+    { x: r, y: w.y },
     e.fromVect,
-    u
-  ), i = Math.cos(e.detourDirection) * e.detourDistance, c = Math.sin(e.detourDirection) * e.detourDistance, d = i * e.flipX, h = c * e.flipY, l = { x: n.x + d, y: n.y + h }, a = f(
+    w
+  ), s = Math.cos(e.detourDirection) * e.detourDistance, h = Math.sin(e.detourDirection) * e.detourDistance, d = s * e.flipX, c = h * e.flipY, l = { x: i.x + d, y: i.y + c }, a = f(
     { x: e.to.x - r, y: e.to.y },
     e.toVect,
     e.to
-  ), w = { x: a.x + d, y: a.y + h };
+  ), g = { x: a.x + d, y: a.y + c };
   return C(
-    [t, n, l, w, a, o],
+    [t, i, l, g, a, o],
     e.roundness
   );
 }, q = (e) => {
   const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: u.y },
+    { x: e.arrowLength, y: w.y },
     e.fromVect,
-    u
-  ) : u, o = e.hasTargetArrow ? f(
+    w
+  ) : w, o = e.hasTargetArrow ? f(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = f({ x: r, y: u.y }, e.fromVect, u), i = f(
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = f({ x: r, y: w.y }, e.fromVect, w), s = f(
     { x: e.to.x - r, y: e.to.y },
     e.toVect,
     e.to
   );
-  return C([t, n, i, o], e.roundness);
+  return C([t, i, s, o], e.roundness);
 }, tt = (e) => {
   const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: u.y },
+    { x: e.arrowLength, y: w.y },
     e.fromVect,
-    u
-  ) : u, o = e.hasTargetArrow ? f(
+    w
+  ) : w, o = e.hasTargetArrow ? f(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = r - e.roundness, i = f({ x: n, y: u.y }, e.fromVect, u), c = f(
-    { x: e.to.x - n, y: e.to.y },
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, s = f({ x: i, y: w.y }, e.fromVect, w), h = f(
+    { x: e.to.x - i, y: e.to.y },
     e.toVect,
     e.to
-  ), d = Math.max((i.y + c.y) / 2, r), h = e.to.x / 2, l = { x: i.x, y: e.flipY > 0 ? d : -r }, a = { x: h, y: l.y }, w = {
-    x: c.x,
+  ), d = Math.max((s.y + h.y) / 2, r), c = e.to.x / 2, l = { x: s.x, y: e.flipY > 0 ? d : -r }, a = { x: c, y: l.y }, g = {
+    x: h.x,
     y: e.flipY > 0 ? e.to.y - d : e.to.y + r
-  }, y = { x: h, y: w.y };
+  }, y = { x: c, y: g.y };
   return C(
-    [t, i, l, a, y, w, c, o],
+    [t, s, l, a, y, g, h, o],
     e.roundness
   );
 }, Y = (e) => {
-  const t = e.arrowOffset, o = e.side, r = e.arrowLength + t, n = r + 2 * o, c = [
-    { x: e.arrowLength, y: u.y },
-    { x: r, y: u.y },
+  const t = e.arrowOffset, o = e.side, r = e.arrowLength + t, i = r + 2 * o, h = [
+    { x: e.arrowLength, y: w.y },
+    { x: r, y: w.y },
     { x: r, y: e.side },
-    { x: n, y: e.side },
-    { x: n, y: -e.side },
+    { x: i, y: e.side },
+    { x: i, y: -e.side },
     { x: r, y: -e.side },
-    { x: r, y: u.y },
-    { x: e.arrowLength, y: u.y }
+    { x: r, y: w.y },
+    { x: e.arrowLength, y: w.y }
   ].map(
-    (h) => f(h, e.fromVect, u)
-  ), d = `M ${u.x} ${u.y} L ${c[0].x} ${c[0].y} `;
-  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : d}${C(c, e.roundness)}`;
+    (c) => f(c, e.fromVect, w)
+  ), d = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
+  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : d}${C(h, e.roundness)}`;
 }, et = (e) => {
-  const t = e.smallRadius, o = e.radius, r = Math.sqrt(t * t + o * o), n = t + o, i = e.arrowLength + r * (1 - o / n), c = t * o / n, h = [
-    { x: e.arrowLength, y: u.y },
-    { x: i, y: c },
-    { x: i, y: -c }
-  ].map((w) => f(w, e.fromVect, u)), l = [
-    `M ${h[0].x} ${h[0].y}`,
-    `A ${t} ${t} 0 0 1 ${h[1].x} ${h[1].y}`,
-    `A ${o} ${o} 0 1 0 ${h[2].x} ${h[2].y}`,
-    `A ${t} ${t} 0 0 1 ${h[0].x} ${h[0].y}`
-  ].join(" "), a = `M 0 0 L ${h[0].x} ${h[0].y} `;
+  const t = e.smallRadius, o = e.radius, r = Math.sqrt(t * t + o * o), i = t + o, s = e.arrowLength + r * (1 - o / i), h = t * o / i, c = [
+    { x: e.arrowLength, y: w.y },
+    { x: s, y: h },
+    { x: s, y: -h }
+  ].map((g) => f(g, e.fromVect, w)), l = [
+    `M ${c[0].x} ${c[0].y}`,
+    `A ${t} ${t} 0 0 1 ${c[1].x} ${c[1].y}`,
+    `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
+    `A ${t} ${t} 0 0 1 ${c[0].x} ${c[0].y}`
+  ].join(" "), a = `M 0 0 L ${c[0].x} ${c[0].y} `;
   return `${e.hasSourceArrow || e.hasTargetArrow ? "" : a}${l}`;
-}, g = Object.freeze({
+}, u = Object.freeze({
   color: "#5c5c5c",
   width: 1,
   arrowLength: 15,
@@ -248,55 +248,55 @@ const _ = (e, t) => ({
 });
 class ot {
   constructor(t) {
-    s(this, "svg", I());
-    s(this, "group", $());
-    s(this, "line");
-    s(this, "sourceArrow", null);
-    s(this, "targetArrow", null);
-    s(this, "arrowLength");
-    s(this, "arrowWidth");
-    s(this, "curvature");
-    s(this, "portCycleRadius");
-    s(this, "portCycleSmallRadius");
-    s(this, "detourDirection");
-    s(this, "detourDistance");
-    s(this, "hasSourceArrow");
-    s(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? g.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? g.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? g.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
-    const o = (t == null ? void 0 : t.color) ?? g.color, r = (t == null ? void 0 : t.width) ?? g.width;
+    n(this, "svg", I());
+    n(this, "group", $());
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    n(this, "arrowLength");
+    n(this, "arrowWidth");
+    n(this, "curvature");
+    n(this, "portCycleRadius");
+    n(this, "portCycleSmallRadius");
+    n(this, "detourDirection");
+    n(this, "detourDistance");
+    n(this, "hasSourceArrow");
+    n(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? u.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
+    const o = (t == null ? void 0 : t.color) ?? u.color, r = (t == null ? void 0 : t.width) ?? u.width;
     this.svg.appendChild(this.group), this.line = m(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(o), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: n, height: i, flipX: c, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
       t.source,
       t.target
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${i}px`, this.group.style.transform = `scale(${c}, ${d})`;
-    const h = A(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${d})`;
+    const c = A(
       t.source.direction,
-      c,
+      h,
       d
     ), l = A(
       t.target.direction,
-      c,
+      h,
       d
     ), a = {
-      x: n,
-      y: i
+      x: i,
+      y: s
     };
-    let w, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (w = et({
-      fromVect: h,
+    let g, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (g = et({
+      fromVect: c,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = Q({
+    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Q({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
-      flipX: c,
+      flipX: h,
       flipY: d,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
@@ -304,18 +304,18 @@ class ot {
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : w = J({
+    }) : g = J({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", w), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const v = E(
-        h,
-        u,
+        c,
+        w,
         this.arrowLength,
         this.arrowWidth
       );
@@ -334,62 +334,62 @@ class ot {
 }
 class rt {
   constructor(t) {
-    s(this, "svg", I());
-    s(this, "group", $());
-    s(this, "line");
-    s(this, "sourceArrow", null);
-    s(this, "targetArrow", null);
-    s(this, "arrowLength");
-    s(this, "arrowWidth");
-    s(this, "arrowOffset");
-    s(this, "roundness");
-    s(this, "cycleSquareSide");
-    s(this, "detourDirection");
-    s(this, "detourDistance");
-    s(this, "hasSourceArrow");
-    s(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? g.cycleSquareSide;
-    const o = (t == null ? void 0 : t.roundness) ?? g.roundness;
+    n(this, "svg", I());
+    n(this, "group", $());
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    n(this, "arrowLength");
+    n(this, "arrowWidth");
+    n(this, "arrowOffset");
+    n(this, "roundness");
+    n(this, "cycleSquareSide");
+    n(this, "detourDirection");
+    n(this, "detourDistance");
+    n(this, "hasSourceArrow");
+    n(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
     this.roundness = Math.min(
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
-    const r = (t == null ? void 0 : t.color) ?? g.color, n = (t == null ? void 0 : t.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = m(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (t == null ? void 0 : t.color) ?? u.color, i = (t == null ? void 0 : t.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = m(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: n, height: i, flipX: c, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
       t.source,
       t.target
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${i}px`, this.group.style.transform = `scale(${c}, ${d})`;
-    const h = A(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${d})`;
+    const c = A(
       t.source.direction,
-      c,
+      h,
       d
     ), l = A(
       t.target.direction,
-      c,
+      h,
       d
     ), a = {
-      x: n,
-      y: i
+      x: i,
+      y: s
     };
-    let w, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (w = Y({
-      fromVect: h,
+    let g, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (g = Y({
+      fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = R({
+    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = R({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
-      flipX: c,
+      flipX: h,
       flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -398,20 +398,20 @@ class rt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : w = Z({
+    }) : g = Z({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
-      flipX: c,
+      flipX: h,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", w), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const v = E(
-        h,
-        u,
+        c,
+        w,
         this.arrowLength,
         this.arrowWidth
       );
@@ -430,62 +430,62 @@ class rt {
 }
 class it {
   constructor(t) {
-    s(this, "svg", I());
-    s(this, "group", $());
-    s(this, "line");
-    s(this, "sourceArrow", null);
-    s(this, "targetArrow", null);
-    s(this, "arrowLength");
-    s(this, "arrowWidth");
-    s(this, "arrowOffset");
-    s(this, "roundness");
-    s(this, "cycleSquareSide");
-    s(this, "detourDirection");
-    s(this, "detourDistance");
-    s(this, "hasSourceArrow");
-    s(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? g.cycleSquareSide;
-    const o = (t == null ? void 0 : t.roundness) ?? g.roundness;
+    n(this, "svg", I());
+    n(this, "group", $());
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    n(this, "arrowLength");
+    n(this, "arrowWidth");
+    n(this, "arrowOffset");
+    n(this, "roundness");
+    n(this, "cycleSquareSide");
+    n(this, "detourDirection");
+    n(this, "detourDistance");
+    n(this, "hasSourceArrow");
+    n(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
     this.roundness = Math.min(
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
-    const r = (t == null ? void 0 : t.color) ?? g.color, n = (t == null ? void 0 : t.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = m(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (t == null ? void 0 : t.color) ?? u.color, i = (t == null ? void 0 : t.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = m(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: n, height: i, flipX: c, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
       t.source,
       t.target
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${i}px`, this.group.style.transform = `scale(${c}, ${d})`;
-    const h = A(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${d})`;
+    const c = A(
       t.source.direction,
-      c,
+      h,
       d
     ), l = A(
       t.target.direction,
-      c,
+      h,
       d
     ), a = {
-      x: n,
-      y: i
+      x: i,
+      y: s
     };
-    let w, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (w = Y({
-      fromVect: h,
+    let g, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (g = Y({
+      fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = R({
+    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = R({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
-      flipX: c,
+      flipX: h,
       flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -494,19 +494,19 @@ class it {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : w = q({
+    }) : g = q({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", w), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const v = E(
-        h,
-        u,
+        c,
+        w,
         this.arrowLength,
         this.arrowWidth
       );
@@ -525,62 +525,62 @@ class it {
 }
 class nt {
   constructor(t) {
-    s(this, "svg", I());
-    s(this, "group", $());
-    s(this, "line");
-    s(this, "sourceArrow", null);
-    s(this, "targetArrow", null);
-    s(this, "arrowLength");
-    s(this, "arrowWidth");
-    s(this, "arrowOffset");
-    s(this, "roundness");
-    s(this, "cycleSquareSide");
-    s(this, "detourDirection");
-    s(this, "detourDistance");
-    s(this, "hasSourceArrow");
-    s(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? g.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? g.cycleSquareSide;
-    const o = (t == null ? void 0 : t.roundness) ?? g.roundness;
+    n(this, "svg", I());
+    n(this, "group", $());
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    n(this, "arrowLength");
+    n(this, "arrowWidth");
+    n(this, "arrowOffset");
+    n(this, "roundness");
+    n(this, "cycleSquareSide");
+    n(this, "detourDirection");
+    n(this, "detourDistance");
+    n(this, "hasSourceArrow");
+    n(this, "hasTargetArrow");
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
     this.roundness = Math.min(
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? g.detourDirectionVertical, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? g.hasTargetArrow;
-    const r = (t == null ? void 0 : t.color) ?? g.color, n = (t == null ? void 0 : t.width) ?? g.width;
-    this.svg.appendChild(this.group), this.line = m(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (t == null ? void 0 : t.color) ?? u.color, i = (t == null ? void 0 : t.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = m(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = T(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = T(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: n, height: i, flipX: c, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
       t.source,
       t.target
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${i}px`, this.group.style.transform = `scale(${c}, ${d})`;
-    const h = A(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${d})`;
+    const c = A(
       t.source.direction,
-      c,
+      h,
       d
     ), l = A(
       t.target.direction,
-      c,
+      h,
       d
     ), a = {
-      x: n,
-      y: i
+      x: i,
+      y: s
     };
-    let w, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (w = Y({
-      fromVect: h,
+    let g, y = l, x = -this.arrowLength;
+    if (t.source.portId === t.target.portId ? (g = Y({
+      fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = h, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? w = R({
+    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = R({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
-      flipX: c,
+      flipX: h,
       flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -589,9 +589,9 @@ class nt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : w = tt({
+    }) : g = tt({
       to: a,
-      fromVect: h,
+      fromVect: c,
       toVect: l,
       flipY: d,
       arrowLength: this.arrowLength,
@@ -599,10 +599,10 @@ class nt {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), this.line.setAttribute("d", w), this.sourceArrow) {
+    }), this.line.setAttribute("d", g), this.sourceArrow) {
       const v = E(
-        h,
-        u,
+        c,
+        w,
         this.arrowLength,
         this.arrowWidth
       );
@@ -686,41 +686,41 @@ const st = (e) => {
 }, ht = (e, t) => {
   let o = G, r = G;
   e === "incremental" && (o = V()), t === "incremental" && (r = V());
-  const n = V();
-  return e === "shared-incremental" && (o = n), t === "shared-incremental" && (r = n), typeof e == "number" && (o = F(e)), typeof t == "number" && (r = F(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
+  const i = V();
+  return e === "shared-incremental" && (o = i), t === "shared-incremental" && (r = i), typeof e == "number" && (o = F(e)), typeof t == "number" && (r = F(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
     nodesPriorityFn: o,
     edgesPriorityFn: r
   };
 }, dt = (e) => {
-  var o, r, n, i, c;
+  var o, r, i, s, h;
   const t = ht(
     (o = e == null ? void 0 : e.nodes) == null ? void 0 : o.priority,
     (r = e == null ? void 0 : e.edges) == null ? void 0 : r.priority
   );
   return {
     nodes: {
-      centerFn: ((n = e == null ? void 0 : e.nodes) == null ? void 0 : n.centerFn) ?? _,
+      centerFn: ((i = e == null ? void 0 : e.nodes) == null ? void 0 : i.centerFn) ?? _,
       priorityFn: t.nodesPriorityFn
     },
     ports: {
-      direction: ((i = e == null ? void 0 : e.ports) == null ? void 0 : i.direction) ?? 0
+      direction: ((s = e == null ? void 0 : e.ports) == null ? void 0 : s.direction) ?? 0
     },
     edges: {
-      shapeFactory: st(((c = e == null ? void 0 : e.edges) == null ? void 0 : c.shape) ?? {}),
+      shapeFactory: st(((h = e == null ? void 0 : e.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: t.edgesPriorityFn
     }
   };
 };
 class ct {
   constructor() {
-    s(this, "nodes", /* @__PURE__ */ new Map());
-    s(this, "ports", /* @__PURE__ */ new Map());
-    s(this, "nodePorts", /* @__PURE__ */ new Map());
-    s(this, "portNodeId", /* @__PURE__ */ new Map());
-    s(this, "edges", /* @__PURE__ */ new Map());
-    s(this, "incommingEdges", /* @__PURE__ */ new Map());
-    s(this, "outcommingEdges", /* @__PURE__ */ new Map());
-    s(this, "cycleEdges", /* @__PURE__ */ new Map());
+    n(this, "nodes", /* @__PURE__ */ new Map());
+    n(this, "ports", /* @__PURE__ */ new Map());
+    n(this, "nodePorts", /* @__PURE__ */ new Map());
+    n(this, "portNodeId", /* @__PURE__ */ new Map());
+    n(this, "edges", /* @__PURE__ */ new Map());
+    n(this, "incommingEdges", /* @__PURE__ */ new Map());
+    n(this, "outcommingEdges", /* @__PURE__ */ new Map());
+    n(this, "cycleEdges", /* @__PURE__ */ new Map());
   }
   addNode(t) {
     this.nodes.set(t.nodeId, {
@@ -799,8 +799,8 @@ class ct {
     return this.edges.get(t);
   }
   removeEdge(t) {
-    const o = this.edges.get(t), r = o.from, n = o.to;
-    this.cycleEdges.get(r).delete(t), this.cycleEdges.get(n).delete(t), this.incommingEdges.get(r).delete(t), this.incommingEdges.get(n).delete(t), this.outcommingEdges.get(r).delete(t), this.outcommingEdges.get(n).delete(t), this.edges.delete(t);
+    const o = this.edges.get(t), r = o.from, i = o.to;
+    this.cycleEdges.get(r).delete(t), this.cycleEdges.get(i).delete(t), this.incommingEdges.get(r).delete(t), this.incommingEdges.get(i).delete(t), this.outcommingEdges.get(r).delete(t), this.outcommingEdges.get(i).delete(t), this.edges.delete(t);
   }
   clear() {
     this.nodes.clear(), this.ports.clear(), this.nodePorts.clear(), this.portNodeId.clear(), this.edges.clear(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear();
@@ -824,22 +824,22 @@ class ct {
   getNodeIncomingEdgeIds(t) {
     const o = Array.from(this.nodePorts.get(t).keys());
     let r = [];
-    return o.forEach((n) => {
-      r = [...r, ...this.getPortIncomingEdgeIds(n)];
+    return o.forEach((i) => {
+      r = [...r, ...this.getPortIncomingEdgeIds(i)];
     }), r;
   }
   getNodeOutcomingEdgeIds(t) {
     const o = Array.from(this.nodePorts.get(t).keys());
     let r = [];
-    return o.forEach((n) => {
-      r = [...r, ...this.getPortOutcomingEdgeIds(n)];
+    return o.forEach((i) => {
+      r = [...r, ...this.getPortOutcomingEdgeIds(i)];
     }), r;
   }
   getNodeCycleEdgeIds(t) {
     const o = Array.from(this.nodePorts.get(t).keys());
     let r = [];
-    return o.forEach((n) => {
-      r = [...r, ...this.getPortCycleEdgeIds(n)];
+    return o.forEach((i) => {
+      r = [...r, ...this.getPortCycleEdgeIds(i)];
     }), r;
   }
   getNodeAdjacentEdgeIds(t) {
@@ -926,8 +926,8 @@ const j = (e) => ({
 };
 class at {
   constructor() {
-    s(this, "viewportMatrix", H);
-    s(this, "contentMatrix", H);
+    n(this, "viewportMatrix", H);
+    n(this, "contentMatrix", H);
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -973,11 +973,11 @@ const ut = () => {
 };
 class ft {
   constructor(t, o) {
-    s(this, "canvasWrapper", null);
-    s(this, "host", ut());
-    s(this, "container", wt());
-    s(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    s(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    n(this, "canvasWrapper", null);
+    n(this, "host", ut());
+    n(this, "container", wt());
+    n(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
+    n(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     this.graphStore = t, this.viewportTransformer = o, this.host.appendChild(this.container);
   }
   attach(t) {
@@ -1017,8 +1017,8 @@ class ft {
     this.clear(), this.detach(), this.host.removeChild(this.container);
   }
   updateNodeCoordinates(t) {
-    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: n, height: i } = r.element.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix().scale, d = r.centerFn(n, i), h = r.x - c * d.x, l = r.y - c * d.y;
-    o.style.transform = `translate(${h}px, ${l}px)`;
+    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: i, height: s } = r.element.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix().scale, d = r.centerFn(i, s), c = r.x - h * d.x, l = r.y - h * d.y;
+    o.style.transform = `translate(${c}px, ${l}px)`;
   }
   updateNodePriority(t) {
     const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
@@ -1031,31 +1031,31 @@ class ft {
     this.edgeIdToElementMap.set(t, r.shape.svg), this.container.appendChild(r.shape.svg);
   }
   renderEdge(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), i = r.element.getBoundingClientRect(), c = n.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix(), l = {
-      x: h.scale * (i.left - d.left) + h.dx,
-      y: h.scale * (i.top - d.top) + h.dy
+    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), i = this.graphStore.getPort(o.to), s = r.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportTransformer.getViewportMatrix(), l = {
+      x: c.scale * (s.left - d.left) + c.dx,
+      y: c.scale * (s.top - d.top) + c.dy
     }, a = {
-      x: h.scale * (c.left - d.left) + h.dx,
-      y: h.scale * (c.top - d.top) + h.dy
-    }, w = {
+      x: c.scale * (h.left - d.left) + c.dx,
+      y: c.scale * (h.top - d.top) + c.dy
+    }, g = {
       x: l.x,
       y: l.y,
-      width: i.width * h.scale,
-      height: i.height * h.scale,
+      width: s.width * c.scale,
+      height: s.height * c.scale,
       direction: r.direction,
       portId: o.from,
       nodeId: this.graphStore.getPortNodeId(o.from)
     }, y = {
       x: a.x,
       y: a.y,
-      width: c.width * h.scale,
-      height: c.height * h.scale,
-      direction: n.direction,
+      width: h.width * c.scale,
+      height: h.height * c.scale,
+      direction: i.direction,
       portId: o.to,
       nodeId: this.graphStore.getPortNodeId(o.to)
     };
     o.shape.render({
-      source: w,
+      source: g,
       target: y
     });
   }
@@ -1066,7 +1066,7 @@ class ft {
 }
 class N {
   constructor(t) {
-    s(this, "counter", 0);
+    n(this, "counter", 0);
     this.checkExists = t;
   }
   create(t) {
@@ -1083,21 +1083,21 @@ class N {
 class S extends Error {
   constructor() {
     super(...arguments);
-    s(this, "name", "HtmlGraphError");
+    n(this, "name", "HtmlGraphError");
   }
 }
 class vt {
-  constructor(t, o, r, n, i, c, d) {
-    s(this, "nodeIdGenerator", new N(
+  constructor(t, o, r, i, s, h, d) {
+    n(this, "nodeIdGenerator", new N(
       (t) => this.graphStore.getNode(t) !== void 0
     ));
-    s(this, "portIdGenerator", new N(
+    n(this, "portIdGenerator", new N(
       (t) => this.graphStore.getPort(t) !== void 0
     ));
-    s(this, "edgeIdGenerator", new N(
+    n(this, "edgeIdGenerator", new N(
       (t) => this.graphStore.getEdge(t) !== void 0
     ));
-    this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = n, this.defaultPortsDirection = i, this.defaultNodesPriorityFn = c, this.defaultEdgesPriorityFn = d;
+    this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = i, this.defaultPortsDirection = s, this.defaultNodesPriorityFn = h, this.defaultEdgesPriorityFn = d;
   }
   attach(t) {
     this.htmlController.attach(t);
@@ -1164,16 +1164,16 @@ class vt {
     const r = this.graphStore.getPort(t);
     if (r === void 0)
       throw new S("failed to unset nonexisting port");
-    r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((i) => {
-      this.htmlController.renderEdge(i);
+    r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
+      this.htmlController.renderEdge(s);
     });
   }
   updateNode(t, o) {
     const r = this.graphStore.getNode(t);
     if (r === void 0)
       throw new S("failed to update nonexisting node");
-    r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = (o == null ? void 0 : o.centerFn) ?? r.centerFn, r.priority = (o == null ? void 0 : o.priority) ?? r.priority, this.htmlController.updateNodeCoordinates(t), this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((i) => {
-      this.htmlController.renderEdge(i);
+    r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = (o == null ? void 0 : o.centerFn) ?? r.centerFn, r.priority = (o == null ? void 0 : o.priority) ?? r.priority, this.htmlController.updateNodeCoordinates(t), this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((s) => {
+      this.htmlController.renderEdge(s);
     });
   }
   removeEdge(t) {
@@ -1210,17 +1210,17 @@ class vt {
 }
 class xt {
   constructor(t) {
-    s(this, "transformation");
-    s(this, "model");
-    s(this, "canvasController");
-    s(this, "edgeShapeFactory");
+    n(this, "transformation");
+    n(this, "model");
+    n(this, "canvasController");
+    n(this, "edgeShapeFactory");
     this.apiOptions = t;
-    const o = dt(this.apiOptions), r = new at(), n = new ct();
-    this.model = new lt(n), this.transformation = new gt(r);
-    const i = new ft(n, r);
+    const o = dt(this.apiOptions), r = new at(), i = new ct();
+    this.model = new lt(i), this.transformation = new gt(r);
+    const s = new ft(i, r);
     this.canvasController = new vt(
-      n,
       i,
+      s,
       r,
       o.nodes.centerFn,
       o.ports.direction,
@@ -1307,36 +1307,36 @@ class xt {
   }
 }
 const P = (e, t, o) => {
-  const { x: r, y: n, width: i, height: c } = e.getBoundingClientRect();
-  return t >= r && t <= r + i && o >= n && o <= n + c;
+  const { x: r, y: i, width: s, height: h } = e.getBoundingClientRect();
+  return t >= r && t <= r + s && o >= i && o <= i + h;
 }, L = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, D = (e, t) => {
   t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
 };
 class St {
   constructor(t, o) {
-    s(this, "model");
-    s(this, "transformation");
-    s(this, "maxNodePriority", 0);
-    s(this, "nodes", /* @__PURE__ */ new Map());
-    s(this, "grabbedNodeId", null);
-    s(this, "onNodeDrag");
-    s(this, "onBeforeNodeDrag");
-    s(this, "onNodeDragFinished");
-    s(this, "nodeIdGenerator", new N(
+    n(this, "model");
+    n(this, "transformation");
+    n(this, "maxNodePriority", 0);
+    n(this, "nodes", /* @__PURE__ */ new Map());
+    n(this, "grabbedNodeId", null);
+    n(this, "onNodeDrag");
+    n(this, "onBeforeNodeDrag");
+    n(this, "onNodeDragFinished");
+    n(this, "nodeIdGenerator", new N(
       (t) => this.nodes.has(t)
     ));
-    s(this, "element", null);
-    s(this, "onWindowMouseMove", (t) => {
+    n(this, "element", null);
+    n(this, "onWindowMouseMove", (t) => {
       if (this.element !== null && (!P(this.element, t.clientX, t.clientY) || !L(this.window, t.clientX, t.clientY))) {
         this.cancelMouseDrag();
         return;
       }
       this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
     });
-    s(this, "onWindowMouseUp", (t) => {
+    n(this, "onWindowMouseUp", (t) => {
       t.button === 0 && this.cancelMouseDrag();
     });
-    s(this, "onWindowTouchMove", (t) => {
+    n(this, "onWindowTouchMove", (t) => {
       if (t.touches.length !== 1)
         return;
       const o = t.touches[0];
@@ -1345,26 +1345,26 @@ class St {
         return;
       }
       if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
-        const r = o.clientX - this.previousTouchCoords.x, n = o.clientY - this.previousTouchCoords.y;
-        this.dragNode(this.grabbedNodeId, r, n), this.previousTouchCoords = {
+        const r = o.clientX - this.previousTouchCoords.x, i = o.clientY - this.previousTouchCoords.y;
+        this.dragNode(this.grabbedNodeId, r, i), this.previousTouchCoords = {
           x: t.touches[0].clientX,
           y: t.touches[0].clientY
         };
       }
     });
-    s(this, "onWindowTouchFinish", (t) => {
+    n(this, "onWindowTouchFinish", (t) => {
       t.touches.length > 0 ? this.previousTouchCoords = {
         x: t.touches[0].clientX,
         y: t.touches[0].clientY
       } : this.cancelTouchDrag();
     });
-    s(this, "previousTouchCoords", null);
-    s(this, "freezePriority");
-    s(this, "window", window);
-    s(this, "dragCursor");
-    var r, n, i;
+    n(this, "previousTouchCoords", null);
+    n(this, "freezePriority");
+    n(this, "window", window);
+    n(this, "dragCursor");
+    var r, i, s;
     this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.onNodeDrag = ((r = o == null ? void 0 : o.events) == null ? void 0 : r.onNodeDrag) ?? (() => {
-    }), this.onBeforeNodeDrag = ((n = o == null ? void 0 : o.events) == null ? void 0 : n.onBeforeNodeDrag) ?? (() => !0), this.onNodeDragFinished = ((i = o == null ? void 0 : o.events) == null ? void 0 : i.onNodeDragFinished) ?? (() => {
+    }), this.onBeforeNodeDrag = ((i = o == null ? void 0 : o.events) == null ? void 0 : i.onBeforeNodeDrag) ?? (() => !0), this.onNodeDragFinished = ((s = o == null ? void 0 : o.events) == null ? void 0 : s.onNodeDragFinished) ?? (() => {
     }), this.freezePriority = (o == null ? void 0 : o.moveOnTop) === !1, this.dragCursor = (o == null ? void 0 : o.dragCursor) !== void 0 ? o.dragCursor : "grab";
   }
   attach(t) {
@@ -1376,34 +1376,34 @@ class St {
   addNode(t) {
     const o = this.nodeIdGenerator.create(t.id);
     this.canvas.addNode({ ...t, id: o }), this.updateMaxNodePriority(o);
-    const r = (i) => {
-      if (this.element === null || i.button !== 0)
+    const r = (s) => {
+      if (this.element === null || s.button !== 0)
         return;
-      const c = this.model.getNode(o);
+      const h = this.model.getNode(o);
       this.onBeforeNodeDrag({
         nodeId: o,
         element: t.element,
-        x: c.x,
-        y: c.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = o, D(this.element, this.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
-    }, n = (i) => {
-      i.stopImmediatePropagation(), this.previousTouchCoords = {
-        x: i.touches[0].clientX,
-        y: i.touches[0].clientY
+        x: h.x,
+        y: h.y
+      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, D(this.element, this.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
+    }, i = (s) => {
+      s.stopImmediatePropagation(), this.previousTouchCoords = {
+        x: s.touches[0].clientX,
+        y: s.touches[0].clientY
       };
-      const c = this.model.getNode(o);
+      const h = this.model.getNode(o);
       this.onBeforeNodeDrag({
         nodeId: o,
         element: t.element,
-        x: c.x,
-        y: c.y
-      }) && i.touches.length === 1 && (this.grabbedNodeId = o, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
+        x: h.x,
+        y: h.y
+      }) && s.touches.length === 1 && (this.grabbedNodeId = o, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
     };
     return this.nodes.set(o, {
       element: t.element,
       onMouseDown: r,
-      onTouchStart: n
-    }), t.element.addEventListener("mousedown", r), t.element.addEventListener("touchstart", n), this;
+      onTouchStart: i
+    }), t.element.addEventListener("mousedown", r), t.element.addEventListener("touchstart", i), this;
   }
   updateNode(t, o) {
     return this.canvas.updateNode(t, o), this.updateMaxNodePriority(t), this;
@@ -1445,15 +1445,15 @@ class St {
     this.detach(), this.clear(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
   dragNode(t, o, r) {
-    const n = this.model.getNode(t);
-    if (n === null)
+    const i = this.model.getNode(t);
+    if (i === null)
       return;
-    const i = this.canvas.transformation.getContentMatrix(), c = i.scale * n.x + i.dx, d = i.scale * n.y + i.dy, h = c + o, l = d + r, a = this.canvas.transformation.getViewportMatrix(), w = a.scale * h + a.dx, y = a.scale * l + a.dy;
-    this.canvas.updateNode(t, { x: w, y }), this.onNodeDrag({
+    const s = this.canvas.transformation.getContentMatrix(), h = s.scale * i.x + s.dx, d = s.scale * i.y + s.dy, c = h + o, l = d + r, a = this.canvas.transformation.getViewportMatrix(), g = a.scale * c + a.dx, y = a.scale * l + a.dy;
+    this.canvas.updateNode(t, { x: g, y }), this.onNodeDrag({
       nodeId: t,
-      element: n.element,
-      x: n.x,
-      y: n.y
+      element: i.element,
+      x: i.x,
+      y: i.y
     });
   }
   updateMaxNodePriority(t) {
@@ -1465,8 +1465,8 @@ class St {
       return;
     this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
     const o = this.maxNodePriority - 1;
-    this.model.getNodeAdjacentEdgeIds(t).forEach((n) => {
-      this.updateEdge(n, { priority: o });
+    this.model.getNodeAdjacentEdgeIds(t).forEach((i) => {
+      this.updateEdge(i, { priority: o });
     });
   }
   cancelMouseDrag() {
@@ -1496,23 +1496,34 @@ class St {
   }
 }
 const At = (e) => {
-  const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, n = e.maxY !== null ? e.maxY : 1 / 0;
-  return (i) => {
-    let c = i.nextTransform.dx, d = i.nextTransform.dy;
-    c < t && c < i.prevTransform.dx && (c = Math.min(i.prevTransform.dx, t));
-    const h = i.canvasWidth * i.prevTransform.scale;
-    c > o - h && c > i.prevTransform.dx && (c = Math.max(i.prevTransform.dx, o - h)), d < r && d < i.prevTransform.dy && (d = Math.min(i.prevTransform.dy, r));
-    const l = i.canvasHeight * i.prevTransform.scale;
-    return d > n - l && d > i.prevTransform.dy && (d = Math.max(i.prevTransform.dy, n - l)), { scale: i.nextTransform.scale, dx: c, dy: d };
+  const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, i = e.maxY !== null ? e.maxY : 1 / 0;
+  return (s) => {
+    let h = s.nextTransform.dx, d = s.nextTransform.dy;
+    h < t && h < s.prevTransform.dx && (h = Math.min(s.prevTransform.dx, t));
+    const c = s.canvasWidth * s.prevTransform.scale;
+    h > o - c && h > s.prevTransform.dx && (h = Math.max(s.prevTransform.dx, o - c)), d < r && d < s.prevTransform.dy && (d = Math.min(s.prevTransform.dy, r));
+    const l = s.canvasHeight * s.prevTransform.scale;
+    return d > i - l && d > s.prevTransform.dy && (d = Math.max(s.prevTransform.dy, i - l)), { scale: s.nextTransform.scale, dx: h, dy: d };
   };
 }, Et = (e) => {
-  const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, n = o !== null ? 1 / o : 1 / 0;
-  return (i) => {
-    let c = i.nextTransform.scale, d = i.nextTransform.dx, h = i.nextTransform.dy;
-    return i.nextTransform.scale > n && i.nextTransform.scale > i.prevTransform.scale && (c = Math.max(i.prevTransform.scale, n), d = i.prevTransform.dx, h = i.prevTransform.dy), i.nextTransform.scale < r && i.nextTransform.scale < i.prevTransform.scale && (c = Math.min(i.prevTransform.scale, r), d = i.prevTransform.dx, h = i.prevTransform.dy), {
+  const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, i = o !== null ? 1 / o : 1 / 0;
+  return (s) => {
+    const h = s.prevTransform, d = s.nextTransform;
+    let c = d.scale, l = d.dx, a = d.dy;
+    if (d.scale > i && d.scale > h.scale) {
+      c = Math.max(h.scale, i), l = h.dx, a = h.dy;
+      const g = (c - h.scale) / (d.scale - h.scale);
+      l = h.dx + (d.dx - h.dx) * g, a = h.dy + (d.dy - h.dy) * g;
+    }
+    if (d.scale < r && d.scale < h.scale) {
+      c = Math.min(h.scale, r), l = h.dx, a = h.dy;
+      const g = (c - h.scale) / (d.scale - h.scale);
+      l = h.dx + (d.dx - h.dx) * g, a = h.dy + (d.dy - h.dy) * g;
+    }
+    return {
       scale: c,
-      dx: d,
-      dy: h
+      dx: l,
+      dy: a
     };
   };
 }, Tt = (e) => (t) => e.reduce(
@@ -1541,39 +1552,39 @@ const At = (e) => {
       });
   }
 }, Mt = (e) => {
-  var h, l, a, w;
-  const t = (h = e == null ? void 0 : e.scale) == null ? void 0 : h.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
-  let n;
-  r !== void 0 ? Array.isArray(r) ? n = Tt(
+  var c, l, a, g;
+  const t = (c = e == null ? void 0 : e.scale) == null ? void 0 : c.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
+  let i;
+  r !== void 0 ? Array.isArray(r) ? i = Tt(
     r.map(
       (y) => U(y)
     )
-  ) : n = U(r) : n = (y) => y.nextTransform;
-  const i = ((l = e == null ? void 0 : e.shift) == null ? void 0 : l.cursor) !== void 0 ? e.shift.cursor : "grab", c = ((a = e == null ? void 0 : e.events) == null ? void 0 : a.onBeforeTransformStarted) ?? (() => {
-  }), d = ((w = e == null ? void 0 : e.events) == null ? void 0 : w.onTransformFinished) ?? (() => {
+  ) : i = U(r) : i = (y) => y.nextTransform;
+  const s = ((l = e == null ? void 0 : e.shift) == null ? void 0 : l.cursor) !== void 0 ? e.shift.cursor : "grab", h = ((a = e == null ? void 0 : e.events) == null ? void 0 : a.onBeforeTransformStarted) ?? (() => {
+  }), d = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onTransformFinished) ?? (() => {
   });
   return {
     wheelSensitivity: o,
-    onBeforeTransformStarted: c,
+    onBeforeTransformStarted: h,
     onTransformFinished: d,
-    transformPreprocessor: n,
-    shiftCursor: i
+    transformPreprocessor: i,
+    shiftCursor: s
   };
 }, W = (e) => {
   const t = [], o = e.touches.length;
   for (let d = 0; d < o; d++)
     t.push([e.touches[d].clientX, e.touches[d].clientY]);
   const r = t.reduce(
-    (d, h) => [d[0] + h[0], d[1] + h[1]],
+    (d, c) => [d[0] + c[0], d[1] + c[1]],
     [0, 0]
-  ), n = [r[0] / o, r[1] / o], c = t.map((d) => [d[0] - n[0], d[1] - n[1]]).reduce(
-    (d, h) => d + Math.sqrt(h[0] * h[0] + h[1] * h[1]),
+  ), i = [r[0] / o, r[1] / o], h = t.map((d) => [d[0] - i[0], d[1] - i[1]]).reduce(
+    (d, c) => d + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
     0
   );
   return {
-    x: n[0],
-    y: n[1],
-    scale: c / o,
+    x: i[0],
+    y: i[1],
+    scale: h / o,
     touchesCnt: o,
     touches: t
   };
@@ -1588,15 +1599,15 @@ const At = (e) => {
 });
 class Pt {
   constructor(t, o) {
-    s(this, "model");
-    s(this, "transformation");
-    s(this, "element", null);
-    s(this, "prevTouches", null);
-    s(this, "window", window);
-    s(this, "onMouseDown", (t) => {
+    n(this, "model");
+    n(this, "transformation");
+    n(this, "element", null);
+    n(this, "prevTouches", null);
+    n(this, "window", window);
+    n(this, "onMouseDown", (t) => {
       this.element === null || t.button !== 0 || (D(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp));
     });
-    s(this, "onWindowMouseMove", (t) => {
+    n(this, "onWindowMouseMove", (t) => {
       if (this.element === null || !P(this.element, t.clientX, t.clientY) || !L(this.window, t.clientX, t.clientY)) {
         this.stopMouseDrag();
         return;
@@ -1604,24 +1615,24 @@ class Pt {
       const o = -t.movementX, r = -t.movementY;
       this.moveViewport(this.element, o, r);
     });
-    s(this, "onWindowMouseUp", (t) => {
+    n(this, "onWindowMouseUp", (t) => {
       this.element === null || t.button !== 0 || this.stopMouseDrag();
     });
-    s(this, "onWheelScroll", (t) => {
+    n(this, "onWheelScroll", (t) => {
       t.preventDefault();
-      const { left: o, top: r } = this.element.getBoundingClientRect(), n = t.clientX - o, i = t.clientY - r, d = 1 / (t.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
-      this.scaleViewport(this.element, d, n, i);
+      const { left: o, top: r } = this.element.getBoundingClientRect(), i = t.clientX - o, s = t.clientY - r, d = 1 / (t.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
+      this.scaleViewport(this.element, d, i, s);
     });
-    s(this, "onTouchStart", (t) => {
+    n(this, "onTouchStart", (t) => {
       this.prevTouches = W(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish);
     });
-    s(this, "onWindowTouchMove", (t) => {
+    n(this, "onWindowTouchMove", (t) => {
       const o = this.element;
       if (o === null)
         return;
       const r = W(t);
       if (!r.touches.every(
-        (i) => P(o, i[0], i[1]) && L(this.window, i[0], i[1])
+        (s) => P(o, s[0], s[1]) && L(this.window, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1631,24 +1642,24 @@ class Pt {
         -(r.x - this.prevTouches.x),
         -(r.y - this.prevTouches.y)
       ), r.touchesCnt === 2) {
-        const { left: i, top: c } = o.getBoundingClientRect(), d = this.prevTouches.x - i, h = this.prevTouches.y - c, a = 1 / (r.scale / this.prevTouches.scale);
-        this.scaleViewport(o, a, d, h);
+        const { left: s, top: h } = o.getBoundingClientRect(), d = this.prevTouches.x - s, c = this.prevTouches.y - h, a = 1 / (r.scale / this.prevTouches.scale);
+        this.scaleViewport(o, a, d, c);
       }
       this.prevTouches = r;
     });
-    s(this, "onWindowTouchFinish", (t) => {
+    n(this, "onWindowTouchFinish", (t) => {
       t.touches.length > 0 ? this.prevTouches = W(t) : this.stopTouchDrag();
     });
-    s(this, "observer", new ResizeObserver(() => {
-      const t = this.canvas.transformation.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
+    n(this, "observer", new ResizeObserver(() => {
+      const t = this.canvas.transformation.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), i = this.options.transformPreprocessor({
         prevTransform: t,
         nextTransform: t,
         canvasWidth: o,
         canvasHeight: r
       });
-      this.canvas.patchViewportMatrix(n), this.options.onTransformFinished();
+      this.canvas.patchViewportMatrix(i), this.options.onTransformFinished();
     }));
-    s(this, "options");
+    n(this, "options");
     this.canvas = t, this.options = Mt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
   attach(t) {
@@ -1698,21 +1709,21 @@ class Pt {
   }
   moveViewport(t, o, r) {
     this.options.onBeforeTransformStarted();
-    const n = this.transformation.getViewportMatrix(), i = Nt(n, o, r), { width: c, height: d } = t.getBoundingClientRect(), h = this.options.transformPreprocessor({
-      prevTransform: n,
-      nextTransform: i,
-      canvasWidth: c,
+    const i = this.transformation.getViewportMatrix(), s = Nt(i, o, r), { width: h, height: d } = t.getBoundingClientRect(), c = this.options.transformPreprocessor({
+      prevTransform: i,
+      nextTransform: s,
+      canvasWidth: h,
       canvasHeight: d
     });
-    this.canvas.patchViewportMatrix(h), this.options.onTransformFinished();
+    this.canvas.patchViewportMatrix(c), this.options.onTransformFinished();
   }
-  scaleViewport(t, o, r, n) {
+  scaleViewport(t, o, r, i) {
     this.options.onBeforeTransformStarted();
-    const i = this.canvas.transformation.getViewportMatrix(), c = Ct(i, o, r, n), { width: d, height: h } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
-      prevTransform: i,
-      nextTransform: c,
+    const s = this.canvas.transformation.getViewportMatrix(), h = Ct(s, o, r, i), { width: d, height: c } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
+      prevTransform: s,
+      nextTransform: h,
       canvasWidth: d,
-      canvasHeight: h
+      canvasHeight: c
     });
     this.canvas.patchViewportMatrix(l), this.options.onTransformFinished();
   }
@@ -1731,8 +1742,8 @@ class Pt {
 }
 class Lt {
   constructor() {
-    s(this, "keyMap", /* @__PURE__ */ new Map());
-    s(this, "valueMap", /* @__PURE__ */ new Map());
+    n(this, "keyMap", /* @__PURE__ */ new Map());
+    n(this, "valueMap", /* @__PURE__ */ new Map());
   }
   set(t, o) {
     this.keyMap.set(t, o), this.valueMap.set(o, t);
@@ -1768,17 +1779,17 @@ class Lt {
 }
 class Dt {
   constructor(t) {
-    s(this, "transformation");
-    s(this, "model");
-    s(this, "nodes", new Lt());
-    s(this, "nodeIdGenerator", new N(
+    n(this, "transformation");
+    n(this, "model");
+    n(this, "nodes", new Lt());
+    n(this, "nodeIdGenerator", new N(
       (t) => this.nodes.hasKey(t)
     ));
-    s(this, "nodesResizeObserver");
+    n(this, "nodesResizeObserver");
     this.canvas = t, this.nodesResizeObserver = new window.ResizeObserver((o) => {
       o.forEach((r) => {
-        const n = r.target;
-        this.reactNodeChange(n);
+        const i = r.target;
+        this.reactNodeChange(i);
       });
     }), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
@@ -1835,19 +1846,19 @@ class Dt {
   }
   reactNodeChange(t) {
     const o = this.nodes.getByValue(t);
-    this.canvas.updateNode(o), this.model.getNodeAdjacentEdgeIds(o).forEach((n) => {
-      this.canvas.updateEdge(n);
+    this.canvas.updateNode(o), this.model.getNodeAdjacentEdgeIds(o).forEach((i) => {
+      this.canvas.updateEdge(i);
     });
   }
 }
 class mt {
   constructor() {
-    s(this, "coreOptions");
-    s(this, "dragOptions");
-    s(this, "transformOptions");
-    s(this, "isDraggable", !1);
-    s(this, "isTransformable", !1);
-    s(this, "hasResizeReactiveNodes", !1);
+    n(this, "coreOptions");
+    n(this, "dragOptions");
+    n(this, "transformOptions");
+    n(this, "isDraggable", !1);
+    n(this, "isTransformable", !1);
+    n(this, "hasResizeReactiveNodes", !1);
   }
   setOptions(t) {
     return this.coreOptions = t, this;