NodeChangeset

A NodeChangeset is what Vue Flow hands you whenever nodes change: both the @nodes-change event and the onNodesChange hook deliver one. It collects the NodeChange objects queued for that update and knows how to apply them, so you never assemble the next array yourself.

Source on GitHub


import type { Node, NodeChangeset } from '@xyflow/vue';
 
function onNodesChange(changes: NodeChangeset<Node>) {
  nodes.value = changes.applyTo(nodes.value);
}

You only need this in a controlled flow (a one-way :nodes binding). With v-model:nodes Vue Flow applies the changeset for you.

Reading changes

A changeset is iterable, and it can hand you changes by type or by node — so inspecting an update doesn’t mean scanning an array yourself.


// every change, in order
for (const change of changes) {
  console.log(change.type, change.id);
}
 
// just the removals
if (changes.getByType('remove').length > 0) {
  saveUndoSnapshot();
}
 
// everything queued for one node
const changesForNode = changes.getForNode('node-1');

Editing before you apply

Because the changeset is a real object you can drop or add changes before applying it — handy for vetoing an update without rebuilding the array.


function onNodesChange(changes: NodeChangeset<Node>) {
  // ignore anything that would move or delete the locked node
  changes.removeForNode('locked-node');
 
  nodes.value = changes.applyTo(nodes.value);
}

Members

Member	Signature	Description
`applyTo`	`(nodes: NodeType[]) => NodeType[]`	Applies every queued change and returns the next array.
`add`	`(change: NodeChange \| NodeChange[]) => void`	Queues one or more changes.
`remove`	`(change: NodeChange) => void`	Removes a queued change by object reference.
`getByType`	`(type: NodeChange['type']) => NodeChange[]`	Every queued change of that type, e.g. `'position'` or `'remove'`.
`getForNode`	`(nodeId: string) => NodeChange[]`	Every queued change for one node.
`removeForNode`	`(nodeId: string) => void`	Drops every queued change for one node.
`toArray`	`() => NodeChange[]`	All queued changes as a flat array.
`size`	`number`	How many nodes the changeset touches.
`version`	`number`	Bumped on every edit — useful as a watch source.

The changeset also implements Symbol.iterator, so [...changes] and for…of work directly.

Notes

Construct one yourself with new NodeChangeset(changes?) — for example to replay recorded changes.
The standalone applyNodeChanges(changes, nodes) util is deprecated and still array-based, so it cannot take the event payload; use applyTo or the instance’s applyNodeChanges(changeset).
Edges have the mirrored EdgeChangeset.