feat: 添加笔刷指示器功能，支持动态显示当前笔刷大小和颜色；更新图层可擦除状态逻辑

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

@@ -1,5 +1,6 @@
 import { BrushStore } from "../store/BrushStore";
 import { BrushManager } from "./brushes/brushManager";
+import { BrushIndicator } from "./BrushIndicator";
 import { ToolCommand } from "../commands/ToolCommands";
 import { CreateTextCommand } from "../commands/TextCommands";
 import { OperationType } from "../utils/layerHelper";
@@ -47,6 +48,16 @@ export class ToolManager {
         layerManager: this.layerManager, // 传入图层管理器引用
       });
 
+    // 初始化笔刷指示器
+    this.brushIndicator = null;
+    if (this.canvas) {
+      this.brushIndicator = new BrushIndicator(this.canvas, {
+        strokeColor: "rgba(0, 0, 0, 0.6)",
+        strokeWidth: 1,
+        fillColor: "rgba(0, 0, 0, 0.1)",
+      });
+    }
+
     // 观察者列表
     this.observers = [];
 
@@ -337,6 +348,11 @@ export class ToolManager {
     // 保存先前的工具
     this.previousTool = this.activeTool.value;
 
+    // 如果切换到非画笔工具，禁用笔刷指示器
+    if (!this._shouldShowBrushIndicator(toolId)) {
+      this._disableBrushIndicator();
+    }
+
     // 设置新工具
     this.activeTool.value = toolId;
 
@@ -465,6 +481,9 @@ export class ToolManager {
       // 更新应用到画布
       this.brushManager.updateBrush();
     }
+
+    // 启用笔刷指示器并同步颜色
+    this._enableBrushIndicator();
   }
 
   /**
@@ -479,6 +498,9 @@ export class ToolManager {
     if (this.brushManager) {
       this.brushManager.createEraser();
     }
+
+    // 启用笔刷指示器
+    this._enableBrushIndicator();
   }
 
   /**
@@ -953,6 +975,9 @@ export class ToolManager {
 
     // 更新应用到画布
     this.brushManager.updateBrush();
+
+    // 更新笔刷指示器大小
+    this.updateBrushIndicatorSize(size);
   }
 
   /**
@@ -1046,6 +1071,9 @@ export class ToolManager {
 
     // 更新应用到画布
     this.brushManager.updateBrush();
+
+    // 更新笔刷指示器颜色
+    this.updateBrushIndicatorColor(color);
   }
 
   /**
@@ -1126,6 +1154,12 @@ export class ToolManager {
       this.brushManager.dispose();
     }
 
+    // 清理笔刷指示器
+    if (this.brushIndicator) {
+      this.brushIndicator.dispose();
+      this.brushIndicator = null;
+    }
+
     // 移除文本编辑相关事件监听器
     if (this.canvas) {
       this.canvas.off("mouse:dblclick", this._textEditHandler);
@@ -1160,10 +1194,12 @@ export class ToolManager {
     this.canvas.isDrawingMode = true;
     this.canvas.selection = false;
 
+    const redColor = "#FF0000";
+
     // 确保有笔刷管理器
     if (this.brushManager) {
       // 设置红色笔刷
-      this.brushManager.setBrushColor("#FF0000"); // 纯红色
+      this.brushManager.setBrushColor(redColor); // 纯红色
       this.brushManager.setBrushOpacity(1.0); // 完全不透明
       this.brushManager.setBrushType("pencil"); // 铅笔类型
 
@@ -1175,6 +1211,9 @@ export class ToolManager {
       // 更新应用到画布
       this.brushManager.updateBrush();
     }
+
+    // 启用笔刷指示器并设置红色
+    this._enableBrushIndicator(redColor);
   }
 
   /**
@@ -1186,10 +1225,12 @@ export class ToolManager {
     this.canvas.isDrawingMode = true;
     this.canvas.selection = false;
 
+    const greenColor = "#00FF00";
+
     // 确保有笔刷管理器
     if (this.brushManager) {
       // 设置绿色笔刷
-      this.brushManager.setBrushColor("#00FF00"); // 纯绿色
+      this.brushManager.setBrushColor(greenColor); // 纯绿色
       this.brushManager.setBrushOpacity(1.0); // 完全不透明
       this.brushManager.setBrushType("pencil"); // 铅笔类型
 
@@ -1201,6 +1242,9 @@ export class ToolManager {
       // 更新应用到画布
       this.brushManager.updateBrush();
     }
+
+    // 启用笔刷指示器并设置绿色
+    this._enableBrushIndicator(greenColor);
   }
 
   /**
@@ -1264,4 +1308,135 @@ export class ToolManager {
     const tool = this.tools[toolId];
     return tool && tool.redGreenOnly === true;
   }
+
+  /**
+   * 启用笔刷指示器
+   * @param {String} color 笔刷颜色（可选）
+   * @private
+   */
+  _enableBrushIndicator(color) {
+    if (!this.brushIndicator) return;
+
+    // 获取当前笔刷大小
+    const brushSize = this._getCurrentBrushSize();
+
+    // 获取当前笔刷颜色
+    const brushColor = color || this._getCurrentBrushColor();
+
+    // 启用指示器
+    this.brushIndicator.enable(brushSize);
+
+    // 更新指示器颜色
+    this.brushIndicator.updateColor(brushColor);
+
+    console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`);
+  }
+
+  /**
+   * 禁用笔刷指示器
+   * @private
+   */
+  _disableBrushIndicator() {
+    if (!this.brushIndicator) return;
+
+    this.brushIndicator.disable();
+    console.log("笔刷指示器已禁用");
+  }
+
+  /**
+   * 更新笔刷指示器大小
+   * @param {Number} size 新的笔刷大小
+   */
+  updateBrushIndicatorSize(size) {
+    if (!this.brushIndicator) return;
+
+    this.brushIndicator.updateSize(size);
+  }
+
+  /**
+   * 更新笔刷指示器颜色
+   * @param {String} color 新的笔刷颜色
+   */
+  updateBrushIndicatorColor(color) {
+    if (!this.brushIndicator) return;
+
+    this.brushIndicator.updateColor(color);
+  }
+
+  /**
+   * 获取当前笔刷大小
+   * @private
+   * @returns {Number} 当前笔刷大小
+   */
+  _getCurrentBrushSize() {
+    // 优先从 BrushStore 获取
+    if (BrushStore && BrushStore.state.size) {
+      return BrushStore.state.size;
+    }
+
+    // 从笔刷管理器获取
+    if (this.brushManager && this.brushManager.getBrushSize) {
+      return this.brushManager.getBrushSize();
+    }
+
+    // 从画布笔刷获取
+    if (
+      this.canvas &&
+      this.canvas.freeDrawingBrush &&
+      this.canvas.freeDrawingBrush.width
+    ) {
+      return this.canvas.freeDrawingBrush.width;
+    }
+
+    // 默认值
+    return 10;
+  }
+
+  /**
+   * 获取当前笔刷颜色
+   * @private
+   * @returns {String} 当前笔刷颜色
+   */
+  _getCurrentBrushColor() {
+    // 优先从 BrushStore 获取
+    if (BrushStore && BrushStore.state.color) {
+      return BrushStore.state.color;
+    }
+
+    // 从笔刷管理器获取
+    if (this.brushManager && this.brushManager.getBrushColor) {
+      return this.brushManager.getBrushColor();
+    }
+
+    // 从画布笔刷获取
+    if (
+      this.canvas &&
+      this.canvas.freeDrawingBrush &&
+      this.canvas.freeDrawingBrush.color
+    ) {
+      return this.canvas.freeDrawingBrush.color;
+    }
+
+    // 默认值
+    return "#000000";
+  }
+
+  /**
+   * 检查当前工具是否需要显示笔刷指示器
+   * @param {String} toolId 工具ID（可选，不传则使用当前工具）
+   * @returns {Boolean} 是否需要显示
+   */
+  _shouldShowBrushIndicator(toolId) {
+    const currentTool = toolId || this.activeTool.value;
+
+    // 画笔相关工具需要显示指示器
+    const brushTools = [
+      OperationType.DRAW,
+      OperationType.ERASER,
+      OperationType.RED_BRUSH,
+      OperationType.GREEN_BRUSH,
+    ];
+
+    return brushTools.includes(currentTool);
+  }
 }