@glodon-aiot/dataset-annotation 3.10.0-alpha.21 → 3.10.0-alpha.22

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

@@ -1,65 +1,83 @@
-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 = ({
+import { useCallback as Q, useEffect as te } from "react";
+import { fabric as j } from "fabric";
+import { TEMP_RECT_FILL_COLOR as V, RECT_STROKE_COLOR as U, TEMP_RECT_STROKE_DASH_ARRAY as v, TRANSPARENT_FILL as oe, REGION_NAME_PREFIX as re, BASE_STROKE_WIDTH as a } from "../../constants.mjs";
+const ne = ({
   canvas: e,
   drawingMode: x,
-  draggable: U,
-  setDrawingMode: H,
-  canvasToImageCoords: $,
+  draggable: H,
+  setDrawingMode: $,
+  canvasToImageCoords: G,
   labelDefinitions: y,
-  onChange: j,
-  cropRegionImage: G,
-  updateRegionShapeAndImage: _,
-  performOCRIfNeeded: K,
-  createDeleteControl: B,
-  updateRegionNameText: D,
-  onRegionChange: P,
-  onRegionSelect: T,
-  rectMapRef: h
+  onChange: T,
+  cropRegionImage: K,
+  updateRegionShapeAndImage: L,
+  performOCRIfNeeded: B,
+  createDeleteControl: D,
+  updateRegionNameText: N,
+  onRegionChange: S,
+  onRegionSelect: w,
+  rectMapRef: h,
+  textLayersMapRef: z
 }) => {
-  const M = V(() => {
+  const X = Q(() => {
+    const Y = /* @__PURE__ */ new Set();
+    return z.current.forEach((r) => {
+      r.forEach((l) => {
+        Y.add(l);
+      });
+    }), Y;
+  }, [z]), R = Q(() => {
     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 te(() => {
+    if (!e || !x || H) {
+      if (R(), e && !x) {
+        const o = e.getActiveObject();
+        e.selection = !1, e.skipTargetFind = !1;
+        const n = X();
+        e.getObjects().forEach((t) => {
+          t instanceof j.Rect && n.has(t) ? t.set({
+            evented: !0,
+            selectable: !1,
+            lockMovementX: !0,
+            lockMovementY: !0,
+            lockScalingX: !0,
+            lockScalingY: !0,
+            lockRotation: !0
+          }) : (t.set("evented", !0), t.set("selectable", !0));
+        }), o && e.getObjects().includes(o) && (e.setActiveObject(o), 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);
+    R(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((o) => {
+      o.set("evented", !1), o.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)
+    let r = -1, l = -1, d = 0, m = 0, f = null;
+    const q = (o) => {
+      e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), r = -1, l = -1, d = 0, m = 0;
+      const t = e.getPointer(o.e);
+      l = t.x, r = t.y, e.skipTargetFind = !0;
+    }, P = (o) => {
+      if (l === -1 || r === -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)
+      const n = e.getPointer(o.e);
+      let t = n.x, c = n.y;
+      if (d = Math.abs(t - l), m = Math.abs(c - r), d === 0 || m === 0)
         return;
-      let g = i > d ? d : i, p = l > s ? s : l, n = c, b = m;
+      let g = r > c ? c : r, C = l > t ? t : l, u = d, k = m;
       f && e.remove(f);
-      const A = e.getZoom(), C = Z / A;
-      f = new X.Rect({
-        left: p,
+      const A = e.getZoom(), p = a / A;
+      f = new j.Rect({
+        left: C,
         top: g,
-        width: n,
-        height: b,
-        fill: I,
-        stroke: Y,
-        strokeWidth: C,
+        width: u,
+        height: k,
+        fill: V,
+        stroke: U,
+        strokeWidth: p,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
-        strokeDashArray: J,
+        strokeDashArray: v,
         selectable: !1,
         evented: !1,
         objectCaching: !1,
@@ -67,28 +85,28 @@ const le = ({
         statefullCache: !1,
         noScaleCache: !1
       }), e.add(f), e.renderAll();
-    }, F = (t) => {
-      if (l === -1 || i === -1) {
-        i = -1, l = -1;
+    }, W = (o) => {
+      if (l === -1 || r === -1) {
+        r = -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;
+      const n = e.getPointer(o.e);
+      let t = n.x, c = n.y;
+      if (d = Math.abs(t - l), m = Math.abs(c - r), d === 0 || m === 0) {
+        f && (e.remove(f), e.renderAll()), r = -1, l = -1;
         return;
       }
-      let g = i > d ? d : i, p = l > s ? s : l, n = c, b = m;
+      let g = r > c ? c : r, C = l > t ? t : l, u = d, k = 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,
+      const A = G(C, g), p = u, F = k, E = e.getZoom(), b = a / E, s = new j.Rect({
+        left: C,
         top: g,
-        width: n,
-        height: b,
-        fill: v,
+        width: u,
+        height: k,
+        fill: oe,
         // 无填充色
-        stroke: Y,
-        strokeWidth: k,
+        stroke: U,
+        strokeWidth: b,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
         selectable: !0,
@@ -104,90 +122,90 @@ const le = ({
         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] = "";
+      e.add(s), s.controls.deleteControl = D();
+      const Z = h.current.size, _ = {};
+      y == null || y.forEach((i) => {
+        _[i.id] = "";
       });
-      const w = {
+      const M = {
         id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: `${ee}${S + 1}`,
+        name: `${re}${Z + 1}`,
         // 设置名称：区域+（索引+1）
         shape: {
           name: "rect",
           x: Math.max(0, A.x),
           y: Math.max(0, A.y),
-          width: C,
-          height: R
+          width: p,
+          height: F
         },
-        content: L
+        content: _
       };
-      if (h.current.set(o, w), D(o, w), _(o), P) {
-        const r = h.current.get(o);
-        r && P(r, "create");
+      if (h.current.set(s, M), N(s, M), L(s), S) {
+        const i = h.current.get(s);
+        i && S(i, "create");
       }
-      G(w).then((r) => {
-        if (r) {
-          const O = h.current.get(o);
+      K(M).then((i) => {
+        if (i) {
+          const O = h.current.get(s);
           if (O) {
-            if (O.image = r, delete O.textLayouts, j) {
-              const Q = Array.from(h.current.values());
-              j(Q);
+            if (O.image = i, delete O.textLayouts, T) {
+              const ee = Array.from(h.current.values());
+              T(ee);
             }
-            K(O, "create");
+            B(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);
+      }).catch((i) => {
+        console.error("Failed to crop region image:", i);
+      }), e.setActiveObject(s), e.renderAll(), setTimeout(() => {
+        if (w) {
+          const i = h.current.get(s);
+          i && w(i);
         }
         setTimeout(() => {
-          if (e && o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll(), T)) {
-            const r = h.current.get(o);
-            r && T(r);
+          if (e && s && e.getObjects().includes(s) && (e.setActiveObject(s), e.renderAll(), w)) {
+            const i = h.current.get(s);
+            i && w(i);
           }
         }, 0);
-      }, 0), o.on("modified", () => {
-        _(o);
-      }), o.on("moved", () => {
-        _(o);
+      }, 0), s.on("modified", () => {
+        L(s);
+      }), s.on("moved", () => {
+        L(s);
       }), setTimeout(() => {
-        if (j) {
-          const r = Array.from(h.current.values());
-          j(r);
+        if (T) {
+          const i = Array.from(h.current.values());
+          T(i);
         }
-      }, 0), i = -1, l = -1, e.selection = !1, H(!1);
-    }, z = (t) => {
-      if (l === -1 || i === -1)
+      }, 0), r = -1, l = -1, e.selection = !1, $(!1);
+    }, I = (o) => {
+      if (l === -1 || r === -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
+      const t = e.getElement().getBoundingClientRect(), c = o.clientX, g = o.clientY;
+      if (c >= t.left && c <= t.right && g >= t.top && g <= t.bottom) {
+        const u = e.getPointer(o);
+        P({
+          e: o,
+          pointer: u
         });
       } 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)
+        const u = e.getZoom(), k = e.viewportTransform ? e.viewportTransform[4] / u : 0, A = e.viewportTransform ? e.viewportTransform[5] / u : 0, p = e.getWidth() / u, F = e.getHeight() / u;
+        let E = (c - t.left) / u - k, b = (g - t.top) / u - A;
+        if (E = Math.max(0, Math.min(E, p)), b = Math.max(0, Math.min(b, F)), d = Math.abs(E - l), m = Math.abs(b - r), d === 0 || m === 0)
           return;
-        let o = i > k ? k : i, S = l > E ? E : l, L = c, w = m;
+        let s = r > b ? b : r, Z = l > E ? E : l, _ = d, M = 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,
+        const i = e.getZoom(), O = a / i;
+        f = new j.Rect({
+          left: Z,
+          top: s,
+          width: _,
+          height: M,
+          fill: V,
+          stroke: U,
           strokeWidth: O,
           strokeUniform: !0,
-          strokeDashArray: J,
+          strokeDashArray: v,
           selectable: !1,
           evented: !1,
           objectCaching: !1,
@@ -196,25 +214,35 @@ const le = ({
         }), 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)
+    e.on("mouse:down", q), e.on("mouse:move", P), e.on("mouse:up", W), document.addEventListener("mousemove", I);
+    const J = (o) => {
+      if (l === -1 || r === -1)
         return;
-      const u = e.getPointer(t);
-      F({
-        e: t,
-        pointer: u
+      const n = e.getPointer(o);
+      W({
+        e: o,
+        pointer: n
       });
     };
-    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);
+    return document.addEventListener("mouseup", J), () => {
+      e.off("mouse:down", q), e.off("mouse:move", P), e.off("mouse:up", W), document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", J), f && (e.remove(f), e.renderAll()), e.skipTargetFind = !1;
+      const o = X();
+      e.getObjects().forEach((n) => {
+        n instanceof j.Rect && o.has(n) ? n.set({
+          evented: !0,
+          selectable: !1,
+          lockMovementX: !0,
+          lockMovementY: !0,
+          lockScalingX: !0,
+          lockScalingY: !0,
+          lockRotation: !0
+        }) : (n.set("evented", !0), n.set("selectable", !0));
       });
     };
-  }, [e, x, U, M, $, j, G, _, K, B, D, P, T, H, h]), {
-    stopDraw: M
+  }, [e, x, H, R, G, T, K, L, B, D, N, S, w, $, h, X]), {
+    stopDraw: R
   };
 };
 export {
-  le as useDrawingMode
+  ne as useDrawingMode
 };

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

@@ -1,43 +1,50 @@
 import { useEffect as g } from "react";
-import { fabric as f } from "fabric";
-import { SELECTED_RECT_FILL_COLOR as m, CONTROL_POINT_COLOR as O, CONTROL_POINT_SIZE as S, TRANSPARENT_FILL as k, BASE_STROKE_WIDTH as E } from "../../constants.mjs";
-const L = ({
-  canvas: t,
-  onRegionSelect: r,
-  createDeleteControl: c,
-  textLayersMapRef: d,
-  rectMapRef: i
+import { fabric as u } from "fabric";
+import { SELECTED_RECT_FILL_COLOR as L, CONTROL_POINT_COLOR as R, CONTROL_POINT_SIZE as S, TRANSPARENT_FILL as E, BASE_STROKE_WIDTH as A } from "../../constants.mjs";
+const j = ({
+  canvas: e,
+  onRegionSelect: o,
+  createDeleteControl: n,
+  textLayersMapRef: a,
+  rectMapRef: s
 }) => {
   g(() => {
-    if (!t)
+    if (!e)
       return;
-    const s = () => {
-      const e = /* @__PURE__ */ new Set();
-      d.current.forEach((o) => {
-        o.forEach((l) => {
-          e.add(l);
+    const i = () => {
+      const t = /* @__PURE__ */ new Set();
+      return a.current.forEach((r) => {
+        r.forEach((l) => {
+          t.add(l);
         });
-      }), t.getObjects().forEach((o) => {
-        o instanceof f.Rect && !e.has(o) && o.set({
-          fill: k
+      }), t;
+    }, f = () => {
+      const t = i();
+      e.getObjects().forEach((r) => {
+        r instanceof u.Rect && !t.has(r) && r.set({
+          fill: E
           // 移除填充色
         });
       });
-    }, a = () => {
-      s();
-      const e = t.getActiveObject();
-      if (e && e instanceof f.Rect) {
-        const o = t.getZoom(), l = E / o;
-        e.set({
+    }, h = () => {
+      f();
+      const t = e.getActiveObject();
+      if (t && t instanceof u.Rect) {
+        if (i().has(t)) {
+          e.discardActiveObject(), e.renderAll();
+          return;
+        }
+        const l = e.getZoom(), d = A / l;
+        t.set({
           hasRotatingPoint: !1,
           lockRotation: !0,
           lockUniScaling: !1,
           // 允许非等比缩放，控制点跟随鼠标
-          fill: m,
+          fill: L,
           // 选中时添加填充色
           strokeUniform: !0,
           // 确保边框宽度不受缩放影响
-          strokeWidth: l,
+          strokeWidth: d,
           // 确保边框宽度一致
           objectCaching: !1,
           // 禁用缓存，避免缩放时边框变虚
@@ -45,31 +52,35 @@ const L = ({
           noScaleCache: !1,
           cornerStyle: "circle",
           // 设置控制点为圆形
-          cornerColor: O,
+          cornerColor: R,
           // 设置控制点为紫色（填充色）
           cornerSize: S,
           // 设置控制点大小（默认12，这里设置为6使其更小）
           transparentCorners: !1
           // 不透明，显示填充颜色
-        }), e.controls && e.controls.mtr && delete e.controls.mtr, e.controls.deleteControl || (e.controls.deleteControl = c()), t.renderAll();
-        const n = i.current.get(e);
-        n && r && r(n);
+        }), t.controls && t.controls.mtr && delete t.controls.mtr, t.controls.deleteControl || (t.controls.deleteControl = n()), e.renderAll();
+        const c = s.current.get(t);
+        c && o && o(c);
       }
-    }, u = () => {
-      s();
-      const e = t.getActiveObject();
-      if (e && e instanceof f.Rect) {
-        const o = t.getZoom(), l = E / o;
-        e.set({
+    }, C = () => {
+      f();
+      const t = e.getActiveObject();
+      if (t && t instanceof u.Rect) {
+        if (i().has(t)) {
+          e.discardActiveObject(), e.renderAll();
+          return;
+        }
+        const l = e.getZoom(), d = A / l;
+        t.set({
           hasRotatingPoint: !1,
           lockRotation: !0,
           lockUniScaling: !1,
           // 允许非等比缩放，控制点跟随鼠标
-          fill: m,
+          fill: L,
           // 选中时添加填充色
           strokeUniform: !0,
           // 确保边框宽度不受缩放影响
-          strokeWidth: l,
+          strokeWidth: d,
           // 确保边框宽度一致
           objectCaching: !1,
           // 禁用缓存，避免缩放时边框变虚
@@ -77,26 +88,26 @@ const L = ({
           noScaleCache: !1,
           cornerStyle: "circle",
           // 设置控制点为圆形
-          cornerColor: O,
+          cornerColor: R,
           // 设置控制点为紫色（填充色）
           cornerSize: S,
           // 设置控制点大小（默认12，这里设置为6使其更小）
           transparentCorners: !1
           // 不透明，显示填充颜色
         });
-        const n = e;
-        n.uniformScaling = !1, e.controls && e.controls.mtr && delete e.controls.mtr, e.controls.deleteControl || (e.controls.deleteControl = c()), t.renderAll();
-        const h = i.current.get(e);
-        h && r && r(h);
+        const c = t;
+        c.uniformScaling = !1, t.controls && t.controls.mtr && delete t.controls.mtr, t.controls.deleteControl || (t.controls.deleteControl = n()), e.renderAll();
+        const m = s.current.get(t);
+        m && o && o(m);
       }
-    }, C = () => {
-      s(), t.renderAll(), r && r(null);
+    }, O = () => {
+      f(), e.renderAll(), o && o(null);
     };
-    return t.on("selection:created", a), t.on("selection:updated", u), t.on("selection:cleared", C), () => {
-      t.off("selection:created", a), t.off("selection:updated", u), t.off("selection:cleared", C);
+    return e.on("selection:created", h), e.on("selection:updated", C), e.on("selection:cleared", O), () => {
+      e.off("selection:created", h), e.off("selection:updated", C), e.off("selection:cleared", O);
     };
-  }, [t, r, c, d, i]);
+  }, [e, o, n, a, s]);
 };
 export {
-  L as useRegionSelection
+  j as useRegionSelection
 };