@glodon-aiot/dataset-annotation 3.18.0-alpha.11 → 3.18.0-alpha.13

package/dist/es/components/PreLabelOCR/components/PreLabelPreview/index.mjs

@@ -1,18 +1,18 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { useContext as ze, useState as s, useEffect as E, useRef as q } from "react";
-import { Button as N, Space as fe, Tooltip as _, Empty as me, message as ge } from "antd";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { useContext as ze, useState as s, useEffect as k, useRef as q } from "react";
+import { Button as C, Space as fe, Tooltip as _, Empty as me, message as ge } from "antd";
 import { ZoomInOutlined as He, ZoomOutOutlined as Te, FullscreenExitOutlined as De, FullscreenOutlined as Fe } from "@ant-design/icons";
-import { useFullscreen as je } from "ahooks";
-import Re from "../../../../DatasetContext/index.mjs";
-import { tagColors as $e } from "../../../../utils/index.mjs";
+import { useFullscreen as $e } from "ahooks";
+import je from "../../../../DatasetContext/index.mjs";
+import { tagColors as Re } from "../../../../utils/index.mjs";
 import Be from "../../icon_linear.svg.mjs";
 import "./style.less.mjs";
 import he from "../../../Iconfont/index.mjs";
 const ot = (pe) => {
   const {
-    serviceId: x,
+    serviceId: v,
     confidence: P,
-    datasetId: U,
+    datasetId: E,
     versionId: z,
     isVisible: A
   } = pe, {
@@ -20,77 +20,79 @@ const ot = (pe) => {
       cvforceDatahub: H,
       aiShop: T
     }
-  } = ze(Re), [f, D] = s(), [I, xe] = s([]), [F, G] = s(!1), [y, J] = s([]), [u, ve] = s([]), [v, Ie] = s([]);
-  E(() => {
-    !H || !U || !z || !A || H.getDatasetsIdVersionsVidSamples(U, z, {
+  } = ze(je), [u, D] = s(), [h, xe] = s([]), [F, G] = s(!1), [M, J] = s([]), [d, ve] = s([]), [I, Ie] = s([]);
+  k(() => {
+    !H || !E || !z || !A || H.getDatasetsIdVersionsVidSamples(E, z, {
       pageNo: 1,
       pageSize: 10,
       labels: "nocode",
-      confirmStatus: 0
+      confirmStatus: 0,
+      extractPercent: 10,
+      extractMax: 10
     }).then((e) => {
-      const t = e.recordList || [], n = t == null ? void 0 : t[0];
-      n != null && n.fileUrl && D(n == null ? void 0 : n.fileUrl), xe(t);
+      const t = e.recordList || [], o = t == null ? void 0 : t[0];
+      o != null && o.fileUrl && D(o == null ? void 0 : o.fileUrl), xe(t);
     }).catch(() => !1);
-  }, [A, U, z, H]), E(() => {
-    !f || !x || (G(!0), J([]), T == null || T.detectionLayout(x, {
+  }, [A, E, z, H]), k(() => {
+    !u || !v || (G(!0), J([]), T == null || T.detectionLayout(v, {
       pages: [{
-        image: f
+        image: u
       }]
     }).then((e) => {
       J(e.prediction);
     }).finally(() => {
       G(!1);
     }));
-  }, [f, x]), E(() => {
-    const e = y == null ? void 0 : y.filter((t) => t.score >= (P != null ? P : 0));
+  }, [u, v]), k(() => {
+    const e = M == null ? void 0 : M.filter((t) => t.score >= (P != null ? P : 0));
     ve(e);
-  }, [y, P]), E(() => {
-    if (!u)
+  }, [M, P]), k(() => {
+    if (!d)
       return;
-    const e = y.map((t) => t.label).reduce((t, n) => t.includes(n) ? t : [...t, n], []);
-    Ie(e.map((t, n) => ({
+    const e = M.map((t) => t.label).reduce((t, o) => t.includes(o) ? t : [...t, o], []);
+    Ie(e.map((t, o) => ({
       label: t,
-      count: u.filter((i) => i.label === t).length,
-      color: $e[n],
-      id: `${n}_${t}`
+      count: d.filter((r) => r.label === t).length,
+      color: Re[o],
+      id: `${o}_${t}`
     })));
-  }, [u]);
-  const ye = () => {
-    const e = I.findIndex((t) => t.fileUrl === f);
+  }, [d]);
+  const Me = () => {
+    const e = h.findIndex((t) => t.fileUrl === u);
     if (e <= 0) {
       ge.warning("已经是第一张了");
       return;
     }
-    D(I[e - 1].fileUrl);
-  }, Me = () => {
-    const e = I.findIndex((t) => t.fileUrl === f);
-    if (e >= I.length - 1) {
+    D(h[e - 1].fileUrl);
+  }, ye = () => {
+    const e = h.findIndex((t) => t.fileUrl === u);
+    if (e >= h.length - 1) {
       ge.warning("已经是最后一张了");
       return;
     }
-    D(I[e + 1].fileUrl);
-  }, w = q(null), j = q({}), K = q(null), [Q, {
-    toggleFullscreen: Ce
-  }] = je(K), [ee, Ne] = s(0), [te, Pe] = s(0), [c, R] = s(1), [m, h] = s(0), [g, p] = s(0), [we, Se] = s(!1), [oe, ne] = s(-1), [r, $] = s(0), [l, B] = s(0), [se, S] = s(!1), [ce, Ye] = s(), [Y, b] = s({
+    D(h[e + 1].fileUrl);
+  }, w = q(null), $ = q({}), K = q(null), [Q, {
+    toggleFullscreen: Ne
+  }] = $e(K), [ee, Ce] = s(0), [te, Pe] = s(0), [c, j] = s(1), [m, p] = s(0), [g, x] = s(0), [we, Se] = s(!1), [oe, ne] = s(-1), [i, R] = s(0), [l, B] = s(0), [se, S] = s(!1), [ce, Ye] = s(), [Y, b] = s({
     x: 0,
     y: 0
-  }), ie = 50, re = 50, le = 50, ae = 50, X = 0.05, O = 3, W = 0.2, be = () => {
+  }), re = 50, ie = 50, le = 50, ae = 50, X = 0.05, O = 3, W = 0.2, be = () => {
     if (!w.current)
       return;
-    const e = j.current.clientWidth, t = j.current.clientHeight, n = w.current.naturalWidth, i = w.current.naturalHeight, M = e / n, d = t / i, C = M < d ? M : d, Ee = (e - n * C) / 2, Ue = (t - i * C) / 2;
-    Ne(e), Pe(t), R(C), h(Ee), p(Ue), $(n * C), B(i * C), Se(!0);
-  }, L = (e) => ne(e), Xe = () => ne(-1), k = () => {
-    m < -r + ae && h(-r + ae), g < -l + ie && p(-l + ie), m > ee - re && h(ee - re), g > te - le && p(te - le);
+    const e = $.current.clientWidth, t = $.current.clientHeight, o = w.current.naturalWidth, r = w.current.naturalHeight, y = e / o, f = t / r, N = y < f ? y : f, ke = (e - o * N) / 2, Ee = (t - r * N) / 2;
+    Ce(e), Pe(t), j(N), p(ke), x(Ee), R(o * N), B(r * N), Se(!0);
+  }, L = (e) => ne(e), Xe = () => ne(-1), U = () => {
+    m < -i + ae && p(-i + ae), g < -l + re && x(-l + re), m > ee - ie && p(ee - ie), g > te - le && x(te - le);
   }, V = () => {
     if (c >= O)
       return;
     let e = c * (1 + X), t = X;
-    e >= O && (e = O, t = O / c - 1), h(m - r * (t / 2)), p(g - l * (t / 2)), $(r + r * t), B(l + l * t), R(e), k();
+    e >= O && (e = O, t = O / c - 1), p(m - i * (t / 2)), x(g - l * (t / 2)), R(i + i * t), B(l + l * t), j(e), U();
   }, Z = () => {
     if (c <= W)
       return;
     let e = c * (1 - X), t = X;
-    e <= W && (e = W, t = 1 - W / c), h(m - r * (-t / 2)), p(g - l * (-t / 2)), $(r + r * -t), B(l + l * -t), R(e), k();
+    e <= W && (e = W, t = 1 - W / c), p(m - i * (-t / 2)), x(g - l * (-t / 2)), R(i + i * -t), B(l + l * -t), j(e), U();
   };
   window.onmouseup = () => S(!1);
   const Oe = (e) => (e.deltaY < 0 ? V() : Z(), !1), We = (e) => {
@@ -101,12 +103,12 @@ const ot = (pe) => {
   }, Le = (e) => {
     if (!se)
       return;
-    const t = e.pageX - Y.x, n = e.pageY - Y.y;
+    const t = e.pageX - Y.x, o = e.pageY - Y.y;
     b({
       x: e.pageX,
       y: e.pageY
-    }), h(m + t), p(g + n), k();
-  }, ue = () => S(!1), ke = (e) => {
+    }), p(m + t), x(g + o), U();
+  }, ue = () => S(!1), Ue = (e) => {
     const {
       touches: t
     } = e;
@@ -115,115 +117,115 @@ const ot = (pe) => {
       y: t[0].clientY
     }) : Ye(t);
   }, de = (e, t) => {
-    const n = t.pageX - e.pageX, i = t.pageY - e.pageY;
-    return Math.sqrt(n * n + i * i);
+    const o = t.pageX - e.pageX, r = t.pageY - e.pageY;
+    return Math.sqrt(o * o + r * r);
   };
   return /* @__PURE__ */ a("div", {
     className: "pre-label-content",
-    children: [x && f && /* @__PURE__ */ a("div", {
+    children: [v && u && /* @__PURE__ */ a("div", {
       className: "pre-label-content-preview",
       ref: K,
-      children: [/* @__PURE__ */ o(N, {
+      children: [/* @__PURE__ */ n(C, {
         className: "select-prev",
-        icon: /* @__PURE__ */ o(he, {
+        icon: /* @__PURE__ */ n(he, {
           type: "icon-zuojiantou"
         }),
         disabled: F,
         type: "text",
-        onClick: () => ye(),
+        onClick: () => Me(),
         tabIndex: 0
       }), /* @__PURE__ */ a("div", {
         className: "select-main",
-        children: [/* @__PURE__ */ o("div", {
+        children: [/* @__PURE__ */ n("div", {
           className: "marker-action",
-          children: /* @__PURE__ */ o("div", {
+          children: /* @__PURE__ */ n("div", {
             className: "create-mode-select",
             children: /* @__PURE__ */ a(fe, {
               direction: "vertical",
               size: 16,
-              children: [/* @__PURE__ */ o(_, {
+              children: [/* @__PURE__ */ n(_, {
                 title: "放大-鼠标滚轮前滑",
                 placement: "right",
-                children: /* @__PURE__ */ o(N, {
-                  icon: /* @__PURE__ */ o(He, {}),
+                children: /* @__PURE__ */ n(C, {
+                  icon: /* @__PURE__ */ n(He, {}),
                   onClick: V
                 })
-              }), /* @__PURE__ */ o(_, {
+              }), /* @__PURE__ */ n(_, {
                 title: "缩小-鼠标滚轮后滑",
                 placement: "right",
-                children: /* @__PURE__ */ o(N, {
-                  icon: /* @__PURE__ */ o(Te, {}),
+                children: /* @__PURE__ */ n(C, {
+                  icon: /* @__PURE__ */ n(Te, {}),
                   onClick: Z
                 })
-              }), /* @__PURE__ */ o(_, {
+              }), /* @__PURE__ */ n(_, {
                 title: Q ? "退出全屏" : "全屏",
                 placement: "right",
-                children: /* @__PURE__ */ o(N, {
-                  icon: Q ? /* @__PURE__ */ o(De, {}) : /* @__PURE__ */ o(Fe, {}),
-                  onClick: Ce
+                children: /* @__PURE__ */ n(C, {
+                  icon: Q ? /* @__PURE__ */ n(De, {}) : /* @__PURE__ */ n(Fe, {}),
+                  onClick: Ne
                 })
               })]
             })
           })
-        }), /* @__PURE__ */ o("div", {
+        }), /* @__PURE__ */ n("div", {
           className: "right-col-wrapper",
           children: /* @__PURE__ */ a("div", {
             className: "right-col-img",
-            ref: j,
+            ref: $,
             onMouseDown: We,
             onMouseMove: Le,
             onMouseUp: ue,
             onWheel: Oe,
-            onTouchStart: ke,
+            onTouchStart: Ue,
             onTouchMove: (e) => {
               if (!(!se || !e.touches))
                 if (e.touches.length < 2) {
-                  const t = e.touches[0].clientX - Y.x, n = e.touches[0].clientY - Y.y;
+                  const t = e.touches[0].clientX - Y.x, o = e.touches[0].clientY - Y.y;
                   b({
                     x: e.touches[0].clientX,
                     y: e.touches[0].clientY
-                  }), h(m + t), p(g + n), k();
+                  }), p(m + t), x(g + o), U();
                 } else {
-                  const t = de(e.touches[0], e.touches[1]), n = de(ce[0], ce[1]);
-                  t > n ? V() : Z();
+                  const t = de(e.touches[0], e.touches[1]), o = de(ce[0], ce[1]);
+                  t > o ? V() : Z();
                 }
             },
             onTouchEnd: ue,
-            children: [/* @__PURE__ */ o("img", {
-              src: f,
+            children: [/* @__PURE__ */ n("img", {
+              src: u,
               style: {
                 position: "absolute",
                 left: m,
                 top: g,
-                width: r,
+                width: i,
                 height: l
               },
               ref: w,
               onLoad: be,
               alt: ""
-            }), we && /* @__PURE__ */ o("svg", {
+            }), we && /* @__PURE__ */ n("svg", {
               style: {
                 position: "absolute",
                 left: m,
                 top: g,
-                width: r,
+                width: i,
                 height: l
               },
-              children: (u == null ? void 0 : u.length) && (u == null ? void 0 : u.map((e, t) => {
-                var n, i, M;
+              children: (d == null ? void 0 : d.length) && (d == null ? void 0 : d.map((e, t) => {
+                var o, r, y;
                 return /* @__PURE__ */ a("g", {
-                  children: [/* @__PURE__ */ o("g", {
+                  children: [/* @__PURE__ */ n("g", {
                     style: {
                       cursor: "pointer"
                     },
-                    children: /* @__PURE__ */ o("polygon", {
-                      points: (n = e == null ? void 0 : e.box) == null ? void 0 : n.map((d) => `${d[0] * c} ${d[1] * c}`).join(","),
+                    children: /* @__PURE__ */ n("polygon", {
+                      points: (o = e == null ? void 0 : e.box) == null ? void 0 : o.map((f) => `${f[0] * c} ${f[1] * c}`).join(","),
                       onMouseOver: () => L(t),
                       onMouseEnter: () => L(t),
                       onMouseLeave: () => Xe(),
                       style: {
-                        fill: t === oe ? `${(i = v == null ? void 0 : v.find((d) => d.label === e.label)) == null ? void 0 : i.color}59` : "transparent",
-                        stroke: ((M = v == null ? void 0 : v.find((d) => d.label === e.label)) == null ? void 0 : M.color) || "",
+                        fill: t === oe ? `${(r = I == null ? void 0 : I.find((f) => f.label === e.label)) == null ? void 0 : r.color}59` : "transparent",
+                        stroke: ((y = I == null ? void 0 : I.find((f) => f.label === e.label)) == null ? void 0 : y.color) || "",
                         strokeWidth: 2,
                         cursor: "pointer"
                       }
@@ -238,7 +240,7 @@ const ot = (pe) => {
                       cursor: "pointer"
                     },
                     fill: "#fff",
-                    children: [/* @__PURE__ */ o("text", {
+                    children: [/* @__PURE__ */ n("text", {
                       x: e.box[0][0] * c + 4,
                       y: e.box[0][1] * c + 16,
                       children: e.label
@@ -254,36 +256,42 @@ const ot = (pe) => {
                   }, t) || null]
                 }, t);
               }))
-            }), F && /* @__PURE__ */ o("img", {
+            }), F && /* @__PURE__ */ n("img", {
               className: "pic-curr-linear",
               src: Be,
               alt: ""
             })]
           })
+        }), /* @__PURE__ */ n("div", {
+          className: "page-info",
+          children: (() => {
+            const e = h.findIndex((o) => o.fileUrl === u);
+            return `${e >= 0 ? e + 1 : 0}/${h.length}`;
+          })()
         })]
-      }), /* @__PURE__ */ o(N, {
+      }), /* @__PURE__ */ n(C, {
         className: "select-next",
         disabled: F,
-        icon: /* @__PURE__ */ o(he, {
+        icon: /* @__PURE__ */ n(he, {
           type: "icon-youjiantou"
         }),
         type: "text",
-        onClick: () => Me()
+        onClick: () => ye()
       })]
-    }), x && !f && /* @__PURE__ */ o("div", {
+    }), v && !u && /* @__PURE__ */ n("div", {
       className: "pre-label-content-nodata",
-      children: /* @__PURE__ */ o(me, {
+      children: /* @__PURE__ */ n(me, {
         description: "暂无未标注的图片"
       })
-    }), !x && /* @__PURE__ */ o("div", {
+    }), !v && /* @__PURE__ */ n("div", {
       className: "pre-label-content-nodata",
-      children: /* @__PURE__ */ o(me, {
+      children: /* @__PURE__ */ n(me, {
         description: /* @__PURE__ */ a(fe, {
           direction: "vertical",
           size: 8,
-          children: [/* @__PURE__ */ o("div", {
+          children: [/* @__PURE__ */ n("div", {
             children: "选择服务，查看预览测试效果"
-          }), /* @__PURE__ */ o("div", {
+          }), /* @__PURE__ */ n("div", {
             children: "随机抽取占比不超过未标注总的 10%，最少1张最高不超过 10 张"
           })]
         })