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

package/es/core/toolOperation/cuboidOperation.js

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