@html-graph/html-graph 3.16.0 → 3.18.0

package/dist/html-graph.js

@@ -1,22 +1,24 @@
-var Ne = Object.defineProperty;
-var Me = (r, e, t) => e in r ? Ne(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => Me(r, typeof e != "symbol" ? e + "" : e, t);
-const Le = () => {
-  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;
-}, Re = () => {
-  const r = document.createElement("div");
-  return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, Ce = (r) => {
-  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, T = (r, e) => ({
+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
 });
-class ue {
+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.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
+}, Ce = () => {
+  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;
+}, Ve = (r) => {
+  r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
+};
+class pe {
   constructor(e, t, s) {
     o(this, "host", Re());
-    o(this, "container", Le());
+    o(this, "container", Ce());
     o(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     o(this, "applyTransform", () => {
       const e = this.viewportStore.getContentMatrix();
@@ -26,7 +28,7 @@ class ue {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    Ce(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    Ve(t.element), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
@@ -78,7 +80,8 @@ class ue {
       a,
       d
     );
-    t.shape.render({ from: c, to: l });
+    let g = L.Line;
+    s.element === i.element ? g = L.PortCycle : s.nodeId === i.nodeId && (g = L.NodeCycle), t.shape.render({ from: c, to: l, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -88,7 +91,7 @@ class ue {
     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,
@@ -121,7 +124,7 @@ class Ie {
   }
 }
 class Ue {
-  constructor(e, t, s) {
+  constructor(e, t, s, i) {
     o(this, "attachedNodes", /* @__PURE__ */ new Set());
     o(this, "attachedEdges", /* @__PURE__ */ new Set());
     o(this, "renderingBox");
@@ -144,7 +147,7 @@ class Ue {
         this.handleAttachEdge(h);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = s, this.renderingBox = new Ie(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);
@@ -186,10 +189,10 @@ class Ue {
     this.attachedNodes.has(s) || this.handleAttachNode(s), this.attachedNodes.has(i) || this.handleAttachNode(i), this.handleAttachEdge(e);
   }
   handleAttachNode(e) {
-    this.attachedNodes.add(e), this.htmlView.attachNode(e);
+    this.attachedNodes.add(e), this.params.onBeforeNodeAttached(e), this.htmlView.attachNode(e);
   }
   handleDetachNode(e) {
-    this.htmlView.detachNode(e), this.attachedNodes.delete(e);
+    this.htmlView.detachNode(e), this.params.onAfterNodeDetached(e), this.attachedNodes.delete(e);
   }
   handleAttachEdge(e) {
     this.attachedEdges.add(e), this.htmlView.attachEdge(e);
@@ -198,7 +201,7 @@ class Ue {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class pe {
+class we {
   constructor() {
     o(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -215,11 +218,15 @@ class pe {
   }
 }
 const A = () => {
-  const r = new pe();
+  const r = new we();
   return [r, r];
 };
-class Ve {
+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;
@@ -231,7 +238,7 @@ class Ve {
     return { ...this.viewportStore.getContentMatrix() };
   }
 }
-class Be {
+class We {
   constructor(e) {
     o(this, "onAfterNodeAdded");
     o(this, "onAfterNodeUpdated");
@@ -339,7 +346,7 @@ class Be {
     return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class O {
+class k {
   constructor(e) {
     o(this, "counter", 0);
     this.checkExists = e;
@@ -361,7 +368,7 @@ class S extends Error {
     o(this, "name", "HtmlGraphError");
   }
 }
-class we {
+class fe {
   constructor(e, t, s, i, n) {
     /**
      * provides api for accessing model of rendered graph
@@ -371,13 +378,13 @@ class we {
      * provides api for accessing viewport state
      */
     o(this, "viewport");
-    o(this, "nodeIdGenerator", new O(
+    o(this, "nodeIdGenerator", new k(
       (e) => this.graph.getNode(e) !== null
     ));
-    o(this, "portIdGenerator", new O(
+    o(this, "portIdGenerator", new k(
       (e) => this.graph.getPort(e) !== null
     ));
-    o(this, "edgeIdGenerator", new O(
+    o(this, "edgeIdGenerator", new k(
       (e) => this.graph.getEdge(e) !== null
     ));
     o(this, "onAfterNodeAdded", (e) => {
@@ -425,11 +432,12 @@ class we {
       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
      */
     o(this, "onBeforeDestroy");
-    this.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new Be(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.element = e, this.graphStore = t, this.viewportStore = s, this.htmlView = i, this.params = n, this.graph = new We(this.graphStore), this.viewport = new Be(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
@@ -575,16 +583,16 @@ class we {
    * 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 We {
+class $e {
   constructor() {
     o(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     o(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -624,7 +632,7 @@ class We {
     return this.multiToSingleMap.get(e) !== void 0;
   }
 }
-class fe {
+class me {
   constructor() {
     o(this, "nodes", /* @__PURE__ */ new Map());
     o(this, "ports", /* @__PURE__ */ new Map());
@@ -633,7 +641,7 @@ class fe {
     o(this, "incomingEdges", /* @__PURE__ */ new Map());
     o(this, "outcomingEdges", /* @__PURE__ */ new Map());
     o(this, "cycleEdges", /* @__PURE__ */ new Map());
-    o(this, "elementPorts", new We());
+    o(this, "elementPorts", new $e());
     o(this, "afterNodeAddedEmitter");
     o(this, "onAfterNodeAdded");
     o(this, "afterNodeUpdatedEmitter");
@@ -806,22 +814,26 @@ class fe {
     this.cycleEdges.get(s).delete(e), this.cycleEdges.get(i).delete(e), this.incomingEdges.get(s).delete(e), this.incomingEdges.get(i).delete(e), this.outcomingEdges.get(s).delete(e), this.outcomingEdges.get(i).delete(e), this.edges.delete(e);
   }
 }
-const se = (r) => ({
+const ie = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), ie = {
+}), ne = {
   scale: 1,
   x: 0,
   y: 0
 };
-class $e {
+class Fe {
   constructor() {
-    o(this, "viewportMatrix", ie);
-    o(this, "contentMatrix", ie);
+    o(this, "viewportMatrix", ne);
+    o(this, "contentMatrix", ne);
     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();
   }
@@ -836,14 +848,14 @@ class $e {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.contentMatrix = se(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.contentMatrix = ie(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 = se(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.viewportMatrix = ie(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
 }
 class Y {
@@ -861,15 +873,12 @@ class Y {
     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 Y(e);
@@ -879,12 +888,12 @@ class Y {
     this.canvas.updateNode(t);
   }
 }
-const Fe = (r, e, t) => {
+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;
-}, Oe = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, L = (r, e, t, s) => Fe(e, t, s) && Oe(r, t, s), U = (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");
-}, V = (r) => {
+}, B = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayId,
@@ -899,43 +908,43 @@ const Fe = (r, e, t) => {
       }
     ]
   };
-}, ke = (r, e) => {
+}, ze = (r, e) => {
   let t = e, s = null;
   for (; t !== null && (s = r.getElementPortIds(t)[0] ?? null, s === null); )
     t = t.parentElement;
   return s;
-}, ve = (r, e) => {
+}, ye = (r, e) => {
   const t = document.elementsFromPoint(e.x, e.y);
   for (const s of t) {
-    const i = ke(r, s);
+    const i = ze(r, s);
     if (i !== null)
       return i;
   }
   return null;
 };
-var b = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(b || {});
-const me = (r, e) => ({
+var P = /* @__PURE__ */ ((r) => (r.Static = "static", r.Dragging = "dragging", r.Edge = "edge", r))(P || {});
+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 ze {
+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
@@ -949,7 +958,7 @@ class ze {
     this.path = `${d}${a}${c}`;
   }
 }
-const ye = (r, e, t, s) => ({
+const Ee = (r, e, t, s) => ({
   x: e * r.x + (1 - e) / 2 * s.x,
   y: t * r.y + (1 - t) / 2 * s.y
 });
@@ -958,25 +967,25 @@ class Xe {
     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
@@ -986,10 +995,10 @@ class Xe {
     }, 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 = {
@@ -1002,26 +1011,26 @@ class Xe {
     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 = ye(f, e.flipX, e.flipY, e.to);
+    ].join(" "), this.midpoint = Ee(f, e.flipX, e.flipY, e.to);
   }
 }
-const C = (r, e) => {
+const V = (r, e) => {
   const t = [];
   if (r.length > 0 && t.push(`M ${r[0].x} ${r[0].y}`), r.length === 2 && t.push(`L ${r[1].x} ${r[1].y}`), r.length > 2) {
     const s = r.length - 1;
     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 R = r[d + 1];
-        i = R.x - a.x, n = R.y - a.y, h = Math.sqrt(i * i + n * n);
+        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}`
       );
     });
@@ -1035,22 +1044,22 @@ class Ye {
     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
@@ -1060,97 +1069,97 @@ class Ye {
     }, 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 };
-    this.path = C(
-      [s, a, g, p, v, f, d, i],
+    }, m = { x: f.x, y: l };
+    this.path = V(
+      [s, a, g, p, m, f, d, i],
       this.params.roundness
     );
   }
 }
-class H {
+class j {
   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 + 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
     ), p = { x: g.x + d, y: g.y + c }, f = { x: (l.x + p.x) / 2, y: (l.y + p.y) / 2 };
-    this.midpoint = ye(f, e.flipX, e.flipY, e.to), this.path = C(
+    this.midpoint = Ee(f, e.flipX, e.flipY, e.to), this.path = V(
       [t, n, l, p, g, s],
       this.params.roundness
     );
   }
 }
-class He {
+class je {
   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 = 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
     );
-    this.path = C([s, h, a, i], this.params.roundness);
+    this.path = V([s, h, a, i], this.params.roundness);
   }
 }
-class je {
+class Ge {
   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
@@ -1160,14 +1169,14 @@ class je {
     }, 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 };
-    this.path = C(
-      [s, a, g, p, v, f, d, i],
+    }, m = { x: l, y: f.y };
+    this.path = V(
+      [s, a, g, p, m, f, d, i],
       this.params.roundness
     );
   }
 }
-class j {
+class G {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1182,12 +1191,12 @@ class j {
       { 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}${C(a, this.params.roundness)}`, this.midpoint = { x: (a[3].x + a[4].x) / 2, y: (a[3].y + a[4].y) / 2 };
+    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 };
   }
 }
-class Ge {
+class Ke {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1198,7 +1207,7 @@ class Ge {
       { 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}`,
@@ -1208,7 +1217,7 @@ class Ge {
     this.path = `${this.params.hasSourceArrow || this.params.hasTargetArrow ? "" : f}${p}`, this.midpoint = g[3];
   }
 }
-class Ke {
+class Ze {
   constructor(e) {
     o(this, "path");
     o(this, "midpoint");
@@ -1244,22 +1253,22 @@ class Ke {
     };
   }
 }
-const Ee = (r, e) => {
+const Ae = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${Math.max(e.width, 1)}px`, r.style.height = `${Math.max(e.height, 1)}px`;
-}, G = Object.freeze({
+}, K = Object.freeze({
   edgeColor: "--edge-color"
-}), Ae = (r) => {
+}), xe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(G.edgeColor, r), e;
-}, B = () => {
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
+}, W = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${G.edgeColor})`), r;
-}, xe = () => {
+  return r.setAttribute("fill", `var(${K.edgeColor})`), r;
+}, Se = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.transformOrigin = "50% 50%", r;
-}, Se = (r) => {
+}, Pe = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${G.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+  return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
 }, be = (r, e) => {
   const t = {
     x: r.x + r.width / 2,
@@ -1276,12 +1285,12 @@ const Ee = (r, e) => {
     flipX: d,
     flipY: c
   };
-}, k = (r, e, t, s) => {
+}, z = (r, e, t, s) => {
   const n = [
     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",
@@ -1301,29 +1310,29 @@ const Ee = (r, e) => {
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), ne = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
-class W {
+}), he = (r, e, t) => ({ x: e * Math.cos(r), y: t * Math.sin(r) });
+class $ {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", xe());
+    o(this, "group", Se());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = Ae(e.color), this.svg.appendChild(this.group), this.line = Se(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = A(), this.svg = xe(e.color), this.svg.appendChild(this.group), this.line = Pe(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
       e.from,
       e.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = ne(
+    Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = he(
       e.from.direction,
       h,
       a
-    ), c = ne(
+    ), c = he(
       e.to.direction,
       h,
       a
@@ -1332,36 +1341,36 @@ class W {
       y: n
     };
     let g = c, p = -this.params.arrowLength, f;
-    e.from.portId === e.to.portId ? (f = this.params.createCyclePath, g = d, p = this.params.arrowLength) : e.from.nodeId === e.to.nodeId ? f = this.params.createDetourPath : f = this.params.createLinePath;
-    const v = 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 m = f(
       d,
       c,
       l,
       h,
       a
     );
-    this.line.setAttribute("d", v.path);
-    let y = null;
-    this.sourceArrow && (y = k(
+    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 = k(
+    this.targetArrow && (E = z(
       g,
       l,
       p,
       this.params.arrowWidth
     ), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
-      edgePath: v,
-      sourceArrowPath: y,
+      edgePath: m,
+      sourceArrowPath: v,
       targetArrowPath: E
     });
   }
 }
-class Ze {
+class Je {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1379,7 +1388,7 @@ class Ze {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new Ge({
+    o(this, "createCyclePath", (e) => new Ke({
       sourceDirection: e,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
@@ -1400,7 +1409,7 @@ class Ze {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new ze({
+    o(this, "createLinePath", (e, t, s) => new He({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1409,7 +1418,7 @@ class Ze {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: 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, this.pathShape = new W({
+    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, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1425,7 +1434,7 @@ class Ze {
     this.pathShape.render(e);
   }
 }
-class Je {
+class Qe {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1443,7 +1452,7 @@ class Je {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new j({
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1452,7 +1461,7 @@ class Je {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1483,7 +1492,7 @@ class Je {
       t,
       this.arrowOffset,
       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, this.pathShape = new W({
+    ), 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, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1499,7 +1508,7 @@ class Je {
     this.pathShape.render(e);
   }
 }
-class Qe {
+class _e {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1517,7 +1526,7 @@ class Qe {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new j({
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1526,7 +1535,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1540,7 +1549,7 @@ class Qe {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s) => new He({
+    o(this, "createLinePath", (e, t, s) => new je({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1556,7 +1565,7 @@ class Qe {
       t,
       this.arrowOffset,
       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, this.pathShape = new W({
+    ), 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, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1572,7 +1581,7 @@ class Qe {
     this.pathShape.render(e);
   }
 }
-class _e {
+class qe {
   constructor(e) {
     o(this, "svg");
     o(this, "group");
@@ -1590,7 +1599,7 @@ class _e {
     o(this, "hasSourceArrow");
     o(this, "hasTargetArrow");
     o(this, "pathShape");
-    o(this, "createCyclePath", (e) => new j({
+    o(this, "createCyclePath", (e) => new G({
       sourceDirection: e,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -1599,7 +1608,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createDetourPath", (e, t, s, i, n) => new H({
+    o(this, "createDetourPath", (e, t, s, i, n) => new j({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1613,7 +1622,7 @@ class _e {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    o(this, "createLinePath", (e, t, s, i, n) => new je({
+    o(this, "createLinePath", (e, t, s, i, n) => new Ge({
       to: s,
       sourceDirection: e,
       targetDirection: t,
@@ -1630,7 +1639,7 @@ class _e {
       t,
       this.arrowOffset,
       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, this.pathShape = new W({
+    ), 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, this.pathShape = new $({
       color: (e == null ? void 0 : e.color) ?? u.color,
       width: (e == null ? void 0 : e.width) ?? u.width,
       arrowLength: this.arrowLength,
@@ -1646,7 +1655,7 @@ class _e {
     this.pathShape.render(e);
   }
 }
-const he = (r) => {
+const ae = (r) => {
   if (r.diagonalDistance === 0)
     return "";
   const e = r.offset / r.diagonalDistance, t = r.flip * r.to.x, s = r.flip * r.to.y, i = {
@@ -1656,17 +1665,17 @@ const he = (r) => {
     x: t / r.diagonalDistance,
     y: s / r.diagonalDistance
   };
-  return k(
+  return z(
     n,
     i,
     r.arrowLength,
     r.arrowWidth
   );
 };
-class Pe {
+class Te {
   constructor(e) {
     o(this, "svg");
-    o(this, "group", xe());
+    o(this, "group", Se());
     o(this, "line");
     o(this, "sourceArrow", null);
     o(this, "targetArrow", null);
@@ -1678,15 +1687,15 @@ class Pe {
     o(this, "targetOffset");
     o(this, "onAfterRender");
     o(this, "afterRenderEmitter");
-    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = Ae(this.color), this.svg.appendChild(this.group), this.line = Se(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = A(), this.color = (e == null ? void 0 : e.color) ?? u.color, this.width = (e == null ? void 0 : e.width) ?? u.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? u.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? u.preOffset, this.svg = xe(this.color), this.svg.appendChild(this.group), this.line = Pe(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = W(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = W(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
     const { x: t, y: s, width: i, height: n, flipX: h, flipY: a } = be(
       e.from,
       e.to
     );
-    Ee(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
-    const d = { x: i, y: n }, c = new Ke({
+    Ae(this.svg, { x: t, y: s, width: i, height: n }), this.group.style.transform = `scale(${h}, ${a})`;
+    const d = { x: i, y: n }, c = new Ze({
       to: d,
       sourceOffset: this.sourceOffset,
       targetOffset: this.targetOffset,
@@ -1696,7 +1705,7 @@ class Pe {
     });
     this.line.setAttribute("d", c.path);
     let l = null;
-    this.sourceArrow && (l = he({
+    this.sourceArrow && (l = ae({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.sourceOffset,
@@ -1706,7 +1715,7 @@ class Pe {
       arrowLength: this.arrowLength
     }), this.sourceArrow.setAttribute("d", l));
     let g = null;
-    this.targetArrow && (g = he({
+    this.targetArrow && (g = ae({
       diagonalDistance: c.diagonalDistance,
       to: d,
       offset: this.targetOffset,
@@ -1721,40 +1730,40 @@ class Pe {
     });
   }
 }
-const qe = () => {
+const et = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
   return r.style.pointerEvents = "auto", r.style.cursor = "pointer", r;
-}, et = (r) => {
+}, tt = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke", "transparent"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e.setAttribute("stroke-linecap", "round"), e;
-}, ae = (r) => {
+}, de = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
   return e.setAttribute("stroke-linejoin", "round"), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "transparent"), e.setAttribute("stroke", "transparent"), e;
 };
-class tt extends Error {
+class rt extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Te {
+class De {
   constructor(e, t) {
     o(this, "svg");
     o(this, "group");
     o(this, "line");
     o(this, "sourceArrow");
     o(this, "targetArrow");
-    o(this, "handle", qe());
+    o(this, "handle", et());
     o(this, "onAfterRender");
     o(this, "interactiveLine");
     o(this, "interactiveSourceArrow", null);
     o(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Te)
-      throw new tt(
+    if (this.baseEdge = e, e instanceof De)
+      throw new rt(
         "interactive edge can be configured only once"
       );
     this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
     const s = (t == null ? void 0 : t.width) ?? u.interactiveWidth;
-    this.interactiveLine = et(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ae(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ae(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
+    this.interactiveLine = tt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = de(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = de(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((i) => {
       this.interactiveLine.setAttribute("d", i.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", i.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", i.targetArrowPath);
     });
   }
@@ -1762,7 +1771,7 @@ class Te {
     this.baseEdge.render(e);
   }
 }
-class xt {
+class bt {
   constructor(e, t) {
     o(this, "group");
     o(this, "line");
@@ -1784,21 +1793,21 @@ class xt {
     this.baseShape.render(e);
   }
 }
-const De = (r, e) => {
-  const t = new fe(), s = new ue(t, e, r), i = {
+const Ne = (r, e) => {
+  const t = new me(), s = new pe(t, e, r), i = {
     nodes: {
-      centerFn: me,
+      centerFn: ve,
       priorityFn: () => 0
     },
     edges: {
-      shapeFactory: () => new Pe(),
+      shapeFactory: () => new Te(),
       priorityFn: () => 0
     },
     ports: {
       direction: 0
     }
   };
-  return new we(
+  return new fe(
     r,
     t,
     e,
@@ -1806,11 +1815,117 @@ const De = (r, e) => {
     i
   );
 };
-class K {
+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);
@@ -1829,7 +1944,7 @@ class K {
       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) => {
@@ -1838,43 +1953,61 @@ class K {
       }), 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, U(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 (!L(
+      if (!R(
         this.window,
         this.element,
         e.clientX,
@@ -1883,16 +2016,19 @@ class K {
         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)
         return;
       const t = e.touches[0];
-      if (!L(
+      if (!R(
         this.window,
         this.element,
         t.clientX,
@@ -1901,43 +2037,40 @@ class K {
         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 K(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 });
@@ -1947,26 +2080,31 @@ class K {
     }
   }
   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, U(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);
@@ -1975,12 +2113,30 @@ class K {
     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 rt = (r, e, t) => ({
+const ot = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), ot = (r, e, t, s) => ({
+}), st = (r, e, t, s) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * s + r.y
@@ -2003,14 +2159,14 @@ const rt = (r, e, t) => ({
     touches: e
   };
 };
-class $ {
+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) || (U(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
@@ -2020,7 +2176,7 @@ class $ {
       }), this.startRegisteredTransform());
     });
     o(this, "onWindowMouseMove", (e) => {
-      const t = L(
+      const t = R(
         this.window,
         this.element,
         e.clientX,
@@ -2060,7 +2216,7 @@ class $ {
     o(this, "onWindowTouchMove", (e) => {
       const t = I(e);
       if (!t.touches.every(
-        (i) => L(this.window, this.element, i[0], i[1])
+        (i) => R(this.window, this.element, i[0], i[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2100,10 +2256,10 @@ class $ {
     }), e.onBeforeDestroy.subscribe(this.onBeforeDestroy);
   }
   static configure(e, t, s, i) {
-    new $(e, t, s, i);
+    new O(e, t, s, i);
   }
   moveViewport(e, t) {
-    const s = this.viewport.getViewportMatrix(), i = rt(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
+    const s = this.viewport.getViewportMatrix(), i = ot(s, e, t), { width: n, height: h } = this.element.getBoundingClientRect(), a = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: i,
       canvasWidth: n,
@@ -2112,7 +2268,7 @@ class $ {
     this.performTransform(a);
   }
   scaleViewport(e, t, s) {
-    const i = this.canvas.viewport.getViewportMatrix(), n = ot(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
+    const i = this.canvas.viewport.getViewportMatrix(), n = st(i, e, t, s), { width: h, height: a } = this.element.getBoundingClientRect(), d = this.params.transformPreprocessor({
       prevTransform: i,
       nextTransform: n,
       canvasWidth: h,
@@ -2142,7 +2298,7 @@ class $ {
     this.transformInProgress = !1, this.params.onTransformFinished();
   }
 }
-class Z {
+class J {
   constructor(e, t, s, i, n, h) {
     o(this, "canvasResizeObserver");
     o(this, "nodeHorizontal");
@@ -2165,16 +2321,11 @@ class Z {
         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());
     });
     o(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeContainingRadius.horizontal, this.nodeVertical = this.params.nodeContainingRadius.vertical, this.canvasResizeObserver = new ResizeObserver((d) => {
+    this.canvas = e, this.element = t, this.window = s, this.trigger = n, this.params = h, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.canvasResizeObserver = new ResizeObserver((d) => {
       const c = d[0];
       this.viewportWidth = c.contentRect.width, this.viewportHeight = c.contentRect.height, this.scheduleLoadAreaAroundViewport();
     }), this.viewport = e.viewport;
@@ -2198,15 +2349,15 @@ class Z {
         this.scheduleLoadAreaAroundViewport(), i.onTransformFinished();
       }
     };
-    $.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 Z(
+    new J(
       e,
       t,
       s,
@@ -2229,24 +2380,24 @@ class Z {
     this.trigger.emit({ x: s, y: i, width: n, height: h });
   }
 }
-const st = () => {
+const it = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, it = () => {
+}, nt = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
   return r.setAttribute("fill", "url(#pattern)"), r;
-}, nt = () => {
+}, ht = () => {
   const r = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "pattern"
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class J {
+class Q {
   constructor(e, t, s) {
-    o(this, "svg", st());
-    o(this, "patternRenderingRectangle", it());
-    o(this, "pattern", nt());
+    o(this, "svg", it());
+    o(this, "patternRenderingRectangle", nt());
+    o(this, "pattern", ht());
     o(this, "patternContent");
     o(this, "tileWidth");
     o(this, "tileHeight");
@@ -2264,129 +2415,21 @@ class J {
       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 J(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));
+    t && this.visible ? (this.visible = !1, this.backgroundHost.removeChild(this.svg)) : !t && !this.visible && (this.visible = !0, this.backgroundHost.appendChild(this.svg));
   }
 }
-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 (!L(
-        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 (!L(
-        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 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.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);
-  }
-}
-class Q {
+class _ {
   constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
@@ -2394,7 +2437,7 @@ class Q {
     o(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
     ), F.configure(
@@ -2421,7 +2464,7 @@ class Q {
     );
   }
   static configure(e, t, s, i, n) {
-    new Q(
+    new _(
       e,
       t,
       s,
@@ -2432,34 +2475,34 @@ class Q {
   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 = {
-      overlayId: b.Static,
+      overlayId: P.Static,
       portCoords: l,
       portDirection: i.direction
     }, f = {
-      overlayId: b.Dragging,
+      overlayId: P.Dragging,
       portCoords: g,
       portDirection: this.params.dragPortDirection
     };
     this.isTargetDragging = s === "direct";
-    const [v, y] = this.isTargetDragging ? [p, f] : [f, p];
-    this.overlayCanvas.addNode(V(v)), this.overlayCanvas.addNode(V(y)), this.overlayCanvas.addEdge({
-      from: v.overlayId,
-      to: y.overlayId,
-      shape: this.params.edgeShapeFactory(b.Edge)
+    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)
     });
   }
   resetDragState() {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = ve(this.canvas.graph, e);
+    const t = ye(this.canvas.graph, e);
     if (t === null) {
       this.params.onEdgeCreationInterrupted(
         this.staticPortId,
@@ -2474,14 +2517,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);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
+    this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
 }
-class _ {
+class q {
   constructor(e, t, s, i, n) {
     o(this, "overlayCanvas");
     o(this, "staticPortId", null);
@@ -2490,7 +2533,7 @@ class _ {
     o(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = De(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = s, this.window = i, this.params = n, this.overlayCanvas = Ne(
       this.overlayLayer,
       this.viewportStore
     ), F.configure(
@@ -2514,7 +2557,7 @@ class _ {
     );
   }
   static configure(e, t, s, i, n) {
-    new _(
+    new q(
       e,
       t,
       s,
@@ -2534,10 +2577,10 @@ class _ {
     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
     });
@@ -2549,20 +2592,20 @@ class _ {
       priority: i.priority
     }, this.canvas.removeEdge(s);
     const E = {
-      overlayId: b.Static,
-      portCoords: v,
+      overlayId: P.Static,
+      portCoords: m,
       portDirection: c.direction
     }, x = {
-      overlayId: b.Dragging,
-      portCoords: y,
+      overlayId: P.Dragging,
+      portCoords: v,
       portDirection: d.direction
-    }, [P, D] = this.isTargetDragging ? [E, x] : [x, E];
-    this.overlayCanvas.addNode(V(P)), this.overlayCanvas.addNode(V(D));
-    const N = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(b.Edge) : i.shape;
+    }, [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: b.Edge,
-      from: P.overlayId,
-      to: D.overlayId,
+      id: P.Edge,
+      from: b.overlayId,
+      to: T.overlayId,
       shape: N
     }), !0;
   }
@@ -2573,15 +2616,15 @@ 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);
-    this.overlayCanvas.updateNode(b.Dragging, {
+    }, i = this.canvas.viewport.getViewportMatrix(), n = D(i, s);
+    this.overlayCanvas.updateNode(P.Dragging, {
       x: n.x,
       y: n.y
     });
   }
   tryCreateConnection(e) {
-    const t = ve(this.canvas.graph, e);
-    if (this.overlayCanvas.removeEdge(b.Edge), t === null) {
+    const t = ye(this.canvas.graph, e);
+    if (this.overlayCanvas.removeEdge(P.Edge), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
         id: d.id,
@@ -2613,45 +2656,45 @@ class _ {
     }
   }
 }
-const ht = () => {
+const at = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, z = () => {
+}, H = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, de = () => {
-  const r = z();
+}, ce = () => {
+  const r = H();
   return r.style.pointerEvents = "none", r;
 };
-class at {
+class dt {
   constructor(e) {
-    o(this, "background", z());
-    o(this, "main", z());
-    o(this, "overlayConnectablePorts", de());
-    o(this, "overlayDraggableEdges", de());
-    o(this, "host", ht());
+    o(this, "background", H());
+    o(this, "main", H());
+    o(this, "overlayConnectablePorts", ce());
+    o(this, "overlayDraggableEdges", ce());
+    o(this, "host", at());
     this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
   }
   destroy() {
     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 X = (r) => () => r, ce = X(0), dt = () => {
+const X = (r) => () => r, ge = X(0), ct = () => {
   let r = 0;
   return () => r++;
-}, ct = (r, e) => {
-  let t = ce, s = ce;
-  const i = dt();
+}, gt = (r, e) => {
+  let t = ge, s = ge;
+  const i = ct();
   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
   };
-}, q = (r) => {
+}, ee = (r) => {
   if (typeof r == "function")
     return r;
   switch (r == null ? void 0 : r.type) {
     case "straight":
-      return () => new Qe({
+      return () => new _e({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2665,7 +2708,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
     case "horizontal":
-      return () => new Je({
+      return () => new Qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2679,7 +2722,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
     case "vertical":
-      return () => new _e({
+      return () => new qe({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2693,7 +2736,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
     case "direct":
-      return () => new Pe({
+      return () => new Te({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2704,7 +2747,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         targetOffset: r.targetOffset
       });
     default:
-      return () => new Ze({
+      return () => new Je({
         color: r.color,
         width: r.width,
         arrowLength: r.arrowLength,
@@ -2718,41 +2761,42 @@ const X = (r) => () => r, ce = X(0), dt = () => {
         detourDirection: r.detourDirection
       });
   }
-}, gt = (r) => {
+}, lt = (r) => {
   var t, s, i, n, h;
-  const e = ct(
+  const e = gt(
     (t = r.nodes) == null ? void 0 : t.priority,
     (s = r.edges) == null ? void 0 : s.priority
   );
   return {
     nodes: {
-      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? me,
+      centerFn: ((i = r.nodes) == null ? void 0 : i.centerFn) ?? ve,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: q(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
+      shapeFactory: ee(((h = r.edges) == null ? void 0 : h.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, lt = (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 : (P) => P.button === 0, l = (x = r == null ? void 0 : r.mouse) == null ? void 0 : x.mouseUpEventVerifier;
+}, ut = (r) => {
+  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 : (P) => P.button === 0,
+    mouseUpEventVerifier: g,
     onNodeDrag: e,
     onBeforeNodeDrag: t,
     onNodeDragFinished: s
   };
-}, ut = (r) => {
+}, pt = (r) => {
   const e = r.minX !== null ? r.minX : -1 / 0, t = r.maxX !== null ? r.maxX : 1 / 0, s = r.minY !== null ? r.minY : -1 / 0, i = r.maxY !== null ? r.maxY : 1 / 0;
   return (n) => {
     let h = n.nextTransform.x, a = n.nextTransform.y;
@@ -2762,7 +2806,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     const l = n.canvasHeight * n.prevTransform.scale, g = i - l;
     return a > g && a > n.prevTransform.y && (a = Math.max(n.prevTransform.y, g)), { scale: n.nextTransform.scale, x: h, y: a };
   };
-}, pt = (r) => {
+}, wt = (r) => {
   const e = r.maxContentScale, t = r.minContentScale, s = e !== null ? 1 / e : 0, i = t !== null ? 1 / t : 1 / 0;
   return (n) => {
     const h = n.prevTransform, a = n.nextTransform;
@@ -2783,7 +2827,7 @@ const X = (r) => () => r, ce = X(0), dt = () => {
       y: l
     };
   };
-}, wt = (r) => (e) => r.reduce(
+}, ft = (r) => (e) => r.reduce(
   (t, s) => s({
     prevTransform: e.prevTransform,
     nextTransform: t,
@@ -2791,40 +2835,40 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), ge = (r) => {
+), le = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
     case "scale-limit":
-      return pt({
+      return wt({
         minContentScale: r.minContentScale ?? 0,
         maxContentScale: r.maxContentScale ?? 1 / 0
       });
     case "shift-limit":
-      return ut({
+      return pt({
         minX: r.minX ?? -1 / 0,
         maxX: r.maxX ?? 1 / 0,
         minY: r.minY ?? -1 / 0,
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, le = (r) => {
-  var v, y, E, x, P, D, N, R, ee, te, re, oe;
-  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;
+}, ue = (r) => {
+  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 = wt(
+  s !== void 0 ? Array.isArray(s) ? i = ft(
     s.map(
-      (M) => ge(M)
+      (M) => le(M)
     )
-  ) : i = ge(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) ?? (() => {
+  ) : i = le(s) : i = (M) => M.nextTransform;
+  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 = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.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: ((R = r == null ? void 0 : r.events) == null ? void 0 : R.onTransformStarted) ?? (() => {
+    onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
     }),
-    onTransformFinished: ((ee = r == null ? void 0 : r.events) == null ? void 0 : ee.onTransformFinished) ?? (() => {
+    onTransformFinished: ((te = r == null ? void 0 : r.events) == null ? void 0 : te.onTransformFinished) ?? (() => {
     }),
     onBeforeTransformChange: h,
     onTransformChange: a,
@@ -2833,30 +2877,30 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: f,
-    scaleWheelFinishTimeout: ((te = r == null ? void 0 : r.scale) == null ? void 0 : te.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: ((re = r == null ? void 0 : r.events) == null ? void 0 : re.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((re = r == null ? void 0 : r.scale) == null ? void 0 : re.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((oe = r == null ? void 0 : r.events) == null ? void 0 : oe.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((se = r == null ? void 0 : r.events) == null ? void 0 : se.onResizeTransformFinished) ?? (() => {
     })
   };
-}, ft = (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;
-}, vt = (r) => r instanceof SVGElement ? r : ft(
+}, yt = (r) => r instanceof SVGElement ? r : mt(
   (r == null ? void 0 : r.radius) ?? 1.5,
   (r == null ? void 0 : r.color) ?? "#d8d8d8"
-), mt = (r) => {
-  const e = r.tileDimensions, t = (e == null ? void 0 : e.width) ?? 25, s = (e == null ? void 0 : e.height) ?? 25, i = vt(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,
     renderer: i,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, yt = (r, e, t) => {
+}, Et = (r, e, t) => {
   var c, l, g;
   const s = () => "direct", i = (p) => p, n = (p) => p.button === 0, h = () => {
   }, a = () => {
@@ -2871,9 +2915,9 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     onEdgeCreationInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? a,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? q(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? ee(r.edgeShape) : e
   };
-}, Et = (r, e) => {
+}, At = (r, e) => {
   var c, l, g;
   const t = (p) => p, s = (p) => p.button === 0 && p.ctrlKey, i = (p) => p.button === 0, n = (p) => {
     const f = e.getPortAdjacentEdgeIds(p);
@@ -2887,13 +2931,24 @@ const X = (r) => () => r, ce = X(0), dt = () => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? s,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? i,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? q(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ee(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? h,
     onEdgeReattachInterrupted: ((l = r.events) == null ? void 0 : l.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? a
   };
+}, xt = (r) => ({
+  nodeVerticalRadius: r.nodeContainingRadius.vertical,
+  nodeHorizontalRadius: r.nodeContainingRadius.horizontal
+}), St = (r) => {
+  var e, t;
+  return {
+    onAfterNodeDetached: ((e = r == null ? void 0 : r.events) == null ? void 0 : e.onAfterNodeDetached) ?? (() => {
+    }),
+    onBeforeNodeAttached: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeNodeAttached) ?? (() => {
+    })
+  };
 };
-class St {
+class Tt {
   constructor(e) {
     o(this, "element", null);
     o(this, "canvasDefaults", {});
@@ -2945,6 +3000,8 @@ class St {
     return this.hasResizeReactiveNodes = !0, this;
   }
   /**
+   * @deprecated
+   * do not use
    * sets emitter for rendering graph inside bounded area
    */
   enableBoxAreaRendering(e) {
@@ -2981,37 +3038,42 @@ class St {
         "unable to build canvas when no attach element specified"
       );
     let e = this.boxRenderingTrigger;
-    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new pe());
-    const t = new fe(), s = new $e(), i = new at(this.element);
-    let n = new ue(
+    this.virtualScrollConfig !== void 0 && e === void 0 && (e = new we());
+    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 Ue(n, t, e));
-    const h = gt(this.canvasDefaults), a = new we(
+    e !== void 0 && (n = new Ue(
+      n,
+      t,
+      e,
+      St(this.virtualScrollConfig)
+    ));
+    const h = lt(this.canvasDefaults), a = new fe(
       this.element,
       t,
       s,
       n,
       h
     );
-    if (this.hasBackground && J.configure(
+    if (this.hasBackground && Q.configure(
       a,
-      mt(this.backgroundConfig),
+      vt(this.backgroundConfig),
       i.background
-    ), this.hasResizeReactiveNodes && Y.configure(a), this.hasDraggableNode && K.configure(
+    ), this.hasResizeReactiveNodes && Y.configure(a), this.hasDraggableNode && Z.configure(
       a,
       i.main,
       this.window,
-      lt(this.dragConfig)
+      ut(this.dragConfig)
     ), this.hasUserConnectablePorts) {
-      const c = yt(
+      const c = Et(
         this.connectablePortsConfig,
         h.edges.shapeFactory,
         h.ports.direction
       );
-      Q.configure(
+      _.configure(
         a,
         i.overlayConnectablePorts,
         s,
@@ -3020,11 +3082,11 @@ class St {
       );
     }
     if (this.hasUserDraggableEdges) {
-      const c = Et(
+      const c = At(
         this.draggableEdgesConfig,
         a.graph
       );
-      _.configure(
+      q.configure(
         a,
         i.overlayDraggableEdges,
         s,
@@ -3032,18 +3094,18 @@ class St {
         c
       );
     }
-    this.virtualScrollConfig !== void 0 ? Z.configure(
+    this.virtualScrollConfig !== void 0 ? J.configure(
       a,
       i.main,
       this.window,
-      le(this.transformConfig),
+      ue(this.transformConfig),
       e,
-      this.virtualScrollConfig
-    ) : this.hasTransformableViewport && $.configure(
+      xt(this.virtualScrollConfig)
+    ) : this.hasTransformableViewport && O.configure(
       a,
       i.main,
       this.window,
-      le(this.transformConfig)
+      ue(this.transformConfig)
     ), this.reset();
     const d = () => {
       i.destroy(), a.onBeforeDestroy.unsubscribe(d);
@@ -3059,17 +3121,17 @@ class St {
   }
 }
 export {
-  Ze as BezierEdgeShape,
-  St as CanvasBuilder,
-  Pe as DirectEdgeShape,
-  pe as EventSubject,
-  Je as HorizontalEdgeShape,
+  Je as BezierEdgeShape,
+  Tt as CanvasBuilder,
+  Te as DirectEdgeShape,
+  we as EventSubject,
+  Qe as HorizontalEdgeShape,
   S as HtmlGraphError,
-  tt as InteractiveEdgeError,
-  Te as InteractiveEdgeShape,
-  W as LineEdgeShape,
-  xt as MedianEdgeShape,
-  xt as MidpointEdgeShape,
-  Qe as StraightEdgeShape,
-  _e as VerticalEdgeShape
+  rt as InteractiveEdgeError,
+  De as InteractiveEdgeShape,
+  $ as LineEdgeShape,
+  bt as MedianEdgeShape,
+  bt as MidpointEdgeShape,
+  _e as StraightEdgeShape,
+  qe as VerticalEdgeShape
 };