@glodon-aiot/dataset-annotation 3.24.0-alpha.6 → 3.25.0-alpha.7

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

@@ -1,17 +1,17 @@
-var oe = Math.pow;
-import { jsx as u, jsxs as ne } from "react/jsx-runtime";
-import { useRef as re, useState as I, useEffect as p } from "react";
-import { fabric as G } from "fabric";
+var re = Math.pow;
+import { jsx as u, jsxs as ce } from "react/jsx-runtime";
+import { useRef as G, useState as C, useEffect as p } from "react";
+import { fabric as J } from "fabric";
 import { useKeyPress as N } from "ahooks";
 import "./style.less.mjs";
-import ue from "react-dom";
-import { Spin as he, Space as me, Tooltip as U, Button as z } from "antd";
-import ce from "./RectLabel.mjs";
-import { drawable as ge } from "./Drawable.mjs";
-import { ZoomInOutlined as be, ZoomOutOutlined as pe, DragOutlined as ye, ClearOutlined as xe } from "@ant-design/icons";
+import he from "react-dom";
+import { Spin as me, Space as ge, Tooltip as U, Button as z } from "antd";
+import ie from "./RectLabel.mjs";
+import { drawable as be } from "./Drawable.mjs";
+import { ZoomInOutlined as pe, ZoomOutOutlined as ye, DragOutlined as xe, ClearOutlined as De } from "@ant-design/icons";
 import ve from "classnames";
 import { approxeq as Y } from "../../../../utils/index.mjs";
-const T = (l) => {
+const R = (l) => {
   l.off("mouse:down"), l.off("mouse:up");
 }, A = (l) => {
   var f, P, k;
@@ -30,8 +30,8 @@ const T = (l) => {
     color: l.config.color,
     box: (h == null ? void 0 : h.map((a) => [Y(a.x - g.x, 0) ? 0 : Y(a.x - g.x, y.width) ? y.width : a.x - g.x, Y(a.y - g.y, 0) ? 0 : Y(a.y - g.y, y.height) ? y.height : a.y - g.y])) || []
   };
-}, Ue = (l) => {
-  const h = re(null), {
+}, ze = (l) => {
+  const h = G(null), {
     labels: g,
     imageUrl: y,
     pen: f,
@@ -41,61 +41,61 @@ const T = (l) => {
     isPreLabel: _,
     disabled: w,
     renderLabelItem: X
-  } = l, [B, W] = I(!0), [e, J] = I(), [De, ie] = I({}), [j, Q] = I(), [Z, se] = I({
+  } = l, [B, W] = C(!0), [e, Q] = C(), [je, se] = C({}), [j, $] = C(), [Z, ae] = C({
     left: 0,
     top: 0
-  }), [ae, K] = I([1, 1]), [R, $] = I(), [C, v] = I([]), D = re(/* @__PURE__ */ new Set()), [x, L] = I(w || !1), s = (o) => {
-    if (!o)
+  }), [le, K] = C([1, 1]), [T, V] = C(), [I, D] = C([]), v = G(/* @__PURE__ */ new Set()), ee = G(0), [x, L] = C(w || !1), s = (n) => {
+    if (!n)
       return !1;
     try {
-      return !!o.getContext();
+      return !!n.getContext();
     } catch (t) {
       return !1;
     }
-  }, H = (o, t) => {
+  }, H = (n, t) => {
     if (!e || !s(e))
       return;
     t || (t = {
       x: e.getCenter().left,
       y: e.getCenter().top
     });
-    let n = e.getZoom();
-    n *= oe(0.999, o), n > 20 && (n = 20), n < 0.01 && (n = 0.01);
+    let o = e.getZoom();
+    o *= re(0.999, n), o > 20 && (o = 20), o < 0.01 && (o = 0.01);
     try {
       e.zoomToPoint(
         t,
-        n
+        o
         // 传入修改后的缩放级别
-      ), K([n, n]);
+      ), K([o, o]);
     } catch (r) {
     }
   };
   p(() => {
-    !e || !s(e) || C.forEach((o) => {
+    !e || !s(e) || I.forEach((n) => {
       try {
-        o.renderLabel();
+        n.renderLabel();
       } catch (t) {
       }
     });
-  }, [ae, C, e]);
-  const V = (o) => {
-    var n;
-    if (((n = o.target) == null ? void 0 : n.tagName) === "INPUT" || !e || !s(e))
+  }, [le, I, e]);
+  const te = (n) => {
+    var o;
+    if (((o = n.target) == null ? void 0 : o.tagName) === "INPUT" || !e || !s(e))
       return;
     const t = e == null ? void 0 : e.getActiveObject();
-    t && v((r) => {
+    t && D((r) => {
       let d = r.findIndex((i) => i.object === t);
       if (d === -1 && t && (d = r.findIndex((i) => {
         const c = i._fabricRect;
         return c && c === t;
       })), d >= 0 && r[d]) {
         const i = r[d];
-        D.current.add(i.config.id);
+        v.current.add(i.config.id);
         const c = i.handlers.onDelete;
         i.handlers.onDelete = void 0, i.destroy(), i.handlers.onDelete = c, r.splice(d, 1);
         const m = r.map(A);
         a && a(m), setTimeout(() => {
-          D.current.delete(i.config.id);
+          v.current.delete(i.config.id);
         }, 100);
       } else if (t && e) {
         const i = r.findIndex((c) => {
@@ -104,12 +104,12 @@ const T = (l) => {
         });
         if (i >= 0 && r[i]) {
           const c = r[i];
-          D.current.add(c.config.id);
+          v.current.add(c.config.id);
           const m = c.handlers.onDelete;
           c.handlers.onDelete = void 0, c.destroy(), c.handlers.onDelete = m, r.splice(i, 1);
           const S = r.map(A);
           a && a(S), setTimeout(() => {
-            D.current.delete(c.config.id);
+            v.current.delete(c.config.id);
           }, 100);
         } else
           e.remove(t), e.discardActiveObject(), e.renderAll();
@@ -117,7 +117,7 @@ const T = (l) => {
       return [...r];
     });
   };
-  N("Delete", V), N("Backspace", V), N("ctrl", () => {
+  N("Delete", te), N("Backspace", te), N("ctrl", () => {
     L(!0);
   }, {
     events: ["keydown"]
@@ -128,20 +128,20 @@ const T = (l) => {
   }), p(() => {
     L(w || !1);
   }, [w]);
-  const ee = (o) => {
-    e && T(e), v((t) => {
-      const n = t.findIndex((r) => r === o);
-      if (n > -1) {
-        t.splice(n, 1);
+  const oe = (n) => {
+    e && R(e), D((t) => {
+      const o = t.findIndex((r) => r === n);
+      if (o > -1) {
+        t.splice(o, 1);
         const r = t.map(A);
         a && a(r), M();
       }
       return [...t];
     });
-  }, te = (o) => {
-    v((t) => {
-      const n = t.findIndex((r) => r === o);
-      return n > -1 && (t[n] = o, a && a(t.map(A))), [...t];
+  }, ne = (n) => {
+    D((t) => {
+      const o = t.findIndex((r) => r === n);
+      return o > -1 && (t[o] = n, a && a(t.map(A))), [...t];
     });
   };
   p(() => {
@@ -155,49 +155,52 @@ const T = (l) => {
     }
     if (!j)
       return;
-    const o = [];
+    const n = [];
     return g.filter((t) => t.color).forEach((t) => {
-      o.push(new ce({
+      n.push(new ie({
         id: t.id,
         name: t.label,
         color: t.color,
-        points: t.box.map((n) => [n[0] + Z.left, n[1] + Z.top]),
+        points: t.box.map((o) => [o[0] + Z.left, o[1] + Z.top]),
         hideDelete: _
       }, e, {
-        onChange: te,
-        onDelete: ee,
-        renderLabelItem: X ? (n) => X ? X(t) : n.name : void 0
+        onChange: ne,
+        onDelete: oe,
+        renderLabelItem: X ? (o) => X ? X(t) : o.name : void 0
       }));
-    }), v(o), o.forEach((t) => {
+    }), D(n), n.forEach((t) => {
       try {
         t.render(e);
-      } catch (n) {
+      } catch (o) {
       }
     }), () => {
-      o.forEach((t) => {
+      n.forEach((t) => {
         try {
-          t.canvas !== e && t.destroy();
-        } catch (n) {
+          if (t.canvas !== e) {
+            const o = t.handlers.onDelete;
+            t.handlers.onDelete = void 0, t.destroy(), t.handlers.onDelete = o;
+          }
+        } catch (o) {
         }
       });
     };
   }, [e, y, j, Z]);
   const M = () => {
-    !e || !s(e) || ge(e, (o) => {
+    !e || !s(e) || be(e, (n) => {
       if (!e || !s(e))
         return;
-      const t = new ce({
-        id: (f == null ? void 0 : f.id) || o.id,
-        name: (f == null ? void 0 : f.label) || o.label,
-        color: (f == null ? void 0 : f.color) || o.color,
-        points: o.box.map((n) => [n[0], n[1]]),
+      const t = new ie({
+        id: (f == null ? void 0 : f.id) || n.id,
+        name: (f == null ? void 0 : f.label) || n.label,
+        color: (f == null ? void 0 : f.color) || n.color,
+        points: n.box.map((o) => [o[0], o[1]]),
         hideDelete: _
       }, e, {
-        onChange: te,
-        onDelete: ee
+        onChange: ne,
+        onDelete: oe
       });
-      t.active = !0, v((n) => {
-        const r = [...n, t];
+      t.active = !0, D((o) => {
+        const r = [...o, t];
         return a && a(r.map(A)), setTimeout(() => {
           if (t.object && e && s(e))
             try {
@@ -208,28 +211,28 @@ const T = (l) => {
         }, 0), r;
       });
     }, _);
-  }, le = () => {
-    let o = !1;
+  }, fe = () => {
+    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 G.Point(t.e.movementX, t.e.movementY);
-        e.relativePan(n);
+      if (n && t && t.e) {
+        const o = new J.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;
     }));
-  }, fe = () => {
+  }, de = () => {
     e && (e.off("mouse:down"), e.off("mouse:move"), e.off("mouse:up"));
   };
   p(() => {
     if (!e || !s(e))
       return;
-    const o = (t) => {
+    const n = (t) => {
       if (!s(e))
         return;
-      const n = e, r = n == null ? void 0 : n._currentTransform;
+      const o = e, r = o == null ? void 0 : o._currentTransform;
       if (!r)
         return;
       const d = r.action;
@@ -240,146 +243,150 @@ const T = (l) => {
         try {
           const m = e.getPointer(t.e);
           if (m.x < c.tl.x || m.x > c.br.x || m.y < c.tl.y || m.y > c.br.y) {
-            const O = n == null ? void 0 : n._onMouseUp;
+            const O = o == null ? void 0 : o._onMouseUp;
             typeof O == "function" && O(t.e);
           }
         } catch (m) {
         }
     };
-    return e.on("mouse:move", o), () => {
+    return e.on("mouse:move", n), () => {
       if (e && s(e))
         try {
-          e.off("mouse:move", o);
+          e.off("mouse:move", n);
         } catch (t) {
         }
     };
   }, [e]), p(() => {
     if (!e || !s(e))
       return;
-    const o = (t) => {
+    const n = (t) => {
       if (!s(e))
         return;
-      const n = e;
-      if (!!!(n != null && n._currentTransform))
+      const o = e;
+      if (!!!(o != null && o._currentTransform))
         return;
-      const d = n == null ? void 0 : n._onMouseUp;
+      const d = o == null ? void 0 : o._onMouseUp;
       typeof d == "function" && d(t.e);
     };
-    return e.on("mouse:out", o), () => {
+    return e.on("mouse:out", n), () => {
       if (e && s(e))
         try {
-          e.off("mouse:out", o);
+          e.off("mouse:out", n);
         } catch (t) {
         }
     };
   }, [e]), p(() => {
     if (!(!e || !s(e))) {
       if (x) {
-        le();
+        fe();
         try {
           e.defaultCursor = "grab";
-          const o = () => {
+          const n = () => {
             s(e) && e.setCursor("grabbing");
           }, t = () => {
             s(e) && (e.defaultCursor = "grab");
           };
-          e.on("mouse:down:before", o), e.on("mouse:up", t);
-          const n = e.getObjects();
-          v((r) => (r.forEach((d) => {
+          e.on("mouse:down:before", n), e.on("mouse:up", t);
+          const o = e.getObjects();
+          D((r) => (r.forEach((d) => {
             var i;
             try {
               (i = d.object) == null || i.set("evented", !1);
             } catch (c) {
             }
           }), r));
-        } catch (o) {
+        } catch (n) {
         }
       } else
         try {
-          e.defaultCursor = "default", e.off("mouse:down:before"), e.off("mouse:up"), e.setCursor("default"), v((o) => (o.forEach((t) => {
-            var n;
+          e.defaultCursor = "default", e.off("mouse:down:before"), e.off("mouse:up"), e.setCursor("default"), D((n) => (n.forEach((t) => {
+            var o;
             try {
-              (n = t.object) == null || n.set("evented", !0);
+              (o = t.object) == null || o.set("evented", !0);
             } catch (r) {
             }
-          }), o)), M();
-        } catch (o) {
+          }), n)), M();
+        } catch (n) {
         }
       return () => {
-        fe();
+        de();
       };
     }
   }, [e, x]), p(() => {
     if (!e || !s(e))
       return;
-    const o = (t) => {
+    const n = (t) => {
       if (!s(e))
         return;
-      const n = t.e.deltaY;
-      H(n, {
+      const o = t.e.deltaY;
+      H(o, {
         x: t.e.offsetX,
         y: t.e.offsetY
-      }), C.forEach((r) => {
+      }), I.forEach((r) => {
         try {
           r.renderLabel();
         } catch (d) {
         }
       });
     };
-    return e.on("mouse:wheel", o), x ? () => {
+    return e.on("mouse:wheel", n), x ? () => {
       if (e && s(e))
         try {
-          e.off("mouse:wheel", o);
+          e.off("mouse:wheel", n);
         } catch (t) {
         }
     } : (M(), () => {
       if (e && s(e))
         try {
-          T(e), e.off("mouse:wheel", o);
+          R(e), e.off("mouse:wheel", n);
         } catch (t) {
         }
     });
-  }, [e, f, C, x]);
-  const de = () => {
+  }, [e, f, I, x]);
+  const ue = () => {
     if (e)
       try {
-        T(e), e.discardActiveObject();
-      } catch (o) {
+        R(e), e.discardActiveObject();
+      } catch (n) {
       }
-    if (v((o) => (o.forEach((t) => {
+    if (D((n) => (n.forEach((t) => {
       try {
-        D.current.add(t.config.id);
-        const n = t.handlers.onDelete;
-        t.handlers.onDelete = void 0, t.destroy(), t.handlers.onDelete = n;
-      } catch (n) {
+        v.current.add(t.config.id);
+        const o = t.handlers.onDelete;
+        t.handlers.onDelete = void 0, t.destroy(), t.handlers.onDelete = o;
+      } catch (o) {
       }
     }), setTimeout(() => {
-      D.current.clear();
-    }, 100), [])), ie({}), Q(void 0), K([1, 1]), e)
+      v.current.clear();
+    }, 100), [])), se({}), $(void 0), K([1, 1]), e)
       try {
         e.getObjects().forEach((t) => {
           try {
             e.remove(t);
-          } catch (n) {
+          } catch (o) {
           }
         }), e.dispose();
-      } catch (o) {
+      } catch (n) {
       }
-    J(void 0);
+    Q(void 0);
   };
   return p(() => {
-    W(!0), de(), !(!h.current || !y) && G.Image.fromURL(
+    W(!0), ue();
+    const n = ++ee.current;
+    !h.current || !y || J.Image.fromURL(
       y,
       // @types/fabric 的回调签名缺少第二个参数 isError，运行时确实存在，用 any 规避类型错误
-      (o, t) => {
-        if (t) {
-          W(!1), k == null || k();
-          return;
+      (t, o) => {
+        if (n === ee.current) {
+          if (o) {
+            W(!1), k == null || k();
+            return;
+          }
+          t.set({
+            originX: "center",
+            originY: "center"
+          }), $(t), W(!1);
         }
-        o.set({
-          originX: "center",
-          originY: "center"
-        }), Q(o), W(!1);
       },
       {
         crossOrigin: "anonymous"
@@ -395,12 +402,12 @@ const T = (l) => {
     }
     if (!h.current || !h.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;
     if (e)
       try {
-        e.getContext() && (T(e), e.discardActiveObject(), e.getObjects().forEach((F) => {
+        e.getContext() && (R(e), e.discardActiveObject(), e.getObjects().forEach((F) => {
           try {
             e.remove(F);
           } catch (Ce) {
@@ -408,28 +415,28 @@ const T = (l) => {
         }), e.dispose());
       } catch (E) {
       }
-    const t = o.width / o.height, n = h.current.parentElement.offsetWidth, r = h.current.parentElement.offsetHeight, d = n / o.width, i = r / o.height;
-    let c = [n, r];
-    d > i ? c = [r * t, r] : c = [n, n / t];
-    const m = c[0] / o.width, S = c[1] / o.height, O = Math.min(m, S);
+    const t = n.width / n.height, o = h.current.parentElement.offsetWidth, r = h.current.parentElement.offsetHeight, d = o / n.width, i = r / n.height;
+    let c = [o, r];
+    d > i ? c = [r * t, r] : c = [o, o / t];
+    const m = c[0] / n.width, S = c[1] / n.height, O = Math.min(m, S);
     K([O, O]);
-    const b = new G.Canvas(h.current, {
+    const b = new J.Canvas(h.current, {
       containerClass: "marking-canvas",
-      width: n,
+      width: o,
       height: r
     });
     if (b.uniScaleKey = "", b.uniformScaling = !1, b == null || b.setZoom(O), b == null || b.renderAll(), b && j) {
-      const E = (n - c[0]) / O / 2, q = (r - c[1]) / O / 2;
+      const E = (o - c[0]) / O / 2, q = (r - c[1]) / O / 2;
       b.setBackgroundImage(
         j,
         () => {
           try {
             if (!b.getContext())
               return;
-            b.renderAll(), se({
+            b.renderAll(), ae({
               left: E,
               top: q
-            }), J(b), P && P();
+            }), Q(b), P && P();
           } catch (F) {
           }
         },
@@ -443,35 +450,35 @@ const T = (l) => {
       );
     }
   }, [j]), p(() => {
-    if (C.length > g.length) {
-      if (D.current.size > 0)
+    if (I.length > g.length) {
+      if (v.current.size > 0)
         return;
-      C.forEach((t) => {
-        const n = D.current.has(t.config.id), r = t._isDestroying;
-        !g.find((i) => i.id === t.config.id) && !r && !n && t.destroy();
+      I.forEach((t) => {
+        const o = v.current.has(t.config.id), r = t._isDestroying;
+        !g.find((i) => i.id === t.config.id) && !r && !o && t.destroy();
       });
     }
   }, [g.length]), p(() => {
-    !e || !s(e) || x || v((o) => {
+    !e || !s(e) || x || D((n) => {
       try {
-        const t = e == null ? void 0 : e.getActiveObject(), n = o.find((r) => r.object === t);
-        n && f && (n.labelConfig = {
+        const t = e == null ? void 0 : e.getActiveObject(), o = n.find((r) => r.object === t);
+        o && f && (o.labelConfig = {
           id: f.id,
           name: f.label,
           color: f.color
-        }, a && a(o.map(A))), e && s(e) && (f ? e.defaultCursor = "copy" : e.defaultCursor = "default");
+        }, a && a(n.map(A))), e && s(e) && (f ? e.defaultCursor = "copy" : e.defaultCursor = "default");
       } catch (t) {
       }
-      return [...o];
+      return [...n];
     });
   }, [f, e, x]), p(() => {
-    var o;
-    if (B && h.current && !R) {
+    var n;
+    if (B && h.current && !T) {
       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 = h.current.parentElement) == null || o.appendChild(t), ue.render(/* @__PURE__ */ u(he, {}), t), $(t);
+      t.setAttribute("style", "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute;top: 0;"), (n = h.current.parentElement) == null || n.appendChild(t), he.render(/* @__PURE__ */ u(me, {}), t), V(t);
     } else
-      !B && R && (R.remove(), $(null));
-  }, [B, h.current, R]), /* @__PURE__ */ ne("div", {
+      !B && T && (T.remove(), V(null));
+  }, [B, h.current, T]), /* @__PURE__ */ ce("div", {
     style: {
       width: "100%",
       height: "100%",
@@ -481,14 +488,14 @@ const T = (l) => {
       className: "marker-toolbar",
       children: /* @__PURE__ */ u("div", {
         className: "create-mode-select",
-        children: /* @__PURE__ */ ne(me, {
+        children: /* @__PURE__ */ ce(ge, {
           direction: "vertical",
           size: 16,
           children: [/* @__PURE__ */ u(U, {
             title: "放大-鼠标滚轮前滑",
             placement: "right",
             children: /* @__PURE__ */ u(z, {
-              icon: /* @__PURE__ */ u(be, {}),
+              icon: /* @__PURE__ */ u(pe, {}),
               onClick: () => {
                 H(-100);
               }
@@ -497,7 +504,7 @@ const T = (l) => {
             title: "缩小-鼠标滚轮后滑",
             placement: "right",
             children: /* @__PURE__ */ u(z, {
-              icon: /* @__PURE__ */ u(pe, {}),
+              icon: /* @__PURE__ */ u(ye, {}),
               onClick: () => {
                 H(100);
               }
@@ -507,7 +514,7 @@ const T = (l) => {
             placement: "right",
             children: /* @__PURE__ */ u(z, {
               disabled: w,
-              icon: /* @__PURE__ */ u(ye, {}),
+              icon: /* @__PURE__ */ u(xe, {}),
               className: x ? "active" : "",
               onClick: () => {
                 L(!x);
@@ -517,23 +524,23 @@ const T = (l) => {
             title: "一键清空全部标注",
             placement: "right",
             children: /* @__PURE__ */ u(z, {
-              icon: /* @__PURE__ */ u(xe, {}),
-              disabled: !(C != null && C.length),
+              icon: /* @__PURE__ */ u(De, {}),
+              disabled: !(I != null && I.length),
               onClick: () => {
                 if (!(!e || !s(e)))
                   try {
-                    T(e), e.discardActiveObject(), v((t) => (t.forEach((n) => {
-                      D.current.add(n.config.id);
-                      const r = n.handlers.onDelete;
-                      n.handlers.onDelete = void 0, n.destroy(), n.handlers.onDelete = r;
+                    R(e), e.discardActiveObject(), D((t) => (t.forEach((o) => {
+                      v.current.add(o.config.id);
+                      const r = o.handlers.onDelete;
+                      o.handlers.onDelete = void 0, o.destroy(), o.handlers.onDelete = r;
                     }), setTimeout(() => {
-                      D.current.clear();
+                      v.current.clear();
                     }, 100), [])), e.getObjects().forEach((t) => {
                       t !== e.backgroundImage && e.remove(t);
                     }), a && a([]), s(e) && (e.renderAll(), setTimeout(() => {
                       e && s(e) && !x && M();
                     }, 0));
-                  } catch (o) {
+                  } catch (n) {
                   }
               }
             })
@@ -545,8 +552,8 @@ const T = (l) => {
         "label-maker-wrap": !0,
         draggable: x
       }),
-      onContextMenu: (o) => {
-        o.preventDefault();
+      onContextMenu: (n) => {
+        n.preventDefault();
       },
       children: /* @__PURE__ */ u("canvas", {
         className: "label-maker-canvas",
@@ -556,5 +563,5 @@ const T = (l) => {
   });
 };
 export {
-  Ue as default
+  ze as default
 };