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,
+			canvasWidth: props.config.width || 750,
-			canvasHeight: 600
+			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()

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -64,7 +64,7 @@
 
 <script setup lang="ts">
 	import { VueFlow, useVueFlow } from '@vue-flow/core'
-	import { computed, ref, watch, onMounted, nextTick, provide, onBeforeMount } from 'vue'
+	import { computed, ref, watch, onMounted, nextTick, provide, onBeforeMount, onBeforeUnmount } from 'vue'
 	import { useLayout } from '@/utils/treeDiagram'
 	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
 	// 组件
@@ -252,7 +252,7 @@
 			})
 		}
 	})
-	onBeforeMount(() => {
+	onBeforeUnmount(() => {
 		stateManager.dispose()
 		eventManager.dispose()
 		flowManager.dispose()

src/components/Canvas/FlowCanvas/manager/EventManager.ts

@@ -7,6 +7,7 @@ export class EventManager {
 		this.stateManager = options.stateManager;
 		this.vueFlow = options.vueFlow
 		this.zoom = this.stateManager.zoom
+		this._handleKeyDown = this.handleKeyDown.bind(this)
 	}
 	/** 处理视口变化 */
 	handleViewportChange(e: any) {
@@ -53,6 +54,7 @@ export class EventManager {
 		this.stateManager.deleteNode(activeNodeID, { isElMessageBox: true })
 	}
 	/** 处理键盘事件 */
+	_handleKeyDown: any
 	handleKeyDown(event: any) {
 		const activeNodeID = this.stateManager.activeNodeID.value;
 		// const shiftKey
@@ -73,12 +75,12 @@ export class EventManager {
 	/** 注册事件 */
 	registerEvents() {
 		// document.addEventListener('copy', this.handleCopy.bind(this))
-		document.addEventListener('keydown', this.handleKeyDown.bind(this))
+		document.addEventListener('keydown', this._handleKeyDown)
 	}
 	/** 删除事件 */
 	removeEvents() {
 		// document.removeEventListener('copy', this.handleCopy.bind(this))
-		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
+		document.removeEventListener('keydown', this._handleKeyDown)
 	}
 	dispose() {
 		this.removeEvents()