@glodon-aiot/dataset-annotation 3.25.1-alpha.6 → 3.26.0-alpha.4

package/dist/es/components/OCRImageViewer/index.mjs

@@ -1,186 +1,177 @@
-import { jsxs as b, jsx as s } from "react/jsx-runtime";
-import { forwardRef as ye, useRef as k, useState as i, useImperativeHandle as We, useEffect as xe } from "react";
+import { jsxs as E, jsx as s } from "react/jsx-runtime";
+import { forwardRef as pt, useRef as _, useState as i, useEffect as vt, useImperativeHandle as It } from "react";
 import "./style.less.mjs";
-import Ce from "classnames";
-import { Space as He, Tooltip as O, Button as U } from "antd";
-import { ZoomInOutlined as Se, ZoomOutOutlined as Ye, DragOutlined as Ee } from "@ant-design/icons";
-import { useKeyPress as se } from "ahooks";
-const ke = ye((B, ie) => {
-  var te;
+import Mt from "classnames";
+import { Space as wt, Tooltip as k, Button as L } from "antd";
+import { ZoomInOutlined as xt, ZoomOutOutlined as yt, DragOutlined as St } from "@ant-design/icons";
+import { useKeyPress as tt } from "ahooks";
+const Dt = pt((O, et) => {
+  var Q;
   const {
-    url: v,
-    offsetEdge: re = [50, 50, 50, 50],
-    zoomable: j = !0,
-    zoomStep: w = 0.02,
-    zoomMax: M = 2,
+    url: R,
+    offsetEdge: ot = [50, 50, 50, 50],
+    zoomable: b = !0,
+    zoomStep: p = 0.02,
+    zoomMax: v = 2,
     zoomMin: I = 0,
-    onImageLoad: L,
-    onImageError: X,
-    labels: z
-  } = B, h = k({}), y = k({}), [Z, ce] = i(0), [$, ae] = i(0), [l, N] = i(1), [u, g] = i(0), [m, f] = i(0), [r, P] = i(0), [c, D] = i(0), [le, ue] = i(""), q = !!v && le === v, [K, W] = i(!1), [V, me] = i(), [x, C] = i({
+    onImageLoad: X,
+    labels: N
+  } = O, M = _({}), w = _({}), [j, nt] = i(0), [B, st] = i(0), [l, P] = i(1), [u, f] = i(0), [g, d] = i(0), [r, z] = i(0), [c, D] = i(0), [it, U] = i(!1), [Z, x] = i(!1), [$, rt] = i(), [y, S] = i({
     x: 0,
     y: 0
-  }), [A, F, G, J] = re, [a, R] = i((te = B.draggable) != null ? te : !0);
-  se("ctrl", () => {
-    R(!0);
+  }), [q, K, V, A] = ot, [a, T] = i((Q = O.draggable) != null ? Q : !0);
+  tt("ctrl", () => {
+    T(!0);
   }, {
     events: ["keydown"]
-  }), se("ctrl", () => {
-    R(!1);
+  }), tt("ctrl", () => {
+    T(!1);
   }, {
     events: ["keyup"]
-  });
-  const T = () => {
-    var oe, ne;
-    if (!y.current || !((oe = h.current) != null && oe.naturalWidth) || !((ne = h.current) != null && ne.naturalHeight))
+  }), vt(() => {
+    U(!1);
+  }, [R]);
+  const F = () => {
+    if (!w.current)
       return;
-    const e = y.current.clientWidth, t = y.current.clientHeight, o = h.current.naturalWidth, n = h.current.naturalHeight, d = e / o, E = t / n, p = d < E ? d : E, ve = (e - o * p) / 2, we = (t - n * p) / 2, Me = o * p, Ie = n * p;
-    ce(e), ae(t), N(p), g(ve), f(we), P(Me), D((Xe) => Ie), ue(v), L && L(h.current);
-  }, Q = k(T);
-  Q.current = T;
-  const H = () => {
-    if (!j || l >= M)
+    const t = w.current.clientWidth, e = w.current.clientHeight, o = M.current.naturalWidth, n = M.current.naturalHeight, m = t / o, H = e / n, h = m < H ? m : H, mt = (t - o * h) / 2, ft = (e - n * h) / 2, dt = o * h, ht = n * h;
+    nt(t), st(e), P(h), f(mt), d(ft), z(dt), D(ht), U(!0), X && X(M.current);
+  }, C = () => {
+    if (!b || l >= v)
       return;
-    let e = l * (1 + w), t = w;
-    e >= M && (e = M, t = M / l - 1), g(u - r * (t / 2)), f(m - c * (t / 2)), P(r + r * t), D(c + c * t), N(e), Y();
-  }, S = () => {
-    if (!j || l <= I)
+    let t = l * (1 + p), e = p;
+    t >= v && (t = v, e = v / l - 1), f(u - r * (e / 2)), d(g - c * (e / 2)), z(r + r * e), D(c + c * e), P(t), Y();
+  }, W = () => {
+    if (!b || l <= I)
       return;
-    let e = l * (1 - w), t = w;
-    e <= I && (e = I, t = 1 - I / l), g(u - r * (-t / 2)), f(m - c * (-t / 2)), P(r + r * -t), D(c + c * -t), N(e), Y();
+    let t = l * (1 - p), e = p;
+    t <= I && (t = I, e = 1 - I / l), f(u - r * (-e / 2)), d(g - c * (-e / 2)), z(r + r * -e), D(c + c * -e), P(t), Y();
   };
-  We(ie, () => ({
-    zoomIn: H,
-    zoomOut: S,
-    onImageLoad: L
+  It(et, () => ({
+    zoomIn: C,
+    zoomOut: W,
+    onImageLoad: X
   }));
-  const de = (e) => (e.deltaY < 0 ? H() : S(), !1), ge = (e) => {
-    W(!0);
+  const ct = (t) => (t.deltaY < 0 ? C() : W(), !1), at = (t) => {
+    x(!0);
     const {
-      pageX: t,
+      pageX: e,
       pageY: o
-    } = e;
-    C({
-      x: t,
+    } = t;
+    S({
+      x: e,
       y: o
     });
-  }, fe = (e) => {
-    if (!K)
+  }, lt = (t) => {
+    if (!Z)
       return !1;
     const {
-      pageX: t,
+      pageX: e,
       pageY: o
-    } = e, n = t - x.x, d = o - x.y;
-    C({
-      x: t,
+    } = t, n = e - y.x, m = o - y.y;
+    S({
+      x: e,
       y: o
-    }), g(u + n), f(m + d), Y();
-  }, _ = () => {
-    W(!1);
+    }), f(u + n), d(g + m), Y();
+  }, G = () => {
+    x(!1);
   };
-  xe(() => {
-    const e = () => {
-      W(!1);
-    }, t = () => {
-      Q.current();
-    };
-    return window.addEventListener("mouseup", e), window.addEventListener("resize", t), () => {
-      window.removeEventListener("mouseup", e), window.removeEventListener("resize", t);
-    };
-  }, []);
+  window.onmouseup = () => {
+    x(!1);
+  }, window.onresize = F;
   const Y = () => {
-    u < -r + J && g(-r + J), m < -c + A && f(-c + A), u > Z - F && g(Z - F), m > $ - G && f($ - G);
-  }, he = (e) => {
+    u < -r + A && f(-r + A), g < -c + q && d(-c + q), u > j - K && f(j - K), g > B - V && d(B - V);
+  }, ut = (t) => {
     const {
-      touches: t
-    } = e;
-    if (W(!0), t.length < 2) {
+      touches: e
+    } = t;
+    if (x(!0), e.length < 2) {
       const {
         clientX: o,
         clientY: n
-      } = t[0];
-      C({
+      } = e[0];
+      S({
         x: o,
         y: n
       });
     } else
-      me(t);
-  }, pe = (e) => {
-    if (!K || !e.touches)
+      rt(e);
+  }, gt = (t) => {
+    if (!Z || !t.touches)
       return !1;
     const {
-      clientX: t,
+      clientX: e,
       clientY: o
-    } = e.touches[0];
-    if (e.touches.length < 2) {
-      const n = t - x.x, d = o - x.y;
-      C({
-        x: t,
+    } = t.touches[0];
+    if (t.touches.length < 2) {
+      const n = e - y.x, m = o - y.y;
+      S({
+        x: e,
         y: o
-      }), g(u + n), f(m + d), Y();
+      }), f(u + n), d(g + m), Y();
     } else {
-      const n = e.touches, d = ee(n[0], n[1]), E = ee(V[0], V[1]);
-      d > E ? H() : S();
+      const n = t.touches, m = J(n[0], n[1]), H = J($[0], $[1]);
+      m > H ? C() : W();
     }
-  }, ee = (e, t) => {
-    const o = t.pageX - e.pageX, n = t.pageY - e.pageY;
+  }, J = (t, e) => {
+    const o = e.pageX - t.pageX, n = e.pageY - t.pageY;
     return Math.sqrt(o * o + n * n);
   };
-  return /* @__PURE__ */ b("div", {
+  return /* @__PURE__ */ E("div", {
     className: "ocr-image-viewer",
     children: [/* @__PURE__ */ s("div", {
       className: "marker-toolbar",
       children: /* @__PURE__ */ s("div", {
         className: "create-mode-select",
-        children: /* @__PURE__ */ b(He, {
+        children: /* @__PURE__ */ E(wt, {
           direction: "vertical",
           size: 16,
-          children: [/* @__PURE__ */ s(O, {
+          children: [/* @__PURE__ */ s(k, {
             title: "放大-鼠标滚轮前滑",
             placement: "right",
-            children: /* @__PURE__ */ s(U, {
-              icon: /* @__PURE__ */ s(Se, {}),
+            children: /* @__PURE__ */ s(L, {
+              icon: /* @__PURE__ */ s(xt, {}),
               onClick: () => {
-                H();
+                C();
               }
             })
-          }), /* @__PURE__ */ s(O, {
+          }), /* @__PURE__ */ s(k, {
             title: "缩小-鼠标滚轮后滑",
             placement: "right",
-            children: /* @__PURE__ */ s(U, {
-              icon: /* @__PURE__ */ s(Ye, {}),
+            children: /* @__PURE__ */ s(L, {
+              icon: /* @__PURE__ */ s(yt, {}),
               onClick: () => {
-                S();
+                W();
               }
             })
-          }), /* @__PURE__ */ s(O, {
+          }), /* @__PURE__ */ s(k, {
             title: "拖动-按住ctrl",
             placement: "right",
-            children: /* @__PURE__ */ s(U, {
-              icon: /* @__PURE__ */ s(Ee, {}),
+            children: /* @__PURE__ */ s(L, {
+              icon: /* @__PURE__ */ s(St, {}),
               className: a ? "active" : "",
               onClick: () => {
-                R(!a);
+                T(!a);
               }
             })
           })]
         })
       })
-    }), /* @__PURE__ */ b("div", {
-      className: Ce({
+    }), /* @__PURE__ */ E("div", {
+      className: Mt({
         "image-map": !0,
         draggable: a
       }),
-      ref: y,
-      onMouseDown: a ? ge : void 0,
-      onMouseMove: a ? fe : void 0,
-      onMouseUp: a ? _ : void 0,
-      onWheel: de,
-      onTouchStart: a ? he : void 0,
-      onTouchMove: a ? pe : void 0,
-      onTouchEnd: a ? _ : void 0,
-      onContextMenu: (e) => {
-        e.preventDefault();
+      ref: w,
+      onMouseDown: a ? at : void 0,
+      onMouseMove: a ? lt : void 0,
+      onMouseUp: a ? G : void 0,
+      onWheel: ct,
+      onTouchStart: a ? ut : void 0,
+      onTouchMove: a ? gt : void 0,
+      onTouchEnd: a ? G : void 0,
+      onContextMenu: (t) => {
+        t.preventDefault();
       },
       children: [/* @__PURE__ */ s("img", {
         draggable: "false",
@@ -188,39 +179,35 @@ const ke = ye((B, ie) => {
         style: {
           position: "absolute",
           left: u,
-          top: m,
+          top: g,
           width: r,
-          height: c,
-          visibility: q ? "visible" : "hidden"
-        },
-        ref: h,
-        onLoad: T,
-        onError: () => {
-          X == null || X();
+          height: c
         },
-        src: v,
+        ref: M,
+        onLoad: F,
+        src: R,
         alt: ""
-      }), q ? /* @__PURE__ */ s("svg", {
+      }), it ? /* @__PURE__ */ s("svg", {
         style: {
           position: "absolute",
           left: u,
-          top: m,
+          top: g,
           width: r,
           height: c
         },
-        children: z == null ? void 0 : z.map((e, t) => {
+        children: N == null ? void 0 : N.map((t, e) => {
           var o;
           return /* @__PURE__ */ s("g", {
             children: /* @__PURE__ */ s("polygon", {
               className: "label-box",
-              points: (o = e == null ? void 0 : e.box) == null ? void 0 : o.map((n) => `${n[0] * l} ${n[1] * l}`).join(",")
-            }, e.id)
-          }, t);
+              points: (o = t == null ? void 0 : t.box) == null ? void 0 : o.map((n) => `${n[0] * l} ${n[1] * l}`).join(",")
+            }, t.id)
+          }, e);
         })
       }) : ""]
     })]
   });
 });
 export {
-  ke as default
+  Dt as default
 };