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

package/es/core/toolOperation/LineToolOperation.js

@@ -1 +1,1421 @@
-import g from"lodash";import{ELineTypes as P,ELineColor as U,EToolName as w,ETextType as B}from"../../constant/tool.js";import M from"../../utils/ActionsHistory.js";import S from"../../utils/uuid.js";import f from"../../constant/keyCode.js";import L from"../../utils/MathUtils.js";import{BasicToolOperation as V}from"./basicToolOperation.js";import v from"../../utils/tool/LineToolUtils.js";import{createSmoothCurvePointsFromPointList as R,isInPolygon as j,createSmoothCurvePoints as W}from"../../utils/tool/polygonTool.js";import z from"../../utils/tool/CommonToolUtils.js";import N from"../../utils/tool/CanvasUtils.js";import F from"../../utils/tool/DrawUtils.js";import K from"../../utils/tool/StyleUtils.js";import b from"../../utils/tool/AttributeUtils.js";import $ from"./textAttributeClass.js";var J=Object.defineProperty,q=Object.defineProperties,G=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,Y=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable,k=(d,t,i)=>t in d?J(d,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):d[t]=i,_=(d,t)=>{for(var i in t||(t={}))Y.call(t,i)&&k(d,i,t[i]);if(O)for(var i of O(t))Z.call(t,i)&&k(d,i,t[i]);return d},T=(d,t)=>q(d,G(t)),E;(function(d){d[d.Create=0]="Create",d[d.Active=1]="Active",d[d.None=2]="None"})(E||(E={}));const p=16,C={x:0,y:20},I=3,x=5,H=2;class Q extends V{constructor(t){super(t);this.drawActivatedLine=(i,e,s)=>{const n=g.cloneDeep(this.activeLine);if(!n||n.length===0)return;const r=this.isActiveLineValid();let o;const h=this.selectedID?this.lineList.find(l=>l.id===this.selectedID):void 0;h?o=h.order:o=this.nextOrder();const a=this.getLineColorByAttribute({attribute:this.defaultAttribute,valid:!!r});n.map(l=>Object.assign(l,{actual:{x:l.x,y:l.y}},this.coordUtils.getRenderCoord(l))),this.isActive&&this.drawLineLength(n,a),this.updateActiveArea(),this.drawLine(n,i,a,!0,!0),this.drawLineNumber(n[0],o,a,"",this.defaultAttribute,r),i&&this.isCreate&&this.arc(i,I,a),this.cursor&&!this.selectedPoint&&!s&&!this.isShift&&this.arc(this.cursor,x,a)},this.drawHoverPoint=i=>{if(!this.isMousedown&&i&&this.isLineSelected){const e=this.getPointList(this.activeLine),s=this.activeLine.find(r=>v.calcDistance(this.coordUtils.getRenderCoord(r),i)<=x);let n;!s&&this.activeLine&&(n=this.findNearestPoint(e,i)),this.hoverPointID=s?s.id:void 0,this.cursor=s||n==null?void 0:n.point}},this.updatedLine={id:"",valid:!1,order:0},this.toolName="lineTool",this.lineList=[],this.activeLine=[],this.coordsInsideActiveArea=!1,this.hoverLineSegmentIndex=-1,this.isShift=!1,this.isReference=!1,this.selectedIDs=[],this.drawCurveLine=(i,e,s,n=!0,r=!1,o)=>{const h=R(e,p);i.save(),i.lineCap="round",i.lineJoin="round",i.strokeStyle=s.color,n&&(i.lineWidth=s.lineWidth),r&&v.setReferenceCtx(i),e.forEach(({specialEdge:a},l)=>{const c=h.splice(0,p+1);i.save(),i.beginPath(),o===l&&(i.lineWidth=4),c.forEach(({x:u,y:A},m)=>{const D=m>0?"lineTo":"moveTo";a&&v.setSpecialEdgeStyle(i),i[D](u,A)}),i.stroke(),i.restore()}),i.restore()},this.drawLine=(i,e,s,n=!1,r=!1)=>{const o=e?i.concat(e):i,h={color:s,lineWidth:r?1:this.lineStyle.lineWidth};this.isCurve?v.drawCurveLine(this.ctx,o,h,!n,this.isReference,r?this.hoverLineSegmentIndex:-1):this.drawStraightLine(o,h,r),n&&i.forEach(a=>{var l,c;const u=a.id,A=u&&[this.hoverPointID,(l=this.selectedPoint)==null?void 0:l.id].includes(u)?x:I;this.arc(a,A,s),[this.hoverPointID,(c=this.selectedPoint)==null?void 0:c.id].includes(u)||this.arc(a,H,"white")})},this.drawStraightLine=(i,e,s=!1)=>{const{ctx:n}=this;n&&(n.save(),n.lineCap="round",n.lineJoin="round",n.strokeStyle=e.color,n.lineWidth=e.lineWidth,this.isReference&&v.setReferenceCtx(n),i.forEach((r,o)=>{if(n.beginPath(),o>0){const h=i[o-1];n.save(),(h==null?void 0:h.specialEdge)&&v.setSpecialEdgeStyle(n),s&&this.hoverLineSegmentIndex+1===o&&(n.lineWidth=4),n.moveTo(h.x,h.y),n.lineTo(r.x,r.y),n.stroke(),n.restore()}}),n.restore())},this.drawLines=()=>{try{const i=g.cloneDeep(this.attributeFilteredLines);if(this.isHidden)return;i.forEach(e=>{if(e.id!==this.selectedID&&e.pointList){e.pointList.map(h=>Object.assign(h,{actual:{x:h.x,y:h.y}},this.coordUtils.getRenderCoord(h)));const{order:s,label:n}=e,r=s,o=e&&this.getLineColorByAttribute(e);this.drawLine(e.pointList,void 0,o,!1),this.drawLineNumber(e.pointList[0],r,o,n,e.attribute,e.valid),e.id!==this.textEditingID&&(this.drawLineTextAttribute(e.pointList[1],o,e==null?void 0:e.textAttribute),this.drawLineLength(e.pointList,o))}})}catch(i){console.error(i,"\u7EBF\u6761\u5DE5\u5177\u6570\u636E\u89E3\u6790\u9519\u8BEF"),this.lineList=[],this.clearCanvas()}},this.render=i=>{super.render(),this.drawLines(),this.drawActivatedLine(i,void 0,!0),this.renderTextAttribute(),this.renderCursorLine(this.getLineColor(this.defaultAttribute))},this.moveLineInPolygon=(i,e)=>{var s;if(!Array.isArray(this.activeLine))return!1;((s=this.activeLine)==null?void 0:s.every(r=>this.isInBasicPolygon({x:r.x+i,y:r.y+e})))&&(this.lineDragging=!0,this.moveActiveArea(i,e))},this.moveLineInRectRange=(i,e,s,n)=>{if(this.activeArea===void 0)return;const{top:r,left:o,right:h,bottom:a}=this.activeArea,l=[o,h].map(y=>g.isNumber(y)?y+i:0),c=[r,a].map(y=>g.isNumber(y)?y+e:0),u=o>=0&&h&&L.isInRange(l,s),A=r>=0&&a&&L.isInRange(c,n),m=u?i:0,D=A?e:0;this.lineDragging=!0,this.moveActiveArea(m,D)},this.onRightClick=i=>{if(this.cursor=void 0,this.isCreate){if(this.isLinePointsNotEnough())return;this.stopLineCreating(!0);return}this.setActiveArea(this.getCoordinate(i),!0),this.emit("contextmenu")},this.updateSelectedAttributeAfterHistoryChanged=()=>{if(this.selectedID){const i=this.lineList.find(s=>s.id===this.selectedID),e=i==null?void 0:i.attribute;typeof e=="string"&&(this.defaultAttribute=e,this.updateAttribute(e),this.render())}},this.onLeftClick=i=>{const e=this.getCoordinate(i),{lineDragging:s}=this;if(this.lineDragging=!1,this.isSpaceKey)return;if(this.isNone&&i.ctrlKey){const r=this.findHoverLine(e);r&&this.setInvalidLine(r.id);return}if(this.isLinePointsExceed())return;const n=this.getNextPoint(i,e);if(this.isCreate||this.isNone){this.setCreatStatusAndAddPoint(n);return}if(this.isActive){if(s)return;if(this.isMouseCoordOutsideActiveArea()){this.setNoneStatus(!1),this.setCreatStatusAndAddPoint(n);return}if(i.shiftKey){this.updateLineSegmentSpecial(e);return}if(this.coordsInsideActiveArea&&i.ctrlKey){this.setInvalidLine(this.selectedID);return}this.addLinePointToActiveLine()}},this.onDblclick=()=>{},this.onKeyUp=i=>{if(super.onKeyUp(i),this.isShift=!1,this.hoverLineSegmentIndex=-1,i.keyCode===f.Esc){this.stopLineCreating(!1);return}if(this.isActive){if(i.keyCode===f.Delete){this.deleteLine();return}if(i.keyCode===f.F){this.setInvalidLine(this.selectedID);return}if(i.keyCode===f.Space){this.continueToEdit();return}}this.keyboardEventWhileLineCreating(i)},this.onRightDblClick=i=>{super.onRightDblClick(i);const e=this.getCoordinate(i);if(this.isActive){const s=this.findHoveredPoint(e);if(s){this.deleteSelectedLinePoint(s.id);return}this.deleteSelectedLine(e)}},this.setReference=i=>{this.isReference=i},this.pointsWithinRange=i=>!(this.lowerLimitPointNum&&i<this.lowerLimitPointNum||this.upperLimitPointNum&&i>this.upperLimitPointNum),this.setLineList=i=>{const e=i.length!==this.lineListLen;this.lineList=i,e&&this.emit("updatePageNumber")},this.textChange=i=>{this.config.textConfigurable===!1||!this.selectedID||(this.updateSelectedTextAttribute(i),this.emit("selectedChange"))},this.status=2,this.isMousedown=!1,this.lineDragging=!1,this.isLineValid=!0,this.setConfig(t.config),this.prevAxis={x:0,y:0},this.textEditingID="",this.updateSelectedTextAttribute=this.updateSelectedTextAttribute.bind(this),this.getCurrentSelectedData=this.getCurrentSelectedData.bind(this),this.actionsHistory=new M,this.dependToolConfig={lineType:P.Line}}get isLineSelected(){return this.selectedID&&this.activeLine}get selectedLinePoints(){return this.activeLine?this.getPointList(this.activeLine):[]}get isCreate(){return this.status===0}get isActive(){return this.status===1}get isNone(){return this.status===2}get isCurve(){return this.config.lineType===P.Curve}get isMultipleColor(){return this.config.lineColor===U.MultiColor}get imageSize(){return this.rotate%180==0?this.basicImgInfo:{width:this.basicImgInfo.height,height:this.basicImgInfo.width}}get lineListLen(){return this.lineList.length}get edgeAdsorptionEnabled(){return this.edgeAdsorption&&!this.isCurve&&this.lineListLen>0}get attributeConfigurable(){return this.config.attributeConfigurable}get isTextConfigurable(){return this.config.textConfigurable}get isDependPolygon(){return this.dependToolName===w.Polygon}get isDependRect(){return this.dependToolName===w.Rect}get isCurrentAttributeLocked(){return this.attributeLockList.includes(this.defaultAttribute)}get attributeFilteredLines(){return this.attributeLockList.length>0?this.lineList.filter(t=>this.attributeLockList.includes((t==null?void 0:t.attribute)||"")):this.lineList}get enableOutOfTarget(){return this.config.enableOutOfTarget||this.config.outOfTarget||this.config.drawOutsideTarget}get showOrder(){var t;return(t=this.config.showOrder)!=null?t:this.config.isShowOrder}get edgeAdsorption(){return this.config.edgeAdsorption}get attributeList(){return this.config.attributeList}get lowerLimitPointNum(){return this.config.lowerLimitPointNum}get upperLimitPointNum(){return this.config.upperLimitPointNum}get textCheckType(){return this.config.textCheckType}get customFormat(){return this.config.customFormat}get dataList(){return this.lineList}get hasActiveLine(){return this.activeLine&&this.activeLine.length>0}get viewPortLines(){const t=N.getViewPort(this.canvas,this.currentPos,this.zoom);return this.isHidden?[]:this.attributeFilteredLines.filter(i=>{var e;return(e=i==null?void 0:i.pointList)==null?void 0:e.some(s=>N.inViewPort(s,t))})}get lineStyle(){return{lineWidth:this.style.width,color:this.getLineColor(this.defaultAttribute),opacity:this.style.opacity}}get selectedText(){var t,i;return(i=(t=this.lineList.find(e=>e.id===this.selectedID))==null?void 0:t.textAttribute)!=null?i:""}get currentPageResult(){return this.lineList}updateStatus(t,i=!1){if(t!==this.status){if(i){let e="";this.textCheckType===B.Order&&this.isTextConfigurable&&(e=b.getTextAttribute(this.lineList,this.textCheckType)),this.emit("updateText",e)}this.status=t,this.lineStatusChanged()}}isInBasicPolygon(t){var i,e;return j(t,((i=this.basicResult)==null?void 0:i.pointList)||[],(e=this.dependToolConfig)==null?void 0:e.lineType)}getPolygonPointList(){if(!this.basicResult)return[];const{pointList:t}=this.basicResult,{lineType:i}=this.dependToolConfig;return i===P.Curve?W(t.reduce((e,s)=>[...e,s.x,s.y],[]),.5,!0,20):t}getNextCoordByRenderCoord(t){return this.getNextCoordByAbsCoord(this.coordUtils.getAbsCoord(t))}getNextCoordByAbsCoord(t){var i;const e=(i=this.activeLine)==null?void 0:i.slice(-1)[0];return e?this.coordUtils.getNextCoordByDependTool(t,e):t}pointInLine(t,i,e){return t.filter(s=>s).length<2?!1:t.some((s,n)=>{if(n===0)return!1;const r=this.coordUtils.getRenderCoord(t[n-1]),o=this.coordUtils.getRenderCoord(s);return v.isInLine(i,r,o,e)})}arc(t,i=I,e){var s,n,r,o,h,a;if(this.ctx){const{x:l,y:c}=t;(s=this.ctx)==null||s.save(),(n=this.ctx)==null||n.beginPath(),this.ctx.fillStyle=e||this.lineStyle.color,(r=this.ctx)==null||r.arc(l,c,i,0,360),(o=this.ctx)==null||o.closePath(),(h=this.ctx)==null||h.fill(),(a=this.ctx)==null||a.restore()}}renderActiveArea(){if(this.isActive&&this.activeArea&&this.ctx){const{top:t,left:i,right:e,bottom:s}=this.activeArea,{x:n,y:r}=this.coordUtils.getRenderCoord({x:i,y:t});this.ctx.save(),this.ctx.beginPath(),this.ctx.strokeStyle="#B3B8FF",this.ctx.rect(n,r,(e-i)*this.zoom,(s-t)*this.zoom),this.ctx.stroke(),this.ctx.restore()}}setSelectedIDs(t){this.selectedIDs=t,this.selectedIDs.length<2&&this.setSelectedID(this.selectedIDs.length===1?this.selectedIDs[0]:""),this.render()}setSelectedID(t){var i,e;const s=this.selectedID;t!==s&&s&&((i=this._textAttributInstance)==null||i.changeSelected()),t||(e=this._textAttributInstance)==null||e.clearTextAttribute(),this.selectedID=t,this.render(),this.emit("selectedChange")}addLinePoint(t){var i,e,s,n;this.arc(t),(i=this.activeLine)==null||i.push(T(_({},t),{id:S()})),((e=this.activeLine)==null?void 0:e.length)===1?(s=this.actionsHistory)==null||s.initRecord(this.activeLine):(n=this.actionsHistory)==null||n.pushHistory(this.activeLine),this.render()}setCreatStatusAndAddPoint(t,i=!1){this.updateStatus(0,i),this.addLinePoint(t)}isActiveLineValid(){var t;return this.selectedID?(t=this.lineList.find(i=>i.id===this.selectedID))==null?void 0:t.valid:this.isLineValid}nextOrder(){return this.lineListLen===0?1:this.lineList.slice(-1)[0].order+1}getLineColorByAttribute(t,i=!1){return K.getStrokeAndFill(this.getColor(t.attribute),t.valid,{isSelected:i}).stroke}updateActiveArea(){this.activeArea=this.getActiveArea(),this.renderActiveArea()}getActiveArea(){return this.hasActiveLine?L.calcViewportBoundaries(this.activeLine,this.isCurve,p,this.zoom):void 0}drawLineNumber(t,i=1,e,s="",n,r=!0){var o,h,a;if((this.showOrder||this.attributeConfigurable)&&this.ctx){let l=this.showOrder?i.toString():`${s}`;if(this.attributeConfigurable){const c=n?(a=(h=(o=this.attributeList)==null?void 0:o.find(u=>u.value===n))==null?void 0:h.key)!=null?a:n:"";l=[l,`${!r&&c?"\u65E0\u6548":""}${c}`].filter(u=>u).join("_")}this.drawText(t,l,e)}}drawLineTextAttribute(t,i,e){if(t&&e)return this.drawText(t,e,i,200)}drawLineLength(t,i){var e;if(((e=this.config)==null?void 0:e.showLineLength)&&t){const s=t.reduce((r,o,h)=>h<=0||!t[h-1].actual||!o.actual?r:r+v.calcDistance(t[h-1].actual,o.actual),0),n=t[t.length-1];this.drawText(n,`l = ${s.toFixed(2)}`,i)}}drawText(t,i,e,s){var n,r;this.ctx&&((n=this.ctx)==null||n.save(),this.ctx.font="italic bold 14px SourceHanSansCN-Regular",this.ctx.fillStyle=e,this.ctx.strokeStyle=e,this.ctx.shadowColor="rgba(0, 0, 0, 0.6)",this.ctx.shadowOffsetY=2,this.ctx.shadowBlur=4,s?F.wrapText(this.canvas,i,t.x-C.x,t.y-C.y,s):this.ctx.fillText(i,t.x-C.x,t.y-C.y),(r=this.ctx)==null||r.restore())}moveActiveArea(t,i){this.activeArea&&(this.activeArea=Object.assign(this.activeArea,{top:this.activeArea.top+i,bottom:this.activeArea.bottom+i,right:this.activeArea.right+t,left:this.activeArea.left+t})),this.activeLine&&(this.activeLine.map(e=>Object.assign(e,{x:e.x+t,y:e.y+i})),this.updateLines()),this.emit("updateLineByDrag",this.updatedLine)}findHoveredPoint(t){if(!!this.activeLine)return this.activeLine.find(i=>{const e=this.coordUtils.getRenderCoord(i);return v.calcDistance(e,t)<=x})}findHoverLine(t){return g.cloneDeep(this.lineList).reverse().find(({pointList:e})=>{const s=e?this.getPointList(e):[],n=this.getLineWidthScope();return s.some((r,o)=>{if(o===0)return!1;const h=this.coordUtils.getRenderCoord(r),a=this.coordUtils.getRenderCoord(s[o-1]);return v.isInLine(t,h,a,n)})})}getAdsorptionPoint(t){let i,e,s;return g.cloneDeep(this.lineList).reverse().forEach(({pointList:n,id:r})=>{if(r===this.selectedID||!n||(n==null?void 0:n.length)<2)return;const o=this.findNearestPoint(n,t);if(o){if(o.minDistance===0){i=o.point;return}(e===void 0||o.minDistance<e)&&(i=o.point,e=o.minDistance)}}),s||i}findNearestPoint(t,i,e=7){let s;const n=e;for(let r=1;r<=t.length-1;r++){const o=this.coordUtils.getRenderCoord(t[r]),h=this.coordUtils.getRenderCoord(t[r-1]),{length:a,footPoint:l}=L.getFootOfPerpendicular(i,o,h),c=v.calcTwoPointDistance(o,i),u=v.calcTwoPointDistance(h,i);if(c<=e*2){s=o,e=0;break}if(u<=e*2){s=h,e=0;break}a<e&&(s=l,e=a)}return s?{point:s,minDistance:n}:void 0}getPointList(t){return this.isCurve?R(t,p):t}moveSelectedLine(t){const i=(t.x-this.prevAxis.x)/this.zoom,e=(t.y-this.prevAxis.y)/this.zoom;if(this.enableOutOfTarget){this.lineDragging=!0,this.moveActiveArea(i,e);return}if(this.isDependPolygon){this.moveLineInPolygon(i,e);return}let s=[0,this.imageSize.width],n=[0,this.imageSize.height];if(this.isDependRect){const{x:r,y:o,width:h,height:a}=this.basicResult;s=[r,r+h],n=[o,o+a]}this.moveLineInRectRange(i,e,s,n)}moveSelectPoint(t){if(!this.selectedPoint)return;const i=t.x-this.prevAxis.x,e=t.y-this.prevAxis.y,s=(this.selectedPoint?this.selectedPoint.x:0)+i/this.zoom,n=(this.selectedPoint?this.selectedPoint.y:0)+e/this.zoom,r={x:s,y:n};Object.assign(this.selectedPoint,this.getNextCoordByAbsCoord(r)),this.updateLines(),this.render()}getCoordByConfig(t,i){var e;const s=!!t.shiftKey,n=t.altKey;if(((e=this.activeLine)==null?void 0:e.length)>0&&s){const r=this.activeLine.slice(-1)[0];return v.getVHPoint(r,i,this.coordUtils.getAbsCoord(i),this.coordUtils.getRenderCoord(r))}return this.edgeAdsorptionEnabled&&!n?this.getAdsorptionPoint(i):i}getNextPoint(t,i){const e=this.getCoordByConfig(t,i)||i;return this.enableOutOfTarget?this.coordUtils.getAbsCoord(e):this.getNextCoordByRenderCoord(e)}lineHover(){this.render()}mouseMoveHandler(t){const i=this.getCoordinate(t),e=t.which===1;if(this.isCreate){this.hasActiveLine&&this.renderNextPoint(t,i);return}if(this.isNone&&(this.lineHover(),this.edgeAdsorptionEnabled&&!t.altKey)){const s=this.getAdsorptionPoint(i);s&&this.arc(s)}if(this.isActive){if(this.isMousedown&&e){if(this.selectedPoint){this.moveSelectPoint(i);return}if(this.coordsInsideActiveArea){this.moveSelectedLine(i),this.drawActivatedLine(void 0,void 0,!0);return}}this.drawHoverPoint(i),this.render()}}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const i=this.getCoordinate(t);this.mouseMoveHandler(t),this.prevAxis=i}setActiveArea(t,i=!1){const e=this.findHoverLine(t);if(e){const s=this.lineList.findIndex(o=>o.id===(e==null?void 0:e.id)),n=L.calcViewportBoundaries((e==null?void 0:e.pointList)||[],this.isCurve,p,this.zoom),r=this.lineList[s];this.updateStatus(1),this.setActiveLine(r.pointList),this.setSelectedLineID(r.id),this.activeArea=n,this.updateLineAttributes(r)}else i&&this.setNoneStatus();this.render()}setActiveLineByID(t){const i=this.lineList.find(e=>e.id===t);if(i){const e=L.calcViewportBoundaries((i==null?void 0:i.pointList)||[],this.isCurve,p,this.zoom);this.updateStatus(1),this.setActiveLine(i.pointList),this.setSelectedLineID(i.id),this.activeArea=e,this.updateLineAttributes(i)}this.render()}setActiveLine(t){this.activeLine=t?g.cloneDeep(t):void 0}historyChanged(t){const i=`${t}Enabled`;if(this.isCreate){if(this.actionsHistory&&this.actionsHistory[i]){const e=this.actionsHistory&&this.actionsHistory[t]();this.setActiveLine(e),this.render()}return}if(this.history&&this.history[i]){const e=this.history[t](),s=e==null?void 0:e.find(n=>n.id===this.selectedID);this.lineList=e,this.selectedID&&s?this.setActiveLine(s==null?void 0:s.pointList):this.setNoneStatus(),this.render()}this.emit("dataUpdated",this.lineList)}undo(){this.historyChanged("undo"),this.updateSelectedAttributeAfterHistoryChanged()}redo(){this.historyChanged("redo"),this.updateSelectedAttributeAfterHistoryChanged()}isCoordInsideTarget(t){if(this.isDependPolygon)return this.isInBasicPolygon(t);if(this.isDependRect){const{x:i,y:e,width:s,height:n}=this.basicResult,r=[i,i+s],o=[e,e+n];return L.isInRange(t.x,r)&&L.isInRange(t.y,o)}return L.isInRange(t.x,[0,this.imageSize.width])&&L.isInRange(t.y,[0,this.imageSize.height])}getPointInsertIndex(t,i){if(t&&this.activeLine){const e=this.getPointList(this.activeLine);return this.activeLine.length===2?1:this.activeLine.findIndex((s,n)=>{if(n>0){const r=this.activeLine?this.activeLine[n-1]:void 0,o=this.isCurve?e.slice((n-1)*(p+1),n*(p+1)):[r,s];return this.pointInLine(o,t,i||this.getLineWidthScope())}return!1})}return-1}getLineWidthScope(){return this.lineStyle.lineWidth}isMouseCoordOutsideActiveArea(){return!this.coordsInsideActiveArea&&!this.selectedPoint}isLinePointsExceed(){return this.isCreate&&this.activeLine&&this.upperLimitPointNum&&~~this.upperLimitPointNum<=this.activeLine.length}isLinePointsNotEnough(){var t;return this.activeLine&&((t=this.activeLine)==null?void 0:t.length)<this.lowerLimitPointNum}updateLineSegmentSpecial(t){const i=this.getPointInsertIndex(t,2)-1;if(i>-1){const e=this.activeLine[i];e.specialEdge=!e.specialEdge,this.hoverLineSegmentIndex=-1,this.render()}}addLinePointToActiveLine(){var t;const i=this.getPointInsertIndex(this.cursor),e=this.pointsWithinRange(this.activeLine.length+1);this.cursor&&i>-1&&e&&(this.activeLine.splice(i,0,T(_({},this.coordUtils.getAbsCoord(this.cursor)),{id:S()})),this.updateLines(),(t=this.history)==null||t.pushHistory(this.lineList),this.render(),this.cursor=void 0)}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||!this.imgInfo)return;const i=this.getCoordinate(t);if(this.isMousedown=!0,this.prevAxis=i,t.which===3){this.cursor=void 0;return}this.selectedPoint=this.findHoveredPoint(i),this.coordsInsideActiveArea=this.isActive&&this.activeArea?v.inArea(this.activeArea,this.coordUtils.getAbsCoord(i)):!1,this.lineDragging=!1}lineHasChanged(){const t=this.lineList.find(i=>i.id===this.selectedID);return t?JSON.stringify(t.pointList)!==JSON.stringify(this.activeLine):!1}updateLines(){const t=this.lineList.find(i=>i.id===this.selectedID);t&&(t.pointList=g.cloneDeep(this.activeLine),this.updatedLine=t,this.emit("dataUpdated",this.lineList))}onMouseUp(t){const i=()=>{this.isMousedown=!1,this.hoverPointID=void 0,this.cursor=void 0,this.selectedPoint=void 0};if(this.hoverPointID=void 0,super.onMouseUp(t)||this.forbidMouseOperation||!this.imgInfo){i();return}t.which===1&&this.onLeftClick(t),t.which===3&&this.onRightClick(t),i()}isTextValid(t){return b.textAttributeValidate(this.textCheckType,this.customFormat,t)}createLineData(){const t=S(),i={pointList:g.cloneDeep(this.activeLine),id:t,valid:this.isLineValid,order:this.nextOrder()};return i.attribute=this.defaultAttribute,i}stopLineCreating(t=!0){var i,e,s,n;const r=this.selectedID?!0:!!this.isTextConfigurable;let o;if(t){if(this.selectedID){const h=this.lineList.find(a=>a.id===this.selectedID);o=this.selectedID,h&&(h.pointList=g.cloneWith(this.activeLine),g.isEqual(h.pointList,(i=this.history)==null?void 0:i.pushHistory(this.lineList))||(e=this.history)==null||e.pushHistory(this.lineList))}else if(this.isCreate&&this.activeLine&&this.activeLine.length>1){const h=this.createLineData();o=h.id,this.setLineList([...this.lineList,h]),this.emit("lineCreated",h,this.zoom,this.currentPos),(s=this.history)==null||s.pushHistory(this.lineList)}}r?this.setActiveStatus(o):this.setNoneStatus(),(n=this.actionsHistory)==null||n.empty(),this.emit("dataUpdated",this.lineList),this.render()}setActiveStatus(t){const i=t?this.lineList.find(e=>e.id===t):void 0;if(i){const e=i==null?void 0:i.pointList;this.updateStatus(1),this.setActiveLine(e),this.setSelectedLineID(t)}else this.setNoneStatus()}setNoneStatus(t=!0){t&&this.updateStatus(2),this.activeLine=[],this.setSelectedLineID(void 0),this.activeArea=void 0,this.isLineValid=!0,this.cursor=void 0}setKeyDownStatus(t,i){this.isShift=i!=null?i:t.keyCode===f.Shift}continueToEdit(){var t;this.updateStatus(0),this.cursor=void 0,(t=this.actionsHistory)==null||t.pushHistory(this.activeLine),this.render()}setInvalidLineOnCreating(t){if(this.selectedID&&t.keyCode!==f.Ctrl||!this.isCreate)return;const i=!t.ctrlKey;this.selectedID?this.setInvalidLine(this.selectedID,i,!1):this.isLineValid=i}onKeyDown(t){if(super.onKeyDown(t),this.setKeyDownStatus(t),t.keyCode===f.Z&&!t.ctrlKey&&this.toggleIsHide(),t.keyCode===f.Shift&&this.render(),t.keyCode===f.Tab){t.preventDefault(),this.selectToNextLine(t);return}if(this.isCreate&&this.keyboardEventWhileLineCreating(t),this.config.attributeConfigurable){const i=b.getAttributeByKeycode(t.keyCode,this.config.attributeList);i!==void 0&&this.setDefaultAttribute(i)}}selectToNextLine(t){const i=z.getNextSelectedRectIDByEvent(this.viewPortLines.map(e=>{var s,n,r,o;return T(_({},e),{x:(n=(s=e.pointList[0])==null?void 0:s.x)!=null?n:0,y:(o=(r=e.pointList[0])==null?void 0:r.y)!=null?o:0})}),t,this.selectedID);i&&this.setActiveLineByID(i.id)}keyboardEventWhileLineCreating(t){!this.isCreate||(t.keyCode===f.Ctrl&&this.setInvalidLineOnCreating(t),[f.Shift,f.Alt].includes(t.keyCode)&&this.renderNextPoint(t,this.prevAxis))}renderNextPoint(t,i){const e=this.coordUtils.getRenderCoord(this.getNextPoint(t,i));this.render(e)}deleteSelectedLine(t){const i=L.calcViewportBoundaries(this.activeLine,this.isCurve,p,this.zoom);v.inArea(i,this.coordUtils.getAbsCoord(t))&&this.deleteLine()}deleteSelectedLinePoint(t){var i;this.pointsWithinRange(this.activeLine.length-1)&&t&&(this.setActiveLine(this.activeLine.filter(s=>s.id!==t)),this.updateLines(),(i=this.history)==null||i.pushHistory(this.lineList)),this.cursor=void 0,this.render()}deleteLine(){var t;this.lineList=this.lineList.filter(i=>i.id!==this.selectedID),(t=this.history)==null||t.pushHistory(this.lineList),this.setNoneStatus(),this.emit("dataUpdated",this.lineList),this.emit("lineDeleted",this.selectedID),this.render()}setInvalidLine(t,i,e=!0){var s;const n=this.lineList.find(r=>r.id===t);n&&(n.valid=i!==void 0?i:!n.valid,(s=this.history)==null||s.pushHistory(this.lineList),e&&this.render())}empty(){var t,i;this.lineList=[],this.setNoneStatus(),this.selectedPoint=void 0,(t=this.actionsHistory)==null||t.empty(),(i=this.history)==null||i.init(),this.emit("dataUpdated",this.lineList),this.render()}setAttribute(t){var i;this.attributeConfigurable&&(this.defaultAttribute=t,this.setLineAttribute("attribute",t),this.selectedID&&((i=this.history)==null||i.pushHistory(this.lineList)))}setTextAttribute(t){var i;this.isTextConfigurable&&(this.setLineAttribute("textAttribute",t),(i=this.history)==null||i.applyAttribute(this.selectedID,"textAttribute",t))}setLineAttribute(t,i,e){const s=e||this.selectedID;if(s){const n=this.lineList.find(r=>r.id===s);n&&(n[t]=i)}this.render()}updateAttribute(t){this.emit("updateAttribute",t)}updateLineAttributes(t){var i;if(this.attributeConfigurable&&t){const e=(t==null?void 0:t.attribute)||"";this.defaultAttribute=e,this.updateAttribute(e)}if(this.isTextConfigurable&&t){const e=(t==null?void 0:t.textAttribute)||"";this.updateTextAttribute(e)}(i=this.history)==null||i.updateHistory(this.lineList)}lineStatusChanged(){this.emit("lineStatusChanged",{status:this.status,selectedLineID:this.selectedID})}updateTextAttribute(t){if(this.selectedID){const i=this.lineList.find(e=>e.id===this.selectedID);i&&(i.textAttribute=t)}this.emit("updateText",t)}saveData(){this.stopLineCreating(),this.setNoneStatus(),this.render()}setTextEditingID(t){this.textEditingID=t,this.render()}setSelectedLineID(t){var i,e;if(this.selectedID===t)return;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")}attributeLockListChange(t){this.attributeLockList=t,this.render()}setResult(t){this.setNoneStatus(),this.setLineList(t),this.render()}setConfig(t){super.setConfig(t)}toggleIsHide(){this.setIsHidden(!this.isHidden),this.render()}clearCanvas(){super.clearCanvas()}clearResult(){this.setResult([]),this.setSelectedLineID(void 0),this.render()}exportData(){return[this.lineList,this.basicImgInfo]}setDefaultAttribute(t=""){var i;this.attributeConfigurable&&(this.defaultAttribute=t,this.changeStyle(this.defaultAttribute),this.setLineAttribute("attribute",t),this.selectedID&&((i=this.history)==null||i.pushHistory(this.lineList)),this.emit("changeAttributeSidebar"))}getCurrentSelectedData(){var t,i;const e=this.isActiveLineValid(),s=this.defaultAttribute,n=this.getColor(s),r=e?n==null?void 0:n.valid.stroke:n==null?void 0:n.invalid.stroke,o=(i=(t=this.lineList.find(h=>h.id===this.selectedID))==null?void 0:t.textAttribute)!=null?i:"";return{color:r,textAttribute:o}}renderTextAttribute(){var t,i,e,s;if(!this.ctx||!this.activeLine||((t=this.activeLine)==null?void 0:t.length)<2||this.isCreate)return;const n=this.isActiveLineValid(),r=this.defaultAttribute,{x:o,y:h}=this.activeLine[1],a=this.coordUtils.getRenderCoord({x:o,y:h}),l=this.getColor(r),c=n?l==null?void 0:l.valid.stroke:l==null?void 0:l.invalid.stroke,u=(e=(i=this.lineList.find(A=>A.id===this.selectedID))==null?void 0:i.textAttribute)!=null?e:"";this._textAttributeInstance||(this._textAttributeInstance=new $({container:this.container,icon:this.getTextIconSvg(r),color:c,getCurrentSelectedData:this.getCurrentSelectedData,updateSelectedTextAttribute:this.updateSelectedTextAttribute})),this._textAttributeInstance&&!((s=this._textAttributeInstance)==null?void 0:s.isExit)&&this._textAttributeInstance.appendToContainer(),this._textAttributeInstance.update(`${u}`,{left:a.x,top:a.y,color:c}),this._textAttributeInstance.updateIcon(this.getTextIconSvg(r))}getTextIconSvg(t=""){return b.getTextIconSvg(t,this.config.attributeList,this.config.attributeConfigurable,this.baseIcon)}updateSelectedTextAttribute(t){if(this._textAttributeInstance&&t&&this.selectedID){let i=t;!b.textAttributeValidate(this.config.textCheckType,"",i)&&(this.emit("messageError",b.getErrorNotice(this.config.textCheckType,this.lang)),i=""),this.setTextAttribute(i),this.emit("updateTextAttribute"),this.render()}}}export{H as INNER_POINT_RADIUS,C as LINE_ORDER_OFFSET,x as POINT_ACTIVE_RADIUS,I as POINT_RADIUS,p as SEGMENT_NUMBER,Q as default};
+import _ from 'lodash';
+import { ELineTypes, ELineColor, EToolName, ETextType } from '../../constant/tool.js';
+import ActionsHistory from '../../utils/ActionsHistory.js';
+import uuid from '../../utils/uuid.js';
+import EKeyCode from '../../constant/keyCode.js';
+import MathUtils from '../../utils/MathUtils.js';
+import { BasicToolOperation } from './basicToolOperation.js';
+import LineToolUtils from '../../utils/tool/LineToolUtils.js';
+import { createSmoothCurvePointsFromPointList, isInPolygon, createSmoothCurvePoints } from '../../utils/tool/polygonTool.js';
+import CommonToolUtils from '../../utils/tool/CommonToolUtils.js';
+import CanvasUtils from '../../utils/tool/CanvasUtils.js';
+import DrawUtils from '../../utils/tool/DrawUtils.js';
+import StyleUtils from '../../utils/tool/StyleUtils.js';
+import AttributeUtils from '../../utils/tool/AttributeUtils.js';
+import TextAttributeClass from './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));
+var EStatus;
+(function(EStatus2) {
+  EStatus2[EStatus2["Create"] = 0] = "Create";
+  EStatus2[EStatus2["Active"] = 1] = "Active";
+  EStatus2[EStatus2["None"] = 2] = "None";
+})(EStatus || (EStatus = {}));
+const SEGMENT_NUMBER = 16;
+const LINE_ORDER_OFFSET = {
+  x: 0,
+  y: 20
+};
+const POINT_RADIUS = 3;
+const POINT_ACTIVE_RADIUS = 5;
+const INNER_POINT_RADIUS = 2;
+class LineToolOperation extends BasicToolOperation {
+  constructor(props) {
+    super(props);
+    this.drawActivatedLine = (coord, e, hideTempAxis) => {
+      const activeLine = _.cloneDeep(this.activeLine);
+      if (!activeLine || activeLine.length === 0) {
+        return;
+      }
+      const isActiveLineValid = this.isActiveLineValid();
+      let order;
+      const existLine = this.selectedID ? this.lineList.find((i) => i.id === this.selectedID) : void 0;
+      if (existLine) {
+        order = existLine.order;
+      } else {
+        order = this.nextOrder();
+      }
+      const color = this.getLineColorByAttribute({attribute: this.defaultAttribute, valid: !!isActiveLineValid});
+      activeLine.map((point) => Object.assign(point, {
+        actual: {x: point.x, y: point.y}
+      }, this.coordUtils.getRenderCoord(point)));
+      if (this.isActive) {
+        this.drawLineLength(activeLine, color);
+      }
+      this.updateActiveArea();
+      this.drawLine(activeLine, coord, color, true, true);
+      this.drawLineNumber(activeLine[0], order, color, "", this.defaultAttribute, isActiveLineValid);
+      if (coord && this.isCreate) {
+        this.arc(coord, POINT_RADIUS, color);
+      }
+      if (this.cursor && !this.selectedPoint && !hideTempAxis && !this.isShift) {
+        this.arc(this.cursor, POINT_ACTIVE_RADIUS, color);
+      }
+    };
+    this.drawHoverPoint = (coord) => {
+      if (this.isMousedown) {
+        return;
+      }
+      if (coord && this.isLineSelected) {
+        const pointList = this.getPointList(this.activeLine);
+        const hoverPoint = this.activeLine.find((i) => LineToolUtils.calcDistance(this.coordUtils.getRenderCoord(i), coord) <= POINT_ACTIVE_RADIUS);
+        let nearestPoint;
+        if (!hoverPoint && this.activeLine) {
+          nearestPoint = this.findNearestPoint(pointList, coord);
+        }
+        this.hoverPointID = hoverPoint ? hoverPoint.id : void 0;
+        this.cursor = hoverPoint ? void 0 : nearestPoint == null ? void 0 : nearestPoint.point;
+      }
+    };
+    this.updatedLine = {
+      id: "",
+      valid: false,
+      order: 0
+    };
+    this.toolName = "lineTool";
+    this.lineList = [];
+    this.activeLine = [];
+    this.coordsInsideActiveArea = false;
+    this.hoverLineSegmentIndex = -1;
+    this.isShift = false;
+    this.isReference = false;
+    this.selectedIDs = [];
+    this.drawCurveLine = (ctx, points, config, applyLineWidth = true, isReference = false, hoverLineSegmentIndex) => {
+      const pointList = createSmoothCurvePointsFromPointList(points, SEGMENT_NUMBER);
+      ctx.save();
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.strokeStyle = config.color;
+      if (applyLineWidth) {
+        ctx.lineWidth = config.lineWidth;
+      }
+      if (isReference) {
+        LineToolUtils.setReferenceCtx(ctx);
+      }
+      points.forEach(({specialEdge}, index) => {
+        const curveLinePoints = pointList.splice(0, SEGMENT_NUMBER + 1);
+        ctx.save();
+        ctx.beginPath();
+        if (hoverLineSegmentIndex === index) {
+          ctx.lineWidth = 4;
+        }
+        curveLinePoints.forEach(({x, y}, pointIndex) => {
+          const fn = pointIndex > 0 ? "lineTo" : "moveTo";
+          if (specialEdge) {
+            LineToolUtils.setSpecialEdgeStyle(ctx);
+          }
+          ctx[fn](x, y);
+        });
+        ctx.stroke();
+        ctx.restore();
+      });
+      ctx.restore();
+    };
+    this.drawLine = (points, cursor, color, showPoint = false, isActive = false) => {
+      const pointsToDraw = cursor ? points.concat(cursor) : points;
+      const lineConfig = {color, lineWidth: isActive ? 1 : this.lineStyle.lineWidth};
+      if (this.isCurve) {
+        LineToolUtils.drawCurveLine(this.ctx, pointsToDraw, lineConfig, !showPoint, this.isReference, isActive ? this.hoverLineSegmentIndex : -1);
+      } else {
+        this.drawStraightLine(pointsToDraw, lineConfig, isActive);
+      }
+      if (showPoint) {
+        points.forEach((point) => {
+          var _a, _b;
+          const pointID = point.id;
+          const pointRadius = pointID && [this.hoverPointID, (_a = this.selectedPoint) == null ? void 0 : _a.id].includes(pointID) ? POINT_ACTIVE_RADIUS : POINT_RADIUS;
+          this.arc(point, pointRadius, color);
+          if (![this.hoverPointID, (_b = this.selectedPoint) == null ? void 0 : _b.id].includes(pointID)) {
+            this.arc(point, INNER_POINT_RADIUS, "white");
+          }
+        });
+      }
+    };
+    this.drawStraightLine = (points, config, isActive = false) => {
+      const {ctx} = this;
+      if (ctx) {
+        ctx.save();
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.strokeStyle = config.color;
+        ctx.lineWidth = config.lineWidth;
+        if (this.isReference) {
+          LineToolUtils.setReferenceCtx(ctx);
+        }
+        points.forEach((point, index) => {
+          ctx.beginPath();
+          if (index > 0) {
+            const prePoint = points[index - 1];
+            ctx.save();
+            if (prePoint == null ? void 0 : prePoint.specialEdge) {
+              LineToolUtils.setSpecialEdgeStyle(ctx);
+            }
+            if (isActive && this.hoverLineSegmentIndex + 1 === index) {
+              ctx.lineWidth = 4;
+            }
+            ctx.moveTo(prePoint.x, prePoint.y);
+            ctx.lineTo(point.x, point.y);
+            ctx.stroke();
+            ctx.restore();
+          }
+        });
+        ctx.restore();
+      }
+    };
+    this.drawLines = () => {
+      try {
+        const lineList = _.cloneDeep(this.attributeFilteredLines);
+        if (this.isHidden) {
+          return;
+        }
+        lineList.forEach((line) => {
+          if (line.id === this.selectedID) {
+            return;
+          }
+          if (line.pointList) {
+            line.pointList.map((i) => Object.assign(i, {actual: {x: i.x, y: i.y}}, this.coordUtils.getRenderCoord(i)));
+            const {order, label} = line;
+            const displayOrder = order;
+            const color = line && this.getLineColorByAttribute(line);
+            this.drawLine(line.pointList, void 0, color, false);
+            this.drawLineNumber(line.pointList[0], displayOrder, color, label, line.attribute, line.valid);
+            if (line.id !== this.textEditingID) {
+              this.drawLineTextAttribute(line.pointList[1], color, line == null ? void 0 : line.textAttribute);
+              this.drawLineLength(line.pointList, color);
+            }
+          }
+        });
+      } catch (e) {
+        console.error(e, "\u7EBF\u6761\u5DE5\u5177\u6570\u636E\u89E3\u6790\u9519\u8BEF");
+        this.lineList = [];
+        this.clearCanvas();
+      }
+    };
+    this.render = (nextPoint) => {
+      super.render();
+      this.drawLines();
+      this.drawActivatedLine(nextPoint, void 0, true);
+      this.renderTextAttribute();
+      this.renderCursorLine(this.getLineColor(this.defaultAttribute));
+    };
+    this.moveLineInPolygon = (offsetX, offsetY) => {
+      var _a;
+      if (!Array.isArray(this.activeLine)) {
+        return false;
+      }
+      const allPointsInRange = (_a = this.activeLine) == null ? void 0 : _a.every((i) => {
+        return this.isInBasicPolygon({x: i.x + offsetX, y: i.y + offsetY});
+      });
+      if (allPointsInRange) {
+        this.lineDragging = true;
+        this.moveActiveArea(offsetX, offsetY);
+      }
+    };
+    this.moveLineInRectRange = (offsetX, offsetY, rectHorizontalRange, rectVerticalRange) => {
+      if (this.activeArea === void 0) {
+        return;
+      }
+      const {top, left, right, bottom} = this.activeArea;
+      const hBoundaries = [left, right].map((i) => _.isNumber(i) ? i + offsetX : 0);
+      const vBoundaries = [top, bottom].map((i) => _.isNumber(i) ? i + offsetY : 0);
+      const horizontalInRange = left >= 0 && right && MathUtils.isInRange(hBoundaries, rectHorizontalRange);
+      const verticalInRange = top >= 0 && bottom && MathUtils.isInRange(vBoundaries, rectVerticalRange);
+      const calcOffsetX = horizontalInRange ? offsetX : 0;
+      const calcOffsetY = verticalInRange ? offsetY : 0;
+      this.lineDragging = true;
+      this.moveActiveArea(calcOffsetX, calcOffsetY);
+    };
+    this.onRightClick = (e) => {
+      this.cursor = void 0;
+      if (this.isCreate) {
+        if (this.isLinePointsNotEnough()) {
+          return;
+        }
+        this.stopLineCreating(true);
+        return;
+      }
+      this.setActiveArea(this.getCoordinate(e), true);
+      this.emit("contextmenu");
+    };
+    this.updateSelectedAttributeAfterHistoryChanged = () => {
+      if (this.selectedID) {
+        const line = this.lineList.find((i) => i.id === this.selectedID);
+        const attribute = line == null ? void 0 : line.attribute;
+        if (typeof attribute === "string") {
+          this.defaultAttribute = attribute;
+          this.updateAttribute(attribute);
+          this.render();
+        }
+      }
+    };
+    this.onLeftClick = (e) => {
+      const coord = this.getCoordinate(e);
+      const {lineDragging} = this;
+      this.lineDragging = false;
+      if (this.isSpaceKey) {
+        return;
+      }
+      if (this.isNone && e.ctrlKey) {
+        const hoveredLine = this.findHoverLine(coord);
+        if (hoveredLine) {
+          this.setInvalidLine(hoveredLine.id);
+        }
+        return;
+      }
+      if (this.isLinePointsExceed()) {
+        return;
+      }
+      const nextAxis = this.getNextPoint(e, coord);
+      if (this.isCreate || this.isNone) {
+        this.setCreatStatusAndAddPoint(nextAxis);
+        return;
+      }
+      if (this.isActive) {
+        if (lineDragging) {
+          return;
+        }
+        const isMouseCoordOutsideActiveArea = this.isMouseCoordOutsideActiveArea();
+        if (isMouseCoordOutsideActiveArea) {
+          this.setNoneStatus(false);
+          this.setCreatStatusAndAddPoint(nextAxis);
+          return;
+        }
+        const isSetSpecialLine = e.shiftKey;
+        if (isSetSpecialLine) {
+          this.updateLineSegmentSpecial(coord);
+          return;
+        }
+        if (this.coordsInsideActiveArea && e.ctrlKey) {
+          this.setInvalidLine(this.selectedID);
+          return;
+        }
+        this.addLinePointToActiveLine();
+      }
+    };
+    this.onDblclick = () => {
+    };
+    this.onKeyUp = (e) => {
+      super.onKeyUp(e);
+      this.isShift = false;
+      this.hoverLineSegmentIndex = -1;
+      if (e.keyCode === EKeyCode.Esc) {
+        this.stopLineCreating(false);
+        return;
+      }
+      if (this.isActive) {
+        if (e.keyCode === EKeyCode.Delete) {
+          this.deleteLine();
+          return;
+        }
+        if (e.keyCode === EKeyCode.F) {
+          this.setInvalidLine(this.selectedID);
+          return;
+        }
+        if (e.keyCode === EKeyCode.Space) {
+          this.continueToEdit();
+          return;
+        }
+      }
+      this.keyboardEventWhileLineCreating(e);
+    };
+    this.onRightDblClick = (e) => {
+      super.onRightDblClick(e);
+      const coord = this.getCoordinate(e);
+      if (this.isActive) {
+        const hoverPoint = this.findHoveredPoint(coord);
+        if (hoverPoint) {
+          this.deleteSelectedLinePoint(hoverPoint.id);
+          return;
+        }
+        this.deleteSelectedLine(coord);
+      }
+    };
+    this.setReference = (isReference) => {
+      this.isReference = isReference;
+    };
+    this.pointsWithinRange = (count) => {
+      if (this.lowerLimitPointNum && count < this.lowerLimitPointNum) {
+        return false;
+      }
+      if (this.upperLimitPointNum && count > this.upperLimitPointNum) {
+        return false;
+      }
+      return true;
+    };
+    this.setLineList = (lineList) => {
+      const lengthChanged = lineList.length !== this.lineListLen;
+      this.lineList = lineList;
+      if (lengthChanged) {
+        this.emit("updatePageNumber");
+      }
+    };
+    this.textChange = (v) => {
+      if (this.config.textConfigurable === false || !this.selectedID) {
+        return;
+      }
+      this.updateSelectedTextAttribute(v);
+      this.emit("selectedChange");
+    };
+    this.status = 2;
+    this.isMousedown = false;
+    this.lineDragging = false;
+    this.isLineValid = true;
+    this.setConfig(props.config);
+    this.prevAxis = {
+      x: 0,
+      y: 0
+    };
+    this.textEditingID = "";
+    this.updateSelectedTextAttribute = this.updateSelectedTextAttribute.bind(this);
+    this.getCurrentSelectedData = this.getCurrentSelectedData.bind(this);
+    this.actionsHistory = new ActionsHistory();
+    this.dependToolConfig = {
+      lineType: ELineTypes.Line
+    };
+  }
+  get isLineSelected() {
+    return this.selectedID && this.activeLine;
+  }
+  get selectedLinePoints() {
+    return this.activeLine ? this.getPointList(this.activeLine) : [];
+  }
+  get isCreate() {
+    return this.status === 0;
+  }
+  get isActive() {
+    return this.status === 1;
+  }
+  get isNone() {
+    return this.status === 2;
+  }
+  get isCurve() {
+    return this.config.lineType === ELineTypes.Curve;
+  }
+  get isMultipleColor() {
+    return this.config.lineColor === ELineColor.MultiColor;
+  }
+  get imageSize() {
+    if (this.rotate % 180 === 0) {
+      return this.basicImgInfo;
+    }
+    return {
+      width: this.basicImgInfo.height,
+      height: this.basicImgInfo.width
+    };
+  }
+  get lineListLen() {
+    return this.lineList.length;
+  }
+  get edgeAdsorptionEnabled() {
+    return this.edgeAdsorption && !this.isCurve && this.lineListLen > 0;
+  }
+  get attributeConfigurable() {
+    return this.config.attributeConfigurable;
+  }
+  get isTextConfigurable() {
+    return this.config.textConfigurable;
+  }
+  get isDependPolygon() {
+    return this.dependToolName === EToolName.Polygon;
+  }
+  get isDependRect() {
+    return this.dependToolName === EToolName.Rect;
+  }
+  get isCurrentAttributeLocked() {
+    return this.attributeLockList.includes(this.defaultAttribute);
+  }
+  get attributeFilteredLines() {
+    if (this.attributeLockList.length > 0) {
+      return this.lineList.filter((v) => this.attributeLockList.includes((v == null ? void 0 : v.attribute) || ""));
+    }
+    return this.lineList;
+  }
+  get enableOutOfTarget() {
+    return this.config.enableOutOfTarget || this.config.outOfTarget || this.config.drawOutsideTarget;
+  }
+  get showOrder() {
+    var _a;
+    return (_a = this.config.showOrder) != null ? _a : this.config.isShowOrder;
+  }
+  get edgeAdsorption() {
+    return this.config.edgeAdsorption;
+  }
+  get attributeList() {
+    return this.config.attributeList;
+  }
+  get lowerLimitPointNum() {
+    return this.config.lowerLimitPointNum;
+  }
+  get upperLimitPointNum() {
+    return this.config.upperLimitPointNum;
+  }
+  get textCheckType() {
+    return this.config.textCheckType;
+  }
+  get customFormat() {
+    return this.config.customFormat;
+  }
+  get dataList() {
+    return this.lineList;
+  }
+  get hasActiveLine() {
+    return this.activeLine && this.activeLine.length > 0;
+  }
+  get viewPortLines() {
+    const viewPort = CanvasUtils.getViewPort(this.canvas, this.currentPos, this.zoom);
+    if (this.isHidden) {
+      return [];
+    }
+    return this.attributeFilteredLines.filter((i) => {
+      var _a;
+      return (_a = i == null ? void 0 : i.pointList) == null ? void 0 : _a.some((p) => CanvasUtils.inViewPort(p, viewPort));
+    });
+  }
+  get lineStyle() {
+    return {
+      lineWidth: this.style.width,
+      color: this.getLineColor(this.defaultAttribute),
+      opacity: this.style.opacity
+    };
+  }
+  get selectedText() {
+    var _a, _b;
+    return (_b = (_a = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _a.textAttribute) != null ? _b : "";
+  }
+  get currentPageResult() {
+    return this.lineList;
+  }
+  updateStatus(status, resetText = false) {
+    if (status === this.status) {
+      return;
+    }
+    if (resetText) {
+      let defaultText = "";
+      if (this.textCheckType === ETextType.Order && this.isTextConfigurable) {
+        defaultText = AttributeUtils.getTextAttribute(this.lineList, this.textCheckType);
+      }
+      this.emit("updateText", defaultText);
+    }
+    this.status = status;
+    this.lineStatusChanged();
+  }
+  isInBasicPolygon(coord) {
+    var _a, _b;
+    return isInPolygon(coord, ((_a = this.basicResult) == null ? void 0 : _a.pointList) || [], (_b = this.dependToolConfig) == null ? void 0 : _b.lineType);
+  }
+  getPolygonPointList() {
+    if (!this.basicResult) {
+      return [];
+    }
+    const {pointList} = this.basicResult;
+    const {lineType} = this.dependToolConfig;
+    return lineType === ELineTypes.Curve ? createSmoothCurvePoints(pointList.reduce((acc, cur) => {
+      return [...acc, cur.x, cur.y];
+    }, []), 0.5, true, 20) : pointList;
+  }
+  getNextCoordByRenderCoord(renderCoord) {
+    return this.getNextCoordByAbsCoord(this.coordUtils.getAbsCoord(renderCoord));
+  }
+  getNextCoordByAbsCoord(absCoord) {
+    var _a;
+    const preAxis = (_a = this.activeLine) == null ? void 0 : _a.slice(-1)[0];
+    if (preAxis) {
+      return this.coordUtils.getNextCoordByDependTool(absCoord, preAxis);
+    }
+    return absCoord;
+  }
+  pointInLine(pointList, checkPoint, scope) {
+    if (pointList.filter((i) => i).length < 2) {
+      return false;
+    }
+    return pointList.some((point, index) => {
+      if (index === 0) {
+        return false;
+      }
+      const point1 = this.coordUtils.getRenderCoord(pointList[index - 1]);
+      const point2 = this.coordUtils.getRenderCoord(point);
+      return LineToolUtils.isInLine(checkPoint, point1, point2, scope);
+    });
+  }
+  arc(coord, size = POINT_RADIUS, color) {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.ctx) {
+      const {x, y} = coord;
+      (_a = this.ctx) == null ? void 0 : _a.save();
+      (_b = this.ctx) == null ? void 0 : _b.beginPath();
+      this.ctx.fillStyle = color || this.lineStyle.color;
+      (_c = this.ctx) == null ? void 0 : _c.arc(x, y, size, 0, 360);
+      (_d = this.ctx) == null ? void 0 : _d.closePath();
+      (_e = this.ctx) == null ? void 0 : _e.fill();
+      (_f = this.ctx) == null ? void 0 : _f.restore();
+    }
+  }
+  renderActiveArea() {
+    if (this.isActive && this.activeArea && this.ctx) {
+      const {top, left, right, bottom} = this.activeArea;
+      const {x, y} = this.coordUtils.getRenderCoord({x: left, y: top});
+      this.ctx.save();
+      this.ctx.beginPath();
+      this.ctx.strokeStyle = "#B3B8FF";
+      this.ctx.rect(x, y, (right - left) * this.zoom, (bottom - top) * this.zoom);
+      this.ctx.stroke();
+      this.ctx.restore();
+    }
+  }
+  setSelectedIDs(selectedIDs) {
+    this.selectedIDs = selectedIDs;
+    if (this.selectedIDs.length < 2) {
+      this.setSelectedID(this.selectedIDs.length === 1 ? this.selectedIDs[0] : "");
+    }
+    this.render();
+  }
+  setSelectedID(newID) {
+    var _a, _b;
+    const oldID = this.selectedID;
+    if (newID !== oldID && oldID) {
+      (_a = this._textAttributInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!newID) {
+      (_b = this._textAttributInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedID = newID;
+    this.render();
+    this.emit("selectedChange");
+  }
+  addLinePoint(coord) {
+    var _a, _b, _c, _d;
+    this.arc(coord);
+    (_a = this.activeLine) == null ? void 0 : _a.push(__spreadProps(__spreadValues({}, coord), {id: uuid()}));
+    if (((_b = this.activeLine) == null ? void 0 : _b.length) === 1) {
+      (_c = this.actionsHistory) == null ? void 0 : _c.initRecord(this.activeLine);
+    } else {
+      (_d = this.actionsHistory) == null ? void 0 : _d.pushHistory(this.activeLine);
+    }
+    this.render();
+  }
+  setCreatStatusAndAddPoint(coord, isRestText = false) {
+    this.updateStatus(0, isRestText);
+    this.addLinePoint(coord);
+  }
+  isActiveLineValid() {
+    var _a;
+    return this.selectedID ? (_a = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _a.valid : this.isLineValid;
+  }
+  nextOrder() {
+    return this.lineListLen === 0 ? 1 : this.lineList.slice(-1)[0].order + 1;
+  }
+  getLineColorByAttribute(line, isSelected = false) {
+    return StyleUtils.getStrokeAndFill(this.getColor(line.attribute), line.valid, {isSelected}).stroke;
+  }
+  updateActiveArea() {
+    this.activeArea = this.getActiveArea();
+    this.renderActiveArea();
+  }
+  getActiveArea() {
+    return this.hasActiveLine ? MathUtils.calcViewportBoundaries(this.activeLine, this.isCurve, SEGMENT_NUMBER, this.zoom) : void 0;
+  }
+  drawLineNumber(coord, order = 1, color, label = "", attribute, valid = true) {
+    var _a, _b, _c;
+    if ((this.showOrder || this.attributeConfigurable) && this.ctx) {
+      let text = this.showOrder ? order.toString() : `${label}`;
+      if (this.attributeConfigurable) {
+        const keyForAttribute = attribute ? (_c = (_b = (_a = this.attributeList) == null ? void 0 : _a.find((i) => i.value === attribute)) == null ? void 0 : _b.key) != null ? _c : attribute : "";
+        text = [text, `${!valid && keyForAttribute ? "\u65E0\u6548" : ""}${keyForAttribute}`].filter((i) => i).join("_");
+      }
+      this.drawText(coord, text, color);
+    }
+  }
+  drawLineTextAttribute(coord, color, text) {
+    if (coord && text) {
+      return this.drawText(coord, text, color, 200);
+    }
+  }
+  drawLineLength(pointList, color) {
+    var _a;
+    if (((_a = this.config) == null ? void 0 : _a.showLineLength) && pointList) {
+      const length = pointList.reduce((pre, next, index) => {
+        if (index <= 0 || !pointList[index - 1].actual || !next.actual) {
+          return pre;
+        }
+        return pre + LineToolUtils.calcDistance(pointList[index - 1].actual, next.actual);
+      }, 0);
+      const renderPos = pointList[pointList.length - 1];
+      this.drawText(renderPos, `l = ${length.toFixed(2)}`, color);
+    }
+  }
+  drawText(coord, text, color, lineWidth) {
+    var _a, _b;
+    if (this.ctx) {
+      (_a = this.ctx) == null ? void 0 : _a.save();
+      this.ctx.font = "italic bold 14px SourceHanSansCN-Regular";
+      this.ctx.fillStyle = color;
+      this.ctx.strokeStyle = color;
+      this.ctx.shadowColor = "rgba(0, 0, 0, 0.6)";
+      this.ctx.shadowOffsetY = 2;
+      this.ctx.shadowBlur = 4;
+      if (lineWidth) {
+        DrawUtils.wrapText(this.canvas, text, coord.x - LINE_ORDER_OFFSET.x, coord.y - LINE_ORDER_OFFSET.y, lineWidth);
+      } else {
+        this.ctx.fillText(text, coord.x - LINE_ORDER_OFFSET.x, coord.y - LINE_ORDER_OFFSET.y);
+      }
+      (_b = this.ctx) == null ? void 0 : _b.restore();
+    }
+  }
+  moveActiveArea(offsetX, offsetY) {
+    if (this.activeArea) {
+      this.activeArea = Object.assign(this.activeArea, {
+        top: this.activeArea.top + offsetY,
+        bottom: this.activeArea.bottom + offsetY,
+        right: this.activeArea.right + offsetX,
+        left: this.activeArea.left + offsetX
+      });
+    }
+    if (this.activeLine) {
+      this.activeLine.map((i) => Object.assign(i, {x: i.x + offsetX, y: i.y + offsetY}));
+      this.updateLines();
+    }
+    this.emit("updateLineByDrag", this.updatedLine);
+  }
+  findHoveredPoint(coord) {
+    if (!this.activeLine) {
+      return;
+    }
+    return this.activeLine.find((i) => {
+      const iAxis = this.coordUtils.getRenderCoord(i);
+      return LineToolUtils.calcDistance(iAxis, coord) <= POINT_ACTIVE_RADIUS;
+    });
+  }
+  findHoverLine(coord) {
+    const line = _.cloneDeep(this.lineList).reverse().find(({pointList}) => {
+      const list = pointList ? this.getPointList(pointList) : [];
+      const scope = this.getLineWidthScope();
+      return list.some((point, index) => {
+        if (index === 0) {
+          return false;
+        }
+        const point1 = this.coordUtils.getRenderCoord(point);
+        const point2 = this.coordUtils.getRenderCoord(list[index - 1]);
+        return LineToolUtils.isInLine(coord, point1, point2, scope);
+      });
+    });
+    return line;
+  }
+  getAdsorptionPoint(coord) {
+    let point;
+    let minDistance;
+    let snappedPoint;
+    _.cloneDeep(this.lineList).reverse().forEach(({pointList, id}) => {
+      if (id === this.selectedID || !pointList || (pointList == null ? void 0 : pointList.length) < 2) {
+        return;
+      }
+      const nearestPoint = this.findNearestPoint(pointList, coord);
+      if (nearestPoint) {
+        if (nearestPoint.minDistance === 0) {
+          point = nearestPoint.point;
+          return;
+        }
+        if (minDistance === void 0 || nearestPoint.minDistance < minDistance) {
+          point = nearestPoint.point;
+          minDistance = nearestPoint.minDistance;
+        }
+      }
+    });
+    return snappedPoint || point;
+  }
+  findNearestPoint(pointList, coord, minLength = 7) {
+    let point;
+    const minDistance = minLength;
+    for (let i = 1; i <= pointList.length - 1; i++) {
+      const point1 = this.coordUtils.getRenderCoord(pointList[i]);
+      const point2 = this.coordUtils.getRenderCoord(pointList[i - 1]);
+      const {length, footPoint} = MathUtils.getFootOfPerpendicular(coord, point1, point2);
+      const twoPointDistance1 = LineToolUtils.calcTwoPointDistance(point1, coord);
+      const twoPointDistance2 = LineToolUtils.calcTwoPointDistance(point2, coord);
+      if (twoPointDistance1 <= minLength * 2) {
+        point = point1;
+        minLength = 0;
+        break;
+      }
+      if (twoPointDistance2 <= minLength * 2) {
+        point = point2;
+        minLength = 0;
+        break;
+      }
+      if (length < minLength) {
+        point = footPoint;
+        minLength = length;
+      }
+    }
+    return point ? {point, minDistance} : void 0;
+  }
+  getPointList(pointList) {
+    return this.isCurve ? createSmoothCurvePointsFromPointList(pointList, SEGMENT_NUMBER) : pointList;
+  }
+  moveSelectedLine(coord) {
+    const offsetX = (coord.x - this.prevAxis.x) / this.zoom;
+    const offsetY = (coord.y - this.prevAxis.y) / this.zoom;
+    if (this.enableOutOfTarget) {
+      this.lineDragging = true;
+      this.moveActiveArea(offsetX, offsetY);
+      return;
+    }
+    if (this.isDependPolygon) {
+      this.moveLineInPolygon(offsetX, offsetY);
+      return;
+    }
+    let rectHorizontalRange = [0, this.imageSize.width];
+    let rectVerticalRange = [0, this.imageSize.height];
+    if (this.isDependRect) {
+      const {x, y, width, height} = this.basicResult;
+      rectHorizontalRange = [x, x + width];
+      rectVerticalRange = [y, y + height];
+    }
+    this.moveLineInRectRange(offsetX, offsetY, rectHorizontalRange, rectVerticalRange);
+  }
+  moveSelectPoint(coord) {
+    if (!this.selectedPoint) {
+      return;
+    }
+    const offsetX = coord.x - this.prevAxis.x;
+    const offsetY = coord.y - this.prevAxis.y;
+    const newX = (this.selectedPoint ? this.selectedPoint.x : 0) + offsetX / this.zoom;
+    const newY = (this.selectedPoint ? this.selectedPoint.y : 0) + offsetY / this.zoom;
+    const pointPosition = {
+      x: newX,
+      y: newY
+    };
+    Object.assign(this.selectedPoint, this.getNextCoordByAbsCoord(pointPosition));
+    this.updateLines();
+    this.render();
+  }
+  getCoordByConfig(e, coord) {
+    var _a;
+    const isVH = !!e.shiftKey;
+    const disabledAdsorb = e.altKey;
+    if (((_a = this.activeLine) == null ? void 0 : _a.length) > 0 && isVH) {
+      const lastPoint = this.activeLine.slice(-1)[0];
+      return LineToolUtils.getVHPoint(lastPoint, coord, this.coordUtils.getAbsCoord(coord), this.coordUtils.getRenderCoord(lastPoint));
+    }
+    if (this.edgeAdsorptionEnabled && !disabledAdsorb) {
+      return this.getAdsorptionPoint(coord);
+    }
+    return coord;
+  }
+  getNextPoint(e, nextPoint) {
+    const newPoint = this.getCoordByConfig(e, nextPoint) || nextPoint;
+    return this.enableOutOfTarget ? this.coordUtils.getAbsCoord(newPoint) : this.getNextCoordByRenderCoord(newPoint);
+  }
+  lineHover() {
+    this.render();
+  }
+  mouseMoveHandler(e) {
+    const coord = this.getCoordinate(e);
+    const isLeftClick = e.which === 1;
+    if (this.isCreate) {
+      if (this.hasActiveLine) {
+        this.renderNextPoint(e, coord);
+      }
+      return;
+    }
+    if (this.isNone) {
+      this.lineHover();
+      if (this.edgeAdsorptionEnabled && !e.altKey) {
+        const edgeAdsorptionPoint = this.getAdsorptionPoint(coord);
+        if (edgeAdsorptionPoint) {
+          this.arc(edgeAdsorptionPoint);
+        }
+      }
+    }
+    if (this.isActive) {
+      if (this.isMousedown && isLeftClick) {
+        if (this.selectedPoint) {
+          this.moveSelectPoint(coord);
+          return;
+        }
+        if (this.coordsInsideActiveArea) {
+          this.moveSelectedLine(coord);
+          this.drawActivatedLine(void 0, void 0, true);
+          return;
+        }
+      }
+      this.drawHoverPoint(coord);
+      this.render();
+    }
+  }
+  onMouseMove(e) {
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const coord = this.getCoordinate(e);
+    this.mouseMoveHandler(e);
+    this.prevAxis = coord;
+  }
+  setActiveArea(coord, outsideCancel = false) {
+    const activeLine = this.findHoverLine(coord);
+    if (activeLine) {
+      const index = this.lineList.findIndex((i) => i.id === (activeLine == null ? void 0 : activeLine.id));
+      const area = MathUtils.calcViewportBoundaries((activeLine == null ? void 0 : activeLine.pointList) || [], this.isCurve, SEGMENT_NUMBER, this.zoom);
+      const line = this.lineList[index];
+      this.updateStatus(1);
+      this.setActiveLine(line.pointList);
+      this.setSelectedLineID(line.id);
+      this.activeArea = area;
+      this.updateLineAttributes(line);
+    } else if (outsideCancel) {
+      this.setNoneStatus();
+    }
+    this.render();
+  }
+  setActiveLineByID(id) {
+    const line = this.lineList.find((i) => i.id === id);
+    if (line) {
+      const area = MathUtils.calcViewportBoundaries((line == null ? void 0 : line.pointList) || [], this.isCurve, SEGMENT_NUMBER, this.zoom);
+      this.updateStatus(1);
+      this.setActiveLine(line.pointList);
+      this.setSelectedLineID(line.id);
+      this.activeArea = area;
+      this.updateLineAttributes(line);
+    }
+    this.render();
+  }
+  setActiveLine(pointList) {
+    this.activeLine = pointList ? _.cloneDeep(pointList) : void 0;
+  }
+  historyChanged(funcName) {
+    const enableKeyName = `${funcName}Enabled`;
+    if (this.isCreate) {
+      if (this.actionsHistory && this.actionsHistory[enableKeyName]) {
+        const record = this.actionsHistory && this.actionsHistory[funcName]();
+        this.setActiveLine(record);
+        this.render();
+      }
+      return;
+    }
+    if (this.history && this.history[enableKeyName]) {
+      const currentHistory = this.history[funcName]();
+      const activeLine = currentHistory == null ? void 0 : currentHistory.find((i) => i.id === this.selectedID);
+      this.lineList = currentHistory;
+      if (this.selectedID && activeLine) {
+        this.setActiveLine(activeLine == null ? void 0 : activeLine.pointList);
+      } else {
+        this.setNoneStatus();
+      }
+      this.render();
+    }
+    this.emit("dataUpdated", this.lineList);
+  }
+  undo() {
+    this.historyChanged("undo");
+    this.updateSelectedAttributeAfterHistoryChanged();
+  }
+  redo() {
+    this.historyChanged("redo");
+    this.updateSelectedAttributeAfterHistoryChanged();
+  }
+  isCoordInsideTarget(coord) {
+    if (this.isDependPolygon) {
+      return this.isInBasicPolygon(coord);
+    }
+    if (this.isDependRect) {
+      const {x, y, width, height} = this.basicResult;
+      const rectHorizontalRange = [x, x + width];
+      const rectVerticalRange = [y, y + height];
+      return MathUtils.isInRange(coord.x, rectHorizontalRange) && MathUtils.isInRange(coord.y, rectVerticalRange);
+    }
+    return MathUtils.isInRange(coord.x, [0, this.imageSize.width]) && MathUtils.isInRange(coord.y, [0, this.imageSize.height]);
+  }
+  getPointInsertIndex(coord, scope) {
+    if (coord && this.activeLine) {
+      const pointList = this.getPointList(this.activeLine);
+      if (this.activeLine.length === 2) {
+        return 1;
+      }
+      return this.activeLine.findIndex((i, index) => {
+        if (index > 0) {
+          const straightLinePoints = this.activeLine ? this.activeLine[index - 1] : void 0;
+          const points = this.isCurve ? pointList.slice((index - 1) * (SEGMENT_NUMBER + 1), index * (SEGMENT_NUMBER + 1)) : [straightLinePoints, i];
+          return this.pointInLine(points, coord, scope || this.getLineWidthScope());
+        }
+        return false;
+      });
+    }
+    return -1;
+  }
+  getLineWidthScope() {
+    return this.lineStyle.lineWidth;
+  }
+  isMouseCoordOutsideActiveArea() {
+    return !this.coordsInsideActiveArea && !this.selectedPoint;
+  }
+  isLinePointsExceed() {
+    return this.isCreate && this.activeLine && this.upperLimitPointNum && ~~this.upperLimitPointNum <= this.activeLine.length;
+  }
+  isLinePointsNotEnough() {
+    var _a;
+    return this.activeLine && ((_a = this.activeLine) == null ? void 0 : _a.length) < this.lowerLimitPointNum;
+  }
+  updateLineSegmentSpecial(coord) {
+    const specialEdgeIndex = this.getPointInsertIndex(coord, 2) - 1;
+    if (specialEdgeIndex > -1) {
+      const pointData = this.activeLine[specialEdgeIndex];
+      pointData.specialEdge = !pointData.specialEdge;
+      this.hoverLineSegmentIndex = -1;
+      this.render();
+    }
+  }
+  addLinePointToActiveLine() {
+    var _a;
+    const insertIndex = this.getPointInsertIndex(this.cursor);
+    const pointsWithInRange = this.pointsWithinRange(this.activeLine.length + 1);
+    if (this.cursor && insertIndex > -1 && pointsWithInRange) {
+      this.activeLine.splice(insertIndex, 0, __spreadProps(__spreadValues({}, this.coordUtils.getAbsCoord(this.cursor)), {id: uuid()}));
+      this.updateLines();
+      (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      this.render();
+      this.cursor = void 0;
+    }
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const coord = this.getCoordinate(e);
+    this.isMousedown = true;
+    this.prevAxis = coord;
+    if (e.which === 3) {
+      this.cursor = void 0;
+      return;
+    }
+    this.selectedPoint = this.findHoveredPoint(coord);
+    this.coordsInsideActiveArea = this.isActive && this.activeArea ? LineToolUtils.inArea(this.activeArea, this.coordUtils.getAbsCoord(coord)) : false;
+    this.lineDragging = false;
+  }
+  lineHasChanged() {
+    const line = this.lineList.find((i) => i.id === this.selectedID);
+    return line ? JSON.stringify(line.pointList) !== JSON.stringify(this.activeLine) : false;
+  }
+  updateLines() {
+    const line = this.lineList.find((i) => i.id === this.selectedID);
+    if (line) {
+      line.pointList = _.cloneDeep(this.activeLine);
+      this.updatedLine = line;
+      this.emit("dataUpdated", this.lineList);
+    }
+  }
+  onMouseUp(e) {
+    const reset = () => {
+      this.isMousedown = false;
+      this.hoverPointID = void 0;
+      this.cursor = void 0;
+      this.selectedPoint = void 0;
+    };
+    this.hoverPointID = void 0;
+    if (super.onMouseUp(e) || this.forbidMouseOperation || !this.imgInfo) {
+      reset();
+      return;
+    }
+    if (e.which === 1) {
+      this.onLeftClick(e);
+    }
+    if (e.which === 3) {
+      this.onRightClick(e);
+    }
+    reset();
+  }
+  isTextValid(text) {
+    return AttributeUtils.textAttributeValidate(this.textCheckType, this.customFormat, text);
+  }
+  createLineData() {
+    const id = uuid();
+    const newLine = {
+      pointList: _.cloneDeep(this.activeLine),
+      id,
+      valid: this.isLineValid,
+      order: this.nextOrder()
+    };
+    newLine.attribute = this.defaultAttribute;
+    return newLine;
+  }
+  stopLineCreating(isAppend = true) {
+    var _a, _b, _c, _d;
+    const setActiveAfterCreating = this.selectedID ? true : !!this.isTextConfigurable;
+    let selectedID;
+    if (isAppend) {
+      if (this.selectedID) {
+        const line = this.lineList.find((i) => i.id === this.selectedID);
+        selectedID = this.selectedID;
+        if (line) {
+          line.pointList = _.cloneWith(this.activeLine);
+          if (!_.isEqual(line.pointList, (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList))) {
+            (_b = this.history) == null ? void 0 : _b.pushHistory(this.lineList);
+          }
+        }
+      } else if (this.isCreate && this.activeLine && this.activeLine.length > 1) {
+        const newLine = this.createLineData();
+        selectedID = newLine.id;
+        this.setLineList([...this.lineList, newLine]);
+        this.emit("lineCreated", newLine, this.zoom, this.currentPos);
+        (_c = this.history) == null ? void 0 : _c.pushHistory(this.lineList);
+      }
+    }
+    if (setActiveAfterCreating) {
+      this.setActiveStatus(selectedID);
+    } else {
+      this.setNoneStatus();
+    }
+    (_d = this.actionsHistory) == null ? void 0 : _d.empty();
+    this.emit("dataUpdated", this.lineList);
+    this.render();
+  }
+  setActiveStatus(id) {
+    const line = id ? this.lineList.find((i) => i.id === id) : void 0;
+    if (line) {
+      const pointList = line == null ? void 0 : line.pointList;
+      this.updateStatus(1);
+      this.setActiveLine(pointList);
+      this.setSelectedLineID(id);
+    } else {
+      this.setNoneStatus();
+    }
+  }
+  setNoneStatus(updateStatus = true) {
+    if (updateStatus) {
+      this.updateStatus(2);
+    }
+    this.activeLine = [];
+    this.setSelectedLineID(void 0);
+    this.activeArea = void 0;
+    this.isLineValid = true;
+    this.cursor = void 0;
+  }
+  setKeyDownStatus(e, value) {
+    this.isShift = value != null ? value : e.keyCode === EKeyCode.Shift;
+  }
+  continueToEdit() {
+    var _a;
+    this.updateStatus(0);
+    this.cursor = void 0;
+    (_a = this.actionsHistory) == null ? void 0 : _a.pushHistory(this.activeLine);
+    this.render();
+  }
+  setInvalidLineOnCreating(e) {
+    if (this.selectedID && e.keyCode !== EKeyCode.Ctrl || !this.isCreate) {
+      return;
+    }
+    const valid = !e.ctrlKey;
+    if (this.selectedID) {
+      this.setInvalidLine(this.selectedID, valid, false);
+    } else {
+      this.isLineValid = valid;
+    }
+  }
+  onKeyDown(e) {
+    super.onKeyDown(e);
+    this.setKeyDownStatus(e);
+    if (e.keyCode === EKeyCode.Z && !e.ctrlKey) {
+      this.toggleIsHide();
+    }
+    if (e.keyCode === EKeyCode.Shift) {
+      this.render();
+    }
+    if (e.keyCode === EKeyCode.Tab) {
+      e.preventDefault();
+      this.selectToNextLine(e);
+      return;
+    }
+    if (this.isCreate) {
+      this.keyboardEventWhileLineCreating(e);
+    }
+    if (this.config.attributeConfigurable) {
+      const keyCode2Attribute = AttributeUtils.getAttributeByKeycode(e.keyCode, this.config.attributeList);
+      if (keyCode2Attribute !== void 0) {
+        this.setDefaultAttribute(keyCode2Attribute);
+      }
+    }
+  }
+  selectToNextLine(e) {
+    const nextSelectedLine = CommonToolUtils.getNextSelectedRectIDByEvent(this.viewPortLines.map((i) => {
+      var _a, _b, _c, _d;
+      return __spreadProps(__spreadValues({}, i), {
+        x: (_b = (_a = i.pointList[0]) == null ? void 0 : _a.x) != null ? _b : 0,
+        y: (_d = (_c = i.pointList[0]) == null ? void 0 : _c.y) != null ? _d : 0
+      });
+    }), e, this.selectedID);
+    if (nextSelectedLine) {
+      this.setActiveLineByID(nextSelectedLine.id);
+    }
+  }
+  keyboardEventWhileLineCreating(e) {
+    if (!this.isCreate) {
+      return;
+    }
+    if (e.keyCode === EKeyCode.Ctrl) {
+      this.setInvalidLineOnCreating(e);
+    }
+    if ([EKeyCode.Shift, EKeyCode.Alt].includes(e.keyCode)) {
+      this.renderNextPoint(e, this.prevAxis);
+    }
+  }
+  renderNextPoint(e, coord) {
+    const nextPoint = this.coordUtils.getRenderCoord(this.getNextPoint(e, coord));
+    this.render(nextPoint);
+  }
+  deleteSelectedLine(coord) {
+    const boundary = MathUtils.calcViewportBoundaries(this.activeLine, this.isCurve, SEGMENT_NUMBER, this.zoom);
+    const axisOnArea = LineToolUtils.inArea(boundary, this.coordUtils.getAbsCoord(coord));
+    if (axisOnArea) {
+      this.deleteLine();
+    }
+  }
+  deleteSelectedLinePoint(selectedID) {
+    var _a;
+    const pointsWithinRange = this.pointsWithinRange(this.activeLine.length - 1);
+    if (pointsWithinRange && selectedID) {
+      this.setActiveLine(this.activeLine.filter((i) => i.id !== selectedID));
+      this.updateLines();
+      (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+    }
+    this.cursor = void 0;
+    this.render();
+  }
+  deleteLine() {
+    var _a;
+    this.lineList = this.lineList.filter((i) => i.id !== this.selectedID);
+    (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+    this.setNoneStatus();
+    this.emit("dataUpdated", this.lineList);
+    this.emit("lineDeleted", this.selectedID);
+    this.render();
+  }
+  setInvalidLine(id, valid, isRender = true) {
+    var _a;
+    const line = this.lineList.find((i) => i.id === id);
+    if (line) {
+      line.valid = valid !== void 0 ? valid : !line.valid;
+      (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      if (isRender) {
+        this.render();
+      }
+    }
+  }
+  empty() {
+    var _a, _b;
+    this.lineList = [];
+    this.setNoneStatus();
+    this.selectedPoint = void 0;
+    (_a = this.actionsHistory) == null ? void 0 : _a.empty();
+    (_b = this.history) == null ? void 0 : _b.init();
+    this.emit("dataUpdated", this.lineList);
+    this.render();
+  }
+  setAttribute(attribute) {
+    var _a;
+    if (this.attributeConfigurable) {
+      this.defaultAttribute = attribute;
+      this.setLineAttribute("attribute", attribute);
+      if (this.selectedID) {
+        (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      }
+    }
+  }
+  setTextAttribute(text) {
+    var _a;
+    if (this.isTextConfigurable) {
+      this.setLineAttribute("textAttribute", text);
+      (_a = this.history) == null ? void 0 : _a.applyAttribute(this.selectedID, "textAttribute", text);
+    }
+  }
+  setLineAttribute(key, value, id) {
+    const targetID = id || this.selectedID;
+    if (targetID) {
+      const line = this.lineList.find((i) => i.id === targetID);
+      if (line) {
+        line[key] = value;
+      }
+    }
+    this.render();
+  }
+  updateAttribute(attribute) {
+    this.emit("updateAttribute", attribute);
+  }
+  updateLineAttributes(line) {
+    var _a;
+    if (this.attributeConfigurable && line) {
+      const attribute = (line == null ? void 0 : line.attribute) || "";
+      this.defaultAttribute = attribute;
+      this.updateAttribute(attribute);
+    }
+    if (this.isTextConfigurable && line) {
+      const text = (line == null ? void 0 : line.textAttribute) || "";
+      this.updateTextAttribute(text);
+    }
+    (_a = this.history) == null ? void 0 : _a.updateHistory(this.lineList);
+  }
+  lineStatusChanged() {
+    this.emit("lineStatusChanged", {
+      status: this.status,
+      selectedLineID: this.selectedID
+    });
+  }
+  updateTextAttribute(text) {
+    if (this.selectedID) {
+      const line = this.lineList.find((i) => i.id === this.selectedID);
+      if (line) {
+        line.textAttribute = text;
+      }
+    }
+    this.emit("updateText", text);
+  }
+  saveData() {
+    this.stopLineCreating();
+    this.setNoneStatus();
+    this.render();
+  }
+  setTextEditingID(id) {
+    this.textEditingID = id;
+    this.render();
+  }
+  setSelectedLineID(id) {
+    var _a, _b;
+    if (this.selectedID === id) {
+      return;
+    }
+    const oldID = this.selectedID;
+    if (id !== oldID && oldID) {
+      (_a = this._textAttributeInstance) == null ? void 0 : _a.changeSelected();
+    }
+    if (!id) {
+      (_b = this._textAttributeInstance) == null ? void 0 : _b.clearTextAttribute();
+    }
+    this.selectedID = id;
+    this.emit("selectedChange");
+  }
+  attributeLockListChange(attributeLockList) {
+    this.attributeLockList = attributeLockList;
+    this.render();
+  }
+  setResult(lineList) {
+    this.setNoneStatus();
+    this.setLineList(lineList);
+    this.render();
+  }
+  setConfig(config) {
+    super.setConfig(config);
+  }
+  toggleIsHide() {
+    this.setIsHidden(!this.isHidden);
+    this.render();
+  }
+  clearCanvas() {
+    super.clearCanvas();
+  }
+  clearResult() {
+    this.setResult([]);
+    this.setSelectedLineID(void 0);
+    this.render();
+  }
+  exportData() {
+    return [this.lineList, this.basicImgInfo];
+  }
+  setDefaultAttribute(attribute = "") {
+    var _a;
+    if (this.attributeConfigurable) {
+      this.defaultAttribute = attribute;
+      this.changeStyle(this.defaultAttribute);
+      this.setLineAttribute("attribute", attribute);
+      if (this.selectedID) {
+        (_a = this.history) == null ? void 0 : _a.pushHistory(this.lineList);
+      }
+      this.emit("changeAttributeSidebar");
+    }
+  }
+  getCurrentSelectedData() {
+    var _a, _b;
+    const valid = this.isActiveLineValid();
+    const attribute = this.defaultAttribute;
+    const toolColor = this.getColor(attribute);
+    const color = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    const textAttribute = (_b = (_a = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _a.textAttribute) != null ? _b : "";
+    return {
+      color,
+      textAttribute
+    };
+  }
+  renderTextAttribute() {
+    var _a, _b, _c, _d;
+    if (!this.ctx || !this.activeLine || ((_a = this.activeLine) == null ? void 0 : _a.length) < 2 || this.isCreate) {
+      return;
+    }
+    const valid = this.isActiveLineValid();
+    const attribute = this.defaultAttribute;
+    const {x, y} = this.activeLine[1];
+    const coordinate = this.coordUtils.getRenderCoord({x, y});
+    const toolColor = this.getColor(attribute);
+    const color = valid ? toolColor == null ? void 0 : toolColor.valid.stroke : toolColor == null ? void 0 : toolColor.invalid.stroke;
+    const textAttribute = (_c = (_b = this.lineList.find((i) => i.id === this.selectedID)) == null ? void 0 : _b.textAttribute) != null ? _c : "";
+    if (!this._textAttributeInstance) {
+      this._textAttributeInstance = new TextAttributeClass({
+        container: this.container,
+        icon: this.getTextIconSvg(attribute),
+        color,
+        getCurrentSelectedData: this.getCurrentSelectedData,
+        updateSelectedTextAttribute: this.updateSelectedTextAttribute
+      });
+    }
+    if (this._textAttributeInstance && !((_d = this._textAttributeInstance) == null ? void 0 : _d.isExit)) {
+      this._textAttributeInstance.appendToContainer();
+    }
+    this._textAttributeInstance.update(`${textAttribute}`, {
+      left: coordinate.x,
+      top: coordinate.y,
+      color
+    });
+    this._textAttributeInstance.updateIcon(this.getTextIconSvg(attribute));
+  }
+  getTextIconSvg(attribute = "") {
+    return AttributeUtils.getTextIconSvg(attribute, this.config.attributeList, this.config.attributeConfigurable, this.baseIcon);
+  }
+  updateSelectedTextAttribute(newTextAttribute) {
+    if (this._textAttributeInstance && newTextAttribute && this.selectedID) {
+      let textAttribute = newTextAttribute;
+      const textAttributeInvalid = !AttributeUtils.textAttributeValidate(this.config.textCheckType, "", textAttribute);
+      if (textAttributeInvalid) {
+        this.emit("messageError", AttributeUtils.getErrorNotice(this.config.textCheckType, this.lang));
+        textAttribute = "";
+      }
+      this.setTextAttribute(textAttribute);
+      this.emit("updateTextAttribute");
+      this.render();
+    }
+  }
+}
+
+export { INNER_POINT_RADIUS, LINE_ORDER_OFFSET, POINT_ACTIVE_RADIUS, POINT_RADIUS, SEGMENT_NUMBER, LineToolOperation as default };