@html-graph/html-graph 4.0.0 → 5.0.0

package/dist/html-graph.js

@@ -1,74 +1,74 @@
-var Nt = Object.defineProperty;
-var Mt = (r, t, e) => t in r ? Nt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var o = (r, t, e) => Mt(r, typeof t != "symbol" ? t + "" : t, e);
-const T = (r, t) => ({
-  x: r.scale * t.x + r.x,
-  y: r.scale * t.y + r.y
+var De = Object.defineProperty;
+var Ne = (r, e, t) => e in r ? De(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var s = (r, e, t) => Ne(r, typeof e != "symbol" ? e + "" : e, t);
+const T = (r, e) => ({
+  x: r.scale * e.x + r.x,
+  y: r.scale * e.y + r.y
 });
-var C = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(C || {});
-const Lt = () => {
+var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
+const Me = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ct = () => {
+}, Re = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
-}, Rt = (r) => {
+}, Le = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
 };
-class pt {
-  constructor(t, e, s) {
-    o(this, "host", Lt());
-    o(this, "container", Ct());
-    o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    o(this, "applyTransform", () => {
-      const t = this.viewportStore.getContentMatrix();
-      this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
+class ue {
+  constructor(e, t, o) {
+    s(this, "host", Me());
+    s(this, "container", Re());
+    s(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    s(this, "applyTransform", () => {
+      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 = e, this.element = s, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
+    this.graphStore = e, this.viewportStore = t, this.element = o, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
-  attachNode(t) {
-    const e = this.graphStore.getNode(t);
-    Rt(e.element), this.container.appendChild(e.element), this.updateNodePosition(t), this.updateNodePriority(t), e.element.style.visibility = "visible";
+  attachNode(e) {
+    const t = this.graphStore.getNode(e);
+    Le(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
-  detachNode(t) {
-    const e = this.graphStore.getNode(t);
-    this.container.removeChild(e.element);
+  detachNode(e) {
+    const t = this.graphStore.getNode(e);
+    this.container.removeChild(t.element);
   }
-  attachEdge(t) {
-    const e = this.graphStore.getEdge(t).shape.svg;
-    this.edgeIdToElementMap.set(t, e), this.container.appendChild(e), this.renderEdge(t), this.updateEdgePriority(t);
+  attachEdge(e) {
+    const t = this.graphStore.getEdge(e).payload.shape.svg;
+    this.edgeIdToElementMap.set(e, t), this.container.appendChild(t), this.renderEdge(e), this.updateEdgePriority(e);
   }
-  detachEdge(t) {
-    const e = this.edgeIdToElementMap.get(t);
-    this.container.removeChild(e), this.edgeIdToElementMap.delete(t);
+  detachEdge(e) {
+    const t = this.edgeIdToElementMap.get(e);
+    this.container.removeChild(t), this.edgeIdToElementMap.delete(e);
   }
   clear() {
-    this.edgeIdToElementMap.forEach((t, e) => {
-      this.detachEdge(e);
-    }), this.graphStore.getAllNodeIds().forEach((t) => {
-      this.detachNode(t);
+    this.edgeIdToElementMap.forEach((e, t) => {
+      this.detachEdge(t);
+    }), this.graphStore.getAllNodeIds().forEach((e) => {
+      this.detachNode(e);
     });
   }
   destroy() {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
-  updateNodePosition(t) {
-    const e = this.graphStore.getNode(t), { width: s, height: i } = e.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = e.centerFn(s, i), h = e.x - n * a.x, d = e.y - n * a.y;
-    e.element.style.transform = `translate(${h}px, ${d}px)`;
+  updateNodePosition(e) {
+    const t = this.graphStore.getNode(e), { width: o, height: i } = t.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, a = t.payload.centerFn(o, i), h = t.payload.x - n * a.x, d = t.payload.y - n * a.y;
+    t.element.style.transform = `translate(${h}px, ${d}px)`;
   }
-  updateNodePriority(t) {
-    const e = this.graphStore.getNode(t);
-    e.element.style.zIndex = `${e.priority}`;
+  updateNodePriority(e) {
+    const t = this.graphStore.getNode(e);
+    t.element.style.zIndex = `${t.payload.priority}`;
   }
-  updateEdgeShape(t) {
-    const e = this.edgeIdToElementMap.get(t);
-    this.container.removeChild(e);
-    const s = this.graphStore.getEdge(t);
-    this.edgeIdToElementMap.set(t, s.shape.svg), this.container.appendChild(s.shape.svg);
+  updateEdgeShape(e) {
+    const t = this.edgeIdToElementMap.get(e);
+    this.container.removeChild(t);
+    const i = this.graphStore.getEdge(e).payload.shape.svg;
+    this.edgeIdToElementMap.set(e, i), this.container.appendChild(i);
   }
-  renderEdge(t) {
-    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), i = this.graphStore.getPort(e.to), n = s.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
-      s,
+  renderEdge(e) {
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from), i = this.graphStore.getPort(t.to), n = o.element.getBoundingClientRect(), a = i.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), d = this.viewportStore.getViewportMatrix(), c = this.createEdgeRenderPort(
+      o,
       n,
       h,
       d
@@ -78,101 +78,101 @@ class pt {
       h,
       d
     );
-    let g = C.Line;
-    s.element === i.element ? g = C.PortCycle : s.nodeId === i.nodeId && (g = C.NodeCycle), e.shape.render({ from: c, to: l, category: g });
+    let g = L.Line;
+    o.element === i.element ? g = L.PortCycle : o.nodeId === i.nodeId && (g = L.NodeCycle), t.payload.shape.render({ from: c, to: l, category: g });
   }
-  updateEdgePriority(t) {
-    const e = this.graphStore.getEdge(t);
-    e.shape.svg.style.zIndex = `${e.priority}`;
+  updateEdgePriority(e) {
+    const t = this.graphStore.getEdge(e);
+    t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
   }
-  createEdgeRenderPort(t, e, s, i) {
+  createEdgeRenderPort(e, t, o, i) {
     const n = {
-      x: e.left - s.left,
-      y: e.top - s.top
+      x: t.left - o.left,
+      y: t.top - o.top
     }, a = T(i, n);
     return {
       x: a.x,
       y: a.y,
-      width: e.width * i.scale,
-      height: e.height * i.scale,
-      direction: t.direction
+      width: t.width * i.scale,
+      height: t.height * i.scale,
+      direction: e.payload.direction
     };
   }
 }
-class Vt {
-  constructor(t) {
-    o(this, "xFrom", 1 / 0);
-    o(this, "yFrom", 1 / 0);
-    o(this, "xTo", 1 / 0);
-    o(this, "yTo", 1 / 0);
-    this.graphStore = t;
-  }
-  setRenderingBox(t) {
-    this.xFrom = t.x, this.xTo = t.x + t.width, this.yFrom = t.y, this.yTo = t.y + t.height;
-  }
-  hasNode(t) {
-    const e = this.graphStore.getNode(t);
-    return e.x >= this.xFrom && e.x <= this.xTo && e.y >= this.yFrom && e.y <= this.yTo;
-  }
-  hasEdge(t) {
-    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId, n = this.graphStore.getNode(s), a = this.graphStore.getNode(i), h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
+class Ce {
+  constructor(e) {
+    s(this, "xFrom", 1 / 0);
+    s(this, "yFrom", 1 / 0);
+    s(this, "xTo", 1 / 0);
+    s(this, "yTo", 1 / 0);
+    this.graphStore = e;
+  }
+  setRenderingBox(e) {
+    this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
+  }
+  hasNode(e) {
+    const t = this.graphStore.getNode(e).payload;
+    return t.x >= this.xFrom && t.x <= this.xTo && t.y >= this.yFrom && t.y <= this.yTo;
+  }
+  hasEdge(e) {
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId, n = this.graphStore.getNode(o).payload, a = this.graphStore.getNode(i).payload, h = Math.min(n.x, a.x), d = Math.max(n.x, a.x), c = Math.min(n.y, a.y), l = Math.max(n.y, a.y);
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class It {
-  constructor(t, e, s, i) {
-    o(this, "attachedNodes", /* @__PURE__ */ new Set());
-    o(this, "attachedEdges", /* @__PURE__ */ new Set());
-    o(this, "renderingBox");
-    o(this, "updateViewport", (t) => {
-      this.renderingBox.setRenderingBox(t);
-      const e = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+class Ve {
+  constructor(e, t, o, i) {
+    s(this, "attachedNodes", /* @__PURE__ */ new Set());
+    s(this, "attachedEdges", /* @__PURE__ */ new Set());
+    s(this, "renderingBox");
+    s(this, "updateViewport", (e) => {
+      this.renderingBox.setRenderingBox(e);
+      const t = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
       this.graphStore.getAllNodeIds().forEach((a) => {
         const h = this.renderingBox.hasNode(a), d = this.attachedNodes.has(a);
-        h && !d ? e.add(a) : !h && d && s.add(a);
+        h && !d ? t.add(a) : !h && d && o.add(a);
       }), this.graphStore.getAllEdgeIds().forEach((a) => {
         const h = this.renderingBox.hasEdge(a), d = this.attachedEdges.has(a), c = this.graphStore.getEdge(a), l = this.graphStore.getPort(c.from).nodeId, g = this.graphStore.getPort(c.to).nodeId;
-        h && (this.renderingBox.hasNode(l) || (e.add(l), s.delete(l)), this.renderingBox.hasNode(g) || (e.add(g), s.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
+        h && (this.renderingBox.hasNode(l) || (t.add(l), o.delete(l)), this.renderingBox.hasNode(g) || (t.add(g), o.delete(g))), h && !d ? i.add(a) : !h && d && n.add(a);
       }), n.forEach((a) => {
         this.handleDetachEdge(a);
-      }), s.forEach((a) => {
+      }), o.forEach((a) => {
         this.handleDetachNode(a);
-      }), e.forEach((a) => {
+      }), t.forEach((a) => {
         this.attachedNodes.has(a) || this.handleAttachNode(a);
       }), i.forEach((a) => {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = t, this.graphStore = e, this.trigger = s, this.params = i, this.renderingBox = new Vt(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = i, this.renderingBox = new Ce(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
-  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);
   }
-  updateNodePosition(t) {
-    this.attachedNodes.has(t) ? this.htmlView.updateNodePosition(t) : this.renderingBox.hasNode(t) && (this.handleAttachNode(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((e) => {
-      this.attachEdgeEntities(e);
+  updateNodePosition(e) {
+    this.attachedNodes.has(e) ? this.htmlView.updateNodePosition(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((t) => {
+      this.attachEdgeEntities(t);
     }));
   }
-  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();
@@ -180,47 +180,47 @@ class It {
   destroy() {
     this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
   }
-  attachEdgeEntities(t) {
-    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from).nodeId, i = this.graphStore.getPort(e.to).nodeId;
-    this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(t);
+  attachEdgeEntities(e) {
+    const t = this.graphStore.getEdge(e), o = this.graphStore.getPort(t.from).nodeId, i = this.graphStore.getPort(t.to).nodeId;
+    this.attachedNodes.has(o) || this.handleAttachNode(o), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
   }
-  handleAttachNode(t) {
-    this.params.onBeforeNodeAttached(t), this.attachedNodes.add(t), this.htmlView.attachNode(t);
+  handleAttachNode(e) {
+    this.params.onBeforeNodeAttached(e), this.attachedNodes.add(e), this.htmlView.attachNode(e);
   }
-  handleDetachNode(t) {
-    this.htmlView.detachNode(t), this.attachedNodes.delete(t), this.params.onAfterNodeDetached(t);
+  handleDetachNode(e) {
+    this.htmlView.detachNode(e), this.attachedNodes.delete(e), this.params.onAfterNodeDetached(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 wt {
+class pe {
   constructor() {
-    o(this, "callbacks", /* @__PURE__ */ new Set());
+    s(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) {
-    this.callbacks.forEach((e) => {
-      e(t);
+  emit(e) {
+    this.callbacks.forEach((t) => {
+      t(e);
     });
   }
 }
 const A = () => {
-  const r = new wt();
+  const r = new pe();
   return [r, r];
 };
-class Ut {
-  constructor(t) {
-    o(this, "onAfterUpdated");
-    this.viewportStore = t, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
+class $e {
+  constructor(e) {
+    s(this, "onAfterUpdated");
+    this.viewportStore = e, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
   }
   getViewportMatrix() {
     return { ...this.viewportStore.getViewportMatrix() };
@@ -229,101 +229,107 @@ class Ut {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Wt {
-  constructor(t) {
-    o(this, "onAfterNodeAdded");
-    o(this, "onAfterNodeUpdated");
-    o(this, "onAfterNodePriorityUpdated");
-    o(this, "onBeforeNodeRemoved");
-    o(this, "onAfterPortMarked");
-    o(this, "onAfterPortUpdated");
-    o(this, "onBeforePortUnmarked");
-    o(this, "onAfterEdgeAdded");
-    o(this, "onAfterEdgeShapeUpdated");
-    o(this, "onAfterEdgeUpdated");
-    o(this, "onAfterEdgePriorityUpdated");
-    o(this, "onBeforeEdgeRemoved");
-    o(this, "onBeforeClear");
-    this.graphStore = t, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
-  }
-  getNode(t) {
-    const e = this.graphStore.getNode(t);
-    return e === void 0 ? null : {
-      element: e.element,
-      x: e.x,
-      y: e.y,
-      centerFn: e.centerFn,
-      priority: e.priority
+class Ie {
+  constructor(e) {
+    s(this, "onAfterNodeAdded");
+    s(this, "onAfterNodeUpdated");
+    s(this, "onAfterNodePriorityUpdated");
+    s(this, "onBeforeNodeRemoved");
+    s(this, "onAfterPortMarked");
+    s(this, "onAfterPortUpdated");
+    s(this, "onBeforePortUnmarked");
+    s(this, "onAfterEdgeAdded");
+    s(this, "onAfterEdgeShapeUpdated");
+    s(this, "onAfterEdgeUpdated");
+    s(this, "onAfterEdgePriorityUpdated");
+    s(this, "onBeforeEdgeRemoved");
+    s(this, "onBeforeClear");
+    this.graphStore = e, this.onAfterNodeAdded = this.graphStore.onAfterNodeAdded, this.onAfterNodeUpdated = this.graphStore.onAfterNodeUpdated, this.onAfterNodePriorityUpdated = this.graphStore.onAfterNodePriorityUpdated, this.onBeforeNodeRemoved = this.graphStore.onBeforeNodeRemoved, this.onAfterPortMarked = this.graphStore.onAfterPortAdded, this.onAfterPortUpdated = this.graphStore.onAfterPortUpdated, this.onBeforePortUnmarked = this.graphStore.onBeforePortRemoved, this.onAfterEdgeAdded = this.graphStore.onAfterEdgeAdded, this.onAfterEdgeShapeUpdated = this.graphStore.onAfterEdgeShapeUpdated, this.onAfterEdgeUpdated = this.graphStore.onAfterEdgeUpdated, this.onAfterEdgePriorityUpdated = this.graphStore.onAfterEdgePriorityUpdated, this.onBeforeEdgeRemoved = this.graphStore.onBeforeEdgeRemoved, this.onBeforeClear = this.graphStore.onBeforeClear;
+  }
+  getNode(e) {
+    const t = this.graphStore.getNode(e);
+    if (t === void 0)
+      return null;
+    const o = t.payload;
+    return {
+      element: t.element,
+      x: o.x,
+      y: o.y,
+      centerFn: o.centerFn,
+      priority: o.priority
     };
   }
-  getElementNodeId(t) {
-    return this.graphStore.getElementNodeId(t) ?? null;
+  getElementNodeId(e) {
+    return this.graphStore.getElementNodeId(e) ?? null;
   }
   getAllNodeIds() {
     return this.graphStore.getAllNodeIds();
   }
-  getPort(t) {
-    const e = this.graphStore.getPort(t);
-    return e === void 0 ? null : {
-      element: e.element,
-      direction: e.direction,
-      nodeId: e.nodeId
+  getPort(e) {
+    const t = this.graphStore.getPort(e);
+    return t === void 0 ? null : {
+      element: t.element,
+      direction: t.payload.direction,
+      nodeId: t.nodeId
     };
   }
   getAllPortIds() {
     return this.graphStore.getAllPortIds();
   }
-  getNodePortIds(t) {
-    return this.graphStore.getNodePortIds(t) ?? null;
+  getNodePortIds(e) {
+    return this.graphStore.getNodePortIds(e) ?? null;
   }
-  getElementPortIds(t) {
-    return [...this.graphStore.getElementPortIds(t)];
+  getElementPortIds(e) {
+    return [...this.graphStore.getElementPortIds(e)];
   }
   getAllEdgeIds() {
     return this.graphStore.getAllEdgeIds();
   }
-  getEdge(t) {
-    const e = this.graphStore.getEdge(t);
-    return e === void 0 ? null : {
-      from: e.from,
-      to: e.to,
-      priority: e.priority,
-      shape: e.shape
+  getEdge(e) {
+    const t = this.graphStore.getEdge(e);
+    if (t === void 0)
+      return null;
+    const o = t.payload;
+    return {
+      from: t.from,
+      to: t.to,
+      priority: o.priority,
+      shape: o.shape
     };
   }
-  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);
   }
-  getPortOutgoingEdgeIds(t) {
-    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(t);
+  getPortOutgoingEdgeIds(e) {
+    return this.graphStore.getPort(e) === void 0 ? null : this.graphStore.getPortOutgoingEdgeIds(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);
   }
-  getNodeOutgoingEdgeIds(t) {
-    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(t);
+  getNodeOutgoingEdgeIds(e) {
+    return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeOutgoingEdgeIds(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 z {
-  constructor(t) {
-    o(this, "counter", 0);
-    this.checkExists = t;
+class X {
+  constructor(e) {
+    s(this, "counter", 0);
+    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;
@@ -335,79 +341,79 @@ class z {
 class S extends Error {
   constructor() {
     super(...arguments);
-    o(this, "name", "CanvasError");
+    s(this, "name", "CanvasError");
   }
 }
-class ft {
-  constructor(t, e, s, i) {
+class we {
+  constructor(e, t, o, i) {
     /**
      * provides api for accessing model of rendered graph
      */
-    o(this, "graph");
+    s(this, "graph");
     /**
      * provides api for accessing viewport state
      */
-    o(this, "viewport");
-    o(this, "nodeIdGenerator", new z(
-      (t) => this.graph.getNode(t) !== null
+    s(this, "viewport");
+    s(this, "nodeIdGenerator", new X(
+      (e) => this.graph.getNode(e) !== null
     ));
-    o(this, "portIdGenerator", new z(
-      (t) => this.graph.getPort(t) !== null
+    s(this, "portIdGenerator", new X(
+      (e) => this.graph.getPort(e) !== null
     ));
-    o(this, "edgeIdGenerator", new z(
-      (t) => this.graph.getEdge(t) !== null
+    s(this, "edgeIdGenerator", new X(
+      (e) => this.graph.getEdge(e) !== null
     ));
-    o(this, "onAfterNodeAdded", (t) => {
-      this.htmlView.attachNode(t);
+    s(this, "onAfterNodeAdded", (e) => {
+      this.htmlView.attachNode(e);
     });
-    o(this, "onAfterNodeUpdated", (t) => {
-      this.htmlView.updateNodePosition(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((s) => {
-        this.htmlView.renderEdge(s);
+    s(this, "onAfterNodeUpdated", (e) => {
+      this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((o) => {
+        this.htmlView.renderEdge(o);
       });
     });
-    o(this, "onAfterNodePriorityUpdated", (t) => {
-      this.htmlView.updateNodePriority(t);
+    s(this, "onAfterNodePriorityUpdated", (e) => {
+      this.htmlView.updateNodePriority(e);
     });
-    o(this, "onBeforeNodeRemoved", (t) => {
-      this.graphStore.getNodePortIds(t).forEach((e) => {
-        this.unmarkPort(e);
-      }), this.htmlView.detachNode(t);
+    s(this, "onBeforeNodeRemoved", (e) => {
+      this.graphStore.getNodePortIds(e).forEach((t) => {
+        this.unmarkPort(t);
+      }), this.htmlView.detachNode(e);
     });
-    o(this, "onAfterPortUpdated", (t) => {
-      this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
-        this.htmlView.renderEdge(s);
+    s(this, "onAfterPortUpdated", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((o) => {
+        this.htmlView.renderEdge(o);
       });
     });
-    o(this, "onBeforePortUnmarked", (t) => {
-      this.graphStore.getPortAdjacentEdgeIds(t).forEach((e) => {
-        this.removeEdge(e);
+    s(this, "onBeforePortUnmarked", (e) => {
+      this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
+        this.removeEdge(t);
       });
     });
-    o(this, "onAfterEdgeAdded", (t) => {
-      this.htmlView.attachEdge(t);
+    s(this, "onAfterEdgeAdded", (e) => {
+      this.htmlView.attachEdge(e);
     });
-    o(this, "onAfterEdgeShapeUpdated", (t) => {
-      this.htmlView.updateEdgeShape(t);
+    s(this, "onAfterEdgeShapeUpdated", (e) => {
+      this.htmlView.updateEdgeShape(e);
     });
-    o(this, "onAfterEdgeUpdated", (t) => {
-      this.htmlView.renderEdge(t);
+    s(this, "onAfterEdgeUpdated", (e) => {
+      this.htmlView.renderEdge(e);
     });
-    o(this, "onAfterEdgePriorityUpdated", (t) => {
-      this.htmlView.updateEdgePriority(t);
+    s(this, "onAfterEdgePriorityUpdated", (e) => {
+      this.htmlView.updateEdgePriority(e);
     });
-    o(this, "onBeforeEdgeRemoved", (t) => {
-      this.htmlView.detachEdge(t);
+    s(this, "onBeforeEdgeRemoved", (e) => {
+      this.htmlView.detachEdge(e);
     });
-    o(this, "onBeforeClear", () => {
+    s(this, "onBeforeClear", () => {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
     });
-    o(this, "onBeforeDestroyEmitter");
-    o(this, "destroyed", !1);
+    s(this, "onBeforeDestroyEmitter");
+    s(this, "destroyed", !1);
     /**
      * emits event just before destruction of canvas
      */
-    o(this, "onBeforeDestroy");
-    this.graphStore = t, this.viewportStore = e, this.htmlView = s, this.params = i, this.graph = new Wt(this.graphStore), this.viewport = new Ut(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    s(this, "onBeforeDestroy");
+    this.graphStore = e, this.viewportStore = t, this.htmlView = o, this.params = i, this.graph = new Ie(this.graphStore), this.viewport = new $e(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
@@ -418,128 +424,128 @@ class ft {
   /**
    * adds new node
    */
-  addNode(t) {
-    const e = this.nodeIdGenerator.create(t.id);
-    if (this.graph.getNode(e) !== null)
+  addNode(e) {
+    const t = this.nodeIdGenerator.create(e.id);
+    if (this.graphStore.getNode(t) !== void 0)
       throw new S("failed to add node with existing id");
-    if (this.graphStore.getElementNodeId(t.element) !== void 0)
+    if (this.graphStore.getElementNodeId(e.element) !== void 0)
       throw new S(
         "failed to add node with html element already in use by another node"
       );
     if (this.graphStore.addNode({
-      id: e,
-      element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn ?? this.params.nodes.centerFn,
-      priority: t.priority ?? this.params.nodes.priorityFn()
-    }), t.ports !== void 0)
-      for (const s of t.ports)
+      id: t,
+      element: e.element,
+      x: e.x,
+      y: e.y,
+      centerFn: e.centerFn ?? this.params.nodes.centerFn,
+      priority: e.priority ?? this.params.nodes.priorityFn()
+    }), e.ports !== void 0)
+      for (const o of e.ports)
         this.markPort({
-          id: s.id,
-          element: s.element,
-          nodeId: e,
-          direction: s.direction
+          id: o.id,
+          element: o.element,
+          nodeId: t,
+          direction: o.direction
         });
     return this;
   }
   /**
    * updates node parameters
    */
-  updateNode(t, e) {
-    if (this.graph.getNode(t) === null)
+  updateNode(e, t) {
+    if (this.graphStore.getNode(e) === void 0)
       throw new S("failed to update non existing node");
-    return this.graphStore.updateNode(t, e ?? {}), this;
+    return this.graphStore.updateNode(e, t ?? {}), this;
   }
   /**
    * removes specified node
    * all the ports of node get unmarked
    * all the edges adjacent to node get removed
    */
-  removeNode(t) {
-    if (this.graph.getNode(t) === null)
+  removeNode(e) {
+    if (this.graphStore.getNode(e) === void 0)
       throw new S("failed to remove non existing node");
-    return this.graphStore.removeNode(t), this;
+    return this.graphStore.removeNode(e), this;
   }
   /**
    * marks specified element as a port for specified node
    */
-  markPort(t) {
-    const e = this.portIdGenerator.create(t.id);
-    if (this.graph.getPort(e) !== null)
+  markPort(e) {
+    const t = this.portIdGenerator.create(e.id);
+    if (this.graphStore.getPort(t) !== void 0)
       throw new S("failed to add port with existing id");
-    if (this.graph.getNode(t.nodeId) === null)
+    if (this.graphStore.getNode(e.nodeId) === void 0)
       throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
-      id: e,
-      element: t.element,
-      nodeId: t.nodeId,
-      direction: t.direction ?? this.params.ports.direction
+      id: t,
+      element: e.element,
+      nodeId: e.nodeId,
+      direction: e.direction ?? this.params.ports.direction
     }), this;
   }
   /**
    * updates port and edges attached to it
    */
-  updatePort(t, e) {
-    if (this.graph.getPort(t) === null)
+  updatePort(e, t) {
+    if (this.graphStore.getPort(e) === void 0)
       throw new S("failed to update nonexistent port");
-    return this.graphStore.updatePort(t, e ?? {}), this;
+    return this.graphStore.updatePort(e, t ?? {}), this;
   }
   /**
    * unmarks specified port
    * all the edges adjacent to the port get removed
    */
-  unmarkPort(t) {
-    if (this.graph.getPort(t) === null)
+  unmarkPort(e) {
+    if (this.graphStore.getPort(e) === void 0)
       throw new S("failed to unmark non existing port");
-    return this.graphStore.removePort(t), this;
+    return this.graphStore.removePort(e), this;
   }
   /**
    * adds new edge
    */
-  addEdge(t) {
-    const e = this.edgeIdGenerator.create(t.id);
-    if (this.graph.getEdge(e) !== null)
+  addEdge(e) {
+    const t = this.edgeIdGenerator.create(e.id);
+    if (this.graphStore.getEdge(t) !== void 0)
       throw new S("failed to add edge with existing id");
-    if (this.graph.getPort(t.from) === null)
+    if (this.graphStore.getPort(e.from) === void 0)
       throw new S("failed to add edge from nonexistent port");
-    if (this.graph.getPort(t.to) === null)
+    if (this.graphStore.getPort(e.to) === void 0)
       throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
-      id: e,
-      from: t.from,
-      to: t.to,
-      shape: t.shape ?? this.params.edges.shapeFactory(e),
-      priority: t.priority ?? this.params.edges.priorityFn()
+      id: t,
+      from: e.from,
+      to: e.to,
+      shape: e.shape ?? this.params.edges.shapeFactory(t),
+      priority: e.priority ?? this.params.edges.priorityFn()
     }), this;
   }
   /**
    * updates specified edge
    */
-  updateEdge(t, e) {
-    if (this.graph.getEdge(t) === null)
+  updateEdge(e, t) {
+    if (this.graphStore.getEdge(e) === void 0)
       throw new S("failed to update nonexistent edge");
-    return this.graphStore.updateEdge(t, e ?? {}), this;
+    return this.graphStore.updateEdge(e, t ?? {}), this;
   }
   /**
    * removes specified edge
    */
-  removeEdge(t) {
-    if (this.graph.getEdge(t) === null)
+  removeEdge(e) {
+    if (this.graphStore.getEdge(e) === void 0)
       throw new S("failed to remove nonexistent edge");
-    return this.graphStore.removeEdge(t), this;
+    return this.graphStore.removeEdge(e), this;
   }
   /**
    * applies transformation for viewport matrix
    */
-  patchViewportMatrix(t) {
-    return this.viewportStore.patchViewportMatrix(t), this;
+  patchViewportMatrix(e) {
+    return this.viewportStore.patchViewportMatrix(e), this;
   }
   /**
    * applies transformation for content matrix
    */
-  patchContentMatrix(t) {
-    return this.viewportStore.patchContentMatrix(t), this;
+  patchContentMatrix(e) {
+    return this.viewportStore.patchContentMatrix(e), this;
   }
   /**
    * clears canvas from nodes and edges
@@ -562,243 +568,249 @@ class ft {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
-class $t {
+class Ue {
   constructor() {
-    o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
-    o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
+    s(this, "singleToMultiMap", /* @__PURE__ */ new Map());
+    s(this, "multiToSingleMap", /* @__PURE__ */ new Map());
   }
-  addRecord(t, e) {
-    const s = this.singleToMultiMap.get(t);
-    s === void 0 ? this.singleToMultiMap.set(t, /* @__PURE__ */ new Set([e])) : s.add(e), this.multiToSingleMap.set(e, t);
+  addRecord(e, t) {
+    const o = this.singleToMultiMap.get(e);
+    o === void 0 ? this.singleToMultiMap.set(e, /* @__PURE__ */ new Set([t])) : o.add(t), this.multiToSingleMap.set(t, e);
   }
-  getMultiBySingle(t) {
-    const e = this.singleToMultiMap.get(t) ?? /* @__PURE__ */ new Set();
-    return Array.from(e.values());
+  getMultiBySingle(e) {
+    const t = this.singleToMultiMap.get(e) ?? /* @__PURE__ */ new Set();
+    return Array.from(t.values());
   }
-  removeByMulti(t) {
-    const e = this.multiToSingleMap.get(t), s = this.singleToMultiMap.get(e);
-    s.delete(t), s.size === 0 && this.singleToMultiMap.delete(e), this.multiToSingleMap.delete(t);
+  removeByMulti(e) {
+    const t = this.multiToSingleMap.get(e), o = this.singleToMultiMap.get(t);
+    o.delete(e), o.size === 0 && this.singleToMultiMap.delete(t), this.multiToSingleMap.delete(e);
   }
-  getByMulti(t) {
-    return this.multiToSingleMap.get(t);
+  getByMulti(e) {
+    return this.multiToSingleMap.get(e);
   }
-  removeBySingle(t) {
-    this.singleToMultiMap.get(t).forEach((s) => {
-      this.multiToSingleMap.delete(s);
-    }), this.singleToMultiMap.delete(t);
+  removeBySingle(e) {
+    this.singleToMultiMap.get(e).forEach((o) => {
+      this.multiToSingleMap.delete(o);
+    }), this.singleToMultiMap.delete(e);
   }
   clear() {
     this.singleToMultiMap.clear(), this.multiToSingleMap.clear();
   }
-  forEachSingle(t) {
-    this.singleToMultiMap.forEach((e, s) => {
-      t(s);
+  forEachSingle(e) {
+    this.singleToMultiMap.forEach((t, o) => {
+      e(o);
     });
   }
-  hasSingle(t) {
-    return this.singleToMultiMap.get(t) !== void 0;
+  hasSingle(e) {
+    return this.singleToMultiMap.get(e) !== void 0;
   }
-  hasMulti(t) {
-    return this.multiToSingleMap.get(t) !== void 0;
+  hasMulti(e) {
+    return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class mt {
+class fe {
   constructor() {
-    o(this, "nodes", /* @__PURE__ */ new Map());
-    o(this, "ports", /* @__PURE__ */ new Map());
-    o(this, "edges", /* @__PURE__ */ new Map());
-    o(this, "nodesElementsMap", /* @__PURE__ */ new Map());
-    o(this, "incomingEdges", /* @__PURE__ */ new Map());
-    o(this, "outcomingEdges", /* @__PURE__ */ new Map());
-    o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new $t());
-    o(this, "afterNodeAddedEmitter");
-    o(this, "onAfterNodeAdded");
-    o(this, "afterNodeUpdatedEmitter");
-    o(this, "onAfterNodeUpdated");
-    o(this, "afterNodePriorityUpdatedEmitter");
-    o(this, "onAfterNodePriorityUpdated");
-    o(this, "beforeNodeRemovedEmitter");
-    o(this, "onBeforeNodeRemoved");
-    o(this, "afterPortAddedEmitter");
-    o(this, "onAfterPortAdded");
-    o(this, "afterPortUpdatedEmitter");
-    o(this, "onAfterPortUpdated");
-    o(this, "beforePortRemovedEmitter");
-    o(this, "onBeforePortRemoved");
-    o(this, "afterEdgeAddedEmitter");
-    o(this, "onAfterEdgeAdded");
-    o(this, "afterEdgeShapeUpdatedEmitter");
-    o(this, "onAfterEdgeShapeUpdated");
-    o(this, "afterEdgeUpdatedEmitter");
-    o(this, "onAfterEdgeUpdated");
-    o(this, "afterEdgePriorityUpdatedEmitter");
-    o(this, "onAfterEdgePriorityUpdated");
-    o(this, "beforeEdgeRemovedEmitter");
-    o(this, "onBeforeEdgeRemoved");
-    o(this, "beforeClearEmitter");
-    o(this, "onBeforeClear");
+    s(this, "nodes", /* @__PURE__ */ new Map());
+    s(this, "ports", /* @__PURE__ */ new Map());
+    s(this, "edges", /* @__PURE__ */ new Map());
+    s(this, "nodesElementsMap", /* @__PURE__ */ new Map());
+    s(this, "incomingEdges", /* @__PURE__ */ new Map());
+    s(this, "outcomingEdges", /* @__PURE__ */ new Map());
+    s(this, "cycleEdges", /* @__PURE__ */ new Map());
+    s(this, "elementPorts", new Ue());
+    s(this, "afterNodeAddedEmitter");
+    s(this, "onAfterNodeAdded");
+    s(this, "afterNodeUpdatedEmitter");
+    s(this, "onAfterNodeUpdated");
+    s(this, "afterNodePriorityUpdatedEmitter");
+    s(this, "onAfterNodePriorityUpdated");
+    s(this, "beforeNodeRemovedEmitter");
+    s(this, "onBeforeNodeRemoved");
+    s(this, "afterPortAddedEmitter");
+    s(this, "onAfterPortAdded");
+    s(this, "afterPortUpdatedEmitter");
+    s(this, "onAfterPortUpdated");
+    s(this, "beforePortRemovedEmitter");
+    s(this, "onBeforePortRemoved");
+    s(this, "afterEdgeAddedEmitter");
+    s(this, "onAfterEdgeAdded");
+    s(this, "afterEdgeShapeUpdatedEmitter");
+    s(this, "onAfterEdgeShapeUpdated");
+    s(this, "afterEdgeUpdatedEmitter");
+    s(this, "onAfterEdgeUpdated");
+    s(this, "afterEdgePriorityUpdatedEmitter");
+    s(this, "onAfterEdgePriorityUpdated");
+    s(this, "beforeEdgeRemovedEmitter");
+    s(this, "onBeforeEdgeRemoved");
+    s(this, "beforeClearEmitter");
+    s(this, "onBeforeClear");
     [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
   }
-  addNode(t) {
-    const e = /* @__PURE__ */ new Map(), s = {
-      element: t.element,
-      x: t.x,
-      y: t.y,
-      centerFn: t.centerFn,
-      priority: t.priority,
-      ports: e
+  addNode(e) {
+    const t = /* @__PURE__ */ new Map(), o = {
+      element: e.element,
+      payload: {
+        x: e.x,
+        y: e.y,
+        centerFn: e.centerFn,
+        priority: e.priority
+      },
+      ports: t
     };
-    this.nodes.set(t.id, s), this.nodesElementsMap.set(t.element, t.id), this.afterNodeAddedEmitter.emit(t.id);
+    this.nodes.set(e.id, o), this.nodesElementsMap.set(e.element, e.id), this.afterNodeAddedEmitter.emit(e.id);
   }
   getAllNodeIds() {
     return Array.from(this.nodes.keys());
   }
-  getNode(t) {
-    return this.nodes.get(t);
+  getNode(e) {
+    return this.nodes.get(e);
   }
-  getElementNodeId(t) {
-    return this.nodesElementsMap.get(t);
+  getElementNodeId(e) {
+    return this.nodesElementsMap.get(e);
   }
-  updateNode(t, e) {
-    const s = this.nodes.get(t);
-    s.x = e.x ?? s.x, s.y = e.y ?? s.y, s.centerFn = e.centerFn ?? s.centerFn, e.priority !== void 0 && (s.priority = e.priority, this.afterNodePriorityUpdatedEmitter.emit(t)), this.afterNodeUpdatedEmitter.emit(t);
+  updateNode(e, t) {
+    const o = this.nodes.get(e).payload;
+    o.x = t.x ?? o.x, o.y = t.y ?? o.y, o.centerFn = t.centerFn ?? o.centerFn, t.priority !== void 0 && (o.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
   }
-  removeNode(t) {
-    this.beforeNodeRemovedEmitter.emit(t);
-    const e = this.nodes.get(t);
-    this.nodesElementsMap.delete(e.element), this.nodes.delete(t);
+  removeNode(e) {
+    this.beforeNodeRemovedEmitter.emit(e);
+    const t = this.nodes.get(e);
+    this.nodesElementsMap.delete(t.element), this.nodes.delete(e);
   }
-  addPort(t) {
-    this.ports.set(t.id, {
-      element: t.element,
-      direction: t.direction,
-      nodeId: t.nodeId
-    }), this.elementPorts.addRecord(t.element, t.id), this.cycleEdges.set(t.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(t.id, /* @__PURE__ */ new Set()), this.nodes.get(t.nodeId).ports.set(t.id, t.element), this.afterPortAddedEmitter.emit(t.id);
+  addPort(e) {
+    this.ports.set(e.id, {
+      element: e.element,
+      payload: {
+        direction: e.direction
+      },
+      nodeId: e.nodeId
+    }), this.elementPorts.addRecord(e.element, e.id), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
-  getPort(t) {
-    return this.ports.get(t);
+  getPort(e) {
+    return this.ports.get(e);
   }
-  updatePort(t, e) {
-    const s = this.ports.get(t);
-    s.direction = e.direction ?? s.direction, this.afterPortUpdatedEmitter.emit(t);
+  updatePort(e, t) {
+    const o = this.ports.get(e).payload;
+    o.direction = t.direction ?? o.direction, this.afterPortUpdatedEmitter.emit(e);
   }
   getAllPortIds() {
     return Array.from(this.ports.keys());
   }
-  getElementPortIds(t) {
-    return this.elementPorts.getMultiBySingle(t);
+  getElementPortIds(e) {
+    return this.elementPorts.getMultiBySingle(e);
   }
-  getNodePortIds(t) {
-    const e = this.nodes.get(t);
-    if (e !== void 0)
-      return Array.from(e.ports.keys());
-  }
-  removePort(t) {
-    const e = this.ports.get(t).nodeId;
-    this.beforePortRemovedEmitter.emit(t), this.nodes.get(e).ports.delete(t), this.ports.delete(t), this.elementPorts.removeByMulti(t);
-  }
-  addEdge(t) {
-    this.addEdgeInternal(t), this.afterEdgeAddedEmitter.emit(t.id);
-  }
-  updateEdge(t, e) {
-    if (e.from !== void 0 || e.to !== void 0) {
-      const i = this.edges.get(t);
-      this.removeEdgeInternal(t), this.addEdgeInternal({
-        id: t,
-        from: e.from ?? i.from,
-        to: e.to ?? i.to,
-        shape: i.shape,
-        priority: i.priority
+  getNodePortIds(e) {
+    const t = this.nodes.get(e);
+    if (t !== void 0)
+      return Array.from(t.ports.keys());
+  }
+  removePort(e) {
+    const t = this.ports.get(e).nodeId;
+    this.beforePortRemovedEmitter.emit(e), this.nodes.get(t).ports.delete(e), this.ports.delete(e), this.elementPorts.removeByMulti(e);
+  }
+  addEdge(e) {
+    this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
+  }
+  updateEdge(e, t) {
+    if (t.from !== void 0 || t.to !== void 0) {
+      const i = this.edges.get(e), n = i.payload;
+      this.removeEdgeInternal(e), this.addEdgeInternal({
+        id: e,
+        from: t.from ?? i.from,
+        to: t.to ?? i.to,
+        shape: n.shape,
+        priority: n.priority
       });
     }
-    const s = this.edges.get(t);
-    e.shape !== void 0 && (s.shape = e.shape, this.afterEdgeShapeUpdatedEmitter.emit(t)), e.priority !== void 0 && (s.priority = e.priority, this.afterEdgePriorityUpdatedEmitter.emit(t)), this.afterEdgeUpdatedEmitter.emit(t);
+    const o = this.edges.get(e);
+    t.shape !== void 0 && (o.payload.shape = t.shape, this.afterEdgeShapeUpdatedEmitter.emit(e)), t.priority !== void 0 && (o.payload.priority = t.priority, this.afterEdgePriorityUpdatedEmitter.emit(e)), this.afterEdgeUpdatedEmitter.emit(e);
   }
   getAllEdgeIds() {
     return Array.from(this.edges.keys());
   }
-  getEdge(t) {
-    return this.edges.get(t);
+  getEdge(e) {
+    return this.edges.get(e);
   }
-  removeEdge(t) {
-    this.beforeEdgeRemovedEmitter.emit(t), this.removeEdgeInternal(t);
+  removeEdge(e) {
+    this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
     this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
-  getPortIncomingEdgeIds(t) {
-    return Array.from(this.incomingEdges.get(t));
+  getPortIncomingEdgeIds(e) {
+    return Array.from(this.incomingEdges.get(e));
   }
-  getPortOutgoingEdgeIds(t) {
-    return Array.from(this.outcomingEdges.get(t));
+  getPortOutgoingEdgeIds(e) {
+    return Array.from(this.outcomingEdges.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.getPortOutgoingEdgeIds(t),
-      ...this.getPortCycleEdgeIds(t)
+      ...this.getPortIncomingEdgeIds(e),
+      ...this.getPortOutgoingEdgeIds(e),
+      ...this.getPortCycleEdgeIds(e)
     ];
   }
-  getNodeIncomingEdgeIds(t) {
-    const e = Array.from(this.nodes.get(t).ports.keys());
-    let s = [];
-    return e.forEach((i) => {
-      s = [...s, ...this.getPortIncomingEdgeIds(i)];
-    }), s;
-  }
-  getNodeOutgoingEdgeIds(t) {
-    const e = Array.from(this.nodes.get(t).ports.keys());
-    let s = [];
-    return e.forEach((i) => {
-      s = [...s, ...this.getPortOutgoingEdgeIds(i)];
-    }), s;
-  }
-  getNodeCycleEdgeIds(t) {
-    const e = Array.from(this.nodes.get(t).ports.keys());
-    let s = [];
-    return e.forEach((i) => {
-      s = [...s, ...this.getPortCycleEdgeIds(i)];
-    }), s;
-  }
-  getNodeAdjacentEdgeIds(t) {
+  getNodeIncomingEdgeIds(e) {
+    const t = Array.from(this.nodes.get(e).ports.keys());
+    let o = [];
+    return t.forEach((i) => {
+      o = [...o, ...this.getPortIncomingEdgeIds(i)];
+    }), o;
+  }
+  getNodeOutgoingEdgeIds(e) {
+    const t = Array.from(this.nodes.get(e).ports.keys());
+    let o = [];
+    return t.forEach((i) => {
+      o = [...o, ...this.getPortOutgoingEdgeIds(i)];
+    }), o;
+  }
+  getNodeCycleEdgeIds(e) {
+    const t = Array.from(this.nodes.get(e).ports.keys());
+    let o = [];
+    return t.forEach((i) => {
+      o = [...o, ...this.getPortCycleEdgeIds(i)];
+    }), o;
+  }
+  getNodeAdjacentEdgeIds(e) {
     return [
-      ...this.getNodeIncomingEdgeIds(t),
-      ...this.getNodeOutgoingEdgeIds(t),
-      ...this.getNodeCycleEdgeIds(t)
+      ...this.getNodeIncomingEdgeIds(e),
+      ...this.getNodeOutgoingEdgeIds(e),
+      ...this.getNodeCycleEdgeIds(e)
     ];
   }
-  addEdgeInternal(t) {
-    this.edges.set(t.id, {
-      from: t.from,
-      to: t.to,
-      shape: t.shape,
-      priority: t.priority
-    }), t.from !== t.to ? (this.outcomingEdges.get(t.from).add(t.id), this.incomingEdges.get(t.to).add(t.id)) : this.cycleEdges.get(t.from).add(t.id);
+  addEdgeInternal(e) {
+    this.edges.set(e.id, {
+      from: e.from,
+      to: e.to,
+      payload: {
+        shape: e.shape,
+        priority: e.priority
+      }
+    }), e.from !== e.to ? (this.outcomingEdges.get(e.from).add(e.id), this.incomingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
   }
-  removeEdgeInternal(t) {
-    const e = this.edges.get(t), s = e.from, i = e.to;
-    this.cycleEdges.get(s).delete(t), this.cycleEdges.get(i).delete(t), this.incomingEdges.get(s).delete(t), this.incomingEdges.get(i).delete(t), this.outcomingEdges.get(s).delete(t), this.outcomingEdges.get(i).delete(t), this.edges.delete(t);
+  removeEdgeInternal(e) {
+    const t = this.edges.get(e), o = t.from, i = t.to;
+    this.cycleEdges.get(o).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(o).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(o).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const it = (r) => ({
+const ie = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), nt = {
+}), ne = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Bt {
+class Be {
   constructor() {
-    o(this, "viewportMatrix", nt);
-    o(this, "contentMatrix", nt);
-    o(this, "afterUpdateEmitter");
-    o(this, "onAfterUpdated");
+    s(this, "viewportMatrix", ne);
+    s(this, "contentMatrix", ne);
+    s(this, "afterUpdateEmitter");
+    s(this, "onAfterUpdated");
     [this.afterUpdateEmitter, this.onAfterUpdated] = A();
   }
   getViewportMatrix() {
@@ -807,104 +819,123 @@ class Bt {
   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 = it(this.viewportMatrix), this.afterUpdateEmitter.emit();
+      scale: e.scale ?? this.viewportMatrix.scale,
+      x: e.x ?? this.viewportMatrix.x,
+      y: e.y ?? this.viewportMatrix.y
+    }, this.contentMatrix = ie(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
-  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 = it(this.contentMatrix), this.afterUpdateEmitter.emit();
+      scale: e.scale ?? this.contentMatrix.scale,
+      x: e.x ?? this.contentMatrix.x,
+      y: e.y ?? this.contentMatrix.y
+    }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
 class j {
-  constructor(t) {
-    o(this, "elementToNodeId", /* @__PURE__ */ new Map());
-    o(this, "nodesResizeObserver");
-    o(this, "onAfterNodeAdded", (t) => {
-      const e = this.canvas.graph.getNode(t);
-      this.elementToNodeId.set(e.element, t), this.nodesResizeObserver.observe(e.element);
-    });
-    o(this, "onBeforeNodeRemoved", (t) => {
-      const e = this.canvas.graph.getNode(t);
-      this.elementToNodeId.delete(e.element), this.nodesResizeObserver.unobserve(e.element);
-    });
-    o(this, "onBeforeClear", () => {
+  constructor(e) {
+    s(this, "elementToNodeId", /* @__PURE__ */ new Map());
+    s(this, "nodesResizeObserver");
+    s(this, "onAfterNodeAdded", (e) => {
+      const t = this.canvas.graph.getNode(e);
+      this.elementToNodeId.set(t.element, e), this.nodesResizeObserver.observe(t.element);
+    });
+    s(this, "onBeforeNodeRemoved", (e) => {
+      const t = this.canvas.graph.getNode(e);
+      this.elementToNodeId.delete(t.element), this.nodesResizeObserver.unobserve(t.element);
+    });
+    s(this, "onBeforeClear", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
-    this.canvas = t, this.nodesResizeObserver = new ResizeObserver((e) => {
-      e.forEach((s) => {
-        const i = s.target;
+    this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
+      t.forEach((o) => {
+        const i = o.target;
         this.handleNodeResize(i);
       });
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
-  static configure(t) {
-    new j(t);
+  static configure(e) {
+    new j(e);
   }
-  handleNodeResize(t) {
-    const e = this.elementToNodeId.get(t);
-    this.canvas.updateNode(e);
+  handleNodeResize(e) {
+    const t = this.elementToNodeId.get(e);
+    this.canvas.updateNode(t);
   }
 }
-const Ft = (r, t, e) => {
-  const { x: s, y: i, width: n, height: a } = r.getBoundingClientRect();
-  return t >= s && t <= s + n && e >= i && e <= i + a;
-}, Ot = (r, t, e) => t >= 0 && t <= r.innerWidth && e >= 0 && e <= r.innerHeight, R = (r, t, e, s) => Ft(t, e, s) && Ot(r, e, s), U = (r, t) => {
-  t !== null ? r.style.cursor = t : r.style.removeProperty("cursor");
-}, W = (r) => {
-  const t = document.createElement("div");
+const Fe = (r, e, t) => {
+  const { x: o, y: i, width: n, height: a } = r.getBoundingClientRect();
+  return e >= o && e <= o + n && t >= i && t <= i + a;
+}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, C = (r, e, t, o) => Fe(e, t, o) && Oe(r, t, o), U = (r, e) => {
+  e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
+}, B = (r) => {
+  const e = document.createElement("div");
   return {
     id: r.overlayId,
-    element: t,
+    element: e,
     x: r.portCoords.x,
     y: r.portCoords.y,
     ports: [
       {
         id: r.overlayId,
-        element: t,
+        element: e,
         direction: r.portDirection
       }
     ]
   };
-}, kt = (r, t) => {
-  let e = t, s = null;
-  for (; e !== null && (s = r.getElementPortIds(e)[0] ?? null, s === null); )
-    e = e.parentElement;
-  return s;
-}, yt = (r, t) => {
-  const e = document.elementsFromPoint(t.x, t.y);
-  for (const s of e) {
-    const i = kt(r, s);
+}, We = (r, e) => {
+  let t = e, o = null;
+  for (; t !== null && (o = r.getElementPortIds(t)[0] ?? null, o === null); )
+    t = t.parentElement;
+  return o;
+}, ye = (r, e) => {
+  const t = document.elementsFromPoint(e.x, e.y);
+  for (const o of t) {
+    const i = We(r, o);
     if (i !== null)
       return i;
   }
   return null;
 };
 var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
-const vt = (r, t) => ({
+const me = (r, e) => ({
   x: r / 2,
-  y: t / 2
-}), m = (r, t, e) => ({
-  x: t.x * r.x - t.y * r.y + ((1 - t.x) * e.x + t.y * e.y),
-  y: t.y * r.x + t.x * r.y + ((1 - t.x) * e.y - t.y * e.x)
+  y: e / 2
 }), u = {
   x: 0,
   y: 0
-};
-class zt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.to;
-    this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = m(
+}, m = (r, e, t) => ({
+  x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
+  y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
+}), ve = (r, e) => {
+  const t = {
+    x: r.x + r.width / 2,
+    y: r.y + r.height / 2
+  }, o = {
+    x: e.x + e.width / 2,
+    y: e.y + e.height / 2
+  }, i = Math.min(t.x, o.x), n = Math.min(t.y, o.y), a = Math.abs(o.x - t.x), h = Math.abs(o.y - t.y), d = t.x <= o.x ? 1 : -1, c = t.y <= o.y ? 1 : -1;
+  return {
+    x: i,
+    y: n,
+    width: a,
+    height: h,
+    flipX: d,
+    flipY: c
+  };
+}, O = (r, e, t, o) => ({
+  x: e * r.x + (1 - e) / 2 * o.x,
+  y: t * r.y + (1 - t) / 2 * o.y
+});
+class ke {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const o = m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
@@ -913,29 +944,25 @@ class zt {
       this.params.targetDirection,
       this.params.to
     ), n = {
-      x: s.x + this.params.sourceDirection.x * this.params.curvature,
-      y: s.y + this.params.sourceDirection.y * this.params.curvature
+      x: o.x + this.params.sourceDirection.x * this.params.curvature,
+      y: o.y + this.params.sourceDirection.y * this.params.curvature
     }, a = {
       x: i.x - this.params.targetDirection.x * this.params.curvature,
       y: i.y - this.params.targetDirection.y * this.params.curvature
-    }, h = `M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${s.x} ${s.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
+    }, h = `M ${o.x} ${o.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`, d = this.params.hasSourceArrow ? "" : `M ${u.x} ${u.y} L ${o.x} ${o.y} `, c = this.params.hasTargetArrow ? "" : ` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;
     this.path = `${d}${h}${c}`;
   }
 }
-const B = (r, t, e, s) => ({
-  x: t * r.x + (1 - t) / 2 * s.x,
-  y: e * r.y + (1 - e) / 2 * s.y
-});
-class Xt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+class ze {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -953,62 +980,78 @@ class Xt {
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), w = {
+    ), p = {
       x: g.x + h,
       y: g.y + d
     }, f = {
-      x: (l.x + w.x) / 2,
-      y: (l.y + w.y) / 2
+      x: (l.x + p.x) / 2,
+      y: (l.y + p.y) / 2
     }, y = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
     }, v = {
       x: g.x - this.params.curvature * this.params.targetDirection.x,
       y: g.y - this.params.curvature * this.params.targetDirection.y
-    }, E = {
+    }, x = {
       x: c.x + h,
       y: c.y + d
-    }, x = {
+    }, E = {
       x: g.x + h,
       y: g.y + d
     };
     this.path = [
-      `M ${e.x} ${e.y}`,
+      `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${y.x} ${y.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
-      `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
-      `L ${s.x} ${s.y}`
-    ].join(" "), this.midpoint = B(f, t.flipX, t.flipY, t.to);
+      `C ${y.x} ${y.y} ${x.x} ${x.y} ${f.x} ${f.y}`,
+      `C ${E.x} ${E.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
+      `L ${o.x} ${o.y}`
+    ].join(" "), this.midpoint = O(f, e.flipX, e.flipY, e.to);
   }
 }
-const M = (r, t) => {
-  const e = [];
-  if (r.length > 0 && e.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && e.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
-    const s = r.length - 1;
+const G = Object.freeze({
+  edgeColor: "--edge-color"
+}), Ae = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
+}, Ee = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, F = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return r.setAttribute("fill", `var(${G.edgeColor})`), r;
+}, xe = () => {
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  return r.style.transformOrigin = "50% 50%", r;
+}, Se = (r, e) => {
+  r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
+}, M = (r, e) => {
+  const t = [];
+  if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
+    const o = r.length - 1;
     let i = 0, n = 0, a = 0;
     r.forEach((h, d) => {
       let c = 0, l = 0, g = 0;
-      const w = d > 0, f = d < s, y = w && f;
-      if (w && (c = -i, l = -n, g = a), f) {
+      const p = d > 0, f = d < o, y = p && f;
+      if (p && (c = -i, l = -n, g = a), f) {
         const V = r[d + 1];
         i = V.x - h.x, n = V.y - h.y, a = Math.sqrt(i * i + n * n);
       }
-      const E = a !== 0 ? Math.min((y ? t : 0) / a, d < s - 1 ? 0.5 : 1) : 0, x = y ? { x: h.x + i * E, y: h.y + n * E } : h, b = g !== 0 ? Math.min((y ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + c * b, y: h.y + l * b } : h;
-      d > 0 && e.push(`L ${D.x} ${D.y}`), y && e.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${x.x} ${x.y}`
+      const x = a !== 0 ? Math.min((y ? e : 0) / a, d < o - 1 ? 0.5 : 1) : 0, E = y ? { x: h.x + i * x, y: h.y + n * x } : h, b = g !== 0 ? Math.min((y ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + c * b, y: h.y + l * b } : h;
+      d > 0 && t.push(`L ${D.x} ${D.y}`), y && t.push(
+        `C ${h.x} ${h.y} ${h.x} ${h.y} ${E.x} ${E.y}`
       );
     });
   }
-  return e.join(" ");
+  return t.join(" ");
 };
-class Yt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.to;
-    this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+class Xe {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const o = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
@@ -1030,26 +1073,26 @@ class Yt {
     ), c = Math.max((h.x + d.x) / 2, n), l = this.params.to.y / 2, g = {
       x: this.params.flipX > 0 ? c : -n,
       y: h.y
-    }, w = { x: g.x, y: l }, f = {
+    }, p = { x: g.x, y: l }, f = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
     }, y = { x: f.x, y: l };
     this.path = M(
-      [s, h, g, w, y, f, d, i],
+      [o, h, g, p, y, f, d, i],
       this.params.roundness
     );
   }
 }
-class Ht {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+class Ye {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1064,21 +1107,21 @@ class Ht {
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
-    ), w = { x: g.x + d, y: g.y + c }, f = { x: (l.x + w.x) / 2, y: (l.y + w.y) / 2 };
-    this.midpoint = B(f, t.flipX, t.flipY, t.to), this.path = M(
-      [e, n, l, w, g, s],
+    ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
+    this.midpoint = O(f, e.flipX, e.flipY, e.to), this.path = M(
+      [t, n, l, p, g, o],
       this.params.roundness
     );
   }
 }
-class jt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.to;
-    this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+class He {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const o = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
@@ -1098,17 +1141,17 @@ class jt {
       this.params.targetDirection,
       this.params.to
     );
-    this.path = M([s, a, h, i], this.params.roundness);
+    this.path = M([o, a, h, i], this.params.roundness);
   }
 }
-class Gt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.to;
-    this.midpoint = { x: e.x / 2, y: e.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+class je {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.to;
+    this.midpoint = { x: t.x / 2, y: t.y / 2 };
+    const o = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
@@ -1130,22 +1173,22 @@ class Gt {
     ), c = Math.max((h.y + d.y) / 2, n), l = this.params.to.x / 2, g = {
       x: h.x,
       y: this.params.flipY > 0 ? c : -n
-    }, w = { x: l, y: g.y }, f = {
+    }, p = { x: l, y: g.y }, f = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
     }, y = { x: l, y: f.y };
     this.path = M(
-      [s, h, g, w, y, f, d, i],
+      [o, h, g, p, y, f, d, i],
       this.params.roundness
     );
   }
 }
-class G {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.arrowOffset, s = this.params.side, i = this.params.arrowLength + e, n = i + 2 * s, h = [
+class K {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.arrowOffset, o = this.params.side, i = this.params.arrowLength + t, n = i + 2 * o, h = [
       { x: this.params.arrowLength, y: u.y },
       { x: i, y: u.y },
       { x: i, y: this.params.side },
@@ -1160,35 +1203,35 @@ class G {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${M(h, this.params.roundness)}`, this.midpoint = { x: (h[3].x + h[4].x) / 2, y: (h[3].y + h[4].y) / 2 };
   }
 }
-class Kt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.smallRadius, s = this.params.radius, i = e + s, n = e * s / i, a = Math.sqrt(i * i - e * e), h = a * e / i, d = a + s + this.params.arrowLength, c = this.params.arrowLength + h, g = [
+class Ge {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.smallRadius, o = this.params.radius, i = t + o, n = t * o / i, a = Math.sqrt(i * i - t * t), h = a * t / i, d = a + o + this.params.arrowLength, c = this.params.arrowLength + h, g = [
       { x: this.params.arrowLength, y: u.y },
       { x: c, y: n },
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
       (y) => m(y, this.params.sourceDirection, u)
-    ), w = [
+    ), p = [
       `M ${g[0].x} ${g[0].y}`,
-      `A ${e} ${e} 0 0 1 ${g[1].x} ${g[1].y}`,
-      `A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,
-      `A ${e} ${e} 0 0 1 ${g[0].x} ${g[0].y}`
+      `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
+      `A ${o} ${o} 0 1 0 ${g[2].x} ${g[2].y}`,
+      `A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`
     ].join(" "), f = `M 0 0 L ${g[0].x} ${g[0].y} `;
-    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${w}`, this.midpoint = g[3];
+    this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
   }
 }
-class Zt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    o(this, "diagonalDistance");
-    this.params = t;
-    const e = this.params.to;
-    if (this.midpoint = { x: e.x / 2, y: e.y / 2 }, this.diagonalDistance = Math.sqrt(
+class Ke {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    s(this, "diagonalDistance");
+    this.params = e;
+    const t = this.params.to;
+    if (this.midpoint = { x: t.x / 2, y: t.y / 2 }, this.diagonalDistance = Math.sqrt(
       this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
     ), Math.sqrt(
       this.params.to.x * this.params.to.x + this.params.to.y * this.params.to.y
@@ -1209,24 +1252,24 @@ class Zt {
     });
     this.path = `M ${i.x} ${i.y} L ${n.x} ${n.y}`;
   }
-  createDirectLinePoint(t) {
-    const e = t.hasArrow ? this.params.arrowLength : 0, s = t.offset + e, i = t.flip * s / this.diagonalDistance;
+  createDirectLinePoint(e) {
+    const t = e.hasArrow ? this.params.arrowLength : 0, o = e.offset + t, i = e.flip * o / this.diagonalDistance;
     return {
-      x: this.params.to.x * i + t.shift.x,
-      y: this.params.to.y * i + t.shift.y
+      x: this.params.to.x * i + e.shift.x,
+      y: this.params.to.y * i + e.shift.y
     };
   }
 }
-class Jt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+class Ze {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1245,29 +1288,29 @@ class Jt {
       x: (n.x + a.x) / 2,
       y: l
     };
-    this.midpoint = B(g, t.flipX, t.flipY, t.to), this.path = M(
+    this.midpoint = O(g, e.flipX, e.flipY, e.to), this.path = M(
       [
-        e,
+        t,
         n,
         { x: n.x, y: l },
         { x: a.x, y: l },
         a,
-        s
+        o
       ],
       this.params.roundness
     );
   }
 }
-class Qt {
-  constructor(t) {
-    o(this, "path");
-    o(this, "midpoint");
-    this.params = t;
-    const e = this.params.hasSourceArrow ? m(
+class Je {
+  constructor(e) {
+    s(this, "path");
+    s(this, "midpoint");
+    this.params = e;
+    const t = this.params.hasSourceArrow ? m(
       { x: this.params.arrowLength, y: u.y },
       this.params.sourceDirection,
       u
-    ) : u, s = this.params.hasTargetArrow ? m(
+    ) : u, o = this.params.hasTargetArrow ? m(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
@@ -1286,63 +1329,28 @@ class Qt {
       x: l,
       y: (n.y + a.y) / 2
     };
-    this.midpoint = B(g, t.flipX, t.flipY, t.to), this.path = M(
+    this.midpoint = O(g, e.flipX, e.flipY, e.to), this.path = M(
       [
-        e,
+        t,
         n,
         { x: l, y: n.y },
         { x: l, y: a.y },
         a,
-        s
+        o
       ],
       this.params.roundness
     );
   }
 }
-const Et = (r, t) => {
-  r.style.transform = `translate(${t.x}px, ${t.y}px)`, r.style.width = `${Math.max(t.width, 1)}px`, r.style.height = `${Math.max(t.height, 1)}px`;
-}, K = Object.freeze({
-  edgeColor: "--edge-color"
-}), At = (r) => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t.style.setProperty(K.edgeColor, r), t;
-}, $ = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${K.edgeColor})`), r;
-}, xt = () => {
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  return r.style.transformOrigin = "50% 50%", r;
-}, St = (r) => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return t.setAttribute("stroke", `var(${K.edgeColor})`), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "none"), t;
-}, Pt = (r, t) => {
-  const e = {
-    x: r.x + r.width / 2,
-    y: r.y + r.height / 2
-  }, s = {
-    x: t.x + t.width / 2,
-    y: t.y + t.height / 2
-  }, i = Math.min(e.x, s.x), n = Math.min(e.y, s.y), a = Math.abs(s.x - e.x), h = Math.abs(s.y - e.y), d = e.x <= s.x ? 1 : -1, c = e.y <= s.y ? 1 : -1;
-  return {
-    x: i,
-    y: n,
-    width: a,
-    height: h,
-    flipX: d,
-    flipY: c
-  };
-}, X = (r, t, e, s) => {
-  const n = [
-    u,
-    { x: e, y: s },
-    { x: e, y: -s }
-  ].map((c) => m(c, r, u)).map((c) => ({ x: c.x + t.x, y: c.y + t.y })), a = `M ${n[0].x} ${n[0].y}`, h = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
-  return `${a} ${h} ${d} Z`;
-}, p = Object.freeze({
+const w = Object.freeze({
   color: "#777777",
   width: 1,
-  arrowLength: 15,
-  arrowWidth: 4,
+  arrowLength: 20,
+  polygonArrowRadius: 4,
+  circleArrowRadius: 8,
+  wedgeArrowSmallRadius: 20,
+  wedgeArrowRadius: 100,
+  wedgeArrowAngle: Math.PI / 12,
   arrowOffset: 15,
   hasSourceArrow: !1,
   hasTargetArrow: !1,
@@ -1356,96 +1364,155 @@ const Et = (r, t) => {
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), at = (r, t, e) => ({ x: t * Math.cos(r), y: e * Math.sin(r) });
-class F {
-  constructor(t) {
-    o(this, "svg");
-    o(this, "group", xt());
-    o(this, "line");
-    o(this, "sourceArrow", null);
-    o(this, "targetArrow", null);
-    o(this, "onAfterRender");
-    o(this, "afterRenderEmitter");
-    this.params = t, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = At(t.color), this.svg.appendChild(this.group), this.line = St(t.width), this.group.appendChild(this.line), t.hasSourceArrow && (this.sourceArrow = $(), this.group.appendChild(this.sourceArrow)), t.hasTargetArrow && (this.targetArrow = $(), this.group.appendChild(this.targetArrow));
-  }
-  render(t) {
-    const { x: e, y: s, width: i, height: n, flipX: a, flipY: h } = Pt(
-      t.from,
-      t.to
+}), ae = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class W {
+  constructor(e) {
+    s(this, "svg");
+    s(this, "group", xe());
+    s(this, "line");
+    s(this, "sourceArrow", null);
+    s(this, "targetArrow", null);
+    s(this, "onAfterRender");
+    s(this, "afterRenderEmitter");
+    s(this, "arrowRenderer");
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Ee(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
+      e.from,
+      e.to
     );
-    Et(this.svg, { x: e, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = at(
-      t.from.direction,
+    Se(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = ae(
+      e.from.direction,
       a,
       h
-    ), c = at(
-      t.to.direction,
+    ), c = ae(
+      e.to.direction,
       a,
       h
     ), l = {
       x: i,
       y: n
     };
-    let g = c, w = -this.params.arrowLength, f;
-    t.category === C.PortCycle ? (f = this.params.createCyclePath, g = d, w = this.params.arrowLength) : t.category === C.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const y = f(
+    let g = { x: -c.x, y: -c.y }, p;
+    e.category === L.PortCycle ? (p = this.params.createCyclePath, g = d) : e.category === L.NodeCycle ? p = this.params.createDetourPath : p = this.params.createLinePath;
+    const f = p(
       d,
       c,
       l,
       a,
       h
     );
-    this.line.setAttribute("d", y.path);
+    this.line.setAttribute("d", f.path);
+    let y = null;
+    this.sourceArrow && (y = this.arrowRenderer({
+      direction: d,
+      shift: u,
+      arrowLength: this.params.arrowLength
+    }), this.sourceArrow.setAttribute("d", y));
     let v = null;
-    this.sourceArrow && (v = X(
-      d,
-      u,
-      this.params.arrowLength,
-      this.params.arrowWidth
-    ), this.sourceArrow.setAttribute("d", v));
-    let E = null;
-    this.targetArrow && (E = X(
-      g,
-      l,
-      w,
-      this.params.arrowWidth
-    ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: y,
-      sourceArrowPath: v,
-      targetArrowPath: E
+    this.targetArrow && (v = this.arrowRenderer({
+      direction: g,
+      shift: l,
+      arrowLength: this.params.arrowLength
+    }), this.targetArrow.setAttribute("d", v)), this.afterRenderEmitter.emit({
+      edgePath: f,
+      sourceArrowPath: y,
+      targetArrowPath: v
     });
   }
 }
-class _t {
-  constructor(t) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "curvature");
-    o(this, "portCycleRadius");
-    o(this, "portCycleSmallRadius");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (t) => new Kt({
-      sourceDirection: t,
+const Qe = (r) => (e) => {
+  const o = [
+    u,
+    { x: e.arrowLength, y: r.radius },
+    { x: e.arrowLength, y: -r.radius }
+  ].map(
+    (h) => m(h, e.direction, u)
+  ).map((h) => ({
+    x: h.x + e.shift.x,
+    y: h.y + e.shift.y
+  })), i = `M ${o[0].x} ${o[0].y}`, n = `L ${o[1].x} ${o[1].y}`, a = `L ${o[2].x} ${o[2].y}`;
+  return `${i} ${n} ${a} Z`;
+}, _e = (r) => (e) => {
+  const t = r.radius, o = e.arrowLength, i = (o * o + 2 * o * t) / (2 * t), n = i + t, a = o + t - t * (o + t) / n, h = t * i / n, c = [u, { x: a, y: -h }, { x: a, y: h }].map(
+    (y) => m(y, e.direction, u)
+  ).map((y) => ({
+    x: y.x + e.shift.x,
+    y: y.y + e.shift.y
+  })), l = `M ${c[0].x} ${c[0].y}`, g = `A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`, p = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, f = `A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;
+  return `${l} ${g} ${p} ${f}`;
+}, qe = (r) => (e) => {
+  const t = r.smallRadius, o = r.radius, i = m(
+    {
+      x: e.arrowLength,
+      y: 0
+    },
+    {
+      x: Math.cos(r.angle),
+      y: Math.sin(r.angle)
+    },
+    {
+      x: e.arrowLength + r.smallRadius,
+      y: 0
+    }
+  ), a = [u, { x: i.x, y: -i.y }, i].map(
+    (g) => m(g, e.direction, u)
+  ).map((g) => ({
+    x: g.x + e.shift.x,
+    y: g.y + e.shift.y
+  })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, l = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
+  return `${h} ${d} ${c} ${l}`;
+}, $ = (r) => {
+  if (typeof r == "function")
+    return r;
+  switch (r.type) {
+    case "triangle":
+      return Qe({
+        radius: r.radius ?? w.polygonArrowRadius
+      });
+    case "arc":
+      return _e({
+        radius: r.radius ?? w.circleArrowRadius
+      });
+    default:
+      return qe({
+        smallRadius: r.smallRadius ?? w.wedgeArrowSmallRadius,
+        angle: r.angle ?? w.wedgeArrowAngle,
+        radius: r.radius ?? w.wedgeArrowRadius
+      });
+  }
+};
+class et {
+  constructor(e) {
+    s(this, "svg");
+    s(this, "group");
+    s(this, "line");
+    s(this, "sourceArrow");
+    s(this, "targetArrow");
+    s(this, "onAfterRender");
+    s(this, "arrowLength");
+    s(this, "curvature");
+    s(this, "portCycleRadius");
+    s(this, "portCycleSmallRadius");
+    s(this, "detourDirection");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    s(this, "pathShape");
+    s(this, "createCyclePath", (e) => new Ge({
+      sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (t, e, s, i, n) => new Xt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createDetourPath", (e, t, o, i, n) => new ze({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1455,20 +1522,20 @@ class _t {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (t, e, s) => new zt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createLinePath", (e, t, o) => new ke({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.curvature = (t == null ? void 0 : t.curvature) ?? p.curvature, this.portCycleRadius = (t == null ? void 0 : t.cycleRadius) ?? p.cycleRadius, this.portCycleSmallRadius = (t == null ? void 0 : t.smallCycleRadius) ?? p.smallCycleRadius, this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? p.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (t == null ? void 0 : t.color) ?? p.color,
-      width: (t == null ? void 0 : t.width) ?? p.width,
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? w.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? w.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? w.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? w.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? w.color,
+      width: (e == null ? void 0 : e.width) ?? w.width,
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
@@ -1476,29 +1543,28 @@ class _t {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(t) {
-    this.pathShape.render(t);
+  render(e) {
+    this.pathShape.render(e);
   }
 }
-class qt {
-  constructor(t) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (t) => new G({
-      sourceDirection: t,
+class tt {
+  constructor(e) {
+    s(this, "svg");
+    s(this, "group");
+    s(this, "line");
+    s(this, "sourceArrow");
+    s(this, "targetArrow");
+    s(this, "onAfterRender");
+    s(this, "arrowLength");
+    s(this, "arrowOffset");
+    s(this, "roundness");
+    s(this, "cycleSquareSide");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    s(this, "pathShape");
+    s(this, "createCyclePath", (e) => new K({
+      sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -1506,10 +1572,10 @@ class qt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (t, e, s, i, n) => new Jt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createDetourPath", (e, t, o, i, n) => new Ze({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1519,10 +1585,10 @@ class qt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (t, e, s, i) => new Yt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createLinePath", (e, t, o, i) => new Xe({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       flipX: i,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1530,17 +1596,17 @@ class qt {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
-    const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? w.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? w.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? w.roundness;
     this.roundness = Math.min(
-      e,
+      t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (t == null ? void 0 : t.color) ?? p.color,
-      width: (t == null ? void 0 : t.width) ?? p.width,
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? w.color,
+      width: (e == null ? void 0 : e.width) ?? w.width,
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
@@ -1548,30 +1614,29 @@ class qt {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(t) {
-    this.pathShape.render(t);
+  render(e) {
+    this.pathShape.render(e);
   }
 }
-class te {
-  constructor(t) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDirection");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (t) => new G({
-      sourceDirection: t,
+class rt {
+  constructor(e) {
+    s(this, "svg");
+    s(this, "group");
+    s(this, "line");
+    s(this, "sourceArrow");
+    s(this, "targetArrow");
+    s(this, "onAfterRender");
+    s(this, "arrowLength");
+    s(this, "arrowOffset");
+    s(this, "roundness");
+    s(this, "cycleSquareSide");
+    s(this, "detourDirection");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    s(this, "pathShape");
+    s(this, "createCyclePath", (e) => new K({
+      sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -1579,10 +1644,10 @@ class te {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (t, e, s, i, n) => new Ht({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createDetourPath", (e, t, o, i, n) => new Ye({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1593,27 +1658,27 @@ class te {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (t, e, s) => new jt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createLinePath", (e, t, o) => new He({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
-    const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? w.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? w.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? w.roundness;
     this.roundness = Math.min(
-      e,
+      t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (t == null ? void 0 : t.detourDirection) ?? p.detourDirection, this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (t == null ? void 0 : t.color) ?? p.color,
-      width: (t == null ? void 0 : t.width) ?? p.width,
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? w.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? w.color,
+      width: (e == null ? void 0 : e.width) ?? w.width,
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
@@ -1621,29 +1686,28 @@ class te {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(t) {
-    this.pathShape.render(t);
+  render(e) {
+    this.pathShape.render(e);
   }
 }
-class ee {
-  constructor(t) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "arrowOffset");
-    o(this, "roundness");
-    o(this, "cycleSquareSide");
-    o(this, "detourDistance");
-    o(this, "hasSourceArrow");
-    o(this, "hasTargetArrow");
-    o(this, "pathShape");
-    o(this, "createCyclePath", (t) => new G({
-      sourceDirection: t,
+class ot {
+  constructor(e) {
+    s(this, "svg");
+    s(this, "group");
+    s(this, "line");
+    s(this, "sourceArrow");
+    s(this, "targetArrow");
+    s(this, "onAfterRender");
+    s(this, "arrowLength");
+    s(this, "arrowOffset");
+    s(this, "roundness");
+    s(this, "cycleSquareSide");
+    s(this, "detourDistance");
+    s(this, "hasSourceArrow");
+    s(this, "hasTargetArrow");
+    s(this, "pathShape");
+    s(this, "createCyclePath", (e) => new K({
+      sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
@@ -1651,10 +1715,10 @@ class ee {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (t, e, s, i, n) => new Qt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createDetourPath", (e, t, o, i, n) => new Je({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       flipX: i,
       flipY: n,
       arrowLength: this.arrowLength,
@@ -1664,10 +1728,10 @@ class ee {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (t, e, s, i, n) => new Gt({
-      to: s,
-      sourceDirection: t,
-      targetDirection: e,
+    s(this, "createLinePath", (e, t, o, i, n) => new je({
+      to: o,
+      sourceDirection: e,
+      targetDirection: t,
       flipY: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -1675,17 +1739,17 @@ class ee {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.arrowOffset = (t == null ? void 0 : t.arrowOffset) ?? p.arrowOffset, this.cycleSquareSide = (t == null ? void 0 : t.cycleSquareSide) ?? p.cycleSquareSide;
-    const e = (t == null ? void 0 : t.roundness) ?? p.roundness;
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? w.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? w.cycleSquareSide;
+    const t = (e == null ? void 0 : e.roundness) ?? w.roundness;
     this.roundness = Math.min(
-      e,
+      t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (t == null ? void 0 : t.detourDistance) ?? p.detourDistance, this.hasSourceArrow = (t == null ? void 0 : t.hasSourceArrow) ?? p.hasSourceArrow, this.hasTargetArrow = (t == null ? void 0 : t.hasTargetArrow) ?? p.hasTargetArrow, this.pathShape = new F({
-      color: (t == null ? void 0 : t.color) ?? p.color,
-      width: (t == null ? void 0 : t.width) ?? p.width,
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? w.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? w.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? w.hasTargetArrow, this.pathShape = new W({
+      color: (e == null ? void 0 : e.color) ?? w.color,
+      width: (e == null ? void 0 : e.width) ?? w.width,
+      arrowRenderer: $((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
-      arrowWidth: this.arrowWidth,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
@@ -1693,51 +1757,34 @@ class ee {
       createLinePath: this.createLinePath
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
-  render(t) {
-    this.pathShape.render(t);
+  render(e) {
+    this.pathShape.render(e);
   }
 }
-const ht = (r) => {
-  if (r.diagonalDistance === 0)
-    return "";
-  const t = r.offset / r.diagonalDistance, e = r.flip * r.to.x, s = r.flip * r.to.y, i = {
-    x: e * t + r.shift.x,
-    y: s * t + r.shift.y
-  }, n = {
-    x: e / r.diagonalDistance,
-    y: s / r.diagonalDistance
-  };
-  return X(
-    n,
-    i,
-    r.arrowLength,
-    r.arrowWidth
-  );
-};
-class bt {
-  constructor(t) {
-    o(this, "svg");
-    o(this, "group", xt());
-    o(this, "line");
-    o(this, "sourceArrow", null);
-    o(this, "targetArrow", null);
-    o(this, "color");
-    o(this, "width");
-    o(this, "arrowLength");
-    o(this, "arrowWidth");
-    o(this, "sourceOffset");
-    o(this, "targetOffset");
-    o(this, "onAfterRender");
-    o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (t == null ? void 0 : t.color) ?? p.color, this.width = (t == null ? void 0 : t.width) ?? p.width, this.arrowLength = (t == null ? void 0 : t.arrowLength) ?? p.arrowLength, this.arrowWidth = (t == null ? void 0 : t.arrowWidth) ?? p.arrowWidth, this.sourceOffset = (t == null ? void 0 : t.sourceOffset) ?? p.preOffset, this.targetOffset = (t == null ? void 0 : t.targetOffset) ?? p.preOffset, this.svg = At(this.color), this.svg.appendChild(this.group), this.line = St(this.width), this.group.appendChild(this.line), t != null && t.hasSourceArrow && (this.sourceArrow = $(), this.group.appendChild(this.sourceArrow)), t != null && t.hasTargetArrow && (this.targetArrow = $(), this.group.appendChild(this.targetArrow));
-  }
-  render(t) {
-    const { x: e, y: s, width: i, height: n, flipX: a, flipY: h } = Pt(
-      t.from,
-      t.to
+class Pe {
+  constructor(e) {
+    s(this, "svg");
+    s(this, "group", xe());
+    s(this, "line");
+    s(this, "sourceArrow", null);
+    s(this, "targetArrow", null);
+    s(this, "color");
+    s(this, "width");
+    s(this, "arrowLength");
+    s(this, "sourceOffset");
+    s(this, "targetOffset");
+    s(this, "onAfterRender");
+    s(this, "afterRenderEmitter");
+    s(this, "arrowRenderer");
+    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? w.color, this.width = (e == null ? void 0 : e.width) ?? w.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? w.arrowLength, this.arrowRenderer = $((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? w.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? w.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Ee(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = F(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = F(), this.group.appendChild(this.targetArrow));
+  }
+  render(e) {
+    const { x: t, y: o, width: i, height: n, flipX: a, flipY: h } = ve(
+      e.from,
+      e.to
     );
-    Et(this.svg, { x: e, y: s, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
-    const d = { x: i, y: n }, c = new Zt({
+    Se(this.svg, { x: t, y: o, width: i, height: n }), this.group.style.transform = `scale(${a}, ${h})`;
+    const d = { x: i, y: n }, c = new Ke({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1746,152 +1793,168 @@ class bt {
       arrowLength: this.arrowLength
     });
     this.line.setAttribute("d", c.path);
-    let l = null;
-    this.sourceArrow && (l = ht({
-      diagonalDistance: c.diagonalDistance,
-      to: d,
-      offset: this.sourceOffset,
-      flip: 1,
-      shift: u,
-      arrowWidth: this.arrowWidth,
-      arrowLength: this.arrowLength
-    }), this.sourceArrow.setAttribute("d", l));
-    let g = null;
-    this.targetArrow && (g = ht({
-      diagonalDistance: c.diagonalDistance,
-      to: d,
-      offset: this.targetOffset,
-      flip: -1,
-      shift: d,
-      arrowWidth: this.arrowWidth,
-      arrowLength: this.arrowLength
-    }), this.targetArrow.setAttribute("d", g)), this.afterRenderEmitter.emit({
+    let l = null, g = null;
+    const p = c.diagonalDistance;
+    if (p === 0)
+      this.sourceArrow !== null && (l = "", this.sourceArrow.setAttribute("d", l)), this.targetArrow !== null && (g = "", this.targetArrow.setAttribute("d", g));
+    else {
+      const f = {
+        x: d.x / p,
+        y: d.y / p
+      };
+      if (this.sourceArrow) {
+        const y = {
+          x: f.x * this.sourceOffset,
+          y: f.y * this.sourceOffset
+        };
+        l = this.arrowRenderer({
+          direction: f,
+          shift: y,
+          arrowLength: this.arrowLength
+        }), this.sourceArrow.setAttribute("d", l);
+      }
+      if (this.targetArrow) {
+        const y = {
+          x: f.x * this.targetOffset,
+          y: f.y * this.targetOffset
+        };
+        g = this.arrowRenderer({
+          direction: { x: -f.x, y: -f.y },
+          shift: {
+            x: d.x - y.x,
+            y: d.y - y.y
+          },
+          arrowLength: this.arrowLength
+        }), this.targetArrow.setAttribute("d", g);
+      }
+    }
+    this.afterRenderEmitter.emit({
       edgePath: c,
       sourceArrowPath: l,
       targetArrowPath: g
     });
   }
 }
-const re = () => {
+const st = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, oe = (r) => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return t.setAttribute("stroke", "transparent"), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "none"), t.setAttribute("stroke-linecap", "round"), t;
-}, dt = (r) => {
-  const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return t.setAttribute("stroke-linejoin", "round"), t.setAttribute("stroke-width", `${r}`), t.setAttribute("fill", "transparent"), t.setAttribute("stroke", "transparent"), t;
+}, it = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
+}, he = (r) => {
+  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class se extends Error {
-  constructor(t) {
-    super(t), this.name = "InteractiveEdgeError";
+class nt extends Error {
+  constructor(e) {
+    super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Tt {
-  constructor(t, e) {
-    o(this, "svg");
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "handle", re());
-    o(this, "onAfterRender");
-    o(this, "interactiveLine");
-    o(this, "interactiveSourceArrow", null);
-    o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = t, t instanceof Tt)
-      throw new se(
+class be {
+  constructor(e, t) {
+    s(this, "svg");
+    s(this, "group");
+    s(this, "line");
+    s(this, "sourceArrow");
+    s(this, "targetArrow");
+    s(this, "handle", st());
+    s(this, "onAfterRender");
+    s(this, "interactiveLine");
+    s(this, "interactiveSourceArrow", null);
+    s(this, "interactiveTargetArrow", null);
+    if (this.baseEdge = e, e instanceof be)
+      throw new nt(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
-    const s = (e == null ? void 0 : e.distance) ?? p.interactiveWidth;
-    this.interactiveLine = oe(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = dt(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = dt(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    const o = (t == null ? void 0 : t.distance) ?? w.interactiveWidth;
+    this.interactiveLine = it(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = he(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = he(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
-  render(t) {
-    this.baseEdge.render(t);
+  render(e) {
+    this.baseEdge.render(e);
   }
 }
-class Ne {
-  constructor(t, e) {
-    o(this, "group");
-    o(this, "line");
-    o(this, "sourceArrow");
-    o(this, "targetArrow");
-    o(this, "onAfterRender");
-    o(this, "svg");
-    this.baseShape = t, this.midpointElement = e, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((s) => {
-      const i = s.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
+class Rt {
+  constructor(e, t) {
+    s(this, "group");
+    s(this, "line");
+    s(this, "sourceArrow");
+    s(this, "targetArrow");
+    s(this, "onAfterRender");
+    s(this, "svg");
+    this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((o) => {
+      const i = o.edgePath.midpoint, n = `translate(${i.x}px, ${i.y}px)`;
       this.midpointElement.style.setProperty("transform", n);
     });
   }
-  render(t) {
-    this.baseShape.render(t);
+  render(e) {
+    this.baseShape.render(e);
   }
 }
-const Dt = (r, t) => {
-  const e = new mt(), s = new pt(e, t, r), i = {
+const Te = (r, e) => {
+  const t = new fe(), o = new ue(t, e, r), i = {
     nodes: {
-      centerFn: vt,
+      centerFn: me,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new bt(),
+      shapeFactory: () => new Pe(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
   };
-  return new ft(e, t, s, i);
+  return new we(t, e, o, i);
 };
-class O {
-  constructor(t, e, s, i) {
-    o(this, "onAfterPortMarked", (t) => {
-      const e = this.canvas.graph.getPort(t);
-      this.canvas.graph.getElementPortIds(e.element).length === 1 && this.hookPortEvents(e.element);
-    });
-    o(this, "onBeforePortUnmarked", (t) => {
-      const e = this.canvas.graph.getPort(t);
-      this.canvas.graph.getElementPortIds(e.element).length === 1 && this.unhookPortEvents(e.element);
-    });
-    o(this, "onPortMouseDown", (t) => {
-      if (!this.params.mouseDownEventVerifier(t))
+class k {
+  constructor(e, t, o, i) {
+    s(this, "onAfterPortMarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
+    });
+    s(this, "onBeforePortUnmarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
+    });
+    s(this, "onPortMouseDown", (e) => {
+      if (!this.params.mouseDownEventVerifier(e))
         return;
-      const e = t.currentTarget, s = this.canvas.graph.getElementPortIds(e)[0];
-      this.params.onPortPointerDown(s, {
-        x: t.clientX,
-        y: t.clientY
-      }) && (t.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      const t = e.currentTarget, o = this.canvas.graph.getElementPortIds(t)[0];
+      this.params.onPortPointerDown(o, {
+        x: e.clientX,
+        y: e.clientY
+      }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }));
     });
-    o(this, "onWindowMouseMove", (t) => {
-      if (!R(
+    s(this, "onWindowMouseMove", (e) => {
+      if (!C(
         this.window,
         this.element,
-        t.clientX,
-        t.clientY
+        e.clientX,
+        e.clientY
       )) {
         this.stopMouseDrag();
         return;
       }
-      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
+      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
     });
-    o(this, "onWindowMouseUp", (t) => {
-      this.params.mouseUpEventVerifier(t) && (this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopMouseDrag());
+    s(this, "onWindowMouseUp", (e) => {
+      this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
     });
-    o(this, "onPortTouchStart", (t) => {
-      if (t.touches.length !== 1)
+    s(this, "onPortTouchStart", (e) => {
+      if (e.touches.length !== 1)
         return;
-      const e = t.touches[0], s = t.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
+      const t = e.touches[0], o = e.currentTarget, i = this.canvas.graph.getElementPortIds(o)[0];
       this.params.onPortPointerDown(i, {
-        x: e.clientX,
-        y: e.clientY
-      }) && (t.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        x: t.clientX,
+        y: t.clientY
+      }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -1899,46 +1962,46 @@ class O {
         passive: !0
       }));
     });
-    o(this, "onWindowTouchMove", (t) => {
-      const e = t.touches[0];
-      if (!R(
+    s(this, "onWindowTouchMove", (e) => {
+      const t = e.touches[0];
+      if (!C(
         this.window,
         this.element,
-        e.clientX,
-        e.clientY
+        t.clientX,
+        t.clientY
       )) {
         this.stopTouchDrag();
         return;
       }
-      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
+      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
     });
-    o(this, "onWindowTouchFinish", (t) => {
-      const e = t.changedTouches[0];
-      this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopTouchDrag();
+    s(this, "onWindowTouchFinish", (e) => {
+      const t = e.changedTouches[0];
+      this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
     });
-    o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllPortIds().forEach((t) => {
-        const e = this.canvas.graph.getPort(t);
-        this.unhookPortEvents(e.element);
+    s(this, "onBeforeClear", () => {
+      this.canvas.graph.getAllPortIds().forEach((e) => {
+        const t = this.canvas.graph.getPort(e);
+        this.unhookPortEvents(t.element);
       });
     });
-    o(this, "onBeforeDestroy", () => {
+    s(this, "onBeforeDestroy", () => {
       this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.canvas = t, this.element = e, this.window = s, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = t, this.window = o, this.params = i, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(t, e, s, i) {
-    new O(t, e, s, i);
+  static configure(e, t, o, i) {
+    new k(e, t, o, i);
   }
-  hookPortEvents(t) {
-    t.addEventListener("mousedown", this.onPortMouseDown, {
+  hookPortEvents(e) {
+    e.addEventListener("mousedown", this.onPortMouseDown, {
       passive: !0
-    }), t.addEventListener("touchstart", this.onPortTouchStart, {
+    }), e.addEventListener("touchstart", this.onPortTouchStart, {
       passive: !0
     });
   }
-  unhookPortEvents(t) {
-    t.removeEventListener("mousedown", this.onPortMouseDown), t.removeEventListener("touchstart", this.onPortTouchStart);
+  unhookPortEvents(e) {
+    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
   }
   stopMouseDrag() {
     this.params.onStopDrag(), this.removeWindowMouseListeners();
@@ -1954,61 +2017,61 @@ class O {
   }
 }
 class Z {
-  constructor(t, e, s, i) {
-    o(this, "grabbedNode", null);
-    o(this, "maxNodePriority", 0);
-    o(this, "graph");
-    o(this, "onAfterNodeAdded", (t) => {
-      this.updateMaxNodePriority(t);
-      const e = this.graph.getNode(t);
-      e.element.addEventListener("mousedown", this.onMouseDown, {
+  constructor(e, t, o, i) {
+    s(this, "grabbedNode", null);
+    s(this, "maxNodePriority", 0);
+    s(this, "graph");
+    s(this, "onAfterNodeAdded", (e) => {
+      this.updateMaxNodePriority(e);
+      const t = this.graph.getNode(e);
+      t.element.addEventListener("mousedown", this.onMouseDown, {
         passive: !0
-      }), e.element.addEventListener("touchstart", this.onTouchStart, {
+      }), t.element.addEventListener("touchstart", this.onTouchStart, {
         passive: !0
       });
     });
-    o(this, "onAfterNodeUpdated", (t) => {
-      this.updateMaxNodePriority(t);
+    s(this, "onAfterNodeUpdated", (e) => {
+      this.updateMaxNodePriority(e);
     });
-    o(this, "onBeforeNodeRemoved", (t) => {
-      const e = this.graph.getNode(t);
-      e.element.removeEventListener("mousedown", this.onMouseDown), e.element.removeEventListener("touchstart", this.onTouchStart);
+    s(this, "onBeforeNodeRemoved", (e) => {
+      const t = this.graph.getNode(e);
+      t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
     });
-    o(this, "onBeforeDestroy", () => {
+    s(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllNodeIds().forEach((t) => {
-        const e = this.canvas.graph.getNode(t);
-        e.element.removeEventListener("mousedown", this.onMouseDown), e.element.removeEventListener("touchstart", this.onTouchStart);
+    s(this, "onBeforeClear", () => {
+      this.canvas.graph.getAllNodeIds().forEach((e) => {
+        const t = this.canvas.graph.getNode(e);
+        t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
       }), this.maxNodePriority = 0;
     });
-    o(this, "onMouseDown", (t) => {
-      if (!this.params.mouseDownEventVerifier(t))
+    s(this, "onMouseDown", (e) => {
+      if (!this.params.mouseDownEventVerifier(e))
         return;
-      const e = t.currentTarget, s = this.graph.getElementNodeId(e), i = this.graph.getNode(s);
-      if (!this.params.nodeDragVerifier(s))
+      const t = e.currentTarget, o = this.graph.getElementNodeId(t), i = this.graph.getNode(o);
+      if (!this.params.nodeDragVerifier(o))
         return;
-      t.stopPropagation();
+      e.stopPropagation();
       const a = this.calculateContentPoint({
-        x: t.clientX,
-        y: t.clientY
+        x: e.clientX,
+        y: e.clientY
       });
       this.grabbedNode = {
-        nodeId: s,
+        nodeId: o,
         dx: a.x - i.x,
         dy: a.y - i.y
-      }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       });
     });
-    o(this, "onTouchStart", (t) => {
-      if (t.touches.length !== 1)
+    s(this, "onTouchStart", (e) => {
+      if (e.touches.length !== 1)
         return;
-      t.stopPropagation();
-      const e = t.touches[0], s = t.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
+      e.stopPropagation();
+      const t = e.touches[0], o = e.currentTarget, i = this.canvas.graph.getElementNodeId(o), n = this.graph.getNode(i);
       if (!this.params.nodeDragVerifier({
         nodeId: i,
         element: n.element,
@@ -2017,8 +2080,8 @@ class Z {
       }))
         return;
       const h = this.calculateContentPoint({
-        x: e.clientX,
-        y: e.clientY
+        x: t.clientX,
+        y: t.clientY
       });
       this.grabbedNode = {
         nodeId: i,
@@ -2032,71 +2095,71 @@ class Z {
         passive: !0
       });
     });
-    o(this, "onWindowMouseMove", (t) => {
-      if (!R(
+    s(this, "onWindowMouseMove", (e) => {
+      if (!C(
         this.window,
         this.element,
-        t.clientX,
-        t.clientY
+        e.clientX,
+        e.clientY
       )) {
         this.cancelMouseDrag();
         return;
       }
       this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
-        x: t.clientX,
-        y: t.clientY
+        x: e.clientX,
+        y: e.clientY
       });
     });
-    o(this, "onWindowMouseUp", (t) => {
-      this.params.mouseUpEventVerifier(t) && this.cancelMouseDrag();
+    s(this, "onWindowMouseUp", (e) => {
+      this.params.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
-    o(this, "onWindowTouchMove", (t) => {
-      if (t.touches.length !== 1)
+    s(this, "onWindowTouchMove", (e) => {
+      if (e.touches.length !== 1)
         return;
-      const e = t.touches[0];
-      if (!R(
+      const t = e.touches[0];
+      if (!C(
         this.window,
         this.element,
-        e.clientX,
-        e.clientY
+        t.clientX,
+        t.clientY
       )) {
         this.cancelTouchDrag();
         return;
       }
       this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
-        x: e.clientX,
-        y: e.clientY
+        x: t.clientX,
+        y: t.clientY
       });
     });
-    o(this, "onWindowTouchFinish", () => {
+    s(this, "onWindowTouchFinish", () => {
       this.cancelTouchDrag();
     });
-    this.canvas = t, this.element = e, this.window = s, this.params = i, this.graph = t.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = t, this.window = o, this.params = i, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(t, e, s, i) {
-    new Z(t, e, s, i);
+  static configure(e, t, o, i) {
+    new Z(e, t, o, i);
   }
-  moveNode(t, e) {
-    if (this.graph.getNode(t.nodeId) === null)
+  moveNode(e, t) {
+    if (this.graph.getNode(e.nodeId) === null)
       return;
-    const i = this.calculateContentPoint(e), n = {
-      x: i.x - t.dx,
-      y: i.y - t.dy
+    const i = this.calculateContentPoint(t), n = {
+      x: i.x - e.dx,
+      y: i.y - e.dy
     }, a = this.adjustNodeCoords(n);
-    this.canvas.updateNode(t.nodeId, {
+    this.canvas.updateNode(e.nodeId, {
       x: a.x,
       y: a.y
-    }), this.params.onNodeDrag(t.nodeId);
+    }), this.params.onNodeDrag(e.nodeId);
   }
-  moveNodeOnTop(t) {
+  moveNodeOnTop(e) {
     if (this.params.moveOnTop) {
       if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
-        const e = this.maxNodePriority;
-        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(t).forEach((i) => {
-          this.canvas.updateEdge(i, { priority: e });
+        const t = this.maxNodePriority;
+        this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
+          this.canvas.updateEdge(i, { priority: t });
         });
       }
-      this.canvas.updateNode(t, { priority: this.maxNodePriority });
+      this.canvas.updateNode(e, { priority: this.maxNodePriority });
     }
   }
   cancelMouseDrag() {
@@ -2107,12 +2170,12 @@ class Z {
   }
   cancelTouchDrag() {
     if (this.grabbedNode !== null) {
-      const t = this.graph.getNode(this.grabbedNode.nodeId);
-      t !== null && this.params.onNodeDragFinished({
+      const e = this.graph.getNode(this.grabbedNode.nodeId);
+      e !== null && this.params.onNodeDragFinished({
         nodeId: this.grabbedNode.nodeId,
-        element: t.element,
-        x: t.x,
-        y: t.y
+        element: e.element,
+        x: e.x,
+        y: e.y
       });
     }
     this.grabbedNode = null, this.removeTouchDragListeners();
@@ -2120,103 +2183,103 @@ class Z {
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-  updateMaxNodePriority(t) {
-    const e = this.graph.getNode(t).priority;
-    this.maxNodePriority = Math.max(this.maxNodePriority, e);
+  updateMaxNodePriority(e) {
+    const t = this.graph.getNode(e).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
-  calculateContentPoint(t) {
-    const e = this.element.getBoundingClientRect(), s = {
-      x: t.x - e.x,
-      y: t.y - e.y
+  calculateContentPoint(e) {
+    const t = this.element.getBoundingClientRect(), o = {
+      x: e.x - t.x,
+      y: e.y - t.y
     }, i = this.canvas.viewport.getViewportMatrix();
-    return T(i, s);
+    return T(i, o);
   }
-  adjustNodeCoords(t) {
-    const e = this.params.gridSize;
-    if (e !== null) {
-      const s = e / 2;
+  adjustNodeCoords(e) {
+    const t = this.params.gridSize;
+    if (t !== null) {
+      const o = t / 2;
       return {
-        x: Math.floor((t.x + s) / e) * e,
-        y: Math.floor((t.y + s) / e) * e
+        x: Math.floor((e.x + o) / t) * t,
+        y: Math.floor((e.y + o) / t) * t
       };
     }
-    return t;
+    return e;
   }
 }
-const ie = (r, t, e) => ({
+const at = (r, e, t) => ({
   scale: r.scale,
-  x: r.x + r.scale * t,
-  y: r.y + r.scale * e
-}), ne = (r, t, e, s) => ({
-  scale: r.scale * t,
-  x: r.scale * (1 - t) * e + r.x,
-  y: r.scale * (1 - t) * s + r.y
+  x: r.x + r.scale * e,
+  y: r.y + r.scale * t
+}), ht = (r, e, t, o) => ({
+  scale: r.scale * e,
+  x: r.scale * (1 - e) * t + r.x,
+  y: r.scale * (1 - e) * o + r.y
 }), I = (r) => {
-  const t = [], e = r.touches.length;
-  for (let h = 0; h < e; h++)
-    t.push([r.touches[h].clientX, r.touches[h].clientY]);
-  const s = t.reduce(
+  const e = [], t = r.touches.length;
+  for (let h = 0; h < t; h++)
+    e.push([r.touches[h].clientX, r.touches[h].clientY]);
+  const o = e.reduce(
     (h, d) => [h[0] + d[0], h[1] + d[1]],
     [0, 0]
-  ), i = [s[0] / e, s[1] / e], a = t.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
+  ), i = [o[0] / t, o[1] / t], a = e.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
     (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
     0
   );
   return {
     x: i[0],
     y: i[1],
-    scale: a / e,
-    touchesCnt: e,
-    touches: t
+    scale: a / t,
+    touchesCnt: t,
+    touches: e
   };
 };
-class k {
-  constructor(t, e, s, i) {
-    o(this, "viewport");
-    o(this, "prevTouches", null);
-    o(this, "wheelFinishTimer", null);
-    o(this, "transformInProgress", !1);
-    o(this, "onBeforeDestroy", () => {
+class z {
+  constructor(e, t, o, i) {
+    s(this, "viewport");
+    s(this, "prevTouches", null);
+    s(this, "wheelFinishTimer", null);
+    s(this, "transformInProgress", !1);
+    s(this, "onBeforeDestroy", () => {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    o(this, "onMouseDown", (t) => {
-      this.element === null || !this.params.mouseDownEventVerifier(t) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+    s(this, "onMouseDown", (e) => {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
-    o(this, "onWindowMouseMove", (t) => {
-      const e = R(
+    s(this, "onWindowMouseMove", (e) => {
+      const t = C(
         this.window,
         this.element,
-        t.clientX,
-        t.clientY
+        e.clientX,
+        e.clientY
       );
-      if (this.element === null || !e) {
+      if (this.element === null || !t) {
         this.stopMouseDrag();
         return;
       }
-      const s = -t.movementX, i = -t.movementY;
-      this.moveViewport(s, i);
+      const o = -e.movementX, i = -e.movementY;
+      this.moveViewport(o, i);
     });
-    o(this, "onWindowMouseUp", (t) => {
-      this.element === null || !this.params.mouseUpEventVerifier(t) || this.stopMouseDrag();
+    s(this, "onWindowMouseUp", (e) => {
+      this.element === null || !this.params.mouseUpEventVerifier(e) || this.stopMouseDrag();
     });
-    o(this, "onWheelScroll", (t) => {
-      if (!this.params.mouseWheelEventVerifier(t))
+    s(this, "onWheelScroll", (e) => {
+      if (!this.params.mouseWheelEventVerifier(e))
         return;
-      const { left: e, top: s } = this.element.getBoundingClientRect(), i = t.clientX - e, n = t.clientY - s, h = 1 / (t.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
+      const { left: t, top: o } = this.element.getBoundingClientRect(), i = e.clientX - t, n = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.params.wheelSensitivity : 1 / this.params.wheelSensitivity);
       this.wheelFinishTimer === null && this.params.onTransformStarted(), this.scaleViewport(h, i, n), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.params.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.params.scaleWheelFinishTimeout);
     });
-    o(this, "onTouchStart", (t) => {
+    s(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = I(t);
+        this.prevTouches = I(e);
         return;
       }
-      this.prevTouches = I(t), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2224,62 +2287,62 @@ class k {
         passive: !0
       }), this.startRegisteredTransform();
     });
-    o(this, "onWindowTouchMove", (t) => {
-      const e = I(t);
-      if (!e.touches.every(
-        (i) => R(this.window, this.element, i[0], i[1])
+    s(this, "onWindowTouchMove", (e) => {
+      const t = I(e);
+      if (!t.touches.every(
+        (i) => C(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
       }
-      if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.moveViewport(
-        -(e.x - this.prevTouches.x),
-        -(e.y - this.prevTouches.y)
-      ), e.touchesCnt === 2) {
-        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (e.scale / this.prevTouches.scale);
+      if ((t.touchesCnt === 1 || t.touchesCnt === 2) && this.moveViewport(
+        -(t.x - this.prevTouches.x),
+        -(t.y - this.prevTouches.y)
+      ), t.touchesCnt === 2) {
+        const { left: i, top: n } = this.element.getBoundingClientRect(), a = this.prevTouches.x - i, h = this.prevTouches.y - n, c = 1 / (t.scale / this.prevTouches.scale);
         this.scaleViewport(c, a, h);
       }
-      this.prevTouches = e;
+      this.prevTouches = t;
     });
-    o(this, "onWindowTouchFinish", (t) => {
-      t.touches.length > 0 ? this.prevTouches = I(t) : this.stopTouchDrag();
+    s(this, "onWindowTouchFinish", (e) => {
+      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
     });
-    o(this, "observer", new ResizeObserver(() => {
-      const t = this.viewport.getViewportMatrix(), { width: e, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
-        prevTransform: t,
-        nextTransform: t,
-        canvasWidth: e,
-        canvasHeight: s
+    s(this, "observer", new ResizeObserver(() => {
+      const e = this.viewport.getViewportMatrix(), { width: t, height: o } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
+        prevTransform: e,
+        nextTransform: e,
+        canvasWidth: t,
+        canvasHeight: o
       });
       this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(i), this.params.onResizeTransformFinished();
     }));
-    o(this, "preventWheelScaleListener", (t) => {
-      t.preventDefault();
+    s(this, "preventWheelScaleListener", (e) => {
+      e.preventDefault();
     });
-    this.canvas = t, this.element = e, this.window = s, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = t, this.window = o, this.params = i, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
-    }), this.viewport = t.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
+    }), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("wheel", this.onWheelScroll, {
       passive: !0
     }), this.element.addEventListener("touchstart", this.onTouchStart, {
       passive: !0
-    }), t.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(t, e, s, i) {
-    new k(t, e, s, i);
+  static configure(e, t, o, i) {
+    new z(e, t, o, i);
   }
-  moveViewport(t, e) {
-    const s = this.viewport.getViewportMatrix(), i = ie(s, t, e), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
-      prevTransform: s,
+  moveViewport(e, t) {
+    const o = this.viewport.getViewportMatrix(), i = at(o, e, t), { width: n, height: a } = this.element.getBoundingClientRect(), h = this.params.transformPreprocessor({
+      prevTransform: o,
       nextTransform: i,
       canvasWidth: n,
       canvasHeight: a
     });
     this.performTransform(h);
   }
-  scaleViewport(t, e, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = ne(i, t, e, s), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+  scaleViewport(e, t, o) {
+    const i = this.canvas.viewport.getViewportMatrix(), n = ht(i, e, t, o), { width: a, height: h } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: a,
@@ -2299,8 +2362,8 @@ class k {
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
   }
-  performTransform(t) {
-    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(t), this.params.onTransformChange();
+  performTransform(e) {
+    this.params.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.params.onTransformChange();
   }
   startRegisteredTransform() {
     this.transformInProgress = !0, this.params.onTransformStarted();
@@ -2310,36 +2373,36 @@ class k {
   }
 }
 class J {
-  constructor(t, e, s, i, n, a) {
-    o(this, "canvasResizeObserver");
-    o(this, "nodeHorizontal");
-    o(this, "nodeVertical");
-    o(this, "viewport");
-    o(this, "viewportWidth", 0);
-    o(this, "viewportHeight", 0);
-    o(this, "viewportMatrix");
-    o(this, "loadedArea", {
+  constructor(e, t, o, i, n, a) {
+    s(this, "canvasResizeObserver");
+    s(this, "nodeHorizontal");
+    s(this, "nodeVertical");
+    s(this, "viewport");
+    s(this, "viewportWidth", 0);
+    s(this, "viewportHeight", 0);
+    s(this, "viewportMatrix");
+    s(this, "loadedArea", {
       xFrom: 1 / 0,
       xTo: 1 / 0,
       yFrom: 1 / 0,
       yTo: 1 / 0
     });
-    o(this, "updateLoadedArea", (t) => {
+    s(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
       };
     });
-    o(this, "onAfterViewportUpdated", () => {
+    s(this, "onAfterViewportUpdated", () => {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
-    o(this, "userTransformInProgress", !1);
-    this.canvas = t, this.element = e, this.window = s, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
+    s(this, "userTransformInProgress", !1);
+    this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
-    }), this.viewport = t.viewport;
+    }), this.viewport = e.viewport;
     const h = {
       ...i,
       onResizeTransformStarted: () => {
@@ -2360,18 +2423,18 @@ class J {
         this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
       }
     };
-    k.configure(
-      t,
+    z.configure(
+      e,
       this.element,
       this.window,
       h
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(t, e, s, i, n, a) {
+  static configure(e, t, o, i, n, a) {
     new J(
-      t,
       e,
-      s,
+      t,
+      o,
       i,
       n,
       a
@@ -2383,21 +2446,21 @@ class J {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const t = this.viewportWidth * this.viewportMatrix.scale, e = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + t + this.nodeHorizontal, a = this.viewportMatrix.y + e + this.nodeVertical;
-    this.loadedArea.xFrom < s && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, o = this.viewportMatrix.x - this.nodeHorizontal, i = this.viewportMatrix.y - this.nodeVertical, n = this.viewportMatrix.x + e + this.nodeHorizontal, a = this.viewportMatrix.y + t + this.nodeVertical;
+    this.loadedArea.xFrom < o && this.loadedArea.xTo > n && this.loadedArea.yFrom < i && this.loadedArea.yTo > a || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const t = this.viewportWidth * this.viewportMatrix.scale, e = this.viewportHeight * this.viewportMatrix.scale, s = this.viewportMatrix.x - t - this.nodeHorizontal, i = this.viewportMatrix.y - e - this.nodeVertical, n = 3 * t + 2 * this.nodeHorizontal, a = 3 * e + 2 * this.nodeVertical;
-    this.trigger.emit({ x: s, y: i, width: n, height: a });
+    const e = this.viewportWidth * this.viewportMatrix.scale, t = this.viewportHeight * this.viewportMatrix.scale, o = this.viewportMatrix.x - e - this.nodeHorizontal, i = this.viewportMatrix.y - t - this.nodeVertical, n = 3 * e + 2 * this.nodeHorizontal, a = 3 * t + 2 * this.nodeVertical;
+    this.trigger.emit({ x: o, y: i, width: n, height: a });
   }
 }
-const ae = () => {
+const dt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, he = () => {
+}, ct = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, de = () => {
+}, gt = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
@@ -2405,53 +2468,53 @@ const ae = () => {
   return r.setAttribute("id", "pattern"), r;
 };
 class Q {
-  constructor(t, e, s) {
-    o(this, "svg", ae());
-    o(this, "patternRenderingRectangle", he());
-    o(this, "pattern", de());
-    o(this, "patternContent");
-    o(this, "tileWidth");
-    o(this, "tileHeight");
-    o(this, "halfTileWidth");
-    o(this, "halfTileHeight");
-    o(this, "maxViewportScale");
-    o(this, "visible", !1);
-    o(this, "resizeObserver", new ResizeObserver((t) => {
-      const e = t[0], { width: s, height: i } = e.contentRect;
-      this.svg.setAttribute("width", `${s}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${s}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
-      const n = this.tileWidth / s, a = this.tileHeight / i;
+  constructor(e, t, o) {
+    s(this, "svg", dt());
+    s(this, "patternRenderingRectangle", ct());
+    s(this, "pattern", gt());
+    s(this, "patternContent");
+    s(this, "tileWidth");
+    s(this, "tileHeight");
+    s(this, "halfTileWidth");
+    s(this, "halfTileHeight");
+    s(this, "maxViewportScale");
+    s(this, "visible", !1);
+    s(this, "resizeObserver", new ResizeObserver((e) => {
+      const t = e[0], { width: o, height: i } = t.contentRect;
+      this.svg.setAttribute("width", `${o}`), this.svg.setAttribute("height", `${i}`), this.patternRenderingRectangle.setAttribute("width", `${o}`), this.patternRenderingRectangle.setAttribute("height", `${i}`);
+      const n = this.tileWidth / o, a = this.tileHeight / i;
       this.pattern.setAttribute("width", `${n}`), this.pattern.setAttribute("height", `${a}`);
     }));
-    o(this, "onAfterTransformUpdated", () => {
-      const t = this.canvas.viewport.getContentMatrix(), e = t.x - this.halfTileWidth * t.scale, s = t.y - this.halfTileHeight * t.scale, i = `matrix(${t.scale}, 0, 0, ${t.scale}, ${e}, ${s})`;
+    s(this, "onAfterTransformUpdated", () => {
+      const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, o = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${o})`;
       this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
     });
-    this.canvas = t, this.backgroundHost = s, this.tileWidth = e.tileWidth, this.tileHeight = e.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = e.renderer, this.maxViewportScale = e.maxViewportScale;
+    this.canvas = e, this.backgroundHost = o, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
     const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", i), this.pattern.appendChild(this.patternContent);
     const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
     n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
-  static configure(t, e, s) {
-    new Q(t, e, s);
+  static configure(e, t, o) {
+    new Q(e, t, o);
   }
   updateVisibility() {
-    const e = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
-    e && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !e && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
+    const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
+    t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
   }
 }
 class _ {
-  constructor(t, e, s, i, n) {
-    o(this, "overlayCanvas");
-    o(this, "staticPortId", null);
-    o(this, "isTargetDragging", !0);
-    o(this, "onEdgeCreated", (t) => {
-      this.params.onAfterEdgeCreated(t);
-    });
-    this.canvas = t, this.overlayLayer = e, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Dt(
+  constructor(e, t, o, i, n) {
+    s(this, "overlayCanvas");
+    s(this, "staticPortId", null);
+    s(this, "isTargetDragging", !0);
+    s(this, "onEdgeCreated", (e) => {
+      this.params.onAfterEdgeCreated(e);
+    });
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Te(
       this.overlayLayer,
       this.viewportStore
-    ), O.configure(
+    ), k.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2474,25 +2537,25 @@ class _ {
       }
     );
   }
-  static configure(t, e, s, i, n) {
+  static configure(e, t, o, i, n) {
     new _(
-      t,
       e,
-      s,
+      t,
+      o,
       i,
       n
     );
   }
-  grabPort(t, e, s) {
-    const i = this.canvas.graph.getPort(t);
-    this.staticPortId = t;
+  grabPort(e, t, o) {
+    const i = this.canvas.graph.getPort(e);
+    this.staticPortId = e;
     const n = i.element.getBoundingClientRect(), a = n.x + n.width / 2, h = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
       x: a - d.x,
       y: h - d.y
     }), g = T(c, {
-      x: e.x - d.x,
-      y: e.y - d.y
-    }), w = {
+      x: t.x - d.x,
+      y: t.y - d.y
+    }), p = {
       overlayId: P.Static,
       portCoords: l,
       portDirection: i.direction
@@ -2501,9 +2564,9 @@ class _ {
       portCoords: g,
       portDirection: this.params.dragPortDirection
     };
-    this.isTargetDragging = s === "direct";
-    const [y, v] = this.isTargetDragging ? [w, f] : [f, w];
-    this.overlayCanvas.addNode(W(y)), this.overlayCanvas.addNode(W(v)), this.overlayCanvas.addEdge({
+    this.isTargetDragging = o === "direct";
+    const [y, v] = this.isTargetDragging ? [p, f] : [f, p];
+    this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addEdge({
       from: y.overlayId,
       to: v.overlayId,
       shape: this.params.edgeShapeFactory(P.Edge)
@@ -2512,23 +2575,23 @@ class _ {
   resetDragState() {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
-  tryCreateConnection(t) {
-    const e = yt(this.canvas.graph, t);
-    if (e === null) {
+  tryCreateConnection(e) {
+    const t = ye(this.canvas.graph, e), o = this.staticPortId;
+    if (t === null) {
       this.params.onEdgeCreationInterrupted({
-        staticPortId: this.staticPortId,
+        staticPortId: o,
         isDirect: this.isTargetDragging
       });
       return;
     }
-    const s = this.isTargetDragging ? this.staticPortId : e, i = this.isTargetDragging ? e : this.staticPortId, n = { from: s, to: i }, a = this.params.connectionPreprocessor(n);
-    a !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(a), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(n);
-  }
-  moveDraggingPort(t) {
-    const e = this.overlayLayer.getBoundingClientRect(), s = {
-      x: t.x - e.x,
-      y: t.y - e.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
+    const i = this.isTargetDragging ? o : t, n = this.isTargetDragging ? t : o, a = { from: i, to: n }, h = this.params.connectionPreprocessor(a);
+    h !== null ? (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(h), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)) : this.params.onEdgeCreationPrevented(a);
+  }
+  moveDraggingPort(e) {
+    const t = this.overlayLayer.getBoundingClientRect(), o = {
+      x: e.x - t.x,
+      y: e.y - t.y
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, o);
     this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
@@ -2536,18 +2599,18 @@ class _ {
   }
 }
 class q {
-  constructor(t, e, s, i, n) {
-    o(this, "overlayCanvas");
-    o(this, "staticPortId", null);
-    o(this, "isTargetDragging", !0);
-    o(this, "draggingEdgePayload", null);
-    o(this, "onEdgeReattached", (t) => {
-      this.params.onAfterEdgeReattached(t);
-    });
-    this.canvas = t, this.overlayLayer = e, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Dt(
+  constructor(e, t, o, i, n) {
+    s(this, "overlayCanvas");
+    s(this, "staticPortId", null);
+    s(this, "isTargetDragging", !0);
+    s(this, "draggingEdgePayload", null);
+    s(this, "onEdgeReattached", (e) => {
+      this.params.onAfterEdgeReattached(e);
+    });
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = i, this.params = n, this.overlayCanvas = Te(
       this.overlayLayer,
       this.viewportStore
-    ), O.configure(
+    ), k.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2567,55 +2630,55 @@ class q {
       }
     );
   }
-  static configure(t, e, s, i, n) {
+  static configure(e, t, o, i, n) {
     new q(
-      t,
       e,
-      s,
+      t,
+      o,
       i,
       n
     );
   }
-  tryStartEdgeDragging(t, e) {
-    const s = this.params.draggingEdgeResolver(t);
-    if (s === null)
+  tryStartEdgeDragging(e, t) {
+    const o = this.params.draggingEdgeResolver(e);
+    if (o === null)
       return !1;
-    const i = this.canvas.graph.getEdge(s);
+    const i = this.canvas.graph.getEdge(o);
     if (i === null)
       return !1;
-    const n = t === i.from, a = t === i.to, h = n ? i.to : i.from;
+    const n = e === i.from, a = e === i.to, h = n ? i.to : i.from;
     this.staticPortId = h, this.isTargetDragging = a;
-    const d = this.canvas.graph.getPort(t), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
+    const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), l = c.element.getBoundingClientRect(), g = {
       x: l.x + l.width / 2,
       y: l.y + l.height / 2
-    }, w = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = T(w, {
+    }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), y = T(p, {
       x: g.x - f.x,
       y: g.y - f.y
-    }), v = T(w, {
-      x: e.x - f.x,
-      y: e.y - f.y
+    }), v = T(p, {
+      x: t.x - f.x,
+      y: t.y - f.y
     });
     this.draggingEdgePayload = {
-      id: s,
+      id: o,
       from: i.from,
       to: i.to,
       shape: i.shape,
       priority: i.priority
-    }, this.canvas.removeEdge(s);
-    const E = {
+    }, this.canvas.removeEdge(o);
+    const x = {
       overlayId: P.Static,
       portCoords: y,
       portDirection: c.direction
-    }, x = {
+    }, E = {
       overlayId: P.Dragging,
       portCoords: v,
       portDirection: d.direction
-    }, [L, b] = this.isTargetDragging ? [E, x] : [x, E];
-    this.overlayCanvas.addNode(W(L)), this.overlayCanvas.addNode(W(b));
+    }, [R, b] = this.isTargetDragging ? [x, E] : [E, x];
+    this.overlayCanvas.addNode(B(R)), this.overlayCanvas.addNode(B(b));
     const D = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
       id: P.Edge,
-      from: L.overlayId,
+      from: R.overlayId,
       to: b.overlayId,
       shape: D
     }), !0;
@@ -2623,19 +2686,19 @@ class q {
   resetDragState() {
     this.draggingEdgePayload = null, this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
-  moveDraggingPort(t) {
-    const e = this.overlayLayer.getBoundingClientRect(), s = {
-      x: t.x - e.x,
-      y: t.y - e.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
+  moveDraggingPort(e) {
+    const t = this.overlayLayer.getBoundingClientRect(), o = {
+      x: e.x - t.x,
+      y: e.y - t.y
+    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, o);
     this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
-  tryCreateConnection(t) {
-    const e = yt(this.canvas.graph, t);
-    if (this.overlayCanvas.removeEdge(P.Edge), e === null) {
+  tryCreateConnection(e) {
+    const t = ye(this.canvas.graph, e);
+    if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -2646,9 +2709,9 @@ class q {
       });
       return;
     }
-    const [s, i] = this.isTargetDragging ? [this.staticPortId, e] : [e, this.staticPortId], n = this.draggingEdgePayload, a = {
+    const [o, i] = this.isTargetDragging ? [this.staticPortId, t] : [t, this.staticPortId], n = this.draggingEdgePayload, a = {
       id: n.id,
-      from: s,
+      from: o,
       to: i,
       shape: n.shape,
       priority: n.priority
@@ -2667,50 +2730,50 @@ class q {
     }
   }
 }
-const ce = () => {
+const lt = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
 }, Y = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, ct = () => {
+}, de = () => {
   const r = Y();
   return r.style.pointerEvents = "none", r;
 };
-class ge {
-  constructor(t) {
-    o(this, "background", Y());
-    o(this, "main", Y());
-    o(this, "overlayConnectablePorts", ct());
-    o(this, "overlayDraggableEdges", ct());
-    o(this, "host", ce());
-    this.element = t, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
+class ut {
+  constructor(e) {
+    s(this, "background", Y());
+    s(this, "main", Y());
+    s(this, "overlayConnectablePorts", de());
+    s(this, "overlayDraggableEdges", de());
+    s(this, "host", lt());
+    this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const H = (r) => () => r, gt = H(0), le = () => {
+const H = (r) => () => r, ce = H(0), pt = () => {
   let r = 0;
   return () => r++;
-}, ue = (r, t) => {
-  let e = gt, s = gt;
-  const i = le();
-  return r === "incremental" && (e = i), t === "incremental" && (s = i), typeof r == "number" && (e = H(r)), typeof t == "number" && (s = H(t)), typeof r == "function" && (e = r), typeof t == "function" && (s = t), {
-    nodesPriorityFn: e,
-    edgesPriorityFn: s
+}, wt = (r, e) => {
+  let t = ce, o = ce;
+  const i = pt();
+  return r === "incremental" && (t = i), e === "incremental" && (o = i), typeof r == "number" && (t = H(r)), typeof e == "number" && (o = H(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+    nodesPriorityFn: t,
+    edgesPriorityFn: o
   };
-}, tt = (r) => {
+}, ee = (r) => {
   if (typeof r == "function")
     return r;
-  switch (r == null ? void 0 : r.type) {
+  switch (r.type) {
     case "straight":
-      return () => new te({
+      return () => new rt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
-        arrowWidth: r.arrowWidth,
         arrowOffset: r.arrowOffset,
+        arrowRenderer: r.arrowRenderer,
         hasSourceArrow: r.hasSourceArrow,
         hasTargetArrow: r.hasTargetArrow,
         cycleSquareSide: r.cycleSquareSide,
@@ -2719,12 +2782,12 @@ const H = (r) => () => r, gt = H(0), le = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new qt({
+      return () => new tt({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
-        arrowWidth: r.arrowWidth,
         arrowOffset: r.arrowOffset,
+        arrowRenderer: r.arrowRenderer,
         hasSourceArrow: r.hasSourceArrow,
         hasTargetArrow: r.hasTargetArrow,
         cycleSquareSide: r.cycleSquareSide,
@@ -2732,12 +2795,12 @@ const H = (r) => () => r, gt = H(0), le = () => {
         detourDistance: r.detourDistance
       });
     case "vertical":
-      return () => new ee({
+      return () => new ot({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
-        arrowWidth: r.arrowWidth,
         arrowOffset: r.arrowOffset,
+        arrowRenderer: r.arrowRenderer,
         hasSourceArrow: r.hasSourceArrow,
         hasTargetArrow: r.hasTargetArrow,
         cycleSquareSide: r.cycleSquareSide,
@@ -2745,22 +2808,22 @@ const H = (r) => () => r, gt = H(0), le = () => {
         detourDistance: r.detourDistance
       });
     case "direct":
-      return () => new bt({
+      return () => new Pe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
-        arrowWidth: r.arrowWidth,
+        arrowRenderer: r.arrowRenderer,
         hasSourceArrow: r.hasSourceArrow,
         hasTargetArrow: r.hasTargetArrow,
         sourceOffset: r.sourceOffset,
         targetOffset: r.targetOffset
       });
     default:
-      return () => new _t({
+      return () => new et({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
-        arrowWidth: r.arrowWidth,
+        arrowRenderer: r.arrowRenderer,
         hasSourceArrow: r.hasSourceArrow,
         hasTargetArrow: r.hasTargetArrow,
         cycleRadius: r.cycleRadius,
@@ -2770,30 +2833,30 @@ const H = (r) => () => r, gt = H(0), le = () => {
         detourDirection: r.detourDirection
       });
   }
-}, pe = (r) => {
-  var e, s, i, n, a;
-  const t = ue(
-    (e = r.nodes) == null ? void 0 : e.priority,
-    (s = r.edges) == null ? void 0 : s.priority
+}, ft = (r) => {
+  var t, o, i, n, a;
+  const e = wt(
+    (t = r.nodes) == null ? void 0 : t.priority,
+    (o = r.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? vt,
-      priorityFn: t.nodesPriorityFn
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
+      priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: tt(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
-      priorityFn: t.edgesPriorityFn
+      shapeFactory: ee(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      priorityFn: e.edgesPriorityFn
     }
   };
-}, we = (r) => {
-  var w, f, y, v, E;
-  const t = ((w = r.events) == null ? void 0 : w.onNodeDrag) ?? (() => {
-  }), e = r.nodeDragVerifier ?? (() => !0), s = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
-  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (x) => x.button === 0, l = (E = r.mouse) == null ? void 0 : E.mouseUpEventVerifier, g = l !== void 0 ? l : (x) => x.button === 0;
+}, yt = (r) => {
+  var p, f, y, v, x;
+  const e = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
+  }), t = r.nodeDragVerifier ?? (() => !0), o = ((f = r.events) == null ? void 0 : f.onNodeDragFinished) ?? (() => {
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, a = (y = r.mouse) == null ? void 0 : y.dragCursor, h = a !== void 0 ? a : "grab", d = (v = r.mouse) == null ? void 0 : v.mouseDownEventVerifier, c = d !== void 0 ? d : (E) => E.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (E) => E.button === 0;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
@@ -2801,22 +2864,22 @@ const H = (r) => () => r, gt = H(0), le = () => {
     gridSize: r.gridSize ?? null,
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
-    onNodeDrag: t,
-    nodeDragVerifier: e,
-    onNodeDragFinished: s
+    onNodeDrag: e,
+    nodeDragVerifier: t,
+    onNodeDragFinished: o
   };
-}, fe = (r) => {
-  const t = r.minX !== null ? r.minX : -1 / 0, e = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
+}, mt = (r) => {
+  const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, o = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let a = n.nextTransform.x, h = n.nextTransform.y;
-    a < t && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, t));
-    const d = n.canvasWidth * n.prevTransform.scale, c = e - d;
-    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < s && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, s));
+    a < e && a < n.prevTransform.x && (a = Math.min(n.prevTransform.x, e));
+    const d = n.canvasWidth * n.prevTransform.scale, c = t - d;
+    a > c && a > n.prevTransform.x && (a = Math.max(n.prevTransform.x, c)), h < o && h < n.prevTransform.y && (h = Math.min(n.prevTransform.y, o));
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
     return h > g && h > n.prevTransform.y && (h = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: a, y: h };
   };
-}, me = (r) => {
-  const t = r.maxContentScale, e = r.minContentScale, s = t !== null ? 1 / t : 0, i = e !== null ? 1 / e : 1 / 0;
+}, vt = (r) => {
+  const e = r.maxContentScale, t = r.minContentScale, o = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const a = n.prevTransform, h = n.nextTransform;
     let d = h.scale, c = h.x, l = h.y;
@@ -2825,8 +2888,8 @@ const H = (r) => () => r, gt = H(0), le = () => {
       const g = (d - a.scale) / (h.scale - a.scale);
       c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
-    if (h.scale < s && h.scale < a.scale) {
-      d = Math.min(a.scale, s), c = a.x, l = a.y;
+    if (h.scale < o && h.scale < a.scale) {
+      d = Math.min(a.scale, o), c = a.x, l = a.y;
       const g = (d - a.scale) / (h.scale - a.scale);
       c = a.x + (h.x - a.x) * g, l = a.y + (h.y - a.y) * g;
     }
@@ -2836,48 +2899,48 @@ const H = (r) => () => r, gt = H(0), le = () => {
       y: l
     };
   };
-}, ye = (r) => (t) => r.reduce(
-  (e, s) => s({
-    prevTransform: t.prevTransform,
-    nextTransform: e,
-    canvasWidth: t.canvasWidth,
-    canvasHeight: t.canvasHeight
+}, At = (r) => (e) => r.reduce(
+  (t, o) => o({
+    prevTransform: e.prevTransform,
+    nextTransform: t,
+    canvasWidth: e.canvasWidth,
+    canvasHeight: e.canvasHeight
   }),
-  t.nextTransform
-), lt = (r) => {
+  e.nextTransform
+), ge = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return me({
+      return vt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return fe({
+      return mt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, ut = (r) => {
-  var y, v, E, x, L, b, D, V, et, rt, ot, st;
-  const t = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, e = t !== void 0 ? t : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+}, le = (r) => {
+  var y, v, x, E, R, b, D, V, te, re, oe, se;
+  const e = (y = r == null ? void 0 : r.scale) == null ? void 0 : y.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let i;
-  s !== void 0 ? Array.isArray(s) ? i = ye(
-    s.map(
-      (N) => lt(N)
+  o !== void 0 ? Array.isArray(o) ? i = At(
+    o.map(
+      (N) => ge(N)
     )
-  ) : i = lt(s) : i = (N) => N.nextTransform;
-  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (L = r == null ? void 0 : r.shift) == null ? void 0 : L.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (N) => N.button === 0, w = (D = r == null ? void 0 : r.scale) == null ? void 0 : D.mouseWheelEventVerifier, f = w !== void 0 ? w : () => !0;
+  ) : i = ge(o) : i = (N) => N.nextTransform;
+  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onBeforeTransformChange) ?? (() => {
+  }), h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onTransformChange) ?? (() => {
+  }), d = (R = r == null ? void 0 : r.shift) == null ? void 0 : R.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, l = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = l !== void 0 ? l : (N) => N.button === 0, p = (D = r == null ? void 0 : r.scale) == null ? void 0 : D.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
-    wheelSensitivity: e,
+    wheelSensitivity: t,
     onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((et = r == null ? void 0 : r.events) == null ? void 0 : et.onTransformFinished) ?? (() => {
+    onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: a,
     onTransformChange: h,
@@ -2886,120 +2949,122 @@ const H = (r) => () => r, gt = H(0), le = () => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: f,
-    scaleWheelFinishTimeout: ((rt = r == null ? void 0 : r.scale) == null ? void 0 : rt.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((ot = r == null ? void 0 : r.events) == null ? void 0 : ot.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((st = r == null ? void 0 : r.events) == null ? void 0 : st.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
     })
   };
-}, ve = (r, t) => {
-  const e = document.createElementNS(
+}, Et = (r, e) => {
+  const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
-  return e.setAttribute("cx", "0"), e.setAttribute("cy", "0"), e.setAttribute("r", `${r}`), e.setAttribute("fill", `${t}`), e;
-}, Ee = (r) => r instanceof SVGElement ? r : ve(
+  return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
+}, xt = (r) => r instanceof SVGElement ? r : Et(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), Ae = (r) => {
-  const t = r.tileDimensions, e = (t == null ? void 0 : t.width) ?? 25, s = (t == null ? void 0 : t.height) ?? 25, i = Ee(r.renderer ?? {});
+), St = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, o = (e == null ? void 0 : e.height) ?? 25, i = xt(r.renderer ?? {});
   return {
-    tileWidth: e,
-    tileHeight: s,
+    tileWidth: t,
+    tileHeight: o,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, xe = (r, t, e) => {
+}, Pt = (r, e, t) => {
   var c, l, g;
-  const s = () => "direct", i = (w) => w, n = (w) => w.button === 0, a = () => {
+  const o = () => "direct", i = (p) => p, n = (p) => p.button === 0, a = () => {
   }, h = () => {
   }, d = () => {
   };
   return {
-    connectionTypeResolver: r.connectionTypeResolver ?? s,
+    connectionTypeResolver: r.connectionTypeResolver ?? o,
     connectionPreprocessor: r.connectionPreprocessor ?? i,
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? n,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? n,
     onAfterEdgeCreated: ((c = r.events) == null ? void 0 : c.onAfterEdgeCreated) ?? a,
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
-    dragPortDirection: r.dragPortDirection ?? e,
-    edgeShapeFactory: r.edgeShape !== void 0 ? tt(r.edgeShape) : t
+    dragPortDirection: r.dragPortDirection ?? t,
+    edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
   };
-}, Se = (r, t) => {
+}, bt = (r, e) => {
   var c, l, g;
-  const e = (w) => w, s = (w) => w.button === 0 && w.ctrlKey, i = (w) => w.button === 0, n = (w) => {
-    const f = t.getPortAdjacentEdgeIds(w);
+  const t = (p) => p, o = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
+    const f = e.getPortAdjacentEdgeIds(p);
     return f.length > 0 ? f[f.length - 1] : null;
   }, a = () => {
   }, h = () => {
   }, d = () => {
   };
   return {
-    connectionPreprocessor: r.connectionPreprocessor ?? e,
-    mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
+    connectionPreprocessor: r.connectionPreprocessor ?? t,
+    mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? tt(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
   };
-}, Pe = (r) => ({
+}, Tt = (r) => ({
   nodeVerticalRadius: r.nodeContainingRadius.vertical,
   nodeHorizontalRadius: r.nodeContainingRadius.horizontal
-}), be = (r) => {
-  var t, e;
+}), Dt = (r) => {
+  var e, t;
   return {
-    onAfterNodeDetached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onAfterNodeDetached) ?? (() => {
+    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
     }),
-    onBeforeNodeAttached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onBeforeNodeAttached) ?? (() => {
+    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? (() => {
     })
   };
 };
-class Te extends Error {
+class Nt extends Error {
   constructor() {
     super(...arguments);
-    o(this, "name", "CanvasBuilderError");
+    s(this, "name", "CanvasBuilderError");
   }
 }
-class Me {
-  constructor(t) {
-    o(this, "used", !1);
-    o(this, "canvasDefaults", {});
-    o(this, "dragConfig", {});
-    o(this, "transformConfig", {});
-    o(this, "backgroundConfig", {});
-    o(this, "connectablePortsConfig", {});
-    o(this, "draggableEdgesConfig", {});
-    o(this, "virtualScrollConfig");
-    o(this, "hasDraggableNode", !1);
-    o(this, "hasTransformableViewport", !1);
-    o(this, "hasNodeResizeReactiveEdges", !1);
-    o(this, "hasBackground", !1);
-    o(this, "hasUserConnectablePorts", !1);
-    o(this, "hasUserDraggableEdges", !1);
-    o(this, "boxRenderingTrigger");
-    o(this, "window", window);
-    this.element = t, t !== void 0 && (this.element = t);
+class Lt {
+  constructor(e) {
+    s(this, "used", !1);
+    s(this, "canvasDefaults", {});
+    s(this, "dragConfig", {});
+    s(this, "transformConfig", {});
+    s(this, "backgroundConfig", {});
+    s(this, "connectablePortsConfig", {});
+    s(this, "draggableEdgesConfig", {});
+    s(this, "virtualScrollConfig");
+    s(this, "hasDraggableNode", !1);
+    s(this, "hasTransformableViewport", !1);
+    s(this, "hasNodeResizeReactiveEdges", !1);
+    s(this, "hasBackground", !1);
+    s(this, "hasUserConnectablePorts", !1);
+    s(this, "hasUserDraggableEdges", !1);
+    s(this, "boxRenderingTrigger", new pe());
+    s(this, "graphStore", new fe());
+    s(this, "viewportStore", new Be());
+    s(this, "window", window);
+    this.element = e;
   }
   /**
    * specifies default values for graph entities
    */
-  setDefaults(t) {
-    return this.canvasDefaults = t, this;
+  setDefaults(e) {
+    return this.canvasDefaults = e, this;
   }
   /**
    * enables nodes draggable by user
    */
-  enableUserDraggableNodes(t) {
-    return this.hasDraggableNode = !0, this.dragConfig = t ?? {}, this;
+  enableUserDraggableNodes(e) {
+    return this.hasDraggableNode = !0, this.dragConfig = e ?? {}, this;
   }
   /**
    * enables viewport transformable by user
    */
-  enableUserTransformableViewport(t) {
-    return this.hasTransformableViewport = !0, this.transformConfig = t ?? {}, this;
+  enableUserTransformableViewport(e) {
+    return this.hasTransformableViewport = !0, this.transformConfig = e ?? {}, this;
   }
   /**
    * enables automatic edges update on node resize
@@ -3011,116 +3076,114 @@ class Me {
    * enables built-in virtual scroll behavior, when only nodes and edges close
    * to viewport are rendered
    */
-  enableVirtualScroll(t) {
-    return this.virtualScrollConfig = t, this;
+  enableVirtualScroll(e) {
+    return this.virtualScrollConfig = e, this;
   }
   /**
    * enables built-in background rendering
    */
-  enableBackground(t) {
-    return this.hasBackground = !0, this.backgroundConfig = t ?? {}, this;
+  enableBackground(e) {
+    return this.hasBackground = !0, this.backgroundConfig = e ?? {}, this;
   }
   /**
    * enables edge creation by dragging one port to another
    */
-  enableUserConnectablePorts(t) {
-    return this.connectablePortsConfig = t ?? {}, this.hasUserConnectablePorts = !0, this;
+  enableUserConnectablePorts(e) {
+    return this.hasUserConnectablePorts = !0, this.connectablePortsConfig = e ?? {}, this;
   }
-  enableUserDraggableEdges(t) {
-    return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = t ?? {}, this;
+  enableUserDraggableEdges(e) {
+    return this.hasUserDraggableEdges = !0, this.draggableEdgesConfig = e ?? {}, this;
   }
   /**
    * builds final canvas
    */
   build() {
     if (this.used)
-      throw new Te("CanvasBuilder is a single use object");
+      throw new Nt("CanvasBuilder is a single use object");
     this.used = !0;
-    let t = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && t === void 0 && (t = new wt());
-    const e = new mt(), s = new Bt(), i = new ge(this.element);
-    let n = new pt(
-      e,
-      s,
-      i.main
+    const e = new ut(this.element);
+    let t = new ue(
+      this.graphStore,
+      this.viewportStore,
+      e.main
     );
-    t !== void 0 && (n = new It(
-      n,
-      e,
+    this.virtualScrollConfig !== void 0 && (t = new Ve(
       t,
-      be(this.virtualScrollConfig)
+      this.graphStore,
+      this.boxRenderingTrigger,
+      Dt(this.virtualScrollConfig)
     ));
-    const a = pe(this.canvasDefaults), h = new ft(
-      e,
-      s,
-      n,
-      a
+    const o = ft(this.canvasDefaults), i = new we(
+      this.graphStore,
+      this.viewportStore,
+      t,
+      o
     );
     if (this.hasBackground && Q.configure(
-      h,
-      Ae(this.backgroundConfig),
-      i.background
-    ), this.hasNodeResizeReactiveEdges && j.configure(h), this.hasDraggableNode && Z.configure(
-      h,
-      i.main,
+      i,
+      St(this.backgroundConfig),
+      e.background
+    ), this.hasNodeResizeReactiveEdges && j.configure(i), this.hasDraggableNode && Z.configure(
+      i,
+      e.main,
       this.window,
-      we(this.dragConfig)
+      yt(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = xe(
+      const a = Pt(
         this.connectablePortsConfig,
-        a.edges.shapeFactory,
-        a.ports.direction
+        o.edges.shapeFactory,
+        o.ports.direction
       );
       _.configure(
-        h,
-        i.overlayConnectablePorts,
-        s,
+        i,
+        e.overlayConnectablePorts,
+        this.viewportStore,
         this.window,
-        c
+        a
       );
     }
     if (this.hasUserDraggableEdges) {
-      const c = Se(
+      const a = bt(
         this.draggableEdgesConfig,
-        h.graph
+        i.graph
       );
       q.configure(
-        h,
-        i.overlayDraggableEdges,
-        s,
+        i,
+        e.overlayDraggableEdges,
+        this.viewportStore,
         this.window,
-        c
+        a
       );
     }
     this.virtualScrollConfig !== void 0 ? J.configure(
-      h,
-      i.main,
+      i,
+      e.main,
       this.window,
-      ut(this.transformConfig),
-      t,
-      Pe(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && k.configure(
-      h,
-      i.main,
+      le(this.transformConfig),
+      this.boxRenderingTrigger,
+      Tt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && z.configure(
+      i,
+      e.main,
       this.window,
-      ut(this.transformConfig)
+      le(this.transformConfig)
     );
-    const d = () => {
-      i.destroy(), h.onBeforeDestroy.unsubscribe(d);
+    const n = () => {
+      e.destroy(), i.onBeforeDestroy.unsubscribe(n);
     };
-    return h.onBeforeDestroy.subscribe(d), h;
+    return i.onBeforeDestroy.subscribe(n), i;
   }
 }
 export {
-  _t as BezierEdgeShape,
-  Me as CanvasBuilder,
-  Te as CanvasBuilderError,
+  et as BezierEdgeShape,
+  Lt as CanvasBuilder,
+  Nt as CanvasBuilderError,
   S as CanvasError,
-  bt as DirectEdgeShape,
-  qt as HorizontalEdgeShape,
-  se as InteractiveEdgeError,
-  Tt as InteractiveEdgeShape,
-  Ne as MidpointEdgeShape,
-  te as StraightEdgeShape,
-  ee as VerticalEdgeShape
+  Pe as DirectEdgeShape,
+  tt as HorizontalEdgeShape,
+  nt as InteractiveEdgeError,
+  be as InteractiveEdgeShape,
+  Rt as MidpointEdgeShape,
+  rt as StraightEdgeShape,
+  ot as VerticalEdgeShape
 };