11

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

@@ -88,12 +88,13 @@
 
 	const observer = ref(null)
 	onMounted(() => {
+		keyEventManager.registerEvents()
 		canvasManager.initCanvas({
 			canvasRef,
 			canvasViewWidth: canvasContainerRef.value.clientWidth,
 			canvasViewHeight: canvasContainerRef.value.clientHeight,
-			canvasWidth: 750,
-			canvasHeight: 600
+			canvasWidth: props.config.width || 750,
+			canvasHeight: props.config.height || 600
 		})
 		stateManager.onMounted()
 		canvasManager.onMounted()

src/components/Canvas/DepthCanvas/index.vue

@@ -11,10 +11,20 @@
 	import depthCanvas from './depth-canvas.vue'
 	import { ref } from 'vue'
 	const dialogVisible = ref(false)
-	const config = ref({})
+	const config = ref({
+		width: 750,
+		height: 600,
+	})
 	const open = (options) => {
 		dialogVisible.value = true
-		config.value = options || {}
+		// config.value = options || {}
+		const defaultConfig = {
+			canvasWidth: 750,
+			canvasHeight: 600,
+			canvasViewWidth: 750,
+			canvasViewHeight: 600,
+		}
+		config.value = { ...defaultConfig, ...options || {} }
 	}
 	const close = () => {
 		dialogVisible.value = false

src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts

@@ -2,11 +2,12 @@ export class KeyEventManager {
 	stateManager: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
-		this.registerEvents()
+		this._handleKeyDown = this.handleKeyDown.bind(this)
 	}
 	onMounted() { }
 
 	/** 处理键盘事件 */
+	_handleKeyDown: any
 	handleKeyDown(event: any) {
 		const ctrl = event.ctrlKey ? 'ctrl-' : "";
 		const shift = event.shiftKey ? 'shift-' : "";
@@ -24,11 +25,11 @@ export class KeyEventManager {
 	}
 	/** 注册事件 */
 	registerEvents() {
-		document.addEventListener('keydown', this.handleKeyDown.bind(this))
+		document.addEventListener('keydown', this._handleKeyDown)
 	}
 	/** 删除事件 */
 	removeEvents() {
-		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
+		document.removeEventListener('keydown', this._handleKeyDown)
 	}
 	dispose() {
 		this.removeEvents()