@html-graph/html-graph 0.0.51 → 0.0.53

package/dist/main.js

@@ -1,68 +1,34 @@
-var W = Object.defineProperty;
-var j = (r, t, e) => t in r ? W(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var n = (r, t, e) => j(r, typeof t != "symbol" ? t + "" : t, e);
-class R {
-  constructor(t, e, s, o, i) {
-    n(this, "canvasWrapper", null);
-    n(this, "host");
-    n(this, "nodesContainer");
-    n(this, "edgesContainer");
-    n(this, "canvas");
-    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());
-    n(this, "currentZIndex", 0);
-    n(this, "layers", {
-      "edges-on-top": {
-        create: () => {
-          this.host.appendChild(this.nodesContainer), this.host.appendChild(this.edgesContainer);
-        },
-        update: (t, e, s) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
-        },
-        moveOnTop: (t) => {
-          this.currentZIndex += 1;
-          const e = this.nodeIdToWrapperElementMap.get(t);
-          e.style.zIndex = `${this.currentZIndex}`;
-        }
-      },
-      "edges-follow-node": {
-        create: () => {
-          this.host.appendChild(this.nodesContainer), this.edgesContainer = this.nodesContainer;
-        },
-        update: (t, e, s) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
-        },
-        moveOnTop: (t) => {
-          const e = this.nodeIdToWrapperElementMap.get(t);
-          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentEdges(t).forEach((o) => {
-            this.edgeIdToElementMap.get(o).style.zIndex = `${this.currentZIndex - 1}`;
-          });
-        }
-      },
-      "nodes-on-top": {
-        create: () => {
-          this.host.appendChild(this.edgesContainer), this.host.appendChild(this.nodesContainer);
-        },
-        update: (t, e, s) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
-        },
-        moveOnTop: (t) => {
-          this.currentZIndex += 1;
-          const e = this.nodeIdToWrapperElementMap.get(t);
-          e.style.zIndex = `${this.currentZIndex}`;
-        }
-      }
-    });
-    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = s, this.layersMode = o, this.backgroundDrawingFn = i, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.edgesContainer = this.createEdgesContainer();
-    const h = this.canvas.getContext("2d");
-    if (h === null)
+var B = Object.defineProperty;
+var G = (r, t, e) => t in r ? B(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var h = (r, t, e) => G(r, typeof t != "symbol" ? t + "" : t, e);
+const j = () => {
+  const r = document.createElement("div");
+  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
+}, H = () => {
+  const r = document.createElement("canvas");
+  return r.style.position = "absolute", r.style.inset = "0", r;
+}, U = () => {
+  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;
+};
+class _ {
+  constructor(t, e, s, o) {
+    h(this, "canvasWrapper", null);
+    h(this, "host", j());
+    h(this, "canvas", H());
+    h(this, "container", U());
+    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());
+    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = s, this.backgroundDrawingFn = o;
+    const n = this.canvas.getContext("2d");
+    if (n === null)
       throw new Error("unable to get canvas context");
-    this.canvasCtx = h, this.host.appendChild(this.canvas), this.layers[this.layersMode].create(), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
+    this.canvasCtx = n, 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) => {
@@ -78,38 +44,43 @@ class R {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   destroy() {
-    this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.edgesContainer), this.host.removeChild(this.nodesContainer), this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
+    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, e] = this.viewportTransformer.getViewCoords(0, 0), s = this.viewportTransformer.getViewScale();
-    this.layers[this.layersMode].update(s, t, e);
+    this.container.style.transform = `matrix(${s}, 0, 0, ${s}, ${t}, ${e})`;
   }
   attachNode(t) {
     const e = this.graphStore.getNode(t), s = document.createElement("div");
-    s.appendChild(e.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, s.style.visibility = "hidden", this.nodesContainer.appendChild(s), this.nodeElementToIdMap.set(e.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t, e.x, e.y), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
+    s.appendChild(e.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.visibility = "hidden", this.container.appendChild(s), this.nodeElementToIdMap.set(e.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 e = this.graphStore.getNode(t);
-    this.nodesResizeObserver.unobserve(e.element), this.nodesContainer.removeChild(e.element);
+    this.nodesResizeObserver.unobserve(e.element);
     const s = this.nodeIdToWrapperElementMap.get(t);
-    s.removeChild(e.element), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
+    s.removeChild(e.element), this.container.removeChild(s), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
   }
   attachEdge(t) {
-    const s = this.graphStore.getEdge(t).controller.svg;
-    s.style.transformOrigin = "50% 50%", s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.edgesContainer.appendChild(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 e = this.edgeIdToElementMap.get(t);
-    this.edgeIdToElementMap.delete(t), this.edgesContainer.removeChild(e);
+    this.edgeIdToElementMap.delete(t), this.container.removeChild(e);
   }
-  moveNodeOnTop(t) {
-    this.layers[this.layersMode].moveOnTop(t);
+  updateNodePriority(t) {
+    const e = this.graphStore.getNode(t), s = this.nodeIdToWrapperElementMap.get(t);
+    s.style.zIndex = `${e.priority}`;
+  }
+  updateEdgePriority(t) {
+    const e = this.graphStore.getEdge(t);
+    this.edgeIdToElementMap.get(t).style.zIndex = `${e.priority}`;
   }
   updateNodeCoordinates(t) {
-    const e = this.graphStore.getNode(t), s = this.graphStore.getNodeAdjacentEdges(t);
-    this.updateNodeCoords(t, e.x, e.y), s.forEach((o) => {
-      this.updateEdgeCoords(o);
+    const e = this.graphStore.getNodeAdjacentEdges(t);
+    this.updateNodeCoords(t), e.forEach((s) => {
+      this.updateEdgeCoords(s);
     });
   }
   updatePortEdges(t) {
@@ -121,22 +92,6 @@ class R {
     const t = this.host.getBoundingClientRect();
     return [t.width, t.height];
   }
-  createHost() {
-    const t = document.createElement("div");
-    return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
-  }
-  createCanvas() {
-    const t = document.createElement("canvas");
-    return t.style.position = "absolute", t.style.inset = "0", t;
-  }
-  createNodesContainer() {
-    const t = document.createElement("div");
-    return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
-  }
-  createEdgesContainer() {
-    const t = document.createElement("div");
-    return t.style.position = "absolute", t.style.pointerEvents = "none", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
-  }
   createHostResizeObserver() {
     return new ResizeObserver(() => {
       this.updateCanvasDimensions(), this.applyTransform();
@@ -145,9 +100,9 @@ class R {
   createNodesResizeObserver() {
     return new ResizeObserver((t) => {
       t.forEach((e) => {
-        const s = e.target, o = this.nodeWrapperElementToIdMap.get(s), i = this.graphStore.getNode(o);
-        this.updateNodeCoords(o, i.x, i.y), this.graphStore.getNodeAdjacentEdges(o).forEach((a) => {
-          this.updateEdgeCoords(a);
+        const s = e.target, o = this.nodeWrapperElementToIdMap.get(s);
+        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((i) => {
+          this.updateEdgeCoords(i);
         });
       });
     });
@@ -156,30 +111,30 @@ class R {
     const { width: t, height: e } = this.host.getBoundingClientRect();
     this.canvas.width = t, this.canvas.height = e;
   }
-  updateNodeCoords(t, e, s) {
-    const o = this.nodeIdToWrapperElementMap.get(t), { width: i, height: h } = o.getBoundingClientRect(), a = this.viewportTransformer.getAbsScale(), c = this.graphStore.getNode(t), [l, d] = c.centerFn(i, h);
-    o.style.transform = `matrix(1, 0, 0, 1, ${e - a * l}, ${s - a * d})`;
+  updateNodeCoords(t) {
+    const e = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = e.getBoundingClientRect(), n = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [a, c] = i.centerFn(s, o);
+    e.style.transform = `matrix(1, 0, 0, 1, ${i.x - n * a}, ${i.y - n * c})`;
   }
   updateEdgeCoords(t) {
-    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), o = this.graphStore.getPort(e.to), i = s.element.getBoundingClientRect(), h = o.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
+    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), o = this.graphStore.getPort(e.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
-    ), [d, u] = this.viewportTransformer.getAbsCoords(
-      h.left - a.left,
-      h.top - a.top
-    ), g = this.viewportTransformer.getAbsScale(), [w, m] = s.centerFn(
-      i.width * g,
-      i.height * g
-    ), [f, p] = o.centerFn(
-      h.width * g,
-      h.height * g
-    ), C = w + c, v = m + l, E = f + d, A = p + u, y = Math.min(C, E), x = Math.min(v, A), P = Math.abs(E - C), M = Math.abs(A - v);
-    e.controller.update(y, x, P, M, s, o);
+    ), 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, y = f + d, C = m + g, S = Math.min(E, y), $ = Math.min(v, C), L = Math.abs(y - E), M = Math.abs(C - v);
+    e.shape.update(S, $, L, M, s, o);
   }
 }
-class B {
+class J {
   constructor() {
-    n(this, "state", {
+    h(this, "state", {
       scale: 1,
       x: 0,
       y: 0
@@ -211,7 +166,7 @@ class B {
     };
   }
 }
-class Y {
+class K {
   constructor(t) {
     this.transformer = t;
   }
@@ -244,84 +199,64 @@ class Y {
     return this.transformer.getAbsScale();
   }
 }
-class X {
+class Q {
   constructor() {
-    n(this, "nodes", /* @__PURE__ */ Object.create(null));
-    n(this, "ports", /* @__PURE__ */ Object.create(null));
-    n(this, "nodePorts", /* @__PURE__ */ Object.create(null));
-    n(this, "portNodeId", /* @__PURE__ */ Object.create(null));
-    n(this, "edges", /* @__PURE__ */ Object.create(null));
-    n(this, "incommingEdges", /* @__PURE__ */ Object.create(null));
-    n(this, "outcommingEdges", /* @__PURE__ */ Object.create(null));
-    n(this, "cycleEdges", /* @__PURE__ */ Object.create(null));
-  }
-  addNode(t, e, s, o, i) {
-    this.nodes[t] = { element: e, x: s, y: o, centerFn: i }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
-  }
-  hasNode(t) {
-    return this.nodes[t] !== void 0;
+    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, e, s, o, n, i) {
+    this.nodes.set(t, { element: e, x: s, y: o, centerFn: n, priority: i }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
   }
   getNode(t) {
-    return this.nodes[t];
-  }
-  updateNodeCoords(t, e, s) {
-    this.nodes[t].x = e, this.nodes[t].y = s;
-  }
-  updateEdgeController(t, e) {
-    this.edges[t].controller = e;
+    return this.nodes.get(t);
   }
   removeNode(t) {
     this.getNodeAdjacentEdges(t).forEach((o) => {
       this.removeEdge(o);
-    }), delete this.nodes[t];
-    const s = this.nodePorts[t];
-    Object.keys(s).forEach((o) => {
-      delete this.portNodeId[o];
-    }), delete this.nodePorts[t];
+    }), this.nodes.delete(t), this.nodePorts.get(t).forEach((o, n) => {
+      this.portNodeId.delete(n);
+    }), this.nodePorts.delete(t);
   }
-  addPort(t, e, s, o, i) {
-    this.ports[t] = { element: e, centerFn: o, direction: i }, this.cycleEdges[t] = {}, this.incommingEdges[t] = {}, this.outcommingEdges[t] = {}, this.portNodeId[t] = s;
-    const h = this.nodePorts[s];
-    h !== void 0 && (h[t] = e);
+  addPort(t, e, s, o, n) {
+    this.ports.set(t, { element: e, 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, e);
   }
   getPort(t) {
-    return this.ports[t];
+    return this.ports.get(t);
   }
   getPortNode(t) {
-    return this.portNodeId[t];
-  }
-  hasPort(t) {
-    return this.portNodeId[t] !== void 0;
+    return this.portNodeId.get(t);
   }
   removePort(t) {
-    Object.keys(this.cycleEdges[t]).forEach((o) => {
-      this.removeEdge(o);
-    }), delete this.cycleEdges[t], Object.keys(this.incommingEdges[t]).forEach((o) => {
-      this.removeEdge(o);
-    }), delete this.incommingEdges[t], Object.keys(this.outcommingEdges[t]).forEach((o) => {
-      this.removeEdge(o);
-    }), delete this.outcommingEdges[t];
-    const e = this.portNodeId[t];
-    delete this.portNodeId[t];
-    const s = this.nodePorts[e];
-    delete s[t], delete this.ports[t];
-  }
-  addEdge(t, e, s, o) {
-    this.edges[t] = {
+    this.cycleEdges.get(t).forEach((s) => {
+      this.removeEdge(s);
+    }), this.cycleEdges.delete(t), this.incommingEdges.get(t).forEach((s) => {
+      this.removeEdge(s);
+    }), this.incommingEdges.delete(t), this.outcommingEdges.get(t).forEach((s) => {
+      this.removeEdge(s);
+    }), this.outcommingEdges.get(t);
+    const e = this.portNodeId.get(t);
+    this.portNodeId.delete(t), this.nodePorts.get(e).delete(t), this.ports.delete(t);
+  }
+  addEdge(t, e, s, o, n) {
+    this.edges.set(t, {
       from: e,
       to: s,
-      controller: o
-    }, e !== s ? (this.outcommingEdges[e][t] = !0, this.incommingEdges[s][t] = !0) : this.cycleEdges[e][t] = !0;
+      shape: o,
+      priority: n
+    }), e !== s ? (this.outcommingEdges.get(e).add(t), this.incommingEdges.get(s).add(t)) : this.cycleEdges.get(e).add(t);
   }
   getEdge(t) {
-    return this.edges[t];
-  }
-  hasEdge(t) {
-    return this.edges[t] !== void 0;
+    return this.edges.get(t);
   }
   removeEdge(t) {
-    const e = this.edges[t], s = e.from, o = e.to;
-    delete this.cycleEdges[s][t], delete this.cycleEdges[o][t], delete this.incommingEdges[s][t], delete this.incommingEdges[o][t], delete this.outcommingEdges[s][t], delete this.outcommingEdges[o][t], delete this.edges[t];
+    const e = this.edges.get(t), s = e.from, o = e.to;
+    this.cycleEdges.get(s).delete(t), this.cycleEdges.get(o).delete(t), this.incommingEdges.get(s).delete(t), this.incommingEdges.get(o).delete(t), this.outcommingEdges.get(s).delete(t), this.outcommingEdges.get(o).delete(t), this.edges.delete(t);
   }
   getPortAdjacentEdges(t) {
     return [
@@ -338,61 +273,118 @@ class X {
     ];
   }
   clear() {
-    this.nodes = /* @__PURE__ */ Object.create(null), this.ports = /* @__PURE__ */ Object.create(null), this.nodePorts = /* @__PURE__ */ Object.create(null), this.portNodeId = /* @__PURE__ */ Object.create(null), this.edges = /* @__PURE__ */ Object.create(null), this.incommingEdges = /* @__PURE__ */ Object.create(null), this.outcommingEdges = /* @__PURE__ */ Object.create(null), this.cycleEdges = /* @__PURE__ */ Object.create(null);
+    this.nodes.clear(), this.ports.clear(), this.nodePorts.clear(), this.portNodeId.clear(), this.edges.clear(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear();
   }
   getPortIncomingEdges(t) {
-    return Object.keys(this.incommingEdges[t] ?? {});
+    return Array.from(this.incommingEdges.get(t));
   }
   getPortOutcomingEdges(t) {
-    return Object.keys(this.outcommingEdges[t] ?? {});
+    return Array.from(this.outcommingEdges.get(t));
   }
   getPortCycleEdges(t) {
-    return Object.keys(this.cycleEdges[t] ?? {});
+    return Array.from(this.cycleEdges.get(t));
   }
   getNodeIncomingEdges(t) {
-    const e = Object.keys(this.nodePorts[t]);
+    const e = Array.from(this.nodePorts.get(t).keys());
     let s = [];
     return e.forEach((o) => {
       s = [...s, ...this.getPortIncomingEdges(o)];
     }), s;
   }
   getNodeOutcomingEdges(t) {
-    const e = Object.keys(this.nodePorts[t]);
+    const e = Array.from(this.nodePorts.get(t).keys());
     let s = [];
     return e.forEach((o) => {
       s = [...s, ...this.getPortOutcomingEdges(o)];
     }), s;
   }
   getNodeCycleEdges(t) {
-    const e = Object.keys(this.nodePorts[t]);
+    const e = Array.from(this.nodePorts.get(t).keys());
     let s = [];
     return e.forEach((o) => {
       s = [...s, ...this.getPortCycleEdges(o)];
     }), s;
   }
 }
-const $ = (r) => {
-  const { top: t, left: e, width: s, height: o } = r.element.getBoundingClientRect(), i = r.centerFn(s, o);
-  return [e + i[0], t + i[1]];
-}, b = (r, t, e) => [
+class Z {
+  constructor(t) {
+    this.graphStore = t;
+  }
+  getNode(t) {
+    const e = this.graphStore.getNode(t);
+    if (e !== void 0)
+      return {
+        element: e.element,
+        x: e.x,
+        y: e.y,
+        centerFn: e.centerFn,
+        priority: e.priority
+      };
+  }
+  getPort(t) {
+    const e = this.graphStore.getPort(t);
+    if (e !== void 0)
+      return {
+        element: e.element,
+        centerFn: e.centerFn,
+        direction: e.direction
+      };
+  }
+  getPortNode(t) {
+    return this.graphStore.getPortNode(t);
+  }
+  getEdge(t) {
+    const e = this.graphStore.getEdge(t);
+    if (e !== void 0)
+      return { from: e.from, to: e.to, priority: e.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 T = (r) => {
+  const { top: t, left: e, width: s, height: o } = r.element.getBoundingClientRect(), n = r.centerFn(s, o);
+  return [e + n[0], t + n[1]];
+}, A = (r, t, e) => [
   t[0] * r[0] - t[1] * r[1] + ((1 - t[0]) * e[0] + t[1] * e[1]),
   t[1] * r[0] + t[0] * r[1] + ((1 - t[0]) * e[1] - t[1] * e[0])
-], N = (r, t, e) => [t * Math.cos(r), e * Math.sin(r)], S = (r, t, e, s, o) => {
-  const h = [
+], b = (r, t, e) => [t * Math.cos(r), e * Math.sin(r)], N = (r, t, e, s, o) => {
+  const i = [
     [0, 0],
     [s, o],
     [s, -o]
-  ].map((d) => b(d, r, [0, 0])).map((d) => [d[0] + t, d[1] + e]), a = `M ${h[0][0]} ${h[0][1]}`, c = `L ${h[1][0]} ${h[1][1]}`, l = `L ${h[2][0]} ${h[2][1]}`;
+  ].map((d) => A(d, r, [0, 0])).map((d) => [d[0] + t, d[1] + e]), 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}`;
 };
-class z {
-  constructor(t, e, s, o, i, h, a) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.color = t, this.width = e, 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%", h && (this.sourceArrow = document.createElementNS(
+class q {
+  constructor(t, e, 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 = e, 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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
@@ -400,70 +392,70 @@ class z {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, s, o, i, h) {
+  update(t, e, s, o, n, i) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = $(i), c = $(h), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
+    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, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const u = N(i.direction, l, d), g = N(h.direction, l, d), w = b([this.arrowLength, 0], u, [0, 0]), m = b([s - this.arrowLength, o], g, [
+    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = A([this.arrowLength, 0], g, [0, 0]), w = A([s - this.arrowLength, o], u, [
       s,
       o
     ]), f = [
-      w[0] + u[0] * this.curvature,
-      w[1] + u[1] * this.curvature
-    ], p = [
-      m[0] - g[0] * this.curvature,
-      m[1] - g[1] * this.curvature
-    ], C = `M ${w[0]} ${w[1]} C ${f[0]} ${f[1]}, ${p[0]} ${p[1]}, ${m[0]} ${m[1]}`, v = this.sourceArrow ? "" : `M 0 0 L ${w[0]} ${w[1]} `, E = this.targetArrow ? "" : ` M ${m[0]} ${m[1]} L ${s} ${o}`, A = `${v}${C}${E}`;
-    if (this.line.setAttribute("d", A), this.sourceArrow) {
-      const y = S(
-        u,
+      p[0] + g[0] * this.curvature,
+      p[1] + g[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]} `, y = this.targetArrow ? "" : ` M ${w[0]} ${w[1]} L ${s} ${o}`, C = `${v}${E}${y}`;
+    if (this.line.setAttribute("d", C), this.sourceArrow) {
+      const S = N(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", S);
     }
     if (this.targetArrow) {
-      const y = S(
-        g,
+      const S = N(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", S);
     }
   }
 }
-const V = (r, t) => {
+const F = (r, t) => {
   const e = [];
   if (r.length > 0 && e.push(`M ${r[0][0]} ${r[0][1]}`), r.length === 2 && e.push(`L ${r[1][0]} ${r[1][1]}`), r.length > 2) {
     const s = r.length - 1;
-    let o = 0, i = 0, h = 0;
+    let o = 0, n = 0, i = 0;
     r.forEach((a, c) => {
-      let l = 0, d = 0, u = 0;
-      const g = c > 0, w = c < s, m = g && w;
-      if (g && (l = -o, d = -i, u = h), w) {
-        const y = r[c + 1];
-        o = y[0] - a[0], i = y[1] - a[1], h = Math.sqrt(o * o + i * i);
+      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 S = r[c + 1];
+        o = S[0] - a[0], n = S[1] - a[1], i = Math.sqrt(o * o + n * n);
       }
-      const p = Math.min((m ? t : 0) / h, c < s - 1 ? 0.5 : 1), C = m ? [a[0] + o * p, a[1] + i * p] : a, E = Math.min((m ? t : 0) / u, c > 1 ? 0.5 : 1), A = m ? [a[0] + l * E, a[1] + d * E] : a;
-      c > 0 && e.push(`L ${A[0]} ${A[1]}`), m && e.push(
-        `C ${a[0]} ${a[1]} ${a[0]} ${a[1]} ${C[0]} ${C[1]}`
+      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, y = Math.min((w ? t : 0) / g, c > 1 ? 0.5 : 1), C = w ? [a[0] + l * y, a[1] + d * y] : a;
+      c > 0 && e.push(`L ${C[0]} ${C[1]}`), w && e.push(
+        `C ${a[0]} ${a[1]} ${a[0]} ${a[1]} ${E[0]} ${E[1]}`
       );
     });
   }
   return e.join(" ");
 };
-class G {
-  constructor(t, e, s, o, i, h, a, c) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, 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%", h && (this.sourceArrow = document.createElementNS(
+class I {
+  constructor(t, e, 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 = e, 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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
@@ -471,65 +463,167 @@ class G {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, s, o, i, h) {
+  update(t, e, s, o, n, i) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = $(i), c = $(h), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
+    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, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const u = N(i.direction, l, d), g = N(h.direction, l, d), w = this.sourceArrow ? b([this.arrowLength, 0], u, [0, 0]) : [0, 0], m = this.targetArrow ? b([s - this.arrowLength, o], g, [
+    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength + this.arrowOffset, p = b([f, 0], u, [0, 0]), C = b([s - f, o], g, [
+    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = A([s - f, o], u, [
       s,
       o
-    ]), v = V([w, p, C, m], this.roundness);
+    ]), v = F([p, m, E, w], this.roundness);
     if (this.line.setAttribute("d", v), this.sourceArrow) {
-      const E = S(
+      const y = N(
+        g,
+        0,
+        0,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", y);
+    }
+    if (this.targetArrow) {
+      const y = N(
         u,
+        s,
+        o,
+        -this.arrowLength,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", y);
+    }
+  }
+}
+class tt {
+  constructor(t, e, 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 = e, 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(
+      "http://www.w3.org/2000/svg",
+      "path"
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (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, e, s, o, n, i) {
+    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, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
+    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
+      s,
+      o
+    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = A([s - f, o], u, [
+      s,
+      o
+    ]), v = Math.max((m[0] + E[0]) / 2, f), y = o / 2, C = [l > 0 ? v : -f, m[1]], S = [C[0], y], $ = [l > 0 ? s - v : s + f, E[1]], L = [$[0], y], M = F(
+      [p, m, C, S, L, $, E, w],
+      this.roundness
+    );
+    if (this.line.setAttribute("d", M), this.sourceArrow) {
+      const x = N(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", E);
+      this.sourceArrow.setAttribute("d", x);
     }
     if (this.targetArrow) {
-      const E = S(
+      const x = N(
+        u,
+        s,
+        o,
+        -this.arrowLength,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", x);
+    }
+  }
+}
+class et {
+  constructor(t, e, 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 = e, 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(
+      "http://www.w3.org/2000/svg",
+      "path"
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (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, e, s, o, n, i) {
+    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, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
+    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
+      s,
+      o
+    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = A([s - f, o], u, [
+      s,
+      o
+    ]), v = Math.max((m[1] + E[1]) / 2, f), y = s / 2, C = [m[0], d > 0 ? v : -f], S = [y, C[1]], $ = [E[0], d > 0 ? o - v : o + f], L = [y, $[1]], M = F(
+      [p, m, C, S, L, $, E, w],
+      this.roundness
+    );
+    if (this.line.setAttribute("d", M), this.sourceArrow) {
+      const x = N(
         g,
+        0,
+        0,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", x);
+    }
+    if (this.targetArrow) {
+      const x = N(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", E);
+      this.targetArrow.setAttribute("d", x);
     }
   }
 }
-class Z {
-  constructor(t, e, s, o, i, h, a) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "arrow", null);
-    this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.radius = h, 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%", i && (this.arrow = document.createElementNS(
+class rt {
+  constructor(t, e, s, o, n, i, a) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "arrow", null);
+    this.color = t, this.width = e, 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(
       "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, e, s, o, i) {
+  update(t, e, s, o, n) {
     this.svg.style.transform = `translate(${t}px, ${e}px)`;
-    const h = N(i.direction, 1, 1), a = this.smallRadius, c = this.radius, l = Math.sqrt(a * a + c * c), d = a + c, u = this.arrowLength + l * (1 - c / d), g = a * c / d, m = [
+    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 = [
       [this.arrowLength, 0],
-      [u, g],
-      [u, -g]
-    ].map((v) => b(v, h, [0, 0])), f = [
-      `M ${m[0][0]} ${m[0][1]}`,
-      `A ${a} ${a} 0 0 1 ${m[1][0]} ${m[1][1]}`,
-      `A ${c} ${c} 0 1 0 ${m[2][0]} ${m[2][1]}`,
-      `A ${a} ${a} 0 0 1 ${m[0][0]} ${m[0][1]}`
-    ].join(" "), p = `M 0 0 L ${m[0][0]} ${m[0][1]} `, C = `${this.arrow !== null ? "" : p}${f}`;
-    if (this.line.setAttribute("d", C), this.arrow) {
-      const v = S(
-        h,
+      [g, u],
+      [g, -u]
+    ].map((v) => A(v, i, [0, 0])), f = [
+      `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}`;
+    if (this.line.setAttribute("d", E), this.arrow) {
+      const v = N(
+        i,
         0,
         0,
         this.arrowLength,
@@ -539,38 +633,38 @@ class Z {
     }
   }
 }
-class U {
-  constructor(t, e, s, o, i, h, a, c) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "arrow", null);
-    n(this, "roundness");
-    n(this, "linePoints");
-    this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.side = h, 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%", i && (this.arrow = document.createElementNS(
+class O {
+  constructor(t, e, 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 = e, 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(
       "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, u = this.arrowLength + l, g = this.roundness, w = u + 2 * d;
-    console.log(g), this.linePoints = [
+    const l = this.minPortOffset, d = this.side, g = this.arrowLength + l, u = this.roundness, p = g + 2 * d;
+    console.log(u), this.linePoints = [
       [this.arrowLength, 0],
-      [u, 0],
-      [u, this.side],
-      [w, this.side],
-      [w, -this.side],
-      [u, -this.side],
-      [u, 0],
+      [g, 0],
+      [g, this.side],
+      [p, this.side],
+      [p, -this.side],
+      [g, -this.side],
+      [g, 0],
       [this.arrowLength, 0]
     ];
   }
-  update(t, e, s, o, i) {
+  update(t, e, s, o, n) {
     this.svg.style.transform = `translate(${t}px, ${e}px)`;
-    const h = N(i.direction, 1, 1), a = this.linePoints.map(
-      (d) => b(d, h, [0, 0])
-    ), c = `M 0 0 L ${a[0][0]} ${a[0][1]} `, l = `${this.arrow ? "" : c}${V(a, this.roundness)}`;
+    const i = b(n.direction, 1, 1), a = this.linePoints.map(
+      (d) => A(d, i, [0, 0])
+    ), c = `M 0 0 L ${a[0][0]} ${a[0][1]} `, l = `${this.arrow ? "" : c}${F(a, this.roundness)}`;
     if (this.line.setAttribute("d", l), this.arrow) {
-      const d = S(
-        h,
+      const d = N(
+        i,
         0,
         0,
         this.arrowLength,
@@ -580,16 +674,16 @@ class U {
     }
   }
 }
-class H {
-  constructor(t, e, s, o, i, h, a, c, l, 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 = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, 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%", h && (this.sourceArrow = document.createElementNS(
+class k {
+  constructor(t, e, 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 = e, 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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
@@ -597,53 +691,53 @@ class H {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, s, o, i, h) {
+  update(t, e, s, o, n, i) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = $(i), c = $(h), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
+    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, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const u = N(i.direction, l, d), g = N(h.direction, l, d), w = this.sourceArrow ? b([this.arrowLength, 0], u, [0, 0]) : [0, 0], m = this.targetArrow ? b([s - this.arrowLength, o], g, [
+    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength + this.arrowOffset, p = b([f, 0], u, [0, 0]), C = [p[0] + this.detourX, p[1] + this.detourY], v = b([s - f, o], g, [
+    ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = A([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = A([s - f, o], u, [
       s,
       o
-    ]), E = [v[0] + this.detourX, v[1] + this.detourY], A = V(
-      [w, p, C, E, v, m],
+    ]), y = [v[0] + this.detourX, v[1] + this.detourY], C = F(
+      [p, m, E, y, v, w],
       this.roundness
     );
-    if (this.line.setAttribute("d", A), this.sourceArrow) {
-      const y = S(
-        u,
+    if (this.line.setAttribute("d", C), this.sourceArrow) {
+      const S = N(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", S);
     }
     if (this.targetArrow) {
-      const y = S(
-        g,
+      const S = N(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", S);
     }
   }
 }
-var T = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(T || {});
-class q {
-  constructor(t, e, s, o, i, h, a, c, 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 = e, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, 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%", h && (this.sourceArrow = document.createElementNS(
+var P = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.PortCycle = "port-cycle", r.NodeCycle = "node-cycle", r))(P || {});
+class st {
+  constructor(t, e, 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 = e, 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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
@@ -651,52 +745,52 @@ class q {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, s, o, i, h) {
+  update(t, e, s, o, n, i) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const a = $(i), c = $(h), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
+    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, ${e}px)`, this.group.style.transform = `scale(${l}, ${d})`;
-    const u = N(i.direction, l, d), g = N(h.direction, l, d), w = this.sourceArrow ? b([this.arrowLength, 0], u, [0, 0]) : [0, 0], m = this.targetArrow ? b([s - this.arrowLength, o], g, [
+    const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? A([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? A([s - this.arrowLength, o], u, [
       s,
       o
-    ]) : [s, o], f = this.arrowLength, p = b([f, 0], u, [0, 0]), C = [p[0] + this.detourX, p[1] + this.detourY], v = b([s - f, o], g, [
+    ]) : [s, o], f = this.arrowLength, m = A([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = A([s - f, o], u, [
       s,
       o
-    ]), E = [v[0] + this.detourX, v[1] + this.detourY], A = [(C[0] + E[0]) / 2, (C[1] + E[1]) / 2], y = [
-      p[0] - this.curvature * Math.cos(i.direction),
-      p[1] - this.curvature * Math.sin(i.direction)
-    ], x = [
-      v[0] + this.curvature * Math.cos(h.direction),
-      v[1] + this.curvature * Math.sin(h.direction)
-    ], P = [p[0] + this.detourX, p[1] + this.detourY], M = [v[0] + this.detourX, v[1] + this.detourY], k = [
-      `M ${w[0]} ${w[1]}`,
-      `L ${p[0]} ${p[1]}`,
-      `C ${y[0]} ${y[1]} ${P[0]} ${P[1]} ${A[0]} ${A[1]}`,
-      `C ${M[0]} ${M[1]} ${x[0]} ${x[1]} ${v[0]} ${v[1]}`,
-      `L ${m[0]} ${m[1]}`
+    ]), y = [v[0] + this.detourX, v[1] + this.detourY], C = [(E[0] + y[0]) / 2, (E[1] + y[1]) / 2], S = [
+      m[0] - this.curvature * Math.cos(n.direction),
+      m[1] - this.curvature * Math.sin(n.direction)
+    ], $ = [
+      v[0] + this.curvature * Math.cos(i.direction),
+      v[1] + this.curvature * Math.sin(i.direction)
+    ], L = [m[0] + this.detourX, m[1] + this.detourY], M = [v[0] + this.detourX, v[1] + this.detourY], x = [
+      `M ${p[0]} ${p[1]}`,
+      `L ${m[0]} ${m[1]}`,
+      `C ${S[0]} ${S[1]} ${L[0]} ${L[1]} ${C[0]} ${C[1]}`,
+      `C ${M[0]} ${M[1]} ${$[0]} ${$[1]} ${v[0]} ${v[1]}`,
+      `L ${w[0]} ${w[1]}`
     ].join(" ");
-    if (this.line.setAttribute("d", k), this.sourceArrow) {
-      const O = S(
-        u,
+    if (this.line.setAttribute("d", x), this.sourceArrow) {
+      const V = N(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", O);
+      this.sourceArrow.setAttribute("d", V);
     }
     if (this.targetArrow) {
-      const O = S(
-        g,
+      const V = N(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", O);
+      this.targetArrow.setAttribute("d", V);
     }
   }
 }
-const _ = (r) => (t) => t === T.PortCycle ? new Z(
+const ot = (r) => (t) => t === P.PortCycle ? new rt(
   r.color,
   r.width,
   r.arrowLength,
@@ -704,7 +798,7 @@ const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.hasSourceArrow || r.hasTargetArrow,
   r.cycleRadius,
   r.smallCycleRadius
-) : t === T.NodeCycle ? new q(
+) : t === P.NodeCycle ? new st(
   r.color,
   r.width,
   r.curvature,
@@ -714,7 +808,7 @@ const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.hasTargetArrow,
   r.detourDistance,
   r.detourDirection
-) : new z(
+) : new q(
   r.color,
   r.width,
   r.curvature,
@@ -722,7 +816,7 @@ const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.arrowWidth,
   r.hasSourceArrow,
   r.hasTargetArrow
-), J = (r) => (t) => t === T.PortCycle ? new U(
+), it = (r) => (t) => t === P.PortCycle ? new O(
   r.color,
   r.width,
   r.arrowLength,
@@ -731,7 +825,7 @@ const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : t === T.NodeCycle ? new H(
+) : t === P.NodeCycle ? new k(
   r.color,
   r.width,
   r.arrowLength,
@@ -742,7 +836,65 @@ const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.roundness,
   r.detourDistance,
   r.detourDirection
-) : new G(
+) : new I(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness
+), nt = (r) => (t) => t === P.PortCycle ? new O(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleSquareSide,
+  r.arrowOffset,
+  r.roundness
+) : t === P.NodeCycle ? new k(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness,
+  r.detourDistance,
+  r.detourDirection
+) : new tt(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness
+), ht = (r) => (t) => t === P.PortCycle ? new O(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleSquareSide,
+  r.arrowOffset,
+  r.roundness
+) : t === P.NodeCycle ? new k(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness,
+  r.detourDistance,
+  r.detourDirection
+) : new et(
   r.color,
   r.width,
   r.arrowLength,
@@ -752,113 +904,125 @@ const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.hasTargetArrow,
   r.roundness
 );
-class L {
+class D {
   constructor() {
-    n(this, "counter", 0);
+    h(this, "counter", 0);
   }
-  next() {
-    const t = `${this.counter}`;
+  create() {
+    const t = this.counter;
     return this.counter++, t;
   }
   reset() {
     this.counter = 0;
   }
 }
-class K {
-  constructor(t, e, s, o, i, h) {
-    n(this, "nodeIdGenerator", new L());
-    n(this, "portIdGenerator", new L());
-    n(this, "edgeIdGenerator", new L());
-    this.graphStore = t, this.htmlController = e, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = i, this.portsDirection = h;
-  }
-  moveNodeOnTop(t) {
-    if (!this.graphStore.hasNode(t))
-      throw new Error("failed to move on top nonexisting node");
-    this.htmlController.moveNodeOnTop(t);
+class at {
+  constructor(t, e, s, o, n, i, a, c) {
+    h(this, "nodeIdGenerator", new D());
+    h(this, "portIdGenerator", new D());
+    h(this, "edgeIdGenerator", new D());
+    this.graphStore = t, this.htmlController = e, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = n, this.portsDirection = i, this.nodesPriorityFn = a, this.edgesPriorityFn = c;
   }
-  addNode(t, e, s, o, i, h) {
+  addNode(t, e, s, o, n, i, a) {
     if (t === void 0)
       do
-        t = this.nodeIdGenerator.next();
-      while (this.graphStore.hasNode(t));
-    if (this.graphStore.hasNode(t))
+        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");
     this.graphStore.addNode(
       t,
       e,
       s,
       o,
-      h ?? this.nodesCenterFn
-    ), this.htmlController.attachNode(t), i !== void 0 && Object.entries(i).forEach(([a, c]) => {
-      c instanceof HTMLElement ? this.markPort(
-        a,
-        c,
+      i ?? this.nodesCenterFn,
+      a ?? this.nodesPriorityFn()
+    ), this.htmlController.attachNode(t), new Map(n ?? []).forEach((l, d) => {
+      l instanceof HTMLElement ? this.markPort(
+        d,
+        l,
         t,
         this.portsCenterFn,
         this.portsDirection
       ) : this.markPort(
-        a,
-        c.element,
+        d,
+        l.element,
         t,
-        c.centerFn ?? this.portsCenterFn,
-        c.direction ?? this.portsDirection
+        l.centerFn ?? this.portsCenterFn,
+        l.direction ?? this.portsDirection
       );
     });
   }
-  markPort(t, e, s, o, i) {
+  updateNode(t, e, s, o, n) {
+    const i = this.graphStore.getNode(t);
+    if (i === void 0)
+      throw new Error("failed to update nonexisting node");
+    i.x = e ?? 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));
+  }
+  markPort(t, e, s, o, n) {
     if (t === void 0)
       do
-        t = this.portIdGenerator.next();
-      while (this.graphStore.hasPort(t));
-    if (!this.graphStore.hasNode(s))
+        t = this.portIdGenerator.create();
+      while (this.graphStore.getPort(t) !== void 0);
+    if (this.graphStore.getNode(s) === void 0)
       throw new Error("failed to set port on nonexisting node");
-    if (this.graphStore.hasPort(t))
+    if (this.graphStore.getPort(t) !== void 0)
       throw new Error("failed to add port with existing id");
     this.graphStore.addPort(
       t,
       e,
       s,
       o ?? this.portsCenterFn,
-      i ?? 0
+      n ?? 0
     );
   }
-  updatePortEdges(t) {
-    if (!this.graphStore.hasPort(t))
+  updatePort(t, e) {
+    const s = this.graphStore.getPort(t);
+    if (s === void 0)
       throw new Error("failed to unset nonexisting port");
-    this.htmlController.updatePortEdges(t);
+    s.direction = (e == null ? void 0 : e.direction) ?? s.direction, s.centerFn = (e == null ? void 0 : e.centerFn) ?? s.centerFn, this.htmlController.updatePortEdges(t);
   }
   unmarkPort(t) {
-    if (!this.graphStore.hasPort(t))
+    if (this.graphStore.getPort(t) === void 0)
       throw new Error("failed to unset nonexisting port");
     this.graphStore.getPortAdjacentEdges(t).forEach((e) => {
       this.removeEdge(e);
     }), this.graphStore.removePort(t);
   }
-  addEdge(t, e, s, o) {
+  addEdge(t, e, s, o, n) {
     if (t === void 0)
       do
-        t = this.edgeIdGenerator.next();
-      while (this.graphStore.hasEdge(t));
-    if (!this.graphStore.hasPort(e))
+        t = this.edgeIdGenerator.create();
+      while (this.graphStore.getEdge(t) !== void 0);
+    if (this.graphStore.getPort(e) === void 0)
       throw new Error("failed to add edge from nonexisting port");
-    if (!this.graphStore.hasPort(s))
+    if (this.graphStore.getPort(s) === void 0)
       throw new Error("failed to add edge to nonexisting port");
-    let i = T.Regular;
-    const h = this.graphStore.getPortNode(e), a = this.graphStore.getPortNode(s);
-    e === s ? i = T.PortCycle : h === a && (i = T.NodeCycle), this.graphStore.addEdge(
+    if (this.graphStore.getEdge(t) !== void 0)
+      throw new Error("failed to add edge with existing id");
+    let i = P.Regular;
+    const a = this.graphStore.getPortNode(e), c = this.graphStore.getPortNode(s);
+    e === s ? i = P.PortCycle : a === c && (i = P.NodeCycle), this.graphStore.addEdge(
       t,
       e,
       s,
-      o(i)
+      o(i),
+      n ?? this.edgesPriorityFn()
     ), this.htmlController.attachEdge(t);
   }
+  updateEdge(t, e) {
+    const s = this.graphStore.getEdge(t);
+    if (s === void 0)
+      throw new Error("failed to update nonexisting edge");
+    e.controller !== void 0 && (this.htmlController.detachEdge(t), s.shape = e.controller, this.htmlController.attachEdge(t)), e.priority !== void 0 && (s.priority = e.priority, this.htmlController.updateEdgePriority(t));
+  }
   removeEdge(t) {
-    if (!this.graphStore.hasEdge(t))
+    if (this.graphStore.getEdge(t) === void 0)
       throw new Error("failed to remove nonexisting edge");
     this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
   }
   removeNode(t) {
-    if (!this.graphStore.hasNode(t))
+    if (this.graphStore.getNode(t) === void 0)
       throw new Error("failed to remove nonexisting node");
     this.htmlController.detachNode(t), this.graphStore.removeNode(t);
   }
@@ -868,24 +1032,14 @@ class K {
   moveToNodes(t) {
     if (t.length === 0)
       return;
-    const e = t.map((g) => this.graphStore.getNode(g)).filter((g) => g !== void 0);
+    const e = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
     if (e.length < t.length)
       throw new Error("failed to move to nonexisting node");
     const [s, o] = e.reduce(
-      (g, w) => [g[0] + w.x, g[1] + w.y],
+      (u, p) => [u[0] + p.x, u[1] + p.y],
       [0, 0]
-    ), i = s / e.length, h = o / e.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), d = i - l * a / 2, u = h - l * c / 2;
-    this.patchViewportState(null, d, u);
-  }
-  updateNodeCoordinates(t, e, s) {
-    if (!this.graphStore.hasNode(t))
-      throw new Error("failed to update coordinates of nonexisting node");
-    this.graphStore.updateNodeCoords(t, e, s), this.htmlController.updateNodeCoordinates(t);
-  }
-  updateEdgeController(t, e) {
-    if (!this.graphStore.hasEdge(t))
-      throw new Error("failed to update nonexisting edge");
-    this.htmlController.detachEdge(t), this.graphStore.updateEdgeController(t, e), this.htmlController.attachEdge(t);
+    ), n = s / e.length, i = o / e.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);
   }
   attach(t) {
     this.htmlController.attach(t);
@@ -900,82 +1054,106 @@ class K {
     this.htmlController.destroy();
   }
 }
-class Q {
-  constructor(t, e, s, o, i) {
-    n(this, "publicViewportTransformer");
-    n(this, "canvasController");
-    const h = new B(), a = new X();
-    this.publicViewportTransformer = new Y(
-      h
+class ct {
+  constructor(t, e, s, o, n, i) {
+    h(this, "publicViewportTransformer");
+    h(this, "publicGraphStore");
+    h(this, "canvasController");
+    const a = new J(), c = new Q();
+    this.publicGraphStore = new Z(c), this.publicViewportTransformer = new K(
+      a
     );
-    const c = new R(
+    const l = new _(
+      c,
       a,
-      h,
       this.publicViewportTransformer,
-      t,
-      e
+      t
     );
-    this.canvasController = new K(
-      a,
+    this.canvasController = new at(
       c,
-      h,
+      l,
+      a,
+      e,
       s,
       o,
+      n,
       i
     );
   }
 }
-const D = (r, t) => [
+const R = (r, t) => [
   r / 2,
   t / 2
-], I = () => () => {
-}, tt = (r, t, e, s, o, i) => {
-  r.clearRect(0, 0, r.canvas.width, r.canvas.height), r.fillStyle = i, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
-  const h = t.getViewCoords(0, 0), a = t.getViewScale(), c = s * a;
-  let l = 0, d = 0, u = c / 2;
+], lt = () => () => {
+}, dt = (r, t, e, s, o, n) => {
+  r.clearRect(0, 0, r.canvas.width, r.canvas.height), r.fillStyle = n, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
+  const i = t.getViewCoords(0, 0), a = t.getViewScale(), c = s * a;
+  let l = 0, d = 0, g = c / 2;
   do
-    u *= 2, l = r.canvas.width / u, d = r.canvas.height / u;
+    g *= 2, l = r.canvas.width / g, d = r.canvas.height / g;
   while (l * d > 1e4);
-  const g = h[0] - Math.floor(h[0] / u) * u, w = h[1] - Math.floor(h[1] / u) * u, m = o * a, f = 2 * Math.PI, p = g - u, C = w - u, v = r.canvas.width + g, E = r.canvas.height + w;
+  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 = r.canvas.width + u, y = r.canvas.height + p;
   r.fillStyle = e;
-  for (let A = p; A <= v; A += u)
-    for (let y = C; y <= E; y += u)
-      r.beginPath(), r.arc(A, y, m, 0, f), r.closePath(), r.fill();
-}, et = (r, t, e, s) => (o, i) => {
-  tt(
+  for (let C = m; C <= v; C += g)
+    for (let S = E; S <= y; S += g)
+      r.beginPath(), r.arc(C, S, w, 0, f), r.closePath(), r.fill();
+}, gt = (r, t, e, s) => (o, n) => {
+  dt(
     o,
-    i,
+    n,
     r,
     t,
     e,
     s
   );
-}, st = (r, t) => {
-  r.fillStyle = t, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
-}, rt = (r) => (t) => {
-  st(t, r);
-}, ot = (r) => {
+}, ut = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.drawingFn;
     case "dots":
-      return et(
+      return gt(
         r.dotColor ?? "#d8d8d8",
         r.dotGap ?? 25,
         r.dotRadius ?? 1.5,
         r.color ?? "#ffffff"
       );
-    case "color":
-      return rt(r.color ?? "#ffffff");
     default:
-      return I();
+      return lt();
   }
-}, F = (r) => {
+}, X = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.controllerFactory;
     case "straight":
-      return J({
+      return it({
+        color: r.color ?? "#5c5c5c",
+        width: r.width ?? 1,
+        arrowLength: r.arrowLength ?? 15,
+        arrowWidth: r.arrowWidth ?? 4,
+        arrowOffset: r.arrowOffset ?? 15,
+        hasSourceArrow: r.hasSourceArrow ?? !1,
+        hasTargetArrow: r.hasTargetArrow ?? !1,
+        cycleSquareSide: r.cycleSquareSide ?? 30,
+        roundness: r.roundness ?? 10,
+        detourDistance: r.detourDistance ?? 100,
+        detourDirection: r.detourDirection ?? -Math.PI / 2
+      });
+    case "horizontal":
+      return nt({
+        color: r.color ?? "#5c5c5c",
+        width: r.width ?? 1,
+        arrowLength: r.arrowLength ?? 15,
+        arrowWidth: r.arrowWidth ?? 4,
+        arrowOffset: r.arrowOffset ?? 15,
+        hasSourceArrow: r.hasSourceArrow ?? !1,
+        hasTargetArrow: r.hasTargetArrow ?? !1,
+        cycleSquareSide: r.cycleSquareSide ?? 30,
+        roundness: r.roundness ?? 10,
+        detourDistance: r.detourDistance ?? 100,
+        detourDirection: r.detourDirection ?? -Math.PI / 2
+      });
+    case "vertical":
+      return ht({
         color: r.color ?? "#5c5c5c",
         width: r.width ?? 1,
         arrowLength: r.arrowLength ?? 15,
@@ -989,7 +1167,7 @@ const D = (r, t) => [
         detourDirection: r.detourDirection ?? -Math.PI / 2
       });
     default:
-      return _({
+      return ot({
         color: r.color ?? "#5c5c5c",
         width: r.width ?? 1,
         curvature: r.curvature ?? 90,
@@ -1003,43 +1181,59 @@ const D = (r, t) => [
         detourDirection: r.detourDirection ?? -Math.PI / 2
       });
   }
-}, nt = (r) => {
-  var t, e, s, o;
+}, Y = () => 0, z = (r) => () => r, W = () => {
+  let r = 0;
+  return () => r++;
+}, wt = (r, t) => {
+  const e = [
+    Y,
+    Y
+  ];
+  r === "incremental" && (e[0] = W()), t === "incremental" && (e[1] = W());
+  const s = W();
+  return r === "shared-incremental" && (e[0] = s), t === "shared-incremental" && (e[1] = s), typeof r == "number" && (e[0] = z(r)), typeof t == "number" && (e[1] = z(t)), typeof r == "function" && (e[0] = r), typeof t == "function" && (e[1] = t), e;
+}, mt = (r) => {
+  var s, o, n, i, a, c;
+  const [t, e] = wt(
+    (s = r.nodes) == null ? void 0 : s.priority,
+    (o = r.edges) == null ? void 0 : o.priority
+  );
   return {
     background: {
-      drawingFn: ot(
+      drawingFn: ut(
         r.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((t = r.nodes) == null ? void 0 : t.centerFn) ?? D
+      centerFn: ((n = r.nodes) == null ? void 0 : n.centerFn) ?? R,
+      priorityFn: t
     },
     ports: {
-      centerFn: ((e = r.ports) == null ? void 0 : e.centerFn) ?? D,
-      direction: ((s = r.ports) == null ? void 0 : s.direction) ?? 0
+      centerFn: ((i = r.ports) == null ? void 0 : i.centerFn) ?? R,
+      direction: ((a = r.ports) == null ? void 0 : a.direction) ?? 0
     },
     edges: {
-      controllerFactory: F(r.edges ?? {})
-    },
-    layers: {
-      mode: ((o = r.layers) == null ? void 0 : o.mode) ?? "edges-follow-node"
+      shapeFactory: X(((c = r.edges) == null ? void 0 : c.shape) ?? {}),
+      priorityFn: e
     }
   };
 };
-class it {
+class pt {
   constructor(t) {
-    n(this, "transformation");
-    n(this, "di");
-    n(this, "edgeControllerFactory");
+    h(this, "transformation");
+    h(this, "model");
+    h(this, "di");
+    h(this, "edgeShapeFactory");
     this.apiOptions = t;
-    const e = nt(this.apiOptions ?? {});
-    this.di = new Q(
-      e.layers.mode,
+    const e = mt(this.apiOptions ?? {});
+    this.di = new ct(
       e.background.drawingFn,
       e.nodes.centerFn,
       e.ports.centerFn,
-      e.ports.direction
-    ), this.transformation = this.di.publicViewportTransformer, this.edgeControllerFactory = e.edges.controllerFactory;
+      e.ports.direction,
+      e.nodes.priorityFn,
+      e.edges.priorityFn
+    ), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.edgeShapeFactory = e.edges.shapeFactory;
   }
   addNode(t) {
     return this.di.canvasController.addNode(
@@ -1048,11 +1242,18 @@ class it {
       t.x,
       t.y,
       t.ports,
-      t.centerFn
+      t.centerFn,
+      t.priority
     ), this;
   }
-  moveNodeOnTop(t) {
-    return this.di.canvasController.moveNodeOnTop(t), this;
+  updateNode(t, e) {
+    return this.di.canvasController.updateNode(
+      t,
+      e.x,
+      e.y,
+      e.priority,
+      e.centerFn
+    ), this;
   }
   removeNode(t) {
     return this.di.canvasController.removeNode(t), this;
@@ -1066,21 +1267,25 @@ class it {
       t.direction
     ), this;
   }
-  updatePortEdges(t) {
-    return this.di.canvasController.updatePortEdges(t), this;
+  updatePort(t, e) {
+    return this.di.canvasController.updatePort(t, e), this;
   }
   unmarkPort(t) {
     return this.di.canvasController.unmarkPort(t), this;
   }
   addEdge(t) {
-    const e = t.options !== void 0 ? F(t.options) : this.edgeControllerFactory;
+    const e = t.options !== void 0 ? X(t.options) : this.edgeShapeFactory;
     return this.di.canvasController.addEdge(
       t.id,
       t.from,
       t.to,
-      e
+      e,
+      t.priority
     ), this;
   }
+  updateEdge(t, e) {
+    return this.di.canvasController.updateEdge(t, e), this;
+  }
   removeEdge(t) {
     return this.di.canvasController.removeEdge(t), this;
   }
@@ -1094,12 +1299,6 @@ class it {
   moveToNodes(t) {
     return this.di.canvasController.moveToNodes(t), this;
   }
-  updateNodeCoordinates(t, e, s) {
-    return this.di.canvasController.updateNodeCoordinates(t, e, s), this;
-  }
-  updateEdge(t, e) {
-    return e.controller !== void 0 && this.di.canvasController.updateEdgeController(t, e.controller), this;
-  }
   clear() {
     return this.di.canvasController.clear(), this;
   }
@@ -1113,28 +1312,30 @@ class it {
     this.di.canvasController.destroy();
   }
 }
-class ht {
+class vt {
   constructor(t, e) {
-    n(this, "transformation");
-    n(this, "nodes", /* @__PURE__ */ new Map());
-    n(this, "grabbedNodeId", null);
-    n(this, "onNodeDrag");
-    n(this, "onBeforeNodeDrag");
-    n(this, "nodeIdGenerator", new L());
-    n(this, "element", null);
-    n(this, "onCanvasMouseUp", () => {
+    h(this, "model");
+    h(this, "transformation");
+    h(this, "maxNodePriority", 0);
+    h(this, "nodes", /* @__PURE__ */ new Map());
+    h(this, "grabbedNodeId", null);
+    h(this, "onNodeDrag");
+    h(this, "onBeforeNodeDrag");
+    h(this, "nodeIdGenerator", new D());
+    h(this, "element", null);
+    h(this, "onCanvasMouseUp", () => {
       this.setCursor(null), this.grabbedNodeId = null;
     });
-    n(this, "onCanvasMouseMove", (t) => {
+    h(this, "onCanvasMouseMove", (t) => {
       this.grabbedNodeId !== null && (t.stopPropagation(), this.dragNode(this.grabbedNodeId, t.movementX, t.movementY));
     });
-    n(this, "onCanvasTouchStart", (t) => {
+    h(this, "onCanvasTouchStart", (t) => {
       this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ];
     });
-    n(this, "onCanvasTouchMove", (t) => {
+    h(this, "onCanvasTouchMove", (t) => {
       if (this.grabbedNodeId === null || t.touches.length !== 1 || this.previousTouchCoords === null)
         return;
       t.stopImmediatePropagation();
@@ -1147,51 +1348,55 @@ class ht {
         t.touches[0].clientY
       ];
     });
-    n(this, "onCanvasTouchEnd", (t) => {
+    h(this, "onCanvasTouchEnd", (t) => {
       t.touches.length > 0 ? this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
     });
-    n(this, "previousTouchCoords", null);
-    var i, h;
-    this.canvas = t, this.transformation = this.canvas.transformation;
+    h(this, "previousTouchCoords", null);
+    h(this, "freezePriority");
+    var n, i;
+    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
     const s = () => {
     };
-    this.onNodeDrag = ((i = e == null ? void 0 : e.events) == null ? void 0 : i.onNodeDrag) ?? s;
+    this.onNodeDrag = ((n = e == null ? void 0 : e.events) == null ? void 0 : n.onNodeDrag) ?? s;
     const o = () => !0;
-    this.onBeforeNodeDrag = ((h = e == null ? void 0 : e.events) == null ? void 0 : h.onBeforeNodeDrag) ?? o;
+    this.onBeforeNodeDrag = ((i = e == null ? void 0 : e.events) == null ? void 0 : i.onBeforeNodeDrag) ?? o, this.freezePriority = (e == null ? void 0 : e.grabPriorityStrategy) === "freeze";
   }
   addNode(t) {
     let e = t.id;
     if (e === void 0)
       do
-        e = this.nodeIdGenerator.next();
+        e = this.nodeIdGenerator.create();
       while (this.nodes.has(e));
-    this.canvas.addNode(t);
-    const s = (i) => {
+    this.canvas.addNode({ ...t, id: e }), this.updateMaxNodePriority(e);
+    const s = (n) => {
+      const i = this.model.getNode(e);
       this.onBeforeNodeDrag({
         nodeId: e,
         element: t.element,
-        x: t.x,
-        y: t.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e));
-    }, o = (i) => {
+        x: i.x,
+        y: i.y
+      }) && (n.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.moveNodeOnTop(e));
+    }, o = (n) => {
+      const i = this.model.getNode(e);
       this.onBeforeNodeDrag({
         nodeId: e,
         element: t.element,
-        x: t.x,
-        y: t.y
-      }) && i.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
+        x: i.x,
+        y: i.y
+      }) && n.touches.length === 1 && (this.grabbedNodeId = e, this.moveNodeOnTop(e));
     };
     return this.nodes.set(e, {
       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, e) {
+    return this.canvas.updateNode(t, e), this.updateMaxNodePriority(t), this;
+  }
   removeNode(t) {
     const e = this.nodes.get(t);
     return e !== void 0 && (e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart)), this.canvas.removeNode(t), this.nodes.delete(t), this;
@@ -1199,8 +1404,8 @@ class ht {
   markPort(t) {
     return this.canvas.markPort(t), this;
   }
-  updatePortEdges(t) {
-    return this.canvas.updatePortEdges(t), this;
+  updatePort(t, e) {
+    return this.canvas.updatePort(t, e), this;
   }
   unmarkPort(t) {
     return this.canvas.unmarkPort(t), this;
@@ -1208,6 +1413,9 @@ class ht {
   addEdge(t) {
     return this.canvas.addEdge(t), this;
   }
+  updateEdge(t, e) {
+    return this.canvas.updateEdge(t, e), this;
+  }
   removeEdge(t) {
     return this.canvas.removeEdge(t), this;
   }
@@ -1217,19 +1425,10 @@ class ht {
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
   }
-  updateNodeCoordinates(t, e, s) {
-    return this.canvas.updateNodeCoordinates(t, e, s), this;
-  }
-  updateEdge(t, e) {
-    return this.canvas.updateEdge(t, e), this;
-  }
-  moveNodeOnTop(t) {
-    return this.canvas.moveNodeOnTop(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;
@@ -1246,54 +1445,68 @@ class ht {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   dragNode(t, e, s) {
-    const o = this.nodes.get(t);
+    const o = this.model.getNode(t);
     if (o === void 0)
       throw new Error("failed to drag nonexisting node");
-    const [i, h] = this.transformation.getViewCoords(o.x, o.y), a = i + e, c = h + s, [l, d] = this.transformation.getAbsCoords(a, c);
-    o.x = l, o.y = d, this.canvas.updateNodeCoordinates(t, l, d), this.onNodeDrag({
+    const [n, i] = this.transformation.getViewCoords(o.x, o.y), a = n + e, c = i + s, [l, d] = this.transformation.getAbsCoords(a, c);
+    this.canvas.updateNode(t, { x: l, y: d }), this.onNodeDrag({
       nodeId: t,
       element: o.element,
       x: o.x,
       y: o.y
     });
   }
+  updateMaxNodePriority(t) {
+    const e = this.model.getNode(t).priority;
+    this.maxNodePriority = Math.max(this.maxNodePriority, e);
+  }
+  moveNodeOnTop(t) {
+    if (this.freezePriority)
+      return;
+    this.maxNodePriority += 2, this.updateNode(t, { priority: this.maxNodePriority });
+    const e = this.maxNodePriority - 1;
+    this.model.getNodeAdjacentEdges(t).forEach((o) => {
+      this.updateEdge(o, { priority: e });
+    });
+  }
 }
-class at {
+class ft {
   constructor(t, e) {
-    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", () => {
+    h(this, "model");
+    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", () => {
       this.setCursor("grab"), this.isMoving = !0;
     });
-    n(this, "onMouseMove", (t) => {
+    h(this, "onMouseMove", (t) => {
       if (!this.isMoving || !this.isShiftable)
         return;
       const e = -t.movementX, s = -t.movementY;
       this.moveViewport(e, s);
     });
-    n(this, "onMouseUp", () => {
+    h(this, "onMouseUp", () => {
       this.setCursor(null), this.isMoving = !1;
     });
-    n(this, "onWheelScroll", (t) => {
+    h(this, "onWheelScroll", (t) => {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      const { left: e, top: s } = this.element.getBoundingClientRect(), o = t.clientX - e, i = t.clientY - s, a = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(a, o, i);
+      const { left: e, top: s } = this.element.getBoundingClientRect(), o = t.clientX - e, n = t.clientY - s, a = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
+      this.scaleViewport(a, o, n);
     });
-    n(this, "onTouchStart", (t) => {
+    h(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
     });
-    n(this, "onTouchMove", (t) => {
+    h(this, "onTouchMove", (t) => {
       if (this.prevTouches === null || this.element === null || !this.isShiftable)
         return;
       const e = this.getAverageTouch(t);
@@ -1301,37 +1514,40 @@ class at {
         -(e.x - this.prevTouches.x),
         -(e.y - this.prevTouches.y)
       ), e.touchesCnt === 2 && this.isScalable) {
-        const { left: s, top: o } = this.element.getBoundingClientRect(), i = this.prevTouches.x - s, h = this.prevTouches.y - o, c = 1 / (e.scale / this.prevTouches.scale);
-        this.scaleViewport(c, i, h);
+        const { left: s, top: o } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, i = this.prevTouches.y - o, c = 1 / (e.scale / this.prevTouches.scale);
+        this.scaleViewport(c, n, i);
       }
       this.prevTouches = e, t.preventDefault();
     });
-    n(this, "onTouchEnd", (t) => {
+    h(this, "onTouchEnd", (t) => {
       t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
     });
-    var c, l, d, u, g, w, m, f, p, C, v, E;
-    this.canvas = t, this.options = e, this.transformation = this.canvas.transformation;
-    const s = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.min) ?? null, o = ((u = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : u.max) ?? null;
-    this.isScalable = ((w = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : w.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((f = (m = this.options) == null ? void 0 : m.shift) == null ? void 0 : f.enabled) !== !1;
-    const i = (C = (p = this.options) == null ? void 0 : p.scale) == null ? void 0 : C.wheelSensitivity;
-    this.wheelSensitivity = i !== void 0 ? i : 1.2;
-    const h = () => {
+    var c, l, d, g, u, p, w, f, m, E, v, y;
+    this.canvas = t, this.options = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    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 = () => {
     };
-    this.onTransform = ((v = e == null ? void 0 : e.events) == null ? void 0 : v.onTransform) ?? h;
+    this.onTransform = ((v = e == null ? void 0 : e.events) == null ? void 0 : v.onTransform) ?? i;
     const a = () => !0;
-    this.onBeforeTransform = ((E = e == null ? void 0 : e.events) == null ? void 0 : E.onBeforeTransform) ?? a;
+    this.onBeforeTransform = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeTransform) ?? a;
   }
   addNode(t) {
     return this.canvas.addNode(t), this;
   }
+  updateNode(t, e) {
+    return this.canvas.updateNode(t, e), this;
+  }
   removeNode(t) {
     return this.canvas.removeNode(t), this;
   }
   markPort(t) {
     return this.canvas.markPort(t), this;
   }
-  updatePortEdges(t) {
-    return this.canvas.updatePortEdges(t), this;
+  updatePort(t, e) {
+    return this.canvas.updatePort(t, e), this;
   }
   unmarkPort(t) {
     return this.canvas.unmarkPort(t), this;
@@ -1339,6 +1555,9 @@ class at {
   addEdge(t) {
     return this.canvas.addEdge(t), this;
   }
+  updateEdge(t, e) {
+    return this.canvas.updateEdge(t, e), this;
+  }
   removeEdge(t) {
     return this.canvas.removeEdge(t), this;
   }
@@ -1348,15 +1567,6 @@ class at {
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
   }
-  updateNodeCoordinates(t, e, s) {
-    return this.canvas.updateNodeCoordinates(t, e, s), this;
-  }
-  updateEdge(t, e) {
-    return this.canvas.updateEdge(t, e), this;
-  }
-  moveNodeOnTop(t) {
-    return this.canvas.moveNodeOnTop(t), this;
-  }
   clear() {
     return this.canvas.clear(), this;
   }
@@ -1376,38 +1586,38 @@ class at {
     const o = e.reduce(
       (c, l) => [c[0] + l[0], c[1] + l[1]],
       [0, 0]
-    ), i = [o[0] / s, o[1] / s], a = e.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
+    ), n = [o[0] / s, o[1] / s], a = e.map((c) => [c[0] - n[0], c[1] - n[1]]).reduce(
       (c, l) => c + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
       0
     );
-    return { x: i[0], y: i[1], scale: a / s, touchesCnt: s };
+    return { x: n[0], y: n[1], scale: a / s, touchesCnt: s };
   }
   setCursor(t) {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   moveViewport(t, e) {
-    const [s, o] = this.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale(), h = {
-      scale: i,
-      x: s + i * t,
-      y: o + i * e
+    const [s, o] = this.transformation.getAbsCoords(0, 0), n = this.canvas.transformation.getAbsScale(), i = {
+      scale: n,
+      x: s + n * t,
+      y: o + n * e
     };
-    this.onBeforeTransform({ ...h }) && (this.canvas.patchViewportState(h), this.onTransform(h));
+    this.onBeforeTransform({ ...i }) && (this.canvas.patchViewportState(i), this.onTransform(i));
   }
   scaleViewport(t, e, s) {
-    const [o, i] = this.canvas.transformation.getAbsCoords(0, 0), h = this.canvas.transformation.getAbsScale(), a = h * t, c = h * (1 - t) * e + o, l = h * (1 - t) * s + i;
-    if (this.maxViewScale !== null && a > this.maxViewScale && a > h || this.minViewScale !== null && a < this.minViewScale && a < h)
+    const [o, n] = this.canvas.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale(), a = i * t, c = i * (1 - t) * e + o, l = i * (1 - t) * s + n;
+    if (this.maxViewScale !== null && a > this.maxViewScale && a > i || this.minViewScale !== null && a < this.minViewScale && a < i)
       return;
     const d = { scale: a, x: c, y: l };
     this.onBeforeTransform({ ...d }) && (this.canvas.patchViewportState(d), this.onTransform(d));
   }
 }
-class lt {
+class yt {
   constructor() {
-    n(this, "coreOptions");
-    n(this, "dragOptions");
-    n(this, "transformOptions");
-    n(this, "isDraggable", !1);
-    n(this, "isTransformable", !1);
+    h(this, "coreOptions");
+    h(this, "dragOptions");
+    h(this, "transformOptions");
+    h(this, "isDraggable", !1);
+    h(this, "isTransformable", !1);
   }
   setOptions(t) {
     return this.coreOptions = t, this;
@@ -1419,21 +1629,25 @@ class lt {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
-    let t = new it(this.coreOptions);
-    return this.isDraggable && (t = new ht(t, this.dragOptions)), this.isTransformable && (t = new at(t, this.transformOptions)), t;
+    let t = new pt(this.coreOptions);
+    return this.isDraggable && (t = new vt(t, this.dragOptions)), this.isTransformable && (t = new ft(t, this.transformOptions)), t;
   }
 }
 export {
-  z as BezierEdgeController,
-  it as CanvasCore,
-  Z as CycleCircleEdgeController,
-  U as CycleSquareEdgeController,
-  H as DetourStraightEdgeController,
-  T as EdgeType,
-  lt as HtmlGraphBuilder,
-  G as StraightEdgeController,
-  ht as UserDraggableNodesCanvas,
-  at as UserTransformableCanvas,
-  _ as createBezierEdgeControllerFactory,
-  J as createStraightEdgeControllerFactory
+  q as BezierEdgeShape,
+  pt as CanvasCore,
+  rt as CycleCircleEdgeShape,
+  O as CycleSquareEdgeShape,
+  k as DetourStraightEdgeShape,
+  P as EdgeType,
+  tt as HorizontalEdgeShape,
+  yt as HtmlGraphBuilder,
+  I as StraightEdgeShape,
+  vt as UserDraggableNodesCanvas,
+  ft as UserTransformableCanvas,
+  et as VerticalEdgeShape,
+  ot as createBezierEdgeShapeFactory,
+  nt as createHorizontalEdgeShapeFactory,
+  it as createStraightEdgeShareFactory,
+  ht as createVerticalEdgeShapeFactory
 };