fix

src/views/canvas1/index.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="canvas">
+		<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
+			<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> -->
+
+		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
+			<template #node-InputNode="nodeProps">
+				<inputNode v-bind="nodeProps" >
+					<template v-slot:content>{{ nodeProps.type }}
+						<card type="to-real-style" />
+					</template> 	
+				</inputNode>
+			</template>
+			<template #node-SecondaryNode="nodeProps">
+				<secondaryNode v-bind="nodeProps" >
+					<template v-slot:content>
+						<card type="scene-composition" />
+					</template> 
+				</secondaryNode>
+			</template>
+		</VueFlow>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import card from './components/cards/index.vue'
+	import { useLayout } from '@/utils/treeDiagram'
+	import { VueFlow, useVueFlow } from '@vue-flow/core'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	import secondaryNode from './components/node/secondaryNode.vue'
+	import inputNode from './components/node/InputNode.vue'
+	const globalStore = useGlobalStore()
+	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
+	}
+	const position = { x: 0, y: 0 }
+
+	const nodes = ref<Node[]>([
+		  { id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
+		  { id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
+	])
+	const edges = ref<Edge[]>([
+		  { id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
+	])
+	const { fitView } = useVueFlow()
+	const { layout } = useLayout()
+	async function layoutGraph(direction) {
+		setTimeout(() => {
+			nodes.value = layout(nodes.value, edges.value, direction)
+			console.log(nodes.value)
+			nextTick(() => {
+				fitView()
+			})
+		}, 0)
+	}
+
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+</script>
+<style lang="less">
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
+</style>
+<style lang="less" scoped>
+	.canvas {
+		// overflow-y: auto;
+		// display: flex;
+		// flex-wrap: wrap;
+		// align-content: flex-start;
+		// align-items: flex-start;
+		// padding: 2rem;
+		// gap: 2rem;
+		background-color: #fcf8f1;
+		position: relative;
+		overflow: hidden;
+		> .canvas-main {
+			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;
+			}
+		}
+		> .vue-flow{
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>