luo-image-annotator 0.0.3 → 0.0.5

package/dist/luo-image-annotator.es.js

@@ -1,71 +1,72 @@
-var rt = Object.defineProperty;
-var ct = (v, t, e) => t in v ? rt(v, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[t] = e;
-var b = (v, t, e) => ct(v, typeof t != "symbol" ? t + "" : t, e);
-import { defineComponent as R, ref as C, watchEffect as ht, openBlock as p, createElementBlock as x, normalizeClass as T, computed as gt, onMounted as dt, watch as q, createElementVNode as h, createVNode as S, Fragment as P, renderList as D, createCommentVNode as H, normalizeStyle as j, toDisplayString as z, createTextVNode as F, withDirectives as N, vModelText as J, createBlock as Y, nextTick as vt } from "vue";
-const W = (v, t) => Math.sqrt(Math.pow(v.x - t.x, 2) + Math.pow(v.y - t.y, 2)), ut = (v, t) => {
-  let e = !1;
-  for (let s = 0, a = t.length - 1; s < t.length; a = s++) {
-    const n = t[s].x, o = t[s].y, i = t[a].x, r = t[a].y;
-    o > v.y != r > v.y && v.x < (i - n) * (v.y - o) / (r - o) + n && (e = !e);
+var Jt = Object.defineProperty;
+var jt = (m, t, i) => t in m ? Jt(m, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : m[t] = i;
+var _ = (m, t, i) => jt(m, typeof t != "symbol" ? t + "" : t, i);
+import { defineComponent as X, ref as I, watchEffect as Xt, openBlock as p, createElementBlock as b, normalizeClass as U, computed as ct, onMounted as Yt, watch as V, createElementVNode as g, toDisplayString as P, Fragment as T, renderList as D, normalizeStyle as F, createCommentVNode as H, createVNode as $, createTextVNode as N, withDirectives as Z, vModelText as G, createBlock as ht, nextTick as qt } from "vue";
+const Q = (m, t) => Math.sqrt(Math.pow(m.x - t.x, 2) + Math.pow(m.y - t.y, 2)), Kt = (m, t) => {
+  let i = !1;
+  for (let n = 0, r = t.length - 1; n < t.length; r = n++) {
+    const o = t[n].x, c = t[n].y, a = t[r].x, d = t[r].y;
+    c > m.y != d > m.y && m.x < (a - o) * (m.y - c) / (d - c) + o && (i = !i);
   }
-  return e;
-}, K = (v, t, e) => {
-  const s = e * (Math.PI / 180), a = Math.cos(s), n = Math.sin(s), o = v.x - t.x, i = v.y - t.y;
+  return i;
+}, dt = (m, t, i) => {
+  const n = i * (Math.PI / 180), r = Math.cos(n), o = Math.sin(n), c = m.x - t.x, a = m.y - t.y;
   return {
-    x: t.x + (o * a - i * n),
-    y: t.y + (o * n + i * a)
+    x: t.x + (c * r - a * o),
+    y: t.y + (c * o + a * r)
   };
 };
-class mt {
+class Zt {
   constructor(t) {
-    b(this, "canvas");
-    b(this, "ctx");
-    b(this, "img");
-    b(this, "annotations", []);
+    _(this, "canvas");
+    _(this, "ctx");
+    _(this, "img");
+    _(this, "annotations", []);
     // 状态
-    b(this, "currentTool", null);
-    b(this, "activeAnnotation", null);
-    b(this, "hoverAnnotation", null);
-    b(this, "isDrawing", !1);
-    b(this, "isDragging", !1);
-    b(this, "isPanning", !1);
+    _(this, "currentTool", null);
+    _(this, "interactionMode", "none");
+    _(this, "activeAnnotation", null);
+    _(this, "hoverAnnotation", null);
+    _(this, "isDrawing", !1);
+    _(this, "isDragging", !1);
+    _(this, "isPanning", !1);
     // 平移模式
-    b(this, "panStartPoint", null);
+    _(this, "panStartPoint", null);
     // 平移起点
-    b(this, "dragStartPoint", null);
-    b(this, "dragStartAnnotation", null);
+    _(this, "dragStartPoint", null);
+    _(this, "dragStartAnnotation", null);
     // 快照用于撤销/diff
-    b(this, "lastMouseMovePoint", null);
+    _(this, "lastMouseMovePoint", null);
     // 用于绘制辅助线
-    b(this, "isHoveringStartPoint", !1);
+    _(this, "isHoveringStartPoint", !1);
     // 多边形闭合吸附状态
     // 设置
-    b(this, "currentLabelColor", "#FF4081");
+    _(this, "currentLabelColor", "#FF4081");
     // 当前选中标签颜色
-    b(this, "visibleLabels", /* @__PURE__ */ new Set());
+    _(this, "visibleLabels", /* @__PURE__ */ new Set());
     // 可见标签集合 (如果为空则全部可见，或者由外部控制渲染列表)
     // 交互
-    b(this, "selectedHandleIndex", -1);
+    _(this, "selectedHandleIndex", -1);
     // -1: 主体, >=0: 顶点索引, -2: 旋转手柄
-    b(this, "hoverHandleIndex", -1);
+    _(this, "hoverHandleIndex", -1);
     // 视口
-    b(this, "scale", 1);
-    b(this, "offset", { x: 0, y: 0 });
-    b(this, "listeners", {});
-    b(this, "imageUrl", "");
+    _(this, "scale", 1);
+    _(this, "offset", { x: 0, y: 0 });
+    _(this, "listeners", {});
+    _(this, "imageUrl", "");
     this.canvas = t;
-    const e = t.getContext("2d");
-    if (!e) throw new Error("Could not get 2d context");
-    this.ctx = e, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
+    const i = t.getContext("2d");
+    if (!i) throw new Error("Could not get 2d context");
+    this.ctx = i, this.img = new Image(), this.img.crossOrigin = "Anonymous", this.img.onload = () => {
       this.fitImageToCanvas(), this.render();
     }, this.bindEvents();
   }
   // --- 公共 API ---
-  on(t, e) {
-    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(e);
+  on(t, i) {
+    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(i);
   }
-  emit(t, e) {
-    this.listeners[t] && this.listeners[t].forEach((s) => s(e));
+  emit(t, i) {
+    this.listeners[t] && this.listeners[t].forEach((n) => n(i));
   }
   loadImage(t) {
     this.imageUrl = t, this.img.src = t, this.activeAnnotation = null, this.isDrawing = !1;
@@ -77,7 +78,7 @@ class mt {
     return this.annotations;
   }
   setTool(t) {
-    t === "pan" ? (this.currentTool = null, this.isPanning = !1, this.canvas.style.cursor = "grab") : t === "select" ? (this.currentTool = null, this.canvas.style.cursor = "default") : (this.currentTool = t, this.canvas.style.cursor = "crosshair"), this.activeAnnotation = null, this.isDrawing = !1, this.render();
+    t === "pan" ? (this.interactionMode = "pan", this.currentTool = null, this.isPanning = !1, this.canvas.style.cursor = "grab") : t === "select" ? (this.interactionMode = "select", this.currentTool = null, this.canvas.style.cursor = "default") : t ? (this.interactionMode = "draw", this.currentTool = t, this.canvas.style.cursor = "crosshair") : (this.interactionMode = "none", this.currentTool = null, this.canvas.style.cursor = "default"), this.activeAnnotation = null, this.isDrawing = !1, this.render();
   }
   setLabelStyle(t) {
     this.currentLabelColor = t;
@@ -86,33 +87,33 @@ class mt {
     this.visibleLabels = new Set(t), this.render();
   }
   zoom(t) {
-    const s = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
-    if (s < 0.1 || s > 10) return;
-    const a = this.canvas.width / 2, n = this.canvas.height / 2, o = this.toImageCoords(a, n);
-    this.scale = s, this.offset.x = a - o.x * this.scale, this.offset.y = n - o.y * this.scale, this.render();
+    const n = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
+    if (n < 0.1 || n > 10) return;
+    const r = this.canvas.width / 2, o = this.canvas.height / 2, c = this.toImageCoords(r, o);
+    this.scale = n, this.offset.x = r - c.x * this.scale, this.offset.y = o - c.y * this.scale, this.render();
   }
   resize() {
     this.fitImageToCanvas(), this.render();
   }
   // --- 坐标系统 ---
-  toImageCoords(t, e) {
+  toImageCoords(t, i) {
     return {
       x: (t - this.offset.x) / this.scale,
-      y: (e - this.offset.y) / this.scale
+      y: (i - this.offset.y) / this.scale
     };
   }
-  toScreenCoords(t, e) {
+  toScreenCoords(t, i) {
     return {
       x: t * this.scale + this.offset.x,
-      y: e * this.scale + this.offset.y
+      y: i * this.scale + this.offset.y
     };
   }
   fitImageToCanvas() {
     const t = this.canvas.parentElement;
     if (t) {
       if (this.canvas.width = t.clientWidth, this.canvas.height = t.clientHeight, this.img.width === 0) return;
-      const e = this.canvas.width / this.img.width, s = this.canvas.height / this.img.height;
-      this.scale = Math.min(e, s), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2;
+      const i = this.canvas.width / this.img.width, n = this.canvas.height / this.img.height;
+      this.scale = Math.min(i, n), this.offset.x = (this.canvas.width - this.img.width * this.scale) / 2, this.offset.y = (this.canvas.height - this.img.height * this.scale) / 2;
     }
   }
   // --- 事件处理 ---
@@ -120,85 +121,87 @@ class mt {
     this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this)), this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this)), this.canvas.addEventListener("mouseup", this.handleMouseUp.bind(this)), this.canvas.addEventListener("mouseleave", this.handleMouseUp.bind(this)), window.addEventListener("keydown", this.handleKeyDown.bind(this));
   }
   handleKeyDown(t) {
-    (t.key === "Delete" || t.key === "Backspace") && this.activeAnnotation && this.deleteAnnotation(this.activeAnnotation.id);
+    this.interactionMode === "select" && (t.key === "Delete" || t.key === "Backspace") && this.activeAnnotation && this.deleteAnnotation(this.activeAnnotation.id);
   }
   deleteAnnotation(t) {
-    const e = this.annotations.findIndex((s) => s.id === t);
-    if (e > -1) {
-      const s = this.annotations[e];
-      this.annotations.splice(e, 1), this.activeAnnotation = null, this.emit("annotationChange", {
+    const i = this.annotations.findIndex((n) => n.id === t);
+    if (i > -1) {
+      const n = this.annotations[i];
+      this.annotations.splice(i, 1), this.activeAnnotation = null, this.emit("annotationChange", {
         action: "delete",
-        changedItem: s,
+        changedItem: n,
         imageUrl: this.imageUrl
       }), this.render();
     }
   }
   handleMouseDown(t) {
-    const e = this.canvas.getBoundingClientRect(), s = t.clientX - e.left, a = t.clientY - e.top, n = this.toImageCoords(s, a);
+    const i = this.canvas.getBoundingClientRect(), n = t.clientX - i.left, r = t.clientY - i.top, o = this.toImageCoords(n, r);
     if (this.canvas.style.cursor === "grab" || this.canvas.style.cursor === "grabbing") {
-      this.isPanning = !0, this.panStartPoint = { x: s, y: a }, this.canvas.style.cursor = "grabbing";
+      this.isPanning = !0, this.panStartPoint = { x: n, y: r }, this.canvas.style.cursor = "grabbing";
       return;
     }
-    if (this.activeAnnotation) {
-      const r = this.getHitHandle(s, a, this.activeAnnotation);
-      if (r !== -100) {
-        this.isDragging = !0, this.dragStartPoint = n, this.selectedHandleIndex = r, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
+    if (this.interactionMode === "select" && this.activeAnnotation) {
+      const d = this.getHitHandle(n, r, this.activeAnnotation);
+      if (d !== -100) {
+        this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = d, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
         return;
       }
     }
-    const o = this.getHitCategory(s, a);
-    if (o) {
-      this.activeAnnotation = o, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: o, imageUrl: this.imageUrl }), this.render();
+    const c = this.interactionMode === "select" ? this.getHitCategory(n, r) : null;
+    if (c) {
+      this.activeAnnotation = c, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: c, imageUrl: this.imageUrl }), this.render();
       return;
     }
-    const i = this.getHitAnnotation(n);
-    if (this.currentTool) {
+    const a = this.getHitAnnotation(o);
+    if (this.interactionMode === "select") {
+      if (a) {
+        if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(a.label))) {
+          this.activeAnnotation = a, this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(a)), this.emit("annotationChange", { action: "select", changedItem: a, imageUrl: this.imageUrl }), this.render();
+          return;
+        }
+      } else
+        this.activeAnnotation = null, this.emit("annotationChange", { action: "select", changedItem: void 0, imageUrl: this.imageUrl }), this.render();
+      return;
+    }
+    if (this.interactionMode === "draw") {
       if (this.isDrawing && this.currentTool === "polygon" && this.activeAnnotation) {
-        const r = this.activeAnnotation.coordinates;
-        if (r.points.length > 2 && W(n, r.points[0]) < 20 / this.scale) {
+        const d = this.activeAnnotation.coordinates;
+        if (d.points.length > 2 && Q(o, d.points[0]) < 20 / this.scale) {
           this.finishDrawing();
           return;
         }
-        this.startDrawing(n);
+        this.startDrawing(o);
         return;
       }
       if (this.currentTool) {
         if (this.currentTool === "polygon" && !this.isDrawing) {
-          this.startDrawing(n);
-          return;
-        }
-        if (i) {
-          this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = n, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render();
+          this.startDrawing(o);
           return;
         }
-        this.startDrawing(n);
-      } else i ? (this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = n, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render()) : (this.activeAnnotation = null, this.render());
-    } else if (i) {
-      if (!(this.visibleLabels.size > 0 && !this.visibleLabels.has(i.label))) {
-        this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = n, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render();
-        return;
+        this.startDrawing(o);
       }
-    } else
-      this.activeAnnotation = null, this.render();
+      return;
+    }
+    this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const e = this.canvas.getBoundingClientRect(), s = t.clientX - e.left, a = t.clientY - e.top, n = this.toImageCoords(s, a);
+    const i = this.canvas.getBoundingClientRect(), n = t.clientX - i.left, r = t.clientY - i.top, o = this.toImageCoords(n, r);
     if (this.isPanning && this.panStartPoint) {
-      const o = s - this.panStartPoint.x, i = a - this.panStartPoint.y;
-      this.offset.x += o, this.offset.y += i, this.panStartPoint = { x: s, y: a }, this.render();
+      const c = n - this.panStartPoint.x, a = r - this.panStartPoint.y;
+      this.offset.x += c, this.offset.y += a, this.panStartPoint = { x: n, y: r }, this.render();
       return;
     }
-    if (this.lastMouseMovePoint = n, this.isDrawing) {
+    if (this.lastMouseMovePoint = o, this.isDrawing) {
       if (this.currentTool === "polygon" && this.activeAnnotation) {
-        const o = this.activeAnnotation.coordinates;
-        if (o.points.length > 2) {
-          const i = o.points[0], r = W(n, i);
-          this.isHoveringStartPoint = r < 20 / this.scale;
+        const c = this.activeAnnotation.coordinates;
+        if (c.points.length > 2) {
+          const a = c.points[0], d = Q(o, a);
+          this.isHoveringStartPoint = d < 20 / this.scale;
         } else
           this.isHoveringStartPoint = !1;
       }
-      this.updateDrawing(n);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(n) : this.checkHover(s, a, n);
+      this.updateDrawing(o);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(n, r, o);
     this.render();
   }
   handleMouseUp(t) {
@@ -221,17 +224,17 @@ class mt {
   }
   // --- 绘制逻辑 ---
   // 辅助函数：将 hex 转换为 rgba
-  hexToRgba(t, e) {
+  hexToRgba(t, i) {
     if (!t.startsWith("#")) return t;
-    const s = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), n = parseInt(t.slice(5, 7), 16);
-    return `rgba(${s}, ${a}, ${n}, ${e})`;
+    const n = parseInt(t.slice(1, 3), 16), r = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
+    return `rgba(${n}, ${r}, ${o}, ${i})`;
   }
   startDrawing(t) {
     if (!this.currentTool) return;
-    const e = Date.now().toString();
+    const i = Date.now().toString();
     if (this.hexToRgba(this.currentLabelColor, 0.2), this.currentLabelColor, this.currentTool === "rectangle")
       this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
-        id: e,
+        id: i,
         type: "rectangle",
         label: "",
         // 组件应填充此项
@@ -239,25 +242,25 @@ class mt {
         style: { strokeColor: this.currentLabelColor }
       };
     else if (this.currentTool === "point") {
-      const s = {
-        id: e,
+      const n = {
+        id: i,
         type: "point",
         label: "",
         coordinates: { points: [t] },
         style: { strokeColor: this.currentLabelColor }
       };
-      this.annotations.push(s), this.emit("annotationChange", { action: "add", changedItem: s, imageUrl: this.imageUrl }), this.activeAnnotation = s;
+      this.annotations.push(n), this.emit("annotationChange", { action: "add", changedItem: n, imageUrl: this.imageUrl }), this.activeAnnotation = n;
     } else if (this.currentTool === "polygon")
       this.activeAnnotation && this.activeAnnotation.type === "polygon" && this.isDrawing ? this.activeAnnotation.coordinates.points.push(t) : (this.isDrawing = !0, this.activeAnnotation = {
-        id: e,
+        id: i,
         type: "polygon",
         label: "",
         coordinates: { points: [t] },
         style: { strokeColor: this.currentLabelColor }
       });
     else if (this.currentTool === "category") {
-      const s = {
-        id: e,
+      const n = {
+        id: i,
         type: "category",
         label: "",
         // 将被填充
@@ -265,9 +268,9 @@ class mt {
         // 或位置？
         style: { strokeColor: this.currentLabelColor }
       };
-      this.annotations.push(s), this.emit("annotationChange", { action: "add", changedItem: s, imageUrl: this.imageUrl }), this.activeAnnotation = s;
+      this.annotations.push(n), this.emit("annotationChange", { action: "add", changedItem: n, imageUrl: this.imageUrl }), this.activeAnnotation = n;
     } else this.currentTool === "rotatedRect" && (this.isDrawing = !0, this.dragStartPoint = t, this.activeAnnotation = {
-      id: e,
+      id: i,
       type: "rotatedRect",
       label: "",
       coordinates: { x: t.x, y: t.y, width: 0, height: 0, angle: 0 },
@@ -277,11 +280,11 @@ class mt {
   updateDrawing(t) {
     if (this.activeAnnotation)
       if (this.activeAnnotation.type === "rectangle" && this.dragStartPoint) {
-        const e = this.activeAnnotation.coordinates;
-        e.x2 = t.x, e.y2 = t.y;
+        const i = this.activeAnnotation.coordinates;
+        i.x2 = t.x, i.y2 = t.y;
       } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
-        const e = this.activeAnnotation.coordinates, s = Math.abs(t.x - this.dragStartPoint.x), a = Math.abs(t.y - this.dragStartPoint.y);
-        e.width = s * 2, e.height = a * 2;
+        const i = this.activeAnnotation.coordinates, n = Math.abs(t.x - this.dragStartPoint.x), r = Math.abs(t.y - this.dragStartPoint.y);
+        i.width = n * 2, i.height = r * 2;
       } else this.activeAnnotation.type;
   }
   finishDrawing() {
@@ -292,8 +295,8 @@ class mt {
           this.activeAnnotation = null, this.isDrawing = !1;
           return;
         }
-        const e = Math.min(t.x1, t.x2), s = Math.max(t.x1, t.x2), a = Math.min(t.y1, t.y2), n = Math.max(t.y1, t.y2);
-        t.x1 = e, t.x2 = s, t.y1 = a, t.y2 = n, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+        const i = Math.min(t.x1, t.x2), n = Math.max(t.x1, t.x2), r = Math.min(t.y1, t.y2), o = Math.max(t.y1, t.y2);
+        t.x1 = i, t.x2 = n, t.y1 = r, t.y2 = o, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
       } else if (this.activeAnnotation.type === "polygon") {
         if (this.activeAnnotation.coordinates.points.length < 3) {
           this.activeAnnotation = null, this.isDrawing = !1;
@@ -314,89 +317,89 @@ class mt {
   }
   updateDragging(t) {
     if (!this.activeAnnotation || !this.dragStartPoint || !this.dragStartAnnotation) return;
-    const e = t.x - this.dragStartPoint.x, s = t.y - this.dragStartPoint.y;
-    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, e, s) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
+    const i = t.x - this.dragStartPoint.x, n = t.y - this.dragStartPoint.y;
+    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, i, n) : this.resizeAnnotation(this.activeAnnotation, this.dragStartAnnotation, this.selectedHandleIndex, t);
   }
-  moveAnnotation(t, e, s, a) {
+  moveAnnotation(t, i, n, r) {
     if (t.type === "rectangle") {
-      const n = e.coordinates, o = t.coordinates;
-      o.x1 = n.x1 + s, o.x2 = n.x2 + s, o.y1 = n.y1 + a, o.y2 = n.y2 + a;
+      const o = i.coordinates, c = t.coordinates;
+      c.x1 = o.x1 + n, c.x2 = o.x2 + n, c.y1 = o.y1 + r, c.y2 = o.y2 + r;
     } else if (t.type === "point") {
-      const n = e.coordinates, o = t.coordinates;
-      o.points = n.points.map((i) => ({ x: i.x + s, y: i.y + a }));
+      const o = i.coordinates, c = t.coordinates;
+      c.points = o.points.map((a) => ({ x: a.x + n, y: a.y + r }));
     } else if (t.type === "rotatedRect") {
-      const n = e.coordinates, o = t.coordinates;
-      o.x = n.x + s, o.y = n.y + a;
+      const o = i.coordinates, c = t.coordinates;
+      c.x = o.x + n, c.y = o.y + r;
     } else if (t.type === "polygon") {
-      const n = e.coordinates, o = t.coordinates;
-      o.points = n.points.map((i) => ({ x: i.x + s, y: i.y + a }));
+      const o = i.coordinates, c = t.coordinates;
+      c.points = o.points.map((a) => ({ x: a.x + n, y: a.y + r }));
     }
   }
-  resizeAnnotation(t, e, s, a) {
+  resizeAnnotation(t, i, n, r) {
     if (t.type === "rectangle") {
-      const n = t.coordinates;
-      s === 0 && (n.x1 = a.x, n.y1 = a.y), s === 1 && (n.x2 = a.x, n.y1 = a.y), s === 2 && (n.x2 = a.x, n.y2 = a.y), s === 3 && (n.x1 = a.x, n.y2 = a.y);
+      const o = t.coordinates;
+      n === 0 && (o.x1 = r.x, o.y1 = r.y), n === 1 && (o.x2 = r.x, o.y1 = r.y), n === 2 && (o.x2 = r.x, o.y2 = r.y), n === 3 && (o.x1 = r.x, o.y2 = r.y);
     } else if (t.type === "polygon") {
-      const n = t.coordinates;
-      s >= 0 && s < n.points.length && (n.points[s] = a);
+      const o = t.coordinates;
+      n >= 0 && n < o.points.length && (o.points[n] = r);
     } else if (t.type === "point") {
-      const n = t.coordinates;
-      s >= 0 && s < n.points.length && (n.points[s] = a);
+      const o = t.coordinates;
+      n >= 0 && n < o.points.length && (o.points[n] = r);
     } else if (t.type === "rotatedRect") {
-      const n = t.coordinates;
-      if (s === -2) {
-        const o = n.x, i = n.y, r = a.x - o, m = a.y - i;
-        let d = Math.atan2(m, r) * 180 / Math.PI;
-        d += 90, n.angle = d;
+      const o = t.coordinates;
+      if (n === -2) {
+        const c = o.x, a = o.y, d = r.x - c, y = r.y - a;
+        let x = Math.atan2(y, d) * 180 / Math.PI;
+        x += 90, o.angle = x;
       } else {
-        const o = n.angle * Math.PI / 180, i = Math.cos(-o), r = Math.sin(-o), m = a.x - n.x, d = a.y - n.y, u = m * i - d * r, f = m * r + d * i;
-        (s === 0 || s === 3) && (n.width / 2, n.width = Math.abs(u) * 2), (s === 1 || s === 2) && (n.width = Math.abs(u) * 2), (s === 0 || s === 1) && (n.height = Math.abs(f) * 2), (s === 2 || s === 3) && (n.height = Math.abs(f) * 2);
+        const c = o.angle * Math.PI / 180, a = Math.cos(-c), d = Math.sin(-c), y = r.x - o.x, x = r.y - o.y, u = y * a - x * d, f = y * d + x * a;
+        (n === 0 || n === 3) && (o.width / 2, o.width = Math.abs(u) * 2), (n === 1 || n === 2) && (o.width = Math.abs(u) * 2), (n === 0 || n === 1) && (o.height = Math.abs(f) * 2), (n === 2 || n === 3) && (o.height = Math.abs(f) * 2);
       }
     }
   }
   // --- 命中测试和渲染辅助函数 ---
   getHitAnnotation(t) {
-    for (let e = this.annotations.length - 1; e >= 0; e--) {
-      const s = this.annotations[e];
-      if (this.isPointInAnnotation(t, s))
-        return s;
+    for (let i = this.annotations.length - 1; i >= 0; i--) {
+      const n = this.annotations[i];
+      if (this.isPointInAnnotation(t, n))
+        return n;
     }
     return null;
   }
-  isPointInAnnotation(t, e) {
-    if (e.type === "rectangle") {
-      const s = e.coordinates;
-      return t.x >= s.x1 && t.x <= s.x2 && t.y >= s.y1 && t.y <= s.y2;
-    } else if (e.type === "polygon") {
-      const s = e.coordinates;
-      return ut(t, s.points);
-    } else if (e.type === "rotatedRect") {
-      const s = e.coordinates, a = K(t, { x: s.x, y: s.y }, -s.angle), n = s.width / 2, o = s.height / 2;
-      return a.x >= s.x - n && a.x <= s.x + n && a.y >= s.y - o && a.y <= s.y + o;
-    } else if (e.type === "point")
-      return e.coordinates.points.some((a) => W(t, a) < 10 / this.scale);
+  isPointInAnnotation(t, i) {
+    if (i.type === "rectangle") {
+      const n = i.coordinates;
+      return t.x >= n.x1 && t.x <= n.x2 && t.y >= n.y1 && t.y <= n.y2;
+    } else if (i.type === "polygon") {
+      const n = i.coordinates;
+      return Kt(t, n.points);
+    } else if (i.type === "rotatedRect") {
+      const n = i.coordinates, r = dt(t, { x: n.x, y: n.y }, -n.angle), o = n.width / 2, c = n.height / 2;
+      return r.x >= n.x - o && r.x <= n.x + o && r.y >= n.y - c && r.y <= n.y + c;
+    } else if (i.type === "point")
+      return i.coordinates.points.some((r) => Q(t, r) < 10 / this.scale);
     return !1;
   }
-  getHitHandle(t, e, s) {
-    const a = this.getAnnotationHandles(s), n = 6;
-    for (let o = 0; o < a.length; o++) {
-      const i = a[o], r = this.toScreenCoords(i.x, i.y);
-      if (Math.abs(t - r.x) < n && Math.abs(e - r.y) < n)
-        return s.type === "rotatedRect" && o === 4 ? -2 : o;
+  getHitHandle(t, i, n) {
+    const r = this.getAnnotationHandles(n), o = 6;
+    for (let c = 0; c < r.length; c++) {
+      const a = r[c], d = this.toScreenCoords(a.x, a.y);
+      if (Math.abs(t - d.x) < o && Math.abs(i - d.y) < o)
+        return n.type === "rotatedRect" && c === 4 ? -2 : c;
     }
     return -100;
   }
   getAnnotationHandles(t) {
     if (t.type === "rectangle") {
-      const e = t.coordinates;
+      const i = t.coordinates;
       return [
-        { x: e.x1, y: e.y1 },
+        { x: i.x1, y: i.y1 },
         // 左上
-        { x: e.x2, y: e.y1 },
+        { x: i.x2, y: i.y1 },
         // 右上
-        { x: e.x2, y: e.y2 },
+        { x: i.x2, y: i.y2 },
         // 右下
-        { x: e.x1, y: e.y2 }
+        { x: i.x1, y: i.y2 }
         // 左下
       ];
     } else {
@@ -405,24 +408,24 @@ class mt {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        const e = t.coordinates, s = { x: e.x, y: e.y }, a = e.width / 2, n = e.height / 2, o = { x: e.x - a, y: e.y - n }, i = { x: e.x + a, y: e.y - n }, r = { x: e.x + a, y: e.y + n }, m = { x: e.x - a, y: e.y + n }, d = { x: e.x, y: e.y - n - 20 / this.scale };
-        return [o, i, r, m, d].map((u) => K(u, s, e.angle));
+        const i = t.coordinates, n = { x: i.x, y: i.y }, r = i.width / 2, o = i.height / 2, c = { x: i.x - r, y: i.y - o }, a = { x: i.x + r, y: i.y - o }, d = { x: i.x + r, y: i.y + o }, y = { x: i.x - r, y: i.y + o }, x = { x: i.x, y: i.y - o - 20 / this.scale };
+        return [c, a, d, y, x].map((u) => dt(u, n, i.angle));
       }
     }
     return [];
   }
-  checkHover(t, e, s) {
-    const a = this.getHitCategory(t, e);
-    if (a) {
-      this.canvas.style.cursor = "pointer", this.hoverAnnotation = a;
+  checkHover(t, i, n) {
+    const r = this.getHitCategory(t, i);
+    if (r) {
+      this.canvas.style.cursor = "pointer", this.hoverAnnotation = r;
       return;
     }
-    if (this.activeAnnotation && this.getHitHandle(t, e, this.activeAnnotation) !== -100) {
+    if (this.activeAnnotation && this.getHitHandle(t, i, this.activeAnnotation) !== -100) {
       this.canvas.style.cursor = "pointer";
       return;
     }
-    const n = this.getHitAnnotation(s);
-    n ? (this.canvas.style.cursor = "move", this.hoverAnnotation = n) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
+    const o = this.getHitAnnotation(n);
+    o ? (this.canvas.style.cursor = "move", this.hoverAnnotation = o) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
   }
   render() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height), this.img.complete && this.img.width > 0 && this.ctx.drawImage(this.img, this.offset.x, this.offset.y, this.img.width * this.scale, this.img.height * this.scale), this.annotations.forEach((t) => {
@@ -430,158 +433,169 @@ class mt {
     }), this.activeAnnotation && this.drawItem(this.activeAnnotation, !0), this.renderCategories();
   }
   renderCategories() {
-    const t = this.annotations.filter((r) => r.type === "category");
+    const t = this.annotations.filter((d) => d.type === "category");
     if (t.length === 0) return;
     this.ctx.save(), this.ctx.font = "14px sans-serif", this.ctx.textBaseline = "top";
-    let e = 10;
-    const s = 10, a = 8, n = 4, o = 24, i = 8;
-    t.forEach((r) => {
-      const m = r.label || "Unlabeled", d = this.ctx.measureText(m).width + a * 2, u = this.activeAnnotation === r, f = this.hoverAnnotation === r;
-      this.ctx.fillStyle = u ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = u ? "#2196F3" : "#666", this.ctx.lineWidth = u ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(e, s, d, o), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(m, e + a, s + n), e += d + i;
+    let i = 10;
+    const n = 10, r = 8, o = 4, c = 24, a = 8;
+    t.forEach((d) => {
+      const y = d.label || "Unlabeled", x = this.ctx.measureText(y).width + r * 2, u = this.activeAnnotation === d, f = this.hoverAnnotation === d;
+      this.ctx.fillStyle = u ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = u ? "#2196F3" : "#666", this.ctx.lineWidth = u ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(i, n, x, c), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(y, i + r, n + o), i += x + a;
     }), this.ctx.restore();
   }
-  getHitCategory(t, e) {
-    const s = this.annotations.filter((d) => d.type === "category");
-    if (s.length === 0) return null;
+  getHitCategory(t, i) {
+    const n = this.annotations.filter((x) => x.type === "category");
+    if (n.length === 0) return null;
     this.ctx.save(), this.ctx.font = "14px sans-serif";
-    let a = 10;
-    const n = 10, o = 8, i = 24, r = 8;
-    let m = null;
-    for (const d of s) {
-      const u = d.label || "Unlabeled", f = this.ctx.measureText(u).width + o * 2;
-      if (t >= a && t <= a + f && e >= n && e <= n + i) {
-        m = d;
+    let r = 10;
+    const o = 10, c = 8, a = 24, d = 8;
+    let y = null;
+    for (const x of n) {
+      const u = x.label || "Unlabeled", f = this.ctx.measureText(u).width + c * 2;
+      if (t >= r && t <= r + f && i >= o && i <= o + a) {
+        y = x;
         break;
       }
-      a += f + r;
+      r += f + d;
     }
-    return this.ctx.restore(), m;
+    return this.ctx.restore(), y;
   }
-  drawItem(t, e) {
-    var n;
-    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !e)
+  drawItem(t, i) {
+    var o;
+    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !i)
       return;
     this.ctx.save();
-    const s = ((n = t.style) == null ? void 0 : n.strokeColor) || "#FF4081", a = e ? "#00E5FF" : s;
-    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, e ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(s, 0.2), t.type === "rectangle") {
-      const o = t.coordinates, i = this.toScreenCoords(o.x1, o.y1), r = this.toScreenCoords(o.x2, o.y2), m = Math.min(i.x, r.x), d = Math.min(i.y, r.y), u = Math.abs(i.x - r.x), f = Math.abs(i.y - r.y);
-      this.ctx.strokeRect(m, d, u, f), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(m, d, u, f), e && this.drawHandles(this.getAnnotationHandles(t));
+    const n = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", r = i ? "#00E5FF" : n;
+    if (this.ctx.strokeStyle = r, this.ctx.lineWidth = 2, i ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(n, 0.2), t.type === "rectangle") {
+      const c = t.coordinates, a = this.toScreenCoords(c.x1, c.y1), d = this.toScreenCoords(c.x2, c.y2), y = Math.min(a.x, d.x), x = Math.min(a.y, d.y), u = Math.abs(a.x - d.x), f = Math.abs(a.y - d.y);
+      this.ctx.strokeRect(y, x, u, f), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(y, x, u, f), i && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
-      const o = t.coordinates;
-      if (o.points.length === 0) {
+      const c = t.coordinates;
+      if (c.points.length === 0) {
         this.ctx.restore();
         return;
       }
       this.ctx.beginPath();
-      const i = this.toScreenCoords(o.points[0].x, o.points[0].y);
-      this.ctx.moveTo(i.x, i.y);
-      for (let r = 1; r < o.points.length; r++) {
-        const m = this.toScreenCoords(o.points[r].x, o.points[r].y);
-        this.ctx.lineTo(m.x, m.y);
+      const a = this.toScreenCoords(c.points[0].x, c.points[0].y);
+      this.ctx.moveTo(a.x, a.y);
+      for (let d = 1; d < c.points.length; d++) {
+        const y = this.toScreenCoords(c.points[d].x, c.points[d].y);
+        this.ctx.lineTo(y.x, y.y);
       }
       if (!this.isDrawing || t !== this.activeAnnotation)
         this.ctx.closePath();
       else if (this.lastMouseMovePoint) {
-        let r = this.lastMouseMovePoint;
-        if (this.isHoveringStartPoint && o.points.length > 0) {
-          r = o.points[0];
-          const d = this.toScreenCoords(o.points[0].x, o.points[0].y);
-          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(d.x, d.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
+        let d = this.lastMouseMovePoint;
+        if (this.isHoveringStartPoint && c.points.length > 0) {
+          d = c.points[0];
+          const x = this.toScreenCoords(c.points[0].x, c.points[0].y);
+          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(x.x, x.y, 10, 0, Math.PI * 2), this.ctx.fillStyle = "rgba(255, 215, 0, 0.6)", this.ctx.strokeStyle = "#FFFFFF", this.ctx.lineWidth = 2, this.ctx.fill(), this.ctx.stroke(), this.ctx.restore();
         }
-        const m = this.toScreenCoords(r.x, r.y);
-        this.ctx.lineTo(m.x, m.y);
+        const y = this.toScreenCoords(d.x, d.y);
+        this.ctx.lineTo(y.x, y.y);
       }
-      this.ctx.stroke(), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), e && this.drawHandles(this.getAnnotationHandles(t));
+      this.ctx.stroke(), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), i && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "rotatedRect") {
-      const o = t.coordinates;
-      this.ctx.translate(this.toScreenCoords(o.x, o.y).x, this.toScreenCoords(o.x, o.y).y), this.ctx.rotate(o.angle * Math.PI / 180);
-      const i = o.width * this.scale, r = o.height * this.scale;
-      this.ctx.strokeRect(-i / 2, -r / 2, i, r), this.ctx.fillStyle = e ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-i / 2, -r / 2, i, r), this.ctx.rotate(-o.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(o.x, o.y).x, -this.toScreenCoords(o.x, o.y).y), e && this.drawHandles(this.getAnnotationHandles(t));
-    } else t.type === "point" && t.coordinates.points.forEach((i) => {
-      const r = this.toScreenCoords(i.x, i.y);
-      this.ctx.beginPath(), this.ctx.arc(r.x, r.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = e ? "#00E5FF" : s, this.ctx.fill(), this.ctx.stroke();
+      const c = t.coordinates;
+      this.ctx.translate(this.toScreenCoords(c.x, c.y).x, this.toScreenCoords(c.x, c.y).y), this.ctx.rotate(c.angle * Math.PI / 180);
+      const a = c.width * this.scale, d = c.height * this.scale;
+      this.ctx.strokeRect(-a / 2, -d / 2, a, d), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-a / 2, -d / 2, a, d), this.ctx.rotate(-c.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(c.x, c.y).x, -this.toScreenCoords(c.x, c.y).y), i && this.drawHandles(this.getAnnotationHandles(t));
+    } else t.type === "point" && t.coordinates.points.forEach((a) => {
+      const d = this.toScreenCoords(a.x, a.y);
+      this.ctx.beginPath(), this.ctx.arc(d.x, d.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = i ? "#00E5FF" : n, this.ctx.fill(), this.ctx.stroke();
     });
     this.ctx.restore();
   }
   drawHandles(t) {
-    this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((e) => {
-      const s = this.toScreenCoords(e.x, e.y);
-      this.ctx.fillRect(s.x - 4, s.y - 4, 8, 8), this.ctx.strokeRect(s.x - 4, s.y - 4, 8, 8);
+    this.ctx.fillStyle = "#FFFFFF", this.ctx.strokeStyle = "#000000", this.ctx.lineWidth = 1, t.forEach((i) => {
+      const n = this.toScreenCoords(i.x, i.y);
+      this.ctx.fillRect(n.x - 4, n.y - 4, 8, 8), this.ctx.strokeRect(n.x - 4, n.y - 4, 8, 8);
     });
   }
 }
-const ft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+const Gt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z m0-320a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z" fill="currentColor"/>\r
-</svg>`, yt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M609.408 149.376l-277.76 277.76a96 96 0 0 0 0 135.68l277.76 277.76a32 32 0 1 0 45.248-45.248L376.96 512l277.76-277.76a32 32 0 0 0-45.248-45.248z" fill="currentColor"/>\r
-</svg>`, pt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, te = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M704 192h160v160h-160z m-64-64v288h288V128H640zM160 672h160v160H160z m-64-64v288h288V608H96z m256-320h320v64H352z" fill="currentColor"/>\r
-</svg>`, xt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ee = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M256 256h512v512H256z m-64-64v640h640V192H192z" fill="currentColor"/>\r
-</svg>`, bt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ne = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M160 256h704a32 32 0 1 1 0 64h-64v608a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V320h-64a32 32 0 1 1 0-64zm128 64v576h448V320H288z m128 0v512a32 32 0 1 1-64 0V320a32 32 0 1 1 64 0zm256 0v512a32 32 0 1 1-64 0V320a32 32 0 1 1 64 0zM352 128h320a32 32 0 0 1 32 32v64H320v-64a32 32 0 0 1 32-32z" fill="currentColor"/>\r
-</svg>`, wt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, se = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M512 666.56l-186.88-186.88a32 32 0 0 0-45.248 45.248l209.536 209.536a96 96 0 0 0 135.68 0l209.536-209.536a32 32 0 1 0-45.248-45.248L544 666.56V128a32 32 0 0 0-64 0v538.56zM192 832h640a32 32 0 1 1 0 64H192a32 32 0 1 1 0-64z" fill="currentColor"/>\r
-</svg>`, Ct = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ie = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z m-144-320l-480 480v160h160l480-480-160-160z m-114.56 480H256v-117.76L653.44 236.8l117.76 117.76L573.44 672z m208-208l-117.76-117.76 66.56-66.56a32 32 0 0 1 45.248 0l72.512 72.512a32 32 0 0 1 0 45.248l-66.56 66.56z" fill="currentColor"/>\r
-</svg>`, _t = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, oe = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M940.48 876.16L148.16 83.84a32 32 0 1 0-45.12 45.12L236.8 262.4C163.52 337.28 107.52 429.12 82.56 528.96a32 32 0 0 0 0 20.48C144.384 727.68 314.88 840.96 512 840.96c103.04 0 199.36-30.72 283.52-83.84l99.84 99.84a32 32 0 1 0 45.12-45.12zM512 776.96c-176.64 0-333.44-98.56-402.56-248.96 25.6-56.32 63.36-107.52 110.08-151.04L364.8 522.24a128 128 0 0 0 147.2 147.2l123.52 123.52A445.44 445.44 0 0 1 512 776.96z m373.12-32.64l-64-64C857.6 627.84 879.616 572.16 879.616 512c0-176.64-156.8-328.96-367.616-328.96-58.24 0-113.6 11.52-164.48 32.64l-55.68-55.68C346.88 136.96 427.52 119.04 512 119.04c229.76 0 425.216 142.08 493.44 346.24a32 32 0 0 1 0 20.48 450.56 450.56 0 0 1-120.32 258.56z m-309.12-309.12l-128-128A128 128 0 0 1 576 435.2z" fill="currentColor"/>\r
-</svg>`, At = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ae = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm-48-384H320a32 32 0 0 1 0-64h144V304a32 32 0 1 1 64 0v144h144a32 32 0 1 1 0 64H528v144a32 32 0 1 1-64 0V512z" fill="currentColor"/>\r
-</svg>`, kt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, le = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M224 448a32 32 0 0 0 9.536 22.592l416 416a32 32 0 0 0 45.248 0l226.24-226.24a32 32 0 0 0 0-45.248l-416-416A32 32 0 0 0 482.432 192H256a64 64 0 0 0-64 64v192z m64-192h160l384 384-160 160-384-384V256z m64 128a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="currentColor"/>\r
-</svg>`, St = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, re = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm0-704h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm0 352h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z" fill="currentColor"/>\r
-</svg>`, It = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ce = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z" fill="currentColor"/>\r
-</svg>`, zt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, he = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M340.864 149.376a32 32 0 0 0-45.248 45.248L573.44 512l-277.76 317.376a32 32 0 0 0 45.248 45.248l277.76-277.76a96 96 0 0 0 0-135.68L340.864 149.376z" fill="currentColor"/>\r
-</svg>`, Mt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, de = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M512 192c229.76 0 425.216 142.08 493.44 346.24a32 32 0 0 1 0 20.48C937.216 762.88 741.76 904.96 512 904.96S86.784 762.88 18.56 558.72a32 32 0 0 1 0-20.48C86.784 334.08 282.24 192 512 192zm0 64c-197.12 0-367.616 120.32-428.16 296.32C144.384 727.68 314.88 840.96 512 840.96s367.616-113.28 428.16-288.64C879.616 376.32 709.12 256 512 256zm0 160a128 128 0 1 1 0 256 128 128 0 0 1 0-256zm0 64a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" fill="currentColor"/>\r
-</svg>`, Ht = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ge = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M637.12 693.376l182.208 182.208a32 32 0 1 1-45.248 45.248L591.872 738.624a352 352 0 1 1 45.248-45.248z m-45.248-45.248A288 288 0 1 0 183.872 240.128a288 288 0 0 0 408 408zM416 448h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 64 0v96z" fill="currentColor"/>\r
-</svg>`, Lt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+</svg>`, ue = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
   <path d="M637.12 693.376l182.208 182.208a32 32 0 1 1-45.248 45.248L591.872 738.624a352 352 0 1 1 45.248-45.248z m-45.248-45.248A288 288 0 1 0 183.872 240.128a288 288 0 0 0 408 408zM256 448h320a32 32 0 1 1 0 64H256a32 32 0 1 1 0-64z" fill="currentColor"/>\r
-</svg>`, Pt = ["innerHTML"], Tt = /* @__PURE__ */ R({
+</svg>`, ve = ["innerHTML"], me = /* @__PURE__ */ X({
   __name: "SvgIcon",
   props: {
     name: {},
     size: {}
   },
-  setup(v) {
-    const t = v, e = C(""), s = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": ft, "../assets/svg/back.svg": yt, "../assets/svg/connection.svg": pt, "../assets/svg/crop.svg": xt, "../assets/svg/delete.svg": bt, "../assets/svg/download.svg": wt, "../assets/svg/edit.svg": Ct, "../assets/svg/hide.svg": _t, "../assets/svg/pointer.svg": At, "../assets/svg/price-tag.svg": kt, "../assets/svg/rank.svg": St, "../assets/svg/refresh-right.svg": It, "../assets/svg/right.svg": zt, "../assets/svg/view.svg": Mt, "../assets/svg/zoom-in.svg": Ht, "../assets/svg/zoom-out.svg": Lt });
-    return ht(() => {
-      const a = `../assets/svg/${t.name}.svg`, n = s[a];
-      n ? e.value = n : (console.warn(`Icon ${t.name} not found at path ${a}`), e.value = "");
-    }), (a, n) => (p(), x("i", {
-      class: T(["svg-icon", [v.size ? `size-${v.size}` : ""]]),
-      innerHTML: e.value
-    }, null, 10, Pt));
+  setup(m) {
+    const t = m, i = I(""), n = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": Gt, "../assets/svg/back.svg": Qt, "../assets/svg/connection.svg": te, "../assets/svg/crop.svg": ee, "../assets/svg/delete.svg": ne, "../assets/svg/download.svg": se, "../assets/svg/edit.svg": ie, "../assets/svg/hide.svg": oe, "../assets/svg/pointer.svg": ae, "../assets/svg/price-tag.svg": le, "../assets/svg/rank.svg": re, "../assets/svg/refresh-right.svg": ce, "../assets/svg/right.svg": he, "../assets/svg/view.svg": de, "../assets/svg/zoom-in.svg": ge, "../assets/svg/zoom-out.svg": ue });
+    return Xt(() => {
+      const r = `../assets/svg/${t.name}.svg`, o = n[r];
+      o ? i.value = o : (console.warn(`Icon ${t.name} not found at path ${r}`), i.value = "");
+    }), (r, o) => (p(), b("i", {
+      class: U(["svg-icon", [m.size ? `size-${m.size}` : ""]]),
+      innerHTML: i.value
+    }, null, 10, ve));
   }
-}), B = (v, t) => {
-  const e = v.__vccOpts || v;
-  for (const [s, a] of t)
-    e[s] = a;
-  return e;
-}, k = /* @__PURE__ */ B(Tt, [["__scopeId", "data-v-3928607b"]]), Dt = {
+}), Y = (m, t) => {
+  const i = m.__vccOpts || m;
+  for (const [n, r] of t)
+    i[n] = r;
+  return i;
+}, z = /* @__PURE__ */ Y(me, [["__scopeId", "data-v-3928607b"]]), fe = {
   key: 0,
+  class: "image-list-sidebar"
+}, ye = { class: "image-list-title" }, pe = { class: "image-list-scroll" }, be = ["onClick"], xe = { class: "image-list-stage" }, we = ["src", "alt"], Ce = {
+  key: 0,
+  class: "thumb-overlay-layer"
+}, Ae = {
+  key: 1,
+  class: "thumb-overlay-svg",
+  viewBox: "0 0 100 100",
+  preserveAspectRatio: "none"
+}, _e = ["points"], Ie = { class: "image-list-text" }, ke = {
+  key: 1,
   class: "left-sidebar"
-}, $t = ["onClick", "title"], Ut = { class: "center-area" }, Ft = {
+}, Se = ["onClick", "title"], Me = { class: "center-area" }, ze = {
   key: 0,
   class: "top-bar"
-}, Rt = { class: "label-selector" }, Bt = { class: "tags-row" }, Ot = ["onClick"], Vt = {
+}, $e = { class: "label-selector" }, Pe = { class: "tags-row" }, He = ["onClick"], Te = {
   key: 0,
   class: "no-labels"
-}, Et = {
+}, Le = {
   key: 1,
   class: "batch-nav"
-}, Nt = ["disabled"], Jt = ["disabled"], Wt = {
-  key: 1,
-  class: "right-sidebar"
-}, jt = { class: "label-list" }, Xt = { class: "label-row" }, Yt = ["onUpdate:modelValue", "onChange"], Kt = ["title"], qt = ["onClick"], Gt = { class: "action-icon more-actions" }, Qt = ["onClick"], Zt = {
+}, De = ["disabled"], Re = ["disabled"], Ue = {
   key: 2,
+  class: "right-sidebar"
+}, Fe = { class: "label-list" }, Be = { class: "label-row" }, Ee = ["onUpdate:modelValue", "onChange"], Oe = ["title"], Ve = ["onClick"], Ne = { class: "action-icon more-actions" }, We = ["onClick"], Je = {
+  key: 3,
   class: "modal-overlay"
-}, te = { class: "modal-content" }, ee = { class: "form-group" }, se = { class: "form-group" }, ne = { class: "color-input-wrapper" }, ie = /* @__PURE__ */ R({
+}, je = { class: "modal-content" }, Xe = { class: "form-group" }, Ye = { class: "form-group" }, qe = { class: "color-input-wrapper" }, Ke = /* @__PURE__ */ X({
   __name: "ImageAnnotator",
   props: {
     annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect"] },
@@ -589,334 +603,571 @@ const ft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     labels: { default: () => [] },
     defaultActiveType: {},
     theme: { default: "light" },
-    readOnly: { type: Boolean, default: !1 }
+    readOnly: { type: Boolean, default: !1 },
+    image: {},
+    predictionCandidates: {},
+    session: {},
+    requestId: {},
+    minZoom: {},
+    maxZoom: {}
   },
-  emits: ["annotationChange", "batchChange", "labelChange"],
-  setup(v, { expose: t, emit: e }) {
-    const s = v, a = e, n = C(null), o = C(null), i = C(null), r = C(null), m = C(0), d = C([]), u = C(""), f = C(!1), y = C({ name: "", color: "#FF0000" }), w = gt(() => s.annotationTypes.filter((l) => l !== "category")), A = (l) => ({
+  emits: ["annotationChange", "batchChange", "labelChange", "ready", "error", "tool:change", "viewport:change", "annotation:add", "annotation:update", "annotation:delete", "annotation:select", "prediction:loaded", "prediction:apply", "prediction:reject"],
+  setup(m, { expose: t, emit: i }) {
+    const n = m, r = i, o = I(null), c = I(null), a = I(null), d = I(null), y = I(0), x = I(""), u = I([]), f = I(""), C = I(!1), A = I({ name: "", color: "#FF0000" }), S = I("none"), M = I([]), L = I({}), tt = ct(() => d.value === "select" && !!x.value), et = (e) => {
+      if (!e || L.value[e]) return;
+      const s = new Image();
+      s.onload = () => {
+        const l = s.naturalWidth || 1, h = s.naturalHeight || 1;
+        L.value = {
+          ...L.value,
+          [e]: { width: l, height: h }
+        };
+      }, s.src = e;
+    }, nt = () => {
+      n.batchImages.forEach((e) => {
+        et(e.imageUrl);
+      });
+    }, R = () => {
+      var l, h, v, w;
+      const e = n.batchImages[y.value], s = (e == null ? void 0 : e.imageUrl) || ((l = n.image) == null ? void 0 : l.url);
+      return {
+        eventId: `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
+        timestamp: Date.now(),
+        requestId: n.requestId,
+        taskId: (h = n.session) == null ? void 0 : h.taskId,
+        imageId: ((v = n.image) == null ? void 0 : v.id) || s,
+        operator: (w = n.session) == null ? void 0 : w.userId
+      };
+    }, gt = (e) => {
+      var h;
+      const s = e == null ? void 0 : e.action;
+      if (!s) return;
+      const l = {
+        meta: R(),
+        action: s,
+        current: e == null ? void 0 : e.changedItem,
+        source: (h = e == null ? void 0 : e.changedItem) != null && h.predictionId ? "prediction" : "manual"
+      };
+      s === "add" && r("annotation:add", l), s === "update" && r("annotation:update", l), s === "delete" && r("annotation:delete", l), s === "select" && r("annotation:select", l);
+    }, ut = ct(() => n.annotationTypes.filter((e) => e !== "category")), vt = (e) => ({
       rectangle: "crop",
       polygon: "connection",
       point: "aim",
       rotatedRect: "refresh-right",
       category: "price-tag"
-    })[l] || l, I = (l) => ({
+    })[e] || e, mt = (e) => ({
       rectangle: "矩形框",
       polygon: "多边形",
       point: "关键点",
       rotatedRect: "旋转矩形",
       category: "分类标签"
-    })[l] || l;
-    dt(() => {
-      if (n.value) {
-        i.value = new mt(n.value), i.value.on("annotationChange", (c) => {
-          if (c.action === "add" && c.changedItem) {
-            const g = d.value.find((_) => _.id === u.value);
-            g && (c.changedItem.label = g.name);
+    })[e] || e;
+    Yt(() => {
+      if (nt(), o.value) {
+        a.value = new Zt(o.value), a.value.on("annotationChange", (s) => {
+          var l, h;
+          if (s.action === "add" && s.changedItem) {
+            const v = u.value.find((w) => w.id === f.value);
+            v && (s.changedItem.label = v.name, s.changedItem.labelId = v.id);
           }
-          a("annotationChange", c);
-        }), $(), L();
-        const l = new ResizeObserver(() => {
-          var c;
-          (c = i.value) == null || c.resize();
+          s.action === "select" ? x.value = ((l = s.changedItem) == null ? void 0 : l.id) || "" : s.action === "delete" && ((h = s.changedItem) == null ? void 0 : h.id) === x.value && (x.value = ""), r("annotationChange", s), gt(s);
+        }), B(), W();
+        const e = new ResizeObserver(() => {
+          var s;
+          (s = a.value) == null || s.resize();
         });
-        o.value && l.observe(o.value);
+        c.value && e.observe(c.value), n.defaultActiveType && E(n.defaultActiveType), r("ready", { meta: R() });
       }
     });
-    const L = () => {
-      if (!i.value) return;
-      const l = d.value.find((g) => g.id === u.value);
-      l && i.value.setLabelStyle(l.color);
-      const c = d.value.filter((g) => g.visible).map((g) => g.name);
-      i.value.setVisibleLabels(c);
-    }, $ = () => {
-      if (i.value && s.batchImages.length > 0) {
-        const l = s.batchImages[m.value];
-        i.value.loadImage(l.imageUrl), l.annotations && i.value.setAnnotations(l.annotations);
-      }
-    }, O = (l) => {
-      var c, g;
-      if (r.value = l, l !== "pan" && l !== "select" && d.value.length === 0) {
+    const W = () => {
+      if (!a.value) return;
+      const e = u.value.find((l) => l.id === f.value);
+      e && a.value.setLabelStyle(e.color);
+      const s = u.value.filter((l) => l.visible).map((l) => l.name);
+      a.value.setVisibleLabels(s);
+    }, B = () => {
+      var e;
+      if (a.value)
+        if (x.value = "", n.batchImages.length > 0) {
+          const s = n.batchImages[y.value];
+          a.value.loadImage(s.imageUrl), s.annotations ? a.value.setAnnotations(s.annotations) : a.value.setAnnotations([]);
+        } else (e = n.image) != null && e.url && a.value.loadImage(n.image.url);
+    }, E = (e) => {
+      var s, l;
+      if (d.value = e, x.value = "", e !== "pan" && e !== "select" && u.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      l === "pan" || l === "select" ? (c = i.value) == null || c.setTool(l) : (g = i.value) == null || g.setTool(l);
-    }, G = () => {
-      var l;
-      (l = i.value) != null && l.activeAnnotation && i.value.deleteAnnotation(i.value.activeAnnotation.id);
-    }, Q = () => {
-      var l;
-      return (l = i.value) == null ? void 0 : l.zoom(1);
-    }, Z = () => {
-      var l;
-      return (l = i.value) == null ? void 0 : l.zoom(-1);
-    }, tt = () => {
-      y.value = { name: "", color: "#2196F3" }, f.value = !0;
-    }, X = () => {
-      f.value = !1;
-    }, et = () => {
-      if (!y.value.name.trim()) {
+      e === "pan" || e === "select" ? (s = a.value) == null || s.setTool(e) : (l = a.value) == null || l.setTool(e), r("tool:change", { meta: R(), tool: e });
+    }, ft = () => {
+      var e;
+      (e = a.value) != null && e.activeAnnotation && a.value.deleteAnnotation(a.value.activeAnnotation.id);
+    }, st = () => {
+      a.value && r("viewport:change", {
+        meta: R(),
+        scale: a.value.scale,
+        offset: { ...a.value.offset }
+      });
+    }, yt = () => {
+      var e;
+      (e = a.value) == null || e.zoom(1), st();
+    }, pt = () => {
+      var e;
+      (e = a.value) == null || e.zoom(-1), st();
+    }, bt = () => {
+      A.value = { name: "", color: "#2196F3" }, C.value = !0;
+    }, it = () => {
+      C.value = !1;
+    }, xt = () => {
+      if (!A.value.name.trim()) {
         alert("请输入标签名称");
         return;
       }
-      const c = {
+      const s = {
         id: Date.now().toString(),
-        name: y.value.name,
-        color: y.value.color,
+        name: A.value.name,
+        color: A.value.color,
         visible: !0
       };
-      d.value.push(c), a("labelChange", d.value), d.value.length === 1 && U(c), X();
-    }, U = (l) => {
-      var c;
-      u.value = l.id, (c = i.value) == null || c.setLabelStyle(l.color);
-    }, st = (l, c) => {
-      if (!l.startsWith("#")) return l;
-      let g = 0, _ = 0, M = 0;
-      return l.length === 4 ? (g = parseInt(l[1] + l[1], 16), _ = parseInt(l[2] + l[2], 16), M = parseInt(l[3] + l[3], 16)) : l.length === 7 && (g = parseInt(l.slice(1, 3), 16), _ = parseInt(l.slice(3, 5), 16), M = parseInt(l.slice(5, 7), 16)), `rgba(${g}, ${_}, ${M}, ${c})`;
-    }, nt = (l) => {
-      var c;
-      if (l.id === u.value && ((c = i.value) == null || c.setLabelStyle(l.color)), i.value) {
-        const g = i.value.getAnnotations();
-        let _ = !1;
-        g.forEach((M) => {
-          M.label === l.name && (M.style || (M.style = {}), M.style.strokeColor = l.color, M.style.fillColor = st(l.color, 0.2), _ = !0);
-        }), _ && i.value.render();
+      u.value.push(s), r("labelChange", u.value), u.value.length === 1 && O(s), it();
+    }, O = (e) => {
+      var s;
+      f.value = e.id, (s = a.value) == null || s.setLabelStyle(e.color);
+    }, wt = (e, s) => {
+      if (!e.startsWith("#")) return e;
+      let l = 0, h = 0, v = 0;
+      return e.length === 4 ? (l = parseInt(e[1] + e[1], 16), h = parseInt(e[2] + e[2], 16), v = parseInt(e[3] + e[3], 16)) : e.length === 7 && (l = parseInt(e.slice(1, 3), 16), h = parseInt(e.slice(3, 5), 16), v = parseInt(e.slice(5, 7), 16)), `rgba(${l}, ${h}, ${v}, ${s})`;
+    }, Ct = (e) => {
+      var s;
+      if (e.id === f.value && ((s = a.value) == null || s.setLabelStyle(e.color)), a.value) {
+        const l = a.value.getAnnotations();
+        let h = !1;
+        l.forEach((v) => {
+          v.label === e.name && (v.style || (v.style = {}), v.style.strokeColor = e.color, v.style.fillColor = wt(e.color, 0.2), h = !0);
+        }), h && a.value.render();
       }
-      a("labelChange", d.value);
-    }, it = (l) => {
-      l.visible = !l.visible, L();
-    }, ot = (l) => {
-      const c = d.value.findIndex((g) => g.id === l);
-      c > -1 && (d.value.splice(c, 1), a("labelChange", d.value), u.value === l && (u.value = d.value.length > 0 ? d.value[0].id : "", u.value && U(d.value[0])), L());
+      r("labelChange", u.value);
+    }, At = (e) => {
+      e.visible = !e.visible, W();
+    }, _t = (e) => {
+      const s = u.value.findIndex((l) => l.id === e);
+      s > -1 && (u.value.splice(s, 1), r("labelChange", u.value), f.value === e && (f.value = u.value.length > 0 ? u.value[0].id : "", f.value && O(u.value[0])), W());
     };
-    q(() => s.labels, (l) => {
-      const c = JSON.parse(JSON.stringify(l || []));
-      if (d.value = c, d.value.length > 0)
-        if (!u.value || !d.value.find((g) => g.id === u.value))
-          U(d.value[0]);
+    V(() => n.labels, (e) => {
+      const s = JSON.parse(JSON.stringify(e || []));
+      if (u.value = s, u.value.length > 0)
+        if (!f.value || !u.value.find((l) => l.id === f.value))
+          O(u.value[0]);
         else {
-          const g = d.value.find((_) => _.id === u.value);
-          g && U(g);
+          const l = u.value.find((h) => h.id === f.value);
+          l && O(l);
         }
       else
-        u.value = "";
-      L();
+        f.value = "";
+      W();
     }, { immediate: !0, deep: !0 });
-    const at = () => {
-      m.value > 0 && (V(), m.value--, $(), E());
-    }, lt = () => {
-      m.value < s.batchImages.length - 1 && (V(), m.value++, $(), E());
-    }, V = () => {
-      if (i.value) {
-        const l = i.value.getAnnotations();
-        s.batchImages[m.value].annotations = l;
+    const It = () => {
+      y.value > 0 && (q(), y.value--, B(), K());
+    }, kt = () => {
+      y.value < n.batchImages.length - 1 && (q(), y.value++, B(), K());
+    }, q = () => {
+      if (a.value) {
+        const e = a.value.getAnnotations();
+        n.batchImages[y.value].annotations = e;
       }
-    }, E = () => {
-      const l = s.batchImages[m.value];
-      a("batchChange", {
-        currentIndex: m.value,
-        total: s.batchImages.length,
-        currentImageUrl: l.imageUrl,
-        currentAnnotations: l.annotations || []
+    }, K = () => {
+      const e = n.batchImages[y.value];
+      r("batchChange", {
+        currentIndex: y.value,
+        total: n.batchImages.length,
+        currentImageUrl: e.imageUrl,
+        currentAnnotations: e.annotations || []
       });
+    }, ot = (e = []) => {
+      var v;
+      if (!a.value) return;
+      if (M.value = JSON.parse(JSON.stringify(e)), M.value.length === 0) {
+        S.value = "none";
+        return;
+      }
+      S.value = "loaded";
+      const l = (a.value.getAnnotations() || []).filter((w) => !w.predictionId), h = M.value.map((w) => {
+        const k = JSON.parse(JSON.stringify(w.annotation));
+        return k.id = k.id || `pred-${w.id}`, k.predictionId = w.id, k.modelRunId = w.modelRunId || k.modelRunId, k.confidence = w.confidence ?? k.confidence, k.reviewStatus = k.reviewStatus || "draft", k;
+      });
+      a.value.setAnnotations([...l, ...h]), r("prediction:loaded", {
+        meta: R(),
+        modelRunId: (v = M.value[0]) == null ? void 0 : v.modelRunId,
+        candidates: M.value
+      });
+    }, St = (e, s) => {
+      var v;
+      if (!a.value) return [];
+      S.value = "applying";
+      const h = (a.value.getAnnotations() || []).filter((w) => w.predictionId && e.includes(w.predictionId));
+      return h.forEach((w) => {
+        w.reviewStatus = "accepted";
+      }), S.value = "applied", r("prediction:apply", {
+        meta: R(),
+        modelRunId: (v = h[0]) == null ? void 0 : v.modelRunId,
+        candidateIds: e,
+        threshold: s,
+        acceptedAnnotations: h
+      }), a.value.render(), h;
+    }, Mt = (e, s) => {
+      var v;
+      if (!a.value) return;
+      const l = a.value.getAnnotations() || [], h = l.filter((w) => !(w.predictionId && e.includes(w.predictionId)));
+      a.value.setAnnotations(h), r("prediction:reject", {
+        meta: R(),
+        modelRunId: (v = l.find((w) => w.predictionId && e.includes(w.predictionId))) == null ? void 0 : v.modelRunId,
+        candidateIds: e,
+        reason: s
+      });
+    }, zt = (e, s = []) => {
+      a.value && (a.value.loadImage(e.url), a.value.setAnnotations(s));
+    }, $t = (e) => {
+      var s;
+      (s = a.value) == null || s.setAnnotations(e);
+    }, at = () => {
+      var e;
+      return ((e = a.value) == null ? void 0 : e.getAnnotations()) || [];
+    }, Pt = (e = "json") => {
+      var l, h;
+      const s = at();
+      return {
+        format: e,
+        image: ((l = n.batchImages[y.value]) == null ? void 0 : l.imageUrl) || ((h = n.image) == null ? void 0 : h.url) || "",
+        annotations: s
+      };
+    }, lt = (e) => {
+      e >= 0 && e < n.batchImages.length && (q(), y.value = e, B(), K());
+    }, Ht = (e) => {
+      var s;
+      return e === y.value && a.value ? a.value.getAnnotations() || [] : ((s = n.batchImages[e]) == null ? void 0 : s.annotations) || [];
+    }, Tt = (e) => e.type === "rectangle", Lt = (e) => e.type === "polygon", Dt = (e) => e.type === "point", Rt = (e) => e.type === "rotatedRect", J = (e) => {
+      var l, h;
+      const s = (l = u.value.find((v) => v.name === e.label)) == null ? void 0 : l.color;
+      return ((h = e.style) == null ? void 0 : h.strokeColor) || s || "#409eff";
+    }, rt = (e) => {
+      const s = e.coordinates;
+      return (s == null ? void 0 : s.points) || [];
+    }, j = (e) => {
+      const s = n.batchImages[e];
+      if (s != null && s.width && (s != null && s.height))
+        return { width: s.width, height: s.height };
+      const l = s != null && s.imageUrl ? L.value[s.imageUrl] : void 0;
+      return l || (s != null && s.imageUrl && et(s.imageUrl), { width: 1, height: 1 });
+    }, Ut = (e) => {
+      const s = n.batchImages[e];
+      return s != null && s.width && (s != null && s.height) ? !0 : s != null && s.imageUrl ? !!L.value[s.imageUrl] : !1;
+    }, Ft = (e, s) => {
+      const l = s.coordinates, h = j(e), v = J(s), w = Math.min(l.x1, l.x2), k = Math.min(l.y1, l.y2), Nt = Math.max(l.x1, l.x2), Wt = Math.max(l.y1, l.y2);
+      return {
+        left: `${w / h.width * 100}%`,
+        top: `${k / h.height * 100}%`,
+        width: `${(Nt - w) / h.width * 100}%`,
+        height: `${(Wt - k) / h.height * 100}%`,
+        borderColor: v,
+        backgroundColor: `${v}22`
+      };
+    }, Bt = (e, s) => {
+      const l = j(e);
+      return rt(s).map((h) => `${h.x / l.width * 100},${h.y / l.height * 100}`).join(" ");
+    }, Et = (e) => {
+      const s = J(e);
+      return {
+        fill: `${s}33`,
+        stroke: s,
+        strokeWidth: "1.4"
+      };
+    }, Ot = (e, s, l) => {
+      const h = j(e), v = J(l);
+      return {
+        left: `${s.x / h.width * 100}%`,
+        top: `${s.y / h.height * 100}%`,
+        backgroundColor: v
+      };
+    }, Vt = (e, s) => {
+      const l = s.coordinates, h = j(e), v = J(s), w = Math.abs(l.width), k = Math.abs(l.height);
+      return {
+        left: `${(l.x - w / 2) / h.width * 100}%`,
+        top: `${(l.y - k / 2) / h.height * 100}%`,
+        width: `${w / h.width * 100}%`,
+        height: `${k / h.height * 100}%`,
+        transform: `rotate(${l.angle || 0}deg)`,
+        borderColor: v,
+        backgroundColor: `${v}22`
+      };
     };
     return t({
-      jumpTo: (l) => {
-        l >= 0 && l < s.batchImages.length && (V(), m.value = l, $(), E());
+      jumpTo: lt,
+      setImage: zt,
+      setAnnotations: $t,
+      getAnnotations: at,
+      selectTool: E,
+      loadPredictionCandidates: ot,
+      applyPredictions: St,
+      rejectPredictions: Mt,
+      exportAnnotations: Pt,
+      getAllAnnotations: () => {
+        var e, s;
+        return n.batchImages.length > 0 ? n.batchImages : [{
+          imageUrl: ((e = n.image) == null ? void 0 : e.url) || "",
+          annotations: ((s = a.value) == null ? void 0 : s.getAnnotations()) || []
+        }];
       },
-      getAllAnnotations: () => s.batchImages,
       getCurrentAnnotation: () => {
-        var l;
+        var e, s, l;
         return {
-          imageUrl: s.batchImages[m.value].imageUrl,
-          annotations: ((l = i.value) == null ? void 0 : l.getAnnotations()) || []
+          imageUrl: ((e = n.batchImages[y.value]) == null ? void 0 : e.imageUrl) || ((s = n.image) == null ? void 0 : s.url) || "",
+          annotations: ((l = a.value) == null ? void 0 : l.getAnnotations()) || []
         };
       }
-    }), (l, c) => (p(), x("div", {
-      class: T(["annotation-container", v.theme])
+    }), V(() => {
+      var e;
+      return (e = n.image) == null ? void 0 : e.url;
+    }, () => {
+      var e;
+      n.batchImages.length === 0 && ((e = n.image) != null && e.url) && B();
+    }), V(() => n.predictionCandidates, (e) => {
+      e && ot(e);
+    }, { immediate: !0, deep: !0 }), V(
+      () => n.batchImages.map((e) => `${e.imageUrl}:${e.width || ""}x${e.height || ""}`),
+      () => {
+        nt();
+      },
+      { immediate: !0 }
+    ), (e, s) => (p(), b("div", {
+      class: U(["annotation-container", m.theme])
     }, [
-      v.readOnly ? H("", !0) : (p(), x("div", Dt, [
-        h("div", {
-          class: T(["tool-btn", { active: r.value === "pan" }]),
-          onClick: c[0] || (c[0] = (g) => O("pan")),
+      m.batchImages && m.batchImages.length > 0 ? (p(), b("div", fe, [
+        g("div", ye, "批量图片（" + P(m.batchImages.length) + "）", 1),
+        g("div", pe, [
+          (p(!0), b(T, null, D(m.batchImages, (l, h) => (p(), b("button", {
+            key: `${l.imageUrl}-${h}`,
+            class: U(["image-list-item", { active: h === y.value }]),
+            onClick: (v) => lt(h)
+          }, [
+            g("div", xe, [
+              g("img", {
+                src: l.imageUrl,
+                alt: `第${h + 1}张`,
+                class: "image-list-thumb"
+              }, null, 8, we),
+              Ut(h) ? (p(), b("div", Ce, [
+                (p(!0), b(T, null, D(Ht(h), (v) => (p(), b(T, {
+                  key: v.id
+                }, [
+                  Tt(v) ? (p(), b("div", {
+                    key: 0,
+                    class: "thumb-overlay-rect",
+                    style: F(Ft(h, v))
+                  }, null, 4)) : Lt(v) ? (p(), b("svg", Ae, [
+                    g("polygon", {
+                      points: Bt(h, v),
+                      style: F(Et(v))
+                    }, null, 12, _e)
+                  ])) : Dt(v) ? (p(!0), b(T, { key: 2 }, D(rt(v), (w, k) => (p(), b("div", {
+                    key: `${v.id}-${k}`,
+                    class: "thumb-overlay-point",
+                    style: F(Ot(h, w, v))
+                  }, null, 4))), 128)) : Rt(v) ? (p(), b("div", {
+                    key: 3,
+                    class: "thumb-overlay-rotated",
+                    style: F(Vt(h, v))
+                  }, null, 4)) : H("", !0)
+                ], 64))), 128))
+              ])) : H("", !0)
+            ]),
+            g("span", Ie, "第 " + P(h + 1) + " 张", 1)
+          ], 10, be))), 128))
+        ])
+      ])) : H("", !0),
+      m.readOnly ? H("", !0) : (p(), b("div", ke, [
+        g("div", {
+          class: U(["tool-btn", { active: d.value === "pan" }]),
+          onClick: s[0] || (s[0] = (l) => E("pan")),
           title: "拖动"
         }, [
-          S(k, { name: "rank" })
+          $(z, { name: "rank" })
         ], 2),
-        h("div", {
-          class: T(["tool-btn", { active: r.value === "select" }]),
-          onClick: c[1] || (c[1] = (g) => O("select")),
+        g("div", {
+          class: U(["tool-btn", { active: d.value === "select" }]),
+          onClick: s[1] || (s[1] = (l) => E("select")),
           title: "选择"
         }, [
-          S(k, { name: "pointer" })
+          $(z, { name: "pointer" })
         ], 2),
-        c[4] || (c[4] = h("div", { class: "divider" }, null, -1)),
-        (p(!0), x(P, null, D(w.value, (g) => (p(), x("div", {
-          key: g,
-          class: T(["tool-btn", { active: r.value === g }]),
-          onClick: (_) => O(g),
-          title: I(g)
+        s[4] || (s[4] = g("div", { class: "divider" }, null, -1)),
+        (p(!0), b(T, null, D(ut.value, (l) => (p(), b("div", {
+          key: l,
+          class: U(["tool-btn", { active: d.value === l }]),
+          onClick: (h) => E(l),
+          title: mt(l)
         }, [
-          S(k, {
-            name: A(g)
+          $(z, {
+            name: vt(l)
           }, null, 8, ["name"])
-        ], 10, $t))), 128)),
-        c[5] || (c[5] = h("div", { class: "divider" }, null, -1)),
-        h("div", {
+        ], 10, Se))), 128)),
+        s[5] || (s[5] = g("div", { class: "divider" }, null, -1)),
+        g("div", {
           class: "tool-btn",
-          onClick: Q,
+          onClick: yt,
           title: "放大"
         }, [
-          S(k, { name: "zoom-in" })
+          $(z, { name: "zoom-in" })
         ]),
-        h("div", {
+        g("div", {
           class: "tool-btn",
-          onClick: Z,
+          onClick: pt,
           title: "缩小"
         }, [
-          S(k, { name: "zoom-out" })
+          $(z, { name: "zoom-out" })
         ]),
-        c[6] || (c[6] = h("div", { class: "divider" }, null, -1)),
-        h("div", {
+        s[6] || (s[6] = g("div", { class: "divider" }, null, -1)),
+        tt.value ? (p(), b("div", {
+          key: 0,
           class: "tool-btn",
-          onClick: G,
+          onClick: ft,
           title: "删除选中"
         }, [
-          S(k, { name: "delete" })
-        ])
+          $(z, { name: "delete" })
+        ])) : H("", !0)
       ])),
-      h("div", Ut, [
-        v.readOnly ? H("", !0) : (p(), x("div", Ft, [
-          h("div", Rt, [
-            c[7] || (c[7] = h("span", { class: "label-text" }, "当前标签:", -1)),
-            h("div", Bt, [
-              (p(!0), x(P, null, D(d.value, (g) => (p(), x("div", {
-                key: g.id,
-                class: T(["tag-chip", { active: u.value === g.id }]),
-                style: j({ backgroundColor: g.color, borderColor: g.color }),
-                onClick: (_) => U(g)
-              }, z(g.name), 15, Ot))), 128)),
-              d.value.length === 0 ? (p(), x("div", Vt, "请在右侧创建标签")) : H("", !0)
+      g("div", Me, [
+        m.readOnly ? H("", !0) : (p(), b("div", ze, [
+          g("div", $e, [
+            s[7] || (s[7] = g("span", { class: "label-text" }, "当前标签:", -1)),
+            g("div", Pe, [
+              (p(!0), b(T, null, D(u.value, (l) => (p(), b("div", {
+                key: l.id,
+                class: U(["tag-chip", { active: f.value === l.id }]),
+                style: F({ backgroundColor: l.color, borderColor: l.color }),
+                onClick: (h) => O(l)
+              }, P(l.name), 15, He))), 128)),
+              u.value.length === 0 ? (p(), b("div", Te, "请在右侧创建标签")) : H("", !0)
             ])
           ])
         ])),
-        h("div", {
+        g("div", {
           class: "canvas-wrapper",
           ref_key: "canvasWrapper",
-          ref: o
+          ref: c
         }, [
-          h("canvas", {
+          g("canvas", {
             ref_key: "canvasRef",
-            ref: n
+            ref: o
           }, null, 512)
         ], 512),
-        v.batchImages && v.batchImages.length > 0 ? (p(), x("div", Et, [
-          h("button", {
-            onClick: at,
-            disabled: m.value <= 0
+        m.batchImages && m.batchImages.length > 0 ? (p(), b("div", Le, [
+          g("button", {
+            onClick: It,
+            disabled: y.value <= 0
           }, [
-            S(k, { name: "back" }),
-            c[8] || (c[8] = F(" 上一张 ", -1))
-          ], 8, Nt),
-          h("span", null, z(m.value + 1) + " / " + z(v.batchImages.length), 1),
-          h("button", {
-            onClick: lt,
-            disabled: m.value >= v.batchImages.length - 1
+            $(z, { name: "back" }),
+            s[8] || (s[8] = N(" 上一张 ", -1))
+          ], 8, De),
+          g("span", null, P(y.value + 1) + " / " + P(m.batchImages.length), 1),
+          g("button", {
+            onClick: kt,
+            disabled: y.value >= m.batchImages.length - 1
           }, [
-            c[9] || (c[9] = F(" 下一张 ", -1)),
-            S(k, { name: "right" })
-          ], 8, Jt)
+            s[9] || (s[9] = N(" 下一张 ", -1)),
+            $(z, { name: "right" })
+          ], 8, Re)
         ])) : H("", !0)
       ]),
-      v.readOnly ? H("", !0) : (p(), x("div", Wt, [
-        h("div", { class: "sidebar-header" }, [
-          c[10] || (c[10] = h("h3", null, "标签管理", -1)),
-          h("button", {
+      m.readOnly ? H("", !0) : (p(), b("div", Ue, [
+        g("div", { class: "sidebar-header" }, [
+          s[10] || (s[10] = g("h3", null, "标签管理", -1)),
+          g("button", {
             class: "add-btn",
-            onClick: tt
+            onClick: bt
           }, "添加标签")
         ]),
-        h("div", jt, [
-          (p(!0), x(P, null, D(d.value, (g) => (p(), x("div", {
-            key: g.id,
+        g("div", Fe, [
+          (p(!0), b(T, null, D(u.value, (l) => (p(), b("div", {
+            key: l.id,
             class: "label-item"
           }, [
-            h("div", Xt, [
-              h("label", {
+            g("div", Be, [
+              g("label", {
                 class: "color-wrapper",
-                style: j({ backgroundColor: g.color })
+                style: F({ backgroundColor: l.color })
               }, [
-                N(h("input", {
+                Z(g("input", {
                   type: "color",
-                  "onUpdate:modelValue": (_) => g.color = _,
-                  onChange: (_) => nt(g),
+                  "onUpdate:modelValue": (h) => l.color = h,
+                  onChange: (h) => Ct(l),
                   style: { visibility: "hidden", width: "0", height: "0" }
-                }, null, 40, Yt), [
-                  [J, g.color]
+                }, null, 40, Ee), [
+                  [G, l.color]
                 ])
               ], 4),
-              h("span", {
+              g("span", {
                 class: "label-name",
-                title: g.name
-              }, z(g.name), 9, Kt),
-              h("span", {
+                title: l.name
+              }, P(l.name), 9, Oe),
+              g("span", {
                 class: "action-icon eye",
-                onClick: (_) => it(g)
+                onClick: (h) => At(l)
               }, [
-                g.visible ? (p(), Y(k, {
+                l.visible ? (p(), ht(z, {
                   key: 0,
                   name: "view"
-                })) : (p(), Y(k, {
+                })) : (p(), ht(z, {
                   key: 1,
                   name: "hide"
                 }))
-              ], 8, qt),
-              h("div", Gt, [
-                c[11] || (c[11] = h("span", { class: "dots" }, "•••", -1)),
-                h("span", {
+              ], 8, Ve),
+              g("div", Ne, [
+                s[11] || (s[11] = g("span", { class: "dots" }, "•••", -1)),
+                g("span", {
                   class: "delete-btn",
-                  onClick: (_) => ot(g.id),
+                  onClick: (h) => _t(l.id),
                   title: "删除"
                 }, [
-                  S(k, { name: "delete" })
-                ], 8, Qt)
+                  $(z, { name: "delete" })
+                ], 8, We)
               ])
             ])
           ]))), 128))
         ])
       ])),
-      f.value ? (p(), x("div", Zt, [
-        h("div", te, [
-          c[14] || (c[14] = h("h3", null, "新增标签", -1)),
-          h("div", ee, [
-            c[12] || (c[12] = h("label", null, "名称", -1)),
-            N(h("input", {
-              "onUpdate:modelValue": c[2] || (c[2] = (g) => y.value.name = g),
+      C.value ? (p(), b("div", Je, [
+        g("div", je, [
+          s[14] || (s[14] = g("h3", null, "新增标签", -1)),
+          g("div", Xe, [
+            s[12] || (s[12] = g("label", null, "名称", -1)),
+            Z(g("input", {
+              "onUpdate:modelValue": s[2] || (s[2] = (l) => A.value.name = l),
               placeholder: "请输入标签名称",
               class: "modal-input"
             }, null, 512), [
-              [J, y.value.name]
+              [G, A.value.name]
             ])
           ]),
-          h("div", se, [
-            c[13] || (c[13] = h("label", null, "颜色", -1)),
-            h("div", ne, [
-              N(h("input", {
+          g("div", Ye, [
+            s[13] || (s[13] = g("label", null, "颜色", -1)),
+            g("div", qe, [
+              Z(g("input", {
                 type: "color",
-                "onUpdate:modelValue": c[3] || (c[3] = (g) => y.value.color = g),
+                "onUpdate:modelValue": s[3] || (s[3] = (l) => A.value.color = l),
                 class: "modal-color-picker"
               }, null, 512), [
-                [J, y.value.color]
+                [G, A.value.color]
               ]),
-              h("span", null, z(y.value.color), 1)
+              g("span", null, P(A.value.color), 1)
             ])
           ]),
-          h("div", { class: "modal-actions" }, [
-            h("button", {
-              onClick: X,
+          g("div", { class: "modal-actions" }, [
+            g("button", {
+              onClick: it,
               class: "cancel-btn"
             }, "取消"),
-            h("button", {
-              onClick: et,
+            g("button", {
+              onClick: xt,
               class: "confirm-btn"
             }, "确认")
           ])
@@ -924,13 +1175,13 @@ const ft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       ])) : H("", !0)
     ], 2));
   }
-}), oe = /* @__PURE__ */ B(ie, [["__scopeId", "data-v-fe1b36c0"]]), ae = {
+}), Ze = /* @__PURE__ */ Y(Ke, [["__scopeId", "data-v-22c2957b"]]), Ge = {
   class: "thumbnail-wrapper",
   ref: "wrapper"
-}, le = ["src", "alt"], re = ["viewBox"], ce = ["x", "y", "width", "height", "stroke"], he = ["points", "stroke"], ge = ["x", "y", "fill"], de = {
+}, Qe = ["src", "alt"], tn = ["viewBox"], en = ["x", "y", "width", "height", "stroke"], nn = ["points", "stroke"], sn = ["x", "y", "fill"], on = {
   key: 1,
   class: "loading-placeholder"
-}, ve = /* @__PURE__ */ R({
+}, an = /* @__PURE__ */ X({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -938,23 +1189,23 @@ const ft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     alt: {},
     labels: {}
   },
-  setup(v) {
-    const t = v, e = C(null), s = C(!1), a = C(0), n = C(0), o = () => {
-      e.value && (a.value = e.value.naturalWidth, n.value = e.value.naturalHeight, s.value = !0);
-    }, i = (u) => {
+  setup(m) {
+    const t = m, i = I(null), n = I(!1), r = I(0), o = I(0), c = () => {
+      i.value && (r.value = i.value.naturalWidth, o.value = i.value.naturalHeight, n.value = !0);
+    }, a = (u) => {
       var f;
       if ((f = u.style) != null && f.strokeColor) return u.style.strokeColor;
       if (t.labels) {
-        const y = t.labels.find((w) => w.name === u.label);
-        if (y) return y.color;
+        const C = t.labels.find((A) => A.name === u.label);
+        if (C) return C.color;
       }
       return "#FF0000";
-    }, r = (u) => {
-      const f = u.coordinates, y = Math.min(f.x1, f.x2), w = Math.min(f.y1, f.y2), A = Math.abs(f.x1 - f.x2), I = Math.abs(f.y1 - f.y2);
-      return { x: y, y: w, width: A, height: I };
-    }, m = (u) => u.coordinates.points.map((y) => `${y.x},${y.y}`).join(" "), d = (u) => {
+    }, d = (u) => {
+      const f = u.coordinates, C = Math.min(f.x1, f.x2), A = Math.min(f.y1, f.y2), S = Math.abs(f.x1 - f.x2), M = Math.abs(f.y1 - f.y2);
+      return { x: C, y: A, width: S, height: M };
+    }, y = (u) => u.coordinates.points.map((C) => `${C.x},${C.y}`).join(" "), x = (u) => {
       if (u.type === "rectangle") {
-        const f = r(u);
+        const f = d(u);
         return { x: f.x, y: f.y - 5 };
       } else if (u.type === "polygon") {
         const f = u.coordinates.points;
@@ -962,171 +1213,171 @@ const ft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       }
       return { x: 0, y: 0 };
     };
-    return (u, f) => (p(), x("div", ae, [
-      h("img", {
+    return (u, f) => (p(), b("div", Ge, [
+      g("img", {
         ref_key: "img",
-        ref: e,
-        src: v.src,
+        ref: i,
+        src: m.src,
         class: "thumbnail-image",
-        onLoad: o,
-        alt: v.alt
-      }, null, 40, le),
-      s.value ? (p(), x("svg", {
+        onLoad: c,
+        alt: m.alt
+      }, null, 40, Qe),
+      n.value ? (p(), b("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${a.value} ${n.value}`,
+        viewBox: `0 0 ${r.value} ${o.value}`,
         preserveAspectRatio: "none"
       }, [
-        (p(!0), x(P, null, D(v.annotations, (y) => (p(), x(P, {
-          key: y.id
+        (p(!0), b(T, null, D(m.annotations, (C) => (p(), b(T, {
+          key: C.id
         }, [
-          y.type === "rectangle" ? (p(), x("rect", {
+          C.type === "rectangle" ? (p(), b("rect", {
             key: 0,
-            x: r(y).x,
-            y: r(y).y,
-            width: r(y).width,
-            height: r(y).height,
-            stroke: i(y),
+            x: d(C).x,
+            y: d(C).y,
+            width: d(C).width,
+            height: d(C).height,
+            stroke: a(C),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, ce)) : H("", !0),
-          y.type === "polygon" ? (p(), x("polygon", {
+          }, null, 8, en)) : H("", !0),
+          C.type === "polygon" ? (p(), b("polygon", {
             key: 1,
-            points: m(y),
-            stroke: i(y),
+            points: y(C),
+            stroke: a(C),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, he)) : H("", !0),
-          y.label ? (p(), x("text", {
+          }, null, 8, nn)) : H("", !0),
+          C.label ? (p(), b("text", {
             key: 2,
-            x: d(y).x,
-            y: d(y).y,
-            fill: i(y),
+            x: x(C).x,
+            y: x(C).y,
+            fill: a(C),
             "font-size": "14",
             "font-weight": "bold",
             class: "anno-label"
-          }, z(y.label), 9, ge)) : H("", !0)
+          }, P(C.label), 9, sn)) : H("", !0)
         ], 64))), 128))
-      ], 8, re)) : (p(), x("div", de, "Loading..."))
+      ], 8, tn)) : (p(), b("div", on, "Loading..."))
     ], 512));
   }
-}), ue = /* @__PURE__ */ B(ve, [["__scopeId", "data-v-78bcbe0c"]]), me = { class: "batch-annotator" }, fe = {
+}), ln = /* @__PURE__ */ Y(an, [["__scopeId", "data-v-78bcbe0c"]]), rn = { class: "batch-annotator" }, cn = {
   key: 0,
   class: "gallery-view"
-}, ye = { class: "gallery-header" }, pe = { class: "label-summary" }, xe = { class: "gallery-grid" }, be = ["onClick"], we = { class: "thumbnail-wrapper" }, Ce = { class: "img-meta" }, _e = { class: "img-index" }, Ae = { class: "anno-count" }, ke = { class: "bottom-bar" }, Se = {
+}, hn = { class: "gallery-header" }, dn = { class: "label-summary" }, gn = { class: "gallery-grid" }, un = ["onClick"], vn = { class: "thumbnail-wrapper" }, mn = { class: "img-meta" }, fn = { class: "img-index" }, yn = { class: "anno-count" }, pn = { class: "bottom-bar" }, bn = {
   key: 1,
   class: "editor-view"
-}, Ie = { class: "editor-header" }, ze = { class: "header-left" }, Me = { class: "editor-title" }, He = { class: "editor-content" }, Le = /* @__PURE__ */ R({
+}, xn = { class: "editor-header" }, wn = { class: "header-left" }, Cn = { class: "editor-title" }, An = { class: "editor-content" }, _n = /* @__PURE__ */ X({
   __name: "BatchAnnotator",
   props: {
     images: {},
     labels: {}
   },
   emits: ["export", "update:images"],
-  setup(v, { emit: t }) {
-    const e = v, s = t, a = C("gallery"), n = C([]), o = C(0), i = C(null);
-    q(() => e.images, (w) => {
-      n.value = JSON.parse(JSON.stringify(w));
+  setup(m, { emit: t }) {
+    const i = m, n = t, r = I("gallery"), o = I([]), c = I(0), a = I(null);
+    V(() => i.images, (A) => {
+      o.value = JSON.parse(JSON.stringify(A));
     }, { immediate: !0, deep: !0 });
-    const r = (w) => {
-      o.value = w, a.value = "editor", vt(() => {
-        i.value && i.value.jumpTo && i.value.jumpTo(w);
+    const d = (A) => {
+      c.value = A, r.value = "editor", qt(() => {
+        a.value && a.value.jumpTo && a.value.jumpTo(A);
       });
-    }, m = () => {
-      if (i.value && i.value.getCurrentAnnotation) {
-        const w = i.value.getCurrentAnnotation();
-        n.value[o.value] && (n.value[o.value].annotations = w.annotations);
+    }, y = () => {
+      if (a.value && a.value.getCurrentAnnotation) {
+        const A = a.value.getCurrentAnnotation();
+        o.value[c.value] && (o.value[c.value].annotations = A.annotations);
       }
-      a.value = "gallery";
-    }, d = () => {
-      s("export", n.value);
-    }, u = (w) => {
-      o.value = w.currentIndex, n.value[w.currentIndex] && (n.value[w.currentIndex].annotations = w.currentAnnotations);
-    }, f = (w) => {
-      if (i.value && i.value.getCurrentAnnotation) {
-        const A = i.value.getCurrentAnnotation();
-        n.value[o.value] && (n.value[o.value].annotations = A.annotations, s("update:images", n.value));
+      r.value = "gallery";
+    }, x = () => {
+      n("export", o.value);
+    }, u = (A) => {
+      c.value = A.currentIndex, o.value[A.currentIndex] && (o.value[A.currentIndex].annotations = A.currentAnnotations);
+    }, f = (A) => {
+      if (a.value && a.value.getCurrentAnnotation) {
+        const S = a.value.getCurrentAnnotation();
+        o.value[c.value] && (o.value[c.value].annotations = S.annotations, n("update:images", o.value));
       }
-    }, y = (w) => {
+    }, C = (A) => {
     };
-    return (w, A) => (p(), x("div", me, [
-      a.value === "gallery" ? (p(), x("div", fe, [
-        h("div", ye, [
-          h("h3", null, "批量查看与标注 (" + z(n.value.length) + " 张)", 1),
-          h("div", pe, [
-            (p(!0), x(P, null, D(v.labels, (I) => (p(), x("span", {
-              key: I.id,
+    return (A, S) => (p(), b("div", rn, [
+      r.value === "gallery" ? (p(), b("div", cn, [
+        g("div", hn, [
+          g("h3", null, "批量查看与标注 (" + P(o.value.length) + " 张)", 1),
+          g("div", dn, [
+            (p(!0), b(T, null, D(m.labels, (M) => (p(), b("span", {
+              key: M.id,
               class: "label-badge",
-              style: j({ backgroundColor: I.color })
-            }, z(I.name), 5))), 128))
+              style: F({ backgroundColor: M.color })
+            }, P(M.name), 5))), 128))
           ])
         ]),
-        h("div", xe, [
-          (p(!0), x(P, null, D(n.value, (I, L) => (p(), x("div", {
+        g("div", gn, [
+          (p(!0), b(T, null, D(o.value, (M, L) => (p(), b("div", {
             key: L,
             class: "gallery-item",
-            onClick: ($) => r(L)
+            onClick: (tt) => d(L)
           }, [
-            h("div", we, [
-              S(ue, {
-                src: I.imageUrl,
-                annotations: I.annotations || [],
-                labels: v.labels
+            g("div", vn, [
+              $(ln, {
+                src: M.imageUrl,
+                annotations: M.annotations || [],
+                labels: m.labels
               }, null, 8, ["src", "annotations", "labels"])
             ]),
-            h("div", Ce, [
-              h("span", _e, "#" + z(L + 1), 1),
-              h("span", Ae, z((I.annotations || []).length) + " 标注", 1)
+            g("div", mn, [
+              g("span", fn, "#" + P(L + 1), 1),
+              g("span", yn, P((M.annotations || []).length) + " 标注", 1)
             ])
-          ], 8, be))), 128))
+          ], 8, un))), 128))
         ]),
-        h("div", ke, [
-          h("button", {
+        g("div", pn, [
+          g("button", {
             class: "action-btn primary",
-            onClick: A[0] || (A[0] = (I) => r(0))
+            onClick: S[0] || (S[0] = (M) => d(0))
           }, [
-            S(k, { name: "edit" }),
-            A[1] || (A[1] = F(" 手动标注 ", -1))
+            $(z, { name: "edit" }),
+            S[1] || (S[1] = N(" 手动标注 ", -1))
           ]),
-          h("button", {
+          g("button", {
             class: "action-btn success",
-            onClick: d
+            onClick: x
           }, [
-            S(k, { name: "download" }),
-            A[2] || (A[2] = F(" 导出 ", -1))
+            $(z, { name: "download" }),
+            S[2] || (S[2] = N(" 导出 ", -1))
           ])
         ])
-      ])) : (p(), x("div", Se, [
-        h("div", Ie, [
-          h("div", ze, [
-            h("button", {
+      ])) : (p(), b("div", bn, [
+        g("div", xn, [
+          g("div", wn, [
+            g("button", {
               class: "back-btn",
-              onClick: m
+              onClick: y
             }, [
-              S(k, { name: "back" }),
-              A[3] || (A[3] = F(" 返回列表 ", -1))
+              $(z, { name: "back" }),
+              S[3] || (S[3] = N(" 返回列表 ", -1))
             ]),
-            h("span", Me, "正在标注: " + z(o.value + 1) + " / " + z(n.value.length), 1)
+            g("span", Cn, "正在标注: " + P(c.value + 1) + " / " + P(o.value.length), 1)
           ])
         ]),
-        h("div", He, [
-          S(oe, {
+        g("div", An, [
+          $(Ze, {
             ref_key: "annotatorRef",
-            ref: i,
-            batchImages: n.value,
-            labels: v.labels,
+            ref: a,
+            batchImages: o.value,
+            labels: m.labels,
             annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
             onBatchChange: u,
             onAnnotationChange: f,
-            onLabelChange: y
+            onLabelChange: C
           }, null, 8, ["batchImages", "labels"])
         ])
       ]))
     ]));
   }
-}), $e = /* @__PURE__ */ B(Le, [["__scopeId", "data-v-87f3e002"]]);
+}), Sn = /* @__PURE__ */ Y(_n, [["__scopeId", "data-v-87f3e002"]]);
 export {
-  $e as BatchAnnotator,
-  oe as ImageAnnotator,
-  $e as default
+  Sn as BatchAnnotator,
+  Ze as ImageAnnotator,
+  Sn as default
 };