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

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

@@ -1,20 +1,20 @@
-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) => {
+var p = Object.defineProperty, m = Object.defineProperties;
+var u = Object.getOwnPropertyDescriptors;
+var b = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var g = (l, e, s) => e in l ? p(l, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : l[e] = s, n = (l, 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 O = {
+    w.call(e, s) && g(l, s, e[s]);
+  if (b)
+    for (var s of b(e))
+      C.call(e, s) && g(l, s, e[s]);
+  return l;
+}, v = (l, e) => m(l, u(e));
+var f = (l, e, s) => (g(l, typeof e != "symbol" ? e + "" : e, s), s);
+import { fabric as d } from "fabric";
+import y from "./FabricCustomize.mjs";
+import { formatColorToArray as _ } from "../../../../utils/color.mjs";
+const $ = {
   borderWidth: 2,
   controls: ["TL", "BL", "TR", "BR"],
   cornerStrokeColor: "#84868C",
@@ -22,16 +22,16 @@ const O = {
   visible: !0,
   active: !1
 };
-class M {
-  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);
+class F {
+  constructor(e, s, h) {
+    f(this, "config");
+    f(this, "color");
+    f(this, "_active", !1);
+    f(this, "_fabricRect", null);
+    f(this, "_label", null);
+    f(this, "_hover", !1);
+    f(this, "_strokeRect");
+    this._canvas = s, this.handlers = h, d.Rect.prototype.cornerColor = "blue", this.config = n(n({}, $), e), this.color = _(e.color), this._active = this.config.active || !1, s && this.render(s);
   }
   get object() {
     return this._fabricRect;
@@ -41,16 +41,14 @@ class M {
   }
   set active(e) {
     var s;
-    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());
+    this._active = e, (s = this._fabricRect) != null && s.canvas && (e && !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());
   }
   get hover() {
     return this._hover;
   }
   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();
+    var s, h;
+    this._hover = e, e ? (s = this._fabricRect) == null || s.set(this.hoverStyle) : this.active || (h = this._fabricRect) == null || h.set(this.normalStyle), this.canvas.requestRenderAll();
   }
   get canvas() {
     return this._canvas;
@@ -70,7 +68,7 @@ class M {
     };
   }
   get activeStyle() {
-    return m(d({}, this.normalStyle), {
+    return v(n({}, 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)`
     });
@@ -85,33 +83,28 @@ class M {
       cornerStrokeColor: "#84868C",
       cornerColor: "#FFFFFF",
       transparentCorners: !1
-    }, s = 0, c = new v.Rect(
+    }, s = 0, h = new d.Rect(
       // this.config.points?.map((p) => ({ x: p[0], y: p[1] })),
-      m(d(d({
+      n(n({
         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
-      }, e), this.normalStyle), {
-        // 禁止缩放时翻转
-        lockScalingFlip: !0,
-        // 允许不保持比例调整（可以自由调整宽高）
-        lockUniScaling: !1
-      })
+      }, e), this.normalStyle)
     );
-    c.setControlsVisibility({
+    h.setControlsVisibility({
       mtr: !1
     });
-    const l = () => {
-      if (c.canvas !== this.canvas) {
-        this.canvas.off("after:render", l);
+    const a = () => {
+      if (h.canvas !== this.canvas) {
+        this.canvas.off("after:render", a);
         return;
       }
       this.canvas.contextContainer.strokeStyle = `rgb(${this.color[0]},${this.color[1]}, ${this.color[2]})`;
-      const o = c.getBoundingRect();
+      const o = h.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", l), c;
+    return this.canvas.on("after:render", a), h;
   }
   scaledNumber(e) {
     return e / this.canvas.getZoom();
@@ -137,28 +130,25 @@ class M {
   //   });
   // }
   createLabelName() {
-    const [e, s, c] = this.color, l = new v.Text(this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name, {
+    const [e, s, h] = this.color, a = new d.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 v.Rect({
+    }), o = new d.Rect({
       selectable: !1,
-      evented: !1,
       strokeWidth: 0,
-      fill: `rgb(${e},${s},${c})`,
+      fill: `rgb(${e},${s},${h})`,
       rx: 2,
       ry: 2,
-      width: (l.width || 0) + 16,
-      height: (l.height || 0) + 8,
+      width: (a.width || 0) + 16,
+      height: (a.height || 0) + 8,
       left: 0,
       top: 0
     });
-    return new v.Group([o, l], {
+    return new d.Group([o, a], {
       selectable: !1,
-      evented: !1,
       // lockScalingX: false,
       // lockScalingY: false,
       scaleX: 1 / this.canvas.getZoom(),
@@ -169,24 +159,24 @@ class M {
     var e, s;
     if (this._fabricRect) {
       if (this._label || (this._label = this.createLabelName(), this.setLabelPosition()), this._label.canvas === this.canvas) {
-        const c = this._label.getObjects().find((o) => o.type === "rect"), l = this._label.getObjects().find((o) => o.type === "text");
-        if (l) {
-          l.set({
+        const h = this._label.getObjects().find((o) => o.type === "rect"), a = this._label.getObjects().find((o) => o.type === "text");
+        if (a) {
+          a.set({
             text: this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name,
             left: 8
             // fontSize: this.scaledNumber(12),
           });
-          const o = (l.getBoundingRect().width || 0) + 16;
-          c == null || c.set({
+          const o = (a.getBoundingRect().width || 0) + 16;
+          h == null || h.set({
             fill: `rgba(${this.color[0]},${this.color[1]}, ${this.color[2]}, 1)`,
             width: o,
             left: -o / 2
-          }), l.set({
+          }), a.set({
             left: -o / 2 + 8
           });
-          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;
+          const r = ((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: g,
+            left: r,
             width: o
           });
         }
@@ -196,109 +186,82 @@ class M {
     }
   }
   setLabelPosition() {
-    var g, h, n, t;
+    var r, t, i, c;
     if (!this._fabricRect || !this._label)
       return;
-    const e = this._label.getObjects().find((i) => i.type === "rect");
+    const e = this._label.getObjects().find((R) => R.type === "rect");
     if (!e)
       return;
-    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;
+    const s = e.height ? e.height : void 0, h = e.width ? e.width : void 0, a = ((r = this._fabricRect.aCoords) == null ? void 0 : r.tl.y) !== void 0 && s !== void 0 && e.scaleY ? ((t = this._fabricRect.aCoords) == null ? void 0 : t.tl.y) - s / this.canvas.getZoom() : void 0, o = ((i = this._fabricRect.aCoords) == null ? void 0 : i.tl.x) !== void 0 ? (c = this._fabricRect.aCoords) == null ? void 0 : c.tl.x : void 0;
     this._label.set({
-      top: l,
+      top: a,
       left: o,
       height: s,
-      width: c,
+      width: h,
       scaleX: 1 / this.canvas.getZoom(),
       scaleY: 1 / this.canvas.getZoom()
-    }), this.config = d({}, this.config);
+    }), this.config = n({}, this.config);
   }
   addToCanvas(e) {
     if (!this._fabricRect)
       return;
-    this.canvas = e, this.canvas.add(this._fabricRect), this._fabricRect.on("mouseover", (h) => {
+    this.canvas = e, this.canvas.add(this._fabricRect), this._fabricRect.on("mouseover", (o) => {
       this.hover = !0;
-    }), this._fabricRect.on("mouseout", (h) => {
+    }), this._fabricRect.on("mouseout", (o) => {
       this.hover = !1;
     }), this._fabricRect.on("mousedown", () => {
       this._fabricRect && this.canvas.setActiveObject(this._fabricRect);
-    }), 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 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", 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({
+    this.canvas.on("selection:created", s), this.canvas.on("selection:updated", s), this.canvas.on("selection:cleared", (o) => {
+      this.active && (this.active = !1);
+    });
+    const h = (o) => {
+      const r = o.transform.action;
+      o.transform.corner;
+      const t = o.transform.target, i = o.transform.target.canvas.backgroundImage, c = 0;
+      i && (r === "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.top + (t.height + c) * t.scaleY > i.top + i.height && t.set({
+        top: i.height + i.top - (t.height + c) * 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 + (t.width + c) * t.scaleX > i.left + i.width && t.set({
+        left: i.width + i.left - (t.width + c) * t.scaleX
+      })), r === "scale" && (t.top + (t.height + c) * t.scaleY > i.top + i.height && t.set({
+        top: (t.height + c) * t.scaleY > i.height ? i.top : i.top + i.height - (t.height + c) * t.scaleY,
+        height: (t.height + c) * t.scaleY > i.height ? i.height - c : t.height + c
+      }), t.left + (t.width + c) * t.scaleX > i.left + i.width && t.set({
+        left: i.width + i.left - (t.width + c) * t.scaleX
+      })), r === "scaleX" && (t.left + (t.width + c) * t.scaleX > i.left + i.width && t.set({
+        left: t.left - (t.left + (t.width + c) * 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))
+      })), r === "scaleY" && (t.top + (t.height + c) * t.scaleY > i.top + i.height && t.set({
+        top: t.top - (t.top + (t.height + c) * t.scaleY - (i.top + i.height))
       }), t.top < i.top && t.set({
         top: i.top
-      })), (t.width + a) * t.scaleX > i.width && t.set({
+      })), (t.width + c) * t.scaleX > i.width && t.set({
         left: i.left,
-        width: (i.width - a) / t.scaleX
-      }), (t.height + a) * t.scaleY > i.height && t.set({
+        width: (i.width - c) / t.scaleX
+      }), (t.height + c) * 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, w)
-          });
-        }
-        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, w)
-          });
-        }
-        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();
-    }, o = (h) => {
-      l(h), this.setLabelPosition();
+        height: (i.height - c) / t.scaleY
+      })), this.canvas.renderAll();
+    }, a = (o) => {
+      h(o), this.setLabelPosition();
     };
-    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));
+    this._fabricRect.on("moving", a), this._fabricRect.on("scaling", a), this._fabricRect.on("rotating", a), this._fabricRect.on("skewing", a), this._fabricRect.on("resizing", a), 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));
     });
   }
   render(e) {
-    I(v), this._fabricRect || (this._fabricRect = this.createRect()), this._fabricRect.canvas === this.canvas ? this._fabricRect.set({
+    y(d), 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(e), this.renderLabel();
@@ -309,19 +272,12 @@ class M {
     }
   }
   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);
+    this.config = n(n({}, this.config), e), this.color = _(e.color), this.render(this.canvas), this.handlers.onChange && this.handlers.onChange(this);
   }
   destroy() {
-    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);
-    }
+    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 {
-  M as default
+  F as default
 };