多选解决

src/component/Canvas/CanvasEditor/commands/PartCommands.js

@@ -24,3 +24,33 @@ export class PartDrawCommand extends Command {
 		return true;
 	}
 }
+/**
+ * 部件点选绘制命令
+ */
+export class PartPointDrawCommand extends Command {
+	constructor(options) {
+		super({
+			name: "部件点选绘制命令",
+			saveState: false,
+		});
+
+		this.canvas = options.canvas;
+		this.partManager = options.partManager;
+		this.partCanvas = options.partCanvas;
+		this.pointList = options.pointList;
+		this.oldPartCanvas = this.partManager.partCanvas;
+		this.oldPointList = [...this.partManager.pointList];
+	}
+	async execute() {
+		const list = [...this.pointList];
+		const canvas = this.partCanvas;
+		const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+		return res;
+	}
+	async undo() {
+		const list = [...this.oldPointList];
+		const canvas = this.oldPartCanvas;
+		const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+		return res;
+	}
+}

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue

@@ -22,7 +22,7 @@
 						v-for="v in activeObjects"
 						:key="v.id"
 					>
-						<div class="title">{{ v.layer?.name }}</div>
+						<!-- <div class="title">{{ v.layer?.name }}</div> -->
 						<div class="list">
 							<div
 								class="input"
@@ -125,7 +125,10 @@
 									"
 									:options="selectOptions"
 									@change="(e) => changeFillRepeat(e, v)"
-									:disabled="v.layer?.metadata?.level2Type === 'Embroidery'"
+									:disabled="
+										v.layer?.metadata?.level2Type ===
+										'Embroidery'
+									"
 								/>
 							</div>
 							<!-- 平铺设置 -->
@@ -283,10 +286,10 @@
 		activeObjects.value.forEach((v) => {
 			v.layer = props.layerManager.getLayerById(v.layerId);
 		});
-		if (activeObjects.value.length === 0) {
+		if (activeObjects.value.length === 1) {
-			close();
-		} else {
 			show();
+		} else {
+			close();
 		}
 	};
 	//取消当前选中

src/component/Canvas/CanvasEditor/index.vue

@@ -1045,11 +1045,7 @@ defineExpose({
 	width = 0,// 导出的图片宽度
 	height = 0, // 导出的图片高度
   } = {}) => {
-	console.log('导出图片',{isContainFixed,
+	canvasManager?.canvas?.discardActiveObject();
-isContainFixedOther,
-isPrintTrimsNoRepeat,
-isPrintTrimsRepeat,
-isContainNormalLayer})
     var base64 = await canvasManager.exportImage({
       isContainBg,
       isContainFixed,

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) {
+	_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;
-	}
 	/** 点选工具模式下移动事件处理 */
 	_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);
+		this.partGroup.add(image2);
-		for (let i = 0; i < this.pointList.length; i++) {
+		for (let i = 0; i < list.length; i++) {
-			const item = this.pointList[i];
+			const item = list[i];
 			const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
 			icon.set({
-				left: item.x - group.width / 2,
+				left: item.x - this.partGroup.width / 2,
-				top: item.y - group.height / 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({
+		this.partDrawCommand(canvas);
-			canvas: this.canvas,
-			partManager: this,
-			partCanvas: canvas,
-		})
-		if (this.commandManager?.execute) {
-			this.commandManager.execute(cmd);
-		} else {
-			cmd.execute();
-		}
-
 	}
 
 
@@ -481,16 +489,7 @@ export class PartManager {
 		});
 		tcanvas.renderAll();
 		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
-		const cmd = new PartDrawCommand({
+		this.partDrawCommand(canvas);
-			canvas: this.canvas,
-			partManager: this,
-			partCanvas: canvas,
-		})
-		if (this.commandManager?.execute) {
-			this.commandManager.execute(cmd);
-		} else {
-			cmd.execute();
-		}
 	}
 	/** 擦除工具模式下点击事件处理 */
 	_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() {
+		if (this.activeTool.value === OperationType.PART) {
+			this.partPointDrawCommand([], null);
+		} else {
 			this.pointList = [];
-		this.partCanvas = null;
+			this.partDrawCommand(null);
-		this.resetPartObject(true);
+		}
 	}
 
 	/**