119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
import { ref, computed } from "vue";
|
|
import { OperationType } from '../tools/layerHelper'
|
|
import i18n from '@/lang'
|
|
const t = i18n.global.t
|
|
|
|
class Event {
|
|
list: any[]
|
|
constructor() {
|
|
this.list = []
|
|
}
|
|
add(name, call) {
|
|
this.list.push({ name, call })
|
|
}
|
|
remove(name, call) {
|
|
this.list = this.list.filter(item => item.name != name && item.call != call)
|
|
}
|
|
emit(name, data) {
|
|
this.list.forEach(item => {
|
|
if (item.name == name) item.call(data)
|
|
})
|
|
}
|
|
}
|
|
|
|
export class StateManager {
|
|
// 历史记录-撤回/重做
|
|
mxHistory: any
|
|
historyList: any
|
|
historyIndex: any
|
|
running: any
|
|
|
|
event: Event
|
|
|
|
// 管理器
|
|
canvasManager: any
|
|
layerManager: any
|
|
eventManager: any
|
|
toolManager: any
|
|
brushManager: any
|
|
keyEventManager: any
|
|
objectManager: any
|
|
aiSelectboxToolManager: any
|
|
// 设置管理器
|
|
setManager(options) {
|
|
options.eventManager && (this.eventManager = options.eventManager)
|
|
options.canvasManager && (this.canvasManager = options.canvasManager)
|
|
options.layerManager && (this.layerManager = options.layerManager)
|
|
options.toolManager && (this.toolManager = options.toolManager)
|
|
options.brushManager && (this.brushManager = options.brushManager)
|
|
options.keyEventManager && (this.keyEventManager = options.keyEventManager)
|
|
options.objectManager && (this.objectManager = options.objectManager)
|
|
options.aiSelectboxToolManager && (this.aiSelectboxToolManager = options.aiSelectboxToolManager)
|
|
}
|
|
constructor(options) {
|
|
this.mxHistory = ref(50)
|
|
this.historyList = ref([])
|
|
this.historyIndex = ref(0)
|
|
this.running = ref(false)
|
|
this.event = new Event()
|
|
}
|
|
onMounted() { }
|
|
|
|
/** 设置是否开始记录状态 */
|
|
setIsRecord(isRecord: boolean) {
|
|
this.running.value = !isRecord
|
|
}
|
|
/** 清空状态 */
|
|
clearState(isRecordCurrentState?: boolean) {
|
|
this.historyList.value = []
|
|
this.historyIndex.value = 0
|
|
this.running.value = false
|
|
if (isRecordCurrentState) this.recordState()
|
|
}
|
|
/** 记录状态 */
|
|
recordState() {
|
|
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() {
|
|
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, false).then(() => {
|
|
this.toolManager.setTool(OperationType.SELECT)
|
|
this.event.emit('canvas:undo', state)
|
|
this.running.value = false
|
|
})
|
|
}
|
|
/** 重做状态 */
|
|
redoState() {
|
|
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, false).then(() => {
|
|
this.toolManager.setTool(OperationType.SELECT)
|
|
this.event.emit('canvas:redo', state)
|
|
this.running.value = false
|
|
})
|
|
}
|
|
dispose() { }
|
|
}
|