refactor(core,nodes): move velocity logic into useUpdateNodePositions

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -208,16 +208,15 @@ const onKeyDown = (event: KeyboardEvent) => {
     $$(ariaLiveMessage).value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
       .position.x}, y: ${~~node.position.y}`
 
-    // 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.
-    const xVelo = props.snapGrid ? props.snapGrid[0] : 5
-    const yVelo = props.snapGrid ? props.snapGrid[1] : 5
-    const factor = event.shiftKey ? 4 : 1
-
-    updateNodePositions({
-      x: arrowKeyDiffs[event.key].x * xVelo * factor,
-      y: arrowKeyDiffs[event.key].y * yVelo * factor,
-    })
+    updateNodePositions(
+      {
+        x: arrowKeyDiffs[event.key].x,
+        y: arrowKeyDiffs[event.key].y,
+      },
+      !!props.snapGrid,
+      props.snapGrid,
+      event.shiftKey,
+    )
   }
 }
 </script>

packages/core/src/composables/useUpdateNodePositions.ts

@@ -1,12 +1,21 @@
-import type { NodeDragItem, XYPosition } from '~/types'
+import type { NodeDragItem, SnapGrid, XYPosition } from '~/types'
 
 function useUpdateNodePositions() {
   const { getSelectedNodes, nodeExtent, updateNodePositions, findNode } = useVueFlow()
 
-  return (positionDiff: XYPosition) => {
+  return (positionDiff: XYPosition, snapToGrid: boolean, snapGrid: SnapGrid | undefined, isShiftPressed = false) => {
+    // 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.
+    const xVelo = snapToGrid && snapGrid ? snapGrid[0] : 5
+    const yVelo = snapToGrid && snapGrid ? snapGrid[1] : 5
+    const factor = isShiftPressed ? 4 : 1
+
+    const positionDiffX = positionDiff.x * xVelo * factor
+    const positionDiffY = positionDiff.y * yVelo * factor
+
     const nodeUpdates = getSelectedNodes.value.flatMap((n) => {
       if (n.computedPosition) {
-        const nextPosition = { x: n.computedPosition.x + positionDiff.x, y: n.computedPosition.y + positionDiff.y }
+        const nextPosition = { x: n.computedPosition.x + positionDiffX, y: n.computedPosition.y + positionDiffY }
 
         const updatedPos = calcNextPosition(n, nextPosition, nodeExtent.value, n.parentNode ? findNode(n.parentNode) : undefined)
 
@@ -24,7 +33,7 @@ function useUpdateNodePositions() {
       return []
     })
 
-    updateNodePositions(nodeUpdates, true, true)
+    updateNodePositions(nodeUpdates, true, false)
   }
 }