chore(core): filter addition and removal changes

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

examples/vite/src/Empty/EmptyExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Node } from '@vue-flow/core'
-import { VueFlow, useVueFlow } from '@vue-flow/core/src/index'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 import { Background, BackgroundVariant } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'

packages/core/src/utils/changes.ts

@@ -79,16 +79,32 @@ export const applyChanges = <
   changes: C[],
   elements: T[],
 ): T[] => {
-  let elementIds = elements.map((el) => el.id)
+  const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
+    | NodeAddChange
+    | EdgeAddChange
+    | NodeRemoveChange
+    | EdgeRemoveChange
+  )[]
+  addRemoveChanges.forEach((change) => {
+    switch (change.type) {
+      case 'add':
+        elements.push(<T>change.item)
+        break
+      case 'remove':
+        elements.splice(
+          elements.findIndex((el) => el.id === change.id),
+          1,
+        )
+        break
+    }
+  })
+
+  const elementIds = elements.map((el) => el.id)
 
   elements.forEach((element) => {
     const currentChanges = changes.filter((c) => (<any>c).id === element.id)
 
     for (const currentChange of currentChanges) {
-      if (currentChange.type === 'add') {
-        const item = <T>currentChange.item
-        return elements.push(item)
-      } else {
       switch (currentChange.type) {
         case 'select':
           ;(element as FlowElement).selected = currentChange.selected
@@ -131,13 +147,6 @@ export const applyChanges = <
             }
           }
           break
-          case 'remove':
-            if (elementIds.includes(currentChange.id)) {
-              elements.splice(elements.indexOf(element), 1)
-              elementIds = elements.map((el) => el.id)
-            }
-            break
-        }
       }
     }
   })