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

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDrawingMode.mjs

@@ -1,42 +1,57 @@
-import { useCallback as Q, useEffect as te } from "react";
-import { fabric as j } from "fabric";
-import { TEMP_RECT_FILL_COLOR as V, RECT_STROKE_COLOR as U, TEMP_RECT_STROKE_DASH_ARRAY as v, TRANSPARENT_FILL as oe, REGION_NAME_PREFIX as re, BASE_STROKE_WIDTH as a } from "../../constants.mjs";
-const ne = ({
+import { useCallback as ue, useRef as fe, useEffect as he } from "react";
+import { fabric as b } from "fabric";
+import { CROSSHAIR_LINE_COLOR as me, CROSSHAIR_LINE_DASH_ARRAY as ge, CROSSHAIR_LINE_WIDTH as ke, TEMP_RECT_FILL_COLOR as be, RECT_STROKE_COLOR as G, TEMP_RECT_STROKE_DASH_ARRAY as pe, TRANSPARENT_FILL as Ee, REGION_NAME_PREFIX as xe, BASE_STROKE_WIDTH as K } from "../../constants.mjs";
+const Te = ({
   canvas: e,
-  drawingMode: x,
-  draggable: H,
-  setDrawingMode: $,
-  canvasToImageCoords: G,
-  labelDefinitions: y,
-  onChange: T,
-  cropRegionImage: K,
-  updateRegionShapeAndImage: L,
-  performOCRIfNeeded: B,
-  createDeleteControl: D,
-  updateRegionNameText: N,
-  onRegionChange: S,
-  onRegionSelect: w,
+  drawingMode: C,
+  draggable: q,
+  setDrawingMode: J,
+  canvasToImageCoords: Q,
+  labelDefinitions: X,
+  onChange: a,
+  cropRegionImage: V,
+  updateRegionShapeAndImage: P,
+  performOCRIfNeeded: v,
+  createDeleteControl: ee,
+  createOCRControl: te,
+  updateRegionNameText: oe,
+  onRegionChange: U,
+  onRegionSelect: M,
   rectMapRef: h,
-  textLayersMapRef: z
+  textLayersMapRef: re,
+  setupBoundaryCheck: ie
 }) => {
-  const X = Q(() => {
-    const Y = /* @__PURE__ */ new Set();
-    return z.current.forEach((r) => {
-      r.forEach((l) => {
-        Y.add(l);
+  const D = ue(() => {
+    const R = /* @__PURE__ */ new Set();
+    return re.current.forEach((T) => {
+      T.forEach((W) => {
+        R.add(W);
       });
-    }), Y;
-  }, [z]), R = Q(() => {
+    }), R;
+  }, [re]), l = fe({
+    horizontal: null,
+    vertical: null
+  }), Le = fe({
+    dleft: -1,
+    dtop: -1,
+    dw: 0,
+    dh: 0,
+    rect: null
+  }), Z = ue(() => {
     e && (e.skipTargetFind = !1);
   }, [e]);
-  return te(() => {
-    if (!e || !x || H) {
-      if (R(), e && !x) {
+  return he(() => {
+    if (!e || !C || q) {
+      if (Z(), e && !C) {
+        l.current.horizontal && e.getObjects().includes(l.current.horizontal) && e.remove(l.current.horizontal), l.current.vertical && e.getObjects().includes(l.current.vertical) && e.remove(l.current.vertical), l.current = {
+          horizontal: null,
+          vertical: null
+        };
         const o = e.getActiveObject();
         e.selection = !1, e.skipTargetFind = !1;
-        const n = X();
-        e.getObjects().forEach((t) => {
-          t instanceof j.Rect && n.has(t) ? t.set({
+        const r = D();
+        e.getObjects().forEach((i) => {
+          i instanceof b.Rect && r.has(i) ? i.set({
             evented: !0,
             selectable: !1,
             lockMovementX: !0,
@@ -44,69 +59,131 @@ const ne = ({
             lockScalingX: !0,
             lockScalingY: !0,
             lockRotation: !0
-          }) : (t.set("evented", !0), t.set("selectable", !0));
+          }) : (i.set("evented", !0), i.set("selectable", !0), i instanceof b.Rect && i.set("hasControls", !0));
         }), o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll()), e.defaultCursor = "default", e.setCursor("default");
       }
       return;
     }
-    R(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((o) => {
-      o.set("evented", !1), o.set("selectable", !1);
-    }), e.defaultCursor = "crosshair", e.setCursor("crosshair");
-    let r = -1, l = -1, d = 0, m = 0, f = null;
-    const q = (o) => {
-      e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), r = -1, l = -1, d = 0, m = 0;
-      const t = e.getPointer(o.e);
-      l = t.x, r = t.y, e.skipTargetFind = !0;
-    }, P = (o) => {
-      if (l === -1 || r === -1)
+    Z(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((o) => {
+      o.set("evented", !1), o.set("selectable", !1), o instanceof b.Rect && o.hasControls && o.set("hasControls", !1);
+    }), e.defaultCursor = "crosshair", e.setCursor("crosshair"), l.current.horizontal && e.getObjects().includes(l.current.horizontal) && e.remove(l.current.horizontal), l.current.vertical && e.getObjects().includes(l.current.vertical) && e.remove(l.current.vertical), l.current = {
+      horizontal: null,
+      vertical: null
+    };
+    const T = e.getWidth(), W = e.getHeight(), m = e.getZoom(), L = T / m, A = W / m, O = Math.max(L, A) * 3, F = ke / m, S = new b.Line([-O, 0, O, 0], {
+      stroke: me,
+      strokeWidth: F,
+      strokeDashArray: ge,
+      selectable: !1,
+      evented: !1,
+      excludeFromExport: !0,
+      // 导出时不包含此线
+      strokeUniform: !0,
+      // 设置为 true，使线宽随缩放调整以保持视觉一致
+      visible: !1
+      // 初始状态隐藏，只有鼠标进入画布时才显示
+    }), _ = new b.Line([0, -O, 0, O], {
+      stroke: me,
+      strokeWidth: F,
+      strokeDashArray: ge,
+      selectable: !1,
+      evented: !1,
+      excludeFromExport: !0,
+      // 导出时不包含此线
+      strokeUniform: !0,
+      // 设置为 true，使线宽随缩放调整以保持视觉一致
+      visible: !1
+      // 初始状态隐藏，只有鼠标进入画布时才显示
+    });
+    l.current = {
+      horizontal: S,
+      vertical: _
+    }, e.add(S), e.add(_), S.sendToBack(), _.sendToBack();
+    const z = (o, r) => {
+      const i = l.current.horizontal, d = l.current.vertical;
+      if (!i || !d)
+        return;
+      const u = e.getZoom(), g = e.getWidth(), c = e.getHeight(), k = g / u, p = c / u, f = Math.max(k, p) * 3;
+      i.set({
+        x1: o - f,
+        y1: r,
+        x2: o + f,
+        y2: r,
+        visible: !0
+        // 显示辅助线
+      }), d.set({
+        x1: o,
+        y1: r - f,
+        x2: o,
+        y2: r + f,
+        visible: !0
+        // 显示辅助线
+      }), i.sendToBack(), d.sendToBack(), e.renderAll();
+    }, E = () => {
+      const o = l.current.horizontal, r = l.current.vertical;
+      !o || !r || (o.set({
+        visible: !1
+      }), r.set({
+        visible: !1
+      }), e.renderAll());
+    }, t = Le.current, H = (o) => {
+      if (e.skipTargetFind && (t.dleft === -1 || t.dtop === -1)) {
+        const r = e.getPointer(o.e);
+        t.dleft = r.x, t.dtop = r.y;
+      }
+    }, Ae = (o) => {
+      const r = e.getPointer(o.e);
+      z(r.x, r.y);
+    }, B = (o) => {
+      if (Ae(o), t.dleft === -1 || t.dtop === -1)
         return;
-      const n = e.getPointer(o.e);
-      let t = n.x, c = n.y;
-      if (d = Math.abs(t - l), m = Math.abs(c - r), d === 0 || m === 0)
+      const r = e.getPointer(o.e);
+      let i = r.x, d = r.y;
+      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(d - t.dtop), t.dw === 0 || t.dh === 0)
         return;
-      let g = r > c ? c : r, C = l > t ? t : l, u = d, k = m;
-      f && e.remove(f);
-      const A = e.getZoom(), p = a / A;
-      f = new j.Rect({
-        left: C,
-        top: g,
-        width: u,
+      let u = t.dtop > d ? d : t.dtop, g = t.dleft > i ? i : t.dleft, c = t.dw, k = t.dh;
+      t.rect && e.remove(t.rect);
+      const p = e.getZoom(), f = K / p;
+      t.rect = new b.Rect({
+        left: g,
+        top: u,
+        width: c,
         height: k,
-        fill: V,
-        stroke: U,
-        strokeWidth: p,
+        fill: be,
+        stroke: G,
+        strokeWidth: f,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
-        strokeDashArray: v,
+        strokeDashArray: pe,
         selectable: !1,
         evented: !1,
         objectCaching: !1,
         // 禁用缓存，避免缩放时边框变虚
         statefullCache: !1,
         noScaleCache: !1
-      }), e.add(f), e.renderAll();
-    }, W = (o) => {
-      if (l === -1 || r === -1) {
-        r = -1, l = -1;
+      }), e.add(t.rect), e.renderAll();
+    }, I = (o) => {
+      if (t.dleft === -1 || t.dtop === -1) {
+        t.dtop = -1, t.dleft = -1;
         return;
       }
-      const n = e.getPointer(o.e);
-      let t = n.x, c = n.y;
-      if (d = Math.abs(t - l), m = Math.abs(c - r), d === 0 || m === 0) {
-        f && (e.remove(f), e.renderAll()), r = -1, l = -1;
+      const r = e.getPointer(o.e);
+      let i = r.x, d = r.y;
+      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(d - t.dtop), t.dw === 0 || t.dh === 0) {
+        t.rect && (e.remove(t.rect), e.renderAll()), t.dtop = -1, t.dleft = -1;
         return;
       }
-      let g = r > c ? c : r, C = l > t ? t : l, u = d, k = m;
-      f && (e.remove(f), f = null);
-      const A = G(C, g), p = u, F = k, E = e.getZoom(), b = a / E, s = new j.Rect({
-        left: C,
-        top: g,
-        width: u,
+      let u = t.dtop > d ? d : t.dtop, g = t.dleft > i ? i : t.dleft, c = t.dw, k = t.dh;
+      t.rect && (e.remove(t.rect), t.rect = null);
+      const p = Q(g, u), f = c, N = k, x = e.getZoom(), w = K / x, n = new b.Rect({
+        left: g,
+        top: u,
+        width: c,
         height: k,
-        fill: oe,
+        fill: Ee,
         // 无填充色
-        stroke: U,
-        strokeWidth: b,
+        stroke: G,
+        strokeWidth: w,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
         selectable: !0,
@@ -117,118 +194,140 @@ const ne = ({
         // 锁定旋转
         lockUniScaling: !1,
         // 允许非等比缩放，控制点跟随鼠标
+        lockScalingFlip: !0,
+        // 禁止缩放时翻转
         objectCaching: !1,
         // 禁用缓存，避免缩放时边框变虚
         statefullCache: !1,
-        noScaleCache: !1
+        noScaleCache: !1,
+        hasControls: !0
+        // 启用控件
       });
-      e.add(s), s.controls.deleteControl = D();
-      const Z = h.current.size, _ = {};
-      y == null || y.forEach((i) => {
-        _[i.id] = "";
+      e.add(n), n.controls.deleteControl = ee(), n.controls.ocrControl = te(), n.set("hasControls", !1);
+      const $ = h.current.size, Y = {};
+      X == null || X.forEach((s) => {
+        Y[s.id] = "";
       });
-      const M = {
+      const j = {
         id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: `${re}${Z + 1}`,
+        name: `${xe}${$ + 1}`,
         // 设置名称：区域+（索引+1）
         shape: {
           name: "rect",
-          x: Math.max(0, A.x),
-          y: Math.max(0, A.y),
-          width: p,
-          height: F
+          x: Math.max(0, p.x),
+          y: Math.max(0, p.y),
+          width: f,
+          height: N
         },
-        content: _
+        content: Y
       };
-      if (h.current.set(s, M), N(s, M), L(s), S) {
-        const i = h.current.get(s);
-        i && S(i, "create");
+      if (h.current.set(n, j), oe(n, j), P(n), U) {
+        const s = h.current.get(n);
+        s && U(s, "create");
       }
-      K(M).then((i) => {
-        if (i) {
-          const O = h.current.get(s);
-          if (O) {
-            if (O.image = i, delete O.textLayouts, T) {
-              const ee = Array.from(h.current.values());
-              T(ee);
+      V(j).then((s) => {
+        if (s) {
+          const y = h.current.get(n);
+          if (y) {
+            if (y.image = s, delete y.textLayouts, a) {
+              const Oe = Array.from(h.current.values());
+              a(Oe);
             }
-            B(O, "create");
+            v(y, "create");
           }
         }
-      }).catch((i) => {
-        console.error("Failed to crop region image:", i);
-      }), e.setActiveObject(s), e.renderAll(), setTimeout(() => {
-        if (w) {
-          const i = h.current.get(s);
-          i && w(i);
+      }).catch((s) => {
+        console.error("Failed to crop region image:", s);
+      }), e.setActiveObject(n), e.renderAll(), setTimeout(() => {
+        if (M) {
+          const s = h.current.get(n);
+          s && M(s);
         }
         setTimeout(() => {
-          if (e && s && e.getObjects().includes(s) && (e.setActiveObject(s), e.renderAll(), w)) {
-            const i = h.current.get(s);
-            i && w(i);
+          if (e && n && e.getObjects().includes(n) && (e.setActiveObject(n), e.renderAll(), M)) {
+            const s = h.current.get(n);
+            s && M(s);
           }
         }, 0);
-      }, 0), s.on("modified", () => {
-        L(s);
-      }), s.on("moved", () => {
-        L(s);
+      }, 0), ie(n), n.on("modified", () => {
+        P(n);
+      }), n.on("moved", () => {
+        P(n);
       }), setTimeout(() => {
-        if (T) {
-          const i = Array.from(h.current.values());
-          T(i);
+        if (a) {
+          const s = Array.from(h.current.values());
+          a(s);
         }
-      }, 0), r = -1, l = -1, e.selection = !1, $(!1);
-    }, I = (o) => {
-      if (l === -1 || r === -1)
+      }, 0), t.dtop = -1, t.dleft = -1, e.selection = !1, J(!1);
+    }, le = (o) => {
+      const i = e.getElement().getBoundingClientRect(), d = o.clientX, u = o.clientY, g = d >= i.left && d <= i.right && u >= i.top && u <= i.bottom;
+      if (g) {
+        const c = e.getPointer(o);
+        z(c.x, c.y);
+      } else
+        E();
+      if (!(t.dleft === -1 || t.dtop === -1))
+        if (g) {
+          const c = e.getPointer(o);
+          B({
+            e: o,
+            pointer: c
+          });
+        } else {
+          const c = e.getZoom(), k = e.viewportTransform ? e.viewportTransform[4] / c : 0, p = e.viewportTransform ? e.viewportTransform[5] / c : 0, f = e.getWidth() / c, N = e.getHeight() / c;
+          let x = (d - i.left) / c - k, w = (u - i.top) / c - p;
+          if (x = Math.max(0, Math.min(x, f)), w = Math.max(0, Math.min(w, N)), t.dw = Math.abs(x - t.dleft), t.dh = Math.abs(w - t.dtop), t.dw === 0 || t.dh === 0)
+            return;
+          let n = t.dtop > w ? w : t.dtop, $ = t.dleft > x ? x : t.dleft, Y = t.dw, j = t.dh;
+          t.rect && e.remove(t.rect);
+          const s = e.getZoom(), y = K / s;
+          t.rect = new b.Rect({
+            left: $,
+            top: n,
+            width: Y,
+            height: j,
+            fill: be,
+            stroke: G,
+            strokeWidth: y,
+            strokeUniform: !0,
+            strokeDashArray: pe,
+            selectable: !1,
+            evented: !1,
+            objectCaching: !1,
+            statefullCache: !1,
+            noScaleCache: !1
+          }), e.add(t.rect), e.renderAll();
+        }
+    }, ne = () => {
+      E();
+    }, se = (o) => {
+      const r = e.getPointer(o.e);
+      z(r.x, r.y);
+    }, ce = (o) => {
+      if (!C)
         return;
-      const t = e.getElement().getBoundingClientRect(), c = o.clientX, g = o.clientY;
-      if (c >= t.left && c <= t.right && g >= t.top && g <= t.bottom) {
-        const u = e.getPointer(o);
-        P({
-          e: o,
-          pointer: u
-        });
-      } else {
-        const u = e.getZoom(), k = e.viewportTransform ? e.viewportTransform[4] / u : 0, A = e.viewportTransform ? e.viewportTransform[5] / u : 0, p = e.getWidth() / u, F = e.getHeight() / u;
-        let E = (c - t.left) / u - k, b = (g - t.top) / u - A;
-        if (E = Math.max(0, Math.min(E, p)), b = Math.max(0, Math.min(b, F)), d = Math.abs(E - l), m = Math.abs(b - r), d === 0 || m === 0)
-          return;
-        let s = r > b ? b : r, Z = l > E ? E : l, _ = d, M = m;
-        f && e.remove(f);
-        const i = e.getZoom(), O = a / i;
-        f = new j.Rect({
-          left: Z,
-          top: s,
-          width: _,
-          height: M,
-          fill: V,
-          stroke: U,
-          strokeWidth: O,
-          strokeUniform: !0,
-          strokeDashArray: v,
-          selectable: !1,
-          evented: !1,
-          objectCaching: !1,
-          statefullCache: !1,
-          noScaleCache: !1
-        }), e.add(f), e.renderAll();
-      }
+      e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), t.dtop = -1, t.dleft = -1, t.dw = 0, t.dh = 0;
+      const i = e.getPointer(o.e);
+      t.dleft = i.x, t.dtop = i.y;
     };
-    e.on("mouse:down", q), e.on("mouse:move", P), e.on("mouse:up", W), document.addEventListener("mousemove", I);
-    const J = (o) => {
-      if (l === -1 || r === -1)
+    e.on("mouse:down:before", ce), e.on("mouse:down", H), e.on("mouse:move", B), e.on("mouse:up", I), e.on("mouse:out", ne), e.on("mouse:over", se), document.addEventListener("mousemove", le);
+    const de = (o) => {
+      if (t.dleft === -1 || t.dtop === -1)
         return;
-      const n = e.getPointer(o);
-      W({
+      const r = e.getPointer(o);
+      I({
         e: o,
-        pointer: n
+        pointer: r
       });
     };
-    return document.addEventListener("mouseup", J), () => {
-      e.off("mouse:down", q), e.off("mouse:move", P), e.off("mouse:up", W), document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", J), f && (e.remove(f), e.renderAll()), e.skipTargetFind = !1;
-      const o = X();
-      e.getObjects().forEach((n) => {
-        n instanceof j.Rect && o.has(n) ? n.set({
+    return document.addEventListener("mouseup", de), () => {
+      e.off("mouse:down:before", ce), e.off("mouse:down", H), e.off("mouse:move", B), e.off("mouse:up", I), e.off("mouse:out", ne), e.off("mouse:over", se), document.removeEventListener("mousemove", le), document.removeEventListener("mouseup", de), t.rect && (e.remove(t.rect), e.renderAll()), l.current.horizontal && e.getObjects().includes(l.current.horizontal) && e.remove(l.current.horizontal), l.current.vertical && e.getObjects().includes(l.current.vertical) && e.remove(l.current.vertical), l.current = {
+        horizontal: null,
+        vertical: null
+      }, e.skipTargetFind = !1;
+      const o = D();
+      e.getObjects().forEach((r) => {
+        r instanceof b.Rect && o.has(r) ? r.set({
           evented: !0,
           selectable: !1,
           lockMovementX: !0,
@@ -236,13 +335,43 @@ const ne = ({
           lockScalingX: !0,
           lockScalingY: !0,
           lockRotation: !0
-        }) : (n.set("evented", !0), n.set("selectable", !0));
+        }) : (r.set("evented", !0), r.set("selectable", !0));
       });
     };
-  }, [e, x, H, R, G, T, K, L, B, D, N, S, w, $, h, X]), {
-    stopDraw: R
+  }, [e, C, q, Z, Q, a, V, P, v, ee, te, oe, U, M, J, h, D, ie]), he(() => {
+    if (!e || !C)
+      return;
+    let R = e.getZoom();
+    const T = () => {
+      const m = l.current.horizontal, L = l.current.vertical;
+      if (!m || !L)
+        return;
+      const A = e.getZoom();
+      if (Math.abs(A - R) < 1e-3)
+        return;
+      R = A;
+      const O = ke / A, F = e.getWidth(), S = e.getHeight(), _ = F / A, z = S / A, E = Math.max(_, z) * 3, t = (m.x1 + m.x2) / 2;
+      m.y1, L.x1;
+      const H = (L.y1 + L.y2) / 2;
+      m.set({
+        strokeWidth: O,
+        x1: t - E,
+        x2: t + E
+      }), L.set({
+        strokeWidth: O,
+        y1: H - E,
+        y2: H + E
+      }), e.renderAll();
+    }, W = () => {
+      T();
+    };
+    return e.on("after:render", W), T(), () => {
+      e.off("after:render", W);
+    };
+  }, [e, C]), {
+    stopDraw: Z
   };
 };
 export {
-  ne as useDrawingMode
+  Te as useDrawingMode
 };

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRControl.mjs

@@ -0,0 +1,100 @@
+import { useRef as a, useEffect as X, useCallback as H } from "react";
+import { fabric as Y } from "fabric";
+import { AI_CONTROL_OFFSET_X as P, AI_CONTROL_OFFSET_Y as U, AI_ICON_SIZE as y } from "../../constants.mjs";
+import W from "../icons/ai.svg.mjs";
+import Z from "../icons/star.svg.mjs";
+import B from "../icons/error.svg.mjs";
+import G from "../icons/loading.svg.mjs";
+const nr = ({
+  performOCR: O,
+  ocrRecognizingRef: s,
+  ocrErrorRef: S,
+  rectMapRef: w
+}) => {
+  const f = (r) => !(!r.complete || r.naturalWidth === 0), g = a(null), A = a(null), v = a(null), h = a(null), d = a(/* @__PURE__ */ new Set()), t = a(null), C = a(null);
+  return X(() => {
+    if (!g.current) {
+      const r = document.createElement("img");
+      r.src = W, g.current = r;
+    }
+    if (!A.current) {
+      const r = document.createElement("img");
+      r.src = Z, A.current = r;
+    }
+    if (!v.current) {
+      const r = document.createElement("img");
+      r.src = B, v.current = r;
+    }
+    if (!h.current) {
+      const r = document.createElement("img");
+      r.src = G, h.current = r;
+    }
+  }, []), X(() => {
+    const r = () => {
+      s.current.size > 0 ? (d.current.forEach((o) => {
+        o.renderAll();
+      }), t.current = requestAnimationFrame(r)) : t.current = null;
+    };
+    C.current = r, s.current.size > 0 && (t.current = requestAnimationFrame(r));
+    const m = setInterval(() => {
+      const c = s.current.size > 0, o = t.current !== null;
+      c && !o && (t.current = requestAnimationFrame(r));
+    }, 100);
+    return () => {
+      t.current !== null && cancelAnimationFrame(t.current), clearInterval(m);
+    };
+  }, [s]), {
+    createOCRControl: H(() => {
+      const r = y, l = g.current, m = A.current, c = v.current, o = h.current, n = 14, N = (e, p, F, M, I) => {
+        if (!l)
+          return;
+        const D = I, _ = w.current.get(D);
+        if (!_)
+          return;
+        const z = _.id, T = s.current.has(z), k = S.current.has(z), q = () => {
+          e.save(), e.translate(p, F), e.rotate(Y.util.degreesToRadians(I.angle || 0)), e.drawImage(l, -r / 2, -r / 2, r, r);
+          const u = r / 2 - n / 2 + 8, E = -r / 2 + n / 2 - 8;
+          if (T) {
+            if (o && f(o)) {
+              e.save(), e.translate(u, E);
+              const L = Date.now() / 500 % (Math.PI * 2);
+              e.rotate(L), e.drawImage(o, -n / 2, -n / 2, n, n), e.restore();
+            }
+            const i = I.canvas;
+            i && (d.current.has(i), d.current.add(i), s.current.size > 0 && !t.current && C.current && (t.current = requestAnimationFrame(C.current)));
+          } else {
+            const i = I.canvas;
+            i && s.current.size === 0 && d.current.delete(i), k && c && f(c) ? e.drawImage(c, u - n / 2, E - n / 2, n, n) : !T && !k && m && f(m) && e.drawImage(m, u - n / 2, E - n / 2, n, n);
+          }
+          e.restore();
+        };
+        f(l) ? q() : l.onload = () => {
+          q();
+          const u = I.canvas;
+          u && u.renderAll();
+        };
+      }, R = (e, p) => {
+        const F = p.target;
+        return O(F), !1;
+      };
+      return new Y.Control({
+        x: 0.5,
+        // 右侧（0 = 左边，0.5 = 中间，1 = 右边）
+        y: -0.5,
+        // 顶部（0 = 顶部，0.5 = 中间，1 = 底部）
+        offsetX: P,
+        // 与删除按钮相同的X偏移
+        offsetY: U + y + 4,
+        // 向下偏移，放在删除按钮下方（删除按钮的offsetY + 删除按钮大小 + 间距）
+        cursorStyle: "pointer",
+        mouseUpHandler: R,
+        render: N,
+        sizeX: r,
+        sizeY: r
+      });
+    }, [O, s, S, w])
+  };
+};
+export {
+  nr as useOCRControl
+};