luo-image-annotator 0.0.10 → 0.0.11

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

@@ -1,16 +1,16 @@
 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 K, ref as k, watchEffect as Xt, openBlock as p, createElementBlock as x, normalizeClass as O, computed as E, onMounted as Yt, watch as X, createElementVNode as g, toDisplayString as $, Fragment as L, renderList as D, normalizeStyle as V, createCommentVNode as z, createVNode as H, withModifiers as qt, createTextVNode as Y, withDirectives as lt, vModelText as rt, createBlock as ft, nextTick as Gt } from "vue";
-const ct = (m, t) => Math.sqrt(Math.pow(m.x - t.x, 2) + Math.pow(m.y - t.y, 2)), Kt = (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, 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 > m.y != h > m.y && m.x < (o - r) * (m.y - c) / (h - c) + r && (i = !i);
+    c > v.y != h > v.y && v.x < (o - r) * (v.y - c) / (h - c) + r && (i = !i);
   }
   return i;
-}, yt = (m, t, i) => {
-  const e = i * (Math.PI / 180), a = 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 * a - o * r),
     y: t.y + (c * r + o * a)
@@ -18,42 +18,42 @@ const ct = (m, t) => Math.sqrt(Math.pow(m.x - t.x, 2) + Math.pow(m.y - t.y, 2)),
 };
 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");
@@ -364,12 +364,12 @@ class Zt {
     } else if (t.type === "rotatedRect") {
       const r = t.coordinates;
       if (e === -2) {
-        const c = r.x, o = r.y, h = a.x - c, y = a.y - o;
-        let C = Math.atan2(y, 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), y = a.x - r.x, C = a.y - r.y, u = y * o - C * h, f = y * 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);
       }
     }
   }
@@ -424,8 +424,8 @@ class Zt {
       if (t.type === "point")
         return t.coordinates.points;
       if (t.type === "rotatedRect") {
-        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 }, y = { x: i.x - a, y: i.y + r }, C = { x: i.x, y: i.y - r - 20 / this.scale };
-        return [c, o, h, y, C].map((u) => yt(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 [];
@@ -455,26 +455,26 @@ class Zt {
     let i = 10;
     const e = 10, a = 8, r = 4, c = 24, o = 8;
     t.forEach((h) => {
-      const y = h.label || "Unlabeled", C = this.ctx.measureText(y).width + a * 2, u = this.activeAnnotation === h, f = this.hoverAnnotation === h;
-      this.ctx.fillStyle = u ? "#E3F2FD" : f ? "#F5F5F5" : "rgba(255, 255, 255, 0.9)", this.ctx.strokeStyle = u ? "#2196F3" : "#666", this.ctx.lineWidth = u ? 2 : 1, this.ctx.beginPath(), this.ctx.rect(i, e, C, c), this.ctx.fill(), this.ctx.stroke(), this.ctx.fillStyle = u ? "#1976D2" : "#333", this.ctx.fillText(y, i + a, 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 a = 10;
     const r = 10, c = 8, o = 24, h = 8;
-    let y = null;
-    for (const C of e) {
-      const u = C.label || "Unlabeled", f = this.ctx.measureText(u).width + c * 2;
-      if (t >= a && t <= a + f && i >= r && i <= r + o) {
-        y = 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;
       }
-      a += f + h;
+      a += w + h;
     }
-    return this.ctx.restore(), y;
+    return this.ctx.restore(), u;
   }
   drawItem(t, i) {
     var r;
@@ -483,8 +483,8 @@ class Zt {
     this.ctx.save();
     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), y = 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(y, C, u, f), this.ctx.fillStyle = i ? "rgba(0, 229, 255, 0.2)" : "rgba(255, 64, 129, 0.2)", this.ctx.fillRect(y, C, u, f), i && this.drawHandles(this.getAnnotationHandles(t));
+      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) {
@@ -495,8 +495,8 @@ class Zt {
       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 y = this.toScreenCoords(c.points[h].x, c.points[h].y);
-        this.ctx.lineTo(y.x, y.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();
@@ -504,11 +504,11 @@ class Zt {
         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 y = this.toScreenCoords(h.x, h.y);
-        this.ctx.lineTo(y.x, y.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") {
@@ -567,18 +567,18 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     name: {},
     size: {}
   },
-  setup(m) {
-    const t = m, i = k(""), 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 Xt(() => {
+  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) => (p(), x("i", {
-      class: O(["svg-icon", [m.size ? `size-${m.size}` : ""]]),
+    }), (a, r) => (f(), p("i", {
+      class: V(["svg-icon", [v.size ? `size-${v.size}` : ""]]),
       innerHTML: i.value
     }, null, 10, me));
   }
-}), Z = (m, t) => {
-  const i = m.__vccOpts || m;
+}), Z = (v, t) => {
+  const i = v.__vccOpts || v;
   for (const [e, a] of t)
     i[e] = a;
   return i;
@@ -611,7 +611,7 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
 }, 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"
-}, Xe = { class: "modal-content" }, Ye = { class: "form-group" }, qe = { class: "form-group" }, Ge = { class: "color-input-wrapper" }, Ke = /* @__PURE__ */ K({
+}, 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"] },
@@ -628,14 +628,14 @@ const Qt = `<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, a = i, r = k(null), c = k(null), o = k(null), h = k(null), y = k(0), C = k(""), u = k([]), f = k(""), _ = k(!1), T = k({ name: "", color: "#FF0000" }), U = k("none"), R = k([]), B = k({}), Q = E(() => h.value === "select" && !!C.value), J = (n) => {
-      if (!n || B.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 l = s.naturalWidth || 1, d = s.naturalHeight || 1;
-        B.value = {
-          ...B.value,
+        L.value = {
+          ...L.value,
           [n]: { width: l, height: d }
         };
       }, s.src = n;
@@ -643,29 +643,29 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       e.batchImages.forEach((n) => {
         J(n.imageUrl);
       });
-    }, F = () => {
-      var l, d, v, A;
-      const n = e.batchImages[y.value], s = (n == null ? void 0 : n.imageUrl) || ((l = e.image) == null ? void 0 : l.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,
-        operator: (A = e.session) == null ? void 0 : A.userId
+        imageId: ((m = e.image) == null ? void 0 : m.id) || s,
+        operator: (_ = e.session) == null ? void 0 : _.userId
       };
     }, et = (n) => {
       var d;
       const s = n == null ? void 0 : n.action;
       if (!s) return;
       const l = {
-        meta: F(),
+        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" && a("annotation:add", l), s === "update" && a("annotation:update", l), s === "delete" && a("annotation:delete", l), s === "select" && a("annotation:select", l);
-    }, nt = E(() => e.annotationTypes.filter((n) => n !== "category")), st = (n) => ({
+    }, nt = U(() => e.annotationTypes.filter((n) => n !== "category")), st = (n) => ({
       rectangle: "crop",
       polygon: "connection",
       point: "aim",
@@ -678,52 +678,52 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       rotatedRect: "旋转矩形",
       category: "分类标签"
     })[n] || n;
-    Yt(() => {
+    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((A) => A.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 = ((l = s.changedItem) == null ? void 0 : l.id) || "" : s.action === "delete" && ((d = s.changedItem) == null ? void 0 : d.id) === C.value && (C.value = ""), a("annotationChange", s), et(s);
-        }), b(), N();
+          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 && w(e.defaultActiveType), a("ready", { meta: F() });
+        c.value && n.observe(c.value), e.defaultActiveType && b(e.defaultActiveType), a("ready", { meta: E() });
       }
     });
     const N = () => {
       if (!o.value) return;
-      const n = u.value.find((l) => l.id === f.value);
+      const n = y.value.find((l) => l.id === w.value);
       n && o.value.setLabelStyle(n.color);
-      const s = u.value.filter((l) => l.visible).map((l) => l.name);
+      const s = y.value.filter((l) => l.visible).map((l) => l.name);
       o.value.setVisibleLabels(s);
-    }, b = () => {
+    }, x = () => {
       var n;
       if (o.value)
-        if (C.value = "", requestAnimationFrame(() => {
+        if (A.value = "", requestAnimationFrame(() => {
           var s;
           (s = o.value) == null || s.resize();
         }), e.batchImages.length > 0) {
-          const s = e.batchImages[y.value];
+          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);
-    }, w = (n) => {
+    }, b = (n) => {
       var s, l;
-      if (h.value = n, C.value = "", n !== "pan" && n !== "select" && u.value.length === 0) {
+      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) : (l = o.value) == null || l.setTool(n), a("tool:change", { meta: F(), tool: n });
-    }, S = () => {
+      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);
     }, W = () => {
       o.value && a("viewport:change", {
-        meta: F(),
+        meta: E(),
         scale: o.value.scale,
         offset: { ...o.value.offset }
       });
@@ -734,112 +734,112 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       var n;
       (n = o.value) == null || n.zoom(-1), W();
     }, xt = () => {
-      T.value = { name: "", color: "#2196F3" }, _.value = !0;
+      C.value = { name: "", color: "#2196F3" }, I.value = !0;
     }, dt = () => {
-      _.value = !1;
+      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), a("labelChange", u.value), u.value.length === 1 && j(s), dt();
+      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 l = 0, d = 0, v = 0;
-      return n.length === 4 ? (l = parseInt(n[1] + n[1], 16), d = parseInt(n[2] + n[2], 16), v = parseInt(n[3] + n[3], 16)) : n.length === 7 && (l = parseInt(n.slice(1, 3), 16), d = parseInt(n.slice(3, 5), 16), v = parseInt(n.slice(5, 7), 16)), `rgba(${l}, ${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) {
+      if (n.id === w.value && ((s = o.value) == null || s.setLabelStyle(n.color)), o.value) {
         const l = o.value.getAnnotations();
         let d = !1;
-        l.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();
       }
-      a("labelChange", u.value);
+      a("labelChange", y.value);
     }, At = (n) => {
       n.visible = !n.visible, N();
     }, _t = (n) => {
-      const s = u.value.findIndex((l) => l.id === n);
-      s > -1 && (u.value.splice(s, 1), a("labelChange", u.value), f.value === n && (f.value = u.value.length > 0 ? u.value[0].id : "", f.value && j(u.value[0])), 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());
     };
-    X(() => 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((l) => l.id === f.value))
-          j(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 l = u.value.find((d) => d.id === f.value);
+          const l = y.value.find((d) => d.id === w.value);
           l && j(l);
         }
       else
-        f.value = "";
+        w.value = "";
       N();
     }, { immediate: !0, deep: !0 });
     const It = () => {
-      y.value > 0 && (ot(), y.value--, b(), at());
+      u.value > 0 && (ot(), u.value--, x(), at());
     }, kt = () => {
-      y.value < e.batchImages.length - 1 && (ot(), y.value++, b(), at());
+      u.value < e.batchImages.length - 1 && (ot(), u.value++, x(), at());
     }, ot = () => {
       if (o.value) {
         const n = o.value.getAnnotations();
-        e.batchImages[y.value].annotations = n;
+        e.batchImages[u.value].annotations = n;
       }
     }, at = () => {
-      const n = e.batchImages[y.value];
+      const n = e.batchImages[u.value];
       a("batchChange", {
-        currentIndex: y.value,
+        currentIndex: u.value,
         total: e.batchImages.length,
         currentImageUrl: n.imageUrl,
         currentAnnotations: n.annotations || []
       });
     }, gt = (n = []) => {
-      var v;
+      var m;
       if (!o.value) return;
-      if (R.value = JSON.parse(JSON.stringify(n)), R.value.length === 0) {
-        U.value = "none";
+      if (D.value = JSON.parse(JSON.stringify(n)), D.value.length === 0) {
+        B.value = "none";
         return;
       }
-      U.value = "loaded";
-      const l = (o.value.getAnnotations() || []).filter((A) => !A.predictionId), d = R.value.map((A) => {
-        const M = JSON.parse(JSON.stringify(A.annotation));
-        return M.id = M.id || `pred-${A.id}`, M.predictionId = A.id, M.modelRunId = A.modelRunId || M.modelRunId, M.confidence = A.confidence ?? M.confidence, M.reviewStatus = M.reviewStatus || "draft", M;
+      B.value = "loaded";
+      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([...l, ...d]), a("prediction:loaded", {
-        meta: F(),
-        modelRunId: (v = R.value[0]) == null ? void 0 : v.modelRunId,
-        candidates: R.value
+        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 [];
-      U.value = "applying";
-      const d = (o.value.getAnnotations() || []).filter((A) => A.predictionId && n.includes(A.predictionId));
-      return d.forEach((A) => {
-        A.reviewStatus = "accepted";
-      }), U.value = "applied", a("prediction:apply", {
-        meta: F(),
-        modelRunId: (v = d[0]) == null ? void 0 : v.modelRunId,
+      B.value = "applying";
+      const d = (o.value.getAnnotations() || []).filter((_) => _.predictionId && n.includes(_.predictionId));
+      return d.forEach((_) => {
+        _.reviewStatus = "accepted";
+      }), 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 l = o.value.getAnnotations() || [], d = l.filter((A) => !(A.predictionId && n.includes(A.predictionId)));
+      const l = o.value.getAnnotations() || [], d = l.filter((_) => !(_.predictionId && n.includes(_.predictionId)));
       o.value.setAnnotations(d), a("prediction:reject", {
-        meta: F(),
-        modelRunId: (v = l.find((A) => A.predictionId && n.includes(A.predictionId))) == null ? void 0 : v.modelRunId,
+        meta: E(),
+        modelRunId: (m = l.find((_) => _.predictionId && n.includes(_.predictionId))) == null ? void 0 : m.modelRunId,
         candidateIds: n,
         reason: s
       });
@@ -856,17 +856,17 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       const s = ut();
       return {
         format: n,
-        image: ((l = e.batchImages[y.value]) == null ? void 0 : l.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
       };
     }, vt = (n) => {
-      n >= 0 && n < e.batchImages.length && (ot(), y.value = n, b(), at());
+      n >= 0 && n < e.batchImages.length && (ot(), u.value = n, x(), at());
     }, Pt = (n) => {
       var s;
-      return n === y.value && o.value ? o.value.getAnnotations() || [] : ((s = e.batchImages[n]) == null ? void 0 : s.annotations) || [];
+      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 = u.value.find((v) => v.name === n.label)) == null ? void 0 : l.color;
+      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";
     }, mt = (n) => {
       const s = n.coordinates;
@@ -875,20 +875,20 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       const s = e.batchImages[n];
       if (s != null && s.width && (s != null && s.height))
         return { width: s.width, height: s.height };
-      const l = s != null && s.imageUrl ? B.value[s.imageUrl] : void 0;
+      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 ? !!B.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 l = s.coordinates, d = G(n), v = q(s), A = Math.min(l.x1, l.x2), M = Math.min(l.y1, l.y2), Nt = Math.max(l.x1, l.x2), Wt = Math.max(l.y1, l.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: `${A / d.width * 100}%`,
-        top: `${M / d.height * 100}%`,
-        width: `${(Nt - A) / d.width * 100}%`,
-        height: `${(Wt - M) / d.height * 100}%`,
-        borderColor: v,
-        backgroundColor: `${v}22`
+        left: `${_ / d.width * 100}%`,
+        top: `${z / d.height * 100}%`,
+        width: `${(Nt - _) / d.width * 100}%`,
+        height: `${(Wt - z) / d.height * 100}%`,
+        borderColor: m,
+        backgroundColor: `${m}22`
       };
     }, Ft = (n, s) => {
       const l = G(n);
@@ -901,22 +901,22 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
         strokeWidth: "1.4"
       };
     }, Ot = (n, s, l) => {
-      const d = G(n), v = q(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 l = s.coordinates, d = G(n), v = q(s), A = Math.abs(l.width), M = Math.abs(l.height);
+      const l = s.coordinates, d = G(n), m = q(s), _ = Math.abs(l.width), z = Math.abs(l.height);
       return {
-        left: `${(l.x - A / 2) / d.width * 100}%`,
-        top: `${(l.y - M / 2) / d.height * 100}%`,
-        width: `${A / d.width * 100}%`,
-        height: `${M / d.height * 100}%`,
+        left: `${(l.x - _ / 2) / d.width * 100}%`,
+        top: `${(l.y - z / 2) / d.height * 100}%`,
+        width: `${_ / d.width * 100}%`,
+        height: `${z / d.height * 100}%`,
         transform: `rotate(${l.angle || 0}deg)`,
-        borderColor: v,
-        backgroundColor: `${v}22`
+        borderColor: m,
+        backgroundColor: `${m}22`
       };
     };
     return t({
@@ -924,7 +924,7 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       setImage: zt,
       setAnnotations: $t,
       getAnnotations: ut,
-      selectTool: w,
+      selectTool: b,
       loadPredictionCandidates: gt,
       applyPredictions: St,
       rejectPredictions: Mt,
@@ -939,34 +939,34 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       getCurrentAnnotation: () => {
         var n, s, l;
         return {
-          imageUrl: ((n = e.batchImages[y.value]) == null ? void 0 : n.imageUrl) || ((s = e.image) == null ? void 0 : s.url) || "",
+          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()) || []
         };
       }
-    }), X(() => {
+    }), Y(() => {
       var n;
       return (n = e.image) == null ? void 0 : n.url;
     }, () => {
       var n;
-      e.batchImages.length === 0 && ((n = e.image) != null && n.url) && b();
-    }), X(() => e.predictionCandidates, (n) => {
+      e.batchImages.length === 0 && ((n = e.image) != null && n.url) && x();
+    }), Y(() => e.predictionCandidates, (n) => {
       n && gt(n);
-    }, { immediate: !0, deep: !0 }), X(
+    }, { immediate: !0, deep: !0 }), Y(
       () => e.batchImages.map((n) => `${n.imageUrl}:${n.width || ""}x${n.height || ""}`),
       () => {
         tt();
       },
       { immediate: !0 }
-    ), (n, s) => (p(), x("div", {
-      class: O(["annotation-container", m.theme])
+    ), (n, s) => (f(), p("div", {
+      class: V(["annotation-container", v.theme])
     }, [
-      m.batchImages && m.batchImages.length > 0 ? (p(), x("div", ye, [
-        g("div", pe, "批量图片（" + $(m.batchImages.length) + "）", 1),
+      v.batchImages && v.batchImages.length > 0 ? (f(), p("div", ye, [
+        g("div", pe, "批量图片（" + T(v.batchImages.length) + "）", 1),
         g("div", xe, [
-          (p(!0), x(L, null, D(m.batchImages, (l, d) => (p(), x("button", {
+          (f(!0), p(R, null, F(v.batchImages, (l, d) => (f(), p("button", {
             key: `${l.imageUrl}-${d}`,
-            class: O(["image-list-item", { active: d === y.value }]),
-            onClick: (v) => vt(d)
+            class: V(["image-list-item", { active: d === u.value }]),
+            onClick: (m) => vt(d)
           }, [
             g("div", we, [
               g("img", {
@@ -974,55 +974,55 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
                 alt: `第${d + 1}张`,
                 class: "image-list-thumb"
               }, null, 8, Ce),
-              Dt(d) ? (p(), x("div", Ae, [
-                (p(!0), x(L, null, D(Pt(d), (v) => (p(), x(L, {
-                  key: v.id
+              Dt(d) ? (f(), p("div", Ae, [
+                (f(!0), p(R, null, F(Pt(d), (m) => (f(), p(R, {
+                  key: m.id
                 }, [
-                  Ht(v) ? (p(), x("div", {
+                  Ht(m) ? (f(), p("div", {
                     key: 0,
                     class: "thumb-overlay-rect",
-                    style: V(Ut(d, v))
-                  }, null, 4)) : Lt(v) ? (p(), x("svg", _e, [
+                    style: O(Ut(d, m))
+                  }, null, 4)) : Lt(m) ? (f(), p("svg", _e, [
                     g("polygon", {
-                      points: Ft(d, v),
-                      style: V(Et(v))
+                      points: Ft(d, m),
+                      style: O(Et(m))
                     }, null, 12, Ie)
-                  ])) : Rt(v) ? (p(!0), x(L, { key: 2 }, D(mt(v), (A, M) => (p(), x("div", {
-                    key: `${v.id}-${M}`,
+                  ])) : Rt(m) ? (f(!0), p(R, { key: 2 }, F(mt(m), (_, z) => (f(), p("div", {
+                    key: `${m.id}-${z}`,
                     class: "thumb-overlay-point",
-                    style: V(Ot(d, A, v))
-                  }, null, 4))), 128)) : Bt(v) ? (p(), x("div", {
+                    style: O(Ot(d, _, m))
+                  }, null, 4))), 128)) : Bt(m) ? (f(), p("div", {
                     key: 3,
                     class: "thumb-overlay-rotated",
-                    style: V(Vt(d, v))
-                  }, null, 4)) : z("", !0)
+                    style: O(Vt(d, m))
+                  }, null, 4)) : $("", !0)
                 ], 64))), 128))
-              ])) : z("", !0)
+              ])) : $("", !0)
             ]),
-            g("span", ke, "第 " + $(d + 1) + " 张", 1)
+            g("span", ke, "第 " + T(d + 1) + " 张", 1)
           ], 10, be))), 128))
         ])
-      ])) : z("", !0),
-      m.readOnly ? z("", !0) : (p(), x("div", Se, [
+      ])) : $("", !0),
+      v.readOnly ? $("", !0) : (f(), p("div", Se, [
         g("div", {
-          class: O(["tool-btn", { active: h.value === "pan" }]),
-          onClick: s[0] || (s[0] = (l) => w("pan")),
+          class: V(["tool-btn", { active: h.value === "pan" }]),
+          onClick: s[0] || (s[0] = (l) => b("pan")),
           title: "拖动"
         }, [
           H(P, { name: "rank" })
         ], 2),
         g("div", {
-          class: O(["tool-btn", { active: h.value === "select" }]),
-          onClick: s[1] || (s[1] = (l) => w("select")),
+          class: V(["tool-btn", { active: h.value === "select" }]),
+          onClick: s[1] || (s[1] = (l) => b("select")),
           title: "选择"
         }, [
           H(P, { name: "pointer" })
         ], 2),
         s[5] || (s[5] = g("div", { class: "divider" }, null, -1)),
-        (p(!0), x(L, null, D(nt.value, (l) => (p(), x("div", {
+        (f(!0), p(R, null, F(nt.value, (l) => (f(), p("div", {
           key: l,
-          class: O(["tool-btn", { active: h.value === l }]),
-          onClick: (d) => w(l),
+          class: V(["tool-btn", { active: h.value === l }]),
+          onClick: (d) => b(l),
           title: it(l)
         }, [
           H(P, {
@@ -1045,27 +1045,27 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           H(P, { name: "zoom-out" })
         ]),
         s[7] || (s[7] = g("div", { class: "divider" }, null, -1)),
-        Q.value ? (p(), x("div", {
+        Q.value ? (f(), p("div", {
           key: 0,
           class: "tool-btn",
-          onClick: S,
+          onClick: M,
           title: "删除选中"
         }, [
           H(P, { name: "delete" })
-        ])) : z("", !0)
+        ])) : $("", !0)
       ])),
       g("div", ze, [
-        m.readOnly ? z("", !0) : (p(), x("div", $e, [
+        v.readOnly ? $("", !0) : (f(), p("div", $e, [
           g("div", Te, [
             s[8] || (s[8] = g("span", { class: "label-text" }, "当前标签:", -1)),
             g("div", Pe, [
-              (p(!0), x(L, null, D(u.value, (l) => (p(), x("div", {
+              (f(!0), p(R, null, F(y.value, (l) => (f(), p("div", {
                 key: l.id,
-                class: O(["tag-chip", { active: f.value === l.id }]),
-                style: V({ backgroundColor: l.color, borderColor: l.color }),
+                class: V(["tag-chip", { active: w.value === l.id }]),
+                style: O({ backgroundColor: l.color, borderColor: l.color }),
                 onClick: (d) => j(l)
-              }, $(l.name), 15, He))), 128)),
-              u.value.length === 0 ? (p(), x("div", Le, "请在右侧创建标签")) : z("", !0)
+              }, T(l.name), 15, He))), 128)),
+              y.value.length === 0 ? (f(), p("div", Le, "请在右侧创建标签")) : $("", !0)
             ])
           ])
         ])),
@@ -1081,25 +1081,25 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
             ref: r
           }, null, 512)
         ], 544),
-        m.batchImages && m.batchImages.length > 0 ? (p(), x("div", Re, [
+        v.batchImages && v.batchImages.length > 0 ? (f(), p("div", Re, [
           g("button", {
             onClick: It,
-            disabled: y.value <= 0
+            disabled: u.value <= 0
           }, [
             H(P, { name: "back" }),
-            s[9] || (s[9] = Y(" 上一张 ", -1))
+            s[9] || (s[9] = X(" 上一张 ", -1))
           ], 8, Be),
-          g("span", null, $(y.value + 1) + " / " + $(m.batchImages.length), 1),
+          g("span", null, T(u.value + 1) + " / " + T(v.batchImages.length), 1),
           g("button", {
             onClick: kt,
-            disabled: y.value >= m.batchImages.length - 1
+            disabled: u.value >= v.batchImages.length - 1
           }, [
-            s[10] || (s[10] = Y(" 下一张 ", -1)),
+            s[10] || (s[10] = X(" 下一张 ", -1)),
             H(P, { name: "right" })
           ], 8, De)
-        ])) : z("", !0)
+        ])) : $("", !0)
       ]),
-      m.readOnly ? z("", !0) : (p(), x("div", Ue, [
+      v.readOnly ? $("", !0) : (f(), p("div", Ue, [
         g("div", { class: "sidebar-header" }, [
           s[11] || (s[11] = g("h3", null, "标签管理", -1)),
           g("button", {
@@ -1108,14 +1108,14 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           }, "添加标签")
         ]),
         g("div", Fe, [
-          (p(!0), x(L, null, D(u.value, (l) => (p(), x("div", {
+          (f(!0), p(R, null, F(y.value, (l) => (f(), p("div", {
             key: l.id,
             class: "label-item"
           }, [
             g("div", Ee, [
               g("label", {
                 class: "color-wrapper",
-                style: V({ backgroundColor: l.color })
+                style: O({ backgroundColor: l.color })
               }, [
                 lt(g("input", {
                   type: "color",
@@ -1129,15 +1129,15 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
               g("span", {
                 class: "label-name",
                 title: l.name
-              }, $(l.name), 9, Ve),
+              }, T(l.name), 9, Ve),
               g("span", {
                 class: "action-icon eye",
                 onClick: (d) => At(l)
               }, [
-                l.visible ? (p(), ft(P, {
+                l.visible ? (f(), ft(P, {
                   key: 0,
                   name: "view"
-                })) : (p(), ft(P, {
+                })) : (f(), ft(P, {
                   key: 1,
                   name: "hide"
                 }))
@@ -1156,17 +1156,17 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
           ]))), 128))
         ])
       ])),
-      _.value ? (p(), x("div", je, [
-        g("div", Xe, [
+      I.value ? (f(), p("div", je, [
+        g("div", Ye, [
           s[15] || (s[15] = g("h3", null, "新增标签", -1)),
-          g("div", Ye, [
+          g("div", Xe, [
             s[13] || (s[13] = g("label", null, "名称", -1)),
             lt(g("input", {
-              "onUpdate:modelValue": s[3] || (s[3] = (l) => T.value.name = l),
+              "onUpdate:modelValue": s[3] || (s[3] = (l) => C.value.name = l),
               placeholder: "请输入标签名称",
               class: "modal-input"
             }, null, 512), [
-              [rt, T.value.name]
+              [rt, C.value.name]
             ])
           ]),
           g("div", qe, [
@@ -1174,12 +1174,12 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
             g("div", Ge, [
               lt(g("input", {
                 type: "color",
-                "onUpdate:modelValue": s[4] || (s[4] = (l) => T.value.color = l),
+                "onUpdate:modelValue": s[4] || (s[4] = (l) => C.value.color = l),
                 class: "modal-color-picker"
               }, null, 512), [
-                [rt, 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" }, [
@@ -1193,13 +1193,13 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
             }, "确认")
           ])
         ])
-      ])) : z("", !0)
+      ])) : $("", !0)
     ], 2));
   }
 }), Ze = /* @__PURE__ */ Z(Ke, [["__scopeId", "data-v-79777e6e"]]), Qe = {
   class: "thumbnail-wrapper",
   ref: "wrapper"
-}, tn = ["src", "alt"], en = ["viewBox"], nn = ["x", "y", "width", "height", "stroke"], sn = ["points", "stroke"], on = ["x", "y", "fill"], an = {
+}, 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"
 }, ln = /* @__PURE__ */ K({
@@ -1208,81 +1208,83 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
     src: {},
     annotations: {},
     alt: {},
-    labels: {}
+    labels: {},
+    fit: {}
   },
-  setup(m) {
-    const t = m, i = k(null), e = k(!1), a = k(0), r = k(0), c = () => {
+  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) => {
-      var f;
-      if ((f = u.style) != null && f.strokeColor) return u.style.strokeColor;
+    }, 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 _ = t.labels.find((T) => T.name === u.label);
-        if (_) return _.color;
+        const C = t.labels.find((B) => B.name === w.label);
+        if (C) return C.color;
       }
       return "#FF0000";
-    }, h = (u) => {
-      const f = u.coordinates, _ = Math.min(f.x1, f.x2), T = Math.min(f.y1, f.y2), U = Math.abs(f.x1 - f.x2), R = Math.abs(f.y1 - f.y2);
-      return { x: _, y: T, width: U, height: R };
-    }, y = (u) => u.coordinates.points.map((_) => `${_.x},${_.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) => (p(), x("div", Qe, [
+    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, tn),
-      e.value ? (p(), x("svg", {
+        alt: v.alt
+      }, null, 44, tn),
+      e.value ? (f(), p("svg", {
         key: 0,
         class: "annotation-overlay",
         viewBox: `0 0 ${a.value} ${r.value}`,
-        preserveAspectRatio: "none"
+        preserveAspectRatio: o.value
       }, [
-        (p(!0), x(L, null, D(m.annotations, (_) => (p(), x(L, {
-          key: _.id
+        (f(!0), p(R, null, F(v.annotations, (C) => (f(), p(R, {
+          key: C.id
         }, [
-          _.type === "rectangle" ? (p(), x("rect", {
+          C.type === "rectangle" ? (f(), p("rect", {
             key: 0,
-            x: h(_).x,
-            y: h(_).y,
-            width: h(_).width,
-            height: h(_).height,
-            stroke: o(_),
+            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, nn)) : z("", !0),
-          _.type === "polygon" ? (p(), x("polygon", {
+          }, null, 8, nn)) : $("", !0),
+          C.type === "polygon" ? (f(), p("polygon", {
             key: 1,
-            points: y(_),
-            stroke: o(_),
+            points: A(C),
+            stroke: h(C),
             "stroke-width": "2",
             fill: "transparent"
-          }, null, 8, sn)) : z("", !0),
-          _.label ? (p(), x("text", {
+          }, null, 8, sn)) : $("", !0),
+          C.label ? (f(), p("text", {
             key: 2,
-            x: C(_).x,
-            y: C(_).y,
-            fill: o(_),
+            x: y(C).x,
+            y: y(C).y,
+            fill: h(C),
             "font-size": "14",
             "font-weight": "bold",
             class: "anno-label"
-          }, $(_.label), 9, on)) : z("", !0)
+          }, T(C.label), 9, on)) : $("", !0)
         ], 64))), 128))
-      ], 8, en)) : (p(), x("div", an, "Loading..."))
+      ], 8, en)) : (f(), p("div", an, "Loading..."))
     ], 512));
   }
-}), rn = /* @__PURE__ */ Z(ln, [["__scopeId", "data-v-78bcbe0c"]]), cn = {
+}), rn = /* @__PURE__ */ Z(ln, [["__scopeId", "data-v-c77b0958"]]), cn = {
   key: 0,
   class: "gallery-view"
 }, 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 = {
@@ -1300,125 +1302,126 @@ const Qt = `<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, a = i, r = k("gallery"), c = k([]), o = k(0), h = k(null), y = k(null), C = k(null), u = E(() => {
-      var b, w;
-      return ((w = (b = e.actionBar) == null ? void 0 : b.annotateButton) == null ? void 0 : w.show) === !0;
-    }), f = E(() => {
-      var b, w;
-      return ((w = (b = e.actionBar) == null ? void 0 : b.exportButton) == null ? void 0 : w.show) === !0;
-    }), _ = E(() => u.value || f.value), T = E(() => {
-      var b, w;
-      return ((w = (b = e.actionBar) == null ? void 0 : b.annotateButton) == null ? void 0 : w.text) || "手动标注";
-    }), U = E(() => {
-      var b, w;
-      return ((w = (b = e.actionBar) == null ? void 0 : b.exportButton) == null ? void 0 : w.text) || "导出";
-    }), R = E(() => e.clickToEnterEditor !== !1);
-    X(() => 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", C.value && (C.value.scrollTop = 0), Gt(() => {
-        y.value && (y.value.scrollTop = 0), window.scrollTo(0, 0), requestAnimationFrame(() => {
-          var w, S;
-          (S = (w = h.value) == null ? void 0 : w.jumpTo) == null || S.call(w, 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);
         });
       });
-    }, Q = (b, w) => {
-      if (R.value) {
-        B(b);
+    }, Q = (x, b) => {
+      if (D.value) {
+        L(x);
         return;
       }
-      a("imageClick", { index: b, imageId: w.id, image: w });
-    }, J = (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 = J(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 = J(b);
-        if (w < 0)
+      triggerImageClickById: (x) => {
+        const b = J(x);
+        if (b < 0)
           return !1;
-        const S = c.value[w];
-        return S ? (a("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 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";
     }, nt = () => {
       a("export", c.value);
-    }, st = (b) => {
-      o.value = b.currentIndex, c.value[b.currentIndex] && (c.value[b.currentIndex].annotations = b.currentAnnotations);
-    }, it = (b) => {
+    }, 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, a("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));
       }
-    }, N = (b) => {
+    }, N = (x) => {
     };
-    return (b, w) => (p(), x("div", {
+    return (x, b) => (f(), p("div", {
       ref_key: "batchRootRef",
-      ref: y,
+      ref: u,
       class: "batch-annotator"
     }, [
-      r.value === "gallery" ? (p(), x("div", cn, [
+      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, [
-            (p(!0), x(L, null, D(m.labels, (S) => (p(), x("span", {
-              key: S.id,
+            (f(!0), p(R, null, F(v.labels, (M) => (f(), p("span", {
+              key: M.id,
               class: "label-badge",
-              style: V({ backgroundColor: S.color })
-            }, $(S.name), 5))), 128))
+              style: O({ backgroundColor: M.color })
+            }, T(M.name), 5))), 128))
           ])
         ]),
         g("div", {
           ref_key: "galleryGridRef",
-          ref: C,
+          ref: A,
           class: "gallery-grid"
         }, [
-          (p(!0), x(L, null, D(c.value, (S, W) => (p(), x("div", {
+          (f(!0), p(R, null, F(c.value, (M, W) => (f(), p("div", {
             key: W,
             class: "gallery-item",
-            onClick: (ht) => Q(W, S)
+            onClick: (ht) => Q(W, M)
           }, [
             g("div", un, [
               H(rn, {
-                src: S.imageUrl,
-                annotations: S.annotations || [],
-                labels: m.labels
+                src: M.imageUrl,
+                annotations: M.annotations || [],
+                labels: v.labels,
+                fit: "cover"
               }, null, 8, ["src", "annotations", "labels"])
             ]),
             g("div", vn, [
-              g("span", mn, "#" + $(W + 1), 1),
-              g("span", fn, $((S.annotations || []).length) + " 标注", 1)
+              g("span", mn, "#" + T(W + 1), 1),
+              g("span", fn, T((M.annotations || []).length) + " 标注", 1)
             ])
           ], 8, gn))), 128))
         ], 512),
-        _.value ? (p(), x("div", yn, [
-          u.value ? (p(), x("button", {
+        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" }),
-            Y(" " + $(T.value), 1)
-          ])) : z("", !0),
-          f.value ? (p(), x("button", {
+            X(" " + T(C.value), 1)
+          ])) : $("", !0),
+          w.value ? (f(), p("button", {
             key: 1,
             class: "action-btn success",
             onClick: nt
           }, [
             H(P, { name: "download" }),
-            Y(" " + $(U.value), 1)
-          ])) : z("", !0)
-        ])) : z("", !0)
-      ])) : (p(), x("div", pn, [
+            X(" " + T(B.value), 1)
+          ])) : $("", !0)
+        ])) : $("", !0)
+      ])) : (f(), p("div", pn, [
         g("div", xn, [
           g("div", bn, [
             g("button", {
@@ -1426,9 +1429,9 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
               onClick: et
             }, [
               H(P, { name: "back" }),
-              w[1] || (w[1] = Y(" 返回列表 ", -1))
+              b[1] || (b[1] = X(" 返回列表 ", -1))
             ]),
-            g("span", wn, "正在标注: " + $(o.value + 1) + " / " + $(c.value.length), 1)
+            g("span", wn, "正在标注: " + T(o.value + 1) + " / " + T(c.value.length), 1)
           ])
         ]),
         g("div", Cn, [
@@ -1436,7 +1439,7 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
             ref_key: "annotatorRef",
             ref: h,
             batchImages: c.value,
-            labels: m.labels,
+            labels: v.labels,
             annotationTypes: ["rectangle", "polygon", "point", "rotatedRect"],
             onBatchChange: st,
             onAnnotationChange: it,
@@ -1446,7 +1449,7 @@ const Qt = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" widt
       ]))
     ], 512));
   }
-}), kn = /* @__PURE__ */ Z(An, [["__scopeId", "data-v-b540069b"]]);
+}), kn = /* @__PURE__ */ Z(An, [["__scopeId", "data-v-16638a5c"]]);
 export {
   kn as BatchAnnotator,
   Ze as ImageAnnotator,