@html-graph/html-graph 2.2.1 → 2.3.0

package/dist/html-graph.js

@@ -1,12 +1,25 @@
-var tt = Object.defineProperty;
-var et = (e, t, o) => t in e ? tt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var i = (e, t, o) => et(e, typeof t != "symbol" ? t + "" : t, o);
-class ot {
-  constructor(t) {
-    this.graphStore = t;
-  }
-  getNode(t) {
-    const o = this.graphStore.getNode(t);
+var te = Object.defineProperty;
+var oe = (t, e, o) => e in t ? te(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var i = (t, e, o) => oe(t, typeof e != "symbol" ? e + "" : e, o);
+class re {
+  constructor(e) {
+    i(this, "onAfterNodeAdded");
+    i(this, "onAfterNodeCoordinatesUpdated");
+    i(this, "onAfterNodePriorityUpdated");
+    i(this, "onBeforeNodeRemoved");
+    i(this, "onAfterPortAdded");
+    i(this, "onAfterPortDirectionUpdated");
+    i(this, "onBeforePortRemoved");
+    i(this, "onAfterEdgeAdded");
+    i(this, "onAfterEdgeShapeUpdated");
+    i(this, "onAfterEdgeAdjacentPortsUpdated");
+    i(this, "onAfterEdgePriorityUpdated");
+    i(this, "onBeforeEdgeRemoved");
+    i(this, "onBeforeClear");
+    this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeCoordinatesUpdated = this.graphStore.onAfterNodeCoordinatesUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortAdded = this.graphStore.onAfterPortAdded, this.onAfterPortDirectionUpdated = this.graphStore.onAfterPortDirectionUpdated, this.onBeforePortRemoved = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeAdjacentPortsUpdated = this.graphStore.onAfterEdgeAdjacentPortsUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
+  }
+  getNode(e) {
+    const o = this.graphStore.getNode(e);
     return o === void 0 ? null : {
       element: o.element,
       x: o.x,
@@ -18,8 +31,8 @@ class ot {
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
-  getPort(t) {
-    const o = this.graphStore.getPort(t);
+  getPort(e) {
+    const o = this.graphStore.getPort(e);
     return o === void 0 ? null : {
       element: o.element,
       direction: o.direction,
@@ -29,52 +42,52 @@ class ot {
   getAllPortIds() {
     return this.graphStore.getAllPortIds();
   }
-  getNodePortIds(t) {
-    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodePortIds(t);
+  getNodePortIds(e) {
+    return this.graphStore.getNodePortIds(e) ?? null;
   }
   /**
    * @deprecated
    * use graph.getPort()?.nodeId ?? null instead
    */
-  getPortNodeId(t) {
+  getPortNodeId(e) {
     var o;
-    return ((o = this.graphStore.getPort(t)) == null ? void 0 : o.nodeId) ?? null;
+    return ((o = this.graphStore.getPort(e)) == null ? void 0 : o.nodeId) ?? null;
   }
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
-  getEdge(t) {
-    const o = this.graphStore.getEdge(t);
+  getEdge(e) {
+    const o = this.graphStore.getEdge(e);
     return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
   }
-  getPortIncomingEdgeIds(t) {
-    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(t);
+  getPortIncomingEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(e);
   }
-  getPortOutcomingEdgeIds(t) {
-    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(t);
+  getPortOutcomingEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(e);
   }
-  getPortCycleEdgeIds(t) {
-    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(t);
+  getPortCycleEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(e);
   }
-  getPortAdjacentEdgeIds(t) {
-    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(t);
+  getPortAdjacentEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(e);
   }
-  getNodeIncomingEdgeIds(t) {
-    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(t);
+  getNodeIncomingEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(e);
   }
-  getNodeOutcomingEdgeIds(t) {
-    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(t);
+  getNodeOutcomingEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(e);
   }
-  getNodeCycleEdgeIds(t) {
-    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(t);
+  getNodeCycleEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(e);
   }
-  getNodeAdjacentEdgeIds(t) {
-    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
+  getNodeAdjacentEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class rt {
-  constructor(t) {
-    this.transformer = t;
+class ie {
+  constructor(e) {
+    this.transformer = e;
   }
   getViewportMatrix() {
     return { ...this.transformer.getViewportMatrix() };
@@ -83,61 +96,65 @@ class rt {
     return { ...this.transformer.getContentMatrix() };
   }
 }
-class it {
-  constructor(t, o, r) {
+class se {
+  constructor(e, o, r) {
     i(this, "viewport");
     i(this, "graph");
-    this.graphStore = t, this.viewportStore = o, this.htmlView = r, this.graph = new ot(this.graphStore), this.viewport = new rt(this.viewportStore);
+    this.graphStore = e, this.viewportStore = o, this.htmlView = r, this.graph = new re(this.graphStore), this.viewport = new ie(this.viewportStore);
   }
-  attach(t) {
-    this.htmlView.attach(t);
+  attach(e) {
+    this.htmlView.attach(e);
   }
   detach() {
     this.htmlView.detach();
   }
-  addNode(t) {
-    this.graphStore.addNode(t), this.htmlView.attachNode(t.id);
+  addNode(e) {
+    this.graphStore.addNode(e), this.htmlView.attachNode(e.id);
   }
-  updateNode(t, o) {
-    const r = this.graphStore.getNode(t);
-    r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, this.htmlView.updateNodeCoordinates(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((h) => {
-      this.htmlView.renderEdge(h);
-    }), o.priority !== void 0 && (r.priority = o.priority, this.htmlView.updateNodePriority(t));
+  updateNode(e, o) {
+    this.graphStore.updateNodeCoordinates(e, {
+      x: o.x,
+      y: o.y,
+      centerFn: o.centerFn
+    }), this.htmlView.updateNodeCoordinates(e), o.priority !== void 0 && (this.graphStore.updateNodePriority(e, o.priority), this.htmlView.updateNodePriority(e)), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((n) => {
+      this.htmlView.renderEdge(n);
+    });
   }
-  removeNode(t) {
-    this.graphStore.getNodePortIds(t).forEach((o) => {
+  removeNode(e) {
+    this.graphStore.getNodePortIds(e).forEach((o) => {
       this.unmarkPort(o);
-    }), this.graphStore.removeNode(t), this.htmlView.detachNode(t);
+    }), this.graphStore.removeNode(e), this.htmlView.detachNode(e);
   }
-  markPort(t) {
-    this.graphStore.addPort(t);
+  markPort(e) {
+    this.graphStore.addPort(e);
   }
-  updatePort(t, o) {
-    const r = this.graphStore.getPort(t);
-    r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((h) => {
-      this.htmlView.renderEdge(h);
+  updatePort(e, o) {
+    o.direction !== void 0 && this.graphStore.updatePortDirection(e, o.direction), this.graphStore.getPortAdjacentEdgeIds(e).forEach((n) => {
+      this.htmlView.renderEdge(n);
     });
   }
-  unmarkPort(t) {
-    this.graphStore.getPortAdjacentEdgeIds(t).forEach((o) => {
+  unmarkPort(e) {
+    this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
       this.removeEdge(o);
-    }), this.graphStore.removePort(t);
+    }), this.graphStore.removePort(e);
   }
-  addEdge(t) {
-    this.graphStore.addEdge(t), this.htmlView.attachEdge(t.id);
+  addEdge(e) {
+    this.graphStore.addEdge(e), this.htmlView.attachEdge(e.id);
   }
-  updateEdge(t, o) {
-    const r = this.graphStore.getEdge(t);
-    o.shape !== void 0 && (r.shape = o.shape, this.htmlView.updateEdgeShape(t)), o.from !== void 0 && this.graphStore.updateEdgeFrom(t, o.from), o.to !== void 0 && this.graphStore.updateEdgeTo(t, o.to), this.htmlView.renderEdge(t), o.priority !== void 0 && (r.priority = o.priority, this.htmlView.updateEdgePriority(t));
+  updateEdge(e, o) {
+    (o.from !== void 0 || o.to !== void 0) && this.graphStore.updateEdgeAdjacentPorts(e, {
+      from: o.from,
+      to: o.to
+    }), o.shape !== void 0 && (this.graphStore.updateEdgeShape(e, o.shape), this.htmlView.updateEdgeShape(e)), this.htmlView.renderEdge(e), o.priority !== void 0 && (this.graphStore.updateEdgePriority(e, o.priority), this.htmlView.updateEdgePriority(e));
   }
-  removeEdge(t) {
-    this.graphStore.removeEdge(t), this.htmlView.detachEdge(t);
+  removeEdge(e) {
+    this.graphStore.removeEdge(e), this.htmlView.detachEdge(e);
   }
-  patchViewportMatrix(t) {
-    this.viewportStore.patchViewportMatrix(t);
+  patchViewportMatrix(e) {
+    this.viewportStore.patchViewportMatrix(e);
   }
-  patchContentMatrix(t) {
-    this.viewportStore.patchContentMatrix(t);
+  patchContentMatrix(e) {
+    this.viewportStore.patchContentMatrix(e);
   }
   clear() {
     this.htmlView.clear(), this.graphStore.clear();
@@ -146,57 +163,57 @@ class it {
     this.clear(), this.htmlView.destroy();
   }
 }
-const C = (e, t, o) => {
-  const { x: r, y: n, width: h, height: s } = e.getBoundingClientRect();
-  return t >= r && t <= r + h && o >= n && o <= n + s;
-}, $ = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, W = (e, t) => {
-  t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
-}, st = (e) => {
-  var g, y, x, v, A, S;
-  const t = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
-  }), o = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
-  }), n = (e == null ? void 0 : e.moveOnTop) === !1, h = (v = e == null ? void 0 : e.mouse) == null ? void 0 : v.dragCursor, s = h !== void 0 ? h : "grab", c = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, a = (S = e == null ? void 0 : e.mouse) == null ? void 0 : S.mouseUpEventVerifier;
+const $ = (t, e, o) => {
+  const { x: r, y: n, width: h, height: s } = t.getBoundingClientRect();
+  return e >= r && e <= r + h && o >= n && o <= n + s;
+}, W = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, R = (t, e) => {
+  e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
+}, ne = (t) => {
+  var g, f, x, y, S, p;
+  const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
+  }), o = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), r = ((x = t == null ? void 0 : t.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
+  }), n = (t == null ? void 0 : t.moveOnTop) === !1, h = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, s = h !== void 0 ? h : "grab", d = (S = t == null ? void 0 : t.mouse) == null ? void 0 : S.mouseDownEventVerifier, c = d !== void 0 ? d : (T) => T.button === 0, a = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseUpEventVerifier;
   return {
     freezePriority: n,
     dragCursor: s,
-    mouseDownEventVerifier: d,
+    mouseDownEventVerifier: c,
     mouseUpEventVerifier: a !== void 0 ? a : (T) => T.button === 0,
-    onNodeDrag: t,
+    onNodeDrag: e,
     onBeforeNodeDrag: o,
     onNodeDragFinished: r
   };
 };
-class nt {
-  constructor(t, o) {
+class he {
+  constructor(e, o) {
     i(this, "graph");
     i(this, "viewport");
     i(this, "maxNodePriority", 0);
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "grabbedNodeId", null);
     i(this, "element", null);
-    i(this, "onWindowMouseMove", (t) => {
-      if (this.element !== null && (!C(this.element, t.clientX, t.clientY) || !$(this.window, t.clientX, t.clientY))) {
+    i(this, "onWindowMouseMove", (e) => {
+      if (this.element !== null && (!$(this.element, e.clientX, e.clientY) || !W(this.window, e.clientX, e.clientY))) {
         this.cancelMouseDrag();
         return;
       }
-      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
+      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
     });
-    i(this, "onWindowMouseUp", (t) => {
-      this.options.mouseUpEventVerifier(t) && this.cancelMouseDrag();
+    i(this, "onWindowMouseUp", (e) => {
+      this.options.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
-    i(this, "onWindowTouchMove", (t) => {
-      if (t.touches.length !== 1)
+    i(this, "onWindowTouchMove", (e) => {
+      if (e.touches.length !== 1)
         return;
-      const o = t.touches[0];
-      if (this.element !== null && (!C(this.element, o.clientX, o.clientY) || !$(this.window, o.clientX, o.clientY))) {
+      const o = e.touches[0];
+      if (this.element !== null && (!$(this.element, o.clientX, o.clientY) || !W(this.window, o.clientX, o.clientY))) {
         this.cancelTouchDrag();
         return;
       }
       if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
         const r = o.clientX - this.previousTouchCoords.x, n = o.clientY - this.previousTouchCoords.y;
         this.dragNode(this.grabbedNodeId, r, n), this.previousTouchCoords = {
-          x: t.touches[0].clientX,
-          y: t.touches[0].clientY
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY
         };
       }
     });
@@ -206,26 +223,26 @@ class nt {
     i(this, "previousTouchCoords", null);
     i(this, "window", window);
     i(this, "options");
-    this.canvas = t, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = st(o ?? {});
+    this.canvas = e, this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.options = ne(o ?? {});
   }
-  attach(t) {
-    this.detach(), this.element = t, this.canvas.attach(this.element);
+  attach(e) {
+    this.detach(), this.element = e, this.canvas.attach(this.element);
   }
   detach() {
     this.canvas.detach(), this.element !== null && (this.element = null);
   }
-  addNode(t) {
-    this.canvas.addNode(t), this.updateMaxNodePriority(t.id);
+  addNode(e) {
+    this.canvas.addNode(e), this.updateMaxNodePriority(e.id);
     const o = (n) => {
       if (this.element === null || !this.options.mouseDownEventVerifier(n))
         return;
-      const h = this.graph.getNode(t.id);
+      const h = this.graph.getNode(e.id);
       this.options.onBeforeNodeDrag({
-        nodeId: t.id,
-        element: t.element,
+        nodeId: e.id,
+        element: e.element,
         x: h.x,
         y: h.y
-      }) && (n.stopImmediatePropagation(), this.grabbedNodeId = t.id, W(this.element, this.options.dragCursor), this.moveNodeOnTop(t.id), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
+      }) && (n.stopImmediatePropagation(), this.grabbedNodeId = e.id, R(this.element, this.options.dragCursor), this.moveNodeOnTop(e.id), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
     }, r = (n) => {
       if (n.touches.length !== 1)
         return;
@@ -233,206 +250,206 @@ class nt {
         x: n.touches[0].clientX,
         y: n.touches[0].clientY
       };
-      const h = this.graph.getNode(t.id);
+      const h = this.graph.getNode(e.id);
       this.options.onBeforeNodeDrag({
-        nodeId: t.id,
-        element: t.element,
+        nodeId: e.id,
+        element: e.element,
         x: h.x,
         y: h.y
-      }) && (this.grabbedNodeId = t.id, this.moveNodeOnTop(t.id), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
+      }) && (this.grabbedNodeId = e.id, this.moveNodeOnTop(e.id), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
     };
-    this.nodes.set(t.id, {
-      element: t.element,
+    this.nodes.set(e.id, {
+      element: e.element,
       onMouseDown: o,
       onTouchStart: r
-    }), t.element.addEventListener("mousedown", o), t.element.addEventListener("touchstart", r);
+    }), e.element.addEventListener("mousedown", o), e.element.addEventListener("touchstart", r);
   }
-  updateNode(t, o) {
-    this.canvas.updateNode(t, o), this.updateMaxNodePriority(t);
+  updateNode(e, o) {
+    this.canvas.updateNode(e, o), this.updateMaxNodePriority(e);
   }
-  removeNode(t) {
-    const o = this.nodes.get(t);
-    o !== void 0 && (o.element.removeEventListener("mousedown", o.onMouseDown), o.element.removeEventListener("touchstart", o.onTouchStart)), this.nodes.delete(t), this.canvas.removeNode(t);
+  removeNode(e) {
+    const o = this.nodes.get(e);
+    o !== void 0 && (o.element.removeEventListener("mousedown", o.onMouseDown), o.element.removeEventListener("touchstart", o.onTouchStart)), this.nodes.delete(e), this.canvas.removeNode(e);
   }
-  markPort(t) {
-    this.canvas.markPort(t);
+  markPort(e) {
+    this.canvas.markPort(e);
   }
-  updatePort(t, o) {
-    this.canvas.updatePort(t, o);
+  updatePort(e, o) {
+    this.canvas.updatePort(e, o);
   }
-  unmarkPort(t) {
-    this.canvas.unmarkPort(t);
+  unmarkPort(e) {
+    this.canvas.unmarkPort(e);
   }
-  addEdge(t) {
-    this.canvas.addEdge(t);
+  addEdge(e) {
+    this.canvas.addEdge(e);
   }
-  updateEdge(t, o) {
-    this.canvas.updateEdge(t, o);
+  updateEdge(e, o) {
+    this.canvas.updateEdge(e, o);
   }
-  removeEdge(t) {
-    this.canvas.removeEdge(t);
+  removeEdge(e) {
+    this.canvas.removeEdge(e);
   }
-  patchViewportMatrix(t) {
-    this.canvas.patchViewportMatrix(t);
+  patchViewportMatrix(e) {
+    this.canvas.patchViewportMatrix(e);
   }
-  patchContentMatrix(t) {
-    this.canvas.patchContentMatrix(t);
+  patchContentMatrix(e) {
+    this.canvas.patchContentMatrix(e);
   }
   clear() {
-    this.canvas.clear(), this.nodes.forEach((t) => {
-      t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
+    this.canvas.clear(), this.nodes.forEach((e) => {
+      e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart);
     }), this.nodes.clear(), this.maxNodePriority = 0;
   }
   destroy() {
     this.detach(), this.clear(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
-  dragNode(t, o, r) {
-    const n = this.graph.getNode(t);
+  dragNode(e, o, r) {
+    const n = this.graph.getNode(e);
     if (n === null)
       return;
-    const h = this.canvas.viewport.getContentMatrix(), s = h.scale * n.x + h.x, c = h.scale * n.y + h.y, d = s + o, a = c + r, l = this.canvas.viewport.getViewportMatrix(), g = l.scale * d + l.x, y = l.scale * a + l.y;
-    this.canvas.updateNode(t, { x: g, y }), this.options.onNodeDrag({
-      nodeId: t,
+    const h = this.canvas.viewport.getContentMatrix(), s = h.scale * n.x + h.x, d = h.scale * n.y + h.y, c = s + o, a = d + r, l = this.canvas.viewport.getViewportMatrix(), g = l.scale * c + l.x, f = l.scale * a + l.y;
+    this.canvas.updateNode(e, { x: g, y: f }), this.options.onNodeDrag({
+      nodeId: e,
       element: n.element,
       x: g,
-      y
+      y: f
     });
   }
-  updateMaxNodePriority(t) {
-    const o = this.graph.getNode(t).priority;
+  updateMaxNodePriority(e) {
+    const o = this.graph.getNode(e).priority;
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
-  moveNodeOnTop(t) {
+  moveNodeOnTop(e) {
     if (this.options.freezePriority)
       return;
-    this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
+    this.maxNodePriority += 2, this.updateNode(e, { priority: this.maxNodePriority });
     const o = this.maxNodePriority - 1;
-    this.graph.getNodeAdjacentEdgeIds(t).forEach((n) => {
+    this.graph.getNodeAdjacentEdgeIds(e).forEach((n) => {
       this.updateEdge(n, { priority: o });
     });
   }
   cancelMouseDrag() {
-    const t = this.graph.getNode(this.grabbedNodeId);
-    t !== null && this.options.onNodeDragFinished({
+    const e = this.graph.getNode(this.grabbedNodeId);
+    e !== null && this.options.onNodeDragFinished({
       nodeId: this.grabbedNodeId,
-      element: t.element,
-      x: t.x,
-      y: t.y
-    }), this.grabbedNodeId = null, this.element !== null && W(this.element, null), this.removeMouseDragListeners();
+      element: e.element,
+      x: e.x,
+      y: e.y
+    }), this.grabbedNodeId = null, this.element !== null && R(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
   cancelTouchDrag() {
     this.previousTouchCoords = null;
-    const t = this.graph.getNode(this.grabbedNodeId);
-    t !== null && this.options.onNodeDragFinished({
+    const e = this.graph.getNode(this.grabbedNodeId);
+    e !== null && this.options.onNodeDragFinished({
       nodeId: this.grabbedNodeId,
-      element: t.element,
-      x: t.x,
-      y: t.y
+      element: e.element,
+      x: e.x,
+      y: e.y
     }), this.grabbedNodeId = null, this.removeTouchDragListeners();
   }
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
 }
-const ht = (e) => {
-  const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, n = e.maxY !== null ? e.maxY : 1 / 0;
+const de = (t) => {
+  const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, r = t.minY !== null ? t.minY : -1 / 0, n = t.maxY !== null ? t.maxY : 1 / 0;
   return (h) => {
-    let s = h.nextTransform.x, c = h.nextTransform.y;
-    s < t && s < h.prevTransform.x && (s = Math.min(h.prevTransform.x, t));
-    const d = h.canvasWidth * h.prevTransform.scale, a = o - d;
-    s > a && s > h.prevTransform.x && (s = Math.max(h.prevTransform.x, a)), c < r && c < h.prevTransform.y && (c = Math.min(h.prevTransform.y, r));
+    let s = h.nextTransform.x, d = h.nextTransform.y;
+    s < e && s < h.prevTransform.x && (s = Math.min(h.prevTransform.x, e));
+    const c = h.canvasWidth * h.prevTransform.scale, a = o - c;
+    s > a && s > h.prevTransform.x && (s = Math.max(h.prevTransform.x, a)), d < r && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, r));
     const l = h.canvasHeight * h.prevTransform.scale, g = n - l;
-    return c > g && c > h.prevTransform.y && (c = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: s, y: c };
+    return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: s, y: d };
   };
-}, ct = (e) => {
-  const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, n = o !== null ? 1 / o : 1 / 0;
+}, ce = (t) => {
+  const e = t.maxContentScale, o = t.minContentScale, r = e !== null ? 1 / e : 0, n = o !== null ? 1 / o : 1 / 0;
   return (h) => {
-    const s = h.prevTransform, c = h.nextTransform;
-    let d = c.scale, a = c.x, l = c.y;
-    if (c.scale > n && c.scale > s.scale) {
-      d = Math.max(s.scale, n), a = s.x, l = s.y;
-      const g = (d - s.scale) / (c.scale - s.scale);
-      a = s.x + (c.x - s.x) * g, l = s.y + (c.y - s.y) * g;
+    const s = h.prevTransform, d = h.nextTransform;
+    let c = d.scale, a = d.x, l = d.y;
+    if (d.scale > n && d.scale > s.scale) {
+      c = Math.max(s.scale, n), a = s.x, l = s.y;
+      const g = (c - s.scale) / (d.scale - s.scale);
+      a = s.x + (d.x - s.x) * g, l = s.y + (d.y - s.y) * g;
     }
-    if (c.scale < r && c.scale < s.scale) {
-      d = Math.min(s.scale, r), a = s.x, l = s.y;
-      const g = (d - s.scale) / (c.scale - s.scale);
-      a = s.x + (c.x - s.x) * g, l = s.y + (c.y - s.y) * g;
+    if (d.scale < r && d.scale < s.scale) {
+      c = Math.min(s.scale, r), a = s.x, l = s.y;
+      const g = (c - s.scale) / (d.scale - s.scale);
+      a = s.x + (d.x - s.x) * g, l = s.y + (d.y - s.y) * g;
     }
     return {
-      scale: d,
+      scale: c,
       x: a,
       y: l
     };
   };
-}, dt = (e) => (t) => e.reduce(
+}, ae = (t) => (e) => t.reduce(
   (o, r) => r({
-    prevTransform: t.prevTransform,
+    prevTransform: e.prevTransform,
     nextTransform: o,
-    canvasWidth: t.canvasWidth,
-    canvasHeight: t.canvasHeight
+    canvasWidth: e.canvasWidth,
+    canvasHeight: e.canvasHeight
   }),
-  t.nextTransform
-), _ = (e) => {
-  if (typeof e == "function")
-    return e;
-  switch (e.type) {
+  e.nextTransform
+), J = (t) => {
+  if (typeof t == "function")
+    return t;
+  switch (t.type) {
     case "scale-limit":
-      return ct({
-        minContentScale: e.minContentScale ?? 0,
-        maxContentScale: e.maxContentScale ?? 1 / 0
+      return ce({
+        minContentScale: t.minContentScale ?? 0,
+        maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return ht({
-        minX: e.minX ?? -1 / 0,
-        maxX: e.maxX ?? 1 / 0,
-        minY: e.minY ?? -1 / 0,
-        maxY: e.maxY ?? 1 / 0
+      return de({
+        minX: t.minX ?? -1 / 0,
+        maxX: t.maxX ?? 1 / 0,
+        minY: t.minY ?? -1 / 0,
+        maxY: t.maxY ?? 1 / 0
       });
   }
-}, at = (e) => {
-  var v, A, S, T, z, L, D, P, U, j, G, K;
-  const t = (v = e == null ? void 0 : e.scale) == null ? void 0 : v.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
+}, le = (t) => {
+  var y, S, p, T, k, V, D, C, H, G, K, _;
+  const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
   let n;
-  r !== void 0 ? Array.isArray(r) ? n = dt(
+  r !== void 0 ? Array.isArray(r) ? n = ae(
     r.map(
-      (V) => _(V)
+      (P) => J(P)
     )
-  ) : n = _(r) : n = (V) => V.nextTransform;
-  const h = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", s = ((S = e == null ? void 0 : e.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
-  }), c = ((T = e == null ? void 0 : e.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), d = (z = e == null ? void 0 : e.shift) == null ? void 0 : z.mouseDownEventVerifier, a = d !== void 0 ? d : (V) => V.button === 0, l = (L = e == null ? void 0 : e.shift) == null ? void 0 : L.mouseUpEventVerifier, g = l !== void 0 ? l : (V) => V.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
+  ) : n = J(r) : n = (P) => P.nextTransform;
+  const h = ((S = t == null ? void 0 : t.shift) == null ? void 0 : S.cursor) !== void 0 ? t.shift.cursor : "grab", s = ((p = t == null ? void 0 : t.events) == null ? void 0 : p.onBeforeTransformChange) ?? (() => {
+  }), d = ((T = t == null ? void 0 : t.events) == null ? void 0 : T.onTransformChange) ?? (() => {
+  }), c = (k = t == null ? void 0 : t.shift) == null ? void 0 : k.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (V = t == null ? void 0 : t.shift) == null ? void 0 : V.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, f = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = f !== void 0 ? f : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((P = e == null ? void 0 : e.events) == null ? void 0 : P.onTransformStarted) ?? (() => {
+    onTransformStarted: ((C = t == null ? void 0 : t.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((U = e == null ? void 0 : e.events) == null ? void 0 : U.onTransformFinished) ?? (() => {
+    onTransformFinished: ((H = t == null ? void 0 : t.events) == null ? void 0 : H.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: s,
-    onTransformChange: c,
+    onTransformChange: d,
     transformPreprocessor: n,
     shiftCursor: h,
     mouseDownEventVerifier: a,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: x,
-    scaleWheelFinishTimeout: ((j = e == null ? void 0 : e.scale) == null ? void 0 : j.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((G = e == null ? void 0 : e.events) == null ? void 0 : G.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((G = t == null ? void 0 : t.scale) == null ? void 0 : G.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((K = e == null ? void 0 : e.events) == null ? void 0 : K.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onResizeTransformFinished) ?? (() => {
     })
   };
-}, m = (e) => {
-  const t = [], o = e.touches.length;
-  for (let c = 0; c < o; c++)
-    t.push([e.touches[c].clientX, e.touches[c].clientY]);
-  const r = t.reduce(
-    (c, d) => [c[0] + d[0], c[1] + d[1]],
+}, b = (t) => {
+  const e = [], o = t.touches.length;
+  for (let d = 0; d < o; d++)
+    e.push([t.touches[d].clientX, t.touches[d].clientY]);
+  const r = e.reduce(
+    (d, c) => [d[0] + c[0], d[1] + c[1]],
     [0, 0]
-  ), n = [r[0] / o, r[1] / o], s = t.map((c) => [c[0] - n[0], c[1] - n[1]]).reduce(
-    (c, d) => c + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+  ), n = [r[0] / o, r[1] / o], s = e.map((d) => [d[0] - n[0], d[1] - n[1]]).reduce(
+    (d, c) => d + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
     0
   );
   return {
@@ -440,62 +457,62 @@ const ht = (e) => {
     y: n[1],
     scale: s / o,
     touchesCnt: o,
-    touches: t
+    touches: e
   };
-}, lt = (e, t, o) => ({
-  scale: e.scale,
-  x: e.x + e.scale * t,
-  y: e.y + e.scale * o
-}), gt = (e, t, o, r) => ({
-  scale: e.scale * t,
-  x: e.scale * (1 - t) * o + e.x,
-  y: e.scale * (1 - t) * r + e.y
+}, ge = (t, e, o) => ({
+  scale: t.scale,
+  x: t.x + t.scale * e,
+  y: t.y + t.scale * o
+}), ue = (t, e, o, r) => ({
+  scale: t.scale * e,
+  x: t.scale * (1 - e) * o + t.x,
+  y: t.scale * (1 - e) * r + t.y
 });
-class O {
-  constructor(t, o) {
+class q {
+  constructor(e, o) {
     i(this, "graph");
     i(this, "viewport");
     i(this, "element", null);
     i(this, "prevTouches", null);
     i(this, "window", window);
     i(this, "wheelFinishTimer", null);
-    i(this, "onMouseDown", (t) => {
-      this.element === null || !this.options.mouseDownEventVerifier(t) || (W(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
+    i(this, "onMouseDown", (e) => {
+      this.element === null || !this.options.mouseDownEventVerifier(e) || (R(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
     });
-    i(this, "onWindowMouseMove", (t) => {
-      if (this.element === null || !C(this.element, t.clientX, t.clientY) || !$(this.window, t.clientX, t.clientY)) {
+    i(this, "onWindowMouseMove", (e) => {
+      if (this.element === null || !$(this.element, e.clientX, e.clientY) || !W(this.window, e.clientX, e.clientY)) {
         this.stopMouseDrag();
         return;
       }
-      const o = -t.movementX, r = -t.movementY;
+      const o = -e.movementX, r = -e.movementY;
       this.moveViewport(this.element, o, r);
     });
-    i(this, "onWindowMouseUp", (t) => {
-      this.element === null || !this.options.mouseUpEventVerifier(t) || this.stopMouseDrag();
+    i(this, "onWindowMouseUp", (e) => {
+      this.element === null || !this.options.mouseUpEventVerifier(e) || this.stopMouseDrag();
     });
-    i(this, "onWheelScroll", (t) => {
-      if (!this.options.mouseWheelEventVerifier(t))
+    i(this, "onWheelScroll", (e) => {
+      if (!this.options.mouseWheelEventVerifier(e))
         return;
-      t.preventDefault();
-      const { left: o, top: r } = this.element.getBoundingClientRect(), n = t.clientX - o, h = t.clientY - r, c = 1 / (t.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
-      this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(this.element, c, n, h), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      e.preventDefault();
+      const { left: o, top: r } = this.element.getBoundingClientRect(), n = e.clientX - o, h = e.clientY - r, d = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
+      this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(this.element, d, n, h), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.options.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.options.scaleWheelFinishTimeout);
     });
-    i(this, "onTouchStart", (t) => {
+    i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = m(t);
+        this.prevTouches = b(e);
         return;
       }
-      this.prevTouches = m(t), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
+      this.prevTouches = b(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
     });
-    i(this, "onWindowTouchMove", (t) => {
+    i(this, "onWindowTouchMove", (e) => {
       const o = this.element;
       if (o === null)
         return;
-      const r = m(t);
+      const r = b(e);
       if (!r.touches.every(
-        (h) => C(o, h[0], h[1]) && $(this.window, h[0], h[1])
+        (h) => $(o, h[0], h[1]) && W(this.window, h[0], h[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -505,64 +522,64 @@ class O {
         -(r.x - this.prevTouches.x),
         -(r.y - this.prevTouches.y)
       ), r.touchesCnt === 2) {
-        const { left: h, top: s } = o.getBoundingClientRect(), c = this.prevTouches.x - h, d = this.prevTouches.y - s, l = 1 / (r.scale / this.prevTouches.scale);
-        this.scaleViewport(o, l, c, d);
+        const { left: h, top: s } = o.getBoundingClientRect(), d = this.prevTouches.x - h, c = this.prevTouches.y - s, l = 1 / (r.scale / this.prevTouches.scale);
+        this.scaleViewport(o, l, d, c);
       }
       this.prevTouches = r;
     });
-    i(this, "onWindowTouchFinish", (t) => {
-      t.touches.length > 0 ? this.prevTouches = m(t) : this.stopTouchDrag();
+    i(this, "onWindowTouchFinish", (e) => {
+      e.touches.length > 0 ? this.prevTouches = b(e) : this.stopTouchDrag();
     });
     i(this, "observer", new ResizeObserver(() => {
-      const t = this.canvas.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
-        prevTransform: t,
-        nextTransform: t,
+      const e = this.canvas.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
+        prevTransform: e,
+        nextTransform: e,
         canvasWidth: o,
         canvasHeight: r
       });
       this.options.onResizeTransformStarted(), this.canvas.patchViewportMatrix(n), this.options.onResizeTransformFinished();
     }));
     i(this, "options");
-    this.canvas = t, this.options = at(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
+    this.canvas = e, this.options = le(o), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
   }
-  attach(t) {
-    this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element);
+  attach(e) {
+    this.detach(), this.element = e, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element);
   }
   detach() {
     this.canvas.detach(), this.element !== null && (this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element = null);
   }
-  addNode(t) {
-    this.canvas.addNode(t);
+  addNode(e) {
+    this.canvas.addNode(e);
   }
-  updateNode(t, o) {
-    this.canvas.updateNode(t, o);
+  updateNode(e, o) {
+    this.canvas.updateNode(e, o);
   }
-  removeNode(t) {
-    this.canvas.removeNode(t);
+  removeNode(e) {
+    this.canvas.removeNode(e);
   }
-  markPort(t) {
-    this.canvas.markPort(t);
+  markPort(e) {
+    this.canvas.markPort(e);
   }
-  updatePort(t, o) {
-    this.canvas.updatePort(t, o);
+  updatePort(e, o) {
+    this.canvas.updatePort(e, o);
   }
-  unmarkPort(t) {
-    this.canvas.unmarkPort(t);
+  unmarkPort(e) {
+    this.canvas.unmarkPort(e);
   }
-  addEdge(t) {
-    this.canvas.addEdge(t);
+  addEdge(e) {
+    this.canvas.addEdge(e);
   }
-  updateEdge(t, o) {
-    this.canvas.updateEdge(t, o);
+  updateEdge(e, o) {
+    this.canvas.updateEdge(e, o);
   }
-  removeEdge(t) {
-    this.canvas.removeEdge(t);
+  removeEdge(e) {
+    this.canvas.removeEdge(e);
   }
-  patchViewportMatrix(t) {
-    this.canvas.patchViewportMatrix(t);
+  patchViewportMatrix(e) {
+    this.canvas.patchViewportMatrix(e);
   }
-  patchContentMatrix(t) {
-    this.canvas.patchContentMatrix(t);
+  patchContentMatrix(e) {
+    this.canvas.patchContentMatrix(e);
   }
   clear() {
     this.canvas.clear();
@@ -570,26 +587,26 @@ class O {
   destroy() {
     this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
-  moveViewport(t, o, r) {
-    const n = this.viewport.getViewportMatrix(), h = lt(n, o, r), { width: s, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
+  moveViewport(e, o, r) {
+    const n = this.viewport.getViewportMatrix(), h = ge(n, o, r), { width: s, height: d } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
       prevTransform: n,
       nextTransform: h,
       canvasWidth: s,
-      canvasHeight: c
+      canvasHeight: d
     });
-    this.performTransform(d);
+    this.performTransform(c);
   }
-  scaleViewport(t, o, r, n) {
-    const h = this.canvas.viewport.getViewportMatrix(), s = gt(h, o, r, n), { width: c, height: d } = t.getBoundingClientRect(), a = this.options.transformPreprocessor({
+  scaleViewport(e, o, r, n) {
+    const h = this.canvas.viewport.getViewportMatrix(), s = ue(h, o, r, n), { width: d, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
       prevTransform: h,
       nextTransform: s,
-      canvasWidth: c,
-      canvasHeight: d
+      canvasWidth: d,
+      canvasHeight: c
     });
     this.performTransform(a);
   }
   stopMouseDrag() {
-    this.element !== null && W(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
+    this.element !== null && R(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -600,101 +617,101 @@ class O {
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-  performTransform(t) {
-    this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(t), this.options.onTransformChange();
+  performTransform(e) {
+    this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.options.onTransformChange();
   }
 }
-class ut {
+class we {
   constructor() {
     i(this, "keyMap", /* @__PURE__ */ new Map());
     i(this, "valueMap", /* @__PURE__ */ new Map());
   }
-  set(t, o) {
-    this.keyMap.set(t, o), this.valueMap.set(o, t);
+  set(e, o) {
+    this.keyMap.set(e, o), this.valueMap.set(o, e);
   }
-  hasKey(t) {
-    return this.keyMap.has(t);
+  hasKey(e) {
+    return this.keyMap.has(e);
   }
-  hasValue(t) {
-    return this.valueMap.has(t);
+  hasValue(e) {
+    return this.valueMap.has(e);
   }
-  getByKey(t) {
-    return this.keyMap.get(t);
+  getByKey(e) {
+    return this.keyMap.get(e);
   }
-  getByValue(t) {
-    return this.valueMap.get(t);
+  getByValue(e) {
+    return this.valueMap.get(e);
   }
-  deleteByKey(t) {
-    const o = this.keyMap.get(t);
-    o !== void 0 && this.valueMap.delete(o), this.keyMap.delete(t);
+  deleteByKey(e) {
+    const o = this.keyMap.get(e);
+    o !== void 0 && this.valueMap.delete(o), this.keyMap.delete(e);
   }
-  deleteByValue(t) {
-    const o = this.valueMap.get(t);
-    o !== void 0 && this.keyMap.delete(o), this.valueMap.delete(t);
+  deleteByValue(e) {
+    const o = this.valueMap.get(e);
+    o !== void 0 && this.keyMap.delete(o), this.valueMap.delete(e);
   }
-  forEach(t) {
+  forEach(e) {
     this.keyMap.forEach((o, r) => {
-      t(o, r);
+      e(o, r);
     });
   }
   clear() {
     this.keyMap.clear(), this.valueMap.clear();
   }
 }
-class wt {
-  constructor(t) {
+class fe {
+  constructor(e) {
     i(this, "viewport");
     i(this, "graph");
-    i(this, "nodes", new ut());
+    i(this, "nodes", new we());
     i(this, "nodesResizeObserver");
     i(this, "window", window);
-    this.canvas = t, this.nodesResizeObserver = new this.window.ResizeObserver((o) => {
+    this.canvas = e, this.nodesResizeObserver = new this.window.ResizeObserver((o) => {
       o.forEach((r) => {
         const n = r.target;
         this.handleNodeResize(n);
       });
     }), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph;
   }
-  attach(t) {
-    this.canvas.attach(t);
+  attach(e) {
+    this.canvas.attach(e);
   }
   detach() {
     this.canvas.detach();
   }
-  addNode(t) {
-    this.canvas.addNode(t), this.nodes.set(t.id, t.element), this.nodesResizeObserver.observe(t.element);
+  addNode(e) {
+    this.canvas.addNode(e), this.nodes.set(e.id, e.element), this.nodesResizeObserver.observe(e.element);
   }
-  updateNode(t, o) {
-    this.canvas.updateNode(t, o);
+  updateNode(e, o) {
+    this.canvas.updateNode(e, o);
   }
-  removeNode(t) {
-    this.canvas.removeNode(t);
-    const o = this.nodes.getByKey(t);
-    this.nodes.deleteByKey(t), this.nodesResizeObserver.unobserve(o);
+  removeNode(e) {
+    this.canvas.removeNode(e);
+    const o = this.nodes.getByKey(e);
+    this.nodes.deleteByKey(e), this.nodesResizeObserver.unobserve(o);
   }
-  markPort(t) {
-    this.canvas.markPort(t);
+  markPort(e) {
+    this.canvas.markPort(e);
   }
-  updatePort(t, o) {
-    this.canvas.updatePort(t, o);
+  updatePort(e, o) {
+    this.canvas.updatePort(e, o);
   }
-  unmarkPort(t) {
-    this.canvas.unmarkPort(t);
+  unmarkPort(e) {
+    this.canvas.unmarkPort(e);
   }
-  addEdge(t) {
-    this.canvas.addEdge(t);
+  addEdge(e) {
+    this.canvas.addEdge(e);
   }
-  updateEdge(t, o) {
-    this.canvas.updateEdge(t, o);
+  updateEdge(e, o) {
+    this.canvas.updateEdge(e, o);
   }
-  removeEdge(t) {
-    this.canvas.removeEdge(t);
+  removeEdge(e) {
+    this.canvas.removeEdge(e);
   }
-  patchViewportMatrix(t) {
-    this.canvas.patchViewportMatrix(t);
+  patchViewportMatrix(e) {
+    this.canvas.patchViewportMatrix(e);
   }
-  patchContentMatrix(t) {
-    this.canvas.patchContentMatrix(t);
+  patchContentMatrix(e) {
+    this.canvas.patchContentMatrix(e);
   }
   clear() {
     this.canvas.clear(), this.nodesResizeObserver.disconnect(), this.nodes.clear();
@@ -702,15 +719,15 @@ class wt {
   destroy() {
     this.clear(), this.canvas.destroy();
   }
-  handleNodeResize(t) {
-    const o = this.nodes.getByValue(t);
+  handleNodeResize(e) {
+    const o = this.nodes.getByValue(e);
     this.canvas.updateNode(o, {}), this.graph.getNodeAdjacentEdgeIds(o).forEach((n) => {
       this.canvas.updateEdge(n, {});
     });
   }
 }
-class yt {
-  constructor(t, o, r, n) {
+class ye {
+  constructor(e, o, r, n) {
     i(this, "graph");
     i(this, "viewport");
     i(this, "canvas");
@@ -728,22 +745,22 @@ class yt {
       yFrom: 1 / 0,
       yTo: 1 / 0
     });
-    i(this, "updateLoadedArea", (t) => {
+    i(this, "updateLoadedArea", (e) => {
       this.loadedArea = {
-        xFrom: t.x,
-        xTo: t.x + t.width,
-        yFrom: t.y,
-        yTo: t.y + t.height
+        xFrom: e.x,
+        xTo: e.x + e.width,
+        yFrom: e.y,
+        yTo: e.y + e.height
       };
     });
-    var d, a;
+    var c, a;
     this.trigger = o, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new this.window.ResizeObserver((l) => {
       const g = l[0];
       this.viewportWidth = g.contentRect.width, this.viewportHeight = g.contentRect.height, this.scheduleLoadAreaAroundViewport();
     });
-    const h = ((d = r == null ? void 0 : r.events) == null ? void 0 : d.onTransformFinished) ?? (() => {
+    const h = ((c = r == null ? void 0 : r.events) == null ? void 0 : c.onTransformFinished) ?? (() => {
     }), s = ((a = r == null ? void 0 : r.events) == null ? void 0 : a.onTransformChange) ?? (() => {
-    }), c = {
+    }), d = {
       ...r,
       events: {
         ...r == null ? void 0 : r.events,
@@ -756,49 +773,49 @@ class yt {
         }
       }
     };
-    this.canvas = new O(
-      t,
-      c
+    this.canvas = new q(
+      e,
+      d
     ), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.viewport = this.canvas.viewport, this.graph = this.canvas.graph, this.trigger.subscribe(this.updateLoadedArea);
   }
-  attach(t) {
-    this.detach(), this.element = t, this.canvasResizeObserver.observe(this.element), this.canvas.attach(t);
+  attach(e) {
+    this.detach(), this.element = e, this.canvasResizeObserver.observe(this.element), this.canvas.attach(e);
   }
   detach() {
     this.element !== null && (this.canvasResizeObserver.unobserve(this.element), this.element = null, this.viewportWidth = 0, this.viewportHeight = 0), this.canvas.detach();
   }
-  addNode(t) {
-    this.canvas.addNode(t);
+  addNode(e) {
+    this.canvas.addNode(e);
   }
-  updateNode(t, o) {
-    this.canvas.updateNode(t, o);
+  updateNode(e, o) {
+    this.canvas.updateNode(e, o);
   }
-  removeNode(t) {
-    this.canvas.removeNode(t);
+  removeNode(e) {
+    this.canvas.removeNode(e);
   }
-  markPort(t) {
-    this.canvas.markPort(t);
+  markPort(e) {
+    this.canvas.markPort(e);
   }
-  updatePort(t, o) {
-    this.canvas.updatePort(t, o);
+  updatePort(e, o) {
+    this.canvas.updatePort(e, o);
   }
-  unmarkPort(t) {
-    this.canvas.unmarkPort(t);
+  unmarkPort(e) {
+    this.canvas.unmarkPort(e);
   }
-  addEdge(t) {
-    this.canvas.addEdge(t);
+  addEdge(e) {
+    this.canvas.addEdge(e);
   }
-  updateEdge(t, o) {
-    this.canvas.updateEdge(t, o);
+  updateEdge(e, o) {
+    this.canvas.updateEdge(e, o);
   }
-  removeEdge(t) {
-    this.canvas.removeEdge(t);
+  removeEdge(e) {
+    this.canvas.removeEdge(e);
   }
-  patchViewportMatrix(t) {
-    this.canvas.patchViewportMatrix(t), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
+  patchViewportMatrix(e) {
+    this.canvas.patchViewportMatrix(e), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
   }
-  patchContentMatrix(t) {
-    this.canvas.patchContentMatrix(t), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
+  patchContentMatrix(e) {
+    this.canvas.patchContentMatrix(e), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport();
   }
   clear() {
     this.canvas.clear();
@@ -812,151 +829,153 @@ class yt {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const t = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - this.nodeHorizontal, n = this.viewportMatrix.y - this.nodeVertical, h = this.viewportMatrix.x + t + this.nodeHorizontal, s = this.viewportMatrix.y + o + this.nodeVertical;
+    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - this.nodeHorizontal, n = this.viewportMatrix.y - this.nodeVertical, h = this.viewportMatrix.x + e + this.nodeHorizontal, s = this.viewportMatrix.y + o + this.nodeVertical;
     this.loadedArea.xFrom < r && this.loadedArea.xTo > h && this.loadedArea.yFrom < n && this.loadedArea.yTo > s || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const t = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - t - this.nodeHorizontal, n = this.viewportMatrix.y - o - this.nodeVertical, h = 3 * t + 2 * this.nodeHorizontal, s = 3 * o + 2 * this.nodeVertical;
+    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - e - this.nodeHorizontal, n = this.viewportMatrix.y - o - this.nodeVertical, h = 3 * e + 2 * this.nodeHorizontal, s = 3 * o + 2 * this.nodeVertical;
     this.trigger.emit({ x: r, y: n, width: h, height: s });
   }
 }
-const vt = () => {
-  const e = document.createElement("div");
-  return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
-}, ft = () => {
-  const e = document.createElement("div");
-  return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
-}, xt = () => {
-  const e = document.createElement("div");
-  return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.visibility = "hidden", e;
+const ve = () => {
+  const t = document.createElement("div");
+  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
+}, xe = () => {
+  const t = document.createElement("div");
+  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
+}, Ee = () => {
+  const t = document.createElement("div");
+  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
 };
-class Et {
-  constructor(t, o) {
+class Ae {
+  constructor(e, o) {
     i(this, "canvasWrapper", null);
-    i(this, "host", vt());
-    i(this, "container", ft());
+    i(this, "host", ve());
+    i(this, "container", xe());
     i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "applyTransform", () => {
-      const t = this.viewportStore.getContentMatrix();
-      this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
+      const e = this.viewportStore.getContentMatrix();
+      this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
     });
-    this.graphStore = t, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdate.subscribe(this.applyTransform);
+    this.graphStore = e, this.viewportStore = o, this.host.appendChild(this.container), this.viewportStore.onAfterUpdate.subscribe(this.applyTransform);
   }
-  attach(t) {
-    this.detach(), this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
+  attach(e) {
+    this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host), this.graphStore.getAllEdgeIds().forEach((o) => {
+      this.renderEdge(o);
+    });
   }
   detach() {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
-  attachNode(t) {
-    const o = this.graphStore.getNode(t), r = xt();
-    r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(t, r), this.updateNodeCoordinates(t), this.updateNodePriority(t), r.style.visibility = "visible";
+  attachNode(e) {
+    const o = this.graphStore.getNode(e), r = Ee();
+    r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(e, r), this.updateNodeCoordinates(e), this.updateNodePriority(e), r.style.visibility = "visible";
   }
-  detachNode(t) {
-    const o = this.nodeIdToWrapperElementMap.get(t);
-    o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(t);
+  detachNode(e) {
+    const o = this.nodeIdToWrapperElementMap.get(e);
+    o.removeChild(o.firstChild), this.container.removeChild(o), this.nodeIdToWrapperElementMap.delete(e);
   }
-  attachEdge(t) {
-    const o = this.graphStore.getEdge(t).shape.svg;
-    this.edgeIdToElementMap.set(t, o), this.container.appendChild(o), this.renderEdge(t), this.updateEdgePriority(t);
+  attachEdge(e) {
+    const o = this.graphStore.getEdge(e).shape.svg;
+    this.edgeIdToElementMap.set(e, o), this.container.appendChild(o), this.renderEdge(e), this.updateEdgePriority(e);
   }
-  detachEdge(t) {
-    const o = this.edgeIdToElementMap.get(t);
-    this.container.removeChild(o), this.edgeIdToElementMap.delete(t);
+  detachEdge(e) {
+    const o = this.edgeIdToElementMap.get(e);
+    this.container.removeChild(o), this.edgeIdToElementMap.delete(e);
   }
   clear() {
-    this.edgeIdToElementMap.forEach((t, o) => {
+    this.edgeIdToElementMap.forEach((e, o) => {
       this.detachEdge(o);
-    }), this.nodeIdToWrapperElementMap.forEach((t, o) => {
+    }), this.nodeIdToWrapperElementMap.forEach((e, o) => {
       this.detachNode(o);
     });
   }
   destroy() {
     this.viewportStore.onAfterUpdate.unsubscribe(this.applyTransform), this.clear(), this.detach(), this.host.removeChild(this.container);
   }
-  updateNodeCoordinates(t) {
-    const o = this.nodeIdToWrapperElementMap.get(t), r = this.graphStore.getNode(t), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportStore.getViewportMatrix().scale, c = r.centerFn(n, h), d = r.x - s * c.x, a = r.y - s * c.y;
-    o.style.transform = `translate(${d}px, ${a}px)`;
+  updateNodeCoordinates(e) {
+    const o = this.nodeIdToWrapperElementMap.get(e), r = this.graphStore.getNode(e), { width: n, height: h } = r.element.getBoundingClientRect(), s = this.viewportStore.getViewportMatrix().scale, d = r.centerFn(n, h), c = r.x - s * d.x, a = r.y - s * d.y;
+    o.style.transform = `translate(${c}px, ${a}px)`;
   }
-  updateNodePriority(t) {
-    const o = this.graphStore.getNode(t), r = this.nodeIdToWrapperElementMap.get(t);
+  updateNodePriority(e) {
+    const o = this.graphStore.getNode(e), r = this.nodeIdToWrapperElementMap.get(e);
     r.style.zIndex = `${o.priority}`;
   }
-  updateEdgeShape(t) {
-    const o = this.edgeIdToElementMap.get(t);
+  updateEdgeShape(e) {
+    const o = this.edgeIdToElementMap.get(e);
     this.container.removeChild(o);
-    const r = this.graphStore.getEdge(t);
-    this.edgeIdToElementMap.set(t, r.shape.svg), this.container.appendChild(r.shape.svg);
+    const r = this.graphStore.getEdge(e);
+    this.edgeIdToElementMap.set(e, r.shape.svg), this.container.appendChild(r.shape.svg);
   }
-  renderEdge(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), a = {
-      x: d.scale * (h.left - c.left) + d.x,
-      y: d.scale * (h.top - c.top) + d.y
+  renderEdge(e) {
+    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from), n = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), s = n.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = {
+      x: c.scale * (h.left - d.left) + c.x,
+      y: c.scale * (h.top - d.top) + c.y
     }, l = {
-      x: d.scale * (s.left - c.left) + d.x,
-      y: d.scale * (s.top - c.top) + d.y
+      x: c.scale * (s.left - d.left) + c.x,
+      y: c.scale * (s.top - d.top) + c.y
     }, g = {
       x: a.x,
       y: a.y,
-      width: h.width * d.scale,
-      height: h.height * d.scale,
+      width: h.width * c.scale,
+      height: h.height * c.scale,
       direction: r.direction,
       portId: o.from,
       nodeId: r.nodeId
-    }, y = {
+    }, f = {
       x: l.x,
       y: l.y,
-      width: s.width * d.scale,
-      height: s.height * d.scale,
+      width: s.width * c.scale,
+      height: s.height * c.scale,
       direction: n.direction,
       portId: o.to,
       nodeId: n.nodeId
     };
     o.shape.render({
       from: g,
-      to: y
+      to: f
     });
   }
-  updateEdgePriority(t) {
-    const o = this.graphStore.getEdge(t);
+  updateEdgePriority(e) {
+    const o = this.graphStore.getEdge(e);
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class St {
-  constructor(t) {
+class pe {
+  constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
     i(this, "xTo", 1 / 0);
     i(this, "yTo", 1 / 0);
-    this.graphStore = t;
+    this.graphStore = e;
   }
-  setRenderingBox(t) {
-    this.xFrom = t.x, this.xTo = t.x + t.width, this.yFrom = t.y, this.yTo = t.y + t.height;
+  setRenderingBox(e) {
+    this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
   }
-  hasNode(t) {
-    const o = this.graphStore.getNode(t);
+  hasNode(e) {
+    const o = this.graphStore.getNode(e);
     return o.x >= this.xFrom && o.x <= this.xTo && o.y >= this.yFrom && o.y <= this.yTo;
   }
-  hasEdge(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), s = this.graphStore.getNode(n), c = Math.min(h.x, s.x), d = Math.max(h.x, s.x), a = Math.min(h.y, s.y), l = Math.max(h.y, s.y);
-    return c <= this.xTo && d >= this.xFrom && a <= this.yTo && l >= this.yFrom;
+  hasEdge(e) {
+    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), s = this.graphStore.getNode(n), d = Math.min(h.x, s.x), c = Math.max(h.x, s.x), a = Math.min(h.y, s.y), l = Math.max(h.y, s.y);
+    return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
   }
 }
-class At {
-  constructor(t, o, r) {
+class Se {
+  constructor(e, o, r) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
     i(this, "renderingBox");
-    i(this, "updateViewport", (t) => {
-      this.renderingBox.setRenderingBox(t);
+    i(this, "updateViewport", (e) => {
+      this.renderingBox.setRenderingBox(e);
       const o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
       this.graphStore.getAllNodeIds().forEach((s) => {
-        const c = this.renderingBox.hasNode(s), d = this.attachedNodes.has(s);
-        c && !d ? o.add(s) : !c && d && r.add(s);
+        const d = this.renderingBox.hasNode(s), c = this.attachedNodes.has(s);
+        d && !c ? o.add(s) : !d && c && r.add(s);
       }), this.graphStore.getAllEdgeIds().forEach((s) => {
-        const c = this.renderingBox.hasEdge(s), d = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
-        c && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), c && !d ? n.add(s) : !c && d && h.add(s);
+        const d = this.renderingBox.hasEdge(s), c = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
+        d && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), d && !c ? n.add(s) : !d && c && h.add(s);
       }), h.forEach((s) => {
         this.handleDetachEdge(s);
       }), r.forEach((s) => {
@@ -967,42 +986,42 @@ class At {
         this.handleAttachEdge(s);
       });
     });
-    this.htmlView = t, this.graphStore = o, this.trigger = r, this.renderingBox = new St(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new pe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
-  attach(t) {
-    this.htmlView.attach(t);
+  attach(e) {
+    this.htmlView.attach(e);
   }
   detach() {
     this.htmlView.detach();
   }
-  attachNode(t) {
-    this.renderingBox.hasNode(t) && this.handleAttachNode(t);
+  attachNode(e) {
+    this.renderingBox.hasNode(e) && this.handleAttachNode(e);
   }
-  detachNode(t) {
-    this.attachedNodes.has(t) && this.handleDetachNode(t);
+  detachNode(e) {
+    this.attachedNodes.has(e) && this.handleDetachNode(e);
   }
-  attachEdge(t) {
-    this.renderingBox.hasEdge(t) && this.attachEdgeEntities(t);
+  attachEdge(e) {
+    this.renderingBox.hasEdge(e) && this.attachEdgeEntities(e);
   }
-  detachEdge(t) {
-    this.attachedEdges.has(t) && this.handleDetachEdge(t);
+  detachEdge(e) {
+    this.attachedEdges.has(e) && this.handleDetachEdge(e);
   }
-  updateNodeCoordinates(t) {
-    this.attachedNodes.has(t) ? this.htmlView.updateNodeCoordinates(t) : this.renderingBox.hasNode(t) && (this.handleAttachNode(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((o) => {
+  updateNodeCoordinates(e) {
+    this.attachedNodes.has(e) ? this.htmlView.updateNodeCoordinates(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
       this.attachEdgeEntities(o);
     }));
   }
-  updateNodePriority(t) {
-    this.attachedNodes.has(t) && this.htmlView.updateNodePriority(t);
+  updateNodePriority(e) {
+    this.attachedNodes.has(e) && this.htmlView.updateNodePriority(e);
   }
-  updateEdgeShape(t) {
-    this.attachedEdges.has(t) && this.htmlView.updateEdgeShape(t);
+  updateEdgeShape(e) {
+    this.attachedEdges.has(e) && this.htmlView.updateEdgeShape(e);
   }
-  renderEdge(t) {
-    this.attachedEdges.has(t) && this.htmlView.renderEdge(t);
+  renderEdge(e) {
+    this.attachedEdges.has(e) && this.htmlView.renderEdge(e);
   }
-  updateEdgePriority(t) {
-    this.attachedEdges.has(t) && this.htmlView.updateEdgePriority(t);
+  updateEdgePriority(e) {
+    this.attachedEdges.has(e) && this.htmlView.updateEdgePriority(e);
   }
   clear() {
     this.htmlView.clear(), this.attachedNodes.clear(), this.attachedEdges.clear();
@@ -1010,51 +1029,51 @@ class At {
   destroy() {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
-  attachEdgeEntities(t) {
-    const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId;
-    this.attachedNodes.has(r) || this.handleAttachNode(r), this.attachedNodes.has(n) || this.handleAttachNode(n), this.handleAttachEdge(t);
+  attachEdgeEntities(e) {
+    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, n = this.graphStore.getPort(o.to).nodeId;
+    this.attachedNodes.has(r) || this.handleAttachNode(r), this.attachedNodes.has(n) || this.handleAttachNode(n), this.handleAttachEdge(e);
   }
-  handleAttachNode(t) {
-    this.attachedNodes.add(t), this.htmlView.attachNode(t);
+  handleAttachNode(e) {
+    this.attachedNodes.add(e), this.htmlView.attachNode(e);
   }
-  handleDetachNode(t) {
-    this.htmlView.detachNode(t), this.attachedNodes.delete(t);
+  handleDetachNode(e) {
+    this.htmlView.detachNode(e), this.attachedNodes.delete(e);
   }
-  handleAttachEdge(t) {
-    this.attachedEdges.add(t), this.htmlView.attachEdge(t);
+  handleAttachEdge(e) {
+    this.attachedEdges.add(e), this.htmlView.attachEdge(e);
   }
-  handleDetachEdge(t) {
-    this.htmlView.detachEdge(t), this.attachedEdges.delete(t);
+  handleDetachEdge(e) {
+    this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class q {
+class ee {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
-  subscribe(t) {
-    this.callbacks.add(t);
+  subscribe(e) {
+    this.callbacks.add(e);
   }
-  unsubscribe(t) {
-    this.callbacks.delete(t);
+  unsubscribe(e) {
+    this.callbacks.delete(e);
   }
-  emit(t) {
+  emit(e) {
     this.callbacks.forEach((o) => {
-      o(t);
+      o(e);
     });
   }
 }
-const Tt = () => {
-  const e = new q();
-  return [e, e];
+const E = () => {
+  const t = new ee();
+  return [t, t];
 };
-class Y {
-  constructor(t) {
+class z {
+  constructor(e) {
     i(this, "counter", 0);
-    this.checkExists = t;
+    this.checkExists = e;
   }
-  create(t) {
-    if (t !== void 0)
-      return t;
+  create(e) {
+    if (e !== void 0)
+      return e;
     for (; this.checkExists(this.counter); )
       this.counter++;
     return this.counter;
@@ -1063,250 +1082,250 @@ class Y {
     this.counter = 0;
   }
 }
-class E extends Error {
+class A extends Error {
   constructor() {
     super(...arguments);
     i(this, "name", "HtmlGraphError");
   }
 }
-const pt = (e, t) => ({
-  x: e / 2,
-  y: t / 2
-}), X = (e) => () => e, J = X(0), Mt = () => {
-  let e = 0;
-  return () => e++;
-}, Nt = (e, t) => {
-  let o = J, r = J;
-  const n = Mt();
-  return e === "incremental" && (o = n), t === "incremental" && (r = n), typeof e == "number" && (o = X(e)), typeof t == "number" && (r = X(t)), typeof e == "function" && (o = e), typeof t == "function" && (r = t), {
+const Te = (t, e) => ({
+  x: t / 2,
+  y: e / 2
+}), Y = (t) => () => t, Q = Y(0), Ne = () => {
+  let t = 0;
+  return () => t++;
+}, me = (t, e) => {
+  let o = Q, r = Q;
+  const n = Ne();
+  return t === "incremental" && (o = n), e === "incremental" && (r = n), typeof t == "number" && (o = Y(t)), typeof e == "number" && (r = Y(e)), typeof t == "function" && (o = t), typeof e == "function" && (r = e), {
     nodesPriorityFn: o,
     edgesPriorityFn: r
   };
-}, f = (e, t, o) => ({
-  x: t.x * e.x - t.y * e.y + ((1 - t.x) * o.x + t.y * o.y),
-  y: t.y * e.x + t.x * e.y + ((1 - t.x) * o.y - t.y * o.x)
-}), p = (e, t, o) => ({ x: t * Math.cos(e), y: o * Math.sin(e) }), w = {
+}, v = (t, e, o) => ({
+  x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
+  y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
+}), N = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) }), w = {
   x: 0,
   y: 0
-}, M = (e, t, o, r) => {
+}, m = (t, e, o, r) => {
   const h = [
     w,
     { x: o, y: r },
     { x: o, y: -r }
-  ].map((a) => f(a, e, w)).map((a) => ({ x: a.x + t.x, y: a.y + t.y })), s = `M ${h[0].x} ${h[0].y}`, c = `L ${h[1].x} ${h[1].y}`, d = `L ${h[2].x} ${h[2].y}`;
-  return `${s} ${c} ${d}`;
-}, b = (e, t) => {
+  ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), s = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
+  return `${s} ${d} ${c}`;
+}, L = (t, e) => {
   const o = [];
-  if (e.length > 0 && o.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && o.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
-    const r = e.length - 1;
+  if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
+    const r = t.length - 1;
     let n = 0, h = 0, s = 0;
-    e.forEach((c, d) => {
+    t.forEach((d, c) => {
       let a = 0, l = 0, g = 0;
-      const y = d > 0, x = d < r, v = y && x;
-      if (y && (a = -n, l = -h, g = s), x) {
-        const P = e[d + 1];
-        n = P.x - c.x, h = P.y - c.y, s = Math.sqrt(n * n + h * h);
+      const f = c > 0, x = c < r, y = f && x;
+      if (f && (a = -n, l = -h, g = s), x) {
+        const C = t[c + 1];
+        n = C.x - d.x, h = C.y - d.y, s = Math.sqrt(n * n + h * h);
       }
-      const S = s !== 0 ? Math.min((v ? t : 0) / s, d < r - 1 ? 0.5 : 1) : 0, T = v ? { x: c.x + n * S, y: c.y + h * S } : c, L = g !== 0 ? Math.min((v ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = v ? { x: c.x + a * L, y: c.y + l * L } : c;
-      d > 0 && o.push(`L ${D.x} ${D.y}`), v && o.push(
-        `C ${c.x} ${c.y} ${c.x} ${c.y} ${T.x} ${T.y}`
+      const p = s !== 0 ? Math.min((y ? e : 0) / s, c < r - 1 ? 0.5 : 1) : 0, T = y ? { x: d.x + n * p, y: d.y + h * p } : d, V = g !== 0 ? Math.min((y ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, D = y ? { x: d.x + a * V, y: d.y + l * V } : d;
+      c > 0 && o.push(`L ${D.x} ${D.y}`), y && o.push(
+        `C ${d.x} ${d.y} ${d.x} ${d.y} ${T.x} ${T.y}`
       );
     });
   }
   return o.join(" ");
 }, I = () => {
-  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;
+  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;
 }, F = () => {
-  const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return e.style.transformOrigin = "50% 50%", e;
-}, R = (e, t) => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return t.style.transformOrigin = "50% 50%", t;
+}, U = (t, e) => {
   const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return o.setAttribute("stroke", e), o.setAttribute("stroke-width", `${t}`), o.setAttribute("fill", "none"), o;
-}, N = (e) => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return t.setAttribute("fill", e), t;
-}, k = (e, t) => {
+  return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
+}, M = (t) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("fill", t), e;
+}, B = (t, e) => {
   const o = {
-    x: e.x + e.width / 2,
-    y: e.y + e.height / 2
-  }, r = {
     x: t.x + t.width / 2,
     y: t.y + t.height / 2
-  }, n = Math.min(o.x, r.x), h = Math.min(o.y, r.y), s = Math.abs(r.x - o.x), c = Math.abs(r.y - o.y), d = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
+  }, r = {
+    x: e.x + e.width / 2,
+    y: e.y + e.height / 2
+  }, n = Math.min(o.x, r.x), h = Math.min(o.y, r.y), s = Math.abs(r.x - o.x), d = Math.abs(r.y - o.y), c = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
   return {
     x: n,
     y: h,
     width: s,
-    height: c,
-    flipX: d,
+    height: d,
+    flipX: c,
     flipY: a
   };
-}, Vt = (e) => {
-  const t = f(
-    { x: e.arrowLength, y: w.y },
-    e.fromVect,
+}, Me = (t) => {
+  const e = v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVect,
     w
-  ), o = f(
-    { x: e.to.x - e.arrowLength, y: e.to.y },
-    e.toVect,
-    e.to
+  ), o = v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVect,
+    t.to
   ), r = {
-    x: t.x + e.fromVect.x * e.curvature,
-    y: t.y + e.fromVect.y * e.curvature
+    x: e.x + t.fromVect.x * t.curvature,
+    y: e.y + t.fromVect.y * t.curvature
   }, n = {
-    x: o.x - e.toVect.x * e.curvature,
-    y: o.y - e.toVect.y * e.curvature
-  }, h = `M ${t.x} ${t.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`, s = e.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${t.x} ${t.y} `, c = e.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;
-  return `${s}${h}${c}`;
-}, Lt = (e) => {
-  const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: w.y },
-    e.fromVect,
+    x: o.x - t.toVect.x * t.curvature,
+    y: o.y - t.toVect.y * t.curvature
+  }, h = `M ${e.x} ${e.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`, s = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
+  return `${s}${h}${d}`;
+}, Pe = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
-    { x: e.to.x - e.arrowLength, y: e.to.y },
-    e.toVect,
-    e.to
-  ) : e.to, r = e.arrowLength, n = Math.cos(e.detourDirection) * e.detourDistance, h = Math.sin(e.detourDirection) * e.detourDistance, s = n * e.flipX, c = h * e.flipY, d = f(
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVect,
+    t.to
+  ) : t.to, r = t.arrowLength, n = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, s = n * t.flipX, d = h * t.flipY, c = v(
     { x: r, y: w.y },
-    e.fromVect,
+    t.fromVect,
     w
   ), a = {
-    x: d.x + s,
-    y: d.y + c
-  }, l = f(
-    { x: e.to.x - r, y: e.to.y },
-    e.toVect,
-    e.to
+    x: c.x + s,
+    y: c.y + d
+  }, l = v(
+    { x: t.to.x - r, y: t.to.y },
+    t.toVect,
+    t.to
   ), g = {
     x: l.x + s,
-    y: l.y + c
-  }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
-    x: d.x + e.curvature * e.fromVect.x,
-    y: d.y + e.curvature * e.fromVect.y
-  }, v = {
-    x: l.x - e.curvature * e.toVect.x,
-    y: l.y - e.curvature * e.toVect.y
-  }, A = {
-    x: d.x + s,
-    y: d.y + c
+    y: l.y + d
+  }, f = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
+    x: c.x + t.curvature * t.fromVect.x,
+    y: c.y + t.curvature * t.fromVect.y
+  }, y = {
+    x: l.x - t.curvature * t.toVect.x,
+    y: l.y - t.curvature * t.toVect.y
   }, S = {
+    x: c.x + s,
+    y: c.y + d
+  }, p = {
     x: l.x + s,
-    y: l.y + c
+    y: l.y + d
   };
   return [
-    `M ${t.x} ${t.y}`,
-    `L ${d.x} ${d.y}`,
-    `C ${x.x} ${x.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
-    `C ${S.x} ${S.y} ${v.x} ${v.y} ${l.x} ${l.y}`,
+    `M ${e.x} ${e.y}`,
+    `L ${c.x} ${c.y}`,
+    `C ${x.x} ${x.y} ${S.x} ${S.y} ${f.x} ${f.y}`,
+    `C ${p.x} ${p.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, Dt = (e) => {
-  const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: w.y },
-    e.fromVect,
+}, Ve = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
-    { x: e.to.x - e.arrowLength, y: e.to.y },
-    e.toVect,
-    e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = r - e.roundness, h = f({ x: n, y: w.y }, e.fromVect, w), s = f(
-    { x: e.to.x - n, y: e.to.y },
-    e.toVect,
-    e.to
-  ), c = Math.max((h.x + s.x) / 2, r), d = e.to.y / 2, a = { x: e.flipX > 0 ? c : -r, y: h.y }, l = { x: a.x, y: d }, g = {
-    x: e.flipX > 0 ? e.to.x - c : e.to.x + r,
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVect,
+    t.to
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = v({ x: n, y: w.y }, t.fromVect, w), s = v(
+    { x: t.to.x - n, y: t.to.y },
+    t.toVect,
+    t.to
+  ), d = Math.max((h.x + s.x) / 2, r), c = t.to.y / 2, a = { x: t.flipX > 0 ? d : -r, y: h.y }, l = { x: a.x, y: c }, g = {
+    x: t.flipX > 0 ? t.to.x - d : t.to.x + r,
     y: s.y
-  }, y = { x: g.x, y: d };
-  return b(
-    [t, h, a, l, y, g, s, o],
-    e.roundness
+  }, f = { x: g.x, y: c };
+  return L(
+    [e, h, a, l, f, g, s, o],
+    t.roundness
   );
-}, B = (e) => {
-  const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: w.y },
-    e.fromVect,
+}, X = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
-    { x: e.to.x - e.arrowLength, y: e.to.y },
-    e.toVect,
-    e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = f(
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVect,
+    t.to
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = v(
     { x: r, y: w.y },
-    e.fromVect,
+    t.fromVect,
     w
-  ), h = Math.cos(e.detourDirection) * e.detourDistance, s = Math.sin(e.detourDirection) * e.detourDistance, c = h * e.flipX, d = s * e.flipY, a = { x: n.x + c, y: n.y + d }, l = f(
-    { x: e.to.x - r, y: e.to.y },
-    e.toVect,
-    e.to
-  ), g = { x: l.x + c, y: l.y + d };
-  return b(
-    [t, n, a, g, l, o],
-    e.roundness
+  ), h = Math.cos(t.detourDirection) * t.detourDistance, s = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = s * t.flipY, a = { x: n.x + d, y: n.y + c }, l = v(
+    { x: t.to.x - r, y: t.to.y },
+    t.toVect,
+    t.to
+  ), g = { x: l.x + d, y: l.y + c };
+  return L(
+    [e, n, a, g, l, o],
+    t.roundness
   );
-}, Pt = (e) => {
-  const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: w.y },
-    e.fromVect,
+}, De = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
-    { x: e.to.x - e.arrowLength, y: e.to.y },
-    e.toVect,
-    e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = f({ x: r, y: w.y }, e.fromVect, w), h = f(
-    { x: e.to.x - r, y: e.to.y },
-    e.toVect,
-    e.to
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVect,
+    t.to
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = v({ x: r, y: w.y }, t.fromVect, w), h = v(
+    { x: t.to.x - r, y: t.to.y },
+    t.toVect,
+    t.to
   );
-  return b([t, n, h, o], e.roundness);
-}, bt = (e) => {
-  const t = e.hasSourceArrow ? f(
-    { x: e.arrowLength, y: w.y },
-    e.fromVect,
+  return L([e, n, h, o], t.roundness);
+}, Ce = (t) => {
+  const e = t.hasSourceArrow ? v(
+    { x: t.arrowLength, y: w.y },
+    t.fromVect,
     w
-  ) : w, o = e.hasTargetArrow ? f(
-    { x: e.to.x - e.arrowLength, y: e.to.y },
-    e.toVect,
-    e.to
-  ) : e.to, r = e.arrowLength + e.arrowOffset, n = r - e.roundness, h = f({ x: n, y: w.y }, e.fromVect, w), s = f(
-    { x: e.to.x - n, y: e.to.y },
-    e.toVect,
-    e.to
-  ), c = Math.max((h.y + s.y) / 2, r), d = e.to.x / 2, a = { x: h.x, y: e.flipY > 0 ? c : -r }, l = { x: d, y: a.y }, g = {
+  ) : w, o = t.hasTargetArrow ? v(
+    { x: t.to.x - t.arrowLength, y: t.to.y },
+    t.toVect,
+    t.to
+  ) : t.to, r = t.arrowLength + t.arrowOffset, n = r - t.roundness, h = v({ x: n, y: w.y }, t.fromVect, w), s = v(
+    { x: t.to.x - n, y: t.to.y },
+    t.toVect,
+    t.to
+  ), d = Math.max((h.y + s.y) / 2, r), c = t.to.x / 2, a = { x: h.x, y: t.flipY > 0 ? d : -r }, l = { x: c, y: a.y }, g = {
     x: s.x,
-    y: e.flipY > 0 ? e.to.y - c : e.to.y + r
-  }, y = { x: d, y: g.y };
-  return b(
-    [t, h, a, l, y, g, s, o],
-    e.roundness
+    y: t.flipY > 0 ? t.to.y - d : t.to.y + r
+  }, f = { x: c, y: g.y };
+  return L(
+    [e, h, a, l, f, g, s, o],
+    t.roundness
   );
-}, H = (e) => {
-  const t = e.arrowOffset, o = e.side, r = e.arrowLength + t, n = r + 2 * o, s = [
-    { x: e.arrowLength, y: w.y },
+}, j = (t) => {
+  const e = t.arrowOffset, o = t.side, r = t.arrowLength + e, n = r + 2 * o, s = [
+    { x: t.arrowLength, y: w.y },
     { x: r, y: w.y },
-    { x: r, y: e.side },
-    { x: n, y: e.side },
-    { x: n, y: -e.side },
-    { x: r, y: -e.side },
+    { x: r, y: t.side },
+    { x: n, y: t.side },
+    { x: n, y: -t.side },
+    { x: r, y: -t.side },
     { x: r, y: w.y },
-    { x: e.arrowLength, y: w.y }
+    { x: t.arrowLength, y: w.y }
   ].map(
-    (d) => f(d, e.fromVect, w)
-  ), c = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
-  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : c}${b(s, e.roundness)}`;
-}, mt = (e) => {
-  const t = e.smallRadius, o = e.radius, r = Math.sqrt(t * t + o * o), n = t + o, h = e.arrowLength + r * (1 - o / n), s = t * o / n, d = [
-    { x: e.arrowLength, y: w.y },
+    (c) => v(c, t.fromVect, w)
+  ), d = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${L(s, t.roundness)}`;
+}, Le = (t) => {
+  const e = t.smallRadius, o = t.radius, r = Math.sqrt(e * e + o * o), n = e + o, h = t.arrowLength + r * (1 - o / n), s = e * o / n, c = [
+    { x: t.arrowLength, y: w.y },
     { x: h, y: s },
     { x: h, y: -s }
-  ].map((g) => f(g, e.fromVect, w)), a = [
-    `M ${d[0].x} ${d[0].y}`,
-    `A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,
-    `A ${o} ${o} 0 1 0 ${d[2].x} ${d[2].y}`,
-    `A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`
-  ].join(" "), l = `M 0 0 L ${d[0].x} ${d[0].y} `;
-  return `${e.hasSourceArrow || e.hasTargetArrow ? "" : l}${a}`;
+  ].map((g) => v(g, t.fromVect, w)), a = [
+    `M ${c[0].x} ${c[0].y}`,
+    `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
+    `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
+    `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
+  ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
 }, u = Object.freeze({
   color: "#777777",
   width: 1,
@@ -1324,8 +1343,8 @@ const pt = (e, t) => ({
   smallCycleRadius: 15,
   curvature: 90
 });
-class Ct {
-  constructor(t) {
+class be {
+  constructor(e) {
     i(this, "svg", I());
     i(this, "group", F());
     i(this, "line");
@@ -1340,74 +1359,74 @@ class Ct {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? u.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
-    const o = (t == null ? void 0 : t.color) ?? u.color, r = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(o), this.group.appendChild(this.targetArrow));
-  }
-  render(t) {
-    const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
-      t.from,
-      t.to
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const o = (e == null ? void 0 : e.color) ?? u.color, r = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = U(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(o), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
+      e.from,
+      e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
-    const d = p(
-      t.from.direction,
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
+    const c = N(
+      e.from.direction,
       s,
-      c
-    ), a = p(t.to.direction, s, c), l = {
+      d
+    ), a = N(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
-    let g, y = a, x = -this.arrowLength;
-    if (t.from.portId === t.to.portId ? (g = mt({
-      fromVect: d,
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = Le({
+      fromVect: c,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = Lt({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = Pe({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       flipX: s,
-      flipY: c,
+      flipY: d,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
       detourDistance: this.detourDistance,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Vt({
+    }) : g = Me({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = M(
-        d,
+      const y = m(
+        c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const v = M(
-        y,
+      const y = m(
+        f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class $t {
-  constructor(t) {
+class $e {
+  constructor(e) {
     i(this, "svg", I());
     i(this, "group", F());
     i(this, "line");
@@ -1422,45 +1441,45 @@ class $t {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
-    const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
-  }
-  render(t) {
-    const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
-      t.from,
-      t.to
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = U(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
+      e.from,
+      e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
-    const d = p(
-      t.from.direction,
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
+    const c = N(
+      e.from.direction,
       s,
-      c
-    ), a = p(t.to.direction, s, c), l = {
+      d
+    ), a = N(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
-    let g, y = a, x = -this.arrowLength;
-    if (t.from.portId === t.to.portId ? (g = H({
-      fromVect: d,
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = j({
+      fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = B({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = X({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       flipX: s,
-      flipY: c,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -1468,9 +1487,9 @@ class $t {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Dt({
+    }) : g = Ve({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       flipX: s,
       arrowLength: this.arrowLength,
@@ -1479,27 +1498,27 @@ class $t {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = M(
-        d,
+      const y = m(
+        c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const v = M(
-        y,
+      const y = m(
+        f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class Wt {
-  constructor(t) {
+class We {
+  constructor(e) {
     i(this, "svg", I());
     i(this, "group", F());
     i(this, "line");
@@ -1514,45 +1533,45 @@ class Wt {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
-    const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
-  }
-  render(t) {
-    const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
-      t.from,
-      t.to
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = U(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
+      e.from,
+      e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
-    const d = p(
-      t.from.direction,
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
+    const c = N(
+      e.from.direction,
       s,
-      c
-    ), a = p(t.to.direction, s, c), l = {
+      d
+    ), a = N(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
-    let g, y = a, x = -this.arrowLength;
-    if (t.from.portId === t.to.portId ? (g = H({
-      fromVect: d,
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = j({
+      fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = B({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = X({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       flipX: s,
-      flipY: c,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -1560,9 +1579,9 @@ class Wt {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Pt({
+    }) : g = De({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1570,27 +1589,27 @@ class Wt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = M(
-        d,
+      const y = m(
+        c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const v = M(
-        y,
+      const y = m(
+        f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class It {
-  constructor(t) {
+class Re {
+  constructor(e) {
     i(this, "svg", I());
     i(this, "group", F());
     i(this, "line");
@@ -1605,45 +1624,45 @@ class It {
     i(this, "detourDistance");
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? u.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? u.cycleSquareSide;
-    const o = (t == null ? void 0 : t.roundness) ?? u.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
+    const o = (e == null ? void 0 : e.roundness) ?? u.roundness;
     this.roundness = Math.min(
       o,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? u.hasTargetArrow;
-    const r = (t == null ? void 0 : t.color) ?? u.color, n = (t == null ? void 0 : t.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = R(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = N(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = N(r), this.group.appendChild(this.targetArrow));
-  }
-  render(t) {
-    const { x: o, y: r, width: n, height: h, flipX: s, flipY: c } = k(
-      t.from,
-      t.to
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
+    const r = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
+    this.svg.appendChild(this.group), this.line = U(r, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: o, y: r, width: n, height: h, flipX: s, flipY: d } = B(
+      e.from,
+      e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${c})`;
-    const d = p(
-      t.from.direction,
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${n}px`, this.svg.style.height = `${h}px`, this.group.style.transform = `scale(${s}, ${d})`;
+    const c = N(
+      e.from.direction,
       s,
-      c
-    ), a = p(t.to.direction, s, c), l = {
+      d
+    ), a = N(e.to.direction, s, d), l = {
       x: n,
       y: h
     };
-    let g, y = a, x = -this.arrowLength;
-    if (t.from.portId === t.to.portId ? (g = H({
-      fromVect: d,
+    let g, f = a, x = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = j({
+      fromVect: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = B({
+    }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = X({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
       flipX: s,
-      flipY: c,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -1651,127 +1670,127 @@ class It {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = bt({
+    }) : g = Ce({
       to: l,
-      fromVect: d,
+      fromVect: c,
       toVect: a,
-      flipY: c,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const v = M(
-        d,
+      const y = m(
+        c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", v);
+      this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const v = M(
-        y,
+      const y = m(
+        f,
         l,
         x,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", v);
+      this.targetArrow.setAttribute("d", y);
     }
   }
 }
-const Ft = (e) => {
-  if (typeof e == "function")
-    return e;
-  switch (e == null ? void 0 : e.type) {
+const Ie = (t) => {
+  if (typeof t == "function")
+    return t;
+  switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new Wt({
-        color: e.color,
-        width: e.width,
-        arrowLength: e.arrowLength,
-        arrowWidth: e.arrowWidth,
-        arrowOffset: e.arrowOffset,
-        hasSourceArrow: e.hasSourceArrow,
-        hasTargetArrow: e.hasTargetArrow,
-        cycleSquareSide: e.cycleSquareSide,
-        roundness: e.roundness,
-        detourDistance: e.detourDistance,
-        detourDirection: e.detourDirection
+      return () => new We({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        arrowOffset: t.arrowOffset,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleSquareSide: t.cycleSquareSide,
+        roundness: t.roundness,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new $t({
-        color: e.color,
-        width: e.width,
-        arrowLength: e.arrowLength,
-        arrowWidth: e.arrowWidth,
-        arrowOffset: e.arrowOffset,
-        hasSourceArrow: e.hasSourceArrow,
-        hasTargetArrow: e.hasTargetArrow,
-        cycleSquareSide: e.cycleSquareSide,
-        roundness: e.roundness,
-        detourDistance: e.detourDistance,
-        detourDirection: e.detourDirection
+      return () => new $e({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        arrowOffset: t.arrowOffset,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleSquareSide: t.cycleSquareSide,
+        roundness: t.roundness,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new It({
-        color: e.color,
-        width: e.width,
-        arrowLength: e.arrowLength,
-        arrowWidth: e.arrowWidth,
-        arrowOffset: e.arrowOffset,
-        hasSourceArrow: e.hasSourceArrow,
-        hasTargetArrow: e.hasTargetArrow,
-        cycleSquareSide: e.cycleSquareSide,
-        roundness: e.roundness,
-        detourDistance: e.detourDistance,
-        detourDirection: e.detourDirection
+      return () => new Re({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        arrowOffset: t.arrowOffset,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleSquareSide: t.cycleSquareSide,
+        roundness: t.roundness,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
       });
     default:
-      return () => new Ct({
-        color: e.color,
-        width: e.width,
-        arrowLength: e.arrowLength,
-        arrowWidth: e.arrowWidth,
-        hasSourceArrow: e.hasSourceArrow,
-        hasTargetArrow: e.hasTargetArrow,
-        cycleRadius: e.cycleRadius,
-        smallCycleRadius: e.smallCycleRadius,
-        curvature: e.curvature,
-        detourDistance: e.detourDistance,
-        detourDirection: e.detourDirection
+      return () => new be({
+        color: t.color,
+        width: t.width,
+        arrowLength: t.arrowLength,
+        arrowWidth: t.arrowWidth,
+        hasSourceArrow: t.hasSourceArrow,
+        hasTargetArrow: t.hasTargetArrow,
+        cycleRadius: t.cycleRadius,
+        smallCycleRadius: t.smallCycleRadius,
+        curvature: t.curvature,
+        detourDistance: t.detourDistance,
+        detourDirection: t.detourDirection
       });
   }
-}, Rt = (e) => {
+}, Fe = (t) => {
   var o, r, n, h, s;
-  const t = Nt(
-    (o = e == null ? void 0 : e.nodes) == null ? void 0 : o.priority,
-    (r = e == null ? void 0 : e.edges) == null ? void 0 : r.priority
+  const e = me(
+    (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.priority,
+    (r = t == null ? void 0 : t.edges) == null ? void 0 : r.priority
   );
   return {
     nodes: {
-      centerFn: ((n = e == null ? void 0 : e.nodes) == null ? void 0 : n.centerFn) ?? pt,
-      priorityFn: t.nodesPriorityFn
+      centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Te,
+      priorityFn: e.nodesPriorityFn
     },
     ports: {
-      direction: ((h = e == null ? void 0 : e.ports) == null ? void 0 : h.direction) ?? 0
+      direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: Ft(((s = e == null ? void 0 : e.edges) == null ? void 0 : s.shape) ?? {}),
-      priorityFn: t.edgesPriorityFn
+      shapeFactory: Ie(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
+      priorityFn: e.edgesPriorityFn
     }
   };
 };
-class kt {
-  constructor(t, o) {
-    i(this, "nodeIdGenerator", new Y(
-      (t) => this.graph.getNode(t) !== null
+class Ue {
+  constructor(e, o) {
+    i(this, "nodeIdGenerator", new z(
+      (e) => this.graph.getNode(e) !== null
     ));
-    i(this, "portIdGenerator", new Y(
-      (t) => this.graph.getPort(t) !== null
+    i(this, "portIdGenerator", new z(
+      (e) => this.graph.getPort(e) !== null
     ));
-    i(this, "edgeIdGenerator", new Y(
-      (t) => this.graph.getEdge(t) !== null
+    i(this, "edgeIdGenerator", new z(
+      (e) => this.graph.getEdge(e) !== null
     ));
     i(this, "defaults");
     /**
@@ -1782,14 +1801,14 @@ class kt {
      * provides api for accessing viewport state
      */
     i(this, "viewport");
-    this.controller = t, this.defaults = Rt(o), this.graph = t.graph, this.viewport = t.viewport;
+    this.controller = e, this.defaults = Fe(o), this.graph = e.graph, this.viewport = e.viewport;
   }
   /**
    * attaches canvas to given element
    * detaches element first when canvas is attached
    */
-  attach(t) {
-    return this.controller.attach(t), this;
+  attach(e) {
+    return this.controller.attach(e), this;
   }
   /**
    * detaches canvas from element when attached
@@ -1800,19 +1819,19 @@ class kt {
   /**
    * adds node to graph
    */
-  addNode(t) {
-    const o = this.nodeIdGenerator.create(t.id);
+  addNode(e) {
+    const o = this.nodeIdGenerator.create(e.id);
     if (this.graph.getNode(o) !== null)
-      throw new E("failed to add node with existing id");
+      throw new A("failed to add node with existing id");
     if (this.controller.addNode({
       id: o,
-      element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn ?? this.defaults.nodes.centerFn,
-      priority: t.priority ?? this.defaults.nodes.priorityFn()
-    }), t.ports !== void 0)
-      for (const r of t.ports)
+      element: e.element,
+      x: e.x,
+      y: e.y,
+      centerFn: e.centerFn ?? this.defaults.nodes.centerFn,
+      priority: e.priority ?? this.defaults.nodes.priorityFn()
+    }), e.ports !== void 0)
+      for (const r of e.ports)
         this.markPort({
           id: r.id,
           element: r.element,
@@ -1824,100 +1843,100 @@ class kt {
   /**
    * updates node parameters
    */
-  updateNode(t, o) {
-    if (this.graph.getNode(t) === null)
-      throw new E("failed to update nonexisting node");
-    return this.controller.updateNode(t, o ?? {}), this;
+  updateNode(e, o) {
+    if (this.graph.getNode(e) === null)
+      throw new A("failed to update nonexisting node");
+    return this.controller.updateNode(e, o ?? {}), this;
   }
   /**
    * removes node from graph
    * all the ports of node get unmarked
    * all the edges adjacent to node get removed
    */
-  removeNode(t) {
-    if (this.graph.getNode(t) === null)
-      throw new E("failed to remove nonexisting node");
-    return this.controller.removeNode(t), this;
+  removeNode(e) {
+    if (this.graph.getNode(e) === null)
+      throw new A("failed to remove nonexisting node");
+    return this.controller.removeNode(e), this;
   }
   /**
    * marks element as port of node
    */
-  markPort(t) {
-    const o = this.portIdGenerator.create(t.id);
+  markPort(e) {
+    const o = this.portIdGenerator.create(e.id);
     if (this.graph.getPort(o) !== null)
-      throw new E("failed to add port with existing id");
-    if (this.graph.getNode(t.nodeId) === null)
-      throw new E("failed to set port on nonexisting node");
+      throw new A("failed to add port with existing id");
+    if (this.graph.getNode(e.nodeId) === null)
+      throw new A("failed to set port on nonexisting node");
     return this.controller.markPort({
       id: o,
-      element: t.element,
-      nodeId: t.nodeId,
-      direction: t.direction ?? this.defaults.ports.direction
+      element: e.element,
+      nodeId: e.nodeId,
+      direction: e.direction ?? this.defaults.ports.direction
     }), this;
   }
   /**
    * updates port and attached edges
    */
-  updatePort(t, o) {
-    if (this.graph.getPort(t) === null)
-      throw new E("failed to unset nonexisting port");
-    return this.controller.updatePort(t, o ?? {}), this;
+  updatePort(e, o) {
+    if (this.graph.getPort(e) === null)
+      throw new A("failed to unset nonexisting port");
+    return this.controller.updatePort(e, o ?? {}), this;
   }
   /**
    * ummarks element as port of node
    * all the edges adjacent to port get removed
    */
-  unmarkPort(t) {
-    if (this.graph.getPort(t) === null)
-      throw new E("failed to unset nonexisting port");
-    return this.controller.unmarkPort(t), this;
+  unmarkPort(e) {
+    if (this.graph.getPort(e) === null)
+      throw new A("failed to unset nonexisting port");
+    return this.controller.unmarkPort(e), this;
   }
   /**
    * adds edge to graph
    */
-  addEdge(t) {
-    const o = this.edgeIdGenerator.create(t.id);
+  addEdge(e) {
+    const o = this.edgeIdGenerator.create(e.id);
     if (this.graph.getEdge(o) !== null)
-      throw new E("failed to add edge with existing id");
-    if (this.graph.getPort(t.from) === null)
-      throw new E("failed to add edge from nonexisting port");
-    if (this.graph.getPort(t.to) === null)
-      throw new E("failed to add edge to nonexisting port");
+      throw new A("failed to add edge with existing id");
+    if (this.graph.getPort(e.from) === null)
+      throw new A("failed to add edge from nonexisting port");
+    if (this.graph.getPort(e.to) === null)
+      throw new A("failed to add edge to nonexisting port");
     return this.controller.addEdge({
       id: o,
-      from: t.from,
-      to: t.to,
-      shape: t.shape ?? this.defaults.edges.shapeFactory(),
-      priority: t.priority ?? this.defaults.edges.priorityFn()
+      from: e.from,
+      to: e.to,
+      shape: e.shape ?? this.defaults.edges.shapeFactory(),
+      priority: e.priority ?? this.defaults.edges.priorityFn()
     }), this;
   }
   /**
    * updates edge
    */
-  updateEdge(t, o) {
-    if (this.graph.getEdge(t) === null)
-      throw new E("failed to update nonexisting edge");
-    return this.controller.updateEdge(t, o ?? {}), this;
+  updateEdge(e, o) {
+    if (this.graph.getEdge(e) === null)
+      throw new A("failed to update nonexisting edge");
+    return this.controller.updateEdge(e, o ?? {}), this;
   }
   /**
    * removes edge from graph
    */
-  removeEdge(t) {
-    if (this.graph.getEdge(t) === null)
-      throw new E("failed to remove nonexisting edge");
-    return this.controller.removeEdge(t), this;
+  removeEdge(e) {
+    if (this.graph.getEdge(e) === null)
+      throw new A("failed to remove nonexisting edge");
+    return this.controller.removeEdge(e), this;
   }
   /**
    * applies transformation for viewport
    */
-  patchViewportMatrix(t) {
-    return this.controller.patchViewportMatrix(t), this;
+  patchViewportMatrix(e) {
+    return this.controller.patchViewportMatrix(e), this;
   }
   /**
    * applies transformation for content
    */
-  patchContentMatrix(t) {
-    return this.controller.patchContentMatrix(t), this;
+  patchContentMatrix(e) {
+    return this.controller.patchContentMatrix(e), this;
   }
   /**
    * clears canvas from nodes and edges
@@ -1934,7 +1953,7 @@ class kt {
     this.controller.destroy();
   }
 }
-class zt {
+class Be {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -1942,151 +1961,203 @@ class zt {
     i(this, "incommingEdges", /* @__PURE__ */ new Map());
     i(this, "outcommingEdges", /* @__PURE__ */ new Map());
     i(this, "cycleEdges", /* @__PURE__ */ new Map());
-  }
-  addNode(t) {
+    i(this, "onAfterNodeAddedEmitter");
+    i(this, "onAfterNodeAdded");
+    i(this, "onAfterNodeCoordinatesUpdatedEmitter");
+    i(this, "onAfterNodeCoordinatesUpdated");
+    i(this, "onAfterNodePriorityUpdatedEmitter");
+    i(this, "onAfterNodePriorityUpdated");
+    i(this, "onBeforeNodeRemovedEmitter");
+    i(this, "onBeforeNodeRemoved");
+    i(this, "onAfterPortAddedEmitter");
+    i(this, "onAfterPortAdded");
+    i(this, "onAfterPortDirectionUpdatedEmitter");
+    i(this, "onAfterPortDirectionUpdated");
+    i(this, "onBeforePortRemovedEmitter");
+    i(this, "onBeforePortRemoved");
+    i(this, "onAfterEdgeAddedEmitter");
+    i(this, "onAfterEdgeAdded");
+    i(this, "onAfterEdgeShapeUpdatedEmitter");
+    i(this, "onAfterEdgeShapeUpdated");
+    i(this, "onAfterEdgeAdjacentPortsUpdatedEmitter");
+    i(this, "onAfterEdgeAdjacentPortsUpdated");
+    i(this, "onAfterEdgePriorityUpdatedEmitter");
+    i(this, "onAfterEdgePriorityUpdated");
+    i(this, "onBeforeEdgeRemovedEmitter");
+    i(this, "onBeforeEdgeRemoved");
+    i(this, "onBeforeClearEmitter");
+    i(this, "onBeforeClear");
+    [this.onAfterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [
+      this.onAfterNodeCoordinatesUpdatedEmitter,
+      this.onAfterNodeCoordinatesUpdated
+    ] = E(), [this.onAfterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.onBeforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.onAfterPortAddedEmitter, this.onAfterPortAdded] = E(), [
+      this.onAfterPortDirectionUpdatedEmitter,
+      this.onAfterPortDirectionUpdated
+    ] = E(), [this.onBeforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.onAfterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.onAfterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [
+      this.onAfterEdgeAdjacentPortsUpdatedEmitter,
+      this.onAfterEdgeAdjacentPortsUpdated
+    ] = E(), [this.onAfterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.onBeforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.onBeforeClearEmitter, this.onBeforeClear] = E();
+  }
+  addNode(e) {
     const o = /* @__PURE__ */ new Map(), r = {
-      element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn,
-      priority: t.priority,
+      element: e.element,
+      x: e.x,
+      y: e.y,
+      centerFn: e.centerFn,
+      priority: e.priority,
       ports: o
     };
-    this.nodes.set(t.id, r);
+    this.nodes.set(e.id, r), this.onAfterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
   }
-  getNode(t) {
-    return this.nodes.get(t);
+  getNode(e) {
+    return this.nodes.get(e);
+  }
+  updateNodeCoordinates(e, o) {
+    const r = this.nodes.get(e);
+    r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = o.centerFn ?? r.centerFn, this.onAfterNodeCoordinatesUpdatedEmitter.emit(e);
+  }
+  updateNodePriority(e, o) {
+    const r = this.nodes.get(e);
+    r.priority = o, this.onAfterNodePriorityUpdatedEmitter.emit(e);
   }
-  removeNode(t) {
-    this.nodes.delete(t);
+  removeNode(e) {
+    this.onBeforeNodeRemovedEmitter.emit(e), this.nodes.delete(e);
   }
-  addPort(t) {
-    this.ports.set(t.id, {
-      element: t.element,
-      direction: t.direction,
-      nodeId: t.nodeId
-    }), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element);
+  addPort(e) {
+    this.ports.set(e.id, {
+      element: e.element,
+      direction: e.direction,
+      nodeId: e.nodeId
+    }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.onAfterPortAddedEmitter.emit(e.id);
   }
-  getPort(t) {
-    return this.ports.get(t);
+  getPort(e) {
+    return this.ports.get(e);
+  }
+  updatePortDirection(e, o) {
+    const r = this.ports.get(e);
+    r.direction = o, this.onAfterPortDirectionUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getNodePortIds(t) {
-    const o = this.nodes.get(t);
+  getNodePortIds(e) {
+    const o = this.nodes.get(e);
     if (o !== void 0)
       return Array.from(o.ports.keys());
   }
-  removePort(t) {
-    const o = this.ports.get(t).nodeId;
-    this.nodes.get(o).ports.delete(t), this.ports.delete(t);
-  }
-  addEdge(t) {
-    this.edges.set(t.id, {
-      from: t.from,
-      to: t.to,
-      shape: t.shape,
-      priority: t.priority
-    }), t.from !== t.to ? (this.outcommingEdges.get(t.from).add(t.id), this.incommingEdges.get(t.to).add(t.id)) : this.cycleEdges.get(t.from).add(t.id);
-  }
-  updateEdgeFrom(t, o) {
-    const r = this.edges.get(t);
-    this.removeEdge(t), this.addEdge({
-      id: t,
-      from: o,
-      to: r.to,
-      shape: r.shape,
-      priority: r.priority
-    });
+  removePort(e) {
+    const o = this.ports.get(e).nodeId;
+    this.onBeforePortRemovedEmitter.emit(e), this.nodes.get(o).ports.delete(e), this.ports.delete(e);
+  }
+  addEdge(e) {
+    this.addEdgeInternal(e), this.onAfterEdgeAddedEmitter.emit(e.id);
   }
-  updateEdgeTo(t, o) {
-    const r = this.edges.get(t);
-    this.removeEdge(t), this.addEdge({
-      id: t,
-      from: r.from,
-      to: o,
+  updateEdgeShape(e, o) {
+    const r = this.edges.get(e);
+    r.shape = o, this.onAfterEdgeShapeUpdatedEmitter.emit(e);
+  }
+  updateEdgeAdjacentPorts(e, o) {
+    const r = this.edges.get(e);
+    this.removeEdgeInternal(e), this.addEdgeInternal({
+      id: e,
+      from: o.from ?? r.from,
+      to: o.to ?? r.to,
       shape: r.shape,
       priority: r.priority
-    });
+    }), this.onAfterEdgeAdjacentPortsUpdatedEmitter.emit(e);
+  }
+  updateEdgePriority(e, o) {
+    const r = this.edges.get(e);
+    r.priority = o, this.onAfterEdgePriorityUpdatedEmitter.emit(e);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
   }
-  getEdge(t) {
-    return this.edges.get(t);
+  getEdge(e) {
+    return this.edges.get(e);
   }
-  removeEdge(t) {
-    const o = this.edges.get(t), r = o.from, n = o.to;
-    this.cycleEdges.get(r).delete(t), this.cycleEdges.get(n).delete(t), this.incommingEdges.get(r).delete(t), this.incommingEdges.get(n).delete(t), this.outcommingEdges.get(r).delete(t), this.outcommingEdges.get(n).delete(t), this.edges.delete(t);
+  removeEdge(e) {
+    this.onBeforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
-    this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
+    this.onBeforeClearEmitter.emit(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
-  getPortIncomingEdgeIds(t) {
-    return Array.from(this.incommingEdges.get(t));
+  getPortIncomingEdgeIds(e) {
+    return Array.from(this.incommingEdges.get(e));
   }
-  getPortOutcomingEdgeIds(t) {
-    return Array.from(this.outcommingEdges.get(t));
+  getPortOutcomingEdgeIds(e) {
+    return Array.from(this.outcommingEdges.get(e));
   }
-  getPortCycleEdgeIds(t) {
-    return Array.from(this.cycleEdges.get(t));
+  getPortCycleEdgeIds(e) {
+    return Array.from(this.cycleEdges.get(e));
   }
-  getPortAdjacentEdgeIds(t) {
+  getPortAdjacentEdgeIds(e) {
     return [
-      ...this.getPortIncomingEdgeIds(t),
-      ...this.getPortOutcomingEdgeIds(t),
-      ...this.getPortCycleEdgeIds(t)
+      ...this.getPortIncomingEdgeIds(e),
+      ...this.getPortOutcomingEdgeIds(e),
+      ...this.getPortCycleEdgeIds(e)
     ];
   }
-  getNodeIncomingEdgeIds(t) {
-    const o = Array.from(this.nodes.get(t).ports.keys());
+  getNodeIncomingEdgeIds(e) {
+    const o = Array.from(this.nodes.get(e).ports.keys());
     let r = [];
     return o.forEach((n) => {
       r = [...r, ...this.getPortIncomingEdgeIds(n)];
     }), r;
   }
-  getNodeOutcomingEdgeIds(t) {
-    const o = Array.from(this.nodes.get(t).ports.keys());
+  getNodeOutcomingEdgeIds(e) {
+    const o = Array.from(this.nodes.get(e).ports.keys());
     let r = [];
     return o.forEach((n) => {
       r = [...r, ...this.getPortOutcomingEdgeIds(n)];
     }), r;
   }
-  getNodeCycleEdgeIds(t) {
-    const o = Array.from(this.nodes.get(t).ports.keys());
+  getNodeCycleEdgeIds(e) {
+    const o = Array.from(this.nodes.get(e).ports.keys());
     let r = [];
     return o.forEach((n) => {
       r = [...r, ...this.getPortCycleEdgeIds(n)];
     }), r;
   }
-  getNodeAdjacentEdgeIds(t) {
+  getNodeAdjacentEdgeIds(e) {
     return [
-      ...this.getNodeIncomingEdgeIds(t),
-      ...this.getNodeOutcomingEdgeIds(t),
-      ...this.getNodeCycleEdgeIds(t)
+      ...this.getNodeIncomingEdgeIds(e),
+      ...this.getNodeOutcomingEdgeIds(e),
+      ...this.getNodeCycleEdgeIds(e)
     ];
   }
+  addEdgeInternal(e) {
+    this.edges.set(e.id, {
+      from: e.from,
+      to: e.to,
+      shape: e.shape,
+      priority: e.priority
+    }), e.from !== e.to ? (this.outcommingEdges.get(e.from).add(e.id), this.incommingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
+  }
+  removeEdgeInternal(e) {
+    const o = this.edges.get(e), r = o.from, n = o.to;
+    this.cycleEdges.get(r).delete(e), this.cycleEdges.get(n).delete(e), this.incommingEdges.get(r).delete(e), this.incommingEdges.get(n).delete(e), this.outcommingEdges.get(r).delete(e), this.outcommingEdges.get(n).delete(e), this.edges.delete(e);
+  }
 }
-const Q = (e) => ({
-  scale: 1 / e.scale,
-  x: -e.x / e.scale,
-  y: -e.y / e.scale
-}), Z = {
+const Z = (t) => ({
+  scale: 1 / t.scale,
+  x: -t.x / t.scale,
+  y: -t.y / t.scale
+}), O = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Yt {
+class ke {
   constructor() {
-    i(this, "viewportMatrix", Z);
-    i(this, "contentMatrix", Z);
+    i(this, "viewportMatrix", O);
+    i(this, "contentMatrix", O);
     i(this, "emitter");
     i(this, "onAfterUpdate");
-    [this.emitter, this.onAfterUpdate] = Tt();
+    [this.emitter, this.onAfterUpdate] = E();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -2094,22 +2165,22 @@ class Yt {
   getContentMatrix() {
     return this.contentMatrix;
   }
-  patchViewportMatrix(t) {
+  patchViewportMatrix(e) {
     this.viewportMatrix = {
-      scale: t.scale ?? this.viewportMatrix.scale,
-      x: t.x ?? this.viewportMatrix.x,
-      y: t.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = Q(this.viewportMatrix), this.emitter.emit();
+      scale: e.scale ?? this.viewportMatrix.scale,
+      x: e.x ?? this.viewportMatrix.x,
+      y: e.y ?? this.viewportMatrix.y
+    }, this.contentMatrix = Z(this.viewportMatrix), this.emitter.emit();
   }
-  patchContentMatrix(t) {
+  patchContentMatrix(e) {
     this.contentMatrix = {
-      scale: t.scale ?? this.contentMatrix.scale,
-      x: t.x ?? this.contentMatrix.x,
-      y: t.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = Q(this.contentMatrix), this.emitter.emit();
+      scale: e.scale ?? this.contentMatrix.scale,
+      x: e.x ?? this.contentMatrix.x,
+      y: e.y ?? this.contentMatrix.y
+    }, this.viewportMatrix = Z(this.contentMatrix), this.emitter.emit();
   }
 }
-class Bt {
+class Ye {
   constructor() {
     i(this, "canvasDefaults", {});
     i(this, "dragOptions");
@@ -2123,27 +2194,27 @@ class Bt {
   /**
    * specifies default values for graph entities
    */
-  setDefaults(t) {
-    return this.canvasDefaults = t, this;
+  setDefaults(e) {
+    return this.canvasDefaults = e, this;
   }
   /**
    * @deprecated
    * use setDefaults instead
    */
-  setOptions(t) {
-    return this.setDefaults(t), this;
+  setOptions(e) {
+    return this.setDefaults(e), this;
   }
   /**
    * enables nodes draggable by user
    */
-  enableUserDraggableNodes(t) {
-    return this.hasDraggableNode = !0, this.dragOptions = t, this;
+  enableUserDraggableNodes(e) {
+    return this.hasDraggableNode = !0, this.dragOptions = e, this;
   }
   /**
    * enables viewport transformable by user
    */
-  enableUserTransformableViewport(t) {
-    return this.hasTransformableViewport = !0, this.transformOptions = t, this;
+  enableUserTransformableViewport(e) {
+    return this.hasTransformableViewport = !0, this.transformOptions = e, this;
   }
   /**
    * enables automatic edges update on node resize
@@ -2154,39 +2225,39 @@ class Bt {
   /**
    * sets emitter for rendering graph inside bounded area
    */
-  enableBoxAreaRendering(t) {
-    return this.boxRenderingTrigger = t, this;
+  enableBoxAreaRendering(e) {
+    return this.boxRenderingTrigger = e, this;
   }
-  enableVirtualScroll(t) {
-    return this.virtualScrollOptions = t, this;
+  enableVirtualScroll(e) {
+    return this.virtualScrollOptions = e, this;
   }
   /**
    * builds final canvas
    */
   build() {
-    let t = this.boxRenderingTrigger;
-    this.virtualScrollOptions !== void 0 && t === void 0 && (t = new q());
-    const o = new zt(), r = new Yt();
-    let n = new Et(o, r);
-    t !== void 0 && (n = new At(n, o, t));
-    let h = new it(
+    let e = this.boxRenderingTrigger;
+    this.virtualScrollOptions !== void 0 && e === void 0 && (e = new ee());
+    const o = new Be(), r = new ke();
+    let n = new Ae(o, r);
+    e !== void 0 && (n = new Se(n, o, e));
+    let h = new se(
       o,
       r,
       n
     );
-    this.hasResizeReactiveNodes && (h = new wt(h)), this.hasDraggableNode && (h = new nt(
+    this.hasResizeReactiveNodes && (h = new fe(h)), this.hasDraggableNode && (h = new he(
       h,
       this.dragOptions
-    )), this.virtualScrollOptions !== void 0 ? h = new yt(
+    )), this.virtualScrollOptions !== void 0 ? h = new ye(
       h,
-      t,
+      e,
       this.transformOptions,
       this.virtualScrollOptions
-    ) : this.hasTransformableViewport && (h = new O(
+    ) : this.hasTransformableViewport && (h = new q(
       h,
       this.transformOptions
     ));
-    const s = new kt(h, this.canvasDefaults);
+    const s = new Ue(h, this.canvasDefaults);
     return this.reset(), s;
   }
   reset() {
@@ -2194,11 +2265,11 @@ class Bt {
   }
 }
 export {
-  Ct as BezierEdgeShape,
-  Bt as CanvasBuilder,
-  q as EventSubject,
-  $t as HorizontalEdgeShape,
-  E as HtmlGraphError,
-  Wt as StraightEdgeShape,
-  It as VerticalEdgeShape
+  be as BezierEdgeShape,
+  Ye as CanvasBuilder,
+  ee as EventSubject,
+  $e as HorizontalEdgeShape,
+  A as HtmlGraphError,
+  We as StraightEdgeShape,
+  Re as VerticalEdgeShape
 };