@labelbee/lb-annotation 1.12.0 → 1.12.1

package/es/core/toolOperation/cuboidOperation.js

@@ -0,0 +1,733 @@
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import AxisUtils from '../../utils/tool/AxisUtils.js';
+import uuid from '../../utils/uuid.js';
+import { getCuboidHoverRange, getPlainPointsByDiagonalPoints, getPointsByBottomRightPoint, getCuboidDragMove, isCuboidWithInLimits, getHighlightPoints, getCuboidTextAttributeOffset, getToggleDirectionButtonOffset } from '../../utils/tool/CuboidUtils.js';
+import PolygonUtils from '../../utils/tool/PolygonUtils.js';
+import { EDragStatus, EDragTarget, ECuboidDirection } from '../../constant/annotation.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import { DEFAULT_TEXT_MAX_WIDTH } from '../../constant/tool.js';
+import EKeyCode from '../../constant/keyCode.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import CuboidToggleButtonClass from './cuboidToggleButtonClass.js';
+import TextAttributeClass from './textAttributeClass.js';
+import Locale from '../../locales/index.js';
+import { EMessage } from '../../locales/constants.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var EDrawingStatus;
+(function(EDrawingStatus2) {
+  EDrawingStatus2[EDrawingStatus2["Ready"] = 1] = "Ready";
+  EDrawingStatus2[EDrawingStatus2["FirstPoint"] = 2] = "FirstPoint";
+  EDrawingStatus2[EDrawingStatus2["Cuboid"] = 3] = "Cuboid";
+})(EDrawingStatus || (EDrawingStatus = {}));
+const TEXT_MAX_WIDTH = 164;
+class CuboidOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.drawingStatus = 1;
+    this.cuboidList = [];
+    this.hoverID = "";
+    this.getHoverData = (e) => {
+      const coordinate = this.getCoordinateUnderZoom(e);
+      const {currentShowList} = this;
+      if ((currentShowList == null ? void 0 : currentShowList.length) > 0) {
+        const polygonList = currentShowList.map((cuboid) => {
+          return {id: cuboid.id, pointList: AxisUtils.changePointListByZoom(getCuboidHoverRange(cuboid), this.zoom)};
+        });
+        const hoverID = PolygonUtils.getHoverPolygonID(coordinate, polygonList);
+        if (hoverID) {
+          return {
+            hoverID,
+            hoverCuboid: currentShowList.find((cuboid) => cuboid.id === hoverID)
+          };
+        }
+      }
+      return {};
+    };
+    this.textChange = (v) => {
+      if (this.config.textConfigurable === false || !this.selectedID) {
+        return;
+      }
+      this.setCuboidList(AttributeUtils.textChange(v, this.selectedID, this.cuboidList));
+      this.emit("selectedChange");
+      this.render();
+    };
+    this.config = CommonToolUtils.jsonParser(props.config);
+    this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
+    this.updateSelectedTextAttribute = this.updateSelectedTextAttribute.bind(this);
+  }
+  destroy() {
+    super.destroy();
+    if (this._textAttributeInstance) {
+      this._textAttributeInstance.clearTextAttribute();
+    }
+  }
+  get currentShowList() {
+    let cuboidList = [];
+    const [showingCuboid, selectedCuboid] = CommonToolUtils.getRenderResultList(this.cuboidList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedID);
+    cuboidList = showingCuboid;
+    if (this.isHidden) {
+      cuboidList = [];
+    }
+    if (selectedCuboid) {
+      cuboidList.push(selectedCuboid);
+    }
+    return cuboidList;
+  }
+  get selectedCuboid() {
+    return this.cuboidList.find((v) => v.id === this.selectedID);
+  }
+  get dataList() {
+    return this.cuboidList;
+  }
+  get isNeedCheckCuboidSize() {
+    var _a, _b;
+    return ((_a = this.config) == null ? void 0 : _a.minWidth) >= 0 && ((_b = this.config) == null ? void 0 : _b.minHeight) >= 0;
+  }
+  getIsHoverSelectedCuboid(e) {
+    const currentCoord = this.getCoordinateUnderZoom(e);
+    const {selectedCuboid} = this;
+    return selectedCuboid && AxisUtils.isCloseCuboid(currentCoord, AxisUtils.changeCuboidByZoom(selectedCuboid, this.zoom));
+  }
+  isForbiddenMove(e, cuboid) {
+    const coord = this.getCoordinateInOrigin(e);
+    if (coord.y > cuboid.frontPoints.br.y) {
+      return true;
+    }
+    return false;
+  }
+  updateSelectedCuboid(newCuboid) {
+    this.cuboidList = this.cuboidList.map((cuboid) => {
+      if (cuboid.id === this.selectedID) {
+        return newCuboid;
+      }
+      return cuboid;
+    });
+  }
+  getColorToRender(attribute, valid) {
+    const toolColor = this.getColor(attribute);
+    const strokeColor = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    const fillColor = valid ? toolColor == null ? void 0 : toolColor.valid.fill : toolColor == null ? void 0 : toolColor.invalid.fill;
+    return {strokeColor, toolColor, fillColor};
+  }
+  getCurrentSelectedData() {
+    const {selectedCuboid} = this;
+    if (!selectedCuboid) {
+      return;
+    }
+    const {strokeColor: color} = this.getColorToRender(selectedCuboid.attribute, selectedCuboid.valid);
+    return {
+      width: TEXT_MAX_WIDTH,
+      textAttribute: selectedCuboid.textAttribute,
+      color
+    };
+  }
+  updateSelectedTextAttribute(newTextAttribute) {
+    if (this._textAttributeInstance && newTextAttribute && this.selectedID) {
+      let textAttribute = newTextAttribute;
+      if (AttributeUtils.textAttributeValidate(this.config.textCheckType, "", textAttribute) === false) {
+        this.emit("messageError", AttributeUtils.getErrorNotice(this.config.textCheckType, this.lang));
+        textAttribute = "";
+      }
+      this.setCuboidList(AttributeUtils.textChange(textAttribute, this.selectedID, this.cuboidList));
+      this.history.pushHistory(this.cuboidList);
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+  setResult(cuboidList) {
+    this.clearDrawingStatus();
+    this.setCuboidList(cuboidList);
+    this.render();
+  }
+  clearResult() {
+    this.setCuboidList([], true);
+    this.setSelectedID(void 0);
+  }
+  exportData() {
+    const {cuboidList} = this;
+    return [cuboidList, this.basicImgInfo];
+  }
+  setSelectedID(newID) {
+    var _a, _b;
+    const oldID = this.selectedID;
+    if (newID !== oldID && oldID) {
+      (_a = this._textAttributeInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!newID) {
+      (_b = this._textAttributeInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedID = newID;
+    this.emit("selectedChange");
+  }
+  setSelectedIDAndRender(newID) {
+    this.setSelectedID(newID);
+    this.render();
+  }
+  setCuboidValidAndRender(id) {
+    if (!id) {
+      return;
+    }
+    const newPolygonList = this.cuboidList.map((cuboid) => {
+      if (cuboid.id === id) {
+        return __spreadProps(__spreadValues({}, cuboid), {
+          valid: !cuboid.valid
+        });
+      }
+      return cuboid;
+    });
+    this.setCuboidList(newPolygonList, true);
+    this.history.pushHistory(this.cuboidList);
+    this.render();
+  }
+  onRightDblClick(e) {
+    super.onRightDblClick(e);
+    const {hoverID} = this.getHoverData(e);
+    if (this.selectedID && this.selectedID === hoverID) {
+      this.deleteCuboid(hoverID);
+    }
+  }
+  setCuboidList(cuboidList, isUpload = false) {
+    const oldLen = this.cuboidList.length;
+    this.cuboidList = cuboidList;
+    if (oldLen !== cuboidList.length) {
+      this.emit("updatePageNumber");
+    }
+    if (isUpload) {
+      this.emit("updateResult");
+    }
+  }
+  deleteCuboid(id) {
+    var _a;
+    if (!id) {
+      return;
+    }
+    this.setCuboidList(this.cuboidList.filter((v) => v.id !== id));
+    this.history.pushHistory(this.cuboidList);
+    this.setSelectedID("");
+    (_a = this._textAttributeInstance) == null ? void 0 : _a.clearTextAttribute();
+    this.render();
+  }
+  onKeyDown(e) {
+    if (!CommonToolUtils.hotkeyFilter(e)) {
+      return;
+    }
+    if (super.onKeyDown(e) === false) {
+      return;
+    }
+    const {keyCode} = e;
+    switch (keyCode) {
+      case EKeyCode.Ctrl:
+        if (this.drawingCuboid) {
+          this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+            valid: false
+          });
+          this.render();
+        }
+        break;
+      case EKeyCode.F:
+        if (this.selectedID) {
+          this.setCuboidValidAndRender(this.selectedID);
+        }
+        break;
+      default: {
+        if (this.config.attributeConfigurable) {
+          const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(keyCode, this.config.attributeList);
+          if (keyCode2Attribute !== void 0) {
+            this.setDefaultAttribute(keyCode2Attribute);
+          }
+        }
+      }
+    }
+  }
+  onKeyUp(e) {
+    super.onKeyUp(e);
+    switch (e.keyCode) {
+      case EKeyCode.Ctrl:
+        if (this.drawingCuboid) {
+          this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+            valid: true
+          });
+          this.render();
+        }
+        break;
+    }
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || e.ctrlKey === true) {
+      return;
+    }
+    const {selectedCuboid} = this;
+    if (!selectedCuboid || e.button === 2 || e.button === 0 && this.isSpaceKey === true) {
+      return;
+    }
+    if (!this.getIsHoverSelectedCuboid(e)) {
+      return;
+    }
+    this.dragStatus = EDragStatus.Start;
+    const dragStartCoord = this.getCoordinateUnderZoom(e);
+    const DEFAULT_DRAG_INFO = {
+      initCuboid: selectedCuboid,
+      dragStartCoord
+    };
+    const highlightInfo = AxisUtils.returnClosePointOrLineInCuboid(dragStartCoord, AxisUtils.changeCuboidByZoom(selectedCuboid, this.zoom));
+    const firstHighlightInfo = highlightInfo == null ? void 0 : highlightInfo[0];
+    switch (firstHighlightInfo == null ? void 0 : firstHighlightInfo.type) {
+      case "point":
+        this.dragInfo = __spreadProps(__spreadValues({}, DEFAULT_DRAG_INFO), {
+          dragTarget: EDragTarget.Point,
+          positions: firstHighlightInfo.positions
+        });
+        break;
+      case "line":
+        this.dragInfo = __spreadProps(__spreadValues({}, DEFAULT_DRAG_INFO), {
+          dragTarget: EDragTarget.Line,
+          positions: firstHighlightInfo.positions
+        });
+        break;
+      default: {
+        this.dragInfo = __spreadProps(__spreadValues({}, DEFAULT_DRAG_INFO), {
+          dragTarget: EDragTarget.Cuboid
+        });
+      }
+    }
+  }
+  onMouseUp(e) {
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return void 0;
+    }
+    if (this.dragInfo && this.dragStatus === EDragStatus.Move) {
+      this.dragInfo = void 0;
+      this.dragStatus = EDragStatus.Wait;
+      this.history.pushHistory(this.cuboidList);
+      this.emit("updateResult");
+      return;
+    }
+    const basicSourceID = CommonToolUtils.getSourceID(this.basicResult);
+    if (e.button === 0) {
+      if (this.hoverID && e.ctrlKey && !this.drawingCuboid) {
+        this.setCuboidValidAndRender(this.hoverID);
+        return;
+      }
+      if (!this.drawingCuboid) {
+        this.createNewDrawingCuboid(e, basicSourceID);
+        return;
+      }
+      if (this.drawingCuboid) {
+        switch (this.drawingStatus) {
+          case 2:
+            this.closeNewDrawingFrontPlane();
+            break;
+          case 3:
+            this.closeAndCreateNewCuboid();
+            break;
+        }
+      }
+    }
+    if (e.button === 2) {
+      this.rightMouseUp(e);
+    }
+  }
+  onMouseMove(e) {
+    var _a;
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    if (this.selectedID && this.dragInfo) {
+      this.onDragMove(e);
+      return;
+    }
+    if (this.drawingCuboid) {
+      if (this.drawingFrontPlanesMove(e)) {
+        return;
+      }
+      this.drawingBackPlaneMove(e);
+      return;
+    }
+    this.hoverID = (_a = this.getHoverData(e).hoverID) != null ? _a : "";
+    this.onHoverMove(e);
+  }
+  drawingFrontPlanesMove(e) {
+    if (this.drawingCuboid && this.firstClickCoord && this.drawingStatus === 2) {
+      const coord = this.getCoordinateInOrigin(e);
+      this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+        frontPoints: getPlainPointsByDiagonalPoints(this.firstClickCoord, coord)
+      });
+      this.render();
+      return true;
+    }
+  }
+  drawingBackPlaneMove(e) {
+    if (this.drawingCuboid && this.firstClickCoord && this.drawingStatus === 3) {
+      const coord = this.getCoordinateInOrigin(e);
+      if (this.isForbiddenMove(e, this.drawingCuboid)) {
+        return;
+      }
+      this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+        backPoints: getPointsByBottomRightPoint({coord, points: this.drawingCuboid.frontPoints})
+      });
+      this.render();
+    }
+  }
+  onDragMove(e) {
+    if (!this.dragInfo || !this.selectedID) {
+      return;
+    }
+    const {dragTarget, initCuboid, dragStartCoord, positions} = this.dragInfo;
+    const coordinate = this.getCoordinateUnderZoom(e);
+    const offset = {
+      x: (coordinate.x - dragStartCoord.x) / this.zoom,
+      y: (coordinate.y - dragStartCoord.y) / this.zoom
+    };
+    this.dragStatus = EDragStatus.Move;
+    const newCuboid = getCuboidDragMove({offset, cuboid: initCuboid, dragTarget, positions});
+    if ((newCuboid == null ? void 0 : newCuboid.backPoints) && (newCuboid == null ? void 0 : newCuboid.backPoints.br.y) > (newCuboid == null ? void 0 : newCuboid.frontPoints.br.y)) {
+      return;
+    }
+    if (newCuboid) {
+      this.updateSelectedCuboid(newCuboid);
+    }
+    this.render();
+  }
+  onHoverMove(e) {
+    const {selectedCuboid} = this;
+    if (selectedCuboid) {
+      const currentCoord = this.getCoordinateUnderZoom(e);
+      const highlightInfo = AxisUtils.returnClosePointOrLineInCuboid(currentCoord, AxisUtils.changeCuboidByZoom(selectedCuboid, this.zoom), {
+        zoom: 1 / this.zoom,
+        scope: 5
+      });
+      this.highlightInfo = highlightInfo;
+      this.render();
+    }
+  }
+  createNewDrawingCuboid(e, basicSourceID) {
+    if (!this.imgInfo) {
+      return;
+    }
+    const coordinate = this.getCoordinateInOrigin(e);
+    this.drawingCuboid = {
+      attribute: this.defaultAttribute,
+      direction: ECuboidDirection.Front,
+      valid: !e.ctrlKey,
+      id: uuid(8, 62),
+      sourceID: basicSourceID,
+      textAttribute: "",
+      order: CommonToolUtils.getMaxOrder(this.cuboidList.filter((v) => CommonToolUtils.isSameSourceID(v.sourceID, basicSourceID))) + 1,
+      frontPoints: {
+        tl: coordinate,
+        bl: coordinate,
+        tr: coordinate,
+        br: coordinate
+      }
+    };
+    this.firstClickCoord = __spreadValues({}, coordinate);
+    this.drawingStatus = 2;
+  }
+  closeNewDrawingFrontPlane() {
+    this.drawingStatus = 3;
+  }
+  closeAndCreateNewCuboid() {
+    var _a, _b;
+    if (!((_a = this.drawingCuboid) == null ? void 0 : _a.frontPoints) || !this.drawingCuboid.backPoints) {
+      return;
+    }
+    if (this.isNeedCheckCuboidSize && isCuboidWithInLimits({cuboid: this.drawingCuboid, config: this.config}) === false) {
+      this.emit("messageInfo", Locale.getMessagesByLocale(EMessage.RectErrorSizeNotice, this.lang));
+    } else {
+      this.setCuboidList([...this.cuboidList, this.drawingCuboid]);
+      this.setSelectedID((_b = this.drawingCuboid) == null ? void 0 : _b.id);
+      this.history.pushHistory(this.cuboidList);
+    }
+    this.clearDrawingStatus();
+    this.render();
+  }
+  clearDrawingStatus() {
+    if (this.drawingCuboid) {
+      this.drawingCuboid = void 0;
+      this.drawingStatus = 1;
+    }
+  }
+  rightMouseUp(e) {
+    const {hoverID, hoverCuboid} = this.getHoverData(e);
+    this.setSelectedID(hoverID);
+    if (hoverCuboid) {
+      this.setDefaultAttribute(hoverCuboid.attribute);
+    }
+    if (this.drawingCuboid) {
+      this.clearDrawingStatus();
+    }
+    this.render();
+  }
+  renderSingleCuboid(cuboid) {
+    var _a, _b, _c, _d;
+    const transformCuboid = AxisUtils.changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
+    const isHover = transformCuboid.id === this.hoverID;
+    const isSelected = transformCuboid.id === this.selectedID;
+    const {strokeColor, fillColor} = this.getColorToRender(transformCuboid.attribute, transformCuboid.valid);
+    const textColor = strokeColor;
+    const lineWidth = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
+    const {hiddenText = false} = this.style;
+    const defaultStyle = {
+      color: strokeColor,
+      thickness: lineWidth
+    };
+    const {backPoints, frontPoints, textAttribute} = transformCuboid;
+    const frontPointsSizeWidth = frontPoints.br.x - frontPoints.bl.x;
+    DrawUtils.drawCuboid(this.canvas, transformCuboid, {strokeColor, fillColor, thickness: lineWidth});
+    if (isHover || isSelected) {
+      const hoverPointList = getHighlightPoints(transformCuboid);
+      hoverPointList.forEach((data) => {
+        DrawUtils.drawCircleWithFill(this.canvas, data.point, 5, __spreadValues({}, defaultStyle));
+      });
+      if (isSelected) {
+        hoverPointList.forEach((data) => {
+          DrawUtils.drawCircleWithFill(this.canvas, data.point, 3, {color: "white"});
+        });
+      }
+    }
+    let showText = "";
+    if (((_c = this.config) == null ? void 0 : _c.isShowOrder) && transformCuboid.order && (transformCuboid == null ? void 0 : transformCuboid.order) > 0) {
+      showText = `${transformCuboid.order}`;
+    }
+    if (transformCuboid.attribute) {
+      showText = `${showText}  ${AttributeUtils.getAttributeShowText(transformCuboid.attribute, (_d = this.config) == null ? void 0 : _d.attributeList)}`;
+    }
+    if (!hiddenText && backPoints) {
+      DrawUtils.drawText(this.canvas, {x: backPoints.tl.x, y: backPoints.tl.y - 5}, showText, {
+        color: strokeColor,
+        textMaxWidth: 300
+      });
+    }
+    const textPosition = getCuboidTextAttributeOffset({
+      cuboid,
+      currentPos: this.currentPos,
+      zoom: this.zoom,
+      topOffset: 16,
+      leftOffset: 0
+    });
+    if (!hiddenText && textAttribute && cuboid.id !== this.selectedID) {
+      const textWidth = Math.max(20, frontPointsSizeWidth * 0.8);
+      DrawUtils.drawText(this.canvas, {x: textPosition.left, y: textPosition.top}, textAttribute, {
+        color: textColor,
+        textMaxWidth: textWidth
+      });
+    }
+    this.renderTextAttribute();
+  }
+  setDefaultAttribute(defaultAttribute) {
+    const oldDefault = this.defaultAttribute;
+    this.defaultAttribute = defaultAttribute != null ? defaultAttribute : "";
+    if (oldDefault !== defaultAttribute) {
+      this.changeStyle(defaultAttribute);
+      this.emit("changeAttributeSidebar");
+      const {selectedCuboid} = this;
+      if (selectedCuboid) {
+        this.setCuboidList(this.cuboidList.map((v) => {
+          if (v.id === this.selectedID) {
+            return __spreadProps(__spreadValues({}, v), {
+              attribute: this.defaultAttribute
+            });
+          }
+          return v;
+        }));
+        this.history.pushHistory(this.cuboidList);
+        this.render();
+      }
+      if (this.drawingCuboid) {
+        this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+          attribute: this.defaultAttribute
+        });
+        this.render();
+      }
+      if (this._textAttributeInstance) {
+        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(this.defaultAttribute)) {
+          this._textAttributeInstance.clearTextAttribute();
+          return;
+        }
+        this._textAttributeInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
+      }
+    }
+  }
+  renderToggleButton() {
+    const {selectedCuboid} = this;
+    if (!this.ctx || this.config.textConfigurable !== true || !selectedCuboid) {
+      return;
+    }
+    const {attribute, valid} = selectedCuboid;
+    const {strokeColor: color} = this.getColorToRender(attribute, valid);
+    if (!this.toggleButtonInstance) {
+      this.toggleButtonInstance = new CuboidToggleButtonClass({
+        container: this.container,
+        cuboidButtonMove: (type) => this.updateMouseOperation(type),
+        toggleDirection: (direction) => this.toggleDirection(direction)
+      });
+    }
+    const toggleOffset = getToggleDirectionButtonOffset({
+      cuboid: selectedCuboid,
+      zoom: this.zoom,
+      currentPos: this.currentPos
+    });
+    this.toggleButtonInstance.update({
+      left: toggleOffset.left,
+      top: toggleOffset.top,
+      color
+    });
+  }
+  renderTextAttribute() {
+    var _a;
+    const {selectedCuboid} = this;
+    if (!this.ctx || this.config.textConfigurable === false || !selectedCuboid) {
+      return;
+    }
+    const {strokeColor: color} = this.getColorToRender(selectedCuboid.attribute, selectedCuboid.valid);
+    const {attribute, textAttribute, frontPoints} = selectedCuboid;
+    const offset = getCuboidTextAttributeOffset({
+      cuboid: selectedCuboid,
+      currentPos: this.currentPos,
+      zoom: this.zoom
+    });
+    const newWidth = (frontPoints.br.x - frontPoints.bl.x) * this.zoom * 0.8;
+    if (!this._textAttributeInstance) {
+      this._textAttributeInstance = new TextAttributeClass({
+        width: DEFAULT_TEXT_MAX_WIDTH,
+        container: this.container,
+        icon: this.getTextIconSvg(attribute),
+        color,
+        getCurrentSelectedData: this.getCurrentSelectedData,
+        updateSelectedTextAttribute: this.updateSelectedTextAttribute
+      });
+    }
+    if (this._textAttributeInstance && !((_a = this._textAttributeInstance) == null ? void 0 : _a.isExit)) {
+      this._textAttributeInstance.appendToContainer();
+    }
+    this._textAttributeInstance.update(`${textAttribute}`, {
+      left: offset.left,
+      top: offset.top,
+      color,
+      width: newWidth
+    });
+  }
+  renderDrawing() {
+    if (this.drawingCuboid) {
+      this.renderSingleCuboid(this.drawingCuboid);
+    }
+  }
+  renderStatic() {
+    this.cuboidList.forEach((cuboid) => this.renderSingleCuboid(cuboid));
+  }
+  renderSelected() {
+    var _a;
+    const {selectedCuboid} = this;
+    if (selectedCuboid) {
+      this.renderSingleCuboid(selectedCuboid);
+      this.renderToggleButton();
+    } else {
+      (_a = this.toggleButtonInstance) == null ? void 0 : _a.clearCuboidButtonDOM();
+      this.toggleButtonInstance = void 0;
+    }
+  }
+  updateMouseOperation(type) {
+    if (type === "in") {
+      this.setForbidCursorLine(true);
+      this.setForbidOperation(true);
+      this.setShowDefaultCursor(true);
+    } else {
+      this.setForbidCursorLine(false);
+      this.setShowDefaultCursor(false);
+      this.setForbidOperation(false);
+    }
+  }
+  toggleDirection(direction) {
+    if (this.cuboidList && this.selectedCuboid) {
+      this.setCuboidList(this.cuboidList.map((i) => {
+        var _a;
+        return i.id === ((_a = this.selectedCuboid) == null ? void 0 : _a.id) ? __spreadProps(__spreadValues({}, i), {direction}) : i;
+      }));
+      this.history.pushHistory(this.cuboidList);
+      this.render();
+    }
+  }
+  renderHover() {
+    var _a;
+    if (this.dragInfo) {
+      return;
+    }
+    (_a = this.highlightInfo) == null ? void 0 : _a.forEach((data) => {
+      var _a2, _b;
+      const {strokeColor} = this.getColorToRender(data.originCuboid.attribute, data.originCuboid.valid);
+      const thickness = 8;
+      switch (data.type) {
+        case "point":
+          (_a2 = data.points) == null ? void 0 : _a2.forEach((point) => {
+            DrawUtils.drawCircleWithFill(this.canvas, AxisUtils.changePointByZoom(point, this.zoom, this.currentPos), thickness, {
+              color: strokeColor
+            });
+          });
+          break;
+        case "line": {
+          const pointList = (_b = data.points) == null ? void 0 : _b.map((point) => AxisUtils.changePointByZoom(point, this.zoom, this.currentPos));
+          if (pointList) {
+            DrawUtils.drawLineWithPointList(this.canvas, pointList, {color: strokeColor, thickness});
+          }
+          break;
+        }
+      }
+    });
+  }
+  renderCuboid() {
+    this.renderStatic();
+    this.renderDrawing();
+    this.renderSelected();
+    this.renderHover();
+  }
+  render() {
+    if (!this.ctx) {
+      return;
+    }
+    super.render();
+    this.renderCuboid();
+    this.renderCursorLine(this.getLineColor(this.defaultAttribute));
+  }
+  undo() {
+    const cuboidList = this.history.undo();
+    if (cuboidList) {
+      if (cuboidList.length !== this.cuboidList.length) {
+        this.setSelectedID("");
+      }
+      this.setCuboidList(cuboidList, true);
+      this.render();
+    }
+  }
+  redo() {
+    const cuboidList = this.history.redo();
+    if (cuboidList) {
+      if (cuboidList.length !== this.cuboidList.length) {
+        this.setSelectedID("");
+      }
+      this.setCuboidList(cuboidList, true);
+      this.render();
+    }
+  }
+}
+
+export { CuboidOperation as default };