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

package/dist/es/components/DetectionAnnotation/components/LabelMaker/RectLabel.mjs

@@ -1,20 +1,20 @@
-var j = Object.defineProperty, A = Object.defineProperties;
-var B = Object.getOwnPropertyDescriptors;
-var F = Object.getOwnPropertySymbols;
-var T = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
-var w = (l, i, s) => i in l ? j(l, i, { enumerable: !0, configurable: !0, writable: !0, value: s }) : l[i] = s, f = (l, i) => {
-  for (var s in i || (i = {}))
-    T.call(i, s) && w(l, s, i[s]);
-  if (F)
-    for (var s of F(i))
-      I.call(i, s) && w(l, s, i[s]);
-  return l;
-}, C = (l, i) => A(l, B(i));
-var d = (l, i, s) => (w(l, typeof i != "symbol" ? i + "" : i, s), s);
-import { fabric as g } from "fabric";
-import O from "./FabricCustomize.mjs";
+var A = Object.defineProperty, B = Object.defineProperties;
+var T = Object.getOwnPropertyDescriptors;
+var U = Object.getOwnPropertySymbols;
+var H = Object.prototype.hasOwnProperty, D = Object.prototype.propertyIsEnumerable;
+var C = (r, e, s) => e in r ? A(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s, d = (r, e) => {
+  for (var s in e || (e = {}))
+    H.call(e, s) && C(r, s, e[s]);
+  if (U)
+    for (var s of U(e))
+      D.call(e, s) && C(r, s, e[s]);
+  return r;
+}, m = (r, e) => B(r, T(e));
+var b = (r, e, s) => (C(r, typeof e != "symbol" ? e + "" : e, s), s);
+import { fabric as v } from "fabric";
+import I from "./FabricCustomize.mjs";
 import { formatColorToArray as X } from "../../../../utils/color.mjs";
-const z = {
+const O = {
   borderWidth: 2,
   controls: ["TL", "BL", "TR", "BR"],
   cornerStrokeColor: "#84868C",
@@ -23,15 +23,15 @@ const z = {
   active: !1
 };
 class M {
-  constructor(i, s, a) {
-    d(this, "config");
-    d(this, "color");
-    d(this, "_active", !1);
-    d(this, "_fabricRect", null);
-    d(this, "_label", null);
-    d(this, "_hover", !1);
-    d(this, "_strokeRect");
-    this._canvas = s, this.handlers = a, g.Rect.prototype.cornerColor = "blue", this.config = f(f({}, z), i), this.color = X(i.color), this._active = this.config.active || !1, s && this.render(s);
+  constructor(e, s, c) {
+    b(this, "config");
+    b(this, "color");
+    b(this, "_active", !1);
+    b(this, "_fabricRect", null);
+    b(this, "_label", null);
+    b(this, "_hover", !1);
+    b(this, "_strokeRect");
+    this._canvas = s, this.handlers = c, v.Rect.prototype.cornerColor = "blue", this.config = d(d({}, O), e), this.color = X(e.color), this._active = this.config.active || !1, s && this.render(s);
   }
   get object() {
     return this._fabricRect;
@@ -39,22 +39,24 @@ class M {
   get active() {
     return this._active;
   }
-  set active(i) {
+  set active(e) {
     var s;
-    this._active = i, (s = this._fabricRect) != null && s.canvas && (i && !this.config.hideDelete ? (this._fabricRect.set(this.activeStyle), this.canvas.setActiveObject(this._fabricRect)) : (this.canvas.discardActiveObject(), this.hover || this._fabricRect.set(this.normalStyle)), this.canvas.requestRenderAll());
+    this._active = e, (s = this._fabricRect) != null && s.canvas && (e && !this.config.hideDelete ? (this._fabricRect.set(m(d({}, this.activeStyle), {
+      lockUniScaling: !1
+    })), this._fabricRect.uniformScaling = !1, this.canvas.setActiveObject(this._fabricRect)) : (this.canvas.discardActiveObject(), this.hover || this._fabricRect.set(this.normalStyle)), this.canvas.requestRenderAll());
   }
   get hover() {
     return this._hover;
   }
-  set hover(i) {
-    var s, a;
-    this._hover = i, i ? (s = this._fabricRect) == null || s.set(this.hoverStyle) : this.active || (a = this._fabricRect) == null || a.set(this.normalStyle), this.canvas.requestRenderAll();
+  set hover(e) {
+    var s, c;
+    this._hover = e, e ? (s = this._fabricRect) == null || s.set(this.hoverStyle) : this.active || (c = this._fabricRect) == null || c.set(this.normalStyle), this.canvas.requestRenderAll();
   }
   get canvas() {
     return this._canvas;
   }
-  set canvas(i) {
-    this._canvas !== i && (this._canvas = i, this.render(i));
+  set canvas(e) {
+    this._canvas !== e && (this._canvas = e, this.render(e));
   }
   get normalStyle() {
     return {
@@ -68,7 +70,7 @@ class M {
     };
   }
   get activeStyle() {
-    return C(f({}, this.normalStyle), {
+    return m(d({}, this.normalStyle), {
       content: `<svg height="500" width="500"><text fill="#ffffff" font-size="45" x="50" y="86">${this.config.name}</text></svg>`,
       fill: `rgba(${this.color[0]},${this.color[1]}, ${this.color[2]}, 0.1)`
     });
@@ -77,40 +79,42 @@ class M {
     return this.activeStyle;
   }
   createRect() {
-    const i = {
+    const e = {
       hasBorders: !1,
       cornerSize: 6,
       cornerStrokeColor: "#84868C",
       cornerColor: "#FFFFFF",
       transparentCorners: !1
-    }, s = 0, a = new g.Rect(
+    }, s = 0, c = new v.Rect(
       // this.config.points?.map((p) => ({ x: p[0], y: p[1] })),
-      C(f(f({
+      m(d(d({
         left: this.config.points[0][0],
         top: this.config.points[0][1],
         width: this.config.points[2][0] - this.config.points[0][0] - s,
         height: this.config.points[2][1] - this.config.points[0][1] - s
-      }, i), this.normalStyle), {
+      }, e), this.normalStyle), {
         // 禁止缩放时翻转
-        lockScalingFlip: !0
+        lockScalingFlip: !0,
+        // 允许不保持比例调整（可以自由调整宽高）
+        lockUniScaling: !1
       })
     );
-    a.setControlsVisibility({
+    c.setControlsVisibility({
       mtr: !1
     });
-    const c = () => {
-      if (a.canvas !== this.canvas) {
-        this.canvas.off("after:render", c);
+    const l = () => {
+      if (c.canvas !== this.canvas) {
+        this.canvas.off("after:render", l);
         return;
       }
       this.canvas.contextContainer.strokeStyle = `rgb(${this.color[0]},${this.color[1]}, ${this.color[2]})`;
-      const o = a.getBoundingRect();
+      const o = c.getBoundingRect();
       this._strokeRect = this.canvas.contextContainer.strokeRect(o.left + 0.5, o.top + 0.5, o.width, o.height);
     };
-    return this.canvas.on("after:render", c), a;
+    return this.canvas.on("after:render", l), c;
   }
-  scaledNumber(i) {
-    return i / this.canvas.getZoom();
+  scaledNumber(e) {
+    return e / this.canvas.getZoom();
   }
   // getPolyVertices(poly: fabric.Rect) {
   //   const points = poly.points,
@@ -133,26 +137,26 @@ class M {
   //   });
   // }
   createLabelName() {
-    const [i, s, a] = this.color, c = new g.Text(this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name, {
+    const [e, s, c] = this.color, l = new v.Text(this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name, {
       fill: "#FFFFFF",
       fontSize: 12,
       selectable: !1,
       evented: !1,
       top: 4,
       left: 8
-    }), o = new g.Rect({
+    }), o = new v.Rect({
       selectable: !1,
       evented: !1,
       strokeWidth: 0,
-      fill: `rgb(${i},${s},${a})`,
+      fill: `rgb(${e},${s},${c})`,
       rx: 2,
       ry: 2,
-      width: (c.width || 0) + 16,
-      height: (c.height || 0) + 8,
+      width: (l.width || 0) + 16,
+      height: (l.height || 0) + 8,
       left: 0,
       top: 0
     });
-    return new g.Group([o, c], {
+    return new v.Group([o, l], {
       selectable: !1,
       evented: !1,
       // lockScalingX: false,
@@ -162,27 +166,27 @@ class M {
     });
   }
   renderLabel() {
-    var i, s;
+    var e, s;
     if (this._fabricRect) {
       if (this._label || (this._label = this.createLabelName(), this.setLabelPosition()), this._label.canvas === this.canvas) {
-        const a = this._label.getObjects().find((o) => o.type === "rect"), c = this._label.getObjects().find((o) => o.type === "text");
-        if (c) {
-          c.set({
+        const c = this._label.getObjects().find((o) => o.type === "rect"), l = this._label.getObjects().find((o) => o.type === "text");
+        if (l) {
+          l.set({
             text: this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name,
             left: 8
             // fontSize: this.scaledNumber(12),
           });
-          const o = (c.getBoundingRect().width || 0) + 16;
-          a == null || a.set({
+          const o = (l.getBoundingRect().width || 0) + 16;
+          c == null || c.set({
             fill: `rgba(${this.color[0]},${this.color[1]}, ${this.color[2]}, 1)`,
             width: o,
             left: -o / 2
-          }), c.set({
+          }), l.set({
             left: -o / 2 + 8
           });
-          const r = ((i = this._fabricRect.aCoords) == null ? void 0 : i.tl.x) !== void 0 ? (s = this._fabricRect.aCoords) == null ? void 0 : s.tl.x : void 0;
+          const g = ((e = this._fabricRect.aCoords) == null ? void 0 : e.tl.x) !== void 0 ? (s = this._fabricRect.aCoords) == null ? void 0 : s.tl.x : void 0;
           this._label.set({
-            left: r,
+            left: g,
             width: o
           });
         }
@@ -192,118 +196,130 @@ class M {
     }
   }
   setLabelPosition() {
-    var r, t, e, h;
+    var g, h, n, t;
     if (!this._fabricRect || !this._label)
       return;
-    const i = this._label.getObjects().find((b) => b.type === "rect");
-    if (!i)
+    const e = this._label.getObjects().find((i) => i.type === "rect");
+    if (!e)
       return;
-    const s = i.height ? i.height : void 0, a = i.width ? i.width : void 0, c = ((r = this._fabricRect.aCoords) == null ? void 0 : r.tl.y) !== void 0 && s !== void 0 && i.scaleY ? ((t = this._fabricRect.aCoords) == null ? void 0 : t.tl.y) - s / this.canvas.getZoom() : void 0, o = ((e = this._fabricRect.aCoords) == null ? void 0 : e.tl.x) !== void 0 ? (h = this._fabricRect.aCoords) == null ? void 0 : h.tl.x : void 0;
+    const s = e.height ? e.height : void 0, c = e.width ? e.width : void 0, l = ((g = this._fabricRect.aCoords) == null ? void 0 : g.tl.y) !== void 0 && s !== void 0 && e.scaleY ? ((h = this._fabricRect.aCoords) == null ? void 0 : h.tl.y) - s / this.canvas.getZoom() : void 0, o = ((n = this._fabricRect.aCoords) == null ? void 0 : n.tl.x) !== void 0 ? (t = this._fabricRect.aCoords) == null ? void 0 : t.tl.x : void 0;
     this._label.set({
-      top: c,
+      top: l,
       left: o,
       height: s,
-      width: a,
+      width: c,
       scaleX: 1 / this.canvas.getZoom(),
       scaleY: 1 / this.canvas.getZoom()
-    }), this.config = f({}, this.config);
+    }), this.config = d({}, this.config);
   }
-  addToCanvas(i) {
+  addToCanvas(e) {
     if (!this._fabricRect)
       return;
-    this.canvas = i, this.canvas.add(this._fabricRect), this._fabricRect.on("mouseover", (o) => {
+    this.canvas = e, this.canvas.add(this._fabricRect), this._fabricRect.on("mouseover", (h) => {
       this.hover = !0;
-    }), this._fabricRect.on("mouseout", (o) => {
+    }), this._fabricRect.on("mouseout", (h) => {
       this.hover = !1;
     }), this._fabricRect.on("mousedown", () => {
       this._fabricRect && this.canvas.setActiveObject(this._fabricRect);
-    });
-    const s = (o) => {
-      var r;
-      (r = o.selected) != null && r.some((t) => t === this._fabricRect) ? this.active = !0 : this.active && (this.active = !1);
-    };
-    this.canvas.on("selection:created", s), this.canvas.on("selection:updated", s), this.canvas.on("selection:cleared", (o) => {
+    }), this._handleSelectionUpdate && (this.canvas.off("selection:created", this._handleSelectionUpdate), this.canvas.off("selection:updated", this._handleSelectionUpdate)), this._handleSelectionCleared && this.canvas.off("selection:cleared", this._handleSelectionCleared);
+    const s = (h) => {
+      var n;
+      (n = h.selected) != null && n.some((t) => t === this._fabricRect) ? (this.active = !0, this._fabricRect && (this._fabricRect.set({
+        lockUniScaling: !1
+      }), this._fabricRect.uniformScaling = !1)) : this.active && (this.active = !1);
+    }, c = (h) => {
       this.active && (this.active = !1);
-    });
-    const a = (o) => {
-      var b, y, x, S, $, L;
-      const r = o.transform.action;
-      o.transform.corner;
-      const t = o.transform.target, e = o.transform.target.canvas.backgroundImage, h = 0;
-      if (e && (r === "drag" && (t.top < e.top && t.set({
-        top: e.top
-      }), t.top + (t.height + h) * t.scaleY > e.top + e.height && t.set({
-        top: e.height + e.top - (t.height + h) * t.scaleY
-      }), t.left < e.left && t.set({
-        left: e.left
-      }), t.left + (t.width + h) * t.scaleX > e.left + e.width && t.set({
-        left: e.width + e.left - (t.width + h) * t.scaleX
-      })), r === "scale" && (t.top + (t.height + h) * t.scaleY > e.top + e.height && t.set({
-        top: (t.height + h) * t.scaleY > e.height ? e.top : e.top + e.height - (t.height + h) * t.scaleY,
-        height: (t.height + h) * t.scaleY > e.height ? e.height - h : t.height + h
-      }), t.left + (t.width + h) * t.scaleX > e.left + e.width && t.set({
-        left: e.width + e.left - (t.width + h) * t.scaleX
-      })), r === "scaleX" && (t.left + (t.width + h) * t.scaleX > e.left + e.width && t.set({
-        left: t.left - (t.left + (t.width + h) * t.scaleX - (e.left + e.width))
-      }), t.left < e.left && t.set({
-        left: e.left
-      })), r === "scaleY" && (t.top + (t.height + h) * t.scaleY > e.top + e.height && t.set({
-        top: t.top - (t.top + (t.height + h) * t.scaleY - (e.top + e.height))
-      }), t.top < e.top && t.set({
-        top: e.top
-      })), (t.width + h) * t.scaleX > e.width && t.set({
-        left: e.left,
-        width: (e.width - h) / t.scaleX
-      }), (t.height + h) * t.scaleY > e.height && t.set({
-        top: e.top,
-        height: (e.height - h) / t.scaleY
-      })), e) {
-        const v = t.getBoundingRect(!0), R = (b = e.left) != null ? b : 0, m = (y = e.top) != null ? y : 0, k = R + ((x = e.width) != null ? x : 0), Y = m + ((S = e.height) != null ? S : 0);
-        if (v.width > (($ = e.width) != null ? $ : v.width)) {
-          const u = (e.width - h) / Math.max(t.width, 1);
+    };
+    this.canvas.on("selection:created", s), this.canvas.on("selection:updated", s), this.canvas.on("selection:cleared", c), this._handleSelectionUpdate = s, this._handleSelectionCleared = c;
+    const l = (h) => {
+      var y, x, $, j, k, L;
+      const n = h.transform.action;
+      h.transform.corner;
+      const t = h.transform.target, i = h.transform.target.canvas.backgroundImage, a = 0;
+      if (i && (n === "drag" && (t.top < i.top && t.set({
+        top: i.top
+      }), t.top + (t.height + a) * t.scaleY > i.top + i.height && t.set({
+        top: i.height + i.top - (t.height + a) * t.scaleY
+      }), t.left < i.left && t.set({
+        left: i.left
+      }), t.left + (t.width + a) * t.scaleX > i.left + i.width && t.set({
+        left: i.width + i.left - (t.width + a) * t.scaleX
+      })), n === "scale" && (t.top + (t.height + a) * t.scaleY > i.top + i.height && t.set({
+        top: (t.height + a) * t.scaleY > i.height ? i.top : i.top + i.height - (t.height + a) * t.scaleY,
+        height: (t.height + a) * t.scaleY > i.height ? i.height - a : t.height + a
+      }), t.left + (t.width + a) * t.scaleX > i.left + i.width && t.set({
+        left: i.width + i.left - (t.width + a) * t.scaleX
+      })), n === "scaleX" && (t.left + (t.width + a) * t.scaleX > i.left + i.width && t.set({
+        left: t.left - (t.left + (t.width + a) * t.scaleX - (i.left + i.width))
+      }), t.left < i.left && t.set({
+        left: i.left
+      })), n === "scaleY" && (t.top + (t.height + a) * t.scaleY > i.top + i.height && t.set({
+        top: t.top - (t.top + (t.height + a) * t.scaleY - (i.top + i.height))
+      }), t.top < i.top && t.set({
+        top: i.top
+      })), (t.width + a) * t.scaleX > i.width && t.set({
+        left: i.left,
+        width: (i.width - a) / t.scaleX
+      }), (t.height + a) * t.scaleY > i.height && t.set({
+        top: i.top,
+        height: (i.height - a) / t.scaleY
+      })), i) {
+        const _ = t.getBoundingRect(!0), u = (y = i.left) != null ? y : 0, S = (x = i.top) != null ? x : 0, Y = u + (($ = i.width) != null ? $ : 0), F = S + ((j = i.height) != null ? j : 0);
+        if (_.width > ((k = i.width) != null ? k : _.width)) {
+          const w = (i.width - a) / Math.max(t.width, 1);
           t.set({
-            scaleX: Math.min(t.scaleX, u)
+            scaleX: Math.min(t.scaleX, w)
           });
         }
-        if (v.height > ((L = e.height) != null ? L : v.height)) {
-          const u = (e.height - h) / Math.max(t.height, 1);
+        if (_.height > ((L = i.height) != null ? L : _.height)) {
+          const w = (i.height - a) / Math.max(t.height, 1);
           t.set({
-            scaleY: Math.min(t.scaleY, u)
+            scaleY: Math.min(t.scaleY, w)
           });
         }
-        const n = t.getBoundingRect(!0);
-        let _ = 0, p = 0;
-        n.left < R ? _ = R - n.left : n.left + n.width > k && (_ = k - (n.left + n.width)), n.top < m ? p = m - n.top : n.top + n.height > Y && (p = Y - (n.top + n.height)), (_ !== 0 || p !== 0) && t.set({
-          left: t.left + _,
-          top: t.top + p
+        const f = t.getBoundingRect(!0);
+        let p = 0, R = 0;
+        f.left < u ? p = u - f.left : f.left + f.width > Y && (p = Y - (f.left + f.width)), f.top < S ? R = S - f.top : f.top + f.height > F && (R = F - (f.top + f.height)), (p !== 0 || R !== 0) && t.set({
+          left: t.left + p,
+          top: t.top + R
         });
       }
       this.canvas.renderAll();
-    }, c = (o) => {
-      a(o), this.setLabelPosition();
+    }, o = (h) => {
+      l(h), this.setLabelPosition();
     };
-    this._fabricRect.on("moving", c), this._fabricRect.on("scaling", c), this._fabricRect.on("rotating", c), this._fabricRect.on("skewing", c), this._fabricRect.on("resizing", c), this.canvas.on("object:removed", (o) => {
-      o.target === this._fabricRect && this.destroy();
-    }), this.canvas.on("object:modified", (o) => {
-      o.target === this._fabricRect && (this.setLabelPosition(), this.handlers.onChange && this.handlers.onChange(this));
+    this._fabricRect.on("moving", o), this._fabricRect.on("scaling", o), this._fabricRect.on("rotating", o), this._fabricRect.on("skewing", o), this._fabricRect.on("resizing", o), this._objectRemovedHandler && this.canvas.off("object:removed", this._objectRemovedHandler);
+    const g = (h) => {
+      var n;
+      ((n = h.target) == null ? void 0 : n.type) === "rect" && h.target === this._fabricRect && !this._isDestroying && this._fabricRect && this.destroy();
+    };
+    this.canvas.on("object:removed", g), this._objectRemovedHandler = g, this.canvas.on("object:modified", (h) => {
+      h.target === this._fabricRect && (this.setLabelPosition(), this.handlers.onChange && this.handlers.onChange(this));
     });
   }
-  render(i) {
-    O(g), this._fabricRect || (this._fabricRect = this.createRect()), this._fabricRect.canvas === this.canvas ? this._fabricRect.set({
+  render(e) {
+    I(v), this._fabricRect || (this._fabricRect = this.createRect()), this._fabricRect.canvas === this.canvas ? this._fabricRect.set({
       fill: `rgba(${this.color[0]},${this.color[1]}, ${this.color[2]}, 0)`,
       stroke: `rgba(${this.color[0]},${this.color[1]}, ${this.color[2]}, 1)`
-    }) : this.addToCanvas(i), this.renderLabel();
+    }) : this.addToCanvas(e), this.renderLabel();
     try {
       this.canvas.renderAll();
     } catch (s) {
       console.log("render failed");
     }
   }
-  set labelConfig(i) {
-    this.config = f(f({}, this.config), i), this.color = X(i.color), this.render(this.canvas), this.handlers.onChange && this.handlers.onChange(this);
+  set labelConfig(e) {
+    this.config = d(d({}, this.config), e), this.color = X(e.color), this.render(this.canvas), this.handlers.onChange && this.handlers.onChange(this);
   }
   destroy() {
-    this._fabricRect && this.canvas.remove(this._fabricRect), this._label && this.canvas.remove(this._label), this._label = null, this._fabricRect = null, this.canvas.requestRenderAll(), this.handlers.onDelete && this.handlers.onDelete(this);
+    if (!this._isDestroying) {
+      if (this._isDestroying = !0, this._objectRemovedHandler) {
+        this.canvas.off("object:removed", this._objectRemovedHandler);
+        const e = this._objectRemovedHandler;
+        this.canvas.off("object:removed", e), this._objectRemovedHandler = null;
+      }
+      this._handleSelectionUpdate && (this.canvas.off("selection:created", this._handleSelectionUpdate), this.canvas.off("selection:updated", this._handleSelectionUpdate), this._handleSelectionUpdate = null), this._handleSelectionCleared && (this.canvas.off("selection:cleared", this._handleSelectionCleared), this._handleSelectionCleared = null), this._fabricRect && this.canvas.remove(this._fabricRect), this._label && this.canvas.remove(this._label), this._label = null, this._fabricRect = null, this.canvas.requestRenderAll(), this.handlers.onDelete && this.handlers.onDelete(this);
+    }
   }
 }
 export {