@zzalai/leafer-point-annotation 1.1.0 → 1.1.2

package/src/components/PointAnnotation.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="point-annotation"
-    :class="{ 'has-image': showTools }"
+    :class="{ 'has-image': hasImage && showToolbar }"
     @focus="isCanvasFocused = true"
     @blur="isCanvasFocused = false"
     @mouseenter="isMouseOverCanvas = true"
@@ -63,7 +63,7 @@
       </div>
 
       <!-- 缩放控制器 - 只在有图片时显示 -->
-      <div v-if="showTools" class="zoom-controller">
+      <div v-if="showZoomController" class="zoom-controller">
         <button class="zoom-button" title="缩小 (Ctrl+-)" @click="zoomOut">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -109,7 +109,7 @@
     </div>
 
     <!-- 工具栏 - 只在有图片时显示 -->
-    <div v-if="showTools" class="toolbar">
+    <div v-if="showToolbar" class="toolbar">
       <button
         class="tool-button"
         :class="{ active: currentTool === 'select' }"
@@ -156,62 +156,52 @@
         </svg>
         <span class="hotkey-hint" v-if="showHotkeys">P</span>
       </button>
-      <button
-        class="tool-button"
-        :class="{ active: currentTool === 'brush' }"
-        title="笔刷工具 (B)"
-        @click="brushTool"
-        ref="brushButtonRef"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+      <template v-if="effectiveEnableBrush">
+        <button
+          class="tool-button"
+          :class="{ active: currentTool === 'brush' }"
+          title="笔刷工具 (B)"
+          @click="brushTool()"
+          ref="brushButtonRef"
         >
-          <path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
-          <path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"></path>
-        </svg>
-        <span class="hotkey-hint" v-if="showHotkeys">B</span>
-      </button>
-      <button
-        class="tool-button"
-        :class="{ active: currentTool === 'eraser' }"
-        title="橡皮擦工具 (E)"
-        @click="eraserTool"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
+            <path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"></path>
+          </svg>
+          <span class="hotkey-hint" v-if="showHotkeys">B</span>
+        </button>
+        <button
+          class="tool-button"
+          :class="{ active: currentTool === 'eraser' }"
+          title="橡皮擦工具 (E)"
+          @click="eraserTool"
         >
-          <path d="M20 20H7L3 16C2.4 15.4 2.4 14.4 3 13.8L13.8 3C14.4 2.4 15.4 2.4 16 3L21 8C21.6 8.6 21.6 9.6 21 10.2L10.2 21C9.6 21.6 8.6 21.6 8 21L3 16"></path>
-        </svg>
-        <span class="hotkey-hint" v-if="showHotkeys">E</span>
-      </button>
-      <!-- 笔刷大小调整 -->
-      <!-- <div v-if="currentTool === 'brush' || currentTool === 'eraser'" class="size-control">
-        <div class="size-label">大小</div>
-        <input
-          type="range"
-          class="size-slider"
-          :min="localBrushStyle.minSize"
-          :max="localBrushStyle.maxSize"
-          v-model="localBrushStyle.size"
-        />
-        <div class="size-value">{{ localBrushStyle.size }}</div>
-      </div> -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 20H7L3 16C2.4 15.4 2.4 14.4 3 13.8L13.8 3C14.4 2.4 15.4 2.4 16 3L21 8C21.6 8.6 21.6 9.6 21 10.2L10.2 21C9.6 21.6 8.6 21.6 8 21L3 16"></path>
+          </svg>
+          <span class="hotkey-hint" v-if="showHotkeys">E</span>
+        </button>
+      </template>
       <button class="tool-button" title="撤销 (Ctrl+Z)" @click="undo">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -267,8 +257,9 @@
     </div>
   </div>
   
-  <!-- 笔刷样式配置面板 -->
+  <!-- 笔刷样式配置面板（仅在 enableBrush=true 时渲染） -->
   <BrushStylePanel
+    v-if="effectiveEnableBrush"
     :visible="showBrushPanel"
     :brush-style="localBrushStyle"
     :button-rect="brushButtonRect"
@@ -304,7 +295,7 @@ import { tinykeys } from "tinykeys";
 import { PointAnnotationElement } from "@/elements/PointAnnotationElement";
 import { CanvasBrush } from "@/utils/CanvasBrush";
 import BrushStylePanel from "./BrushStylePanel.vue";
-import type { PointAnnotation, PointStyle, BrushStyle } from "@/types";
+import type { PointAnnotation, PointStyle, BrushStyle, BrushLayerConfig } from "@/types";
 import { DEFAULT_POINT_STYLE, DEFAULT_BRUSH_STYLE } from "@/types";
 
 // Props
@@ -314,23 +305,20 @@ export interface ImageSource {
 }
 
 export interface OptionsSource {
-  pointStyle?: {
-    fill: string;
-    stroke: string;
-    strokeWidth: number;
-    width: number;
-    height: number;
-  };
-  brushStyle?: BrushStyle;
-  selectedPointStyle?: {
-    fill: string;
-    stroke: string;
-    strokeWidth?: number;
-  };
+  pointStyle?: Partial<PointStyle>;
+  brushStyle?: Partial<BrushStyle>;
+  brushLayers?: BrushLayerConfig[];
+  maxBrushLayers?: number;
   maxPoints?: number;
   maxUndoSteps?: number;
   maskExportFormat?: 'png' | 'jpeg' | 'jpg';
   maskExportForeground?: 'black' | 'white';
+  showToolbar?: boolean;
+  showZoomController?: boolean;
+  canvasBackground?: string;
+  zoomMin?: number;
+  zoomMax?: number;
+  enableBrush?: boolean;
 }
 
 const props = defineProps({
@@ -343,6 +331,11 @@ const props = defineProps({
     type: Object as () => OptionsSource,
     default: () => ({}),
   },
+  currentLayer: {
+    type: String,
+    required: false,
+    default: null,
+  },
 });
 
 const emit = defineEmits([
@@ -352,6 +345,8 @@ const emit = defineEmits([
   "loadError",
   "undoStateChange",
   "redoStateChange",
+  "update:currentLayer",
+  "layerChange",
 ]);
 
 const canvasContainer = ref<HTMLElement | undefined>(undefined);
@@ -384,7 +379,10 @@ const pointAnnotations = ref<PointAnnotation[]>([]);
 const pointCounter = ref(1);
 
 // 是否显示工具界面
-const showTools = computed(() => loadStatus.value === 'success');
+const hasImage = computed(() => loadStatus.value === 'success');
+const showToolbar = computed(() => hasImage.value && (props.options?.showToolbar !== false));
+const showZoomController = computed(() => hasImage.value && (props.options?.showZoomController !== false));
+const effectiveEnableBrush = computed(() => props.options?.enableBrush !== false);
 
 // 点标注样式配置
 const pointStyle = computed<PointStyle>(() => ({
@@ -409,13 +407,13 @@ watch(brushStyle, (newVal: BrushStyle) => {
   localBrushStyle.value = { ...newVal };
 }, { immediate: true });
 
-// 监听笔刷透明度变化，更新 CanvasBrush 的 Group 透明度
+// 监听笔刷透明度变化，更新所有图层的 CanvasBrush 透明度
 watch(
   () => localBrushStyle.value.opacity,
   (newOpacity) => {
-    if (canvasBrush) {
-      canvasBrush.setOpacity(newOpacity);
-    }
+    Object.values(canvasBrushesByLayer.value).forEach(brush => {
+      brush.setOpacity(newOpacity);
+    });
   }
 );
 
@@ -444,8 +442,83 @@ watch(
   { immediate: true }
 );
 
+// 多图层相关状态
+const MAX_BRUSH_LAYERS = 8;
+const DEFAULT_LAYER_VALUE = 'default';
+
+// 计算实际的图层配置
+const effectiveBrushLayers = computed<BrushLayerConfig[]>(() => {
+  const configured = props.options?.brushLayers;
+  if (!configured || configured.length === 0) {
+    return [{
+      label: '笔刷',
+      value: DEFAULT_LAYER_VALUE,
+      color: localBrushStyle.value.color,
+      opacity: localBrushStyle.value.opacity,
+      size: localBrushStyle.value.size,
+    }];
+  }
+  const maxLayers = props.options?.maxBrushLayers || MAX_BRUSH_LAYERS;
+  return configured.slice(0, maxLayers);
+});
+
+// 每个图层独立的 CanvasBrush 实例
+const canvasBrushesByLayer = ref<Record<string, CanvasBrush>>({});
+
+// 内部当前激活图层（非受控模式使用）
+const internalCurrentLayer = ref<string>('');
+
+// 实际当前激活图层（受控 or 非受控）
+const effectiveCurrentLayer = computed<string>(() => {
+  if (props.currentLayer && effectiveBrushLayers.value.some(l => l.value === props.currentLayer)) {
+    return props.currentLayer;
+  }
+  if (internalCurrentLayer.value && effectiveBrushLayers.value.some(l => l.value === internalCurrentLayer.value)) {
+    return internalCurrentLayer.value;
+  }
+  return effectiveBrushLayers.value[0]?.value || DEFAULT_LAYER_VALUE;
+});
+
+// 当前激活的 canvasBrush
+const activeCanvasBrush = computed<CanvasBrush | null>(() => {
+  return canvasBrushesByLayer.value[effectiveCurrentLayer.value] || null;
+});
+
+// 监听 enableBrush 变化（运行时切换笔刷开关）
+// - 关闭：清除所有笔刷 canvas 并重置 tool
+// - 开启：重新初始化笔刷图层
+watch(
+  () => effectiveEnableBrush.value,
+  (newVal) => {
+    // 关闭笔刷 → 清理画布 + 重置 tool 状态
+    if (!newVal) {
+      if (currentTool.value === 'brush' || currentTool.value === 'eraser') {
+        currentTool.value = 'select';
+      }
+      showBrushPanel.value = false;
+    }
+    // 开启笔刷（且已有画布）→ 重新初始化笔刷图层
+    if (newVal && imageWidth.value && imageHeight.value && app) {
+      initBrushLayers();
+    }
+  }
+);
+
+// 监听图层配置变化（支持运行时从单图层切到多图层，或切换图层配置）
+watch(
+  () => {
+    const layers = props.options?.brushLayers;
+    return layers ? layers.map(l => l.value).sort().join(',') : '';
+  },
+  () => {
+    if (!effectiveEnableBrush.value) return;
+    if (imageWidth.value && imageHeight.value && app) {
+      initBrushLayers();
+    }
+  }
+);
+
 // 笔刷相关状态
-let canvasBrush: CanvasBrush | null = null;
 const isDrawing = ref(false);
 
 // 撤销/重做管理器
@@ -466,12 +539,15 @@ const changePointScaleRelativeCanvas = (pointAnnotationLayer: Group | null) => {
 }
 
 const initCanvas = () => {
+  const canvasBackground = props.options?.canvasBackground ?? "#e3e3e3";
+  const zoomMin = props.options?.zoomMin ?? 0.2;
+  const zoomMax = props.options?.zoomMax ?? 4;
   app = new App({
     view: canvasContainer.value,
     width: canvasContainer.value?.clientWidth || 800,
     height: canvasContainer.value?.clientHeight || 600,
-    fill: "#e3e3e3",
-    zoom: { min: 0.2, max: 4 },
+    fill: canvasBackground,
+    zoom: { min: zoomMin, max: zoomMax },
     editor: {
       rotateable: false,
       middlePoint: {},
@@ -640,30 +716,40 @@ const handleDrop = (event: DragEvent) => {
 };
 
 const exportCanvasJSON = (): string => {
+  const brushLayersData: Record<string, string> = {};
+  Object.entries(canvasBrushesByLayer.value).forEach(([layerValue, brush]) => {
+    const maskData = brush.getImageData();
+    if (maskData) {
+      brushLayersData[layerValue] = maskData;
+    }
+  });
+
   const exportData = {
     version: '1.0',
     imageUrl: hasLocalImage.value ? localImageUrl.value : (props.imageSource?.url || ''),
     imageWidth: imageWidth.value,
     imageHeight: imageHeight.value,
     pointAnnotations: [...pointAnnotations.value],
-    brushMask: canvasBrush?.getImageData() || null,
+    brushLayers: brushLayersData,
+    brushMask: activeCanvasBrush.value?.getImageData() || null,
     exportTime: Date.now(),
   };
   return JSON.stringify(exportData, null, 2);
 };
 
-// 导出二值图（Mask）
-const exportMaskImage = (format?: 'png' | 'jpeg' | 'jpg', foregroundColor?: 'black' | 'white'): Promise<string | null> => {
+// 内部辅助：把笔刷图层渲染为 HTMLCanvas + mime（二值图）
+// 所有导出方法（dataURL / Blob / File）统一复用这个逻辑，避免重复代码
+const buildMaskCanvas = (
+  brush: any,
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<{ canvas: HTMLCanvasElement; mime: string } | null> => {
   return new Promise((resolve) => {
-    if (!canvasBrush) {
-      resolve(null);
-      return;
-    }
-
     const exportFormat = format || props.options?.maskExportFormat || 'png';
     const fgColor = foregroundColor || props.options?.maskExportForeground || 'black';
+    const mime = exportFormat === 'png' ? 'image/png' : 'image/jpeg';
 
-    const maskData = canvasBrush.getImageData();
+    const maskData = brush.getImageData();
     if (!maskData) {
       resolve(null);
       return;
@@ -701,11 +787,7 @@ const exportMaskImage = (format?: 'png' | 'jpeg' | 'jpg', foregroundColor?: 'bla
       }
       ctx.putImageData(imageData, 0, 0);
 
-      if (exportFormat === 'png') {
-        resolve(canvas.toDataURL('image/png'));
-      } else {
-        resolve(canvas.toDataURL('image/jpeg', 0.95));
-      }
+      resolve({ canvas, mime });
     };
 
     htmlImg.onerror = () => {
@@ -716,6 +798,135 @@ const exportMaskImage = (format?: 'png' | 'jpeg' | 'jpg', foregroundColor?: 'bla
   });
 };
 
+// 辅助函数：导出单个图层的 mask（返回 dataURL）
+const exportSingleLayerMask = async (
+  brush: any,
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<string | null> => {
+  const result = await buildMaskCanvas(brush, format, foregroundColor);
+  if (!result) return null;
+  const { canvas, mime } = result;
+  return mime === 'image/png'
+    ? canvas.toDataURL('image/png')
+    : canvas.toDataURL('image/jpeg', 0.95);
+};
+
+// 导出二值图（Mask）- 当前激活图层（笔刷禁用时返回 null）
+const exportMaskImage = (format?: 'png' | 'jpeg' | 'jpg', foregroundColor?: 'black' | 'white'): Promise<string | null> => {
+  if (!effectiveEnableBrush.value) return Promise.resolve(null);
+  if (!activeCanvasBrush.value) return Promise.resolve(null);
+  return exportSingleLayerMask(activeCanvasBrush.value, format, foregroundColor);
+};
+
+// 导出指定图层的 mask（笔刷禁用时返回 null）
+const exportMaskImageByLayer = (
+  layerValue: string,
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<string | null> => {
+  if (!effectiveEnableBrush.value) return Promise.resolve(null);
+  const brush = canvasBrushesByLayer.value[layerValue];
+  if (!brush) return Promise.resolve(null);
+  return exportSingleLayerMask(brush, format, foregroundColor);
+};
+
+// 导出所有图层的 masks（笔刷禁用时返回空对象）
+const exportAllMaskImages = (
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<Record<string, string>> => {
+  if (!effectiveEnableBrush.value) return Promise.resolve({});
+  return new Promise(async (resolve) => {
+    const result: Record<string, string> = {};
+    for (const [layerValue, brush] of Object.entries(canvasBrushesByLayer.value)) {
+      const mask = await exportSingleLayerMask(brush, format, foregroundColor);
+      if (mask) {
+        result[layerValue] = mask;
+      }
+    }
+    resolve(result);
+  });
+};
+
+// canvas.toBlob 的 Promise 版本（避免回调地狱）
+const canvasToBlob = (canvas: HTMLCanvasElement, mime: string): Promise<Blob | null> => {
+  return new Promise((resolve) => {
+    try {
+      canvas.toBlob((blob) => {
+        resolve(blob);
+      }, mime, mime === 'image/jpeg' ? 0.95 : undefined);
+    } catch (_e) {
+      resolve(null);
+    }
+  });
+};
+
+// 获取指定图层 mask 为 Blob（用于传后端接口上传文件）
+// - layerValue 不传 → 当前激活图层
+// - 笔刷禁用时返回 null
+const getMaskBlob = (
+  layerValue?: string,
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<Blob | null> => {
+  if (!effectiveEnableBrush.value) return Promise.resolve(null);
+  const brush = layerValue
+    ? canvasBrushesByLayer.value[layerValue]
+    : activeCanvasBrush.value;
+  if (!brush) return Promise.resolve(null);
+  return new Promise(async (resolve) => {
+    const result = await buildMaskCanvas(brush, format, foregroundColor);
+    if (!result) return resolve(null);
+    const blob = await canvasToBlob(result.canvas, result.mime);
+    resolve(blob);
+  });
+};
+
+// 获取指定图层 mask 为 File（用于传后端接口上传）
+// - 笔刷禁用时返回 null
+const getMaskFile = (
+  layerValue?: string,
+  filename?: string,
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<File | null> => {
+  if (!effectiveEnableBrush.value) return Promise.resolve(null);
+  return new Promise(async (resolve) => {
+    const blob = await getMaskBlob(layerValue, format, foregroundColor);
+    if (!blob) return resolve(null);
+    const mime = format === 'jpeg' || format === 'jpg' ? 'image/jpeg' : 'image/png';
+    const ext = format === 'jpeg' || format === 'jpg' ? 'jpg' : 'png';
+    const finalName = filename || `mask_${layerValue || 'current'}_${Date.now()}.${ext}`;
+    try {
+      resolve(new File([blob], finalName, { type: mime }));
+    } catch (_e) {
+      const fallback: any = blob as any;
+      fallback.name = finalName;
+      fallback.type = mime;
+      resolve(fallback);
+    }
+  });
+};
+
+// 获取所有图层的 mask Blob（笔刷禁用时返回空对象）
+const getAllMaskBlobs = (
+  format?: 'png' | 'jpeg' | 'jpg',
+  foregroundColor?: 'black' | 'white'
+): Promise<Record<string, Blob>> => {
+  if (!effectiveEnableBrush.value) return Promise.resolve({});
+  return new Promise(async (resolve) => {
+    const result: Record<string, Blob> = {};
+    for (const [layerValue, brush] of Object.entries(canvasBrushesByLayer.value)) {
+      const canvasResult = await buildMaskCanvas(brush, format, foregroundColor);
+      if (!canvasResult) continue;
+      const blob = await canvasToBlob(canvasResult.canvas, canvasResult.mime);
+      if (blob) result[layerValue] = blob;
+    }
+    resolve(result);
+  });
+};
+
 const exportCOCO = (): string => {
   const coco = exportCOCOFormat(
     pointAnnotations.value,
@@ -745,13 +956,11 @@ const importCanvasJSON = async (
   try {
     const data = JSON.parse(jsonString);
 
-    // 如果指定了重置缩放
     if (options?.resetZoom) {
       resetZoom();
       fitImageToCanvas();
     }
 
-    // 清除现有标注
     pointAnnotations.value.forEach((p: any) => {
       const element = pointLayer.findOne(`#${p.id}`);
       if (element) {
@@ -761,15 +970,13 @@ const importCanvasJSON = async (
     });
     pointAnnotations.value = [];
 
-    // 清除笔刷
-    canvasBrush?.clear();
+    // 清除所有图层的笔刷
+    Object.values(canvasBrushesByLayer.value).forEach(brush => brush.clear());
 
-    // 如果有图片URL且与当前不同，加载图片
     if (data.imageUrl && data.imageUrl !== props.imageSource.url) {
       await loadImage(data.imageUrl);
     }
 
-    // 恢复点标注
     if (data.pointAnnotations && Array.isArray(data.pointAnnotations)) {
       for (const pointData of data.pointAnnotations) {
         const pointElement = new PointAnnotationElement(pointData, pointStyle.value);
@@ -781,12 +988,22 @@ const importCanvasJSON = async (
       }
     }
 
-    // 恢复笔刷遮罩
-    if (data.brushMask && canvasBrush) {
-      canvasBrush.restoreImageData(data.brushMask);
+    // 优先恢复多图层笔刷遮罩
+    if (data.brushLayers && typeof data.brushLayers === 'object') {
+      Object.entries(data.brushLayers).forEach(([layerValue, maskData]) => {
+        const brush = canvasBrushesByLayer.value[layerValue];
+        if (brush && maskData) {
+          brush.restoreImageData(maskData as string);
+        }
+      });
+    } else if (data.brushMask && activeCanvasBrush.value) {
+      // 向后兼容：单个 brushMask 时恢复到当前图层
+      activeCanvasBrush.value.restoreImageData(data.brushMask);
     }
 
-    // 强制【标注点】不跟随画布Scale变化
+    // 重排导入点的序号（确保显示为连续数字，兼容旧数据）
+    renumberSequenceNumbers();
+
     changePointScaleRelativeCanvas(pointLayer);
 
     return true;
@@ -820,11 +1037,13 @@ onMounted(() => {
         pointTool();
       },
       b: (event: KeyboardEvent) => {
+        if (!effectiveEnableBrush.value) return;
         if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
         event.preventDefault();
         brushTool();
       },
       e: (event: KeyboardEvent) => {
+        if (!effectiveEnableBrush.value) return;
         if (!isCanvasFocused.value && !isMouseOverCanvas.value) return;
         event.preventDefault();
         eraserTool();
@@ -969,46 +1188,39 @@ onUnmounted(() => {
 // 工具切换函数
 const selectTool = () => {
   currentTool.value = "select";
-  // 关闭笔刷配置面板
   showBrushPanel.value = false;
   if (!app) return 
   app.editor.config.moveable = false
   app.editor.config.resizeable = false
-  app.editor.config.multipleSelect = true // 启用多选
-  // 禁用笔刷 Canvas 的点击事件，让点击穿透到图片
-  canvasBrush?.setPointerEvents(false);
-  // 启用标签编辑
+  app.editor.config.multipleSelect = true
+  Object.values(canvasBrushesByLayer.value).forEach(brush => brush.setPointerEvents(false));
   updateLabelEditable(true);
 };
 
 const pointTool = () => {
   currentTool.value = "point";
-  // 关闭笔刷配置面板
   showBrushPanel.value = false;
   if (!app) return 
   app.editor.config.moveable = true
-  app.editor.config.multipleSelect = false // 禁用多选
-  // 禁用笔刷 Canvas 的点击事件，让点击穿透到图片
-  canvasBrush?.setPointerEvents(false);
-  // 启用标签编辑
+  app.editor.config.multipleSelect = false
+  Object.values(canvasBrushesByLayer.value).forEach(brush => brush.setPointerEvents(false));
   updateLabelEditable(true);
 };
 
-const brushTool = () => {
+const brushTool = (openPanel?: boolean) => {
+  if (!effectiveEnableBrush.value) return;
   currentTool.value = "brush";
   if (!app) return;
-  // 切换到笔刷模式时禁用编辑器
   app.editor.config.moveable = false;
   app.editor.config.resizeable = false;
   app.editor.config.multipleSelect = false;
-  // 启用笔刷 Canvas 的点击事件
-  canvasBrush?.setPointerEvents(true);
-  // 禁用标签编辑
+  Object.entries(canvasBrushesByLayer.value).forEach(([layerValue, brush]) => {
+    brush.setPointerEvents(layerValue === effectiveCurrentLayer.value);
+  });
   updateLabelEditable(false);
-  // 显示配置面板
-  showBrushPanel.value = !showBrushPanel.value;
-  if (showBrushPanel.value) {
-    // 获取按钮位置
+  const willOpen = openPanel !== undefined ? openPanel : !showBrushPanel.value;
+  showBrushPanel.value = willOpen;
+  if (willOpen) {
     nextTick(() => {
       if (brushButtonRef.value) {
         brushButtonRect.value = brushButtonRef.value.getBoundingClientRect();
@@ -1017,63 +1229,110 @@ const brushTool = () => {
   }
 };
 
-// 关闭笔刷配置面板
 const closeBrushPanel = () => {
   showBrushPanel.value = false;
 };
 
-// 更新笔刷样式
 const updateBrushStyle = (style: Partial<BrushStyle>) => {
+  if (!effectiveEnableBrush.value) return;
   Object.assign(localBrushStyle.value, style);
 };
 
 const eraserTool = () => {
+  if (!effectiveEnableBrush.value) return;
   currentTool.value = "eraser";
-  // 关闭笔刷配置面板
   showBrushPanel.value = false;
   if (!app) return;
-  // 切换到擦除模式时禁用编辑器
   app.editor.config.moveable = false;
   app.editor.config.resizeable = false;
   app.editor.config.multipleSelect = false;
-  // 启用笔刷 Canvas 的点击事件
-  canvasBrush?.setPointerEvents(true);
-  // 禁用标签编辑
+  Object.entries(canvasBrushesByLayer.value).forEach(([layerValue, brush]) => {
+    brush.setPointerEvents(layerValue === effectiveCurrentLayer.value);
+  });
   updateLabelEditable(false);
 };
 
-// 初始化笔刷图层（在图片加载后调用）
-const initBrushLayer = () => {
+// 初始化所有笔刷图层（在图片加载后调用）
+// 当 enableBrush=false 时，仅做清理工作，不创建任何笔刷 canvas
+const initBrushLayers = () => {
   if (!imageWidth.value || !imageHeight.value || !app) return;
 
-  // 清除旧的笔刷
-  if (canvasBrush) {
-    canvasBrush.getGroup().remove();
+  // 清除所有旧的笔刷
+  Object.values(canvasBrushesByLayer.value).forEach(brush => {
+    brush.getGroup().remove();
+  });
+  canvasBrushesByLayer.value = {};
+
+  // 禁用笔刷 → 不创建任何图层
+  if (!effectiveEnableBrush.value) {
+    return;
   }
 
-  // 创建新的 CanvasBrush 实例
-  canvasBrush = new CanvasBrush(
-    imageWidth.value,
-    imageHeight.value,
-    localBrushStyle.value
-  );
+  // 为每个图层创建独立的 CanvasBrush 实例
+  effectiveBrushLayers.value.forEach((layerConfig) => {
+    const layerBrushStyle: BrushStyle = {
+      color: layerConfig.color || localBrushStyle.value.color,
+      opacity: layerConfig.opacity !== undefined ? layerConfig.opacity : localBrushStyle.value.opacity,
+      size: layerConfig.size || localBrushStyle.value.size,
+      minSize: localBrushStyle.value.minSize,
+      maxSize: localBrushStyle.value.maxSize,
+      continuity: localBrushStyle.value.continuity,
+    };
+
+    const brush = new CanvasBrush(
+      imageWidth.value!,
+      imageHeight.value!,
+      layerBrushStyle
+    );
+
+    contentLayer.add(brush.getGroup());
+    canvasBrushesByLayer.value[layerConfig.value] = brush;
+  });
 
-  // 将 LeaferJS Group 添加到 contentLayer
-  contentLayer.add(canvasBrush.getGroup());
+  // 默认选中第一个图层
+  if (!internalCurrentLayer.value) {
+    internalCurrentLayer.value = effectiveBrushLayers.value[0]?.value || DEFAULT_LAYER_VALUE;
+  }
+
+  updateAllLayersVisibility();
+};
+
+const updateAllLayersVisibility = () => {
+  Object.values(canvasBrushesByLayer.value).forEach(brush => {
+    const group = brush.getGroup();
+    if (group) {
+      (group as any).visible = true;
+    }
+  });
 };
 
+// 切换当前图层
+const setActiveLayer = (layerValue: string) => {
+  if (!effectiveBrushLayers.value.some(l => l.value === layerValue)) return;
+  internalCurrentLayer.value = layerValue;
+  if (!props.currentLayer) {
+    emit('update:currentLayer', layerValue);
+    emit('layerChange', layerValue);
+  }
+};
+
+// 兼容旧代码
+const initBrushLayer = initBrushLayers;
+
 // 笔刷绘制事件处理
 let brushSnapshotBeforeDraw: string | null = null;
+let brushSnapshotLayer: string | null = null;
 
 const handleBrushDown = (e: any) => {
   if (currentTool.value !== 'brush' && currentTool.value !== 'eraser') return;
-  if (!app || !imageBox || !canvasBrush) return;
+  if (!app || !imageBox || !activeCanvasBrush.value) return;
 
   isDrawing.value = true;
+  brushSnapshotLayer = effectiveCurrentLayer.value;
 
   // 保存当前画布快照（用于撤销）
   if (commandManager) {
-    brushSnapshotBeforeDraw = canvasBrush.getImageData();
+    brushSnapshotBeforeDraw = activeCanvasBrush.value.getImageData();
   }
 
   // 获取相对于图片的坐标（与点标注相同的方式）
@@ -1082,11 +1341,11 @@ const handleBrushDown = (e: any) => {
   // 判断是否为擦除模式
   const isErase = currentTool.value === 'eraser';
 
-  // 根据模式绘制
+  // 根据模式绘制到当前激活图层
   if (isErase) {
-    canvasBrush.erase(point.x, point.y, localBrushStyle.value.size, localBrushStyle.value.continuity);
+    activeCanvasBrush.value.erase(point.x, point.y, localBrushStyle.value.size, localBrushStyle.value.continuity);
   } else {
-    canvasBrush.draw(
+    activeCanvasBrush.value.draw(
       point.x,
       point.y,
       localBrushStyle.value.size,
@@ -1097,11 +1356,11 @@ const handleBrushDown = (e: any) => {
   }
 
   // 触发 Canvas 重绘
-  canvasBrush.getCanvas().paint();
+  activeCanvasBrush.value.getCanvas().paint();
 };
 
 const handleBrushMove = (e: any) => {
-  if (!isDrawing.value || !canvasBrush || !imageBox) return;
+  if (!isDrawing.value || !activeCanvasBrush.value || !imageBox) return;
 
   // 获取相对于图片的坐标（与点标注相同的方式）
   const point = contentLayer.getBoxPoint({ x: e.x, y: e.y });
@@ -1109,11 +1368,11 @@ const handleBrushMove = (e: any) => {
   // 判断是否为擦除模式
   const isErase = currentTool.value === 'eraser';
 
-  // 根据模式绘制
+  // 根据模式绘制到当前激活图层
   if (isErase) {
-    canvasBrush.erase(point.x, point.y, localBrushStyle.value.size, localBrushStyle.value.continuity);
+    activeCanvasBrush.value.erase(point.x, point.y, localBrushStyle.value.size, localBrushStyle.value.continuity);
   } else {
-    canvasBrush.draw(
+    activeCanvasBrush.value.draw(
       point.x,
       point.y,
       localBrushStyle.value.size,
@@ -1124,31 +1383,32 @@ const handleBrushMove = (e: any) => {
   }
 
   // 触发 Canvas 重绘
-  canvasBrush.getCanvas().paint();
+  activeCanvasBrush.value.getCanvas().paint();
 };
 
 const handleBrushUp = () => {
   isDrawing.value = false;
 
-  // 如果有保存的快照，创建撤销命令
-  if (commandManager && canvasBrush && brushSnapshotBeforeDraw) {
-    const snapshotCommand = new BrushSnapshotCommand(canvasBrush, brushSnapshotBeforeDraw);
+  // 如果有保存的快照，创建撤销命令（使用操作开始时的图层）
+  if (commandManager && brushSnapshotLayer && canvasBrushesByLayer.value[brushSnapshotLayer] && brushSnapshotBeforeDraw) {
+    const snapshotCommand = new BrushSnapshotCommand(canvasBrushesByLayer.value[brushSnapshotLayer], brushSnapshotBeforeDraw);
     commandManager.executeCommand(snapshotCommand);
     brushSnapshotBeforeDraw = null;
+    brushSnapshotLayer = null;
   }
 
   // 重置上一个点，避免下次绘制时从上次结束的地方连线
-  canvasBrush?.resetLastPoint();
+  activeCanvasBrush.value?.resetLastPoint();
 };
 
 // 生成 UUID
-const generateUUID = (): string => {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    const r = Math.random() * 16 | 0;
-    const v = c === 'x' ? r : (r & 0x3 | 0x8);
-    return v.toString(16);
-  });
-};
+// const generateUUID = (): string => {
+//   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+//     const r = Math.random() * 16 | 0;
+//     const v = c === 'x' ? r : (r & 0x3 | 0x8);
+//     return v.toString(16);
+//   });
+// };
 
 // 处理画布点击事件
 const handleCanvasTap = (e: any) => {
@@ -1177,54 +1437,80 @@ const handleCanvasTap = (e: any) => {
   createPointAnnotation(point.x, point.y);
 };
 
+// 处理点击【标注点】选中样式
+// const handlePointAnnotationSelected = (e: any) => {
+//   if (currentTool.value === 'brush' || currentTool.value === 'eraser' || !app || !imageBox) return;
+//   // console.log(e)
+//   if (e.value) {
+//     if (Array.isArray(e.value)) {
+//       e.value.forEach((element: { circle: { set: (arg0: { fill: string; stroke: string, selected: boolean; }) => void; }; }) => {
+//         if (!element.circle) return
+//         element.circle.set({
+//           fill: pointStyle.value.selectedCircleFill,
+//           stroke: pointStyle.value.selectedCircleStroke,
+//           selected: true,
+//         })
+//       });
+//     } else {
+//       const _target = e.value.circle || e.value.parent.circle
+//       if (!_target) return
+//       _target.set({
+//         fill: pointStyle.value.selectedCircleFill,
+//         stroke: pointStyle.value.selectedCircleStroke,
+//         selected: true,
+//       })
+//     }
+//   }
+//   if (e.oldValue && (!Array.isArray(e.oldValue) || !e.value)) {
+//     if (Array.isArray(e.oldValue)) {
+//       e.oldValue.forEach((element: { circle: { set: (arg0: { fill: string; stroke: string, selected: boolean; }) => void; }; }) => {
+//         if (!element.circle) return
+//         element.circle.set({
+//           fill: pointStyle.value.circleFill,
+//           stroke: pointStyle.value.circleStroke,
+//           selected: false,
+//         })
+//       });
+//     } else {
+//       const _target = e.oldValue.circle || e.oldValue.parent.circle
+//       if (!_target || (e.oldValue === e.value?.parent)) return
+//       _target.set({
+//         fill: pointStyle.value.circleFill,
+//         stroke: pointStyle.value.circleStroke,
+//         selected: false,
+//       })
+//     }
+//   }
+// }
+
 // 处理点击【标注点】选中样式
 const handlePointAnnotationSelected = (e: any) => {
   if (currentTool.value === 'brush' || currentTool.value === 'eraser' || !app || !imageBox) return;
-  // console.log(e)
-  if (e.value) {
-    if (Array.isArray(e.value)) {
-      e.value.forEach((element: { circle: { set: (arg0: { fill: string; stroke: string; }) => void; }; }) => {
-        if (!element.circle) return
-        element.circle.set({
-          fill: pointStyle.value.selectedCircleFill,
-          stroke: pointStyle.value.selectedCircleStroke
-        })
-      });
-    } else {
-      const _target = e.value.circle || e.value.parent.circle
-      if (!_target) return
-      _target.set({
-        fill: pointStyle.value.selectedCircleFill,
-        stroke: pointStyle.value.selectedCircleStroke
-      })
-    }
-  }
-  if (e.oldValue && (!Array.isArray(e.oldValue) || !e.value)) {
-    if (Array.isArray(e.oldValue)) {
-      e.oldValue.forEach((element: { circle: { set: (arg0: { fill: string; stroke: string; }) => void; }; }) => {
-        if (!element.circle) return
-        element.circle.set({
-          fill: pointStyle.value.circleFill,
-          stroke: pointStyle.value.circleStroke
-        })
-      });
-    } else {
-      const _target = e.oldValue.circle || e.oldValue.parent.circle
-      if (!_target || (e.oldValue === e.value?.parent)) return
-      _target.set({
-        fill: pointStyle.value.circleFill,
-        stroke: pointStyle.value.circleStroke
-      })
-    }
-  }
-}
+
+  // 收集新选中的所有点的 id（可能是单个，也可能是数组）
+  const selectedIds = new Set<string>();
+  const newValues = Array.isArray(e.value) ? e.value : (e.value ? [e.value] : []);
+  newValues.forEach((element: any) => {
+    if (element.data?.id) selectedIds.add(element.data.id);
+  });
+
+  // 遍历所有标注点，逐个设置状态
+  pointLayer.children.forEach((p: any) => {
+    if (p._element_tag !== 'point-annotation') return;
+    const isSelected = selectedIds.has(p.data?.id);
+    p.handlePointAnnotationSelected?.(isSelected);
+  });
+};
 
 // 创建点标注
 const createPointAnnotation = (pixelX: number, pixelY: number): string | null => {
   if (!imageWidth.value || !imageHeight.value) return null;
 
-  const id = `point_${generateUUID()}`;
-  const label = `#${pointCounter.value}`;
+  // const id = `point_${generateUUID()}`;
+  const id = `point_${pointCounter.value}`
+  // const label = `#${pointCounter.value}`;
+  const order = pointCounter.value;
+  const sequenceNumber = pointAnnotations.value.length + 1;
 
   // 计算归一化坐标
   const normalizedX = pixelX / imageWidth.value;
@@ -1232,9 +1518,11 @@ const createPointAnnotation = (pixelX: number, pixelY: number): string | null =>
 
   const pointData: PointAnnotation = {
     id,
+    order,
+    sequenceNumber,
     pixel: { x: pixelX, y: pixelY },
     normalized: { x: normalizedX, y: normalizedY },
-    label,
+    // label,
     createdAt: Date.now(),
     updatedAt: Date.now(),
   };
@@ -1243,6 +1531,11 @@ const createPointAnnotation = (pixelX: number, pixelY: number): string | null =>
   const pointElement = new PointAnnotationElement(pointData, pointStyle.value);
 
   // 根据当前工具设置标签的可编辑状态
+  // 注意：由于 PointAnnotationElement.hitChildren = false，子元素无法接收鼠标事件，
+  //       这里设置 label.editable 实际**不会产生视觉效果**（label 永远收不到双击/点击进入编辑）。
+  //       保留这段逻辑是为了：
+  //       1) 状态上保持一致性（工具切换时设置正确的可编辑状态）
+  //       2) 如果未来把 hitChildren 改回 true，这个设置立即生效
   if (currentTool.value === 'brush' || currentTool.value === 'eraser') {
     pointElement.label.editable = false;
   }
@@ -1274,7 +1567,7 @@ const createPointAnnotation = (pixelX: number, pixelY: number): string | null =>
 
 // 删除选中的点标注或清除笔刷内容
 const deleteSelected = () => {
-  // 如果当前工具是笔刷，清除所有笔刷内容
+  // 如果当前工具是笔刷，清除所有笔刷内容（笔刷禁用时不会走到这里）
   if (currentTool.value === 'brush' || currentTool.value === 'eraser') {
     clearBrush();
     return;
@@ -1283,8 +1576,16 @@ const deleteSelected = () => {
   // select 模式下未选中任何元素，清除所有
   if (currentTool.value === 'select') {
     const selected = app?.editor?.list || [];
-    if (selected.length === 0 && (pointAnnotations.value.length > 0 || canvasBrush?.hasContent())) {
-      if (confirm('确定清除所有标注和笔刷绘制区域吗？')) {
+    // 禁用笔刷时只关心点标注
+    let hasBrushContent = false;
+    if (effectiveEnableBrush.value) {
+      hasBrushContent = Object.values(canvasBrushesByLayer.value).some(brush => brush?.hasContent?.());
+    }
+    if (selected.length === 0 && (pointAnnotations.value.length > 0 || hasBrushContent)) {
+      const confirmMsg = effectiveEnableBrush.value
+        ? '确定清除所有标注和笔刷绘制区域吗？'
+        : '确定清除所有标注吗？';
+      if (confirm(confirmMsg)) {
         clearAllAnnotationsAndBrush();
       }
       return;
@@ -1317,6 +1618,9 @@ const deleteSelected = () => {
   // 清除编辑器选择
   app.editor.cancel();
 
+  // 重排剩余点的序号
+  renumberSequenceNumbers();
+
   // 触发事件
   emit("pointChange", [...pointAnnotations.value]);
 };
@@ -1333,40 +1637,112 @@ const clearAllAnnotationsAndBrush = () => {
   });
   pointAnnotations.value = [];
 
-  // 清除笔刷
-  canvasBrush?.clear();
+  // 清除所有图层的笔刷（仅当启用笔刷时）
+  if (effectiveEnableBrush.value) {
+    Object.values(canvasBrushesByLayer.value).forEach(brush => brush.clear());
+  }
 
   emit("pointChange", []);
 };
 
-// 清除所有笔刷内容
+// 清除当前图层的笔刷内容（仅当启用笔刷时）
 const clearBrush = () => {
-  if (canvasBrush) {
+  if (!effectiveEnableBrush.value) return;
+  if (activeCanvasBrush.value) {
     if (commandManager) {
-      const beforeSnapshot = canvasBrush.getImageData();
-      const snapshotCommand = new BrushSnapshotCommand(canvasBrush, beforeSnapshot, true);
+      const beforeSnapshot = activeCanvasBrush.value.getImageData();
+      const snapshotCommand = new BrushSnapshotCommand(activeCanvasBrush.value, beforeSnapshot, true);
       commandManager.executeCommand(snapshotCommand);
     }
 
-    canvasBrush.clear();
-    canvasBrush.getCanvas().paint();
+    activeCanvasBrush.value.clear();
+    activeCanvasBrush.value.getCanvas().paint();
   }
 };
 
+// 清除所有图层的笔刷内容（仅当启用笔刷时）
+const clearAllBrushLayers = () => {
+  if (!effectiveEnableBrush.value) return;
+  Object.entries(canvasBrushesByLayer.value).forEach(([_layerValue, brush]) => {
+    if (commandManager) {
+      const beforeSnapshot = brush.getImageData();
+      const snapshotCommand = new BrushSnapshotCommand(brush, beforeSnapshot, true);
+      commandManager.executeCommand(snapshotCommand);
+    }
+    brush.clear();
+    brush.getCanvas().paint();
+  });
+};
+
+// 获取当前激活图层
+const getCurrentLayer = (): string => {
+  return effectiveCurrentLayer.value;
+};
+
+// 获取所有图层配置
+const getAllLayers = (): BrushLayerConfig[] => {
+  return [...effectiveBrushLayers.value];
+};
+
 // 获取点标注数据
 const getPointAnnotations = (): PointAnnotation[] => {
   return [...pointAnnotations.value];
 };
 
+// 更新指定标注点的 label（父组件通过 id 找到对应元素并更新名称）
+// 支持点标注后，父组件通过此方法改点标注点的名称
+const updatePointAnnotationLabel = (id: string, label: string): boolean => {
+  const element = pointLayer.children.find((el: any) => el.data?.id === id) as PointAnnotationElement;
+  if (!element) return false;
+  if (element.updateLabel) {
+    element.updateLabel(label);
+  }
+  emit("pointChange", [...pointAnnotations.value]);
+  return true;
+};
+
+// 根据所有标注点的轨迹，在当前笔刷层中生成闭合多边形填充区域
+// - 点 < 3 不操作（无法形成多边形）
+// - 自动按 sequenceNumber 排序
+// - 使用当前笔刷的 color、opacity
+// - 支持撤销/重做
+// - 笔刷禁用时返回 false
+const createBrushFromPoints = (): boolean => {
+  if (!effectiveEnableBrush.value) return false;
+  const brush = activeCanvasBrush.value;
+  if (!brush) return false;
+  const points = [...pointAnnotations.value];
+  if (points.length < 3) return false;
+  points.sort((a, b) => a.sequenceNumber - b.sequenceNumber);
+  const pixelPoints = points.map(p => ({ x: p.pixel.x, y: p.pixel.y }));
+
+  // 操作前保存快照（BrushSnapshotCommand 会在第一次 execute 时自动保存操作后快照）
+  const beforeSnapshot = brush.getImageData();
+
+  // 执行填充多边形（color 就是笔刷的颜色；opacity 由外层 Group 控制，canvas 上设为 1）
+  brush.fillPolygon(pixelPoints, localBrushStyle.value.color);
+
+  // 包装为撤销命令（第一次 execute 时 BrushSnapshotCommand 会自动保存操作后快照）
+  if (commandManager) {
+    const snapshotCommand = new BrushSnapshotCommand(brush, beforeSnapshot);
+    commandManager.executeCommand(snapshotCommand);
+  }
+  return true;
+};
+
 const undo = () => {
   if (commandManager?.canUndo()) {
     commandManager.undo();
+    renumberSequenceNumbers();
+    emit("pointChange", [...pointAnnotations.value]);
   }
 };
 
 const redo = () => {
   if (commandManager?.canRedo()) {
     commandManager.redo();
+    renumberSequenceNumbers();
+    emit("pointChange", [...pointAnnotations.value]);
   }
 };
 
@@ -1375,9 +1751,30 @@ const getCurrentTool = (): "select" | "point" | "brush" | "eraser" => {
 };
 
 const setTool = (tool: "select" | "point" | "brush" | "eraser") => {
+  // 笔刷禁用时，不允许切到 brush/eraser
+  if (!effectiveEnableBrush.value && (tool === 'brush' || tool === 'eraser')) {
+    return;
+  }
   currentTool.value = tool;
 };
 
+// 根据当前数组顺序重排所有点的显示序号（sequenceNumber）
+const renumberSequenceNumbers = () => {
+  // 1. 更新数据中的 sequenceNumber
+  pointAnnotations.value.forEach((p, i) => {
+    p.sequenceNumber = i + 1;
+  });
+
+  // 2. 按数据顺序查找对应 DOM 元素并更新 circleText.text
+  //    （注意：pointLayer.children 顺序可能与 pointAnnotations 不一致，比如 undo/redo 后）
+  pointAnnotations.value.forEach((p, i) => {
+    const child = pointLayer.children.find((el: any) => el.data?.id === p.id) as PointAnnotationElement;
+    if (child?.updateSequenceNumber) {
+      child.updateSequenceNumber(i + 1);
+    }
+  });
+};
+
 const removePointAnnotation = (id: string): boolean => {
   const index = pointAnnotations.value.findIndex(p => p.id === id);
   if (index === -1) return false;
@@ -1394,6 +1791,9 @@ const removePointAnnotation = (id: string): boolean => {
     pointAnnotations.value.splice(index, 1);
   }
 
+  // 重排所有点的序号
+  renumberSequenceNumbers();
+
   emit("pointChange", [...pointAnnotations.value]);
   return true;
 };
@@ -1428,11 +1828,18 @@ defineExpose({
   getImageInfo,
   exportCanvasJSON,
   exportMaskImage,
+  exportMaskImageByLayer,
+  exportAllMaskImages,
+  getMaskBlob,
+  getMaskFile,
+  getAllMaskBlobs,
   exportCOCO,
   exportYOLO,
   importCanvasJSON,
   loadImage,
   clearBrush,
+  clearAllBrushLayers,
+  clearAllAnnotationsAndBrush,
   zoomIn,
   zoomOut,
   resetZoom,
@@ -1440,8 +1847,20 @@ defineExpose({
   redo,
   getCurrentTool,
   setTool,
+  selectTool,
+  pointTool,
+  brushTool,
+  eraserTool,
+  deleteSelected,
+  getCurrentLayer,
+  setActiveLayer,
+  getAllLayers,
   createPointAnnotation,
   removePointAnnotation,
+  updatePointAnnotationLabel,
+  createBrushFromPoints,
+  getBrushStyle: () => ({ ...localBrushStyle.value }),
+  updateBrushStyle,
 });
 
 declare global {
@@ -1859,4 +2278,5 @@ declare global {
   color: var(--leafer-point-color-primary);
   font-weight: 600;
 }
+
 </style>