FiDA_Front/src/components/Canvas/DepthCanvas/manager/StateManager.ts

import { ref, computed } from "vue";
import { ElMessageBox } from 'element-plus'
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
	// 设置管理器
	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)
	}
	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
		console.log("recordState")
		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.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.event.emit('canvas:redo', state)
			this.running.value = false
		})
	}
	dispose() { }
}