Understanding how undo-redo works

[cruxcode]

There are two popular algorithms for implementing undo-redo functionality in an application.

1. Operational Transformation
2. CRDT

In AtriEngine we are using operational transformation algorithm to implement undo-redo.
The operational transformation algorithm works in the following way:-

1. For every event we should store an opposite event to that very event. For example if
   we create a component we store an opposite event which is a delete event.
2. It's not necessary that every time an opposite event exist to some action. For example
   when we change the borderColor from red to blue, no opposite event exists, in such cases
   we store the old state and the new state and using them the undo-redo functionality can be
   achieved.

We require the use of two stacks, one for recording events for undo and one for redo. After every event we create an undo record, in which we store what events should fire on undo and redo. Undo record is pushed into the undo stack when the event happens
and on using undo we pop from the undo stack and put it into redo stack. This is how we are storing undo and redo actions in the stacks. We are utilizing the LIFO property of the stack so that we can access events from the most recent to the least
recent.

For an user action, the user perceives that only one event is getting fired. This might or might not be true every time. At times it is possible that for one create event we have to do 'n' deletions and hence we have used an array to store all
'n' deletions that have to be done.

type UndoRecord = { undo: AnyEvent[]; redo: AnyEvent[] };

Suppose we change a property of any component in the Component Tree, the tree after that change has the new state as subscribe event is called after the change is done, so to get access to the older state to store into the stack we have a separate
old state field which stores the old state of that component.