@html-graph/html-graph 8.12.0 → 8.13.0

package/dist/html-graph.js

@@ -1,22 +1,22 @@
-var Ze = Object.defineProperty;
-var _e = (r, e, t) => e in r ? Ze(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => _e(r, typeof e != "symbol" ? e + "" : e, t);
-var V = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(V || {});
-const qe = () => {
+var Qe = Object.defineProperty;
+var Ze = (r, e, t) => e in r ? Qe(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var i = (r, e, t) => Ze(r, typeof e != "symbol" ? e + "" : e, t);
+var R = /* @__PURE__ */ ((r) => (r.Line = "line", r.NodeCycle = "node-cycle", r.PortCycle = "port-cycle", r))(R || {});
+const _e = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r.style.overflow = "hidden", r;
-}, et = () => {
+}, qe = () => {
   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;
-}, tt = (r) => {
+}, et = (r) => {
   r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.visibility = "hidden";
-}, rt = (r) => {
+}, tt = (r) => {
   r.style.removeProperty("position"), r.style.removeProperty("top"), r.style.removeProperty("left"), r.style.removeProperty("visibility"), r.style.removeProperty("transform");
 };
-class be {
+class Ne {
   constructor(e, t, o) {
-    i(this, "host", qe());
-    i(this, "container", et());
+    i(this, "host", _e());
+    i(this, "container", qe());
     i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
     i(this, "attachedNodeIds", /* @__PURE__ */ new Set());
     i(this, "applyTransform", () => {
@@ -27,11 +27,11 @@ class be {
   }
   attachNode(e) {
     const t = this.graphStore.getNode(e);
-    tt(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
+    et(t.element), this.attachedNodeIds.add(e), this.container.appendChild(t.element), this.updateNodePosition(e), this.updateNodePriority(e), t.element.style.visibility = "visible";
   }
   detachNode(e) {
     const t = this.graphStore.getNode(e);
-    rt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
+    tt(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
   }
   attachEdge(e) {
     const t = this.graphStore.getEdge(e).payload.shape.svg;
@@ -72,8 +72,8 @@ class be {
       h,
       d
     ), u = this.createEdgeRenderPort(s, a, h, d);
-    let g = V.Line;
-    o.element === s.element ? g = V.PortCycle : o.nodeId === s.nodeId && (g = V.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
+    let g = R.Line;
+    o.element === s.element ? g = R.PortCycle : o.nodeId === s.nodeId && (g = R.NodeCycle), t.payload.shape.render({ from: c, to: u, category: g });
   }
   updateEdgePriority(e) {
     const t = this.graphStore.getEdge(e);
@@ -93,7 +93,7 @@ class be {
     };
   }
 }
-class ot {
+class rt {
   constructor(e) {
     i(this, "xFrom", 1 / 0);
     i(this, "yFrom", 1 / 0);
@@ -113,7 +113,7 @@ class ot {
     return h <= this.xTo && d >= this.xFrom && c <= this.yTo && u >= this.yFrom;
   }
 }
-class st {
+class ot {
   constructor(e, t, o, s) {
     i(this, "attachedNodes", /* @__PURE__ */ new Set());
     i(this, "attachedEdges", /* @__PURE__ */ new Set());
@@ -137,7 +137,7 @@ class st {
         this.handleAttachEdge(a);
       });
     });
-    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new ot(this.graphStore), this.trigger.subscribe(this.updateViewport);
+    this.htmlView = e, this.graphStore = t, this.trigger = o, this.params = s, this.renderingBox = new rt(this.graphStore), this.trigger.subscribe(this.updateViewport);
   }
   attachNode(e) {
     this.renderingBox.hasNode(e) && this.handleAttachNode(e);
@@ -191,7 +191,7 @@ class st {
     this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
   }
 }
-class it {
+class st {
   constructor(e, t) {
     i(this, "deferredNodes", /* @__PURE__ */ new Set());
     i(this, "deferredEdges", /* @__PURE__ */ new Set());
@@ -245,7 +245,7 @@ class it {
     this.isEdgeValid(e) && (this.deferredEdges.delete(e), this.htmlView.attachEdge(e));
   }
 }
-class q {
+class _ {
   constructor() {
     i(this, "callbacks", /* @__PURE__ */ new Set());
   }
@@ -262,10 +262,10 @@ class q {
   }
 }
 const P = () => {
-  const r = new q();
+  const r = new _();
   return [r, r];
 };
-class Pe {
+class be {
   constructor(e, t, o, s) {
     i(this, "beforeDestroyEmitter");
     i(this, "destroyed", !1);
@@ -318,7 +318,7 @@ class Pe {
     this.destroyed || (this.destroyed = !0, this.beforeDestroyEmitter.emit(), this.graphController.destroy(), this.viewportController.destroy());
   }
 }
-class nt {
+class it {
   constructor() {
     i(this, "singleToMultiMap", /* @__PURE__ */ new Map());
     i(this, "multiToSingleMap", /* @__PURE__ */ new Map());
@@ -386,7 +386,7 @@ const N = Object.freeze({
   removeNonexistentEdge: (r) => `Failed to remove edge with ID ${JSON.stringify(r)} because it does not exist`,
   accessEdgesForNonexistentPort: (r) => `Failed to access edges for port with ID ${JSON.stringify(r)} because the port does not exist`
 });
-class Te {
+class Pe {
   constructor() {
     i(this, "nodes", /* @__PURE__ */ new Map());
     i(this, "ports", /* @__PURE__ */ new Map());
@@ -395,7 +395,7 @@ class Te {
     i(this, "portIncomingEdges", /* @__PURE__ */ new Map());
     i(this, "portOutgoingEdges", /* @__PURE__ */ new Map());
     i(this, "portCycleEdges", /* @__PURE__ */ new Map());
-    i(this, "elementPorts", new nt());
+    i(this, "elementPorts", new it());
     i(this, "afterNodeAddedEmitter");
     i(this, "onAfterNodeAdded");
     i(this, "afterNodeUpdatedEmitter");
@@ -672,22 +672,22 @@ class Te {
     this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(o).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(o).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(o).delete(e), this.edges.delete(e);
   }
 }
-const ye = (r) => ({
+const we = (r) => ({
   scale: 1 / r.scale,
   x: -r.x / r.scale,
   y: -r.y / r.scale
-}), fe = {
+}), ye = {
   scale: 1,
   x: 0,
   y: 0
-}, ve = (r, e) => ({
+}, fe = (r, e) => ({
   x: r.scale * e.x + r.x,
   y: r.scale * e.y + r.y
 });
-class at {
+class nt {
   constructor(e) {
-    i(this, "viewportMatrix", fe);
-    i(this, "contentMatrix", fe);
+    i(this, "viewportMatrix", ye);
+    i(this, "contentMatrix", ye);
     i(this, "beforeUpdateEmitter");
     i(this, "onBeforeUpdated");
     i(this, "afterUpdateEmitter");
@@ -710,30 +710,30 @@ class at {
       scale: e.scale ?? this.viewportMatrix.scale,
       x: e.x ?? this.viewportMatrix.x,
       y: e.y ?? this.viewportMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = ye(this.viewportMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.contentMatrix = we(this.viewportMatrix), this.afterUpdateEmitter.emit();
   }
   patchContentMatrix(e) {
     this.contentMatrix = {
       scale: e.scale ?? this.contentMatrix.scale,
       x: e.x ?? this.contentMatrix.x,
       y: e.y ?? this.contentMatrix.y
-    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = ye(this.contentMatrix), this.afterUpdateEmitter.emit();
+    }, this.beforeUpdateEmitter.emit(), this.viewportMatrix = we(this.contentMatrix), this.afterUpdateEmitter.emit();
   }
   getDimensions() {
     const { width: e, height: t } = this.host.getBoundingClientRect();
     return { width: e, height: t };
   }
   createContentCoords(e) {
-    return ve(this.viewportMatrix, e);
+    return fe(this.viewportMatrix, e);
   }
   createViewportCoords(e) {
-    return ve(this.contentMatrix, e);
+    return fe(this.contentMatrix, e);
   }
   destroy() {
     this.observer.disconnect();
   }
 }
-class ee {
+class q {
   constructor(e) {
     i(this, "elementToNodeId", /* @__PURE__ */ new Map());
     i(this, "nodesResizeObserver");
@@ -759,19 +759,28 @@ class ee {
     }), this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e) {
-    new ee(e);
+    new q(e);
   }
   handleNodeResize(e) {
     const t = this.elementToNodeId.get(e);
     this.canvas.updateNode(t);
   }
 }
-const ht = (r, e, t) => {
+const at = (r, e, t) => {
   const { x: o, y: s, width: n, height: a } = r.getBoundingClientRect();
   return e >= o && e <= o + n && t >= s && t <= s + a;
-}, dt = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight, D = (r, e, t, o) => ht(e, t, o) && dt(r, t, o), Y = (r, e) => {
+}, ht = (r, e, t) => e >= 0 && e <= r.innerWidth && t >= 0 && t <= r.innerHeight;
+class dt {
+  constructor(e, t) {
+    this.element = e, this.win = t;
+  }
+  verify(e, t) {
+    return at(this.element, e, t) && ht(this.win, e, t);
+  }
+}
+const k = (r, e) => {
   e !== null ? r.style.cursor = e : r.style.removeProperty("cursor");
-}, X = (r) => {
+}, Y = (r) => {
   const e = document.createElement("div");
   return {
     id: r.overlayNodeId,
@@ -805,19 +814,19 @@ const ht = (r, e, t) => {
     status: "notFound"
   };
 };
-function* Ce(r, e) {
+function* Te(r, e) {
   const t = r.elementsFromPoint(e.x, e.y);
   for (const o of t) {
     if (o.shadowRoot !== null) {
-      const s = Ce(o.shadowRoot, e);
+      const s = Te(o.shadowRoot, e);
       for (const n of s)
         yield n;
     }
     yield o;
   }
 }
-const Me = (r, e) => {
-  const t = Ce(document, e);
+const Ce = (r, e) => {
+  const t = Te(document, e);
   for (const o of t) {
     const s = ct(r, o);
     if (s.status === "portFound")
@@ -828,13 +837,13 @@ const Me = (r, e) => {
   return null;
 };
 var M = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(M || {});
-const De = (r, e) => ({
+const Me = (r, e) => ({
   x: r / 2,
   y: e / 2
 }), m = (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)
-}), Le = (r, e, t) => {
+}), De = (r, e, t) => {
   const o = {
     x: r.x + r.width / 2,
     y: r.y + r.height / 2
@@ -933,36 +942,36 @@ class ut {
     }, I = {
       x: E.x - s * a.x,
       y: E.y - s * a.y
-    }, U = {
+    }, F = {
       x: f.x + p,
       y: f.y + y
-    }, $ = {
+    }, U = {
       x: E.x + p,
       y: E.y + y
     };
     this.path = [
       `M ${l.x} ${l.y}`,
       `L ${f.x} ${f.y}`,
-      `C ${C.x} ${C.y} ${U.x} ${U.y} ${T.x} ${T.y}`,
-      `C ${$.x} ${$.y} ${I.x} ${I.y} ${E.x} ${E.y}`,
+      `C ${C.x} ${C.y} ${F.x} ${F.y} ${T.x} ${T.y}`,
+      `C ${U.x} ${U.y} ${I.x} ${I.y} ${E.x} ${E.y}`,
       `L ${w.x} ${w.y}`
     ].join(" "), this.midpoint = T;
   }
 }
-const te = Object.freeze({
+const ee = Object.freeze({
   edgeColor: "--edge-color"
-}), Re = (r) => {
+}), Le = (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(te.edgeColor, r), e;
-}, Ve = (r) => {
+  return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(ee.edgeColor, r), e;
+}, Re = (r) => {
   const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return e.setAttribute("stroke", `var(${te.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
-}, H = () => {
+  return e.setAttribute("stroke", `var(${ee.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
+}, X = () => {
   const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return r.setAttribute("fill", `var(${te.edgeColor})`), r;
-}, Fe = (r, e) => {
+  return r.setAttribute("fill", `var(${ee.edgeColor})`), r;
+}, Ve = (r, e) => {
   r.style.transform = `translate(${e.x}px, ${e.y}px)`, r.style.width = `${e.width}px`, r.style.height = `${e.height}px`;
-}, R = (r, e) => {
+}, L = (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 o = r.length - 1;
@@ -1058,7 +1067,7 @@ class pt {
         dirX: n.x
       }
     );
-    this.path = R(
+    this.path = L(
       [g, ...f.points, l],
       d
     ), this.midpoint = f.midpoint;
@@ -1109,7 +1118,7 @@ class wt {
     this.midpoint = {
       x: (b.x + C.x) / 2,
       y: (b.y + C.y) / 2
-    }, this.path = R(
+    }, this.path = L(
       [w, E, b, C, T, p],
       l
     );
@@ -1140,7 +1149,7 @@ class yt {
       o,
       -a
     ), w = a + c, p = { x: t.x + w, y: t.y }, y = m(p, h, t), f = { x: o.x - w, y: o.y }, x = m(f, d, o);
-    this.path = R(
+    this.path = L(
       [g, y, x, l],
       u
     );
@@ -1234,13 +1243,13 @@ class vt {
         dirY: c.y
       }
     );
-    this.path = R(
+    this.path = L(
       [g, ...f.points, l],
       u
     ), this.midpoint = f.midpoint;
   }
 }
-class re {
+class te {
   constructor(e) {
     i(this, "path");
     i(this, "midpoint");
@@ -1254,7 +1263,7 @@ class re {
       { x: d, y: 0 },
       { x: o, y: 0 }
     ].map((w) => m(w, n, { x: 0, y: 0 })).map((w) => ({ x: w.x + a.x, y: w.y + a.y })), l = `M ${a.x} ${a.y} L ${g[0].x} ${g[0].y} `;
-    this.path = `${h ? "" : l}${R(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
+    this.path = `${h ? "" : l}${L(g, e.roundness)}`, this.midpoint = { x: (g[3].x + g[4].x) / 2, y: (g[3].y + g[4].y) / 2 };
   }
 }
 class mt {
@@ -1362,7 +1371,7 @@ class At {
     this.midpoint = {
       x: (y.x + f.x) / 2,
       y: x
-    }, this.path = R(
+    }, this.path = L(
       [
         l,
         y,
@@ -1417,7 +1426,7 @@ class Nt {
     this.midpoint = {
       x,
       y: (y.y + f.y) / 2
-    }, this.path = R(
+    }, this.path = L(
       [
         l,
         y,
@@ -1452,8 +1461,8 @@ const v = Object.freeze({
   curvature: 90,
   interactiveWidth: 10,
   preOffset: 0
-}), me = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
-class G {
+}), ve = (r) => ({ x: Math.cos(r), y: Math.sin(r) });
+class H {
   constructor(e) {
     i(this, "svg");
     i(this, "group", document.createElementNS(
@@ -1466,18 +1475,18 @@ class G {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Re(e.color), this.svg.appendChild(this.group), this.line = Ve(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = H(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = H(), this.group.appendChild(this.targetArrow));
+    this.params = e, [this.afterRenderEmitter, this.onAfterRender] = P(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Le(e.color), this.svg.appendChild(this.group), this.line = Re(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = Le(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = De(
       e.from,
       e.to,
       this.params.padding
     );
-    Fe(this.svg, { x: t, y: o, width: s, height: n });
-    const d = me(e.from.direction), c = me(e.to.direction);
+    Ve(this.svg, { x: t, y: o, width: s, height: n });
+    const d = ve(e.from.direction), c = ve(e.to.direction);
     let u = { x: -c.x, y: -c.y }, g;
-    e.category === V.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === V.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
+    e.category === R.PortCycle ? (g = this.params.createCyclePath, u = d) : e.category === R.NodeCycle ? g = this.params.createDetourPath : g = this.params.createLinePath;
     const l = g(a, h, d, c);
     this.line.setAttribute("d", l.path);
     let w = null;
@@ -1543,7 +1552,7 @@ const bt = (r) => (e) => {
     y: g.y + e.shift.y
   })), h = `M ${a[0].x} ${a[0].y}`, d = `A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`, c = `A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`, u = `A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;
   return `${h} ${d} ${c} ${u}`;
-}, W = (r) => {
+}, B = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
@@ -1562,7 +1571,7 @@ const bt = (r) => (e) => {
         radius: r.radius ?? v.wedgeArrowRadius
       });
   }
-}, O = 50;
+}, W = 50;
 class Ct {
   constructor(e) {
     i(this, "svg");
@@ -1610,17 +1619,17 @@ class Ct {
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
     }));
-    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? v.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? v.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? v.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? v.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? v.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? v.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
@@ -1643,7 +1652,7 @@ class Mt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new re({
+    i(this, "createCyclePath", (e, t, o) => new te({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1681,17 +1690,17 @@ class Mt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
@@ -1715,7 +1724,7 @@ class Dt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new re({
+    i(this, "createCyclePath", (e, t, o) => new te({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1754,17 +1763,17 @@ class Dt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? v.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
@@ -1787,7 +1796,7 @@ class Lt {
     i(this, "hasSourceArrow");
     i(this, "hasTargetArrow");
     i(this, "pathShape");
-    i(this, "createCyclePath", (e, t, o) => new re({
+    i(this, "createCyclePath", (e, t, o) => new te({
       origin: e,
       dir: o,
       arrowLength: this.arrowLength,
@@ -1825,17 +1834,17 @@ class Lt {
       t,
       this.arrowOffset,
       this.cycleSquareSide / 2
-    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new G({
+    ), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? v.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? v.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? v.hasTargetArrow, this.pathShape = new H({
       color: (e == null ? void 0 : e.color) ?? v.color,
       width: (e == null ? void 0 : e.width) ?? v.width,
-      arrowRenderer: W((e == null ? void 0 : e.arrowRenderer) ?? {}),
+      arrowRenderer: B((e == null ? void 0 : e.arrowRenderer) ?? {}),
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow,
       createCyclePath: this.createCyclePath,
       createDetourPath: this.createDetourPath,
       createLinePath: this.createLinePath,
-      padding: O
+      padding: W
     }), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
   }
   render(e) {
@@ -1860,15 +1869,15 @@ class Ie {
     i(this, "onAfterRender");
     i(this, "afterRenderEmitter");
     i(this, "arrowRenderer");
-    [this.afterRenderEmitter, this.onAfterRender] = P(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = W((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Re(this.color), this.svg.appendChild(this.group), this.line = Ve(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = H(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = H(), this.group.appendChild(this.targetArrow));
+    [this.afterRenderEmitter, this.onAfterRender] = P(), this.color = (e == null ? void 0 : e.color) ?? v.color, this.width = (e == null ? void 0 : e.width) ?? v.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? v.arrowLength, this.arrowRenderer = B((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? v.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? v.preOffset, this.svg = Le(this.color), this.svg.appendChild(this.group), this.line = Re(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = X(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = X(), this.group.appendChild(this.targetArrow));
   }
   render(e) {
-    const { x: t, y: o, width: s, height: n, from: a, to: h } = Le(
+    const { x: t, y: o, width: s, height: n, from: a, to: h } = De(
       e.from,
       e.to,
-      O
+      W
     );
-    Fe(this.svg, { x: t, y: o, width: s, height: n });
+    Ve(this.svg, { x: t, y: o, width: s, height: n });
     const d = new xt({
       from: a,
       to: h,
@@ -1927,16 +1936,16 @@ const Rt = () => {
 }, Vt = (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;
-}, xe = (r) => {
+}, me = (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 Ft extends Error {
+class It extends Error {
   constructor(e) {
     super(e), this.name = "InteractiveEdgeError";
   }
 }
-class Ue {
+class Fe {
   constructor(e, t) {
     i(this, "svg");
     i(this, "group");
@@ -1948,13 +1957,13 @@ class Ue {
     i(this, "interactiveLine");
     i(this, "interactiveSourceArrow", null);
     i(this, "interactiveTargetArrow", null);
-    if (this.baseEdge = e, e instanceof Ue)
-      throw new Ft(
+    if (this.baseEdge = e, e instanceof Fe)
+      throw new It(
         "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 o = (t == null ? void 0 : t.distance) ?? v.interactiveWidth;
-    this.interactiveLine = Vt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = xe(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = xe(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
+    this.interactiveLine = Vt(o), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = me(o), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = me(o), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((s) => {
       this.interactiveLine.setAttribute("d", s.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", s.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", s.targetArrowPath);
     });
   }
@@ -1962,7 +1971,7 @@ class Ue {
     this.baseEdge.render(e);
   }
 }
-class Fr {
+class Br {
   constructor(e, t) {
     i(this, "group");
     i(this, "line");
@@ -1979,7 +1988,7 @@ class Fr {
     this.baseShape.render(e);
   }
 }
-class $e {
+class Ue {
   constructor(e) {
     i(this, "onAfterNodeAdded");
     i(this, "onAfterNodeUpdated");
@@ -2075,7 +2084,7 @@ class $e {
     return this.graphStore.getNodeAdjacentEdgeIds(e);
   }
 }
-class K {
+class J {
   constructor(e) {
     i(this, "counter", 0);
     this.checkExists = e;
@@ -2091,15 +2100,15 @@ class K {
     this.counter = 0;
   }
 }
-class Be {
+class $e {
   constructor(e, t, o) {
-    i(this, "nodeIdGenerator", new K(
+    i(this, "nodeIdGenerator", new J(
       (e) => this.graphStore.hasNode(e)
     ));
-    i(this, "portIdGenerator", new K(
+    i(this, "portIdGenerator", new J(
       (e) => this.graphStore.hasPort(e)
     ));
-    i(this, "edgeIdGenerator", new K(
+    i(this, "edgeIdGenerator", new J(
       (e) => this.graphStore.hasEdge(e)
     ));
     i(this, "onAfterNodeAdded", (e) => {
@@ -2222,7 +2231,7 @@ class Be {
     ), this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear), this.htmlView.destroy();
   }
 }
-const It = (r) => {
+const Ft = (r) => {
   setTimeout(() => {
     r();
   });
@@ -2230,10 +2239,10 @@ const It = (r) => {
   queueMicrotask(() => {
     r();
   });
-}, oe = (r) => {
+}, re = (r) => {
   r();
 };
-class We {
+class Be {
   constructor(e) {
     i(this, "onBeforeUpdated");
     i(this, "onAfterUpdated");
@@ -2266,16 +2275,16 @@ const $t = (r, e) => Symbol.iterator in r ? {
   nodes: r.nodes ?? [],
   contentPadding: r.contentPadding ?? r.contentOffset ?? e.focus.contentPadding,
   animationDuration: r.animationDuration ?? e.focus.animationDuration
-}, Oe = (r, e, t) => ({
+}, We = (r, e, t) => ({
   scale: r.scale,
   x: r.x + r.scale * e,
   y: r.y + r.scale * t
-}), ze = (r, e, t, o) => ({
+}), Oe = (r, e, t, o) => ({
   scale: r.scale * e,
   x: r.scale * (1 - e) * t + r.x,
   y: r.scale * (1 - e) * o + r.y
 });
-class ke {
+class ze {
   constructor(e, t, o, s) {
     this.graphStore = e, this.viewportStore = t, this.params = o, this.win = s;
   }
@@ -2287,11 +2296,11 @@ class ke {
   }
   center(e, t) {
     const { width: o, height: s } = this.viewportStore.getDimensions(), n = { x: o / 2, y: s / 2 }, a = this.viewportStore.getViewportMatrix(), h = this.viewportStore.createViewportCoords(e), d = h.x - n.x, c = h.y - n.y;
-    let u = Oe(a, d, c);
+    let u = We(a, d, c);
     const g = t == null ? void 0 : t.contentScale;
     if (g !== void 0) {
       const w = 1 / g;
-      u = ze(
+      u = Oe(
         u,
         w / a.scale,
         n.x,
@@ -2351,10 +2360,10 @@ class ke {
     this.win.requestAnimationFrame(a);
   }
 }
-const Ye = (r, e, t) => {
-  const o = new Te(), s = new $e(o), n = new We(e), a = new be(o, e, r), h = {
+const ke = (r, e, t) => {
+  const o = new Pe(), s = new Ue(o), n = new Be(e), a = new Ne(o, e, r), h = {
     nodes: {
-      centerFn: De,
+      centerFn: Me,
       priorityFn: () => 0
     },
     edges: {
@@ -2364,7 +2373,7 @@ const Ye = (r, e, t) => {
     ports: {
       direction: 0
     }
-  }, d = new Be(
+  }, d = new $e(
     o,
     a,
     h
@@ -2372,18 +2381,18 @@ const Ye = (r, e, t) => {
     focus: {
       contentPadding: 0,
       minContentScale: 0,
-      schedule: oe,
+      schedule: re,
       animationDuration: 0
     }
-  }, u = new ke(
+  }, u = new ze(
     o,
     e,
     c,
     t
   );
-  return new Pe(s, n, d, u);
+  return new be(s, n, d, u);
 };
-class j {
+class G {
   constructor(e, t, o, s) {
     i(this, "onAfterPortMarked", (e) => {
       const t = this.canvas.graph.getPort(e);
@@ -2408,9 +2417,7 @@ class j {
       }));
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!D(
-        this.window,
-        this.element,
+      if (!this.pointInsideVerifier.verify(
         e.clientX,
         e.clientY
       )) {
@@ -2440,9 +2447,7 @@ class j {
     });
     i(this, "onWindowTouchMove", (e) => {
       const t = e.touches[0];
-      if (!D(
-        this.window,
-        this.element,
+      if (!this.pointInsideVerifier.verify(
         t.clientX,
         t.clientY
       )) {
@@ -2464,10 +2469,10 @@ class j {
     i(this, "revert", () => {
       this.params.onStopDrag(), this.reset(), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.canvas = e, this.element = t, this.window = o, this.params = s, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.params = s, this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked), this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
   static configure(e, t, o, s) {
-    new j(e, t, o, s);
+    new G(e, t, o, s);
   }
   hookPortEvents(e) {
     e.addEventListener("mousedown", this.onPortMouseDown, {
@@ -2521,8 +2526,8 @@ class Wt {
     }), this.params.onAfterApplied();
   }
 }
-class se {
-  constructor(e, t, o, s) {
+class oe {
+  constructor(e, t, o, s, n) {
     i(this, "grabbedNode", null);
     i(this, "maxNodePriority", 0);
     i(this, "graph");
@@ -2558,7 +2563,7 @@ class se {
         nodeId: s,
         dx: h.x - n.x,
         dy: h.y - n.y
-      }, Y(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      }, k(this.element, this.params.dragCursor), this.moveNodeOnTop(s), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
@@ -2594,9 +2599,7 @@ class se {
       });
     });
     i(this, "onWindowMouseMove", (e) => {
-      if (!D(
-        this.window,
-        this.element,
+      if (!this.pointInsideVerifier.verify(
         e.clientX,
         e.clientY
       )) {
@@ -2615,9 +2618,7 @@ class se {
       if (e.touches.length !== 1)
         return;
       const t = e.touches[0];
-      if (!D(
-        this.window,
-        this.element,
+      if (!this.pointInsideVerifier.verify(
         t.clientX,
         t.clientY
       )) {
@@ -2641,10 +2642,16 @@ class se {
     i(this, "revert", () => {
       this.reset(), this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
-    this.canvas = e, this.element = t, this.window = o, this.params = s, this.graph = e.graph, this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated), this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
+    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.params = n, 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.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
-  static configure(e, t, o, s) {
-    new se(e, t, o, s);
+  static configure(e, t, o, s, n) {
+    new oe(
+      e,
+      t,
+      o,
+      s,
+      n
+    );
   }
   moveNode(e, t) {
     if (!this.graph.hasNode(e.nodeId))
@@ -2670,7 +2677,7 @@ class se {
     }
   }
   stopMouseDrag() {
-    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, Y(this.element, null), this.removeMouseDragListeners();
+    this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, k(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -2713,7 +2720,7 @@ class se {
     return e;
   }
 }
-const z = (r) => {
+const O = (r) => {
   const e = [], t = r.touches.length;
   for (let h = 0; h < t; h++)
     e.push([r.touches[h].clientX, r.touches[h].clientY]);
@@ -2732,8 +2739,8 @@ const z = (r) => {
     touches: e
   };
 };
-class J {
-  constructor(e, t, o, s) {
+class j {
+  constructor(e, t, o, s, n) {
     i(this, "viewport");
     i(this, "prevTouches", null);
     i(this, "wheelFinishTimer", null);
@@ -2742,16 +2749,14 @@ class J {
       this.removeMouseDragListeners(), this.removeTouchDragListeners();
     });
     i(this, "onMouseDown", (e) => {
-      this.params.mouseDownEventVerifier(e) && (Y(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
+      this.params.mouseDownEventVerifier(e) && (k(this.element, this.params.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
         passive: !0
       }), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
         passive: !0
       }), this.startRegisteredTransform());
     });
     i(this, "onWindowMouseMove", (e) => {
-      const t = D(
-        this.window,
-        this.element,
+      const t = this.pointInsideVerifier.verify(
         e.clientX,
         e.clientY
       );
@@ -2775,10 +2780,10 @@ class J {
     });
     i(this, "onTouchStart", (e) => {
       if (this.prevTouches !== null) {
-        this.prevTouches = z(e);
+        this.prevTouches = O(e);
         return;
       }
-      this.prevTouches = z(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.prevTouches = O(e), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
         passive: !0
       }), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
         passive: !0
@@ -2787,9 +2792,9 @@ class J {
       }), this.startRegisteredTransform();
     });
     i(this, "onWindowTouchMove", (e) => {
-      const t = z(e);
+      const t = O(e);
       if (!t.touches.every(
-        (s) => D(this.window, this.element, s[0], s[1])
+        (s) => this.pointInsideVerifier.verify(s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -2804,12 +2809,12 @@ class J {
       this.prevTouches = t;
     });
     i(this, "onWindowTouchFinish", (e) => {
-      e.touches.length > 0 ? this.prevTouches = z(e) : this.stopTouchDrag();
+      e.touches.length > 0 ? this.prevTouches = O(e) : this.stopTouchDrag();
     });
     i(this, "preventWheelScaleListener", (e) => {
       e.preventDefault();
     });
-    this.canvas = e, this.element = t, this.window = o, this.params = s, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
+    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.params = n, this.element.addEventListener("wheel", this.preventWheelScaleListener, {
       passive: !1
     }), this.viewport = e.viewport, this.handleResize(), this.viewport.onAfterResize.subscribe(() => {
       this.handleResize();
@@ -2821,11 +2826,17 @@ class J {
       passive: !0
     }), e.onBeforeDestroy.subscribe(this.revert);
   }
-  static configure(e, t, o, s) {
-    new J(e, t, o, s);
+  static configure(e, t, o, s, n) {
+    new j(
+      e,
+      t,
+      o,
+      s,
+      n
+    );
   }
   moveViewport(e, t) {
-    const o = this.viewport.getViewportMatrix(), s = Oe(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
+    const o = this.viewport.getViewportMatrix(), s = We(o, e, t), { width: n, height: a } = this.viewport.getDimensions(), h = this.params.transformPreprocessor({
       prevTransform: o,
       nextTransform: s,
       canvasWidth: n,
@@ -2834,7 +2845,7 @@ class J {
     this.performTransform(h);
   }
   scaleViewport(e, t, o) {
-    const s = this.canvas.viewport.getViewportMatrix(), n = ze(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
+    const s = this.canvas.viewport.getViewportMatrix(), n = Oe(s, e, t, o), { width: a, height: h } = this.viewport.getDimensions(), d = this.params.transformPreprocessor({
       prevTransform: s,
       nextTransform: n,
       canvasWidth: a,
@@ -2843,7 +2854,7 @@ class J {
     this.performTransform(d);
   }
   stopMouseDrag() {
-    Y(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
+    k(this.element, null), this.removeMouseDragListeners(), this.finishRegisteredTransform();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2873,8 +2884,8 @@ class J {
     this.params.onResizeTransformStarted(), this.canvas.patchViewportMatrix(s), this.params.onResizeTransformFinished();
   }
 }
-class ie {
-  constructor(e, t, o, s, n, a) {
+class se {
+  constructor(e, t, o, s, n, a, h) {
     i(this, "nodeHorizontal");
     i(this, "nodeVertical");
     i(this, "viewport");
@@ -2897,10 +2908,10 @@ class ie {
       this.userTransformInProgress || this.loadAreaAroundViewport();
     });
     i(this, "userTransformInProgress", !1);
-    this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.params = a, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
+    this.canvas = e, this.element = t, this.window = o, this.trigger = n, this.pointInsideVerifier = a, this.params = h, this.nodeHorizontal = this.params.nodeVerticalRadius, this.nodeVertical = this.params.nodeHorizontalRadius, this.viewport = e.viewport, this.currentScale = this.viewport.getViewportMatrix().scale, this.scheduleLoadAreaAroundViewport(), this.viewport.onAfterResize.subscribe(() => {
       this.scheduleLoadAreaAroundViewport();
     });
-    const h = {
+    const d = {
       ...s,
       onResizeTransformStarted: () => {
         this.userTransformInProgress = !0, s.onResizeTransformStarted();
@@ -2913,28 +2924,30 @@ class ie {
       },
       onTransformChange: () => {
         this.userTransformInProgress = !1;
-        const d = this.currentScale;
-        this.currentScale = this.viewport.getViewportMatrix().scale, d !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), s.onTransformChange();
+        const c = this.currentScale;
+        this.currentScale = this.viewport.getViewportMatrix().scale, c !== this.currentScale && this.scheduleEnsureViewportAreaLoaded(), s.onTransformChange();
       },
       onTransformFinished: () => {
         this.scheduleLoadAreaAroundViewport(), s.onTransformFinished();
       }
     };
-    J.configure(
+    j.configure(
       e,
       this.element,
       this.window,
-      h
+      this.pointInsideVerifier,
+      d
     ), this.trigger.subscribe(this.updateLoadedArea), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated);
   }
-  static configure(e, t, o, s, n, a) {
-    new ie(
+  static configure(e, t, o, s, n, a, h) {
+    new se(
       e,
       t,
       o,
       s,
       n,
-      a
+      a,
+      h
     );
   }
   scheduleLoadAreaAroundViewport() {
@@ -2971,7 +2984,7 @@ const Ot = () => {
   );
   return r.setAttribute("id", "pattern"), r;
 };
-class ne {
+class ie {
   constructor(e, t, o) {
     i(this, "svg", Ot());
     i(this, "patternRenderingRectangle", zt());
@@ -2996,7 +3009,7 @@ class ne {
     }), this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated), this.onAfterTransformUpdated();
   }
   static configure(e, t, o) {
-    new ne(e, t, o);
+    new ie(e, t, o);
   }
   updateVisibility() {
     const { scale: e } = this.canvas.viewport.getViewportMatrix(), t = e > this.maxViewportScale;
@@ -3004,53 +3017,55 @@ class ne {
   }
   updateDimensions() {
     const { width: e, height: t } = this.canvas.viewport.getDimensions();
-    this.svg.setAttribute("width", `${e}`), this.svg.setAttribute("height", `${t}`), this.patternRenderingRectangle.setAttribute("width", `${e}`), this.patternRenderingRectangle.setAttribute("height", `${t}`);
-    const o = this.tileWidth / e, s = this.tileHeight / t;
-    this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
+    if (this.svg.setAttribute("width", `${e}`), this.svg.setAttribute("height", `${t}`), this.patternRenderingRectangle.setAttribute("width", `${e}`), this.patternRenderingRectangle.setAttribute("height", `${t}`), e > 0 && t > 0) {
+      const o = this.tileWidth / e, s = this.tileHeight / t;
+      this.pattern.setAttribute("width", `${o}`), this.pattern.setAttribute("height", `${s}`);
+    }
   }
 }
-class ae {
-  constructor(e, t, o, s, n) {
+class ne {
+  constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
     i(this, "isTargetDragging", !0);
     i(this, "onEdgeCreated", (e) => {
       this.params.onAfterEdgeCreated(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ye(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = ke(
       this.overlayLayer,
       this.viewportStore,
       this.window
-    ), j.configure(
+    ), G.configure(
       this.canvas,
-      this.overlayLayer,
       this.window,
+      this.pointInsideVerifier,
       {
         mouseDownEventVerifier: this.params.mouseDownEventVerifier,
         mouseUpEventVerifier: this.params.mouseUpEventVerifier,
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (a, h) => {
-          const d = this.params.connectionTypeResolver(a);
-          return d === null ? !1 : (this.grabPort(a, h, d), !0);
+        onPortPointerDown: (h, d) => {
+          const c = this.params.connectionTypeResolver(h);
+          return c === null ? !1 : (this.grabPort(h, d, c), !0);
         },
-        onPointerMove: (a) => {
-          this.moveDraggingPort(a);
+        onPointerMove: (h) => {
+          this.moveDraggingPort(h);
         },
-        onPointerUp: (a) => {
-          this.tryCreateConnection(a);
+        onPointerUp: (h) => {
+          this.tryCreateConnection(h);
         }
       }
     );
   }
-  static configure(e, t, o, s, n) {
-    new ae(
+  static configure(e, t, o, s, n, a) {
+    new ne(
       e,
       t,
       o,
       s,
-      n
+      n,
+      a
     );
   }
   grabPort(e, t, o) {
@@ -3073,7 +3088,7 @@ class ae {
     };
     this.isTargetDragging = o === "direct";
     const [w, p] = this.isTargetDragging ? [g, l] : [l, g];
-    this.overlayCanvas.addNode(X(w)), this.overlayCanvas.addNode(X(p)), this.overlayCanvas.addEdge({
+    this.overlayCanvas.addNode(Y(w)), this.overlayCanvas.addNode(Y(p)), this.overlayCanvas.addEdge({
       from: w.overlayNodeId,
       to: p.overlayNodeId,
       shape: this.params.edgeShapeFactory(M.EdgeId)
@@ -3083,7 +3098,7 @@ class ae {
     this.staticPortId = null, this.isTargetDragging = !0, this.overlayCanvas.clear();
   }
   tryCreateConnection(e) {
-    const t = Me(this.canvas.graph, e), o = this.staticPortId;
+    const t = Ce(this.canvas.graph, e), o = this.staticPortId;
     if (t === null) {
       this.params.onEdgeCreationInterrupted({
         staticPortId: o,
@@ -3105,8 +3120,8 @@ class ae {
     });
   }
 }
-class he {
-  constructor(e, t, o, s, n) {
+class ae {
+  constructor(e, t, o, s, n, a) {
     i(this, "overlayCanvas");
     i(this, "staticPortId", null);
     i(this, "isTargetDragging", !0);
@@ -3114,37 +3129,38 @@ class he {
     i(this, "onEdgeReattached", (e) => {
       this.params.onAfterEdgeReattached(e);
     });
-    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.params = n, this.overlayCanvas = Ye(
+    this.canvas = e, this.overlayLayer = t, this.viewportStore = o, this.window = s, this.pointInsideVerifier = n, this.params = a, this.overlayCanvas = ke(
       this.overlayLayer,
       this.viewportStore,
       this.window
-    ), j.configure(
+    ), G.configure(
       this.canvas,
-      this.overlayLayer,
       this.window,
+      this.pointInsideVerifier,
       {
         mouseDownEventVerifier: this.params.mouseDownEventVerifier,
         mouseUpEventVerifier: this.params.mouseUpEventVerifier,
         onStopDrag: () => {
           this.resetDragState();
         },
-        onPortPointerDown: (a, h) => this.tryStartEdgeDragging(a, h),
-        onPointerMove: (a) => {
-          this.moveDraggingPort(a);
+        onPortPointerDown: (h, d) => this.tryStartEdgeDragging(h, d),
+        onPointerMove: (h) => {
+          this.moveDraggingPort(h);
         },
-        onPointerUp: (a) => {
-          this.tryCreateConnection(a);
+        onPointerUp: (h) => {
+          this.tryCreateConnection(h);
         }
       }
     );
   }
-  static configure(e, t, o, s, n) {
-    new he(
+  static configure(e, t, o, s, n, a) {
+    new ae(
       e,
       t,
       o,
       s,
-      n
+      n,
+      a
     );
   }
   tryStartEdgeDragging(e, t) {
@@ -3179,7 +3195,7 @@ class he {
       portCoords: p,
       portDirection: d.direction
     }, [x, E] = this.isTargetDragging ? [y, f] : [f, y];
-    this.overlayCanvas.addNode(X(x)), this.overlayCanvas.addNode(X(E));
+    this.overlayCanvas.addNode(Y(x)), this.overlayCanvas.addNode(Y(E));
     const b = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(M.EdgeId) : s.shape;
     return this.overlayCanvas.addEdge({
       id: M.EdgeId,
@@ -3202,7 +3218,7 @@ class he {
     });
   }
   tryCreateConnection(e) {
-    const t = Me(this.canvas.graph, e);
+    const t = Ce(this.canvas.graph, e);
     if (this.overlayCanvas.removeEdge(M.EdgeId), t === null) {
       const d = this.draggingEdgePayload;
       this.params.onEdgeReattachInterrupted({
@@ -3235,17 +3251,17 @@ class he {
     }
   }
 }
-class de {
+class he {
   constructor(e, t) {
     this.applier = e, this.trigger = t, this.trigger.subscribe(() => {
       this.applier.apply();
     });
   }
   static configure(e, t) {
-    new de(e, t);
+    new he(e, t);
   }
 }
-class ce {
+class de {
   constructor(e, t, o) {
     i(this, "applyScheduled", !1);
     i(this, "apply", () => {
@@ -3262,7 +3278,7 @@ class ce {
     });
   }
   static configure(e, t, o) {
-    new ce(
+    new de(
       e,
       t,
       o
@@ -3281,14 +3297,14 @@ class Yt {
     });
     switch (o.type) {
       case "trigger": {
-        de.configure(
+        he.configure(
           s,
           o.trigger
         );
         break;
       }
       case "topologyChangeSchedule": {
-        ce.configure(
+        de.configure(
           e.graph,
           s,
           o.schedule
@@ -3313,7 +3329,7 @@ class Xt {
     this.win = e, this.callback = t, this.win.requestAnimationFrame(this.step);
   }
 }
-class le {
+class ce {
   constructor(e, t, o) {
     i(this, "applier");
     i(this, "step", (e) => {
@@ -3326,14 +3342,11 @@ class le {
     }), new Xt(this.win, this.step);
   }
   static configure(e, t, o) {
-    new le(e, t, o);
+    new ce(e, t, o);
   }
 }
-class ue {
-  constructor(e) {
-    i(this, "element");
-    i(this, "canvas");
-    i(this, "window");
+class le {
+  constructor(e, t, o, s) {
     i(this, "onNodeSelected");
     i(this, "mouseDownEventVerifier");
     i(this, "mouseUpEventVerifier");
@@ -3393,12 +3406,7 @@ class ue {
     });
     i(this, "onWindowMouseMove", (e) => {
       const t = e, o = this.previousMouse, s = t.clientX - o.x, n = t.clientY - o.y;
-      if (!D(
-        this.window,
-        this.element,
-        t.clientX,
-        t.clientY
-      )) {
+      if (!this.pointInsideVerifier.verify(t.clientX, t.clientY)) {
         this.removeWindowMouseListeners();
         return;
       }
@@ -3413,7 +3421,7 @@ class ue {
         return;
       }
       const o = t.touches[0];
-      if (!D(this.window, this.element, o.clientX, o.clientY)) {
+      if (!this.pointInsideVerifier.verify(o.clientX, o.clientY)) {
         this.removeWindowTouchListeners();
         return;
       }
@@ -3424,18 +3432,23 @@ class ue {
     });
     i(this, "onWindowMouseUp", (e) => {
       const t = e;
-      this.mouseUpEventVerifier(t) && (this.removeWindowMouseListeners(), this.trySelectNode());
+      this.mouseUpEventVerifier(t) && (this.removeWindowMouseListeners(), this.trySelectNode(e));
     });
-    i(this, "onWindowTouchEnd", () => {
-      this.removeWindowTouchListeners(), this.trySelectNode();
+    i(this, "onWindowTouchEnd", (e) => {
+      this.removeWindowTouchListeners(), this.trySelectNode(e);
     });
     i(this, "onWindowTouchCancel", () => {
       this.removeWindowTouchListeners();
     });
-    this.element = e.element, this.canvas = e.canvas, this.window = e.window, this.mouseDownEventVerifier = e.mouseDownEventVerifier, this.mouseUpEventVerifier = e.mouseUpEventVerifier, this.onNodeSelected = e.onNodeSelected, this.movementThreshold = e.movementThreshold, this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
+    this.canvas = e, this.window = t, this.pointInsideVerifier = o, this.mouseDownEventVerifier = s.mouseDownEventVerifier, this.mouseUpEventVerifier = s.mouseUpEventVerifier, this.onNodeSelected = s.onNodeSelected, this.movementThreshold = s.movementThreshold, this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved), this.canvas.graph.onBeforeClear.subscribe(this.reset), this.canvas.onBeforeDestroy.subscribe(this.revert);
   }
-  static configure(e) {
-    new ue(e);
+  static configure(e, t, o, s) {
+    new le(
+      e,
+      t,
+      o,
+      s
+    );
   }
   removeWindowMouseListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -3443,20 +3456,17 @@ class ue {
   removeWindowTouchListeners() {
     this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchEnd), this.window.removeEventListener("touchcancel", this.onWindowTouchCancel);
   }
-  trySelectNode() {
-    const e = this.selectionCandidateNodeId;
-    this.canvas.graph.hasNode(e) && this.onNodeSelected(e);
+  trySelectNode(e) {
+    const t = this.selectionCandidateNodeId;
+    this.canvas.graph.hasNode(t) && (this.onNodeSelected(t), e.ignoreCanvasSelection = !0);
   }
   processMoveThresholdVerification(e, t, o) {
     const s = Math.sqrt(e * e + t * t);
     this.movedDistance += s, this.movedDistance > this.movementThreshold && o();
   }
 }
-class ge {
-  constructor(e) {
-    i(this, "element");
-    i(this, "canvas");
-    i(this, "window");
+class ue {
+  constructor(e, t, o, s, n) {
     i(this, "onCanvasSelected");
     i(this, "movementThreshold");
     i(this, "mouseDownEventVerifier");
@@ -3487,12 +3497,7 @@ class ge {
     });
     i(this, "onWindowMouseMove", (e) => {
       const t = e;
-      if (!D(
-        this.window,
-        this.element,
-        t.clientX,
-        t.clientY
-      )) {
+      if (!this.pointInsideVerifier.verify(t.clientX, t.clientY)) {
         this.removeWindowMouseListeners();
         return;
       }
@@ -3508,7 +3513,7 @@ class ge {
         return;
       }
       const o = t.touches[0];
-      if (!D(this.window, this.element, o.clientX, o.clientY)) {
+      if (!this.pointInsideVerifier.verify(o.clientX, o.clientY)) {
         this.removeWindowTouchListeners();
         return;
       }
@@ -3519,7 +3524,9 @@ class ge {
     });
     i(this, "onWindowMouseUp", (e) => {
       const t = e;
-      this.mouseUpEventVerifier(t) && (this.onCanvasSelected(), this.removeWindowMouseListeners());
+      if (!this.mouseUpEventVerifier(t))
+        return;
+      e.ignoreCanvasSelection !== !0 && this.onCanvasSelected(), this.removeWindowMouseListeners();
     });
     i(this, "onWindowTouchEnd", () => {
       this.onCanvasSelected(), this.removeWindowTouchListeners();
@@ -3530,14 +3537,20 @@ class ge {
     i(this, "restore", () => {
       this.element.removeEventListener("mousedown", this.onMouseDown), this.element.removeEventListener("touchstart", this.onTouchStart), this.removeWindowMouseListeners(), this.removeWindowTouchListeners();
     });
-    this.element = e.element, this.window = e.window, this.onCanvasSelected = e.onCanvasSelected, this.canvas = e.canvas, this.movementThreshold = e.movementThreshold, this.mouseDownEventVerifier = e.mouseDownEventVerifier, this.mouseUpEventVerifier = e.mouseUpEventVerifier, this.canvas.onBeforeDestroy.subscribe(this.restore), this.element.addEventListener("mousedown", this.onMouseDown, {
+    this.canvas = e, this.element = t, this.window = o, this.pointInsideVerifier = s, this.onCanvasSelected = n.onCanvasSelected, this.movementThreshold = n.movementThreshold, this.mouseDownEventVerifier = n.mouseDownEventVerifier, this.mouseUpEventVerifier = n.mouseUpEventVerifier, this.canvas.onBeforeDestroy.subscribe(this.restore), this.element.addEventListener("mousedown", this.onMouseDown, {
       passive: !0
     }), this.element.addEventListener("touchstart", this.onTouchStart, {
       passive: !0
     });
   }
-  static configure(e) {
-    new ge(e);
+  static configure(e, t, o, s, n) {
+    new ue(
+      e,
+      t,
+      o,
+      s,
+      n
+    );
   }
   removeWindowMouseListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -3553,19 +3566,19 @@ class ge {
 const Ht = () => {
   const r = document.createElement("div");
   return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
-}, Z = () => {
+}, Q = () => {
   const r = document.createElement("div");
   return r.style.position = "absolute", r.style.inset = "0", r;
-}, Ee = () => {
-  const r = Z();
+}, xe = () => {
+  const r = Q();
   return r.style.pointerEvents = "none", r;
 };
 class Gt {
   constructor(e) {
-    i(this, "background", Z());
-    i(this, "main", Z());
-    i(this, "overlayConnectablePorts", Ee());
-    i(this, "overlayDraggableEdges", Ee());
+    i(this, "background", Q());
+    i(this, "main", Q());
+    i(this, "overlayConnectablePorts", xe());
+    i(this, "overlayDraggableEdges", xe());
     i(this, "host", Ht());
     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);
   }
@@ -3630,7 +3643,7 @@ const jt = (r) => {
     canvasHeight: e.canvasHeight
   }),
   e.nextTransform
-), Ae = (r) => {
+), Ee = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
@@ -3647,18 +3660,18 @@ const jt = (r) => {
         maxY: r.maxY ?? 1 / 0
       });
   }
-}, Se = (r) => {
-  var p, y, f, x, E, b, T, C, I, U, $, we;
+}, Ae = (r) => {
+  var p, y, f, x, E, b, T, C, I, F, U, pe;
   const e = (p = r == null ? void 0 : r.scale) == null ? void 0 : p.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, o = r == null ? void 0 : r.transformPreprocessor;
   let s;
   o !== void 0 ? Array.isArray(o) ? s = Qt(
     o.map(
-      (L) => Ae(L)
+      (D) => Ee(D)
     )
-  ) : s = Ae(o) : s = (L) => L.nextTransform;
+  ) : s = Ee(o) : s = (D) => D.nextTransform;
   const n = ((y = r == null ? void 0 : r.shift) == null ? void 0 : y.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((f = r == null ? void 0 : r.events) == null ? void 0 : f.onBeforeTransformChange) ?? (() => {
   }), h = ((x = r == null ? void 0 : r.events) == null ? void 0 : x.onTransformChange) ?? (() => {
-  }), d = (E = r == null ? void 0 : r.shift) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (L) => L.button === 0, u = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = u !== void 0 ? u : (L) => L.button === 0, l = (T = r == null ? void 0 : r.scale) == null ? void 0 : T.mouseWheelEventVerifier, w = l !== void 0 ? l : () => !0;
+  }), d = (E = r == null ? void 0 : r.shift) == null ? void 0 : E.mouseDownEventVerifier, c = d !== void 0 ? d : (D) => D.button === 0, u = (b = r == null ? void 0 : r.shift) == null ? void 0 : b.mouseUpEventVerifier, g = u !== void 0 ? u : (D) => D.button === 0, l = (T = r == null ? void 0 : r.scale) == null ? void 0 : T.mouseWheelEventVerifier, w = l !== void 0 ? l : () => !0;
   return {
     wheelSensitivity: t,
     onTransformStarted: ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onTransformStarted) ?? (() => {
@@ -3672,10 +3685,10 @@ const jt = (r) => {
     mouseDownEventVerifier: c,
     mouseUpEventVerifier: g,
     mouseWheelEventVerifier: w,
-    scaleWheelFinishTimeout: ((U = r == null ? void 0 : r.scale) == null ? void 0 : U.wheelFinishTimeout) ?? 500,
-    onResizeTransformStarted: (($ = r == null ? void 0 : r.events) == null ? void 0 : $.onResizeTransformStarted) ?? (() => {
+    scaleWheelFinishTimeout: ((F = r == null ? void 0 : r.scale) == null ? void 0 : F.wheelFinishTimeout) ?? 500,
+    onResizeTransformStarted: ((U = r == null ? void 0 : r.events) == null ? void 0 : U.onResizeTransformStarted) ?? (() => {
     }),
-    onResizeTransformFinished: ((we = r == null ? void 0 : r.events) == null ? void 0 : we.onResizeTransformFinished) ?? (() => {
+    onResizeTransformFinished: ((pe = r == null ? void 0 : r.events) == null ? void 0 : pe.onResizeTransformFinished) ?? (() => {
     })
   };
 }, Zt = (r, e) => {
@@ -3695,7 +3708,7 @@ const jt = (r) => {
     renderer: s,
     maxViewportScale: r.maxViewportScale ?? 10
   };
-}, pe = (r) => {
+}, ge = (r) => {
   if (typeof r == "function")
     return r;
   switch (r.type) {
@@ -3780,7 +3793,7 @@ const jt = (r) => {
     onEdgeCreationInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeCreationInterrupted) ?? d,
     onEdgeCreationPrevented: ((g = r.events) == null ? void 0 : g.onEdgeCreationPrevented) ?? h,
     dragPortDirection: r.dragPortDirection ?? t,
-    edgeShapeFactory: r.edgeShape !== void 0 ? pe(r.edgeShape) : e
+    edgeShapeFactory: r.edgeShape !== void 0 ? ge(r.edgeShape) : e
   };
 }, tr = (r, e) => {
   var c, u, g;
@@ -3796,7 +3809,7 @@ const jt = (r) => {
     mouseDownEventVerifier: r.mouseDownEventVerifier ?? o,
     mouseUpEventVerifier: r.mouseUpEventVerifier ?? s,
     draggingEdgeResolver: r.draggingEdgeResolver ?? n,
-    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? pe(r.draggingEdgeShape) : null,
+    draggingEdgeShapeFactory: r.draggingEdgeShape !== void 0 ? ge(r.draggingEdgeShape) : null,
     onAfterEdgeReattached: ((c = r.events) == null ? void 0 : c.onAfterEdgeReattached) ?? a,
     onEdgeReattachInterrupted: ((u = r.events) == null ? void 0 : u.onEdgeReattachInterrupted) ?? d,
     onEdgeReattachPrevented: ((g = r.events) == null ? void 0 : g.onEdgeReattachPrevented) ?? h
@@ -3819,7 +3832,7 @@ class sr extends Error {
     i(this, "name", "CanvasBuilderError");
   }
 }
-class Xe {
+class Ye {
   constructor(e, t, o) {
     i(this, "dt");
     i(this, "nodeMass");
@@ -3857,7 +3870,7 @@ class Xe {
     });
   }
 }
-class He {
+class Xe {
   constructor(e) {
     i(this, "PI2", 2 * Math.PI);
     this.rand = e;
@@ -3876,7 +3889,7 @@ class He {
     return { ex: h, ey: d, d: a };
   }
 }
-const Ge = (r) => {
+const He = (r) => {
   if (r.distance === 0)
     return r.maxForce;
   const e = r.coefficient * (r.sourceCharge * r.targetCharge / (r.distance * r.distance));
@@ -3897,7 +3910,7 @@ class ir {
         const d = o[h], c = e.get(a), u = e.get(d), g = this.distanceVectorGenerator.create(
           c,
           u
-        ), l = Ge({
+        ), l = He({
           coefficient: 1,
           sourceCharge: this.nodeCharge,
           targetCharge: this.nodeCharge,
@@ -4211,7 +4224,7 @@ class hr {
     const t = this.distanceVectorGenerator.create(
       e.sourceCoords,
       e.targetCoords
-    ), o = Ge({
+    ), o = He({
       coefficient: this.nodeForceCoefficient,
       sourceCharge: e.sourceCharge,
       targetCharge: e.targetCharge,
@@ -4246,7 +4259,7 @@ class hr {
     }
   }
 }
-const je = (r) => r.theta !== 0 ? new hr({
+const Ge = (r) => r.theta !== 0 ? new hr({
   nodeCharge: r.nodeCharge,
   nodeForceCoefficient: r.nodeForceCoefficient,
   distanceVectorGenerator: r.distanceVectorGenerator,
@@ -4260,7 +4273,7 @@ const je = (r) => r.theta !== 0 ? new hr({
   distanceVectorGenerator: r.distanceVectorGenerator,
   maxForce: r.maxForce
 });
-class Je {
+class je {
   constructor(e) {
     i(this, "rand");
     i(this, "sparsity");
@@ -4294,7 +4307,7 @@ class dr {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "convergenceVelocity");
-    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new He(e.rand), this.nodeForcesApplicationStrategy = je({
+    this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Xe(e.rand), this.nodeForcesApplicationStrategy = Ge({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4302,7 +4315,7 @@ class dr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Je({
+    }), this.fillerLayoutAlgorithm = new je({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4312,7 +4325,7 @@ class dr {
       graph: t,
       viewport: o
     });
-    for (let n = 0; n < this.maxIterations && !(new Xe(
+    for (let n = 0; n < this.maxIterations && !(new Ye(
       t,
       s,
       {
@@ -4329,12 +4342,12 @@ class dr {
   }
 }
 class cr {
-  constructor(e) {
+  constructor(e, t) {
     i(this, "forest", /* @__PURE__ */ new Set());
     i(this, "remainingNodeIds");
-    for (this.graph = e, this.remainingNodeIds = new Set(this.graph.getAllNodeIds()); this.remainingNodeIds.size > 0; ) {
-      const [t] = this.remainingNodeIds;
-      this.traverse(t);
+    for (this.graph = e, this.nextLayerNodesResolver = t, this.remainingNodeIds = new Set(this.graph.getAllNodeIds()); this.remainingNodeIds.size > 0; ) {
+      const [o] = this.remainingNodeIds;
+      this.traverse(o);
     }
   }
   generate() {
@@ -4351,26 +4364,20 @@ class cr {
       const n = [];
       s.forEach((a) => {
         o.push(a);
-        const h = this.graph.getNodeOutgoingEdgeIds(a.nodeId).map((u) => {
-          const g = this.graph.getEdge(u);
-          return this.graph.getPort(g.to).nodeId;
-        }), d = this.graph.getNodeIncomingEdgeIds(a.nodeId).map((u) => {
-          const g = this.graph.getEdge(u);
-          return this.graph.getPort(g.from).nodeId;
+        const h = this.nextLayerNodesResolver({
+          graph: this.graph,
+          currentNodeId: a.nodeId
         });
-        (/* @__PURE__ */ new Set([
-          ...h,
-          ...d
-        ])).forEach((u) => {
-          if (!this.remainingNodeIds.has(u))
-            return;
-          this.remainingNodeIds.delete(u);
-          const g = {
-            nodeId: u,
+        for (const d of h) {
+          if (!this.remainingNodeIds.has(d))
+            continue;
+          this.remainingNodeIds.delete(d);
+          const c = {
+            nodeId: d,
             children: /* @__PURE__ */ new Set()
           };
-          a.children.add(g), n.push(g);
-        });
+          a.children.add(c), n.push(c);
+        }
       }), s = n;
     }
   }
@@ -4448,7 +4455,10 @@ class gr {
     this.params = e;
   }
   calculateCoordinates(e) {
-    const t = /* @__PURE__ */ new Map(), s = new cr(e.graph).generate();
+    const t = /* @__PURE__ */ new Map(), s = new cr(
+      e.graph,
+      this.params.nextLayerNodesResolver
+    ).generate();
     let n = 0;
     return s.forEach((a) => {
       t.set(a.root.nodeId, { x: n, y: 0 });
@@ -4473,7 +4483,29 @@ class gr {
     }), t;
   }
 }
-class pr {
+const pr = (r) => {
+  const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((n) => {
+    const a = e.getEdge(n);
+    return e.getPort(a.to).nodeId;
+  }), s = e.getNodeIncomingEdgeIds(t).map((n) => {
+    const a = e.getEdge(n);
+    return e.getPort(a.from).nodeId;
+  });
+  return /* @__PURE__ */ new Set([...o, ...s]);
+}, wr = (r) => {
+  const { graph: e, currentNodeId: t } = r, o = e.getNodeOutgoingEdgeIds(t).map((s) => {
+    const n = e.getEdge(s);
+    return e.getPort(n.to).nodeId;
+  });
+  return new Set(o);
+}, yr = (r) => {
+  const { graph: e, currentNodeId: t } = r, o = e.getNodeIncomingEdgeIds(t).map((s) => {
+    const n = e.getEdge(s);
+    return e.getPort(n.from).nodeId;
+  });
+  return new Set(o);
+};
+class fr {
   constructor(e) {
     i(this, "distanceVectorGenerator");
     i(this, "nodeForcesApplicationStrategy");
@@ -4483,7 +4515,7 @@ class pr {
     i(this, "edgeEquilibriumLength");
     i(this, "edgeStiffness");
     i(this, "fillerLayoutAlgorithm");
-    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new He(e.rand), this.nodeForcesApplicationStrategy = je({
+    this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Xe(e.rand), this.nodeForcesApplicationStrategy = Ge({
       distanceVectorGenerator: this.distanceVectorGenerator,
       nodeCharge: e.nodeCharge,
       maxForce: e.maxForce,
@@ -4491,7 +4523,7 @@ class pr {
       theta: e.barnesHutTheta,
       areaRadiusThreshold: e.barnesHutAreaRadiusThreshold,
       nodeMass: e.nodeMass
-    }), this.fillerLayoutAlgorithm = new Je({
+    }), this.fillerLayoutAlgorithm = new je({
       rand: e.rand,
       sparsity: e.edgeEquilibriumLength
     });
@@ -4501,7 +4533,7 @@ class pr {
       graph: t,
       viewport: o
     });
-    return new Xe(
+    return new Ye(
       t,
       n,
       {
@@ -4518,12 +4550,12 @@ class pr {
     }) ? /* @__PURE__ */ new Map() : n;
   }
 }
-const Ke = (r) => {
+const Je = (r) => {
   let e = 1779033703, t = 3144134277, o = 1013904242, s = 2773480762;
   for (let n = 0, a; n < r.length; n++)
     a = r.charCodeAt(n), e = t ^ Math.imul(e ^ a, 597399067), t = o ^ Math.imul(t ^ a, 2869860233), o = s ^ Math.imul(o ^ a, 951274213), s = e ^ Math.imul(s ^ a, 2716044179);
   return e = Math.imul(o ^ e >>> 18, 597399067), t = Math.imul(s ^ t >>> 22, 2869860233), o = Math.imul(e ^ o >>> 17, 951274213), s = Math.imul(t ^ s >>> 19, 2716044179), e ^= t ^ o ^ s, t ^= e, o ^= e, s ^= e, [e >>> 0, t >>> 0, o >>> 0, s >>> 0];
-}, Qe = (r, e, t, o) => function() {
+}, Ke = (r, e, t, o) => function() {
   r |= 0, e |= 0, t |= 0, o |= 0;
   const s = (r + e | 0) + o | 0;
   return o = o + 1 | 0, r = e ^ e >>> 9, e = t + (t << 3) | 0, t = t << 21 | t >>> 11, t = t + s | 0, (s >>> 0) / 4294967296;
@@ -4541,18 +4573,18 @@ const Ke = (r) => {
   nodeForceCoefficient: 1,
   barnesHutAreaRadiusThreshold: 0.01,
   barnesHutTheta: 1
-}), F = Object.freeze({
+}), V = Object.freeze({
   mouseDownEventVerifier: (r) => r.button === 0,
   mouseUpEventVerifier: (r) => r.button === 0,
   movementThreshold: 10
-}), wr = (r) => {
+}), vr = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     default: {
-      const o = Ke((r == null ? void 0 : r.seed) ?? A.seed), s = Qe(o[0], o[1], o[2], o[3]);
-      return new pr({
+      const o = Je((r == null ? void 0 : r.seed) ?? A.seed), s = Ke(o[0], o[1], o[2], o[3]);
+      return new fr({
         rand: s,
         maxTimeDeltaSec: (r == null ? void 0 : r.maxTimeDeltaSec) ?? A.maxTimeDeltaSec,
         nodeCharge: (r == null ? void 0 : r.nodeCharge) ?? A.nodeCharge,
@@ -4567,30 +4599,30 @@ const Ke = (r) => {
       });
     }
   }
-}, Q = {
+}, K = {
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
   },
   onAfterApplied: () => {
   }
-}, yr = (r) => {
+}, mr = (r) => {
   var t, o;
   return {
-    algorithm: wr((r == null ? void 0 : r.algorithm) ?? {}),
-    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? Q.staticNodeResolver,
-    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? Q.onBeforeApplied,
-    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? Q.onAfterApplied
+    algorithm: vr((r == null ? void 0 : r.algorithm) ?? {}),
+    staticNodeResolver: (r == null ? void 0 : r.staticNodeResolver) ?? K.staticNodeResolver,
+    onBeforeApplied: ((t = r == null ? void 0 : r.events) == null ? void 0 : t.onBeforeApplied) ?? K.onBeforeApplied,
+    onAfterApplied: ((o = r == null ? void 0 : r.events) == null ? void 0 : o.onAfterApplied) ?? K.onAfterApplied
   };
-}, fr = (r) => r instanceof q ? {
+}, xr = (r) => r instanceof _ ? {
   type: "trigger",
   trigger: r
 } : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
   type: "topologyChangeSchedule",
-  schedule: It
+  schedule: Ft
 } : {
   type: "topologyChangeSchedule",
   schedule: Ut
-}, B = Object.freeze({
+}, $ = Object.freeze({
   staticNodeResolver: () => !1,
   onBeforeApplied: () => {
   },
@@ -4600,14 +4632,14 @@ const Ke = (r) => {
     layerWidth: 300,
     layerSpace: 300
   }
-}), k = (r, e) => ({
+}), z = (r, e) => ({
   a: r.a * e.a + r.b * e.d,
   b: r.a * e.b + r.b * e.e,
   c: r.a * e.c + r.b * e.f + r.c,
   d: r.d * e.a + r.e * e.d,
   e: r.d * e.b + r.e * e.e,
   f: r.d * e.c + r.e * e.f + r.f
-}), vr = (r) => {
+}), Er = (r) => {
   const { a: e, b: t, c: o, d: s, e: n, f: a } = r, h = e * n - t * s;
   return {
     a: n / h,
@@ -4618,7 +4650,7 @@ const Ke = (r) => {
     f: (o * s - e * a) / h
   };
 };
-class mr {
+class Ar {
   resolve(e) {
     if ("shift" in e)
       return this.createShiftBaseMatrix(e.shift);
@@ -4652,18 +4684,18 @@ class mr {
     return this.createRelativeTransform(o, s);
   }
   createMirrorRelativeMatrix(e, t) {
-    const o = this.createMirrorYBaseMatrix(), s = k(
+    const o = this.createMirrorYBaseMatrix(), s = z(
       this.createShiftBaseMatrix(t),
       this.createRotateBaseMatrix(e)
     );
     return this.createRelativeTransform(o, s);
   }
   createRelativeTransform(e, t) {
-    const o = k(
+    const o = z(
       t,
       e
-    ), s = vr(t);
-    return k(o, s);
+    ), s = Er(t);
+    return z(o, s);
   }
   createShiftBaseMatrix(e) {
     return {
@@ -4707,7 +4739,7 @@ class mr {
     };
   }
 }
-const xr = (r) => {
+const Sr = (r) => {
   if (r === void 0)
     return (s) => s;
   if (typeof r == "function")
@@ -4721,10 +4753,10 @@ const xr = (r) => {
     e: 1,
     f: 0
   };
-  const o = new mr();
+  const o = new Ar();
   return e.forEach((s) => {
     const n = o.resolve(s);
-    t = k(t, n);
+    t = z(t, n);
   }), (s) => {
     const { x: n, y: a } = s;
     return {
@@ -4732,19 +4764,33 @@ const xr = (r) => {
       y: t.d * n + t.e * a + t.f
     };
   };
-}, Er = (r) => {
+}, Nr = (r) => {
+  if (typeof r == "function")
+    return r;
+  switch (r) {
+    case "outgoing":
+      return wr;
+    case "incoming":
+      return yr;
+    default:
+      return pr;
+  }
+}, br = (r) => {
   var e, t;
   switch (r == null ? void 0 : r.type) {
     case "custom":
       return r.instance;
     case "hierarchical":
       return new gr({
-        layerWidth: r.layerWidth ?? B.hierarchicalLayout.layerWidth,
-        layerSpace: r.layerSpace ?? B.hierarchicalLayout.layerSpace,
-        transform: xr(r.transform)
+        layerWidth: r.layerWidth ?? $.hierarchicalLayout.layerWidth,
+        layerSpace: r.layerSpace ?? $.hierarchicalLayout.layerSpace,
+        transform: Sr(r.transform),
+        nextLayerNodesResolver: Nr(
+          r.nextLayerNodesResolver
+        )
       });
     default: {
-      const o = Ke((r == null ? void 0 : r.seed) ?? A.seed), s = Qe(o[0], o[1], o[2], o[3]);
+      const o = Je((r == null ? void 0 : r.seed) ?? A.seed), s = Ke(o[0], o[1], o[2], o[3]);
       return new dr({
         dtSec: (r == null ? void 0 : r.dtSec) ?? A.dtSec,
         maxIterations: (r == null ? void 0 : r.maxIterations) ?? A.maxIterations,
@@ -4761,16 +4807,16 @@ const xr = (r) => {
       });
     }
   }
-}, Ar = (r) => {
+}, Pr = (r) => {
   var e, t;
   return {
-    algorithm: Er(r.algorithm),
-    applyOn: fr(r.applyOn),
-    staticNodeResolver: r.staticNodeResolver ?? B.staticNodeResolver,
-    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? B.onBeforeApplied,
-    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? B.onAfterApplied
+    algorithm: br(r.algorithm),
+    applyOn: xr(r.applyOn),
+    staticNodeResolver: r.staticNodeResolver ?? $.staticNodeResolver,
+    onBeforeApplied: ((e = r.events) == null ? void 0 : e.onBeforeApplied) ?? $.onBeforeApplied,
+    onAfterApplied: ((t = r.events) == null ? void 0 : t.onAfterApplied) ?? $.onAfterApplied
   };
-}, Sr = (r, e) => ({
+}, Tr = (r, e) => ({
   ...r,
   onNodeDragStarted: (t) => {
     e.add(t), r.onNodeDragStarted(t);
@@ -4778,7 +4824,7 @@ const xr = (r) => {
   onNodeDragFinished: (t) => {
     e.delete(t), r.onNodeDragFinished(t);
   }
-}), Nr = (r, e) => {
+}), Cr = (r, e) => {
   r.graph.onBeforeNodeRemoved.subscribe((t) => {
     e.delete(t);
   }), r.graph.onBeforeClear.subscribe(() => {
@@ -4786,41 +4832,41 @@ const xr = (r) => {
   }), r.onBeforeDestroy.subscribe(() => {
     e.clear();
   });
-}, br = (r, e) => ({
+}, Mr = (r, e) => ({
   ...r,
   staticNodeResolver: (t) => r.staticNodeResolver(t) || e.has(t)
-}), _ = (r) => () => r, Ne = _(0), Pr = () => {
+}), Z = (r) => () => r, Se = Z(0), Dr = () => {
   let r = 0;
   return () => r++;
-}, Tr = (r, e) => {
-  let t = Ne, o = Ne;
-  const s = Pr();
-  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = _(r)), typeof e == "number" && (o = _(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
+}, Lr = (r, e) => {
+  let t = Se, o = Se;
+  const s = Dr();
+  return r === "incremental" && (t = s), e === "incremental" && (o = s), typeof r == "number" && (t = Z(r)), typeof e == "number" && (o = Z(e)), typeof r == "function" && (t = r), typeof e == "function" && (o = e), {
     nodesPriorityFn: t,
     edgesPriorityFn: o
   };
-}, Cr = (r) => {
+}, Rr = (r) => {
   var t, o, s, n, a;
-  const e = Tr(
+  const e = Lr(
     (t = r.nodes) == null ? void 0 : t.priority,
     (o = r.edges) == null ? void 0 : o.priority
   );
   return {
     nodes: {
-      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? De,
+      centerFn: ((s = r.nodes) == null ? void 0 : s.centerFn) ?? Me,
       priorityFn: e.nodesPriorityFn
     },
     ports: {
       direction: ((n = r.ports) == null ? void 0 : n.direction) ?? 0
     },
     edges: {
-      shapeFactory: pe(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
+      shapeFactory: ge(((a = r.edges) == null ? void 0 : a.shape) ?? {}),
       priorityFn: e.edgesPriorityFn
     }
   };
-}, Mr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : oe, Dr = (r) => {
+}, Vr = (r) => r.applyOn.type === "topologyChangeSchedule" ? r.applyOn.schedule : re, Ir = (r) => {
   var o, s, n, a;
-  const { canvasDefaults: e } = r, t = r.hasLayout ? Mr(r.layoutParams) : oe;
+  const { canvasDefaults: e } = r, t = r.hasLayout ? Vr(r.layoutParams) : re;
   return {
     focus: {
       contentPadding: ((o = e.focus) == null ? void 0 : o.contentPadding) ?? ((s = e.focus) == null ? void 0 : s.contentOffset) ?? 100,
@@ -4829,24 +4875,18 @@ const xr = (r) => {
       animationDuration: ((a = e.focus) == null ? void 0 : a.animationDuration) ?? 0
     }
   };
-}, Lr = (r, e, t, o) => ({
-  canvas: r,
-  element: e,
-  window: t,
-  onNodeSelected: o.onNodeSelected,
-  mouseDownEventVerifier: o.mouseDownEventVerifier ?? F.mouseDownEventVerifier,
-  mouseUpEventVerifier: o.mouseUpEventVerifier ?? F.mouseUpEventVerifier,
-  movementThreshold: o.movementThreshold ?? F.movementThreshold
-}), Rr = (r, e, t, o) => ({
-  canvas: r,
-  element: e,
-  window: t,
-  onCanvasSelected: o.onCanvasSelected,
-  mouseDownEventVerifier: o.mouseDownEventVerifier ?? F.mouseDownEventVerifier,
-  mouseUpEventVerifier: o.mouseUpEventVerifier ?? F.mouseUpEventVerifier,
-  movementThreshold: o.movementThreshold ?? F.movementThreshold
+}, Fr = (r) => ({
+  onNodeSelected: r.onNodeSelected,
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? V.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? V.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? V.movementThreshold
+}), Ur = (r) => ({
+  onCanvasSelected: r.onCanvasSelected,
+  mouseDownEventVerifier: r.mouseDownEventVerifier ?? V.mouseDownEventVerifier,
+  mouseUpEventVerifier: r.mouseUpEventVerifier ?? V.mouseUpEventVerifier,
+  movementThreshold: r.movementThreshold ?? V.movementThreshold
 });
-class Ir {
+class Wr {
   constructor(e) {
     i(this, "used", !1);
     i(this, "canvasDefaults", {});
@@ -4868,10 +4908,11 @@ class Ir {
     i(this, "hasUserDraggableEdges", !1);
     i(this, "hasAnimatedLayout", !1);
     i(this, "hasLayout", !1);
-    i(this, "boxRenderingTrigger", new q());
+    i(this, "boxRenderingTrigger", new _());
     i(this, "window", window);
     i(this, "animationStaticNodes", /* @__PURE__ */ new Set());
-    this.element = e;
+    i(this, "pointInsideVerifier");
+    this.element = e, this.pointInsideVerifier = new dt(e, this.window);
   }
   setDefaults(e) {
     return this.canvasDefaults = e, this;
@@ -4915,62 +4956,68 @@ class Ir {
         "Failed to build Canvas because CanvasBuilder is a single-use object"
       );
     this.used = !0;
-    const e = new at(this.element), t = new Te(), o = new Gt(this.element), s = this.createHtmlView(
+    const e = new nt(this.element), t = new Pe(), o = new Gt(this.element), s = this.createHtmlView(
       o.main,
       t,
       e
-    ), n = Cr(
+    ), n = Rr(
       this.canvasDefaults
-    ), a = new Be(
+    ), a = new $e(
       t,
       s,
       n
-    ), h = Ar(this.layoutConfig), d = Dr({
+    ), h = Pr(this.layoutConfig), d = Ir({
       canvasDefaults: this.canvasDefaults,
       hasLayout: this.hasLayout,
       layoutParams: h
-    }), c = new ke(
+    }), c = new ze(
       t,
       e,
       d,
       this.window
-    ), u = new We(e), g = new $e(t), l = new Pe(
+    ), u = new Be(e), g = new Ue(t), l = new be(
       g,
       u,
       a,
       c
     );
-    if (this.hasBackground && ne.configure(
+    if (this.hasBackground && ie.configure(
       l,
       qt(this.backgroundConfig),
       o.background
-    ), this.hasNodeResizeReactiveEdges && ee.configure(l), this.userSelectableNodesConfig !== void 0) {
-      const p = Lr(
+    ), this.hasNodeResizeReactiveEdges && q.configure(l), this.userSelectableNodesConfig !== void 0) {
+      const p = Fr(
+        this.userSelectableNodesConfig
+      );
+      le.configure(
         l,
-        o.main,
         this.window,
-        this.userSelectableNodesConfig
+        this.pointInsideVerifier,
+        p
       );
-      ue.configure(p);
     }
     if (this.userSelectableCanvasConfig !== void 0) {
-      const p = Rr(
+      const p = Ur(
+        this.userSelectableCanvasConfig
+      );
+      ue.configure(
         l,
         o.main,
         this.window,
-        this.userSelectableCanvasConfig
+        this.pointInsideVerifier,
+        p
       );
-      ge.configure(p);
     }
     if (this.hasDraggableNodes) {
       let p = jt(this.dragConfig);
-      this.hasAnimatedLayout && (p = Sr(
+      this.hasAnimatedLayout && (p = Tr(
         p,
         this.animationStaticNodes
-      )), se.configure(
+      )), oe.configure(
         l,
         o.main,
         this.window,
+        this.pointInsideVerifier,
         p
       );
     }
@@ -4980,11 +5027,12 @@ class Ir {
         n.edges.shapeFactory,
         n.ports.direction
       );
-      ae.configure(
+      ne.configure(
         l,
         o.overlayConnectablePorts,
         e,
         this.window,
+        this.pointInsideVerifier,
         p
       );
     }
@@ -4993,37 +5041,40 @@ class Ir {
         this.draggableEdgesConfig,
         l.graph
       );
-      he.configure(
+      ae.configure(
         l,
         o.overlayDraggableEdges,
         e,
         this.window,
+        this.pointInsideVerifier,
         p
       );
     }
-    if (this.virtualScrollConfig !== void 0 ? ie.configure(
+    if (this.virtualScrollConfig !== void 0 ? se.configure(
       l,
       o.main,
       this.window,
-      Se(this.transformConfig),
+      Ae(this.transformConfig),
       this.boxRenderingTrigger,
+      this.pointInsideVerifier,
       rr(this.virtualScrollConfig)
-    ) : this.hasTransformableViewport && J.configure(
+    ) : this.hasTransformableViewport && j.configure(
       l,
       o.main,
       this.window,
-      Se(this.transformConfig)
+      this.pointInsideVerifier,
+      Ae(this.transformConfig)
     ), this.hasLayout && Yt.configure(l, h), this.hasAnimatedLayout) {
-      let p = yr(
+      let p = mr(
         this.animatedLayoutConfig
       );
-      this.hasDraggableNodes && (Nr(
+      this.hasDraggableNodes && (Cr(
         l,
         this.animationStaticNodes
-      ), p = br(
+      ), p = Mr(
         p,
         this.animationStaticNodes
-      )), le.configure(l, p, this.window);
+      )), ce.configure(l, p, this.window);
     }
     const w = () => {
       o.destroy(), l.onBeforeDestroy.unsubscribe(w);
@@ -5031,27 +5082,27 @@ class Ir {
     return l.onBeforeDestroy.subscribe(w), l;
   }
   createHtmlView(e, t, o) {
-    let s = new be(t, o, e);
-    return this.virtualScrollConfig !== void 0 && (s = new st(
+    let s = new Ne(t, o, e);
+    return this.virtualScrollConfig !== void 0 && (s = new ot(
       s,
       t,
       this.boxRenderingTrigger,
       or(this.virtualScrollConfig)
-    )), s = new it(s, t), s;
+    )), s = new st(s, t), s;
   }
 }
 export {
   Ct as BezierEdgeShape,
-  Ir as CanvasBuilder,
+  Wr as CanvasBuilder,
   sr as CanvasBuilderError,
   S as CanvasError,
-  V as ConnectionCategory,
+  R as ConnectionCategory,
   Ie as DirectEdgeShape,
-  q as EventSubject,
+  _ as EventSubject,
   Mt as HorizontalEdgeShape,
-  Ft as InteractiveEdgeError,
-  Ue as InteractiveEdgeShape,
-  Fr as MidpointEdgeShape,
+  It as InteractiveEdgeError,
+  Fe as InteractiveEdgeShape,
+  Br as MidpointEdgeShape,
   Dt as StraightEdgeShape,
   Lt as VerticalEdgeShape
 };