refactored useUpdateNodePositions to useMoveSelectedNodes

packages/react/src/components/NodeWrapper/index.tsx

@@ -14,7 +14,7 @@ import { useStore, useStoreApi } from '../../hooks/useStore';
 import { Provider } from '../../contexts/NodeIdContext';
 import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
 import { useDrag } from '../../hooks/useDrag';
-import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions';
+import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes } from './utils';
 import type { NodeWrapperProps } from '../../types';
@@ -79,7 +79,7 @@ export function NodeWrapper({
   const prevTargetPosition = useRef(node.targetPosition);
   const prevType = useRef(nodeType);
 
-  const updatePositions = useUpdateNodePositions();
+  const moveSelectedNodes = useMoveSelectedNodes();
 
   useEffect(() => {
     if (nodeRef.current && !node.hidden) {
@@ -188,10 +188,9 @@ export function NodeWrapper({
           .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,
       });
     }
   };

packages/react/src/components/NodesSelection/index.tsx

@@ -10,7 +10,7 @@ import { getNodesBounds } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useDrag } from '../../hooks/useDrag';
-import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions';
+import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { arrowKeyDiffs } from '../NodeWrapper/utils';
 import type { Node, ReactFlowState } from '../../types';
 
@@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => {
 export function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
   const store = useStoreApi();
   const { width, height, transformString, userSelectionActive } = useStore(selector, shallow);
-  const updatePositions = useUpdateNodePositions();
+  const moveSelectedNodes = useMoveSelectedNodes();
 
   const nodeRef = useRef<HTMLDivElement>(null);
 
@@ -64,10 +64,9 @@ export function NodesSelection({ onSelectionContextMenu, noPanClassName, disable
 
   const onKeyDown = (event: KeyboardEvent) => {
     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,
       });
     }
   };

packages/react/src/hooks/useMoveSelectedNodes.ts

@@ -1,32 +1,31 @@
 import { useCallback } from 'react';
-import { calcNextPosition, snapPosition } from '@xyflow/system';
+import { XYPosition, calcNextPosition, snapPosition } from '@xyflow/system';
 
 import { Node } from '../types';
-import { useStoreApi } from '../hooks/useStore';
+import { useStoreApi } from './useStore';
 
 const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) =>
   n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
 
 /**
- * Hook for updating node positions.
+ * Hook for updating node positions with keyboard presses
  *
  * @internal
  * @returns function for updating node positions
  */
-export function useUpdateNodePositions() {
+export function useMoveSelectedNodes() {
   const store = useStoreApi();
 
-  const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
+  const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => {
     const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = 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) {
@@ -61,5 +60,5 @@ export function useUpdateNodePositions() {
     updateNodePositions(nodeUpdates, true, false);
   }, []);
 
-  return updatePositions;
+  return moveSelectedNodes;
 }