EdgeChangeset

An EdgeChangeset is what Svelte Flow passes your onedgeschange handler whenever edges change. It holds the EdgeChange objects and comes with an applyTo() method, to apply the changes.

Source on GitHub 

import type { Edge, EdgeChangeset } from '@xyflow/svelte';
 
function onEdgesChange(changes: EdgeChangeset<Edge>) {
  edges = changes.applyTo(edges);
}

Reading changes

A changeset is iterable, and it can hand you changes by type or by edge — 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 edge
const changesForEdge = changes.getForEdge('e1-2');

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 onEdgesChange(changes: EdgeChangeset<Edge>) {
  // keep this edge no matter what the interaction asked for
  changes.removeForEdge('e1-2');
 
  setEdges((eds) => changes.applyTo(eds));
}

Notes

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