image-annotation-drawer 1.0.0 → 1.0.2

package/dist/modules/annotations.d.ts

@@ -1,165 +0,0 @@
-/**
- * 标注管理模块
- * 负责矩形、多边形标注的存储、绘制、选中、移动、调整大小等功能
- */
-import type { Rect, Polygon, Point, Operate, SelectedAnnotation, ActiveHandle, SelectionStyle, ColorConfig, AnnotationStyle, LineStyle, VertexStyle } from './types';
-import type { ViewportManager } from './viewport';
-export declare class AnnotationManager {
-    private viewport;
-    recordList: Operate<Rect | Polygon>[];
-    operate: Operate<Rect | Polygon>;
-    isDrawing: boolean;
-    drawStartPoint: Point;
-    tempPolygonPoint: Point | null;
-    selectedAnnotation: SelectedAnnotation | null;
-    isMovingAnnotation: boolean;
-    isResizing: boolean;
-    activeHandle: ActiveHandle | null;
-    annotationMoveStart: Point;
-    originalRect: Rect | null;
-    originalPolygon: Polygon[] | null;
-    private deleteHistory;
-    strokeStyle: string;
-    lineWidth: number;
-    lineStyle: LineStyle;
-    vertexStyle: VertexStyle;
-    selectionStyle: SelectionStyle;
-    private colorConfig;
-    constructor(viewport: ViewportManager);
-    /**
-     * 设置颜色配置
-     */
-    setColorConfig(config: string | ColorConfig): void;
-    /**
-     * 获取颜色配置
-     */
-    getColorConfig(): ColorConfig;
-    /**
-     * 应用颜色配置到当前样式
-     */
-    private applyColorConfig;
-    /**
-     * 获取指定类型的颜色
-     */
-    getColorForType(type: 'rect' | 'polygon' | 'default'): string;
-    /**
-     * 获取当前样式（用于创建新标注时保存）
-     */
-    getCurrentStyle(): AnnotationStyle;
-    /**
-     * 设置边线样式
-     */
-    setLineStyle(style: LineStyle): void;
-    /**
-     * 设置顶点样式
-     */
-    setVertexStyle(style: Partial<VertexStyle>): void;
-    /**
-     * 获取边线样式
-     */
-    getLineStyle(): LineStyle;
-    /**
-     * 获取顶点样式
-     */
-    getVertexStyle(): VertexStyle;
-    /**
-     * 获取标注的样式（如果不存在则返回当前样式）
-     */
-    getAnnotationStyle(annotation: Operate<Rect | Polygon>): AnnotationStyle;
-    /**
-     * 开始绘制矩形
-     */
-    startRectDrawing(startPoint: Point): void;
-    /**
-     * 更新矩形绘制
-     */
-    updateRectDrawing(currentPoint: Point): void;
-    /**
-     * 完成矩形绘制
-     */
-    finishRectDrawing(): boolean;
-    /**
-     * 开始绘制多边形
-     */
-    startPolygonDrawing(startPoint: Point): void;
-    /**
-     * 添加多边形点
-     */
-    addPolygonPoint(point: Point): boolean;
-    /**
-     * 更新多边形临时点
-     */
-    updatePolygonTempPoint(point: Point): void;
-    /**
-     * 完成多边形绘制
-     */
-    finishPolygonDrawing(): boolean;
-    /**
-     * 取消当前绘制
-     */
-    cancelDrawing(): void;
-    /**
-     * 撤销操作
-     */
-    withdraw(): boolean;
-    /**
-     * 选中指定索引的标注
-     */
-    selectAnnotation(index: number): boolean;
-    /**
-     * 取消选中
-     */
-    deselectAnnotation(): void;
-    /**
-     * 删除选中的标注
-     */
-    deleteSelectedAnnotation(): boolean;
-    /**
-     * 开始移动标注
-     */
-    startMovingAnnotation(e: MouseEvent): boolean;
-    /**
-     * 移动选中的标注
-     */
-    moveSelectedAnnotation(dx: number, dy: number): boolean;
-    /**
-     * 完成标注移动
-     */
-    finishMovingAnnotation(): void;
-    /**
-     * 开始调整大小
-     */
-    startResizing(handle: ActiveHandle, _startPoint: Point): boolean;
-    /**
-     * 调整矩形大小
-     */
-    resizeRect(currentPoint: Point): boolean;
-    /**
-     * 调整多边形顶点位置
-     */
-    resizePolygon(currentPoint: Point): boolean;
-    /**
-     * 获取点击位置对应的标注
-     */
-    getAnnotationAtPoint(imgCoords: Point): SelectedAnnotation | null;
-    /**
-     * 获取点击位置的控制点
-     */
-    getHandleAtPoint(offsetX: number, offsetY: number): ActiveHandle | null;
-    /**
-     * 清除所有标注
-     */
-    clear(): void;
-    /**
-     * 获取所有标注数据
-     */
-    getAnnotations(): Operate<Rect | Polygon>[];
-    /**
-     * 获取当前选中的标注信息
-     */
-    getSelectedAnnotation(): {
-        index: number;
-        type: "rect" | "polygon" | "text";
-        data: Operate<Rect | Polygon>;
-    } | null;
-}

package/dist/modules/events.d.ts

@@ -1,113 +0,0 @@
-/**
- * 事件处理模块
- * 负责所有用户交互事件的处理
- */
-import type { DrawType, Point } from './types';
-import type { ViewportManager } from './viewport';
-import type { AnnotationManager } from './annotations';
-import type { TextAnnotationManager } from './text-annotation';
-import type { Renderer } from './renderer';
-export declare class EventHandler {
-    private canvas;
-    private viewport;
-    private annotationManager;
-    private textManager;
-    private renderer;
-    private getDrawType;
-    private getBgImage;
-    private renderCallback;
-    private setDrawTypeCallback;
-    isDragging: boolean;
-    dragStart: Point;
-    justFinishedMove: boolean;
-    justDeselected: boolean;
-    constructor(canvas: HTMLCanvasElement, viewport: ViewportManager, annotationManager: AnnotationManager, textManager: TextAnnotationManager, renderer: Renderer, getDrawType: () => DrawType, getBgImage: () => HTMLImageElement | null, renderCallback: () => void, setDrawTypeCallback: (type: DrawType) => void);
-    /**
-     * 处理滚轮缩放
-     */
-    handleWheel(e: WheelEvent): void;
-    /**
-     * 处理鼠标按下
-     */
-    handleMouseDown(e: MouseEvent): void;
-    /**
-     * 拖拽模式下检查文本点击
-     */
-    private checkTextClickInDragMode;
-    /**
-     * 文本模式下的点击处理
-     */
-    private handleTextModeClick;
-    /**
-     * 矩形模式下的点击处理
-     */
-    private handleRectModeClick;
-    /**
-     * 多边形模式下的点击处理
-     */
-    private handlePolygonModeClick;
-    /**
-     * 纯移动检测：检测是否点击了矩形
-     */
-    private handleRectModeClickForMove;
-    /**
-     * 纯移动检测：检测是否点击了多边形
-     */
-    private handlePolygonModeClickForMove;
-    /**
-     * 无模式下的点击处理
-     */
-    private handleNoModeClick;
-    /**
-     * 检查多边形点是否有效（避免重复点）
-     */
-    private checkPolygonPointValid;
-    /**
-     * 处理鼠标移动
-     */
-    handleMouseMove(e: MouseEvent): void;
-    /**
-     * 处理标注移动或调整大小
-     */
-    private handleAnnotationMove;
-    /**
-     * 更新鼠标光标样式
-     */
-    private updateCursor;
-    /**
-     * 更新矩形模式光标
-     */
-    private updateRectModeCursor;
-    /**
-     * 更新多边形模式光标
-     */
-    private updatePolygonModeCursor;
-    /**
-     * 更新拖拽模式光标
-     */
-    private updateDragModeCursor;
-    /**
-     * 更新无模式光标
-     */
-    private updateNoModeCursor;
-    /**
-     * 处理鼠标释放
-     */
-    handleMouseUp(_e: MouseEvent): void;
-    /**
-     * 处理鼠标离开
-     */
-    handleMouseLeave(e: MouseEvent): void;
-    /**
-     * 处理鼠标双击
-     */
-    handleDoubleClick(e: MouseEvent): void;
-    /**
-     * 处理鼠标单击（用于多边形绘制）
-     */
-    handleClick(e: MouseEvent): void;
-    /**
-     * 处理键盘按下
-     */
-    handleKeyDown(e: KeyboardEvent): void;
-}

package/dist/modules/renderer.d.ts

@@ -1,74 +0,0 @@
-/**
- * 渲染模块
- * 负责所有绘制操作，包括背景图片、标注、选中高亮、文本标注等
- */
-import type { ViewportManager } from './viewport';
-import type { AnnotationManager } from './annotations';
-import type { TextAnnotationManager } from './text-annotation';
-export declare class Renderer {
-    private ctx;
-    private viewport;
-    private annotationManager;
-    private textManager;
-    private canvas;
-    constructor(ctx: CanvasRenderingContext2D, viewport: ViewportManager, annotationManager: AnnotationManager, textManager: TextAnnotationManager, canvas: HTMLCanvasElement);
-    /**
-     * 主渲染方法
-     */
-    render(bgImage: HTMLImageElement | null): void;
-    /**
-     * 绘制背景图片
-     */
-    private drawBackgroundImage;
-    /**
-     * 绘制标注（矩形、多边形）
-     */
-    private drawAnnotations;
-    /**
-     * 设置边线虚线样式
-     */
-    private setLineDash;
-    /**
-     * 绘制矩形
-     * @param rect - 矩形数据
-     * @param isSelected - 是否被选中（用于顶点颜色）
-     */
-    private drawRect;
-    /**
-     * 绘制多边形
-     * @param polygon - 多边形顶点数据
-     * @param closed - 是否闭合
-     * @param vertexStyle - 顶点样式
-     */
-    private drawPolygon;
-    /**
-     * 绘制多边形顶点标记
-     * @param polygon - 多边形顶点数据
-     * @param vertexStyle - 顶点样式
-     */
-    private drawPolygonVertices;
-    /**
-     * 绘制当前正在绘制的多边形
-     */
-    private drawCurrentPolygon;
-    /**
-     * 绘制选中状态的标注高亮
-     */
-    private drawSelectionHighlight;
-    /**
-     * 绘制矩形选中高亮
-     */
-    private drawRectSelectionHighlight;
-    /**
-     * 绘制多边形选中高亮
-     */
-    private drawPolygonSelectionHighlight;
-    /**
-     * 绘制文本标注
-     */
-    private drawTextAnnotations;
-    /**
-     * 导出时绘制所有内容到指定上下文
-     */
-    drawForExport(ctx: CanvasRenderingContext2D, bgImage: HTMLImageElement, originalWidth: number, originalHeight: number): void;
-}

package/dist/modules/text-annotation.d.ts

@@ -1,149 +0,0 @@
-/**
- * 文本标注模块
- * 负责文本标注的添加、编辑、移动、删除等功能
- */
-import type { TextAnnotation, TextStyle, Point, TextInputStyle } from './types';
-import type { ViewportManager } from './viewport';
-export declare class TextAnnotationManager {
-    private viewport;
-    private container;
-    private ctx;
-    private renderCallback?;
-    textAnnotations: TextAnnotation[];
-    editingTextIndex: number | null;
-    currentEditingIndex: number | null;
-    isTextMoving: boolean;
-    textMoveStart: Point;
-    textBeforeEditing: string;
-    selectedTextIndex: number | null;
-    textInput: HTMLInputElement | null;
-    private deleteHistory;
-    private defaultInputStyle;
-    textStyle: TextStyle;
-    constructor(viewport: ViewportManager, container: HTMLElement, ctx: CanvasRenderingContext2D, renderCallback?: (() => void) | undefined);
-    /**
-     * 创建文本输入框
-     */
-    private createTextInput;
-    /**
-     * 应用输入框样式
-     */
-    private applyInputStyle;
-    /**
-     * 设置文本样式
-     */
-    setTextStyle(style: Partial<TextStyle>): void;
-    /**
-     * 设置输入框样式
-     */
-    setInputStyle(style: Partial<TextInputStyle>): void;
-    /**
-     * 设置选中态样式
-     */
-    setSelectionStyle(style: {
-        selectedBorderColor?: string;
-        selectedBackgroundColor?: string;
-    }): void;
-    /**
-     * 获取当前文本样式（用于创建新标注时保存）
-     */
-    getCurrentStyle(): Pick<TextStyle, 'font' | 'color' | 'backgroundColor'>;
-    /**
-     * 添加文本标注
-     */
-    addTextAnnotation(x: number, y: number, text?: string): number;
-    /**
-     * 更新文本标注内容
-     */
-    updateTextAnnotation(index: number, text: string): boolean;
-    /**
-     * 移动文本标注位置
-     */
-    moveTextAnnotation(index: number, x: number, y: number): boolean;
-    /**
-     * 删除文本标注
-     */
-    removeTextAnnotation(index: number): boolean;
-    /**
-     * 清除所有文本标注
-     */
-    clearTextAnnotations(): void;
-    /**
-     * 开始编辑文本标注
-     */
-    startEditing(index: number): boolean;
-    /**
-     * 完成编辑
-     */
-    finishEditing(): boolean;
-    /**
-     * 取消编辑
-     */
-    cancelEditing(): boolean;
-    /**
-     * 删除正在编辑的文本标注
-     */
-    deleteEditingAnnotation(): boolean;
-    /**
-     * 重置编辑状态
-     */
-    private resetEditingState;
-    /**
-     * 调整输入框宽度
-     */
-    private adjustInputWidth;
-    /**
-     * 开始移动文本标注
-     */
-    startMoving(e: MouseEvent, index: number): boolean;
-    /**
-     * 移动文本标注
-     */
-    moveAnnotation(e: MouseEvent): boolean;
-    /**
-     * 完成移动
-     */
-    finishMoving(): void;
-    /**
-     * 检查是否点击了文本标注
-     */
-    checkTextClick(offsetX: number, offsetY: number): number | null;
-    /**
-     * 检查是否点击了文本标注（用于移动）
-     */
-    checkTextClickForMove(e: MouseEvent): {
-        index: number;
-        handled: boolean;
-    };
-    /**
-     * 获取所有文本标注
-     */
-    getTextAnnotations(): TextAnnotation[];
-    /**
-     * 撤销文本标注
-     */
-    withdraw(): boolean;
-    /**
-     * 选中文本标注
-     */
-    selectTextAnnotation(index: number): boolean;
-    /**
-     * 取消选中文本标注
-     */
-    deselectTextAnnotation(): void;
-    /**
-     * 删除选中的文本标注
-     */
-    deleteSelectedTextAnnotation(): boolean;
-    /**
-     * 获取选中的文本标注信息
-     */
-    getSelectedTextAnnotation(): {
-        index: number;
-        data: TextAnnotation;
-    } | null;
-    /**
-     * 销毁（清理 DOM）
-     */
-    destroy(): void;
-}

package/dist/modules/types.d.ts

@@ -1,147 +0,0 @@
-/**
- * 类型定义模块
- * 包含所有标注库的类型定义
- */
-/** 点坐标 */
-export type Point = {
-    x: number;
-    y: number;
-};
-/** 矩形标注 */
-export type Rect = {
-    start: Point;
-    width: number;
-    height: number;
-};
-/** 多边形顶点 */
-export type Polygon = {
-    point: Point;
-};
-/** 文本标注 */
-export type TextAnnotation = {
-    position: {
-        x: number;
-        y: number;
-    };
-    text: string;
-    width: number;
-    height: number;
-    /** 文本标注的独立样式 */
-    style?: Pick<TextStyle, 'font' | 'color' | 'backgroundColor'>;
-};
-/** 标注类型联合 */
-export type Shape = Rect | Polygon | TextAnnotation;
-/** 边线样式 */
-export type LineStyle = 'solid' | 'dashed' | 'dotted';
-/** 顶点样式 */
-export type VertexStyle = {
-    size: number;
-    fillColor: string;
-    strokeColor: string;
-    strokeWidth: number;
-    shape: 'circle' | 'square' | 'diamond';
-};
-/** 标注样式 */
-export type AnnotationStyle = {
-    strokeColor: string;
-    lineWidth: number;
-    lineStyle?: LineStyle;
-    vertexStyle?: VertexStyle;
-};
-/** 操作记录 */
-export type Operate<T extends Shape> = {
-    type: "rect" | "polygon" | "drag" | "text" | "";
-    data: T[];
-    status: "fullfilled" | "pending";
-    style?: AnnotationStyle;
-};
-/** 绘制类型 */
-export type DrawType = "rect" | "polygon" | "drag" | "text" | "";
-/** 抽屉选项 */
-export type DrawerOptions = {
-    id: string;
-    drawType?: DrawType;
-    useEvents?: boolean;
-    /** 标注颜色配置 */
-    annotationColor?: string | ColorConfig;
-    /** 边线样式 */
-    lineStyle?: LineStyle;
-    /** 顶点样式 */
-    vertexStyle?: Partial<VertexStyle>;
-    /** 文本样式 */
-    textStyle?: Partial<TextStyle>;
-};
-/** 选中标注信息 */
-export type SelectedAnnotation = {
-    index: number;
-    type: "rect" | "polygon" | "text";
-};
-/** 控制点信息 */
-export type ActiveHandle = {
-    type: "rect-corner" | "polygon-vertex";
-    index: number;
-};
-/** 事件处理器类型 */
-export type WheelEventListener = (event: WheelEvent) => void;
-export type MouseEventListener = (event: MouseEvent) => void;
-export type KeyboardEventListener = (event: KeyboardEvent) => void;
-/** 抽屉事件处理器集合 */
-export type DrawerEventHandlers = {
-    wheel: WheelEventListener;
-    mousedown: MouseEventListener;
-    mousemove: MouseEventListener;
-    mouseup: MouseEventListener;
-    mouseleave: MouseEventListener;
-    dblclick: MouseEventListener;
-    click: MouseEventListener;
-    keydown: KeyboardEventListener;
-};
-/** 文本输入框样式 */
-export type TextInputStyle = {
-    border: string;
-    borderRadius: string;
-    padding: string;
-    fontSize: string;
-    fontFamily: string;
-    backgroundColor: string;
-    color: string;
-    boxShadow: string;
-    minWidth: string;
-    maxWidth: string;
-};
-/** 文本样式配置 */
-export type TextStyle = {
-    font: string;
-    color: string;
-    padding: number;
-    backgroundColor: string;
-    borderRadius: number;
-    selectedBorderColor: string;
-    selectedBackgroundColor: string;
-    /** 文本输入框样式 */
-    inputStyle?: Partial<TextInputStyle>;
-};
-/** 选中样式配置 */
-export type SelectionStyle = {
-    strokeColor: string;
-    fillColor: string;
-    handleSize: number;
-    handleColor: string;
-};
-/** 颜色配置 */
-export type ColorConfig = {
-    rect?: string;
-    polygon?: string;
-    text?: string;
-    default?: string;
-};
-/** 视口尺寸 */
-export type ViewportSize = {
-    width: number;
-    height: number;
-};
-/** 视图偏移 */
-export type ViewportOffset = {
-    x: number;
-    y: number;
-};

package/dist/modules/utils.d.ts

@@ -1,31 +0,0 @@
-/**
- * 工具函数模块
- * 包含几何计算、坐标转换等通用工具函数
- */
-import type { Point, Rect, Polygon } from './types';
-/**
- * 检测点是否在矩形内
- * 支持负宽高的情况（从右下往左上画）
- */
-export declare function isPointInRect(point: Point, rect: Rect): boolean;
-/**
- * 检测点是否在多边形内（射线法）
- */
-export declare function isPointInPolygon(point: Point, polygon: Polygon[]): boolean;
-/**
- * 从 URL 解析图片类型
- * 支持 png, jpg, jpeg, webp, gif, bmp, svg 等常见格式
- */
-export declare function getImageTypeFromUrl(urlString: string): string;
-/**
- * 将 base64 字符串转换为 File 对象
- */
-export declare function base64ToFile(base64Data: string, filename: string): File;
-/**
- * 将 base64 字符串转换为 Blob 对象（用于上传）
- */
-export declare function base64ToBlob(base64: string): Promise<Blob>;
-/**
- * 计算缩放增量
- */
-export declare function getZoomDelta(currentScale: number, zoomIn: boolean): number;