@glodon-aiot/dataset-annotation 3.2.2-beta.2 → 3.2.2-beta.4

package/dist/es/components/OcrAnnotation/MarkOCRBoxModal/OCRBoxMaker/index.mjs

@@ -0,0 +1,756 @@
+var Re = Object.defineProperty, ve = Object.defineProperties;
+var Ue = Object.getOwnPropertyDescriptors;
+var fe = Object.getOwnPropertySymbols;
+var Ce = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable;
+var Ee = Math.pow, ke = (r, m, s) => m in r ? Re(r, m, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[m] = s, Q = (r, m) => {
+  for (var s in m || (m = {}))
+    Ce.call(m, s) && ke(r, s, m[s]);
+  if (fe)
+    for (var s of fe(m))
+      Ye.call(m, s) && ke(r, s, m[s]);
+  return r;
+}, re = (r, m) => ve(r, Ue(m));
+var ge = (r, m) => {
+  var s = {};
+  for (var p in r)
+    Ce.call(r, p) && m.indexOf(p) < 0 && (s[p] = r[p]);
+  if (r != null && fe)
+    for (var p of fe(r))
+      m.indexOf(p) < 0 && Ye.call(r, p) && (s[p] = r[p]);
+  return s;
+};
+import { jsx as S, jsxs as Xe } from "react/jsx-runtime";
+import { useState as U, useEffect as F } from "react";
+import { fabric as z } from "fabric";
+import le from "ahooks/lib/useKeyPress";
+import { Spin as $e, Space as Ie, Radio as me, Tooltip as se, Button as he } from "antd";
+import Me from "react-dom";
+import "./style.less.mjs";
+import Fe from "./images/delete.png.mjs";
+import { ZoomInOutlined as Ne, ZoomOutOutlined as Le, DragOutlined as We } from "@ant-design/icons";
+import Ae from "../../../Iconfont/index.mjs";
+import { getUuid as Te } from "../../../../utils/index.mjs";
+const Pe = (r) => {
+  const m = r.calcTransformMatrix(), s = r.canvas.backgroundImage;
+  return r.get("points").map(function(g) {
+    return new z.Point(g.x - r.pathOffset.x, g.y - r.pathOffset.y);
+  }).map(function(g) {
+    return z.util.transformPoint(g, m);
+  }).map((g) => {
+    let f, w;
+    return g.x <= s.left ? f = s.left : g.x > s.left + s.width ? f = s.left + s.width : f = g.x, g.y <= s.top ? w = s.top : g.y > s.top + s.height ? w = s.top + s.height : w = g.y, {
+      x: f,
+      y: w
+    };
+  });
+}, ze = (r, m) => {
+  const s = r.backgroundImage;
+  return !(s && typeof s != "string" && s.top !== void 0 && s.height !== void 0 && s.left !== void 0 && s.width !== void 0 && (m.x < s.left || m.y < s.top || m.x > s.left + s.width || m.y > s.top + s.height));
+};
+function Se(r, m) {
+  let s = -1, p = -1, a = 0, g = 0, f, w, X = !1;
+  r.on("mouse:down", (e) => {
+    X = !0;
+    const I = r.getZoom(), h = r.viewportTransform ? r.viewportTransform[4] / I : 0, T = r.viewportTransform ? r.viewportTransform[5] / I : 0;
+    p = e.e.offsetX / I - h, s = e.e.offsetY / I - T;
+  }), r.on("mouse:up", (e) => {
+    if (X = !1, p === -1 && s === -1)
+      return;
+    const I = r.getZoom(), h = r.viewportTransform ? r.viewportTransform[4] / I : 0, T = r.viewportTransform ? r.viewportTransform[5] / I : 0, P = (e.e.offsetX > r.getWidth() ? r.getWidth() / I : e.e.offsetX / I) - h, Z = (e.e.offsetY > r.getHeight() ? r.getHeight() / I : e.e.offsetY / I) - T;
+    if (a = Math.abs(P - p), g = Math.abs(Z - s), a === 0 || g === 0)
+      return;
+    const k = s > Z ? Z : s, D = p > P ? P : p, C = a, L = g, W = [{
+      x: D,
+      y: k
+    }, {
+      x: D + C,
+      y: k
+    }, {
+      x: D + C,
+      y: k + L
+    }, {
+      x: D,
+      y: k + L
+    }];
+    W.every((_) => ze(r, _)) && (f = new z.Polygon(W, {
+      fill: "rgba(255, 69, 0, 0.45)",
+      stroke: "rgb(255, 69, 0)",
+      strokeWidth: 1
+    }), f.set("strokeUniform", !0), r.add(f), r.setActiveObject(f), m && m(f, w), r.skipTargetFind = !1);
+  }), r.on("mouse:move", (e) => {
+    e.target;
+  });
+}
+function pe(r, m, s) {
+  const p = {
+    type: "roof",
+    background: "",
+    border: ""
+  };
+  let a, g = [], f = [], w = [], X = [], e = 0, I = null, h, T, P, Z = !1, k, D, C;
+  const L = r.getZoom(), W = 2 / L, _ = [7 / L, 10 / L];
+  r.on("mouse:down", (l) => {
+    var G;
+    const u = r.getZoom(), x = r.viewportTransform ? r.viewportTransform[4] / u : 0, B = r.viewportTransform ? r.viewportTransform[5] / u : 0;
+    if (a && l.e.offsetX / u - x === a.x - x)
+      return;
+    X = [], a = {
+      x: l.e.offsetX / u - x,
+      y: l.e.offsetY / u - B
+    }, e || (h = l.e.offsetX / u - x, T = l.e.offsetY / u - B);
+    const R = {
+      x: a.x,
+      y: a.y
+    };
+    g.push(R);
+    const O = [R.x, R.y, R.x, R.y], j = [h, T, R.x, R.y];
+    if ((G = f[f.length - 1]) == null || G.set({
+      strokeDashArray: []
+    }), f.push(new z.Line(O, {
+      strokeWidth: W,
+      selectable: !1,
+      stroke: "#508BEE",
+      strokeUniform: !0
+    })), w.push(new z.Line(j, {
+      strokeWidth: W,
+      strokeDashArray: _,
+      selectable: !1,
+      stroke: "#508BEE",
+      strokeUniform: !0
+    })), X.push(new z.Line(j, {
+      strokeWidth: W,
+      selectable: !1,
+      stroke: "#508BEE",
+      strokeUniform: !0
+    })), e > 1) {
+      if (s && e >= s - 1) {
+        b();
+        return;
+      }
+      const N = f.length - 2;
+      if (P = f.some((K) => V(K, f[N])), Z = f.some((K) => V(K, X[0])), P || Z) {
+        e--, P = !1, g.splice(g.length - 1, 1), r.remove(f[N]), f.splice(N, 2);
+        const K = [f[f.length - 1].x2, f[f.length - 1].y2, f[f.length - 1].x2, f[f.length - 1].y2];
+        f.push(new z.Line(K, {
+          strokeWidth: W,
+          selectable: !1,
+          stroke: "#508BEE"
+        })), w[0].set({
+          x2: f[f.length - 1].x2,
+          y2: f[f.length - 1].y2
+        });
+      }
+      const te = w.splice(0, 1);
+      w = [], w.push(...te), r.add(f[e]);
+    } else
+      e !== 1 ? r.add(f[e], w[e]) : r.add(f[e]);
+    e++;
+  }), r.on("mouse:move", (l) => {
+    const u = r.getZoom(), x = r.viewportTransform ? r.viewportTransform[4] / u : 0, B = r.viewportTransform ? r.viewportTransform[5] / u : 0;
+    f[0] !== null && f[0] !== void 0 && p.type == "roof" && (k = l.e.offsetX / u - x, D = l.e.offsetY / u - B, f[e - 1].set({
+      x2: k,
+      y2: D,
+      strokeDashArray: _
+    }), w[0].set({
+      x2: k,
+      y2: D
+    }), r.renderAll());
+  });
+  const b = () => {
+    r.off("mouse:down"), f.forEach((l) => r.remove(l)), w.forEach((l) => r.remove(l)), d(), I && r.add(I), r.renderAll(), g = [], f = [], w = [], e = 0;
+  }, q = () => {
+    [...f, ...w, ...X].forEach((l) => r.remove(l)), r.renderAll(), g = [], f = [], w = [], e = 0;
+  };
+  r.on("selection:created", q), document.addEventListener("keydown", (l) => {
+    l.key === "Escape" && q();
+  });
+  const d = () => {
+    const l = oe(g), u = J(g), x = Q({}, g[0]);
+    g.push(x), g.some((B, R) => {
+      var O, j;
+      ((j = (O = f[f.length - 1]) == null ? void 0 : O.aCoords) == null ? void 0 : j.bl.x) == B.x && g.splice(R, 1);
+    }), g.every((B) => ze(r, B)) ? (I = new z.Polyline(g, {
+      fill: "rgba(80, 139, 238, 0.45)",
+      strokeWidth: W,
+      stroke: "#508BEE",
+      left: l,
+      top: u
+    }), q(), m && m(I, C)) : pe(r, m, 4);
+  }, J = (l) => {
+    let u = 999999;
+    for (let x = 0; x < e; x++)
+      l[x].y < u && (u = l[x].y);
+    return Math.abs(u);
+  }, oe = (l) => {
+    let u = 999999;
+    for (let x = 0; x < e; x++)
+      l[x].x < u && (u = l[x].x);
+    return Math.abs(u);
+  }, V = (l, u) => {
+    const x = l.y2 - l.y1, B = l.x1 - l.x2, R = x * l.x1 + B * l.y1, O = u.y2 - u.y1, j = u.x1 - u.x2, G = O * u.x1 + j * u.y1, N = x * j - O * B;
+    if (N == 0)
+      return !1;
+    {
+      const te = (j * R - B * G) / N, K = (x * G - O * R) / N;
+      if ((y(l.x1, te, l.x2) || y(l.y1, K, l.y2)) && (y(u.x1, te, u.x2) || y(u.y1, K, u.y2)))
+        return !0;
+    }
+    return !1;
+  }, y = (l, u, x) => Math.abs(l - u) < 1e-6 || Math.abs(u - x) < 1e-6 ? !1 : l < u && u < x || x < u && u < l;
+}
+const de = (r) => {
+  r.off("mouse:down"), r.off("mouse:up"), r.off("mouse:move");
+}, je = (r, [m, s, p], a, g) => {
+  const f = new z.Polygon(r, {
+    fill: `rgba(${m},${s}, ${p}, 0.45)`,
+    stroke: `rgba(${m},${s}, ${p}, 1)`,
+    strokeWidth: 0
+  });
+  a == null || a.add(f);
+  const w = () => {
+    if (!g || !a)
+      return;
+    const h = new z.Text(g(), {
+      fill: "#FFFFFF",
+      fontSize: 12,
+      selectable: !1,
+      top: 4,
+      left: 8
+    }), T = new z.Rect({
+      selectable: !1,
+      strokeWidth: 0,
+      fill: `rgb(${m},${s},${p})`,
+      rx: 2,
+      ry: 2,
+      width: (h.width || 0) + 16,
+      height: (h.height || 0) + 8,
+      left: 0,
+      top: 0
+    });
+    return new z.Group([T, h], {
+      selectable: !1,
+      // lockScalingX: false,
+      // lockScalingY: false,
+      scaleX: 1 / a.getZoom(),
+      scaleY: 1 / a.getZoom()
+    });
+  };
+  let X;
+  const e = () => {
+    var h, T;
+    if (!(!f || !g || !a)) {
+      if (X || (X = w(), I()), X.canvas === a) {
+        const P = X.getObjects().find((k) => k.type === "rect"), Z = X.getObjects().find((k) => k.type === "text");
+        if (Z && g) {
+          Z.set({
+            text: g(),
+            left: 8
+            // fontSize: this.scaledNumber(12),
+          });
+          const k = (Z.getBoundingRect().width || 0) + 16;
+          P == null || P.set({
+            fill: `rgba(${m},${s}, ${p}, 1)`,
+            width: k,
+            left: -k / 2
+          }), Z.set({
+            left: -k / 2 + 8
+          });
+          const D = ((h = f.aCoords) == null ? void 0 : h.tl.x) !== void 0 ? (T = f.aCoords) == null ? void 0 : T.tl.x : void 0;
+          X.set({
+            left: D,
+            width: k
+          });
+        }
+      } else
+        a == null || a.add(X);
+      I();
+    }
+  }, I = () => {
+    var D, C, L, W;
+    if (!f || !X || !a)
+      return;
+    const h = X.getObjects().find((_) => _.type === "rect");
+    if (!h)
+      return;
+    const T = h.height ? h.height : void 0, P = h.width ? h.width : void 0, Z = ((D = f.aCoords) == null ? void 0 : D.tl.y) !== void 0 && T !== void 0 && h.scaleY ? ((C = f.aCoords) == null ? void 0 : C.tl.y) - T / a.getZoom() : void 0, k = ((L = f.aCoords) == null ? void 0 : L.tl.x) !== void 0 ? (W = f.aCoords) == null ? void 0 : W.tl.x : void 0;
+    X.set({
+      top: Z,
+      left: k,
+      height: T,
+      width: P,
+      scaleX: 1 / a.getZoom(),
+      scaleY: 1 / a.getZoom()
+    });
+  };
+  return e(), [f, X];
+}, He = (r, m, s, p) => {
+  if (!r) {
+    console.error("canvas is not exist");
+    return;
+  }
+  try {
+    r.remove(m), p && r.remove(p), s.canvas !== r && r.add(s);
+  } catch (a) {
+    console.error(a);
+  }
+}, ut = (r) => {
+  const {
+    imageUrl: m,
+    canvasElement: s,
+    labels: p = [],
+    onChange: a,
+    disabled: g,
+    renderLabelItem: f
+  } = r, [w, X] = U(!0), [e, I] = U(), [h, T] = U({}), [P, Z] = U({}), [k, D] = U(), [C, L] = U({
+    left: 0,
+    top: 0
+  }), [W, _] = U([1, 1]), [b, q] = U(), [d, J] = U(null), [oe, V] = U(), [y, l] = U([]), [u, x] = U(!0), [B, R] = U(), [O, j] = U("rect"), [G, N] = U(g || !1);
+  F(() => {
+    var i;
+    y.forEach((n) => {
+      p.find((t) => t.uuid === n.uuid) || e == null || e.remove(h[n.uuid]);
+    }), l((i = p == null ? void 0 : p.filter((n) => !!n)) == null ? void 0 : i.map((n) => {
+      var M, A;
+      const v = n, {
+        uuid: t,
+        box: o,
+        words: c,
+        type: Y,
+        catagoryId: E
+      } = v, $ = ge(v, [
+        "uuid",
+        "box",
+        "words",
+        "type",
+        "catagoryId"
+      ]);
+      return Q({
+        uuid: n.uuid,
+        box: ((M = n.box) == null ? void 0 : M.map((H) => [H[0] + C.left, H[1] + C.top])) || [],
+        words: n.words,
+        type: (A = n.type) == null ? void 0 : A.toLowerCase(),
+        catagoryId: n.catagoryId
+      }, $);
+    }));
+  }, [p, C]), F(() => {
+    if (e && u) {
+      const i = e.getActiveObject();
+      if (i) {
+        i === (b == null ? void 0 : b.polygon) && (e == null || e.remove(b == null ? void 0 : b.text), q(void 0)), e.remove(i), e.renderAll();
+        const n = y.findIndex((t) => h[t.uuid] === i);
+        n > -1 && (h[y[n].uuid] && (e == null || e.remove(h[y[n].uuid])), y.splice(n, 1), l([...y]), a([...y.map((t) => re(Q({}, t), {
+          box: t.box.map((o) => [o[0] - C.left, o[1] - C.top])
+        }))]));
+      } else
+        console.log("no active object", e.selection), e.discardActiveObject(), e.requestRenderAll();
+      x(!1);
+    }
+  }, [e, u, y]);
+  const te = (i) => {
+    var n;
+    ((n = i.target) == null ? void 0 : n.tagName) !== "INPUT" && x(!0);
+  };
+  le("Delete", te), le("Backspace", te), le("ctrl", () => {
+    N(!0);
+  }, {
+    events: ["keydown"]
+  }), le("ctrl", () => {
+    N(!1);
+  }, {
+    events: ["keyup"]
+  });
+  const K = () => {
+    T({}), Z({}), D(void 0), _([1, 1]), q(void 0), V(void 0), J(null), l([]), L({
+      left: 0,
+      top: 0
+    }), e == null || e.dispose(), I(void 0);
+  };
+  F(() => {
+    X(!0), K(), !(!s || !m) && z.Image.fromURL(m, (i) => {
+      i.set({
+        originX: "center",
+        originY: "center"
+      }), D(i), X(!1);
+    }, {
+      crossOrigin: "anonymous"
+    });
+  }, [s, m]), F(() => {
+    var H;
+    if (!s || !s.parentElement)
+      return;
+    if (!k && e) {
+      e.clear();
+      return;
+    }
+    const i = k == null ? void 0 : k.getElement();
+    if (!(i != null && i.width) || !(i != null && i.height))
+      return;
+    const n = i.width / i.height, t = s.parentElement.offsetWidth, o = s.parentElement.offsetHeight, c = t / i.width, Y = o / i.height;
+    let E = [t, o];
+    c > Y ? E = [o * n, o] : E = [t, t / n];
+    const $ = E[0] / i.width, v = E[1] / i.height, M = Math.min($, v);
+    _([M, M]);
+    const A = new z.Canvas(s, {
+      containerClass: "marking-canvas",
+      width: t,
+      height: o
+    });
+    if (A == null || A.setZoom(M), A == null || A.renderAll(), A && k) {
+      const ne = (t - E[0]) / M / 2, ae = (o - E[1]) / M / 2;
+      A.setBackgroundImage(
+        k,
+        A.renderAll.bind(A),
+        // 刷新画布
+        {
+          originX: "left",
+          originY: "top",
+          left: ne,
+          top: ae
+        }
+      ), L({
+        left: ne,
+        top: ae
+      }), J(null), l((H = p == null ? void 0 : p.filter((ee) => !!ee)) == null ? void 0 : H.map((ee) => {
+        var xe, we;
+        const ye = ee, {
+          uuid: qe,
+          box: Ge,
+          words: Ke,
+          type: _e,
+          catagoryId: Je
+        } = ye, Oe = ge(ye, [
+          "uuid",
+          "box",
+          "words",
+          "type",
+          "catagoryId"
+        ]);
+        return Q({
+          uuid: ee.uuid,
+          box: ((xe = ee.box) == null ? void 0 : xe.map((be) => [be[0] + C.left, be[1] + C.top])) || [],
+          words: ee.words,
+          type: (we = ee.type) == null ? void 0 : we.toLowerCase(),
+          catagoryId: ee.catagoryId
+        }, Oe);
+      })), I(A);
+    }
+  }, [k]), F(() => {
+    w || !e || (ue(e, y, oe), N((i) => (i ? e.getObjects().forEach((n) => n.set("evented", !1)) : e.getObjects().forEach((n) => n.set("evented", !0)), i)));
+  }, [y, e, oe, w]), F(() => {
+    oe || a([...y.map((i) => re(Q({}, i), {
+      box: i.box.map((n) => [n[0] - C.left, n[1] - C.top])
+    }))]);
+  }, [oe]);
+  const ue = (i, n, t = "") => {
+    T((o) => {
+      if (n == null || n.map((c) => {
+        var $, v;
+        const [Y, E] = je(($ = c.box) == null ? void 0 : $.map((M) => ({
+          x: M[0],
+          y: M[1]
+        })), ((v = c.type) == null ? void 0 : v.toLowerCase()) === "key" ? [255, 193, 0] : [80, 139, 238], i, f ? () => (console.log(c), f(c)) : void 0);
+        o[c.uuid] ? He(i, o[c.uuid], Y, P[c.uuid]) : Y.canvas !== i && (i.add(Y), i.add(E)), o[c.uuid] = Y, T(() => o), P[c.uuid] = E, Z(() => P);
+      }), t && (!d || d !== i.getActiveObject()))
+        try {
+          i == null || i.setActiveObject(o[t]), J(o[t]);
+        } catch (c) {
+          J(null), console.error(c);
+        }
+      return o;
+    });
+  };
+  F(() => {
+    const n = document.createElement("img");
+    n.src = Fe, n.setAttribute("style", "background: rgba(0, 0, 0, 0.45)");
+    function t(c, Y, E, $, v) {
+      c.save(), c.translate(Y, E), c.rotate(z.util.degreesToRadians(v.angle)), c.beginPath(), c.arc(0, 0, 12, 0, 2 * Math.PI), c.fillStyle = "rgba(0, 0, 0, 0.45)", c.fill(), c.strokeStyle = "rgba(0, 0, 0, 0)", c.stroke(), c.drawImage(n, -24 / 2, -24 / 2, 24, 24), c.restore();
+    }
+    const o = (c, Y, E, $) => {
+      var M;
+      const v = Y.target;
+      if (v) {
+        v === (b == null ? void 0 : b.polygon) && q(void 0), e == null || e.remove(v), e == null || e.renderAll();
+        const A = y.findIndex((H) => h[H.uuid].left === v.left && h[H.uuid].top === v.top);
+        console.log(e), A > -1 && (h[y[A].uuid] && (e == null || e.remove(h[y[A].uuid]), (M = P[y[A].uuid]) == null || M.remove()), y.splice(A, 1), a([...y.map((H) => re(Q({}, H), {
+          box: H.box.map((ne) => [ne[0] - C.left, ne[1] - C.top])
+        }))]));
+      }
+      return !1;
+    };
+    z.Object.prototype.controls.deleteControl = new z.Control({
+      x: 0.5,
+      y: -0.5,
+      offsetX: 16,
+      cursorStyle: "pointer",
+      mouseUpHandler: o,
+      render: t,
+      sizeX: 24,
+      sizeY: 24
+    });
+  }, [d, e]), F(() => {
+    var i;
+    if (w && s && !B) {
+      const n = document.createElement("div");
+      n.setAttribute("style", "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute;top: 0;"), (i = s.parentElement) == null || i.appendChild(n), Me.render(/* @__PURE__ */ S($e, {}), n), R(n);
+    } else
+      !w && B && (B.remove(), R(null));
+  }, [w, s, B]), F(() => {
+    var i, n;
+    b && (l([...y, {
+      uuid: b.uuid,
+      box: ((i = b.polygon.points) == null ? void 0 : i.map((t) => [t.x, t.y])) || [],
+      words: b.value || ""
+    }]), a([...y.map((t) => re(Q({}, t), {
+      box: t.box.map((o) => [o[0] - C.left, o[1] - C.top])
+    })), {
+      uuid: b.uuid,
+      box: ((n = b.polygon.points) == null ? void 0 : n.map((t) => [t.x - C.left, t.y - C.top])) || [],
+      words: b.value || ""
+    }]), e == null || e.remove(b.text), e == null || e.remove(b.polygon), q(void 0), V(b.uuid));
+  }, [b]);
+  const Be = () => {
+    let i = !1;
+    e && (e.on("mouse:down", (n) => {
+      i = !0, e.selection = !1;
+    }), e.on("mouse:move", (n) => {
+      if (i && n && n.e) {
+        const t = new z.Point(n.e.movementX, n.e.movementY);
+        e.relativePan(t);
+      }
+    }), e.on("mouse:up", (n) => {
+      i = !1, e.selection = !0;
+    }));
+  };
+  F(() => {
+    if (w && e && (ue(e, []), e.renderAll()), w || !e)
+      return;
+    if (ue(e, []), e.renderAll(), de(e), G) {
+      Be(), e.defaultCursor = "grab", e.on("mouse:down", () => e.setCursor("grabbing")), e.on("mouse:up", () => e.setCursor("grab")), console.log("evented", !1, e.getObjects()), e.getObjects().forEach((c) => c.set("evented", !1));
+      return;
+    }
+    console.log("evented", !0, e.getObjects()), e.getObjects().forEach((c) => c.set("evented", !0)), e.defaultCursor = "default", e.setCursor("default");
+    const i = (c, Y) => {
+      b && (e == null || e.remove(b.text), e == null || e.remove(b.polygon)), q({
+        polygon: c,
+        text: Y,
+        uuid: Te()
+      });
+    };
+    O === "rect" ? Se(e, i) : O === "quadri" && pe(e, i, 4);
+    const n = (c) => {
+      var E;
+      J(e.getActiveObject());
+      const Y = e.getActiveObject();
+      Y == null || Y.set({
+        borderColor: "#508BEE",
+        cornerColor: "white",
+        cornerSize: 7,
+        transparentCorners: !1,
+        cornerStrokeColor: "#508BEE"
+      }), (E = Object.keys(h)) == null || E.map(($) => {
+        Y === h[$] && V($);
+      });
+    }, t = (c) => {
+      var E;
+      de(e), J(e.getActiveObject());
+      const Y = e.getActiveObject();
+      (E = Object.keys(h)) == null || E.map(($) => {
+        Y === h[$] && V($);
+      });
+    }, o = () => {
+      J(null), V(void 0);
+    };
+    return e.on("selection:created", n), e.on("selection:updated", t), e.on("selection:cleared", o), () => {
+      e.off("selection:created", n), e.off("selection:updated", t), e.off("selection:cleared", o), e.off("mouse:down"), e.off("mouse:up"), e.off("mouse:move");
+    };
+  }, [e, O, G]), F(() => {
+    if (e)
+      return e.on("mouse:wheel", (i) => {
+        const n = i.e.deltaY;
+        ce(n, {
+          x: i.e.offsetX,
+          y: i.e.offsetY
+        });
+      }), () => {
+        e == null || e.off("mouse:wheel");
+      };
+  }, [e]), F(() => {
+    if (e)
+      return d == null || d.on("mousedown", () => {
+        e && de(e);
+      }), d == null || d.on("mouseup:before", () => {
+        var n;
+        if (!e)
+          return;
+        const i = d;
+        (n = Object.keys(h)) == null || n.map((t) => {
+          if (i === h[t]) {
+            const o = y.findIndex((c) => c.uuid === t);
+            if (o > -1) {
+              const c = Pe(i);
+              y[o].box = (c == null ? void 0 : c.map((Y) => [Y.x, Y.y])) || [];
+            }
+          }
+        }), l([...y]), a([...y.map((t) => re(Q({}, t), {
+          box: t.box.map((o) => [o[0] - C.left < 1e-11 ? 0 : o[0] - C.left, o[1] - C.top < 1e-11 ? 0 : o[1] - C.top])
+        }))]);
+      }), d == null || d.on("moving", (i) => {
+        var t;
+        if (!e)
+          return;
+        const n = d;
+        e.getZoom(), (t = Object.keys(h)) == null || t.map((o) => {
+          if (n === h[o]) {
+            const c = y.findIndex((E) => E.uuid === o), Y = Pe(n);
+            y[c].box = (Y == null ? void 0 : Y.map((E) => [E.x, E.y])) || [];
+          }
+        });
+      }), () => {
+        d == null || d.off("mousedown"), d == null || d.off("mouseup:before"), d == null || d.off("moving");
+      };
+  }, [d, y, O]), F(() => {
+    if (e) {
+      if (!d) {
+        const i = (n, t) => {
+          b && (e == null || e.remove(b.text), e == null || e.remove(b.polygon)), q({
+            polygon: n,
+            text: t,
+            uuid: Te()
+          });
+        };
+        de(e), O === "rect" ? Se(e, i) : O === "quadri" && pe(e, i, 4);
+      }
+      d == null || d.on("moving", ie), d == null || d.on("scaling", ie), d == null || d.on("rotating", ie), d == null || d.on("skewing", ie), d == null || d.on("resizing", ie);
+    }
+  }, [d]);
+  const ie = (i) => {
+    Ze(i);
+  }, Ze = (i) => {
+    if (!e)
+      return;
+    const n = i.transform.action;
+    i.transform.corner;
+    const t = i.transform.target, o = i.transform.target.canvas.backgroundImage;
+    i.transform.original, o && (t.top < o.top && t.set({
+      top: o.top
+    }), t.left < o.left && t.set({
+      left: o.left
+    }), (n === "drag" || n === "rotate") && (t.top + t.height > o.top + o.height && t.set({
+      top: o.height + o.top - t.height * t.scaleY
+    }), t.left + t.width > o.left + o.width && t.set({
+      left: o.width + o.left - t.width * t.scaleX
+    })), n === "rotate" && (t.aCoords.bl.x < o.left && t.set({
+      left: t.left + (o.left - t.aCoords.bl.x)
+    }), t.aCoords.tr.y < o.top && t.set({
+      top: t.top + (o.top - t.aCoords.tr.y)
+    }), t.aCoords.br.x > o.left + o.width && t.set({
+      left: t.left - (t.aCoords.br.x - (o.left + o.width))
+    }), t.aCoords.br.y > o.top + o.height && t.set({
+      top: t.top - (t.aCoords.br.y - (o.top + o.height))
+    })), n === "scale" && (t.top + t.height * t.scaleY > o.top + o.height && t.set({
+      top: t.height * t.scaleY > o.height ? o.top : o.top + o.height - t.height * t.scaleY,
+      height: t.height * t.scaleY > o.height ? o.height : t.height
+    }), t.left + t.width * t.scaleX > o.left + o.width && t.set({
+      left: o.width + o.left - t.width * t.scaleX
+    })), n === "scaleX" && (t.left + t.width * t.scaleX > o.left + o.width && t.set({
+      left: t.left - (t.left + t.width * t.scaleX - (o.left + o.width))
+    }), t.left < o.left && t.set({
+      left: o.left
+    })), n === "scaleY" && (t.top + t.height * t.scaleY > o.top + o.height && t.set({
+      top: t.top - (t.top + t.height * t.scaleY - (o.top + o.height))
+    }), t.top < o.top && t.set({
+      top: o.top
+    })), t.width * t.scaleX >= o.width && t.set({
+      left: o.left,
+      width: o.width / t.scaleX
+    }), t.height * t.scaleY >= o.height && t.set({
+      top: o.top,
+      height: o.height / t.scaleY
+    })), e.renderAll();
+  }, ce = (i, n) => {
+    if (!e)
+      return;
+    n || (n = {
+      x: e.getCenter().left,
+      y: e.getCenter().top
+    });
+    let t = e.getZoom();
+    t *= Ee(0.999, i), t > 20 && (t = 20), t < 0.01 && (t = 0.01), e.zoomToPoint(
+      n,
+      t
+      // 传入修改后的缩放级别
+    );
+  }, De = () => {
+    N(!G);
+  };
+  return F(() => {
+    N(g || !1);
+  }, [g]), /* @__PURE__ */ S("div", {
+    className: "marker-toolbar",
+    children: /* @__PURE__ */ S("div", {
+      className: "create-mode-select",
+      children: /* @__PURE__ */ Xe(Ie, {
+        direction: "vertical",
+        size: 16,
+        children: [!g && /* @__PURE__ */ S(me.Group, {
+          value: O,
+          buttonStyle: "solid",
+          onChange: (i) => j(i.target.value),
+          children: /* @__PURE__ */ Xe(Ie, {
+            direction: "vertical",
+            size: 16,
+            children: [/* @__PURE__ */ S(se, {
+              title: "矩形标注",
+              placement: "right",
+              children: /* @__PURE__ */ S(me.Button, {
+                value: "rect",
+                type: "icon",
+                children: /* @__PURE__ */ S(Ae, {
+                  type: "icon-biaozhu-juxingkuang"
+                })
+              })
+            }), /* @__PURE__ */ S(se, {
+              title: "四边形标注",
+              placement: "right",
+              children: /* @__PURE__ */ S(me.Button, {
+                value: "quadri",
+                children: /* @__PURE__ */ S(Ae, {
+                  type: "icon-biaozhu-sibianxing"
+                })
+              })
+            })]
+          })
+        }), /* @__PURE__ */ S(se, {
+          title: "放大-鼠标滚轮前滑",
+          placement: "right",
+          children: /* @__PURE__ */ S(he, {
+            icon: /* @__PURE__ */ S(Ne, {}),
+            onClick: () => {
+              ce(-100);
+            }
+          })
+        }), /* @__PURE__ */ S(se, {
+          title: "缩小-鼠标滚轮后滑",
+          placement: "right",
+          children: /* @__PURE__ */ S(he, {
+            icon: /* @__PURE__ */ S(Le, {}),
+            onClick: () => {
+              ce(100);
+            }
+          })
+        }), !g && /* @__PURE__ */ S(se, {
+          title: "拖动-按住ctrl",
+          placement: "right",
+          children: /* @__PURE__ */ S(he, {
+            icon: /* @__PURE__ */ S(We, {}),
+            className: G ? "active" : "",
+            onClick: De
+          })
+        })]
+      })
+    })
+  });
+};
+export {
+  ut as default
+};