首页>国内 > 正文

低代码平台的撤销与重做该如何设计?

2022-04-22 15:37:38来源:前端森林

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

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

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

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

相关新闻

Copyright 2015-2020   三好网  版权所有