低代码平台的撤销与重做该如何设计？-低代码平台的缺点

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

撤销、重做其实是我们平时一直在用的操作。对应快捷键一般就是⌘ 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;
}

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