深度画布

src/components/Canvas/DepthCanvas/components/details-panel/index.vue

@@ -33,8 +33,8 @@
 	const isShow = computed(() => isRepeat.value)
 
 	const updateActiveObject = () => {
-		const obj = layers.value.find((v: any) => v.info.id === activeID.value)
+		const layer = layerManager.getActiveLayer()
-		activeObject.value = obj ? JSON.parse(JSON.stringify(obj)) : null
+		activeObject.value = layer ? JSON.parse(JSON.stringify(layer)) : null
 	}
 	watch(layers, () => updateActiveObject())
 	watch(activeID, () => updateActiveObject())

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

@@ -198,7 +198,7 @@ export class LayerManager {
 			selectable: false, // 不可选中（可选）
 			info: {
 				id: createId("group"),
-				name: '组图层',
+				name: '智能选区组',
 				showChildren: true,
 				...(options?.info || {}),
 			}

src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js

@@ -59,9 +59,8 @@ export class CanvasEventManager {
 		// 共享事件
 		this.setupSelectionEvents();
 		this.setupObjectEvents();
-		// this.setupDoubleClickEvents();
+		this.setupDoubleClickEvents();
 
-		// this.setupHandlePathCreated();
 	}
 
 	setupZoomEvents() {
@@ -754,113 +753,6 @@ export class CanvasEventManager {
 		});
 	}
 
-	setupLongPress(callback) {
-		this.canvas.on("mouse:down", (opt) => {
-			if (!opt.target) return;
-
-			this.longPressTimer = setTimeout(() => {
-				callback(opt);
-			}, this.longPressThreshold);
-		});
-
-		this.canvas.on("mouse:up", () => {
-			clearTimeout(this.longPressTimer);
-		});
-
-		this.canvas.on("mouse:move", () => {
-			clearTimeout(this.longPressTimer);
-		});
-	}
-
-	// 设置路径创建事件
-	setupHandlePathCreated() {
-		// 在 CanvasEventManager 的构造函数或初始化方法中
-		// this.canvas.on("path:created", this._handlePathCreated.bind(this));
-	}
-
-	_handlePathCreated(e) {
-		// // 获取新创建的路径对象
-		// const path = e.path;
-		// // 设置路径的ID和其他属性
-		// path.id = generateId(); // 生成唯一ID
-		// // 获取当前活动图层
-		// const activeLayer = this.layerManager.getActiveLayer();
-		// // 将路径对象绑定到当前活动图层
-		// if (activeLayer) {
-		//   // 设置路径的图层ID
-		//   path.layerId = activeLayer.id;
-		//   // 更新图层对象列表
-		//   if (!activeLayer.fabricObjects) activeLayer.fabricObjects = [];
-		//   activeLayer.fabricObjects.push(path);
-		//   // 更新图层缩略图
-		//   if (this.thumbnailManager) {
-		//     this.thumbnailManager.generateLayerThumbnail(activeLayer.id);
-		//   }
-		// }
-	}
-
-	/**
-	 * 合并图层中的对象为组以提高性能
-	 * @param {Object} options 合并选项
-	 * @param {fabric.Image} options.fabricImage 新的图像对象
-	 * @param {Object} options.activeLayer 当前活动图层
-	 * @private
-	 */
-	async mergeLayerObjectsForPerformance({ fabricImage, activeLayer, options }) {
-		// 确保有命令管理器
-		if (!this.layerManager || !this.layerManager.commandManager) {
-			console.warn("合并对象失败：没有命令管理器");
-			return;
-		}
-
-		// 确保有活动图层
-		if (!activeLayer) {
-			console.warn("合并对象失败：没有活动图层");
-			return;
-		}
-		// 验证是否需要合并
-		const hasExistingObjects =
-			Array.isArray(activeLayer.fabricObjects) &&
-			activeLayer.fabricObjects.length > 0;
-		const hasNewImage = !!fabricImage;
-
-		if (!hasExistingObjects && !hasNewImage) {
-			//   console.log("没有对象需要合并");
-			return;
-		}
-
-		// 如果只有一个新图像且图层为空，直接添加到图层
-		if (hasNewImage && !hasExistingObjects) {
-			this.layerManager.addObjectToLayer(fabricImage, activeLayer.id, options);
-			return;
-		}
-
-		// 执行高保真合并操作
-		try {
-			//   console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`);
-
-			const command = await this.layerManager.LayerObjectsToGroup(
-				activeLayer,
-				fabricImage
-			);
-
-			// 设置命令的撤销状态
-			if (isBoolean(options.undoable)) command.undoable = options.undoable; // 是否撤销
-
-			this.layerManager?.commandManager?.execute?.(command, {
-				name: `合并图层 ${activeLayer.name} 中的对象为组`,
-			});
-		} catch (error) {
-			console.error("合并图层对象时发生错误:", error);
-
-			// 降级处理：如果合并失败，至少保证新图像能添加到图层
-			if (fabricImage && this.layerManager) {
-				// console.log("执行降级处理：直接添加图像到图层");
-				this.layerManager.addObjectToLayer(fabricImage, activeLayer.id);
-			}
-		}
-	}
-
 	updateSelectedLayer(opt) {
 		const selected = opt.selected[0];
 		if (selected && opt.selected.length === 1) {
@@ -868,31 +760,6 @@ export class CanvasEventManager {
 		}
 	}
 
-	// 更新图层缩略图
-	updateLayerThumbnail(layerId) {
-		if (!this.thumbnailManager || !layerId || !this.layers) return;
-
-		const layer = this.layers.value.find((l) => l.id === layerId);
-		if (layer) {
-			this.thumbnailManager.generateLayerThumbnail(layer);
-		}
-	}
-
-	// 更新子元素组合缩略图
-	updateLayerChidrenThumbnail(layerId, fabricObject) {
-		if (!this.thumbnailManager || !fabricObject || !this.layers) return;
-
-		// 查找对应的图层(现在元素就是图层)
-		const layer = this.layers.value.find(
-			(l) => l.fabricObjects && l.fabricObjects?.[0]?.id === layerId
-		);
-
-		if (layer) {
-			// 生成图层缩略图
-			this.thumbnailManager.generateLayerThumbnail(layer);
-		}
-	}
-
 
 	/**
 	 * 精确检测设备类型，区分 PC、Mac、平板和移动设备