在上一篇文章《​​低代码平台的属性面板该如何设计?​​》中聊到了低代码平台的属性面板的设计，今天来聊一下画布区域的撤销、重做的设计。

撤销、重做其实是我们平时一直在用的操作。对应快捷键一般就是⌘ Z / Ctrl+Z、⌘⇧ Z / Ctrl+Shift+Z。这个功能是很常见的，它可以极大的提升用户体验，提高编辑效率，但是用代码应该如何实现呢？再具体点，在我们的低代码平台，针对画布区域元素的一系列操作，又该如何去设计呢？

我们先对其中的一系列状态变更做一下分析。

默认情况下，用户在画布的一系列操作会改变整个画布的呈现状态：

在进行到某个操作时，用户是可以回退到之前的状态的，也就是撤销：

当然在进行撤销操作后，用户是可以恢复这个操作的，对应的就是重做：

来看下之前画布的数据结构：

const editorModule = {  state: {    components: [],  },  mutations: {     addComponent(state, component) {      component.id = uuidv4();      state.components.push(component);     },      updateComponent(state, { id, key, value, isProps }) {        const updatedComponent = state.components.find(          (component) => component.id === (id || state.currentElement)        );        if (updatedComponent) {          if (isProps) {            updatedComponent.props[key] = value;          } else {            updatedComponent[key] = value;          }        }    },    deleteComponent(state, id) {      state.components = state.components.filter(        (component) => component.id !== id      );    },  },}

对应操作：

添加组件：addComponent更新组件：updateComponent删除组件：deleteComponent

结合上面的三张图，不难想到我们要单独维护一份数据来存储变更记录，执行撤销和重做操作时就是在这份变更记录取出已有的数据，然后去更新原来的components。在原有的state中添加：

// 变更记录histories: [],// 游标，用来标记变更的位置historyIndex: -1,

在画布区域操作(添加、删除、更新)时，更新原有组件数据的同时，也要维护变更记录。

我们需要封装一个更新变更记录的方法updateHistory。

正常情况下其实只用往histories添加记录就可以了：

const updateHistory = (state, historyRecord) => {  state.histories.push(historyRecord);}

在之前的添加组件、更新组件、删除组件节点做一下调整：

添加组件

添加组件的同时往histories添加一项changeType为add的组件数据，不过这里的component要做下深拷贝：

addComponent(state, component) {    component.id = uuidv4();    state.components.push(component);    updateHistory(state, {      id: uuidv4(),      componentId: component.id,      changeType: "add",      data: cloneDeep(component),    }); }

更新组件

更新组件时向histories添加一项changeType为modify的组件数据，同时要把新/老value和key也添加进去：

updateComponent(state, { id, key, value, isProps }) {    const updatedComponent = state.components.find(      (component) => component.id === (id || state.currentElement)    );    if (updatedComponent) {      if (isProps) {        const oldValue = updatedComponent.props[key]        updatedComponent.props[key] = value;        updateHistory(state, {          id: uuidv4(),          componentId: id || state.currentElement,          changeType: "modify",          data: { oldValue, newValue: value, key },        });      } else {        updatedComponent[key] = value;      }    }},

删除组件

删除组件时往histories添加一条changeType为delete的数据，同时要把index也做下记录，因为后面做撤销操作时是根据index重新插入到原来的位置：

deleteComponent(state, id) {  const componentData = state.components.find(    (component) => component.id === id  ) as ComponentData;  const componentIndex = state.components.findIndex(    (component) => component.id === id  );  state.components = state.components.filter(    (component) => component.id !== id  );  updateHistory(state, {    id: uuidv4(),    componentId: componentData.id,    changeType: "delete",    data: componentData,    index: componentIndex,  });},

可以看到在添加历史记录的过程中，多了一个changeType字段来区分是什么类型的变更：

type changeType = "add" | "modify" | "delete"

这个也是为后面的撤销/重做做铺垫，有了历史记录，针对不同的changeType分别执行对应的数据处理。

首先来看下撤销，也就是undo。第一步是要找到当前的游标，也就是撤销操作的位置。如果在此之前，从未有过撤销操作，也就是 historyIndex 为-1 时，这时将 historyIndex 置为历史记录的最后一项。否则就将 historyIndex--：

if (state.historyIndex === -1) {  state.historyIndex = state.histories.length - 1;} else {  state.historyIndex--;}

找到撤销的位置，下一步就是根据上一步记录到histories中的不同changeType做对应的数据处理：

const history = state.histories[state.historyIndex];switch (history.changeType) {  case "add":    state.components = state.components.filter(      (component) => component.id !== history.componentId    );    break;  case "delete":    state.components = insert(      state.components,      history.index,      history.data    );    break;  case "modify": {    const { componentId, data } = history;    const { key, oldValue } = data    const updatedComponent = state.component.find(component => component.id === componentId)    if(updatedComponent) {      updatedComponent.props[key] = oldValue    }    break;  }  default:    break;}

如果之前是做了添加组件操作，那么撤销时对应的就是删除处理。

如果之前是做了删除处理，那么撤销时对应的就是把之前删除的组件恢复添加到原来的位置。

如果之前是对组件属性做了改动，那么撤销时对应的就是把组件对应的属性恢复到原来的值。

那么对于重做，就是撤销的逆向操作了，可以理解为就是正常的操作：

const history = state.histories[state.historyIndex];switch (history.changeType) {  case "add":    state.components.push(history.data);    break;  case "delete":    state.components = state.components.filter(            (component) => component.id !== history.componentId          );    break;  case "modify": {    const { componentId, data } = history;    const { key, newValue } = data    const updatedComponent = state.component.find(component => component.id === componentId)    if(updatedComponent) {      updatedComponent.props[key] = newValue    }    break;  }  default:    break;}

其实到这里，一个基础的撤销、重做就已经实现了。

但这是不符合使用习惯的，我们在用编辑器的时候，不可能让你无限的撤销，这个我们通过设置maxHistoryNumber来控制，调整一下之前的updateHistory：

const updateHistory = (state, historyRecord) => {  if (state.histories.length < maxHistoryNumber) {    state.histories.push(historyRecord);  } else {    state.histories.shift();    state.histories.push(historyRecord);  }}

当历史记录条目小于设定的最大历史条目前，正常往histories添加记录。

如果大于或等于maxHistoryNumber时，就把历史记录中最前面的一个剔除，同时把最新的这条加到历史记录的最后。

还有一个场景是：在撤销/重做的过程中，又正常对画布区域执行了操作。

这种情况，常用的做法就是把大于historyIndex的历史记录直接全部删除，同时把historyIndex置为-1，也就是初始状态。因为现在已经进入了一个新的状态分支：

if (state.historyIndex !== -1) {  state.histories = state.histories.slice(0, state.historyIndex);  state.historyIndex = -1;}

至此，低代码平台的撤销/重做的设计思路就分享结束了。

关键词： 历史记录 变更记录 删除组件 添加记录 数据处理