深度画布键盘事件-撤回功能

This commit is contained in:
lzp
2026-03-12 11:40:48 +08:00
parent adf562bbe4
commit 86f1efbf43
11 changed files with 228 additions and 951 deletions

View File

@@ -9,6 +9,7 @@ export class StateManager {
mxHistory: any
historyList: any
historyIndex: any
running: any
// 管理器
canvasManager: any
@@ -16,6 +17,7 @@ export class StateManager {
eventManager: any
toolManager: any
brushManager: any
keyEventManager: any
// 设置管理器
setManager(options) {
options.eventManager && (this.eventManager = options.eventManager)
@@ -23,45 +25,65 @@ export class StateManager {
options.layerManager && (this.layerManager = options.layerManager)
options.toolManager && (this.toolManager = options.toolManager)
options.brushManager && (this.brushManager = options.brushManager)
options.keyEventManager && (this.keyEventManager = options.keyEventManager)
}
constructor(options) {
this.mxHistory = ref(50)
this.historyList = ref([])
this.historyIndex = ref(0)
this.running = ref(false)
}
/** 清空状态 */
clearState(isRecordCurrentState?: boolean) {
this.historyList.value = []
this.historyIndex.value = 0
this.running.value = false
if (isRecordCurrentState) this.recordState()
}
/** 记录状态 */
recordState() {
// if (this.historyIndex.value < this.historyList.value.length - 1) {
// this.historyList.value.splice(this.historyIndex.value + 1)
// }
// const state = {
// nodes: JSON.stringify(this.nodes.value)
// }
// this.historyList.value.push(state)
// const size = this.historyList.value.length - this.mxHistory.value
// if (size > 0) this.historyList.value.splice(0, size)
// this.historyIndex.value = this.historyList.value.length - 1
if (this.running.value) return
this.running.value = true
if (this.historyIndex.value < this.historyList.value.length - 1) {
this.historyList.value.splice(this.historyIndex.value + 1)
}
const state = {
canvas: this.canvasManager.getCanvasJSON(),
}
this.historyList.value.push(state)
const size = this.historyList.value.length - this.mxHistory.value
if (size > 0) this.historyList.value.splice(0, size)
this.historyIndex.value = this.historyList.value.length - 1
this.running.value = false
}
/** 撤回状态 */
undoState() {
// var index = this.historyIndex.value - 1
// const state = this.historyList.value[index]
// if (!state) return
// this.historyIndex.value = index
// this.nodes.value = JSON.parse(state.nodes)
if (this.running.value) return
var index = this.historyIndex.value - 1
const state = this.historyList.value[index]
if (!state) return
this.running.value = true
this.historyIndex.value = index
this.canvasManager.loadJSON(state.canvas, () => {
this.running.value = false
})
}
/** 重做状态 */
redoState() {
// var index = this.historyIndex.value + 1
// const state = this.historyList.value[index]
// if (!state) return
// this.historyIndex.value = index
// this.nodes.value = JSON.parse(state.nodes)
if (this.running.value) return
var index = this.historyIndex.value + 1
const state = this.historyList.value[index]
if (!state) return
this.running.value = true
this.historyIndex.value = index
this.canvasManager.loadJSON(state.canvas, () => {
this.running.value = false
})
}
dispose() { }
}