@glodon-aiot/dataset-annotation 3.16.0-alpha.41 → 3.16.0-alpha.43

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

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