@html-graph/html-graph 8.10.0 → 8.12.0

package/dist/html-graph.js

@@ -1,22 +1,22 @@
-var Je = Object.defineProperty;
-var Ke = (r, e, t) => e in r ? Je(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => Ke(r, typeof e != "symbol" ? e + "" : e, t);
-var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
-const Qe = () => {
+var Ze = Object.defineProperty;
+var _e = (r, e, t) => e in r ? Ze(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => _e(r, typeof e != "symbol" ? e + "" : e, t);
+var V = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(V || {});
+const qe = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ze = () => {
+}, et = () => {
   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;
-}, _e = (r) => {
+}, tt = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, qe = (r) => {
+}, rt = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class Ee {
+class be {
   constructor(e, t, o) {
-    i(this, "host", Qe());
-    i(this, "container", Ze());
+    i(this, "host", qe());
+    i(this, "container", et());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     i(this, "applyTransform", () => {
@@ -27,11 +27,11 @@ class Ee {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    _e(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    tt(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);
-    qe(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    rt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -71,9 +71,9 @@ class Ee {
       n,
       h,
       d
-    ), g = this.createEdgeRenderPort(s, a, h, d);
-    let u = L.Line;
-    o.element === s.element ? u = L.PortCycle : o.nodeId === s.nodeId && (u = L.NodeCycle), t.payload.shape.render({ from: c, to: g, category: u });
+    ), u = this.createEdgeRenderPort(s, a, h, d);
+    let g = V.Line;
+    o.element === s.element ? g = V.PortCycle : o.nodeId === s.nodeId && (g = V.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -93,7 +93,7 @@ class Ee {
     };
   }
 }
-class et {
+class ot {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -109,11 +109,11 @@ class et {
     return o >= this.xFrom && o <= this.xTo && s >= this.yFrom && s <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
-    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), u = Math.max(n.y, a.y);
+    return h <= this.xTo && d >= this.xFrom && c <= this.yTo && u >= this.yFrom;
   }
 }
-class tt {
+class st {
   constructor(e, t, o, s) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -125,8 +125,8 @@ class tt {
         const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
         h && !d ? t.add(a) : !h && d && o.add(a);
       }), this.graphStore.getAllEdgeIds().forEach((a) => {
-        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), g = this.graphStore.getPort(c.from).nodeId, u = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(g) || (t.add(g), o.delete(g)), this.renderingBox.hasNode(u) || (t.add(u), o.delete(u))), h && !d ? s.add(a) : !h && d && n.add(a);
+        const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), u = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
+        h && (this.renderingBox.hasNode(u) || (t.add(u), o.delete(u)), this.renderingBox.hasNode(g) || (t.add(g), o.delete(g))), h && !d ? s.add(a) : !h && d && n.add(a);
       }), n.forEach((a) => {
         this.handleDetachEdge(a);
       }), o.forEach((a) => {
@@ -137,7 +137,7 @@ class tt {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new et(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new ot(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -191,7 +191,7 @@ class tt {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class rt {
+class it {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -245,7 +245,7 @@ class rt {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class _ {
+class q {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -262,10 +262,10 @@ class _ {
   }
 }
 const P = () => {
-  const r = new _();
+  const r = new q();
   return [r, r];
 };
-class Se {
+class Pe {
   constructor(e, t, o, s) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
@@ -318,7 +318,7 @@ class Se {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class ot {
+class nt {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -364,7 +364,7 @@ class S extends Error {
     i(this, "name", "CanvasError");
   }
 }
-const b = Object.freeze({
+const N = Object.freeze({
   accessNonexistingNode: (r) => `Failed to access node with ID ${JSON.stringify(r)} because it does not exist`,
   addNodeWithExistingId: (r) => `Failed to add node with ID ${JSON.stringify(r)} because a node with this ID already exists`,
   addNodeWithElementInUse: (r, e) => `Failed to add node with ID ${JSON.stringify(r)} because its HTML element is already attached to node with ID ${JSON.stringify(e)}`,
@@ -386,7 +386,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 be {
+class Te {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -395,7 +395,7 @@ class be {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new ot());
+    i(this, "elementPorts", new nt());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
     i(this, "afterNodeUpdatedEmitter");
@@ -430,16 +430,16 @@ class be {
   getNode(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new S(b.accessNonexistingNode(e));
+      throw new S(N.accessNonexistingNode(e));
     return t;
   }
   addNode(e) {
     if (this.hasNode(e.id))
-      throw new S(b.addNodeWithExistingId(e.id));
+      throw new S(N.addNodeWithExistingId(e.id));
     const t = this.findNodeIdByElement(e.element);
     if (t !== void 0)
       throw new S(
-        b.addNodeWithElementInUse(e.id, t)
+        N.addNodeWithElementInUse(e.id, t)
       );
     const o = /* @__PURE__ */ new Map(), s = {
       element: e.element,
@@ -461,13 +461,13 @@ class be {
   }
   updateNode(e, t) {
     if (!this.hasNode(e))
-      throw new S(b.updateNonexistentNode(e));
+      throw new S(N.updateNonexistentNode(e));
     const { payload: o } = this.nodes.get(e);
     o.x = t.x ?? o.x, o.y = t.y ?? o.y, o.centerFn = t.centerFn ?? o.centerFn, t.priority !== void 0 && (o.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
     if (!this.hasNode(e))
-      throw new S(b.removeNonexistentNode(e));
+      throw new S(N.removeNonexistentNode(e));
     this.beforeNodeRemovedEmitter.emit(e);
     const t = this.getNode(e);
     this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
@@ -478,15 +478,15 @@ class be {
   getPort(e) {
     const t = this.ports.get(e);
     if (t === void 0)
-      throw new S(b.accessNonexistentPort(e));
+      throw new S(N.accessNonexistentPort(e));
     return t;
   }
   addPort(e) {
     if (this.hasPort(e.id))
-      throw new S(b.addPortWithExistingId(e.id));
+      throw new S(N.addPortWithExistingId(e.id));
     if (!this.hasNode(e.nodeId))
       throw new S(
-        b.addPortToNonexistentNode(e.id, e.nodeId)
+        N.addPortToNonexistentNode(e.id, e.nodeId)
       );
     this.ports.set(e.id, {
       element: e.element,
@@ -498,7 +498,7 @@ class be {
   }
   updatePort(e, t) {
     if (!this.hasPort(e))
-      throw new S(b.updateNonexistentPort(e));
+      throw new S(N.updateNonexistentPort(e));
     const o = this.getPort(e).payload;
     o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
   }
@@ -512,13 +512,13 @@ class be {
     const t = this.nodes.get(e);
     if (t === void 0)
       throw new S(
-        b.accessPortsOfNonexistentNode(e)
+        N.accessPortsOfNonexistentNode(e)
       );
     return Array.from(t.ports.keys());
   }
   removePort(e) {
     if (!this.hasPort(e))
-      throw new S(b.removeNonexistentPort(e));
+      throw new S(N.removeNonexistentPort(e));
     const t = this.getPort(e).nodeId;
     this.beforePortRemovedEmitter.emit(e), this.getNode(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
   }
@@ -528,33 +528,33 @@ class be {
   getEdge(e) {
     const t = this.edges.get(e);
     if (t === void 0)
-      throw new S(b.accessNonexistentEdge(e));
+      throw new S(N.accessNonexistentEdge(e));
     return t;
   }
   addEdge(e) {
     if (this.hasEdge(e.id))
-      throw new S(b.addEdgeWithExistingId(e.id));
+      throw new S(N.addEdgeWithExistingId(e.id));
     if (!this.hasPort(e.from))
       throw new S(
-        b.addEdgeFromNonexistentPort(e.id, e.from)
+        N.addEdgeFromNonexistentPort(e.id, e.from)
       );
     if (!this.hasPort(e.to))
       throw new S(
-        b.addEdgeToNonexistentPort(e.id, e.to)
+        N.addEdgeToNonexistentPort(e.id, e.to)
       );
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
   updateEdge(e, t) {
     if (!this.hasEdge(e))
-      throw new S(b.updateNonexistentEdge(e));
+      throw new S(N.updateNonexistentEdge(e));
     if (t.from !== void 0 || t.to !== void 0) {
       if (t.from !== void 0 && !this.hasPort(t.from))
         throw new S(
-          b.updateNonexistentEdgeSource(e, t.from)
+          N.updateNonexistentEdgeSource(e, t.from)
         );
       if (t.to !== void 0 && !this.hasPort(t.to))
         throw new S(
-          b.updateNonexistentEdgeTarget(e, t.to)
+          N.updateNonexistentEdgeTarget(e, t.to)
         );
       const s = this.getEdge(e), n = s.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
@@ -573,7 +573,7 @@ class be {
   }
   removeEdge(e) {
     if (!this.hasEdge(e))
-      throw new S(b.removeNonexistentEdge(e));
+      throw new S(N.removeNonexistentEdge(e));
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
@@ -583,7 +583,7 @@ class be {
     const t = this.portIncomingEdges.get(e);
     if (t === void 0)
       throw new S(
-        b.accessEdgesForNonexistentPort(e)
+        N.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
@@ -591,7 +591,7 @@ class be {
     const t = this.portOutgoingEdges.get(e);
     if (t === void 0)
       throw new S(
-        b.accessEdgesForNonexistentPort(e)
+        N.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
@@ -599,7 +599,7 @@ class be {
     const t = this.portCycleEdges.get(e);
     if (t === void 0)
       throw new S(
-        b.accessEdgesForNonexistentPort(e)
+        N.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
@@ -672,22 +672,22 @@ class be {
     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);
   }
 }
-const ue = (r) => ({
+const ye = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), pe = {
+}), fe = {
   scale: 1,
   x: 0,
   y: 0
-}, ye = (r, e) => ({
+}, ve = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class st {
+class at {
   constructor(e) {
-    i(this, "viewportMatrix", pe);
-    i(this, "contentMatrix", pe);
+    i(this, "viewportMatrix", fe);
+    i(this, "contentMatrix", fe);
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
@@ -710,30 +710,30 @@ class st {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ue(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ye(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 = ue(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = ye(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
   getDimensions() {
     const { width: e, height: t } = this.host.getBoundingClientRect();
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return ye(this.viewportMatrix, e);
+    return ve(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return ye(this.contentMatrix, e);
+    return ve(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
   }
 }
-class q {
+class ee {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -759,19 +759,19 @@ class q {
     }), 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 q(e);
+    new ee(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const it = (r, e, t) => {
+const ht = (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;
-}, nt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, F = (r, e, t, o) => it(e, t, o) && nt(r, t, o), k = (r, e) => {
+}, dt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, D = (r, e, t, o) => ht(e, t, o) && dt(r, t, o), Y = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, H = (r) => {
+}, X = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -786,7 +786,7 @@ const it = (r, e, t) => {
       }
     ]
   };
-}, at = (r, e) => {
+}, ct = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const o = r.findPortIdsByElement(t)[0] ?? null;
@@ -805,21 +805,21 @@ const it = (r, e, t) => {
     status: "notFound"
   };
 };
-function* Ne(r, e) {
+function* Ce(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const o of t) {
     if (o.shadowRoot !== null) {
-      const s = Ne(o.shadowRoot, e);
+      const s = Ce(o.shadowRoot, e);
       for (const n of s)
         yield n;
     }
     yield o;
   }
 }
-const Pe = (r, e) => {
-  const t = Ne(document, e);
+const Me = (r, e) => {
+  const t = Ce(document, e);
   for (const o of t) {
-    const s = at(r, o);
+    const s = ct(r, o);
     if (s.status === "portFound")
       return s.portId;
     if (s.status === "nodeEncountered")
@@ -828,13 +828,13 @@ const Pe = (r, e) => {
   return null;
 };
 var M = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(M || {});
-const Ce = (r, e) => ({
+const De = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), x = (r, e, t) => ({
+}), 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)
-}), Te = (r, e, t) => {
+}), Le = (r, e, t) => {
   const o = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -851,7 +851,7 @@ const Ce = (r, e) => ({
     to: { x: s.x - n, y: s.y - a }
   };
 };
-class ht {
+class lt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -864,27 +864,27 @@ class ht {
       curvature: h,
       hasSourceArrow: d,
       hasTargetArrow: c
-    } = e, g = (t.x + o.x) / 2, u = (t.y + o.y) / 2;
-    this.midpoint = { x: g, y: u };
-    const l = x(
+    } = e, u = (t.x + o.x) / 2, g = (t.y + o.y) / 2;
+    this.midpoint = { x: u, y: g };
+    const l = m(
       { x: t.x + s, y: t.y },
       n,
       t
-    ), p = x(
+    ), w = m(
       { x: o.x - s, y: o.y },
       a,
       o
-    ), y = {
+    ), p = {
       x: l.x + n.x * h,
       y: l.y + n.y * h
-    }, w = {
-      x: p.x - a.x * h,
-      y: p.y - a.y * h
-    }, f = `M ${l.x} ${l.y} C ${y.x} ${y.y}, ${w.x} ${w.y}, ${p.x} ${p.y}`, m = d ? "" : `M ${t.x} ${t.y} L ${l.x} ${l.y} `, A = c ? "" : ` M ${p.x} ${p.y} L ${o.x} ${o.y}`;
-    this.path = `${m}${f}${A}`;
+    }, y = {
+      x: w.x - a.x * h,
+      y: w.y - a.y * h
+    }, f = `M ${l.x} ${l.y} C ${p.x} ${p.y}, ${y.x} ${y.y}, ${w.x} ${w.y}`, x = d ? "" : `M ${t.x} ${t.y} L ${l.x} ${l.y} `, E = c ? "" : ` M ${w.x} ${w.y} L ${o.x} ${o.y}`;
+    this.path = `${x}${f}${E}`;
   }
 }
-class dt {
+class ut {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -897,70 +897,70 @@ class dt {
       detourDir: h,
       from: d,
       to: c,
-      arrowLength: g,
-      detourDistance: u
-    } = e, l = t ? x(
-      { x: d.x + g, y: d.y },
+      arrowLength: u,
+      detourDistance: g
+    } = e, l = t ? m(
+      { x: d.x + u, y: d.y },
       n,
       d
-    ) : d, p = o ? x(
+    ) : d, w = o ? m(
       {
-        x: c.x - g,
+        x: c.x - u,
         y: c.y
       },
       a,
       c
-    ) : c, y = Math.cos(h) * u, w = Math.sin(h) * u, f = x(
-      { x: d.x + g, y: d.y },
+    ) : c, p = Math.cos(h) * g, y = Math.sin(h) * g, f = m(
+      { x: d.x + u, y: d.y },
       n,
       d
-    ), m = {
-      x: f.x + y,
-      y: f.y + w
-    }, A = x(
-      { x: c.x - g, y: c.y },
+    ), x = {
+      x: f.x + p,
+      y: f.y + y
+    }, E = m(
+      { x: c.x - u, y: c.y },
       a,
       c
-    ), N = {
-      x: A.x + y,
-      y: A.y + w
-    }, C = {
-      x: (m.x + N.x) / 2,
-      y: (m.y + N.y) / 2
+    ), b = {
+      x: E.x + p,
+      y: E.y + y
     }, T = {
+      x: (x.x + b.x) / 2,
+      y: (x.y + b.y) / 2
+    }, C = {
       x: f.x + s * n.x,
       y: f.y + s * n.y
     }, I = {
-      x: A.x - s * a.x,
-      y: A.y - s * a.y
-    }, V = {
-      x: f.x + y,
-      y: f.y + w
+      x: E.x - s * a.x,
+      y: E.y - s * a.y
+    }, U = {
+      x: f.x + p,
+      y: f.y + y
     }, $ = {
-      x: A.x + y,
-      y: A.y + w
+      x: E.x + p,
+      y: E.y + y
     };
     this.path = [
       `M ${l.x} ${l.y}`,
       `L ${f.x} ${f.y}`,
-      `C ${T.x} ${T.y} ${V.x} ${V.y} ${C.x} ${C.y}`,
-      `C ${$.x} ${$.y} ${I.x} ${I.y} ${A.x} ${A.y}`,
-      `L ${p.x} ${p.y}`
-    ].join(" "), this.midpoint = C;
+      `C ${C.x} ${C.y} ${U.x} ${U.y} ${T.x} ${T.y}`,
+      `C ${$.x} ${$.y} ${I.x} ${I.y} ${E.x} ${E.y}`,
+      `L ${w.x} ${w.y}`
+    ].join(" "), this.midpoint = T;
   }
 }
-const ee = Object.freeze({
+const te = Object.freeze({
   edgeColor: "--edge-color"
-}), Me = (r) => {
+}), Re = (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(ee.edgeColor, r), e;
-}, De = (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(te.edgeColor, r), e;
+}, Ve = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${ee.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, Y = () => {
+  return e.setAttribute("stroke", `var(${te.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, H = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${ee.edgeColor})`), r;
-}, Re = (r, e) => {
+  return r.setAttribute("fill", `var(${te.edgeColor})`), r;
+}, Fe = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`;
 }, R = (r, e) => {
   const t = [];
@@ -968,23 +968,23 @@ const ee = Object.freeze({
     const o = r.length - 1;
     let s = 0, n = 0, a = 0;
     r.forEach((h, d) => {
-      let c = 0, g = 0, u = 0;
-      const l = d > 0, p = d < o, y = l && p;
-      if (l && (c = -s, g = -n, u = a), p) {
-        const T = r[d + 1];
-        s = T.x - h.x, n = T.y - h.y, a = Math.sqrt(s * s + n * n);
+      let c = 0, u = 0, g = 0;
+      const l = d > 0, w = d < o, p = l && w;
+      if (l && (c = -s, u = -n, g = a), w) {
+        const C = r[d + 1];
+        s = C.x - h.x, n = C.y - h.y, a = Math.sqrt(s * s + n * n);
       }
-      const f = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, m = y ? { x: h.x + s * f, y: h.y + n * f } : h, N = u !== 0 ? Math.min((y ? e : 0) / u, d > 1 ? 0.5 : 1) : 0, C = y ? { x: h.x + c * N, y: h.y + g * N } : h;
-      d > 0 && t.push(`L ${C.x} ${C.y}`), y && t.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${m.x} ${m.y}`
+      const f = a !== 0 ? Math.min((p ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, x = p ? { x: h.x + s * f, y: h.y + n * f } : h, b = g !== 0 ? Math.min((p ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, T = p ? { x: h.x + c * b, y: h.y + u * b } : h;
+      d > 0 && t.push(`L ${T.x} ${T.y}`), p && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
   }
   return t.join(" ");
-}, ct = (r, e) => {
+}, gt = (r, e) => {
   const t = e.x - r.x >= 0, o = r.dirX >= 0, s = e.dirX >= 0;
   if (o === s) {
-    const c = o === t, g = (r.x + e.x) / 2, u = (r.y + e.y) / 2, l = { x: g, y: u };
+    const c = o === t, u = (r.x + e.x) / 2, g = (r.y + e.y) / 2, l = { x: u, y: g };
     return c ? {
       points: [
         { x: r.x, y: r.y },
@@ -1017,7 +1017,7 @@ const ee = Object.freeze({
     midpoint: { x: d.x, y: h }
   };
 };
-class lt {
+class pt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1030,41 +1030,41 @@ class lt {
       arrowOffset: h,
       roundness: d,
       hasSourceArrow: c,
-      hasTargetArrow: g
-    } = e, u = c ? x(
+      hasTargetArrow: u
+    } = e, g = c ? m(
       { x: t.x + a, y: t.y },
       s,
       t
-    ) : t, l = g ? x(
+    ) : t, l = u ? m(
       {
         x: o.x - a,
         y: o.y
       },
       n,
       o
-    ) : o, p = a + h, y = x(
-      { x: t.x + p, y: t.y },
+    ) : o, w = a + h, p = m(
+      { x: t.x + w, y: t.y },
       s,
       t
-    ), w = x({ x: o.x - p, y: o.y }, n, o), f = ct(
+    ), y = m({ x: o.x - w, y: o.y }, n, o), f = gt(
       {
-        x: y.x,
-        y: y.y,
+        x: p.x,
+        y: p.y,
         dirX: s.x
       },
       {
-        x: w.x,
-        y: w.y,
+        x: y.x,
+        y: y.y,
         dirX: n.x
       }
     );
     this.path = R(
-      [u, ...f.points, l],
+      [g, ...f.points, l],
       d
     ), this.midpoint = f.midpoint;
   }
 }
-class gt {
+class wt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1077,45 +1077,45 @@ class gt {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      detourDir: g,
-      detourDistance: u,
+      detourDir: u,
+      detourDistance: g,
       roundness: l
-    } = e, p = t ? x(
+    } = e, w = t ? m(
       { x: s.x + a, y: s.y },
       h,
       s
-    ) : s, y = o ? x(
+    ) : s, p = o ? m(
       {
         x: n.x - a,
         y: n.y
       },
       d,
       n
-    ) : n, w = a + c, f = Math.cos(g) * u, m = Math.sin(g) * u, A = x(
-      { x: s.x + w, y: s.y },
+    ) : n, y = a + c, f = Math.cos(u) * g, x = Math.sin(u) * g, E = m(
+      { x: s.x + y, y: s.y },
       h,
       s
-    ), N = {
-      x: A.x + f,
-      y: A.y + m
-    }, C = x(
-      { x: n.x - w, y: n.y },
+    ), b = {
+      x: E.x + f,
+      y: E.y + x
+    }, T = m(
+      { x: n.x - y, y: n.y },
       d,
       n
-    ), T = {
-      x: C.x + f,
-      y: C.y + m
+    ), C = {
+      x: T.x + f,
+      y: T.y + x
     };
     this.midpoint = {
-      x: (N.x + T.x) / 2,
-      y: (N.y + T.y) / 2
+      x: (b.x + C.x) / 2,
+      y: (b.y + C.y) / 2
     }, this.path = R(
-      [p, A, N, T, C, y],
+      [w, E, b, C, T, p],
       l
     );
   }
 }
-class ut {
+class yt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1128,8 +1128,8 @@ class ut {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: g
-    } = e, u = this.createArrowPoint(
+      roundness: u
+    } = e, g = this.createArrowPoint(
       s,
       h,
       t,
@@ -1139,13 +1139,13 @@ class ut {
       d,
       o,
       -a
-    ), p = a + c, y = { x: t.x + p, y: t.y }, w = x(y, h, t), f = { x: o.x - p, y: o.y }, m = x(f, d, o);
+    ), w = a + c, p = { x: t.x + w, y: t.y }, y = m(p, h, t), f = { x: o.x - w, y: o.y }, x = m(f, d, o);
     this.path = R(
-      [u, w, m, l],
-      g
+      [g, y, x, l],
+      u
     );
-    const A = (w.x + m.x) / 2, N = (w.y + m.y) / 2;
-    this.midpoint = { x: A, y: N };
+    const E = (y.x + x.x) / 2, b = (y.y + x.y) / 2;
+    this.midpoint = { x: E, y: b };
   }
   createArrowPoint(e, t, o, s) {
     if (!e)
@@ -1154,13 +1154,13 @@ class ut {
       x: o.x + s,
       y: o.y
     };
-    return x(n, t, o);
+    return m(n, t, o);
   }
 }
-const pt = (r, e) => {
+const ft = (r, e) => {
   const t = e.y - r.y >= 0, o = r.dirY >= 0, s = e.dirY >= 0;
   if (o === s) {
-    const c = o === t, g = (r.x + e.x) / 2, u = (r.y + e.y) / 2, l = { x: g, y: u };
+    const c = o === t, u = (r.x + e.x) / 2, g = (r.y + e.y) / 2, l = { x: u, y: g };
     return c ? {
       points: [
         { x: r.x, y: r.y },
@@ -1193,7 +1193,7 @@ const pt = (r, e) => {
     midpoint: { x: h, y: d.y }
   };
 };
-class yt {
+class vt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1206,45 +1206,45 @@ class yt {
       arrowOffset: h,
       fromDir: d,
       toDir: c,
-      roundness: g
-    } = e, u = s ? x(
+      roundness: u
+    } = e, g = s ? m(
       { x: t.x + a, y: t.y },
       d,
       t
-    ) : t, l = n ? x(
+    ) : t, l = n ? m(
       {
         x: o.x - a,
         y: o.y
       },
       c,
       o
-    ) : o, p = a + h, y = x(
-      { x: t.x + p, y: t.y },
+    ) : o, w = a + h, p = m(
+      { x: t.x + w, y: t.y },
       d,
       t
-    ), w = x({ x: o.x - p, y: o.y }, c, o), f = pt(
+    ), y = m({ x: o.x - w, y: o.y }, c, o), f = ft(
       {
-        x: y.x,
-        y: y.y,
+        x: p.x,
+        y: p.y,
         dirY: d.y
       },
       {
-        x: w.x,
-        y: w.y,
+        x: y.x,
+        y: y.y,
         dirY: c.y
       }
     );
     this.path = R(
-      [u, ...f.points, l],
-      g
+      [g, ...f.points, l],
+      u
     ), this.midpoint = f.midpoint;
   }
 }
-class te {
+class re {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { side: t, arrowLength: o, arrowOffset: s, dir: n, origin: a, hasArrow: h } = e, d = o + s, c = d + 2 * t, u = [
+    const { side: t, arrowLength: o, arrowOffset: s, dir: n, origin: a, hasArrow: h } = e, d = o + s, c = d + 2 * t, g = [
       { x: o, y: 0 },
       { x: d, y: 0 },
       { x: d, y: t },
@@ -1253,29 +1253,29 @@ class te {
       { x: d, y: -t },
       { x: d, y: 0 },
       { x: o, y: 0 }
-    ].map((p) => x(p, n, { x: 0, y: 0 })).map((p) => ({ x: p.x + a.x, y: p.y + a.y })), l = `M ${a.x} ${a.y} L ${u[0].x} ${u[0].y} `;
-    this.path = `${h ? "" : l}${R(u, e.roundness)}`, this.midpoint = { x: (u[3].x + u[4].x) / 2, y: (u[3].y + u[4].y) / 2 };
+    ].map((w) => m(w, n, { x: 0, y: 0 })).map((w) => ({ x: w.x + a.x, y: w.y + a.y })), l = `M ${a.x} ${a.y} L ${g[0].x} ${g[0].y} `;
+    this.path = `${h ? "" : l}${R(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
   }
 }
-class wt {
+class mt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
-    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, g = Math.sqrt(d * d - s * s), u = g * s / d, l = g + o + t, p = t + u, w = [
+    const { arrowLength: t, radius: o, smallRadius: s, dir: n, origin: a, hasArrow: h } = e, d = s + o, c = s * o / d, u = Math.sqrt(d * d - s * s), g = u * s / d, l = u + o + t, w = t + g, y = [
       { x: t, y: 0 },
-      { x: p, y: c },
-      { x: p, y: -c },
+      { x: w, y: c },
+      { x: w, y: -c },
       { x: l, y: 0 }
-    ].map((A) => x(A, n, { x: 0, y: 0 })).map((A) => ({ x: A.x + a.x, y: A.y + a.y })), f = [
-      `M ${w[0].x} ${w[0].y}`,
-      `A ${s} ${s} 0 0 1 ${w[1].x} ${w[1].y}`,
-      `A ${o} ${o} 0 1 0 ${w[2].x} ${w[2].y}`,
-      `A ${s} ${s} 0 0 1 ${w[0].x} ${w[0].y}`
-    ].join(" "), m = `M ${a.x} ${a.y} L ${w[0].x} ${w[0].y} `;
-    this.path = `${h ? "" : m}${f}`, this.midpoint = w[3];
+    ].map((E) => m(E, n, { x: 0, y: 0 })).map((E) => ({ x: E.x + a.x, y: E.y + a.y })), f = [
+      `M ${y[0].x} ${y[0].y}`,
+      `A ${s} ${s} 0 0 1 ${y[1].x} ${y[1].y}`,
+      `A ${o} ${o} 0 1 0 ${y[2].x} ${y[2].y}`,
+      `A ${s} ${s} 0 0 1 ${y[0].x} ${y[0].y}`
+    ].join(" "), x = `M ${a.x} ${a.y} L ${y[0].x} ${y[0].y} `;
+    this.path = `${h ? "" : x}${f}`, this.midpoint = y[3];
   }
 }
-class ft {
+class xt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1290,27 +1290,27 @@ class ft {
       arrowLength: d
     } = e;
     this.midpoint = { x: (t.x + o.x) / 2, y: (t.y + o.y) / 2 };
-    const c = o.x - t.x, g = o.y - t.y;
-    if (this.diagonalDistance = Math.sqrt(c * c + g * g), this.diagonalDistance === 0) {
+    const c = o.x - t.x, u = o.y - t.y;
+    if (this.diagonalDistance = Math.sqrt(c * c + u * u), this.diagonalDistance === 0) {
       this.path = "";
       return;
     }
-    const u = { x: c, y: g }, l = this.createDirectLinePoint({
+    const g = { x: c, y: u }, l = this.createDirectLinePoint({
       offset: s,
       hasArrow: a,
       flip: 1,
       shift: t,
       arrowLength: d,
-      dir: u
-    }), p = this.createDirectLinePoint({
+      dir: g
+    }), w = this.createDirectLinePoint({
       offset: n,
       hasArrow: h,
       flip: -1,
       shift: o,
       arrowLength: d,
-      dir: u
+      dir: g
     });
-    this.path = `M ${l.x} ${l.y} L ${p.x} ${p.y}`;
+    this.path = `M ${l.x} ${l.y} L ${w.x} ${w.y}`;
   }
   createDirectLinePoint(e) {
     const t = e.hasArrow ? e.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance, { dir: n, shift: a } = e;
@@ -1320,11 +1320,11 @@ class ft {
     };
   }
 }
-const vt = (r, e, t) => {
+const Et = (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 xt {
+class At {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1337,49 +1337,49 @@ class xt {
       fromDir: h,
       toDir: d,
       arrowOffset: c,
-      roundness: g,
-      detourDistance: u
-    } = e, l = t ? x(
+      roundness: u,
+      detourDistance: g
+    } = e, l = t ? m(
       { x: n.x + s, y: n.y },
       h,
       n
-    ) : n, p = o ? x(
+    ) : n, w = o ? m(
       {
         x: a.x - s,
         y: a.y
       },
       d,
       a
-    ) : a, y = s + c, w = x(
-      { x: n.x + y, y: n.y },
+    ) : a, p = s + c, y = m(
+      { x: n.x + p, y: n.y },
       h,
       n
-    ), f = x(
-      { x: a.x - y, y: a.y },
+    ), f = m(
+      { x: a.x - p, y: a.y },
       d,
       a
-    ), m = vt(w, f, u);
+    ), x = Et(y, f, g);
     this.midpoint = {
-      x: (w.x + f.x) / 2,
-      y: m
+      x: (y.x + f.x) / 2,
+      y: x
     }, this.path = R(
       [
         l,
-        w,
-        { x: w.x, y: m },
-        { x: f.x, y: m },
+        y,
+        { x: y.x, y: x },
+        { x: f.x, y: x },
         f,
-        p
+        w
       ],
-      g
+      u
     );
   }
 }
-const mt = (r, e, t) => {
+const St = (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 At {
+class Nt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1392,41 +1392,41 @@ class At {
       from: h,
       to: d,
       arrowOffset: c,
-      detourDistance: g,
-      roundness: u
-    } = e, l = t ? x(
+      detourDistance: u,
+      roundness: g
+    } = e, l = t ? m(
       { x: h.x + s, y: h.y },
       n,
       h
-    ) : h, p = o ? x(
+    ) : h, w = o ? m(
       {
         x: d.x - s,
         y: d.y
       },
       a,
       d
-    ) : d, y = s + c, w = x(
-      { x: h.x + y, y: h.y },
+    ) : d, p = s + c, y = m(
+      { x: h.x + p, y: h.y },
       n,
       h
-    ), f = x(
-      { x: d.x - y, y: d.y },
+    ), f = m(
+      { x: d.x - p, y: d.y },
       a,
       d
-    ), m = mt(w, f, g);
+    ), x = St(y, f, u);
     this.midpoint = {
-      x: m,
-      y: (w.y + f.y) / 2
+      x,
+      y: (y.y + f.y) / 2
     }, this.path = R(
       [
         l,
-        w,
-        { x: m, y: w.y },
-        { x: m, y: f.y },
+        y,
+        { x, y: y.y },
+        { x, y: f.y },
         f,
-        p
+        w
       ],
-      u
+      g
     );
   }
 }
@@ -1452,8 +1452,8 @@ const v = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), we = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
-class X {
+}), me = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
+class G {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1466,64 +1466,64 @@ class X {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Me(e.color), this.svg.appendChild(this.group), this.line = De(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = Y(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = Y(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Re(e.color), this.svg.appendChild(this.group), this.line = Ve(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = H(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = H(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = Te(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = Le(
       e.from,
       e.to,
       this.params.padding
     );
-    Re(this.svg, { x: t, y: o, width: s, height: n });
-    const d = we(e.from.direction), c = we(e.to.direction);
-    let g = { x: -c.x, y: -c.y }, u;
-    e.category === L.PortCycle ? (u = this.params.createCyclePath, g = d) : e.category === L.NodeCycle ? u = this.params.createDetourPath : u = this.params.createLinePath;
-    const l = u(a, h, d, c);
+    Fe(this.svg, { x: t, y: o, width: s, height: n });
+    const d = me(e.from.direction), c = me(e.to.direction);
+    let u = { x: -c.x, y: -c.y }, g;
+    e.category === V.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === V.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
+    const l = g(a, h, d, c);
     this.line.setAttribute("d", l.path);
-    let p = null;
-    this.sourceArrow && (p = this.arrowRenderer({
+    let w = null;
+    this.sourceArrow && (w = this.arrowRenderer({
       direction: d,
       shift: a,
       arrowLength: this.params.arrowLength
-    }), this.sourceArrow.setAttribute("d", p));
-    let y = null;
-    this.targetArrow && (y = this.arrowRenderer({
-      direction: g,
+    }), this.sourceArrow.setAttribute("d", w));
+    let p = null;
+    this.targetArrow && (p = this.arrowRenderer({
+      direction: u,
       shift: h,
       arrowLength: this.params.arrowLength
-    }), this.targetArrow.setAttribute("d", y)), this.afterRenderEmitter.emit({
+    }), this.targetArrow.setAttribute("d", p)), this.afterRenderEmitter.emit({
       edgePath: l,
-      sourceArrowPath: p,
-      targetArrowPath: y
+      sourceArrowPath: w,
+      targetArrowPath: p
     });
   }
 }
-const Et = (r) => (e) => {
+const bt = (r) => (e) => {
   const o = [
     { x: 0, y: 0 },
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
   ].map(
-    (h) => x(h, e.direction, { x: 0, y: 0 })
+    (h) => m(h, e.direction, { x: 0, y: 0 })
   ).map((h) => ({
     x: h.x + e.shift.x,
     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`;
-}, St = (r) => (e) => {
+}, Pt = (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 },
     { x: a, y: h }
   ].map(
-    (y) => x(y, e.direction, { x: 0, y: 0 })
-  ).map((y) => ({
-    x: y.x + e.shift.x,
-    y: y.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, u = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, l = `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 `${g} ${u} ${l} ${p}`;
-}, bt = (r) => (e) => {
-  const t = r.smallRadius, o = r.radius, s = x(
+    (p) => m(p, e.direction, { x: 0, y: 0 })
+  ).map((p) => ({
+    x: p.x + e.shift.x,
+    y: p.y + e.shift.y
+  })), u = `M ${c[0].x} ${c[0].y}`, g = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, l = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${s} ${s} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${u} ${g} ${l} ${w}`;
+}, Tt = (r) => (e) => {
+  const t = r.smallRadius, o = r.radius, s = m(
     {
       x: e.arrowLength,
       y: 0
@@ -1537,33 +1537,33 @@ const Et = (r) => (e) => {
       y: 0
     }
   ), a = [{ x: 0, y: 0 }, { x: s.x, y: -s.y }, s].map(
-    (u) => x(u, e.direction, { x: 0, y: 0 })
-  ).map((u) => ({
-    x: u.x + e.shift.x,
-    y: u.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}`, g = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
-  return `${h} ${d} ${c} ${g}`;
-}, U = (r) => {
+    (g) => m(g, e.direction, { x: 0, y: 0 })
+  ).map((g) => ({
+    x: g.x + e.shift.x,
+    y: g.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}`;
+}, W = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "triangle":
-      return Et({
+      return bt({
         radius: r.radius ?? v.polygonArrowRadius
       });
     case "arc":
-      return St({
+      return Pt({
         radius: r.radius ?? v.circleArrowRadius
       });
     default:
-      return bt({
+      return Tt({
         smallRadius: r.smallRadius ?? v.wedgeArrowSmallRadius,
         angle: r.angle ?? v.wedgeArrowAngle,
         radius: r.radius ?? v.wedgeArrowRadius
       });
   }
 }, O = 50;
-class Nt {
+class Ct {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1580,7 +1580,7 @@ class Nt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new wt({
+    i(this, "createCyclePath", (e, t, o) => new mt({
       origin: e,
       dir: o,
       radius: this.portCycleRadius,
@@ -1588,7 +1588,7 @@ class Nt {
       arrowLength: this.arrowLength,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new dt({
+    i(this, "createDetourPath", (e, t, o, s) => new ut({
       from: e,
       to: t,
       fromDir: o,
@@ -1600,7 +1600,7 @@ class Nt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new ht({
+    i(this, "createLinePath", (e, t, o, s) => new lt({
       from: e,
       to: t,
       fromDir: o,
@@ -1610,10 +1610,10 @@ class Nt {
       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 X({
+    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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: U((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1627,7 +1627,7 @@ class Nt {
     this.pathShape.render(e);
   }
 }
-class Pt {
+class Mt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1643,7 +1643,7 @@ class Pt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new te({
+    i(this, "createCyclePath", (e, t, o) => new re({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1652,7 +1652,7 @@ class Pt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new xt({
+    i(this, "createDetourPath", (e, t, o, s) => new At({
       from: e,
       to: t,
       fromDir: o,
@@ -1664,7 +1664,7 @@ class Pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new lt({
+    i(this, "createLinePath", (e, t, o, s) => new pt({
       from: e,
       to: t,
       fromDir: o,
@@ -1681,10 +1681,10 @@ class Pt {
       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 X({
+    ), 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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: U((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1698,7 +1698,7 @@ class Pt {
     this.pathShape.render(e);
   }
 }
-class Ct {
+class Dt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1715,7 +1715,7 @@ class Ct {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new te({
+    i(this, "createCyclePath", (e, t, o) => new re({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1724,7 +1724,7 @@ class Ct {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new gt({
+    i(this, "createDetourPath", (e, t, o, s) => new wt({
       from: e,
       to: t,
       fromDir: o,
@@ -1737,7 +1737,7 @@ class Ct {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new ut({
+    i(this, "createLinePath", (e, t, o, s) => new yt({
       from: e,
       to: t,
       fromDir: o,
@@ -1754,10 +1754,10 @@ class Ct {
       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 X({
+    ), 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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: U((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1771,7 +1771,7 @@ class Ct {
     this.pathShape.render(e);
   }
 }
-class Tt {
+class Lt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1787,7 +1787,7 @@ class Tt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new te({
+    i(this, "createCyclePath", (e, t, o) => new re({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1796,7 +1796,7 @@ class Tt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new At({
+    i(this, "createDetourPath", (e, t, o, s) => new Nt({
       from: e,
       to: t,
       fromDir: o,
@@ -1808,7 +1808,7 @@ class Tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new yt({
+    i(this, "createLinePath", (e, t, o, s) => new vt({
       from: e,
       to: t,
       fromDir: o,
@@ -1825,10 +1825,10 @@ class Tt {
       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 X({
+    ), 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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: U((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
@@ -1842,7 +1842,7 @@ class Tt {
     this.pathShape.render(e);
   }
 }
-class Le {
+class Ie {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1860,16 +1860,16 @@ class Le {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = P(), 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 = U((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Me(this.color), this.svg.appendChild(this.group), this.line = De(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = Y(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = Y(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = P(), 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 = W((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Re(this.color), this.svg.appendChild(this.group), this.line = Ve(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = H(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = H(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = Te(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = Le(
       e.from,
       e.to,
       O
     );
-    Re(this.svg, { x: t, y: o, width: s, height: n });
-    const d = new ft({
+    Fe(this.svg, { x: t, y: o, width: s, height: n });
+    const d = new xt({
       from: a,
       to: h,
       sourceOffset: this.sourceOffset,
@@ -1879,82 +1879,82 @@ class Le {
       arrowLength: this.arrowLength
     });
     this.line.setAttribute("d", d.path);
-    let c = null, g = null;
-    const u = d.diagonalDistance;
-    if (u === 0)
-      this.sourceArrow !== null && (c = "", this.sourceArrow.setAttribute("d", c)), this.targetArrow !== null && (g = "", this.targetArrow.setAttribute("d", g));
+    let c = null, u = null;
+    const g = d.diagonalDistance;
+    if (g === 0)
+      this.sourceArrow !== null && (c = "", this.sourceArrow.setAttribute("d", c)), this.targetArrow !== null && (u = "", this.targetArrow.setAttribute("d", u));
     else {
       const l = {
-        x: (h.x - a.x) / u,
-        y: (h.y - a.y) / u
+        x: (h.x - a.x) / g,
+        y: (h.y - a.y) / g
       };
       if (this.sourceArrow) {
-        const p = {
+        const w = {
           x: l.x * this.sourceOffset,
           y: l.y * this.sourceOffset
         };
         c = this.arrowRenderer({
           direction: l,
-          shift: p,
+          shift: w,
           arrowLength: this.arrowLength
         }), this.sourceArrow.setAttribute("d", c);
       }
       if (this.targetArrow) {
-        const p = {
+        const w = {
           x: l.x * this.targetOffset,
           y: l.y * this.targetOffset
         };
-        g = this.arrowRenderer({
+        u = this.arrowRenderer({
           direction: { x: -l.x, y: -l.y },
           shift: {
-            x: h.x - p.x,
-            y: h.y - p.y
+            x: h.x - w.x,
+            y: h.y - w.y
           },
           arrowLength: this.arrowLength
-        }), this.targetArrow.setAttribute("d", g);
+        }), this.targetArrow.setAttribute("d", u);
       }
     }
     this.afterRenderEmitter.emit({
       edgePath: d,
       sourceArrowPath: c,
-      targetArrowPath: g
+      targetArrowPath: u
     });
   }
 }
-const Mt = () => {
+const Rt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, Dt = (r) => {
+}, Vt = (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;
-}, fe = (r) => {
+}, xe = (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 Rt extends Error {
+class Ft extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Fe {
+class Ue {
   constructor(e, t) {
     i(this, "svg");
     i(this, "group");
     i(this, "line");
     i(this, "sourceArrow");
     i(this, "targetArrow");
-    i(this, "handle", Mt());
+    i(this, "handle", Rt());
     i(this, "onAfterRender");
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Fe)
-      throw new Rt(
+    if (this.baseEdge = e, e instanceof Ue)
+      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 o = (t == null ? void 0 : t.distance) ?? v.interactiveWidth;
-    this.interactiveLine = Dt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = fe(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = fe(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
+    this.interactiveLine = Vt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = xe(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = xe(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);
     });
   }
@@ -1962,7 +1962,7 @@ class Fe {
     this.baseEdge.render(e);
   }
 }
-class Mr {
+class Fr {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -1979,7 +1979,7 @@ class Mr {
     this.baseShape.render(e);
   }
 }
-class Ie {
+class $e {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -2075,7 +2075,7 @@ class Ie {
     return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class J {
+class K {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -2091,15 +2091,15 @@ class J {
     this.counter = 0;
   }
 }
-class Ve {
+class Be {
   constructor(e, t, o) {
-    i(this, "nodeIdGenerator", new J(
+    i(this, "nodeIdGenerator", new K(
       (e) => this.graphStore.hasNode(e)
     ));
-    i(this, "portIdGenerator", new J(
+    i(this, "portIdGenerator", new K(
       (e) => this.graphStore.hasPort(e)
     ));
-    i(this, "edgeIdGenerator", new J(
+    i(this, "edgeIdGenerator", new K(
       (e) => this.graphStore.hasEdge(e)
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -2222,18 +2222,18 @@ class Ve {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const Lt = (r) => {
+const It = (r) => {
   setTimeout(() => {
     r();
   });
-}, Ft = (r) => {
+}, Ut = (r) => {
   queueMicrotask(() => {
     r();
   });
-}, re = (r) => {
+}, oe = (r) => {
   r();
 };
-class $e {
+class We {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
@@ -2256,26 +2256,26 @@ class $e {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const It = (r, e) => Symbol.iterator in r ? {
+const $t = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
-  contentOffset: e.focus.contentOffset,
+  contentPadding: e.focus.contentPadding,
   animationDuration: e.focus.animationDuration
 } : {
   minContentScale: r.minContentScale ?? e.focus.minContentScale,
   nodes: r.nodes ?? [],
-  contentOffset: r.contentOffset ?? e.focus.contentOffset,
+  contentPadding: r.contentPadding ?? r.contentOffset ?? e.focus.contentPadding,
   animationDuration: r.animationDuration ?? e.focus.animationDuration
-}, Be = (r, e, t) => ({
+}, Oe = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Ue = (r, e, t, o) => ({
+}), ze = (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 Oe {
+class ke {
   constructor(e, t, o, s) {
     this.graphStore = e, this.viewportStore = t, this.params = o, this.win = s;
   }
@@ -2287,22 +2287,22 @@ class Oe {
   }
   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 g = Be(a, d, c);
-    const u = t == null ? void 0 : t.contentScale;
-    if (u !== void 0) {
-      const p = 1 / u;
-      g = Ue(
-        g,
-        p / a.scale,
+    let u = Oe(a, d, c);
+    const g = t == null ? void 0 : t.contentScale;
+    if (g !== void 0) {
+      const w = 1 / g;
+      u = ze(
+        u,
+        w / a.scale,
         n.x,
         n.y
       );
     }
     const l = (t == null ? void 0 : t.animationDuration) ?? 0;
-    l > 0 ? this.animateNavigation(a, g, l) : this.viewportStore.patchViewportMatrix(g);
+    l > 0 ? this.animateNavigation(a, u, l) : this.viewportStore.patchViewportMatrix(u);
   }
   focus(e) {
-    const t = It(e ?? {}, this.params);
+    const t = $t(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2319,14 +2319,14 @@ class Oe {
       const { payload: c } = this.graphStore.getNode(d);
       c.x !== null && c.y !== null && (h.size === 0 || h.has(d)) && (t = Math.min(c.x, t), o = Math.max(c.x, o), s = Math.min(c.y, s), n = Math.max(c.y, n), a++);
     }), a > 0) {
-      t -= e.contentOffset, s -= e.contentOffset, o += e.contentOffset, n += e.contentOffset;
+      t -= e.contentPadding, s -= e.contentPadding, o += e.contentPadding, n += e.contentPadding;
       const d = {
         x: (t + o) / 2,
         y: (s + n) / 2
-      }, { scale: c } = this.viewportStore.getContentMatrix(), g = (n - s) * c, u = (o - t) * c, { width: l, height: p } = this.viewportStore.getDimensions(), y = Math.max(
-        u / l,
-        g / p
-      ), w = y > 1 ? c / y : c, f = Math.max(w, e.minContentScale);
+      }, { scale: c } = this.viewportStore.getContentMatrix(), u = (n - s) * c, g = (o - t) * c, { width: l, height: w } = this.viewportStore.getDimensions(), p = Math.max(
+        g / l,
+        u / w
+      ), y = p > 1 ? c / p : c, f = Math.max(y, e.minContentScale);
       this.center(d, {
         contentScale: f,
         animationDuration: e.animationDuration
@@ -2351,39 +2351,39 @@ class Oe {
     this.win.requestAnimationFrame(a);
   }
 }
-const We = (r, e, t) => {
-  const o = new be(), s = new Ie(o), n = new $e(e), a = new Ee(o, e, r), h = {
+const Ye = (r, e, t) => {
+  const o = new Te(), s = new $e(o), n = new We(e), a = new be(o, e, r), h = {
     nodes: {
-      centerFn: Ce,
+      centerFn: De,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Le(),
+      shapeFactory: () => new Ie(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
-  }, d = new Ve(
+  }, d = new Be(
     o,
     a,
     h
   ), c = {
     focus: {
-      contentOffset: 0,
+      contentPadding: 0,
       minContentScale: 0,
-      schedule: re,
+      schedule: oe,
       animationDuration: 0
     }
-  }, g = new Oe(
+  }, u = new ke(
     o,
     e,
     c,
     t
   );
-  return new Se(s, n, d, g);
+  return new Pe(s, n, d, u);
 };
-class G {
+class j {
   constructor(e, t, o, s) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2408,7 +2408,7 @@ class G {
       }));
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!F(
+      if (!D(
         this.window,
         this.element,
         e.clientX,
@@ -2440,7 +2440,7 @@ class G {
     });
     i(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!F(
+      if (!D(
         this.window,
         this.element,
         t.clientX,
@@ -2467,7 +2467,7 @@ class G {
     this.canvas = e, this.element = t, this.window = 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 G(e, t, o, s);
+    new j(e, t, o, s);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2492,7 +2492,7 @@ class G {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Vt {
+class Bt {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -2506,7 +2506,7 @@ class Vt {
     }), this.params.onAfterApplied();
   }
 }
-class $t {
+class Wt {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -2521,7 +2521,7 @@ class $t {
     }), this.params.onAfterApplied();
   }
 }
-class oe {
+class se {
   constructor(e, t, o, s) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2558,7 +2558,7 @@ class oe {
         nodeId: s,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, k(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, Y(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2594,13 +2594,13 @@ class oe {
       });
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!F(
+      if (!D(
         this.window,
         this.element,
         e.clientX,
         e.clientY
       )) {
-        this.cancelMouseDrag();
+        this.stopMouseDrag();
         return;
       }
       this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
@@ -2609,19 +2609,19 @@ class oe {
       });
     });
     i(this, "onWindowMouseUp", (e) => {
-      this.params.mouseUpEventVerifier(e) && this.cancelMouseDrag();
+      this.params.mouseUpEventVerifier(e) && this.stopMouseDrag();
     });
     i(this, "onWindowTouchMove", (e) => {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!F(
+      if (!D(
         this.window,
         this.element,
         t.clientX,
         t.clientY
       )) {
-        this.cancelTouchDrag();
+        this.stopTouchDrag();
         return;
       }
       this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
@@ -2630,7 +2630,7 @@ class oe {
       });
     });
     i(this, "onWindowTouchFinish", () => {
-      this.cancelTouchDrag();
+      this.stopTouchDrag();
     });
     i(this, "reset", () => {
       this.canvas.graph.getAllNodeIds().forEach((e) => {
@@ -2644,7 +2644,7 @@ class oe {
     this.canvas = e, this.element = t, this.window = o, this.params = s, 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) {
-    new oe(e, t, o, s);
+    new se(e, t, o, s);
   }
   moveNode(e, t) {
     if (!this.graph.hasNode(e.nodeId))
@@ -2669,13 +2669,13 @@ class oe {
       this.canvas.updateNode(e, { priority: this.maxNodePriority });
     }
   }
-  cancelMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, k(this.element, null), this.removeMouseDragListeners();
+  stopMouseDrag() {
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, Y(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
-  cancelTouchDrag() {
+  stopTouchDrag() {
     if (this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId)) {
       const e = this.graph.getNode(this.grabbedNode.nodeId);
       this.params.onNodeDragFinished({
@@ -2713,7 +2713,7 @@ class oe {
     return e;
   }
 }
-const W = (r) => {
+const z = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
@@ -2732,7 +2732,7 @@ const W = (r) => {
     touches: e
   };
 };
-class j {
+class J {
   constructor(e, t, o, s) {
     i(this, "viewport");
     i(this, "prevTouches", null);
@@ -2742,14 +2742,14 @@ class j {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     i(this, "onMouseDown", (e) => {
-      this.params.mouseDownEventVerifier(e) && (k(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && (Y(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
     i(this, "onWindowMouseMove", (e) => {
-      const t = F(
+      const t = D(
         this.window,
         this.element,
         e.clientX,
@@ -2775,10 +2775,10 @@ class j {
     });
     i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = W(e);
+        this.prevTouches = z(e);
         return;
       }
-      this.prevTouches = W(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = z(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2787,9 +2787,9 @@ class j {
       }), this.startRegisteredTransform();
     });
     i(this, "onWindowTouchMove", (e) => {
-      const t = W(e);
+      const t = z(e);
       if (!t.touches.every(
-        (s) => F(this.window, this.element, s[0], s[1])
+        (s) => D(this.window, this.element, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2804,7 +2804,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 = z(e) : this.stopTouchDrag();
     });
     i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
@@ -2822,10 +2822,10 @@ class j {
     }), e.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s) {
-    new j(e, t, o, s);
+    new J(e, t, o, s);
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = Be(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), s = Oe(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: s,
       canvasWidth: n,
@@ -2834,7 +2834,7 @@ class j {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), n = Ue(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), n = ze(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: n,
       canvasWidth: a,
@@ -2843,7 +2843,7 @@ class j {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    k(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    Y(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2873,7 +2873,7 @@ class j {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
   }
 }
-class se {
+class ie {
   constructor(e, t, o, s, n, a) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
@@ -2920,7 +2920,7 @@ class se {
         this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
       }
     };
-    j.configure(
+    J.configure(
       e,
       this.element,
       this.window,
@@ -2928,7 +2928,7 @@ class se {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, o, s, n, a) {
-    new se(
+    new ie(
       e,
       t,
       o,
@@ -2944,38 +2944,38 @@ class se {
   }
   scheduleEnsureViewportAreaLoaded() {
     setTimeout(() => {
-      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, g = s + a + this.nodeHorizontal, u = n + h + this.nodeVertical;
-      this.loadedArea.xFrom < d && this.loadedArea.xTo > g && this.loadedArea.yFrom < c && this.loadedArea.yTo > u || this.loadAreaAroundViewport();
+      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, u = s + a + this.nodeHorizontal, g = n + h + this.nodeVertical;
+      this.loadedArea.xFrom < d && this.loadedArea.xTo > u && this.loadedArea.yFrom < c && this.loadedArea.yTo > g || this.loadAreaAroundViewport();
     });
   }
   loadAreaAroundViewport() {
-    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, u = 3 * h + 2 * this.nodeVertical;
+    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, u = 3 * a + 2 * this.nodeHorizontal, g = 3 * h + 2 * this.nodeVertical;
     this.trigger.emit({
       x: d,
       y: c,
-      width: g,
-      height: u
+      width: u,
+      height: g
     });
   }
 }
-const Bt = () => {
+const Ot = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Ut = () => {
+}, zt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, Ot = () => {
+}, kt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class ie {
+class ne {
   constructor(e, t, o) {
-    i(this, "svg", Bt());
-    i(this, "patternRenderingRectangle", Ut());
-    i(this, "pattern", Ot());
+    i(this, "svg", Ot());
+    i(this, "patternRenderingRectangle", zt());
+    i(this, "pattern", kt());
     i(this, "patternContent");
     i(this, "tileWidth");
     i(this, "tileHeight");
@@ -2996,7 +2996,7 @@ class ie {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new ie(e, t, o);
+    new ne(e, t, o);
   }
   updateVisibility() {
     const { scale: e } = this.canvas.viewport.getViewportMatrix(), t = e > this.maxViewportScale;
@@ -3009,7 +3009,7 @@ class ie {
     this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
   }
 }
-class ne {
+class ae {
   constructor(e, t, o, s, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -3017,11 +3017,11 @@ class ne {
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = We(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ye(
       this.overlayLayer,
       this.viewportStore,
       this.window
-    ), G.configure(
+    ), j.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -3045,7 +3045,7 @@ class ne {
     );
   }
   static configure(e, t, o, s, n) {
-    new ne(
+    new ae(
       e,
       t,
       o,
@@ -3059,23 +3059,23 @@ class ne {
     const n = s.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
       x: a - d.x,
       y: h - d.y
-    }), g = this.canvas.viewport.createContentCoords({
+    }), u = this.canvas.viewport.createContentCoords({
       x: t.x - d.x,
       y: t.y - d.y
-    }), u = {
+    }), g = {
       overlayNodeId: M.StaticNodeId,
       portCoords: c,
       portDirection: s.direction
     }, l = {
       overlayNodeId: M.DraggingNodeId,
-      portCoords: g,
+      portCoords: u,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = o === "direct";
-    const [p, y] = this.isTargetDragging ? [u, l] : [l, u];
-    this.overlayCanvas.addNode(H(p)), this.overlayCanvas.addNode(H(y)), this.overlayCanvas.addEdge({
-      from: p.overlayNodeId,
-      to: y.overlayNodeId,
+    const [w, p] = this.isTargetDragging ? [g, l] : [l, g];
+    this.overlayCanvas.addNode(X(w)), this.overlayCanvas.addNode(X(p)), this.overlayCanvas.addEdge({
+      from: w.overlayNodeId,
+      to: p.overlayNodeId,
       shape: this.params.edgeShapeFactory(M.EdgeId)
     });
   }
@@ -3083,7 +3083,7 @@ class ne {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = Pe(this.canvas.graph, e), o = this.staticPortId;
+    const t = Me(this.canvas.graph, e), o = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: o,
@@ -3105,7 +3105,7 @@ class ne {
     });
   }
 }
-class ae {
+class he {
   constructor(e, t, o, s, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -3114,11 +3114,11 @@ class ae {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = We(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ye(
       this.overlayLayer,
       this.viewportStore,
       this.window
-    ), G.configure(
+    ), j.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -3139,7 +3139,7 @@ class ae {
     );
   }
   static configure(e, t, o, s, n) {
-    new ae(
+    new he(
       e,
       t,
       o,
@@ -3153,13 +3153,13 @@ class ae {
       return !1;
     const s = this.canvas.graph.getEdge(o), n = e === s.from, a = e === s.to, h = n ? s.to : s.from;
     this.staticPortId = h, this.isTargetDragging = a;
-    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), u = {
-      x: g.x + g.width / 2,
-      y: g.y + g.height / 2
-    }, l = this.overlayLayer.getBoundingClientRect(), p = this.canvas.viewport.createContentCoords({
-      x: u.x - l.x,
-      y: u.y - l.y
-    }), y = this.canvas.viewport.createContentCoords({
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), u = c.element.getBoundingClientRect(), g = {
+      x: u.x + u.width / 2,
+      y: u.y + u.height / 2
+    }, l = this.overlayLayer.getBoundingClientRect(), w = this.canvas.viewport.createContentCoords({
+      x: g.x - l.x,
+      y: g.y - l.y
+    }), p = this.canvas.viewport.createContentCoords({
       x: t.x - l.x,
       y: t.y - l.y
     });
@@ -3170,22 +3170,22 @@ class ae {
       shape: s.shape,
       priority: s.priority
     }, this.canvas.removeEdge(o);
-    const w = {
+    const y = {
       overlayNodeId: M.StaticNodeId,
-      portCoords: p,
+      portCoords: w,
       portDirection: c.direction
     }, f = {
       overlayNodeId: M.DraggingNodeId,
-      portCoords: y,
+      portCoords: p,
       portDirection: d.direction
-    }, [m, A] = this.isTargetDragging ? [w, f] : [f, w];
-    this.overlayCanvas.addNode(H(m)), this.overlayCanvas.addNode(H(A));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
+    }, [x, E] = this.isTargetDragging ? [y, f] : [f, y];
+    this.overlayCanvas.addNode(X(x)), this.overlayCanvas.addNode(X(E));
+    const b = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
       id: M.EdgeId,
-      from: m.overlayNodeId,
-      to: A.overlayNodeId,
-      shape: N
+      from: x.overlayNodeId,
+      to: E.overlayNodeId,
+      shape: b
     }), !0;
   }
   resetDragState() {
@@ -3202,7 +3202,7 @@ class ae {
     });
   }
   tryCreateConnection(e) {
-    const t = Pe(this.canvas.graph, e);
+    const t = Me(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(M.EdgeId), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -3235,17 +3235,17 @@ class ae {
     }
   }
 }
-class he {
+class de {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new he(e, t);
+    new de(e, t);
   }
 }
-class de {
+class ce {
   constructor(e, t, o) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
@@ -3262,7 +3262,7 @@ class de {
     });
   }
   static configure(e, t, o) {
-    new de(
+    new ce(
       e,
       t,
       o
@@ -3272,23 +3272,23 @@ class de {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class Wt {
+class Yt {
   static configure(e, t) {
-    const o = t.applyOn, s = new Vt(e, t.algorithm, {
+    const o = t.applyOn, s = new Bt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
     });
     switch (o.type) {
       case "trigger": {
-        he.configure(
+        de.configure(
           s,
           o.trigger
         );
         break;
       }
       case "topologyChangeSchedule": {
-        de.configure(
+        ce.configure(
           e.graph,
           s,
           o.schedule
@@ -3298,7 +3298,7 @@ class Wt {
     }
   }
 }
-class zt {
+class Xt {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3313,95 +3313,316 @@ class zt {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class ce {
+class le {
   constructor(e, t, o) {
     i(this, "applier");
     i(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = o, this.applier = new $t(e, t.algorithm, {
+    this.win = o, this.applier = new Wt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new zt(this.win, this.step);
+    }), new Xt(this.win, this.step);
   }
   static configure(e, t, o) {
-    new ce(e, t, o);
+    new le(e, t, o);
+  }
+}
+class ue {
+  constructor(e) {
+    i(this, "element");
+    i(this, "canvas");
+    i(this, "window");
+    i(this, "onNodeSelected");
+    i(this, "mouseDownEventVerifier");
+    i(this, "mouseUpEventVerifier");
+    i(this, "movementThreshold");
+    i(this, "selectionCandidateNodeId", null);
+    i(this, "movedDistance", 0);
+    i(this, "previousMouse", null);
+    i(this, "previousTouch", null);
+    i(this, "onAfterNodeAdded", (e) => {
+      const { element: t } = this.canvas.graph.getNode(e);
+      t.addEventListener("mousedown", this.onNodeMouseDown, {
+        passive: !0
+      }), t.addEventListener("touchstart", this.onNodeTouchStart, {
+        passive: !0
+      });
+    });
+    i(this, "onBeforeNodeRemoved", (e) => {
+      const { element: t } = this.canvas.graph.getNode(e);
+      t.removeEventListener("mousedown", this.onNodeMouseDown), t.removeEventListener("touchstart", this.onNodeTouchStart);
+    });
+    i(this, "reset", () => {
+      this.canvas.graph.getAllNodeIds().forEach((e) => {
+        const { element: t } = this.canvas.graph.getNode(e);
+        t.removeEventListener("mousedown", this.onNodeMouseDown), t.removeEventListener("touchstart", this.onNodeTouchStart);
+      });
+    });
+    i(this, "revert", () => {
+      this.reset(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
+    });
+    i(this, "onNodeMouseDown", (e) => {
+      const t = e;
+      if (!this.mouseDownEventVerifier(t))
+        return;
+      const o = this.canvas.graph.findNodeIdByElement(
+        e.currentTarget
+      );
+      this.selectionCandidateNodeId = o, this.previousMouse = { x: t.clientX, y: t.clientY }, this.movedDistance = 0, this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        passive: !0
+      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        passive: !0
+      });
+    });
+    i(this, "onNodeTouchStart", (e) => {
+      const t = e;
+      if (t.touches.length !== 1)
+        return;
+      const o = this.canvas.graph.findNodeIdByElement(
+        t.currentTarget
+      );
+      this.selectionCandidateNodeId = o, this.previousTouch = t.touches[0], this.movedDistance = 0, this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        passive: !0
+      }), this.window.addEventListener("touchend", this.onWindowTouchEnd, {
+        passive: !0
+      }), this.window.addEventListener("touchcancel", this.onWindowTouchCancel, {
+        passive: !0
+      });
+    });
+    i(this, "onWindowMouseMove", (e) => {
+      const t = e, o = this.previousMouse, s = t.clientX - o.x, n = t.clientY - o.y;
+      if (!D(
+        this.window,
+        this.element,
+        t.clientX,
+        t.clientY
+      )) {
+        this.removeWindowMouseListeners();
+        return;
+      }
+      this.processMoveThresholdVerification(s, n, () => {
+        this.removeWindowMouseListeners();
+      }), this.previousMouse = { x: t.clientX, y: t.clientY };
+    });
+    i(this, "onWindowTouchMove", (e) => {
+      const t = e;
+      if (t.touches.length !== 1) {
+        this.removeWindowTouchListeners();
+        return;
+      }
+      const o = t.touches[0];
+      if (!D(this.window, this.element, o.clientX, o.clientY)) {
+        this.removeWindowTouchListeners();
+        return;
+      }
+      const s = this.previousTouch, n = o.clientX - s.clientX, a = o.clientY - s.clientY;
+      this.processMoveThresholdVerification(n, a, () => {
+        this.removeWindowTouchListeners();
+      }), this.previousTouch = o;
+    });
+    i(this, "onWindowMouseUp", (e) => {
+      const t = e;
+      this.mouseUpEventVerifier(t) && (this.removeWindowMouseListeners(), this.trySelectNode());
+    });
+    i(this, "onWindowTouchEnd", () => {
+      this.removeWindowTouchListeners(), this.trySelectNode();
+    });
+    i(this, "onWindowTouchCancel", () => {
+      this.removeWindowTouchListeners();
+    });
+    this.element = e.element, this.canvas = e.canvas, this.window = e.window, this.mouseDownEventVerifier = e.mouseDownEventVerifier, this.mouseUpEventVerifier = e.mouseUpEventVerifier, this.onNodeSelected = e.onNodeSelected, this.movementThreshold = e.movementThreshold, 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 ue(e);
+  }
+  removeWindowMouseListeners() {
+    this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
+  }
+  removeWindowTouchListeners() {
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchEnd), this.window.removeEventListener("touchcancel", this.onWindowTouchCancel);
+  }
+  trySelectNode() {
+    const e = this.selectionCandidateNodeId;
+    this.canvas.graph.hasNode(e) && this.onNodeSelected(e);
+  }
+  processMoveThresholdVerification(e, t, o) {
+    const s = Math.sqrt(e * e + t * t);
+    this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
+  }
+}
+class ge {
+  constructor(e) {
+    i(this, "element");
+    i(this, "canvas");
+    i(this, "window");
+    i(this, "onCanvasSelected");
+    i(this, "movementThreshold");
+    i(this, "mouseDownEventVerifier");
+    i(this, "mouseUpEventVerifier");
+    i(this, "movedDistance", 0);
+    i(this, "previousMouseDown", null);
+    i(this, "previousTouch", null);
+    i(this, "onMouseDown", (e) => {
+      const t = e;
+      this.mouseDownEventVerifier(t) && (this.previousMouseDown = { x: t.clientX, y: t.clientY }, this.movedDistance = 0, this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        passive: !0
+      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        passive: !0
+      }));
+    });
+    i(this, "onTouchStart", (e) => {
+      const t = e;
+      if (t.touches.length !== 1)
+        return;
+      const o = t.touches[0];
+      this.previousTouch = o, this.movedDistance = 0, this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        passive: !0
+      }), this.window.addEventListener("touchend", this.onWindowTouchEnd, {
+        passive: !0
+      }), this.window.addEventListener("touchcancel", this.onWindowTouchCancel, {
+        passive: !0
+      });
+    });
+    i(this, "onWindowMouseMove", (e) => {
+      const t = e;
+      if (!D(
+        this.window,
+        this.element,
+        t.clientX,
+        t.clientY
+      )) {
+        this.removeWindowMouseListeners();
+        return;
+      }
+      const o = this.previousMouseDown, s = t.clientX - o.x, n = t.clientY - o.y;
+      this.processMoveThresholdVerification(s, n, () => {
+        this.removeWindowMouseListeners();
+      }), this.previousMouseDown = { x: t.clientX, y: t.clientY };
+    });
+    i(this, "onWindowTouchMove", (e) => {
+      const t = e;
+      if (t.touches.length !== 1) {
+        this.removeWindowTouchListeners();
+        return;
+      }
+      const o = t.touches[0];
+      if (!D(this.window, this.element, o.clientX, o.clientY)) {
+        this.removeWindowTouchListeners();
+        return;
+      }
+      const s = this.previousTouch, n = o.clientX - s.clientX, a = o.clientY - s.clientY;
+      this.processMoveThresholdVerification(n, a, () => {
+        this.removeWindowTouchListeners();
+      }), this.previousTouch = o;
+    });
+    i(this, "onWindowMouseUp", (e) => {
+      const t = e;
+      this.mouseUpEventVerifier(t) && (this.onCanvasSelected(), this.removeWindowMouseListeners());
+    });
+    i(this, "onWindowTouchEnd", () => {
+      this.onCanvasSelected(), this.removeWindowTouchListeners();
+    });
+    i(this, "onWindowTouchCancel", () => {
+      this.removeWindowTouchListeners();
+    });
+    i(this, "restore", () => {
+      this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("touchstart", this.onTouchStart), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
+    });
+    this.element = e.element, this.window = e.window, this.onCanvasSelected = e.onCanvasSelected, this.canvas = e.canvas, this.movementThreshold = e.movementThreshold, this.mouseDownEventVerifier = e.mouseDownEventVerifier, this.mouseUpEventVerifier = e.mouseUpEventVerifier, this.canvas.onBeforeDestroy.subscribe(this.restore), this.element.addEventListener("mousedown", this.onMouseDown, {
+      passive: !0
+    }), this.element.addEventListener("touchstart", this.onTouchStart, {
+      passive: !0
+    });
+  }
+  static configure(e) {
+    new ge(e);
+  }
+  removeWindowMouseListeners() {
+    this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
+  }
+  removeWindowTouchListeners() {
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchEnd), this.window.removeEventListener("touchcancel", this.onWindowTouchCancel);
+  }
+  processMoveThresholdVerification(e, t, o) {
+    const s = Math.sqrt(e * e + t * t);
+    this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
   }
 }
-const kt = () => {
+const Ht = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, Q = () => {
+}, Z = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, ve = () => {
-  const r = Q();
+}, Ee = () => {
+  const r = Z();
   return r.style.pointerEvents = "none", r;
 };
-class Ht {
+class Gt {
   constructor(e) {
-    i(this, "background", Q());
-    i(this, "main", Q());
-    i(this, "overlayConnectablePorts", ve());
-    i(this, "overlayDraggableEdges", ve());
-    i(this, "host", kt());
+    i(this, "background", Z());
+    i(this, "main", Z());
+    i(this, "overlayConnectablePorts", Ee());
+    i(this, "overlayDraggableEdges", Ee());
+    i(this, "host", Ht());
     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 Yt = (r) => {
-  var p, y, w, f, m, A;
-  const e = ((p = r.events) == null ? void 0 : p.onNodeDragStarted) ?? (() => {
-  }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
-  }), o = r.nodeDragVerifier ?? (() => !0), s = ((w = r.events) == null ? void 0 : w.onNodeDragFinished) ?? (() => {
-  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (f = r.mouse) == null ? void 0 : f.dragCursor, d = h !== void 0 ? h : "grab", c = (m = r.mouse) == null ? void 0 : m.mouseDownEventVerifier, g = c !== void 0 ? c : (N) => N.button === 0, u = (A = r.mouse) == null ? void 0 : A.mouseUpEventVerifier, l = u !== void 0 ? u : (N) => N.button === 0;
+const jt = (r) => {
+  var w, p, y, f, x, E;
+  const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
+  }), t = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
+  }), o = r.nodeDragVerifier ?? (() => !0), s = ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
+  }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (f = r.mouse) == null ? void 0 : f.dragCursor, d = h !== void 0 ? h : "grab", c = (x = r.mouse) == null ? void 0 : x.mouseDownEventVerifier, u = c !== void 0 ? c : (b) => b.button === 0, g = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, l = g !== void 0 ? g : (b) => b.button === 0;
   return {
     moveOnTop: n,
     moveEdgesOnTop: a,
     dragCursor: d,
     gridSize: r.gridSize ?? null,
-    mouseDownEventVerifier: g,
+    mouseDownEventVerifier: u,
     mouseUpEventVerifier: l,
     onNodeDragStarted: e,
     onNodeDrag: t,
     nodeDragVerifier: o,
     onNodeDragFinished: s
   };
-}, Xt = (r) => {
+}, Jt = (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;
     a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
     const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
     a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
-    const g = n.canvasHeight * n.prevTransform.scale, u = s - g;
-    return h > u && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, u)), { scale: n.nextTransform.scale, x: a, y: h };
+    const u = n.canvasHeight * n.prevTransform.scale, g = s - u;
+    return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, Gt = (r) => {
+}, Kt = (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;
-    let d = h.scale, c = h.x, g = h.y;
+    let d = h.scale, c = h.x, u = h.y;
     if (h.scale > s && h.scale > a.scale) {
-      d = Math.max(a.scale, s), c = a.x, g = a.y;
-      const u = (d - a.scale) / (h.scale - a.scale);
-      c = a.x + (h.x - a.x) * u, g = a.y + (h.y - a.y) * u;
+      d = Math.max(a.scale, s), c = a.x, u = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, u = a.y + (h.y - a.y) * g;
     }
     if (h.scale < o && h.scale < a.scale) {
-      d = Math.min(a.scale, o), c = a.x, g = a.y;
-      const u = (d - a.scale) / (h.scale - a.scale);
-      c = a.x + (h.x - a.x) * u, g = a.y + (h.y - a.y) * u;
+      d = Math.min(a.scale, o), c = a.x, u = a.y;
+      const g = (d - a.scale) / (h.scale - a.scale);
+      c = a.x + (h.x - a.x) * g, u = a.y + (h.y - a.y) * g;
     }
     return {
       scale: d,
       x: c,
-      y: g
+      y: u
     };
   };
-}, jt = (r) => (e) => r.reduce(
+}, Qt = (r) => (e) => r.reduce(
   (t, o) => o({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3409,38 +3630,38 @@ const Yt = (r) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), xe = (r) => {
+), Ae = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Gt({
+      return Kt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Xt({
+      return Jt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, me = (r) => {
-  var y, w, f, m, A, N, C, T, I, V, $, ge;
-  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
+}, Se = (r) => {
+  var p, y, f, x, E, b, T, C, I, U, $, we;
+  const e = (p = r == null ? void 0 : r.scale) == null ? void 0 : p.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let s;
-  o !== void 0 ? Array.isArray(o) ? s = jt(
+  o !== void 0 ? Array.isArray(o) ? s = Qt(
     o.map(
-      (D) => xe(D)
+      (L) => Ae(L)
     )
-  ) : s = xe(o) : s = (D) => D.nextTransform;
-  const n = ((w = r == null ? void 0 : r.shift) == null ? void 0 : w.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeTransformChange) ?? (() => {
-  }), h = ((m = r == null ? void 0 : r.events) == null ? void 0 : m.onTransformChange) ?? (() => {
-  }), d = (A = r == null ? void 0 : r.shift) == null ? void 0 : A.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, g = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseUpEventVerifier, u = g !== void 0 ? g : (D) => D.button === 0, l = (C = r == null ? void 0 : r.scale) == null ? void 0 : C.mouseWheelEventVerifier, p = l !== void 0 ? l : () => !0;
+  ) : s = Ae(o) : s = (L) => L.nextTransform;
+  const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeTransformChange) ?? (() => {
+  }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
+  }), d = (E = r == null ? void 0 : r.shift) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (L) => L.button === 0, u = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = u !== void 0 ? u : (L) => L.button === 0, l = (T = r == null ? void 0 : r.scale) == null ? void 0 : T.mouseWheelEventVerifier, w = l !== void 0 ? l : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onTransformStarted) ?? (() => {
+    onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((I = r == null ? void 0 : r.events) == null ? void 0 : I.onTransformFinished) ?? (() => {
     }),
@@ -3449,37 +3670,37 @@ const Yt = (r) => {
     transformPreprocessor: s,
     shiftCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: u,
-    mouseWheelEventVerifier: p,
-    scaleWheelFinishTimeout: ((V = r == null ? void 0 : r.scale) == null ? void 0 : V.wheelFinishTimeout) ?? 500,
+    mouseUpEventVerifier: g,
+    mouseWheelEventVerifier: w,
+    scaleWheelFinishTimeout: ((U = r == null ? void 0 : r.scale) == null ? void 0 : U.wheelFinishTimeout) ?? 500,
     onResizeTransformStarted: (($ = r == null ? void 0 : r.events) == null ? void 0 : $.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((ge = r == null ? void 0 : r.events) == null ? void 0 : ge.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((we = r == null ? void 0 : r.events) == null ? void 0 : we.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Jt = (r, e) => {
+}, Zt = (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;
-}, Kt = (r) => r instanceof SVGElement ? r : Jt(
+}, _t = (r) => r instanceof SVGElement ? r : Zt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), Qt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = Kt(r.renderer ?? {});
+), qt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = _t(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: o,
     renderer: s,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, le = (r) => {
+}, pe = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new Ct({
+      return () => new Dt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3493,7 +3714,7 @@ const Yt = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Pt({
+      return () => new Mt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3506,7 +3727,7 @@ const Yt = (r) => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new Tt({
+      return () => new Lt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3519,7 +3740,7 @@ const Yt = (r) => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Le({
+      return () => new Ie({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3530,7 +3751,7 @@ const Yt = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Nt({
+      return () => new Ct({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3544,8 +3765,8 @@ const Yt = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, Zt = (r, e, t) => {
-  var c, g, u;
+}, er = (r, e, t) => {
+  var c, u, g;
   const o = () => "direct", s = (l) => l, n = (l) => l.button === 0, a = () => {
   }, h = () => {
   }, d = () => {
@@ -3556,16 +3777,16 @@ const Yt = (r) => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
     onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
-    onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
-    onEdgeCreationPrevented: ((u = r.events) == null ? void 0 : u.onEdgeCreationPrevented) ?? h,
+    onEdgeCreationInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeCreationInterrupted) ?? d,
+    onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? le(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? pe(r.edgeShape) : e
   };
-}, _t = (r, e) => {
-  var c, g, u;
+}, tr = (r, e) => {
+  var c, u, g;
   const t = (l) => l, o = (l) => l.button === 0 && l.ctrlKey, s = (l) => l.button === 0, n = (l) => {
-    const p = e.getPortAdjacentEdgeIds(l);
-    return p.length > 0 ? p[p.length - 1] : null;
+    const w = e.getPortAdjacentEdgeIds(l);
+    return w.length > 0 ? w[w.length - 1] : null;
   }, a = () => {
   }, h = () => {
   }, d = () => {
@@ -3575,15 +3796,15 @@ const Yt = (r) => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? le(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? pe(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
-    onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
-    onEdgeReattachPrevented: ((u = r.events) == null ? void 0 : u.onEdgeReattachPrevented) ?? h
+    onEdgeReattachInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeReattachInterrupted) ?? d,
+    onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, qt = (r) => ({
+}, rr = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), er = (r) => {
+}), or = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3592,13 +3813,13 @@ const Yt = (r) => {
     })
   };
 };
-class tr extends Error {
+class sr extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasBuilderError");
   }
 }
-class ze {
+class Xe {
   constructor(e, t, o) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3631,12 +3852,12 @@ class ze {
       const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), n = this.graph.getPort(o.to), a = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
         a,
         h
-      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, u = d.ex * g, l = d.ey * g, p = e.get(s.nodeId), y = e.get(n.nodeId);
-      p.x += u, p.y += l, y.x -= u, y.y -= l;
+      ), u = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, g = d.ex * u, l = d.ey * u, w = e.get(s.nodeId), p = e.get(n.nodeId);
+      w.x += g, w.y += l, p.x -= g, p.y -= l;
     });
   }
 }
-class ke {
+class He {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3655,13 +3876,13 @@ class ke {
     return { ex: h, ey: d, d: a };
   }
 }
-const He = (r) => {
+const Ge = (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 rr {
+class ir {
   constructor(e) {
     i(this, "nodeCharge");
     i(this, "distanceVectorGenerator");
@@ -3673,22 +3894,22 @@ class rr {
     for (let n = 0; n < s; n++) {
       const a = o[n];
       for (let h = n + 1; h < s; h++) {
-        const d = o[h], c = e.get(a), g = e.get(d), u = this.distanceVectorGenerator.create(
+        const d = o[h], c = e.get(a), u = e.get(d), g = this.distanceVectorGenerator.create(
           c,
-          g
-        ), l = He({
+          u
+        ), l = Ge({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
-          distance: u.d,
+          distance: g.d,
           maxForce: this.maxForce
-        }), p = l * u.ex, y = l * u.ey, w = t.get(a), f = t.get(d);
-        w.x -= p, w.y -= y, f.x += p, f.y += y;
+        }), w = l * g.ex, p = l * g.ey, y = t.get(a), f = t.get(d);
+        y.x -= w, y.y -= p, f.x += w, f.y += p;
       }
     }
   }
 }
-const or = (r) => {
+const nr = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -3706,7 +3927,7 @@ const or = (r) => {
     radius: h / 2
   };
 };
-class sr {
+class ar {
   constructor(e) {
     i(this, "root");
     i(this, "leaves", /* @__PURE__ */ new Map());
@@ -3761,16 +3982,16 @@ class sr {
     this.sortedParentNodes.push(e);
     const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = s / 2;
     e.nodeIds.forEach((l) => {
-      const { x: p, y } = this.coords.get(l);
-      p < t ? y < o ? d.add(l) : h.add(l) : y < o ? a.add(l) : n.add(l), e.nodeIds.delete(l);
+      const { x: w, y: p } = this.coords.get(l);
+      w < t ? p < o ? d.add(l) : h.add(l) : p < o ? a.add(l) : n.add(l), e.nodeIds.delete(l);
     });
-    const g = {
+    const u = {
       parent: e,
       lb: null,
       lt: null,
       rb: null,
       rt: null
-    }, u = [];
+    }, g = [];
     if (n.size > 0) {
       const l = {
         nodeIds: n,
@@ -3785,9 +4006,9 @@ class sr {
           centerY: o + c,
           radius: c
         },
-        ...g
+        ...u
       };
-      e.rt = l, u.push(l);
+      e.rt = l, g.push(l);
     }
     if (a.size > 0) {
       const l = {
@@ -3803,9 +4024,9 @@ class sr {
           centerY: o - c,
           radius: c
         },
-        ...g
+        ...u
       };
-      e.rb = l, u.push(l);
+      e.rb = l, g.push(l);
     }
     if (h.size > 0) {
       const l = {
@@ -3821,9 +4042,9 @@ class sr {
           centerY: o + c,
           radius: c
         },
-        ...g
+        ...u
       };
-      e.lt = l, u.push(l);
+      e.lt = l, g.push(l);
     }
     if (d.size > 0) {
       const l = {
@@ -3839,11 +4060,11 @@ class sr {
           centerY: o - c,
           radius: c
         },
-        ...g
+        ...u
       };
-      e.lb = l, u.push(l);
+      e.lb = l, g.push(l);
     }
-    return u;
+    return g;
   }
   setLeaf(e) {
     e.totalMass = this.nodeMass * e.nodeIds.size, e.totalCharge = this.nodeCharge * e.nodeIds.size, e.chargeCenter = this.calculateLeafChargeCenter(e.nodeIds), e.nodeIds.forEach((t) => {
@@ -3863,7 +4084,7 @@ class sr {
     }), { x: t / e.size, y: o / e.size };
   }
 }
-class ir {
+class hr {
   constructor(e) {
     i(this, "areaRadiusThreshold");
     i(this, "nodeMass");
@@ -3875,7 +4096,7 @@ class ir {
     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 = or(e), s = new sr({
+    const o = nr(e), s = new ar({
       box: o,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -3990,7 +4211,7 @@ class ir {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), o = He({
+    ), o = Ge({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -4025,7 +4246,7 @@ class ir {
     }
   }
 }
-const Ye = (r) => r.theta !== 0 ? new ir({
+const je = (r) => r.theta !== 0 ? new hr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -4033,36 +4254,36 @@ const Ye = (r) => r.theta !== 0 ? new ir({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new rr({
+}) : new ir({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class Xe {
+class Je {
   constructor(e) {
     i(this, "rand");
     i(this, "sparsity");
     this.rand = e.rand, this.sparsity = e.sparsity;
   }
   calculateCoordinates(e) {
-    const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((y) => {
-      const w = t.getNode(y);
-      return w.x === null || w.y === null;
-    }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, g = o.createContentCoords(c), u = a / 2, l = {
-      x: g.x - u,
-      y: g.y - u
+    const { graph: t, viewport: o } = e, s = /* @__PURE__ */ new Map(), n = t.getAllNodeIds().filter((p) => {
+      const y = t.getNode(p);
+      return y.x === null || y.y === null;
+    }), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = o.getDimensions(), c = { x: h / 2, y: d / 2 }, u = o.createContentCoords(c), g = a / 2, l = {
+      x: u.x - g,
+      y: u.y - g
     };
-    return t.getAllNodeIds().forEach((y) => {
-      const w = t.getNode(y);
-      s.set(y, {
-        x: w.x ?? l.x + a * this.rand(),
-        y: w.y ?? l.y + a * this.rand()
+    return t.getAllNodeIds().forEach((p) => {
+      const y = t.getNode(p);
+      s.set(p, {
+        x: y.x ?? l.x + a * this.rand(),
+        y: y.y ?? l.y + a * this.rand()
       });
     }), s;
   }
 }
-class nr {
+class dr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4073,7 +4294,7 @@ class nr {
     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 ke(e.rand), this.nodeForcesApplicationStrategy = Ye({
+    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 He(e.rand), this.nodeForcesApplicationStrategy = je({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4081,7 +4302,7 @@ class nr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Xe({
+    }), this.fillerLayoutAlgorithm = new Je({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4091,7 +4312,7 @@ class nr {
       graph: t,
       viewport: o
     });
-    for (let n = 0; n < this.maxIterations && !(new ze(
+    for (let n = 0; n < this.maxIterations && !(new Xe(
       t,
       s,
       {
@@ -4107,7 +4328,7 @@ class nr {
     return s;
   }
 }
-class ar {
+class cr {
   constructor(e) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
@@ -4130,31 +4351,31 @@ class ar {
       const n = [];
       s.forEach((a) => {
         o.push(a);
-        const h = this.graph.getNodeOutgoingEdgeIds(a.nodeId).map((g) => {
-          const u = this.graph.getEdge(g);
-          return this.graph.getPort(u.to).nodeId;
-        }), d = this.graph.getNodeIncomingEdgeIds(a.nodeId).map((g) => {
-          const u = this.graph.getEdge(g);
-          return this.graph.getPort(u.from).nodeId;
+        const h = this.graph.getNodeOutgoingEdgeIds(a.nodeId).map((u) => {
+          const g = this.graph.getEdge(u);
+          return this.graph.getPort(g.to).nodeId;
+        }), d = this.graph.getNodeIncomingEdgeIds(a.nodeId).map((u) => {
+          const g = this.graph.getEdge(u);
+          return this.graph.getPort(g.from).nodeId;
         });
         (/* @__PURE__ */ new Set([
           ...h,
           ...d
-        ])).forEach((g) => {
-          if (!this.remainingNodeIds.has(g))
+        ])).forEach((u) => {
+          if (!this.remainingNodeIds.has(u))
             return;
-          this.remainingNodeIds.delete(g);
-          const u = {
-            nodeId: g,
+          this.remainingNodeIds.delete(u);
+          const g = {
+            nodeId: u,
             children: /* @__PURE__ */ new Set()
           };
-          a.children.add(u), n.push(u);
+          a.children.add(g), n.push(g);
         });
       }), s = n;
     }
   }
 }
-class hr {
+class lr {
   constructor(e) {
     this.params = e;
   }
@@ -4162,17 +4383,17 @@ class hr {
     let t = 0;
     const o = [], s = e.length - 1, n = [];
     e.forEach((h, d) => {
-      if (t += this.params.spaceAroundRadius, h.forEach((c, g) => {
-        n[g] === void 0 ? n[g] = {
+      if (t += this.params.spaceAroundRadius, h.forEach((c, u) => {
+        n[u] === void 0 ? n[u] = {
           start: t + c.start,
           end: t + c.end
-        } : n[g].end = t + c.end;
+        } : n[u].end = t + c.end;
       }), o.push(t), d !== s) {
-        const c = e[d + 1], g = n.map((u) => ({
-          start: u.start - t,
-          end: u.end - t
+        const c = e[d + 1], u = n.map((g) => ({
+          start: g.start - t,
+          end: g.end - t
         }));
-        t += this.calculateMaxDiff(g, c);
+        t += this.calculateMaxDiff(u, c);
       }
       t += this.params.spaceAroundRadius;
     });
@@ -4195,12 +4416,12 @@ class hr {
     return o - 2 * this.params.spaceAroundRadius;
   }
 }
-class dr {
+class ur {
   constructor(e, t) {
     i(this, "offsets", /* @__PURE__ */ new Map());
     i(this, "treeSpans", /* @__PURE__ */ new Map());
     this.tree = e;
-    const o = t.spaceAroundRadius, s = new hr({
+    const o = t.spaceAroundRadius, s = new lr({
       spaceAroundRadius: o
     });
     [...this.tree.sequence].reverse().forEach((n) => {
@@ -4222,37 +4443,37 @@ class dr {
     return this.offsets;
   }
 }
-class cr {
+class gr {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), s = new ar(e.graph).generate();
+    const t = /* @__PURE__ */ new Map(), s = new cr(e.graph).generate();
     let n = 0;
     return s.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
-      const d = new dr(a, {
+      const d = new ur(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
       let c = [a.root];
       for (; c.length > 0; ) {
-        const g = [];
-        n += this.params.layerWidth, c.forEach((u) => {
-          u.children.forEach((l) => {
-            const p = t.get(u.nodeId).y;
+        const u = [];
+        n += this.params.layerWidth, c.forEach((g) => {
+          g.children.forEach((l) => {
+            const w = t.get(g.nodeId).y;
             t.set(l.nodeId, {
-              y: p + d.get(l.nodeId),
+              y: w + d.get(l.nodeId),
               x: n
-            }), g.push(l);
+            }), u.push(l);
           });
-        }), c = g;
+        }), c = u;
       }
     }), t.forEach((a, h) => {
       t.set(h, this.params.transform(a));
     }), t;
   }
 }
-class lr {
+class pr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4262,7 +4483,7 @@ class lr {
     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 ke(e.rand), this.nodeForcesApplicationStrategy = Ye({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new He(e.rand), this.nodeForcesApplicationStrategy = je({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4270,7 +4491,7 @@ class lr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Xe({
+    }), this.fillerLayoutAlgorithm = new Je({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4280,7 +4501,7 @@ class lr {
       graph: t,
       viewport: o
     });
-    return new ze(
+    return new Xe(
       t,
       n,
       {
@@ -4292,21 +4513,21 @@ class lr {
         edgeStiffness: this.edgeStiffness
       }
     ).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((c) => {
-      const g = t.getNode(c);
-      return g.x === null || g.y === null;
+      const u = t.getNode(c);
+      return u.x === null || u.y === null;
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const Ge = (r) => {
+const Ke = (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];
-}, je = (r, e, t, o) => function() {
+}, Qe = (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;
-}, E = Object.freeze({
+}, A = Object.freeze({
   seed: "HTMLGraph is awesome",
   maxTimeDeltaSec: 0.01,
   nodeCharge: 1e5,
@@ -4320,51 +4541,55 @@ const Ge = (r) => {
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), gr = (r) => {
+}), F = Object.freeze({
+  mouseDownEventVerifier: (r) => r.button === 0,
+  mouseUpEventVerifier: (r) => r.button === 0,
+  movementThreshold: 10
+}), wr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const o = Ge((r == null ? void 0 : r.seed) ?? E.seed), s = je(o[0], o[1], o[2], o[3]);
-      return new lr({
+      const o = Ke((r == null ? void 0 : r.seed) ?? A.seed), s = Qe(o[0], o[1], o[2], o[3]);
+      return new pr({
         rand: s,
-        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? E.maxTimeDeltaSec,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? E.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? E.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? E.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? E.edgeStiffness,
-        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? E.convergenceVelocity,
-        maxForce: (r == null ? void 0 : r.maxForce) ?? E.maxForce,
-        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? E.nodeForceCoefficient,
-        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? E.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? E.barnesHutAreaRadiusThreshold
+        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? A.maxTimeDeltaSec,
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? A.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? A.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? A.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? A.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? A.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? A.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? A.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? A.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? A.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, K = {
+}, Q = {
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
   },
   onAfterApplied: () => {
   }
-}, ur = (r) => {
+}, yr = (r) => {
   var t, o;
   return {
-    algorithm: gr((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? K.staticNodeResolver,
-    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? K.onBeforeApplied,
-    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? K.onAfterApplied
+    algorithm: wr((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Q.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? Q.onBeforeApplied,
+    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? Q.onAfterApplied
   };
-}, pr = (r) => r instanceof _ ? {
+}, fr = (r) => r instanceof q ? {
   type: "trigger",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Lt
+  schedule: It
 } : {
   type: "topologyChangeSchedule",
-  schedule: Ft
+  schedule: Ut
 }, B = Object.freeze({
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
@@ -4375,14 +4600,14 @@ const Ge = (r) => {
     layerWidth: 300,
     layerSpace: 300
   }
-}), z = (r, e) => ({
+}), k = (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
-}), yr = (r) => {
+}), vr = (r) => {
   const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
     a: n / h,
@@ -4393,7 +4618,7 @@ const Ge = (r) => {
     f: (o * s - e * a) / h
   };
 };
-class wr {
+class mr {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4427,18 +4652,18 @@ class wr {
     return this.createRelativeTransform(o, s);
   }
   createMirrorRelativeMatrix(e, t) {
-    const o = this.createMirrorYBaseMatrix(), s = z(
+    const o = this.createMirrorYBaseMatrix(), s = k(
       this.createShiftBaseMatrix(t),
       this.createRotateBaseMatrix(e)
     );
     return this.createRelativeTransform(o, s);
   }
   createRelativeTransform(e, t) {
-    const o = z(
+    const o = k(
       t,
       e
-    ), s = yr(t);
-    return z(o, s);
+    ), s = vr(t);
+    return k(o, s);
   }
   createShiftBaseMatrix(e) {
     return {
@@ -4482,7 +4707,7 @@ class wr {
     };
   }
 }
-const fr = (r) => {
+const xr = (r) => {
   if (r === void 0)
     return (s) => s;
   if (typeof r == "function")
@@ -4496,10 +4721,10 @@ const fr = (r) => {
     e: 1,
     f: 0
   };
-  const o = new wr();
+  const o = new mr();
   return e.forEach((s) => {
     const n = o.resolve(s);
-    t = z(t, n);
+    t = k(t, n);
   }), (s) => {
     const { x: n, y: a } = s;
     return {
@@ -4507,45 +4732,45 @@ const fr = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, vr = (r) => {
+}, Er = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
-      return new cr({
+      return new gr({
         layerWidth: r.layerWidth ?? B.hierarchicalLayout.layerWidth,
         layerSpace: r.layerSpace ?? B.hierarchicalLayout.layerSpace,
-        transform: fr(r.transform)
+        transform: xr(r.transform)
       });
     default: {
-      const o = Ge((r == null ? void 0 : r.seed) ?? E.seed), s = je(o[0], o[1], o[2], o[3]);
-      return new nr({
-        dtSec: (r == null ? void 0 : r.dtSec) ?? E.dtSec,
-        maxIterations: (r == null ? void 0 : r.maxIterations) ?? E.maxIterations,
+      const o = Ke((r == null ? void 0 : r.seed) ?? A.seed), s = Qe(o[0], o[1], o[2], o[3]);
+      return new dr({
+        dtSec: (r == null ? void 0 : r.dtSec) ?? A.dtSec,
+        maxIterations: (r == null ? void 0 : r.maxIterations) ?? A.maxIterations,
         rand: s,
-        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? E.nodeCharge,
-        nodeMass: (r == null ? void 0 : r.nodeMass) ?? E.nodeMass,
-        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? E.edgeEquilibriumLength,
-        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? E.edgeStiffness,
-        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? E.convergenceVelocity,
-        maxForce: (r == null ? void 0 : r.maxForce) ?? E.maxForce,
-        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? E.nodeForceCoefficient,
-        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? E.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? E.barnesHutAreaRadiusThreshold
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? A.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? A.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? A.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? A.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? A.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? A.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? A.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? A.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? A.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, xr = (r) => {
+}, Ar = (r) => {
   var e, t;
   return {
-    algorithm: vr(r.algorithm),
-    applyOn: pr(r.applyOn),
+    algorithm: Er(r.algorithm),
+    applyOn: fr(r.applyOn),
     staticNodeResolver: r.staticNodeResolver ?? B.staticNodeResolver,
     onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? B.onBeforeApplied,
     onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? B.onAfterApplied
   };
-}, mr = (r, e) => ({
+}, Sr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4553,7 +4778,7 @@ const fr = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Ar = (r, e) => {
+}), Nr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4561,51 +4786,67 @@ const fr = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, Er = (r, e) => ({
+}, br = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), Z = (r) => () => r, Ae = Z(0), Sr = () => {
+}), _ = (r) => () => r, Ne = _(0), Pr = () => {
   let r = 0;
   return () => r++;
-}, br = (r, e) => {
-  let t = Ae, o = Ae;
-  const s = Sr();
-  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = Z(r)), typeof e == "number" && (o = Z(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+}, Tr = (r, e) => {
+  let t = Ne, o = Ne;
+  const s = Pr();
+  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), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
-}, Nr = (r) => {
+}, Cr = (r) => {
   var t, o, s, n, a;
-  const e = br(
+  const e = Tr(
     (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) ?? Ce,
+      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? De,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: le(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: pe(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Pr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Cr = (r) => {
-  var o, s, n;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Pr(r.layoutParams) : re;
+}, Mr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : oe, Dr = (r) => {
+  var o, s, n, a;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? Mr(r.layoutParams) : oe;
   return {
     focus: {
-      contentOffset: ((o = e.focus) == null ? void 0 : o.contentOffset) ?? 100,
-      minContentScale: ((s = e.focus) == null ? void 0 : s.minContentScale) ?? 0,
+      contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
+      minContentScale: ((n = e.focus) == null ? void 0 : n.minContentScale) ?? 0,
       schedule: t,
-      animationDuration: ((n = e.focus) == null ? void 0 : n.animationDuration) ?? 0
+      animationDuration: ((a = e.focus) == null ? void 0 : a.animationDuration) ?? 0
     }
   };
-};
-class Dr {
+}, Lr = (r, e, t, o) => ({
+  canvas: r,
+  element: e,
+  window: t,
+  onNodeSelected: o.onNodeSelected,
+  mouseDownEventVerifier: o.mouseDownEventVerifier ?? F.mouseDownEventVerifier,
+  mouseUpEventVerifier: o.mouseUpEventVerifier ?? F.mouseUpEventVerifier,
+  movementThreshold: o.movementThreshold ?? F.movementThreshold
+}), Rr = (r, e, t, o) => ({
+  canvas: r,
+  element: e,
+  window: t,
+  onCanvasSelected: o.onCanvasSelected,
+  mouseDownEventVerifier: o.mouseDownEventVerifier ?? F.mouseDownEventVerifier,
+  mouseUpEventVerifier: o.mouseUpEventVerifier ?? F.mouseUpEventVerifier,
+  movementThreshold: o.movementThreshold ?? F.movementThreshold
+});
+class Ir {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4617,6 +4858,8 @@ class Dr {
     i(this, "virtualScrollConfig");
     i(this, "layoutConfig", {});
     i(this, "animatedLayoutConfig", {});
+    i(this, "userSelectableNodesConfig");
+    i(this, "userSelectableCanvasConfig");
     i(this, "hasDraggableNodes", !1);
     i(this, "hasTransformableViewport", !1);
     i(this, "hasNodeResizeReactiveEdges", !1);
@@ -4625,7 +4868,7 @@ class Dr {
     i(this, "hasUserDraggableEdges", !1);
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
-    i(this, "boxRenderingTrigger", new _());
+    i(this, "boxRenderingTrigger", new q());
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     this.element = e;
@@ -4660,131 +4903,155 @@ class Dr {
   enableAnimatedLayout(e) {
     return this.animatedLayoutConfig = e ?? {}, this.hasAnimatedLayout = !0, this.hasLayout = !1, this;
   }
+  enableUserSelectableNodes(e) {
+    return this.userSelectableNodesConfig = e, this;
+  }
+  enableUserSelectableCanvas(e) {
+    return this.userSelectableCanvasConfig = e, this;
+  }
   build() {
     if (this.used)
-      throw new tr(
+      throw new sr(
         "Failed to build Canvas because CanvasBuilder is a single-use object"
       );
     this.used = !0;
-    const e = new st(this.element), t = new be(), o = new Ht(this.element), s = this.createHtmlView(
+    const e = new at(this.element), t = new Te(), o = new Gt(this.element), s = this.createHtmlView(
       o.main,
       t,
       e
-    ), n = Nr(
+    ), n = Cr(
       this.canvasDefaults
-    ), a = new Ve(
+    ), a = new Be(
       t,
       s,
       n
-    ), h = xr(this.layoutConfig), d = Cr({
+    ), h = Ar(this.layoutConfig), d = Dr({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
-    }), c = new Oe(
+    }), c = new ke(
       t,
       e,
       d,
       this.window
-    ), g = new $e(e), u = new Ie(t), l = new Se(
-      u,
+    ), u = new We(e), g = new $e(t), l = new Pe(
       g,
+      u,
       a,
       c
     );
-    if (this.hasBackground && ie.configure(
+    if (this.hasBackground && ne.configure(
       l,
-      Qt(this.backgroundConfig),
+      qt(this.backgroundConfig),
       o.background
-    ), this.hasNodeResizeReactiveEdges && q.configure(l), this.hasDraggableNodes) {
-      let y = Yt(this.dragConfig);
-      this.hasAnimatedLayout && (y = mr(
-        y,
+    ), this.hasNodeResizeReactiveEdges && ee.configure(l), this.userSelectableNodesConfig !== void 0) {
+      const p = Lr(
+        l,
+        o.main,
+        this.window,
+        this.userSelectableNodesConfig
+      );
+      ue.configure(p);
+    }
+    if (this.userSelectableCanvasConfig !== void 0) {
+      const p = Rr(
+        l,
+        o.main,
+        this.window,
+        this.userSelectableCanvasConfig
+      );
+      ge.configure(p);
+    }
+    if (this.hasDraggableNodes) {
+      let p = jt(this.dragConfig);
+      this.hasAnimatedLayout && (p = Sr(
+        p,
         this.animationStaticNodes
-      )), oe.configure(
+      )), se.configure(
         l,
         o.main,
         this.window,
-        y
+        p
       );
     }
     if (this.hasUserConnectablePorts) {
-      const y = Zt(
+      const p = er(
         this.connectablePortsConfig,
         n.edges.shapeFactory,
         n.ports.direction
       );
-      ne.configure(
+      ae.configure(
         l,
         o.overlayConnectablePorts,
         e,
         this.window,
-        y
+        p
       );
     }
     if (this.hasUserDraggableEdges) {
-      const y = _t(
+      const p = tr(
         this.draggableEdgesConfig,
         l.graph
       );
-      ae.configure(
+      he.configure(
         l,
         o.overlayDraggableEdges,
         e,
         this.window,
-        y
+        p
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? se.configure(
+    if (this.virtualScrollConfig !== void 0 ? ie.configure(
       l,
       o.main,
       this.window,
-      me(this.transformConfig),
+      Se(this.transformConfig),
       this.boxRenderingTrigger,
-      qt(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && j.configure(
+      rr(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && J.configure(
       l,
       o.main,
       this.window,
-      me(this.transformConfig)
-    ), this.hasLayout && Wt.configure(l, h), this.hasAnimatedLayout) {
-      let y = ur(
+      Se(this.transformConfig)
+    ), this.hasLayout && Yt.configure(l, h), this.hasAnimatedLayout) {
+      let p = yr(
         this.animatedLayoutConfig
       );
-      this.hasDraggableNodes && (Ar(
+      this.hasDraggableNodes && (Nr(
         l,
         this.animationStaticNodes
-      ), y = Er(
-        y,
+      ), p = br(
+        p,
         this.animationStaticNodes
-      )), ce.configure(l, y, this.window);
+      )), le.configure(l, p, this.window);
     }
-    const p = () => {
-      o.destroy(), l.onBeforeDestroy.unsubscribe(p);
+    const w = () => {
+      o.destroy(), l.onBeforeDestroy.unsubscribe(w);
     };
-    return l.onBeforeDestroy.subscribe(p), l;
+    return l.onBeforeDestroy.subscribe(w), l;
   }
   createHtmlView(e, t, o) {
-    let s = new Ee(t, o, e);
-    return this.virtualScrollConfig !== void 0 && (s = new tt(
+    let s = new be(t, o, e);
+    return this.virtualScrollConfig !== void 0 && (s = new st(
       s,
       t,
       this.boxRenderingTrigger,
-      er(this.virtualScrollConfig)
-    )), s = new rt(s, t), s;
+      or(this.virtualScrollConfig)
+    )), s = new it(s, t), s;
   }
 }
 export {
-  Nt as BezierEdgeShape,
-  Dr as CanvasBuilder,
-  tr as CanvasBuilderError,
+  Ct as BezierEdgeShape,
+  Ir as CanvasBuilder,
+  sr as CanvasBuilderError,
   S as CanvasError,
-  L as ConnectionCategory,
-  Le as DirectEdgeShape,
-  _ as EventSubject,
-  Pt as HorizontalEdgeShape,
-  Rt as InteractiveEdgeError,
-  Fe as InteractiveEdgeShape,
-  Mr as MidpointEdgeShape,
-  Ct as StraightEdgeShape,
-  Tt as VerticalEdgeShape
+  V as ConnectionCategory,
+  Ie as DirectEdgeShape,
+  q as EventSubject,
+  Mt as HorizontalEdgeShape,
+  Ft as InteractiveEdgeError,
+  Ue as InteractiveEdgeShape,
+  Fr as MidpointEdgeShape,
+  Dt as StraightEdgeShape,
+  Lt as VerticalEdgeShape
 };