画布节点创建删除

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

@@ -12,13 +12,21 @@
 			@viewport-change="(e) => eventManager.handleViewportChange(e)"
 		>
 			<template #node-InputNode="nodeProps">
-				<node type="InputNode" :isAdd="lastNode.id === nodeProps.id">
-					<component :is="nodeProps.data.component" v-bind="nodeProps.data" />
+				<node type="InputNode" :stateManager="stateManager" :node="nodeProps">
+					<component
+						:is="nodeProps.data.component"
+						:node="nodeProps"
+						v-bind="nodeProps.data"
+					/>
 				</node>
 			</template>
 			<template #node-SecondaryNode="nodeProps">
-				<node type="SecondaryNode" :isAdd="lastNode.id === nodeProps.id">
-					<component :is="nodeProps.data.component" v-bind="nodeProps.data" />
+				<node type="SecondaryNode" :stateManager="stateManager" :node="nodeProps">
+					<component
+						:is="nodeProps.data.component"
+						:node="nodeProps"
+						v-bind="nodeProps.data"
+					/>
 				</node>
 			</template>
 		</VueFlow>
@@ -39,9 +47,7 @@
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
 	import node from './components/node.vue'
-	import card from './components/cards/index.vue'
-	import resultImage from './components/result/result-image.vue'
-	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick, provide } from 'vue'
 
 	// 管理器
 	import { StateManager } from './manager/StateManager'
@@ -53,9 +59,8 @@
 
 	// 状态管理器
 	const stateManager = new StateManager({ vueFlow })
-	const nodes = computed(() => stateManager.nodes.value)
+	const nodes = computed(() => stateManager.nodes_.value)
 	const edges = computed(() => stateManager.edges.value)
-	const lastNode = computed(() => nodes.value[nodes.value.length - 1])
 	// 事件管理器
 	const eventManager = new EventManager({ stateManager, vueFlow })
 	// 流程管理器
@@ -68,13 +73,11 @@
 		nodeManager
 	})
 
-	nodeManager.createNode({
-		type: 'InputNode',
-		class: 'custom-node start',
-		component: resultImage,
-		data: {}
-	})
-
+	provide('stateManager', stateManager)
+	provide('eventManager', eventManager)
+	provide('flowManager', flowManager)
+	provide('nodeManager', nodeManager)
+	provide('nodeManager', nodeManager)
 	const { fitView } = useVueFlow()
 	const { layout } = useLayout()
 	const index = ref(0)
@@ -88,7 +91,7 @@
 				direction
 			)
 			nextTick(() => {
-				fitView()
+				fitView({ maxZoom: 1 })
 			})
 		}, 0)
 	}
@@ -96,22 +99,9 @@
 	onMounted(() => {
 		window.vueFlow = vueFlow
 		window.nodes = nodes
-		// window.addaaaaa = () => {
-		// 	const lastNode = vueFlow.value.getNode(nodes.value[nodes.value.length - 1].id)
-		// 	const width = lastNode.dimensions.width
-		// 	const x = lastNode.position.x
-		// 	const y = lastNode.position.y
-		// 	nodes.value.push({
-		// 		id: nodes.value.length + 1 + '',
-		// 		type: 'SecondaryNode',
-		// 		class: 'custom-node',
-		// 		data: { component: card, type_: 'to-3d-model' },
-		// 		position: {
-		// 			x: width + x + 50,
-		// 			y: y
-		// 		}
-		// 	})
-		// }
+		nodeManager.createResultNode()
+		// nodeManager.createCardsSelect()
+		// nodeManager.createResultNode()
 	})
 </script>
 <style lang="less">