@html-graph/html-graph 8.15.0 → 8.16.0

package/dist/html-graph.min.js

@@ -1,22 +1,22 @@
-var Qe = Object.defineProperty;
-var Ze = (r, e, t) => e in r ? Qe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => Ze(r, typeof e != "symbol" ? e + "" : e, t);
-var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
-const _e = () => {
+var qe = Object.defineProperty;
+var et = (r, e, t) => e in r ? qe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => et(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 tt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, qe = () => {
+}, rt = () => {
   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;
-}, et = (r) => {
+}, ot = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, tt = (r) => {
+}, st = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class Ne {
+class Ce {
   constructor(e, t, o) {
-    i(this, "host", _e());
-    i(this, "container", qe());
+    i(this, "host", tt());
+    i(this, "container", rt());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     i(this, "applyTransform", () => {
@@ -27,11 +27,11 @@ class Ne {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    et(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    ot(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);
-    tt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    st(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -72,8 +72,8 @@ class Ne {
       h,
       d
     ), u = this.createEdgeRenderPort(s, a, h, d);
-    let g = R.Line;
-    o.element === s.element ? g = R.PortCycle : o.nodeId === s.nodeId && (g = R.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
+    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 Ne {
     };
   }
 }
-class rt {
+class it {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -113,7 +113,7 @@ class rt {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && u >= this.yFrom;
   }
 }
-class ot {
+class nt {
   constructor(e, t, o, s) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -137,7 +137,7 @@ class ot {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new rt(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new it(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -191,7 +191,7 @@ class ot {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class st {
+class at {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -265,7 +265,7 @@ const P = () => {
   const r = new _();
   return [r, r];
 };
-class be {
+class Te {
   constructor(e, t, o, s) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
@@ -318,7 +318,7 @@ class be {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class it {
+class ht {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -358,13 +358,13 @@ class it {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class S extends Error {
+class A extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasError");
   }
 }
-const N = Object.freeze({
+const S = 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)}`,
@@ -378,6 +378,7 @@ const N = Object.freeze({
   removeNonexistentPort: (r) => `Failed to remove port with ID ${JSON.stringify(r)} because it does not exist`,
   accessNonexistentEdge: (r) => `Failed to access edge with ID ${JSON.stringify(r)} because it does not exist`,
   addEdgeWithExistingId: (r) => `Failed to add edge with ID ${JSON.stringify(r)} because an edge with this ID already exists`,
+  addEdgeWithElementInUse: (r, e) => `Failed to add edge with ID ${JSON.stringify(r)} because its SVG element is already attached to edge with ID ${JSON.stringify(e)}`,
   addEdgeFromNonexistentPort: (r, e) => `Failed to add edge with ID ${JSON.stringify(r)} from port with ID ${JSON.stringify(e)} because the port does not exist`,
   addEdgeToNonexistentPort: (r, e) => `Failed to add edge with ID ${JSON.stringify(r)} to port with ID ${JSON.stringify(e)} because the port does not exist`,
   updateNonexistentEdge: (r) => `Failed to update edge with ID ${JSON.stringify(r)} because it does not exist`,
@@ -386,7 +387,7 @@ const N = 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 Pe {
+class Me {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -395,7 +396,8 @@ class Pe {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new it());
+    i(this, "elementPorts", new ht());
+    i(this, "edgesElementsMap", /* @__PURE__ */ new Map());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
     i(this, "afterNodeUpdatedEmitter");
@@ -430,16 +432,16 @@ class Pe {
   getNode(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new S(N.accessNonexistingNode(e));
+      throw new A(S.accessNonexistingNode(e));
     return t;
   }
   addNode(e) {
     if (this.hasNode(e.id))
-      throw new S(N.addNodeWithExistingId(e.id));
+      throw new A(S.addNodeWithExistingId(e.id));
     const t = this.findNodeIdByElement(e.element);
     if (t !== void 0)
-      throw new S(
-        N.addNodeWithElementInUse(e.id, t)
+      throw new A(
+        S.addNodeWithElementInUse(e.id, t)
       );
     const o = /* @__PURE__ */ new Map(), s = {
       element: e.element,
@@ -461,13 +463,13 @@ class Pe {
   }
   updateNode(e, t) {
     if (!this.hasNode(e))
-      throw new S(N.updateNonexistentNode(e));
+      throw new A(S.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(N.removeNonexistentNode(e));
+      throw new A(S.removeNonexistentNode(e));
     this.beforeNodeRemovedEmitter.emit(e);
     const t = this.getNode(e);
     this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
@@ -478,15 +480,15 @@ class Pe {
   getPort(e) {
     const t = this.ports.get(e);
     if (t === void 0)
-      throw new S(N.accessNonexistentPort(e));
+      throw new A(S.accessNonexistentPort(e));
     return t;
   }
   addPort(e) {
     if (this.hasPort(e.id))
-      throw new S(N.addPortWithExistingId(e.id));
+      throw new A(S.addPortWithExistingId(e.id));
     if (!this.hasNode(e.nodeId))
-      throw new S(
-        N.addPortToNonexistentNode(e.id, e.nodeId)
+      throw new A(
+        S.addPortToNonexistentNode(e.id, e.nodeId)
       );
     this.ports.set(e.id, {
       element: e.element,
@@ -498,7 +500,7 @@ class Pe {
   }
   updatePort(e, t) {
     if (!this.hasPort(e))
-      throw new S(N.updateNonexistentPort(e));
+      throw new A(S.updateNonexistentPort(e));
     const o = this.getPort(e).payload;
     o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
   }
@@ -511,14 +513,14 @@ class Pe {
   getNodePortIds(e) {
     const t = this.nodes.get(e);
     if (t === void 0)
-      throw new S(
-        N.accessPortsOfNonexistentNode(e)
+      throw new A(
+        S.accessPortsOfNonexistentNode(e)
       );
     return Array.from(t.ports.keys());
   }
   removePort(e) {
     if (!this.hasPort(e))
-      throw new S(N.removeNonexistentPort(e));
+      throw new A(S.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 +530,41 @@ class Pe {
   getEdge(e) {
     const t = this.edges.get(e);
     if (t === void 0)
-      throw new S(N.accessNonexistentEdge(e));
+      throw new A(S.accessNonexistentEdge(e));
     return t;
   }
+  findEdgeIdByElement(e) {
+    return this.edgesElementsMap.get(e);
+  }
   addEdge(e) {
     if (this.hasEdge(e.id))
-      throw new S(N.addEdgeWithExistingId(e.id));
+      throw new A(S.addEdgeWithExistingId(e.id));
     if (!this.hasPort(e.from))
-      throw new S(
-        N.addEdgeFromNonexistentPort(e.id, e.from)
+      throw new A(
+        S.addEdgeFromNonexistentPort(e.id, e.from)
       );
     if (!this.hasPort(e.to))
-      throw new S(
-        N.addEdgeToNonexistentPort(e.id, e.to)
+      throw new A(
+        S.addEdgeToNonexistentPort(e.id, e.to)
+      );
+    const t = this.findEdgeIdByElement(e.shape.svg);
+    if (t !== void 0)
+      throw new A(
+        S.addEdgeWithElementInUse(e.id, t)
       );
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
   updateEdge(e, t) {
     if (!this.hasEdge(e))
-      throw new S(N.updateNonexistentEdge(e));
+      throw new A(S.updateNonexistentEdge(e));
     if (t.from !== void 0 || t.to !== void 0) {
       if (t.from !== void 0 && !this.hasPort(t.from))
-        throw new S(
-          N.updateNonexistentEdgeSource(e, t.from)
+        throw new A(
+          S.updateNonexistentEdgeSource(e, t.from)
         );
       if (t.to !== void 0 && !this.hasPort(t.to))
-        throw new S(
-          N.updateNonexistentEdgeTarget(e, t.to)
+        throw new A(
+          S.updateNonexistentEdgeTarget(e, t.to)
         );
       const s = this.getEdge(e), n = s.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
@@ -573,33 +583,33 @@ class Pe {
   }
   removeEdge(e) {
     if (!this.hasEdge(e))
-      throw new S(N.removeNonexistentEdge(e));
+      throw new A(S.removeNonexistentEdge(e));
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
-    this.beforeClearEmitter.emit(), this.portIncomingEdges.clear(), this.portOutgoingEdges.clear(), this.portCycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
+    this.beforeClearEmitter.emit(), this.portIncomingEdges.clear(), this.portOutgoingEdges.clear(), this.portCycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edgesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
   getPortIncomingEdgeIds(e) {
     const t = this.portIncomingEdges.get(e);
     if (t === void 0)
-      throw new S(
-        N.accessEdgesForNonexistentPort(e)
+      throw new A(
+        S.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
   getPortOutgoingEdgeIds(e) {
     const t = this.portOutgoingEdges.get(e);
     if (t === void 0)
-      throw new S(
-        N.accessEdgesForNonexistentPort(e)
+      throw new A(
+        S.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
   getPortCycleEdgeIds(e) {
     const t = this.portCycleEdges.get(e);
     if (t === void 0)
-      throw new S(
-        N.accessEdgesForNonexistentPort(e)
+      throw new A(
+        S.accessEdgesForNonexistentPort(e)
       );
     return Array.from(t);
   }
@@ -665,29 +675,29 @@ class Pe {
         shape: e.shape,
         priority: e.priority
       }
-    }), e.from !== e.to ? (this.portOutgoingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id)) : this.portCycleEdges.get(e.from).add(e.id);
+    }), this.edgesElementsMap.set(e.shape.svg, e.id), e.from !== e.to ? (this.portOutgoingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id)) : this.portCycleEdges.get(e.from).add(e.id);
   }
   removeEdgeInternal(e) {
-    const { from: t, to: o } = this.getEdge(e);
-    this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(o).delete(e), this.edges.delete(e);
+    const { from: t, to: o, payload: s } = this.getEdge(e);
+    this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(o).delete(e), this.edges.delete(e), this.edgesElementsMap.delete(s.shape.svg);
   }
 }
-const we = (r) => ({
+const ve = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ye = {
+}), me = {
   scale: 1,
   x: 0,
   y: 0
-}, fe = (r, e) => ({
+}, xe = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class nt {
+class dt {
   constructor(e) {
-    i(this, "viewportMatrix", ye);
-    i(this, "contentMatrix", ye);
+    i(this, "viewportMatrix", me);
+    i(this, "contentMatrix", me);
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
@@ -710,24 +720,24 @@ class nt {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = we(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ve(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 = we(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = ve(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
   getDimensions() {
     const { width: e, height: t } = this.host.getBoundingClientRect();
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return fe(this.viewportMatrix, e);
+    return xe(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return fe(this.contentMatrix, e);
+    return xe(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
@@ -766,21 +776,21 @@ class q {
     this.canvas.updateNode(t);
   }
 }
-const at = (r, e, t) => {
+const ct = (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;
-}, ht = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
-class dt {
+}, lt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
+class ut {
   constructor(e, t) {
     this.element = e, this.win = t;
   }
   verify(e, t) {
-    return at(this.element, e, t) && ht(this.win, e, t);
+    return ct(this.element, e, t) && lt(this.win, e, t);
   }
 }
 const k = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, Y = (r) => {
+}, H = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -795,7 +805,7 @@ const k = (r, e) => {
       }
     ]
   };
-}, ct = (r, e) => {
+}, gt = (r, e) => {
   let t = e;
   for (; t !== null; ) {
     const o = r.findPortIdsByElement(t)[0] ?? null;
@@ -814,21 +824,21 @@ const k = (r, e) => {
     status: "notFound"
   };
 };
-function* Te(r, e) {
+function* De(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const o of t) {
     if (o.shadowRoot !== null) {
-      const s = Te(o.shadowRoot, e);
+      const s = De(o.shadowRoot, e);
       for (const n of s)
         yield n;
     }
     yield o;
   }
 }
-const Ce = (r, e) => {
-  const t = Te(document, e);
+const Re = (r, e) => {
+  const t = De(document, e);
   for (const o of t) {
-    const s = ct(r, o);
+    const s = gt(r, o);
     if (s.status === "portFound")
       return s.portId;
     if (s.status === "nodeEncountered")
@@ -837,13 +847,13 @@ const Ce = (r, e) => {
   return null;
 };
 var M = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(M || {});
-const Me = (r, e) => ({
+const Le = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), 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)
-}), De = (r, e, t) => {
+}), Ve = (r, e, t) => {
   const o = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -860,7 +870,7 @@ const Me = (r, e) => ({
     to: { x: s.x - n, y: s.y - a }
   };
 };
-class lt {
+class pt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -893,7 +903,7 @@ class lt {
     this.path = `${x}${f}${E}`;
   }
 }
-class ut {
+class wt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -930,13 +940,13 @@ class ut {
       { x: c.x - u, y: c.y },
       a,
       c
-    ), b = {
+    ), N = {
       x: E.x + p,
       y: E.y + y
-    }, T = {
-      x: (x.x + b.x) / 2,
-      y: (x.y + b.y) / 2
     }, C = {
+      x: (x.x + N.x) / 2,
+      y: (x.y + N.y) / 2
+    }, T = {
       x: f.x + s * n.x,
       y: f.y + s * n.y
     }, I = {
@@ -952,24 +962,24 @@ class ut {
     this.path = [
       `M ${l.x} ${l.y}`,
       `L ${f.x} ${f.y}`,
-      `C ${C.x} ${C.y} ${F.x} ${F.y} ${T.x} ${T.y}`,
+      `C ${T.x} ${T.y} ${F.x} ${F.y} ${C.x} ${C.y}`,
       `C ${U.x} ${U.y} ${I.x} ${I.y} ${E.x} ${E.y}`,
       `L ${w.x} ${w.y}`
-    ].join(" "), this.midpoint = T;
+    ].join(" "), this.midpoint = C;
   }
 }
 const ee = Object.freeze({
   edgeColor: "--edge-color"
-}), Le = (r) => {
+}), Ie = (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;
-}, Re = (r) => {
+}, Fe = (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;
-}, X = () => {
+}, Y = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${ee.edgeColor})`), r;
-}, Ve = (r, e) => {
+}, Ue = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`;
 }, L = (r, e) => {
   const t = [];
@@ -980,17 +990,17 @@ const ee = Object.freeze({
       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 T = r[d + 1];
+        s = T.x - h.x, n = T.y - h.y, a = Math.sqrt(s * s + n * n);
       }
-      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(
+      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, N = g !== 0 ? Math.min((p ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, C = p ? { x: h.x + c * N, y: h.y + u * N } : h;
+      d > 0 && t.push(`L ${C.x} ${C.y}`), p && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
   }
   return t.join(" ");
-}, gt = (r, e) => {
+}, yt = (r, e) => {
   const t = e.x - r.x >= 0, o = r.dirX >= 0, s = e.dirX >= 0;
   if (o === s) {
     const c = o === t, u = (r.x + e.x) / 2, g = (r.y + e.y) / 2, l = { x: u, y: g };
@@ -1026,7 +1036,7 @@ const ee = Object.freeze({
     midpoint: { x: d.x, y: h }
   };
 };
-class pt {
+class ft {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1055,7 +1065,7 @@ class pt {
       { x: t.x + w, y: t.y },
       s,
       t
-    ), y = m({ x: o.x - w, y: o.y }, n, o), f = gt(
+    ), y = m({ x: o.x - w, y: o.y }, n, o), f = yt(
       {
         x: p.x,
         y: p.y,
@@ -1073,7 +1083,7 @@ class pt {
     ), this.midpoint = f.midpoint;
   }
 }
-class wt {
+class vt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1104,27 +1114,27 @@ class wt {
       { x: s.x + y, y: s.y },
       h,
       s
-    ), b = {
+    ), N = {
       x: E.x + f,
       y: E.y + x
-    }, T = m(
+    }, C = m(
       { x: n.x - y, y: n.y },
       d,
       n
-    ), C = {
-      x: T.x + f,
-      y: T.y + x
+    ), T = {
+      x: C.x + f,
+      y: C.y + x
     };
     this.midpoint = {
-      x: (b.x + C.x) / 2,
-      y: (b.y + C.y) / 2
+      x: (N.x + T.x) / 2,
+      y: (N.y + T.y) / 2
     }, this.path = L(
-      [w, E, b, C, T, p],
+      [w, E, N, T, C, p],
       l
     );
   }
 }
-class yt {
+class mt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1153,8 +1163,8 @@ class yt {
       [g, y, x, l],
       u
     );
-    const E = (y.x + x.x) / 2, b = (y.y + x.y) / 2;
-    this.midpoint = { x: E, y: b };
+    const E = (y.x + x.x) / 2, N = (y.y + x.y) / 2;
+    this.midpoint = { x: E, y: N };
   }
   createArrowPoint(e, t, o, s) {
     if (!e)
@@ -1166,7 +1176,7 @@ class yt {
     return m(n, t, o);
   }
 }
-const ft = (r, e) => {
+const xt = (r, e) => {
   const t = e.y - r.y >= 0, o = r.dirY >= 0, s = e.dirY >= 0;
   if (o === s) {
     const c = o === t, u = (r.x + e.x) / 2, g = (r.y + e.y) / 2, l = { x: u, y: g };
@@ -1202,7 +1212,7 @@ const ft = (r, e) => {
     midpoint: { x: h, y: d.y }
   };
 };
-class vt {
+class Et {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1231,7 +1241,7 @@ class vt {
       { x: t.x + w, y: t.y },
       d,
       t
-    ), y = m({ x: o.x - w, y: o.y }, c, o), f = ft(
+    ), y = m({ x: o.x - w, y: o.y }, c, o), f = xt(
       {
         x: p.x,
         y: p.y,
@@ -1266,7 +1276,7 @@ class te {
     this.path = `${h ? "" : l}${L(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
   }
 }
-class mt {
+class At {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1284,7 +1294,7 @@ class mt {
     this.path = `${h ? "" : x}${f}`, this.midpoint = y[3];
   }
 }
-class xt {
+class St {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1329,11 +1339,11 @@ class xt {
     };
   }
 }
-const Et = (r, e, t) => {
+const bt = (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 At {
+class Nt {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1367,7 +1377,7 @@ class At {
       { x: a.x - p, y: a.y },
       d,
       a
-    ), x = Et(y, f, g);
+    ), x = bt(y, f, g);
     this.midpoint = {
       x: (y.x + f.x) / 2,
       y: x
@@ -1384,11 +1394,11 @@ class At {
     );
   }
 }
-const St = (r, e, t) => {
+const Pt = (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 Nt {
+class Ct {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1422,7 +1432,7 @@ class Nt {
       { x: d.x - p, y: d.y },
       a,
       d
-    ), x = St(y, f, u);
+    ), x = Pt(y, f, u);
     this.midpoint = {
       x,
       y: (y.y + f.y) / 2
@@ -1461,8 +1471,8 @@ const v = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ve = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
-class H {
+}), Ee = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
+class X {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1475,18 +1485,18 @@ class H {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Le(e.color), this.svg.appendChild(this.group), this.line = Re(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ie(e.color), this.svg.appendChild(this.group), this.line = Fe(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));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = De(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = Ve(
       e.from,
       e.to,
       this.params.padding
     );
-    Ve(this.svg, { x: t, y: o, width: s, height: n });
-    const d = ve(e.from.direction), c = ve(e.to.direction);
+    Ue(this.svg, { x: t, y: o, width: s, height: n });
+    const d = Ee(e.from.direction), c = Ee(e.to.direction);
     let u = { x: -c.x, y: -c.y }, g;
-    e.category === R.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === R.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
+    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 w = null;
@@ -1507,7 +1517,7 @@ class H {
     });
   }
 }
-const bt = (r) => (e) => {
+const Tt = (r) => (e) => {
   const o = [
     { x: 0, y: 0 },
     { x: e.arrowLength, y: r.radius },
@@ -1519,7 +1529,7 @@ const bt = (r) => (e) => {
     y: h.y + e.shift.y
   })), s = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
   return `${s} ${n} ${a} Z`;
-}, Pt = (r) => (e) => {
+}, Mt = (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 },
@@ -1531,7 +1541,7 @@ const bt = (r) => (e) => {
     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) => {
+}, Dt = (r) => (e) => {
   const t = r.smallRadius, o = r.radius, s = m(
     {
       x: e.arrowLength,
@@ -1557,22 +1567,22 @@ const bt = (r) => (e) => {
     return r;
   switch (r.type) {
     case "triangle":
-      return bt({
+      return Tt({
         radius: r.radius ?? v.polygonArrowRadius
       });
     case "arc":
-      return Pt({
+      return Mt({
         radius: r.radius ?? v.circleArrowRadius
       });
     default:
-      return Tt({
+      return Dt({
         smallRadius: r.smallRadius ?? v.wedgeArrowSmallRadius,
         angle: r.angle ?? v.wedgeArrowAngle,
         radius: r.radius ?? v.wedgeArrowRadius
       });
   }
-}, W = 50;
-class Ct {
+}, O = 50;
+class Rt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1589,7 +1599,7 @@ class Ct {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new mt({
+    i(this, "createCyclePath", (e, t, o) => new At({
       origin: e,
       dir: o,
       radius: this.portCycleRadius,
@@ -1597,7 +1607,7 @@ class Ct {
       arrowLength: this.arrowLength,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new ut({
+    i(this, "createDetourPath", (e, t, o, s) => new wt({
       from: e,
       to: t,
       fromDir: o,
@@ -1609,7 +1619,7 @@ class Ct {
       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,
@@ -1619,7 +1629,7 @@ class Ct {
       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 H({
+    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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1629,14 +1639,14 @@ class Ct {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: W
+      padding: O
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
     this.pathShape.render(e);
   }
 }
-class Mt {
+class Lt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1661,7 +1671,7 @@ class Mt {
       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,
@@ -1673,7 +1683,7 @@ class Mt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new pt({
+    i(this, "createLinePath", (e, t, o, s) => new ft({
       from: e,
       to: t,
       fromDir: o,
@@ -1690,7 +1700,7 @@ class Mt {
       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 H({
+    ), 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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1700,14 +1710,14 @@ class Mt {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: W
+      padding: O
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
     this.pathShape.render(e);
   }
 }
-class Dt {
+class Vt {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1733,7 +1743,7 @@ class Dt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new wt({
+    i(this, "createDetourPath", (e, t, o, s) => new vt({
       from: e,
       to: t,
       fromDir: o,
@@ -1746,7 +1756,7 @@ class Dt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new yt({
+    i(this, "createLinePath", (e, t, o, s) => new mt({
       from: e,
       to: t,
       fromDir: o,
@@ -1763,7 +1773,7 @@ class Dt {
       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 H({
+    ), 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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1773,14 +1783,14 @@ class Dt {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: W
+      padding: O
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
     this.pathShape.render(e);
   }
 }
-class Lt {
+class It {
   constructor(e) {
     i(this, "svg");
     i(this, "group");
@@ -1805,7 +1815,7 @@ class Lt {
       roundness: this.roundness,
       hasArrow: this.hasSourceArrow || this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s) => new Nt({
+    i(this, "createDetourPath", (e, t, o, s) => new Ct({
       from: e,
       to: t,
       fromDir: o,
@@ -1817,7 +1827,7 @@ class Lt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new vt({
+    i(this, "createLinePath", (e, t, o, s) => new Et({
       from: e,
       to: t,
       fromDir: o,
@@ -1834,7 +1844,7 @@ class Lt {
       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 H({
+    ), 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({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
       arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
@@ -1844,14 +1854,14 @@ class Lt {
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: W
+      padding: O
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
     this.pathShape.render(e);
   }
 }
-class Ie {
+class $e {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1869,16 +1879,16 @@ class Ie {
     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 = B((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 = Le(this.color), this.svg.appendChild(this.group), this.line = Re(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = 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 = B((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 = Ie(this.color), this.svg.appendChild(this.group), this.line = Fe(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));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = De(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = Ve(
       e.from,
       e.to,
-      W
+      O
     );
-    Ve(this.svg, { x: t, y: o, width: s, height: n });
-    const d = new xt({
+    Ue(this.svg, { x: t, y: o, width: s, height: n });
+    const d = new St({
       from: a,
       to: h,
       sourceOffset: this.sourceOffset,
@@ -1930,40 +1940,40 @@ class Ie {
     });
   }
 }
-const Rt = () => {
+const Ft = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, Vt = (r) => {
+}, Ut = (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;
-}, me = (r) => {
+}, Ae = (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 It extends Error {
+class $t extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Fe {
+class Be {
   constructor(e, t) {
     i(this, "svg");
     i(this, "group");
     i(this, "line");
     i(this, "sourceArrow");
     i(this, "targetArrow");
-    i(this, "handle", Rt());
+    i(this, "handle", Ft());
     i(this, "onAfterRender");
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Fe)
-      throw new It(
+    if (this.baseEdge = e, e instanceof Be)
+      throw new $t(
         "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 = Vt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = me(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = me(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
+    this.interactiveLine = Ut(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Ae(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Ae(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);
     });
   }
@@ -1971,7 +1981,7 @@ class Fe {
     this.baseEdge.render(e);
   }
 }
-class Br {
+class Hr {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -1988,7 +1998,7 @@ class Br {
     this.baseShape.render(e);
   }
 }
-class Ue {
+class Oe {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -2059,6 +2069,9 @@ class Ue {
       shape: o.shape
     };
   }
+  findEdgeIdByElement(e) {
+    return this.graphStore.findEdgeIdByElement(e);
+  }
   getPortIncomingEdgeIds(e) {
     return this.graphStore.getPortIncomingEdgeIds(e);
   }
@@ -2100,7 +2113,7 @@ class J {
     this.counter = 0;
   }
 }
-class $e {
+class We {
   constructor(e, t, o) {
     i(this, "nodeIdGenerator", new J(
       (e) => this.graphStore.hasNode(e)
@@ -2231,18 +2244,18 @@ class $e {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const Ft = (r) => {
+const Bt = (r) => {
   setTimeout(() => {
     r();
   });
-}, Ut = (r) => {
+}, Ot = (r) => {
   queueMicrotask(() => {
     r();
   });
 }, re = (r) => {
   r();
 };
-class Be {
+class ze {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
@@ -2265,7 +2278,7 @@ class Be {
     return this.viewportStore.createViewportCoords(e);
   }
 }
-const $t = (r, e) => Symbol.iterator in r ? {
+const Wt = (r, e) => Symbol.iterator in r ? {
   minContentScale: e.focus.minContentScale,
   nodes: r,
   contentPadding: e.focus.contentPadding,
@@ -2275,16 +2288,16 @@ const $t = (r, e) => Symbol.iterator in r ? {
   nodes: r.nodes ?? [],
   contentPadding: r.contentPadding ?? r.contentOffset ?? e.focus.contentPadding,
   animationDuration: r.animationDuration ?? e.focus.animationDuration
-}, We = (r, e, t) => ({
+}, ke = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Oe = (r, e, t, o) => ({
+}), He = (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 ze {
+class Ye {
   constructor(e, t, o, s) {
     this.graphStore = e, this.viewportStore = t, this.params = o, this.win = s;
   }
@@ -2296,11 +2309,11 @@ class ze {
   }
   center(e, t) {
     const { width: o, height: s } = this.viewportStore.getDimensions(), n = { x: o / 2, y: s / 2 }, a = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - n.x, c = h.y - n.y;
-    let u = We(a, d, c);
+    let u = ke(a, d, c);
     const g = t == null ? void 0 : t.contentScale;
     if (g !== void 0) {
       const w = 1 / g;
-      u = Oe(
+      u = He(
         u,
         w / a.scale,
         n.x,
@@ -2311,7 +2324,7 @@ class ze {
     l > 0 ? this.animateNavigation(a, u, l) : this.viewportStore.patchViewportMatrix(u);
   }
   focus(e) {
-    const t = $t(e ?? {}, this.params);
+    const t = Wt(e ?? {}, this.params);
     this.params.focus.schedule(() => {
       this.navigate(t);
     });
@@ -2360,20 +2373,20 @@ class ze {
     this.win.requestAnimationFrame(a);
   }
 }
-const ke = (r, e, t) => {
-  const o = new Pe(), s = new Ue(o), n = new Be(e), a = new Ne(o, e, r), h = {
+const Xe = (r, e, t) => {
+  const o = new Me(), s = new Oe(o), n = new ze(e), a = new Ce(o, e, r), h = {
     nodes: {
-      centerFn: Me,
+      centerFn: Le,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Ie(),
+      shapeFactory: () => new $e(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
-  }, d = new $e(
+  }, d = new We(
     o,
     a,
     h
@@ -2384,13 +2397,13 @@ const ke = (r, e, t) => {
       schedule: re,
       animationDuration: 0
     }
-  }, u = new ze(
+  }, u = new Ye(
     o,
     e,
     c,
     t
   );
-  return new be(s, n, d, u);
+  return new Te(s, n, d, u);
 };
 class G {
   constructor(e, t, o, s) {
@@ -2497,7 +2510,7 @@ class G {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-class Bt {
+class zt {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -2511,7 +2524,7 @@ class Bt {
     }), this.params.onAfterApplied();
   }
 }
-class Wt {
+class kt {
   constructor(e, t, o) {
     this.canvas = e, this.layoutAlgorithm = t, this.params = o;
   }
@@ -2526,7 +2539,111 @@ class Wt {
     }), this.params.onAfterApplied();
   }
 }
-class oe {
+class Ht {
+  constructor() {
+    i(this, "field", "_htmlGraphTags");
+  }
+  has(e, t) {
+    const s = e[this.field];
+    return s !== void 0 && s.has(t);
+  }
+  tag(e, t) {
+    const o = e, s = o[this.field];
+    s === void 0 ? o[this.field] = /* @__PURE__ */ new Set([t]) : s.add(t);
+  }
+}
+const oe = Symbol();
+class se {
+  constructor(e, t, o) {
+    i(this, "onSelected");
+    i(this, "mouseDownEventVerifier");
+    i(this, "mouseUpEventVerifier");
+    i(this, "movementThreshold");
+    i(this, "selectionCandidate", null);
+    i(this, "previousMouse", null);
+    i(this, "previousTouch", null);
+    i(this, "movedDistance", 0);
+    i(this, "onElementMouseDown", (e) => {
+      const t = e;
+      this.mouseDownEventVerifier(t) && (this.selectionCandidate = t.currentTarget, 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, "onElementTouchStart", (e) => {
+      const t = e, o = t.touches;
+      o.length === 1 && (this.selectionCandidate = t.currentTarget, this.previousTouch = o[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;
+      if (!this.pointInsideVerifier.verify(
+        t.clientX,
+        t.clientY
+      )) {
+        this.removeWindowMouseListeners();
+        return;
+      }
+      const s = this.previousMouse, n = t.clientX - s.x, a = t.clientY - s.y;
+      this.previousMouse = { x: t.clientX, y: t.clientY }, this.processMoveThresholdVerification(n, a, () => {
+        this.removeWindowMouseListeners();
+      });
+    });
+    i(this, "onWindowMouseUp", (e) => {
+      const t = e;
+      this.mouseUpEventVerifier(t) && (this.removeWindowMouseListeners(), this.onSelected(this.selectionCandidate, e));
+    });
+    i(this, "onWindowTouchMove", (e) => {
+      const o = e.touches;
+      if (o.length !== 1) {
+        this.removeWindowTouchListeners();
+        return;
+      }
+      const s = o[0];
+      if (!this.pointInsideVerifier.verify(
+        s.clientX,
+        s.clientY
+      )) {
+        this.removeWindowTouchListeners();
+        return;
+      }
+      const a = this.previousTouch, h = s.clientX - a.clientX, d = s.clientY - a.clientY;
+      this.previousTouch = s, this.processMoveThresholdVerification(h, d, () => {
+        this.removeWindowTouchListeners();
+      });
+    });
+    i(this, "onWindowTouchEnd", (e) => {
+      this.removeWindowTouchListeners(), this.onSelected(this.selectionCandidate, e);
+    });
+    i(this, "onWindowTouchCancel", () => {
+      this.removeWindowTouchListeners();
+    });
+    this.window = e, this.pointInsideVerifier = t, this.mouseDownEventVerifier = o.mouseDownEventVerifier, this.mouseUpEventVerifier = o.mouseUpEventVerifier, this.onSelected = o.onSelected, this.movementThreshold = o.movementThreshold;
+  }
+  enable(e) {
+    e.addEventListener("mousedown", this.onElementMouseDown), e.addEventListener("touchstart", this.onElementTouchStart);
+  }
+  disable(e) {
+    e.removeEventListener("mousedown", this.onElementMouseDown), e.removeEventListener("touchstart", this.onElementTouchStart), e === this.selectionCandidate && (this.removeWindowMouseListeners(), this.removeWindowTouchListeners());
+  }
+  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();
+  }
+}
+class ie {
   constructor(e, t, o, s, n) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
@@ -2645,7 +2762,7 @@ class oe {
     this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.params = n, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s, n) {
-    new oe(
+    new ie(
       e,
       t,
       o,
@@ -2720,7 +2837,7 @@ class oe {
     return e;
   }
 }
-const O = (r) => {
+const W = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
@@ -2780,10 +2897,10 @@ class j {
     });
     i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = O(e);
+        this.prevTouches = W(e);
         return;
       }
-      this.prevTouches = O(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = W(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2792,7 +2909,7 @@ class j {
       }), this.startRegisteredTransform();
     });
     i(this, "onWindowTouchMove", (e) => {
-      const t = O(e);
+      const t = W(e);
       if (!t.touches.every(
         (s) => this.pointInsideVerifier.verify(s[0], s[1])
       )) {
@@ -2809,7 +2926,7 @@ class j {
       this.prevTouches = t;
     });
     i(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = O(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = W(e) : this.stopTouchDrag();
     });
     i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
@@ -2836,7 +2953,7 @@ class j {
     );
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = We(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), s = ke(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: s,
       canvasWidth: n,
@@ -2845,7 +2962,7 @@ class j {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), n = Oe(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), n = He(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: n,
       canvasWidth: a,
@@ -2884,7 +3001,7 @@ class j {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
   }
 }
-class se {
+class ne {
   constructor(e, t, o, s, n, a, h) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
@@ -2940,7 +3057,7 @@ class se {
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, o, s, n, a, h) {
-    new se(
+    new ne(
       e,
       t,
       o,
@@ -2971,24 +3088,24 @@ class se {
     });
   }
 }
-const Ot = () => {
+const Yt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, zt = () => {
+}, Xt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, kt = () => {
+}, Gt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class ie {
+class ae {
   constructor(e, t, o) {
-    i(this, "svg", Ot());
-    i(this, "patternRenderingRectangle", zt());
-    i(this, "pattern", kt());
+    i(this, "svg", Yt());
+    i(this, "patternRenderingRectangle", Xt());
+    i(this, "pattern", Gt());
     i(this, "patternContent");
     i(this, "tileWidth");
     i(this, "tileHeight");
@@ -3009,7 +3126,7 @@ class ie {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new ie(e, t, o);
+    new ae(e, t, o);
   }
   updateVisibility() {
     const { scale: e } = this.canvas.viewport.getViewportMatrix(), t = e > this.maxViewportScale;
@@ -3023,7 +3140,7 @@ class ie {
     }
   }
 }
-class ne {
+class he {
   constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -3031,7 +3148,7 @@ class ne {
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = ke(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = Xe(
       this.overlayLayer,
       this.viewportStore,
       this.window
@@ -3062,7 +3179,7 @@ class ne {
     );
   }
   static configure(e, t, o, s, n, a) {
-    new ne(
+    new he(
       e,
       t,
       o,
@@ -3091,7 +3208,7 @@ class ne {
     };
     this.isTargetDragging = o === "direct";
     const [w, p] = this.isTargetDragging ? [g, l] : [l, g];
-    this.overlayCanvas.addNode(Y(w)), this.overlayCanvas.addNode(Y(p)), this.overlayCanvas.addEdge({
+    this.overlayCanvas.addNode(H(w)), this.overlayCanvas.addNode(H(p)), this.overlayCanvas.addEdge({
       from: w.overlayNodeId,
       to: p.overlayNodeId,
       shape: this.params.edgeShapeFactory(M.EdgeId)
@@ -3101,7 +3218,7 @@ class ne {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = Ce(this.canvas.graph, e);
+    const t = Re(this.canvas.graph, e);
     if (t === null) {
       this.handleEdgeCreationInterrupted();
       return;
@@ -3127,7 +3244,7 @@ class ne {
     });
   }
 }
-class ae {
+class de {
   constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
@@ -3136,7 +3253,7 @@ class ae {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = ke(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = Xe(
       this.overlayLayer,
       this.viewportStore,
       this.window
@@ -3155,7 +3272,16 @@ class ae {
           this.moveDraggingPort(h);
         },
         onPointerMoveOutside: () => {
-          this.handleEdgeReattachInterrupted();
+          const h = this.draggingEdgePayload;
+          queueMicrotask(() => {
+            this.params.onEdgeReattachInterrupted({
+              id: h.id,
+              from: h.from,
+              to: h.to,
+              shape: h.shape,
+              priority: h.priority
+            });
+          });
         },
         onPointerUp: (h) => {
           this.tryCreateConnection(h);
@@ -3164,7 +3290,7 @@ class ae {
     );
   }
   static configure(e, t, o, s, n, a) {
-    new ae(
+    new de(
       e,
       t,
       o,
@@ -3205,13 +3331,13 @@ class ae {
       portCoords: p,
       portDirection: d.direction
     }, [x, E] = this.isTargetDragging ? [y, f] : [f, y];
-    this.overlayCanvas.addNode(Y(x)), this.overlayCanvas.addNode(Y(E));
-    const b = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
+    this.overlayCanvas.addNode(H(x)), this.overlayCanvas.addNode(H(E));
+    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
       id: M.EdgeId,
       from: x.overlayNodeId,
       to: E.overlayNodeId,
-      shape: b
+      shape: N
     }), !0;
   }
   resetDragState() {
@@ -3228,7 +3354,7 @@ class ae {
     });
   }
   tryCreateConnection(e) {
-    const t = Ce(this.canvas.graph, e);
+    const t = Re(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(M.EdgeId), t === null) {
       this.handleEdgeReattachInterrupted();
       return;
@@ -3264,17 +3390,17 @@ class ae {
     });
   }
 }
-class he {
+class ce {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new he(e, t);
+    new ce(e, t);
   }
 }
-class de {
+class le {
   constructor(e, t, o) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
@@ -3291,7 +3417,7 @@ class de {
     });
   }
   static configure(e, t, o) {
-    new de(
+    new le(
       e,
       t,
       o
@@ -3301,23 +3427,23 @@ class de {
     this.applyScheduled || (this.applyScheduled = !0, this.defererFn(this.apply));
   }
 }
-class Yt {
+class jt {
   static configure(e, t) {
-    const o = t.applyOn, s = new Bt(e, t.algorithm, {
+    const o = t.applyOn, s = new zt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
     });
     switch (o.type) {
       case "trigger": {
-        he.configure(
+        ce.configure(
           s,
           o.trigger
         );
         break;
       }
       case "topologyChangeSchedule": {
-        de.configure(
+        le.configure(
           e.graph,
           s,
           o.schedule
@@ -3327,7 +3453,7 @@ class Yt {
     }
   }
 }
-class Xt {
+class Jt {
   constructor(e, t) {
     i(this, "previousTimeStamp");
     i(this, "step", (e) => {
@@ -3342,222 +3468,100 @@ class Xt {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class ce {
+class ue {
   constructor(e, t, o) {
     i(this, "applier");
     i(this, "step", (e) => {
       this.applier.apply(e);
     });
-    this.win = o, this.applier = new Wt(e, t.algorithm, {
+    this.win = o, this.applier = new kt(e, t.algorithm, {
       staticNodeResolver: t.staticNodeResolver,
       onBeforeApplied: t.onBeforeApplied,
       onAfterApplied: t.onAfterApplied
-    }), new Xt(this.win, this.step);
+    }), new Jt(this.win, this.step);
   }
   static configure(e, t, o) {
-    new ce(e, t, o);
+    new ue(e, t, o);
   }
 }
-class le {
-  constructor(e, t, o, s) {
+class ge {
+  constructor(e, t, o, s, n) {
+    i(this, "configurator");
     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, "selectionHandledTag", oe);
     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
-      });
+      this.configurator.enable(t);
     });
     i(this, "onBeforeNodeRemoved", (e) => {
       const { element: t } = this.canvas.graph.getNode(e);
-      t.removeEventListener("mousedown", this.onNodeMouseDown), t.removeEventListener("touchstart", this.onNodeTouchStart);
+      this.configurator.disable(t);
     });
     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
+        this.configurator.disable(t);
       });
     });
-    i(this, "onWindowMouseMove", (e) => {
-      const t = e, o = this.previousMouse, s = t.clientX - o.x, n = t.clientY - o.y;
-      if (!this.pointInsideVerifier.verify(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 (!this.pointInsideVerifier.verify(o.clientX, o.clientY)) {
-        this.removeWindowTouchListeners();
-        return;
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onNodeSelected = n.onNodeSelected, this.configurator = new se(
+      this.window,
+      this.pointInsideVerifier,
+      {
+        onSelected: (a, h) => {
+          const d = this.canvas.graph.findNodeIdByElement(a);
+          this.eventTagger.tag(h, this.selectionHandledTag), this.onNodeSelected(d);
+        },
+        movementThreshold: n.movementThreshold,
+        mouseDownEventVerifier: n.mouseDownEventVerifier,
+        mouseUpEventVerifier: n.mouseUpEventVerifier
       }
-      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(e));
-    });
-    i(this, "onWindowTouchEnd", (e) => {
-      this.removeWindowTouchListeners(), this.trySelectNode(e);
-    });
-    i(this, "onWindowTouchCancel", () => {
-      this.removeWindowTouchListeners();
-    });
-    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.mouseDownEventVerifier = s.mouseDownEventVerifier, this.mouseUpEventVerifier = s.mouseUpEventVerifier, this.onNodeSelected = s.onNodeSelected, this.movementThreshold = s.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);
+    ), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
-  static configure(e, t, o, s) {
-    new le(
+  static configure(e, t, o, s, n) {
+    new ge(
       e,
       t,
       o,
-      s
+      s,
+      n
     );
   }
-  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(e) {
-    const t = this.selectionCandidateNodeId;
-    this.canvas.graph.hasNode(t) && (this.onNodeSelected(t), e.ignoreCanvasSelection = !0);
-  }
-  processMoveThresholdVerification(e, t, o) {
-    const s = Math.sqrt(e * e + t * t);
-    this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
-  }
 }
-class ue {
+class pe {
   constructor(e, t, o, s, n) {
-    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, "configurator");
+    i(this, "selectionHandledTag", oe);
+    i(this, "onEdgeSelected");
+    i(this, "onAfterEdgeAdded", (e) => {
+      const { shape: t } = this.canvas.graph.getEdge(e);
+      this.configurator.enable(t.svg);
     });
-    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, "onBeforeEdgeRemoved", (e) => {
+      const { shape: t } = this.canvas.graph.getEdge(e);
+      this.configurator.disable(t.svg);
     });
-    i(this, "onWindowMouseMove", (e) => {
-      const t = e;
-      if (!this.pointInsideVerifier.verify(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, "reset", () => {
+      this.canvas.graph.getAllEdgeIds().forEach((e) => {
+        const { shape: t } = this.canvas.graph.getEdge(e);
+        this.configurator.disable(t.svg);
+      });
     });
-    i(this, "onWindowTouchMove", (e) => {
-      const t = e;
-      if (t.touches.length !== 1) {
-        this.removeWindowTouchListeners();
-        return;
-      }
-      const o = t.touches[0];
-      if (!this.pointInsideVerifier.verify(o.clientX, o.clientY)) {
-        this.removeWindowTouchListeners();
-        return;
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.eventTagger = s, this.onEdgeSelected = n.onEdgeSelected, this.configurator = new se(
+      this.window,
+      this.pointInsideVerifier,
+      {
+        onSelected: (a, h) => {
+          const d = this.canvas.graph.findEdgeIdByElement(a);
+          this.eventTagger.tag(h, this.selectionHandledTag), this.onEdgeSelected(d);
+        },
+        movementThreshold: n.movementThreshold,
+        mouseDownEventVerifier: n.mouseDownEventVerifier,
+        mouseUpEventVerifier: n.mouseUpEventVerifier
       }
-      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;
-      if (!this.mouseUpEventVerifier(t))
-        return;
-      e.ignoreCanvasSelection !== !0 && 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.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.onCanvasSelected = n.onCanvasSelected, this.movementThreshold = n.movementThreshold, this.mouseDownEventVerifier = n.mouseDownEventVerifier, this.mouseUpEventVerifier = n.mouseUpEventVerifier, this.canvas.onBeforeDestroy.subscribe(this.restore), this.element.addEventListener("mousedown", this.onMouseDown, {
-      passive: !0
-    }), this.element.addEventListener("touchstart", this.onTouchStart, {
-      passive: !0
-    });
+    ), this.canvas.graph.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.canvas.graph.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.reset);
   }
   static configure(e, t, o, s, n) {
-    new ue(
+    new pe(
       e,
       t,
       o,
@@ -3565,46 +3569,68 @@ class ue {
       n
     );
   }
-  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);
+}
+class we {
+  constructor(e, t, o, s, n, a) {
+    i(this, "configurator");
+    i(this, "onCanvasSelected");
+    i(this, "selectionHandledTag", oe);
+    i(this, "restore", () => {
+      this.configurator.disable(this.element);
+    });
+    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.eventTagger = n, this.onCanvasSelected = a.onCanvasSelected, this.configurator = new se(
+      this.window,
+      this.pointInsideVerifier,
+      {
+        onSelected: (h, d) => {
+          this.eventTagger.has(d, this.selectionHandledTag) || this.onCanvasSelected();
+        },
+        movementThreshold: a.movementThreshold,
+        mouseDownEventVerifier: a.mouseDownEventVerifier,
+        mouseUpEventVerifier: a.mouseUpEventVerifier
+      }
+    ), this.configurator.enable(this.element), this.canvas.onBeforeDestroy.subscribe(this.restore);
   }
-  processMoveThresholdVerification(e, t, o) {
-    const s = Math.sqrt(e * e + t * t);
-    this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
+  static configure(e, t, o, s, n, a) {
+    new we(
+      e,
+      t,
+      o,
+      s,
+      n,
+      a
+    );
   }
 }
-const Ht = () => {
+const Kt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Q = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, xe = () => {
+}, Se = () => {
   const r = Q();
   return r.style.pointerEvents = "none", r;
 };
-class Gt {
+class Qt {
   constructor(e) {
     i(this, "background", Q());
     i(this, "main", Q());
-    i(this, "overlayConnectablePorts", xe());
-    i(this, "overlayDraggableEdges", xe());
-    i(this, "host", Ht());
+    i(this, "overlayConnectablePorts", Se());
+    i(this, "overlayDraggableEdges", Se());
+    i(this, "host", Kt());
     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 jt = (r) => {
+const Zt = (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;
+  }), 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 : (N) => N.button === 0, g = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, l = g !== void 0 ? g : (N) => N.button === 0;
   return {
     moveOnTop: n,
     moveEdgesOnTop: a,
@@ -3617,7 +3643,7 @@ const jt = (r) => {
     nodeDragVerifier: o,
     onNodeDragFinished: s
   };
-}, Jt = (r) => {
+}, _t = (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;
@@ -3627,7 +3653,7 @@ const jt = (r) => {
     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 };
   };
-}, Kt = (r) => {
+}, qt = (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;
@@ -3648,7 +3674,7 @@ const jt = (r) => {
       y: u
     };
   };
-}, Qt = (r) => (e) => r.reduce(
+}, er = (r) => (e) => r.reduce(
   (t, o) => o({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -3656,38 +3682,38 @@ const jt = (r) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), Ee = (r) => {
+), be = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return Kt({
+      return qt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Jt({
+      return _t({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, Ae = (r) => {
-  var p, y, f, x, E, b, T, C, I, F, U, pe;
+}, Ne = (r) => {
+  var p, y, f, x, E, N, C, T, I, F, U, fe;
   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 = Qt(
+  o !== void 0 ? Array.isArray(o) ? s = er(
     o.map(
-      (D) => Ee(D)
+      (R) => be(R)
     )
-  ) : s = Ee(o) : s = (D) => D.nextTransform;
+  ) : s = be(o) : s = (R) => R.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 : (D) => D.button === 0, u = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = u !== void 0 ? u : (D) => D.button === 0, l = (T = r == null ? void 0 : r.scale) == null ? void 0 : T.mouseWheelEventVerifier, w = l !== void 0 ? l : () => !0;
+  }), d = (E = r == null ? void 0 : r.shift) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (R) => R.button === 0, u = (N = r == null ? void 0 : r.shift) == null ? void 0 : N.mouseUpEventVerifier, g = u !== void 0 ? u : (R) => R.button === 0, l = (C = r == null ? void 0 : r.scale) == null ? void 0 : C.mouseWheelEventVerifier, w = l !== void 0 ? l : () => !0;
   return {
     wheelSensitivity: t,
-    onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
+    onTransformStarted: ((T = r == null ? void 0 : r.events) == null ? void 0 : T.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((I = r == null ? void 0 : r.events) == null ? void 0 : I.onTransformFinished) ?? (() => {
     }),
@@ -3701,32 +3727,32 @@ const jt = (r) => {
     scaleWheelFinishTimeout: ((F = r == null ? void 0 : r.scale) == null ? void 0 : F.wheelFinishTimeout) ?? 500,
     onResizeTransformStarted: ((U = r == null ? void 0 : r.events) == null ? void 0 : U.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((pe = r == null ? void 0 : r.events) == null ? void 0 : pe.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((fe = r == null ? void 0 : r.events) == null ? void 0 : fe.onResizeTransformFinished) ?? (() => {
     })
   };
-}, Zt = (r, e) => {
+}, tr = (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;
-}, _t = (r) => r instanceof SVGElement ? r : Zt(
+}, rr = (r) => r instanceof SVGElement ? r : tr(
   (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 = _t(r.renderer ?? {});
+), or = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = rr(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: o,
     renderer: s,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, ge = (r) => {
+}, ye = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "straight":
-      return () => new Dt({
+      return () => new Vt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3740,7 +3766,7 @@ const jt = (r) => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Mt({
+      return () => new Lt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3753,7 +3779,7 @@ const jt = (r) => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new Lt({
+      return () => new It({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3766,7 +3792,7 @@ const jt = (r) => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Ie({
+      return () => new $e({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3777,7 +3803,7 @@ const jt = (r) => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Ct({
+      return () => new Rt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3791,7 +3817,7 @@ const jt = (r) => {
         detourDirection: r.detourDirection
       });
   }
-}, er = (r, e, t) => {
+}, sr = (r, e, t) => {
   var c, u, g;
   const o = () => "direct", s = (l) => l, n = (l) => l.button === 0, a = () => {
   }, h = () => {
@@ -3806,9 +3832,9 @@ const jt = (r) => {
     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 ? ge(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? ye(r.edgeShape) : e
   };
-}, tr = (r, e) => {
+}, ir = (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 w = e.getPortAdjacentEdgeIds(l);
@@ -3822,15 +3848,15 @@ const jt = (r) => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ge(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ye(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, rr = (r) => ({
+}, nr = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), or = (r) => {
+}), ar = (r) => {
   var e, t;
   return {
     onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
@@ -3839,13 +3865,13 @@ const jt = (r) => {
     })
   };
 };
-class sr extends Error {
+class hr extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "CanvasBuilderError");
   }
 }
-class Ye {
+class Ge {
   constructor(e, t, o) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3883,7 +3909,7 @@ class Ye {
     });
   }
 }
-class Xe {
+class je {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3902,13 +3928,13 @@ class Xe {
     return { ex: h, ey: d, d: a };
   }
 }
-const He = (r) => {
+const Je = (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 ir {
+class dr {
   constructor(e) {
     i(this, "nodeCharge");
     i(this, "distanceVectorGenerator");
@@ -3923,7 +3949,7 @@ class ir {
         const d = o[h], c = e.get(a), u = e.get(d), g = this.distanceVectorGenerator.create(
           c,
           u
-        ), l = He({
+        ), l = Je({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
@@ -3935,7 +3961,7 @@ class ir {
     }
   }
 }
-const nr = (r) => {
+const cr = (r) => {
   if (r.size === 0)
     return {
       centerX: 0,
@@ -3953,7 +3979,7 @@ const nr = (r) => {
     radius: h / 2
   };
 };
-class ar {
+class lr {
   constructor(e) {
     i(this, "root");
     i(this, "leaves", /* @__PURE__ */ new Map());
@@ -4110,7 +4136,7 @@ class ar {
     }), { x: t / e.size, y: o / e.size };
   }
 }
-class hr {
+class ur {
   constructor(e) {
     i(this, "areaRadiusThreshold");
     i(this, "nodeMass");
@@ -4122,7 +4148,7 @@ class hr {
     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 = nr(e), s = new ar({
+    const o = cr(e), s = new lr({
       box: o,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
@@ -4237,7 +4263,7 @@ class hr {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), o = He({
+    ), o = Je({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -4272,7 +4298,7 @@ class hr {
     }
   }
 }
-const Ge = (r) => r.theta !== 0 ? new hr({
+const Ke = (r) => r.theta !== 0 ? new ur({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -4280,13 +4306,13 @@ const Ge = (r) => r.theta !== 0 ? new hr({
   theta: r.theta,
   nodeMass: r.nodeMass,
   areaRadiusThreshold: r.areaRadiusThreshold
-}) : new ir({
+}) : new dr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class je {
+class Qe {
   constructor(e) {
     i(this, "rand");
     i(this, "sparsity");
@@ -4309,7 +4335,7 @@ class je {
     }), s;
   }
 }
-class dr {
+class gr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4320,7 +4346,7 @@ class dr {
     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 Xe(e.rand), this.nodeForcesApplicationStrategy = Ge({
+    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 je(e.rand), this.nodeForcesApplicationStrategy = Ke({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4328,7 +4354,7 @@ class dr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new je({
+    }), this.fillerLayoutAlgorithm = new Qe({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4338,7 +4364,7 @@ class dr {
       graph: t,
       viewport: o
     });
-    for (let n = 0; n < this.maxIterations && !(new Ye(
+    for (let n = 0; n < this.maxIterations && !(new Ge(
       t,
       s,
       {
@@ -4354,7 +4380,7 @@ class dr {
     return s;
   }
 }
-class cr {
+class pr {
   constructor(e, t) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
@@ -4395,7 +4421,7 @@ class cr {
     }
   }
 }
-class lr {
+class wr {
   constructor(e) {
     this.params = e;
   }
@@ -4436,12 +4462,12 @@ class lr {
     return o - 2 * this.params.spaceAroundRadius;
   }
 }
-class ur {
+class yr {
   constructor(e, t) {
     i(this, "offsets", /* @__PURE__ */ new Map());
     i(this, "treeSpans", /* @__PURE__ */ new Map());
     this.tree = e;
-    const o = t.spaceAroundRadius, s = new lr({
+    const o = t.spaceAroundRadius, s = new wr({
       spaceAroundRadius: o
     });
     [...this.tree.sequence].reverse().forEach((n) => {
@@ -4463,19 +4489,19 @@ class ur {
     return this.offsets;
   }
 }
-class gr {
+class fr {
   constructor(e) {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), s = new cr(
+    const t = /* @__PURE__ */ new Map(), s = new pr(
       e.graph,
       this.params.nextLayerNodesResolver
     ).generate();
     let n = 0;
     return s.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
-      const d = new ur(a, {
+      const d = new yr(a, {
         spaceAroundRadius: this.params.layerSpace / 2
       }).generate();
       let c = [a.root];
@@ -4496,7 +4522,7 @@ class gr {
     }), t;
   }
 }
-const pr = (r) => {
+const vr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((n) => {
     const a = e.getEdge(n);
     return e.getPort(a.to).nodeId;
@@ -4505,20 +4531,20 @@ const pr = (r) => {
     return e.getPort(a.from).nodeId;
   });
   return /* @__PURE__ */ new Set([...o, ...s]);
-}, wr = (r) => {
+}, mr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((s) => {
     const n = e.getEdge(s);
     return e.getPort(n.to).nodeId;
   });
   return new Set(o);
-}, yr = (r) => {
+}, xr = (r) => {
   const { graph: e, currentNodeId: t } = r, o = e.getNodeIncomingEdgeIds(t).map((s) => {
     const n = e.getEdge(s);
     return e.getPort(n.from).nodeId;
   });
   return new Set(o);
 };
-class fr {
+class Er {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4528,7 +4554,7 @@ class fr {
     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 Xe(e.rand), this.nodeForcesApplicationStrategy = Ge({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new je(e.rand), this.nodeForcesApplicationStrategy = Ke({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4536,7 +4562,7 @@ class fr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new je({
+    }), this.fillerLayoutAlgorithm = new Qe({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4546,7 +4572,7 @@ class fr {
       graph: t,
       viewport: o
     });
-    return new Ye(
+    return new Ge(
       t,
       n,
       {
@@ -4563,16 +4589,16 @@ class fr {
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const Je = (r) => {
+const Ze = (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];
-}, Ke = (r, e, t, o) => function() {
+}, _e = (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;
-}, A = Object.freeze({
+}, b = Object.freeze({
   seed: "HTMLGraph is awesome",
   maxTimeDeltaSec: 0.01,
   nodeCharge: 1e5,
@@ -4586,29 +4612,29 @@ const Je = (r) => {
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), V = Object.freeze({
+}), D = Object.freeze({
   mouseDownEventVerifier: (r) => r.button === 0,
   mouseUpEventVerifier: (r) => r.button === 0,
   movementThreshold: 10
-}), vr = (r) => {
+}), Ar = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const o = Je((r == null ? void 0 : r.seed) ?? A.seed), s = Ke(o[0], o[1], o[2], o[3]);
-      return new fr({
+      const o = Ze((r == null ? void 0 : r.seed) ?? b.seed), s = _e(o[0], o[1], o[2], o[3]);
+      return new Er({
         rand: s,
-        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
+        maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? b.maxTimeDeltaSec,
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? b.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? b.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? b.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? b.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? b.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? b.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? b.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? b.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? b.barnesHutAreaRadiusThreshold
       });
     }
   }
@@ -4618,23 +4644,23 @@ const Je = (r) => {
   },
   onAfterApplied: () => {
   }
-}, mr = (r) => {
+}, Sr = (r) => {
   var t, o;
   return {
-    algorithm: vr((r == null ? void 0 : r.algorithm) ?? {}),
+    algorithm: Ar((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
   };
-}, xr = (r) => r instanceof _ ? {
+}, br = (r) => r instanceof _ ? {
   type: "trigger",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: Ft
+  schedule: Bt
 } : {
   type: "topologyChangeSchedule",
-  schedule: Ut
+  schedule: Ot
 }, $ = Object.freeze({
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
@@ -4652,7 +4678,7 @@ const Je = (r) => {
   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
-}), Er = (r) => {
+}), Nr = (r) => {
   const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
     a: n / h,
@@ -4663,7 +4689,7 @@ const Je = (r) => {
     f: (o * s - e * a) / h
   };
 };
-class Ar {
+class Pr {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4707,7 +4733,7 @@ class Ar {
     const o = z(
       t,
       e
-    ), s = Er(t);
+    ), s = Nr(t);
     return z(o, s);
   }
   createShiftBaseMatrix(e) {
@@ -4752,7 +4778,7 @@ class Ar {
     };
   }
 }
-const Sr = (r) => {
+const Cr = (r) => {
   if (r === void 0)
     return (s) => s;
   if (typeof r == "function")
@@ -4766,7 +4792,7 @@ const Sr = (r) => {
     e: 1,
     f: 0
   };
-  const o = new Ar();
+  const o = new Pr();
   return e.forEach((s) => {
     const n = o.resolve(s);
     t = z(t, n);
@@ -4777,59 +4803,59 @@ const Sr = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, Nr = (r) => {
+}, Tr = (r) => {
   if (typeof r == "function")
     return r;
   switch (r) {
     case "outgoing":
-      return wr;
+      return mr;
     case "incoming":
-      return yr;
+      return xr;
     default:
-      return pr;
+      return vr;
   }
-}, br = (r) => {
+}, Mr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
-      return new gr({
+      return new fr({
         layerWidth: r.layerWidth ?? $.hierarchicalLayout.layerWidth,
         layerSpace: r.layerSpace ?? $.hierarchicalLayout.layerSpace,
-        transform: Sr(r.transform),
-        nextLayerNodesResolver: Nr(
+        transform: Cr(r.transform),
+        nextLayerNodesResolver: Tr(
           r.nextLayerNodesResolver
         )
       });
     default: {
-      const o = Je((r == null ? void 0 : r.seed) ?? A.seed), s = Ke(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,
+      const o = Ze((r == null ? void 0 : r.seed) ?? b.seed), s = _e(o[0], o[1], o[2], o[3]);
+      return new gr({
+        dtSec: (r == null ? void 0 : r.dtSec) ?? b.dtSec,
+        maxIterations: (r == null ? void 0 : r.maxIterations) ?? b.maxIterations,
         rand: s,
-        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
+        nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? b.nodeCharge,
+        nodeMass: (r == null ? void 0 : r.nodeMass) ?? b.nodeMass,
+        edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? b.edgeEquilibriumLength,
+        edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? b.edgeStiffness,
+        convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? b.convergenceVelocity,
+        maxForce: (r == null ? void 0 : r.maxForce) ?? b.maxForce,
+        nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? b.nodeForceCoefficient,
+        barnesHutTheta: ((e = r == null ? void 0 : r.barnesHut) == null ? void 0 : e.theta) ?? b.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((t = r == null ? void 0 : r.barnesHut) == null ? void 0 : t.areaRadiusThreshold) ?? b.barnesHutAreaRadiusThreshold
       });
     }
   }
-}, Pr = (r) => {
+}, Dr = (r) => {
   var e, t;
   return {
-    algorithm: br(r.algorithm),
-    applyOn: xr(r.applyOn),
+    algorithm: Mr(r.algorithm),
+    applyOn: br(r.applyOn),
     staticNodeResolver: r.staticNodeResolver ?? $.staticNodeResolver,
     onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? $.onBeforeApplied,
     onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? $.onAfterApplied
   };
-}, Tr = (r, e) => ({
+}, Rr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4837,7 +4863,7 @@ const Sr = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Cr = (r, e) => {
+}), Lr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4845,41 +4871,41 @@ const Sr = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, Mr = (r, e) => ({
+}, Vr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), Z = (r) => () => r, Se = Z(0), Dr = () => {
+}), Z = (r) => () => r, Pe = Z(0), Ir = () => {
   let r = 0;
   return () => r++;
-}, Lr = (r, e) => {
-  let t = Se, o = Se;
-  const s = Dr();
+}, Fr = (r, e) => {
+  let t = Pe, o = Pe;
+  const s = Ir();
   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), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
-}, Rr = (r) => {
+}, Ur = (r) => {
   var t, o, s, n, a;
-  const e = Lr(
+  const e = Fr(
     (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) ?? Me,
+      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? Le,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ge(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: ye(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Vr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Ir = (r) => {
+}, $r = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Br = (r) => {
   var o, s, n, a;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Vr(r.layoutParams) : re;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? $r(r.layoutParams) : re;
   return {
     focus: {
       contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4888,18 +4914,23 @@ const Sr = (r) => {
       animationDuration: ((a = e.focus) == null ? void 0 : a.animationDuration) ?? 0
     }
   };
-}, Fr = (r) => ({
+}, Or = (r) => ({
   onNodeSelected: r.onNodeSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? V.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? V.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? V.movementThreshold
-}), Ur = (r) => ({
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? D.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? D.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? D.movementThreshold
+}), Wr = (r) => ({
   onCanvasSelected: r.onCanvasSelected,
-  mouseDownEventVerifier: r.mouseDownEventVerifier ?? V.mouseDownEventVerifier,
-  mouseUpEventVerifier: r.mouseUpEventVerifier ?? V.mouseUpEventVerifier,
-  movementThreshold: r.movementThreshold ?? V.movementThreshold
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? D.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? D.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? D.movementThreshold
+}), zr = (r) => ({
+  onEdgeSelected: r.onEdgeSelected,
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? D.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? D.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? D.movementThreshold
 });
-class Wr {
+class Yr {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4912,6 +4943,7 @@ class Wr {
     i(this, "layoutConfig", {});
     i(this, "animatedLayoutConfig", {});
     i(this, "userSelectableNodesConfig");
+    i(this, "userSelectableEdgesConfig");
     i(this, "userSelectableCanvasConfig");
     i(this, "hasDraggableNodes", !1);
     i(this, "hasTransformableViewport", !1);
@@ -4925,7 +4957,8 @@ class Wr {
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
     i(this, "pointInsideVerifier");
-    this.element = e, this.pointInsideVerifier = new dt(e, this.window);
+    i(this, "eventTagger", new Ht());
+    this.element = e, this.pointInsideVerifier = new ut(e, this.window);
   }
   setDefaults(e) {
     return this.canvasDefaults = e, this;
@@ -4960,73 +4993,90 @@ class Wr {
   enableUserSelectableNodes(e) {
     return this.userSelectableNodesConfig = e, this;
   }
+  enableUserSelectableEdges(e) {
+    return this.userSelectableEdgesConfig = e, this;
+  }
   enableUserSelectableCanvas(e) {
     return this.userSelectableCanvasConfig = e, this;
   }
   build() {
     if (this.used)
-      throw new sr(
+      throw new hr(
         "Failed to build Canvas because CanvasBuilder is a single-use object"
       );
     this.used = !0;
-    const e = new nt(this.element), t = new Pe(), o = new Gt(this.element), s = this.createHtmlView(
+    const e = new dt(this.element), t = new Me(), o = new Qt(this.element), s = this.createHtmlView(
       o.main,
       t,
       e
-    ), n = Rr(
+    ), n = Ur(
       this.canvasDefaults
-    ), a = new $e(
+    ), a = new We(
       t,
       s,
       n
-    ), h = Pr(this.layoutConfig), d = Ir({
+    ), h = Dr(this.layoutConfig), d = Br({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
-    }), c = new ze(
+    }), c = new Ye(
       t,
       e,
       d,
       this.window
-    ), u = new Be(e), g = new Ue(t), l = new be(
+    ), u = new ze(e), g = new Oe(t), l = new Te(
       g,
       u,
       a,
       c
     );
-    if (this.hasBackground && ie.configure(
+    if (this.hasBackground && ae.configure(
       l,
-      qt(this.backgroundConfig),
+      or(this.backgroundConfig),
       o.background
-    ), this.hasNodeResizeReactiveEdges && q.configure(l), this.userSelectableNodesConfig !== void 0) {
-      const p = Fr(
+    ), this.hasNodeResizeReactiveEdges && q.configure(l), this.userSelectableEdgesConfig !== void 0) {
+      const p = zr(
+        this.userSelectableEdgesConfig
+      );
+      pe.configure(
+        l,
+        this.window,
+        this.pointInsideVerifier,
+        this.eventTagger,
+        p
+      );
+    }
+    if (this.userSelectableNodesConfig !== void 0) {
+      const p = Or(
         this.userSelectableNodesConfig
       );
-      le.configure(
+      ge.configure(
         l,
         this.window,
         this.pointInsideVerifier,
+        this.eventTagger,
         p
       );
     }
     if (this.userSelectableCanvasConfig !== void 0) {
-      const p = Ur(
+      const p = Wr(
         this.userSelectableCanvasConfig
       );
-      ue.configure(
+      we.configure(
         l,
         o.main,
         this.window,
         this.pointInsideVerifier,
+        this.eventTagger,
         p
       );
     }
     if (this.hasDraggableNodes) {
-      let p = jt(this.dragConfig);
-      this.hasAnimatedLayout && (p = Tr(
+      let p = Zt(this.dragConfig);
+      this.hasAnimatedLayout && (p = Rr(
         p,
         this.animationStaticNodes
-      )), oe.configure(
+      )), ie.configure(
         l,
         o.main,
         this.window,
@@ -5035,12 +5085,12 @@ class Wr {
       );
     }
     if (this.hasUserConnectablePorts) {
-      const p = er(
+      const p = sr(
         this.connectablePortsConfig,
         n.edges.shapeFactory,
         n.ports.direction
       );
-      ne.configure(
+      he.configure(
         l,
         o.overlayConnectablePorts,
         e,
@@ -5050,11 +5100,11 @@ class Wr {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const p = tr(
+      const p = ir(
         this.draggableEdgesConfig,
         l.graph
       );
-      ae.configure(
+      de.configure(
         l,
         o.overlayDraggableEdges,
         e,
@@ -5063,31 +5113,31 @@ class Wr {
         p
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? se.configure(
+    if (this.virtualScrollConfig !== void 0 ? ne.configure(
       l,
       o.main,
       this.window,
-      Ae(this.transformConfig),
+      Ne(this.transformConfig),
       this.boxRenderingTrigger,
       this.pointInsideVerifier,
-      rr(this.virtualScrollConfig)
+      nr(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && j.configure(
       l,
       o.main,
       this.window,
       this.pointInsideVerifier,
-      Ae(this.transformConfig)
-    ), this.hasLayout && Yt.configure(l, h), this.hasAnimatedLayout) {
-      let p = mr(
+      Ne(this.transformConfig)
+    ), this.hasLayout && jt.configure(l, h), this.hasAnimatedLayout) {
+      let p = Sr(
         this.animatedLayoutConfig
       );
-      this.hasDraggableNodes && (Cr(
+      this.hasDraggableNodes && (Lr(
         l,
         this.animationStaticNodes
-      ), p = Mr(
+      ), p = Vr(
         p,
         this.animationStaticNodes
-      )), ce.configure(l, p, this.window);
+      )), ue.configure(l, p, this.window);
     }
     const w = () => {
       o.destroy(), l.onBeforeDestroy.unsubscribe(w);
@@ -5095,27 +5145,27 @@ class Wr {
     return l.onBeforeDestroy.subscribe(w), l;
   }
   createHtmlView(e, t, o) {
-    let s = new Ne(t, o, e);
-    return this.virtualScrollConfig !== void 0 && (s = new ot(
+    let s = new Ce(t, o, e);
+    return this.virtualScrollConfig !== void 0 && (s = new nt(
       s,
       t,
       this.boxRenderingTrigger,
-      or(this.virtualScrollConfig)
-    )), s = new st(s, t), s;
+      ar(this.virtualScrollConfig)
+    )), s = new at(s, t), s;
   }
 }
 export {
-  Ct as BezierEdgeShape,
-  Wr as CanvasBuilder,
-  sr as CanvasBuilderError,
-  S as CanvasError,
-  R as ConnectionCategory,
-  Ie as DirectEdgeShape,
+  Rt as BezierEdgeShape,
+  Yr as CanvasBuilder,
+  hr as CanvasBuilderError,
+  A as CanvasError,
+  V as ConnectionCategory,
+  $e as DirectEdgeShape,
   _ as EventSubject,
-  Mt as HorizontalEdgeShape,
-  It as InteractiveEdgeError,
-  Fe as InteractiveEdgeShape,
-  Br as MidpointEdgeShape,
-  Dt as StraightEdgeShape,
-  Lt as VerticalEdgeShape
+  Lt as HorizontalEdgeShape,
+  $t as InteractiveEdgeError,
+  Be as InteractiveEdgeShape,
+  Hr as MidpointEdgeShape,
+  Vt as StraightEdgeShape,
+  It as VerticalEdgeShape
 };