@html-graph/html-graph 7.1.0 → 7.2.0

package/dist/html-graph.js

@@ -1,7 +1,7 @@
 var Fe = Object.defineProperty;
 var Oe = (r, e, t) => e in r ? Fe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var o = (r, e, t) => Oe(r, typeof e != "symbol" ? e + "" : e, t);
-const D = (r, e) => ({
+const N = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
@@ -15,7 +15,7 @@ const We = () => {
 }, ze = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
-class me {
+class ye {
   constructor(e, t, s) {
     o(this, "host", We());
     o(this, "container", ke());
@@ -90,7 +90,7 @@ class me {
     const n = {
       x: t.left - s.left,
       y: t.top - s.top
-    }, a = D(i, n);
+    }, a = N(i, n);
     return {
       x: a.x,
       y: a.y,
@@ -846,27 +846,54 @@ const Ke = (r, e, t) => {
     ]
   };
 }, Je = (r, e) => {
-  let t = e, s = null;
-  for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
+  let t = e;
+  for (; t !== null; ) {
+    const s = r.getElementPortIds(t)[0] ?? null;
+    if (s !== null)
+      return {
+        status: "portFound",
+        portId: s
+      };
+    if (r.getElementNodeId(t) !== null)
+      return {
+        status: "nodeEncountered"
+      };
     t = t.parentElement;
-  return s;
-}, Ae = (r, e) => r.elementsFromPoint(e.x, e.y).map((t) => t.shadowRoot !== null ? [...Ae(t.shadowRoot, e), t] : [t]).flat(), xe = (r, e) => {
+  }
+  return {
+    status: "notFound"
+  };
+};
+function* Ae(r, e) {
+  const t = r.elementsFromPoint(e.x, e.y);
+  for (const s of t) {
+    if (s.shadowRoot !== null) {
+      const i = Ae(s.shadowRoot, e);
+      for (const n of i)
+        yield n;
+    }
+    yield s;
+  }
+}
+const xe = (r, e) => {
   const t = Ae(document, e);
   for (const s of t) {
     const i = Je(r, s);
-    if (i !== null)
-      return i;
+    if (i.status === "portFound")
+      return i.portId;
+    if (i.status === "nodeEncountered")
+      return null;
   }
   return null;
 };
-var b = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(b || {});
+var T = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(T || {});
 const Se = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), p = {
+}), u = {
   x: 0,
   y: 0
-}, m = (r, e, t) => ({
+}, y = (r, e, t) => ({
   x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
   y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
 }), Pe = (r, e) => {
@@ -896,11 +923,11 @@ class Qe {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = m(
-      { x: this.params.arrowLength, y: p.y },
+    const s = y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ), i = m(
+      u
+    ), i = y(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -910,7 +937,7 @@ class Qe {
     }, a = {
       x: i.x - this.params.targetDirection.x * this.params.curvature,
       y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
     this.path = `${d}${h}${c}`;
   }
 }
@@ -919,35 +946,35 @@ class qe {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const t = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      u
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
-      { x: i, y: p.y },
+    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = y(
+      { x: i, y: u.y },
       this.params.sourceDirection,
-      p
+      u
     ), g = {
       x: c.x + h,
       y: c.y + d
-    }, l = m(
+    }, l = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), u = {
+    ), p = {
       x: l.x + h,
       y: l.y + d
     }, w = {
-      x: (g.x + u.x) / 2,
-      y: (g.y + u.y) / 2
-    }, y = {
+      x: (g.x + p.x) / 2,
+      y: (g.y + p.y) / 2
+    }, m = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
@@ -963,7 +990,7 @@ class qe {
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${E.x} ${E.y} ${w.x} ${w.y}`,
+      `C ${m.x} ${m.y} ${E.x} ${E.y} ${w.x} ${w.y}`,
       `C ${A.x} ${A.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
       `L ${s.x} ${s.y}`
     ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
@@ -985,20 +1012,20 @@ const Z = Object.freeze({
   return r.style.transformOrigin = "50% 50%", r;
 }, Ne = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
-}, L = (r, e) => {
+}, R = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const s = r.length - 1;
     let i = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, g = 0, l = 0;
-      const u = d > 0, w = d < s, y = u && w;
-      if (u && (c = -i, g = -n, l = a), w) {
+      const p = d > 0, w = d < s, m = p && w;
+      if (p && (c = -i, g = -n, l = a), w) {
         const $ = r[d + 1];
         i = $.x - h.x, n = $.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const E = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, A = y ? { x: h.x + i * E, y: h.y + n * E } : h, T = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * T, y: h.y + g * T } : h;
-      d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
+      const E = a !== 0 ? Math.min((m ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, A = m ? { x: h.x + i * E, y: h.y + n * E } : h, b = l !== 0 ? Math.min((m ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, M = m ? { x: h.x + c * b, y: h.y + g * b } : h;
+      d > 0 && t.push(`L ${M.x} ${M.y}`), m && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${A.x} ${A.y}`
       );
     });
@@ -1012,34 +1039,34 @@ class _e {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const s = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, i = this.params.hasTargetArrow ? m(
+      u
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
-      { x: a, y: p.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
+      { x: a, y: u.y },
       this.params.sourceDirection,
-      p
-    ), d = m(
+      u
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), c = Math.max((h.x + d.x) / 2, n), g = this.params.to.y / 2, l = {
       x: this.params.flipX > 0 ? c : -n,
       y: h.y
-    }, u = { x: l.x, y: g }, w = {
+    }, p = { x: l.x, y: g }, w = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, y = { x: w.x, y: g };
-    this.path = L(
-      [s, h, l, u, y, w, d, i],
+    }, m = { x: w.x, y: g };
+    this.path = R(
+      [s, h, l, p, m, w, d, i],
       this.params.roundness
     );
   }
@@ -1049,28 +1076,28 @@ class et {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const t = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      u
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: p.y },
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
+      { x: i, y: u.y },
       this.params.sourceDirection,
-      p
-    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
+      u
+    ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
-    this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = L(
-      [t, n, g, u, l, s],
+    ), p = { x: l.x + d, y: l.y + c }, w = { x: (g.x + p.x) / 2, y: (g.y + p.y) / 2 };
+    this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = R(
+      [t, n, g, p, l, s],
       this.params.roundness
     );
   }
@@ -1082,27 +1109,27 @@ class tt {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const s = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, i = this.params.hasTargetArrow ? m(
+      u
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
-      { x: n, y: p.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = y(
+      { x: n, y: u.y },
       this.params.sourceDirection,
-      p
-    ), h = m(
+      u
+    ), h = y(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     );
-    this.path = L([s, a, h, i], this.params.roundness);
+    this.path = R([s, a, h, i], this.params.roundness);
   }
 }
 class rt {
@@ -1112,34 +1139,34 @@ class rt {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const s = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, i = this.params.hasTargetArrow ? m(
+      u
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
-      { x: a, y: p.y },
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
+      { x: a, y: u.y },
       this.params.sourceDirection,
-      p
-    ), d = m(
+      u
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), c = Math.max((h.y + d.y) / 2, n), g = this.params.to.x / 2, l = {
       x: h.x,
       y: this.params.flipY > 0 ? c : -n
-    }, u = { x: g, y: l.y }, w = {
+    }, p = { x: g, y: l.y }, w = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, y = { x: g, y: w.y };
-    this.path = L(
-      [s, h, l, u, y, w, d, i],
+    }, m = { x: g, y: w.y };
+    this.path = R(
+      [s, h, l, p, m, w, d, i],
       this.params.roundness
     );
   }
@@ -1150,18 +1177,18 @@ class J {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
-      { x: this.params.arrowLength, y: p.y },
-      { x: i, y: p.y },
+      { x: this.params.arrowLength, y: u.y },
+      { x: i, y: u.y },
       { x: i, y: this.params.side },
       { x: n, y: this.params.side },
       { x: n, y: -this.params.side },
       { x: i, y: -this.params.side },
-      { x: i, y: p.y },
-      { x: this.params.arrowLength, y: p.y }
+      { x: i, y: u.y },
+      { x: this.params.arrowLength, y: u.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, p)
-    ), d = `M ${p.x} ${p.y} L ${h[0].x} ${h[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${L(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
+      (c) => y(c, this.params.sourceDirection, u)
+    ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${R(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
 class st {
@@ -1170,19 +1197,19 @@ class st {
     o(this, "midpoint");
     this.params = e;
     const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
-      { x: this.params.arrowLength, y: p.y },
+      { x: this.params.arrowLength, y: u.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (y) => m(y, this.params.sourceDirection, p)
-    ), u = [
+      (m) => y(m, this.params.sourceDirection, u)
+    ), p = [
       `M ${l[0].x} ${l[0].y}`,
       `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
       `A ${s} ${s} 0 1 0 ${l[2].x} ${l[2].y}`,
       `A ${t} ${t} 0 0 1 ${l[0].x} ${l[0].y}`
     ].join(" "), w = `M 0 0 L ${l[0].x} ${l[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${p}`, this.midpoint = l[3];
   }
 }
 class ot {
@@ -1204,7 +1231,7 @@ class ot {
       offset: this.params.sourceOffset,
       hasArrow: this.params.hasSourceArrow,
       flip: 1,
-      shift: p
+      shift: u
     }), n = this.createDirectLinePoint({
       offset: this.params.targetOffset,
       hasArrow: this.params.hasTargetArrow,
@@ -1226,22 +1253,22 @@ class it {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const t = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      u
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: p.y },
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
+      { x: i, y: u.y },
       this.params.sourceDirection,
-      p
-    ), a = m(
+      u
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1249,7 +1276,7 @@ class it {
       x: (n.x + a.x) / 2,
       y: g
     };
-    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = L(
+    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = R(
       [
         t,
         n,
@@ -1267,22 +1294,22 @@ class nt {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
-      { x: this.params.arrowLength, y: p.y },
+    const t = this.params.hasSourceArrow ? y(
+      { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
-      p
-    ) : p, s = this.params.hasTargetArrow ? m(
+      u
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: i, y: p.y },
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
+      { x: i, y: u.y },
       this.params.sourceDirection,
-      p
-    ), a = m(
+      u
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1290,7 +1317,7 @@ class nt {
       x: g,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = L(
+    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = R(
       [
         t,
         n,
@@ -1356,9 +1383,9 @@ class k {
       x: i,
       y: n
     };
-    let l = { x: -c.x, y: -c.y }, u;
-    e.category === C.PortCycle ? (u = this.params.createCyclePath, l = d) : e.category === C.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
-    const w = u(
+    let l = { x: -c.x, y: -c.y }, p;
+    e.category === C.PortCycle ? (p = this.params.createCyclePath, l = d) : e.category === C.NodeCycle ? p = this.params.createDetourPath : p = this.params.createLinePath;
+    const w = p(
       d,
       c,
       g,
@@ -1366,12 +1393,12 @@ class k {
       h
     );
     this.line.setAttribute("d", w.path);
-    let y = null;
-    this.sourceArrow && (y = this.arrowRenderer({
+    let m = null;
+    this.sourceArrow && (m = this.arrowRenderer({
       direction: d,
-      shift: p,
+      shift: u,
       arrowLength: this.params.arrowLength
-    }), this.sourceArrow.setAttribute("d", y));
+    }), this.sourceArrow.setAttribute("d", m));
     let v = null;
     this.targetArrow && (v = this.arrowRenderer({
       direction: l,
@@ -1379,33 +1406,33 @@ class k {
       arrowLength: this.params.arrowLength
     }), this.targetArrow.setAttribute("d", v)), this.afterRenderEmitter.emit({
       edgePath: w,
-      sourceArrowPath: y,
+      sourceArrowPath: m,
       targetArrowPath: v
     });
   }
 }
 const at = (r) => (e) => {
   const s = [
-    p,
+    u,
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => m(h, e.direction, p)
+    (h) => y(h, e.direction, u)
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
   })), i = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
   return `${i} ${n} ${a} Z`;
 }, ht = (r) => (e) => {
-  const t = r.radius, s = e.arrowLength, i = (s * s + 2 * s * t) / (2 * t), n = i + t, a = s + t - t * (s + t) / n, h = t * i / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
-    (y) => m(y, e.direction, p)
-  ).map((y) => ({
-    x: y.x + e.shift.x,
-    y: y.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
-  return `${g} ${l} ${u} ${w}`;
+  const t = r.radius, s = e.arrowLength, i = (s * s + 2 * s * t) / (2 * t), n = i + t, a = s + t - t * (s + t) / n, h = t * i / n, c = [u, { x: a, y: -h }, { x: a, y: h }].map(
+    (m) => y(m, e.direction, u)
+  ).map((m) => ({
+    x: m.x + e.shift.x,
+    y: m.y + e.shift.y
+  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, p = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${g} ${l} ${p} ${w}`;
 }, dt = (r) => (e) => {
-  const t = r.smallRadius, s = r.radius, i = m(
+  const t = r.smallRadius, s = r.radius, i = y(
     {
       x: e.arrowLength,
       y: 0
@@ -1418,8 +1445,8 @@ const at = (r) => (e) => {
       x: e.arrowLength + r.smallRadius,
       y: 0
     }
-  ), a = [p, { x: i.x, y: -i.y }, i].map(
-    (l) => m(l, e.direction, p)
+  ), a = [u, { x: i.x, y: -i.y }, i].map(
+    (l) => y(l, e.direction, u)
   ).map((l) => ({
     x: l.x + e.shift.x,
     y: l.y + e.shift.y
@@ -1755,35 +1782,35 @@ class Me {
     });
     this.line.setAttribute("d", c.path);
     let g = null, l = null;
-    const u = c.diagonalDistance;
-    if (u === 0)
+    const p = c.diagonalDistance;
+    if (p === 0)
       this.sourceArrow !== null && (g = "", this.sourceArrow.setAttribute("d", g)), this.targetArrow !== null && (l = "", this.targetArrow.setAttribute("d", l));
     else {
       const w = {
-        x: d.x / u,
-        y: d.y / u
+        x: d.x / p,
+        y: d.y / p
       };
       if (this.sourceArrow) {
-        const y = {
+        const m = {
           x: w.x * this.sourceOffset,
           y: w.y * this.sourceOffset
         };
         g = this.arrowRenderer({
           direction: w,
-          shift: y,
+          shift: m,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", g);
       }
       if (this.targetArrow) {
-        const y = {
+        const m = {
           x: w.x * this.targetOffset,
           y: w.y * this.targetOffset
         };
         l = this.arrowRenderer({
           direction: { x: -w.x, y: -w.y },
           shift: {
-            x: d.x - y.x,
-            y: d.y - y.y
+            x: d.x - m.x,
+            y: d.y - m.y
           },
           arrowLength: this.arrowLength
         }), this.targetArrow.setAttribute("d", l);
@@ -1960,7 +1987,7 @@ class Ce {
   }
 }
 const Ve = (r, e) => {
-  const t = new Ee(), s = new Re(t), i = new Ce(e), n = new me(t, e, r), a = {
+  const t = new Ee(), s = new Re(t), i = new Ce(e), n = new ye(t, e, r), a = {
     nodes: {
       centerFn: Se,
       priorityFn: () => 0
@@ -2125,7 +2152,7 @@ class Q {
       const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
       if (!this.params.nodeDragVerifier(s))
         return;
-      e.stopPropagation();
+      this.params.onNodeDragStarted(s), e.stopPropagation();
       const a = this.calculateContentPoint({
         x: e.clientX,
         y: e.clientY
@@ -2265,7 +2292,7 @@ class Q {
       x: e.x - t.x,
       y: e.y - t.y
     }, i = this.canvas.viewport.getViewportMatrix();
-    return D(i, s);
+    return N(i, s);
   }
   adjustNodeCoords(e) {
     const t = this.params.gridSize;
@@ -2279,11 +2306,11 @@ class Q {
     return e;
   }
 }
-const yt = (r, e, t) => ({
+const mt = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), mt = (r, e, t, s) => ({
+}), yt = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
@@ -2406,7 +2433,7 @@ class X {
     new X(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = yt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = mt(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
@@ -2415,7 +2442,7 @@ class X {
     this.performTransform(h);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = mt(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = yt(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: a,
@@ -2622,27 +2649,27 @@ class ee {
   grabPort(e, t, s) {
     const i = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = D(c, {
+    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), g = N(c, {
       x: a - d.x,
       y: h - d.y
-    }), l = D(c, {
+    }), l = N(c, {
       x: t.x - d.x,
       y: t.y - d.y
-    }), u = {
-      overlayId: b.Static,
+    }), p = {
+      overlayId: T.Static,
       portCoords: g,
       portDirection: i.direction
     }, w = {
-      overlayId: b.Dragging,
+      overlayId: T.Dragging,
       portCoords: l,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [y, v] = this.isTargetDragging ? [u, w] : [w, u];
-    this.overlayCanvas.addNode(F(y)), this.overlayCanvas.addNode(F(v)), this.overlayCanvas.addEdge({
-      from: y.overlayId,
+    const [m, v] = this.isTargetDragging ? [p, w] : [w, p];
+    this.overlayCanvas.addNode(F(m)), this.overlayCanvas.addNode(F(v)), this.overlayCanvas.addEdge({
+      from: m.overlayId,
       to: v.overlayId,
-      shape: this.params.edgeShapeFactory(b.Edge)
+      shape: this.params.edgeShapeFactory(T.Edge)
     });
   }
   resetDragState() {
@@ -2664,8 +2691,8 @@ class ee {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    }, i = this.canvas.viewport.getViewportMatrix(), n = N(i, s);
+    this.overlayCanvas.updateNode(T.Dragging, {
       x: n.x,
       y: n.y
     });
@@ -2724,10 +2751,10 @@ class te {
     const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
       x: g.x + g.width / 2,
       y: g.y + g.height / 2
-    }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), y = D(u, {
+    }, p = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), m = N(p, {
       x: l.x - w.x,
       y: l.y - w.y
-    }), v = D(u, {
+    }), v = N(p, {
       x: t.x - w.x,
       y: t.y - w.y
     });
@@ -2739,21 +2766,21 @@ class te {
       priority: i.priority
     }, this.canvas.removeEdge(s);
     const E = {
-      overlayId: b.Static,
-      portCoords: y,
+      overlayId: T.Static,
+      portCoords: m,
       portDirection: c.direction
     }, A = {
-      overlayId: b.Dragging,
+      overlayId: T.Dragging,
       portCoords: v,
       portDirection: d.direction
-    }, [R, T] = this.isTargetDragging ? [E, A] : [A, E];
-    this.overlayCanvas.addNode(F(R)), this.overlayCanvas.addNode(F(T));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(b.Edge) : i.shape;
+    }, [D, b] = this.isTargetDragging ? [E, A] : [A, E];
+    this.overlayCanvas.addNode(F(D)), this.overlayCanvas.addNode(F(b));
+    const M = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
-      id: b.Edge,
-      from: R.overlayId,
-      to: T.overlayId,
-      shape: N
+      id: T.Edge,
+      from: D.overlayId,
+      to: b.overlayId,
+      shape: M
     }), !0;
   }
   resetDragState() {
@@ -2763,15 +2790,15 @@ class te {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    }, i = this.canvas.viewport.getViewportMatrix(), n = N(i, s);
+    this.overlayCanvas.updateNode(T.Dragging, {
       x: n.x,
       y: n.y
     });
   }
   tryCreateConnection(e) {
     const t = xe(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
+    if (this.overlayCanvas.removeEdge(T.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -3028,20 +3055,22 @@ const j = (r) => () => r, we = j(0), Tt = () => {
     }
   };
 }, Mt = (r) => {
-  var u, w, y, v, E;
-  const e = ((u = r.events) == null ? void 0 : u.onNodeDrag) ?? (() => {
-  }), t = r.nodeDragVerifier ?? (() => !0), s = ((w = r.events) == null ? void 0 : w.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (A) => A.button === 0, g = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, l = g !== void 0 ? g : (A) => A.button === 0;
+  var w, m, v, E, A, D;
+  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
+  }), t = ((m = r.events) == null ? void 0 : m.onNodeDrag) ?? (() => {
+  }), s = r.nodeDragVerifier ?? (() => !0), i = ((v = r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
+  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (E = r.mouse) == null ? void 0 : E.dragCursor, d = h !== void 0 ? h : "grab", c = (A = r.mouse) == null ? void 0 : A.mouseDownEventVerifier, g = c !== void 0 ? c : (b) => b.button === 0, l = (D = r.mouse) == null ? void 0 : D.mouseUpEventVerifier, p = l !== void 0 ? l : (b) => b.button === 0;
   return {
-    moveOnTop: i,
-    moveEdgesOnTop: n,
-    dragCursor: h,
+    moveOnTop: n,
+    moveEdgesOnTop: a,
+    dragCursor: d,
     gridSize: r.gridSize ?? null,
-    mouseDownEventVerifier: c,
-    mouseUpEventVerifier: l,
-    onNodeDrag: e,
-    nodeDragVerifier: t,
-    onNodeDragFinished: s
+    mouseDownEventVerifier: g,
+    mouseUpEventVerifier: p,
+    onNodeDragStarted: e,
+    onNodeDrag: t,
+    nodeDragVerifier: s,
+    onNodeDragFinished: i
   };
 }, Lt = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
@@ -3099,18 +3128,18 @@ const j = (r) => () => r, we = j(0), Tt = () => {
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, ye = (r) => {
-  var y, v, E, A, R, T, N, $, ne, ae, he, de;
-  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+}, me = (r) => {
+  var m, v, E, A, D, b, M, $, ne, ae, he, de;
+  const e = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
   s !== void 0 ? Array.isArray(s) ? i = Ct(
     s.map(
-      (M) => fe(M)
+      (L) => fe(L)
     )
-  ) : i = fe(s) : i = (M) => M.nextTransform;
+  ) : i = fe(s) : i = (L) => L.nextTransform;
   const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), h = ((A = r == null ? void 0 : r.events) == null ? void 0 : A.onTransformChange) ?? (() => {
-  }), d = (R = r == null ? void 0 : r.shift) == null ? void 0 : R.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, g = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, l = g !== void 0 ? g : (M) => M.button === 0, u = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
+  }), d = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseDownEventVerifier, c = d !== void 0 ? d : (L) => L.button === 0, g = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, l = g !== void 0 ? g : (L) => L.button === 0, p = (M = r == null ? void 0 : r.scale) == null ? void 0 : M.mouseWheelEventVerifier, w = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: (($ = r == null ? void 0 : r.events) == null ? void 0 : $.onTransformStarted) ?? (() => {
@@ -3149,7 +3178,7 @@ const j = (r) => () => r, we = j(0), Tt = () => {
   };
 }, Ut = (r, e, t) => {
   var c, g, l;
-  const s = () => "direct", i = (u) => u, n = (u) => u.button === 0, a = () => {
+  const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
   }, h = () => {
   }, d = () => {
   };
@@ -3166,8 +3195,8 @@ const j = (r) => () => r, we = j(0), Tt = () => {
   };
 }, Bt = (r, e) => {
   var c, g, l;
-  const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, i = (u) => u.button === 0, n = (u) => {
-    const w = e.getPortAdjacentEdgeIds(u);
+  const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
+    const w = e.getPortAdjacentEdgeIds(p);
     return w.length > 0 ? w[w.length - 1] : null;
   }, a = () => {
   }, h = () => {
@@ -3241,13 +3270,13 @@ class $e {
         const c = s[d], g = i.getVector(h, c);
         if (g.d > this.effectiveDistance)
           continue;
-        const l = this.k / g.d2, u = l * g.ex, w = l * g.ey, y = u / 2, v = w / 2, E = t.get(h), A = t.get(c);
-        E.x -= y, E.y -= v, A.x += y, A.y += v;
+        const l = this.k / g.d2, p = l * g.ex, w = l * g.ey, m = p / 2, v = w / 2, E = t.get(h), A = t.get(c);
+        E.x -= m, E.y -= v, A.x += m, A.y += v;
       }
     }
     return this.graph.getAllEdgeIds().forEach((a) => {
-      const h = this.graph.getEdge(a), d = this.graph.getPort(h.from), c = this.graph.getPort(h.to), g = i.getVector(d.nodeId, c.nodeId), u = (g.d - this.edgeEquilibriumLength) * this.edgeStiffness / 2, w = g.ex * u, y = g.ey * u, v = t.get(d.nodeId), E = t.get(c.nodeId);
-      v.x += w, v.y += y, E.x -= w, E.y -= y;
+      const h = this.graph.getEdge(a), d = this.graph.getPort(h.from), c = this.graph.getPort(h.to), g = i.getVector(d.nodeId, c.nodeId), p = (g.d - this.edgeEquilibriumLength) * this.edgeStiffness / 2, w = g.ex * p, m = g.ey * p, v = t.get(d.nodeId), E = t.get(c.nodeId);
+      v.x += w, v.y += m, E.x -= w, E.y -= m;
     }), this.currentCoords.forEach((a, h) => {
       const d = t.get(h), c = {
         x: d.x / this.nodeMass * this.dtSec,
@@ -3382,7 +3411,9 @@ const Ue = (r) => {
   applyOn: Ht(r == null ? void 0 : r.applyOn)
 }), Kt = (r, e) => ({
   ...r,
-  nodeDragVerifier: (t) => (e.add(t), r.nodeDragVerifier(t)),
+  onNodeDragStarted: (t) => {
+    e.add(t), r.onNodeDragStarted(t);
+  },
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
@@ -3403,8 +3434,8 @@ class qt {
     o(this, "connectablePortsConfig", {});
     o(this, "draggableEdgesConfig", {});
     o(this, "virtualScrollConfig");
-    o(this, "layoutConfig");
-    o(this, "animatedLayoutConfig");
+    o(this, "layoutConfig", {});
+    o(this, "animatedLayoutConfig", {});
     o(this, "hasDraggableNodes", !1);
     o(this, "hasTransformableViewport", !1);
     o(this, "hasNodeResizeReactiveEdges", !1);
@@ -3475,13 +3506,13 @@ class qt {
    * enables nodes positioning with specified layout
    */
   enableLayout(e) {
-    return this.layoutConfig = e, this.hasLayout = !0, this.hasAnimatedLayout = !1, this;
+    return this.layoutConfig = e ?? {}, this.hasLayout = !0, this.hasAnimatedLayout = !1, this;
   }
   /**
    * enables animated nodes positioning with specified layout
    */
   enableAnimatedLayout(e) {
-    return this.animatedLayoutConfig = e, this.hasAnimatedLayout = !0, this.hasLayout = !1, this;
+    return this.animatedLayoutConfig = e ?? {}, this.hasAnimatedLayout = !0, this.hasLayout = !1, this;
   }
   /**
    * builds final canvas
@@ -3491,7 +3522,7 @@ class qt {
       throw new Wt("CanvasBuilder is a single use object");
     this.used = !0;
     const e = new bt(this.element);
-    let t = new me(
+    let t = new ye(
       this.graphStore,
       this.viewportStore,
       e.main
@@ -3557,14 +3588,14 @@ class qt {
       i,
       e.main,
       this.window,
-      ye(this.transformConfig),
+      me(this.transformConfig),
       this.boxRenderingTrigger,
       Ft(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && X.configure(
       i,
       e.main,
       this.window,
-      ye(this.transformConfig)
+      me(this.transformConfig)
     ), this.hasLayout && xt.configure(
       i,
       Gt(this.layoutConfig)