@labelbee/lb-annotation 1.13.0 → 1.13.1

package/es/core/toolOperation/cuboidToggleButtonClass.js

@@ -0,0 +1,174 @@
+import { ECuboidDirection } from '../../constant/annotation.js';
+import cuboidFAB from '../../assets/attributeIcon/icon_cuboidFAB.svg.js';
+import cuboidMore from '../../assets/attributeIcon/icon_cuboidMore.svg.js';
+import cuboidRight from '../../assets/attributeIcon/icon_cuboidRight.svg.js';
+import cuboidLeft from '../../assets/attributeIcon/icon_cuboidLeft.svg.js';
+import cuboidTop from '../../assets/attributeIcon/icon_cuboidTop.svg.js';
+
+const MORE_ICON_LISTS = [
+  {
+    icon: cuboidRight,
+    id: "cuboidRight"
+  },
+  {
+    icon: cuboidLeft,
+    id: "cuboidLeft"
+  },
+  {
+    icon: cuboidTop,
+    id: "cuboidTop"
+  }
+];
+class CuboidToggleButtonClass {
+  constructor(props) {
+    const {container, cuboidButtonMove, toggleDirection} = props;
+    this.container = container;
+    this.direction = ECuboidDirection.Front;
+    this.isFrontSide = true;
+    this.cuboidButtonMove = cuboidButtonMove;
+    this.onToggleDirection = toggleDirection;
+    this._cuboidButtonDOM = this.initCuboidButtonDOM();
+    this._cuboidFABDOM = this.initcuboidFABDOM(cuboidFAB);
+    this._cuboidMoreDOM = this.initcuboidMoreDOM(cuboidMore);
+    this._cuboidMoreListDOM = this.initcuboidMoreListDOM();
+    this.appendToContainer();
+  }
+  appendToContainer() {
+    if (!this._cuboidButtonDOM || !this._cuboidFABDOM || !this._cuboidMoreDOM) {
+      return;
+    }
+    this.container.appendChild(this._cuboidButtonDOM);
+    this._cuboidButtonDOM.appendChild(this._cuboidFABDOM);
+    this._cuboidButtonDOM.appendChild(this._cuboidMoreDOM);
+  }
+  initCuboidButtonDOM() {
+    const _cuboidButtonDOM = document.createElement("div");
+    _cuboidButtonDOM.setAttribute("id", "LABELBEE_CUBOID_BUTTON_BOX");
+    _cuboidButtonDOM.setAttribute("style", `
+        width: 40px;
+        height: 74px;
+        border-radius: 10px;
+        background-color: #FFFFFF;
+        z-index: 10;
+      `);
+    _cuboidButtonDOM.addEventListener("mouseover", (e) => {
+      e.stopPropagation();
+      setTimeout(() => {
+        this.cuboidButtonMove("in");
+      }, 100);
+    });
+    _cuboidButtonDOM.addEventListener("mouseleave", (e) => {
+      e.stopPropagation();
+      setTimeout(() => {
+        this.cuboidButtonMove("out");
+      }, 100);
+    });
+    return _cuboidButtonDOM;
+  }
+  initcuboidFABDOM(icon) {
+    const _cuboidFAB = document.createElement("div");
+    _cuboidFAB.setAttribute("id", "CUBOID_FORWARD_AND_BACK_SWITCH");
+    _cuboidFAB.innerHTML = icon;
+    _cuboidFAB.addEventListener("mouseup", (e) => {
+      e.stopPropagation();
+      this.isFrontSide = !this.isFrontSide;
+      this.direction = this.isFrontSide ? ECuboidDirection.Front : ECuboidDirection.Back;
+      this.onToggleDirection(this.direction);
+    });
+    return _cuboidFAB;
+  }
+  initcuboidMoreDOM(icon) {
+    const _iconDOM = document.createElement("div");
+    _iconDOM.setAttribute("id", "CUBOID_MORE_ICON");
+    _iconDOM.innerHTML = icon;
+    _iconDOM.addEventListener("mouseup", (e) => {
+      if (this._cuboidButtonDOM && this._cuboidMoreListDOM) {
+        if (this._cuboidButtonDOM.contains(this._cuboidMoreListDOM)) {
+          this.clearCuboidMoreListDOM();
+        } else {
+          this._cuboidButtonDOM.appendChild(this._cuboidMoreListDOM);
+        }
+      }
+      e.stopPropagation();
+    });
+    _iconDOM.addEventListener("mousedown", (e) => {
+      e.stopPropagation();
+    });
+    _iconDOM.addEventListener("contextmenu", (e) => {
+      e.stopPropagation();
+    });
+    return _iconDOM;
+  }
+  initcuboidMoreListDOM() {
+    const cuboidMoreListDOM = document.createElement("div");
+    cuboidMoreListDOM.setAttribute("id", "CUBOID_MORE_LIST_ICON");
+    cuboidMoreListDOM.setAttribute("style", `
+        height: 36px;
+        border-radius: 10px;
+        background-color: #FFFFFF;
+        z-index: 10;
+        padding: 8px 10px;
+        position: absolute;
+        bottom: 0px;
+        left: 44px;
+        display: flex;
+      `);
+    let str = "";
+    const iconStyle = `margin-left:4px;margin-right:4px;display:flex;align-items:center;`;
+    MORE_ICON_LISTS.forEach((i, index) => {
+      const lastIconStyle = index === MORE_ICON_LISTS.length - 1 ? "margin-left:0px;margin-right:0px;" : "";
+      str += `<span id=${i.id} key=${index} style=${iconStyle}${lastIconStyle}>${i.icon}</span>`;
+    });
+    cuboidMoreListDOM.innerHTML = str;
+    cuboidMoreListDOM.childNodes.forEach((item) => {
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        switch (item == null ? void 0 : item.id) {
+          case "cuboidLeft":
+            this.onToggleDirection(ECuboidDirection.Left);
+            break;
+          case "cuboidRight":
+            this.onToggleDirection(ECuboidDirection.Right);
+            break;
+          case "cuboidTop":
+            this.onToggleDirection(ECuboidDirection.Top);
+            break;
+        }
+        this.clearCuboidMoreListDOM();
+        this.cuboidButtonMove("out");
+      });
+    });
+    return cuboidMoreListDOM;
+  }
+  update(position) {
+    var _a;
+    const {left, top, color} = position;
+    (_a = this._cuboidButtonDOM) == null ? void 0 : _a.setAttribute("style", `
+        position: absolute; 
+        font-size: 14px; 
+        left:${left}px; 
+        top: ${top}px; 
+        color: ${color};
+        width: 41px;
+        height: 74px;
+        border-radius: 10px;
+        background-color: #FFFFFF;
+        cursor: pointer;
+        text-align: center;
+        padding-top: 10px;
+        z-index: 10;
+      `);
+  }
+  clearCuboidButtonDOM() {
+    if (this._cuboidButtonDOM && this.container.contains(this._cuboidButtonDOM)) {
+      this.container.removeChild(this._cuboidButtonDOM);
+    }
+  }
+  clearCuboidMoreListDOM() {
+    if (this._cuboidButtonDOM && this._cuboidMoreListDOM && this._cuboidButtonDOM.contains(this._cuboidMoreListDOM)) {
+      this._cuboidButtonDOM.removeChild(this._cuboidMoreListDOM);
+    }
+  }
+}
+
+export { CuboidToggleButtonClass as default };

package/es/core/toolOperation/scribbleTool2.js

@@ -0,0 +1,249 @@
+import { ImgConversionUtils } from '@labelbee/lb-utils';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import { EToolName, EScribblePattern } from '../../constant/tool.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+
+const DEFAULT_PEN_SIZE = 20;
+const DEFAULT_COLOR = "white";
+class ScribbleTool extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.toolName = EToolName.ScribbleTool;
+    this.action = EScribblePattern.Scribble;
+    this.getOriginCoordinate = (e) => {
+      return AxisUtils.changePointByZoom(this.getCoordinateUnderZoom(e), 1 / this.zoom);
+    };
+    this.onMouseDown = (e) => {
+      if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
+        return void 0;
+      }
+      this.initCacheCanvas(this.imgNode);
+      this.mouseEvents("onMouseDown").call(this, e);
+    };
+    this.onMouseMove = (e) => {
+      if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+        return void 0;
+      }
+      this.mouseEvents("onMouseMove").call(this, e);
+    };
+    this.onMouseUp = (e) => {
+      if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+        return void 0;
+      }
+      this.mouseEvents("onMouseUp").call(this, e);
+    };
+    this.mouseEvents = (eventType) => {
+      const events = {
+        [EScribblePattern.Scribble]: {
+          onMouseMove: this.onScribbleMove,
+          onMouseUp: this.onScribbleEnd,
+          onMouseDown: this.onScribbleStart
+        },
+        [EScribblePattern.Erase]: {
+          onMouseMove: this.onEraseMove,
+          onMouseUp: this.onEraseEnd,
+          onMouseDown: this.onEraseStart
+        }
+      };
+      return events[this.action][eventType];
+    };
+    this.setPattern = (pattern) => {
+      this.action = pattern;
+    };
+    this.penSize = DEFAULT_PEN_SIZE;
+  }
+  get color() {
+    var _a, _b;
+    return (_b = (_a = this == null ? void 0 : this.defaultAttributeInfo) == null ? void 0 : _a.color) != null ? _b : DEFAULT_COLOR;
+  }
+  get penSizeWithZoom() {
+    return this.penSize / this.zoom;
+  }
+  setPenSize(size) {
+    this.penSize = size;
+  }
+  initCacheCanvas(imgNode) {
+    if (this.cacheCanvas || !imgNode) {
+      return;
+    }
+    const {canvas, ctx} = ImgConversionUtils.createCanvas(imgNode);
+    this.cacheCanvas = canvas;
+    this.cacheContext = ctx;
+  }
+  updateCacheCanvasSize(imgNode) {
+    if (this.cacheCanvas) {
+      this.cacheCanvas.width = imgNode.width;
+      this.cacheCanvas.height = imgNode.height;
+    }
+  }
+  updateUrl2CacheContext(url) {
+    ImgConversionUtils.createImgDom(url).then((img) => {
+      if (!this.cacheContext) {
+        this.initCacheCanvas(img);
+      }
+      if (this.cacheContext) {
+        this.cacheContext.save();
+        this.clearResult();
+        this.cacheContext.drawImage(img, 0, 0, img.width, img.height);
+        this.cacheContext.restore();
+        this.render();
+      }
+    });
+  }
+  setImgNode(imgNode, basicImgInfo) {
+    super.setImgNode(imgNode, basicImgInfo);
+    if (this.cacheCanvas) {
+      this.updateCacheCanvasSize(imgNode);
+    } else {
+      this.initCacheCanvas(imgNode);
+    }
+  }
+  setResult(data) {
+    var _a;
+    const {url} = (_a = data == null ? void 0 : data[0]) != null ? _a : {};
+    this.history.initRecord([url], !!url);
+    this.clearResult();
+    if (!url) {
+      this.render();
+      return;
+    }
+    this.updateUrl2CacheContext(url);
+  }
+  onKeyDown(e) {
+    if (!CommonToolUtils.hotkeyFilter(e) || super.onKeyDown(e) === false) {
+      return;
+    }
+    const {keyCode} = e;
+    const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(keyCode, this.config.attributeList);
+    if (keyCode2Attribute !== void 0) {
+      this.setDefaultAttribute(keyCode2Attribute);
+    }
+  }
+  eventBinding() {
+    super.eventBinding();
+  }
+  setDefaultAttribute(attributeValue) {
+    const attributeInfo = this.config.attributeList.find((v) => v.value === attributeValue);
+    if (attributeInfo) {
+      this.defaultAttribute = attributeInfo.value;
+      this.defaultAttributeInfo = attributeInfo;
+      this.emit("changeAttributeSidebar");
+      this.render();
+    }
+  }
+  clearStatusAfterLeave() {
+    this.onScribbleEnd();
+    this.startPoint = void 0;
+  }
+  onMouseLeave() {
+    super.onMouseLeave();
+    this.clearStatusAfterLeave();
+  }
+  onScribbleStart(e) {
+    if (!this.cacheContext) {
+      return;
+    }
+    this.cacheContext.save();
+    this.cacheContext.beginPath();
+    this.cacheContext.strokeStyle = this.color;
+    this.cacheContext.lineWidth = this.penSizeWithZoom;
+    this.cacheContext.lineCap = "round";
+    this.cacheContext.lineJoin = "round";
+    const originCoordinate = AxisUtils.changePointByZoom(this.getCoordinateUnderZoom(e), 1 / this.zoom);
+    this.cacheContext.moveTo(originCoordinate.x, originCoordinate.y);
+    this.startPoint = originCoordinate;
+  }
+  onScribbleMove(e) {
+    if (e.buttons === 1 && this.cacheContext && this.startPoint) {
+      const originCoordinate = this.getOriginCoordinate(e);
+      this.cacheContext.lineTo(originCoordinate.x, originCoordinate.y);
+      this.cacheContext.stroke();
+    }
+  }
+  onScribbleEnd() {
+    var _a, _b, _c;
+    if (this.startPoint) {
+      (_a = this.cacheContext) == null ? void 0 : _a.closePath();
+      (_b = this.cacheContext) == null ? void 0 : _b.restore();
+      this.startPoint = void 0;
+      this.history.pushHistory((_c = this.cacheCanvas) == null ? void 0 : _c.toDataURL("image/png", 0));
+    }
+  }
+  eraseArc(e) {
+    var _a;
+    if (this.cacheContext) {
+      const originCoordinate = this.getOriginCoordinate(e);
+      this.cacheContext.save();
+      this.cacheContext.beginPath();
+      this.cacheContext.arc(originCoordinate.x, originCoordinate.y, this.penSizeWithZoom / 2, 0, Math.PI * 2, false);
+      this.cacheContext.clip();
+      this.cacheContext.clearRect(0, 0, this.cacheContext.canvas.width, this.cacheContext.canvas.height);
+      (_a = this.cacheContext) == null ? void 0 : _a.restore();
+    }
+  }
+  onEraseStart(e) {
+    if (!this.cacheContext || e.buttons !== 1) {
+      return;
+    }
+    this.eraseArc(e);
+  }
+  onEraseMove(e) {
+    if (!this.cacheContext || e.buttons !== 1) {
+      return;
+    }
+    this.eraseArc(e);
+  }
+  onEraseEnd() {
+  }
+  exportData() {
+    var _a;
+    const imgBase64 = (_a = this.cacheCanvas) == null ? void 0 : _a.toDataURL("image/png", 0);
+    return [[], this.basicImgInfo, {imgBase64}];
+  }
+  clearCacheCanvas() {
+    var _a;
+    (_a = this.cacheContext) == null ? void 0 : _a.clearRect(0, 0, this.cacheContext.canvas.width, this.cacheContext.canvas.height);
+    this.render();
+  }
+  clearResult() {
+    this.clearCacheCanvas();
+  }
+  renderPoint(radius) {
+    DrawUtils.drawCircleWithFill(this.canvas, this.coord, radius, {color: this.color});
+  }
+  render() {
+    super.render();
+    if (!this.ctx || !this.cacheCanvas) {
+      return;
+    }
+    this.ctx.save();
+    this.ctx.globalAlpha = 0.5;
+    DrawUtils.drawImg(this.canvas, this.cacheCanvas, {
+      zoom: this.zoom,
+      currentPos: this.currentPos,
+      rotate: this.rotate
+    });
+    this.ctx.restore();
+    if (this.forbidOperation || this.forbidCursorLine) {
+      return;
+    }
+    this.renderPoint(this.penSize / 2);
+  }
+  undo() {
+    const url = this.history.undo();
+    if (url && this.cacheCanvas) {
+      this.updateUrl2CacheContext(url);
+    }
+  }
+  redo() {
+    const url = this.history.redo();
+    if (url && this.cacheCanvas) {
+      this.updateUrl2CacheContext(url);
+    }
+  }
+}
+
+export { ScribbleTool as default };