@glodon-aiot/dataset-annotation 3.14.0-alpha.32 → 3.14.0-alpha.34

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

@@ -1,51 +1,90 @@
-import { useEffect as E } from "react";
-import { fabric as a } from "fabric";
-import { SELECTED_RECT_FILL_COLOR as L, CONTROL_POINT_COLOR as g, CONTROL_POINT_SIZE as A, TRANSPARENT_FILL as k, BASE_STROKE_WIDTH as R } from "../../constants.mjs";
-const b = ({
-  canvas: e,
-  onRegionSelect: o,
-  createDeleteControl: n,
-  createOCRControl: s,
-  textLayersMapRef: h,
-  rectMapRef: i
+import { useEffect as W } from "react";
+import { fabric as f } from "fabric";
+import { SELECTED_RECT_FILL_COLOR as k, RECT_STROKE_COLOR as X, CONTROL_POINT_COLOR as j, CONTROL_POINT_SIZE as N, TRANSPARENT_FILL as Y, BASE_STROKE_WIDTH as F, AI_CONTROL_OFFSET_X as q, AI_CONTROL_OFFSET_Y as z, AI_ICON_SIZE as D } from "../../constants.mjs";
+const G = ({
+  canvas: o,
+  onRegionSelect: l,
+  createDeleteControl: h,
+  createOCRControl: g,
+  textLayersMapRef: O,
+  rectMapRef: y
 }) => {
-  E(() => {
-    if (!e)
+  W(() => {
+    if (!o)
       return;
-    const f = () => {
+    const C = () => {
       const t = /* @__PURE__ */ new Set();
-      return h.current.forEach((r) => {
-        r.forEach((l) => {
-          t.add(l);
+      return O.current.forEach((n) => {
+        n.forEach((c) => {
+          t.add(c);
         });
       }), t;
-    }, d = () => {
-      const t = f();
-      e.getObjects().forEach((r) => {
-        r instanceof a.Rect && !t.has(r) && r.set({
-          fill: k
+    }, m = () => {
+      const t = C();
+      o.getObjects().forEach((n) => {
+        n instanceof f.Rect && !t.has(n) && n.set({
+          fill: Y
           // 移除填充色
         });
       });
-    }, C = () => {
-      d();
-      const t = e.getActiveObject();
-      if (t && t instanceof a.Rect) {
-        if (f().has(t)) {
-          e.discardActiveObject(), e.renderAll();
+    }, S = (t) => {
+      const n = t.getCoords();
+      if (!n || n.length < 4)
+        return null;
+      const c = q, u = z + D + 4, a = n[0], i = n[1], d = n[2], s = i, e = {
+        x: d.x - i.x,
+        y: d.y - i.y
+      }, r = {
+        x: a.x - i.x,
+        y: a.y - i.y
+      }, p = Math.sqrt(e.x * e.x + e.y * e.y), x = Math.sqrt(r.x * r.x + r.y * r.y), T = p > 1e-3 ? {
+        x: e.x / p,
+        y: e.y / p
+      } : {
+        x: 1,
+        y: 0
+      }, L = x > 1e-3 ? {
+        x: r.x / x,
+        y: r.y / x
+      } : {
+        x: 0,
+        y: -1
+      }, b = s.x + T.x * c - L.x * u, E = s.y + T.y * c - L.y * u, _ = o.viewportTransform;
+      if (!_)
+        return null;
+      const U = new f.Point(b, E), P = f.util.transformPoint(U, _), Z = o.getElement().getBoundingClientRect(), w = Z.left + P.x, B = Z.top + P.y;
+      return {
+        canvasCoords: {
+          x: b,
+          y: E
+        },
+        screenCoords: {
+          x: w,
+          y: B
+        }
+      };
+    }, R = () => {
+      var n, c;
+      m();
+      const t = o.getActiveObject();
+      if (t && t instanceof f.Rect) {
+        if (C().has(t)) {
+          o.discardActiveObject(), o.renderAll();
           return;
         }
-        const l = e.getZoom(), u = R / l;
+        const a = o.getZoom(), i = F / a;
         t.set({
           hasRotatingPoint: !1,
           lockRotation: !0,
           lockUniScaling: !1,
           // 允许非等比缩放，控制点跟随鼠标
-          fill: L,
+          fill: k,
           // 选中时添加填充色
+          stroke: X,
+          // 选中时取消高亮，使用普通边框颜色
           strokeUniform: !0,
           // 确保边框宽度不受缩放影响
-          strokeWidth: u,
+          strokeWidth: i,
           // 确保边框宽度一致
           objectCaching: !1,
           // 禁用缓存，避免缩放时边框变虚
@@ -53,25 +92,57 @@ const b = ({
           noScaleCache: !1,
           cornerStyle: "circle",
           // 设置控制点为圆形
-          cornerColor: g,
+          cornerColor: j,
           // 设置控制点为紫色（填充色）
-          cornerSize: A,
+          cornerSize: N,
           // 设置控制点大小（默认12，这里设置为6使其更小）
           transparentCorners: !1
           // 不透明，显示填充颜色
-        }), t.controls && t.controls.mtr && delete t.controls.mtr, t.controls.deleteControl || (t.controls.deleteControl = n()), t.controls.ocrControl || (t.controls.ocrControl = s()), e.renderAll();
-        const c = i.current.get(t);
-        c && o && o(c);
+        }), t.controls && t.controls.mtr && delete t.controls.mtr, t.controls.deleteControl || (t.controls.deleteControl = h()), t.controls.ocrControl || (t.controls.ocrControl = g()), o.renderAll();
+        const d = S(t), s = y.current.get(t);
+        fetch("http://127.0.0.1:7243/ingest/f03da105-26de-4a72-9802-7a749afbd310", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            location: "useRegionSelection.ts:handleSelectionCreated",
+            message: "AI button position when region selected",
+            data: {
+              regionId: s == null ? void 0 : s.id,
+              aiButtonPosition: d,
+              rectCoords: (n = t.getCoords()) == null ? void 0 : n.map((e) => ({
+                x: e.x,
+                y: e.y
+              })),
+              canvasZoom: o.getZoom()
+            },
+            timestamp: Date.now(),
+            sessionId: "debug-session",
+            runId: "run1",
+            hypothesisId: "A"
+          })
+        }).catch(() => {
+        }), console.log("[useRegionSelection] Region selected - AI button position:", {
+          regionId: s == null ? void 0 : s.id,
+          aiButtonPosition: d,
+          rectCoords: (c = t.getCoords()) == null ? void 0 : c.map((e) => ({
+            x: e.x,
+            y: e.y
+          })),
+          canvasZoom: o.getZoom()
+        }), s && l && l(s);
       }
-    }, m = () => {
-      d();
-      const t = e.getActiveObject();
-      if (t && t instanceof a.Rect) {
-        if (f().has(t)) {
-          e.discardActiveObject(), e.renderAll();
+    }, I = () => {
+      var n, c;
+      m();
+      const t = o.getActiveObject();
+      if (t && t instanceof f.Rect) {
+        if (C().has(t)) {
+          o.discardActiveObject(), o.renderAll();
           return;
         }
-        const l = e.getZoom(), u = R / l;
+        const a = o.getZoom(), i = F / a;
         t.set({
           hasRotatingPoint: !1,
           lockRotation: !0,
@@ -79,11 +150,11 @@ const b = ({
           // 允许非等比缩放，控制点跟随鼠标
           lockScalingFlip: !0,
           // 禁止缩放时翻转
-          fill: L,
+          fill: k,
           // 选中时添加填充色
           strokeUniform: !0,
           // 确保边框宽度不受缩放影响
-          strokeWidth: u,
+          strokeWidth: i,
           // 确保边框宽度一致
           objectCaching: !1,
           // 禁用缓存，避免缩放时边框变虚
@@ -91,26 +162,57 @@ const b = ({
           noScaleCache: !1,
           cornerStyle: "circle",
           // 设置控制点为圆形
-          cornerColor: g,
+          cornerColor: j,
           // 设置控制点为紫色（填充色）
-          cornerSize: A,
+          cornerSize: N,
           // 设置控制点大小（默认12，这里设置为6使其更小）
           transparentCorners: !1
           // 不透明，显示填充颜色
         });
-        const c = t;
-        c.uniformScaling = !1, t.controls && t.controls.mtr && delete t.controls.mtr, t.controls.deleteControl || (t.controls.deleteControl = n()), t.controls.ocrControl || (t.controls.ocrControl = s()), e.renderAll();
-        const S = i.current.get(t);
-        S && o && o(S);
+        const d = t;
+        d.uniformScaling = !1, t.controls && t.controls.mtr && delete t.controls.mtr, t.controls.deleteControl || (t.controls.deleteControl = h()), t.controls.ocrControl || (t.controls.ocrControl = g()), o.renderAll();
+        const s = S(t), e = y.current.get(t);
+        fetch("http://127.0.0.1:7243/ingest/f03da105-26de-4a72-9802-7a749afbd310", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            location: "useRegionSelection.ts:handleSelectionUpdated",
+            message: "AI button position when region updated",
+            data: {
+              regionId: e == null ? void 0 : e.id,
+              aiButtonPosition: s,
+              rectCoords: (n = t.getCoords()) == null ? void 0 : n.map((r) => ({
+                x: r.x,
+                y: r.y
+              })),
+              canvasZoom: o.getZoom()
+            },
+            timestamp: Date.now(),
+            sessionId: "debug-session",
+            runId: "run1",
+            hypothesisId: "A"
+          })
+        }).catch(() => {
+        }), console.log("[useRegionSelection] Region updated - AI button position:", {
+          regionId: e == null ? void 0 : e.id,
+          aiButtonPosition: s,
+          rectCoords: (c = t.getCoords()) == null ? void 0 : c.map((r) => ({
+            x: r.x,
+            y: r.y
+          })),
+          canvasZoom: o.getZoom()
+        }), e && l && l(e);
       }
-    }, O = () => {
-      d(), e.renderAll(), o && o(null);
+    }, A = () => {
+      m(), o.renderAll(), l && l(null);
     };
-    return e.on("selection:created", C), e.on("selection:updated", m), e.on("selection:cleared", O), () => {
-      e.off("selection:created", C), e.off("selection:updated", m), e.off("selection:cleared", O);
+    return o.on("selection:created", R), o.on("selection:updated", I), o.on("selection:cleared", A), () => {
+      o.off("selection:created", R), o.off("selection:updated", I), o.off("selection:cleared", A);
     };
-  }, [e, o, n, s, h, i]);
+  }, [o, l, h, g, O, y]);
 };
 export {
-  b as useRegionSelection
+  G as useRegionSelection
 };