Implementation of undo and rollback

Function Point description

You’ve probably all used the browser’s back and forward functions, which are our topic today: Undo and Back. In fact, not only in the browser, there are many tools in the software have similar functions, far not to say, such as: VScode, PPT.

Implementation approach

Before I get to the implementation idea, let me show you a picture:

If you’re sharp-eyed, you’ve probably seen the Stack, and yes, you’re right, the undo and rollback functions are one of the ways to use the Stack. First we need two stacks (undo Stack and rollback Stack)

Instead of visiting the website, I clicked on a small ball for a more intuitive display.

A is the red ball; B is green ball; C is the blue ball

1. When clicking on A and then clicking on B, A and B are added to the ‘retractable stack’ (equivalent to visiting site A and then site B), the current display is B

2. When the undo function is performed, the ‘undo stack’ is removed from the stack and the removed B is added to the ‘rollback stack’, currently shown as A

3. When performing the rollback function, remove the ‘rollback stack’ from the stack and add the removed B to the ‘revocable stack’. The current display is B

4. After accessing A and B, we undo B, return to A, and click C again. At this time, we need to clear the ‘rollback stack’ and add C to the ‘undo stack’.

code

Start by implementing a special stack

Why is it a special stack? Traditional stacks don’t have #shift(). So why do we need this function here? Keep going with the question.

This is a lazy use of Array’s built-in functions, which traditionally would not be used

     function createStack() {
                var list = [];
                return {
                    /** * push *@param {*} data* /
                    push(data) {
                        list.push(data);
                    },

                    /** ** */
                    pop() {
                        return list.pop();
                    },

                    size() {
                        return list.length;
                    },

                    empty() {
                        return list.length === 0;
                    },

                    clear() {
                        list = [];
                    },
                    // Delete header (bottom of stack)
                    shift() {
                        list.shift();
                    },

                    peek() {
                        return list[list.length - 1];
                    },

                    getList() {
                        returnlist; }}}Copy the code

Record object

function createRecord() { let undoStack = createStack(); let rollbackStack = createStack(); const MAX_LIMIT = 6; GetTopValue () {return undostack.peek (); }, If (undostack.size () >= MAX_LIMIT) {if (undostack.size () >= MAX_LIMIT) {  undoStack.shift(); } undoStack.push(data); rollbackStack.clear(); UndoRecord () {if (undostack.empty ()) return; if (undostack.empty ()) return; const data = undoStack.pop(); rollbackStack.push(data); RollbackRecord () {if (rollbackstack.empty ()) return; rollbackRecord() {rollbackStack.empty(); const data = rollbackStack.pop(); undoStack.push(data); }, getUndoStack() { return undoStack.getList(); }, getrollbackStack() { return rollbackStack.getList(); }}}Copy the code

When we use vscode to write code, did we find that when the undo reaches a certain number, the undo cannot go back? Yes, this logic is handled inside #addRecord(). When the size of the ‘retractable stack’ exceeds the limit, the original data needs to be discarded, i.e., the header needs to be removed. That’s why we implemented Stack with # Shift ().

conclusion

I also extracted the above logic from the company’s project logic, because several projects I took over had to realize this function. Of course, IN the company’s project, I added the Command mode to use it. If you are interested, I can update how to use the Command mode in the follow-up. Finally, data structures and algorithms are known to the best of the best.

link

Code link

Demo link

If this tutorial is helpful to you, please reward a little star – -!

---

• This is our team’s open source project, Element3
• A front-end component library that supports VUE3

---