feat : 显示选区逻辑完成

src/component/Canvas/CanvasEditor/managers/LayerManager.js

@@ -64,6 +64,7 @@ import { isBoolean, template } from "lodash-es";
 import {
   findObjectById,
   generateId,
+  insertObjectAtZIndex,
   optimizeCanvasRendering,
 } from "../utils/helper";
 import { message } from "ant-design-vue";
@@ -189,19 +190,40 @@ export class LayerManager {
    * 根据当前编辑模式和图层状态设置对象的交互属性
    * @private
    */
-  async updateLayersObjectsInteractivity(isUseOptimize = true) {
+  async updateLayersObjectsInteractivity(
+    isUseOptimize = true,
+    { isMoveing = false } = {}
+  ) {
     if (!this.canvas) return;
     if (isUseOptimize) {
       // 优化渲染  -  统一批处理  支持异步回调
       await optimizeCanvasRendering(this.canvas, async () => {
         // 应用图层交互规则
-        await this._applyInteractionRules();
+        await this._applyInteractionRules({ isMoveing });
       });
     } else {
       // 直接应用图层交互规则
-      await this._applyInteractionRules();
+      await this._applyInteractionRules({ isMoveing });
     }
 
+    // customType: "selectionObject",
+    // 清空没有关联的选区图层
+    const selectionObjects = this.canvas
+      .getObjects()
+      ?.filter((obj) => obj.customType == "selectionObject");
+
+    selectionObjects.forEach((obj) => {
+      const isObjExtis = this.layers?.value.find(
+        (layer) => layer?.selectObject?.id == obj.id
+      );
+      if (!isObjExtis) {
+        // 不存在则移除对象
+        this?.canvas?.remove(obj);
+      }
+    });
+
+    selectionObjects && this.canvas.renderAll();
+
     // // 性能优化：使用requestAnimationFrame
     // requestAnimationFrame(() => {
     //   // 暂停渲染以提高性能
@@ -304,7 +326,7 @@ export class LayerManager {
   }
 
   // 私有方法：应用交互规则
-  async _applyInteractionRules() {
+  async _applyInteractionRules({ isMoveing }) {
     console.log("updateLayersObjectsInteractivity ===>", this.editorMode);
     const objects = this.canvas.getObjects();
     const editorMode = this.editorMode || CanvasConfig.defaultTool;
@@ -414,6 +436,68 @@ export class LayerManager {
         //   }
         // }
       }
+
+      // 设置画布选区内容
+      if (layer.selectObject && !isMoveing) {
+        // 如果有选区对象
+        let insetIndex = objects.findIndex(
+          (o) => o.id === layer.selectObject.id
+        );
+        let isOldSelectObject = insetIndex >= 0; // 是否存在旧的选区对象
+        const newSelectObject = await restoreFabricObject(
+          layer.selectObject,
+          this.canvas
+        );
+
+        if (insetIndex < 0) {
+          // 如果没有找到选区对象，则添加到画布  先查找子图层元素下标  如果没有则要向前查找有元素的下标 否则直接添加，因为选区要遮罩在选区图层的最上面
+          layer.children?.forEach((childLayer) => {
+            const childObj = this.canvas
+              .getObjects()
+              .find((o) => o.layerId === childLayer.id);
+            if (childObj) {
+              insetIndex = objects.indexOf(childObj);
+            }
+          });
+        }
+
+        // 向前查找，找不到则添加到最后
+        if (insetIndex < 0) {
+          // 如果没有找到选区对象，则添加到画布
+          const layerIndex = this.layers.value.findIndex(
+            (ll) => ll.id === layer.id
+          );
+
+          for (let i = layerIndex - 1; i >= 0; i--) {
+            const l = this.layers.value[i];
+            if (l.fabricObjects?.length > 0) {
+              insetIndex = objects.findIndex(
+                (o) => o.id === l.fabricObjects?.[0].id
+              );
+              if (insetIndex >= 0) break; // 找到第一个有对象的图层
+            }
+          }
+          insetIndex = insetIndex < 0 ? objects.length : insetIndex;
+        }
+
+        newSelectObject.set({
+          id: layer.selectObject.id,
+          customType: layer.selectObject.customType,
+          selectable: false,
+          evented: false,
+          erasable: false,
+        });
+
+        // 有则更新对象
+        // 没有则反序列创建新的选区对象
+        insertObjectAtZIndex(
+          this.canvas,
+          newSelectObject,
+          insetIndex,
+          false,
+          isOldSelectObject
+        );
+      }
     });
   }
 
@@ -871,6 +955,7 @@ export class LayerManager {
       layers: this.layers,
       layerId: layerId,
       activeLayerId: this.activeLayerId,
+      layerManager: this,
     });
 
     // 执行命令