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

<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" :isAdd="lastNode.id === nodeProps.id">
					<component :is="nodeProps.data.component" 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>
			</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 resultImage from './components/result/result-image.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'
	import { NodeManager } from './manager/NodeManager'

	const vueFlow = ref<any>()

	// 状态管理器
	const stateManager = new StateManager({ vueFlow })
	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 })
	// 流程管理器
	const flowManager = new FlowManager({ stateManager, vueFlow })
	// 节点管理器
	const nodeManager = new NodeManager({ stateManager, vueFlow })
	stateManager.setManager({
		eventManager,
		flowManager,
		nodeManager
	})

	nodeManager.createNode({
		type: 'InputNode',
		class: 'custom-node start',
		component: resultImage,
		data: {}
	})

	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>