画布

src/components/Canvas/FlowCanvas/index.vue

@@ -1,100 +1,151 @@
 <template>
 	<fullscreen-dialog v-model="dialogVisible">
 		<div class="flow-canvas">
-			<div
-				class="canvas-main"
-				ref="canvasMain"
-				@mousedown="onMouseDown"
-				@wheel="onMouseWheel"
+			<VueFlow
+				ref="vueFlow"
+				:nodes="nodes"
+				:edges="edges"
+				:nodes-draggable="true"
+				@nodes-initialized="layoutGraph('LR')"
+				@node-drag-stop="handleNodeDragStop"
 			>
-				<div
-					class="canvas-content"
-					:style="{
-						top: `${data.y}px`,
-						left: `${data.x}px`,
-						transform: `scale(${data.scale})`
-					}"
-				>
-					<card type="to-real-style" />
-					<card type="scene-composition" />
-					<card type="color-palette" />
-					<card type="to-video" />
-					<card type="to-3d-model" />
-					<card type="to-cad" />
-					<card type="add-print" />
-					<card type="edit-material" />
-				</div>
-			</div>
+				<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 MyInfo from '@/components/MyInfo.vue'
 	import card from './components/cards/index.vue'
-	import { computed, ref, markRaw, onMounted, reactive } from 'vue'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
 	import { useGlobalStore } from '@/stores'
 	const globalStore = useGlobalStore()
-	const dialogVisible = ref(true)
-	window.dialogVisible = dialogVisible
-	const data = reactive({
-		x: 100,
-		y: 200,
-		scale: 1
-	})
-	const canvasMain = ref<HTMLDivElement>()
-	const onMouseDown = (e: MouseEvent) => {
-		if (e.button !== 1) return
-		const ox = data.x
-		const oy = data.y
-		const X = e.clientX
-		const Y = e.clientY
-		const onMouseMove = (e: MouseEvent) => {
-			const dx = e.clientX - X
-			const dy = e.clientY - Y
-			data.x = ox + dx
-			data.y = oy + dy
-		}
-		const onMouseUp = (e: MouseEvent) => {
-			document.removeEventListener('mousemove', onMouseMove)
-			document.removeEventListener('mouseup', onMouseUp)
-		}
-		document.addEventListener('mousemove', onMouseMove)
-		document.addEventListener('mouseup', onMouseUp)
-	}
-	const onMouseWheel = (e: WheelEvent) => {
-		var delta = e.deltaY
-		var scale = data.scale - delta / 1000
-		if (scale < 0.2) scale = 0.2
-		if (scale > 10) scale = 10
-		data.scale = scale
-	}
-	onMounted(() => {
-		globalStore.setHomeLeftNavCollapse(true)
-	})
-</script>
+	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%;
-		background-color: #fcf8f1;
-		position: relative;
-		overflow: hidden;
-		> .canvas-main {
+		> .vue-flow {
 			width: 100%;
 			height: 100%;
-			position: relative;
-			> .canvas-content {
-				position: absolute;
-				width: auto;
-				height: auto;
-				display: flex;
-				align-items: flex-start;
-				gap: 5rem;
-				transform-origin: top left;
-			}
 		}
 	}
 </style>