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

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

@@ -1,57 +1,57 @@
-import { useCallback as ue, useRef as fe, useEffect as he } from "react";
-import { fabric as b } from "fabric";
-import { CROSSHAIR_LINE_COLOR as me, CROSSHAIR_LINE_DASH_ARRAY as ge, CROSSHAIR_LINE_WIDTH as ke, TEMP_RECT_FILL_COLOR as be, RECT_STROKE_COLOR as G, TEMP_RECT_STROKE_DASH_ARRAY as pe, TRANSPARENT_FILL as Ee, REGION_NAME_PREFIX as xe, BASE_STROKE_WIDTH as K } from "../../constants.mjs";
-const Te = ({
+import { useCallback as pe, useRef as Q, useEffect as V } from "react";
+import { fabric as L } from "fabric";
+import { CROSSHAIR_LINE_COLOR as ke, CROSSHAIR_LINE_DASH_ARRAY as xe, CROSSHAIR_LINE_WIDTH as Ee, TEMP_RECT_FILL_COLOR as Le, RECT_STROKE_COLOR as a, TEMP_RECT_STROKE_DASH_ARRAY as je, TRANSPARENT_FILL as Re, REGION_NAME_PREFIX as Ae, BASE_STROKE_WIDTH as v } from "../../constants.mjs";
+const We = ({
   canvas: e,
-  drawingMode: C,
-  draggable: q,
-  setDrawingMode: J,
-  canvasToImageCoords: Q,
-  labelDefinitions: X,
-  onChange: a,
-  cropRegionImage: V,
-  updateRegionShapeAndImage: P,
-  performOCRIfNeeded: v,
-  createDeleteControl: ee,
-  createOCRControl: te,
-  updateRegionNameText: oe,
-  onRegionChange: U,
-  onRegionSelect: M,
-  rectMapRef: h,
-  textLayersMapRef: re,
-  setupBoundaryCheck: ie
+  drawingMode: T,
+  draggable: ee,
+  setDrawingMode: te,
+  canvasToImageCoords: oe,
+  labelDefinitions: D,
+  onChange: y,
+  cropRegionImage: re,
+  updateRegionShapeAndImage: X,
+  performOCRIfNeeded: ie,
+  createDeleteControl: ne,
+  createOCRControl: le,
+  updateRegionNameText: se,
+  onRegionChange: N,
+  onRegionSelect: S,
+  rectMapRef: p,
+  textLayersMapRef: ce,
+  setupBoundaryCheck: de
 }) => {
-  const D = ue(() => {
-    const R = /* @__PURE__ */ new Set();
-    return re.current.forEach((T) => {
-      T.forEach((W) => {
-        R.add(W);
+  const G = pe(() => {
+    const k = /* @__PURE__ */ new Set();
+    return ce.current.forEach((x) => {
+      x.forEach((C) => {
+        k.add(C);
       });
-    }), R;
-  }, [re]), l = fe({
+    }), k;
+  }, [ce]), n = Q({
     horizontal: null,
     vertical: null
-  }), Le = fe({
+  }), P = Q(null), ue = Q({
     dleft: -1,
     dtop: -1,
     dw: 0,
     dh: 0,
     rect: null
-  }), Z = ue(() => {
+  }), F = pe(() => {
     e && (e.skipTargetFind = !1);
   }, [e]);
-  return he(() => {
-    if (!e || !C || q) {
-      if (Z(), e && !C) {
-        l.current.horizontal && e.getObjects().includes(l.current.horizontal) && e.remove(l.current.horizontal), l.current.vertical && e.getObjects().includes(l.current.vertical) && e.remove(l.current.vertical), l.current = {
+  return V(() => {
+    if (!e || !T || ee) {
+      if (F(), e && !T) {
+        n.current.horizontal && e.getObjects().includes(n.current.horizontal) && e.remove(n.current.horizontal), n.current.vertical && e.getObjects().includes(n.current.vertical) && e.remove(n.current.vertical), n.current = {
           horizontal: null,
           vertical: null
         };
         const o = e.getActiveObject();
         e.selection = !1, e.skipTargetFind = !1;
-        const r = D();
+        const r = G();
         e.getObjects().forEach((i) => {
-          i instanceof b.Rect && r.has(i) ? i.set({
+          i instanceof L.Rect && r.has(i) ? i.set({
             evented: !0,
             selectable: !1,
             lockMovementX: !0,
@@ -59,131 +59,155 @@ const Te = ({
             lockScalingX: !0,
             lockScalingY: !0,
             lockRotation: !0
-          }) : (i.set("evented", !0), i.set("selectable", !0), i instanceof b.Rect && i.set("hasControls", !0));
-        }), o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll()), e.defaultCursor = "default", e.setCursor("default");
+          }) : (i.set("evented", !0), i.set("selectable", !0), i instanceof L.Rect && i.set("hasControls", !0));
+        }), o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll()), e.defaultCursor = "default";
       }
       return;
     }
-    Z(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((o) => {
-      o.set("evented", !1), o.set("selectable", !1), o instanceof b.Rect && o.hasControls && o.set("hasControls", !1);
-    }), e.defaultCursor = "crosshair", e.setCursor("crosshair"), l.current.horizontal && e.getObjects().includes(l.current.horizontal) && e.remove(l.current.horizontal), l.current.vertical && e.getObjects().includes(l.current.vertical) && e.remove(l.current.vertical), l.current = {
+    F(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), e.getObjects().forEach((o) => {
+      o.set("evented", !1), o.set("selectable", !1), o instanceof L.Rect && o.hasControls && o.set("hasControls", !1);
+    }), e.defaultCursor = "crosshair", e.setCursor("crosshair"), n.current.horizontal && e.getObjects().includes(n.current.horizontal) && e.remove(n.current.horizontal), n.current.vertical && e.getObjects().includes(n.current.vertical) && e.remove(n.current.vertical), n.current = {
       horizontal: null,
       vertical: null
     };
-    const T = e.getWidth(), W = e.getHeight(), m = e.getZoom(), L = T / m, A = W / m, O = Math.max(L, A) * 3, F = ke / m, S = new b.Line([-O, 0, O, 0], {
-      stroke: me,
-      strokeWidth: F,
-      strokeDashArray: ge,
+    const x = e.getWidth(), C = e.getHeight(), E = e.getZoom(), j = x / E, R = C / E, A = Math.max(j, R) * 3, Z = Ee / E, z = new L.Line([-A, 0, A, 0], {
+      stroke: ke,
+      strokeWidth: Z,
+      strokeDashArray: xe,
       selectable: !1,
       evented: !1,
       excludeFromExport: !0,
       // 导出时不包含此线
       strokeUniform: !0,
       // 设置为 true，使线宽随缩放调整以保持视觉一致
-      visible: !1
-      // 初始状态隐藏，只有鼠标进入画布时才显示
-    }), _ = new b.Line([0, -O, 0, O], {
-      stroke: me,
-      strokeWidth: F,
-      strokeDashArray: ge,
+      visible: !0
+      // 画框模式下常显辅助线
+    }), _ = new L.Line([0, -A, 0, A], {
+      stroke: ke,
+      strokeWidth: Z,
+      strokeDashArray: xe,
       selectable: !1,
       evented: !1,
       excludeFromExport: !0,
       // 导出时不包含此线
       strokeUniform: !0,
       // 设置为 true，使线宽随缩放调整以保持视觉一致
-      visible: !1
-      // 初始状态隐藏，只有鼠标进入画布时才显示
+      visible: !0
+      // 画框模式下常显辅助线
     });
-    l.current = {
-      horizontal: S,
+    n.current = {
+      horizontal: z,
       vertical: _
-    }, e.add(S), e.add(_), S.sendToBack(), _.sendToBack();
-    const z = (o, r) => {
-      const i = l.current.horizontal, d = l.current.vertical;
-      if (!i || !d)
+    }, e.add(z), e.add(_), z.sendToBack(), _.sendToBack();
+    const M = (o, r) => {
+      const i = n.current.horizontal, c = n.current.vertical;
+      if (!i || !c)
         return;
-      const u = e.getZoom(), g = e.getWidth(), c = e.getHeight(), k = g / u, p = c / u, f = Math.max(k, p) * 3;
+      const h = e.getZoom(), g = e.getWidth(), s = e.getHeight(), O = g / h, w = s / h, b = Math.max(O, w) * 3;
       i.set({
-        x1: o - f,
+        x1: o - b,
         y1: r,
-        x2: o + f,
+        x2: o + b,
         y2: r,
         visible: !0
         // 显示辅助线
-      }), d.set({
+      }), c.set({
         x1: o,
-        y1: r - f,
+        y1: r - b,
         x2: o,
-        y2: r + f,
+        y2: r + b,
         visible: !0
         // 显示辅助线
-      }), i.sendToBack(), d.sendToBack(), e.renderAll();
-    }, E = () => {
-      const o = l.current.horizontal, r = l.current.vertical;
-      !o || !r || (o.set({
-        visible: !1
-      }), r.set({
-        visible: !1
-      }), e.renderAll());
-    }, t = Le.current, H = (o) => {
+      }), i.sendToBack(), c.sendToBack();
+      const d = ue.current, f = d.rect && e.getObjects().includes(d.rect);
+      if (d.rect && !e.getObjects().includes(d.rect) && d.dleft !== -1 && d.dtop !== -1 && d.dw > 0 && d.dh > 0 && e.add(d.rect), f && d.rect) {
+        const m = Math.min(e.getObjects().indexOf(i), e.getObjects().indexOf(c));
+        e.getObjects().indexOf(d.rect) <= m && e.moveTo(d.rect, m + 1);
+      }
+      e.renderAll();
+    };
+    if (P.current) {
+      const r = e.getElement().getBoundingClientRect(), {
+        clientX: i,
+        clientY: c
+      } = P.current;
+      if (i >= r.left && i <= r.right && c >= r.top && c <= r.bottom) {
+        const g = new MouseEvent("mousemove", {
+          bubbles: !0,
+          cancelable: !0,
+          clientX: i,
+          clientY: c
+        }), s = e.getPointer(g);
+        M(s.x, s.y);
+      }
+    }
+    const t = ue.current, H = (o) => {
       if (e.skipTargetFind && (t.dleft === -1 || t.dtop === -1)) {
         const r = e.getPointer(o.e);
         t.dleft = r.x, t.dtop = r.y;
       }
-    }, Ae = (o) => {
+    }, U = (o) => {
       const r = e.getPointer(o.e);
-      z(r.x, r.y);
-    }, B = (o) => {
-      if (Ae(o), t.dleft === -1 || t.dtop === -1)
-        return;
+      M(r.x, r.y);
+    }, $ = (o) => {
       const r = e.getPointer(o.e);
-      let i = r.x, d = r.y;
-      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(d - t.dtop), t.dw === 0 || t.dh === 0)
-        return;
-      let u = t.dtop > d ? d : t.dtop, g = t.dleft > i ? i : t.dleft, c = t.dw, k = t.dh;
-      t.rect && e.remove(t.rect);
-      const p = e.getZoom(), f = K / p;
-      t.rect = new b.Rect({
-        left: g,
-        top: u,
-        width: c,
-        height: k,
-        fill: be,
-        stroke: G,
-        strokeWidth: f,
-        strokeUniform: !0,
-        // 边框宽度不受缩放影响
-        strokeDashArray: pe,
-        selectable: !1,
-        evented: !1,
-        objectCaching: !1,
-        // 禁用缓存，避免缩放时边框变虚
-        statefullCache: !1,
-        noScaleCache: !1
-      }), e.add(t.rect), e.renderAll();
-    }, I = (o) => {
+      if (t.dleft !== -1 && t.dtop !== -1) {
+        let i = r.x, c = r.y;
+        if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(c - t.dtop), t.dw > 0 && t.dh > 0) {
+          let h = t.dtop > c ? c : t.dtop, g = t.dleft > i ? i : t.dleft, s = t.dw, O = t.dh;
+          if (!t.rect || t.rect.left !== g || t.rect.top !== h || t.rect.width !== s || t.rect.height !== O || !e.getObjects().includes(t.rect)) {
+            t.rect && e.getObjects().includes(t.rect) && e.remove(t.rect);
+            const f = e.getZoom(), m = v / f;
+            t.rect = new L.Rect({
+              left: g,
+              top: h,
+              width: s,
+              height: O,
+              fill: Le,
+              stroke: a,
+              strokeWidth: m,
+              strokeUniform: !0,
+              // 边框宽度不受缩放影响
+              strokeDashArray: je,
+              selectable: !1,
+              evented: !1,
+              objectCaching: !1,
+              // 禁用缓存，避免缩放时边框变虚
+              statefullCache: !1,
+              noScaleCache: !1
+            }), e.add(t.rect);
+          }
+          const b = n.current.horizontal, d = n.current.vertical;
+          if (t.rect && b && d && e.getObjects().includes(b) && e.getObjects().includes(d) && e.getObjects().includes(t.rect)) {
+            const f = Math.min(e.getObjects().indexOf(b), e.getObjects().indexOf(d));
+            e.getObjects().indexOf(t.rect) <= f && e.moveTo(t.rect, f + 1);
+          }
+        } else
+          t.rect && e.getObjects().includes(t.rect) && (e.remove(t.rect), t.rect = null);
+      }
+      U(o);
+    }, K = (o) => {
       if (t.dleft === -1 || t.dtop === -1) {
         t.dtop = -1, t.dleft = -1;
         return;
       }
       const r = e.getPointer(o.e);
-      let i = r.x, d = r.y;
-      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(d - t.dtop), t.dw === 0 || t.dh === 0) {
+      let i = r.x, c = r.y;
+      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(c - t.dtop), t.dw === 0 || t.dh === 0) {
         t.rect && (e.remove(t.rect), e.renderAll()), t.dtop = -1, t.dleft = -1;
         return;
       }
-      let u = t.dtop > d ? d : t.dtop, g = t.dleft > i ? i : t.dleft, c = t.dw, k = t.dh;
+      let h = t.dtop > c ? c : t.dtop, g = t.dleft > i ? i : t.dleft, s = t.dw, O = t.dh;
       t.rect && (e.remove(t.rect), t.rect = null);
-      const p = Q(g, u), f = c, N = k, x = e.getZoom(), w = K / x, n = new b.Rect({
+      const w = oe(g, h), b = s, d = O, f = e.getZoom(), m = v / f, l = new L.Rect({
         left: g,
-        top: u,
-        width: c,
-        height: k,
-        fill: Ee,
+        top: h,
+        width: s,
+        height: O,
+        fill: Re,
         // 无填充色
-        stroke: G,
-        strokeWidth: w,
+        stroke: a,
+        strokeWidth: m,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
         selectable: !0,
@@ -203,131 +227,139 @@ const Te = ({
         hasControls: !0
         // 启用控件
       });
-      e.add(n), n.controls.deleteControl = ee(), n.controls.ocrControl = te(), n.set("hasControls", !1);
-      const $ = h.current.size, Y = {};
-      X == null || X.forEach((s) => {
-        Y[s.id] = "";
+      e.add(l), l.controls.deleteControl = ne(), l.controls.ocrControl = le(), l.set("hasControls", !1);
+      const q = p.current.size, B = {};
+      D == null || D.forEach((u) => {
+        B[u.id] = "";
       });
-      const j = {
+      const Y = {
         id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: `${xe}${$ + 1}`,
+        name: `${Ae}${q + 1}`,
         // 设置名称：区域+（索引+1）
         shape: {
           name: "rect",
-          x: Math.max(0, p.x),
-          y: Math.max(0, p.y),
-          width: f,
-          height: N
+          x: Math.max(0, w.x),
+          y: Math.max(0, w.y),
+          width: b,
+          height: d
         },
-        content: Y
+        content: B
       };
-      if (h.current.set(n, j), oe(n, j), P(n), U) {
-        const s = h.current.get(n);
-        s && U(s, "create");
+      if (p.current.set(l, Y), se(l, Y), X(l), N) {
+        const u = p.current.get(l);
+        u && N(u, "create");
       }
-      V(j).then((s) => {
-        if (s) {
-          const y = h.current.get(n);
-          if (y) {
-            if (y.image = s, delete y.textLayouts, a) {
-              const Oe = Array.from(h.current.values());
-              a(Oe);
+      re(Y).then((u) => {
+        if (u) {
+          const W = p.current.get(l);
+          if (W) {
+            if (W.image = u, delete W.textLayouts, y) {
+              const I = Array.from(p.current.values());
+              y(I);
             }
-            v(y, "create");
+            ie(W, "create");
           }
         }
-      }).catch((s) => {
-        console.error("Failed to crop region image:", s);
-      }), e.setActiveObject(n), e.renderAll(), setTimeout(() => {
-        if (M) {
-          const s = h.current.get(n);
-          s && M(s);
+      }).catch((u) => {
+        console.error("Failed to crop region image:", u);
+      }), e.setActiveObject(l), e.renderAll(), setTimeout(() => {
+        if (S) {
+          const u = p.current.get(l);
+          u && S(u);
         }
         setTimeout(() => {
-          if (e && n && e.getObjects().includes(n) && (e.setActiveObject(n), e.renderAll(), M)) {
-            const s = h.current.get(n);
-            s && M(s);
+          if (e && l && e.getObjects().includes(l) && (e.setActiveObject(l), e.renderAll(), S)) {
+            const u = p.current.get(l);
+            u && S(u);
           }
         }, 0);
-      }, 0), ie(n), n.on("modified", () => {
-        P(n);
-      }), n.on("moved", () => {
-        P(n);
+      }, 0), de(l), l.on("modified", () => {
+        X(l);
+      }), l.on("moved", () => {
+        X(l);
       }), setTimeout(() => {
-        if (a) {
-          const s = Array.from(h.current.values());
-          a(s);
+        if (y) {
+          const u = Array.from(p.current.values());
+          y(u);
         }
-      }, 0), t.dtop = -1, t.dleft = -1, e.selection = !1, J(!1);
-    }, le = (o) => {
-      const i = e.getElement().getBoundingClientRect(), d = o.clientX, u = o.clientY, g = d >= i.left && d <= i.right && u >= i.top && u <= i.bottom;
-      if (g) {
-        const c = e.getPointer(o);
-        z(c.x, c.y);
-      } else
-        E();
-      if (!(t.dleft === -1 || t.dtop === -1))
+      }, 0), t.dtop = -1, t.dleft = -1, e.selection = !1, te(!1);
+    }, fe = (o) => {
+      P.current = {
+        clientX: o.clientX,
+        clientY: o.clientY
+      };
+      const i = e.getElement().getBoundingClientRect(), c = o.clientX, h = o.clientY, g = c >= i.left && c <= i.right && h >= i.top && h <= i.bottom;
+      if (t.dleft !== -1 && t.dtop !== -1)
         if (g) {
-          const c = e.getPointer(o);
-          B({
+          const s = e.getPointer(o);
+          $({
             e: o,
-            pointer: c
+            pointer: s
           });
         } else {
-          const c = e.getZoom(), k = e.viewportTransform ? e.viewportTransform[4] / c : 0, p = e.viewportTransform ? e.viewportTransform[5] / c : 0, f = e.getWidth() / c, N = e.getHeight() / c;
-          let x = (d - i.left) / c - k, w = (u - i.top) / c - p;
-          if (x = Math.max(0, Math.min(x, f)), w = Math.max(0, Math.min(w, N)), t.dw = Math.abs(x - t.dleft), t.dh = Math.abs(w - t.dtop), t.dw === 0 || t.dh === 0)
+          const s = e.getZoom(), O = e.viewportTransform ? e.viewportTransform[4] / s : 0, w = e.viewportTransform ? e.viewportTransform[5] / s : 0, b = e.getWidth() / s, d = e.getHeight() / s;
+          let f = (c - i.left) / s - O, m = (h - i.top) / s - w;
+          if (f = Math.max(0, Math.min(f, b)), m = Math.max(0, Math.min(m, d)), t.dw = Math.abs(f - t.dleft), t.dh = Math.abs(m - t.dtop), t.dw === 0 || t.dh === 0)
             return;
-          let n = t.dtop > w ? w : t.dtop, $ = t.dleft > x ? x : t.dleft, Y = t.dw, j = t.dh;
+          let l = t.dtop > m ? m : t.dtop, q = t.dleft > f ? f : t.dleft, B = t.dw, Y = t.dh;
           t.rect && e.remove(t.rect);
-          const s = e.getZoom(), y = K / s;
-          t.rect = new b.Rect({
-            left: $,
-            top: n,
-            width: Y,
-            height: j,
-            fill: be,
-            stroke: G,
-            strokeWidth: y,
+          const u = e.getZoom(), W = v / u;
+          t.rect = new L.Rect({
+            left: q,
+            top: l,
+            width: B,
+            height: Y,
+            fill: Le,
+            stroke: a,
+            strokeWidth: W,
             strokeUniform: !0,
-            strokeDashArray: pe,
+            strokeDashArray: je,
             selectable: !1,
             evented: !1,
             objectCaching: !1,
             statefullCache: !1,
             noScaleCache: !1
-          }), e.add(t.rect), e.renderAll();
+          }), e.add(t.rect);
+          const I = n.current.horizontal, J = n.current.vertical;
+          if (I && J && e.getObjects().includes(I) && e.getObjects().includes(J)) {
+            const Oe = Math.min(e.getObjects().indexOf(I), e.getObjects().indexOf(J));
+            e.getObjects().indexOf(t.rect) < Oe && e.moveTo(t.rect, Oe + 1);
+          }
+          e.renderAll();
         }
-    }, ne = () => {
-      E();
-    }, se = (o) => {
+      if (g && (t.dleft === -1 || t.dtop === -1)) {
+        const s = e.getPointer(o);
+        M(s.x, s.y);
+      }
+    }, he = () => {
+    }, me = (o) => {
       const r = e.getPointer(o.e);
-      z(r.x, r.y);
-    }, ce = (o) => {
-      if (!C)
+      M(r.x, r.y);
+    }, ge = (o) => {
+      if (!T)
         return;
       e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll()), t.dtop = -1, t.dleft = -1, t.dw = 0, t.dh = 0;
       const i = e.getPointer(o.e);
       t.dleft = i.x, t.dtop = i.y;
     };
-    e.on("mouse:down:before", ce), e.on("mouse:down", H), e.on("mouse:move", B), e.on("mouse:up", I), e.on("mouse:out", ne), e.on("mouse:over", se), document.addEventListener("mousemove", le);
-    const de = (o) => {
+    e.on("mouse:down:before", ge), e.on("mouse:down", H), e.on("mouse:move", $), e.on("mouse:up", K), e.on("mouse:out", he), e.on("mouse:over", me), document.addEventListener("mousemove", fe);
+    const be = (o) => {
       if (t.dleft === -1 || t.dtop === -1)
         return;
       const r = e.getPointer(o);
-      I({
+      K({
         e: o,
         pointer: r
       });
     };
-    return document.addEventListener("mouseup", de), () => {
-      e.off("mouse:down:before", ce), e.off("mouse:down", H), e.off("mouse:move", B), e.off("mouse:up", I), e.off("mouse:out", ne), e.off("mouse:over", se), document.removeEventListener("mousemove", le), document.removeEventListener("mouseup", de), t.rect && (e.remove(t.rect), e.renderAll()), l.current.horizontal && e.getObjects().includes(l.current.horizontal) && e.remove(l.current.horizontal), l.current.vertical && e.getObjects().includes(l.current.vertical) && e.remove(l.current.vertical), l.current = {
+    return document.addEventListener("mouseup", be), () => {
+      e.off("mouse:down:before", ge), e.off("mouse:down", H), e.off("mouse:move", $), e.off("mouse:up", K), e.off("mouse:out", he), e.off("mouse:over", me), document.removeEventListener("mousemove", fe), document.removeEventListener("mouseup", be), t.rect && (e.remove(t.rect), e.renderAll()), n.current.horizontal && e.getObjects().includes(n.current.horizontal) && e.remove(n.current.horizontal), n.current.vertical && e.getObjects().includes(n.current.vertical) && e.remove(n.current.vertical), n.current = {
         horizontal: null,
         vertical: null
-      }, e.skipTargetFind = !1;
-      const o = D();
+      }, e.skipTargetFind = !1, e.defaultCursor = "default";
+      const o = G();
       e.getObjects().forEach((r) => {
-        r instanceof b.Rect && o.has(r) ? r.set({
+        r instanceof L.Rect && o.has(r) ? r.set({
           evented: !0,
           selectable: !1,
           lockMovementX: !0,
@@ -338,40 +370,52 @@ const Te = ({
         }) : (r.set("evented", !0), r.set("selectable", !0));
       });
     };
-  }, [e, C, q, Z, Q, a, V, P, v, ee, te, oe, U, M, J, h, D, ie]), he(() => {
-    if (!e || !C)
+  }, [e, T, ee, F, oe, y, re, X, ie, ne, le, se, N, S, te, p, G, de]), V(() => {
+    if (!e)
+      return;
+    const k = (x) => {
+      P.current = {
+        clientX: x.clientX,
+        clientY: x.clientY
+      };
+    };
+    return document.addEventListener("mousemove", k), () => {
+      document.removeEventListener("mousemove", k);
+    };
+  }, [e]), V(() => {
+    if (!e || !T)
       return;
-    let R = e.getZoom();
-    const T = () => {
-      const m = l.current.horizontal, L = l.current.vertical;
-      if (!m || !L)
+    let k = e.getZoom();
+    const x = () => {
+      const E = n.current.horizontal, j = n.current.vertical;
+      if (!E || !j)
         return;
-      const A = e.getZoom();
-      if (Math.abs(A - R) < 1e-3)
+      const R = e.getZoom();
+      if (Math.abs(R - k) < 1e-3)
         return;
-      R = A;
-      const O = ke / A, F = e.getWidth(), S = e.getHeight(), _ = F / A, z = S / A, E = Math.max(_, z) * 3, t = (m.x1 + m.x2) / 2;
-      m.y1, L.x1;
-      const H = (L.y1 + L.y2) / 2;
-      m.set({
-        strokeWidth: O,
-        x1: t - E,
-        x2: t + E
-      }), L.set({
-        strokeWidth: O,
-        y1: H - E,
-        y2: H + E
+      k = R;
+      const A = Ee / R, Z = e.getWidth(), z = e.getHeight(), _ = Z / R, M = z / R, t = Math.max(_, M) * 3, H = (E.x1 + E.x2) / 2;
+      E.y1, j.x1;
+      const U = (j.y1 + j.y2) / 2;
+      E.set({
+        strokeWidth: A,
+        x1: H - t,
+        x2: H + t
+      }), j.set({
+        strokeWidth: A,
+        y1: U - t,
+        y2: U + t
       }), e.renderAll();
-    }, W = () => {
-      T();
+    }, C = () => {
+      x();
     };
-    return e.on("after:render", W), T(), () => {
-      e.off("after:render", W);
+    return e.on("after:render", C), x(), () => {
+      e.off("after:render", C);
     };
-  }, [e, C]), {
-    stopDraw: Z
+  }, [e, T]), {
+    stopDraw: F
   };
 };
 export {
-  Te as useDrawingMode
+  We as useDrawingMode
 };