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:
@@ -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]) => {
|
||||||
|
|||||||
@@ -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)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user