深度画布-平铺设置

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

@@ -42,6 +42,7 @@
 	import { CanvasManager } from './manager/CanvasManager'
 	import { ToolManager } from './manager/ToolManager'
 	import { KeyEventManager } from './manager/events/KeyEventManager'
+	import { ObjectManager } from './manager/ObjectManager'
 
 	const emit = defineEmits(['close'])
 	const props = defineProps({
@@ -80,6 +81,11 @@
 	stateManager.setManager({ keyEventManager })
 	provide('keyEventManager', keyEventManager)
 
+	// 对象管理器
+	const objectManager = new ObjectManager({ stateManager, canvasManager, layerManager })
+	stateManager.setManager({ objectManager })
+	provide('objectManager', objectManager)
+
 	const observer = ref(null)
 	onMounted(() => {
 		canvasManager.initCanvas({
@@ -89,11 +95,12 @@
 			canvasWidth: 750,
 			canvasHeight: 600
 		})
-		stateManager?.onMounted?.()
-		canvasManager?.onMounted?.()
-		layerManager?.onMounted?.()
-		toolManager?.onMounted?.()
-		keyEventManager?.onMounted?.()
+		stateManager.onMounted()
+		canvasManager.onMounted()
+		layerManager.onMounted()
+		toolManager.onMounted()
+		keyEventManager.onMounted()
+		objectManager.onMounted()
 
 		const trailingTimeout = ref(null)
 		observer.value = new ResizeObserver((entries) => {
@@ -113,6 +120,7 @@
 		layerManager.dispose()
 		toolManager.dispose()
 		keyEventManager.dispose()
+		objectManager.dispose()
 	})
 	async function handleWindowResize() {
 		console.log('==========画布窗口大小变化==========')
@@ -123,23 +131,25 @@
 		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 }
-				})
-			}
+	const importLocalImage = (isRecord = true) => {
+		return new Promise((resolve, reject) => {
+			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 } }, isRecord)
+						.then((v) => resolve(v))
+				}
+			})
 		})
 	}
 	provide('importLocalImage', importLocalImage)