refactor(nodes): minimize position change loops

# What's changed?

* Only loop selected nodes instead of all nodes when determining position changes
This commit is contained in:
Braks
2022-04-24 13:34:22 +02:00
parent e2fd3b44ef
commit 0becad73ad
3 changed files with 11 additions and 13 deletions
@@ -104,9 +104,7 @@ onMounted(() => {
onBeforeUnmount(() => observer.stop()) onBeforeUnmount(() => observer.stop())
updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }]) updateNodeDimensions([{ id: node.id, nodeElement: nodeElement.value, forceUpdate: true }])
})
onMounted(() => {
watch( watch(
[() => node.position, () => parent?.computedPosition, () => node.selected, () => parent?.selected], [() => node.position, () => parent?.computedPosition, () => node.selected, () => parent?.selected],
([pos, parent]) => { ([pos, parent]) => {
+9 -9
View File
@@ -119,18 +119,18 @@ export default (state: State, getters: ComputedGetters): Actions => {
const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => { const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
const nodePosPromise = new Promise<NodePositionChange[]>((resolve) => { const nodePosPromise = new Promise<NodePositionChange[]>((resolve) => {
const changes: NodePositionChange[] = [] const changes: NodePositionChange[] = []
const curr = id ? getters.getNode.value(id)! : undefined
state.nodes.forEach((node) => { if (curr) {
if (node.selected) { changes.push(createPositionChange({ node: curr, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value))
} else {
getters.getSelectedNodes.value.forEach((node) => {
if (!node.parentNode) { if (!node.parentNode) {
changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes)) changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value))
} else if (!isParentSelected(node, getters.getNode.value)) { } else if (!isParentSelected(node, getters.getNode.value)) {
changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes)) changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value))
} }
} else if (node.id === id) { })
changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, state.nodes)) }
}
})
if (changes.length) resolve(changes) if (changes.length) resolve(changes)
}) })
+2 -2
View File
@@ -146,9 +146,9 @@ export const createSelectionChange = (id: string, selected: boolean): NodeSelect
export const createPositionChange = ( export const createPositionChange = (
{ node, diff, dragging, nodeExtent }: CreatePositionChangeParams, { node, diff, dragging, nodeExtent }: CreatePositionChangeParams,
curr: GraphNode[], getNode: Getters['getNode'],
): NodePositionChange => { ): NodePositionChange => {
const parent = node.parentNode ? curr.find((el) => el.id === node.parentNode) : undefined const parent = node.parentNode ? getNode(node.parentNode) : undefined
const change: NodePositionChange = { const change: NodePositionChange = {
id: node.id, id: node.id,
type: 'position', type: 'position',