@infinit-canvas/react 0.1.0 → 0.1.2

package/dist/react-infinite-canvas.js

@@ -1004,7 +1004,7 @@ function Lr({
   selectionOnDrag: ne = !1,
   selectionMode: Ie = "partial",
   connectionMode: Bt = "loose",
-  connectionRadius: Qt = 20,
+  connectionRadius: Ot = 20,
   connectOnClick: Yt = !1,
   snapToGrid: me = !1,
   snapGrid: de = [15, 15],
@@ -1013,22 +1013,22 @@ function Lr({
   panOnScroll: Ge = !1,
   panOnScrollMode: $e = "free",
   panOnScrollSpeed: Ze = 0.5,
-  zoomOnScroll: Qe = !0,
-  zoomOnDoubleClick: Ke = !0,
-  zoomOnPinch: Oe = !0,
+  zoomOnScroll: Oe = !0,
+  zoomOnDoubleClick: Qe = !0,
+  zoomOnPinch: Ke = !0,
   preventScrolling: Pe = !0,
   translateExtent: re,
   nodeExtent: oe,
   defaultEdgeOptions: be = {},
   autoPanOnNodeDrag: dn = !0,
   autoPanOnConnect: fn = !0,
-  autoPanSpeed: Kt = 5,
+  autoPanSpeed: Qt = 5,
   edgesReconnectable: Nn = !1,
   elevateNodesOnSelect: hn = !1,
   edgeRouting: fe = !0
 } = {}) {
-  const pt = V(null), Te = V(null), zt = V(null), gt = V({ ...Nt }), se = V([...t]), Z = V([...e]), Pt = V([...n]), yn = V(/* @__PURE__ */ new Map()), Se = V(!1), te = V(null), [gn, pn] = Gt(!1), _t = V(null), Wt = V(null), Me = V(null), ie = V(null), Ut = V(!1), Re = V(null), [Be, Je] = Gt({ x: Nt.x, y: Nt.y, zoom: Nt.zoom }), [Ve, ae] = Gt(null), Ot = St(() => /* @__PURE__ */ new Set(), []), he = St(() => /* @__PURE__ */ new Set(), []), ke = V(!1), Q = V({});
-  Q.current = {
+  const pt = V(null), Te = V(null), zt = V(null), gt = V({ ...Nt }), se = V([...t]), Z = V([...e]), Pt = V([...n]), yn = V(/* @__PURE__ */ new Map()), Se = V(!1), te = V(null), [gn, pn] = Gt(!1), _t = V(null), Wt = V(null), Me = V(null), ie = V(null), Ut = V(!1), Re = V(null), [Be, Je] = Gt({ x: Nt.x, y: Nt.y, zoom: Nt.zoom }), [Ve, ae] = Gt(null), Kt = St(() => /* @__PURE__ */ new Set(), []), he = St(() => /* @__PURE__ */ new Set(), []), ke = V(!1), O = V({});
+  O.current = {
     onHudUpdate: r,
     onNodesProcessed: s,
     onNodesChange: o,
@@ -1067,29 +1067,29 @@ function Lr({
     isValidConnection: ct
   };
   const wt = { get current() {
-    return Q.current.onNodesChange;
+    return O.current.onNodesChange;
   } }, Dt = { get current() {
-    return Q.current.onEdgesChange;
+    return O.current.onEdgesChange;
   } }, ce = { get current() {
-    return Q.current.onConnect;
+    return O.current.onConnect;
   } }, De = { get current() {
-    return Q.current.onNodeClick;
+    return O.current.onNodeClick;
   } }, He = { get current() {
-    return Q.current.onNodeDragStart;
+    return O.current.onNodeDragStart;
   } }, Ae = { get current() {
-    return Q.current.onNodeDrag;
+    return O.current.onNodeDrag;
   } }, _e = { get current() {
-    return Q.current.onNodeDragStop;
+    return O.current.onNodeDragStop;
   } }, le = { get current() {
-    return Q.current.onEdgeClick;
+    return O.current.onEdgeClick;
   } }, We = { get current() {
-    return Q.current.onPaneClick;
+    return O.current.onPaneClick;
   } }, ye = { get current() {
-    return Q.current.onSelectionChange;
+    return O.current.onSelectionChange;
   } }, ge = { get current() {
-    return Q.current.onHudUpdate;
+    return O.current.onHudUpdate;
   } }, pe = { get current() {
-    return Q.current.onNodesProcessed;
+    return O.current.onNodesProcessed;
   } };
   ut(() => {
     const a = (d) => {
@@ -1123,7 +1123,7 @@ function Lr({
         I += h.position.x, $ += h.position.y, h = h.parentId ? m[h.parentId] : null;
       return { ...d, _absolutePosition: { x: I, y: $ } };
     });
-  }, []), ee = V([]), K = F((a) => {
+  }, []), ee = V([]), Q = F((a) => {
     const m = yn.current;
     if (!m || m.size === 0) return a;
     const d = {};
@@ -1136,9 +1136,9 @@ function Lr({
   }, []), Ft = F(() => {
     var m;
     if (_t.current) return;
-    const a = K(ee.current);
+    const a = Q(ee.current);
     (m = zt.current) == null || m.postMessage({ type: "nodes", data: { nodes: a } });
-  }, [K]);
+  }, [Q]);
   ut(() => {
     var d;
     if (_t.current) {
@@ -1154,9 +1154,9 @@ function Lr({
     Z.current = [...e];
     const a = ze(e);
     ee.current = a;
-    const m = K(a);
+    const m = Q(a);
     (d = zt.current) == null || d.postMessage({ type: "nodes", data: { nodes: m } });
-  }, [e, ze, K]), ut(() => {
+  }, [e, ze, Q]), ut(() => {
     var a;
     Pt.current = [...n], (a = zt.current) == null || a.postMessage({ type: "edges", data: { edges: [...n] } });
   }, [n]);
@@ -1210,7 +1210,7 @@ function Lr({
       { id: null, type: "source", x: a.position.x + m, y: a.position.y + d / 2 }
     ];
   }, [xe]), tn = F((a, m) => {
-    const d = Z.current, w = gt.current, I = Math.max(Nr, Qt) / w.zoom;
+    const d = Z.current, w = gt.current, I = Math.max(Nr, Ot) / w.zoom;
     for (let $ = d.length - 1; $ >= 0; $--) {
       const h = d[$];
       if (h.hidden) continue;
@@ -1225,8 +1225,8 @@ function Lr({
     for (let I = Pt.current.length - 1; I >= 0; I--) {
       const $ = Pt.current[I], h = Z.current.find((bt) => bt.id === $.source), A = Z.current.find((bt) => bt.id === $.target);
       if (!h || !A) continue;
-      const S = h.width || Vt, U = h.height || jt, _ = A.height || jt, O = h.position.x + S, it = h.position.y + U / 2, q = A.position.x, nt = A.position.y + _ / 2;
-      if (Ir(a, m, O, it, q, nt) < w) return $;
+      const S = h.width || Vt, U = h.height || jt, _ = A.height || jt, K = h.position.x + S, it = h.position.y + U / 2, q = A.position.x, nt = A.position.y + _ / 2;
+      if (Ir(a, m, K, it, q, nt) < w) return $;
     }
     return null;
   }, []);
@@ -1235,7 +1235,7 @@ function Lr({
     if (!a || !m) return;
     const d = m.getBoundingClientRect(), w = lt !== void 0 ? lt : matchMedia("(prefers-color-scheme: dark)").matches, I = ze(Z.current);
     ee.current = I;
-    const $ = K(I), { worker: h } = Cr(a, {
+    const $ = Q(I), { worker: h } = Cr(a, {
       width: d.width,
       height: d.height,
       camera: gt.current,
@@ -1247,12 +1247,12 @@ function Lr({
       edgeRouting: fe
     });
     h.onmessage = (_) => {
-      var O, it;
-      _.data.type === "hud" && ((O = ge.current) == null || O.call(ge, _.data.data)), _.data.type === "ready" && pn(!0), _.data.type === "nodesProcessed" && ((it = pe.current) == null || it.call(pe, _.data.data));
+      var K, it;
+      _.data.type === "hud" && ((K = ge.current) == null || K.call(ge, _.data.data)), _.data.type === "ready" && pn(!0), _.data.type === "nodesProcessed" && ((it = pe.current) == null || it.call(pe, _.data.data));
     }, zt.current = h;
     const A = new ResizeObserver((_) => {
-      const { width: O, height: it } = _[0].contentRect;
-      h.postMessage({ type: "resize", data: { width: O, height: it } });
+      const { width: K, height: it } = _[0].contentRect;
+      h.postMessage({ type: "resize", data: { width: K, height: it } });
     });
     A.observe(m);
     let S, U;
@@ -1272,18 +1272,18 @@ function Lr({
     if (re) {
       const h = pt.current;
       if (h) {
-        const A = h.getBoundingClientRect(), S = -re[1][0] * m.zoom + A.width, U = -re[1][1] * m.zoom + A.height, _ = -re[0][0] * m.zoom, O = -re[0][1] * m.zoom;
-        m.x = Math.min(_, Math.max(S, m.x)), m.y = Math.min(O, Math.max(U, m.y));
+        const A = h.getBoundingClientRect(), S = -re[1][0] * m.zoom + A.width, U = -re[1][1] * m.zoom + A.height, _ = -re[0][0] * m.zoom, K = -re[0][1] * m.zoom;
+        m.x = Math.min(_, Math.max(S, m.x)), m.y = Math.min(K, Math.max(U, m.y));
       }
     }
     (w = zt.current) == null || w.postMessage({ type: "camera", data: { camera: { ...m } } });
     const d = { x: m.x, y: m.y, zoom: m.zoom };
-    ($ = (I = Q.current).onMove) == null || $.call(I, a, d);
-    for (const h of Ot) h(d);
+    ($ = (I = O.current).onMove) == null || $.call(I, a, d);
+    for (const h of Kt) h(d);
     cancelAnimationFrame(Ln.current), Ln.current = requestAnimationFrame(() => {
       Je({ x: m.x, y: m.y, zoom: m.zoom });
     });
-  }, [Ot, re]), Ce = F(() => {
+  }, [Kt, re]), Ce = F(() => {
     var d, w;
     const a = Wt.current, m = Me.current;
     a && m ? ((d = zt.current) == null || d.postMessage({ type: "connecting", data: { from: a.startPos, to: m, _routedPoints: null } }), ae({ source: a.sourceId, sourceHandle: a.sourceHandle, target: null, targetHandle: null })) : ((w = zt.current) == null || w.postMessage({ type: "connecting", data: null }), ae(null));
@@ -1292,7 +1292,7 @@ function Lr({
     const a = ie.current;
     a ? (m = zt.current) == null || m.postMessage({ type: "selectionBox", data: a }) : (d = zt.current) == null || d.postMessage({ type: "selectionBox", data: null });
   }, []), dr = F((a) => {
-    var I, $, h, A, S, U, _, O, it, q, nt, xt, bt, Ht, Xt, At;
+    var I, $, h, A, S, U, _, K, it, q, nt, xt, bt, Ht, Xt, At;
     const m = Z.current.length > 0, d = st(a.clientX, a.clientY), w = Ut.current;
     if (m && kt) {
       const X = tn(d.x, d.y);
@@ -1300,14 +1300,14 @@ function Lr({
         const J = Re.current;
         if (X.nodeId !== J.nodeId) {
           const qt = J.handleType === "target" ? { source: X.nodeId, target: J.nodeId, sourceHandle: X.handleId || null, targetHandle: J.handleId } : { source: J.nodeId, target: X.nodeId, sourceHandle: J.handleId, targetHandle: X.handleId || null };
-          (Q.current.isValidConnection ? Q.current.isValidConnection(qt) : !0) && ((I = ce.current) == null || I.call(ce, { ...qt, ...be }));
+          (O.current.isValidConnection ? O.current.isValidConnection(qt) : !0) && ((I = ce.current) == null || I.call(ce, { ...qt, ...be }));
         }
         Re.current = null;
         return;
       }
       if (Bt === "strict" ? X && X.type === "source" : X != null) {
         if (Yt) {
-          Re.current = { nodeId: X.nodeId, handleId: X.handleId || null, handleType: X.type }, (h = ($ = Q.current).onConnectStart) == null || h.call($, a, { nodeId: X.nodeId, handleId: X.handleId, handleType: X.type });
+          Re.current = { nodeId: X.nodeId, handleId: X.handleId || null, handleType: X.type }, (h = ($ = O.current).onConnectStart) == null || h.call($, a, { nodeId: X.nodeId, handleId: X.handleId, handleType: X.type });
           return;
         }
         Wt.current = {
@@ -1315,7 +1315,7 @@ function Lr({
           sourceHandle: X.handleId || null,
           sourceType: X.type,
           startPos: { x: X.x, y: X.y }
-        }, Me.current = { x: d.x, y: d.y }, (A = pt.current) == null || A.setPointerCapture(a.pointerId), (U = (S = Q.current).onConnectStart) == null || U.call(S, a, { nodeId: X.nodeId, handleId: X.handleId, handleType: X.type }), Ce();
+        }, Me.current = { x: d.x, y: d.y }, (A = pt.current) == null || A.setPointerCapture(a.pointerId), (U = (S = O.current).onConnectStart) == null || U.call(S, a, { nodeId: X.nodeId, handleId: X.handleId, handleType: X.type }), Ce();
         return;
       }
     }
@@ -1351,7 +1351,7 @@ function Lr({
           if (X.parentId && X.extent === "parent") {
             const tt = Z.current.find((qt) => qt.id === X.parentId);
             if (tt) {
-              const qt = tt.width || Vt, Xe = tt.height || jt, en = X.width || ((O = X.measured) == null ? void 0 : O.width) || Vt, Fe = X.height || ((it = X.measured) == null ? void 0 : it.height) || jt;
+              const qt = tt.width || Vt, Xe = tt.height || jt, en = X.width || ((K = X.measured) == null ? void 0 : K.width) || Vt, Fe = X.height || ((it = X.measured) == null ? void 0 : it.height) || jt;
               J = { minX: 0, minY: 0, maxX: qt - en, maxY: Xe - Fe };
             }
           }
@@ -1421,7 +1421,7 @@ function Lr({
         if (I) {
           const $ = I.getBoundingClientRect(), h = 40, A = a.clientX - $.left, S = a.clientY - $.top;
           let U = 0, _ = 0;
-          A < h ? U = Kt : A > $.width - h && (U = -Kt), S < h ? _ = Kt : S > $.height - h && (_ = -Kt), (U || _) && (gt.current.x += U, gt.current.y += _, Et(a));
+          A < h ? U = Qt : A > $.width - h && (U = -Qt), S < h ? _ = Qt : S > $.height - h && (_ = -Qt), (U || _) && (gt.current.x += U, gt.current.y += _, Et(a));
         }
       }
       return;
@@ -1433,7 +1433,7 @@ function Lr({
         const U = [];
         for (const _ of Z.current) {
           if (_.hidden) continue;
-          const O = _.width || Vt, it = _.height || jt, q = Ie === "full" ? _.position.x >= $ && _.position.x + O <= A && _.position.y >= h && _.position.y + it <= S : _.position.x + O > $ && _.position.x < A && _.position.y + it > h && _.position.y < S;
+          const K = _.width || Vt, it = _.height || jt, q = Ie === "full" ? _.position.x >= $ && _.position.x + K <= A && _.position.y >= h && _.position.y + it <= S : _.position.x + K > $ && _.position.x < A && _.position.y + it > h && _.position.y < S;
           q !== !!_.selected && U.push({ id: _.id, type: "select", selected: q });
         }
         U.length && wt.current(U);
@@ -1479,9 +1479,9 @@ function Lr({
           });
         }
       }
-      const O = new Set(U.map((q) => q.id));
+      const K = new Set(U.map((q) => q.id));
       for (const q of Z.current)
-        if (q.parentId && O.has(q.parentId) && !O.has(q.id)) {
+        if (q.parentId && K.has(q.parentId) && !K.has(q.id)) {
           let nt = Z.current.find((Ht) => Ht.id === q.parentId), xt = q.position.x, bt = q.position.y;
           for (; nt; )
             xt += nt.position.x, bt += nt.position.y, nt = nt.parentId ? Z.current.find((Ht) => Ht.id === nt.parentId) : null;
@@ -1500,7 +1500,7 @@ function Lr({
         if (q) {
           const nt = q.getBoundingClientRect(), xt = 40, bt = a.clientX - nt.left, Ht = a.clientY - nt.top;
           let Xt = 0, At = 0;
-          bt < xt ? Xt = Kt : bt > nt.width - xt && (Xt = -Kt), Ht < xt ? At = Kt : Ht > nt.height - xt && (At = -Kt), (Xt || At) && (gt.current.x += Xt, gt.current.y += At, Et(a));
+          bt < xt ? Xt = Qt : bt > nt.width - xt && (Xt = -Qt), Ht < xt ? At = Qt : Ht > nt.height - xt && (At = -Qt), (Xt || At) && (gt.current.x += Xt, gt.current.y += At, Et(a));
         }
       }
       const it = Z.current.find((q) => q.id === $.id);
@@ -1526,9 +1526,9 @@ function Lr({
           sourceHandle: Wt.current.sourceHandle,
           targetHandle: A.handleId || null
         };
-        (Q.current.isValidConnection ? Q.current.isValidConnection(_) : !0) && ((m = ce.current) == null || m.call(ce, { ..._, ...be }));
+        (O.current.isValidConnection ? O.current.isValidConnection(_) : !0) && ((m = ce.current) == null || m.call(ce, { ..._, ...be }));
       }
-      (w = (d = Q.current).onConnectEnd) == null || w.call(d, a.nativeEvent || a), Wt.current = null, Me.current = null, Ce();
+      (w = (d = O.current).onConnectEnd) == null || w.call(d, a.nativeEvent || a), Wt.current = null, Me.current = null, Ce();
       return;
     }
     if (ie.current) {
@@ -1545,11 +1545,11 @@ function Lr({
           dragging: !1
         }];
         for (const _ of h.selectedStarts) {
-          const O = Z.current.find((it) => it.id === _.id);
+          const K = Z.current.find((it) => it.id === _.id);
           U.push({
             id: _.id,
             type: "position",
-            position: O ? { ...O.position } : void 0,
+            position: K ? { ...K.position } : void 0,
             dragging: !1
           });
         }
@@ -1575,13 +1575,13 @@ function Lr({
         $e === "horizontal" ? w.x -= d.deltaY * S : ($e === "vertical" || (w.x -= d.deltaX * S), w.y -= d.deltaY * S), Et(d);
         return;
       }
-      if (!Qe) return;
+      if (!Oe) return;
       const I = d.deltaY > 0 ? 0.92 : 1.08, $ = a.getBoundingClientRect(), h = d.clientX - $.left, A = d.clientY - $.top;
       w.x = h - (h - w.x) * I, w.y = A - (A - w.y) * I, w.zoom = Math.min(ot, Math.max(et, w.zoom * I)), Et(d);
     };
     return a.addEventListener("wheel", m, { passive: !Pe }), () => a.removeEventListener("wheel", m);
-  }, [Et, et, ot, Ge, $e, Ze, Qe, Pe]), ut(() => {
-    if (!Oe) return;
+  }, [Et, et, ot, Ge, $e, Ze, Oe, Pe]), ut(() => {
+    if (!Ke) return;
     const a = pt.current;
     if (!a) return;
     let m = 0, d = null;
@@ -1600,8 +1600,8 @@ function Lr({
         h.preventDefault();
         const A = h.touches[0].clientX - h.touches[1].clientX, S = h.touches[0].clientY - h.touches[1].clientY, U = Math.hypot(A, S), _ = U / m;
         m = U;
-        const O = gt.current, it = d.x, q = d.y;
-        O.x = it - (it - O.x) * _, O.y = q - (q - O.y) * _, O.zoom = Math.min(ot, Math.max(et, O.zoom * _)), Et(h);
+        const K = gt.current, it = d.x, q = d.y;
+        K.x = it - (it - K.x) * _, K.y = q - (q - K.y) * _, K.zoom = Math.min(ot, Math.max(et, K.zoom * _)), Et(h);
       }
     }, $ = () => {
       m = 0, d = null;
@@ -1609,42 +1609,42 @@ function Lr({
     return a.addEventListener("touchstart", w, { passive: !1 }), a.addEventListener("touchmove", I, { passive: !1 }), a.addEventListener("touchend", $), () => {
       a.removeEventListener("touchstart", w), a.removeEventListener("touchmove", I), a.removeEventListener("touchend", $);
     };
-  }, [Oe, Et, et, ot]), ut(() => {
-    if (!Ke) return;
+  }, [Ke, Et, et, ot]), ut(() => {
+    if (!Qe) return;
     const a = pt.current;
     if (!a) return;
     const m = (d) => {
-      var _, O, it, q;
+      var _, K, it, q;
       const w = st(d.clientX, d.clientY);
       if (Tt(w.x, w.y)) {
-        (O = (_ = Q.current).onNodeDoubleClick) == null || O.call(_, d, Tt(w.x, w.y));
+        (K = (_ = O.current).onNodeDoubleClick) == null || K.call(_, d, Tt(w.x, w.y));
         return;
       }
       const I = ue(w.x, w.y);
       if (I) {
-        (q = (it = Q.current).onEdgeDoubleClick) == null || q.call(it, d, I);
+        (q = (it = O.current).onEdgeDoubleClick) == null || q.call(it, d, I);
         return;
       }
       const $ = 1.5, h = a.getBoundingClientRect(), A = d.clientX - h.left, S = d.clientY - h.top, U = gt.current;
       U.x = A - (A - U.x) * $, U.y = S - (S - U.y) * $, U.zoom = Math.min(ot, Math.max(et, U.zoom * $)), Et(d);
     };
     return a.addEventListener("dblclick", m), () => a.removeEventListener("dblclick", m);
-  }, [Ke, Et, et, ot, st, Tt, ue]), ut(() => {
+  }, [Qe, Et, et, ot, st, Tt, ue]), ut(() => {
     const a = pt.current;
     if (!a) return;
     const m = (d) => {
-      var h, A, S, U, _, O;
+      var h, A, S, U, _, K;
       const w = st(d.clientX, d.clientY), I = Tt(w.x, w.y);
       if (I) {
-        (A = (h = Q.current).onNodeContextMenu) == null || A.call(h, d, I);
+        (A = (h = O.current).onNodeContextMenu) == null || A.call(h, d, I);
         return;
       }
       const $ = ue(w.x, w.y);
       if ($) {
-        (U = (S = Q.current).onEdgeContextMenu) == null || U.call(S, d, $);
+        (U = (S = O.current).onEdgeContextMenu) == null || U.call(S, d, $);
         return;
       }
-      (O = (_ = Q.current).onPaneContextMenu) == null || O.call(_, d);
+      (K = (_ = O.current).onPaneContextMenu) == null || K.call(_, d);
     };
     return a.addEventListener("contextmenu", m), () => a.removeEventListener("contextmenu", m);
   }, [st, Tt, ue]), ut(() => {
@@ -1652,19 +1652,19 @@ function Lr({
     if (!a) return;
     let m = null, d = null;
     const w = (h) => {
-      var U, _, O, it, q, nt, xt, bt, Ht, Xt, At, X, Mt, J;
-      (_ = (U = Q.current).onPaneMouseMove) == null || _.call(U, h);
+      var U, _, K, it, q, nt, xt, bt, Ht, Xt, At, X, Mt, J;
+      (_ = (U = O.current).onPaneMouseMove) == null || _.call(U, h);
       const A = st(h.clientX, h.clientY), S = Tt(A.x, A.y);
-      if (S !== m && (m && ((it = (O = Q.current).onNodeMouseLeave) == null || it.call(O, h, m)), S && ((nt = (q = Q.current).onNodeMouseEnter) == null || nt.call(q, h, S)), m = S), S && ((bt = (xt = Q.current).onNodeMouseMove) == null || bt.call(xt, h, S)), !S) {
+      if (S !== m && (m && ((it = (K = O.current).onNodeMouseLeave) == null || it.call(K, h, m)), S && ((nt = (q = O.current).onNodeMouseEnter) == null || nt.call(q, h, S)), m = S), S && ((bt = (xt = O.current).onNodeMouseMove) == null || bt.call(xt, h, S)), !S) {
         const tt = ue(A.x, A.y);
-        tt !== d && (d && ((Xt = (Ht = Q.current).onEdgeMouseLeave) == null || Xt.call(Ht, h, d)), tt && ((X = (At = Q.current).onEdgeMouseEnter) == null || X.call(At, h, tt)), d = tt), tt && ((J = (Mt = Q.current).onEdgeMouseMove) == null || J.call(Mt, h, tt));
+        tt !== d && (d && ((Xt = (Ht = O.current).onEdgeMouseLeave) == null || Xt.call(Ht, h, d)), tt && ((X = (At = O.current).onEdgeMouseEnter) == null || X.call(At, h, tt)), d = tt), tt && ((J = (Mt = O.current).onEdgeMouseMove) == null || J.call(Mt, h, tt));
       }
     }, I = (h) => {
       var A, S;
-      return (S = (A = Q.current).onPaneMouseEnter) == null ? void 0 : S.call(A, h);
+      return (S = (A = O.current).onPaneMouseEnter) == null ? void 0 : S.call(A, h);
     }, $ = (h) => {
-      var A, S, U, _, O, it;
-      (S = (A = Q.current).onPaneMouseLeave) == null || S.call(A, h), m && ((_ = (U = Q.current).onNodeMouseLeave) == null || _.call(U, h, m), m = null), d && ((it = (O = Q.current).onEdgeMouseLeave) == null || it.call(O, h, d), d = null);
+      var A, S, U, _, K, it;
+      (S = (A = O.current).onPaneMouseLeave) == null || S.call(A, h), m && ((_ = (U = O.current).onNodeMouseLeave) == null || _.call(U, h, m), m = null), d && ((it = (K = O.current).onEdgeMouseLeave) == null || it.call(K, h, d), d = null);
     };
     return a.addEventListener("mousemove", w), a.addEventListener("mouseenter", I), a.addEventListener("mouseleave", $), () => {
       a.removeEventListener("mousemove", w), a.removeEventListener("mouseenter", I), a.removeEventListener("mouseleave", $);
@@ -1675,14 +1675,14 @@ function Lr({
       if (a.includes(d.key)) {
         if (d.target.tagName === "INPUT" || d.target.tagName === "TEXTAREA" || d.target.isContentEditable) return;
         const $ = Z.current.filter((S) => S.selected), h = Pt.current.filter((S) => S.selected);
-        if (!$.length && !h.length || Q.current.onBeforeDelete && !await Q.current.onBeforeDelete({ nodes: $, edges: h }))
+        if (!$.length && !h.length || O.current.onBeforeDelete && !await O.current.onBeforeDelete({ nodes: $, edges: h }))
           return;
         const A = new Set($.map((S) => S.id));
         if ($.length && wt.current && (wt.current($.map((S) => ({ id: S.id, type: "remove" }))), Dt.current)) {
           const S = Pt.current.filter((U) => A.has(U.source) || A.has(U.target));
           S.length && Dt.current(S.map((U) => ({ id: U.id, type: "remove" })));
         }
-        h.length && Dt.current && Dt.current(h.map((S) => ({ id: S.id, type: "remove" }))), (I = (w = Q.current).onDelete) == null || I.call(w, { nodes: $, edges: h });
+        h.length && Dt.current && Dt.current(h.map((S) => ({ id: S.id, type: "remove" }))), (I = (w = O.current).onDelete) == null || I.call(w, { nodes: $, edges: h });
       }
       if ((d.ctrlKey || d.metaKey) && d.key === "a") {
         if (d.target.tagName === "INPUT" || d.target.tagName === "TEXTAREA") return;
@@ -1709,7 +1709,7 @@ function Lr({
           vt != null && vt.maxZoom && (h.zoom = Math.min(h.zoom, vt.maxZoom)), vt != null && vt.minZoom && (h.zoom = Math.max(h.zoom, vt.minZoom)), gt.current = h, Et();
         }
       }
-      (m = (a = Q.current).onInit) == null || m.call(a, {
+      (m = (a = O.current).onInit) == null || m.call(a, {
         getNodes: () => [...Z.current],
         getEdges: () => [...Pt.current],
         getViewport: () => ({ ...gt.current }),
@@ -1768,7 +1768,7 @@ function Lr({
     onEdgesChangeRef: Dt,
     sendCamera: Et,
     screenToWorld: st,
-    viewportListeners: Ot,
+    viewportListeners: Kt,
     selectionListeners: he,
     zoomMin: et,
     zoomMax: ot,
@@ -1793,7 +1793,7 @@ function Lr({
     get connection() {
       return Ve;
     }
-  }), [e, n, $n, Be, Ve, Et, st, Ft, Ot, he, et, ot, me, de, oe, be, fe]);
+  }), [e, n, $n, Be, Ve, Et, st, Ft, Kt, he, et, ot, me, de, oe, be, fe]);
   return {
     wrapRef: pt,
     canvasRef: Te,
@@ -1989,10 +1989,10 @@ function $r({ node: t, nodeType: e }) {
     }
   ) });
 }
-const Pr = Zt($r), Qn = 160, Kn = 60;
+const Pr = Zt($r), On = 160, Qn = 60;
 function Bn(t, e, n, r) {
   var c, u;
-  const s = t.width || ((c = t.measured) == null ? void 0 : c.width) || Qn, o = t.height || ((u = t.measured) == null ? void 0 : u.height) || Kn, i = t._absolutePosition || t.position;
+  const s = t.width || ((c = t.measured) == null ? void 0 : c.width) || On, o = t.height || ((u = t.measured) == null ? void 0 : u.height) || Qn, i = t._absolutePosition || t.position;
   if (t.handleBounds) {
     const l = t.handleBounds[e] || [], g = n ? l.find((v) => v.id === n) : l[0];
     if (g && g.x !== void 0 && g.y !== void 0) {
@@ -2072,7 +2072,7 @@ function Br({ edge: t, edgeType: e, nodes: n, reconnectable: r }) {
       const et = (ot = s.handleRegistryRef) == null ? void 0 : ot.current;
       for (const Lt of s.nodesRef.current) {
         if (Lt.hidden) continue;
-        const kt = Lt.width || Qn, $t = Lt.height || Kn, mt = Lt._absolutePosition || Lt.position, ne = [];
+        const kt = Lt.width || On, $t = Lt.height || Qn, mt = Lt._absolutePosition || Lt.position, ne = [];
         if (et)
           for (const [, Bt] of et)
             Bt.nodeId === Lt.id && ne.push(Bt);
@@ -2081,25 +2081,25 @@ function Br({ edge: t, edgeType: e, nodes: n, reconnectable: r }) {
           { type: "source", position: "right" }
         ];
         for (const Bt of Ie) {
-          let Qt, Yt;
+          let Ot, Yt;
           if (Bt.x !== void 0 && Bt.y !== void 0)
-            Qt = mt.x + Bt.x, Yt = mt.y + Bt.y;
+            Ot = mt.x + Bt.x, Yt = mt.y + Bt.y;
           else
             switch (Bt.position || (Bt.type === "source" ? "right" : "left")) {
               case "top":
-                Qt = mt.x + kt / 2, Yt = mt.y;
+                Ot = mt.x + kt / 2, Yt = mt.y;
                 break;
               case "bottom":
-                Qt = mt.x + kt / 2, Yt = mt.y + $t;
+                Ot = mt.x + kt / 2, Yt = mt.y + $t;
                 break;
               case "left":
-                Qt = mt.x, Yt = mt.y + $t / 2;
+                Ot = mt.x, Yt = mt.y + $t / 2;
                 break;
               default:
-                Qt = mt.x + kt, Yt = mt.y + $t / 2;
+                Ot = mt.x + kt, Yt = mt.y + $t / 2;
                 break;
             }
-          if (Math.abs(rt - Qt) < ct && Math.abs(at - Yt) < ct) {
+          if (Math.abs(rt - Ot) < ct && Math.abs(at - Yt) < ct) {
             lt = Lt, Ct = Bt.id || null;
             break;
           }
@@ -2177,7 +2177,7 @@ function Br({ edge: t, edgeType: e, nodes: n, reconnectable: r }) {
   );
 }
 const Dr = Zt(Br);
-function On({ selectionKeyCode: t = "Shift", selectionMode: e = "partial" }) {
+function Kn({ selectionKeyCode: t = "Shift", selectionMode: e = "partial" }) {
   var T;
   const n = ht(), [r, s] = Gt(null), o = V(null);
   if (ut(() => {
@@ -2240,8 +2240,8 @@ function On({ selectionKeyCode: t = "Shift", selectionMode: e = "partial" }) {
     }
   );
 }
-On.displayName = "SelectionBox";
-const Hr = Zt(On);
+Kn.displayName = "SelectionBox";
+const Hr = Zt(Kn);
 function Jn(t, e) {
   var s, o, i, c;
   const n = (s = t.handleRegistryRef) == null ? void 0 : s.current;
@@ -3235,7 +3235,7 @@ const ar = Zt(function({
   );
 });
 ar.displayName = "SmoothStepEdge";
-const Qr = Zt(function({ id: e, ...n }) {
+const Or = Zt(function({ id: e, ...n }) {
   var s;
   const r = St(
     () => {
@@ -3246,7 +3246,7 @@ const Qr = Zt(function({ id: e, ...n }) {
   );
   return /* @__PURE__ */ B(ar, { ...n, id: e, pathOptions: r });
 });
-Qr.displayName = "StepEdge";
+Or.displayName = "StepEdge";
 const cr = Zt(function({
   id: e,
   sourceX: n,
@@ -3300,11 +3300,11 @@ const cr = Zt(function({
   );
 });
 cr.displayName = "SimpleBezierEdge";
-const Kr = {
+const Qr = {
   input: _r,
   output: Wr,
   group: Xr
-}, Or = {
+}, Kr = {
   // smoothstep/step are handled by the canvas worker directly (not React SVG)
   bezier: tr,
   straight: ir,
@@ -3371,7 +3371,7 @@ function Io({
   onDragEnter: Ie,
   onDragLeave: Bt,
   // Behavior
-  nodesDraggable: Qt,
+  nodesDraggable: Ot,
   nodesConnectable: Yt,
   elementsSelectable: me,
   multiSelectionKeyCode: de,
@@ -3380,16 +3380,16 @@ function Io({
   connectionMode: Ge,
   connectionRadius: $e,
   connectOnClick: Ze,
-  isValidConnection: Qe,
-  defaultEdgeOptions: Ke,
-  snapToGrid: Oe,
+  isValidConnection: Oe,
+  defaultEdgeOptions: Qe,
+  snapToGrid: Ke,
   snapGrid: Pe,
   deleteKeyCode: re,
   panActivationKeyCode: oe,
   panOnScroll: be,
   panOnScrollMode: dn,
   panOnScrollSpeed: fn,
-  zoomOnScroll: Kt,
+  zoomOnScroll: Qt,
   zoomOnDoubleClick: Nn,
   zoomOnPinch: hn,
   preventScrolling: fe,
@@ -3413,17 +3413,17 @@ function Io({
   ...ie
 }) {
   const [Ut, Re] = Gt({ wx: 0, wy: 0, zoom: "1.00" }), Be = V(null), Je = V(null), Ve = F(
-    (K) => {
-      Re(K), te == null || te(K);
+    (Q) => {
+      Re(Q), te == null || te(Q);
     },
     [te]
-  ), ae = St(() => ({ ...Kr, ...r }), [r]), Ot = St(() => ({ ...Or, ...s }), [s]), he = St(() => {
-    const K = e.filter((Ft) => Ft.type && ae[Ft.type]);
-    return K.sort((Ft, st) => {
-      const Tt = Ft.type === "group" || !Ft.parentId && K.some((Ee) => Ee.parentId === Ft.id), xe = st.type === "group" || !st.parentId && K.some((Ee) => Ee.parentId === st.id);
+  ), ae = St(() => ({ ...Qr, ...r }), [r]), Kt = St(() => ({ ...Kr, ...s }), [s]), he = St(() => {
+    const Q = e.filter((Ft) => Ft.type && ae[Ft.type]);
+    return Q.sort((Ft, st) => {
+      const Tt = Ft.type === "group" || !Ft.parentId && Q.some((Ee) => Ee.parentId === Ft.id), xe = st.type === "group" || !st.parentId && Q.some((Ee) => Ee.parentId === st.id);
       return Tt && !xe ? -1 : !Tt && xe ? 1 : 0;
     });
-  }, [e, ae]), ke = St(() => n.filter((K) => K.type && Ot[K.type]), [n, Ot]), Q = St(() => e.map((K) => K.type && ae[K.type] ? { ...K, _customRendered: !0 } : K), [e, ae]), wt = St(() => n.map((K) => K.type && Ot[K.type] ? { ...K, _customRendered: !0 } : K), [n, Ot]), {
+  }, [e, ae]), ke = St(() => n.filter((Q) => Q.type && Kt[Q.type]), [n, Kt]), O = St(() => e.map((Q) => Q.type && ae[Q.type] ? { ...Q, _customRendered: !0 } : Q), [e, ae]), wt = St(() => n.map((Q) => Q.type && Kt[Q.type] ? { ...Q, _customRendered: !0 } : Q), [n, Kt]), {
     wrapRef: Dt,
     canvasRef: ce,
     canvasReady: De,
@@ -3433,7 +3433,7 @@ function Io({
     store: le
   } = Lr({
     cards: t,
-    nodes: Q,
+    nodes: O,
     edges: wt,
     dark: o,
     gridSize: i,
@@ -3477,7 +3477,7 @@ function Io({
     onDelete: Lt,
     onBeforeDelete: kt,
     onError: $t,
-    nodesDraggable: Qt,
+    nodesDraggable: Ot,
     nodesConnectable: Yt,
     elementsSelectable: me,
     multiSelectionKeyCode: de,
@@ -3486,16 +3486,16 @@ function Io({
     connectionMode: Ge,
     connectionRadius: $e,
     connectOnClick: Ze,
-    isValidConnection: Qe,
-    defaultEdgeOptions: Ke,
-    snapToGrid: Oe,
+    isValidConnection: Oe,
+    defaultEdgeOptions: Qe,
+    snapToGrid: Ke,
     snapGrid: Pe,
     deleteKeyCode: re,
     panActivationKeyCode: oe,
     panOnScroll: be,
     panOnScrollMode: dn,
     panOnScrollSpeed: fn,
-    zoomOnScroll: Kt,
+    zoomOnScroll: Qt,
     zoomOnDoubleClick: Nn,
     zoomOnPinch: hn,
     preventScrolling: fe,
@@ -3520,12 +3520,12 @@ function Io({
     }
   }), [le, e, n]), ye = V(null), ge = V(null), pe = V(null), Jt = V(null);
   ut(() => {
-    let K;
+    let Q;
     const Ft = () => {
       const st = le.cameraRef.current, Tt = `translate(${st.x}px, ${st.y}px) scale(${st.zoom})`, xe = `translate(${st.x}, ${st.y}) scale(${st.zoom})`;
-      ye.current && (ye.current.style.transform = Tt), ge.current && ge.current.setAttribute("transform", xe), pe.current && (pe.current.style.transform = Tt), Jt.current && (Jt.current.style.transform = Tt), K = requestAnimationFrame(Ft);
+      ye.current && (ye.current.style.transform = Tt), ge.current && ge.current.setAttribute("transform", xe), pe.current && (pe.current.style.transform = Tt), Jt.current && (Jt.current.style.transform = Tt), Q = requestAnimationFrame(Ft);
     };
-    return K = requestAnimationFrame(Ft), () => cancelAnimationFrame(K);
+    return Q = requestAnimationFrame(Ft), () => cancelAnimationFrame(Q);
   }, [le]);
   const ze = he.length > 0, ee = ke.length > 0;
   return /* @__PURE__ */ B(Zn.Provider, { value: We, children: /* @__PURE__ */ It(
@@ -3558,15 +3558,15 @@ function Io({
               pointerEvents: "none",
               overflow: "visible"
             },
-            children: /* @__PURE__ */ B("g", { ref: ge, children: ke.map((K) => /* @__PURE__ */ B(
+            children: /* @__PURE__ */ B("g", { ref: ge, children: ke.map((Q) => /* @__PURE__ */ B(
               Dr,
               {
-                edge: K,
-                edgeType: Ot[K.type],
+                edge: Q,
+                edgeType: Kt[Q.type],
                 nodes: e,
                 reconnectable: Z
               },
-              K.id
+              Q.id
             )) })
           }
         ),
@@ -3585,21 +3585,21 @@ function Io({
               pointerEvents: "none",
               zIndex: 10
             },
-            children: he.map((K) => /* @__PURE__ */ B(
+            children: he.map((Q) => /* @__PURE__ */ B(
               Pr,
               {
-                node: K,
-                nodeType: ae[K.type]
+                node: Q,
+                nodeType: ae[Q.type]
               },
-              K.id
+              Q.id
             ))
           }
         ),
         /* @__PURE__ */ B(
           "div",
           {
-            ref: (K) => {
-              Be.current = K, pe.current = K;
+            ref: (Q) => {
+              Be.current = Q, pe.current = Q;
             },
             className: "ric-edge-labels",
             style: {
@@ -3617,8 +3617,8 @@ function Io({
         /* @__PURE__ */ B(
           "div",
           {
-            ref: (K) => {
-              Je.current = K, Jt.current = K;
+            ref: (Q) => {
+              Je.current = Q, Jt.current = Q;
             },
             className: "ric-viewport-portal",
             style: {
@@ -3942,7 +3942,7 @@ function Zo(t) {
   const e = ht();
   return typeof t == "function" ? t(e) : e;
 }
-function Qo() {
+function Oo() {
   const t = ht();
   return St(() => ({
     getState: () => t,
@@ -3952,7 +3952,7 @@ function Qo() {
   }), [t]);
 }
 const wn = 160, bn = 60;
-function Ko({
+function Qo({
   width: t = 200,
   height: e = 150,
   nodeColor: n = "#3b82f6",
@@ -4173,7 +4173,7 @@ const co = {
   lineHeight: 1,
   color: "#333",
   padding: 0
-}, Oo = Zt(ao);
+}, Ko = Zt(ao);
 function Jo({
   variant: t = "lines",
   gap: e = 40,
@@ -4473,14 +4473,26 @@ function ur({
   );
 }
 ur.displayName = "ConnectionLine";
-const ss = Zt(ur);
+const ss = Zt(ur), is = Object.freeze({
+  Top: "top",
+  Bottom: "bottom",
+  Left: "left",
+  Right: "right"
+}), as = Object.freeze({
+  Arrow: "arrow",
+  ArrowClosed: "arrowclosed"
+});
+function cs(t) {
+  const e = t.width || t.measured && t.measured.width || 0, n = t.height || t.measured && t.measured.height || 0, r = t._absolutePosition || t.position || { x: 0, y: 0 };
+  return { x: r.x, y: r.y, x2: r.x + e, y2: r.y + n };
+}
 export {
   Jo as Background,
   un as BaseEdge,
   tr as BezierEdge,
   ss as ConnectionLine,
   rn as ControlButton,
-  Oo as Controls,
+  Ko as Controls,
   ko as DefaultNode,
   rs as EdgeLabelRenderer,
   Fr as EdgeText,
@@ -4490,15 +4502,17 @@ export {
   Io as InfiniteCanvas,
   $o as InfiniteCanvasProvider,
   _r as InputNode,
-  Ko as MiniMap,
+  as as MarkerType,
+  Qo as MiniMap,
   ts as NodeResizer,
   es as NodeToolbar,
   Wr as OutputNode,
   Vo as Panel,
+  is as Position,
   Hr as SelectionBox,
   cr as SimpleBezierEdge,
   ar as SmoothStepEdge,
-  Qr as StepEdge,
+  Or as StepEdge,
   ir as StraightEdge,
   os as ViewportPortal,
   Po as addEdge,
@@ -4526,6 +4540,7 @@ export {
   Rn as getViewportForBounds,
   yo as isEdge,
   ho as isNode,
+  cs as nodeToBox,
   Mo as nodeToRect,
   Co as reconnectEdge,
   mo as rectToBox,
@@ -4549,7 +4564,7 @@ export {
   Fo as useOnViewportChange,
   eo as useReactFlow,
   Zo as useStore,
-  Qo as useStoreApi,
+  Oo as useStoreApi,
   qo as useUpdateNodeInternals,
   Ho as useViewport
 };