@glodon-aiot/dataset-annotation 3.11.1-shapshot.1765331459 → 3.13.0-alpha.28

package/dist/es/components/DetectionAnnotation/components/LabelMaker/index.mjs

@@ -1,114 +1,114 @@
-var J = Math.pow;
-import { jsx as l, jsxs as Q } from "react/jsx-runtime";
-import { useRef as se, useState as b, useEffect as g } from "react";
-import { fabric as R } from "fabric";
-import { useKeyPress as P } from "ahooks";
+var Q = Math.pow;
+import { jsx as c, jsxs as $ } from "react/jsx-runtime";
+import { useRef as ae, useState as x, useEffect as d } from "react";
+import { fabric as z } from "fabric";
+import { useKeyPress as O } from "ahooks";
 import "./style.less.mjs";
-import le from "react-dom";
-import { Spin as ce, Space as fe, Tooltip as X, Button as Z } from "antd";
-import _ from "./RectLabel.mjs";
-import { drawable as de } from "./Drawable.mjs";
-import { ZoomInOutlined as ue, ZoomOutOutlined as me, DragOutlined as ge } from "@ant-design/icons";
+import ce from "react-dom";
+import { Spin as le, Space as fe, Tooltip as R, Button as X } from "antd";
+import V from "./RectLabel.mjs";
+import { drawable as ue } from "./Drawable.mjs";
+import { ZoomInOutlined as de, ZoomOutOutlined as me, DragOutlined as ge } from "@ant-design/icons";
 import he from "classnames";
 import { approxeq as L } from "../../../../utils/index.mjs";
-const $ = (r) => {
-  r.off("mouse:down"), r.off("mouse:up");
-}, k = (r) => {
-  var a, w, f;
-  let s = [];
-  (a = r.object) != null && a.aCoords && (s = [r.object.aCoords.tl, r.object.aCoords.tr, r.object.aCoords.br, r.object.aCoords.bl]);
-  const c = {
+const ee = (s) => {
+  s.off("mouse:down"), s.off("mouse:up");
+}, E = (s) => {
+  var i, j, f;
+  let a = [];
+  (i = s.object) != null && i.aCoords && (a = [s.object.aCoords.tl, s.object.aCoords.tr, s.object.aCoords.br, s.object.aCoords.bl]);
+  const l = {
     x: 0,
     y: 0
-  }, d = {
+  }, m = {
     width: 0,
     height: 0
   };
-  return r.canvas.backgroundImage && typeof r.canvas.backgroundImage != "string" && (c.x = ((w = r.canvas.backgroundImage.aCoords) == null ? void 0 : w.tl.x) || 0, c.y = ((f = r.canvas.backgroundImage.aCoords) == null ? void 0 : f.tl.y) || 0, d.width = r.canvas.backgroundImage.width || 0, d.height = r.canvas.backgroundImage.height || 0), {
-    id: r.config.id,
-    label: r.config.name,
-    color: r.config.color,
-    box: (s == null ? void 0 : s.map((u) => [L(u.x - c.x, 0) ? 0 : L(u.x - c.x, d.width) ? d.width : u.x - c.x, L(u.y - c.y, 0) ? 0 : L(u.y - c.y, d.height) ? d.height : u.y - c.y])) || []
+  return s.canvas.backgroundImage && typeof s.canvas.backgroundImage != "string" && (l.x = ((j = s.canvas.backgroundImage.aCoords) == null ? void 0 : j.tl.x) || 0, l.y = ((f = s.canvas.backgroundImage.aCoords) == null ? void 0 : f.tl.y) || 0, m.width = s.canvas.backgroundImage.width || 0, m.height = s.canvas.backgroundImage.height || 0), {
+    id: s.config.id,
+    label: s.config.name,
+    color: s.config.color,
+    box: (a == null ? void 0 : a.map((h) => [L(h.x - l.x, 0) ? 0 : L(h.x - l.x, m.width) ? m.width : h.x - l.x, L(h.y - l.y, 0) ? 0 : L(h.y - l.y, m.height) ? m.height : h.y - l.y])) || []
   };
-}, Ne = (r) => {
-  const s = se(null), {
-    labels: c,
-    imageUrl: d,
-    pen: a,
-    onImageLoad: w,
+}, Le = (s) => {
+  const a = ae(null), {
+    labels: l,
+    imageUrl: m,
+    pen: i,
+    onImageLoad: j,
     onChange: f,
-    isPreLabel: u,
-    disabled: x,
-    renderLabelItem: O
-  } = r, [N, B] = b(!0), [e, T] = b(), [pe, V] = b({}), [y, U] = b(), [H, ee] = b({
+    isPreLabel: h,
+    disabled: k,
+    renderLabelItem: N
+  } = s, [S, B] = x(!0), [e, Z] = x(), [pe, te] = x({}), [I, _] = x(), [W, oe] = x({
     left: 0,
     top: 0
-  }), [te, S] = b([1, 1]), [j, K] = b(), [h, v] = b([]), [p, E] = b(x || !1), A = (t, o) => {
+  }), [re, A] = x([1, 1]), [M, H] = x(), [b, v] = x([]), [y, P] = x(k || !1), T = (t, o) => {
     if (!e)
       return;
     o || (o = {
       x: e.getCenter().left,
       y: e.getCenter().top
     });
-    let n = e.getZoom();
-    n *= J(0.999, t), n > 20 && (n = 20), n < 0.01 && (n = 0.01), e.zoomToPoint(
+    let r = e.getZoom();
+    r *= Q(0.999, t), r > 20 && (r = 20), r < 0.01 && (r = 0.01), e.zoomToPoint(
       o,
-      n
+      r
       // 传入修改后的缩放级别
-    ), S([n, n]);
+    ), A([r, r]);
   };
-  g(() => {
-    h.forEach((t) => {
+  d(() => {
+    b.forEach((t) => {
       t.renderLabel();
     });
-  }, [te, h, e]);
-  const W = (t) => {
-    var n;
-    if (((n = t.target) == null ? void 0 : n.tagName) === "INPUT" || !e)
+  }, [re, b, e]);
+  const K = (t) => {
+    var r;
+    if (((r = t.target) == null ? void 0 : r.tagName) === "INPUT" || !e)
       return;
     const o = e == null ? void 0 : e.getActiveObject();
-    o && v((i) => {
-      const I = i.findIndex((z) => z.object === o);
-      return i[I] && (i[I].destroy(), i.splice(I, 1)), f && f(i.map(k)), [...i];
+    o && v((n) => {
+      const g = n.findIndex((C) => C.object === o);
+      return n[g] && (n[g].destroy(), n.splice(g, 1)), f && f(n.map(E)), [...n];
     });
   };
-  P("Delete", W), P("Backspace", W), P("ctrl", () => {
-    E(!0);
+  O("Delete", K), O("Backspace", K), O("ctrl", () => {
+    P(!0);
   }, {
     events: ["keydown"]
-  }), P("ctrl", () => {
-    x || E(!1);
+  }), O("ctrl", () => {
+    k || P(!1);
   }, {
     events: ["keyup"]
-  }), g(() => {
-    E(x || !1);
-  }, [x]);
+  }), d(() => {
+    P(k || !1);
+  }, [k]);
   const q = (t) => {
-    e && $(e), v((o) => {
-      const n = o.findIndex((i) => i === t);
-      return n > -1 && (o.splice(n, 1), f && f(o.map(k)), Y()), [...o];
+    e && ee(e), v((o) => {
+      const r = o.findIndex((n) => n === t);
+      return r > -1 && (o.splice(r, 1), f && f(o.map(E)), U()), [...o];
     });
   }, F = (t) => {
     v((o) => {
-      const n = o.findIndex((i) => i === t);
-      return n > -1 && (o[n] = t, f && f(o.map(k))), [...o];
+      const r = o.findIndex((n) => n === t);
+      return r > -1 && (o[r] = t, f && f(o.map(E))), [...o];
     });
   };
-  g(() => {
+  d(() => {
     if (!e)
       return;
     const t = [];
-    return c.filter((o) => o.color).forEach((o) => {
-      t.push(new _({
+    return l.filter((o) => o.color).forEach((o) => {
+      t.push(new V({
         id: o.id,
         name: o.label,
         color: o.color,
-        points: o.box.map((n) => [n[0] + H.left, n[1] + H.top]),
-        hideDelete: u
+        points: o.box.map((r) => [r[0] + W.left, r[1] + W.top]),
+        hideDelete: h
       }, e, {
         onChange: F,
         onDelete: q,
-        renderLabelItem: O ? (n) => O ? O(o) : n.name : void 0
+        renderLabelItem: N ? (r) => N ? N(o) : r.name : void 0
       }));
     }), v(t), t.forEach((o) => {
       o.render(e);
@@ -117,199 +117,234 @@ const $ = (r) => {
         o.canvas !== e && o.destroy();
       });
     };
-  }, [e, d]);
-  const Y = () => {
-    e && de(e, (t) => {
-      const o = new _({
-        id: (a == null ? void 0 : a.id) || t.id,
-        name: (a == null ? void 0 : a.label) || t.label,
-        color: (a == null ? void 0 : a.color) || t.color,
-        points: t.box.map((n) => [n[0], n[1]]),
-        hideDelete: u
+  }, [e, m]);
+  const U = () => {
+    e && ue(e, (t) => {
+      const o = new V({
+        id: (i == null ? void 0 : i.id) || t.id,
+        name: (i == null ? void 0 : i.label) || t.label,
+        color: (i == null ? void 0 : i.color) || t.color,
+        points: t.box.map((r) => [r[0], r[1]]),
+        hideDelete: h
       }, e, {
         onChange: F,
         onDelete: q
       });
-      o.active = !0, h.push(o), f && f(h.map(k)), v([...h]);
-    }, u);
-  }, oe = () => {
+      o.active = !0, b.push(o), f && f(b.map(E)), v([...b]);
+    }, h);
+  }, ne = () => {
     let t = !1;
     e && (e.on("mouse:down", (o) => {
       t = !0, e.selection = !1;
     }), e.on("mouse:move", (o) => {
       if (t && o && o.e) {
-        const n = new R.Point(o.e.movementX, o.e.movementY);
-        e.relativePan(n);
+        const r = new z.Point(o.e.movementX, o.e.movementY);
+        e.relativePan(r);
       }
     }), e.on("mouse:up", (o) => {
       t = !1, e.selection = !0;
     }));
-  }, ne = () => {
+  }, se = () => {
     e && (e.off("mouse:down"), e.off("mouse:move"), e.off("mouse:up"));
   };
-  g(() => {
+  d(() => {
+    if (!e)
+      return;
+    const t = (o) => {
+      const r = e, n = r == null ? void 0 : r._currentTransform;
+      if (!n)
+        return;
+      const g = n.action;
+      if (!g || !g.startsWith("scale"))
+        return;
+      const C = e.backgroundImage, u = C == null ? void 0 : C.aCoords;
+      if (!u)
+        return;
+      const D = e.getPointer(o.e);
+      if (D.x < u.tl.x || D.x > u.br.x || D.y < u.tl.y || D.y > u.br.y) {
+        const w = r == null ? void 0 : r._onMouseUp;
+        typeof w == "function" && w(o.e);
+      }
+    };
+    return e.on("mouse:move", t), () => {
+      e.off("mouse:move", t);
+    };
+  }, [e]), d(() => {
+    if (!e)
+      return;
+    const t = (o) => {
+      const r = e;
+      if (!!!(r != null && r._currentTransform))
+        return;
+      const g = r == null ? void 0 : r._onMouseUp;
+      typeof g == "function" && g(o.e);
+    };
+    return e.on("mouse:out", t), () => {
+      e.off("mouse:out", t);
+    };
+  }, [e]), d(() => {
     if (e)
-      return p ? (oe(), e.defaultCursor = "grab", e.on("mouse:down:before", () => {
+      return y ? (ne(), e.defaultCursor = "grab", e.on("mouse:down:before", () => {
         e.setCursor("grabbing");
       }), e.on("mouse:up", () => {
         e.defaultCursor = "grab";
       }), e.getObjects(), v((t) => (t.forEach((o) => {
-        var n;
-        return (n = o.object) == null ? void 0 : n.set("evented", !1);
+        var r;
+        return (r = o.object) == null ? void 0 : r.set("evented", !1);
       }), t))) : (e.defaultCursor = "default", e.off("mouse:down:before"), e.off("mouse:up"), e.setCursor("default"), v((t) => (t.forEach((o) => {
-        var n;
-        return (n = o.object) == null ? void 0 : n.set("evented", !0);
-      }), t)), Y()), () => {
-        ne();
+        var r;
+        return (r = o.object) == null ? void 0 : r.set("evented", !0);
+      }), t)), U()), () => {
+        se();
       };
-  }, [e, p]), g(() => {
+  }, [e, y]), d(() => {
     if (e == null || e.on("mouse:wheel", (t) => {
       const o = t.e.deltaY;
-      A(o, {
+      T(o, {
         x: t.e.offsetX,
         y: t.e.offsetY
-      }), h.forEach((n) => {
-        n.renderLabel();
+      }), b.forEach((r) => {
+        r.renderLabel();
       });
-    }), !p)
-      return Y(), () => {
-        e && ($(e), e.off("mouse:wheel"));
+    }), !y)
+      return U(), () => {
+        e && (ee(e), e.off("mouse:wheel"));
       };
-  }, [e, a, h, p]);
-  const re = () => {
-    V({}), U(void 0), S([1, 1]), e == null || e.dispose(), T(void 0);
+  }, [e, i, b, y]);
+  const ie = () => {
+    te({}), _(void 0), A([1, 1]), e == null || e.dispose(), Z(void 0);
   };
-  return g(() => {
-    B(!0), re(), !(!s.current || !d) && R.Image.fromURL(d, (t) => {
+  return d(() => {
+    B(!0), ie(), !(!a.current || !m) && z.Image.fromURL(m, (t) => {
       t.set({
         originX: "center",
         originY: "center"
-      }), U(t), B(!1);
+      }), _(t), B(!1);
     }, {
       crossOrigin: "anonymous"
     });
-  }, [d]), g(() => {
-    if (!y && e) {
+  }, [m]), d(() => {
+    if (!I && e) {
       try {
         e.clear();
-      } catch (M) {
+      } catch (Y) {
       }
       return;
     }
-    if (!s.current || !s.current.parentElement)
+    if (!a.current || !a.current.parentElement)
       return;
-    const t = y == null ? void 0 : y.getElement();
+    const t = I == null ? void 0 : I.getElement();
     if (!(t != null && t.width) || !(t != null && t.height))
       return;
-    const o = t.width / t.height, n = s.current.parentElement.offsetWidth, i = s.current.parentElement.offsetHeight, I = n / t.width, z = i / t.height;
-    let C = [n, i];
-    I > z ? C = [i * o, i] : C = [n, n / o];
-    const ae = C[0] / t.width, ie = C[1] / t.height, D = Math.min(ae, ie);
-    S([D, D]);
-    const m = new R.Canvas(s.current, {
+    const o = t.width / t.height, r = a.current.parentElement.offsetWidth, n = a.current.parentElement.offsetHeight, g = r / t.width, C = n / t.height;
+    let u = [r, n];
+    g > C ? u = [n * o, n] : u = [r, r / o];
+    const D = u[0] / t.width, G = u[1] / t.height, w = Math.min(D, G);
+    A([w, w]);
+    const p = new z.Canvas(a.current, {
       containerClass: "marking-canvas",
-      width: n,
-      height: i
+      width: r,
+      height: n
     });
-    if (m == null || m.setZoom(D), m == null || m.renderAll(), m && y) {
-      const M = (n - C[0]) / D / 2, G = (i - C[1]) / D / 2;
-      m.setBackgroundImage(
-        y,
+    if (p == null || p.setZoom(w), p == null || p.renderAll(), p && I) {
+      const Y = (r - u[0]) / w / 2, J = (n - u[1]) / w / 2;
+      p.setBackgroundImage(
+        I,
         () => {
-          m.renderAll(), ee({
-            left: M,
-            top: G
-          }), T(m), w && w();
+          p.renderAll(), oe({
+            left: Y,
+            top: J
+          }), Z(p), j && j();
         },
         // 刷新画布
         {
           originX: "left",
           originY: "top",
-          left: M,
-          top: G
+          left: Y,
+          top: J
         }
       );
     }
-  }, [y]), g(() => {
-    h.length > c.length && h.forEach((t) => {
-      c.find((o) => o.id === t.config.id) || t.destroy();
+  }, [I]), d(() => {
+    b.length > l.length && b.forEach((t) => {
+      l.find((o) => o.id === t.config.id) || t.destroy();
     });
-  }, [c.length]), g(() => {
-    e && (p || v((t) => {
-      const o = e == null ? void 0 : e.getActiveObject(), n = t.find((i) => i.object === o);
-      return n && a && (n.labelConfig = {
-        id: a.id,
-        name: a.label,
-        color: a.color
-      }, f && f(t.map(k))), e && (a ? e.defaultCursor = "copy" : e.defaultCursor = "default"), [...t];
+  }, [l.length]), d(() => {
+    e && (y || v((t) => {
+      const o = e == null ? void 0 : e.getActiveObject(), r = t.find((n) => n.object === o);
+      return r && i && (r.labelConfig = {
+        id: i.id,
+        name: i.label,
+        color: i.color
+      }, f && f(t.map(E))), e && (i ? e.defaultCursor = "copy" : e.defaultCursor = "default"), [...t];
     }));
-  }, [a, e, p]), g(() => {
+  }, [i, e, y]), d(() => {
     var t;
-    if (N && s.current && !j) {
+    if (S && a.current && !M) {
       const o = document.createElement("div");
-      o.setAttribute("style", "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute;top: 0;"), (t = s.current.parentElement) == null || t.appendChild(o), le.render(/* @__PURE__ */ l(ce, {}), o), K(o);
+      o.setAttribute("style", "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute;top: 0;"), (t = a.current.parentElement) == null || t.appendChild(o), ce.render(/* @__PURE__ */ c(le, {}), o), H(o);
     } else
-      !N && j && (j.remove(), K(null));
-  }, [N, s.current, j]), /* @__PURE__ */ Q("div", {
+      !S && M && (M.remove(), H(null));
+  }, [S, a.current, M]), /* @__PURE__ */ $("div", {
     style: {
       width: "100%",
       height: "100%",
       display: "flex"
     },
-    children: [/* @__PURE__ */ l("div", {
+    children: [/* @__PURE__ */ c("div", {
       className: "marker-toolbar",
-      children: /* @__PURE__ */ l("div", {
+      children: /* @__PURE__ */ c("div", {
         className: "create-mode-select",
-        children: /* @__PURE__ */ Q(fe, {
+        children: /* @__PURE__ */ $(fe, {
           direction: "vertical",
           size: 16,
-          children: [/* @__PURE__ */ l(X, {
+          children: [/* @__PURE__ */ c(R, {
             title: "放大-鼠标滚轮前滑",
             placement: "right",
-            children: /* @__PURE__ */ l(Z, {
-              icon: /* @__PURE__ */ l(ue, {}),
+            children: /* @__PURE__ */ c(X, {
+              icon: /* @__PURE__ */ c(de, {}),
               onClick: () => {
-                A(-100);
+                T(-100);
               }
             })
-          }), /* @__PURE__ */ l(X, {
+          }), /* @__PURE__ */ c(R, {
             title: "缩小-鼠标滚轮后滑",
             placement: "right",
-            children: /* @__PURE__ */ l(Z, {
-              icon: /* @__PURE__ */ l(me, {}),
+            children: /* @__PURE__ */ c(X, {
+              icon: /* @__PURE__ */ c(me, {}),
               onClick: () => {
-                A(100);
+                T(100);
               }
             })
-          }), !x && /* @__PURE__ */ l(X, {
+          }), !k && /* @__PURE__ */ c(R, {
             title: "拖动-按住ctrl",
             placement: "right",
-            children: /* @__PURE__ */ l(Z, {
-              disabled: x,
-              icon: /* @__PURE__ */ l(ge, {}),
-              className: p ? "active" : "",
+            children: /* @__PURE__ */ c(X, {
+              disabled: k,
+              icon: /* @__PURE__ */ c(ge, {}),
+              className: y ? "active" : "",
               onClick: () => {
-                E(!p);
+                P(!y);
               }
             })
           })]
         })
       })
-    }), /* @__PURE__ */ l("div", {
+    }), /* @__PURE__ */ c("div", {
       className: he({
         "label-maker-wrap": !0,
-        draggable: p
+        draggable: y
       }),
       onContextMenu: (t) => {
         t.preventDefault();
       },
-      children: /* @__PURE__ */ l("canvas", {
+      children: /* @__PURE__ */ c("canvas", {
         className: "label-maker-canvas",
-        ref: s
+        ref: a
       })
     })]
   });
 };
 export {
-  Ne as default
+  Le as default
 };