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

package/dist/core/toolOperation/rectOperation.js

@@ -1 +1,1233 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var MathUtils=require("../../utils/MathUtils.js"),AxisUtils=require("../../utils/tool/AxisUtils.js"),RectUtils=require("../../utils/tool/RectUtils.js"),annotation=require("../../constant/annotation.js"),tool=require("../../constant/tool.js"),keyCode=require("../../constant/keyCode.js"),index=require("../../locales/index.js"),constants=require("../../locales/constants.js"),AttributeUtils=require("../../utils/tool/AttributeUtils.js"),CanvasUtils=require("../../utils/tool/CanvasUtils.js"),CommonToolUtils=require("../../utils/tool/CommonToolUtils.js"),DrawUtils=require("../../utils/tool/DrawUtils.js"),MarkerUtils=require("../../utils/tool/MarkerUtils.js"),polygonTool=require("../../utils/tool/polygonTool.js"),uuid=require("../../utils/uuid.js"),basicToolOperation=require("./basicToolOperation.js"),textAttributeClass=require("./textAttributeClass.js"),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(v,t,e)=>t in v?__defProp(v,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):v[t]=e,__spreadValues=(v,t)=>{for(var e in t||(t={}))__hasOwnProp.call(t,e)&&__defNormalProp(v,e,t[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(t))__propIsEnum.call(t,e)&&__defNormalProp(v,e,t[e]);return v},__spreadProps=(v,t)=>__defProps(v,__getOwnPropDescs(t));const scope=6;class RectOperation extends basicToolOperation.BasicToolOperation{constructor(t){super(t);this.setMarkerIndex=e=>{this.markerIndex=e},this.setMarkerIndexAndSelect=e=>{if(!this.config.markerList)return;this.markerIndex=e;const i=this.config.markerList[e].value,r=this.currentPageResult.find(o=>o.label===i);r&&(this.setSelectedID(r.id),this.config.attributeConfigurable===!0&&this.setDefaultAttribute(r.attribute)),this.emit("markIndexChange")},this.getHoverRectID=e=>{const i=this.getCoordinateUnderZoom(e),r=scope,{currentShowList:o}=this;if(o.length>0){if(this.selectedRectID){const{selectedRect:g}=this;if(g&&RectUtils.isInRect(i,g,r,this.zoom))return g.id}const a=o.filter(g=>RectUtils.isInRect(i,g,r,this.zoom));if(a.length===0)return"";if(a.length===1)return a[0].id;if(a.length>1)return a.map(s=>({size:s.width*s.height,id:s.id})).sort((s,f)=>s.size-f.size)[0].id}return""},this.textChange=e=>{this.config.textConfigurable!==!0||!this.selectedRectID||(this.setRectList(AttributeUtils.default.textChange(e,this.selectedRectID,this.rectList),!0),this.emit("selectedChange"),this.render())},this.drawOutSideTarget=t.drawOutSideTarget||!1,this.rectList=[],this.isFlow=!0,this.config=CommonToolUtils.jsonParser(t.config),this.hoverRectEdgeIndex=-1,this.hoverRectPointIndex=-1,this.markerIndex=0,this.setStyle(t.style),this.createNewDrawingRect=this.createNewDrawingRect.bind(this),this.getDrawingRectWithRectList=this.getDrawingRectWithRectList.bind(this),this.setSelectedIdAfterAddingDrawingRect=this.setSelectedIdAfterAddingDrawingRect.bind(this),this.getCurrentSelectedData=this.getCurrentSelectedData.bind(this),this.updateSelectedRectTextAttribute=this.updateSelectedRectTextAttribute.bind(this),this.setSelectedID=this.setSelectedID.bind(this)}setResult(t){if(this.clearActiveStatus(),this.setRectList(t),this.hasMarkerConfig){const e=CommonToolUtils.getNextMarker(this.getCurrentPageResult(t),this.config.markerList);e&&this.setMarkerIndex(e.index)}this.render()}destroy(){super.destroy(),this._textAttributInstance&&this._textAttributInstance.clearTextAttribute()}setConfig(t,e=!1){this.config=CommonToolUtils.jsonParser(t),e===!0&&this.clearResult(!1)}setRectList(t,e=!1){const i=this.rectList.length;this.rectList=t,i!==t.length&&this.emit("updatePageNumber"),e&&this.emit("updateResult")}get selectedRect(){return this.rectList.find(t=>t.id===this.selectedRectID)}get selectedID(){return this.selectedRectID}get selectedText(){var t;return(t=this.selectedRect)==null?void 0:t.textAttribute}get dataList(){return this.rectList}get currentShowList(){let t=[];const[e,i]=CommonToolUtils.getRenderResultList(this.rectList,CommonToolUtils.getSourceID(this.basicResult),this.attributeLockList,this.selectedID);return t=e,this.isHidden&&(t=[]),i&&t.push(i),t}get currentPageResult(){const[t]=CommonToolUtils.getRenderResultList(this.rectList,CommonToolUtils.getSourceID(this.basicResult),[]);return t}getCurrentPageResult(t){const[e]=CommonToolUtils.getRenderResultList(t,CommonToolUtils.getSourceID(this.basicResult),[]);return e}setSelectedID(t){this.setSelectedRectID(t)}setSelectedRectID(t){var e,i;const r=this.selectedRectID;t!==r&&r&&((e=this._textAttributInstance)==null||e.changeSelected()),t||(i=this._textAttributInstance)==null||i.clearTextAttribute(),this.selectedRectID=t,this.render(),this.emit("selectedChange")}setStyle(t){var e;super.setStyle(t),this._textAttributInstance&&this.config.attributeConfigurable===!1&&((e=this._textAttributInstance)==null||e.updateIcon(this.getTextIconSvg()))}updateSelectedRectTextAttribute(t){if(this._textAttributInstance&&t){let e=t;AttributeUtils.default.textAttributeValidate(this.config.textCheckType,"",e)===!1&&(this.emit("messageError",AttributeUtils.default.getErrorNotice(this.config.textCheckType,this.lang)),e=""),this.setRectList(this.rectList.map(i=>i.id===this.selectedRectID?__spreadProps(__spreadValues({},i),{textAttribute:e}):i),!0),this.emit("updateTextAttribute"),this.render()}}getHoverRectPointIndex(t){return this.selectedRect?AxisUtils.default.returnClosePointIndex(this.getCoordinateUnderZoom(t),RectUtils.getRectPointList(this.selectedRect,this.zoom),scope+2):-1}getHoverRectEdgeIndex(t){if(!this.selectedRect)return-1;let e=-1;const{selectedRect:i}=this,r=RectUtils.getRectEdgeList(i,this.zoom),o=this.getCoordinateUnderZoom(t);for(let a=0;a<r.length;a++){const g=r[a],{length:s}=MathUtils.default.getFootOfPerpendicular(o,g.begin,g.end);s<scope+10&&(e=a)}return e}getTextIconSvg(t=""){return AttributeUtils.default.getTextIconSvg(t,this.config.attributeList,this.config.attributeConfigurable,this.baseIcon)}multiMoveMouseDown(t){const e=this.getCoordinateUnderZoom(t),i=this.getHoverRectID(t);return this.isMultiMoveMode&&i&&t.button===0?(this.dragInfo={dragStartCoord:e,dragTarget:tool.EDragTarget.Plane,startTime:+new Date,originRectList:this.rectList},this.dragStatus=annotation.EDragStatus.Start,!0):!1}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||t.ctrlKey===!0||this.multiMoveMouseDown(t))return;const e=this.getCoordinateUnderZoom(t),i=this.getHoverRectID(t),r=this.currentShowList.find(o=>o.id===this.selectedRectID);if(!(!r||t.button===2||t.button===0&&this.isSpaceKey===!0)){if(this.selectedRectID){if(this.getHoverRectPointIndex(t)>-1){const o=tool.EDragTarget.Point;this.dragInfo={dragStartCoord:e,dragTarget:o,startTime:+new Date,firstRect:r},this.dragStatus=annotation.EDragStatus.Start;return}if(this.getHoverRectEdgeIndex(t)>-1){const o=tool.EDragTarget.Line;this.dragInfo={dragStartCoord:e,dragTarget:o,startTime:+new Date,firstRect:r},this.dragStatus=annotation.EDragStatus.Start;return}}if(i===this.selectedRectID&&!this.drawingRect){const o=tool.EDragTarget.Plane;this.dragInfo={dragStartCoord:e,dragTarget:o,firstRect:r,startTime:+new Date},this.dragStatus=annotation.EDragStatus.Start}}}onDragMoveAll(t){var e,i;!((i=(e=this.dragInfo)==null?void 0:e.originRectList)==null?void 0:i.length)||(this.setRectList(this.dragInfo.originRectList.map(r=>__spreadProps(__spreadValues({},r),{x:r.x+t.x/this.zoom,y:r.y+t.y/this.zoom}))),this.render())}onDragMove(t){var e,i,r,o,a,g;if(!this.dragInfo)return;const s={x:t.x-this.dragInfo.dragStartCoord.x,y:t.y-this.dragInfo.dragStartCoord.y};if(this.dragStatus=annotation.EDragStatus.Move,this.isMultiMoveMode){this.onDragMoveAll(s);return}if(!this.dragInfo.firstRect)return;const f=RectUtils.getRectUnderZoom(this.dragInfo.firstRect,this.zoom),{x:l,y:c,width:u,height:d}=f;let n=this.rectList.filter(h=>h.id===this.selectedRectID)[0];switch(this.dragInfo.dragTarget){case tool.EDragTarget.Plane:n=__spreadProps(__spreadValues({},n),{x:l+s.x,y:c+s.y,width:u,height:d});break;case tool.EDragTarget.Point:{let h=l,R=c,x=u,b=d;switch(this.hoverRectPointIndex){case 0:{h=u-s.x<0?l+u:l+s.x,R=d-s.y<0?c+d:c+s.y,x=Math.abs(s.x-u),b=Math.abs(s.y-d);break}case 1:{h=u+s.x>0?l:l+u+s.x,R=d-s.y<0?c+d:c+s.y,x=Math.abs(u+s.x),b=Math.abs(d-s.y);break}case 2:{h=u+s.x>0?l:l+u+s.x,R=d+s.y>0?c:c+d+s.y,x=Math.abs(u+s.x),b=d+s.y>0?d+s.y:Math.abs(d+s.y);break}case 3:{h=u-s.x<0?l+u:l+s.x,R=d+s.y>0?c:c+d+s.y,x=Math.abs(s.x-u),b=d+s.y>0?d+s.y:Math.abs(d+s.y);break}default:return}n=__spreadProps(__spreadValues({},n),{x:h,y:R,width:x,height:b})}break;case tool.EDragTarget.Line:{let h=l,R=c,x=u,b=d;switch(this.hoverRectEdgeIndex){case 0:{R=d-s.y<0?c+d:c+s.y,b=Math.abs(s.y-d);break}case 1:{h=u+s.x>0?l:l+u+s.x,x=Math.abs(u+s.x);break}case 2:{R=d+s.y>0?c:c+d+s.y,b=d+s.y>0?d+s.y:Math.abs(d+s.y);break}case 3:{h=u-s.x<0?l+u:l+s.x,x=Math.abs(s.x-u);break}default:return}n=__spreadProps(__spreadValues({},n),{x:h,y:R,width:x,height:b});break}default:return}if(this.config.drawOutsideTarget===!1){if(this.basicResult){if(((i=(e=this.basicResult)==null?void 0:e.pointList)==null?void 0:i.length)>0&&RectUtils.isRectNotInPolygon(n,polygonTool.getPolygonPointUnderZoom(this.basicResult.pointList,this.zoom)))return;const h=this.basicResult.x*this.zoom,R=this.basicResult.y*this.zoom,x=this.basicResult.width*this.zoom,b=this.basicResult.height*this.zoom;if(this.dragInfo.dragTarget!==tool.EDragTarget.Plane&&(n.x<h-.01||n.y<R-.01||n.width>h+x-n.x+.01||n.height>R+b-n.y+.01))return;if(n.x<h&&(n.x=h),n.y<R&&(n.y=R),n.width>h+x-n.x)switch(this.dragInfo.dragTarget){case tool.EDragTarget.Plane:n.x=h+x-u;break;case tool.EDragTarget.Point:case tool.EDragTarget.Line:s.x>0&&s.y>0&&(n.width=h+x-n.x);break;default:return}if(n.height>R+b-n.y)switch(this.dragInfo.dragTarget){case tool.EDragTarget.Plane:n.y=R+b-d;break}}else if(n.x<0&&(n.x=0),n.y<0&&(n.y=0),this.imgInfo)switch(this.dragInfo.dragTarget){case tool.EDragTarget.Plane:n.x+n.width>((r=this.imgInfo)==null?void 0:r.width)&&(n.x=this.imgInfo.width-u),n.y+n.height>((o=this.imgInfo)==null?void 0:o.height)&&(n.y=this.imgInfo.height-d);break;default:if(n.x+n.width>((a=this.imgInfo)==null?void 0:a.width)+.01||n.y+n.height>((g=this.imgInfo)==null?void 0:g.height)+.01)return}}this.setRectList(this.rectList.map(h=>h.id===n.id?RectUtils.getRectUnderZoom(n,1/this.zoom):h)),this.render()}onMouseMove(t){var e,i;if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const r=this.getCoordinateUnderZoom(t),o=AxisUtils.default.changeDrawOutsideTarget(r,{x:0,y:0},this.imgInfo,this.config.drawOutsideTarget,this.basicResult,this.zoom);if((this.selectedRectID||this.isMultiMoveMode)&&this.dragInfo){this.onDragMove(o);return}if(this.selectedRectID){const s=this.getHoverRectPointIndex(t);if(s!==this.hoverRectPointIndex){this.hoverRectPointIndex=s,this.hoverRectEdgeIndex=-1,this.render();return}if(this.hoverRectPointIndex===-1){const f=this.getHoverRectEdgeIndex(t);if(f!==this.hoverRectEdgeIndex){this.hoverRectEdgeIndex=f,this.render();return}}}const a=this.getHoverRectID(t),g=this.hoverRectID;if(this.hoverRectID=a,a!==g&&this.render(),this.drawingRect&&this.firstClickCoord){let{x:s,y:f}=this.firstClickCoord,{width:l,height:c}=this.drawingRect;if(l=Math.abs(s-o.x),c=Math.abs(f-o.y),o.x<s&&(s=o.x),o.y<f&&(f=o.y),this.config.drawOutsideTarget===!1){if(((i=(e=this.basicResult)==null?void 0:e.pointList)==null?void 0:i.length)>0&&RectUtils.isRectNotInPolygon(__spreadProps(__spreadValues({},this.drawingRect),{x:s,y:f,width:l,height:c}),polygonTool.getPolygonPointUnderZoom(this.basicResult.pointList,this.zoom)))return;o.x<0&&(l=Math.abs(this.firstClickCoord.x),s=0),o.y<0&&(c=Math.abs(this.firstClickCoord.y),f=0),this.imgInfo&&(s+l>this.imgInfo.width&&(l=Math.abs(this.imgInfo.width-s)),f+c>this.imgInfo.height&&(c=Math.abs(this.imgInfo.height-f)))}this.drawingRect=__spreadProps(__spreadValues({},this.drawingRect),{x:s,y:f,width:l,height:c}),this.render()}}setAttributeLockList(t){this.setSelectedRectID(void 0),super.setAttributeLockList(t)}setBasicResult(t){super.setBasicResult(t),this.clearActiveStatus()}setRectValidAndRender(t){!t||(this.setRectList(this.rectList.map(e=>e.id===t?__spreadProps(__spreadValues({},e),{valid:!e.valid}):e),!0),this.render(),this.emit("updateResult"))}createNewDrawingRect(t,e){if(!this.imgInfo)return;const i=this.getCoordinateUnderZoom(t),r=AxisUtils.default.changeDrawOutsideTarget(i,{x:0,y:0},this.imgInfo,this.config.drawOutsideTarget,this.basicResult,this.zoom);if(this.setSelectedRectID(""),this.hoverRectID="",this.drawOutSideTarget&&(r.x<0&&(r.x=0),r.y<0&&(r.y=0)),this.drawingRect=__spreadProps(__spreadValues({},r),{width:0,height:0,attribute:this.defaultAttribute,valid:!t.ctrlKey,id:uuid(8,62),sourceID:e,textAttribute:""}),this.hasMarkerConfig){const o=CommonToolUtils.getNextMarker(this.currentPageResult,this.config.markerList,this.markerIndex);if(o)this.drawingRect&&(this.drawingRect=__spreadProps(__spreadValues({},this.drawingRect),{label:o.label})),this.markerIndex=o.index,this.emit("markIndexChange");else{this.emit("messageInfo",index.getMessagesByLocale(constants.EMessage.MarkerFinish,this.lang)),this.drawingRect=void 0;return}}if(this.config.textConfigurable){let o="";o=AttributeUtils.default.getTextAttribute(this.rectList.filter(a=>CommonToolUtils.isSameSourceID(a.sourceID,e)),this.config.textCheckType),this.drawingRect&&(this.drawingRect=__spreadProps(__spreadValues({},this.drawingRect),{textAttribute:o}))}if(Object.assign(this.drawingRect,{order:CommonToolUtils.getMaxOrder(this.rectList.filter(o=>CommonToolUtils.isSameSourceID(o.sourceID,e)))+1}),this.firstClickCoord=__spreadValues({},r),this.firstCurrentPos=__spreadValues({},this.currentPos),this.dataInjectionAtCreation){const o=this.dataInjectionAtCreation(this.drawingRect);o&&Object.assign(this.drawingRect,o)}}addDrawingRectToRectList(){if(!this.drawingRect)return;let{width:t,height:e}=this.drawingRect;if(t/=this.zoom,e/=this.zoom,Math.round(t)<this.config.minWidth||Math.round(e)<this.config.minHeight){this.emit("messageInfo",index.getMessagesByLocale(constants.EMessage.RectErrorSizeNotice,this.lang)),this.drawingRect=void 0,this.firstClickCoord=void 0,this.dragInfo=void 0,this.dragStatus=annotation.EDragStatus.Wait,this.render();return}const i=this.getDrawingRectWithRectList();this.setRectList(i,!0),this.history.pushHistory(this.rectList),this.setSelectedIdAfterAddingDrawingRect(),this.firstClickCoord=void 0,this.drawingRect=void 0,this.dragInfo=void 0,this.dragStatus=annotation.EDragStatus.Wait}setSelectedIdAfterAddingDrawingRect(){!this.drawingRect||(this.config.textConfigurable?this.setSelectedRectID(this.drawingRect.id):this.setSelectedRectID())}getDrawingRectWithRectList(){if(!this.drawingRect)return this.rectList;let{x:t,y:e,width:i,height:r}=this.drawingRect;return t/=this.zoom,e/=this.zoom,i/=this.zoom,r/=this.zoom,[...this.rectList,__spreadProps(__spreadValues({},this.drawingRect),{x:t,y:e,width:i,height:r})]}rightMouseUp(t){const e=this.getHoverRectID(t),i=this.rectList.find(o=>o.id===e),{selectedRectID:r}=this;if(this.setSelectedRectID(void 0),i&&this.setDefaultAttribute(i.attribute),this.drawingRect)this.drawingRect=void 0,this.firstClickCoord=void 0;else if(r!==e&&this.dblClickListener.clearRightDblClick(),this.setSelectedRectID(e),this.hoverRectID="",(i==null?void 0:i.label)&&this.hasMarkerConfig){const o=CommonToolUtils.getCurrentMarkerIndex(i.label,this.config.markerList);o>=0&&(this.setMarkerIndex(o),this.emit("markIndexChange"))}this.render()}shiftRightMouseUp(t){const e=this.getHoverRectID(t);this.emit("shiftRightMouseUp",e)}onMouseUp(t){if(super.onMouseUp(t)||this.forbidMouseOperation||!this.imgInfo)return!0;if(this.dragInfo&&this.dragStatus===annotation.EDragStatus.Move){this.dragInfo=void 0,this.dragStatus=annotation.EDragStatus.Wait,this.history.pushHistory(this.rectList),this.emit("updateResult");return}if(this.isMultiMoveMode&&this.setOperationMode(tool.EOperationMode.General),t.button===2&&t.shiftKey===!0){this.shiftRightMouseUp(t);return}if(t.button===2){this.rightMouseUp(t);return}const e=CommonToolUtils.getSourceID(this.basicResult);if(this.drawingRect){this.addDrawingRectToRectList();return}if(t.ctrlKey===!0&&t.button===0&&this.hoverRectID){this.setRectValidAndRender(this.hoverRectID);return}this.createNewDrawingRect(t,e),this.render()}onRightDblClick(t){super.onRightDblClick(t);const e=this.getHoverRectID(t);this.selectedRectID&&this.selectedRectID===e&&this.deleteRect(e)}onKeyDown(t){if(!CommonToolUtils.hotkeyFilter(t)||super.onKeyDown(t)===!1)return;const{keyCode:e}=t;switch(e){case keyCode.Ctrl:this.drawingRect&&(this.drawingRect=__spreadProps(__spreadValues({},this.drawingRect),{valid:!t.ctrlKey}),this.render());break;case keyCode.F:this.selectedRectID&&this.setRectValidAndRender(this.selectedRectID);break;case keyCode.Z:this.setIsHidden(!this.isHidden),this.render();break;case keyCode.Delete:this.deleteRect(this.selectedRectID);break;case keyCode.Tab:{if(t.preventDefault(),this.drawingRect)return;let i=annotation.ESortDirection.ascend;t.shiftKey&&(i=annotation.ESortDirection.descend);const[r,o]=CommonToolUtils.getRenderResultList(this.rectList,CommonToolUtils.getSourceID(this.basicResult),this.attributeLockList,this.selectedRectID);let a=[...r];o&&(a=[...a,o]);const g=CanvasUtils.getViewPort(this.canvas,this.currentPos,this.zoom);a=a.filter(f=>CanvasUtils.inViewPort({x:f.x,y:f.y},g));const s=CommonToolUtils.getNextSelectedRectID(a,i,this.selectedRectID);s&&(this.setSelectedRectID(s.id),this.config.attributeConfigurable===!0&&this.setDefaultAttribute(s.attribute));break}default:{if(this.config.attributeConfigurable){const i=AttributeUtils.default.getAttributeByKeycode(e,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i)}break}}return!0}onKeyUp(t){switch(super.onKeyUp(t),t.keyCode){case keyCode.Ctrl:this.drawingRect&&(this.drawingRect=__spreadProps(__spreadValues({},this.drawingRect),{valid:!0}),this.render());break}}onWheel(t){const e=this.zoom;let i,r;this.drawingRect&&this.firstClickCoord&&(i=RectUtils.getRectUnderZoom(this.drawingRect,1/e),r=AxisUtils.default.changePointByZoom(this.firstClickCoord,1/e)),super.onWheel(t,!1),i&&r&&(this.drawingRect=RectUtils.getRectUnderZoom(i,this.zoom),this.firstClickCoord=AxisUtils.default.changePointByZoom(r,this.zoom)),this.render()}getCurrentSelectedData(){const{selectedRect:t}=this;if(!t)return;const e=this.getColor(t.attribute),i=t.valid?e==null?void 0:e.valid.stroke:e==null?void 0:e.invalid.stroke;return{width:t.width*this.zoom*.6,textAttribute:t.textAttribute,color:i}}getRenderStyle(t){const e=this.customRenderStyle&&this.customRenderStyle(t);if(e)return e;const i=this.getColor(t.attribute);let r,o;return t.valid===!1?(r=i==null?void 0:i.invalid.stroke,o=i==null?void 0:i.invalid.fill):(r=i==null?void 0:i.valid.stroke,o=i==null?void 0:i.valid.fill),{strokeColor:r,fillColor:o,textColor:r,toolColor:i}}renderTextAttribute(){var t;const{selectedRect:e}=this;if(!this.ctx||this.config.textConfigurable!==!0||!e)return;const{x:i,y:r,width:o,height:a,attribute:g,valid:s}=e,f=o*this.zoom*.6,l=AxisUtils.default.getOffsetCoordinate({x:i,y:r+a},this.currentPos,this.zoom),c=this.getColor(g),u=s?c==null?void 0:c.valid.stroke:c==null?void 0:c.invalid.stroke,d=4;this._textAttributInstance||(this._textAttributInstance=new textAttributeClass({width:f,container:this.container,icon:this.getTextIconSvg(g),color:u,getCurrentSelectedData:this.getCurrentSelectedData,updateSelectedTextAttribute:this.updateSelectedRectTextAttribute})),this._textAttributInstance&&!((t=this._textAttributInstance)==null?void 0:t.isExit)&&this._textAttributInstance.appendToContainer(),this._textAttributInstance.update(`${e.textAttribute}`,{left:l.x,top:l.y+d,color:u,width:f})}renderSelectedRect(t){if(!this.ctx||!t)return;const{ctx:e}=this;let i=10;const r=RectUtils.getRectPointList(t),o=r.length,a=this.getColor(t.attribute);r.forEach((g,s)=>{var f,l;if(e.save(),e.moveTo(g.x,g.y),e.beginPath(),this.hoverRectPointIndex===s?i=scope+6:i=scope,t.valid===!1?(e.strokeStyle=a==null?void 0:a.invalid.stroke,e.fillStyle=a==null?void 0:a.invalid.stroke):(e.strokeStyle=a==null?void 0:a.valid.stroke,e.fillStyle=a==null?void 0:a.valid.stroke),e.arc(g.x*this.zoom+this.currentPos.x,g.y*this.zoom+this.currentPos.y,i,0,2*Math.PI),e.fill(),this.hoverRectEdgeIndex===s){e.beginPath(),e.lineWidth=10;const c=this.getColor(t.attribute),u=t.valid===!1?(f=c==null?void 0:c.invalid)==null?void 0:f.stroke:(l=c==null?void 0:c.valid)==null?void 0:l.stroke;e.strokeStyle=u,e.moveTo(r[s].x*this.zoom+this.currentPos.x,r[s].y*this.zoom+this.currentPos.y),e.lineTo(r[(s+1)%o].x*this.zoom+this.currentPos.x,r[(s+1)%o].y*this.zoom+this.currentPos.y),e.stroke()}e.restore()}),this.renderTextAttribute()}renderDrawingRect(t,e=this.zoom,i=!1){var r,o,a,g;if(this.ctx&&t){const{ctx:s,style:f}=this,{hiddenText:l=!1}=f;s.save();const{strokeColor:c,fillColor:u,textColor:d}=this.getRenderStyle(t);s.font="lighter 14px Arial";let n="";((r=this.config)==null?void 0:r.isShowOrder)&&t.order&&(t==null?void 0:t.order)>0&&(n=`${t.order}`),t.label&&this.hasMarkerConfig&&(n=`${CommonToolUtils.getCurrentMarkerIndex(t.label,this.config.markerList)+1}_${MarkerUtils.getMarkerShowText(t.label,this.config.markerList)}`),t.attribute&&(n=`${n}  ${AttributeUtils.default.getAttributeShowText(t.attribute,(o=this.config)==null?void 0:o.attributeList)}`);const h=AxisUtils.default.changeRectByZoom(t,i?e:this.zoom,this.currentPos);l||DrawUtils.drawText(this.canvas,{x:h.x,y:h.y-6},n,__spreadProps(__spreadValues({color:c,font:"normal normal 900 14px SourceHanSansCN-Regular"},annotation.DEFAULT_TEXT_SHADOW),{textMaxWidth:300}));const R=(g=(a=this.style)==null?void 0:a.width)!=null?g:2;(t.id===this.hoverRectID||t.id===this.selectedRectID||this.isMultiMoveMode)&&DrawUtils.drawRectWithFill(this.canvas,h,{color:u}),DrawUtils.drawRect(this.canvas,h,{color:c,thickness:R,hiddenText:!0}),s.restore();let x=`${Math.round(t.width)} * ${Math.round(t.height)}`;i===!0&&(x=`${Math.round(t.width/this.zoom)} * ${Math.round(h.height/this.zoom)}`);const b=x.length*7;if(l||DrawUtils.drawText(this.canvas,{x:h.x+h.width-b,y:h.y+h.height+15},x,__spreadValues({color:d,font:"normal normal 600 14px Arial"},annotation.DEFAULT_TEXT_SHADOW)),!l&&t.textAttribute&&t.id!==this.selectedRectID){const I=0,w=Math.max(20,h.width-b);DrawUtils.drawText(this.canvas,{x:h.x,y:h.y+h.height+20+I},t.textAttribute,__spreadValues({color:d,font:"italic normal 900 14px Arial",textMaxWidth:w},annotation.DEFAULT_TEXT_SHADOW))}}}renderMultiSelectedRect(){!this.isMultiMoveMode||this.rectList.forEach(t=>{this.renderDrawingRect(t),this.renderSelectedRect(t)})}renderStaticRect(){var t;if(!(((t=this.rectList)==null?void 0:t.length)>0&&JSON.stringify(this.rectList)))return;const{renderEnhance:e={}}=this,[i,r]=CommonToolUtils.getRenderResultList(this.rectList,CommonToolUtils.getSourceID(this.basicResult),this.attributeLockList,this.selectedRectID);this.isHidden||i==null||i.forEach(o=>{this.renderDrawingRect(o),e.staticRender&&e.staticRender(this.canvas,AxisUtils.default.changeRectByZoom(o,this.zoom,this.currentPos),this.getRenderStyle(o))}),r&&(this.renderDrawingRect(r),this.renderSelectedRect(r),e.selectedRender&&e.selectedRender(this.canvas,AxisUtils.default.changeRectByZoom(r,this.zoom,this.currentPos),this.getRenderStyle(r)))}renderCreatingRect(){if(!this.drawingRect)return;const{renderEnhance:t={}}=this;this.renderDrawingRect(this.drawingRect,1,!0),t.creatingRender&&t.creatingRender(this.canvas,AxisUtils.default.changeRectByZoom(this.drawingRect,1,this.currentPos),this.getRenderStyle(this.drawingRect))}renderRect(){switch(this.operationMode){case tool.EOperationMode.MultiMove:this.renderMultiSelectedRect();break;default:this.renderStaticRect(),this.renderCreatingRect()}}render(){!this.ctx||(super.render(),this.renderRect(),this.renderCursorLine(this.getLineColor(this.defaultAttribute)))}setDefaultAttribute(t){const e=this.defaultAttribute;if(this.defaultAttribute=t!=null?t:"",e!==t){this.changeStyle(t),this.emit("changeAttributeSidebar");const{selectedRect:i}=this;if(i&&(this.setRectList(this.rectList.map(r=>r.id===this.selectedID?__spreadProps(__spreadValues({},r),{attribute:this.defaultAttribute}):r),!0),this.history.pushHistory(this.rectList),this.render()),this.drawingRect&&(this.drawingRect=__spreadProps(__spreadValues({},this.drawingRect),{attribute:this.defaultAttribute}),this.render()),this._textAttributInstance){if(this.attributeLockList.length>0&&!this.attributeLockList.includes(this.defaultAttribute)){this._textAttributInstance.clearTextAttribute();return}this._textAttributInstance.updateIcon(this.getTextIconSvg(t))}}}setValid(t){super.setValid(t),this.emit("updateResult")}clearActiveStatus(){this.drawingRect=void 0,this.firstClickCoord=void 0,this.dragInfo=void 0,this.dragStatus=annotation.EDragStatus.Wait,this.setSelectedRectID(void 0),this.setOperationMode(tool.EOperationMode.General)}clearResult(t=!0){const e=this.rectList.filter(i=>i.disableDelete===!0);e.length>0&&t&&this.emit("messageInfo",index.getMessagesByLocale(constants.EMessage.ClearPartialData,this.lang)),this.setRectList(e,!0),this.setSelectedRectID(void 0)}deleteRect(t){var e;if(!t)return;const i=this.rectList.find(r=>r.id===t);if((i==null?void 0:i.disableDelete)===!0){this.emit("messageInfo",index.getMessagesByLocale(constants.EMessage.DisableDelete,this.lang));return}this.setRectList(this.rectList.filter(r=>r.id!==t),!0),this.history.pushHistory(this.rectList),this.setSelectedRectID(void 0),(e=this._textAttributInstance)==null||e.clearTextAttribute(),this.render()}exportData(){const{rectList:t}=this;return[t,this.basicImgInfo]}undo(){const t=this.history.undo();t&&(t.length!==this.rectList.length&&this.setSelectedRectID(""),this.setRectList(t,!0),this.render())}redo(){const t=this.history.redo();t&&(t.length!==this.rectList.length&&this.setSelectedRectID(""),this.setRectList(t,!0),this.render())}}exports.RectOperation=RectOperation,exports.default=RectOperation;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MathUtils = require('../../utils/MathUtils.js');
+var AxisUtils = require('../../utils/tool/AxisUtils.js');
+var RectUtils = require('../../utils/tool/RectUtils.js');
+var annotation = require('../../constant/annotation.js');
+var tool = require('../../constant/tool.js');
+var keyCode = require('../../constant/keyCode.js');
+var index = require('../../locales/index.js');
+var constants = require('../../locales/constants.js');
+var AttributeUtils = require('../../utils/tool/AttributeUtils.js');
+var CanvasUtils = require('../../utils/tool/CanvasUtils.js');
+var CommonToolUtils = require('../../utils/tool/CommonToolUtils.js');
+var DrawUtils = require('../../utils/tool/DrawUtils.js');
+var MarkerUtils = require('../../utils/tool/MarkerUtils.js');
+var polygonTool = require('../../utils/tool/polygonTool.js');
+var uuid = require('../../utils/uuid.js');
+var basicToolOperation = require('./basicToolOperation.js');
+var textAttributeClass = require('./textAttributeClass.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));
+const scope = 6;
+class RectOperation extends basicToolOperation.BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.setMarkerIndex = (markerIndex) => {
+      this.markerIndex = markerIndex;
+    };
+    this.setMarkerIndexAndSelect = (markerIndex) => {
+      if (!this.config.markerList) {
+        return;
+      }
+      this.markerIndex = markerIndex;
+      const markerValue = this.config.markerList[markerIndex].value;
+      const currentRect = this.currentPageResult.find((rect) => rect.label === markerValue);
+      if (currentRect) {
+        this.setSelectedID(currentRect.id);
+        if (this.config.attributeConfigurable === true) {
+          this.setDefaultAttribute(currentRect.attribute);
+        }
+      }
+      this.emit("markIndexChange");
+    };
+    this.getHoverRectID = (e) => {
+      const coordinate = this.getCoordinateUnderZoom(e);
+      const newScope = scope;
+      const {currentShowList} = this;
+      if (currentShowList.length > 0) {
+        if (this.selectedRectID) {
+          const {selectedRect} = this;
+          if (selectedRect) {
+            if (RectUtils.isInRect(coordinate, selectedRect, newScope, this.zoom)) {
+              return selectedRect.id;
+            }
+          }
+        }
+        const hoverList = currentShowList.filter((rect) => RectUtils.isInRect(coordinate, rect, newScope, this.zoom));
+        if (hoverList.length === 0) {
+          return "";
+        }
+        if (hoverList.length === 1) {
+          return hoverList[0].id;
+        }
+        if (hoverList.length > 1) {
+          const rectSizeList = hoverList.map((rect) => ({size: rect.width * rect.height, id: rect.id})).sort((a, b) => a.size - b.size);
+          return rectSizeList[0].id;
+        }
+      }
+      return "";
+    };
+    this.textChange = (v) => {
+      if (this.config.textConfigurable !== true || !this.selectedRectID) {
+        return;
+      }
+      this.setRectList(AttributeUtils["default"].textChange(v, this.selectedRectID, this.rectList), true);
+      this.emit("selectedChange");
+      this.render();
+    };
+    this.drawOutSideTarget = props.drawOutSideTarget || false;
+    this.rectList = [];
+    this.isFlow = true;
+    this.config = CommonToolUtils.jsonParser(props.config);
+    this.hoverRectEdgeIndex = -1;
+    this.hoverRectPointIndex = -1;
+    this.markerIndex = 0;
+    this.setStyle(props.style);
+    this.createNewDrawingRect = this.createNewDrawingRect.bind(this);
+    this.getDrawingRectWithRectList = this.getDrawingRectWithRectList.bind(this);
+    this.setSelectedIdAfterAddingDrawingRect = this.setSelectedIdAfterAddingDrawingRect.bind(this);
+    this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
+    this.updateSelectedRectTextAttribute = this.updateSelectedRectTextAttribute.bind(this);
+    this.setSelectedID = this.setSelectedID.bind(this);
+  }
+  setResult(rectList) {
+    this.clearActiveStatus();
+    this.setRectList(rectList);
+    if (this.hasMarkerConfig) {
+      const nextMarkerInfo = CommonToolUtils.getNextMarker(this.getCurrentPageResult(rectList), this.config.markerList);
+      if (nextMarkerInfo) {
+        this.setMarkerIndex(nextMarkerInfo.index);
+      }
+    }
+    this.render();
+  }
+  destroy() {
+    super.destroy();
+    if (this._textAttributInstance) {
+      this._textAttributInstance.clearTextAttribute();
+    }
+  }
+  setConfig(config, isClear = false) {
+    this.config = CommonToolUtils.jsonParser(config);
+    if (isClear === true) {
+      this.clearResult(false);
+    }
+  }
+  setRectList(rectList, isUpload = false) {
+    const oldLen = this.rectList.length;
+    this.rectList = rectList;
+    if (oldLen !== rectList.length) {
+      this.emit("updatePageNumber");
+    }
+    if (isUpload) {
+      this.emit("updateResult");
+    }
+  }
+  get selectedRect() {
+    return this.rectList.find((v) => v.id === this.selectedRectID);
+  }
+  get selectedID() {
+    return this.selectedRectID;
+  }
+  get selectedText() {
+    var _a;
+    return (_a = this.selectedRect) == null ? void 0 : _a.textAttribute;
+  }
+  get dataList() {
+    return this.rectList;
+  }
+  get currentShowList() {
+    let rect = [];
+    const [showingRect, selectedRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedID);
+    rect = showingRect;
+    if (this.isHidden) {
+      rect = [];
+    }
+    if (selectedRect) {
+      rect.push(selectedRect);
+    }
+    return rect;
+  }
+  get currentPageResult() {
+    const [showingRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), []);
+    return showingRect;
+  }
+  getCurrentPageResult(rectList) {
+    const [showingRect] = CommonToolUtils.getRenderResultList(rectList, CommonToolUtils.getSourceID(this.basicResult), []);
+    return showingRect;
+  }
+  setSelectedID(newID) {
+    this.setSelectedRectID(newID);
+  }
+  setSelectedRectID(newID) {
+    var _a, _b;
+    const oldID = this.selectedRectID;
+    if (newID !== oldID && oldID) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!newID) {
+      (_b = this._textAttributInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedRectID = newID;
+    this.render();
+    this.emit("selectedChange");
+  }
+  setStyle(toolStyle) {
+    var _a;
+    super.setStyle(toolStyle);
+    if (this._textAttributInstance && this.config.attributeConfigurable === false) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.updateIcon(this.getTextIconSvg());
+    }
+  }
+  updateSelectedRectTextAttribute(newTextAttribute) {
+    if (this._textAttributInstance && newTextAttribute) {
+      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.setRectList(this.rectList.map((v) => {
+        if (v.id === this.selectedRectID) {
+          return __spreadProps(__spreadValues({}, v), {
+            textAttribute
+          });
+        }
+        return v;
+      }), true);
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+  getHoverRectPointIndex(e) {
+    if (!this.selectedRect) {
+      return -1;
+    }
+    return AxisUtils["default"].returnClosePointIndex(this.getCoordinateUnderZoom(e), RectUtils.getRectPointList(this.selectedRect, this.zoom), scope + 2);
+  }
+  getHoverRectEdgeIndex(e) {
+    if (!this.selectedRect) {
+      return -1;
+    }
+    let edgeIndex = -1;
+    const {selectedRect} = this;
+    const edgeList = RectUtils.getRectEdgeList(selectedRect, this.zoom);
+    const coordinate = this.getCoordinateUnderZoom(e);
+    for (let i = 0; i < edgeList.length; i++) {
+      const edge = edgeList[i];
+      const {length} = MathUtils["default"].getFootOfPerpendicular(coordinate, edge.begin, edge.end);
+      if (length < scope + 10) {
+        edgeIndex = i;
+      }
+    }
+    return edgeIndex;
+  }
+  getTextIconSvg(attribute = "") {
+    return AttributeUtils["default"].getTextIconSvg(attribute, this.config.attributeList, this.config.attributeConfigurable, this.baseIcon);
+  }
+  multiMoveMouseDown(e) {
+    const dragStartCoord = this.getCoordinateUnderZoom(e);
+    const hoverRectID = this.getHoverRectID(e);
+    if (this.isMultiMoveMode && hoverRectID && e.button === 0) {
+      this.dragInfo = {
+        dragStartCoord,
+        dragTarget: tool.EDragTarget.Plane,
+        startTime: +new Date(),
+        originRectList: this.rectList
+      };
+      this.dragStatus = annotation.EDragStatus.Start;
+      return true;
+    }
+    return false;
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || e.ctrlKey === true) {
+      return;
+    }
+    if (this.multiMoveMouseDown(e)) {
+      return;
+    }
+    const dragStartCoord = this.getCoordinateUnderZoom(e);
+    const hoverRectID = this.getHoverRectID(e);
+    const firstRect = this.currentShowList.find((v) => v.id === this.selectedRectID);
+    if (!firstRect || e.button === 2 || e.button === 0 && this.isSpaceKey === true) {
+      return;
+    }
+    if (this.selectedRectID) {
+      if (this.getHoverRectPointIndex(e) > -1) {
+        const dragTarget = tool.EDragTarget.Point;
+        this.dragInfo = {
+          dragStartCoord,
+          dragTarget,
+          startTime: +new Date(),
+          firstRect
+        };
+        this.dragStatus = annotation.EDragStatus.Start;
+        return;
+      }
+      if (this.getHoverRectEdgeIndex(e) > -1) {
+        const dragTarget = tool.EDragTarget.Line;
+        this.dragInfo = {
+          dragStartCoord,
+          dragTarget,
+          startTime: +new Date(),
+          firstRect
+        };
+        this.dragStatus = annotation.EDragStatus.Start;
+        return;
+      }
+    }
+    if (hoverRectID === this.selectedRectID && !this.drawingRect) {
+      const dragTarget = tool.EDragTarget.Plane;
+      this.dragInfo = {
+        dragStartCoord,
+        dragTarget,
+        firstRect,
+        startTime: +new Date()
+      };
+      this.dragStatus = annotation.EDragStatus.Start;
+    }
+    return void 0;
+  }
+  onDragMoveAll(offset) {
+    var _a, _b;
+    if (!((_b = (_a = this.dragInfo) == null ? void 0 : _a.originRectList) == null ? void 0 : _b.length)) {
+      return;
+    }
+    this.setRectList(this.dragInfo.originRectList.map((rect) => {
+      const newRect = __spreadProps(__spreadValues({}, rect), {
+        x: rect.x + offset.x / this.zoom,
+        y: rect.y + offset.y / this.zoom
+      });
+      return newRect;
+    }));
+    this.render();
+  }
+  onDragMove(coordinate) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!this.dragInfo) {
+      return;
+    }
+    const offset = {
+      x: coordinate.x - this.dragInfo.dragStartCoord.x,
+      y: coordinate.y - this.dragInfo.dragStartCoord.y
+    };
+    this.dragStatus = annotation.EDragStatus.Move;
+    if (this.isMultiMoveMode) {
+      this.onDragMoveAll(offset);
+      return;
+    }
+    if (!this.dragInfo.firstRect) {
+      return;
+    }
+    const dragRect = RectUtils.getRectUnderZoom(this.dragInfo.firstRect, this.zoom);
+    const {x, y, width, height} = dragRect;
+    let selectedRect = this.rectList.filter((v) => v.id === this.selectedRectID)[0];
+    switch (this.dragInfo.dragTarget) {
+      case tool.EDragTarget.Plane:
+        selectedRect = __spreadProps(__spreadValues({}, selectedRect), {
+          x: x + offset.x,
+          y: y + offset.y,
+          width,
+          height
+        });
+        break;
+      case tool.EDragTarget.Point:
+        {
+          let newX = x;
+          let newY = y;
+          let newWidth = width;
+          let newHeight = height;
+          switch (this.hoverRectPointIndex) {
+            case 0: {
+              newX = width - offset.x < 0 ? x + width : x + offset.x;
+              newY = height - offset.y < 0 ? y + height : y + offset.y;
+              newWidth = Math.abs(offset.x - width);
+              newHeight = Math.abs(offset.y - height);
+              break;
+            }
+            case 1: {
+              newX = width + offset.x > 0 ? x : x + width + offset.x;
+              newY = height - offset.y < 0 ? y + height : y + offset.y;
+              newWidth = Math.abs(width + offset.x);
+              newHeight = Math.abs(height - offset.y);
+              break;
+            }
+            case 2: {
+              newX = width + offset.x > 0 ? x : x + width + offset.x;
+              newY = height + offset.y > 0 ? y : y + height + offset.y;
+              newWidth = Math.abs(width + offset.x);
+              newHeight = height + offset.y > 0 ? height + offset.y : Math.abs(height + offset.y);
+              break;
+            }
+            case 3: {
+              newX = width - offset.x < 0 ? x + width : x + offset.x;
+              newY = height + offset.y > 0 ? y : y + height + offset.y;
+              newWidth = Math.abs(offset.x - width);
+              newHeight = height + offset.y > 0 ? height + offset.y : Math.abs(height + offset.y);
+              break;
+            }
+            default: {
+              return;
+            }
+          }
+          selectedRect = __spreadProps(__spreadValues({}, selectedRect), {
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+          });
+        }
+        break;
+      case tool.EDragTarget.Line: {
+        let newX = x;
+        let newY = y;
+        let newWidth = width;
+        let newHeight = height;
+        switch (this.hoverRectEdgeIndex) {
+          case 0: {
+            newY = height - offset.y < 0 ? y + height : y + offset.y;
+            newHeight = Math.abs(offset.y - height);
+            break;
+          }
+          case 1: {
+            newX = width + offset.x > 0 ? x : x + width + offset.x;
+            newWidth = Math.abs(width + offset.x);
+            break;
+          }
+          case 2: {
+            newY = height + offset.y > 0 ? y : y + height + offset.y;
+            newHeight = height + offset.y > 0 ? height + offset.y : Math.abs(height + offset.y);
+            break;
+          }
+          case 3: {
+            newX = width - offset.x < 0 ? x + width : x + offset.x;
+            newWidth = Math.abs(offset.x - width);
+            break;
+          }
+          default: {
+            return;
+          }
+        }
+        selectedRect = __spreadProps(__spreadValues({}, selectedRect), {
+          x: newX,
+          y: newY,
+          width: newWidth,
+          height: newHeight
+        });
+        break;
+      }
+      default: {
+        return;
+      }
+    }
+    if (this.config.drawOutsideTarget === false) {
+      if (this.basicResult) {
+        if (((_b = (_a = this.basicResult) == null ? void 0 : _a.pointList) == null ? void 0 : _b.length) > 0) {
+          if (RectUtils.isRectNotInPolygon(selectedRect, polygonTool.getPolygonPointUnderZoom(this.basicResult.pointList, this.zoom))) {
+            return;
+          }
+        }
+        const basicX = this.basicResult.x * this.zoom;
+        const basicY = this.basicResult.y * this.zoom;
+        const basicWidth = this.basicResult.width * this.zoom;
+        const basicHeight = this.basicResult.height * this.zoom;
+        if (this.dragInfo.dragTarget !== tool.EDragTarget.Plane && (selectedRect.x < basicX - 0.01 || selectedRect.y < basicY - 0.01 || selectedRect.width > basicX + basicWidth - selectedRect.x + 0.01 || selectedRect.height > basicY + basicHeight - selectedRect.y + 0.01)) {
+          return;
+        }
+        if (selectedRect.x < basicX) {
+          selectedRect.x = basicX;
+        }
+        if (selectedRect.y < basicY) {
+          selectedRect.y = basicY;
+        }
+        if (selectedRect.width > basicX + basicWidth - selectedRect.x) {
+          switch (this.dragInfo.dragTarget) {
+            case tool.EDragTarget.Plane:
+              selectedRect.x = basicX + basicWidth - width;
+              break;
+            case tool.EDragTarget.Point:
+            case tool.EDragTarget.Line:
+              if (offset.x > 0 && offset.y > 0) {
+                selectedRect.width = basicX + basicWidth - selectedRect.x;
+              }
+              break;
+            default: {
+              return;
+            }
+          }
+        }
+        if (selectedRect.height > basicY + basicHeight - selectedRect.y) {
+          switch (this.dragInfo.dragTarget) {
+            case tool.EDragTarget.Plane:
+              selectedRect.y = basicY + basicHeight - height;
+              break;
+          }
+        }
+      } else {
+        if (selectedRect.x < 0) {
+          selectedRect.x = 0;
+        }
+        if (selectedRect.y < 0) {
+          selectedRect.y = 0;
+        }
+        if (this.imgInfo) {
+          switch (this.dragInfo.dragTarget) {
+            case tool.EDragTarget.Plane:
+              if (selectedRect.x + selectedRect.width > ((_c = this.imgInfo) == null ? void 0 : _c.width)) {
+                selectedRect.x = this.imgInfo.width - width;
+              }
+              if (selectedRect.y + selectedRect.height > ((_d = this.imgInfo) == null ? void 0 : _d.height)) {
+                selectedRect.y = this.imgInfo.height - height;
+              }
+              break;
+            default: {
+              if (selectedRect.x + selectedRect.width > ((_e = this.imgInfo) == null ? void 0 : _e.width) + 0.01 || selectedRect.y + selectedRect.height > ((_f = this.imgInfo) == null ? void 0 : _f.height) + 0.01) {
+                return;
+              }
+            }
+          }
+        }
+      }
+    }
+    this.setRectList(this.rectList.map((v) => {
+      if (v.id === selectedRect.id) {
+        return RectUtils.getRectUnderZoom(selectedRect, 1 / this.zoom);
+      }
+      return v;
+    }));
+    this.render();
+  }
+  onMouseMove(e) {
+    var _a, _b;
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const coordinateZoom = this.getCoordinateUnderZoom(e);
+    const coordinate = AxisUtils["default"].changeDrawOutsideTarget(coordinateZoom, {x: 0, y: 0}, this.imgInfo, this.config.drawOutsideTarget, this.basicResult, this.zoom);
+    if ((this.selectedRectID || this.isMultiMoveMode) && this.dragInfo) {
+      this.onDragMove(coordinate);
+      return;
+    }
+    if (this.selectedRectID) {
+      const hoverRectPointIndex = this.getHoverRectPointIndex(e);
+      if (hoverRectPointIndex !== this.hoverRectPointIndex) {
+        this.hoverRectPointIndex = hoverRectPointIndex;
+        this.hoverRectEdgeIndex = -1;
+        this.render();
+        return;
+      }
+      if (this.hoverRectPointIndex === -1) {
+        const hoverRectEdgeIndex = this.getHoverRectEdgeIndex(e);
+        if (hoverRectEdgeIndex !== this.hoverRectEdgeIndex) {
+          this.hoverRectEdgeIndex = hoverRectEdgeIndex;
+          this.render();
+          return;
+        }
+      }
+    }
+    const hoverRectID = this.getHoverRectID(e);
+    const oldHoverRectID = this.hoverRectID;
+    this.hoverRectID = hoverRectID;
+    if (hoverRectID !== oldHoverRectID) {
+      this.render();
+    }
+    if (this.drawingRect && this.firstClickCoord) {
+      let {x, y} = this.firstClickCoord;
+      let {width, height} = this.drawingRect;
+      width = Math.abs(x - coordinate.x);
+      height = Math.abs(y - coordinate.y);
+      if (coordinate.x < x) {
+        x = coordinate.x;
+      }
+      if (coordinate.y < y) {
+        y = coordinate.y;
+      }
+      if (this.config.drawOutsideTarget === false) {
+        if (((_b = (_a = this.basicResult) == null ? void 0 : _a.pointList) == null ? void 0 : _b.length) > 0) {
+          if (RectUtils.isRectNotInPolygon(__spreadProps(__spreadValues({}, this.drawingRect), {
+            x,
+            y,
+            width,
+            height
+          }), polygonTool.getPolygonPointUnderZoom(this.basicResult.pointList, this.zoom))) {
+            return;
+          }
+        }
+        if (coordinate.x < 0) {
+          width = Math.abs(this.firstClickCoord.x);
+          x = 0;
+        }
+        if (coordinate.y < 0) {
+          height = Math.abs(this.firstClickCoord.y);
+          y = 0;
+        }
+        if (this.imgInfo) {
+          if (x + width > this.imgInfo.width) {
+            width = Math.abs(this.imgInfo.width - x);
+          }
+          if (y + height > this.imgInfo.height) {
+            height = Math.abs(this.imgInfo.height - y);
+          }
+        }
+      }
+      this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+        x,
+        y,
+        width,
+        height
+      });
+      this.render();
+    }
+    return void 0;
+  }
+  setAttributeLockList(attributeLockList) {
+    this.setSelectedRectID(void 0);
+    super.setAttributeLockList(attributeLockList);
+  }
+  setBasicResult(basicResult) {
+    super.setBasicResult(basicResult);
+    this.clearActiveStatus();
+  }
+  setRectValidAndRender(id) {
+    if (!id) {
+      return;
+    }
+    this.setRectList(this.rectList.map((rect) => {
+      if (rect.id === id) {
+        return __spreadProps(__spreadValues({}, rect), {
+          valid: !rect.valid
+        });
+      }
+      return rect;
+    }), true);
+    this.render();
+    this.emit("updateResult");
+  }
+  createNewDrawingRect(e, basicSourceID) {
+    if (!this.imgInfo) {
+      return;
+    }
+    const coordinateZoom = this.getCoordinateUnderZoom(e);
+    const coordinate = AxisUtils["default"].changeDrawOutsideTarget(coordinateZoom, {x: 0, y: 0}, this.imgInfo, this.config.drawOutsideTarget, this.basicResult, this.zoom);
+    this.setSelectedRectID("");
+    this.hoverRectID = "";
+    if (this.drawOutSideTarget) {
+      if (coordinate.x < 0) {
+        coordinate.x = 0;
+      }
+      if (coordinate.y < 0) {
+        coordinate.y = 0;
+      }
+    }
+    this.drawingRect = __spreadProps(__spreadValues({}, coordinate), {
+      width: 0,
+      height: 0,
+      attribute: this.defaultAttribute,
+      valid: !e.ctrlKey,
+      id: uuid(8, 62),
+      sourceID: basicSourceID,
+      textAttribute: ""
+    });
+    if (this.hasMarkerConfig) {
+      const nextMarkInfo = CommonToolUtils.getNextMarker(this.currentPageResult, this.config.markerList, this.markerIndex);
+      if (nextMarkInfo) {
+        if (this.drawingRect) {
+          this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+            label: nextMarkInfo.label
+          });
+        }
+        this.markerIndex = nextMarkInfo.index;
+        this.emit("markIndexChange");
+      } else {
+        this.emit("messageInfo", index.getMessagesByLocale(constants.EMessage.MarkerFinish, this.lang));
+        this.drawingRect = void 0;
+        return;
+      }
+    }
+    if (this.config.textConfigurable) {
+      let textAttribute = "";
+      textAttribute = AttributeUtils["default"].getTextAttribute(this.rectList.filter((rect) => CommonToolUtils.isSameSourceID(rect.sourceID, basicSourceID)), this.config.textCheckType);
+      if (this.drawingRect) {
+        this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+          textAttribute
+        });
+      }
+    }
+    Object.assign(this.drawingRect, {
+      order: CommonToolUtils.getMaxOrder(this.rectList.filter((v) => CommonToolUtils.isSameSourceID(v.sourceID, basicSourceID))) + 1
+    });
+    this.firstClickCoord = __spreadValues({}, coordinate);
+    this.firstCurrentPos = __spreadValues({}, this.currentPos);
+    if (this.dataInjectionAtCreation) {
+      const data = this.dataInjectionAtCreation(this.drawingRect);
+      if (data) {
+        Object.assign(this.drawingRect, data);
+      }
+    }
+  }
+  addDrawingRectToRectList() {
+    if (!this.drawingRect) {
+      return;
+    }
+    let {width, height} = this.drawingRect;
+    width /= this.zoom;
+    height /= this.zoom;
+    if (Math.round(width) < this.config.minWidth || Math.round(height) < this.config.minHeight) {
+      this.emit("messageInfo", index.getMessagesByLocale(constants.EMessage.RectErrorSizeNotice, this.lang));
+      this.drawingRect = void 0;
+      this.firstClickCoord = void 0;
+      this.dragInfo = void 0;
+      this.dragStatus = annotation.EDragStatus.Wait;
+      this.render();
+      return;
+    }
+    const newRectList = this.getDrawingRectWithRectList();
+    this.setRectList(newRectList, true);
+    this.history.pushHistory(this.rectList);
+    this.setSelectedIdAfterAddingDrawingRect();
+    this.firstClickCoord = void 0;
+    this.drawingRect = void 0;
+    this.dragInfo = void 0;
+    this.dragStatus = annotation.EDragStatus.Wait;
+  }
+  setSelectedIdAfterAddingDrawingRect() {
+    if (!this.drawingRect) {
+      return;
+    }
+    if (this.config.textConfigurable) {
+      this.setSelectedRectID(this.drawingRect.id);
+    } else {
+      this.setSelectedRectID();
+    }
+  }
+  getDrawingRectWithRectList() {
+    if (!this.drawingRect) {
+      return this.rectList;
+    }
+    let {x, y, width, height} = this.drawingRect;
+    x /= this.zoom;
+    y /= this.zoom;
+    width /= this.zoom;
+    height /= this.zoom;
+    return [
+      ...this.rectList,
+      __spreadProps(__spreadValues({}, this.drawingRect), {
+        x,
+        y,
+        width,
+        height
+      })
+    ];
+  }
+  rightMouseUp(e) {
+    const hoverRectID = this.getHoverRectID(e);
+    const hoverRect = this.rectList.find((v) => v.id === hoverRectID);
+    const {selectedRectID} = this;
+    this.setSelectedRectID(void 0);
+    if (hoverRect) {
+      this.setDefaultAttribute(hoverRect.attribute);
+    }
+    if (this.drawingRect) {
+      this.drawingRect = void 0;
+      this.firstClickCoord = void 0;
+    } else {
+      if (selectedRectID !== hoverRectID) {
+        this.dblClickListener.clearRightDblClick();
+      }
+      this.setSelectedRectID(hoverRectID);
+      this.hoverRectID = "";
+      if ((hoverRect == null ? void 0 : hoverRect.label) && this.hasMarkerConfig) {
+        const markerIndex = CommonToolUtils.getCurrentMarkerIndex(hoverRect.label, this.config.markerList);
+        if (markerIndex >= 0) {
+          this.setMarkerIndex(markerIndex);
+          this.emit("markIndexChange");
+        }
+      }
+    }
+    this.render();
+  }
+  shiftRightMouseUp(e) {
+    const hoverRectID = this.getHoverRectID(e);
+    this.emit("shiftRightMouseUp", hoverRectID);
+  }
+  onMouseUp(e) {
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return true;
+    }
+    if (this.dragInfo && this.dragStatus === annotation.EDragStatus.Move) {
+      this.dragInfo = void 0;
+      this.dragStatus = annotation.EDragStatus.Wait;
+      this.history.pushHistory(this.rectList);
+      this.emit("updateResult");
+      return;
+    }
+    if (this.isMultiMoveMode) {
+      this.setOperationMode(tool.EOperationMode.General);
+    }
+    if (e.button === 2 && e.shiftKey === true) {
+      this.shiftRightMouseUp(e);
+      return;
+    }
+    if (e.button === 2) {
+      this.rightMouseUp(e);
+      return;
+    }
+    const basicSourceID = CommonToolUtils.getSourceID(this.basicResult);
+    if (this.drawingRect) {
+      this.addDrawingRectToRectList();
+      return;
+    }
+    if (e.ctrlKey === true && e.button === 0 && this.hoverRectID) {
+      this.setRectValidAndRender(this.hoverRectID);
+      return;
+    }
+    this.createNewDrawingRect(e, basicSourceID);
+    this.render();
+    return void 0;
+  }
+  onRightDblClick(e) {
+    super.onRightDblClick(e);
+    const hoverRectID = this.getHoverRectID(e);
+    if (this.selectedRectID && this.selectedRectID === hoverRectID) {
+      this.deleteRect(hoverRectID);
+    }
+  }
+  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.drawingRect) {
+          this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+            valid: !e.ctrlKey
+          });
+          this.render();
+        }
+        break;
+      case keyCode.F:
+        if (this.selectedRectID) {
+          this.setRectValidAndRender(this.selectedRectID);
+        }
+        break;
+      case keyCode.Z:
+        this.setIsHidden(!this.isHidden);
+        this.render();
+        break;
+      case keyCode.Delete:
+        this.deleteRect(this.selectedRectID);
+        break;
+      case keyCode.Tab: {
+        e.preventDefault();
+        if (this.drawingRect) {
+          return;
+        }
+        let sort = annotation.ESortDirection.ascend;
+        if (e.shiftKey) {
+          sort = annotation.ESortDirection.descend;
+        }
+        const [showingRect, selectedRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedRectID);
+        let rectList = [...showingRect];
+        if (selectedRect) {
+          rectList = [...rectList, selectedRect];
+        }
+        const viewPort = CanvasUtils.getViewPort(this.canvas, this.currentPos, this.zoom);
+        rectList = rectList.filter((rect) => CanvasUtils.inViewPort({x: rect.x, y: rect.y}, viewPort));
+        const nextSelectedRect = CommonToolUtils.getNextSelectedRectID(rectList, sort, this.selectedRectID);
+        if (nextSelectedRect) {
+          this.setSelectedRectID(nextSelectedRect.id);
+          if (this.config.attributeConfigurable === true) {
+            this.setDefaultAttribute(nextSelectedRect.attribute);
+          }
+        }
+        break;
+      }
+      default: {
+        if (this.config.attributeConfigurable) {
+          const keyCode2Attribute = AttributeUtils["default"].getAttributeByKeycode(keyCode$1, this.config.attributeList);
+          if (keyCode2Attribute !== void 0) {
+            this.setDefaultAttribute(keyCode2Attribute);
+          }
+        }
+        break;
+      }
+    }
+    return true;
+  }
+  onKeyUp(e) {
+    super.onKeyUp(e);
+    switch (e.keyCode) {
+      case keyCode.Ctrl:
+        if (this.drawingRect) {
+          this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+            valid: true
+          });
+          this.render();
+        }
+        break;
+    }
+  }
+  onWheel(e) {
+    const oldZoom = this.zoom;
+    let newDrawingRect;
+    let newFirsClickCoord;
+    if (this.drawingRect && this.firstClickCoord) {
+      newDrawingRect = RectUtils.getRectUnderZoom(this.drawingRect, 1 / oldZoom);
+      newFirsClickCoord = AxisUtils["default"].changePointByZoom(this.firstClickCoord, 1 / oldZoom);
+    }
+    super.onWheel(e, false);
+    if (newDrawingRect && newFirsClickCoord) {
+      this.drawingRect = RectUtils.getRectUnderZoom(newDrawingRect, this.zoom);
+      this.firstClickCoord = AxisUtils["default"].changePointByZoom(newFirsClickCoord, this.zoom);
+    }
+    this.render();
+  }
+  getCurrentSelectedData() {
+    const {selectedRect} = this;
+    if (!selectedRect) {
+      return;
+    }
+    const toolColor = this.getColor(selectedRect.attribute);
+    const color = selectedRect.valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    return {
+      width: selectedRect.width * this.zoom * 0.6,
+      textAttribute: selectedRect.textAttribute,
+      color
+    };
+  }
+  getRenderStyle(rect) {
+    const customStyle = this.customRenderStyle && this.customRenderStyle(rect);
+    if (customStyle) {
+      return customStyle;
+    }
+    const toolColor = this.getColor(rect.attribute);
+    let strokeColor;
+    let fillColor;
+    if (rect.valid === false) {
+      strokeColor = toolColor == null ? void 0 : toolColor.invalid.stroke;
+      fillColor = toolColor == null ? void 0 : toolColor.invalid.fill;
+    } else {
+      strokeColor = toolColor == null ? void 0 : toolColor.valid.stroke;
+      fillColor = toolColor == null ? void 0 : toolColor.valid.fill;
+    }
+    return {
+      strokeColor,
+      fillColor,
+      textColor: strokeColor,
+      toolColor
+    };
+  }
+  renderTextAttribute() {
+    var _a;
+    const {selectedRect} = this;
+    if (!this.ctx || this.config.textConfigurable !== true || !selectedRect) {
+      return;
+    }
+    const {x, y, width, height, attribute, valid} = selectedRect;
+    const newWidth = width * this.zoom * 0.6;
+    const coordinate = AxisUtils["default"].getOffsetCoordinate({x, y: y + height}, this.currentPos, this.zoom);
+    const toolColor = this.getColor(attribute);
+    const color = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    const distance = 4;
+    if (!this._textAttributInstance) {
+      this._textAttributInstance = new textAttributeClass({
+        width: newWidth,
+        container: this.container,
+        icon: this.getTextIconSvg(attribute),
+        color,
+        getCurrentSelectedData: this.getCurrentSelectedData,
+        updateSelectedTextAttribute: this.updateSelectedRectTextAttribute
+      });
+    }
+    if (this._textAttributInstance && !((_a = this._textAttributInstance) == null ? void 0 : _a.isExit)) {
+      this._textAttributInstance.appendToContainer();
+    }
+    this._textAttributInstance.update(`${selectedRect.textAttribute}`, {
+      left: coordinate.x,
+      top: coordinate.y + distance,
+      color,
+      width: newWidth
+    });
+  }
+  renderSelectedRect(rect) {
+    if (!this.ctx || !rect) {
+      return;
+    }
+    const {ctx} = this;
+    let radius = 10;
+    const pointList = RectUtils.getRectPointList(rect);
+    const len = pointList.length;
+    const toolColor = this.getColor(rect.attribute);
+    pointList.forEach((v, i) => {
+      var _a, _b;
+      ctx.save();
+      ctx.moveTo(v.x, v.y);
+      ctx.beginPath();
+      if (this.hoverRectPointIndex === i) {
+        radius = scope + 6;
+      } else {
+        radius = scope;
+      }
+      if (rect.valid === false) {
+        ctx.strokeStyle = toolColor == null ? void 0 : toolColor.invalid.stroke;
+        ctx.fillStyle = toolColor == null ? void 0 : toolColor.invalid.stroke;
+      } else {
+        ctx.strokeStyle = toolColor == null ? void 0 : toolColor.valid.stroke;
+        ctx.fillStyle = toolColor == null ? void 0 : toolColor.valid.stroke;
+      }
+      ctx.arc(v.x * this.zoom + this.currentPos.x, v.y * this.zoom + this.currentPos.y, radius, 0, 2 * Math.PI);
+      ctx.fill();
+      if (this.hoverRectEdgeIndex === i) {
+        ctx.beginPath();
+        ctx.lineWidth = 10;
+        const lineColor = this.getColor(rect.attribute);
+        const strokeStyle = rect.valid === false ? (_a = lineColor == null ? void 0 : lineColor.invalid) == null ? void 0 : _a.stroke : (_b = lineColor == null ? void 0 : lineColor.valid) == null ? void 0 : _b.stroke;
+        ctx.strokeStyle = strokeStyle;
+        ctx.moveTo(pointList[i].x * this.zoom + this.currentPos.x, pointList[i].y * this.zoom + this.currentPos.y);
+        ctx.lineTo(pointList[(i + 1) % len].x * this.zoom + this.currentPos.x, pointList[(i + 1) % len].y * this.zoom + this.currentPos.y);
+        ctx.stroke();
+      }
+      ctx.restore();
+    });
+    this.renderTextAttribute();
+  }
+  renderDrawingRect(rect, zoom = this.zoom, isZoom = false) {
+    var _a, _b, _c, _d;
+    if (this.ctx && rect) {
+      const {ctx, style} = this;
+      const {hiddenText = false} = style;
+      ctx.save();
+      const {strokeColor, fillColor, textColor} = this.getRenderStyle(rect);
+      ctx.font = "lighter 14px Arial";
+      let showText = "";
+      if (((_a = this.config) == null ? void 0 : _a.isShowOrder) && rect.order && (rect == null ? void 0 : rect.order) > 0) {
+        showText = `${rect.order}`;
+      }
+      if (rect.label && this.hasMarkerConfig) {
+        const order = CommonToolUtils.getCurrentMarkerIndex(rect.label, this.config.markerList) + 1;
+        showText = `${order}_${MarkerUtils.getMarkerShowText(rect.label, this.config.markerList)}`;
+      }
+      if (rect.attribute) {
+        showText = `${showText}  ${AttributeUtils["default"].getAttributeShowText(rect.attribute, (_b = this.config) == null ? void 0 : _b.attributeList)}`;
+      }
+      const transformRect = AxisUtils["default"].changeRectByZoom(rect, isZoom ? zoom : this.zoom, this.currentPos);
+      if (!hiddenText) {
+        DrawUtils.drawText(this.canvas, {x: transformRect.x, y: transformRect.y - 6}, showText, __spreadProps(__spreadValues({
+          color: strokeColor,
+          font: "normal normal 900 14px SourceHanSansCN-Regular"
+        }, annotation.DEFAULT_TEXT_SHADOW), {
+          textMaxWidth: 300
+        }));
+      }
+      const lineWidth = (_d = (_c = this.style) == null ? void 0 : _c.width) != null ? _d : 2;
+      if (rect.id === this.hoverRectID || rect.id === this.selectedRectID || this.isMultiMoveMode) {
+        DrawUtils.drawRectWithFill(this.canvas, transformRect, {color: fillColor});
+      }
+      DrawUtils.drawRect(this.canvas, transformRect, {color: strokeColor, thickness: lineWidth, hiddenText: true});
+      ctx.restore();
+      let rectSize = `${Math.round(rect.width)} * ${Math.round(rect.height)}`;
+      if (isZoom === true) {
+        rectSize = `${Math.round(rect.width / this.zoom)} * ${Math.round(transformRect.height / this.zoom)}`;
+      }
+      const textSizeWidth = rectSize.length * 7;
+      if (!hiddenText) {
+        DrawUtils.drawText(this.canvas, {x: transformRect.x + transformRect.width - textSizeWidth, y: transformRect.y + transformRect.height + 15}, rectSize, __spreadValues({
+          color: textColor,
+          font: "normal normal 600 14px Arial"
+        }, annotation.DEFAULT_TEXT_SHADOW));
+      }
+      if (!hiddenText && rect.textAttribute && rect.id !== this.selectedRectID) {
+        const marginTop = 0;
+        const textWidth = Math.max(20, transformRect.width - textSizeWidth);
+        DrawUtils.drawText(this.canvas, {x: transformRect.x, y: transformRect.y + transformRect.height + 20 + marginTop}, rect.textAttribute, __spreadValues({
+          color: textColor,
+          font: "italic normal 900 14px Arial",
+          textMaxWidth: textWidth
+        }, annotation.DEFAULT_TEXT_SHADOW));
+      }
+    }
+  }
+  renderMultiSelectedRect() {
+    if (!this.isMultiMoveMode) {
+      return;
+    }
+    this.rectList.forEach((rect) => {
+      this.renderDrawingRect(rect);
+      this.renderSelectedRect(rect);
+    });
+  }
+  renderStaticRect() {
+    var _a;
+    if (!(((_a = this.rectList) == null ? void 0 : _a.length) > 0 && JSON.stringify(this.rectList))) {
+      return;
+    }
+    const {renderEnhance = {}} = this;
+    const [showingRect, selectedRect] = CommonToolUtils.getRenderResultList(this.rectList, CommonToolUtils.getSourceID(this.basicResult), this.attributeLockList, this.selectedRectID);
+    if (!this.isHidden) {
+      showingRect == null ? void 0 : showingRect.forEach((rect) => {
+        this.renderDrawingRect(rect);
+        if (renderEnhance.staticRender) {
+          renderEnhance.staticRender(this.canvas, AxisUtils["default"].changeRectByZoom(rect, this.zoom, this.currentPos), this.getRenderStyle(rect));
+        }
+      });
+    }
+    if (selectedRect) {
+      this.renderDrawingRect(selectedRect);
+      this.renderSelectedRect(selectedRect);
+      if (renderEnhance.selectedRender) {
+        renderEnhance.selectedRender(this.canvas, AxisUtils["default"].changeRectByZoom(selectedRect, this.zoom, this.currentPos), this.getRenderStyle(selectedRect));
+      }
+    }
+  }
+  renderCreatingRect() {
+    if (!this.drawingRect) {
+      return;
+    }
+    const {renderEnhance = {}} = this;
+    this.renderDrawingRect(this.drawingRect, 1, true);
+    if (renderEnhance.creatingRender) {
+      renderEnhance.creatingRender(this.canvas, AxisUtils["default"].changeRectByZoom(this.drawingRect, 1, this.currentPos), this.getRenderStyle(this.drawingRect));
+    }
+  }
+  renderRect() {
+    switch (this.operationMode) {
+      case tool.EOperationMode.MultiMove:
+        this.renderMultiSelectedRect();
+        break;
+      default: {
+        this.renderStaticRect();
+        this.renderCreatingRect();
+      }
+    }
+  }
+  render() {
+    if (!this.ctx) {
+      return;
+    }
+    super.render();
+    this.renderRect();
+    this.renderCursorLine(this.getLineColor(this.defaultAttribute));
+  }
+  setDefaultAttribute(defaultAttribute) {
+    const oldDefault = this.defaultAttribute;
+    this.defaultAttribute = defaultAttribute != null ? defaultAttribute : "";
+    if (oldDefault !== defaultAttribute) {
+      this.changeStyle(defaultAttribute);
+      this.emit("changeAttributeSidebar");
+      const {selectedRect} = this;
+      if (selectedRect) {
+        this.setRectList(this.rectList.map((v) => {
+          if (v.id === this.selectedID) {
+            return __spreadProps(__spreadValues({}, v), {
+              attribute: this.defaultAttribute
+            });
+          }
+          return v;
+        }), true);
+        this.history.pushHistory(this.rectList);
+        this.render();
+      }
+      if (this.drawingRect) {
+        this.drawingRect = __spreadProps(__spreadValues({}, this.drawingRect), {
+          attribute: this.defaultAttribute
+        });
+        this.render();
+      }
+      if (this._textAttributInstance) {
+        if (this.attributeLockList.length > 0 && !this.attributeLockList.includes(this.defaultAttribute)) {
+          this._textAttributInstance.clearTextAttribute();
+          return;
+        }
+        this._textAttributInstance.updateIcon(this.getTextIconSvg(defaultAttribute));
+      }
+    }
+  }
+  setValid(valid) {
+    super.setValid(valid);
+    this.emit("updateResult");
+  }
+  clearActiveStatus() {
+    this.drawingRect = void 0;
+    this.firstClickCoord = void 0;
+    this.dragInfo = void 0;
+    this.dragStatus = annotation.EDragStatus.Wait;
+    this.setSelectedRectID(void 0);
+    this.setOperationMode(tool.EOperationMode.General);
+  }
+  clearResult(sendMessage = true) {
+    const newRectList = this.rectList.filter((rect) => rect.disableDelete === true);
+    if (newRectList.length > 0 && sendMessage) {
+      this.emit("messageInfo", index.getMessagesByLocale(constants.EMessage.ClearPartialData, this.lang));
+    }
+    this.setRectList(newRectList, true);
+    this.setSelectedRectID(void 0);
+  }
+  deleteRect(rectID) {
+    var _a;
+    if (!rectID) {
+      return;
+    }
+    const selectedRect = this.rectList.find((v) => v.id === rectID);
+    if ((selectedRect == null ? void 0 : selectedRect.disableDelete) === true) {
+      this.emit("messageInfo", index.getMessagesByLocale(constants.EMessage.DisableDelete, this.lang));
+      return;
+    }
+    this.setRectList(this.rectList.filter((v) => v.id !== rectID), true);
+    this.history.pushHistory(this.rectList);
+    this.setSelectedRectID(void 0);
+    (_a = this._textAttributInstance) == null ? void 0 : _a.clearTextAttribute();
+    this.render();
+  }
+  exportData() {
+    const {rectList} = this;
+    return [rectList, this.basicImgInfo];
+  }
+  undo() {
+    const rectList = this.history.undo();
+    if (rectList) {
+      if (rectList.length !== this.rectList.length) {
+        this.setSelectedRectID("");
+      }
+      this.setRectList(rectList, true);
+      this.render();
+    }
+  }
+  redo() {
+    const rectList = this.history.redo();
+    if (rectList) {
+      if (rectList.length !== this.rectList.length) {
+        this.setSelectedRectID("");
+      }
+      this.setRectList(rectList, true);
+      this.render();
+    }
+  }
+}
+
+exports.RectOperation = RectOperation;
+exports["default"] = RectOperation;