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

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

@@ -1,57 +1,58 @@
-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 = ({
+import { useCallback as Ae, useRef as ne, useEffect as se } from "react";
+import { fabric as T } from "fabric";
+import { CROSSHAIR_LINE_COLOR as Ye, CROSSHAIR_LINE_DASH_ARRAY as Ce, CROSSHAIR_LINE_WIDTH as Xe, TEMP_RECT_FILL_COLOR as Se, RECT_STROKE_COLOR as ie, TEMP_RECT_STROKE_DASH_ARRAY as je, TRANSPARENT_FILL as Be, REGION_NAME_PREFIX as Ue, BASE_STROKE_WIDTH as le } from "../../constants.mjs";
+const Ge = ({
   canvas: e,
-  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
+  drawingMode: y,
+  draggable: ce,
+  setDrawingMode: de,
+  canvasToImageCoords: ue,
+  labelDefinitions: J,
+  onChange: I,
+  cropRegionImage: fe,
+  updateRegionShapeAndImage: D,
+  performOCRIfNeeded: he,
+  createDeleteControl: me,
+  createOCRControl: ge,
+  updateRegionNameText: be,
+  onRegionChange: Q,
+  onRegionSelect: P,
+  rectMapRef: x,
+  textLayersMapRef: ke,
+  regionNameTextMapRef: v,
+  setupBoundaryCheck: pe
 }) => {
-  const G = pe(() => {
-    const k = /* @__PURE__ */ new Set();
-    return ce.current.forEach((x) => {
-      x.forEach((C) => {
-        k.add(C);
+  const V = Ae(() => {
+    const L = /* @__PURE__ */ new Set();
+    return ke.current.forEach((w) => {
+      w.forEach((z) => {
+        L.add(z);
       });
-    }), k;
-  }, [ce]), n = Q({
+    }), L;
+  }, [ke]), i = ne({
     horizontal: null,
     vertical: null
-  }), P = Q(null), ue = Q({
+  }), N = ne(null), Oe = ne({
     dleft: -1,
     dtop: -1,
     dw: 0,
     dh: 0,
     rect: null
-  }), F = pe(() => {
+  }), G = Ae(() => {
     e && (e.skipTargetFind = !1);
   }, [e]);
-  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 = {
+  return se(() => {
+    if (!e || !y || ce) {
+      if (G(), e && !y) {
+        i.current.horizontal && e.getObjects().includes(i.current.horizontal) && e.remove(i.current.horizontal), i.current.vertical && e.getObjects().includes(i.current.vertical) && e.remove(i.current.vertical), i.current = {
           horizontal: null,
           vertical: null
         };
         const o = e.getActiveObject();
         e.selection = !1, e.skipTargetFind = !1;
-        const r = G();
-        e.getObjects().forEach((i) => {
-          i instanceof L.Rect && r.has(i) ? i.set({
+        const s = V(), r = new Set(v.current.values());
+        e.getObjects().forEach((n) => {
+          n instanceof T.Rect && s.has(n) ? n.set({
             evented: !0,
             selectable: !1,
             lockMovementX: !0,
@@ -59,21 +60,47 @@ const We = ({
             lockScalingX: !0,
             lockScalingY: !0,
             lockRotation: !0
-          }) : (i.set("evented", !0), i.set("selectable", !0), i instanceof L.Rect && i.set("hasControls", !0));
+          }) : r.has(n) ? n.set({
+            evented: !1,
+            selectable: !1,
+            lockMovementX: !0,
+            lockMovementY: !0,
+            lockScalingX: !1,
+            // 允许缩放，用于抵消画布缩放
+            lockScalingY: !1,
+            // 允许缩放，用于抵消画布缩放
+            lockRotation: !0,
+            hasControls: !1,
+            hasBorders: !1
+          }) : (n.set("evented", !0), n.set("selectable", !0), n instanceof T.Rect && n.set("hasControls", !0));
         }), o && e.getObjects().includes(o) && (e.setActiveObject(o), e.renderAll()), e.defaultCursor = "default";
       }
       return;
     }
-    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 = {
+    G(), e.selection = !1, e.skipTargetFind = !0, e.getActiveObject() && (e.discardActiveObject(), e.renderAll());
+    const w = new Set(v.current.values());
+    e.getObjects().forEach((o) => {
+      w.has(o) ? o.set({
+        evented: !1,
+        selectable: !1,
+        lockMovementX: !0,
+        lockMovementY: !0,
+        lockScalingX: !1,
+        // 允许缩放，用于抵消画布缩放
+        lockScalingY: !1,
+        // 允许缩放，用于抵消画布缩放
+        lockRotation: !0,
+        hasControls: !1,
+        hasBorders: !1
+      }) : (o.set("evented", !1), o.set("selectable", !1), o instanceof T.Rect && o.hasControls && o.set("hasControls", !1));
+    }), e.defaultCursor = "crosshair", e.setCursor("crosshair"), i.current.horizontal && e.getObjects().includes(i.current.horizontal) && e.remove(i.current.horizontal), i.current.vertical && e.getObjects().includes(i.current.vertical) && e.remove(i.current.vertical), i.current = {
       horizontal: null,
       vertical: null
     };
-    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,
+    const z = e.getWidth(), S = e.getHeight(), E = e.getZoom(), j = z / E, $ = S / E, _ = Math.max(j, $) * 3, K = Xe / E, F = new T.Line([-_, 0, _, 0], {
+      stroke: Ye,
+      strokeWidth: K,
+      strokeDashArray: Ce,
       selectable: !1,
       evented: !1,
       excludeFromExport: !0,
@@ -82,10 +109,10 @@ const We = ({
       // 设置为 true，使线宽随缩放调整以保持视觉一致
       visible: !0
       // 画框模式下常显辅助线
-    }), _ = new L.Line([0, -A, 0, A], {
-      stroke: ke,
-      strokeWidth: Z,
-      strokeDashArray: xe,
+    }), Z = new T.Line([0, -_, 0, _], {
+      stroke: Ye,
+      strokeWidth: K,
+      strokeDashArray: Ce,
       selectable: !1,
       evented: !1,
       excludeFromExport: !0,
@@ -95,77 +122,94 @@ const We = ({
       visible: !0
       // 画框模式下常显辅助线
     });
-    n.current = {
-      horizontal: z,
-      vertical: _
-    }, e.add(z), e.add(_), z.sendToBack(), _.sendToBack();
-    const M = (o, r) => {
-      const i = n.current.horizontal, c = n.current.vertical;
-      if (!i || !c)
+    i.current = {
+      horizontal: F,
+      vertical: Z
+    }, e.add(F), e.add(Z), F.sendToBack(), Z.sendToBack();
+    const R = (o, s) => {
+      const r = i.current.horizontal, n = i.current.vertical;
+      if (!r || !n)
         return;
-      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 - b,
-        y1: r,
-        x2: o + b,
-        y2: r,
+      const u = e.getZoom(), b = e.getWidth(), l = e.getHeight(), h = b / u, f = l / u, m = e.viewportTransform || [1, 0, 0, 1, 0, 0];
+      m[4] / u, m[5] / u;
+      const k = e.backgroundImage;
+      let g = h, p = f;
+      if (k) {
+        const a = k.getElement();
+        if (a != null && a.width && (a != null && a.height)) {
+          const re = k, Fe = re.scaleX || 1, Ze = re.scaleY || 1;
+          g = a.width * Fe, p = a.height * Ze;
+        }
+      }
+      const A = Math.max(h, f, g, p) * 10, M = m[3] || u, Y = m[5] || 0, d = 0, C = l, X = (d - Y) / M, H = (C - Y) / M;
+      let W = s;
+      s < X ? W = X : s > H && (W = H);
+      const q = m[0] || u, oe = m[4] || 0, We = 0, ye = b, Re = (We - oe) / q, Te = (ye - oe) / q;
+      let U = o;
+      isNaN(o) || !isFinite(o) ? U = (b / 2 - oe) / q : o < Re ? U = Re : o > Te && (U = Te);
+      const ze = -A, _e = h + A, He = -A, Ie = f + A;
+      r.set({
+        x1: ze,
+        y1: W,
+        x2: _e,
+        y2: W,
         visible: !0
         // 显示辅助线
-      }), c.set({
-        x1: o,
-        y1: r - b,
-        x2: o,
-        y2: r + b,
+      }), r.setCoords(), n.set({
+        x1: U,
+        y1: He,
+        x2: U,
+        y2: Ie,
         visible: !0
         // 显示辅助线
-      }), 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);
+      }), n.setCoords(), r.sendToBack(), n.sendToBack(), e.renderAll();
+      const O = Oe.current, Pe = O.rect && e.getObjects().includes(O.rect);
+      if (O.rect && !e.getObjects().includes(O.rect) && O.dleft !== -1 && O.dtop !== -1 && O.dw > 0 && O.dh > 0 && e.add(O.rect), Pe && O.rect) {
+        const a = Math.min(e.getObjects().indexOf(r), e.getObjects().indexOf(n));
+        e.getObjects().indexOf(O.rect) <= a && e.moveTo(O.rect, a + 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", {
+    if (N.current) {
+      const s = e.getElement().getBoundingClientRect(), {
+        clientX: r,
+        clientY: n
+      } = N.current;
+      if (r >= s.left && r <= s.right && n >= s.top && n <= s.bottom) {
+        const b = new MouseEvent("mousemove", {
           bubbles: !0,
           cancelable: !0,
-          clientX: i,
-          clientY: c
-        }), s = e.getPointer(g);
-        M(s.x, s.y);
+          clientX: r,
+          clientY: n
+        }), l = e.getPointer(b);
+        R(l.x, l.y);
       }
     }
-    const t = ue.current, H = (o) => {
+    const t = Oe.current, B = (o) => {
       if (e.skipTargetFind && (t.dleft === -1 || t.dtop === -1)) {
-        const r = e.getPointer(o.e);
-        t.dleft = r.x, t.dtop = r.y;
+        const s = e.getPointer(o.e);
+        t.dleft = s.x, t.dtop = s.y;
       }
-    }, U = (o) => {
-      const r = e.getPointer(o.e);
-      M(r.x, r.y);
-    }, $ = (o) => {
-      const r = e.getPointer(o.e);
+    }, Me = (o) => {
+      const s = e.getPointer(o.e);
+      R(s.x, s.y);
+    }, ee = (o) => {
+      const s = e.getPointer(o.e);
       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)) {
+        let r = s.x, n = s.y;
+        if (t.dw = Math.abs(r - t.dleft), t.dh = Math.abs(n - t.dtop), t.dw > 0 && t.dh > 0) {
+          let u = t.dtop > n ? n : t.dtop, b = t.dleft > r ? r : t.dleft, l = t.dw, h = t.dh;
+          if (!t.rect || t.rect.left !== b || t.rect.top !== u || t.rect.width !== l || t.rect.height !== h || !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,
+            const g = e.getZoom(), p = le / g;
+            t.rect = new T.Rect({
+              left: b,
+              top: u,
+              width: l,
+              height: h,
+              fill: Se,
+              stroke: ie,
+              strokeWidth: p,
               strokeUniform: !0,
               // 边框宽度不受缩放影响
               strokeDashArray: je,
@@ -177,37 +221,37 @@ const We = ({
               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);
+          const m = i.current.horizontal, k = i.current.vertical;
+          if (t.rect && m && k && e.getObjects().includes(m) && e.getObjects().includes(k) && e.getObjects().includes(t.rect)) {
+            const g = Math.min(e.getObjects().indexOf(m), e.getObjects().indexOf(k));
+            e.getObjects().indexOf(t.rect) <= g && e.moveTo(t.rect, g + 1);
           }
         } else
           t.rect && e.getObjects().includes(t.rect) && (e.remove(t.rect), t.rect = null);
       }
-      U(o);
-    }, K = (o) => {
+      Me(o);
+    }, te = (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, c = r.y;
-      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(c - t.dtop), t.dw === 0 || t.dh === 0) {
+      const s = e.getPointer(o.e);
+      let r = s.x, n = s.y;
+      if (t.dw = Math.abs(r - t.dleft), t.dh = Math.abs(n - t.dtop), t.dw === 0 || t.dh === 0) {
         t.rect && (e.remove(t.rect), e.renderAll()), t.dtop = -1, t.dleft = -1;
         return;
       }
-      let h = t.dtop > c ? c : t.dtop, g = t.dleft > i ? i : t.dleft, s = t.dw, O = t.dh;
+      let u = t.dtop > n ? n : t.dtop, b = t.dleft > r ? r : t.dleft, l = t.dw, h = t.dh;
       t.rect && (e.remove(t.rect), t.rect = null);
-      const w = oe(g, h), b = s, d = O, f = e.getZoom(), m = v / f, l = new L.Rect({
-        left: g,
-        top: h,
-        width: s,
-        height: O,
-        fill: Re,
+      const f = ue(b, u), m = l, k = h, g = e.getZoom(), p = le / g, c = new T.Rect({
+        left: b,
+        top: u,
+        width: l,
+        height: h,
+        fill: Be,
         // 无填充色
-        stroke: a,
-        strokeWidth: m,
+        stroke: ie,
+        strokeWidth: p,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
         selectable: !0,
@@ -227,91 +271,91 @@ const We = ({
         hasControls: !0
         // 启用控件
       });
-      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] = "";
+      e.add(c), c.controls.deleteControl = me(), c.controls.ocrControl = ge(), c.set("hasControls", !1);
+      const A = x.current.size, M = {};
+      J == null || J.forEach((d) => {
+        M[d.id] = "";
       });
       const Y = {
         id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: `${Ae}${q + 1}`,
+        name: `${Ue}${A + 1}`,
         // 设置名称：区域+（索引+1）
         shape: {
           name: "rect",
-          x: Math.max(0, w.x),
-          y: Math.max(0, w.y),
-          width: b,
-          height: d
+          x: Math.max(0, f.x),
+          y: Math.max(0, f.y),
+          width: m,
+          height: k
         },
-        content: B
+        content: M
       };
-      if (p.current.set(l, Y), se(l, Y), X(l), N) {
-        const u = p.current.get(l);
-        u && N(u, "create");
+      if (x.current.set(c, Y), be(c, Y), D(c), Q) {
+        const d = x.current.get(c);
+        d && Q(d, "create");
       }
-      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);
+      fe(Y).then((d) => {
+        if (d) {
+          const C = x.current.get(c);
+          if (C) {
+            if (C.image = d, delete C.textLayouts, I) {
+              const X = Array.from(x.current.values());
+              I(X);
             }
-            ie(W, "create");
+            he(C, "create");
           }
         }
-      }).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);
+      }).catch((d) => {
+        console.error("Failed to crop region image:", d);
+      }), e.setActiveObject(c), e.renderAll(), setTimeout(() => {
+        if (P) {
+          const d = x.current.get(c);
+          d && P(d);
         }
         setTimeout(() => {
-          if (e && l && e.getObjects().includes(l) && (e.setActiveObject(l), e.renderAll(), S)) {
-            const u = p.current.get(l);
-            u && S(u);
+          if (e && c && e.getObjects().includes(c) && (e.setActiveObject(c), e.renderAll(), P)) {
+            const d = x.current.get(c);
+            d && P(d);
           }
         }, 0);
-      }, 0), de(l), l.on("modified", () => {
-        X(l);
-      }), l.on("moved", () => {
-        X(l);
+      }, 0), pe(c), c.on("modified", () => {
+        D(c);
+      }), c.on("moved", () => {
+        D(c);
       }), setTimeout(() => {
-        if (y) {
-          const u = Array.from(p.current.values());
-          y(u);
+        if (I) {
+          const d = Array.from(x.current.values());
+          I(d);
         }
-      }, 0), t.dtop = -1, t.dleft = -1, e.selection = !1, te(!1);
-    }, fe = (o) => {
-      P.current = {
+      }, 0), t.dtop = -1, t.dleft = -1, e.selection = !1, de(!1);
+    }, ae = (o) => {
+      N.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;
+      const r = e.getElement().getBoundingClientRect(), n = o.clientX, u = o.clientY, b = n >= r.left && n <= r.right && u >= r.top && u <= r.bottom;
       if (t.dleft !== -1 && t.dtop !== -1)
-        if (g) {
-          const s = e.getPointer(o);
-          $({
+        if (b) {
+          const l = e.getPointer(o);
+          ee({
             e: o,
-            pointer: s
+            pointer: l
           });
         } else {
-          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)
+          const l = e.getZoom(), h = e.viewportTransform ? e.viewportTransform[4] / l : 0, f = e.viewportTransform ? e.viewportTransform[5] / l : 0, m = e.getWidth() / l, k = e.getHeight() / l;
+          let g = (n - r.left) / l - h, p = (u - r.top) / l - f;
+          if (g = Math.max(0, Math.min(g, m)), p = Math.max(0, Math.min(p, k)), t.dw = Math.abs(g - t.dleft), t.dh = Math.abs(p - t.dtop), t.dw === 0 || t.dh === 0)
             return;
-          let l = t.dtop > m ? m : t.dtop, q = t.dleft > f ? f : t.dleft, B = t.dw, Y = t.dh;
+          let c = t.dtop > p ? p : t.dtop, A = t.dleft > g ? g : t.dleft, M = t.dw, Y = t.dh;
           t.rect && e.remove(t.rect);
-          const u = e.getZoom(), W = v / u;
-          t.rect = new L.Rect({
-            left: q,
-            top: l,
-            width: B,
+          const d = e.getZoom(), C = le / d;
+          t.rect = new T.Rect({
+            left: A,
+            top: c,
+            width: M,
             height: Y,
-            fill: Le,
-            stroke: a,
-            strokeWidth: W,
+            fill: Se,
+            stroke: ie,
+            strokeWidth: C,
             strokeUniform: !0,
             strokeDashArray: je,
             selectable: !1,
@@ -320,46 +364,53 @@ const We = ({
             statefullCache: !1,
             noScaleCache: !1
           }), 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);
+          const X = i.current.horizontal, H = i.current.vertical;
+          if (X && H && e.getObjects().includes(X) && e.getObjects().includes(H)) {
+            const W = Math.min(e.getObjects().indexOf(X), e.getObjects().indexOf(H));
+            e.getObjects().indexOf(t.rect) < W && e.moveTo(t.rect, W + 1);
           }
           e.renderAll();
         }
-      if (g && (t.dleft === -1 || t.dtop === -1)) {
-        const s = e.getPointer(o);
-        M(s.x, s.y);
+      if (t.dleft === -1 || t.dtop === -1) {
+        let l, h;
+        if (b) {
+          const f = e.getPointer(o);
+          l = f.x, h = f.y;
+        } else {
+          const f = e.getZoom(), m = e.viewportTransform ? e.viewportTransform[4] / f : 0, k = e.viewportTransform ? e.viewportTransform[5] / f : 0;
+          l = (n - r.left) / f - m, h = (u - r.top) / f - k;
+        }
+        R(l, h);
       }
-    }, he = () => {
-    }, me = (o) => {
-      const r = e.getPointer(o.e);
-      M(r.x, r.y);
-    }, ge = (o) => {
-      if (!T)
+    }, xe = () => {
+    }, Le = (o) => {
+      const s = e.getPointer(o.e);
+      R(s.x, s.y);
+    }, we = (o) => {
+      if (!y)
         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;
+      const r = e.getPointer(o.e);
+      t.dleft = r.x, t.dtop = r.y;
     };
-    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) => {
+    e.on("mouse:down:before", we), e.on("mouse:down", B), e.on("mouse:move", ee), e.on("mouse:up", te), e.on("mouse:out", xe), e.on("mouse:over", Le), document.addEventListener("mousemove", ae);
+    const Ee = (o) => {
       if (t.dleft === -1 || t.dtop === -1)
         return;
-      const r = e.getPointer(o);
-      K({
+      const s = e.getPointer(o);
+      te({
         e: o,
-        pointer: r
+        pointer: s
       });
     };
-    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 = {
+    return document.addEventListener("mouseup", Ee), () => {
+      e.off("mouse:down:before", we), e.off("mouse:down", B), e.off("mouse:move", ee), e.off("mouse:up", te), e.off("mouse:out", xe), e.off("mouse:over", Le), document.removeEventListener("mousemove", ae), document.removeEventListener("mouseup", Ee), t.rect && (e.remove(t.rect), e.renderAll()), i.current.horizontal && e.getObjects().includes(i.current.horizontal) && e.remove(i.current.horizontal), i.current.vertical && e.getObjects().includes(i.current.vertical) && e.remove(i.current.vertical), i.current = {
         horizontal: null,
         vertical: null
       }, e.skipTargetFind = !1, e.defaultCursor = "default";
-      const o = G();
+      const o = V(), s = new Set(v.current.values());
       e.getObjects().forEach((r) => {
-        r instanceof L.Rect && o.has(r) ? r.set({
+        r instanceof T.Rect && o.has(r) ? r.set({
           evented: !0,
           selectable: !1,
           lockMovementX: !0,
@@ -367,55 +418,67 @@ const We = ({
           lockScalingX: !0,
           lockScalingY: !0,
           lockRotation: !0
+        }) : s.has(r) ? r.set({
+          evented: !1,
+          selectable: !1,
+          lockMovementX: !0,
+          lockMovementY: !0,
+          lockScalingX: !1,
+          // 允许缩放，用于抵消画布缩放
+          lockScalingY: !1,
+          // 允许缩放，用于抵消画布缩放
+          lockRotation: !0,
+          hasControls: !1,
+          hasBorders: !1
         }) : (r.set("evented", !0), r.set("selectable", !0));
       });
     };
-  }, [e, T, ee, F, oe, y, re, X, ie, ne, le, se, N, S, te, p, G, de]), V(() => {
+  }, [e, y, ce, G, ue, I, fe, D, he, me, ge, be, Q, P, de, x, V, v, pe]), se(() => {
     if (!e)
       return;
-    const k = (x) => {
-      P.current = {
-        clientX: x.clientX,
-        clientY: x.clientY
+    const L = (w) => {
+      N.current = {
+        clientX: w.clientX,
+        clientY: w.clientY
       };
     };
-    return document.addEventListener("mousemove", k), () => {
-      document.removeEventListener("mousemove", k);
+    return document.addEventListener("mousemove", L), () => {
+      document.removeEventListener("mousemove", L);
     };
-  }, [e]), V(() => {
-    if (!e || !T)
+  }, [e]), se(() => {
+    if (!e || !y)
       return;
-    let k = e.getZoom();
-    const x = () => {
-      const E = n.current.horizontal, j = n.current.vertical;
-      if (!E || !j)
+    let L = e.getZoom();
+    const w = () => {
+      const S = i.current.horizontal, E = i.current.vertical;
+      if (!S || !E)
         return;
-      const R = e.getZoom();
-      if (Math.abs(R - k) < 1e-3)
+      const j = e.getZoom();
+      if (Math.abs(j - L) < 1e-3)
         return;
-      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
+      L = j;
+      const $ = Xe / j, _ = e.getWidth(), K = e.getHeight(), F = _ / j, Z = K / j, R = Math.max(F, Z) * 3, t = (S.x1 + S.x2) / 2;
+      S.y1, E.x1;
+      const B = (E.y1 + E.y2) / 2;
+      S.set({
+        strokeWidth: $,
+        x1: t - R,
+        x2: t + R
+      }), E.set({
+        strokeWidth: $,
+        y1: B - R,
+        y2: B + R
       }), e.renderAll();
-    }, C = () => {
-      x();
+    }, z = () => {
+      w();
     };
-    return e.on("after:render", C), x(), () => {
-      e.off("after:render", C);
+    return e.on("after:render", z), w(), () => {
+      e.off("after:render", z);
     };
-  }, [e, T]), {
-    stopDraw: F
+  }, [e, y]), {
+    stopDraw: G
   };
 };
 export {
-  We as useDrawingMode
+  Ge as useDrawingMode
 };