fix

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

@@ -6,18 +6,32 @@
 			:edges="edges"
 			:min-zoom="0.1"
 			:max-zoom="10"
-			:nodes-draggable="true"
+			:nodes-draggable="nodesDraggable"
+			:pan-on-drag="panOnDrag"
 			@nodes-initialized="layoutGraph('LR')"
 			@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
 			@viewport-change="(e) => eventManager.handleViewportChange(e)"
+			@pane-click="(e) => eventManager.handleClick(e)"
+			:class="{ 'custom-cursor': !!stateManager.cursor.value }"
+			:style="{ '--custom-cursor': stateManager.cursor.value }"
 		>
-			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="nodeProps">
-				<node :type="v" :stateManager="stateManager" :node="nodeProps">
+			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="node">
+				<node
+					:type="v"
+					:stateManager="stateManager"
+					:node="node"
+					:mask="
+						stateManager.tool.value === TOOLS.MOVE ||
+						stateManager.tool.value === TOOLS.TEXT
+					"
+				>
 					<component
-						:is="components[nodeProps.data.component]"
-						:node="nodeProps"
-						:data="nodeProps.data.data"
-						v-bind="nodeProps.data"
+						:is="components[node.data.component]"
+						:node="node"
+						:data="node.data.data"
+						v-bind="node.data"
+						@delete-node="deleteNode(node.id)"
+						@copy-node="copyNode(node.id)"
 					/>
 				</node>
 			</template>
@@ -44,11 +58,13 @@
 	import zoom from '../components/zoom.vue'
 	// 节点
 	import node from './components/node.vue'
-	import resultImage from './components/result/result-image.vue'
-	import card from './components/cards/index.vue'
+	import resultImage from './components/nodes/result-image.vue'
+	import card from './components/nodes/cards/index.vue'
+	import text from './components/nodes/text.vue'
 	const components = {
 		[NODE_COMPONENT.RESULT_IMAGE]: resultImage,
-		[NODE_COMPONENT.CARD]: card
+		[NODE_COMPONENT.CARD]: card,
+		[NODE_COMPONENT.TEXT]: text
 	}
 
 	// 管理器
@@ -56,6 +72,7 @@
 	import { EventManager } from './manager/EventManager'
 	import { FlowManager } from './manager/FlowManager'
 	import { NodeManager } from './manager/NodeManager'
+	import { ToolManager, TOOLS } from './manager/ToolManager'
 
 	const props = defineProps({
 		config: {
@@ -65,29 +82,36 @@
 	})
 
 	const vueFlow = ref<any>()
-	const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT])
+	const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT, NODE_TYPE.ALONE])
 
 	// 状态管理器
 	const stateManager = new StateManager({ vueFlow })
-	const nodes = computed(() => stateManager.nodes_.value)
-	const edges = computed(() => stateManager.edges.value)
+	provide('stateManager', stateManager)
+
 	// 事件管理器
 	const eventManager = new EventManager({ stateManager, vueFlow })
+	stateManager.setManager({ eventManager })
+	provide('eventManager', eventManager)
+
 	// 流程管理器
 	const flowManager = new FlowManager({ stateManager, vueFlow })
+	stateManager.setManager({ flowManager })
+	provide('flowManager', flowManager)
+
 	// 节点管理器
 	const nodeManager = new NodeManager({ stateManager, vueFlow })
-	stateManager.setManager({
-		eventManager,
-		flowManager,
-		nodeManager
-	})
+	stateManager.setManager({ nodeManager })
+	provide('nodeManager', nodeManager)
 
-	provide('stateManager', stateManager)
-	provide('eventManager', eventManager)
-	provide('flowManager', flowManager)
-	provide('nodeManager', nodeManager)
-	provide('nodeManager', nodeManager)
+	// 工具管理器
+	const toolManager = new ToolManager({ stateManager, vueFlow })
+	stateManager.setManager({ toolManager })
+	provide('toolManager', toolManager)
+
+	const nodes = computed(() => stateManager.nodes_.value)
+	const edges = computed(() => stateManager.edges.value)
+	const nodesDraggable = computed(() => stateManager.nodesDraggable.value)
+	const panOnDrag = computed(() => stateManager.panOnDrag.value)
 
 	const { fitView } = useVueFlow()
 	const { layout } = useLayout()
@@ -107,6 +131,15 @@
 		}, 0)
 	}
 
+	/** 删除节点 */
+	const deleteNode = (id) => {
+		nodeManager.deleteNode(id)
+	}
+	/** 复制节点 */
+	const copyNode = (id) => {
+		console.log('复制：', id)
+	}
+
 	// 导出流程
 	const exportFlow = () => {
 		// flowManager.exportFlow()
@@ -156,6 +189,9 @@
 		> .vue-flow {
 			width: 100%;
 			height: 100%;
+			&.custom-cursor {
+				cursor: var(--custom-cursor, pointer);
+			}
 		}
 	}
 </style>