多选解决

src/component/Canvas/CanvasEditor/managers/PartManager.js

@@ -6,7 +6,7 @@ import addIcon from "@/assets/images/canvas/add.png";
 import removeIcon from "@/assets/images/canvas/remove.png";
 import { getObjectAlphaToCanvas } from "../utils/objectHelper";
 import { Https } from "@/tool/https";
-import { PartDrawCommand } from "../commands/PartCommands";
+import { PartDrawCommand, PartPointDrawCommand } from "../commands/PartCommands";
 
 
 /**
@@ -108,7 +108,6 @@ export class PartManager {
 		}
 		// 如果从选区工具切换到非选区工具，清理事件和选区
 		else if (wasActive && !this.isActive) {
-			this.selectionManager.clearSelection();
 			this.cleanupEvents();
 			this.clearPartObject();
 			this.clearPointData();
@@ -242,12 +241,7 @@ export class PartManager {
 	}
 
 	/** 点选工具模式下点击事件处理 */
-	_pointDownkHandler(options) {
-		// const button = options.button;
-		// const isLeft = button === 1;// 左键1（添加）  右键3（删除）
-		// const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
-		// this.canvas.upperCanvasEl.style.cursor = icon;
-	}
+	_pointDownkHandler(options) { }
 	/** 点选工具模式下移动事件处理 */
 	_pointMoveHandler(options) { }
 	/** 点选工具模式下抬起事件处理 */
@@ -260,7 +254,8 @@ export class PartManager {
 		const label = isLeft ? 1 : 0;
 		const points = [];
 		const labels = [];
-		this.pointList.forEach((item) => {
+		const pointList = [...this.pointList];
+		pointList.forEach((item) => {
 			points.push([item.x, item.y]);
 			labels.push(item.label);
 		});
@@ -271,34 +266,57 @@ export class PartManager {
 			points,
 			labels,
 		});
-		this.pointList.push({
+		pointList.push({
 			x: x,
 			y: y,
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
-		this.resetPartObject();
-		const group = this.partGroup;
 		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
+		this.partPointDrawCommand(pointList, canvas);
+	}
+	partPointDrawCommand(list, canvas) {
+		const cmd = new PartPointDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+			pointList: [...list],
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	}
+	async pointDrawPartCanvas(list, canvas) {
+		this.selectionManager.clearSelection();
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) {
+			console.warn("未找到固定图层")
+			return false;
+		}
+		this.resetPartObject();
+		this.pointList = [...list];
 		this.partCanvas = canvas;
 		const image2 = new fabric.Image(canvas);
 		image2.set({
 			originX: fixedObject.originX,
 			originY: fixedObject.originY,
 		});
-		group.add(image2);
-		for (let i = 0; i < this.pointList.length; i++) {
-			const item = this.pointList[i];
+		this.partGroup.add(image2);
+		for (let i = 0; i < list.length; i++) {
+			const item = list[i];
 			const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
 			icon.set({
-				left: item.x - group.width / 2,
-				top: item.y - group.height / 2,
+				left: item.x - this.partGroup.width / 2,
+				top: item.y - this.partGroup.height / 2,
 				originX: fixedObject.originX,
 				originY: fixedObject.originY,
 			})
-			group.add(icon);
+			this.partGroup.add(icon);
 		}
 		this.canvas.renderAll();
+		return true;
 	}
 	/** 清空点选数据 */
 	clearPointData() {
@@ -309,7 +327,7 @@ export class PartManager {
 
 	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
-		this.clearPointData();
+		this.pointList = [];
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
 		const { x, y } = this.handleMousePosition(options, fixedObject);
@@ -357,7 +375,7 @@ export class PartManager {
 		});
 		const image = await this.loadImageToObject(url);
 		const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
-		this.drawPartCanvas(canvas);
+		this.partDrawCommand(canvas);
 	}
 	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
@@ -433,17 +451,7 @@ export class PartManager {
 		tcanvas.add(fabricImage)
 		tcanvas.renderAll();
 		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
-		const cmd = new PartDrawCommand({
-			canvas: this.canvas,
-			partManager: this,
-			partCanvas: canvas,
-		})
-		if (this.commandManager?.execute) {
-			this.commandManager.execute(cmd);
-		} else {
-			cmd.execute();
-		}
-
+		this.partDrawCommand(canvas);
 	}
 
 
@@ -481,16 +489,7 @@ export class PartManager {
 		});
 		tcanvas.renderAll();
 		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
-		const cmd = new PartDrawCommand({
-			canvas: this.canvas,
-			partManager: this,
-			partCanvas: canvas,
-		})
-		if (this.commandManager?.execute) {
-			this.commandManager.execute(cmd);
-		} else {
-			cmd.execute();
-		}
+		this.partDrawCommand(canvas);
 	}
 	/** 擦除工具模式下点击事件处理 */
 	_eraseDownHandler(options) {
@@ -501,9 +500,22 @@ export class PartManager {
 	/** 擦除工具模式下抬起事件处理 */
 	_eraseUpHandler(options) {
 
+	}
+	partDrawCommand(canvas) {
+		const cmd = new PartDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
 	}
 	/** 绘制部件画布 */
 	drawPartCanvas(canvas) {
+		this.selectionManager.clearSelection();
 		this.partCanvas = canvas;
 		const image = new fabric.Image(canvas);
 		image.set({
@@ -611,8 +623,8 @@ export class PartManager {
 			scaleY: scaleY,
 			...this.selectionStyle,
 		});
-		this.selectionManager.setSelectionObject(path);
 		this.clearPart();
+		this.selectionManager.setSelectionObject(path);
 		const cmd = new LassoCutoutCommand({
 			canvas: this.canvas,
 			layerManager: this.layerManager,
@@ -623,9 +635,12 @@ export class PartManager {
 	}
 	/** 清空点位 */
 	clearPart() {
-		this.pointList = [];
-		this.partCanvas = null;
-		this.resetPartObject(true);
+		if (this.activeTool.value === OperationType.PART) {
+			this.partPointDrawCommand([], null);
+		} else {
+			this.pointList = [];
+			this.partDrawCommand(null);
+		}
 	}
 
 	/**