feat: 裁剪组裁剪跟随选择组移动

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

@@ -1,8 +1,4 @@
-import {
-  createLayer,
-  findInChildLayers,
-  LayerType,
-} from "../utils/layerHelper.js";
+import { createLayer, findInChildLayers, LayerType } from "../utils/layerHelper.js";
 import { createRasterizedImage } from "../utils/selectionToImage.js";
 import { CompositeCommand, Command } from "./Command.js";
 import { CreateImageLayerCommand } from "./LayerCommands.js";
@@ -56,9 +52,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
       const selectionObject = this.selectionManager.getSelectionObject();
       if (selectionObject) {
         try {
-          this._clonedSelectionObject = await this._cloneObject(
-            selectionObject
-          );
+          this._clonedSelectionObject = await this._cloneObject(selectionObject);
           console.log("套索抠图：选区对象已克隆保存");
         } catch (error) {
           console.error("套索抠图：克隆选区对象失败:", error);
@@ -294,10 +288,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
             await command.undo();
             console.log(`✅ 子命令撤销成功: ${command.constructor.name}`);
           } catch (error) {
-            console.error(
-              `❌ 子命令撤销失败: ${command.constructor.name}`,
-              error
-            );
+            console.error(`❌ 子命令撤销失败: ${command.constructor.name}`, error);
             // 子命令撤销失败不中断整个撤销过程
           }
         }
@@ -361,16 +352,11 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
     // 递归获取图层及其子图层的所有对象
     const collectLayerObjects = (currentLayer) => {
       // 处理图层的fabricObjects
-      if (
-        currentLayer.fabricObjects &&
-        Array.isArray(currentLayer.fabricObjects)
-      ) {
+      if (currentLayer.fabricObjects && Array.isArray(currentLayer.fabricObjects)) {
         currentLayer.fabricObjects.forEach((fabricRef) => {
           if (fabricRef && fabricRef.id) {
             // 从画布中查找真实的对象
-            const realObject = canvasObjects.find(
-              (obj) => obj.id === fabricRef.id
-            );
+            const realObject = canvasObjects.find((obj) => obj.id === fabricRef.id);
             if (realObject && realObject.visible) {
               objects.push(realObject);
             }
@@ -380,9 +366,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
 
       // 处理单个fabricObject（背景图层等）
       if (currentLayer.fabricObject && currentLayer.fabricObject.id) {
-        const realObject = canvasObjects.find(
-          (obj) => obj.id === currentLayer.fabricObject.id
-        );
+        const realObject = canvasObjects.find((obj) => obj.id === currentLayer.fabricObject.id);
         if (realObject && realObject.visible) {
           objects.push(realObject);
         }
@@ -413,11 +397,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
    * @returns {String} 抠图结果的DataURL
    * @private
    */
-  async _performCutoutWithRasterized(
-    sourceObjects,
-    selectionObject,
-    selectionBounds
-  ) {
+  async _performCutoutWithRasterized(sourceObjects, selectionObject, selectionBounds) {
     try {
       console.log("=== 开始使用createRasterizedImage执行抠图 ===");
       console.log(`源对象数量: ${sourceObjects.length}`);
@@ -456,10 +436,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
 
       // 如果createRasterizedImage失败，回退到原始方法
       console.log("⚠️ 回退到原始抠图方法...");
-      return await this._performCutout(
-        { fabricObjects: sourceObjects },
-        selectionObject
-      );
+      return await this._performCutout({ fabricObjects: sourceObjects }, selectionObject);
     }
   }
 
@@ -490,9 +467,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
 
       try {
         // 收集源图层中的可见对象
-        const visibleObjects = sourceLayer.fabricObjects.filter(
-          (obj) => obj.visible
-        );
+        const visibleObjects = sourceLayer.fabricObjects.filter((obj) => obj.visible);
 
         if (visibleObjects.length === 0) {
           throw new Error("源图层没有可见对象");
@@ -545,10 +520,7 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
         let highResolutionScale = 1;
         if (this.highResolutionEnabled) {
           const devicePixelRatio = window.devicePixelRatio || 1;
-          highResolutionScale = Math.max(
-            this.baseResolutionScale,
-            devicePixelRatio * 2
-          );
+          highResolutionScale = Math.max(this.baseResolutionScale, devicePixelRatio * 2);
         }
 
         // 创建用于导出的高分辨率canvas
@@ -559,12 +531,8 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
           colorSpace: "srgb",
         });
 
-        const actualWidth = Math.round(
-          renderBounds.width * highResolutionScale
-        );
-        const actualHeight = Math.round(
-          renderBounds.height * highResolutionScale
-        );
+        const actualWidth = Math.round(renderBounds.width * highResolutionScale);
+        const actualHeight = Math.round(renderBounds.height * highResolutionScale);
 
         exportCanvas.width = actualWidth;
         exportCanvas.height = actualHeight;
@@ -773,17 +741,14 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
             }
           });
         } else if (objectType === "polygon") {
-          fabric.Polygon.fromObject(
-            this.serializedSelectionObject,
-            (polygon) => {
-              if (polygon) {
-                console.log("多边形选区对象反序列化成功");
-                resolve(polygon);
-              } else {
-                reject(new Error("多边形选区对象反序列化失败"));
-              }
+          fabric.Polygon.fromObject(this.serializedSelectionObject, (polygon) => {
+            if (polygon) {
+              console.log("多边形选区对象反序列化成功");
+              resolve(polygon);
+            } else {
+              reject(new Error("多边形选区对象反序列化失败"));
             }
-          );
+          });
         } else if (objectType === "rect") {
           fabric.Rect.fromObject(this.serializedSelectionObject, (rect) => {
             if (rect) {
@@ -794,30 +759,24 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
             }
           });
         } else if (objectType === "ellipse" || objectType === "circle") {
-          fabric.Ellipse.fromObject(
-            this.serializedSelectionObject,
-            (ellipse) => {
-              if (ellipse) {
-                console.log("椭圆选区对象反序列化成功");
-                resolve(ellipse);
-              } else {
-                reject(new Error("椭圆选区对象反序列化失败"));
-              }
+          fabric.Ellipse.fromObject(this.serializedSelectionObject, (ellipse) => {
+            if (ellipse) {
+              console.log("椭圆选区对象反序列化成功");
+              resolve(ellipse);
+            } else {
+              reject(new Error("椭圆选区对象反序列化失败"));
             }
-          );
+          });
         } else {
           // 通用对象反序列化
-          fabric.util.enlivenObjects(
-            [this.serializedSelectionObject],
-            (objects) => {
-              if (objects && objects.length > 0) {
-                console.log("通用选区对象反序列化成功");
-                resolve(objects[0]);
-              } else {
-                reject(new Error("通用选区对象反序列化失败"));
-              }
+          fabric.util.enlivenObjects([this.serializedSelectionObject], (objects) => {
+            if (objects && objects.length > 0) {
+              console.log("通用选区对象反序列化成功");
+              resolve(objects[0]);
+            } else {
+              reject(new Error("通用选区对象反序列化失败"));
             }
-          );
+          });
         }
       });
     } catch (error) {