@html-graph/html-graph 0.1.7 → 1.1.0

package/dist/main.js

@@ -26,11 +26,11 @@ const O = (e, t) => ({
       let l = 0, a = 0, g = 0;
       const y = d > 0, x = d < r, f = y && x;
       if (y && (l = -i, a = -s, g = h), x) {
-        const I = e[d + 1];
-        i = I.x - c.x, s = I.y - c.y, h = Math.sqrt(i * i + s * s);
+        const D = e[d + 1];
+        i = D.x - c.x, s = D.y - c.y, h = Math.sqrt(i * i + s * s);
       }
-      const S = h !== 0 ? Math.min((f ? t : 0) / h, d < r - 1 ? 0.5 : 1) : 0, T = f ? { x: c.x + i * S, y: c.y + s * S } : c, P = g !== 0 ? Math.min((f ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = f ? { x: c.x + l * P, y: c.y + a * P } : c;
-      d > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
+      const E = h !== 0 ? Math.min((f ? t : 0) / h, d < r - 1 ? 0.5 : 1) : 0, T = f ? { x: c.x + i * E, y: c.y + s * E } : c, L = g !== 0 ? Math.min((f ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, m = f ? { x: c.x + l * L, y: c.y + a * L } : c;
+      d > 0 && o.push(`L ${m.x} ${m.y}`), f && o.push(
         `C ${c.x} ${c.y} ${c.x} ${c.y} ${T.x} ${T.y}`
       );
     });
@@ -113,7 +113,7 @@ const O = (e, t) => ({
   }, A = {
     x: d.x + h,
     y: d.y + c
-  }, S = {
+  }, E = {
     x: a.x + h,
     y: a.y + c
   };
@@ -121,7 +121,7 @@ const O = (e, t) => ({
     `M ${t.x} ${t.y}`,
     `L ${d.x} ${d.y}`,
     `C ${x.x} ${x.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
-    `C ${S.x} ${S.y} ${f.x} ${f.y} ${a.x} ${a.y}`,
+    `C ${E.x} ${E.y} ${f.x} ${f.y} ${a.x} ${a.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
 }, et = (e) => {
@@ -145,7 +145,7 @@ const O = (e, t) => ({
     [t, s, l, a, y, g, h, o],
     e.roundness
   );
-}, G = (e) => {
+}, U = (e) => {
   const t = e.hasSourceArrow ? v(
     { x: e.arrowLength, y: w.y },
     e.fromVect,
@@ -203,7 +203,7 @@ const O = (e, t) => ({
     [t, s, l, a, y, g, h, o],
     e.roundness
   );
-}, U = (e) => {
+}, G = (e) => {
   const t = e.arrowOffset, o = e.side, r = e.arrowLength + t, i = r + 2 * o, h = [
     { x: e.arrowLength, y: w.y },
     { x: r, y: w.y },
@@ -268,31 +268,27 @@ class nt {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
-      h,
-      c
-    ), l = M(
-      t.target.direction,
+      t.from.direction,
       h,
       c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = it({
+    if (t.from.portId === t.to.portId ? (g = it({
       fromVect: d,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = tt({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = tt({
       to: a,
       fromVect: d,
       toVect: l,
@@ -360,24 +356,20 @@ class st {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
-      h,
-      c
-    ), l = M(
-      t.target.direction,
+      t.from.direction,
       h,
       c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = U({
+    if (t.from.portId === t.to.portId ? (g = G({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -385,7 +377,7 @@ class st {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = U({
       to: a,
       fromVect: d,
       toVect: l,
@@ -456,24 +448,20 @@ class ht {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
-      h,
-      c
-    ), l = M(
-      t.target.direction,
+      t.from.direction,
       h,
       c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = U({
+    if (t.from.portId === t.to.portId ? (g = G({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -481,7 +469,7 @@ class ht {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = U({
       to: a,
       fromVect: d,
       toVect: l,
@@ -551,24 +539,20 @@ class ct {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
+      t.from.direction,
       h,
       c
-    ), l = M(
-      t.target.direction,
-      h,
-      c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = U({
+    if (t.from.portId === t.to.portId ? (g = G({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -576,7 +560,7 @@ class ct {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = U({
       to: a,
       fromVect: d,
       toVect: l,
@@ -852,12 +836,12 @@ class gt {
 }
 const K = (e) => ({
   scale: 1 / e.scale,
-  dx: -e.dx / e.scale,
-  dy: -e.dy / e.scale
+  x: -e.x / e.scale,
+  y: -e.y / e.scale
 }), _ = {
   scale: 1,
-  dx: 0,
-  dy: 0
+  x: 0,
+  y: 0
 };
 class ut {
   constructor() {
@@ -873,15 +857,15 @@ class ut {
   patchViewportMatrix(t) {
     this.viewportMatrix = {
       scale: t.scale ?? this.viewportMatrix.scale,
-      dx: t.dx ?? this.viewportMatrix.dx,
-      dy: t.dy ?? this.viewportMatrix.dy
+      x: t.x ?? this.viewportMatrix.x,
+      y: t.y ?? this.viewportMatrix.y
     }, this.contentMatrix = K(this.viewportMatrix);
   }
   patchContentMatrix(t) {
     this.contentMatrix = {
       scale: t.scale ?? this.contentMatrix.scale,
-      dx: t.dx ?? this.contentMatrix.dx,
-      dy: t.dy ?? this.contentMatrix.dy
+      x: t.x ?? this.contentMatrix.x,
+      y: t.y ?? this.contentMatrix.y
     }, this.viewportMatrix = K(this.contentMatrix);
   }
 }
@@ -923,7 +907,7 @@ class xt {
   }
   applyTransform() {
     const t = this.viewportTransformer.getContentMatrix();
-    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`;
+    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
   }
   attachNode(t) {
     const o = this.graphStore.getNode(t), r = vt();
@@ -967,11 +951,11 @@ class xt {
   }
   renderEdge(t) {
     const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), i = this.graphStore.getPort(o.to), s = r.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), d = this.viewportTransformer.getViewportMatrix(), l = {
-      x: d.scale * (s.left - c.left) + d.dx,
-      y: d.scale * (s.top - c.top) + d.dy
+      x: d.scale * (s.left - c.left) + d.x,
+      y: d.scale * (s.top - c.top) + d.y
     }, a = {
-      x: d.scale * (h.left - c.left) + d.dx,
-      y: d.scale * (h.top - c.top) + d.dy
+      x: d.scale * (h.left - c.left) + d.x,
+      y: d.scale * (h.top - c.top) + d.y
     }, g = {
       x: l.x,
       y: l.y,
@@ -990,8 +974,8 @@ class xt {
       nodeId: this.graphStore.getPortNodeId(o.to)
     };
     o.shape.render({
-      source: g,
-      target: y
+      from: g,
+      to: y
     });
   }
   updateEdgePriority(t) {
@@ -999,7 +983,7 @@ class xt {
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class m {
+class I {
   constructor(t) {
     n(this, "counter", 0);
     this.checkExists = t;
@@ -1015,21 +999,21 @@ class m {
     this.counter = 0;
   }
 }
-class E extends Error {
+class S extends Error {
   constructor() {
     super(...arguments);
     n(this, "name", "HtmlGraphError");
   }
 }
-class Et {
+class St {
   constructor(t, o, r, i, s, h, c) {
-    n(this, "nodeIdGenerator", new m(
+    n(this, "nodeIdGenerator", new I(
       (t) => this.graphStore.getNode(t) !== void 0
     ));
-    n(this, "portIdGenerator", new m(
+    n(this, "portIdGenerator", new I(
       (t) => this.graphStore.getPort(t) !== void 0
     ));
-    n(this, "edgeIdGenerator", new m(
+    n(this, "edgeIdGenerator", new I(
       (t) => this.graphStore.getEdge(t) !== void 0
     ));
     this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = i, this.defaultPortsDirection = s, this.defaultNodesPriorityFn = h, this.defaultEdgesPriorityFn = c;
@@ -1043,7 +1027,7 @@ class Et {
   addNode(t) {
     const o = this.nodeIdGenerator.create(t.nodeId);
     if (this.graphStore.getNode(o) !== void 0)
-      throw new E("failed to add node with existing id");
+      throw new S("failed to add node with existing id");
     this.graphStore.addNode({
       nodeId: o,
       element: t.element,
@@ -1063,9 +1047,9 @@ class Et {
   markPort(t) {
     const o = this.portIdGenerator.create(t.portId);
     if (this.graphStore.getPort(o) !== void 0)
-      throw new E("failed to add port with existing id");
+      throw new S("failed to add port with existing id");
     if (this.graphStore.getNode(t.nodeId) === void 0)
-      throw new E("failed to set port on nonexisting node");
+      throw new S("failed to set port on nonexisting node");
     this.graphStore.addPort({
       portId: o,
       element: t.element,
@@ -1076,11 +1060,11 @@ class Et {
   addEdge(t) {
     const o = this.edgeIdGenerator.create(t.edgeId);
     if (this.graphStore.getEdge(o) !== void 0)
-      throw new E("failed to add edge with existing id");
+      throw new S("failed to add edge with existing id");
     if (this.graphStore.getPort(t.from) === void 0)
-      throw new E("failed to add edge from nonexisting port");
+      throw new S("failed to add edge from nonexisting port");
     if (this.graphStore.getPort(t.to) === void 0)
-      throw new E("failed to add edge to nonexisting port");
+      throw new S("failed to add edge to nonexisting port");
     this.graphStore.addEdge({
       edgeId: o,
       from: t.from,
@@ -1092,13 +1076,13 @@ class Et {
   updateEdge(t) {
     const o = this.graphStore.getEdge(t.edgeId);
     if (o === void 0)
-      throw new E("failed to update nonexisting edge");
+      throw new S("failed to update nonexisting edge");
     t.shape !== void 0 && (o.shape = t.shape, this.htmlController.updateEdgeShape(t.edgeId)), t.priority !== void 0 && (o.priority = t.priority, this.htmlController.updateEdgePriority(t.edgeId)), t.from !== void 0 && this.graphStore.updateEdgeFrom(t.edgeId, t.from), t.to !== void 0 && this.graphStore.updateEdgeTo(t.edgeId, t.to), this.htmlController.renderEdge(t.edgeId);
   }
   updatePort(t, o) {
     const r = this.graphStore.getPort(t);
     if (r === void 0)
-      throw new E("failed to unset nonexisting port");
+      throw new S("failed to unset nonexisting port");
     r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
       this.htmlController.renderEdge(s);
     });
@@ -1106,26 +1090,26 @@ class Et {
   updateNode(t, o) {
     const r = this.graphStore.getNode(t);
     if (r === void 0)
-      throw new E("failed to update nonexisting node");
+      throw new S("failed to update nonexisting node");
     r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = (o == null ? void 0 : o.centerFn) ?? r.centerFn, r.priority = (o == null ? void 0 : o.priority) ?? r.priority, this.htmlController.updateNodeCoordinates(t), this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((s) => {
       this.htmlController.renderEdge(s);
     });
   }
   removeEdge(t) {
     if (this.graphStore.getEdge(t) === void 0)
-      throw new E("failed to remove nonexisting edge");
+      throw new S("failed to remove nonexisting edge");
     this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
   }
   unmarkPort(t) {
     if (this.graphStore.getPort(t) === void 0)
-      throw new E("failed to unset nonexisting port");
+      throw new S("failed to unset nonexisting port");
     this.graphStore.getPortAdjacentEdgeIds(t).forEach((o) => {
       this.removeEdge(o);
     }), this.graphStore.removePort(t);
   }
   removeNode(t) {
     if (this.graphStore.getNode(t) === void 0)
-      throw new E("failed to remove nonexisting node");
+      throw new S("failed to remove nonexisting node");
     this.graphStore.getNodePortIds(t).forEach((o) => {
       this.unmarkPort(o);
     }), this.htmlController.detachNode(t), this.graphStore.removeNode(t);
@@ -1143,7 +1127,7 @@ class Et {
     this.clear(), this.htmlController.destroy();
   }
 }
-class St {
+class Et {
   constructor(t) {
     this.graphStore = t;
   }
@@ -1171,7 +1155,7 @@ class St {
     return this.graphStore.getAllPortIds();
   }
   getNodePortIds(t) {
-    return this.graphStore.getNodePortIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodePortIds(t);
   }
   getPortNodeId(t) {
     return this.graphStore.getPortNodeId(t) ?? null;
@@ -1184,28 +1168,28 @@ class St {
     return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
   }
   getPortIncomingEdgeIds(t) {
-    return this.graphStore.getPortIncomingEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(t);
   }
   getPortOutcomingEdgeIds(t) {
-    return this.graphStore.getPortOutcomingEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(t);
   }
   getPortCycleEdgeIds(t) {
-    return this.graphStore.getPortCycleEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(t);
   }
   getPortAdjacentEdgeIds(t) {
-    return this.graphStore.getPortAdjacentEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(t);
   }
   getNodeIncomingEdgeIds(t) {
-    return this.graphStore.getNodeIncomingEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(t);
   }
   getNodeOutcomingEdgeIds(t) {
-    return this.graphStore.getNodeOutcomingEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(t);
   }
   getNodeCycleEdgeIds(t) {
-    return this.graphStore.getNodeCycleEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(t);
   }
   getNodeAdjacentEdgeIds(t) {
-    return this.graphStore.getNodeAdjacentEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
   }
 }
 class At {
@@ -1216,9 +1200,9 @@ class At {
     n(this, "edgeShapeFactory");
     this.apiOptions = t;
     const o = at(this.apiOptions), r = new ut(), i = new gt();
-    this.model = new St(i), this.transformation = new wt(r);
+    this.model = new Et(i), this.transformation = new wt(r);
     const s = new xt(i, r);
-    this.canvasController = new Et(
+    this.canvasController = new St(
       i,
       s,
       r,
@@ -1309,13 +1293,13 @@ class At {
 const V = (e, t, o) => {
   const { x: r, y: i, width: s, height: h } = e.getBoundingClientRect();
   return t >= r && t <= r + s && o >= i && o <= i + h;
-}, b = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, p = (e, t) => {
+}, p = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, b = (e, t) => {
   t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
 }, Tt = (e) => {
-  var g, y, x, f, A, S;
+  var g, y, x, f, A, E;
   const t = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
   }), o = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
-  }), i = (e == null ? void 0 : e.moveOnTop) === !1, s = (f = e == null ? void 0 : e.mouse) == null ? void 0 : f.dragCursor, h = s !== void 0 ? s : "grab", c = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, l = (S = e == null ? void 0 : e.mouse) == null ? void 0 : S.mouseUpEventVerifier;
+  }), i = (e == null ? void 0 : e.moveOnTop) === !1, s = (f = e == null ? void 0 : e.mouse) == null ? void 0 : f.dragCursor, h = s !== void 0 ? s : "grab", c = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, l = (E = e == null ? void 0 : e.mouse) == null ? void 0 : E.mouseUpEventVerifier;
   return {
     freezePriority: i,
     dragCursor: h,
@@ -1333,12 +1317,12 @@ class Mt {
     n(this, "maxNodePriority", 0);
     n(this, "nodes", /* @__PURE__ */ new Map());
     n(this, "grabbedNodeId", null);
-    n(this, "nodeIdGenerator", new m(
+    n(this, "nodeIdGenerator", new I(
       (t) => this.nodes.has(t)
     ));
     n(this, "element", null);
     n(this, "onWindowMouseMove", (t) => {
-      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !b(this.window, t.clientX, t.clientY))) {
+      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !p(this.window, t.clientX, t.clientY))) {
         this.cancelMouseDrag();
         return;
       }
@@ -1351,7 +1335,7 @@ class Mt {
       if (t.touches.length !== 1)
         return;
       const o = t.touches[0];
-      if (this.element !== null && (!V(this.element, o.clientX, o.clientY) || !b(this.window, o.clientX, o.clientY))) {
+      if (this.element !== null && (!V(this.element, o.clientX, o.clientY) || !p(this.window, o.clientX, o.clientY))) {
         this.cancelTouchDrag();
         return;
       }
@@ -1389,7 +1373,7 @@ class Mt {
         element: t.element,
         x: h.x,
         y: h.y
-      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, p(this.element, this.options.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
+      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, b(this.element, this.options.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
     }, i = (s) => {
       if (s.touches.length !== 1)
         return;
@@ -1454,7 +1438,7 @@ class Mt {
     const i = this.model.getNode(t);
     if (i === null)
       return;
-    const s = this.canvas.transformation.getContentMatrix(), h = s.scale * i.x + s.dx, c = s.scale * i.y + s.dy, d = h + o, l = c + r, a = this.canvas.transformation.getViewportMatrix(), g = a.scale * d + a.dx, y = a.scale * l + a.dy;
+    const s = this.canvas.transformation.getContentMatrix(), h = s.scale * i.x + s.x, c = s.scale * i.y + s.y, d = h + o, l = c + r, a = this.canvas.transformation.getViewportMatrix(), g = a.scale * d + a.x, y = a.scale * l + a.y;
     this.canvas.updateNode(t, { x: g, y }), this.options.onNodeDrag({
       nodeId: t,
       element: i.element,
@@ -1482,7 +1466,7 @@ class Mt {
       element: t.element,
       x: t.x,
       y: t.y
-    }), this.grabbedNodeId = null, this.element !== null && p(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, this.element !== null && b(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1504,35 +1488,35 @@ class Mt {
 const Ct = (e) => {
   const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, i = e.maxY !== null ? e.maxY : 1 / 0;
   return (s) => {
-    let h = s.nextTransform.dx, c = s.nextTransform.dy;
-    h < t && h < s.prevTransform.dx && (h = Math.min(s.prevTransform.dx, t));
-    const d = s.canvasWidth * s.prevTransform.scale;
-    h > o - d && h > s.prevTransform.dx && (h = Math.max(s.prevTransform.dx, o - d)), c < r && c < s.prevTransform.dy && (c = Math.min(s.prevTransform.dy, r));
-    const l = s.canvasHeight * s.prevTransform.scale;
-    return c > i - l && c > s.prevTransform.dy && (c = Math.max(s.prevTransform.dy, i - l)), { scale: s.nextTransform.scale, dx: h, dy: c };
+    let h = s.nextTransform.x, c = s.nextTransform.y;
+    h < t && h < s.prevTransform.x && (h = Math.min(s.prevTransform.x, t));
+    const d = s.canvasWidth * s.prevTransform.scale, l = o - d;
+    h > l && h > s.prevTransform.x && (h = Math.max(s.prevTransform.x, l)), c < r && c < s.prevTransform.y && (c = Math.min(s.prevTransform.y, r));
+    const a = s.canvasHeight * s.prevTransform.scale, g = i - a;
+    return c > g && c > s.prevTransform.y && (c = Math.max(s.prevTransform.y, g)), { scale: s.nextTransform.scale, x: h, y: c };
   };
 }, Nt = (e) => {
   const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, i = o !== null ? 1 / o : 1 / 0;
   return (s) => {
     const h = s.prevTransform, c = s.nextTransform;
-    let d = c.scale, l = c.dx, a = c.dy;
+    let d = c.scale, l = c.x, a = c.y;
     if (c.scale > i && c.scale > h.scale) {
-      d = Math.max(h.scale, i), l = h.dx, a = h.dy;
+      d = Math.max(h.scale, i), l = h.x, a = h.y;
       const g = (d - h.scale) / (c.scale - h.scale);
-      l = h.dx + (c.dx - h.dx) * g, a = h.dy + (c.dy - h.dy) * g;
+      l = h.x + (c.x - h.x) * g, a = h.y + (c.y - h.y) * g;
     }
     if (c.scale < r && c.scale < h.scale) {
-      d = Math.min(h.scale, r), l = h.dx, a = h.dy;
+      d = Math.min(h.scale, r), l = h.x, a = h.y;
       const g = (d - h.scale) / (c.scale - h.scale);
-      l = h.dx + (c.dx - h.dx) * g, a = h.dy + (c.dy - h.dy) * g;
+      l = h.x + (c.x - h.x) * g, a = h.y + (c.y - h.y) * g;
     }
     return {
       scale: d,
-      dx: l,
-      dy: a
+      x: l,
+      y: a
     };
   };
-}, Lt = (e) => (t) => e.reduce(
+}, Pt = (e) => (t) => e.reduce(
   (o, r) => r({
     prevTransform: t.prevTransform,
     nextTransform: o,
@@ -1557,21 +1541,21 @@ const Ct = (e) => {
         maxY: e.maxY ?? 1 / 0
       });
   }
-}, Pt = (e) => {
-  var f, A, S, T, X, P, D, I, j;
+}, Lt = (e) => {
+  var f, A, E, T, X, L, m, D, j;
   const t = (f = e == null ? void 0 : e.scale) == null ? void 0 : f.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
   let i;
-  r !== void 0 ? Array.isArray(r) ? i = Lt(
+  r !== void 0 ? Array.isArray(r) ? i = Pt(
     r.map(
-      (L) => J(L)
+      (P) => J(P)
     )
-  ) : i = J(r) : i = (L) => L.nextTransform;
-  const s = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", h = ((S = e == null ? void 0 : e.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
+  ) : i = J(r) : i = (P) => P.nextTransform;
+  const s = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", h = ((E = e == null ? void 0 : e.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), c = ((T = e == null ? void 0 : e.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), d = (X = e == null ? void 0 : e.shift) == null ? void 0 : X.mouseDownEventVerifier, l = d !== void 0 ? d : (L) => L.button === 0, a = (P = e == null ? void 0 : e.shift) == null ? void 0 : P.mouseUpEventVerifier, g = a !== void 0 ? a : (L) => L.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
+  }), d = (X = e == null ? void 0 : e.shift) == null ? void 0 : X.mouseDownEventVerifier, l = d !== void 0 ? d : (P) => P.button === 0, a = (L = e == null ? void 0 : e.shift) == null ? void 0 : L.mouseUpEventVerifier, g = a !== void 0 ? a : (P) => P.button === 0, y = (m = e == null ? void 0 : e.scale) == null ? void 0 : m.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((I = e == null ? void 0 : e.events) == null ? void 0 : I.onTransformStarted) ?? (() => {
+    onTransformStarted: ((D = e == null ? void 0 : e.events) == null ? void 0 : D.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((j = e == null ? void 0 : e.events) == null ? void 0 : j.onTransformFinished) ?? (() => {
     }),
@@ -1601,16 +1585,16 @@ const Ct = (e) => {
     touchesCnt: o,
     touches: t
   };
-}, Dt = (e, t, o) => ({
+}, mt = (e, t, o) => ({
   scale: e.scale,
-  dx: e.dx + e.scale * t,
-  dy: e.dy + e.scale * o
-}), It = (e, t, o, r) => ({
+  x: e.x + e.scale * t,
+  y: e.y + e.scale * o
+}), Dt = (e, t, o, r) => ({
   scale: e.scale * t,
-  dx: e.scale * (1 - t) * o + e.dx,
-  dy: e.scale * (1 - t) * r + e.dy
+  x: e.scale * (1 - t) * o + e.x,
+  y: e.scale * (1 - t) * r + e.y
 });
-class mt {
+class It {
   constructor(t, o) {
     n(this, "model");
     n(this, "transformation");
@@ -1618,10 +1602,10 @@ class mt {
     n(this, "prevTouches", null);
     n(this, "window", window);
     n(this, "onMouseDown", (t) => {
-      this.element === null || !this.options.mouseDownEventVerifier(t) || (p(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
+      this.element === null || !this.options.mouseDownEventVerifier(t) || (b(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
     });
     n(this, "onWindowMouseMove", (t) => {
-      if (this.element === null || !V(this.element, t.clientX, t.clientY) || !b(this.window, t.clientX, t.clientY)) {
+      if (this.element === null || !V(this.element, t.clientX, t.clientY) || !p(this.window, t.clientX, t.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -1647,7 +1631,7 @@ class mt {
         return;
       const r = B(t);
       if (!r.touches.every(
-        (s) => V(o, s[0], s[1]) && b(this.window, s[0], s[1])
+        (s) => V(o, s[0], s[1]) && p(this.window, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1675,7 +1659,7 @@ class mt {
       this.canvas.patchViewportMatrix(i), this.options.onTransformChange();
     }));
     n(this, "options");
-    this.canvas = t, this.options = Pt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    this.canvas = t, this.options = Lt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
   attach(t) {
     return this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), this;
@@ -1724,7 +1708,7 @@ class mt {
   }
   moveViewport(t, o, r) {
     this.options.onBeforeTransformChange();
-    const i = this.transformation.getViewportMatrix(), s = Dt(i, o, r), { width: h, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
+    const i = this.transformation.getViewportMatrix(), s = mt(i, o, r), { width: h, height: c } = t.getBoundingClientRect(), d = this.options.transformPreprocessor({
       prevTransform: i,
       nextTransform: s,
       canvasWidth: h,
@@ -1734,7 +1718,7 @@ class mt {
   }
   scaleViewport(t, o, r, i) {
     this.options.onBeforeTransformChange();
-    const s = this.canvas.transformation.getViewportMatrix(), h = It(s, o, r, i), { width: c, height: d } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
+    const s = this.canvas.transformation.getViewportMatrix(), h = Dt(s, o, r, i), { width: c, height: d } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: c,
@@ -1743,7 +1727,7 @@ class mt {
     this.canvas.patchViewportMatrix(l), this.options.onTransformChange();
   }
   stopMouseDrag() {
-    this.element !== null && p(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
+    this.element !== null && b(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -1797,7 +1781,7 @@ class Vt {
     n(this, "transformation");
     n(this, "model");
     n(this, "nodes", new $t());
-    n(this, "nodeIdGenerator", new m(
+    n(this, "nodeIdGenerator", new I(
       (t) => this.nodes.hasKey(t)
     ));
     n(this, "nodesResizeObserver");
@@ -1866,7 +1850,7 @@ class Vt {
     });
   }
 }
-class pt {
+class bt {
   constructor() {
     n(this, "coreOptions");
     n(this, "dragOptions");
@@ -1881,7 +1865,14 @@ class pt {
   setUserDraggableNodes(t) {
     return this.isDraggable = !0, this.dragOptions = t, this;
   }
+  /**
+   * @deprecated
+   * use setUserTransformableViewport instead
+   */
   setUserTransformableCanvas(t) {
+    return this.setUserTransformableViewport(t);
+  }
+  setUserTransformableViewport(t) {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   setResizeReactiveNodes() {
@@ -1889,18 +1880,20 @@ class pt {
   }
   build() {
     let t = new At(this.coreOptions);
-    return this.hasResizeReactiveNodes && (t = new Vt(t)), this.isDraggable && (t = new Mt(t, this.dragOptions)), this.isTransformable && (t = new mt(t, this.transformOptions)), t;
+    return this.hasResizeReactiveNodes && (t = new Vt(t)), this.isDraggable && (t = new Mt(t, this.dragOptions)), this.isTransformable && (t = new It(t, this.transformOptions)), t;
   }
 }
 export {
   nt as BezierEdgeShape,
+  bt as CanvasBuilder,
   At as CanvasCore,
   st as HorizontalEdgeShape,
-  pt as HtmlGraphBuilder,
-  E as HtmlGraphError,
+  bt as HtmlGraphBuilder,
+  S as HtmlGraphError,
   Vt as ResizeReactiveNodesCanvas,
   ht as StraightEdgeShape,
   Mt as UserDraggableNodesCanvas,
-  mt as UserTransformableCanvas,
+  It as UserTransformableCanvas,
+  It as UserTransformableViewportCanvas,
   ct as VerticalEdgeShape
 };