深度画布

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -6,7 +6,12 @@
 		<layer-panel />
 		<details-panel />
 		<header-tools />
-		<zoom :zoom="1" :step="0.1" is-home />
+		<zoom
+			:zoom="canvasManager.currentZoom.value / 100"
+			:step="0.1"
+			is-home
+			@home="() => canvasManager.resetZoom()"
+		/>
 	</div>
 </template>
 
@@ -23,9 +28,8 @@
 	// 管理器
 	import { StateManager } from './manager/StateManager'
 	import { EventManager } from './manager/EventManager'
-	import { FlowManager } from './manager/FlowManager'
-	import { NodeManager } from './manager/NodeManager'
-	import { ToolManager, TOOLS } from './manager/ToolManager'
+	import { CanvasManager } from './manager/CanvasManager'
+	import { ToolManager } from './manager/ToolManager'
 
 	const canvasContainerRef = ref(null)
 	const canvasRef = ref(null)
@@ -41,77 +45,51 @@
 	const stateManager = new StateManager({})
 	provide('stateManager', stateManager)
 
+	// 画布管理器
+	const canvasManager = new CanvasManager({ stateManager })
+	stateManager.setManager({ canvasManager, canvasRef })
+	provide('canvasManager', canvasManager)
+
 	// 事件管理器
 	const eventManager = new EventManager({ stateManager })
 	stateManager.setManager({ eventManager })
 	provide('eventManager', eventManager)
 
-	// 流程管理器
-	const flowManager = new FlowManager({ stateManager })
-	stateManager.setManager({ flowManager })
-	provide('flowManager', flowManager)
-
-	// 节点管理器
-	const nodeManager = new NodeManager({ stateManager })
-	stateManager.setManager({ nodeManager })
-	provide('nodeManager', nodeManager)
-
 	// 工具管理器
-	const toolManager = new ToolManager({ stateManager })
+	const toolManager = new ToolManager({ stateManager, canvasManager })
 	stateManager.setManager({ toolManager })
 	provide('toolManager', toolManager)
-	const initCanvas = () => {
-		console.log('OverallCanvas: initCanvas')
-		const canvasViewWidth = canvasContainerRef.value.clientWidth
-		const canvasViewHeight = canvasContainerRef.value.clientHeight
-		const canvasWidth = 750
-		const canvasHeight = 600
-		const canvas = new fabric.Canvas(canvasRef.value, {
-			selection: true,
-			width: canvasViewWidth,
-			height: canvasViewHeight,
-			imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
-			imageSmoothingQuality: 'high', // 设置高质量图像平滑
-			preserveObjectStacking: true,
-			enableRetinaScaling: true,
-			stopContextMenu: true,
-			fireRightClick: true,
-			backgroundColor: '#fff'
-		})
-		canvas.clipPath = new fabric.Rect({
-			left: 0,
-			top: 0,
-			width: canvasWidth,
-			height: canvasHeight
-		})
-		// 画布居中
-		const canvasX = canvasViewWidth / 2 - canvasWidth / 2
-		const canvasY = canvasViewHeight / 2 - canvasHeight / 2
-		canvas.viewportTransform = [1, 0, 0, 1, canvasX, canvasY]
-		// 创建矩形
-		const rect = new fabric.Rect({
-			left: 20,
-			top: 20,
-			width: 100,
-			height: 100,
-			fill: '#f00'
-		})
-		canvas.add(rect)
-		//创建圆形
-		const circle = new fabric.Circle({
-			left: 200,
-			top: 200,
-			radius: 50,
-			fill: '#0f0'
-		})
-		canvas.add(circle)
-	}
+
+	const observer = ref(null)
 	onMounted(() => {
-		initCanvas()
+		canvasManager.initCanvas({
+			canvasRef,
+			canvasViewWidth: canvasContainerRef.value.clientWidth,
+			canvasViewHeight: canvasContainerRef.value.clientHeight,
+			canvasWidth: 750,
+			canvasHeight: 600
+		})
+
+		const trailingTimeout = ref(null)
+		observer.value = new ResizeObserver((entries) => {
+			clearTimeout(trailingTimeout.value)
+			trailingTimeout.value = setTimeout(async () => {
+				handleWindowResize()
+			}, 100)
+		})
+		observer.value.observe(canvasContainerRef.value)
 	})
 	onBeforeMount(() => {
 		// eventManager.removeEvents() // 移除事件
 	})
+	async function handleWindowResize() {
+		console.log('==========画布窗口大小变化==========')
+		canvasManager.setCanvasViewSize({
+			canvasViewWidth: canvasContainerRef.value.clientWidth,
+			canvasViewHeight: canvasContainerRef.value.clientHeight
+		})
+		canvasManager.resetZoom()
+	}
 </script>
 <style lang="less">
 	@import '@vue-flow/core/dist/style.css';