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,51 +80,62 @@ export const applyChanges = <
   elements: T[],
 ): T[] => {
   let elementIds = elements.map((el) => el.id)
-  changes.forEach((change) => {
+
-    if (change.type === 'add') {
+  elements.forEach((element) => {
-      const item = <T>change.item
+    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) {
-    const i = elementIds.indexOf((<any>change).id)
-    const el = elements[i]
-
-    switch (change.type) {
           case 'select':
-        ;(el as FlowElement).selected = change.selected
+            ;(element as FlowElement).selected = currentChange.selected
             break
           case 'position':
-        if (isGraphNode(el)) {
+            if (isGraphNode(element)) {
-          if (typeof change.position !== 'undefined') el.position = change.position
+              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 (element.expandParent && element.parentNode) {
+                const parent = elements[elementIds.indexOf(element.parentNode)]
 
                 if (parent && isGraphNode(parent)) {
-              handleParentExpand(el, parent)
+                  handleParentExpand(element, parent)
                 }
               }
             }
             break
           case 'dimensions':
-        if (isGraphNode(el)) {
+            if (isGraphNode(element)) {
-          if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
+              if (typeof currentChange.dimensions !== 'undefined') element.dimensions = currentChange.dimensions
-          if (el.expandParent && el.parentNode) {
+
-            const parent = elements[elementIds.indexOf(el.parentNode)]
+              if (typeof currentChange.updateStyle !== 'undefined') {
+                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(el, parent)
+                  handleParentExpand(element, parent)
                 }
               }
             }
             break
           case 'remove':
-        if (elementIds.includes(change.id)) {
+            if (elementIds.includes(currentChange.id)) {
-          elements.splice(i, 1)
+              elements.splice(elements.indexOf(element), 1)
               elementIds = elements.map((el) => el.id)
             }
             break
         }
+      }
+    }
   })
 
   return elements