在上一篇文章《低代码平台的属性面板该如何设计?》中聊到了低代码平台的属性面板的设计，今天来聊一下画布区域的撤销、重做的设计。
撤销、重做其实是我们平时一直在用的操作。对应快捷键一般就是⌘ 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
);
},
},
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
对应操作：
- 添加组件：addComponent
- 更新组件：updateComponent
- 删除组件：deleteComponent
结合上面的三张图，不难想到我们要单独维护一份数据来存储变更记录，执行撤销和重做操作时就是在这份变更记录取出已有的数据，然后去更新原来的components。在原有的state中添加：
// 变更记录
histories: [],
// 游标，用来标记变更的位置
historyIndex: -1,- 1.
- 2.
- 3.
- 4.
在画布区域操作(添加、删除、更新)时，更新原有组件数据的同时，也要维护变更记录。
我们需要封装一个更新变更记录的方法updateHistory。
正常情况下其实只用往histories添加记录就可以了：
const updateHistory = (state, historyRecord) => {
state.histories.push(historyRecord);
}- 1.
- 2.
- 3.
在之前的添加组件、更新组件、删除组件节点做一下调整：
添加组件
添加组件的同时往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),
});
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
更新组件
更新组件时向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;
}
}
},- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
删除组件
删除组件时往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,
});
},- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
可以看到在添加历史记录的过程中，多了一个changeType字段来区分是什么类型的变更：
type changeType = 'add' | 'modify' | 'delete'- 1.
这个也是为后面的撤销/重做做铺垫，有了历史记录，针对不同的changeType分别执行对应的数据处理。
首先来看下撤销，也就是undo。第一步是要找到当前的游标，也就是撤销操作的位置。如果在此之前，从未有过撤销操作，也就是 historyIndex 为-1 时，这时将 historyIndex 置为历史记录的最后一项。否则就将 historyIndex--：
if (state.historyIndex === -1) {
state.historyIndex = state.histories.length - 1;
} else {
state.historyIndex--;
}- 1.
- 2.
- 3.
- 4.
- 5.
找到撤销的位置，下一步就是根据上一步记录到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;
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
如果之前是做了添加组件操作，那么撤销时对应的就是删除处理。
如果之前是做了删除处理，那么撤销时对应的就是把之前删除的组件恢复添加到原来的位置。
如果之前是对组件属性做了改动，那么撤销时对应的就是把组件对应的属性恢复到原来的值。
那么对于重做，就是撤销的逆向操作了，可以理解为就是正常的操作：
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;
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
其实到这里，一个基础的撤销、重做就已经实现了。
但这是不符合使用习惯的，我们在用编辑器的时候，不可能让你无限的撤销，这个我们通过设置maxHistoryNumber来控制，调整一下之前的updateHistory：
const updateHistory = (state, historyRecord) => {
if (state.histories.length < maxHistoryNumber) {
state.histories.push(historyRecord);
} else {
state.histories.shift();
state.histories.push(historyRecord);
}
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
当历史记录条目小于设定的最大历史条目前，正常往histories添加记录。
如果大于或等于maxHistoryNumber时，就把历史记录中最前面的一个剔除，同时把最新的这条加到历史记录的最后。
还有一个场景是：在撤销/重做的过程中，又正常对画布区域执行了操作。
这种情况，常用的做法就是把大于historyIndex的历史记录直接全部删除，同时把historyIndex置为-1，也就是初始状态。因为现在已经进入了一个新的状态分支：
if (state.historyIndex !== -1) {
state.histories = state.histories.slice(0, state.historyIndex);
state.historyIndex = -1;
}- 1.
- 2.
- 3.
- 4.
至此，低代码平台的撤销/重做的设计思路就分享结束了。