feat: 优化选区编辑+修复部分bug

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

@@ -41,13 +41,15 @@ export class AddLayerCommand extends Command {
     this.oldActiveLayerId = this.activeLayerId.value;
 
     // 执行添加图层操作
-    if (this.insertIndex !== undefined && this.insertIndex !== null) {
-      this.layers.value.splice(this.insertIndex, 0, this.newLayer);
-    } else {
-      this.layers.value.push(this.newLayer);
-    }
+    // 智能插入图层到合适位置
+    this._insertLayerAtCorrectPosition(this.newLayer);
+    // if (this.insertIndex !== undefined && this.insertIndex !== null) {
+    //   this.layers.value.splice(this.insertIndex, 0, this.newLayer);
+    // } else {
+    //   this.layers.value.push(this.newLayer);
+    // }
 
-    // 更新活动图层
+    // // 更新活动图层
     if (!this.newLayer.isBackground) {
       this.activeLayerId.value = this.newLayer.id;
     }
@@ -63,6 +65,104 @@ export class AddLayerCommand extends Command {
     this.activeLayerId.value = this.oldActiveLayerId;
   }
 
+  /**
+   * 智能插入图层到正确位置
+   * 根据当前激活图层位置确定新图层插入位置
+   * @param {Object} newLayer 要插入的新图层
+   * @private
+   */
+  _insertLayerAtCorrectPosition(newLayer) {
+    const layers = this.layers.value;
+    const currentActiveLayerId = this.activeLayerId?.value;
+
+    // 如果没有当前激活图层，插入到顶部（索引0）
+    if (!currentActiveLayerId) {
+      layers.splice(0, 0, newLayer);
+      return;
+    }
+
+    // 查找当前激活图层的位置
+    const {
+      layer: activeLayer,
+      parent: parentLayer,
+      index: activeIndex,
+    } = this._findLayerPosition(currentActiveLayerId);
+
+    if (!activeLayer) {
+      // 没找到激活图层，插入到顶部
+      layers.splice(0, 0, newLayer);
+      return;
+    }
+
+    // 确定插入位置
+    let insertIndex = 0;
+
+    if (parentLayer) {
+      // 当前激活图层是子图层
+      // 在同一父图层内，插入到激活子图层之上
+      insertIndex = Math.max(0, activeIndex);
+      parentLayer.children = parentLayer.children || [];
+      parentLayer.children.splice(insertIndex, 0, newLayer);
+
+      console.log(
+        `新图层已插入到子图层位置: ${insertIndex} (父图层: ${parentLayer.name})`
+      );
+    } else {
+      // 当前激活图层是一级图层
+      // 在一级图层中，插入到激活图层之上
+      const activeLayerIndex = layers.findIndex(
+        (layer) => layer.id === currentActiveLayerId
+      );
+      insertIndex = Math.max(0, activeLayerIndex);
+      layers.splice(insertIndex, 0, newLayer);
+
+      console.log(`新图层已插入到一级图层位置: ${insertIndex}`);
+    }
+  }
+
+  /**
+   * 查找图层位置信息
+   * @param {String} layerId 图层ID
+   * @returns {Object} 包含图层、父图层和索引的对象
+   * @private
+   */
+  _findLayerPosition(layerId) {
+    const layers = this.layers.value;
+
+    // 先在一级图层中查找
+    for (let i = 0; i < layers.length; i++) {
+      const layer = layers[i];
+
+      if (layer.id === layerId) {
+        return {
+          layer: layer,
+          parent: null,
+          index: i,
+        };
+      }
+
+      // 在子图层中查找
+      if (layer.children && Array.isArray(layer.children)) {
+        for (let j = 0; j < layer.children.length; j++) {
+          const childLayer = layer.children[j];
+          if (childLayer.id === layerId) {
+            return {
+              layer: childLayer,
+              parent: layer,
+              index: j,
+            };
+          }
+        }
+      }
+    }
+
+    return {
+      layer: null,
+      parent: null,
+      index: -1,
+    };
+  }
+
   getInfo() {
     return {
       name: this.name,