image-annotation-drawer 1.0.0

package/dist/index.js

@@ -0,0 +1,3333 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ImageAnnotationDrawer = global.ImageAnnotationDrawer || {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * 工具函数模块
+     * 包含几何计算、坐标转换等通用工具函数
+     */
+    /**
+     * 检测点是否在矩形内
+     * 支持负宽高的情况（从右下往左上画）
+     */
+    function isPointInRect(point, rect) {
+        // 处理负宽高的情况
+        const x = rect.width >= 0 ? rect.start.x : rect.start.x + rect.width;
+        const y = rect.height >= 0 ? rect.start.y : rect.start.y + rect.height;
+        const w = Math.abs(rect.width);
+        const h = Math.abs(rect.height);
+        return point.x >= x && point.x <= x + w && point.y >= y && point.y <= y + h;
+    }
+    /**
+     * 检测点是否在多边形内（射线法）
+     */
+    function isPointInPolygon(point, polygon) {
+        if (polygon.length < 3)
+            return false;
+        let inside = false;
+        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+            const xi = polygon[i].point.x;
+            const yi = polygon[i].point.y;
+            const xj = polygon[j].point.x;
+            const yj = polygon[j].point.y;
+            const intersect = yi > point.y !== yj > point.y &&
+                point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+            if (intersect)
+                inside = !inside;
+        }
+        return inside;
+    }
+    /**
+     * 从 URL 解析图片类型
+     * 支持 png, jpg, jpeg, webp, gif, bmp, svg 等常见格式
+     */
+    function getImageTypeFromUrl(urlString) {
+        try {
+            const url = new URL(urlString);
+            const pathname = url.pathname.toLowerCase();
+            // 支持的图片格式
+            if (pathname.endsWith(".png"))
+                return "png";
+            if (pathname.endsWith(".jpg"))
+                return "jpg";
+            if (pathname.endsWith(".jpeg"))
+                return "jpeg";
+            if (pathname.endsWith(".webp"))
+                return "webp";
+            if (pathname.endsWith(".gif"))
+                return "gif";
+            if (pathname.endsWith(".bmp"))
+                return "bmp";
+            if (pathname.endsWith(".svg"))
+                return "svg";
+            // 默认返回 jpeg
+            return "jpeg";
+        }
+        catch (_a) {
+            return "jpeg";
+        }
+    }
+    /**
+     * 将 base64 字符串转换为 File 对象
+     */
+    function base64ToFile(base64Data, filename) {
+        const parts = base64Data.split(";base64,");
+        const contentType = parts[0].split(":")[1];
+        const raw = window.atob(parts[1]);
+        const rawLength = raw.length;
+        const uInt8Array = new Uint8Array(rawLength);
+        for (let i = 0; i < rawLength; ++i) {
+            uInt8Array[i] = raw.charCodeAt(i);
+        }
+        const blob = new Blob([uInt8Array], { type: contentType });
+        return new File([blob], filename, { type: contentType });
+    }
+    /**
+     * 将 base64 字符串转换为 Blob 对象（用于上传）
+     */
+    function base64ToBlob(base64) {
+        return new Promise((resolve, reject) => {
+            const parts = base64.split(";base64,");
+            if (parts.length < 2) {
+                reject(new Error("Invalid base64 string"));
+                return;
+            }
+            const mime = parts[0].split(":")[1];
+            const byteString = atob(parts[1]);
+            const arrayBuffer = new ArrayBuffer(byteString.length);
+            const uint8Array = new Uint8Array(arrayBuffer);
+            for (let i = 0; i < byteString.length; i++) {
+                uint8Array[i] = byteString.charCodeAt(i);
+            }
+            resolve(new Blob([arrayBuffer], { type: mime }));
+        });
+    }
+    /**
+     * 计算缩放增量
+     */
+    function getZoomDelta(currentScale, zoomIn) {
+        // 使用动态缩放增量
+        if (currentScale < 2) {
+            return zoomIn ? 0.1 : -0.1;
+        }
+        else if (currentScale < 5) {
+            return zoomIn ? 0.05 : -0.05;
+        }
+        else {
+            return zoomIn ? 0.02 : -0.02;
+        }
+    }
+
+    /**
+     * 视图管理模块
+     * 负责视口尺寸、缩放、偏移、边界约束等视图相关功能
+     */
+    class ViewportManager {
+        constructor() {
+            // 视口尺寸
+            this.width = 0;
+            this.height = 0;
+            // 原始图片尺寸
+            this.originalWidth = 0;
+            this.originalHeight = 0;
+            // 视图变换属性
+            this.scale = 1;
+            this.minScale = 1;
+            this.maxScale = 10;
+            this.offset = { x: 0, y: 0 };
+            // 初始视图状态
+            this.initialScale = 1;
+            this.initialOffset = { x: 0, y: 0 };
+            this.isInitialScale = true;
+            // 边界约束
+            this.minOffsetX = 0;
+            this.minOffsetY = 0;
+            this.maxOffsetX = 0;
+            this.maxOffsetY = 0;
+        }
+        /**
+         * 设置视口尺寸
+         */
+        setSize(width, height) {
+            this.width = width;
+            this.height = height;
+        }
+        /**
+         * 设置原始图片尺寸
+         */
+        setOriginalSize(width, height) {
+            this.originalWidth = width;
+            this.originalHeight = height;
+        }
+        /**
+         * 计算初始视图参数
+         */
+        calculateInitialView() {
+            if (this.originalWidth === 0 || this.originalHeight === 0)
+                return;
+            // 计算缩放比例以适应容器
+            const scaleX = this.width / this.originalWidth;
+            const scaleY = this.height / this.originalHeight;
+            this.scale = Math.min(scaleX, scaleY);
+            this.initialScale = this.scale;
+            // 设置最小缩放为初始缩放比例
+            this.minScale = this.initialScale;
+            // 计算居中位置
+            this.offset = {
+                x: (this.width - this.originalWidth * this.scale) / 2,
+                y: (this.height - this.originalHeight * this.scale) / 2,
+            };
+            this.initialOffset = Object.assign({}, this.offset);
+            // 计算边界约束
+            this.calculateBoundaries();
+            // 标记为初始状态
+            this.isInitialScale = true;
+        }
+        /**
+         * 计算边界约束
+         */
+        calculateBoundaries() {
+            const imgScaledWidth = this.originalWidth * this.scale;
+            const imgScaledHeight = this.originalHeight * this.scale;
+            // 最大偏移量（图像完全在视口内）
+            this.maxOffsetX = 0;
+            this.maxOffsetY = 0;
+            // 最小偏移量（图像完全覆盖视口）
+            this.minOffsetX = this.width - imgScaledWidth;
+            this.minOffsetY = this.height - imgScaledHeight;
+            // 确保最小值不大于最大值
+            if (this.minOffsetX > this.maxOffsetX) {
+                [this.minOffsetX, this.maxOffsetX] = [this.maxOffsetX, this.minOffsetX];
+            }
+            if (this.minOffsetY > this.maxOffsetY) {
+                [this.minOffsetY, this.maxOffsetY] = [this.maxOffsetY, this.minOffsetY];
+            }
+        }
+        /**
+         * 确保视图在合理范围内
+         */
+        constrainViewport() {
+            // 约束X轴
+            if (this.offset.x > this.maxOffsetX) {
+                this.offset.x = this.maxOffsetX;
+            }
+            else if (this.offset.x < this.minOffsetX) {
+                this.offset.x = this.minOffsetX;
+            }
+            // 约束Y轴
+            if (this.offset.y > this.maxOffsetY) {
+                this.offset.y = this.maxOffsetY;
+            }
+            else if (this.offset.y < this.minOffsetY) {
+                this.offset.y = this.minOffsetY;
+            }
+        }
+        /**
+         * 将画布坐标转换为图像坐标
+         */
+        toImageCoordinates(canvasX, canvasY) {
+            return {
+                x: (canvasX - this.offset.x) / this.scale,
+                y: (canvasY - this.offset.y) / this.scale,
+            };
+        }
+        /**
+         * 将图像坐标转换为画布坐标
+         */
+        toCanvasCoordinates(imgX, imgY) {
+            return {
+                x: this.offset.x + imgX * this.scale,
+                y: this.offset.y + imgY * this.scale,
+            };
+        }
+        /**
+         * 更新缩放比例
+         */
+        updateScale(newScale, centerX, centerY) {
+            const oldScale = this.scale;
+            // 计算缩放前中心点在图像中的位置
+            const centerImgX = (centerX - this.offset.x) / oldScale;
+            const centerImgY = (centerY - this.offset.y) / oldScale;
+            // 更新缩放比例
+            this.scale = Math.max(this.minScale, Math.min(newScale, this.maxScale));
+            // 计算缩放后中心点应该的位置
+            const newCenterX = centerImgX * this.scale + this.offset.x;
+            const newCenterY = centerImgY * this.scale + this.offset.y;
+            // 调整偏移量以保持中心点不变
+            this.offset.x += centerX - newCenterX;
+            this.offset.y += centerY - newCenterY;
+            // 更新边界约束
+            this.calculateBoundaries();
+            this.constrainViewport();
+            // 更新初始状态标志
+            this.isInitialScale = this.scale === this.initialScale;
+        }
+        /**
+         * 重置视图到初始状态
+         */
+        resetToInitial() {
+            this.scale = this.initialScale;
+            this.offset = Object.assign({}, this.initialOffset);
+            this.calculateBoundaries();
+            this.isInitialScale = true;
+        }
+        /**
+         * 更新偏移量（用于拖拽）
+         */
+        updateOffset(dx, dy) {
+            this.offset.x += dx;
+            this.offset.y += dy;
+            this.constrainViewport();
+        }
+        /**
+         * 重置所有状态
+         */
+        reset() {
+            this.scale = 1;
+            this.minScale = 1;
+            this.offset = { x: 0, y: 0 };
+            this.initialScale = 1;
+            this.initialOffset = { x: 0, y: 0 };
+            this.isInitialScale = true;
+            this.minOffsetX = 0;
+            this.minOffsetY = 0;
+            this.maxOffsetX = 0;
+            this.maxOffsetY = 0;
+        }
+    }
+
+    /**
+     * 标注管理模块
+     * 负责矩形、多边形标注的存储、绘制、选中、移动、调整大小等功能
+     */
+    class AnnotationManager {
+        constructor(viewport) {
+            this.viewport = viewport;
+            // 标注记录列表
+            this.recordList = [];
+            // 当前操作
+            this.operate = {
+                type: "rect",
+                data: [],
+                status: "pending",
+            };
+            // 绘制状态
+            this.isDrawing = false;
+            this.drawStartPoint = { x: 0, y: 0 };
+            this.tempPolygonPoint = null;
+            // 选中状态
+            this.selectedAnnotation = null;
+            this.isMovingAnnotation = false;
+            this.isResizing = false;
+            this.activeHandle = null;
+            this.annotationMoveStart = { x: 0, y: 0 };
+            // 调整大小用的原始数据
+            this.originalRect = null;
+            this.originalPolygon = null;
+            // 删除历史记录（用于撤销删除）
+            this.deleteHistory = [];
+            // 样式配置
+            this.strokeStyle = "red";
+            this.lineWidth = 5;
+            this.lineStyle = 'solid';
+            this.vertexStyle = {
+                size: 8,
+                fillColor: 'red',
+                strokeColor: 'white',
+                strokeWidth: 2,
+                shape: 'circle'
+            };
+            this.selectionStyle = {
+                strokeColor: "#00D9FF",
+                fillColor: "rgba(0,217,255,0.15)",
+                handleSize: 12,
+                handleColor: "#00D9FF",
+            };
+            // 颜色配置
+            this.colorConfig = {
+                rect: "red",
+                polygon: "red",
+                default: "red"
+            };
+            this.applyColorConfig();
+        }
+        /**
+         * 设置颜色配置
+         */
+        setColorConfig(config) {
+            if (typeof config === 'string') {
+                this.colorConfig = {
+                    rect: config,
+                    polygon: config,
+                    default: config
+                };
+            }
+            else {
+                this.colorConfig = Object.assign(Object.assign({}, this.colorConfig), config);
+            }
+            this.applyColorConfig();
+        }
+        /**
+         * 获取颜色配置
+         */
+        getColorConfig() {
+            return Object.assign({}, this.colorConfig);
+        }
+        /**
+         * 应用颜色配置到当前样式
+         */
+        applyColorConfig() {
+            this.strokeStyle = this.colorConfig.default || "red";
+        }
+        /**
+         * 获取指定类型的颜色
+         */
+        getColorForType(type) {
+            return this.colorConfig[type] || this.colorConfig.default || "red";
+        }
+        /**
+         * 获取当前样式（用于创建新标注时保存）
+         */
+        getCurrentStyle() {
+            return {
+                strokeColor: this.strokeStyle,
+                lineWidth: this.lineWidth,
+                lineStyle: this.lineStyle,
+                vertexStyle: Object.assign({}, this.vertexStyle)
+            };
+        }
+        /**
+         * 设置边线样式
+         */
+        setLineStyle(style) {
+            this.lineStyle = style;
+        }
+        /**
+         * 设置顶点样式
+         */
+        setVertexStyle(style) {
+            this.vertexStyle = Object.assign(Object.assign({}, this.vertexStyle), style);
+            // 同步更新颜色
+            if (style.fillColor) {
+                this.strokeStyle = style.fillColor;
+            }
+        }
+        /**
+         * 获取边线样式
+         */
+        getLineStyle() {
+            return this.lineStyle;
+        }
+        /**
+         * 获取顶点样式
+         */
+        getVertexStyle() {
+            return Object.assign({}, this.vertexStyle);
+        }
+        /**
+         * 获取标注的样式（如果不存在则返回当前样式）
+         */
+        getAnnotationStyle(annotation) {
+            return annotation.style || this.getCurrentStyle();
+        }
+        /**
+         * 开始绘制矩形
+         */
+        startRectDrawing(startPoint) {
+            this.isDrawing = true;
+            this.drawStartPoint = startPoint;
+            this.operate = {
+                type: "rect",
+                data: [{ start: Object.assign({}, startPoint), width: 0, height: 0 }],
+                status: "pending",
+            };
+        }
+        /**
+         * 更新矩形绘制
+         */
+        updateRectDrawing(currentPoint) {
+            if (!this.isDrawing || this.operate.type !== "rect")
+                return;
+            const rect = this.operate.data[0];
+            rect.width = currentPoint.x - this.drawStartPoint.x;
+            rect.height = currentPoint.y - this.drawStartPoint.y;
+        }
+        /**
+         * 完成矩形绘制
+         */
+        finishRectDrawing() {
+            if (!this.isDrawing || this.operate.type !== "rect")
+                return false;
+            const rect = this.operate.data[0];
+            // 过滤无效矩形（太小）
+            if (Math.abs(rect.width) > 5 && Math.abs(rect.height) > 5) {
+                // 保存当前样式到标注
+                const annotationWithStyle = Object.assign(Object.assign({}, this.operate), { style: this.getCurrentStyle() });
+                this.recordList.push(annotationWithStyle);
+                // 添加新标注后清空删除历史
+                this.deleteHistory = [];
+            }
+            this.operate.data = [];
+            this.isDrawing = false;
+            return true;
+        }
+        /**
+         * 开始绘制多边形
+         */
+        startPolygonDrawing(startPoint) {
+            this.isDrawing = true;
+            this.operate = {
+                type: "polygon",
+                data: [{ point: startPoint }],
+                status: "pending",
+            };
+            this.tempPolygonPoint = startPoint;
+        }
+        /**
+         * 添加多边形点
+         */
+        addPolygonPoint(point) {
+            if (!this.isDrawing || this.operate.type !== "polygon")
+                return false;
+            // 避免添加重复点
+            const lastPoint = this.operate.data.length > 0
+                ? this.operate.data[this.operate.data.length - 1]
+                : null;
+            if (lastPoint &&
+                Math.abs(lastPoint.point.x - point.x) <= 5 &&
+                Math.abs(lastPoint.point.y - point.y) <= 5) {
+                return false;
+            }
+            this.operate.data.push({ point });
+            return true;
+        }
+        /**
+         * 更新多边形临时点
+         */
+        updatePolygonTempPoint(point) {
+            this.tempPolygonPoint = point;
+        }
+        /**
+         * 完成多边形绘制
+         */
+        finishPolygonDrawing() {
+            if (!this.isDrawing || this.operate.type !== "polygon")
+                return false;
+            // 过滤无效多边形（点数太少）
+            if (this.operate.data.length >= 3) {
+                this.operate.status = "fullfilled";
+                // 保存当前样式到标注
+                const annotationWithStyle = Object.assign(Object.assign({}, this.operate), { style: this.getCurrentStyle() });
+                this.recordList.push(annotationWithStyle);
+                // 添加新标注后清空删除历史
+                this.deleteHistory = [];
+            }
+            this.operate = {
+                type: "polygon",
+                data: [],
+                status: "pending",
+            };
+            this.isDrawing = false;
+            this.tempPolygonPoint = null;
+            return true;
+        }
+        /**
+         * 取消当前绘制
+         */
+        cancelDrawing() {
+            if (this.isDrawing && this.operate.type === "polygon" && this.operate.data.length >= 2) {
+                // 如果多边形至少有两个点，保存当前进度
+                this.operate.status = "fullfilled";
+                // 保存当前样式到标注
+                const annotationWithStyle = Object.assign(Object.assign({}, this.operate), { style: this.getCurrentStyle() });
+                this.recordList.push(annotationWithStyle);
+            }
+            this.operate.data = [];
+            this.isDrawing = false;
+            this.tempPolygonPoint = null;
+        }
+        /**
+         * 撤销操作
+         */
+        withdraw() {
+            if (this.operate.data.length > 0) {
+                // 撤销当前操作中的点
+                if (this.operate.type === "polygon") {
+                    this.operate.data.pop();
+                    if (this.operate.data.length === 0) {
+                        this.isDrawing = false;
+                    }
+                }
+                else {
+                    this.operate.data = [];
+                    this.isDrawing = false;
+                }
+                return true;
+            }
+            else if (this.deleteHistory.length > 0) {
+                // 优先恢复删除的标注
+                const { annotation, index } = this.deleteHistory.pop();
+                // 在原来的位置插入
+                this.recordList.splice(index, 0, annotation);
+                return true;
+            }
+            else if (this.recordList.length > 0) {
+                // 撤销已完成的操作
+                this.recordList.pop();
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 选中指定索引的标注
+         */
+        selectAnnotation(index) {
+            if (index < 0 || index >= this.recordList.length) {
+                this.deselectAnnotation();
+                return false;
+            }
+            const annotation = this.recordList[index];
+            this.selectedAnnotation = {
+                index,
+                type: annotation.type,
+            };
+            return true;
+        }
+        /**
+         * 取消选中
+         */
+        deselectAnnotation() {
+            this.selectedAnnotation = null;
+            this.isMovingAnnotation = false;
+            this.isResizing = false;
+            this.activeHandle = null;
+            this.originalRect = null;
+            this.originalPolygon = null;
+        }
+        /**
+         * 删除选中的标注
+         */
+        deleteSelectedAnnotation() {
+            if (!this.selectedAnnotation)
+                return false;
+            const index = this.selectedAnnotation.index;
+            const annotation = this.recordList[index];
+            // 保存删除的记录到历史（用于撤销）
+            this.deleteHistory.push({
+                annotation: Object.assign({}, annotation),
+                index
+            });
+            // 删除标注
+            this.recordList.splice(index, 1);
+            this.deselectAnnotation();
+            return true;
+        }
+        /**
+         * 开始移动标注
+         */
+        startMovingAnnotation(e) {
+            if (!this.selectedAnnotation)
+                return false;
+            this.isMovingAnnotation = true;
+            this.annotationMoveStart = { x: e.clientX, y: e.clientY };
+            return true;
+        }
+        /**
+         * 移动选中的标注
+         */
+        moveSelectedAnnotation(dx, dy) {
+            if (!this.selectedAnnotation)
+                return false;
+            const annotation = this.recordList[this.selectedAnnotation.index];
+            if (!annotation)
+                return false;
+            if (annotation.type === "rect") {
+                const rect = annotation.data[0];
+                rect.start.x += dx;
+                rect.start.y += dy;
+            }
+            else if (annotation.type === "polygon") {
+                const polygon = annotation.data;
+                polygon.forEach((p) => {
+                    p.point.x += dx;
+                    p.point.y += dy;
+                });
+            }
+            return true;
+        }
+        /**
+         * 完成标注移动
+         */
+        finishMovingAnnotation() {
+            this.isMovingAnnotation = false;
+            this.isResizing = false;
+            this.activeHandle = null;
+            this.originalRect = null;
+            this.originalPolygon = null;
+        }
+        /**
+         * 开始调整大小
+         */
+        startResizing(handle, _startPoint) {
+            if (!this.selectedAnnotation)
+                return false;
+            this.activeHandle = handle;
+            this.isResizing = true;
+            const annotation = this.recordList[this.selectedAnnotation.index];
+            if (annotation.type === "rect") {
+                this.originalRect = Object.assign({}, annotation.data[0]);
+            }
+            else if (annotation.type === "polygon") {
+                this.originalPolygon = annotation.data.map(p => ({ point: Object.assign({}, p.point) }));
+            }
+            return true;
+        }
+        /**
+         * 调整矩形大小
+         */
+        resizeRect(currentPoint) {
+            if (!this.selectedAnnotation || this.selectedAnnotation.type !== "rect" || !this.originalRect || !this.activeHandle) {
+                return false;
+            }
+            const annotation = this.recordList[this.selectedAnnotation.index];
+            const rect = annotation.data[0];
+            const original = this.originalRect;
+            // 原始矩形的四个角坐标
+            const origLeft = original.start.x;
+            const origRight = original.start.x + original.width;
+            const origTop = original.start.y;
+            const origBottom = original.start.y + original.height;
+            // 根据当前控制点索引确定固定点
+            let fixedX, fixedY;
+            switch (this.activeHandle.index) {
+                case 0:
+                    fixedX = origRight;
+                    fixedY = origBottom;
+                    break;
+                case 1:
+                    fixedX = origLeft;
+                    fixedY = origBottom;
+                    break;
+                case 2:
+                    fixedX = origRight;
+                    fixedY = origTop;
+                    break;
+                case 3:
+                    fixedX = origLeft;
+                    fixedY = origTop;
+                    break;
+                default: return false;
+            }
+            // 新矩形的边界由拖拽点和对角点决定
+            const newLeft = Math.min(currentPoint.x, fixedX);
+            const newRight = Math.max(currentPoint.x, fixedX);
+            const newTop = Math.min(currentPoint.y, fixedY);
+            const newBottom = Math.max(currentPoint.y, fixedY);
+            rect.start.x = newLeft;
+            rect.start.y = newTop;
+            rect.width = newRight - newLeft;
+            rect.height = newBottom - newTop;
+            // 根据新的矩形边界，更新控制点索引（实现越过交换）
+            const isLeft = currentPoint.x < fixedX;
+            const isTop = currentPoint.y < fixedY;
+            if (this.activeHandle.index === 0) {
+                if (!isLeft && !isTop)
+                    this.activeHandle.index = 3;
+                else if (!isLeft && isTop)
+                    this.activeHandle.index = 1;
+                else if (isLeft && !isTop)
+                    this.activeHandle.index = 2;
+            }
+            else if (this.activeHandle.index === 1) {
+                if (isLeft && !isTop)
+                    this.activeHandle.index = 2;
+                else if (isLeft && isTop)
+                    this.activeHandle.index = 0;
+                else if (!isLeft && !isTop)
+                    this.activeHandle.index = 3;
+            }
+            else if (this.activeHandle.index === 2) {
+                if (!isLeft && isTop)
+                    this.activeHandle.index = 1;
+                else if (isLeft && isTop)
+                    this.activeHandle.index = 0;
+                else if (!isLeft && !isTop)
+                    this.activeHandle.index = 3;
+            }
+            else if (this.activeHandle.index === 3) {
+                if (isLeft && isTop)
+                    this.activeHandle.index = 0;
+                else if (!isLeft && isTop)
+                    this.activeHandle.index = 1;
+                else if (isLeft && !isTop)
+                    this.activeHandle.index = 2;
+            }
+            // 更新 originalRect 为当前矩形，为下次拖拽做准备
+            this.originalRect = Object.assign({}, rect);
+            return true;
+        }
+        /**
+         * 调整多边形顶点位置
+         */
+        resizePolygon(currentPoint) {
+            if (!this.selectedAnnotation || this.selectedAnnotation.type !== "polygon" || !this.activeHandle) {
+                return false;
+            }
+            const annotation = this.recordList[this.selectedAnnotation.index];
+            const polygon = annotation.data;
+            const vertexIndex = this.activeHandle.index;
+            if (vertexIndex >= 0 && vertexIndex < polygon.length) {
+                polygon[vertexIndex].point.x = currentPoint.x;
+                polygon[vertexIndex].point.y = currentPoint.y;
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 获取点击位置对应的标注
+         */
+        getAnnotationAtPoint(imgCoords) {
+            // 从后往前遍历，优先选中上层标注
+            for (let i = this.recordList.length - 1; i >= 0; i--) {
+                const annotation = this.recordList[i];
+                if (annotation.type === "rect") {
+                    const rect = annotation.data[0];
+                    if (isPointInRect(imgCoords, rect)) {
+                        return { index: i, type: "rect" };
+                    }
+                }
+                else if (annotation.type === "polygon") {
+                    const polygon = annotation.data;
+                    if (isPointInPolygon(imgCoords, polygon)) {
+                        return { index: i, type: "polygon" };
+                    }
+                }
+            }
+            return null;
+        }
+        /**
+         * 获取点击位置的控制点
+         */
+        getHandleAtPoint(offsetX, offsetY) {
+            if (!this.selectedAnnotation)
+                return null;
+            const annotation = this.recordList[this.selectedAnnotation.index];
+            const handleSize = this.selectionStyle.handleSize;
+            const halfHandle = handleSize / 2;
+            if (annotation.type === "rect") {
+                const rect = annotation.data[0];
+                const x = this.viewport.offset.x + rect.start.x * this.viewport.scale;
+                const y = this.viewport.offset.y + rect.start.y * this.viewport.scale;
+                const w = rect.width * this.viewport.scale;
+                const h = rect.height * this.viewport.scale;
+                // 四个角的控制点
+                const corners = [
+                    { x: x, y: y, index: 0 },
+                    { x: x + w, y: y, index: 1 },
+                    { x: x, y: y + h, index: 2 },
+                    { x: x + w, y: y + h, index: 3 },
+                ];
+                for (const corner of corners) {
+                    if (offsetX >= corner.x - halfHandle &&
+                        offsetX <= corner.x + halfHandle &&
+                        offsetY >= corner.y - halfHandle &&
+                        offsetY <= corner.y + halfHandle) {
+                        return { type: "rect-corner", index: corner.index };
+                    }
+                }
+            }
+            else if (annotation.type === "polygon") {
+                const polygon = annotation.data;
+                for (let i = 0; i < polygon.length; i++) {
+                    const p = polygon[i];
+                    const x = this.viewport.offset.x + p.point.x * this.viewport.scale;
+                    const y = this.viewport.offset.y + p.point.y * this.viewport.scale;
+                    if (offsetX >= x - halfHandle &&
+                        offsetX <= x + halfHandle &&
+                        offsetY >= y - halfHandle &&
+                        offsetY <= y + halfHandle) {
+                        return { type: "polygon-vertex", index: i };
+                    }
+                }
+            }
+            return null;
+        }
+        /**
+         * 清除所有标注
+         */
+        clear() {
+            this.recordList = [];
+            this.operate = {
+                type: "rect",
+                data: [],
+                status: "pending",
+            };
+            this.isDrawing = false;
+            this.tempPolygonPoint = null;
+            this.deselectAnnotation();
+            // 清空删除历史
+            this.deleteHistory = [];
+        }
+        /**
+         * 获取所有标注数据
+         */
+        getAnnotations() {
+            return [...this.recordList];
+        }
+        /**
+         * 获取当前选中的标注信息
+         */
+        getSelectedAnnotation() {
+            if (!this.selectedAnnotation)
+                return null;
+            const annotation = this.recordList[this.selectedAnnotation.index];
+            if (!annotation)
+                return null;
+            return {
+                index: this.selectedAnnotation.index,
+                type: this.selectedAnnotation.type,
+                data: annotation,
+            };
+        }
+    }
+
+    /**
+     * 文本标注模块
+     * 负责文本标注的添加、编辑、移动、删除等功能
+     */
+    class TextAnnotationManager {
+        constructor(viewport, container, ctx, renderCallback) {
+            this.viewport = viewport;
+            this.container = container;
+            this.ctx = ctx;
+            this.renderCallback = renderCallback;
+            // 文本标注列表
+            this.textAnnotations = [];
+            // 编辑状态
+            this.editingTextIndex = null;
+            this.currentEditingIndex = null;
+            this.isTextMoving = false;
+            this.textMoveStart = { x: 0, y: 0 };
+            this.textBeforeEditing = "";
+            // 选中状态（非编辑状态下的选中）
+            this.selectedTextIndex = null;
+            // DOM 元素
+            this.textInput = null;
+            // 删除历史记录（用于撤销删除）
+            this.deleteHistory = [];
+            // 默认输入框样式
+            this.defaultInputStyle = {
+                border: "2px solid #00D9FF",
+                borderRadius: "6px",
+                padding: "6px 10px",
+                fontSize: "16px",
+                fontFamily: "Arial, sans-serif",
+                backgroundColor: "#ffffff",
+                color: "#333",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                minWidth: "60px",
+                maxWidth: "200px"
+            };
+            // 样式配置
+            this.textStyle = {
+                font: "16px Arial",
+                color: "#FFD700",
+                padding: 6,
+                backgroundColor: "rgba(0,0,0,0.6)",
+                borderRadius: 4,
+                selectedBorderColor: "#00D9FF",
+                selectedBackgroundColor: "rgba(0,217,255,0.15)",
+                inputStyle: Object.assign({}, this.defaultInputStyle)
+            };
+            this.createTextInput();
+        }
+        /**
+         * 创建文本输入框
+         */
+        createTextInput() {
+            this.textInput = document.createElement("input");
+            this.textInput.type = "text";
+            this.textInput.style.position = "absolute";
+            this.textInput.style.zIndex = "99999";
+            this.textInput.style.display = "none";
+            this.textInput.style.outline = "none";
+            this.textInput.style.width = "fit-content";
+            this.textInput.placeholder = "输入文字...";
+            // 应用自定义样式
+            this.applyInputStyle();
+            // 失去焦点时完成编辑
+            this.textInput.addEventListener("blur", () => {
+                this.finishEditing();
+                // 触发重新渲染以显示文本标注
+                if (this.renderCallback) {
+                    this.renderCallback();
+                }
+            });
+            // 键盘事件处理
+            this.textInput.addEventListener("keydown", (e) => {
+                e.stopPropagation();
+                if (e.key === "Enter") {
+                    this.finishEditing();
+                    // 触发重新渲染以显示文本标注
+                    if (this.renderCallback) {
+                        this.renderCallback();
+                    }
+                }
+                else if (e.key === "Escape") {
+                    e.preventDefault();
+                    this.cancelEditing();
+                }
+                else if (e.key === "Delete") {
+                    if (this.textInput.value === "") {
+                        e.preventDefault();
+                        this.deleteEditingAnnotation();
+                    }
+                }
+            });
+            // 输入时自动调整宽度
+            this.textInput.addEventListener("input", () => {
+                this.adjustInputWidth();
+            });
+            this.container.appendChild(this.textInput);
+        }
+        /**
+         * 应用输入框样式
+         */
+        applyInputStyle() {
+            if (!this.textInput)
+                return;
+            const style = Object.assign(Object.assign({}, this.defaultInputStyle), this.textStyle.inputStyle);
+            this.textInput.style.border = style.border;
+            this.textInput.style.borderRadius = style.borderRadius;
+            this.textInput.style.padding = style.padding;
+            this.textInput.style.fontSize = style.fontSize;
+            this.textInput.style.fontFamily = style.fontFamily;
+            this.textInput.style.backgroundColor = style.backgroundColor;
+            this.textInput.style.color = style.color;
+            this.textInput.style.boxShadow = style.boxShadow;
+            this.textInput.style.minWidth = style.minWidth;
+            this.textInput.style.maxWidth = style.maxWidth;
+        }
+        /**
+         * 设置文本样式
+         */
+        setTextStyle(style) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), style);
+            this.applyInputStyle();
+        }
+        /**
+         * 设置输入框样式
+         */
+        setInputStyle(style) {
+            this.textStyle.inputStyle = Object.assign(Object.assign({}, this.textStyle.inputStyle), style);
+            this.applyInputStyle();
+        }
+        /**
+         * 设置选中态样式
+         */
+        setSelectionStyle(style) {
+            if (style.selectedBorderColor !== undefined) {
+                this.textStyle.selectedBorderColor = style.selectedBorderColor;
+            }
+            if (style.selectedBackgroundColor !== undefined) {
+                this.textStyle.selectedBackgroundColor = style.selectedBackgroundColor;
+            }
+        }
+        /**
+         * 获取当前文本样式（用于创建新标注时保存）
+         */
+        getCurrentStyle() {
+            return {
+                font: this.textStyle.font,
+                color: this.textStyle.color,
+                backgroundColor: this.textStyle.backgroundColor
+            };
+        }
+        /**
+         * 添加文本标注
+         */
+        addTextAnnotation(x, y, text = "") {
+            var _a;
+            // 测量文本尺寸
+            this.ctx.font = this.textStyle.font;
+            const measureText = text || "输入文字...";
+            const metrics = this.ctx.measureText(measureText);
+            // 计算实际文本高度（使用 actualBoundingBox 如果可用，否则使用字体大小）
+            let textHeight;
+            if (metrics.actualBoundingBoxAscent && metrics.actualBoundingBoxDescent) {
+                textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+            }
+            else {
+                // 回退：使用字体大小
+                const fontSize = parseInt(((_a = this.textStyle.font.match(/\d+/)) === null || _a === void 0 ? void 0 : _a[0]) || "16");
+                textHeight = fontSize * 1.2;
+            }
+            const textAnnotation = {
+                position: { x, y },
+                text,
+                // 保存当前样式到标注
+                style: this.getCurrentStyle(),
+                width: Math.max(metrics.width, 60),
+                height: textHeight,
+            };
+            this.textAnnotations.push(textAnnotation);
+            const index = this.textAnnotations.length - 1;
+            // 添加新标注后清空删除历史
+            this.deleteHistory = [];
+            // 直接进入编辑模式
+            this.startEditing(index);
+            return index;
+        }
+        /**
+         * 更新文本标注内容
+         */
+        updateTextAnnotation(index, text) {
+            if (index < 0 || index >= this.textAnnotations.length)
+                return false;
+            const textAnnotation = this.textAnnotations[index];
+            textAnnotation.text = text;
+            // 更新文本尺寸
+            this.ctx.font = this.textStyle.font;
+            const metrics = this.ctx.measureText(text);
+            textAnnotation.width = metrics.width;
+            textAnnotation.height = parseInt(this.textStyle.font) * 1.2;
+            return true;
+        }
+        /**
+         * 移动文本标注位置
+         */
+        moveTextAnnotation(index, x, y) {
+            if (index < 0 || index >= this.textAnnotations.length)
+                return false;
+            this.textAnnotations[index].position = { x, y };
+            return true;
+        }
+        /**
+         * 删除文本标注
+         */
+        removeTextAnnotation(index) {
+            if (index < 0 || index >= this.textAnnotations.length)
+                return false;
+            const annotation = this.textAnnotations[index];
+            // 保存删除的记录到历史（用于撤销）
+            this.deleteHistory.push({
+                annotation: Object.assign({}, annotation),
+                index
+            });
+            this.textAnnotations.splice(index, 1);
+            // 如果正在编辑该标注，取消编辑
+            if (this.editingTextIndex === index) {
+                this.cancelEditing();
+            }
+            else if (this.editingTextIndex !== null && this.editingTextIndex > index) {
+                // 调整编辑索引
+                this.editingTextIndex--;
+            }
+            return true;
+        }
+        /**
+         * 清除所有文本标注
+         */
+        clearTextAnnotations() {
+            this.textAnnotations = [];
+            this.selectedTextIndex = null;
+            this.cancelEditing();
+            // 清空删除历史
+            this.deleteHistory = [];
+        }
+        /**
+         * 开始编辑文本标注
+         */
+        startEditing(index) {
+            if (!this.textInput || index < 0 || index >= this.textAnnotations.length) {
+                return false;
+            }
+            const textData = this.textAnnotations[index];
+            this.editingTextIndex = index;
+            this.currentEditingIndex = index;
+            this.textBeforeEditing = textData.text;
+            // 计算画布位置
+            const canvasX = this.viewport.offset.x + textData.position.x * this.viewport.scale;
+            const canvasY = this.viewport.offset.y + textData.position.y * this.viewport.scale;
+            // 定位输入框
+            this.textInput.value = textData.text;
+            this.textInput.style.left = `${canvasX - this.textStyle.padding}px`;
+            this.textInput.style.top = `${canvasY - this.textStyle.padding}px`;
+            this.textInput.style.display = "block";
+            // 调整输入框宽度
+            this.adjustInputWidth();
+            // 延迟聚焦
+            setTimeout(() => {
+                if (this.textInput) {
+                    this.textInput.focus();
+                    this.textInput.select();
+                }
+            }, 10);
+            return true;
+        }
+        /**
+         * 完成编辑
+         */
+        finishEditing() {
+            if (!this.textInput)
+                return false;
+            const index = this.currentEditingIndex;
+            const newText = this.textInput.value.trim();
+            if (index === null || index < 0 || index >= this.textAnnotations.length) {
+                this.resetEditingState();
+                return false;
+            }
+            if (newText === "") {
+                // 如果文本为空，删除该标注
+                this.textAnnotations.splice(index, 1);
+            }
+            else {
+                const textData = this.textAnnotations[index];
+                textData.text = newText;
+                // 更新文本尺寸
+                this.ctx.font = this.textStyle.font;
+                const metrics = this.ctx.measureText(textData.text);
+                textData.width = metrics.width;
+                textData.height = parseInt(this.textStyle.font) * 1.2;
+            }
+            this.resetEditingState();
+            return true;
+        }
+        /**
+         * 取消编辑
+         */
+        cancelEditing() {
+            if (!this.textInput || this.editingTextIndex === null)
+                return false;
+            // 恢复原文本
+            this.textInput.value = this.textBeforeEditing;
+            // 如果原文本为空且这是新创建的标注，删除它
+            const index = this.editingTextIndex;
+            if (index >= 0 && index < this.textAnnotations.length) {
+                const textData = this.textAnnotations[index];
+                if (textData.text === "" && this.textBeforeEditing === "") {
+                    this.textAnnotations.splice(index, 1);
+                }
+            }
+            this.resetEditingState();
+            return true;
+        }
+        /**
+         * 删除正在编辑的文本标注
+         */
+        deleteEditingAnnotation() {
+            if (this.editingTextIndex === null)
+                return false;
+            const index = this.editingTextIndex;
+            // 隐藏输入框
+            if (this.textInput) {
+                this.textInput.style.display = "none";
+            }
+            // 删除标注
+            if (index >= 0 && index < this.textAnnotations.length) {
+                this.textAnnotations.splice(index, 1);
+            }
+            this.resetEditingState();
+            return true;
+        }
+        /**
+         * 重置编辑状态
+         */
+        resetEditingState() {
+            if (this.textInput) {
+                this.textInput.style.display = "none";
+            }
+            this.editingTextIndex = null;
+            this.currentEditingIndex = null;
+            this.textBeforeEditing = "";
+        }
+        /**
+         * 调整输入框宽度
+         */
+        adjustInputWidth() {
+            if (!this.textInput || this.editingTextIndex === null)
+                return;
+            this.ctx.font = this.textStyle.font;
+            const text = this.textInput.value || this.textInput.placeholder || "";
+            const metrics = this.ctx.measureText(text);
+            const textWidth = metrics.width;
+            const minWidth = 60;
+            const maxWidth = 200;
+            const newWidth = Math.min(Math.max(textWidth + 24, minWidth), maxWidth);
+            this.textInput.style.width = `${newWidth}px`;
+        }
+        /**
+         * 开始移动文本标注
+         */
+        startMoving(e, index) {
+            if (index < 0 || index >= this.textAnnotations.length)
+                return false;
+            this.editingTextIndex = index;
+            this.isTextMoving = true;
+            this.textMoveStart = { x: e.clientX, y: e.clientY };
+            return true;
+        }
+        /**
+         * 移动文本标注
+         */
+        moveAnnotation(e) {
+            if (!this.isTextMoving || this.editingTextIndex === null)
+                return false;
+            const dx = e.clientX - this.textMoveStart.x;
+            const dy = e.clientY - this.textMoveStart.y;
+            const textData = this.textAnnotations[this.editingTextIndex];
+            if (textData) {
+                textData.position.x += dx / this.viewport.scale;
+                textData.position.y += dy / this.viewport.scale;
+                this.textMoveStart = { x: e.clientX, y: e.clientY };
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 完成移动
+         */
+        finishMoving() {
+            this.isTextMoving = false;
+        }
+        /**
+         * 检查是否点击了文本标注
+         */
+        checkTextClick(offsetX, offsetY) {
+            // 从后往前遍历，优先选中上层的文本
+            for (let i = this.textAnnotations.length - 1; i >= 0; i--) {
+                const textData = this.textAnnotations[i];
+                const canvasX = this.viewport.offset.x + textData.position.x * this.viewport.scale;
+                const canvasY = this.viewport.offset.y + textData.position.y * this.viewport.scale;
+                if (offsetX >= canvasX - this.textStyle.padding &&
+                    offsetX <= canvasX + textData.width + this.textStyle.padding &&
+                    offsetY >= canvasY - this.textStyle.padding &&
+                    offsetY <= canvasY + textData.height + this.textStyle.padding) {
+                    return i;
+                }
+            }
+            return null;
+        }
+        /**
+         * 检查是否点击了文本标注（用于移动）
+         */
+        checkTextClickForMove(e) {
+            const index = this.checkTextClick(e.offsetX, e.offsetY);
+            if (index !== null) {
+                this.startMoving(e, index);
+                return { index, handled: true };
+            }
+            return { index: -1, handled: false };
+        }
+        /**
+         * 获取所有文本标注
+         */
+        getTextAnnotations() {
+            return [...this.textAnnotations];
+        }
+        /**
+         * 撤销文本标注
+         */
+        withdraw() {
+            // 优先恢复删除的文本标注
+            if (this.deleteHistory.length > 0) {
+                const { annotation, index } = this.deleteHistory.pop();
+                // 在原来的位置插入
+                this.textAnnotations.splice(index, 0, annotation);
+                return true;
+            }
+            // 否则删除最后一个文本标注
+            if (this.textAnnotations.length > 0) {
+                this.textAnnotations.pop();
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 选中文本标注
+         */
+        selectTextAnnotation(index) {
+            if (index < 0 || index >= this.textAnnotations.length) {
+                this.deselectTextAnnotation();
+                return false;
+            }
+            this.selectedTextIndex = index;
+            // 取消编辑状态
+            if (this.editingTextIndex !== null) {
+                this.finishEditing();
+            }
+            return true;
+        }
+        /**
+         * 取消选中文本标注
+         */
+        deselectTextAnnotation() {
+            this.selectedTextIndex = null;
+        }
+        /**
+         * 删除选中的文本标注
+         */
+        deleteSelectedTextAnnotation() {
+            if (this.selectedTextIndex === null)
+                return false;
+            const index = this.selectedTextIndex;
+            const annotation = this.textAnnotations[index];
+            // 保存删除的记录到历史（用于撤销）
+            this.deleteHistory.push({
+                annotation: Object.assign({}, annotation),
+                index
+            });
+            this.textAnnotations.splice(index, 1);
+            this.selectedTextIndex = null;
+            // 调整编辑索引
+            if (this.editingTextIndex !== null && this.editingTextIndex > index) {
+                this.editingTextIndex--;
+            }
+            return true;
+        }
+        /**
+         * 获取选中的文本标注信息
+         */
+        getSelectedTextAnnotation() {
+            if (this.selectedTextIndex === null)
+                return null;
+            const annotation = this.textAnnotations[this.selectedTextIndex];
+            if (!annotation)
+                return null;
+            return {
+                index: this.selectedTextIndex,
+                data: annotation
+            };
+        }
+        /**
+         * 销毁（清理 DOM）
+         */
+        destroy() {
+            if (this.textInput && this.textInput.parentNode) {
+                this.textInput.parentNode.removeChild(this.textInput);
+            }
+        }
+    }
+
+    /**
+     * 渲染模块
+     * 负责所有绘制操作，包括背景图片、标注、选中高亮、文本标注等
+     */
+    class Renderer {
+        constructor(ctx, viewport, annotationManager, textManager, canvas) {
+            this.ctx = ctx;
+            this.viewport = viewport;
+            this.annotationManager = annotationManager;
+            this.textManager = textManager;
+            this.canvas = canvas;
+        }
+        /**
+         * 主渲染方法
+         */
+        render(bgImage) {
+            // 清除画布
+            this.ctx.clearRect(0, 0, this.viewport.width, this.viewport.height);
+            // 绘制背景图片
+            if (bgImage) {
+                this.drawBackgroundImage(bgImage);
+            }
+            // 绘制标注
+            this.drawAnnotations();
+            // 绘制文本标注
+            this.drawTextAnnotations();
+        }
+        /**
+         * 绘制背景图片
+         */
+        drawBackgroundImage(bgImage) {
+            this.ctx.drawImage(bgImage, this.viewport.offset.x, this.viewport.offset.y, this.viewport.originalWidth * this.viewport.scale, this.viewport.originalHeight * this.viewport.scale);
+        }
+        /**
+         * 绘制标注（矩形、多边形）
+         */
+        drawAnnotations() {
+            // 绘制已完成标注 - 每个标注始终使用自己的样式
+            this.annotationManager.recordList.forEach((item, index) => {
+                var _a;
+                // 获取标注保存的样式
+                const style = this.annotationManager.getAnnotationStyle(item);
+                // 始终使用标注自己的样式（选中也不改变样式）
+                this.ctx.strokeStyle = style.strokeColor;
+                this.ctx.lineWidth = style.lineWidth;
+                this.setLineDash(style.lineStyle || 'solid');
+                this.ctx.fillStyle = this.ctx.strokeStyle;
+                const isSelected = ((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.index) === index;
+                if (item.type === "rect") {
+                    this.drawRect(item.data[0], isSelected);
+                }
+                else if (item.type === "polygon") {
+                    // 使用标注保存的顶点样式
+                    const vertexStyle = style.vertexStyle || this.annotationManager.getVertexStyle();
+                    this.drawPolygon(item.data, item.status === "fullfilled", vertexStyle);
+                }
+            });
+            // 绘制当前操作（正在绘制的标注）- 使用当前设置的新样式
+            if (this.annotationManager.operate.data.length > 0) {
+                this.ctx.strokeStyle = this.annotationManager.strokeStyle;
+                this.ctx.lineWidth = this.annotationManager.lineWidth;
+                this.ctx.fillStyle = this.ctx.strokeStyle;
+                this.setLineDash(this.annotationManager.lineStyle);
+                if (this.annotationManager.operate.type === "rect") {
+                    this.drawRect(this.annotationManager.operate.data[0], false);
+                }
+                else if (this.annotationManager.operate.type === "polygon") {
+                    this.drawCurrentPolygon();
+                }
+            }
+            // 重置虚线设置
+            this.ctx.setLineDash([]);
+            // 绘制选中高亮
+            this.drawSelectionHighlight();
+        }
+        /**
+         * 设置边线虚线样式
+         */
+        setLineDash(style) {
+            switch (style) {
+                case 'dashed':
+                    this.ctx.setLineDash([10, 5]);
+                    break;
+                case 'dotted':
+                    this.ctx.setLineDash([2, 4]);
+                    break;
+                case 'solid':
+                default:
+                    this.ctx.setLineDash([]);
+                    break;
+            }
+        }
+        /**
+         * 绘制矩形
+         * @param rect - 矩形数据
+         * @param isSelected - 是否被选中（用于顶点颜色）
+         */
+        drawRect(rect, _isSelected = false) {
+            this.ctx.strokeRect(this.viewport.offset.x + rect.start.x * this.viewport.scale, this.viewport.offset.y + rect.start.y * this.viewport.scale, rect.width * this.viewport.scale, rect.height * this.viewport.scale);
+        }
+        /**
+         * 绘制多边形
+         * @param polygon - 多边形顶点数据
+         * @param closed - 是否闭合
+         * @param vertexStyle - 顶点样式
+         */
+        drawPolygon(polygon, closed, vertexStyle) {
+            if (polygon.length === 0)
+                return;
+            this.ctx.beginPath();
+            polygon.forEach((point, index) => {
+                const x = this.viewport.offset.x + point.point.x * this.viewport.scale;
+                const y = this.viewport.offset.y + point.point.y * this.viewport.scale;
+                if (index === 0) {
+                    this.ctx.moveTo(x, y);
+                }
+                else {
+                    this.ctx.lineTo(x, y);
+                }
+            });
+            if (closed && polygon.length > 1) {
+                const first = polygon[0];
+                this.ctx.lineTo(this.viewport.offset.x + first.point.x * this.viewport.scale, this.viewport.offset.y + first.point.y * this.viewport.scale);
+            }
+            this.ctx.stroke();
+            // 绘制顶点标记
+            this.drawPolygonVertices(polygon, vertexStyle);
+        }
+        /**
+         * 绘制多边形顶点标记
+         * @param polygon - 多边形顶点数据
+         * @param vertexStyle - 顶点样式
+         */
+        drawPolygonVertices(polygon, vertexStyle) {
+            // 使用传入的样式或当前全局样式
+            const style = vertexStyle || this.annotationManager.getVertexStyle();
+            const size = style.size / 2;
+            polygon.forEach((point) => {
+                const x = this.viewport.offset.x + point.point.x * this.viewport.scale;
+                const y = this.viewport.offset.y + point.point.y * this.viewport.scale;
+                this.ctx.fillStyle = style.fillColor;
+                this.ctx.strokeStyle = style.strokeColor;
+                this.ctx.lineWidth = style.strokeWidth;
+                this.ctx.beginPath();
+                switch (style.shape) {
+                    case 'square':
+                        this.ctx.rect(x - size, y - size, size * 2, size * 2);
+                        break;
+                    case 'diamond':
+                        this.ctx.moveTo(x, y - size);
+                        this.ctx.lineTo(x + size, y);
+                        this.ctx.lineTo(x, y + size);
+                        this.ctx.lineTo(x - size, y);
+                        this.ctx.closePath();
+                        break;
+                    case 'circle':
+                    default:
+                        this.ctx.arc(x, y, size, 0, Math.PI * 2);
+                        break;
+                }
+                this.ctx.fill();
+                if (style.strokeWidth > 0) {
+                    this.ctx.stroke();
+                }
+            });
+        }
+        /**
+         * 绘制当前正在绘制的多边形
+         */
+        drawCurrentPolygon() {
+            const data = this.annotationManager.operate.data;
+            const tempPoint = this.annotationManager.tempPolygonPoint;
+            this.ctx.beginPath();
+            data.forEach((point, index) => {
+                const x = this.viewport.offset.x + point.point.x * this.viewport.scale;
+                const y = this.viewport.offset.y + point.point.y * this.viewport.scale;
+                if (index === 0) {
+                    this.ctx.moveTo(x, y);
+                }
+                else {
+                    this.ctx.lineTo(x, y);
+                }
+            });
+            // 绘制到临时点
+            if (tempPoint) {
+                const x = this.viewport.offset.x + tempPoint.x * this.viewport.scale;
+                const y = this.viewport.offset.y + tempPoint.y * this.viewport.scale;
+                this.ctx.lineTo(x, y);
+            }
+            this.ctx.stroke();
+            // 绘制顶点标记 - 使用当前设置的顶点样式
+            this.drawPolygonVertices(data, this.annotationManager.getVertexStyle());
+            // 绘制临时点标记
+            if (tempPoint) {
+                const vertexStyle = this.annotationManager.getVertexStyle();
+                const x = this.viewport.offset.x + tempPoint.x * this.viewport.scale;
+                const y = this.viewport.offset.y + tempPoint.y * this.viewport.scale;
+                const size = vertexStyle.size / 2;
+                this.ctx.fillStyle = vertexStyle.fillColor;
+                this.ctx.strokeStyle = vertexStyle.strokeColor;
+                this.ctx.lineWidth = vertexStyle.strokeWidth;
+                this.ctx.beginPath();
+                switch (vertexStyle.shape) {
+                    case 'square':
+                        this.ctx.rect(x - size, y - size, size * 2, size * 2);
+                        break;
+                    case 'diamond':
+                        this.ctx.moveTo(x, y - size);
+                        this.ctx.lineTo(x + size, y);
+                        this.ctx.lineTo(x, y + size);
+                        this.ctx.lineTo(x - size, y);
+                        this.ctx.closePath();
+                        break;
+                    case 'circle':
+                    default:
+                        this.ctx.arc(x, y, size, 0, Math.PI * 2);
+                        break;
+                }
+                this.ctx.fill();
+                if (vertexStyle.strokeWidth > 0) {
+                    this.ctx.stroke();
+                }
+            }
+        }
+        /**
+         * 绘制选中状态的标注高亮
+         */
+        drawSelectionHighlight() {
+            const selected = this.annotationManager.selectedAnnotation;
+            if (!selected)
+                return;
+            const annotation = this.annotationManager.recordList[selected.index];
+            if (!annotation)
+                return;
+            const style = this.annotationManager.selectionStyle;
+            this.ctx.save();
+            if (annotation.type === "rect") {
+                this.drawRectSelectionHighlight(annotation.data[0], style);
+            }
+            else if (annotation.type === "polygon") {
+                this.drawPolygonSelectionHighlight(annotation.data, style);
+            }
+            this.ctx.restore();
+        }
+        /**
+         * 绘制矩形选中高亮
+         */
+        drawRectSelectionHighlight(rect, style) {
+            const x = this.viewport.offset.x + rect.start.x * this.viewport.scale;
+            const y = this.viewport.offset.y + rect.start.y * this.viewport.scale;
+            const w = rect.width * this.viewport.scale;
+            const h = rect.height * this.viewport.scale;
+            // 绘制半透明填充
+            this.ctx.fillStyle = style.fillColor;
+            this.ctx.fillRect(x, y, w, h);
+            // 绘制选中边框
+            this.ctx.strokeStyle = style.strokeColor;
+            this.ctx.lineWidth = 2;
+            this.ctx.setLineDash([5, 5]);
+            this.ctx.strokeRect(x, y, w, h);
+            // 绘制四个角的控制点
+            const handleSize = style.handleSize;
+            this.ctx.fillStyle = style.handleColor;
+            this.ctx.setLineDash([]);
+            // 左上
+            this.ctx.fillRect(x - handleSize / 2, y - handleSize / 2, handleSize, handleSize);
+            // 右上
+            this.ctx.fillRect(x + w - handleSize / 2, y - handleSize / 2, handleSize, handleSize);
+            // 左下
+            this.ctx.fillRect(x - handleSize / 2, y + h - handleSize / 2, handleSize, handleSize);
+            // 右下
+            this.ctx.fillRect(x + w - handleSize / 2, y + h - handleSize / 2, handleSize, handleSize);
+        }
+        /**
+         * 绘制多边形选中高亮
+         */
+        drawPolygonSelectionHighlight(polygon, style) {
+            // 绘制半透明填充
+            this.ctx.beginPath();
+            polygon.forEach((p, i) => {
+                const x = this.viewport.offset.x + p.point.x * this.viewport.scale;
+                const y = this.viewport.offset.y + p.point.y * this.viewport.scale;
+                if (i === 0) {
+                    this.ctx.moveTo(x, y);
+                }
+                else {
+                    this.ctx.lineTo(x, y);
+                }
+            });
+            this.ctx.closePath();
+            this.ctx.fillStyle = style.fillColor;
+            this.ctx.fill();
+            // 绘制选中边框
+            this.ctx.strokeStyle = style.strokeColor;
+            this.ctx.lineWidth = 2;
+            this.ctx.setLineDash([5, 5]);
+            this.ctx.stroke();
+            // 绘制顶点控制点
+            const handleSize = style.handleSize;
+            this.ctx.fillStyle = style.handleColor;
+            this.ctx.setLineDash([]);
+            polygon.forEach((p) => {
+                const x = this.viewport.offset.x + p.point.x * this.viewport.scale;
+                const y = this.viewport.offset.y + p.point.y * this.viewport.scale;
+                this.ctx.fillRect(x - handleSize / 2, y - handleSize / 2, handleSize, handleSize);
+            });
+        }
+        /**
+         * 绘制文本标注
+         */
+        drawTextAnnotations() {
+            const globalStyle = this.textManager.textStyle;
+            this.textManager.textAnnotations.forEach((textData, index) => {
+                const isEditing = this.textManager.editingTextIndex === index;
+                // 如果正在编辑（输入框显示中），不在 canvas 上绘制文本
+                if (isEditing && this.textManager.textInput && this.textManager.textInput.style.display !== "none") {
+                    return;
+                }
+                // 空文本不绘制
+                if (!textData.text)
+                    return;
+                // 获取文本标注的样式（如果有保存的样式则使用，否则使用当前全局样式）
+                const textStyle = textData.style || {
+                    font: globalStyle.font,
+                    color: globalStyle.color,
+                    backgroundColor: globalStyle.backgroundColor
+                };
+                const canvasX = this.viewport.offset.x + textData.position.x * this.viewport.scale;
+                // canvasY 是文本基线位置（fillText 的 y 参数）
+                const canvasY = this.viewport.offset.y + textData.position.y * this.viewport.scale;
+                // 检查是否被选中
+                const isSelected = this.textManager.selectedTextIndex === index;
+                // 设置字体以获取准确的文本度量
+                this.ctx.font = textStyle.font;
+                const textMetrics = this.ctx.measureText(textData.text);
+                // 计算文本实际高度（ascent + descent）
+                const ascent = textMetrics.actualBoundingBoxAscent || textData.height * 0.8;
+                const descent = textMetrics.actualBoundingBoxDescent || textData.height * 0.2;
+                const actualTextHeight = ascent + descent;
+                // 计算背景框尺寸
+                const r = globalStyle.borderRadius;
+                const bgX = canvasX - globalStyle.padding;
+                const boxWidth = textData.width + globalStyle.padding * 2;
+                const boxHeight = actualTextHeight + globalStyle.padding * 2;
+                // 背景框的 Y 位置：
+                // canvasY 是基线位置，背景框顶部应该在基线位置上方 ascent + padding 处
+                const bgY = canvasY - ascent - globalStyle.padding;
+                // 绘制背景（带圆角）
+                this.ctx.fillStyle = textStyle.backgroundColor;
+                this.ctx.beginPath();
+                this.ctx.roundRect(bgX, bgY, boxWidth, boxHeight, r);
+                this.ctx.fill();
+                // 如果选中，绘制选中边框
+                if (isSelected) {
+                    this.ctx.strokeStyle = globalStyle.selectedBorderColor;
+                    this.ctx.lineWidth = 2;
+                    this.ctx.setLineDash([5, 5]);
+                    this.ctx.beginPath();
+                    this.ctx.roundRect(bgX, bgY, boxWidth, boxHeight, r);
+                    this.ctx.stroke();
+                    this.ctx.setLineDash([]);
+                }
+                // 绘制文本（在基线位置）
+                this.ctx.fillStyle = textStyle.color;
+                this.ctx.fillText(textData.text, canvasX, canvasY);
+            });
+        }
+        /**
+         * 导出时绘制所有内容到指定上下文
+         */
+        drawForExport(ctx, bgImage, originalWidth, originalHeight) {
+            // 绘制背景图片
+            ctx.drawImage(bgImage, 0, 0, originalWidth, originalHeight);
+            // 绘制标注 - 每个标注使用自己保存的样式
+            this.annotationManager.recordList.forEach((item) => {
+                // 获取标注保存的样式
+                const style = this.annotationManager.getAnnotationStyle(item);
+                ctx.strokeStyle = style.strokeColor;
+                ctx.lineWidth = style.lineWidth;
+                if (item.type === "rect") {
+                    const rect = item.data[0];
+                    ctx.strokeRect(rect.start.x, rect.start.y, rect.width, rect.height);
+                }
+                else if (item.type === "polygon" && item.status === "fullfilled") {
+                    ctx.beginPath();
+                    item.data.forEach((point, index) => {
+                        if (index === 0) {
+                            ctx.moveTo(point.point.x, point.point.y);
+                        }
+                        else {
+                            ctx.lineTo(point.point.x, point.point.y);
+                        }
+                    });
+                    const first = item.data[0];
+                    ctx.lineTo(first.point.x, first.point.y);
+                    ctx.stroke();
+                    item.data.forEach((point) => {
+                        ctx.beginPath();
+                        ctx.arc(point.point.x, point.point.y, 4, 0, Math.PI * 2);
+                        ctx.fillStyle = style.strokeColor;
+                        ctx.fill();
+                    });
+                }
+            });
+            // 绘制文本标注 - 每个文本使用自己保存的样式
+            this.textManager.textAnnotations.forEach((textData) => {
+                const globalStyle = this.textManager.textStyle;
+                // 获取文本标注的样式（如果有保存的样式则使用，否则使用当前全局样式）
+                const textStyle = textData.style || {
+                    font: globalStyle.font,
+                    color: globalStyle.color,
+                    backgroundColor: globalStyle.backgroundColor
+                };
+                ctx.font = textStyle.font;
+                // 测量文本以获取准确的高度信息
+                const textMetrics = ctx.measureText(textData.text);
+                const ascent = textMetrics.actualBoundingBoxAscent || textData.height * 0.8;
+                const descent = textMetrics.actualBoundingBoxDescent || textData.height * 0.2;
+                const actualTextHeight = ascent + descent;
+                // 计算背景框尺寸和位置
+                const bgX = textData.position.x - globalStyle.padding;
+                const bgWidth = textData.width + globalStyle.padding * 2;
+                const bgHeight = actualTextHeight + globalStyle.padding * 2;
+                // 背景框顶部位置 = 基线位置 - 上行高度 - 内边距
+                const bgY = textData.position.y - ascent - globalStyle.padding;
+                const r = globalStyle.borderRadius;
+                // 绘制背景
+                ctx.fillStyle = textStyle.backgroundColor;
+                if (ctx.roundRect) {
+                    ctx.roundRect(bgX, bgY, bgWidth, bgHeight, r);
+                    ctx.fill();
+                }
+                else {
+                    ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
+                }
+                // 绘制文本（在基线位置）
+                ctx.fillStyle = textStyle.color;
+                ctx.fillText(textData.text, textData.position.x, textData.position.y);
+            });
+        }
+    }
+
+    /**
+     * 事件处理模块
+     * 负责所有用户交互事件的处理
+     */
+    // getZoomDelta is imported in index.ts
+    class EventHandler {
+        constructor(canvas, viewport, annotationManager, textManager, renderer, getDrawType, getBgImage, renderCallback, setDrawTypeCallback) {
+            this.canvas = canvas;
+            this.viewport = viewport;
+            this.annotationManager = annotationManager;
+            this.textManager = textManager;
+            this.renderer = renderer;
+            this.getDrawType = getDrawType;
+            this.getBgImage = getBgImage;
+            this.renderCallback = renderCallback;
+            this.setDrawTypeCallback = setDrawTypeCallback;
+            // 拖拽状态
+            this.isDragging = false;
+            this.dragStart = { x: 0, y: 0 };
+            // 防止移动/调整大小后触发 click 绘制
+            this.justFinishedMove = false;
+            // 防止取消选中后触发 click 绘制
+            this.justDeselected = false;
+        }
+        /**
+         * 处理滚轮缩放
+         */
+        handleWheel(e) {
+            e.preventDefault();
+            if (!this.getBgImage())
+                return;
+            const delta = e.deltaY > 0 ? -0.02 : 0.02;
+            const oldScale = this.viewport.scale;
+            const newScale = Math.max(this.viewport.minScale, Math.min(oldScale + delta, this.viewport.maxScale));
+            // 计算缩放中心（鼠标位置）
+            const rect = this.canvas.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            // 计算缩放前鼠标点在图像中的位置
+            const imgX = (mouseX - this.viewport.offset.x) / oldScale;
+            const imgY = (mouseY - this.viewport.offset.y) / oldScale;
+            // 更新缩放比例
+            this.viewport.scale = newScale;
+            // 计算缩放后鼠标点应该的位置
+            const newMouseX = imgX * newScale + this.viewport.offset.x;
+            const newMouseY = imgY * newScale + this.viewport.offset.y;
+            // 调整偏移量以保持鼠标点不变
+            this.viewport.offset.x += mouseX - newMouseX;
+            this.viewport.offset.y += mouseY - newMouseY;
+            // 更新边界约束
+            this.viewport.calculateBoundaries();
+            this.viewport.constrainViewport();
+            // 缩放后不再是初始状态
+            this.viewport.isInitialScale = this.viewport.scale === this.viewport.initialScale;
+            this.renderCallback();
+        }
+        /**
+         * 处理鼠标按下
+         */
+        handleMouseDown(e) {
+            var _a, _b;
+            if (e.button !== 0)
+                return; // 只处理左键
+            const drawType = this.getDrawType();
+            const bgImage = this.getBgImage();
+            // 优先处理：如果有选中的标注，检查是否点击了控制点
+            if (this.annotationManager.selectedAnnotation && bgImage) {
+                const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle) {
+                    this.annotationManager.startResizing(handle, imgCoords);
+                    this.renderCallback();
+                    return;
+                }
+            }
+            // 文本标注模式
+            if (drawType === "text") {
+                // 先检查是否点击了已有文本（只选中，不直接移动）
+                const textIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+                if (textIndex !== null) {
+                    // 如果点击的是已选中的文本，开始移动
+                    if (this.textManager.selectedTextIndex === textIndex) {
+                        this.textManager.startMoving(e, textIndex);
+                    }
+                    else {
+                        // 否则选中文本（取消其他选中）
+                        this.annotationManager.deselectAnnotation();
+                        this.textManager.selectTextAnnotation(textIndex);
+                    }
+                    this.renderCallback();
+                    return;
+                }
+                // 文本模式下也可以选中其他标注
+                if (bgImage) {
+                    const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+                    // 检查矩形
+                    const rectClicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                    if ((rectClicked === null || rectClicked === void 0 ? void 0 : rectClicked.type) === "rect") {
+                        this.annotationManager.selectAnnotation(rectClicked.index);
+                        this.annotationManager.startMovingAnnotation(e);
+                        this.renderCallback();
+                        return;
+                    }
+                    // 检查多边形
+                    const polygonClicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                    if ((polygonClicked === null || polygonClicked === void 0 ? void 0 : polygonClicked.type) === "polygon") {
+                        this.annotationManager.selectAnnotation(polygonClicked.index);
+                        this.annotationManager.startMovingAnnotation(e);
+                        this.renderCallback();
+                        return;
+                    }
+                    // 如果点击了空白处且有选中的标注，取消选中
+                    if (this.annotationManager.selectedAnnotation) {
+                        this.annotationManager.deselectAnnotation();
+                        this.renderCallback();
+                        return;
+                    }
+                }
+                // 如果点击了空白处且有选中的文本标注，取消选中
+                if (this.textManager.selectedTextIndex !== null) {
+                    this.textManager.deselectTextAnnotation();
+                    this.renderCallback();
+                    return;
+                }
+                // 没有点击任何标注，创建新文本
+                this.handleTextModeClick(e);
+                return;
+            }
+            // 其他模式需要背景图片
+            if (!bgImage)
+                return;
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            if (drawType === "rect") {
+                // 矩形模式：优先检测是否点击了任何标注（可以选中并移动）
+                // 如果当前有选中的矩形，优先处理选中状态
+                if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "rect") {
+                    // 检查是否点击了控制点
+                    const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                    if (handle) {
+                        this.annotationManager.startResizing(handle, imgCoords);
+                        this.renderCallback();
+                        return;
+                    }
+                    // 检查是否点击到已有矩形（可能是另一个矩形）
+                    const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                    if (clicked && clicked.type === "rect") {
+                        this.annotationManager.selectAnnotation(clicked.index);
+                        this.annotationManager.startMovingAnnotation(e);
+                        this.renderCallback();
+                        return;
+                    }
+                    // 点击空白处，取消选中，不开始新矩形
+                    this.annotationManager.deselectAnnotation();
+                    this.justDeselected = true;
+                    this.renderCallback();
+                    return;
+                }
+                // 没有选中的矩形，可以选中其他类型标注或开始新矩形
+                // 1. 先检查文本（只选中，不直接移动）
+                const textIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+                if (textIndex !== null) {
+                    // 如果点击的是已选中的文本，开始移动
+                    if (this.textManager.selectedTextIndex === textIndex) {
+                        this.textManager.startMoving(e, textIndex);
+                    }
+                    else {
+                        // 否则选中文本（取消其他选中）
+                        this.annotationManager.deselectAnnotation();
+                        this.textManager.selectTextAnnotation(textIndex);
+                    }
+                    this.renderCallback();
+                    return;
+                }
+                // 2. 检查多边形
+                const polygonClicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                if ((polygonClicked === null || polygonClicked === void 0 ? void 0 : polygonClicked.type) === "polygon") {
+                    this.annotationManager.selectAnnotation(polygonClicked.index);
+                    this.annotationManager.startMovingAnnotation(e);
+                    this.renderCallback();
+                    return;
+                }
+                // 3. 检查矩形（选中它）
+                const rectClicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                if ((rectClicked === null || rectClicked === void 0 ? void 0 : rectClicked.type) === "rect") {
+                    this.annotationManager.selectAnnotation(rectClicked.index);
+                    this.annotationManager.startMovingAnnotation(e);
+                    this.renderCallback();
+                    return;
+                }
+                // 开始绘制新矩形
+                this.annotationManager.startRectDrawing(imgCoords);
+            }
+            else if (drawType === "polygon") {
+                // 多边形模式：优先检测是否点击了任何标注（可以选中并移动）
+                // 如果当前有选中的多边形，优先处理选中状态
+                if (((_b = this.annotationManager.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.type) === "polygon") {
+                    // 检查是否点击了顶点
+                    const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                    if (handle && handle.type === "polygon-vertex") {
+                        this.annotationManager.startResizing(handle, imgCoords);
+                        this.renderCallback();
+                        return;
+                    }
+                    // 检查是否点击到已有多边形（可能是另一个多边形）
+                    const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                    if (clicked && clicked.type === "polygon") {
+                        this.annotationManager.selectAnnotation(clicked.index);
+                        this.annotationManager.startMovingAnnotation(e);
+                        this.renderCallback();
+                        return;
+                    }
+                    // 点击空白处，取消选中，不开始新多边形
+                    this.annotationManager.deselectAnnotation();
+                    this.justDeselected = true;
+                    this.renderCallback();
+                    return;
+                }
+                // 没有选中的多边形，可以选中其他类型标注或开始新多边形
+                // 1. 先检查文本（只选中，不直接移动）
+                const textIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+                if (textIndex !== null) {
+                    // 如果点击的是已选中的文本，开始移动
+                    if (this.textManager.selectedTextIndex === textIndex) {
+                        this.textManager.startMoving(e, textIndex);
+                    }
+                    else {
+                        // 否则选中文本（取消其他选中）
+                        this.annotationManager.deselectAnnotation();
+                        this.textManager.selectTextAnnotation(textIndex);
+                    }
+                    this.renderCallback();
+                    return;
+                }
+                // 2. 检查矩形
+                const rectClicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                if ((rectClicked === null || rectClicked === void 0 ? void 0 : rectClicked.type) === "rect") {
+                    this.annotationManager.selectAnnotation(rectClicked.index);
+                    this.annotationManager.startMovingAnnotation(e);
+                    this.renderCallback();
+                    return;
+                }
+                // 3. 检查多边形（选中它）
+                const polyClicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                if ((polyClicked === null || polyClicked === void 0 ? void 0 : polyClicked.type) === "polygon") {
+                    this.annotationManager.selectAnnotation(polyClicked.index);
+                    this.annotationManager.startMovingAnnotation(e);
+                    this.renderCallback();
+                    return;
+                }
+                // 开始绘制新多边形
+                if (!this.annotationManager.isDrawing) {
+                    this.annotationManager.startPolygonDrawing(imgCoords);
+                }
+                else if (this.checkPolygonPointValid(imgCoords)) {
+                    this.annotationManager.addPolygonPoint(imgCoords);
+                }
+                this.annotationManager.updatePolygonTempPoint(imgCoords);
+                this.renderCallback();
+            }
+            else if (drawType === "drag") {
+                // 拖拽模式
+                if (this.annotationManager.selectedAnnotation) {
+                    const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                    if (handle) {
+                        this.annotationManager.startResizing(handle, imgCoords);
+                        this.renderCallback();
+                        return;
+                    }
+                }
+                // 检查文本（只选中，不直接移动）
+                const textIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+                if (textIndex !== null) {
+                    // 如果点击的是已选中的文本，开始移动
+                    if (this.textManager.selectedTextIndex === textIndex) {
+                        this.textManager.startMoving(e, textIndex);
+                    }
+                    else {
+                        // 否则选中文本（取消其他选中）
+                        this.annotationManager.deselectAnnotation();
+                        this.textManager.selectTextAnnotation(textIndex);
+                    }
+                    this.renderCallback();
+                    return;
+                }
+                // 检查矩形
+                const rectHandled = this.handleRectModeClick(e, imgCoords);
+                if (rectHandled)
+                    return;
+                // 检查多边形
+                const polygonHandled = this.handlePolygonModeClick(e, imgCoords);
+                if (polygonHandled)
+                    return;
+                // 开始拖拽视图
+                this.isDragging = true;
+                this.dragStart = { x: e.clientX, y: e.clientY };
+                this.canvas.style.cursor = "grabbing";
+            }
+            else if (drawType === "") {
+                // 无模式：可以选中和编辑所有类型的标注
+                this.handleNoModeClick(e, imgCoords);
+            }
+        }
+        /**
+         * 拖拽模式下检查文本点击
+         */
+        checkTextClickInDragMode(e) {
+            const result = this.textManager.checkTextClickForMove(e);
+            if (result.handled) {
+                this.canvas.style.cursor = "grabbing";
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 文本模式下的点击处理
+         */
+        handleTextModeClick(e) {
+            // 检测是否点击了已有文本
+            const clickedIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+            if (clickedIndex !== null) {
+                this.textManager.startMoving(e, clickedIndex);
+                this.canvas.style.cursor = "grabbing";
+                this.renderCallback();
+                return true;
+            }
+            // 没有点击文本，创建新文本
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            this.textManager.addTextAnnotation(imgCoords.x, imgCoords.y);
+            return true;
+        }
+        /**
+         * 矩形模式下的点击处理
+         */
+        handleRectModeClick(e, imgCoords) {
+            var _a, _b;
+            // 如果有选中的矩形，先检查是否点击了控制点
+            if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "rect") {
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle) {
+                    this.annotationManager.startResizing(handle, imgCoords);
+                    this.renderCallback();
+                    return true;
+                }
+            }
+            // 检测是否点击到已有矩形
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked && clicked.type === "rect") {
+                this.annotationManager.selectAnnotation(clicked.index);
+                this.annotationManager.startMovingAnnotation(e);
+                this.renderCallback();
+                return true;
+            }
+            // 如果当前有选中的矩形，点击空白处取消选中并返回true（表示已处理）
+            if (((_b = this.annotationManager.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.type) === "rect") {
+                this.annotationManager.deselectAnnotation();
+                this.renderCallback();
+                return true;
+            }
+            // 没有选中矩形且没有点击到矩形，返回false让调用方继续处理
+            return false;
+        }
+        /**
+         * 多边形模式下的点击处理
+         */
+        handlePolygonModeClick(e, imgCoords) {
+            var _a, _b;
+            // 如果有选中的多边形，先检查是否点击了顶点
+            if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "polygon") {
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle && handle.type === "polygon-vertex") {
+                    this.annotationManager.startResizing(handle, imgCoords);
+                    this.renderCallback();
+                    return true;
+                }
+            }
+            // 检测是否点击到已有多边形
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked && clicked.type === "polygon") {
+                this.annotationManager.selectAnnotation(clicked.index);
+                this.annotationManager.startMovingAnnotation(e);
+                this.renderCallback();
+                return true;
+            }
+            // 如果当前有选中的多边形，点击空白处取消选中并返回true（表示已处理）
+            if (((_b = this.annotationManager.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.type) === "polygon") {
+                this.annotationManager.deselectAnnotation();
+                this.renderCallback();
+                return true;
+            }
+            // 没有选中多边形且没有点击到多边形，返回false让调用方继续处理
+            return false;
+        }
+        /**
+         * 纯移动检测：检测是否点击了矩形
+         */
+        handleRectModeClickForMove(e, imgCoords) {
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked && clicked.type === "rect") {
+                this.annotationManager.selectAnnotation(clicked.index);
+                this.annotationManager.startMovingAnnotation(e);
+                this.renderCallback();
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 纯移动检测：检测是否点击了多边形
+         */
+        handlePolygonModeClickForMove(e, imgCoords) {
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked && clicked.type === "polygon") {
+                this.annotationManager.selectAnnotation(clicked.index);
+                this.annotationManager.startMovingAnnotation(e);
+                this.renderCallback();
+                return true;
+            }
+            return false;
+        }
+        /**
+         * 无模式下的点击处理
+         */
+        handleNoModeClick(e, imgCoords) {
+            // 先检查是否点击了文本
+            const textIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+            if (textIndex !== null) {
+                // 如果点击的是已选中的文本，开始移动
+                if (this.textManager.selectedTextIndex === textIndex) {
+                    this.textManager.startMoving(e, textIndex);
+                }
+                else {
+                    // 否则选中文本（取消其他选中）
+                    this.annotationManager.deselectAnnotation();
+                    this.textManager.selectTextAnnotation(textIndex);
+                }
+                this.renderCallback();
+                return;
+            }
+            // 取消文本选中
+            this.textManager.deselectTextAnnotation();
+            // 再检查是否点击了矩形/多边形
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked) {
+                this.annotationManager.selectAnnotation(clicked.index);
+                this.annotationManager.startMovingAnnotation(e);
+                this.renderCallback();
+            }
+            else {
+                this.annotationManager.deselectAnnotation();
+            }
+        }
+        /**
+         * 检查多边形点是否有效（避免重复点）
+         */
+        checkPolygonPointValid(imgCoords) {
+            const lastPoint = this.annotationManager.operate.data.length > 0
+                ? this.annotationManager.operate.data[this.annotationManager.operate.data.length - 1]
+                : null;
+            return (!lastPoint ||
+                Math.abs(lastPoint.point.x - imgCoords.x) > 5 ||
+                Math.abs(lastPoint.point.y - imgCoords.y) > 5);
+        }
+        /**
+         * 处理鼠标移动
+         */
+        handleMouseMove(e) {
+            if (!this.getBgImage())
+                return;
+            const drawType = this.getDrawType();
+            // 处理视图拖拽
+            if (this.isDragging && drawType === "drag") {
+                const dx = e.clientX - this.dragStart.x;
+                const dy = e.clientY - this.dragStart.y;
+                this.viewport.updateOffset(dx, dy);
+                this.dragStart = { x: e.clientX, y: e.clientY };
+                this.renderCallback();
+                return;
+            }
+            // 处理文本移动
+            if (this.textManager.isTextMoving && this.textManager.editingTextIndex !== null) {
+                if (this.textManager.moveAnnotation(e)) {
+                    this.renderCallback();
+                }
+                return;
+            }
+            // 处理标注移动或调整大小
+            if ((this.annotationManager.isMovingAnnotation || this.annotationManager.isResizing) &&
+                this.annotationManager.selectedAnnotation) {
+                this.handleAnnotationMove(e);
+                return;
+            }
+            // 更新光标样式
+            if (!this.annotationManager.isMovingAnnotation &&
+                !this.annotationManager.isResizing &&
+                !this.textManager.isTextMoving) {
+                this.updateCursor(e);
+            }
+            // 处理矩形绘制
+            if (this.annotationManager.isDrawing && this.annotationManager.operate.type === "rect") {
+                const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+                this.annotationManager.updateRectDrawing(imgCoords);
+                this.renderCallback();
+            }
+            // 处理多边形临时点
+            if (drawType === "polygon" && this.annotationManager.isDrawing) {
+                const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+                this.annotationManager.updatePolygonTempPoint(imgCoords);
+                this.renderCallback();
+            }
+        }
+        /**
+         * 处理标注移动或调整大小
+         */
+        handleAnnotationMove(e) {
+            var _a, _b;
+            // 处理调整大小
+            if (this.annotationManager.isResizing && this.annotationManager.activeHandle) {
+                const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+                if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "rect") {
+                    this.annotationManager.resizeRect(imgCoords);
+                }
+                else if (((_b = this.annotationManager.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.type) === "polygon") {
+                    this.annotationManager.resizePolygon(imgCoords);
+                }
+                this.renderCallback();
+                return;
+            }
+            // 处理移动
+            if (!this.annotationManager.isMovingAnnotation || !this.annotationManager.selectedAnnotation)
+                return;
+            const dx = (e.clientX - this.annotationManager.annotationMoveStart.x) / this.viewport.scale;
+            const dy = (e.clientY - this.annotationManager.annotationMoveStart.y) / this.viewport.scale;
+            this.annotationManager.moveSelectedAnnotation(dx, dy);
+            this.annotationManager.annotationMoveStart = { x: e.clientX, y: e.clientY };
+            this.renderCallback();
+        }
+        /**
+         * 更新鼠标光标样式
+         */
+        updateCursor(e) {
+            const drawType = this.getDrawType();
+            // 文本模式
+            if (drawType === "text") {
+                // 文本模式下也可以悬停其他标注
+                if (this.getBgImage()) {
+                    const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+                    // 检查控制点
+                    if (this.annotationManager.selectedAnnotation) {
+                        const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                        if (handle) {
+                            if (handle.type === "rect-corner") {
+                                this.canvas.style.cursor = handle.index === 0 || handle.index === 3 ? "nwse-resize" : "nesw-resize";
+                            }
+                            else {
+                                this.canvas.style.cursor = "crosshair";
+                            }
+                            return;
+                        }
+                    }
+                    // 检查矩形/多边形
+                    const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+                    if (clicked) {
+                        this.canvas.style.cursor = "move";
+                        return;
+                    }
+                }
+                // 检查文本
+                const clickedIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+                this.canvas.style.cursor = clickedIndex !== null ? "move" : "crosshair";
+                return;
+            }
+            // 矩形模式
+            if (drawType === "rect") {
+                this.updateRectModeCursor(e);
+                return;
+            }
+            // 多边形模式
+            if (drawType === "polygon") {
+                this.updatePolygonModeCursor(e);
+                return;
+            }
+            // 拖拽模式
+            if (drawType === "drag") {
+                this.updateDragModeCursor(e);
+                return;
+            }
+            // 无模式
+            if (drawType === "") {
+                this.updateNoModeCursor(e);
+                return;
+            }
+            this.canvas.style.cursor = "default";
+        }
+        /**
+         * 更新矩形模式光标
+         */
+        updateRectModeCursor(e) {
+            var _a;
+            // 先检查控制点
+            if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "rect") {
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle) {
+                    this.canvas.style.cursor = handle.index === 0 || handle.index === 3 ? "nwse-resize" : "nesw-resize";
+                    return;
+                }
+            }
+            // 检查是否在矩形上
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked) {
+                this.canvas.style.cursor = "move";
+                return;
+            }
+            // 检查文本
+            if (this.textManager.checkTextClick(e.offsetX, e.offsetY) !== null) {
+                this.canvas.style.cursor = "move";
+                return;
+            }
+            this.canvas.style.cursor = "crosshair";
+        }
+        /**
+         * 更新多边形模式光标
+         */
+        updatePolygonModeCursor(e) {
+            var _a;
+            // 先检查顶点
+            if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "polygon") {
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle) {
+                    this.canvas.style.cursor = "crosshair";
+                    return;
+                }
+            }
+            // 检查是否在多边形上
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            if (clicked) {
+                this.canvas.style.cursor = "move";
+                return;
+            }
+            // 检查文本
+            if (this.textManager.checkTextClick(e.offsetX, e.offsetY) !== null) {
+                this.canvas.style.cursor = "move";
+                return;
+            }
+            this.canvas.style.cursor = "crosshair";
+        }
+        /**
+         * 更新拖拽模式光标
+         */
+        updateDragModeCursor(e) {
+            // 检查控制点
+            if (this.annotationManager.selectedAnnotation) {
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle) {
+                    if (handle.type === "rect-corner") {
+                        this.canvas.style.cursor = handle.index === 0 || handle.index === 3 ? "nwse-resize" : "nesw-resize";
+                    }
+                    else {
+                        this.canvas.style.cursor = "crosshair";
+                    }
+                    return;
+                }
+            }
+            // 检查文本
+            if (this.textManager.checkTextClick(e.offsetX, e.offsetY) !== null) {
+                this.canvas.style.cursor = "move";
+                return;
+            }
+            // 检查矩形/多边形
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            this.canvas.style.cursor = clicked ? "move" : "grab";
+        }
+        /**
+         * 更新无模式光标
+         */
+        updateNoModeCursor(e) {
+            // 检查控制点
+            if (this.annotationManager.selectedAnnotation) {
+                const handle = this.annotationManager.getHandleAtPoint(e.offsetX, e.offsetY);
+                if (handle) {
+                    if (handle.type === "rect-corner") {
+                        this.canvas.style.cursor = handle.index === 0 || handle.index === 3 ? "nwse-resize" : "nesw-resize";
+                    }
+                    else {
+                        this.canvas.style.cursor = "crosshair";
+                    }
+                    return;
+                }
+            }
+            // 检查文本
+            if (this.textManager.checkTextClick(e.offsetX, e.offsetY) !== null) {
+                this.canvas.style.cursor = "move";
+                return;
+            }
+            // 检查矩形/多边形
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            const clicked = this.annotationManager.getAnnotationAtPoint(imgCoords);
+            this.canvas.style.cursor = clicked ? "move" : "default";
+        }
+        /**
+         * 处理鼠标释放
+         */
+        handleMouseUp(_e) {
+            if (this.isDragging) {
+                this.isDragging = false;
+                const drawType = this.getDrawType();
+                this.canvas.style.cursor = drawType === "drag" ? "grab" : "default";
+                return;
+            }
+            if (this.textManager.isTextMoving) {
+                this.justFinishedMove = true;
+                this.textManager.finishMoving();
+                const drawType = this.getDrawType();
+                if (drawType === "drag") {
+                    this.canvas.style.cursor = "grab";
+                }
+                else if (drawType === "") {
+                    this.canvas.style.cursor = "move";
+                }
+                else {
+                    this.textManager.editingTextIndex = null;
+                    this.canvas.style.cursor = "default";
+                }
+            }
+            // 结束标注移动或调整大小
+            if (this.annotationManager.isMovingAnnotation || this.annotationManager.isResizing) {
+                this.justFinishedMove = true;
+                this.annotationManager.finishMovingAnnotation();
+                this.canvas.style.cursor = this.annotationManager.selectedAnnotation ? "move" : "default";
+            }
+            // 完成矩形绘制
+            if (this.annotationManager.isDrawing && this.annotationManager.operate.type === "rect") {
+                this.annotationManager.finishRectDrawing();
+                this.renderCallback();
+            }
+        }
+        /**
+         * 处理鼠标离开
+         */
+        handleMouseLeave(e) {
+            if (this.isDragging || this.textManager.isTextMoving ||
+                this.annotationManager.isResizing || this.annotationManager.isMovingAnnotation) {
+                this.handleMouseUp(e);
+            }
+            // 不再自动取消选中状态
+        }
+        /**
+         * 处理鼠标双击
+         */
+        handleDoubleClick(e) {
+            if (!this.getBgImage())
+                return;
+            // 清除 justFinishedMove 标志
+            this.justFinishedMove = false;
+            // 优先检查是否双击了文本
+            const textIndex = this.textManager.checkTextClick(e.offsetX, e.offsetY);
+            if (textIndex !== null) {
+                this.textManager.startEditing(textIndex);
+                return;
+            }
+            // 多边形模式下双击结束绘制
+            const drawType = this.getDrawType();
+            if (drawType === "polygon") {
+                if (this.annotationManager.isDrawing && this.annotationManager.operate.data.length <= 2) {
+                    return;
+                }
+                this.annotationManager.finishPolygonDrawing();
+                this.renderCallback();
+            }
+        }
+        /**
+         * 处理鼠标单击（用于多边形绘制）
+         */
+        handleClick(e) {
+            var _a;
+            const drawType = this.getDrawType();
+            if (!this.getBgImage() || drawType !== "polygon" ||
+                this.isDragging || this.annotationManager.isMovingAnnotation ||
+                this.annotationManager.isResizing || this.textManager.isTextMoving) {
+                return;
+            }
+            // 如果刚刚取消了选中，跳过绘制
+            if (this.justDeselected) {
+                this.justDeselected = false;
+                return;
+            }
+            // 如果当前有选中的多边形，不开始新多边形
+            if (((_a = this.annotationManager.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === "polygon") {
+                return;
+            }
+            const imgCoords = this.viewport.toImageCoordinates(e.offsetX, e.offsetY);
+            if (this.checkPolygonPointValid(imgCoords)) {
+                if (!this.annotationManager.isDrawing) {
+                    this.annotationManager.startPolygonDrawing(imgCoords);
+                }
+                else {
+                    this.annotationManager.addPolygonPoint(imgCoords);
+                }
+            }
+            this.annotationManager.updatePolygonTempPoint(imgCoords);
+            this.renderCallback();
+        }
+        /**
+         * 处理键盘按下
+         */
+        handleKeyDown(e) {
+            // 撤销操作
+            if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
+                this.annotationManager.withdraw() || this.textManager.withdraw();
+                this.renderCallback();
+                return;
+            }
+            // 空格键重置视图
+            if (e.key === " ") {
+                this.viewport.resetToInitial();
+                this.renderCallback();
+                return;
+            }
+            // ESC键
+            if (e.key === "Escape") {
+                if (this.annotationManager.isDrawing) {
+                    this.annotationManager.cancelDrawing();
+                    this.renderCallback();
+                }
+                else if (this.annotationManager.selectedAnnotation) {
+                    this.annotationManager.deselectAnnotation();
+                    this.renderCallback();
+                }
+                return;
+            }
+            // Delete 键删除选中的标注
+            if (e.key === "Delete" || e.key === "Backspace") {
+                // 优先删除正在编辑的文本标注
+                if (this.textManager.editingTextIndex !== null) {
+                    this.textManager.removeTextAnnotation(this.textManager.editingTextIndex);
+                    this.renderCallback();
+                    return;
+                }
+                // 删除选中的文本标注（非编辑状态）
+                if (this.textManager.selectedTextIndex !== null) {
+                    this.textManager.deleteSelectedTextAnnotation();
+                    this.renderCallback();
+                    return;
+                }
+                // 删除选中的矩形/多边形标注
+                if (this.annotationManager.selectedAnnotation) {
+                    this.annotationManager.deleteSelectedAnnotation();
+                    this.renderCallback();
+                }
+            }
+        }
+    }
+
+    /**
+     * Image Annotation Drawer
+     * 一个轻量级的图片标注库，基于 HTML5 Canvas
+     *
+     * 功能特性：
+     * - 多种标注类型：矩形、多边形、文本标注
+     * - 视图操作：鼠标滚轮缩放、拖拽平移
+     * - 撤销功能：支持撤销上一步操作
+     * - 快捷键：空格键重置视图，ESC 取消当前绘制
+     * - 图片导出：支持导出标注后的图片
+     * - TypeScript 支持：完整的类型定义
+     */
+    // 导出工具函数
+    /**
+     * Drawer 类 - 图片标注库的主入口
+     *
+     * @example
+     * ```typescript
+     * const drawer = new Drawer({
+     *   id: 'container',
+     *   drawType: 'rect'
+     * });
+     * drawer.drawImage('image.jpg');
+     * ```
+     */
+    class Drawer {
+        constructor(options) {
+            // Canvas 相关
+            this.canvas = document.createElement("canvas");
+            // 图片相关
+            this.bgImage = null;
+            this.bgImageSrc = "";
+            this.bgImageExt = "jpeg";
+            // 绘制类型
+            this.drawType = "";
+            const { drawType, useEvents = true, id = "container", annotationColor, lineStyle, vertexStyle, textStyle } = options;
+            // 获取容器
+            const container = document.getElementById(id);
+            if (!container)
+                throw new Error(`Container with id "${id}" not found`);
+            this.container = container;
+            // 确保容器有相对定位
+            if (container.style.position !== "absolute" &&
+                container.style.position !== "fixed" &&
+                container.style.position !== "relative") {
+                container.style.position = "relative";
+            }
+            // 初始化 Canvas
+            this.ctx = this.canvas.getContext("2d");
+            // 初始化视口
+            this.viewport = new ViewportManager();
+            this.viewport.setSize(container.clientWidth, container.clientHeight);
+            // 设置 Canvas 尺寸
+            this.canvas.width = this.viewport.width;
+            this.canvas.height = this.viewport.height;
+            this.canvas.style.width = `${this.viewport.width}px`;
+            this.canvas.style.height = `${this.viewport.height}px`;
+            this.canvas.style.cursor = "default";
+            this.canvas.style.display = "block";
+            container.appendChild(this.canvas);
+            // 初始化功能模块
+            this.annotationManager = new AnnotationManager(this.viewport);
+            // 设置颜色配置
+            if (annotationColor) {
+                this.annotationManager.setColorConfig(annotationColor);
+            }
+            // 设置边线样式
+            if (lineStyle) {
+                this.annotationManager.setLineStyle(lineStyle);
+            }
+            // 设置顶点样式
+            if (vertexStyle) {
+                this.annotationManager.setVertexStyle(vertexStyle);
+            }
+            this.textManager = new TextAnnotationManager(this.viewport, this.container, this.ctx, () => this.render());
+            // 设置文本样式
+            if (textStyle) {
+                this.textManager.setTextStyle(textStyle);
+            }
+            this.renderer = new Renderer(this.ctx, this.viewport, this.annotationManager, this.textManager, this.canvas);
+            this.eventHandler = new EventHandler(this.canvas, this.viewport, this.annotationManager, this.textManager, this.renderer, () => this.drawType, () => this.bgImage, () => this.render(), (type) => this.setDrawType(type));
+            // 初始化事件处理器
+            this.events = {
+                wheel: (e) => this.eventHandler.handleWheel(e),
+                mousedown: (e) => this.eventHandler.handleMouseDown(e),
+                mousemove: (e) => this.eventHandler.handleMouseMove(e),
+                mouseup: (e) => this.eventHandler.handleMouseUp(e),
+                mouseleave: (e) => this.eventHandler.handleMouseLeave(e),
+                dblclick: (e) => this.eventHandler.handleDoubleClick(e),
+                click: (e) => this.eventHandler.handleClick(e),
+                keydown: (e) => this.eventHandler.handleKeyDown(e),
+            };
+            // 设置绘制类型
+            this.setDrawType(drawType || "");
+            // 绑定事件
+            if (useEvents) {
+                this.addEventListeners();
+            }
+        }
+        /**
+         * 设置绘制模式
+         * @param type - 绘制类型: 'rect' | 'polygon' | 'drag' | 'text' | ''
+         */
+        setDrawType(type) {
+            // 检查当前是否正在绘制多边形
+            if (this.drawType === "polygon" && this.annotationManager.isDrawing) {
+                if (this.annotationManager.operate.data.length > 0) {
+                    console.warn("Cannot switch mode while polygon is being drawn. Please complete or cancel the polygon first.");
+                    return;
+                }
+            }
+            // 如果切换到相同模式，不做任何操作
+            if (this.drawType === type)
+                return;
+            // 重置当前操作状态
+            this.annotationManager.operate.data = [];
+            this.annotationManager.isDrawing = false;
+            this.annotationManager.tempPolygonPoint = null;
+            // 如果切换到绘制模式，取消选中状态
+            if (type !== "") {
+                this.deselectAnnotation();
+            }
+            // 更新操作类型和绘制类型
+            this.annotationManager.operate.type = type;
+            this.drawType = type;
+            // 设置光标样式
+            if (type === "drag") {
+                this.canvas.style.cursor = "grab";
+            }
+            else if (type === "text") {
+                this.canvas.style.cursor = "text";
+            }
+            else {
+                this.canvas.style.cursor = "default";
+            }
+        }
+        /**
+         * 加载背景图片
+         * @param src - 图片 URL
+         */
+        drawImage(src) {
+            this.bgImageSrc = src;
+            this.bgImageExt = getImageTypeFromUrl(src);
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            img.src = src;
+            img.onload = () => {
+                this.bgImage = img;
+                this.viewport.setOriginalSize(img.width, img.height);
+                this.viewport.calculateInitialView();
+                this.render();
+            };
+        }
+        /**
+         * 渲染画布
+         */
+        render() {
+            this.renderer.render(this.bgImage);
+        }
+        /**
+         * 清除所有标注
+         * @param type - 清除后设置的绘制类型
+         */
+        clear(type = "") {
+            this.annotationManager.clear();
+            this.textManager.clearTextAnnotations();
+            this.setDrawType(type);
+            this.render();
+        }
+        /**
+         * 撤销上一步操作
+         */
+        withdraw() {
+            const annotationWithdrawn = this.annotationManager.withdraw();
+            const textWithdrawn = this.textManager.withdraw();
+            if (annotationWithdrawn || textWithdrawn) {
+                this.render();
+            }
+        }
+        /**
+         * 绑定事件监听器
+         */
+        addEventListeners() {
+            this.canvas.addEventListener("mousedown", this.events.mousedown);
+            this.canvas.addEventListener("mousemove", this.events.mousemove);
+            this.canvas.addEventListener("mouseup", this.events.mouseup);
+            this.canvas.addEventListener("mouseleave", this.events.mouseleave);
+            this.canvas.addEventListener("wheel", this.events.wheel);
+            this.canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+            document.addEventListener("keydown", this.events.keydown);
+            this.handleClickEventListener();
+        }
+        /**
+         * 处理单击事件（用于区分单击和双击）
+         */
+        handleClickEventListener() {
+            let clickTimeout = null;
+            let clickCount = 0;
+            this.canvas.addEventListener("click", (e) => {
+                // 跳过拖拽/移动/调整大小/文本移动结束后的点击
+                if (this.eventHandler.isDragging ||
+                    this.annotationManager.isMovingAnnotation ||
+                    this.annotationManager.isResizing ||
+                    this.textManager.isTextMoving) {
+                    return;
+                }
+                // 检查是否需要跳过这次点击
+                const shouldSkip = this.eventHandler.justFinishedMove;
+                if (shouldSkip) {
+                    this.eventHandler.justFinishedMove = false;
+                }
+                clickCount++;
+                if (clickCount === 1) {
+                    clickTimeout = window.setTimeout(() => {
+                        if (clickCount === 1 && !shouldSkip) {
+                            this.events.click(e);
+                        }
+                        clickCount = 0;
+                        clickTimeout = null;
+                    }, 300);
+                }
+                else if (clickCount === 2) {
+                    this.eventHandler.justFinishedMove = false;
+                    this.events.dblclick(e);
+                    clickCount = 0;
+                    if (clickTimeout !== null) {
+                        clearTimeout(clickTimeout);
+                        clickTimeout = null;
+                    }
+                }
+            });
+        }
+        /**
+         * 改变缩放比例
+         * @param zoomIn - true: 放大, false: 缩小
+         */
+        changeScale(zoomIn) {
+            if (!this.bgImage)
+                return;
+            const delta = getZoomDelta(this.viewport.scale, zoomIn);
+            const centerX = this.viewport.width / 2;
+            const centerY = this.viewport.height / 2;
+            const newScale = this.viewport.scale + delta;
+            this.viewport.updateScale(newScale, centerX, centerY);
+            this.render();
+        }
+        /**
+         * 清除整个画布，包括背景图片和所有标注
+         * @param keepImage - 是否保留背景图片，默认为 false
+         * @param clearImage - 是否清除背景图片，默认为 true（与 keepImage 互斥）
+         */
+        clearCanvas(keepImage = false, clearImage = true) {
+            // 清除所有标注
+            this.annotationManager.clear();
+            this.textManager.clearTextAnnotations();
+            // 取消文本标注选中
+            this.textManager.deselectTextAnnotation();
+            // 只有在不清除图片且需要重置视图时才重置
+            if (!keepImage && clearImage) {
+                // 清除背景图片
+                this.bgImage = null;
+                this.bgImageSrc = "";
+                this.viewport.setOriginalSize(0, 0);
+                // 重置视图状态
+                this.viewport.reset();
+            }
+            // 清除画布内容
+            this.ctx.clearRect(0, 0, this.viewport.width, this.viewport.height);
+            // 如果保留图片，重新渲染
+            if (keepImage && this.bgImage) {
+                this.render();
+            }
+            // 更新光标
+            if (this.drawType === "drag") {
+                this.canvas.style.cursor = "default";
+            }
+        }
+        /**
+         * 清除所有标注但保留背景图片
+         */
+        clearAnnotations() {
+            this.clearCanvas(true, false);
+        }
+        /**
+         * 获取当前所有标注数据
+         */
+        getAnnotations() {
+            return this.annotationManager.getAnnotations();
+        }
+        /**
+         * 获取所有文本标注
+         */
+        getTextAnnotations() {
+            return this.textManager.getTextAnnotations();
+        }
+        /**
+         * 导出原始尺寸标注图片
+         */
+        exportAnnotationImage() {
+            return new Promise((resolve, reject) => {
+                if (!this.bgImage) {
+                    reject(new Error("No background image loaded"));
+                    return;
+                }
+                // 创建离屏 Canvas
+                const offscreenCanvas = document.createElement("canvas");
+                offscreenCanvas.width = this.viewport.originalWidth;
+                offscreenCanvas.height = this.viewport.originalHeight;
+                const offscreenCtx = offscreenCanvas.getContext("2d");
+                if (!offscreenCtx) {
+                    reject(new Error("Could not create offscreen canvas context"));
+                    return;
+                }
+                const image = new Image();
+                image.src = this.bgImageSrc;
+                image.crossOrigin = "anonymous";
+                image.onload = () => {
+                    try {
+                        this.renderer.drawForExport(offscreenCtx, image, this.viewport.originalWidth, this.viewport.originalHeight);
+                        const base64 = offscreenCanvas.toDataURL(`image/${this.bgImageExt}`, 0.7);
+                        resolve(base64);
+                    }
+                    catch (e) {
+                        this.exportCurrentViewImage()
+                            .then(resolve)
+                            .catch((err) => reject(new Error(`Both methods failed: ${err.message}`)));
+                    }
+                };
+                image.onerror = () => {
+                    reject(new Error("Failed to load image for export"));
+                };
+            });
+        }
+        /**
+         * 导出当前视图为 base64 图片
+         */
+        exportCurrentViewImage() {
+            return new Promise((resolve, reject) => {
+                try {
+                    const base64 = this.canvas.toDataURL(`image/${this.bgImageExt}`);
+                    resolve(base64);
+                }
+                catch (e) {
+                    reject(new Error(`Failed to export current view: ${e.message}`));
+                }
+            });
+        }
+        /**
+         * 将 base64 转换为 File 对象
+         */
+        base64ToFile(base64Data, filename) {
+            return base64ToFile(base64Data, filename);
+        }
+        /**
+         * 将 base64 转换为 Blob 对象（静态方法）
+         */
+        static base64ToBlob(base64) {
+            return base64ToBlob(base64);
+        }
+        // ==================== 文本标注 API ====================
+        /**
+         * 添加文本标注
+         * @param x - 图像坐标 X
+         * @param y - 图像坐标 Y
+         * @param text - 初始文本（可选，默认为空字符串）
+         */
+        addTextAnnotation(x, y, text = "") {
+            this.textManager.addTextAnnotation(x, y, text);
+            this.render();
+        }
+        /**
+         * 更新文本标注内容
+         * @param index - 文本标注索引
+         * @param text - 新文本内容
+         */
+        updateTextAnnotation(index, text) {
+            if (this.textManager.updateTextAnnotation(index, text)) {
+                this.render();
+            }
+        }
+        /**
+         * 移动文本标注位置
+         * @param index - 文本标注索引
+         * @param x - 新位置 X（图像坐标）
+         * @param y - 新位置 Y（图像坐标）
+         */
+        moveTextAnnotation(index, x, y) {
+            if (this.textManager.moveTextAnnotation(index, x, y)) {
+                this.render();
+            }
+        }
+        /**
+         * 删除文本标注
+         * @param index - 文本标注索引
+         */
+        removeTextAnnotation(index) {
+            if (this.textManager.removeTextAnnotation(index)) {
+                this.render();
+            }
+        }
+        /**
+         * 清除所有文本标注
+         */
+        clearTextAnnotations() {
+            this.textManager.clearTextAnnotations();
+            this.render();
+        }
+        // ==================== 标注选中与移动 API ====================
+        /**
+         * 选中指定索引的标注
+         * @param index - 标注索引
+         */
+        selectAnnotation(index) {
+            if (this.annotationManager.selectAnnotation(index)) {
+                this.render();
+            }
+        }
+        /**
+         * 取消选中
+         */
+        deselectAnnotation() {
+            this.annotationManager.deselectAnnotation();
+            this.textManager.deselectTextAnnotation();
+            this.textManager.editingTextIndex = null;
+            this.render();
+        }
+        /**
+         * 获取当前选中的标注信息
+         */
+        getSelectedAnnotation() {
+            // 优先返回矩形/多边形的选中
+            const shapeSelected = this.annotationManager.getSelectedAnnotation();
+            if (shapeSelected)
+                return shapeSelected;
+            // 返回文本标注的选中
+            const textSelected = this.textManager.getSelectedTextAnnotation();
+            if (textSelected) {
+                return {
+                    index: textSelected.index,
+                    type: "text",
+                    data: textSelected.data
+                };
+            }
+            return null;
+        }
+        /**
+         * 删除选中的标注
+         */
+        deleteSelectedAnnotation() {
+            // 优先删除选中的文本标注
+            if (this.textManager.selectedTextIndex !== null) {
+                this.textManager.deleteSelectedTextAnnotation();
+                this.render();
+                return;
+            }
+            // 删除选中的矩形/多边形标注
+            if (this.annotationManager.deleteSelectedAnnotation()) {
+                this.render();
+            }
+        }
+        /**
+         * 移动选中的标注
+         * @param dx - X 方向移动距离
+         * @param dy - Y 方向移动距离
+         */
+        moveSelectedAnnotation(dx, dy) {
+            if (this.annotationManager.moveSelectedAnnotation(dx, dy)) {
+                this.render();
+            }
+        }
+        // ==================== 颜色配置 API ====================
+        /**
+         * 设置标注颜色配置
+         * 新设置的样式只影响之后创建的标注
+         * 如果当前有选中的标注，会实时预览新样式（但不会保存，除非调用 updateSelectedAnnotationStyle）
+         * @param color - 颜色字符串或颜色配置对象
+         * @example
+         * // 设置所有标注为同一种颜色
+         * drawer.setAnnotationColor('#FF0000')
+         *
+         * // 为不同类型设置不同颜色
+         * drawer.setAnnotationColor({
+         *   rect: '#FF0000',
+         *   polygon: '#00FF00',
+         *   default: '#0000FF'
+         * })
+         */
+        setAnnotationColor(color) {
+            this.annotationManager.setColorConfig(color);
+            this.render();
+        }
+        /**
+         * 获取当前颜色配置
+         */
+        getAnnotationColor() {
+            return this.annotationManager.getColorConfig();
+        }
+        /**
+         * 更新选中标注的样式为当前设置的样式
+         * 调用此方法后，选中的标注会保存当前的新样式
+         */
+        updateSelectedAnnotationStyle() {
+            const selected = this.annotationManager.selectedAnnotation;
+            if (!selected)
+                return false;
+            const annotation = this.annotationManager.recordList[selected.index];
+            if (!annotation)
+                return false;
+            // 更新标注的样式为当前样式
+            annotation.style = this.annotationManager.getCurrentStyle();
+            this.render();
+            return true;
+        }
+        // ==================== 边线和顶点样式 API ====================
+        /**
+         * 设置边线样式
+         * @param style - 边线样式：'solid' | 'dashed' | 'dotted'
+         */
+        setLineStyle(style) {
+            this.annotationManager.setLineStyle(style);
+            this.render();
+        }
+        /**
+         * 获取当前边线样式
+         */
+        getLineStyle() {
+            return this.annotationManager.getLineStyle();
+        }
+        /**
+         * 设置顶点样式
+         * @param style - 顶点样式配置
+         * @example
+         * drawer.setVertexStyle({
+         *   size: 10,
+         *   fillColor: '#FF0000',
+         *   strokeColor: '#FFFFFF',
+         *   strokeWidth: 2,
+         *   shape: 'circle' // 'circle' | 'square' | 'diamond'
+         * })
+         */
+        setVertexStyle(style) {
+            this.annotationManager.setVertexStyle(style);
+            this.render();
+        }
+        /**
+         * 获取当前顶点样式
+         */
+        getVertexStyle() {
+            return this.annotationManager.getVertexStyle();
+        }
+        // ==================== 文本样式 API ====================
+        /**
+         * 设置文本标注样式
+         * @param style - 文本样式配置
+         * @example
+         * drawer.setTextStyle({
+         *   font: '16px Arial',
+         *   color: '#FFD700',
+         *   backgroundColor: 'rgba(0,0,0,0.6)'
+         * })
+         */
+        setTextStyle(style) {
+            this.textManager.setTextStyle(style);
+            this.render();
+        }
+        /**
+         * 设置文本输入框样式
+         * @param style - 输入框样式配置
+         * @example
+         * drawer.setTextInputStyle({
+         *   border: '2px solid #00D9FF',
+         *   borderRadius: '6px',
+         *   backgroundColor: '#ffffff',
+         *   color: '#333'
+         * })
+         */
+        setTextInputStyle(style) {
+            this.textManager.setInputStyle(style);
+        }
+        /**
+         * 设置文本标注选中态样式
+         * @param style - 选中态样式配置
+         * @example
+         * drawer.setTextSelectionStyle({
+         *   selectedBorderColor: '#00D9FF',
+         *   selectedBackgroundColor: 'rgba(0,217,255,0.15)'
+         * })
+         */
+        setTextSelectionStyle(style) {
+            this.textManager.setSelectionStyle(style);
+            this.render();
+        }
+        /**
+         * 销毁 Drawer 实例，清理资源
+         */
+        destroy() {
+            // 清理文本输入框
+            this.textManager.destroy();
+            // 移除 Canvas
+            if (this.canvas.parentNode) {
+                this.canvas.parentNode.removeChild(this.canvas);
+            }
+        }
+    }
+
+    exports.AnnotationManager = AnnotationManager;
+    exports.Drawer = Drawer;
+    exports.EventHandler = EventHandler;
+    exports.Renderer = Renderer;
+    exports.TextAnnotationManager = TextAnnotationManager;
+    exports.ViewportManager = ViewportManager;
+    exports.base64ToBlob = base64ToBlob;
+    exports.base64ToFile = base64ToFile;
+    exports.default = Drawer;
+    exports.getImageTypeFromUrl = getImageTypeFromUrl;
+    exports.getZoomDelta = getZoomDelta;
+    exports.isPointInPolygon = isPointInPolygon;
+    exports.isPointInRect = isPointInRect;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+if (typeof ImageAnnotationDrawer !== "undefined" && ImageAnnotationDrawer.default) { ImageAnnotationDrawer = ImageAnnotationDrawer.default; }
+//# sourceMappingURL=index.js.map