深度画布缩略图

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

@@ -52,7 +52,8 @@ export class CanvasManager {
 		this.canvas.setWidth(this.canvasViewWidth)
 		this.canvas.setHeight(this.canvasViewHeight)
 	}
-	initCanvas(options: CanvasInitOptions) {
+	/** 初始化画布 */
+	async initCanvas(options: CanvasInitOptions) {
 		this.layerManager = this.stateManager.layerManager
 		this.canvasWidth = options.canvasWidth || 750
 		this.canvasHeight = options.canvasHeight || 600
@@ -84,29 +85,35 @@ export class CanvasManager {
 		this.setupCanvasEvents()
 		this.setupBrushEvents()
 
+
+		this.stateManager.setIsRecord(false)
 		// 创建矩形
-		const rect = this.layerManager.createRectLayer({
+		const rect = await this.layerManager.createRectLayer({
 			left: 400,
 			top: 100,
 		})
 		//创建圆形
-		const circle = this.layerManager.createCircleLayer({
+		const circle = await this.layerManager.createCircleLayer({
 			left: 200,
 			top: 200,
 		})
 		// 文字
-		const text = this.layerManager.createTextLayer('Hello World');
+		const text = await this.layerManager.createTextLayer('Hello World');
 		this.layerManager.updateLayers()
 		this.layerManager.setActiveID(text.info.id)
+		this.stateManager.setIsRecord(true)
 		this.stateManager.recordState()
 		// this.stateManager.toolManager.setTool(OperationType.RECTANGLE)
 	}
 	/** 画布添加对象 */
-	add(obj: any, isUpdate = true) {
+	async add(obj: any, isUpdate = true) {
 		this.canvas.add(obj)
+		const id = obj?.info?.id || ""
 		if (isUpdate) {
 			this.layerManager.updateLayers()
 			this.renderAll()
+			if (id) await this.layerManager.updateLayerThumbnailsById(id)
+			this.stateManager.recordState()
 		}
 	}
 	/** 画布移除对象 */
@@ -134,7 +141,6 @@ export class CanvasManager {
 	/** 设置激活对象 */
 	setActiveObjectById(id: string) {
 		const obj = this.getObjectById(id)
-		console.log(obj)
 		if (obj) this.canvas.setActiveObject(obj)
 		this.renderAll()
 	}
@@ -164,12 +170,7 @@ export class CanvasManager {
 		this.canvas.moveTo(this.getObjectById(id), newIndex)
 		this.layerManager.updateLayers()
 		this.renderAll()
-	}
-	getBitObjects() {
-		return this.getObjects().map(v => {
-			const object = v.toJSON("info");
-			return object
-		})
+		this.stateManager.recordState()
 	}
 
 	/** 画笔事件 */
@@ -189,7 +190,7 @@ export class CanvasManager {
 		if (activeLayer) {
 			this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
 		} else {
-			const emptyLayer = this.layerManager.createEmptyLayer();
+			const emptyLayer = this.layerManager.createEmptyLayer(false);
 			this.layerManager.setActiveID(emptyLayer.info.id, false)
 			this.layerManager.imageMergeToLayer(emptyLayer, fabricImage)
 		}