@xyflow/react 12.0.0-next.0 → 12.0.0-next.10

package/dist/esm/index.js

@@ -1,14 +1,12 @@
 "use client"
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, memo, useEffect, useRef, useState, useCallback, forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo, useEffect, useRef, useState, useLayoutEffect, useCallback, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, getPointerPosition, clamp, getNodeToolbarTransform } from '@xyflow/system';
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, isMouseEvent, XYHandle, getHostForElement, ConnectionMode, addEdge, getNodesBounds, clampPosition, internalsSymbol, getNodeDimensions, nodeHasDimensions, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, devWarn, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol, updateEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import { createPortal } from 'react-dom';
-import { drag } from 'd3-drag';
-import { select } from 'd3-selection';
 
 const StoreContext = createContext(null);
 const Provider$1 = StoreContext.Provider;
@@ -21,6 +19,10 @@ const zustandErrorMessage = errorMessages['error001']();
  * @param selector
  * @param equalityFn
  * @returns The selected state slice
+ *
+ * @example
+ * const nodes = useStore((state: ReactFlowState<MyNodeType>) => state.nodes);
+ *
  */
 function useStore(selector, equalityFn) {
     const store = useContext(StoreContext);
@@ -29,7 +31,7 @@ function useStore(selector, equalityFn) {
     }
     return useStoreWithEqualityFn(store, selector, equalityFn);
 }
-const useStoreApi = () => {
+function useStoreApi() {
     const store = useContext(StoreContext);
     if (store === null) {
         throw new Error(zustandErrorMessage);
@@ -40,11 +42,35 @@ const useStoreApi = () => {
         subscribe: store.subscribe,
         destroy: store.destroy,
     }), [store]);
+}
+
+const style = { display: 'none' };
+const ariaLiveStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    border: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    clipPath: 'inset(100%)',
 };
+const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
+const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
+const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
+const selector$q = (s) => s.ariaLiveMessage;
+function AriaLiveMessage({ rfId }) {
+    const ariaLiveMessage = useStore(selector$q);
+    return (jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage }));
+}
+function A11yDescriptions({ rfId, disableKeyboardA11y }) {
+    return (jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && 'You can then use the arrow keys to move the node around.', " Press delete to remove it and escape to cancel.", ' '] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));
+}
 
-const selector$q = (s) => (s.userSelectionActive ? 'none' : 'all');
-function Panel({ position, children, className, style, ...rest }) {
-    const pointerEvents = useStore(selector$q);
+const selector$p = (s) => (s.userSelectionActive ? 'none' : 'all');
+function Panel({ position = 'top-left', children, className, style, ...rest }) {
+    const pointerEvents = useStore(selector$p);
     const positionClasses = `${position}`.split('-');
     return (jsx("div", { className: cc(['react-flow__panel', className, ...positionClasses]), style: { ...style, pointerEvents }, ...rest, children: children }));
 }
@@ -56,7 +82,7 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
     return (jsx(Panel, { position: position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) }));
 }
 
-const selector$p = (s) => ({
+const selector$o = (s) => ({
     selectedNodes: s.nodes.filter((n) => n.selected),
     selectedEdges: s.edges.filter((e) => e.selected),
 });
@@ -65,26 +91,28 @@ function areEqual(a, b) {
     return (shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
         shallow(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId)));
 }
-const SelectionListener = memo(({ onSelectionChange }) => {
+function SelectionListenerInner({ onSelectionChange }) {
     const store = useStoreApi();
-    const { selectedNodes, selectedEdges } = useStore(selector$p, areEqual);
+    const { selectedNodes, selectedEdges } = useStore(selector$o, areEqual);
     useEffect(() => {
         const params = { nodes: selectedNodes, edges: selectedEdges };
         onSelectionChange?.(params);
         store.getState().onSelectionChangeHandlers.forEach((fn) => fn(params));
     }, [selectedNodes, selectedEdges, onSelectionChange]);
     return null;
-});
-SelectionListener.displayName = 'SelectionListener';
+}
 const changeSelector = (s) => !!s.onSelectionChangeHandlers;
-function Wrapper$1({ onSelectionChange }) {
+function SelectionListener({ onSelectionChange }) {
     const storeHasSelectionChangeHandlers = useStore(changeSelector);
     if (onSelectionChange || storeHasSelectionChangeHandlers) {
-        return jsx(SelectionListener, { onSelectionChange: onSelectionChange });
+        return jsx(SelectionListenerInner, { onSelectionChange: onSelectionChange });
     }
     return null;
 }
 
+const defaultNodeOrigin = [0, 0];
+const defaultViewport = { x: 0, y: 0, zoom: 1 };
+
 /*
  * This component helps us to update the store with the vlues coming from the user.
  * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
@@ -144,41 +172,44 @@ const reactFlowFieldsToTrack = [
     'selectNodesOnDrag',
     'nodeDragThreshold',
     'onBeforeDelete',
+    'debug',
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
-const selector$o = (s) => ({
+const selector$n = (s) => ({
     setNodes: s.setNodes,
     setEdges: s.setEdges,
-    setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
     setMinZoom: s.setMinZoom,
     setMaxZoom: s.setMaxZoom,
     setTranslateExtent: s.setTranslateExtent,
     setNodeExtent: s.setNodeExtent,
     reset: s.reset,
+    setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
 });
-const StoreUpdater = (props) => {
-    const { setNodes, setEdges, setDefaultNodesAndEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, } = useStore(selector$o, shallow);
+const initPrevValues = {
+    // these are values that are also passed directly to other components
+    // than the StoreUpdater. We can reduce the number of setStore calls
+    // by setting the same values here as prev fields.
+    translateExtent: infiniteExtent,
+    nodeOrigin: defaultNodeOrigin,
+    minZoom: 0.5,
+    maxZoom: 2,
+    elementsSelectable: true,
+    noPanClassName: 'nopan',
+    rfId: '1',
+};
+function StoreUpdater(props) {
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$n, shallow);
     const store = useStoreApi();
     useEffect(() => {
-        const edgesWithDefaults = props.defaultEdges?.map((e) => ({ ...e, ...props.defaultEdgeOptions }));
-        setDefaultNodesAndEdges(props.defaultNodes, edgesWithDefaults);
+        setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
         return () => {
+            // when we reset the store we also need to reset the previous fields
+            previousFields.current = initPrevValues;
             reset();
         };
     }, []);
-    const previousFields = useRef({
-        // these are values that are also passed directly to other components
-        // than the StoreUpdater. We can reduce the number of setStore calls
-        // by setting the same values here as prev fields.
-        translateExtent: infiniteExtent,
-        nodeOrigin: initNodeOrigin,
-        minZoom: 0.5,
-        maxZoom: 2,
-        elementsSelectable: true,
-        noPanClassName: 'nopan',
-        rfId: '1',
-    });
+    const previousFields = useRef(initPrevValues);
     useEffect(() => {
         for (const fieldName of fieldsToTrack) {
             const fieldValue = props[fieldName];
@@ -214,30 +245,36 @@ const StoreUpdater = (props) => {
     // Only re-run the effect if one of the fields we track changes
     fieldsToTrack.map((fieldName) => props[fieldName]));
     return null;
-};
+}
 
-const style = { display: 'none' };
-const ariaLiveStyle = {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    margin: -1,
-    border: 0,
-    padding: 0,
-    overflow: 'hidden',
-    clip: 'rect(0px, 0px, 0px, 0px)',
-    clipPath: 'inset(100%)',
-};
-const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';
-const ARIA_EDGE_DESC_KEY = 'react-flow__edge-desc';
-const ARIA_LIVE_MESSAGE = 'react-flow__aria-live';
-const selector$n = (s) => s.ariaLiveMessage;
-function AriaLiveMessage({ rfId }) {
-    const ariaLiveMessage = useStore(selector$n);
-    return (jsx("div", { id: `${ARIA_LIVE_MESSAGE}-${rfId}`, "aria-live": "assertive", "aria-atomic": "true", style: ariaLiveStyle, children: ariaLiveMessage }));
+function getMediaQuery() {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+        return null;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)');
 }
-function A11yDescriptions({ rfId, disableKeyboardA11y }) {
-    return (jsxs(Fragment, { children: [jsxs("div", { id: `${ARIA_NODE_DESC_KEY}-${rfId}`, style: style, children: ["Press enter or space to select a node.", !disableKeyboardA11y && 'You can then use the arrow keys to move the node around.', " Press delete to remove it and escape to cancel.", ' '] }), jsx("div", { id: `${ARIA_EDGE_DESC_KEY}-${rfId}`, style: style, children: "Press enter or space to select an edge. You can then press delete to remove it or escape to cancel." }), !disableKeyboardA11y && jsx(AriaLiveMessage, { rfId: rfId })] }));
+/**
+ * Hook for receiving the current color mode class 'dark' or 'light'.
+ *
+ * @internal
+ * @param colorMode - The color mode to use ('dark', 'light' or 'system')
+ */
+function useColorModeClass(colorMode) {
+    const [colorModeClass, setColorModeClass] = useState(colorMode === 'system' ? null : colorMode);
+    useEffect(() => {
+        if (colorMode !== 'system') {
+            setColorModeClass(colorMode);
+            return;
+        }
+        const mediaQuery = getMediaQuery();
+        const updateColorModeClass = () => setColorModeClass(mediaQuery?.matches ? 'dark' : 'light');
+        updateColorModeClass();
+        mediaQuery?.addEventListener('change', updateColorModeClass);
+        return () => {
+            mediaQuery?.removeEventListener('change', updateColorModeClass);
+        };
+    }, [colorMode]);
+    return colorModeClass !== null ? colorModeClass : getMediaQuery()?.matches ? 'dark' : 'light';
 }
 
 const defaultDoc = typeof document !== 'undefined' ? document : null;
@@ -249,12 +286,12 @@ const defaultDoc = typeof document !== 'undefined' ? document : null;
  * @param param.options - Options
  * @returns boolean
  */
-var useKeyPress = (
+function useKeyPress(
 // the keycode can be a string 'a' or an array of strings ['a', 'a+d']
 // a string means a single key 'a' or a combination when '+' is used 'a+d'
 // an array means different possibilites. Explainer: ['a', 'd+s'] here the
 // user can use the single key 'a' or the combination 'd' + 's'
-keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true }) => {
+keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true }) {
     const [keyPressed, setKeyPressed] = useState(false);
     // we need to remember if a modifier key is pressed in order to track it
     const modifierPressed = useRef(false);
@@ -306,6 +343,10 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
                 else {
                     pressedKeys.current.delete(event[keyOrCode]);
                 }
+                // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key
+                if (event.key === 'Meta') {
+                    pressedKeys.current.clear();
+                }
                 modifierPressed.current = false;
             };
             const resetHandler = () => {
@@ -323,7 +364,7 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
         }
     }, [keyCode, setKeyPressed]);
     return keyPressed;
-};
+}
 // utils
 function isMatchingKey(keyCodes, pressedKeys, isUp) {
     return (keyCodes
@@ -397,25 +438,25 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position) => {
-                const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+            screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
+                const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return clientPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
                 const correctedPosition = {
-                    x: position.x - domX,
-                    y: position.y - domY,
+                    x: clientPosition.x - domX,
+                    y: clientPosition.y - domY,
                 };
-                return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+                return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
-            flowToScreenPosition: (position) => {
+            flowToScreenPosition: (flowPosition) => {
                 const { transform, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return flowPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
-                const rendererPosition = rendererPointToPoint(position, transform);
+                const rendererPosition = rendererPointToPoint(flowPosition, transform);
                 return {
                     x: rendererPosition.x + domX,
                     y: rendererPosition.y + domY,
@@ -427,38 +468,39 @@ const useViewportHelper = () => {
     return viewportHelperFunctions;
 };
 
-function handleParentExpand(res, updateItem) {
-    const parent = res.find((e) => e.id === updateItem.parentNode);
-    if (parent) {
-        if (!parent.computed) {
-            parent.computed = {};
-        }
-        const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
-        const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
-        if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
-            parent.style = { ...parent.style } || {};
-            parent.style.width = parent.style.width ?? parent.computed.width;
-            parent.style.height = parent.style.height ?? parent.computed.height;
-            if (extendWidth > 0) {
-                parent.style.width += extendWidth;
-            }
-            if (extendHeight > 0) {
-                parent.style.height += extendHeight;
-            }
-            if (updateItem.position.x < 0) {
-                const xDiff = Math.abs(updateItem.position.x);
-                parent.position.x = parent.position.x - xDiff;
-                parent.style.width += xDiff;
-                updateItem.position.x = 0;
-            }
-            if (updateItem.position.y < 0) {
-                const yDiff = Math.abs(updateItem.position.y);
-                parent.position.y = parent.position.y - yDiff;
-                parent.style.height += yDiff;
-                updateItem.position.y = 0;
+function handleParentExpand(updatedElements, updateItem) {
+    for (const [index, item] of updatedElements.entries()) {
+        if (item.id === updateItem.parentNode) {
+            const parent = { ...item };
+            parent.computed ??= {};
+            const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
+            const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
+            if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
+                parent.width = parent.width ?? parent.computed.width;
+                parent.height = parent.height ?? parent.computed.height;
+                if (extendWidth > 0) {
+                    parent.width += extendWidth;
+                }
+                if (extendHeight > 0) {
+                    parent.height += extendHeight;
+                }
+                if (updateItem.position.x < 0) {
+                    const xDiff = Math.abs(updateItem.position.x);
+                    parent.position.x = parent.position.x - xDiff;
+                    parent.width += xDiff;
+                    updateItem.position.x = 0;
+                }
+                if (updateItem.position.y < 0) {
+                    const yDiff = Math.abs(updateItem.position.y);
+                    parent.position.y = parent.position.y - yDiff;
+                    parent.height += yDiff;
+                    updateItem.position.y = 0;
+                }
+                parent.computed.width = parent.width;
+                parent.computed.height = parent.height;
+                updatedElements[index] = parent;
             }
-            parent.computed.width = parent.style.width;
-            parent.computed.height = parent.style.height;
+            break;
         }
     }
 }
@@ -466,85 +508,101 @@ function handleParentExpand(res, updateItem) {
 // When you drag a node for example, React Flow will send a position change update.
 // This function then applies the changes and returns the updated elements.
 function applyChanges(changes, elements) {
-    // we need this hack to handle the setNodes and setEdges function of the useReactFlow hook for controlled flows
-    if (changes.some((c) => c.type === 'reset')) {
-        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
-    }
-    let remainingChanges = changes;
     const updatedElements = [];
-    for (const item of elements) {
-        const nextChanges = [];
-        const _remainingChanges = [];
-        for (const c of remainingChanges) {
-            if (c.type === 'add') {
-                updatedElements.push(c.item);
-            }
-            else if (c.id === item.id) {
-                nextChanges.push(c);
+    // By storing a map of changes for each element, we can a quick lookup as we
+    // iterate over the elements array!
+    const changesMap = new Map();
+    for (const change of changes) {
+        if (change.type === 'add') {
+            updatedElements.push(change.item);
+            continue;
+        }
+        else if (change.type === 'remove' || change.type === 'replace') {
+            // For a 'remove' change we can safely ignore any other changes queued for
+            // the same element, it's going to be removed anyway!
+            changesMap.set(change.id, [change]);
+        }
+        else {
+            const elementChanges = changesMap.get(change.id);
+            if (elementChanges) {
+                // If we have some changes queued already, we can do a mutable update of
+                // that array and save ourselves some copying.
+                elementChanges.push(change);
             }
             else {
-                _remainingChanges.push(c);
+                changesMap.set(change.id, [change]);
             }
         }
-        remainingChanges = _remainingChanges;
-        if (nextChanges.length === 0) {
-            updatedElements.push(item);
+    }
+    for (const element of elements) {
+        const changes = changesMap.get(element.id);
+        // When there are no changes for an element we can just push it unmodified,
+        // no need to copy it.
+        if (!changes) {
+            updatedElements.push(element);
             continue;
         }
-        const updateItem = { ...item };
-        for (const currentChange of nextChanges) {
-            if (currentChange) {
-                switch (currentChange.type) {
-                    case 'select': {
-                        updateItem.selected = currentChange.selected;
-                        break;
-                    }
-                    case 'position': {
-                        if (typeof currentChange.position !== 'undefined') {
-                            updateItem.position = currentChange.position;
-                        }
-                        if (typeof currentChange.positionAbsolute !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.positionAbsolute = currentChange.positionAbsolute;
-                        }
-                        if (typeof currentChange.dragging !== 'undefined') {
-                            updateItem.dragging = currentChange.dragging;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'dimensions': {
-                        if (typeof currentChange.dimensions !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.width = currentChange.dimensions.width;
-                            updateItem.computed.height = currentChange.dimensions.height;
-                        }
-                        if (typeof currentChange.updateStyle !== 'undefined') {
-                            updateItem.style = { ...(updateItem.style || {}), ...currentChange.dimensions };
-                        }
-                        if (typeof currentChange.resizing === 'boolean') {
-                            updateItem.resizing = currentChange.resizing;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'remove': {
-                        continue;
-                    }
+        // If we have a 'remove' change queued, it'll be the only change in the array
+        if (changes[0].type === 'remove') {
+            continue;
+        }
+        if (changes[0].type === 'replace') {
+            updatedElements.push({ ...changes[0].item });
+            continue;
+        }
+        // For other types of changes, we want to start with a shallow copy of the
+        // object so React knows this element has changed. Sequential changes will
+        /// each _mutate_ this object, so there's only ever one copy.
+        const updatedElement = { ...element };
+        for (const change of changes) {
+            applyChange(change, updatedElement, updatedElements);
+        }
+        updatedElements.push(updatedElement);
+    }
+    return updatedElements;
+}
+// Applies a single change to an element. This is a *mutable* update.
+function applyChange(change, element, elements = []) {
+    switch (change.type) {
+        case 'select': {
+            element.selected = change.selected;
+            break;
+        }
+        case 'position': {
+            if (typeof change.position !== 'undefined') {
+                element.position = change.position;
+            }
+            if (typeof change.positionAbsolute !== 'undefined') {
+                element.computed ??= {};
+                element.computed.positionAbsolute = change.positionAbsolute;
+            }
+            if (typeof change.dragging !== 'undefined') {
+                element.dragging = change.dragging;
+            }
+            if (element.expandParent) {
+                handleParentExpand(elements, element);
+            }
+            break;
+        }
+        case 'dimensions': {
+            if (typeof change.dimensions !== 'undefined') {
+                element.computed ??= {};
+                element.computed.width = change.dimensions.width;
+                element.computed.height = change.dimensions.height;
+                if (change.resizing) {
+                    element.width = change.dimensions.width;
+                    element.height = change.dimensions.height;
                 }
             }
-            updatedElements.push(updateItem);
+            if (typeof change.resizing === 'boolean') {
+                element.resizing = change.resizing;
+            }
+            if (element.expandParent) {
+                handleParentExpand(elements, element);
+            }
+            break;
         }
     }
-    return updatedElements;
 }
 /**
  * Drop in function that applies node changes to an array of nodes.
@@ -586,17 +644,19 @@ function applyNodeChanges(changes, nodes) {
     );
   
     return (
-      <ReactFLow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
+      <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
     );
  */
 function applyEdgeChanges(changes, edges) {
     return applyChanges(changes, edges);
 }
-const createSelectionChange = (id, selected) => ({
-    id,
-    type: 'select',
-    selected,
-});
+function createSelectionChange(id, selected) {
+    return {
+        id,
+        type: 'select',
+        selected,
+    };
+}
 function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {
     const changes = [];
     for (const item of items) {
@@ -614,6 +674,26 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
     }
     return changes;
 }
+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);
+        if (storeItem !== undefined && storeItem !== item) {
+            changes.push({ id: item.id, item: item, type: 'replace' });
+        }
+        if (storeItem === undefined) {
+            changes.push({ item: item, type: 'add' });
+        }
+    }
+    for (const [id] of lookup) {
+        const nextNode = itemsLookup.get(id);
+        if (nextNode === undefined) {
+            changes.push({ id, type: 'remove' });
+        }
+    }
+    return changes;
+}
 
 /**
  * Test whether an object is useable as a Node
@@ -622,7 +702,7 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Node
  */
-const isNode = (isNodeBase);
+const isNode = (element) => isNodeBase(element);
 /**
  * Test whether an object is useable as an Edge
  * @public
@@ -630,50 +710,10 @@ const isNode = (isNodeBase);
  * @param element - The element to test
  * @returns A boolean indicating whether the element is an Edge
  */
-const isEdge = (isEdgeBase);
-/**
- * Pass in a node, and get connected nodes where edge.source === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the source is the given node
- */
-const getOutgoers = (getOutgoersBase);
-/**
- * Pass in a node, and get connected nodes where edge.target === node.id
- * @public
- * @param node - The node to get the connected nodes from
- * @param nodes - The array of all nodes
- * @param edges - The array of all edges
- * @returns An array of nodes that are connected over eges where the target is the given node
- */
-const getIncomers = (getIncomersBase);
-/**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
- * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
- */
-const addEdge = (addEdgeBase);
-/**
- * A handy utility to update an existing Edge with new properties
- * @param oldEdge - The edge you want to update
- * @param newConnection - The new connection you want to update the edge with
- * @param edges - The array of all current edges
- * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
- * @returns the updated edges array
- */
-const updateEdge = (updateEdgeBase);
-/**
- * Get all connecting edges for a given set of nodes
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
- */
-const getConnectedEdges = (getConnectedEdgesBase);
+const isEdge = (element) => isEdgeBase(element);
+
+// we need this hook to prevent a warning when using react-flow in SSR
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 /**
  * Hook for accessing the ReactFlow instance.
@@ -698,54 +738,86 @@ function useReactFlow() {
         const { edges = [] } = store.getState();
         return edges.find((e) => e.id === id);
     }, []);
-    const setNodes = useCallback((payload) => {
-        const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
-        const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
-        if (hasDefaultNodes) {
-            setNodes(nextNodes);
+    // 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: [] });
+    // 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);
+    // 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`).
+    useIsomorphicLayoutEffect(() => {
+        // Because we need to flip the state back to false after flushing, this should
+        // 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: [] };
+            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 = [];
         }
-        else if (onNodesChange) {
-            const changes = nextNodes.length === 0
-                ? nodes.map((node) => ({ type: 'remove', id: node.id }))
-                : nextNodes.map((node) => ({ item: node, type: 'reset' }));
-            onNodesChange(changes);
+        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 = [];
         }
+        // Beacuse we're using reactive state to trigger this effect, we need to flip
+        // it back to false.
+        setShouldFlushQueue(false);
+    }, [shouldFlushQueue]);
+    const setNodes = useCallback((payload) => {
+        setElementsQueue.current.nodes.push(payload);
+        setShouldFlushQueue(true);
     }, []);
     const setEdges = useCallback((payload) => {
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-        const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
-        if (hasDefaultEdges) {
-            setEdges(nextEdges);
-        }
-        else if (onEdgesChange) {
-            const changes = nextEdges.length === 0
-                ? edges.map((edge) => ({ type: 'remove', id: edge.id }))
-                : nextEdges.map((edge) => ({ item: edge, type: 'reset' }));
-            onEdgesChange(changes);
-        }
+        setElementsQueue.current.edges.push(payload);
+        setShouldFlushQueue(true);
     }, []);
     const addNodes = useCallback((payload) => {
-        const nodes = Array.isArray(payload) ? payload : [payload];
-        const { nodes: currentNodes, hasDefaultNodes, onNodesChange, setNodes } = store.getState();
-        if (hasDefaultNodes) {
-            const nextNodes = [...currentNodes, ...nodes];
-            setNodes(nextNodes);
-        }
-        else if (onNodesChange) {
-            const changes = nodes.map((node) => ({ item: node, type: 'add' }));
-            onNodesChange(changes);
-        }
+        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);
     }, []);
     const addEdges = useCallback((payload) => {
-        const nextEdges = Array.isArray(payload) ? payload : [payload];
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-        if (hasDefaultEdges) {
-            setEdges([...edges, ...nextEdges]);
-        }
-        else if (onEdgesChange) {
-            const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' }));
-            onEdgesChange(changes);
-        }
+        const newEdges = Array.isArray(payload) ? payload : [payload];
+        setElementsQueue.current.edges.push((edges) => [...edges, ...newEdges]);
+        setShouldFlushQueue(true);
     }, []);
     const toObject = useCallback(() => {
         const { nodes = [], edges = [], transform } = store.getState();
@@ -760,8 +832,8 @@ function useReactFlow() {
             },
         };
     }, []);
-    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
-        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, } = store.getState();
+    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, onBeforeDelete, } = store.getState();
         const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
             nodesToRemove,
             edgesToRemove,
@@ -773,9 +845,8 @@ function useReactFlow() {
         const hasMatchingNodes = matchingNodes.length > 0;
         if (hasMatchingEdges) {
             if (hasDefaultEdges) {
-                store.setState({
-                    edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
-                });
+                const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
+                store.getState().setEdges(nextEdges);
             }
             onEdgesDelete?.(matchingEdges);
             onEdgesChange?.(matchingEdges.map((edge) => ({
@@ -785,9 +856,8 @@ function useReactFlow() {
         }
         if (hasMatchingNodes) {
             if (hasDefaultNodes) {
-                store.setState({
-                    nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
-                });
+                const nextNodes = nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id));
+                store.getState().setNodes(nextNodes);
             }
             onNodesDelete?.(matchingNodes);
             onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
@@ -800,6 +870,9 @@ function useReactFlow() {
     const getNodeRect = useCallback((nodeOrRect) => {
         const isRect = isRectObject(nodeOrRect);
         const node = isRect ? null : store.getState().nodeLookup.get(nodeOrRect.id);
+        if (!isRect && !node) {
+            return [null, null, isRect];
+        }
         const nodeRect = isRect ? nodeOrRect : nodeToRect(node);
         return [nodeRect, node, isRect];
     }, []);
@@ -886,22 +959,22 @@ const deleteKeyOptions = { actInsideInputWithModifier: false };
  *
  * @internal
  */
-var useGlobalKeyHandler = ({ deleteKeyCode, multiSelectionKeyCode, }) => {
+function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     const store = useStoreApi();
     const { deleteElements } = useReactFlow();
     const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
     const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
     useEffect(() => {
         if (deleteKeyPressed) {
-            const { edges, nodes, onBeforeDelete } = store.getState();
-            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
+            const { edges, nodes } = store.getState();
+            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
             store.setState({ nodesSelectionActive: false });
         }
     }, [deleteKeyPressed]);
     useEffect(() => {
         store.setState({ multiSelectionActive: multiSelectionKeyPressed });
     }, [multiSelectionKeyPressed]);
-};
+}
 
 /**
  * Hook for handling resize events.
@@ -948,7 +1021,7 @@ const selector$l = (s) => ({
     userSelectionActive: s.userSelectionActive,
     lib: s.lib,
 });
-const ZoomPane = ({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) => {
+function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
     const { userSelectionActive, lib } = useStore(selector$l, shallow);
@@ -1031,7 +1104,7 @@ const ZoomPane = ({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         lib,
     ]);
     return (jsx("div", { className: "react-flow__renderer", ref: zoomPane, style: containerStyle, children: children }));
-};
+}
 
 const selector$k = (s) => ({
     userSelectionActive: s.userSelectionActive,
@@ -1063,7 +1136,7 @@ const selector$j = (s) => ({
     elementsSelectable: s.elementsSelectable,
     dragging: s.paneDragging,
 });
-const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) => {
+function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
     const container = useRef(null);
     const store = useStoreApi();
     const prevSelectedNodesCount = useRef(0);
@@ -1179,9 +1252,8 @@ const Pane = memo(({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag,
         resetUserSelection();
     };
     const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
-    return (jsxs("div", { className: cc(['react-flow__pane', { dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onMouseEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : undefined, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : undefined, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
-});
-Pane.displayName = 'Pane';
+    return (jsxs("div", { className: cc(['react-flow__pane', { draggable: panOnDrag, dragging, selection: isSelecting }]), onClick: hasActiveSelection ? undefined : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onMouseEnter: hasActiveSelection ? undefined : onPaneMouseEnter, onMouseDown: hasActiveSelection ? onMouseDown : undefined, onMouseMove: hasActiveSelection ? onMouseMove : onPaneMouseMove, onMouseUp: hasActiveSelection ? onMouseUp : undefined, onMouseLeave: hasActiveSelection ? onMouseLeave : onPaneMouseLeave, ref: container, style: containerStyle, children: [children, jsx(UserSelection, {})] }));
+}
 
 // this handler is called by
 // 1. the click handler when node is not draggable or selectNodesOnDrag = false
@@ -1209,36 +1281,33 @@ function handleNodeClick({ id, store, unselect = false, nodeRef, }) {
  *
  * @internal
  */
-function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable }) {
+function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable, }) {
     const store = useStoreApi();
     const [dragging, setDragging] = useState(false);
     const xyDrag = useRef();
     useEffect(() => {
-        if (nodeRef?.current) {
-            xyDrag.current = XYDrag({
-                domNode: nodeRef.current,
-                getStoreItems: () => store.getState(),
-                onNodeMouseDown: (id) => {
-                    handleNodeClick({
-                        id,
-                        store,
-                        nodeRef: nodeRef,
-                    });
-                },
-                onDragStart: () => {
-                    setDragging(true);
-                },
-                onDragStop: () => {
-                    setDragging(false);
-                },
-            });
-        }
+        xyDrag.current = XYDrag({
+            getStoreItems: () => store.getState(),
+            onNodeMouseDown: (id) => {
+                handleNodeClick({
+                    id,
+                    store,
+                    nodeRef,
+                });
+            },
+            onDragStart: () => {
+                setDragging(true);
+            },
+            onDragStop: () => {
+                setDragging(false);
+            },
+        });
     }, []);
     useEffect(() => {
         if (disabled) {
             xyDrag.current?.destroy();
         }
-        else {
+        else if (nodeRef.current) {
             xyDrag.current?.update({
                 noDragClassName,
                 handleSelector,
@@ -1256,44 +1325,47 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
 
 const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
 /**
- * Hook for updating node positions.
+ * Hook for updating node positions by passing a direction and factor
  *
  * @internal
  * @returns function for updating node positions
  */
-function useUpdateNodePositions() {
+function useMoveSelectedNodes() {
     const store = useStoreApi();
-    const updatePositions = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = store.getState();
+    const moveSelectedNodes = useCallback((params) => {
+        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin, } = store.getState();
         const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
-        // by default a node moves 5px on each key press, or 20px if shift is pressed
-        // if snap grid is enabled, we use that for the velocity.
+        // by default a node moves 5px on each key press
+        // if snap grid is enabled, we use that for the velocity
         const xVelo = snapToGrid ? snapGrid[0] : 5;
         const yVelo = snapToGrid ? snapGrid[1] : 5;
-        const factor = params.isShiftPressed ? 4 : 1;
-        const xDiff = params.x * xVelo * factor;
-        const yDiff = params.y * yVelo * factor;
+        const xDiff = params.direction.x * xVelo * params.factor;
+        const yDiff = params.direction.y * yVelo * params.factor;
         const nodeUpdates = selectedNodes.map((node) => {
             if (node.computed?.positionAbsolute) {
                 let nextPosition = {
-                    x: node.computed?.positionAbsolute.x + xDiff,
-                    y: node.computed?.positionAbsolute.y + yDiff,
+                    x: node.computed.positionAbsolute.x + xDiff,
+                    y: node.computed.positionAbsolute.y + yDiff,
                 };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
                 }
-                const { positionAbsolute, position } = calcNextPosition(node, nextPosition, nodes, nodeExtent, undefined, onError);
+                const { position, positionAbsolute } = calculateNodePosition({
+                    nodeId: node.id,
+                    nextPosition,
+                    nodeLookup,
+                    nodeExtent,
+                    nodeOrigin,
+                    onError,
+                });
                 node.position = position;
-                if (!node.computed) {
-                    node.computed = {};
-                }
                 node.computed.positionAbsolute = positionAbsolute;
             }
             return node;
         });
-        updateNodePositions(nodeUpdates, true, false);
+        updateNodePositions(nodeUpdates);
     }, []);
-    return updatePositions;
+    return moveSelectedNodes;
 }
 
 const NodeIdContext = createContext(null);
@@ -1305,25 +1377,31 @@ const useNodeId = () => {
 };
 
 const selector$i = (s) => ({
-    connectionStartHandle: s.connectionStartHandle,
     connectOnClick: s.connectOnClick,
     noPanClassName: s.noPanClassName,
+    rfId: s.rfId,
 });
 const connectingSelector = (nodeId, handleId, type) => (state) => {
-    const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, } = state;
+    const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, connectionClickStartHandle: clickHandle, connectionMode, connectionStatus, } = state;
+    const connectingTo = endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type;
     return {
-        connecting: (startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type) ||
-            (endHandle?.nodeId === nodeId && endHandle?.handleId === handleId && endHandle?.type === type),
+        connectingFrom: startHandle?.nodeId === nodeId && startHandle?.handleId === handleId && startHandle?.type === type,
+        connectingTo,
         clickConnecting: clickHandle?.nodeId === nodeId && clickHandle?.handleId === handleId && clickHandle?.type === type,
+        isPossibleEndHandle: connectionMode === ConnectionMode.Strict
+            ? startHandle?.type !== type
+            : nodeId !== startHandle?.nodeId || handleId !== startHandle?.handleId,
+        connectionInProcess: !!startHandle,
+        valid: connectingTo && connectionStatus === 'valid',
     };
 };
-const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) => {
+const HandleComponent = forwardRef(({ type = 'source', position = Position.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest }, ref) => {
     const handleId = id || null;
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName } = useStore(selector$i, shallow);
-    const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector$i, shallow);
+    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow);
     if (!nodeId) {
         store.getState().onError?.('010', errorMessages['error010']());
     }
@@ -1358,6 +1436,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
                 isTarget,
                 handleId,
                 nodeId,
+                flowId: currentStore.rfId,
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
@@ -1376,7 +1455,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
         }
     };
     const onClick = (event) => {
-        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, } = store.getState();
+        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, } = store.getState();
         if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
             return;
         }
@@ -1398,6 +1477,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
             fromHandleId: connectionClickStartHandle.handleId || null,
             fromType: connectionClickStartHandle.type,
             isValidConnection: isValidConnectionHandler,
+            flowId,
             doc,
             lib,
         });
@@ -1407,7 +1487,7 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
         onClickConnectEnd?.(event);
         store.setState({ connectionClickStartHandle: null });
     };
-    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${nodeId}-${handleId}-${type}`, className: cc([
+    return (jsx("div", { "data-handleid": handleId, "data-nodeid": nodeId, "data-handlepos": position, "data-id": `${rfId}-${nodeId}-${handleId}-${type}`, className: cc([
             'react-flow__handle',
             `react-flow__handle-${position}`,
             'nodrag',
@@ -1419,31 +1499,39 @@ const Handle = forwardRef(({ type = 'source', position = Position.Top, isValidCo
                 connectable: isConnectable,
                 connectablestart: isConnectableStart,
                 connectableend: isConnectableEnd,
-                connecting: clickConnecting,
-                // this class is used to style the handle when the user is connecting
-                connectionindicator: isConnectable && ((isConnectableStart && !connecting) || (isConnectableEnd && connecting)),
+                clickconnecting: clickConnecting,
+                connectingfrom: connectingFrom,
+                connectingto: connectingTo,
+                valid,
+                // shows where you can start a connection from
+                // and where you can end it while connecting
+                connectionindicator: isConnectable &&
+                    (!connectionInProcess || isPossibleEndHandle) &&
+                    (connectionInProcess ? isConnectableEnd : isConnectableStart),
             },
         ]), onMouseDown: onPointerDown, onTouchStart: onPointerDown, onClick: connectOnClick ? onClick : undefined, ref: ref, ...rest, children: children }));
 });
-Handle.displayName = 'Handle';
-var Handle$1 = memo(Handle);
+HandleComponent.displayName = 'Handle';
+/**
+ * The Handle component is the part of a node that can be used to connect nodes.
+ */
+const Handle = memo(HandleComponent);
 
-const InputNode = ({ data, isConnectable, sourcePosition = Position.Bottom }) => (jsxs(Fragment, { children: [data?.label, jsx(Handle$1, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
-InputNode.displayName = 'InputNode';
-var InputNode$1 = memo(InputNode);
+function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
+    return (jsxs(Fragment, { children: [data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
+}
 
-const DefaultNode = ({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom, }) => {
-    return (jsxs(Fragment, { children: [jsx(Handle$1, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label, jsx(Handle$1, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
-};
-DefaultNode.displayName = 'DefaultNode';
-var DefaultNode$1 = memo(DefaultNode);
+function DefaultNode({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom, }) {
+    return (jsxs(Fragment, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label, jsx(Handle, { type: "source", position: sourcePosition, isConnectable: isConnectable })] }));
+}
 
-const GroupNode = () => null;
-GroupNode.displayName = 'GroupNode';
+function GroupNode() {
+    return null;
+}
 
-const OutputNode = ({ data, isConnectable, targetPosition = Position.Top }) => (jsxs(Fragment, { children: [jsx(Handle$1, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label] }));
-OutputNode.displayName = 'OutputNode';
-var OutputNode$1 = memo(OutputNode);
+function OutputNode({ data, isConnectable, targetPosition = Position.Top }) {
+    return (jsxs(Fragment, { children: [jsx(Handle, { type: "target", position: targetPosition, isConnectable: isConnectable }), data?.label] }));
+}
 
 const arrowKeyDiffs = {
     ArrowUp: { x: 0, y: -1 },
@@ -1452,15 +1540,27 @@ const arrowKeyDiffs = {
     ArrowRight: { x: 1, y: 0 },
 };
 const builtinNodeTypes = {
-    input: InputNode$1,
-    default: DefaultNode$1,
-    output: OutputNode$1,
+    input: InputNode,
+    default: DefaultNode,
+    output: OutputNode,
     group: GroupNode,
 };
+function getNodeInlineStyleDimensions(node) {
+    if (!node.computed) {
+        return {
+            width: node.width ?? node.initialWidth ?? node.style?.width,
+            height: node.height ?? node.initialHeight ?? node.style?.height,
+        };
+    }
+    return {
+        width: node.width ?? node.style?.width,
+        height: node.height ?? node.style?.height,
+    };
+}
 
 const selector$h = (s) => {
     const selectedNodes = s.nodes.filter((n) => n.selected);
-    const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
+    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
     return {
         width,
         height,
@@ -1468,10 +1568,10 @@ const selector$h = (s) => {
         transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]}) translate(${x}px,${y}px)`,
     };
 };
-function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
+function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y, }) {
     const store = useStoreApi();
     const { width, height, transformString, userSelectionActive } = useStore(selector$h, shallow);
-    const updatePositions = useUpdateNodePositions();
+    const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = useRef(null);
     useEffect(() => {
         if (!disableKeyboardA11y) {
@@ -1494,10 +1594,9 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
         : undefined;
     const onKeyDown = (event) => {
         if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
-            updatePositions({
-                x: arrowKeyDiffs[event.key].x,
-                y: arrowKeyDiffs[event.key].y,
-                isShiftPressed: event.shiftKey,
+            moveSelectedNodes({
+                direction: arrowKeyDiffs[event.key],
+                factor: event.shiftKey ? 4 : 1,
             });
         }
     };
@@ -1508,21 +1607,22 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
                 height,
             } }) }));
 }
-var NodesSelection$1 = memo(NodesSelection);
 
-const selector$g = (s) => s.nodesSelectionActive;
-const FlowRenderer = ({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) => {
-    const nodesSelectionActive = useStore(selector$g);
+const selector$g = (s) => {
+    return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
+};
+function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$g);
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
     const panOnScroll = panActivationKeyPressed || _panOnScroll;
-    const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
+    const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
     useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
-    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection$1, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
-};
-FlowRenderer.displayName = 'FlowRenderer';
-var FlowRenderer$1 = memo(FlowRenderer);
+    return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
+}
+FlowRendererComponent.displayName = 'FlowRenderer';
+const FlowRenderer = memo(FlowRendererComponent);
 
 const selector$f = (onlyRenderVisible) => (s) => {
     return onlyRenderVisible
@@ -1572,7 +1672,7 @@ function useResizeObserver() {
     return resizeObserver;
 }
 
-const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) => {
+function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) {
     const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
         const positionAbsolute = nodeExtent
@@ -1604,14 +1704,27 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const prevSourcePosition = useRef(node.sourcePosition);
     const prevTargetPosition = useRef(node.targetPosition);
     const prevType = useRef(nodeType);
-    const updatePositions = useUpdateNodePositions();
+    const nodeDimensions = getNodeDimensions(node);
+    const inlineDimensions = getNodeInlineStyleDimensions(node);
+    const initialized = nodeHasDimensions(node);
+    const hasHandleBounds = !!node[internalsSymbol]?.handleBounds;
+    const moveSelectedNodes = useMoveSelectedNodes();
+    useEffect(() => {
+        return () => {
+            if (nodeRef.current) {
+                resizeObserver?.unobserve(nodeRef.current);
+            }
+        };
+    }, []);
     useEffect(() => {
         if (nodeRef.current && !node.hidden) {
             const currNode = nodeRef.current;
-            resizeObserver?.observe(currNode);
-            return () => resizeObserver?.unobserve(currNode);
+            if (!initialized || !hasHandleBounds) {
+                resizeObserver?.unobserve(currNode);
+                resizeObserver?.observe(currNode);
+            }
         }
-    }, [node.hidden]);
+    }, [node.hidden, initialized, hasHandleBounds]);
     useEffect(() => {
         // when the user programmatically changes the source or handle position, we re-initialize the node
         const typeChanged = prevType.current !== nodeType;
@@ -1641,18 +1754,12 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     if (node.hidden) {
         return null;
     }
-    const width = node.width ?? undefined;
-    const height = node.height ?? undefined;
-    const computedWidth = node.computed?.width;
-    const computedHeight = node.computed?.height;
     const positionAbsoluteOrigin = getPositionWithOrigin({
         x: positionAbsoluteX,
         y: positionAbsoluteY,
-        width: computedWidth ?? width ?? 0,
-        height: computedHeight ?? height ?? 0,
+        ...nodeDimensions,
         origin: node.origin || nodeOrigin,
     });
-    const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
     const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
     const onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...node }) : undefined;
     const onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...node }) : undefined;
@@ -1675,7 +1782,7 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         }
     };
     const onKeyDown = (event) => {
-        if (isInputDOMNode(event.nativeEvent)) {
+        if (isInputDOMNode(event.nativeEvent) || disableKeyboardA11y) {
             return;
         }
         if (elementSelectionKeys.includes(event.key) && isSelectable) {
@@ -1687,19 +1794,15 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 nodeRef,
             });
         }
-        else if (!disableKeyboardA11y &&
-            isDraggable &&
-            node.selected &&
-            Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+        else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
             store.setState({
                 ariaLiveMessage: `Moved selected node ${event.key
                     .replace('Arrow', '')
                     .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
             });
-            updatePositions({
-                x: arrowKeyDiffs[event.key].x,
-                y: arrowKeyDiffs[event.key].y,
-                isShiftPressed: event.shiftKey,
+            moveSelectedNodes({
+                direction: arrowKeyDiffs[event.key],
+                factor: event.shiftKey ? 4 : 1,
             });
         }
     };
@@ -1715,6 +1818,7 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 selected: node.selected,
                 selectable: isSelectable,
                 parent: isParent,
+                draggable: isDraggable,
                 dragging,
             },
         ]), ref: nodeRef, style: {
@@ -1722,13 +1826,10 @@ const NodeWrapper = ({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
             visibility: initialized ? 'visible' : 'hidden',
-            width,
-            height,
             ...node.style,
-        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, width: computedWidth, height: computedHeight, positionAbsoluteX: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex }) }) }));
-};
-NodeWrapper.displayName = 'NodeWrapper';
-var NodeWrapper$1 = memo(NodeWrapper);
+            ...inlineDimensions,
+        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex, ...nodeDimensions }) }) }));
+}
 
 const selector$d = (s) => ({
     nodesDraggable: s.nodesDraggable,
@@ -1737,7 +1838,7 @@ const selector$d = (s) => ({
     elementsSelectable: s.elementsSelectable,
     onError: s.onError,
 });
-const NodeRenderer = (props) => {
+function NodeRendererComponent(props) {
     const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector$d, shallow);
     const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
     const resizeObserver = useResizeObserver();
@@ -1766,11 +1867,11 @@ const NodeRenderer = (props) => {
             //   moved into `NodeComponentWrapper`. This ensures they are
             //   memorized – so if `NodeRenderer` *has* to rerender, it only
             //   needs to regenerate the list of nodes, nothing else.
-            jsx(NodeWrapper$1, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
+            jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, nodeOrigin: props.nodeOrigin, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver: resizeObserver, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, elementsSelectable: elementsSelectable, onError: onError }, nodeId));
         }) }));
-};
-NodeRenderer.displayName = 'NodeRenderer';
-var NodeRenderer$1 = memo(NodeRenderer);
+}
+NodeRendererComponent.displayName = 'NodeRenderer';
+const NodeRenderer = memo(NodeRendererComponent);
 
 /**
  * Hook for getting the visible edge ids from the store.
@@ -1844,18 +1945,21 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     }
     return (jsx("marker", { className: "react-flow__arrowhead", id: id, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits: markerUnits, orient: orient, refX: "0", refY: "0", children: jsx(Symbol, { color: color, strokeWidth: strokeWidth }) }));
 };
-const markerSelector = ({ defaultColor, rfId }) => (s) => {
-    const markers = createMarkerIds(s.edges, { id: rfId, defaultColor });
-    return markers;
-};
-const markersEqual = (a, b) => 
-// the id includes all marker options, so we just need to look at that part of the marker
-!(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }) => {
-    const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+    const edges = useStore((s) => s.edges);
+    const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
+    const markers = useMemo(() => {
+        const markers = createMarkerIds(edges, {
+            id: rfId,
+            defaultColor,
+            defaultMarkerStart: defaultEdgeOptions?.markerStart,
+            defaultMarkerEnd: defaultEdgeOptions?.markerEnd,
+        });
+        return markers;
+    }, [edges, defaultEdgeOptions, rfId, defaultColor]);
     if (!markers.length) {
         return null;
     }
@@ -1864,7 +1968,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
 MarkerDefinitions.displayName = 'MarkerDefinitions';
 var MarkerDefinitions$1 = memo(MarkerDefinitions);
 
-const EdgeText = ({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) => {
+function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
     const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 });
     const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
     const onEdgeTextRefChange = useCallback((edgeRef) => {
@@ -1882,13 +1986,13 @@ const EdgeText = ({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgSty
         return null;
     }
     return (jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: onEdgeTextRefChange, style: labelStyle, children: label }), children] }));
-};
-var EdgeText$1 = memo(EdgeText);
+}
+EdgeTextComponent.displayName = 'EdgeText';
+const EdgeText = memo(EdgeTextComponent);
 
-const BaseEdge = ({ id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, className, interactionWidth = 20, }) => {
-    return (jsxs(Fragment, { children: [jsx("path", { id: id, style: style, d: path, fill: "none", className: cc(['react-flow__edge-path', className]), markerEnd: markerEnd, markerStart: markerStart }), interactionWidth && (jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeText$1, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
-};
-BaseEdge.displayName = 'BaseEdge';
+function BaseEdge({ id, path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, className, interactionWidth = 20, }) {
+    return (jsxs(Fragment, { children: [jsx("path", { id: id, style: style, d: path, fill: "none", className: cc(['react-flow__edge-path', className]), markerEnd: markerEnd, markerStart: markerStart }), interactionWidth && (jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
+}
 
 function getControl({ pos, x1, y1, x2, y2 }) {
     if (pos === Position.Left || pos === Position.Right) {
@@ -2048,7 +2152,9 @@ const shiftY = (y, shift, position) => {
     return y;
 };
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
-const EdgeAnchor = ({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) => (jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
+function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) {
+    return (jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
+}
 
 function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleId, sourceHandleId, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, setUpdating, setUpdateHover, }) {
     const store = useStoreApi();
@@ -2057,7 +2163,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
@@ -2080,6 +2186,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             isTarget,
             edgeUpdaterType: handleType,
             lib,
+            flowId,
             cancelConnection,
             panBy,
             isValidConnection,
@@ -2098,7 +2205,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
     return (jsxs(Fragment, { children: [(isUpdatable === 'source' || isUpdatable === true) && (jsx(EdgeAnchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterSourceMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "source" })), (isUpdatable === 'target' || isUpdatable === true) && (jsx(EdgeAnchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: onEdgeUpdaterTargetMouseDown, onMouseEnter: onEdgeUpdaterMouseEnter, onMouseOut: onEdgeUpdaterMouseOut, type: "target" }))] }));
 }
 
-function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, sourceHandleId, targetHandleId, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes, noPanClassName, onError, }) {
+function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, edgeUpdaterRadius, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, rfId, edgeTypes, noPanClassName, onError, disableKeyboardA11y, }) {
     let edge = useStore((s) => s.edgeLookup.get(id));
     const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
     edge = defaultEdgeOptions ? { ...defaultEdgeOptions, ...edge } : edge;
@@ -2130,8 +2237,8 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
             id,
             sourceNode,
             targetNode,
-            sourceHandle: sourceHandleId || null,
-            targetHandle: targetHandleId || null,
+            sourceHandle: edge.sourceHandle || null,
+            targetHandle: edge.targetHandle || null,
             connectionMode: store.connectionMode,
             onError,
         });
@@ -2146,9 +2253,9 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
             zIndex,
             ...(edgePosition || nullPosition),
         };
-    }, [edge.source, edge.target, edge.selected, edge.zIndex]), shallow);
-    const markerStartUrl = useMemo(() => (edge.markerStart ? `url(#${getMarkerId(edge.markerStart, rfId)})` : undefined), [edge.markerStart, rfId]);
-    const markerEndUrl = useMemo(() => (edge.markerEnd ? `url(#${getMarkerId(edge.markerEnd, rfId)})` : undefined), [edge.markerEnd, rfId]);
+    }, [edge.source, edge.target, edge.sourceHandle, edge.targetHandle, edge.selected, edge.zIndex]), shallow);
+    const markerStartUrl = useMemo(() => (edge.markerStart ? `url('#${getMarkerId(edge.markerStart, rfId)}')` : undefined), [edge.markerStart, rfId]);
+    const markerEndUrl = useMemo(() => (edge.markerEnd ? `url('#${getMarkerId(edge.markerEnd, rfId)}')` : undefined), [edge.markerEnd, rfId]);
     if (edge.hidden || !sourceX || !sourceY || !targetX || !targetY) {
         return null;
     }
@@ -2194,7 +2301,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
         }
         : undefined;
     const onKeyDown = (event) => {
-        if (elementSelectionKeys.includes(event.key) && isSelectable) {
+        if (!disableKeyboardA11y && elementSelectionKeys.includes(event.key) && isSelectable) {
             const { unselectNodesAndEdges, addSelectedEdges } = store.getState();
             const unselect = event.key === 'Escape';
             if (unselect) {
@@ -2216,11 +2323,10 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
                     animated: edge.animated,
                     inactive: !isSelectable && !onClick,
                     updating: updateHover,
+                    selectable: isSelectable,
                 },
-            ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, selected: edge.selected, animated: edge.animated, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: sourceHandleId, targetHandleId: targetHandleId, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: sourceHandleId, targetHandleId: targetHandleId }))] }) }));
+            ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, selected: edge.selected, animated: edge.animated, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
 }
-EdgeWrapper.displayName = 'EdgeWrapper';
-var EdgeWrapper$1 = memo(EdgeWrapper);
 
 const selector$c = (s) => ({
     width: s.width,
@@ -2231,15 +2337,15 @@ const selector$c = (s) => ({
     connectionMode: s.connectionMode,
     onError: s.onError,
 });
-const EdgeRenderer = ({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, children, }) => {
+function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements, rfId, edgeTypes, noPanClassName, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeClick, edgeUpdaterRadius, onEdgeDoubleClick, onEdgeUpdateStart, onEdgeUpdateEnd, disableKeyboardA11y, }) {
     const { edgesFocusable, edgesUpdatable, elementsSelectable, onError } = useStore(selector$c, shallow);
     const edgeIds = useVisibleEdgeIds(onlyRenderVisibleElements);
     return (jsxs("div", { className: "react-flow__edges", children: [jsx(MarkerDefinitions$1, { defaultColor: defaultMarkerColor, rfId: rfId }), edgeIds.map((id) => {
-                return (jsx(EdgeWrapper$1, { id: id, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onEdgeUpdate: onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius: edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes }, id));
-            }), children] }));
-};
-EdgeRenderer.displayName = 'EdgeRenderer';
-var EdgeRenderer$1 = memo(EdgeRenderer);
+                return (jsx(EdgeWrapper, { id: id, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, noPanClassName: noPanClassName, onEdgeUpdate: onEdgeUpdate, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onClick: onEdgeClick, edgeUpdaterRadius: edgeUpdaterRadius, onDoubleClick: onEdgeDoubleClick, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, rfId: rfId, onError: onError, edgeTypes: edgeTypes, disableKeyboardA11y: disableKeyboardA11y }, id));
+            })] }));
+}
+EdgeRendererComponent.displayName = 'EdgeRenderer';
+const EdgeRenderer = memo(EdgeRendererComponent);
 
 const selector$b = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children }) {
@@ -2362,7 +2468,7 @@ function ConnectionLineWrapper({ containerStyle, style, type, component }) {
     if (!isValid) {
         return null;
     }
-    return (jsx("svg", { style: containerStyle, width: width, height: height, className: "react-flow__edges react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(['react-flow__connection', connectionStatus]), children: jsx(ConnectionLine, { nodeId: nodeId, handleType: handleType, style: style, type: type, CustomComponent: component, connectionStatus: connectionStatus }) }) }));
+    return (jsx("svg", { style: containerStyle, width: width, height: height, className: "react-flow__connectionline react-flow__container", children: jsx("g", { className: cc(['react-flow__connection', connectionStatus]), children: jsx(ConnectionLine, { nodeId: nodeId, handleType: handleType, style: style, type: type, CustomComponent: component, connectionStatus: connectionStatus }) }) }));
 }
 
 const emptyTypes = {};
@@ -2380,54 +2486,32 @@ function useNodeOrEdgeTypesWarning(nodeOrEdgeTypes = emptyTypes) {
     }, [nodeOrEdgeTypes]);
 }
 
-const GraphView = ({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange, }) => {
+function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeUpdate, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, edgeUpdaterRadius, onEdgeUpdateStart, onEdgeUpdateEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeOrigin, nodeExtent, rfId, viewport, onViewportChange, }) {
     useNodeOrEdgeTypesWarning(nodeTypes);
     useNodeOrEdgeTypesWarning(edgeTypes);
     useOnInitHandler(onInit);
     useViewportSync(viewport);
-    return (jsx(FlowRenderer$1, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer$1, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeUpdate: onEdgeUpdate, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId, children: jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }) }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx("div", { className: "react-flow__viewport-portal" }), jsx(NodeRenderer$1, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, rfId: rfId })] }) }));
-};
-GraphView.displayName = 'GraphView';
-var GraphView$1 = memo(GraphView);
-
-function handleControlledSelectionChange(changes, items) {
-    return items.map((item) => {
-        const change = changes.find((change) => change.id === item.id);
-        if (change) {
-            item.selected = change.selected;
-        }
-        return item;
-    });
-}
-function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }) {
-    const { nodes, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
-    if (changedNodes?.length) {
-        if (hasDefaultNodes) {
-            set({ nodes: handleControlledSelectionChange(changedNodes, nodes) });
-        }
-        onNodesChange?.(changedNodes);
-    }
-    if (changedEdges?.length) {
-        if (hasDefaultEdges) {
-            set({ edges: handleControlledSelectionChange(changedEdges, edges) });
-        }
-        onEdgesChange?.(changedEdges);
-    }
+    return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeUpdate: onEdgeUpdate, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx("div", { className: "react-flow__viewport-portal" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, rfId: rfId })] }) }));
 }
+GraphViewComponent.displayName = 'GraphView';
+const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
     const nodeLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
-    updateConnectionLookup(connectionLookup, edgeLookup, edges);
-    const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
+    const storeEdges = defaultEdges ?? edges ?? [];
+    const storeNodes = defaultNodes ?? nodes ?? [];
+    updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
+    const nextNodes = adoptUserProvidedNodes(storeNodes, nodeLookup, {
         nodeOrigin: [0, 0],
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+        const nodesWithDimensions = nextNodes.filter((node) => (node.width || node.initialWidth) && (node.height || node.initialHeight));
+        // @todo users nodeOrigin should be used here
+        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2438,13 +2522,13 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         transform,
         nodes: nextNodes,
         nodeLookup,
-        edges,
+        edges: storeEdges,
         edgeLookup,
         connectionLookup,
         onNodesChange: null,
         onEdgesChange: null,
-        hasDefaultNodes: false,
-        hasDefaultEdges: false,
+        hasDefaultNodes: defaultNodes !== undefined,
+        hasDefaultEdges: defaultEdges !== undefined,
         panZoom: null,
         minZoom: 0.5,
         maxZoom: 2,
@@ -2484,15 +2568,16 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
         connectionRadius: 20,
-        onError: () => null,
+        onError: devWarn,
         isValidConnection: undefined,
         onSelectionChangeHandlers: [],
         lib: 'react',
+        debug: false,
     };
 };
 
-const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1 }),
+const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
+    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, defaultNodes, defaultEdges }),
     setNodes: (nodes) => {
         const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
@@ -2501,7 +2586,6 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        // TODO: consider updating the types to reflect the distinction between user-provided nodes and internal nodes.
         const nodesWithInternalData = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
         set({ nodes: nodesWithInternalData });
     },
@@ -2510,34 +2594,23 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         updateConnectionLookup(connectionLookup, edgeLookup, edges);
         set({ edges });
     },
-    // when the user works with an uncontrolled flow,
-    // we set a flag `hasDefaultNodes` / `hasDefaultEdges`
     setDefaultNodesAndEdges: (nodes, edges) => {
-        const hasDefaultNodes = typeof nodes !== 'undefined';
-        const hasDefaultEdges = typeof edges !== 'undefined';
-        const nextState = {
-            hasDefaultNodes,
-            hasDefaultEdges,
-        };
-        if (hasDefaultNodes) {
-            const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
-            nextState.nodes = adoptUserProvidedNodes(nodes, nodeLookup, {
-                nodeOrigin,
-                elevateNodesOnSelect,
-            });
+        if (nodes) {
+            const { setNodes } = get();
+            setNodes(nodes);
+            set({ hasDefaultNodes: true });
         }
-        if (hasDefaultEdges) {
-            const { connectionLookup, edgeLookup } = get();
-            updateConnectionLookup(connectionLookup, edgeLookup, edges);
-            nextState.edges = edges;
+        if (edges) {
+            const { setEdges } = get();
+            setEdges(edges);
+            set({ hasDefaultEdges: true });
         }
-        set(nextState);
     },
     // Every node gets registerd at a ResizeObserver. Whenever a node
     // changes its dimensions, this function is called to measure the
     // new dimensions and update the nodes.
     updateNodeDimensions: (updates) => {
-        const { onNodesChange, fitView, nodes, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, } = get();
+        const { onNodesChange, fitView, nodes, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
         const changes = [];
         const updatedNodes = updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, (id, dimensions) => {
             changes.push({
@@ -2565,89 +2638,82 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         // attribute which they get from this handler.
         set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
         if (changes?.length > 0) {
+            if (debug) {
+                console.log('React Flow: trigger node changes', changes);
+            }
             onNodesChange?.(changes);
         }
     },
-    updateNodePositions: (nodeDragItems, positionChanged = true, dragging = false) => {
+    updateNodePositions: (nodeDragItems, dragging = false) => {
         const changes = nodeDragItems.map((node) => {
             const change = {
                 id: node.id,
                 type: 'position',
+                position: node.position,
+                positionAbsolute: node.computed?.positionAbsolute,
                 dragging,
             };
-            if (positionChanged) {
-                change.positionAbsolute = node.computed?.positionAbsolute;
-                change.position = node.position;
-            }
             return change;
         });
         get().triggerNodeChanges(changes);
     },
     triggerNodeChanges: (changes) => {
-        const { onNodesChange, nodeLookup, nodes, hasDefaultNodes, nodeOrigin, elevateNodesOnSelect } = get();
+        const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
         if (changes?.length) {
             if (hasDefaultNodes) {
                 const updatedNodes = applyNodeChanges(changes, nodes);
-                const nextNodes = adoptUserProvidedNodes(updatedNodes, nodeLookup, {
-                    nodeOrigin,
-                    elevateNodesOnSelect,
-                });
-                set({ nodes: nextNodes });
+                setNodes(updatedNodes);
+            }
+            if (debug) {
+                console.log('React Flow: trigger node changes', changes);
             }
             onNodesChange?.(changes);
         }
     },
+    triggerEdgeChanges: (changes) => {
+        const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
+        if (changes?.length) {
+            if (hasDefaultEdges) {
+                const updatedEdges = applyEdgeChanges(changes, edges);
+                setEdges(updatedEdges);
+            }
+            if (debug) {
+                console.log('React Flow: trigger edge changes', changes);
+            }
+            onEdgesChange?.(changes);
+        }
+    },
     addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edges, nodes } = get();
-        let changedNodes;
-        let changedEdges = null;
+        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
-            changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            triggerNodeChanges(nodeChanges);
+            return;
         }
-        else {
-            changedNodes = getSelectionChanges(nodes, new Set([...selectedNodeIds]), true);
-            changedEdges = getSelectionChanges(edges);
-        }
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        triggerNodeChanges(getSelectionChanges(nodes, new Set([...selectedNodeIds]), true));
+        triggerEdgeChanges(getSelectionChanges(edges));
     },
     addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edges, nodes } = get();
-        let changedEdges;
-        let changedNodes = null;
+        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
-            changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+            const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+            triggerEdgeChanges(changedEdges);
+            return;
         }
-        else {
-            changedEdges = getSelectionChanges(edges, new Set([...selectedEdgeIds]));
-            changedNodes = getSelectionChanges(nodes, new Set(), true);
-        }
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        triggerEdgeChanges(getSelectionChanges(edges, new Set([...selectedEdgeIds])));
+        triggerNodeChanges(getSelectionChanges(nodes, new Set(), true));
     },
     unselectNodesAndEdges: ({ nodes, edges } = {}) => {
-        const { edges: storeEdges, nodes: storeNodes } = get();
+        const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get();
         const nodesToUnselect = nodes ? nodes : storeNodes;
         const edgesToUnselect = edges ? edges : storeEdges;
-        const changedNodes = nodesToUnselect.map((n) => {
+        const nodeChanges = nodesToUnselect.map((n) => {
             n.selected = false;
             return createSelectionChange(n.id, false);
         });
-        const changedEdges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
+        triggerNodeChanges(nodeChanges);
+        triggerEdgeChanges(edgeChanges);
     },
     setMinZoom: (minZoom) => {
         const { panZoom, maxZoom } = get();
@@ -2664,19 +2730,11 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         set({ translateExtent });
     },
     resetSelectedElements: () => {
-        const { edges, nodes } = get();
-        const nodesToUnselect = nodes
-            .filter((e) => e.selected)
-            .map((n) => createSelectionChange(n.id, false));
-        const edgesToUnselect = edges
-            .filter((e) => e.selected)
-            .map((e) => createSelectionChange(e.id, false));
-        updateNodesAndEdgesSelections({
-            changedNodes: nodesToUnselect,
-            changedEdges: edgesToUnselect,
-            get,
-            set,
-        });
+        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
+        const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
+        triggerNodeChanges(nodeChanges);
+        triggerEdgeChanges(edgeChanges);
     },
     setNodeExtent: (nodeExtent) => {
         const { nodes } = get();
@@ -2719,30 +2777,24 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         connectionEndHandle: null,
     }),
     updateConnection: (params) => {
-        const { connectionStatus, connectionStartHandle, connectionEndHandle, connectionPosition } = get();
+        const { connectionPosition } = get();
         const currentConnection = {
+            ...params,
             connectionPosition: params.connectionPosition ?? connectionPosition,
-            connectionStatus: params.connectionStatus ?? connectionStatus,
-            connectionStartHandle: params.connectionStartHandle ?? connectionStartHandle,
-            connectionEndHandle: params.connectionEndHandle ?? connectionEndHandle,
         };
         set(currentConnection);
     },
-    reset: () => {
-        // @todo: what should we do about this? Do we still need it?
-        // if you are on a SPA with multiple flows, we want to make sure that the store gets resetted
-        // when you switch pages. Does this reset solves this? Currently it always gets called. This
-        // leads to an emtpy nodes array at the beginning.
-        // set({ ...getInitialState() });
-    },
+    reset: () => set({ ...getInitialState() }),
 }), Object.is);
 
-function ReactFlowProvider({ children, initialNodes, initialEdges, initialWidth, initialHeight, fitView, }) {
+function ReactFlowProvider({ children, initialNodes, initialEdges, defaultNodes, defaultEdges, initialWidth, initialHeight, fitView, }) {
     const storeRef = useRef(null);
     if (!storeRef.current) {
         storeRef.current = createRFStore({
             nodes: initialNodes,
             edges: initialEdges,
+            defaultNodes,
+            defaultEdges,
             width: initialWidth,
             height: initialHeight,
             fitView,
@@ -2750,51 +2802,17 @@ function ReactFlowProvider({ children, initialNodes, initialEdges, initialWidth,
     }
     return jsx(Provider$1, { value: storeRef.current, children: children });
 }
-ReactFlowProvider.displayName = 'ReactFlowProvider';
 
-function Wrapper({ children, nodes, edges, width, height, fitView, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
         // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
-}
-Wrapper.displayName = 'ReactFlowWrapper';
-
-function getMediaQuery() {
-    if (typeof window === 'undefined' || !window.matchMedia) {
-        return null;
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)');
-}
-/**
- * Hook for receiving the current color mode class 'dark' or 'light'.
- *
- * @internal
- * @param colorMode - The color mode to use ('dark', 'light' or 'system')
- */
-function useColorModeClass(colorMode) {
-    const [colorModeClass, setColorModeClass] = useState(colorMode === 'system' ? null : colorMode);
-    useEffect(() => {
-        if (colorMode !== 'system') {
-            setColorModeClass(colorMode);
-            return;
-        }
-        const mediaQuery = getMediaQuery();
-        const updateColorModeClass = () => setColorModeClass(mediaQuery?.matches ? 'dark' : 'light');
-        updateColorModeClass();
-        mediaQuery?.addEventListener('change', updateColorModeClass);
-        return () => {
-            mediaQuery?.removeEventListener('change', updateColorModeClass);
-        };
-    }, [colorMode]);
-    return colorModeClass !== null ? colorModeClass : getMediaQuery()?.matches ? 'dark' : 'light';
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
 }
 
-const initNodeOrigin = [0, 0];
-const initDefaultViewport = { x: 0, y: 0, zoom: 1 };
 const wrapperStyle = {
     width: '100%',
     height: '100%',
@@ -2802,12 +2820,12 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-const ReactFlow = forwardRef(({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = initNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = true, defaultViewport = initDefaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', ...rest }, ref) => {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
-    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, children: [jsx(GraphView$1, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete }), jsx(Wrapper$1, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
-});
-ReactFlow.displayName = 'ReactFlow';
+    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+}
+var index = forwardRef(ReactFlow);
 
 const selector$8 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 function EdgeLabelRenderer({ children }) {
@@ -2939,7 +2957,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
  * Hook for registering an onSelectionChange handler.
  *
  * @public
- * @params params.onChange - The handler to register
+ * @param params.onChange - The handler to register
  */
 function useOnSelectionChange({ onChange }) {
     const store = useStoreApi();
@@ -2957,9 +2975,14 @@ const selector$6 = (options) => (s) => {
     if (s.nodes.length === 0) {
         return false;
     }
-    return s.nodes
-        .filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
-        .every((n) => n[internalsSymbol]?.handleBounds !== undefined);
+    for (const node of s.nodes) {
+        if (options.includeHiddenNodes || !node.hidden) {
+            if (node[internalsSymbol]?.handleBounds === undefined) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 const defaultOptions = {
     includeHiddenNodes: false,
@@ -2977,7 +3000,7 @@ function useNodesInitialized(options = defaultOptions) {
 }
 
 /**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
  * @param param.type - handle type 'source' or 'target'
@@ -2985,12 +3008,12 @@ function useNodesInitialized(options = defaultOptions) {
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
- * @returns an array with connections
+ * @returns an array with handle connections
  */
 function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect, }) {
     const _nodeId = useNodeId();
+    const currentNodeId = nodeId ?? _nodeId;
     const prevConnections = useRef(null);
-    const currentNodeId = nodeId || _nodeId;
     const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`), areConnectionMapsEqual);
     useEffect(() => {
         // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
@@ -3007,17 +3030,20 @@ function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useNodesData(nodeIds) {
     const nodesData = useStore(useCallback((s) => {
-        if (!Array.isArray(nodeIds)) {
-            return s.nodeLookup.get(nodeIds)?.data || null;
-        }
         const data = [];
-        for (const nodeId of nodeIds) {
-            const nodeData = s.nodeLookup.get(nodeId)?.data;
-            if (nodeData) {
-                data.push(nodeData);
+        const isArrayOfIds = Array.isArray(nodeIds);
+        const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
+        for (const nodeId of _nodeIds) {
+            const node = s.nodeLookup.get(nodeId);
+            if (node) {
+                data.push({
+                    id: node.id,
+                    type: node.type,
+                    data: node.data,
+                });
             }
         }
-        return data;
+        return isArrayOfIds ? data : data[0] ?? null;
     }, [nodeIds]), shallow);
     return nodesData;
 }
@@ -3032,20 +3058,13 @@ const selector$5 = (s) => ({
  * Hook for accessing the ongoing connection.
  *
  * @public
- * @returns ongoing connection: startHandle, endHandle, status, position
+ * @returns ongoing connection
  */
 function useConnection() {
     const ongoingConnection = useStore(selector$5, shallow);
     return ongoingConnection;
 }
 
-var BackgroundVariant;
-(function (BackgroundVariant) {
-    BackgroundVariant["Lines"] = "lines";
-    BackgroundVariant["Dots"] = "dots";
-    BackgroundVariant["Cross"] = "cross";
-})(BackgroundVariant || (BackgroundVariant = {}));
-
 function LinePattern({ dimensions, lineWidth, variant, className }) {
     return (jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(['react-flow__background-pattern', variant, className]) }));
 }
@@ -3053,13 +3072,20 @@ function DotPattern({ radius, className }) {
     return (jsx("circle", { cx: radius, cy: radius, r: radius, className: cc(['react-flow__background-pattern', 'dots', className]) }));
 }
 
+var BackgroundVariant;
+(function (BackgroundVariant) {
+    BackgroundVariant["Lines"] = "lines";
+    BackgroundVariant["Dots"] = "dots";
+    BackgroundVariant["Cross"] = "cross";
+})(BackgroundVariant || (BackgroundVariant = {}));
+
 const defaultSize = {
     [BackgroundVariant.Dots]: 1,
     [BackgroundVariant.Lines]: 1,
     [BackgroundVariant.Cross]: 6,
 };
 const selector$4 = (s) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
-function Background({ id, variant = BackgroundVariant.Dots, 
+function BackgroundComponent({ id, variant = BackgroundVariant.Dots, 
 // only used for dots and cross
 gap = 20, 
 // only used for lines and cross
@@ -3084,8 +3110,8 @@ size, lineWidth = 1, offset = 2, color, bgColor, style, className, patternClassN
             '--xy-background-pattern-color-props': color,
         }, ref: ref, "data-testid": "rf__background", children: [jsx("pattern", { id: _patternId, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: isDots ? (jsx(DotPattern, { radius: scaledSize / offset, className: patternClassName })) : (jsx(LinePattern, { dimensions: patternDimensions, lineWidth: lineWidth, variant: variant, className: patternClassName })) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${_patternId})` })] }));
 }
-Background.displayName = 'Background';
-var Background$1 = memo(Background);
+BackgroundComponent.displayName = 'Background';
+const Background = memo(BackgroundComponent);
 
 function PlusIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", children: jsx("path", { d: "M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" }) }));
@@ -3107,15 +3133,16 @@ function UnlockIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 32", children: jsx("path", { d: "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" }) }));
 }
 
-const ControlButton = ({ children, className, ...rest }) => (jsx("button", { type: "button", className: cc(['react-flow__controls-button', className]), ...rest, children: children }));
-ControlButton.displayName = 'ControlButton';
+function ControlButton({ children, className, ...rest }) {
+    return (jsx("button", { type: "button", className: cc(['react-flow__controls-button', className]), ...rest, children: children }));
+}
 
 const selector$3 = (s) => ({
     isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
-const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', }) => {
+function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
     const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -3139,12 +3166,12 @@ const Controls = ({ style, showZoom = true, showFitView = true, showInteractive
         });
         onInteractiveChange?.(!isInteractive);
     };
-    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
-};
-Controls.displayName = 'Controls';
-var Controls$1 = memo(Controls);
+    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
+}
+ControlsComponent.displayName = 'Controls';
+const Controls = memo(ControlsComponent);
 
-function MiniMapNode({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }) {
+function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }) {
     const { background, backgroundColor } = style || {};
     const fill = (color || background || backgroundColor);
     return (jsx("rect", { className: cc(['react-flow__minimap-node', { selected }, className]), x: x, y: y, rx: borderRadius, ry: borderRadius, width: width, height: height, style: {
@@ -3153,15 +3180,15 @@ function MiniMapNode({ id, x, y, width, height, style, color, strokeColor, strok
             strokeWidth,
         }, shapeRendering: shapeRendering, onClick: onClick ? (event) => onClick(event, id) : undefined }));
 }
-var MiniMapNode$1 = memo(MiniMapNode);
+const MiniMapNode = memo(MiniMapNodeComponent);
 
 const selector$2 = (s) => s.nodeOrigin;
 const selectorNodeIds = (s) => s.nodes.map((node) => node.id);
-const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
+const getAttrFunction = (func) => func instanceof Function ? func : () => func;
 function MiniMapNodes({ nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
 // a component properly.
-nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
+nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
     const nodeIds = useStore(selectorNodeIds, shallow);
     const nodeOrigin = useStore(selector$2);
     const nodeColorFunc = getAttrFunction(nodeColor);
@@ -3176,7 +3203,7 @@ nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
         // For more details, see a similar commit in `NodeRenderer/index.tsx`.
         jsx(NodeComponentWrapper, { id: nodeId, nodeOrigin: nodeOrigin, nodeColorFunc: nodeColorFunc, nodeStrokeColorFunc: nodeStrokeColorFunc, nodeClassNameFunc: nodeClassNameFunc, nodeBorderRadius: nodeBorderRadius, nodeStrokeWidth: nodeStrokeWidth, NodeComponent: NodeComponent, onClick: onClick, shapeRendering: shapeRendering }, nodeId))) }));
 }
-const NodeComponentWrapper = memo(function NodeComponentWrapper({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
+function NodeComponentWrapperInner({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y } = useStore((s) => {
         const node = s.nodeLookup.get(id);
         const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
@@ -3186,11 +3213,13 @@ const NodeComponentWrapper = memo(function NodeComponentWrapper({ id, nodeOrigin
             y,
         };
     }, shallow);
-    if (!node || node.hidden || !(node.computed?.width || node.width) || !(node.computed?.height || node.height)) {
+    if (!node || node.hidden || !nodeHasDimensions(node)) {
         return null;
     }
-    return (jsx(NodeComponent, { x: x, y: y, width: node.computed?.width ?? node.width ?? 0, height: node.computed?.height ?? node.height ?? 0, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
-});
+    const { width, height } = getNodeDimensions(node);
+    return (jsx(NodeComponent, { x: x, y: y, width: width, height: height, style: node.style, selected: !!node.selected, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onClick, id: node.id }));
+}
+const NodeComponentWrapper = memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = memo(MiniMapNodes);
 
 const defaultWidth = 200;
@@ -3204,7 +3233,7 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
+        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
         rfId: s.rfId,
         nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
@@ -3214,10 +3243,10 @@ const selector$1 = (s) => {
     };
 };
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
+function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
 // a component properly.
-nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan, zoomStep = 10, offsetScale = 5, }) {
+nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan, zoomStep = 10, offsetScale = 5, }) {
     const store = useStoreApi();
     const svg = useRef(null);
     const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1, shallow);
@@ -3275,189 +3304,108 @@ nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, positio
         : undefined;
     return (jsx(Panel, { position: position, style: {
             ...style,
-            '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+            '--xy-minimap-background-color-props': typeof bgColor === 'string' ? bgColor : undefined,
+            '--xy-minimap-mask-background-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+            '--xy-minimap-mask-stroke-color-props': typeof maskStrokeColor === 'string' ? maskStrokeColor : undefined,
+            '--xy-minimap-mask-stroke-width-props': typeof maskStrokeWidth === 'number' ? maskStrokeWidth * viewScale : undefined,
             '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
             '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
             '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
-        }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", stroke: maskStrokeColor, strokeWidth: maskStrokeWidth, pointerEvents: "none" })] }) }));
-}
-MiniMap.displayName = 'MiniMap';
-var MiniMap$1 = memo(MiniMap);
-
-var ResizeControlVariant;
-(function (ResizeControlVariant) {
-    ResizeControlVariant["Line"] = "line";
-    ResizeControlVariant["Handle"] = "handle";
-})(ResizeControlVariant || (ResizeControlVariant = {}));
-
-// returns an array of two numbers (0, 1 or -1) representing the direction of the resize
-// 0 = no change, 1 = increase, -1 = decrease
-function getDirection({ width, prevWidth, height, prevHeight, invertX, invertY }) {
-    const deltaWidth = width - prevWidth;
-    const deltaHeight = height - prevHeight;
-    const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
-    if (deltaWidth && invertX) {
-        direction[0] = direction[0] * -1;
-    }
-    if (deltaHeight && invertY) {
-        direction[1] = direction[1] * -1;
-    }
-    return direction;
+        }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", pointerEvents: "none" })] }) }));
 }
+MiniMapComponent.displayName = 'MiniMap';
+const MiniMap = memo(MiniMapComponent);
 
-const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
-const initStartValues = {
-    ...initPrevValues,
-    pointerX: 0,
-    pointerY: 0,
-    aspectRatio: 1,
-};
 function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
     const contextNodeId = useNodeId();
     const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
     const store = useStoreApi();
     const resizeControlRef = useRef(null);
-    const startValues = useRef(initStartValues);
-    const prevValues = useRef(initPrevValues);
     const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
     const controlPosition = position ?? defaultPosition;
+    const resizer = useRef(null);
     useEffect(() => {
         if (!resizeControlRef.current || !id) {
             return;
         }
-        const selection = select(resizeControlRef.current);
-        const enableX = controlPosition.includes('right') || controlPosition.includes('left');
-        const enableY = controlPosition.includes('bottom') || controlPosition.includes('top');
-        const invertX = controlPosition.includes('left');
-        const invertY = controlPosition.includes('top');
-        const dragHandler = drag()
-            .on('start', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
-            const node = nodeLookup.get(id);
-            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            prevValues.current = {
-                width: node?.computed?.width ?? 0,
-                height: node?.computed?.height ?? 0,
-                x: node?.position.x ?? 0,
-                y: node?.position.y ?? 0,
-            };
-            startValues.current = {
-                ...prevValues.current,
-                pointerX: xSnapped,
-                pointerY: ySnapped,
-                aspectRatio: prevValues.current.width / prevValues.current.height,
-            };
-            onResizeStart?.(event, { ...prevValues.current });
-        })
-            .on('drag', (event) => {
-            const { nodeLookup, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
-            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
-            const node = nodeLookup.get(id);
-            if (node) {
-                const changes = [];
-                const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, x: startNodeX, y: startNodeY, aspectRatio, } = startValues.current;
-                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
-                const distX = Math.floor(enableX ? xSnapped - startX : 0);
-                const distY = Math.floor(enableY ? ySnapped - startY : 0);
-                let width = clamp(startWidth + (invertX ? -distX : distX), minWidth, maxWidth);
-                let height = clamp(startHeight + (invertY ? -distY : distY), minHeight, maxHeight);
-                if (keepAspectRatio) {
-                    const nextAspectRatio = width / height;
-                    const isDiagonal = enableX && enableY;
-                    const isHorizontal = enableX && !enableY;
-                    const isVertical = enableY && !enableX;
-                    width = (nextAspectRatio <= aspectRatio && isDiagonal) || isVertical ? height * aspectRatio : width;
-                    height = (nextAspectRatio > aspectRatio && isDiagonal) || isHorizontal ? width / aspectRatio : height;
-                    if (width >= maxWidth) {
-                        width = maxWidth;
-                        height = maxWidth / aspectRatio;
-                    }
-                    else if (width <= minWidth) {
-                        width = minWidth;
-                        height = minWidth / aspectRatio;
-                    }
-                    if (height >= maxHeight) {
-                        height = maxHeight;
-                        width = maxHeight * aspectRatio;
-                    }
-                    else if (height <= minHeight) {
-                        height = minHeight;
-                        width = minHeight * aspectRatio;
-                    }
-                }
-                const isWidthChange = width !== prevWidth;
-                const isHeightChange = height !== prevHeight;
-                if (invertX || invertY) {
-                    const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
-                    const y = invertY ? startNodeY - (height - startHeight) : startNodeY;
-                    // only transform the node if the width or height changes
-                    const isXPosChange = x !== prevX && isWidthChange;
-                    const isYPosChange = y !== prevY && isHeightChange;
-                    if (isXPosChange || isYPosChange) {
+        if (!resizer.current) {
+            resizer.current = XYResizer({
+                domNode: resizeControlRef.current,
+                nodeId: id,
+                getStoreItems: () => {
+                    const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin } = store.getState();
+                    return {
+                        nodeLookup,
+                        transform,
+                        snapGrid,
+                        snapToGrid,
+                        nodeOrigin,
+                    };
+                },
+                onChange: (change, childChanges) => {
+                    const { triggerNodeChanges } = store.getState();
+                    const changes = [];
+                    if (change.isXPosChange || change.isYPosChange) {
                         const positionChange = {
-                            id: node.id,
+                            id,
                             type: 'position',
                             position: {
-                                x: isXPosChange ? x : prevX,
-                                y: isYPosChange ? y : prevY,
+                                x: change.x,
+                                y: change.y,
                             },
                         };
                         changes.push(positionChange);
-                        prevValues.current.x = positionChange.position.x;
-                        prevValues.current.y = positionChange.position.y;
                     }
-                }
-                if (isWidthChange || isHeightChange) {
+                    if (change.isWidthChange || change.isHeightChange) {
+                        const dimensionChange = {
+                            id,
+                            type: 'dimensions',
+                            resizing: true,
+                            dimensions: {
+                                width: change.width,
+                                height: change.height,
+                            },
+                        };
+                        changes.push(dimensionChange);
+                    }
+                    for (const childChange of childChanges) {
+                        const positionChange = {
+                            ...childChange,
+                            type: 'position',
+                        };
+                        changes.push(positionChange);
+                    }
+                    triggerNodeChanges(changes);
+                },
+                onEnd: () => {
                     const dimensionChange = {
                         id: id,
                         type: 'dimensions',
-                        updateStyle: true,
-                        resizing: true,
-                        dimensions: {
-                            width: width,
-                            height: height,
-                        },
+                        resizing: false,
                     };
-                    changes.push(dimensionChange);
-                    prevValues.current.width = width;
-                    prevValues.current.height = height;
-                }
-                if (changes.length === 0) {
-                    return;
-                }
-                const direction = getDirection({
-                    width: prevValues.current.width,
-                    prevWidth,
-                    height: prevValues.current.height,
-                    prevHeight,
-                    invertX,
-                    invertY,
-                });
-                const nextValues = { ...prevValues.current, direction };
-                const callResize = shouldResize?.(event, nextValues);
-                if (callResize === false) {
-                    return;
-                }
-                onResize?.(event, nextValues);
-                triggerNodeChanges(changes);
-            }
-        })
-            .on('end', (event) => {
-            const dimensionChange = {
-                id: id,
-                type: 'dimensions',
-                resizing: false,
-            };
-            onResizeEnd?.(event, { ...prevValues.current });
-            store.getState().triggerNodeChanges([dimensionChange]);
+                    store.getState().triggerNodeChanges([dimensionChange]);
+                },
+            });
+        }
+        resizer.current.update({
+            controlPosition,
+            boundaries: {
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight,
+            },
+            keepAspectRatio,
+            onResizeStart,
+            onResize,
+            onResizeEnd,
+            shouldResize,
         });
-        selection.call(dragHandler);
         return () => {
-            selection.on('.drag', null);
+            resizer.current?.destroy();
         };
     }, [
-        id,
         controlPosition,
         minWidth,
         minHeight,
@@ -3467,21 +3415,20 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
         onResizeStart,
         onResize,
         onResizeEnd,
+        shouldResize,
     ]);
     const positionClassNames = controlPosition.split('-');
     const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
     const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
     return (jsx("div", { className: cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children }));
 }
-var ResizeControl$1 = memo(ResizeControl);
+const NodeResizeControl = memo(ResizeControl);
 
-const handleControls = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-const lineControls = ['top', 'right', 'bottom', 'left'];
 function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, lineClassName, lineStyle, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
     if (!isVisible) {
         return null;
     }
-    return (jsxs(Fragment, { children: [lineControls.map((c) => (jsx(ResizeControl$1, { className: lineClassName, style: lineStyle, nodeId: nodeId, position: c, variant: ResizeControlVariant.Line, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, c))), handleControls.map((c) => (jsx(ResizeControl$1, { className: handleClassName, style: handleStyle, nodeId: nodeId, position: c, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, c)))] }));
+    return (jsxs(Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position) => (jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId: nodeId, position: position, variant: ResizeControlVariant.Line, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, position))), XY_RESIZER_HANDLE_POSITIONS.map((position) => (jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId: nodeId, position: position, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, position)))] }));
 }
 
 const selector = (state) => state.domNode?.querySelector('.react-flow__renderer');
@@ -3533,7 +3480,7 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     if (!isActive || !nodes.length) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, nodeOrigin);
+    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
     const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
     const wrapperStyle = {
         position: 'absolute',
@@ -3544,4 +3491,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background$1 as Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls$1 as Controls, EdgeLabelRenderer, EdgeText$1 as EdgeText, Handle$1 as Handle, MiniMap$1 as MiniMap, ResizeControl$1 as NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, ResizeControlVariant, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers, getSimpleBezierPath, handleParentExpand, isEdge, isNode, updateEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, handleParentExpand, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };