@labelbee/lb-annotation 1.13.0-alpha.7 → 1.13.0

package/es/core/toolOperation/cuboidToggleButtonClass.js

@@ -1,174 +0,0 @@
-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

@@ -1,249 +0,0 @@
-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 };