luo-image-annotator 0.0.9 → 0.0.11

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

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