refactor(react): separate user nodes and indernal nodes

packages/react/src/hooks/useMoveSelectedNodes.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { calculateNodePosition, snapPosition, type XYPosition } from '@xyflow/system';
 
-import { Node } from '../types';
+import { type Node } from '../types';
 import { useStoreApi } from './useStore';
 
 const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) =>
@@ -17,18 +17,11 @@ export function useMoveSelectedNodes() {
   const store = useStoreApi();
 
   const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => {
-    const {
-      nodeExtent,
-      nodes,
-      snapToGrid,
-      snapGrid,
-      nodesDraggable,
-      onError,
-      updateNodePositions,
-      nodeLookup,
-      nodeOrigin,
-    } = store.getState();
-    const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
+    const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } =
+      store.getState();
+    const nodeUpdates = [];
+    const isSelected = selectedAndDraggable(nodesDraggable);
+
     // 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;
@@ -37,32 +30,34 @@ export function useMoveSelectedNodes() {
     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,
-        };
-
-        if (snapToGrid) {
-          nextPosition = snapPosition(nextPosition, snapGrid);
-        }
-
-        const { position, positionAbsolute } = calculateNodePosition({
-          nodeId: node.id,
-          nextPosition,
-          nodeLookup,
-          nodeExtent,
-          nodeOrigin,
-          onError,
-        });
-
-        node.position = position;
-        node.computed.positionAbsolute = positionAbsolute;
+    for (const [, node] of nodeLookup) {
+      if (!isSelected(node)) {
+        continue;
       }
 
-      return node;
-    });
+      let nextPosition = {
+        x: node.internals.positionAbsolute.x + xDiff,
+        y: node.internals.positionAbsolute.y + yDiff,
+      };
+
+      if (snapToGrid) {
+        nextPosition = snapPosition(nextPosition, snapGrid);
+      }
+
+      const { position, positionAbsolute } = calculateNodePosition({
+        nodeId: node.id,
+        nextPosition,
+        nodeLookup,
+        nodeExtent,
+        nodeOrigin,
+        onError,
+      });
+
+      node.position = position;
+      node.internals.positionAbsolute = positionAbsolute;
+
+      nodeUpdates.push(node);
+    }
 
     updateNodePositions(nodeUpdates);
   }, []);