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

import { fabric } from "fabric-with-all";
import { generateId } from "../utils/helper";
import { OperationType } from "../utils/layerHelper";
import { CreateSelectionCommand } from "../commands/SelectionCommands";
import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
import addIcon from "@/assets/images/canvas/add.png";
import removeIcon from "@/assets/images/canvas/remove.png";
import { Https } from "@/tool/https";
import store from "@/store";

/**
 * 部件选择管理器
 */
export class PartManager {
	/**
	 * 创建部件选择管理器
	 * @param {Object} options 配置选项
	 * @param {Object} options.canvas fabric.js画布实例
	 * @param {Object} options.commandManager 命令管理器实例
	 * @param {Object} options.canvasManager 画布管理实例
	 * @param {Object} options.layerManager 图层管理实例
	 * @param {Object} options.toolManager 工具管理实例
	 */
	constructor(options = {}) {
		this.canvas = options.canvas;
		this.commandManager = options.commandManager;
		this.layerManager = options.layerManager;
		this.canvasManager = options.canvasManager;
		this.toolManager = options.toolManager;
		this.props = options.props;

		// 状态
		this.isActive = false;
		this.partObject = null; // 当前选区对象
		this.partId = "part_selector";
		this.defaultCursor = "default";

		// 绘制状态
		this.drawingObject = null;
		this.startPoint = null;
		this.partPath = null; // 存储选区路径数据


		// 不再直接绑定事件处理函数
		this._mouseDownHandler = null;
		this._mouseMoveHandler = null;
		this._mouseUpHandler = null;
		this._keyDownHandler = null;

		// 选区相关的工具类型
		this.tools = [
			OperationType.PART,
			OperationType.PART_RECTANGLE,
			OperationType.PART_BRUSH,
			OperationType.PART_ERASER,
		];

		// 当前工具
		this.activeTool = this.toolManager.activeTool;

		// 选区状态变化回调
		this.onSelectionChanged = null;
	}

	/**
	 * 设置当前工具
	 * @param {String} toolId 工具ID
	 */
	setCurrentTool(toolId) {
		// 检查是否为选区工具
		const wasActive = this.isActive;
		this.isActive = this.tools.includes(toolId);

		// 如果从非选区工具切换到选区工具，初始化事件
		if (!wasActive && this.isActive) {
			this.initEvents();
		}
		// 如果从选区工具切换到非选区工具，清理事件和选区
		else if (wasActive && !this.isActive) {
			this.cleanupEvents();
			this.clearSelection();
		}
	}

	/**
	 * 初始化选区相关事件
	 */
	initEvents() {
		if (!this.canvas || this._mouseDownHandler) return; // 避免重复初始化
		this.defaultCursor = this.canvas.defaultCursor;

		// 保存实例引用，用于事件处理函数中
		const self = this;

		// 鼠标按下事件处理
		this._mouseDownHandler = (options) => {
			// 如果选区功能未激活，不处理事件
			if (!this.isActive) return;
			// 阻止事件冒泡，避免与 CanvasEventManager 冲突
			options.e.stopPropagation();
			switch (this.activeTool.value) {
				case OperationType.PART:
					this._pointDownkHandler(options);
					break;
				case OperationType.PART_RECTANGLE:
					this._rectangleDownHandler(options);
					break;
				case OperationType.PART_BRUSH:
					this._brushDownHandler(options);
					break;
				case OperationType.PART_ERASER:
					this._eraseDownHandler(options);
					break;

				default:
					break;
			}
		};

		// 鼠标移动事件处理
		this._mouseMoveHandler = (options) => {
			// 如果选区功能未激活或没有正在绘制的对象，不处理事件
			if (!this.isActive) return;
			// 阻止事件冒泡
			options.e.stopPropagation();
			switch (this.activeTool.value) {
				case OperationType.PART:
					this._pointMoveHandler(options);
					break;
				case OperationType.PART_RECTANGLE:
					this._rectangleMoveHandler(options);
					break;
				case OperationType.PART_BRUSH:
					this._brushMoveHandler(options);
					break;
				case OperationType.PART_ERASER:
					this._eraseMoveHandler(options);
					break;

				default:
					break;
			}
		};

		// 鼠标抬起事件处理
		this._mouseUpHandler = (options) => {
			// 如果选区功能未激活或没有正在绘制的对象，不处理事件
			if (!this.isActive) return;
			// 阻止事件冒泡
			if (options && options.e) {
				options.e.stopPropagation();
			}
			switch (this.activeTool.value) {
				case OperationType.PART:
					this._pointUpHandler(options);
					break;
				case OperationType.PART_RECTANGLE:
					this._rectangleUpHandler(options);
					break;
				case OperationType.PART_BRUSH:
					this._brushUpHandler(options);
					break;
				case OperationType.PART_ERASER:
					this._eraseUpHandler(options);
					break;

				default:
					break;
			}
		};

		// 键盘事件处理
		this._keyDownHandler = (event) => {
			// 只在选区功能激活时处理键盘事件
			if (!this.isActive) return;
		};

		// 添加事件监听
		this.canvas.on("mouse:down", this._mouseDownHandler);
		this.canvas.on("mouse:move", this._mouseMoveHandler);
		this.canvas.on("mouse:up", this._mouseUpHandler);

		// 添加键盘事件监听
		document.addEventListener("keydown", this._keyDownHandler);
	}

	/**
	 * 清理事件监听
	 */
	cleanupEvents() {
		if (!this.canvas) return;

		// 移除事件监听
		if (this._mouseDownHandler) {
			this.canvas.off("mouse:down", this._mouseDownHandler);
			this._mouseDownHandler = null;
		}
		if (this._mouseMoveHandler) {
			this.canvas.off("mouse:move", this._mouseMoveHandler);
			this._mouseMoveHandler = null;
		}
		if (this._mouseUpHandler) {
			this.canvas.off("mouse:up", this._mouseUpHandler);
			this._mouseUpHandler = null;
		}
		if (this._keyDownHandler) {
			document.removeEventListener("keydown", this._keyDownHandler);
			this._keyDownHandler = null;
		}
	}

	// 点选工具模式下点击事件处理
	_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) { }
	// 点选工具模式下抬起事件处理
	_pointUpHandler(options) {
		const button = options.button;
		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
		this.canvas.upperCanvasEl.style.cursor = this.defaultCursor;
		const fixedObject = this.canvasManager.getFixedLayerObject();
		if (!fixedObject) return console.warn("未找到固定图层");
		const { x, y } = options.pointer;
		const width = fixedObject.width * fixedObject.scaleX;
		const height = fixedObject.height * fixedObject.scaleY;
		const X = x - (fixedObject.left - width / 2);
		const Y = y - (fixedObject.top - height / 2);
		this.getSegAnythingImage({
			image_path: "aida-users/24299/sketch/70bb39cc-63e0-44a9-a627-3542d0f9cd70.png",
			type: "point",
			points: [[X, Y], [X - 10, Y - 10]],
			labels: [1, 0],
		});
	}


	// 框选工具模式下点击事件处理
	_rectangleDownHandler(options) {
	}
	// 框选工具模式下移动事件处理
	_rectangleMoveHandler(options) {

	}
	// 框选工具模式下抬起事件处理
	_rectangleUpHandler(options) {
	}


	// 绘制工具模式下点击事件处理
	_brushDownHandler(options) {
	}
	// 绘制工具模式下移动事件处理
	_brushMoveHandler(options) {

	}
	// 绘制工具模式下抬起事件处理
	_brushUpHandler(options) {
	}


	// 擦除工具模式下抬起事件处理
	_eraseUpHandler(options) {
	}
	// 擦除工具模式下点击事件处理
	_eraseDownHandler(options) {
	}
	// 擦除工具模式下移动事件处理
	_eraseMoveHandler(options) {

	}



	// 获取分隔后图片
	async getSegAnythingImage(obj) {
		const user_id = store.state.UserHabit.userDetail.userId;
		const data = {
			user_id,
			...obj,
		}
		Https.axiosPost(Https.httpUrls.segAnything, data)
			.then(response => {
				console.log(response);
			})
			.catch(error => {
				console.error(error);
			});

	}

	/**
	 * 清除选区
	 */
	clearSelection() {
		// 移除选区对象
		// this.removeSelectionFromCanvas();

		// 重置选区状态
		this.partObject = null;
		this.partPath = null;

		// 触发选区变化回调
		if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
			this.onSelectionChanged();
		}

		return true;
	}

	/**
	 * 清理资源
	 */
	dispose() {
		this.cleanupEvents();
		this.clearSelection();
		this.canvas = null;
		this.commandManager = null;
		this.layerManager = null;
	}
}