@glodon-aiot/dataset-annotation 3.13.0-alpha.29 → 3.14.0-alpha.30

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

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