chore(core): filter addition and removal changes
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { Node } from '@vue-flow/core'
|
import type { Node } from '@vue-flow/core'
|
||||||
import { VueFlow, useVueFlow } from '@vue-flow/core/src/index'
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
||||||
|
|
||||||
import { Background, BackgroundVariant } from '@vue-flow/background'
|
import { Background, BackgroundVariant } from '@vue-flow/background'
|
||||||
import { Controls } from '@vue-flow/controls'
|
import { Controls } from '@vue-flow/controls'
|
||||||
|
|||||||
@@ -79,65 +79,74 @@ export const applyChanges = <
|
|||||||
changes: C[],
|
changes: C[],
|
||||||
elements: T[],
|
elements: T[],
|
||||||
): T[] => {
|
): T[] => {
|
||||||
let elementIds = elements.map((el) => el.id)
|
const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
|
||||||
|
| NodeAddChange
|
||||||
|
| EdgeAddChange
|
||||||
|
| NodeRemoveChange
|
||||||
|
| EdgeRemoveChange
|
||||||
|
)[]
|
||||||
|
addRemoveChanges.forEach((change) => {
|
||||||
|
switch (change.type) {
|
||||||
|
case 'add':
|
||||||
|
elements.push(<T>change.item)
|
||||||
|
break
|
||||||
|
case 'remove':
|
||||||
|
elements.splice(
|
||||||
|
elements.findIndex((el) => el.id === change.id),
|
||||||
|
1,
|
||||||
|
)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const elementIds = elements.map((el) => el.id)
|
||||||
|
|
||||||
elements.forEach((element) => {
|
elements.forEach((element) => {
|
||||||
const currentChanges = changes.filter((c) => (<any>c).id === element.id)
|
const currentChanges = changes.filter((c) => (<any>c).id === element.id)
|
||||||
|
|
||||||
for (const currentChange of currentChanges) {
|
for (const currentChange of currentChanges) {
|
||||||
if (currentChange.type === 'add') {
|
switch (currentChange.type) {
|
||||||
const item = <T>currentChange.item
|
case 'select':
|
||||||
return elements.push(item)
|
;(element as FlowElement).selected = currentChange.selected
|
||||||
} else {
|
break
|
||||||
switch (currentChange.type) {
|
case 'position':
|
||||||
case 'select':
|
if (isGraphNode(element)) {
|
||||||
;(element as FlowElement).selected = currentChange.selected
|
if (typeof currentChange.position !== 'undefined') element.position = currentChange.position
|
||||||
break
|
|
||||||
case 'position':
|
|
||||||
if (isGraphNode(element)) {
|
|
||||||
if (typeof currentChange.position !== 'undefined') element.position = currentChange.position
|
|
||||||
|
|
||||||
if (typeof currentChange.dragging !== 'undefined') element.dragging = currentChange.dragging
|
if (typeof currentChange.dragging !== 'undefined') element.dragging = currentChange.dragging
|
||||||
|
|
||||||
if (element.expandParent && element.parentNode) {
|
if (element.expandParent && element.parentNode) {
|
||||||
const parent = elements[elementIds.indexOf(element.parentNode)]
|
const parent = elements[elementIds.indexOf(element.parentNode)]
|
||||||
|
|
||||||
if (parent && isGraphNode(parent)) {
|
if (parent && isGraphNode(parent)) {
|
||||||
handleParentExpand(element, parent)
|
handleParentExpand(element, parent)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
break
|
}
|
||||||
case 'dimensions':
|
break
|
||||||
if (isGraphNode(element)) {
|
case 'dimensions':
|
||||||
if (typeof currentChange.dimensions !== 'undefined') element.dimensions = currentChange.dimensions
|
if (isGraphNode(element)) {
|
||||||
|
if (typeof currentChange.dimensions !== 'undefined') element.dimensions = currentChange.dimensions
|
||||||
|
|
||||||
if (typeof currentChange.updateStyle !== 'undefined') {
|
if (typeof currentChange.updateStyle !== 'undefined') {
|
||||||
element.style = {
|
element.style = {
|
||||||
...(element.style || {}),
|
...(element.style || {}),
|
||||||
width: `${currentChange.dimensions?.width}px`,
|
width: `${currentChange.dimensions?.width}px`,
|
||||||
height: `${currentChange.dimensions?.height}px`,
|
height: `${currentChange.dimensions?.height}px`,
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof currentChange.resizing === 'boolean') element.resizing = currentChange.resizing
|
|
||||||
|
|
||||||
if (element.expandParent && element.parentNode) {
|
|
||||||
const parent = elements[elementIds.indexOf(element.parentNode)]
|
|
||||||
|
|
||||||
if (parent && isGraphNode(parent)) {
|
|
||||||
handleParentExpand(element, parent)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
break
|
|
||||||
case 'remove':
|
if (typeof currentChange.resizing === 'boolean') element.resizing = currentChange.resizing
|
||||||
if (elementIds.includes(currentChange.id)) {
|
|
||||||
elements.splice(elements.indexOf(element), 1)
|
if (element.expandParent && element.parentNode) {
|
||||||
elementIds = elements.map((el) => el.id)
|
const parent = elements[elementIds.indexOf(element.parentNode)]
|
||||||
|
|
||||||
|
if (parent && isGraphNode(parent)) {
|
||||||
|
handleParentExpand(element, parent)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
break
|
}
|
||||||
}
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user