luo-image-annotator 0.0.4 → 0.0.7

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

@@ -1,71 +1,72 @@
-var _t = Object.defineProperty;
-var It = (v, t, n) => t in v ? _t(v, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : v[t] = n;
-var C = (v, t, n) => It(v, typeof t != "symbol" ? t + "" : t, n);
-import { defineComponent as N, ref as S, watchEffect as St, openBlock as x, createElementBlock as b, normalizeClass as $, computed as kt, onMounted as Mt, watch as V, createElementVNode as d, createVNode as z, Fragment as T, renderList as D, createCommentVNode as L, normalizeStyle as K, toDisplayString as H, createTextVNode as O, withDirectives as q, vModelText as X, createBlock as nt, nextTick as zt } from "vue";
-const Y = (v, t) => Math.sqrt(Math.pow(v.x - t.x, 2) + Math.pow(v.y - t.y, 2)), Ht = (v, t) => {
-  let n = !1;
-  for (let e = 0, a = t.length - 1; e < t.length; a = e++) {
-    const o = t[e].x, r = t[e].y, i = t[a].x, h = t[a].y;
-    r > v.y != h > v.y && v.x < (i - o) * (v.y - r) / (h - r) + o && (n = !n);
+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 A = (m, t, i) => jt(m, typeof t != "symbol" ? t + "" : t, i);
+import { defineComponent as Q, ref as k, watchEffect as Xt, openBlock as y, createElementBlock as b, normalizeClass as E, computed as U, onMounted as Yt, watch as j, createElementVNode as g, toDisplayString as $, Fragment as L, renderList as R, normalizeStyle as O, createCommentVNode as z, createVNode as P, createTextVNode as X, withDirectives as it, vModelText as ot, createBlock as vt, nextTick as qt } from "vue";
+const at = (m, t) => Math.sqrt(Math.pow(m.x - t.x, 2) + Math.pow(m.y - t.y, 2)), Gt = (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 n;
-}, st = (v, t, n) => {
-  const e = n * (Math.PI / 180), a = Math.cos(e), o = Math.sin(e), r = v.x - t.x, i = v.y - t.y;
+  return i;
+}, mt = (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 + (r * a - i * o),
-    y: t.y + (r * o + i * a)
+    x: t.x + (c * r - a * o),
+    y: t.y + (c * o + a * r)
   };
 };
-class Pt {
+class Kt {
   constructor(t) {
-    C(this, "canvas");
-    C(this, "ctx");
-    C(this, "img");
-    C(this, "annotations", []);
+    A(this, "canvas");
+    A(this, "ctx");
+    A(this, "img");
+    A(this, "annotations", []);
     // 状态
-    C(this, "currentTool", null);
-    C(this, "activeAnnotation", null);
-    C(this, "hoverAnnotation", null);
-    C(this, "isDrawing", !1);
-    C(this, "isDragging", !1);
-    C(this, "isPanning", !1);
+    A(this, "currentTool", null);
+    A(this, "interactionMode", "none");
+    A(this, "activeAnnotation", null);
+    A(this, "hoverAnnotation", null);
+    A(this, "isDrawing", !1);
+    A(this, "isDragging", !1);
+    A(this, "isPanning", !1);
     // 平移模式
-    C(this, "panStartPoint", null);
+    A(this, "panStartPoint", null);
     // 平移起点
-    C(this, "dragStartPoint", null);
-    C(this, "dragStartAnnotation", null);
+    A(this, "dragStartPoint", null);
+    A(this, "dragStartAnnotation", null);
     // 快照用于撤销/diff
-    C(this, "lastMouseMovePoint", null);
+    A(this, "lastMouseMovePoint", null);
     // 用于绘制辅助线
-    C(this, "isHoveringStartPoint", !1);
+    A(this, "isHoveringStartPoint", !1);
     // 多边形闭合吸附状态
     // 设置
-    C(this, "currentLabelColor", "#FF4081");
+    A(this, "currentLabelColor", "#FF4081");
     // 当前选中标签颜色
-    C(this, "visibleLabels", /* @__PURE__ */ new Set());
+    A(this, "visibleLabels", /* @__PURE__ */ new Set());
     // 可见标签集合 (如果为空则全部可见，或者由外部控制渲染列表)
     // 交互
-    C(this, "selectedHandleIndex", -1);
+    A(this, "selectedHandleIndex", -1);
     // -1: 主体, >=0: 顶点索引, -2: 旋转手柄
-    C(this, "hoverHandleIndex", -1);
+    A(this, "hoverHandleIndex", -1);
     // 视口
-    C(this, "scale", 1);
-    C(this, "offset", { x: 0, y: 0 });
-    C(this, "listeners", {});
-    C(this, "imageUrl", "");
+    A(this, "scale", 1);
+    A(this, "offset", { x: 0, y: 0 });
+    A(this, "listeners", {});
+    A(this, "imageUrl", "");
     this.canvas = t;
-    const n = t.getContext("2d");
-    if (!n) throw new Error("Could not get 2d context");
-    this.ctx = n, 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, n) {
-    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(n);
+  on(t, i) {
+    this.listeners[t] || (this.listeners[t] = []), this.listeners[t].push(i);
   }
-  emit(t, n) {
-    this.listeners[t] && this.listeners[t].forEach((e) => e(n));
+  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 Pt {
     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 Pt {
     this.visibleLabels = new Set(t), this.render();
   }
   zoom(t) {
-    const e = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
-    if (e < 0.1 || e > 10) return;
-    const a = this.canvas.width / 2, o = this.canvas.height / 2, r = this.toImageCoords(a, o);
-    this.scale = e, this.offset.x = a - r.x * this.scale, this.offset.y = o - r.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, n) {
+  toImageCoords(t, i) {
     return {
       x: (t - this.offset.x) / this.scale,
-      y: (n - this.offset.y) / this.scale
+      y: (i - this.offset.y) / this.scale
     };
   }
-  toScreenCoords(t, n) {
+  toScreenCoords(t, i) {
     return {
       x: t * this.scale + this.offset.x,
-      y: n * 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 n = this.canvas.width / this.img.width, e = this.canvas.height / this.img.height;
-      this.scale = Math.min(n, e), 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,42 +121,52 @@ class Pt {
     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 n = this.annotations.findIndex((e) => e.id === t);
-    if (n > -1) {
-      const e = this.annotations[n];
-      this.annotations.splice(n, 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: e,
+        changedItem: n,
         imageUrl: this.imageUrl
       }), this.render();
     }
   }
   handleMouseDown(t) {
-    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, 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: e, 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 h = this.getHitHandle(e, a, this.activeAnnotation);
-      if (h !== -100) {
-        this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = h, 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 r = this.getHitCategory(e, a);
-    if (r) {
-      this.activeAnnotation = r, this.isDragging = !1, this.selectedHandleIndex = -1, this.emit("annotationChange", { action: "select", changedItem: r, 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(o);
-    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 h = this.activeAnnotation.coordinates;
-        if (h.points.length > 2 && Y(o, h.points[0]) < 20 / this.scale) {
+        const d = this.activeAnnotation.coordinates;
+        if (d.points.length > 2 && at(o, d.points[0]) < 20 / this.scale) {
           this.finishDrawing();
           return;
         }
@@ -167,38 +178,30 @@ class Pt {
           this.startDrawing(o);
           return;
         }
-        if (i) {
-          this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = o, 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 i ? (this.activeAnnotation = i, this.isDragging = !0, this.dragStartPoint = o, 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 = o, this.selectedHandleIndex = -1, this.dragStartAnnotation = JSON.parse(JSON.stringify(i)), this.emit("annotationChange", { action: "select", changedItem: i, imageUrl: this.imageUrl }), this.render();
-        return;
       }
-    } else
-      this.activeAnnotation = null, this.render();
+      return;
+    }
+    this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, 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 r = e - this.panStartPoint.x, i = a - this.panStartPoint.y;
-      this.offset.x += r, this.offset.y += i, this.panStartPoint = { x: e, 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 = o, this.isDrawing) {
       if (this.currentTool === "polygon" && this.activeAnnotation) {
-        const r = this.activeAnnotation.coordinates;
-        if (r.points.length > 2) {
-          const i = r.points[0], h = Y(o, i);
-          this.isHoveringStartPoint = h < 20 / this.scale;
+        const c = this.activeAnnotation.coordinates;
+        if (c.points.length > 2) {
+          const a = c.points[0], d = at(o, a);
+          this.isHoveringStartPoint = d < 20 / this.scale;
         } else
           this.isHoveringStartPoint = !1;
       }
       this.updateDrawing(o);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, a, 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 Pt {
   }
   // --- 绘制逻辑 ---
   // 辅助函数：将 hex 转换为 rgba
-  hexToRgba(t, n) {
+  hexToRgba(t, i) {
     if (!t.startsWith("#")) return t;
-    const e = parseInt(t.slice(1, 3), 16), a = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
-    return `rgba(${e}, ${a}, ${o}, ${n})`;
+    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 n = 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: n,
+        id: i,
         type: "rectangle",
         label: "",
         // 组件应填充此项
@@ -239,25 +242,25 @@ class Pt {
         style: { strokeColor: this.currentLabelColor }
       };
     else if (this.currentTool === "point") {
-      const e = {
-        id: n,
+      const n = {
+        id: i,
         type: "point",
         label: "",
         coordinates: { points: [t] },
         style: { strokeColor: this.currentLabelColor }
       };
-      this.annotations.push(e), this.emit("annotationChange", { action: "add", changedItem: e, imageUrl: this.imageUrl }), this.activeAnnotation = e;
+      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: n,
+        id: i,
         type: "polygon",
         label: "",
         coordinates: { points: [t] },
         style: { strokeColor: this.currentLabelColor }
       });
     else if (this.currentTool === "category") {
-      const e = {
-        id: n,
+      const n = {
+        id: i,
         type: "category",
         label: "",
         // 将被填充
@@ -265,9 +268,9 @@ class Pt {
         // 或位置？
         style: { strokeColor: this.currentLabelColor }
       };
-      this.annotations.push(e), this.emit("annotationChange", { action: "add", changedItem: e, imageUrl: this.imageUrl }), this.activeAnnotation = e;
+      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: n,
+      id: i,
       type: "rotatedRect",
       label: "",
       coordinates: { x: t.x, y: t.y, width: 0, height: 0, angle: 0 },
@@ -277,11 +280,11 @@ class Pt {
   updateDrawing(t) {
     if (this.activeAnnotation)
       if (this.activeAnnotation.type === "rectangle" && this.dragStartPoint) {
-        const n = this.activeAnnotation.coordinates;
-        n.x2 = t.x, n.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 n = this.activeAnnotation.coordinates, e = Math.abs(t.x - this.dragStartPoint.x), a = Math.abs(t.y - this.dragStartPoint.y);
-        n.width = e * 2, n.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 Pt {
           this.activeAnnotation = null, this.isDrawing = !1;
           return;
         }
-        const n = Math.min(t.x1, t.x2), e = Math.max(t.x1, t.x2), a = Math.min(t.y1, t.y2), o = Math.max(t.y1, t.y2);
-        t.x1 = n, t.x2 = e, t.y1 = a, t.y2 = o, 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 Pt {
   }
   updateDragging(t) {
     if (!this.activeAnnotation || !this.dragStartPoint || !this.dragStartAnnotation) return;
-    const n = t.x - this.dragStartPoint.x, e = t.y - this.dragStartPoint.y;
-    this.selectedHandleIndex === -1 ? this.moveAnnotation(this.activeAnnotation, this.dragStartAnnotation, n, e) : 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, n, e, a) {
+  moveAnnotation(t, i, n, r) {
     if (t.type === "rectangle") {
-      const o = n.coordinates, r = t.coordinates;
-      r.x1 = o.x1 + e, r.x2 = o.x2 + e, r.y1 = o.y1 + a, r.y2 = o.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 o = n.coordinates, r = t.coordinates;
-      r.points = o.points.map((i) => ({ x: i.x + e, 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 o = n.coordinates, r = t.coordinates;
-      r.x = o.x + e, r.y = o.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 o = n.coordinates, r = t.coordinates;
-      r.points = o.points.map((i) => ({ x: i.x + e, 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, n, e, a) {
+  resizeAnnotation(t, i, n, r) {
     if (t.type === "rectangle") {
       const o = t.coordinates;
-      e === 0 && (o.x1 = a.x, o.y1 = a.y), e === 1 && (o.x2 = a.x, o.y1 = a.y), e === 2 && (o.x2 = a.x, o.y2 = a.y), e === 3 && (o.x1 = a.x, o.y2 = a.y);
+      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 o = t.coordinates;
-      e >= 0 && e < o.points.length && (o.points[e] = a);
+      n >= 0 && n < o.points.length && (o.points[n] = r);
     } else if (t.type === "point") {
       const o = t.coordinates;
-      e >= 0 && e < o.points.length && (o.points[e] = a);
+      n >= 0 && n < o.points.length && (o.points[n] = r);
     } else if (t.type === "rotatedRect") {
       const o = t.coordinates;
-      if (e === -2) {
-        const r = o.x, i = o.y, h = a.x - r, m = a.y - i;
-        let g = Math.atan2(m, h) * 180 / Math.PI;
-        g += 90, o.angle = g;
+      if (n === -2) {
+        const c = o.x, a = o.y, d = r.x - c, p = r.y - a;
+        let w = Math.atan2(p, d) * 180 / Math.PI;
+        w += 90, o.angle = w;
       } else {
-        const r = o.angle * Math.PI / 180, i = Math.cos(-r), h = Math.sin(-r), m = a.x - o.x, g = a.y - o.y, u = m * i - g * h, f = m * h + g * i;
-        (e === 0 || e === 3) && (o.width / 2, o.width = Math.abs(u) * 2), (e === 1 || e === 2) && (o.width = Math.abs(u) * 2), (e === 0 || e === 1) && (o.height = Math.abs(f) * 2), (e === 2 || e === 3) && (o.height = Math.abs(f) * 2);
+        const c = o.angle * Math.PI / 180, a = Math.cos(-c), d = Math.sin(-c), p = r.x - o.x, w = r.y - o.y, u = p * a - w * d, f = p * d + w * 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 n = this.annotations.length - 1; n >= 0; n--) {
-      const e = this.annotations[n];
-      if (this.isPointInAnnotation(t, e))
-        return e;
+    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, n) {
-    if (n.type === "rectangle") {
-      const e = n.coordinates;
-      return t.x >= e.x1 && t.x <= e.x2 && t.y >= e.y1 && t.y <= e.y2;
-    } else if (n.type === "polygon") {
-      const e = n.coordinates;
-      return Ht(t, e.points);
-    } else if (n.type === "rotatedRect") {
-      const e = n.coordinates, a = st(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, r = e.height / 2;
-      return a.x >= e.x - o && a.x <= e.x + o && a.y >= e.y - r && a.y <= e.y + r;
-    } else if (n.type === "point")
-      return n.coordinates.points.some((a) => Y(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 Gt(t, n.points);
+    } else if (i.type === "rotatedRect") {
+      const n = i.coordinates, r = mt(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) => at(t, r) < 10 / this.scale);
     return !1;
   }
-  getHitHandle(t, n, e) {
-    const a = this.getAnnotationHandles(e), o = 6;
-    for (let r = 0; r < a.length; r++) {
-      const i = a[r], h = this.toScreenCoords(i.x, i.y);
-      if (Math.abs(t - h.x) < o && Math.abs(n - h.y) < o)
-        return e.type === "rotatedRect" && r === 4 ? -2 : r;
+  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 n = t.coordinates;
+      const i = t.coordinates;
       return [
-        { x: n.x1, y: n.y1 },
+        { x: i.x1, y: i.y1 },
         // 左上
-        { x: n.x2, y: n.y1 },
+        { x: i.x2, y: i.y1 },
         // 右上
-        { x: n.x2, y: n.y2 },
+        { x: i.x2, y: i.y2 },
         // 右下
-        { x: n.x1, y: n.y2 }
+        { x: i.x1, y: i.y2 }
         // 左下
       ];
     } else {
@@ -405,23 +408,23 @@ class Pt {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        const n = t.coordinates, e = { x: n.x, y: n.y }, a = n.width / 2, o = n.height / 2, r = { x: n.x - a, y: n.y - o }, i = { x: n.x + a, y: n.y - o }, h = { x: n.x + a, y: n.y + o }, m = { x: n.x - a, y: n.y + o }, g = { x: n.x, y: n.y - o - 20 / this.scale };
-        return [r, i, h, m, g].map((u) => st(u, e, n.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 }, p = { x: i.x - r, y: i.y + o }, w = { x: i.x, y: i.y - o - 20 / this.scale };
+        return [c, a, d, p, w].map((u) => mt(u, n, i.angle));
       }
     }
     return [];
   }
-  checkHover(t, n, e) {
-    const a = this.getHitCategory(t, n);
-    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, n, this.activeAnnotation) !== -100) {
+    if (this.activeAnnotation && this.getHitHandle(t, i, this.activeAnnotation) !== -100) {
       this.canvas.style.cursor = "pointer";
       return;
     }
-    const o = this.getHitAnnotation(e);
+    const o = this.getHitAnnotation(n);
     o ? (this.canvas.style.cursor = "move", this.hoverAnnotation = o) : (this.canvas.style.cursor = "default", this.hoverAnnotation = null);
   }
   render() {
@@ -430,158 +433,169 @@ class Pt {
     }), this.activeAnnotation && this.drawItem(this.activeAnnotation, !0), this.renderCategories();
   }
   renderCategories() {
-    const t = this.annotations.filter((h) => h.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 n = 10;
-    const e = 10, a = 8, o = 4, r = 24, i = 8;
-    t.forEach((h) => {
-      const m = h.label || "Unlabeled", g = this.ctx.measureText(m).width + a * 2, u = this.activeAnnotation === h, f = this.hoverAnnotation === h;
-      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(n, e, g, r), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(m, n + a, e + o), n += g + i;
+    let i = 10;
+    const n = 10, r = 8, o = 4, c = 24, a = 8;
+    t.forEach((d) => {
+      const p = d.label || "Unlabeled", w = this.ctx.measureText(p).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, w, c), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(p, i + r, n + o), i += w + a;
     }), this.ctx.restore();
   }
-  getHitCategory(t, n) {
-    const e = this.annotations.filter((g) => g.type === "category");
-    if (e.length === 0) return null;
+  getHitCategory(t, i) {
+    const n = this.annotations.filter((w) => w.type === "category");
+    if (n.length === 0) return null;
     this.ctx.save(), this.ctx.font = "14px sans-serif";
-    let a = 10;
-    const o = 10, r = 8, i = 24, h = 8;
-    let m = null;
-    for (const g of e) {
-      const u = g.label || "Unlabeled", f = this.ctx.measureText(u).width + r * 2;
-      if (t >= a && t <= a + f && n >= o && n <= o + i) {
-        m = g;
+    let r = 10;
+    const o = 10, c = 8, a = 24, d = 8;
+    let p = null;
+    for (const w of n) {
+      const u = w.label || "Unlabeled", f = this.ctx.measureText(u).width + c * 2;
+      if (t >= r && t <= r + f && i >= o && i <= o + a) {
+        p = w;
         break;
       }
-      a += f + h;
+      r += f + d;
     }
-    return this.ctx.restore(), m;
+    return this.ctx.restore(), p;
   }
-  drawItem(t, n) {
+  drawItem(t, i) {
     var o;
-    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !n)
+    if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !i)
       return;
     this.ctx.save();
-    const e = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", a = n ? "#00E5FF" : e;
-    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, n ? this.ctx.fillStyle = "rgba(0, 229, 255, 0.2)" : this.ctx.fillStyle = this.hexToRgba(e, 0.2), t.type === "rectangle") {
-      const r = t.coordinates, i = this.toScreenCoords(r.x1, r.y1), h = this.toScreenCoords(r.x2, r.y2), m = Math.min(i.x, h.x), g = Math.min(i.y, h.y), u = Math.abs(i.x - h.x), f = Math.abs(i.y - h.y);
-      this.ctx.strokeRect(m, g, u, f), this.ctx.fillStyle = n ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(m, g, u, f), n && 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), p = Math.min(a.x, d.x), w = Math.min(a.y, d.y), u = Math.abs(a.x - d.x), f = Math.abs(a.y - d.y);
+      this.ctx.strokeRect(p, w, u, f), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(p, w, u, f), i && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
-      const r = t.coordinates;
-      if (r.points.length === 0) {
+      const c = t.coordinates;
+      if (c.points.length === 0) {
         this.ctx.restore();
         return;
       }
       this.ctx.beginPath();
-      const i = this.toScreenCoords(r.points[0].x, r.points[0].y);
-      this.ctx.moveTo(i.x, i.y);
-      for (let h = 1; h < r.points.length; h++) {
-        const m = this.toScreenCoords(r.points[h].x, r.points[h].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 p = this.toScreenCoords(c.points[d].x, c.points[d].y);
+        this.ctx.lineTo(p.x, p.y);
       }
       if (!this.isDrawing || t !== this.activeAnnotation)
         this.ctx.closePath();
       else if (this.lastMouseMovePoint) {
-        let h = this.lastMouseMovePoint;
-        if (this.isHoveringStartPoint && r.points.length > 0) {
-          h = r.points[0];
-          const g = this.toScreenCoords(r.points[0].x, r.points[0].y);
-          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(g.x, g.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 w = this.toScreenCoords(c.points[0].x, c.points[0].y);
+          this.ctx.save(), this.ctx.beginPath(), this.ctx.arc(w.x, w.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(h.x, h.y);
-        this.ctx.lineTo(m.x, m.y);
+        const p = this.toScreenCoords(d.x, d.y);
+        this.ctx.lineTo(p.x, p.y);
       }
-      this.ctx.stroke(), this.ctx.fillStyle = n ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fill(), n && 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 r = t.coordinates;
-      this.ctx.translate(this.toScreenCoords(r.x, r.y).x, this.toScreenCoords(r.x, r.y).y), this.ctx.rotate(r.angle * Math.PI / 180);
-      const i = r.width * this.scale, h = r.height * this.scale;
-      this.ctx.strokeRect(-i / 2, -h / 2, i, h), this.ctx.fillStyle = n ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(-i / 2, -h / 2, i, h), this.ctx.rotate(-r.angle * Math.PI / 180), this.ctx.translate(-this.toScreenCoords(r.x, r.y).x, -this.toScreenCoords(r.x, r.y).y), n && this.drawHandles(this.getAnnotationHandles(t));
-    } else t.type === "point" && t.coordinates.points.forEach((i) => {
-      const h = this.toScreenCoords(i.x, i.y);
-      this.ctx.beginPath(), this.ctx.arc(h.x, h.y, 5, 0, Math.PI * 2), this.ctx.fillStyle = n ? "#00E5FF" : e, 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((n) => {
-      const e = this.toScreenCoords(n.x, n.y);
-      this.ctx.fillRect(e.x - 4, e.y - 4, 8, 8), this.ctx.strokeRect(e.x - 4, e.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 Lt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em">\r
+const Zt = `<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>`, Tt = `<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>`, $t = `<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>`, Dt = `<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>`, Rt = `<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>`, Ut = `<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>`, Ft = `<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>`, Bt = `<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>`, Ot = `<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>`, Et = `<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>`, Vt = `<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>`, Nt = `<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>`, Jt = `<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>`, jt = `<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>`, Wt = `<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>`, qt = `<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>`, Xt = ["innerHTML"], Yt = /* @__PURE__ */ N({
+</svg>`, ve = ["innerHTML"], me = /* @__PURE__ */ Q({
   __name: "SvgIcon",
   props: {
     name: {},
     size: {}
   },
-  setup(v) {
-    const t = v, n = S(""), e = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": Lt, "../assets/svg/back.svg": Tt, "../assets/svg/connection.svg": $t, "../assets/svg/crop.svg": Dt, "../assets/svg/delete.svg": Rt, "../assets/svg/download.svg": Ut, "../assets/svg/edit.svg": Ft, "../assets/svg/hide.svg": Bt, "../assets/svg/pointer.svg": Ot, "../assets/svg/price-tag.svg": Et, "../assets/svg/rank.svg": Vt, "../assets/svg/refresh-right.svg": Nt, "../assets/svg/right.svg": Jt, "../assets/svg/view.svg": jt, "../assets/svg/zoom-in.svg": Wt, "../assets/svg/zoom-out.svg": qt });
-    return St(() => {
-      const a = `../assets/svg/${t.name}.svg`, o = e[a];
-      o ? n.value = o : (console.warn(`Icon ${t.name} not found at path ${a}`), n.value = "");
-    }), (a, o) => (x(), b("i", {
-      class: $(["svg-icon", [v.size ? `size-${v.size}` : ""]]),
-      innerHTML: n.value
-    }, null, 10, Xt));
+  setup(m) {
+    const t = m, i = k(""), n = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": Zt, "../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) => (y(), b("i", {
+      class: E(["svg-icon", [m.size ? `size-${m.size}` : ""]]),
+      innerHTML: i.value
+    }, null, 10, ve));
   }
-}), J = (v, t) => {
-  const n = v.__vccOpts || v;
-  for (const [e, a] of t)
-    n[e] = a;
-  return n;
-}, M = /* @__PURE__ */ J(Yt, [["__scopeId", "data-v-3928607b"]]), Kt = {
+}), tt = (m, t) => {
+  const i = m.__vccOpts || m;
+  for (const [n, r] of t)
+    i[n] = r;
+  return i;
+}, T = /* @__PURE__ */ tt(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"
+}, _e = {
+  key: 1,
+  class: "thumb-overlay-svg",
+  viewBox: "0 0 100 100",
+  preserveAspectRatio: "none"
+}, Ae = ["points"], Ie = { class: "image-list-text" }, ke = {
+  key: 1,
   class: "left-sidebar"
-}, Zt = ["onClick", "title"], Gt = { class: "center-area" }, Qt = {
+}, Se = ["onClick", "title"], Me = { class: "center-area" }, ze = {
   key: 0,
   class: "top-bar"
-}, te = { class: "label-selector" }, ee = { class: "tags-row" }, ne = ["onClick"], se = {
+}, $e = { class: "label-selector" }, Te = { class: "tags-row" }, Pe = ["onClick"], He = {
   key: 0,
   class: "no-labels"
-}, ie = {
+}, Le = {
   key: 1,
   class: "batch-nav"
-}, oe = ["disabled"], ae = ["disabled"], le = {
-  key: 1,
-  class: "right-sidebar"
-}, re = { class: "label-list" }, ce = { class: "label-row" }, he = ["onUpdate:modelValue", "onChange"], de = ["title"], ge = ["onClick"], ve = { class: "action-icon more-actions" }, ue = ["onClick"], me = {
+}, De = ["disabled"], Re = ["disabled"], Be = {
   key: 2,
+  class: "right-sidebar"
+}, Ue = { class: "label-list" }, Fe = { 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"
-}, fe = { class: "modal-content" }, ye = { class: "form-group" }, pe = { class: "form-group" }, xe = { class: "color-input-wrapper" }, be = /* @__PURE__ */ N({
+}, je = { class: "modal-content" }, Xe = { class: "form-group" }, Ye = { class: "form-group" }, qe = { class: "color-input-wrapper" }, Ge = /* @__PURE__ */ Q({
   __name: "ImageAnnotator",
   props: {
     annotationTypes: { default: () => ["rectangle", "polygon", "point", "rotatedRect"] },
@@ -592,491 +606,582 @@ const Lt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     readOnly: { type: Boolean, default: !1 },
     image: {},
     predictionCandidates: {},
-    reviewMode: {},
     session: {},
     requestId: {},
     minZoom: {},
     maxZoom: {}
   },
-  emits: ["annotationChange", "batchChange", "labelChange", "ready", "error", "tool:change", "viewport:change", "annotation:add", "annotation:update", "annotation:delete", "annotation:select", "prediction:request", "prediction:loaded", "prediction:apply", "prediction:reject", "review:action", "qa:issue"],
-  setup(v, { expose: t, emit: n }) {
-    const e = v, a = n, o = S(null), r = S(null), i = S(null), h = S(null), m = S(0), g = S([]), u = S(""), f = S(!1), p = S({ name: "", color: "#FF0000" }), w = S("none"), k = S([]), I = () => {
-      var c, y, _, A;
-      const s = e.batchImages[m.value], l = (s == null ? void 0 : s.imageUrl) || ((c = e.image) == null ? void 0 : c.url);
+  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 = k(null), c = k(null), a = k(null), d = k(null), p = k(0), w = k(""), u = k([]), f = k(""), _ = k(!1), M = k({ name: "", color: "#FF0000" }), B = k("none"), D = k([]), F = k({}), et = U(() => d.value === "select" && !!w.value), Y = (e) => {
+      if (!e || F.value[e]) return;
+      const s = new Image();
+      s.onload = () => {
+        const l = s.naturalWidth || 1, h = s.naturalHeight || 1;
+        F.value = {
+          ...F.value,
+          [e]: { width: l, height: h }
+        };
+      }, s.src = e;
+    }, q = () => {
+      n.batchImages.forEach((e) => {
+        Y(e.imageUrl);
+      });
+    }, x = () => {
+      var l, h, v, C;
+      const e = n.batchImages[p.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: e.requestId,
-        taskId: (y = e.session) == null ? void 0 : y.taskId,
-        imageId: ((_ = e.image) == null ? void 0 : _.id) || l,
-        operator: (A = e.session) == null ? void 0 : A.userId
+        requestId: n.requestId,
+        taskId: (h = n.session) == null ? void 0 : h.taskId,
+        imageId: ((v = n.image) == null ? void 0 : v.id) || s,
+        operator: (C = n.session) == null ? void 0 : C.userId
       };
-    }, R = (s) => {
-      var y;
-      const l = s == null ? void 0 : s.action;
-      if (!l) return;
-      const c = {
-        meta: I(),
-        action: l,
-        current: s == null ? void 0 : s.changedItem,
-        source: (y = s == null ? void 0 : s.changedItem) != null && y.predictionId ? "prediction" : "manual"
+    }, I = (e) => {
+      var h;
+      const s = e == null ? void 0 : e.action;
+      if (!s) return;
+      const l = {
+        meta: x(),
+        action: s,
+        current: e == null ? void 0 : e.changedItem,
+        source: (h = e == null ? void 0 : e.changedItem) != null && h.predictionId ? "prediction" : "manual"
       };
-      l === "add" && a("annotation:add", c), l === "update" && a("annotation:update", c), l === "delete" && a("annotation:delete", c), l === "select" && a("annotation:select", c);
-    }, Z = kt(() => e.annotationTypes.filter((s) => s !== "category")), it = (s) => ({
+      s === "add" && r("annotation:add", l), s === "update" && r("annotation:update", l), s === "delete" && r("annotation:delete", l), s === "select" && r("annotation:select", l);
+    }, H = U(() => n.annotationTypes.filter((e) => e !== "category")), V = (e) => ({
       rectangle: "crop",
       polygon: "connection",
       point: "aim",
       rotatedRect: "refresh-right",
       category: "price-tag"
-    })[s] || s, ot = (s) => ({
+    })[e] || e, lt = (e) => ({
       rectangle: "矩形框",
       polygon: "多边形",
       point: "关键点",
       rotatedRect: "旋转矩形",
       category: "分类标签"
-    })[s] || s;
-    Mt(() => {
-      if (o.value) {
-        i.value = new Pt(o.value), i.value.on("annotationChange", (l) => {
-          if (l.action === "add" && l.changedItem) {
-            const c = g.value.find((y) => y.id === u.value);
-            c && (l.changedItem.label = c.name, l.changedItem.labelId = c.id);
+    })[e] || e;
+    Yt(() => {
+      if (q(), o.value) {
+        a.value = new Kt(o.value), a.value.on("annotationChange", (s) => {
+          var l, h;
+          if (s.action === "add" && s.changedItem) {
+            const v = u.value.find((C) => C.id === f.value);
+            v && (s.changedItem.label = v.name, s.changedItem.labelId = v.id);
           }
-          a("annotationChange", l), R(l);
-        }), U(), E();
-        const s = new ResizeObserver(() => {
-          var l;
-          (l = i.value) == null || l.resize();
+          s.action === "select" ? w.value = ((l = s.changedItem) == null ? void 0 : l.id) || "" : s.action === "delete" && ((h = s.changedItem) == null ? void 0 : h.id) === w.value && (w.value = ""), r("annotationChange", s), I(s);
+        }), N(), G();
+        const e = new ResizeObserver(() => {
+          var s;
+          (s = a.value) == null || s.resize();
         });
-        r.value && s.observe(r.value), e.defaultActiveType && F(e.defaultActiveType), a("ready", { meta: I() });
+        c.value && e.observe(c.value), n.defaultActiveType && W(n.defaultActiveType), r("ready", { meta: x() });
       }
     });
-    const E = () => {
-      if (!i.value) return;
-      const s = g.value.find((c) => c.id === u.value);
-      s && i.value.setLabelStyle(s.color);
-      const l = g.value.filter((c) => c.visible).map((c) => c.name);
-      i.value.setVisibleLabels(l);
-    }, U = () => {
-      var s;
-      if (i.value)
-        if (e.batchImages.length > 0) {
-          const l = e.batchImages[m.value];
-          i.value.loadImage(l.imageUrl), l.annotations ? i.value.setAnnotations(l.annotations) : i.value.setAnnotations([]);
-        } else (s = e.image) != null && s.url && i.value.loadImage(e.image.url);
-    }, F = (s) => {
-      var l, c;
-      if (h.value = s, s !== "pan" && s !== "select" && g.value.length === 0) {
+    const G = () => {
+      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);
+    }, N = () => {
+      var e;
+      if (a.value)
+        if (w.value = "", n.batchImages.length > 0) {
+          const s = n.batchImages[p.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);
+    }, W = (e) => {
+      var s, l;
+      if (d.value = e, w.value = "", e !== "pan" && e !== "select" && u.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      s === "pan" || s === "select" ? (l = i.value) == null || l.setTool(s) : (c = i.value) == null || c.setTool(s), a("tool:change", { meta: I(), tool: s });
-    }, at = () => {
-      var s;
-      (s = i.value) != null && s.activeAnnotation && i.value.deleteAnnotation(i.value.activeAnnotation.id);
-    }, G = () => {
-      i.value && a("viewport:change", {
-        meta: I(),
-        scale: i.value.scale,
-        offset: { ...i.value.offset }
-      });
-    }, lt = () => {
-      var s;
-      (s = i.value) == null || s.zoom(1), G();
+      e === "pan" || e === "select" ? (s = a.value) == null || s.setTool(e) : (l = a.value) == null || l.setTool(e), r("tool:change", { meta: x(), tool: e });
+    }, ft = () => {
+      var e;
+      (e = a.value) != null && e.activeAnnotation && a.value.deleteAnnotation(a.value.activeAnnotation.id);
     }, rt = () => {
-      var s;
-      (s = i.value) == null || s.zoom(-1), G();
+      a.value && r("viewport:change", {
+        meta: x(),
+        scale: a.value.scale,
+        offset: { ...a.value.offset }
+      });
+    }, yt = () => {
+      var e;
+      (e = a.value) == null || e.zoom(1), rt();
+    }, pt = () => {
+      var e;
+      (e = a.value) == null || e.zoom(-1), rt();
+    }, bt = () => {
+      M.value = { name: "", color: "#2196F3" }, _.value = !0;
     }, ct = () => {
-      p.value = { name: "", color: "#2196F3" }, f.value = !0;
-    }, Q = () => {
-      f.value = !1;
-    }, ht = () => {
-      if (!p.value.name.trim()) {
+      _.value = !1;
+    }, xt = () => {
+      if (!M.value.name.trim()) {
         alert("请输入标签名称");
         return;
       }
-      const l = {
+      const s = {
         id: Date.now().toString(),
-        name: p.value.name,
-        color: p.value.color,
+        name: M.value.name,
+        color: M.value.color,
         visible: !0
       };
-      g.value.push(l), a("labelChange", g.value), g.value.length === 1 && B(l), Q();
-    }, B = (s) => {
-      var l;
-      u.value = s.id, (l = i.value) == null || l.setLabelStyle(s.color);
-    }, dt = (s, l) => {
-      if (!s.startsWith("#")) return s;
-      let c = 0, y = 0, _ = 0;
-      return s.length === 4 ? (c = parseInt(s[1] + s[1], 16), y = parseInt(s[2] + s[2], 16), _ = parseInt(s[3] + s[3], 16)) : s.length === 7 && (c = parseInt(s.slice(1, 3), 16), y = parseInt(s.slice(3, 5), 16), _ = parseInt(s.slice(5, 7), 16)), `rgba(${c}, ${y}, ${_}, ${l})`;
-    }, gt = (s) => {
-      var l;
-      if (s.id === u.value && ((l = i.value) == null || l.setLabelStyle(s.color)), i.value) {
-        const c = i.value.getAnnotations();
-        let y = !1;
-        c.forEach((_) => {
-          _.label === s.name && (_.style || (_.style = {}), _.style.strokeColor = s.color, _.style.fillColor = dt(s.color, 0.2), y = !0);
-        }), y && i.value.render();
+      u.value.push(s), r("labelChange", u.value), u.value.length === 1 && J(s), ct();
+    }, J = (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", g.value);
-    }, vt = (s) => {
-      s.visible = !s.visible, E();
-    }, ut = (s) => {
-      const l = g.value.findIndex((c) => c.id === s);
-      l > -1 && (g.value.splice(l, 1), a("labelChange", g.value), u.value === s && (u.value = g.value.length > 0 ? g.value[0].id : "", u.value && B(g.value[0])), E());
+      r("labelChange", u.value);
+    }, _t = (e) => {
+      e.visible = !e.visible, G();
+    }, At = (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 && J(u.value[0])), G());
     };
-    V(() => e.labels, (s) => {
-      const l = JSON.parse(JSON.stringify(s || []));
-      if (g.value = l, g.value.length > 0)
-        if (!u.value || !g.value.find((c) => c.id === u.value))
-          B(g.value[0]);
+    j(() => 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))
+          J(u.value[0]);
         else {
-          const c = g.value.find((y) => y.id === u.value);
-          c && B(c);
+          const l = u.value.find((h) => h.id === f.value);
+          l && J(l);
         }
       else
-        u.value = "";
-      E();
+        f.value = "";
+      G();
     }, { immediate: !0, deep: !0 });
-    const mt = () => {
-      m.value > 0 && (j(), m.value--, U(), W());
-    }, ft = () => {
-      m.value < e.batchImages.length - 1 && (j(), m.value++, U(), W());
-    }, j = () => {
-      if (i.value) {
-        const s = i.value.getAnnotations();
-        e.batchImages[m.value].annotations = s;
+    const It = () => {
+      p.value > 0 && (nt(), p.value--, N(), st());
+    }, kt = () => {
+      p.value < n.batchImages.length - 1 && (nt(), p.value++, N(), st());
+    }, nt = () => {
+      if (a.value) {
+        const e = a.value.getAnnotations();
+        n.batchImages[p.value].annotations = e;
       }
-    }, W = () => {
-      const s = e.batchImages[m.value];
-      a("batchChange", {
-        currentIndex: m.value,
-        total: e.batchImages.length,
-        currentImageUrl: s.imageUrl,
-        currentAnnotations: s.annotations || []
+    }, st = () => {
+      const e = n.batchImages[p.value];
+      r("batchChange", {
+        currentIndex: p.value,
+        total: n.batchImages.length,
+        currentImageUrl: e.imageUrl,
+        currentAnnotations: e.annotations || []
       });
-    }, tt = (s = []) => {
-      var _;
-      if (!i.value) return;
-      if (k.value = JSON.parse(JSON.stringify(s)), k.value.length === 0) {
-        w.value = "none";
+    }, ht = (e = []) => {
+      var v;
+      if (!a.value) return;
+      if (D.value = JSON.parse(JSON.stringify(e)), D.value.length === 0) {
+        B.value = "none";
         return;
       }
-      w.value = "loaded";
-      const c = (i.value.getAnnotations() || []).filter((A) => !A.predictionId), y = k.value.map((A) => {
-        const P = JSON.parse(JSON.stringify(A.annotation));
-        return P.id = P.id || `pred-${A.id}`, P.predictionId = A.id, P.modelRunId = A.modelRunId || P.modelRunId, P.confidence = A.confidence ?? P.confidence, P.reviewStatus = P.reviewStatus || "draft", P;
-      });
-      i.value.setAnnotations([...c, ...y]), a("prediction:loaded", {
-        meta: I(),
-        modelRunId: (_ = k.value[0]) == null ? void 0 : _.modelRunId,
-        candidates: k.value
+      B.value = "loaded";
+      const l = (a.value.getAnnotations() || []).filter((C) => !C.predictionId), h = D.value.map((C) => {
+        const S = JSON.parse(JSON.stringify(C.annotation));
+        return S.id = S.id || `pred-${C.id}`, S.predictionId = C.id, S.modelRunId = C.modelRunId || S.modelRunId, S.confidence = C.confidence ?? S.confidence, S.reviewStatus = S.reviewStatus || "draft", S;
       });
-    }, yt = (s) => {
-      w.value = "loading", a("prediction:request", {
-        meta: I(),
-        threshold: s
+      a.value.setAnnotations([...l, ...h]), r("prediction:loaded", {
+        meta: x(),
+        modelRunId: (v = D.value[0]) == null ? void 0 : v.modelRunId,
+        candidates: D.value
       });
-    }, pt = (s, l) => {
-      var _;
-      if (!i.value) return [];
-      w.value = "applying";
-      const y = (i.value.getAnnotations() || []).filter((A) => A.predictionId && s.includes(A.predictionId));
-      return y.forEach((A) => {
-        A.reviewStatus = "accepted";
-      }), w.value = "applied", a("prediction:apply", {
-        meta: I(),
-        modelRunId: (_ = y[0]) == null ? void 0 : _.modelRunId,
-        candidateIds: s,
-        threshold: l,
-        acceptedAnnotations: y
-      }), i.value.render(), y;
-    }, xt = (s, l) => {
-      var _;
-      if (!i.value) return;
-      const c = i.value.getAnnotations() || [], y = c.filter((A) => !(A.predictionId && s.includes(A.predictionId)));
-      i.value.setAnnotations(y), a("prediction:reject", {
-        meta: I(),
-        modelRunId: (_ = c.find((A) => A.predictionId && s.includes(A.predictionId))) == null ? void 0 : _.modelRunId,
-        candidateIds: s,
-        reason: l
+    }, St = (e, s) => {
+      var v;
+      if (!a.value) return [];
+      B.value = "applying";
+      const h = (a.value.getAnnotations() || []).filter((C) => C.predictionId && e.includes(C.predictionId));
+      return h.forEach((C) => {
+        C.reviewStatus = "accepted";
+      }), B.value = "applied", r("prediction:apply", {
+        meta: x(),
+        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((C) => !(C.predictionId && e.includes(C.predictionId)));
+      a.value.setAnnotations(h), r("prediction:reject", {
+        meta: x(),
+        modelRunId: (v = l.find((C) => C.predictionId && e.includes(C.predictionId))) == null ? void 0 : v.modelRunId,
+        candidateIds: e,
+        reason: s
       });
-    }, bt = (s, l, c) => {
-      if (!i.value) return;
-      const y = i.value.getAnnotations() || [], _ = {
-        pass: "accepted",
-        reject: "rejected",
-        revise: "needs_fix"
+    }, 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);
+    }, dt = () => {
+      var e;
+      return ((e = a.value) == null ? void 0 : e.getAnnotations()) || [];
+    }, Tt = (e = "json") => {
+      var l, h;
+      const s = dt();
+      return {
+        format: e,
+        image: ((l = n.batchImages[p.value]) == null ? void 0 : l.imageUrl) || ((h = n.image) == null ? void 0 : h.url) || "",
+        annotations: s
       };
-      y.forEach((A) => {
-        l.includes(A.id) && (A.reviewStatus = _[s]);
-      }), i.value.render(), a("review:action", {
-        meta: I(),
-        reviewAction: s,
-        targetAnnotationIds: l,
-        comment: c
-      });
-    }, wt = (s, l, c) => {
-      a("qa:issue", {
-        meta: I(),
-        issueType: s,
-        targetAnnotationIds: l,
-        detail: c
-      });
-    }, At = (s, l = []) => {
-      i.value && (i.value.loadImage(s.url), i.value.setAnnotations(l));
-    }, Ct = (s) => {
-      var l;
-      (l = i.value) == null || l.setAnnotations(s);
-    }, et = () => {
+    }, gt = (e) => {
+      e >= 0 && e < n.batchImages.length && (nt(), p.value = e, N(), st());
+    }, Pt = (e) => {
       var s;
-      return ((s = i.value) == null ? void 0 : s.getAnnotations()) || [];
+      return e === p.value && a.value ? a.value.getAnnotations() || [] : ((s = n.batchImages[e]) == null ? void 0 : s.annotations) || [];
+    }, Ht = (e) => e.type === "rectangle", Lt = (e) => e.type === "polygon", Dt = (e) => e.type === "point", Rt = (e) => e.type === "rotatedRect", K = (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";
+    }, ut = (e) => {
+      const s = e.coordinates;
+      return (s == null ? void 0 : s.points) || [];
+    }, Z = (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 ? F.value[s.imageUrl] : void 0;
+      return l || (s != null && s.imageUrl && Y(s.imageUrl), { width: 1, height: 1 });
+    }, Bt = (e) => {
+      const s = n.batchImages[e];
+      return s != null && s.width && (s != null && s.height) ? !0 : s != null && s.imageUrl ? !!F.value[s.imageUrl] : !1;
+    }, Ut = (e, s) => {
+      const l = s.coordinates, h = Z(e), v = K(s), C = Math.min(l.x1, l.x2), S = Math.min(l.y1, l.y2), Nt = Math.max(l.x1, l.x2), Wt = Math.max(l.y1, l.y2);
+      return {
+        left: `${C / h.width * 100}%`,
+        top: `${S / h.height * 100}%`,
+        width: `${(Nt - C) / h.width * 100}%`,
+        height: `${(Wt - S) / h.height * 100}%`,
+        borderColor: v,
+        backgroundColor: `${v}22`
+      };
+    }, Ft = (e, s) => {
+      const l = Z(e);
+      return ut(s).map((h) => `${h.x / l.width * 100},${h.y / l.height * 100}`).join(" ");
+    }, Et = (e) => {
+      const s = K(e);
+      return {
+        fill: `${s}33`,
+        stroke: s,
+        strokeWidth: "1.4"
+      };
+    }, Ot = (e, s, l) => {
+      const h = Z(e), v = K(l);
+      return {
+        left: `${s.x / h.width * 100}%`,
+        top: `${s.y / h.height * 100}%`,
+        backgroundColor: v
+      };
+    }, Vt = (e, s) => {
+      const l = s.coordinates, h = Z(e), v = K(s), C = Math.abs(l.width), S = Math.abs(l.height);
+      return {
+        left: `${(l.x - C / 2) / h.width * 100}%`,
+        top: `${(l.y - S / 2) / h.height * 100}%`,
+        width: `${C / h.width * 100}%`,
+        height: `${S / h.height * 100}%`,
+        transform: `rotate(${l.angle || 0}deg)`,
+        borderColor: v,
+        backgroundColor: `${v}22`
+      };
     };
     return t({
-      jumpTo: (s) => {
-        s >= 0 && s < e.batchImages.length && (j(), m.value = s, U(), W());
-      },
-      setImage: At,
-      setAnnotations: Ct,
-      getAnnotations: et,
-      selectTool: F,
-      loadPredictionCandidates: tt,
-      requestPrediction: yt,
-      applyPredictions: pt,
-      rejectPredictions: xt,
-      reviewAction: bt,
-      reportQaIssue: wt,
-      exportAnnotations: (s = "json") => {
-        var c, y;
-        const l = et();
-        return {
-          format: s,
-          image: ((c = e.batchImages[m.value]) == null ? void 0 : c.imageUrl) || ((y = e.image) == null ? void 0 : y.url) || "",
-          annotations: l
-        };
-      },
+      jumpTo: gt,
+      setImage: zt,
+      setAnnotations: $t,
+      getAnnotations: dt,
+      selectTool: W,
+      loadPredictionCandidates: ht,
+      applyPredictions: St,
+      rejectPredictions: Mt,
+      exportAnnotations: Tt,
       getAllAnnotations: () => {
-        var s, l;
-        return e.batchImages.length > 0 ? e.batchImages : [{
-          imageUrl: ((s = e.image) == null ? void 0 : s.url) || "",
-          annotations: ((l = i.value) == null ? void 0 : l.getAnnotations()) || []
+        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()) || []
         }];
       },
       getCurrentAnnotation: () => {
-        var s, l, c;
+        var e, s, l;
         return {
-          imageUrl: ((s = e.batchImages[m.value]) == null ? void 0 : s.imageUrl) || ((l = e.image) == null ? void 0 : l.url) || "",
-          annotations: ((c = i.value) == null ? void 0 : c.getAnnotations()) || []
+          imageUrl: ((e = n.batchImages[p.value]) == null ? void 0 : e.imageUrl) || ((s = n.image) == null ? void 0 : s.url) || "",
+          annotations: ((l = a.value) == null ? void 0 : l.getAnnotations()) || []
         };
       }
-    }), V(() => {
-      var s;
-      return (s = e.image) == null ? void 0 : s.url;
+    }), j(() => {
+      var e;
+      return (e = n.image) == null ? void 0 : e.url;
     }, () => {
-      var s;
-      e.batchImages.length === 0 && ((s = e.image) != null && s.url) && U();
-    }), V(() => e.predictionCandidates, (s) => {
-      s && tt(s);
-    }, { immediate: !0, deep: !0 }), (s, l) => (x(), b("div", {
-      class: $(["annotation-container", v.theme])
+      var e;
+      n.batchImages.length === 0 && ((e = n.image) != null && e.url) && N();
+    }), j(() => n.predictionCandidates, (e) => {
+      e && ht(e);
+    }, { immediate: !0, deep: !0 }), j(
+      () => n.batchImages.map((e) => `${e.imageUrl}:${e.width || ""}x${e.height || ""}`),
+      () => {
+        q();
+      },
+      { immediate: !0 }
+    ), (e, s) => (y(), b("div", {
+      class: E(["annotation-container", m.theme])
     }, [
-      v.readOnly ? L("", !0) : (x(), b("div", Kt, [
-        d("div", {
-          class: $(["tool-btn", { active: h.value === "pan" }]),
-          onClick: l[0] || (l[0] = (c) => F("pan")),
+      m.batchImages && m.batchImages.length > 0 ? (y(), b("div", fe, [
+        g("div", ye, "批量图片（" + $(m.batchImages.length) + "）", 1),
+        g("div", pe, [
+          (y(!0), b(L, null, R(m.batchImages, (l, h) => (y(), b("button", {
+            key: `${l.imageUrl}-${h}`,
+            class: E(["image-list-item", { active: h === p.value }]),
+            onClick: (v) => gt(h)
+          }, [
+            g("div", xe, [
+              g("img", {
+                src: l.imageUrl,
+                alt: `第${h + 1}张`,
+                class: "image-list-thumb"
+              }, null, 8, we),
+              Bt(h) ? (y(), b("div", Ce, [
+                (y(!0), b(L, null, R(Pt(h), (v) => (y(), b(L, {
+                  key: v.id
+                }, [
+                  Ht(v) ? (y(), b("div", {
+                    key: 0,
+                    class: "thumb-overlay-rect",
+                    style: O(Ut(h, v))
+                  }, null, 4)) : Lt(v) ? (y(), b("svg", _e, [
+                    g("polygon", {
+                      points: Ft(h, v),
+                      style: O(Et(v))
+                    }, null, 12, Ae)
+                  ])) : Dt(v) ? (y(!0), b(L, { key: 2 }, R(ut(v), (C, S) => (y(), b("div", {
+                    key: `${v.id}-${S}`,
+                    class: "thumb-overlay-point",
+                    style: O(Ot(h, C, v))
+                  }, null, 4))), 128)) : Rt(v) ? (y(), b("div", {
+                    key: 3,
+                    class: "thumb-overlay-rotated",
+                    style: O(Vt(h, v))
+                  }, null, 4)) : z("", !0)
+                ], 64))), 128))
+              ])) : z("", !0)
+            ]),
+            g("span", Ie, "第 " + $(h + 1) + " 张", 1)
+          ], 10, be))), 128))
+        ])
+      ])) : z("", !0),
+      m.readOnly ? z("", !0) : (y(), b("div", ke, [
+        g("div", {
+          class: E(["tool-btn", { active: d.value === "pan" }]),
+          onClick: s[0] || (s[0] = (l) => W("pan")),
           title: "拖动"
         }, [
-          z(M, { name: "rank" })
+          P(T, { name: "rank" })
         ], 2),
-        d("div", {
-          class: $(["tool-btn", { active: h.value === "select" }]),
-          onClick: l[1] || (l[1] = (c) => F("select")),
+        g("div", {
+          class: E(["tool-btn", { active: d.value === "select" }]),
+          onClick: s[1] || (s[1] = (l) => W("select")),
           title: "选择"
         }, [
-          z(M, { name: "pointer" })
+          P(T, { name: "pointer" })
         ], 2),
-        l[4] || (l[4] = d("div", { class: "divider" }, null, -1)),
-        (x(!0), b(T, null, D(Z.value, (c) => (x(), b("div", {
-          key: c,
-          class: $(["tool-btn", { active: h.value === c }]),
-          onClick: (y) => F(c),
-          title: ot(c)
+        s[4] || (s[4] = g("div", { class: "divider" }, null, -1)),
+        (y(!0), b(L, null, R(H.value, (l) => (y(), b("div", {
+          key: l,
+          class: E(["tool-btn", { active: d.value === l }]),
+          onClick: (h) => W(l),
+          title: lt(l)
         }, [
-          z(M, {
-            name: it(c)
+          P(T, {
+            name: V(l)
           }, null, 8, ["name"])
-        ], 10, Zt))), 128)),
-        l[5] || (l[5] = d("div", { class: "divider" }, null, -1)),
-        d("div", {
+        ], 10, Se))), 128)),
+        s[5] || (s[5] = g("div", { class: "divider" }, null, -1)),
+        g("div", {
           class: "tool-btn",
-          onClick: lt,
+          onClick: yt,
           title: "放大"
         }, [
-          z(M, { name: "zoom-in" })
+          P(T, { name: "zoom-in" })
         ]),
-        d("div", {
+        g("div", {
           class: "tool-btn",
-          onClick: rt,
+          onClick: pt,
           title: "缩小"
         }, [
-          z(M, { name: "zoom-out" })
+          P(T, { name: "zoom-out" })
         ]),
-        l[6] || (l[6] = d("div", { class: "divider" }, null, -1)),
-        d("div", {
+        s[6] || (s[6] = g("div", { class: "divider" }, null, -1)),
+        et.value ? (y(), b("div", {
+          key: 0,
           class: "tool-btn",
-          onClick: at,
+          onClick: ft,
           title: "删除选中"
         }, [
-          z(M, { name: "delete" })
-        ])
+          P(T, { name: "delete" })
+        ])) : z("", !0)
       ])),
-      d("div", Gt, [
-        v.readOnly ? L("", !0) : (x(), b("div", Qt, [
-          d("div", te, [
-            l[7] || (l[7] = d("span", { class: "label-text" }, "当前标签:", -1)),
-            d("div", ee, [
-              (x(!0), b(T, null, D(g.value, (c) => (x(), b("div", {
-                key: c.id,
-                class: $(["tag-chip", { active: u.value === c.id }]),
-                style: K({ backgroundColor: c.color, borderColor: c.color }),
-                onClick: (y) => B(c)
-              }, H(c.name), 15, ne))), 128)),
-              g.value.length === 0 ? (x(), b("div", se, "请在右侧创建标签")) : L("", !0)
+      g("div", Me, [
+        m.readOnly ? z("", !0) : (y(), b("div", ze, [
+          g("div", $e, [
+            s[7] || (s[7] = g("span", { class: "label-text" }, "当前标签:", -1)),
+            g("div", Te, [
+              (y(!0), b(L, null, R(u.value, (l) => (y(), b("div", {
+                key: l.id,
+                class: E(["tag-chip", { active: f.value === l.id }]),
+                style: O({ backgroundColor: l.color, borderColor: l.color }),
+                onClick: (h) => J(l)
+              }, $(l.name), 15, Pe))), 128)),
+              u.value.length === 0 ? (y(), b("div", He, "请在右侧创建标签")) : z("", !0)
             ])
           ])
         ])),
-        d("div", {
+        g("div", {
           class: "canvas-wrapper",
           ref_key: "canvasWrapper",
-          ref: r
+          ref: c
         }, [
-          d("canvas", {
+          g("canvas", {
             ref_key: "canvasRef",
             ref: o
           }, null, 512)
         ], 512),
-        v.batchImages && v.batchImages.length > 0 ? (x(), b("div", ie, [
-          d("button", {
-            onClick: mt,
-            disabled: m.value <= 0
+        m.batchImages && m.batchImages.length > 0 ? (y(), b("div", Le, [
+          g("button", {
+            onClick: It,
+            disabled: p.value <= 0
           }, [
-            z(M, { name: "back" }),
-            l[8] || (l[8] = O(" 上一张 ", -1))
-          ], 8, oe),
-          d("span", null, H(m.value + 1) + " / " + H(v.batchImages.length), 1),
-          d("button", {
-            onClick: ft,
-            disabled: m.value >= v.batchImages.length - 1
+            P(T, { name: "back" }),
+            s[8] || (s[8] = X(" 上一张 ", -1))
+          ], 8, De),
+          g("span", null, $(p.value + 1) + " / " + $(m.batchImages.length), 1),
+          g("button", {
+            onClick: kt,
+            disabled: p.value >= m.batchImages.length - 1
           }, [
-            l[9] || (l[9] = O(" 下一张 ", -1)),
-            z(M, { name: "right" })
-          ], 8, ae)
-        ])) : L("", !0)
+            s[9] || (s[9] = X(" 下一张 ", -1)),
+            P(T, { name: "right" })
+          ], 8, Re)
+        ])) : z("", !0)
       ]),
-      v.readOnly ? L("", !0) : (x(), b("div", le, [
-        d("div", { class: "sidebar-header" }, [
-          l[10] || (l[10] = d("h3", null, "标签管理", -1)),
-          d("button", {
+      m.readOnly ? z("", !0) : (y(), b("div", Be, [
+        g("div", { class: "sidebar-header" }, [
+          s[10] || (s[10] = g("h3", null, "标签管理", -1)),
+          g("button", {
             class: "add-btn",
-            onClick: ct
+            onClick: bt
           }, "添加标签")
         ]),
-        d("div", re, [
-          (x(!0), b(T, null, D(g.value, (c) => (x(), b("div", {
-            key: c.id,
+        g("div", Ue, [
+          (y(!0), b(L, null, R(u.value, (l) => (y(), b("div", {
+            key: l.id,
             class: "label-item"
           }, [
-            d("div", ce, [
-              d("label", {
+            g("div", Fe, [
+              g("label", {
                 class: "color-wrapper",
-                style: K({ backgroundColor: c.color })
+                style: O({ backgroundColor: l.color })
               }, [
-                q(d("input", {
+                it(g("input", {
                   type: "color",
-                  "onUpdate:modelValue": (y) => c.color = y,
-                  onChange: (y) => gt(c),
+                  "onUpdate:modelValue": (h) => l.color = h,
+                  onChange: (h) => Ct(l),
                   style: { visibility: "hidden", width: "0", height: "0" }
-                }, null, 40, he), [
-                  [X, c.color]
+                }, null, 40, Ee), [
+                  [ot, l.color]
                 ])
               ], 4),
-              d("span", {
+              g("span", {
                 class: "label-name",
-                title: c.name
-              }, H(c.name), 9, de),
-              d("span", {
+                title: l.name
+              }, $(l.name), 9, Oe),
+              g("span", {
                 class: "action-icon eye",
-                onClick: (y) => vt(c)
+                onClick: (h) => _t(l)
               }, [
-                c.visible ? (x(), nt(M, {
+                l.visible ? (y(), vt(T, {
                   key: 0,
                   name: "view"
-                })) : (x(), nt(M, {
+                })) : (y(), vt(T, {
                   key: 1,
                   name: "hide"
                 }))
-              ], 8, ge),
-              d("div", ve, [
-                l[11] || (l[11] = d("span", { class: "dots" }, "•••", -1)),
-                d("span", {
+              ], 8, Ve),
+              g("div", Ne, [
+                s[11] || (s[11] = g("span", { class: "dots" }, "•••", -1)),
+                g("span", {
                   class: "delete-btn",
-                  onClick: (y) => ut(c.id),
+                  onClick: (h) => At(l.id),
                   title: "删除"
                 }, [
-                  z(M, { name: "delete" })
-                ], 8, ue)
+                  P(T, { name: "delete" })
+                ], 8, We)
               ])
             ])
           ]))), 128))
         ])
       ])),
-      f.value ? (x(), b("div", me, [
-        d("div", fe, [
-          l[14] || (l[14] = d("h3", null, "新增标签", -1)),
-          d("div", ye, [
-            l[12] || (l[12] = d("label", null, "名称", -1)),
-            q(d("input", {
-              "onUpdate:modelValue": l[2] || (l[2] = (c) => p.value.name = c),
+      _.value ? (y(), 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)),
+            it(g("input", {
+              "onUpdate:modelValue": s[2] || (s[2] = (l) => M.value.name = l),
               placeholder: "请输入标签名称",
               class: "modal-input"
             }, null, 512), [
-              [X, p.value.name]
+              [ot, M.value.name]
             ])
           ]),
-          d("div", pe, [
-            l[13] || (l[13] = d("label", null, "颜色", -1)),
-            d("div", xe, [
-              q(d("input", {
+          g("div", Ye, [
+            s[13] || (s[13] = g("label", null, "颜色", -1)),
+            g("div", qe, [
+              it(g("input", {
                 type: "color",
-                "onUpdate:modelValue": l[3] || (l[3] = (c) => p.value.color = c),
+                "onUpdate:modelValue": s[3] || (s[3] = (l) => M.value.color = l),
                 class: "modal-color-picker"
               }, null, 512), [
-                [X, p.value.color]
+                [ot, M.value.color]
               ]),
-              d("span", null, H(p.value.color), 1)
+              g("span", null, $(M.value.color), 1)
             ])
           ]),
-          d("div", { class: "modal-actions" }, [
-            d("button", {
-              onClick: Q,
+          g("div", { class: "modal-actions" }, [
+            g("button", {
+              onClick: ct,
               class: "cancel-btn"
             }, "取消"),
-            d("button", {
-              onClick: ht,
+            g("button", {
+              onClick: xt,
               class: "confirm-btn"
             }, "确认")
           ])
         ])
-      ])) : L("", !0)
+      ])) : z("", !0)
     ], 2));
   }
-}), we = /* @__PURE__ */ J(be, [["__scopeId", "data-v-7b013204"]]), Ae = {
+}), Ke = /* @__PURE__ */ tt(Ge, [["__scopeId", "data-v-22c2957b"]]), Ze = {
   class: "thumbnail-wrapper",
   ref: "wrapper"
-}, Ce = ["src", "alt"], _e = ["viewBox"], Ie = ["x", "y", "width", "height", "stroke"], Se = ["points", "stroke"], ke = ["x", "y", "fill"], Me = {
+}, Qe = ["src", "alt"], tn = ["viewBox"], en = ["x", "y", "width", "height", "stroke"], nn = ["points", "stroke"], sn = ["x", "y", "fill"], on = {
   key: 1,
   class: "loading-placeholder"
-}, ze = /* @__PURE__ */ N({
+}, an = /* @__PURE__ */ Q({
   __name: "AnnotationThumbnail",
   props: {
     src: {},
@@ -1084,23 +1189,23 @@ const Lt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     alt: {},
     labels: {}
   },
-  setup(v) {
-    const t = v, n = S(null), e = S(!1), a = S(0), o = S(0), r = () => {
-      n.value && (a.value = n.value.naturalWidth, o.value = n.value.naturalHeight, e.value = !0);
-    }, i = (u) => {
+  setup(m) {
+    const t = m, i = k(null), n = k(!1), r = k(0), o = k(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 p = t.labels.find((w) => w.name === u.label);
-        if (p) return p.color;
+        const _ = t.labels.find((M) => M.name === u.label);
+        if (_) return _.color;
       }
       return "#FF0000";
-    }, h = (u) => {
-      const f = u.coordinates, p = Math.min(f.x1, f.x2), w = Math.min(f.y1, f.y2), k = Math.abs(f.x1 - f.x2), I = Math.abs(f.y1 - f.y2);
-      return { x: p, y: w, width: k, height: I };
-    }, m = (u) => u.coordinates.points.map((p) => `${p.x},${p.y}`).join(" "), g = (u) => {
+    }, d = (u) => {
+      const f = u.coordinates, _ = Math.min(f.x1, f.x2), M = Math.min(f.y1, f.y2), B = Math.abs(f.x1 - f.x2), D = Math.abs(f.y1 - f.y2);
+      return { x: _, y: M, width: B, height: D };
+    }, p = (u) => u.coordinates.points.map((_) => `${_.x},${_.y}`).join(" "), w = (u) => {
       if (u.type === "rectangle") {
-        const f = h(u);
+        const f = d(u);
         return { x: f.x, y: f.y - 5 };
       } else if (u.type === "polygon") {
         const f = u.coordinates.points;
@@ -1108,171 +1213,196 @@ const Lt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       }
       return { x: 0, y: 0 };
     };
-    return (u, f) => (x(), b("div", Ae, [
-      d("img", {
+    return (u, f) => (y(), b("div", Ze, [
+      g("img", {
         ref_key: "img",
-        ref: n,
-        src: v.src,
+        ref: i,
+        src: m.src,
         class: "thumbnail-image",
-        onLoad: r,
-        alt: v.alt
-      }, null, 40, Ce),
-      e.value ? (x(), b("svg", {
+        onLoad: c,
+        alt: m.alt
+      }, null, 40, Qe),
+      n.value ? (y(), b("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${a.value} ${o.value}`,
+        viewBox: `0 0 ${r.value} ${o.value}`,
         preserveAspectRatio: "none"
       }, [
-        (x(!0), b(T, null, D(v.annotations, (p) => (x(), b(T, {
-          key: p.id
+        (y(!0), b(L, null, R(m.annotations, (_) => (y(), b(L, {
+          key: _.id
         }, [
-          p.type === "rectangle" ? (x(), b("rect", {
+          _.type === "rectangle" ? (y(), b("rect", {
             key: 0,
-            x: h(p).x,
-            y: h(p).y,
-            width: h(p).width,
-            height: h(p).height,
-            stroke: i(p),
+            x: d(_).x,
+            y: d(_).y,
+            width: d(_).width,
+            height: d(_).height,
+            stroke: a(_),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, Ie)) : L("", !0),
-          p.type === "polygon" ? (x(), b("polygon", {
+          }, null, 8, en)) : z("", !0),
+          _.type === "polygon" ? (y(), b("polygon", {
             key: 1,
-            points: m(p),
-            stroke: i(p),
+            points: p(_),
+            stroke: a(_),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, Se)) : L("", !0),
-          p.label ? (x(), b("text", {
+          }, null, 8, nn)) : z("", !0),
+          _.label ? (y(), b("text", {
             key: 2,
-            x: g(p).x,
-            y: g(p).y,
-            fill: i(p),
+            x: w(_).x,
+            y: w(_).y,
+            fill: a(_),
             "font-size": "14",
             "font-weight": "bold",
             class: "anno-label"
-          }, H(p.label), 9, ke)) : L("", !0)
+          }, $(_.label), 9, sn)) : z("", !0)
         ], 64))), 128))
-      ], 8, _e)) : (x(), b("div", Me, "Loading..."))
+      ], 8, tn)) : (y(), b("div", on, "Loading..."))
     ], 512));
   }
-}), He = /* @__PURE__ */ J(ze, [["__scopeId", "data-v-78bcbe0c"]]), Pe = { class: "batch-annotator" }, Le = {
+}), ln = /* @__PURE__ */ tt(an, [["__scopeId", "data-v-78bcbe0c"]]), rn = { class: "batch-annotator" }, cn = {
   key: 0,
   class: "gallery-view"
-}, Te = { class: "gallery-header" }, $e = { class: "label-summary" }, De = { class: "gallery-grid" }, Re = ["onClick"], Ue = { class: "thumbnail-wrapper" }, Fe = { class: "img-meta" }, Be = { class: "img-index" }, Oe = { class: "anno-count" }, Ee = { class: "bottom-bar" }, Ve = {
+}, 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 = {
+  key: 0,
+  class: "bottom-bar"
+}, bn = {
   key: 1,
   class: "editor-view"
-}, Ne = { class: "editor-header" }, Je = { class: "header-left" }, je = { class: "editor-title" }, We = { class: "editor-content" }, qe = /* @__PURE__ */ N({
+}, xn = { class: "editor-header" }, wn = { class: "header-left" }, Cn = { class: "editor-title" }, _n = { class: "editor-content" }, An = /* @__PURE__ */ Q({
   __name: "BatchAnnotator",
   props: {
     images: {},
-    labels: {}
+    labels: {},
+    actionBar: {},
+    clickToEnterEditor: { type: Boolean }
   },
-  emits: ["export", "update:images"],
-  setup(v, { emit: t }) {
-    const n = v, e = t, a = S("gallery"), o = S([]), r = S(0), i = S(null);
-    V(() => n.images, (w) => {
-      o.value = JSON.parse(JSON.stringify(w));
+  emits: ["export", "update:images", "imageClick"],
+  setup(m, { emit: t }) {
+    const i = m, n = t, r = k("gallery"), o = k([]), c = k(0), a = k(null), d = U(() => {
+      var x, I;
+      return ((I = (x = i.actionBar) == null ? void 0 : x.annotateButton) == null ? void 0 : I.show) === !0;
+    }), p = U(() => {
+      var x, I;
+      return ((I = (x = i.actionBar) == null ? void 0 : x.exportButton) == null ? void 0 : I.show) === !0;
+    }), w = U(() => d.value || p.value), u = U(() => {
+      var x, I;
+      return ((I = (x = i.actionBar) == null ? void 0 : x.annotateButton) == null ? void 0 : I.text) || "手动标注";
+    }), f = U(() => {
+      var x, I;
+      return ((I = (x = i.actionBar) == null ? void 0 : x.exportButton) == null ? void 0 : I.text) || "导出";
+    }), _ = U(() => i.clickToEnterEditor !== !1);
+    j(() => i.images, (x) => {
+      o.value = JSON.parse(JSON.stringify(x));
     }, { immediate: !0, deep: !0 });
-    const h = (w) => {
-      r.value = w, a.value = "editor", zt(() => {
-        i.value && i.value.jumpTo && i.value.jumpTo(w);
+    const M = (x) => {
+      c.value = x, r.value = "editor", qt(() => {
+        a.value && a.value.jumpTo && a.value.jumpTo(x);
       });
-    }, m = () => {
-      if (i.value && i.value.getCurrentAnnotation) {
-        const w = i.value.getCurrentAnnotation();
-        o.value[r.value] && (o.value[r.value].annotations = w.annotations);
+    }, B = (x, I) => {
+      if (_.value) {
+        M(x);
+        return;
       }
-      a.value = "gallery";
-    }, g = () => {
-      e("export", o.value);
-    }, u = (w) => {
-      r.value = w.currentIndex, o.value[w.currentIndex] && (o.value[w.currentIndex].annotations = w.currentAnnotations);
-    }, f = (w) => {
-      if (i.value && i.value.getCurrentAnnotation) {
-        const k = i.value.getCurrentAnnotation();
-        o.value[r.value] && (o.value[r.value].annotations = k.annotations, e("update:images", o.value));
+      n("imageClick", { index: x, image: I });
+    }, D = () => {
+      if (a.value && a.value.getCurrentAnnotation) {
+        const x = a.value.getCurrentAnnotation();
+        o.value[c.value] && (o.value[c.value].annotations = x.annotations);
       }
-    }, p = (w) => {
+      r.value = "gallery";
+    }, F = () => {
+      n("export", o.value);
+    }, et = (x) => {
+      c.value = x.currentIndex, o.value[x.currentIndex] && (o.value[x.currentIndex].annotations = x.currentAnnotations);
+    }, Y = (x) => {
+      if (a.value && a.value.getCurrentAnnotation) {
+        const I = a.value.getCurrentAnnotation();
+        o.value[c.value] && (o.value[c.value].annotations = I.annotations, n("update:images", o.value));
+      }
+    }, q = (x) => {
     };
-    return (w, k) => (x(), b("div", Pe, [
-      a.value === "gallery" ? (x(), b("div", Le, [
-        d("div", Te, [
-          d("h3", null, "批量查看与标注 (" + H(o.value.length) + " 张)", 1),
-          d("div", $e, [
-            (x(!0), b(T, null, D(v.labels, (I) => (x(), b("span", {
-              key: I.id,
+    return (x, I) => (y(), b("div", rn, [
+      r.value === "gallery" ? (y(), b("div", cn, [
+        g("div", hn, [
+          g("h3", null, "批量查看与标注 (" + $(o.value.length) + " 张)", 1),
+          g("div", dn, [
+            (y(!0), b(L, null, R(m.labels, (H) => (y(), b("span", {
+              key: H.id,
               class: "label-badge",
-              style: K({ backgroundColor: I.color })
-            }, H(I.name), 5))), 128))
+              style: O({ backgroundColor: H.color })
+            }, $(H.name), 5))), 128))
           ])
         ]),
-        d("div", De, [
-          (x(!0), b(T, null, D(o.value, (I, R) => (x(), b("div", {
-            key: R,
+        g("div", gn, [
+          (y(!0), b(L, null, R(o.value, (H, V) => (y(), b("div", {
+            key: V,
             class: "gallery-item",
-            onClick: (Z) => h(R)
+            onClick: (lt) => B(V, H)
           }, [
-            d("div", Ue, [
-              z(He, {
-                src: I.imageUrl,
-                annotations: I.annotations || [],
-                labels: v.labels
+            g("div", vn, [
+              P(ln, {
+                src: H.imageUrl,
+                annotations: H.annotations || [],
+                labels: m.labels
               }, null, 8, ["src", "annotations", "labels"])
             ]),
-            d("div", Fe, [
-              d("span", Be, "#" + H(R + 1), 1),
-              d("span", Oe, H((I.annotations || []).length) + " 标注", 1)
+            g("div", mn, [
+              g("span", fn, "#" + $(V + 1), 1),
+              g("span", yn, $((H.annotations || []).length) + " 标注", 1)
             ])
-          ], 8, Re))), 128))
+          ], 8, un))), 128))
         ]),
-        d("div", Ee, [
-          d("button", {
+        w.value ? (y(), b("div", pn, [
+          d.value ? (y(), b("button", {
+            key: 0,
             class: "action-btn primary",
-            onClick: k[0] || (k[0] = (I) => h(0))
+            onClick: I[0] || (I[0] = (H) => M(0))
           }, [
-            z(M, { name: "edit" }),
-            k[1] || (k[1] = O(" 手动标注 ", -1))
-          ]),
-          d("button", {
+            P(T, { name: "edit" }),
+            X(" " + $(u.value), 1)
+          ])) : z("", !0),
+          p.value ? (y(), b("button", {
+            key: 1,
             class: "action-btn success",
-            onClick: g
+            onClick: F
           }, [
-            z(M, { name: "download" }),
-            k[2] || (k[2] = O(" 导出 ", -1))
-          ])
-        ])
-      ])) : (x(), b("div", Ve, [
-        d("div", Ne, [
-          d("div", Je, [
-            d("button", {
+            P(T, { name: "download" }),
+            X(" " + $(f.value), 1)
+          ])) : z("", !0)
+        ])) : z("", !0)
+      ])) : (y(), b("div", bn, [
+        g("div", xn, [
+          g("div", wn, [
+            g("button", {
               class: "back-btn",
-              onClick: m
+              onClick: D
             }, [
-              z(M, { name: "back" }),
-              k[3] || (k[3] = O(" 返回列表 ", -1))
+              P(T, { name: "back" }),
+              I[1] || (I[1] = X(" 返回列表 ", -1))
             ]),
-            d("span", je, "正在标注: " + H(r.value + 1) + " / " + H(o.value.length), 1)
+            g("span", Cn, "正在标注: " + $(c.value + 1) + " / " + $(o.value.length), 1)
           ])
         ]),
-        d("div", We, [
-          z(we, {
+        g("div", _n, [
+          P(Ke, {
             ref_key: "annotatorRef",
-            ref: i,
+            ref: a,
             batchImages: o.value,
-            labels: v.labels,
+            labels: m.labels,
             annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
-            onBatchChange: u,
-            onAnnotationChange: f,
-            onLabelChange: p
+            onBatchChange: et,
+            onAnnotationChange: Y,
+            onLabelChange: q
           }, null, 8, ["batchImages", "labels"])
         ])
       ]))
     ]));
   }
-}), Ge = /* @__PURE__ */ J(qe, [["__scopeId", "data-v-87f3e002"]]);
+}), Sn = /* @__PURE__ */ tt(An, [["__scopeId", "data-v-bbb647e1"]]);
 export {
-  Ge as BatchAnnotator,
-  we as ImageAnnotator,
-  Ge as default
+  Sn as BatchAnnotator,
+  Ke as ImageAnnotator,
+  Sn as default
 };