深度画布缩略图

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

@@ -29,13 +29,21 @@ export class LayerManager {
 		const layer = this.getLayerById(id)
 		if (layer) {
 			layer.info.name = name
+		}
+		const object = this.canvasManager.getObjectById(id)
+		if (object) {
+			object.info.name = name
 			this.canvasManager.renderAll()
 		}
 	}
 	setLayerVisibleById(id, visible: boolean) {
 		const layer = this.getLayerById(id)
 		if (layer) {
-			layer.set({
+			layer.visible = visible
+		}
+		const object = this.canvasManager.getObjectById(id)
+		if (object) {
+			object.set({
 				visible: visible
 			})
 			this.canvasManager.renderAll()
@@ -46,6 +54,7 @@ export class LayerManager {
 		if (id === this.activeID.value && isActive) {
 			this.setActiveID(this.layers.value[0]?.info?.id || "")
 		}
+		if (isActive) this.stateManager.recordState()
 	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
@@ -61,24 +70,24 @@ export class LayerManager {
 	}
 
 	/** 设置图层位置-不设置默认居中 */
-	setLayerPosition(layer, options?: any) {
+	setLayerPosition(object, options?: any) {
 		const width = this.canvasManager.canvasWidth
 		const height = this.canvasManager.canvasHeight
 
 		if (options && options.top !== undefined) {
-			layer.set({ top: options.top })
+			object.set({ top: options.top })
 		} else {
-			layer.set({ top: height / 2 - layer.height * layer.scaleY / 2 })
+			object.set({ top: height / 2 - object.height * object.scaleY / 2 })
 		}
 		if (options && options.left !== undefined) {
-			layer.set({ left: options.left })
+			object.set({ left: options.left })
 		} else {
-			layer.set({ left: width / 2 - layer.width * layer.scaleX / 2 })
+			object.set({ left: width / 2 - object.width * object.scaleX / 2 })
 		}
 	}
 	/** 创建空图层 */
-	createEmptyLayer() {
-		const emptyLayer = new fabric.Rect({
+	createEmptyLayer(isUpdate = true) {
+		const emptyObject = new fabric.Rect({
 			width: 0,
 			height: 0,
 			fill: 'transparent',
@@ -87,13 +96,13 @@ export class LayerManager {
 				name: '空图层',
 			}
 		})
-		this.setLayerPosition(emptyLayer)
-		this.canvasManager.add(emptyLayer)
-		return emptyLayer
+		this.setLayerPosition(emptyObject)
+		this.canvasManager.add(emptyObject, isUpdate)
+		return emptyObject
 	}
 	/** 创建文本图层 */
-	createTextLayer(text: string, options?: any) {
-		const textLayer = new fabric.IText(text, {
+	async createTextLayer(text: string, options?: any) {
+		const textObject = new fabric.IText(text, {
 			fontSize: 24,
 			fill: '#000',
 			...(options || {}),
@@ -103,13 +112,13 @@ export class LayerManager {
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(textLayer, options)
-		this.canvasManager.add(textLayer)
-		return textLayer
+		this.setLayerPosition(textObject, options)
+		await this.canvasManager.add(textObject)
+		return textObject
 	}
 	/** 创建矩形图层 */
-	createRectLayer(options?: any, isActive = false) {
-		const rectLayer = new fabric.Rect({
+	async createRectLayer(options?: any, isActive = false) {
+		const rectObject = new fabric.Rect({
 			width: 100,
 			height: 100,
 			fill: '#000',
@@ -120,14 +129,14 @@ export class LayerManager {
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(rectLayer, options)
-		this.canvasManager.add(rectLayer)
-		if (isActive) this.setActiveID(rectLayer.info.id)
-		return rectLayer
+		this.setLayerPosition(rectObject, options)
+		await this.canvasManager.add(rectObject)
+		if (isActive) this.setActiveID(rectObject.info.id)
+		return rectObject
 	}
 	/** 创建圆形图层 */
-	createCircleLayer(options?: any, isActive = false) {
-		const circleLayer = new fabric.Circle({
+	async createCircleLayer(options?: any, isActive = false) {
+		const circleObject = new fabric.Circle({
 			radius: 50,
 			fill: '#000',
 			...(options || {}),
@@ -137,17 +146,17 @@ export class LayerManager {
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(circleLayer, options)
-		this.canvasManager.add(circleLayer)
-		if (isActive) this.setActiveID(circleLayer.info.id)
-		return circleLayer
+		this.setLayerPosition(circleObject, options)
+		await this.canvasManager.add(circleObject)
+		if (isActive) this.setActiveID(circleObject.info.id)
+		return circleObject
 	}
 	/** 创建图片图层 */
 	async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any) {
 		const canvasWidth = this.canvasManager.canvasWidth
 		const canvasHeight = this.canvasManager.canvasHeight
 
-		const imageLayer = await new Promise((resolve) => {
+		const imageObject = await new Promise((resolve) => {
 			const url = typeof imgOrUrl === 'string' ? imgOrUrl : imgOrUrl.src
 			fabric.Image.fromURL(url, (img) => {
 				const width = img.width
@@ -168,10 +177,10 @@ export class LayerManager {
 				resolve(img)
 			})
 		}) as fabric.Object
-		this.setLayerPosition(imageLayer, options)
-		this.canvasManager.add(imageLayer)
-		this.setActiveID(imageLayer.info.id)
-		return imageLayer
+		this.setLayerPosition(imageObject, options)
+		await this.canvasManager.add(imageObject)
+		this.setActiveID(imageObject.info.id)
+		return imageObject
 	}
 
 
@@ -196,7 +205,7 @@ export class LayerManager {
 		const index = this.canvasManager.getObjects().indexOf(targetLayer);
 		this.deleteLayerById(targetLayer.info.id, false)
 		this.setActiveID(mergedImage.info.id, false)
-		this.canvasManager.add(mergedImage, false);
+		await this.canvasManager.add(mergedImage);
 		this.canvasManager.canvas.moveTo(mergedImage, index);
 		this.canvasManager.renderAll()
 		this.updateLayers()
@@ -216,13 +225,8 @@ export class LayerManager {
 		const object = this.canvasManager.getObjectById(id);
 		if (!object) return;
 		const url = await exportObjectToThumbnail(object);
-		object.set({
-			thumbnail: url
-		})
-		// object.thumbnail = url
+		object.thumbnail = url
 		this.updateLayers()
-		// this.canvasManager.renderAll()
-
 	}
 
 	dispose() { }