@glodon-aiot/dataset-annotation 3.9.0-beta.9 → 3.10.0-alpha.10

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useCanvasZoom.mjs

@@ -0,0 +1,42 @@
+var l = Math.pow;
+import { useCallback as h, useEffect as C } from "react";
+import { ZOOM_FACTOR as M, MAX_ZOOM as n, MIN_ZOOM as O } from "../../constants.mjs";
+const w = ({
+  canvas: t,
+  setScale: m,
+  isZoomingRef: f
+}) => {
+  const u = h((r, o) => {
+    if (!t)
+      return;
+    o || (o = {
+      x: t.getCenter().left,
+      y: t.getCenter().top
+    });
+    let e = t.getZoom();
+    e *= l(M, r), e > n && (e = n), e < O && (e = O), f.current = !0, t.zoomToPoint(o, e), m(e), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        f.current = !1;
+      });
+    });
+  }, [t, m, f]);
+  return C(() => {
+    if (!t)
+      return;
+    const r = (o) => {
+      const e = o.e, i = e.deltaY;
+      u(i, {
+        x: e.offsetX,
+        y: e.offsetY
+      });
+    };
+    return t.on("mouse:wheel", r), () => {
+      t.off("mouse:wheel", r);
+    };
+  }, [t, u]), {
+    zoom: u
+  };
+};
+export {
+  w as useCanvasZoom
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useCropRegionImage.mjs

@@ -0,0 +1,55 @@
+var f = (r, p, n) => new Promise((i, a) => {
+  var t = (o) => {
+    try {
+      c(n.next(o));
+    } catch (s) {
+      a(s);
+    }
+  }, e = (o) => {
+    try {
+      c(n.throw(o));
+    } catch (s) {
+      a(s);
+    }
+  }, c = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(t, e);
+  c((n = n.apply(r, p)).next());
+});
+import { useCallback as l } from "react";
+import { IMAGE_EXPORT_FORMAT as A } from "../../constants.mjs";
+const _ = (r) => l((n) => f(void 0, null, function* () {
+  if (r)
+    return new Promise((i, a) => {
+      const t = new Image();
+      t.crossOrigin = "anonymous", t.onload = () => {
+        try {
+          const {
+            x: e,
+            y: c,
+            width: o,
+            height: s
+          } = n.shape, x = e, M = e + o, w = c, I = c + s, T = 0, y = t.width, E = 0, L = t.height, d = Math.max(T, x), v = Math.min(y, M), u = Math.max(E, w), B = Math.min(L, I), m = Math.max(0, v - d), g = Math.max(0, B - u);
+          if (m <= 0 || g <= 0) {
+            i(void 0);
+            return;
+          }
+          const C = d, O = u, h = document.createElement("canvas");
+          h.width = m, h.height = g;
+          const R = h.getContext("2d");
+          if (!R) {
+            i(void 0);
+            return;
+          }
+          R.drawImage(t, C, O, m, g, 0, 0, m, g);
+          const b = h.toDataURL(A);
+          i(b);
+        } catch (e) {
+          a(e);
+        }
+      }, t.onerror = () => {
+        a(new Error("Failed to load image"));
+      }, t.src = r;
+    });
+}), [r]);
+export {
+  _ as useCropRegionImage
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDeleteControl.mjs

@@ -0,0 +1,51 @@
+import { useRef as E, useEffect as I, useCallback as g } from "react";
+import { fabric as f } from "fabric";
+import { DELETE_CONTROL_OFFSET_X as O, DELETE_CONTROL_OFFSET_Y as C, DELETE_ICON_SIZE as T } from "../../constants.mjs";
+import _ from "../icons/del.png.mjs";
+const S = ({
+  performDelete: a
+}) => {
+  const i = (e) => !(!e.complete || e.naturalWidth === 0), n = E(null);
+  return I(() => {
+    if (!n.current) {
+      const e = document.createElement("img");
+      e.src = _, n.current = e;
+    }
+  }, []), {
+    createDeleteControl: g(() => {
+      const e = T, r = n.current, d = (t, o, s, D, l) => {
+        if (!r)
+          return;
+        const c = () => {
+          t.save(), t.translate(o, s), t.rotate(f.util.degreesToRadians(l.angle || 0)), t.drawImage(r, -e / 2, -e / 2, e, e), t.restore();
+        };
+        i(r) ? c() : r.onload = () => {
+          c();
+          const u = l.canvas;
+          u && u.renderAll();
+        };
+      }, m = (t, o) => {
+        const s = o.target;
+        return a(s), !1;
+      };
+      return new f.Control({
+        x: 0.5,
+        // 右侧（0 = 左边，0.5 = 中间，1 = 右边）
+        y: -0.5,
+        // 顶部（0 = 顶部，0.5 = 中间，1 = 底部）
+        offsetX: O,
+        // 向右偏移，让按钮更靠近矩形边缘
+        offsetY: C,
+        // 向上偏移，让按钮更靠近矩形边缘
+        cursorStyle: "pointer",
+        mouseUpHandler: m,
+        render: d,
+        sizeX: e,
+        sizeY: e
+      });
+    }, [a])
+  };
+};
+export {
+  S as useDeleteControl
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDeleteRegion.mjs

@@ -0,0 +1,47 @@
+import { useRef as t, useCallback as A } from "react";
+import { Modal as L } from "antd";
+import { DELETE_MODAL_TITLE as O, DELETE_MODAL_CONTENT as c, DELETE_MODAL_OK_TEXT as k, DELETE_MODAL_CANCEL_TEXT as C } from "../../constants.mjs";
+const v = ({
+  canvas: r,
+  onRegionChange: u,
+  updateRegionNames: T,
+  rectMapRef: f,
+  textLayersMapRef: n,
+  textLayoutContentMapRef: D,
+  regionNameTextMapRef: E,
+  ocrLoadingIconMapRef: m
+}) => {
+  const o = t(!1);
+  return {
+    performDelete: A((e) => {
+      if (!r || o.current)
+        return;
+      const d = f.current.get(e);
+      d && (o.current = !0, L.confirm({
+        title: O,
+        content: c,
+        okText: k,
+        cancelText: C,
+        onOk: () => {
+          const i = n.current.get(e);
+          i && (i.forEach((l) => {
+            l.off("mousedown"), l.off("mouseover"), l.off("mouseout"), D.current.delete(l), r.remove(l);
+          }), n.current.delete(e));
+          const s = E.current.get(e);
+          s && (e.off("moved"), e.off("modified"), r.remove(s), E.current.delete(e));
+          const _ = m.current.get(e);
+          _ && (r.remove(_), m.current.delete(e)), r.remove(e), f.current.delete(e), T(), u && u(d, "delete"), r.renderAll(), o.current = !1;
+        },
+        onCancel: () => {
+          o.current = !1;
+        },
+        afterClose: () => {
+          o.current = !1;
+        }
+      }));
+    }, [r, u, T, f, n, D, E, m])
+  };
+};
+export {
+  v as useDeleteRegion
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useDrawingMode.mjs

@@ -0,0 +1,220 @@
+import { useCallback as V, useEffect as a } from "react";
+import { fabric as X } from "fabric";
+import { TEMP_RECT_FILL_COLOR as I, RECT_STROKE_COLOR as Y, TEMP_RECT_STROKE_DASH_ARRAY as J, TRANSPARENT_FILL as v, REGION_NAME_PREFIX as ee, BASE_STROKE_WIDTH as Z } from "../../constants.mjs";
+const le = ({
+  canvas: e,
+  drawingMode: x,
+  draggable: U,
+  setDrawingMode: H,
+  canvasToImageCoords: $,
+  labelDefinitions: y,
+  onChange: j,
+  cropRegionImage: G,
+  updateRegionShapeAndImage: _,
+  performOCRIfNeeded: K,
+  createDeleteControl: B,
+  updateRegionNameText: D,
+  onRegionChange: P,
+  onRegionSelect: T,
+  rectMapRef: h
+}) => {
+  const M = V(() => {
+    e && (e.skipTargetFind = !1);
+  }, [e]);
+  return a(() => {
+    if (!e || !x || U) {
+      if (M(), e && !x) {
+        const t = e.getActiveObject();
+        e.selection = !1, e.skipTargetFind = !1, e.getObjects().forEach((u) => {
+          u.set("evented", !0), u.set("selectable", !0);
+        }), t && e.getObjects().includes(t) && (e.setActiveObject(t), e.renderAll()), e.defaultCursor = "default", e.setCursor("default");
+      }
+      return;
+    }
+    M(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((t) => {
+      t.set("evented", !1), t.set("selectable", !1);
+    }), e.defaultCursor = "crosshair", e.setCursor("crosshair");
+    let i = -1, l = -1, c = 0, m = 0, f = null;
+    const N = (t) => {
+      e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), i = -1, l = -1, c = 0, m = 0;
+      const s = e.getPointer(t.e);
+      l = s.x, i = s.y, e.skipTargetFind = !0;
+    }, W = (t) => {
+      if (l === -1 || i === -1)
+        return;
+      const u = e.getPointer(t.e);
+      let s = u.x, d = u.y;
+      if (c = Math.abs(s - l), m = Math.abs(d - i), c === 0 || m === 0)
+        return;
+      let g = i > d ? d : i, p = l > s ? s : l, n = c, b = m;
+      f && e.remove(f);
+      const A = e.getZoom(), C = Z / A;
+      f = new X.Rect({
+        left: p,
+        top: g,
+        width: n,
+        height: b,
+        fill: I,
+        stroke: Y,
+        strokeWidth: C,
+        strokeUniform: !0,
+        // 边框宽度不受缩放影响
+        strokeDashArray: J,
+        selectable: !1,
+        evented: !1,
+        objectCaching: !1,
+        // 禁用缓存，避免缩放时边框变虚
+        statefullCache: !1,
+        noScaleCache: !1
+      }), e.add(f), e.renderAll();
+    }, F = (t) => {
+      if (l === -1 || i === -1) {
+        i = -1, l = -1;
+        return;
+      }
+      const u = e.getPointer(t.e);
+      let s = u.x, d = u.y;
+      if (c = Math.abs(s - l), m = Math.abs(d - i), c === 0 || m === 0) {
+        f && (e.remove(f), e.renderAll()), i = -1, l = -1;
+        return;
+      }
+      let g = i > d ? d : i, p = l > s ? s : l, n = c, b = m;
+      f && (e.remove(f), f = null);
+      const A = $(p, g), C = n, R = b, E = e.getZoom(), k = Z / E, o = new X.Rect({
+        left: p,
+        top: g,
+        width: n,
+        height: b,
+        fill: v,
+        // 无填充色
+        stroke: Y,
+        strokeWidth: k,
+        strokeUniform: !0,
+        // 边框宽度不受缩放影响
+        selectable: !0,
+        evented: !0,
+        hasRotatingPoint: !1,
+        // 隐藏旋转点
+        lockRotation: !0,
+        // 锁定旋转
+        lockUniScaling: !1,
+        // 允许非等比缩放，控制点跟随鼠标
+        objectCaching: !1,
+        // 禁用缓存，避免缩放时边框变虚
+        statefullCache: !1,
+        noScaleCache: !1
+      });
+      e.add(o), o.controls.deleteControl = B();
+      const S = h.current.size, L = {};
+      y == null || y.forEach((r) => {
+        L[r.id] = "";
+      });
+      const w = {
+        id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        name: `${ee}${S + 1}`,
+        // 设置名称：区域+（索引+1）
+        shape: {
+          name: "rect",
+          x: Math.max(0, A.x),
+          y: Math.max(0, A.y),
+          width: C,
+          height: R
+        },
+        content: L
+      };
+      if (h.current.set(o, w), D(o, w), _(o), P) {
+        const r = h.current.get(o);
+        r && P(r, "create");
+      }
+      G(w).then((r) => {
+        if (r) {
+          const O = h.current.get(o);
+          if (O) {
+            if (O.image = r, delete O.textLayouts, j) {
+              const Q = Array.from(h.current.values());
+              j(Q);
+            }
+            K(O, "create");
+          }
+        }
+      }).catch((r) => {
+        console.error("Failed to crop region image:", r);
+      }), e.setActiveObject(o), e.renderAll(), setTimeout(() => {
+        if (T) {
+          const r = h.current.get(o);
+          r && T(r);
+        }
+        setTimeout(() => {
+          if (e && o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll(), T)) {
+            const r = h.current.get(o);
+            r && T(r);
+          }
+        }, 0);
+      }, 0), o.on("modified", () => {
+        _(o);
+      }), o.on("moved", () => {
+        _(o);
+      }), setTimeout(() => {
+        if (j) {
+          const r = Array.from(h.current.values());
+          j(r);
+        }
+      }, 0), i = -1, l = -1, e.selection = !1, H(!1);
+    }, z = (t) => {
+      if (l === -1 || i === -1)
+        return;
+      const s = e.getElement().getBoundingClientRect(), d = t.clientX, g = t.clientY;
+      if (d >= s.left && d <= s.right && g >= s.top && g <= s.bottom) {
+        const n = e.getPointer(t);
+        W({
+          e: t,
+          pointer: n
+        });
+      } else {
+        const n = e.getZoom(), b = e.viewportTransform ? e.viewportTransform[4] / n : 0, A = e.viewportTransform ? e.viewportTransform[5] / n : 0, C = e.getWidth() / n, R = e.getHeight() / n;
+        let E = (d - s.left) / n - b, k = (g - s.top) / n - A;
+        if (E = Math.max(0, Math.min(E, C)), k = Math.max(0, Math.min(k, R)), c = Math.abs(E - l), m = Math.abs(k - i), c === 0 || m === 0)
+          return;
+        let o = i > k ? k : i, S = l > E ? E : l, L = c, w = m;
+        f && e.remove(f);
+        const r = e.getZoom(), O = Z / r;
+        f = new X.Rect({
+          left: S,
+          top: o,
+          width: L,
+          height: w,
+          fill: I,
+          stroke: Y,
+          strokeWidth: O,
+          strokeUniform: !0,
+          strokeDashArray: J,
+          selectable: !1,
+          evented: !1,
+          objectCaching: !1,
+          statefullCache: !1,
+          noScaleCache: !1
+        }), e.add(f), e.renderAll();
+      }
+    };
+    e.on("mouse:down", N), e.on("mouse:move", W), e.on("mouse:up", F), document.addEventListener("mousemove", z);
+    const q = (t) => {
+      if (l === -1 || i === -1)
+        return;
+      const u = e.getPointer(t);
+      F({
+        e: t,
+        pointer: u
+      });
+    };
+    return document.addEventListener("mouseup", q), () => {
+      e.off("mouse:down", N), e.off("mouse:move", W), e.off("mouse:up", F), document.removeEventListener("mousemove", z), document.removeEventListener("mouseup", q), f && (e.remove(f), e.renderAll()), e.skipTargetFind = !1, e.getObjects().forEach((t) => {
+        t.set("evented", !0), t.set("selectable", !0);
+      });
+    };
+  }, [e, x, U, M, $, j, G, _, K, B, D, P, T, H, h]), {
+    stopDraw: M
+  };
+};
+export {
+  le as useDrawingMode
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRLoadingIcon.mjs

@@ -0,0 +1,106 @@
+import { useRef as h, useCallback as W, useEffect as X } from "react";
+import { fabric as l } from "fabric";
+import { OCR_SCAN_LINE_GLOW_MULTIPLIER as Y, OCR_SCAN_LINE_GLOW_COLOR as k, OCR_SCAN_LINE_BRIGHT_COLOR as G, OCR_SCAN_LINE_CORE_POSITION_MULTIPLIER as P, OCR_SCAN_LINE_CORE_HEIGHT_MULTIPLIER as Z, OCR_SCAN_LINE_CORE_COLOR as j, OCR_SCAN_LINE_BASE_HEIGHT as B, OCR_SCAN_ANIMATION_SPEED as F } from "../../constants.mjs";
+const v = (t) => {
+  const o = h(/* @__PURE__ */ new Map()), c = h(null), L = W((e, U, C) => {
+    if (!t)
+      return;
+    const _ = o.current.get(e);
+    if (_ && (t.remove(_), o.current.delete(e)), !C)
+      return;
+    const s = t.getZoom(), O = e.left || 0, p = e.top || 0, I = e.getScaledWidth();
+    e.getScaledHeight();
+    const i = B, a = I * s, m = new l.Rect({
+      left: 0,
+      top: 0,
+      width: a,
+      height: i * Y,
+      // 光晕层更宽
+      fill: k,
+      // 紫色光晕
+      selectable: !1,
+      evented: !1,
+      originX: "left",
+      originY: "top"
+    }), E = new l.Rect({
+      left: 0,
+      top: i,
+      width: a,
+      height: i,
+      fill: G,
+      // 紫色较亮层
+      selectable: !1,
+      evented: !1,
+      originX: "left",
+      originY: "top"
+    }), S = new l.Rect({
+      left: 0,
+      top: i * P,
+      width: a,
+      height: i * Z,
+      fill: j,
+      // 紫色核心线条
+      selectable: !1,
+      evented: !1,
+      originX: "left",
+      originY: "top"
+    }), r = new l.Group([m, E, S], {
+      left: O,
+      top: p,
+      // 初始位置在顶部
+      originX: "left",
+      originY: "top",
+      selectable: !1,
+      evented: !1,
+      lockMovementX: !0,
+      lockMovementY: !0,
+      lockScalingX: !1,
+      lockScalingY: !1,
+      lockRotation: !0,
+      hasControls: !1,
+      hasBorders: !1,
+      objectCaching: !1,
+      statefullCache: !1,
+      noScaleCache: !1,
+      scaleX: 1 / s,
+      // 反向缩放，抵消画布缩放，保持固定视觉粗细
+      scaleY: 1 / s
+      // 反向缩放，抵消画布缩放，保持固定视觉粗细
+    });
+    t.add(r), o.current.set(e, r);
+    let n = 0, f = 1;
+    const N = F, d = () => {
+      if (!o.current.has(e) || !t)
+        return;
+      const A = e.left || 0, b = e.top || 0, H = e.getScaledWidth(), T = e.getScaledHeight(), g = t.getZoom();
+      n += N * f, n >= 1 ? (n = 1, f = -1) : n <= 0 && (n = 0, f = 1);
+      const w = b + n * T;
+      r.set({
+        left: A,
+        top: w,
+        scaleX: 1 / g,
+        // 反向缩放，抵消画布缩放，保持固定视觉粗细
+        scaleY: 1 / g
+        // 反向缩放，抵消画布缩放，保持固定视觉粗细
+      });
+      const u = r.getObjects();
+      if (u && u.length > 0) {
+        const M = H * g;
+        u.forEach((R) => {
+          R instanceof l.Rect && R.set("width", M);
+        });
+      }
+      t.renderAll(), c.current = requestAnimationFrame(d);
+    };
+    d();
+  }, [t]);
+  return X(() => () => {
+    c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
+  }, []), {
+    updateOCRLoadingIcon: L,
+    ocrLoadingIconMapRef: o
+  };
+};
+export {
+  v as useOCRLoadingIcon
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useOCRRecognition.mjs

@@ -0,0 +1,68 @@
+var N = (i, l, s) => new Promise((f, o) => {
+  var c = (t) => {
+    try {
+      d(s.next(t));
+    } catch (n) {
+      o(n);
+    }
+  }, m = (t) => {
+    try {
+      d(s.throw(t));
+    } catch (n) {
+      o(n);
+    }
+  }, d = (t) => t.done ? f(t.value) : Promise.resolve(t.value).then(c, m);
+  d((s = s.apply(i, l)).next());
+});
+import { useRef as k, useCallback as R } from "react";
+const G = ({
+  ocrRecognize: i,
+  onChange: l,
+  updateTextLayers: s,
+  canvas: f,
+  updateOCRLoadingIcon: o,
+  rectMapRef: c,
+  textLayersMapRef: m,
+  textLayoutContentMapRef: d
+}) => {
+  const t = k(/* @__PURE__ */ new Set()), n = k(/* @__PURE__ */ new Map());
+  return {
+    performOCRIfNeeded: R((e, a) => N(void 0, null, function* () {
+      var x;
+      if (a !== "create" && a !== "update" || !i || !e.image)
+        return;
+      const u = (x = Array.from(c.current.entries()).find(([, r]) => r.id === e.id)) == null ? void 0 : x[0];
+      if (!u)
+        return;
+      const w = m.current.get(u);
+      w && f && (w.forEach((r) => {
+        r.off("mousedown"), r.off("mouseover"), r.off("mouseout"), d.current.delete(r), f.remove(r);
+      }), m.current.delete(u), f.renderAll());
+      const S = c.current.get(u);
+      S && S.textLayouts && delete S.textLayouts;
+      const q = (n.current.get(e.id) || 0) + 1;
+      n.current.set(e.id, q), t.current.add(e.id);
+      const A = c.current.get(u);
+      A && o(u, A, !0);
+      try {
+        const r = yield i(e.image);
+        if (n.current.get(e.id) !== q)
+          return;
+        t.current.delete(e.id), o(u, e, !1);
+        const y = c.current.get(u);
+        if (y && n.current.get(e.id) === q && (y.textLayouts = r, s(u, y), l)) {
+          const F = Array.from(c.current.values());
+          l(F);
+        }
+      } catch (r) {
+        if (n.current.get(e.id) !== q)
+          return;
+        t.current.delete(e.id), o(u, e, !1), console.error("Failed to perform OCR recognition:", r);
+      }
+    }), [i, l, s, f, o, c, m, d]),
+    ocrRecognizingRef: t
+  };
+};
+export {
+  G as useOCRRecognition
+};

package/dist/es/components/VLMAnnotation/VLMLabelMaker/hooks/useRegionHover.mjs

@@ -0,0 +1,38 @@
+import { useEffect as m } from "react";
+import { fabric as R } from "fabric";
+import { HOVER_RECT_FILL_COLOR as L, TRANSPARENT_FILL as l } from "../../constants.mjs";
+const x = ({
+  canvas: e,
+  drawingMode: c,
+  draggable: u,
+  textLayersMapRef: n
+}) => {
+  m(() => {
+    if (!e || c || u)
+      return;
+    const f = () => {
+      const o = /* @__PURE__ */ new Set();
+      return n.current.forEach((t) => {
+        t.forEach((r) => {
+          o.add(r);
+        });
+      }), o;
+    }, i = (o) => {
+      const t = o.target;
+      !t || !(t instanceof R.Rect) || f().has(t) || e.getActiveObject() === t || (t.set({
+        fill: L
+      }), e.renderAll());
+    }, s = (o) => {
+      const t = o.target;
+      !t || !(t instanceof R.Rect) || f().has(t) || e.getActiveObject() === t || (t.set({
+        fill: l
+      }), e.renderAll());
+    };
+    return e.on("mouse:over", i), e.on("mouse:out", s), () => {
+      e.off("mouse:over", i), e.off("mouse:out", s);
+    };
+  }, [e, c, u, n]);
+};
+export {
+  x as useRegionHover
+};