fix

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

@@ -0,0 +1,116 @@
+<template>
+	<div class="flow-canvas">
+		<VueFlow
+			ref="vueFlow"
+			:nodes="nodes"
+			:edges="edges"
+			:min-zoom="0.1"
+			:max-zoom="10"
+			:nodes-draggable="true"
+			@nodes-initialized="layoutGraph('LR')"
+			@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
+			@viewport-change="(e) => eventManager.handleViewportChange(e)"
+		>
+			<template #node-InputNode="nodeProps">
+				<node type="InputNode">
+					<component :is="nodeProps.data.component" v-bind="nodeProps.data" />
+				</node>
+			</template>
+			<template #node-SecondaryNode="nodeProps">
+				<node type="SecondaryNode">
+					<component :is="nodeProps.data.component" v-bind="nodeProps.data" />
+				</node>
+			</template>
+		</VueFlow>
+	</div>
+	<header-tools />
+	<zoom
+		:zoom="stateManager.zoom.value"
+		:step="0.1"
+		@add="(e) => flowManager.setZoom(e)"
+		@sub="(e) => flowManager.setZoom(e)"
+	/>
+</template>
+
+<script setup lang="ts">
+	import { VueFlow, useVueFlow } from '@vue-flow/core'
+	import { useLayout } from '@/utils/treeDiagram'
+	// 组件
+	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 { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
+
+	// 管理器
+	import { StateManager } from './manager/StateManager'
+	import { EventManager } from './manager/EventManager'
+	import { FlowManager } from './manager/FlowManager'
+
+	const vueFlow = ref<any>()
+
+	const stateManager = new StateManager({ vueFlow })
+	const nodes = computed(() => stateManager.nodes.value)
+	const edges = computed(() => stateManager.edges.value)
+	const eventManager = new EventManager({
+		stateManager,
+		vueFlow
+	})
+	const flowManager = new FlowManager({
+		stateManager,
+		vueFlow
+	})
+
+	const { fitView } = useVueFlow()
+	const { layout } = useLayout()
+	const index = ref(0)
+	async function layoutGraph(direction) {
+		if (index.value > 0) return
+		index.value++
+		setTimeout(() => {
+			stateManager.nodes.value = layout(
+				stateManager.nodes.value,
+				stateManager.edges.value,
+				direction
+			)
+			nextTick(() => {
+				fitView()
+			})
+		}, 0)
+	}
+
+	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
+				}
+			})
+		}
+	})
+</script>
+<style lang="less">
+	@import '@vue-flow/core/dist/style.css';
+	@import '@vue-flow/core/dist/theme-default.css';
+</style>
+<style lang="less" scoped>
+	.flow-canvas {
+		width: 100%;
+		height: 100%;
+		> .vue-flow {
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>