添加快捷键

src/components/Canvas/FlowCanvas/components/nodes/result-image.vue

@@ -101,6 +101,9 @@
 		padding: 25px 6px;
 		user-select: none;
 		background-color: #fff;
+		&.active{
+			border-color: #ff7a51;
+		}
 		> .header {
 			position: absolute;
 			top: -20px;

src/components/Canvas/FlowCanvas/components/tools/my-input.vue

@@ -5,7 +5,7 @@
 			<svg-icon :name="icon" :size="iconSize" size-unit="px" />
 		</span>
 		<span v-show="before" class="before">{{ before }}</span>
-		<input v-bind="attrs" :value="modelValue" @input="onInput" />
+		<input v-bind="attrs" :value="modelValue" @input="onInput" @copy.stop @keydown.stop />
 		<span v-show="after" class="after">{{ after }}</span>
 	</div>
 </template>

src/components/Canvas/FlowCanvas/components/tools/my-textarea.vue

@@ -5,6 +5,8 @@
 			:value="modelValue"
 			@input="onInput"
 			@change="onChange"
+			@copy.stop
+			@keydown.stop
 		></textarea>
 		<div class="bths">
 			<button><svg-icon name="mobang" size="10" size-unit="px" /></button>

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

@@ -56,7 +56,7 @@
 
 <script setup lang="ts">
 	import { VueFlow, useVueFlow } from '@vue-flow/core'
-	import { computed, ref, markRaw, onMounted, reactive, nextTick, provide } from 'vue'
+	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeMount } from 'vue'
 	import { useLayout } from '@/utils/treeDiagram'
 	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
 	// 组件
@@ -193,15 +193,9 @@
 				}
 			}
 		})
-		nodeManager.createResultNode({
-			data: {
-				disableDelete: true,
-				isHeader: false,
-				data: {
-					url: props.config.url
-				}
-			}
-		})
+	})
+	onBeforeMount(() => {
+		eventManager.removeEvents() // 移除事件
 	})
 </script>
 <style lang="less">

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.registerEvents()
 	}
 	/** 处理视口变化 */
 	handleViewportChange(e: any) {
@@ -38,4 +39,45 @@ export class EventManager {
 			this.stateManager.toolManager.setTool(TOOLS.SELECT)
 		}
 	}
+
+	/** 处理复制 */
+	handleCopy(event: any, activeNodeID: string) {
+		event.preventDefault()
+		if (!activeNodeID) return console.warn('没有选中节点')
+		this.stateManager.nodeManager.copyNodeById(activeNodeID)
+	}
+	/** 处理删除 */
+	handleDelete(event: any, activeNodeID: string) {
+		event.preventDefault()
+		if (!activeNodeID) return console.warn('没有选中节点')
+		this.stateManager.nodeManager.deleteNode(activeNodeID)
+	}
+	/** 处理键盘事件 */
+	handleKeyDown(event: any) {
+		const activeNodeID = this.stateManager.activeNodeID.value;
+		// const shiftKey
+		const ctrl = event.ctrlKey ? 'ctrl-' : "";
+		const shift = event.shiftKey ? 'shift-' : "";
+		const key = event.key;
+		const reg = new RegExp(`^${ctrl}${shift}${key}$`, 'i')
+		const list = [
+			{ key: "ctrl-c", handler: () => this.handleCopy(event, activeNodeID) },
+			{ key: "delete", handler: () => this.handleDelete(event, activeNodeID) },
+			{ key: "ctrl-z", handler: () => this.stateManager.undoState() },
+			{ key: "ctrl-shift-z", handler: () => this.stateManager.redoState() },
+		]
+		list.forEach((v: any) => {
+			if (reg.test(v.key)) v.handler(event)
+		})
+	}
+	/** 注册事件 */
+	registerEvents() {
+		// document.addEventListener('copy', this.handleCopy.bind(this))
+		document.addEventListener('keydown', this.handleKeyDown.bind(this))
+	}
+	/** 删除事件 */
+	removeEvents() {
+		// document.removeEventListener('copy', this.handleCopy.bind(this))
+		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
+	}
 }

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

@@ -106,7 +106,6 @@ export class NodeManager {
 	copyNodeById(id: string) {
 		const node = this.stateManager.getNodeById(id)
 		const flowNode = this.stateManager.flowManager.getNodeById(id)
-		console.log(node, this.stateManager.flowManager.getNodeById(id))
 		if (!node) return console.warn(`copyNodeById: ${id}找不到对应节点`)
 		const node_ = {
 			...JSON.parse(JSON.stringify(node)),

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

@@ -101,6 +101,9 @@ export class StateManager {
 	}
 	/** 删除节点 */
 	deleteNode(id: string) {
+		const node = this.getNodeById(id)
+		if (!node) return console.warn(`没有找到指定id:${id}`)
+		if (node.data.disableDelete) return console.warn('该节点禁用删除')
 		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
 		this.recordState()
 	}