@labelbee/lb-annotation 1.14.0-alpha.2 → 1.14.0-alpha.3

package/dist/core/toolOperation/cuboidOperation.js

@@ -1 +1,754 @@
-"use strict";var CommonToolUtils=require("../../utils/tool/CommonToolUtils.js"),AxisUtils=require("../../utils/tool/AxisUtils.js"),uuid=require("../../utils/uuid.js"),CuboidUtils=require("../../utils/tool/CuboidUtils.js"),PolygonUtils=require("../../utils/tool/PolygonUtils.js"),annotation=require("../../constant/annotation.js"),AttributeUtils=require("../../utils/tool/AttributeUtils.js"),tool=require("../../constant/tool.js"),keyCode=require("../../constant/keyCode.js"),basicToolOperation=require("./basicToolOperation.js"),DrawUtils=require("../../utils/tool/DrawUtils.js"),cuboidToggleButtonClass=require("./cuboidToggleButtonClass.js"),textAttributeClass=require("./textAttributeClass.js"),index=require("../../locales/index.js"),constants=require("../../locales/constants.js"),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(u,t,i)=>t in u?__defProp(u,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):u[t]=i,__spreadValues=(u,t)=>{for(var i in t||(t={}))__hasOwnProp.call(t,i)&&__defNormalProp(u,i,t[i]);if(__getOwnPropSymbols)for(var i of __getOwnPropSymbols(t))__propIsEnum.call(t,i)&&__defNormalProp(u,i,t[i]);return u},__spreadProps=(u,t)=>__defProps(u,__getOwnPropDescs(t)),EDrawingStatus;(function(u){u[u.Ready=1]="Ready",u[u.FirstPoint=2]="FirstPoint",u[u.Cuboid=3]="Cuboid"})(EDrawingStatus||(EDrawingStatus={}));const TEXT_MAX_WIDTH=164;class CuboidOperation extends basicToolOperation.BasicToolOperation{constructor(t){super(t);this.drawingStatus=1,this.cuboidList=[],this.hoverID="",this.getHoverData=i=>{const e=this.getCoordinateUnderZoom(i),{currentShowList:s}=this;if((s==null?void 0:s.length)>0){const o=s.map(n=>({id:n.id,pointList:AxisUtils.default.changePointListByZoom(CuboidUtils.getCuboidHoverRange(n),this.zoom)})),r=PolygonUtils.getHoverPolygonID(e,o);if(r)return{hoverID:r,hoverCuboid:s.find(n=>n.id===r)}}return{}},this.textChange=i=>{this.config.textConfigurable===!1||!this.selectedID||(this.setCuboidList(AttributeUtils.default.textChange(i,this.selectedID,this.cuboidList)),this.emit("selectedChange"),this.render())},this.config=CommonToolUtils.jsonParser(t.config),this.getCurrentSelectedData=this.getCurrentSelectedData.bind(this),this.updateSelectedTextAttribute=this.updateSelectedTextAttribute.bind(this)}get selectedText(){var t,i;return(i=(t=this.selectedCuboid)==null?void 0:t.textAttribute)!=null?i:""}destroy(){super.destroy(),this._textAttributeInstance&&this._textAttributeInstance.clearTextAttribute()}get currentShowList(){let t=[];const[i,e]=CommonToolUtils.getRenderResultList(this.cuboidList,CommonToolUtils.getSourceID(this.basicResult),this.attributeLockList,this.selectedID);return t=i,this.isHidden&&(t=[]),e&&t.push(e),t}get selectedCuboid(){return this.cuboidList.find(t=>t.id===this.selectedID)}get dataList(){return this.cuboidList}get isNeedCheckCuboidSize(){var t,i;return((t=this.config)==null?void 0:t.minWidth)>=0&&((i=this.config)==null?void 0:i.minHeight)>=0}getIsHoverSelectedCuboid(t){const i=this.getCoordinateUnderZoom(t),{selectedCuboid:e}=this;return e&&AxisUtils.default.isCloseCuboid(i,AxisUtils.default.changeCuboidByZoom(e,this.zoom))}isForbiddenMove(t,i){return this.getCoordinateInOrigin(t).y>i.frontPoints.br.y}updateSelectedCuboid(t){this.cuboidList=this.cuboidList.map(i=>i.id===this.selectedID?t:i)}getStylesToRender(t,i){var e,s;const o=this.getColor(t),r=i?o==null?void 0:o.valid.stroke:o==null?void 0:o.invalid.stroke,n=i?o==null?void 0:o.valid.fill:o==null?void 0:o.invalid.fill,d=(s=(e=this.style)==null?void 0:e.width)!=null?s:2;return{strokeColor:r,toolColor:o,fillColor:n,lineWidth:d}}getCurrentSelectedData(){const{selectedCuboid:t}=this;if(!t)return;const{strokeColor:i}=this.getStylesToRender(t.attribute,t.valid);return{width:TEXT_MAX_WIDTH,textAttribute:t.textAttribute,color:i}}updateSelectedTextAttribute(t){if(this._textAttributeInstance&&t&&this.selectedID){let i=t;AttributeUtils.default.textAttributeValidate(this.config.textCheckType,"",i)===!1&&(this.emit("messageError",AttributeUtils.default.getErrorNotice(this.config.textCheckType,this.lang)),i=""),this.setCuboidList(AttributeUtils.default.textChange(i,this.selectedID,this.cuboidList)),this.history.pushHistory(this.cuboidList),this.emit("updateTextAttribute"),this.render()}}setResult(t){this.clearActiveStatus(),this.setCuboidList(t),this.render()}get currentPageResult(){return this.cuboidList}clearResult(){this.setCuboidList([],!0),this.deleteSelectedID(),this.render()}exportData(){const{cuboidList:t}=this;return[t,this.basicImgInfo]}setSelectedID(t){var i,e;const s=this.selectedID;t!==s&&s&&((i=this._textAttributeInstance)==null||i.changeSelected()),t||(e=this._textAttributeInstance)==null||e.clearTextAttribute(),this.selectedID=t,this.emit("selectedChange")}setSelectedIDAndRender(t){this.setSelectedID(t),this.render()}setCuboidValidAndRender(t){if(!t)return;const i=this.cuboidList.map(e=>e.id===t?__spreadProps(__spreadValues({},e),{valid:!e.valid}):e);this.setCuboidList(i,!0),this.history.pushHistory(this.cuboidList),this.render()}onRightDblClick(t){super.onRightDblClick(t);const{hoverID:i}=this.getHoverData(t);this.selectedID&&this.selectedID===i&&this.deleteCuboid(i)}setCuboidList(t,i=!1){const e=this.cuboidList.length;this.cuboidList=t,e!==t.length&&this.emit("updatePageNumber"),i&&this.emit("updateResult")}deleteCuboid(t){var i;!t||(this.setCuboidList(this.cuboidList.filter(e=>e.id!==t)),this.history.pushHistory(this.cuboidList),this.setSelectedID(""),(i=this._textAttributeInstance)==null||i.clearTextAttribute(),this.render())}onKeyDown(t){if(!CommonToolUtils.hotkeyFilter(t)||super.onKeyDown(t)===!1)return;const{keyCode:i}=t;switch(i){case keyCode.Ctrl:this.drawingCuboid&&(this.drawingCuboid=__spreadProps(__spreadValues({},this.drawingCuboid),{valid:!1}),this.render());break;case keyCode.Delete:this.selectedID&&this.deleteCuboid(this.selectedID);break;case keyCode.Z:this.setIsHidden(!this.isHidden),this.render();break;case keyCode.F:this.selectedID&&this.setCuboidValidAndRender(this.selectedID);break;default:if(this.config.attributeConfigurable){const e=AttributeUtils.default.getAttributeByKeycode(i,this.config.attributeList);e!==void 0&&this.setDefaultAttribute(e)}}}onKeyUp(t){switch(super.onKeyUp(t),t.keyCode){case keyCode.Ctrl:this.drawingCuboid&&(this.drawingCuboid=__spreadProps(__spreadValues({},this.drawingCuboid),{valid:!0}),this.render());break}}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||t.ctrlKey===!0)return;const{selectedCuboid:i}=this;if(!i||t.button===2||t.button===0&&this.isSpaceKey===!0||!this.getIsHoverSelectedCuboid(t))return;this.dragStatus=annotation.EDragStatus.Start;const e=this.getCoordinateUnderZoom(t),s={initCuboid:i,dragStartCoord:e},o=AxisUtils.default.returnClosePointOrLineInCuboid(e,AxisUtils.default.changeCuboidByZoom(i,this.zoom)),r=o==null?void 0:o[0];switch(r==null?void 0:r.type){case"point":this.dragInfo=__spreadProps(__spreadValues({},s),{dragTarget:annotation.EDragTarget.Point,positions:r.positions});break;case"line":this.dragInfo=__spreadProps(__spreadValues({},s),{dragTarget:annotation.EDragTarget.Line,positions:r.positions});break;default:this.dragInfo=__spreadProps(__spreadValues({},s),{dragTarget:annotation.EDragTarget.Cuboid})}}onMouseUp(t){if(super.onMouseUp(t)||this.forbidMouseOperation||!this.imgInfo)return;if(this.dragInfo&&this.dragStatus===annotation.EDragStatus.Move){this.dragInfo=void 0,this.dragStatus=annotation.EDragStatus.Wait,this.history.pushHistory(this.cuboidList),this.emit("updateResult");return}const i=CommonToolUtils.getSourceID(this.basicResult);if(t.button===0){if(this.hoverID&&t.ctrlKey&&!this.drawingCuboid){this.setCuboidValidAndRender(this.hoverID);return}if(!this.drawingCuboid){this.createNewDrawingCuboid(t,i);return}if(this.drawingCuboid)switch(this.drawingStatus){case 2:this.closeNewDrawingFrontPlane();break;case 3:this.closeAndCreateNewCuboid();break}}t.button===2&&this.rightMouseUp(t)}onMouseMove(t){var i;if(!(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)){if(this.selectedID&&this.dragInfo){this.onDragMove(t);return}if(this.drawingCuboid){if(this.drawingFrontPlanesMove(t))return;this.drawingBackPlaneMove(t);return}this.hoverID=(i=this.getHoverData(t).hoverID)!=null?i:"",this.onHoverMove(t)}}drawingFrontPlanesMove(t){if(this.drawingCuboid&&this.firstClickCoord&&this.drawingStatus===2){const i=this.getCoordinateInOrigin(t);return this.drawingCuboid=__spreadProps(__spreadValues({},this.drawingCuboid),{frontPoints:CuboidUtils.getPlainPointsByDiagonalPoints(this.firstClickCoord,i)}),this.render(),!0}}drawingBackPlaneMove(t){if(this.drawingCuboid&&this.firstClickCoord&&this.drawingStatus===3){const i=this.getCoordinateInOrigin(t);if(this.isForbiddenMove(t,this.drawingCuboid))return;this.drawingCuboid=__spreadProps(__spreadValues({},this.drawingCuboid),{backPoints:CuboidUtils.getPointsByBottomRightPoint({coord:i,points:this.drawingCuboid.frontPoints})}),this.render()}}onDragMove(t){if(!this.dragInfo||!this.selectedID)return;const{dragTarget:i,initCuboid:e,dragStartCoord:s,positions:o}=this.dragInfo,r=this.getCoordinateUnderZoom(t),n={x:(r.x-s.x)/this.zoom,y:(r.y-s.y)/this.zoom};this.dragStatus=annotation.EDragStatus.Move;const d=CuboidUtils.getCuboidDragMove({offset:n,cuboid:e,dragTarget:i,positions:o});(d==null?void 0:d.backPoints)&&(d==null?void 0:d.backPoints.br.y)>(d==null?void 0:d.frontPoints.br.y)||(d&&this.updateSelectedCuboid(d),this.render())}onHoverMove(t){const{selectedCuboid:i}=this;if(i){const e=this.getCoordinateUnderZoom(t),s=AxisUtils.default.returnClosePointOrLineInCuboid(e,AxisUtils.default.changeCuboidByZoom(i,this.zoom),{zoom:1/this.zoom,scope:5});this.highlightInfo=s,this.render()}}createNewDrawingCuboid(t,i){if(!this.imgInfo)return;const e=this.getCoordinateInOrigin(t);if(this.drawingCuboid={attribute:this.defaultAttribute,direction:annotation.ECuboidDirection.Front,valid:!t.ctrlKey,id:uuid(8,62),sourceID:i,textAttribute:"",order:CommonToolUtils.getMaxOrder(this.cuboidList.filter(s=>CommonToolUtils.isSameSourceID(s.sourceID,i)))+1,frontPoints:{tl:e,bl:e,tr:e,br:e}},this.firstClickCoord=__spreadValues({},e),this.drawingStatus=2,this.config.textConfigurable){let s="";s=AttributeUtils.default.getTextAttribute(this.cuboidList.filter(o=>CommonToolUtils.isSameSourceID(o.sourceID,i)),this.config.textCheckType),this.drawingCuboid=__spreadProps(__spreadValues({},this.drawingCuboid),{textAttribute:s})}}closeNewDrawingFrontPlane(){this.drawingStatus=3}closeAndCreateNewCuboid(){var t,i;!((t=this.drawingCuboid)==null?void 0:t.frontPoints)||!this.drawingCuboid.backPoints||(this.isNeedCheckCuboidSize&&CuboidUtils.isCuboidWithInLimits({cuboid:this.drawingCuboid,config:this.config})===!1?this.emit("messageInfo",index.getMessagesByLocale(constants.EMessage.RectErrorSizeNotice,this.lang)):(this.setCuboidList([...this.cuboidList,this.drawingCuboid]),this.setSelectedID((i=this.drawingCuboid)==null?void 0:i.id),this.history.pushHistory(this.cuboidList)),this.clearDrawingStatus(),this.render())}deleteSelectedID(){this.setSelectedID("")}clearDrawingStatus(){this.drawingCuboid&&(this.drawingCuboid=void 0,this.drawingStatus=1)}clearActiveStatus(){this.clearDrawingStatus(),this.deleteSelectedID()}rightMouseUp(t){const{hoverID:i,hoverCuboid:e}=this.getHoverData(t);this.setSelectedID(i),e&&this.setDefaultAttribute(e.attribute),this.drawingCuboid&&this.clearDrawingStatus(),this.render()}renderHighlightCuboidCom(t){const i=AxisUtils.default.changeCuboidByZoom(t,this.zoom,this.currentPos),e=i.id===this.hoverID,s=i.id===this.selectedID,{strokeColor:o,lineWidth:r}=this.getStylesToRender(i.attribute,i.valid),n={color:o,thickness:r};if(e||s){const d=CuboidUtils.getHighlightPoints(i);d.forEach(a=>{DrawUtils.drawCircleWithFill(this.canvas,a.point,5,__spreadValues({},n))}),s&&(CuboidUtils.getHighlightLines(i).forEach(h=>{DrawUtils.drawLine(this.canvas,h.p1,h.p2,{color:o,thickness:r+2})}),d.forEach(h=>{DrawUtils.drawCircleWithFill(this.canvas,h.point,3,{color:"white"})}))}}renderSingleCuboid(t){var i,e;const s=AxisUtils.default.changeCuboidByZoom(t,this.zoom,this.currentPos),{strokeColor:o,fillColor:r}=this.getStylesToRender(s.attribute,s.valid),n=(e=(i=this.style)==null?void 0:i.width)!=null?e:2,{hiddenText:d=!1}=this.style;DrawUtils.drawCuboidWithText(this.canvas,s,{strokeColor:o,fillColor:r,thickness:n},{config:this.config,hiddenText:d,selectedID:this.selectedID}),this.renderTextAttribute()}setDefaultAttribute(t){const i=this.defaultAttribute;if(this.defaultAttribute=t!=null?t:"",i!==t){this.changeStyle(t),this.emit("changeAttributeSidebar");const{selectedCuboid:e}=this;if(this._textAttributeInstance&&(this.attributeLockList.length>0&&!this.attributeLockList.includes(this.defaultAttribute)?this._textAttributeInstance.clearTextAttribute():this._textAttributeInstance.updateIcon(this.getTextIconSvg(t))),e){this.setCuboidList(this.cuboidList.map(s=>s.id===this.selectedID?__spreadProps(__spreadValues({},s),{attribute:this.defaultAttribute}):s)),this.history.pushHistory(this.cuboidList),this.render();return}this.drawingCuboid&&(this.drawingCuboid=__spreadProps(__spreadValues({},this.drawingCuboid),{attribute:this.defaultAttribute}),this.render())}}renderToggleButton(){const{selectedCuboid:t}=this;if(!this.ctx||!t)return;const{attribute:i,valid:e}=t,{strokeColor:s}=this.getStylesToRender(i,e);this.toggleButtonInstance||(this.toggleButtonInstance=new cuboidToggleButtonClass({container:this.container,cuboidButtonMove:r=>this.updateMouseOperation(r),toggleDirection:r=>this.toggleDirection(r)}));const o=CuboidUtils.getToggleDirectionButtonOffset({cuboid:t,zoom:this.zoom,currentPos:this.currentPos});this.toggleButtonInstance.update({left:o.left,top:o.top,color:s})}renderTextAttribute(){var t;const{selectedCuboid:i}=this;if(!this.ctx||this.config.textConfigurable===!1||!i)return;const{strokeColor:e}=this.getStylesToRender(i.attribute,i.valid),{attribute:s,textAttribute:o,frontPoints:r}=i,n=CuboidUtils.getCuboidTextAttributeOffset({cuboid:i,currentPos:this.currentPos,zoom:this.zoom}),d=(r.br.x-r.bl.x)*this.zoom*.8;this._textAttributeInstance||(this._textAttributeInstance=new textAttributeClass({width:tool.DEFAULT_TEXT_MAX_WIDTH,container:this.container,icon:this.getTextIconSvg(s),color:e,getCurrentSelectedData:this.getCurrentSelectedData,updateSelectedTextAttribute:this.updateSelectedTextAttribute})),this._textAttributeInstance&&!((t=this._textAttributeInstance)==null?void 0:t.isExit)&&this._textAttributeInstance.appendToContainer(),this._textAttributeInstance.update(`${o}`,{left:n.left,top:n.top,color:e,width:d})}renderDrawing(){this.drawingCuboid&&this.renderSingleCuboid(this.drawingCuboid)}renderStatic(){this.isHidden||this.currentShowList.forEach(t=>this.renderSingleCuboid(t))}renderSelected(){var t;const{selectedCuboid:i}=this;i?(this.renderSingleCuboid(i),this.renderHighlightCuboidCom(i),this.renderToggleButton()):((t=this.toggleButtonInstance)==null||t.clearCuboidButtonDOM(),this.toggleButtonInstance=void 0)}updateMouseOperation(t){t==="in"?(this.setForbidCursorLine(!0),this.setForbidOperation(!0),this.setShowDefaultCursor(!0)):(this.setForbidCursorLine(!1),this.setShowDefaultCursor(!1),this.setForbidOperation(!1))}toggleDirection(t){this.cuboidList&&this.selectedCuboid&&(this.setCuboidList(this.cuboidList.map(i=>{var e;return i.id===((e=this.selectedCuboid)==null?void 0:e.id)?__spreadProps(__spreadValues({},i),{direction:t}):i})),this.history.pushHistory(this.cuboidList),this.render())}renderHover(){var t;this.dragInfo||(t=this.highlightInfo)==null||t.forEach(i=>{var e,s;const{strokeColor:o}=this.getStylesToRender(i.originCuboid.attribute,i.originCuboid.valid),r=8;switch(i.type){case"point":(e=i.points)==null||e.forEach(n=>{DrawUtils.drawCircleWithFill(this.canvas,AxisUtils.default.changePointByZoom(n,this.zoom,this.currentPos),r,{color:o})});break;case"line":{const n=(s=i.points)==null?void 0:s.map(d=>AxisUtils.default.changePointByZoom(d,this.zoom,this.currentPos));n&&DrawUtils.drawLineWithPointList(this.canvas,n,{color:o,thickness:r});break}}})}renderCuboid(){this.renderStatic(),this.renderDrawing(),this.renderSelected(),this.renderHover()}render(){!this.ctx||(super.render(),this.renderCuboid(),this.renderCursorLine(this.getLineColor(this.defaultAttribute)))}undo(){const t=this.history.undo();t&&(t.length!==this.cuboidList.length&&this.setSelectedID(""),this.setCuboidList(t,!0),this.render())}redo(){const t=this.history.redo();t&&(t.length!==this.cuboidList.length&&this.setSelectedID(""),this.setCuboidList(t,!0),this.render())}}module.exports=CuboidOperation;
+'use strict';
+
+var CommonToolUtils = require('../../utils/tool/CommonToolUtils.js');
+var AxisUtils = require('../../utils/tool/AxisUtils.js');
+var uuid = require('../../utils/uuid.js');
+var CuboidUtils = require('../../utils/tool/CuboidUtils.js');
+var PolygonUtils = require('../../utils/tool/PolygonUtils.js');
+var annotation = require('../../constant/annotation.js');
+var AttributeUtils = require('../../utils/tool/AttributeUtils.js');
+var tool = require('../../constant/tool.js');
+var keyCode = require('../../constant/keyCode.js');
+var basicToolOperation = require('./basicToolOperation.js');
+var DrawUtils = require('../../utils/tool/DrawUtils.js');
+var cuboidToggleButtonClass = require('./cuboidToggleButtonClass.js');
+var textAttributeClass = require('./textAttributeClass.js');
+var index = require('../../locales/index.js');
+var constants = require('../../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.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["default"].changePointListByZoom(CuboidUtils.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["default"].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);
+  }
+  get selectedText() {
+    var _a, _b;
+    return (_b = (_a = this.selectedCuboid) == null ? void 0 : _a.textAttribute) != null ? _b : "";
+  }
+  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["default"].isCloseCuboid(currentCoord, AxisUtils["default"].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;
+    });
+  }
+  getStylesToRender(attribute, valid) {
+    var _a, _b;
+    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;
+    const lineWidth = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
+    return {strokeColor, toolColor, fillColor, lineWidth};
+  }
+  getCurrentSelectedData() {
+    const {selectedCuboid} = this;
+    if (!selectedCuboid) {
+      return;
+    }
+    const {strokeColor: color} = this.getStylesToRender(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["default"].textAttributeValidate(this.config.textCheckType, "", textAttribute) === false) {
+        this.emit("messageError", AttributeUtils["default"].getErrorNotice(this.config.textCheckType, this.lang));
+        textAttribute = "";
+      }
+      this.setCuboidList(AttributeUtils["default"].textChange(textAttribute, this.selectedID, this.cuboidList));
+      this.history.pushHistory(this.cuboidList);
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+  setResult(cuboidList) {
+    this.clearActiveStatus();
+    this.setCuboidList(cuboidList);
+    this.render();
+  }
+  get currentPageResult() {
+    return this.cuboidList;
+  }
+  clearResult() {
+    this.setCuboidList([], true);
+    this.deleteSelectedID();
+    this.render();
+  }
+  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: keyCode$1} = e;
+    switch (keyCode$1) {
+      case keyCode.Ctrl:
+        if (this.drawingCuboid) {
+          this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+            valid: false
+          });
+          this.render();
+        }
+        break;
+      case keyCode.Delete:
+        if (this.selectedID) {
+          this.deleteCuboid(this.selectedID);
+        }
+        break;
+      case keyCode.Z:
+        this.setIsHidden(!this.isHidden);
+        this.render();
+        break;
+      case keyCode.F:
+        if (this.selectedID) {
+          this.setCuboidValidAndRender(this.selectedID);
+        }
+        break;
+      default: {
+        if (this.config.attributeConfigurable) {
+          const keyCode2Attribute = AttributeUtils["default"].getAttributeByKeycode(keyCode$1, this.config.attributeList);
+          if (keyCode2Attribute !== void 0) {
+            this.setDefaultAttribute(keyCode2Attribute);
+          }
+        }
+      }
+    }
+  }
+  onKeyUp(e) {
+    super.onKeyUp(e);
+    switch (e.keyCode) {
+      case keyCode.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 = annotation.EDragStatus.Start;
+    const dragStartCoord = this.getCoordinateUnderZoom(e);
+    const DEFAULT_DRAG_INFO = {
+      initCuboid: selectedCuboid,
+      dragStartCoord
+    };
+    const highlightInfo = AxisUtils["default"].returnClosePointOrLineInCuboid(dragStartCoord, AxisUtils["default"].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: annotation.EDragTarget.Point,
+          positions: firstHighlightInfo.positions
+        });
+        break;
+      case "line":
+        this.dragInfo = __spreadProps(__spreadValues({}, DEFAULT_DRAG_INFO), {
+          dragTarget: annotation.EDragTarget.Line,
+          positions: firstHighlightInfo.positions
+        });
+        break;
+      default: {
+        this.dragInfo = __spreadProps(__spreadValues({}, DEFAULT_DRAG_INFO), {
+          dragTarget: annotation.EDragTarget.Cuboid
+        });
+      }
+    }
+  }
+  onMouseUp(e) {
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return void 0;
+    }
+    if (this.dragInfo && this.dragStatus === annotation.EDragStatus.Move) {
+      this.dragInfo = void 0;
+      this.dragStatus = annotation.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: CuboidUtils.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: CuboidUtils.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 = annotation.EDragStatus.Move;
+    const newCuboid = CuboidUtils.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["default"].returnClosePointOrLineInCuboid(currentCoord, AxisUtils["default"].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: annotation.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;
+    if (this.config.textConfigurable) {
+      let textAttribute = "";
+      textAttribute = AttributeUtils["default"].getTextAttribute(this.cuboidList.filter((cuboid) => CommonToolUtils.isSameSourceID(cuboid.sourceID, basicSourceID)), this.config.textCheckType);
+      this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+        textAttribute
+      });
+    }
+  }
+  closeNewDrawingFrontPlane() {
+    this.drawingStatus = 3;
+  }
+  closeAndCreateNewCuboid() {
+    var _a, _b;
+    if (!((_a = this.drawingCuboid) == null ? void 0 : _a.frontPoints) || !this.drawingCuboid.backPoints) {
+      return;
+    }
+    if (this.isNeedCheckCuboidSize && CuboidUtils.isCuboidWithInLimits({cuboid: this.drawingCuboid, config: this.config}) === false) {
+      this.emit("messageInfo", index.getMessagesByLocale(constants.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();
+  }
+  deleteSelectedID() {
+    this.setSelectedID("");
+  }
+  clearDrawingStatus() {
+    if (this.drawingCuboid) {
+      this.drawingCuboid = void 0;
+      this.drawingStatus = 1;
+    }
+  }
+  clearActiveStatus() {
+    this.clearDrawingStatus();
+    this.deleteSelectedID();
+  }
+  rightMouseUp(e) {
+    const {hoverID, hoverCuboid} = this.getHoverData(e);
+    this.setSelectedID(hoverID);
+    if (hoverCuboid) {
+      this.setDefaultAttribute(hoverCuboid.attribute);
+    }
+    if (this.drawingCuboid) {
+      this.clearDrawingStatus();
+    }
+    this.render();
+  }
+  renderHighlightCuboidCom(cuboid) {
+    const transformCuboid = AxisUtils["default"].changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
+    const isHover = transformCuboid.id === this.hoverID;
+    const isSelected = transformCuboid.id === this.selectedID;
+    const {strokeColor, lineWidth} = this.getStylesToRender(transformCuboid.attribute, transformCuboid.valid);
+    const defaultStyle = {
+      color: strokeColor,
+      thickness: lineWidth
+    };
+    if (isHover || isSelected) {
+      const hoverPointList = CuboidUtils.getHighlightPoints(transformCuboid);
+      hoverPointList.forEach((data) => {
+        DrawUtils.drawCircleWithFill(this.canvas, data.point, 5, __spreadValues({}, defaultStyle));
+      });
+      if (isSelected) {
+        const highlightLine = CuboidUtils.getHighlightLines(transformCuboid);
+        highlightLine.forEach((line) => {
+          DrawUtils.drawLine(this.canvas, line.p1, line.p2, {color: strokeColor, thickness: lineWidth + 2});
+        });
+        hoverPointList.forEach((data) => {
+          DrawUtils.drawCircleWithFill(this.canvas, data.point, 3, {color: "white"});
+        });
+      }
+    }
+  }
+  renderSingleCuboid(cuboid) {
+    var _a, _b;
+    const transformCuboid = AxisUtils["default"].changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
+    const {strokeColor, fillColor} = this.getStylesToRender(transformCuboid.attribute, transformCuboid.valid);
+    const lineWidth = (_b = (_a = this.style) == null ? void 0 : _a.width) != null ? _b : 2;
+    const {hiddenText = false} = this.style;
+    DrawUtils.drawCuboidWithText(this.canvas, transformCuboid, {strokeColor, fillColor, thickness: lineWidth}, {
+      config: this.config,
+      hiddenText,
+      selectedID: this.selectedID
+    });
+    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 (this._textAttributeInstance) {
+        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(this.defaultAttribute)) {
+          this._textAttributeInstance.clearTextAttribute();
+        } else {
+          this._textAttributeInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
+        }
+      }
+      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();
+        return;
+      }
+      if (this.drawingCuboid) {
+        this.drawingCuboid = __spreadProps(__spreadValues({}, this.drawingCuboid), {
+          attribute: this.defaultAttribute
+        });
+        this.render();
+      }
+    }
+  }
+  renderToggleButton() {
+    const {selectedCuboid} = this;
+    if (!this.ctx || !selectedCuboid) {
+      return;
+    }
+    const {attribute, valid} = selectedCuboid;
+    const {strokeColor: color} = this.getStylesToRender(attribute, valid);
+    if (!this.toggleButtonInstance) {
+      this.toggleButtonInstance = new cuboidToggleButtonClass({
+        container: this.container,
+        cuboidButtonMove: (type) => this.updateMouseOperation(type),
+        toggleDirection: (direction) => this.toggleDirection(direction)
+      });
+    }
+    const toggleOffset = CuboidUtils.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.getStylesToRender(selectedCuboid.attribute, selectedCuboid.valid);
+    const {attribute, textAttribute, frontPoints} = selectedCuboid;
+    const offset = CuboidUtils.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: tool.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() {
+    if (!this.isHidden) {
+      this.currentShowList.forEach((cuboid) => this.renderSingleCuboid(cuboid));
+    }
+  }
+  renderSelected() {
+    var _a;
+    const {selectedCuboid} = this;
+    if (selectedCuboid) {
+      this.renderSingleCuboid(selectedCuboid);
+      this.renderHighlightCuboidCom(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.getStylesToRender(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["default"].changePointByZoom(point, this.zoom, this.currentPos), thickness, {
+              color: strokeColor
+            });
+          });
+          break;
+        case "line": {
+          const pointList = (_b = data.points) == null ? void 0 : _b.map((point) => AxisUtils["default"].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();
+    }
+  }
+}
+
+module.exports = CuboidOperation;