image-annotation-drawer 1.0.0 → 1.0.1

package/dist/index.esm.js

@@ -1,3310 +1 @@
-/**
- * 工具函数模块
- * 包含几何计算、坐标转换等通用工具函数
- */
-/**
- * 检测点是否在矩形内
- * 支持负宽高的情况（从右下往左上画）
- */
-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);
-        }
-    }
-}
-
-export { AnnotationManager, Drawer, EventHandler, Renderer, TextAnnotationManager, ViewportManager, base64ToBlob, base64ToFile, Drawer as default, getImageTypeFromUrl, getZoomDelta, isPointInPolygon, isPointInRect };
-//# sourceMappingURL=index.esm.js.map
+function t(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 e(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 n(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 i(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 s(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 a(t,e){return t<2?e?.1:-.1:t<5?e?.05:-.05:e?.02:-.02}class o{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 r{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(n){for(let i=this.recordList.length-1;i>=0;i--){const s=this.recordList[i];if("rect"===s.type){if(t(n,s.data[0]))return{index:i,type:"rect"}}else if("polygon"===s.type){if(e(n,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 h{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 l{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 c{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 d{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:d,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 o,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 r(this.viewport),s&&this.annotationManager.setColorConfig(s),a&&this.annotationManager.setLineStyle(a),d&&this.annotationManager.setVertexStyle(d),this.textManager=new h(this.viewport,this.container,this.ctx,()=>this.render()),g&&this.textManager.setTextStyle(g),this.renderer=new l(this.ctx,this.viewport,this.annotationManager,this.textManager,this.canvas),this.eventHandler=new c(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=n(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()}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=a(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 i(t,e)}static base64ToBlob(t){return s(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)}}export{r as AnnotationManager,d as Drawer,c as EventHandler,l as Renderer,h as TextAnnotationManager,o as ViewportManager,s as base64ToBlob,i as base64ToFile,d as default,n as getImageTypeFromUrl,a as getZoomDelta,e as isPointInPolygon,t as isPointInRect};