npm - @xyflow/react - Versions diffs - 12.0.0-next.15 → 12.0.0-next.16 - Mend

@xyflow/react 12.0.0-next.15 → 12.0.0-next.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/esm/components/BatchProvider/index.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Queue } from './types';
+import type { Edge, Node } from '../../types';
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
+export declare function BatchProvider<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ children, }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useBatchContext(): {
+    nodeQueue: Queue<any>;
+    edgeQueue: Queue<any>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/BatchProvider/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/BatchProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAU9C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxF,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAmDA;AAED,wBAAgB,eAAe;;;EAQ9B"}

package/dist/esm/components/BatchProvider/types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export type QueueItem<T> = T[] | ((items: T[]) => T[]);
+export type Queue<T> = {
+    get: () => QueueItem<T>[];
+    reset: () => void;
+    push: (item: QueueItem<T>) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/components/BatchProvider/types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/BatchProvider/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;AAEvD,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;IACrB,GAAG,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACpC,CAAC"}

package/dist/esm/components/BatchProvider/useQueue.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { Queue, QueueItem } from './types';
+/**
+ * This hook returns a queue that can be used to batch updates.
+ *
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
+ */
+export declare function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void): Queue<T>;
+//# sourceMappingURL=useQueue.d.ts.map

package/dist/esm/components/BatchProvider/useQueue.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useQueue.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/BatchProvider/useQueue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,YAsCpE"}

package/dist/esm/components/BatchProvider/utils.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { Queue } from './types';
+export declare function createQueue<T>(cb: () => void): Queue<T>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/components/BatchProvider/utils.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/BatchProvider/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAavD"}

package/dist/esm/components/ElementBatcher/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { Edge, Node } from '../../types';
+export declare function ElementBatcher<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): null;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ElementBatcher/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/ElementBatcher/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAM9D,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,UA6ExF"}

package/dist/esm/components/ReactFlowProvider/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAIjD~~,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,OAAO,EACP,QAAQ,GACT,EAAE,sBAAsB,~~2CAcxB~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,OAAO,EACP,QAAQ,GACT,EAAE,sBAAsB,2CAkBxB"}

package/dist/esm/hooks/useElementBatching.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { Node, Edge } from '../types';
+export declare function useElementBatching<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): void;
+//# sourceMappingURL=useElementBatching.d.ts.map

package/dist/esm/hooks/useElementBatching.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useElementBatching.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useElementBatching.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAI3C,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,UAiF5F"}

package/dist/esm/hooks/useNodesInitialized.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"~~AAGA~~,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAsBF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA2C,GAAG,OAAO,CAIjG"}
1	+ {"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAsBF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA2C,GAAG,OAAO,CAIjG"}

package/dist/esm/hooks/useReactFlow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useReactFlow.ts"],"names":[],"mappings":"~~AAYA~~,OAAO,KAAK,EAAE,iBAAiB,EAAY,IAAI,EAAE,IAAI,EAAgB,MAAM,UAAU,CAAC;~~AAItF~~;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,~~CA8UA~~"}
1	+ {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAY,IAAI,EAAE,IAAI,EAAgB,MAAM,UAAU,CAAC;AAEtF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAwPA"}

package/dist/esm/index.js CHANGED Viewed

@@ -644,7 +644,8 @@ function getElementsDiffChanges({ items = [], lookup, }) {
     const changes = [];
     const itemsLookup = new Map(items.map((item) => [item.id, item]));
     for (const item of items) {
-        const storeItem = lookup.get(item.id);
+        const lookupItem = lookup.get(item.id);
+        const storeItem = lookupItem?.internals?.userNode ?? lookupItem;
         if (storeItem !== undefined && storeItem !== item) {
             changes.push({ id: item.id, item: item, type: 'replace' });
         }
@@ -687,30 +688,22 @@ function fixedForwardRef(render) {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
- * Hook for accessing the ReactFlow instance.
+ * This hook returns a queue that can be used to batch updates.
  *
- * @public
- * @returns ReactFlowInstance
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
  */
-function useReactFlow() {
-    const viewportHelper = useViewportHelper();
-    const store = useStoreApi();
-    const getNodes = useCallback(() => store.getState().nodes.map((n) => ({ ...n })), []);
-    const getInternalNode = useCallback((id) => store.getState().nodeLookup.get(id), []);
-    const getNode = useCallback((id) => getInternalNode(id)?.internals.userNode, [getInternalNode]);
-    const getEdges = useCallback(() => {
-        const { edges = [] } = store.getState();
-        return edges.map((e) => ({ ...e }));
-    }, []);
-    const getEdge = useCallback((id) => store.getState().edgeLookup.get(id), []);
-    // A reference of all the batched updates to process before the next render. We
-    // want a mutable reference here so multiple synchronous calls to `setNodes` etc
-    // can be batched together.
-    const setElementsQueue = useRef({ nodes: [], edges: [] });
+function useQueue(runQueue) {
     // Because we're using a ref above, we need some way to let React know when to
     // actually process the queue. We flip this bit of state to `true` any time we
     // mutate the queue and then flip it back to `false` after flushing the queue.
-    const [shouldFlushQueue, setShouldFlushQueue] = useState(false);
+    const [shouldFlush, setShouldFlush] = useState(false);
+    // A reference of all the batched updates to process before the next render. We
+    // want a reference here so multiple synchronous calls to `setNodes` etc can be
+    // batched together.
+    const [queue] = useState(() => createQueue(() => setShouldFlush(true)));
     // Layout effects are guaranteed to run before the next render which means we
     // shouldn't run into any issues with stale state or weird issues that come from
     // rendering things one frame later than expected (we used to use `setTimeout`).
@@ -719,70 +712,123 @@ function useReactFlow() {
         // trigger the hook again (!). If the hook is being run again we know that any
         // updates should have been processed by now and we can safely clear the queue
         // and bail early.
-        if (!shouldFlushQueue) {
-            setElementsQueue.current = { nodes: [], edges: [] };
+        if (!shouldFlush) {
+            queue.reset();
             return;
         }
-        if (setElementsQueue.current.nodes.length) {
-            const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
-            // This is essentially an `Array.reduce` in imperative clothing. Processing
-            // this queue is a relatively hot path so we'd like to avoid the overhead of
-            // array methods where we can.
-            let next = nodes;
-            for (const payload of setElementsQueue.current.nodes) {
-                next = typeof payload === 'function' ? payload(next) : payload;
-            }
-            if (hasDefaultNodes) {
-                setNodes(next);
-            }
-            else if (onNodesChange) {
-                onNodesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: nodeLookup,
-                }));
-            }
-            setElementsQueue.current.nodes = [];
-        }
-        if (setElementsQueue.current.edges.length) {
-            const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
-            let next = edges;
-            for (const payload of setElementsQueue.current.edges) {
-                next = typeof payload === 'function' ? payload(next) : payload;
-            }
-            if (hasDefaultEdges) {
-                setEdges(next);
-            }
-            else if (onEdgesChange) {
-                onEdgesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: edgeLookup,
-                }));
-            }
-            setElementsQueue.current.edges = [];
+        const queueItems = queue.get();
+        if (queueItems.length) {
+            runQueue(queueItems);
+            queue.reset();
         }
         // Beacuse we're using reactive state to trigger this effect, we need to flip
         // it back to false.
-        setShouldFlushQueue(false);
-    }, [shouldFlushQueue]);
+        setShouldFlush(false);
+    }, [shouldFlush]);
+    return queue;
+}
+function createQueue(cb) {
+    let queue = [];
+    return {
+        get: () => queue,
+        reset: () => {
+            queue = [];
+        },
+        push: (item) => {
+            queue.push(item);
+            cb();
+        },
+    };
+}
+const BatchContext = createContext(null);
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
+function BatchProvider({ children, }) {
+    const store = useStoreApi();
+    const nodeQueueHandler = useCallback((queueItems) => {
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        // This is essentially an `Array.reduce` in imperative clothing. Processing
+        // this queue is a relatively hot path so we'd like to avoid the overhead of
+        // array methods where we can.
+        let next = nodes;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultNodes) {
+            setNodes(next);
+        }
+        else if (onNodesChange) {
+            onNodesChange(getElementsDiffChanges({
+                items: next,
+                lookup: nodeLookup,
+            }));
+        }
+    }, []);
+    const nodeQueue = useQueue(nodeQueueHandler);
+    const edgeQueueHandler = useCallback((queueItems) => {
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        let next = edges;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultEdges) {
+            setEdges(next);
+        }
+        else if (onEdgesChange) {
+            onEdgesChange(getElementsDiffChanges({
+                items: next,
+                lookup: edgeLookup,
+            }));
+        }
+    }, []);
+    const edgeQueue = useQueue(edgeQueueHandler);
+    const value = useMemo(() => ({ nodeQueue, edgeQueue }), []);
+    return jsx(BatchContext.Provider, { value: value, children: children });
+}
+function useBatchContext() {
+    const batchContext = useContext(BatchContext);
+    if (!batchContext) {
+        throw new Error('useBatchContext must be used within a BatchProvider');
+    }
+    return batchContext;
+}
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
+function useReactFlow() {
+    const viewportHelper = useViewportHelper();
+    const store = useStoreApi();
+    const batchContext = useBatchContext();
+    const getNodes = useCallback(() => store.getState().nodes.map((n) => ({ ...n })), []);
+    const getInternalNode = useCallback((id) => store.getState().nodeLookup.get(id), []);
+    const getNode = useCallback((id) => getInternalNode(id)?.internals.userNode, [getInternalNode]);
+    const getEdges = useCallback(() => {
+        const { edges = [] } = store.getState();
+        return edges.map((e) => ({ ...e }));
+    }, []);
+    const getEdge = useCallback((id) => store.getState().edgeLookup.get(id), []);
     const setNodes = useCallback((payload) => {
-        setElementsQueue.current.nodes.push(payload);
-        setShouldFlushQueue(true);
+        batchContext.nodeQueue.push(payload);
     }, []);
     const setEdges = useCallback((payload) => {
-        setElementsQueue.current.edges.push(payload);
-        setShouldFlushQueue(true);
+        batchContext.edgeQueue.push(payload);
     }, []);
     const addNodes = useCallback((payload) => {
         const newNodes = Array.isArray(payload) ? payload : [payload];
-        // Queueing a functional update means that we won't worry about other calls
-        // to `setNodes` that might happen elsewhere.
-        setElementsQueue.current.nodes.push((nodes) => [...nodes, ...newNodes]);
-        setShouldFlushQueue(true);
+        batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
     }, []);
     const addEdges = useCallback((payload) => {
         const newEdges = Array.isArray(payload) ? payload : [payload];
-        setElementsQueue.current.edges.push((edges) => [...edges, ...newEdges]);
-        setShouldFlushQueue(true);
+        batchContext.edgeQueue.push((edges) => [...edges, ...newEdges]);
     }, []);
     const toObject = useCallback(() => {
         const { nodes = [], edges = [], transform } = store.getState();
@@ -2805,7 +2851,7 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
         height,
         fitView,
     }));
-    return jsx(Provider$1, { value: store, children: children });
+    return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
@@ -2980,9 +3026,9 @@ const selector$6 = (options) => (s) => {
     if (s.nodeLookup.size === 0) {
         return false;
     }
-    for (const [, node] of s.nodeLookup) {
-        if (options.includeHiddenNodes || !node.hidden) {
-            if (node.internals.handleBounds === undefined) {
+    for (const [, { hidden, internals }] of s.nodeLookup) {
+        if (options.includeHiddenNodes || !hidden) {
+            if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
                 return false;
             }
         }

package/dist/esm/index.mjs CHANGED Viewed

@@ -644,7 +644,8 @@ function getElementsDiffChanges({ items = [], lookup, }) {
     const changes = [];
     const itemsLookup = new Map(items.map((item) => [item.id, item]));
     for (const item of items) {
-        const storeItem = lookup.get(item.id);
+        const lookupItem = lookup.get(item.id);
+        const storeItem = lookupItem?.internals?.userNode ?? lookupItem;
         if (storeItem !== undefined && storeItem !== item) {
             changes.push({ id: item.id, item: item, type: 'replace' });
         }
@@ -687,30 +688,22 @@ function fixedForwardRef(render) {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
- * Hook for accessing the ReactFlow instance.
+ * This hook returns a queue that can be used to batch updates.
  *
- * @public
- * @returns ReactFlowInstance
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
  */
-function useReactFlow() {
-    const viewportHelper = useViewportHelper();
-    const store = useStoreApi();
-    const getNodes = useCallback(() => store.getState().nodes.map((n) => ({ ...n })), []);
-    const getInternalNode = useCallback((id) => store.getState().nodeLookup.get(id), []);
-    const getNode = useCallback((id) => getInternalNode(id)?.internals.userNode, [getInternalNode]);
-    const getEdges = useCallback(() => {
-        const { edges = [] } = store.getState();
-        return edges.map((e) => ({ ...e }));
-    }, []);
-    const getEdge = useCallback((id) => store.getState().edgeLookup.get(id), []);
-    // A reference of all the batched updates to process before the next render. We
-    // want a mutable reference here so multiple synchronous calls to `setNodes` etc
-    // can be batched together.
-    const setElementsQueue = useRef({ nodes: [], edges: [] });
+function useQueue(runQueue) {
     // Because we're using a ref above, we need some way to let React know when to
     // actually process the queue. We flip this bit of state to `true` any time we
     // mutate the queue and then flip it back to `false` after flushing the queue.
-    const [shouldFlushQueue, setShouldFlushQueue] = useState(false);
+    const [shouldFlush, setShouldFlush] = useState(false);
+    // A reference of all the batched updates to process before the next render. We
+    // want a reference here so multiple synchronous calls to `setNodes` etc can be
+    // batched together.
+    const [queue] = useState(() => createQueue(() => setShouldFlush(true)));
     // Layout effects are guaranteed to run before the next render which means we
     // shouldn't run into any issues with stale state or weird issues that come from
     // rendering things one frame later than expected (we used to use `setTimeout`).
@@ -719,70 +712,123 @@ function useReactFlow() {
         // trigger the hook again (!). If the hook is being run again we know that any
         // updates should have been processed by now and we can safely clear the queue
         // and bail early.
-        if (!shouldFlushQueue) {
-            setElementsQueue.current = { nodes: [], edges: [] };
+        if (!shouldFlush) {
+            queue.reset();
             return;
         }
-        if (setElementsQueue.current.nodes.length) {
-            const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
-            // This is essentially an `Array.reduce` in imperative clothing. Processing
-            // this queue is a relatively hot path so we'd like to avoid the overhead of
-            // array methods where we can.
-            let next = nodes;
-            for (const payload of setElementsQueue.current.nodes) {
-                next = typeof payload === 'function' ? payload(next) : payload;
-            }
-            if (hasDefaultNodes) {
-                setNodes(next);
-            }
-            else if (onNodesChange) {
-                onNodesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: nodeLookup,
-                }));
-            }
-            setElementsQueue.current.nodes = [];
-        }
-        if (setElementsQueue.current.edges.length) {
-            const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
-            let next = edges;
-            for (const payload of setElementsQueue.current.edges) {
-                next = typeof payload === 'function' ? payload(next) : payload;
-            }
-            if (hasDefaultEdges) {
-                setEdges(next);
-            }
-            else if (onEdgesChange) {
-                onEdgesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: edgeLookup,
-                }));
-            }
-            setElementsQueue.current.edges = [];
+        const queueItems = queue.get();
+        if (queueItems.length) {
+            runQueue(queueItems);
+            queue.reset();
         }
         // Beacuse we're using reactive state to trigger this effect, we need to flip
         // it back to false.
-        setShouldFlushQueue(false);
-    }, [shouldFlushQueue]);
+        setShouldFlush(false);
+    }, [shouldFlush]);
+    return queue;
+}
+function createQueue(cb) {
+    let queue = [];
+    return {
+        get: () => queue,
+        reset: () => {
+            queue = [];
+        },
+        push: (item) => {
+            queue.push(item);
+            cb();
+        },
+    };
+}
+const BatchContext = createContext(null);
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
+function BatchProvider({ children, }) {
+    const store = useStoreApi();
+    const nodeQueueHandler = useCallback((queueItems) => {
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        // This is essentially an `Array.reduce` in imperative clothing. Processing
+        // this queue is a relatively hot path so we'd like to avoid the overhead of
+        // array methods where we can.
+        let next = nodes;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultNodes) {
+            setNodes(next);
+        }
+        else if (onNodesChange) {
+            onNodesChange(getElementsDiffChanges({
+                items: next,
+                lookup: nodeLookup,
+            }));
+        }
+    }, []);
+    const nodeQueue = useQueue(nodeQueueHandler);
+    const edgeQueueHandler = useCallback((queueItems) => {
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        let next = edges;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultEdges) {
+            setEdges(next);
+        }
+        else if (onEdgesChange) {
+            onEdgesChange(getElementsDiffChanges({
+                items: next,
+                lookup: edgeLookup,
+            }));
+        }
+    }, []);
+    const edgeQueue = useQueue(edgeQueueHandler);
+    const value = useMemo(() => ({ nodeQueue, edgeQueue }), []);
+    return jsx(BatchContext.Provider, { value: value, children: children });
+}
+function useBatchContext() {
+    const batchContext = useContext(BatchContext);
+    if (!batchContext) {
+        throw new Error('useBatchContext must be used within a BatchProvider');
+    }
+    return batchContext;
+}
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
+function useReactFlow() {
+    const viewportHelper = useViewportHelper();
+    const store = useStoreApi();
+    const batchContext = useBatchContext();
+    const getNodes = useCallback(() => store.getState().nodes.map((n) => ({ ...n })), []);
+    const getInternalNode = useCallback((id) => store.getState().nodeLookup.get(id), []);
+    const getNode = useCallback((id) => getInternalNode(id)?.internals.userNode, [getInternalNode]);
+    const getEdges = useCallback(() => {
+        const { edges = [] } = store.getState();
+        return edges.map((e) => ({ ...e }));
+    }, []);
+    const getEdge = useCallback((id) => store.getState().edgeLookup.get(id), []);
     const setNodes = useCallback((payload) => {
-        setElementsQueue.current.nodes.push(payload);
-        setShouldFlushQueue(true);
+        batchContext.nodeQueue.push(payload);
     }, []);
     const setEdges = useCallback((payload) => {
-        setElementsQueue.current.edges.push(payload);
-        setShouldFlushQueue(true);
+        batchContext.edgeQueue.push(payload);
     }, []);
     const addNodes = useCallback((payload) => {
         const newNodes = Array.isArray(payload) ? payload : [payload];
-        // Queueing a functional update means that we won't worry about other calls
-        // to `setNodes` that might happen elsewhere.
-        setElementsQueue.current.nodes.push((nodes) => [...nodes, ...newNodes]);
-        setShouldFlushQueue(true);
+        batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
     }, []);
     const addEdges = useCallback((payload) => {
         const newEdges = Array.isArray(payload) ? payload : [payload];
-        setElementsQueue.current.edges.push((edges) => [...edges, ...newEdges]);
-        setShouldFlushQueue(true);
+        batchContext.edgeQueue.push((edges) => [...edges, ...newEdges]);
     }, []);
     const toObject = useCallback(() => {
         const { nodes = [], edges = [], transform } = store.getState();
@@ -2805,7 +2851,7 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
         height,
         fitView,
     }));
-    return jsx(Provider$1, { value: store, children: children });
+    return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
@@ -2980,9 +3026,9 @@ const selector$6 = (options) => (s) => {
     if (s.nodeLookup.size === 0) {
         return false;
     }
-    for (const [, node] of s.nodeLookup) {
-        if (options.includeHiddenNodes || !node.hidden) {
-            if (node.internals.handleBounds === undefined) {
+    for (const [, { hidden, internals }] of s.nodeLookup) {
+        if (options.includeHiddenNodes || !hidden) {
+            if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
                 return false;
             }
         }

package/dist/umd/components/BatchProvider/index.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Queue } from './types';
+import type { Edge, Node } from '../../types';
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
+export declare function BatchProvider<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ children, }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useBatchContext(): {
+    nodeQueue: Queue<any>;
+    edgeQueue: Queue<any>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/umd/components/BatchProvider/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/umd/components/BatchProvider/types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export type QueueItem<T> = T[] | ((items: T[]) => T[]);
+export type Queue<T> = {
+    get: () => QueueItem<T>[];
+    reset: () => void;
+    push: (item: QueueItem<T>) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/umd/components/BatchProvider/types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

package/dist/umd/components/BatchProvider/useQueue.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { Queue, QueueItem } from './types';
+/**
+ * This hook returns a queue that can be used to batch updates.
+ *
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
+ */
+export declare function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void): Queue<T>;
+//# sourceMappingURL=useQueue.d.ts.map

package/dist/umd/components/BatchProvider/useQueue.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useQueue.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/BatchProvider/useQueue.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,YAsCpE"}

package/dist/umd/components/ElementBatcher/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { Edge, Node } from '../../types';
+export declare function ElementBatcher<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): null;
+//# sourceMappingURL=index.d.ts.map

package/dist/umd/components/ElementBatcher/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/components/ElementBatcher/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAM9D,wBAAgB,cAAc,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,UA6ExF"}