EdgeChangeset

An EdgeChangeset is what Vue Flow hands you whenever edges change: both the @edges-change event and the onEdgesChange hook deliver one. It collects the EdgeChange objects queued for that update and knows how to apply them, so you never assemble the next array yourself.

Source on GitHub


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

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

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

Members

Member	Signature	Description
`applyTo`	`(edges: EdgeType[]) => EdgeType[]`	Applies every queued change and returns the next array.
`add`	`(change: EdgeChange \| EdgeChange[]) => void`	Queues one or more changes.
`remove`	`(change: EdgeChange) => void`	Removes a queued change by object reference.
`getByType`	`(type: EdgeChange['type']) => EdgeChange[]`	Every queued change of that type, e.g. `'select'` or `'remove'`.
`getForEdge`	`(edgeId: string) => EdgeChange[]`	Every queued change for one edge.
`removeForEdge`	`(edgeId: string) => void`	Drops every queued change for one edge.
`toArray`	`() => EdgeChange[]`	All queued changes as a flat array.
`size`	`number`	How many edges 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 EdgeChangeset(changes?) — for example to replay recorded changes.
The standalone applyEdgeChanges(changes, edges) util is deprecated and still array-based, so it cannot take the event payload; use applyTo or the instance’s applyEdgeChanges(changeset).
Nodes have the mirrored NodeChangeset.