@html-graph/html-graph 0.0.54 → 0.0.56

package/dist/main.js

@@ -1,29 +1,29 @@
-var G = Object.defineProperty;
-var j = (e, t, r) => t in e ? G(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var n = (e, t, r) => j(e, typeof t != "symbol" ? t + "" : t, r);
-const H = () => {
+var _ = Object.defineProperty;
+var J = (e, t, r) => t in e ? _(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var h = (e, t, r) => J(e, typeof t != "symbol" ? t + "" : t, r);
+const K = () => {
   const e = document.createElement("div");
   return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
-}, U = () => {
+}, Q = () => {
   const e = document.createElement("canvas");
   return e.style.position = "absolute", e.style.inset = "0", e;
-}, _ = () => {
+}, Z = () => {
   const e = document.createElement("div");
   return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
 };
-class J {
+class q {
   constructor(t, r, s, o) {
-    n(this, "canvasWrapper", null);
-    n(this, "host", H());
-    n(this, "canvas", U());
-    n(this, "container", _());
-    n(this, "canvasCtx");
-    n(this, "hostResizeObserver");
-    n(this, "nodesResizeObserver");
-    n(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
-    n(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
-    n(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
-    n(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
+    h(this, "canvasWrapper", null);
+    h(this, "host", K());
+    h(this, "canvas", Q());
+    h(this, "container", Z());
+    h(this, "canvasCtx");
+    h(this, "hostResizeObserver");
+    h(this, "nodesResizeObserver");
+    h(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
+    h(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
+    h(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
+    h(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     this.graphStore = t, this.viewportTransformer = r, this.publicViewportTransformer = s, this.backgroundDrawingFn = o;
     const i = this.canvas.getContext("2d");
     if (i === null)
@@ -49,7 +49,7 @@ class J {
   applyTransform() {
     this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
     const t = this.viewportTransformer.getContentMatrix();
-    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
+    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`;
   }
   attachNode(t) {
     const r = this.graphStore.getNode(t), s = document.createElement("div");
@@ -63,7 +63,7 @@ class J {
   }
   attachEdge(t) {
     const s = this.graphStore.getEdge(t).shape.svg;
-    s.style.position = "absolute", s.style.top = "0", s.style.left = "0", this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.updateEdgePriority(t), this.container.appendChild(s);
+    this.edgeIdToElementMap.set(t, s), this.container.appendChild(s), this.updateEdgeCoords(t), this.updateEdgePriority(t);
   }
   detachEdge(t) {
     const r = this.edgeIdToElementMap.get(t);
@@ -97,8 +97,8 @@ class J {
     return new ResizeObserver((t) => {
       t.forEach((r) => {
         const s = r.target, o = this.nodeWrapperElementToIdMap.get(s);
-        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((a) => {
-          this.updateEdgeCoords(a);
+        this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((n) => {
+          this.updateEdgeCoords(n);
         });
       });
     });
@@ -108,86 +108,94 @@ class J {
     this.canvas.width = t, this.canvas.height = r;
   }
   updateNodeCoords(t) {
-    const r = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = r.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, a = this.graphStore.getNode(t), [c, h] = a.centerFn(s, o), d = a.x - i * c, l = a.y - i * h;
-    r.style.transform = `matrix(1, 0, 0, 1, ${d}, ${l})`;
+    const r = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = r.getBoundingClientRect(), i = this.viewportTransformer.getViewportMatrix().scale, n = this.graphStore.getNode(t), { x: c, y: a } = n.centerFn(s, o), l = n.x - i * c, d = n.y - i * a;
+    r.style.transform = `matrix(1, 0, 0, 1, ${l}, ${d})`;
   }
   updateEdgeCoords(t) {
-    const r = this.graphStore.getEdge(t), s = this.graphStore.getPort(r.from), o = this.graphStore.getPort(r.to), i = s.element.getBoundingClientRect(), a = o.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), h = this.viewportTransformer.getViewportMatrix(), d = h.scale * (i.left - c.left) + h.x, l = h.scale * (i.top - c.top) + h.y, u = h.scale * (a.left - c.left) + h.x, g = h.scale * (a.top - c.top) + h.y, [f, w] = s.centerFn(
-      i.width * h.scale,
-      i.height * h.scale
-    ), [v, m] = o.centerFn(
-      a.width * h.scale,
-      a.height * h.scale
-    ), E = f + d, p = w + l, y = v + u, S = m + g, A = Math.min(E, y), P = Math.min(p, S), T = Math.abs(y - E), L = Math.abs(S - p);
-    r.shape.update(A, P, T, L, s, o);
+    const r = this.graphStore.getEdge(t), s = this.graphStore.getPort(r.from), o = this.graphStore.getPort(r.to), i = s.element.getBoundingClientRect(), n = o.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), a = this.viewportTransformer.getViewportMatrix(), l = a.scale * (i.left - c.left) + a.dx, d = a.scale * (i.top - c.top) + a.dy, g = a.scale * (n.left - c.left) + a.dx, u = a.scale * (n.top - c.top) + a.dy, { x: y, y: w } = s.centerFn(
+      i.width * a.scale,
+      i.height * a.scale
+    ), { x: v, y: p } = o.centerFn(
+      n.width * a.scale,
+      n.height * a.scale
+    ), f = y + l, m = w + d, x = v + g, A = p + u, C = Math.min(f, x), P = Math.min(m, A), T = Math.abs(x - f), L = Math.abs(A - m);
+    r.shape.update(C, P, T, L, s, o);
   }
 }
-const Y = {
+const G = {
   scale: 1,
-  x: 0,
-  y: 0
+  dx: 0,
+  dy: 0
 };
-class K {
+class I {
   constructor() {
-    n(this, "viewportMatrix", Y);
-    n(this, "contentMatrix", Y);
+    h(this, "viewportMatrix", G);
+    h(this, "contentMatrix", G);
   }
   getViewportMatrix() {
-    return { ...this.viewportMatrix };
+    return this.viewportMatrix;
   }
   getContentMatrix() {
-    return { ...this.contentMatrix };
+    return this.contentMatrix;
   }
-  patchViewportState(t, r, s) {
+  patchViewportMatrix(t, r, s) {
     this.viewportMatrix = {
       scale: t ?? this.viewportMatrix.scale,
-      x: r ?? this.viewportMatrix.x,
-      y: s ?? this.viewportMatrix.y
+      dx: r ?? this.viewportMatrix.dx,
+      dy: s ?? this.viewportMatrix.dy
     }, this.contentMatrix = this.calculateReverseMatrix(this.viewportMatrix);
   }
-  patchContentState(t, r, s) {
+  patchContentMatrix(t, r, s) {
     this.contentMatrix = {
       scale: t ?? this.contentMatrix.scale,
-      x: r ?? this.contentMatrix.x,
-      y: s ?? this.contentMatrix.y
+      dx: r ?? this.contentMatrix.dx,
+      dy: s ?? this.contentMatrix.dy
     }, this.viewportMatrix = this.calculateReverseMatrix(this.contentMatrix);
   }
   calculateReverseMatrix(t) {
     return {
       scale: 1 / t.scale,
-      x: -t.x / t.scale,
-      y: -t.y / t.scale
+      dx: -t.dx / t.scale,
+      dy: -t.dy / t.scale
     };
   }
 }
-class Q {
+class tt {
   constructor(t) {
     this.transformer = t;
   }
   getViewportMatrix() {
-    return this.transformer.getViewportMatrix();
+    return { ...this.transformer.getViewportMatrix() };
   }
   getContentMatrix() {
-    return this.transformer.getContentMatrix();
+    return { ...this.transformer.getContentMatrix() };
   }
 }
-class Z {
+class et {
   constructor() {
-    n(this, "nodes", /* @__PURE__ */ new Map());
-    n(this, "ports", /* @__PURE__ */ new Map());
-    n(this, "nodePorts", /* @__PURE__ */ new Map());
-    n(this, "portNodeId", /* @__PURE__ */ new Map());
-    n(this, "edges", /* @__PURE__ */ new Map());
-    n(this, "incommingEdges", /* @__PURE__ */ new Map());
-    n(this, "outcommingEdges", /* @__PURE__ */ new Map());
-    n(this, "cycleEdges", /* @__PURE__ */ new Map());
-  }
-  addNode(t, r, s, o, i, a) {
-    this.nodes.set(t, { element: r, x: s, y: o, centerFn: i, priority: a }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
+    h(this, "nodes", /* @__PURE__ */ new Map());
+    h(this, "ports", /* @__PURE__ */ new Map());
+    h(this, "nodePorts", /* @__PURE__ */ new Map());
+    h(this, "portNodeId", /* @__PURE__ */ new Map());
+    h(this, "edges", /* @__PURE__ */ new Map());
+    h(this, "incommingEdges", /* @__PURE__ */ new Map());
+    h(this, "outcommingEdges", /* @__PURE__ */ new Map());
+    h(this, "cycleEdges", /* @__PURE__ */ new Map());
+  }
+  addNode(t, r, s, o, i, n) {
+    this.nodes.set(t, { element: r, x: s, y: o, centerFn: i, priority: n }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
+  }
+  getAllNodes() {
+    return Array.from(this.nodes.keys());
   }
   getNode(t) {
     return this.nodes.get(t);
   }
+  getNodePorts(t) {
+    const r = this.nodePorts.get(t);
+    if (r !== void 0)
+      return Array.from(r.keys());
+  }
   removeNode(t) {
     this.getNodeAdjacentEdges(t).forEach((o) => {
       this.removeEdge(o);
@@ -198,6 +206,9 @@ class Z {
   addPort(t, r, s, o, i) {
     this.ports.set(t, { element: r, centerFn: o, direction: i }), this.cycleEdges.set(t, /* @__PURE__ */ new Set()), this.incommingEdges.set(t, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t, /* @__PURE__ */ new Set()), this.portNodeId.set(t, s), this.nodePorts.get(s).set(t, r);
   }
+  getAllPorts() {
+    return Array.from(this.ports.keys());
+  }
   getPort(t) {
     return this.ports.get(t);
   }
@@ -223,6 +234,9 @@ class Z {
       priority: i
     }), r !== s ? (this.outcommingEdges.get(r).add(t), this.incommingEdges.get(s).add(t)) : this.cycleEdges.get(r).add(t);
   }
+  getAllEdges() {
+    return Array.from(this.edges.keys());
+  }
   getEdge(t) {
     return this.edges.get(t);
   }
@@ -278,10 +292,16 @@ class Z {
     }), s;
   }
 }
-class q {
+class rt {
   constructor(t) {
     this.graphStore = t;
   }
+  getAllNodes() {
+    return this.graphStore.getAllNodes();
+  }
+  getAllPorts() {
+    return this.graphStore.getAllPorts();
+  }
   getNode(t) {
     const r = this.graphStore.getNode(t);
     return r === void 0 ? null : {
@@ -292,6 +312,9 @@ class q {
       priority: r.priority
     };
   }
+  getNodePorts(t) {
+    return this.graphStore.getNodePorts(t);
+  }
   getPort(t) {
     const r = this.graphStore.getPort(t);
     return r === void 0 ? null : {
@@ -303,6 +326,9 @@ class q {
   getPortNode(t) {
     return this.graphStore.getPortNode(t) ?? null;
   }
+  getAllEdges() {
+    return this.graphStore.getAllEdges();
+  }
   getEdge(t) {
     const r = this.graphStore.getEdge(t);
     return r === void 0 ? null : { from: r.from, to: r.to, priority: r.priority };
@@ -334,26 +360,45 @@ class q {
 }
 const M = (e) => {
   const { top: t, left: r, width: s, height: o } = e.element.getBoundingClientRect(), i = e.centerFn(s, o);
-  return [r + i[0], t + i[1]];
-}, C = (e, t, r) => [
-  t[0] * e[0] - t[1] * e[1] + ((1 - t[0]) * r[0] + t[1] * r[1]),
-  t[1] * e[0] + t[0] * e[1] + ((1 - t[0]) * r[1] - t[1] * r[0])
-], N = (e, t, r) => [t * Math.cos(e), r * Math.sin(e)], b = (e, t, r, s, o) => {
-  const a = [
-    [0, 0],
-    [s, o],
-    [s, -o]
-  ].map((l) => C(l, e, [0, 0])).map((l) => [l[0] + t, l[1] + r]), c = `M ${a[0][0]} ${a[0][1]}`, h = `L ${a[1][0]} ${a[1][1]}`, d = `L ${a[2][0]} ${a[2][1]}`;
-  return `${c} ${h} ${d}`;
+  return { x: r + i.x, y: t + i.y };
+}, E = (e, t, r) => ({
+  x: t.x * e.x - t.y * e.y + ((1 - t.x) * r.x + t.y * r.y),
+  y: t.y * e.x + t.x * e.y + ((1 - t.x) * r.y - t.y * r.x)
+}), S = (e, t, r) => ({ x: t * Math.cos(e), y: r * Math.sin(e) }), b = (e, t, r, s, o) => {
+  const n = [
+    { x: 0, y: 0 },
+    { x: s, y: o },
+    { x: s, y: -o }
+  ].map((d) => E(d, e, { x: 0, y: 0 })).map((d) => ({ x: d.x + t, y: d.y + r })), c = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, l = `L ${n[2].x} ${n[2].y}`;
+  return `${c} ${a} ${l}`;
+}, D = (e, t) => {
+  const r = [];
+  if (e.length > 0 && r.push(`M ${e[0].x} ${e[0].y}`), e.length === 2 && r.push(`L ${e[1].x} ${e[1].y}`), e.length > 2) {
+    const s = e.length - 1;
+    let o = 0, i = 0, n = 0;
+    e.forEach((c, a) => {
+      let l = 0, d = 0, g = 0;
+      const u = a > 0, y = a < s, w = u && y;
+      if (u && (l = -o, d = -i, g = n), y) {
+        const C = e[a + 1];
+        o = C.x - c.x, i = C.y - c.y, n = Math.sqrt(o * o + i * i);
+      }
+      const p = Math.min((w ? t : 0) / n, a < s - 1 ? 0.5 : 1), f = w ? { x: c.x + o * p, y: c.y + i * p } : c, x = Math.min((w ? t : 0) / g, a > 1 ? 0.5 : 1), A = w ? { x: c.x + l * x, y: c.y + d * x } : c;
+      a > 0 && r.push(`L ${A.x} ${A.y}`), w && r.push(
+        `C ${c.x} ${c.y} ${c.x} ${c.y} ${f.x} ${f.y}`
+      );
+    });
+  }
+  return r.join(" ");
 };
-class I {
-  constructor(t, r, s, o, i, a, c) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", a && (this.sourceArrow = document.createElementNS(
+class st {
+  constructor(t, r, s, o, i, n, c) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "sourceArrow", null);
+    h(this, "targetArrow", null);
+    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", 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%", n && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
@@ -361,70 +406,57 @@ class I {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, i, a) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
-    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = C([this.arrowLength, 0], u, [0, 0]), w = C([s - this.arrowLength, o], g, [
-      s,
-      o
-    ]), v = [
-      f[0] + u[0] * this.curvature,
-      f[1] + u[1] * this.curvature
-    ], m = [
-      w[0] - g[0] * this.curvature,
-      w[1] - g[1] * this.curvature
-    ], E = `M ${f[0]} ${f[1]} C ${v[0]} ${v[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`, p = this.sourceArrow ? "" : `M 0 0 L ${f[0]} ${f[1]} `, y = this.targetArrow ? "" : ` M ${w[0]} ${w[1]} L ${s} ${o}`, S = `${p}${E}${y}`;
-    if (this.line.setAttribute("d", S), this.sourceArrow) {
-      const A = b(
-        u,
+  update(t, r, s, o, i, n) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
+    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
+    this.group.style.transform = `scale(${l}, ${d})`;
+    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = E({ x: this.arrowLength, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }), w = E(
+      { x: s - this.arrowLength, y: o },
+      u,
+      {
+        x: s,
+        y: o
+      }
+    ), v = {
+      x: y.x + g.x * this.curvature,
+      y: y.y + g.y * this.curvature
+    }, p = {
+      x: w.x - u.x * this.curvature,
+      y: w.y - u.y * this.curvature
+    }, f = `M ${y.x} ${y.y} C ${v.x} ${v.y}, ${p.x} ${p.y}, ${w.x} ${w.y}`, m = this.sourceArrow ? "" : `M 0 0 L ${y.x} ${y.y} `, x = this.targetArrow ? "" : ` M ${w.x} ${w.y} L ${s} ${o}`, A = `${m}${f}${x}`;
+    if (this.line.setAttribute("d", A), this.sourceArrow) {
+      const C = b(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", A);
+      this.sourceArrow.setAttribute("d", C);
     }
     if (this.targetArrow) {
-      const A = b(
-        g,
+      const C = b(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", A);
+      this.targetArrow.setAttribute("d", C);
     }
   }
 }
-const F = (e, t) => {
-  const r = [];
-  if (e.length > 0 && r.push(`M ${e[0][0]} ${e[0][1]}`), e.length === 2 && r.push(`L ${e[1][0]} ${e[1][1]}`), e.length > 2) {
-    const s = e.length - 1;
-    let o = 0, i = 0, a = 0;
-    e.forEach((c, h) => {
-      let d = 0, l = 0, u = 0;
-      const g = h > 0, f = h < s, w = g && f;
-      if (g && (d = -o, l = -i, u = a), f) {
-        const A = e[h + 1];
-        o = A[0] - c[0], i = A[1] - c[1], a = Math.sqrt(o * o + i * i);
-      }
-      const m = Math.min((w ? t : 0) / a, h < s - 1 ? 0.5 : 1), E = w ? [c[0] + o * m, c[1] + i * m] : c, y = Math.min((w ? t : 0) / u, h > 1 ? 0.5 : 1), S = w ? [c[0] + d * y, c[1] + l * y] : c;
-      h > 0 && r.push(`L ${S[0]} ${S[1]}`), w && r.push(
-        `C ${c[0]} ${c[1]} ${c[0]} ${c[1]} ${E[0]} ${E[1]}`
-      );
-    });
-  }
-  return r.join(" ");
-};
-class tt {
-  constructor(t, r, s, o, i, 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 = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = 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.sourceArrow = document.createElementNS(
+class ot {
+  constructor(t, r, s, o, i, n, c, a) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "sourceArrow", null);
+    h(this, "targetArrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", 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%", n && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
@@ -432,47 +464,50 @@ class tt {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, i, a) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
-    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
-      s,
-      o
-    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = C([s - v, o], g, [
-      s,
-      o
-    ]), p = F([f, m, E, w], this.roundness);
-    if (this.line.setAttribute("d", p), this.sourceArrow) {
-      const y = b(
-        u,
+  update(t, r, s, o, i, n) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
+    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
+    this.group.style.transform = `scale(${l}, ${d})`;
+    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
+      x: s,
+      y: o
+    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, { x: 0, y: 0 }), f = E({ x: s - v, y: o }, u, {
+      x: s,
+      y: o
+    }), m = D([y, p, f, w], this.roundness);
+    if (this.line.setAttribute("d", m), this.sourceArrow) {
+      const x = b(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", x);
     }
     if (this.targetArrow) {
-      const y = b(
-        g,
+      const x = b(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", x);
     }
   }
 }
-class et {
-  constructor(t, r, s, o, i, 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 = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = 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.sourceArrow = document.createElementNS(
+class it {
+  constructor(t, r, s, o, i, n, c, a) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "sourceArrow", null);
+    h(this, "targetArrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", 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%", n && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
@@ -480,23 +515,26 @@ class et {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, i, a) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
-    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
-      s,
-      o
-    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = C([s - v, o], g, [
-      s,
-      o
-    ]), p = Math.max((m[0] + E[0]) / 2, v), y = o / 2, S = [d > 0 ? p : -v, m[1]], A = [S[0], y], P = [d > 0 ? s - p : s + v, E[1]], T = [P[0], y], L = F(
-      [f, m, S, A, T, P, E, w],
+  update(t, r, s, o, i, n) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
+    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
+    this.group.style.transform = `scale(${l}, ${d})`;
+    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
+      x: s,
+      y: o
+    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, { x: 0, y: 0 }), f = E({ x: s - v, y: o }, u, {
+      x: s,
+      y: o
+    }), m = Math.max((p.x + f.x) / 2, v), x = o / 2, A = { x: l > 0 ? m : -v, y: p.y }, C = { x: A.x, y: x }, P = { x: l > 0 ? s - m : s + v, y: f.y }, T = { x: P.x, y: x }, L = D(
+      [y, p, A, C, T, P, f, w],
       this.roundness
     );
     if (this.line.setAttribute("d", L), this.sourceArrow) {
       const $ = b(
-        u,
+        g,
         0,
         0,
         this.arrowLength,
@@ -506,7 +544,7 @@ class et {
     }
     if (this.targetArrow) {
       const $ = b(
-        g,
+        u,
         s,
         o,
         -this.arrowLength,
@@ -516,14 +554,14 @@ class et {
     }
   }
 }
-class rt {
-  constructor(t, r, s, o, i, 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 = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = 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.sourceArrow = document.createElementNS(
+class nt {
+  constructor(t, r, s, o, i, n, c, a) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "sourceArrow", null);
+    h(this, "targetArrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", 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%", n && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
@@ -531,23 +569,29 @@ class rt {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, i, a) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
-    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
-      s,
-      o
-    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = C([s - v, o], g, [
-      s,
-      o
-    ]), p = Math.max((m[1] + E[1]) / 2, v), y = s / 2, S = [m[0], l > 0 ? p : -v], A = [y, S[1]], P = [E[0], l > 0 ? o - p : o + v], T = [y, P[1]], L = F(
-      [f, m, S, A, T, P, E, w],
+  update(t, r, s, o, i, n) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
+    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
+    this.group.style.transform = `scale(${l}, ${d})`;
+    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
+      x: s,
+      y: o
+    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, { x: 0, y: 0 }), f = E({ x: s - v, y: o }, u, {
+      x: s,
+      y: o
+    }), m = Math.max((p.y + f.y) / 2, v), x = s / 2, A = { x: p.x, y: d > 0 ? m : -v }, C = { x, y: A.y }, P = {
+      x: f.x,
+      y: d > 0 ? o - m : o + v
+    }, T = { x, y: P.y }, L = D(
+      [y, p, A, C, T, P, f, w],
       this.roundness
     );
     if (this.line.setAttribute("d", L), this.sourceArrow) {
       const $ = b(
-        u,
+        g,
         0,
         0,
         this.arrowLength,
@@ -557,7 +601,7 @@ class rt {
     }
     if (this.targetArrow) {
       const $ = b(
-        g,
+        u,
         s,
         o,
         -this.arrowLength,
@@ -567,92 +611,94 @@ class rt {
     }
   }
 }
-class st {
-  constructor(t, r, s, o, i, a, c) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "arrow", null);
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.radius = a, this.smallRadius = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
+class ht {
+  constructor(t, r, s, o, i, n, c) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "arrow", null);
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.radius = n, this.smallRadius = c, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
   }
   update(t, r, s, o, i) {
     this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const a = N(i.direction, 1, 1), c = this.smallRadius, h = this.radius, d = Math.sqrt(c * c + h * h), l = c + h, u = this.arrowLength + d * (1 - h / l), g = c * h / l, w = [
-      [this.arrowLength, 0],
-      [u, g],
-      [u, -g]
-    ].map((p) => C(p, a, [0, 0])), v = [
-      `M ${w[0][0]} ${w[0][1]}`,
-      `A ${c} ${c} 0 0 1 ${w[1][0]} ${w[1][1]}`,
-      `A ${h} ${h} 0 1 0 ${w[2][0]} ${w[2][1]}`,
-      `A ${c} ${c} 0 0 1 ${w[0][0]} ${w[0][1]}`
-    ].join(" "), m = `M 0 0 L ${w[0][0]} ${w[0][1]} `, E = `${this.arrow !== null ? "" : m}${v}`;
-    if (this.line.setAttribute("d", E), this.arrow) {
-      const p = b(
-        a,
+    const n = S(i.direction, 1, 1), c = this.smallRadius, a = this.radius, l = Math.sqrt(c * c + a * a), d = c + a, g = this.arrowLength + l * (1 - a / d), u = c * a / d, w = [
+      { x: this.arrowLength, y: 0 },
+      { x: g, y: u },
+      { x: g, y: -u }
+    ].map(
+      (m) => E(m, n, { x: 0, y: 0 })
+    ), v = [
+      `M ${w[0].x} ${w[0].y}`,
+      `A ${c} ${c} 0 0 1 ${w[1].x} ${w[1].y}`,
+      `A ${a} ${a} 0 1 0 ${w[2].x} ${w[2].y}`,
+      `A ${c} ${c} 0 0 1 ${w[0].x} ${w[0].y}`
+    ].join(" "), p = `M 0 0 L ${w[0].x} ${w[0].y} `, f = `${this.arrow !== null ? "" : p}${v}`;
+    if (this.line.setAttribute("d", f), this.arrow) {
+      const m = b(
+        n,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", p);
+      this.arrow.setAttribute("d", m);
     }
   }
 }
-class k {
-  constructor(t, r, s, o, i, a, c, h) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "arrow", null);
-    n(this, "roundness");
-    n(this, "linePoints");
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.side = a, this.minPortOffset = c, this.roundness = Math.min(h, this.minPortOffset, this.side / 2), this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
+class z {
+  constructor(t, r, s, o, i, n, c, a) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "arrow", null);
+    h(this, "roundness");
+    h(this, "linePoints");
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.side = n, this.minPortOffset = c, this.roundness = Math.min(a, this.minPortOffset, this.side / 2), this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", this.group = document.createElementNS("http://www.w3.org/2000/svg", "g"), this.svg.appendChild(this.group), this.line = document.createElementNS("http://www.w3.org/2000/svg", "path"), this.line.setAttribute("stroke", this.color), this.line.setAttribute("stroke-width", `${this.width}`), this.line.setAttribute("fill", "none"), this.group.appendChild(this.line), this.group.style.transformOrigin = "50% 50%", i && (this.arrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
-    const d = this.minPortOffset, l = this.side, u = this.arrowLength + d, g = this.roundness, f = u + 2 * l;
-    console.log(g), this.linePoints = [
-      [this.arrowLength, 0],
-      [u, 0],
-      [u, this.side],
-      [f, this.side],
-      [f, -this.side],
-      [u, -this.side],
-      [u, 0],
-      [this.arrowLength, 0]
+    const l = this.minPortOffset, d = this.side, g = this.arrowLength + l, u = this.roundness, y = g + 2 * d;
+    console.log(u), this.linePoints = [
+      { x: this.arrowLength, y: 0 },
+      { x: g, y: 0 },
+      { x: g, y: this.side },
+      { x: y, y: this.side },
+      { x: y, y: -this.side },
+      { x: g, y: -this.side },
+      { x: g, y: 0 },
+      { x: this.arrowLength, y: 0 }
     ];
   }
   update(t, r, s, o, i) {
     this.svg.style.transform = `translate(${t}px, ${r}px)`;
-    const a = N(i.direction, 1, 1), c = this.linePoints.map(
-      (l) => C(l, a, [0, 0])
-    ), h = `M 0 0 L ${c[0][0]} ${c[0][1]} `, d = `${this.arrow ? "" : h}${F(c, this.roundness)}`;
-    if (this.line.setAttribute("d", d), this.arrow) {
-      const l = b(
-        a,
+    const n = S(i.direction, 1, 1), c = this.linePoints.map(
+      (d) => E(d, n, { x: 0, y: 0 })
+    ), a = `M 0 0 L ${c[0].x} ${c[0].y} `, l = `${this.arrow ? "" : a}${D(c, this.roundness)}`;
+    if (this.line.setAttribute("d", l), this.arrow) {
+      const d = b(
+        n,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.arrow.setAttribute("d", l);
+      this.arrow.setAttribute("d", d);
     }
   }
 }
-class R {
-  constructor(t, r, s, o, i, a, c, h, d, l) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    n(this, "detourX");
-    n(this, "detourY");
-    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = h, this.detourX = Math.cos(l) * d, this.detourY = Math.sin(l) * d, 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.sourceArrow = document.createElementNS(
+class B {
+  constructor(t, r, s, o, i, n, c, a, l, d) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "sourceArrow", null);
+    h(this, "targetArrow", null);
+    h(this, "detourX");
+    h(this, "detourY");
+    this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = i, this.roundness = a, this.detourX = Math.cos(d) * l, this.detourY = Math.sin(d) * l, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", 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%", n && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
@@ -660,53 +706,63 @@ class R {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, i, a) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
-    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
-      s,
-      o
-    ]) : [s, o], v = this.arrowLength + this.arrowOffset, m = C([v, 0], u, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], p = C([s - v, o], g, [
-      s,
-      o
-    ]), y = [p[0] + this.detourX, p[1] + this.detourY], S = F(
-      [f, m, E, y, p, w],
+  update(t, r, s, o, i, n) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
+    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
+    this.group.style.transform = `scale(${l}, ${d})`;
+    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
+      x: s,
+      y: o
+    }) : { x: s, y: o }, v = this.arrowLength + this.arrowOffset, p = E({ x: v, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }), f = { x: p.x + this.detourX, y: p.y + this.detourY }, m = E(
+      { x: s - v, y: o },
+      u,
+      {
+        x: s,
+        y: o
+      }
+    ), x = { x: m.x + this.detourX, y: m.y + this.detourY }, A = D(
+      [y, p, f, x, m, w],
       this.roundness
     );
-    if (this.line.setAttribute("d", S), this.sourceArrow) {
-      const A = b(
-        u,
+    if (this.line.setAttribute("d", A), this.sourceArrow) {
+      const C = b(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", A);
+      this.sourceArrow.setAttribute("d", C);
     }
     if (this.targetArrow) {
-      const A = b(
-        g,
+      const C = b(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", A);
+      this.targetArrow.setAttribute("d", C);
     }
   }
 }
-var x = /* @__PURE__ */ ((e) => (e.Regular = "regular", e.PortCycle = "port-cycle", e.NodeCycle = "node-cycle", e))(x || {});
-class ot {
-  constructor(t, r, s, o, i, a, c, h, d) {
-    n(this, "svg");
-    n(this, "group");
-    n(this, "line");
-    n(this, "sourceArrow", null);
-    n(this, "targetArrow", null);
-    n(this, "detourX");
-    n(this, "detourY");
-    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.detourX = Math.cos(d) * h, this.detourY = Math.sin(d) * 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.sourceArrow = document.createElementNS(
+var N = /* @__PURE__ */ ((e) => (e.Regular = "regular", e.PortCycle = "port-cycle", e.NodeCycle = "node-cycle", e))(N || {});
+class at {
+  constructor(t, r, s, o, i, n, c, a, l) {
+    h(this, "svg");
+    h(this, "group");
+    h(this, "line");
+    h(this, "sourceArrow", null);
+    h(this, "targetArrow", null);
+    h(this, "detourX");
+    h(this, "detourY");
+    this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = i, this.detourX = Math.cos(l) * a, this.detourY = Math.sin(l) * a, this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), this.svg.style.pointerEvents = "none", this.svg.style.position = "absolute", this.svg.style.top = "0", this.svg.style.left = "0", 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%", n && (this.sourceArrow = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "path"
     ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), c && (this.targetArrow = document.createElementNS(
@@ -714,52 +770,62 @@ class ot {
       "path"
     ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
   }
-  update(t, r, s, o, i, a) {
-    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
-    const c = M(i), h = M(a), d = c[0] <= h[0] ? 1 : -1, l = c[1] <= h[1] ? 1 : -1;
-    this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${d}, ${l})`;
-    const u = N(i.direction, d, l), g = N(a.direction, d, l), f = this.sourceArrow ? C([this.arrowLength, 0], u, [0, 0]) : [0, 0], w = this.targetArrow ? C([s - this.arrowLength, o], g, [
-      s,
-      o
-    ]) : [s, o], v = this.arrowLength, m = C([v, 0], u, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], p = C([s - v, o], g, [
-      s,
-      o
-    ]), y = [p[0] + this.detourX, p[1] + this.detourY], S = [(E[0] + y[0]) / 2, (E[1] + y[1]) / 2], A = [
-      m[0] - this.curvature * Math.cos(i.direction),
-      m[1] - this.curvature * Math.sin(i.direction)
-    ], P = [
-      p[0] + this.curvature * Math.cos(a.direction),
-      p[1] + this.curvature * Math.sin(a.direction)
-    ], T = [m[0] + this.detourX, m[1] + this.detourY], L = [p[0] + this.detourX, p[1] + this.detourY], $ = [
-      `M ${f[0]} ${f[1]}`,
-      `L ${m[0]} ${m[1]}`,
-      `C ${A[0]} ${A[1]} ${T[0]} ${T[1]} ${S[0]} ${S[1]}`,
-      `C ${L[0]} ${L[1]} ${P[0]} ${P[1]} ${p[0]} ${p[1]}`,
-      `L ${w[0]} ${w[1]}`
+  update(t, r, s, o, i, n) {
+    this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`, this.svg.style.transform = `translate(${t}px, ${r}px)`;
+    const c = M(i), a = M(n), l = c.x <= a.x ? 1 : -1, d = c.y <= a.y ? 1 : -1;
+    this.group.style.transform = `scale(${l}, ${d})`;
+    const g = S(i.direction, l, d), u = S(n.direction, l, d), y = this.sourceArrow ? E({ x: this.arrowLength, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }) : { x: 0, y: 0 }, w = this.targetArrow ? E({ x: s - this.arrowLength, y: o }, u, {
+      x: s,
+      y: o
+    }) : { x: s, y: o }, v = this.arrowLength, p = E({ x: v, y: 0 }, g, {
+      x: 0,
+      y: 0
+    }), f = { x: p.x + this.detourX, y: p.y + this.detourY }, m = E(
+      { x: s - v, y: o },
+      u,
+      {
+        x: s,
+        y: o
+      }
+    ), x = { x: m.x + this.detourX, y: m.y + this.detourY }, A = { x: (f.x + x.x) / 2, y: (f.y + x.y) / 2 }, C = {
+      x: p.x - this.curvature * Math.cos(i.direction),
+      y: p.y - this.curvature * Math.sin(i.direction)
+    }, P = {
+      x: m.x + this.curvature * Math.cos(n.direction),
+      y: m.y + this.curvature * Math.sin(n.direction)
+    }, T = { x: p.x + this.detourX, y: p.y + this.detourY }, L = { x: m.x + this.detourX, y: m.y + this.detourY }, $ = [
+      `M ${y.x} ${y.y}`,
+      `L ${p.x} ${p.y}`,
+      `C ${C.x} ${C.y} ${T.x} ${T.y} ${A.x} ${A.y}`,
+      `C ${L.x} ${L.y} ${P.x} ${P.y} ${m.x} ${m.y}`,
+      `L ${w.x} ${w.y}`
     ].join(" ");
     if (this.line.setAttribute("d", $), this.sourceArrow) {
-      const D = b(
-        u,
+      const k = b(
+        g,
         0,
         0,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", D);
+      this.sourceArrow.setAttribute("d", k);
     }
     if (this.targetArrow) {
-      const D = b(
-        g,
+      const k = b(
+        u,
         s,
         o,
         -this.arrowLength,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", D);
+      this.targetArrow.setAttribute("d", k);
     }
   }
 }
-const it = (e) => (t) => t === x.PortCycle ? new st(
+const ct = (e) => (t) => t === N.PortCycle ? new ht(
   e.color,
   e.width,
   e.arrowLength,
@@ -767,7 +833,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.hasSourceArrow || e.hasTargetArrow,
   e.cycleRadius,
   e.smallCycleRadius
-) : t === x.NodeCycle ? new ot(
+) : t === N.NodeCycle ? new at(
   e.color,
   e.width,
   e.curvature,
@@ -777,7 +843,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.hasTargetArrow,
   e.detourDistance,
   e.detourDirection
-) : new I(
+) : new st(
   e.color,
   e.width,
   e.curvature,
@@ -785,7 +851,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.arrowWidth,
   e.hasSourceArrow,
   e.hasTargetArrow
-), nt = (e) => (t) => t === x.PortCycle ? new k(
+), lt = (e) => (t) => t === N.PortCycle ? new z(
   e.color,
   e.width,
   e.arrowLength,
@@ -794,7 +860,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.cycleSquareSide,
   e.arrowOffset,
   e.roundness
-) : t === x.NodeCycle ? new R(
+) : t === N.NodeCycle ? new B(
   e.color,
   e.width,
   e.arrowLength,
@@ -805,7 +871,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.roundness,
   e.detourDistance,
   e.detourDirection
-) : new tt(
+) : new ot(
   e.color,
   e.width,
   e.arrowLength,
@@ -814,7 +880,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.hasSourceArrow,
   e.hasTargetArrow,
   e.roundness
-), at = (e) => (t) => t === x.PortCycle ? new k(
+), dt = (e) => (t) => t === N.PortCycle ? new z(
   e.color,
   e.width,
   e.arrowLength,
@@ -823,7 +889,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.cycleSquareSide,
   e.arrowOffset,
   e.roundness
-) : t === x.NodeCycle ? new R(
+) : t === N.NodeCycle ? new B(
   e.color,
   e.width,
   e.arrowLength,
@@ -834,7 +900,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.roundness,
   e.detourDistance,
   e.detourDirection
-) : new et(
+) : new it(
   e.color,
   e.width,
   e.arrowLength,
@@ -843,7 +909,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.hasSourceArrow,
   e.hasTargetArrow,
   e.roundness
-), ht = (e) => (t) => t === x.PortCycle ? new k(
+), gt = (e) => (t) => t === N.PortCycle ? new z(
   e.color,
   e.width,
   e.arrowLength,
@@ -852,7 +918,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.cycleSquareSide,
   e.arrowOffset,
   e.roundness
-) : t === x.NodeCycle ? new R(
+) : t === N.NodeCycle ? new B(
   e.color,
   e.width,
   e.arrowLength,
@@ -863,7 +929,7 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.roundness,
   e.detourDistance,
   e.detourDirection
-) : new rt(
+) : new nt(
   e.color,
   e.width,
   e.arrowLength,
@@ -873,9 +939,9 @@ const it = (e) => (t) => t === x.PortCycle ? new st(
   e.hasTargetArrow,
   e.roundness
 );
-class V {
+class F {
   constructor() {
-    n(this, "counter", 0);
+    h(this, "counter", 0);
   }
   create() {
     const t = this.counter;
@@ -885,14 +951,14 @@ class V {
     this.counter = 0;
   }
 }
-class ct {
-  constructor(t, r, s, o, i, a, c, h) {
-    n(this, "nodeIdGenerator", new V());
-    n(this, "portIdGenerator", new V());
-    n(this, "edgeIdGenerator", new V());
-    this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = i, this.portsDirection = a, this.nodesPriorityFn = c, this.edgesPriorityFn = h;
-  }
-  addNode(t, r, s, o, i, a, c) {
+class ut {
+  constructor(t, r, s, o, i, n, c, a) {
+    h(this, "nodeIdGenerator", new F());
+    h(this, "portIdGenerator", new F());
+    h(this, "edgeIdGenerator", new F());
+    this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = i, this.portsDirection = n, this.nodesPriorityFn = c, this.edgesPriorityFn = a;
+  }
+  addNode(t, r, s, o, i, n, c) {
     if (t === void 0)
       do
         t = this.nodeIdGenerator.create();
@@ -904,29 +970,23 @@ class ct {
       r,
       s,
       o,
-      a ?? this.nodesCenterFn,
+      n ?? this.nodesCenterFn,
       c ?? this.nodesPriorityFn()
-    ), this.htmlController.attachNode(t), new Map(i ?? []).forEach((d, l) => {
-      d instanceof HTMLElement ? this.markPort(
-        l,
-        d,
-        t,
-        this.portsCenterFn,
-        this.portsDirection
-      ) : this.markPort(
-        l,
-        d.element,
+    ), this.htmlController.attachNode(t), Array.from(i ?? []).forEach((a) => {
+      this.markPort(
+        a.id ?? this.generatePortId(),
+        a.element,
         t,
-        d.centerFn ?? this.portsCenterFn,
-        d.direction ?? this.portsDirection
+        a.centerFn ?? this.portsCenterFn,
+        a.direction ?? this.portsDirection
       );
     });
   }
   updateNode(t, r, s, o, i) {
-    const a = this.graphStore.getNode(t);
-    if (a === void 0)
+    const n = this.graphStore.getNode(t);
+    if (n === void 0)
       throw new Error("failed to update nonexisting node");
-    a.x = r ?? a.x, a.y = s ?? a.y, a.centerFn = i ?? a.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (a.priority = o, this.htmlController.updateNodePriority(t));
+    n.x = r ?? n.x, n.y = s ?? n.y, n.centerFn = i ?? n.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (n.priority = o, this.htmlController.updateNodePriority(t));
   }
   markPort(t, r, s, o, i) {
     if (t === void 0)
@@ -969,21 +1029,24 @@ class ct {
       throw new Error("failed to add edge to nonexisting port");
     if (this.graphStore.getEdge(t) !== void 0)
       throw new Error("failed to add edge with existing id");
-    let a = x.Regular;
-    const c = this.graphStore.getPortNode(r), h = this.graphStore.getPortNode(s);
-    r === s ? a = x.PortCycle : c === h && (a = x.NodeCycle), this.graphStore.addEdge(
+    const n = this.resolveEdgeType(r, s);
+    this.graphStore.addEdge(
       t,
       r,
       s,
-      o(a),
+      o(n),
       i ?? this.edgesPriorityFn()
     ), this.htmlController.attachEdge(t);
   }
-  updateEdge(t, r) {
-    const s = this.graphStore.getEdge(t);
-    if (s === void 0)
+  updateEdge(t, r, s) {
+    const o = this.graphStore.getEdge(t);
+    if (o === void 0)
       throw new Error("failed to update nonexisting edge");
-    r.controller !== void 0 && (this.htmlController.detachEdge(t), s.shape = r.controller, this.htmlController.attachEdge(t)), r.priority !== void 0 && (s.priority = r.priority, this.htmlController.updateEdgePriority(t));
+    if (r !== void 0) {
+      const i = this.resolveEdgeType(o.from, o.to);
+      this.htmlController.detachEdge(t), o.shape = r(i), this.htmlController.attachEdge(t);
+    }
+    s !== void 0 && (o.priority = s, this.htmlController.updateEdgePriority(t));
   }
   removeEdge(t) {
     if (this.graphStore.getEdge(t) === void 0)
@@ -995,11 +1058,11 @@ class ct {
       throw new Error("failed to remove nonexisting node");
     this.htmlController.detachNode(t), this.graphStore.removeNode(t);
   }
-  patchViewportState(t, r, s) {
-    this.viewportTransformer.patchViewportState(t, r, s), this.htmlController.applyTransform();
+  patchViewportMatrix(t, r, s) {
+    this.viewportTransformer.patchViewportMatrix(t, r, s), this.htmlController.applyTransform();
   }
-  patchContentState(t, r, s) {
-    this.viewportTransformer.patchContentState(t, r, s), this.htmlController.applyTransform();
+  patchContentMatrix(t, r, s) {
+    this.viewportTransformer.patchContentMatrix(t, r, s), this.htmlController.applyTransform();
   }
   attach(t) {
     this.htmlController.attach(t);
@@ -1013,52 +1076,64 @@ class ct {
   destroy() {
     this.htmlController.destroy();
   }
+  generatePortId() {
+    let t;
+    do
+      t = this.nodeIdGenerator.create();
+    while (this.graphStore.getPort(t) !== void 0);
+    return t;
+  }
+  resolveEdgeType(t, r) {
+    let s = N.Regular;
+    const o = this.graphStore.getPortNode(t), i = this.graphStore.getPortNode(r);
+    return t === r ? s = N.PortCycle : o === i && (s = N.NodeCycle), s;
+  }
 }
-class lt {
-  constructor(t, r, s, o, i, a) {
-    n(this, "publicViewportTransformer");
-    n(this, "publicGraphStore");
-    n(this, "canvasController");
-    const c = new K(), h = new Z();
-    this.publicGraphStore = new q(h), this.publicViewportTransformer = new Q(
+class wt {
+  constructor(t, r, s, o, i, n) {
+    h(this, "publicViewportTransformer");
+    h(this, "publicGraphStore");
+    h(this, "canvasController");
+    const c = new I(), a = new et();
+    this.publicGraphStore = new rt(a), this.publicViewportTransformer = new tt(
       c
     );
-    const d = new J(
-      h,
+    const l = new q(
+      a,
       c,
       this.publicViewportTransformer,
       t
     );
-    this.canvasController = new ct(
-      h,
-      d,
+    this.canvasController = new ut(
+      a,
+      l,
       c,
       r,
       s,
       o,
       i,
-      a
+      n
     );
   }
 }
-const X = (e, t) => [
-  e / 2,
-  t / 2
-], dt = () => () => {
-}, ut = (e, t, r, s, o, i) => {
+const j = (e, t) => ({
+  x: e / 2,
+  y: t / 2
+}), pt = () => () => {
+}, mt = (e, t, r, s, o, i) => {
   e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.fillStyle = i, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
-  const a = t.getContentMatrix(), c = s * a.scale;
-  let h = 0, d = 0, l = c / 2;
+  const n = t.getContentMatrix(), c = s * n.scale;
+  let a = 0, l = 0, d = c / 2;
   do
-    l *= 2, h = e.canvas.width / l, d = e.canvas.height / l;
-  while (h * d > 1e4);
-  const u = a.x - Math.floor(a.x / l) * l, g = a.y - Math.floor(a.y / l) * l, f = o * a.scale, w = 2 * Math.PI, v = u - l, m = g - l, E = e.canvas.width + u, p = e.canvas.height + g;
+    d *= 2, a = e.canvas.width / d, l = e.canvas.height / d;
+  while (a * l > 1e4);
+  const g = n.dx - Math.floor(n.dx / d) * d, u = n.dy - Math.floor(n.dy / d) * d, y = o * n.scale, w = 2 * Math.PI, v = g - d, p = u - d, f = e.canvas.width + g, m = e.canvas.height + u;
   e.fillStyle = r;
-  for (let y = v; y <= E; y += l)
-    for (let S = m; S <= p; S += l)
-      e.beginPath(), e.arc(y, S, f, 0, w), e.closePath(), e.fill();
-}, gt = (e, t, r, s) => (o, i) => {
-  ut(
+  for (let x = v; x <= f; x += d)
+    for (let A = p; A <= m; A += d)
+      e.beginPath(), e.arc(x, A, y, 0, w), e.closePath(), e.fill();
+}, vt = (e, t, r, s) => (o, i) => {
+  mt(
     o,
     i,
     e,
@@ -1066,26 +1141,26 @@ const X = (e, t) => [
     r,
     s
   );
-}, wt = (e) => {
+}, yt = (e) => {
   switch (e == null ? void 0 : e.type) {
     case "custom":
       return e.drawingFn;
     case "dots":
-      return gt(
+      return vt(
         e.dotColor ?? "#d8d8d8",
         e.dotGap ?? 25,
         e.dotRadius ?? 1.5,
         e.color ?? "#ffffff"
       );
     default:
-      return dt();
+      return pt();
   }
-}, B = (e) => {
+}, Y = (e) => {
   switch (e == null ? void 0 : e.type) {
     case "custom":
-      return e.controllerFactory;
+      return e.factory;
     case "straight":
-      return nt({
+      return lt({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         arrowLength: e.arrowLength ?? 15,
@@ -1099,7 +1174,7 @@ const X = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
     case "horizontal":
-      return at({
+      return dt({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         arrowLength: e.arrowLength ?? 15,
@@ -1113,7 +1188,7 @@ const X = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
     case "vertical":
-      return ht({
+      return gt({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         arrowLength: e.arrowLength ?? 15,
@@ -1127,7 +1202,7 @@ const X = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
     default:
-      return it({
+      return ct({
         color: e.color ?? "#5c5c5c",
         width: e.width ?? 1,
         curvature: e.curvature ?? 90,
@@ -1141,52 +1216,52 @@ const X = (e, t) => [
         detourDirection: e.detourDirection ?? -Math.PI / 2
       });
   }
-}, O = (e) => () => e, z = O(0), W = () => {
+}, X = (e) => () => e, H = X(0), R = () => {
   let e = 0;
   return () => e++;
-}, mt = (e, t) => {
+}, ft = (e, t) => {
   const r = [
-    z,
-    z
+    H,
+    H
   ];
-  e === "incremental" && (r[0] = W()), t === "incremental" && (r[1] = W());
-  const s = W();
-  return e === "shared-incremental" && (r[0] = s), t === "shared-incremental" && (r[1] = s), typeof e == "number" && (r[0] = O(e)), typeof t == "number" && (r[1] = O(t)), typeof e == "function" && (r[0] = e), typeof t == "function" && (r[1] = t), r;
-}, pt = (e) => {
-  var s, o, i, a, c, h;
-  const [t, r] = mt(
+  e === "incremental" && (r[0] = R()), t === "incremental" && (r[1] = R());
+  const s = R();
+  return e === "shared-incremental" && (r[0] = s), t === "shared-incremental" && (r[1] = s), typeof e == "number" && (r[0] = X(e)), typeof t == "number" && (r[1] = X(t)), typeof e == "function" && (r[0] = e), typeof t == "function" && (r[1] = t), r;
+}, xt = (e) => {
+  var s, o, i, n, c, a;
+  const [t, r] = ft(
     (s = e.nodes) == null ? void 0 : s.priority,
     (o = e.edges) == null ? void 0 : o.priority
   );
   return {
     background: {
-      drawingFn: wt(
+      drawingFn: yt(
         e.background ?? { type: "none" }
       )
     },
     nodes: {
-      centerFn: ((i = e.nodes) == null ? void 0 : i.centerFn) ?? X,
+      centerFn: ((i = e.nodes) == null ? void 0 : i.centerFn) ?? j,
       priorityFn: t
     },
     ports: {
-      centerFn: ((a = e.ports) == null ? void 0 : a.centerFn) ?? X,
+      centerFn: ((n = e.ports) == null ? void 0 : n.centerFn) ?? j,
       direction: ((c = e.ports) == null ? void 0 : c.direction) ?? 0
     },
     edges: {
-      shapeFactory: B(((h = e.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: Y(((a = e.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: r
     }
   };
 };
-class vt {
+class Et {
   constructor(t) {
-    n(this, "transformation");
-    n(this, "model");
-    n(this, "di");
-    n(this, "edgeShapeFactory");
+    h(this, "transformation");
+    h(this, "model");
+    h(this, "di");
+    h(this, "edgeShapeFactory");
     this.apiOptions = t;
-    const r = pt(this.apiOptions ?? {});
-    this.di = new lt(
+    const r = xt(this.apiOptions ?? {});
+    this.di = new wt(
       r.background.drawingFn,
       r.nodes.centerFn,
       r.ports.centerFn,
@@ -1234,7 +1309,7 @@ class vt {
     return this.di.canvasController.unmarkPort(t), this;
   }
   addEdge(t) {
-    const r = t.options !== void 0 ? B(t.options) : this.edgeShapeFactory;
+    const r = t.shape !== void 0 ? Y(t.shape) : this.edgeShapeFactory;
     return this.di.canvasController.addEdge(
       t.id,
       t.from,
@@ -1244,23 +1319,24 @@ class vt {
     ), this;
   }
   updateEdge(t, r) {
-    return this.di.canvasController.updateEdge(t, r), this;
+    const s = r.shape !== void 0 ? Y(r.shape) : void 0;
+    return this.di.canvasController.updateEdge(t, s, r.priority), this;
   }
   removeEdge(t) {
     return this.di.canvasController.removeEdge(t), this;
   }
-  patchViewportState(t) {
-    return this.di.canvasController.patchViewportState(
+  patchViewportMatrix(t) {
+    return this.di.canvasController.patchViewportMatrix(
       t.scale ?? null,
-      t.x ?? null,
-      t.y ?? null
+      t.dx ?? null,
+      t.dy ?? null
     ), this;
   }
-  patchContentState(t) {
-    return this.di.canvasController.patchContentState(
+  patchContentMatrix(t) {
+    return this.di.canvasController.patchContentMatrix(
       t.scale ?? null,
-      t.x ?? null,
-      t.y ?? null
+      t.dx ?? null,
+      t.dy ?? null
     ), this;
   }
   clear() {
@@ -1276,57 +1352,72 @@ class vt {
     this.di.canvasController.destroy();
   }
 }
-class ft {
+const V = (e, t, r) => {
+  const { x: s, y: o, width: i, height: n } = e.getBoundingClientRect();
+  return t >= s && t < s + i && r >= o && r <= o + n;
+}, W = (e, t, r) => t >= 0 && t < e.innerWidth && r >= 0 && r <= e.innerHeight, O = (e, t) => {
+  t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
+};
+class At {
   constructor(t, r) {
-    n(this, "model");
-    n(this, "transformation");
-    n(this, "maxNodePriority", 0);
-    n(this, "nodes", /* @__PURE__ */ new Map());
-    n(this, "grabbedNodeId", null);
-    n(this, "onNodeDrag");
-    n(this, "onBeforeNodeDrag");
-    n(this, "nodeIdGenerator", new V());
-    n(this, "element", null);
-    n(this, "onCanvasMouseUp", () => {
-      this.setCursor(null), this.grabbedNodeId = null;
+    h(this, "model");
+    h(this, "transformation");
+    h(this, "maxNodePriority", 0);
+    h(this, "nodes", /* @__PURE__ */ new Map());
+    h(this, "grabbedNodeId", null);
+    h(this, "onNodeDrag");
+    h(this, "onBeforeNodeDrag");
+    h(this, "nodeIdGenerator", new F());
+    h(this, "element", null);
+    h(this, "onCanvasMouseUp", () => {
+      this.cancelMouseDrag();
     });
-    n(this, "onCanvasMouseMove", (t) => {
-      this.grabbedNodeId !== null && (t.stopPropagation(), this.dragNode(this.grabbedNodeId, t.movementX, t.movementY));
+    h(this, "onCanvasMouseMove", (t) => {
+      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !W(this.window, t.clientX, t.clientY))) {
+        this.cancelMouseDrag();
+        return;
+      }
+      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, t.movementX, t.movementY);
     });
-    n(this, "onCanvasTouchStart", (t) => {
+    h(this, "onCanvasTouchStart", (t) => {
       this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
       ];
     });
-    n(this, "onCanvasTouchMove", (t) => {
-      if (this.grabbedNodeId === null || t.touches.length !== 1 || this.previousTouchCoords === null)
-        return;
-      t.stopImmediatePropagation();
-      const [r, s] = [
-        t.touches[0].clientX - this.previousTouchCoords[0],
-        t.touches[0].clientY - this.previousTouchCoords[1]
-      ];
-      this.dragNode(this.grabbedNodeId, r, s), this.previousTouchCoords = [
-        t.touches[0].clientX,
-        t.touches[0].clientY
-      ];
+    h(this, "onCanvasTouchMove", (t) => {
+      if (t.touches.length === 1) {
+        const r = t.touches[0];
+        if (this.element !== null && (!V(this.element, r.clientX, r.clientY) || !W(this.window, r.clientX, r.clientY))) {
+          this.cancelTouchDrag();
+          return;
+        }
+        if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
+          t.stopImmediatePropagation();
+          const s = r.clientX - this.previousTouchCoords[0], o = r.clientY - this.previousTouchCoords[1];
+          this.dragNode(this.grabbedNodeId, s, o), this.previousTouchCoords = [
+            t.touches[0].clientX,
+            t.touches[0].clientY
+          ];
+        }
+      }
     });
-    n(this, "onCanvasTouchEnd", (t) => {
+    h(this, "onCanvasTouchEnd", (t) => {
       t.touches.length > 0 ? this.previousTouchCoords = [
         t.touches[0].clientX,
         t.touches[0].clientY
-      ] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
+      ] : this.cancelTouchDrag();
     });
-    n(this, "previousTouchCoords", null);
-    n(this, "freezePriority");
-    var i, a;
+    h(this, "previousTouchCoords", null);
+    h(this, "freezePriority");
+    h(this, "window", window);
+    var i, n;
     this.canvas = t, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
     const s = () => {
     };
     this.onNodeDrag = ((i = r == null ? void 0 : r.events) == null ? void 0 : i.onNodeDrag) ?? s;
     const o = () => !0;
-    this.onBeforeNodeDrag = ((a = r == null ? void 0 : r.events) == null ? void 0 : a.onBeforeNodeDrag) ?? o, this.freezePriority = (r == null ? void 0 : r.grabPriorityStrategy) === "freeze";
+    this.onBeforeNodeDrag = ((n = r == null ? void 0 : r.events) == null ? void 0 : n.onBeforeNodeDrag) ?? o, this.freezePriority = (r == null ? void 0 : r.grabPriorityStrategy) === "freeze";
   }
   addNode(t) {
     let r = t.id;
@@ -1336,21 +1427,23 @@ class ft {
       while (this.nodes.has(r));
     this.canvas.addNode({ ...t, id: r }), this.updateMaxNodePriority(r);
     const s = (i) => {
-      const a = this.model.getNode(r);
+      if (this.element === null)
+        return;
+      const n = this.model.getNode(r);
       this.onBeforeNodeDrag({
         nodeId: r,
         element: t.element,
-        x: a.x,
-        y: a.y
-      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = r, this.setCursor("grab"), this.moveNodeOnTop(r));
+        x: n.x,
+        y: n.y
+      }) && (i.stopImmediatePropagation(), this.grabbedNodeId = r, O(this.element, "grab"), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onCanvasMouseUp), this.window.addEventListener("mousemove", this.onCanvasMouseMove));
     }, o = (i) => {
-      const a = this.model.getNode(r);
+      const n = this.model.getNode(r);
       this.onBeforeNodeDrag({
         nodeId: r,
         element: t.element,
-        x: a.x,
-        y: a.y
-      }) && i.touches.length === 1 && (this.grabbedNodeId = r, this.moveNodeOnTop(r));
+        x: n.x,
+        y: n.y
+      }) && i.touches.length === 1 && (this.grabbedNodeId = r, this.moveNodeOnTop(r), this.window.addEventListener("touchmove", this.onCanvasTouchMove), this.window.addEventListener("touchend", this.onCanvasTouchEnd), this.window.addEventListener("touchcancel", this.onCanvasTouchEnd));
     };
     return this.nodes.set(r, {
       element: t.element,
@@ -1383,11 +1476,11 @@ class ft {
   removeEdge(t) {
     return this.canvas.removeEdge(t), this;
   }
-  patchViewportState(t) {
-    return this.canvas.patchViewportState(t), this;
+  patchViewportMatrix(t) {
+    return this.canvas.patchViewportMatrix(t), this;
   }
-  patchContentState(t) {
-    return this.canvas.patchContentState(t), this;
+  patchContentMatrix(t) {
+    return this.canvas.patchContentMatrix(t), this;
   }
   clear() {
     return this.canvas.clear(), this.nodes.forEach((t) => {
@@ -1395,25 +1488,22 @@ class ft {
     }), this.nodes.clear(), this.maxNodePriority = 0, this;
   }
   attach(t) {
-    return this.detach(), this.element = t, this.canvas.attach(this.element), this.element.addEventListener("mouseup", this.onCanvasMouseUp), this.element.addEventListener("mousemove", this.onCanvasMouseMove), this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.element.addEventListener("touchmove", this.onCanvasTouchMove), this.element.addEventListener("touchend", this.onCanvasTouchEnd), this.element.addEventListener("touchcancel", this.onCanvasTouchEnd), this;
+    return this.detach(), this.element = t, this.element.addEventListener("touchstart", this.onCanvasTouchStart), this.canvas.attach(this.element), this;
   }
   detach() {
-    return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mouseup", this.onCanvasMouseUp), this.element.removeEventListener("mousemove", this.onCanvasMouseMove), this.element.removeEventListener("touchstart", this.onCanvasTouchStart), this.element.removeEventListener("touchmove", this.onCanvasTouchMove), this.element.removeEventListener("touchend", this.onCanvasTouchEnd), this.element.removeEventListener("touchcancel", this.onCanvasTouchEnd), this.element = null), this;
+    return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("touchstart", this.onCanvasTouchStart), this.element = null), this;
   }
   destroy() {
-    this.detach(), this.nodes.forEach((t) => {
+    this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.nodes.forEach((t) => {
       t.element.removeEventListener("mousedown", t.onMouseDown), t.element.removeEventListener("touchstart", t.onTouchStart);
     }), this.nodes.clear(), this.canvas.destroy();
   }
-  setCursor(t) {
-    this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
-  }
   dragNode(t, r, s) {
     const o = this.model.getNode(t);
     if (o === null)
       throw new Error("failed to drag nonexisting node");
-    const i = this.canvas.transformation.getContentMatrix(), a = i.scale * o.x + i.x, c = i.scale * o.y + i.y, h = a + r, d = c + s, l = this.canvas.transformation.getViewportMatrix(), u = l.scale * h + l.x, g = l.scale * d + l.y;
-    this.canvas.updateNode(t, { x: u, y: g }), this.onNodeDrag({
+    const i = this.canvas.transformation.getContentMatrix(), n = i.scale * o.x + i.dx, c = i.scale * o.y + i.dy, a = n + r, l = c + s, d = this.canvas.transformation.getViewportMatrix(), g = d.scale * a + d.dx, u = d.scale * l + d.dy;
+    this.canvas.updateNode(t, { x: g, y: u }), this.onNodeDrag({
       nodeId: t,
       element: o.element,
       x: o.x,
@@ -1433,70 +1523,132 @@ class ft {
       this.updateEdge(o, { priority: r });
     });
   }
+  cancelMouseDrag() {
+    this.grabbedNodeId = null, this.element !== null && O(this.element, null), this.removeMouseDragListeners();
+  }
+  removeMouseDragListeners() {
+    this.window.removeEventListener("mouseup", this.onCanvasMouseUp), this.window.removeEventListener("mousemove", this.onCanvasMouseMove);
+  }
+  cancelTouchDrag() {
+    this.previousTouchCoords = null, this.grabbedNodeId = null, this.removeTouchDragListeners();
+  }
+  removeTouchDragListeners() {
+    this.window.removeEventListener("touchmove", this.onCanvasTouchMove), this.window.removeEventListener("touchend", this.onCanvasTouchEnd), this.window.removeEventListener("touchcancel", this.onCanvasTouchEnd);
+  }
 }
-class Et {
+const Ct = () => {
+}, St = (e, t) => t, bt = (e, t) => {
+  const r = t !== null ? 1 / t : null, s = e !== null ? 1 / e : null;
+  return (o, i) => s !== null && i.scale > s && i.scale > o.scale || r !== null && i.scale < r && i.scale < o.scale ? o : i;
+}, Nt = (e, t, r, s) => (o, i, n, c) => {
+  let a = i.dx, l = i.dy;
+  e !== null && a < e && a < o.dx && (a = o.dx);
+  const d = n * o.scale;
+  t !== null && a > t - d && a > o.dx && (a = o.dx), r !== null && l < r && l < o.dy && (l = o.dy);
+  const g = c * o.scale;
+  return s !== null && l > s - g && l > o.dy && (l = o.dy), { scale: i.scale, dx: a, dy: l };
+}, U = (e) => {
+  switch (e.type) {
+    case "scale-limit":
+      return bt(
+        e.minContentScale ?? null,
+        e.maxContentScale ?? null
+      );
+    case "shift-limit":
+      return Nt(
+        e.minX ?? null,
+        e.maxX ?? null,
+        e.minY ?? null,
+        e.maxY ?? null
+      );
+    default:
+      return e.preprocessorFn;
+  }
+}, Mt = (e) => (t, r, s, o) => e.reduce(
+  (i, n) => n(t, i, s, o),
+  r
+);
+class Pt {
   constructor(t, r) {
-    n(this, "model");
-    n(this, "transformation");
-    n(this, "element", null);
-    n(this, "isMoving", !1);
-    n(this, "prevTouches", null);
-    n(this, "onTransform");
-    n(this, "onBeforeTransform");
-    n(this, "isScalable");
-    n(this, "isShiftable");
-    n(this, "minViewScale");
-    n(this, "maxViewScale");
-    n(this, "wheelSensitivity");
-    n(this, "onMouseDown", () => {
-      this.setCursor("grab"), this.isMoving = !0;
+    h(this, "model");
+    h(this, "transformation");
+    h(this, "element", null);
+    h(this, "prevTouches", null);
+    h(this, "onTransformFinished");
+    h(this, "transformPreprocessor");
+    h(this, "isScalable");
+    h(this, "isShiftable");
+    h(this, "wheelSensitivity");
+    h(this, "window", window);
+    h(this, "onMouseDown", () => {
+      this.element !== null && (O(this.element, "grab"), this.window.addEventListener("mousemove", this.onMouseMove), this.window.addEventListener("mouseup", this.onMouseUp));
     });
-    n(this, "onMouseMove", (t) => {
-      if (!this.isMoving || !this.isShiftable)
+    h(this, "onMouseMove", (t) => {
+      if (!this.isShiftable || this.element === null)
+        return;
+      if (!V(this.element, t.clientX, t.clientY) || !W(this.window, t.clientX, t.clientY)) {
+        this.stopMouseDrag();
         return;
+      }
       const r = -t.movementX, s = -t.movementY;
       this.moveViewport(r, s);
     });
-    n(this, "onMouseUp", () => {
-      this.setCursor(null), this.isMoving = !1;
+    h(this, "onMouseUp", () => {
+      this.stopMouseDrag();
     });
-    n(this, "onWheelScroll", (t) => {
+    h(this, "onWheelScroll", (t) => {
       if (this.element === null || this.isScalable === !1)
         return;
       t.preventDefault();
       const { left: r, top: s } = this.element.getBoundingClientRect(), o = t.clientX - r, i = t.clientY - s, c = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
       this.scaleViewport(c, o, i);
     });
-    n(this, "onTouchStart", (t) => {
-      this.prevTouches = this.getAverageTouch(t);
+    h(this, "onTouchStart", (t) => {
+      this.prevTouches = this.getAverageTouch(t), this.window.addEventListener("touchmove", this.onTouchMove), this.window.addEventListener("touchend", this.onTouchEnd), this.window.addEventListener("touchcancel", this.onTouchEnd);
     });
-    n(this, "onTouchMove", (t) => {
-      if (this.prevTouches === null || this.element === null || !this.isShiftable)
+    h(this, "onTouchMove", (t) => {
+      if (this.prevTouches === null || !this.isShiftable || this.element === null)
         return;
       const r = this.getAverageTouch(t);
+      if (!r.touches.every(
+        (o) => V(this.element, o[0], o[1]) && W(this.window, o[0], o[1])
+      )) {
+        this.stopTouchDrag();
+        return;
+      }
       if ((r.touchesCnt === 1 || r.touchesCnt === 2) && this.moveViewport(
         -(r.x - this.prevTouches.x),
         -(r.y - this.prevTouches.y)
       ), r.touchesCnt === 2 && this.isScalable) {
-        const { left: s, top: o } = this.element.getBoundingClientRect(), i = this.prevTouches.x - s, a = this.prevTouches.y - o, h = 1 / (r.scale / this.prevTouches.scale);
-        this.scaleViewport(h, i, a);
+        const { left: o, top: i } = this.element.getBoundingClientRect(), n = this.prevTouches.x - o, c = this.prevTouches.y - i, l = 1 / (r.scale / this.prevTouches.scale);
+        this.scaleViewport(l, n, c);
       }
-      this.prevTouches = r, t.preventDefault();
+      this.prevTouches = r;
     });
-    n(this, "onTouchEnd", (t) => {
-      t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
+    h(this, "onTouchEnd", (t) => {
+      t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.stopTouchDrag();
     });
-    var h, d, l, u, g, f, w, v, m, E, p, y;
-    this.canvas = t, this.options = r, this.transformation = this.canvas.transformation, this.model = this.canvas.model;
-    const s = ((d = (h = this.options) == null ? void 0 : h.scale) == null ? void 0 : d.min) ?? null, o = ((u = (l = this.options) == null ? void 0 : l.scale) == null ? void 0 : u.max) ?? null;
-    this.isScalable = ((f = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : f.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((v = (w = this.options) == null ? void 0 : w.shift) == null ? void 0 : v.enabled) !== !1;
-    const i = (E = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : E.wheelSensitivity;
-    this.wheelSensitivity = i !== void 0 ? i : 1.2;
-    const a = () => {
-    };
-    this.onTransform = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onTransform) ?? a;
-    const c = () => !0;
-    this.onBeforeTransform = ((y = r == null ? void 0 : r.events) == null ? void 0 : y.onBeforeTransform) ?? c;
+    h(this, "observer", new ResizeObserver(() => {
+      if (this.element !== null) {
+        const t = this.canvas.transformation.getViewportMatrix(), { width: r, height: s } = this.element.getBoundingClientRect(), o = this.transformPreprocessor(
+          t,
+          t,
+          r,
+          s
+        );
+        this.canvas.patchViewportMatrix(o), this.onTransformFinished(o);
+      }
+    }));
+    var i, n, c, a, l, d, g;
+    this.canvas = t, this.options = r, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.isScalable = ((n = (i = this.options) == null ? void 0 : i.scale) == null ? void 0 : n.enabled) !== !1, this.isShiftable = ((a = (c = this.options) == null ? void 0 : c.shift) == null ? void 0 : a.enabled) !== !1;
+    const s = (d = (l = this.options) == null ? void 0 : l.scale) == null ? void 0 : d.wheelSensitivity;
+    this.wheelSensitivity = s !== void 0 ? s : 1.2, this.onTransformFinished = ((g = r == null ? void 0 : r.events) == null ? void 0 : g.onTransformFinished) ?? Ct;
+    const o = r == null ? void 0 : r.transformPreprocessor;
+    o !== void 0 ? Array.isArray(o) ? this.transformPreprocessor = Mt(
+      o.map(
+        (u) => U(u)
+      )
+    ) : this.transformPreprocessor = U(o) : this.transformPreprocessor = St;
   }
   addNode(t) {
     return this.canvas.addNode(t), this;
@@ -1525,63 +1677,94 @@ class Et {
   removeEdge(t) {
     return this.canvas.removeEdge(t), this;
   }
-  patchViewportState(t) {
-    return this.canvas.patchViewportState(t), this;
+  patchViewportMatrix(t) {
+    return this.canvas.patchViewportMatrix(t), this;
   }
-  patchContentState(t) {
-    return this.canvas.patchContentState(t), this;
+  patchContentMatrix(t) {
+    return this.canvas.patchContentMatrix(t), this;
   }
   clear() {
     return this.canvas.clear(), this;
   }
   attach(t) {
-    return this.detach(), this.element = t, this.canvas.attach(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("mousemove", this.onMouseMove), this.element.addEventListener("mouseup", this.onMouseUp), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.element.addEventListener("touchmove", this.onTouchMove), this.element.addEventListener("touchend", this.onTouchEnd), this.element.addEventListener("touchcancel", this.onTouchEnd), this;
+    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;
   }
   detach() {
-    return this.canvas.detach(), this.element !== null && (this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("mousemove", this.onMouseMove), this.element.removeEventListener("mouseup", this.onMouseUp), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element.removeEventListener("touchmove", this.onTouchMove), this.element.removeEventListener("touchend", this.onTouchEnd), this.element.removeEventListener("touchcancel", this.onTouchEnd), this.element = null), this;
+    return this.canvas.detach(), this.element !== null && (this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.element = null), this;
   }
   destroy() {
-    this.detach(), this.canvas.destroy();
+    this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
   }
   getAverageTouch(t) {
     const r = [], s = t.touches.length;
-    for (let h = 0; h < s; h++)
-      r.push([t.touches[h].clientX, t.touches[h].clientY]);
+    for (let a = 0; a < s; a++)
+      r.push([t.touches[a].clientX, t.touches[a].clientY]);
     const o = r.reduce(
-      (h, d) => [h[0] + d[0], h[1] + d[1]],
+      (a, l) => [a[0] + l[0], a[1] + l[1]],
       [0, 0]
-    ), i = [o[0] / s, o[1] / s], c = r.map((h) => [h[0] - i[0], h[1] - i[1]]).reduce(
-      (h, d) => h + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
+    ), i = [o[0] / s, o[1] / s], c = r.map((a) => [a[0] - i[0], a[1] - i[1]]).reduce(
+      (a, l) => a + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
       0
     );
-    return { x: i[0], y: i[1], scale: c / s, touchesCnt: s };
-  }
-  setCursor(t) {
-    this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
+    return {
+      x: i[0],
+      y: i[1],
+      scale: c / s,
+      touchesCnt: s,
+      touches: r
+    };
   }
   moveViewport(t, r) {
     const s = this.transformation.getViewportMatrix(), o = {
       scale: s.scale,
-      x: s.x + s.scale * t,
-      y: s.y + s.scale * r
+      dx: s.dx + s.scale * t,
+      dy: s.dy + s.scale * r
     };
-    this.onBeforeTransform({ ...o }) && (this.canvas.patchViewportState(o), this.onTransform(o));
+    if (this.element !== null) {
+      const { width: i, height: n } = this.element.getBoundingClientRect(), c = this.transformPreprocessor(
+        s,
+        o,
+        i,
+        n
+      );
+      this.canvas.patchViewportMatrix(c), this.onTransformFinished(c);
+    }
   }
   scaleViewport(t, r, s) {
-    const o = this.canvas.transformation.getViewportMatrix(), i = o.scale * t, a = o.scale * (1 - t) * r + o.x, c = o.scale * (1 - t) * s + o.y;
-    if (this.maxViewScale !== null && i > this.maxViewScale && i > o.scale || this.minViewScale !== null && i < this.minViewScale && i < o.scale)
+    if (this.element === null)
       return;
-    const h = { scale: i, x: a, y: c };
-    this.onBeforeTransform({ ...h }) && (this.canvas.patchViewportState(h), this.onTransform(h));
+    const o = this.canvas.transformation.getViewportMatrix(), i = {
+      scale: o.scale * t,
+      dx: o.scale * (1 - t) * r + o.dx,
+      dy: o.scale * (1 - t) * s + o.dy
+    }, { width: n, height: c } = this.element.getBoundingClientRect(), a = this.transformPreprocessor(
+      o,
+      i,
+      n,
+      c
+    );
+    this.canvas.patchViewportMatrix(a), this.onTransformFinished(a);
+  }
+  stopMouseDrag() {
+    this.element !== null && O(this.element, null), this.removeMouseDragListeners();
+  }
+  removeMouseDragListeners() {
+    this.window.removeEventListener("mousemove", this.onMouseMove), this.window.removeEventListener("mouseup", this.onMouseUp);
+  }
+  stopTouchDrag() {
+    this.prevTouches = null, this.removeTouchDragListeners();
+  }
+  removeTouchDragListeners() {
+    this.window.removeEventListener("touchmove", this.onTouchMove), this.window.removeEventListener("touchend", this.onTouchEnd), this.window.removeEventListener("touchcancel", this.onTouchEnd);
   }
 }
-class Ct {
+class Tt {
   constructor() {
-    n(this, "coreOptions");
-    n(this, "dragOptions");
-    n(this, "transformOptions");
-    n(this, "isDraggable", !1);
-    n(this, "isTransformable", !1);
+    h(this, "coreOptions");
+    h(this, "dragOptions");
+    h(this, "transformOptions");
+    h(this, "isDraggable", !1);
+    h(this, "isTransformable", !1);
   }
   setOptions(t) {
     return this.coreOptions = t, this;
@@ -1593,25 +1776,25 @@ class Ct {
     return this.isTransformable = !0, this.transformOptions = t, this;
   }
   build() {
-    let t = new vt(this.coreOptions);
-    return this.isDraggable && (t = new ft(t, this.dragOptions)), this.isTransformable && (t = new Et(t, this.transformOptions)), t;
+    let t = new Et(this.coreOptions);
+    return this.isDraggable && (t = new At(t, this.dragOptions)), this.isTransformable && (t = new Pt(t, this.transformOptions)), t;
   }
 }
 export {
-  I as BezierEdgeShape,
-  vt as CanvasCore,
-  st as CycleCircleEdgeShape,
-  k as CycleSquareEdgeShape,
-  R as DetourStraightEdgeShape,
-  x as EdgeType,
-  et as HorizontalEdgeShape,
-  Ct as HtmlGraphBuilder,
-  tt as StraightEdgeShape,
-  ft as UserDraggableNodesCanvas,
-  Et as UserTransformableCanvas,
-  rt as VerticalEdgeShape,
-  it as createBezierEdgeShapeFactory,
-  at as createHorizontalEdgeShapeFactory,
-  nt as createStraightEdgeShareFactory,
-  ht as createVerticalEdgeShapeFactory
+  st as BezierEdgeShape,
+  Et as CanvasCore,
+  ht as CycleCircleEdgeShape,
+  z as CycleSquareEdgeShape,
+  B as DetourStraightEdgeShape,
+  N as EdgeType,
+  it as HorizontalEdgeShape,
+  Tt as HtmlGraphBuilder,
+  ot as StraightEdgeShape,
+  At as UserDraggableNodesCanvas,
+  Pt as UserTransformableCanvas,
+  nt as VerticalEdgeShape,
+  ct as createBezierEdgeShapeFactory,
+  dt as createHorizontalEdgeShapeFactory,
+  lt as createStraightEdgeShareFactory,
+  gt as createVerticalEdgeShapeFactory
 };