@html-graph/html-graph 8.20.0 → 8.21.1

package/dist/html-graph.min.js

@@ -1,22 +1,22 @@
-var ht = Object.defineProperty;
-var dt = (r, e, t) => e in r ? ht(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => dt(r, typeof e != "symbol" ? e + "" : e, t);
+var ct = Object.defineProperty;
+var lt = (r, e, t) => e in r ? ct(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => lt(r, typeof e != "symbol" ? e + "" : e, t);
 var U = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(U || {});
-const ct = () => {
+const ut = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, lt = () => {
+}, gt = () => {
   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;
-}, ut = (r) => {
+}, pt = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, gt = (r) => {
+}, wt = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class Fe {
+class $e {
   constructor(e, t, o) {
-    i(this, "host", ct());
-    i(this, "container", lt());
+    i(this, "host", ut());
+    i(this, "container", gt());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     i(this, "applyTransform", () => {
@@ -27,11 +27,11 @@ class Fe {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    ut(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    pt(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);
-    gt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    wt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -93,7 +93,7 @@ class Fe {
     };
   }
 }
-class pt {
+class yt {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -113,7 +113,7 @@ class pt {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && u >= this.yFrom;
   }
 }
-class wt {
+class ft {
   constructor(e, t, o, s) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -137,7 +137,7 @@ class wt {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new pt(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new yt(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -191,7 +191,7 @@ class wt {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class yt {
+class vt {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -245,7 +245,7 @@ class yt {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class q {
+class te {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -262,10 +262,10 @@ class q {
   }
 }
 const C = () => {
-  const r = new q();
+  const r = new te();
   return [r, r];
 };
-class Ue {
+class Be {
   constructor(e, t, o, s) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
@@ -318,7 +318,7 @@ class Ue {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class ft {
+class mt {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -387,7 +387,7 @@ const b = Object.freeze({
   removeNonexistentEdge: (r) => `Failed to remove edge with ID ${JSON.stringify(r)} because it does not exist`,
   accessEdgesForNonexistentPort: (r) => `Failed to access edges for port with ID ${JSON.stringify(r)} because the port does not exist`
 });
-class $e {
+class Oe {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -396,7 +396,7 @@ class $e {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new ft());
+    i(this, "elementPorts", new mt());
     i(this, "edgesElementsMap", /* @__PURE__ */ new Map());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
@@ -682,22 +682,22 @@ class $e {
     this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(o).delete(e), this.edges.delete(e), this.edgesElementsMap.delete(s.shape.svg);
   }
 }
-const me = (r) => ({
+const Ee = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), xe = {
+}), Ae = {
   scale: 1,
   x: 0,
   y: 0
-}, Ee = (r, e) => ({
+}, Se = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class vt {
+class xt {
   constructor(e) {
-    i(this, "viewportMatrix", xe);
-    i(this, "contentMatrix", xe);
+    i(this, "viewportMatrix", Ae);
+    i(this, "contentMatrix", Ae);
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
@@ -720,30 +720,30 @@ class vt {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = me(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = Ee(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = me(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = Ee(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
   getDimensions() {
     const { width: e, height: t } = this.host.getBoundingClientRect();
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return Ee(this.viewportMatrix, e);
+    return Se(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return Ee(this.contentMatrix, e);
+    return Se(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
   }
 }
-class ee {
+class re {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -769,28 +769,28 @@ class ee {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e) {
-    new ee(e);
+    new re(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const mt = (r, e, t) => {
+const Et = (r, e, t) => {
   const { x: o, y: s, width: n, height: a } = r.getBoundingClientRect();
   return e >= o && e <= o + n && t >= s && t <= s + a;
-}, xt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
-class Et {
+}, At = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
+class St {
   constructor(e, t) {
     this.element = e, this.win = t;
   }
   verify(e, t) {
-    return mt(this.element, e, t) && xt(this.win, e, t);
+    return Et(this.element, e, t) && At(this.win, e, t);
   }
 }
-const H = (r, e) => {
+const X = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, Y = (r) => {
+}, G = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -805,7 +805,7 @@ const H = (r, e) => {
       }
     ]
   };
-}, At = (r, e) => {
+}, bt = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const o = r.findPortIdsByElement(t)[0] ?? null;
@@ -824,21 +824,21 @@ const H = (r, e) => {
     status: "notFound"
   };
 };
-function* Be(r, e) {
+function* We(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const o of t) {
     if (o.shadowRoot !== null) {
-      const s = Be(o.shadowRoot, e);
+      const s = We(o.shadowRoot, e);
       for (const n of s)
         yield n;
     }
     yield o;
   }
 }
-const Oe = (r, e) => {
-  const t = Be(document, e);
+const ze = (r, e) => {
+  const t = We(document, e);
   for (const o of t) {
-    const s = At(r, o);
+    const s = bt(r, o);
     if (s.status === "portFound")
       return s.portId;
     if (s.status === "nodeEncountered")
@@ -847,13 +847,13 @@ const Oe = (r, e) => {
   return null;
 };
 var R = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(R || {});
-const We = (r, e) => ({
+const ke = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), x = (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)
-}), ze = (r, e, t) => {
+}), He = (r, e, t) => {
   const o = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -869,8 +869,8 @@ const We = (r, e) => ({
     from: { x: o.x - n, y: o.y - a },
     to: { x: s.x - n, y: s.y - a }
   };
-};
-class St {
+}, B = 0.5 * 0.5 * 0.5, z = 3 * B;
+class Pt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -883,27 +883,27 @@ class St {
       curvature: h,
       hasSourceArrow: d,
       hasTargetArrow: c
-    } = e, u = (t.x + o.x) / 2, l = (t.y + o.y) / 2;
-    this.midpoint = { x: u, y: l };
-    const g = x(
+    } = e, u = x(
       { x: t.x + s, y: t.y },
       n,
       t
-    ), p = x(
+    ), l = x(
       { x: o.x - s, y: o.y },
       a,
       o
-    ), w = {
-      x: g.x + n.x * h,
-      y: g.y + n.y * h
-    }, y = {
-      x: p.x - a.x * h,
-      y: p.y - a.y * h
-    }, f = `M ${g.x} ${g.y} C ${w.x} ${w.y}, ${y.x} ${y.y}, ${p.x} ${p.y}`, m = d ? "" : `M ${t.x} ${t.y} L ${g.x} ${g.y} `, E = c ? "" : ` M ${p.x} ${p.y} L ${o.x} ${o.y}`;
+    ), g = {
+      x: u.x + n.x * h,
+      y: u.y + n.y * h
+    }, p = {
+      x: l.x - a.x * h,
+      y: l.y - a.y * h
+    }, w = B * u.x + z * g.x + z * p.x + B * l.x, y = B * u.y + z * g.y + z * p.y + B * l.y;
+    this.midpoint = { x: w, y };
+    const f = `M ${u.x} ${u.y} C ${g.x} ${g.y}, ${p.x} ${p.y}, ${l.x} ${l.y}`, m = d ? "" : `M ${t.x} ${t.y} L ${u.x} ${u.y} `, E = c ? "" : ` M ${l.x} ${l.y} L ${o.x} ${o.y}`;
     this.path = `${m}${f}${E}`;
   }
 }
-class bt {
+class Nt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -968,18 +968,18 @@ class bt {
     ].join(" "), this.midpoint = T;
   }
 }
-const te = Object.freeze({
+const oe = Object.freeze({
   edgeColor: "--edge-color"
-}), ke = (r) => {
+}), Ye = (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(te.edgeColor, r), e;
-}, He = (r) => {
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(oe.edgeColor, r), e;
+}, Xe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${te.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, X = () => {
+  return e.setAttribute("stroke", `var(${oe.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, j = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${te.edgeColor})`), r;
-}, Ye = (r, e) => {
+  return r.setAttribute("fill", `var(${oe.edgeColor})`), r;
+}, Ge = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`;
 }, F = (r, e) => {
   const t = [];
@@ -1000,7 +1000,7 @@ const te = Object.freeze({
     });
   }
   return t.join(" ");
-}, Pt = (r, e) => {
+}, Ct = (r, e) => {
   const t = r.linePoint, o = e.linePoint, s = o.x - t.x >= 0, n = r.dirX >= 0, a = e.dirX >= 0;
   if (n === a) {
     const l = n === s, g = (t.x + o.x) / 2, p = (t.y + o.y) / 2, w = { x: g, y: p };
@@ -1038,7 +1038,7 @@ const te = Object.freeze({
     midpoint: { x: u.x, y: c }
   };
 };
-class Nt {
+class Tt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1060,14 +1060,14 @@ class Nt {
       { x: t.x + p, y: t.y },
       s,
       t
-    ), y = x({ x: o.x - p, y: o.y }, n, o), f = Pt(
+    ), y = x({ x: o.x - p, y: o.y }, n, o), f = Ct(
       { arrowPoint: l, linePoint: w, dirX: s.x },
       { arrowPoint: g, linePoint: y, dirX: n.x }
     );
     this.path = F(f.points, d), this.midpoint = f.midpoint;
   }
 }
-class Ct {
+class Mt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1118,7 +1118,7 @@ class Ct {
     );
   }
 }
-class Tt {
+class Dt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1160,7 +1160,7 @@ class Tt {
     return x(n, t, o);
   }
 }
-const Mt = (r, e) => {
+const Rt = (r, e) => {
   const t = r.linePoint, o = e.linePoint, s = o.y - t.y >= 0, n = r.dirY >= 0, a = e.dirY >= 0;
   if (n === a) {
     const l = n === s, g = (t.x + o.x) / 2, p = (t.y + o.y) / 2, w = { x: g, y: p };
@@ -1198,7 +1198,7 @@ const Mt = (r, e) => {
     midpoint: { x: c, y: u.y }
   };
 };
-class Dt {
+class Lt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1220,14 +1220,14 @@ class Dt {
       { x: t.x + p, y: t.y },
       d,
       t
-    ), y = x({ x: o.x - p, y: o.y }, c, o), f = Mt(
+    ), y = x({ x: o.x - p, y: o.y }, c, o), f = Rt(
       { arrowPoint: l, linePoint: w, dirY: d.y },
       { arrowPoint: g, linePoint: y, dirY: c.y }
     );
     this.path = F(f.points, u), this.midpoint = f.midpoint;
   }
 }
-class re {
+class se {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1244,7 +1244,7 @@ class re {
     this.path = `${h ? "" : g}${F(l, e.roundness)}`, this.midpoint = { x: (l[3].x + l[4].x) / 2, y: (l[3].y + l[4].y) / 2 };
   }
 }
-class Rt {
+class Vt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1262,11 +1262,11 @@ class Rt {
     this.path = `${h ? "" : m}${f}`, this.midpoint = y[3];
   }
 }
-const Lt = (r, e, t) => {
+const It = (r, e, t) => {
   const o = Math.max(r.y, e.y), s = Math.min(r.y, e.y);
   return (t >= 0 ? o : s) + t;
 };
-class Vt {
+class Ft {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1300,7 +1300,7 @@ class Vt {
       { x: a.x - w, y: a.y },
       d,
       a
-    ), m = Lt(y, f, l);
+    ), m = It(y, f, l);
     this.midpoint = {
       x: (y.x + f.x) / 2,
       y: m
@@ -1317,11 +1317,11 @@ class Vt {
     );
   }
 }
-const It = (r, e, t) => {
+const Ut = (r, e, t) => {
   const o = Math.max(r.x, e.x), s = Math.min(r.x, e.x);
   return (t >= 0 ? o : s) + t;
 };
-class Ft {
+class $t {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1355,7 +1355,7 @@ class Ft {
       { x: d.x - w, y: d.y },
       a,
       d
-    ), m = It(y, f, u);
+    ), m = Ut(y, f, u);
     this.midpoint = {
       x: m,
       y: (y.y + f.y) / 2
@@ -1394,8 +1394,8 @@ const v = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   portOffset: 0
-}), Ae = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
-class G {
+}), be = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
+class J {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1408,16 +1408,16 @@ class G {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = C(), this.arrowRenderer = this.params.arrowRenderer, this.svg = ke(e.color), this.svg.appendChild(this.group), this.line = He(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = C(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ye(e.color), this.svg.appendChild(this.group), this.line = Xe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = j(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = j(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = ze(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = He(
       e.from,
       e.to,
       this.params.padding
     );
-    Ye(this.svg, { x: t, y: o, width: s, height: n });
-    const d = Ae(e.from.direction), c = Ae(e.to.direction);
+    Ge(this.svg, { x: t, y: o, width: s, height: n });
+    const d = be(e.from.direction), c = be(e.to.direction);
     let u = { x: -c.x, y: -c.y }, l;
     e.category === U.PortCycle ? (l = this.params.createCyclePath, u = d) : e.category === U.NodeCycle ? l = this.params.createDetourPath : l = this.params.createLinePath;
     const g = l(a, h, d, c);
@@ -1440,7 +1440,7 @@ class G {
     });
   }
 }
-const Ut = (r) => (e) => {
+const Bt = (r) => (e) => {
   const o = [
     { x: 0, y: 0 },
     { x: e.arrowLength, y: r.radius },
@@ -1452,7 +1452,7 @@ const Ut = (r) => (e) => {
     y: h.y + e.shift.y
   })), s = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
   return `${s} ${n} ${a} Z`;
-}, $t = (r) => (e) => {
+}, Ot = (r) => (e) => {
   const t = r.radius, o = e.arrowLength, s = (o * o + 2 * o * t) / (2 * t), n = s + t, a = o + t - t * (o + t) / n, h = t * s / n, c = [
     { x: 0, y: 0 },
     { x: a, y: -h },
@@ -1464,7 +1464,7 @@ const Ut = (r) => (e) => {
     y: w.y + e.shift.y
   })), u = `M ${c[0].x} ${c[0].y}`, l = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, g = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, p = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
   return `${u} ${l} ${g} ${p}`;
-}, Bt = (r) => (e) => {
+}, Wt = (r) => (e) => {
   const t = r.smallRadius, o = r.radius, s = x(
     {
       x: e.arrowLength,
@@ -1485,27 +1485,27 @@ const Ut = (r) => (e) => {
     y: l.y + e.shift.y
   })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, u = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
   return `${h} ${d} ${c} ${u}`;
-}, B = (r) => {
+}, O = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "triangle":
-      return Ut({
+      return Bt({
         radius: r.radius ?? v.polygonArrowRadius
       });
     case "arc":
-      return $t({
+      return Ot({
         radius: r.radius ?? v.circleArrowRadius
       });
     default:
-      return Bt({
+      return Wt({
         smallRadius: r.smallRadius ?? v.wedgeArrowSmallRadius,
         angle: r.angle ?? v.wedgeArrowAngle,
         radius: r.radius ?? v.wedgeArrowRadius
       });
   }
-}, O = 50;
-class Ot {
+}, W = 50;
+class zt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1522,7 +1522,7 @@ class Ot {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new Rt({
+    i(this, "createCyclePath", (e, t, o) => new Vt({
       origin: e,
       dir: o,
       radius: this.portCycleRadius,
@@ -1530,7 +1530,7 @@ class Ot {
       arrowLength: this.arrowLength,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new bt({
+    i(this, "createDetourPath", (e, t, o, s) => new Nt({
       from: e,
       to: t,
       fromDir: o,
@@ -1542,7 +1542,7 @@ class Ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new St({
+    i(this, "createLinePath", (e, t, o, s) => new Pt({
       from: e,
       to: t,
       fromDir: o,
@@ -1552,25 +1552,25 @@ class Ot {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? v.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? v.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? v.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? v.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? v.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? v.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new J({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: O((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
     this.pathShape.render(e);
   }
 }
-const Se = (r) => Math.cos(r) > 0 ? 0 : Math.PI;
-class Wt {
+const Pe = (r) => Math.cos(r) > 0 ? 0 : Math.PI;
+class kt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1586,7 +1586,7 @@ class Wt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new re({
+    i(this, "createCyclePath", (e, t, o) => new se({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1595,7 +1595,7 @@ class Wt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Vt({
+    i(this, "createDetourPath", (e, t, o, s) => new Ft({
       from: e,
       to: t,
       fromDir: o,
@@ -1607,7 +1607,7 @@ class Wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new Nt({
+    i(this, "createLinePath", (e, t, o, s) => new Tt({
       from: e,
       to: t,
       fromDir: o,
@@ -1624,17 +1624,17 @@ class Wt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new J({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: O((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
@@ -1643,16 +1643,16 @@ class Wt {
       category: s,
       from: {
         ...t,
-        direction: Se(t.direction)
+        direction: Pe(t.direction)
       },
       to: {
         ...o,
-        direction: Se(o.direction)
+        direction: Pe(o.direction)
       }
     });
   }
 }
-class zt {
+class Ht {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1669,7 +1669,7 @@ class zt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new re({
+    i(this, "createCyclePath", (e, t, o) => new se({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1678,7 +1678,7 @@ class zt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Ct({
+    i(this, "createDetourPath", (e, t, o, s) => new Mt({
       from: e,
       to: t,
       fromDir: o,
@@ -1691,7 +1691,7 @@ class zt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new Tt({
+    i(this, "createLinePath", (e, t, o, s) => new Dt({
       from: e,
       to: t,
       fromDir: o,
@@ -1708,25 +1708,25 @@ class zt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new J({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: O((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
     this.pathShape.render(e);
   }
 }
-const be = Math.PI / 2, Pe = (r) => Math.sin(r) > 0 ? be : -be;
-class kt {
+const Ne = Math.PI / 2, Ce = (r) => Math.sin(r) > 0 ? Ne : -Ne;
+class Yt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1742,7 +1742,7 @@ class kt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new re({
+    i(this, "createCyclePath", (e, t, o) => new se({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1751,7 +1751,7 @@ class kt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Ft({
+    i(this, "createDetourPath", (e, t, o, s) => new $t({
       from: e,
       to: t,
       fromDir: o,
@@ -1763,7 +1763,7 @@ class kt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new Dt({
+    i(this, "createLinePath", (e, t, o, s) => new Lt({
       from: e,
       to: t,
       fromDir: o,
@@ -1780,17 +1780,17 @@ class kt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new J({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: O((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
@@ -1799,17 +1799,20 @@ class kt {
       category: s,
       from: {
         ...t,
-        direction: Pe(t.direction)
+        direction: Ce(t.direction)
       },
       to: {
         ...o,
-        direction: Pe(o.direction)
+        direction: Ce(o.direction)
       }
     });
   }
 }
-const Ne = (r) => typeof r == "number" ? () => r : r, Ce = v.portOffset;
-class Xe {
+const Xt = (r) => {
+  const { direction: e, radius: t } = r, { x: o, y: s } = e, { horizontal: n, vertical: a } = t, h = s / o, d = Math.abs(a / h), c = Math.abs(n * h), u = Math.min(n, d), l = Math.min(a, c);
+  return Math.sqrt(u * u + l * l);
+}, Te = (r) => typeof r == "number" ? () => r : r === "box" ? Xt : r, Me = v.portOffset;
+class je {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1827,19 +1830,19 @@ class Xe {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = C(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = B((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffsetFn = Ne(
-      (e == null ? void 0 : e.sourceOffset) ?? Ce
-    ), this.targetOffsetFn = Ne(
-      (e == null ? void 0 : e.targetOffset) ?? Ce
-    ), this.svg = ke(this.color), this.svg.appendChild(this.group), this.line = He(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = C(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = O((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffsetFn = Te(
+      (e == null ? void 0 : e.sourceOffset) ?? Me
+    ), this.targetOffsetFn = Te(
+      (e == null ? void 0 : e.targetOffset) ?? Me
+    ), this.svg = Ye(this.color), this.svg.appendChild(this.group), this.line = Xe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = j(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = j(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = ze(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = He(
       e.from,
       e.to,
-      O
+      W
     );
-    Ye(this.svg, { x: t, y: o, width: s, height: n });
+    Ge(this.svg, { x: t, y: o, width: s, height: n });
     const d = h.x - a.x, c = h.y - a.y, u = Math.sqrt(d * d + c * c);
     if (u === 0) {
       this.renderEmpty(a);
@@ -1916,25 +1919,22 @@ class Xe {
     });
   }
 }
-const _r = (r) => {
-  const { direction: e, radius: t } = r, { x: o, y: s } = e, { horizontal: n, vertical: a } = t, h = s / o, d = Math.abs(a / h), c = Math.abs(n * h), u = Math.min(n, d), l = Math.min(a, c);
-  return Math.sqrt(u * u + l * l);
-}, Ht = () => {
+const Gt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, Yt = (r) => {
+}, jt = (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;
-}, Te = (r) => {
+}, De = (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 Xt extends Error {
+class Jt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Ge {
+class Je {
   constructor(e, t) {
     i(this, "svg");
     i(this, "group");
@@ -1946,18 +1946,18 @@ class Ge {
      * @deprecated
      * use shape.svg instead
      */
-    i(this, "handle", Ht());
+    i(this, "handle", Gt());
     i(this, "onAfterRender");
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Ge)
-      throw new Xt(
+    if (this.baseEdge = e, e instanceof Je)
+      throw new Jt(
         "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 o = (t == null ? void 0 : t.distance) ?? v.interactiveWidth;
-    this.interactiveLine = Yt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Te(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Te(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
+    this.interactiveLine = jt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = De(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = De(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
       this.interactiveLine.setAttribute("d", s.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", s.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", s.targetArrowPath);
     });
   }
@@ -1965,7 +1965,7 @@ class Ge {
     this.baseEdge.render(e);
   }
 }
-class qr {
+class to {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -1982,7 +1982,7 @@ class qr {
     this.baseShape.render(e);
   }
 }
-class je {
+class Ke {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -2081,7 +2081,7 @@ class je {
     return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class K {
+class Z {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -2097,15 +2097,15 @@ class K {
     this.counter = 0;
   }
 }
-class Je {
+class Qe {
   constructor(e, t, o) {
-    i(this, "nodeIdGenerator", new K(
+    i(this, "nodeIdGenerator", new Z(
       (e) => this.graphStore.hasNode(e)
     ));
-    i(this, "portIdGenerator", new K(
+    i(this, "portIdGenerator", new Z(
       (e) => this.graphStore.hasPort(e)
     ));
-    i(this, "edgeIdGenerator", new K(
+    i(this, "edgeIdGenerator", new Z(
       (e) => this.graphStore.hasEdge(e)
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -2228,18 +2228,18 @@ class Je {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const Gt = (r) => {
+const Kt = (r) => {
   setTimeout(() => {
     r();
   });
-}, Me = (r) => {
+}, Re = (r) => {
   queueMicrotask(() => {
     r();
   });
-}, oe = (r) => {
+}, ie = (r) => {
   r();
 };
-class Ke {
+class Ze {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
@@ -2262,7 +2262,7 @@ class Ke {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const jt = (r, e) => Symbol.iterator in r ? {
+const Qt = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
   contentPadding: e.focus.contentPadding,
@@ -2272,16 +2272,16 @@ const jt = (r, e) => Symbol.iterator in r ? {
   nodes: r.nodes ?? [],
   contentPadding: r.contentPadding ?? r.contentOffset ?? e.focus.contentPadding,
   animationDuration: r.animationDuration ?? e.focus.animationDuration
-}, Qe = (r, e, t) => ({
+}, _e = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Ze = (r, e, t, o) => ({
+}), qe = (r, e, t, o) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * o + r.y
 });
-class _e {
+class et {
   constructor(e, t, o, s) {
     this.graphStore = e, this.viewportStore = t, this.params = o, this.win = s;
   }
@@ -2293,11 +2293,11 @@ class _e {
   }
   center(e, t) {
     const { width: o, height: s } = this.viewportStore.getDimensions(), n = { x: o / 2, y: s / 2 }, a = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - n.x, c = h.y - n.y;
-    let u = Qe(a, d, c);
+    let u = _e(a, d, c);
     const l = t == null ? void 0 : t.contentScale;
     if (l !== void 0) {
       const p = 1 / l;
-      u = Ze(
+      u = qe(
         u,
         p / a.scale,
         n.x,
@@ -2308,7 +2308,7 @@ class _e {
     g > 0 ? this.animateNavigation(a, u, g) : this.viewportStore.patchViewportMatrix(u);
   }
   focus(e) {
-    const t = jt(e ?? {}, this.params);
+    const t = Qt(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2357,20 +2357,20 @@ class _e {
     this.win.requestAnimationFrame(a);
   }
 }
-const qe = (r, e, t) => {
-  const o = new $e(), s = new je(o), n = new Ke(e), a = new Fe(o, e, r), h = {
+const tt = (r, e, t) => {
+  const o = new Oe(), s = new Ke(o), n = new Ze(e), a = new $e(o, e, r), h = {
     nodes: {
-      centerFn: We,
+      centerFn: ke,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Xe(),
+      shapeFactory: () => new je(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
-  }, d = new Je(
+  }, d = new Qe(
     o,
     a,
     h
@@ -2378,18 +2378,18 @@ const qe = (r, e, t) => {
     focus: {
       contentPadding: 0,
       minContentScale: 0,
-      schedule: oe,
+      schedule: ie,
       animationDuration: 0
     }
-  }, u = new _e(
+  }, u = new et(
     o,
     e,
     c,
     t
   );
-  return new Ue(s, n, d, u);
+  return new Be(s, n, d, u);
 };
-class j {
+class K {
   constructor(e, t, o, s) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2470,7 +2470,7 @@ class j {
     this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.params = s, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s) {
-    new j(e, t, o, s);
+    new K(e, t, o, s);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2489,7 +2489,7 @@ class j {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Jt {
+class Zt {
   constructor() {
     i(this, "field", "_htmlGraphTags");
   }
@@ -2502,8 +2502,8 @@ class Jt {
     s === void 0 ? o[this.field] = /* @__PURE__ */ new Set([t]) : s.add(t);
   }
 }
-const se = Symbol();
-class ie {
+const ne = Symbol();
+class ae {
   constructor(e, t, o) {
     i(this, "onSelected");
     i(this, "mouseDownEventVerifier");
@@ -2593,11 +2593,11 @@ class ie {
     this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
   }
 }
-const ne = (r, e) => ({
+const he = (r, e) => ({
   from: r.isDirect ? r.staticPortId : e,
   to: r.isDirect ? e : r.staticPortId
 });
-class De {
+class Le {
   constructor(e, t) {
     this.graph = e, this.connectionAllowedVerifier = t;
   }
@@ -2608,7 +2608,7 @@ class De {
       const { element: a, direction: h, nodeId: d } = this.graph.getPort(n), { x: c, y: u } = this.graph.getNode(d);
       if (c === null || u === null)
         return;
-      const l = ne(e, n);
+      const l = he(e, n);
       if (!this.connectionAllowedVerifier(l))
         return;
       const { top: g, left: p, width: w, height: y } = a.getBoundingClientRect(), f = { x: p + w / 2, y: g + y / 2 }, m = s.x - f.x, E = s.y - f.y, A = Math.sqrt(m * m + E * E);
@@ -2616,7 +2616,7 @@ class De {
     }), t;
   }
 }
-class Kt {
+class _t {
   constructor(e) {
     this.direction = e;
   }
@@ -2624,7 +2624,7 @@ class Kt {
     return this.direction;
   }
 }
-class ae {
+class de {
   constructor(e, t, o, s, n) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2661,7 +2661,7 @@ class ae {
         nodeId: s,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, H(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, X(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2743,7 +2743,7 @@ class ae {
     this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.params = n, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s, n) {
-    new ae(
+    new de(
       e,
       t,
       o,
@@ -2775,7 +2775,7 @@ class ae {
     }
   }
   stopMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, H(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, X(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2818,7 +2818,7 @@ class ae {
     return e;
   }
 }
-const W = (r) => {
+const k = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
@@ -2837,7 +2837,7 @@ const W = (r) => {
     touches: e
   };
 };
-class J {
+class Q {
   constructor(e, t, o, s, n) {
     i(this, "viewport");
     i(this, "prevTouches", null);
@@ -2847,7 +2847,7 @@ class J {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     i(this, "onMouseDown", (e) => {
-      this.params.mouseDownEventVerifier(e) && (H(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && (X(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2878,10 +2878,10 @@ class J {
     });
     i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = W(e);
+        this.prevTouches = k(e);
         return;
       }
-      this.prevTouches = W(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = k(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2890,7 +2890,7 @@ class J {
       }), this.startRegisteredTransform();
     });
     i(this, "onWindowTouchMove", (e) => {
-      const t = W(e);
+      const t = k(e);
       if (!t.touches.every(
         (s) => this.pointInsideVerifier.verify(s[0], s[1])
       )) {
@@ -2907,7 +2907,7 @@ class J {
       this.prevTouches = t;
     });
     i(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = W(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = k(e) : this.stopTouchDrag();
     });
     i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
@@ -2925,7 +2925,7 @@ class J {
     }), e.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s, n) {
-    new J(
+    new Q(
       e,
       t,
       o,
@@ -2934,7 +2934,7 @@ class J {
     );
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = Qe(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), s = _e(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: s,
       canvasWidth: n,
@@ -2943,7 +2943,7 @@ class J {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), n = Ze(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), n = qe(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: n,
       canvasWidth: a,
@@ -2952,7 +2952,7 @@ class J {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    H(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    X(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2982,7 +2982,7 @@ class J {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
   }
 }
-class he {
+class ce {
   constructor(e, t, o, s, n, a, h) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
@@ -3029,7 +3029,7 @@ class he {
         this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
       }
     };
-    J.configure(
+    Q.configure(
       e,
       this.element,
       this.window,
@@ -3038,7 +3038,7 @@ class he {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, o, s, n, a, h) {
-    new he(
+    new ce(
       e,
       t,
       o,
@@ -3069,24 +3069,24 @@ class he {
     });
   }
 }
-const Qt = () => {
+const qt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Zt = () => {
+}, er = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, _t = () => {
+}, tr = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class de {
+class le {
   constructor(e, t, o) {
-    i(this, "svg", Qt());
-    i(this, "patternRenderingRectangle", Zt());
-    i(this, "pattern", _t());
+    i(this, "svg", qt());
+    i(this, "patternRenderingRectangle", er());
+    i(this, "pattern", tr());
     i(this, "patternContent");
     i(this, "tileWidth");
     i(this, "tileHeight");
@@ -3107,7 +3107,7 @@ class de {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new de(e, t, o);
+    new le(e, t, o);
   }
   updateVisibility() {
     const { scale: e } = this.canvas.viewport.getViewportMatrix(), t = e > this.maxViewportScale;
@@ -3121,14 +3121,14 @@ class de {
     }
   }
 }
-class ce {
+class ue {
   constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "edgeInProgress", null);
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = qe(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = tt(
       this.overlayLayer,
       this.viewportStore,
       this.window
@@ -3151,7 +3151,7 @@ class ce {
         this.resetDragState(), this.params.onEdgeCreationInterrupted(d);
       }
     };
-    j.configure(
+    K.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
@@ -3159,7 +3159,7 @@ class ce {
     );
   }
   static configure(e, t, o, s, n, a) {
-    new ce(
+    new ue(
       e,
       t,
       o,
@@ -3194,7 +3194,7 @@ class ce {
       portCoords: u,
       portDirection: p ?? s.direction
     }, [y, f] = g ? [l, w] : [w, l];
-    this.overlayCanvas.addNode(Y(y)), this.overlayCanvas.addNode(Y(f)), this.overlayCanvas.addEdge({
+    this.overlayCanvas.addNode(G(y)), this.overlayCanvas.addNode(G(f)), this.overlayCanvas.addEdge({
       from: y.overlayNodeId,
       to: f.overlayNodeId,
       shape: this.params.edgeShapeFactory(R.EdgeId)
@@ -3204,12 +3204,12 @@ class ce {
     this.edgeInProgress = null, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = Oe(this.canvas.graph, e);
+    const t = ze(this.canvas.graph, e);
     if (t === null) {
       this.params.onEdgeCreationInterrupted(this.edgeInProgress);
       return;
     }
-    const o = ne(
+    const o = he(
       this.edgeInProgress,
       t
     ), s = this.params.connectionAllowedVerifier(o), n = this.params.connectionPreprocessor({
@@ -3232,7 +3232,7 @@ class ce {
     }).updatePort(R.DraggingNodeId, { direction: s });
   }
 }
-class le {
+class ge {
   constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "edgeInProgress", null);
@@ -3240,7 +3240,7 @@ class le {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = qe(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = tt(
       this.overlayLayer,
       this.viewportStore,
       this.window
@@ -3266,7 +3266,7 @@ class le {
         });
       }
     };
-    j.configure(
+    K.configure(
       this.canvas,
       this.window,
       this.pointInsideVerifier,
@@ -3274,7 +3274,7 @@ class le {
     );
   }
   static configure(e, t, o, s, n, a) {
-    new le(
+    new ge(
       e,
       t,
       o,
@@ -3320,7 +3320,7 @@ class le {
       portCoords: w,
       portDirection: f ?? d.direction
     }, [E, A] = a ? [y, m] : [m, y];
-    this.overlayCanvas.addNode(Y(E)), this.overlayCanvas.addNode(Y(A));
+    this.overlayCanvas.addNode(G(E)), this.overlayCanvas.addNode(G(A));
     const T = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(R.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
       id: R.EdgeId,
@@ -3346,7 +3346,7 @@ class le {
     }).updatePort(R.DraggingNodeId, { direction: n });
   }
   tryCreateConnection(e) {
-    const t = Oe(this.canvas.graph, e);
+    const t = ze(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(R.EdgeId), t === null) {
       const c = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -3358,7 +3358,7 @@ class le {
       });
       return;
     }
-    const { from: o, to: s } = ne(
+    const { from: o, to: s } = he(
       this.edgeInProgress,
       t
     ), n = this.draggingEdgePayload, a = {
@@ -3385,17 +3385,17 @@ class le {
     }
   }
 }
-class ue {
+class pe {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new ue(e, t);
+    new pe(e, t);
   }
 }
-class ge {
+class we {
   constructor(e, t, o) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
@@ -3412,7 +3412,7 @@ class ge {
     });
   }
   static configure(e, t, o) {
-    new ge(
+    new we(
       e,
       t,
       o
@@ -3422,7 +3422,7 @@ class ge {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class qt {
+class rr {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -3436,23 +3436,23 @@ class qt {
     }), this.params.onAfterApplied();
   }
 }
-class er {
+class or {
   static configure(e, t) {
-    const o = t.applyOn, s = new qt(e, t.algorithm, {
+    const o = t.applyOn, s = new rr(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
     });
     switch (o.type) {
       case "trigger": {
-        ue.configure(
+        pe.configure(
           s,
           o.trigger
         );
         break;
       }
       case "topologyChangeSchedule": {
-        ge.configure(
+        we.configure(
           e.graph,
           s,
           o.schedule
@@ -3462,7 +3462,7 @@ class er {
     }
   }
 }
-class tr {
+class sr {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3477,7 +3477,7 @@ class tr {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class rr {
+class ir {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -3492,27 +3492,27 @@ class rr {
     }), this.params.onAfterApplied();
   }
 }
-class pe {
+class ye {
   constructor(e, t, o) {
     i(this, "applier");
     i(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = o, this.applier = new rr(e, t.algorithm, {
+    this.win = o, this.applier = new ir(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new tr(this.win, this.step);
+    }), new sr(this.win, this.step);
   }
   static configure(e, t, o) {
-    new pe(e, t, o);
+    new ye(e, t, o);
   }
 }
-class we {
+class fe {
   constructor(e, t, o, s, n) {
     i(this, "configurator");
     i(this, "onNodeSelected");
-    i(this, "selectionHandledTag", se);
+    i(this, "selectionHandledTag", ne);
     i(this, "onAfterNodeAdded", (e) => {
       const { element: t } = this.canvas.graph.getNode(e);
       this.configurator.enable(t);
@@ -3527,7 +3527,7 @@ class we {
         this.configurator.disable(t);
       });
     });
-    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onNodeSelected = n.onNodeSelected, this.configurator = new ie(
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onNodeSelected = n.onNodeSelected, this.configurator = new ae(
       this.window,
       this.pointInsideVerifier,
       {
@@ -3542,7 +3542,7 @@ class we {
     ), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
   static configure(e, t, o, s, n) {
-    new we(
+    new fe(
       e,
       t,
       o,
@@ -3551,10 +3551,10 @@ class we {
     );
   }
 }
-class ye {
+class ve {
   constructor(e, t, o, s, n) {
     i(this, "configurator");
-    i(this, "selectionHandledTag", se);
+    i(this, "selectionHandledTag", ne);
     i(this, "onEdgeSelected");
     i(this, "onAfterEdgeAdded", (e) => {
       const { shape: t } = this.canvas.graph.getEdge(e);
@@ -3570,7 +3570,7 @@ class ye {
         this.configurator.disable(t.svg);
       });
     });
-    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onEdgeSelected = n.onEdgeSelected, this.configurator = new ie(
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onEdgeSelected = n.onEdgeSelected, this.configurator = new ae(
       this.window,
       this.pointInsideVerifier,
       {
@@ -3585,7 +3585,7 @@ class ye {
     ), this.canvas.graph.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.canvas.graph.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
   static configure(e, t, o, s, n) {
-    new ye(
+    new ve(
       e,
       t,
       o,
@@ -3594,12 +3594,12 @@ class ye {
     );
   }
 }
-class fe {
+class me {
   constructor(e, t, o, s, n, a) {
     i(this, "configurator");
     i(this, "onCanvasSelected");
-    i(this, "selectionHandledTag", se);
-    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.eventTagger = n, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new ie(
+    i(this, "selectionHandledTag", ne);
+    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.eventTagger = n, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new ae(
       this.window,
       this.pointInsideVerifier,
       {
@@ -3615,7 +3615,7 @@ class fe {
     });
   }
   static configure(e, t, o, s, n, a) {
-    new fe(
+    new me(
       e,
       t,
       o,
@@ -3625,23 +3625,23 @@ class fe {
     );
   }
 }
-const or = () => {
+const nr = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, Q = () => {
+}, _ = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Re = () => {
-  const r = Q();
+}, Ve = () => {
+  const r = _();
   return r.style.pointerEvents = "none", r;
 };
-class sr {
+class ar {
   constructor(e) {
-    i(this, "background", Q());
-    i(this, "main", Q());
-    i(this, "overlayConnectablePorts", Re());
-    i(this, "overlayDraggableEdges", Re());
-    i(this, "host", or());
+    i(this, "background", _());
+    i(this, "main", _());
+    i(this, "overlayConnectablePorts", Ve());
+    i(this, "overlayDraggableEdges", Ve());
+    i(this, "host", nr());
     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() {
@@ -3667,18 +3667,18 @@ const P = Object.freeze({
   mouseUpEventVerifier: (r) => r.button === 0,
   movementThreshold: 10
 }), N = () => {
-}, et = (r, e, t) => r === "closest-connectable-port" ? new De(
+}, rt = (r, e, t) => r === "closest-connectable-port" ? new Le(
   e,
   t
-) : r === "nearest-connectable-port" ? new De(
+) : r === "nearest-connectable-port" ? new Le(
   e,
   t
-) : new Kt(r), ve = (r) => {
+) : new _t(r), xe = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new zt({
+      return () => new Ht({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3692,7 +3692,7 @@ const P = Object.freeze({
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Wt({
+      return () => new kt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3705,7 +3705,7 @@ const P = Object.freeze({
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new kt({
+      return () => new Yt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3718,7 +3718,7 @@ const P = Object.freeze({
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Xe({
+      return () => new je({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3729,7 +3729,7 @@ const P = Object.freeze({
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Ot({
+      return () => new zt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3743,7 +3743,7 @@ const P = Object.freeze({
         detourDirection: r.detourDirection
       });
   }
-}, ir = (r) => {
+}, hr = (r) => {
   var u, l, g, p, w, y;
   const e = r.nodeDragVerifier ?? (() => !0), t = r.moveOnTop !== !1, o = r.moveEdgesOnTop !== !1 && t, s = (u = r.mouse) == null ? void 0 : u.dragCursor, n = s !== void 0 ? s : "grab", a = (l = r.mouse) == null ? void 0 : l.mouseDownEventVerifier, h = a !== void 0 ? a : (f) => f.button === 0, d = (g = r.mouse) == null ? void 0 : g.mouseUpEventVerifier, c = d !== void 0 ? d : (f) => f.button === 0;
   return {
@@ -3758,7 +3758,7 @@ const P = Object.freeze({
     nodeDragVerifier: e,
     onNodeDragFinished: ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? N
   };
-}, nr = (r) => {
+}, dr = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, s = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
@@ -3768,7 +3768,7 @@ const P = Object.freeze({
     const u = n.canvasHeight * n.prevTransform.scale, l = s - u;
     return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, ar = (r) => {
+}, cr = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, s = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
@@ -3789,7 +3789,7 @@ const P = Object.freeze({
       y: u
     };
   };
-}, hr = (r) => (e) => r.reduce(
+}, lr = (r) => (e) => r.reduce(
   (t, o) => o({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3797,32 +3797,32 @@ const P = Object.freeze({
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), Le = (r) => {
+), Ie = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return ar({
+      return cr({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return nr({
+      return dr({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, Ve = (r) => {
+}, Fe = (r) => {
   var g, p, w, y, f, m, E, A, T, M, L, V;
   const e = (g = r == null ? void 0 : r.scale) == null ? void 0 : g.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let s;
-  o !== void 0 ? Array.isArray(o) ? s = hr(
+  o !== void 0 ? Array.isArray(o) ? s = lr(
     o.map(
-      (D) => Le(D)
+      (D) => Ie(D)
     )
-  ) : s = Le(o) : s = (D) => D.nextTransform;
+  ) : s = Ie(o) : s = (D) => D.nextTransform;
   const n = ((p = r == null ? void 0 : r.shift) == null ? void 0 : p.cursor) !== void 0 ? r.shift.cursor : "grab", a = (w = r == null ? void 0 : r.shift) == null ? void 0 : w.mouseDownEventVerifier, h = a !== void 0 ? a : (D) => D.button === 0, d = (y = r == null ? void 0 : r.shift) == null ? void 0 : y.mouseUpEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, u = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelEventVerifier, l = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
@@ -3839,17 +3839,17 @@ const P = Object.freeze({
     onResizeTransformStarted: ((L = r == null ? void 0 : r.events) == null ? void 0 : L.onResizeTransformStarted) ?? N,
     onResizeTransformFinished: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onResizeTransformFinished) ?? N
   };
-}, dr = (r, e) => {
+}, ur = (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;
-}, cr = (r) => r instanceof SVGElement ? r : dr(
+}, gr = (r) => r instanceof SVGElement ? r : ur(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), lr = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = cr(r.renderer ?? {});
+), pr = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = gr(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: o,
@@ -3861,18 +3861,18 @@ const P = Object.freeze({
   connectionPreprocessor: (r) => r,
   connectionAllowedVerifier: () => !0,
   mouseEventVerifier: (r) => r.button === 0
-}), ur = (r, e, t) => {
+}), wr = (r, e, t) => {
   var s, n, a;
   const o = r.connectionAllowedVerifier ?? $.connectionAllowedVerifier;
   return {
     connectionTypeResolver: r.connectionTypeResolver ?? $.connectionTypeResolver,
     connectionAllowedVerifier: o,
-    draggingPortDirectionResolver: et(
+    draggingPortDirectionResolver: rt(
       r.dragPortDirection,
       t,
       o
     ),
-    edgeShapeFactory: r.edgeShape !== void 0 ? ve(r.edgeShape) : e,
+    edgeShapeFactory: r.edgeShape !== void 0 ? xe(r.edgeShape) : e,
     connectionPreprocessor: r.connectionPreprocessor ?? $.connectionPreprocessor,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? $.mouseEventVerifier,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? $.mouseEventVerifier,
@@ -3880,51 +3880,51 @@ const P = Object.freeze({
     onEdgeCreationInterrupted: ((n = r.events) == null ? void 0 : n.onEdgeCreationInterrupted) ?? N,
     onEdgeCreationPrevented: ((a = r.events) == null ? void 0 : a.onEdgeCreationPrevented) ?? N
   };
-}, z = Object.freeze({
+}, H = Object.freeze({
   connectionAllowedVerifier: () => !0,
   connectionPreprocessor: (r) => r,
   // TODO: remove ctrl key
   mouseDownEventVerifier: (r) => r.button === 0 && r.ctrlKey,
   mouseUpEventVerifier: (r) => r.button === 0
-}), gr = (r, e) => {
+}), yr = (r, e) => {
   var s, n, a;
   const t = (h) => {
     const d = e.getPortAdjacentEdgeIds(h);
     return d.length > 0 ? d[d.length - 1] : null;
-  }, o = r.connectionAllowedVerifier ?? z.connectionAllowedVerifier;
+  }, o = r.connectionAllowedVerifier ?? H.connectionAllowedVerifier;
   return {
-    connectionPreprocessor: r.connectionPreprocessor ?? z.connectionPreprocessor,
+    connectionPreprocessor: r.connectionPreprocessor ?? H.connectionPreprocessor,
     connectionAllowedVerifier: o,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? z.mouseDownEventVerifier,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? z.mouseUpEventVerifier,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? H.mouseDownEventVerifier,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? H.mouseUpEventVerifier,
     draggingEdgeResolver: r.draggingEdgeResolver ?? t,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ve(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? xe(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((s = r.events) == null ? void 0 : s.onAfterEdgeReattached) ?? N,
     onEdgeReattachInterrupted: ((n = r.events) == null ? void 0 : n.onEdgeReattachInterrupted) ?? N,
     onEdgeReattachPrevented: ((a = r.events) == null ? void 0 : a.onEdgeReattachPrevented) ?? N,
-    draggingPortDirectionResolver: et(
+    draggingPortDirectionResolver: rt(
       r.dragPortDirection,
       e,
       o
     )
   };
-}, pr = (r) => ({
+}, fr = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), wr = (r) => {
+}), vr = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? N,
     onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? N
   };
 };
-class yr extends Error {
+class mr extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasBuilderError");
   }
 }
-class tt {
+class ot {
   constructor(e, t, o) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3962,7 +3962,7 @@ class tt {
     });
   }
 }
-class rt {
+class st {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3981,13 +3981,13 @@ class rt {
     return { ex: h, ey: d, d: a };
   }
 }
-const ot = (r) => {
+const it = (r) => {
   if (r.distance === 0)
     return r.maxForce;
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
   return Math.min(e, r.maxForce);
 };
-class fr {
+class xr {
   constructor(e) {
     i(this, "nodeCharge");
     i(this, "distanceVectorGenerator");
@@ -4002,7 +4002,7 @@ class fr {
         const d = o[h], c = e.get(a), u = e.get(d), l = this.distanceVectorGenerator.create(
           c,
           u
-        ), g = ot({
+        ), g = it({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
@@ -4014,7 +4014,7 @@ class fr {
     }
   }
 }
-const vr = (r) => {
+const Er = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -4032,7 +4032,7 @@ const vr = (r) => {
     radius: h / 2
   };
 };
-class mr {
+class Ar {
   constructor(e) {
     i(this, "root");
     i(this, "leaves", /* @__PURE__ */ new Map());
@@ -4189,7 +4189,7 @@ class mr {
     }), { x: t / e.size, y: o / e.size };
   }
 }
-class xr {
+class Sr {
   constructor(e) {
     i(this, "areaRadiusThreshold");
     i(this, "nodeMass");
@@ -4201,7 +4201,7 @@ class xr {
     this.areaRadiusThreshold = e.areaRadiusThreshold, this.nodeMass = e.nodeMass, this.nodeCharge = e.nodeCharge, this.theta = e.theta, this.distanceVectorGenerator = e.distanceVectorGenerator, this.nodeForceCoefficient = e.nodeForceCoefficient, this.maxForce = e.maxForce;
   }
   apply(e, t) {
-    const o = vr(e), s = new mr({
+    const o = Er(e), s = new Ar({
       box: o,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -4316,7 +4316,7 @@ class xr {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), o = ot({
+    ), o = it({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -4351,7 +4351,7 @@ class xr {
     }
   }
 }
-const st = (r) => r.theta !== 0 ? new xr({
+const nt = (r) => r.theta !== 0 ? new Sr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -4359,13 +4359,13 @@ const st = (r) => r.theta !== 0 ? new xr({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new fr({
+}) : new xr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class it {
+class at {
   constructor(e) {
     i(this, "rand");
     i(this, "sparsity");
@@ -4388,7 +4388,7 @@ class it {
     }), s;
   }
 }
-class Er {
+class br {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4399,7 +4399,7 @@ class Er {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "convergenceVelocity");
-    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new rt(e.rand), this.nodeForcesApplicationStrategy = st({
+    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new st(e.rand), this.nodeForcesApplicationStrategy = nt({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4407,7 +4407,7 @@ class Er {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new it({
+    }), this.fillerLayoutAlgorithm = new at({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4417,7 +4417,7 @@ class Er {
       graph: t,
       viewport: o
     });
-    for (let n = 0; n < this.maxIterations && !(new tt(
+    for (let n = 0; n < this.maxIterations && !(new ot(
       t,
       s,
       {
@@ -4433,7 +4433,7 @@ class Er {
     return s;
   }
 }
-class Ar {
+class Pr {
   constructor(e, t) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
@@ -4474,7 +4474,7 @@ class Ar {
     }
   }
 }
-class Sr {
+class Nr {
   constructor(e) {
     this.params = e;
   }
@@ -4515,12 +4515,12 @@ class Sr {
     return o - 2 * this.params.spaceAroundRadius;
   }
 }
-class br {
+class Cr {
   constructor(e, t) {
     i(this, "offsets", /* @__PURE__ */ new Map());
     i(this, "treeSpans", /* @__PURE__ */ new Map());
     this.tree = e;
-    const o = t.spaceAroundRadius, s = new Sr({
+    const o = t.spaceAroundRadius, s = new Nr({
       spaceAroundRadius: o
     });
     [...this.tree.sequence].reverse().forEach((n) => {
@@ -4542,19 +4542,19 @@ class br {
     return this.offsets;
   }
 }
-class Pr {
+class Tr {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), s = new Ar(
+    const t = /* @__PURE__ */ new Map(), s = new Pr(
       e.graph,
       this.params.nextLayerNodesResolver
     ).generate();
     let n = 0;
     return s.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
-      const d = new br(a, {
+      const d = new Cr(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
       let c = [a.root];
@@ -4575,7 +4575,7 @@ class Pr {
     }), t;
   }
 }
-const Nr = (r) => {
+const Mr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((n) => {
     const a = e.getEdge(n);
     return e.getPort(a.to).nodeId;
@@ -4584,20 +4584,20 @@ const Nr = (r) => {
     return e.getPort(a.from).nodeId;
   });
   return /* @__PURE__ */ new Set([...o, ...s]);
-}, Cr = (r) => {
+}, Dr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((s) => {
     const n = e.getEdge(s);
     return e.getPort(n.to).nodeId;
   });
   return new Set(o);
-}, Tr = (r) => {
+}, Rr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeIncomingEdgeIds(t).map((s) => {
     const n = e.getEdge(s);
     return e.getPort(n.from).nodeId;
   });
   return new Set(o);
 };
-class Mr {
+class Lr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4607,7 +4607,7 @@ class Mr {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "fillerLayoutAlgorithm");
-    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new rt(e.rand), this.nodeForcesApplicationStrategy = st({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new st(e.rand), this.nodeForcesApplicationStrategy = nt({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4615,7 +4615,7 @@ class Mr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new it({
+    }), this.fillerLayoutAlgorithm = new at({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4625,7 +4625,7 @@ class Mr {
       graph: t,
       viewport: o
     });
-    return new tt(
+    return new ot(
       t,
       n,
       {
@@ -4642,23 +4642,23 @@ class Mr {
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const nt = (r) => {
+const ht = (r) => {
   let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
   for (let n = 0, a; n < r.length; n++)
     a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = o ^ Math.imul(t ^ a, 2869860233), o = s ^ Math.imul(o ^ a, 951274213), s = e ^ Math.imul(s ^ a, 2716044179);
   return e = Math.imul(o ^ e >>> 18, 597399067), t = Math.imul(s ^ t >>> 22, 2869860233), o = Math.imul(e ^ o >>> 17, 951274213), s = Math.imul(t ^ s >>> 19, 2716044179), e ^= t ^ o ^ s, t ^= e, o ^= e, s ^= e, [e >>> 0, t >>> 0, o >>> 0, s >>> 0];
-}, at = (r, e, t, o) => function() {
+}, dt = (r, e, t, o) => function() {
   r |= 0, e |= 0, t |= 0, o |= 0;
   const s = (r + e | 0) + o | 0;
   return o = o + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + s | 0, (s >>> 0) / 4294967296;
-}, Dr = (r) => {
+}, Vr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const o = nt((r == null ? void 0 : r.seed) ?? P.seed), s = at(o[0], o[1], o[2], o[3]);
-      return new Mr({
+      const o = ht((r == null ? void 0 : r.seed) ?? P.seed), s = dt(o[0], o[1], o[2], o[3]);
+      return new Lr({
         rand: s,
         maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? P.maxTimeDeltaSec,
         nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? P.nodeCharge,
@@ -4674,42 +4674,42 @@ const nt = (r) => {
       });
     }
   }
-}, Rr = {
+}, Ir = {
   staticNodeResolver: () => !1
-}, Lr = (r) => {
+}, Fr = (r) => {
   var t, o;
   return {
-    algorithm: Dr((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Rr.staticNodeResolver,
+    algorithm: Vr((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Ir.staticNodeResolver,
     onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? N,
     onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? N
   };
-}, Vr = (r) => r instanceof q ? {
+}, Ur = (r) => r instanceof te ? {
   type: "trigger",
   trigger: r
 } : r === "topologyChangeMicrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Me
+  schedule: Re
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Gt
+  schedule: Kt
 } : {
   type: "topologyChangeSchedule",
-  schedule: Me
-}, Z = Object.freeze({
+  schedule: Re
+}, q = Object.freeze({
   staticNodeResolver: () => !1,
   hierarchicalLayout: {
     layerWidth: 300,
     layerSpace: 300
   }
-}), k = (r, e) => ({
+}), Y = (r, e) => ({
   a: r.a * e.a + r.b * e.d,
   b: r.a * e.b + r.b * e.e,
   c: r.a * e.c + r.b * e.f + r.c,
   d: r.d * e.a + r.e * e.d,
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
-}), Ir = (r) => {
+}), $r = (r) => {
   const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
     a: n / h,
@@ -4720,7 +4720,7 @@ const nt = (r) => {
     f: (o * s - e * a) / h
   };
 };
-class Fr {
+class Br {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4754,18 +4754,18 @@ class Fr {
     return this.createRelativeTransform(o, s);
   }
   createMirrorRelativeMatrix(e, t) {
-    const o = this.createMirrorYBaseMatrix(), s = k(
+    const o = this.createMirrorYBaseMatrix(), s = Y(
       this.createShiftBaseMatrix(t),
       this.createRotateBaseMatrix(e)
     );
     return this.createRelativeTransform(o, s);
   }
   createRelativeTransform(e, t) {
-    const o = k(
+    const o = Y(
       t,
       e
-    ), s = Ir(t);
-    return k(o, s);
+    ), s = $r(t);
+    return Y(o, s);
   }
   createShiftBaseMatrix(e) {
     return {
@@ -4809,7 +4809,7 @@ class Fr {
     };
   }
 }
-const Ur = (r) => {
+const Or = (r) => {
   if (r === void 0)
     return (s) => s;
   if (typeof r == "function")
@@ -4823,10 +4823,10 @@ const Ur = (r) => {
     e: 1,
     f: 0
   };
-  const o = new Fr();
+  const o = new Br();
   return e.forEach((s) => {
     const n = o.resolve(s);
-    t = k(t, n);
+    t = Y(t, n);
   }), (s) => {
     const { x: n, y: a } = s;
     return {
@@ -4834,34 +4834,34 @@ const Ur = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, $r = (r) => {
+}, Wr = (r) => {
   if (typeof r == "function")
     return r;
   switch (r) {
     case "outgoing":
-      return Cr;
+      return Dr;
     case "incoming":
-      return Tr;
+      return Rr;
     default:
-      return Nr;
+      return Mr;
   }
-}, Br = (r) => {
+}, zr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
-      return new Pr({
-        layerWidth: r.layerWidth ?? Z.hierarchicalLayout.layerWidth,
-        layerSpace: r.layerSpace ?? Z.hierarchicalLayout.layerSpace,
-        transform: Ur(r.transform),
-        nextLayerNodesResolver: $r(
+      return new Tr({
+        layerWidth: r.layerWidth ?? q.hierarchicalLayout.layerWidth,
+        layerSpace: r.layerSpace ?? q.hierarchicalLayout.layerSpace,
+        transform: Or(r.transform),
+        nextLayerNodesResolver: Wr(
           r.nextLayerNodesResolver
         )
       });
     default: {
-      const o = nt((r == null ? void 0 : r.seed) ?? P.seed), s = at(o[0], o[1], o[2], o[3]);
-      return new Er({
+      const o = ht((r == null ? void 0 : r.seed) ?? P.seed), s = dt(o[0], o[1], o[2], o[3]);
+      return new br({
         dtSec: (r == null ? void 0 : r.dtSec) ?? P.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? P.maxIterations,
         rand: s,
@@ -4877,16 +4877,16 @@ const Ur = (r) => {
       });
     }
   }
-}, Or = (r) => {
+}, kr = (r) => {
   var e, t;
   return {
-    algorithm: Br(r.algorithm),
-    applyOn: Vr(r.applyOn),
-    staticNodeResolver: r.staticNodeResolver ?? Z.staticNodeResolver,
+    algorithm: zr(r.algorithm),
+    applyOn: Ur(r.applyOn),
+    staticNodeResolver: r.staticNodeResolver ?? q.staticNodeResolver,
     onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? N,
     onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? N
   };
-}, Wr = (r, e) => ({
+}, Hr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4894,7 +4894,7 @@ const Ur = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), zr = (r, e) => {
+}), Yr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4902,41 +4902,41 @@ const Ur = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, kr = (r, e) => ({
+}, Xr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), _ = (r) => () => r, Ie = _(0), Hr = () => {
+}), ee = (r) => () => r, Ue = ee(0), Gr = () => {
   let r = 0;
   return () => r++;
-}, Yr = (r, e) => {
-  let t = Ie, o = Ie;
-  const s = Hr();
-  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = _(r)), typeof e == "number" && (o = _(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+}, jr = (r, e) => {
+  let t = Ue, o = Ue;
+  const s = Gr();
+  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = ee(r)), typeof e == "number" && (o = ee(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
-}, Xr = (r) => {
+}, Jr = (r) => {
   var t, o, s, n, a;
-  const e = Yr(
+  const e = jr(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? We,
+      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? ke,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ve(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: xe(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Gr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : oe, jr = (r) => {
+}, Kr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : ie, Qr = (r) => {
   var o, s, n, a;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Gr(r.layoutParams) : oe;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? Kr(r.layoutParams) : ie;
   return {
     focus: {
       contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4945,23 +4945,23 @@ const Ur = (r) => {
       animationDuration: ((a = e.focus) == null ? void 0 : a.animationDuration) ?? 0
     }
   };
-}, Jr = (r) => ({
+}, Zr = (r) => ({
   onNodeSelected: r.onNodeSelected,
   mouseDownEventVerifier: r.mouseDownEventVerifier ?? I.mouseDownEventVerifier,
   mouseUpEventVerifier: r.mouseUpEventVerifier ?? I.mouseUpEventVerifier,
   movementThreshold: r.movementThreshold ?? I.movementThreshold
-}), Kr = (r) => ({
+}), _r = (r) => ({
   onCanvasSelected: r.onCanvasSelected,
   mouseDownEventVerifier: r.mouseDownEventVerifier ?? I.mouseDownEventVerifier,
   mouseUpEventVerifier: r.mouseUpEventVerifier ?? I.mouseUpEventVerifier,
   movementThreshold: r.movementThreshold ?? I.movementThreshold
-}), Qr = (r) => ({
+}), qr = (r) => ({
   onEdgeSelected: r.onEdgeSelected,
   mouseDownEventVerifier: r.mouseDownEventVerifier ?? I.mouseDownEventVerifier,
   mouseUpEventVerifier: r.mouseUpEventVerifier ?? I.mouseUpEventVerifier,
   movementThreshold: r.movementThreshold ?? I.movementThreshold
 });
-class eo {
+class ro {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4984,12 +4984,12 @@ class eo {
     i(this, "hasUserDraggableEdges", !1);
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
-    i(this, "boxRenderingTrigger", new q());
+    i(this, "boxRenderingTrigger", new te());
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     i(this, "pointInsideVerifier");
-    i(this, "eventTagger", new Jt());
-    this.element = e, this.pointInsideVerifier = new Et(e, this.window);
+    i(this, "eventTagger", new Zt());
+    this.element = e, this.pointInsideVerifier = new St(e, this.window);
   }
   setDefaults(e) {
     return this.canvasDefaults = e, this;
@@ -5032,44 +5032,44 @@ class eo {
   }
   build() {
     if (this.used)
-      throw new yr(
+      throw new mr(
         "Failed to build Canvas because CanvasBuilder is a single-use object"
       );
     this.used = !0;
-    const e = new vt(this.element), t = new $e(), o = new sr(this.element), s = this.createHtmlView(
+    const e = new xt(this.element), t = new Oe(), o = new ar(this.element), s = this.createHtmlView(
       o.main,
       t,
       e
-    ), n = Xr(
+    ), n = Jr(
       this.canvasDefaults
-    ), a = new Je(
+    ), a = new Qe(
       t,
       s,
       n
-    ), h = Or(this.layoutConfig), d = jr({
+    ), h = kr(this.layoutConfig), d = Qr({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
-    }), c = new _e(
+    }), c = new et(
       t,
       e,
       d,
       this.window
-    ), u = new Ke(e), l = new je(t), g = new Ue(
+    ), u = new Ze(e), l = new Ke(t), g = new Be(
       l,
       u,
       a,
       c
     );
-    if (this.hasBackground && de.configure(
+    if (this.hasBackground && le.configure(
       g,
-      lr(this.backgroundConfig),
+      pr(this.backgroundConfig),
       o.background
-    ), this.hasNodeResizeReactiveEdges && ee.configure(g), this.userSelectableEdgesConfig !== void 0) {
-      const p = Qr(
+    ), this.hasNodeResizeReactiveEdges && re.configure(g), this.userSelectableEdgesConfig !== void 0) {
+      const p = qr(
         this.userSelectableEdgesConfig
       );
-      ye.configure(
+      ve.configure(
         g,
         this.window,
         this.pointInsideVerifier,
@@ -5078,10 +5078,10 @@ class eo {
       );
     }
     if (this.userSelectableNodesConfig !== void 0) {
-      const p = Jr(
+      const p = Zr(
         this.userSelectableNodesConfig
       );
-      we.configure(
+      fe.configure(
         g,
         this.window,
         this.pointInsideVerifier,
@@ -5090,10 +5090,10 @@ class eo {
       );
     }
     if (this.userSelectableCanvasConfig !== void 0) {
-      const p = Kr(
+      const p = _r(
         this.userSelectableCanvasConfig
       );
-      fe.configure(
+      me.configure(
         g,
         o.main,
         this.window,
@@ -5103,11 +5103,11 @@ class eo {
       );
     }
     if (this.hasDraggableNodes) {
-      let p = ir(this.dragConfig);
-      this.hasAnimatedLayout && (p = Wr(
+      let p = hr(this.dragConfig);
+      this.hasAnimatedLayout && (p = Hr(
         p,
         this.animationStaticNodes
-      )), ae.configure(
+      )), de.configure(
         g,
         o.main,
         this.window,
@@ -5116,12 +5116,12 @@ class eo {
       );
     }
     if (this.hasUserConnectablePorts) {
-      const p = ur(
+      const p = wr(
         this.connectablePortsConfig,
         n.edges.shapeFactory,
         g.graph
       );
-      ce.configure(
+      ue.configure(
         g,
         o.overlayConnectablePorts,
         e,
@@ -5131,11 +5131,11 @@ class eo {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const p = gr(
+      const p = yr(
         this.draggableEdgesConfig,
         g.graph
       );
-      le.configure(
+      ge.configure(
         g,
         o.overlayDraggableEdges,
         e,
@@ -5144,57 +5144,57 @@ class eo {
         p
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? he.configure(
+    if (this.virtualScrollConfig !== void 0 ? ce.configure(
       g,
       o.main,
       this.window,
-      Ve(this.transformConfig),
+      Fe(this.transformConfig),
       this.boxRenderingTrigger,
       this.pointInsideVerifier,
-      pr(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && J.configure(
+      fr(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && Q.configure(
       g,
       o.main,
       this.window,
       this.pointInsideVerifier,
-      Ve(this.transformConfig)
-    ), this.hasLayout && er.configure(g, h), this.hasAnimatedLayout) {
-      let p = Lr(this.animatedLayoutConfig);
-      this.hasDraggableNodes && (zr(
+      Fe(this.transformConfig)
+    ), this.hasLayout && or.configure(g, h), this.hasAnimatedLayout) {
+      let p = Fr(this.animatedLayoutConfig);
+      this.hasDraggableNodes && (Yr(
         g,
         this.animationStaticNodes
-      ), p = kr(
+      ), p = Xr(
         p,
         this.animationStaticNodes
-      )), pe.configure(g, p, this.window);
+      )), ye.configure(g, p, this.window);
     }
     return g.onBeforeDestroy.subscribe(() => {
       o.destroy();
     }), g;
   }
   createHtmlView(e, t, o) {
-    let s = new Fe(t, o, e);
-    return this.virtualScrollConfig !== void 0 && (s = new wt(
+    let s = new $e(t, o, e);
+    return this.virtualScrollConfig !== void 0 && (s = new ft(
       s,
       t,
       this.boxRenderingTrigger,
-      wr(this.virtualScrollConfig)
-    )), s = new yt(s, t), s;
+      vr(this.virtualScrollConfig)
+    )), s = new vt(s, t), s;
   }
 }
 export {
-  Ot as BezierEdgeShape,
-  eo as CanvasBuilder,
-  yr as CanvasBuilderError,
+  zt as BezierEdgeShape,
+  ro as CanvasBuilder,
+  mr as CanvasBuilderError,
   S as CanvasError,
   U as ConnectionCategory,
-  Xe as DirectEdgeShape,
-  q as EventSubject,
-  Wt as HorizontalEdgeShape,
-  Xt as InteractiveEdgeError,
-  Ge as InteractiveEdgeShape,
-  qr as MidpointEdgeShape,
-  zt as StraightEdgeShape,
-  kt as VerticalEdgeShape,
-  _r as boxPortOffsetFn
+  je as DirectEdgeShape,
+  te as EventSubject,
+  kt as HorizontalEdgeShape,
+  Jt as InteractiveEdgeError,
+  Je as InteractiveEdgeShape,
+  to as MidpointEdgeShape,
+  Ht as StraightEdgeShape,
+  Yt as VerticalEdgeShape,
+  Xt as boxPortOffsetFn
 };