@xyflow/react 12.0.0-next.4 → 12.0.0-next.6

package/dist/esm/index.js

@@ -2,13 +2,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, 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';
+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, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } 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;
@@ -456,38 +454,41 @@ 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;
+function handleParentExpand(updatedElements, updateItem) {
+    for (const [index, item] of updatedElements.entries()) {
+        if (item.id === updateItem.parentNode) {
+            const parent = { ...item };
+            if (!parent.computed) {
+                parent.computed = {};
             }
-            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;
+            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;
         }
     }
 }
@@ -495,90 +496,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 = [];
     const updatedElements = [];
+    // 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 {
-            remainingChanges.push(change);
+        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]);
         }
-    }
-    for (const item of elements) {
-        const nextChanges = [];
-        const _remainingChanges = [];
-        for (const change of remainingChanges) {
-            if (change.id === item.id) {
-                nextChanges.push(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(change);
+                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;
+        }
+        // If we have a 'remove' change queued, it'll be the only change in the array
+        if (changes[0].type === 'remove') {
             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 (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, elements);
+        }
+        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.
@@ -620,7 +632,7 @@ function applyNodeChanges(changes, nodes) {
     );
   
     return (
-      <ReactFLow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
+      <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
     );
  */
 function applyEdgeChanges(changes, edges) {
@@ -648,6 +660,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
@@ -732,31 +764,50 @@ function useReactFlow() {
         const { edges = [] } = store.getState();
         return edges.find((e) => e.id === id);
     }, []);
+    // this is used to handle multiple syncronous setNodes calls
+    const setNodesData = useRef();
+    const setNodesTimeout = useRef();
     const setNodes = useCallback((payload) => {
-        const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
-        const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
-        if (hasDefaultNodes) {
-            setNodes(nextNodes);
-        }
-        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);
-        }
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        const nextNodes = typeof payload === 'function' ? payload(setNodesData.current || nodes) : payload;
+        setNodesData.current = nextNodes;
+        if (setNodesTimeout.current) {
+            clearTimeout(setNodesTimeout.current);
+        }
+        // if there are multiple synchronous setNodes calls, we only want to call onNodesChange once
+        // for this, we use a timeout to wait for the last call and store updated nodes in setNodesData
+        // this is not perfect, but should work in most cases
+        setNodesTimeout.current = setTimeout(() => {
+            if (hasDefaultNodes) {
+                setNodes(nextNodes);
+            }
+            else if (onNodesChange) {
+                const changes = getElementsDiffChanges({ items: setNodesData.current, lookup: nodeLookup });
+                onNodesChange(changes);
+            }
+            setNodesData.current = undefined;
+        }, 0);
     }, []);
+    // this is used to handle multiple syncronous setEdges calls
+    const setEdgesData = useRef();
+    const setEdgesTimeout = useRef();
     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);
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        const nextEdges = typeof payload === 'function' ? payload(setEdgesData.current || edges) : payload;
+        setEdgesData.current = nextEdges;
+        if (setEdgesTimeout.current) {
+            clearTimeout(setEdgesTimeout.current);
         }
+        setEdgesTimeout.current = setTimeout(() => {
+            if (hasDefaultEdges) {
+                setEdges(nextEdges);
+            }
+            else if (onEdgesChange) {
+                const changes = getElementsDiffChanges({ items: nextEdges, lookup: edgeLookup });
+                onEdgesChange(changes);
+            }
+            setEdgesData.current = undefined;
+        }, 0);
     }, []);
     const addNodes = useCallback((payload) => {
         const nodes = Array.isArray(payload) ? payload : [payload];
@@ -794,8 +845,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,
@@ -807,9 +858,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) => ({
@@ -819,9 +869,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' })));
@@ -927,8 +976,8 @@ function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     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]);
@@ -1753,9 +1802,9 @@ function 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,
+            width: width ?? node.style?.width,
+            height: height ?? node.style?.height,
         }, "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 }) }) }));
 }
 
@@ -3113,7 +3162,7 @@ const selector$3 = (s) => ({
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
-function ControlsComponent({ 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();
@@ -3137,7 +3186,7 @@ function ControlsComponent({ style, showZoom = true, showFitView = true, showInt
         });
         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] }));
+    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);
@@ -3283,179 +3332,87 @@ nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, positio
 MiniMapComponent.displayName = 'MiniMap';
 const MiniMap = memo(MiniMapComponent);
 
-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;
-}
-
-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 } = store.getState();
+                    return {
+                        nodeLookup,
+                        transform,
+                        snapGrid,
+                        snapToGrid,
+                    };
+                },
+                onChange: (change) => {
+                    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);
+                    }
+                    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,
@@ -3465,21 +3422,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');
@@ -3542,4 +3498,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, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, 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, ReactFlow, ReactFlowProvider, 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 };