@glodon-aiot/dataset-annotation 3.14.0-alpha.31 → 3.15.0-alpha.1

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

@@ -1,376 +1,315 @@
-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";
+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";
 import "./style.less.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 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 = {
+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 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 = {
     x: 0,
     y: 0
-  }, p = {
+  }, d = {
     width: 0,
     height: 0
   };
-  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])) || []
+  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])) || []
   };
-}, Re = (a) => {
-  const l = ee(null), {
-    labels: m,
-    imageUrl: p,
-    pen: c,
-    onImageLoad: E,
+}, Ne = (r) => {
+  const s = se(null), {
+    labels: c,
+    imageUrl: d,
+    pen: a,
+    onImageLoad: w,
     onChange: f,
-    isPreLabel: b,
-    disabled: k,
-    renderLabelItem: S
-  } = a, [T, B] = I(!0), [e, Z] = I(), [be, ne] = I({}), [C, K] = I(), [W, re] = I({
+    isPreLabel: u,
+    disabled: x,
+    renderLabelItem: O
+  } = r, [N, B] = b(!0), [e, T] = b(), [pe, V] = b({}), [y, U] = b(), [H, ee] = b({
     left: 0,
     top: 0
-  }), [ie, A] = I([1, 1]), [M, H] = I(), [y, D] = I([]), j = ee(/* @__PURE__ */ new Set()), [x, P] = I(k || !1), N = (o, t) => {
+  }), [te, S] = b([1, 1]), [j, K] = b(), [h, v] = b([]), [p, E] = b(x || !1), A = (t, o) => {
     if (!e)
       return;
-    t || (t = {
+    o || (o = {
       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(
-      t,
+    n *= J(0.999, t), n > 20 && (n = 20), n < 0.01 && (n = 0.01), e.zoomToPoint(
+      o,
       n
       // 传入修改后的缩放级别
-    ), A([n, n]);
+    ), S([n, n]);
   };
-  h(() => {
-    y.forEach((o) => {
-      o.renderLabel();
+  g(() => {
+    h.forEach((t) => {
+      t.renderLabel();
     });
-  }, [ie, y, e]);
-  const q = (o) => {
+  }, [te, h, e]);
+  const W = (t) => {
     var n;
-    if (((n = o.target) == null ? void 0 : n.tagName) === "INPUT" || !e)
+    if (((n = t.target) == null ? void 0 : n.tagName) === "INPUT" || !e)
       return;
-    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];
+    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];
     });
   };
-  L("Delete", q), L("Backspace", q), L("ctrl", () => {
-    P(!0);
+  P("Delete", W), P("Backspace", W), P("ctrl", () => {
+    E(!0);
   }, {
     events: ["keydown"]
-  }), L("ctrl", () => {
-    k || P(!1);
+  }), P("ctrl", () => {
+    x || E(!1);
   }, {
     events: ["keyup"]
-  }), h(() => {
-    P(k || !1);
-  }, [k]);
-  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];
+  }), g(() => {
+    E(x || !1);
+  }, [x]);
+  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];
     });
-  }, G = (o) => {
-    D((t) => {
-      const n = t.findIndex((r) => r === o);
-      return n > -1 && (t[n] = o, f && f(t.map(O))), [...t];
+  }, F = (t) => {
+    v((o) => {
+      const n = o.findIndex((i) => i === t);
+      return n > -1 && (o[n] = t, f && f(o.map(k))), [...o];
     });
   };
-  h(() => {
+  g(() => {
     if (!e)
       return;
-    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
+    const t = [];
+    return c.filter((o) => o.color).forEach((o) => {
+      t.push(new _({
+        id: o.id,
+        name: o.label,
+        color: o.color,
+        points: o.box.map((n) => [n[0] + H.left, n[1] + H.top]),
+        hideDelete: u
       }, e, {
-        onChange: G,
-        onDelete: F,
-        renderLabelItem: S ? (n) => S ? S(t) : n.name : void 0
+        onChange: F,
+        onDelete: q,
+        renderLabelItem: O ? (n) => O ? O(o) : n.name : void 0
       }));
-    }), D(o), o.forEach((t) => {
-      t.render(e);
+    }), v(t), t.forEach((o) => {
+      o.render(e);
     }), () => {
-      o.forEach((t) => {
-        t.canvas !== e && t.destroy();
+      t.forEach((o) => {
+        o.canvas !== e && o.destroy();
       });
     };
-  }, [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, 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, {
-        onChange: G,
-        onDelete: F
+        onChange: F,
+        onDelete: q
       });
-      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);
+      o.active = !0, h.push(o), f && f(h.map(k)), v([...h]);
+    }, u);
+  }, oe = () => {
+    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);
       }
-    }), e.on("mouse:up", (t) => {
-      o = !1, e.selection = !0;
+    }), e.on("mouse:up", (o) => {
+      t = !1, e.selection = !0;
     }));
-  }, ae = () => {
+  }, ne = () => {
     e && (e.off("mouse:down"), e.off("mouse:move"), e.off("mouse:up"));
   };
-  h(() => {
-    if (!e)
-      return;
-    const o = (t) => {
-      const n = e, r = n == null ? void 0 : n._currentTransform;
-      if (!r)
-        return;
-      const d = r.action;
-      if (!d || !d.startsWith("scale"))
-        return;
-      const s = e.backgroundImage, i = s == null ? void 0 : s.aCoords;
-      if (!i)
-        return;
-      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", o), () => {
-      e.off("mouse:move", o);
-    };
-  }, [e]), h(() => {
-    if (!e)
-      return;
-    const o = (t) => {
-      const n = e;
-      if (!!!(n != null && n._currentTransform))
-        return;
-      const d = n == null ? void 0 : n._onMouseUp;
-      typeof d == "function" && d(t.e);
-    };
-    return e.on("mouse:out", o), () => {
-      e.off("mouse:out", o);
-    };
-  }, [e]), h(() => {
+  g(() => {
     if (e)
-      return x ? (se(), e.defaultCursor = "grab", e.on("mouse:down:before", () => {
+      return p ? (oe(), e.defaultCursor = "grab", e.on("mouse:down:before", () => {
         e.setCursor("grabbing");
       }), e.on("mouse:up", () => {
         e.defaultCursor = "grab";
-      }), e.getObjects(), D((o) => (o.forEach((t) => {
+      }), e.getObjects(), v((t) => (t.forEach((o) => {
         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) => {
+        return (n = o.object) == null ? void 0 : n.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 = t.object) == null ? void 0 : n.set("evented", !0);
-      }), o)), z()), () => {
-        ae();
+        return (n = o.object) == null ? void 0 : n.set("evented", !0);
+      }), t)), Y()), () => {
+        ne();
       };
-  }, [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) => {
+  }, [e, p]), g(() => {
+    if (e == null || e.on("mouse:wheel", (t) => {
+      const o = t.e.deltaY;
+      A(o, {
+        x: t.e.offsetX,
+        y: t.e.offsetY
+      }), h.forEach((n) => {
         n.renderLabel();
       });
-    }), !x)
-      return z(), () => {
-        e && (oe(e), e.off("mouse:wheel"));
+    }), !p)
+      return Y(), () => {
+        e && ($(e), e.off("mouse:wheel"));
       };
-  }, [e, c, y, x]);
-  const ce = () => {
-    ne({}), K(void 0), A([1, 1]), e == null || e.dispose(), Z(void 0);
+  }, [e, a, h, p]);
+  const re = () => {
+    V({}), U(void 0), S([1, 1]), e == null || e.dispose(), T(void 0);
   };
-  return h(() => {
-    B(!0), ce(), !(!l.current || !p) && Y.Image.fromURL(p, (o) => {
-      o.set({
+  return g(() => {
+    B(!0), re(), !(!s.current || !d) && R.Image.fromURL(d, (t) => {
+      t.set({
         originX: "center",
         originY: "center"
-      }), K(o), B(!1);
+      }), U(t), B(!1);
     }, {
       crossOrigin: "anonymous"
     });
-  }, [p]), h(() => {
-    if (!C && e) {
+  }, [d]), g(() => {
+    if (!y && e) {
       try {
         e.clear();
-      } catch (U) {
+      } catch (M) {
       }
       return;
     }
-    if (!l.current || !l.current.parentElement)
+    if (!s.current || !s.current.parentElement)
       return;
-    const o = C == null ? void 0 : C.getElement();
-    if (!(o != null && o.width) || !(o != null && o.height))
+    const t = y == null ? void 0 : y.getElement();
+    if (!(t != null && t.width) || !(t != null && t.height))
       return;
-    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 g = new Y.Canvas(l.current, {
+    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, {
       containerClass: "marking-canvas",
       width: n,
-      height: r
+      height: 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,
+    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,
         () => {
-          g.renderAll(), re({
-            left: U,
-            top: Q
-          }), Z(g), E && E();
+          m.renderAll(), ee({
+            left: M,
+            top: G
+          }), T(m), w && w();
         },
         // 刷新画布
         {
           originX: "left",
           originY: "top",
-          left: U,
-          top: Q
+          left: M,
+          top: G
         }
       );
     }
-  }, [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];
+  }, [y]), g(() => {
+    h.length > c.length && h.forEach((t) => {
+      c.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];
     }));
-  }, [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);
+  }, [a, e, p]), g(() => {
+    var t;
+    if (N && s.current && !j) {
+      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);
     } else
-      !T && M && (M.remove(), H(null));
-  }, [T, l.current, M]), /* @__PURE__ */ V("div", {
+      !N && j && (j.remove(), K(null));
+  }, [N, s.current, j]), /* @__PURE__ */ Q("div", {
     style: {
       width: "100%",
       height: "100%",
       display: "flex"
     },
-    children: [/* @__PURE__ */ u("div", {
+    children: [/* @__PURE__ */ l("div", {
       className: "marker-toolbar",
-      children: /* @__PURE__ */ u("div", {
+      children: /* @__PURE__ */ l("div", {
         className: "create-mode-select",
-        children: /* @__PURE__ */ V(de, {
+        children: /* @__PURE__ */ Q(fe, {
           direction: "vertical",
           size: 16,
-          children: [/* @__PURE__ */ u(_, {
+          children: [/* @__PURE__ */ l(X, {
             title: "放大-鼠标滚轮前滑",
             placement: "right",
-            children: /* @__PURE__ */ u(X, {
-              icon: /* @__PURE__ */ u(me, {}),
+            children: /* @__PURE__ */ l(Z, {
+              icon: /* @__PURE__ */ l(ue, {}),
               onClick: () => {
-                N(-100);
+                A(-100);
               }
             })
-          }), /* @__PURE__ */ u(_, {
+          }), /* @__PURE__ */ l(X, {
             title: "缩小-鼠标滚轮后滑",
             placement: "right",
-            children: /* @__PURE__ */ u(X, {
-              icon: /* @__PURE__ */ u(ge, {}),
+            children: /* @__PURE__ */ l(Z, {
+              icon: /* @__PURE__ */ l(me, {}),
               onClick: () => {
-                N(100);
+                A(100);
               }
             })
-          }), !k && /* @__PURE__ */ u(_, {
+          }), !x && /* @__PURE__ */ l(X, {
             title: "拖动-按住ctrl",
             placement: "right",
-            children: /* @__PURE__ */ u(X, {
-              disabled: k,
-              icon: /* @__PURE__ */ u(he, {}),
-              className: x ? "active" : "",
+            children: /* @__PURE__ */ l(Z, {
+              disabled: x,
+              icon: /* @__PURE__ */ l(ge, {}),
+              className: p ? "active" : "",
               onClick: () => {
-                P(!x);
+                E(!p);
               }
             })
           })]
         })
       })
-    }), /* @__PURE__ */ u("div", {
-      className: pe({
+    }), /* @__PURE__ */ l("div", {
+      className: he({
         "label-maker-wrap": !0,
-        draggable: x
+        draggable: p
       }),
-      onContextMenu: (o) => {
-        o.preventDefault();
+      onContextMenu: (t) => {
+        t.preventDefault();
       },
-      children: /* @__PURE__ */ u("canvas", {
+      children: /* @__PURE__ */ l("canvas", {
         className: "label-maker-canvas",
-        ref: l
+        ref: s
       })
     })]
   });
 };
 export {
-  Re as default
+  Ne as default
 };