深度画布功能

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

@@ -3,35 +3,40 @@
 		<div class="canvas-container" ref="canvasContainerRef">
 			<canvas ref="canvasRef"></canvas>
 		</div>
-		<layer-panel />
-		<details-panel />
-		<header-tools @export="exportCanvas" />
-		<zoom
-			:zoom="canvasManager.currentZoom.value / 100"
-			:step="0.1"
-			is-home
-			@home="() => canvasManager.resetZoom()"
-		/>
+		<template v-if="isReady">
+			<layer-panel />
+			<details-panel />
+			<depth-header-tools @export="exportCanvas" @import="importCanvas" />
+			<brush-control-panel :currentTool="toolManager.currentTool.value" />
+			<zoom
+				:zoom="canvasManager.currentZoom.value / 100"
+				:step="0.1"
+				is-home
+				@home="() => canvasManager.resetZoom()"
+			/>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { fabric } from 'fabric-with-all'
 	import { computed, ref, markRaw, onMounted, nextTick, provide, onBeforeMount } from 'vue'
-	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
+	import { OperationType } from './tools/layerHelper'
 	// 组件
 	import layerPanel from './components/layer-panel/index.vue'
 	import detailsPanel from './components/details-panel/index.vue'
-	import headerTools from './components/header-tools.vue'
+	import depthHeaderTools from './components/depth-header-tools.vue'
 	import zoom from '../components/zoom.vue'
+	import brushControlPanel from './components/brush-control-panel.vue'
 
 	// 管理器
 	import { StateManager } from './manager/StateManager'
 	import { LayerManager } from './manager/LayerManager'
-	import { EventManager } from './manager/EventManager'
 	import { CanvasManager } from './manager/CanvasManager'
 	import { ToolManager } from './manager/ToolManager'
 
+	// 准备就绪
+	const isReady = ref(false)
 	const canvasContainerRef = ref(null)
 	const canvasRef = ref(null)
 
@@ -56,11 +61,6 @@
 	stateManager.setManager({ layerManager })
 	provide('layerManager', layerManager)
 
-	// 事件管理器
-	const eventManager = new EventManager({ stateManager })
-	stateManager.setManager({ eventManager })
-	provide('eventManager', eventManager)
-
 	// 工具管理器
 	const toolManager = new ToolManager({ stateManager, canvasManager })
 	stateManager.setManager({ toolManager })
@@ -75,6 +75,10 @@
 			canvasWidth: 750,
 			canvasHeight: 600
 		})
+		stateManager?.onMounted?.()
+		canvasManager?.onMounted?.()
+		layerManager?.onMounted?.()
+		toolManager?.onMounted?.()
 
 		const trailingTimeout = ref(null)
 		observer.value = new ResizeObserver((entries) => {
@@ -84,10 +88,10 @@
 			}, 100)
 		})
 		observer.value.observe(canvasContainerRef.value)
+
+		isReady.value = true // 准备就绪
 	})
-	onBeforeMount(() => {
-		// eventManager.removeEvents() // 移除事件
-	})
+	onBeforeMount(() => {})
 	async function handleWindowResize() {
 		console.log('==========画布窗口大小变化==========')
 		canvasManager.setCanvasViewSize({
@@ -96,8 +100,42 @@
 		})
 		canvasManager.resetZoom()
 	}
+	/** 导入本地图片 */
+	const importLocalImage = () => {
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.accept = 'image/*'
+		input.click()
+		input.addEventListener('change', (e: any) => {
+			const file = e.target.files[0]
+			if (!file) return
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = () => {
+				toolManager.setTool(OperationType.SELECT)
+				const url = reader.result as string
+				layerManager.createImageLayer(url, {
+					info: { name: file.name }
+				})
+			}
+		})
+	}
+	provide('importLocalImage', importLocalImage)
+
 	const exportCanvas = () => {
-		console.log(canvasManager.getBitObjects())
+		const json = canvasManager.getCanvasJSON()
+		localStorage.setItem('canvasJSON', json)
+	}
+	const importCanvas = () => {
+		const json = localStorage.getItem('canvasJSON')
+		if (!json) return
+		canvasManager.loadJSON(json, (success) => {
+			if (success) {
+				console.log('导入成功')
+			} else {
+				console.log('导入失败')
+			}
+		})
 	}
 </script>
 <style lang="less">