@glodon-aiot/dataset-annotation 3.14.0-alpha.32 → 3.14.0-alpha.33

package/dist/es/components/VLMAnnotation/VLMLabelMaker/index.mjs

@@ -1,237 +1,239 @@
-var Ke = Object.defineProperty, $e = Object.defineProperties;
-var Ge = Object.getOwnPropertyDescriptors;
-var Se = Object.getOwnPropertySymbols;
-var qe = Object.prototype.hasOwnProperty, Je = Object.prototype.propertyIsEnumerable;
-var Ae = (c, g, l) => g in c ? Ke(c, g, { enumerable: !0, configurable: !0, writable: !0, value: l }) : c[g] = l, ne = (c, g) => {
-  for (var l in g || (g = {}))
-    qe.call(g, l) && Ae(c, l, g[l]);
-  if (Se)
-    for (var l of Se(g))
-      Je.call(g, l) && Ae(c, l, g[l]);
-  return c;
-}, we = (c, g) => $e(c, Ge(g));
-import { jsxs as Oe, jsx as b } from "react/jsx-runtime";
-import Qe, { useRef as C, useState as x, useCallback as w, useEffect as p, useImperativeHandle as Ve } from "react";
-import { fabric as P } from "fabric";
-import { useKeyPress as Y } from "ahooks";
-import et from "classnames";
+var Qt = Object.defineProperty, Vt = Object.defineProperties;
+var te = Object.getOwnPropertyDescriptors;
+var wt = Object.getOwnPropertySymbols;
+var ee = Object.prototype.hasOwnProperty, oe = Object.prototype.propertyIsEnumerable;
+var Ot = (i, g, d) => g in i ? Qt(i, g, { enumerable: !0, configurable: !0, writable: !0, value: d }) : i[g] = d, it = (i, g) => {
+  for (var d in g || (g = {}))
+    ee.call(g, d) && Ot(i, d, g[d]);
+  if (wt)
+    for (var d of wt(g))
+      oe.call(g, d) && Ot(i, d, g[d]);
+  return i;
+}, _t = (i, g) => Vt(i, te(g));
+import { jsxs as Lt, jsx as L } from "react/jsx-runtime";
+import re, { useRef as T, useState as S, useCallback as w, useEffect as E, useImperativeHandle as ne } from "react";
+import { fabric as W } from "fabric";
+import { useKeyPress as Z } from "ahooks";
+import se from "classnames";
 import "./style.less.mjs";
-import tt from "../components/Toolbar.mjs";
-import { useOCRLoadingIcon as ot } from "./hooks/useOCRLoadingIcon.mjs";
-import { useRegionNameText as rt } from "./hooks/useRegionNameText.mjs";
-import { useCropRegionImage as nt } from "./hooks/useCropRegionImage.mjs";
-import { useDrawingMode as st } from "./hooks/useDrawingMode.mjs";
-import { useRegionLoader as ct } from "./hooks/useRegionLoader.mjs";
-import { useCanvasSetup as it } from "./hooks/useCanvasSetup.mjs";
-import { useTextLayouts as at } from "./hooks/useTextLayouts.mjs";
-import { useRegionUpdate as ft } from "./hooks/useRegionUpdate.mjs";
-import { useCanvasDrag as ut } from "./hooks/useCanvasDrag.mjs";
-import { useRegionSelection as dt } from "./hooks/useRegionSelection.mjs";
-import { useOCRRecognition as mt } from "./hooks/useOCRRecognition.mjs";
-import { useDeleteRegion as lt } from "./hooks/useDeleteRegion.mjs";
-import { useDeleteControl as ht } from "./hooks/useDeleteControl.mjs";
-import { useOCRControl as gt } from "./hooks/useOCRControl.mjs";
-import { useCanvasZoom as Rt } from "./hooks/useCanvasZoom.mjs";
-import { useRegionHover as Et } from "./hooks/useRegionHover.mjs";
-import { useRegionBoundaryCheck as pt } from "./hooks/useRegionBoundaryCheck.mjs";
-import { canvasToImageCoords as Ct, imageToCanvasCoords as Tt } from "./utils/coordinateUtils.mjs";
-import { REGION_NAME_PREFIX as vt, DEFAULT_REGION_NAME as It, ZOOM_PRECISION_ERROR as kt, TEXT_LAYOUT_RECT_FILL_COLOR as Nt, TEXT_LAYOUT_RECT_STROKE_COLOR as St, TRANSPARENT_FILL as _e, SELECTED_RECT_FILL_COLOR as At, BASE_STROKE_WIDTH as se, ACTIVE_RECT_STROKE_COLOR as wt, RECT_STROKE_COLOR as Ot } from "../constants.mjs";
-const _t = Qe.forwardRef(({
-  sample: c,
+import ie from "../components/Toolbar.mjs";
+import { useOCRLoadingIcon as ce } from "./hooks/useOCRLoadingIcon.mjs";
+import { useRegionNameText as ae } from "./hooks/useRegionNameText.mjs";
+import { useCropRegionImage as fe } from "./hooks/useCropRegionImage.mjs";
+import { useDrawingMode as ue } from "./hooks/useDrawingMode.mjs";
+import { useRegionLoader as le } from "./hooks/useRegionLoader.mjs";
+import { useCanvasSetup as me } from "./hooks/useCanvasSetup.mjs";
+import { useTextLayouts as de } from "./hooks/useTextLayouts.mjs";
+import { useRegionUpdate as he } from "./hooks/useRegionUpdate.mjs";
+import { useCanvasDrag as ge } from "./hooks/useCanvasDrag.mjs";
+import { useRegionSelection as Re } from "./hooks/useRegionSelection.mjs";
+import { useOCRRecognition as pe } from "./hooks/useOCRRecognition.mjs";
+import { useDeleteRegion as Ee } from "./hooks/useDeleteRegion.mjs";
+import { useDeleteControl as Te } from "./hooks/useDeleteControl.mjs";
+import { useOCRControl as Ce } from "./hooks/useOCRControl.mjs";
+import { useCanvasZoom as ve } from "./hooks/useCanvasZoom.mjs";
+import { useRegionHover as Ie } from "./hooks/useRegionHover.mjs";
+import { useRegionBoundaryCheck as ke } from "./hooks/useRegionBoundaryCheck.mjs";
+import { useAIButtonHover as Ae } from "./hooks/useAIButtonHover.mjs";
+import Ne from "../components/AIErrorTooltip/index.mjs";
+import { canvasToImageCoords as Se, imageToCanvasCoords as xe } from "./utils/coordinateUtils.mjs";
+import { REGION_NAME_PREFIX as we, DEFAULT_REGION_NAME as Oe, ZOOM_PRECISION_ERROR as _e, TEXT_LAYOUT_RECT_FILL_COLOR as Le, TEXT_LAYOUT_RECT_STROKE_COLOR as ye, TRANSPARENT_FILL as yt, SELECTED_RECT_FILL_COLOR as Me, RECT_STROKE_COLOR as Mt, BASE_STROKE_WIDTH as ct, ACTIVE_RECT_STROKE_COLOR as De } from "../constants.mjs";
+const be = re.forwardRef(({
+  sample: i,
   labelDefinitions: g,
-  labels: l,
-  onImageLoad: xe,
+  labels: d,
+  onImageLoad: Dt,
   onChange: O,
-  onRegionSelect: ce,
+  onRegionSelect: at,
   onRegionChange: J,
-  ocrRecognize: Le,
+  ocrRecognize: bt,
   activeLabelValue: R,
   onClearActive: Q,
-  selectedRegion: T,
-  onAppendTextToActive: Me,
+  selectedRegion: C,
+  onAppendTextToActive: Pt,
   readOnly: h
-}, De) => {
-  var Ie, ke;
-  const ie = C(null), k = C(null), [ye, Ue] = x(!0), [e, We] = x(), [L, be] = x(), [v, ae] = x(1), [N, j] = x(h || !1), [I, _] = x(!1), [V, Pe] = x({
+}, Ut) => {
+  var Nt, St;
+  const ft = T(null), v = T(null), [Wt, Xt] = S(!0), [t, jt] = S(), [y, Ft] = S(), [I, ut] = S(1), [N, X] = S(h || !1), [k, _] = S(!1), [V, Bt] = S({
     left: 0,
     top: 0
-  }), F = C({
+  }), [Ht, lt] = S(!1), [tt, mt] = S(null), j = T({
     left: 0,
     top: 0
-  }), fe = C({
+  }), dt = T({
     width: 0,
     height: 0
-  }), i = C(/* @__PURE__ */ new Map()), ue = C(null), de = C(void 0), me = C(!1), le = C(!1), z = C({
+  }), c = T(/* @__PURE__ */ new Map()), ht = T(null), gt = T(void 0), Rt = T(!1), pt = T(!1), Y = T({
     width: 0,
     height: 0
-  }), he = C(!1), {
-    updateOCRLoadingIcon: xt,
+  }), Et = T(!1), {
+    updateOCRLoadingIcon: Pe,
     ocrLoadingIconMapRef: M
-  } = ot(e), {
-    updateRegionNameText: B,
-    regionNameTextMapRef: S
-  } = rt(e), ee = nt(c == null ? void 0 : c.fileUrl), je = w((o) => {
-    e && (S.current.forEach((t, r) => {
-      const n = r.left || 0, m = r.top || 0;
-      t.set({
+  } = ce(t), {
+    updateRegionNameText: z,
+    regionNameTextMapRef: A
+  } = ae(t), et = fe(i == null ? void 0 : i.fileUrl), Zt = w((o) => {
+    t && (A.current.forEach((e, r) => {
+      const n = r.left || 0, u = r.top || 0;
+      e.set({
         left: n,
         // 与标注框左边对齐
-        top: m,
+        top: u,
         // 下边缘与标注框上边缘对齐（因为 originY 是 'bottom'）
         scaleX: 1 / o,
         // 反向缩放，抵消画布缩放
         scaleY: 1 / o
         // 反向缩放，抵消画布缩放
       });
-    }), e.renderAll());
-  }, [e]), {
-    updateCanvas: X
-  } = it({
-    sample: c,
-    image: L,
-    onImageLoad: xe,
-    canvasRef: ie,
-    containerRef: k,
-    canvasInitializedRef: me,
-    bgImagePositionRef: F,
-    bgImageSizeRef: fe,
-    rectMapRef: i,
-    updateTextLayersRef: ue,
-    onRectPositionUpdated: je,
-    setCanvas: We,
-    setImage: be,
-    setScale: ae,
-    setBgImagePosition: Pe,
-    setLoading: Ue
-  }), Fe = w(() => {
-    const o = Array.from(i.current.values());
-    o.forEach((t, r) => {
-      t.name = `${vt}${r + 1}`;
-    }), i.current.forEach((t, r) => {
-      const n = S.current.get(r);
-      n && (n.set("text", t.name || It), e == null || e.renderAll());
+    }), t.renderAll());
+  }, [t]), {
+    updateCanvas: F
+  } = me({
+    sample: i,
+    image: y,
+    onImageLoad: Dt,
+    canvasRef: ft,
+    containerRef: v,
+    canvasInitializedRef: Rt,
+    bgImagePositionRef: j,
+    bgImageSizeRef: dt,
+    rectMapRef: c,
+    updateTextLayersRef: ht,
+    onRectPositionUpdated: Zt,
+    setCanvas: jt,
+    setImage: Ft,
+    setScale: ut,
+    setBgImagePosition: Bt,
+    setLoading: Xt
+  }), Yt = w(() => {
+    const o = Array.from(c.current.values());
+    o.forEach((e, r) => {
+      e.name = `${we}${r + 1}`;
+    }), c.current.forEach((e, r) => {
+      const n = A.current.get(r);
+      n && (n.set("text", e.name || Oe), t == null || t.renderAll());
     }), O && O(o);
-  }, [O, e]), {
-    zoom: Xe
-  } = Rt({
-    canvas: e,
-    setScale: ae,
-    isZoomingRef: he
-  }), Z = w(
-    (o, t) => Ct(o, t, e, L, F),
-    [e, L, V]
+  }, [O, t]), {
+    zoom: zt
+  } = ve({
+    canvas: t,
+    setScale: ut,
+    isZoomingRef: Et
+  }), B = w(
+    (o, e) => Se(o, e, t, y, j),
+    [t, y, V]
     // 添加 bgImagePosition 作为依赖，确保在图片位置更新后函数能正确工作
   ), K = w(
-    (o, t) => Tt(o, t, e, F),
-    [e, V]
+    (o, e) => xe(o, e, t, j),
+    [t, V]
     // 添加 bgImagePosition 作为依赖，确保在图片位置更新后函数能正确工作
   ), {
     updateTextLayers: $,
-    textLayersMapRef: d,
+    textLayersMapRef: m,
     textLayoutContentMapRef: G
-  } = at({
-    canvas: e,
+  } = de({
+    canvas: t,
     imageToCanvasCoords: K,
     activeLabelValue: R,
-    onAppendTextToActive: Me
+    onAppendTextToActive: Pt
   });
-  ue.current = $;
+  ht.current = $;
   const {
-    performOCRIfNeeded: ge,
+    performOCRIfNeeded: Tt,
     performOCR: q,
-    ocrRecognizingRef: Re,
-    ocrErrorRef: Ee
-  } = mt({
-    ocrRecognize: Le,
+    ocrRecognizingRef: Ct,
+    ocrErrorRef: ot
+  } = pe({
+    ocrRecognize: bt,
     onChange: O,
     updateTextLayers: $,
-    canvas: e,
-    rectMapRef: i,
-    textLayersMapRef: d,
+    canvas: t,
+    rectMapRef: c,
+    textLayersMapRef: m,
     textLayoutContentMapRef: G
   }), {
-    updateRegionShapeAndImage: pe
-  } = ft({
-    canvas: e,
-    image: L,
+    updateRegionShapeAndImage: vt
+  } = he({
+    canvas: t,
+    image: y,
     draggable: N,
-    canvasToImageCoords: Z,
+    canvasToImageCoords: B,
     imageToCanvasCoords: K,
-    cropRegionImage: ee,
+    cropRegionImage: et,
     onChange: O,
     onRegionChange: J,
-    performOCRIfNeeded: ge,
+    performOCRIfNeeded: Tt,
     updateTextLayers: $,
-    rectMapRef: i,
-    regionNameTextMapRef: S,
+    rectMapRef: c,
+    regionNameTextMapRef: A,
     ocrLoadingIconMapRef: M
   }), {
-    setupBoundaryCheck: Ce
-  } = pt({
-    canvas: e,
-    image: L,
-    canvasToImageCoords: Z,
+    setupBoundaryCheck: It
+  } = ke({
+    canvas: t,
+    image: y,
+    canvasToImageCoords: B,
     imageToCanvasCoords: K,
-    bgImagePositionRef: F,
-    bgImageSizeRef: fe,
-    regionNameTextMapRef: S
+    bgImagePositionRef: j,
+    bgImageSizeRef: dt,
+    regionNameTextMapRef: A
   });
-  p(() => {
-    X();
-  }, [X]), p(() => {
-    e && (d.current.forEach((o) => {
-      o.forEach((t) => {
-        t.off("mousedown"), t.off("mouseover"), t.off("mouseout"), e.remove(t), G.current.delete(t);
+  E(() => {
+    F();
+  }, [F]), E(() => {
+    t && (m.current.forEach((o) => {
+      o.forEach((e) => {
+        e.off("mousedown"), e.off("mouseover"), e.off("mouseout"), t.remove(e), G.current.delete(e);
       });
-    }), d.current.clear(), S.current.forEach((o) => {
-      e.remove(o);
-    }), S.current.clear(), M.current.forEach((o) => {
-      e.remove(o);
-    }), M.current.clear(), i.current.forEach((o, t) => {
-      t.off("modified"), t.off("moved"), e.remove(t);
-    }), i.current.clear(), le.current = !1, de.current = void 0, e.renderAll());
-  }, [e, c == null ? void 0 : c.id]), p(() => {
-    if (!k.current)
+    }), m.current.clear(), A.current.forEach((o) => {
+      t.remove(o);
+    }), A.current.clear(), M.current.forEach((o) => {
+      t.remove(o);
+    }), M.current.clear(), c.current.forEach((o, e) => {
+      e.off("modified"), e.off("moved"), t.remove(e);
+    }), c.current.clear(), pt.current = !1, gt.current = void 0, t.renderAll());
+  }, [t, i == null ? void 0 : i.id]), E(() => {
+    if (!v.current)
       return;
-    z.current = {
-      width: k.current.offsetWidth,
-      height: k.current.offsetHeight
+    Y.current = {
+      width: v.current.offsetWidth,
+      height: v.current.offsetHeight
     };
     const o = new ResizeObserver(() => {
-      if (!k.current || he.current)
+      if (!v.current || Et.current)
         return;
-      if (e) {
-        const s = e.getZoom();
-        if (Math.abs(s - v) > kt)
+      if (t) {
+        const s = t.getZoom();
+        if (Math.abs(s - I) > _e)
           return;
       }
-      const t = k.current.offsetWidth, r = k.current.offsetHeight, n = z.current.width, m = z.current.height;
-      (t !== n || r !== m) && (z.current = {
-        width: t,
+      const e = v.current.offsetWidth, r = v.current.offsetHeight, n = Y.current.width, u = Y.current.height;
+      (e !== n || r !== u) && (Y.current = {
+        width: e,
         height: r
-      }, X());
+      }, F());
     });
-    return o.observe(k.current), () => {
+    return o.observe(v.current), () => {
       o.disconnect();
     };
-  }, [X, e, v]), Y("ctrl", () => {
-    h || (I && (_(!1), y()), j(!0));
+  }, [F, t, I]), Z("ctrl", () => {
+    h || (k && (_(!1), b()), X(!0));
   }, {
     events: ["keydown"]
-  }), Y("ctrl", () => {
-    h || j(!1);
+  }), Z("ctrl", () => {
+    h || X(!1);
   }, {
     events: ["keyup"]
-  }), p(() => {
-    if (!e)
+  }), E(() => {
+    if (!t)
       return;
-    const o = se / v, t = /* @__PURE__ */ new Set();
-    d.current.forEach((r) => {
+    const o = ct / I, e = /* @__PURE__ */ new Set();
+    m.current.forEach((r) => {
       r.forEach((n) => {
-        t.add(n);
+        e.add(n);
       });
-    }), e.getObjects().forEach((r) => {
-      r instanceof P.Rect && !t.has(r) && r.set({
+    }), t.getObjects().forEach((r) => {
+      r instanceof W.Rect && !e.has(r) && r.set({
         strokeWidth: o,
         strokeUniform: !0,
         objectCaching: !1,
@@ -239,12 +241,12 @@ const _t = Qe.forwardRef(({
         statefullCache: !1,
         noScaleCache: !1
       });
-    }), d.current.forEach((r) => {
+    }), m.current.forEach((r) => {
       r.forEach((n) => {
         n.set({
-          fill: Nt,
+          fill: Le,
           // 确保填充色被保留
-          stroke: St,
+          stroke: ye,
           // 确保边框色被保留
           strokeWidth: o,
           // 根据缩放调整边框宽度，保持视觉一致
@@ -255,135 +257,154 @@ const _t = Qe.forwardRef(({
           noScaleCache: !1
         });
       });
-    }), S.current.forEach((r, n) => {
-      const m = n.left || 0, s = n.top || 0;
+    }), A.current.forEach((r, n) => {
+      const u = n.left || 0, s = n.top || 0;
       r.set({
-        left: m,
+        left: u,
         // 与标注框左边对齐
         top: s,
         // 下边缘与标注框上边缘对齐（因为 originY 是 'bottom'）
-        scaleX: 1 / v,
+        scaleX: 1 / I,
         // 反向缩放，抵消画布缩放
-        scaleY: 1 / v
+        scaleY: 1 / I
         // 反向缩放，抵消画布缩放
       });
       const a = M.current.get(n);
       if (a) {
-        const u = n.getScaledWidth();
+        const l = n.getScaledWidth();
         n.getScaledHeight(), a.set({
-          left: m,
+          left: u,
           // top 位置由动画控制，这里不更新
-          scaleX: 1 / v,
+          scaleX: 1 / I,
           // 反向缩放，抵消画布缩放，保持固定视觉粗细
-          scaleY: 1 / v
+          scaleY: 1 / I
           // 反向缩放，抵消画布缩放，保持固定视觉粗细
         });
         const f = a.getObjects();
         if (f && f.length > 0) {
-          const E = u * v;
-          f.forEach((A) => {
-            A instanceof P.Rect && A.set("width", E);
+          const p = l * I;
+          f.forEach((x) => {
+            x instanceof W.Rect && x.set("width", p);
           });
         }
       }
-    }), e.renderAll();
-  }, [e, v]), ut({
-    canvas: e,
+    }), t.renderAll();
+  }, [t, I]), ge({
+    canvas: t,
     draggable: N,
-    drawingMode: I,
-    textLayersMapRef: d
+    drawingMode: k,
+    textLayersMapRef: m
   });
   const {
     performDelete: D,
-    deleteDirectly: Ze
-  } = lt({
-    canvas: e,
+    deleteDirectly: Kt
+  } = Ee({
+    canvas: t,
     onRegionChange: J,
-    updateRegionNames: Fe,
-    rectMapRef: i,
-    textLayersMapRef: d,
+    updateRegionNames: Yt,
+    rectMapRef: c,
+    textLayersMapRef: m,
     textLayoutContentMapRef: G,
-    regionNameTextMapRef: S,
+    regionNameTextMapRef: A,
     ocrLoadingIconMapRef: M
   });
   w((o) => {
-    if (!e)
+    if (!t)
       return;
-    let t = null;
-    i.current.forEach((r, n) => {
-      r.id === o && (t = n);
-    }), t && D(t);
-  }, [e, D]);
-  const He = w((o) => {
-    if (!e)
+    let e = null;
+    c.current.forEach((r, n) => {
+      r.id === o && (e = n);
+    }), e && D(e);
+  }, [t, D]);
+  const $t = w((o) => {
+    if (!t)
       return;
-    let t = null;
-    i.current.forEach((r) => {
-      r.id === o && (t = r);
-    }), t && q(t);
-  }, [e, q]), Ye = w((o) => {
-    if (!e)
+    let e = null;
+    c.current.forEach((r) => {
+      r.id === o && (e = r);
+    }), e && q(e);
+  }, [t, q]), Gt = w((o) => {
+    if (!t)
       return;
-    const t = i.current.get(o);
-    t && q(t);
-  }, [e, q]);
-  Ve(De, () => ({
-    performOCRById: He,
-    ocrRecognizingRef: Re,
-    ocrErrorRef: Ee
+    const e = c.current.get(o);
+    e && q(e);
+  }, [t, q]);
+  ne(Ut, () => ({
+    performOCRById: $t,
+    ocrRecognizingRef: Ct,
+    ocrErrorRef: ot
   }));
   const {
-    createDeleteControl: te
-  } = ht({
+    createDeleteControl: rt
+  } = Te({
     performDelete: D
   }), {
-    createOCRControl: oe
-  } = gt({
-    performOCR: Ye,
-    ocrRecognizingRef: Re,
-    ocrErrorRef: Ee,
-    rectMapRef: i
+    createOCRControl: nt
+  } = Ce({
+    performOCR: Gt,
+    ocrRecognizingRef: Ct,
+    ocrErrorRef: ot,
+    rectMapRef: c
   });
-  dt({
-    canvas: e,
-    onRegionSelect: ce,
-    createDeleteControl: te,
-    createOCRControl: oe,
-    textLayersMapRef: d,
-    rectMapRef: i
+  Re({
+    canvas: t,
+    onRegionSelect: at,
+    createDeleteControl: rt,
+    createOCRControl: nt,
+    textLayersMapRef: m,
+    rectMapRef: c
+  }), Ae({
+    canvas: t,
+    ocrErrorRef: ot,
+    rectMapRef: c,
+    onAIButtonHover: (o, e) => {
+      var r;
+      if (o && e) {
+        const n = (r = v.current) == null ? void 0 : r.getBoundingClientRect();
+        if (n) {
+          const u = e.x - n.left, s = e.y - n.top;
+          lt(!0), mt({
+            x: u,
+            y: s
+          });
+        }
+      } else
+        lt(!1), mt(null);
+    }
   });
   const {
-    stopDraw: y
-  } = st({
-    canvas: e,
-    drawingMode: I,
+    stopDraw: b
+  } = ue({
+    canvas: t,
+    drawingMode: k,
     draggable: N,
     setDrawingMode: _,
-    canvasToImageCoords: Z,
+    canvasToImageCoords: B,
     labelDefinitions: g,
     onChange: O,
-    cropRegionImage: ee,
-    updateRegionShapeAndImage: pe,
-    performOCRIfNeeded: ge,
-    createDeleteControl: te,
-    createOCRControl: oe,
-    updateRegionNameText: B,
+    cropRegionImage: et,
+    updateRegionShapeAndImage: vt,
+    performOCRIfNeeded: Tt,
+    createDeleteControl: rt,
+    createOCRControl: nt,
+    updateRegionNameText: z,
     onRegionChange: J,
-    onRegionSelect: ce,
-    rectMapRef: i,
-    textLayersMapRef: d,
-    setupBoundaryCheck: Ce
+    onRegionSelect: at,
+    rectMapRef: c,
+    textLayersMapRef: m,
+    regionNameTextMapRef: A,
+    setupBoundaryCheck: It
   });
-  p(() => {
-    R && (_(!1), y());
-  }, [R, y]), p(() => {
-    h && (j(!0), _(!1), y());
-  }, [h, y]), p(() => {
-    if (!e)
+  E(() => {
+    R && (_(!1), b());
+  }, [R, b]), E(() => {
+    h && (X(!0), _(!1), b());
+  }, [h, b]), E(() => {
+    if (!t)
       return;
     const o = () => {
-      e.getObjects().forEach((t) => {
-        t instanceof P.Rect && t.selectable && (t.set({
+      t.getObjects().forEach((e) => {
+        e instanceof W.Rect && e.selectable && (e.set({
           lockMovementX: h,
           lockMovementY: h,
           lockScalingX: h,
@@ -391,240 +412,242 @@ const _t = Qe.forwardRef(({
           hasControls: !h
           // 在只读模式下，如果有 activeLabelValue，我们可能希望它保持选中状态
           // 但不允许用户通过点击来取消选中或选中其他（这个由 canvas.selection 控制）
-        }), h && t.controls);
-      }), e.requestRenderAll();
+        }), h && e.controls);
+      }), t.requestRenderAll();
     };
-    return o(), e.on("object:added", o), () => {
-      e.off("object:added", o);
+    return o(), t.on("object:added", o), () => {
+      t.off("object:added", o);
     };
-  }, [e, h]), ct({
-    canvas: e,
-    sample: c,
-    image: L,
+  }, [t, h]), le({
+    canvas: t,
+    sample: i,
+    image: y,
     bgImagePosition: V,
-    canvasInitializedRef: me,
-    bgImagePositionRef: F,
-    sampleRef: de,
-    labelsLoadedRef: le,
-    rectMapRef: i,
-    textLayersMapRef: d,
+    canvasInitializedRef: Rt,
+    bgImagePositionRef: j,
+    sampleRef: gt,
+    labelsLoadedRef: pt,
+    rectMapRef: c,
+    textLayersMapRef: m,
     textLayoutContentMapRef: G,
-    regionNameTextMapRef: S,
+    regionNameTextMapRef: A,
     ocrLoadingIconMapRef: M,
     imageToCanvasCoords: K,
-    updateRegionShapeAndImage: pe,
-    createDeleteControl: te,
-    createOCRControl: oe,
-    updateRegionNameText: B,
+    updateRegionShapeAndImage: vt,
+    createDeleteControl: rt,
+    createOCRControl: nt,
+    updateRegionNameText: z,
     updateTextLayers: $,
-    setupBoundaryCheck: Ce,
-    cropRegionImage: ee,
+    setupBoundaryCheck: It,
+    cropRegionImage: et,
     onChange: O
   });
-  const Te = C([]);
-  p(() => {
-    if (!e)
+  const kt = T([]);
+  E(() => {
+    if (!t)
       return;
-    const o = Te.current, t = l != null ? l : [], r = new Set(o.map((s) => s.id)), n = new Set(t.map((s) => s.id));
-    if (t.length < o.length) {
+    const o = kt.current, e = d != null ? d : [], r = new Set(o.map((s) => s.id)), n = new Set(e.map((s) => s.id));
+    if (e.length < o.length) {
       const s = [];
-      i.current.forEach((a, u) => {
-        r.has(a.id) && !n.has(a.id) && s.push(u);
+      c.current.forEach((a, l) => {
+        r.has(a.id) && !n.has(a.id) && s.push(l);
       }), s.forEach((a) => {
-        Ze(a);
+        Kt(a);
       });
     }
-    if (Te.current = t, !l || l.length === 0)
+    if (kt.current = e, !d || d.length === 0)
       return;
-    let m = !1;
-    i.current.forEach((s, a) => {
-      var E, A;
-      const u = l.find((H) => H.id === s.id);
-      if (!u)
+    let u = !1;
+    c.current.forEach((s, a) => {
+      var p, x;
+      const l = d.find((H) => H.id === s.id);
+      if (!l)
         return;
-      const f = we(ne(ne({}, s), u), {
+      const f = _t(it(it({}, s), l), {
         // Keep shape from canvas to avoid desync
         shape: s.shape,
-        image: (E = u.image) != null ? E : s.image,
-        textLayouts: (A = u.textLayouts) != null ? A : s.textLayouts
+        image: (p = l.image) != null ? p : s.image,
+        textLayouts: (x = l.textLayouts) != null ? x : s.textLayouts
       });
-      (f.name !== s.name || f.content !== s.content || f.image !== s.image || f.textLayouts !== s.textLayouts) && (i.current.set(a, f), f.name !== s.name && B(a, f), m = !0);
-    }), m && (e == null || e.renderAll());
-  }, [l, e, B, D]), Et({
-    canvas: e,
-    drawingMode: I,
+      (f.name !== s.name || f.content !== s.content || f.image !== s.image || f.textLayouts !== s.textLayouts) && (c.current.set(a, f), f.name !== s.name && z(a, f), u = !0);
+    }), u && (t == null || t.renderAll());
+  }, [d, t, z, D]), Ie({
+    canvas: t,
+    drawingMode: k,
     draggable: N,
-    textLayersMapRef: d
-  }), p(() => {
-    if (e)
-      if (T === null) {
+    textLayersMapRef: m
+  }), E(() => {
+    if (t)
+      if (C === null) {
         const o = /* @__PURE__ */ new Set();
-        d.current.forEach((r) => {
+        m.current.forEach((r) => {
           r.forEach((n) => {
             o.add(n);
           });
-        }), e.getObjects().forEach((r) => {
-          r instanceof P.Rect && !o.has(r) && r.set({
-            fill: _e
+        }), t.getObjects().forEach((r) => {
+          r instanceof W.Rect && !o.has(r) && r.set({
+            fill: yt
             // 移除填充色
           });
-        }), e.getActiveObject() && (e.discardActiveObject(), e.renderAll());
+        }), t.getActiveObject() && (t.discardActiveObject(), t.renderAll());
       } else {
-        const o = e.getActiveObject(), t = o ? i.current.get(o) : null;
-        if ((t == null ? void 0 : t.id) === (T == null ? void 0 : T.id))
+        const o = t.getActiveObject(), e = o ? c.current.get(o) : null;
+        if ((e == null ? void 0 : e.id) === (C == null ? void 0 : C.id))
           return;
-        if (T) {
+        if (C) {
           let r = null;
-          if (i.current.forEach((n, m) => {
-            n.id === T.id && (r = m);
+          if (c.current.forEach((n, u) => {
+            n.id === C.id && (r = u);
           }), r) {
             const n = /* @__PURE__ */ new Set();
-            d.current.forEach((u) => {
-              u.forEach((f) => {
+            m.current.forEach((l) => {
+              l.forEach((f) => {
                 n.add(f);
               });
-            }), e.getObjects().forEach((u) => {
-              u instanceof P.Rect && !n.has(u) && u.set({
-                fill: _e
+            }), t.getObjects().forEach((l) => {
+              l instanceof W.Rect && !n.has(l) && l.set({
+                fill: yt
                 // 移除填充色
               });
             });
-            const m = e.getZoom(), s = se / m, a = r;
+            const u = t.getZoom(), s = ct / u, a = r;
             a.set({
-              fill: At,
+              fill: Me,
               // 选中时添加填充色
+              stroke: Mt,
+              // 选中时取消高亮，使用普通边框颜色
               strokeUniform: !0,
               strokeWidth: s,
               objectCaching: !1,
               statefullCache: !1,
               noScaleCache: !1
-            }), e.setActiveObject(a), e.renderAll();
+            }), t.setActiveObject(a), t.renderAll();
           }
         }
       }
-  }, [e, T, i, d]), p(() => {
+  }, [t, C, c, m]), E(() => {
     var a;
-    if (!e)
+    if (!t)
       return;
-    const o = (a = R == null ? void 0 : R.region) == null ? void 0 : a.id, t = T == null ? void 0 : T.id, r = /* @__PURE__ */ new Set();
-    d.current.forEach((u) => {
-      u.forEach((f) => {
+    const o = (a = R == null ? void 0 : R.region) == null ? void 0 : a.id, e = C == null ? void 0 : C.id, r = /* @__PURE__ */ new Set();
+    m.current.forEach((l) => {
+      l.forEach((f) => {
         r.add(f);
       });
     });
     let n = !1;
-    const m = e.getZoom(), s = se / m;
-    i.current.forEach((u, f) => {
+    const u = t.getZoom(), s = ct / u;
+    c.current.forEach((l, f) => {
       if (r.has(f))
         return;
-      const E = o === u.id;
-      if (t === u.id) {
-        const W = d.current.get(f);
-        W && W.length > 0 && W.forEach((Ne) => {
-          Ne.visible !== E && (Ne.set({
-            visible: E
+      const p = o === l.id;
+      if (e === l.id) {
+        const U = m.current.get(f);
+        U && U.length > 0 && U.forEach((xt) => {
+          xt.visible !== p && (xt.set({
+            visible: p
           }), n = !0);
         });
         return;
       }
-      const H = f.stroke, re = E ? wt : Ot;
-      H !== re && (f.set({
-        stroke: re,
+      const H = f.stroke, st = p ? De : Mt;
+      H !== st && (f.set({
+        stroke: st,
         strokeWidth: s,
         strokeUniform: !0
       }), n = !0);
-      const U = d.current.get(f);
-      U && U.length > 0 && U.forEach((W) => {
-        W.visible !== E && (W.set({
-          visible: E
+      const P = m.current.get(f);
+      P && P.length > 0 && P.forEach((U) => {
+        U.visible !== p && (U.set({
+          visible: p
         }), n = !0);
       });
-    }), n && e.renderAll();
-  }, [e, R, T, d, i]), p(() => {
-    var n, m;
-    if (!e)
+    }), n && t.renderAll();
+  }, [t, R, C, m, c]), E(() => {
+    var n, u;
+    if (!t)
       return;
     const o = (n = R == null ? void 0 : R.region) == null ? void 0 : n.id;
     if (!o)
       return;
-    let t = null;
-    if (i.current.forEach((s, a) => {
-      s.id === o && (t = a);
-    }), !t)
+    let e = null;
+    if (c.current.forEach((s, a) => {
+      s.id === o && (e = a);
+    }), !e)
       return;
-    t.bringToFront(), ((m = d.current.get(t)) != null ? m : []).forEach((s) => {
+    e.bringToFront(), ((u = m.current.get(e)) != null ? u : []).forEach((s) => {
       s.bringToFront();
-    }), e.renderAll();
-  }, [e, R, i, d]), p(() => {
-    if (!e || !R || !Q)
+    }), t.renderAll();
+  }, [t, R, c, m]), E(() => {
+    if (!t || !R || !Q)
       return;
-    const o = (t) => {
-      var U;
-      if (I)
+    const o = (e) => {
+      var P;
+      if (k)
         return;
-      const r = (U = t.e) == null ? void 0 : U.target;
+      const r = (P = e.e) == null ? void 0 : P.target;
       if ((r == null ? void 0 : r.tagName) === "INPUT" || (r == null ? void 0 : r.tagName) === "TEXTAREA")
         return;
-      const n = e.getPointer(t.e), m = n.x, s = n.y, a = Z(m, s), u = R.region, {
+      const n = t.getPointer(e.e), u = n.x, s = n.y, a = B(u, s), l = R.region, {
         x: f,
-        y: E,
-        width: A,
+        y: p,
+        width: x,
         height: H
-      } = u.shape;
-      a.x >= f && a.x <= f + A && a.y >= E && a.y <= E + H || Q();
+      } = l.shape;
+      a.x >= f && a.x <= f + x && a.y >= p && a.y <= p + H || Q();
     };
-    return e.on("mouse:down", o), () => {
-      e.off("mouse:down", o);
+    return t.on("mouse:down", o), () => {
+      t.off("mouse:down", o);
     };
-  }, [e, R, Q, Z, I]);
-  const ve = w((o) => {
-    const t = o.target;
-    if ((t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || !e || h)
+  }, [t, R, Q, B, k]);
+  const At = w((o) => {
+    const e = o.target;
+    if ((e == null ? void 0 : e.tagName) === "INPUT" || (e == null ? void 0 : e.tagName) === "TEXTAREA" || !t || h)
       return;
-    const r = e.getActiveObject();
-    !r || !(r instanceof P.Rect) || D(r);
-  }, [e, D]);
-  Y("Delete", ve), Y("Backspace", ve), Y("r", (o) => {
-    const t = o.target;
-    (t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || t != null && t.isContentEditable || h || !I && !N && _(!0);
+    const r = t.getActiveObject();
+    !r || !(r instanceof W.Rect) || D(r);
+  }, [t, D]);
+  Z("Delete", At), Z("Backspace", At), Z("r", (o) => {
+    const e = o.target;
+    (e == null ? void 0 : e.tagName) === "INPUT" || (e == null ? void 0 : e.tagName) === "TEXTAREA" || e != null && e.isContentEditable || h || !k && !N && _(!0);
   }, {
     exactMatch: !1
     // 允许大小写
   });
-  const ze = () => {
-    h || (I && (_(!1), y()), j(!N));
-  }, Be = () => {
-    h || (N && j(!1), _(!I));
+  const qt = () => {
+    h || (k && (_(!1), b()), X(!N));
+  }, Jt = () => {
+    h || (N && X(!1), _(!k));
   };
-  return p(() => () => {
-    e && e.dispose();
-  }, []), /* @__PURE__ */ Oe("div", {
+  return E(() => () => {
+    t && t.dispose();
+  }, []), /* @__PURE__ */ Lt("div", {
     style: {
       width: "100%",
       height: "100%",
       display: "flex",
       position: "relative"
     },
-    children: [ye && /* @__PURE__ */ b("div", {
+    children: [Wt && /* @__PURE__ */ L("div", {
       className: "vlm-loading-overlay",
-      children: /* @__PURE__ */ b("div", {
+      children: /* @__PURE__ */ L("div", {
         className: "vlm-loading-spinner"
       })
-    }), /* @__PURE__ */ b("div", {
+    }), /* @__PURE__ */ L("div", {
       className: "vlm-marker-toolbar",
-      children: /* @__PURE__ */ b(tt, {
-        drawingMode: I,
+      children: /* @__PURE__ */ L(ie, {
+        drawingMode: k,
         draggable: N,
-        scale: v,
-        onToggleDrawingMode: Be,
-        onToggleDrag: ze,
-        onZoom: Xe,
-        onFitToScreen: X,
+        scale: I,
+        onToggleDrawingMode: Jt,
+        onToggleDrag: qt,
+        onZoom: zt,
+        onFitToScreen: F,
         readOnly: h
       })
-    }), /* @__PURE__ */ Oe("div", {
-      ref: k,
-      className: et({
+    }), /* @__PURE__ */ Lt("div", {
+      ref: v,
+      className: se({
         "vlm-label-maker-wrap": !0,
         draggable: N
       }),
@@ -635,17 +658,21 @@ const _t = Qe.forwardRef(({
         flex: 1,
         position: "relative"
       },
-      children: [(((Ie = c == null ? void 0 : c.sampleFileName) == null ? void 0 : Ie.originalName) || ((ke = c == null ? void 0 : c.sampleFileName) == null ? void 0 : ke.name)) && /* @__PURE__ */ b("div", {
+      children: [(((Nt = i == null ? void 0 : i.sampleFileName) == null ? void 0 : Nt.originalName) || ((St = i == null ? void 0 : i.sampleFileName) == null ? void 0 : St.name)) && /* @__PURE__ */ L("div", {
         className: "vlm-image-name",
-        children: c.sampleFileName.originalName || c.sampleFileName.name
-      }), /* @__PURE__ */ b("canvas", {
+        children: i.sampleFileName.originalName || i.sampleFileName.name
+      }), /* @__PURE__ */ L("canvas", {
         className: "vlm-label-maker-canvas",
-        ref: ie
+        ref: ft
+      }), tt && /* @__PURE__ */ L(Ne, {
+        visible: Ht,
+        x: tt.x,
+        y: tt.y
       })]
     })]
   });
 });
-_t.displayName = "VLMLabelMaker";
+be.displayName = "VLMLabelMaker";
 export {
-  _t as default
+  be as default
 };