Skip to content

Commit 9aa2509

Browse files
bcakmakoglubcakmakoglu
committed
refactor(core)!: remove applyChanges util
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
1 parent 1b459c1 commit 9aa2509

File tree

1 file changed

+66
-122
lines changed

1 file changed

+66
-122
lines changed

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

Lines changed: 66 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
import { nextTick } from 'vue'
21
import type {
32
EdgeAddChange,
43
EdgeChange,
4+
EdgeLookup,
55
EdgeRemoveChange,
66
EdgeSelectionChange,
7-
ElementChange,
8-
FlowElement,
97
GraphEdge,
108
GraphNode,
119
NodeAddChange,
1210
NodeChange,
11+
NodeLookup,
1312
NodeRemoveChange,
1413
NodeSelectionChange,
15-
StyleFunc,
1614
Styles,
1715
} from '../types'
18-
import { isGraphNode } from '.'
1916

2017
function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
2118
if (parent) {
22-
const extendWidth = updateItem.position.x + updateItem.dimensions.width - parent.dimensions.width
23-
const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
19+
const itemWidth = updateItem.measured.width || 0
20+
const itemHeight = updateItem.measured.height || 0
21+
const parentWidth = updateItem.measured.width || 0
22+
const parentHeight = updateItem.measured.height || 0
23+
24+
const extendWidth = updateItem.position.x + itemWidth - parentWidth
25+
const extendHeight = updateItem.position.y + itemHeight - parentHeight
2426

2527
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
2628
let parentStyles: Styles = {}
2729

28-
if (typeof parent.style === 'function') {
29-
parentStyles = { ...parent.style(parent) }
30-
} else if (parent.style) {
30+
if (parent.style) {
3131
parentStyles = { ...parent.style }
3232
}
3333

34-
parentStyles.width = parentStyles.width ?? `${parent.dimensions.width}px`
35-
parentStyles.height = parentStyles.height ?? `${parent.dimensions.height}px`
34+
parentStyles.width = parentStyles.width ?? `${parent.measured.width}px`
35+
parentStyles.height = parentStyles.height ?? `${parent.measured.height}px`
3636

3737
if (extendWidth > 0) {
3838
if (typeof parentStyles.width === 'string') {
@@ -80,136 +80,80 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
8080
updateItem.position.y = 0
8181
}
8282

83-
parent.dimensions.width = Number(parentStyles.width.toString().replace('px', ''))
84-
parent.dimensions.height = Number(parentStyles.height.toString().replace('px', ''))
85-
86-
if (typeof parent.style === 'function') {
87-
parent.style = (p) => {
88-
const styleFunc = parent.style as StyleFunc
89-
90-
return {
91-
...styleFunc(p),
92-
...parentStyles,
93-
}
94-
}
95-
} else {
96-
parent.style = {
97-
...parent.style,
98-
...parentStyles,
99-
}
83+
parent.width = Number(parentStyles.width.toString().replace('px', ''))
84+
parent.height = Number(parentStyles.height.toString().replace('px', ''))
85+
parent.style = {
86+
...parent.style,
87+
...parentStyles,
10088
}
10189
}
10290
}
10391
}
10492

105-
export function applyChanges<
106-
T extends FlowElement = FlowElement,
107-
C extends ElementChange = T extends GraphNode ? NodeChange : EdgeChange,
108-
>(changes: C[], elements: T[]): T[] {
109-
const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
110-
| NodeAddChange
111-
| EdgeAddChange
112-
| NodeRemoveChange
113-
| EdgeRemoveChange
114-
)[]
115-
116-
for (const change of addRemoveChanges) {
93+
export function applyEdgeChanges(changes: EdgeChange[], edgeLookup: EdgeLookup) {
94+
for (const change of changes) {
11795
if (change.type === 'add') {
118-
const index = elements.findIndex((el) => el.id === change.item.id)
96+
edgeLookup.set(change.item.id, change.item)
97+
}
11998

120-
if (index === -1) {
121-
elements.push(<T>change.item)
122-
}
123-
} else if (change.type === 'remove') {
124-
const index = elements.findIndex((el) => el.id === change.id)
99+
if (change.type === 'remove') {
100+
edgeLookup.delete(change.id)
101+
}
102+
103+
if (change.type === 'select') {
104+
const edge = edgeLookup.get(change.id)
125105

126-
if (index !== -1) {
127-
elements.splice(index, 1)
106+
if (edge) {
107+
edge.selected = change.selected
128108
}
129109
}
130110
}
131111

132-
const elementIds = elements.map((el) => el.id)
112+
return Array.from(edgeLookup.values())
113+
}
114+
115+
export function applyNodeChanges(changes: NodeChange[], nodeLookup: NodeLookup) {
116+
for (const change of changes) {
117+
if (change.type === 'add') {
118+
nodeLookup.set(change.item.id, change.item)
119+
}
120+
121+
if (change.type === 'remove') {
122+
nodeLookup.delete(change.id)
123+
}
124+
125+
if (change.type === 'select') {
126+
const node = nodeLookup.get(change.id)
133127

134-
for (const element of elements) {
135-
for (const currentChange of changes) {
136-
if ((<any>currentChange).id !== element.id) {
137-
continue
128+
if (node) {
129+
node.selected = change.selected
138130
}
131+
}
139132

140-
switch (currentChange.type) {
141-
case 'select':
142-
element.selected = currentChange.selected
143-
break
144-
case 'position':
145-
if (isGraphNode(element)) {
146-
if (typeof currentChange.position !== 'undefined') {
147-
element.position = currentChange.position
148-
}
149-
150-
if (typeof currentChange.dragging !== 'undefined') {
151-
element.dragging = currentChange.dragging
152-
}
153-
154-
if (element.expandParent && element.parentNode) {
155-
const parent = elements[elementIds.indexOf(element.parentNode)]
156-
157-
if (parent && isGraphNode(parent)) {
158-
handleParentExpand(element, parent)
159-
}
160-
}
161-
}
162-
break
163-
case 'dimensions':
164-
if (isGraphNode(element)) {
165-
if (typeof currentChange.dimensions !== 'undefined') {
166-
element.dimensions = currentChange.dimensions
167-
}
168-
169-
if (typeof currentChange.updateStyle !== 'undefined') {
170-
element.style = {
171-
...(element.style || {}),
172-
width: `${currentChange.dimensions?.width}px`,
173-
height: `${currentChange.dimensions?.height}px`,
174-
}
175-
}
176-
177-
if (typeof currentChange.resizing !== 'undefined') {
178-
element.resizing = currentChange.resizing
179-
}
180-
181-
if (element.expandParent && element.parentNode) {
182-
const parent = elements[elementIds.indexOf(element.parentNode)]
183-
184-
if (parent && isGraphNode(parent)) {
185-
const parentInit = !!parent.dimensions.width && !!parent.dimensions.height
186-
187-
if (!parentInit) {
188-
nextTick(() => {
189-
handleParentExpand(element, parent)
190-
})
191-
} else {
192-
handleParentExpand(element, parent)
193-
}
194-
}
195-
}
133+
if (change.type === 'position') {
134+
const node = nodeLookup.get(change.id)
135+
136+
if (node) {
137+
if (typeof change.position !== 'undefined') {
138+
node.position = change.position
139+
}
140+
141+
if (typeof change.dragging !== 'undefined') {
142+
node.dragging = change.dragging
143+
}
144+
145+
if (node.expandParent && node.parentId) {
146+
const parent = nodeLookup.get(node.parentId)
147+
148+
if (parent) {
149+
handleParentExpand(node, parent)
196150
}
197-
break
151+
}
198152
}
199153
}
200154
}
201155

202-
return elements
203-
}
204-
205-
/** @deprecated Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead */
206-
export function applyEdgeChanges(changes: EdgeChange[], edges: GraphEdge[]) {
207-
return applyChanges(changes, edges)
208-
}
209-
210-
/** @deprecated Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead */
211-
export function applyNodeChanges(changes: NodeChange[], nodes: GraphNode[]) {
212-
return applyChanges(changes, nodes)
156+
return Array.from(nodeLookup.values())
213157
}
214158

215159
export function createSelectionChange(id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange {

0 commit comments

Comments
 (0)