fix

src/components/Canvas/FlowCanvas/index.vue

@@ -1,151 +1,25 @@
 <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 v-model="dialogVisible" hide-destroy>
+		<flow-canvas />
 	</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()
+	import flowCanvas from './flow-canvas.vue'
+	import { ref } from 'vue'
 	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 open = () => {
+		console.log('open')
+		dialogVisible.value = true
 	}
-	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)
+	const close = () => {
+		dialogVisible.value = false
 	}
+	defineExpose({
+		open,
+		close
+	})
 </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>