从零搭建低代码平台（十）编辑区中撤销和重做功能的实现

目录

大体介绍

具体思路

代码实现

---

大体介绍

撤销：当移动或者引入组件发生错误的时候能够实现回溯的效果。

重做：当撤销的操作发生错误的时候能过实现撤销“撤销”的效果

在这一篇文章中我们就是打算实现这个功能，我打算用一个容器来存储所有已经进行的操作，我们通过对这个栈的压栈等操作来实现撤销和重做的功能。

具体思路

这一部分可能比较难以理解，就是我每次进行一次操作，就给这个操作进行一次命名，并将这一次操作压入栈中，并且给这个栈添加一个指针，在没有进行撤销和重做操作的时候，指针一直指向栈低的元素，当进行撤销操作的时候，我们就将指针向前移动一个单位，让它指向我上一次已经执行的操作，同时删除此次的操作，这样就实现的撤销的功能，同理，重做操作是我们将指针向后移动一个单位，让它指向我们的下一个操作，同时加载下一次操作要实现的效果，这样我们就完成了重做的功能。（注意：重做也是一个操作，也需要压入栈中）

代码实现

 const registry = (command) => {
        state.commandArray.push(command);
        state.commands[command.name] = () => {
            const {redo, undo} = command.execute();
            redo();
            if (!command.pushQueue) {
                return
            }
            let {queue, current} = state;
            // console.log('ahh')

            if (queue.length > 0) {
                queue = queue.slice(0, current + 1);
                state.queue = queue;
            }

            queue.push({redo, undo});
            state.current = current + 1;
            // console.log(queue)
        }
    }

    registry({
        name: 'redo',
        keyboard: 'ctrl+y',
        execute() {
            return {
                redo() {
                    let item = state.queue[state.current + 1];
                    if (item) {
                        item.redo && item.redo();
                        state.current++;
                    }
                }
            }
        }
    })
    registry({
        name: 'undo',
        keyboard: 'ctrl+z',
        execute() {
            return {
                redo() {
                    if (state.current === -1) return;
                    let item = state.queue[state.current];
                    if (item) {
                        item.undo && item.undo();
                        state.current--;
                    }
                }
            }
        }
    })

大致效果不好展示，这里就不给予展示了，大体的思路就是这样了，代码可能还是需要改善的。