深度画布智能选区

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

@@ -5,11 +5,12 @@ import { AnimationManager } from './AnimationManager'
 import { detectDeviceType } from '../tools/index'
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import { OperationType } from '../tools/layerHelper'
+import { cloneObjects } from '../tools/canvasMethod'
 import { createId } from '../../tools/tools'
 import md5 from 'md5'
 
 // 自定义画布转对象属性
-fabric.Object.prototype.customProperties = ["top", "left", "width", "height", "scaleX", "scaleY", "info", "thumbnail"];
+fabric.Object.prototype.customProperties = ["top", "left", "width", "height", "scaleX", "scaleY", "info", "thumbnail", "absolutePositioned"];
 fabric.Object.prototype.toObject_ = fabric.Object.prototype.toObject
 fabric.Object.prototype.toObject = function () {
 	const args = [...arguments]
@@ -129,9 +130,12 @@ export class CanvasManager {
 
 		/** 测试-开始 */
 		// this.stateManager.setIsRecord(false)
-		// const rect = await this.layerManager.createRectLayer({ left: 200 })
-		// await this.layerManager.createStarLayer({ left: 400 })
-		// await this.layerManager.createArrowLayer({ left: 600 })
+		// const groupObject = await this.layerManager.createGroupLayer()
+		// const parentId = groupObject.info.id
+		// const rect = await this.layerManager.createRectLayer({ left: 200, info: { parentId } })
+		// const star = await this.layerManager.createStarLayer({ left: 400, info: { parentId } })
+		// const arrow = await this.layerManager.createArrowLayer({ left: 600, info: { parentId } })
+		// await this.layerManager.createGroupLayer()
 		// this.layerManager.setActiveID(rect.info.id)
 		// this.stateManager.setIsRecord(true)
 		/** 测试-结束 */
@@ -147,7 +151,7 @@ export class CanvasManager {
 		this.canvas.add(obj)
 		const id = obj?.info?.id || ""
 		if (id) {
-			this.layerManager.updateLayers()
+			await this.layerManager.updateLayers(!!obj.info.parentId)
 			this.renderAll()
 			await this.layerManager.updateLayerThumbnailsById(id)
 		}
@@ -162,6 +166,35 @@ export class CanvasManager {
 		}
 	}
 
+	/** 更新子图层裁剪区域 */
+	async updateSubLayerClipPath() {
+		const objects = this.getObjects().filter((v: any) => v.type !== "group" && !!v.info?.id);
+		for (let i = 0; i < objects.length; i++) {
+			let object = objects[i]
+			if (object.clipPath) object.set({ clipPath: null })
+			let group = this.getObjectById(object.info.parentId)
+			if (!group) continue
+			let path = group.clipPath
+			if (!path) continue
+			let clipPath = await cloneObjects([path]).then((v) => v[0])
+			clipPath.set({
+				absolutePositioned: true,
+			})
+			object.set({ clipPath })
+		}
+		this.renderAll()
+	}
+	/** 排序画布对象 */
+	async sortObjectByIds(ids: string[], isRecord?: boolean) {
+		ids.forEach((id, index) => {
+			this.canvas.moveTo(this.getObjectById(id), index)
+		})
+		await this.updateSubLayerClipPath()
+		this.renderAll()
+		if (isRecord) this.stateManager.recordState()
+	}
+
+
 	/** 设置画布事件 */
 	setupCanvasEvents() {
 		// 创建画布事件管理器
@@ -177,8 +210,18 @@ export class CanvasManager {
 	}
 	/** 设置激活对象 */
 	setActiveObjectById(id: string) {
+		this.discardActiveObject()
 		const obj = this.getObjectById(id)
-		if (obj && obj.evented) this.canvas.setActiveObject(obj)
+		if (!obj) return
+		if (obj.type === "group") {
+			const objects = [];
+			this.getObjects().forEach((item: any) => {
+				if (item?.info?.parentId === id) objects.push(item)
+			})
+			if (objects.length > 0) this.canvas.setActiveObject(new fabric.ActiveSelection(objects, { canvas: this.canvas }));
+		} else {
+			if (obj.evented) this.canvas.setActiveObject(obj)
+		}
 		this.renderAll()
 	}
 	resetZoom(animated = true, adaptive = true) {
@@ -222,11 +265,11 @@ export class CanvasManager {
 	renderAll() {
 		this.canvas.renderAll()
 	}
-	deleteObjectById(id: string) {
+	deleteObjectById(id: string, isUpdate = true) {
 		const object = this.getObjectById(id)
 		if (object) {
 			this.canvas.remove(object)
-			this.layerManager.updateLayers()
+			if (isUpdate) this.layerManager.updateLayers()
 			this.renderAll()
 		}
 	}
@@ -235,13 +278,6 @@ export class CanvasManager {
 		this.canvas.discardActiveObject()
 		this.renderAll()
 	}
-	// 拖拽排序
-	dragSort(id, newIndex) {
-		this.canvas.moveTo(this.getObjectById(id), newIndex)
-		this.layerManager.updateLayers()
-		this.renderAll()
-		this.stateManager.recordState()
-	}
 
 	/** 画笔事件 */
 	setupBrushEvents() {
@@ -254,13 +290,13 @@ export class CanvasManager {
 		};
 	}
 	/** 处理绘制图像 */
-	handleDrawImage(fabricImage: fabric.Object) {
+	async handleDrawImage(fabricImage: fabric.Object) {
 		const activeID = this.stateManager.layerManager.activeID.value
 		const activeLayer = this.getObjectById(activeID)
 		if (activeLayer) {
 			this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
 		} else {
-			const emptyLayer = this.layerManager.createEmptyLayer(false);
+			const emptyLayer = await this.layerManager.createEmptyLayer(false);
 			this.layerManager.setActiveID(emptyLayer.info.id, false)
 			this.layerManager.imageMergeToLayer(emptyLayer, fabricImage)
 		}