@html-graph/html-graph 0.0.49 → 0.0.50

package/dist/main.js

@@ -1,12 +1,12 @@
-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) {
+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) {
     n(this, "canvasWrapper", null);
     n(this, "host");
     n(this, "nodesContainer");
-    n(this, "connectionsContainer");
+    n(this, "edgesContainer");
     n(this, "canvas");
     n(this, "canvasCtx");
     n(this, "hostResizeObserver");
@@ -14,15 +14,15 @@ class k {
     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, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     n(this, "currentZIndex", 0);
     n(this, "layers", {
       "edges-on-top": {
         create: () => {
-          this.host.appendChild(this.nodesContainer), this.host.appendChild(this.connectionsContainer);
+          this.host.appendChild(this.nodesContainer), this.host.appendChild(this.edgesContainer);
         },
         update: (t, e, s) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.connectionsContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
+          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
         },
         moveOnTop: (t) => {
           this.currentZIndex += 1;
@@ -32,24 +32,24 @@ class k {
       },
       "edges-follow-node": {
         create: () => {
-          this.host.appendChild(this.nodesContainer), this.connectionsContainer = this.nodesContainer;
+          this.host.appendChild(this.nodesContainer), this.edgesContainer = this.nodesContainer;
         },
         update: (t, e, s) => {
           this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
         },
         moveOnTop: (t) => {
           const e = this.nodeIdToWrapperElementMap.get(t);
-          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentConnections(t).forEach((r) => {
-            this.connectionIdToElementMap.get(r).style.zIndex = `${this.currentZIndex - 1}`;
+          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentEdges(t).forEach((o) => {
+            this.edgeIdToElementMap.get(o).style.zIndex = `${this.currentZIndex - 1}`;
           });
         }
       },
       "nodes-on-top": {
         create: () => {
-          this.host.appendChild(this.connectionsContainer), this.host.appendChild(this.nodesContainer);
+          this.host.appendChild(this.edgesContainer), this.host.appendChild(this.nodesContainer);
         },
         update: (t, e, s) => {
-          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.connectionsContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
+          this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
         },
         moveOnTop: (t) => {
           this.currentZIndex += 1;
@@ -58,15 +58,15 @@ class k {
         }
       }
     });
-    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();
+    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)
       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();
   }
   clear() {
-    Array.from(this.connectionIdToElementMap.keys()).forEach((t) => {
-      this.detachConnection(t);
+    Array.from(this.edgeIdToElementMap.keys()).forEach((t) => {
+      this.detachEdge(t);
     }), Array.from(this.nodeElementToIdMap.values()).forEach((t) => {
       this.detachNode(t);
     });
@@ -78,7 +78,7 @@ class k {
     this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   destroy() {
-    this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.connectionsContainer), this.host.removeChild(this.nodesContainer), this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
+    this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.edgesContainer), this.host.removeChild(this.nodesContainer), this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
   }
   applyTransform() {
     this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
@@ -95,26 +95,26 @@ class k {
     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 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);
+  attachEdge(t) {
+    const s = this.graphStore.getEdge(t).controller.svg;
+    s.style.transformOrigin = "50% 50%", s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.edgesContainer.appendChild(s);
   }
-  detachConnection(t) {
-    const e = this.connectionIdToElementMap.get(t);
-    this.connectionIdToElementMap.delete(t), this.connectionsContainer.removeChild(e);
+  detachEdge(t) {
+    const e = this.edgeIdToElementMap.get(t);
+    this.edgeIdToElementMap.delete(t), this.edgesContainer.removeChild(e);
   }
   moveNodeOnTop(t) {
     this.layers[this.layersMode].moveOnTop(t);
   }
   updateNodeCoordinates(t) {
-    const e = this.graphStore.getNode(t), s = this.graphStore.getNodeAdjacentConnections(t);
-    this.updateNodeCoords(t, e.x, e.y), s.forEach((r) => {
-      this.updateConnectionCoords(r);
+    const e = this.graphStore.getNode(t), s = this.graphStore.getNodeAdjacentEdges(t);
+    this.updateNodeCoords(t, e.x, e.y), s.forEach((o) => {
+      this.updateEdgeCoords(o);
     });
   }
-  updatePortConnections(t) {
-    this.graphStore.getPortAdjacentConnections(t).forEach((s) => {
-      this.updateConnectionCoords(s);
+  updatePortEdges(t) {
+    this.graphStore.getPortAdjacentEdges(t).forEach((s) => {
+      this.updateEdgeCoords(s);
     });
   }
   getViewportDimensions() {
@@ -133,7 +133,7 @@ class k {
     const t = document.createElement("div");
     return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
   }
-  createConnectionsContainer() {
+  createEdgesContainer() {
     const t = document.createElement("div");
     return t.style.position = "absolute", t.style.pointerEvents = "none", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
   }
@@ -145,9 +145,9 @@ class k {
   createNodesResizeObserver() {
     return new ResizeObserver((t) => {
       t.forEach((e) => {
-        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);
+        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);
         });
       });
     });
@@ -157,27 +157,27 @@ class k {
     this.canvas.width = t, this.canvas.height = e;
   }
   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})`;
+    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})`;
   }
-  updateConnectionCoords(t) {
-    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(
+  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(), [w, m] = s.centerFn(
+    ), u = this.viewportTransformer.getAbsScale(), [v, m] = s.centerFn(
       a.width * u,
       a.height * u
-    ), [p, C] = r.centerFn(
+    ), [w, f] = o.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);
+    ), 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);
   }
 }
-class W {
+class B {
   constructor() {
     n(this, "state", {
       scale: 1,
@@ -211,7 +211,7 @@ class W {
     };
   }
 }
-class j {
+class z {
   constructor(t) {
     this.transformer = t;
   }
@@ -244,22 +244,19 @@ class j {
     return this.transformer.getAbsScale();
   }
 }
-class R {
+class Y {
   constructor() {
     n(this, "nodes", /* @__PURE__ */ Object.create(null));
     n(this, "ports", /* @__PURE__ */ Object.create(null));
     n(this, "nodePorts", /* @__PURE__ */ Object.create(null));
     n(this, "portNodeId", /* @__PURE__ */ Object.create(null));
-    n(this, "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));
+    n(this, "edges", /* @__PURE__ */ Object.create(null));
+    n(this, "incommingEdges", /* @__PURE__ */ Object.create(null));
+    n(this, "outcommingEdges", /* @__PURE__ */ Object.create(null));
+    n(this, "cycleEdges", /* @__PURE__ */ Object.create(null));
   }
-  getAllNodes() {
-    return this.nodes;
-  }
-  addNode(t, e, s, r, a) {
-    this.nodes[t] = { element: e, x: s, y: r, centerFn: a }, this.nodePorts[t] = /* @__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);
   }
   hasNode(t) {
     return this.nodes[t] !== void 0;
@@ -270,20 +267,20 @@ class R {
   updateNodeCoords(t, e, s) {
     this.nodes[t].x = e, this.nodes[t].y = s;
   }
-  updateConnectionController(t, e) {
-    this.connections[t].controller = e;
+  updateEdgeController(t, e) {
+    this.edges[t].controller = e;
   }
   removeNode(t) {
-    this.getNodeAdjacentConnections(t).forEach((r) => {
-      this.removeConnection(r);
+    this.getNodeAdjacentEdges(t).forEach((o) => {
+      this.removeEdge(o);
     }), delete this.nodes[t];
     const s = this.nodePorts[t];
-    Object.keys(s).forEach((r) => {
-      delete this.portNodeId[r];
+    Object.keys(s).forEach((o) => {
+      delete this.portNodeId[o];
     }), delete this.nodePorts[t];
   }
-  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;
+  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);
   }
@@ -297,86 +294,86 @@ class R {
     return this.portNodeId[t] !== void 0;
   }
   removePort(t) {
-    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];
+    Object.keys(this.cycleEdges[t]).forEach((o) => {
+      this.removeEdge(o);
+    }), delete this.cycleEdges[t], Object.keys(this.incommingEdges[t]).forEach((o) => {
+      this.removeEdge(o);
+    }), delete this.incommingEdges[t], Object.keys(this.outcommingEdges[t]).forEach((o) => {
+      this.removeEdge(o);
+    }), delete this.outcommingEdges[t];
     const e = this.portNodeId[t];
     delete this.portNodeId[t];
     const s = this.nodePorts[e];
     delete s[t], delete this.ports[t];
   }
-  addConnection(t, e, s, r) {
-    this.connections[t] = {
+  addEdge(t, e, s, o) {
+    this.edges[t] = {
       from: e,
       to: s,
-      controller: r
-    }, e !== s ? (this.outcommingConnections[e][t] = !0, this.incommingConnections[s][t] = !0) : this.cycleConnections[e][t] = !0;
+      controller: o
+    }, e !== s ? (this.outcommingEdges[e][t] = !0, this.incommingEdges[s][t] = !0) : this.cycleEdges[e][t] = !0;
   }
-  getConnection(t) {
-    return this.connections[t];
+  getEdge(t) {
+    return this.edges[t];
   }
-  hasConnection(t) {
-    return this.connections[t] !== void 0;
+  hasEdge(t) {
+    return this.edges[t] !== void 0;
   }
-  removeConnection(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];
+  removeEdge(t) {
+    const e = this.edges[t], s = e.from, o = e.to;
+    delete this.cycleEdges[s][t], delete this.cycleEdges[o][t], delete this.incommingEdges[s][t], delete this.incommingEdges[o][t], delete this.outcommingEdges[s][t], delete this.outcommingEdges[o][t], delete this.edges[t];
   }
-  getPortAdjacentConnections(t) {
+  getPortAdjacentEdges(t) {
     return [
-      ...this.getPortIncomingConnections(t),
-      ...this.getPortOutcomingConnections(t),
-      ...this.getPortCycleConnections(t)
+      ...this.getPortIncomingEdges(t),
+      ...this.getPortOutcomingEdges(t),
+      ...this.getPortCycleEdges(t)
     ];
   }
-  getNodeAdjacentConnections(t) {
+  getNodeAdjacentEdges(t) {
     return [
-      ...this.getNodeIncomingConnections(t),
-      ...this.getNodeOutcomingConnections(t),
-      ...this.getNodeCycleConnections(t)
+      ...this.getNodeIncomingEdges(t),
+      ...this.getNodeOutcomingEdges(t),
+      ...this.getNodeCycleEdges(t)
     ];
   }
   clear() {
-    this.nodes = /* @__PURE__ */ Object.create(null), this.ports = /* @__PURE__ */ Object.create(null), this.nodePorts = /* @__PURE__ */ Object.create(null), this.portNodeId = /* @__PURE__ */ Object.create(null), this.connections = /* @__PURE__ */ Object.create(null), this.incommingConnections = /* @__PURE__ */ Object.create(null), this.outcommingConnections = /* @__PURE__ */ Object.create(null), this.cycleConnections = /* @__PURE__ */ Object.create(null);
+    this.nodes = /* @__PURE__ */ Object.create(null), this.ports = /* @__PURE__ */ Object.create(null), this.nodePorts = /* @__PURE__ */ Object.create(null), this.portNodeId = /* @__PURE__ */ Object.create(null), this.edges = /* @__PURE__ */ Object.create(null), this.incommingEdges = /* @__PURE__ */ Object.create(null), this.outcommingEdges = /* @__PURE__ */ Object.create(null), this.cycleEdges = /* @__PURE__ */ Object.create(null);
   }
-  getPortIncomingConnections(t) {
-    return Object.keys(this.incommingConnections[t] ?? {});
+  getPortIncomingEdges(t) {
+    return Object.keys(this.incommingEdges[t] ?? {});
   }
-  getPortOutcomingConnections(t) {
-    return Object.keys(this.outcommingConnections[t] ?? {});
+  getPortOutcomingEdges(t) {
+    return Object.keys(this.outcommingEdges[t] ?? {});
   }
-  getPortCycleConnections(t) {
-    return Object.keys(this.cycleConnections[t] ?? {});
+  getPortCycleEdges(t) {
+    return Object.keys(this.cycleEdges[t] ?? {});
   }
-  getNodeIncomingConnections(t) {
+  getNodeIncomingEdges(t) {
     const e = Object.keys(this.nodePorts[t]);
     let s = [];
-    return e.forEach((r) => {
-      s = [...s, ...this.getPortIncomingConnections(r)];
+    return e.forEach((o) => {
+      s = [...s, ...this.getPortIncomingEdges(o)];
     }), s;
   }
-  getNodeOutcomingConnections(t) {
+  getNodeOutcomingEdges(t) {
     const e = Object.keys(this.nodePorts[t]);
     let s = [];
-    return e.forEach((r) => {
-      s = [...s, ...this.getPortOutcomingConnections(r)];
+    return e.forEach((o) => {
+      s = [...s, ...this.getPortOutcomingEdges(o)];
     }), s;
   }
-  getNodeCycleConnections(t) {
+  getNodeCycleEdges(t) {
     const e = Object.keys(this.nodePorts[t]);
     let s = [];
-    return e.forEach((r) => {
-      s = [...s, ...this.getPortCycleConnections(r)];
+    return e.forEach((o) => {
+      s = [...s, ...this.getPortCycleEdges(o)];
     }), s;
   }
 }
-class v {
+class p {
   static getPortCenter(t) {
-    const { top: e, left: s, width: r, height: a } = t.element.getBoundingClientRect(), c = t.centerFn(r, a);
+    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) {
@@ -388,18 +385,18 @@ class v {
   static getDirectionVector(t, e, s) {
     return [e * Math.cos(t ?? 0), s * Math.sin(t ?? 0)];
   }
-  static getArrowPath(t, e, s, r, a) {
+  static getArrowPath(t, e, s, o, a) {
     const h = [
       [0, 0],
-      [r, a],
-      [r, -a]
+      [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, r, a) {
+  static getArrowOffsetPath(t, e, s, o, a) {
     const h = [
-      [r, 0],
-      [r + a, 0]
+      [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]}`;
   }
@@ -407,14 +404,14 @@ class v {
     return t.map((e, s) => `${s === 0 ? "M" : "L"} ${e[0]} ${e[1]}`).join(" ");
   }
 }
-class B {
-  constructor(t, e, s, r, a, c, h) {
+class G {
+  constructor(t, e, s, o, 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(
+    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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = document.createElementNS(
@@ -422,51 +419,51 @@ class B {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  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;
+  update(t, e, s, o, a, c) {
+    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 = 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, [
+    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, [
       s,
-      r
-    ]), p = [
-      w[0] + l[0] * this.curvature,
-      w[1] + l[1] * this.curvature
-    ], C = [
+      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
-    ], 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(
+    ], 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,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", $);
+      this.sourceArrow.setAttribute("d", y);
     }
     if (this.targetArrow) {
-      const $ = v.getArrowPath(
+      const y = p.getArrowPath(
         u,
         s,
-        r,
+        o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", $);
+      this.targetArrow.setAttribute("d", y);
     }
   }
 }
-class z {
-  constructor(t, e, s, r, a, c, h, i) {
+class X {
+  constructor(t, e, s, o, 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(
+    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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = document.createElementNS(
@@ -474,123 +471,115 @@ class z {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  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;
+  update(t, e, s, o, a, c) {
+    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 = 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,
-      0,
-      0,
-      this.arrowLength,
-      this.minPortOffset
-    ), $ = v.getArrowOffsetPath(
-      u,
+    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, [
+      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,
-      r,
-      -this.arrowLength,
-      -this.minPortOffset
-    ), 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(
+      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,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", x);
+      this.sourceArrow.setAttribute("d", P);
     }
     if (this.targetArrow) {
-      const x = v.getArrowPath(
+      const P = p.getArrowPath(
         u,
         s,
-        r,
+        o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", x);
+      this.targetArrow.setAttribute("d", P);
     }
   }
 }
-class Y {
-  constructor(t, e, s, r, a, c, h) {
+class Z {
+  constructor(t, e, s, o, 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(
+    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(
       "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) {
+  update(t, e, s, o, 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 = [
+    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 = [
       [this.arrowLength, 0],
       [l, u],
       [l, -u]
-    ].map((y) => v.rotate(y, c, [0, 0])), p = [
+    ].map((E) => p.rotate(E, c, [0, 0])), w = [
       `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(
+    ].join(" "), f = `M 0 0 L ${m[0][0]} ${m[0][1]} `, C = `${this.arrow !== null ? "" : f}${w}`;
+    if (this.line.setAttribute("d", C), this.arrow) {
+      const E = p.getArrowPath(
         c,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", y);
+      this.arrow.setAttribute("d", E);
     }
   }
 }
-class G {
-  constructor(t, e, s, r, a, c, h, i) {
+class U {
+  constructor(t, e, s, o, 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(
+    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(
       "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;
+    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 = [
       [this.arrowLength, 0],
-      [w, 0],
+      [v, 0],
       [l, u],
-      [l, p],
+      [l, w],
       [m, g],
-      [f, g],
-      [C, p],
-      [C, -p],
-      [f, -g],
+      [C, g],
+      [f, w],
+      [f, -w],
+      [C, -g],
       [m, -g],
-      [l, -p],
+      [l, -w],
       [l, -u]
     ];
   }
-  update(t, e, s, r, a) {
+  update(t, e, s, o, 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 = [
+    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]}`,
@@ -606,7 +595,7 @@ class G {
       `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(
+      const u = p.getArrowPath(
         c,
         0,
         0,
@@ -617,43 +606,43 @@ class G {
     }
   }
 }
-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 M = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.Cycle = "cycle", r))(M || {});
+const H = (r) => (t) => t === "cycle" ? new Z(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleRadius,
+  r.smallCycleRadius
+) : new G(
+  r.color,
+  r.width,
+  r.curvature,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow,
+  r.hasTargetArrow
+), q = (r) => (t) => t === M.Cycle && t === "cycle" ? new U(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.hasSourceArrow || r.hasTargetArrow,
+  r.cycleSquareSide,
+  r.arrowOffset,
+  r.roundness
+) : new X(
+  r.color,
+  r.width,
+  r.arrowLength,
+  r.arrowWidth,
+  r.arrowOffset,
+  r.hasSourceArrow,
+  r.hasTargetArrow,
+  r.roundness
 );
-class S {
+class x {
   constructor() {
     n(this, "counter", 0);
   }
@@ -665,19 +654,19 @@ class S {
     this.counter = 0;
   }
 }
-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;
+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;
   }
   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, r, a, c) {
+  addNode(t, e, s, o, a, c) {
     if (t === void 0)
       do
         t = this.nodeIdGenerator.next();
@@ -688,7 +677,7 @@ class U {
       t,
       e,
       s,
-      r,
+      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(
@@ -700,7 +689,7 @@ class U {
       );
     });
   }
-  markPort(t, e, s, r, a) {
+  markPort(t, e, s, o, a) {
     if (t === void 0)
       do
         t = this.portIdGenerator.next();
@@ -713,43 +702,43 @@ class U {
       t,
       e,
       s,
-      r ?? this.portsCenterFn,
+      o ?? this.portsCenterFn,
       a ?? null
     );
   }
-  updatePortConnections(t) {
+  updatePortEdges(t) {
     if (!this.graphStore.hasPort(t))
       throw new Error("failed to unset nonexisting port");
-    this.htmlController.updatePortConnections(t);
+    this.htmlController.updatePortEdges(t);
   }
   unmarkPort(t) {
     if (!this.graphStore.hasPort(t))
       throw new Error("failed to unset nonexisting port");
-    this.graphStore.getPortAdjacentConnections(t).forEach((e) => {
-      this.removeConnection(e);
+    this.graphStore.getPortAdjacentEdges(t).forEach((e) => {
+      this.removeEdge(e);
     }), this.graphStore.removePort(t);
   }
-  addConnection(t, e, s, r) {
+  addEdge(t, e, s, o) {
     if (t === void 0)
       do
-        t = this.connectionIdGenerator.next();
-      while (this.graphStore.hasConnection(t));
+        t = this.edgeIdGenerator.next();
+      while (this.graphStore.hasEdge(t));
     if (!this.graphStore.hasPort(e))
-      throw new Error("failed to add connection from nonexisting port");
+      throw new Error("failed to add edge from nonexisting port");
     if (!this.graphStore.hasPort(s))
-      throw new Error("failed to add connection to nonexisting port");
-    let a = T.Regular;
-    e === s && (a = T.Cycle), this.graphStore.addConnection(
+      throw new Error("failed to add edge to nonexisting port");
+    let a = M.Regular;
+    e === s && (a = M.Cycle), this.graphStore.addEdge(
       t,
       e,
       s,
-      r(a)
-    ), this.htmlController.attachConnection(t);
+      o(a)
+    ), this.htmlController.attachEdge(t);
   }
-  removeConnection(t) {
-    if (!this.graphStore.hasConnection(t))
-      throw new Error("failed to remove nonexisting connection");
-    this.htmlController.detachConnection(t), this.graphStore.removeConnection(t);
+  removeEdge(t) {
+    if (!this.graphStore.hasEdge(t))
+      throw new Error("failed to remove nonexisting edge");
+    this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
   }
   removeNode(t) {
     if (!this.graphStore.hasNode(t))
@@ -765,10 +754,10 @@ class U {
     const e = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
     if (e.length < t.length)
       throw new Error("failed to move to nonexisting node");
-    const [s, r] = e.reduce(
-      (u, w) => [u[0] + w.x, u[1] + w.y],
+    const [s, o] = e.reduce(
+      (u, v) => [u[0] + v.x, u[1] + v.y],
       [0, 0]
-    ), 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;
+    ), 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);
   }
   updateNodeCoordinates(t, e, s) {
@@ -776,10 +765,10 @@ class U {
       throw new Error("failed to update coordinates of nonexisting node");
     this.graphStore.updateNodeCoords(t, e, s), this.htmlController.updateNodeCoordinates(t);
   }
-  updateConnectionController(t, e) {
-    if (!this.graphStore.hasConnection(t))
-      throw new Error("failed to update nonexisting connection");
-    this.htmlController.detachConnection(t), this.graphStore.updateConnectionController(t, e), this.htmlController.attachConnection(t);
+  updateEdgeController(t, e) {
+    if (!this.graphStore.hasEdge(t))
+      throw new Error("failed to update nonexisting edge");
+    this.htmlController.detachEdge(t), this.graphStore.updateEdgeController(t, e), this.htmlController.attachEdge(t);
   }
   attach(t) {
     this.htmlController.attach(t);
@@ -788,145 +777,145 @@ class U {
     this.htmlController.detach();
   }
   clear() {
-    this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.connectionIdGenerator.reset();
+    this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
   }
   destroy() {
     this.htmlController.destroy();
   }
 }
-class H {
-  constructor(t, e, s, r) {
+class J {
+  constructor(t, e, s, o) {
     n(this, "publicViewportTransformer");
     n(this, "canvasController");
-    const a = new W(), c = new R();
-    this.publicViewportTransformer = new j(
+    const a = new B(), c = new Y();
+    this.publicViewportTransformer = new z(
       a
     );
-    const h = new k(
+    const h = new W(
       c,
       a,
       this.publicViewportTransformer,
       t,
       e
     );
-    this.canvasController = new U(
+    this.canvasController = new _(
       c,
       h,
       a,
       s,
-      r
+      o
     );
   }
 }
-const M = (o, t) => [
-  o / 2,
+const D = (r, t) => [
+  r / 2,
   t / 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);
+], 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;
   do
-    l *= 2, d = o.canvas.width / l, g = o.canvas.height / l;
+    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, 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,
+  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;
+  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(
     o,
+    a,
+    r,
     t,
     e,
     s
   );
-}, 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) {
+}, tt = (r, t) => {
+  r.fillStyle = t, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
+}, et = (r) => (t) => {
+  tt(t, r);
+}, st = (r) => {
+  switch (r == null ? void 0 : r.type) {
     case "custom":
-      return o.drawingFn;
+      return r.drawingFn;
     case "dots":
-      return J(
-        o.dotColor ?? "#d8d8d8",
-        o.dotGap ?? 25,
-        o.dotRadius ?? 1.5,
-        o.color ?? "#ffffff"
+      return I(
+        r.dotColor ?? "#d8d8d8",
+        r.dotGap ?? 25,
+        r.dotRadius ?? 1.5,
+        r.color ?? "#ffffff"
       );
     case "color":
-      return Q(o.color ?? "#ffffff");
+      return et(r.color ?? "#ffffff");
     default:
-      return _();
+      return K();
   }
-}, O = (o) => {
-  switch (o == null ? void 0 : o.type) {
+}, F = (r) => {
+  switch (r == null ? void 0 : r.type) {
     case "custom":
-      return o.controllerFactory;
+      return r.controllerFactory;
     case "straight":
-      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
+      return q({
+        color: r.color ?? "#5c5c5c",
+        width: r.width ?? 1,
+        arrowLength: r.arrowLength ?? 15,
+        arrowWidth: r.arrowWidth ?? 4,
+        arrowOffset: r.arrowOffset ?? 15,
+        hasSourceArrow: r.hasSourceArrow ?? !1,
+        hasTargetArrow: r.hasTargetArrow ?? !1,
+        cycleSquareSide: r.cycleSquareSide ?? 30,
+        roundness: r.roundness ?? 5
       });
     default:
-      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
+      return H({
+        color: r.color ?? "#5c5c5c",
+        width: r.width ?? 1,
+        curvature: r.curvature ?? 90,
+        arrowLength: r.arrowLength ?? 15,
+        arrowWidth: r.arrowWidth ?? 4,
+        hasSourceArrow: r.hasSourceArrow ?? !1,
+        hasTargetArrow: r.hasTargetArrow ?? !1,
+        cycleRadius: r.cycleRadius ?? 30,
+        smallCycleRadius: r.smallCycleRadius ?? 15
       });
   }
-}, tt = (o) => {
+}, rt = (r) => {
   var t, e, s;
   return {
     background: {
-      drawingFn: I(
-        o.background ?? { type: "none" }
+      drawingFn: st(
+        r.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((t = o.nodes) == null ? void 0 : t.centerFn) ?? M
+      centerFn: ((t = r.nodes) == null ? void 0 : t.centerFn) ?? D
     },
     ports: {
-      centerFn: ((e = o.ports) == null ? void 0 : e.centerFn) ?? M
+      centerFn: ((e = r.ports) == null ? void 0 : e.centerFn) ?? D
     },
     edges: {
-      controllerFactory: O(o.edges ?? {})
+      controllerFactory: F(r.edges ?? {})
     },
     layers: {
-      mode: ((s = o.layers) == null ? void 0 : s.mode) ?? "edges-follow-node"
+      mode: ((s = r.layers) == null ? void 0 : s.mode) ?? "edges-follow-node"
     }
   };
 };
-class et {
+class ot {
   constructor(t) {
     n(this, "transformation");
     n(this, "di");
-    n(this, "connectionControllerFactory");
+    n(this, "edgeControllerFactory");
     this.apiOptions = t;
-    const e = tt(this.apiOptions ?? {});
-    this.di = new H(
+    const e = rt(this.apiOptions ?? {});
+    this.di = new J(
       e.layers.mode,
       e.background.drawingFn,
       e.nodes.centerFn,
       e.ports.centerFn
-    ), this.transformation = this.di.publicViewportTransformer, this.connectionControllerFactory = e.edges.controllerFactory;
+    ), this.transformation = this.di.publicViewportTransformer, this.edgeControllerFactory = e.edges.controllerFactory;
   }
   addNode(t) {
     return this.di.canvasController.addNode(
@@ -954,14 +943,14 @@ class et {
     ), this;
   }
   updatePortEdges(t) {
-    return this.di.canvasController.updatePortConnections(t), this;
+    return this.di.canvasController.updatePortEdges(t), this;
   }
   unmarkPort(t) {
     return this.di.canvasController.unmarkPort(t), this;
   }
   addEdge(t) {
-    const e = t.options !== void 0 ? O(t.options) : this.connectionControllerFactory;
-    return this.di.canvasController.addConnection(
+    const e = t.options !== void 0 ? F(t.options) : this.edgeControllerFactory;
+    return this.di.canvasController.addEdge(
       t.id,
       t.from,
       t.to,
@@ -969,7 +958,7 @@ class et {
     ), this;
   }
   removeEdge(t) {
-    return this.di.canvasController.removeConnection(t), this;
+    return this.di.canvasController.removeEdge(t), this;
   }
   patchViewportState(t) {
     return this.di.canvasController.patchViewportState(
@@ -984,11 +973,8 @@ class et {
   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(
-      t,
-      e.controller
-    ), this;
+  updateEdge(t, e) {
+    return e.controller !== void 0 && this.di.canvasController.updateEdgeController(t, e.controller), this;
   }
   clear() {
     return this.di.canvasController.clear(), this;
@@ -1003,14 +989,14 @@ class et {
     this.di.canvasController.destroy();
   }
 }
-class st {
+class nt {
   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 S());
+    n(this, "nodeIdGenerator", new x());
     n(this, "element", null);
     n(this, "onCanvasMouseUp", () => {
       this.setCursor(null), this.grabbedNodeId = null;
@@ -1049,8 +1035,8 @@ class st {
     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;
+    const o = () => !0;
+    this.onBeforeNodeDrag = ((c = e == null ? void 0 : e.events) == null ? void 0 : c.onBeforeNodeDrag) ?? o;
   }
   addNode(t) {
     let e = t.id;
@@ -1066,7 +1052,7 @@ class st {
         x: t.x,
         y: t.y
       }) && (a.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e));
-    }, r = (a) => {
+    }, o = (a) => {
       this.onBeforeNodeDrag({
         nodeId: e,
         element: t.element,
@@ -1077,10 +1063,10 @@ class st {
     return this.nodes.set(e, {
       element: t.element,
       onMouseDown: s,
-      onTouchStart: r,
+      onTouchStart: o,
       x: t.x,
       y: t.y
-    }), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", r), this;
+    }), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", o), this;
   }
   removeNode(t) {
     const e = this.nodes.get(t);
@@ -1110,8 +1096,8 @@ class st {
   updateNodeCoordinates(t, e, s) {
     return this.canvas.updateNodeCoordinates(t, e, s), this;
   }
-  updateConnection(t, e) {
-    return this.canvas.updateConnection(t, e), this;
+  updateEdge(t, e) {
+    return this.canvas.updateEdge(t, e), this;
   }
   moveNodeOnTop(t) {
     return this.canvas.moveNodeOnTop(t), this;
@@ -1136,19 +1122,19 @@ class st {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   dragNode(t, e, s) {
-    const r = this.nodes.get(t);
-    if (r === void 0)
+    const o = this.nodes.get(t);
+    if (o === void 0)
       throw new Error("failed to drag nonexisting node");
-    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({
+    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({
       nodeId: t,
-      element: r.element,
-      x: r.x,
-      y: r.y
+      element: o.element,
+      x: o.x,
+      y: o.y
     });
   }
 }
-class ot {
+class it {
   constructor(t, e) {
     n(this, "transformation");
     n(this, "element", null);
@@ -1177,8 +1163,8 @@ class ot {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      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);
+      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);
     });
     n(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
@@ -1191,7 +1177,7 @@ class ot {
         -(e.x - this.prevTouches.x),
         -(e.y - this.prevTouches.y)
       ), e.touchesCnt === 2 && this.isScalable) {
-        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);
+        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);
       }
       this.prevTouches = e, t.preventDefault();
@@ -1199,15 +1185,15 @@ class ot {
     n(this, "onTouchEnd", (t) => {
       t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
     });
-    var i, d, g, l, u, w, m, p, C, f, y, b;
+    var i, d, g, l, u, v, m, w, f, C, E, 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;
+    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 = () => {
     };
-    this.onTransform = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onTransform) ?? c;
+    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;
   }
@@ -1241,8 +1227,8 @@ class ot {
   updateNodeCoordinates(t, e, s) {
     return this.canvas.updateNodeCoordinates(t, e, s), this;
   }
-  updateConnection(t, e) {
-    return this.canvas.updateConnection(t, e), this;
+  updateEdge(t, e) {
+    return this.canvas.updateEdge(t, e), this;
   }
   moveNodeOnTop(t) {
     return this.canvas.moveNodeOnTop(t), this;
@@ -1263,10 +1249,10 @@ class ot {
     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(
+    const o = e.reduce(
       (i, d) => [i[0] + d[0], i[1] + d[1]],
       [0, 0]
-    ), a = [r[0] / s, r[1] / s], h = e.map((i) => [i[0] - a[0], i[1] - a[1]]).reduce(
+    ), 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]),
       0
     );
@@ -1276,22 +1262,22 @@ class ot {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
   moveViewport(t, e) {
-    const [s, r] = this.transformation.getAbsCoords(0, 0), a = this.canvas.transformation.getAbsScale(), c = {
+    const [s, o] = this.transformation.getAbsCoords(0, 0), a = this.canvas.transformation.getAbsScale(), c = {
       scale: a,
       x: s + a * t,
-      y: r + a * e
+      y: o + a * e
     };
     this.onBeforeTransform({ ...c }) && (this.canvas.patchViewportState(c), this.onTransform(c));
   }
   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;
+    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)
       return;
     const g = { scale: h, x: i, y: d };
     this.onBeforeTransform({ ...g }) && (this.canvas.patchViewportState(g), this.onTransform(g));
   }
 }
-class nt {
+class ht {
   constructor() {
     n(this, "coreOptions");
     n(this, "dragOptions");
@@ -1309,21 +1295,21 @@ class nt {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
-    let t = new et(this.coreOptions);
-    return this.isDraggable && (t = new st(t, this.dragOptions)), this.isTransformable && (t = new ot(t, this.transformOptions)), t;
+    let t = new ot(this.coreOptions);
+    return this.isDraggable && (t = new nt(t, this.dragOptions)), this.isTransformable && (t = new it(t, this.transformOptions)), t;
   }
 }
 export {
-  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
+  G as BezierEdgeController,
+  ot 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
 };