@html-graph/html-graph 7.8.0 → 7.9.0

package/dist/html-graph.js

@@ -12,7 +12,7 @@ const He = () => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
 class me {
-  constructor(e, t, o) {
+  constructor(e, t, s) {
     i(this, "host", He());
     i(this, "container", Xe());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
@@ -21,7 +21,7 @@ class me {
       const e = this.viewportStore.getContentMatrix();
       this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
     });
-    this.graphStore = e, this.viewportStore = t, this.element = o, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
+    this.graphStore = e, this.viewportStore = t, this.element = s, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -50,7 +50,7 @@ class me {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: o, height: s } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(o, s), d = a.x - n * h.x, c = a.y - n * h.y;
+    const t = this.graphStore.getNode(e), { width: s, height: o } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, { payload: a } = t, h = a.centerFn(s, o), d = a.x - n * h.x, c = a.y - n * h.y;
     t.element.style.transform = `translate(${d}px, ${c}px)`;
   }
   updateNodePriority(e) {
@@ -60,33 +60,33 @@ class me {
   updateEdgeShape(e) {
     const t = this.edgeIdToElementMap.get(e);
     this.container.removeChild(t);
-    const s = this.graphStore.getEdge(e).payload.shape.svg;
-    this.edgeIdToElementMap.set(e, s), this.container.appendChild(s);
+    const o = this.graphStore.getEdge(e).payload.shape.svg;
+    this.edgeIdToElementMap.set(e, o), this.container.appendChild(o);
   }
   renderEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), s = this.graphStore.getPort(t.to), n = o.element.getBoundingClientRect(), a = s.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix().scale, c = this.createEdgeRenderPort(
-      o,
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix().scale, c = this.createEdgeRenderPort(
+      s,
       n,
       h,
       d
-    ), g = this.createEdgeRenderPort(s, a, h, d);
+    ), g = this.createEdgeRenderPort(o, a, h, d);
     let l = M.Line;
-    o.element === s.element ? l = M.PortCycle : o.nodeId === s.nodeId && (l = M.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
+    s.element === o.element ? l = M.PortCycle : s.nodeId === o.nodeId && (l = M.NodeCycle), t.payload.shape.render({ from: c, to: g, category: l });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
     t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
   }
-  createEdgeRenderPort(e, t, o, s) {
+  createEdgeRenderPort(e, t, s, o) {
     const n = this.viewportStore.createContentCoords({
-      x: t.left - o.left,
-      y: t.top - o.top
+      x: t.left - s.left,
+      y: t.top - s.top
     });
     return {
       x: n.x,
       y: n.y,
-      width: t.width * s,
-      height: t.height * s,
+      width: t.width * o,
+      height: t.height * o,
       direction: e.payload.direction
     };
   }
@@ -103,39 +103,39 @@ class Ge {
     this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
   }
   hasNode(e) {
-    const t = this.graphStore.getNode(e).payload, { x: o, y: s } = t;
-    return o >= this.xFrom && o <= this.xTo && s >= this.yFrom && s <= this.yTo;
+    const t = this.graphStore.getNode(e).payload, { x: s, y: o } = t;
+    return s >= this.xFrom && s <= this.xTo && o >= this.yFrom && o <= this.yTo;
   }
   hasEdge(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(s).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, o = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(o).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), g = Math.max(n.y, a.y);
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && g >= this.yFrom;
   }
 }
 class je {
-  constructor(e, t, o, s) {
+  constructor(e, t, s, o) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
     i(this, "renderingBox");
     i(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
-      const t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+      const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
       this.graphStore.getAllNodeIds().forEach((a) => {
         const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
-        h && !d ? t.add(a) : !h && d && o.add(a);
+        h && !d ? t.add(a) : !h && d && s.add(a);
       }), this.graphStore.getAllEdgeIds().forEach((a) => {
         const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), g = this.graphStore.getPort(c.from).nodeId, l = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(g) || (t.add(g), o.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), o.delete(l))), h && !d ? s.add(a) : !h && d && n.add(a);
+        h && (this.renderingBox.hasNode(g) || (t.add(g), s.delete(g)), this.renderingBox.hasNode(l) || (t.add(l), s.delete(l))), h && !d ? o.add(a) : !h && d && n.add(a);
       }), n.forEach((a) => {
         this.handleDetachEdge(a);
-      }), o.forEach((a) => {
+      }), s.forEach((a) => {
         this.handleDetachNode(a);
       }), t.forEach((a) => {
         this.attachedNodes.has(a) || this.handleAttachNode(a);
-      }), s.forEach((a) => {
+      }), o.forEach((a) => {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new Ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = o, this.renderingBox = new Ge(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -173,8 +173,8 @@ class je {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
   attachEdgeEntities(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, s = this.graphStore.getPort(t.to).nodeId;
-    this.attachedNodes.has(o) || this.handleAttachNode(o), this.attachedNodes.has(s) || this.handleAttachNode(s), this.handleAttachEdge(e);
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, o = this.graphStore.getPort(t.to).nodeId;
+    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(o) || this.handleAttachNode(o), this.handleAttachEdge(e);
   }
   handleAttachNode(e) {
     this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
@@ -236,8 +236,8 @@ class qe {
     this.isNodeValid(e) && (this.deferredNodes.delete(e), this.htmlView.attachNode(e));
   }
   isEdgeValid(e) {
-    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), s = this.graphStore.getPort(t.to);
-    return !(this.deferredNodes.has(o.nodeId) || this.deferredNodes.has(s.nodeId));
+    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), o = this.graphStore.getPort(t.to);
+    return !(this.deferredNodes.has(s.nodeId) || this.deferredNodes.has(o.nodeId));
   }
   tryAttachEdge(e) {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
@@ -286,22 +286,22 @@ class b extends Error {
   }
 }
 class ve {
-  constructor(e, t, o, s, n, a) {
+  constructor(e, t, s, o, n, a) {
     i(this, "nodeIdGenerator", new X(
-      (e) => this.graphStore.getNode(e) !== void 0
+      (e) => this.graphStore.hasNode(e)
     ));
     i(this, "portIdGenerator", new X(
-      (e) => this.graphStore.getPort(e) !== void 0
+      (e) => this.graphStore.hasPort(e)
     ));
     i(this, "edgeIdGenerator", new X(
-      (e) => this.graphStore.getEdge(e) !== void 0
+      (e) => this.graphStore.hasEdge(e)
     ));
     i(this, "onAfterNodeAdded", (e) => {
       this.htmlView.attachNode(e);
     });
     i(this, "onAfterNodeUpdated", (e) => {
-      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
-        this.htmlView.renderEdge(o);
+      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((s) => {
+        this.htmlView.renderEdge(s);
       });
     });
     i(this, "onAfterNodePriorityUpdated", (e) => {
@@ -313,8 +313,8 @@ class ve {
       }), this.htmlView.detachNode(e);
     });
     i(this, "onAfterPortUpdated", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
-        this.htmlView.renderEdge(o);
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
+        this.htmlView.renderEdge(s);
       });
     });
     i(this, "onBeforePortUnmarked", (e) => {
@@ -346,7 +346,7 @@ class ve {
      * emits event just before destruction of canvas
      */
     i(this, "onBeforeDestroy");
-    this.graph = e, this.viewport = t, this.graphStore = o, this.viewportStore = s, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.graph = e, this.viewport = t, this.graphStore = s, this.viewportStore = o, this.htmlView = n, this.params = a, this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
@@ -359,9 +359,9 @@ class ve {
    */
   addNode(e) {
     const t = this.nodeIdGenerator.create(e.id);
-    if (this.graphStore.getNode(t) !== void 0)
+    if (this.graphStore.hasNode(t))
       throw new b("failed to add node with existing id");
-    if (this.graphStore.getElementNodeId(e.element) !== void 0)
+    if (this.graphStore.findNodeIdByElement(e.element) !== void 0)
       throw new b(
         "failed to add node with html element already in use by another node"
       );
@@ -373,12 +373,12 @@ class ve {
       centerFn: e.centerFn ?? this.params.nodes.centerFn,
       priority: e.priority ?? this.params.nodes.priorityFn()
     }), e.ports !== void 0)
-      for (const o of e.ports)
+      for (const s of e.ports)
         this.markPort({
-          id: o.id,
-          element: o.element,
+          id: s.id,
+          element: s.element,
           nodeId: t,
-          direction: o.direction
+          direction: s.direction
         });
     return this;
   }
@@ -386,7 +386,7 @@ class ve {
    * updates node parameters
    */
   updateNode(e, t) {
-    if (this.graphStore.getNode(e) === void 0)
+    if (!this.graphStore.hasNode(e))
       throw new b("failed to update nonexistent node");
     return this.graphStore.updateNode(e, t ?? {}), this;
   }
@@ -396,7 +396,7 @@ class ve {
    * all the edges adjacent to node get removed
    */
   removeNode(e) {
-    if (this.graphStore.getNode(e) === void 0)
+    if (!this.graphStore.hasNode(e))
       throw new b("failed to remove nonexistent node");
     return this.graphStore.removeNode(e), this;
   }
@@ -405,9 +405,9 @@ class ve {
    */
   markPort(e) {
     const t = this.portIdGenerator.create(e.id);
-    if (this.graphStore.getPort(t) !== void 0)
+    if (this.graphStore.hasPort(t))
       throw new b("failed to add port with existing id");
-    if (this.graphStore.getNode(e.nodeId) === void 0)
+    if (!this.graphStore.hasNode(e.nodeId))
       throw new b("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: t,
@@ -420,7 +420,7 @@ class ve {
    * updates port and edges attached to it
    */
   updatePort(e, t) {
-    if (this.graphStore.getPort(e) === void 0)
+    if (!this.graphStore.hasPort(e))
       throw new b("failed to update nonexistent port");
     return this.graphStore.updatePort(e, t ?? {}), this;
   }
@@ -429,7 +429,7 @@ class ve {
    * all the edges adjacent to the port get removed
    */
   unmarkPort(e) {
-    if (this.graphStore.getPort(e) === void 0)
+    if (!this.graphStore.hasPort(e))
       throw new b("failed to unmark nonexistent port");
     return this.graphStore.removePort(e), this;
   }
@@ -438,11 +438,11 @@ class ve {
    */
   addEdge(e) {
     const t = this.edgeIdGenerator.create(e.id);
-    if (this.graphStore.getEdge(t) !== void 0)
+    if (this.graphStore.hasEdge(t))
       throw new b("failed to add edge with existing id");
-    if (this.graphStore.getPort(e.from) === void 0)
+    if (!this.graphStore.hasPort(e.from))
       throw new b("failed to add edge from nonexistent port");
-    if (this.graphStore.getPort(e.to) === void 0)
+    if (!this.graphStore.hasPort(e.to))
       throw new b("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: t,
@@ -456,7 +456,7 @@ class ve {
    * updates specified edge
    */
   updateEdge(e, t) {
-    if (this.graphStore.getEdge(e) === void 0)
+    if (!this.graphStore.hasEdge(e))
       throw new b("failed to update nonexistent edge");
     return this.graphStore.updateEdge(e, t ?? {}), this;
   }
@@ -464,7 +464,7 @@ class ve {
    * removes specified edge
    */
   removeEdge(e) {
-    if (this.graphStore.getEdge(e) === void 0)
+    if (!this.graphStore.hasEdge(e))
       throw new b("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
@@ -507,31 +507,31 @@ class Ke {
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
   }
   addRecord(e, t) {
-    const o = this.singleToMultiMap.get(e);
-    o === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : o.add(t), this.multiToSingleMap.set(t, e);
+    const s = this.singleToMultiMap.get(e);
+    s === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : s.add(t), this.multiToSingleMap.set(t, e);
   }
   getMultiBySingle(e) {
     const t = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
     return Array.from(t.values());
   }
   removeByMulti(e) {
-    const t = this.multiToSingleMap.get(e), o = this.singleToMultiMap.get(t);
-    o.delete(e), o.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
+    const t = this.multiToSingleMap.get(e), s = this.singleToMultiMap.get(t);
+    s.delete(e), s.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
   }
   getByMulti(e) {
     return this.multiToSingleMap.get(e);
   }
   removeBySingle(e) {
-    this.singleToMultiMap.get(e).forEach((o) => {
-      this.multiToSingleMap.delete(o);
+    this.singleToMultiMap.get(e).forEach((s) => {
+      this.multiToSingleMap.delete(s);
     }), this.singleToMultiMap.delete(e);
   }
   clear() {
     this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
   }
   forEachSingle(e) {
-    this.singleToMultiMap.forEach((t, o) => {
-      e(o);
+    this.singleToMultiMap.forEach((t, s) => {
+      e(s);
     });
   }
   hasSingle(e) {
@@ -579,8 +579,18 @@ class Ae {
     i(this, "onBeforeClear");
     [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = E(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = E(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = E(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = E(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.beforeClearEmitter, this.onBeforeClear] = E();
   }
+  hasNode(e) {
+    return this.nodes.has(e);
+  }
+  /**
+   * TODO: v8
+   * throw error when node does not exist
+   */
+  getNode(e) {
+    return this.nodes.get(e);
+  }
   addNode(e) {
-    const t = /* @__PURE__ */ new Map(), o = {
+    const t = /* @__PURE__ */ new Map(), s = {
       element: e.element,
       payload: {
         x: e.x,
@@ -590,26 +600,33 @@ class Ae {
       },
       ports: t
     };
-    this.nodes.set(e.id, o), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(e.id, s), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
   }
-  getNode(e) {
-    return this.nodes.get(e);
-  }
-  getElementNodeId(e) {
+  findNodeIdByElement(e) {
     return this.nodesElementsMap.get(e);
   }
   updateNode(e, t) {
-    const o = this.nodes.get(e).payload;
-    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);
+    const s = this.nodes.get(e).payload;
+    s.x = t.x ?? s.x, s.y = t.y ?? s.y, s.centerFn = t.centerFn ?? s.centerFn, t.priority !== void 0 && (s.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
   removeNode(e) {
     this.beforeNodeRemovedEmitter.emit(e);
     const t = this.nodes.get(e);
     this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
   }
+  hasPort(e) {
+    return this.ports.has(e);
+  }
+  /**
+   * TODO: v8
+   * throw error when port does not exist
+   */
+  getPort(e) {
+    return this.ports.get(e);
+  }
   addPort(e) {
     this.ports.set(e.id, {
       element: e.element,
@@ -619,17 +636,14 @@ class Ae {
       nodeId: e.nodeId
     }), this.elementPorts.addRecord(e.element, e.id), this.portCycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.portIncomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.portOutcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
-  getPort(e) {
-    return this.ports.get(e);
-  }
   updatePort(e, t) {
-    const o = this.ports.get(e).payload;
-    o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
+    const s = this.ports.get(e).payload;
+    s.direction = t.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getElementPortIds(e) {
+  findPortIdsByElement(e) {
     return this.elementPorts.getMultiBySingle(e);
   }
   getNodePortIds(e) {
@@ -641,29 +655,36 @@ class Ae {
     const t = this.ports.get(e).nodeId;
     this.beforePortRemovedEmitter.emit(e), this.nodes.get(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
   }
+  hasEdge(e) {
+    return this.edges.has(e);
+  }
+  /**
+   * TODO: v8
+   * throw error when edge does not exist
+   */
+  getEdge(e) {
+    return this.edges.get(e);
+  }
   addEdge(e) {
     this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
   }
   updateEdge(e, t) {
     if (t.from !== void 0 || t.to !== void 0) {
-      const s = this.edges.get(e), n = s.payload;
+      const o = this.edges.get(e), n = o.payload;
       this.removeEdgeInternal(e), this.addEdgeInternal({
         id: e,
-        from: t.from ?? s.from,
-        to: t.to ?? s.to,
+        from: t.from ?? o.from,
+        to: t.to ?? o.to,
         shape: n.shape,
         priority: n.priority
       });
     }
-    const o = this.edges.get(e);
-    t.shape !== void 0 && (o.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (o.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
+    const s = this.edges.get(e);
+    t.shape !== void 0 && (s.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (s.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
   }
-  getEdge(e) {
-    return this.edges.get(e);
-  }
   removeEdge(e) {
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
@@ -687,51 +708,51 @@ class Ae {
     ];
   }
   getNodeIncomingEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
-    return t.forEach((s) => {
-      this.getPortIncomingEdgeIds(s).filter((n) => {
+    const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
+    return t.forEach((o) => {
+      this.getPortIncomingEdgeIds(o).filter((n) => {
         const a = this.getEdge(n);
         return this.getPort(a.from).nodeId !== e;
       }).forEach((n) => {
-        o.push(n);
+        s.push(n);
       });
-    }), o;
+    }), s;
   }
   getNodeOutgoingEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
-    return t.forEach((s) => {
-      this.getPortOutgoingEdgeIds(s).filter((n) => {
+    const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
+    return t.forEach((o) => {
+      this.getPortOutgoingEdgeIds(o).filter((n) => {
         const a = this.getEdge(n);
         return this.getPort(a.to).nodeId !== e;
       }).forEach((n) => {
-        o.push(n);
+        s.push(n);
       });
-    }), o;
+    }), s;
   }
   getNodeCycleEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
-    return t.forEach((s) => {
-      this.getPortCycleEdgeIds(s).forEach((n) => {
-        o.push(n);
-      }), this.getPortIncomingEdgeIds(s).filter((n) => {
+    const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
+    return t.forEach((o) => {
+      this.getPortCycleEdgeIds(o).forEach((n) => {
+        s.push(n);
+      }), this.getPortIncomingEdgeIds(o).filter((n) => {
         const a = this.getEdge(n);
         return this.getPort(a.to).nodeId === e;
       }).forEach((n) => {
-        o.push(n);
+        s.push(n);
       });
-    }), o;
+    }), s;
   }
   getNodeAdjacentEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys()), o = [];
-    return t.forEach((s) => {
-      this.getPortIncomingEdgeIds(s).forEach((n) => {
-        o.push(n);
-      }), this.getPortOutgoingEdgeIds(s).forEach((n) => {
-        o.push(n);
-      }), this.getPortCycleEdgeIds(s).forEach((n) => {
-        o.push(n);
+    const t = Array.from(this.nodes.get(e).ports.keys()), s = [];
+    return t.forEach((o) => {
+      this.getPortIncomingEdgeIds(o).forEach((n) => {
+        s.push(n);
+      }), this.getPortOutgoingEdgeIds(o).forEach((n) => {
+        s.push(n);
+      }), this.getPortCycleEdgeIds(o).forEach((n) => {
+        s.push(n);
       });
-    }), o;
+    }), s;
   }
   addEdgeInternal(e) {
     this.edges.set(e.id, {
@@ -744,8 +765,8 @@ class Ae {
     }), e.from !== e.to ? (this.portOutcomingEdges.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 t = this.edges.get(e), o = t.from, s = t.to;
-    this.portCycleEdges.get(o).delete(e), this.portCycleEdges.get(s).delete(e), this.portIncomingEdges.get(o).delete(e), this.portIncomingEdges.get(s).delete(e), this.portOutcomingEdges.get(o).delete(e), this.portOutcomingEdges.get(s).delete(e), this.edges.delete(e);
+    const t = this.edges.get(e), s = t.from, o = t.to;
+    this.portCycleEdges.get(s).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(s).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutcomingEdges.get(s).delete(e), this.portOutcomingEdges.get(o).delete(e), this.edges.delete(e);
   }
 }
 const de = (r) => ({
@@ -825,9 +846,9 @@ class q {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
     this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
-      t.forEach((o) => {
-        const s = o.target;
-        this.handleNodeResize(s);
+      t.forEach((s) => {
+        const o = s.target;
+        this.handleNodeResize(o);
       });
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
@@ -840,9 +861,9 @@ class q {
   }
 }
 const Ze = (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;
-}, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, o) => Ze(e, t, o) && Je(r, t, o), $ = (r, e) => {
+  const { x: s, y: o, width: n, height: a } = r.getBoundingClientRect();
+  return e >= s && e <= s + n && t >= o && t <= o + a;
+}, Je = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => Ze(e, t, s) && Je(r, t, s), $ = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, U = (r) => {
   const e = document.createElement("div");
@@ -862,13 +883,13 @@ const Ze = (r, e, t) => {
 }, _e = (r, e) => {
   let t = e;
   for (; t !== null; ) {
-    const o = r.getElementPortIds(t)[0] ?? null;
-    if (o !== null)
+    const s = r.findPortIdsByElement(t)[0] ?? null;
+    if (s !== null)
       return {
         status: "portFound",
-        portId: o
+        portId: s
       };
-    if (r.getElementNodeId(t) !== null)
+    if (r.findNodeIdByElement(t) !== null)
       return {
         status: "nodeEncountered"
       };
@@ -880,22 +901,22 @@ const Ze = (r, e, t) => {
 };
 function* Ee(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
-  for (const o of t) {
-    if (o.shadowRoot !== null) {
-      const s = Ee(o.shadowRoot, e);
-      for (const n of s)
+  for (const s of t) {
+    if (s.shadowRoot !== null) {
+      const o = Ee(s.shadowRoot, e);
+      for (const n of o)
         yield n;
     }
-    yield o;
+    yield s;
   }
 }
 const xe = (r, e) => {
   const t = Ee(document, e);
-  for (const o of t) {
-    const s = _e(r, o);
-    if (s.status === "portFound")
-      return s.portId;
-    if (s.status === "nodeEncountered")
+  for (const s of t) {
+    const o = _e(r, s);
+    if (o.status === "portFound")
+      return o.portId;
+    if (o.status === "nodeEncountered")
       return null;
   }
   return null;
@@ -914,21 +935,21 @@ const Se = (r, e) => ({
   const t = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
-  }, o = {
+  }, s = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, s = Math.min(t.x, o.x), n = Math.min(t.y, o.y), a = Math.abs(o.x - t.x), h = Math.abs(o.y - t.y), d = t.x <= o.x ? 1 : -1, c = t.y <= o.y ? 1 : -1;
+  }, o = Math.min(t.x, s.x), n = Math.min(t.y, s.y), a = Math.abs(s.x - t.x), h = Math.abs(s.y - t.y), d = t.x <= s.x ? 1 : -1, c = t.y <= s.y ? 1 : -1;
   return {
-    x: s,
+    x: o,
     y: n,
     width: a,
     height: h,
     flipX: d,
     flipY: c
   };
-}, W = (r, e, t, o) => ({
-  x: e * r.x + (1 - e) / 2 * o.x,
-  y: t * r.y + (1 - t) / 2 * o.y
+}, W = (r, e, t, s) => ({
+  x: e * r.x + (1 - e) / 2 * s.x,
+  y: t * r.y + (1 - t) / 2 * s.y
 });
 class et {
   constructor(e) {
@@ -937,21 +958,21 @@ class et {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const o = m(
+    const s = m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ), s = m(
+    ), o = m(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), n = {
-      x: o.x + this.params.sourceDirection.x * this.params.curvature,
-      y: o.y + this.params.sourceDirection.y * this.params.curvature
+      x: s.x + this.params.sourceDirection.x * this.params.curvature,
+      y: s.y + this.params.sourceDirection.y * this.params.curvature
     }, a = {
-      x: s.x - this.params.targetDirection.x * this.params.curvature,
-      y: s.y - this.params.targetDirection.y * this.params.curvature
-    }, h = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${s.x} ${s.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${o.x} ${o.y} `, c = this.params.hasTargetArrow ? "" : ` M ${s.x} ${s.y} L ${this.params.to.x} ${this.params.to.y}`;
+      x: o.x - this.params.targetDirection.x * this.params.curvature,
+      y: o.y - this.params.targetDirection.y * this.params.curvature
+    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${o.x} ${o.y}`, d = this.params.hasSourceArrow ? "" : `M ${p.x} ${p.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${this.params.to.x} ${this.params.to.y}`;
     this.path = `${d}${h}${c}`;
   }
 }
@@ -964,22 +985,22 @@ class tt {
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, o = this.params.hasTargetArrow ? m(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, s = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
-      { x: s, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, h = n * this.params.flipX, d = a * this.params.flipY, c = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
     ), g = {
       x: c.x + h,
       y: c.y + d
     }, l = m(
-      { x: this.params.to.x - s, y: this.params.to.y },
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), u = {
@@ -1006,7 +1027,7 @@ class tt {
       `L ${c.x} ${c.y}`,
       `C ${y.x} ${y.y} ${x.x} ${x.y} ${w.x} ${w.y}`,
       `C ${S.x} ${S.y} ${A.x} ${A.y} ${l.x} ${l.y}`,
-      `L ${o.x} ${o.y}`
+      `L ${s.x} ${s.y}`
     ].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
   }
 }
@@ -1024,21 +1045,21 @@ const K = Object.freeze({
 }, Te = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, De = (r, e) => {
+}, Ne = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
-}, N = (r, e) => {
+}, D = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
-    const o = r.length - 1;
-    let s = 0, n = 0, a = 0;
+    const s = r.length - 1;
+    let o = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, g = 0, l = 0;
-      const u = d > 0, w = d < o, y = u && w;
-      if (u && (c = -s, g = -n, l = a), w) {
+      const u = d > 0, w = d < s, y = u && w;
+      if (u && (c = -o, g = -n, l = a), w) {
         const V = r[d + 1];
-        s = V.x - h.x, n = V.y - h.y, a = Math.sqrt(s * s + n * n);
+        o = V.x - h.x, n = V.y - h.y, a = Math.sqrt(o * o + n * n);
       }
-      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + s * x, y: h.y + n * x } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, R = y ? { x: h.x + c * P, y: h.y + g * P } : h;
+      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, S = y ? { x: h.x + o * x, y: h.y + n * x } : h, P = l !== 0 ? Math.min((y ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, R = y ? { x: h.x + c * P, y: h.y + g * P } : h;
       d > 0 && t.push(`L ${R.x} ${R.y}`), y && t.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${S.x} ${S.y}`
       );
@@ -1053,11 +1074,11 @@ class rt {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const o = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1079,13 +1100,13 @@ class rt {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
     }, y = { x: w.x, y: g };
-    this.path = N(
-      [o, h, l, u, y, w, d, s],
+    this.path = D(
+      [s, h, l, u, y, w, d, o],
       this.params.roundness
     );
   }
 }
-class ot {
+class st {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1094,40 +1115,40 @@ class ot {
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, o = this.params.hasTargetArrow ? m(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: s, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
     ), a = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = a * this.params.flipX, c = h * this.params.flipY, g = { x: n.x + d, y: n.y + c }, l = m(
-      { x: this.params.to.x - s, y: this.params.to.y },
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), u = { x: l.x + d, y: l.y + c }, w = { x: (g.x + u.x) / 2, y: (g.y + u.y) / 2 };
-    this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = N(
-      [t, n, g, u, l, o],
+    this.midpoint = W(w, e.flipX, e.flipY, e.to), this.path = D(
+      [t, n, g, u, l, s],
       this.params.roundness
     );
   }
 }
-class st {
+class ot {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const o = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1143,7 +1164,7 @@ class st {
       this.params.targetDirection,
       this.params.to
     );
-    this.path = N([o, a, h, s], this.params.roundness);
+    this.path = D([s, a, h, o], this.params.roundness);
   }
 }
 class it {
@@ -1153,11 +1174,11 @@ class it {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const o = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, s = this.params.hasTargetArrow ? m(
+    ) : p, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1179,8 +1200,8 @@ class it {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
     }, y = { x: g, y: w.y };
-    this.path = N(
-      [o, h, l, u, y, w, d, s],
+    this.path = D(
+      [s, h, l, u, y, w, d, o],
       this.params.roundness
     );
   }
@@ -1190,19 +1211,19 @@ class Q {
     i(this, "path");
     i(this, "midpoint");
     this.params = e;
-    const t = this.params.arrowOffset, o = this.params.side, s = this.params.arrowLength + t, n = s + 2 * o, h = [
+    const t = this.params.arrowOffset, s = this.params.side, o = this.params.arrowLength + t, n = o + 2 * s, h = [
       { x: this.params.arrowLength, y: p.y },
-      { x: s, y: p.y },
-      { x: s, y: this.params.side },
+      { x: o, y: p.y },
+      { x: o, y: this.params.side },
       { x: n, y: this.params.side },
       { x: n, y: -this.params.side },
-      { x: s, y: -this.params.side },
-      { x: s, y: p.y },
+      { x: o, y: -this.params.side },
+      { x: o, y: p.y },
       { x: this.params.arrowLength, y: p.y }
     ].map(
       (c) => m(c, this.params.sourceDirection, p)
     ), d = `M ${p.x} ${p.y} L ${h[0].x} ${h[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${N(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${D(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
 class nt {
@@ -1210,7 +1231,7 @@ class nt {
     i(this, "path");
     i(this, "midpoint");
     this.params = e;
-    const t = this.params.smallRadius, o = this.params.radius, s = t + o, n = t * o / s, a = Math.sqrt(s * s - t * t), h = a * t / s, d = a + o + this.params.arrowLength, c = this.params.arrowLength + h, l = [
+    const t = this.params.smallRadius, s = this.params.radius, o = t + s, n = t * s / o, a = Math.sqrt(o * o - t * t), h = a * t / o, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, l = [
       { x: this.params.arrowLength, y: p.y },
       { x: c, y: n },
       { x: c, y: -n },
@@ -1220,7 +1241,7 @@ class nt {
     ), u = [
       `M ${l[0].x} ${l[0].y}`,
       `A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
-      `A ${o} ${o} 0 1 0 ${l[2].x} ${l[2].y}`,
+      `A ${s} ${s} 0 1 0 ${l[2].x} ${l[2].y}`,
       `A ${t} ${t} 0 0 1 ${l[0].x} ${l[0].y}`
     ].join(" "), w = `M 0 0 L ${l[0].x} ${l[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : w}${u}`, this.midpoint = l[3];
@@ -1241,7 +1262,7 @@ class at {
       this.path = "";
       return;
     }
-    const s = this.createDirectLinePoint({
+    const o = this.createDirectLinePoint({
       offset: this.params.sourceOffset,
       hasArrow: this.params.hasSourceArrow,
       flip: 1,
@@ -1252,13 +1273,13 @@ class at {
       flip: -1,
       shift: this.params.to
     });
-    this.path = `M ${s.x} ${s.y} L ${n.x} ${n.y}`;
+    this.path = `M ${o.x} ${o.y} L ${n.x} ${n.y}`;
   }
   createDirectLinePoint(e) {
-    const t = e.hasArrow ? this.params.arrowLength : 0, o = e.offset + t, s = e.flip * o / this.diagonalDistance;
+    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, o = e.flip * s / this.diagonalDistance;
     return {
-      x: this.params.to.x * s + e.shift.x,
-      y: this.params.to.y * s + e.shift.y
+      x: this.params.to.x * o + e.shift.x,
+      y: this.params.to.y * o + e.shift.y
     };
   }
 }
@@ -1271,33 +1292,33 @@ class ht {
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, o = this.params.hasTargetArrow ? m(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: s, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
     ), a = m(
-      { x: this.params.to.x - s, y: this.params.to.y },
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.y / 2, c = d + Math.abs(this.params.detourDistance), g = d + c * this.params.flipY * h, l = {
       x: (n.x + a.x) / 2,
       y: g
     };
-    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = N(
+    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = D(
       [
         t,
         n,
         { x: n.x, y: g },
         { x: a.x, y: g },
         a,
-        o
+        s
       ],
       this.params.roundness
     );
@@ -1312,33 +1333,33 @@ class dt {
       { x: this.params.arrowLength, y: p.y },
       this.params.sourceDirection,
       p
-    ) : p, o = this.params.hasTargetArrow ? m(
+    ) : p, s = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, s = this.params.arrowLength + this.params.arrowOffset, n = m(
-      { x: s, y: p.y },
+    ) : this.params.to, o = this.params.arrowLength + this.params.arrowOffset, n = m(
+      { x: o, y: p.y },
       this.params.sourceDirection,
       p
     ), a = m(
-      { x: this.params.to.x - s, y: this.params.to.y },
+      { x: this.params.to.x - o, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), h = this.params.detourDistance > 0 ? 1 : -1, d = this.params.to.x / 2, c = d + Math.abs(this.params.detourDistance), g = d + c * this.params.flipX * h, l = {
       x: g,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = N(
+    this.midpoint = W(l, e.flipX, e.flipY, e.to), this.path = D(
       [
         t,
         n,
         { x: g, y: n.y },
         { x: g, y: a.y },
         a,
-        o
+        s
       ],
       this.params.roundness
     );
@@ -1380,11 +1401,11 @@ class k {
     this.params = e, [this.afterRenderEmitter, this.onAfterRender] = E(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Ce(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, flipX: a, flipY: h } = be(
+    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
       e.from,
       e.to
     );
-    De(this.svg, { x: t, y: o, width: s, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    Ne(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
     const d = ge(
       e.from.direction,
       a,
@@ -1394,7 +1415,7 @@ class k {
       a,
       h
     ), g = {
-      x: s,
+      x: o,
       y: n
     };
     let l = { x: -c.x, y: -c.y }, u;
@@ -1426,7 +1447,7 @@ class k {
   }
 }
 const ct = (r) => (e) => {
-  const o = [
+  const s = [
     p,
     { x: e.arrowLength, y: r.radius },
     { x: e.arrowLength, y: -r.radius }
@@ -1435,18 +1456,18 @@ const ct = (r) => (e) => {
   ).map((h) => ({
     x: h.x + e.shift.x,
     y: h.y + e.shift.y
-  })), s = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
-  return `${s} ${n} ${a} Z`;
+  })), o = `M ${s[0].x} ${s[0].y}`, n = `L ${s[1].x} ${s[1].y}`, a = `L ${s[2].x} ${s[2].y}`;
+  return `${o} ${n} ${a} Z`;
 }, lt = (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 = [p, { x: a, y: -h }, { x: a, y: h }].map(
+  const t = r.radius, s = e.arrowLength, o = (s * s + 2 * s * t) / (2 * t), n = o + t, a = s + t - t * (s + t) / n, h = t * o / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
     (y) => m(y, e.direction, p)
   ).map((y) => ({
     x: y.x + e.shift.x,
     y: y.y + e.shift.y
-  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${s} ${s} 0 0 0 ${c[1].x} ${c[1].y}`, u = `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}`;
+  })), g = `M ${c[0].x} ${c[0].y}`, l = `A ${o} ${o} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${o} ${o} 0 0 0 ${c[0].x} ${c[0].y}`;
   return `${g} ${l} ${u} ${w}`;
 }, gt = (r) => (e) => {
-  const t = r.smallRadius, o = r.radius, s = m(
+  const t = r.smallRadius, s = r.radius, o = m(
     {
       x: e.arrowLength,
       y: 0
@@ -1459,12 +1480,12 @@ const ct = (r) => (e) => {
       x: e.arrowLength + r.smallRadius,
       y: 0
     }
-  ), a = [p, { x: s.x, y: -s.y }, s].map(
+  ), a = [p, { x: o.x, y: -o.y }, o].map(
     (l) => m(l, e.direction, p)
   ).map((l) => ({
     x: l.x + e.shift.x,
     y: l.y + e.shift.y
-  })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
+  })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${s} ${s} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, g = `A ${s} ${s} 0 0 1 ${a[0].x} ${a[0].y}`;
   return `${h} ${d} ${c} ${g}`;
 }, F = (r) => {
   if (typeof r == "function")
@@ -1511,11 +1532,11 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s, n) => new tt({
-      to: o,
+    i(this, "createDetourPath", (e, t, s, o, n) => new tt({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: s,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
@@ -1524,8 +1545,8 @@ class ut {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o) => new et({
-      to: o,
+    i(this, "createLinePath", (e, t, s) => new et({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
       arrowLength: this.arrowLength,
@@ -1574,11 +1595,11 @@ class pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s, n) => new ht({
-      to: o,
+    i(this, "createDetourPath", (e, t, s, o, n) => new ht({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: s,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1587,11 +1608,11 @@ class pt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s) => new rt({
-      to: o,
+    i(this, "createLinePath", (e, t, s, o) => new rt({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: s,
+      flipX: o,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -1646,11 +1667,11 @@ class wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s, n) => new ot({
-      to: o,
+    i(this, "createDetourPath", (e, t, s, o, n) => new st({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: s,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1660,8 +1681,8 @@ class wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o) => new st({
-      to: o,
+    i(this, "createLinePath", (e, t, s) => new ot({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
       arrowLength: this.arrowLength,
@@ -1717,11 +1738,11 @@ class ft {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createDetourPath", (e, t, o, s, n) => new dt({
-      to: o,
+    i(this, "createDetourPath", (e, t, s, o, n) => new dt({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
-      flipX: s,
+      flipX: o,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1730,8 +1751,8 @@ class ft {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    i(this, "createLinePath", (e, t, o, s, n) => new it({
-      to: o,
+    i(this, "createLinePath", (e, t, s, o, n) => new it({
+      to: s,
       sourceDirection: e,
       targetDirection: t,
       flipY: n,
@@ -1763,7 +1784,7 @@ class ft {
     this.pathShape.render(e);
   }
 }
-class Ne {
+class De {
   constructor(e) {
     i(this, "svg");
     i(this, "group", Te());
@@ -1781,12 +1802,12 @@ class Ne {
     [this.afterRenderEmitter, this.onAfterRender] = E(), this.color = (e == null ? void 0 : e.color) ?? f.color, this.width = (e == null ? void 0 : e.width) ?? f.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? f.arrowLength, this.arrowRenderer = F((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? f.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? f.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = Ce(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, flipX: a, flipY: h } = be(
+    const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
       e.from,
       e.to
     );
-    De(this.svg, { x: t, y: o, width: s, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: s, y: n }, c = new at({
+    Ne(this.svg, { x: t, y: s, width: o, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: o, y: n }, c = new at({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1869,16 +1890,16 @@ class Me {
         "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) ?? f.interactiveWidth;
-    this.interactiveLine = mt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(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);
+    const s = (t == null ? void 0 : t.distance) ?? f.interactiveWidth;
+    this.interactiveLine = mt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
+      this.interactiveLine.setAttribute("d", o.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", o.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", o.targetArrowPath);
     });
   }
   render(e) {
     this.baseEdge.render(e);
   }
 }
-class or {
+class sr {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -1886,8 +1907,8 @@ class or {
     i(this, "targetArrow");
     i(this, "onAfterRender");
     i(this, "svg");
-    this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((o) => {
-      const s = o.edgePath.midpoint, n = `translate(${s.x}px, ${s.y}px)`;
+    this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
+      const o = s.edgePath.midpoint, n = `translate(${o.x}px, ${o.y}px)`;
       this.midpointElement.style.setProperty("transform", n);
     });
   }
@@ -1912,25 +1933,38 @@ class Le {
     i(this, "onBeforeClear");
     this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
   }
+  hasNode(e) {
+    return this.graphStore.hasNode(e);
+  }
   getNode(e) {
     const t = this.graphStore.getNode(e);
     if (t === void 0)
       return null;
-    const o = t.payload;
+    const s = t.payload;
     return {
       element: t.element,
-      x: o.x,
-      y: o.y,
-      centerFn: o.centerFn,
-      priority: o.priority
+      x: s.x,
+      y: s.y,
+      centerFn: s.centerFn,
+      priority: s.priority
     };
   }
+  findNodeIdByElement(e) {
+    return this.graphStore.findNodeIdByElement(e) ?? null;
+  }
+  /**
+   * @deprecated
+   * use findNodeIdByElement instead
+   */
   getElementNodeId(e) {
-    return this.graphStore.getElementNodeId(e) ?? null;
+    return this.graphStore.findNodeIdByElement(e) ?? null;
   }
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
+  hasPort(e) {
+    return this.graphStore.hasPort(e);
+  }
   getPort(e) {
     const t = this.graphStore.getPort(e);
     return t === void 0 ? null : {
@@ -1945,47 +1979,57 @@ class Le {
   getNodePortIds(e) {
     return this.graphStore.getNodePortIds(e) ?? null;
   }
+  /**
+   * @deprecated
+   * use findPortIdsByElement instead
+   */
   getElementPortIds(e) {
-    return [...this.graphStore.getElementPortIds(e)];
+    return this.graphStore.findPortIdsByElement(e);
+  }
+  findPortIdsByElement(e) {
+    return this.graphStore.findPortIdsByElement(e);
   }
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
+  hasEdge(e) {
+    return this.graphStore.hasEdge(e);
+  }
   getEdge(e) {
     const t = this.graphStore.getEdge(e);
     if (t === void 0)
       return null;
-    const o = t.payload;
+    const s = t.payload;
     return {
       from: t.from,
       to: t.to,
-      priority: o.priority,
-      shape: o.shape
+      priority: s.priority,
+      shape: s.shape
     };
   }
   getPortIncomingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
+    return this.graphStore.hasPort(e) ? this.graphStore.getPortIncomingEdgeIds(e) : null;
   }
   getPortOutgoingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(e);
+    return this.graphStore.hasPort(e) ? this.graphStore.getPortOutgoingEdgeIds(e) : null;
   }
   getPortCycleEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
+    return this.graphStore.hasPort(e) ? this.graphStore.getPortCycleEdgeIds(e) : null;
   }
   getPortAdjacentEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
+    return this.graphStore.hasPort(e) ? this.graphStore.getPortAdjacentEdgeIds(e) : null;
   }
   getNodeIncomingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
+    return this.graphStore.hasNode(e) ? this.graphStore.getNodeIncomingEdgeIds(e) : null;
   }
   getNodeOutgoingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(e);
+    return this.graphStore.hasNode(e) ? this.graphStore.getNodeOutgoingEdgeIds(e) : null;
   }
   getNodeCycleEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
+    return this.graphStore.hasNode(e) ? this.graphStore.getNodeCycleEdgeIds(e) : null;
   }
   getNodeAdjacentEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
+    return this.graphStore.hasNode(e) ? this.graphStore.getNodeAdjacentEdgeIds(e) : null;
   }
 }
 class Re {
@@ -2012,13 +2056,13 @@ class Re {
   }
 }
 const Ve = (r, e) => {
-  const t = new Ae(), o = new Le(t), s = new Re(e), n = new me(t, e, r), a = {
+  const t = new Ae(), s = new Le(t), o = new Re(e), n = new me(t, e, r), a = {
     nodes: {
       centerFn: Se,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Ne(),
+      shapeFactory: () => new De(),
       priorityFn: () => 0
     },
     ports: {
@@ -2026,8 +2070,8 @@ const Ve = (r, e) => {
     }
   };
   return new ve(
-    o,
     s,
+    o,
     t,
     e,
     n,
@@ -2035,7 +2079,7 @@ const Ve = (r, e) => {
   );
 };
 class z {
-  constructor(e, t, o, s) {
+  constructor(e, t, s, o) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
       this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
@@ -2047,8 +2091,8 @@ class z {
     i(this, "onPortMouseDown", (e) => {
       if (!this.params.mouseDownEventVerifier(e))
         return;
-      const t = e.currentTarget, o = this.canvas.graph.getElementPortIds(t)[0];
-      this.params.onPortPointerDown(o, {
+      const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
+      this.params.onPortPointerDown(s, {
         x: e.clientX,
         y: e.clientY
       }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
@@ -2075,8 +2119,8 @@ class z {
     i(this, "onPortTouchStart", (e) => {
       if (e.touches.length !== 1)
         return;
-      const t = e.touches[0], o = e.currentTarget, s = this.canvas.graph.getElementPortIds(o)[0];
-      this.params.onPortPointerDown(s, {
+      const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.getElementPortIds(s)[0];
+      this.params.onPortPointerDown(o, {
         x: t.clientX,
         y: t.clientY
       }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
@@ -2113,10 +2157,10 @@ class z {
     i(this, "onBeforeDestroy", () => {
       this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.canvas = e, this.element = t, this.window = o, this.params = s, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = t, this.window = s, this.params = o, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, o, s) {
-    new z(e, t, o, s);
+  static configure(e, t, s, o) {
+    new z(e, t, s, o);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2142,7 +2186,7 @@ class z {
   }
 }
 class Z {
-  constructor(e, t, o, s) {
+  constructor(e, t, s, o) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
     i(this, "graph");
@@ -2174,19 +2218,19 @@ class Z {
     i(this, "onMouseDown", (e) => {
       if (!this.params.mouseDownEventVerifier(e))
         return;
-      const t = e.currentTarget, o = this.graph.getElementNodeId(t), s = this.graph.getNode(o);
-      if (!this.params.nodeDragVerifier(o))
+      const t = e.currentTarget, s = this.graph.findNodeIdByElement(t), o = this.graph.getNode(s);
+      if (!this.params.nodeDragVerifier(s))
         return;
-      this.params.onNodeDragStarted(o), e.stopPropagation();
+      this.params.onNodeDragStarted(s), e.stopPropagation();
       const a = this.calculateContentPoint({
         x: e.clientX,
         y: e.clientY
       });
       this.grabbedNode = {
-        nodeId: o,
-        dx: a.x - s.x,
-        dy: a.y - s.y
-      }, $(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        nodeId: s,
+        dx: a.x - o.x,
+        dy: a.y - o.y
+      }, $(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2196,9 +2240,9 @@ class Z {
       if (e.touches.length !== 1)
         return;
       e.stopPropagation();
-      const t = e.touches[0], o = e.currentTarget, s = this.canvas.graph.getElementNodeId(o), n = this.graph.getNode(s);
+      const t = e.touches[0], s = e.currentTarget, o = this.canvas.graph.findNodeIdByElement(s), n = this.graph.getNode(o);
       if (!this.params.nodeDragVerifier({
-        nodeId: s,
+        nodeId: o,
         element: n.element,
         x: n.x,
         y: n.y
@@ -2209,10 +2253,10 @@ class Z {
         y: t.clientY
       });
       this.grabbedNode = {
-        nodeId: s,
+        nodeId: o,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      }, this.moveNodeOnTop(o), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2259,17 +2303,17 @@ class Z {
     i(this, "onWindowTouchFinish", () => {
       this.cancelTouchDrag();
     });
-    this.canvas = e, this.element = t, this.window = o, this.params = s, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = t, this.window = s, this.params = o, 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.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, o, s) {
-    new Z(e, t, o, s);
+  static configure(e, t, s, o) {
+    new Z(e, t, s, o);
   }
   moveNode(e, t) {
     if (this.graph.getNode(e.nodeId) === null)
       return;
-    const s = this.calculateContentPoint(t), n = {
-      x: s.x - e.dx,
-      y: s.y - e.dy
+    const o = this.calculateContentPoint(t), n = {
+      x: o.x - e.dx,
+      y: o.y - e.dy
     }, a = this.adjustNodeCoords(n);
     this.canvas.updateNode(e.nodeId, {
       x: a.x,
@@ -2280,8 +2324,8 @@ class Z {
     if (this.params.moveOnTop) {
       if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
         const t = this.maxNodePriority;
-        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((s) => {
-          this.canvas.updateEdge(s, { priority: t });
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((o) => {
+          this.canvas.updateEdge(o, { priority: t });
         });
       }
       this.canvas.updateNode(e, { priority: this.maxNodePriority });
@@ -2322,10 +2366,10 @@ class Z {
   adjustNodeCoords(e) {
     const t = this.params.gridSize;
     if (t !== null) {
-      const o = t / 2;
+      const s = t / 2;
       return {
-        x: Math.floor((e.x + o) / t) * t,
-        y: Math.floor((e.y + o) / t) * t
+        x: Math.floor((e.x + s) / t) * t,
+        y: Math.floor((e.y + s) / t) * t
       };
     }
     return e;
@@ -2335,31 +2379,31 @@ const At = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), Et = (r, e, t, o) => ({
+}), Et = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
-  y: r.scale * (1 - e) * o + r.y
+  y: r.scale * (1 - e) * s + r.y
 }), I = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
-  const o = e.reduce(
+  const s = e.reduce(
     (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), s = [o[0] / t, o[1] / t], a = e.map((h) => [h[0] - s[0], h[1] - s[1]]).reduce(
+  ), o = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - o[0], h[1] - o[1]]).reduce(
     (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
-    x: s[0],
-    y: s[1],
+    x: o[0],
+    y: o[1],
     scale: a / t,
     touchesCnt: t,
     touches: e
   };
 };
 class H {
-  constructor(e, t, o, s) {
+  constructor(e, t, s, o) {
     i(this, "viewport");
     i(this, "prevTouches", null);
     i(this, "wheelFinishTimer", null);
@@ -2385,8 +2429,8 @@ class H {
         this.stopMouseDrag();
         return;
       }
-      const o = -e.movementX, s = -e.movementY;
-      this.moveViewport(o, s);
+      const s = -e.movementX, o = -e.movementY;
+      this.moveViewport(s, o);
     });
     i(this, "onWindowMouseUp", (e) => {
       this.params.mouseUpEventVerifier(e) && this.stopMouseDrag();
@@ -2394,8 +2438,8 @@ class H {
     i(this, "onWheelScroll", (e) => {
       if (!this.params.mouseWheelEventVerifier(e))
         return;
-      const { left: t, top: o } = this.element.getBoundingClientRect(), s = e.clientX - t, n = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
-      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, s, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      const { left: t, top: s } = this.element.getBoundingClientRect(), o = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, o, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
@@ -2415,7 +2459,7 @@ class H {
     i(this, "onWindowTouchMove", (e) => {
       const t = I(e);
       if (!t.touches.every(
-        (s) => L(this.window, this.element, s[0], s[1])
+        (o) => L(this.window, this.element, o[0], o[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2424,7 +2468,7 @@ class H {
         -(t.x - this.prevTouches.x),
         -(t.y - this.prevTouches.y)
       ), t.touchesCnt === 2) {
-        const { left: s, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - s, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+        const { left: o, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - o, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
         this.scaleViewport(c, a, h);
       }
       this.prevTouches = t;
@@ -2435,7 +2479,7 @@ class H {
     i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
-    this.canvas = e, this.element = t, this.window = o, this.params = s, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = t, this.window = s, this.params = o, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
     }), this.viewport = e.viewport, this.handleResize(), this.viewport.onAfterResize.subscribe(() => {
       this.handleResize();
@@ -2447,21 +2491,21 @@ class H {
       passive: !0
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, o, s) {
-    new H(e, t, o, s);
+  static configure(e, t, s, o) {
+    new H(e, t, s, o);
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = At(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
-      prevTransform: o,
-      nextTransform: s,
+    const s = this.viewport.getViewportMatrix(), o = At(s, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+      prevTransform: s,
+      nextTransform: o,
       canvasWidth: n,
       canvasHeight: a
     });
     this.performTransform(h);
   }
-  scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), n = Et(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
-      prevTransform: s,
+  scaleViewport(e, t, s) {
+    const o = this.canvas.viewport.getViewportMatrix(), n = Et(o, e, t, s), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+      prevTransform: o,
       nextTransform: n,
       canvasWidth: a,
       canvasHeight: h
@@ -2490,17 +2534,17 @@ class H {
     this.transformInProgress = !1, this.params.onTransformFinished();
   }
   handleResize() {
-    const e = this.viewport.getViewportMatrix(), { width: t, height: o } = this.viewport.getDimensions(), s = this.params.transformPreprocessor({
+    const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.viewport.getDimensions(), o = this.params.transformPreprocessor({
       prevTransform: e,
       nextTransform: e,
       canvasWidth: t,
-      canvasHeight: o
+      canvasHeight: s
     });
-    this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
+    this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(o), this.params.onResizeTransformFinished();
   }
 }
 class J {
-  constructor(e, t, o, s, n, a) {
+  constructor(e, t, s, o, n, a) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
     i(this, "viewport");
@@ -2523,27 +2567,27 @@ class J {
       this.userTransformInProgress || this.loadAreaAroundViewport();
     });
     i(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
+    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
       this.scheduleLoadAreaAroundViewport();
     });
     const h = {
-      ...s,
+      ...o,
       onResizeTransformStarted: () => {
-        this.userTransformInProgress = !0, s.onResizeTransformStarted();
+        this.userTransformInProgress = !0, o.onResizeTransformStarted();
       },
       onResizeTransformFinished: () => {
-        this.userTransformInProgress = !1, s.onResizeTransformFinished();
+        this.userTransformInProgress = !1, o.onResizeTransformFinished();
       },
       onBeforeTransformChange: () => {
-        this.userTransformInProgress = !0, s.onBeforeTransformChange();
+        this.userTransformInProgress = !0, o.onBeforeTransformChange();
       },
       onTransformChange: () => {
         this.userTransformInProgress = !1;
         const d = this.currentScale;
-        this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), s.onTransformChange();
+        this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), o.onTransformChange();
       },
       onTransformFinished: () => {
-        this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
+        this.scheduleLoadAreaAroundViewport(), o.onTransformFinished();
       }
     };
     H.configure(
@@ -2553,12 +2597,12 @@ class J {
       h
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(e, t, o, s, n, a) {
+  static configure(e, t, s, o, n, a) {
     new J(
       e,
       t,
-      o,
       s,
+      o,
       n,
       a
     );
@@ -2570,12 +2614,12 @@ class J {
   }
   scheduleEnsureViewportAreaLoaded() {
     setTimeout(() => {
-      const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - this.nodeHorizontal, c = n - this.nodeVertical, g = s + a + this.nodeHorizontal, l = n + h + this.nodeVertical;
+      const { width: e, height: t } = this.viewport.getDimensions(), { scale: s, x: o, y: n } = this.viewport.getViewportMatrix(), a = e * s, h = t * s, d = o - this.nodeHorizontal, c = n - this.nodeVertical, g = o + a + this.nodeHorizontal, l = n + h + this.nodeVertical;
       this.loadedArea.xFrom < d && this.loadedArea.xTo > g && this.loadedArea.yFrom < c && this.loadedArea.yTo > l || this.loadAreaAroundViewport();
     });
   }
   loadAreaAroundViewport() {
-    const { width: e, height: t } = this.viewport.getDimensions(), { scale: o, x: s, y: n } = this.viewport.getViewportMatrix(), a = e * o, h = t * o, d = s - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, l = 3 * h + 2 * this.nodeVertical;
+    const { width: e, height: t } = this.viewport.getDimensions(), { scale: s, x: o, y: n } = this.viewport.getViewportMatrix(), a = e * s, h = t * s, d = o - a - this.nodeHorizontal, c = n - h - this.nodeVertical, g = 3 * a + 2 * this.nodeHorizontal, l = 3 * h + 2 * this.nodeVertical;
     this.trigger.emit({
       x: d,
       y: c,
@@ -2598,7 +2642,7 @@ const xt = () => {
   return r.setAttribute("id", "pattern"), r;
 };
 class _ {
-  constructor(e, t, o) {
+  constructor(e, t, s) {
     i(this, "svg", xt());
     i(this, "patternRenderingRectangle", St());
     i(this, "pattern", bt());
@@ -2610,19 +2654,19 @@ class _ {
     i(this, "maxViewportScale");
     i(this, "visible", !1);
     i(this, "onAfterTransformUpdated", () => {
-      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, o = e.y - this.halfTileHeight * e.scale, s = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${o})`;
-      this.pattern.setAttribute("patternTransform", s), this.updateVisibility();
+      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, o = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
+      this.pattern.setAttribute("patternTransform", o), this.updateVisibility();
     });
-    this.canvas = e, this.backgroundHost = o, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
-    const s = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
-    this.patternContent.setAttribute("transform", s), this.pattern.appendChild(this.patternContent);
+    this.canvas = e, this.backgroundHost = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
+    const o = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
+    this.patternContent.setAttribute("transform", o), this.pattern.appendChild(this.patternContent);
     const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.updateDimensions(), this.canvas.viewport.onAfterResize.subscribe(() => {
       this.updateDimensions();
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
-  static configure(e, t, o) {
-    new _(e, t, o);
+  static configure(e, t, s) {
+    new _(e, t, s);
   }
   updateVisibility() {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
@@ -2631,19 +2675,19 @@ class _ {
   updateDimensions() {
     const { width: e, height: t } = this.canvas.viewport.getDimensions();
     this.svg.setAttribute("width", `${e}`), this.svg.setAttribute("height", `${t}`), this.patternRenderingRectangle.setAttribute("width", `${e}`), this.patternRenderingRectangle.setAttribute("height", `${t}`);
-    const o = this.tileWidth / e, s = this.tileHeight / t;
-    this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
+    const s = this.tileWidth / e, o = this.tileHeight / t;
+    this.pattern.setAttribute("width", `${s}`), this.pattern.setAttribute("height", `${o}`);
   }
 }
 class ee {
-  constructor(e, t, o, s, n) {
+  constructor(e, t, s, o, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
     i(this, "isTargetDragging", !0);
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ve(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Ve(
       this.overlayLayer,
       this.viewportStore
     ), z.configure(
@@ -2669,19 +2713,19 @@ class ee {
       }
     );
   }
-  static configure(e, t, o, s, n) {
+  static configure(e, t, s, o, n) {
     new ee(
       e,
       t,
-      o,
       s,
+      o,
       n
     );
   }
-  grabPort(e, t, o) {
-    const s = this.canvas.graph.getPort(e);
+  grabPort(e, t, s) {
+    const o = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = s.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
+    const n = o.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.createContentCoords({
       x: a - d.x,
       y: h - d.y
     }), g = this.canvas.viewport.createContentCoords({
@@ -2690,13 +2734,13 @@ class ee {
     }), l = {
       overlayNodeId: C.StaticNodeId,
       portCoords: c,
-      portDirection: s.direction
+      portDirection: o.direction
     }, u = {
       overlayNodeId: C.DraggingNodeId,
       portCoords: g,
       portDirection: this.params.dragPortDirection
     };
-    this.isTargetDragging = o === "direct";
+    this.isTargetDragging = s === "direct";
     const [w, y] = this.isTargetDragging ? [l, u] : [u, l];
     this.overlayCanvas.addNode(U(w)), this.overlayCanvas.addNode(U(y)), this.overlayCanvas.addEdge({
       from: w.overlayNodeId,
@@ -2708,30 +2752,30 @@ class ee {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = xe(this.canvas.graph, e), o = this.staticPortId;
+    const t = xe(this.canvas.graph, e), s = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
-        staticPortId: o,
+        staticPortId: s,
         isDirect: this.isTargetDragging
       });
       return;
     }
-    const s = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: s, to: n }, h = this.params.connectionPreprocessor(a);
+    const o = this.isTargetDragging ? s : t, n = this.isTargetDragging ? t : s, a = { from: o, to: n }, h = this.params.connectionPreprocessor(a);
     h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
   }
   moveDraggingPort(e) {
-    const t = this.overlayLayer.getBoundingClientRect(), o = this.canvas.viewport.createContentCoords({
+    const t = this.overlayLayer.getBoundingClientRect(), s = this.canvas.viewport.createContentCoords({
       x: e.x - t.x,
       y: e.y - t.y
     });
     this.overlayCanvas.updateNode(C.DraggingNodeId, {
-      x: o.x,
-      y: o.y
+      x: s.x,
+      y: s.y
     });
   }
 }
 class te {
-  constructor(e, t, o, s, n) {
+  constructor(e, t, s, o, n) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
     i(this, "isTargetDragging", !0);
@@ -2739,7 +2783,7 @@ class te {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ve(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = o, this.params = n, this.overlayCanvas = Ve(
       this.overlayLayer,
       this.viewportStore
     ), z.configure(
@@ -2762,23 +2806,23 @@ class te {
       }
     );
   }
-  static configure(e, t, o, s, n) {
+  static configure(e, t, s, o, n) {
     new te(
       e,
       t,
-      o,
       s,
+      o,
       n
     );
   }
   tryStartEdgeDragging(e, t) {
-    const o = this.params.draggingEdgeResolver(e);
-    if (o === null)
-      return !1;
-    const s = this.canvas.graph.getEdge(o);
+    const s = this.params.draggingEdgeResolver(e);
     if (s === null)
       return !1;
-    const n = e === s.from, a = e === s.to, h = n ? s.to : s.from;
+    const o = this.canvas.graph.getEdge(s);
+    if (o === null)
+      return !1;
+    const n = e === o.from, a = e === o.to, h = n ? o.to : o.from;
     this.staticPortId = h, this.isTargetDragging = a;
     const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
       x: g.x + g.width / 2,
@@ -2791,12 +2835,12 @@ class te {
       y: t.y - u.y
     });
     this.draggingEdgePayload = {
-      id: o,
-      from: s.from,
-      to: s.to,
-      shape: s.shape,
-      priority: s.priority
-    }, this.canvas.removeEdge(o);
+      id: s,
+      from: o.from,
+      to: o.to,
+      shape: o.shape,
+      priority: o.priority
+    }, this.canvas.removeEdge(s);
     const A = {
       overlayNodeId: C.StaticNodeId,
       portCoords: w,
@@ -2807,7 +2851,7 @@ class te {
       portDirection: d.direction
     }, [S, T] = this.isTargetDragging ? [A, x] : [x, A];
     this.overlayCanvas.addNode(U(S)), this.overlayCanvas.addNode(U(T));
-    const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(C.EdgeId) : s.shape;
+    const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(C.EdgeId) : o.shape;
     return this.overlayCanvas.addEdge({
       id: C.EdgeId,
       from: S.overlayNodeId,
@@ -2819,13 +2863,13 @@ class te {
     this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   moveDraggingPort(e) {
-    const t = this.overlayLayer.getBoundingClientRect(), o = {
+    const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, s = this.canvas.viewport.createContentCoords(o);
+    }, o = this.canvas.viewport.createContentCoords(s);
     this.overlayCanvas.updateNode(C.DraggingNodeId, {
-      x: s.x,
-      y: s.y
+      x: o.x,
+      y: o.y
     });
   }
   tryCreateConnection(e) {
@@ -2841,10 +2885,10 @@ class te {
       });
       return;
     }
-    const [o, s] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
+    const [s, o] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
       id: n.id,
-      from: o,
-      to: s,
+      from: s,
+      to: o,
       shape: n.shape,
       priority: n.priority
     }, h = this.params.connectionPreprocessor(a);
@@ -2863,39 +2907,39 @@ class te {
   }
 }
 class re {
-  constructor(e, t, o) {
-    this.canvas = e, this.layoutAlgorithm = t, this.trigger = o, this.trigger.subscribe(() => {
+  constructor(e, t, s) {
+    this.canvas = e, this.layoutAlgorithm = t, this.trigger = s, this.trigger.subscribe(() => {
       this.applyLayout();
     });
   }
-  static configure(e, t, o) {
+  static configure(e, t, s) {
     new re(
       e,
       t,
-      o
+      s
     );
   }
   applyLayout() {
     this.layoutAlgorithm.calculateCoordinates(
       this.canvas.graph,
       this.canvas.viewport
-    ).forEach((t, o) => {
-      this.canvas.updateNode(o, t);
+    ).forEach((t, s) => {
+      this.canvas.updateNode(s, t);
     });
   }
 }
 class O {
-  constructor(e, t, o) {
+  constructor(e, t, s) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
       this.applyScheduled = !1, this.layoutAlgorithm.calculateCoordinates(
         this.canvas.graph,
         this.canvas.viewport
-      ).forEach((t, o) => {
-        this.canvas.updateNode(o, t);
+      ).forEach((t, s) => {
+        this.canvas.updateNode(s, t);
       });
     });
-    this.canvas = e, this.layoutAlgorithm = t, this.defererFn = o, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
+    this.canvas = e, this.layoutAlgorithm = t, this.defererFn = s, this.canvas.graph.onAfterNodeAdded.subscribe(() => {
       this.scheduleApply();
     }), this.canvas.graph.onBeforeNodeRemoved.subscribe(() => {
       this.scheduleApply();
@@ -2905,11 +2949,11 @@ class O {
       this.scheduleApply();
     });
   }
-  static configure(e, t, o) {
+  static configure(e, t, s) {
     new O(
       e,
       t,
-      o
+      s
     );
   }
   scheduleApply() {
@@ -2918,13 +2962,13 @@ class O {
 }
 class Pt {
   static configure(e, t) {
-    const o = t.applyOn;
-    switch (o.type) {
+    const s = t.applyOn;
+    switch (s.type) {
       case "manual": {
         re.configure(
           e,
           t.algorithm,
-          o.trigger
+          s.trigger
         );
         break;
       }
@@ -2932,9 +2976,9 @@ class Pt {
         O.configure(
           e,
           t.algorithm,
-          (s) => {
+          (o) => {
             setTimeout(() => {
-              s();
+              o();
             });
           }
         );
@@ -2944,9 +2988,9 @@ class Pt {
         O.configure(
           e,
           t.algorithm,
-          (s) => {
+          (o) => {
             queueMicrotask(() => {
-              s();
+              o();
             });
           }
         );
@@ -2970,21 +3014,21 @@ class Ct {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class oe {
-  constructor(e, t, o, s) {
+class se {
+  constructor(e, t, s, o) {
     i(this, "step", (e) => {
       this.algorithm.calculateNextCoordinates(
         this.canvas.graph,
         e,
         this.canvas.viewport
-      ).forEach((o, s) => {
-        this.staticNodes.has(s) || this.canvas.updateNode(s, { x: o.x, y: o.y });
+      ).forEach((s, o) => {
+        this.staticNodes.has(o) || this.canvas.updateNode(o, { x: s.x, y: s.y });
       });
     });
-    this.canvas = e, this.algorithm = t, this.staticNodes = o, this.win = s, new Ct(this.win, this.step);
+    this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = o, new Ct(this.win, this.step);
   }
-  static configure(e, t, o, s) {
-    new oe(e, t, o, s);
+  static configure(e, t, s, o) {
+    new se(e, t, s, o);
   }
 }
 const Tt = () => {
@@ -2997,7 +3041,7 @@ const Tt = () => {
   const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class Dt {
+class Nt {
   constructor(e) {
     i(this, "background", Y());
     i(this, "main", Y());
@@ -3010,17 +3054,17 @@ class Dt {
     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 G = (r) => () => r, we = G(0), Nt = () => {
+const G = (r) => () => r, we = G(0), Dt = () => {
   let r = 0;
   return () => r++;
 }, Mt = (r, e) => {
-  let t = we, o = we;
-  const s = Nt();
-  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = G(r)), typeof e == "number" && (o = G(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+  let t = we, s = we;
+  const o = Dt();
+  return r === "incremental" && (t = o), e === "incremental" && (s = o), typeof r == "number" && (t = G(r)), typeof e == "number" && (s = G(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
-    edgesPriorityFn: o
+    edgesPriorityFn: s
   };
-}, se = (r) => {
+}, oe = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
@@ -3065,7 +3109,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new Ne({
+      return () => new De({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -3091,21 +3135,21 @@ const G = (r) => () => r, we = G(0), Nt = () => {
       });
   }
 }, Lt = (r) => {
-  var t, o, s, n, a;
+  var t, s, o, n, a;
   const e = Mt(
     (t = r.nodes) == null ? void 0 : t.priority,
-    (o = r.edges) == null ? void 0 : o.priority
+    (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? Se,
+      centerFn: ((o = r.nodes) == null ? void 0 : o.centerFn) ?? Se,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: se(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: oe(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
@@ -3113,7 +3157,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
   var w, y, A, x, S, T;
   const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
   }), t = ((y = r.events) == null ? void 0 : y.onNodeDrag) ?? (() => {
-  }), o = r.nodeDragVerifier ?? (() => !0), s = ((A = r.events) == null ? void 0 : A.onNodeDragFinished) ?? (() => {
+  }), s = r.nodeDragVerifier ?? (() => !0), o = ((A = r.events) == null ? void 0 : A.onNodeDragFinished) ?? (() => {
   }), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (x = r.mouse) == null ? void 0 : x.dragCursor, d = h !== void 0 ? h : "grab", c = (S = r.mouse) == null ? void 0 : S.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (T = r.mouse) == null ? void 0 : T.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
   return {
     moveOnTop: n,
@@ -3124,31 +3168,31 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     mouseUpEventVerifier: u,
     onNodeDragStarted: e,
     onNodeDrag: t,
-    nodeDragVerifier: o,
-    onNodeDragFinished: s
+    nodeDragVerifier: s,
+    onNodeDragFinished: o
   };
 }, Vt = (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;
+  const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, o = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
     a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
     const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
-    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
-    const g = n.canvasHeight * n.prevTransform.scale, l = s - g;
+    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
+    const g = n.canvasHeight * n.prevTransform.scale, l = o - g;
     return h > l && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, l)), { scale: n.nextTransform.scale, x: a, y: h };
   };
 }, Ft = (r) => {
-  const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, s = t !== null ? 1 / t : 1 / 0;
+  const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, o = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
     let d = h.scale, c = h.x, g = h.y;
-    if (h.scale > s && h.scale > a.scale) {
-      d = Math.max(a.scale, s), c = a.x, g = a.y;
+    if (h.scale > o && h.scale > a.scale) {
+      d = Math.max(a.scale, o), c = a.x, g = a.y;
       const l = (d - a.scale) / (h.scale - a.scale);
       c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
     }
-    if (h.scale < o && h.scale < a.scale) {
-      d = Math.min(a.scale, o), c = a.x, g = a.y;
+    if (h.scale < s && h.scale < a.scale) {
+      d = Math.min(a.scale, s), c = a.x, g = a.y;
       const l = (d - a.scale) / (h.scale - a.scale);
       c = a.x + (h.x - a.x) * l, g = a.y + (h.y - a.y) * l;
     }
@@ -3159,7 +3203,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     };
   };
 }, It = (r) => (e) => r.reduce(
-  (t, o) => o({
+  (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
     canvasWidth: e.canvasWidth,
@@ -3185,16 +3229,16 @@ const G = (r) => () => r, we = G(0), Nt = () => {
   }
 }, ye = (r) => {
   var y, A, x, S, T, P, R, V, ie, ne, ae, he;
-  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
-  let s;
-  o !== void 0 ? Array.isArray(o) ? s = It(
-    o.map(
-      (D) => fe(D)
+  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  let o;
+  s !== void 0 ? Array.isArray(s) ? o = It(
+    s.map(
+      (N) => fe(N)
     )
-  ) : s = fe(o) : s = (D) => D.nextTransform;
+  ) : o = fe(s) : o = (N) => N.nextTransform;
   const n = ((A = r == null ? void 0 : r.shift) == null ? void 0 : A.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
   }), h = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onTransformChange) ?? (() => {
-  }), d = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (D) => D.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
+  }), d = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (N) => N.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
@@ -3203,7 +3247,7 @@ const G = (r) => () => r, we = G(0), Nt = () => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
-    transformPreprocessor: s,
+    transformPreprocessor: o,
     shiftCursor: n,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: l,
@@ -3224,33 +3268,33 @@ const G = (r) => () => r, we = G(0), Nt = () => {
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
 ), Bt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, s = Ut(r.renderer ?? {});
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, o = Ut(r.renderer ?? {});
   return {
     tileWidth: t,
-    tileHeight: o,
-    renderer: s,
+    tileHeight: s,
+    renderer: o,
     maxViewportScale: r.maxViewportScale ?? 10
   };
 }, Ot = (r, e, t) => {
   var c, g, l;
-  const o = () => "direct", s = (u) => u, n = (u) => u.button === 0, a = () => {
+  const s = () => "direct", o = (u) => u, n = (u) => u.button === 0, a = () => {
   }, h = () => {
   }, d = () => {
   };
   return {
-    connectionTypeResolver: r.connectionTypeResolver ?? o,
-    connectionPreprocessor: r.connectionPreprocessor ?? s,
+    connectionTypeResolver: r.connectionTypeResolver ?? s,
+    connectionPreprocessor: r.connectionPreprocessor ?? o,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
     onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
     onEdgeCreationInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((l = r.events) == null ? void 0 : l.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? se(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? oe(r.edgeShape) : e
   };
 }, Wt = (r, e) => {
   var c, g, l;
-  const t = (u) => u, o = (u) => u.button === 0 && u.ctrlKey, s = (u) => u.button === 0, n = (u) => {
+  const t = (u) => u, s = (u) => u.button === 0 && u.ctrlKey, o = (u) => u.button === 0, n = (u) => {
     const w = e.getPortAdjacentEdgeIds(u);
     return w.length > 0 ? w[w.length - 1] : null;
   }, a = () => {
@@ -3259,10 +3303,10 @@ const G = (r) => () => r, we = G(0), Nt = () => {
   };
   return {
     connectionPreprocessor: r.connectionPreprocessor ?? t,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
-    mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
+    mouseUpEventVerifier: r.mouseUpEventVerifier ?? o,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? se(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? oe(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((g = r.events) == null ? void 0 : g.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((l = r.events) == null ? void 0 : l.onEdgeReattachPrevented) ?? h
@@ -3286,22 +3330,22 @@ class Ht extends Error {
   }
 }
 class Fe {
-  constructor(e, t, o) {
+  constructor(e, t, s) {
     i(this, "dt");
     i(this, "nodeMass");
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "nodeForcesApplicationStrategy");
     i(this, "distanceVectorGenerator");
-    this.graph = e, this.currentCoords = t, this.dt = o.dtSec, this.nodeMass = o.nodeMass, this.edgeEquilibriumLength = o.edgeEquilibriumLength, this.edgeStiffness = o.edgeStiffness, this.distanceVectorGenerator = o.distanceVectorGenerator, this.nodeForcesApplicationStrategy = o.nodeForcesApplicationStrategy;
+    this.graph = e, this.currentCoords = t, this.dt = s.dtSec, this.nodeMass = s.nodeMass, this.edgeEquilibriumLength = s.edgeEquilibriumLength, this.edgeStiffness = s.edgeStiffness, this.distanceVectorGenerator = s.distanceVectorGenerator, this.nodeForcesApplicationStrategy = s.nodeForcesApplicationStrategy;
   }
   apply() {
     let e = 0, t = 0;
-    const o = /* @__PURE__ */ new Map();
+    const s = /* @__PURE__ */ new Map();
     return this.graph.getAllNodeIds().forEach((n) => {
-      o.set(n, { x: 0, y: 0 });
-    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, o), this.applyEdgeForces(o), this.currentCoords.forEach((n, a) => {
-      const h = o.get(a), d = {
+      s.set(n, { x: 0, y: 0 });
+    }), this.nodeForcesApplicationStrategy.apply(this.currentCoords, s), this.applyEdgeForces(s), this.currentCoords.forEach((n, a) => {
+      const h = s.get(a), d = {
         x: h.x / this.nodeMass * this.dt,
         y: h.y / this.nodeMass * this.dt
       };
@@ -3315,10 +3359,10 @@ class Fe {
   }
   applyEdgeForces(e) {
     this.graph.getAllEdgeIds().forEach((t) => {
-      const o = this.graph.getEdge(t), s = this.graph.getPort(o.from), n = this.graph.getPort(o.to), a = this.currentCoords.get(s.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
+      const s = this.graph.getEdge(t), o = this.graph.getPort(s.from), n = this.graph.getPort(s.to), a = this.currentCoords.get(o.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
         a,
         h
-      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(s.nodeId), y = e.get(n.nodeId);
+      ), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(o.nodeId), y = e.get(n.nodeId);
       w.x += l, w.y += u, y.x -= l, y.y -= u;
     });
   }
@@ -3329,7 +3373,7 @@ class Ie {
     this.rand = e;
   }
   create(e, t) {
-    const o = t.x - e.x, s = t.y - e.y, n = o * o + s * s;
+    const s = t.x - e.x, o = t.y - e.y, n = s * s + o * o;
     if (n === 0) {
       const c = this.PI2 * this.rand();
       return {
@@ -3338,7 +3382,7 @@ class Ie {
         d: 0
       };
     }
-    const a = Math.sqrt(n), h = o / a, d = s / a;
+    const a = Math.sqrt(n), h = s / a, d = o / a;
     return { ex: h, ey: d, d: a };
   }
 }
@@ -3357,11 +3401,11 @@ class Xt {
     this.effectiveDistance = e.effectiveDistance, this.nodeCharge = e.nodeCharge, this.distanceVectorGenerator = e.distanceVectorGenerator, this.maxForce = e.maxForce;
   }
   apply(e, t) {
-    const o = Array.from(t.keys()), s = o.length;
-    for (let n = 0; n < s; n++) {
-      const a = o[n];
-      for (let h = n + 1; h < s; h++) {
-        const d = o[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
+    const s = Array.from(t.keys()), o = s.length;
+    for (let n = 0; n < o; n++) {
+      const a = s[n];
+      for (let h = n + 1; h < o; h++) {
+        const d = s[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
           c,
           g
         );
@@ -3386,14 +3430,14 @@ const Yt = (r) => {
       centerY: 0,
       radius: 0
     };
-  let e = 1 / 0, t = -1 / 0, o = 1 / 0, s = -1 / 0;
+  let e = 1 / 0, t = -1 / 0, s = 1 / 0, o = -1 / 0;
   r.forEach((d) => {
-    e = Math.min(e, d.x), t = Math.max(t, d.x), o = Math.min(o, d.y), s = Math.max(s, d.y);
+    e = Math.min(e, d.x), t = Math.max(t, d.x), s = Math.min(s, d.y), o = Math.max(o, d.y);
   });
-  const n = t - e, a = s - o, h = Math.max(n, a);
+  const n = t - e, a = o - s, h = Math.max(n, a);
   return {
     centerX: (e + t) / 2,
-    centerY: (o + s) / 2,
+    centerY: (s + o) / 2,
     radius: h / 2
   };
 };
@@ -3423,18 +3467,18 @@ class Gt {
     };
     let t = [this.root];
     for (; t.length > 0; ) {
-      const o = [];
+      const s = [];
       for (; t.length > 0; ) {
-        const s = t.pop();
-        this.processNode(s).forEach((a) => {
-          o.push(a);
+        const o = t.pop();
+        this.processNode(o).forEach((a) => {
+          s.push(a);
         });
       }
-      t = o;
+      t = s;
     }
-    this.sortedParentNodes.reverse().forEach((o) => {
-      let s = 0, n = 0, a = 0, h = 0;
-      o.lb !== null && (a += o.lb.totalMass, h += o.lb.totalCharge, s += o.lb.chargeCenter.x * o.lb.totalCharge, n += o.lb.chargeCenter.y * o.lb.totalCharge), o.lt !== null && (a += o.lt.totalMass, h += o.lt.totalCharge, s += o.lt.chargeCenter.x * o.lt.totalCharge, n += o.lt.chargeCenter.y * o.lt.totalCharge), o.rb !== null && (a += o.rb.totalMass, h += o.rb.totalCharge, s += o.rb.chargeCenter.x * o.rb.totalCharge, n += o.rb.chargeCenter.y * o.rb.totalCharge), o.rt !== null && (a += o.rt.totalMass, h += o.rt.totalCharge, s += o.rt.chargeCenter.x * o.rt.totalCharge, n += o.rt.chargeCenter.y * o.rt.totalCharge), o.totalMass = a, o.totalCharge = h, o.chargeCenter.x = s / h, o.chargeCenter.y = n / h;
+    this.sortedParentNodes.reverse().forEach((s) => {
+      let o = 0, n = 0, a = 0, h = 0;
+      s.lb !== null && (a += s.lb.totalMass, h += s.lb.totalCharge, o += s.lb.chargeCenter.x * s.lb.totalCharge, n += s.lb.chargeCenter.y * s.lb.totalCharge), s.lt !== null && (a += s.lt.totalMass, h += s.lt.totalCharge, o += s.lt.chargeCenter.x * s.lt.totalCharge, n += s.lt.chargeCenter.y * s.lt.totalCharge), s.rb !== null && (a += s.rb.totalMass, h += s.rb.totalCharge, o += s.rb.chargeCenter.x * s.rb.totalCharge, n += s.rb.chargeCenter.y * s.rb.totalCharge), s.rt !== null && (a += s.rt.totalMass, h += s.rt.totalCharge, o += s.rt.chargeCenter.x * s.rt.totalCharge, n += s.rt.chargeCenter.y * s.rt.totalCharge), s.totalMass = a, s.totalCharge = h, s.chargeCenter.x = o / h, s.chargeCenter.y = n / h;
     });
   }
   getRoot() {
@@ -3446,14 +3490,14 @@ class Gt {
   processNode(e) {
     if (e.nodeIds.size < 2)
       return this.setLeaf(e), [];
-    const { centerX: t, centerY: o, radius: s } = e.box;
-    if (s < this.areaRadiusThreshold)
+    const { centerX: t, centerY: s, radius: o } = e.box;
+    if (o < this.areaRadiusThreshold)
       return this.setLeaf(e), [];
     this.sortedParentNodes.push(e);
-    const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = s / 2;
+    const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = o / 2;
     e.nodeIds.forEach((u) => {
       const { x: w, y } = this.coords.get(u);
-      w < t ? y < o ? d.add(u) : h.add(u) : y < o ? a.add(u) : n.add(u), e.nodeIds.delete(u);
+      w < t ? y < s ? d.add(u) : h.add(u) : y < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
     });
     const g = {
       parent: e,
@@ -3473,7 +3517,7 @@ class Gt {
         },
         box: {
           centerX: t + c,
-          centerY: o + c,
+          centerY: s + c,
           radius: c
         },
         ...g
@@ -3491,7 +3535,7 @@ class Gt {
         },
         box: {
           centerX: t + c,
-          centerY: o - c,
+          centerY: s - c,
           radius: c
         },
         ...g
@@ -3509,7 +3553,7 @@ class Gt {
         },
         box: {
           centerX: t - c,
-          centerY: o + c,
+          centerY: s + c,
           radius: c
         },
         ...g
@@ -3527,7 +3571,7 @@ class Gt {
         },
         box: {
           centerX: t - c,
-          centerY: o - c,
+          centerY: s - c,
           radius: c
         },
         ...g
@@ -3547,11 +3591,11 @@ class Gt {
         x: 0,
         y: 0
       };
-    let t = 0, o = 0;
-    return e.forEach((s) => {
-      const n = this.coords.get(s);
-      t += n.x, o += n.y;
-    }), { x: t / e.size, y: o / e.size };
+    let t = 0, s = 0;
+    return e.forEach((o) => {
+      const n = this.coords.get(o);
+      t += n.x, s += n.y;
+    }), { x: t / e.size, y: s / e.size };
   }
 }
 class jt {
@@ -3566,8 +3610,8 @@ class jt {
     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 = Yt(e), s = new Gt({
-      box: o,
+    const s = Yt(e), o = new Gt({
+      box: s,
       coords: e,
       areaRadiusThreshold: this.areaRadiusThreshold,
       nodeMass: this.nodeMass,
@@ -3575,22 +3619,22 @@ class jt {
     });
     e.forEach((n, a) => {
       const h = this.calculateForceForNode(
-        s.getLeaf(a),
+        o.getLeaf(a),
         a,
         e
       ), d = t.get(a);
       this.applyForce(d, h);
     });
   }
-  calculateForceForNode(e, t, o) {
-    const s = o.get(t), n = { x: 0, y: 0 };
+  calculateForceForNode(e, t, s) {
+    const o = s.get(t), n = { x: 0, y: 0 };
     e.nodeIds.forEach((h) => {
       if (h !== t) {
-        const d = o.get(h), c = this.calculateNodeRepulsiveForce({
+        const d = s.get(h), c = this.calculateNodeRepulsiveForce({
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
           sourceCoords: d,
-          targetCoords: s
+          targetCoords: o
         });
         this.applyForce(n, c);
       }
@@ -3601,73 +3645,73 @@ class jt {
       if (h !== null) {
         const d = this.distanceVectorGenerator.create(
           h.chargeCenter,
-          s
+          o
         );
         h.box.radius * 2 < d.d * this.theta ? (this.tryApplyFarForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.lb,
           current: a
         }), this.tryApplyFarForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.rb,
           current: a
         }), this.tryApplyFarForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.rt,
           current: a
         }), this.tryApplyFarForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.lt,
           current: a
         })) : (this.tryApplyNearForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.lb,
           current: a,
-          nodesCoords: o
+          nodesCoords: s
         }), this.tryApplyNearForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.rb,
           current: a,
-          nodesCoords: o
+          nodesCoords: s
         }), this.tryApplyNearForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.rt,
           current: a,
-          nodesCoords: o
+          nodesCoords: s
         }), this.tryApplyNearForce({
           totalForce: n,
-          targetCoords: s,
+          targetCoords: o,
           target: h.lt,
           current: a,
-          nodesCoords: o
+          nodesCoords: s
         }));
       }
       a = a.parent;
     }
     return n;
   }
-  calculateExactForce(e, t, o) {
-    const s = { x: 0, y: 0 }, n = [e];
+  calculateExactForce(e, t, s) {
+    const o = { x: 0, y: 0 }, n = [e];
     for (; n.length > 0; ) {
       const a = n.pop();
       a.nodeIds.forEach((h) => {
-        const d = o.get(h), c = this.calculateNodeRepulsiveForce({
+        const d = s.get(h), c = this.calculateNodeRepulsiveForce({
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
           sourceCoords: d,
           targetCoords: t
         });
-        this.applyForce(s, c);
+        this.applyForce(o, c);
       }), a.lb !== null && n.push(a.lb), a.rb !== null && n.push(a.rb), a.lt !== null && n.push(a.lt), a.rt !== null && n.push(a.rt);
     }
-    return s;
+    return o;
   }
   calculateApproximateForce(e, t) {
     return this.calculateNodeRepulsiveForce({
@@ -3681,7 +3725,7 @@ class jt {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), o = $e({
+    ), s = $e({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -3689,8 +3733,8 @@ class jt {
       maxForce: this.maxForce
     });
     return {
-      x: o * t.ex,
-      y: o * t.ey
+      x: s * t.ex,
+      y: s * t.ey
     };
   }
   applyForce(e, t) {
@@ -3738,17 +3782,17 @@ class Be {
     this.rand = e.rand, this.sparsity = e.sparsity;
   }
   calculateCoordinates(e, t) {
-    const o = /* @__PURE__ */ new Map(), s = e.getAllNodeIds(), n = Math.sqrt(s.length) * this.sparsity, { width: a, height: h } = t.getDimensions(), d = { x: a / 2, y: h / 2 }, c = t.createContentCoords(d), g = n / 2, l = {
+    const s = /* @__PURE__ */ new Map(), o = e.getAllNodeIds(), n = Math.sqrt(o.length) * this.sparsity, { width: a, height: h } = t.getDimensions(), d = { x: a / 2, y: h / 2 }, c = t.createContentCoords(d), g = n / 2, l = {
       x: c.x - g,
       y: c.y - g
     };
-    return s.forEach((u) => {
+    return o.forEach((u) => {
       const w = e.getNode(u);
-      o.set(u, {
+      s.set(u, {
         x: w.x ?? l.x + n * this.rand(),
         y: w.y ?? l.y + n * this.rand()
       });
-    }), o;
+    }), s;
   }
 }
 class qt {
@@ -3778,14 +3822,14 @@ class qt {
     });
   }
   calculateCoordinates(e, t) {
-    const o = this.fillerLayoutAlgorithm.calculateCoordinates(
+    const s = this.fillerLayoutAlgorithm.calculateCoordinates(
       e,
       t
     );
-    for (let s = 0; s < this.maxIterations; s++) {
+    for (let o = 0; o < this.maxIterations; o++) {
       const n = new Fe(
         e,
-        o,
+        s,
         {
           distanceVectorGenerator: this.distanceVectorGenerator,
           nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -3798,7 +3842,7 @@ class qt {
       if (a < this.convergenceDelta || h < this.convergenceVelocity)
         break;
     }
-    return o;
+    return s;
   }
 }
 class Kt {
@@ -3826,13 +3870,13 @@ class Kt {
       sparsity: e.edgeEquilibriumLength
     });
   }
-  calculateNextCoordinates(e, t, o) {
-    const s = this.fillerLayoutAlgorithm.calculateCoordinates(
+  calculateNextCoordinates(e, t, s) {
+    const o = this.fillerLayoutAlgorithm.calculateCoordinates(
       e,
-      o
+      s
     ), n = new Fe(
       e,
-      s,
+      o,
       {
         distanceVectorGenerator: this.distanceVectorGenerator,
         nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
@@ -3845,18 +3889,18 @@ class Kt {
     return (a < this.convergenceDelta || h < this.convergenceVelocity) && !e.getAllNodeIds().some((c) => {
       const g = e.getNode(c);
       return g.x === null || g.y === null;
-    }) ? /* @__PURE__ */ new Map() : s;
+    }) ? /* @__PURE__ */ new Map() : o;
   }
 }
 const Oe = (r) => {
-  let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
+  let e = 1779033703, t = 3144134277, s = 1013904242, o = 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];
-}, We = (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 = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = s ^ Math.imul(t ^ a, 2869860233), s = o ^ Math.imul(s ^ a, 951274213), o = e ^ Math.imul(o ^ a, 2716044179);
+  return e = Math.imul(s ^ e >>> 18, 597399067), t = Math.imul(o ^ t >>> 22, 2869860233), s = Math.imul(e ^ s >>> 17, 951274213), o = Math.imul(t ^ o >>> 19, 2716044179), e ^= t ^ s ^ o, t ^= e, s ^= e, o ^= e, [e >>> 0, t >>> 0, s >>> 0, o >>> 0];
+}, We = (r, e, t, s) => function() {
+  r |= 0, e |= 0, t |= 0, s |= 0;
+  const o = (r + e | 0) + s | 0;
+  return s = s + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + o | 0, (o >>> 0) / 4294967296;
 }, v = Object.freeze({
   seed: "HTMLGraph is awesome",
   maxTimeDeltaSec: 0.01,
@@ -3874,26 +3918,26 @@ const Oe = (r) => {
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
 }), Qt = (r) => {
-  var e, t, o;
+  var e, t, s;
   switch ((e = r == null ? void 0 : r.algorithm) == null ? void 0 : e.type) {
     case "custom":
       return r.algorithm.instance;
     default: {
-      const s = r == null ? void 0 : r.algorithm, n = Oe((s == null ? void 0 : s.seed) ?? v.seed), a = We(n[0], n[1], n[2], n[3]);
+      const o = r == null ? void 0 : r.algorithm, n = Oe((o == null ? void 0 : o.seed) ?? v.seed), a = We(n[0], n[1], n[2], n[3]);
       return new Kt({
         rand: a,
-        maxTimeDeltaSec: (s == null ? void 0 : s.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
-        nodeCharge: (s == null ? void 0 : s.nodeCharge) ?? v.nodeCharge,
-        nodeMass: (s == null ? void 0 : s.nodeMass) ?? v.nodeMass,
-        edgeEquilibriumLength: (s == null ? void 0 : s.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
+        maxTimeDeltaSec: (o == null ? void 0 : o.maxTimeDeltaSec) ?? v.maxTimeDeltaSec,
+        nodeCharge: (o == null ? void 0 : o.nodeCharge) ?? v.nodeCharge,
+        nodeMass: (o == null ? void 0 : o.nodeMass) ?? v.nodeMass,
+        edgeEquilibriumLength: (o == null ? void 0 : o.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
         effectiveDistance: v.effectiveDistance,
-        edgeStiffness: (s == null ? void 0 : s.edgeStiffness) ?? v.edgeStiffness,
-        convergenceDelta: (s == null ? void 0 : s.convergenceDelta) ?? v.convergenceDelta,
-        convergenceVelocity: (s == null ? void 0 : s.convergenceVelocity) ?? v.convergenceVelocity,
-        maxForce: (s == null ? void 0 : s.maxForce) ?? v.maxForce,
-        nodeForceCoefficient: (s == null ? void 0 : s.nodeForceCoefficient) ?? v.nodeForceCoefficient,
-        barnesHutTheta: ((t = s == null ? void 0 : s.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
-        barnesHutAreaRadiusThreshold: ((o = s == null ? void 0 : s.barnesHut) == null ? void 0 : o.areaRadiusThreshold) ?? v.barnesHutAreaRadiusThreshold
+        edgeStiffness: (o == null ? void 0 : o.edgeStiffness) ?? v.edgeStiffness,
+        convergenceDelta: (o == null ? void 0 : o.convergenceDelta) ?? v.convergenceDelta,
+        convergenceVelocity: (o == null ? void 0 : o.convergenceVelocity) ?? v.convergenceVelocity,
+        maxForce: (o == null ? void 0 : o.maxForce) ?? v.maxForce,
+        nodeForceCoefficient: (o == null ? void 0 : o.nodeForceCoefficient) ?? v.nodeForceCoefficient,
+        barnesHutTheta: ((t = o == null ? void 0 : o.barnesHut) == null ? void 0 : t.theta) ?? v.barnesHutTheta,
+        barnesHutAreaRadiusThreshold: ((s = o == null ? void 0 : o.barnesHut) == null ? void 0 : s.areaRadiusThreshold) ?? v.barnesHutAreaRadiusThreshold
       });
     }
   }
@@ -3912,11 +3956,11 @@ const Oe = (r) => {
     case "custom":
       return r.instance;
     default: {
-      const o = Oe((r == null ? void 0 : r.seed) ?? v.seed), s = We(o[0], o[1], o[2], o[3]);
+      const s = Oe((r == null ? void 0 : r.seed) ?? v.seed), o = We(s[0], s[1], s[2], s[3]);
       return new qt({
         dtSec: (r == null ? void 0 : r.dtSec) ?? v.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? v.maxIterations,
-        rand: s,
+        rand: o,
         nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? v.nodeCharge,
         nodeMass: (r == null ? void 0 : r.nodeMass) ?? v.nodeMass,
         edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
@@ -3949,7 +3993,7 @@ const Oe = (r) => {
     e.clear();
   });
 };
-class sr {
+class or {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4046,25 +4090,25 @@ class sr {
     if (this.used)
       throw new Ht("CanvasBuilder is a single use object");
     this.used = !0;
-    const e = new Dt(this.element), t = this.createHtmlView(e.main), o = Lt(this.canvasDefaults), s = new ve(
+    const e = new Nt(this.element), t = this.createHtmlView(e.main), s = Lt(this.canvasDefaults), o = new ve(
       this.graph,
       this.viewport,
       this.graphStore,
       this.viewportStore,
       t,
-      o
+      s
     );
     if (this.hasBackground && _.configure(
-      s,
+      o,
       Bt(this.backgroundConfig),
       e.background
-    ), this.hasNodeResizeReactiveEdges && q.configure(s), this.hasDraggableNodes) {
+    ), this.hasNodeResizeReactiveEdges && q.configure(o), this.hasDraggableNodes) {
       let a = Rt(this.dragConfig);
       this.hasAnimatedLayout && (a = er(
         a,
         this.animationStaticNodes
       )), Z.configure(
-        s,
+        o,
         e.main,
         this.window,
         a
@@ -4073,11 +4117,11 @@ class sr {
     if (this.hasUserConnectablePorts) {
       const a = Ot(
         this.connectablePortsConfig,
-        o.edges.shapeFactory,
-        o.ports.direction
+        s.edges.shapeFactory,
+        s.ports.direction
       );
       ee.configure(
-        s,
+        o,
         e.overlayConnectablePorts,
         this.viewportStore,
         this.window,
@@ -4087,10 +4131,10 @@ class sr {
     if (this.hasUserDraggableEdges) {
       const a = Wt(
         this.draggableEdgesConfig,
-        s.graph
+        o.graph
       );
       te.configure(
-        s,
+        o,
         e.overlayDraggableEdges,
         this.viewportStore,
         this.window,
@@ -4098,33 +4142,33 @@ class sr {
       );
     }
     this.virtualScrollConfig !== void 0 ? J.configure(
-      s,
+      o,
       e.main,
       this.window,
       ye(this.transformConfig),
       this.boxRenderingTrigger,
       kt(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && H.configure(
-      s,
+      o,
       e.main,
       this.window,
       ye(this.transformConfig)
     ), this.hasLayout && Pt.configure(
-      s,
+      o,
       _t(this.layoutConfig)
     ), this.hasAnimatedLayout && (tr(
-      s.graph,
+      o.graph,
       this.animationStaticNodes
-    ), oe.configure(
-      s,
+    ), se.configure(
+      o,
       Qt(this.animatedLayoutConfig),
       this.animationStaticNodes,
       this.window
     ));
     const n = () => {
-      e.destroy(), s.onBeforeDestroy.unsubscribe(n);
+      e.destroy(), o.onBeforeDestroy.unsubscribe(n);
     };
-    return s.onBeforeDestroy.subscribe(n), s;
+    return o.onBeforeDestroy.subscribe(n), o;
   }
   createHtmlView(e) {
     let t = new me(
@@ -4142,16 +4186,16 @@ class sr {
 }
 export {
   ut as BezierEdgeShape,
-  sr as CanvasBuilder,
+  or as CanvasBuilder,
   Ht as CanvasBuilderError,
   b as CanvasError,
   M as ConnectionCategory,
-  Ne as DirectEdgeShape,
+  De as DirectEdgeShape,
   j as EventSubject,
   pt as HorizontalEdgeShape,
   vt as InteractiveEdgeError,
   Me as InteractiveEdgeShape,
-  or as MidpointEdgeShape,
+  sr as MidpointEdgeShape,
   wt as StraightEdgeShape,
   ft as VerticalEdgeShape
 };