111

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
-import { exportObjectsToImage } from '../tools/exportMethod'
+import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
 import { OperationType } from '../tools/layerHelper'
 
 export class LayerManager {
@@ -18,22 +18,22 @@ export class LayerManager {
 	setActiveID(id: string, isActive = true) {
 		this.activeID.value = id
 		if (isActive) {
-			this.canvasManager.setActiveObjectByID(id)
+			this.canvasManager.setActiveObjectById(id)
 			this.stateManager.toolManager.setTool(OperationType.SELECT)
 		}
 	}
-	getLayerByID(id) {
+	getLayerById(id) {
 		return this.layers.value.find((item: any) => item.info.id === id)
 	}
-	setLayerNameByID(id, name: string) {
-		const layer = this.getLayerByID(id)
+	setLayerNameById(id, name: string) {
+		const layer = this.getLayerById(id)
 		if (layer) {
 			layer.info.name = name
 			this.canvasManager.renderAll()
 		}
 	}
-	setLayerVisibleByID(id, visible: boolean) {
-		const layer = this.getLayerByID(id)
+	setLayerVisibleById(id, visible: boolean) {
+		const layer = this.getLayerById(id)
 		if (layer) {
 			layer.set({
 				visible: visible
@@ -41,7 +41,7 @@ export class LayerManager {
 			this.canvasManager.renderAll()
 		}
 	}
-	deleteLayerByID(id, isActive = true) {
+	deleteLayerById(id, isActive = true) {
 		this.canvasManager.deleteObjectById(id)
 		if (id === this.activeID.value && isActive) {
 			this.setActiveID(this.layers.value[0]?.info?.id || "")
@@ -54,18 +54,10 @@ export class LayerManager {
 	}
 	// 更新图层列表
 	updateLayers() {
-		this.layers.value = this.canvasManager.getObjects().filter((v: any) => !!v?.info?.id).reverse()
-		window["layers"] = this.layers
-	}
-	// 更新图层参数
-	updateLayerParams(layer, keys = []) {
-		this.layers.value.forEach((item: any) => {
-			if (item.info.id === layer.info.id) {
-				keys.forEach((key: string) => {
-					item.set(key, layer[key])
-				})
-			}
-		})
+		this.layers.value = this.canvasManager.getObjects()
+			.filter((v: any) => !!v?.info?.id)
+			.reverse()
+			.map(v => v.toObject())
 	}
 
 	/** 设置图层位置-不设置默认居中 */
@@ -202,7 +194,7 @@ export class LayerManager {
 		})
 		// console.log(mergedImage)
 		const index = this.canvasManager.getObjects().indexOf(targetLayer);
-		this.deleteLayerByID(targetLayer.info.id, false)
+		this.deleteLayerById(targetLayer.info.id, false)
 		this.setActiveID(mergedImage.info.id, false)
 		this.canvasManager.add(mergedImage, false);
 		this.canvasManager.canvas.moveTo(mergedImage, index);
@@ -219,5 +211,19 @@ export class LayerManager {
 			})
 		})
 	}
+	/** 更新图层缩略图 */
+	async updateLayerThumbnailsById(id: string) {
+		const object = this.canvasManager.getObjectById(id);
+		if (!object) return;
+		const url = await exportObjectToThumbnail(object);
+		object.set({
+			thumbnail: url
+		})
+		// object.thumbnail = url
+		this.updateLayers()
+		// this.canvasManager.renderAll()
+
+	}
+
 	dispose() { }
 }