refactor(core): apply multiple changes at once to element

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

packages/core/src/types/changes.ts

@@ -19,6 +19,8 @@ export interface NodeDimensionChange {
   type: 'dimensions'
   dimensions: Dimensions
   handleBounds?: NodeHandleBounds
+  updateStyle?: boolean
+  resizing?: boolean
 }
 
 export interface NodePositionChange {

packages/core/src/utils/changes.ts

@@ -80,50 +80,61 @@ export const applyChanges = <
   elements: T[],
 ): T[] => {
   let elementIds = elements.map((el) => el.id)
-  changes.forEach((change) => {
-    if (change.type === 'add') {
-      const item = <T>change.item
-      return elements.push(item)
-    }
 
-    const i = elementIds.indexOf((<any>change).id)
+  elements.forEach((element) => {
-    const el = elements[i]
+    const currentChanges = changes.filter((c) => (<any>c).id === element.id)
 
-    switch (change.type) {
+    for (const currentChange of currentChanges) {
-      case 'select':
+      if (currentChange.type === 'add') {
-        ;(el as FlowElement).selected = change.selected
+        const item = <T>currentChange.item
-        break
+        return elements.push(item)
-      case 'position':
+      } else {
-        if (isGraphNode(el)) {
+        switch (currentChange.type) {
-          if (typeof change.position !== 'undefined') el.position = change.position
+          case 'select':
+            ;(element as FlowElement).selected = currentChange.selected
+            break
+          case 'position':
+            if (isGraphNode(element)) {
+              if (typeof currentChange.position !== 'undefined') element.position = currentChange.position
 
-          if (el.expandParent && el.parentNode) {
+              if (typeof currentChange.dragging !== 'undefined') element.dragging = currentChange.dragging
-            const parent = elements[elementIds.indexOf(el.parentNode)]
 
-            if (parent && isGraphNode(parent)) {
+              if (element.expandParent && element.parentNode) {
-              handleParentExpand(el, parent)
+                const parent = elements[elementIds.indexOf(element.parentNode)]
+
+                if (parent && isGraphNode(parent)) {
+                  handleParentExpand(element, parent)
+                }
+              }
             }
-          }
+            break
-        }
+          case 'dimensions':
-        break
+            if (isGraphNode(element)) {
-      case 'dimensions':
+              if (typeof currentChange.dimensions !== 'undefined') element.dimensions = currentChange.dimensions
-        if (isGraphNode(el)) {
-          if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
-          if (el.expandParent && el.parentNode) {
-            const parent = elements[elementIds.indexOf(el.parentNode)]
 
-            if (parent && isGraphNode(parent)) {
+              if (typeof currentChange.updateStyle !== 'undefined') {
-              handleParentExpand(el, parent)
+                element.style = { ...(element.style || {}), ...currentChange.dimensions }
+              }
+
+              if (typeof currentChange.resizing === 'boolean') element.resizing = currentChange.resizing
+
+              if (element.expandParent && element.parentNode) {
+                const parent = elements[elementIds.indexOf(element.parentNode)]
+
+                if (parent && isGraphNode(parent)) {
+                  handleParentExpand(element, parent)
+                }
+              }
             }
-          }
+            break
+          case 'remove':
+            if (elementIds.includes(currentChange.id)) {
+              elements.splice(elements.indexOf(element), 1)
+              elementIds = elements.map((el) => el.id)
+            }
+            break
         }
-        break
+      }
-      case 'remove':
-        if (elementIds.includes(change.id)) {
-          elements.splice(i, 1)
-          elementIds = elements.map((el) => el.id)
-        }
-        break
     }
   })