From 4260e3158fa9f57efc44e297b51d19d220b4ffbb Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 25 Dec 2022 11:29:01 +0100
Subject: [PATCH] refactor(core,nodes): move velocity logic into
 `useUpdateNodePositions`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../core/src/components/Nodes/NodeWrapper.vue | 19 +++++++++----------
 .../src/composables/useUpdateNodePositions.ts | 17 +++++++++++++----
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue
index 8ba3bb30..4d34a1fa 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.vue
+++ b/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>
diff --git a/packages/core/src/composables/useUpdateNodePositions.ts b/packages/core/src/composables/useUpdateNodePositions.ts
index 98e15ddd..d300f282 100644
--- a/packages/core/src/composables/useUpdateNodePositions.ts
+++ b/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)
   }
 }