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

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

@@ -24,8 +24,7 @@ export class ClearSelectionContentCommand extends Command {
 
     this.oldLayer = [...this.layers.value]; // 获取原图层对象
 
-    const { layer } =
-      findLayerRecursively(this.layers.value, this.targetLayerId) || {};
+    const { layer } = findLayerRecursively(this.layers.value, this.targetLayerId) || {};
 
     // 栅格化相关属性
     this.originalLayerBackup = null;
@@ -37,17 +36,10 @@ export class ClearSelectionContentCommand extends Command {
 
     // this.originalLayerObject = fabric.util.object.clone(originalLayerObject); // 获取原图层对象
 
-    this.oldLayerObjects = originalLayerObject.toObject([
-      "id",
-      "layerId",
-      "layerName",
-    ]); // 获取原图层的所有对象
+    this.oldLayerObjects = originalLayerObject.toObject(["id", "layerId", "layerName"]); // 获取原图层的所有对象
 
     this.rasterizedImage = null;
-    this.targetLayer = findLayerRecursively(
-      this.canvas,
-      this.targetLayerId
-    )?.layer;
+    this.targetLayer = findLayerRecursively(this.canvas, this.targetLayerId)?.layer;
 
     this.layerRasterized = false;
 
@@ -88,8 +80,7 @@ export class ClearSelectionContentCommand extends Command {
       }
 
       // 确定目标图层
-      const layerId =
-        this.targetLayerId || this.layerManager.getActiveLayerId();
+      const layerId = this.targetLayerId || this.layerManager.getActiveLayerId();
       this.targetLayer = this.layerManager.getLayerById(layerId);
       if (!this.targetLayer) {
         console.error("无法清除选区内容：目标图层无效");
@@ -107,9 +98,7 @@ export class ClearSelectionContentCommand extends Command {
       }
 
       // 创建反转选区（保留选区外的内容）
-      const invertedSelection = await this._createInvertedSelection(
-        this.selectionObject
-      );
+      const invertedSelection = await this._createInvertedSelection(this.selectionObject);
       if (!invertedSelection) {
         console.error("创建反转选区失败");
         return false;
@@ -137,10 +126,7 @@ export class ClearSelectionContentCommand extends Command {
 
       // 恢复原图层状态
       // 移除栅格化后的图像
-      if (
-        this.rasterizedImage &&
-        this.canvas.getObjects().includes(this.rasterizedImage)
-      ) {
+      if (this.rasterizedImage && this.canvas.getObjects().includes(this.rasterizedImage)) {
         this.canvas.remove(this.rasterizedImage);
       }
 
@@ -199,10 +185,7 @@ export class ClearSelectionContentCommand extends Command {
       let scaleFactor = this.baseResolutionScale;
       if (this.highResolutionEnabled) {
         const currentZoom = this.canvas.getZoom?.() || 1;
-        scaleFactor = Math.max(
-          scaleFactor || this.canvas?.getRetinaScaling?.(),
-          currentZoom
-        );
+        scaleFactor = Math.max(scaleFactor || this.canvas?.getRetinaScaling?.(), currentZoom);
         scaleFactor = Math.min(scaleFactor, 3);
       }
 
@@ -286,9 +269,7 @@ export class ClearSelectionContentCommand extends Command {
         layerBounds.left + layerBounds.width
       } ${layerBounds.top} L ${layerBounds.left + layerBounds.width} ${
         layerBounds.top + layerBounds.height
-      } L ${layerBounds.left} ${layerBounds.top + layerBounds.height} Z ${
-        selectionObject.path
-      }`;
+      } L ${layerBounds.left} ${layerBounds.top + layerBounds.height} Z ${selectionObject.path}`;
 
       const invertedPath = new fabric.Path(pathString, {
         fillRule: "evenodd",
@@ -329,14 +310,8 @@ export class ClearSelectionContentCommand extends Command {
       if (!bounds) {
         bounds = { ...objBounds };
       } else {
-        const right = Math.max(
-          bounds.left + bounds.width,
-          objBounds.left + objBounds.width
-        );
-        const bottom = Math.max(
-          bounds.top + bounds.height,
-          objBounds.top + objBounds.height
-        );
+        const right = Math.max(bounds.left + bounds.width, objBounds.left + objBounds.width);
+        const bottom = Math.max(bounds.top + bounds.height, objBounds.top + objBounds.height);
 
         bounds.left = Math.min(bounds.left, objBounds.left);
         bounds.top = Math.min(bounds.top, objBounds.top);
@@ -370,15 +345,10 @@ export class ClearSelectionContentCommand extends Command {
     // 递归获取图层及其子图层的所有对象
     const collectLayerObjects = (currentLayer) => {
       // 处理图层的fabricObjects
-      if (
-        currentLayer.fabricObjects &&
-        Array.isArray(currentLayer.fabricObjects)
-      ) {
+      if (currentLayer.fabricObjects && Array.isArray(currentLayer.fabricObjects)) {
         currentLayer.fabricObjects.forEach((fabricObj) => {
           if (fabricObj && fabricObj.id) {
-            const realObject = canvasObjects.find(
-              (canvasObj) => canvasObj.id === fabricObj.id
-            );
+            const realObject = canvasObjects.find((canvasObj) => canvasObj.id === fabricObj.id);
             if (realObject && realObject.visible !== false) {
               objects.push(realObject);
             }
@@ -420,16 +390,12 @@ export class ClearSelectionContentCommand extends Command {
       }
 
       // 移除栅格化后的图像
-      if (
-        this.rasterizedImage &&
-        this.canvas.getObjects().includes(this.rasterizedImage)
-      ) {
+      if (this.rasterizedImage && this.canvas.getObjects().includes(this.rasterizedImage)) {
         this.canvas.remove(this.rasterizedImage);
       }
 
       // 恢复图层的fabricObjects
-      this.targetLayer.fabricObjects =
-        this.originalLayerBackup.fabricObjects || [];
+      this.targetLayer.fabricObjects = this.originalLayerBackup.fabricObjects || [];
 
       // 重新创建并添加对象到画布
       if (this.targetLayer.fabricObjects.length > 0) {