undo / redo in vue-flow

[pete1019]

Hi,

how would a undo / redo be possible in vue-flow?

Thanks

[bcakmakoglu]

Well, currently there is no plugin or anything that would handle this for you so you would have to implement it yourself.
To do so you can hook yourself into the onNodesChange and onEdgesChange events.

These events communicate graph changes to you and they can be used to revert certain changes.
For example dragging a node emits the NodePositionChange type, which will tell you where the node was dragged to and where it came from.

With that information you should be able to revert those changes.

Or a completely different approach would be to use some state management library like Pinia that possibly has a history plugin (though that way you have less control over how changes should be reverted)

[pete1019]

thanks,

would any of this help?
https://github.com/rlemaigre/Easy-UndoRedo
https://github.com/factorial-io/undo-redo-vuex

[bcakmakoglu]

Those are both for Vue 2, so no, they won't work 😅

[pete1019]

How about this?
https://vueuse.org/core/userefhistory/

[bcakmakoglu]

You can try it but I doubt it will solve the use-case you're looking for.
At least i haven't gotten it to work in a quick test.

You're probably gonna have to write your own logic for that sort of thing as useRefHistory will record all the changes of a drag, so undoing would move like a couple pixels, not back to the starting pos.

[pete1019]

Thanks for trying.

See under "Integration with React Flow v10"
https://github.com/Infinium8/useUndoable

This is how they do it on React with React Flow.

Or maybe this helps?
https://github.com/wobsoriano/pinia-undo

[Lehoczky]

Hey 👋

I've tried to implement this myself, using the onNodesChange hook, but I ran into multiple obstacles:

• when adding a new node, an add and a dimensions events are emitted right after each other. It would be great if these two would be 1 event, or if they were emitted together in the same array [{ type: "add", ...}, {type: "dimensions, ....}]
• the remove event only contains the removed node's ID. I'm not sure if it's possible to restore a node by only knowing its ID, but if it isn't, the event could contain the whole node. That would make it easy to restore later.
• the dimensions event only contains to new dimensions, not the old ones
• the position event is fired a lot while a node is being dragged. This makes it unusable to implement an undo button using this event. A workaround is to use the onNodeDragStart, onNodeDragStop, onSelectionDragStart, onSelectionDragStop hooks. Using these, I was able to undo node position changes with ~50 lines of code.

I'm not sure, if I'm missing something and in reality this is easy to implement, and I'm just trying to do it in a wrong way.

[bcakmakoglu]

Hey, thanks for the feedback. Let me address some of the points

1. This is the intended mechanic and happens for a reason. Adding a node does not necessarily mean it will be rendered (you can add a hidden node, it would still create a change with type add but not cause a dimension change). These changes are not strictly related to each other and are fired through different sequences and thus sending them together wouldn't be feasible and not make that much sense to me either, even though they might fire "quickly" in succession if you add a new node that is rendered.
2. You can always just get the removed node before removal and put a copy of that node object into your redo/undo stack yourself (check the controlled flow part of the docs: https://vueflow.dev/guide/controlled-flow.html)
3. That's true, we could add previous dimensions to the change - suggestion noted :)
4. position type changes come with a flag for dragging - if dragging is false the drag has ended, so all you need to record for undo/redo is the change that comes with the flag set to false (the starting position of the drag should be part of the change afaik)

[Lehoczky]

Using the dragging property for the position change makes this much easier, thank you. This is what I did:

const history = ref([])
onNodesChange((changes) => {
  for (const change of changes) {
    if (change.type === "position" && change.dragging === false) {
      history.value.push({
        type: "position",
        id: change.id,
        startPosition: toRaw(change.from),
        stopPosition: toRaw(change.position),
      })
    }
  }
})

However when the user drags multiple nodes together, every one of them has an individual change event. Using the onSelectionDragStart, onSelectionDragStop this was not an issue, since the moved nodes were grouped together into an array.