FiDA_Front/src/components/Canvas/FlowCanvas/index.vue

<template>
	<fullscreen-dialog v-model="dialogVisible">
		<div class="flow-canvas">
			<VueFlow
				ref="vueFlow"
				:nodes="nodes"
				:edges="edges"
				:nodes-draggable="true"
				@nodes-initialized="layoutGraph('LR')"
				@node-drag-stop="handleNodeDragStop"
			>
				<template #node-InputNode="nodeProps">
					<inputNode v-bind="nodeProps">
						<template v-slot:content>
							<component
								:is="nodeProps.data.component"
								:type="nodeProps.data.type_"
							/>
						</template>
					</inputNode>
				</template>
				<template #node-SecondaryNode="nodeProps">
					<secondaryNode v-bind="nodeProps">
						<template v-slot:content>
							<component
								:is="nodeProps.data.component"
								:type="nodeProps.data.type_"
							/>
						</template>
					</secondaryNode>
				</template>
			</VueFlow>
		</div>
	</fullscreen-dialog>
</template>

<script setup lang="ts">
	import { VueFlow, useVueFlow } from '@vue-flow/core'
	import { useLayout } from '@/utils/treeDiagram'
	import secondaryNode from '../components/node/secondaryNode.vue'
	import inputNode from '../components/node/InputNode.vue'
	import FullscreenDialog from '../components/fullscreen-dialog.vue'
	import card from './components/cards/index.vue'
	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
	import { useGlobalStore } from '@/stores'
	const globalStore = useGlobalStore()
	const dialogVisible = ref(false)
	const position = { x: 0, y: 0 }

	const nodes = ref<any[]>([
		{
			id: '1',
			type: 'InputNode',
			class: 'custom-node start',
			position: { x: 0, y: 0 },
			data: { component: card, type_: 'to-real-style' }
		},
		{
			id: '2',
			type: 'SecondaryNode',
			class: 'custom-node',
			position: { x: 0, y: 0 },
			data: { component: card, type_: 'scene-composition' }
		},
		{
			id: '3',
			type: 'SecondaryNode',
			class: 'custom-node',
			position: { x: 0, y: 0 },
			data: { component: card, type_: 'to-3d-model' }
		}
	])
	const edges = computed(() => {
		const arr = []
		nodes.value.forEach((node, index) => {
			if (index < nodes.value.length - 1) {
				const id = node.id
				const target = nodes.value[index + 1].id
				arr.push({
					id: `el-${id}-${target}`,
					source: id,
					target: target,
					type: 'smoothstep'
				})
			}
		})
		return arr
	})
	const vueFlow = ref<any>()
	onMounted(() => {
		window.vueFlow = vueFlow
		window.nodes = nodes
		window.test = () => {
			return vueFlow.value
		}
		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: '4',
				type: 'SecondaryNode',
				class: 'custom-node',
				data: { id: '主 1', component: card, type_: 'to-3d-model' },
				position: {
					x: width + x + 50,
					y: y
				}
			})
		}
	})
	const handleNodeDragStop = (e: any) => {
		const { node } = e
		const { id, position } = node
		nodes.value.forEach((item) => {
			if (item.id === id) {
				item.position.x = position.x
				item.position.y = position.y
			}
		})
	}
	const { fitView } = useVueFlow()
	const { layout } = useLayout()
	const index = ref(0)
	async function layoutGraph(direction) {
		if (index.value > 0) return
		index.value++
		setTimeout(() => {
			nodes.value = layout(nodes.value, edges.value, direction)
			console.log(nodes.value)
			nextTick(() => {
				fitView()
			})
		}, 0)
	}
</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>