NodeChangeset

A NodeChangeset is what Svelte Flow passes to your onnodeschange handler whenever nodes change. It holds the NodeChange objects and comes with an applyTo() method, to apply the changes.

Source on GitHub 

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

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');
 
  setNodes((nds) => changes.applyTo(nds));
}

Notes

• Construct one yourself with new NodeChangeset(changes?) — for example to replay recorded changes.
• The standalone applyNodeChanges(changes, nodes) util is removed. Use changes.applyTo(nodes) instead.
• Edges have the mirrored EdgeChangeset.