@html-graph/html-graph 3.21.0 → 4.1.0

package/dist/html-graph.js

@@ -1,182 +1,178 @@
-var Ne = Object.defineProperty;
-var Me = (r, e, t) => e in r ? Ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Me(r, typeof e != "symbol" ? e + "" : e, t);
-const D = (r, e) => ({
-  x: r.scale * e.x + r.x,
-  y: r.scale * e.y + r.y
+var Nt = Object.defineProperty;
+var Mt = (r, t, e) => t in r ? Nt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var o = (r, t, e) => Mt(r, typeof t != "symbol" ? t + "" : t, e);
+const T = (r, t) => ({
+  x: r.scale * t.x + r.x,
+  y: r.scale * t.y + r.y
 });
-var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
-const Le = () => {
+var C = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(C || {});
+const Lt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Re = () => {
+}, Ct = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, Ce = (r) => {
+}, Rt = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
-class pe {
-  constructor(e, t, s) {
-    o(this, "host", Le());
-    o(this, "container", Re());
+class pt {
+  constructor(t, e, s) {
+    o(this, "host", Lt());
+    o(this, "container", Ct());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
-      const e = this.viewportStore.getContentMatrix();
-      this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
+      const t = this.viewportStore.getContentMatrix();
+      this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
     });
-    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);
+    this.graphStore = t, this.viewportStore = e, 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);
-    Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+  attachNode(t) {
+    const e = this.graphStore.getNode(t);
+    Rt(e.element), this.container.appendChild(e.element), this.updateNodePosition(t), this.updateNodePriority(t), e.element.style.visibility = "visible";
   }
-  detachNode(e) {
-    const t = this.graphStore.getNode(e);
-    this.container.removeChild(t.element);
+  detachNode(t) {
+    const e = this.graphStore.getNode(t);
+    this.container.removeChild(e.element);
   }
-  attachEdge(e) {
-    const t = this.graphStore.getEdge(e).shape.svg;
-    this.edgeIdToElementMap.set(e, t), this.container.appendChild(t), this.renderEdge(e), this.updateEdgePriority(e);
+  attachEdge(t) {
+    const e = this.graphStore.getEdge(t).payload.shape.svg;
+    this.edgeIdToElementMap.set(t, e), this.container.appendChild(e), this.renderEdge(t), this.updateEdgePriority(t);
   }
-  detachEdge(e) {
-    const t = this.edgeIdToElementMap.get(e);
-    this.container.removeChild(t), this.edgeIdToElementMap.delete(e);
+  detachEdge(t) {
+    const e = this.edgeIdToElementMap.get(t);
+    this.container.removeChild(e), this.edgeIdToElementMap.delete(t);
   }
   clear() {
-    this.edgeIdToElementMap.forEach((e, t) => {
-      this.detachEdge(t);
-    }), this.graphStore.getAllNodeIds().forEach((e) => {
-      this.detachNode(e);
+    this.edgeIdToElementMap.forEach((t, e) => {
+      this.detachEdge(e);
+    }), this.graphStore.getAllNodeIds().forEach((t) => {
+      this.detachNode(t);
     });
   }
   destroy() {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
-  updateNodePosition(e) {
-    const t = this.graphStore.getNode(e), { width: s, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.centerFn(s, i), h = t.x - n * a.x, d = t.y - n * a.y;
-    t.element.style.transform = `translate(${h}px, ${d}px)`;
+  updateNodePosition(t) {
+    const e = this.graphStore.getNode(t), { width: s, height: i } = e.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = e.payload.centerFn(s, i), h = e.payload.x - n * a.x, d = e.payload.y - n * a.y;
+    e.element.style.transform = `translate(${h}px, ${d}px)`;
   }
-  updateNodePriority(e) {
-    const t = this.graphStore.getNode(e);
-    t.element.style.zIndex = `${t.priority}`;
+  updateNodePriority(t) {
+    const e = this.graphStore.getNode(t);
+    e.element.style.zIndex = `${e.payload.priority}`;
   }
-  updateEdgeShape(e) {
-    const t = this.edgeIdToElementMap.get(e);
-    this.container.removeChild(t);
-    const s = this.graphStore.getEdge(e);
-    this.edgeIdToElementMap.set(e, s.shape.svg), this.container.appendChild(s.shape.svg);
+  updateEdgeShape(t) {
+    const e = this.edgeIdToElementMap.get(t);
+    this.container.removeChild(e);
+    const i = this.graphStore.getEdge(t).payload.shape.svg;
+    this.edgeIdToElementMap.set(t, i), this.container.appendChild(i);
   }
-  renderEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
-      t.from,
+  renderEdge(t) {
+    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), i = this.graphStore.getPort(e.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
       s,
       n,
       h,
       d
     ), l = this.createEdgeRenderPort(
-      t.to,
       i,
       a,
       h,
       d
     );
-    let g = R.Line;
-    s.element === i.element ? g = R.PortCycle : s.nodeId === i.nodeId && (g = R.NodeCycle), t.shape.render({ from: c, to: l, category: g });
-  }
-  updateEdgePriority(e) {
-    const t = this.graphStore.getEdge(e);
-    t.shape.svg.style.zIndex = `${t.priority}`;
-  }
-  createEdgeRenderPort(e, t, s, i, n) {
-    const a = {
-      x: s.left - i.left,
-      y: s.top - i.top
-    }, h = D(n, a);
+    let g = C.Line;
+    s.element === i.element ? g = C.PortCycle : s.nodeId === i.nodeId && (g = C.NodeCycle), e.payload.shape.render({ from: c, to: l, category: g });
+  }
+  updateEdgePriority(t) {
+    const e = this.graphStore.getEdge(t);
+    e.payload.shape.svg.style.zIndex = `${e.payload.priority}`;
+  }
+  createEdgeRenderPort(t, e, s, i) {
+    const n = {
+      x: e.left - s.left,
+      y: e.top - s.top
+    }, a = T(i, n);
     return {
-      x: h.x,
-      y: h.y,
-      width: s.width * n.scale,
-      height: s.height * n.scale,
-      direction: t.direction,
-      portId: e,
-      nodeId: t.nodeId
+      x: a.x,
+      y: a.y,
+      width: e.width * i.scale,
+      height: e.height * i.scale,
+      direction: t.payload.direction
     };
   }
 }
-class Ve {
-  constructor(e) {
+class Vt {
+  constructor(t) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
     o(this, "xTo", 1 / 0);
     o(this, "yTo", 1 / 0);
-    this.graphStore = e;
+    this.graphStore = t;
   }
-  setRenderingBox(e) {
-    this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
+  setRenderingBox(t) {
+    this.xFrom = t.x, this.xTo = t.x + t.width, this.yFrom = t.y, this.yTo = t.y + t.height;
   }
-  hasNode(e) {
-    const t = this.graphStore.getNode(e);
-    return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
+  hasNode(t) {
+    const e = this.graphStore.getNode(t).payload;
+    return e.x >= this.xFrom && e.x <= this.xTo && e.y >= this.yFrom && e.y <= this.yTo;
   }
-  hasEdge(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
+  hasEdge(t) {
+    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId, n = this.graphStore.getNode(s).payload, a = this.graphStore.getNode(i).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Ie {
-  constructor(e, t, s, i) {
+class It {
+  constructor(t, e, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
     o(this, "renderingBox");
-    o(this, "updateViewport", (e) => {
-      this.renderingBox.setRenderingBox(e);
-      const t = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+    o(this, "updateViewport", (t) => {
+      this.renderingBox.setRenderingBox(t);
+      const e = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__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 && s.add(a);
+        h && !d ? e.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), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(l) || (t.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
+        h && (this.renderingBox.hasNode(l) || (e.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (e.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
       }), n.forEach((a) => {
         this.handleDetachEdge(a);
       }), s.forEach((a) => {
         this.handleDetachNode(a);
-      }), t.forEach((a) => {
+      }), e.forEach((a) => {
         this.attachedNodes.has(a) || this.handleAttachNode(a);
       }), i.forEach((a) => {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ve(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = t, this.graphStore = e, this.trigger = s, this.params = i, this.renderingBox = new Vt(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
-  attachNode(e) {
-    this.renderingBox.hasNode(e) && this.handleAttachNode(e);
+  attachNode(t) {
+    this.renderingBox.hasNode(t) && this.handleAttachNode(t);
   }
-  detachNode(e) {
-    this.attachedNodes.has(e) && this.handleDetachNode(e);
+  detachNode(t) {
+    this.attachedNodes.has(t) && this.handleDetachNode(t);
   }
-  attachEdge(e) {
-    this.renderingBox.hasEdge(e) && this.attachEdgeEntities(e);
+  attachEdge(t) {
+    this.renderingBox.hasEdge(t) && this.attachEdgeEntities(t);
   }
-  detachEdge(e) {
-    this.attachedEdges.has(e) && this.handleDetachEdge(e);
+  detachEdge(t) {
+    this.attachedEdges.has(t) && this.handleDetachEdge(t);
   }
-  updateNodePosition(e) {
-    this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((t) => {
-      this.attachEdgeEntities(t);
+  updateNodePosition(t) {
+    this.attachedNodes.has(t) ? this.htmlView.updateNodePosition(t) : this.renderingBox.hasNode(t) && (this.handleAttachNode(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((e) => {
+      this.attachEdgeEntities(e);
     }));
   }
-  updateNodePriority(e) {
-    this.attachedNodes.has(e) && this.htmlView.updateNodePriority(e);
+  updateNodePriority(t) {
+    this.attachedNodes.has(t) && this.htmlView.updateNodePriority(t);
   }
-  updateEdgeShape(e) {
-    this.attachedEdges.has(e) && this.htmlView.updateEdgeShape(e);
+  updateEdgeShape(t) {
+    this.attachedEdges.has(t) && this.htmlView.updateEdgeShape(t);
   }
-  renderEdge(e) {
-    this.attachedEdges.has(e) && this.htmlView.renderEdge(e);
+  renderEdge(t) {
+    this.attachedEdges.has(t) && this.htmlView.renderEdge(t);
   }
-  updateEdgePriority(e) {
-    this.attachedEdges.has(e) && this.htmlView.updateEdgePriority(e);
+  updateEdgePriority(t) {
+    this.attachedEdges.has(t) && this.htmlView.updateEdgePriority(t);
   }
   clear() {
     this.htmlView.clear(), this.attachedNodes.clear(), this.attachedEdges.clear();
@@ -184,52 +180,47 @@ class Ie {
   destroy() {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
-  attachEdgeEntities(e) {
-    const t = this.graphStore.getEdge(e), s = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId;
-    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
+  attachEdgeEntities(t) {
+    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId;
+    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(t);
   }
-  handleAttachNode(e) {
-    this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
+  handleAttachNode(t) {
+    this.params.onBeforeNodeAttached(t), this.attachedNodes.add(t), this.htmlView.attachNode(t);
   }
-  handleDetachNode(e) {
-    this.htmlView.detachNode(e), this.attachedNodes.delete(e), this.params.onAfterNodeDetached(e);
+  handleDetachNode(t) {
+    this.htmlView.detachNode(t), this.attachedNodes.delete(t), this.params.onAfterNodeDetached(t);
   }
-  handleAttachEdge(e) {
-    this.attachedEdges.add(e), this.htmlView.attachEdge(e);
+  handleAttachEdge(t) {
+    this.attachedEdges.add(t), this.htmlView.attachEdge(t);
   }
-  handleDetachEdge(e) {
-    this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
+  handleDetachEdge(t) {
+    this.htmlView.detachEdge(t), this.attachedEdges.delete(t);
   }
 }
-class we {
+class wt {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
-  subscribe(e) {
-    this.callbacks.add(e);
+  subscribe(t) {
+    this.callbacks.add(t);
   }
-  unsubscribe(e) {
-    this.callbacks.delete(e);
+  unsubscribe(t) {
+    this.callbacks.delete(t);
   }
-  emit(e) {
-    this.callbacks.forEach((t) => {
-      t(e);
+  emit(t) {
+    this.callbacks.forEach((e) => {
+      e(t);
     });
   }
 }
 const A = () => {
-  const r = new we();
+  const r = new wt();
   return [r, r];
 };
-class Ue {
-  constructor(e) {
-    /**
-     * @deprecated
-     * do not use
-     */
-    o(this, "onBeforeUpdated");
+class Ut {
+  constructor(t) {
     o(this, "onAfterUpdated");
-    this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
+    this.viewportStore = t, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
   }
   getViewportMatrix() {
     return { ...this.viewportStore.getViewportMatrix() };
@@ -238,8 +229,8 @@ class Ue {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class We {
-  constructor(e) {
+class Wt {
+  constructor(t) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
     o(this, "onAfterNodePriorityUpdated");
@@ -253,107 +244,92 @@ class We {
     o(this, "onAfterEdgePriorityUpdated");
     o(this, "onBeforeEdgeRemoved");
     o(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;
+    this.graphStore = t, 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;
   }
-  getNode(e) {
-    const t = this.graphStore.getNode(e);
-    return t === void 0 ? null : {
-      element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn,
-      priority: t.priority
+  getNode(t) {
+    const e = this.graphStore.getNode(t);
+    if (e === void 0)
+      return null;
+    const s = e.payload;
+    return {
+      element: e.element,
+      x: s.x,
+      y: s.y,
+      centerFn: s.centerFn,
+      priority: s.priority
     };
   }
-  getElementNodeId(e) {
-    return this.graphStore.getElementNodeId(e) ?? null;
+  getElementNodeId(t) {
+    return this.graphStore.getElementNodeId(t) ?? null;
   }
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
-  getPort(e) {
-    const t = this.graphStore.getPort(e);
-    return t === void 0 ? null : {
-      element: t.element,
-      direction: t.direction,
-      nodeId: t.nodeId
+  getPort(t) {
+    const e = this.graphStore.getPort(t);
+    return e === void 0 ? null : {
+      element: e.element,
+      direction: e.payload.direction,
+      nodeId: e.nodeId
     };
   }
   getAllPortIds() {
     return this.graphStore.getAllPortIds();
   }
-  getNodePortIds(e) {
-    return this.graphStore.getNodePortIds(e) ?? null;
+  getNodePortIds(t) {
+    return this.graphStore.getNodePortIds(t) ?? null;
   }
-  getElementPortIds(e) {
-    return [...this.graphStore.getElementPortIds(e)];
-  }
-  /**
-   * @deprecated
-   * use getElementPortIds instead
-   */
-  getElementPortsIds(e) {
-    return this.getElementPortIds(e);
+  getElementPortIds(t) {
+    return [...this.graphStore.getElementPortIds(t)];
   }
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
-  getEdge(e) {
-    const t = this.graphStore.getEdge(e);
-    return t === void 0 ? null : {
-      from: t.from,
-      to: t.to,
-      priority: t.priority,
-      shape: t.shape
+  getEdge(t) {
+    const e = this.graphStore.getEdge(t);
+    if (e === void 0)
+      return null;
+    const s = e.payload;
+    return {
+      from: e.from,
+      to: e.to,
+      priority: s.priority,
+      shape: s.shape
     };
   }
-  getPortIncomingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
+  getPortIncomingEdgeIds(t) {
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(t);
   }
-  getPortOutgoingEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(e);
+  getPortOutgoingEdgeIds(t) {
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(t);
   }
-  /**
-   * @deprecated
-   * use getPortOutgoingEdgeIds instead
-   */
-  getPortOutcomingEdgeIds(e) {
-    return this.getPortOutgoingEdgeIds(e);
-  }
-  getPortCycleEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
+  getPortCycleEdgeIds(t) {
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(t);
   }
-  getPortAdjacentEdgeIds(e) {
-    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
+  getPortAdjacentEdgeIds(t) {
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(t);
   }
-  getNodeIncomingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
+  getNodeIncomingEdgeIds(t) {
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(t);
   }
-  getNodeOutgoingEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(e);
-  }
-  /**
-   * @deprecated
-   * use getNodeOutgoingEdgeIds instead
-   */
-  getNodeOutcomingEdgeIds(e) {
-    return this.getNodeOutgoingEdgeIds(e);
+  getNodeOutgoingEdgeIds(t) {
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(t);
   }
-  getNodeCycleEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
+  getNodeCycleEdgeIds(t) {
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(t);
   }
-  getNodeAdjacentEdgeIds(e) {
-    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
+  getNodeAdjacentEdgeIds(t) {
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
   }
 }
 class z {
-  constructor(e) {
+  constructor(t) {
     o(this, "counter", 0);
-    this.checkExists = e;
+    this.checkExists = t;
   }
-  create(e) {
-    if (e !== void 0)
-      return e;
+  create(t) {
+    if (t !== void 0)
+      return t;
     for (; this.checkExists(this.counter); )
       this.counter++;
     return this.counter;
@@ -365,11 +341,11 @@ class z {
 class S extends Error {
   constructor() {
     super(...arguments);
-    o(this, "name", "HtmlGraphError");
+    o(this, "name", "CanvasError");
   }
 }
-class fe {
-  constructor(e, t, s, i, n) {
+class ft {
+  constructor(t, e, s, i) {
     /**
      * provides api for accessing model of rendered graph
      */
@@ -379,54 +355,54 @@ class fe {
      */
     o(this, "viewport");
     o(this, "nodeIdGenerator", new z(
-      (e) => this.graph.getNode(e) !== null
+      (t) => this.graph.getNode(t) !== null
     ));
     o(this, "portIdGenerator", new z(
-      (e) => this.graph.getPort(e) !== null
+      (t) => this.graph.getPort(t) !== null
     ));
     o(this, "edgeIdGenerator", new z(
-      (e) => this.graph.getEdge(e) !== null
+      (t) => this.graph.getEdge(t) !== null
     ));
-    o(this, "onAfterNodeAdded", (e) => {
-      this.htmlView.attachNode(e);
+    o(this, "onAfterNodeAdded", (t) => {
+      this.htmlView.attachNode(t);
     });
-    o(this, "onAfterNodeUpdated", (e) => {
-      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((s) => {
+    o(this, "onAfterNodeUpdated", (t) => {
+      this.htmlView.updateNodePosition(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((s) => {
         this.htmlView.renderEdge(s);
       });
     });
-    o(this, "onAfterNodePriorityUpdated", (e) => {
-      this.htmlView.updateNodePriority(e);
+    o(this, "onAfterNodePriorityUpdated", (t) => {
+      this.htmlView.updateNodePriority(t);
     });
-    o(this, "onBeforeNodeRemoved", (e) => {
-      this.graphStore.getNodePortIds(e).forEach((t) => {
-        this.unmarkPort(t);
-      }), this.htmlView.detachNode(e);
+    o(this, "onBeforeNodeRemoved", (t) => {
+      this.graphStore.getNodePortIds(t).forEach((e) => {
+        this.unmarkPort(e);
+      }), this.htmlView.detachNode(t);
     });
-    o(this, "onAfterPortUpdated", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((s) => {
+    o(this, "onAfterPortUpdated", (t) => {
+      this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
         this.htmlView.renderEdge(s);
       });
     });
-    o(this, "onBeforePortUnmarked", (e) => {
-      this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
-        this.removeEdge(t);
+    o(this, "onBeforePortUnmarked", (t) => {
+      this.graphStore.getPortAdjacentEdgeIds(t).forEach((e) => {
+        this.removeEdge(e);
       });
     });
-    o(this, "onAfterEdgeAdded", (e) => {
-      this.htmlView.attachEdge(e);
+    o(this, "onAfterEdgeAdded", (t) => {
+      this.htmlView.attachEdge(t);
     });
-    o(this, "onAfterEdgeShapeUpdated", (e) => {
-      this.htmlView.updateEdgeShape(e);
+    o(this, "onAfterEdgeShapeUpdated", (t) => {
+      this.htmlView.updateEdgeShape(t);
     });
-    o(this, "onAfterEdgeUpdated", (e) => {
-      this.htmlView.renderEdge(e);
+    o(this, "onAfterEdgeUpdated", (t) => {
+      this.htmlView.renderEdge(t);
     });
-    o(this, "onAfterEdgePriorityUpdated", (e) => {
-      this.htmlView.updateEdgePriority(e);
+    o(this, "onAfterEdgePriorityUpdated", (t) => {
+      this.htmlView.updateEdgePriority(t);
     });
-    o(this, "onBeforeEdgeRemoved", (e) => {
-      this.htmlView.detachEdge(e);
+    o(this, "onBeforeEdgeRemoved", (t) => {
+      this.htmlView.detachEdge(t);
     });
     o(this, "onBeforeClear", () => {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
@@ -437,7 +413,7 @@ class fe {
      * emits event just before destruction of canvas
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Ue(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.graphStore = t, this.viewportStore = e, this.htmlView = s, this.params = i, this.graph = new Wt(this.graphStore), this.viewport = new Ut(this.viewportStore), 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
@@ -448,27 +424,27 @@ class fe {
   /**
    * adds new node
    */
-  addNode(e) {
-    const t = this.nodeIdGenerator.create(e.id);
-    if (this.graph.getNode(t) !== null)
+  addNode(t) {
+    const e = this.nodeIdGenerator.create(t.id);
+    if (this.graphStore.getNode(e) !== void 0)
       throw new S("failed to add node with existing id");
-    if (this.graphStore.getElementNodeId(e.element) !== void 0)
+    if (this.graphStore.getElementNodeId(t.element) !== void 0)
       throw new S(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
-      id: t,
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn ?? this.params.nodes.centerFn,
-      priority: e.priority ?? this.params.nodes.priorityFn()
-    }), e.ports !== void 0)
-      for (const s of e.ports)
+      id: e,
+      element: t.element,
+      x: t.x,
+      y: t.y,
+      centerFn: t.centerFn ?? this.params.nodes.centerFn,
+      priority: t.priority ?? this.params.nodes.priorityFn()
+    }), t.ports !== void 0)
+      for (const s of t.ports)
         this.markPort({
           id: s.id,
           element: s.element,
-          nodeId: t,
+          nodeId: e,
           direction: s.direction
         });
     return this;
@@ -476,100 +452,100 @@ class fe {
   /**
    * updates node parameters
    */
-  updateNode(e, t) {
-    if (this.graph.getNode(e) === null)
+  updateNode(t, e) {
+    if (this.graphStore.getNode(t) === void 0)
       throw new S("failed to update non existing node");
-    return this.graphStore.updateNode(e, t ?? {}), this;
+    return this.graphStore.updateNode(t, e ?? {}), this;
   }
   /**
    * removes specified node
    * all the ports of node get unmarked
    * all the edges adjacent to node get removed
    */
-  removeNode(e) {
-    if (this.graph.getNode(e) === null)
+  removeNode(t) {
+    if (this.graphStore.getNode(t) === void 0)
       throw new S("failed to remove non existing node");
-    return this.graphStore.removeNode(e), this;
+    return this.graphStore.removeNode(t), this;
   }
   /**
    * marks specified element as a port for specified node
    */
-  markPort(e) {
-    const t = this.portIdGenerator.create(e.id);
-    if (this.graph.getPort(t) !== null)
+  markPort(t) {
+    const e = this.portIdGenerator.create(t.id);
+    if (this.graphStore.getPort(e) !== void 0)
       throw new S("failed to add port with existing id");
-    if (this.graph.getNode(e.nodeId) === null)
+    if (this.graphStore.getNode(t.nodeId) === void 0)
       throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
-      id: t,
-      element: e.element,
-      nodeId: e.nodeId,
-      direction: e.direction ?? this.params.ports.direction
+      id: e,
+      element: t.element,
+      nodeId: t.nodeId,
+      direction: t.direction ?? this.params.ports.direction
     }), this;
   }
   /**
    * updates port and edges attached to it
    */
-  updatePort(e, t) {
-    if (this.graph.getPort(e) === null)
+  updatePort(t, e) {
+    if (this.graphStore.getPort(t) === void 0)
       throw new S("failed to update nonexistent port");
-    return this.graphStore.updatePort(e, t ?? {}), this;
+    return this.graphStore.updatePort(t, e ?? {}), this;
   }
   /**
    * unmarks specified port
    * all the edges adjacent to the port get removed
    */
-  unmarkPort(e) {
-    if (this.graph.getPort(e) === null)
+  unmarkPort(t) {
+    if (this.graphStore.getPort(t) === void 0)
       throw new S("failed to unmark non existing port");
-    return this.graphStore.removePort(e), this;
+    return this.graphStore.removePort(t), this;
   }
   /**
    * adds new edge
    */
-  addEdge(e) {
-    const t = this.edgeIdGenerator.create(e.id);
-    if (this.graph.getEdge(t) !== null)
+  addEdge(t) {
+    const e = this.edgeIdGenerator.create(t.id);
+    if (this.graphStore.getEdge(e) !== void 0)
       throw new S("failed to add edge with existing id");
-    if (this.graph.getPort(e.from) === null)
+    if (this.graphStore.getPort(t.from) === void 0)
       throw new S("failed to add edge from nonexistent port");
-    if (this.graph.getPort(e.to) === null)
+    if (this.graphStore.getPort(t.to) === void 0)
       throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
-      id: t,
-      from: e.from,
-      to: e.to,
-      shape: e.shape ?? this.params.edges.shapeFactory(t),
-      priority: e.priority ?? this.params.edges.priorityFn()
+      id: e,
+      from: t.from,
+      to: t.to,
+      shape: t.shape ?? this.params.edges.shapeFactory(e),
+      priority: t.priority ?? this.params.edges.priorityFn()
     }), this;
   }
   /**
    * updates specified edge
    */
-  updateEdge(e, t) {
-    if (this.graph.getEdge(e) === null)
+  updateEdge(t, e) {
+    if (this.graphStore.getEdge(t) === void 0)
       throw new S("failed to update nonexistent edge");
-    return this.graphStore.updateEdge(e, t ?? {}), this;
+    return this.graphStore.updateEdge(t, e ?? {}), this;
   }
   /**
    * removes specified edge
    */
-  removeEdge(e) {
-    if (this.graph.getEdge(e) === null)
+  removeEdge(t) {
+    if (this.graphStore.getEdge(t) === void 0)
       throw new S("failed to remove nonexistent edge");
-    return this.graphStore.removeEdge(e), this;
+    return this.graphStore.removeEdge(t), this;
   }
   /**
    * applies transformation for viewport matrix
    */
-  patchViewportMatrix(e) {
-    return this.viewportStore.patchViewportMatrix(e), this;
+  patchViewportMatrix(t) {
+    return this.viewportStore.patchViewportMatrix(t), this;
   }
   /**
    * applies transformation for content matrix
    */
-  patchContentMatrix(e) {
-    return this.viewportStore.patchContentMatrix(e), this;
+  patchContentMatrix(t) {
+    return this.viewportStore.patchContentMatrix(t), this;
   }
   /**
    * clears canvas from nodes and edges
@@ -592,47 +568,47 @@ class fe {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class Be {
+class $t {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
   }
-  addRecord(e, t) {
-    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);
+  addRecord(t, e) {
+    const s = this.singleToMultiMap.get(t);
+    s === void 0 ? this.singleToMultiMap.set(t, /* @__PURE__ */ new Set([e])) : s.add(e), this.multiToSingleMap.set(e, t);
   }
-  getMultiBySingle(e) {
-    const t = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
-    return Array.from(t.values());
+  getMultiBySingle(t) {
+    const e = this.singleToMultiMap.get(t) ?? /* @__PURE__ */ new Set();
+    return Array.from(e.values());
   }
-  removeByMulti(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);
+  removeByMulti(t) {
+    const e = this.multiToSingleMap.get(t), s = this.singleToMultiMap.get(e);
+    s.delete(t), s.size === 0 && this.singleToMultiMap.delete(e), this.multiToSingleMap.delete(t);
   }
-  getByMulti(e) {
-    return this.multiToSingleMap.get(e);
+  getByMulti(t) {
+    return this.multiToSingleMap.get(t);
   }
-  removeBySingle(e) {
-    this.singleToMultiMap.get(e).forEach((s) => {
+  removeBySingle(t) {
+    this.singleToMultiMap.get(t).forEach((s) => {
       this.multiToSingleMap.delete(s);
-    }), this.singleToMultiMap.delete(e);
+    }), this.singleToMultiMap.delete(t);
   }
   clear() {
     this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
   }
-  forEachSingle(e) {
-    this.singleToMultiMap.forEach((t, s) => {
-      e(s);
+  forEachSingle(t) {
+    this.singleToMultiMap.forEach((e, s) => {
+      t(s);
     });
   }
-  hasSingle(e) {
-    return this.singleToMultiMap.get(e) !== void 0;
+  hasSingle(t) {
+    return this.singleToMultiMap.get(t) !== void 0;
   }
-  hasMulti(e) {
-    return this.multiToSingleMap.get(e) !== void 0;
+  hasMulti(t) {
+    return this.multiToSingleMap.get(t) !== void 0;
   }
 }
-class me {
+class yt {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -641,7 +617,7 @@ class me {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new Be());
+    o(this, "elementPorts", new $t());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -670,172 +646,172 @@ class me {
     o(this, "onBeforeClear");
     [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
   }
-  addNode(e) {
-    const t = /* @__PURE__ */ new Map(), s = {
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn,
-      priority: e.priority,
-      ports: t
+  addNode(t) {
+    const e = /* @__PURE__ */ new Map(), s = {
+      element: t.element,
+      payload: {
+        x: t.x,
+        y: t.y,
+        centerFn: t.centerFn,
+        priority: t.priority
+      },
+      ports: e
     };
-    this.nodes.set(e.id, s), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
+    this.nodes.set(t.id, s), this.nodesElementsMap.set(t.element, t.id), this.afterNodeAddedEmitter.emit(t.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
   }
-  getNode(e) {
-    return this.nodes.get(e);
+  getNode(t) {
+    return this.nodes.get(t);
   }
-  getElementNodeId(e) {
-    return this.nodesElementsMap.get(e);
+  getElementNodeId(t) {
+    return this.nodesElementsMap.get(t);
   }
-  updateNode(e, t) {
-    const s = this.nodes.get(e);
-    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);
+  updateNode(t, e) {
+    const s = this.nodes.get(t).payload;
+    s.x = e.x ?? s.x, s.y = e.y ?? s.y, s.centerFn = e.centerFn ?? s.centerFn, e.priority !== void 0 && (s.priority = e.priority, this.afterNodePriorityUpdatedEmitter.emit(t)), this.afterNodeUpdatedEmitter.emit(t);
   }
-  removeNode(e) {
-    this.beforeNodeRemovedEmitter.emit(e);
-    const t = this.nodes.get(e);
-    this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
+  removeNode(t) {
+    this.beforeNodeRemovedEmitter.emit(t);
+    const e = this.nodes.get(t);
+    this.nodesElementsMap.delete(e.element), this.nodes.delete(t);
   }
-  addPort(e) {
-    this.ports.set(e.id, {
-      element: e.element,
-      direction: e.direction,
-      nodeId: e.nodeId
-    }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
+  addPort(t) {
+    this.ports.set(t.id, {
+      element: t.element,
+      payload: {
+        direction: t.direction
+      },
+      nodeId: t.nodeId
+    }), this.elementPorts.addRecord(t.element, t.id), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element), this.afterPortAddedEmitter.emit(t.id);
   }
-  getPort(e) {
-    return this.ports.get(e);
+  getPort(t) {
+    return this.ports.get(t);
   }
-  updatePort(e, t) {
-    const s = this.ports.get(e);
-    s.direction = t.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(e);
+  updatePort(t, e) {
+    const s = this.ports.get(t).payload;
+    s.direction = e.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(t);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getElementPortIds(e) {
-    return this.elementPorts.getMultiBySingle(e);
+  getElementPortIds(t) {
+    return this.elementPorts.getMultiBySingle(t);
   }
-  getNodePortIds(e) {
-    const t = this.nodes.get(e);
-    if (t !== void 0)
-      return Array.from(t.ports.keys());
-  }
-  removePort(e) {
-    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);
-  }
-  addEdge(e) {
-    this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
-  }
-  updateEdge(e, t) {
-    if (t.from !== void 0 || t.to !== void 0) {
-      const i = this.edges.get(e);
-      this.removeEdgeInternal(e), this.addEdgeInternal({
-        id: e,
-        from: t.from ?? i.from,
-        to: t.to ?? i.to,
-        shape: i.shape,
-        priority: i.priority
+  getNodePortIds(t) {
+    const e = this.nodes.get(t);
+    if (e !== void 0)
+      return Array.from(e.ports.keys());
+  }
+  removePort(t) {
+    const e = this.ports.get(t).nodeId;
+    this.beforePortRemovedEmitter.emit(t), this.nodes.get(e).ports.delete(t), this.ports.delete(t), this.elementPorts.removeByMulti(t);
+  }
+  addEdge(t) {
+    this.addEdgeInternal(t), this.afterEdgeAddedEmitter.emit(t.id);
+  }
+  updateEdge(t, e) {
+    if (e.from !== void 0 || e.to !== void 0) {
+      const i = this.edges.get(t), n = i.payload;
+      this.removeEdgeInternal(t), this.addEdgeInternal({
+        id: t,
+        from: e.from ?? i.from,
+        to: e.to ?? i.to,
+        shape: n.shape,
+        priority: n.priority
       });
     }
-    const s = this.edges.get(e);
-    t.shape !== void 0 && (s.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (s.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
+    const s = this.edges.get(t);
+    e.shape !== void 0 && (s.payload.shape = e.shape, this.afterEdgeShapeUpdatedEmitter.emit(t)), e.priority !== void 0 && (s.payload.priority = e.priority, this.afterEdgePriorityUpdatedEmitter.emit(t)), this.afterEdgeUpdatedEmitter.emit(t);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
   }
-  getEdge(e) {
-    return this.edges.get(e);
+  getEdge(t) {
+    return this.edges.get(t);
   }
-  removeEdge(e) {
-    this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
+  removeEdge(t) {
+    this.beforeEdgeRemovedEmitter.emit(t), this.removeEdgeInternal(t);
   }
   clear() {
     this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
-  getPortIncomingEdgeIds(e) {
-    return Array.from(this.incomingEdges.get(e));
+  getPortIncomingEdgeIds(t) {
+    return Array.from(this.incomingEdges.get(t));
   }
-  getPortOutgoingEdgeIds(e) {
-    return Array.from(this.outcomingEdges.get(e));
+  getPortOutgoingEdgeIds(t) {
+    return Array.from(this.outcomingEdges.get(t));
   }
-  getPortCycleEdgeIds(e) {
-    return Array.from(this.cycleEdges.get(e));
+  getPortCycleEdgeIds(t) {
+    return Array.from(this.cycleEdges.get(t));
   }
-  getPortAdjacentEdgeIds(e) {
+  getPortAdjacentEdgeIds(t) {
     return [
-      ...this.getPortIncomingEdgeIds(e),
-      ...this.getPortOutgoingEdgeIds(e),
-      ...this.getPortCycleEdgeIds(e)
+      ...this.getPortIncomingEdgeIds(t),
+      ...this.getPortOutgoingEdgeIds(t),
+      ...this.getPortCycleEdgeIds(t)
     ];
   }
-  getNodeIncomingEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys());
+  getNodeIncomingEdgeIds(t) {
+    const e = Array.from(this.nodes.get(t).ports.keys());
     let s = [];
-    return t.forEach((i) => {
+    return e.forEach((i) => {
       s = [...s, ...this.getPortIncomingEdgeIds(i)];
     }), s;
   }
-  getNodeOutgoingEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys());
+  getNodeOutgoingEdgeIds(t) {
+    const e = Array.from(this.nodes.get(t).ports.keys());
     let s = [];
-    return t.forEach((i) => {
+    return e.forEach((i) => {
       s = [...s, ...this.getPortOutgoingEdgeIds(i)];
     }), s;
   }
-  getNodeCycleEdgeIds(e) {
-    const t = Array.from(this.nodes.get(e).ports.keys());
+  getNodeCycleEdgeIds(t) {
+    const e = Array.from(this.nodes.get(t).ports.keys());
     let s = [];
-    return t.forEach((i) => {
+    return e.forEach((i) => {
       s = [...s, ...this.getPortCycleEdgeIds(i)];
     }), s;
   }
-  getNodeAdjacentEdgeIds(e) {
+  getNodeAdjacentEdgeIds(t) {
     return [
-      ...this.getNodeIncomingEdgeIds(e),
-      ...this.getNodeOutgoingEdgeIds(e),
-      ...this.getNodeCycleEdgeIds(e)
+      ...this.getNodeIncomingEdgeIds(t),
+      ...this.getNodeOutgoingEdgeIds(t),
+      ...this.getNodeCycleEdgeIds(t)
     ];
   }
-  addEdgeInternal(e) {
-    this.edges.set(e.id, {
-      from: e.from,
-      to: e.to,
-      shape: e.shape,
-      priority: e.priority
-    }), e.from !== e.to ? (this.outcomingEdges.get(e.from).add(e.id), this.incomingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
+  addEdgeInternal(t) {
+    this.edges.set(t.id, {
+      from: t.from,
+      to: t.to,
+      payload: {
+        shape: t.shape,
+        priority: t.priority
+      }
+    }), t.from !== t.to ? (this.outcomingEdges.get(t.from).add(t.id), this.incomingEdges.get(t.to).add(t.id)) : this.cycleEdges.get(t.from).add(t.id);
   }
-  removeEdgeInternal(e) {
-    const t = this.edges.get(e), s = t.from, i = t.to;
-    this.cycleEdges.get(s).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
+  removeEdgeInternal(t) {
+    const e = this.edges.get(t), s = e.from, i = e.to;
+    this.cycleEdges.get(s).delete(t), this.cycleEdges.get(i).delete(t), this.incomingEdges.get(s).delete(t), this.incomingEdges.get(i).delete(t), this.outcomingEdges.get(s).delete(t), this.outcomingEdges.get(i).delete(t), this.edges.delete(t);
   }
 }
-const ie = (r) => ({
+const it = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ne = {
+}), nt = {
   scale: 1,
   x: 0,
   y: 0
 };
-class $e {
+class Bt {
   constructor() {
-    o(this, "viewportMatrix", ne);
-    o(this, "contentMatrix", ne);
+    o(this, "viewportMatrix", nt);
+    o(this, "contentMatrix", nt);
     o(this, "afterUpdateEmitter");
     o(this, "onAfterUpdated");
-    o(this, "beforeUpdateEmitter");
-    /**
-     * @deprecated
-     * do not use
-     */
-    o(this, "onBeforeUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
+    [this.afterUpdateEmitter, this.onAfterUpdated] = A();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -843,108 +819,108 @@ class $e {
   getContentMatrix() {
     return this.contentMatrix;
   }
-  patchViewportMatrix(e) {
-    this.beforeUpdateEmitter.emit(), this.viewportMatrix = {
-      scale: e.scale ?? this.viewportMatrix.scale,
-      x: e.x ?? this.viewportMatrix.x,
-      y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = ie(this.viewportMatrix), this.afterUpdateEmitter.emit();
+  patchViewportMatrix(t) {
+    this.viewportMatrix = {
+      scale: t.scale ?? this.viewportMatrix.scale,
+      x: t.x ?? this.viewportMatrix.x,
+      y: t.y ?? this.viewportMatrix.y
+    }, this.contentMatrix = it(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
-  patchContentMatrix(e) {
-    this.beforeUpdateEmitter.emit(), this.contentMatrix = {
-      scale: e.scale ?? this.contentMatrix.scale,
-      x: e.x ?? this.contentMatrix.x,
-      y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
+  patchContentMatrix(t) {
+    this.contentMatrix = {
+      scale: t.scale ?? this.contentMatrix.scale,
+      x: t.x ?? this.contentMatrix.x,
+      y: t.y ?? this.contentMatrix.y
+    }, this.viewportMatrix = it(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
 class j {
-  constructor(e) {
+  constructor(t) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
-    o(this, "onAfterNodeAdded", (e) => {
-      const t = this.canvas.graph.getNode(e);
-      this.elementToNodeId.set(t.element, e), this.nodesResizeObserver.observe(t.element);
+    o(this, "onAfterNodeAdded", (t) => {
+      const e = this.canvas.graph.getNode(t);
+      this.elementToNodeId.set(e.element, t), this.nodesResizeObserver.observe(e.element);
     });
-    o(this, "onBeforeNodeRemoved", (e) => {
-      const t = this.canvas.graph.getNode(e);
-      this.elementToNodeId.delete(t.element), this.nodesResizeObserver.unobserve(t.element);
+    o(this, "onBeforeNodeRemoved", (t) => {
+      const e = this.canvas.graph.getNode(t);
+      this.elementToNodeId.delete(e.element), this.nodesResizeObserver.unobserve(e.element);
     });
     o(this, "onBeforeClear", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
-    this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
-      t.forEach((s) => {
+    this.canvas = t, this.nodesResizeObserver = new ResizeObserver((e) => {
+      e.forEach((s) => {
         const i = s.target;
         this.handleNodeResize(i);
       });
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
-  static configure(e) {
-    new j(e);
+  static configure(t) {
+    new j(t);
   }
-  handleNodeResize(e) {
-    const t = this.elementToNodeId.get(e);
-    this.canvas.updateNode(t);
+  handleNodeResize(t) {
+    const e = this.elementToNodeId.get(t);
+    this.canvas.updateNode(e);
   }
 }
-const Fe = (r, e, t) => {
+const Ft = (r, t, e) => {
   const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
-  return e >= s && e <= s + n && t >= i && t <= i + a;
-}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (r, e) => {
-  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
+  return t >= s && t <= s + n && e >= i && e <= i + a;
+}, Ot = (r, t, e) => t >= 0 && t <= r.innerWidth && e >= 0 && e <= r.innerHeight, R = (r, t, e, s) => Ft(t, e, s) && Ot(r, e, s), U = (r, t) => {
+  t !== null ? r.style.cursor = t : r.style.removeProperty("cursor");
 }, W = (r) => {
-  const e = document.createElement("div");
+  const t = document.createElement("div");
   return {
     id: r.overlayId,
-    element: e,
+    element: t,
     x: r.portCoords.x,
     y: r.portCoords.y,
     ports: [
       {
         id: r.overlayId,
-        element: e,
+        element: t,
         direction: r.portDirection
       }
     ]
   };
-}, ke = (r, e) => {
-  let t = e, s = null;
-  for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
-    t = t.parentElement;
+}, kt = (r, t) => {
+  let e = t, s = null;
+  for (; e !== null && (s = r.getElementPortIds(e)[0] ?? null, s === null); )
+    e = e.parentElement;
   return s;
-}, ye = (r, e) => {
-  const t = document.elementsFromPoint(e.x, e.y);
-  for (const s of t) {
-    const i = ke(r, s);
+}, mt = (r, t) => {
+  const e = document.elementsFromPoint(t.x, t.y);
+  for (const s of e) {
+    const i = kt(r, s);
     if (i !== null)
       return i;
   }
   return null;
 };
 var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
-const ve = (r, e) => ({
+const vt = (r, t) => ({
   x: r / 2,
-  y: e / 2
-}), m = (r, e, t) => ({
-  x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
-  y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
+  y: t / 2
+}), y = (r, t, e) => ({
+  x: t.x * r.x - t.y * r.y + ((1 - t.x) * e.x + t.y * e.y),
+  y: t.y * r.x + t.x * r.y + ((1 - t.x) * e.y - t.y * e.x)
 }), u = {
   x: 0,
   y: 0
 };
-class ze {
-  constructor(e) {
+class zt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = m(
+    this.params = t;
+    const e = this.params.to;
+    this.midpoint = { x: e.x / 2, y: e.y / 2 };
+    const s = y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ), i = m(
+    ), i = y(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -958,34 +934,34 @@ class ze {
     this.path = `${d}${h}${c}`;
   }
 }
-const $ = (r, e, t, s) => ({
-  x: e * r.x + (1 - e) / 2 * s.x,
-  y: t * r.y + (1 - t) / 2 * s.y
+const B = (r, t, e, s) => ({
+  x: t * r.x + (1 - t) / 2 * s.x,
+  y: e * r.y + (1 - e) / 2 * s.y
 });
-class Xe {
-  constructor(e) {
+class Xt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = 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(
+    ) : this.params.to, i = 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 = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
     ), l = {
       x: c.x + h,
       y: c.y + d
-    }, g = m(
+    }, g = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -995,7 +971,7 @@ class Xe {
     }, f = {
       x: (l.x + w.x) / 2,
       y: (l.y + w.y) / 2
-    }, y = {
+    }, m = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
@@ -1009,57 +985,57 @@ class Xe {
       y: g.y + d
     };
     this.path = [
-      `M ${t.x} ${t.y}`,
+      `M ${e.x} ${e.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
+      `C ${m.x} ${m.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
       `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
       `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = $(f, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = B(f, t.flipX, t.flipY, t.to);
   }
 }
-const L = (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 M = (r, t) => {
+  const e = [];
+  if (r.length > 0 && e.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && e.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const s = r.length - 1;
     let i = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, l = 0, g = 0;
-      const w = d > 0, f = d < s, y = w && f;
+      const w = d > 0, f = d < s, m = w && f;
       if (w && (c = -i, l = -n, g = a), f) {
         const V = r[d + 1];
         i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const E = a !== 0 ? Math.min((y ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = y ? { x: h.x + i * E, y: h.y + n * E } : h, T = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = y ? { x: h.x + c * T, y: h.y + l * T } : h;
-      d > 0 && t.push(`L ${N.x} ${N.y}`), y && t.push(
+      const E = a !== 0 ? Math.min((m ? t : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = m ? { x: h.x + i * E, y: h.y + n * E } : h, b = g !== 0 ? Math.min((m ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = m ? { x: h.x + c * b, y: h.y + l * b } : h;
+      d > 0 && e.push(`L ${D.x} ${D.y}`), m && e.push(
         `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
       );
     });
   }
-  return t.join(" ");
+  return e.join(" ");
 };
-class Ye {
-  constructor(e) {
+class Yt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.to;
+    this.midpoint = { x: e.x / 2, y: e.y / 2 };
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, i = this.params.hasTargetArrow ? m(
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
       { x: a, y: u.y },
       this.params.sourceDirection,
       u
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1069,97 +1045,97 @@ class Ye {
     }, w = { x: g.x, y: l }, f = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, y = { x: f.x, y: l };
-    this.path = L(
-      [s, h, g, w, y, f, d, i],
+    }, m = { x: f.x, y: l };
+    this.path = M(
+      [s, h, g, w, m, f, d, i],
       this.params.roundness
     );
   }
 }
-class He {
-  constructor(e) {
+class Ht {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
-    ), 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, l = { x: n.x + d, y: n.y + c }, g = m(
+    ), 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, l = { x: n.x + d, y: n.y + c }, g = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     ), w = { x: g.x + d, y: g.y + c }, f = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 };
-    this.midpoint = $(f, e.flipX, e.flipY, e.to), this.path = L(
-      [t, n, l, w, g, s],
+    this.midpoint = B(f, t.flipX, t.flipY, t.to), this.path = M(
+      [e, n, l, w, g, s],
       this.params.roundness
     );
   }
 }
-class je {
-  constructor(e) {
+class jt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.to;
+    this.midpoint = { x: e.x / 2, y: e.y / 2 };
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, i = this.params.hasTargetArrow ? m(
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = y(
       { x: n, y: u.y },
       this.params.sourceDirection,
       u
-    ), h = m(
+    ), h = y(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
     );
-    this.path = L([s, a, h, i], this.params.roundness);
+    this.path = M([s, a, h, i], this.params.roundness);
   }
 }
-class Ge {
-  constructor(e) {
+class Gt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.to;
-    this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.to;
+    this.midpoint = { x: e.x / 2, y: e.y / 2 };
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, i = this.params.hasTargetArrow ? m(
+    ) : u, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, a = n - this.params.roundness, h = y(
       { x: a, y: u.y },
       this.params.sourceDirection,
       u
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - a, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1169,19 +1145,19 @@ class Ge {
     }, w = { x: l, y: g.y }, f = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, y = { x: l, y: f.y };
-    this.path = L(
-      [s, h, g, w, y, f, d, i],
+    }, m = { x: l, y: f.y };
+    this.path = M(
+      [s, h, g, w, m, f, d, i],
       this.params.roundness
     );
   }
 }
 class G {
-  constructor(e) {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + t, n = i + 2 * s, h = [
+    this.params = t;
+    const e = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + e, n = i + 2 * s, h = [
       { x: this.params.arrowLength, y: u.y },
       { x: i, y: u.y },
       { x: i, y: this.params.side },
@@ -1191,40 +1167,40 @@ class G {
       { x: i, y: u.y },
       { x: this.params.arrowLength, y: u.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, u)
+      (c) => y(c, this.params.sourceDirection, u)
     ), d = `M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${L(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${M(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class Ke {
-  constructor(e) {
+class Kt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.smallRadius, s = this.params.radius, i = t + s, n = t * s / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
+    this.params = t;
+    const e = this.params.smallRadius, s = this.params.radius, i = e + s, n = e * s / i, a = Math.sqrt(i * i - e * e), h = a * e / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
       { x: this.params.arrowLength, y: u.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (y) => m(y, this.params.sourceDirection, u)
+      (m) => y(m, this.params.sourceDirection, u)
     ), w = [
       `M ${g[0].x} ${g[0].y}`,
-      `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
+      `A ${e} ${e} 0 0 1 ${g[1].x} ${g[1].y}`,
       `A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,
-      `A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`
+      `A ${e} ${e} 0 0 1 ${g[0].x} ${g[0].y}`
     ].join(" "), f = `M 0 0 L ${g[0].x} ${g[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${w}`, this.midpoint = g[3];
   }
 }
-class Ze {
-  constructor(e) {
+class Zt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
     o(this, "diagonalDistance");
-    this.params = e;
-    const t = this.params.to;
-    if (this.midpoint = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
+    this.params = t;
+    const e = this.params.to;
+    if (this.midpoint = { x: e.x / 2, y: e.y / 2 }, this.diagonalDistance = Math.sqrt(
       this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
     ), Math.sqrt(
       this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
@@ -1245,35 +1221,35 @@ class Ze {
     });
     this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
   }
-  createDirectLinePoint(e) {
-    const t = e.hasArrow ? this.params.arrowLength : 0, s = e.offset + t, i = e.flip * s / this.diagonalDistance;
+  createDirectLinePoint(t) {
+    const e = t.hasArrow ? this.params.arrowLength : 0, s = t.offset + e, i = t.flip * s / this.diagonalDistance;
     return {
-      x: this.params.to.x * i + e.shift.x,
-      y: this.params.to.y * i + e.shift.y
+      x: this.params.to.x * i + t.shift.x,
+      y: this.params.to.y * i + t.shift.y
     };
   }
 }
-class Je {
-  constructor(e) {
+class Jt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1281,9 +1257,9 @@ class Je {
       x: (n.x + a.x) / 2,
       y: l
     };
-    this.midpoint = $(g, e.flipX, e.flipY, e.to), this.path = L(
+    this.midpoint = B(g, t.flipX, t.flipY, t.to), this.path = M(
       [
-        t,
+        e,
         n,
         { x: n.x, y: l },
         { x: a.x, y: l },
@@ -1294,27 +1270,27 @@ class Je {
     );
   }
 }
-class Qe {
-  constructor(e) {
+class Qt {
+  constructor(t) {
     o(this, "path");
     o(this, "midpoint");
-    this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    this.params = t;
+    const e = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: u.y },
       this.params.sourceDirection,
       u
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1322,9 +1298,9 @@ class Qe {
       x: l,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = $(g, e.flipX, e.flipY, e.to), this.path = L(
+    this.midpoint = B(g, t.flipX, t.flipY, t.to), this.path = M(
       [
-        t,
+        e,
         n,
         { x: l, y: n.y },
         { x: l, y: a.y },
@@ -1335,30 +1311,30 @@ class Qe {
     );
   }
 }
-const Ee = (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`;
+const Et = (r, t) => {
+  r.style.transform = `translate(${t.x}px, ${t.y}px)`, r.style.width = `${Math.max(t.width, 1)}px`, r.style.height = `${Math.max(t.height, 1)}px`;
 }, K = Object.freeze({
   edgeColor: "--edge-color"
-}), Ae = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
-}, B = () => {
+}), At = (r) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t.style.setProperty(K.edgeColor, r), t;
+}, $ = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return r.setAttribute("fill", `var(${K.edgeColor})`), r;
-}, xe = () => {
+}, xt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Se = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, Pe = (r, e) => {
-  const t = {
+}, St = (r) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return t.setAttribute("stroke", `var(${K.edgeColor})`), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "none"), t;
+}, Pt = (r, t) => {
+  const e = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
   }, s = {
-    x: e.x + e.width / 2,
-    y: e.y + e.height / 2
-  }, i = 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;
+    x: t.x + t.width / 2,
+    y: t.y + t.height / 2
+  }, i = Math.min(e.x, s.x), n = Math.min(e.y, s.y), a = Math.abs(s.x - e.x), h = Math.abs(s.y - e.y), d = e.x <= s.x ? 1 : -1, c = e.y <= s.y ? 1 : -1;
   return {
     x: i,
     y: n,
@@ -1367,12 +1343,12 @@ const Ee = (r, e) => {
     flipX: d,
     flipY: c
   };
-}, X = (r, e, t, s) => {
+}, X = (r, t, e, s) => {
   const n = [
     u,
-    { x: t, y: s },
-    { x: t, y: -s }
-  ].map((c) => m(c, r, u)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+    { x: e, y: s },
+    { x: e, y: -s }
+  ].map((c) => y(c, r, u)).map((c) => ({ x: c.x + t.x, y: c.y + t.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
   return `${a} ${h} ${d} Z`;
 }, p = Object.freeze({
   color: "#777777",
@@ -1392,30 +1368,30 @@ const Ee = (r, e) => {
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ae = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+}), at = (r, t, e) => ({ x: t * Math.cos(r), y: e * Math.sin(r) });
 class F {
-  constructor(e) {
+  constructor(t) {
     o(this, "svg");
-    o(this, "group", xe());
+    o(this, "group", xt());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(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));
+    this.params = t, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = At(t.color), this.svg.appendChild(this.group), this.line = St(t.width), this.group.appendChild(this.line), t.hasSourceArrow && (this.sourceArrow = $(), this.group.appendChild(this.sourceArrow)), t.hasTargetArrow && (this.targetArrow = $(), this.group.appendChild(this.targetArrow));
   }
-  render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
-      e.from,
-      e.to
+  render(t) {
+    const { x: e, y: s, width: i, height: n, flipX: a, flipY: h } = Pt(
+      t.from,
+      t.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = ae(
-      e.from.direction,
+    Et(this.svg, { x: e, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = at(
+      t.from.direction,
       a,
       h
-    ), c = ae(
-      e.to.direction,
+    ), c = at(
+      t.to.direction,
       a,
       h
     ), l = {
@@ -1423,15 +1399,15 @@ class F {
       y: n
     };
     let g = c, w = -this.params.arrowLength, f;
-    e.category === R.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : e.category === R.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const y = f(
+    t.category === C.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : t.category === C.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
+    const m = f(
       d,
       c,
       l,
       a,
       h
     );
-    this.line.setAttribute("d", y.path);
+    this.line.setAttribute("d", m.path);
     let v = null;
     this.sourceArrow && (v = X(
       d,
@@ -1446,14 +1422,14 @@ class F {
       w,
       this.params.arrowWidth
     ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: y,
+      edgePath: m,
       sourceArrowPath: v,
       targetArrowPath: E
     });
   }
 }
-class _e {
-  constructor(e) {
+class _t {
+  constructor(t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
@@ -1470,18 +1446,18 @@ class _e {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Ke({
-      sourceDirection: e,
+    o(this, "createCyclePath", (t) => new Kt({
+      sourceDirection: t,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
+    o(this, "createDetourPath", (t, e, s, i, n) => new Xt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1491,18 +1467,18 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new ze({
+    o(this, "createLinePath", (t, e, s) => new zt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? p.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? p.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? p.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? p.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (e == null ? void 0 : e.color) ?? p.color,
-      width: (e == null ? void 0 : e.width) ?? p.width,
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? p.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? p.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? p.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? p.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (t == null ? void 0 : t.color) ?? p.color,
+      width: (t == null ? void 0 : t.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1512,12 +1488,12 @@ class _e {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(e) {
-    this.pathShape.render(e);
+  render(t) {
+    this.pathShape.render(t);
   }
 }
-class qe {
-  constructor(e) {
+class qt {
+  constructor(t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
@@ -1533,8 +1509,8 @@ class qe {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new G({
-      sourceDirection: e,
+    o(this, "createCyclePath", (t) => new G({
+      sourceDirection: t,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -1542,10 +1518,10 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Je({
+    o(this, "createDetourPath", (t, e, s, i, n) => new Jt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1555,10 +1531,10 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new Ye({
+    o(this, "createLinePath", (t, e, s, i) => new Yt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       flipX: i,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1566,15 +1542,15 @@ class qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
+    const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
     this.roundness = Math.min(
-      t,
+      e,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (e == null ? void 0 : e.color) ?? p.color,
-      width: (e == null ? void 0 : e.width) ?? p.width,
+    ), this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (t == null ? void 0 : t.color) ?? p.color,
+      width: (t == null ? void 0 : t.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1584,12 +1560,12 @@ class qe {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(e) {
-    this.pathShape.render(e);
+  render(t) {
+    this.pathShape.render(t);
   }
 }
-class et {
-  constructor(e) {
+class te {
+  constructor(t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
@@ -1606,8 +1582,8 @@ class et {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new G({
-      sourceDirection: e,
+    o(this, "createCyclePath", (t) => new G({
+      sourceDirection: t,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -1615,10 +1591,10 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new He({
+    o(this, "createDetourPath", (t, e, s, i, n) => new Ht({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1629,25 +1605,25 @@ class et {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new je({
+    o(this, "createLinePath", (t, e, s) => new jt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
+    const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
     this.roundness = Math.min(
-      t,
+      e,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? p.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (e == null ? void 0 : e.color) ?? p.color,
-      width: (e == null ? void 0 : e.width) ?? p.width,
+    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? p.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (t == null ? void 0 : t.color) ?? p.color,
+      width: (t == null ? void 0 : t.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1657,12 +1633,12 @@ class et {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(e) {
-    this.pathShape.render(e);
+  render(t) {
+    this.pathShape.render(t);
   }
 }
-class tt {
-  constructor(e) {
+class ee {
+  constructor(t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
@@ -1678,8 +1654,8 @@ class tt {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new G({
-      sourceDirection: e,
+    o(this, "createCyclePath", (t) => new G({
+      sourceDirection: t,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -1687,10 +1663,10 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Qe({
+    o(this, "createDetourPath", (t, e, s, i, n) => new Qt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1700,10 +1676,10 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new Ge({
+    o(this, "createLinePath", (t, e, s, i, n) => new Gt({
       to: s,
-      sourceDirection: e,
-      targetDirection: t,
+      sourceDirection: t,
+      targetDirection: e,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1711,15 +1687,15 @@ class tt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? p.cycleSquareSide;
-    const t = (e == null ? void 0 : e.roundness) ?? p.roundness;
+    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
+    const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
     this.roundness = Math.min(
-      t,
+      e,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (e == null ? void 0 : e.color) ?? p.color,
-      width: (e == null ? void 0 : e.width) ?? p.width,
+    ), this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
+      color: (t == null ? void 0 : t.color) ?? p.color,
+      width: (t == null ? void 0 : t.width) ?? p.width,
       arrowLength: this.arrowLength,
       arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
@@ -1729,18 +1705,18 @@ class tt {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(e) {
-    this.pathShape.render(e);
+  render(t) {
+    this.pathShape.render(t);
   }
 }
-const he = (r) => {
+const ht = (r) => {
   if (r.diagonalDistance === 0)
     return "";
-  const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
-    x: t * e + r.shift.x,
-    y: s * e + r.shift.y
+  const t = r.offset / r.diagonalDistance, e = r.flip * r.to.x, s = r.flip * r.to.y, i = {
+    x: e * t + r.shift.x,
+    y: s * t + r.shift.y
   }, n = {
-    x: t / r.diagonalDistance,
+    x: e / r.diagonalDistance,
     y: s / r.diagonalDistance
   };
   return X(
@@ -1750,10 +1726,10 @@ const he = (r) => {
     r.arrowWidth
   );
 };
-class be {
-  constructor(e) {
+class bt {
+  constructor(t) {
     o(this, "svg");
-    o(this, "group", xe());
+    o(this, "group", xt());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -1765,15 +1741,15 @@ class be {
     o(this, "targetOffset");
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? p.color, this.width = (e == null ? void 0 : e.width) ?? p.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? p.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? p.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? p.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? p.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(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));
+    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (t == null ? void 0 : t.color) ?? p.color, this.width = (t == null ? void 0 : t.width) ?? p.width, this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.sourceOffset = (t == null ? void 0 : t.sourceOffset) ?? p.preOffset, this.targetOffset = (t == null ? void 0 : t.targetOffset) ?? p.preOffset, this.svg = At(this.color), this.svg.appendChild(this.group), this.line = St(this.width), this.group.appendChild(this.line), t != null && t.hasSourceArrow && (this.sourceArrow = $(), this.group.appendChild(this.sourceArrow)), t != null && t.hasTargetArrow && (this.targetArrow = $(), this.group.appendChild(this.targetArrow));
   }
-  render(e) {
-    const { x: t, y: s, width: i, height: n, flipX: a, flipY: h } = Pe(
-      e.from,
-      e.to
+  render(t) {
+    const { x: e, y: s, width: i, height: n, flipX: a, flipY: h } = Pt(
+      t.from,
+      t.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: i, y: n }, c = new Ze({
+    Et(this.svg, { x: e, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: i, y: n }, c = new Zt({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1783,7 +1759,7 @@ class be {
     });
     this.line.setAttribute("d", c.path);
     let l = null;
-    this.sourceArrow && (l = he({
+    this.sourceArrow && (l = ht({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.sourceOffset,
@@ -1793,7 +1769,7 @@ class be {
       arrowLength: this.arrowLength
     }), this.sourceArrow.setAttribute("d", l));
     let g = null;
-    this.targetArrow && (g = he({
+    this.targetArrow && (g = ht({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.targetOffset,
@@ -1808,137 +1784,126 @@ class be {
     });
   }
 }
-const rt = () => {
+const re = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, ot = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, de = (r) => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
+}, oe = (r) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return t.setAttribute("stroke", "transparent"), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "none"), t.setAttribute("stroke-linecap", "round"), t;
+}, dt = (r) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return t.setAttribute("stroke-linejoin", "round"), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "transparent"), t.setAttribute("stroke", "transparent"), t;
 };
-class st extends Error {
-  constructor(e) {
-    super(e), this.name = "InteractiveEdgeError";
+class se extends Error {
+  constructor(t) {
+    super(t), this.name = "InteractiveEdgeError";
   }
 }
-class Te {
-  constructor(e, t) {
+class Tt {
+  constructor(t, e) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", rt());
+    o(this, "handle", re());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Te)
-      throw new st(
+    if (this.baseEdge = t, t instanceof Tt)
+      throw new se(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-    const s = (t == null ? void 0 : t.width) ?? p.interactiveWidth;
-    this.interactiveLine = ot(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = de(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = de(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    const s = (e == null ? void 0 : e.distance) ?? p.interactiveWidth;
+    this.interactiveLine = oe(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = dt(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = dt(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
-  render(e) {
-    this.baseEdge.render(e);
+  render(t) {
+    this.baseEdge.render(t);
   }
 }
-class Dt {
-  constructor(e, t) {
+class Ne {
+  constructor(t, e) {
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
     o(this, "onAfterRender");
     o(this, "svg");
-    /**
-     * @deprecated
-     * use midpointElement instead
-     */
-    o(this, "medianElement");
-    this.baseShape = e, this.midpointElement = t, this.medianElement = this.midpointElement, 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) => {
+    this.baseShape = t, this.midpointElement = e, 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 i = s.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
       this.midpointElement.style.setProperty("transform", n);
     });
   }
-  render(e) {
-    this.baseShape.render(e);
+  render(t) {
+    this.baseShape.render(t);
   }
 }
-const De = (r, e) => {
-  const t = new me(), s = new pe(t, e, r), i = {
+const Dt = (r, t) => {
+  const e = new yt(), s = new pt(e, t, r), i = {
     nodes: {
-      centerFn: ve,
+      centerFn: vt,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new be(),
+      shapeFactory: () => new bt(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
   };
-  return new fe(
-    r,
-    t,
-    e,
-    s,
-    i
-  );
+  return new ft(e, t, s, i);
 };
 class O {
-  constructor(e, t, s, i) {
-    o(this, "onAfterPortMarked", (e) => {
-      const t = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
+  constructor(t, e, s, i) {
+    o(this, "onAfterPortMarked", (t) => {
+      const e = this.canvas.graph.getPort(t);
+      this.canvas.graph.getElementPortIds(e.element).length === 1 && this.hookPortEvents(e.element);
     });
-    o(this, "onBeforePortUnmarked", (e) => {
-      const t = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
+    o(this, "onBeforePortUnmarked", (t) => {
+      const e = this.canvas.graph.getPort(t);
+      this.canvas.graph.getElementPortIds(e.element).length === 1 && this.unhookPortEvents(e.element);
     });
-    o(this, "onPortMouseDown", (e) => {
-      if (!this.params.mouseDownEventVerifier(e))
+    o(this, "onPortMouseDown", (t) => {
+      if (!this.params.mouseDownEventVerifier(t))
         return;
-      const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
+      const e = t.currentTarget, s = this.canvas.graph.getElementPortIds(e)[0];
       this.params.onPortPointerDown(s, {
-        x: e.clientX,
-        y: e.clientY
-      }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        x: t.clientX,
+        y: t.clientY
+      }) && (t.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }));
     });
-    o(this, "onWindowMouseMove", (e) => {
-      if (!C(
+    o(this, "onWindowMouseMove", (t) => {
+      if (!R(
         this.window,
         this.element,
-        e.clientX,
-        e.clientY
+        t.clientX,
+        t.clientY
       )) {
         this.stopMouseDrag();
         return;
       }
-      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
+      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
     });
-    o(this, "onWindowMouseUp", (e) => {
-      this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
+    o(this, "onWindowMouseUp", (t) => {
+      this.params.mouseUpEventVerifier(t) && (this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopMouseDrag());
     });
-    o(this, "onPortTouchStart", (e) => {
-      if (e.touches.length !== 1)
+    o(this, "onPortTouchStart", (t) => {
+      if (t.touches.length !== 1)
         return;
-      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
+      const e = t.touches[0], s = t.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
       this.params.onPortPointerDown(i, {
-        x: t.clientX,
-        y: t.clientY
-      }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        x: e.clientX,
+        y: e.clientY
+      }) && (t.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -1946,46 +1911,46 @@ class O {
         passive: !0
       }));
     });
-    o(this, "onWindowTouchMove", (e) => {
-      const t = e.touches[0];
-      if (!C(
+    o(this, "onWindowTouchMove", (t) => {
+      const e = t.touches[0];
+      if (!R(
         this.window,
         this.element,
-        t.clientX,
-        t.clientY
+        e.clientX,
+        e.clientY
       )) {
         this.stopTouchDrag();
         return;
       }
-      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
+      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
     });
-    o(this, "onWindowTouchFinish", (e) => {
-      const t = e.changedTouches[0];
-      this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
+    o(this, "onWindowTouchFinish", (t) => {
+      const e = t.changedTouches[0];
+      this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopTouchDrag();
     });
     o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllPortIds().forEach((e) => {
-        const t = this.canvas.graph.getPort(e);
-        this.unhookPortEvents(t.element);
+      this.canvas.graph.getAllPortIds().forEach((t) => {
+        const e = this.canvas.graph.getPort(t);
+        this.unhookPortEvents(e.element);
       });
     });
     o(this, "onBeforeDestroy", () => {
       this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, 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 = t, this.element = e, this.window = s, this.params = i, 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, s, i) {
-    new O(e, t, s, i);
+  static configure(t, e, s, i) {
+    new O(t, e, s, i);
   }
-  hookPortEvents(e) {
-    e.addEventListener("mousedown", this.onPortMouseDown, {
+  hookPortEvents(t) {
+    t.addEventListener("mousedown", this.onPortMouseDown, {
       passive: !0
-    }), e.addEventListener("touchstart", this.onPortTouchStart, {
+    }), t.addEventListener("touchstart", this.onPortTouchStart, {
       passive: !0
     });
   }
-  unhookPortEvents(e) {
-    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
+  unhookPortEvents(t) {
+    t.removeEventListener("mousedown", this.onPortMouseDown), t.removeEventListener("touchstart", this.onPortTouchStart);
   }
   stopMouseDrag() {
     this.params.onStopDrag(), this.removeWindowMouseListeners();
@@ -2001,50 +1966,45 @@ class O {
   }
 }
 class Z {
-  constructor(e, t, s, i) {
+  constructor(t, e, s, i) {
     o(this, "grabbedNode", null);
     o(this, "maxNodePriority", 0);
     o(this, "graph");
-    o(this, "onAfterNodeAdded", (e) => {
-      this.updateMaxNodePriority(e);
-      const t = this.graph.getNode(e);
-      t.element.addEventListener("mousedown", this.onMouseDown, {
+    o(this, "onAfterNodeAdded", (t) => {
+      this.updateMaxNodePriority(t);
+      const e = this.graph.getNode(t);
+      e.element.addEventListener("mousedown", this.onMouseDown, {
         passive: !0
-      }), t.element.addEventListener("touchstart", this.onTouchStart, {
+      }), e.element.addEventListener("touchstart", this.onTouchStart, {
         passive: !0
       });
     });
-    o(this, "onAfterNodeUpdated", (e) => {
-      this.updateMaxNodePriority(e);
+    o(this, "onAfterNodeUpdated", (t) => {
+      this.updateMaxNodePriority(t);
     });
-    o(this, "onBeforeNodeRemoved", (e) => {
-      const t = this.graph.getNode(e);
-      t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
+    o(this, "onBeforeNodeRemoved", (t) => {
+      const e = this.graph.getNode(t);
+      e.element.removeEventListener("mousedown", this.onMouseDown), e.element.removeEventListener("touchstart", this.onTouchStart);
     });
     o(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllNodeIds().forEach((e) => {
-        const t = this.canvas.graph.getNode(e);
-        t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
+      this.canvas.graph.getAllNodeIds().forEach((t) => {
+        const e = this.canvas.graph.getNode(t);
+        e.element.removeEventListener("mousedown", this.onMouseDown), e.element.removeEventListener("touchstart", this.onTouchStart);
       }), this.maxNodePriority = 0;
     });
-    o(this, "onMouseDown", (e) => {
-      if (!this.params.mouseDownEventVerifier(e))
+    o(this, "onMouseDown", (t) => {
+      if (!this.params.mouseDownEventVerifier(t))
         return;
-      const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
-      if (!this.params.nodeDragVerifier({
-        nodeId: s,
-        element: i.element,
-        x: i.x,
-        y: i.y
-      }))
+      const e = t.currentTarget, s = this.graph.getElementNodeId(e), i = this.graph.getNode(s);
+      if (!this.params.nodeDragVerifier(s))
         return;
-      e.stopPropagation();
+      t.stopPropagation();
       const a = this.calculateContentPoint({
-        x: e.clientX,
-        y: e.clientY
+        x: t.clientX,
+        y: t.clientY
       });
       this.grabbedNode = {
         nodeId: s,
@@ -2056,11 +2016,11 @@ class Z {
         passive: !0
       });
     });
-    o(this, "onTouchStart", (e) => {
-      if (e.touches.length !== 1)
+    o(this, "onTouchStart", (t) => {
+      if (t.touches.length !== 1)
         return;
-      e.stopPropagation();
-      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
+      t.stopPropagation();
+      const e = t.touches[0], s = t.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
       if (!this.params.nodeDragVerifier({
         nodeId: i,
         element: n.element,
@@ -2069,8 +2029,8 @@ class Z {
       }))
         return;
       const h = this.calculateContentPoint({
-        x: t.clientX,
-        y: t.clientY
+        x: e.clientX,
+        y: e.clientY
       });
       this.grabbedNode = {
         nodeId: i,
@@ -2084,102 +2044,87 @@ class Z {
         passive: !0
       });
     });
-    o(this, "onWindowMouseMove", (e) => {
-      if (!C(
+    o(this, "onWindowMouseMove", (t) => {
+      if (!R(
         this.window,
         this.element,
-        e.clientX,
-        e.clientY
+        t.clientX,
+        t.clientY
       )) {
         this.cancelMouseDrag();
         return;
       }
       this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
-        x: e.clientX,
-        y: e.clientY
+        x: t.clientX,
+        y: t.clientY
       });
     });
-    o(this, "onWindowMouseUp", (e) => {
-      this.params.mouseUpEventVerifier(e) && this.cancelMouseDrag();
+    o(this, "onWindowMouseUp", (t) => {
+      this.params.mouseUpEventVerifier(t) && this.cancelMouseDrag();
     });
-    o(this, "onWindowTouchMove", (e) => {
-      if (e.touches.length !== 1)
+    o(this, "onWindowTouchMove", (t) => {
+      if (t.touches.length !== 1)
         return;
-      const t = e.touches[0];
-      if (!C(
+      const e = t.touches[0];
+      if (!R(
         this.window,
         this.element,
-        t.clientX,
-        t.clientY
+        e.clientX,
+        e.clientY
       )) {
         this.cancelTouchDrag();
         return;
       }
       this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
-        x: t.clientX,
-        y: t.clientY
+        x: e.clientX,
+        y: e.clientY
       });
     });
     o(this, "onWindowTouchFinish", () => {
       this.cancelTouchDrag();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, 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 = t, this.element = e, this.window = s, this.params = i, this.graph = t.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, s, i) {
-    new Z(e, t, s, i);
+  static configure(t, e, s, i) {
+    new Z(t, e, s, i);
   }
-  moveNode(e, t) {
-    const s = this.graph.getNode(e.nodeId);
-    if (s === null)
+  moveNode(t, e) {
+    if (this.graph.getNode(t.nodeId) === null)
       return;
-    const i = this.calculateContentPoint(t), n = {
-      x: i.x - e.dx,
-      y: i.y - e.dy
+    const i = this.calculateContentPoint(e), n = {
+      x: i.x - t.dx,
+      y: i.y - t.dy
     }, a = this.adjustNodeCoords(n);
-    this.canvas.updateNode(e.nodeId, {
+    this.canvas.updateNode(t.nodeId, {
       x: a.x,
       y: a.y
-    }), this.params.onNodeDrag({
-      nodeId: e.nodeId,
-      element: s.element,
-      x: a.x,
-      y: a.y
-    });
+    }), this.params.onNodeDrag(t.nodeId);
   }
-  moveNodeOnTop(e) {
+  moveNodeOnTop(t) {
     if (this.params.moveOnTop) {
       if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
-        const t = this.maxNodePriority;
-        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
-          this.canvas.updateEdge(i, { priority: t });
+        const e = this.maxNodePriority;
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(t).forEach((i) => {
+          this.canvas.updateEdge(i, { priority: e });
         });
       }
-      this.canvas.updateNode(e, { priority: this.maxNodePriority });
+      this.canvas.updateNode(t, { priority: this.maxNodePriority });
     }
   }
   cancelMouseDrag() {
-    if (this.grabbedNode !== null) {
-      const e = this.graph.getNode(this.grabbedNode.nodeId);
-      e !== null && this.params.onNodeDragFinished({
-        nodeId: this.grabbedNode.nodeId,
-        element: e.element,
-        x: e.x,
-        y: e.y
-      });
-    }
-    this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.getNode(this.grabbedNode.nodeId) !== null && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
   cancelTouchDrag() {
     if (this.grabbedNode !== null) {
-      const e = this.graph.getNode(this.grabbedNode.nodeId);
-      e !== null && this.params.onNodeDragFinished({
+      const t = this.graph.getNode(this.grabbedNode.nodeId);
+      t !== null && this.params.onNodeDragFinished({
         nodeId: this.grabbedNode.nodeId,
-        element: e.element,
-        x: e.x,
-        y: e.y
+        element: t.element,
+        x: t.x,
+        y: t.y
       });
     }
     this.grabbedNode = null, this.removeTouchDragListeners();
@@ -2187,58 +2132,58 @@ class Z {
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-  updateMaxNodePriority(e) {
-    const t = this.graph.getNode(e).priority;
-    this.maxNodePriority = Math.max(this.maxNodePriority, t);
+  updateMaxNodePriority(t) {
+    const e = this.graph.getNode(t).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, e);
   }
-  calculateContentPoint(e) {
-    const t = this.element.getBoundingClientRect(), s = {
-      x: e.x - t.x,
-      y: e.y - t.y
+  calculateContentPoint(t) {
+    const e = this.element.getBoundingClientRect(), s = {
+      x: t.x - e.x,
+      y: t.y - e.y
     }, i = this.canvas.viewport.getViewportMatrix();
-    return D(i, s);
+    return T(i, s);
   }
-  adjustNodeCoords(e) {
-    const t = this.params.gridSize;
-    if (t !== null) {
-      const s = t / 2;
+  adjustNodeCoords(t) {
+    const e = this.params.gridSize;
+    if (e !== null) {
+      const s = e / 2;
       return {
-        x: Math.floor((e.x + s) / t) * t,
-        y: Math.floor((e.y + s) / t) * t
+        x: Math.floor((t.x + s) / e) * e,
+        y: Math.floor((t.y + s) / e) * e
       };
     }
-    return e;
+    return t;
   }
 }
-const it = (r, e, t) => ({
+const ie = (r, t, e) => ({
   scale: r.scale,
-  x: r.x + r.scale * e,
-  y: r.y + r.scale * t
-}), nt = (r, e, t, s) => ({
-  scale: r.scale * e,
-  x: r.scale * (1 - e) * t + r.x,
-  y: r.scale * (1 - e) * s + r.y
+  x: r.x + r.scale * t,
+  y: r.y + r.scale * e
+}), ne = (r, t, e, s) => ({
+  scale: r.scale * t,
+  x: r.scale * (1 - t) * e + r.x,
+  y: r.scale * (1 - t) * 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 s = e.reduce(
+  const t = [], e = r.touches.length;
+  for (let h = 0; h < e; h++)
+    t.push([r.touches[h].clientX, r.touches[h].clientY]);
+  const s = t.reduce(
     (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), i = [s[0] / t, s[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
+  ), i = [s[0] / e, s[1] / e], a = t.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
     (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
     x: i[0],
     y: i[1],
-    scale: a / t,
-    touchesCnt: t,
-    touches: e
+    scale: a / e,
+    touchesCnt: e,
+    touches: t
   };
 };
 class k {
-  constructor(e, t, s, i) {
+  constructor(t, e, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
     o(this, "wheelFinishTimer", null);
@@ -2246,44 +2191,44 @@ class k {
     o(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+    o(this, "onMouseDown", (t) => {
+      this.element === null || !this.params.mouseDownEventVerifier(t) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
-    o(this, "onWindowMouseMove", (e) => {
-      const t = C(
+    o(this, "onWindowMouseMove", (t) => {
+      const e = R(
         this.window,
         this.element,
-        e.clientX,
-        e.clientY
+        t.clientX,
+        t.clientY
       );
-      if (this.element === null || !t) {
+      if (this.element === null || !e) {
         this.stopMouseDrag();
         return;
       }
-      const s = -e.movementX, i = -e.movementY;
+      const s = -t.movementX, i = -t.movementY;
       this.moveViewport(s, i);
     });
-    o(this, "onWindowMouseUp", (e) => {
-      this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
+    o(this, "onWindowMouseUp", (t) => {
+      this.element === null || !this.params.mouseUpEventVerifier(t) || this.stopMouseDrag();
     });
-    o(this, "onWheelScroll", (e) => {
-      if (!this.params.mouseWheelEventVerifier(e))
+    o(this, "onWheelScroll", (t) => {
+      if (!this.params.mouseWheelEventVerifier(t))
         return;
-      const { left: t, top: s } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - s, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      const { left: e, top: s } = this.element.getBoundingClientRect(), i = t.clientX - e, n = t.clientY - s, h = 1 / (t.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
       this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
-    o(this, "onTouchStart", (e) => {
+    o(this, "onTouchStart", (t) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = I(e);
+        this.prevTouches = I(t);
         return;
       }
-      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = I(t), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2291,53 +2236,53 @@ class k {
         passive: !0
       }), this.startRegisteredTransform();
     });
-    o(this, "onWindowTouchMove", (e) => {
-      const t = I(e);
-      if (!t.touches.every(
-        (i) => C(this.window, this.element, i[0], i[1])
+    o(this, "onWindowTouchMove", (t) => {
+      const e = I(t);
+      if (!e.touches.every(
+        (i) => R(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
       }
-      if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
-        -(t.x - this.prevTouches.x),
-        -(t.y - this.prevTouches.y)
-      ), t.touchesCnt === 2) {
-        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
+      if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.moveViewport(
+        -(e.x - this.prevTouches.x),
+        -(e.y - this.prevTouches.y)
+      ), e.touchesCnt === 2) {
+        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (e.scale / this.prevTouches.scale);
         this.scaleViewport(c, a, h);
       }
-      this.prevTouches = t;
+      this.prevTouches = e;
     });
-    o(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
+    o(this, "onWindowTouchFinish", (t) => {
+      t.touches.length > 0 ? this.prevTouches = I(t) : this.stopTouchDrag();
     });
     o(this, "observer", new ResizeObserver(() => {
-      const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
-        prevTransform: e,
-        nextTransform: e,
-        canvasWidth: t,
+      const t = this.viewport.getViewportMatrix(), { width: e, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
+        prevTransform: t,
+        nextTransform: t,
+        canvasWidth: e,
         canvasHeight: s
       });
       this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
     }));
-    o(this, "preventWheelScaleListener", (e) => {
-      e.preventDefault();
+    o(this, "preventWheelScaleListener", (t) => {
+      t.preventDefault();
     });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = t, this.element = e, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.viewport = t.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
     }), this.element.addEventListener("touchstart", this.onTouchStart, {
       passive: !0
-    }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    }), t.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, t, s, i) {
-    new k(e, t, s, i);
+  static configure(t, e, s, i) {
+    new k(t, e, s, i);
   }
-  moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = it(s, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+  moveViewport(t, e) {
+    const s = this.viewport.getViewportMatrix(), i = ie(s, t, e), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
@@ -2345,8 +2290,8 @@ class k {
     });
     this.performTransform(h);
   }
-  scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = nt(i, e, t, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+  scaleViewport(t, e, s) {
+    const i = this.canvas.viewport.getViewportMatrix(), n = ne(i, t, e, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: a,
@@ -2366,8 +2311,8 @@ class k {
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-  performTransform(e) {
-    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.params.onTransformChange();
+  performTransform(t) {
+    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(t), this.params.onTransformChange();
   }
   startRegisteredTransform() {
     this.transformInProgress = !0, this.params.onTransformStarted();
@@ -2377,7 +2322,7 @@ class k {
   }
 }
 class J {
-  constructor(e, t, s, i, n, a) {
+  constructor(t, e, s, i, n, a) {
     o(this, "canvasResizeObserver");
     o(this, "nodeHorizontal");
     o(this, "nodeVertical");
@@ -2391,22 +2336,22 @@ class J {
       yFrom: 1 / 0,
       yTo: 1 / 0
     });
-    o(this, "updateLoadedArea", (e) => {
+    o(this, "updateLoadedArea", (t) => {
       this.loadedArea = {
-        xFrom: e.x,
-        xTo: e.x + e.width,
-        yFrom: e.y,
-        yTo: e.y + e.height
+        xFrom: t.x,
+        xTo: t.x + t.width,
+        yFrom: t.y,
+        yTo: t.y + t.height
       };
     });
     o(this, "onAfterViewportUpdated", () => {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     o(this, "userTransformInProgress", !1);
-    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.canvasResizeObserver = new ResizeObserver((d) => {
+    this.canvas = t, this.element = e, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
-    }), this.viewport = e.viewport;
+    }), this.viewport = t.viewport;
     const h = {
       ...i,
       onResizeTransformStarted: () => {
@@ -2428,16 +2373,16 @@ class J {
       }
     };
     k.configure(
-      e,
+      t,
       this.element,
       this.window,
       h
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(e, t, s, i, n, a) {
+  static configure(t, e, s, i, n, a) {
     new J(
-      e,
       t,
+      e,
       s,
       i,
       n,
@@ -2450,21 +2395,21 @@ class J {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
+    const t = this.viewportWidth * this.viewportMatrix.scale, e = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + t + this.nodeHorizontal, a = this.viewportMatrix.y + e + this.nodeVertical;
     this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
+    const t = this.viewportWidth * this.viewportMatrix.scale, e = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - t - this.nodeHorizontal, i = this.viewportMatrix.y - e - this.nodeVertical, n = 3 * t + 2 * this.nodeHorizontal, a = 3 * e + 2 * this.nodeVertical;
     this.trigger.emit({ x: s, y: i, width: n, height: a });
   }
 }
-const at = () => {
+const ae = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, ht = () => {
+}, he = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, dt = () => {
+}, de = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2472,10 +2417,10 @@ const at = () => {
   return r.setAttribute("id", "pattern"), r;
 };
 class Q {
-  constructor(e, t, s) {
-    o(this, "svg", at());
-    o(this, "patternRenderingRectangle", ht());
-    o(this, "pattern", dt());
+  constructor(t, e, s) {
+    o(this, "svg", ae());
+    o(this, "patternRenderingRectangle", he());
+    o(this, "pattern", de());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2483,39 +2428,39 @@ class Q {
     o(this, "halfTileHeight");
     o(this, "maxViewportScale");
     o(this, "visible", !1);
-    o(this, "resizeObserver", new ResizeObserver((e) => {
-      const t = e[0], { width: s, height: i } = t.contentRect;
+    o(this, "resizeObserver", new ResizeObserver((t) => {
+      const e = t[0], { width: s, height: i } = e.contentRect;
       this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
       const n = this.tileWidth / s, a = this.tileHeight / i;
       this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
     }));
     o(this, "onAfterTransformUpdated", () => {
-      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
+      const t = this.canvas.viewport.getContentMatrix(), e = t.x - this.halfTileWidth * t.scale, s = t.y - this.halfTileHeight * t.scale, i = `matrix(${t.scale}, 0, 0, ${t.scale}, ${e}, ${s})`;
       this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
     });
-    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;
+    this.canvas = t, this.backgroundHost = s, this.tileWidth = e.tileWidth, this.tileHeight = e.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = e.renderer, this.maxViewportScale = e.maxViewportScale;
     const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", i), 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.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
-  static configure(e, t, s) {
-    new Q(e, t, s);
+  static configure(t, e, s) {
+    new Q(t, e, s);
   }
   updateVisibility() {
-    const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
-    t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
+    const e = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
+    e && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !e && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
   }
 }
 class _ {
-  constructor(e, t, s, i, n) {
+  constructor(t, e, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
     o(this, "isTargetDragging", !0);
-    o(this, "onEdgeCreated", (e) => {
-      this.params.onAfterEdgeCreated(e);
+    o(this, "onEdgeCreated", (t) => {
+      this.params.onAfterEdgeCreated(t);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+    this.canvas = t, this.overlayLayer = e, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Dt(
       this.overlayLayer,
       this.viewportStore
     ), O.configure(
@@ -2541,24 +2486,24 @@ class _ {
       }
     );
   }
-  static configure(e, t, s, i, n) {
+  static configure(t, e, s, i, n) {
     new _(
-      e,
       t,
+      e,
       s,
       i,
       n
     );
   }
-  grabPort(e, t, s) {
-    const i = this.canvas.graph.getPort(e);
-    this.staticPortId = e;
-    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = D(c, {
+  grabPort(t, e, s) {
+    const i = this.canvas.graph.getPort(t);
+    this.staticPortId = t;
+    const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
       x: a - d.x,
       y: h - d.y
-    }), g = D(c, {
-      x: t.x - d.x,
-      y: t.y - d.y
+    }), g = T(c, {
+      x: e.x - d.x,
+      y: e.y - d.y
     }), w = {
       overlayId: P.Static,
       portCoords: l,
@@ -2569,9 +2514,9 @@ class _ {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [y, v] = this.isTargetDragging ? [w, f] : [f, w];
-    this.overlayCanvas.addNode(W(y)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
-      from: y.overlayId,
+    const [m, v] = this.isTargetDragging ? [w, f] : [f, w];
+    this.overlayCanvas.addNode(W(m)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
+      from: m.overlayId,
       to: v.overlayId,
       shape: this.params.edgeShapeFactory(P.Edge)
     });
@@ -2579,23 +2524,23 @@ class _ {
   resetDragState() {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
-  tryCreateConnection(e) {
-    const t = ye(this.canvas.graph, e);
-    if (t === null) {
-      this.params.onEdgeCreationInterrupted(
-        this.staticPortId,
-        this.isTargetDragging
-      );
+  tryCreateConnection(t) {
+    const e = mt(this.canvas.graph, t), s = this.staticPortId;
+    if (e === null) {
+      this.params.onEdgeCreationInterrupted({
+        staticPortId: s,
+        isDirect: this.isTargetDragging
+      });
       return;
     }
-    const s = this.isTargetDragging ? this.staticPortId : t, i = this.isTargetDragging ? t : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
-    a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
-  }
-  moveDraggingPort(e) {
-    const t = this.overlayLayer.getBoundingClientRect(), s = {
-      x: e.x - t.x,
-      y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
+    const i = this.isTargetDragging ? s : e, n = this.isTargetDragging ? e : s, a = { from: i, 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(t) {
+    const e = this.overlayLayer.getBoundingClientRect(), s = {
+      x: t.x - e.x,
+      y: t.y - e.y
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
     this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
@@ -2603,15 +2548,15 @@ class _ {
   }
 }
 class q {
-  constructor(e, t, s, i, n) {
+  constructor(t, e, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
     o(this, "isTargetDragging", !0);
     o(this, "draggingEdgePayload", null);
-    o(this, "onEdgeReattached", (e) => {
-      this.params.onAfterEdgeReattached(e);
+    o(this, "onEdgeReattached", (t) => {
+      this.params.onAfterEdgeReattached(t);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+    this.canvas = t, this.overlayLayer = e, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Dt(
       this.overlayLayer,
       this.viewportStore
     ), O.configure(
@@ -2634,33 +2579,33 @@ class q {
       }
     );
   }
-  static configure(e, t, s, i, n) {
+  static configure(t, e, s, i, n) {
     new q(
-      e,
       t,
+      e,
       s,
       i,
       n
     );
   }
-  tryStartEdgeDragging(e, t) {
-    const s = this.params.draggingEdgeResolver(e);
+  tryStartEdgeDragging(t, e) {
+    const s = this.params.draggingEdgeResolver(t);
     if (s === null)
       return !1;
     const i = this.canvas.graph.getEdge(s);
     if (i === null)
       return !1;
-    const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
+    const n = t === i.from, a = t === i.to, h = n ? i.to : i.from;
     this.staticPortId = h, this.isTargetDragging = a;
-    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
+    const d = this.canvas.graph.getPort(t), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
       x: l.x + l.width / 2,
       y: l.y + l.height / 2
-    }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = D(w, {
+    }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), m = T(w, {
       x: g.x - f.x,
       y: g.y - f.y
-    }), v = D(w, {
-      x: t.x - f.x,
-      y: t.y - f.y
+    }), v = T(w, {
+      x: e.x - f.x,
+      y: e.y - f.y
     });
     this.draggingEdgePayload = {
       id: s,
@@ -2671,38 +2616,38 @@ class q {
     }, this.canvas.removeEdge(s);
     const E = {
       overlayId: P.Static,
-      portCoords: y,
+      portCoords: m,
       portDirection: c.direction
     }, x = {
       overlayId: P.Dragging,
       portCoords: v,
       portDirection: d.direction
-    }, [b, T] = this.isTargetDragging ? [E, x] : [x, E];
-    this.overlayCanvas.addNode(W(b)), this.overlayCanvas.addNode(W(T));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
+    }, [L, b] = this.isTargetDragging ? [E, x] : [x, E];
+    this.overlayCanvas.addNode(W(L)), this.overlayCanvas.addNode(W(b));
+    const D = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
       id: P.Edge,
-      from: b.overlayId,
-      to: T.overlayId,
-      shape: N
+      from: L.overlayId,
+      to: b.overlayId,
+      shape: D
     }), !0;
   }
   resetDragState() {
     this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
-  moveDraggingPort(e) {
-    const t = this.overlayLayer.getBoundingClientRect(), s = {
-      x: e.x - t.x,
-      y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
+  moveDraggingPort(t) {
+    const e = this.overlayLayer.getBoundingClientRect(), s = {
+      x: t.x - e.x,
+      y: t.y - e.y
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
     this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
-  tryCreateConnection(e) {
-    const t = ye(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
+  tryCreateConnection(t) {
+    const e = mt(this.canvas.graph, t);
+    if (this.overlayCanvas.removeEdge(P.Edge), e === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -2713,7 +2658,7 @@ class q {
       });
       return;
     }
-    const [s, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
+    const [s, i] = this.isTargetDragging ? [this.staticPortId, e] : [e, this.staticPortId], n = this.draggingEdgePayload, a = {
       id: n.id,
       from: s,
       to: i,
@@ -2734,45 +2679,45 @@ class q {
     }
   }
 }
-const ct = () => {
+const ce = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Y = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, ce = () => {
+}, ct = () => {
   const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class gt {
-  constructor(e) {
+class ge {
+  constructor(t) {
     o(this, "background", Y());
     o(this, "main", Y());
-    o(this, "overlayConnectablePorts", ce());
-    o(this, "overlayDraggableEdges", ce());
-    o(this, "host", ct());
-    this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
+    o(this, "overlayConnectablePorts", ct());
+    o(this, "overlayDraggableEdges", ct());
+    o(this, "host", ce());
+    this.element = t, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const H = (r) => () => r, ge = H(0), lt = () => {
+const H = (r) => () => r, gt = H(0), le = () => {
   let r = 0;
   return () => r++;
-}, ut = (r, e) => {
-  let t = ge, s = ge;
-  const i = lt();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = H(r)), typeof e == "number" && (s = H(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
-    nodesPriorityFn: t,
+}, ue = (r, t) => {
+  let e = gt, s = gt;
+  const i = le();
+  return r === "incremental" && (e = i), t === "incremental" && (s = i), typeof r == "number" && (e = H(r)), typeof t == "number" && (s = H(t)), typeof r == "function" && (e = r), typeof t == "function" && (s = t), {
+    nodesPriorityFn: e,
     edgesPriorityFn: s
   };
-}, ee = (r) => {
+}, tt = (r) => {
   if (typeof r == "function")
     return r;
   switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new et({
+      return () => new te({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2786,7 +2731,7 @@ const H = (r) => () => r, ge = H(0), lt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new qe({
+      return () => new qt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2796,11 +2741,10 @@ const H = (r) => () => r, ge = H(0), lt = () => {
         hasTargetArrow: r.hasTargetArrow,
         cycleSquareSide: r.cycleSquareSide,
         roundness: r.roundness,
-        detourDistance: r.detourDistance,
-        detourDirection: r.detourDirection
+        detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new tt({
+      return () => new ee({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2810,11 +2754,10 @@ const H = (r) => () => r, ge = H(0), lt = () => {
         hasTargetArrow: r.hasTargetArrow,
         cycleSquareSide: r.cycleSquareSide,
         roundness: r.roundness,
-        detourDistance: r.detourDistance,
-        detourDirection: r.detourDirection
+        detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new be({
+      return () => new bt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2825,7 +2768,7 @@ const H = (r) => () => r, ge = H(0), lt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new _e({
+      return () => new _t({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2839,30 +2782,30 @@ const H = (r) => () => r, ge = H(0), lt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, pt = (r) => {
-  var t, s, i, n, a;
-  const e = ut(
-    (t = r.nodes) == null ? void 0 : t.priority,
+}, pe = (r) => {
+  var e, s, i, n, a;
+  const t = ue(
+    (e = r.nodes) == null ? void 0 : e.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? ve,
-      priorityFn: e.nodesPriorityFn
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? vt,
+      priorityFn: t.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: ee(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
-      priorityFn: e.edgesPriorityFn
+      shapeFactory: tt(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      priorityFn: t.edgesPriorityFn
     }
   };
-}, wt = (r) => {
-  var w, f, y, v, E, x;
-  const e = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
-  }), t = (((f = r.events) == null ? void 0 : f.onBeforeNodeDrag) || r.nodeDragVerifier) ?? (() => !0), s = ((y = r.events) == null ? void 0 : y.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (v = r.mouse) == null ? void 0 : v.dragCursor, h = a !== void 0 ? a : "grab", d = (E = r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0;
+}, we = (r) => {
+  var w, f, m, v, E;
+  const t = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
+  }), e = r.nodeDragVerifier ?? (() => !0), s = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (m = r.mouse) == null ? void 0 : m.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (x) => x.button === 0, l = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, g = l !== void 0 ? l : (x) => x.button === 0;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
@@ -2870,22 +2813,22 @@ const H = (r) => () => r, ge = H(0), lt = () => {
     gridSize: r.gridSize ?? null,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
-    onNodeDrag: e,
-    nodeDragVerifier: t,
+    onNodeDrag: t,
+    nodeDragVerifier: e,
     onNodeDragFinished: s
   };
-}, ft = (r) => {
-  const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
+}, fe = (r) => {
+  const t = r.minX !== null ? r.minX : -1 / 0, e = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
-    a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
-    const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
+    a < t && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, t));
+    const d = n.canvasWidth * n.prevTransform.scale, c = e - d;
     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 l = n.canvasHeight * n.prevTransform.scale, g = i - l;
     return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, mt = (r) => {
-  const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
+}, ye = (r) => {
+  const t = r.maxContentScale, e = r.minContentScale, s = t !== null ? 1 / t : 0, i = e !== null ? 1 / e : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
     let d = h.scale, c = h.x, l = h.y;
@@ -2905,48 +2848,48 @@ const H = (r) => () => r, ge = H(0), lt = () => {
       y: l
     };
   };
-}, yt = (r) => (e) => r.reduce(
-  (t, s) => s({
-    prevTransform: e.prevTransform,
-    nextTransform: t,
-    canvasWidth: e.canvasWidth,
-    canvasHeight: e.canvasHeight
+}, me = (r) => (t) => r.reduce(
+  (e, s) => s({
+    prevTransform: t.prevTransform,
+    nextTransform: e,
+    canvasWidth: t.canvasWidth,
+    canvasHeight: t.canvasHeight
   }),
-  e.nextTransform
-), le = (r) => {
+  t.nextTransform
+), lt = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return mt({
+      return ye({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return ft({
+      return fe({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, ue = (r) => {
-  var y, v, E, x, b, T, N, V, te, re, oe, se;
-  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;
+}, ut = (r) => {
+  var m, v, E, x, L, b, D, V, et, rt, ot, st;
+  const t = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, e = t !== void 0 ? t : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = yt(
+  s !== void 0 ? Array.isArray(s) ? i = me(
     s.map(
-      (M) => le(M)
+      (N) => lt(N)
     )
-  ) : i = le(s) : i = (M) => M.nextTransform;
+  ) : i = lt(s) : i = (N) => N.nextTransform;
   const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, w = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = w !== void 0 ? w : () => !0;
+  }), d = (L = r == null ? void 0 : r.shift) == null ? void 0 : L.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (N) => N.button === 0, w = (D = r == null ? void 0 : r.scale) == null ? void 0 : D.mouseWheelEventVerifier, f = w !== void 0 ? w : () => !0;
   return {
-    wheelSensitivity: t,
+    wheelSensitivity: e,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
+    onTransformFinished: ((et = r == null ? void 0 : r.events) == null ? void 0 : et.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
@@ -2955,30 +2898,30 @@ const H = (r) => () => r, ge = H(0), lt = () => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: f,
-    scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((rt = r == null ? void 0 : r.scale) == null ? void 0 : rt.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((ot = r == null ? void 0 : r.events) == null ? void 0 : ot.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((st = r == null ? void 0 : r.events) == null ? void 0 : st.onResizeTransformFinished) ?? (() => {
     })
   };
-}, vt = (r, e) => {
-  const t = document.createElementNS(
+}, ve = (r, t) => {
+  const e = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
-  return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, Et = (r) => r instanceof SVGElement ? r : vt(
+  return e.setAttribute("cx", "0"), e.setAttribute("cy", "0"), e.setAttribute("r", `${r}`), e.setAttribute("fill", `${t}`), e;
+}, Ee = (r) => r instanceof SVGElement ? r : ve(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), At = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = Et(r.renderer ?? {});
+), Ae = (r) => {
+  const t = r.tileDimensions, e = (t == null ? void 0 : t.width) ?? 25, s = (t == null ? void 0 : t.height) ?? 25, i = Ee(r.renderer ?? {});
   return {
-    tileWidth: t,
+    tileWidth: e,
     tileHeight: s,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, xt = (r, e, t) => {
+}, xe = (r, t, e) => {
   var c, l, g;
   const s = () => "direct", i = (w) => w, n = (w) => w.button === 0, a = () => {
   }, h = () => {
@@ -2992,43 +2935,49 @@ const H = (r) => () => r, ge = H(0), lt = () => {
     onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
-    dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
+    dragPortDirection: r.dragPortDirection ?? e,
+    edgeShapeFactory: r.edgeShape !== void 0 ? tt(r.edgeShape) : t
   };
-}, St = (r, e) => {
+}, Se = (r, t) => {
   var c, l, g;
-  const t = (w) => w, s = (w) => w.button === 0 && w.ctrlKey, i = (w) => w.button === 0, n = (w) => {
-    const f = e.getPortAdjacentEdgeIds(w);
+  const e = (w) => w, s = (w) => w.button === 0 && w.ctrlKey, i = (w) => w.button === 0, n = (w) => {
+    const f = t.getPortAdjacentEdgeIds(w);
     return f.length > 0 ? f[f.length - 1] : null;
   }, a = () => {
   }, h = () => {
   }, d = () => {
   };
   return {
-    connectionPreprocessor: r.connectionPreprocessor ?? t,
+    connectionPreprocessor: r.connectionPreprocessor ?? e,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? tt(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, Pt = (r) => ({
+}, Pe = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), bt = (r) => {
-  var e, t;
+}), be = (r) => {
+  var t, e;
   return {
-    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
+    onAfterNodeDetached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onAfterNodeDetached) ?? (() => {
     }),
-    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? (() => {
+    onBeforeNodeAttached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onBeforeNodeAttached) ?? (() => {
     })
   };
 };
-class Nt {
-  constructor(e) {
-    o(this, "element", null);
+class Te extends Error {
+  constructor() {
+    super(...arguments);
+    o(this, "name", "CanvasBuilderError");
+  }
+}
+class Me {
+  constructor(t) {
+    o(this, "used", !1);
     o(this, "canvasDefaults", {});
     o(this, "dragConfig", {});
     o(this, "transformConfig", {});
@@ -3042,41 +2991,29 @@ class Nt {
     o(this, "hasBackground", !1);
     o(this, "hasUserConnectablePorts", !1);
     o(this, "hasUserDraggableEdges", !1);
-    o(this, "boxRenderingTrigger");
+    o(this, "boxRenderingTrigger", new wt());
+    o(this, "graphStore", new yt());
+    o(this, "viewportStore", new Bt());
     o(this, "window", window);
-    e !== void 0 && (this.element = e);
-  }
-  /**
-   * @deprecated
-   * use `new CanvasBuilder(element);` instead
-   */
-  setElement(e) {
-    return this.element = e, this;
+    this.element = t;
   }
   /**
    * specifies default values for graph entities
    */
-  setDefaults(e) {
-    return this.canvasDefaults = e, this;
+  setDefaults(t) {
+    return this.canvasDefaults = t, this;
   }
   /**
    * enables nodes draggable by user
    */
-  enableUserDraggableNodes(e) {
-    return this.hasDraggableNode = !0, this.dragConfig = e ?? {}, this;
+  enableUserDraggableNodes(t) {
+    return this.hasDraggableNode = !0, this.dragConfig = t ?? {}, this;
   }
   /**
    * enables viewport transformable by user
    */
-  enableUserTransformableViewport(e) {
-    return this.hasTransformableViewport = !0, this.transformConfig = e ?? {}, this;
-  }
-  /**
-   * @deprecated
-   * use enableNodeResizeReactiveEdges instead
-   */
-  enableResizeReactiveNodes() {
-    return this.hasNodeResizeReactiveEdges = !0, this;
+  enableUserTransformableViewport(t) {
+    return this.hasTransformableViewport = !0, this.transformConfig = t ?? {}, this;
   }
   /**
    * enables automatic edges update on node resize
@@ -3084,139 +3021,118 @@ class Nt {
   enableNodeResizeReactiveEdges() {
     return this.hasNodeResizeReactiveEdges = !0, this;
   }
-  /**
-   * @deprecated
-   * do not use
-   * sets emitter for rendering graph inside bounded area
-   */
-  enableBoxAreaRendering(e) {
-    return this.boxRenderingTrigger = e, this;
-  }
   /**
    * enables built-in virtual scroll behavior, when only nodes and edges close
    * to viewport are rendered
    */
-  enableVirtualScroll(e) {
-    return this.virtualScrollConfig = e, this;
+  enableVirtualScroll(t) {
+    return this.virtualScrollConfig = t, this;
   }
   /**
    * enables built-in background rendering
    */
-  enableBackground(e) {
-    return this.hasBackground = !0, this.backgroundConfig = e ?? {}, this;
+  enableBackground(t) {
+    return this.hasBackground = !0, this.backgroundConfig = t ?? {}, this;
   }
   /**
    * enables edge creation by dragging one port to another
    */
-  enableUserConnectablePorts(e) {
-    return this.connectablePortsConfig = e ?? {}, this.hasUserConnectablePorts = !0, this;
+  enableUserConnectablePorts(t) {
+    return this.hasUserConnectablePorts = !0, this.connectablePortsConfig = t ?? {}, this;
   }
-  enableUserDraggableEdges(e) {
-    return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
+  enableUserDraggableEdges(t) {
+    return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = t ?? {}, this;
   }
   /**
    * builds final canvas
    */
   build() {
-    if (this.element === null)
-      throw new S(
-        "unable to build canvas when no attach element specified"
-      );
-    let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
-    const t = new me(), s = new $e(), i = new gt(this.element);
-    let n = new pe(
-      t,
-      s,
-      i.main
+    if (this.used)
+      throw new Te("CanvasBuilder is a single use object");
+    this.used = !0;
+    const t = new ge(this.element);
+    let e = new pt(
+      this.graphStore,
+      this.viewportStore,
+      t.main
     );
-    e !== void 0 && (n = new Ie(
-      n,
-      t,
+    this.virtualScrollConfig !== void 0 && (e = new It(
       e,
-      bt(this.virtualScrollConfig)
+      this.graphStore,
+      this.boxRenderingTrigger,
+      be(this.virtualScrollConfig)
     ));
-    const a = pt(this.canvasDefaults), h = new fe(
-      this.element,
-      t,
-      s,
-      n,
-      a
+    const s = pe(this.canvasDefaults), i = new ft(
+      this.graphStore,
+      this.viewportStore,
+      e,
+      s
     );
     if (this.hasBackground && Q.configure(
-      h,
-      At(this.backgroundConfig),
-      i.background
-    ), this.hasNodeResizeReactiveEdges && j.configure(h), this.hasDraggableNode && Z.configure(
-      h,
-      i.main,
+      i,
+      Ae(this.backgroundConfig),
+      t.background
+    ), this.hasNodeResizeReactiveEdges && j.configure(i), this.hasDraggableNode && Z.configure(
+      i,
+      t.main,
       this.window,
-      wt(this.dragConfig)
+      we(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = xt(
+      const a = xe(
         this.connectablePortsConfig,
-        a.edges.shapeFactory,
-        a.ports.direction
+        s.edges.shapeFactory,
+        s.ports.direction
       );
       _.configure(
-        h,
-        i.overlayConnectablePorts,
-        s,
+        i,
+        t.overlayConnectablePorts,
+        this.viewportStore,
         this.window,
-        c
+        a
       );
     }
     if (this.hasUserDraggableEdges) {
-      const c = St(
+      const a = Se(
         this.draggableEdgesConfig,
-        h.graph
+        i.graph
       );
       q.configure(
-        h,
-        i.overlayDraggableEdges,
-        s,
+        i,
+        t.overlayDraggableEdges,
+        this.viewportStore,
         this.window,
-        c
+        a
       );
     }
     this.virtualScrollConfig !== void 0 ? J.configure(
-      h,
-      i.main,
+      i,
+      t.main,
       this.window,
-      ue(this.transformConfig),
-      e,
-      Pt(this.virtualScrollConfig)
+      ut(this.transformConfig),
+      this.boxRenderingTrigger,
+      Pe(this.virtualScrollConfig)
     ) : this.hasTransformableViewport && k.configure(
-      h,
-      i.main,
+      i,
+      t.main,
       this.window,
-      ue(this.transformConfig)
-    ), this.reset();
-    const d = () => {
-      i.destroy(), h.onBeforeDestroy.unsubscribe(d);
+      ut(this.transformConfig)
+    );
+    const n = () => {
+      t.destroy(), i.onBeforeDestroy.unsubscribe(n);
     };
-    return h.onBeforeDestroy.subscribe(d), h;
-  }
-  /**
-   * @deprecated
-   * CanvasBuilder should be single use object
-   */
-  reset() {
-    this.element = null, this.canvasDefaults = {}, this.dragConfig = {}, this.transformConfig = {}, this.backgroundConfig = {}, this.virtualScrollConfig = void 0, this.hasDraggableNode = !1, this.hasTransformableViewport = !1, this.hasNodeResizeReactiveEdges = !1, this.hasBackground = !1, this.boxRenderingTrigger = void 0, this.hasUserConnectablePorts = !1;
+    return i.onBeforeDestroy.subscribe(n), i;
   }
 }
 export {
-  _e as BezierEdgeShape,
-  Nt as CanvasBuilder,
-  be as DirectEdgeShape,
-  we as EventSubject,
-  qe as HorizontalEdgeShape,
-  S as HtmlGraphError,
-  st as InteractiveEdgeError,
-  Te as InteractiveEdgeShape,
-  F as LineEdgeShape,
-  Dt as MedianEdgeShape,
-  Dt as MidpointEdgeShape,
-  et as StraightEdgeShape,
-  tt as VerticalEdgeShape
+  _t as BezierEdgeShape,
+  Me as CanvasBuilder,
+  Te as CanvasBuilderError,
+  S as CanvasError,
+  bt as DirectEdgeShape,
+  qt as HorizontalEdgeShape,
+  se as InteractiveEdgeError,
+  Tt as InteractiveEdgeShape,
+  Ne as MidpointEdgeShape,
+  te as StraightEdgeShape,
+  ee as VerticalEdgeShape
 };