@html-graph/html-graph 0.1.3 → 0.1.5

package/dist/main.js

@@ -1,75 +1,75 @@
-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 n = (e, t, o) => K(e, typeof t != "symbol" ? t + "" : t, o);
-const _ = (e, t) => ({
+var K = Object.defineProperty;
+var _ = (e, t, o) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var n = (e, t, o) => _(e, typeof t != "symbol" ? t + "" : t, o);
+const J = (e, t) => ({
   x: e / 2,
   y: t / 2
-}), f = (e, t, o) => ({
+}), v = (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) }), w = {
   x: 0,
   y: 0
-}, E = (e, t, o, r) => {
+}, T = (e, t, o, r) => {
   const s = [
     w,
     { x: o, y: r },
     { x: o, y: -r }
-  ].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) => {
+  ].map((l) => v(l, e, w)).map((l) => ({ x: l.x + t.x, y: l.y + t.y })), h = `M ${s[0].x} ${s[0].y}`, c = `L ${s[1].x} ${s[1].y}`, d = `L ${s[2].x} ${s[2].y}`;
+  return `${h} ${c} ${d}`;
+}, P = (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 i = 0, s = 0, h = 0;
-    e.forEach((d, c) => {
+    e.forEach((c, d) => {
       let l = 0, a = 0, g = 0;
-      const y = c > 0, x = c < r, v = y && x;
+      const y = d > 0, x = d < r, f = 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 z = e[d + 1];
+        i = z.x - c.x, s = z.y - c.y, h = Math.sqrt(i * i + s * s);
       }
-      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}`
+      const E = h !== 0 ? Math.min((f ? t : 0) / h, d < r - 1 ? 0.5 : 1) : 0, N = f ? { x: c.x + i * E, y: c.y + s * E } : c, k = g !== 0 ? Math.min((f ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, B = f ? { x: c.x + l * k, y: c.y + a * k } : c;
+      d > 0 && o.push(`L ${B.x} ${B.y}`), f && o.push(
+        `C ${c.x} ${c.y} ${c.x} ${c.y} ${N.x} ${N.y}`
       );
     });
   }
   return o.join(" ");
-}, I = () => {
+}, $ = () => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e;
-}, $ = () => {
+}, p = () => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return e.style.transformOrigin = "50% 50%", e;
-}, m = (e, t) => {
+}, b = (e, t) => {
   const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return o.setAttribute("stroke", e), o.setAttribute("stroke-width", `${t}`), o.setAttribute("fill", "none"), o;
-}, T = (e) => {
+}, M = (e) => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return t.setAttribute("fill", e), t;
-}, b = (e, t) => {
+}, V = (e, t) => {
   const o = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
   }, r = {
     x: t.x + t.width / 2,
     y: t.y + t.height / 2
-  }, 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;
+  }, i = Math.min(o.x, r.x), s = Math.min(o.y, r.y), h = Math.abs(r.x - o.x), c = Math.abs(r.y - o.y), d = o.x <= r.x ? 1 : -1, l = o.y <= r.y ? 1 : -1;
   return {
     x: i,
     y: s,
     width: h,
-    height: d,
-    flipX: c,
+    height: c,
+    flipX: d,
     flipY: l
   };
-}, J = (e) => {
-  const t = f(
+}, Q = (e) => {
+  const t = v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
     w
-  ), o = f(
+  ), o = v(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
@@ -79,131 +79,131 @@ const _ = (e, t) => ({
   }, i = {
     x: o.x - e.toVect.x * e.curvature,
     y: o.y - e.toVect.y * e.curvature
-  }, 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(
+  }, 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} `, c = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
+  return `${h}${s}${c}`;
+}, Z = (e) => {
+  const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
+  ) : w, o = e.hasTargetArrow ? v(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : 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(
+  ) : e.to, r = e.arrowLength, i = Math.cos(e.detourDirection) * e.detourDistance, s = Math.sin(e.detourDirection) * e.detourDistance, h = i * e.flipX, c = s * e.flipY, d = v(
     { x: r, y: w.y },
     e.fromVect,
     w
   ), l = {
-    x: c.x + h,
-    y: c.y + d
-  }, a = f(
+    x: d.x + h,
+    y: d.y + c
+  }, a = v(
     { x: e.to.x - r, y: e.to.y },
     e.toVect,
     e.to
   ), g = {
     x: a.x + h,
-    y: a.y + d
+    y: a.y + c
   }, 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: d.x + e.curvature * e.fromVect.x,
+    y: d.y + e.curvature * e.fromVect.y
+  }, f = {
     x: a.x - e.curvature * e.toVect.x,
     y: a.y - e.curvature * e.toVect.y
-  }, p = {
-    x: c.x + h,
-    y: c.y + d
-  }, M = {
+  }, C = {
+    x: d.x + h,
+    y: d.y + c
+  }, E = {
     x: a.x + h,
-    y: a.y + d
+    y: a.y + c
   };
   return [
     `M ${t.x} ${t.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 ${d.x} ${d.y}`,
+    `C ${x.x} ${x.y} ${C.x} ${C.y} ${y.x} ${y.y}`,
+    `C ${E.x} ${E.y} ${f.x} ${f.y} ${a.x} ${a.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, Z = (e) => {
-  const t = e.hasSourceArrow ? f(
+}, O = (e) => {
+  const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
+  ) : w, o = e.hasTargetArrow ? v(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, s = f({ x: i, y: w.y }, e.fromVect, w), h = f(
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, s = v({ x: i, y: w.y }, e.fromVect, w), h = v(
     { x: e.to.x - i, y: e.to.y },
     e.toVect,
     e.to
-  ), 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,
+  ), c = Math.max((s.x + h.x) / 2, r), d = e.to.y / 2, l = { x: e.flipX > 0 ? c : -r, y: s.y }, a = { x: l.x, y: d }, g = {
+    x: e.flipX > 0 ? e.to.x - c : e.to.x + r,
     y: h.y
-  }, y = { x: g.x, y: c };
-  return C(
+  }, y = { x: g.x, y: d };
+  return P(
     [t, s, l, a, y, g, h, o],
     e.roundness
   );
-}, R = (e) => {
-  const t = e.hasSourceArrow ? f(
+}, Y = (e) => {
+  const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
+  ) : w, o = e.hasTargetArrow ? v(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, i = f(
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = v(
     { x: r, y: w.y },
     e.fromVect,
     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(
+  ), s = Math.cos(e.detourDirection) * e.detourDistance, h = Math.sin(e.detourDirection) * e.detourDistance, c = s * e.flipX, d = h * e.flipY, l = { x: i.x + c, y: i.y + d }, a = v(
     { x: e.to.x - r, y: e.to.y },
     e.toVect,
     e.to
-  ), g = { x: a.x + d, y: a.y + c };
-  return C(
+  ), g = { x: a.x + c, y: a.y + d };
+  return P(
     [t, i, l, g, a, o],
     e.roundness
   );
 }, q = (e) => {
-  const t = e.hasSourceArrow ? f(
+  const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
+  ) : w, o = e.hasTargetArrow ? v(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, i = f({ x: r, y: w.y }, e.fromVect, w), s = f(
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = v({ x: r, y: w.y }, e.fromVect, w), s = v(
     { x: e.to.x - r, y: e.to.y },
     e.toVect,
     e.to
   );
-  return C([t, i, s, o], e.roundness);
+  return P([t, i, s, o], e.roundness);
 }, tt = (e) => {
-  const t = e.hasSourceArrow ? f(
+  const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
+  ) : w, o = e.hasTargetArrow ? v(
     { x: e.to.x - e.arrowLength, y: e.to.y },
     e.toVect,
     e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, s = f({ x: i, y: w.y }, e.fromVect, w), h = f(
+  ) : e.to, r = e.arrowLength + e.arrowOffset, i = r - e.roundness, s = v({ x: i, y: w.y }, e.fromVect, w), h = v(
     { x: e.to.x - i, y: e.to.y },
     e.toVect,
     e.to
-  ), 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 = {
+  ), c = Math.max((s.y + h.y) / 2, r), d = e.to.x / 2, l = { x: s.x, y: e.flipY > 0 ? c : -r }, a = { x: d, y: l.y }, g = {
     x: h.x,
-    y: e.flipY > 0 ? e.to.y - d : e.to.y + r
-  }, y = { x: c, y: g.y };
-  return C(
+    y: e.flipY > 0 ? e.to.y - c : e.to.y + r
+  }, y = { x: d, y: g.y };
+  return P(
     [t, s, l, a, y, g, h, o],
     e.roundness
   );
-}, Y = (e) => {
+}, X = (e) => {
   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 },
@@ -214,20 +214,20 @@ const _ = (e, t) => ({
     { x: r, y: w.y },
     { x: e.arrowLength, y: w.y }
   ].map(
-    (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)}`;
+    (d) => v(d, e.fromVect, w)
+  ), c = `M ${w.x} ${w.y} L ${h[0].x} ${h[0].y} `;
+  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${P(h, e.roundness)}`;
 }, et = (e) => {
-  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 = [
+  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, d = [
     { 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} `;
+  ].map((g) => v(g, e.fromVect, w)), l = [
+    `M ${d[0].x} ${d[0].y}`,
+    `A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,
+    `A ${o} ${o} 0 1 0 ${d[2].x} ${d[2].y}`,
+    `A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`
+  ].join(" "), a = `M 0 0 L ${d[0].x} ${d[0].y} `;
   return `${e.hasSourceArrow || e.hasTargetArrow ? "" : a}${l}`;
 }, u = Object.freeze({
   color: "#5c5c5c",
@@ -248,8 +248,8 @@ const _ = (e, t) => ({
 });
 class ot {
   constructor(t) {
-    n(this, "svg", I());
-    n(this, "group", $());
+    n(this, "svg", $());
+    n(this, "group", p());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -264,78 +264,78 @@ class ot {
     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));
+    this.svg.appendChild(this.group), this.line = b(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(o), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
       t.source,
       t.target
     );
-    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(
+    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}, ${c})`;
+    const d = A(
       t.source.direction,
       h,
-      d
+      c
     ), l = A(
       t.target.direction,
       h,
-      d
+      c
     ), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
     if (t.source.portId === t.target.portId ? (g = et({
-      fromVect: c,
+      fromVect: d,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Q({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Z({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       flipX: h,
-      flipY: d,
+      flipY: c,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
       detourDistance: this.detourDistance,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = J({
+    }) : g = Q({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = E(
-        c,
+      const f = T(
+        d,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const v = E(
+      const f = T(
         y,
         a,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
 class rt {
   constructor(t) {
-    n(this, "svg", I());
-    n(this, "group", $());
+    n(this, "svg", $());
+    n(this, "group", p());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -356,41 +356,41 @@ class rt {
       this.cycleSquareSide / 2
     ), 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));
+    this.svg.appendChild(this.group), this.line = b(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
       t.source,
       t.target
     );
-    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(
+    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}, ${c})`;
+    const d = A(
       t.source.direction,
       h,
-      d
+      c
     ), l = A(
       t.target.direction,
       h,
-      d
+      c
     ), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = Y({
-      fromVect: c,
+    if (t.source.portId === t.target.portId ? (g = X({
+      fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = R({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Y({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       flipX: h,
-      flipY: d,
+      flipY: c,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -398,9 +398,9 @@ class rt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Z({
+    }) : g = O({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       flipX: h,
       arrowLength: this.arrowLength,
@@ -409,29 +409,29 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = E(
-        c,
+      const f = T(
+        d,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const v = E(
+      const f = T(
         y,
         a,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
 class it {
   constructor(t) {
-    n(this, "svg", I());
-    n(this, "group", $());
+    n(this, "svg", $());
+    n(this, "group", p());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -452,41 +452,41 @@ class it {
       this.cycleSquareSide / 2
     ), 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));
+    this.svg.appendChild(this.group), this.line = b(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
       t.source,
       t.target
     );
-    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(
+    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}, ${c})`;
+    const d = A(
       t.source.direction,
       h,
-      d
+      c
     ), l = A(
       t.target.direction,
       h,
-      d
+      c
     ), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = Y({
-      fromVect: c,
+    if (t.source.portId === t.target.portId ? (g = X({
+      fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = R({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Y({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       flipX: h,
-      flipY: d,
+      flipY: c,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -496,7 +496,7 @@ class it {
       hasTargetArrow: this.hasTargetArrow
     }) : g = q({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -504,29 +504,29 @@ class it {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = E(
-        c,
+      const f = T(
+        d,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const v = E(
+      const f = T(
         y,
         a,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
 class nt {
   constructor(t) {
-    n(this, "svg", I());
-    n(this, "group", $());
+    n(this, "svg", $());
+    n(this, "group", p());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -547,41 +547,41 @@ class nt {
       this.cycleSquareSide / 2
     ), 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));
+    this.svg.appendChild(this.group), this.line = b(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: d } = b(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
       t.source,
       t.target
     );
-    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(
+    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}, ${c})`;
+    const d = A(
       t.source.direction,
       h,
-      d
+      c
     ), l = A(
       t.target.direction,
       h,
-      d
+      c
     ), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = Y({
-      fromVect: c,
+    if (t.source.portId === t.target.portId ? (g = X({
+      fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = c, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = R({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Y({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
       flipX: h,
-      flipY: d,
+      flipY: c,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -591,31 +591,31 @@ class nt {
       hasTargetArrow: this.hasTargetArrow
     }) : g = tt({
       to: a,
-      fromVect: c,
+      fromVect: d,
       toVect: l,
-      flipY: d,
+      flipY: c,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = E(
-        c,
+      const f = T(
+        d,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const v = E(
+      const f = T(
         y,
         a,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
@@ -680,18 +680,18 @@ const st = (e) => {
         detourDirection: e.detourDirection
       });
   }
-}, F = (e) => () => e, G = F(0), V = () => {
+}, R = (e) => () => e, G = R(0), W = () => {
   let e = 0;
   return () => e++;
 }, ht = (e, t) => {
   let o = G, r = G;
-  e === "incremental" && (o = V()), t === "incremental" && (r = V());
-  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), {
+  e === "incremental" && (o = W()), t === "incremental" && (r = W());
+  const i = W();
+  return e === "shared-incremental" && (o = i), t === "shared-incremental" && (r = i), typeof e == "number" && (o = R(e)), typeof t == "number" && (r = R(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
     nodesPriorityFn: o,
     edgesPriorityFn: r
   };
-}, dt = (e) => {
+}, ct = (e) => {
   var o, r, i, s, h;
   const t = ht(
     (o = e == null ? void 0 : e.nodes) == null ? void 0 : o.priority,
@@ -699,7 +699,7 @@ const st = (e) => {
   );
   return {
     nodes: {
-      centerFn: ((i = e == null ? void 0 : e.nodes) == null ? void 0 : i.centerFn) ?? _,
+      centerFn: ((i = e == null ? void 0 : e.nodes) == null ? void 0 : i.centerFn) ?? J,
       priorityFn: t.nodesPriorityFn
     },
     ports: {
@@ -711,7 +711,7 @@ const st = (e) => {
     }
   };
 };
-class ct {
+class dt {
   constructor() {
     n(this, "nodes", /* @__PURE__ */ new Map());
     n(this, "ports", /* @__PURE__ */ new Map());
@@ -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: 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)`;
+    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: i, height: s } = r.element.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix().scale, c = r.centerFn(i, s), d = r.x - h * c.x, l = r.y - h * c.y;
+    o.style.transform = `translate(${d}px, ${l}px)`;
   }
   updateNodePriority(t) {
     const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
@@ -1031,25 +1031,25 @@ 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), 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
+    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(), c = this.host.getBoundingClientRect(), d = this.viewportTransformer.getViewportMatrix(), l = {
+      x: d.scale * (s.left - c.left) + d.dx,
+      y: d.scale * (s.top - c.top) + d.dy
     }, a = {
-      x: c.scale * (h.left - d.left) + c.dx,
-      y: c.scale * (h.top - d.top) + c.dy
+      x: d.scale * (h.left - c.left) + d.dx,
+      y: d.scale * (h.top - c.top) + d.dy
     }, g = {
       x: l.x,
       y: l.y,
-      width: s.width * c.scale,
-      height: s.height * c.scale,
+      width: s.width * d.scale,
+      height: s.height * d.scale,
       direction: r.direction,
       portId: o.from,
       nodeId: this.graphStore.getPortNodeId(o.from)
     }, y = {
       x: a.x,
       y: a.y,
-      width: h.width * c.scale,
-      height: h.height * c.scale,
+      width: h.width * d.scale,
+      height: h.height * d.scale,
       direction: i.direction,
       portId: o.to,
       nodeId: this.graphStore.getPortNodeId(o.to)
@@ -1064,7 +1064,7 @@ class ft {
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class N {
+class L {
   constructor(t) {
     n(this, "counter", 0);
     this.checkExists = t;
@@ -1087,17 +1087,17 @@ class S extends Error {
   }
 }
 class vt {
-  constructor(t, o, r, i, s, h, d) {
-    n(this, "nodeIdGenerator", new N(
+  constructor(t, o, r, i, s, h, c) {
+    n(this, "nodeIdGenerator", new L(
       (t) => this.graphStore.getNode(t) !== void 0
     ));
-    n(this, "portIdGenerator", new N(
+    n(this, "portIdGenerator", new L(
       (t) => this.graphStore.getPort(t) !== void 0
     ));
-    n(this, "edgeIdGenerator", new N(
+    n(this, "edgeIdGenerator", new L(
       (t) => this.graphStore.getEdge(t) !== void 0
     ));
-    this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = i, this.defaultPortsDirection = s, this.defaultNodesPriorityFn = h, this.defaultEdgesPriorityFn = d;
+    this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = i, this.defaultPortsDirection = s, this.defaultNodesPriorityFn = h, this.defaultEdgesPriorityFn = c;
   }
   attach(t) {
     this.htmlController.attach(t);
@@ -1215,7 +1215,7 @@ class xt {
     n(this, "canvasController");
     n(this, "edgeShapeFactory");
     this.apiOptions = t;
-    const o = dt(this.apiOptions), r = new at(), i = new ct();
+    const o = ct(this.apiOptions), r = new at(), i = new dt();
     this.model = new lt(i), this.transformation = new gt(r);
     const s = new ft(i, r);
     this.canvasController = new vt(
@@ -1306,41 +1306,52 @@ class xt {
     this.clear(), this.canvasController.destroy();
   }
 }
-const P = (e, t, o) => {
+const D = (e, t, o) => {
   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) => {
+}, I = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, m = (e, t) => {
   t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
+}, St = (e) => {
+  var g, y, x, f, C, E;
+  const t = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
+  }), o = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
+  }), i = (e == null ? void 0 : e.moveOnTop) === !1, s = (f = e == null ? void 0 : e.mouse) == null ? void 0 : f.dragCursor, h = s !== void 0 ? s : "grab", c = (C = e == null ? void 0 : e.mouse) == null ? void 0 : C.mouseDownEventValidator, d = c !== void 0 ? c : (N) => N.button === 0, l = (E = e == null ? void 0 : e.mouse) == null ? void 0 : E.mouseUpEventValidator;
+  return {
+    freezePriority: i,
+    dragCursor: h,
+    mouseDownEventValidator: d,
+    mouseUpEventValidator: l !== void 0 ? l : (N) => N.button === 0,
+    onNodeDrag: t,
+    onBeforeNodeDrag: o,
+    onNodeDragFinished: r
+  };
 };
-class St {
+class Et {
   constructor(t, o) {
     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(
+    n(this, "nodeIdGenerator", new L(
       (t) => this.nodes.has(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))) {
+      if (this.element !== null && (!D(this.element, t.clientX, t.clientY) || !I(this.window, t.clientX, t.clientY))) {
         this.cancelMouseDrag();
         return;
       }
       this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
     });
     n(this, "onWindowMouseUp", (t) => {
-      t.button === 0 && this.cancelMouseDrag();
+      this.options.mouseUpEventValidator(t) && this.cancelMouseDrag();
     });
     n(this, "onWindowTouchMove", (t) => {
       if (t.touches.length !== 1)
         return;
       const o = t.touches[0];
-      if (this.element !== null && (!P(this.element, o.clientX, o.clientY) || !L(this.window, o.clientX, o.clientY))) {
+      if (this.element !== null && (!D(this.element, o.clientX, o.clientY) || !I(this.window, o.clientX, o.clientY))) {
         this.cancelTouchDrag();
         return;
       }
@@ -1352,20 +1363,13 @@ class St {
         };
       }
     });
-    n(this, "onWindowTouchFinish", (t) => {
-      t.touches.length > 0 ? this.previousTouchCoords = {
-        x: t.touches[0].clientX,
-        y: t.touches[0].clientY
-      } : this.cancelTouchDrag();
+    n(this, "onWindowTouchFinish", () => {
+      this.previousTouchCoords = null, this.cancelTouchDrag();
     });
     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 = ((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";
+    n(this, "options");
+    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.options = St(o ?? {});
   }
   attach(t) {
     return this.detach(), this.element = t, this.canvas.attach(this.element), this;
@@ -1377,27 +1381,29 @@ class St {
     const o = this.nodeIdGenerator.create(t.id);
     this.canvas.addNode({ ...t, id: o }), this.updateMaxNodePriority(o);
     const r = (s) => {
-      if (this.element === null || s.button !== 0)
+      if (this.element === null || !this.options.mouseDownEventValidator(s))
         return;
       const h = this.model.getNode(o);
-      this.onBeforeNodeDrag({
+      this.options.onBeforeNodeDrag({
         nodeId: o,
         element: t.element,
         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));
+      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, m(this.element, this.options.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
     }, i = (s) => {
+      if (s.touches.length !== 1)
+        return;
       s.stopImmediatePropagation(), this.previousTouchCoords = {
         x: s.touches[0].clientX,
         y: s.touches[0].clientY
       };
       const h = this.model.getNode(o);
-      this.onBeforeNodeDrag({
+      this.options.onBeforeNodeDrag({
         nodeId: o,
         element: t.element,
         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));
+      }) && (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,
@@ -1448,8 +1454,8 @@ class St {
     const i = this.model.getNode(t);
     if (i === null)
       return;
-    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({
+    const s = this.canvas.transformation.getContentMatrix(), h = s.scale * i.x + s.dx, c = s.scale * i.y + s.dy, d = h + o, l = c + r, a = this.canvas.transformation.getViewportMatrix(), g = a.scale * d + a.dx, y = a.scale * l + a.dy;
+    this.canvas.updateNode(t, { x: g, y }), this.options.onNodeDrag({
       nodeId: t,
       element: i.element,
       x: i.x,
@@ -1461,7 +1467,7 @@ class St {
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
   moveNodeOnTop(t) {
-    if (this.freezePriority)
+    if (this.options.freezePriority)
       return;
     this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
     const o = this.maxNodePriority - 1;
@@ -1471,12 +1477,12 @@ class St {
   }
   cancelMouseDrag() {
     const t = this.model.getNode(this.grabbedNodeId);
-    t !== null && this.onNodeDragFinished({
+    t !== null && this.options.onNodeDragFinished({
       nodeId: this.grabbedNodeId,
       element: t.element,
       x: t.x,
       y: t.y
-    }), this.grabbedNodeId = null, this.element !== null && D(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, this.element !== null && m(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1484,7 +1490,7 @@ class St {
   cancelTouchDrag() {
     this.previousTouchCoords = null;
     const t = this.model.getNode(this.grabbedNodeId);
-    t !== null && this.onNodeDragFinished({
+    t !== null && this.options.onNodeDragFinished({
       nodeId: this.grabbedNodeId,
       element: t.element,
       x: t.x,
@@ -1498,35 +1504,35 @@ 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, i = e.maxY !== null ? e.maxY : 1 / 0;
   return (s) => {
-    let h = s.nextTransform.dx, d = s.nextTransform.dy;
+    let h = s.nextTransform.dx, c = 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 d = s.canvasWidth * s.prevTransform.scale;
+    h > o - d && h > s.prevTransform.dx && (h = Math.max(s.prevTransform.dx, o - d)), c < r && c < s.prevTransform.dy && (c = 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 };
+    return c > i - l && c > s.prevTransform.dy && (c = Math.max(s.prevTransform.dy, i - l)), { scale: s.nextTransform.scale, dx: h, dy: c };
   };
-}, Et = (e) => {
+}, Tt = (e) => {
   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;
+    const h = s.prevTransform, c = s.nextTransform;
+    let d = c.scale, l = c.dx, a = c.dy;
+    if (c.scale > i && c.scale > h.scale) {
+      d = Math.max(h.scale, i), l = h.dx, a = h.dy;
+      const g = (d - h.scale) / (c.scale - h.scale);
+      l = h.dx + (c.dx - h.dx) * g, a = h.dy + (c.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;
+    if (c.scale < r && c.scale < h.scale) {
+      d = Math.min(h.scale, r), l = h.dx, a = h.dy;
+      const g = (d - h.scale) / (c.scale - h.scale);
+      l = h.dx + (c.dx - h.dx) * g, a = h.dy + (c.dy - h.dy) * g;
     }
     return {
-      scale: c,
+      scale: d,
       dx: l,
       dy: a
     };
   };
-}, Tt = (e) => (t) => e.reduce(
+}, Mt = (e) => (t) => e.reduce(
   (o, r) => r({
     prevTransform: t.prevTransform,
     nextTransform: o,
@@ -1539,7 +1545,7 @@ const At = (e) => {
     return e;
   switch (e.type) {
     case "scale-limit":
-      return Et({
+      return Tt({
         minContentScale: e.minContentScale ?? 0,
         maxContentScale: e.maxContentScale ?? 1 / 0
       });
@@ -1551,34 +1557,38 @@ const At = (e) => {
         maxY: e.maxY ?? 1 / 0
       });
   }
-}, Mt = (e) => {
-  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;
+}, Ct = (e) => {
+  var d, l, a, g, y, x;
+  const t = (d = e == null ? void 0 : e.scale) == null ? void 0 : d.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 !== void 0 ? Array.isArray(r) ? i = Mt(
     r.map(
-      (y) => U(y)
+      (f) => U(f)
     )
-  ) : 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) ?? (() => {
+  ) : i = U(r) : i = (f) => f.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.onBeforeTransformChange) ?? (() => {
+  }), c = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onTransformChange) ?? (() => {
   });
   return {
     wheelSensitivity: o,
-    onBeforeTransformStarted: h,
-    onTransformFinished: d,
+    onTransformStarted: ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onTransformStarted) ?? (() => {
+    }),
+    onTransformFinished: ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onTransformFinished) ?? (() => {
+    }),
+    onBeforeTransformChange: h,
+    onTransformChange: c,
     transformPreprocessor: i,
     shiftCursor: s
   };
-}, W = (e) => {
+}, F = (e) => {
   const t = [], o = e.touches.length;
-  for (let d = 0; d < o; d++)
-    t.push([e.touches[d].clientX, e.touches[d].clientY]);
+  for (let c = 0; c < o; c++)
+    t.push([e.touches[c].clientX, e.touches[c].clientY]);
   const r = t.reduce(
-    (d, c) => [d[0] + c[0], d[1] + c[1]],
+    (c, d) => [c[0] + d[0], c[1] + d[1]],
     [0, 0]
-  ), 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]),
+  ), i = [r[0] / o, r[1] / o], h = t.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
+    (c, d) => c + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
@@ -1592,7 +1602,7 @@ const At = (e) => {
   scale: e.scale,
   dx: e.dx + e.scale * t,
   dy: e.dy + e.scale * o
-}), Ct = (e, t, o, r) => ({
+}), Lt = (e, t, o, r) => ({
   scale: e.scale * t,
   dx: e.scale * (1 - t) * o + e.dx,
   dy: e.scale * (1 - t) * r + e.dy
@@ -1605,10 +1615,10 @@ class Pt {
     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));
+      this.element === null || t.button !== 0 || (m(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
     });
     n(this, "onWindowMouseMove", (t) => {
-      if (this.element === null || !P(this.element, t.clientX, t.clientY) || !L(this.window, t.clientX, t.clientY)) {
+      if (this.element === null || !D(this.element, t.clientX, t.clientY) || !I(this.window, t.clientX, t.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -1620,19 +1630,19 @@ class Pt {
     });
     n(this, "onWheelScroll", (t) => {
       t.preventDefault();
-      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);
+      const { left: o, top: r } = this.element.getBoundingClientRect(), i = t.clientX - o, s = t.clientY - r, c = 1 / (t.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
+      this.scaleViewport(this.element, c, i, s);
     });
     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);
+      this.prevTouches = F(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
     });
     n(this, "onWindowTouchMove", (t) => {
       const o = this.element;
       if (o === null)
         return;
-      const r = W(t);
+      const r = F(t);
       if (!r.touches.every(
-        (s) => P(o, s[0], s[1]) && L(this.window, s[0], s[1])
+        (s) => D(o, s[0], s[1]) && I(this.window, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1642,13 +1652,13 @@ class Pt {
         -(r.x - this.prevTouches.x),
         -(r.y - this.prevTouches.y)
       ), r.touchesCnt === 2) {
-        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);
+        const { left: s, top: h } = o.getBoundingClientRect(), c = this.prevTouches.x - s, d = this.prevTouches.y - h, a = 1 / (r.scale / this.prevTouches.scale);
+        this.scaleViewport(o, a, c, d);
       }
       this.prevTouches = r;
     });
     n(this, "onWindowTouchFinish", (t) => {
-      t.touches.length > 0 ? this.prevTouches = W(t) : this.stopTouchDrag();
+      t.touches.length > 0 ? this.prevTouches = F(t) : this.stopTouchDrag();
     });
     n(this, "observer", new ResizeObserver(() => {
       const t = this.canvas.transformation.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), i = this.options.transformPreprocessor({
@@ -1657,10 +1667,10 @@ class Pt {
         canvasWidth: o,
         canvasHeight: r
       });
-      this.canvas.patchViewportMatrix(i), this.options.onTransformFinished();
+      this.canvas.patchViewportMatrix(i), this.options.onTransformChange();
     }));
     n(this, "options");
-    this.canvas = t, this.options = Mt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    this.canvas = t, this.options = Ct(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
   attach(t) {
     return this.detach(), this.element = t, 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;
@@ -1708,39 +1718,39 @@ class Pt {
     this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
   moveViewport(t, o, r) {
-    this.options.onBeforeTransformStarted();
-    const i = this.transformation.getViewportMatrix(), s = Nt(i, o, r), { width: h, height: d } = t.getBoundingClientRect(), c = this.options.transformPreprocessor({
+    this.options.onBeforeTransformChange();
+    const i = this.transformation.getViewportMatrix(), s = Nt(i, o, r), { width: h, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
       prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
-      canvasHeight: d
+      canvasHeight: c
     });
-    this.canvas.patchViewportMatrix(c), this.options.onTransformFinished();
+    this.canvas.patchViewportMatrix(d), this.options.onTransformChange();
   }
   scaleViewport(t, o, r, i) {
-    this.options.onBeforeTransformStarted();
-    const s = this.canvas.transformation.getViewportMatrix(), h = Ct(s, o, r, i), { width: d, height: c } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
+    this.options.onBeforeTransformChange();
+    const s = this.canvas.transformation.getViewportMatrix(), h = Lt(s, o, r, i), { width: c, height: d } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
-      canvasWidth: d,
-      canvasHeight: c
+      canvasWidth: c,
+      canvasHeight: d
     });
-    this.canvas.patchViewportMatrix(l), this.options.onTransformFinished();
+    this.canvas.patchViewportMatrix(l), this.options.onTransformChange();
   }
   stopMouseDrag() {
-    this.element !== null && D(this.element, null), this.removeMouseDragListeners();
+    this.element !== null && m(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
   }
   stopTouchDrag() {
-    this.prevTouches = null, this.removeTouchDragListeners();
+    this.prevTouches = null, this.removeTouchDragListeners(), this.options.onTransformFinished();
   }
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Lt {
+class Dt {
   constructor() {
     n(this, "keyMap", /* @__PURE__ */ new Map());
     n(this, "valueMap", /* @__PURE__ */ new Map());
@@ -1777,12 +1787,12 @@ class Lt {
     this.keyMap.clear(), this.valueMap.clear();
   }
 }
-class Dt {
+class It {
   constructor(t) {
     n(this, "transformation");
     n(this, "model");
-    n(this, "nodes", new Lt());
-    n(this, "nodeIdGenerator", new N(
+    n(this, "nodes", new Dt());
+    n(this, "nodeIdGenerator", new L(
       (t) => this.nodes.hasKey(t)
     ));
     n(this, "nodesResizeObserver");
@@ -1851,7 +1861,7 @@ class Dt {
     });
   }
 }
-class mt {
+class pt {
   constructor() {
     n(this, "coreOptions");
     n(this, "dragOptions");
@@ -1874,18 +1884,18 @@ class mt {
   }
   build() {
     let t = new xt(this.coreOptions);
-    return this.hasResizeReactiveNodes && (t = new Dt(t)), this.isDraggable && (t = new St(t, this.dragOptions)), this.isTransformable && (t = new Pt(t, this.transformOptions)), t;
+    return this.hasResizeReactiveNodes && (t = new It(t)), this.isDraggable && (t = new Et(t, this.dragOptions)), this.isTransformable && (t = new Pt(t, this.transformOptions)), t;
   }
 }
 export {
   ot as BezierEdgeShape,
   xt as CanvasCore,
   rt as HorizontalEdgeShape,
-  mt as HtmlGraphBuilder,
+  pt as HtmlGraphBuilder,
   S as HtmlGraphError,
-  Dt as ResizeReactiveNodesCanvas,
+  It as ResizeReactiveNodesCanvas,
   it as StraightEdgeShape,
-  St as UserDraggableNodesCanvas,
+  Et as UserDraggableNodesCanvas,
   Pt as UserTransformableCanvas,
   nt as VerticalEdgeShape
 };