@glodon-aiot/dataset-annotation 3.13.0-alpha.29 → 3.14.0-alpha.31

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

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