@html-graph/html-graph 3.1.0 → 3.3.0

package/dist/html-graph.js

@@ -1,20 +1,20 @@
-var ie = Object.defineProperty;
-var se = (t, e, o) => e in t ? ie(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var i = (t, e, o) => se(t, typeof e != "symbol" ? e + "" : e, o);
-const ne = () => {
-  const t = document.createElement("div");
-  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
-}, he = () => {
+var ae = Object.defineProperty;
+var le = (t, e, o) => e in t ? ae(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var i = (t, e, o) => le(t, typeof e != "symbol" ? e + "" : e, o);
+const ge = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
-}, de = () => {
+}, ue = () => {
   const t = document.createElement("div");
   return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
+}, we = () => {
+  const t = document.createElement("div");
+  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
 };
-class ce {
+class ne {
   constructor(e, o, r) {
-    i(this, "host", ne());
-    i(this, "container", he());
+    i(this, "host", we());
+    i(this, "container", ge());
     i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "applyTransform", () => {
@@ -24,7 +24,7 @@ class ce {
     this.graphStore = e, this.viewportStore = o, this.element = r, this.element.appendChild(this.host), this.host.appendChild(this.container), this.viewportStore.onAfterUpdated.subscribe(this.applyTransform);
   }
   attachNode(e) {
-    const o = this.graphStore.getNode(e), r = de();
+    const o = this.graphStore.getNode(e), r = ue();
     r.appendChild(o.element), this.container.appendChild(r), this.nodeIdToWrapperElementMap.set(e, r), this.updateNodePosition(e), this.updateNodePriority(e), r.style.visibility = "visible";
   }
   detachNode(e) {
@@ -50,7 +50,7 @@ class ce {
     this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform), this.clear(), this.element.removeChild(this.host), this.host.removeChild(this.container);
   }
   updateNodePosition(e) {
-    const o = this.nodeIdToWrapperElementMap.get(e), r = this.graphStore.getNode(e), { width: s, height: d } = r.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, h = r.centerFn(s, d), c = r.x - n * h.x, a = r.y - n * h.y;
+    const o = this.nodeIdToWrapperElementMap.get(e), r = this.graphStore.getNode(e), { width: s, height: h } = r.element.getBoundingClientRect(), n = this.viewportStore.getViewportMatrix().scale, d = r.centerFn(s, h), c = r.x - n * d.x, a = r.y - n * d.y;
     o.style.transform = `translate(${c}px, ${a}px)`;
   }
   updateNodePriority(e) {
@@ -64,40 +64,37 @@ class ce {
     this.edgeIdToElementMap.set(e, r.shape.svg), this.container.appendChild(r.shape.svg);
   }
   renderEdge(e) {
-    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), d = r.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = {
-      x: c.scale * (d.left - h.left) + c.x,
-      y: c.scale * (d.top - h.top) + c.y
-    }, l = {
-      x: c.scale * (n.left - h.left) + c.x,
-      y: c.scale * (n.top - h.top) + c.y
-    }, g = {
-      x: a.x,
-      y: a.y,
-      width: d.width * c.scale,
-      height: d.height * c.scale,
+    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from), s = this.graphStore.getPort(o.to), h = r.element.getBoundingClientRect(), n = s.element.getBoundingClientRect(), d = this.host.getBoundingClientRect(), c = this.viewportStore.getViewportMatrix(), a = h.left - d.left, l = h.top - d.top, g = n.left - d.left, y = n.top - d.top, v = {
+      x: c.scale * a + c.x,
+      y: c.scale * l + c.y
+    }, f = {
+      x: c.scale * g + c.x,
+      y: c.scale * y + c.y
+    }, p = {
+      x: v.x,
+      y: v.y,
+      width: h.width * c.scale,
+      height: h.height * c.scale,
       direction: r.direction,
       portId: o.from,
       nodeId: r.nodeId
-    }, f = {
-      x: l.x,
-      y: l.y,
+    }, A = {
+      x: f.x,
+      y: f.y,
       width: n.width * c.scale,
       height: n.height * c.scale,
       direction: s.direction,
       portId: o.to,
       nodeId: s.nodeId
     };
-    o.shape.render({
-      from: g,
-      to: f
-    });
+    o.shape.render({ from: p, to: A });
   }
   updateEdgePriority(e) {
     const o = this.graphStore.getEdge(e);
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class ae {
+class fe {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -113,25 +110,25 @@ class ae {
     return o.x >= this.xFrom && o.x <= this.xTo && o.y >= this.yFrom && o.y <= this.yTo;
   }
   hasEdge(e) {
-    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, s = this.graphStore.getPort(o.to).nodeId, d = this.graphStore.getNode(r), n = this.graphStore.getNode(s), h = Math.min(d.x, n.x), c = Math.max(d.x, n.x), a = Math.min(d.y, n.y), l = Math.max(d.y, n.y);
-    return h <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
+    const o = this.graphStore.getEdge(e), r = this.graphStore.getPort(o.from).nodeId, s = this.graphStore.getPort(o.to).nodeId, h = this.graphStore.getNode(r), n = this.graphStore.getNode(s), d = Math.min(h.x, n.x), c = Math.max(h.x, n.x), a = Math.min(h.y, n.y), l = Math.max(h.y, n.y);
+    return d <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
   }
 }
-class le {
+class ye {
   constructor(e, o, r) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
     i(this, "renderingBox");
     i(this, "updateViewport", (e) => {
       this.renderingBox.setRenderingBox(e);
-      const o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set();
+      const o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
       this.graphStore.getAllNodeIds().forEach((n) => {
-        const h = this.renderingBox.hasNode(n), c = this.attachedNodes.has(n);
-        h && !c ? o.add(n) : !h && c && r.add(n);
+        const d = this.renderingBox.hasNode(n), c = this.attachedNodes.has(n);
+        d && !c ? o.add(n) : !d && c && r.add(n);
       }), this.graphStore.getAllEdgeIds().forEach((n) => {
-        const h = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
-        h && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), h && !c ? s.add(n) : !h && c && d.add(n);
-      }), d.forEach((n) => {
+        const d = this.renderingBox.hasEdge(n), c = this.attachedEdges.has(n), a = this.graphStore.getEdge(n), l = this.graphStore.getPort(a.from).nodeId, g = this.graphStore.getPort(a.to).nodeId;
+        d && (this.renderingBox.hasNode(l) || (o.add(l), r.delete(l)), this.renderingBox.hasNode(g) || (o.add(g), r.delete(g))), d && !c ? s.add(n) : !d && c && h.add(n);
+      }), h.forEach((n) => {
         this.handleDetachEdge(n);
       }), r.forEach((n) => {
         this.handleDetachNode(n);
@@ -141,7 +138,7 @@ class le {
         this.handleAttachEdge(n);
       });
     });
-    this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new ae(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = o, this.trigger = r, this.renderingBox = new fe(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -195,7 +192,7 @@ class le {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class re {
+class he {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -211,24 +208,24 @@ class re {
     });
   }
 }
-const A = () => {
-  const t = new re();
+const E = () => {
+  const t = new he();
   return [t, t];
 };
-class ge {
+class ve {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
-    this.transformer = e, this.onBeforeUpdated = this.transformer.onBeforeUpdated, this.onAfterUpdated = this.transformer.onAfterUpdated;
+    this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
   }
   getViewportMatrix() {
-    return { ...this.transformer.getViewportMatrix() };
+    return { ...this.viewportStore.getViewportMatrix() };
   }
   getContentMatrix() {
-    return { ...this.transformer.getContentMatrix() };
+    return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class ue {
+class xe {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -304,7 +301,7 @@ class ue {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class X {
+class Y {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -326,219 +323,237 @@ class S extends Error {
     i(this, "name", "HtmlGraphError");
   }
 }
-const we = (t, e) => ({
+const Ae = (t, e) => ({
   x: t / 2,
   y: e / 2
-}), k = (t) => () => t, O = k(0), fe = () => {
+}), H = (t) => () => t, oe = H(0), pe = () => {
   let t = 0;
   return () => t++;
-}, ye = (t, e) => {
-  let o = O, r = O;
-  const s = fe();
-  return t === "incremental" && (o = s), e === "incremental" && (r = s), typeof t == "number" && (o = k(t)), typeof e == "number" && (r = k(e)), typeof t == "function" && (o = t), typeof e == "function" && (r = e), {
+}, Ee = (t, e) => {
+  let o = oe, r = oe;
+  const s = pe();
+  return t === "incremental" && (o = s), e === "incremental" && (r = s), typeof t == "number" && (o = H(t)), typeof e == "number" && (r = H(e)), typeof t == "function" && (o = t), typeof e == "function" && (r = e), {
     nodesPriorityFn: o,
     edgesPriorityFn: r
   };
 }, x = (t, e, o) => ({
   x: e.x * t.x - e.y * t.y + ((1 - e.x) * o.x + e.y * o.y),
   y: e.y * t.x + e.x * t.y + ((1 - e.x) * o.y - e.y * o.x)
-}), b = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) }), w = {
+}), T = (t, e, o) => ({ x: e * Math.cos(t), y: o * Math.sin(t) }), w = {
   x: 0,
   y: 0
 }, N = (t, e, o, r) => {
-  const d = [
+  const h = [
     w,
     { x: o, y: r },
     { x: o, y: -r }
-  ].map((a) => x(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${d[0].x} ${d[0].y}`, h = `L ${d[1].x} ${d[1].y}`, c = `L ${d[2].x} ${d[2].y}`;
-  return `${n} ${h} ${c}`;
-}, L = (t, e) => {
+  ].map((a) => x(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), n = `M ${h[0].x} ${h[0].y}`, d = `L ${h[1].x} ${h[1].y}`, c = `L ${h[2].x} ${h[2].y}`;
+  return `${n} ${d} ${c}`;
+}, I = (t, e) => {
   const o = [];
   if (t.length > 0 && o.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && o.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
     const r = t.length - 1;
-    let s = 0, d = 0, n = 0;
-    t.forEach((h, c) => {
+    let s = 0, h = 0, n = 0;
+    t.forEach((d, c) => {
       let a = 0, l = 0, g = 0;
-      const f = c > 0, v = c < r, y = f && v;
-      if (f && (a = -s, l = -d, g = n), v) {
-        const V = t[c + 1];
-        s = V.x - h.x, d = V.y - h.y, n = Math.sqrt(s * s + d * d);
+      const y = c > 0, v = c < r, f = y && v;
+      if (y && (a = -s, l = -h, g = n), v) {
+        const R = t[c + 1];
+        s = R.x - d.x, h = R.y - d.y, n = Math.sqrt(s * s + h * h);
       }
-      const E = n !== 0 ? Math.min((y ? e : 0) / n, c < r - 1 ? 0.5 : 1) : 0, T = y ? { x: h.x + s * E, y: h.y + d * E } : h, D = g !== 0 ? Math.min((y ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, M = y ? { x: h.x + a * D, y: h.y + l * D } : h;
-      c > 0 && o.push(`L ${M.x} ${M.y}`), y && o.push(
-        `C ${h.x} ${h.y} ${h.x} ${h.y} ${T.x} ${T.y}`
+      const A = n !== 0 ? Math.min((f ? e : 0) / n, c < r - 1 ? 0.5 : 1) : 0, b = f ? { x: d.x + s * A, y: d.y + h * A } : d, m = g !== 0 ? Math.min((f ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, L = f ? { x: d.x + a * m, y: d.y + l * m } : d;
+      c > 0 && o.push(`L ${L.x} ${L.y}`), f && o.push(
+        `C ${d.x} ${d.y} ${d.x} ${d.y} ${b.x} ${b.y}`
       );
     });
   }
   return o.join(" ");
-}, B = () => {
+}, $ = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
-}, $ = () => {
+}, W = () => {
   const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return t.style.transformOrigin = "50% 50%", t;
-}, W = (t, e) => {
+}, F = (t, e) => {
   const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return o.setAttribute("stroke", t), o.setAttribute("stroke-width", `${e}`), o.setAttribute("fill", "none"), o;
-}, m = (t) => {
+}, P = (t) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("fill", t), e;
-}, F = (t, e) => {
+}, z = (t, e) => {
   const o = {
     x: t.x + t.width / 2,
     y: t.y + t.height / 2
   }, r = {
     x: e.x + e.width / 2,
     y: e.y + e.height / 2
-  }, s = Math.min(o.x, r.x), d = Math.min(o.y, r.y), n = Math.abs(r.x - o.x), h = Math.abs(r.y - o.y), c = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
+  }, s = Math.min(o.x, r.x), h = Math.min(o.y, r.y), n = Math.abs(r.x - o.x), d = Math.abs(r.y - o.y), c = o.x <= r.x ? 1 : -1, a = o.y <= r.y ? 1 : -1;
   return {
     x: s,
-    y: d,
+    y: h,
     width: n,
-    height: h,
+    height: d,
     flipX: c,
     flipY: a
   };
-}, ve = (t) => {
+}, Se = (t) => {
   const e = x(
     { x: t.arrowLength, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ), o = x(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
   ), r = {
-    x: e.x + t.fromVect.x * t.curvature,
-    y: e.y + t.fromVect.y * t.curvature
+    x: e.x + t.fromVector.x * t.curvature,
+    y: e.y + t.fromVector.y * t.curvature
   }, s = {
-    x: o.x - t.toVect.x * t.curvature,
-    y: o.y - t.toVect.y * t.curvature
-  }, d = `M ${e.x} ${e.y} C ${r.x} ${r.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, h = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
-  return `${n}${d}${h}`;
-}, xe = (t) => {
+    x: o.x - t.toVector.x * t.curvature,
+    y: o.y - t.toVector.y * t.curvature
+  }, h = `M ${e.x} ${e.y} C ${r.x} ${r.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`, n = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, d = t.hasTargetArrow ? "" : ` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;
+  return `${n}${h}${d}`;
+}, be = (t) => {
   const e = t.hasSourceArrow ? x(
     { x: t.arrowLength, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ) : w, o = t.hasTargetArrow ? x(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, d = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, h = d * t.flipY, c = x(
+  ) : t.to, r = t.arrowLength, s = Math.cos(t.detourDirection) * t.detourDistance, h = Math.sin(t.detourDirection) * t.detourDistance, n = s * t.flipX, d = h * t.flipY, c = x(
     { x: r, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ), a = {
     x: c.x + n,
-    y: c.y + h
+    y: c.y + d
   }, l = x(
     { x: t.to.x - r, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
   ), g = {
     x: l.x + n,
-    y: l.y + h
-  }, f = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, v = {
-    x: c.x + t.curvature * t.fromVect.x,
-    y: c.y + t.curvature * t.fromVect.y
-  }, y = {
-    x: l.x - t.curvature * t.toVect.x,
-    y: l.y - t.curvature * t.toVect.y
+    y: l.y + d
+  }, y = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, v = {
+    x: c.x + t.curvature * t.fromVector.x,
+    y: c.y + t.curvature * t.fromVector.y
+  }, f = {
+    x: l.x - t.curvature * t.toVector.x,
+    y: l.y - t.curvature * t.toVector.y
   }, p = {
     x: c.x + n,
-    y: c.y + h
-  }, E = {
+    y: c.y + d
+  }, A = {
     x: l.x + n,
-    y: l.y + h
+    y: l.y + d
   };
   return [
     `M ${e.x} ${e.y}`,
     `L ${c.x} ${c.y}`,
-    `C ${v.x} ${v.y} ${p.x} ${p.y} ${f.x} ${f.y}`,
-    `C ${E.x} ${E.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
+    `C ${v.x} ${v.y} ${p.x} ${p.y} ${y.x} ${y.y}`,
+    `C ${A.x} ${A.y} ${f.x} ${f.y} ${l.x} ${l.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
-}, Ae = (t) => {
+}, me = (t) => {
   const e = t.hasSourceArrow ? x(
     { x: t.arrowLength, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ) : w, o = t.hasTargetArrow ? x(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = r - t.roundness, d = x({ x: s, y: w.y }, t.fromVect, w), n = x(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, s = r - t.roundness, h = x(
+    { x: s, y: w.y },
+    t.fromVector,
+    w
+  ), n = x(
     { x: t.to.x - s, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ), h = Math.max((d.x + n.x) / 2, r), c = t.to.y / 2, a = { x: t.flipX > 0 ? h : -r, y: d.y }, l = { x: a.x, y: c }, g = {
-    x: t.flipX > 0 ? t.to.x - h : t.to.x + r,
+  ), d = Math.max((h.x + n.x) / 2, r), c = t.to.y / 2, a = {
+    x: t.flipX > 0 ? d : -r,
+    y: h.y
+  }, l = { x: a.x, y: c }, g = {
+    x: t.flipX > 0 ? t.to.x - d : t.to.x + r,
     y: n.y
-  }, f = { x: g.x, y: c };
-  return L(
-    [e, d, a, l, f, g, n, o],
+  }, y = { x: g.x, y: c };
+  return I(
+    [e, h, a, l, y, g, n, o],
     t.roundness
   );
-}, H = (t) => {
+}, j = (t) => {
   const e = t.hasSourceArrow ? x(
     { x: t.arrowLength, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ) : w, o = t.hasTargetArrow ? x(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
   ) : t.to, r = t.arrowLength + t.arrowOffset, s = x(
     { x: r, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
-  ), d = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, h = d * t.flipX, c = n * t.flipY, a = { x: s.x + h, y: s.y + c }, l = x(
+  ), h = Math.cos(t.detourDirection) * t.detourDistance, n = Math.sin(t.detourDirection) * t.detourDistance, d = h * t.flipX, c = n * t.flipY, a = { x: s.x + d, y: s.y + c }, l = x(
     { x: t.to.x - r, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ), g = { x: l.x + h, y: l.y + c };
-  return L(
+  ), g = { x: l.x + d, y: l.y + c };
+  return I(
     [e, s, a, g, l, o],
     t.roundness
   );
-}, Ee = (t) => {
+}, Te = (t) => {
   const e = t.hasSourceArrow ? x(
     { x: t.arrowLength, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ) : w, o = t.hasTargetArrow ? x(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = x({ x: r, y: w.y }, t.fromVect, w), d = x(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, s = x(
+    { x: r, y: w.y },
+    t.fromVector,
+    w
+  ), h = x(
     { x: t.to.x - r, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
   );
-  return L([e, s, d, o], t.roundness);
-}, Se = (t) => {
+  return I([e, s, h, o], t.roundness);
+}, Ne = (t) => {
   const e = t.hasSourceArrow ? x(
     { x: t.arrowLength, y: w.y },
-    t.fromVect,
+    t.fromVector,
     w
   ) : w, o = t.hasTargetArrow ? x(
     { x: t.to.x - t.arrowLength, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ) : t.to, r = t.arrowLength + t.arrowOffset, s = r - t.roundness, d = x({ x: s, y: w.y }, t.fromVect, w), n = x(
+  ) : t.to, r = t.arrowLength + t.arrowOffset, s = r - t.roundness, h = x(
+    { x: s, y: w.y },
+    t.fromVector,
+    w
+  ), n = x(
     { x: t.to.x - s, y: t.to.y },
-    t.toVect,
+    t.toVector,
     t.to
-  ), h = Math.max((d.y + n.y) / 2, r), c = t.to.x / 2, a = { x: d.x, y: t.flipY > 0 ? h : -r }, l = { x: c, y: a.y }, g = {
+  ), d = Math.max((h.y + n.y) / 2, r), c = t.to.x / 2, a = {
+    x: h.x,
+    y: t.flipY > 0 ? d : -r
+  }, l = { x: c, y: a.y }, g = {
     x: n.x,
-    y: t.flipY > 0 ? t.to.y - h : t.to.y + r
-  }, f = { x: c, y: g.y };
-  return L(
-    [e, d, a, l, f, g, n, o],
+    y: t.flipY > 0 ? t.to.y - d : t.to.y + r
+  }, y = { x: c, y: g.y };
+  return I(
+    [e, h, a, l, y, g, n, o],
     t.roundness
   );
-}, j = (t) => {
+}, G = (t) => {
   const e = t.arrowOffset, o = t.side, r = t.arrowLength + e, s = r + 2 * o, n = [
     { x: t.arrowLength, y: w.y },
     { x: r, y: w.y },
@@ -549,15 +564,17 @@ const we = (t, e) => ({
     { x: r, y: w.y },
     { x: t.arrowLength, y: w.y }
   ].map(
-    (c) => x(c, t.fromVect, w)
-  ), h = `M ${w.x} ${w.y} L ${n[0].x} ${n[0].y} `;
-  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : h}${L(n, t.roundness)}`;
-}, pe = (t) => {
-  const e = t.smallRadius, o = t.radius, r = Math.sqrt(e * e + o * o), s = e + o, d = t.arrowLength + r * (1 - o / s), n = e * o / s, c = [
+    (c) => x(c, t.fromVector, w)
+  ), d = `M ${w.x} ${w.y} L ${n[0].x} ${n[0].y} `;
+  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : d}${I(n, t.roundness)}`;
+}, Pe = (t) => {
+  const e = t.smallRadius, o = t.radius, r = Math.sqrt(e * e + o * o), s = e + o, h = t.arrowLength + r * (1 - o / s), n = e * o / s, c = [
     { x: t.arrowLength, y: w.y },
-    { x: d, y: n },
-    { x: d, y: -n }
-  ].map((g) => x(g, t.fromVect, w)), a = [
+    { x: h, y: n },
+    { x: h, y: -n }
+  ].map(
+    (g) => x(g, t.fromVector, w)
+  ), a = [
     `M ${c[0].x} ${c[0].y}`,
     `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
     `A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,
@@ -581,10 +598,10 @@ const we = (t, e) => ({
   smallCycleRadius: 15,
   curvature: 90
 });
-class Te {
+class De {
   constructor(e) {
-    i(this, "svg", B());
-    i(this, "group", $());
+    i(this, "svg", $());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -599,74 +616,74 @@ class Te {
     i(this, "hasTargetArrow");
     this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const o = (e == null ? void 0 : e.color) ?? u.color, r = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = W(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = m(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = m(o), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(o, r), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(o), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: r, width: s, height: d, flipX: n, flipY: h } = F(
+    const { x: o, y: r, width: s, height: h, flipX: n, flipY: d } = z(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
-    const c = b(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    const c = T(
       e.from.direction,
       n,
-      h
-    ), a = b(e.to.direction, n, h), l = {
+      d
+    ), a = T(e.to.direction, n, d), l = {
       x: s,
-      y: d
+      y: h
     };
-    let g, f = a, v = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = pe({
-      fromVect: c,
+    let g, y = a, v = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = Pe({
+      fromVector: c,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = xe({
+    }), y = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = be({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       flipX: n,
-      flipY: h,
+      flipY: d,
       arrowLength: this.arrowLength,
       detourDirection: this.detourDirection,
       detourDistance: this.detourDistance,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = ve({
+    }) : g = Se({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       arrowLength: this.arrowLength,
       curvature: this.curvature,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = N(
+      const f = N(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const y = N(
-        f,
+      const f = N(
+        y,
         l,
         v,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
-class be {
+class Me {
   constructor(e) {
-    i(this, "svg", B());
-    i(this, "group", $());
+    i(this, "svg", $());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -687,37 +704,37 @@ class be {
       this.cycleSquareSide / 2
     ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (e == null ? void 0 : e.color) ?? u.color, s = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = W(r, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = m(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = m(r), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(r, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: r, width: s, height: d, flipX: n, flipY: h } = F(
+    const { x: o, y: r, width: s, height: h, flipX: n, flipY: d } = z(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
-    const c = b(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    const c = T(
       e.from.direction,
       n,
-      h
-    ), a = b(e.to.direction, n, h), l = {
+      d
+    ), a = T(e.to.direction, n, d), l = {
       x: s,
-      y: d
+      y: h
     };
-    let g, f = a, v = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = j({
-      fromVect: c,
+    let g, y = a, v = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = G({
+      fromVector: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = H({
+    }), y = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       flipX: n,
-      flipY: h,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -725,10 +742,10 @@ class be {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Ae({
+    }) : g = me({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       flipX: n,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
@@ -736,29 +753,29 @@ class be {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = N(
+      const f = N(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const y = N(
-        f,
+      const f = N(
+        y,
         l,
         v,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
-class Ne {
+class Ce {
   constructor(e) {
-    i(this, "svg", B());
-    i(this, "group", $());
+    i(this, "svg", $());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -779,37 +796,37 @@ class Ne {
       this.cycleSquareSide / 2
     ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (e == null ? void 0 : e.color) ?? u.color, s = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = W(r, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = m(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = m(r), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(r, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: r, width: s, height: d, flipX: n, flipY: h } = F(
+    const { x: o, y: r, width: s, height: h, flipX: n, flipY: d } = z(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
-    const c = b(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    const c = T(
       e.from.direction,
       n,
-      h
-    ), a = b(e.to.direction, n, h), l = {
+      d
+    ), a = T(e.to.direction, n, d), l = {
       x: s,
-      y: d
+      y: h
     };
-    let g, f = a, v = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = j({
-      fromVect: c,
+    let g, y = a, v = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = G({
+      fromVector: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = H({
+    }), y = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       flipX: n,
-      flipY: h,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -817,39 +834,39 @@ class Ne {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Ee({
+    }) : g = Te({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = N(
+      const f = N(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const y = N(
-        f,
+      const f = N(
+        y,
         l,
         v,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
-class me {
+class Ve {
   constructor(e) {
-    i(this, "svg", B());
-    i(this, "group", $());
+    i(this, "svg", $());
+    i(this, "group", W());
     i(this, "line");
     i(this, "sourceArrow", null);
     i(this, "targetArrow", null);
@@ -870,37 +887,37 @@ class me {
       this.cycleSquareSide / 2
     ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
     const r = (e == null ? void 0 : e.color) ?? u.color, s = (e == null ? void 0 : e.width) ?? u.width;
-    this.svg.appendChild(this.group), this.line = W(r, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = m(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = m(r), this.group.appendChild(this.targetArrow));
+    this.svg.appendChild(this.group), this.line = F(r, s), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = P(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = P(r), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: o, y: r, width: s, height: d, flipX: n, flipY: h } = F(
+    const { x: o, y: r, width: s, height: h, flipX: n, flipY: d } = z(
       e.from,
       e.to
     );
-    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${s}px`, this.svg.style.height = `${d}px`, this.group.style.transform = `scale(${n}, ${h})`;
-    const c = b(
+    this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${Math.max(s, 1)}px`, this.svg.style.height = `${Math.max(h, 1)}px`, this.group.style.transform = `scale(${n}, ${d})`;
+    const c = T(
       e.from.direction,
       n,
-      h
-    ), a = b(e.to.direction, n, h), l = {
+      d
+    ), a = T(e.to.direction, n, d), l = {
       x: s,
-      y: d
+      y: h
     };
-    let g, f = a, v = -this.arrowLength;
-    if (e.from.portId === e.to.portId ? (g = j({
-      fromVect: c,
+    let g, y = a, v = -this.arrowLength;
+    if (e.from.portId === e.to.portId ? (g = G({
+      fromVector: c,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), f = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = H({
+    }), y = c, v = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
       to: l,
-      fromVect: c,
-      toVect: a,
+      fromVector: c,
+      toVector: a,
       flipX: n,
-      flipY: h,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
@@ -908,42 +925,42 @@ class me {
       detourDistance: this.detourDistance,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }) : g = Se({
+    }) : g = Ne({
       to: l,
-      fromVect: c,
-      toVect: a,
-      flipY: h,
+      fromVector: c,
+      toVector: a,
+      flipY: d,
       arrowLength: this.arrowLength,
       arrowOffset: this.arrowOffset,
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }), this.line.setAttribute("d", g), this.sourceArrow) {
-      const y = N(
+      const f = N(
         c,
         w,
         this.arrowLength,
         this.arrowWidth
       );
-      this.sourceArrow.setAttribute("d", y);
+      this.sourceArrow.setAttribute("d", f);
     }
     if (this.targetArrow) {
-      const y = N(
-        f,
+      const f = N(
+        y,
         l,
         v,
         this.arrowWidth
       );
-      this.targetArrow.setAttribute("d", y);
+      this.targetArrow.setAttribute("d", f);
     }
   }
 }
-const Pe = (t) => {
+const Le = (t) => {
   if (typeof t == "function")
     return t;
   switch (t == null ? void 0 : t.type) {
     case "straight":
-      return () => new Ne({
+      return () => new Ce({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -957,7 +974,7 @@ const Pe = (t) => {
         detourDirection: t.detourDirection
       });
     case "horizontal":
-      return () => new be({
+      return () => new Me({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -971,7 +988,7 @@ const Pe = (t) => {
         detourDirection: t.detourDirection
       });
     case "vertical":
-      return () => new me({
+      return () => new Ve({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -985,7 +1002,7 @@ const Pe = (t) => {
         detourDirection: t.detourDirection
       });
     default:
-      return () => new Te({
+      return () => new De({
         color: t.color,
         width: t.width,
         arrowLength: t.arrowLength,
@@ -999,30 +1016,30 @@ const Pe = (t) => {
         detourDirection: t.detourDirection
       });
   }
-}, De = (t) => {
-  var o, r, s, d, n;
-  const e = ye(
+}, Re = (t) => {
+  var o, r, s, h, n;
+  const e = Ee(
     (o = t == null ? void 0 : t.nodes) == null ? void 0 : o.priority,
     (r = t == null ? void 0 : t.edges) == null ? void 0 : r.priority
   );
   return {
     nodes: {
-      centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? we,
+      centerFn: ((s = t == null ? void 0 : t.nodes) == null ? void 0 : s.centerFn) ?? Ae,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
-      direction: ((d = t == null ? void 0 : t.ports) == null ? void 0 : d.direction) ?? 0
+      direction: ((h = t == null ? void 0 : t.ports) == null ? void 0 : h.direction) ?? 0
     },
     edges: {
-      shapeFactory: Pe(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
+      shapeFactory: Le(((n = t == null ? void 0 : t.edges) == null ? void 0 : n.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
 };
-class Me {
-  constructor(e, o, r, s, d) {
+class de {
+  constructor(e, o, r, s, h) {
     /**
-     * provides api for accessing graph model
+     * provides api for accessing model of rendered graph
      */
     i(this, "graph");
     /**
@@ -1030,13 +1047,13 @@ class Me {
      */
     i(this, "viewport");
     i(this, "defaults");
-    i(this, "nodeIdGenerator", new X(
+    i(this, "nodeIdGenerator", new Y(
       (e) => this.graph.getNode(e) !== null
     ));
-    i(this, "portIdGenerator", new X(
+    i(this, "portIdGenerator", new Y(
       (e) => this.graph.getPort(e) !== null
     ));
-    i(this, "edgeIdGenerator", new X(
+    i(this, "edgeIdGenerator", new Y(
       (e) => this.graph.getEdge(e) !== null
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -1084,17 +1101,20 @@ class Me {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
     });
     i(this, "onBeforeDestroyEmitter");
+    /**
+     * emits event just before destruction of canvas
+     */
     i(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = o, this.viewportStore = r, this.htmlView = s, this.defaults = De(d), this.graph = new ue(this.graphStore), this.viewport = new ge(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
+    this.element = e, this.graphStore = o, this.viewportStore = r, this.htmlView = s, this.defaults = Re(h), this.graph = new xe(this.graphStore), this.viewport = new ve(this.viewportStore), this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.subscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.subscribe(
       this.onAfterEdgeShapeUpdated
     ), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = A();
+    ), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = E();
   }
   /**
-   * adds node to graph
+   * adds new node
    */
   addNode(e) {
     const o = this.nodeIdGenerator.create(e.id);
@@ -1122,28 +1142,28 @@ class Me {
    */
   updateNode(e, o) {
     if (this.graph.getNode(e) === null)
-      throw new S("failed to update nonexisting node");
+      throw new S("failed to update non existing node");
     return this.graphStore.updateNode(e, o ?? {}), this;
   }
   /**
-   * removes node from graph
+   * removes specified node
    * all the ports of node get unmarked
    * all the edges adjacent to node get removed
    */
   removeNode(e) {
     if (this.graph.getNode(e) === null)
-      throw new S("failed to remove nonexisting node");
+      throw new S("failed to remove non existing node");
     return this.graphStore.removeNode(e), this;
   }
   /**
-   * marks element as port of node
+   * marks specified element as a port for specified node
    */
   markPort(e) {
     const o = this.portIdGenerator.create(e.id);
     if (this.graph.getPort(o) !== null)
       throw new S("failed to add port with existing id");
     if (this.graph.getNode(e.nodeId) === null)
-      throw new S("failed to mark port for nonexisting node");
+      throw new S("failed to mark port for nonexistent node");
     return this.graphStore.addPort({
       id: o,
       element: e.element,
@@ -1152,33 +1172,33 @@ class Me {
     }), this;
   }
   /**
-   * updates port and attached edges
+   * updates port and edges attached to it
    */
   updatePort(e, o) {
     if (this.graph.getPort(e) === null)
-      throw new S("failed to update nonexisting port");
+      throw new S("failed to update nonexistent port");
     return this.graphStore.updatePort(e, o ?? {}), this;
   }
   /**
-   * ummarks element as port of node
-   * all the edges adjacent to port get removed
+   * unmarks specified port
+   * all the edges adjacent to the port get removed
    */
   unmarkPort(e) {
     if (this.graph.getPort(e) === null)
-      throw new S("failed to unmark nonexisting port");
+      throw new S("failed to unmark non existing port");
     return this.graphStore.removePort(e), this;
   }
   /**
-   * adds edge to graph
+   * adds new edge
    */
   addEdge(e) {
     const o = this.edgeIdGenerator.create(e.id);
     if (this.graph.getEdge(o) !== null)
       throw new S("failed to add edge with existing id");
     if (this.graph.getPort(e.from) === null)
-      throw new S("failed to add edge from nonexisting port");
+      throw new S("failed to add edge from nonexistent port");
     if (this.graph.getPort(e.to) === null)
-      throw new S("failed to add edge to nonexisting port");
+      throw new S("failed to add edge to nonexistent port");
     return this.graphStore.addEdge({
       id: o,
       from: e.from,
@@ -1188,29 +1208,29 @@ class Me {
     }), this;
   }
   /**
-   * updates edge
+   * updates specified edge
    */
   updateEdge(e, o) {
     if (this.graph.getEdge(e) === null)
-      throw new S("failed to update nonexisting edge");
+      throw new S("failed to update nonexistent edge");
     return this.graphStore.updateEdge(e, o ?? {}), this;
   }
   /**
-   * removes edge from graph
+   * removes specified edge
    */
   removeEdge(e) {
     if (this.graph.getEdge(e) === null)
-      throw new S("failed to remove nonexisting edge");
+      throw new S("failed to remove nonexistent edge");
     return this.graphStore.removeEdge(e), this;
   }
   /**
-   * applies transformation for viewport
+   * applies transformation for viewport matrix
    */
   patchViewportMatrix(e) {
     return this.viewportStore.patchViewportMatrix(e), this;
   }
   /**
-   * applies transformation for content
+   * applies transformation for content matrix
    */
   patchContentMatrix(e) {
     return this.viewportStore.patchContentMatrix(e), this;
@@ -1227,22 +1247,22 @@ class Me {
    * canvas element gets rolled back to initial state, and can not be reused
    */
   destroy() {
-    this.onBeforeDestroyEmitter.emit(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
+    this.onBeforeDestroyEmitter.emit(), this.clear(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
       this.onAfterNodePriorityUpdated
     ), this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated), this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked), this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded), this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(
       this.onAfterEdgeShapeUpdated
     ), this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(
       this.onAfterEdgePriorityUpdated
-    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.clear(), this.htmlView.destroy();
+    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-class Ve {
+class ce {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
     i(this, "edges", /* @__PURE__ */ new Map());
-    i(this, "incommingEdges", /* @__PURE__ */ new Map());
-    i(this, "outcommingEdges", /* @__PURE__ */ new Map());
+    i(this, "incomingEdges", /* @__PURE__ */ new Map());
+    i(this, "outcomingEdges", /* @__PURE__ */ new Map());
     i(this, "cycleEdges", /* @__PURE__ */ new Map());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
@@ -1270,7 +1290,7 @@ class Ve {
     i(this, "onBeforeEdgeRemoved");
     i(this, "beforeClearEmitter");
     i(this, "onBeforeClear");
-    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = A(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = A(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = A(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = A(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = A(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = A(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = A(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = A(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = A(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = A(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = A(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = A(), [this.beforeClearEmitter, this.onBeforeClear] = A();
+    [this.afterNodeAddedEmitter, this.onAfterNodeAdded] = E(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = E(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = E(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = E(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = E(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = E(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = E(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = E(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = E(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = E(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = E(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = E(), [this.beforeClearEmitter, this.onBeforeClear] = E();
   }
   addNode(e) {
     const o = /* @__PURE__ */ new Map(), r = {
@@ -1301,7 +1321,7 @@ class Ve {
       element: e.element,
       direction: e.direction,
       nodeId: e.nodeId
-    }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcommingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
+    }), this.cycleEdges.set(e.id, /* @__PURE__ */ new Set()), this.incomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.outcomingEdges.set(e.id, /* @__PURE__ */ new Set()), this.nodes.get(e.nodeId).ports.set(e.id, e.element), this.afterPortAddedEmitter.emit(e.id);
   }
   getPort(e) {
     return this.ports.get(e);
@@ -1349,13 +1369,13 @@ class Ve {
     this.beforeEdgeRemovedEmitter.emit(e), this.removeEdgeInternal(e);
   }
   clear() {
-    this.beforeClearEmitter.emit(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
+    this.beforeClearEmitter.emit(), this.incomingEdges.clear(), this.outcomingEdges.clear(), this.cycleEdges.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
   }
   getPortIncomingEdgeIds(e) {
-    return Array.from(this.incommingEdges.get(e));
+    return Array.from(this.incomingEdges.get(e));
   }
   getPortOutcomingEdgeIds(e) {
-    return Array.from(this.outcommingEdges.get(e));
+    return Array.from(this.outcomingEdges.get(e));
   }
   getPortCycleEdgeIds(e) {
     return Array.from(this.cycleEdges.get(e));
@@ -1401,31 +1421,31 @@ class Ve {
       to: e.to,
       shape: e.shape,
       priority: e.priority
-    }), e.from !== e.to ? (this.outcommingEdges.get(e.from).add(e.id), this.incommingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
+    }), e.from !== e.to ? (this.outcomingEdges.get(e.from).add(e.id), this.incomingEdges.get(e.to).add(e.id)) : this.cycleEdges.get(e.from).add(e.id);
   }
   removeEdgeInternal(e) {
     const o = this.edges.get(e), r = o.from, s = o.to;
-    this.cycleEdges.get(r).delete(e), this.cycleEdges.get(s).delete(e), this.incommingEdges.get(r).delete(e), this.incommingEdges.get(s).delete(e), this.outcommingEdges.get(r).delete(e), this.outcommingEdges.get(s).delete(e), this.edges.delete(e);
+    this.cycleEdges.get(r).delete(e), this.cycleEdges.get(s).delete(e), this.incomingEdges.get(r).delete(e), this.incomingEdges.get(s).delete(e), this.outcomingEdges.get(r).delete(e), this.outcomingEdges.get(s).delete(e), this.edges.delete(e);
   }
 }
-const ee = (t) => ({
+const re = (t) => ({
   scale: 1 / t.scale,
   x: -t.x / t.scale,
   y: -t.y / t.scale
-}), te = {
+}), ie = {
   scale: 1,
   x: 0,
   y: 0
 };
-class Le {
+class Ie {
   constructor() {
-    i(this, "viewportMatrix", te);
-    i(this, "contentMatrix", te);
+    i(this, "viewportMatrix", ie);
+    i(this, "contentMatrix", ie);
     i(this, "afterUpdateEmitter");
     i(this, "onAfterUpdated");
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
-    [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
+    [this.afterUpdateEmitter, this.onAfterUpdated] = E(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = E();
   }
   getViewportMatrix() {
     return this.viewportMatrix;
@@ -1438,17 +1458,17 @@ class Le {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = ee(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = re(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.beforeUpdateEmitter.emit(), this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.viewportMatrix = ee(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = re(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class G {
+class J {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -1474,7 +1494,7 @@ class G {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e) {
-    new G(e);
+    new J(e);
   }
   handleNodeResize(e) {
     const o = this.elementToNodeId.get(e);
@@ -1483,35 +1503,36 @@ class G {
     });
   }
 }
-const Ce = (t) => {
-  var g, f, v, y, p, E;
+const Be = (t) => {
+  var g, y, v, f, p, A;
   const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
-  }), o = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), r = ((v = t == null ? void 0 : t.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
-  }), s = (t == null ? void 0 : t.moveOnTop) === !1, d = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, n = d !== void 0 ? d : "grab", h = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseDownEventVerifier, c = h !== void 0 ? h : (T) => T.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
+  }), o = ((y = t == null ? void 0 : t.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((v = t == null ? void 0 : t.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
+  }), s = (t == null ? void 0 : t.moveOnTop) === !1, h = (f = t == null ? void 0 : t.mouse) == null ? void 0 : f.dragCursor, n = h !== void 0 ? h : "grab", d = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, a = (A = t == null ? void 0 : t.mouse) == null ? void 0 : A.mouseUpEventVerifier;
   return {
     freezePriority: s,
     dragCursor: n,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: a !== void 0 ? a : (T) => T.button === 0,
+    mouseUpEventVerifier: a !== void 0 ? a : (b) => b.button === 0,
     onNodeDrag: e,
     onBeforeNodeDrag: o,
     onNodeDragFinished: r
   };
-}, R = (t, e, o) => {
-  const { x: r, y: s, width: d, height: n } = t.getBoundingClientRect();
-  return e >= r && e <= r + d && o >= s && o <= s + n;
-}, U = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, I = (t, e) => {
+}, Ue = (t, e, o) => {
+  const { x: r, y: s, width: h, height: n } = t.getBoundingClientRect();
+  return e >= r && e <= r + h && o >= s && o <= s + n;
+}, $e = (t, e, o) => e >= 0 && e <= t.innerWidth && o >= 0 && o <= t.innerHeight, V = (t, e, o, r) => Ue(e, o, r) && $e(t, o, r), U = (t, e) => {
   e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
-};
-class J {
-  constructor(e, o) {
+}, C = (t, e) => ({
+  x: t.scale * e.x + t.x,
+  y: t.scale * e.y + t.y
+});
+class K {
+  constructor(e, o, r, s) {
     i(this, "grabbedNodeId", null);
     i(this, "maxNodePriority", 0);
-    i(this, "previousTouchCoords", null);
+    i(this, "previousTouchCoordinates", null);
     i(this, "nodeIds", /* @__PURE__ */ new Map());
-    i(this, "window", window);
     i(this, "graph");
-    i(this, "element");
     i(this, "onAfterNodeAdded", (e) => {
       this.updateMaxNodePriority(e);
       const o = this.graph.getNode(e);
@@ -1541,12 +1562,12 @@ class J {
         element: s.element,
         x: s.x,
         y: s.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = r, I(this.element, this.options.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
+      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = r, U(this.element, this.options.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
     });
     i(this, "onTouchStart", (e) => {
       if (e.touches.length !== 1)
         return;
-      e.stopImmediatePropagation(), this.previousTouchCoords = {
+      e.stopImmediatePropagation(), this.previousTouchCoordinates = {
         x: e.touches[0].clientX,
         y: e.touches[0].clientY
       };
@@ -1559,7 +1580,12 @@ class J {
       }) && (this.grabbedNodeId = r, this.moveNodeOnTop(r), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish));
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!R(this.element, e.clientX, e.clientY) || !U(this.window, e.clientX, e.clientY)) {
+      if (!V(
+        this.window,
+        this.element,
+        e.clientX,
+        e.clientY
+      )) {
         this.cancelMouseDrag();
         return;
       }
@@ -1572,37 +1598,48 @@ class J {
       if (e.touches.length !== 1)
         return;
       const o = e.touches[0];
-      if (!R(this.element, o.clientX, o.clientY) || !U(this.window, o.clientX, o.clientY)) {
+      if (!V(
+        this.window,
+        this.element,
+        o.clientX,
+        o.clientY
+      )) {
         this.cancelTouchDrag();
         return;
       }
-      if (this.grabbedNodeId !== null && this.previousTouchCoords !== null) {
-        const r = o.clientX - this.previousTouchCoords.x, s = o.clientY - this.previousTouchCoords.y;
-        this.dragNode(this.grabbedNodeId, r, s), this.previousTouchCoords = {
+      if (this.grabbedNodeId !== null && this.previousTouchCoordinates !== null) {
+        const s = o.clientX - this.previousTouchCoordinates.x, h = o.clientY - this.previousTouchCoordinates.y;
+        this.dragNode(this.grabbedNodeId, s, h), this.previousTouchCoordinates = {
           x: e.touches[0].clientX,
           y: e.touches[0].clientY
         };
       }
     });
     i(this, "onWindowTouchFinish", () => {
-      this.previousTouchCoords = null, this.cancelTouchDrag();
+      this.previousTouchCoordinates = null, this.cancelTouchDrag();
     });
     i(this, "options");
-    this.canvas = e, this.options = Ce(o), this.graph = e.graph, this.element = e.element, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = o, this.window = r, this.options = Be(s), this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o) {
-    new J(e, o);
+  static configure(e, o, r, s) {
+    new K(e, o, r, s);
   }
   dragNode(e, o, r) {
     const s = this.graph.getNode(e);
     if (s === null)
       return;
-    const d = this.canvas.viewport.getContentMatrix(), n = d.scale * s.x + d.x, h = d.scale * s.y + d.y, c = n + o, a = h + r, l = this.canvas.viewport.getViewportMatrix(), g = l.scale * c + l.x, f = l.scale * a + l.y;
-    this.canvas.updateNode(e, { x: g, y: f }), this.options.onNodeDrag({
+    const h = this.canvas.viewport.getContentMatrix(), n = C(h, {
+      x: s.x,
+      y: s.y
+    }), d = C(
+      { scale: 1, x: o, y: r },
+      n
+    ), c = this.canvas.viewport.getViewportMatrix(), a = C(c, d);
+    this.canvas.updateNode(e, { x: a.x, y: a.y }), this.options.onNodeDrag({
       nodeId: e,
       element: s.element,
-      x: g,
-      y: f
+      x: a.x,
+      y: a.y
     });
   }
   moveNodeOnTop(e) {
@@ -1621,13 +1658,13 @@ class J {
       element: e.element,
       x: e.x,
       y: e.y
-    }), this.grabbedNodeId = null, I(this.canvas.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, U(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
   cancelTouchDrag() {
-    this.previousTouchCoords = null;
+    this.previousTouchCoordinates = null;
     const e = this.graph.getNode(this.grabbedNodeId);
     e !== null && this.options.onNodeDragFinished({
       nodeId: this.grabbedNodeId,
@@ -1644,30 +1681,30 @@ class J {
     this.maxNodePriority = Math.max(this.maxNodePriority, o);
   }
 }
-const Re = (t) => {
+const We = (t) => {
   const e = t.minX !== null ? t.minX : -1 / 0, o = t.maxX !== null ? t.maxX : 1 / 0, r = t.minY !== null ? t.minY : -1 / 0, s = t.maxY !== null ? t.maxY : 1 / 0;
-  return (d) => {
-    let n = d.nextTransform.x, h = d.nextTransform.y;
-    n < e && n < d.prevTransform.x && (n = Math.min(d.prevTransform.x, e));
-    const c = d.canvasWidth * d.prevTransform.scale, a = o - c;
-    n > a && n > d.prevTransform.x && (n = Math.max(d.prevTransform.x, a)), h < r && h < d.prevTransform.y && (h = Math.min(d.prevTransform.y, r));
-    const l = d.canvasHeight * d.prevTransform.scale, g = s - l;
-    return h > g && h > d.prevTransform.y && (h = Math.max(d.prevTransform.y, g)), { scale: d.nextTransform.scale, x: n, y: h };
+  return (h) => {
+    let n = h.nextTransform.x, d = h.nextTransform.y;
+    n < e && n < h.prevTransform.x && (n = Math.min(h.prevTransform.x, e));
+    const c = h.canvasWidth * h.prevTransform.scale, a = o - c;
+    n > a && n > h.prevTransform.x && (n = Math.max(h.prevTransform.x, a)), d < r && d < h.prevTransform.y && (d = Math.min(h.prevTransform.y, r));
+    const l = h.canvasHeight * h.prevTransform.scale, g = s - l;
+    return d > g && d > h.prevTransform.y && (d = Math.max(h.prevTransform.y, g)), { scale: h.nextTransform.scale, x: n, y: d };
   };
-}, Ue = (t) => {
+}, Fe = (t) => {
   const e = t.maxContentScale, o = t.minContentScale, r = e !== null ? 1 / e : 0, s = o !== null ? 1 / o : 1 / 0;
-  return (d) => {
-    const n = d.prevTransform, h = d.nextTransform;
-    let c = h.scale, a = h.x, l = h.y;
-    if (h.scale > s && h.scale > n.scale) {
+  return (h) => {
+    const n = h.prevTransform, d = h.nextTransform;
+    let c = d.scale, a = d.x, l = d.y;
+    if (d.scale > s && d.scale > n.scale) {
       c = Math.max(n.scale, s), a = n.x, l = n.y;
-      const g = (c - n.scale) / (h.scale - n.scale);
-      a = n.x + (h.x - n.x) * g, l = n.y + (h.y - n.y) * g;
+      const g = (c - n.scale) / (d.scale - n.scale);
+      a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
     }
-    if (h.scale < r && h.scale < n.scale) {
+    if (d.scale < r && d.scale < n.scale) {
       c = Math.min(n.scale, r), a = n.x, l = n.y;
-      const g = (c - n.scale) / (h.scale - n.scale);
-      a = n.x + (h.x - n.x) * g, l = n.y + (h.y - n.y) * g;
+      const g = (c - n.scale) / (d.scale - n.scale);
+      a = n.x + (d.x - n.x) * g, l = n.y + (d.y - n.y) * g;
     }
     return {
       scale: c,
@@ -1675,7 +1712,7 @@ const Re = (t) => {
       y: l
     };
   };
-}, Ie = (t) => (e) => t.reduce(
+}, ze = (t) => (e) => t.reduce(
   (o, r) => r({
     prevTransform: e.prevTransform,
     nextTransform: o,
@@ -1683,71 +1720,71 @@ const Re = (t) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), oe = (t) => {
+), se = (t) => {
   if (typeof t == "function")
     return t;
   switch (t.type) {
     case "scale-limit":
-      return Ue({
+      return Fe({
         minContentScale: t.minContentScale ?? 0,
         maxContentScale: t.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return Re({
+      return We({
         minX: t.minX ?? -1 / 0,
         maxX: t.maxX ?? 1 / 0,
         minY: t.minY ?? -1 / 0,
         maxY: t.maxY ?? 1 / 0
       });
   }
-}, Be = (t) => {
-  var y, p, E, T, Y, D, M, V, Q, Z, _, q;
-  const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
+}, ke = (t) => {
+  var f, p, A, b, D, m, L, R, q, O, ee, te;
+  const e = (f = t == null ? void 0 : t.scale) == null ? void 0 : f.mouseWheelSensitivity, o = e !== void 0 ? e : 1.2, r = t == null ? void 0 : t.transformPreprocessor;
   let s;
-  r !== void 0 ? Array.isArray(r) ? s = Ie(
+  r !== void 0 ? Array.isArray(r) ? s = ze(
     r.map(
-      (P) => oe(P)
+      (M) => se(M)
     )
-  ) : s = oe(r) : s = (P) => P.nextTransform;
-  const d = ((p = t == null ? void 0 : t.shift) == null ? void 0 : p.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
-  }), h = ((T = t == null ? void 0 : t.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), c = (Y = t == null ? void 0 : t.shift) == null ? void 0 : Y.mouseDownEventVerifier, a = c !== void 0 ? c : (P) => P.button === 0, l = (D = t == null ? void 0 : t.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (P) => P.button === 0, f = (M = t == null ? void 0 : t.scale) == null ? void 0 : M.mouseWheelEventVerifier, v = f !== void 0 ? f : () => !0;
+  ) : s = se(r) : s = (M) => M.nextTransform;
+  const h = ((p = t == null ? void 0 : t.shift) == null ? void 0 : p.cursor) !== void 0 ? t.shift.cursor : "grab", n = ((A = t == null ? void 0 : t.events) == null ? void 0 : A.onBeforeTransformChange) ?? (() => {
+  }), d = ((b = t == null ? void 0 : t.events) == null ? void 0 : b.onTransformChange) ?? (() => {
+  }), c = (D = t == null ? void 0 : t.shift) == null ? void 0 : D.mouseDownEventVerifier, a = c !== void 0 ? c : (M) => M.button === 0, l = (m = t == null ? void 0 : t.shift) == null ? void 0 : m.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, y = (L = t == null ? void 0 : t.scale) == null ? void 0 : L.mouseWheelEventVerifier, v = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((V = t == null ? void 0 : t.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
+    onTransformStarted: ((R = t == null ? void 0 : t.events) == null ? void 0 : R.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((Q = t == null ? void 0 : t.events) == null ? void 0 : Q.onTransformFinished) ?? (() => {
+    onTransformFinished: ((q = t == null ? void 0 : t.events) == null ? void 0 : q.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: n,
-    onTransformChange: h,
+    onTransformChange: d,
     transformPreprocessor: s,
-    shiftCursor: d,
+    shiftCursor: h,
     mouseDownEventVerifier: a,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: v,
-    scaleWheelFinishTimeout: ((Z = t == null ? void 0 : t.scale) == null ? void 0 : Z.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((O = t == null ? void 0 : t.scale) == null ? void 0 : O.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((ee = t == null ? void 0 : t.events) == null ? void 0 : ee.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((q = t == null ? void 0 : t.events) == null ? void 0 : q.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((te = t == null ? void 0 : t.events) == null ? void 0 : te.onResizeTransformFinished) ?? (() => {
     })
   };
-}, $e = (t, e, o) => ({
+}, Ye = (t, e, o) => ({
   scale: t.scale,
   x: t.x + t.scale * e,
   y: t.y + t.scale * o
-}), We = (t, e, o, r) => ({
+}), Xe = (t, e, o, r) => ({
   scale: t.scale * e,
   x: t.scale * (1 - e) * o + t.x,
   y: t.scale * (1 - e) * r + t.y
-}), C = (t) => {
+}), B = (t) => {
   const e = [], o = t.touches.length;
-  for (let h = 0; h < o; h++)
-    e.push([t.touches[h].clientX, t.touches[h].clientY]);
+  for (let d = 0; d < o; d++)
+    e.push([t.touches[d].clientX, t.touches[d].clientY]);
   const r = e.reduce(
-    (h, c) => [h[0] + c[0], h[1] + c[1]],
+    (d, c) => [d[0] + c[0], d[1] + c[1]],
     [0, 0]
-  ), s = [r[0] / o, r[1] / o], n = e.map((h) => [h[0] - s[0], h[1] - s[1]]).reduce(
-    (h, c) => h + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
+  ), s = [r[0] / o, r[1] / o], n = e.map((d) => [d[0] - s[0], d[1] - s[1]]).reduce(
+    (d, c) => d + Math.sqrt(c[0] * c[0] + c[1] * c[1]),
     0
   );
   return {
@@ -1758,10 +1795,8 @@ const Re = (t) => {
     touches: e
   };
 };
-class z {
-  constructor(e, o) {
-    i(this, "element");
-    i(this, "window", window);
+class k {
+  constructor(e, o, r, s) {
     i(this, "viewport");
     i(this, "prevTouches", null);
     i(this, "wheelFinishTimer", null);
@@ -1770,15 +1805,21 @@ class z {
       this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.observer.unobserve(this.element), this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("wheel", this.onWheelScroll), this.element.removeEventListener("touchstart", this.onTouchStart), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
     });
     i(this, "onMouseDown", (e) => {
-      this.element === null || !this.options.mouseDownEventVerifier(e) || (I(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.startRegisteredTransform());
+      this.element === null || !this.options.mouseDownEventVerifier(e) || (U(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.startRegisteredTransform());
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (this.element === null || !R(this.element, e.clientX, e.clientY) || !U(this.window, e.clientX, e.clientY)) {
+      const o = V(
+        this.window,
+        this.element,
+        e.clientX,
+        e.clientY
+      );
+      if (this.element === null || !o) {
         this.stopMouseDrag();
         return;
       }
-      const o = -e.movementX, r = -e.movementY;
-      this.moveViewport(o, r);
+      const r = -e.movementX, s = -e.movementY;
+      this.moveViewport(r, s);
     });
     i(this, "onWindowMouseUp", (e) => {
       this.element === null || !this.options.mouseUpEventVerifier(e) || this.stopMouseDrag();
@@ -1787,22 +1828,22 @@ class z {
       if (!this.options.mouseWheelEventVerifier(e))
         return;
       e.preventDefault();
-      const { left: o, top: r } = this.element.getBoundingClientRect(), s = e.clientX - o, d = e.clientY - r, h = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
-      this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(h, s, d), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
+      const { left: o, top: r } = this.element.getBoundingClientRect(), s = e.clientX - o, h = e.clientY - r, d = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
+      this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(d, s, h), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
         this.transformInProgress || this.options.onTransformFinished(), this.wheelFinishTimer = null;
       }, this.options.scaleWheelFinishTimeout);
     });
     i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = C(e);
+        this.prevTouches = B(e);
         return;
       }
-      this.prevTouches = C(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.startRegisteredTransform();
+      this.prevTouches = B(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.startRegisteredTransform();
     });
     i(this, "onWindowTouchMove", (e) => {
-      const o = C(e);
+      const o = B(e);
       if (!o.touches.every(
-        (s) => R(this.element, s[0], s[1]) && U(this.window, s[0], s[1])
+        (s) => V(this.window, this.element, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1811,13 +1852,13 @@ class z {
         -(o.x - this.prevTouches.x),
         -(o.y - this.prevTouches.y)
       ), o.touchesCnt === 2) {
-        const { left: s, top: d } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, h = this.prevTouches.y - d, a = 1 / (o.scale / this.prevTouches.scale);
-        this.scaleViewport(a, n, h);
+        const { left: s, top: h } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, d = this.prevTouches.y - h, a = 1 / (o.scale / this.prevTouches.scale);
+        this.scaleViewport(a, n, d);
       }
       this.prevTouches = o;
     });
     i(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = C(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = B(e) : this.stopTouchDrag();
     });
     i(this, "observer", new ResizeObserver(() => {
       const e = this.viewport.getViewportMatrix(), { width: o, height: r } = this.element.getBoundingClientRect(), s = this.options.transformPreprocessor({
@@ -1829,31 +1870,36 @@ class z {
       this.options.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.options.onResizeTransformFinished();
     }));
     i(this, "options");
-    this.canvas = e, this.options = Be(o), this.element = e.element, this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+    this.canvas = e, this.element = o, this.window = r, this.options = ke(s), this.viewport = e.viewport, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o) {
-    new z(e, o);
+  static configure(e, o, r, s) {
+    new k(
+      e,
+      o,
+      r,
+      s
+    );
   }
   moveViewport(e, o) {
-    const r = this.viewport.getViewportMatrix(), s = $e(r, e, o), { width: d, height: n } = this.element.getBoundingClientRect(), h = this.options.transformPreprocessor({
+    const r = this.viewport.getViewportMatrix(), s = Ye(r, e, o), { width: h, height: n } = this.element.getBoundingClientRect(), d = this.options.transformPreprocessor({
       prevTransform: r,
       nextTransform: s,
-      canvasWidth: d,
+      canvasWidth: h,
       canvasHeight: n
     });
-    this.performTransform(h);
+    this.performTransform(d);
   }
   scaleViewport(e, o, r) {
-    const s = this.canvas.viewport.getViewportMatrix(), d = We(s, e, o, r), { width: n, height: h } = this.element.getBoundingClientRect(), c = this.options.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), h = Xe(s, e, o, r), { width: n, height: d } = this.element.getBoundingClientRect(), c = this.options.transformPreprocessor({
       prevTransform: s,
-      nextTransform: d,
+      nextTransform: h,
       canvasWidth: n,
-      canvasHeight: h
+      canvasHeight: d
     });
     this.performTransform(c);
   }
   stopMouseDrag() {
-    I(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    U(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -1874,14 +1920,12 @@ class z {
     this.transformInProgress = !1, this.options.onTransformFinished();
   }
 }
-class K {
-  constructor(e, o, r, s) {
+class Q {
+  constructor(e, o, r, s, h, n) {
     i(this, "canvasResizeObserver");
-    i(this, "window", window);
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
     i(this, "viewport");
-    i(this, "element");
     i(this, "viewportWidth", 0);
     i(this, "viewportHeight", 0);
     i(this, "viewportMatrix");
@@ -1908,50 +1952,54 @@ class K {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
     i(this, "userTransformInProgress", !1);
-    var g, f, v, y, p;
-    this.canvas = e, this.trigger = r, this.virtualScrollOptions = s, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new this.window.ResizeObserver((E) => {
-      const T = E[0];
-      this.viewportWidth = T.contentRect.width, this.viewportHeight = T.contentRect.height, this.scheduleLoadAreaAroundViewport();
-    }), this.viewport = e.viewport, this.element = e.element;
-    const d = ((g = o == null ? void 0 : o.events) == null ? void 0 : g.onResizeTransformStarted) ?? (() => {
-    }), n = ((f = o == null ? void 0 : o.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
-    }), h = ((v = o == null ? void 0 : o.events) == null ? void 0 : v.onTransformChange) ?? (() => {
-    }), c = ((y = o == null ? void 0 : o.events) == null ? void 0 : y.onBeforeTransformChange) ?? (() => {
-    }), a = ((p = o == null ? void 0 : o.events) == null ? void 0 : p.onTransformFinished) ?? (() => {
-    }), l = {
-      ...o,
+    var v, f, p, A, b;
+    this.canvas = e, this.element = o, this.window = r, this.trigger = h, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.nodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((D) => {
+      const m = D[0];
+      this.viewportWidth = m.contentRect.width, this.viewportHeight = m.contentRect.height, this.scheduleLoadAreaAroundViewport();
+    }), this.viewport = e.viewport;
+    const d = ((v = s == null ? void 0 : s.events) == null ? void 0 : v.onResizeTransformStarted) ?? (() => {
+    }), c = ((f = s == null ? void 0 : s.events) == null ? void 0 : f.onResizeTransformFinished) ?? (() => {
+    }), a = ((p = s == null ? void 0 : s.events) == null ? void 0 : p.onTransformChange) ?? (() => {
+    }), l = ((A = s == null ? void 0 : s.events) == null ? void 0 : A.onBeforeTransformChange) ?? (() => {
+    }), g = ((b = s == null ? void 0 : s.events) == null ? void 0 : b.onTransformFinished) ?? (() => {
+    }), y = {
+      ...s,
       events: {
-        ...o == null ? void 0 : o.events,
+        ...s == null ? void 0 : s.events,
         onResizeTransformStarted: () => {
           this.userTransformInProgress = !0, d();
         },
         onResizeTransformFinished: () => {
-          this.userTransformInProgress = !1, n();
+          this.userTransformInProgress = !1, c();
         },
         onBeforeTransformChange: () => {
-          this.userTransformInProgress = !0, c();
+          this.userTransformInProgress = !0, l();
         },
         onTransformChange: () => {
           this.userTransformInProgress = !1;
-          const E = this.viewportMatrix;
-          this.viewportMatrix = this.viewport.getViewportMatrix(), E.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), h();
+          const D = this.viewportMatrix;
+          this.viewportMatrix = this.viewport.getViewportMatrix(), D.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), a();
         },
         onTransformFinished: () => {
-          this.scheduleLoadAreaAroundViewport(), a();
+          this.scheduleLoadAreaAroundViewport(), g();
         }
       }
     };
-    z.configure(
+    k.configure(
       e,
-      l
+      this.element,
+      this.window,
+      y
     ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
-  static configure(e, o, r, s) {
-    new K(
+  static configure(e, o, r, s, h, n) {
+    new Q(
       e,
       o,
       r,
-      s
+      s,
+      h,
+      n
     );
   }
   scheduleLoadAreaAroundViewport() {
@@ -1960,25 +2008,329 @@ class K {
     });
   }
   scheduleEnsureViewportAreaLoaded() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - this.nodeHorizontal, s = this.viewportMatrix.y - this.nodeVertical, d = this.viewportMatrix.x + e + this.nodeHorizontal, n = this.viewportMatrix.y + o + this.nodeVertical;
-    this.loadedArea.xFrom < r && this.loadedArea.xTo > d && this.loadedArea.yFrom < s && this.loadedArea.yTo > n || this.scheduleLoadAreaAroundViewport();
+    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - this.nodeHorizontal, s = this.viewportMatrix.y - this.nodeVertical, h = this.viewportMatrix.x + e + this.nodeHorizontal, n = this.viewportMatrix.y + o + this.nodeVertical;
+    this.loadedArea.xFrom < r && this.loadedArea.xTo > h && this.loadedArea.yFrom < s && this.loadedArea.yTo > n || this.scheduleLoadAreaAroundViewport();
   }
   loadAreaAroundViewport() {
-    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - e - this.nodeHorizontal, s = this.viewportMatrix.y - o - this.nodeVertical, d = 3 * e + 2 * this.nodeHorizontal, n = 3 * o + 2 * this.nodeVertical;
-    this.trigger.emit({ x: r, y: s, width: d, height: n });
+    const e = this.viewportWidth * this.viewportMatrix.scale, o = this.viewportHeight * this.viewportMatrix.scale, r = this.viewportMatrix.x - e - this.nodeHorizontal, s = this.viewportMatrix.y - o - this.nodeVertical, h = 3 * e + 2 * this.nodeHorizontal, n = 3 * o + 2 * this.nodeVertical;
+    this.trigger.emit({ x: r, y: s, width: h, height: n });
+  }
+}
+const He = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return t.style.position = "absolute", t.style.inset = "0", t;
+}, je = () => {
+  const t = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  return t.setAttribute("fill", "url(#pattern)"), t;
+}, Ge = () => {
+  const t = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "pattern"
+  );
+  return t.setAttribute("id", "pattern"), t;
+}, Je = (t, e) => {
+  const o = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "circle"
+  );
+  return o.setAttribute("cx", "0"), o.setAttribute("cy", "0"), o.setAttribute("r", `${t}`), o.setAttribute("fill", `${e}`), o;
+}, Ke = (t) => t instanceof SVGElement ? t : Je(
+  (t == null ? void 0 : t.radius) ?? 1.5,
+  (t == null ? void 0 : t.color) ?? "#d8d8d8"
+), Qe = (t) => {
+  const e = t.tileDimensions, o = (e == null ? void 0 : e.width) ?? 25, r = (e == null ? void 0 : e.height) ?? 25, s = Ke(t.renderer ?? {});
+  return {
+    tileWidth: o,
+    tileHeight: r,
+    renderer: s,
+    maxViewportScale: t.maxViewportScale ?? 10
+  };
+};
+class Z {
+  constructor(e, o, r) {
+    i(this, "svg", He());
+    i(this, "patternRenderingRectangle", je());
+    i(this, "pattern", Ge());
+    i(this, "patternContent");
+    i(this, "tileWidth");
+    i(this, "tileHeight");
+    i(this, "halfTileWidth");
+    i(this, "halfTileHeight");
+    i(this, "maxViewportScale");
+    i(this, "visible", !1);
+    i(this, "resizeObserver", new ResizeObserver((e) => {
+      const o = e[0], { width: r, height: s } = o.contentRect;
+      this.svg.setAttribute("width", `${r}`), this.svg.setAttribute("height", `${s}`), this.patternRenderingRectangle.setAttribute("width", `${r}`), this.patternRenderingRectangle.setAttribute("height", `${s}`);
+      const h = this.tileWidth / r, n = this.tileHeight / s;
+      this.pattern.setAttribute("width", `${h}`), this.pattern.setAttribute("height", `${n}`);
+    }));
+    i(this, "onAfterTransformUpdated", () => {
+      const e = this.canvas.viewport.getContentMatrix(), o = e.x - this.halfTileWidth * e.scale, r = e.y - this.halfTileHeight * e.scale, s = `matrix(${e.scale}, 0, 0, ${e.scale}, ${o}, ${r})`;
+      this.pattern.setAttribute("patternTransform", s), this.updateVisibility();
+    });
+    i(this, "onBeforeDestroy", () => {
+      this.resizeObserver.unobserve(this.host), this.host.removeChild(this.svg), this.canvas.viewport.onAfterUpdated.unsubscribe(
+        this.onAfterTransformUpdated
+      ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
+    });
+    this.canvas = e, this.host = r;
+    const s = Qe(o);
+    this.tileWidth = s.tileWidth, this.tileHeight = s.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = s.renderer, this.maxViewportScale = s.maxViewportScale;
+    const h = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
+    this.patternContent.setAttribute("transform", h), this.pattern.appendChild(this.patternContent);
+    const n = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.host), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated(), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+  }
+  static configure(e, o, r) {
+    new Z(e, o, r);
+  }
+  updateVisibility() {
+    const o = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
+    o && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !o && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
   }
 }
-class ze {
+const Ze = () => "direct", _e = (t) => t, qe = (t) => t.button === 0, Oe = () => {
+}, et = (t) => {
+  var e;
+  return {
+    connectionTypeResolver: t.connectionTypeResolver ?? Ze,
+    connectionPreprocessor: t.connectionPreprocessor ?? _e,
+    mouseDownEventVerifier: t.mouseDownEventVerifier ?? qe,
+    onAfterEdgeCreated: ((e = t.events) == null ? void 0 : e.onAfterEdgeCreated) ?? Oe
+  };
+};
+class _ {
+  constructor(e, o, r, s, h, n) {
+    i(this, "options");
+    i(this, "overlayCanvas");
+    i(this, "ports", /* @__PURE__ */ new Map());
+    i(this, "staticOverlayPortId", "static");
+    i(this, "draggingOverlayPortId", "dragging");
+    i(this, "staticPortId", null);
+    i(this, "isDirect", !0);
+    i(this, "onAfterPortMarked", (e) => {
+      const o = this.canvas.graph.getPort(e);
+      this.hookPortEvents(o.element), this.ports.set(o.element, e);
+    });
+    i(this, "onBeforePortUnmarked", (e) => {
+      const o = this.canvas.graph.getPort(e);
+      this.unhookPortEvents(o.element), this.ports.delete(o.element);
+    });
+    i(this, "onPortMouseDown", (e) => {
+      const o = e.currentTarget;
+      this.options.mouseDownEventVerifier(e) && this.isPortConnectionAllowed(o) && (e.stopPropagation(), this.grabPort(o, { x: e.clientX, y: e.clientY }), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp));
+    });
+    i(this, "onWindowMouseMove", (e) => {
+      if (!V(
+        this.window,
+        this.overlayLayer,
+        e.clientX,
+        e.clientY
+      )) {
+        this.stopMouseDrag();
+        return;
+      }
+      this.moveDraggingNode({ x: e.clientX, y: e.clientY });
+    });
+    i(this, "onWindowMouseUp", (e) => {
+      this.tryCreateConnection({ x: e.clientX, y: e.clientY }), this.stopMouseDrag();
+    });
+    i(this, "onPortTouchStart", (e) => {
+      const o = e.currentTarget;
+      if (!(e.touches.length === 1 && this.isPortConnectionAllowed(o)))
+        return;
+      e.stopPropagation();
+      const s = e.touches[0];
+      this.grabPort(o, { x: s.clientX, y: s.clientY }), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish);
+    });
+    i(this, "onWindowTouchMove", (e) => {
+      const o = e.touches[0];
+      if (!V(
+        this.window,
+        this.overlayLayer,
+        o.clientX,
+        o.clientY
+      )) {
+        this.stopTouchDrag();
+        return;
+      }
+      this.moveDraggingNode({ x: o.clientX, y: o.clientY });
+    });
+    i(this, "onWindowTouchFinish", (e) => {
+      const o = e.changedTouches[0];
+      this.tryCreateConnection({ x: o.clientX, y: o.clientY }), this.stopTouchDrag();
+    });
+    i(this, "onBeforeClear", () => {
+      this.ports.forEach((e, o) => {
+        this.unhookPortEvents(o);
+      }), this.ports.clear();
+    });
+    i(this, "onBeforeDestroy", () => {
+      this.stopMouseDrag(), this.stopTouchDrag(), this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.unsubscribe(
+        this.onBeforePortUnmarked
+      ), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
+    });
+    i(this, "onEdgeCreated", (e) => {
+      this.options.onAfterEdgeCreated(e);
+    });
+    this.canvas = e, this.overlayLayer = o, this.viewportStore = r, this.window = s, this.options = et(n);
+    const d = new ce(), c = new ne(
+      d,
+      this.viewportStore,
+      this.overlayLayer
+    );
+    this.overlayCanvas = new de(
+      this.overlayLayer,
+      d,
+      this.viewportStore,
+      c,
+      h
+    ), this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy);
+  }
+  static configure(e, o, r, s, h, n) {
+    new _(
+      e,
+      o,
+      r,
+      s,
+      h,
+      n
+    );
+  }
+  grabPort(e, o) {
+    const r = this.ports.get(e), s = this.canvas.graph.getPort(r);
+    this.staticPortId = r;
+    const h = this.options.connectionTypeResolver(this.staticPortId), n = e.getBoundingClientRect(), d = n.x + n.width / 2, c = n.y + n.height / 2, a = this.overlayLayer.getBoundingClientRect(), l = this.canvas.viewport.getViewportMatrix(), g = C(l, {
+      x: d - a.x,
+      y: c - a.y
+    }), y = C(l, {
+      x: o.x - a.x,
+      y: o.y - a.y
+    }), v = {
+      overlayId: this.staticOverlayPortId,
+      portCoords: g,
+      portDirection: s.direction
+    }, f = {
+      overlayId: this.draggingOverlayPortId,
+      portCoords: y,
+      portDirection: void 0
+    };
+    this.isDirect = h === "direct";
+    const p = this.isDirect ? v : f, A = this.isDirect ? f : v;
+    this.createOverlayGraph(p, A);
+  }
+  hookPortEvents(e) {
+    e.addEventListener("mousedown", this.onPortMouseDown), e.addEventListener("touchstart", this.onPortTouchStart);
+  }
+  unhookPortEvents(e) {
+    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
+  }
+  stopMouseDrag() {
+    this.resetDragState(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
+  }
+  stopTouchDrag() {
+    this.resetDragState(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
+  }
+  resetDragState() {
+    this.staticPortId = null, this.isDirect = !0, this.overlayCanvas.clear();
+  }
+  createOverlayGraph(e, o) {
+    const r = this.createAddNodeRequest(e);
+    this.overlayCanvas.addNode(r);
+    const s = this.createAddNodeRequest(o);
+    this.overlayCanvas.addNode(s), this.overlayCanvas.addEdge({
+      from: e.overlayId,
+      to: o.overlayId
+    });
+  }
+  createAddNodeRequest(e) {
+    const o = document.createElement("div");
+    return {
+      id: e.overlayId,
+      element: o,
+      x: e.portCoords.x,
+      y: e.portCoords.y,
+      ports: [
+        {
+          id: e.overlayId,
+          element: o,
+          direction: e.portDirection
+        }
+      ]
+    };
+  }
+  tryCreateConnection(e) {
+    const o = this.findPortAtPoint(e);
+    if (o === null)
+      return;
+    const r = this.isDirect ? this.staticPortId : o, s = this.isDirect ? o : this.staticPortId, h = { from: r, to: s }, n = this.options.connectionPreprocessor(h);
+    n !== null && (this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated), this.canvas.addEdge(n), this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated));
+  }
+  moveDraggingNode(e) {
+    const o = this.overlayLayer.getBoundingClientRect(), r = {
+      x: e.x - o.x,
+      y: e.y - o.y
+    }, s = this.canvas.viewport.getViewportMatrix(), h = C(s, r);
+    this.overlayCanvas.updateNode(this.draggingOverlayPortId, {
+      x: h.x,
+      y: h.y
+    });
+  }
+  findPortAtPoint(e) {
+    const o = document.elementsFromPoint(e.x, e.y);
+    for (const r of o) {
+      const s = this.findPortAtElement(r);
+      if (s !== null)
+        return s;
+    }
+    return null;
+  }
+  findPortAtElement(e) {
+    let o = e, r = null;
+    for (; o !== null && (r = this.ports.get(o) ?? null, r === null); )
+      o = o.parentElement;
+    return r;
+  }
+  isPortConnectionAllowed(e) {
+    const o = this.ports.get(e);
+    return this.options.connectionTypeResolver(o) !== null;
+  }
+}
+const tt = () => {
+  const t = document.createElement("div");
+  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t;
+}, X = () => {
+  const t = document.createElement("div");
+  return t.style.position = "absolute", t.style.inset = "0", t;
+};
+class ot {
+  constructor(e) {
+    i(this, "background", X());
+    i(this, "main", X());
+    i(this, "overlay", X());
+    i(this, "host", tt());
+    this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.overlay.style.pointerEvents = "none", this.host.appendChild(this.overlay);
+  }
+  destroy() {
+    this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlay), this.element.removeChild(this.host);
+  }
+}
+class it {
   constructor() {
     i(this, "element", null);
     i(this, "canvasDefaults", {});
     i(this, "dragOptions", {});
     i(this, "transformOptions", {});
+    i(this, "backgroundOptions", {});
+    i(this, "connectablePortsOptions", {});
     i(this, "virtualScrollOptions");
     i(this, "hasDraggableNode", !1);
     i(this, "hasTransformableViewport", !1);
     i(this, "hasResizeReactiveNodes", !1);
+    i(this, "hasBackground", !1);
+    i(this, "hasUserConnectablePorts", !1);
     i(this, "boxRenderingTrigger");
+    i(this, "window", window);
   }
   setElement(e) {
     return this.element = e, this;
@@ -2013,9 +2365,25 @@ class ze {
   enableBoxAreaRendering(e) {
     return this.boxRenderingTrigger = e, this;
   }
+  /**
+   * enables built-in virtual scroll behavior, when only nodes and edges close
+   * to viewport are rendered
+   */
   enableVirtualScroll(e) {
     return this.virtualScrollOptions = e, this;
   }
+  /**
+   * enables built-in background rendering
+   */
+  enableBackground(e) {
+    return this.hasBackground = !0, this.backgroundOptions = e ?? {}, this;
+  }
+  /**
+   * enables edge creation by dragging one port to another
+   */
+  enableUserConnectablePorts(e) {
+    return this.connectablePortsOptions = e ?? {}, this.hasUserConnectablePorts = !0, this;
+  }
   /**
    * builds final canvas
    */
@@ -2025,41 +2393,67 @@ class ze {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollOptions !== void 0 && e === void 0 && (e = new re());
-    const o = new Ve(), r = new Le();
-    let s = new ce(
+    this.virtualScrollOptions !== void 0 && e === void 0 && (e = new he());
+    const o = new ce(), r = new Ie(), s = new ot(this.element);
+    let h = new ne(
       o,
       r,
-      this.element
+      s.main
     );
-    e !== void 0 && (s = new le(s, o, e));
-    const d = new Me(
+    e !== void 0 && (h = new ye(h, o, e));
+    const n = new de(
       this.element,
       o,
       r,
-      s,
+      h,
       this.canvasDefaults
-    );
-    return this.hasResizeReactiveNodes && G.configure(d), this.hasDraggableNode && J.configure(d, this.dragOptions), this.virtualScrollOptions !== void 0 ? K.configure(
-      d,
+    ), d = () => {
+      s.destroy(), n.onBeforeDestroy.unsubscribe(d);
+    };
+    return n.onBeforeDestroy.subscribe(d), this.hasBackground && Z.configure(
+      n,
+      this.backgroundOptions,
+      s.background
+    ), this.hasResizeReactiveNodes && J.configure(n), this.hasDraggableNode && K.configure(
+      n,
+      s.main,
+      this.window,
+      this.dragOptions
+    ), this.hasUserConnectablePorts && _.configure(
+      n,
+      s.overlay,
+      r,
+      this.window,
+      this.canvasDefaults,
+      this.connectablePortsOptions
+    ), this.virtualScrollOptions !== void 0 ? Q.configure(
+      n,
+      s.main,
+      this.window,
       this.transformOptions,
       e,
       this.virtualScrollOptions
-    ) : this.hasTransformableViewport && z.configure(
-      d,
+    ) : this.hasTransformableViewport && k.configure(
+      n,
+      s.main,
+      this.window,
       this.transformOptions
-    ), this.reset(), d;
+    ), this.reset(), n;
   }
+  /**
+   * @deprecated
+   * CanvasBuilder should be single use object
+   */
   reset() {
-    this.element = null, this.canvasDefaults = {}, this.dragOptions = {}, this.transformOptions = {}, this.virtualScrollOptions = void 0, this.hasDraggableNode = !1, this.hasTransformableViewport = !1, this.hasResizeReactiveNodes = !1, this.boxRenderingTrigger = void 0;
+    this.element = null, this.canvasDefaults = {}, this.dragOptions = {}, this.transformOptions = {}, this.backgroundOptions = {}, this.virtualScrollOptions = void 0, this.hasDraggableNode = !1, this.hasTransformableViewport = !1, this.hasResizeReactiveNodes = !1, this.hasBackground = !1, this.boxRenderingTrigger = void 0, this.hasUserConnectablePorts = !1;
   }
 }
 export {
-  Te as BezierEdgeShape,
-  ze as CanvasBuilder,
-  re as EventSubject,
-  be as HorizontalEdgeShape,
+  De as BezierEdgeShape,
+  it as CanvasBuilder,
+  he as EventSubject,
+  Me as HorizontalEdgeShape,
   S as HtmlGraphError,
-  Ne as StraightEdgeShape,
-  me as VerticalEdgeShape
+  Ce as StraightEdgeShape,
+  Ve as VerticalEdgeShape
 };