Implementing Undo and Redo features for minimum 7 steps

[TeeWrath]

Project

Personal Project

Languages Involved

Dart

Category

Frontend

Difficulty

Intermediate ? maybe

Query

Dear FOSS United Community,
We are developing a workflow builder application using Flutter, where users can create and connect nodes to represent various processes. As part of enhancing the user experience, we aim to implement an undo and redo functionality that allows users to revert and redo actions for at least the last seven steps. This feature will ensure greater flexibility and control over workflow modifications.
Note: in undo and redo the steps will be of three types : 1. Nodes created deletion
2. Clicking on a connection point to select it
3. Clicking on second connection point to establish connection between two nodes.

Reference Image

[contrasam]

A way you can implement this is you need to capture the events that the user does with enough information so when replayed it will reapply or remove the change.

You can implement it using two stacks, one is for undo events, and another for redo events.

When user undoes an event, you take the event on the undo stack and perform a reverting action, now you add the action to the redo stack

For example, event is connecting node 1 & node2 then reverting action is delete connection, if event is deleting a node, reverting action is creating that node.

Now when the user presses redo, you can take the event from top of the redo stack and execute that actions.

This is the tricky part the redo action might fail because the user could have done many events which may conflict with redo events, so we have to try performing the redo action if it fails we should safely handle it so the user does not see it