From 0becad73ad7ceea67cc445cf72c9ef86bec23a9e Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 23 Apr 2022 17:57:57 +0200
Subject: [PATCH] refactor(nodes): minimize position change loops

# What's changed?

* Only loop selected nodes instead of all nodes when determining position changes
---
 package/src/components/Nodes/NodeWrapper.vue |  2 --
 package/src/store/actions.ts                 | 18 +++++++++---------
 package/src/utils/changes.ts                 |  4 ++--
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index d27109af..dccbab12 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -104,9 +104,7 @@ onMounted(() => {
   onBeforeUnmount(() => observer.stop())
 
   updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }])
-})
 
-onMounted(() => {
   watch(
     [() => node.position, () => parent?.computedPosition, () => node.selected, () => parent?.selected],
     ([pos, parent]) => {
diff --git a/package/src/store/actions.ts b/package/src/store/actions.ts
index e7dd8ebd..7da55a8f 100644
--- a/package/src/store/actions.ts
+++ b/package/src/store/actions.ts
@@ -119,18 +119,18 @@ export default (state: State, getters: ComputedGetters): Actions => {
   const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
     const nodePosPromise = new Promise<NodePositionChange[]>((resolve) => {
       const changes: NodePositionChange[] = []
-
-      state.nodes.forEach((node) => {
-        if (node.selected) {
+      const curr = id ? getters.getNode.value(id)! : undefined
+      if (curr) {
+        changes.push(createPositionChange({ node: curr, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value))
+      } else {
+        getters.getSelectedNodes.value.forEach((node) => {
           if (!node.parentNode) {
-            changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
+            changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value))
           } else if (!isParentSelected(node, getters.getNode.value)) {
-            changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
+            changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value))
           }
-        } else if (node.id === id) {
-          changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes))
-        }
-      })
+        })
+      }
 
       if (changes.length) resolve(changes)
     })
diff --git a/package/src/utils/changes.ts b/package/src/utils/changes.ts
index 83b2d00c..e97a58ab 100644
--- a/package/src/utils/changes.ts
+++ b/package/src/utils/changes.ts
@@ -146,9 +146,9 @@ export const createSelectionChange = (id: string, selected: boolean): NodeSelect
 
 export const createPositionChange = (
   { node, diff, dragging, nodeExtent }: CreatePositionChangeParams,
-  curr: GraphNode[],
+  getNode: Getters['getNode'],
 ): NodePositionChange => {
-  const parent = node.parentNode ? curr.find((el) => el.id === node.parentNode) : undefined
+  const parent = node.parentNode ? getNode(node.parentNode) : undefined
   const change: NodePositionChange = {
     id: node.id,
     type: 'position',