@zzalai/leafer-point-annotation 1.0.0

package/src/elements/PointAnnotationElement.ts

@@ -0,0 +1,155 @@
+import { Group, Ellipse, Text } from 'leafer-ui';
+import type { PointAnnotation, PointStyle } from '@/types';
+import { DEFAULT_POINT_STYLE } from '@/types';
+import "@leafer-in/state"
+import "@leafer-in/text-editor"
+
+export class PointAnnotationElement extends Group {
+  public circle: Ellipse;
+  public label: Text;
+  public data: PointAnnotation;
+  private style: PointStyle;
+  public _element_tag: string
+  private _lastValidLabel: string;
+
+  constructor(data: PointAnnotation, style?: Partial<PointStyle>) {
+    super();
+    
+    this.data = data;
+    this.style = { ...DEFAULT_POINT_STYLE, ...style };
+    this._lastValidLabel = data.label;
+
+    // 创建圆点 - Ellipse 的 x, y 是圆心位置，around 设置为 center
+    this.circle = new Ellipse({
+      x: 0,
+      y: 0,
+      width: this.style.circleRadius,
+      height: this.style.circleRadius,
+      fill: this.style.circleFill,
+      stroke: this.style.circleStroke,
+      strokeWidth: this.style.circleStrokeWidth,
+      draggable: false,
+      editable: false,
+      around: 'center',
+      hoverStyle: {
+        fill: this.style.hoverCircleFill ? this.style.hoverCircleFill : this.style.circleFill
+      },
+    });
+
+    // 创建标签 - around 设置为 bottom-left，显示在圆点右上角
+    this.label = new Text({
+      x: this.style.circleRadius / 2 - 2,
+      y: - this.style.circleRadius / 2 + 2,
+      text: data.label,
+      fontSize: this.style.labelFontSize,
+      fill: this.style.labelTextColor,
+      padding: this.style.labelPadding,
+      editable: true,
+      editConfig: {
+        strokeWidth: 0, // 需要置0，否则有边难看
+        moveable: false,
+        resizeable: false
+      },
+      around: 'bottom-left',
+      boxStyle: {
+        fill: this.style.labelBackgroundColor,
+        cornerRadius: 4,
+        whiteSpace: 'nowrap',
+        shadow: {
+          x: 1,
+          y: 1,
+          blur: 2,
+          color: 'rgba(0,0,0, .2)'
+        }
+      }
+    });
+
+    // 添加到组
+    this.add(this.circle);
+    this.add(this.label);
+
+    // 设置组属性 - 组的位置就是圆心位置
+    this.x = data.pixel.x;
+    this.y = data.pixel.y;
+    this.draggable = true;
+    this.editable = true;
+    // this.hitChildren = false;
+    this.editConfig = {
+      strokeWidth: 0, // 需要置0，否则有边难看
+      resizeable: false
+    },
+    this._element_tag = 'point-annotation';
+
+    // 绑定事件
+    this.bindEvents();
+  }
+
+  private bindEvents(): void {
+    // Hover 效果已通过 hoverStyle 配置，无需监听事件
+    // this.circle.on('pointerenter', () => this.updateHover(true));
+    // this.circle.on('pointerleave', () => this.updateHover(false));
+
+    // 标签编辑完成
+    // this.label.on('text:change', (e: any) => this.handleLabelChange(e.text));
+    this.label.on('property.change', (e) => {
+      // console.log(e);
+      // 2.0.8 的标准数据结构
+      const data = e.data || e; 
+      if (data.attrName === 'text') {
+        console.log('数据落地了:', data.newValue);
+        this.handleLabelChange(data.newValue);
+      }
+    });
+  }
+
+  // 外部调用的选中处理方法
+  public handlePointAnnotationSelected(isSelected: boolean): void {
+    const targetStyle = isSelected ? this.style.selectedCircleFill : this.style.circleFill;
+    const targetStroke = isSelected ? this.style.selectedCircleStroke : this.style.circleStroke;
+    const targetScale = isSelected ? this.style.selectedCircleScale : 1;
+    
+    this.circle.set({
+      fill: targetStyle,
+      stroke: targetStroke,
+      scale: targetScale,
+    });
+  }
+
+  public handleLabelChange(newLabel: string): void {
+    // 去除首尾空格
+    const trimmedLabel = newLabel.trim();
+    
+    // 空值或空白，恢复上一次的值
+    if (!trimmedLabel) {
+      this.label.text = this._lastValidLabel;
+      return;
+    }
+    
+    // 更新有效标签
+    this._lastValidLabel = trimmedLabel;
+    this.data.label = trimmedLabel;
+    this.data.updatedAt = Date.now();
+  }
+
+  public updatePosition(x: number, y: number): void {
+    this.x = x;
+    this.y = y;
+    this.data.pixel = { x, y };
+    this.data.updatedAt = Date.now();
+  }
+
+  public updateLabel(label: string): void {
+    this.label.text = label;
+    this._lastValidLabel = label;
+    this.data.label = label;
+    this.data.updatedAt = Date.now();
+  }
+
+  public getLabel(): string {
+    return this.data.label;
+  }
+
+  public getLastValidLabel(): string {
+    return this._lastValidLabel;
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import PointAnnotation from './components/PointAnnotation.vue'
+
+export { PointAnnotation }
+export default PointAnnotation

package/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/types/index.ts

@@ -0,0 +1,122 @@
+// 点标注数据结构
+export interface PointAnnotation {
+  id: string;
+  pixel: {
+    x: number;
+    y: number;
+  };
+  normalized: {
+    x: number;
+    y: number;
+  };
+  label: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+// 点标注样式配置
+export interface PointStyle {
+  circleRadius: number;
+  circleFill: string;
+  circleStroke: string;
+  circleStrokeWidth: number;
+  hoverCircleFill: string;
+  hoverCircleStroke: string;
+  selectedCircleFill: string;
+  selectedCircleStroke: string;
+  selectedCircleScale: number;
+  labelBackgroundColor: string;
+  labelTextColor: string;
+  labelFontSize: number;
+  labelPadding: number | number[];
+  fixedSizeOnZoom?: boolean;      // 是否开启标注点固定大小（不随画布缩放）
+  fixedSizeScale?: number;        // 固定大小的缩放系数（默认为1）
+}
+
+// 笔刷样式配置
+export interface BrushStyle {
+  color: string;
+  opacity: number;
+  size: number;
+  minSize: number;
+  maxSize: number;
+  continuity: number; // 连续性阈值：两个点之间最大距离（像素），超过就用直线连接
+}
+
+// 笔刷笔画数据
+export interface BrushStrokeData {
+  id: string;
+  points: { x: number; y: number }[];
+  color: string;
+  opacity: number;
+  size: number;
+  createdAt: number;
+}
+
+// 工具类型
+export type ToolType = 'select' | 'point' | 'brush' | 'eraser';
+
+// 导出格式类型
+export type ExportFormat = 'json-full' | 'json-points' | 'coco' | 'yolo' | 'image-mask';
+
+// 导出选项
+export interface ExportOptions {
+  includeImage?: boolean;
+  maskBackground?: string;
+  maskForeground?: string;
+  prettyPrint?: boolean;
+}
+
+// 导入选项
+export interface ImportOptions {
+  replace?: boolean;
+  resetZoom?: boolean;
+}
+
+// 统计信息
+export interface Statistics {
+  pointCount: number;
+  brushStrokeCount: number;
+  brushAreaPercent: number;
+  hasChanges: boolean;
+}
+
+// 导出数据结构
+export interface ExportData {
+  version: string;
+  imageUrl: string;
+  imageWidth: number;
+  imageHeight: number;
+  pointAnnotations: PointAnnotation[];
+  brushStrokes: BrushStrokeData[];
+  exportTime: number;
+}
+
+// 默认点标注样式
+export const DEFAULT_POINT_STYLE: PointStyle = {
+  circleRadius: 12,  // 8x8 的圆点
+  circleFill: '#ff4d4f',
+  circleStroke: '#ffffff',
+  circleStrokeWidth: 2,
+  hoverCircleFill: '#ff7875',
+  hoverCircleStroke: '#ffffff',
+  selectedCircleFill: '#1890ff',
+  selectedCircleStroke: '#ffffff',
+  selectedCircleScale: 1.2,
+  labelBackgroundColor: '#ffffff',
+  labelTextColor: '#333333',
+  labelFontSize: 12,
+  labelPadding: [2,4],
+  fixedSizeOnZoom: false,    // 默认关闭固定大小功能
+  fixedSizeScale: 1,         // 默认缩放系数为1
+};
+
+// 默认笔刷样式
+export const DEFAULT_BRUSH_STYLE: BrushStyle = {
+  color: 'rgba(255,0,0,1)',
+  opacity: 0.55,
+  size: 100,
+  minSize: 50,
+  maxSize: 150,
+  continuity: 28, // 默认连续性阈值：20像素
+};

package/src/utils/BrushCommands.ts

@@ -0,0 +1,47 @@
+import { ICommand } from '@zzalai/leafer-undo-redo';
+import { CanvasBrush } from './CanvasBrush';
+
+export class BrushSnapshotCommand implements ICommand {
+  private canvasBrush: CanvasBrush;
+  private beforeSnapshot: string;
+  private afterSnapshot: string;
+  private isFirstExecute: boolean;
+  private isClearOperation: boolean;
+
+  constructor(canvasBrush: CanvasBrush, beforeSnapshot: string, isClearOperation: boolean = false) {
+    this.canvasBrush = canvasBrush;
+    this.beforeSnapshot = beforeSnapshot;
+    this.afterSnapshot = '';
+    this.isFirstExecute = true;
+    this.isClearOperation = isClearOperation;
+  }
+
+  execute(): void {
+    if (this.isFirstExecute) {
+      if (this.isClearOperation) {
+        this.afterSnapshot = '';
+      } else {
+        this.afterSnapshot = this.canvasBrush.getImageData();
+      }
+      this.isFirstExecute = false;
+    } else {
+      if (this.afterSnapshot) {
+        this.canvasBrush.restoreImageData(this.afterSnapshot);
+      } else {
+        this.canvasBrush.clear();
+      }
+    }
+  }
+
+  undo(): void {
+    this.canvasBrush.restoreImageData(this.beforeSnapshot);
+  }
+
+  redo(): void {
+    if (this.afterSnapshot) {
+      this.canvasBrush.restoreImageData(this.afterSnapshot);
+    } else {
+      this.canvasBrush.clear();
+    }
+  }
+}

package/src/utils/BrushStroke.ts

@@ -0,0 +1,96 @@
+import { Path, Group } from 'leafer-ui';
+
+export class BrushStroke {
+  public path: Path;
+  private points: { x: number; y: number }[] = [];
+  private isFinished: boolean = false;
+  private pathData: string = '';
+  private container: Group | any;
+
+  constructor(
+    container: Group | any,
+    color: string,
+    size: number,
+    opacity: number,
+    isErase: boolean = false
+  ) {
+    this.container = container;
+    
+    this.path = new Path({
+      stroke: color,
+      strokeWidth: size,
+      opacity: opacity,
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      globalCompositeOperation: isErase ? 'destination-out' : 'source-over',
+    });
+    
+    // 支持 Group 或 App 作为容器
+    if (container.add) {
+      container.add(this.path);
+    } else if (container.tree?.add) {
+      container.tree.add(this.path);
+    }
+  }
+
+  public addPoint(x: number, y: number): void {
+    if (this.isFinished) return;
+
+    this.points.push({ x, y });
+
+    if (this.points.length === 1) {
+      this.pathData = `M${x} ${y}`;
+    } else {
+      this.pathData += ` L${x} ${y}`;
+    }
+    
+    // Leafer UI 使用 path 属性而不是 d 属性
+    (this.path as any).path = this.pathData;
+  }
+
+  public finish(): { points: { x: number; y: number }[] } {
+    this.isFinished = true;
+    return { points: [...this.points] };
+  }
+
+  public remove(): void {
+    if (this.container.remove) {
+      this.container.remove(this.path);
+    } else if (this.container.tree?.remove) {
+      this.container.tree.remove(this.path);
+    }
+  }
+
+  public getPathData(): string {
+    return this.pathData;
+  }
+
+  public getPoints(): { x: number; y: number }[] {
+    return [...this.points];
+  }
+
+  public isEmpty(): boolean {
+    return this.points.length === 0;
+  }
+
+  public getBoundingBox(): { x: number; y: number; width: number; height: number } | null {
+    if (this.points.length === 0) return null;
+
+    let minX = Infinity, maxX = -Infinity;
+    let minY = Infinity, maxY = -Infinity;
+
+    this.points.forEach(point => {
+      minX = Math.min(minX, point.x);
+      maxX = Math.max(maxX, point.x);
+      minY = Math.min(minY, point.y);
+      maxY = Math.max(maxY, point.y);
+    });
+
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY,
+    };
+  }
+}

package/src/utils/COCOExporter.ts

@@ -0,0 +1,90 @@
+import { PointAnnotation } from '@/types';
+
+export interface COCOExportResult {
+  info: {
+    year: number;
+    version: string;
+    contributor: string;
+    date_created: string;
+  };
+  images: Array<{
+    id: number;
+    file_name: string;
+    width: number;
+    height: number;
+  }>;
+  annotations: Array<{
+    id: number;
+    image_id: number;
+    category_id: number;
+    keypoints: number[];
+    num_keypoints: number;
+   iscrowd: number;
+  }>;
+  categories: Array<{
+    id: number;
+    name: string;
+    supercategory: string;
+    keypoints: string[];
+    skeleton: number[][];
+  }>;
+}
+
+export function exportCOCOFormat(
+  pointAnnotations: PointAnnotation[],
+  imageUrl: string,
+  imageWidth: number,
+  imageHeight: number,
+  options?: {
+    categoryName?: string;
+    imageId?: number;
+  }
+): COCOExportResult {
+  const imageId = options?.imageId || 1;
+  const categoryName = options?.categoryName || 'point';
+
+  const getFileName = (url: string): string => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.pathname.split('/').pop() || 'image.jpg';
+    } catch {
+      return 'image.jpg';
+    }
+  };
+
+  const coco: COCOExportResult = {
+    info: {
+      year: new Date().getFullYear(),
+      version: '1.0',
+      contributor: 'leafer-point-annotation',
+      date_created: new Date().toISOString().split('T')[0],
+    },
+    images: [
+      {
+        id: imageId,
+        file_name: getFileName(imageUrl),
+        width: imageWidth,
+        height: imageHeight,
+      },
+    ],
+    annotations: pointAnnotations.map((point, index) => ({
+      id: index + 1,
+      image_id: imageId,
+      category_id: 1,
+      keypoints: [point.pixel.x, point.pixel.y, 2],
+      num_keypoints: 1,
+      iscrowd: 0,
+    })),
+    categories: [
+      {
+        id: 1,
+        name: categoryName,
+        supercategory: 'annotation',
+        keypoints: ['point'],
+        skeleton: [],
+      },
+    ],
+  };
+
+  return coco;
+}

package/src/utils/CanvasBrush.ts

@@ -0,0 +1,179 @@
+import { Canvas, Group } from 'leafer-ui';
+
+export interface BrushStyle {
+  color: string;
+  opacity: number;
+  size: number;
+  minSize: number;
+  maxSize: number;
+  continuity: number; // 连续性阈值：两个点之间最大距离（像素），超过就用直线连接
+}
+
+export class CanvasBrush {
+  private canvas: Canvas;
+  private group: Group;
+  private width: number;
+  private height: number;
+  private lastPoint: { x: number; y: number } | null = null;
+
+  constructor(width: number, height: number, style: BrushStyle) {
+    this.width = width;
+    this.height = height;
+
+    this.canvas = new Canvas({
+      width,
+      height,
+    });
+    // 默认禁用点击事件，让点击穿透到图片
+    (this.canvas as any).set({ pointerEvents: false });
+    
+    // 外层 Group，用于设置统一透明度
+    this.group = new Group({
+      opacity: style.opacity,
+    });
+    this.group.add(this.canvas);
+  }
+
+  public getCanvas(): Canvas {
+    return this.canvas;
+  }
+
+  public getGroup(): Group {
+    return this.group;
+  }
+
+  public setOpacity(opacity: number): void {
+    this.group.set({ opacity });
+  }
+
+  public setPointerEvents(value: boolean): void {
+    (this.canvas as any).set({ pointerEvents: value });
+  }
+
+  public resetLastPoint(): void {
+    this.lastPoint = null;
+  }
+
+  public draw(
+    x: number,
+    y: number,
+    size: number,
+    color: string,
+    _opacity: number,
+    continuity: number
+  ): void {
+    const { context } = this.canvas;
+    
+    // 保存当前状态
+    context.save();
+    
+    context.fillStyle = color;
+    context.globalAlpha = 1;  // 始终 1，透明度由 Group 控制
+
+    // 如果有上一个点，且两点之间距离超过连续性阈值，先画连线
+    if (this.lastPoint) {
+      const dx = x - this.lastPoint.x;
+      const dy = y - this.lastPoint.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance > continuity) {
+        // 画连线（用多个圆填充）
+        const steps = Math.ceil(distance / (size / 2));
+        for (let i = 1; i <= steps; i++) {
+          const t = i / steps;
+          const midX = this.lastPoint.x + dx * t;
+          const midY = this.lastPoint.y + dy * t;
+          context.beginPath();
+          context.arc(midX, midY, size / 2, 0, Math.PI * 2);
+          context.fill();
+        }
+      }
+    }
+
+    // 画当前点
+    context.beginPath();
+    context.arc(x, y, size / 2, 0, Math.PI * 2);
+    context.fill();
+
+    // 恢复状态
+    context.restore();
+
+    // 保存当前点
+    this.lastPoint = { x, y };
+  }
+
+  public erase(x: number, y: number, size: number, continuity: number): void {
+    const { context } = this.canvas;
+
+    // 保存当前状态
+    context.save();
+    
+    context.globalCompositeOperation = 'destination-out';
+
+    // 如果有上一个点，且两点之间距离超过连续性阈值，先画连线
+    if (this.lastPoint) {
+      const dx = x - this.lastPoint.x;
+      const dy = y - this.lastPoint.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance > continuity) {
+        // 画连线（用多个圆填充）
+        const steps = Math.ceil(distance / (size / 2));
+        for (let i = 1; i <= steps; i++) {
+          const t = i / steps;
+          const midX = this.lastPoint.x + dx * t;
+          const midY = this.lastPoint.y + dy * t;
+          context.beginPath();
+          context.arc(midX, midY, size / 2, 0, Math.PI * 2);
+          context.fill();
+        }
+      }
+    }
+
+    // 画当前点
+    context.beginPath();
+    context.arc(x, y, size / 2, 0, Math.PI * 2);
+    context.fill();
+
+    // 恢复状态
+    context.restore();
+
+    // 保存当前点
+    this.lastPoint = { x, y };
+  }
+
+  public clear(): void {
+    const { context } = this.canvas;
+    context.clearRect(0, 0, this.width, this.height);
+    this.resetLastPoint();
+    this.canvas.paint();
+    this.group.set({ dirty: true });
+  }
+
+  public getImageData(): string {
+    return this.canvas.context.canvas.toDataURL('image/png');
+  }
+
+  public restoreImageData(dataUrl: string, callback?: () => void): void {
+    const img = new Image();
+    img.onload = () => {
+      const { context } = this.canvas;
+      context.clearRect(0, 0, this.width, this.height);
+      context.drawImage(img, 0, 0);
+      this.canvas.paint();
+      this.group.set({ dirty: true });
+      if (callback) callback();
+    };
+    img.src = dataUrl;
+  }
+
+  public hasContent(): boolean {
+    if (this.width === 0 || this.height === 0) return false;
+    const imageData = this.canvas.context.getImageData(0, 0, this.width, this.height);
+    const data = imageData.data;
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] > 0) return true;
+    }
+    return false;
+  }
+}