FiDA_Front/src/components/Canvas/CanvasTest.vue

<template>
	<div class="canvas-test">
		<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})`
				}"
			>

				<result-image />

				<card type="cards-select" />

				<card type="to-real-style" />
				<card type="surface-edit" />

				<card type="scene-composition" />
				<card type="color-palette" />
				<card type="to-3d-model" />

				<card type="to-3view" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import card from './FlowCanvas/components/cards/index.vue'
	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
	const data = reactive({
		x: 100,
		y: 200,
		scale: 1
	})
	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
	}
</script>
<style lang="less" scoped>
	.canvas-test {
		// overflow-y: auto;
		// display: flex;
		// flex-wrap: wrap;
		// align-content: flex-start;
		// align-items: flex-start;
		// padding: 2rem;
		// gap: 2rem;

		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;
			}
		}
		> .vue-flow {
			width: 100%;
			height: 100%;
		}
	}
</style>