feat: add background fill functionality for layers

- Implemented FillLayerBackgroundCommand to fill the background of layers with a specified color.
- Introduced BackgroundFillManager to manage background fill operations.
- Updated LayerManager to include fillLayerBackground method.
- Enhanced LayersPanel with a color picker for filling layer backgrounds.
- Modified RasterizeLayerCommand to reflect changes in terminology and functionality.
- Adjusted LayerSort to ensure filled layers are rendered at the correct z-index.
- Updated relevant utility functions and components to support new fill feature.

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

@@ -486,6 +486,23 @@ export class CanvasManager {
       obj.setCoords(); // 更新对象的控制点坐标
     });
 
+    let isMaskLayer = false;
+    // 更新蒙层位置
+    this.layers.value.forEach((layer) => {
+      if (layer.clippingMask) {
+        isMaskLayer = true;
+        // 如果图层有遮罩，更新遮罩位置
+        layer.clippingMask.left += deltaX;
+        layer.clippingMask.top += deltaY;
+      }
+    });
+
+    if (isMaskLayer) {
+      requestAnimationFrame(() => {
+        this.layerManager?.updateLayersObjectsInteractivity?.();
+      });
+    }
+
     // 如果有背景层，更新蒙层位置
     if (backgroundObject && CanvasConfig.isCropBackground) {
       this.updateMaskPosition(backgroundObject);
@@ -906,7 +923,7 @@ export class CanvasManager {
           "eraserable",
           "erasable",
         ]),
-        layers: JSON.stringify(simplifyLayersData), // 简化图层数据
+        layers: simplifyLayersData, // 简化图层数据
         // layers: JSON.stringify(JSON.parse(JSON.stringify(this.layers.value))), // 全数据
         version: "1.0", // 添加版本信息
         timestamp: new Date().toISOString(), // 添加时间戳
@@ -939,7 +956,7 @@ export class CanvasManager {
 
       // eslint-disable-next-line no-async-promise-executor
       return new Promise(async (resolve, reject) => {
-        const tempLayers = JSON.parse(parsedJson?.layers) || [];
+        const tempLayers = parsedJson?.layers || [];
         const canvasData = parsedJson?.canvas;
 
         if (!tempLayers) {
@@ -999,14 +1016,14 @@ export class CanvasManager {
               // 重置画布数据
               this.setCanvasSize(this.canvas.width, this.canvas.height);
               // 重新构建对象关系
-              restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
+              // restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
               // 验证图层关联关系  -  稳定后可以注释
-              const isValidate = validateLayerAssociations(
-                this.layers.value,
-                this.canvas.getObjects()
-              );
+              // const isValidate = validateLayerAssociations(
+              //   this.layers.value,
+              //   this.canvas.getObjects()
+              // );
 
-              console.log("图层关联验证结果:", isValidate);
+              // console.log("图层关联验证结果:", isValidate);
               // 排序
               // 使用LayerSort工具重新排列画布对象（如果可用）
               await this?.layerManager?.layerSort?.rearrangeObjects();