@html-graph/html-graph 0.0.47 → 0.0.48

package/dist/main.js

@@ -1,8 +1,8 @@
 var F = Object.defineProperty;
-var k = (n, t, e) => t in n ? F(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var r = (n, t, e) => k(n, typeof t != "symbol" ? t + "" : t, e);
+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, s, i) {
+  constructor(t, e, o, n, i) {
     r(this, "canvasWrapper", null);
     r(this, "host");
     r(this, "nodesContainer");
@@ -39,8 +39,8 @@ class j {
         },
         moveOnTop: (t) => {
           const e = this.nodeIdToWrapperElementMap.get(t);
-          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentConnections(t).forEach((s) => {
-            this.connectionIdToElementMap.get(s).style.zIndex = `${this.currentZIndex - 1}`;
+          this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentConnections(t).forEach((n) => {
+            this.connectionIdToElementMap.get(n).style.zIndex = `${this.currentZIndex - 1}`;
           });
         }
       },
@@ -58,7 +58,7 @@ class j {
         }
       }
     });
-    this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = o, this.layersMode = s, this.backgroundDrawingFn = i, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.connectionsContainer = this.createConnectionsContainer();
+    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)
       throw new Error("unable to get canvas context");
@@ -75,10 +75,10 @@ class j {
     this.canvasWrapper = t, this.canvasWrapper.appendChild(this.host);
   }
   detach() {
-    this.canvasWrapper !== null && this.canvasWrapper.removeChild(this.host);
+    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.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);
   }
   applyTransform() {
     this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
@@ -106,10 +106,10 @@ class j {
   moveNodeOnTop(t) {
     this.layers[this.layersMode].moveOnTop(t);
   }
-  updateNodePosition(t) {
+  updateNodeCoordinates(t) {
     const e = this.graphStore.getNode(t), o = this.graphStore.getNodeAdjacentConnections(t);
-    this.updateNodeCoords(t, e.x, e.y), o.forEach((s) => {
-      this.updateConnectionCoords(s);
+    this.updateNodeCoords(t, e.x, e.y), o.forEach((n) => {
+      this.updateConnectionCoords(n);
     });
   }
   updatePortConnections(t) {
@@ -145,8 +145,8 @@ class j {
   createNodesResizeObserver() {
     return new ResizeObserver((t) => {
       t.forEach((e) => {
-        const o = e.target, s = this.nodeWrapperElementToIdMap.get(o), i = this.graphStore.getNode(s);
-        this.updateNodeCoords(s, i.x, i.y), this.graphStore.getNodeAdjacentConnections(s).forEach((a) => {
+        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);
         });
       });
@@ -157,11 +157,11 @@ class j {
     this.canvas.width = t, this.canvas.height = e;
   }
   updateNodeCoords(t, e, o) {
-    const s = this.nodeIdToWrapperElementMap.get(t), { width: i, height: h } = s.getBoundingClientRect(), a = this.viewportTransformer.getAbsScale(), c = this.graphStore.getNode(t), [l, g] = c.centerFn(i, h);
-    s.style.transform = `matrix(1, 0, 0, 1, ${e - a * l}, ${o - a * g})`;
+    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})`;
   }
   updateConnectionCoords(t) {
-    const e = this.graphStore.getConnection(t), o = this.graphStore.getPort(e.from), s = this.graphStore.getPort(e.to), i = o.element.getBoundingClientRect(), h = s.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
+    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(
@@ -170,11 +170,11 @@ class j {
     ), m = this.viewportTransformer.getAbsScale(), [u, p] = o.centerFn(
       i.width * m,
       i.height * m
-    ), [f, y] = s.centerFn(
+    ), [C, w] = n.centerFn(
       h.width * m,
       h.height * m
-    ), S = u + c, b = p + l, N = f + g, C = y + d, w = Math.min(S, N), T = Math.min(b, C), E = Math.abs(N - S), x = Math.abs(C - b), M = this.connectionIdToElementMap.get(t), L = S <= N, V = b <= C;
-    M.style.transform = `matrix(${L ? 1 : -1}, 0, 0, ${V ? 1 : -1}, ${w}, ${T})`, e.controller.update(w, T, E, x, o, s);
+    ), 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);
   }
 }
 class D {
@@ -185,42 +185,6 @@ class D {
       y: 0
     });
   }
-  /**
-   * dx2 - traslate x
-   * dy2 - traslate y
-   *
-   * direct transform
-   *  s1  0   dx1     1   0   dx2
-   *  0   s1  dy1     0   1   dy2
-   *  0   0   1       0   0   1
-   *
-   * [s, dx, dy] = [s1, s * dx2 + dx1, s * dy2 + dy1]
-   */
-  applyShift(t, e) {
-    this.state = {
-      scale: this.state.scale,
-      x: this.state.scale * t + this.state.x,
-      y: this.state.scale * e + this.state.y
-    };
-  }
-  /**
-   * s2 - scale
-   * cx - scale pivot x
-   * cy - scale pivot y
-   *
-   *  s1  0   dx1     s2  0   (1 - s2) * cx
-   *  0   s1  dy1     0   s2  (1 - s2) * cy
-   *  0   0   1       0   0   1
-   *
-   * [s, dx, dy] = [s1 * s2, s1 * (1 - s2) * cx + dx1, s1 * (1 - s2) * cy + dy1]
-   */
-  applyScale(t, e, o) {
-    this.state = {
-      scale: this.state.scale * t,
-      x: this.state.scale * (1 - t) * e + this.state.x,
-      y: this.state.scale * (1 - t) * o + this.state.y
-    };
-  }
   getViewCoords(t, e) {
     return [
       (t - this.state.x) / this.state.scale,
@@ -292,16 +256,10 @@ class R {
     r(this, "cycleConnections", /* @__PURE__ */ Object.create(null));
   }
   getAllNodes() {
-    return Object.keys(this.nodes);
-  }
-  getAllPorts() {
-    return Object.keys(this.ports);
-  }
-  getAllConnections() {
-    return Object.keys(this.connections);
+    return this.nodes;
   }
-  addNode(t, e, o, s, i) {
-    this.nodes[t] = { element: e, x: o, y: s, centerFn: i }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
+  addNode(t, e, o, n, i) {
+    this.nodes[t] = { element: e, x: o, y: n, centerFn: i }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
   }
   hasNode(t) {
     return this.nodes[t] !== void 0;
@@ -316,16 +274,16 @@ class R {
     this.connections[t].controller = e;
   }
   removeNode(t) {
-    this.getNodeAdjacentConnections(t).forEach((s) => {
-      this.removeConnection(s);
+    this.getNodeAdjacentConnections(t).forEach((n) => {
+      this.removeConnection(n);
     }), delete this.nodes[t];
     const o = this.nodePorts[t];
-    Object.keys(o).forEach((s) => {
-      delete this.portNodeId[s];
+    Object.keys(o).forEach((n) => {
+      delete this.portNodeId[n];
     }), delete this.nodePorts[t];
   }
-  addPort(t, e, o, s, i) {
-    this.ports[t] = { element: e, centerFn: s, direction: i }, this.cycleConnections[t] = {}, this.incommingConnections[t] = {}, this.outcommingConnections[t] = {}, this.portNodeId[t] = o;
+  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);
   }
@@ -339,23 +297,23 @@ class R {
     return this.portNodeId[t] !== void 0;
   }
   removePort(t) {
-    Object.keys(this.cycleConnections[t]).forEach((s) => {
-      this.removeConnection(s);
-    }), delete this.cycleConnections[t], Object.keys(this.incommingConnections[t]).forEach((s) => {
-      this.removeConnection(s);
-    }), delete this.incommingConnections[t], Object.keys(this.outcommingConnections[t]).forEach((s) => {
-      this.removeConnection(s);
+    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);
     }), 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];
   }
-  addConnection(t, e, o, s) {
+  addConnection(t, e, o, n) {
     this.connections[t] = {
       from: e,
       to: o,
-      controller: s
+      controller: n
     }, e !== o ? (this.outcommingConnections[e][t] = !0, this.incommingConnections[o][t] = !0) : this.cycleConnections[e][t] = !0;
   }
   getConnection(t) {
@@ -365,8 +323,25 @@ class R {
     return this.connections[t] !== void 0;
   }
   removeConnection(t) {
-    const e = this.connections[t], o = e.from, s = e.to;
-    delete this.cycleConnections[o][t], delete this.cycleConnections[s][t], delete this.incommingConnections[o][t], delete this.incommingConnections[s][t], delete this.outcommingConnections[o][t], delete this.outcommingConnections[s][t], delete this.connections[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];
+  }
+  getPortAdjacentConnections(t) {
+    return [
+      ...this.getPortIncomingConnections(t),
+      ...this.getPortOutcomingConnections(t),
+      ...this.getPortCycleConnections(t)
+    ];
+  }
+  getNodeAdjacentConnections(t) {
+    return [
+      ...this.getNodeIncomingConnections(t),
+      ...this.getNodeOutcomingConnections(t),
+      ...this.getNodeCycleConnections(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);
   }
   getPortIncomingConnections(t) {
     return Object.keys(this.incommingConnections[t] ?? {});
@@ -377,44 +352,27 @@ class R {
   getPortCycleConnections(t) {
     return Object.keys(this.cycleConnections[t] ?? {});
   }
-  getPortAdjacentConnections(t) {
-    return [
-      ...this.getPortIncomingConnections(t),
-      ...this.getPortOutcomingConnections(t),
-      ...this.getPortCycleConnections(t)
-    ];
-  }
   getNodeIncomingConnections(t) {
     const e = Object.keys(this.nodePorts[t]);
     let o = [];
-    return e.forEach((s) => {
-      o = [...o, ...this.getPortIncomingConnections(s)];
+    return e.forEach((n) => {
+      o = [...o, ...this.getPortIncomingConnections(n)];
     }), o;
   }
   getNodeOutcomingConnections(t) {
     const e = Object.keys(this.nodePorts[t]);
     let o = [];
-    return e.forEach((s) => {
-      o = [...o, ...this.getPortOutcomingConnections(s)];
+    return e.forEach((n) => {
+      o = [...o, ...this.getPortOutcomingConnections(n)];
     }), o;
   }
   getNodeCycleConnections(t) {
     const e = Object.keys(this.nodePorts[t]);
     let o = [];
-    return e.forEach((s) => {
-      o = [...o, ...this.getPortCycleConnections(s)];
+    return e.forEach((n) => {
+      o = [...o, ...this.getPortCycleConnections(n)];
     }), o;
   }
-  getNodeAdjacentConnections(t) {
-    return [
-      ...this.getNodeIncomingConnections(t),
-      ...this.getNodeOutcomingConnections(t),
-      ...this.getNodeCycleConnections(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);
-  }
 }
 class z {
   constructor(t) {
@@ -422,62 +380,29 @@ class z {
   }
   getNode(t) {
     const e = this.graphStore.getNode(t);
-    return e === void 0 ? null : { x: e.x, y: e.y };
-  }
-  getPort(t) {
-    const e = this.graphStore.getPortNode(t);
-    return e === void 0 ? null : { nodeId: e };
-  }
-  getConnection(t) {
-    const e = this.graphStore.getConnection(t);
-    return e === void 0 ? null : { from: e.from, to: e.to };
-  }
-  getAllNodes() {
-    return this.graphStore.getAllNodes();
-  }
-  getAllPorts() {
-    return this.graphStore.getAllPorts();
-  }
-  getAllConnections() {
-    return this.graphStore.getAllConnections();
-  }
-  hasNode(t) {
-    return this.graphStore.hasNode(t);
-  }
-  hasPort(t) {
-    return this.graphStore.hasPort(t);
-  }
-  hasConnection(t) {
-    return this.graphStore.hasConnection(t);
-  }
-  getPortIncomingConnections(t) {
-    return this.graphStore.getPortIncomingConnections(t);
-  }
-  getPortOutcomingConnections(t) {
-    return this.graphStore.getPortOutcomingConnections(t);
-  }
-  getPortCycleConnections(t) {
-    return this.graphStore.getPortCycleConnections(t);
-  }
-  getPortAdjacentConnections(t) {
-    return this.graphStore.getPortAdjacentConnections(t);
-  }
-  getNodeIncomingConnections(t) {
-    return this.graphStore.getNodeIncomingConnections(t);
-  }
-  getNodeOutcomingConnections(t) {
-    return this.graphStore.getNodeOutcomingConnections(t);
-  }
-  getNodeCycleConnections(t) {
-    return this.graphStore.getNodeCycleConnections(t);
-  }
-  getNodeAdjacentConnections(t) {
-    return this.graphStore.getNodeAdjacentConnections(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;
   }
 }
 class v {
   static getPortCenter(t) {
-    const { top: e, left: o, width: s, height: i } = t.element.getBoundingClientRect(), h = t.centerFn(s, i);
+    const { top: e, left: o, width: n, height: i } = t.element.getBoundingClientRect(), h = t.centerFn(n, i);
     return [o + h[0], e + h[1]];
   }
   static rotate(t, e, o) {
@@ -489,30 +414,30 @@ class v {
   static getDirectionVector(t, e, o) {
     return [e * Math.cos(t ?? 0), o * Math.sin(t ?? 0)];
   }
-  static getArrowPath(t, e, o, s, i) {
+  static getArrowPath(t, e, o, n, i) {
     const a = [
       [0, 0],
-      [s, i],
-      [s, -i]
+      [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, s, i) {
+  static getArrowOffsetPath(t, e, o, n, i) {
     const a = [
-      [s, 0],
-      [s + i, 0]
+      [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]}`;
   }
 }
 class G {
-  constructor(t, e, o, s, i, h, a) {
+  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 = s, 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(
+    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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = document.createElementNS(
@@ -520,8 +445,8 @@ class G {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, o, s, i, h) {
-    this.svg.style.width = `${o}px`, this.svg.style.height = `${s}px`;
+  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(
@@ -537,55 +462,55 @@ class G {
       d,
       [0, 0]
     ), p = v.rotate(
-      [o - this.arrowLength, s],
+      [o - this.arrowLength, n],
       m,
-      [o, s]
-    ), f = [
+      [o, n]
+    ), C = [
       u[0] + d[0] * this.curvature,
       u[1] + d[1] * this.curvature
-    ], y = [
+    ], w = [
       p[0] - m[0] * this.curvature,
       p[1] - m[1] * this.curvature
-    ], S = `M ${u[0]} ${u[1]}`, b = `C ${f[0]} ${f[1]}, ${y[0]} ${y[1]}, ${p[0]} ${p[1]}`, N = `M 0 0 L ${u[0]} ${u[1]} `, C = ` M ${p[0]} ${p[1]} L ${o} ${s}`, w = `${this.sourceArrow ? "" : N}${S} ${b}${this.targetArrow ? "" : C}`;
-    if (this.line.setAttribute("d", w), this.sourceArrow) {
-      const T = v.getArrowPath(
+    ], 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,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", T);
+      this.sourceArrow.setAttribute("d", N);
     }
     if (this.targetArrow) {
-      const T = v.getArrowPath(
+      const N = v.getArrowPath(
         m,
         o,
-        s,
+        n,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", T);
+      this.targetArrow.setAttribute("d", N);
     }
   }
 }
-const B = (n) => () => new G(
-  n.color ?? "#5c5c5c",
-  n.width ?? 1,
-  n.curvature ?? 90,
-  n.arrowLength ?? 15,
-  n.arrowWidth ?? 4,
-  n.hasSourceArrow ?? !1,
-  n.hasTargetArrow ?? !1
+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, s, i, h, a) {
+  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 = s, 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(
+    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(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = document.createElementNS(
@@ -593,8 +518,8 @@ class Y {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, e, o, s, i, h) {
-    this.svg.style.width = `${o}px`, this.svg.style.height = `${s}px`;
+  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(
@@ -610,23 +535,23 @@ class Y {
       d,
       [0, 0]
     ), p = v.rotate(
-      [o - this.arrowLength - this.minPortOffset, s],
+      [o - this.arrowLength - this.minPortOffset, n],
       m,
-      [o, s]
-    ), [f, y] = [o / 2, s / 2], S = l * (p[0] - u[0]) > 0 ? `M ${u[0]} ${u[1]} L ${f} ${u[1]} L ${f} ${p[1]} L ${p[0]} ${p[1]}` : `M ${u[0]} ${u[1]} L ${u[0]} ${y} L ${p[0]} ${y} L ${p[0]} ${p[1]}`, b = `M 0 0 L ${u[0]} ${u[1]} `, N = ` M ${p[0]} ${p[1]} L ${o} ${s}`, C = v.getArrowOffsetPath(
+      [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
-    ), w = v.getArrowOffsetPath(
+    ), y = v.getArrowOffsetPath(
       m,
       o,
-      s,
+      n,
       -this.arrowLength,
       -this.minPortOffset
-    ), T = `${this.sourceArrow ? C : b}${S}${this.targetArrow ? w : N}`;
-    if (this.line.setAttribute("d", T), this.sourceArrow) {
+    ), N = `${this.sourceArrow ? f : T}${b}${this.targetArrow ? y : S}`;
+    if (this.line.setAttribute("d", N), this.sourceArrow) {
       const E = v.getArrowPath(
         d,
         0,
@@ -640,7 +565,7 @@ class Y {
       const E = v.getArrowPath(
         m,
         o,
-        s,
+        n,
         -this.arrowLength,
         this.arrowWidth
       );
@@ -648,16 +573,16 @@ class Y {
     }
   }
 }
-const X = (n) => () => new Y(
-  n.color,
-  n.width,
-  n.arrowLength,
-  n.arrowWidth,
-  n.minPortOffset,
-  n.hasSourceArrow,
-  n.hasTargetArrow
+const X = (s) => () => new Y(
+  s.color,
+  s.width,
+  s.arrowLength,
+  s.arrowWidth,
+  s.minPortOffset,
+  s.hasSourceArrow,
+  s.hasTargetArrow
 );
-var $ = /* @__PURE__ */ ((n) => (n.Regular = "regular", n.Cycle = "cycle", n))($ || {});
+var P = /* @__PURE__ */ ((s) => (s.Regular = "regular", s.Cycle = "cycle", s))(P || {});
 class A {
   constructor() {
     r(this, "counter", 0);
@@ -671,24 +596,18 @@ class A {
   }
 }
 class Z {
-  constructor(t, e, o, s, i) {
+  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 = s, this.portsCenterFn = i;
+    this.graphStore = t, this.htmlController = e, this.viewportTransformer = o, this.nodesCenterFn = n, this.portsCenterFn = i;
   }
   moveNodeOnTop(t) {
     if (!this.graphStore.hasNode(t))
       throw new Error("failed to move on top nonexisting node");
     this.htmlController.moveNodeOnTop(t);
   }
-  dragNode(t, e, o) {
-    if (!this.graphStore.hasNode(t))
-      throw new Error("failed to drag nonexisting node");
-    const s = this.graphStore.getNode(t), [i, h] = this.viewportTransformer.getViewCoords(s.x, s.y), a = i + e, c = h + o, [l, g] = this.viewportTransformer.getAbsCoords(a, c);
-    this.graphStore.updateNodeCoords(t, l, g), this.htmlController.updateNodePosition(t);
-  }
-  addNode(t, e, o, s, i, h) {
+  addNode(t, e, o, n, i, h) {
     if (t === void 0)
       do
         t = this.nodeIdGenerator.next();
@@ -699,7 +618,7 @@ class Z {
       t,
       e,
       o,
-      s,
+      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(
@@ -711,7 +630,7 @@ class Z {
       );
     });
   }
-  markPort(t, e, o, s, i) {
+  markPort(t, e, o, n, i) {
     if (t === void 0)
       do
         t = this.portIdGenerator.next();
@@ -724,7 +643,7 @@ class Z {
       t,
       e,
       o,
-      s ?? this.portsCenterFn,
+      n ?? this.portsCenterFn,
       i ?? null
     );
   }
@@ -740,7 +659,7 @@ class Z {
       this.removeConnection(e);
     }), this.graphStore.removePort(t);
   }
-  addConnection(t, e, o, s) {
+  addConnection(t, e, o, n) {
     if (t === void 0)
       do
         t = this.connectionIdGenerator.next();
@@ -753,7 +672,7 @@ class Z {
       t,
       e,
       o,
-      s($.Regular)
+      n(P.Regular)
     ), this.htmlController.attachConnection(t);
   }
   removeConnection(t) {
@@ -769,28 +688,22 @@ class Z {
   patchViewportState(t, e, o) {
     this.viewportTransformer.patchState(t, e, o), this.htmlController.applyTransform();
   }
-  moveViewport(t, e) {
-    this.viewportTransformer.applyShift(t, e), this.htmlController.applyTransform();
-  }
-  scaleContent(t, e, o) {
-    this.viewportTransformer.applyScale(t, e, o), this.htmlController.applyTransform();
-  }
   moveToNodes(t) {
     if (t.length === 0)
       return;
     const e = t.map((m) => this.graphStore.getNode(m)).filter((m) => m !== void 0);
     if (e.length < t.length)
       throw new Error("failed to move to nonexisting node");
-    const [o, s] = e.reduce(
+    const [o, n] = e.reduce(
       (m, u) => [m[0] + u.x, m[1] + u.y],
       [0, 0]
-    ), i = o / e.length, h = s / e.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), g = i - l * a / 2, d = h - l * c / 2;
+    ), 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);
   }
-  updateNodeCoords(t, e, o) {
+  updateNodeCoordinates(t, e, o) {
     if (!this.graphStore.hasNode(t))
       throw new Error("failed to update coordinates of nonexisting node");
-    this.graphStore.updateNodeCoords(t, e, o), this.htmlController.updateNodePosition(t);
+    this.graphStore.updateNodeCoords(t, e, o), this.htmlController.updateNodeCoordinates(t);
   }
   updateConnectionController(t, e) {
     if (!this.graphStore.hasConnection(t))
@@ -811,122 +724,121 @@ class Z {
   }
 }
 class H {
-  constructor(t, e, o, s) {
-    r(this, "htmlController");
-    r(this, "viewportTransformer");
-    r(this, "graphStore");
+  constructor(t, e, o, n) {
     r(this, "publicViewportTransformer");
     r(this, "publicGraphStore");
     r(this, "canvasController");
-    this.viewportTransformer = new D(), this.publicViewportTransformer = new W(
-      this.viewportTransformer
-    ), this.graphStore = new R(), this.publicGraphStore = new z(this.graphStore), this.htmlController = new j(
-      this.graphStore,
-      this.viewportTransformer,
+    const i = new D(), h = new R();
+    this.publicViewportTransformer = new W(
+      i
+    ), this.publicGraphStore = new z(h);
+    const a = new j(
+      h,
+      i,
       this.publicViewportTransformer,
       t,
       e
-    ), this.canvasController = new Z(
-      this.graphStore,
-      this.htmlController,
-      this.viewportTransformer,
+    );
+    this.canvasController = new Z(
+      h,
+      a,
+      i,
       o,
-      s
+      n
     );
   }
 }
-const P = (n, t) => [
-  n / 2,
+const $ = (s, t) => [
+  s / 2,
   t / 2
 ], U = () => () => {
-}, q = (n, t, e, o, s, i) => {
-  n.clearRect(0, 0, n.canvas.width, n.canvas.height), n.save(), n.fillStyle = i, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
+}, 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;
   do
-    d *= 2, l = n.canvas.width / d, g = n.canvas.height / d;
+    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 = s * a, f = 2 * Math.PI, y = m - d, S = u - d, b = n.canvas.width + m, N = n.canvas.height + u;
-  n.fillStyle = e;
-  for (let C = y; C <= b; C += d)
-    for (let w = S; w <= N; w += d)
-      n.beginPath(), n.arc(C, w, p, 0, f), n.closePath(), n.fill();
-  n.restore();
-}, J = (n, t, e, o) => (s, i) => {
-  q(
-    s,
-    i,
+  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,
     t,
     e,
     o
   );
-}, K = (n, t) => {
-  n.fillStyle = t, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
-}, Q = (n) => (t) => {
-  K(t, n);
-}, _ = (n) => {
-  switch (n == null ? void 0 : n.type) {
+}, 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) {
     case "custom":
-      return n.drawingFn;
+      return s.drawingFn;
     case "dots":
-      return J(
-        n.dotColor ?? "#d8d8d8",
-        n.dotGap ?? 25,
-        n.dotRadius ?? 1.5,
-        n.color ?? "#ffffff"
+      return K(
+        s.dotColor ?? "#d8d8d8",
+        s.dotGap ?? 25,
+        s.dotRadius ?? 1.5,
+        s.color ?? "#ffffff"
       );
     case "color":
-      return Q(n.color ?? "#ffffff");
+      return _(s.color ?? "#ffffff");
     default:
       return U();
   }
-}, O = (n) => {
-  switch (n == null ? void 0 : n.type) {
+}, M = (s) => {
+  switch (s == null ? void 0 : s.type) {
     case "custom":
-      return n.controllerFactory;
+      return s.controllerFactory;
     case "straight":
       return X({
-        color: n.color ?? "#5c5c5c",
-        width: n.width ?? 1,
-        arrowLength: n.arrowLength ?? 15,
-        arrowWidth: n.arrowWidth ?? 4,
-        minPortOffset: n.minPortOffset ?? 15,
-        hasSourceArrow: n.hasSourceArrow ?? !1,
-        hasTargetArrow: n.hasTargetArrow ?? !1
+        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
       });
     default:
       return B({
-        color: n.color ?? "#5c5c5c",
-        width: n.width ?? 1,
-        curvature: n.curvature ?? 90,
-        arrowLength: n.arrowLength ?? 15,
-        arrowWidth: n.arrowWidth ?? 4,
-        hasSourceArrow: n.hasSourceArrow ?? !1,
-        hasTargetArrow: n.hasTargetArrow ?? !1
+        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
       });
   }
-}, I = (n) => {
+}, I = (s) => {
   var t, e, o;
   return {
     background: {
-      drawingFn: _(
-        n.background ?? { type: "none" }
+      drawingFn: q(
+        s.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((t = n.nodes) == null ? void 0 : t.centerFn) ?? P
+      centerFn: ((t = s.nodes) == null ? void 0 : t.centerFn) ?? $
     },
     ports: {
-      centerFn: ((e = n.ports) == null ? void 0 : e.centerFn) ?? P
+      centerFn: ((e = s.ports) == null ? void 0 : e.centerFn) ?? $
     },
     connections: {
-      controllerFactory: O(
-        n.connections ?? {}
+      controllerFactory: M(
+        s.connections ?? {}
       )
     },
     layers: {
-      mode: ((o = n.layers) == null ? void 0 : o.mode) ?? "connections-follow-node"
+      mode: ((o = s.layers) == null ? void 0 : o.mode) ?? "connections-follow-node"
     }
   };
 };
@@ -977,7 +889,7 @@ class tt {
     return this.di.canvasController.unmarkPort(t), this;
   }
   addConnection(t) {
-    const e = t.options !== void 0 ? O(t.options) : this.connectionControllerFactory;
+    const e = t.options !== void 0 ? M(t.options) : this.connectionControllerFactory;
     return this.di.canvasController.addConnection(
       t.id,
       t.from,
@@ -995,24 +907,11 @@ class tt {
       t.y ?? null
     ), this;
   }
-  moveViewport(t) {
-    return this.di.canvasController.moveViewport(
-      t.x ?? 0,
-      t.y ?? 0
-    ), this;
-  }
-  scaleViewport(t) {
-    return this.di.canvasController.scaleContent(
-      t.scale,
-      t.x ?? 0,
-      t.y ?? 0
-    ), this;
-  }
   moveToNodes(t) {
     return this.di.canvasController.moveToNodes(t), this;
   }
-  updateNodeCoords(t, e, o) {
-    return this.di.canvasController.updateNodeCoords(t, e, o), this;
+  updateNodeCoordinates(t, e, o) {
+    return this.di.canvasController.updateNodeCoordinates(t, e, o), this;
   }
   updateConnection(t, e) {
     return e.controller !== void 0 && this.di.canvasController.updateConnectionController(
@@ -1020,9 +919,6 @@ class tt {
       e.controller
     ), this;
   }
-  dragNode(t, e, o) {
-    return this.di.canvasController.dragNode(t, e, o), this;
-  }
   clear() {
     return this.di.canvasController.clear(), this;
   }
@@ -1037,22 +933,19 @@ class tt {
   }
 }
 class et {
-  constructor(t) {
+  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", () => {
       this.setCursor(null), this.grabbedNodeId = null;
     });
     r(this, "onCanvasMouseMove", (t) => {
-      this.grabbedNodeId !== null && (t.stopPropagation(), this.canvas.dragNode(
-        this.grabbedNodeId,
-        t.movementX,
-        t.movementY
-      ));
+      this.grabbedNodeId !== null && (t.stopPropagation(), this.dragNode(this.grabbedNodeId, t.movementX, t.movementY));
     });
     r(this, "onCanvasTouchStart", (t) => {
       this.previousTouchCoords = [
@@ -1068,16 +961,21 @@ class et {
         t.touches[0].clientX - this.previousTouchCoords[0],
         t.touches[0].clientY - this.previousTouchCoords[1]
       ];
-      this.canvas.dragNode(this.grabbedNodeId, e, o), this.previousTouchCoords = [
+      this.dragNode(this.grabbedNodeId, e, o), this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ];
     });
-    r(this, "onCanvasTouchEnd", () => {
-      this.previousTouchCoords = null, this.grabbedNodeId = null;
+    r(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);
-    this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    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) ?? (() => {
+    });
   }
   addNode(t) {
     let e = t.id;
@@ -1088,14 +986,14 @@ class et {
     this.canvas.addNode(t);
     const o = (i) => {
       i.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e);
-    }, s = (i) => {
+    }, n = (i) => {
       i.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
     };
     return this.nodes.set(e, {
       el: t.element,
       onMouseDown: o,
-      onTouchStart: s
-    }), t.element.addEventListener("mousedown", o), t.element.addEventListener("touchstart", s), this;
+      onTouchStart: n
+    }), t.element.addEventListener("mousedown", o), t.element.addEventListener("touchstart", n), this;
   }
   removeNode(t) {
     const e = this.nodes.get(t);
@@ -1119,24 +1017,15 @@ class et {
   patchViewportState(t) {
     return this.canvas.patchViewportState(t), this;
   }
-  moveViewport(t) {
-    return this.canvas.moveViewport(t), this;
-  }
-  scaleViewport(t) {
-    return this.canvas.scaleViewport(t), this;
-  }
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
   }
-  updateNodeCoords(t, e, o) {
-    return this.canvas.updateNodeCoords(t, e, o), this;
+  updateNodeCoordinates(t, e, o) {
+    return this.canvas.updateNodeCoordinates(t, e, o), this;
   }
   updateConnection(t, e) {
     return this.canvas.updateConnection(t, e), this;
   }
-  dragNode(t, e, o) {
-    return this.canvas.dragNode(t, e, o), this;
-  }
   moveNodeOnTop(t) {
     return this.canvas.moveNodeOnTop(t), this;
   }
@@ -1154,11 +1043,18 @@ class et {
   destroy() {
     this.detach(), this.nodes.forEach((t) => {
       t.el.removeEventListener("mousedown", t.onMouseDown), t.el.removeEventListener("touchstart", t.onTouchStart);
-    }), this.canvas.destroy();
+    }), 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)
+      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);
+  }
 }
 class ot {
   constructor(t, e) {
@@ -1167,16 +1063,20 @@ class ot {
     r(this, "element", null);
     r(this, "isMoving", !1);
     r(this, "prevTouches", null);
+    r(this, "onTransform");
     r(this, "isScalable");
     r(this, "isShiftable");
-    r(this, "minContentScale");
-    r(this, "maxContentScale");
+    r(this, "minViewScale");
+    r(this, "maxViewScale");
     r(this, "wheelSensitivity");
     r(this, "onMouseDown", () => {
       this.setCursor("grab"), this.isMoving = !0;
     });
     r(this, "onMouseMove", (t) => {
-      !this.isMoving || !this.isShiftable || this.canvas.moveViewport({ x: -t.movementX, y: -t.movementY });
+      if (!this.isMoving || !this.isShiftable)
+        return;
+      const e = -t.movementX, o = -t.movementY;
+      this.moveViewport(e, o);
     });
     r(this, "onMouseUp", () => {
       this.setCursor(null), this.isMoving = !1;
@@ -1185,8 +1085,8 @@ class ot {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
-      const { left: e, top: o } = this.element.getBoundingClientRect(), s = t.clientX - e, i = t.clientY - o, h = t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity, a = this.canvas.transformation.getViewScale() * h;
-      this.checkNextScaleValid(a) && this.canvas.scaleViewport({ scale: 1 / h, x: s, y: i });
+      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);
     });
     r(this, "onTouchStart", (t) => {
       this.prevTouches = this.getAverageTouch(t);
@@ -1195,22 +1095,25 @@ class ot {
       if (this.prevTouches === null || this.element === null || !this.isShiftable)
         return;
       const e = this.getAverageTouch(t);
-      if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.canvas.moveViewport({
-        x: -(e.x - this.prevTouches.x),
-        y: -(e.y - this.prevTouches.y)
-      }), e.touchesCnt === 2 && this.isScalable) {
-        const { left: o, top: s } = this.element.getBoundingClientRect(), i = this.prevTouches.x - o, h = this.prevTouches.y - s, a = e.scale / this.prevTouches.scale, c = this.canvas.transformation.getViewScale() * a;
-        this.checkNextScaleValid(c) && this.canvas.scaleViewport({ scale: 1 / a, x: i, y: h });
+      if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.moveViewport(
+        -(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);
       }
       this.prevTouches = e, t.preventDefault();
     });
-    r(this, "onTouchEnd", () => {
-      this.prevTouches = null;
+    r(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 s, i, h, a, c, l, g, d, m, u;
-    this.canvas = t, this.options = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((i = (s = this.options) == null ? void 0 : s.scale) == null ? void 0 : i.enabled) !== !1, this.minContentScale = ((a = (h = this.options) == null ? void 0 : h.scale) == null ? void 0 : a.minContent) ?? null, this.maxContentScale = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.maxContent) ?? null, this.isShiftable = ((d = (g = this.options) == null ? void 0 : g.shift) == null ? void 0 : d.enabled) !== !1;
-    const o = (u = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : u.wheelSensitivity;
-    this.wheelSensitivity = o !== void 0 ? o : 1.2;
   }
   addNode(t) {
     return this.canvas.addNode(t), this;
@@ -1236,24 +1139,15 @@ class ot {
   patchViewportState(t) {
     return this.canvas.patchViewportState(t), this;
   }
-  moveViewport(t) {
-    return this.canvas.moveViewport(t), this;
-  }
-  scaleViewport(t) {
-    return this.canvas.scaleViewport(t), this;
-  }
   moveToNodes(t) {
     return this.canvas.moveToNodes(t), this;
   }
-  updateNodeCoords(t, e, o) {
-    return this.canvas.updateNodeCoords(t, e, o), this;
+  updateNodeCoordinates(t, e, o) {
+    return this.canvas.updateNodeCoordinates(t, e, o), this;
   }
   updateConnection(t, e) {
     return this.canvas.updateConnection(t, e), this;
   }
-  dragNode(t, e, o) {
-    return this.canvas.dragNode(t, e, o), this;
-  }
   moveNodeOnTop(t) {
     return this.canvas.moveNodeOnTop(t), this;
   }
@@ -1273,26 +1167,35 @@ class ot {
     const e = [], o = t.touches.length;
     for (let c = 0; c < o; c++)
       e.push([t.touches[c].clientX, t.touches[c].clientY]);
-    const s = e.reduce(
+    const n = e.reduce(
       (c, l) => [c[0] + l[0], c[1] + l[1]],
       [0, 0]
-    ), i = [s[0] / o, s[1] / o], a = e.map((c) => [c[0] - i[0], c[1] - i[1]]).reduce(
+    ), 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]),
       0
     );
     return { x: i[0], y: i[1], scale: a / o, touchesCnt: o };
   }
-  checkNextScaleValid(t) {
-    const e = this.canvas.transformation.getViewScale();
-    return !(this.maxContentScale !== null && t > this.maxContentScale && t > e || this.minContentScale !== null && t < this.minContentScale && t < e);
-  }
   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();
+  }
+  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());
+  }
 }
 class st {
   constructor() {
     r(this, "coreOptions");
+    r(this, "dragOptions");
     r(this, "transformOptions");
     r(this, "isDraggable", !1);
     r(this, "isTransformable", !1);
@@ -1300,21 +1203,21 @@ class st {
   setOptions(t) {
     return this.coreOptions = t, this;
   }
-  setDraggableNodes() {
-    return this.isDraggable = !0, this;
+  setDraggableNodes(t) {
+    return this.isDraggable = !0, this.dragOptions = t, this;
   }
   setTransformableCanvas(t) {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
     let t = new tt(this.coreOptions);
-    return this.isDraggable && (t = new et(t)), this.isTransformable && (t = new ot(t, this.transformOptions)), t;
+    return this.isDraggable && (t = new et(t, this.dragOptions)), this.isTransformable && (t = new ot(t, this.transformOptions)), t;
   }
 }
 export {
   G as BezierConnectionController,
   tt as CanvasCore,
-  $ as ConnectionType,
+  P as ConnectionType,
   v as ConnectionUtils,
   et as DraggableNodesCanvas,
   st as HtmlGraphBuilder,