refactor(core)!: remove applyChanges util

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

packages/core/src/utils/changes.ts

@@ -1,38 +1,38 @@
-import { nextTick } from 'vue'
 import type {
   EdgeAddChange,
   EdgeChange,
+  EdgeLookup,
   EdgeRemoveChange,
   EdgeSelectionChange,
-  ElementChange,
-  FlowElement,
   GraphEdge,
   GraphNode,
   NodeAddChange,
   NodeChange,
+  NodeLookup,
   NodeRemoveChange,
   NodeSelectionChange,
-  StyleFunc,
   Styles,
 } from '../types'
-import { isGraphNode } from '.'
 
 function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
   if (parent) {
-    const extendWidth = updateItem.position.x + updateItem.dimensions.width - parent.dimensions.width
-    const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
+    const itemWidth = updateItem.measured.width || 0
+    const itemHeight = updateItem.measured.height || 0
+    const parentWidth = updateItem.measured.width || 0
+    const parentHeight = updateItem.measured.height || 0
+
+    const extendWidth = updateItem.position.x + itemWidth - parentWidth
+    const extendHeight = updateItem.position.y + itemHeight - parentHeight
 
     if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
       let parentStyles: Styles = {}
 
-      if (typeof parent.style === 'function') {
-        parentStyles = { ...parent.style(parent) }
-      } else if (parent.style) {
+      if (parent.style) {
         parentStyles = { ...parent.style }
       }
 
-      parentStyles.width = parentStyles.width ?? `${parent.dimensions.width}px`
-      parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
+      parentStyles.width = parentStyles.width ?? `${parent.measured.width}px`
+      parentStyles.height = parentStyles.height ?? `${parent.measured.height}px`
 
       if (extendWidth > 0) {
         if (typeof parentStyles.width === 'string') {
@@ -80,136 +80,80 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
         updateItem.position.y = 0
       }
 
-      parent.dimensions.width = Number(parentStyles.width.toString().replace('px', ''))
-      parent.dimensions.height = Number(parentStyles.height.toString().replace('px', ''))
-
-      if (typeof parent.style === 'function') {
-        parent.style = (p) => {
-          const styleFunc = parent.style as StyleFunc
-
-          return {
-            ...styleFunc(p),
-            ...parentStyles,
-          }
-        }
-      } else {
-        parent.style = {
-          ...parent.style,
-          ...parentStyles,
-        }
+      parent.width = Number(parentStyles.width.toString().replace('px', ''))
+      parent.height = Number(parentStyles.height.toString().replace('px', ''))
+      parent.style = {
+        ...parent.style,
+        ...parentStyles,
       }
     }
   }
 }
 
-export function applyChanges<
-  T extends FlowElement = FlowElement,
-  C extends ElementChange = T extends GraphNode ? NodeChange : EdgeChange,
->(changes: C[], elements: T[]): T[] {
-  const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
-    | NodeAddChange
-    | EdgeAddChange
-    | NodeRemoveChange
-    | EdgeRemoveChange
-  )[]
-
-  for (const change of addRemoveChanges) {
+export function applyEdgeChanges(changes: EdgeChange[], edgeLookup: EdgeLookup) {
+  for (const change of changes) {
     if (change.type === 'add') {
-      const index = elements.findIndex((el) => el.id === change.item.id)
+      edgeLookup.set(change.item.id, change.item)
+    }
 
-      if (index === -1) {
-        elements.push(<T>change.item)
-      }
-    } else if (change.type === 'remove') {
-      const index = elements.findIndex((el) => el.id === change.id)
+    if (change.type === 'remove') {
+      edgeLookup.delete(change.id)
+    }
+
+    if (change.type === 'select') {
+      const edge = edgeLookup.get(change.id)
 
-      if (index !== -1) {
-        elements.splice(index, 1)
+      if (edge) {
+        edge.selected = change.selected
       }
     }
   }
 
-  const elementIds = elements.map((el) => el.id)
+  return Array.from(edgeLookup.values())
+}
+
+export function applyNodeChanges(changes: NodeChange[], nodeLookup: NodeLookup) {
+  for (const change of changes) {
+    if (change.type === 'add') {
+      nodeLookup.set(change.item.id, change.item)
+    }
+
+    if (change.type === 'remove') {
+      nodeLookup.delete(change.id)
+    }
+
+    if (change.type === 'select') {
+      const node = nodeLookup.get(change.id)
 
-  for (const element of elements) {
-    for (const currentChange of changes) {
-      if ((<any>currentChange).id !== element.id) {
-        continue
+      if (node) {
+        node.selected = change.selected
       }
+    }
 
-      switch (currentChange.type) {
-        case 'select':
-          element.selected = currentChange.selected
-          break
-        case 'position':
-          if (isGraphNode(element)) {
-            if (typeof currentChange.position !== 'undefined') {
-              element.position = currentChange.position
-            }
-
-            if (typeof currentChange.dragging !== 'undefined') {
-              element.dragging = currentChange.dragging
-            }
-
-            if (element.expandParent && element.parentNode) {
-              const parent = elements[elementIds.indexOf(element.parentNode)]
-
-              if (parent && isGraphNode(parent)) {
-                handleParentExpand(element, parent)
-              }
-            }
-          }
-          break
-        case 'dimensions':
-          if (isGraphNode(element)) {
-            if (typeof currentChange.dimensions !== 'undefined') {
-              element.dimensions = currentChange.dimensions
-            }
-
-            if (typeof currentChange.updateStyle !== 'undefined') {
-              element.style = {
-                ...(element.style || {}),
-                width: `${currentChange.dimensions?.width}px`,
-                height: `${currentChange.dimensions?.height}px`,
-              }
-            }
-
-            if (typeof currentChange.resizing !== 'undefined') {
-              element.resizing = currentChange.resizing
-            }
-
-            if (element.expandParent && element.parentNode) {
-              const parent = elements[elementIds.indexOf(element.parentNode)]
-
-              if (parent && isGraphNode(parent)) {
-                const parentInit = !!parent.dimensions.width && !!parent.dimensions.height
-
-                if (!parentInit) {
-                  nextTick(() => {
-                    handleParentExpand(element, parent)
-                  })
-                } else {
-                  handleParentExpand(element, parent)
-                }
-              }
-            }
+    if (change.type === 'position') {
+      const node = nodeLookup.get(change.id)
+
+      if (node) {
+        if (typeof change.position !== 'undefined') {
+          node.position = change.position
+        }
+
+        if (typeof change.dragging !== 'undefined') {
+          node.dragging = change.dragging
+        }
+
+        if (node.expandParent && node.parentId) {
+          const parent = nodeLookup.get(node.parentId)
+
+          if (parent) {
+            handleParentExpand(node, parent)
           }
-          break
+        }
       }
     }
   }
 
-  return elements
-}
-
-/** @deprecated Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead */
-export function applyEdgeChanges(changes: EdgeChange[], edges: GraphEdge[]) {
-  return applyChanges(changes, edges)
-}
-
-/** @deprecated Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead */
-export function applyNodeChanges(changes: NodeChange[], nodes: GraphNode[]) {
-  return applyChanges(changes, nodes)
+  return Array.from(nodeLookup.values())
 }
 
 export function createSelectionChange(id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange {