建站
咨詢
售后
建站咨詢
新聞中心
在上一篇文章《??低代碼平臺的屬性面板該如何設計???》中聊到了低代碼平臺的屬性面板的設計，今天來聊一下畫布區(qū)域的撤銷、重做的設計。
10多年的大石橋網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整大石橋建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“大石橋網(wǎng)站設計”,“大石橋網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
撤銷、重做其實是我們平時一直在用的操作。對應快捷鍵一般就是? Z / Ctrl+Z、?? Z / Ctrl+Shift+Z。這個功能是很常見的，它可以極大的提升用戶體驗，提高編輯效率，但是用代碼應該如何實現(xiàn)呢？再具體點，在我們的低代碼平臺，針對畫布區(qū)域元素的一系列操作，又該如何去設計呢？
我們先對其中的一系列狀態(tài)變更做一下分析。
默認情況下，用戶在畫布的一系列操作會改變整個畫布的呈現(xiàn)狀態(tài)：
在進行到某個操作時，用戶是可以回退到之前的狀態(tài)的，也就是撤銷：
當然在進行撤銷操作后，用戶是可以恢復這個操作的，對應的就是重做：
來看下之前畫布的數(shù)據(jù)結(jié)構(gòu)：
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
結(jié)合上面的三張圖，不難想到我們要單獨維護一份數(shù)據(jù)來存儲變更記錄，執(zhí)行撤銷和重做操作時就是在這份變更記錄取出已有的數(shù)據(jù)，然后去更新原來的components。在原有的state中添加：
// 變更記錄
histories: [],
// 游標，用來標記變更的位置
historyIndex: -1,
在畫布區(qū)域操作(添加、刪除、更新)時，更新原有組件數(shù)據(jù)的同時，也要維護變更記錄。
我們需要封裝一個更新變更記錄的方法updateHistory。
正常情況下其實只用往histories添加記錄就可以了：
const updateHistory = (state, historyRecord) => {
state.histories.push(historyRecord);
}在之前的添加組件、更新組件、刪除組件節(jié)點做一下調(diào)整：
添加組件
添加組件的同時往histories添加一項changeType為add的組件數(shù)據(jù)，不過這里的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的組件數(shù)據(jù)，同時要把新/老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的數(shù)據(jù)，同時要把index也做下記錄，因為后面做撤銷操作時是根據(jù)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字段來區(qū)分是什么類型的變更：
type changeType = 'add' | 'modify' | 'delete'
這個也是為后面的撤銷/重做做鋪墊，有了歷史記錄，針對不同的changeType分別執(zhí)行對應的數(shù)據(jù)處理。
首先來看下撤銷，也就是undo。第一步是要找到當前的游標，也就是撤銷操作的位置。如果在此之前，從未有過撤銷操作，也就是 historyIndex 為-1 時，這時將 historyIndex 置為歷史記錄的最后一項。否則就將 historyIndex--：
if (state.historyIndex === -1) {
state.historyIndex = state.histories.length - 1;
} else {
state.historyIndex--;
}找到撤銷的位置，下一步就是根據(jù)上一步記錄到histories中的不同changeType做對應的數(shù)據(jù)處理：
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;
}
其實到這里，一個基礎的撤銷、重做就已經(jīng)實現(xiàn)了。
但這是不符合使用習慣的，我們在用編輯器的時候，不可能讓你無限的撤銷，這個我們通過設置maxHistoryNumber來控制，調(diào)整一下之前的updateHistory：
const updateHistory = (state, historyRecord) => {
if (state.histories.length < maxHistoryNumber) {
state.histories.push(historyRecord);
} else {
state.histories.shift();
state.histories.push(historyRecord);
}
}當歷史記錄條目小于設定的最大歷史條目前，正常往histories添加記錄。
如果大于或等于maxHistoryNumber時，就把歷史記錄中最前面的一個剔除，同時把最新的這條加到歷史記錄的最后。
還有一個場景是：在撤銷/重做的過程中，又正常對畫布區(qū)域執(zhí)行了操作。
這種情況，常用的做法就是把大于historyIndex的歷史記錄直接全部刪除，同時把historyIndex置為-1，也就是初始狀態(tài)。因為現(xiàn)在已經(jīng)進入了一個新的狀態(tài)分支：
if (state.historyIndex !== -1) {
state.histories = state.histories.slice(0, state.historyIndex);
state.historyIndex = -1;
}至此，低代碼平臺的撤銷/重做的設計思路就分享結(jié)束了。
名稱欄目：低代碼平臺的撤銷與重做該如何設計？
網(wǎng)址分享：http://m.5511xx.com/article/dhsccph.html
