luo-image-annotator 0.0.15 → 0.0.16

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

@@ -1,19 +1,19 @@
 var ae = Object.defineProperty;
 var le = (w, t, n) => t in w ? ae(w, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : w[t] = n;
 var T = (w, t, n) => le(w, typeof t != "symbol" ? t + "" : t, n);
-import { defineComponent as ct, ref as M, watchEffect as ce, openBlock as v, createElementBlock as m, normalizeClass as X, computed as V, onMounted as kt, nextTick as at, watch as K, createElementVNode as h, toDisplayString as z, Fragment as N, renderList as J, normalizeStyle as U, createCommentVNode as B, createVNode as R, withModifiers as It, createBlock as vt, withDirectives as ft, vModelText as mt, createTextVNode as lt } from "vue";
+import { defineComponent as ct, ref as M, watchEffect as ce, openBlock as v, createElementBlock as m, normalizeClass as X, computed as V, onMounted as yt, nextTick as at, watch as K, createElementVNode as h, toDisplayString as z, Fragment as N, renderList as J, normalizeStyle as U, createCommentVNode as B, createVNode as R, withModifiers as It, createBlock as vt, withDirectives as ft, vModelText as mt, createTextVNode as lt } from "vue";
 const pt = (w, t) => Math.sqrt(Math.pow(w.x - t.x, 2) + Math.pow(w.y - t.y, 2)), re = (w, t) => {
   let n = !1;
-  for (let e = 0, l = t.length - 1; e < t.length; l = e++) {
-    const o = t[e].x, c = t[e].y, g = t[l].x, u = t[l].y;
+  for (let e = 0, a = t.length - 1; e < t.length; a = e++) {
+    const o = t[e].x, c = t[e].y, g = t[a].x, u = t[a].y;
     c > w.y != u > w.y && w.x < (g - o) * (w.y - c) / (u - c) + o && (n = !n);
   }
   return n;
 }, At = (w, t, n) => {
-  const e = n * (Math.PI / 180), l = Math.cos(e), o = Math.sin(e), c = w.x - t.x, g = w.y - t.y;
+  const e = n * (Math.PI / 180), a = Math.cos(e), o = Math.sin(e), c = w.x - t.x, g = w.y - t.y;
   return {
-    x: t.x + (c * l - g * o),
-    y: t.y + (c * o + g * l)
+    x: t.x + (c * a - g * o),
+    y: t.y + (c * o + g * a)
   };
 };
 class he {
@@ -89,8 +89,8 @@ class he {
   zoom(t) {
     const e = t > 0 ? this.scale * 1.1 : this.scale / 1.1;
     if (e < 0.1 || e > 10) return;
-    const l = this.canvas.width / 2, o = this.canvas.height / 2, c = this.toImageCoords(l, o);
-    this.scale = e, this.offset.x = l - c.x * this.scale, this.offset.y = o - c.y * this.scale, this.clampViewportOffset(), this.render();
+    const a = this.canvas.width / 2, o = this.canvas.height / 2, c = this.toImageCoords(a, o);
+    this.scale = e, this.offset.x = a - c.x * this.scale, this.offset.y = o - c.y * this.scale, this.clampViewportOffset(), this.render();
   }
   resize() {
     this.fitImageToCanvas(), this.render();
@@ -120,18 +120,18 @@ class he {
     if (this.img.width === 0 || this.img.height === 0) return;
     const t = this.img.width * this.scale, n = this.img.height * this.scale, e = 100;
     if (t <= this.canvas.width) {
-      const l = -t + e, o = this.canvas.width - e;
-      this.offset.x = Math.min(o, Math.max(l, this.offset.x));
+      const a = -t + e, o = this.canvas.width - e;
+      this.offset.x = Math.min(o, Math.max(a, this.offset.x));
     } else {
-      const l = this.canvas.width - t - e, o = e;
-      this.offset.x = Math.min(o, Math.max(l, this.offset.x));
+      const a = this.canvas.width - t - e, o = e;
+      this.offset.x = Math.min(o, Math.max(a, this.offset.x));
     }
     if (n <= this.canvas.height) {
-      const l = -n + e, o = this.canvas.height - e;
-      this.offset.y = Math.min(o, Math.max(l, this.offset.y));
+      const a = -n + e, o = this.canvas.height - e;
+      this.offset.y = Math.min(o, Math.max(a, this.offset.y));
     } else {
-      const l = this.canvas.height - n - e, o = e;
-      this.offset.y = Math.min(o, Math.max(l, this.offset.y));
+      const a = this.canvas.height - n - e, o = e;
+      this.offset.y = Math.min(o, Math.max(a, this.offset.y));
     }
   }
   // --- 事件处理 ---
@@ -153,19 +153,19 @@ class he {
     }
   }
   handleMouseDown(t) {
-    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, l = t.clientY - n.top, o = this.toImageCoords(e, l);
+    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, a);
     if (this.interactionMode === "pan") {
-      this.isPanning = !0, this.panStartPoint = { x: e, y: l }, this.canvas.style.cursor = "grabbing";
+      this.isPanning = !0, this.panStartPoint = { x: e, y: a }, this.canvas.style.cursor = "grabbing";
       return;
     }
     if (this.interactionMode === "select" && this.activeAnnotation) {
-      const u = this.getHitHandle(e, l, this.activeAnnotation);
+      const u = this.getHitHandle(e, a, this.activeAnnotation);
       if (u !== -100) {
         this.isDragging = !0, this.dragStartPoint = o, this.selectedHandleIndex = u, this.dragStartAnnotation = JSON.parse(JSON.stringify(this.activeAnnotation));
         return;
       }
     }
-    const c = this.interactionMode === "select" ? this.getHitCategory(e, l) : null;
+    const c = this.interactionMode === "select" ? this.getHitCategory(e, a) : 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;
@@ -203,10 +203,10 @@ class he {
     this.activeAnnotation = null, this.render();
   }
   handleMouseMove(t) {
-    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, l = t.clientY - n.top, o = this.toImageCoords(e, l);
+    const n = this.canvas.getBoundingClientRect(), e = t.clientX - n.left, a = t.clientY - n.top, o = this.toImageCoords(e, a);
     if (this.isPanning && this.panStartPoint) {
-      const c = e - this.panStartPoint.x, g = l - this.panStartPoint.y;
-      this.offset.x += c, this.offset.y += g, this.clampViewportOffset(), this.panStartPoint = { x: e, y: l }, this.render();
+      const c = e - this.panStartPoint.x, g = a - this.panStartPoint.y;
+      this.offset.x += c, this.offset.y += g, this.clampViewportOffset(), this.panStartPoint = { x: e, y: a }, this.render();
       return;
     }
     if (this.lastMouseMovePoint = o, this.isDrawing) {
@@ -219,7 +219,7 @@ class he {
           this.isHoveringStartPoint = !1;
       }
       this.updateDrawing(o);
-    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, l, o);
+    } else this.isDragging && this.activeAnnotation && this.dragStartPoint ? this.updateDragging(o) : this.checkHover(e, a, o);
     this.render();
   }
   handleMouseUp(t) {
@@ -244,8 +244,8 @@ class he {
   // 辅助函数：将 hex 转换为 rgba
   hexToRgba(t, n) {
     if (!t.startsWith("#")) return t;
-    const e = parseInt(t.slice(1, 3), 16), l = parseInt(t.slice(3, 5), 16), o = parseInt(t.slice(5, 7), 16);
-    return `rgba(${e}, ${l}, ${o}, ${n})`;
+    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})`;
   }
   startDrawing(t) {
     if (!this.currentTool) return;
@@ -300,8 +300,8 @@ class he {
         const n = this.activeAnnotation.coordinates;
         n.x2 = t.x, n.y2 = t.y;
       } else if (this.activeAnnotation.type === "rotatedRect" && this.dragStartPoint) {
-        const n = this.activeAnnotation.coordinates, e = Math.abs(t.x - this.dragStartPoint.x), l = Math.abs(t.y - this.dragStartPoint.y);
-        n.width = e * 2, n.height = l * 2;
+        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;
       } else this.activeAnnotation.type;
   }
   finishDrawing() {
@@ -312,8 +312,8 @@ class he {
           this.activeAnnotation = null, this.isDrawing = !1;
           return;
         }
-        const n = Math.min(t.x1, t.x2), e = Math.max(t.x1, t.x2), l = Math.min(t.y1, t.y2), o = Math.max(t.y1, t.y2);
-        t.x1 = n, t.x2 = e, t.y1 = l, t.y2 = o, this.annotations.push(this.activeAnnotation), this.emit("annotationChange", { action: "add", changedItem: this.activeAnnotation, imageUrl: this.imageUrl });
+        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 });
       } else if (this.activeAnnotation.type === "polygon") {
         if (this.activeAnnotation.coordinates.points.length < 3) {
           this.activeAnnotation = null, this.isDrawing = !1;
@@ -337,42 +337,42 @@ class he {
     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);
   }
-  moveAnnotation(t, n, e, l) {
+  moveAnnotation(t, n, e, a) {
     if (t.type === "rectangle") {
       const o = n.coordinates, c = t.coordinates;
-      c.x1 = o.x1 + e, c.x2 = o.x2 + e, c.y1 = o.y1 + l, c.y2 = o.y2 + l;
+      c.x1 = o.x1 + e, c.x2 = o.x2 + e, c.y1 = o.y1 + a, c.y2 = o.y2 + a;
     } else if (t.type === "point") {
       const o = n.coordinates, c = t.coordinates;
-      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + l }));
+      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + a }));
     } else if (t.type === "rotatedRect") {
       const o = n.coordinates, c = t.coordinates;
-      c.x = o.x + e, c.y = o.y + l;
+      c.x = o.x + e, c.y = o.y + a;
     } else if (t.type === "polygon") {
       const o = n.coordinates, c = t.coordinates;
-      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + l }));
+      c.points = o.points.map((g) => ({ x: g.x + e, y: g.y + a }));
     } else if (t.type === "category") {
       const o = n.coordinates, c = t.coordinates;
-      o && c && (c.x = o.x + e, c.y = o.y + l);
+      o && c && (c.x = o.x + e, c.y = o.y + a);
     }
   }
-  resizeAnnotation(t, n, e, l) {
+  resizeAnnotation(t, n, e, a) {
     if (t.type === "rectangle") {
       const o = t.coordinates;
-      e === 0 && (o.x1 = l.x, o.y1 = l.y), e === 1 && (o.x2 = l.x, o.y1 = l.y), e === 2 && (o.x2 = l.x, o.y2 = l.y), e === 3 && (o.x1 = l.x, o.y2 = l.y);
+      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);
     } else if (t.type === "polygon") {
       const o = t.coordinates;
-      e >= 0 && e < o.points.length && (o.points[e] = l);
+      e >= 0 && e < o.points.length && (o.points[e] = a);
     } else if (t.type === "point") {
       const o = t.coordinates;
-      e >= 0 && e < o.points.length && (o.points[e] = l);
+      e >= 0 && e < o.points.length && (o.points[e] = a);
     } else if (t.type === "rotatedRect") {
       const o = t.coordinates;
       if (e === -2) {
-        const c = o.x, g = o.y, u = l.x - c, r = l.y - g;
+        const c = o.x, g = o.y, u = a.x - c, r = a.y - g;
         let k = Math.atan2(r, u) * 180 / Math.PI;
         k += 90, o.angle = k;
       } else {
-        const c = o.angle * Math.PI / 180, g = Math.cos(-c), u = Math.sin(-c), r = l.x - o.x, k = l.y - o.y, x = r * g - k * u, D = r * u + k * g;
+        const c = o.angle * Math.PI / 180, g = Math.cos(-c), u = Math.sin(-c), r = a.x - o.x, k = a.y - o.y, x = r * g - k * u, D = r * u + k * g;
         (e === 0 || e === 3) && (o.width / 2, o.width = Math.abs(x) * 2), (e === 1 || e === 2) && (o.width = Math.abs(x) * 2), (e === 0 || e === 1) && (o.height = Math.abs(D) * 2), (e === 2 || e === 3) && (o.height = Math.abs(D) * 2);
       }
     }
@@ -394,16 +394,16 @@ class he {
       const e = n.coordinates;
       return re(t, e.points);
     } else if (n.type === "rotatedRect") {
-      const e = n.coordinates, l = At(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, c = e.height / 2;
-      return l.x >= e.x - o && l.x <= e.x + o && l.y >= e.y - c && l.y <= e.y + c;
+      const e = n.coordinates, a = At(t, { x: e.x, y: e.y }, -e.angle), o = e.width / 2, c = e.height / 2;
+      return a.x >= e.x - o && a.x <= e.x + o && a.y >= e.y - c && a.y <= e.y + c;
     } else if (n.type === "point")
-      return n.coordinates.points.some((l) => pt(t, l) < 10 / this.scale);
+      return n.coordinates.points.some((a) => pt(t, a) < 10 / this.scale);
     return !1;
   }
   getHitHandle(t, n, e) {
-    const l = this.getAnnotationHandles(e), o = 6;
-    for (let c = 0; c < l.length; c++) {
-      const g = l[c], u = this.toScreenCoords(g.x, g.y);
+    const a = this.getAnnotationHandles(e), o = 6;
+    for (let c = 0; c < a.length; c++) {
+      const g = a[c], u = this.toScreenCoords(g.x, g.y);
       if (Math.abs(t - u.x) < o && Math.abs(n - u.y) < o)
         return e.type === "rotatedRect" && c === 4 ? -2 : c;
     }
@@ -428,16 +428,16 @@ class he {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        const n = t.coordinates, e = { x: n.x, y: n.y }, l = n.width / 2, o = n.height / 2, c = { x: n.x - l, y: n.y - o }, g = { x: n.x + l, y: n.y - o }, u = { x: n.x + l, y: n.y + o }, r = { x: n.x - l, y: n.y + o }, k = { x: n.x, y: n.y - o - 20 / this.scale };
+        const n = t.coordinates, e = { x: n.x, y: n.y }, a = n.width / 2, o = n.height / 2, c = { x: n.x - a, y: n.y - o }, g = { x: n.x + a, y: n.y - o }, u = { x: n.x + a, y: n.y + o }, r = { x: n.x - a, y: n.y + o }, k = { x: n.x, y: n.y - o - 20 / this.scale };
         return [c, g, u, r, k].map((x) => At(x, e, n.angle));
       }
     }
     return [];
   }
   checkHover(t, n, e) {
-    const l = this.getHitCategory(t, n);
-    if (l) {
-      this.canvas.style.cursor = "pointer", this.hoverAnnotation = l;
+    const a = this.getHitCategory(t, n);
+    if (a) {
+      this.canvas.style.cursor = "pointer", this.hoverAnnotation = a;
       return;
     }
     if (this.activeAnnotation && this.getHitHandle(t, n, this.activeAnnotation) !== -100) {
@@ -459,21 +459,21 @@ class he {
     const n = 12;
     t.forEach((e) => {
       var _;
-      const l = e.label || "未命名分类", o = this.ctx.measureText(l).width + n * 2, c = 28, g = this.activeAnnotation === e, u = this.hoverAnnotation === e;
+      const a = e.label || "未命名分类", o = this.ctx.measureText(a).width + n * 2, c = 28, g = this.activeAnnotation === e, u = this.hoverAnnotation === e;
       let r = { x: 20, y: 20 };
       e.coordinates && typeof e.coordinates.x == "number" && typeof e.coordinates.y == "number" && (r = this.toScreenCoords(e.coordinates.x, e.coordinates.y));
       const k = r.x - o / 2, x = r.y - c / 2, D = ((_ = e.style) == null ? void 0 : _.strokeColor) || "#2196F3";
-      this.ctx.fillStyle = g ? D : this.hexToRgba(D, 0.85), u && !g && (this.ctx.fillStyle = D), g ? (this.ctx.strokeStyle = "#ffffff", this.ctx.lineWidth = 2) : (this.ctx.strokeStyle = "transparent", this.ctx.lineWidth = 0), this.ctx.beginPath(), this.ctx.roundRect(k, x, o, c, 6), this.ctx.fill(), g && (this.ctx.stroke(), this.ctx.save(), this.ctx.strokeStyle = D, this.ctx.lineWidth = 2, this.ctx.strokeRect(k - 3, x - 3, o + 6, c + 6), this.ctx.restore()), this.ctx.fillStyle = "#ffffff", this.ctx.fillText(l, r.x, r.y);
+      this.ctx.fillStyle = g ? D : this.hexToRgba(D, 0.85), u && !g && (this.ctx.fillStyle = D), g ? (this.ctx.strokeStyle = "#ffffff", this.ctx.lineWidth = 2) : (this.ctx.strokeStyle = "transparent", this.ctx.lineWidth = 0), this.ctx.beginPath(), this.ctx.roundRect(k, x, o, c, 6), this.ctx.fill(), g && (this.ctx.stroke(), this.ctx.save(), this.ctx.strokeStyle = D, this.ctx.lineWidth = 2, this.ctx.strokeRect(k - 3, x - 3, o + 6, c + 6), this.ctx.restore()), this.ctx.fillStyle = "#ffffff", this.ctx.fillText(a, r.x, r.y);
     }), this.ctx.restore();
   }
   getHitCategory(t, n) {
     const e = this.annotations.filter((g) => g.type === "category");
     if (e.length === 0) return null;
     this.ctx.save(), this.ctx.font = "14px sans-serif";
-    const l = 12, o = 28;
+    const a = 12, o = 28;
     let c = null;
     for (let g = e.length - 1; g >= 0; g--) {
-      const u = e[g], r = u.label || "未命名分类", k = this.ctx.measureText(r).width + l * 2;
+      const u = e[g], r = u.label || "未命名分类", k = this.ctx.measureText(r).width + a * 2;
       let x = { x: 20, y: 20 };
       u.coordinates && typeof u.coordinates.x == "number" && typeof u.coordinates.y == "number" && (x = this.toScreenCoords(u.coordinates.x, u.coordinates.y));
       const D = x.x - k / 2, _ = x.y - o / 2;
@@ -489,8 +489,8 @@ class he {
     if (this.visibleLabels.size > 0 && !this.visibleLabels.has(t.label) && !n)
       return;
     this.ctx.save();
-    const e = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", l = n ? "#00E5FF" : e;
-    if (this.ctx.strokeStyle = l, this.ctx.lineWidth = 2, t.type === "rectangle") {
+    const e = ((o = t.style) == null ? void 0 : o.strokeColor) || "#FF4081", a = n ? "#00E5FF" : e;
+    if (this.ctx.strokeStyle = a, this.ctx.lineWidth = 2, t.type === "rectangle") {
       const c = t.coordinates, g = this.toScreenCoords(c.x1, c.y1), u = this.toScreenCoords(c.x2, c.y2), r = Math.min(g.x, u.x), k = Math.min(g.y, u.y), x = Math.abs(g.x - u.x), D = Math.abs(g.y - u.y);
       this.ctx.strokeRect(r, k, x, D), n && this.drawHandles(this.getAnnotationHandles(t));
     } else if (t.type === "polygon") {
@@ -546,17 +546,17 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
   setup(w) {
     const t = w, n = M(""), e = /* @__PURE__ */ Object.assign({ "../assets/svg/aim.svg": de, "../assets/svg/back.svg": ge, "../assets/svg/connection.svg": ue, "../assets/svg/crop.svg": ve, "../assets/svg/delete.svg": fe, "../assets/svg/download.svg": me, "../assets/svg/edit.svg": pe, "../assets/svg/first.svg": ye, "../assets/svg/hide.svg": we, "../assets/svg/last.svg": xe, "../assets/svg/pointer.svg": be, "../assets/svg/price-tag.svg": Ce, "../assets/svg/rank.svg": _e, "../assets/svg/refresh-right.svg": ke, "../assets/svg/right.svg": Ie, "../assets/svg/view.svg": Ae, "../assets/svg/zoom-in.svg": Se, "../assets/svg/zoom-out.svg": Me });
     return ce(() => {
-      const l = `../assets/svg/${t.name}.svg`, o = e[l];
-      o ? n.value = o : (console.warn(`Icon ${t.name} not found at path ${l}`), n.value = "");
-    }), (l, o) => (v(), m("i", {
+      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) => (v(), m("i", {
       class: X(["svg-icon", [w.size ? `size-${w.size}` : ""]]),
       innerHTML: n.value
     }, null, 10, Te));
   }
 }), rt = (w, t) => {
   const n = w.__vccOpts || w;
-  for (const [e, l] of t)
-    n[e] = l;
+  for (const [e, a] of t)
+    n[e] = a;
   return n;
 }, L = /* @__PURE__ */ rt(De, [["__scopeId", "data-v-3928607b"]]), Pe = {
   key: 0,
@@ -614,12 +614,12 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
   },
   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(w, { expose: t, emit: n }) {
-    const e = w, l = n, o = M(null), c = M(null), g = M(null), u = M([]), r = M(null), k = M(null), x = M(0), D = M(""), _ = M([]), $ = M(""), q = M(!1), C = M({ name: "", color: "#FF0000" }), S = M("none"), p = M([]), H = M({}), O = V(() => k.value === "select" && !!D.value), G = M(!1), Z = V(() => _.value.find((s) => s.id === $.value)), yt = (s) => {
+    const e = w, a = n, o = M(null), c = M(null), g = M(null), u = M([]), r = M(null), k = M(null), x = M(0), D = M(""), _ = M([]), $ = M(""), q = M(!1), C = M({ name: "", color: "#FF0000" }), S = M("none"), p = M([]), H = M({}), O = V(() => k.value === "select" && !!D.value), G = M(!1), Z = V(() => _.value.find((s) => s.id === $.value)), wt = (s) => {
       s.stopPropagation(), G.value = !G.value;
-    }, wt = (s) => {
+    }, xt = (s) => {
       tt(s), G.value = !1;
     };
-    kt(() => {
+    yt(() => {
       document.addEventListener("click", (s) => {
         s.target.closest(".floating-label-selector") || (G.value = !1);
       });
@@ -628,10 +628,10 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       if (!s || H.value[s]) return;
       const i = new Image();
       i.onload = () => {
-        const a = i.naturalWidth || 1, d = i.naturalHeight || 1;
+        const l = i.naturalWidth || 1, d = i.naturalHeight || 1;
         H.value = {
           ...H.value,
-          [s]: { width: a, height: d }
+          [s]: { width: l, height: d }
         };
       }, i.src = s;
     }, nt = () => {
@@ -641,9 +641,9 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     }, ht = (s, i) => {
       u.value[i] = s;
     }, Q = (s = x.value) => {
-      const i = g.value, a = u.value[s];
-      if (!i || !a) return;
-      const d = i.scrollTop, f = d + i.clientHeight, A = a.offsetTop, P = A + a.offsetHeight;
+      const i = g.value, l = u.value[s];
+      if (!i || !l) return;
+      const d = i.scrollTop, f = d + i.clientHeight, A = l.offsetTop, P = A + l.offsetHeight;
       if (A < d) {
         i.scrollTo({
           top: Math.max(A - 8, 0),
@@ -656,8 +656,8 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         behavior: "smooth"
       });
     }, j = () => {
-      var a, d, f, A;
-      const s = e.batchImages[x.value], i = (s == null ? void 0 : s.imageUrl) || ((a = e.image) == null ? void 0 : a.url);
+      var l, d, f, A;
+      const s = e.batchImages[x.value], i = (s == null ? void 0 : s.imageUrl) || ((l = e.image) == null ? void 0 : l.url);
       return {
         eventId: `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
         timestamp: Date.now(),
@@ -670,13 +670,13 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       var d;
       const i = s == null ? void 0 : s.action;
       if (!i) return;
-      const a = {
+      const l = {
         meta: j(),
         action: i,
         current: s == null ? void 0 : s.changedItem,
         source: (d = s == null ? void 0 : s.changedItem) != null && d.predictionId ? "prediction" : "manual"
       };
-      i === "add" && l("annotation:add", a), i === "update" && l("annotation:update", a), i === "delete" && l("annotation:delete", a), i === "select" && l("annotation:select", a);
+      i === "add" && a("annotation:add", l), i === "update" && a("annotation:update", l), i === "delete" && a("annotation:delete", l), i === "select" && a("annotation:select", l);
     }, b = V(() => e.annotationTypes), I = (s) => ({
       rectangle: "crop",
       polygon: "connection",
@@ -690,28 +690,28 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       rotatedRect: "旋转矩形",
       category: "分类标签"
     })[s] || s;
-    kt(() => {
+    yt(() => {
       if (nt(), o.value) {
         r.value = new he(o.value), r.value.on("annotationChange", (i) => {
-          var a, d;
+          var l, d;
           if (i.action === "add" && i.changedItem) {
             const f = _.value.find((A) => A.id === $.value);
             f && (i.changedItem.label = f.name, i.changedItem.labelId = f.id);
           }
-          i.action === "select" ? D.value = ((a = i.changedItem) == null ? void 0 : a.id) || "" : i.action === "delete" && ((d = i.changedItem) == null ? void 0 : d.id) === D.value && (D.value = ""), l("annotationChange", i), y(i);
+          i.action === "select" ? D.value = ((l = i.changedItem) == null ? void 0 : l.id) || "" : i.action === "delete" && ((d = i.changedItem) == null ? void 0 : d.id) === D.value && (D.value = ""), a("annotationChange", i), y(i);
         }), W(), E();
         const s = new ResizeObserver(() => {
           var i;
           (i = r.value) == null || i.resize();
         });
-        c.value && s.observe(c.value), e.defaultActiveType && Y(e.defaultActiveType), at(() => Q()), l("ready", { meta: j() });
+        c.value && s.observe(c.value), e.defaultActiveType && Y(e.defaultActiveType), at(() => Q()), a("ready", { meta: j() });
       }
     });
     const E = () => {
       if (!r.value) return;
-      const s = _.value.find((a) => a.id === $.value);
+      const s = _.value.find((l) => l.id === $.value);
       s && r.value.setLabelStyle(s.color);
-      const i = _.value.filter((a) => a.visible).map((a) => a.name);
+      const i = _.value.filter((l) => l.visible).map((l) => l.name);
       r.value.setVisibleLabels(i);
     }, W = () => {
       var s;
@@ -724,27 +724,27 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           r.value.loadImage(i.imageUrl), i.annotations ? r.value.setAnnotations(i.annotations) : r.value.setAnnotations([]);
         } else (s = e.image) != null && s.url && r.value.loadImage(e.image.url);
     }, Y = (s) => {
-      var i, a;
+      var i, l;
       if (k.value = s, D.value = "", s !== "pan" && s !== "select" && _.value.length === 0) {
         alert("请先创建标签！");
         return;
       }
-      s === "pan" || s === "select" ? (i = r.value) == null || i.setTool(s) : (a = r.value) == null || a.setTool(s), l("tool:change", { meta: j(), tool: s });
+      s === "pan" || s === "select" ? (i = r.value) == null || i.setTool(s) : (l = r.value) == null || l.setTool(s), a("tool:change", { meta: j(), tool: s });
     }, St = () => {
       var s;
       (s = r.value) != null && s.activeAnnotation && r.value.deleteAnnotation(r.value.activeAnnotation.id);
-    }, xt = () => {
-      r.value && l("viewport:change", {
+    }, bt = () => {
+      r.value && a("viewport:change", {
         meta: j(),
         scale: r.value.scale,
         offset: { ...r.value.offset }
       });
     }, Mt = () => {
       var s;
-      (s = r.value) == null || s.zoom(1), xt();
+      (s = r.value) == null || s.zoom(1), bt();
     }, Tt = () => {
       var s;
-      (s = r.value) == null || s.zoom(-1), xt();
+      (s = r.value) == null || s.zoom(-1), bt();
     }, Dt = () => {
       C.value = { name: "", color: "#2196F3" }, q.value = !0;
     }, dt = () => {
@@ -760,38 +760,38 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         color: C.value.color,
         visible: !0
       };
-      _.value.push(i), l("labelChange", _.value), E(), _.value.length === 1 && tt(i), dt();
+      _.value.push(i), a("labelChange", _.value), E(), _.value.length === 1 && tt(i), dt();
     }, tt = (s) => {
       var i;
       $.value = s.id, (i = r.value) == null || i.setLabelStyle(s.color);
     }, zt = (s, i) => {
       if (!s.startsWith("#")) return s;
-      let a = 0, d = 0, f = 0;
-      return s.length === 4 ? (a = parseInt(s[1] + s[1], 16), d = parseInt(s[2] + s[2], 16), f = parseInt(s[3] + s[3], 16)) : s.length === 7 && (a = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), f = parseInt(s.slice(5, 7), 16)), `rgba(${a}, ${d}, ${f}, ${i})`;
+      let l = 0, d = 0, f = 0;
+      return s.length === 4 ? (l = parseInt(s[1] + s[1], 16), d = parseInt(s[2] + s[2], 16), f = parseInt(s[3] + s[3], 16)) : s.length === 7 && (l = parseInt(s.slice(1, 3), 16), d = parseInt(s.slice(3, 5), 16), f = parseInt(s.slice(5, 7), 16)), `rgba(${l}, ${d}, ${f}, ${i})`;
     }, $t = (s) => {
       var i;
       if (s.id === $.value && ((i = r.value) == null || i.setLabelStyle(s.color)), r.value) {
-        const a = r.value.getAnnotations();
+        const l = r.value.getAnnotations();
         let d = !1;
-        a.forEach((f) => {
+        l.forEach((f) => {
           f.label === s.name && (f.style || (f.style = {}), f.style.strokeColor = s.color, f.style.fillColor = zt(s.color, 0.2), d = !0);
         }), d && r.value.render();
       }
-      l("labelChange", _.value), E();
+      a("labelChange", _.value), E();
     }, Lt = (s) => {
       s.visible = !s.visible, E();
     }, Bt = (s) => {
-      const i = _.value.findIndex((a) => a.id === s);
-      i > -1 && (_.value.splice(i, 1), l("labelChange", _.value), $.value === s && ($.value = _.value.length > 0 ? _.value[0].id : "", $.value && tt(_.value[0])), E());
+      const i = _.value.findIndex((l) => l.id === s);
+      i > -1 && (_.value.splice(i, 1), a("labelChange", _.value), $.value === s && ($.value = _.value.length > 0 ? _.value[0].id : "", $.value && tt(_.value[0])), E());
     };
     K(() => e.labels, (s) => {
       const i = JSON.parse(JSON.stringify(s || []));
       if (_.value = i, _.value.length > 0)
-        if (!$.value || !_.value.find((a) => a.id === $.value))
+        if (!$.value || !_.value.find((l) => l.id === $.value))
           tt(_.value[0]);
         else {
-          const a = _.value.find((d) => d.id === $.value);
-          a && tt(a);
+          const l = _.value.find((d) => d.id === $.value);
+          l && tt(l);
         }
       else
         $.value = "";
@@ -812,13 +812,13 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       }
     }, ut = () => {
       const s = e.batchImages[x.value];
-      l("batchChange", {
+      a("batchChange", {
         currentIndex: x.value,
         total: e.batchImages.length,
         currentImageUrl: s.imageUrl,
         currentAnnotations: s.annotations || []
       });
-    }, bt = (s = []) => {
+    }, Ct = (s = []) => {
       var f;
       if (!r.value) return;
       if (p.value = JSON.parse(JSON.stringify(s)), p.value.length === 0) {
@@ -826,11 +826,11 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         return;
       }
       S.value = "loaded";
-      const a = (r.value.getAnnotations() || []).filter((A) => !A.predictionId), d = p.value.map((A) => {
+      const l = (r.value.getAnnotations() || []).filter((A) => !A.predictionId), d = p.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;
       });
-      r.value.setAnnotations([...a, ...d]), l("prediction:loaded", {
+      r.value.setAnnotations([...l, ...d]), a("prediction:loaded", {
         meta: j(),
         modelRunId: (f = p.value[0]) == null ? void 0 : f.modelRunId,
         candidates: p.value
@@ -842,7 +842,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       const d = (r.value.getAnnotations() || []).filter((A) => A.predictionId && s.includes(A.predictionId));
       return d.forEach((A) => {
         A.reviewStatus = "accepted";
-      }), S.value = "applied", l("prediction:apply", {
+      }), S.value = "applied", a("prediction:apply", {
         meta: j(),
         modelRunId: (f = d[0]) == null ? void 0 : f.modelRunId,
         candidateIds: s,
@@ -852,10 +852,10 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     }, Ot = (s, i) => {
       var f;
       if (!r.value) return;
-      const a = r.value.getAnnotations() || [], d = a.filter((A) => !(A.predictionId && s.includes(A.predictionId)));
-      r.value.setAnnotations(d), l("prediction:reject", {
+      const l = r.value.getAnnotations() || [], d = l.filter((A) => !(A.predictionId && s.includes(A.predictionId)));
+      r.value.setAnnotations(d), a("prediction:reject", {
         meta: j(),
-        modelRunId: (f = a.find((A) => A.predictionId && s.includes(A.predictionId))) == null ? void 0 : f.modelRunId,
+        modelRunId: (f = l.find((A) => A.predictionId && s.includes(A.predictionId))) == null ? void 0 : f.modelRunId,
         candidateIds: s,
         reason: i
       });
@@ -864,15 +864,15 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     }, Nt = (s) => {
       var i;
       (i = r.value) == null || i.setAnnotations(s);
-    }, Ct = () => {
+    }, _t = () => {
       var s;
       return ((s = r.value) == null ? void 0 : s.getAnnotations()) || [];
     }, Wt = (s = "json") => {
-      var a, d;
-      const i = Ct();
+      var l, d;
+      const i = _t();
       return {
         format: s,
-        image: ((a = e.batchImages[x.value]) == null ? void 0 : a.imageUrl) || ((d = e.image) == null ? void 0 : d.url) || "",
+        image: ((l = e.batchImages[x.value]) == null ? void 0 : l.imageUrl) || ((d = e.image) == null ? void 0 : d.url) || "",
         annotations: i
       };
     }, ot = (s) => {
@@ -881,23 +881,23 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       var i;
       return s === x.value && r.value ? r.value.getAnnotations() || [] : ((i = e.batchImages[s]) == null ? void 0 : i.annotations) || [];
     }, Yt = (s) => s.type === "rectangle", Jt = (s) => s.type === "polygon", jt = (s) => s.type === "point", Xt = (s) => s.type === "rotatedRect", qt = (s) => s.type === "category", et = (s) => {
-      var a, d;
-      const i = (a = _.value.find((f) => f.name === s.label)) == null ? void 0 : a.color;
+      var l, d;
+      const i = (l = _.value.find((f) => f.name === s.label)) == null ? void 0 : l.color;
       return ((d = s.style) == null ? void 0 : d.strokeColor) || i || "#409eff";
-    }, _t = (s) => {
+    }, kt = (s) => {
       const i = s.coordinates;
       return (i == null ? void 0 : i.points) || [];
     }, st = (s) => {
       const i = e.batchImages[s];
       if (i != null && i.width && (i != null && i.height))
         return { width: i.width, height: i.height };
-      const a = i != null && i.imageUrl ? H.value[i.imageUrl] : void 0;
-      return a || (i != null && i.imageUrl && it(i.imageUrl), { width: 1, height: 1 });
+      const l = i != null && i.imageUrl ? H.value[i.imageUrl] : void 0;
+      return l || (i != null && i.imageUrl && it(i.imageUrl), { width: 1, height: 1 });
     }, Kt = (s) => {
       const i = e.batchImages[s];
       return i != null && i.width && (i != null && i.height) ? !0 : i != null && i.imageUrl ? !!H.value[i.imageUrl] : !1;
     }, Zt = (s, i) => {
-      const a = i.coordinates, d = st(s), f = et(i), A = Math.min(a.x1, a.x2), P = Math.min(a.y1, a.y2), ne = Math.max(a.x1, a.x2), oe = Math.max(a.y1, a.y2);
+      const l = i.coordinates, d = st(s), f = et(i), A = Math.min(l.x1, l.x2), P = Math.min(l.y1, l.y2), ne = Math.max(l.x1, l.x2), oe = Math.max(l.y1, l.y2);
       return {
         left: `${A / d.width * 100}%`,
         top: `${P / d.height * 100}%`,
@@ -907,8 +907,8 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         backgroundColor: `${f}22`
       };
     }, Qt = (s, i) => {
-      const a = st(s);
-      return _t(i).map((d) => `${d.x / a.width * 100},${d.y / a.height * 100}`).join(" ");
+      const l = st(s);
+      return kt(i).map((d) => `${d.x / l.width * 100},${d.y / l.height * 100}`).join(" ");
     }, te = (s) => {
       const i = et(s);
       return {
@@ -916,29 +916,29 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         stroke: i,
         strokeWidth: "1.4"
       };
-    }, ee = (s, i, a) => {
-      const d = st(s), f = et(a);
+    }, ee = (s, i, l) => {
+      const d = st(s), f = et(l);
       return {
         left: `${i.x / d.width * 100}%`,
         top: `${i.y / d.height * 100}%`,
         backgroundColor: f
       };
     }, se = (s, i) => {
-      const a = i.coordinates, d = st(s), f = et(i), A = Math.abs(a.width), P = Math.abs(a.height);
+      const l = i.coordinates, d = st(s), f = et(i), A = Math.abs(l.width), P = Math.abs(l.height);
       return {
-        left: `${(a.x - A / 2) / d.width * 100}%`,
-        top: `${(a.y - P / 2) / d.height * 100}%`,
+        left: `${(l.x - A / 2) / d.width * 100}%`,
+        top: `${(l.y - P / 2) / d.height * 100}%`,
         width: `${A / d.width * 100}%`,
         height: `${P / d.height * 100}%`,
-        transform: `rotate(${a.angle || 0}deg)`,
+        transform: `rotate(${l.angle || 0}deg)`,
         borderColor: f,
         backgroundColor: `${f}22`
       };
     }, ie = (s, i) => {
-      const a = i.coordinates, d = st(s), f = et(i);
+      const l = i.coordinates, d = st(s), f = et(i);
       return {
-        left: `${a.x / d.width * 100}%`,
-        top: `${a.y / d.height * 100}%`,
+        left: `${l.x / d.width * 100}%`,
+        top: `${l.y / d.height * 100}%`,
         backgroundColor: `${f}d9`
         // ~85% opacity
       };
@@ -947,9 +947,9 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       jumpTo: ot,
       setImage: Ft,
       setAnnotations: Nt,
-      getAnnotations: Ct,
+      getAnnotations: _t,
       selectTool: Y,
-      loadPredictionCandidates: bt,
+      loadPredictionCandidates: Ct,
       applyPredictions: Vt,
       rejectPredictions: Ot,
       exportAnnotations: Wt,
@@ -961,10 +961,10 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         }];
       },
       getCurrentAnnotation: () => {
-        var s, i, a;
+        var s, i, l;
         return {
           imageUrl: ((s = e.batchImages[x.value]) == null ? void 0 : s.imageUrl) || ((i = e.image) == null ? void 0 : i.url) || "",
-          annotations: ((a = r.value) == null ? void 0 : a.getAnnotations()) || []
+          annotations: ((l = r.value) == null ? void 0 : l.getAnnotations()) || []
         };
       }
     }), K(() => {
@@ -974,7 +974,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       var s;
       e.batchImages.length === 0 && ((s = e.image) != null && s.url) && W();
     }), K(() => e.predictionCandidates, (s) => {
-      s && bt(s);
+      s && Ct(s);
     }, { immediate: !0, deep: !0 }), K(
       () => e.batchImages.map((s) => `${s.imageUrl}:${s.width || ""}x${s.height || ""}`),
       () => {
@@ -996,8 +996,8 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           ref: g,
           class: "image-list-scroll"
         }, [
-          (v(!0), m(N, null, J(w.batchImages, (a, d) => (v(), m("button", {
-            key: `${a.imageUrl}-${d}`,
+          (v(!0), m(N, null, J(w.batchImages, (l, d) => (v(), m("button", {
+            key: `${l.imageUrl}-${d}`,
             ref_for: !0,
             ref: (f) => ht(f, d),
             class: X(["image-list-item", { active: d === x.value }]),
@@ -1005,7 +1005,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           }, [
             h("div", Le, [
               h("img", {
-                src: a.imageUrl,
+                src: l.imageUrl,
                 alt: `第${d + 1}张`,
                 class: "image-list-thumb"
               }, null, 8, Be),
@@ -1022,7 +1022,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                       points: Qt(d, f),
                       style: U(te(f))
                     }, null, 12, Ee)
-                  ])) : jt(f) ? (v(!0), m(N, { key: 2 }, J(_t(f), (A, P) => (v(), m("div", {
+                  ])) : jt(f) ? (v(!0), m(N, { key: 2 }, J(kt(f), (A, P) => (v(), m("div", {
                     key: `${f.id}-${P}`,
                     class: "thumb-overlay-point",
                     style: U(ee(d, A, f))
@@ -1046,27 +1046,27 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         w.readOnly ? B("", !0) : (v(), m("div", Oe, [
           h("div", {
             class: X(["tool-btn", { active: k.value === "pan" }]),
-            onClick: i[0] || (i[0] = (a) => Y("pan")),
+            onClick: i[0] || (i[0] = (l) => Y("pan")),
             title: "拖动"
           }, [
             R(L, { name: "rank" })
           ], 2),
           h("div", {
             class: X(["tool-btn", { active: k.value === "select" }]),
-            onClick: i[1] || (i[1] = (a) => Y("select")),
+            onClick: i[1] || (i[1] = (l) => Y("select")),
             title: "选择"
           }, [
             R(L, { name: "pointer" })
           ], 2),
           i[5] || (i[5] = h("div", { class: "divider" }, null, -1)),
-          (v(!0), m(N, null, J(b.value, (a) => (v(), m("div", {
-            key: a,
-            class: X(["tool-btn", { active: k.value === a }]),
-            onClick: (d) => Y(a),
-            title: F(a)
+          (v(!0), m(N, null, J(b.value, (l) => (v(), m("div", {
+            key: l,
+            class: X(["tool-btn", { active: k.value === l }]),
+            onClick: (d) => Y(l),
+            title: F(l)
           }, [
             R(L, {
-              name: I(a)
+              name: I(l)
             }, null, 8, ["name"])
           ], 10, Fe))), 128)),
           i[6] || (i[6] = h("div", { class: "divider" }, null, -1)),
@@ -1110,7 +1110,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           w.readOnly ? B("", !0) : (v(), m("div", Ge, [
             h("div", {
               class: "selector-trigger",
-              onClick: yt
+              onClick: wt
             }, [
               Z.value ? (v(), m("div", Ye, [
                 h("span", {
@@ -1127,17 +1127,17 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
               }, null, 8, ["class"])
             ]),
             G.value ? (v(), m("div", Xe, [
-              _.value.length === 0 ? (v(), m("div", qe, "请在右侧创建标签")) : (v(!0), m(N, { key: 1 }, J(_.value, (a) => (v(), m("div", {
-                key: a.id,
-                class: X(["dropdown-item", { active: $.value === a.id }]),
-                onClick: (d) => wt(a)
+              _.value.length === 0 ? (v(), m("div", qe, "请在右侧创建标签")) : (v(!0), m(N, { key: 1 }, J(_.value, (l) => (v(), m("div", {
+                key: l.id,
+                class: X(["dropdown-item", { active: $.value === l.id }]),
+                onClick: (d) => xt(l)
               }, [
                 h("span", {
                   class: "color-dot",
-                  style: U({ backgroundColor: a.color })
+                  style: U({ backgroundColor: l.color })
                 }, null, 4),
-                h("span", Ze, z(a.name), 1),
-                $.value === a.id ? (v(), vt(L, {
+                h("span", Ze, z(l.name), 1),
+                $.value === l.id ? (v(), vt(L, {
                   key: 0,
                   name: "aim",
                   class: "check-icon"
@@ -1191,34 +1191,34 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
           }, "添加标签")
         ]),
         h("div", os, [
-          (v(!0), m(N, null, J(_.value, (a) => (v(), m("div", {
-            key: a.id,
+          (v(!0), m(N, null, J(_.value, (l) => (v(), m("div", {
+            key: l.id,
             class: "label-item",
-            style: U({ backgroundColor: a.color + "1A", color: a.color })
+            style: U({ backgroundColor: l.color + "1A", color: l.color })
           }, [
             h("div", as, [
               h("label", {
                 class: "color-wrapper",
-                style: U({ backgroundColor: a.color })
+                style: U({ backgroundColor: l.color })
               }, [
                 ft(h("input", {
                   type: "color",
-                  "onUpdate:modelValue": (d) => a.color = d,
-                  onChange: (d) => $t(a),
+                  "onUpdate:modelValue": (d) => l.color = d,
+                  onChange: (d) => $t(l),
                   style: { visibility: "hidden", width: "0", height: "0" }
                 }, null, 40, ls), [
-                  [mt, a.color]
+                  [mt, l.color]
                 ])
               ], 4),
               h("span", {
                 class: "label-name",
-                title: a.name
-              }, z(a.name), 9, cs),
+                title: l.name
+              }, z(l.name), 9, cs),
               h("span", {
                 class: "action-icon eye",
-                onClick: (d) => Lt(a)
+                onClick: (d) => Lt(l)
               }, [
-                a.visible ? (v(), vt(L, {
+                l.visible ? (v(), vt(L, {
                   key: 0,
                   name: "view"
                 })) : (v(), vt(L, {
@@ -1230,7 +1230,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 i[9] || (i[9] = h("span", { class: "dots" }, "•••", -1)),
                 h("span", {
                   class: "delete-btn",
-                  onClick: (d) => Bt(a.id),
+                  onClick: (d) => Bt(l.id),
                   title: "删除"
                 }, [
                   R(L, { name: "delete" })
@@ -1256,7 +1256,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 h("span", { class: "required" }, "*")
               ], -1)),
               ft(h("input", {
-                "onUpdate:modelValue": i[3] || (i[3] = (a) => C.value.name = a),
+                "onUpdate:modelValue": i[3] || (i[3] = (l) => C.value.name = l),
                 placeholder: "请输入标签名称",
                 class: "modal-input",
                 autofocus: ""
@@ -1273,7 +1273,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
                 }, [
                   ft(h("input", {
                     type: "color",
-                    "onUpdate:modelValue": i[4] || (i[4] = (a) => C.value.color = a),
+                    "onUpdate:modelValue": i[4] || (i[4] = (l) => C.value.color = l),
                     class: "modal-color-picker"
                   }, null, 512), [
                     [mt, C.value.color]
@@ -1316,8 +1316,8 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
     fontSize: {}
   },
   setup(w) {
-    const t = w, n = M(null), e = M(!1), l = M(0), o = M(0), c = () => {
-      n.value && (l.value = n.value.naturalWidth, o.value = n.value.naturalHeight, e.value = !0);
+    const t = w, n = M(null), e = M(!1), a = M(0), o = M(0), c = () => {
+      n.value && (a.value = n.value.naturalWidth, o.value = n.value.naturalHeight, e.value = !0);
     }, g = V(() => t.fit === "contain" ? "xMidYMid meet" : "xMidYMid slice"), u = V(() => t.strokeWidth ?? 10), r = V(() => t.fontSize ?? 30), k = (C) => {
       var S;
       if ((S = C.style) != null && S.strokeColor) return C.style.strokeColor;
@@ -1363,7 +1363,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       e.value ? (v(), m("svg", {
         key: 0,
         class: "annotation-overlay",
-        viewBox: `0 0 ${l.value} ${o.value}`,
+        viewBox: `0 0 ${a.value} ${o.value}`,
         preserveAspectRatio: g.value
       }, [
         (v(!0), m(N, null, J(w.annotations, (p) => (v(), m(N, {
@@ -1454,7 +1454,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
   },
   emits: ["export", "update:images", "imageClick", "update:labels", "pageChange"],
   setup(w, { expose: t, emit: n }) {
-    const e = w, l = n, o = M("gallery"), c = M([]), g = M([]), u = M(0), r = M(null), k = M(null), x = M(null), D = V(() => {
+    const e = w, a = n, o = M("gallery"), c = M([]), g = M([]), u = M(0), r = M(null), k = M(null), x = M(null), D = V(() => {
       var y, b;
       return ((b = (y = e.actionBar) == null ? void 0 : y.annotateButton) == null ? void 0 : b.show) === !0;
     }), _ = V(() => {
@@ -1495,13 +1495,15 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       backgroundColor: y.color + "1A"
       // 1A represents ~10% opacity in hex
     });
-    K(() => e.images, (y) => {
+    yt(() => {
+      a("pageChange", { nowPage: "listPage" });
+    }), K(() => e.images, (y) => {
       c.value = JSON.parse(JSON.stringify(y));
     }, { immediate: !0, deep: !0 }), K(() => e.labels, (y) => {
       g.value = JSON.parse(JSON.stringify(y || []));
     }, { immediate: !0, deep: !0 });
     const O = (y) => {
-      u.value = y, o.value = "editor", l("pageChange", { nowPage: "editPage" }), x.value && (x.value.scrollTop = 0), at(() => {
+      u.value = y, o.value = "editor", a("pageChange", { nowPage: "editPage" }), x.value && (x.value.scrollTop = 0), at(() => {
         k.value && (k.value.scrollTop = 0), window.scrollTo(0, 0), requestAnimationFrame(() => {
           var b, I;
           (I = (b = r.value) == null ? void 0 : b.jumpTo) == null || I.call(b, y);
@@ -1512,7 +1514,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         O(y);
         return;
       }
-      l("imageClick", { index: y, imageId: b.id, image: b });
+      a("imageClick", { index: y, imageId: b.id, image: b });
     }, Z = (y) => c.value.findIndex((b) => b.id === y);
     t({
       openImageById: (y) => {
@@ -1524,7 +1526,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         if (b < 0)
           return !1;
         const I = c.value[b];
-        return I ? (l("imageClick", { index: b, imageId: I.id, image: I }), !0) : !1;
+        return I ? (a("imageClick", { index: b, imageId: I.id, image: I }), !0) : !1;
       },
       getFinalData: () => ({
         images: JSON.parse(JSON.stringify(c.value)),
@@ -1536,18 +1538,18 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
         const y = r.value.getCurrentAnnotation();
         c.value[u.value] && (c.value[u.value].annotations = y.annotations);
       }
-      o.value = "gallery", l("pageChange", { nowPage: "listPage" });
+      o.value = "gallery", a("pageChange", { nowPage: "listPage" });
     }, nt = () => {
-      l("export", c.value);
+      a("export", c.value);
     }, ht = (y) => {
       u.value = y.currentIndex, c.value[y.currentIndex] && (c.value[y.currentIndex].annotations = y.currentAnnotations);
     }, Q = (y) => {
       if (r.value && r.value.getCurrentAnnotation) {
         const b = r.value.getCurrentAnnotation();
-        c.value[u.value] && (c.value[u.value].annotations = b.annotations, l("update:images", c.value));
+        c.value[u.value] && (c.value[u.value].annotations = b.annotations, a("update:images", c.value));
       }
     }, j = (y) => {
-      g.value = JSON.parse(JSON.stringify(y || [])), l("update:labels", g.value);
+      g.value = JSON.parse(JSON.stringify(y || [])), a("update:labels", g.value);
     };
     return (y, b) => (v(), m("div", {
       ref_key: "batchRootRef",
@@ -1670,7 +1672,7 @@ const de = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//D
       ]))
     ], 512));
   }
-}), ii = /* @__PURE__ */ rt(ti, [["__scopeId", "data-v-701c81a6"]]);
+}), ii = /* @__PURE__ */ rt(ti, [["__scopeId", "data-v-5bb1d03b"]]);
 export {
   ii as BatchAnnotator,
   bs as ImageAnnotator,