diff --git a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue b/src/components/Canvas/DepthCanvas/components/details-panel/index.vue index 3cf1e93..b0897e6 100644 --- a/src/components/Canvas/DepthCanvas/components/details-panel/index.vue +++ b/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) - activeObject.value = obj ? JSON.parse(JSON.stringify(obj)) : null + const layer = layerManager.getActiveLayer() + activeObject.value = layer ? JSON.parse(JSON.stringify(layer)) : null } watch(layers, () => updateActiveObject()) watch(activeID, () => updateActiveObject()) diff --git a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts b/src/components/Canvas/DepthCanvas/manager/LayerManager.ts index 8199631..7c22297 100644 --- a/src/components/Canvas/DepthCanvas/manager/LayerManager.ts +++ b/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 || {}), } diff --git a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js b/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js index 8f7230b..d96a43e 100644 --- a/src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js +++ b/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、平板和移动设备