feat : 显示选区逻辑完成

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

@@ -25,9 +25,13 @@ export class TransformCommand extends Command {
     this.layers = options.layers || null;
     this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID
 
-    const targetObject = findObjectById(this.canvas, this.objectId)?.object || null;
+    const targetObject =
+      findObjectById(this.canvas, this.objectId)?.object || null;
 
-    const { layer, parent } = findLayerRecursively(this.layers.value, targetObject?.layerId);
+    const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      targetObject?.layerId
+    );
 
     this.layer = layer;
     this.parent = parent;
@@ -107,7 +111,7 @@ export class TransformCommand extends Command {
     if (
       this.parent &&
       this.parent?.clippingMask &&
-      this.parent?.children?.length === 1 &&
+      // this.parent?.children?.length === 1 &&
       this.isSginleObject
     ) {
       // 计算对象的变换位置
@@ -116,6 +120,20 @@ export class TransformCommand extends Command {
 
       this.parent.clippingMask.left -= moveLeft;
       this.parent.clippingMask.top -= moveTop;
+      if (this.parent.selectObject) {
+        // 如果有选区 则选区位置也要更新
+        this.parent.selectObject.left = this.parent.clippingMask.left;
+        this.parent.selectObject.top = this.parent.clippingMask.top;
+        const { object } = findObjectById(
+          this.canvas,
+          this.parent.selectObject?.id
+        );
+        object?.set({
+          left: this.parent.clippingMask.left,
+          top: this.parent.clippingMask.top,
+        });
+        object?.setCoords();
+      }
 
       // 重新创建遮罩对象
       const clippingMaskFabricObject = await restoreFabricObject(