深度画布智能选区

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

@@ -19,11 +19,11 @@ export class LayerManager {
 	onMounted() { }
 	setActiveID(id: string, isActive = true) {
 		const layer = this.getLayerById(id)
-		if (layer?.type === "group") {
-			this.activeID.value = ""
-		} else {
-			this.activeID.value = id
-		}
+		// if (layer?.type === "group") {
+		// 	this.activeID.value = ""
+		// } else {
+		this.activeID.value = id
+		// }
 		if (isActive) {
 			this.canvasManager.setActiveObjectById(id)
 			this.stateManager.toolManager.setTool(OperationType.SELECT)
@@ -62,11 +62,21 @@ export class LayerManager {
 	setLayerVisibleById(id, visible: boolean) {
 		const layer = this.getLayerById(id)
 		const object = this.canvasManager.getObjectById(id)
-		if (!layer || !object) return
-		layer.visible = visible
-		object.set({
-			visible: visible
-		})
+		const call = (layer, object) => {
+			if (!layer || !object) return
+			layer.visible = visible
+			object.set({
+				visible: visible
+			})
+		}
+		call(layer, object)
+		if (object.type === "group") {
+			const children = this.canvasManager.getChildObjectsById(id)
+			children.forEach(v => {
+				const layer = this.getLayerById(v.info.id)
+				call(layer, v)
+			})
+		}
 		this.canvasManager.renderAll()
 		this.stateManager.recordState()
 	}
@@ -74,14 +84,26 @@ export class LayerManager {
 	setLayerLockById(id, lock: boolean) {
 		const layer = this.getLayerById(id)
 		const object = this.canvasManager.getObjectById(id)
-		if (!layer || !object) return
-		layer.info.lock = !!lock
-		layer.evented = !lock
-		object.info.lock = !!lock
-		object.set({
-			evented: !lock,
-			selectable: !lock,
-		})
+		const call = (layer, object) => {
+			if (!layer || !object) return
+			layer.info.lock = !!lock
+			layer.evented = !lock
+			object.info.lock = !!lock
+			if (object.type !== "group") {
+				object.set({
+					evented: !lock,
+					selectable: !lock,
+				})
+			}
+		}
+		call(layer, object)
+		if (object.type === "group") {
+			const children = this.canvasManager.getChildObjectsById(id)
+			children.forEach(v => {
+				const layer = this.getLayerById(v.info.id)
+				call(layer, v)
+			})
+		}
 		if (lock) {
 			// 取消选中对象
 			const e = this.canvasManager.getSelectedObject()
@@ -194,13 +216,14 @@ export class LayerManager {
 	}
 	/** 创建组图层 */
 	async createGroupLayer(options?: any, isRecord = true, isActive = false) {
-		const children = options?.children || []
-		delete options.children
-		const groupObject = new fabric.Group(children, {
+		const groupObject = new fabric.Group([], {
 			...(options || {}),
+			width: 1,
+			height: 1,
 			hasControls: false, // 不显示控制点
 			hasBorders: false, // 不显示边框
 			selectable: false, // 不可选中（可选）
+			evented: false,
 			info: {
 				id: createId("group"),
 				name: '智能选区组',
@@ -423,10 +446,18 @@ export class LayerManager {
 		const objects = this.canvasManager.getObjects()
 		objects.forEach((item: any) => {
 			item.set({
-				erasable: item.info.id === this.activeID.value
+				erasable: (item.info.id === this.activeID.value && item.type !== "group")
 			})
 		})
 	}
+	/** 设置所有对象擦除属性 */
+	setAllObjectsErasable(isErasable = false) {
+		const objects = this.canvasManager.getObjects()
+		objects.forEach((item: any) => {
+			item.set({ erasable: isErasable })
+		})
+	}
+
 	/** 更新图层缩略图 */
 	async updateLayerThumbnailsById(id: string, thumbnail?: string, isUpdate = true) {
 		const object = this.canvasManager.getObjectById(id);