@html-graph/html-graph 0.1.5 → 0.1.7

package/dist/main.js

@@ -1,23 +1,23 @@
-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) => ({
+var Q = Object.defineProperty;
+var Z = (e, t, o) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var n = (e, t, o) => Z(e, typeof t != "symbol" ? t + "" : t, o);
+const O = (e, t) => ({
   x: e / 2,
   y: t / 2
 }), 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 = {
+}), M = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), w = {
   x: 0,
   y: 0
-}, T = (e, t, o, r) => {
+}, C = (e, t, o, r) => {
   const s = [
     w,
     { x: o, y: r },
     { x: o, y: -r }
   ].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) => {
+}, $ = (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;
@@ -26,29 +26,29 @@ const J = (e, t) => ({
       let l = 0, a = 0, g = 0;
       const y = d > 0, x = d < r, f = y && x;
       if (y && (l = -i, a = -s, g = h), x) {
-        const z = e[d + 1];
-        i = z.x - c.x, s = z.y - c.y, h = Math.sqrt(i * i + s * s);
+        const I = e[d + 1];
+        i = I.x - c.x, s = I.y - c.y, h = Math.sqrt(i * i + s * s);
       }
-      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}`
+      const S = h !== 0 ? Math.min((f ? t : 0) / h, d < r - 1 ? 0.5 : 1) : 0, T = f ? { x: c.x + i * S, y: c.y + s * S } : c, P = g !== 0 ? Math.min((f ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = f ? { x: c.x + l * P, y: c.y + a * P } : c;
+      d > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
+        `C ${c.x} ${c.y} ${c.x} ${c.y} ${T.x} ${T.y}`
       );
     });
   }
   return o.join(" ");
-}, $ = () => {
+}, W = () => {
   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 = () => {
+}, F = () => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return e.style.transformOrigin = "50% 50%", e;
-}, b = (e, t) => {
+}, R = (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;
-}, M = (e) => {
+}, N = (e) => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return t.setAttribute("fill", e), t;
-}, V = (e, t) => {
+}, Y = (e, t) => {
   const o = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
@@ -64,7 +64,7 @@ const J = (e, t) => ({
     flipX: d,
     flipY: l
   };
-}, Q = (e) => {
+}, q = (e) => {
   const t = v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -81,7 +81,7 @@ const J = (e, t) => ({
     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} `, c = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
   return `${h}${s}${c}`;
-}, Z = (e) => {
+}, tt = (e) => {
   const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -110,21 +110,21 @@ const J = (e, t) => ({
   }, f = {
     x: a.x - e.curvature * e.toVect.x,
     y: a.y - e.curvature * e.toVect.y
-  }, C = {
+  }, A = {
     x: d.x + h,
     y: d.y + c
-  }, E = {
+  }, S = {
     x: a.x + h,
     y: a.y + c
   };
   return [
     `M ${t.x} ${t.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}`,
+    `C ${x.x} ${x.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
+    `C ${S.x} ${S.y} ${f.x} ${f.y} ${a.x} ${a.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, O = (e) => {
+}, et = (e) => {
   const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -141,11 +141,11 @@ const J = (e, t) => ({
     x: e.flipX > 0 ? e.to.x - c : e.to.x + r,
     y: h.y
   }, y = { x: g.x, y: d };
-  return P(
+  return $(
     [t, s, l, a, y, g, h, o],
     e.roundness
   );
-}, Y = (e) => {
+}, G = (e) => {
   const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -163,11 +163,11 @@ const J = (e, t) => ({
     e.toVect,
     e.to
   ), g = { x: a.x + c, y: a.y + d };
-  return P(
+  return $(
     [t, i, l, g, a, o],
     e.roundness
   );
-}, q = (e) => {
+}, ot = (e) => {
   const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -181,8 +181,8 @@ const J = (e, t) => ({
     e.toVect,
     e.to
   );
-  return P([t, i, s, o], e.roundness);
-}, tt = (e) => {
+  return $([t, i, s, o], e.roundness);
+}, rt = (e) => {
   const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -199,11 +199,11 @@ const J = (e, t) => ({
     x: h.x,
     y: e.flipY > 0 ? e.to.y - c : e.to.y + r
   }, y = { x: d, y: g.y };
-  return P(
+  return $(
     [t, s, l, a, y, g, h, o],
     e.roundness
   );
-}, X = (e) => {
+}, U = (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 },
@@ -216,8 +216,8 @@ const J = (e, t) => ({
   ].map(
     (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) => {
+  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${$(h, e.roundness)}`;
+}, it = (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, d = [
     { x: e.arrowLength, y: w.y },
     { x: s, y: h },
@@ -230,7 +230,7 @@ const J = (e, t) => ({
   ].join(" "), a = `M 0 0 L ${d[0].x} ${d[0].y} `;
   return `${e.hasSourceArrow || e.hasTargetArrow ? "" : a}${l}`;
 }, u = Object.freeze({
-  color: "#5c5c5c",
+  color: "#777777",
   width: 1,
   arrowLength: 15,
   arrowWidth: 4,
@@ -246,10 +246,10 @@ const J = (e, t) => ({
   smallCycleRadius: 15,
   curvature: 90
 });
-class ot {
+class nt {
   constructor(t) {
-    n(this, "svg", $());
-    n(this, "group", p());
+    n(this, "svg", W());
+    n(this, "group", F());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -264,19 +264,19 @@ 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 = 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));
+    this.svg.appendChild(this.group), this.line = R(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(o), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
       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}, ${c})`;
-    const d = A(
+    const d = M(
       t.source.direction,
       h,
       c
-    ), l = A(
+    ), l = M(
       t.target.direction,
       h,
       c
@@ -285,14 +285,14 @@ class ot {
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = et({
+    if (t.source.portId === t.target.portId ? (g = it({
       fromVect: d,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Z({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = tt({
       to: a,
       fromVect: d,
       toVect: l,
@@ -304,7 +304,7 @@ class ot {
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Q({
+    }) : g = q({
       to: a,
       fromVect: d,
       toVect: l,
@@ -313,7 +313,7 @@ class ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const f = T(
+      const f = C(
         d,
         w,
         this.arrowLength,
@@ -322,7 +322,7 @@ class ot {
       this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const f = T(
+      const f = C(
         y,
         a,
         x,
@@ -332,10 +332,10 @@ class ot {
     }
   }
 }
-class rt {
+class st {
   constructor(t) {
-    n(this, "svg", $());
-    n(this, "group", p());
+    n(this, "svg", W());
+    n(this, "group", F());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -356,19 +356,19 @@ 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 = 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));
+    this.svg.appendChild(this.group), this.line = R(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
       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}, ${c})`;
-    const d = A(
+    const d = M(
       t.source.direction,
       h,
       c
-    ), l = A(
+    ), l = M(
       t.target.direction,
       h,
       c
@@ -377,7 +377,7 @@ class rt {
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = X({
+    if (t.source.portId === t.target.portId ? (g = U({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -385,7 +385,7 @@ class rt {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Y({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
       to: a,
       fromVect: d,
       toVect: l,
@@ -398,7 +398,7 @@ class rt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = O({
+    }) : g = et({
       to: a,
       fromVect: d,
       toVect: l,
@@ -409,7 +409,7 @@ class rt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const f = T(
+      const f = C(
         d,
         w,
         this.arrowLength,
@@ -418,7 +418,7 @@ class rt {
       this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const f = T(
+      const f = C(
         y,
         a,
         x,
@@ -428,10 +428,10 @@ class rt {
     }
   }
 }
-class it {
+class ht {
   constructor(t) {
-    n(this, "svg", $());
-    n(this, "group", p());
+    n(this, "svg", W());
+    n(this, "group", F());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -452,19 +452,19 @@ 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 = 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));
+    this.svg.appendChild(this.group), this.line = R(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
       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}, ${c})`;
-    const d = A(
+    const d = M(
       t.source.direction,
       h,
       c
-    ), l = A(
+    ), l = M(
       t.target.direction,
       h,
       c
@@ -473,7 +473,7 @@ class it {
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = X({
+    if (t.source.portId === t.target.portId ? (g = U({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -481,7 +481,7 @@ class it {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Y({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
       to: a,
       fromVect: d,
       toVect: l,
@@ -494,7 +494,7 @@ class it {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = q({
+    }) : g = ot({
       to: a,
       fromVect: d,
       toVect: l,
@@ -504,7 +504,7 @@ class it {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const f = T(
+      const f = C(
         d,
         w,
         this.arrowLength,
@@ -513,7 +513,7 @@ class it {
       this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const f = T(
+      const f = C(
         y,
         a,
         x,
@@ -523,10 +523,10 @@ class it {
     }
   }
 }
-class nt {
+class ct {
   constructor(t) {
-    n(this, "svg", $());
-    n(this, "group", p());
+    n(this, "svg", W());
+    n(this, "group", F());
     n(this, "line");
     n(this, "sourceArrow", null);
     n(this, "targetArrow", null);
@@ -547,19 +547,19 @@ 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 = 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));
+    this.svg.appendChild(this.group), this.line = R(r, i), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
   }
   render(t) {
-    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = V(
+    const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
       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}, ${c})`;
-    const d = A(
+    const d = M(
       t.source.direction,
       h,
       c
-    ), l = A(
+    ), l = M(
       t.target.direction,
       h,
       c
@@ -568,7 +568,7 @@ class nt {
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = X({
+    if (t.source.portId === t.target.portId ? (g = U({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -576,7 +576,7 @@ class nt {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = Y({
+    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
       to: a,
       fromVect: d,
       toVect: l,
@@ -589,7 +589,7 @@ class nt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = tt({
+    }) : g = rt({
       to: a,
       fromVect: d,
       toVect: l,
@@ -600,7 +600,7 @@ class nt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const f = T(
+      const f = C(
         d,
         w,
         this.arrowLength,
@@ -609,7 +609,7 @@ class nt {
       this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const f = T(
+      const f = C(
         y,
         a,
         x,
@@ -619,12 +619,12 @@ class nt {
     }
   }
 }
-const st = (e) => {
+const dt = (e) => {
   if (typeof e == "function")
     return e;
   switch (e == null ? void 0 : e.type) {
     case "straight":
-      return () => new it({
+      return () => new ht({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -638,7 +638,7 @@ const st = (e) => {
         detourDirection: e.detourDirection
       });
     case "horizontal":
-      return () => new rt({
+      return () => new st({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -652,7 +652,7 @@ const st = (e) => {
         detourDirection: e.detourDirection
       });
     case "vertical":
-      return () => new nt({
+      return () => new ct({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -666,7 +666,7 @@ const st = (e) => {
         detourDirection: e.detourDirection
       });
     default:
-      return () => new ot({
+      return () => new nt({
         color: e.color,
         width: e.width,
         arrowLength: e.arrowLength,
@@ -680,38 +680,38 @@ const st = (e) => {
         detourDirection: e.detourDirection
       });
   }
-}, R = (e) => () => e, G = R(0), W = () => {
+}, z = (e) => () => e, H = z(0), k = () => {
   let e = 0;
   return () => e++;
-}, ht = (e, t) => {
-  let o = G, r = G;
-  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), {
+}, lt = (e, t) => {
+  let o = H, r = H;
+  e === "incremental" && (o = k()), t === "incremental" && (r = k());
+  const i = k();
+  return e === "shared-incremental" && (o = i), t === "shared-incremental" && (r = i), typeof e == "number" && (o = z(e)), typeof t == "number" && (r = z(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
     nodesPriorityFn: o,
     edgesPriorityFn: r
   };
-}, ct = (e) => {
+}, at = (e) => {
   var o, r, i, s, h;
-  const t = ht(
+  const t = lt(
     (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: ((i = e == null ? void 0 : e.nodes) == null ? void 0 : i.centerFn) ?? J,
+      centerFn: ((i = e == null ? void 0 : e.nodes) == null ? void 0 : i.centerFn) ?? O,
       priorityFn: t.nodesPriorityFn
     },
     ports: {
       direction: ((s = e == null ? void 0 : e.ports) == null ? void 0 : s.direction) ?? 0
     },
     edges: {
-      shapeFactory: st(((h = e == null ? void 0 : e.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: dt(((h = e == null ? void 0 : e.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: t.edgesPriorityFn
     }
   };
 };
-class dt {
+class gt {
   constructor() {
     n(this, "nodes", /* @__PURE__ */ new Map());
     n(this, "ports", /* @__PURE__ */ new Map());
@@ -850,84 +850,19 @@ class dt {
     ];
   }
 }
-class lt {
-  constructor(t) {
-    this.graphStore = t;
-  }
-  getNode(t) {
-    const o = this.graphStore.getNode(t);
-    return o === void 0 ? null : {
-      element: o.element,
-      x: o.x,
-      y: o.y,
-      centerFn: o.centerFn,
-      priority: o.priority
-    };
-  }
-  getAllNodeIds() {
-    return this.graphStore.getAllNodeIds();
-  }
-  getPort(t) {
-    const o = this.graphStore.getPort(t);
-    return o === void 0 ? null : {
-      element: o.element,
-      direction: o.direction
-    };
-  }
-  getAllPortIds() {
-    return this.graphStore.getAllPortIds();
-  }
-  getNodePortIds(t) {
-    return this.graphStore.getNodePortIds(t);
-  }
-  getPortNodeId(t) {
-    return this.graphStore.getPortNodeId(t) ?? null;
-  }
-  getAllEdgeIds() {
-    return this.graphStore.getAllEdgeIds();
-  }
-  getEdge(t) {
-    const o = this.graphStore.getEdge(t);
-    return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
-  }
-  getPortIncomingEdgeIds(t) {
-    return this.graphStore.getPortIncomingEdgeIds(t);
-  }
-  getPortOutcomingEdgeIds(t) {
-    return this.graphStore.getPortOutcomingEdgeIds(t);
-  }
-  getPortCycleEdgeIds(t) {
-    return this.graphStore.getPortCycleEdgeIds(t);
-  }
-  getPortAdjacentEdgeIds(t) {
-    return this.graphStore.getPortAdjacentEdgeIds(t);
-  }
-  getNodeIncomingEdgeIds(t) {
-    return this.graphStore.getNodeIncomingEdgeIds(t);
-  }
-  getNodeOutcomingEdgeIds(t) {
-    return this.graphStore.getNodeOutcomingEdgeIds(t);
-  }
-  getNodeCycleEdgeIds(t) {
-    return this.graphStore.getNodeCycleEdgeIds(t);
-  }
-  getNodeAdjacentEdgeIds(t) {
-    return this.graphStore.getNodeAdjacentEdgeIds(t);
-  }
-}
-const j = (e) => ({
+const K = (e) => ({
   scale: 1 / e.scale,
   dx: -e.dx / e.scale,
   dy: -e.dy / e.scale
-}), H = {
+}), _ = {
   scale: 1,
   dx: 0,
   dy: 0
 };
-class at {
+class ut {
   constructor() {
-    n(this, "viewportMatrix", H);
-    n(this, "contentMatrix", H);
+    n(this, "viewportMatrix", _);
+    n(this, "contentMatrix", _);
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -940,17 +875,17 @@ class at {
       scale: t.scale ?? this.viewportMatrix.scale,
       dx: t.dx ?? this.viewportMatrix.dx,
       dy: t.dy ?? this.viewportMatrix.dy
-    }, this.contentMatrix = j(this.viewportMatrix);
+    }, this.contentMatrix = K(this.viewportMatrix);
   }
   patchContentMatrix(t) {
     this.contentMatrix = {
       scale: t.scale ?? this.contentMatrix.scale,
       dx: t.dx ?? this.contentMatrix.dx,
       dy: t.dy ?? this.contentMatrix.dy
-    }, this.viewportMatrix = j(this.contentMatrix);
+    }, this.viewportMatrix = K(this.contentMatrix);
   }
 }
-class gt {
+class wt {
   constructor(t) {
     this.transformer = t;
   }
@@ -961,21 +896,21 @@ class gt {
     return { ...this.transformer.getContentMatrix() };
   }
 }
-const ut = () => {
+const yt = () => {
   const e = document.createElement("div");
   return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
-}, wt = () => {
+}, ft = () => {
   const e = document.createElement("div");
   return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
-}, yt = () => {
+}, vt = () => {
   const e = document.createElement("div");
   return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.visibility = "hidden", e;
 };
-class ft {
+class xt {
   constructor(t, o) {
     n(this, "canvasWrapper", null);
-    n(this, "host", ut());
-    n(this, "container", wt());
+    n(this, "host", yt());
+    n(this, "container", ft());
     n(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
     n(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     this.graphStore = t, this.viewportTransformer = o, this.host.appendChild(this.container);
@@ -991,7 +926,7 @@ class ft {
     this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`;
   }
   attachNode(t) {
-    const o = this.graphStore.getNode(t), r = yt();
+    const o = this.graphStore.getNode(t), r = vt();
     r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(t, r), this.updateNodeCoordinates(t), this.updateNodePriority(t), r.style.visibility = "visible";
   }
   detachNode(t) {
@@ -1064,7 +999,7 @@ class ft {
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class L {
+class m {
   constructor(t) {
     n(this, "counter", 0);
     this.checkExists = t;
@@ -1080,21 +1015,21 @@ class L {
     this.counter = 0;
   }
 }
-class S extends Error {
+class E extends Error {
   constructor() {
     super(...arguments);
     n(this, "name", "HtmlGraphError");
   }
 }
-class vt {
+class Et {
   constructor(t, o, r, i, s, h, c) {
-    n(this, "nodeIdGenerator", new L(
+    n(this, "nodeIdGenerator", new m(
       (t) => this.graphStore.getNode(t) !== void 0
     ));
-    n(this, "portIdGenerator", new L(
+    n(this, "portIdGenerator", new m(
       (t) => this.graphStore.getPort(t) !== void 0
     ));
-    n(this, "edgeIdGenerator", new L(
+    n(this, "edgeIdGenerator", new m(
       (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 = c;
@@ -1108,7 +1043,7 @@ class vt {
   addNode(t) {
     const o = this.nodeIdGenerator.create(t.nodeId);
     if (this.graphStore.getNode(o) !== void 0)
-      throw new S("failed to add node with existing id");
+      throw new E("failed to add node with existing id");
     this.graphStore.addNode({
       nodeId: o,
       element: t.element,
@@ -1128,9 +1063,9 @@ class vt {
   markPort(t) {
     const o = this.portIdGenerator.create(t.portId);
     if (this.graphStore.getPort(o) !== void 0)
-      throw new S("failed to add port with existing id");
+      throw new E("failed to add port with existing id");
     if (this.graphStore.getNode(t.nodeId) === void 0)
-      throw new S("failed to set port on nonexisting node");
+      throw new E("failed to set port on nonexisting node");
     this.graphStore.addPort({
       portId: o,
       element: t.element,
@@ -1141,11 +1076,11 @@ class vt {
   addEdge(t) {
     const o = this.edgeIdGenerator.create(t.edgeId);
     if (this.graphStore.getEdge(o) !== void 0)
-      throw new S("failed to add edge with existing id");
+      throw new E("failed to add edge with existing id");
     if (this.graphStore.getPort(t.from) === void 0)
-      throw new S("failed to add edge from nonexisting port");
+      throw new E("failed to add edge from nonexisting port");
     if (this.graphStore.getPort(t.to) === void 0)
-      throw new S("failed to add edge to nonexisting port");
+      throw new E("failed to add edge to nonexisting port");
     this.graphStore.addEdge({
       edgeId: o,
       from: t.from,
@@ -1157,13 +1092,13 @@ class vt {
   updateEdge(t) {
     const o = this.graphStore.getEdge(t.edgeId);
     if (o === void 0)
-      throw new S("failed to update nonexisting edge");
+      throw new E("failed to update nonexisting edge");
     t.shape !== void 0 && (o.shape = t.shape, this.htmlController.updateEdgeShape(t.edgeId)), t.priority !== void 0 && (o.priority = t.priority, this.htmlController.updateEdgePriority(t.edgeId)), t.from !== void 0 && this.graphStore.updateEdgeFrom(t.edgeId, t.from), t.to !== void 0 && this.graphStore.updateEdgeTo(t.edgeId, t.to), this.htmlController.renderEdge(t.edgeId);
   }
   updatePort(t, o) {
     const r = this.graphStore.getPort(t);
     if (r === void 0)
-      throw new S("failed to unset nonexisting port");
+      throw new E("failed to unset nonexisting port");
     r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
       this.htmlController.renderEdge(s);
     });
@@ -1171,26 +1106,26 @@ class vt {
   updateNode(t, o) {
     const r = this.graphStore.getNode(t);
     if (r === void 0)
-      throw new S("failed to update nonexisting node");
+      throw new E("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((s) => {
       this.htmlController.renderEdge(s);
     });
   }
   removeEdge(t) {
     if (this.graphStore.getEdge(t) === void 0)
-      throw new S("failed to remove nonexisting edge");
+      throw new E("failed to remove nonexisting edge");
     this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
   }
   unmarkPort(t) {
     if (this.graphStore.getPort(t) === void 0)
-      throw new S("failed to unset nonexisting port");
+      throw new E("failed to unset nonexisting port");
     this.graphStore.getPortAdjacentEdgeIds(t).forEach((o) => {
       this.removeEdge(o);
     }), this.graphStore.removePort(t);
   }
   removeNode(t) {
     if (this.graphStore.getNode(t) === void 0)
-      throw new S("failed to remove nonexisting node");
+      throw new E("failed to remove nonexisting node");
     this.graphStore.getNodePortIds(t).forEach((o) => {
       this.unmarkPort(o);
     }), this.htmlController.detachNode(t), this.graphStore.removeNode(t);
@@ -1208,17 +1143,82 @@ class vt {
     this.clear(), this.htmlController.destroy();
   }
 }
-class xt {
+class St {
+  constructor(t) {
+    this.graphStore = t;
+  }
+  getNode(t) {
+    const o = this.graphStore.getNode(t);
+    return o === void 0 ? null : {
+      element: o.element,
+      x: o.x,
+      y: o.y,
+      centerFn: o.centerFn,
+      priority: o.priority
+    };
+  }
+  getAllNodeIds() {
+    return this.graphStore.getAllNodeIds();
+  }
+  getPort(t) {
+    const o = this.graphStore.getPort(t);
+    return o === void 0 ? null : {
+      element: o.element,
+      direction: o.direction
+    };
+  }
+  getAllPortIds() {
+    return this.graphStore.getAllPortIds();
+  }
+  getNodePortIds(t) {
+    return this.graphStore.getNodePortIds(t);
+  }
+  getPortNodeId(t) {
+    return this.graphStore.getPortNodeId(t) ?? null;
+  }
+  getAllEdgeIds() {
+    return this.graphStore.getAllEdgeIds();
+  }
+  getEdge(t) {
+    const o = this.graphStore.getEdge(t);
+    return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
+  }
+  getPortIncomingEdgeIds(t) {
+    return this.graphStore.getPortIncomingEdgeIds(t);
+  }
+  getPortOutcomingEdgeIds(t) {
+    return this.graphStore.getPortOutcomingEdgeIds(t);
+  }
+  getPortCycleEdgeIds(t) {
+    return this.graphStore.getPortCycleEdgeIds(t);
+  }
+  getPortAdjacentEdgeIds(t) {
+    return this.graphStore.getPortAdjacentEdgeIds(t);
+  }
+  getNodeIncomingEdgeIds(t) {
+    return this.graphStore.getNodeIncomingEdgeIds(t);
+  }
+  getNodeOutcomingEdgeIds(t) {
+    return this.graphStore.getNodeOutcomingEdgeIds(t);
+  }
+  getNodeCycleEdgeIds(t) {
+    return this.graphStore.getNodeCycleEdgeIds(t);
+  }
+  getNodeAdjacentEdgeIds(t) {
+    return this.graphStore.getNodeAdjacentEdgeIds(t);
+  }
+}
+class At {
   constructor(t) {
     n(this, "transformation");
     n(this, "model");
     n(this, "canvasController");
     n(this, "edgeShapeFactory");
     this.apiOptions = t;
-    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(
+    const o = at(this.apiOptions), r = new ut(), i = new gt();
+    this.model = new St(i), this.transformation = new wt(r);
+    const s = new xt(i, r);
+    this.canvasController = new Et(
       i,
       s,
       r,
@@ -1306,52 +1306,52 @@ class xt {
     this.clear(), this.canvasController.destroy();
   }
 }
-const D = (e, t, o) => {
+const V = (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;
-}, I = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, m = (e, t) => {
+}, b = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, p = (e, t) => {
   t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
-}, St = (e) => {
-  var g, y, x, f, C, E;
+}, Tt = (e) => {
+  var g, y, x, f, A, S;
   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;
+  }), 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 = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, l = (S = e == null ? void 0 : e.mouse) == null ? void 0 : S.mouseUpEventVerifier;
   return {
     freezePriority: i,
     dragCursor: h,
-    mouseDownEventValidator: d,
-    mouseUpEventValidator: l !== void 0 ? l : (N) => N.button === 0,
+    mouseDownEventVerifier: d,
+    mouseUpEventVerifier: l !== void 0 ? l : (T) => T.button === 0,
     onNodeDrag: t,
     onBeforeNodeDrag: o,
     onNodeDragFinished: r
   };
 };
-class Et {
+class Mt {
   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, "nodeIdGenerator", new L(
+    n(this, "nodeIdGenerator", new m(
       (t) => this.nodes.has(t)
     ));
     n(this, "element", null);
     n(this, "onWindowMouseMove", (t) => {
-      if (this.element !== null && (!D(this.element, t.clientX, t.clientY) || !I(this.window, t.clientX, t.clientY))) {
+      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !b(this.window, t.clientX, t.clientY))) {
         this.cancelMouseDrag();
         return;
       }
       this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
     });
     n(this, "onWindowMouseUp", (t) => {
-      this.options.mouseUpEventValidator(t) && this.cancelMouseDrag();
+      this.options.mouseUpEventVerifier(t) && this.cancelMouseDrag();
     });
     n(this, "onWindowTouchMove", (t) => {
       if (t.touches.length !== 1)
         return;
       const o = t.touches[0];
-      if (this.element !== null && (!D(this.element, o.clientX, o.clientY) || !I(this.window, o.clientX, o.clientY))) {
+      if (this.element !== null && (!V(this.element, o.clientX, o.clientY) || !b(this.window, o.clientX, o.clientY))) {
         this.cancelTouchDrag();
         return;
       }
@@ -1369,7 +1369,7 @@ class Et {
     n(this, "previousTouchCoords", null);
     n(this, "window", window);
     n(this, "options");
-    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.options = St(o ?? {});
+    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.options = Tt(o ?? {});
   }
   attach(t) {
     return this.detach(), this.element = t, this.canvas.attach(this.element), this;
@@ -1381,7 +1381,7 @@ class Et {
     const o = this.nodeIdGenerator.create(t.id);
     this.canvas.addNode({ ...t, id: o }), this.updateMaxNodePriority(o);
     const r = (s) => {
-      if (this.element === null || !this.options.mouseDownEventValidator(s))
+      if (this.element === null || !this.options.mouseDownEventVerifier(s))
         return;
       const h = this.model.getNode(o);
       this.options.onBeforeNodeDrag({
@@ -1389,7 +1389,7 @@ class Et {
         element: t.element,
         x: h.x,
         y: h.y
-      }) && (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));
+      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, p(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;
@@ -1458,8 +1458,8 @@ class Et {
     this.canvas.updateNode(t, { x: g, y }), this.options.onNodeDrag({
       nodeId: t,
       element: i.element,
-      x: i.x,
-      y: i.y
+      x: g,
+      y
     });
   }
   updateMaxNodePriority(t) {
@@ -1482,7 +1482,7 @@ class Et {
       element: t.element,
       x: t.x,
       y: t.y
-    }), this.grabbedNodeId = null, this.element !== null && m(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, this.element !== null && p(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1501,7 +1501,7 @@ class Et {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const At = (e) => {
+const Ct = (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, c = s.nextTransform.dy;
@@ -1511,7 +1511,7 @@ const At = (e) => {
     const l = s.canvasHeight * s.prevTransform.scale;
     return c > i - l && c > s.prevTransform.dy && (c = Math.max(s.prevTransform.dy, i - l)), { scale: s.nextTransform.scale, dx: h, dy: c };
   };
-}, Tt = (e) => {
+}, Nt = (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, c = s.nextTransform;
@@ -1532,7 +1532,7 @@ const At = (e) => {
       dy: a
     };
   };
-}, Mt = (e) => (t) => e.reduce(
+}, Lt = (e) => (t) => e.reduce(
   (o, r) => r({
     prevTransform: t.prevTransform,
     nextTransform: o,
@@ -1540,47 +1540,50 @@ const At = (e) => {
     canvasHeight: t.canvasHeight
   }),
   t.nextTransform
-), U = (e) => {
+), J = (e) => {
   if (typeof e == "function")
     return e;
   switch (e.type) {
     case "scale-limit":
-      return Tt({
+      return Nt({
         minContentScale: e.minContentScale ?? 0,
         maxContentScale: e.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return At({
+      return Ct({
         minX: e.minX ?? -1 / 0,
         maxX: e.maxX ?? 1 / 0,
         minY: e.minY ?? -1 / 0,
         maxY: e.maxY ?? 1 / 0
       });
   }
-}, 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;
+}, Pt = (e) => {
+  var f, A, S, T, X, P, D, I, j;
+  const t = (f = e == null ? void 0 : e.scale) == null ? void 0 : f.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
   let i;
-  r !== void 0 ? Array.isArray(r) ? i = Mt(
+  r !== void 0 ? Array.isArray(r) ? i = Lt(
     r.map(
-      (f) => U(f)
+      (L) => J(L)
     )
-  ) : 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) ?? (() => {
-  });
+  ) : i = J(r) : i = (L) => L.nextTransform;
+  const s = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", h = ((S = e == null ? void 0 : e.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
+  }), c = ((T = e == null ? void 0 : e.events) == null ? void 0 : T.onTransformChange) ?? (() => {
+  }), d = (X = e == null ? void 0 : e.shift) == null ? void 0 : X.mouseDownEventVerifier, l = d !== void 0 ? d : (L) => L.button === 0, a = (P = e == null ? void 0 : e.shift) == null ? void 0 : P.mouseUpEventVerifier, g = a !== void 0 ? a : (L) => L.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onTransformStarted) ?? (() => {
+    onTransformStarted: ((I = e == null ? void 0 : e.events) == null ? void 0 : I.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onTransformFinished) ?? (() => {
+    onTransformFinished: ((j = e == null ? void 0 : e.events) == null ? void 0 : j.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: h,
     onTransformChange: c,
     transformPreprocessor: i,
-    shiftCursor: s
+    shiftCursor: s,
+    mouseDownEventVerifier: l,
+    mouseUpEventVerifier: g,
+    mouseWheelEventVerifier: x
   };
-}, F = (e) => {
+}, B = (e) => {
   const t = [], o = e.touches.length;
   for (let c = 0; c < o; c++)
     t.push([e.touches[c].clientX, e.touches[c].clientY]);
@@ -1598,16 +1601,16 @@ const At = (e) => {
     touchesCnt: o,
     touches: t
   };
-}, Nt = (e, t, o) => ({
+}, Dt = (e, t, o) => ({
   scale: e.scale,
   dx: e.dx + e.scale * t,
   dy: e.dy + e.scale * o
-}), Lt = (e, t, o, r) => ({
+}), It = (e, t, o, r) => ({
   scale: e.scale * t,
   dx: e.scale * (1 - t) * o + e.dx,
   dy: e.scale * (1 - t) * r + e.dy
 });
-class Pt {
+class mt {
   constructor(t, o) {
     n(this, "model");
     n(this, "transformation");
@@ -1615,10 +1618,10 @@ class Pt {
     n(this, "prevTouches", null);
     n(this, "window", window);
     n(this, "onMouseDown", (t) => {
-      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());
+      this.element === null || !this.options.mouseDownEventVerifier(t) || (p(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 || !D(this.element, t.clientX, t.clientY) || !I(this.window, t.clientX, t.clientY)) {
+      if (this.element === null || !V(this.element, t.clientX, t.clientY) || !b(this.window, t.clientX, t.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -1626,23 +1629,25 @@ class Pt {
       this.moveViewport(this.element, o, r);
     });
     n(this, "onWindowMouseUp", (t) => {
-      this.element === null || t.button !== 0 || this.stopMouseDrag();
+      this.element === null || !this.options.mouseUpEventVerifier(t) || this.stopMouseDrag();
     });
     n(this, "onWheelScroll", (t) => {
-      t.preventDefault();
+      if (!this.options.mouseWheelEventVerifier(t))
+        return;
+      t.preventDefault(), this.options.onTransformStarted();
       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);
+      this.scaleViewport(this.element, c, i, s), this.options.onTransformFinished();
     });
     n(this, "onTouchStart", (t) => {
-      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();
+      this.prevTouches = B(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 = F(t);
+      const r = B(t);
       if (!r.touches.every(
-        (s) => D(o, s[0], s[1]) && I(this.window, s[0], s[1])
+        (s) => V(o, s[0], s[1]) && b(this.window, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1658,7 +1663,7 @@ class Pt {
       this.prevTouches = r;
     });
     n(this, "onWindowTouchFinish", (t) => {
-      t.touches.length > 0 ? this.prevTouches = F(t) : this.stopTouchDrag();
+      t.touches.length > 0 ? this.prevTouches = B(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({
@@ -1670,7 +1675,7 @@ class Pt {
       this.canvas.patchViewportMatrix(i), this.options.onTransformChange();
     }));
     n(this, "options");
-    this.canvas = t, this.options = Ct(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    this.canvas = t, this.options = Pt(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;
@@ -1719,7 +1724,7 @@ class Pt {
   }
   moveViewport(t, o, r) {
     this.options.onBeforeTransformChange();
-    const i = this.transformation.getViewportMatrix(), s = Nt(i, o, r), { width: h, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
+    const i = this.transformation.getViewportMatrix(), s = Dt(i, o, r), { width: h, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
       prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
@@ -1729,7 +1734,7 @@ class Pt {
   }
   scaleViewport(t, o, r, i) {
     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({
+    const s = this.canvas.transformation.getViewportMatrix(), h = It(s, o, r, i), { width: c, height: d } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: c,
@@ -1738,7 +1743,7 @@ class Pt {
     this.canvas.patchViewportMatrix(l), this.options.onTransformChange();
   }
   stopMouseDrag() {
-    this.element !== null && m(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
+    this.element !== null && p(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -1750,7 +1755,7 @@ class Pt {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Dt {
+class $t {
   constructor() {
     n(this, "keyMap", /* @__PURE__ */ new Map());
     n(this, "valueMap", /* @__PURE__ */ new Map());
@@ -1787,12 +1792,12 @@ class Dt {
     this.keyMap.clear(), this.valueMap.clear();
   }
 }
-class It {
+class Vt {
   constructor(t) {
     n(this, "transformation");
     n(this, "model");
-    n(this, "nodes", new Dt());
-    n(this, "nodeIdGenerator", new L(
+    n(this, "nodes", new $t());
+    n(this, "nodeIdGenerator", new m(
       (t) => this.nodes.hasKey(t)
     ));
     n(this, "nodesResizeObserver");
@@ -1883,19 +1888,19 @@ class pt {
     return this.hasResizeReactiveNodes = !0, this;
   }
   build() {
-    let t = new xt(this.coreOptions);
-    return this.hasResizeReactiveNodes && (t = new It(t)), this.isDraggable && (t = new Et(t, this.dragOptions)), this.isTransformable && (t = new Pt(t, this.transformOptions)), t;
+    let t = new At(this.coreOptions);
+    return this.hasResizeReactiveNodes && (t = new Vt(t)), this.isDraggable && (t = new Mt(t, this.dragOptions)), this.isTransformable && (t = new mt(t, this.transformOptions)), t;
   }
 }
 export {
-  ot as BezierEdgeShape,
-  xt as CanvasCore,
-  rt as HorizontalEdgeShape,
+  nt as BezierEdgeShape,
+  At as CanvasCore,
+  st as HorizontalEdgeShape,
   pt as HtmlGraphBuilder,
-  S as HtmlGraphError,
-  It as ResizeReactiveNodesCanvas,
-  it as StraightEdgeShape,
-  Et as UserDraggableNodesCanvas,
-  Pt as UserTransformableCanvas,
-  nt as VerticalEdgeShape
+  E as HtmlGraphError,
+  Vt as ResizeReactiveNodesCanvas,
+  ht as StraightEdgeShape,
+  Mt as UserDraggableNodesCanvas,
+  mt as UserTransformableCanvas,
+  ct as VerticalEdgeShape
 };