@html-graph/html-graph 7.0.1 → 7.1.1

package/dist/html-graph.js

@@ -1,24 +1,24 @@
-var Be = Object.defineProperty;
-var Fe = (r, e, t) => e in r ? Be(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Fe(r, typeof e != "symbol" ? e + "" : e, t);
+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) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
 var C = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(C || {});
-const Oe = () => {
+const We = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, We = () => {
+}, ke = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, ke = (r) => {
+}, 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", Oe());
-    o(this, "container", We());
+    o(this, "host", We());
+    o(this, "container", ke());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     o(this, "applyTransform", () => {
@@ -29,7 +29,7 @@ class me {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    ke(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    ze(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -100,7 +100,7 @@ class me {
     };
   }
 }
-class ze {
+class Xe {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -120,7 +120,7 @@ class ze {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
-class Xe {
+class Ye {
   constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -144,7 +144,7 @@ class Xe {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new ze(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Xe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -198,7 +198,7 @@ class Xe {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class Ye {
+class He {
   constructor(e, t) {
     o(this, "deferredNodes", /* @__PURE__ */ new Set());
     o(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -510,7 +510,7 @@ class ve {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class He {
+class je {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -559,7 +559,7 @@ class Ee {
     o(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     o(this, "portOutcomingEdges", /* @__PURE__ */ new Map());
     o(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new He());
+    o(this, "elementPorts", new je());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -766,7 +766,7 @@ const ce = (r) => ({
   x: 0,
   y: 0
 };
-class je {
+class Ge {
   constructor() {
     o(this, "viewportMatrix", le);
     o(this, "contentMatrix", le);
@@ -825,10 +825,10 @@ class K {
     this.canvas.updateNode(t);
   }
 }
-const Ge = (r, e, t) => {
+const Ke = (r, e, t) => {
   const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= i && t <= i + a;
-}, Ke = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => Ge(e, t, s) && Ke(r, t, s), B = (r, e) => {
+}, Ze = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, V = (r, e, t, s) => Ke(e, t, s) && Ze(r, t, s), B = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, F = (r) => {
   const e = document.createElement("div");
@@ -845,31 +845,58 @@ const Ge = (r, e, t) => {
       }
     ]
   };
-}, Ze = (r, e) => {
-  let t = e, s = null;
-  for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
+}, Je = (r, e) => {
+  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) => {
-  const t = document.elementsFromPoint(e.x, e.y);
+  }
+  return {
+    status: "notFound"
+  };
+};
+function* Ae(r, e) {
+  const t = r.elementsFromPoint(e.x, e.y);
   for (const s of t) {
-    const i = Ze(r, s);
-    if (i !== null)
-      return i;
+    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.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 || {});
-const xe = (r, e) => ({
+const Se = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), p = {
   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)
-}), Se = (r, e) => {
+}), Pe = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -889,18 +916,18 @@ const xe = (r, e) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class Je {
+class Qe {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = m(
+    const s = y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ), i = m(
+    ), i = y(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -914,30 +941,30 @@ class Je {
     this.path = `${d}${h}${c}`;
   }
 }
-class Qe {
+class qe {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    const t = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : 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: p.y },
       this.params.sourceDirection,
       p
     ), 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
@@ -947,7 +974,7 @@ class Qe {
     }, w = {
       x: (g.x + u.x) / 2,
       y: (g.y + u.y) / 2
-    }, y = {
+    }, 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);
@@ -971,19 +998,19 @@ class Qe {
 }
 const Z = Object.freeze({
   edgeColor: "--edge-color"
-}), Pe = (r) => {
+}), be = (r) => {
   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.style.setProperty(Z.edgeColor, r), e;
-}, be = (r) => {
+}, Te = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", `var(${Z.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, O = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${Z.edgeColor})`), r;
-}, Te = () => {
+}, De = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, De = (r, e) => {
+}, 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) => {
   const t = [];
@@ -992,42 +1019,42 @@ const Z = Object.freeze({
     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;
+      const u = d > 0, w = d < s, m = u && w;
       if (u && (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, T = l !== 0 ? Math.min((m ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, N = m ? { x: h.x + c * T, y: h.y + g * T } : h;
+      d > 0 && t.push(`L ${N.x} ${N.y}`), m && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${A.x} ${A.y}`
       );
     });
   }
   return t.join(" ");
 };
-class qe {
+class _e {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, i = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
       { x: a, y: p.y },
       this.params.sourceDirection,
       p
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1037,34 +1064,34 @@ class qe {
     }, u = { 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 };
+    }, m = { x: w.x, y: g };
     this.path = L(
-      [s, h, l, u, y, w, d, i],
+      [s, h, l, u, m, w, d, i],
       this.params.roundness
     );
   }
 }
-class _e {
+class et {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    const t = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: p.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(
+    ), 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
@@ -1075,29 +1102,29 @@ class _e {
     );
   }
 }
-class et {
+class tt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, i = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = y(
       { x: n, y: p.y },
       this.params.sourceDirection,
       p
-    ), h = m(
+    ), h = y(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1105,29 +1132,29 @@ class et {
     this.path = L([s, a, h, i], this.params.roundness);
   }
 }
-class tt {
+class rt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, i = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
       { x: a, y: p.y },
       this.params.sourceDirection,
       p
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1137,9 +1164,9 @@ class tt {
     }, u = { 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 };
+    }, m = { x: g, y: w.y };
     this.path = L(
-      [s, h, l, u, y, w, d, i],
+      [s, h, l, u, m, w, d, i],
       this.params.roundness
     );
   }
@@ -1159,12 +1186,12 @@ class J {
       { x: i, y: p.y },
       { x: this.params.arrowLength, y: p.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, p)
+      (c) => y(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 };
   }
 }
-class rt {
+class st {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1175,7 +1202,7 @@ class rt {
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (y) => m(y, this.params.sourceDirection, p)
+      (m) => y(m, this.params.sourceDirection, p)
     ), u = [
       `M ${l[0].x} ${l[0].y}`,
       `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
@@ -1185,7 +1212,7 @@ class rt {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
   }
 }
-class st {
+class ot {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1221,27 +1248,27 @@ class st {
     };
   }
 }
-class ot {
+class it {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    const t = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: p.y },
       this.params.sourceDirection,
       p
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1262,27 +1289,27 @@ class ot {
     );
   }
 }
-class it {
+class nt {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    const t = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, 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(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: p.y },
       this.params.sourceDirection,
       p
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1329,21 +1356,21 @@ const f = Object.freeze({
 class k {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", Te());
+    o(this, "group", De());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
     o(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = be(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = be(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Se(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
       e.from,
       e.to
     );
-    De(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    Ne(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = ge(
       e.from.direction,
       a,
@@ -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,
       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 nt = (r) => (e) => {
+const at = (r) => (e) => {
   const s = [
     p,
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => m(h, e.direction, p)
+    (h) => y(h, e.direction, p)
   ).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`;
-}, at = (r) => (e) => {
+}, 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
+    (m) => y(m, e.direction, p)
+  ).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}`, 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}`;
-}, ht = (r) => (e) => {
-  const t = r.smallRadius, s = r.radius, i = m(
+}, dt = (r) => (e) => {
+  const t = r.smallRadius, s = r.radius, i = y(
     {
       x: e.arrowLength,
       y: 0
@@ -1419,7 +1446,7 @@ const nt = (r) => (e) => {
       y: 0
     }
   ), a = [p, { x: i.x, y: -i.y }, i].map(
-    (l) => m(l, e.direction, p)
+    (l) => y(l, e.direction, p)
   ).map((l) => ({
     x: l.x + e.shift.x,
     y: l.y + e.shift.y
@@ -1430,22 +1457,22 @@ const nt = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return nt({
+      return at({
         radius: r.radius ?? f.polygonArrowRadius
       });
     case "arc":
-      return at({
+      return ht({
         radius: r.radius ?? f.circleArrowRadius
       });
     default:
-      return ht({
+      return dt({
         smallRadius: r.smallRadius ?? f.wedgeArrowSmallRadius,
         angle: r.angle ?? f.wedgeArrowAngle,
         radius: r.radius ?? f.wedgeArrowRadius
       });
   }
 };
-class dt {
+class ct {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1462,7 +1489,7 @@ class dt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new rt({
+    o(this, "createCyclePath", (e) => new st({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1470,7 +1497,7 @@ class dt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Qe({
+    o(this, "createDetourPath", (e, t, s, i, n) => new qe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1483,7 +1510,7 @@ class dt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new Je({
+    o(this, "createLinePath", (e, t, s) => new Qe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1508,7 +1535,7 @@ class dt {
     this.pathShape.render(e);
   }
 }
-class ct {
+class lt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1533,7 +1560,7 @@ class ct {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new ot({
+    o(this, "createDetourPath", (e, t, s, i, n) => new it({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1546,7 +1573,7 @@ class ct {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new qe({
+    o(this, "createLinePath", (e, t, s, i) => new _e({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1579,7 +1606,7 @@ class ct {
     this.pathShape.render(e);
   }
 }
-class lt {
+class gt {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1605,7 +1632,7 @@ class lt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new _e({
+    o(this, "createDetourPath", (e, t, s, i, n) => new et({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1619,7 +1646,7 @@ class lt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new et({
+    o(this, "createLinePath", (e, t, s) => new tt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1651,7 +1678,7 @@ class lt {
     this.pathShape.render(e);
   }
 }
-class gt {
+class ut {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1676,7 +1703,7 @@ class gt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new it({
+    o(this, "createDetourPath", (e, t, s, i, n) => new nt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1689,7 +1716,7 @@ class gt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new tt({
+    o(this, "createLinePath", (e, t, s, i, n) => new rt({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1722,10 +1749,10 @@ class gt {
     this.pathShape.render(e);
   }
 }
-class Ne {
+class Me {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", Te());
+    o(this, "group", De());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -1737,15 +1764,15 @@ class Ne {
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
     o(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = x(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = be(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = x(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = I((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = be(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = O(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = O(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Se(
+    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
       e.from,
       e.to
     );
-    De(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: i, y: n }, c = new st({
+    Ne(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: i, y: n }, c = new ot({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1764,26 +1791,26 @@ class Ne {
         y: d.y / u
       };
       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);
@@ -1796,40 +1823,40 @@ class Ne {
     });
   }
 }
-const ut = () => {
+const pt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, pt = (r) => {
+}, wt = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
 }, ue = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class wt extends Error {
+class ft extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Me {
+class Le {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", ut());
+    o(this, "handle", pt());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Me)
-      throw new wt(
+    if (this.baseEdge = e, e instanceof Le)
+      throw new ft(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
     const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
-    this.interactiveLine = pt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = wt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
@@ -1837,7 +1864,7 @@ class Me {
     this.baseEdge.render(e);
   }
 }
-class Jt {
+class Qt {
   constructor(e, t) {
     o(this, "group");
     o(this, "line");
@@ -1854,7 +1881,7 @@ class Jt {
     this.baseShape.render(e);
   }
 }
-class Le {
+class Re {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -1947,7 +1974,7 @@ class Le {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class Re {
+class Ce {
   constructor(e) {
     o(this, "onAfterUpdated");
     this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
@@ -1959,14 +1986,14 @@ class Re {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-const Ce = (r, e) => {
-  const t = new Ee(), s = new Le(t), i = new Re(e), n = new me(t, e, r), a = {
+const Ve = (r, e) => {
+  const t = new Ee(), s = new Re(t), i = new Ce(e), n = new ye(t, e, r), a = {
     nodes: {
-      centerFn: xe,
+      centerFn: Se,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Ne(),
+      shapeFactory: () => new Me(),
       priorityFn: () => 0
     },
     ports: {
@@ -2279,7 +2306,7 @@ class Q {
     return e;
   }
 }
-const ft = (r, e, t) => ({
+const mt = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
@@ -2406,7 +2433,7 @@ class X {
     new X(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = ft(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,
@@ -2527,13 +2554,13 @@ class q {
     this.trigger.emit({ x: s, y: i, width: n, height: a });
   }
 }
-const mt = () => {
+const vt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, vt = () => {
+}, Et = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Et = () => {
+}, At = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2542,9 +2569,9 @@ const mt = () => {
 };
 class _ {
   constructor(e, t, s) {
-    o(this, "svg", mt());
-    o(this, "patternRenderingRectangle", vt());
-    o(this, "pattern", Et());
+    o(this, "svg", vt());
+    o(this, "patternRenderingRectangle", Et());
+    o(this, "pattern", At());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2584,7 +2611,7 @@ class ee {
     o(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ce(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ve(
       this.overlayLayer,
       this.viewportStore
     ), z.configure(
@@ -2638,9 +2665,9 @@ class ee {
       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 ? [u, w] : [w, u];
+    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)
     });
@@ -2649,7 +2676,7 @@ class ee {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = Ae(this.canvas.graph, e), s = this.staticPortId;
+    const t = xe(this.canvas.graph, e), s = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: s,
@@ -2680,7 +2707,7 @@ class te {
     o(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ce(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ve(
       this.overlayLayer,
       this.viewportStore
     ), z.configure(
@@ -2724,7 +2751,7 @@ 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, {
+    }, u = this.canvas.viewport.getViewportMatrix(), w = this.overlayLayer.getBoundingClientRect(), m = D(u, {
       x: l.x - w.x,
       y: l.y - w.y
     }), v = D(u, {
@@ -2740,7 +2767,7 @@ class te {
     }, this.canvas.removeEdge(s);
     const E = {
       overlayId: b.Static,
-      portCoords: y,
+      portCoords: m,
       portDirection: c.direction
     }, A = {
       overlayId: b.Dragging,
@@ -2770,7 +2797,7 @@ class te {
     });
   }
   tryCreateConnection(e) {
-    const t = Ae(this.canvas.graph, e);
+    const t = xe(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -2852,7 +2879,7 @@ class se {
     });
   }
 }
-class At {
+class xt {
   static configure(e, t) {
     const s = t.applyOn;
     switch (s.type) {
@@ -2874,7 +2901,7 @@ class At {
     }
   }
 }
-class xt {
+class St {
   constructor(e, t) {
     o(this, "previousTimeStamp");
     o(this, "step", (e) => {
@@ -2899,13 +2926,13 @@ class oe {
         this.staticNodes.has(i) || this.canvas.updateNode(i, { x: s.x, y: s.y });
       });
     });
-    this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = i, new xt(this.win, this.step);
+    this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = i, new St(this.win, this.step);
   }
   static configure(e, t, s, i) {
     new oe(e, t, s, i);
   }
 }
-const St = () => {
+const Pt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, H = () => {
@@ -2915,25 +2942,25 @@ const St = () => {
   const r = H();
   return r.style.pointerEvents = "none", r;
 };
-class Pt {
+class bt {
   constructor(e) {
     o(this, "background", H());
     o(this, "main", H());
     o(this, "overlayConnectablePorts", pe());
     o(this, "overlayDraggableEdges", pe());
-    o(this, "host", St());
+    o(this, "host", Pt());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const j = (r) => () => r, we = j(0), bt = () => {
+const j = (r) => () => r, we = j(0), Tt = () => {
   let r = 0;
   return () => r++;
-}, Tt = (r, e) => {
+}, Dt = (r, e) => {
   let t = we, s = we;
-  const i = bt();
+  const i = Tt();
   return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = j(r)), typeof e == "number" && (s = j(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
@@ -2943,7 +2970,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
     return r;
   switch (r.type) {
     case "straight":
-      return () => new lt({
+      return () => new gt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2957,7 +2984,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new ct({
+      return () => new lt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2970,7 +2997,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new gt({
+      return () => new ut({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2983,7 +3010,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Ne({
+      return () => new Me({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2994,7 +3021,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new dt({
+      return () => new ct({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3008,15 +3035,15 @@ const j = (r) => () => r, we = j(0), bt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, Dt = (r) => {
+}, Nt = (r) => {
   var t, s, i, n, a;
-  const e = Tt(
+  const e = Dt(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? xe,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? Se,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
@@ -3027,11 +3054,11 @@ const j = (r) => () => r, we = j(0), bt = () => {
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Nt = (r) => {
-  var u, w, y, v, E;
+}, Mt = (r) => {
+  var u, w, m, 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;
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (m = r.mouse) == null ? void 0 : m.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;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
@@ -3043,7 +3070,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
     nodeDragVerifier: t,
     onNodeDragFinished: s
   };
-}, Mt = (r) => {
+}, 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;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
@@ -3053,7 +3080,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
     const g = n.canvasHeight * n.prevTransform.scale, l = i - g;
     return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, Lt = (r) => {
+}, Rt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -3074,7 +3101,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
       y: g
     };
   };
-}, Rt = (r) => (e) => r.reduce(
+}, Ct = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3087,23 +3114,23 @@ const j = (r) => () => r, we = j(0), bt = () => {
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Lt({
+      return Rt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Mt({
+      return Lt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         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, R, T, N, $, 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 = Rt(
+  s !== void 0 ? Array.isArray(s) ? i = Ct(
     s.map(
       (M) => fe(M)
     )
@@ -3130,24 +3157,24 @@ const j = (r) => () => r, we = j(0), bt = () => {
     onResizeTransformFinished: ((de = r == null ? void 0 : r.events) == null ? void 0 : de.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Ct = (r, e) => {
+}, Vt = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, Vt = (r) => r instanceof SVGElement ? r : Ct(
+}, $t = (r) => r instanceof SVGElement ? r : Vt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), $t = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = Vt(r.renderer ?? {});
+), It = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = $t(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, It = (r, e, t) => {
+}, Ut = (r, e, t) => {
   var c, g, l;
   const s = () => "direct", i = (u) => u, n = (u) => u.button === 0, a = () => {
   }, h = () => {
@@ -3164,7 +3191,7 @@ const j = (r) => () => r, we = j(0), bt = () => {
     dragPortDirection: r.dragPortDirection ?? t,
     edgeShapeFactory: r.edgeShape !== void 0 ? ie(r.edgeShape) : e
   };
-}, Ut = (r, e) => {
+}, 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);
@@ -3183,10 +3210,10 @@ const j = (r) => () => r, we = j(0), bt = () => {
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
   };
-}, Bt = (r) => ({
+}, Ft = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), Ft = (r) => {
+}), Ot = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3195,13 +3222,13 @@ const j = (r) => () => r, we = j(0), bt = () => {
     })
   };
 };
-class Ot extends Error {
+class Wt extends Error {
   constructor() {
     super(...arguments);
     o(this, "name", "CanvasBuilderError");
   }
 }
-class Wt {
+class kt {
   constructor(e, t) {
     this.coordinates = e, this.rand = t;
   }
@@ -3215,7 +3242,7 @@ class Wt {
     return { ex: c, ey: g, d2: h, d };
   }
 }
-class Ve {
+class $e {
   constructor(e, t, s) {
     o(this, "dtSec");
     o(this, "k");
@@ -3231,7 +3258,7 @@ class Ve {
     s.forEach((a) => {
       t.set(a, { x: 0, y: 0 });
     });
-    const i = new Wt(
+    const i = new kt(
       this.currentCoords,
       this.params.rand
     ), n = s.length;
@@ -3241,13 +3268,13 @@ class Ve {
         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, u = l * g.ex, w = l * g.ey, m = u / 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), u = (g.d - this.edgeEquilibriumLength) * this.edgeStiffness / 2, w = g.ex * u, m = g.ey * u, 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,
@@ -3257,7 +3284,7 @@ class Ve {
     }), e;
   }
 }
-const $e = (r, e, t) => {
+const Ie = (r, e, t) => {
   const s = /* @__PURE__ */ new Map(), i = r.getAllNodeIds(), n = Math.sqrt(i.length) * t;
   return i.forEach((a) => {
     const h = r.getNode(a);
@@ -3267,17 +3294,17 @@ const $e = (r, e, t) => {
     });
   }), s;
 };
-class kt {
+class zt {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = $e(
+    const t = Ie(
       e,
       this.params.rand,
       this.params.edgeEquilibriumLength
     );
-    for (let s = 0; s < this.params.maxIterations && !(new Ve(e, t, {
+    for (let s = 0; s < this.params.maxIterations && !(new $e(e, t, {
       rand: this.params.rand,
       dtSec: this.params.dtSec,
       nodeMass: this.params.nodeMass,
@@ -3290,17 +3317,17 @@ class kt {
     return t;
   }
 }
-class zt {
+class Xt {
   constructor(e) {
     this.params = e;
   }
   calculateNextCoordinates(e, t) {
-    const s = $e(
+    const s = Ie(
       e,
       this.params.rand,
       this.params.edgeEquilibriumLength
     );
-    return new Ve(e, s, {
+    return new $e(e, s, {
       rand: this.params.rand,
       dtSec: Math.min(t, this.params.maxTimeDeltaSec),
       nodeMass: this.params.nodeMass,
@@ -3314,12 +3341,12 @@ class zt {
     }) ? /* @__PURE__ */ new Map() : s;
   }
 }
-const Ie = (r) => {
+const Ue = (r) => {
   let e = 1779033703, t = 3144134277, s = 1013904242, i = 2773480762;
   for (let n = 0, a; n < r.length; n++)
     a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = s ^ Math.imul(t ^ a, 2869860233), s = i ^ Math.imul(s ^ a, 951274213), i = e ^ Math.imul(i ^ a, 2716044179);
   return e = Math.imul(s ^ e >>> 18, 597399067), t = Math.imul(i ^ t >>> 22, 2869860233), s = Math.imul(e ^ s >>> 17, 951274213), i = Math.imul(t ^ i >>> 19, 2716044179), e ^= t ^ s ^ i, t ^= e, s ^= e, i ^= e, [e >>> 0, t >>> 0, s >>> 0, i >>> 0];
-}, Ue = (r, e, t, s) => function() {
+}, Be = (r, e, t, s) => function() {
   r |= 0, e |= 0, t |= 0, s |= 0;
   const i = (r + e | 0) + s | 0;
   return s = s + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + i | 0, (i >>> 0) / 4294967296;
@@ -3334,14 +3361,14 @@ const Ie = (r) => {
   dtSec: 0.02,
   maxIterations: 100,
   convergenceDelta: 1e-3
-}), Xt = (r) => {
+}), Yt = (r) => {
   var e;
   switch ((e = r == null ? void 0 : r.algorithm) == null ? void 0 : e.type) {
     case "custom":
       return r.algorithm.instance;
     default: {
-      const t = r == null ? void 0 : r.algorithm, s = Ie((t == null ? void 0 : t.seed) ?? S.seed), i = Ue(s[0], s[1], s[2], s[3]);
-      return new zt({
+      const t = r == null ? void 0 : r.algorithm, s = Ue((t == null ? void 0 : t.seed) ?? S.seed), i = Be(s[0], s[1], s[2], s[3]);
+      return new Xt({
         rand: i,
         maxTimeDeltaSec: (t == null ? void 0 : t.maxTimeDeltaSec) ?? S.maxTimeDeltaSec,
         nodeCharge: (t == null ? void 0 : t.nodeCharge) ?? S.nodeCharge,
@@ -3353,18 +3380,18 @@ const Ie = (r) => {
       });
     }
   }
-}, Yt = (r) => r instanceof G ? {
+}, Ht = (r) => r instanceof G ? {
   type: "manual",
   trigger: r
 } : {
   type: "topologyChangeTimeout"
-}, Ht = (r) => {
+}, jt = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const e = Ie((r == null ? void 0 : r.seed) ?? S.seed), t = Ue(e[0], e[1], e[2], e[3]);
-      return new kt({
+      const e = Ue((r == null ? void 0 : r.seed) ?? S.seed), t = Be(e[0], e[1], e[2], e[3]);
+      return new zt({
         dtSec: (r == null ? void 0 : r.dtSec) ?? S.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? S.maxIterations,
         rand: t,
@@ -3377,23 +3404,23 @@ const Ie = (r) => {
       });
     }
   }
-}, jt = (r) => ({
-  algorithm: Ht(r == null ? void 0 : r.algorithm),
-  applyOn: Yt(r == null ? void 0 : r.applyOn)
-}), Gt = (r, e) => ({
+}, Gt = (r) => ({
+  algorithm: jt(r == null ? void 0 : r.algorithm),
+  applyOn: Ht(r == null ? void 0 : r.applyOn)
+}), Kt = (r, e) => ({
   ...r,
   nodeDragVerifier: (t) => (e.add(t), r.nodeDragVerifier(t)),
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Kt = (r, e) => {
+}), Zt = (r, e) => {
   r.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.onBeforeClear.subscribe(() => {
     e.clear();
   });
 };
-class Qt {
+class qt {
   constructor(e) {
     o(this, "used", !1);
     o(this, "canvasDefaults", {});
@@ -3403,8 +3430,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);
@@ -3415,9 +3442,9 @@ class Qt {
     o(this, "hasLayout", !1);
     o(this, "boxRenderingTrigger", new G());
     o(this, "graphStore", new Ee());
-    o(this, "viewportStore", new je());
-    o(this, "graph", new Le(this.graphStore));
-    o(this, "viewport", new Re(this.viewportStore));
+    o(this, "viewportStore", new Ge());
+    o(this, "graph", new Re(this.graphStore));
+    o(this, "viewport", new Ce(this.viewportStore));
     o(this, "window", window);
     o(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     this.element = e;
@@ -3475,34 +3502,34 @@ 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
    */
   build() {
     if (this.used)
-      throw new Ot("CanvasBuilder is a single use object");
+      throw new Wt("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Pt(this.element);
-    let t = new me(
+    const e = new bt(this.element);
+    let t = new ye(
       this.graphStore,
       this.viewportStore,
       e.main
     );
-    this.virtualScrollConfig !== void 0 && (t = new Xe(
+    this.virtualScrollConfig !== void 0 && (t = new Ye(
       t,
       this.graphStore,
       this.boxRenderingTrigger,
-      Ft(this.virtualScrollConfig)
-    )), t = new Ye(t, this.graphStore);
-    const s = Dt(this.canvasDefaults), i = new ve(
+      Ot(this.virtualScrollConfig)
+    )), t = new He(t, this.graphStore);
+    const s = Nt(this.canvasDefaults), i = new ve(
       this.graph,
       this.viewport,
       this.graphStore,
@@ -3512,11 +3539,11 @@ class Qt {
     );
     if (this.hasBackground && _.configure(
       i,
-      $t(this.backgroundConfig),
+      It(this.backgroundConfig),
       e.background
     ), this.hasNodeResizeReactiveEdges && K.configure(i), this.hasDraggableNodes) {
-      let a = Nt(this.dragConfig);
-      this.hasAnimatedLayout && (a = Gt(
+      let a = Mt(this.dragConfig);
+      this.hasAnimatedLayout && (a = Kt(
         a,
         this.animationStaticNodes
       )), Q.configure(
@@ -3527,7 +3554,7 @@ class Qt {
       );
     }
     if (this.hasUserConnectablePorts) {
-      const a = It(
+      const a = Ut(
         this.connectablePortsConfig,
         s.edges.shapeFactory,
         s.ports.direction
@@ -3541,7 +3568,7 @@ class Qt {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const a = Ut(
+      const a = Bt(
         this.draggableEdgesConfig,
         i.graph
       );
@@ -3557,23 +3584,23 @@ class Qt {
       i,
       e.main,
       this.window,
-      ye(this.transformConfig),
+      me(this.transformConfig),
       this.boxRenderingTrigger,
-      Bt(this.virtualScrollConfig)
+      Ft(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && X.configure(
       i,
       e.main,
       this.window,
-      ye(this.transformConfig)
-    ), this.hasLayout && At.configure(
+      me(this.transformConfig)
+    ), this.hasLayout && xt.configure(
       i,
-      jt(this.layoutConfig)
-    ), this.hasAnimatedLayout && (Kt(
+      Gt(this.layoutConfig)
+    ), this.hasAnimatedLayout && (Zt(
       i.graph,
       this.animationStaticNodes
     ), oe.configure(
       i,
-      Xt(this.animatedLayoutConfig),
+      Yt(this.animatedLayoutConfig),
       this.animationStaticNodes,
       this.window
     ));
@@ -3584,16 +3611,16 @@ class Qt {
   }
 }
 export {
-  dt as BezierEdgeShape,
-  Qt as CanvasBuilder,
-  Ot as CanvasBuilderError,
+  ct as BezierEdgeShape,
+  qt as CanvasBuilder,
+  Wt as CanvasBuilderError,
   P as CanvasError,
-  Ne as DirectEdgeShape,
+  Me as DirectEdgeShape,
   G as EventSubject,
-  ct as HorizontalEdgeShape,
-  wt as InteractiveEdgeError,
-  Me as InteractiveEdgeShape,
-  Jt as MidpointEdgeShape,
-  lt as StraightEdgeShape,
-  gt as VerticalEdgeShape
+  lt as HorizontalEdgeShape,
+  ft as InteractiveEdgeError,
+  Le as InteractiveEdgeShape,
+  Qt as MidpointEdgeShape,
+  gt as StraightEdgeShape,
+  ut as VerticalEdgeShape
 };