@glodon-aiot/dataset-annotation 3.10.0-alpha.21 → 3.10.0-alpha.22

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

@@ -1,19 +1,19 @@
-var be = Object.defineProperty, Pe = Object.defineProperties;
-var Ue = Object.getOwnPropertyDescriptors;
-var de = Object.getOwnPropertySymbols;
+var Pe = Object.defineProperty, Ue = Object.defineProperties;
+var be = Object.getOwnPropertyDescriptors;
+var le = Object.getOwnPropertySymbols;
 var Xe = Object.prototype.hasOwnProperty, We = Object.prototype.propertyIsEnumerable;
-var ge = (s, f, a) => f in s ? be(s, f, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[f] = a, q = (s, f) => {
+var ge = (s, f, a) => f in s ? Pe(s, f, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[f] = a, q = (s, f) => {
   for (var a in f || (f = {}))
     Xe.call(f, a) && ge(s, a, f[a]);
-  if (de)
-    for (var a of de(f))
+  if (le)
+    for (var a of le(f))
       We.call(f, a) && ge(s, a, f[a]);
   return s;
-}, he = (s, f) => Pe(s, Ue(f));
-import { jsxs as Re, jsx as M } from "react/jsx-runtime";
-import { useRef as g, useState as I, useCallback as _, useEffect as h } from "react";
-import { fabric as b } from "fabric";
-import { useKeyPress as P } from "ahooks";
+}, he = (s, f) => Ue(s, be(f));
+import { jsxs as Re, jsx as S } from "react/jsx-runtime";
+import { useRef as h, useState as A, useCallback as P, useEffect as l } from "react";
+import { fabric as U } from "fabric";
+import { useKeyPress as b } from "ahooks";
 import Oe from "classnames";
 import "./style.less.mjs";
 import Fe from "../components/Toolbar.mjs";
@@ -39,36 +39,36 @@ const Wt = ({
   labelDefinitions: f,
   labels: a,
   onImageLoad: pe,
-  onChange: A,
+  onChange: k,
   onRegionSelect: J,
   onRegionChange: H,
   ocrRecognize: ve,
-  activeLabelValue: E,
+  activeLabelValue: R,
   onClearActive: Z,
   selectedRegion: Q,
   onAppendTextToActive: Ee,
   readOnly: c
 }) => {
   var ue, me;
-  const V = g(null), p = g(null), [Te, Ce] = I(!0), [e, Ne] = I(), [S, Ie] = I(), [R, ee] = I(1), [v, L] = I(c || !1), [T, k] = I(!1), [K, Ae] = I({
+  const V = h(null), v = h(null), [Te, Ce] = A(!0), [e, Ne] = A(), [D, Ie] = A(), [p, ee] = A(1), [E, _] = A(c || !1), [T, I] = A(!1), [K, Ae] = A({
     left: 0,
     top: 0
-  }), U = g({
+  }), X = h({
     left: 0,
     top: 0
-  }), ke = g({
+  }), ke = h({
     width: 0,
     height: 0
-  }), u = g(/* @__PURE__ */ new Map()), te = g(null), oe = g(void 0), re = g(!1), ne = g(!1), X = g({
+  }), u = h(/* @__PURE__ */ new Map()), te = h(null), oe = h(void 0), re = h(!1), ne = h(!1), W = h({
     width: 0,
     height: 0
-  }), se = g(!1), {
+  }), se = h(!1), {
     updateOCRLoadingIcon: we,
     ocrLoadingIconMapRef: w
   } = Ye(e), {
-    updateRegionNameText: W,
+    updateRegionNameText: O,
     regionNameTextMapRef: C
-  } = je(e), ie = ye(s == null ? void 0 : s.fileUrl), xe = _((o) => {
+  } = je(e), ie = ye(s == null ? void 0 : s.fileUrl), xe = P((o) => {
     e && (C.current.forEach((t, r) => {
       const n = r.left || 0, i = r.top || 0;
       t.set({
@@ -83,15 +83,15 @@ const Wt = ({
       });
     }), e.renderAll());
   }, [e]), {
-    updateCanvas: D
+    updateCanvas: L
   } = Ze({
     sample: s,
-    image: S,
+    image: D,
     onImageLoad: pe,
     canvasRef: V,
-    containerRef: p,
+    containerRef: v,
     canvasInitializedRef: re,
-    bgImagePositionRef: U,
+    bgImagePositionRef: X,
     bgImageSizeRef: ke,
     rectMapRef: u,
     updateTextLayersRef: te,
@@ -101,124 +101,124 @@ const Wt = ({
     setScale: ee,
     setBgImagePosition: Ae,
     setLoading: Ce
-  }), Me = _(() => {
+  }), Me = P(() => {
     const o = Array.from(u.current.values());
     o.forEach((t, r) => {
       t.name = `${rt}${r + 1}`;
     }), u.current.forEach((t, r) => {
       const n = C.current.get(r);
       n && (n.set("text", t.name || nt), e == null || e.renderAll());
-    }), A && A(o);
-  }, [A, e]), {
+    }), k && k(o);
+  }, [k, e]), {
     zoom: Se
   } = Ve({
     canvas: e,
     setScale: ee,
     isZoomingRef: se
-  }), O = _(
-    (o, t) => tt(o, t, e, S, U),
-    [e, S, K]
+  }), F = P(
+    (o, t) => tt(o, t, e, D, X),
+    [e, D, K]
     // 添加 bgImagePosition 作为依赖，确保在图片位置更新后函数能正确工作
-  ), $ = _(
-    (o, t) => ot(o, t, e, U),
+  ), $ = P(
+    (o, t) => ot(o, t, e, X),
     [e, K]
     // 添加 bgImagePosition 作为依赖，确保在图片位置更新后函数能正确工作
   ), {
-    updateTextLayers: F,
-    textLayersMapRef: l,
-    textLayoutContentMapRef: Y
+    updateTextLayers: Y,
+    textLayersMapRef: d,
+    textLayoutContentMapRef: j
   } = Ke({
     canvas: e,
     imageToCanvasCoords: $,
-    activeLabelValue: E,
+    activeLabelValue: R,
     onAppendTextToActive: Ee
   });
-  te.current = F;
+  te.current = Y;
   const {
     performOCRIfNeeded: ce,
     ocrRecognizingRef: ut
   } = qe({
     ocrRecognize: ve,
-    onChange: A,
-    updateTextLayers: F,
+    onChange: k,
+    updateTextLayers: Y,
     canvas: e,
     updateOCRLoadingIcon: we,
     rectMapRef: u,
-    textLayersMapRef: l,
-    textLayoutContentMapRef: Y
+    textLayersMapRef: d,
+    textLayoutContentMapRef: j
   }), {
     updateRegionShapeAndImage: ae
   } = $e({
     canvas: e,
-    image: S,
-    draggable: v,
-    canvasToImageCoords: O,
+    image: D,
+    draggable: E,
+    canvasToImageCoords: F,
     imageToCanvasCoords: $,
     cropRegionImage: ie,
-    onChange: A,
+    onChange: k,
     onRegionChange: H,
     performOCRIfNeeded: ce,
-    updateTextLayers: F,
+    updateTextLayers: Y,
     rectMapRef: u,
     regionNameTextMapRef: C,
     ocrLoadingIconMapRef: w
   });
-  h(() => {
-    D();
-  }, [D]), h(() => {
-    e && (l.current.forEach((o) => {
+  l(() => {
+    L();
+  }, [L]), l(() => {
+    e && (d.current.forEach((o) => {
       o.forEach((t) => {
-        t.off("mousedown"), t.off("mouseover"), t.off("mouseout"), e.remove(t), Y.current.delete(t);
+        t.off("mousedown"), t.off("mouseover"), t.off("mouseout"), e.remove(t), j.current.delete(t);
       });
-    }), l.current.clear(), C.current.forEach((o) => {
+    }), d.current.clear(), C.current.forEach((o) => {
       e.remove(o);
     }), C.current.clear(), w.current.forEach((o) => {
       e.remove(o);
     }), w.current.clear(), u.current.forEach((o, t) => {
       t.off("modified"), t.off("moved"), e.remove(t);
     }), u.current.clear(), ne.current = !1, oe.current = void 0, e.renderAll());
-  }, [e, s == null ? void 0 : s.id]), h(() => {
-    if (!p.current)
+  }, [e, s == null ? void 0 : s.id]), l(() => {
+    if (!v.current)
       return;
-    X.current = {
-      width: p.current.offsetWidth,
-      height: p.current.offsetHeight
+    W.current = {
+      width: v.current.offsetWidth,
+      height: v.current.offsetHeight
     };
     const o = new ResizeObserver(() => {
-      if (!p.current || se.current)
+      if (!v.current || se.current)
         return;
       if (e) {
-        const d = e.getZoom();
-        if (Math.abs(d - R) > st)
+        const g = e.getZoom();
+        if (Math.abs(g - p) > st)
           return;
       }
-      const t = p.current.offsetWidth, r = p.current.offsetHeight, n = X.current.width, i = X.current.height;
-      (t !== n || r !== i) && (X.current = {
+      const t = v.current.offsetWidth, r = v.current.offsetHeight, n = W.current.width, i = W.current.height;
+      (t !== n || r !== i) && (W.current = {
         width: t,
         height: r
-      }, D());
+      }, L());
     });
-    return o.observe(p.current), () => {
+    return o.observe(v.current), () => {
       o.disconnect();
     };
-  }, [D, e, R]), P("ctrl", () => {
-    c || (T && (k(!1), j()), L(!0));
+  }, [L, e, p]), b("ctrl", () => {
+    c || (T && (I(!1), x()), _(!0));
   }, {
     events: ["keydown"]
-  }), P("ctrl", () => {
-    c || L(!1);
+  }), b("ctrl", () => {
+    c || _(!1);
   }, {
     events: ["keyup"]
-  }), h(() => {
+  }), l(() => {
     if (!e)
       return;
-    const o = ft / R, t = /* @__PURE__ */ new Set();
-    l.current.forEach((r) => {
+    const o = ft / p, t = /* @__PURE__ */ new Set();
+    d.current.forEach((r) => {
       r.forEach((n) => {
         t.add(n);
       });
     }), e.getObjects().forEach((r) => {
-      r instanceof b.Rect && !t.has(r) && r.set({
+      r instanceof U.Rect && !t.has(r) && r.set({
         strokeWidth: o,
         strokeUniform: !0,
         objectCaching: !1,
@@ -226,7 +226,7 @@ const Wt = ({
         statefullCache: !1,
         noScaleCache: !1
       });
-    }), l.current.forEach((r) => {
+    }), d.current.forEach((r) => {
       r.forEach((n) => {
         n.set({
           fill: it,
@@ -243,15 +243,15 @@ const Wt = ({
         });
       });
     }), C.current.forEach((r, n) => {
-      const i = n.left || 0, d = n.top || 0;
+      const i = n.left || 0, g = n.top || 0;
       r.set({
         left: i,
         // 与标注框左边对齐
-        top: d,
+        top: g,
         // 下边缘与标注框上边缘对齐（因为 originY 是 'bottom'）
-        scaleX: 1 / R,
+        scaleX: 1 / p,
         // 反向缩放，抵消画布缩放
-        scaleY: 1 / R
+        scaleY: 1 / p
         // 反向缩放，抵消画布缩放
       });
       const m = w.current.get(n);
@@ -260,24 +260,25 @@ const Wt = ({
         n.getScaledHeight(), m.set({
           left: i,
           // top 位置由动画控制，这里不更新
-          scaleX: 1 / R,
+          scaleX: 1 / p,
           // 反向缩放，抵消画布缩放，保持固定视觉粗细
-          scaleY: 1 / R
+          scaleY: 1 / p
           // 反向缩放，抵消画布缩放，保持固定视觉粗细
         });
-        const x = m.getObjects();
-        if (x && x.length > 0) {
-          const y = N * R;
-          x.forEach((z) => {
-            z instanceof b.Rect && z.set("width", y);
+        const M = m.getObjects();
+        if (M && M.length > 0) {
+          const y = N * p;
+          M.forEach((z) => {
+            z instanceof U.Rect && z.set("width", y);
           });
         }
       }
     }), e.renderAll();
-  }, [e, R]), Be({
+  }, [e, p]), Be({
     canvas: e,
-    draggable: v,
-    drawingMode: T
+    draggable: E,
+    drawingMode: T,
+    textLayersMapRef: d
   });
   const {
     performDelete: B
@@ -286,8 +287,8 @@ const Wt = ({
     onRegionChange: H,
     updateRegionNames: Me,
     rectMapRef: u,
-    textLayersMapRef: l,
-    textLayoutContentMapRef: Y,
+    textLayersMapRef: d,
+    textLayoutContentMapRef: j,
     regionNameTextMapRef: C,
     ocrLoadingIconMapRef: w
   }), {
@@ -299,36 +300,39 @@ const Wt = ({
     canvas: e,
     onRegionSelect: J,
     createDeleteControl: G,
-    textLayersMapRef: l,
+    textLayersMapRef: d,
     rectMapRef: u
   });
   const {
-    stopDraw: j
+    stopDraw: x
   } = ze({
     canvas: e,
     drawingMode: T,
-    draggable: v,
-    setDrawingMode: k,
-    canvasToImageCoords: O,
+    draggable: E,
+    setDrawingMode: I,
+    canvasToImageCoords: F,
     labelDefinitions: f,
-    onChange: A,
+    onChange: k,
     cropRegionImage: ie,
     updateRegionShapeAndImage: ae,
     performOCRIfNeeded: ce,
     createDeleteControl: G,
-    updateRegionNameText: W,
+    updateRegionNameText: O,
     onRegionChange: H,
     onRegionSelect: J,
-    rectMapRef: u
+    rectMapRef: u,
+    textLayersMapRef: d
   });
-  h(() => {
-    c && (L(!0), k(!1), j());
-  }, [c, j]), h(() => {
+  l(() => {
+    R && (I(!1), x());
+  }, [R, x]), l(() => {
+    c && (_(!0), I(!1), x());
+  }, [c, x]), l(() => {
     if (!e)
       return;
     const o = () => {
       e.getObjects().forEach((t) => {
-        t instanceof b.Rect && t.selectable && (t.set({
+        t instanceof U.Rect && t.selectable && (t.set({
           lockMovementX: c,
           lockMovementY: c,
           lockScalingX: c,
@@ -345,68 +349,68 @@ const Wt = ({
   }, [e, c]), He({
     canvas: e,
     sample: s,
-    image: S,
+    image: D,
     bgImagePosition: K,
     canvasInitializedRef: re,
-    bgImagePositionRef: U,
+    bgImagePositionRef: X,
     sampleRef: oe,
     labelsLoadedRef: ne,
     rectMapRef: u,
-    textLayersMapRef: l,
-    textLayoutContentMapRef: Y,
+    textLayersMapRef: d,
+    textLayoutContentMapRef: j,
     regionNameTextMapRef: C,
     ocrLoadingIconMapRef: w,
     imageToCanvasCoords: $,
     updateRegionShapeAndImage: ae,
     createDeleteControl: G,
-    updateRegionNameText: W,
-    updateTextLayers: F
-  }), h(() => {
+    updateRegionNameText: O,
+    updateTextLayers: Y
+  }), l(() => {
     if (!a || a.length === 0)
       return;
     let o = !1;
     u.current.forEach((t, r) => {
-      var d, m;
+      var g, m;
       const n = a.find((N) => N.id === t.id);
       if (!n)
         return;
       const i = he(q(q({}, t), n), {
         // Keep shape from canvas to avoid desync
         shape: t.shape,
-        image: (d = n.image) != null ? d : t.image,
+        image: (g = n.image) != null ? g : t.image,
         textLayouts: (m = n.textLayouts) != null ? m : t.textLayouts
       });
-      (i.name !== t.name || i.content !== t.content || i.image !== t.image || i.textLayouts !== t.textLayouts) && (u.current.set(r, i), i.name !== t.name && W(r, i), o = !0);
+      (i.name !== t.name || i.content !== t.content || i.image !== t.image || i.textLayouts !== t.textLayouts) && (u.current.set(r, i), i.name !== t.name && O(r, i), o = !0);
     }), o && (e == null || e.renderAll());
-  }, [a, e, W]), et({
+  }, [a, e, O]), et({
     canvas: e,
     drawingMode: T,
-    draggable: v,
-    textLayersMapRef: l
-  }), h(() => {
+    draggable: E,
+    textLayersMapRef: d
+  }), l(() => {
     if (e && Q === null) {
       const o = /* @__PURE__ */ new Set();
-      l.current.forEach((r) => {
+      d.current.forEach((r) => {
         r.forEach((n) => {
           o.add(n);
         });
       }), e.getObjects().forEach((r) => {
-        r instanceof b.Rect && !o.has(r) && r.set({
+        r instanceof U.Rect && !o.has(r) && r.set({
           fill: at
           // 移除填充色
         });
       }), e.getActiveObject() && (e.discardActiveObject(), e.renderAll());
     }
-  }, [e, Q]), h(() => {
+  }, [e, Q]), l(() => {
     var r;
     if (!e)
       return;
-    const o = (r = E == null ? void 0 : E.region) == null ? void 0 : r.id;
+    const o = (r = R == null ? void 0 : R.region) == null ? void 0 : r.id;
     let t = !1;
-    l.current.forEach((n, i) => {
-      const d = u.current.get(i);
-      if (d && n.length > 0) {
-        const m = o === d.id;
+    d.current.forEach((n, i) => {
+      const g = u.current.get(i);
+      if (g && n.length > 0) {
+        const m = o === g.id;
         n.forEach((N) => {
           N.visible !== m && (N.set({
             visible: m
@@ -414,46 +418,46 @@ const Wt = ({
         });
       }
     }), t && e.renderAll();
-  }, [e, E]), h(() => {
-    if (!e || !E || !Z)
+  }, [e, R]), l(() => {
+    if (!e || !R || !Z)
       return;
     const o = (t) => {
-      var le;
-      const r = (le = t.e) == null ? void 0 : le.target;
+      var de;
+      const r = (de = t.e) == null ? void 0 : de.target;
       if ((r == null ? void 0 : r.tagName) === "INPUT" || (r == null ? void 0 : r.tagName) === "TEXTAREA")
         return;
-      const n = e.getPointer(t.e), i = n.x, d = n.y, m = O(i, d), N = E.region, {
-        x,
+      const n = e.getPointer(t.e), i = n.x, g = n.y, m = F(i, g), N = R.region, {
+        x: M,
         y,
         width: z,
-        height: _e
+        height: Le
       } = N.shape;
-      m.x >= x && m.x <= x + z && m.y >= y && m.y <= y + _e || Z();
+      m.x >= M && m.x <= M + z && m.y >= y && m.y <= y + Le || Z();
     };
     return e.on("mouse:down", o), () => {
       e.off("mouse:down", o);
     };
-  }, [e, E, Z, O]);
-  const fe = _((o) => {
+  }, [e, R, Z, F]);
+  const fe = P((o) => {
     const t = o.target;
     if ((t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || !e || c)
       return;
     const r = e.getActiveObject();
-    !r || !(r instanceof b.Rect) || B(r);
+    !r || !(r instanceof U.Rect) || B(r);
   }, [e, B]);
-  P("Delete", fe), P("Backspace", fe), P("r", (o) => {
+  b("Delete", fe), b("Backspace", fe), b("r", (o) => {
     const t = o.target;
-    (t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || t != null && t.isContentEditable || c || !T && !v && k(!0);
+    (t == null ? void 0 : t.tagName) === "INPUT" || (t == null ? void 0 : t.tagName) === "TEXTAREA" || t != null && t.isContentEditable || c || !T && !E && I(!0);
   }, {
     exactMatch: !1
     // 允许大小写
   });
-  const Le = () => {
-    c || (T && (k(!1), j()), L(!v));
-  }, De = () => {
-    c || (v && L(!1), k(!T));
+  const De = () => {
+    c || (T && (I(!1), x()), _(!E));
+  }, _e = () => {
+    c || (E && _(!1), I(!T));
   };
-  return h(() => () => {
+  return l(() => () => {
     e && e.dispose();
   }, []), /* @__PURE__ */ Re("div", {
     style: {
@@ -462,28 +466,28 @@ const Wt = ({
       display: "flex",
       position: "relative"
     },
-    children: [Te && /* @__PURE__ */ M("div", {
+    children: [Te && /* @__PURE__ */ S("div", {
       className: "vlm-loading-overlay",
-      children: /* @__PURE__ */ M("div", {
+      children: /* @__PURE__ */ S("div", {
         className: "vlm-loading-spinner"
       })
-    }), /* @__PURE__ */ M("div", {
+    }), /* @__PURE__ */ S("div", {
       className: "vlm-marker-toolbar",
-      children: /* @__PURE__ */ M(Fe, {
+      children: /* @__PURE__ */ S(Fe, {
         drawingMode: T,
-        draggable: v,
-        scale: R,
-        onToggleDrawingMode: De,
-        onToggleDrag: Le,
+        draggable: E,
+        scale: p,
+        onToggleDrawingMode: _e,
+        onToggleDrag: De,
         onZoom: Se,
-        onFitToScreen: D,
+        onFitToScreen: L,
         readOnly: c
       })
     }), /* @__PURE__ */ Re("div", {
-      ref: p,
+      ref: v,
       className: Oe({
         "vlm-label-maker-wrap": !0,
-        draggable: v
+        draggable: E
       }),
       onContextMenu: (o) => {
         o.preventDefault();
@@ -492,10 +496,10 @@ 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__ */ M("div", {
+      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", {
         className: "vlm-image-name",
         children: s.sampleFileName.originalName || s.sampleFileName.name
-      }), /* @__PURE__ */ M("canvas", {
+      }), /* @__PURE__ */ S("canvas", {
         className: "vlm-label-maker-canvas",
         ref: V
       })]