@glodon-aiot/dataset-annotation 3.10.0-alpha.21 → 3.10.0-alpha.23

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

@@ -1,10 +1,10 @@
-function Y(e, n) {
+function X(e, n) {
   T(e);
   let h = -1, s = -1, p = 0, m = 0, w = !1;
   e.on("mouse:down:before", (d) => {
     const f = d.target, u = e.getActiveObject();
-    if (f && f !== e.backgroundImage && u === f) {
-      e.skipTargetFind = !1;
+    if (f && f !== e.backgroundImage) {
+      u !== f && (e.setActiveObject(f), e.requestRenderAll()), e.skipTargetFind = !1;
       return;
     }
     u && (e.discardActiveObject(), e.renderAll()), e.skipTargetFind = !0;
@@ -20,20 +20,20 @@ function Y(e, n) {
     const f = e.getZoom(), u = d.e.offsetX > e.getWidth() ? e.getWidth() / f : d.e.offsetX / f, b = d.e.offsetY > e.getHeight() ? e.getHeight() / f : d.e.offsetY / f;
     if (p = Math.abs(u - s), m = Math.abs(b - h), p === 0 || m === 0)
       return;
-    const y = e.viewportTransform ? e.viewportTransform[4] / f : 0, F = e.viewportTransform ? e.viewportTransform[5] / f : 0;
+    const y = e.viewportTransform ? e.viewportTransform[4] / f : 0, A = e.viewportTransform ? e.viewportTransform[5] / f : 0;
     let r = h > b ? b : h, i = s > u ? u : s, l = p, g = m;
-    r = r - F, i = i - y;
-    const I = () => {
+    r = r - A, i = i - y;
+    const F = () => {
       var o, k;
       const t = e.backgroundImage;
       t && typeof t != "string" && ((o = t.aCoords) != null && o.tl.x, (k = t.aCoords) != null && k.tl.y), t && typeof t != "string" && t.top !== void 0 && t.height !== void 0 && t.left !== void 0 && t.width !== void 0 && (r < t.top && (g = g - (t.top - r), r = t.top), r + g > t.top + t.height && (g = t.top + t.height - r + g - g, r = t.height + t.top - g), i < t.left && (l = l - (t.left - i), i = t.left), i + l > t.left + t.width && (l = t.left + t.width - i + l - l, i = t.width + t.left - l));
-    }, X = (t) => {
+    }, I = (t) => {
       const o = e.backgroundImage;
       return !(o && typeof o != "string" && o.top !== void 0 && o.height !== void 0 && o.left !== void 0 && o.width !== void 0 && (t[0] < o.left || t[1] < o.top || t[0] > o.left + o.width || t[1] > o.top + o.height));
     };
-    I();
+    F();
     const c = [[i, r], [i + l, r], [i + l, r + g], [i, r + g]];
-    n && c.every((t) => X(t)) && n({
+    n && c.every((t) => I(t)) && n({
       id: "",
       color: "#cccccc",
       label: "未知",
@@ -44,11 +44,11 @@ function Y(e, n) {
 const T = (e) => {
   e.off("mouse:down"), e.off("mouse:down:before"), e.off("mouse:up"), e.skipTargetFind = !1;
 };
-function j(e, n, h) {
+function Y(e, n, h) {
   if (!h)
-    return Y(e, n), e;
+    return X(e, n), e;
 }
 export {
-  j as drawable,
+  Y as drawable,
   T as stopDraw
 };

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

@@ -1,20 +1,20 @@
-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 = {}))
-    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]);
+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;
-}, 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 $ = {
+}, 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";
+import { formatColorToArray as X } from "../../../../utils/color.mjs";
+const z = {
   borderWidth: 2,
   controls: ["TL", "BL", "TR", "BR"],
   cornerStrokeColor: "#84868C",
@@ -22,16 +22,16 @@ const $ = {
   visible: !0,
   active: !1
 };
-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);
+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);
   }
   get object() {
     return this._fabricRect;
@@ -39,22 +39,22 @@ class F {
   get active() {
     return this._active;
   }
-  set active(e) {
+  set active(i) {
     var s;
-    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());
+    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());
   }
   get hover() {
     return this._hover;
   }
-  set hover(e) {
-    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();
+  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();
   }
   get canvas() {
     return this._canvas;
   }
-  set canvas(e) {
-    this._canvas !== e && (this._canvas = e, this.render(e));
+  set canvas(i) {
+    this._canvas !== i && (this._canvas = i, this.render(i));
   }
   get normalStyle() {
     return {
@@ -68,7 +68,7 @@ class F {
     };
   }
   get activeStyle() {
-    return v(n({}, this.normalStyle), {
+    return C(f({}, 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,37 +77,40 @@ class F {
     return this.activeStyle;
   }
   createRect() {
-    const e = {
+    const i = {
       hasBorders: !1,
       cornerSize: 6,
       cornerStrokeColor: "#84868C",
       cornerColor: "#FFFFFF",
       transparentCorners: !1
-    }, s = 0, h = new d.Rect(
+    }, s = 0, a = new g.Rect(
       // this.config.points?.map((p) => ({ x: p[0], y: p[1] })),
-      n(n({
+      C(f(f({
         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)
+      }, i), this.normalStyle), {
+        // 禁止缩放时翻转
+        lockScalingFlip: !0
+      })
     );
-    h.setControlsVisibility({
+    a.setControlsVisibility({
       mtr: !1
     });
-    const a = () => {
-      if (h.canvas !== this.canvas) {
-        this.canvas.off("after:render", a);
+    const c = () => {
+      if (a.canvas !== this.canvas) {
+        this.canvas.off("after:render", c);
         return;
       }
       this.canvas.contextContainer.strokeStyle = `rgb(${this.color[0]},${this.color[1]}, ${this.color[2]})`;
-      const o = h.getBoundingRect();
+      const o = a.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", a), h;
+    return this.canvas.on("after:render", c), a;
   }
-  scaledNumber(e) {
-    return e / this.canvas.getZoom();
+  scaledNumber(i) {
+    return i / this.canvas.getZoom();
   }
   // getPolyVertices(poly: fabric.Rect) {
   //   const points = poly.points,
@@ -130,25 +133,28 @@ class F {
   //   });
   // }
   createLabelName() {
-    const [e, s, h] = this.color, a = new d.Text(this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name, {
+    const [i, s, a] = this.color, c = new g.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 d.Rect({
+    }), o = new g.Rect({
       selectable: !1,
+      evented: !1,
       strokeWidth: 0,
-      fill: `rgb(${e},${s},${h})`,
+      fill: `rgb(${i},${s},${a})`,
       rx: 2,
       ry: 2,
-      width: (a.width || 0) + 16,
-      height: (a.height || 0) + 8,
+      width: (c.width || 0) + 16,
+      height: (c.height || 0) + 8,
       left: 0,
       top: 0
     });
-    return new d.Group([o, a], {
+    return new g.Group([o, c], {
       selectable: !1,
+      evented: !1,
       // lockScalingX: false,
       // lockScalingY: false,
       scaleX: 1 / this.canvas.getZoom(),
@@ -156,25 +162,25 @@ class F {
     });
   }
   renderLabel() {
-    var e, s;
+    var i, s;
     if (this._fabricRect) {
       if (this._label || (this._label = this.createLabelName(), this.setLabelPosition()), this._label.canvas === this.canvas) {
-        const h = this._label.getObjects().find((o) => o.type === "rect"), a = this._label.getObjects().find((o) => o.type === "text");
-        if (a) {
-          a.set({
+        const a = this._label.getObjects().find((o) => o.type === "rect"), c = this._label.getObjects().find((o) => o.type === "text");
+        if (c) {
+          c.set({
             text: this.handlers.renderLabelItem ? this.handlers.renderLabelItem(this.config) : this.config.name,
             left: 8
             // fontSize: this.scaledNumber(12),
           });
-          const o = (a.getBoundingRect().width || 0) + 16;
-          h == null || h.set({
+          const o = (c.getBoundingRect().width || 0) + 16;
+          a == null || a.set({
             fill: `rgba(${this.color[0]},${this.color[1]}, ${this.color[2]}, 1)`,
             width: o,
             left: -o / 2
-          }), a.set({
+          }), c.set({
             left: -o / 2 + 8
           });
-          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;
+          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;
           this._label.set({
             left: r,
             width: o
@@ -186,26 +192,26 @@ class F {
     }
   }
   setLabelPosition() {
-    var r, t, i, c;
+    var r, t, e, h;
     if (!this._fabricRect || !this._label)
       return;
-    const e = this._label.getObjects().find((R) => R.type === "rect");
-    if (!e)
+    const i = this._label.getObjects().find((b) => b.type === "rect");
+    if (!i)
       return;
-    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;
+    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;
     this._label.set({
-      top: a,
+      top: c,
       left: o,
       height: s,
-      width: h,
+      width: a,
       scaleX: 1 / this.canvas.getZoom(),
       scaleY: 1 / this.canvas.getZoom()
-    }), this.config = n({}, this.config);
+    }), this.config = f({}, this.config);
   }
-  addToCanvas(e) {
+  addToCanvas(i) {
     if (!this._fabricRect)
       return;
-    this.canvas = e, this.canvas.add(this._fabricRect), this._fabricRect.on("mouseover", (o) => {
+    this.canvas = i, this.canvas.add(this._fabricRect), this._fabricRect.on("mouseover", (o) => {
       this.hover = !0;
     }), this._fabricRect.on("mouseout", (o) => {
       this.hover = !1;
@@ -219,65 +225,87 @@ class F {
     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 a = (o) => {
+      var b, y, x, S, $, L;
       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 + 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 + 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
-      })), 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 + c) * t.scaleX > i.width && t.set({
-        left: i.left,
-        width: (i.width - c) / t.scaleX
-      }), (t.height + c) * t.scaleY > i.height && t.set({
-        top: i.top,
-        height: (i.height - c) / t.scaleY
-      })), this.canvas.renderAll();
-    }, a = (o) => {
-      h(o), this.setLabelPosition();
+      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);
+          t.set({
+            scaleX: Math.min(t.scaleX, u)
+          });
+        }
+        if (v.height > ((L = e.height) != null ? L : v.height)) {
+          const u = (e.height - h) / Math.max(t.height, 1);
+          t.set({
+            scaleY: Math.min(t.scaleY, u)
+          });
+        }
+        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
+        });
+      }
+      this.canvas.renderAll();
+    }, c = (o) => {
+      a(o), this.setLabelPosition();
     };
-    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) => {
+    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));
     });
   }
-  render(e) {
-    y(d), this._fabricRect || (this._fabricRect = this.createRect()), this._fabricRect.canvas === this.canvas ? this._fabricRect.set({
+  render(i) {
+    O(g), 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();
+    }) : this.addToCanvas(i), this.renderLabel();
     try {
       this.canvas.renderAll();
     } catch (s) {
       console.log("render failed");
     }
   }
-  set labelConfig(e) {
-    this.config = n(n({}, this.config), e), this.color = _(e.color), this.render(this.canvas), this.handlers.onChange && this.handlers.onChange(this);
+  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);
   }
   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);
   }
 }
 export {
-  F as default
+  M as default
 };