image-annotation-drawer 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,3333 +1 @@
-(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
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ImageAnnotationDrawer=t.ImageAnnotationDrawer||{})}(this,function(t){"use strict";function e(t,e){const n=e.width>=0?e.start.x:e.start.x+e.width,i=e.height>=0?e.start.y:e.start.y+e.height,s=Math.abs(e.width),a=Math.abs(e.height);return t.x>=n&&t.x<=n+s&&t.y>=i&&t.y<=i+a}function n(t,e){if(e.length<3)return!1;let n=!1;for(let i=0,s=e.length-1;i<e.length;s=i++){const a=e[i].point.x,o=e[i].point.y,r=e[s].point.x,h=e[s].point.y;o>t.y!=h>t.y&&t.x<(r-a)*(t.y-o)/(h-o)+a&&(n=!n)}return n}function i(t){try{const e=new URL(t).pathname.toLowerCase();return e.endsWith(".png")?"png":e.endsWith(".jpg")?"jpg":e.endsWith(".jpeg")?"jpeg":e.endsWith(".webp")?"webp":e.endsWith(".gif")?"gif":e.endsWith(".bmp")?"bmp":e.endsWith(".svg")?"svg":"jpeg"}catch(t){return"jpeg"}}function s(t,e){const n=t.split(";base64,"),i=n[0].split(":")[1],s=window.atob(n[1]),a=s.length,o=new Uint8Array(a);for(let t=0;t<a;++t)o[t]=s.charCodeAt(t);const r=new Blob([o],{type:i});return new File([r],e,{type:i})}function a(t){return new Promise((e,n)=>{const i=t.split(";base64,");if(i.length<2)return void n(new Error("Invalid base64 string"));const s=i[0].split(":")[1],a=atob(i[1]),o=new ArrayBuffer(a.length),r=new Uint8Array(o);for(let t=0;t<a.length;t++)r[t]=a.charCodeAt(t);e(new Blob([o],{type:s}))})}function o(t,e){return t<2?e?.1:-.1:t<5?e?.05:-.05:e?.02:-.02}class r{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=!0,this.minOffsetX=0,this.minOffsetY=0,this.maxOffsetX=0,this.maxOffsetY=0}setSize(t,e){this.width=t,this.height=e}setOriginalSize(t,e){this.originalWidth=t,this.originalHeight=e}calculateInitialView(){if(0===this.originalWidth||0===this.originalHeight)return;const t=this.width/this.originalWidth,e=this.height/this.originalHeight;this.scale=Math.min(t,e),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=!0}calculateBoundaries(){const t=this.originalWidth*this.scale,e=this.originalHeight*this.scale;this.maxOffsetX=0,this.maxOffsetY=0,this.minOffsetX=this.width-t,this.minOffsetY=this.height-e,this.minOffsetX>this.maxOffsetX&&([this.minOffsetX,this.maxOffsetX]=[this.maxOffsetX,this.minOffsetX]),this.minOffsetY>this.maxOffsetY&&([this.minOffsetY,this.maxOffsetY]=[this.maxOffsetY,this.minOffsetY])}constrainViewport(){this.offset.x>this.maxOffsetX?this.offset.x=this.maxOffsetX:this.offset.x<this.minOffsetX&&(this.offset.x=this.minOffsetX),this.offset.y>this.maxOffsetY?this.offset.y=this.maxOffsetY:this.offset.y<this.minOffsetY&&(this.offset.y=this.minOffsetY)}toImageCoordinates(t,e){return{x:(t-this.offset.x)/this.scale,y:(e-this.offset.y)/this.scale}}toCanvasCoordinates(t,e){return{x:this.offset.x+t*this.scale,y:this.offset.y+e*this.scale}}updateScale(t,e,n){const i=this.scale,s=(e-this.offset.x)/i,a=(n-this.offset.y)/i;this.scale=Math.max(this.minScale,Math.min(t,this.maxScale));const o=s*this.scale+this.offset.x,r=a*this.scale+this.offset.y;this.offset.x+=e-o,this.offset.y+=n-r,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=!0}updateOffset(t,e){this.offset.x+=t,this.offset.y+=e,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=!0,this.minOffsetX=0,this.minOffsetY=0,this.maxOffsetX=0,this.maxOffsetY=0}}class h{constructor(t){this.viewport=t,this.recordList=[],this.operate={type:"rect",data:[],status:"pending"},this.isDrawing=!1,this.drawStartPoint={x:0,y:0},this.tempPolygonPoint=null,this.selectedAnnotation=null,this.isMovingAnnotation=!1,this.isResizing=!1,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(t){this.colorConfig="string"==typeof t?{rect:t,polygon:t,default:t}:Object.assign(Object.assign({},this.colorConfig),t),this.applyColorConfig()}getColorConfig(){return Object.assign({},this.colorConfig)}applyColorConfig(){this.strokeStyle=this.colorConfig.default||"red"}getColorForType(t){return this.colorConfig[t]||this.colorConfig.default||"red"}getCurrentStyle(){return{strokeColor:this.strokeStyle,lineWidth:this.lineWidth,lineStyle:this.lineStyle,vertexStyle:Object.assign({},this.vertexStyle)}}setLineStyle(t){this.lineStyle=t}setVertexStyle(t){this.vertexStyle=Object.assign(Object.assign({},this.vertexStyle),t),t.fillColor&&(this.strokeStyle=t.fillColor)}getLineStyle(){return this.lineStyle}getVertexStyle(){return Object.assign({},this.vertexStyle)}getAnnotationStyle(t){return t.style||this.getCurrentStyle()}startRectDrawing(t){this.isDrawing=!0,this.drawStartPoint=t,this.operate={type:"rect",data:[{start:Object.assign({},t),width:0,height:0}],status:"pending"}}updateRectDrawing(t){if(!this.isDrawing||"rect"!==this.operate.type)return;const e=this.operate.data[0];e.width=t.x-this.drawStartPoint.x,e.height=t.y-this.drawStartPoint.y}finishRectDrawing(){if(!this.isDrawing||"rect"!==this.operate.type)return!1;const t=this.operate.data[0];if(Math.abs(t.width)>5&&Math.abs(t.height)>5){const t=Object.assign(Object.assign({},this.operate),{style:this.getCurrentStyle()});this.recordList.push(t),this.deleteHistory=[]}return this.operate.data=[],this.isDrawing=!1,!0}startPolygonDrawing(t){this.isDrawing=!0,this.operate={type:"polygon",data:[{point:t}],status:"pending"},this.tempPolygonPoint=t}addPolygonPoint(t){if(!this.isDrawing||"polygon"!==this.operate.type)return!1;const e=this.operate.data.length>0?this.operate.data[this.operate.data.length-1]:null;return!(e&&Math.abs(e.point.x-t.x)<=5&&Math.abs(e.point.y-t.y)<=5)&&(this.operate.data.push({point:t}),!0)}updatePolygonTempPoint(t){this.tempPolygonPoint=t}finishPolygonDrawing(){if(!this.isDrawing||"polygon"!==this.operate.type)return!1;if(this.operate.data.length>=3){this.operate.status="fullfilled";const t=Object.assign(Object.assign({},this.operate),{style:this.getCurrentStyle()});this.recordList.push(t),this.deleteHistory=[]}return this.operate={type:"polygon",data:[],status:"pending"},this.isDrawing=!1,this.tempPolygonPoint=null,!0}cancelDrawing(){if(this.isDrawing&&"polygon"===this.operate.type&&this.operate.data.length>=2){this.operate.status="fullfilled";const t=Object.assign(Object.assign({},this.operate),{style:this.getCurrentStyle()});this.recordList.push(t)}this.operate.data=[],this.isDrawing=!1,this.tempPolygonPoint=null}withdraw(){if(this.operate.data.length>0)return"polygon"===this.operate.type?(this.operate.data.pop(),0===this.operate.data.length&&(this.isDrawing=!1)):(this.operate.data=[],this.isDrawing=!1),!0;if(this.deleteHistory.length>0){const{annotation:t,index:e}=this.deleteHistory.pop();return this.recordList.splice(e,0,t),!0}return this.recordList.length>0&&(this.recordList.pop(),!0)}selectAnnotation(t){if(t<0||t>=this.recordList.length)return this.deselectAnnotation(),!1;const e=this.recordList[t];return this.selectedAnnotation={index:t,type:e.type},!0}deselectAnnotation(){this.selectedAnnotation=null,this.isMovingAnnotation=!1,this.isResizing=!1,this.activeHandle=null,this.originalRect=null,this.originalPolygon=null}deleteSelectedAnnotation(){if(!this.selectedAnnotation)return!1;const t=this.selectedAnnotation.index,e=this.recordList[t];return this.deleteHistory.push({annotation:Object.assign({},e),index:t}),this.recordList.splice(t,1),this.deselectAnnotation(),!0}startMovingAnnotation(t){return!!this.selectedAnnotation&&(this.isMovingAnnotation=!0,this.annotationMoveStart={x:t.clientX,y:t.clientY},!0)}moveSelectedAnnotation(t,e){if(!this.selectedAnnotation)return!1;const n=this.recordList[this.selectedAnnotation.index];if(!n)return!1;if("rect"===n.type){const i=n.data[0];i.start.x+=t,i.start.y+=e}else if("polygon"===n.type){n.data.forEach(n=>{n.point.x+=t,n.point.y+=e})}return!0}finishMovingAnnotation(){this.isMovingAnnotation=!1,this.isResizing=!1,this.activeHandle=null,this.originalRect=null,this.originalPolygon=null}startResizing(t,e){if(!this.selectedAnnotation)return!1;this.activeHandle=t,this.isResizing=!0;const n=this.recordList[this.selectedAnnotation.index];return"rect"===n.type?this.originalRect=Object.assign({},n.data[0]):"polygon"===n.type&&(this.originalPolygon=n.data.map(t=>({point:Object.assign({},t.point)}))),!0}resizeRect(t){if(!this.selectedAnnotation||"rect"!==this.selectedAnnotation.type||!this.originalRect||!this.activeHandle)return!1;const e=this.recordList[this.selectedAnnotation.index].data[0],n=this.originalRect,i=n.start.x,s=n.start.x+n.width,a=n.start.y,o=n.start.y+n.height;let r,h;switch(this.activeHandle.index){case 0:r=s,h=o;break;case 1:r=i,h=o;break;case 2:r=s,h=a;break;case 3:r=i,h=a;break;default:return!1}const l=Math.min(t.x,r),c=Math.max(t.x,r),d=Math.min(t.y,h),g=Math.max(t.y,h);e.start.x=l,e.start.y=d,e.width=c-l,e.height=g-d;const x=t.x<r,f=t.y<h;return 0===this.activeHandle.index?x||f?!x&&f?this.activeHandle.index=1:x&&!f&&(this.activeHandle.index=2):this.activeHandle.index=3:1===this.activeHandle.index?x&&!f?this.activeHandle.index=2:x&&f?this.activeHandle.index=0:x||f||(this.activeHandle.index=3):2===this.activeHandle.index?!x&&f?this.activeHandle.index=1:x&&f?this.activeHandle.index=0:x||f||(this.activeHandle.index=3):3===this.activeHandle.index&&(x&&f?this.activeHandle.index=0:!x&&f?this.activeHandle.index=1:x&&!f&&(this.activeHandle.index=2)),this.originalRect=Object.assign({},e),!0}resizePolygon(t){if(!this.selectedAnnotation||"polygon"!==this.selectedAnnotation.type||!this.activeHandle)return!1;const e=this.recordList[this.selectedAnnotation.index].data,n=this.activeHandle.index;return n>=0&&n<e.length&&(e[n].point.x=t.x,e[n].point.y=t.y,!0)}getAnnotationAtPoint(t){for(let i=this.recordList.length-1;i>=0;i--){const s=this.recordList[i];if("rect"===s.type){if(e(t,s.data[0]))return{index:i,type:"rect"}}else if("polygon"===s.type){if(n(t,s.data))return{index:i,type:"polygon"}}}return null}getHandleAtPoint(t,e){if(!this.selectedAnnotation)return null;const n=this.recordList[this.selectedAnnotation.index],i=this.selectionStyle.handleSize/2;if("rect"===n.type){const s=n.data[0],a=this.viewport.offset.x+s.start.x*this.viewport.scale,o=this.viewport.offset.y+s.start.y*this.viewport.scale,r=s.width*this.viewport.scale,h=s.height*this.viewport.scale,l=[{x:a,y:o,index:0},{x:a+r,y:o,index:1},{x:a,y:o+h,index:2},{x:a+r,y:o+h,index:3}];for(const n of l)if(t>=n.x-i&&t<=n.x+i&&e>=n.y-i&&e<=n.y+i)return{type:"rect-corner",index:n.index}}else if("polygon"===n.type){const s=n.data;for(let n=0;n<s.length;n++){const a=s[n],o=this.viewport.offset.x+a.point.x*this.viewport.scale,r=this.viewport.offset.y+a.point.y*this.viewport.scale;if(t>=o-i&&t<=o+i&&e>=r-i&&e<=r+i)return{type:"polygon-vertex",index:n}}}return null}clear(){this.recordList=[],this.operate={type:"rect",data:[],status:"pending"},this.isDrawing=!1,this.tempPolygonPoint=null,this.deselectAnnotation(),this.deleteHistory=[]}getAnnotations(){return[...this.recordList]}getSelectedAnnotation(){if(!this.selectedAnnotation)return null;const t=this.recordList[this.selectedAnnotation.index];return t?{index:this.selectedAnnotation.index,type:this.selectedAnnotation.type,data:t}:null}}class l{constructor(t,e,n,i){this.viewport=t,this.container=e,this.ctx=n,this.renderCallback=i,this.textAnnotations=[],this.editingTextIndex=null,this.currentEditingIndex=null,this.isTextMoving=!1,this.textMoveStart={x:0,y:0},this.textBeforeEditing="",this.selectedTextIndex=null,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(),this.renderCallback&&this.renderCallback()}),this.textInput.addEventListener("keydown",t=>{t.stopPropagation(),"Enter"===t.key?(this.finishEditing(),this.renderCallback&&this.renderCallback()):"Escape"===t.key?(t.preventDefault(),this.cancelEditing()):"Delete"===t.key&&""===this.textInput.value&&(t.preventDefault(),this.deleteEditingAnnotation())}),this.textInput.addEventListener("input",()=>{this.adjustInputWidth()}),this.container.appendChild(this.textInput)}applyInputStyle(){if(!this.textInput)return;const t=Object.assign(Object.assign({},this.defaultInputStyle),this.textStyle.inputStyle);this.textInput.style.border=t.border,this.textInput.style.borderRadius=t.borderRadius,this.textInput.style.padding=t.padding,this.textInput.style.fontSize=t.fontSize,this.textInput.style.fontFamily=t.fontFamily,this.textInput.style.backgroundColor=t.backgroundColor,this.textInput.style.color=t.color,this.textInput.style.boxShadow=t.boxShadow,this.textInput.style.minWidth=t.minWidth,this.textInput.style.maxWidth=t.maxWidth}setTextStyle(t){this.textStyle=Object.assign(Object.assign({},this.textStyle),t),this.applyInputStyle()}setInputStyle(t){this.textStyle.inputStyle=Object.assign(Object.assign({},this.textStyle.inputStyle),t),this.applyInputStyle()}setSelectionStyle(t){void 0!==t.selectedBorderColor&&(this.textStyle.selectedBorderColor=t.selectedBorderColor),void 0!==t.selectedBackgroundColor&&(this.textStyle.selectedBackgroundColor=t.selectedBackgroundColor)}getCurrentStyle(){return{font:this.textStyle.font,color:this.textStyle.color,backgroundColor:this.textStyle.backgroundColor}}addTextAnnotation(t,e,n=""){var i;this.ctx.font=this.textStyle.font;const s=n||"输入文字...",a=this.ctx.measureText(s);let o;if(a.actualBoundingBoxAscent&&a.actualBoundingBoxDescent)o=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent;else{o=1.2*parseInt((null===(i=this.textStyle.font.match(/\d+/))||void 0===i?void 0:i[0])||"16")}const r={position:{x:t,y:e},text:n,style:this.getCurrentStyle(),width:Math.max(a.width,60),height:o};this.textAnnotations.push(r);const h=this.textAnnotations.length-1;return this.deleteHistory=[],this.startEditing(h),h}updateTextAnnotation(t,e){if(t<0||t>=this.textAnnotations.length)return!1;const n=this.textAnnotations[t];n.text=e,this.ctx.font=this.textStyle.font;const i=this.ctx.measureText(e);return n.width=i.width,n.height=1.2*parseInt(this.textStyle.font),!0}moveTextAnnotation(t,e,n){return!(t<0||t>=this.textAnnotations.length)&&(this.textAnnotations[t].position={x:e,y:n},!0)}removeTextAnnotation(t){if(t<0||t>=this.textAnnotations.length)return!1;const e=this.textAnnotations[t];return this.deleteHistory.push({annotation:Object.assign({},e),index:t}),this.textAnnotations.splice(t,1),this.editingTextIndex===t?this.cancelEditing():null!==this.editingTextIndex&&this.editingTextIndex>t&&this.editingTextIndex--,!0}clearTextAnnotations(){this.textAnnotations=[],this.selectedTextIndex=null,this.cancelEditing(),this.deleteHistory=[]}startEditing(t){if(!this.textInput||t<0||t>=this.textAnnotations.length)return!1;const e=this.textAnnotations[t];this.editingTextIndex=t,this.currentEditingIndex=t,this.textBeforeEditing=e.text;const n=this.viewport.offset.x+e.position.x*this.viewport.scale,i=this.viewport.offset.y+e.position.y*this.viewport.scale;return this.textInput.value=e.text,this.textInput.style.left=n-this.textStyle.padding+"px",this.textInput.style.top=i-this.textStyle.padding+"px",this.textInput.style.display="block",this.adjustInputWidth(),setTimeout(()=>{this.textInput&&(this.textInput.focus(),this.textInput.select())},10),!0}finishEditing(){if(!this.textInput)return!1;const t=this.currentEditingIndex,e=this.textInput.value.trim();if(null===t||t<0||t>=this.textAnnotations.length)return this.resetEditingState(),!1;if(""===e)this.textAnnotations.splice(t,1);else{const n=this.textAnnotations[t];n.text=e,this.ctx.font=this.textStyle.font;const i=this.ctx.measureText(n.text);n.width=i.width,n.height=1.2*parseInt(this.textStyle.font)}return this.resetEditingState(),!0}cancelEditing(){if(!this.textInput||null===this.editingTextIndex)return!1;this.textInput.value=this.textBeforeEditing;const t=this.editingTextIndex;if(t>=0&&t<this.textAnnotations.length){""===this.textAnnotations[t].text&&""===this.textBeforeEditing&&this.textAnnotations.splice(t,1)}return this.resetEditingState(),!0}deleteEditingAnnotation(){if(null===this.editingTextIndex)return!1;const t=this.editingTextIndex;return this.textInput&&(this.textInput.style.display="none"),t>=0&&t<this.textAnnotations.length&&this.textAnnotations.splice(t,1),this.resetEditingState(),!0}resetEditingState(){this.textInput&&(this.textInput.style.display="none"),this.editingTextIndex=null,this.currentEditingIndex=null,this.textBeforeEditing=""}adjustInputWidth(){if(!this.textInput||null===this.editingTextIndex)return;this.ctx.font=this.textStyle.font;const t=this.textInput.value||this.textInput.placeholder||"",e=this.ctx.measureText(t).width,n=Math.min(Math.max(e+24,60),200);this.textInput.style.width=`${n}px`}startMoving(t,e){return!(e<0||e>=this.textAnnotations.length)&&(this.editingTextIndex=e,this.isTextMoving=!0,this.textMoveStart={x:t.clientX,y:t.clientY},!0)}moveAnnotation(t){if(!this.isTextMoving||null===this.editingTextIndex)return!1;const e=t.clientX-this.textMoveStart.x,n=t.clientY-this.textMoveStart.y,i=this.textAnnotations[this.editingTextIndex];return!!i&&(i.position.x+=e/this.viewport.scale,i.position.y+=n/this.viewport.scale,this.textMoveStart={x:t.clientX,y:t.clientY},!0)}finishMoving(){this.isTextMoving=!1}checkTextClick(t,e){for(let n=this.textAnnotations.length-1;n>=0;n--){const i=this.textAnnotations[n],s=this.viewport.offset.x+i.position.x*this.viewport.scale,a=this.viewport.offset.y+i.position.y*this.viewport.scale;if(t>=s-this.textStyle.padding&&t<=s+i.width+this.textStyle.padding&&e>=a-this.textStyle.padding&&e<=a+i.height+this.textStyle.padding)return n}return null}checkTextClickForMove(t){const e=this.checkTextClick(t.offsetX,t.offsetY);return null!==e?(this.startMoving(t,e),{index:e,handled:!0}):{index:-1,handled:!1}}getTextAnnotations(){return[...this.textAnnotations]}withdraw(){if(this.deleteHistory.length>0){const{annotation:t,index:e}=this.deleteHistory.pop();return this.textAnnotations.splice(e,0,t),!0}return this.textAnnotations.length>0&&(this.textAnnotations.pop(),!0)}selectTextAnnotation(t){return t<0||t>=this.textAnnotations.length?(this.deselectTextAnnotation(),!1):(this.selectedTextIndex=t,null!==this.editingTextIndex&&this.finishEditing(),!0)}deselectTextAnnotation(){this.selectedTextIndex=null}deleteSelectedTextAnnotation(){if(null===this.selectedTextIndex)return!1;const t=this.selectedTextIndex,e=this.textAnnotations[t];return this.deleteHistory.push({annotation:Object.assign({},e),index:t}),this.textAnnotations.splice(t,1),this.selectedTextIndex=null,null!==this.editingTextIndex&&this.editingTextIndex>t&&this.editingTextIndex--,!0}getSelectedTextAnnotation(){if(null===this.selectedTextIndex)return null;const t=this.textAnnotations[this.selectedTextIndex];return t?{index:this.selectedTextIndex,data:t}:null}destroy(){this.textInput&&this.textInput.parentNode&&this.textInput.parentNode.removeChild(this.textInput)}}class c{constructor(t,e,n,i,s){this.ctx=t,this.viewport=e,this.annotationManager=n,this.textManager=i,this.canvas=s}render(t){this.ctx.clearRect(0,0,this.viewport.width,this.viewport.height),t&&this.drawBackgroundImage(t),this.drawAnnotations(),this.drawTextAnnotations()}drawBackgroundImage(t){this.ctx.drawImage(t,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((t,e)=>{var n;const i=this.annotationManager.getAnnotationStyle(t);this.ctx.strokeStyle=i.strokeColor,this.ctx.lineWidth=i.lineWidth,this.setLineDash(i.lineStyle||"solid"),this.ctx.fillStyle=this.ctx.strokeStyle;const s=(null===(n=this.annotationManager.selectedAnnotation)||void 0===n?void 0:n.index)===e;if("rect"===t.type)this.drawRect(t.data[0],s);else if("polygon"===t.type){const e=i.vertexStyle||this.annotationManager.getVertexStyle();this.drawPolygon(t.data,"fullfilled"===t.status,e)}}),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),"rect"===this.annotationManager.operate.type?this.drawRect(this.annotationManager.operate.data[0],!1):"polygon"===this.annotationManager.operate.type&&this.drawCurrentPolygon()),this.ctx.setLineDash([]),this.drawSelectionHighlight()}setLineDash(t){switch(t){case"dashed":this.ctx.setLineDash([10,5]);break;case"dotted":this.ctx.setLineDash([2,4]);break;default:this.ctx.setLineDash([])}}drawRect(t,e=!1){this.ctx.strokeRect(this.viewport.offset.x+t.start.x*this.viewport.scale,this.viewport.offset.y+t.start.y*this.viewport.scale,t.width*this.viewport.scale,t.height*this.viewport.scale)}drawPolygon(t,e,n){if(0!==t.length){if(this.ctx.beginPath(),t.forEach((t,e)=>{const n=Math.round(this.viewport.offset.x+t.point.x*this.viewport.scale),i=Math.round(this.viewport.offset.y+t.point.y*this.viewport.scale);0===e?this.ctx.moveTo(n,i):this.ctx.lineTo(n,i)}),e&&t.length>1){const e=t[0];this.ctx.lineTo(this.viewport.offset.x+e.point.x*this.viewport.scale,this.viewport.offset.y+e.point.y*this.viewport.scale)}this.ctx.stroke(),this.drawPolygonVertices(t,n)}}drawPolygonVertices(t,e){const n=e||this.annotationManager.getVertexStyle(),i=n.size/2;t.forEach(t=>{const e=Math.round(this.viewport.offset.x+t.point.x*this.viewport.scale),s=Math.round(this.viewport.offset.y+t.point.y*this.viewport.scale);switch(this.ctx.fillStyle=n.fillColor,this.ctx.strokeStyle=n.strokeColor,this.ctx.lineWidth=n.strokeWidth,this.ctx.beginPath(),n.shape){case"square":this.ctx.rect(e-i,s-i,2*i,2*i);break;case"diamond":this.ctx.moveTo(e,s-i),this.ctx.lineTo(e+i,s),this.ctx.lineTo(e,s+i),this.ctx.lineTo(e-i,s),this.ctx.closePath();break;default:this.ctx.arc(e,s,i,0,2*Math.PI)}this.ctx.fill(),n.strokeWidth>0&&this.ctx.stroke()})}drawCurrentPolygon(){const t=this.annotationManager.operate.data,e=this.annotationManager.tempPolygonPoint;if(this.ctx.beginPath(),t.forEach((t,e)=>{const n=Math.round(this.viewport.offset.x+t.point.x*this.viewport.scale),i=Math.round(this.viewport.offset.y+t.point.y*this.viewport.scale);0===e?this.ctx.moveTo(n,i):this.ctx.lineTo(n,i)}),e){const t=Math.round(this.viewport.offset.x+e.x*this.viewport.scale),n=Math.round(this.viewport.offset.y+e.y*this.viewport.scale);this.ctx.lineTo(t,n)}if(this.ctx.stroke(),this.drawPolygonVertices(t,this.annotationManager.getVertexStyle()),e){const t=this.annotationManager.getVertexStyle(),n=Math.round(this.viewport.offset.x+e.x*this.viewport.scale),i=Math.round(this.viewport.offset.y+e.y*this.viewport.scale),s=t.size/2;switch(this.ctx.fillStyle=t.fillColor,this.ctx.strokeStyle=t.strokeColor,this.ctx.lineWidth=t.strokeWidth,this.ctx.beginPath(),t.shape){case"square":this.ctx.rect(n-s,i-s,2*s,2*s);break;case"diamond":this.ctx.moveTo(n,i-s),this.ctx.lineTo(n+s,i),this.ctx.lineTo(n,i+s),this.ctx.lineTo(n-s,i),this.ctx.closePath();break;default:this.ctx.arc(n,i,s,0,2*Math.PI)}this.ctx.fill(),t.strokeWidth>0&&this.ctx.stroke()}}drawSelectionHighlight(){const t=this.annotationManager.selectedAnnotation;if(!t)return;const e=this.annotationManager.recordList[t.index];if(!e)return;const n=this.annotationManager.selectionStyle;this.ctx.save(),"rect"===e.type?this.drawRectSelectionHighlight(e.data[0],n):"polygon"===e.type&&this.drawPolygonSelectionHighlight(e.data,n),this.ctx.restore()}drawRectSelectionHighlight(t,e){const n=this.viewport.offset.x+t.start.x*this.viewport.scale,i=this.viewport.offset.y+t.start.y*this.viewport.scale,s=t.width*this.viewport.scale,a=t.height*this.viewport.scale;this.ctx.fillStyle=e.fillColor,this.ctx.fillRect(n,i,s,a),this.ctx.strokeStyle=e.strokeColor,this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.strokeRect(n,i,s,a);const o=e.handleSize;this.ctx.fillStyle=e.handleColor,this.ctx.setLineDash([]),this.ctx.fillRect(n-o/2,i-o/2,o,o),this.ctx.fillRect(n+s-o/2,i-o/2,o,o),this.ctx.fillRect(n-o/2,i+a-o/2,o,o),this.ctx.fillRect(n+s-o/2,i+a-o/2,o,o)}drawPolygonSelectionHighlight(t,e){this.ctx.beginPath(),t.forEach((t,e)=>{const n=this.viewport.offset.x+t.point.x*this.viewport.scale,i=this.viewport.offset.y+t.point.y*this.viewport.scale;0===e?this.ctx.moveTo(n,i):this.ctx.lineTo(n,i)}),this.ctx.closePath(),this.ctx.fillStyle=e.fillColor,this.ctx.fill(),this.ctx.strokeStyle=e.strokeColor,this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.stroke();const n=e.handleSize;this.ctx.fillStyle=e.handleColor,this.ctx.setLineDash([]),t.forEach(t=>{const e=Math.round(this.viewport.offset.x+t.point.x*this.viewport.scale),i=Math.round(this.viewport.offset.y+t.point.y*this.viewport.scale);this.ctx.fillRect(e-n/2,i-n/2,n,n)})}drawTextAnnotations(){const t=this.textManager.textStyle;this.textManager.textAnnotations.forEach((e,n)=>{if(this.textManager.editingTextIndex===n&&this.textManager.textInput&&"none"!==this.textManager.textInput.style.display)return;if(!e.text)return;const i=e.style||{font:t.font,color:t.color,backgroundColor:t.backgroundColor},s=this.viewport.offset.x+e.position.x*this.viewport.scale,a=this.viewport.offset.y+e.position.y*this.viewport.scale,o=this.textManager.selectedTextIndex===n;this.ctx.font=i.font;const r=this.ctx.measureText(e.text),h=r.actualBoundingBoxAscent||.8*e.height,l=h+(r.actualBoundingBoxDescent||.2*e.height),c=t.borderRadius,d=s-t.padding,g=e.width+2*t.padding,x=l+2*t.padding,f=a-h-t.padding;this.ctx.fillStyle=i.backgroundColor,this.ctx.beginPath(),this.ctx.roundRect(d,f,g,x,c),this.ctx.fill(),o&&(this.ctx.strokeStyle=t.selectedBorderColor,this.ctx.lineWidth=2,this.ctx.setLineDash([5,5]),this.ctx.beginPath(),this.ctx.roundRect(d,f,g,x,c),this.ctx.stroke(),this.ctx.setLineDash([])),this.ctx.fillStyle=i.color,this.ctx.fillText(e.text,s,a)})}drawForExport(t,e,n,i){t.drawImage(e,0,0,n,i),this.annotationManager.recordList.forEach(e=>{const n=this.annotationManager.getAnnotationStyle(e);if(t.strokeStyle=n.strokeColor,t.lineWidth=n.lineWidth,"rect"===e.type){const n=e.data[0];t.strokeRect(n.start.x,n.start.y,n.width,n.height)}else if("polygon"===e.type&&"fullfilled"===e.status){t.beginPath(),e.data.forEach((e,n)=>{0===n?t.moveTo(e.point.x,e.point.y):t.lineTo(e.point.x,e.point.y)});const i=e.data[0];t.lineTo(i.point.x,i.point.y),t.stroke(),e.data.forEach(e=>{t.beginPath(),t.arc(e.point.x,e.point.y,4,0,2*Math.PI),t.fillStyle=n.strokeColor,t.fill()})}}),this.textManager.textAnnotations.forEach(e=>{const n=this.textManager.textStyle,i=e.style||{font:n.font,color:n.color,backgroundColor:n.backgroundColor};t.font=i.font;const s=t.measureText(e.text),a=s.actualBoundingBoxAscent||.8*e.height,o=a+(s.actualBoundingBoxDescent||.2*e.height),r=e.position.x-n.padding,h=e.width+2*n.padding,l=o+2*n.padding,c=e.position.y-a-n.padding,d=n.borderRadius;t.fillStyle=i.backgroundColor,t.roundRect?(t.roundRect(r,c,h,l,d),t.fill()):t.fillRect(r,c,h,l),t.fillStyle=i.color,t.fillText(e.text,e.position.x,e.position.y)})}}class d{constructor(t,e,n,i,s,a,o,r,h){this.canvas=t,this.viewport=e,this.annotationManager=n,this.textManager=i,this.renderer=s,this.getDrawType=a,this.getBgImage=o,this.renderCallback=r,this.setDrawTypeCallback=h,this.isDragging=!1,this.dragStart={x:0,y:0},this.justFinishedMove=!1,this.justDeselected=!1}handleWheel(t){if(t.preventDefault(),!this.getBgImage())return;const e=t.deltaY>0?-.02:.02,n=this.viewport.scale,i=Math.max(this.viewport.minScale,Math.min(n+e,this.viewport.maxScale)),s=this.canvas.getBoundingClientRect(),a=t.clientX-s.left,o=t.clientY-s.top,r=(a-this.viewport.offset.x)/n,h=(o-this.viewport.offset.y)/n;this.viewport.scale=i;const l=r*i+this.viewport.offset.x,c=h*i+this.viewport.offset.y;this.viewport.offset.x+=a-l,this.viewport.offset.y+=o-c,this.viewport.calculateBoundaries(),this.viewport.constrainViewport(),this.viewport.isInitialScale=this.viewport.scale===this.viewport.initialScale,this.renderCallback()}handleMouseDown(t){var e,n;if(0!==t.button)return;const i=this.getDrawType(),s=this.getBgImage();if(this.annotationManager.selectedAnnotation&&s){const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY),n=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(n)return this.annotationManager.startResizing(n,e),void this.renderCallback()}if("text"===i){const e=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==e)return this.textManager.selectedTextIndex===e?this.textManager.startMoving(t,e):(this.annotationManager.deselectAnnotation(),this.textManager.selectTextAnnotation(e)),void this.renderCallback();if(s){const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY),n=this.annotationManager.getAnnotationAtPoint(e);if("rect"===(null==n?void 0:n.type))return this.annotationManager.selectAnnotation(n.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback();const i=this.annotationManager.getAnnotationAtPoint(e);if("polygon"===(null==i?void 0:i.type))return this.annotationManager.selectAnnotation(i.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback();if(this.annotationManager.selectedAnnotation)return this.annotationManager.deselectAnnotation(),void this.renderCallback()}return null!==this.textManager.selectedTextIndex?(this.textManager.deselectTextAnnotation(),void this.renderCallback()):void this.handleTextModeClick(t)}if(!s)return;const a=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);if("rect"===i){if("rect"===(null===(e=this.annotationManager.selectedAnnotation)||void 0===e?void 0:e.type)){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e)return this.annotationManager.startResizing(e,a),void this.renderCallback();const n=this.annotationManager.getAnnotationAtPoint(a);return n&&"rect"===n.type?(this.annotationManager.selectAnnotation(n.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback()):(this.annotationManager.deselectAnnotation(),this.justDeselected=!0,void this.renderCallback())}const n=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==n)return this.textManager.selectedTextIndex===n?this.textManager.startMoving(t,n):(this.annotationManager.deselectAnnotation(),this.textManager.selectTextAnnotation(n)),void this.renderCallback();const i=this.annotationManager.getAnnotationAtPoint(a);if("polygon"===(null==i?void 0:i.type))return this.annotationManager.selectAnnotation(i.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback();const s=this.annotationManager.getAnnotationAtPoint(a);if("rect"===(null==s?void 0:s.type))return this.annotationManager.selectAnnotation(s.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback();this.annotationManager.startRectDrawing(a)}else if("polygon"===i){if("polygon"===(null===(n=this.annotationManager.selectedAnnotation)||void 0===n?void 0:n.type)){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e&&"polygon-vertex"===e.type)return this.annotationManager.startResizing(e,a),void this.renderCallback();const n=this.annotationManager.getAnnotationAtPoint(a);return n&&"polygon"===n.type?(this.annotationManager.selectAnnotation(n.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback()):(this.annotationManager.deselectAnnotation(),this.justDeselected=!0,void this.renderCallback())}const e=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==e)return this.textManager.selectedTextIndex===e?this.textManager.startMoving(t,e):(this.annotationManager.deselectAnnotation(),this.textManager.selectTextAnnotation(e)),void this.renderCallback();const i=this.annotationManager.getAnnotationAtPoint(a);if("rect"===(null==i?void 0:i.type))return this.annotationManager.selectAnnotation(i.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback();const s=this.annotationManager.getAnnotationAtPoint(a);if("polygon"===(null==s?void 0:s.type))return this.annotationManager.selectAnnotation(s.index),this.annotationManager.startMovingAnnotation(t),void this.renderCallback();this.annotationManager.isDrawing?this.checkPolygonPointValid(a)&&this.annotationManager.addPolygonPoint(a):this.annotationManager.startPolygonDrawing(a),this.annotationManager.updatePolygonTempPoint(a),this.renderCallback()}else if("drag"===i){if(this.annotationManager.selectedAnnotation){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e)return this.annotationManager.startResizing(e,a),void this.renderCallback()}const e=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==e)return this.textManager.selectedTextIndex===e?this.textManager.startMoving(t,e):(this.annotationManager.deselectAnnotation(),this.textManager.selectTextAnnotation(e)),void this.renderCallback();if(this.handleRectModeClick(t,a))return;if(this.handlePolygonModeClick(t,a))return;this.isDragging=!0,this.dragStart={x:t.clientX,y:t.clientY},this.canvas.style.cursor="grabbing"}else""===i&&this.handleNoModeClick(t,a)}checkTextClickInDragMode(t){return!!this.textManager.checkTextClickForMove(t).handled&&(this.canvas.style.cursor="grabbing",!0)}handleTextModeClick(t){const e=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==e)return this.textManager.startMoving(t,e),this.canvas.style.cursor="grabbing",this.renderCallback(),!0;const n=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);return this.textManager.addTextAnnotation(n.x,n.y),!0}handleRectModeClick(t,e){var n,i;if("rect"===(null===(n=this.annotationManager.selectedAnnotation)||void 0===n?void 0:n.type)){const n=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(n)return this.annotationManager.startResizing(n,e),this.renderCallback(),!0}const s=this.annotationManager.getAnnotationAtPoint(e);return s&&"rect"===s.type?(this.annotationManager.selectAnnotation(s.index),this.annotationManager.startMovingAnnotation(t),this.renderCallback(),!0):"rect"===(null===(i=this.annotationManager.selectedAnnotation)||void 0===i?void 0:i.type)&&(this.annotationManager.deselectAnnotation(),this.renderCallback(),!0)}handlePolygonModeClick(t,e){var n,i;if("polygon"===(null===(n=this.annotationManager.selectedAnnotation)||void 0===n?void 0:n.type)){const n=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(n&&"polygon-vertex"===n.type)return this.annotationManager.startResizing(n,e),this.renderCallback(),!0}const s=this.annotationManager.getAnnotationAtPoint(e);return s&&"polygon"===s.type?(this.annotationManager.selectAnnotation(s.index),this.annotationManager.startMovingAnnotation(t),this.renderCallback(),!0):"polygon"===(null===(i=this.annotationManager.selectedAnnotation)||void 0===i?void 0:i.type)&&(this.annotationManager.deselectAnnotation(),this.renderCallback(),!0)}handleRectModeClickForMove(t,e){const n=this.annotationManager.getAnnotationAtPoint(e);return!(!n||"rect"!==n.type)&&(this.annotationManager.selectAnnotation(n.index),this.annotationManager.startMovingAnnotation(t),this.renderCallback(),!0)}handlePolygonModeClickForMove(t,e){const n=this.annotationManager.getAnnotationAtPoint(e);return!(!n||"polygon"!==n.type)&&(this.annotationManager.selectAnnotation(n.index),this.annotationManager.startMovingAnnotation(t),this.renderCallback(),!0)}handleNoModeClick(t,e){const n=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==n)return this.textManager.selectedTextIndex===n?this.textManager.startMoving(t,n):(this.annotationManager.deselectAnnotation(),this.textManager.selectTextAnnotation(n)),void this.renderCallback();this.textManager.deselectTextAnnotation();const i=this.annotationManager.getAnnotationAtPoint(e);i?(this.annotationManager.selectAnnotation(i.index),this.annotationManager.startMovingAnnotation(t),this.renderCallback()):this.annotationManager.deselectAnnotation()}checkPolygonPointValid(t){const e=this.annotationManager.operate.data.length>0?this.annotationManager.operate.data[this.annotationManager.operate.data.length-1]:null;return!e||Math.abs(e.point.x-t.x)>5||Math.abs(e.point.y-t.y)>5}handleMouseMove(t){if(!this.getBgImage())return;const e=this.getDrawType();if(this.isDragging&&"drag"===e){const e=t.clientX-this.dragStart.x,n=t.clientY-this.dragStart.y;return this.viewport.updateOffset(e,n),this.dragStart={x:t.clientX,y:t.clientY},void this.renderCallback()}if(this.textManager.isTextMoving&&null!==this.textManager.editingTextIndex)this.textManager.moveAnnotation(t)&&this.renderCallback();else if((this.annotationManager.isMovingAnnotation||this.annotationManager.isResizing)&&this.annotationManager.selectedAnnotation)this.handleAnnotationMove(t);else{if(this.annotationManager.isMovingAnnotation||this.annotationManager.isResizing||this.textManager.isTextMoving||this.updateCursor(t),this.annotationManager.isDrawing&&"rect"===this.annotationManager.operate.type){const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);this.annotationManager.updateRectDrawing(e),this.renderCallback()}if("polygon"===e&&this.annotationManager.isDrawing){const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);this.annotationManager.updatePolygonTempPoint(e),this.renderCallback()}}}handleAnnotationMove(t){var e,n;if(this.annotationManager.isResizing&&this.annotationManager.activeHandle){const i=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);return"rect"===(null===(e=this.annotationManager.selectedAnnotation)||void 0===e?void 0:e.type)?this.annotationManager.resizeRect(i):"polygon"===(null===(n=this.annotationManager.selectedAnnotation)||void 0===n?void 0:n.type)&&this.annotationManager.resizePolygon(i),void this.renderCallback()}if(!this.annotationManager.isMovingAnnotation||!this.annotationManager.selectedAnnotation)return;const i=(t.clientX-this.annotationManager.annotationMoveStart.x)/this.viewport.scale,s=(t.clientY-this.annotationManager.annotationMoveStart.y)/this.viewport.scale;this.annotationManager.moveSelectedAnnotation(i,s),this.annotationManager.annotationMoveStart={x:t.clientX,y:t.clientY},this.renderCallback()}updateCursor(t){const e=this.getDrawType();if("text"===e){if(this.getBgImage()){const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);if(this.annotationManager.selectedAnnotation){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e)return void("rect-corner"===e.type?this.canvas.style.cursor=0===e.index||3===e.index?"nwse-resize":"nesw-resize":this.canvas.style.cursor="crosshair")}if(this.annotationManager.getAnnotationAtPoint(e))return void(this.canvas.style.cursor="move")}const e=this.textManager.checkTextClick(t.offsetX,t.offsetY);return void(this.canvas.style.cursor=null!==e?"move":"crosshair")}"rect"!==e?"polygon"!==e?"drag"!==e?""!==e?this.canvas.style.cursor="default":this.updateNoModeCursor(t):this.updateDragModeCursor(t):this.updatePolygonModeCursor(t):this.updateRectModeCursor(t)}updateRectModeCursor(t){var e;if("rect"===(null===(e=this.annotationManager.selectedAnnotation)||void 0===e?void 0:e.type)){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e)return void(this.canvas.style.cursor=0===e.index||3===e.index?"nwse-resize":"nesw-resize")}const n=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);this.annotationManager.getAnnotationAtPoint(n)?this.canvas.style.cursor="move":null===this.textManager.checkTextClick(t.offsetX,t.offsetY)?this.canvas.style.cursor="crosshair":this.canvas.style.cursor="move"}updatePolygonModeCursor(t){var e;if("polygon"===(null===(e=this.annotationManager.selectedAnnotation)||void 0===e?void 0:e.type)){if(this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY))return void(this.canvas.style.cursor="crosshair")}const n=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);this.annotationManager.getAnnotationAtPoint(n)?this.canvas.style.cursor="move":null===this.textManager.checkTextClick(t.offsetX,t.offsetY)?this.canvas.style.cursor="crosshair":this.canvas.style.cursor="move"}updateDragModeCursor(t){if(this.annotationManager.selectedAnnotation){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e)return void("rect-corner"===e.type?this.canvas.style.cursor=0===e.index||3===e.index?"nwse-resize":"nesw-resize":this.canvas.style.cursor="crosshair")}if(null!==this.textManager.checkTextClick(t.offsetX,t.offsetY))return void(this.canvas.style.cursor="move");const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY),n=this.annotationManager.getAnnotationAtPoint(e);this.canvas.style.cursor=n?"move":"grab"}updateNoModeCursor(t){if(this.annotationManager.selectedAnnotation){const e=this.annotationManager.getHandleAtPoint(t.offsetX,t.offsetY);if(e)return void("rect-corner"===e.type?this.canvas.style.cursor=0===e.index||3===e.index?"nwse-resize":"nesw-resize":this.canvas.style.cursor="crosshair")}if(null!==this.textManager.checkTextClick(t.offsetX,t.offsetY))return void(this.canvas.style.cursor="move");const e=this.viewport.toImageCoordinates(t.offsetX,t.offsetY),n=this.annotationManager.getAnnotationAtPoint(e);this.canvas.style.cursor=n?"move":"default"}handleMouseUp(t){if(this.isDragging){this.isDragging=!1;const t=this.getDrawType();return void(this.canvas.style.cursor="drag"===t?"grab":"default")}if(this.textManager.isTextMoving){this.justFinishedMove=!0,this.textManager.finishMoving();const t=this.getDrawType();"drag"===t?this.canvas.style.cursor="grab":""===t?this.canvas.style.cursor="move":(this.textManager.editingTextIndex=null,this.canvas.style.cursor="default")}(this.annotationManager.isMovingAnnotation||this.annotationManager.isResizing)&&(this.justFinishedMove=!0,this.annotationManager.finishMovingAnnotation(),this.canvas.style.cursor=this.annotationManager.selectedAnnotation?"move":"default"),this.annotationManager.isDrawing&&"rect"===this.annotationManager.operate.type&&(this.annotationManager.finishRectDrawing(),this.renderCallback())}handleMouseLeave(t){(this.isDragging||this.textManager.isTextMoving||this.annotationManager.isResizing||this.annotationManager.isMovingAnnotation)&&this.handleMouseUp(t)}handleDoubleClick(t){if(!this.getBgImage())return;this.justFinishedMove=!1;const e=this.textManager.checkTextClick(t.offsetX,t.offsetY);if(null!==e)return void this.textManager.startEditing(e);if("polygon"===this.getDrawType()){if(this.annotationManager.isDrawing&&this.annotationManager.operate.data.length<=2)return;this.annotationManager.finishPolygonDrawing(),this.renderCallback()}}handleClick(t){var e;const n=this.getDrawType();if(!this.getBgImage()||"polygon"!==n||this.isDragging||this.annotationManager.isMovingAnnotation||this.annotationManager.isResizing||this.textManager.isTextMoving)return;if(this.justDeselected)return void(this.justDeselected=!1);if("polygon"===(null===(e=this.annotationManager.selectedAnnotation)||void 0===e?void 0:e.type))return;const i=this.viewport.toImageCoordinates(t.offsetX,t.offsetY);this.checkPolygonPointValid(i)&&(this.annotationManager.isDrawing?this.annotationManager.addPolygonPoint(i):this.annotationManager.startPolygonDrawing(i)),this.annotationManager.updatePolygonTempPoint(i),this.renderCallback()}handleKeyDown(t){if("z"===t.key&&(t.ctrlKey||t.metaKey))return this.annotationManager.withdraw()||this.textManager.withdraw(),void this.renderCallback();if(" "===t.key)return this.viewport.resetToInitial(),void this.renderCallback();if("Escape"!==t.key){if("Delete"===t.key||"Backspace"===t.key){if(null!==this.textManager.editingTextIndex)return this.textManager.removeTextAnnotation(this.textManager.editingTextIndex),void this.renderCallback();if(null!==this.textManager.selectedTextIndex)return this.textManager.deleteSelectedTextAnnotation(),void this.renderCallback();this.annotationManager.selectedAnnotation&&(this.annotationManager.deleteSelectedAnnotation(),this.renderCallback())}}else this.annotationManager.isDrawing?(this.annotationManager.cancelDrawing(),this.renderCallback()):this.annotationManager.selectedAnnotation&&(this.annotationManager.deselectAnnotation(),this.renderCallback())}}class g{constructor(t){this.canvas=document.createElement("canvas"),this.bgImage=null,this.bgImageSrc="",this.bgImageExt="jpeg",this.drawType="";const{drawType:e,useEvents:n=!0,id:i="container",annotationColor:s,lineStyle:a,vertexStyle:o,textStyle:g}=t,x=document.getElementById(i);if(!x)throw new Error(`Container with id "${i}" not found`);this.container=x,"absolute"!==x.style.position&&"fixed"!==x.style.position&&"relative"!==x.style.position&&(x.style.position="relative"),this.ctx=this.canvas.getContext("2d"),this.viewport=new r,this.viewport.setSize(x.clientWidth,x.clientHeight),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",x.appendChild(this.canvas),this.annotationManager=new h(this.viewport),s&&this.annotationManager.setColorConfig(s),a&&this.annotationManager.setLineStyle(a),o&&this.annotationManager.setVertexStyle(o),this.textManager=new l(this.viewport,this.container,this.ctx,()=>this.render()),g&&this.textManager.setTextStyle(g),this.renderer=new c(this.ctx,this.viewport,this.annotationManager,this.textManager,this.canvas),this.eventHandler=new d(this.canvas,this.viewport,this.annotationManager,this.textManager,this.renderer,()=>this.drawType,()=>this.bgImage,()=>this.render(),t=>this.setDrawType(t)),this.events={wheel:t=>this.eventHandler.handleWheel(t),mousedown:t=>this.eventHandler.handleMouseDown(t),mousemove:t=>this.eventHandler.handleMouseMove(t),mouseup:t=>this.eventHandler.handleMouseUp(t),mouseleave:t=>this.eventHandler.handleMouseLeave(t),dblclick:t=>this.eventHandler.handleDoubleClick(t),click:t=>this.eventHandler.handleClick(t),keydown:t=>this.eventHandler.handleKeyDown(t)},this.setDrawType(e||""),n&&this.addEventListeners()}setDrawType(t){"polygon"===this.drawType&&this.annotationManager.isDrawing&&this.annotationManager.operate.data.length>0?console.warn("Cannot switch mode while polygon is being drawn. Please complete or cancel the polygon first."):this.drawType!==t&&(this.annotationManager.operate.data=[],this.annotationManager.isDrawing=!1,this.annotationManager.tempPolygonPoint=null,""!==t&&this.deselectAnnotation(),this.annotationManager.operate.type=t,this.drawType=t,this.canvas.style.cursor="drag"===t?"grab":"text"===t?"text":"default")}drawImage(t){this.bgImageSrc=t,this.bgImageExt=i(t);const e=new Image;e.crossOrigin="anonymous",e.src=t,e.onload=()=>{this.bgImage=e,this.viewport.setOriginalSize(e.width,e.height),this.viewport.calculateInitialView(),this.render()}}render(){this.renderer.render(this.bgImage)}clear(t=""){this.annotationManager.clear(),this.textManager.clearTextAnnotations(),this.setDrawType(t),this.render()}withdraw(){const t=this.annotationManager.withdraw(),e=this.textManager.withdraw();(t||e)&&this.render()}resize(){const t=this.canvas.parentElement;t&&(this.viewport.setSize(t.clientWidth,t.clientHeight),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.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",t=>t.preventDefault()),document.addEventListener("keydown",this.events.keydown),this.handleClickEventListener()}handleClickEventListener(){let t=null,e=0;this.canvas.addEventListener("click",n=>{if(this.eventHandler.isDragging||this.annotationManager.isMovingAnnotation||this.annotationManager.isResizing||this.textManager.isTextMoving)return;const i=this.eventHandler.justFinishedMove;i&&(this.eventHandler.justFinishedMove=!1),e++,1===e?t=window.setTimeout(()=>{1!==e||i||this.events.click(n),e=0,t=null},300):2===e&&(this.eventHandler.justFinishedMove=!1,this.events.dblclick(n),e=0,null!==t&&(clearTimeout(t),t=null))})}changeScale(t){if(!this.bgImage)return;const e=o(this.viewport.scale,t),n=this.viewport.width/2,i=this.viewport.height/2,s=this.viewport.scale+e;this.viewport.updateScale(s,n,i),this.render()}clearCanvas(t=!1,e=!0){this.annotationManager.clear(),this.textManager.clearTextAnnotations(),this.textManager.deselectTextAnnotation(),!t&&e&&(this.bgImage=null,this.bgImageSrc="",this.viewport.setOriginalSize(0,0),this.viewport.reset()),this.ctx.clearRect(0,0,this.viewport.width,this.viewport.height),t&&this.bgImage&&this.render(),"drag"===this.drawType&&(this.canvas.style.cursor="default")}clearAnnotations(){this.clearCanvas(!0,!1)}getAnnotations(){return this.annotationManager.getAnnotations()}getTextAnnotations(){return this.textManager.getTextAnnotations()}exportAnnotationImage(){return new Promise((t,e)=>{if(!this.bgImage)return void e(new Error("No background image loaded"));const n=document.createElement("canvas");n.width=this.viewport.originalWidth,n.height=this.viewport.originalHeight;const i=n.getContext("2d");if(!i)return void e(new Error("Could not create offscreen canvas context"));const s=new Image;s.src=this.bgImageSrc,s.crossOrigin="anonymous",s.onload=()=>{try{this.renderer.drawForExport(i,s,this.viewport.originalWidth,this.viewport.originalHeight);const e=n.toDataURL(`image/${this.bgImageExt}`,.7);t(e)}catch(n){this.exportCurrentViewImage().then(t).catch(t=>e(new Error(`Both methods failed: ${t.message}`)))}},s.onerror=()=>{e(new Error("Failed to load image for export"))}})}exportCurrentViewImage(){return new Promise((t,e)=>{try{t(this.canvas.toDataURL(`image/${this.bgImageExt}`))}catch(t){e(new Error(`Failed to export current view: ${t.message}`))}})}base64ToFile(t,e){return s(t,e)}static base64ToBlob(t){return a(t)}addTextAnnotation(t,e,n=""){this.textManager.addTextAnnotation(t,e,n),this.render()}updateTextAnnotation(t,e){this.textManager.updateTextAnnotation(t,e)&&this.render()}moveTextAnnotation(t,e,n){this.textManager.moveTextAnnotation(t,e,n)&&this.render()}removeTextAnnotation(t){this.textManager.removeTextAnnotation(t)&&this.render()}clearTextAnnotations(){this.textManager.clearTextAnnotations(),this.render()}selectAnnotation(t){this.annotationManager.selectAnnotation(t)&&this.render()}deselectAnnotation(){this.annotationManager.deselectAnnotation(),this.textManager.deselectTextAnnotation(),this.textManager.editingTextIndex=null,this.render()}getSelectedAnnotation(){const t=this.annotationManager.getSelectedAnnotation();if(t)return t;const e=this.textManager.getSelectedTextAnnotation();return e?{index:e.index,type:"text",data:e.data}:null}deleteSelectedAnnotation(){if(null!==this.textManager.selectedTextIndex)return this.textManager.deleteSelectedTextAnnotation(),void this.render();this.annotationManager.deleteSelectedAnnotation()&&this.render()}moveSelectedAnnotation(t,e){this.annotationManager.moveSelectedAnnotation(t,e)&&this.render()}setAnnotationColor(t){this.annotationManager.setColorConfig(t),this.render()}getAnnotationColor(){return this.annotationManager.getColorConfig()}updateSelectedAnnotationStyle(){const t=this.annotationManager.selectedAnnotation;if(!t)return!1;const e=this.annotationManager.recordList[t.index];return!!e&&(e.style=this.annotationManager.getCurrentStyle(),this.render(),!0)}setLineStyle(t){this.annotationManager.setLineStyle(t),this.render()}getLineStyle(){return this.annotationManager.getLineStyle()}setVertexStyle(t){this.annotationManager.setVertexStyle(t),this.render()}getVertexStyle(){return this.annotationManager.getVertexStyle()}setTextStyle(t){this.textManager.setTextStyle(t),this.render()}setTextInputStyle(t){this.textManager.setInputStyle(t)}setTextSelectionStyle(t){this.textManager.setSelectionStyle(t),this.render()}destroy(){this.textManager.destroy(),this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}t.AnnotationManager=h,t.Drawer=g,t.EventHandler=d,t.Renderer=c,t.TextAnnotationManager=l,t.ViewportManager=r,t.base64ToBlob=a,t.base64ToFile=s,t.default=g,t.getImageTypeFromUrl=i,t.getZoomDelta=o,t.isPointInPolygon=n,t.isPointInRect=e,Object.defineProperty(t,"__esModule",{value:!0})}),"undefined"!=typeof ImageAnnotationDrawer&&ImageAnnotationDrawer.default&&(ImageAnnotationDrawer=ImageAnnotationDrawer.default);