@labelbee/lb-annotation 1.12.0 → 1.12.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 };