From bf2c77fb59bba3991e073a7eaf9038e14f8cd1e1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Apr 2022 09:44:42 +0200
Subject: [PATCH] feat(flow): Promisify updateNodePosition

* helps with selected nodes dragging performance
---
 package/src/composables/useVueFlow.ts |  6 ++++--
 package/src/store/actions.ts          | 26 ++++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/package/src/composables/useVueFlow.ts b/package/src/composables/useVueFlow.ts
index 57bae96c..2f677230 100644
--- a/package/src/composables/useVueFlow.ts
+++ b/package/src/composables/useVueFlow.ts
@@ -61,7 +61,9 @@ export class Storage {
       id,
       store,
     }
+
     this.set(id, flow)
+
     return flow
   }
 
@@ -80,7 +82,7 @@ export default <NodeData = ElementData, EdgeData = ElementData>(
   const scope = getCurrentScope() as Scope
   const vueFlowId = scope?.vueFlowId || options?.id
 
-  let vueFlow: Injection<any, any>
+  let vueFlow: Injection
 
   if (scope) {
     const injection = inject(VueFlow, null)
@@ -108,7 +110,7 @@ export default <NodeData = ElementData, EdgeData = ElementData>(
     if (options) vueFlow.setState(options)
   }
 
-  if (!vueFlow) throw new Error('vue flow store instance not found.')
+  if (!vueFlow) throw new Error('[vueflow]: store instance not found.')
 
   if (scope) provide(VueFlow, vueFlow)
 
diff --git a/package/src/store/actions.ts b/package/src/store/actions.ts
index 4bb414ae..a46b0017 100644
--- a/package/src/store/actions.ts
+++ b/package/src/store/actions.ts
@@ -117,21 +117,27 @@ const createGraphNodes = (nodes: Node[], getNode: Getters['getNode'], currGraphN
 
 export default (state: State, getters: ComputedGetters): Actions => {
   const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
-    const changes: NodePositionChange[] = []
+    const nodePosPromise = new Promise<NodePositionChange[]>((resolve) => {
+      const changes: NodePositionChange[] = []
 
-    state.nodes.forEach((node) => {
-      if (node.selected) {
-        if (!node.parentNode) {
-          changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
-        } else if (!isParentSelected(node, getters.getNode.value)) {
+      state.nodes.forEach((node) => {
+        if (node.selected) {
+          if (!node.parentNode) {
+            changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
+          } else if (!isParentSelected(node, getters.getNode.value)) {
+            changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
+          }
+        } else if (node.id === id) {
           changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
         }
-      } else if (node.id === id) {
-        changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
-      }
+      })
+
+      if (changes.length) resolve(changes)
     })
 
-    if (changes.length) state.hooks.nodesChange.trigger(changes)
+    nodePosPromise.then((changes) => {
+      state.hooks.nodesChange.trigger(changes)
+    })
   }
 
   const updateNodeDimensions: Actions['updateNodeDimensions'] = (updates) => {