From 0102ebcd33441282561bc17e02732012fcec2be4 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 3 Jun 2022 22:48:54 +0200
Subject: [PATCH] fix(nodes): performance issue with `getNode`

---
 packages/vue-flow/src/store/getters.ts | 12 ++++++++++--
 packages/vue-flow/src/utils/changes.ts |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/vue-flow/src/store/getters.ts b/packages/vue-flow/src/store/getters.ts
index dafd3fff..3fefaaf0 100644
--- a/packages/vue-flow/src/store/getters.ts
+++ b/packages/vue-flow/src/store/getters.ts
@@ -3,8 +3,16 @@ import type { ComputedGetters, GraphEdge, GraphNode, State } from '~/types'
 import { getNodesInside, isEdgeVisible } from '~/utils'
 
 export default (state: State): ComputedGetters => {
-  const getNode: ComputedGetters['getNode'] = computed(() => (id: string) => state.nodes.find((node) => node.id === id))
-  const getEdge: ComputedGetters['getEdge'] = computed(() => (id: string) => state.edges.find((edge) => edge.id === id))
+  const nodeIds = computed(() => state.nodes.map((n) => n.id))
+  const edgeIds = computed(() => state.edges.map((e) => e.id))
+  const getNode: ComputedGetters['getNode'] = computed(() => (id: string) => {
+    if (state.nodes && !nodeIds.value.length) return state.nodes.find((node) => node.id === id)
+    return state.nodes[nodeIds.value.indexOf(id)]
+  })
+  const getEdge: ComputedGetters['getEdge'] = computed(() => (id: string) => {
+    if (state.edges && !edgeIds.value.length) return state.edges.find((edge) => edge.id === id)
+    return state.edges[edgeIds.value.indexOf(id)]
+  })
 
   const getEdgeTypes = computed(() => {
     const edgeTypes: Record<string, any> = {
diff --git a/packages/vue-flow/src/utils/changes.ts b/packages/vue-flow/src/utils/changes.ts
index c8c6ddca..e1356614 100644
--- a/packages/vue-flow/src/utils/changes.ts
+++ b/packages/vue-flow/src/utils/changes.ts
@@ -103,7 +103,7 @@ export const applyChanges = <
           }
 
           if (el.expandParent && el.parentNode) {
-            const parent = elements.find((parent) => parent.id === el.parentNode)
+            const parent = elements[elementIds.indexOf(el.parentNode)]
 
             if (parent && isGraphNode(parent)) {
               handleParentExpand(el, parent)
@@ -115,7 +115,7 @@ export const applyChanges = <
         if (isGraphNode(el)) {
           if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
           if (el.expandParent && el.parentNode) {
-            const parent = elements.find((parent) => parent.id === el.parentNode)
+            const parent = elements[elementIds.indexOf(el.parentNode)]
 
             if (parent && isGraphNode(parent)) {
               handleParentExpand(el, parent)