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

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 	import { fabric } from 'fabric-with-all'
-	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeMount } from 'vue'
+	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
 	import { OperationType } from './tools/layerHelper'
 	// 组件
 	import layerPanel from './components/layer-panel/index.vue'
@@ -34,6 +34,7 @@
 	import { LayerManager } from './manager/LayerManager'
 	import { CanvasManager } from './manager/CanvasManager'
 	import { ToolManager } from './manager/ToolManager'
+	import { KeyEventManager } from './manager/events/KeyEventManager'
 
 	// 准备就绪
 	const isReady = ref(false)
@@ -66,6 +67,11 @@
 	stateManager.setManager({ toolManager })
 	provide('toolManager', toolManager)
 
+	//键盘事件管理器
+	const keyEventManager = new KeyEventManager({ stateManager })
+	stateManager.setManager({ keyEventManager })
+	provide('keyEventManager', keyEventManager)
+
 	const observer = ref(null)
 	onMounted(() => {
 		canvasManager.initCanvas({
@@ -79,6 +85,7 @@
 		canvasManager?.onMounted?.()
 		layerManager?.onMounted?.()
 		toolManager?.onMounted?.()
+		keyEventManager?.onMounted?.()
 
 		const trailingTimeout = ref(null)
 		observer.value = new ResizeObserver((entries) => {
@@ -91,7 +98,13 @@
 
 		isReady.value = true // 准备就绪
 	})
-	onBeforeMount(() => {})
+	onBeforeUnmount(() => {
+		canvasManager.dispose()
+		stateManager.dispose()
+		layerManager.dispose()
+		toolManager.dispose()
+		keyEventManager.dispose()
+	})
 	async function handleWindowResize() {
 		console.log('==========画布窗口大小变化==========')
 		canvasManager.setCanvasViewSize({
@@ -135,6 +148,7 @@
 			} else {
 				console.log('导入失败')
 			}
+			stateManager.clearState(true)
 		})
 	}
 </script>