@html-graph/html-graph 0.0.52 → 0.0.54

package/dist/main.js

@@ -1,113 +1,34 @@
-var B = Object.defineProperty;
-var X = (e, t, r) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var h = (e, t, r) => X(e, typeof t != "symbol" ? t + "" : t, r);
-const z = () => {
+var G = Object.defineProperty;
+var j = (e, t, r) => t in e ? G(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var n = (e, t, r) => j(e, typeof t != "symbol" ? t + "" : t, r);
+const H = () => {
   const e = document.createElement("div");
   return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
-}, G = () => {
+}, U = () => {
   const e = document.createElement("canvas");
   return e.style.position = "absolute", e.style.inset = "0", e;
-}, D = () => {
+}, _ = () => {
   const e = document.createElement("div");
   return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
 };
-class j {
-  constructor(t) {
-    h(this, "nodesContainer", D());
-    h(this, "edgesContainer", D());
-    this.host = t, this.host.appendChild(this.edgesContainer), this.host.appendChild(this.nodesContainer);
-  }
-  appendNodeElement(t) {
-    this.nodesContainer.appendChild(t);
-  }
-  removeNodeElement(t) {
-    this.nodesContainer.removeChild(t);
-  }
-  appendEdgeElement(t) {
-    this.edgesContainer.appendChild(t);
-  }
-  removeEdgeElement(t) {
-    this.edgesContainer.removeChild(t);
-  }
-  update(t, r, s) {
-    this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
-  }
-  destroy() {
-    this.host.removeChild(this.nodesContainer), this.host.removeChild(this.edgesContainer);
-  }
-}
-class H {
-  constructor(t) {
-    h(this, "nodesContainer", D());
-    h(this, "edgesContainer", D());
-    this.host = t, this.host.appendChild(this.nodesContainer), this.host.appendChild(this.edgesContainer);
-  }
-  appendNodeElement(t) {
-    this.nodesContainer.appendChild(t);
-  }
-  removeNodeElement(t) {
-    this.nodesContainer.removeChild(t);
-  }
-  appendEdgeElement(t) {
-    this.edgesContainer.appendChild(t);
-  }
-  removeEdgeElement(t) {
-    this.edgesContainer.removeChild(t);
-  }
-  update(t, r, s) {
-    this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
-  }
-  destroy() {
-    this.host.removeChild(this.nodesContainer), this.host.removeChild(this.edgesContainer);
-  }
-}
-class U {
-  constructor(t) {
-    h(this, "container", D());
-    this.host = t, this.host.appendChild(this.container);
-  }
-  appendNodeElement(t) {
-    this.container.appendChild(t);
-  }
-  removeNodeElement(t) {
-    this.container.removeChild(t);
-  }
-  appendEdgeElement(t) {
-    this.container.appendChild(t);
-  }
-  removeEdgeElement(t) {
-    this.container.removeChild(t);
-  }
-  update(t, r, s) {
-    this.container.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
-  }
-  destroy() {
-    this.host.removeChild(this.container);
-  }
-}
-const _ = {
-  "edges-on-top": (e) => new H(e),
-  "edges-follow-node": (e) => new U(e),
-  "nodes-on-top": (e) => new j(e)
-};
 class J {
-  constructor(t, r, s, o, n) {
-    h(this, "canvasWrapper", null);
-    h(this, "host", z());
-    h(this, "canvas", G());
-    h(this, "canvasCtx");
-    h(this, "hostResizeObserver");
-    h(this, "nodesResizeObserver");
-    h(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
-    h(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
-    h(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    h(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
-    h(this, "layer");
-    this.graphStore = t, this.viewportTransformer = r, this.publicViewportTransformer = s, this.layersMode = o, this.backgroundDrawingFn = n;
+  constructor(t, r, s, o) {
+    n(this, "canvasWrapper", null);
+    n(this, "host", H());
+    n(this, "canvas", U());
+    n(this, "container", _());
+    n(this, "canvasCtx");
+    n(this, "hostResizeObserver");
+    n(this, "nodesResizeObserver");
+    n(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
+    n(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
+    n(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
+    n(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    this.graphStore = t, this.viewportTransformer = r, this.publicViewportTransformer = s, this.backgroundDrawingFn = o;
     const i = this.canvas.getContext("2d");
     if (i === null)
       throw new Error("unable to get canvas context");
-    this.canvasCtx = i, this.host.appendChild(this.canvas), this.layer = _[this.layersMode](this.host), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
+    this.canvasCtx = i, this.host.appendChild(this.canvas), this.host.appendChild(this.container), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
   }
   clear() {
     Array.from(this.edgeIdToElementMap.keys()).forEach((t) => {
@@ -123,30 +44,30 @@ class J {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   destroy() {
-    this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.layer.destroy(), this.detach();
+    this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.container), this.detach();
   }
   applyTransform() {
     this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
-    const [t, r] = this.viewportTransformer.getViewCoords(0, 0), s = this.viewportTransformer.getViewScale();
-    this.layer.update(s, t, r);
+    const t = this.viewportTransformer.getContentMatrix();
+    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
   }
   attachNode(t) {
     const r = this.graphStore.getNode(t), s = document.createElement("div");
-    s.appendChild(r.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.visibility = "hidden", this.layer.appendNodeElement(s), this.nodeElementToIdMap.set(r.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t), this.updateNodePriority(t), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
+    s.appendChild(r.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.visibility = "hidden", this.container.appendChild(s), this.nodeElementToIdMap.set(r.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t), this.updateNodePriority(t), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
   }
   detachNode(t) {
     const r = this.graphStore.getNode(t);
     this.nodesResizeObserver.unobserve(r.element);
     const s = this.nodeIdToWrapperElementMap.get(t);
-    s.removeChild(r.element), this.layer.removeNodeElement(s), this.nodeElementToIdMap.delete(r.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
+    s.removeChild(r.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(r.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
   }
   attachEdge(t) {
-    const s = this.graphStore.getEdge(t).controller.svg;
-    s.style.position = "absolute", s.style.top = "0", s.style.left = "0", this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.updateEdgePriority(t), this.layer.appendEdgeElement(s);
+    const s = this.graphStore.getEdge(t).shape.svg;
+    s.style.position = "absolute", s.style.top = "0", s.style.left = "0", this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.updateEdgePriority(t), this.container.appendChild(s);
   }
   detachEdge(t) {
     const r = this.edgeIdToElementMap.get(t);
-    this.edgeIdToElementMap.delete(t), this.layer.removeEdgeElement(r);
+    this.edgeIdToElementMap.delete(t), this.container.removeChild(r);
   }
   updateNodePriority(t) {
     const r = this.graphStore.getNode(t), s = this.nodeIdToWrapperElementMap.get(t);
@@ -167,10 +88,6 @@ class J {
       this.updateEdgeCoords(s);
     });
   }
-  getViewportDimensions() {
-    const t = this.host.getBoundingClientRect();
-    return [t.width, t.height];
-  }
   createHostResizeObserver() {
     return new ResizeObserver(() => {
       this.updateCanvasDimensions(), this.applyTransform();
@@ -180,8 +97,8 @@ class J {
     return new ResizeObserver((t) => {
       t.forEach((r) => {
         const s = r.target, o = this.nodeWrapperElementToIdMap.get(s);
-        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((i) => {
-          this.updateEdgeCoords(i);
+        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((a) => {
+          this.updateEdgeCoords(a);
         });
       });
     });
@@ -191,57 +108,55 @@ class J {
     this.canvas.width = t, this.canvas.height = r;
   }
   updateNodeCoords(t) {
-    const r = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = r.getBoundingClientRect(), n = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [a, c] = i.centerFn(s, o);
-    r.style.transform = `matrix(1, 0, 0, 1, ${i.x - n * a}, ${i.y - n * c})`;
+    const r = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = r.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, a = this.graphStore.getNode(t), [c, h] = a.centerFn(s, o), d = a.x - i * c, l = a.y - i * h;
+    r.style.transform = `matrix(1, 0, 0, 1, ${d}, ${l})`;
   }
   updateEdgeCoords(t) {
-    const r = this.graphStore.getEdge(t), s = this.graphStore.getPort(r.from), o = this.graphStore.getPort(r.to), n = s.element.getBoundingClientRect(), i = o.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
-      n.left - a.left,
-      n.top - a.top
-    ), [d, g] = this.viewportTransformer.getAbsCoords(
-      i.left - a.left,
-      i.top - a.top
-    ), u = this.viewportTransformer.getAbsScale(), [p, w] = s.centerFn(
-      n.width * u,
-      n.height * u
-    ), [f, m] = o.centerFn(
-      i.width * u,
-      i.height * u
-    ), E = p + c, v = w + l, C = f + d, S = m + g, A = Math.min(E, C), P = Math.min(v, S), M = Math.abs(C - E), x = Math.abs(S - v);
-    r.controller.update(A, P, M, x, s, o);
+    const r = this.graphStore.getEdge(t), s = this.graphStore.getPort(r.from), o = this.graphStore.getPort(r.to), i = s.element.getBoundingClientRect(), a = o.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix(), d = h.scale * (i.left - c.left) + h.x, l = h.scale * (i.top - c.top) + h.y, u = h.scale * (a.left - c.left) + h.x, g = h.scale * (a.top - c.top) + h.y, [f, w] = s.centerFn(
+      i.width * h.scale,
+      i.height * h.scale
+    ), [v, m] = o.centerFn(
+      a.width * h.scale,
+      a.height * h.scale
+    ), E = f + d, p = w + l, y = v + u, S = m + g, A = Math.min(E, y), P = Math.min(p, S), T = Math.abs(y - E), L = Math.abs(S - p);
+    r.shape.update(A, P, T, L, s, o);
   }
 }
+const Y = {
+  scale: 1,
+  x: 0,
+  y: 0
+};
 class K {
   constructor() {
-    h(this, "state", {
-      scale: 1,
-      x: 0,
-      y: 0
-    });
-  }
-  getViewCoords(t, r) {
-    return [
-      (t - this.state.x) / this.state.scale,
-      (r - this.state.y) / this.state.scale
-    ];
-  }
-  getViewScale() {
-    return 1 / this.state.scale;
+    n(this, "viewportMatrix", Y);
+    n(this, "contentMatrix", Y);
   }
-  getAbsCoords(t, r) {
-    return [
-      t * this.state.scale + this.state.x,
-      r * this.state.scale + this.state.y
-    ];
+  getViewportMatrix() {
+    return { ...this.viewportMatrix };
   }
-  getAbsScale() {
-    return this.state.scale;
+  getContentMatrix() {
+    return { ...this.contentMatrix };
   }
-  patchState(t, r, s) {
-    this.state = {
-      scale: t ?? this.state.scale,
-      x: r ?? this.state.x,
-      y: s ?? this.state.y
+  patchViewportState(t, r, s) {
+    this.viewportMatrix = {
+      scale: t ?? this.viewportMatrix.scale,
+      x: r ?? this.viewportMatrix.x,
+      y: s ?? this.viewportMatrix.y
+    }, this.contentMatrix = this.calculateReverseMatrix(this.viewportMatrix);
+  }
+  patchContentState(t, r, s) {
+    this.contentMatrix = {
+      scale: t ?? this.contentMatrix.scale,
+      x: r ?? this.contentMatrix.x,
+      y: s ?? this.contentMatrix.y
+    }, this.viewportMatrix = this.calculateReverseMatrix(this.contentMatrix);
+  }
+  calculateReverseMatrix(t) {
+    return {
+      scale: 1 / t.scale,
+      x: -t.x / t.scale,
+      y: -t.y / t.scale
     };
   }
 }
@@ -249,48 +164,26 @@ class Q {
   constructor(t) {
     this.transformer = t;
   }
-  /**
-   * for given absolute coordinates returns viewport coordinates
-   * viewport coordinated represent actual coordinates on screen for given absolute coordinates
-   */
-  getViewCoords(t, r) {
-    return this.transformer.getViewCoords(t, r);
-  }
-  /**
-   * returns viewport scale
-   * it represents scale at which entities on canvas should be scaled to fit current scale
-   */
-  getViewScale() {
-    return this.transformer.getViewScale();
-  }
-  /**
-   * for given viewport coordinates returns absolute coordinates
-   * absolute coordinates represent actual coordinates, which stay constant even for transformed canvas
-   */
-  getAbsCoords(t, r) {
-    return this.transformer.getAbsCoords(t, r);
-  }
-  /**
-   * returns absolute scale
-   * it represents scale at which current viewport was scaled compared to initial state
-   */
-  getAbsScale() {
-    return this.transformer.getAbsScale();
+  getViewportMatrix() {
+    return this.transformer.getViewportMatrix();
+  }
+  getContentMatrix() {
+    return this.transformer.getContentMatrix();
   }
 }
 class Z {
   constructor() {
-    h(this, "nodes", /* @__PURE__ */ new Map());
-    h(this, "ports", /* @__PURE__ */ new Map());
-    h(this, "nodePorts", /* @__PURE__ */ new Map());
-    h(this, "portNodeId", /* @__PURE__ */ new Map());
-    h(this, "edges", /* @__PURE__ */ new Map());
-    h(this, "incommingEdges", /* @__PURE__ */ new Map());
-    h(this, "outcommingEdges", /* @__PURE__ */ new Map());
-    h(this, "cycleEdges", /* @__PURE__ */ new Map());
-  }
-  addNode(t, r, s, o, n, i) {
-    this.nodes.set(t, { element: r, x: s, y: o, centerFn: n, priority: i }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
+    n(this, "nodes", /* @__PURE__ */ new Map());
+    n(this, "ports", /* @__PURE__ */ new Map());
+    n(this, "nodePorts", /* @__PURE__ */ new Map());
+    n(this, "portNodeId", /* @__PURE__ */ new Map());
+    n(this, "edges", /* @__PURE__ */ new Map());
+    n(this, "incommingEdges", /* @__PURE__ */ new Map());
+    n(this, "outcommingEdges", /* @__PURE__ */ new Map());
+    n(this, "cycleEdges", /* @__PURE__ */ new Map());
+  }
+  addNode(t, r, s, o, i, a) {
+    this.nodes.set(t, { element: r, x: s, y: o, centerFn: i, priority: a }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
   }
   getNode(t) {
     return this.nodes.get(t);
@@ -298,12 +191,12 @@ class Z {
   removeNode(t) {
     this.getNodeAdjacentEdges(t).forEach((o) => {
       this.removeEdge(o);
-    }), this.nodes.delete(t), this.nodePorts.get(t).forEach((o, n) => {
-      this.portNodeId.delete(n);
+    }), this.nodes.delete(t), this.nodePorts.get(t).forEach((o, i) => {
+      this.portNodeId.delete(i);
     }), this.nodePorts.delete(t);
   }
-  addPort(t, r, s, o, n) {
-    this.ports.set(t, { element: r, centerFn: o, direction: n }), this.cycleEdges.set(t, /* @__PURE__ */ new Set()), this.incommingEdges.set(t, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t, /* @__PURE__ */ new Set()), this.portNodeId.set(t, s), this.nodePorts.get(s).set(t, r);
+  addPort(t, r, s, o, i) {
+    this.ports.set(t, { element: r, centerFn: o, direction: i }), this.cycleEdges.set(t, /* @__PURE__ */ new Set()), this.incommingEdges.set(t, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t, /* @__PURE__ */ new Set()), this.portNodeId.set(t, s), this.nodePorts.get(s).set(t, r);
   }
   getPort(t) {
     return this.ports.get(t);
@@ -322,12 +215,12 @@ class Z {
     const r = this.portNodeId.get(t);
     this.portNodeId.delete(t), this.nodePorts.get(r).delete(t), this.ports.delete(t);
   }
-  addEdge(t, r, s, o, n) {
+  addEdge(t, r, s, o, i) {
     this.edges.set(t, {
       from: r,
       to: s,
-      controller: o,
-      priority: n
+      shape: o,
+      priority: i
     }), r !== s ? (this.outcommingEdges.get(r).add(t), this.incommingEdges.get(s).add(t)) : this.cycleEdges.get(r).add(t);
   }
   getEdge(t) {
@@ -385,52 +278,106 @@ class Z {
     }), s;
   }
 }
-const T = (e) => {
-  const { top: t, left: r, width: s, height: o } = e.element.getBoundingClientRect(), n = e.centerFn(s, o);
-  return [r + n[0], t + n[1]];
-}, y = (e, t, r) => [
+class q {
+  constructor(t) {
+    this.graphStore = t;
+  }
+  getNode(t) {
+    const r = this.graphStore.getNode(t);
+    return r === void 0 ? null : {
+      element: r.element,
+      x: r.x,
+      y: r.y,
+      centerFn: r.centerFn,
+      priority: r.priority
+    };
+  }
+  getPort(t) {
+    const r = this.graphStore.getPort(t);
+    return r === void 0 ? null : {
+      element: r.element,
+      centerFn: r.centerFn,
+      direction: r.direction
+    };
+  }
+  getPortNode(t) {
+    return this.graphStore.getPortNode(t) ?? null;
+  }
+  getEdge(t) {
+    const r = this.graphStore.getEdge(t);
+    return r === void 0 ? null : { from: r.from, to: r.to, priority: r.priority };
+  }
+  getPortAdjacentEdges(t) {
+    return this.graphStore.getPortAdjacentEdges(t);
+  }
+  getNodeAdjacentEdges(t) {
+    return this.graphStore.getNodeAdjacentEdges(t);
+  }
+  getPortIncomingEdges(t) {
+    return this.graphStore.getPortIncomingEdges(t);
+  }
+  getPortOutcomingEdges(t) {
+    return this.graphStore.getPortOutcomingEdges(t);
+  }
+  getPortCycleEdges(t) {
+    return this.graphStore.getPortCycleEdges(t);
+  }
+  getNodeIncomingEdges(t) {
+    return this.graphStore.getNodeIncomingEdges(t);
+  }
+  getNodeOutcomingEdges(t) {
+    return this.graphStore.getNodeOutcomingEdges(t);
+  }
+  getNodeCycleEdges(t) {
+    return this.graphStore.getNodeCycleEdges(t);
+  }
+}
+const M = (e) => {
+  const { top: t, left: r, width: s, height: o } = e.element.getBoundingClientRect(), i = e.centerFn(s, o);
+  return [r + i[0], t + i[1]];
+}, C = (e, t, r) => [
   t[0] * e[0] - t[1] * e[1] + ((1 - t[0]) * r[0] + t[1] * r[1]),
   t[1] * e[0] + t[0] * e[1] + ((1 - t[0]) * r[1] - t[1] * r[0])
-], b = (e, t, r) => [t * Math.cos(e), r * Math.sin(e)], N = (e, t, r, s, o) => {
-  const i = [
+], N = (e, t, r) => [t * Math.cos(e), r * Math.sin(e)], b = (e, t, r, s, o) => {
+  const a = [
     [0, 0],
     [s, o],
     [s, -o]
-  ].map((d) => y(d, e, [0, 0])).map((d) => [d[0] + t, d[1] + r]), a = `M ${i[0][0]} ${i[0][1]}`, c = `L ${i[1][0]} ${i[1][1]}`, l = `L ${i[2][0]} ${i[2][1]}`;
-  return `${a} ${c} ${l}`;
+  ].map((l) => C(l, e, [0, 0])).map((l) => [l[0] + t, l[1] + r]), c = `M ${a[0][0]} ${a[0][1]}`, h = `L ${a[1][0]} ${a[1][1]}`, d = `L ${a[2][0]} ${a[2][1]}`;
+  return `${c} ${h} ${d}`;
 };
-class q {
-  constructor(t, r, s, o, n, i, a) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = n, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
+class I {
+  constructor(t, r, s, o, i, a, c) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, n, i) {
+  update(t, r, s, o, i, a) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = y([this.arrowLength, 0], g, [0, 0]), w = y([s - this.arrowLength, o], u, [
+    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
+    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = C([this.arrowLength, 0], u, [0, 0]), w = C([s - this.arrowLength, o], g, [
       s,
       o
-    ]), f = [
-      p[0] + g[0] * this.curvature,
-      p[1] + g[1] * this.curvature
+    ]), v = [
+      f[0] + u[0] * this.curvature,
+      f[1] + u[1] * this.curvature
     ], m = [
-      w[0] - u[0] * this.curvature,
-      w[1] - u[1] * this.curvature
-    ], E = `M ${p[0]} ${p[1]} C ${f[0]} ${f[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`, v = this.sourceArrow ? "" : `M 0 0 L ${p[0]} ${p[1]} `, C = this.targetArrow ? "" : ` M ${w[0]} ${w[1]} L ${s} ${o}`, S = `${v}${E}${C}`;
+      w[0] - g[0] * this.curvature,
+      w[1] - g[1] * this.curvature
+    ], E = `M ${f[0]} ${f[1]} C ${v[0]} ${v[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`, p = this.sourceArrow ? "" : `M 0 0 L ${f[0]} ${f[1]} `, y = this.targetArrow ? "" : ` M ${w[0]} ${w[1]} L ${s} ${o}`, S = `${p}${E}${y}`;
     if (this.line.setAttribute("d", S), this.sourceArrow) {
-      const A = N(
-        g,
+      const A = b(
+        u,
         0,
         0,
         this.arrowLength,
@@ -439,8 +386,8 @@ class q {
       this.sourceArrow.setAttribute("d", A);
     }
     if (this.targetArrow) {
-      const A = N(
-        u,
+      const A = b(
+        g,
         s,
         o,
         -this.arrowLength,
@@ -450,286 +397,286 @@ class q {
     }
   }
 }
-const V = (e, t) => {
+const F = (e, t) => {
   const r = [];
   if (e.length > 0 && r.push(`M ${e[0][0]} ${e[0][1]}`), e.length === 2 && r.push(`L ${e[1][0]} ${e[1][1]}`), e.length > 2) {
     const s = e.length - 1;
-    let o = 0, n = 0, i = 0;
-    e.forEach((a, c) => {
-      let l = 0, d = 0, g = 0;
-      const u = c > 0, p = c < s, w = u && p;
-      if (u && (l = -o, d = -n, g = i), p) {
-        const A = e[c + 1];
-        o = A[0] - a[0], n = A[1] - a[1], i = Math.sqrt(o * o + n * n);
+    let o = 0, i = 0, a = 0;
+    e.forEach((c, h) => {
+      let d = 0, l = 0, u = 0;
+      const g = h > 0, f = h < s, w = g && f;
+      if (g && (d = -o, l = -i, u = a), f) {
+        const A = e[h + 1];
+        o = A[0] - c[0], i = A[1] - c[1], a = Math.sqrt(o * o + i * i);
       }
-      const m = Math.min((w ? t : 0) / i, c < s - 1 ? 0.5 : 1), E = w ? [a[0] + o * m, a[1] + n * m] : a, C = Math.min((w ? t : 0) / g, c > 1 ? 0.5 : 1), S = w ? [a[0] + l * C, a[1] + d * C] : a;
-      c > 0 && r.push(`L ${S[0]} ${S[1]}`), w && r.push(
-        `C ${a[0]} ${a[1]} ${a[0]} ${a[1]} ${E[0]} ${E[1]}`
+      const m = Math.min((w ? t : 0) / a, h < s - 1 ? 0.5 : 1), E = w ? [c[0] + o * m, c[1] + i * m] : c, y = Math.min((w ? t : 0) / u, h > 1 ? 0.5 : 1), S = w ? [c[0] + d * y, c[1] + l * y] : c;
+      h > 0 && r.push(`L ${S[0]} ${S[1]}`), w && r.push(
+        `C ${c[0]} ${c[1]} ${c[0]} ${c[1]} ${E[0]} ${E[1]}`
       );
     });
   }
   return r.join(" ");
 };
-class I {
-  constructor(t, r, s, o, n, i, a, c) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
+class tt {
+  constructor(t, r, s, o, i, a, c, h) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = h, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, n, i) {
+  update(t, r, s, o, i, a) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
+    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
+    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = y([s - f, o], u, [
+    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = C([s - v, o], g, [
       s,
       o
-    ]), v = V([p, m, E, w], this.roundness);
-    if (this.line.setAttribute("d", v), this.sourceArrow) {
-      const C = N(
-        g,
+    ]), p = F([f, m, E, w], this.roundness);
+    if (this.line.setAttribute("d", p), this.sourceArrow) {
+      const y = b(
+        u,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", C);
+      this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const C = N(
-        u,
+      const y = b(
+        g,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", C);
+      this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class tt {
-  constructor(t, r, s, o, n, i, a, c) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
+class et {
+  constructor(t, r, s, o, i, a, c, h) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = h, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, n, i) {
+  update(t, r, s, o, i, a) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
+    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
+    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = y([s - f, o], u, [
+    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = C([s - v, o], g, [
       s,
       o
-    ]), v = Math.max((m[0] + E[0]) / 2, f), C = o / 2, S = [l > 0 ? v : -f, m[1]], A = [S[0], C], P = [l > 0 ? s - v : s + f, E[1]], M = [P[0], C], x = V(
-      [p, m, S, A, M, P, E, w],
+    ]), p = Math.max((m[0] + E[0]) / 2, v), y = o / 2, S = [d > 0 ? p : -v, m[1]], A = [S[0], y], P = [d > 0 ? s - p : s + v, E[1]], T = [P[0], y], L = F(
+      [f, m, S, A, T, P, E, w],
       this.roundness
     );
-    if (this.line.setAttribute("d", x), this.sourceArrow) {
-      const L = N(
-        g,
+    if (this.line.setAttribute("d", L), this.sourceArrow) {
+      const $ = b(
+        u,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", L);
+      this.sourceArrow.setAttribute("d", $);
     }
     if (this.targetArrow) {
-      const L = N(
-        u,
+      const $ = b(
+        g,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", L);
+      this.targetArrow.setAttribute("d", $);
     }
   }
 }
-class et {
-  constructor(t, r, s, o, n, i, a, c) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
+class rt {
+  constructor(t, r, s, o, i, a, c, h) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = h, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, n, i) {
+  update(t, r, s, o, i, a) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
+    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
+    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = y([s - f, o], u, [
+    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = C([s - v, o], g, [
       s,
       o
-    ]), v = Math.max((m[1] + E[1]) / 2, f), C = s / 2, S = [m[0], d > 0 ? v : -f], A = [C, S[1]], P = [E[0], d > 0 ? o - v : o + f], M = [C, P[1]], x = V(
-      [p, m, S, A, M, P, E, w],
+    ]), p = Math.max((m[1] + E[1]) / 2, v), y = s / 2, S = [m[0], l > 0 ? p : -v], A = [y, S[1]], P = [E[0], l > 0 ? o - p : o + v], T = [y, P[1]], L = F(
+      [f, m, S, A, T, P, E, w],
       this.roundness
     );
-    if (this.line.setAttribute("d", x), this.sourceArrow) {
-      const L = N(
-        g,
+    if (this.line.setAttribute("d", L), this.sourceArrow) {
+      const $ = b(
+        u,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", L);
+      this.sourceArrow.setAttribute("d", $);
     }
     if (this.targetArrow) {
-      const L = N(
-        u,
+      const $ = b(
+        g,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", L);
+      this.targetArrow.setAttribute("d", $);
     }
   }
 }
-class rt {
-  constructor(t, r, s, o, n, i, a) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "arrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.radius = i, this.smallRadius = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.arrow = document.createElementNS(
+class st {
+  constructor(t, r, s, o, i, a, c) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "arrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.radius = a, this.smallRadius = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
   }
-  update(t, r, s, o, n) {
+  update(t, r, s, o, i) {
     this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const i = b(n.direction, 1, 1), a = this.smallRadius, c = this.radius, l = Math.sqrt(a * a + c * c), d = a + c, g = this.arrowLength + l * (1 - c / d), u = a * c / d, w = [
+    const a = N(i.direction, 1, 1), c = this.smallRadius, h = this.radius, d = Math.sqrt(c * c + h * h), l = c + h, u = this.arrowLength + d * (1 - h / l), g = c * h / l, w = [
       [this.arrowLength, 0],
-      [g, u],
-      [g, -u]
-    ].map((v) => y(v, i, [0, 0])), f = [
+      [u, g],
+      [u, -g]
+    ].map((p) => C(p, a, [0, 0])), v = [
       `M ${w[0][0]} ${w[0][1]}`,
-      `A ${a} ${a} 0 0 1 ${w[1][0]} ${w[1][1]}`,
-      `A ${c} ${c} 0 1 0 ${w[2][0]} ${w[2][1]}`,
-      `A ${a} ${a} 0 0 1 ${w[0][0]} ${w[0][1]}`
-    ].join(" "), m = `M 0 0 L ${w[0][0]} ${w[0][1]} `, E = `${this.arrow !== null ? "" : m}${f}`;
+      `A ${c} ${c} 0 0 1 ${w[1][0]} ${w[1][1]}`,
+      `A ${h} ${h} 0 1 0 ${w[2][0]} ${w[2][1]}`,
+      `A ${c} ${c} 0 0 1 ${w[0][0]} ${w[0][1]}`
+    ].join(" "), m = `M 0 0 L ${w[0][0]} ${w[0][1]} `, E = `${this.arrow !== null ? "" : m}${v}`;
     if (this.line.setAttribute("d", E), this.arrow) {
-      const v = N(
-        i,
+      const p = b(
+        a,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", v);
+      this.arrow.setAttribute("d", p);
     }
   }
 }
-class W {
-  constructor(t, r, s, o, n, i, a, c) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "arrow", null);
-    h(this, "roundness");
-    h(this, "linePoints");
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.side = i, this.minPortOffset = a, this.roundness = Math.min(c, this.minPortOffset, this.side / 2), this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", n && (this.arrow = document.createElementNS(
+class k {
+  constructor(t, r, s, o, i, a, c, h) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "arrow", null);
+    n(this, "roundness");
+    n(this, "linePoints");
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.side = a, this.minPortOffset = c, this.roundness = Math.min(h, this.minPortOffset, this.side / 2), this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
-    const l = this.minPortOffset, d = this.side, g = this.arrowLength + l, u = this.roundness, p = g + 2 * d;
-    console.log(u), this.linePoints = [
+    const d = this.minPortOffset, l = this.side, u = this.arrowLength + d, g = this.roundness, f = u + 2 * l;
+    console.log(g), this.linePoints = [
       [this.arrowLength, 0],
-      [g, 0],
-      [g, this.side],
-      [p, this.side],
-      [p, -this.side],
-      [g, -this.side],
-      [g, 0],
+      [u, 0],
+      [u, this.side],
+      [f, this.side],
+      [f, -this.side],
+      [u, -this.side],
+      [u, 0],
       [this.arrowLength, 0]
     ];
   }
-  update(t, r, s, o, n) {
+  update(t, r, s, o, i) {
     this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const i = b(n.direction, 1, 1), a = this.linePoints.map(
-      (d) => y(d, i, [0, 0])
-    ), c = `M 0 0 L ${a[0][0]} ${a[0][1]} `, l = `${this.arrow ? "" : c}${V(a, this.roundness)}`;
-    if (this.line.setAttribute("d", l), this.arrow) {
-      const d = N(
-        i,
+    const a = N(i.direction, 1, 1), c = this.linePoints.map(
+      (l) => C(l, a, [0, 0])
+    ), h = `M 0 0 L ${c[0][0]} ${c[0][1]} `, d = `${this.arrow ? "" : h}${F(c, this.roundness)}`;
+    if (this.line.setAttribute("d", d), this.arrow) {
+      const l = b(
+        a,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", d);
+      this.arrow.setAttribute("d", l);
     }
   }
 }
-class k {
-  constructor(t, r, s, o, n, i, a, c, l, d) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    h(this, "detourX");
-    h(this, "detourY");
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.detourX = Math.cos(d) * l, this.detourY = Math.sin(d) * l, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
+class R {
+  constructor(t, r, s, o, i, a, c, h, d, l) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    n(this, "detourX");
+    n(this, "detourY");
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = h, this.detourX = Math.cos(l) * d, this.detourY = Math.sin(l) * d, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, n, i) {
+  update(t, r, s, o, i, a) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
+    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
+    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = y([s - f, o], u, [
+    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], p = C([s - v, o], g, [
       s,
       o
-    ]), C = [v[0] + this.detourX, v[1] + this.detourY], S = V(
-      [p, m, E, C, v, w],
+    ]), y = [p[0] + this.detourX, p[1] + this.detourY], S = F(
+      [f, m, E, y, p, w],
       this.roundness
     );
     if (this.line.setAttribute("d", S), this.sourceArrow) {
-      const A = N(
-        g,
+      const A = b(
+        u,
         0,
         0,
         this.arrowLength,
@@ -738,8 +685,8 @@ class k {
       this.sourceArrow.setAttribute("d", A);
     }
     if (this.targetArrow) {
-      const A = N(
-        u,
+      const A = b(
+        g,
         s,
         o,
         -this.arrowLength,
@@ -749,70 +696,70 @@ class k {
     }
   }
 }
-var $ = /* @__PURE__ */ ((e) => (e.Regular = "regular", e.PortCycle = "port-cycle", e.NodeCycle = "node-cycle", e))($ || {});
-class st {
-  constructor(t, r, s, o, n, i, a, c, l) {
-    h(this, "svg");
-    h(this, "group");
-    h(this, "line");
-    h(this, "sourceArrow", null);
-    h(this, "targetArrow", null);
-    h(this, "detourX");
-    h(this, "detourY");
-    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = n, this.detourX = Math.cos(l) * c, this.detourY = Math.sin(l) * c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.sourceArrow = document.createElementNS(
+var x = /* @__PURE__ */ ((e) => (e.Regular = "regular", e.PortCycle = "port-cycle", e.NodeCycle = "node-cycle", e))(x || {});
+class ot {
+  constructor(t, r, s, o, i, a, c, h, d) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    n(this, "detourX");
+    n(this, "detourY");
+    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.detourX = Math.cos(d) * h, this.detourY = Math.sin(d) * h, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, n, i) {
+  update(t, r, s, o, i, a) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
+    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
+    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
+    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength, m = y([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = y([s - f, o], u, [
+    ]) : [s, o], v = this.arrowLength, m = C([v, 0], u, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], p = C([s - v, o], g, [
       s,
       o
-    ]), C = [v[0] + this.detourX, v[1] + this.detourY], S = [(E[0] + C[0]) / 2, (E[1] + C[1]) / 2], A = [
-      m[0] - this.curvature * Math.cos(n.direction),
-      m[1] - this.curvature * Math.sin(n.direction)
+    ]), y = [p[0] + this.detourX, p[1] + this.detourY], S = [(E[0] + y[0]) / 2, (E[1] + y[1]) / 2], A = [
+      m[0] - this.curvature * Math.cos(i.direction),
+      m[1] - this.curvature * Math.sin(i.direction)
     ], P = [
-      v[0] + this.curvature * Math.cos(i.direction),
-      v[1] + this.curvature * Math.sin(i.direction)
-    ], M = [m[0] + this.detourX, m[1] + this.detourY], x = [v[0] + this.detourX, v[1] + this.detourY], L = [
-      `M ${p[0]} ${p[1]}`,
+      p[0] + this.curvature * Math.cos(a.direction),
+      p[1] + this.curvature * Math.sin(a.direction)
+    ], T = [m[0] + this.detourX, m[1] + this.detourY], L = [p[0] + this.detourX, p[1] + this.detourY], $ = [
+      `M ${f[0]} ${f[1]}`,
       `L ${m[0]} ${m[1]}`,
-      `C ${A[0]} ${A[1]} ${M[0]} ${M[1]} ${S[0]} ${S[1]}`,
-      `C ${x[0]} ${x[1]} ${P[0]} ${P[1]} ${v[0]} ${v[1]}`,
+      `C ${A[0]} ${A[1]} ${T[0]} ${T[1]} ${S[0]} ${S[1]}`,
+      `C ${L[0]} ${L[1]} ${P[0]} ${P[1]} ${p[0]} ${p[1]}`,
       `L ${w[0]} ${w[1]}`
     ].join(" ");
-    if (this.line.setAttribute("d", L), this.sourceArrow) {
-      const F = N(
-        g,
+    if (this.line.setAttribute("d", $), this.sourceArrow) {
+      const D = b(
+        u,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", F);
+      this.sourceArrow.setAttribute("d", D);
     }
     if (this.targetArrow) {
-      const F = N(
-        u,
+      const D = b(
+        g,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", F);
+      this.targetArrow.setAttribute("d", D);
     }
   }
 }
-const ot = (e) => (t) => t === $.PortCycle ? new rt(
+const it = (e) => (t) => t === x.PortCycle ? new st(
   e.color,
   e.width,
   e.arrowLength,
@@ -820,7 +767,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.hasSourceArrow || e.hasTargetArrow,
   e.cycleRadius,
   e.smallCycleRadius
-) : t === $.NodeCycle ? new st(
+) : t === x.NodeCycle ? new ot(
   e.color,
   e.width,
   e.curvature,
@@ -830,7 +777,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.hasTargetArrow,
   e.detourDistance,
   e.detourDirection
-) : new q(
+) : new I(
   e.color,
   e.width,
   e.curvature,
@@ -838,7 +785,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.arrowWidth,
   e.hasSourceArrow,
   e.hasTargetArrow
-), it = (e) => (t) => t === $.PortCycle ? new W(
+), nt = (e) => (t) => t === x.PortCycle ? new k(
   e.color,
   e.width,
   e.arrowLength,
@@ -847,7 +794,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.cycleSquareSide,
   e.arrowOffset,
   e.roundness
-) : t === $.NodeCycle ? new k(
+) : t === x.NodeCycle ? new R(
   e.color,
   e.width,
   e.arrowLength,
@@ -858,7 +805,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.roundness,
   e.detourDistance,
   e.detourDirection
-) : new I(
+) : new tt(
   e.color,
   e.width,
   e.arrowLength,
@@ -867,7 +814,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.hasSourceArrow,
   e.hasTargetArrow,
   e.roundness
-), nt = (e) => (t) => t === $.PortCycle ? new W(
+), at = (e) => (t) => t === x.PortCycle ? new k(
   e.color,
   e.width,
   e.arrowLength,
@@ -876,7 +823,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.cycleSquareSide,
   e.arrowOffset,
   e.roundness
-) : t === $.NodeCycle ? new k(
+) : t === x.NodeCycle ? new R(
   e.color,
   e.width,
   e.arrowLength,
@@ -887,7 +834,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.roundness,
   e.detourDistance,
   e.detourDirection
-) : new tt(
+) : new et(
   e.color,
   e.width,
   e.arrowLength,
@@ -896,7 +843,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.hasSourceArrow,
   e.hasTargetArrow,
   e.roundness
-), ht = (e) => (t) => t === $.PortCycle ? new W(
+), ht = (e) => (t) => t === x.PortCycle ? new k(
   e.color,
   e.width,
   e.arrowLength,
@@ -905,7 +852,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.cycleSquareSide,
   e.arrowOffset,
   e.roundness
-) : t === $.NodeCycle ? new k(
+) : t === x.NodeCycle ? new R(
   e.color,
   e.width,
   e.arrowLength,
@@ -916,7 +863,7 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.roundness,
   e.detourDistance,
   e.detourDirection
-) : new et(
+) : new rt(
   e.color,
   e.width,
   e.arrowLength,
@@ -926,88 +873,62 @@ const ot = (e) => (t) => t === $.PortCycle ? new rt(
   e.hasTargetArrow,
   e.roundness
 );
-class O {
+class V {
   constructor() {
-    h(this, "counter", 0);
+    n(this, "counter", 0);
   }
   create() {
-    const t = `${this.counter}`;
+    const t = this.counter;
     return this.counter++, t;
   }
   reset() {
     this.counter = 0;
   }
 }
-class at {
-  constructor() {
-    h(this, "priority", 0);
-  }
-  create() {
-    const t = this.priority;
-    return this.priority++, t;
-  }
-  push(t) {
-    this.priority = Math.max(this.priority, t);
-  }
-  reset() {
-    this.priority = 0;
-  }
-}
 class ct {
-  constructor(t, r, s, o, n, i) {
-    h(this, "nodeIdGenerator", new O());
-    h(this, "portIdGenerator", new O());
-    h(this, "edgeIdGenerator", new O());
-    h(this, "priorityGenerator", new at());
-    this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = n, this.portsDirection = i;
+  constructor(t, r, s, o, i, a, c, h) {
+    n(this, "nodeIdGenerator", new V());
+    n(this, "portIdGenerator", new V());
+    n(this, "edgeIdGenerator", new V());
+    this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = i, this.portsDirection = a, this.nodesPriorityFn = c, this.edgesPriorityFn = h;
   }
-  moveNodeOnTop(t) {
-    const r = this.graphStore.getNode(t);
-    if (r === void 0)
-      throw new Error("failed to move on top nonexisting node");
-    const s = this.priorityGenerator.create(), o = this.priorityGenerator.create();
-    r.priority = o, this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdges(t).forEach((i) => {
-      const a = this.graphStore.getEdge(i);
-      a.priority = s, this.htmlController.updateEdgePriority(i);
-    });
-  }
-  addNode(t, r, s, o, n, i, a) {
+  addNode(t, r, s, o, i, a, c) {
     if (t === void 0)
       do
         t = this.nodeIdGenerator.create();
       while (this.graphStore.getNode(t) !== void 0);
     if (this.graphStore.getNode(t) !== void 0)
       throw new Error("failed to add node with existing id");
-    a !== void 0 && this.priorityGenerator.push(a), this.graphStore.addNode(
+    this.graphStore.addNode(
       t,
       r,
       s,
       o,
-      i ?? this.nodesCenterFn,
-      a ?? this.priorityGenerator.create()
-    ), this.htmlController.attachNode(t), n !== void 0 && n.forEach((c, l) => {
-      c instanceof HTMLElement ? this.markPort(
+      a ?? this.nodesCenterFn,
+      c ?? this.nodesPriorityFn()
+    ), this.htmlController.attachNode(t), new Map(i ?? []).forEach((d, l) => {
+      d instanceof HTMLElement ? this.markPort(
         l,
-        c,
+        d,
         t,
         this.portsCenterFn,
         this.portsDirection
       ) : this.markPort(
         l,
-        c.element,
+        d.element,
         t,
-        c.centerFn ?? this.portsCenterFn,
-        c.direction ?? this.portsDirection
+        d.centerFn ?? this.portsCenterFn,
+        d.direction ?? this.portsDirection
       );
     });
   }
-  updateNode(t, r, s, o, n) {
-    const i = this.graphStore.getNode(t);
-    if (i === void 0)
+  updateNode(t, r, s, o, i) {
+    const a = this.graphStore.getNode(t);
+    if (a === void 0)
       throw new Error("failed to update nonexisting node");
-    i.x = r ?? i.x, i.y = s ?? i.y, i.centerFn = n ?? i.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (i.priority = o, this.htmlController.updateNodePriority(t));
+    a.x = r ?? a.x, a.y = s ?? a.y, a.centerFn = i ?? a.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (a.priority = o, this.htmlController.updateNodePriority(t));
   }
-  markPort(t, r, s, o, n) {
+  markPort(t, r, s, o, i) {
     if (t === void 0)
       do
         t = this.portIdGenerator.create();
@@ -1021,7 +942,7 @@ class ct {
       r,
       s,
       o ?? this.portsCenterFn,
-      n ?? 0
+      i ?? 0
     );
   }
   updatePort(t, r) {
@@ -1037,7 +958,7 @@ class ct {
       this.removeEdge(r);
     }), this.graphStore.removePort(t);
   }
-  addEdge(t, r, s, o, n) {
+  addEdge(t, r, s, o, i) {
     if (t === void 0)
       do
         t = this.edgeIdGenerator.create();
@@ -1048,21 +969,21 @@ class ct {
       throw new Error("failed to add edge to nonexisting port");
     if (this.graphStore.getEdge(t) !== void 0)
       throw new Error("failed to add edge with existing id");
-    let i = $.Regular;
-    const a = this.graphStore.getPortNode(r), c = this.graphStore.getPortNode(s);
-    r === s ? i = $.PortCycle : a === c && (i = $.NodeCycle), n !== void 0 && this.priorityGenerator.push(n), this.graphStore.addEdge(
+    let a = x.Regular;
+    const c = this.graphStore.getPortNode(r), h = this.graphStore.getPortNode(s);
+    r === s ? a = x.PortCycle : c === h && (a = x.NodeCycle), this.graphStore.addEdge(
       t,
       r,
       s,
-      o(i),
-      n ?? this.priorityGenerator.create()
+      o(a),
+      i ?? this.edgesPriorityFn()
     ), this.htmlController.attachEdge(t);
   }
   updateEdge(t, r) {
     const s = this.graphStore.getEdge(t);
     if (s === void 0)
       throw new Error("failed to update nonexisting edge");
-    r.controller !== void 0 && (this.htmlController.detachEdge(t), s.controller = r.controller, this.htmlController.attachEdge(t)), r.priority !== void 0 && (s.priority = r.priority, this.htmlController.updateEdgePriority(t));
+    r.controller !== void 0 && (this.htmlController.detachEdge(t), s.shape = r.controller, this.htmlController.attachEdge(t)), r.priority !== void 0 && (s.priority = r.priority, this.htmlController.updateEdgePriority(t));
   }
   removeEdge(t) {
     if (this.graphStore.getEdge(t) === void 0)
@@ -1075,19 +996,10 @@ class ct {
     this.htmlController.detachNode(t), this.graphStore.removeNode(t);
   }
   patchViewportState(t, r, s) {
-    this.viewportTransformer.patchState(t, r, s), this.htmlController.applyTransform();
+    this.viewportTransformer.patchViewportState(t, r, s), this.htmlController.applyTransform();
   }
-  moveToNodes(t) {
-    if (t.length === 0)
-      return;
-    const r = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
-    if (r.length < t.length)
-      throw new Error("failed to move to nonexisting node");
-    const [s, o] = r.reduce(
-      (u, p) => [u[0] + p.x, u[1] + p.y],
-      [0, 0]
-    ), n = s / r.length, i = o / r.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), d = n - l * a / 2, g = i - l * c / 2;
-    this.patchViewportState(null, d, g);
+  patchContentState(t, r, s) {
+    this.viewportTransformer.patchContentState(t, r, s), this.htmlController.applyTransform();
   }
   attach(t) {
     this.htmlController.attach(t);
@@ -1096,88 +1008,84 @@ class ct {
     this.htmlController.detach();
   }
   clear() {
-    this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.priorityGenerator.reset();
+    this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
   }
   destroy() {
     this.htmlController.destroy();
   }
 }
 class lt {
-  constructor(t, r, s, o, n) {
-    h(this, "publicViewportTransformer");
-    h(this, "canvasController");
-    const i = new K(), a = new Z();
-    this.publicViewportTransformer = new Q(
-      i
+  constructor(t, r, s, o, i, a) {
+    n(this, "publicViewportTransformer");
+    n(this, "publicGraphStore");
+    n(this, "canvasController");
+    const c = new K(), h = new Z();
+    this.publicGraphStore = new q(h), this.publicViewportTransformer = new Q(
+      c
     );
-    const c = new J(
-      a,
-      i,
+    const d = new J(
+      h,
+      c,
       this.publicViewportTransformer,
-      t,
-      r
+      t
     );
     this.canvasController = new ct(
-      a,
+      h,
+      d,
       c,
-      i,
+      r,
       s,
       o,
-      n
+      i,
+      a
     );
   }
 }
-const R = (e, t) => [
+const X = (e, t) => [
   e / 2,
   t / 2
 ], dt = () => () => {
-}, gt = (e, t, r, s, o, n) => {
-  e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.fillStyle = n, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
-  const i = t.getViewCoords(0, 0), a = t.getViewScale(), c = s * a;
-  let l = 0, d = 0, g = c / 2;
+}, ut = (e, t, r, s, o, i) => {
+  e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.fillStyle = i, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
+  const a = t.getContentMatrix(), c = s * a.scale;
+  let h = 0, d = 0, l = c / 2;
   do
-    g *= 2, l = e.canvas.width / g, d = e.canvas.height / g;
-  while (l * d > 1e4);
-  const u = i[0] - Math.floor(i[0] / g) * g, p = i[1] - Math.floor(i[1] / g) * g, w = o * a, f = 2 * Math.PI, m = u - g, E = p - g, v = e.canvas.width + u, C = e.canvas.height + p;
+    l *= 2, h = e.canvas.width / l, d = e.canvas.height / l;
+  while (h * d > 1e4);
+  const u = a.x - Math.floor(a.x / l) * l, g = a.y - Math.floor(a.y / l) * l, f = o * a.scale, w = 2 * Math.PI, v = u - l, m = g - l, E = e.canvas.width + u, p = e.canvas.height + g;
   e.fillStyle = r;
-  for (let S = m; S <= v; S += g)
-    for (let A = E; A <= C; A += g)
-      e.beginPath(), e.arc(S, A, w, 0, f), e.closePath(), e.fill();
-}, ut = (e, t, r, s) => (o, n) => {
-  gt(
+  for (let y = v; y <= E; y += l)
+    for (let S = m; S <= p; S += l)
+      e.beginPath(), e.arc(y, S, f, 0, w), e.closePath(), e.fill();
+}, gt = (e, t, r, s) => (o, i) => {
+  ut(
     o,
-    n,
+    i,
     e,
     t,
     r,
     s
   );
-}, wt = (e, t) => {
-  e.fillStyle = t, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
-}, mt = (e) => (t) => {
-  wt(t, e);
-}, pt = (e) => {
+}, wt = (e) => {
   switch (e == null ? void 0 : e.type) {
     case "custom":
       return e.drawingFn;
     case "dots":
-      return ut(
+      return gt(
         e.dotColor ?? "#d8d8d8",
         e.dotGap ?? 25,
         e.dotRadius ?? 1.5,
         e.color ?? "#ffffff"
       );
-    case "color":
-      return mt(e.color ?? "#ffffff");
     default:
       return dt();
   }
-}, Y = (e) => {
+}, B = (e) => {
   switch (e == null ? void 0 : e.type) {
     case "custom":
       return e.controllerFactory;
     case "straight":
-      return it({
+      return nt({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         arrowLength: e.arrowLength ?? 15,
@@ -1191,7 +1099,7 @@ const R = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
     case "horizontal":
-      return nt({
+      return at({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         arrowLength: e.arrowLength ?? 15,
@@ -1219,7 +1127,7 @@ const R = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
     default:
-      return ot({
+      return it({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         curvature: e.curvature ?? 90,
@@ -1233,43 +1141,59 @@ const R = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
   }
-}, vt = (e) => {
-  var t, r, s, o;
+}, O = (e) => () => e, z = O(0), W = () => {
+  let e = 0;
+  return () => e++;
+}, mt = (e, t) => {
+  const r = [
+    z,
+    z
+  ];
+  e === "incremental" && (r[0] = W()), t === "incremental" && (r[1] = W());
+  const s = W();
+  return e === "shared-incremental" && (r[0] = s), t === "shared-incremental" && (r[1] = s), typeof e == "number" && (r[0] = O(e)), typeof t == "number" && (r[1] = O(t)), typeof e == "function" && (r[0] = e), typeof t == "function" && (r[1] = t), r;
+}, pt = (e) => {
+  var s, o, i, a, c, h;
+  const [t, r] = mt(
+    (s = e.nodes) == null ? void 0 : s.priority,
+    (o = e.edges) == null ? void 0 : o.priority
+  );
   return {
     background: {
-      drawingFn: pt(
+      drawingFn: wt(
         e.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((t = e.nodes) == null ? void 0 : t.centerFn) ?? R
+      centerFn: ((i = e.nodes) == null ? void 0 : i.centerFn) ?? X,
+      priorityFn: t
     },
     ports: {
-      centerFn: ((r = e.ports) == null ? void 0 : r.centerFn) ?? R,
-      direction: ((s = e.ports) == null ? void 0 : s.direction) ?? 0
+      centerFn: ((a = e.ports) == null ? void 0 : a.centerFn) ?? X,
+      direction: ((c = e.ports) == null ? void 0 : c.direction) ?? 0
     },
     edges: {
-      controllerFactory: Y(e.edges ?? {})
-    },
-    layers: {
-      mode: ((o = e.layers) == null ? void 0 : o.mode) ?? "edges-follow-node"
+      shapeFactory: B(((h = e.edges) == null ? void 0 : h.shape) ?? {}),
+      priorityFn: r
     }
   };
 };
-class ft {
+class vt {
   constructor(t) {
-    h(this, "transformation");
-    h(this, "di");
-    h(this, "edgeControllerFactory");
+    n(this, "transformation");
+    n(this, "model");
+    n(this, "di");
+    n(this, "edgeShapeFactory");
     this.apiOptions = t;
-    const r = vt(this.apiOptions ?? {});
+    const r = pt(this.apiOptions ?? {});
     this.di = new lt(
-      r.layers.mode,
       r.background.drawingFn,
       r.nodes.centerFn,
       r.ports.centerFn,
-      r.ports.direction
-    ), this.transformation = this.di.publicViewportTransformer, this.edgeControllerFactory = r.edges.controllerFactory;
+      r.ports.direction,
+      r.nodes.priorityFn,
+      r.edges.priorityFn
+    ), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.edgeShapeFactory = r.edges.shapeFactory;
   }
   addNode(t) {
     return this.di.canvasController.addNode(
@@ -1294,9 +1218,6 @@ class ft {
   removeNode(t) {
     return this.di.canvasController.removeNode(t), this;
   }
-  moveNodeOnTop(t) {
-    return this.di.canvasController.moveNodeOnTop(t), this;
-  }
   markPort(t) {
     return this.di.canvasController.markPort(
       t.id,
@@ -1313,7 +1234,7 @@ class ft {
     return this.di.canvasController.unmarkPort(t), this;
   }
   addEdge(t) {
-    const r = t.options !== void 0 ? Y(t.options) : this.edgeControllerFactory;
+    const r = t.options !== void 0 ? B(t.options) : this.edgeShapeFactory;
     return this.di.canvasController.addEdge(
       t.id,
       t.from,
@@ -1335,8 +1256,12 @@ class ft {
       t.y ?? null
     ), this;
   }
-  moveToNodes(t) {
-    return this.di.canvasController.moveToNodes(t), this;
+  patchContentState(t) {
+    return this.di.canvasController.patchContentState(
+      t.scale ?? null,
+      t.x ?? null,
+      t.y ?? null
+    ), this;
   }
   clear() {
     return this.di.canvasController.clear(), this;
@@ -1351,28 +1276,30 @@ class ft {
     this.di.canvasController.destroy();
   }
 }
-class Et {
+class ft {
   constructor(t, r) {
-    h(this, "transformation");
-    h(this, "nodes", /* @__PURE__ */ new Map());
-    h(this, "grabbedNodeId", null);
-    h(this, "onNodeDrag");
-    h(this, "onBeforeNodeDrag");
-    h(this, "nodeIdGenerator", new O());
-    h(this, "element", null);
-    h(this, "onCanvasMouseUp", () => {
+    n(this, "model");
+    n(this, "transformation");
+    n(this, "maxNodePriority", 0);
+    n(this, "nodes", /* @__PURE__ */ new Map());
+    n(this, "grabbedNodeId", null);
+    n(this, "onNodeDrag");
+    n(this, "onBeforeNodeDrag");
+    n(this, "nodeIdGenerator", new V());
+    n(this, "element", null);
+    n(this, "onCanvasMouseUp", () => {
       this.setCursor(null), this.grabbedNodeId = null;
     });
-    h(this, "onCanvasMouseMove", (t) => {
+    n(this, "onCanvasMouseMove", (t) => {
       this.grabbedNodeId !== null && (t.stopPropagation(), this.dragNode(this.grabbedNodeId, t.movementX, t.movementY));
     });
-    h(this, "onCanvasTouchStart", (t) => {
+    n(this, "onCanvasTouchStart", (t) => {
       this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ];
     });
-    h(this, "onCanvasTouchMove", (t) => {
+    n(this, "onCanvasTouchMove", (t) => {
       if (this.grabbedNodeId === null || t.touches.length !== 1 || this.previousTouchCoords === null)
         return;
       t.stopImmediatePropagation();
@@ -1385,20 +1312,21 @@ class Et {
         t.touches[0].clientY
       ];
     });
-    h(this, "onCanvasTouchEnd", (t) => {
+    n(this, "onCanvasTouchEnd", (t) => {
       t.touches.length > 0 ? this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
     });
-    h(this, "previousTouchCoords", null);
-    var n, i;
-    this.canvas = t, this.transformation = this.canvas.transformation;
+    n(this, "previousTouchCoords", null);
+    n(this, "freezePriority");
+    var i, a;
+    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
     const s = () => {
     };
-    this.onNodeDrag = ((n = r == null ? void 0 : r.events) == null ? void 0 : n.onNodeDrag) ?? s;
+    this.onNodeDrag = ((i = r == null ? void 0 : r.events) == null ? void 0 : i.onNodeDrag) ?? s;
     const o = () => !0;
-    this.onBeforeNodeDrag = ((i = r == null ? void 0 : r.events) == null ? void 0 : i.onBeforeNodeDrag) ?? o;
+    this.onBeforeNodeDrag = ((a = r == null ? void 0 : r.events) == null ? void 0 : a.onBeforeNodeDrag) ?? o, this.freezePriority = (r == null ? void 0 : r.grabPriorityStrategy) === "freeze";
   }
   addNode(t) {
     let r = t.id;
@@ -1406,32 +1334,32 @@ class Et {
       do
         r = this.nodeIdGenerator.create();
       while (this.nodes.has(r));
-    this.canvas.addNode(t);
-    const s = (n) => {
+    this.canvas.addNode({ ...t, id: r }), this.updateMaxNodePriority(r);
+    const s = (i) => {
+      const a = this.model.getNode(r);
       this.onBeforeNodeDrag({
         nodeId: r,
         element: t.element,
-        x: t.x,
-        y: t.y
-      }) && (n.stopImmediatePropagation(), this.grabbedNodeId = r, this.setCursor("grab"), this.canvas.moveNodeOnTop(r));
-    }, o = (n) => {
+        x: a.x,
+        y: a.y
+      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = r, this.setCursor("grab"), this.moveNodeOnTop(r));
+    }, o = (i) => {
+      const a = this.model.getNode(r);
       this.onBeforeNodeDrag({
         nodeId: r,
         element: t.element,
-        x: t.x,
-        y: t.y
-      }) && n.touches.length === 1 && (this.grabbedNodeId = r, this.canvas.moveNodeOnTop(r));
+        x: a.x,
+        y: a.y
+      }) && i.touches.length === 1 && (this.grabbedNodeId = r, this.moveNodeOnTop(r));
     };
     return this.nodes.set(r, {
       element: t.element,
       onMouseDown: s,
-      onTouchStart: o,
-      x: t.x,
-      y: t.y
+      onTouchStart: o
     }), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", o), this;
   }
   updateNode(t, r) {
-    return this.canvas.updateNode(t, r), this;
+    return this.canvas.updateNode(t, r), this.updateMaxNodePriority(t), this;
   }
   removeNode(t) {
     const r = this.nodes.get(t);
@@ -1458,16 +1386,13 @@ class Et {
   patchViewportState(t) {
     return this.canvas.patchViewportState(t), this;
   }
-  moveToNodes(t) {
-    return this.canvas.moveToNodes(t), this;
-  }
-  moveNodeOnTop(t) {
-    return this.canvas.moveNodeOnTop(t), this;
+  patchContentState(t) {
+    return this.canvas.patchContentState(t), this;
   }
   clear() {
     return this.canvas.clear(), this.nodes.forEach((t) => {
       t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
-    }), this.nodes.clear(), this;
+    }), this.nodes.clear(), this.maxNodePriority = 0, this;
   }
   attach(t) {
     return this.detach(), this.element = t, this.canvas.attach(this.element), this.element.addEventListener("mouseup", this.onCanvasMouseUp), this.element.addEventListener("mousemove", this.onCanvasMouseMove), this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.element.addEventListener("touchmove", this.onCanvasTouchMove), this.element.addEventListener("touchend", this.onCanvasTouchEnd), this.element.addEventListener("touchcancel", this.onCanvasTouchEnd), this;
@@ -1484,54 +1409,68 @@ class Et {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   dragNode(t, r, s) {
-    const o = this.nodes.get(t);
-    if (o === void 0)
+    const o = this.model.getNode(t);
+    if (o === null)
       throw new Error("failed to drag nonexisting node");
-    const [n, i] = this.transformation.getViewCoords(o.x, o.y), a = n + r, c = i + s, [l, d] = this.transformation.getAbsCoords(a, c);
-    o.x = l, o.y = d, this.canvas.updateNode(t, { x: l, y: d }), this.onNodeDrag({
+    const i = this.canvas.transformation.getContentMatrix(), a = i.scale * o.x + i.x, c = i.scale * o.y + i.y, h = a + r, d = c + s, l = this.canvas.transformation.getViewportMatrix(), u = l.scale * h + l.x, g = l.scale * d + l.y;
+    this.canvas.updateNode(t, { x: u, y: g }), this.onNodeDrag({
       nodeId: t,
       element: o.element,
       x: o.x,
       y: o.y
     });
   }
+  updateMaxNodePriority(t) {
+    const r = this.model.getNode(t).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, r);
+  }
+  moveNodeOnTop(t) {
+    if (this.freezePriority)
+      return;
+    this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
+    const r = this.maxNodePriority - 1;
+    this.model.getNodeAdjacentEdges(t).forEach((o) => {
+      this.updateEdge(o, { priority: r });
+    });
+  }
 }
-class Ct {
+class Et {
   constructor(t, r) {
-    h(this, "transformation");
-    h(this, "element", null);
-    h(this, "isMoving", !1);
-    h(this, "prevTouches", null);
-    h(this, "onTransform");
-    h(this, "onBeforeTransform");
-    h(this, "isScalable");
-    h(this, "isShiftable");
-    h(this, "minViewScale");
-    h(this, "maxViewScale");
-    h(this, "wheelSensitivity");
-    h(this, "onMouseDown", () => {
+    n(this, "model");
+    n(this, "transformation");
+    n(this, "element", null);
+    n(this, "isMoving", !1);
+    n(this, "prevTouches", null);
+    n(this, "onTransform");
+    n(this, "onBeforeTransform");
+    n(this, "isScalable");
+    n(this, "isShiftable");
+    n(this, "minViewScale");
+    n(this, "maxViewScale");
+    n(this, "wheelSensitivity");
+    n(this, "onMouseDown", () => {
       this.setCursor("grab"), this.isMoving = !0;
     });
-    h(this, "onMouseMove", (t) => {
+    n(this, "onMouseMove", (t) => {
       if (!this.isMoving || !this.isShiftable)
         return;
       const r = -t.movementX, s = -t.movementY;
       this.moveViewport(r, s);
     });
-    h(this, "onMouseUp", () => {
+    n(this, "onMouseUp", () => {
       this.setCursor(null), this.isMoving = !1;
     });
-    h(this, "onWheelScroll", (t) => {
+    n(this, "onWheelScroll", (t) => {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      const { left: r, top: s } = this.element.getBoundingClientRect(), o = t.clientX - r, n = t.clientY - s, a = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(a, o, n);
+      const { left: r, top: s } = this.element.getBoundingClientRect(), o = t.clientX - r, i = t.clientY - s, c = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
+      this.scaleViewport(c, o, i);
     });
-    h(this, "onTouchStart", (t) => {
+    n(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
     });
-    h(this, "onTouchMove", (t) => {
+    n(this, "onTouchMove", (t) => {
       if (this.prevTouches === null || this.element === null || !this.isShiftable)
         return;
       const r = this.getAverageTouch(t);
@@ -1539,25 +1478,25 @@ class Ct {
         -(r.x - this.prevTouches.x),
         -(r.y - this.prevTouches.y)
       ), r.touchesCnt === 2 && this.isScalable) {
-        const { left: s, top: o } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, i = this.prevTouches.y - o, c = 1 / (r.scale / this.prevTouches.scale);
-        this.scaleViewport(c, n, i);
+        const { left: s, top: o } = this.element.getBoundingClientRect(), i = this.prevTouches.x - s, a = this.prevTouches.y - o, h = 1 / (r.scale / this.prevTouches.scale);
+        this.scaleViewport(h, i, a);
       }
       this.prevTouches = r, t.preventDefault();
     });
-    h(this, "onTouchEnd", (t) => {
+    n(this, "onTouchEnd", (t) => {
       t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
     });
-    var c, l, d, g, u, p, w, f, m, E, v, C;
-    this.canvas = t, this.options = r, this.transformation = this.canvas.transformation;
-    const s = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.min) ?? null, o = ((g = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : g.max) ?? null;
-    this.isScalable = ((p = (u = this.options) == null ? void 0 : u.scale) == null ? void 0 : p.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((f = (w = this.options) == null ? void 0 : w.shift) == null ? void 0 : f.enabled) !== !1;
-    const n = (E = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : E.wheelSensitivity;
-    this.wheelSensitivity = n !== void 0 ? n : 1.2;
-    const i = () => {
+    var h, d, l, u, g, f, w, v, m, E, p, y;
+    this.canvas = t, this.options = r, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    const s = ((d = (h = this.options) == null ? void 0 : h.scale) == null ? void 0 : d.min) ?? null, o = ((u = (l = this.options) == null ? void 0 : l.scale) == null ? void 0 : u.max) ?? null;
+    this.isScalable = ((f = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : f.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((v = (w = this.options) == null ? void 0 : w.shift) == null ? void 0 : v.enabled) !== !1;
+    const i = (E = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : E.wheelSensitivity;
+    this.wheelSensitivity = i !== void 0 ? i : 1.2;
+    const a = () => {
     };
-    this.onTransform = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onTransform) ?? i;
-    const a = () => !0;
-    this.onBeforeTransform = ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onBeforeTransform) ?? a;
+    this.onTransform = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onTransform) ?? a;
+    const c = () => !0;
+    this.onBeforeTransform = ((y = r == null ? void 0 : r.events) == null ? void 0 : y.onBeforeTransform) ?? c;
   }
   addNode(t) {
     return this.canvas.addNode(t), this;
@@ -1589,11 +1528,8 @@ class Ct {
   patchViewportState(t) {
     return this.canvas.patchViewportState(t), this;
   }
-  moveToNodes(t) {
-    return this.canvas.moveToNodes(t), this;
-  }
-  moveNodeOnTop(t) {
-    return this.canvas.moveNodeOnTop(t), this;
+  patchContentState(t) {
+    return this.canvas.patchContentState(t), this;
   }
   clear() {
     return this.canvas.clear(), this;
@@ -1609,43 +1545,43 @@ class Ct {
   }
   getAverageTouch(t) {
     const r = [], s = t.touches.length;
-    for (let c = 0; c < s; c++)
-      r.push([t.touches[c].clientX, t.touches[c].clientY]);
+    for (let h = 0; h < s; h++)
+      r.push([t.touches[h].clientX, t.touches[h].clientY]);
     const o = r.reduce(
-      (c, l) => [c[0] + l[0], c[1] + l[1]],
+      (h, d) => [h[0] + d[0], h[1] + d[1]],
       [0, 0]
-    ), n = [o[0] / s, o[1] / s], a = r.map((c) => [c[0] - n[0], c[1] - n[1]]).reduce(
-      (c, l) => c + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
+    ), i = [o[0] / s, o[1] / s], c = r.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: n[0], y: n[1], scale: a / s, touchesCnt: s };
+    return { x: i[0], y: i[1], scale: c / s, touchesCnt: s };
   }
   setCursor(t) {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   moveViewport(t, r) {
-    const [s, o] = this.transformation.getAbsCoords(0, 0), n = this.canvas.transformation.getAbsScale(), i = {
-      scale: n,
-      x: s + n * t,
-      y: o + n * r
+    const s = this.transformation.getViewportMatrix(), o = {
+      scale: s.scale,
+      x: s.x + s.scale * t,
+      y: s.y + s.scale * r
     };
-    this.onBeforeTransform({ ...i }) && (this.canvas.patchViewportState(i), this.onTransform(i));
+    this.onBeforeTransform({ ...o }) && (this.canvas.patchViewportState(o), this.onTransform(o));
   }
   scaleViewport(t, r, s) {
-    const [o, n] = this.canvas.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale(), a = i * t, c = i * (1 - t) * r + o, l = i * (1 - t) * s + n;
-    if (this.maxViewScale !== null && a > this.maxViewScale && a > i || this.minViewScale !== null && a < this.minViewScale && a < i)
+    const o = this.canvas.transformation.getViewportMatrix(), i = o.scale * t, a = o.scale * (1 - t) * r + o.x, c = o.scale * (1 - t) * s + o.y;
+    if (this.maxViewScale !== null && i > this.maxViewScale && i > o.scale || this.minViewScale !== null && i < this.minViewScale && i < o.scale)
       return;
-    const d = { scale: a, x: c, y: l };
-    this.onBeforeTransform({ ...d }) && (this.canvas.patchViewportState(d), this.onTransform(d));
+    const h = { scale: i, x: a, y: c };
+    this.onBeforeTransform({ ...h }) && (this.canvas.patchViewportState(h), this.onTransform(h));
   }
 }
-class At {
+class Ct {
   constructor() {
-    h(this, "coreOptions");
-    h(this, "dragOptions");
-    h(this, "transformOptions");
-    h(this, "isDraggable", !1);
-    h(this, "isTransformable", !1);
+    n(this, "coreOptions");
+    n(this, "dragOptions");
+    n(this, "transformOptions");
+    n(this, "isDraggable", !1);
+    n(this, "isTransformable", !1);
   }
   setOptions(t) {
     return this.coreOptions = t, this;
@@ -1657,25 +1593,25 @@ class At {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
-    let t = new ft(this.coreOptions);
-    return this.isDraggable && (t = new Et(t, this.dragOptions)), this.isTransformable && (t = new Ct(t, this.transformOptions)), t;
+    let t = new vt(this.coreOptions);
+    return this.isDraggable && (t = new ft(t, this.dragOptions)), this.isTransformable && (t = new Et(t, this.transformOptions)), t;
   }
 }
 export {
-  q as BezierEdgeController,
-  ft as CanvasCore,
-  rt as CycleCircleEdgeController,
-  W as CycleSquareEdgeController,
-  k as DetourStraightEdgeController,
-  $ as EdgeType,
-  tt as HorizontalEdgeController,
-  At as HtmlGraphBuilder,
-  I as StraightEdgeController,
-  Et as UserDraggableNodesCanvas,
-  Ct as UserTransformableCanvas,
-  et as VerticalEdgeController,
-  ot as createBezierEdgeControllerFactory,
-  nt as createHorizontalEdgeControllerFactory,
-  it as createStraightEdgeControllerFactory,
-  ht as createVerticalEdgeControllerFactory
+  I as BezierEdgeShape,
+  vt as CanvasCore,
+  st as CycleCircleEdgeShape,
+  k as CycleSquareEdgeShape,
+  R as DetourStraightEdgeShape,
+  x as EdgeType,
+  et as HorizontalEdgeShape,
+  Ct as HtmlGraphBuilder,
+  tt as StraightEdgeShape,
+  ft as UserDraggableNodesCanvas,
+  Et as UserTransformableCanvas,
+  rt as VerticalEdgeShape,
+  it as createBezierEdgeShapeFactory,
+  at as createHorizontalEdgeShapeFactory,
+  nt as createStraightEdgeShareFactory,
+  ht as createVerticalEdgeShapeFactory
 };