@html-graph/html-graph 0.0.48 → 0.0.49

package/dist/main.js

@@ -1,28 +1,28 @@
-var F = Object.defineProperty;
-var k = (s, t, e) => t in s ? F(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var r = (s, t, e) => k(s, typeof t != "symbol" ? t + "" : t, e);
-class j {
-  constructor(t, e, o, n, i) {
-    r(this, "canvasWrapper", null);
-    r(this, "host");
-    r(this, "nodesContainer");
-    r(this, "connectionsContainer");
-    r(this, "canvas");
-    r(this, "canvasCtx");
-    r(this, "hostResizeObserver");
-    r(this, "nodesResizeObserver");
-    r(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
-    r(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
-    r(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    r(this, "connectionIdToElementMap", /* @__PURE__ */ new Map());
-    r(this, "currentZIndex", 0);
-    r(this, "layers", {
-      "connections-on-top": {
+var D = Object.defineProperty;
+var F = (o, t, e) => t in o ? D(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => F(o, typeof t != "symbol" ? t + "" : t, e);
+class k {
+  constructor(t, e, s, r, a) {
+    n(this, "canvasWrapper", null);
+    n(this, "host");
+    n(this, "nodesContainer");
+    n(this, "connectionsContainer");
+    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, "connectionIdToElementMap", /* @__PURE__ */ new Map());
+    n(this, "currentZIndex", 0);
+    n(this, "layers", {
+      "edges-on-top": {
         create: () => {
           this.host.appendChild(this.nodesContainer), this.host.appendChild(this.connectionsContainer);
         },
-        update: (t, e, o) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${o})`, this.connectionsContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${o})`;
+        update: (t, e, s) => {
+          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.connectionsContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
         },
         moveOnTop: (t) => {
           this.currentZIndex += 1;
@@ -30,17 +30,17 @@ class j {
           e.style.zIndex = `${this.currentZIndex}`;
         }
       },
-      "connections-follow-node": {
+      "edges-follow-node": {
         create: () => {
           this.host.appendChild(this.nodesContainer), this.connectionsContainer = this.nodesContainer;
         },
-        update: (t, e, o) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${o})`;
+        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.getNodeAdjacentConnections(t).forEach((n) => {
-            this.connectionIdToElementMap.get(n).style.zIndex = `${this.currentZIndex - 1}`;
+          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentConnections(t).forEach((r) => {
+            this.connectionIdToElementMap.get(r).style.zIndex = `${this.currentZIndex - 1}`;
           });
         }
       },
@@ -48,8 +48,8 @@ class j {
         create: () => {
           this.host.appendChild(this.connectionsContainer), this.host.appendChild(this.nodesContainer);
         },
-        update: (t, e, o) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${o})`, this.connectionsContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${o})`;
+        update: (t, e, s) => {
+          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.connectionsContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
         },
         moveOnTop: (t) => {
           this.currentZIndex += 1;
@@ -58,11 +58,11 @@ class j {
         }
       }
     });
-    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = o, this.layersMode = n, this.backgroundDrawingFn = i, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.connectionsContainer = this.createConnectionsContainer();
-    const h = this.canvas.getContext("2d");
-    if (h === null)
+    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = s, this.layersMode = r, this.backgroundDrawingFn = a, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.connectionsContainer = this.createConnectionsContainer();
+    const c = this.canvas.getContext("2d");
+    if (c === 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 = c, 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.connectionIdToElementMap.keys()).forEach((t) => {
@@ -72,7 +72,7 @@ class j {
     });
   }
   attach(t) {
-    this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
+    this.detach(), this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
   }
   detach() {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
@@ -82,22 +82,22 @@ class j {
   }
   applyTransform() {
     this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
-    const [t, e] = this.viewportTransformer.getViewCoords(0, 0), o = this.viewportTransformer.getViewScale();
-    this.layers[this.layersMode].update(o, t, e);
+    const [t, e] = this.viewportTransformer.getViewCoords(0, 0), s = this.viewportTransformer.getViewScale();
+    this.layers[this.layersMode].update(s, t, e);
   }
   attachNode(t) {
-    const e = this.graphStore.getNode(t), o = document.createElement("div");
-    o.appendChild(e.element), o.style.position = "absolute", o.style.top = "0", o.style.left = "0", o.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, o.style.visibility = "hidden", this.nodesContainer.appendChild(o), this.nodeElementToIdMap.set(e.element, t), this.nodeWrapperElementToIdMap.set(o, t), this.nodeIdToWrapperElementMap.set(t, o), this.updateNodeCoords(t, e.x, e.y), this.nodesResizeObserver.observe(o), o.style.visibility = "visible";
+    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";
   }
   detachNode(t) {
     const e = this.graphStore.getNode(t);
     this.nodesResizeObserver.unobserve(e.element), this.nodesContainer.removeChild(e.element);
-    const o = this.nodeIdToWrapperElementMap.get(t);
-    o.removeChild(e.element), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(o), this.nodeIdToWrapperElementMap.delete(t);
+    const s = this.nodeIdToWrapperElementMap.get(t);
+    s.removeChild(e.element), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
   }
   attachConnection(t) {
-    const o = this.graphStore.getConnection(t).controller.svg;
-    o.style.transformOrigin = "50% 50%", o.style.position = "absolute", o.style.top = "0", o.style.left = "0", o.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, this.connectionIdToElementMap.set(t, o), this.updateConnectionCoords(t), this.connectionsContainer.appendChild(o);
+    const s = this.graphStore.getConnection(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.connectionIdToElementMap.set(t, s), this.updateConnectionCoords(t), this.connectionsContainer.appendChild(s);
   }
   detachConnection(t) {
     const e = this.connectionIdToElementMap.get(t);
@@ -107,14 +107,14 @@ class j {
     this.layers[this.layersMode].moveOnTop(t);
   }
   updateNodeCoordinates(t) {
-    const e = this.graphStore.getNode(t), o = this.graphStore.getNodeAdjacentConnections(t);
-    this.updateNodeCoords(t, e.x, e.y), o.forEach((n) => {
-      this.updateConnectionCoords(n);
+    const e = this.graphStore.getNode(t), s = this.graphStore.getNodeAdjacentConnections(t);
+    this.updateNodeCoords(t, e.x, e.y), s.forEach((r) => {
+      this.updateConnectionCoords(r);
     });
   }
   updatePortConnections(t) {
-    this.graphStore.getPortAdjacentConnections(t).forEach((o) => {
-      this.updateConnectionCoords(o);
+    this.graphStore.getPortAdjacentConnections(t).forEach((s) => {
+      this.updateConnectionCoords(s);
     });
   }
   getViewportDimensions() {
@@ -145,9 +145,9 @@ class j {
   createNodesResizeObserver() {
     return new ResizeObserver((t) => {
       t.forEach((e) => {
-        const o = e.target, n = this.nodeWrapperElementToIdMap.get(o), i = this.graphStore.getNode(n);
-        this.updateNodeCoords(n, i.x, i.y), this.graphStore.getNodeAdjacentConnections(n).forEach((a) => {
-          this.updateConnectionCoords(a);
+        const s = e.target, r = this.nodeWrapperElementToIdMap.get(s), a = this.graphStore.getNode(r);
+        this.updateNodeCoords(r, a.x, a.y), this.graphStore.getNodeAdjacentConnections(r).forEach((h) => {
+          this.updateConnectionCoords(h);
         });
       });
     });
@@ -156,30 +156,30 @@ class j {
     const { width: t, height: e } = this.host.getBoundingClientRect();
     this.canvas.width = t, this.canvas.height = e;
   }
-  updateNodeCoords(t, e, o) {
-    const n = this.nodeIdToWrapperElementMap.get(t), { width: i, height: h } = n.getBoundingClientRect(), a = this.viewportTransformer.getAbsScale(), c = this.graphStore.getNode(t), [l, g] = c.centerFn(i, h);
-    n.style.transform = `matrix(1, 0, 0, 1, ${e - a * l}, ${o - a * g})`;
+  updateNodeCoords(t, e, s) {
+    const r = this.nodeIdToWrapperElementMap.get(t), { width: a, height: c } = r.getBoundingClientRect(), h = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [d, g] = i.centerFn(a, c);
+    r.style.transform = `matrix(1, 0, 0, 1, ${e - h * d}, ${s - h * g})`;
   }
   updateConnectionCoords(t) {
-    const e = this.graphStore.getConnection(t), o = this.graphStore.getPort(e.from), n = this.graphStore.getPort(e.to), i = o.element.getBoundingClientRect(), h = n.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
-      i.left - a.left,
-      i.top - a.top
-    ), [g, d] = this.viewportTransformer.getAbsCoords(
-      h.left - a.left,
-      h.top - a.top
-    ), m = this.viewportTransformer.getAbsScale(), [u, p] = o.centerFn(
-      i.width * m,
-      i.height * m
-    ), [C, w] = n.centerFn(
-      h.width * m,
-      h.height * m
-    ), b = u + c, T = p + l, S = C + g, f = w + d, y = Math.min(b, S), N = Math.min(T, f), E = Math.abs(S - b), O = Math.abs(f - T), x = this.connectionIdToElementMap.get(t), L = b <= S, V = T <= f;
-    x.style.transform = `matrix(${L ? 1 : -1}, 0, 0, ${V ? 1 : -1}, ${y}, ${N})`, e.controller.update(y, N, E, O, o, n);
+    const e = this.graphStore.getConnection(t), s = this.graphStore.getPort(e.from), r = this.graphStore.getPort(e.to), a = s.element.getBoundingClientRect(), c = r.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(), [w, m] = s.centerFn(
+      a.width * u,
+      a.height * u
+    ), [p, C] = r.centerFn(
+      c.width * u,
+      c.height * u
+    ), f = w + i, y = m + d, b = p + g, E = C + l, $ = Math.min(f, b), N = Math.min(y, E), A = Math.abs(b - f), P = Math.abs(E - y);
+    e.controller.update($, N, A, P, s, r);
   }
 }
-class D {
+class W {
   constructor() {
-    r(this, "state", {
+    n(this, "state", {
       scale: 1,
       x: 0,
       y: 0
@@ -203,15 +203,15 @@ class D {
   getAbsScale() {
     return this.state.scale;
   }
-  patchState(t, e, o) {
+  patchState(t, e, s) {
     this.state = {
       scale: t ?? this.state.scale,
       x: e ?? this.state.x,
-      y: o ?? this.state.y
+      y: s ?? this.state.y
     };
   }
 }
-class W {
+class j {
   constructor(t) {
     this.transformer = t;
   }
@@ -246,20 +246,20 @@ class W {
 }
 class R {
   constructor() {
-    r(this, "nodes", /* @__PURE__ */ Object.create(null));
-    r(this, "ports", /* @__PURE__ */ Object.create(null));
-    r(this, "nodePorts", /* @__PURE__ */ Object.create(null));
-    r(this, "portNodeId", /* @__PURE__ */ Object.create(null));
-    r(this, "connections", /* @__PURE__ */ Object.create(null));
-    r(this, "incommingConnections", /* @__PURE__ */ Object.create(null));
-    r(this, "outcommingConnections", /* @__PURE__ */ Object.create(null));
-    r(this, "cycleConnections", /* @__PURE__ */ Object.create(null));
+    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, "connections", /* @__PURE__ */ Object.create(null));
+    n(this, "incommingConnections", /* @__PURE__ */ Object.create(null));
+    n(this, "outcommingConnections", /* @__PURE__ */ Object.create(null));
+    n(this, "cycleConnections", /* @__PURE__ */ Object.create(null));
   }
   getAllNodes() {
     return this.nodes;
   }
-  addNode(t, e, o, n, i) {
-    this.nodes[t] = { element: e, x: o, y: n, centerFn: i }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
+  addNode(t, e, s, r, a) {
+    this.nodes[t] = { element: e, x: s, y: r, centerFn: a }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
   }
   hasNode(t) {
     return this.nodes[t] !== void 0;
@@ -267,25 +267,25 @@ class R {
   getNode(t) {
     return this.nodes[t];
   }
-  updateNodeCoords(t, e, o) {
-    this.nodes[t].x = e, this.nodes[t].y = o;
+  updateNodeCoords(t, e, s) {
+    this.nodes[t].x = e, this.nodes[t].y = s;
   }
   updateConnectionController(t, e) {
     this.connections[t].controller = e;
   }
   removeNode(t) {
-    this.getNodeAdjacentConnections(t).forEach((n) => {
-      this.removeConnection(n);
+    this.getNodeAdjacentConnections(t).forEach((r) => {
+      this.removeConnection(r);
     }), delete this.nodes[t];
-    const o = this.nodePorts[t];
-    Object.keys(o).forEach((n) => {
-      delete this.portNodeId[n];
+    const s = this.nodePorts[t];
+    Object.keys(s).forEach((r) => {
+      delete this.portNodeId[r];
     }), delete this.nodePorts[t];
   }
-  addPort(t, e, o, n, i) {
-    this.ports[t] = { element: e, centerFn: n, direction: i }, this.cycleConnections[t] = {}, this.incommingConnections[t] = {}, this.outcommingConnections[t] = {}, this.portNodeId[t] = o;
-    const h = this.nodePorts[o];
-    h !== void 0 && (h[t] = e);
+  addPort(t, e, s, r, a) {
+    this.ports[t] = { element: e, centerFn: r, direction: a }, this.cycleConnections[t] = {}, this.incommingConnections[t] = {}, this.outcommingConnections[t] = {}, this.portNodeId[t] = s;
+    const c = this.nodePorts[s];
+    c !== void 0 && (c[t] = e);
   }
   getPort(t) {
     return this.ports[t];
@@ -297,24 +297,24 @@ class R {
     return this.portNodeId[t] !== void 0;
   }
   removePort(t) {
-    Object.keys(this.cycleConnections[t]).forEach((n) => {
-      this.removeConnection(n);
-    }), delete this.cycleConnections[t], Object.keys(this.incommingConnections[t]).forEach((n) => {
-      this.removeConnection(n);
-    }), delete this.incommingConnections[t], Object.keys(this.outcommingConnections[t]).forEach((n) => {
-      this.removeConnection(n);
+    Object.keys(this.cycleConnections[t]).forEach((r) => {
+      this.removeConnection(r);
+    }), delete this.cycleConnections[t], Object.keys(this.incommingConnections[t]).forEach((r) => {
+      this.removeConnection(r);
+    }), delete this.incommingConnections[t], Object.keys(this.outcommingConnections[t]).forEach((r) => {
+      this.removeConnection(r);
     }), delete this.outcommingConnections[t];
     const e = this.portNodeId[t];
     delete this.portNodeId[t];
-    const o = this.nodePorts[e];
-    delete o[t], delete this.ports[t];
+    const s = this.nodePorts[e];
+    delete s[t], delete this.ports[t];
   }
-  addConnection(t, e, o, n) {
+  addConnection(t, e, s, r) {
     this.connections[t] = {
       from: e,
-      to: o,
-      controller: n
-    }, e !== o ? (this.outcommingConnections[e][t] = !0, this.incommingConnections[o][t] = !0) : this.cycleConnections[e][t] = !0;
+      to: s,
+      controller: r
+    }, e !== s ? (this.outcommingConnections[e][t] = !0, this.incommingConnections[s][t] = !0) : this.cycleConnections[e][t] = !0;
   }
   getConnection(t) {
     return this.connections[t];
@@ -323,8 +323,8 @@ class R {
     return this.connections[t] !== void 0;
   }
   removeConnection(t) {
-    const e = this.connections[t], o = e.from, n = e.to;
-    delete this.cycleConnections[o][t], delete this.cycleConnections[n][t], delete this.incommingConnections[o][t], delete this.incommingConnections[n][t], delete this.outcommingConnections[o][t], delete this.outcommingConnections[n][t], delete this.connections[t];
+    const e = this.connections[t], s = e.from, r = e.to;
+    delete this.cycleConnections[s][t], delete this.cycleConnections[r][t], delete this.incommingConnections[s][t], delete this.incommingConnections[r][t], delete this.outcommingConnections[s][t], delete this.outcommingConnections[r][t], delete this.connections[t];
   }
   getPortAdjacentConnections(t) {
     return [
@@ -354,238 +354,308 @@ class R {
   }
   getNodeIncomingConnections(t) {
     const e = Object.keys(this.nodePorts[t]);
-    let o = [];
-    return e.forEach((n) => {
-      o = [...o, ...this.getPortIncomingConnections(n)];
-    }), o;
+    let s = [];
+    return e.forEach((r) => {
+      s = [...s, ...this.getPortIncomingConnections(r)];
+    }), s;
   }
   getNodeOutcomingConnections(t) {
     const e = Object.keys(this.nodePorts[t]);
-    let o = [];
-    return e.forEach((n) => {
-      o = [...o, ...this.getPortOutcomingConnections(n)];
-    }), o;
+    let s = [];
+    return e.forEach((r) => {
+      s = [...s, ...this.getPortOutcomingConnections(r)];
+    }), s;
   }
   getNodeCycleConnections(t) {
     const e = Object.keys(this.nodePorts[t]);
-    let o = [];
-    return e.forEach((n) => {
-      o = [...o, ...this.getPortCycleConnections(n)];
-    }), o;
-  }
-}
-class z {
-  constructor(t) {
-    this.graphStore = t;
-  }
-  getNode(t) {
-    const e = this.graphStore.getNode(t);
-    return e === void 0 ? null : { x: e.x, y: e.y, element: e.element };
-  }
-  getNodes(t) {
-    const e = Object.entries(this.graphStore.getAllNodes()).map(
-      ([o, n]) => ({
-        id: o,
-        x: n.x,
-        y: n.y,
-        element: n.element
-      })
-    );
-    if (t !== void 0) {
-      const o = /* @__PURE__ */ new Set();
-      return t.forEach((n) => {
-        o.add(n);
-      }), e.filter((n) => o.has(n.id));
-    }
-    return e;
+    let s = [];
+    return e.forEach((r) => {
+      s = [...s, ...this.getPortCycleConnections(r)];
+    }), s;
   }
 }
 class v {
   static getPortCenter(t) {
-    const { top: e, left: o, width: n, height: i } = t.element.getBoundingClientRect(), h = t.centerFn(n, i);
-    return [o + h[0], e + h[1]];
+    const { top: e, left: s, width: r, height: a } = t.element.getBoundingClientRect(), c = t.centerFn(r, a);
+    return [s + c[0], e + c[1]];
   }
-  static rotate(t, e, o) {
+  static rotate(t, e, s) {
     return [
-      e[0] * t[0] - e[1] * t[1] + ((1 - e[0]) * o[0] + e[1] * o[1]),
-      e[1] * t[0] + e[0] * t[1] + ((1 - e[0]) * o[1] - e[1] * o[0])
+      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, o) {
-    return [e * Math.cos(t ?? 0), o * Math.sin(t ?? 0)];
+  static getDirectionVector(t, e, s) {
+    return [e * Math.cos(t ?? 0), s * Math.sin(t ?? 0)];
   }
-  static getArrowPath(t, e, o, n, i) {
-    const a = [
+  static getArrowPath(t, e, s, r, a) {
+    const h = [
       [0, 0],
-      [n, i],
-      [n, -i]
-    ].map((d) => this.rotate(d, t, [0, 0])).map((d) => [d[0] + e, d[1] + o]), c = `M ${a[0][0]} ${a[0][1]}`, l = `L ${a[1][0]} ${a[1][1]}`, g = `L ${a[2][0]} ${a[2][1]}`;
-    return `${c} ${l} ${g}`;
-  }
-  static getArrowOffsetPath(t, e, o, n, i) {
-    const a = [
-      [n, 0],
-      [n + i, 0]
-    ].map((c) => this.rotate(c, t, [0, 0])).map((c) => [c[0] + e, c[1] + o]);
-    return `M ${a[0][0]} ${a[0][1]} L ${a[1][0]} ${a[1][1]}`;
+      [r, a],
+      [r, -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, r, a) {
+    const h = [
+      [r, 0],
+      [r + 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, o, n, i, h, a) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow", null);
-    r(this, "targetArrow", null);
-    this.color = t, this.width = e, this.curvature = o, this.arrowLength = n, this.arrowWidth = i, this.hasSourceArrow = h, this.hasTargetArrow = 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%", this.hasSourceArrow && (this.sourceArrow = document.createElementNS(
+class B {
+  constructor(t, e, s, r, a, c, h) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "sourceArrow", null);
+    n(this, "targetArrow", null);
+    this.color = t, this.width = e, this.curvature = s, this.arrowLength = r, 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(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (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, o, n, i, h) {
-    this.svg.style.width = `${o}px`, this.svg.style.height = `${n}px`;
-    const a = v.getPortCenter(i), c = v.getPortCenter(h), l = a[0] <= c[0] ? 1 : -1, g = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${g})`;
-    const d = v.getDirectionVector(
-      i.direction,
-      l,
-      g
-    ), m = v.getDirectionVector(
-      h.direction,
-      l,
-      g
-    ), u = v.rotate(
-      [this.arrowLength, 0],
-      d,
-      [0, 0]
-    ), p = v.rotate(
-      [o - this.arrowLength, n],
-      m,
-      [o, n]
-    ), C = [
-      u[0] + d[0] * this.curvature,
-      u[1] + d[1] * this.curvature
-    ], w = [
-      p[0] - m[0] * this.curvature,
-      p[1] - m[1] * this.curvature
-    ], b = `M ${u[0]} ${u[1]}`, T = `C ${C[0]} ${C[1]}, ${w[0]} ${w[1]}, ${p[0]} ${p[1]}`, S = `M 0 0 L ${u[0]} ${u[1]} `, f = ` M ${p[0]} ${p[1]} L ${o} ${n}`, y = `${this.sourceArrow ? "" : S}${b} ${T}${this.targetArrow ? "" : f}`;
-    if (this.line.setAttribute("d", y), this.sourceArrow) {
-      const N = v.getArrowPath(
-        d,
+  update(t, e, s, r, a, c) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${r}px`;
+    const h = v.getPortCenter(a), i = v.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 = v.getDirectionVector(a.direction, d, g), u = v.getDirectionVector(c.direction, d, g), w = v.rotate([this.arrowLength, 0], l, [0, 0]), m = v.rotate([s - this.arrowLength, r], u, [
+      s,
+      r
+    ]), p = [
+      w[0] + l[0] * this.curvature,
+      w[1] + l[1] * this.curvature
+    ], C = [
+      m[0] - u[0] * this.curvature,
+      m[1] - u[1] * this.curvature
+    ], f = `M ${w[0]} ${w[1]} C ${p[0]} ${p[1]}, ${C[0]} ${C[1]}, ${m[0]} ${m[1]}`, y = this.sourceArrow ? "" : `M 0 0 L ${w[0]} ${w[1]} `, b = this.targetArrow ? "" : ` M ${m[0]} ${m[1]} L ${s} ${r}`, E = `${y}${f}${b}`;
+    if (this.line.setAttribute("d", E), this.sourceArrow) {
+      const $ = v.getArrowPath(
+        l,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", N);
+      this.sourceArrow.setAttribute("d", $);
     }
     if (this.targetArrow) {
-      const N = v.getArrowPath(
-        m,
-        o,
-        n,
+      const $ = v.getArrowPath(
+        u,
+        s,
+        r,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", N);
+      this.targetArrow.setAttribute("d", $);
     }
   }
 }
-const B = (s) => () => new G(
-  s.color ?? "#5c5c5c",
-  s.width ?? 1,
-  s.curvature ?? 90,
-  s.arrowLength ?? 15,
-  s.arrowWidth ?? 4,
-  s.hasSourceArrow ?? !1,
-  s.hasTargetArrow ?? !1
-);
-class Y {
-  constructor(t, e, o, n, i, h, a) {
-    r(this, "svg");
-    r(this, "group");
-    r(this, "line");
-    r(this, "sourceArrow", null);
-    r(this, "targetArrow", null);
-    this.color = t, this.width = e, this.arrowLength = o, this.arrowWidth = n, this.minPortOffset = i, this.hasSourceArrow = h, this.hasTargetArrow = 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%", this.hasSourceArrow && (this.sourceArrow = document.createElementNS(
+class z {
+  constructor(t, e, s, r, a, c, h, i) {
+    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 = r, this.minPortOffset = a, this.roundness = Math.min(this.minPortOffset, 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(
       "http://www.w3.org/2000/svg",
       "path"
-    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = document.createElementNS(
+    ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (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, o, n, i, h) {
-    this.svg.style.width = `${o}px`, this.svg.style.height = `${n}px`;
-    const a = v.getPortCenter(i), c = v.getPortCenter(h), l = a[0] <= c[0] ? 1 : -1, g = a[1] <= c[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${g})`;
-    const d = v.getDirectionVector(
-      i.direction,
-      l,
-      g
-    ), m = v.getDirectionVector(
-      h.direction,
+  update(t, e, s, r, a, c) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${r}px`;
+    const h = v.getPortCenter(a), i = v.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 = v.getDirectionVector(a.direction, d, g), u = v.getDirectionVector(c.direction, d, g);
+    console.log(this.roundness);
+    const w = this.arrowLength + this.minPortOffset, m = v.rotate([w, 0], l, [0, 0]), p = v.rotate([s - w, r], u, [s, r]), [C, f] = [s / 2, r / 2], b = d * (p[0] - m[0]) > 0 ? v.createStraightPath([
+      [m[0], m[1]],
+      [C, m[1]],
+      [C, p[1]],
+      [p[0], p[1]]
+    ]) : v.createStraightPath([
+      [m[0], m[1]],
+      [m[0], f],
+      [p[0], f],
+      [p[0], p[1]]
+    ]), E = v.getArrowOffsetPath(
       l,
-      g
-    ), u = v.rotate(
-      [this.arrowLength + this.minPortOffset, 0],
-      d,
-      [0, 0]
-    ), p = v.rotate(
-      [o - this.arrowLength - this.minPortOffset, n],
-      m,
-      [o, n]
-    ), [C, w] = [o / 2, n / 2], b = l * (p[0] - u[0]) > 0 ? `M ${u[0]} ${u[1]} L ${C} ${u[1]} L ${C} ${p[1]} L ${p[0]} ${p[1]}` : `M ${u[0]} ${u[1]} L ${u[0]} ${w} L ${p[0]} ${w} L ${p[0]} ${p[1]}`, T = `M 0 0 L ${u[0]} ${u[1]} `, S = ` M ${p[0]} ${p[1]} L ${o} ${n}`, f = v.getArrowOffsetPath(
-      d,
       0,
       0,
       this.arrowLength,
       this.minPortOffset
-    ), y = v.getArrowOffsetPath(
-      m,
-      o,
-      n,
+    ), $ = v.getArrowOffsetPath(
+      u,
+      s,
+      r,
       -this.arrowLength,
       -this.minPortOffset
-    ), N = `${this.sourceArrow ? f : T}${b}${this.targetArrow ? y : S}`;
-    if (this.line.setAttribute("d", N), this.sourceArrow) {
-      const E = v.getArrowPath(
-        d,
+    ), N = `M 0 0 L ${m[0]} ${m[1]} `, A = ` M ${p[0]} ${p[1]} L ${s} ${r}`, P = this.sourceArrow ? E : N, L = this.targetArrow ? $ : A, V = `${P}${b}${L}`;
+    if (this.line.setAttribute("d", V), this.sourceArrow) {
+      const x = v.getArrowPath(
+        l,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", E);
+      this.sourceArrow.setAttribute("d", x);
     }
     if (this.targetArrow) {
-      const E = v.getArrowPath(
-        m,
-        o,
-        n,
+      const x = v.getArrowPath(
+        u,
+        s,
+        r,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", E);
+      this.targetArrow.setAttribute("d", x);
+    }
+  }
+}
+class Y {
+  constructor(t, e, s, r, a, c, h) {
+    n(this, "svg");
+    n(this, "group");
+    n(this, "line");
+    n(this, "arrow", null);
+    this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = r, 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(
+      "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, r, a) {
+    this.svg.style.transform = `translate(${t}px, ${e}px)`;
+    const c = v.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 = [
+      [this.arrowLength, 0],
+      [l, u],
+      [l, -u]
+    ].map((y) => v.rotate(y, c, [0, 0])), p = [
+      `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(" "), C = `M 0 0 L ${m[0][0]} ${m[0][1]} `, f = `${this.arrow !== null ? "" : C}${p}`;
+    if (this.line.setAttribute("d", f), this.arrow) {
+      const y = v.getArrowPath(
+        c,
+        0,
+        0,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.arrow.setAttribute("d", y);
     }
   }
 }
-const X = (s) => () => new Y(
-  s.color,
-  s.width,
-  s.arrowLength,
-  s.arrowWidth,
-  s.minPortOffset,
-  s.hasSourceArrow,
-  s.hasTargetArrow
+class G {
+  constructor(t, e, s, r, a, c, h, i) {
+    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 = r, 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(
+      "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, w = l - u, m = l + u, p = g - u, C = l + 2 * g, f = C - u;
+    console.log(u), this.points = [
+      [this.arrowLength, 0],
+      [w, 0],
+      [l, u],
+      [l, p],
+      [m, g],
+      [f, g],
+      [C, p],
+      [C, -p],
+      [f, -g],
+      [m, -g],
+      [l, -p],
+      [l, -u]
+    ];
+  }
+  update(t, e, s, r, a) {
+    this.svg.style.transform = `translate(${t}px, ${e}px)`;
+    const c = v.getDirectionVector(a.direction, 1, 1), h = this.roundness, i = this.points.map((u) => v.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}`;
+    if (this.line.setAttribute("d", l), this.arrow) {
+      const u = v.getArrowPath(
+        c,
+        0,
+        0,
+        this.arrowLength,
+        this.arrowWidth
+      );
+      this.arrow.setAttribute("d", u);
+    }
+  }
+}
+var T = /* @__PURE__ */ ((o) => (o.Regular = "regular", o.Cycle = "cycle", o))(T || {});
+const X = (o) => (t) => t === "cycle" ? new Y(
+  o.color,
+  o.width,
+  o.arrowLength,
+  o.arrowWidth,
+  o.hasSourceArrow || o.hasTargetArrow,
+  o.cycleRadius,
+  o.smallCycleRadius
+) : new B(
+  o.color,
+  o.width,
+  o.curvature,
+  o.arrowLength,
+  o.arrowWidth,
+  o.hasSourceArrow,
+  o.hasTargetArrow
+), Z = (o) => (t) => t === T.Cycle && t === "cycle" ? new G(
+  o.color,
+  o.width,
+  o.arrowLength,
+  o.arrowWidth,
+  o.hasSourceArrow || o.hasTargetArrow,
+  o.cycleSquareSide,
+  o.minPortOffset,
+  o.roundness
+) : new z(
+  o.color,
+  o.width,
+  o.arrowLength,
+  o.arrowWidth,
+  o.minPortOffset,
+  o.hasSourceArrow,
+  o.hasTargetArrow,
+  o.roundness
 );
-var P = /* @__PURE__ */ ((s) => (s.Regular = "regular", s.Cycle = "cycle", s))(P || {});
-class A {
+class S {
   constructor() {
-    r(this, "counter", 0);
+    n(this, "counter", 0);
   }
   next() {
     const t = `${this.counter}`;
@@ -595,19 +665,19 @@ class A {
     this.counter = 0;
   }
 }
-class Z {
-  constructor(t, e, o, n, i) {
-    r(this, "nodeIdGenerator", new A());
-    r(this, "portIdGenerator", new A());
-    r(this, "connectionIdGenerator", new A());
-    this.graphStore = t, this.htmlController = e, this.viewportTransformer = o, this.nodesCenterFn = n, this.portsCenterFn = i;
+class U {
+  constructor(t, e, s, r, a) {
+    n(this, "nodeIdGenerator", new S());
+    n(this, "portIdGenerator", new S());
+    n(this, "connectionIdGenerator", new S());
+    this.graphStore = t, this.htmlController = e, this.viewportTransformer = s, this.nodesCenterFn = r, this.portsCenterFn = a;
   }
   moveNodeOnTop(t) {
     if (!this.graphStore.hasNode(t))
       throw new Error("failed to move on top nonexisting node");
     this.htmlController.moveNodeOnTop(t);
   }
-  addNode(t, e, o, n, i, h) {
+  addNode(t, e, s, r, a, c) {
     if (t === void 0)
       do
         t = this.nodeIdGenerator.next();
@@ -617,34 +687,34 @@ class Z {
     this.graphStore.addNode(
       t,
       e,
-      o,
-      n,
-      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, null) : this.markPort(
-        a,
-        c.element,
+      s,
+      r,
+      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,
         t,
-        c.centerFn ?? this.portsCenterFn,
-        c.direction ?? null
+        i.centerFn ?? this.portsCenterFn,
+        i.direction ?? null
       );
     });
   }
-  markPort(t, e, o, n, i) {
+  markPort(t, e, s, r, a) {
     if (t === void 0)
       do
         t = this.portIdGenerator.next();
       while (this.graphStore.hasPort(t));
-    if (!this.graphStore.hasNode(o))
+    if (!this.graphStore.hasNode(s))
       throw new Error("failed to set port on nonexisting node");
     if (this.graphStore.hasPort(t))
       throw new Error("failed to add port with existing id");
     this.graphStore.addPort(
       t,
       e,
-      o,
-      n ?? this.portsCenterFn,
-      i ?? null
+      s,
+      r ?? this.portsCenterFn,
+      a ?? null
     );
   }
   updatePortConnections(t) {
@@ -659,20 +729,21 @@ class Z {
       this.removeConnection(e);
     }), this.graphStore.removePort(t);
   }
-  addConnection(t, e, o, n) {
+  addConnection(t, e, s, r) {
     if (t === void 0)
       do
         t = this.connectionIdGenerator.next();
       while (this.graphStore.hasConnection(t));
     if (!this.graphStore.hasPort(e))
       throw new Error("failed to add connection from nonexisting port");
-    if (!this.graphStore.hasPort(o))
+    if (!this.graphStore.hasPort(s))
       throw new Error("failed to add connection to nonexisting port");
-    this.graphStore.addConnection(
+    let a = T.Regular;
+    e === s && (a = T.Cycle), this.graphStore.addConnection(
       t,
       e,
-      o,
-      n(P.Regular)
+      s,
+      r(a)
     ), this.htmlController.attachConnection(t);
   }
   removeConnection(t) {
@@ -685,25 +756,25 @@ class Z {
       throw new Error("failed to remove nonexisting node");
     this.htmlController.detachNode(t), this.graphStore.removeNode(t);
   }
-  patchViewportState(t, e, o) {
-    this.viewportTransformer.patchState(t, e, o), this.htmlController.applyTransform();
+  patchViewportState(t, e, s) {
+    this.viewportTransformer.patchState(t, e, s), this.htmlController.applyTransform();
   }
   moveToNodes(t) {
     if (t.length === 0)
       return;
-    const e = t.map((m) => this.graphStore.getNode(m)).filter((m) => m !== 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 [o, n] = e.reduce(
-      (m, u) => [m[0] + u.x, m[1] + u.y],
+    const [s, r] = e.reduce(
+      (u, w) => [u[0] + w.x, u[1] + w.y],
       [0, 0]
-    ), i = o / e.length, h = n / e.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), g = i - l * a / 2, d = h - l * c / 2;
-    this.patchViewportState(null, g, d);
+    ), a = s / e.length, c = r / 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);
   }
-  updateNodeCoordinates(t, e, o) {
+  updateNodeCoordinates(t, e, s) {
     if (!this.graphStore.hasNode(t))
       throw new Error("failed to update coordinates of nonexisting node");
-    this.graphStore.updateNodeCoords(t, e, o), this.htmlController.updateNodeCoordinates(t);
+    this.graphStore.updateNodeCoords(t, e, s), this.htmlController.updateNodeCoordinates(t);
   }
   updateConnectionController(t, e) {
     if (!this.graphStore.hasConnection(t))
@@ -724,138 +795,138 @@ class Z {
   }
 }
 class H {
-  constructor(t, e, o, n) {
-    r(this, "publicViewportTransformer");
-    r(this, "publicGraphStore");
-    r(this, "canvasController");
-    const i = new D(), h = new R();
-    this.publicViewportTransformer = new W(
-      i
-    ), this.publicGraphStore = new z(h);
-    const a = new j(
-      h,
-      i,
+  constructor(t, e, s, r) {
+    n(this, "publicViewportTransformer");
+    n(this, "canvasController");
+    const a = new W(), c = new R();
+    this.publicViewportTransformer = new j(
+      a
+    );
+    const h = new k(
+      c,
+      a,
       this.publicViewportTransformer,
       t,
       e
     );
-    this.canvasController = new Z(
+    this.canvasController = new U(
+      c,
       h,
       a,
-      i,
-      o,
-      n
+      s,
+      r
     );
   }
 }
-const $ = (s, t) => [
-  s / 2,
+const M = (o, t) => [
+  o / 2,
   t / 2
-], U = () => () => {
-}, J = (s, t, e, o, n, i) => {
-  s.clearRect(0, 0, s.canvas.width, s.canvas.height), s.fillStyle = i, s.fillRect(0, 0, s.canvas.width, s.canvas.height);
-  const h = t.getViewCoords(0, 0), a = t.getViewScale(), c = o * a;
-  let l = 0, g = 0, d = c / 2;
+], _ = () => () => {
+}, q = (o, t, e, s, r, a) => {
+  o.clearRect(0, 0, o.canvas.width, o.canvas.height), o.fillStyle = a, o.fillRect(0, 0, o.canvas.width, o.canvas.height);
+  const c = t.getViewCoords(0, 0), h = t.getViewScale(), i = s * h;
+  let d = 0, g = 0, l = i / 2;
   do
-    d *= 2, l = s.canvas.width / d, g = s.canvas.height / d;
-  while (l * g > 1e4);
-  const m = h[0] - Math.floor(h[0] / d) * d, u = h[1] - Math.floor(h[1] / d) * d, p = n * a, C = 2 * Math.PI, w = m - d, b = u - d, T = s.canvas.width + m, S = s.canvas.height + u;
-  s.fillStyle = e;
-  for (let f = w; f <= T; f += d)
-    for (let y = b; y <= S; y += d)
-      s.beginPath(), s.arc(f, y, p, 0, C), s.closePath(), s.fill();
-}, K = (s, t, e, o) => (n, i) => {
-  J(
-    n,
-    i,
-    s,
+    l *= 2, d = o.canvas.width / l, g = o.canvas.height / l;
+  while (d * g > 1e4);
+  const u = c[0] - Math.floor(c[0] / l) * l, w = c[1] - Math.floor(c[1] / l) * l, m = r * h, p = 2 * Math.PI, C = u - l, f = w - l, y = o.canvas.width + u, b = o.canvas.height + w;
+  o.fillStyle = e;
+  for (let E = C; E <= y; E += l)
+    for (let $ = f; $ <= b; $ += l)
+      o.beginPath(), o.arc(E, $, m, 0, p), o.closePath(), o.fill();
+}, J = (o, t, e, s) => (r, a) => {
+  q(
+    r,
+    a,
+    o,
     t,
     e,
-    o
+    s
   );
-}, Q = (s, t) => {
-  s.fillStyle = t, s.fillRect(0, 0, s.canvas.width, s.canvas.height);
-}, _ = (s) => (t) => {
-  Q(t, s);
-}, q = (s) => {
-  switch (s == null ? void 0 : s.type) {
+}, K = (o, t) => {
+  o.fillStyle = t, o.fillRect(0, 0, o.canvas.width, o.canvas.height);
+}, Q = (o) => (t) => {
+  K(t, o);
+}, I = (o) => {
+  switch (o == null ? void 0 : o.type) {
     case "custom":
-      return s.drawingFn;
+      return o.drawingFn;
     case "dots":
-      return K(
-        s.dotColor ?? "#d8d8d8",
-        s.dotGap ?? 25,
-        s.dotRadius ?? 1.5,
-        s.color ?? "#ffffff"
+      return J(
+        o.dotColor ?? "#d8d8d8",
+        o.dotGap ?? 25,
+        o.dotRadius ?? 1.5,
+        o.color ?? "#ffffff"
       );
     case "color":
-      return _(s.color ?? "#ffffff");
+      return Q(o.color ?? "#ffffff");
     default:
-      return U();
+      return _();
   }
-}, M = (s) => {
-  switch (s == null ? void 0 : s.type) {
+}, O = (o) => {
+  switch (o == null ? void 0 : o.type) {
     case "custom":
-      return s.controllerFactory;
+      return o.controllerFactory;
     case "straight":
-      return X({
-        color: s.color ?? "#5c5c5c",
-        width: s.width ?? 1,
-        arrowLength: s.arrowLength ?? 15,
-        arrowWidth: s.arrowWidth ?? 4,
-        minPortOffset: s.minPortOffset ?? 15,
-        hasSourceArrow: s.hasSourceArrow ?? !1,
-        hasTargetArrow: s.hasTargetArrow ?? !1
+      return Z({
+        color: o.color ?? "#5c5c5c",
+        width: o.width ?? 1,
+        arrowLength: o.arrowLength ?? 15,
+        arrowWidth: o.arrowWidth ?? 4,
+        minPortOffset: o.minPortOffset ?? 15,
+        hasSourceArrow: o.hasSourceArrow ?? !1,
+        hasTargetArrow: o.hasTargetArrow ?? !1,
+        cycleSquareSide: o.cycleSquareSide ?? 30,
+        roundness: o.roundness ?? 5
       });
     default:
-      return B({
-        color: s.color ?? "#5c5c5c",
-        width: s.width ?? 1,
-        curvature: s.curvature ?? 90,
-        arrowLength: s.arrowLength ?? 15,
-        arrowWidth: s.arrowWidth ?? 4,
-        hasSourceArrow: s.hasSourceArrow ?? !1,
-        hasTargetArrow: s.hasTargetArrow ?? !1
+      return X({
+        color: o.color ?? "#5c5c5c",
+        width: o.width ?? 1,
+        curvature: o.curvature ?? 90,
+        arrowLength: o.arrowLength ?? 15,
+        arrowWidth: o.arrowWidth ?? 4,
+        hasSourceArrow: o.hasSourceArrow ?? !1,
+        hasTargetArrow: o.hasTargetArrow ?? !1,
+        cycleRadius: o.cycleRadius ?? 30,
+        smallCycleRadius: o.smallCycleRadius ?? 15
       });
   }
-}, I = (s) => {
-  var t, e, o;
+}, tt = (o) => {
+  var t, e, s;
   return {
     background: {
-      drawingFn: q(
-        s.background ?? { type: "none" }
+      drawingFn: I(
+        o.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((t = s.nodes) == null ? void 0 : t.centerFn) ?? $
+      centerFn: ((t = o.nodes) == null ? void 0 : t.centerFn) ?? M
     },
     ports: {
-      centerFn: ((e = s.ports) == null ? void 0 : e.centerFn) ?? $
+      centerFn: ((e = o.ports) == null ? void 0 : e.centerFn) ?? M
     },
-    connections: {
-      controllerFactory: M(
-        s.connections ?? {}
-      )
+    edges: {
+      controllerFactory: O(o.edges ?? {})
     },
     layers: {
-      mode: ((o = s.layers) == null ? void 0 : o.mode) ?? "connections-follow-node"
+      mode: ((s = o.layers) == null ? void 0 : s.mode) ?? "edges-follow-node"
     }
   };
 };
-class tt {
+class et {
   constructor(t) {
-    r(this, "transformation");
-    r(this, "model");
-    r(this, "di");
-    r(this, "connectionControllerFactory");
+    n(this, "transformation");
+    n(this, "di");
+    n(this, "connectionControllerFactory");
     this.apiOptions = t;
-    const e = I(this.apiOptions ?? {});
+    const e = tt(this.apiOptions ?? {});
     this.di = new H(
       e.layers.mode,
       e.background.drawingFn,
       e.nodes.centerFn,
       e.ports.centerFn
-    ), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore, this.connectionControllerFactory = e.connections.controllerFactory;
+    ), this.transformation = this.di.publicViewportTransformer, this.connectionControllerFactory = e.edges.controllerFactory;
   }
   addNode(t) {
     return this.di.canvasController.addNode(
@@ -882,14 +953,14 @@ class tt {
       t.direction
     ), this;
   }
-  updatePortConnections(t) {
+  updatePortEdges(t) {
     return this.di.canvasController.updatePortConnections(t), this;
   }
   unmarkPort(t) {
     return this.di.canvasController.unmarkPort(t), this;
   }
-  addConnection(t) {
-    const e = t.options !== void 0 ? M(t.options) : this.connectionControllerFactory;
+  addEdge(t) {
+    const e = t.options !== void 0 ? O(t.options) : this.connectionControllerFactory;
     return this.di.canvasController.addConnection(
       t.id,
       t.from,
@@ -897,7 +968,7 @@ class tt {
       e
     ), this;
   }
-  removeConnection(t) {
+  removeEdge(t) {
     return this.di.canvasController.removeConnection(t), this;
   }
   patchViewportState(t) {
@@ -910,8 +981,8 @@ class tt {
   moveToNodes(t) {
     return this.di.canvasController.moveToNodes(t), this;
   }
-  updateNodeCoordinates(t, e, o) {
-    return this.di.canvasController.updateNodeCoordinates(t, e, o), this;
+  updateNodeCoordinates(t, e, s) {
+    return this.di.canvasController.updateNodeCoordinates(t, e, s), this;
   }
   updateConnection(t, e) {
     return e.controller !== void 0 && this.di.canvasController.updateConnectionController(
@@ -932,50 +1003,54 @@ class tt {
     this.di.canvasController.destroy();
   }
 }
-class et {
+class st {
   constructor(t, e) {
-    r(this, "transformation");
-    r(this, "model");
-    r(this, "nodes", /* @__PURE__ */ new Map());
-    r(this, "grabbedNodeId", null);
-    r(this, "onNodeDrag");
-    r(this, "nodeIdGenerator", new A());
-    r(this, "element", null);
-    r(this, "onCanvasMouseUp", () => {
+    n(this, "transformation");
+    n(this, "nodes", /* @__PURE__ */ new Map());
+    n(this, "grabbedNodeId", null);
+    n(this, "onNodeDrag");
+    n(this, "onBeforeNodeDrag");
+    n(this, "nodeIdGenerator", new S());
+    n(this, "element", null);
+    n(this, "onCanvasMouseUp", () => {
       this.setCursor(null), this.grabbedNodeId = null;
     });
-    r(this, "onCanvasMouseMove", (t) => {
+    n(this, "onCanvasMouseMove", (t) => {
       this.grabbedNodeId !== null && (t.stopPropagation(), this.dragNode(this.grabbedNodeId, t.movementX, t.movementY));
     });
-    r(this, "onCanvasTouchStart", (t) => {
+    n(this, "onCanvasTouchStart", (t) => {
       this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ];
     });
-    r(this, "onCanvasTouchMove", (t) => {
+    n(this, "onCanvasTouchMove", (t) => {
       if (this.grabbedNodeId === null || t.touches.length !== 1 || this.previousTouchCoords === null)
         return;
       t.stopImmediatePropagation();
-      const [e, o] = [
+      const [e, s] = [
         t.touches[0].clientX - this.previousTouchCoords[0],
         t.touches[0].clientY - this.previousTouchCoords[1]
       ];
-      this.dragNode(this.grabbedNodeId, e, o), this.previousTouchCoords = [
+      this.dragNode(this.grabbedNodeId, e, s), this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ];
     });
-    r(this, "onCanvasTouchEnd", (t) => {
+    n(this, "onCanvasTouchEnd", (t) => {
       t.touches.length > 0 ? this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
     });
-    r(this, "previousTouchCoords", null);
-    var o;
-    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.onNodeDrag = ((o = e == null ? void 0 : e.events) == null ? void 0 : o.onNodeDrag) ?? (() => {
-    });
+    n(this, "previousTouchCoords", null);
+    var a, c;
+    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;
+    const r = () => !0;
+    this.onBeforeNodeDrag = ((c = e == null ? void 0 : e.events) == null ? void 0 : c.onBeforeNodeDrag) ?? r;
   }
   addNode(t) {
     let e = t.id;
@@ -984,35 +1059,47 @@ class et {
         e = this.nodeIdGenerator.next();
       while (this.nodes.has(e));
     this.canvas.addNode(t);
-    const o = (i) => {
-      i.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e);
-    }, n = (i) => {
-      i.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
+    const s = (a) => {
+      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));
+    }, r = (a) => {
+      this.onBeforeNodeDrag({
+        nodeId: e,
+        element: t.element,
+        x: t.x,
+        y: t.y
+      }) && a.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
     };
     return this.nodes.set(e, {
-      el: t.element,
-      onMouseDown: o,
-      onTouchStart: n
-    }), t.element.addEventListener("mousedown", o), t.element.addEventListener("touchstart", n), this;
+      element: t.element,
+      onMouseDown: s,
+      onTouchStart: r,
+      x: t.x,
+      y: t.y
+    }), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", r), this;
   }
   removeNode(t) {
     const e = this.nodes.get(t);
-    return e !== void 0 && (e.el.removeEventListener("mousedown", e.onMouseDown), e.el.removeEventListener("touchstart", e.onTouchStart)), this.canvas.removeNode(t), this.nodes.delete(t), this;
+    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;
   }
   markPort(t) {
     return this.canvas.markPort(t), this;
   }
-  updatePortConnections(t) {
-    return this.canvas.updatePortConnections(t), this;
+  updatePortEdges(t) {
+    return this.canvas.updatePortEdges(t), this;
   }
   unmarkPort(t) {
     return this.canvas.unmarkPort(t), this;
   }
-  addConnection(t) {
-    return this.canvas.addConnection(t), this;
+  addEdge(t) {
+    return this.canvas.addEdge(t), this;
   }
-  removeConnection(t) {
-    return this.canvas.removeConnection(t), this;
+  removeEdge(t) {
+    return this.canvas.removeEdge(t), this;
   }
   patchViewportState(t) {
     return this.canvas.patchViewportState(t), this;
@@ -1020,8 +1107,8 @@ class et {
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
   }
-  updateNodeCoordinates(t, e, o) {
-    return this.canvas.updateNodeCoordinates(t, e, o), this;
+  updateNodeCoordinates(t, e, s) {
+    return this.canvas.updateNodeCoordinates(t, e, s), this;
   }
   updateConnection(t, e) {
     return this.canvas.updateConnection(t, e), this;
@@ -1031,67 +1118,72 @@ class et {
   }
   clear() {
     return this.canvas.clear(), this.nodes.forEach((t) => {
-      t.el.removeEventListener("mousedown", t.onMouseDown), t.el.removeEventListener("touchstart", t.onTouchStart);
+      t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
     }), this.nodes.clear(), this;
   }
   attach(t) {
-    return this.canvas.attach(t), this.element = t, 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;
+    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;
   }
   detach() {
     return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mouseup", this.onCanvasMouseUp), this.element.removeEventListener("mousemove", this.onCanvasMouseMove), this.element.removeEventListener("touchstart", this.onCanvasTouchStart), this.element.removeEventListener("touchmove", this.onCanvasTouchMove), this.element.removeEventListener("touchend", this.onCanvasTouchEnd), this.element.removeEventListener("touchcancel", this.onCanvasTouchEnd), this.element = null), this;
   }
   destroy() {
     this.detach(), this.nodes.forEach((t) => {
-      t.el.removeEventListener("mousedown", t.onMouseDown), t.el.removeEventListener("touchstart", t.onTouchStart);
+      t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
     }), this.nodes.clear(), this.canvas.destroy();
   }
   setCursor(t) {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
-  dragNode(t, e, o) {
-    const n = this.model.getNode(t);
-    if (n === null)
+  dragNode(t, e, s) {
+    const r = this.nodes.get(t);
+    if (r === void 0)
       throw new Error("failed to drag nonexisting node");
-    const [i, h] = this.transformation.getViewCoords(n.x, n.y), a = i + e, c = h + o, [l, g] = this.transformation.getAbsCoords(a, c);
-    this.canvas.updateNodeCoordinates(t, l, g), this.onNodeDrag(t);
+    const [a, c] = this.transformation.getViewCoords(r.x, r.y), h = a + e, i = c + s, [d, g] = this.transformation.getAbsCoords(h, i);
+    r.x = d, r.y = g, this.canvas.updateNodeCoordinates(t, d, g), this.onNodeDrag({
+      nodeId: t,
+      element: r.element,
+      x: r.x,
+      y: r.y
+    });
   }
 }
 class ot {
   constructor(t, e) {
-    r(this, "transformation");
-    r(this, "model");
-    r(this, "element", null);
-    r(this, "isMoving", !1);
-    r(this, "prevTouches", null);
-    r(this, "onTransform");
-    r(this, "isScalable");
-    r(this, "isShiftable");
-    r(this, "minViewScale");
-    r(this, "maxViewScale");
-    r(this, "wheelSensitivity");
-    r(this, "onMouseDown", () => {
+    n(this, "transformation");
+    n(this, "element", null);
+    n(this, "isMoving", !1);
+    n(this, "prevTouches", null);
+    n(this, "onTransform");
+    n(this, "onBeforeTransform");
+    n(this, "isScalable");
+    n(this, "isShiftable");
+    n(this, "minViewScale");
+    n(this, "maxViewScale");
+    n(this, "wheelSensitivity");
+    n(this, "onMouseDown", () => {
       this.setCursor("grab"), this.isMoving = !0;
     });
-    r(this, "onMouseMove", (t) => {
+    n(this, "onMouseMove", (t) => {
       if (!this.isMoving || !this.isShiftable)
         return;
-      const e = -t.movementX, o = -t.movementY;
-      this.moveViewport(e, o);
+      const e = -t.movementX, s = -t.movementY;
+      this.moveViewport(e, s);
     });
-    r(this, "onMouseUp", () => {
+    n(this, "onMouseUp", () => {
       this.setCursor(null), this.isMoving = !1;
     });
-    r(this, "onWheelScroll", (t) => {
+    n(this, "onWheelScroll", (t) => {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      const { left: e, top: o } = this.element.getBoundingClientRect(), n = t.clientX - e, i = t.clientY - o, a = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
-      this.scaleViewport(a, n, i);
+      const { left: e, top: s } = this.element.getBoundingClientRect(), r = t.clientX - e, a = t.clientY - s, h = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
+      this.scaleViewport(h, r, a);
     });
-    r(this, "onTouchStart", (t) => {
+    n(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
     });
-    r(this, "onTouchMove", (t) => {
+    n(this, "onTouchMove", (t) => {
       if (this.prevTouches === null || this.element === null || !this.isShiftable)
         return;
       const e = this.getAverageTouch(t);
@@ -1099,21 +1191,25 @@ class ot {
         -(e.x - this.prevTouches.x),
         -(e.y - this.prevTouches.y)
       ), e.touchesCnt === 2 && this.isScalable) {
-        const { left: o, top: n } = this.element.getBoundingClientRect(), i = this.prevTouches.x - o, h = this.prevTouches.y - n, c = 1 / (e.scale / this.prevTouches.scale);
-        this.scaleViewport(c, i, h);
+        const { left: s, top: r } = this.element.getBoundingClientRect(), a = this.prevTouches.x - s, c = this.prevTouches.y - r, i = 1 / (e.scale / this.prevTouches.scale);
+        this.scaleViewport(i, a, c);
       }
       this.prevTouches = e, t.preventDefault();
     });
-    r(this, "onTouchEnd", (t) => {
+    n(this, "onTouchEnd", (t) => {
       t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
     });
-    var h, a, c, l, g, d, m, u, p, C, w;
-    this.canvas = t, this.options = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
-    const o = ((a = (h = this.options) == null ? void 0 : h.scale) == null ? void 0 : a.minContent) ?? null, n = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.maxContent) ?? null;
-    this.isScalable = ((d = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : d.enabled) !== !1, this.minViewScale = n !== null ? 1 / n : null, this.maxViewScale = o !== null ? 1 / o : null, this.isShiftable = ((u = (m = this.options) == null ? void 0 : m.shift) == null ? void 0 : u.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, this.onTransform = ((w = e == null ? void 0 : e.events) == null ? void 0 : w.onTransform) ?? (() => {
-    });
+    var i, d, g, l, u, w, m, p, C, f, y, b;
+    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, r = ((l = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : l.max) ?? null;
+    this.isScalable = ((w = (u = this.options) == null ? void 0 : u.scale) == null ? void 0 : w.enabled) !== !1, this.minViewScale = r !== null ? 1 / r : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((p = (m = this.options) == null ? void 0 : m.shift) == null ? void 0 : p.enabled) !== !1;
+    const a = (f = (C = this.options) == null ? void 0 : C.scale) == null ? void 0 : f.wheelSensitivity;
+    this.wheelSensitivity = a !== void 0 ? a : 1.2;
+    const c = () => {
+    };
+    this.onTransform = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onTransform) ?? c;
+    const h = () => !0;
+    this.onBeforeTransform = ((b = e == null ? void 0 : e.events) == null ? void 0 : b.onBeforeTransform) ?? h;
   }
   addNode(t) {
     return this.canvas.addNode(t), this;
@@ -1124,17 +1220,17 @@ class ot {
   markPort(t) {
     return this.canvas.markPort(t), this;
   }
-  updatePortConnections(t) {
-    return this.canvas.updatePortConnections(t), this;
+  updatePortEdges(t) {
+    return this.canvas.updatePortEdges(t), this;
   }
   unmarkPort(t) {
     return this.canvas.unmarkPort(t), this;
   }
-  addConnection(t) {
-    return this.canvas.addConnection(t), this;
+  addEdge(t) {
+    return this.canvas.addEdge(t), this;
   }
-  removeConnection(t) {
-    return this.canvas.removeConnection(t), this;
+  removeEdge(t) {
+    return this.canvas.removeEdge(t), this;
   }
   patchViewportState(t) {
     return this.canvas.patchViewportState(t), this;
@@ -1142,8 +1238,8 @@ class ot {
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
   }
-  updateNodeCoordinates(t, e, o) {
-    return this.canvas.updateNodeCoordinates(t, e, o), this;
+  updateNodeCoordinates(t, e, s) {
+    return this.canvas.updateNodeCoordinates(t, e, s), this;
   }
   updateConnection(t, e) {
     return this.canvas.updateConnection(t, e), this;
@@ -1155,74 +1251,79 @@ class ot {
     return this.canvas.clear(), this;
   }
   attach(t) {
-    return this.canvas.attach(t), this.element = t, this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("mousemove", this.onMouseMove), this.element.addEventListener("mouseup", this.onMouseUp), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.element.addEventListener("touchmove", this.onTouchMove), this.element.addEventListener("touchend", this.onTouchEnd), this.element.addEventListener("touchcancel", this.onTouchEnd), this;
+    return this.detach(), this.element = t, this.canvas.attach(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("mousemove", this.onMouseMove), this.element.addEventListener("mouseup", this.onMouseUp), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.element.addEventListener("touchmove", this.onTouchMove), this.element.addEventListener("touchend", this.onTouchEnd), this.element.addEventListener("touchcancel", this.onTouchEnd), this;
   }
   detach() {
-    return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("mousemove", this.onMouseMove), this.element.removeEventListener("mouseup", this.onMouseUp), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("touchmove", this.onTouchMove), this.element.removeEventListener("touchend", this.onTouchEnd), this.element.removeEventListener("touchcancel", this.onTouchEnd)), this.element = null, this;
+    return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("mousemove", this.onMouseMove), this.element.removeEventListener("mouseup", this.onMouseUp), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("touchmove", this.onTouchMove), this.element.removeEventListener("touchend", this.onTouchEnd), this.element.removeEventListener("touchcancel", this.onTouchEnd), this.element = null), this;
   }
   destroy() {
     this.detach(), this.canvas.destroy();
   }
   getAverageTouch(t) {
-    const e = [], o = t.touches.length;
-    for (let c = 0; c < o; c++)
-      e.push([t.touches[c].clientX, t.touches[c].clientY]);
-    const n = e.reduce(
-      (c, l) => [c[0] + l[0], c[1] + l[1]],
+    const e = [], s = t.touches.length;
+    for (let i = 0; i < s; i++)
+      e.push([t.touches[i].clientX, t.touches[i].clientY]);
+    const r = e.reduce(
+      (i, d) => [i[0] + d[0], i[1] + d[1]],
       [0, 0]
-    ), i = [n[0] / o, n[1] / o], 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]),
+    ), a = [r[0] / s, r[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]),
       0
     );
-    return { x: i[0], y: i[1], scale: a / o, touchesCnt: o };
+    return { x: a[0], y: a[1], scale: h / s, touchesCnt: s };
   }
   setCursor(t) {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   moveViewport(t, e) {
-    const [o, n] = this.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale();
-    this.canvas.patchViewportState({
-      scale: i,
-      x: o + i * t,
-      y: n + i * e
-    }), this.onTransform();
+    const [s, r] = this.transformation.getAbsCoords(0, 0), a = this.canvas.transformation.getAbsScale(), c = {
+      scale: a,
+      x: s + a * t,
+      y: r + a * e
+    };
+    this.onBeforeTransform({ ...c }) && (this.canvas.patchViewportState(c), this.onTransform(c));
   }
-  scaleViewport(t, e, o) {
-    const [n, i] = this.canvas.transformation.getAbsCoords(0, 0), h = this.canvas.transformation.getAbsScale(), a = h * t, c = h * (1 - t) * e + n, l = h * (1 - t) * o + i;
-    this.maxViewScale !== null && a > this.maxViewScale && a > h || this.minViewScale !== null && a < this.minViewScale && a < h || (this.canvas.patchViewportState({ scale: a, x: c, y: l }), this.onTransform());
+  scaleViewport(t, e, s) {
+    const [r, a] = this.canvas.transformation.getAbsCoords(0, 0), c = this.canvas.transformation.getAbsScale(), h = c * t, i = c * (1 - t) * e + r, d = c * (1 - t) * s + a;
+    if (this.maxViewScale !== null && h > this.maxViewScale && h > c || this.minViewScale !== null && h < this.minViewScale && h < c)
+      return;
+    const g = { scale: h, x: i, y: d };
+    this.onBeforeTransform({ ...g }) && (this.canvas.patchViewportState(g), this.onTransform(g));
   }
 }
-class st {
+class nt {
   constructor() {
-    r(this, "coreOptions");
-    r(this, "dragOptions");
-    r(this, "transformOptions");
-    r(this, "isDraggable", !1);
-    r(this, "isTransformable", !1);
+    n(this, "coreOptions");
+    n(this, "dragOptions");
+    n(this, "transformOptions");
+    n(this, "isDraggable", !1);
+    n(this, "isTransformable", !1);
   }
   setOptions(t) {
     return this.coreOptions = t, this;
   }
-  setDraggableNodes(t) {
+  setUserDraggableNodes(t) {
     return this.isDraggable = !0, this.dragOptions = t, this;
   }
-  setTransformableCanvas(t) {
+  setUserTransformableCanvas(t) {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
-    let t = new tt(this.coreOptions);
-    return this.isDraggable && (t = new et(t, this.dragOptions)), this.isTransformable && (t = new ot(t, this.transformOptions)), t;
+    let t = new et(this.coreOptions);
+    return this.isDraggable && (t = new st(t, this.dragOptions)), this.isTransformable && (t = new ot(t, this.transformOptions)), t;
   }
 }
 export {
-  G as BezierConnectionController,
-  tt as CanvasCore,
-  P as ConnectionType,
-  v as ConnectionUtils,
-  et as DraggableNodesCanvas,
-  st as HtmlGraphBuilder,
-  Y as StraightConnectionController,
-  ot as TransformableCanvas,
-  B as createBezierConnectionControllerFactory,
-  X as createStraightConnectionControllerFactory
+  B as BezierEdgeController,
+  et as CanvasCore,
+  Y as CycleCircleEdgeController,
+  G as CycleSquareEdgeController,
+  T as EdgeType,
+  v as EdgeUtils,
+  nt as HtmlGraphBuilder,
+  z as StraightEdgeController,
+  st as UserDraggableNodesCanvas,
+  ot as UserTransformableCanvas,
+  X as createBezierEdgeControllerFactory,
+  Z as createStraightEdgeControllerFactory
 };