@html-graph/html-graph 3.17.0 → 3.18.0

package/dist/html-graph.js

@@ -1,23 +1,24 @@
 var Me = Object.defineProperty;
 var Le = (r, e, t) => e in r ? Me(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var o = (r, e, t) => Le(r, typeof e != "symbol" ? e + "" : e, t);
+const D = (r, e) => ({
+  x: r.scale * e.x + r.x,
+  y: r.scale * e.y + r.y
+});
+var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
 const Re = () => {
   const r = document.createElement("div");
-  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
+  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
 }, Ce = () => {
   const r = document.createElement("div");
-  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
+  return r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "0", r.style.height = "0", r;
 }, Ve = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, T = (r, e) => ({
-  x: r.scale * e.x + r.x,
-  y: r.scale * e.y + r.y
-});
-var L = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(L || {});
+};
 class pe {
   constructor(e, t, s) {
-    o(this, "host", Ce());
-    o(this, "container", Re());
+    o(this, "host", Re());
+    o(this, "container", Ce());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -90,7 +91,7 @@ class pe {
     const h = {
       x: s.left - i.left,
       y: s.top - i.top
-    }, a = T(n, h);
+    }, a = D(n, h);
     return {
       x: a.x,
       y: a.y,
@@ -102,7 +103,7 @@ class pe {
     };
   }
 }
-class Ue {
+class Ie {
   constructor(e) {
     o(this, "xFrom", 1 / 0);
     o(this, "yFrom", 1 / 0);
@@ -122,7 +123,7 @@ class Ue {
     return a <= this.xTo && d >= this.xFrom && c <= this.yTo && l >= this.yFrom;
   }
 }
-class Ie {
+class Ue {
   constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -146,7 +147,7 @@ class Ie {
         this.handleAttachEdge(h);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ue(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = s, this.params = i, this.renderingBox = new Ie(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -222,6 +223,10 @@ const A = () => {
 };
 class Be {
   constructor(e) {
+    /**
+     * @deprecated
+     * do not use
+     */
     o(this, "onBeforeUpdated");
     o(this, "onAfterUpdated");
     this.viewportStore = e, this.onBeforeUpdated = this.viewportStore.onBeforeUpdated, this.onAfterUpdated = this.viewportStore.onAfterUpdated;
@@ -427,6 +432,7 @@ class fe {
       this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.htmlView.clear();
     });
     o(this, "onBeforeDestroyEmitter");
+    o(this, "destroyed", !1);
     /**
      * emits event just before destruction of canvas
      */
@@ -577,13 +583,13 @@ class fe {
    * canvas element gets rolled back to initial state, and can not be reused
    */
   destroy() {
-    this.clear(), this.onBeforeDestroyEmitter.emit(), this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graphStore.onAfterNodePriorityUpdated.unsubscribe(
+    this.destroyed || (this.clear(), this.onBeforeDestroyEmitter.emit(), 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.htmlView.destroy();
+    ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy(), this.destroyed = !0);
   }
 }
 class $e {
@@ -626,7 +632,7 @@ class $e {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class ve {
+class me {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -824,6 +830,10 @@ class Fe {
     o(this, "afterUpdateEmitter");
     o(this, "onAfterUpdated");
     o(this, "beforeUpdateEmitter");
+    /**
+     * @deprecated
+     * do not use
+     */
     o(this, "onBeforeUpdated");
     [this.afterUpdateEmitter, this.onAfterUpdated] = A(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = A();
   }
@@ -848,7 +858,7 @@ class Fe {
     }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
-class H {
+class Y {
   constructor(e) {
     o(this, "elementToNodeId", /* @__PURE__ */ new Map());
     o(this, "nodesResizeObserver");
@@ -863,18 +873,15 @@ class H {
     o(this, "onBeforeClear", () => {
       this.nodesResizeObserver.disconnect(), this.elementToNodeId.clear();
     });
-    o(this, "onBeforeDestroy", () => {
-      this.canvas.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
-    });
     this.canvas = e, this.nodesResizeObserver = new ResizeObserver((t) => {
       t.forEach((s) => {
         const i = s.target;
         this.handleNodeResize(i);
       });
-    }), 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);
+    }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear);
   }
   static configure(e) {
-    new H(e);
+    new Y(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
@@ -884,7 +891,7 @@ class H {
 const Oe = (r, e, t) => {
   const { x: s, y: i, width: n, height: h } = r.getBoundingClientRect();
   return e >= s && e <= s + n && t >= i && t <= i + h;
-}, ke = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => Oe(e, t, s) && ke(r, t, s), I = (r, e) => {
+}, ke = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, R = (r, e, t, s) => Oe(e, t, s) && ke(r, t, s), U = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
 }, B = (r) => {
   const e = document.createElement("div");
@@ -906,7 +913,7 @@ const Oe = (r, e, t) => {
   for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
     t = t.parentElement;
   return s;
-}, me = (r, e) => {
+}, ye = (r, e) => {
   const t = document.elementsFromPoint(e.x, e.y);
   for (const s of t) {
     const i = ze(r, s);
@@ -916,28 +923,28 @@ const Oe = (r, e, t) => {
   return null;
 };
 var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
-const ye = (r, e) => ({
+const ve = (r, e) => ({
   x: r / 2,
   y: e / 2
-}), m = (r, e, t) => ({
+}), y = (r, e, t) => ({
   x: e.x * r.x - e.y * r.y + ((1 - e.x) * t.x + e.y * t.y),
   y: e.y * r.x + e.x * r.y + ((1 - e.x) * t.y - e.y * t.x)
 }), w = {
   x: 0,
   y: 0
 };
-class Xe {
+class He {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = m(
+    const s = y(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ), i = m(
+    ), i = y(
       { x: this.params.to.x - this.params.arrowLength, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -955,30 +962,30 @@ const Ee = (r, e, t, s) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
-class Ye {
+class Xe {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    const t = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, s = this.params.hasTargetArrow ? m(
+    ) : w, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, a = n * this.params.flipX, d = h * this.params.flipY, c = m(
+    ) : this.params.to, i = this.params.arrowLength, n = Math.cos(this.params.detourDirection) * this.params.detourDistance, h = Math.sin(this.params.detourDirection) * this.params.detourDistance, a = n * this.params.flipX, d = h * this.params.flipY, c = y(
       { x: i, y: w.y },
       this.params.sourceDirection,
       w
     ), l = {
       x: c.x + a,
       y: c.y + d
-    }, g = m(
+    }, g = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -988,10 +995,10 @@ class Ye {
     }, f = {
       x: (l.x + p.x) / 2,
       y: (l.y + p.y) / 2
-    }, v = {
+    }, m = {
       x: c.x + this.params.curvature * this.params.sourceDirection.x,
       y: c.y + this.params.curvature * this.params.sourceDirection.y
-    }, y = {
+    }, v = {
       x: g.x - this.params.curvature * this.params.targetDirection.x,
       y: g.y - this.params.curvature * this.params.targetDirection.y
     }, E = {
@@ -1004,8 +1011,8 @@ class Ye {
     this.path = [
       `M ${t.x} ${t.y}`,
       `L ${c.x} ${c.y}`,
-      `C ${v.x} ${v.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
-      `C ${x.x} ${x.y} ${y.x} ${y.y} ${g.x} ${g.y}`,
+      `C ${m.x} ${m.y} ${E.x} ${E.y} ${f.x} ${f.y}`,
+      `C ${x.x} ${x.y} ${v.x} ${v.y} ${g.x} ${g.y}`,
       `L ${s.x} ${s.y}`
     ].join(" "), this.midpoint = Ee(f, e.flipX, e.flipY, e.to);
   }
@@ -1017,42 +1024,42 @@ const V = (r, e) => {
     let i = 0, n = 0, h = 0;
     r.forEach((a, d) => {
       let c = 0, l = 0, g = 0;
-      const p = d > 0, f = d < s, v = p && f;
+      const p = d > 0, f = d < s, m = p && f;
       if (p && (c = -i, l = -n, g = h), f) {
         const C = r[d + 1];
         i = C.x - a.x, n = C.y - a.y, h = Math.sqrt(i * i + n * n);
       }
-      const E = h !== 0 ? Math.min((v ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = v ? { x: a.x + i * E, y: a.y + n * E } : a, D = g !== 0 ? Math.min((v ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = v ? { x: a.x + c * D, y: a.y + l * D } : a;
-      d > 0 && t.push(`L ${N.x} ${N.y}`), v && t.push(
+      const E = h !== 0 ? Math.min((m ? e : 0) / h, d < s - 1 ? 0.5 : 1) : 0, x = m ? { x: a.x + i * E, y: a.y + n * E } : a, T = g !== 0 ? Math.min((m ? e : 0) / g, d > 1 ? 0.5 : 1) : 0, N = m ? { x: a.x + c * T, y: a.y + l * T } : a;
+      d > 0 && t.push(`L ${N.x} ${N.y}`), m && t.push(
         `C ${a.x} ${a.y} ${a.x} ${a.y} ${x.x} ${x.y}`
       );
     });
   }
   return t.join(" ");
 };
-class He {
+class Ye {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, i = this.params.hasTargetArrow ? m(
+    ) : w, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = y(
       { x: h, y: w.y },
       this.params.sourceDirection,
       w
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - h, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1062,9 +1069,9 @@ class He {
     }, p = { x: g.x, y: l }, f = {
       x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
       y: d.y
-    }, v = { x: f.x, y: l };
+    }, m = { x: f.x, y: l };
     this.path = V(
-      [s, a, g, p, v, f, d, i],
+      [s, a, g, p, m, f, d, i],
       this.params.roundness
     );
   }
@@ -1074,22 +1081,22 @@ class j {
     o(this, "path");
     o(this, "midpoint");
     this.params = e;
-    const t = this.params.hasSourceArrow ? m(
+    const t = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, s = this.params.hasTargetArrow ? m(
+    ) : w, s = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = m(
+    ) : this.params.to, i = this.params.arrowLength + this.params.arrowOffset, n = y(
       { x: i, y: w.y },
       this.params.sourceDirection,
       w
-    ), h = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = h * this.params.flipX, c = a * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = m(
+    ), h = Math.cos(this.params.detourDirection) * this.params.detourDistance, a = Math.sin(this.params.detourDirection) * this.params.detourDistance, d = h * this.params.flipX, c = a * this.params.flipY, l = { x: n.x + d, y: n.y + c }, g = y(
       { x: this.params.to.x - i, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1107,22 +1114,22 @@ class je {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, i = this.params.hasTargetArrow ? m(
+    ) : w, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = y(
       { x: n, y: w.y },
       this.params.sourceDirection,
       w
-    ), a = m(
+    ), a = y(
       { x: this.params.to.x - n, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1137,22 +1144,22 @@ class Ge {
     this.params = e;
     const t = this.params.to;
     this.midpoint = { x: t.x / 2, y: t.y / 2 };
-    const s = this.params.hasSourceArrow ? m(
+    const s = this.params.hasSourceArrow ? y(
       { x: this.params.arrowLength, y: w.y },
       this.params.sourceDirection,
       w
-    ) : w, i = this.params.hasTargetArrow ? m(
+    ) : w, i = this.params.hasTargetArrow ? y(
       {
         x: this.params.to.x - this.params.arrowLength,
         y: this.params.to.y
       },
       this.params.targetDirection,
       this.params.to
-    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = m(
+    ) : this.params.to, n = this.params.arrowLength + this.params.arrowOffset, h = n - this.params.roundness, a = y(
       { x: h, y: w.y },
       this.params.sourceDirection,
       w
-    ), d = m(
+    ), d = y(
       { x: this.params.to.x - h, y: this.params.to.y },
       this.params.targetDirection,
       this.params.to
@@ -1162,9 +1169,9 @@ class Ge {
     }, p = { x: l, y: g.y }, f = {
       x: d.x,
       y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
-    }, v = { x: l, y: f.y };
+    }, m = { x: l, y: f.y };
     this.path = V(
-      [s, a, g, p, v, f, d, i],
+      [s, a, g, p, m, f, d, i],
       this.params.roundness
     );
   }
@@ -1184,7 +1191,7 @@ class G {
       { x: i, y: w.y },
       { x: this.params.arrowLength, y: w.y }
     ].map(
-      (c) => m(c, this.params.sourceDirection, w)
+      (c) => y(c, this.params.sourceDirection, w)
     ), d = `M ${w.x} ${w.y} L ${a[0].x} ${a[0].y} `;
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : d}${V(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
   }
@@ -1200,7 +1207,7 @@ class Ke {
       { x: c, y: -n },
       { x: d, y: 0 }
     ].map(
-      (v) => m(v, this.params.sourceDirection, w)
+      (m) => y(m, this.params.sourceDirection, w)
     ), p = [
       `M ${g[0].x} ${g[0].y}`,
       `A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,
@@ -1283,7 +1290,7 @@ const Ae = (r, e) => {
     w,
     { x: t, y: s },
     { x: t, y: -s }
-  ].map((c) => m(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
+  ].map((c) => y(c, r, w)).map((c) => ({ x: c.x + e.x, y: c.y + e.y })), h = `M ${n[0].x} ${n[0].y}`, a = `L ${n[1].x} ${n[1].y}`, d = `L ${n[2].x} ${n[2].y}`;
   return `${h} ${a} ${d} Z`;
 }, u = Object.freeze({
   color: "#777777",
@@ -1335,21 +1342,21 @@ class $ {
     };
     let g = c, p = -this.params.arrowLength, f;
     e.category === L.PortCycle ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.category === L.NodeCycle ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const v = f(
+    const m = f(
       d,
       c,
       l,
       h,
       a
     );
-    this.line.setAttribute("d", v.path);
-    let y = null;
-    this.sourceArrow && (y = z(
+    this.line.setAttribute("d", m.path);
+    let v = null;
+    this.sourceArrow && (v = z(
       d,
       w,
       this.params.arrowLength,
       this.params.arrowWidth
-    ), this.sourceArrow.setAttribute("d", y));
+    ), this.sourceArrow.setAttribute("d", v));
     let E = null;
     this.targetArrow && (E = z(
       g,
@@ -1357,8 +1364,8 @@ class $ {
       p,
       this.params.arrowWidth
     ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: v,
-      sourceArrowPath: y,
+      edgePath: m,
+      sourceArrowPath: v,
       targetArrowPath: E
     });
   }
@@ -1389,7 +1396,7 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new Ye({
+    o(this, "createDetourPath", (e, t, s, i, n) => new Xe({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1402,7 +1409,7 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new Xe({
+    o(this, "createLinePath", (e, t, s) => new He({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1468,7 +1475,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i) => new He({
+    o(this, "createLinePath", (e, t, s, i) => new Ye({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1787,9 +1794,9 @@ class bt {
   }
 }
 const Ne = (r, e) => {
-  const t = new ve(), s = new pe(t, e, r), i = {
+  const t = new me(), s = new pe(t, e, r), i = {
     nodes: {
-      centerFn: ye,
+      centerFn: ve,
       priorityFn: () => 0
     },
     edges: {
@@ -1808,11 +1815,117 @@ const Ne = (r, e) => {
     i
   );
 };
+class F {
+  constructor(e, t, s, i) {
+    o(this, "onAfterPortMarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
+    });
+    o(this, "onBeforePortUnmarked", (e) => {
+      const t = this.canvas.graph.getPort(e);
+      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
+    });
+    o(this, "onPortMouseDown", (e) => {
+      if (!this.params.mouseDownEventVerifier(e))
+        return;
+      const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
+      this.params.onPortPointerDown(s, {
+        x: e.clientX,
+        y: e.clientY
+      }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+        passive: !0
+      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+        passive: !0
+      }));
+    });
+    o(this, "onWindowMouseMove", (e) => {
+      if (!R(
+        this.window,
+        this.element,
+        e.clientX,
+        e.clientY
+      )) {
+        this.stopMouseDrag();
+        return;
+      }
+      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
+    });
+    o(this, "onWindowMouseUp", (e) => {
+      this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
+    });
+    o(this, "onPortTouchStart", (e) => {
+      if (e.touches.length !== 1)
+        return;
+      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
+      this.params.onPortPointerDown(i, {
+        x: t.clientX,
+        y: t.clientY
+      }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+        passive: !0
+      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
+        passive: !0
+      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
+        passive: !0
+      }));
+    });
+    o(this, "onWindowTouchMove", (e) => {
+      const t = e.touches[0];
+      if (!R(
+        this.window,
+        this.element,
+        t.clientX,
+        t.clientY
+      )) {
+        this.stopTouchDrag();
+        return;
+      }
+      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
+    });
+    o(this, "onWindowTouchFinish", (e) => {
+      const t = e.changedTouches[0];
+      this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
+    });
+    o(this, "onBeforeClear", () => {
+      this.canvas.graph.getAllPortIds().forEach((e) => {
+        const t = this.canvas.graph.getPort(e);
+        this.unhookPortEvents(t.element);
+      });
+    });
+    o(this, "onBeforeDestroy", () => {
+      this.params.onStopDrag(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
+    });
+    this.canvas = e, this.element = t, this.window = s, this.params = i, 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, t, s, i) {
+    new F(e, t, s, i);
+  }
+  hookPortEvents(e) {
+    e.addEventListener("mousedown", this.onPortMouseDown, {
+      passive: !0
+    }), e.addEventListener("touchstart", this.onPortTouchStart, {
+      passive: !0
+    });
+  }
+  unhookPortEvents(e) {
+    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
+  }
+  stopMouseDrag() {
+    this.params.onStopDrag(), this.removeWindowMouseListeners();
+  }
+  stopTouchDrag() {
+    this.params.onStopDrag(), this.removeWindowTouchListeners();
+  }
+  removeWindowMouseListeners() {
+    this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
+  }
+  removeWindowTouchListeners() {
+    this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
+  }
+}
 class Z {
   constructor(e, t, s, i) {
-    o(this, "grabbedNodeId", null);
+    o(this, "grabbedNode", null);
     o(this, "maxNodePriority", 0);
-    o(this, "previousTouchCoordinates", null);
     o(this, "graph");
     o(this, "onAfterNodeAdded", (e) => {
       this.updateMaxNodePriority(e);
@@ -1831,7 +1944,7 @@ class Z {
       t.element.removeEventListener("mousedown", this.onMouseDown), t.element.removeEventListener("touchstart", this.onTouchStart);
     });
     o(this, "onBeforeDestroy", () => {
-      this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.unsubscribe(this.onBeforeClear), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy), this.removeMouseDragListeners(), this.removeTouchDragListeners();
+      this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     o(this, "onBeforeClear", () => {
       this.canvas.graph.getAllNodeIds().forEach((e) => {
@@ -1840,40 +1953,58 @@ class Z {
       }), this.maxNodePriority = 0;
     });
     o(this, "onMouseDown", (e) => {
-      if (!this.config.mouseDownEventVerifier(e))
+      if (!this.params.mouseDownEventVerifier(e))
         return;
       const t = e.currentTarget, s = this.graph.getElementNodeId(t), i = this.graph.getNode(s);
-      this.config.onBeforeNodeDrag({
+      if (!this.params.onBeforeNodeDrag({
         nodeId: s,
         element: i.element,
         x: i.x,
         y: i.y
-      }) && (e.stopImmediatePropagation(), this.grabbedNodeId = s, I(this.element, this.config.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
+      }))
+        return;
+      e.stopPropagation();
+      const h = this.calculateContentPoint({
+        x: e.clientX,
+        y: e.clientY
+      });
+      this.grabbedNode = {
+        nodeId: s,
+        dx: h.x - i.x,
+        dy: h.y - i.y
+      }, U(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
-      }), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
-      }));
+      });
     });
     o(this, "onTouchStart", (e) => {
       if (e.touches.length !== 1)
         return;
-      e.stopImmediatePropagation(), this.previousTouchCoordinates = {
-        x: e.touches[0].clientX,
-        y: e.touches[0].clientY
-      };
-      const t = e.currentTarget, s = this.canvas.graph.getElementNodeId(t), i = this.graph.getNode(s);
-      this.config.onBeforeNodeDrag({
-        nodeId: s,
-        element: i.element,
-        x: i.x,
-        y: i.y
-      }) && (this.grabbedNodeId = s, this.moveNodeOnTop(s), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      e.stopPropagation();
+      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementNodeId(s), n = this.graph.getNode(i);
+      if (!this.params.onBeforeNodeDrag({
+        nodeId: i,
+        element: n.element,
+        x: n.x,
+        y: n.y
+      }))
+        return;
+      const a = this.calculateContentPoint({
+        x: t.clientX,
+        y: t.clientY
+      });
+      this.grabbedNode = {
+        nodeId: i,
+        dx: a.x - n.x,
+        dy: a.y - n.y
+      }, this.moveNodeOnTop(i), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
       }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
         passive: !0
-      }));
+      });
     });
     o(this, "onWindowMouseMove", (e) => {
       if (!R(
@@ -1885,10 +2016,13 @@ class Z {
         this.cancelMouseDrag();
         return;
       }
-      this.grabbedNodeId !== null && this.dragNode(this.grabbedNodeId, e.movementX, e.movementY);
+      this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
+        x: e.clientX,
+        y: e.clientY
+      });
     });
     o(this, "onWindowMouseUp", (e) => {
-      this.config.mouseUpEventVerifier(e) && this.cancelMouseDrag();
+      this.params.mouseUpEventVerifier(e) && this.cancelMouseDrag();
     });
     o(this, "onWindowTouchMove", (e) => {
       if (e.touches.length !== 1)
@@ -1903,43 +2037,40 @@ class Z {
         this.cancelTouchDrag();
         return;
       }
-      if (this.grabbedNodeId !== null && this.previousTouchCoordinates !== null) {
-        const i = t.clientX - this.previousTouchCoordinates.x, n = t.clientY - this.previousTouchCoordinates.y;
-        this.dragNode(this.grabbedNodeId, i, n), this.previousTouchCoordinates = {
-          x: e.touches[0].clientX,
-          y: e.touches[0].clientY
-        };
-      }
+      this.grabbedNode !== null && this.moveNode(this.grabbedNode, {
+        x: t.clientX,
+        y: t.clientY
+      });
     });
     o(this, "onWindowTouchFinish", () => {
-      this.previousTouchCoordinates = null, this.cancelTouchDrag();
+      this.cancelTouchDrag();
     });
-    this.canvas = e, this.element = t, this.window = s, this.config = i, 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);
+    this.canvas = e, this.element = t, this.window = s, this.params = i, 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, t, s, i) {
     new Z(e, t, s, i);
   }
-  dragNode(e, t, s) {
-    const i = this.graph.getNode(e);
-    if (i === null)
+  moveNode(e, t) {
+    const s = this.graph.getNode(e.nodeId);
+    if (s === null)
       return;
-    const n = this.canvas.viewport.getContentMatrix(), h = T(n, {
-      x: i.x,
-      y: i.y
-    }), a = T(
-      { scale: 1, x: t, y: s },
-      h
-    ), d = this.canvas.viewport.getViewportMatrix(), c = T(d, a);
-    this.canvas.updateNode(e, { x: c.x, y: c.y }), this.config.onNodeDrag({
-      nodeId: e,
-      element: i.element,
-      x: c.x,
-      y: c.y
+    const i = this.calculateContentPoint(t), n = {
+      x: i.x - e.dx,
+      y: i.y - e.dy
+    }, h = this.adjustNodeCoords(n);
+    this.canvas.updateNode(e.nodeId, {
+      x: h.x,
+      y: h.y
+    }), this.params.onNodeDrag({
+      nodeId: e.nodeId,
+      element: s.element,
+      x: h.x,
+      y: h.y
     });
   }
   moveNodeOnTop(e) {
-    if (this.config.moveOnTop) {
-      if (this.maxNodePriority++, this.config.moveEdgesOnTop) {
+    if (this.params.moveOnTop) {
+      if (this.maxNodePriority++, this.params.moveEdgesOnTop) {
         const t = this.maxNodePriority;
         this.maxNodePriority++, this.graph.getNodeAdjacentEdgeIds(e).forEach((i) => {
           this.canvas.updateEdge(i, { priority: t });
@@ -1949,26 +2080,31 @@ class Z {
     }
   }
   cancelMouseDrag() {
-    const e = this.graph.getNode(this.grabbedNodeId);
-    e !== null && this.config.onNodeDragFinished({
-      nodeId: this.grabbedNodeId,
-      element: e.element,
-      x: e.x,
-      y: e.y
-    }), this.grabbedNodeId = null, I(this.element, null), this.removeMouseDragListeners();
+    if (this.grabbedNode !== null) {
+      const e = this.graph.getNode(this.grabbedNode.nodeId);
+      e !== null && this.params.onNodeDragFinished({
+        nodeId: this.grabbedNode.nodeId,
+        element: e.element,
+        x: e.x,
+        y: e.y
+      });
+    }
+    this.grabbedNode = null, U(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
   }
   cancelTouchDrag() {
-    this.previousTouchCoordinates = null;
-    const e = this.graph.getNode(this.grabbedNodeId);
-    e !== null && this.config.onNodeDragFinished({
-      nodeId: this.grabbedNodeId,
-      element: e.element,
-      x: e.x,
-      y: e.y
-    }), this.grabbedNodeId = null, this.removeTouchDragListeners();
+    if (this.grabbedNode !== null) {
+      const e = this.graph.getNode(this.grabbedNode.nodeId);
+      e !== null && this.params.onNodeDragFinished({
+        nodeId: this.grabbedNode.nodeId,
+        element: e.element,
+        x: e.x,
+        y: e.y
+      });
+    }
+    this.grabbedNode = null, this.removeTouchDragListeners();
   }
   removeTouchDragListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
@@ -1977,6 +2113,24 @@ class Z {
     const t = this.graph.getNode(e).priority;
     this.maxNodePriority = Math.max(this.maxNodePriority, t);
   }
+  calculateContentPoint(e) {
+    const t = this.element.getBoundingClientRect(), s = {
+      x: e.x - t.x,
+      y: e.y - t.y
+    }, i = this.canvas.viewport.getViewportMatrix();
+    return D(i, s);
+  }
+  adjustNodeCoords(e) {
+    const t = this.params.gridSize;
+    if (t !== null) {
+      const s = t / 2;
+      return {
+        x: Math.floor((e.x + s) / t) * t,
+        y: Math.floor((e.y + s) / t) * t
+      };
+    }
+    return e;
+  }
 }
 const ot = (r, e, t) => ({
   scale: r.scale,
@@ -1986,7 +2140,7 @@ const ot = (r, e, t) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
-}), U = (r) => {
+}), I = (r) => {
   const e = [], t = r.touches.length;
   for (let a = 0; a < t; a++)
     e.push([r.touches[a].clientX, r.touches[a].clientY]);
@@ -2005,17 +2159,17 @@ const ot = (r, e, t) => ({
     touches: e
   };
 };
-class F {
+class O {
   constructor(e, t, s, i) {
     o(this, "viewport");
     o(this, "prevTouches", null);
     o(this, "wheelFinishTimer", null);
     o(this, "transformInProgress", !1);
     o(this, "onBeforeDestroy", () => {
-      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.element.removeEventListener("wheel", this.preventWheelScaleListener), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
+      this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     o(this, "onMouseDown", (e) => {
-      this.element === null || !this.params.mouseDownEventVerifier(e) || (I(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.element === null || !this.params.mouseDownEventVerifier(e) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2048,10 +2202,10 @@ class F {
     });
     o(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = U(e);
+        this.prevTouches = I(e);
         return;
       }
-      this.prevTouches = U(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = I(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2060,7 +2214,7 @@ class F {
       }), this.startRegisteredTransform();
     });
     o(this, "onWindowTouchMove", (e) => {
-      const t = U(e);
+      const t = I(e);
       if (!t.touches.every(
         (i) => R(this.window, this.element, i[0], i[1])
       )) {
@@ -2077,7 +2231,7 @@ class F {
       this.prevTouches = t;
     });
     o(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = U(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = I(e) : this.stopTouchDrag();
     });
     o(this, "observer", new ResizeObserver(() => {
       const e = this.viewport.getViewportMatrix(), { width: t, height: s } = this.element.getBoundingClientRect(), i = this.params.transformPreprocessor({
@@ -2102,7 +2256,7 @@ class F {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new F(e, t, s, i);
+    new O(e, t, s, i);
   }
   moveViewport(e, t) {
     const s = this.viewport.getViewportMatrix(), i = ot(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
@@ -2123,7 +2277,7 @@ class F {
     this.performTransform(d);
   }
   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);
@@ -2167,11 +2321,6 @@ class J {
         yTo: e.y + e.height
       };
     });
-    o(this, "onBeforeDestroy", () => {
-      this.trigger.unsubscribe(this.updateLoadedArea), this.canvasResizeObserver.unobserve(this.element), this.canvas.viewport.onAfterUpdated.unsubscribe(
-        this.onAfterViewportUpdated
-      ), this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy);
-    });
     o(this, "onAfterViewportUpdated", () => {
       this.userTransformInProgress || (this.viewportMatrix = this.viewport.getViewportMatrix(), this.loadAreaAroundViewport());
     });
@@ -2200,12 +2349,12 @@ class J {
         this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
       }
     };
-    F.configure(
+    O.configure(
       e,
       this.element,
       this.window,
       a
-    ), 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);
+    ), this.viewportMatrix = this.viewport.getViewportMatrix(), this.trigger.subscribe(this.updateLoadedArea), this.canvasResizeObserver.observe(this.element), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
   static configure(e, t, s, i, n, h) {
     new J(
@@ -2266,126 +2415,18 @@ class Q {
       const e = this.canvas.viewport.getContentMatrix(), t = e.x - this.halfTileWidth * e.scale, s = e.y - this.halfTileHeight * e.scale, i = `matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${s})`;
       this.pattern.setAttribute("patternTransform", i), this.updateVisibility();
     });
-    o(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 = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
+    this.canvas = e, this.backgroundHost = s, this.tileWidth = t.tileWidth, this.tileHeight = t.tileHeight, this.halfTileWidth = this.tileWidth / 2, this.halfTileHeight = this.tileHeight / 2, this.patternContent = t.renderer, this.maxViewportScale = t.maxViewportScale;
     const i = `translate(${this.halfTileWidth}, ${this.halfTileHeight})`;
     this.patternContent.setAttribute("transform", i), 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);
+    n.appendChild(this.pattern), this.svg.appendChild(n), this.svg.appendChild(this.patternRenderingRectangle), this.resizeObserver.observe(this.backgroundHost), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, s) {
     new Q(e, t, s);
   }
   updateVisibility() {
     const t = this.canvas.viewport.getViewportMatrix().scale > this.maxViewportScale;
-    t && this.visible ? (this.visible = !1, this.host.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.host.appendChild(this.svg));
-  }
-}
-class O {
-  constructor(e, t, s, i) {
-    o(this, "onAfterPortMarked", (e) => {
-      const t = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.hookPortEvents(t.element);
-    });
-    o(this, "onBeforePortUnmarked", (e) => {
-      const t = this.canvas.graph.getPort(e);
-      this.canvas.graph.getElementPortIds(t.element).length === 1 && this.unhookPortEvents(t.element);
-    });
-    o(this, "onPortMouseDown", (e) => {
-      if (!this.params.mouseDownEventVerifier(e))
-        return;
-      const t = e.currentTarget, s = this.canvas.graph.getElementPortIds(t)[0];
-      this.params.onPortPointerDown(s, {
-        x: e.clientX,
-        y: e.clientY
-      }) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
-        passive: !0
-      }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
-        passive: !0
-      }));
-    });
-    o(this, "onWindowMouseMove", (e) => {
-      if (!R(
-        this.window,
-        this.element,
-        e.clientX,
-        e.clientY
-      )) {
-        this.stopMouseDrag();
-        return;
-      }
-      this.params.onPointerMove({ x: e.clientX, y: e.clientY });
-    });
-    o(this, "onWindowMouseUp", (e) => {
-      this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
-    });
-    o(this, "onPortTouchStart", (e) => {
-      if (e.touches.length !== 1)
-        return;
-      const t = e.touches[0], s = e.currentTarget, i = this.canvas.graph.getElementPortIds(s)[0];
-      this.params.onPortPointerDown(i, {
-        x: t.clientX,
-        y: t.clientY
-      }) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
-        passive: !0
-      }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
-        passive: !0
-      }), this.window.addEventListener("touchcancel", this.onWindowTouchFinish, {
-        passive: !0
-      }));
-    });
-    o(this, "onWindowTouchMove", (e) => {
-      const t = e.touches[0];
-      if (!R(
-        this.window,
-        this.element,
-        t.clientX,
-        t.clientY
-      )) {
-        this.stopTouchDrag();
-        return;
-      }
-      this.params.onPointerMove({ x: t.clientX, y: t.clientY });
-    });
-    o(this, "onWindowTouchFinish", (e) => {
-      const t = e.changedTouches[0];
-      this.params.onPointerUp({ x: t.clientX, y: t.clientY }), this.stopTouchDrag();
-    });
-    o(this, "onBeforeClear", () => {
-      this.canvas.graph.getAllPortIds().forEach((e) => {
-        const t = this.canvas.graph.getPort(e);
-        this.unhookPortEvents(t.element);
-      });
-    });
-    o(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);
-    });
-    this.canvas = e, this.element = t, this.window = s, this.params = i, 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, t, s, i) {
-    new O(e, t, s, i);
-  }
-  hookPortEvents(e) {
-    e.addEventListener("mousedown", this.onPortMouseDown, {
-      passive: !0
-    }), e.addEventListener("touchstart", this.onPortTouchStart, {
-      passive: !0
-    });
-  }
-  unhookPortEvents(e) {
-    e.removeEventListener("mousedown", this.onPortMouseDown), e.removeEventListener("touchstart", this.onPortTouchStart);
-  }
-  stopMouseDrag() {
-    this.params.onStopDrag(), this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
-  }
-  stopTouchDrag() {
-    this.params.onStopDrag(), this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
+    t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
   }
 }
 class _ {
@@ -2399,7 +2440,7 @@ class _ {
     this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
-    ), O.configure(
+    ), F.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2434,10 +2475,10 @@ class _ {
   grabPort(e, t, s) {
     const i = this.canvas.graph.getPort(e);
     this.staticPortId = e;
-    const n = i.element.getBoundingClientRect(), h = n.x + n.width / 2, a = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = T(c, {
+    const n = i.element.getBoundingClientRect(), h = n.x + n.width / 2, a = n.y + n.height / 2, d = this.overlayLayer.getBoundingClientRect(), c = this.canvas.viewport.getViewportMatrix(), l = D(c, {
       x: h - d.x,
       y: a - d.y
-    }), g = T(c, {
+    }), g = D(c, {
       x: t.x - d.x,
       y: t.y - d.y
     }), p = {
@@ -2450,10 +2491,10 @@ class _ {
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [v, y] = this.isTargetDragging ? [p, f] : [f, p];
-    this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addNode(B(y)), this.overlayCanvas.addEdge({
-      from: v.overlayId,
-      to: y.overlayId,
+    const [m, v] = this.isTargetDragging ? [p, f] : [f, p];
+    this.overlayCanvas.addNode(B(m)), this.overlayCanvas.addNode(B(v)), this.overlayCanvas.addEdge({
+      from: m.overlayId,
+      to: v.overlayId,
       shape: this.params.edgeShapeFactory(P.Edge)
     });
   }
@@ -2461,7 +2502,7 @@ class _ {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = me(this.canvas.graph, e);
+    const t = ye(this.canvas.graph, e);
     if (t === null) {
       this.params.onEdgeCreationInterrupted(
         this.staticPortId,
@@ -2476,7 +2517,7 @@ class _ {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
+    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
     this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
@@ -2495,7 +2536,7 @@ class q {
     this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
-    ), O.configure(
+    ), F.configure(
       this.canvas,
       this.overlayLayer,
       this.window,
@@ -2536,10 +2577,10 @@ class q {
     const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(a), l = c.element.getBoundingClientRect(), g = {
       x: l.x + l.width / 2,
       y: l.y + l.height / 2
-    }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), v = T(p, {
+    }, p = this.canvas.viewport.getViewportMatrix(), f = this.overlayLayer.getBoundingClientRect(), m = D(p, {
       x: g.x - f.x,
       y: g.y - f.y
-    }), y = T(p, {
+    }), v = D(p, {
       x: t.x - f.x,
       y: t.y - f.y
     });
@@ -2552,19 +2593,19 @@ class q {
     }, this.canvas.removeEdge(s);
     const E = {
       overlayId: P.Static,
-      portCoords: v,
+      portCoords: m,
       portDirection: c.direction
     }, x = {
       overlayId: P.Dragging,
-      portCoords: y,
+      portCoords: v,
       portDirection: d.direction
-    }, [b, D] = this.isTargetDragging ? [E, x] : [x, E];
-    this.overlayCanvas.addNode(B(b)), this.overlayCanvas.addNode(B(D));
+    }, [b, T] = this.isTargetDragging ? [E, x] : [x, E];
+    this.overlayCanvas.addNode(B(b)), this.overlayCanvas.addNode(B(T));
     const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(P.Edge) : i.shape;
     return this.overlayCanvas.addEdge({
       id: P.Edge,
       from: b.overlayId,
-      to: D.overlayId,
+      to: T.overlayId,
       shape: N
     }), !0;
   }
@@ -2575,14 +2616,14 @@ class q {
     const t = this.overlayLayer.getBoundingClientRect(), s = {
       x: e.x - t.x,
       y: e.y - t.y
-    }, i = this.canvas.viewport.getViewportMatrix(), n = T(i, s);
+    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
     this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
   tryCreateConnection(e) {
-    const t = me(this.canvas.graph, e);
+    const t = ye(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -2618,17 +2659,17 @@ class q {
 const at = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, X = () => {
+}, H = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
 }, ce = () => {
-  const r = X();
+  const r = H();
   return r.style.pointerEvents = "none", r;
 };
 class dt {
   constructor(e) {
-    o(this, "background", X());
-    o(this, "main", X());
+    o(this, "background", H());
+    o(this, "main", H());
     o(this, "overlayConnectablePorts", ce());
     o(this, "overlayDraggableEdges", ce());
     o(this, "host", at());
@@ -2638,13 +2679,13 @@ class dt {
     this.host.removeChild(this.background), this.host.removeChild(this.main), this.host.removeChild(this.overlayConnectablePorts), this.host.removeChild(this.overlayDraggableEdges), this.element.removeChild(this.host);
   }
 }
-const Y = (r) => () => r, ge = Y(0), ct = () => {
+const X = (r) => () => r, ge = X(0), ct = () => {
   let r = 0;
   return () => r++;
 }, gt = (r, e) => {
   let t = ge, s = ge;
   const i = ct();
-  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = Y(r)), typeof e == "number" && (s = Y(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
+  return r === "incremental" && (t = i), e === "incremental" && (s = i), typeof r == "number" && (t = X(r)), typeof e == "number" && (s = X(e)), typeof r == "function" && (t = r), typeof e == "function" && (s = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: s
   };
@@ -2728,7 +2769,7 @@ const Y = (r) => () => r, ge = Y(0), ct = () => {
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? ye,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? ve,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
@@ -2740,16 +2781,17 @@ const Y = (r) => () => r, ge = Y(0), ct = () => {
     }
   };
 }, ut = (r) => {
-  var p, f, v, y, E, x;
-  const e = ((p = r == null ? void 0 : r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
-  }), t = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onNodeDragFinished) ?? (() => {
-  }), i = (r == null ? void 0 : r.moveOnTop) !== !1, n = (r == null ? void 0 : r.moveEdgesOnTop) !== !1 && i, h = (y = r == null ? void 0 : r.mouse) == null ? void 0 : y.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r == null ? void 0 : r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
+  var p, f, m, v, E, x;
+  const e = ((p = r.events) == null ? void 0 : p.onNodeDrag) ?? (() => {
+  }), t = ((f = r.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), s = ((m = r.events) == null ? void 0 : m.onNodeDragFinished) ?? (() => {
+  }), i = r.moveOnTop !== !1, n = r.moveEdgesOnTop !== !1 && i, h = (v = r.mouse) == null ? void 0 : v.dragCursor, a = h !== void 0 ? h : "grab", d = (E = r.mouse) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (b) => b.button === 0, l = (x = r.mouse) == null ? void 0 : x.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0;
   return {
     moveOnTop: i,
     moveEdgesOnTop: n,
     dragCursor: a,
+    gridSize: r.gridSize ?? null,
     mouseDownEventVerifier: c,
-    mouseUpEventVerifier: l !== void 0 ? l : (b) => b.button === 0,
+    mouseUpEventVerifier: g,
     onNodeDrag: e,
     onBeforeNodeDrag: t,
     onNodeDragFinished: s
@@ -2811,17 +2853,17 @@ const Y = (r) => () => r, ge = Y(0), ct = () => {
       });
   }
 }, ue = (r) => {
-  var v, y, E, x, b, D, N, C, te, re, oe, se;
-  const e = (v = r == null ? void 0 : r.scale) == null ? void 0 : v.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
+  var m, v, E, x, b, T, N, C, te, re, oe, se;
+  const e = (m = r == null ? void 0 : r.scale) == null ? void 0 : m.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
   let i;
   s !== void 0 ? Array.isArray(s) ? i = ft(
     s.map(
       (M) => le(M)
     )
   ) : i = le(s) : i = (M) => M.nextTransform;
-  const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
+  const n = ((v = r == null ? void 0 : r.shift) == null ? void 0 : v.cursor) !== void 0 ? r.shift.cursor : "grab", h = ((E = r == null ? void 0 : r.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), a = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (D = r == null ? void 0 : r.shift) == null ? void 0 : D.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
+  }), d = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseDownEventVerifier, c = d !== void 0 ? d : (M) => M.button === 0, l = (T = r == null ? void 0 : r.shift) == null ? void 0 : T.mouseUpEventVerifier, g = l !== void 0 ? l : (M) => M.button === 0, p = (N = r == null ? void 0 : r.scale) == null ? void 0 : N.mouseWheelEventVerifier, f = p !== void 0 ? p : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
@@ -2841,17 +2883,17 @@ const Y = (r) => () => r, ge = Y(0), ct = () => {
     onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
     })
   };
-}, vt = (r, e) => {
+}, mt = (r, e) => {
   const t = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
   return t.setAttribute("cx", "0"), t.setAttribute("cy", "0"), t.setAttribute("r", `${r}`), t.setAttribute("fill", `${e}`), t;
-}, mt = (r) => r instanceof SVGElement ? r : vt(
+}, yt = (r) => r instanceof SVGElement ? r : mt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), yt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = mt(r.renderer ?? {});
+), vt = (r) => {
+  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = yt(r.renderer ?? {});
   return {
     tileWidth: t,
     tileHeight: s,
@@ -2997,13 +3039,13 @@ class Tt {
       );
     let e = this.boxRenderingTrigger;
     this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
-    const t = new ve(), s = new Fe(), i = new dt(this.element);
+    const t = new me(), s = new Fe(), i = new dt(this.element);
     let n = new pe(
       t,
       s,
       i.main
     );
-    e !== void 0 && (n = new Ie(
+    e !== void 0 && (n = new Ue(
       n,
       t,
       e,
@@ -3018,9 +3060,9 @@ class Tt {
     );
     if (this.hasBackground && Q.configure(
       a,
-      yt(this.backgroundConfig),
+      vt(this.backgroundConfig),
       i.background
-    ), this.hasResizeReactiveNodes && H.configure(a), this.hasDraggableNode && Z.configure(
+    ), this.hasResizeReactiveNodes && Y.configure(a), this.hasDraggableNode && Z.configure(
       a,
       i.main,
       this.window,
@@ -3059,7 +3101,7 @@ class Tt {
       ue(this.transformConfig),
       e,
       xt(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && F.configure(
+    ) : this.hasTransformableViewport && O.configure(
       a,
       i.main,
       this.window,