@html-graph/html-graph 7.0.1 → 7.1.0

package/dist/html-graph.js

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