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

src/component/Canvas/CanvasEditor/managers/minimap/MinimapManager.js

@@ -144,10 +144,7 @@ export class MinimapManager {
     this.eventHandlers.mouseup = this.handleMinimapMouseUp;
     // 移除mouseout事件处理，允许拖动操作持续到鼠标释放
 
-    this.minimapCanvas.addEventListener(
-      "mousedown",
-      this.eventHandlers.mousedown
-    );
+    this.minimapCanvas.addEventListener("mousedown", this.eventHandlers.mousedown);
     document.addEventListener("mousemove", this.eventHandlers.mousemove);
     document.addEventListener("mouseup", this.eventHandlers.mouseup);
     // 移除mouseout事件监听
@@ -177,10 +174,7 @@ export class MinimapManager {
 
     this.eventHandlers.touchend = this.handleMinimapMouseUp;
 
-    this.minimapCanvas.addEventListener(
-      "touchstart",
-      this.eventHandlers.touchstart
-    );
+    this.minimapCanvas.addEventListener("touchstart", this.eventHandlers.touchstart);
     document.addEventListener("touchmove", this.eventHandlers.touchmove, {
       passive: false,
     });
@@ -204,18 +198,12 @@ export class MinimapManager {
     this.mainCanvas.off("object:rotating", this.handleMainCanvasChange);
 
     // 移除鼠标事件监听
-    this.minimapCanvas.removeEventListener(
-      "mousedown",
-      this.eventHandlers.mousedown
-    );
+    this.minimapCanvas.removeEventListener("mousedown", this.eventHandlers.mousedown);
     document.removeEventListener("mousemove", this.eventHandlers.mousemove);
     document.removeEventListener("mouseup", this.eventHandlers.mouseup);
 
     // 移除触摸事件监听
-    this.minimapCanvas.removeEventListener(
-      "touchstart",
-      this.eventHandlers.touchstart
-    );
+    this.minimapCanvas.removeEventListener("touchstart", this.eventHandlers.touchstart);
     document.removeEventListener("touchmove", this.eventHandlers.touchmove);
     document.removeEventListener("touchend", this.eventHandlers.touchend);
   }
@@ -281,8 +269,7 @@ export class MinimapManager {
     }
 
     // 添加边距
-    const padding =
-      Math.max(this.mainCanvas.getWidth(), this.mainCanvas.getHeight()) * 0.1;
+    const padding = Math.max(this.mainCanvas.getWidth(), this.mainCanvas.getHeight()) * 0.1;
     this.contentBounds = {
       minX: minX - padding,
       minY: minY - padding,
@@ -347,11 +334,7 @@ export class MinimapManager {
     this.dragStart = { x, y };
 
     // 移动画布视口
-    this.moveViewport(
-      this.dragStartViewport.x + deltaX,
-      this.dragStartViewport.y + deltaY,
-      false
-    );
+    this.moveViewport(this.dragStartViewport.x + deltaX, this.dragStartViewport.y + deltaY, false);
 
     // 更新拖拽起始视口位置
     this.dragStartViewport = this.calculateViewportRect();
@@ -391,9 +374,7 @@ export class MinimapManager {
       viewportHeight = this.lastViewportSize.height;
     } else {
       viewportWidth = Math.round((this.mainCanvas.getWidth() / zoom) * scaleX);
-      viewportHeight = Math.round(
-        (this.mainCanvas.getHeight() / zoom) * scaleY
-      );
+      viewportHeight = Math.round((this.mainCanvas.getHeight() / zoom) * scaleY);
     }
 
     // 添加边界限制，确保视口不会超出小地图
@@ -476,21 +457,11 @@ export class MinimapManager {
 
     try {
       // 清空小地图
-      this.minimapCtx.clearRect(
-        0,
-        0,
-        this.minimapSize.width,
-        this.minimapSize.height
-      );
+      this.minimapCtx.clearRect(0, 0, this.minimapSize.width, this.minimapSize.height);
 
       // 绘制小地图背景
       this.minimapCtx.fillStyle = this.mainCanvas.backgroundColor || "#f0f0f0";
-      this.minimapCtx.fillRect(
-        0,
-        0,
-        this.minimapSize.width,
-        this.minimapSize.height
-      );
+      this.minimapCtx.fillRect(0, 0, this.minimapSize.width, this.minimapSize.height);
 
       // 计算内容边界尺寸
       const contentWidth = this.contentBounds.maxX - this.contentBounds.minX;
@@ -654,11 +625,7 @@ export class MinimapManager {
     this.removeEventListeners();
 
     // 从DOM中移除canvas
-    if (
-      this.container &&
-      this.minimapCanvas &&
-      this.minimapCanvas.parentNode === this.container
-    ) {
+    if (this.container && this.minimapCanvas && this.minimapCanvas.parentNode === this.container) {
       this.container.removeChild(this.minimapCanvas);
     }
 
@@ -709,12 +676,7 @@ export class MinimapManager {
       }
 
       const offCtx = this._offscreenCanvas.getContext("2d");
-      offCtx.clearRect(
-        0,
-        0,
-        this._offscreenCanvas.width,
-        this._offscreenCanvas.height
-      );
+      offCtx.clearRect(0, 0, this._offscreenCanvas.width, this._offscreenCanvas.height);
 
       // 绘制图层内容到离屏画布
       this._renderLayersToMinimap(offCtx, ratio);
@@ -755,8 +717,8 @@ export class MinimapManager {
         typeof this.canvas.layers.value !== "undefined"
           ? this.canvas.layers.value
           : Array.isArray(this.canvas.layers)
-          ? this.canvas.layers
-          : [];
+            ? this.canvas.layers
+            : [];
 
       // 过滤出可见图层
       layersArray.forEach((layer) => {
@@ -800,10 +762,8 @@ export class MinimapManager {
 
           const left = fabricObj.left * ratio;
           const top = fabricObj.top * ratio;
-          const width =
-            (fabricObj.width || 20) * (fabricObj.scaleX || 1) * ratio;
-          const height =
-            (fabricObj.height || 20) * (fabricObj.scaleY || 1) * ratio;
+          const width = (fabricObj.width || 20) * (fabricObj.scaleX || 1) * ratio;
+          const height = (fabricObj.height || 20) * (fabricObj.scaleY || 1) * ratio;
 
           ctx.fillRect(left, top, width, height);
         }