refactor(nodes,edges): mark nodes edges as shallow reactive

# What's changed?

* Mark nodes & edges as shallow reactives
* defer changes to nextTick

packages/vue-flow/src/components/Nodes/NodeWrapper.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { useVueFlow, useDrag } from '../../composables'
-import { GraphNode, NodeComponent, SnapGrid } from '../../types'
+import { NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getConnectedEdges, getHandleBounds, getXYZPos } from '../../utils'
 
@@ -79,10 +79,6 @@ useDrag({
   },
 })
 
-onBeforeMount(() => {
-  updateNodePosition({ id, diff: { x: 0, y: 0 } })
-})
-
 onMounted(() => {
   const observer = useResizeObserver(nodeElement, () =>
     updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }]),
@@ -98,8 +94,6 @@ onMounted(() => {
 
   onBeforeUnmount(() => observer.stop())
 
-  updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
-
   watch(
     [() => node.position, () => parentNode?.computedPosition, () => node.selected, () => parentNode?.selected],
     ([pos, parent]) => {
@@ -107,15 +101,14 @@ onMounted(() => {
         ...pos,
         z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
       }
-      const graphNode = getNode(id)!
 
       if (parent) {
-        graphNode.computedPosition = getXYZPos(parent, xyzPos)
+        node.computedPosition = getXYZPos(parent, xyzPos)
       } else {
-        graphNode.computedPosition = xyzPos
+        node.computedPosition = xyzPos
       }
 
-      graphNode.handleBounds = getHandleBounds(nodeElement.value, viewport.zoom)
+      node.handleBounds = getHandleBounds(nodeElement.value, viewport.zoom)
     },
     { deep: true, flush: 'post' },
   )
@@ -210,7 +203,7 @@ export default {
     ref="nodeElement"
     :class="getClass"
     :style="getStyle"
-    :data-id="id"
+    :data-id="node.id"
     @mouseenter="onMouseEnter"
     @mousemove="onMouseMove"
     @mouseleave="onMouseLeave"

packages/vue-flow/src/store/actions.ts

@@ -87,10 +87,12 @@ const createGraphNodes = (nodes: Node[], getNode: Getters['getNode'], currGraphN
   const parentNodes: Record<string, true> = {}
 
   const graphNodes = nodes.map((node) => {
-    const parsed = parseNode(node, extent, {
+    const parsed = shallowReactive(
-      ...getNode(node.id),
+      parseNode(node, extent, {
-      parentNode: node.parentNode,
+        ...getNode(node.id),
-    })
+        parentNode: node.parentNode,
+      }),
+    )
     if (node.parentNode) {
       parentNodes[node.parentNode] = true
     }
@@ -245,11 +247,11 @@ export default (state: State, getters: ComputedGetters): Actions => {
 
       const storedEdge = getters.getEdge.value(edge.id)
 
-      res.push({
+      res.push(
-        ...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)),
+        shallowReactive({
-        sourceNode,
+          ...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)),
-        targetNode,
+        }),
-      })
+      )
 
       return res
     }, [])
@@ -288,12 +290,10 @@ export default (state: State, getters: ComputedGetters): Actions => {
         if (missingTarget || missingSource) return acc
 
         acc.push(
-          createAdditionChange<GraphEdge>({
+          createAdditionChange<GraphEdge>(shallowReactive({
             ...state.defaultEdgeOptions,
             ...edge,
-            sourceNode,
+          })),
-            targetNode,
-          }),
         )
       }
 

packages/vue-flow/src/utils/changes.ts

@@ -100,10 +100,11 @@ export const applyChanges = <
 ): T[] => {
   let elementIds = elements.map((el) => el.id)
   changes.forEach((change) => {
-    if (change.type === 'add') {
+    nextTick(() => {
-      const item = <T>change.item
+      if (change.type === 'add') {
-      return elements.push(item)
+        const item = <T>change.item
-    }
+        return elements.push(item)
+      }
 
     const i = elementIds.indexOf((<any>change).id)
     const el = elements[i]
@@ -142,6 +143,7 @@ export const applyChanges = <
         }
         break
     }
+    })
   })
 
   return elements

packages/vue-flow/src/utils/graph.ts

@@ -62,19 +62,18 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
   if (!isGraphNode(node)) {
     defaultValues = {
       type: node.type ?? 'default',
-      dimensions: {
+      dimensions: markRaw({
         width: 0,
         height: 0,
-      },
+      }),
       handleBounds: {
         source: [],
         target: [],
       },
-      computedPosition: {
+      computedPosition: markRaw({
         z: 0,
-        x: 0,
+        ...node.position,
-        y: 0,
+      }),
-      },
       draggable: undefined,
       selectable: undefined,
       connectable: undefined,