refactor(core,nodes,edges): deep reactive nodes and edges

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

packages/core/src/store/actions.ts

@@ -307,13 +307,11 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
 
       const storedEdge = getters.getEdge.value(edge.id)
 
-      res.push(
+      res.push({
-        shallowReactive({
+        ...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)),
-          ...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)),
+        sourceNode,
-          sourceNode,
+        targetNode,
-          targetNode,
+      })
-        }),
-      )
 
       return res
     }, [])
@@ -358,13 +356,11 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
         if (missingTarget || missingSource) return acc
 
         acc.push(
-          createAdditionChange<GraphEdge>(
+          createAdditionChange<GraphEdge>({
-            shallowReactive({
+            ...edge,
-              ...edge,
+            sourceNode,
-              sourceNode,
+            targetNode,
-              targetNode,
+          }),
-            }),
-          ),
         )
       }
 

packages/core/src/utils/graph.ts

@@ -78,10 +78,10 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
         width: 0,
         height: 0,
       }),
-      handleBounds: reactive({
+      handleBounds: {
         source: [],
         target: [],
-      }),
+      },
       computedPosition: markRaw({
         z: 0,
         ...node.position,
@@ -90,8 +90,8 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
       selectable: undefined,
       connectable: undefined,
       ...defaults,
-      data: reactive(node.data || {}),
+      data: isDef(node.data) ? node.data : {},
-      events: shallowReactive(node.events || {}),
+      events: markRaw(isDef(node.events) ? node.events : {}),
     }
   }
 
@@ -103,6 +103,9 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
 }
 
 export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge => {
+  const events = isDef(edge.events) ? edge.events : defaults?.events && isDef(defaults?.events) ? defaults?.events : {}
+  const data = isDef(edge.data) ? edge.data : defaults?.data && isDef(defaults?.data) ? defaults?.data : {}
+
   defaults = !isGraphEdge(edge)
     ? ({
         ...defaults,
@@ -118,8 +121,8 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
         targetY: 0 || defaults?.targetY,
         updatable: edge.updatable ?? defaults?.updatable,
         selectable: edge.selectable ?? defaults?.selectable,
-        data: reactive(edge.data || defaults?.data || {}),
+        data,
-        events: shallowReactive(edge.events || defaults?.events || {}),
+        events: markRaw(events),
         label: (edge.label && !isString(edge.label) ? markRaw(edge.label) : edge.label) || defaults?.label,
         interactionWidth: edge.interactionWidth || defaults?.interactionWidth,
       } as GraphEdge)

packages/core/src/utils/store.ts

@@ -58,12 +58,10 @@ export const createGraphNodes = (
   const parentNodes: Record<string, true> = {}
 
   const graphNodes = nodes.map((node) => {
-    const parsed = shallowReactive(
+    const parsed = parseNode(node, extent, {
-      parseNode(node, extent, {
+      ...getNode(node.id),
-        ...getNode(node.id),
+      parentNode: node.parentNode,
-        parentNode: node.parentNode,
+    })
-      }),
-    )
 
     if (node.parentNode) {
       parentNodes[node.parentNode] = true