fabric.js: 一步步操作指南 - 撤销、恢复与保存功能详解
最编程
2024-07-24 13:32:33
...
const state = {
saveLen: 0,
deleLen: 0,
operIndex: -1
}
window.saveOperateList = []
window.deleteOperateList = []
const getters = {
}
const mutations = {
// 操作保存的数据
OPERATE_OPERATE_DATA (state) {
const json = window.card.toDatalessJSON()
if (state.deleLen > 0) {
window.deleteOperateList.some(item => {
window.saveOperateList[item].del = true
})
window.saveOperateList = window.saveOperateList.filter(item => {
return !item.del
})
window.deleteOperateList = []
window.saveOperateList.push(json)
state.operIndex = window.saveOperateList.length - 1
} else {
window.saveOperateList.push(json)
state.operIndex += 1
}
state.saveLen = window.saveOperateList.length
state.deleLen = window.deleteOperateList.length
},
// 上一步操作
PREV_STEP_OPERATE (state) {
if (state.operIndex > 0) {
window.card.loadFromJSON(window.saveOperateList[state.operIndex - 1]).renderAll()
if (window.deleteOperateList.includes(state.operIndex - 1)) {
} else {
window.deleteOperateList.push(state.operIndex)
state.operIndex -= 1
}
}
state.saveLen = window.saveOperateList.length
state.deleLen = window.deleteOperateList.length
},
// 下一步操作
NEXT_STEP_OPERATE (state) {
if (state.operIndex + 1 >= window.saveOperateList.length) {
return
}
window.card.loadFromJSON(window.saveOperateList[state.operIndex + 1]).renderAll()
if (window.deleteOperateList.includes(state.operIndex + 1)) {
const index = window.deleteOperateList.indexOf(state.operIndex + 1)
window.deleteOperateList.splice(index, 1)
} else {
}
state.operIndex = state.operIndex + 1
state.saveLen = window.saveOperateList.length
state.deleLen = window.deleteOperateList.length
}
}
const actions = {
}
export default { state, getters, mutations, actions }