Skip to content

Commit 983971f

Browse files
bcakmakoglubcakmakoglu
committed
fix(core): use existing node/edge obj for assignment
1 parent cc20329 commit 983971f

File tree

3 files changed

+74
-79
lines changed

3 files changed

+74
-79
lines changed

‎packages/core/src/store/actions.ts

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -408,10 +408,10 @@ export function useActions(
408408
return res
409409
}
410410

411-
const storedEdge = findEdge(edge.id)
411+
const existingEdge = findEdge(edge.id)
412412

413413
res.push({
414-
...parseEdge(edge, Object.assign({}, storedEdge, state.defaultEdgeOptions)),
414+
...parseEdge(edge, existingEdge, state.defaultEdgeOptions),
415415
sourceNode,
416416
targetNode,
417417
})
@@ -459,15 +459,8 @@ export function useActions(
459459
)
460460
: nextEdges
461461

462-
const changes = validEdges.reduce((edgeChanges, param) => {
463-
const edge = addEdgeToStore(
464-
{
465-
...param,
466-
...state.defaultEdgeOptions,
467-
},
468-
state.edges,
469-
state.hooks.error.trigger,
470-
)
462+
const changes = validEdges.reduce((edgeChanges, connection) => {
463+
const edge = addEdgeToStore(connection, state.edges, state.hooks.error.trigger, state.defaultEdgeOptions)
471464

472465
if (edge) {
473466
const sourceNode = findNode(edge.source)!

‎packages/core/src/utils/graph.ts

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -97,64 +97,61 @@ export function isRect(obj: any): obj is Rect {
9797
return isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y)
9898
}
9999

100-
export function parseNode(node: Node, defaults: Partial<GraphNode> = {}): GraphNode {
101-
let initialState = defaults
102-
103-
if (!isGraphNode(node)) {
104-
initialState = {
105-
type: node.type ?? defaults.type ?? 'default',
106-
dimensions: markRaw({
107-
width: 0,
108-
height: 0,
109-
}),
110-
handleBounds: {
111-
source: [],
112-
target: [],
113-
},
114-
computedPosition: markRaw({
115-
z: 0,
116-
...node.position,
117-
}),
118-
draggable: undefined,
119-
selectable: undefined,
120-
connectable: undefined,
121-
focusable: undefined,
122-
selected: false,
123-
dragging: false,
124-
resizing: false,
125-
initialized: false,
126-
...defaults,
127-
data: isDef(node.data) ? node.data : {},
128-
events: markRaw(isDef(node.events) ? node.events : {}),
129-
}
130-
}
131-
132-
return Object.assign({}, initialState, node, { id: node.id.toString() }) as GraphNode
133-
}
134-
135-
export function parseEdge(edge: Edge, defaults: Partial<GraphEdge> = {}): GraphEdge {
136-
const events = isDef(edge.events) ? edge.events : defaults.events && isDef(defaults.events) ? defaults.events : {}
137-
const data = isDef(edge.data) ? edge.data : defaults.data && isDef(defaults.data) ? defaults.data : {}
138-
139-
defaults = !isGraphEdge(edge)
140-
? ({
141-
...defaults,
142-
sourceHandle: (edge.sourceHandle ? edge.sourceHandle.toString() : undefined) || defaults.sourceHandle,
143-
targetHandle: (edge.targetHandle ? edge.targetHandle.toString() : undefined) || defaults.targetHandle,
144-
type: edge.type ?? defaults.type ?? 'default',
145-
source: edge.source.toString() || defaults.source,
146-
target: edge.target.toString() || defaults.target,
147-
updatable: edge.updatable ?? defaults.updatable,
148-
selectable: edge.selectable ?? defaults.selectable,
149-
focusable: edge.focusable ?? defaults.focusable,
150-
data,
151-
events: markRaw(events),
152-
label: (edge.label && typeof edge.label !== 'string' ? markRaw(edge.label) : edge.label) || defaults.label,
153-
interactionWidth: edge.interactionWidth || defaults.interactionWidth,
154-
} as GraphEdge)
155-
: defaults
156-
157-
return Object.assign({}, defaults, edge, { id: edge.id.toString() }) as GraphEdge
100+
export function parseNode(node: Node, existingNode?: GraphNode, parentNode?: string): GraphNode {
101+
const initialState = {
102+
id: node.id.toString(),
103+
type: node.type ?? 'default',
104+
dimensions: markRaw({
105+
width: 0,
106+
height: 0,
107+
}),
108+
handleBounds: {
109+
source: [],
110+
target: [],
111+
},
112+
computedPosition: markRaw({
113+
z: 0,
114+
...node.position,
115+
}),
116+
draggable: undefined,
117+
selectable: undefined,
118+
connectable: undefined,
119+
focusable: undefined,
120+
selected: false,
121+
dragging: false,
122+
resizing: false,
123+
initialized: false,
124+
isParent: false,
125+
position: {
126+
x: 0,
127+
y: 0,
128+
},
129+
data: isDef(node.data) ? node.data : {},
130+
events: markRaw(isDef(node.events) ? node.events : {}),
131+
} as GraphNode
132+
133+
return Object.assign(existingNode ?? initialState, node, { id: node.id.toString(), parentNode }) as GraphNode
134+
}
135+
136+
export function parseEdge(edge: Edge, existingEdge?: GraphEdge, defaultEdgeOptions?: DefaultEdgeOptions): GraphEdge {
137+
const initialState = {
138+
id: edge.id.toString(),
139+
type: edge.type ?? existingEdge?.type ?? 'default',
140+
source: edge.source.toString(),
141+
target: edge.target.toString(),
142+
sourceHandle: edge.sourceHandle?.toString(),
143+
targetHandle: edge.targetHandle?.toString(),
144+
updatable: edge.updatable ?? defaultEdgeOptions?.updatable,
145+
selectable: edge.selectable ?? defaultEdgeOptions?.selectable,
146+
focusable: edge.focusable ?? defaultEdgeOptions?.focusable,
147+
data: isDef(edge.data) ? edge.data : {},
148+
events: markRaw(isDef(edge.events) ? edge.events : {}),
149+
label: edge.label ?? '',
150+
interactionWidth: edge.interactionWidth ?? defaultEdgeOptions?.interactionWidth,
151+
...(defaultEdgeOptions ?? {}),
152+
} as GraphEdge
153+
154+
return Object.assign(existingEdge ?? initialState, edge, { id: edge.id.toString() }) as GraphEdge
158155
}
159156

160157
function getConnectedElements<T extends Node = Node>(
@@ -254,7 +251,7 @@ export function addEdge(edgeParams: Edge | Connection, elements: Elements, defau
254251
} as Edge
255252
}
256253

257-
edge = parseEdge(edge, defaults)
254+
edge = parseEdge(edge, undefined, defaults)
258255

259256
if (connectionExists(edge, elements)) {
260257
return elements

‎packages/core/src/utils/store.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { markRaw, unref } from 'vue'
2-
import type { Actions, Connection, ConnectionLookup, Edge, GraphEdge, GraphNode, Node, State } from '../types'
2+
import type { Actions, Connection, ConnectionLookup, DefaultEdgeOptions, Edge, GraphEdge, GraphNode, Node, State } from '../types'
33
import { ErrorCode, VueFlowError, connectionExists, getEdgeId, isEdge, isNode, parseEdge, parseNode } from '.'
44

55
type NonUndefined<T> = T extends undefined ? never : T
@@ -10,7 +10,12 @@ export function isDef<T>(val: T): val is NonUndefined<T> {
1010
return typeof unrefVal !== 'undefined'
1111
}
1212

13-
export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[], triggerError: State['hooks']['error']['trigger']) {
13+
export function addEdgeToStore(
14+
edgeParams: Edge | Connection,
15+
edges: Edge[],
16+
triggerError: State['hooks']['error']['trigger'],
17+
defaultEdgeOptions?: DefaultEdgeOptions,
18+
): GraphEdge | false {
1419
if (!edgeParams.source || !edgeParams.target) {
1520
triggerError(new VueFlowError(ErrorCode.EDGE_INVALID, (edgeParams as Edge).id))
1621
return false
@@ -26,7 +31,7 @@ export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[], tri
2631
} as Edge
2732
}
2833

29-
edge = parseEdge(edge)
34+
edge = parseEdge(edge, undefined, defaultEdgeOptions)
3035

3136
if (connectionExists(edge, edges)) {
3237
return false
@@ -79,17 +84,17 @@ export function createGraphNodes(
7984
) {
8085
const parentNodes: Record<string, true> = {}
8186

82-
const graphNodes = nodes.reduce((nextNodes, node) => {
87+
const graphNodes = nodes.reduce((nextNodes, node, currentIndex) => {
8388
// make sure we don't try to add invalid nodes
8489
if (!isNode(node)) {
85-
triggerError(new VueFlowError(ErrorCode.NODE_INVALID))
90+
triggerError(
91+
new VueFlowError(ErrorCode.NODE_INVALID, (node as undefined | Record<any, any>)?.id) ||
92+
`[ID UNKNOWN|INDEX ${currentIndex}]`,
93+
)
8694
return nextNodes
8795
}
8896

89-
const parsed = parseNode(node, {
90-
...findNode(node.id),
91-
parentNode: node.parentNode,
92-
})
97+
const parsed = parseNode(node, findNode(node.id), node.parentNode)
9398

9499
if (node.parentNode) {
95100
parentNodes[node.parentNode] = true

0 commit comments

Comments
 (0)