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

<template>
	<fullscreen-dialog v-model="dialogVisible">
		<div class="flow-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>
		</div>
	</fullscreen-dialog>
</template>

<script setup lang="ts">
	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 { 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>

<style lang="less" scoped>
	.flow-canvas {
		width: 100%;
		height: 100%;
		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;
			}
		}
	}
</style>