diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 665c4070..4be0ca8f 100644 --- a/packages/core/src/store/actions.ts +++ b/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( - shallowReactive({ - ...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)), - sourceNode, - targetNode, - }), - ) + res.push({ + ...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)), + sourceNode, + targetNode, + }) return res }, []) @@ -358,13 +356,11 @@ export function useActions(state: State, getters: ComputedGetters): Actions { if (missingTarget || missingSource) return acc acc.push( - createAdditionChange( - shallowReactive({ - ...edge, - sourceNode, - targetNode, - }), - ), + createAdditionChange({ + ...edge, + sourceNode, + targetNode, + }), ) } diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 9c1f7153..c85cd24f 100644 --- a/packages/core/src/utils/graph.ts +++ b/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 || {}), - events: shallowReactive(node.events || {}), + data: isDef(node.data) ? node.data : {}, + 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 => { + 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 targetY: 0 || defaults?.targetY, updatable: edge.updatable ?? defaults?.updatable, selectable: edge.selectable ?? defaults?.selectable, - data: reactive(edge.data || defaults?.data || {}), - events: shallowReactive(edge.events || defaults?.events || {}), + data, + events: markRaw(events), label: (edge.label && !isString(edge.label) ? markRaw(edge.label) : edge.label) || defaults?.label, interactionWidth: edge.interactionWidth || defaults?.interactionWidth, } as GraphEdge) diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index 7dac7d0b..0864261e 100644 --- a/packages/core/src/utils/store.ts +++ b/packages/core/src/utils/store.ts @@ -58,12 +58,10 @@ export const createGraphNodes = ( const parentNodes: Record = {} const graphNodes = nodes.map((node) => { - const parsed = shallowReactive( - parseNode(node, extent, { - ...getNode(node.id), - parentNode: node.parentNode, - }), - ) + const parsed = parseNode(node, extent, { + ...getNode(node.id), + parentNode: node.parentNode, + }) if (node.parentNode) { parentNodes[node.parentNode] = true