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

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

@@ -1,57 +1,58 @@
-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 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: 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: 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 D = ue(() => {
-    const R = /* @__PURE__ */ new Set();
-    return re.current.forEach((T) => {
-      T.forEach((W) => {
-        R.add(W);
+  const V = Ae(() => {
+    const L = /* @__PURE__ */ new Set();
+    return ke.current.forEach((w) => {
+      w.forEach((z) => {
+        L.add(z);
       });
-    }), R;
-  }, [re]), l = fe({
+    }), L;
+  }, [ke]), i = ne({
     horizontal: null,
     vertical: null
-  }), Le = fe({
+  }), N = ne(null), Oe = ne({
     dleft: -1,
     dtop: -1,
     dw: 0,
     dh: 0,
     rect: null
-  }), Z = ue(() => {
+  }), G = Ae(() => {
     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 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 = D();
-        e.getObjects().forEach((i) => {
-          i instanceof b.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,131 +60,198 @@ 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");
+          }) : 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;
     }
-    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 = {
+    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 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 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,
       // 导出时不包含此线
       strokeUniform: !0,
       // 设置为 true，使线宽随缩放调整以保持视觉一致
-      visible: !1
-      // 初始状态隐藏，只有鼠标进入画布时才显示
-    }), _ = new b.Line([0, -O, 0, O], {
-      stroke: me,
-      strokeWidth: F,
-      strokeDashArray: ge,
+      visible: !0
+      // 画框模式下常显辅助线
+    }), Z = new T.Line([0, -_, 0, _], {
+      stroke: Ye,
+      strokeWidth: K,
+      strokeDashArray: Ce,
       selectable: !1,
       evented: !1,
       excludeFromExport: !0,
       // 导出时不包含此线
       strokeUniform: !0,
       // 设置为 true，使线宽随缩放调整以保持视觉一致
-      visible: !1
-      // 初始状态隐藏，只有鼠标进入画布时才显示
+      visible: !0
+      // 画框模式下常显辅助线
     });
-    l.current = {
-      horizontal: S,
-      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)
+    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 u = e.getZoom(), g = e.getWidth(), c = e.getHeight(), k = g / u, p = c / u, f = Math.max(k, p) * 3;
-      i.set({
-        x1: o - f,
-        y1: r,
-        x2: o + f,
-        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
         // 显示辅助线
-      }), d.set({
-        x1: o,
-        y1: r - f,
-        x2: o,
-        y2: r + f,
+      }), r.setCoords(), n.set({
+        x1: U,
+        y1: He,
+        x2: U,
+        y2: Ie,
         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) => {
+      }), 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 (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: r,
+          clientY: n
+        }), l = e.getPointer(b);
+        R(l.x, l.y);
+      }
+    }
+    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;
       }
-    }, Ae = (o) => {
-      const r = e.getPointer(o.e);
-      z(r.x, r.y);
-    }, B = (o) => {
-      if (Ae(o), t.dleft === -1 || t.dtop === -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)
-        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) => {
+    }, 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 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 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,
+              selectable: !1,
+              evented: !1,
+              objectCaching: !1,
+              // 禁用缓存，避免缩放时边框变虚
+              statefullCache: !1,
+              noScaleCache: !1
+            }), e.add(t.rect);
+          }
+          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);
+      }
+      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, d = r.y;
-      if (t.dw = Math.abs(i - t.dleft), t.dh = Math.abs(d - 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 u = t.dtop > d ? d : t.dtop, g = t.dleft > i ? i : t.dleft, c = t.dw, k = 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 p = Q(g, u), f = c, N = k, x = e.getZoom(), w = K / x, n = new b.Rect({
-        left: g,
+      const f = ue(b, u), m = l, k = h, g = e.getZoom(), p = le / g, c = new T.Rect({
+        left: b,
         top: u,
-        width: c,
-        height: k,
-        fill: Ee,
+        width: l,
+        height: h,
+        fill: Be,
         // 无填充色
-        stroke: G,
-        strokeWidth: w,
+        stroke: ie,
+        strokeWidth: p,
         strokeUniform: !0,
         // 边框宽度不受缩放影响
         selectable: !0,
@@ -203,131 +271,146 @@ 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(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 j = {
+      const Y = {
         id: `region-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: `${xe}${$ + 1}`,
+        name: `${Ue}${A + 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, f.x),
+          y: Math.max(0, f.y),
+          width: m,
+          height: k
         },
-        content: Y
+        content: M
       };
-      if (h.current.set(n, j), oe(n, j), P(n), U) {
-        const s = h.current.get(n);
-        s && U(s, "create");
+      if (x.current.set(c, Y), be(c, Y), D(c), Q) {
+        const d = x.current.get(c);
+        d && Q(d, "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);
+      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);
             }
-            v(y, "create");
+            he(C, "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((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 && n && e.getObjects().includes(n) && (e.setActiveObject(n), e.renderAll(), M)) {
-            const s = h.current.get(n);
-            s && M(s);
+          if (e && c && e.getObjects().includes(c) && (e.setActiveObject(c), e.renderAll(), P)) {
+            const d = x.current.get(c);
+            d && P(d);
           }
         }, 0);
-      }, 0), ie(n), n.on("modified", () => {
-        P(n);
-      }), n.on("moved", () => {
-        P(n);
+      }, 0), pe(c), c.on("modified", () => {
+        D(c);
+      }), c.on("moved", () => {
+        D(c);
       }), setTimeout(() => {
-        if (a) {
-          const s = Array.from(h.current.values());
-          a(s);
+        if (I) {
+          const d = Array.from(x.current.values());
+          I(d);
         }
-      }, 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))
-        if (g) {
-          const c = e.getPointer(o);
-          B({
+      }, 0), t.dtop = -1, t.dleft = -1, e.selection = !1, de(!1);
+    }, ae = (o) => {
+      N.current = {
+        clientX: o.clientX,
+        clientY: o.clientY
+      };
+      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 (b) {
+          const l = e.getPointer(o);
+          ee({
             e: o,
-            pointer: c
+            pointer: l
           });
         } 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 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 n = t.dtop > w ? w : t.dtop, $ = t.dleft > x ? x : t.dleft, Y = t.dw, j = 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 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 d = e.getZoom(), C = le / d;
+          t.rect = new T.Rect({
+            left: A,
+            top: c,
+            width: M,
+            height: Y,
+            fill: Se,
+            stroke: ie,
+            strokeWidth: C,
             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 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();
         }
-    }, ne = () => {
-      E();
-    }, se = (o) => {
-      const r = e.getPointer(o.e);
-      z(r.x, r.y);
-    }, ce = (o) => {
-      if (!C)
+      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);
+      }
+    }, 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", 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", 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);
-      I({
+      const s = e.getPointer(o);
+      te({
         e: o,
-        pointer: r
+        pointer: s
       });
     };
-    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", 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;
-      const o = D();
+      }, e.skipTargetFind = !1, e.defaultCursor = "default";
+      const o = V(), s = new Set(v.current.values());
       e.getObjects().forEach((r) => {
-        r instanceof b.Rect && o.has(r) ? r.set({
+        r instanceof T.Rect && o.has(r) ? r.set({
           evented: !0,
           selectable: !1,
           lockMovementX: !0,
@@ -335,43 +418,67 @@ const Te = ({
           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, C, q, Z, Q, a, V, P, v, ee, te, oe, U, M, J, h, D, ie]), he(() => {
-    if (!e || !C)
+  }, [e, y, ce, G, ue, I, fe, D, he, me, ge, be, Q, P, de, x, V, v, pe]), se(() => {
+    if (!e)
+      return;
+    const L = (w) => {
+      N.current = {
+        clientX: w.clientX,
+        clientY: w.clientY
+      };
+    };
+    return document.addEventListener("mousemove", L), () => {
+      document.removeEventListener("mousemove", L);
+    };
+  }, [e]), se(() => {
+    if (!e || !y)
       return;
-    let R = e.getZoom();
-    const T = () => {
-      const m = l.current.horizontal, L = l.current.vertical;
-      if (!m || !L)
+    let L = e.getZoom();
+    const w = () => {
+      const S = i.current.horizontal, E = i.current.vertical;
+      if (!S || !E)
         return;
-      const A = e.getZoom();
-      if (Math.abs(A - R) < 1e-3)
+      const j = e.getZoom();
+      if (Math.abs(j - L) < 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
+      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();
-    }, W = () => {
-      T();
+    }, z = () => {
+      w();
     };
-    return e.on("after:render", W), T(), () => {
-      e.off("after:render", W);
+    return e.on("after:render", z), w(), () => {
+      e.off("after:render", z);
     };
-  }, [e, C]), {
-    stopDraw: Z
+  }, [e, y]), {
+    stopDraw: G
   };
 };
 export {
-  Te as useDrawingMode
+  Ge as useDrawingMode
 };