@html-graph/html-graph 0.0.50 → 0.0.51

package/dist/main.js

@@ -1,8 +1,8 @@
-var j = Object.defineProperty;
-var R = (r, t, e) => t in r ? j(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var n = (r, t, e) => R(r, typeof t != "symbol" ? t + "" : t, e);
-class W {
-  constructor(t, e, s, o, a) {
+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");
@@ -58,11 +58,11 @@ class W {
         }
       }
     });
-    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = s, this.layersMode = o, this.backgroundDrawingFn = a, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.edgesContainer = this.createEdgesContainer();
-    const c = this.canvas.getContext("2d");
-    if (c === null)
+    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)
       throw new Error("unable to get canvas context");
-    this.canvasCtx = c, 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 = h, this.host.appendChild(this.canvas), this.layers[this.layersMode].create(), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
   }
   clear() {
     Array.from(this.edgeIdToElementMap.keys()).forEach((t) => {
@@ -145,9 +145,9 @@ class W {
   createNodesResizeObserver() {
     return new ResizeObserver((t) => {
       t.forEach((e) => {
-        const s = e.target, o = this.nodeWrapperElementToIdMap.get(s), a = this.graphStore.getNode(o);
-        this.updateNodeCoords(o, a.x, a.y), this.graphStore.getNodeAdjacentEdges(o).forEach((h) => {
-          this.updateEdgeCoords(h);
+        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);
         });
       });
     });
@@ -157,24 +157,24 @@ class W {
     this.canvas.width = t, this.canvas.height = e;
   }
   updateNodeCoords(t, e, s) {
-    const o = this.nodeIdToWrapperElementMap.get(t), { width: a, height: c } = o.getBoundingClientRect(), h = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [d, g] = i.centerFn(a, c);
-    o.style.transform = `matrix(1, 0, 0, 1, ${e - h * d}, ${s - h * g})`;
+    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})`;
   }
   updateEdgeCoords(t) {
-    const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), o = this.graphStore.getPort(e.to), a = s.element.getBoundingClientRect(), c = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), [i, d] = this.viewportTransformer.getAbsCoords(
-      a.left - h.left,
-      a.top - h.top
-    ), [g, l] = this.viewportTransformer.getAbsCoords(
-      c.left - h.left,
-      c.top - h.top
-    ), u = this.viewportTransformer.getAbsScale(), [v, m] = s.centerFn(
-      a.width * u,
-      a.height * u
-    ), [w, f] = o.centerFn(
-      c.width * u,
-      c.height * u
-    ), C = v + i, E = m + d, b = w + g, $ = f + l, y = Math.min(C, b), T = Math.min(E, $), S = Math.abs(b - C), N = Math.abs($ - E);
-    e.controller.update(y, T, S, N, s, o);
+    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(
+      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);
   }
 }
 class B {
@@ -211,7 +211,7 @@ class B {
     };
   }
 }
-class z {
+class Y {
   constructor(t) {
     this.transformer = t;
   }
@@ -244,7 +244,7 @@ class z {
     return this.transformer.getAbsScale();
   }
 }
-class Y {
+class X {
   constructor() {
     n(this, "nodes", /* @__PURE__ */ Object.create(null));
     n(this, "ports", /* @__PURE__ */ Object.create(null));
@@ -255,8 +255,8 @@ class Y {
     n(this, "outcommingEdges", /* @__PURE__ */ Object.create(null));
     n(this, "cycleEdges", /* @__PURE__ */ Object.create(null));
   }
-  addNode(t, e, s, o, a) {
-    this.nodes[t] = { element: e, x: s, y: o, centerFn: a }, this.nodePorts[t] = /* @__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;
@@ -279,10 +279,10 @@ class Y {
       delete this.portNodeId[o];
     }), delete this.nodePorts[t];
   }
-  addPort(t, e, s, o, a) {
-    this.ports[t] = { element: e, centerFn: o, direction: a }, this.cycleEdges[t] = {}, this.incommingEdges[t] = {}, this.outcommingEdges[t] = {}, this.portNodeId[t] = s;
-    const c = this.nodePorts[s];
-    c !== void 0 && (c[t] = e);
+  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);
   }
   getPort(t) {
     return this.ports[t];
@@ -371,71 +371,52 @@ class Y {
     }), s;
   }
 }
-class p {
-  static getPortCenter(t) {
-    const { top: e, left: s, width: o, height: a } = t.element.getBoundingClientRect(), c = t.centerFn(o, a);
-    return [s + c[0], e + c[1]];
-  }
-  static rotate(t, e, s) {
-    return [
-      e[0] * t[0] - e[1] * t[1] + ((1 - e[0]) * s[0] + e[1] * s[1]),
-      e[1] * t[0] + e[0] * t[1] + ((1 - e[0]) * s[1] - e[1] * s[0])
-    ];
-  }
-  static getDirectionVector(t, e, s) {
-    return [e * Math.cos(t ?? 0), s * Math.sin(t ?? 0)];
-  }
-  static getArrowPath(t, e, s, o, a) {
-    const h = [
-      [0, 0],
-      [o, a],
-      [o, -a]
-    ].map((l) => this.rotate(l, t, [0, 0])).map((l) => [l[0] + e, l[1] + s]), i = `M ${h[0][0]} ${h[0][1]}`, d = `L ${h[1][0]} ${h[1][1]}`, g = `L ${h[2][0]} ${h[2][1]}`;
-    return `${i} ${d} ${g}`;
-  }
-  static getArrowOffsetPath(t, e, s, o, a) {
-    const h = [
-      [o, 0],
-      [o + a, 0]
-    ].map((i) => this.rotate(i, t, [0, 0])).map((i) => [i[0] + e, i[1] + s]);
-    return `M ${h[0][0]} ${h[0][1]} L ${h[1][0]} ${h[1][1]}`;
-  }
-  static createStraightPath(t) {
-    return t.map((e, s) => `${s === 0 ? "M" : "L"} ${e[0]} ${e[1]}`).join(" ");
-  }
-}
-class G {
-  constructor(t, e, s, o, a, c, h) {
+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) => [
+  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 = [
+    [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]}`;
+  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 = 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%", c && (this.sourceArrow = document.createElementNS(
+    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(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = document.createElementNS(
+    ), 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, a, c) {
+  update(t, e, s, o, i, h) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const h = p.getPortCenter(a), i = p.getPortCenter(c), d = h[0] <= i[0] ? 1 : -1, g = h[1] <= i[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${d}, ${g})`;
-    const l = p.getDirectionVector(a.direction, d, g), u = p.getDirectionVector(c.direction, d, g), v = p.rotate([this.arrowLength, 0], l, [0, 0]), m = p.rotate([s - this.arrowLength, o], u, [
+    const a = $(i), c = $(h), 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, [
       s,
       o
-    ]), w = [
-      v[0] + l[0] * this.curvature,
-      v[1] + l[1] * this.curvature
-    ], f = [
-      m[0] - u[0] * this.curvature,
-      m[1] - u[1] * this.curvature
-    ], C = `M ${v[0]} ${v[1]} C ${w[0]} ${w[1]}, ${f[0]} ${f[1]}, ${m[0]} ${m[1]}`, E = this.sourceArrow ? "" : `M 0 0 L ${v[0]} ${v[1]} `, b = this.targetArrow ? "" : ` M ${m[0]} ${m[1]} L ${s} ${o}`, $ = `${E}${C}${b}`;
-    if (this.line.setAttribute("d", $), this.sourceArrow) {
-      const y = p.getArrowPath(
-        l,
+    ]), 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,
         0,
         0,
         this.arrowLength,
@@ -444,8 +425,8 @@ class G {
       this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const y = p.getArrowPath(
-        u,
+      const y = S(
+        g,
         s,
         o,
         -this.arrowLength,
@@ -455,159 +436,267 @@ class G {
     }
   }
 }
-class X {
-  constructor(t, e, s, o, a, c, h, i) {
+const V = (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;
+    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);
+      }
+      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]}`
+      );
+    });
+  }
+  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);
-    n(this, "roundness");
-    this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = a, this.roundness = Math.min(this.arrowOffset, 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%", c && (this.sourceArrow = document.createElementNS(
+    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(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = document.createElementNS(
+    ), 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, a, c) {
+  update(t, e, s, o, i, h) {
     this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const h = p.getPortCenter(a), i = p.getPortCenter(c), d = h[0] <= i[0] ? 1 : -1, g = h[1] <= i[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${d}, ${g})`;
-    const l = p.getDirectionVector(a.direction, d, g), u = p.getDirectionVector(c.direction, d, g), v = this.sourceArrow ? p.rotate([this.arrowLength, 0], l, [0, 0]) : [0, 0], m = this.targetArrow ? p.rotate([s - this.arrowLength, o], u, [
+    const a = $(i), c = $(h), 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, [
       s,
       o
-    ]) : [s, o], w = this.arrowLength + this.arrowOffset, f = w - this.roundness, C = s - w * 2 * d, E = Math.sqrt(C * C + o * o) / 2, b = Math.min(this.roundness, E), $ = p.rotate([f, 0], l, [0, 0]), y = p.rotate([s - f, o], u, [
+    ]) : [s, o], f = this.arrowLength + this.arrowOffset, p = b([f, 0], u, [0, 0]), C = b([s - f, o], g, [
       s,
       o
-    ]), T = p.rotate([w, 0], l, [0, 0]), S = p.rotate([s - w, o], u, [
-      s,
-      o
-    ]), N = (S[0] - T[0]) / 2, L = (S[1] - T[1]) / 2, A = b / E, O = [T[0] + N * A, T[1] + L * A], V = [S[0] - N * A, S[1] - L * A], k = [
-      `M ${v[0]} ${v[1]}`,
-      `L ${$[0]} ${$[1]}`,
-      `C ${T[0]} ${T[1]} ${T[0]} ${T[1]} ${O[0]} ${O[1]}`,
-      `L ${V[0]} ${V[1]}`,
-      `C ${S[0]} ${S[1]} ${S[0]} ${S[1]} ${y[0]} ${y[1]}`,
-      `L ${m[0]} ${m[1]}`
-    ].join(" ");
-    if (this.line.setAttribute("d", k), this.sourceArrow) {
-      const P = p.getArrowPath(
-        l,
+    ]), v = V([w, p, C, m], this.roundness);
+    if (this.line.setAttribute("d", v), this.sourceArrow) {
+      const E = S(
+        u,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", P);
+      this.sourceArrow.setAttribute("d", E);
     }
     if (this.targetArrow) {
-      const P = p.getArrowPath(
-        u,
+      const E = S(
+        g,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", P);
+      this.targetArrow.setAttribute("d", E);
     }
   }
 }
 class Z {
-  constructor(t, e, s, o, a, c, h) {
+  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 = c, this.smallRadius = 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.arrow = document.createElementNS(
+    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(
       "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, a) {
+  update(t, e, s, o, i) {
     this.svg.style.transform = `translate(${t}px, ${e}px)`;
-    const c = p.getDirectionVector(a.direction, 1, 1), h = this.smallRadius, i = this.radius, d = Math.sqrt(h * h + i * i), g = h + i, l = this.arrowLength + d * (1 - i / g), u = h * i / g, m = [
+    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 = [
       [this.arrowLength, 0],
-      [l, u],
-      [l, -u]
-    ].map((E) => p.rotate(E, c, [0, 0])), w = [
+      [u, g],
+      [u, -g]
+    ].map((v) => b(v, h, [0, 0])), f = [
       `M ${m[0][0]} ${m[0][1]}`,
-      `A ${h} ${h} 0 0 1 ${m[1][0]} ${m[1][1]}`,
-      `A ${i} ${i} 0 1 0 ${m[2][0]} ${m[2][1]}`,
-      `A ${h} ${h} 0 0 1 ${m[0][0]} ${m[0][1]}`
-    ].join(" "), f = `M 0 0 L ${m[0][0]} ${m[0][1]} `, C = `${this.arrow !== null ? "" : f}${w}`;
+      `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 E = p.getArrowPath(
-        c,
+      const v = S(
+        h,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", E);
+      this.arrow.setAttribute("d", v);
     }
   }
 }
 class U {
-  constructor(t, e, s, o, a, c, h, i) {
+  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, "points");
-    this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.side = c, this.minPortOffset = h, this.roundness = Math.min(i, 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%", a && (this.arrow = document.createElementNS(
+    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(
       "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 d = this.minPortOffset, g = this.side, l = this.arrowLength + d, u = this.roundness, v = l - u, m = l + u, w = g - u, f = l + 2 * g, C = f - u;
-    console.log(u), this.points = [
+    const l = this.minPortOffset, d = this.side, u = this.arrowLength + l, g = this.roundness, w = u + 2 * d;
+    console.log(g), this.linePoints = [
       [this.arrowLength, 0],
-      [v, 0],
-      [l, u],
-      [l, w],
-      [m, g],
-      [C, g],
-      [f, w],
-      [f, -w],
-      [C, -g],
-      [m, -g],
-      [l, -w],
-      [l, -u]
+      [u, 0],
+      [u, this.side],
+      [w, this.side],
+      [w, -this.side],
+      [u, -this.side],
+      [u, 0],
+      [this.arrowLength, 0]
     ];
   }
-  update(t, e, s, o, a) {
+  update(t, e, s, o, i) {
     this.svg.style.transform = `translate(${t}px, ${e}px)`;
-    const c = p.getDirectionVector(a.direction, 1, 1), h = this.roundness, i = this.points.map((u) => p.rotate(u, c, [0, 0])), d = [
-      `M ${i[0][0]} ${i[0][1]}`,
-      `L ${i[1][0]} ${i[1][1]}`,
-      `A ${h} ${h} 0 0 1 ${i[2][0]} ${i[2][1]}`,
-      `L ${i[3][0]} ${i[3][1]}`,
-      `A ${h} ${h} 0 0 0 ${i[4][0]} ${i[4][1]}`,
-      `L ${i[5][0]} ${i[5][1]}`,
-      `A ${h} ${h} 0 0 0 ${i[6][0]} ${i[6][1]}`,
-      `L ${i[7][0]} ${i[7][1]}`,
-      `A ${h} ${h} 0 0 0 ${i[8][0]} ${i[8][1]}`,
-      `L ${i[9][0]} ${i[9][1]}`,
-      `A ${h} ${h} 0 0 0 ${i[10][0]} ${i[10][1]}`,
-      `L ${i[11][0]} ${i[11][1]}`,
-      `A ${h} ${h} 0 0 1 ${i[1][0]} ${i[1][1]}`
-    ].join(" "), g = `M 0 0 L ${i[0][0]} ${i[0][1]} `, l = `${this.arrow ? "" : g}${d}`;
+    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)}`;
     if (this.line.setAttribute("d", l), this.arrow) {
-      const u = p.getArrowPath(
-        c,
+      const d = S(
+        h,
+        0,
+        0,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.arrow.setAttribute("d", d);
+    }
+  }
+}
+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(
+      "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, i, h) {
+    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;
+    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, [
+      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
+    ]), E = [v[0] + this.detourX, v[1] + this.detourY], A = V(
+      [w, p, C, E, v, m],
+      this.roundness
+    );
+    if (this.line.setAttribute("d", A), this.sourceArrow) {
+      const y = S(
+        u,
+        0,
+        0,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.sourceArrow.setAttribute("d", y);
+    }
+    if (this.targetArrow) {
+      const y = S(
+        g,
+        s,
+        o,
+        -this.arrowLength,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", y);
+    }
+  }
+}
+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(
+      "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, i, h) {
+    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;
+    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, [
+      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
+    ]), 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]}`
+    ].join(" ");
+    if (this.line.setAttribute("d", k), this.sourceArrow) {
+      const O = S(
+        u,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", u);
+      this.sourceArrow.setAttribute("d", O);
+    }
+    if (this.targetArrow) {
+      const O = S(
+        g,
+        s,
+        o,
+        -this.arrowLength,
+        this.arrowWidth
+      );
+      this.targetArrow.setAttribute("d", O);
     }
   }
 }
-var M = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.Cycle = "cycle", r))(M || {});
-const H = (r) => (t) => t === "cycle" ? new Z(
+const _ = (r) => (t) => t === T.PortCycle ? new Z(
   r.color,
   r.width,
   r.arrowLength,
@@ -615,7 +704,17 @@ const H = (r) => (t) => t === "cycle" ? new Z(
   r.hasSourceArrow || r.hasTargetArrow,
   r.cycleRadius,
   r.smallCycleRadius
-) : new G(
+) : t === T.NodeCycle ? new q(
+  r.color,
+  r.width,
+  r.curvature,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.detourDistance,
+  r.detourDirection
+) : new z(
   r.color,
   r.width,
   r.curvature,
@@ -623,7 +722,7 @@ const H = (r) => (t) => t === "cycle" ? new Z(
   r.arrowWidth,
   r.hasSourceArrow,
   r.hasTargetArrow
-), q = (r) => (t) => t === M.Cycle && t === "cycle" ? new U(
+), J = (r) => (t) => t === T.PortCycle ? new U(
   r.color,
   r.width,
   r.arrowLength,
@@ -632,7 +731,18 @@ const H = (r) => (t) => t === "cycle" ? new Z(
   r.cycleSquareSide,
   r.arrowOffset,
   r.roundness
-) : new X(
+) : t === T.NodeCycle ? new H(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness,
+  r.detourDistance,
+  r.detourDirection
+) : new G(
   r.color,
   r.width,
   r.arrowLength,
@@ -642,7 +752,7 @@ const H = (r) => (t) => t === "cycle" ? new Z(
   r.hasTargetArrow,
   r.roundness
 );
-class x {
+class L {
   constructor() {
     n(this, "counter", 0);
   }
@@ -654,19 +764,19 @@ class x {
     this.counter = 0;
   }
 }
-class _ {
-  constructor(t, e, s, o, a) {
-    n(this, "nodeIdGenerator", new x());
-    n(this, "portIdGenerator", new x());
-    n(this, "edgeIdGenerator", new x());
-    this.graphStore = t, this.htmlController = e, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = a;
+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);
   }
-  addNode(t, e, s, o, a, c) {
+  addNode(t, e, s, o, i, h) {
     if (t === void 0)
       do
         t = this.nodeIdGenerator.next();
@@ -678,18 +788,24 @@ class _ {
       e,
       s,
       o,
-      c ?? this.nodesCenterFn
-    ), this.htmlController.attachNode(t), a !== void 0 && Object.entries(a).forEach(([h, i]) => {
-      i instanceof HTMLElement ? this.markPort(h, i, t, this.portsCenterFn, null) : this.markPort(
-        h,
-        i.element,
+      h ?? this.nodesCenterFn
+    ), this.htmlController.attachNode(t), i !== void 0 && Object.entries(i).forEach(([a, c]) => {
+      c instanceof HTMLElement ? this.markPort(
+        a,
+        c,
+        t,
+        this.portsCenterFn,
+        this.portsDirection
+      ) : this.markPort(
+        a,
+        c.element,
         t,
-        i.centerFn ?? this.portsCenterFn,
-        i.direction ?? null
+        c.centerFn ?? this.portsCenterFn,
+        c.direction ?? this.portsDirection
       );
     });
   }
-  markPort(t, e, s, o, a) {
+  markPort(t, e, s, o, i) {
     if (t === void 0)
       do
         t = this.portIdGenerator.next();
@@ -703,7 +819,7 @@ class _ {
       e,
       s,
       o ?? this.portsCenterFn,
-      a ?? null
+      i ?? 0
     );
   }
   updatePortEdges(t) {
@@ -727,12 +843,13 @@ class _ {
       throw new Error("failed to add edge from nonexisting port");
     if (!this.graphStore.hasPort(s))
       throw new Error("failed to add edge to nonexisting port");
-    let a = M.Regular;
-    e === s && (a = M.Cycle), this.graphStore.addEdge(
+    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(
       t,
       e,
       s,
-      o(a)
+      o(i)
     ), this.htmlController.attachEdge(t);
   }
   removeEdge(t) {
@@ -751,14 +868,14 @@ class _ {
   moveToNodes(t) {
     if (t.length === 0)
       return;
-    const e = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
+    const e = t.map((g) => this.graphStore.getNode(g)).filter((g) => g !== void 0);
     if (e.length < t.length)
       throw new Error("failed to move to nonexisting node");
     const [s, o] = e.reduce(
-      (u, v) => [u[0] + v.x, u[1] + v.y],
+      (g, w) => [g[0] + w.x, g[1] + w.y],
       [0, 0]
-    ), a = s / e.length, c = o / e.length, [h, i] = this.htmlController.getViewportDimensions(), d = this.viewportTransformer.getAbsScale(), g = a - d * h / 2, l = c - d * i / 2;
-    this.patchViewportState(null, g, l);
+    ), 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))
@@ -783,81 +900,82 @@ class _ {
     this.htmlController.destroy();
   }
 }
-class J {
-  constructor(t, e, s, o) {
+class Q {
+  constructor(t, e, s, o, i) {
     n(this, "publicViewportTransformer");
     n(this, "canvasController");
-    const a = new B(), c = new Y();
-    this.publicViewportTransformer = new z(
-      a
+    const h = new B(), a = new X();
+    this.publicViewportTransformer = new Y(
+      h
     );
-    const h = new W(
-      c,
+    const c = new R(
       a,
+      h,
       this.publicViewportTransformer,
       t,
       e
     );
-    this.canvasController = new _(
+    this.canvasController = new K(
+      a,
       c,
       h,
-      a,
       s,
-      o
+      o,
+      i
     );
   }
 }
 const D = (r, t) => [
   r / 2,
   t / 2
-], K = () => () => {
-}, Q = (r, t, e, s, o, a) => {
-  r.clearRect(0, 0, r.canvas.width, r.canvas.height), r.fillStyle = a, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
-  const c = t.getViewCoords(0, 0), h = t.getViewScale(), i = s * h;
-  let d = 0, g = 0, l = i / 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;
   do
-    l *= 2, d = r.canvas.width / l, g = r.canvas.height / l;
-  while (d * g > 1e4);
-  const u = c[0] - Math.floor(c[0] / l) * l, v = c[1] - Math.floor(c[1] / l) * l, m = o * h, w = 2 * Math.PI, f = u - l, C = v - l, E = r.canvas.width + u, b = r.canvas.height + v;
+    u *= 2, l = r.canvas.width / u, d = r.canvas.height / u;
+  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;
   r.fillStyle = e;
-  for (let $ = f; $ <= E; $ += l)
-    for (let y = C; y <= b; y += l)
-      r.beginPath(), r.arc($, y, m, 0, w), r.closePath(), r.fill();
-}, I = (r, t, e, s) => (o, a) => {
-  Q(
+  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(
     o,
-    a,
+    i,
     r,
     t,
     e,
     s
   );
-}, tt = (r, t) => {
+}, st = (r, t) => {
   r.fillStyle = t, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
-}, et = (r) => (t) => {
-  tt(t, r);
-}, st = (r) => {
+}, rt = (r) => (t) => {
+  st(t, r);
+}, ot = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.drawingFn;
     case "dots":
-      return I(
+      return et(
         r.dotColor ?? "#d8d8d8",
         r.dotGap ?? 25,
         r.dotRadius ?? 1.5,
         r.color ?? "#ffffff"
       );
     case "color":
-      return et(r.color ?? "#ffffff");
+      return rt(r.color ?? "#ffffff");
     default:
-      return K();
+      return I();
   }
 }, F = (r) => {
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.controllerFactory;
     case "straight":
-      return q({
+      return J({
         color: r.color ?? "#5c5c5c",
         width: r.width ?? 1,
         arrowLength: r.arrowLength ?? 15,
@@ -866,10 +984,12 @@ const D = (r, t) => [
         hasSourceArrow: r.hasSourceArrow ?? !1,
         hasTargetArrow: r.hasTargetArrow ?? !1,
         cycleSquareSide: r.cycleSquareSide ?? 30,
-        roundness: r.roundness ?? 5
+        roundness: r.roundness ?? 10,
+        detourDistance: r.detourDistance ?? 100,
+        detourDirection: r.detourDirection ?? -Math.PI / 2
       });
     default:
-      return H({
+      return _({
         color: r.color ?? "#5c5c5c",
         width: r.width ?? 1,
         curvature: r.curvature ?? 90,
@@ -878,14 +998,16 @@ const D = (r, t) => [
         hasSourceArrow: r.hasSourceArrow ?? !1,
         hasTargetArrow: r.hasTargetArrow ?? !1,
         cycleRadius: r.cycleRadius ?? 30,
-        smallCycleRadius: r.smallCycleRadius ?? 15
+        smallCycleRadius: r.smallCycleRadius ?? 15,
+        detourDistance: r.detourDistance ?? 100,
+        detourDirection: r.detourDirection ?? -Math.PI / 2
       });
   }
-}, rt = (r) => {
-  var t, e, s;
+}, nt = (r) => {
+  var t, e, s, o;
   return {
     background: {
-      drawingFn: st(
+      drawingFn: ot(
         r.background ?? { type: "none" }
       )
     },
@@ -893,28 +1015,30 @@ const D = (r, t) => [
       centerFn: ((t = r.nodes) == null ? void 0 : t.centerFn) ?? D
     },
     ports: {
-      centerFn: ((e = r.ports) == null ? void 0 : e.centerFn) ?? D
+      centerFn: ((e = r.ports) == null ? void 0 : e.centerFn) ?? D,
+      direction: ((s = r.ports) == null ? void 0 : s.direction) ?? 0
     },
     edges: {
       controllerFactory: F(r.edges ?? {})
     },
     layers: {
-      mode: ((s = r.layers) == null ? void 0 : s.mode) ?? "edges-follow-node"
+      mode: ((o = r.layers) == null ? void 0 : o.mode) ?? "edges-follow-node"
     }
   };
 };
-class ot {
+class it {
   constructor(t) {
     n(this, "transformation");
     n(this, "di");
     n(this, "edgeControllerFactory");
     this.apiOptions = t;
-    const e = rt(this.apiOptions ?? {});
-    this.di = new J(
+    const e = nt(this.apiOptions ?? {});
+    this.di = new Q(
       e.layers.mode,
       e.background.drawingFn,
       e.nodes.centerFn,
-      e.ports.centerFn
+      e.ports.centerFn,
+      e.ports.direction
     ), this.transformation = this.di.publicViewportTransformer, this.edgeControllerFactory = e.edges.controllerFactory;
   }
   addNode(t) {
@@ -989,14 +1113,14 @@ class ot {
     this.di.canvasController.destroy();
   }
 }
-class nt {
+class ht {
   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 x());
+    n(this, "nodeIdGenerator", new L());
     n(this, "element", null);
     n(this, "onCanvasMouseUp", () => {
       this.setCursor(null), this.grabbedNodeId = null;
@@ -1030,13 +1154,13 @@ class nt {
       ] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
     });
     n(this, "previousTouchCoords", null);
-    var a, c;
+    var i, h;
     this.canvas = t, this.transformation = this.canvas.transformation;
     const s = () => {
     };
-    this.onNodeDrag = ((a = e == null ? void 0 : e.events) == null ? void 0 : a.onNodeDrag) ?? s;
+    this.onNodeDrag = ((i = e == null ? void 0 : e.events) == null ? void 0 : i.onNodeDrag) ?? s;
     const o = () => !0;
-    this.onBeforeNodeDrag = ((c = e == null ? void 0 : e.events) == null ? void 0 : c.onBeforeNodeDrag) ?? o;
+    this.onBeforeNodeDrag = ((h = e == null ? void 0 : e.events) == null ? void 0 : h.onBeforeNodeDrag) ?? o;
   }
   addNode(t) {
     let e = t.id;
@@ -1045,20 +1169,20 @@ class nt {
         e = this.nodeIdGenerator.next();
       while (this.nodes.has(e));
     this.canvas.addNode(t);
-    const s = (a) => {
+    const s = (i) => {
       this.onBeforeNodeDrag({
         nodeId: e,
         element: t.element,
         x: t.x,
         y: t.y
-      }) && (a.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e));
-    }, o = (a) => {
+      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e));
+    }, o = (i) => {
       this.onBeforeNodeDrag({
         nodeId: e,
         element: t.element,
         x: t.x,
         y: t.y
-      }) && a.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
+      }) && i.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
     };
     return this.nodes.set(e, {
       element: t.element,
@@ -1125,8 +1249,8 @@ class nt {
     const o = this.nodes.get(t);
     if (o === void 0)
       throw new Error("failed to drag nonexisting node");
-    const [a, c] = this.transformation.getViewCoords(o.x, o.y), h = a + e, i = c + s, [d, g] = this.transformation.getAbsCoords(h, i);
-    o.x = d, o.y = g, this.canvas.updateNodeCoordinates(t, d, g), this.onNodeDrag({
+    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({
       nodeId: t,
       element: o.element,
       x: o.x,
@@ -1134,7 +1258,7 @@ class nt {
     });
   }
 }
-class it {
+class at {
   constructor(t, e) {
     n(this, "transformation");
     n(this, "element", null);
@@ -1163,8 +1287,8 @@ class it {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      const { left: e, top: s } = this.element.getBoundingClientRect(), o = t.clientX - e, a = t.clientY - s, h = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(h, o, a);
+      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);
     });
     n(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
@@ -1177,25 +1301,25 @@ class it {
         -(e.x - this.prevTouches.x),
         -(e.y - this.prevTouches.y)
       ), e.touchesCnt === 2 && this.isScalable) {
-        const { left: s, top: o } = this.element.getBoundingClientRect(), a = this.prevTouches.x - s, c = this.prevTouches.y - o, i = 1 / (e.scale / this.prevTouches.scale);
-        this.scaleViewport(i, a, c);
+        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);
       }
       this.prevTouches = e, t.preventDefault();
     });
     n(this, "onTouchEnd", (t) => {
       t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
     });
-    var i, d, g, l, u, v, m, w, f, C, E, b;
+    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 = ((d = (i = this.options) == null ? void 0 : i.scale) == null ? void 0 : d.min) ?? null, o = ((l = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : l.max) ?? null;
-    this.isScalable = ((v = (u = this.options) == null ? void 0 : u.scale) == null ? void 0 : v.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((w = (m = this.options) == null ? void 0 : m.shift) == null ? void 0 : w.enabled) !== !1;
-    const a = (C = (f = this.options) == null ? void 0 : f.scale) == null ? void 0 : C.wheelSensitivity;
-    this.wheelSensitivity = a !== void 0 ? a : 1.2;
-    const c = () => {
+    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 = () => {
     };
-    this.onTransform = ((E = e == null ? void 0 : e.events) == null ? void 0 : E.onTransform) ?? c;
-    const h = () => !0;
-    this.onBeforeTransform = ((b = e == null ? void 0 : e.events) == null ? void 0 : b.onBeforeTransform) ?? h;
+    this.onTransform = ((v = e == null ? void 0 : e.events) == null ? void 0 : v.onTransform) ?? h;
+    const a = () => !0;
+    this.onBeforeTransform = ((E = e == null ? void 0 : e.events) == null ? void 0 : E.onBeforeTransform) ?? a;
   }
   addNode(t) {
     return this.canvas.addNode(t), this;
@@ -1247,37 +1371,37 @@ class it {
   }
   getAverageTouch(t) {
     const e = [], s = t.touches.length;
-    for (let i = 0; i < s; i++)
-      e.push([t.touches[i].clientX, t.touches[i].clientY]);
+    for (let c = 0; c < s; c++)
+      e.push([t.touches[c].clientX, t.touches[c].clientY]);
     const o = e.reduce(
-      (i, d) => [i[0] + d[0], i[1] + d[1]],
+      (c, l) => [c[0] + l[0], c[1] + l[1]],
       [0, 0]
-    ), a = [o[0] / s, o[1] / s], h = e.map((i) => [i[0] - a[0], i[1] - a[1]]).reduce(
-      (i, d) => i + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+    ), i = [o[0] / s, o[1] / s], a = e.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
+      (c, l) => c + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
       0
     );
-    return { x: a[0], y: a[1], scale: h / s, touchesCnt: s };
+    return { x: i[0], y: i[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), a = this.canvas.transformation.getAbsScale(), c = {
-      scale: a,
-      x: s + a * t,
-      y: o + a * 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
     };
-    this.onBeforeTransform({ ...c }) && (this.canvas.patchViewportState(c), this.onTransform(c));
+    this.onBeforeTransform({ ...h }) && (this.canvas.patchViewportState(h), this.onTransform(h));
   }
   scaleViewport(t, e, s) {
-    const [o, a] = this.canvas.transformation.getAbsCoords(0, 0), c = this.canvas.transformation.getAbsScale(), h = c * t, i = c * (1 - t) * e + o, d = c * (1 - t) * s + a;
-    if (this.maxViewScale !== null && h > this.maxViewScale && h > c || this.minViewScale !== null && h < this.minViewScale && h < c)
+    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)
       return;
-    const g = { scale: h, x: i, y: d };
-    this.onBeforeTransform({ ...g }) && (this.canvas.patchViewportState(g), this.onTransform(g));
+    const d = { scale: a, x: c, y: l };
+    this.onBeforeTransform({ ...d }) && (this.canvas.patchViewportState(d), this.onTransform(d));
   }
 }
-class ht {
+class lt {
   constructor() {
     n(this, "coreOptions");
     n(this, "dragOptions");
@@ -1295,21 +1419,21 @@ class ht {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
-    let t = new ot(this.coreOptions);
-    return this.isDraggable && (t = new nt(t, this.dragOptions)), this.isTransformable && (t = new it(t, this.transformOptions)), t;
+    let t = new it(this.coreOptions);
+    return this.isDraggable && (t = new ht(t, this.dragOptions)), this.isTransformable && (t = new at(t, this.transformOptions)), t;
   }
 }
 export {
-  G as BezierEdgeController,
-  ot as CanvasCore,
+  z as BezierEdgeController,
+  it as CanvasCore,
   Z as CycleCircleEdgeController,
   U as CycleSquareEdgeController,
-  M as EdgeType,
-  p as EdgeUtils,
-  ht as HtmlGraphBuilder,
-  X as StraightEdgeController,
-  nt as UserDraggableNodesCanvas,
-  it as UserTransformableCanvas,
-  H as createBezierEdgeControllerFactory,
-  q as createStraightEdgeControllerFactory
+  H as DetourStraightEdgeController,
+  T as EdgeType,
+  lt as HtmlGraphBuilder,
+  G as StraightEdgeController,
+  ht as UserDraggableNodesCanvas,
+  at as UserTransformableCanvas,
+  _ as createBezierEdgeControllerFactory,
+  J as createStraightEdgeControllerFactory
 };