@labelbee/lb-annotation 1.13.1-alpha.0 → 1.14.0-alpha.1

package/es/core/toolOperation/ViewOperation.js

@@ -1 +1 @@
-import E from"lodash";import M from"color-rgba";import c from"../../utils/tool/DrawUtils.js";import S from"../../utils/tool/AxisUtils.js";import Z from"../../utils/tool/RectUtils.js";import F from"../../utils/tool/PolygonUtils.js";import R from"../../utils/MathUtils.js";import W from"../../utils/tool/RenderDomClass.js";import{ELineTypes as C,DEFAULT_FONT as j,SEGMENT_NUMBER as U}from"../../constant/tool.js";import{DEFAULT_TEXT_OFFSET as B,TEXT_ATTRIBUTE_OFFSET as I,DEFAULT_TEXT_SHADOW as H}from"../../constant/annotation.js";import N from"../../utils/tool/ImgPosUtils.js";import{BasicToolOperation as K}from"./basicToolOperation.js";import{pointCloudLidar2image as V}from"../pointCloud/matrix.js";var X=Object.defineProperty,G=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertySymbols,q=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,z=(x,t,e)=>t in x?X(x,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):x[t]=e,g=(x,t)=>{for(var e in t||(t={}))q.call(t,e)&&z(x,e,t[e]);if($)for(var e of $(t))J.call(t,e)&&z(x,e,t[e]);return x},b=(x,t)=>G(x,Y(t));const Q=3,tt=3,A="#6371FF";class et extends K{constructor(t){super(b(g({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.getHoverRectID=o=>{var s,a;const h=this.getCoordinateUnderZoom(o),n=S.changePointByZoom(h,1/this.zoom);if(((s=this.annotations)==null?void 0:s.length)<=0||!((a=this.annotations)==null?void 0:a.length))return;let d="",i=Number.MAX_SAFE_INTEGER;for(let l=0;l<this.annotations.length;l++){const r=this.annotations[l];switch(r.type){case"rect":{const f=r.annotation;if(Z.isInRect(h,f,Q,this.zoom)){const u=f.width*f.height;u<i&&(d=f.id,i=u)}break}case"polygon":{const f=r.annotation;if(F.isInPolygon(n,f.pointList)){const u=F.getPolygonArea(f.pointList);u<i&&(d=f.id,i=u)}break}}}return d};var e;this.style=(e=t.style)!=null?e:{stroke:A,thickness:3},this.annotations=t.annotations,this.loading=!1,this.renderDomInstance=new W({container:this.container,height:this.canvas.height})}clearConnectionPoints(){this.connectionPoints=[],this.render()}checkConnectionPoints(t=this.annotations){var e,o;this.connectPointsStatus&&((o=(e=this.connectPointsStatus).close)==null||o.call(e)),this.emit("connectionPointsStatusUpdate",()=>new Promise(s=>{const{promise:a,close:h}=R.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:h},a.then(n=>{this.connectionPoints=n.connectionPoints,this.render(),this.connectPointsStatus=void 0,s({connectionPoints:n.connectionPoints})})}))}setLoading(t){this.loading=t,this.render()}onMouseLeave(){super.onMouseLeave(),this.mouseHoverID=void 0,this.emit("onChange","hover",[])}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||!this.imgInfo)return!0;const e=this.mouseHoverID;if(t.button===0){let o=[];e&&(o=[e]),this.emit("onChange","selected",o),this.render()}}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const e=this.mouseHoverID,o=this.getHoverRectID(t);if(e!==o){this.mouseHoverID=o;let s=[];o&&(s=[o]),this.emit("onChange","hover",s),this.render()}}updateData(t){this.annotations=t,this.render()}getSpecificStyle(t){const e=E.pick(t,["stroke","thickness","fill","radius"]),o=g(g({},this.style),e);return o.stroke&&Object.assign(o,{color:o.stroke}),o}getFontStyle(t,e){var o,s;const a=(o=t==null?void 0:t.fontSize)!=null?o:14,h=(s=t==null?void 0:t.fontFamily)!=null?s:"Arial";return b(g({},H),{color:e.stroke,font:`normal normal 600 ${a}px ${h}`})}appendOffset({x:t,y:e}){return{x:t+B.offsetX,y:e+B.offsetY}}getRenderText(t,e=!1){let o="",s="";return!t||e===!0?{headerText:o,bottomText:s}:((t==null?void 0:t.order)&&(o=`${t.order}`),(t==null?void 0:t.label)&&(o?o=`${o}_${t.label}`:o=`${t.label}`),(t==null?void 0:t.attribute)&&(o?o=`${o}  ${t.attribute}`:o=`${t.attribute}`),(t==null?void 0:t.textAttribute)&&(s=t==null?void 0:t.textAttribute),{headerText:o,bottomText:s})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){const e=R.calcViewportBoundaries(t),o={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},s=N.getBasicRecPos(this.imgNode,o,this.size,.5);if(s){this.setCurrentPos(s.currentPos),this.setCurrentPosStorage(s.currentPos);const{imgInfo:a}=this,{innerZoom:h}=this.innerPosAndZoom;a&&this.setImgInfo(b(g({},a),{width:a.width/h*s.innerZoom,height:a.height/h*s.innerZoom})),this.setZoom(s.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=S.changePointByZoom(t,this.zoom,this.currentPos);c.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),c.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}getRenderStyle(t){const e=this.getSpecificStyle(t.annotation),o=this.getFontStyle(t.annotation,e);return{style:e,fontStyle:o}}renderLine(t){var e,o,s;if(t.type!=="line")return;const{style:a,fontStyle:h}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:d=C.Line}=n,i=S.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos),l=b(g(g({},a),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:d,strokeColor:a.stroke});let r=[];if(n.showKeyPoint?r=c.drawPolygonWithKeyPoint(this.canvas,i,l):r=c.drawPolygon(this.canvas,i,l),(n==null?void 0:n.showDirection)===!0&&((s=n==null?void 0:n.pointList)==null?void 0:s.length)>=2){let v=i[0],m=R.getLineCenterPoint([i[0],i[1]]);if(d===C.Curve){const p=Math.floor(U/2);v=r[p],m=r[p+1]}c.drawArrowByCanvas(this.canvas,v,m,{color:a.stroke,thickness:a.thickness}),c.drawCircle(this.canvas,i[0],a.thickness+6,{color:a.stroke,thickness:a.thickness})}const{headerText:u,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(u&&c.drawText(this.canvas,this.appendOffset(i[0]),u,h),y){const v=i[i.length-1];c.drawText(this.canvas,this.appendOffset({x:v.x+I.x,y:v.y+I.y}),y,h)}}renderPolygon(t){var e,o,s,a,h;if(t.type!=="polygon")return;const{style:n,fontStyle:d}=this.getRenderStyle(t),i=t.annotation;if(!(((e=i==null?void 0:i.pointList)==null?void 0:e.length)>=3))return;const{lineType:l=C.Line}=i,r=S.changePointListByZoom((o=i==null?void 0:i.pointList)!=null?o:[],this.zoom,this.currentPos);if(i.id===this.mouseHoverID||n.fill){const p=M((a=(s=n==null?void 0:n.fill)!=null?s:n==null?void 0:n.stroke)!=null?a:A),P=`rgba(${p[0]}, ${p[1]}, ${p[2]},${p[3]*.8})`;c.drawPolygonWithFill(this.canvas,r,{color:P,lineType:l})}const f=b(g(b(g({},n),{isClose:!0}),this.getReferenceOptions(i==null?void 0:i.isReference)),{lineType:l,strokeColor:n.stroke});let u=[];if(i.showKeyPoint?u=c.drawPolygonWithKeyPoint(this.canvas,r,f):u=c.drawPolygon(this.canvas,r,f),(i==null?void 0:i.showDirection)===!0&&((h=i==null?void 0:i.pointList)==null?void 0:h.length)>=2){let p=r[0],P=R.getLineCenterPoint([r[0],r[1]]);if(l===C.Curve){const w=Math.floor(U/2);p=u[w],P=u[w+1]}c.drawArrowByCanvas(this.canvas,p,P,{color:n.stroke,thickness:n.thickness}),c.drawCircle(this.canvas,r[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:v,bottomText:m}=this.getRenderText(i,i==null?void 0:i.hiddenText);if(v&&c.drawText(this.canvas,this.appendOffset(r[0]),v,d),m){const p=r[r.length-1];c.drawText(this.canvas,this.appendOffset({x:p.x+I.x,y:p.y+I.y}),m,d)}}renderBox3d(t){if(t.type!=="box3d")return;const e=t.annotation,o=V(e,e.calib),s={fill:"transparent"},a=E.pick(e,["stroke","thickness"]);o.forEach((h,n)=>{const d=g(b(g({},a),{id:`${t.annotation.id}-${n}`,pointList:h.pointList}),s);switch(h.type){case"line":this.renderLine({type:"line",annotation:d});break;case"polygon":this.renderPolygon({type:"polygon",annotation:d});break}})}render(){try{if(super.render(),this.loading===!0)return;const t=this.annotations.filter(e=>e.type==="text"&&e.annotation.position==="rt").map(e=>e.annotation);this.renderDomInstance.render(t),this.annotations.forEach(e=>{var o,s,a,h,n;const d=this.getSpecificStyle(e.annotation),i=this.getFontStyle(e.annotation,d);switch(e.type){case"rect":{const l=e.annotation,{hiddenText:r=!1,isReference:f,hiddenRectSize:u=!1}=l,{zoom:y}=this,v=S.changeRectByZoom(l,this.zoom,this.currentPos),{x:m,y:p,width:P,height:w}=v;if(l.id===this.mouseHoverID||d.fill){const T=M((s=(o=d==null?void 0:d.fill)!=null?o:d==null?void 0:d.stroke)!=null?s:A),k=`rgba(${T[0]}, ${T[1]}, ${T[2]},${T[3]*.8})`;c.drawRectWithFill(this.canvas,v,{color:k})}c.drawRect(this.canvas,v,g(b(g({},d),{hiddenText:!0}),this.getReferenceOptions(f)));const{headerText:D,bottomText:O}=this.getRenderText(l,l==null?void 0:l.hiddenText);D&&c.drawText(this.canvas,{x:m,y:p-6},D,g({textMaxWidth:300},i));const _=`${Math.round(P/y)} * ${Math.round(w/y)}`,L=_.length*7;if(!r&&!u&&c.drawText(this.canvas,{x:m+P-L,y:p+w+15},_,i),O){const T=20,k=Math.max(20,P-L);c.drawText(this.canvas,{x:m,y:p+w+T},l.textAttribute,g({textMaxWidth:k},i))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const l=e.annotation,r=S.changePointByZoom(l,this.zoom,this.currentPos),f=(a=d.radius)!=null?a:tt;c.drawCircle(this.canvas,r,f,d);const{headerText:u,bottomText:y}=this.getRenderText(l,l==null?void 0:l.hiddenText);u&&c.drawText(this.canvas,{x:r.x+f/2,y:r.y-f-4},u,g({textAlign:"center"},i)),y&&c.drawText(this.canvas,this.appendOffset({x:r.x+f,y:r.y+f+24}),y,i);break}case"text":{const l=e.annotation,{text:r,x:f,y:u,textMaxWidth:y,color:v="white",background:m="rgba(0, 0, 0, 0.6)",lineHeight:p=25,font:P=j,position:w}=l,D=10,O=10,_=S.changePointByZoom({x:f,y:u},this.zoom,this.currentPos),{width:L,height:T,fontHeight:k=0}=R.getTextArea(this.canvas,l.text,y,P,p);if(w==="rt")break;c.drawRectWithFill(this.canvas,{x:_.x,y:_.y,width:L+O*2,height:T+D*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:m}),c.drawText(this.canvas,{x:_.x+O,y:_.y+k+D},r,{color:v,lineHeight:p,font:P,textMaxWidth:y});break}case"box3d":{this.renderBox3d(e);break}default:break}(n=(h=e.annotation)==null?void 0:h.renderEnhance)==null||n.call(h,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this})}),this.renderConnectionPoints()}catch(t){console.error("ViewOperation Render Error",t)}}}export{et as default};
+import M from"lodash";import E from"color-rgba";import h from"../../utils/tool/DrawUtils.js";import b from"../../utils/tool/AxisUtils.js";import Z from"../../utils/tool/RectUtils.js";import $ from"../../utils/tool/PolygonUtils.js";import C from"../../utils/MathUtils.js";import W from"../../utils/tool/RenderDomClass.js";import{ELineTypes as L,DEFAULT_FONT as j,SEGMENT_NUMBER as F}from"../../constant/tool.js";import{DEFAULT_TEXT_OFFSET as B,TEXT_ATTRIBUTE_OFFSET as A,DEFAULT_TEXT_SHADOW as H}from"../../constant/annotation.js";import N from"../../utils/tool/ImgPosUtils.js";import{BasicToolOperation as K}from"./basicToolOperation.js";import{pointCloudLidar2image as V}from"../pointCloud/matrix.js";var X=Object.defineProperty,G=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,U=Object.getOwnPropertySymbols,q=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,z=(P,t,e)=>t in P?X(P,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):P[t]=e,p=(P,t)=>{for(var e in t||(t={}))q.call(t,e)&&z(P,e,t[e]);if(U)for(var e of U(t))J.call(t,e)&&z(P,e,t[e]);return P},_=(P,t)=>G(P,Y(t));const Q=3,tt=3,I="#6371FF";class et extends K{constructor(t){super(_(p({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.getHoverRectID=o=>{var i,r;const c=this.getCoordinateUnderZoom(o),n=b.changePointByZoom(c,1/this.zoom);if(((i=this.annotations)==null?void 0:i.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let d="",s=Number.MAX_SAFE_INTEGER;for(let l=0;l<this.annotations.length;l++){const a=this.annotations[l];switch(a.type){case"rect":{const u=a.annotation;if(Z.isInRect(c,u,Q,this.zoom)){const f=u.width*u.height;f<s&&(d=u.id,s=f)}break}case"polygon":{const u=a.annotation;if($.isInPolygon(n,u.pointList)){const f=$.getPolygonArea(u.pointList);f<s&&(d=u.id,s=f)}break}}}return d};var e;this.style=(e=t.style)!=null?e:{stroke:I,thickness:3},this.annotations=t.annotations,this.loading=!1,this.renderDomInstance=new W({container:this.container,height:this.canvas.height})}clearConnectionPoints(){this.connectionPoints=[],this.render()}checkConnectionPoints(t=this.annotations){var e,o;this.connectPointsStatus&&((o=(e=this.connectPointsStatus).close)==null||o.call(e)),this.emit("connectionPointsStatusUpdate",()=>new Promise(i=>{const{promise:r,close:c}=C.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:c},r.then(n=>{this.connectionPoints=n.connectionPoints,this.render(),this.connectPointsStatus=void 0,i({connectionPoints:n.connectionPoints})})}))}setLoading(t){this.loading=t,this.render()}onMouseLeave(){super.onMouseLeave(),this.mouseHoverID=void 0,this.emit("onChange","hover",[])}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||!this.imgInfo)return!0;const e=this.mouseHoverID;if(t.button===0){let o=[];e&&(o=[e]),this.emit("onChange","selected",o),this.render()}}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const e=this.mouseHoverID,o=this.getHoverRectID(t);if(e!==o){this.mouseHoverID=o;let i=[];o&&(i=[o]),this.emit("onChange","hover",i),this.render()}}updateData(t){this.annotations=t,this.render()}getSpecificStyle(t){const e=M.pick(t,["stroke","thickness","fill","radius"]),o=p(p({},this.style),e);return o.stroke&&Object.assign(o,{color:o.stroke}),o}getFontStyle(t,e){var o,i;const r=(o=t==null?void 0:t.fontSize)!=null?o:14,c=(i=t==null?void 0:t.fontFamily)!=null?i:"Arial";return _(p({},H),{color:e.stroke,font:`normal normal 600 ${r}px ${c}`})}appendOffset({x:t,y:e}){return{x:t+B.offsetX,y:e+B.offsetY}}getRenderText(t,e=!1){let o="",i="";return!t||e===!0?{headerText:o,bottomText:i}:((t==null?void 0:t.order)&&(o=`${t.order}`),(t==null?void 0:t.label)&&(o?o=`${o}_${t.label}`:o=`${t.label}`),(t==null?void 0:t.attribute)&&(o?o=`${o}  ${t.attribute}`:o=`${t.attribute}`),(t==null?void 0:t.textAttribute)&&(i=t==null?void 0:t.textAttribute),{headerText:o,bottomText:i})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){const e=C.calcViewportBoundaries(t),o={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},i=N.getBasicRecPos(this.imgNode,o,this.size,.5);if(i){this.setCurrentPos(i.currentPos),this.setCurrentPosStorage(i.currentPos);const{imgInfo:r}=this,{innerZoom:c}=this.innerPosAndZoom;r&&this.setImgInfo(_(p({},r),{width:r.width/c*i.innerZoom,height:r.height/c*i.innerZoom})),this.setZoom(i.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=b.changePointByZoom(t,this.zoom,this.currentPos);h.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),h.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}getRenderStyle(t){const e=this.getSpecificStyle(t.annotation),o=this.getFontStyle(t.annotation,e);return{style:e,fontStyle:o}}renderLine(t){var e,o,i;if(t.type!=="line")return;const{style:r,fontStyle:c}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:d=L.Line}=n,s=b.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos),l=_(p(p({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:d,strokeColor:r.stroke});let a=[];if(n.showKeyPoint?a=h.drawPolygonWithKeyPoint(this.canvas,s,l):a=h.drawPolygon(this.canvas,s,l),(n==null?void 0:n.showDirection)===!0&&((i=n==null?void 0:n.pointList)==null?void 0:i.length)>=2){let v=s[0],m=C.getLineCenterPoint([s[0],s[1]]);if(d===L.Curve){const g=Math.floor(F/2);v=a[g],m=a[g+1]}h.drawArrowByCanvas(this.canvas,v,m,{color:r.stroke,thickness:r.thickness}),h.drawCircle(this.canvas,s[0],r.thickness+6,{color:r.stroke,thickness:r.thickness})}const{headerText:f,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(f&&h.drawText(this.canvas,this.appendOffset(s[0]),f,c),y){const v=s[s.length-1];h.drawText(this.canvas,this.appendOffset({x:v.x+A.x,y:v.y+A.y}),y,c)}}renderPolygon(t){var e,o,i,r,c;if(t.type!=="polygon")return;const{style:n,fontStyle:d}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:l=L.Line}=s,a=b.changePointListByZoom((o=s==null?void 0:s.pointList)!=null?o:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const g=E((r=(i=n==null?void 0:n.fill)!=null?i:n==null?void 0:n.stroke)!=null?r:I),x=`rgba(${g[0]}, ${g[1]}, ${g[2]},${g[3]*.8})`;h.drawPolygonWithFill(this.canvas,a,{color:x,lineType:l})}const u=_(p(_(p({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:l,strokeColor:n.stroke});let f=[];if(s.showKeyPoint?f=h.drawPolygonWithKeyPoint(this.canvas,a,u):f=h.drawPolygon(this.canvas,a,u),(s==null?void 0:s.showDirection)===!0&&((c=s==null?void 0:s.pointList)==null?void 0:c.length)>=2){let g=a[0],x=C.getLineCenterPoint([a[0],a[1]]);if(l===L.Curve){const w=Math.floor(F/2);g=f[w],x=f[w+1]}h.drawArrowByCanvas(this.canvas,g,x,{color:n.stroke,thickness:n.thickness}),h.drawCircle(this.canvas,a[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:v,bottomText:m}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(v&&h.drawText(this.canvas,this.appendOffset(a[0]),v,d),m){const g=a[a.length-1];h.drawText(this.canvas,this.appendOffset({x:g.x+A.x,y:g.y+A.y}),m,d)}}renderSingleCuboid(t){var e,o;const{style:i}=this.getRenderStyle(t),r=t.annotation,c=E((o=(e=i==null?void 0:i.fill)!=null?e:i==null?void 0:i.stroke)!=null?o:I),n=`rgba(${c[0]}, ${c[1]}, ${c[2]},${c[3]*.8})`,d=i.stroke,s=b.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:l,bottomText:a}=this.getRenderText(r,r==null?void 0:r.hiddenText);h.drawCuboidWithText(this.canvas,s,{strokeColor:d,fillColor:n,thickness:i.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,currentPos:this.currentPos,zoom:this.zoom,headerText:l,bottomText:a})}renderBox3d(t){if(t.type!=="box3d")return;const e=t.annotation,o=V(e,e.calib),i={fill:"transparent"},r=M.pick(e,["stroke","thickness"]);o.forEach((c,n)=>{const d=p(_(p({},r),{id:`${t.annotation.id}-${n}`,pointList:c.pointList}),i);switch(c.type){case"line":this.renderLine({type:"line",annotation:d});break;case"polygon":this.renderPolygon({type:"polygon",annotation:d});break}})}render(){try{if(super.render(),this.loading===!0)return;const t=this.annotations.filter(e=>e.type==="text"&&e.annotation.position==="rt").map(e=>e.annotation);this.renderDomInstance.render(t),this.annotations.forEach(e=>{var o,i,r,c,n;const d=this.getSpecificStyle(e.annotation),s=this.getFontStyle(e.annotation,d);switch(e.type){case"rect":{const l=e.annotation,{hiddenText:a=!1,isReference:u,hiddenRectSize:f=!1}=l,{zoom:y}=this,v=b.changeRectByZoom(l,this.zoom,this.currentPos),{x:m,y:g,width:x,height:w}=v;if(l.id===this.mouseHoverID||d.fill){const T=E((i=(o=d==null?void 0:d.fill)!=null?o:d==null?void 0:d.stroke)!=null?i:I),D=`rgba(${T[0]}, ${T[1]}, ${T[2]},${T[3]*.8})`;h.drawRectWithFill(this.canvas,v,{color:D})}h.drawRect(this.canvas,v,p(_(p({},d),{hiddenText:!0}),this.getReferenceOptions(u)));const{headerText:S,bottomText:R}=this.getRenderText(l,l==null?void 0:l.hiddenText);S&&h.drawText(this.canvas,{x:m,y:g-6},S,p({textMaxWidth:300},s));const k=`${Math.round(x/y)} * ${Math.round(w/y)}`,O=k.length*7;if(!a&&!f&&h.drawText(this.canvas,{x:m+x-O,y:g+w+15},k,s),R){const T=20,D=Math.max(20,x-O);h.drawText(this.canvas,{x:m,y:g+w+T},l.textAttribute,p({textMaxWidth:D},s))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const l=e.annotation,a=b.changePointByZoom(l,this.zoom,this.currentPos),u=(r=d.radius)!=null?r:tt;h.drawCircle(this.canvas,a,u,d);const{headerText:f,bottomText:y}=this.getRenderText(l,l==null?void 0:l.hiddenText);f&&h.drawText(this.canvas,{x:a.x+u/2,y:a.y-u-4},f,p({textAlign:"center"},s)),y&&h.drawText(this.canvas,this.appendOffset({x:a.x+u,y:a.y+u+24}),y,s);break}case"text":{const l=e.annotation,{text:a,x:u,y:f,textMaxWidth:y,color:v="white",background:m="rgba(0, 0, 0, 0.6)",lineHeight:g=25,font:x=j,position:w}=l,S=10,R=10,k=b.changePointByZoom({x:u,y:f},this.zoom,this.currentPos),{width:O,height:T,fontHeight:D=0}=C.getTextArea(this.canvas,l.text,y,x,g);if(w==="rt")break;h.drawRectWithFill(this.canvas,{x:k.x,y:k.y,width:O+R*2,height:T+S*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:m}),h.drawText(this.canvas,{x:k.x+R,y:k.y+D+S},a,{color:v,lineHeight:g,font:x,textMaxWidth:y});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}default:break}(n=(c=e.annotation)==null?void 0:c.renderEnhance)==null||n.call(c,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this})}),this.renderConnectionPoints()}catch(t){console.error("ViewOperation Render Error",t)}}}export{et as default};

package/es/core/toolOperation/basicToolOperation.js

@@ -1 +1 @@
-import{isNumber as x}from"lodash";import{styleDefaultConfig as N}from"../../constant/defaultConfig.js";import{EOperationMode as y,EToolName as b}from"../../constant/tool.js";import S from"../../utils/MathUtils.js";import w,{CoordinateUtils as j}from"../../utils/tool/AxisUtils.js";import T from"../../utils/tool/CanvasUtils.js";import P from"../../utils/tool/CommonToolUtils.js";import K from"../../utils/tool/LineToolUtils.js";import{EGrowthMode as W,EDragStatus as G,ELang as H}from"../../constant/annotation.js";import I from"../../constant/keyCode.js";import{COLORS_ARRAY as M,styleString as F,BASE_ICON as V}from"../../constant/style.js";import R from"../../locales/index.js";import{EMessage as k}from"../../locales/constants.js";import Y from"../../utils/ActionsHistory.js";import z from"../../utils/tool/AttributeUtils.js";import $ from"../../utils/tool/DblClickEventListener.js";import g from"../../utils/tool/DrawUtils.js";import E from"../../utils/tool/ImgPosUtils.js";import X from"../../utils/tool/RenderDomUtils.js";import U from"../../utils/tool/ZoomUtils.js";import q from"./eventListener.js";var J=Object.defineProperty,Q=Object.defineProperties,tt=Object.getOwnPropertyDescriptors,B=Object.getOwnPropertySymbols,it=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,O=(l,t,i)=>t in l?J(l,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):l[t]=i,Z=(l,t)=>{for(var i in t||(t={}))it.call(t,i)&&O(l,i,t[i]);if(B)for(var i of B(t))et.call(t,i)&&O(l,i,t[i]);return l},st=(l,t)=>Q(l,tt(t)),ot=(l,t,i)=>new Promise((e,s)=>{var o=a=>{try{n(i.next(a))}catch(h){s(h)}},r=a=>{try{n(i.throw(a))}catch(h){s(h)}},n=a=>a.done?e(a.value):Promise.resolve(a.value).then(o,r);n((i=i.apply(l,t)).next())});const p={min:.2,max:1e3,ratio:.4};class rt extends q{constructor(t){super();this.isDrag=!1,this.isSpaceKey=!1,this.operationMode=y.General,this.innerZoom=1,this.basicZoom=.01,this.isSpaceClick=!1,this.isDragStart=!1,this.startTime=0,this.initImgPos=()=>ot(this,null,function*(){var c,d;if(!this.imgNode)return;const u=(c=this._imgAttribute)==null?void 0:c.zoomRatio,m=(d=this._imgAttribute)==null?void 0:d.isOriginalSize,{currentPos:f,imgInfo:C,zoom:v}=E.getInitImgPos(this.size,{width:this.imgNode.width,height:this.imgNode.height},this.rotate,u,m);this.setCurrentPos(f),this.currentPosStorage=f,this.setImgInfo(C),this.setZoom(v),this.render(),this.renderBasicCanvas(),this.emit("dependRender"),this.emit("renderZoom",v,f,C)}),this.getCurrentPos=c=>{const{_firstClickCoordinate:d,currentPosStorage:u}=this;try{let m;return d&&u?m={y:u.y+c.y-d.y,x:u.x+c.x-d.x}:m={x:0,y:0},m}catch(m){return console.error(m),{x:0,y:0}}},this.wheelChangePos=(c,d,u)=>{const{currentPos:m,imgNode:f}=this;if(!f){console.error("unable to load image");return}if(this.zoom===this.basicZoom&&d===-1)return;const C=U.wheelChangePos(f,c,d,m,{zoom:u||this.zoom,innerZoom:this.innerZoom,basicZoom:this.basicZoom,zoomMax:p.max,rotate:this.rotate});if(!C)return;const{currentPos:v,ratio:A,zoom:D,imgInfo:_}=C;this.setZoom(D),this.setCurrentPos(v),this.currentPosStorage=v,this.setImgInfo(_),p.ratio=A,this.emit("renderZoom",D,v,_)},this.zoomChanged=(c,d=W.Linear)=>{const u=U.zoomChanged(this.zoom,c,d);this.wheelChangePos(this.getGetCenterCoordinate(),u>this.zoom?1:-1,u),this.render(),this.renderBasicCanvas()},this.zoomChangeOnCenter=c=>{this.wheelChangePos(this.getGetCenterCoordinate(),0,c),this.render(),this.renderBasicCanvas()},this.drawImg=()=>{!this.imgNode||this.hiddenImg===!0||g.drawImg(this.basicCanvas,this.imgNode,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate,imgAttribute:this._imgAttribute})};var i,e,s,o,r,n,a,h,L;this.container=t.container,this.config=P.jsonParser(t.config),this.showDefaultCursor=t.showDefaultCursor||!1,this.destroyCanvas(),this.createCanvas(t.size,t.isAppend),this.imgNode=t.imgNode,this.isImgError=!t.imgNode,this.basicImgInfo={width:(e=(i=t.imgNode)==null?void 0:i.width)!=null?e:0,height:(o=(s=t.imgNode)==null?void 0:s.height)!=null?o:0,valid:!0,rotate:0},this.forbidOperation=(r=t.forbidOperation)!=null?r:!1,this.forbidBasicResultRender=(n=t.forbidBasicResultRender)!=null?n:!1,this.size=t.size,this.currentPos={x:0,y:0},this.zoom=1,this.coord={x:-1,y:-1},this.currentPosStorage={x:0,y:0},this.isShowCursor=!1,this.style={strokeColor:M[4],fillColor:M[4],strokeWidth:2,opacity:1},this.attributeLockList=[],this.history=new Y,this.style=(a=t.style)!=null?a:P.jsonParser(F),this._imgAttribute=(h=t.imgAttribute)!=null?h:{},this.isHidden=!1,this.dragStatus=G.Wait,this.defaultAttribute=(L=t==null?void 0:t.defaultAttribute)!=null?L:"",this.forbidCursorLine=!!t.forbidCursorLine,this.lang=H.Zh,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onWheel=this.onWheel.bind(this),this.onLeftDblClick=this.onLeftDblClick.bind(this),this.onRightDblClick=this.onRightDblClick.bind(this),this.onClick=this.onClick.bind(this),this.clearImgDrag=this.clearImgDrag.bind(this),this.dblClickListener=new $(this.container,200),this.coordUtils=new j(this),this.coordUtils.setBasicImgInfo(this.basicImgInfo),this.hiddenImg=t.hiddenImg||!1}onContextmenu(t){t.preventDefault()}get ctx(){var t;return this._ctx||((t=this.canvas)==null?void 0:t.getContext("2d"))}get basicCtx(){var t;return(t=this.basicCanvas)==null?void 0:t.getContext("2d")}get rotate(){var t,i;return(i=(t=this.basicImgInfo)==null?void 0:t.rotate)!=null?i:0}get valid(){var t,i;return(i=(t=this.basicImgInfo)==null?void 0:t.valid)!=null?i:!0}get baseIcon(){return V[this.style.color]}get defaultCursor(){return this.showDefaultCursor?"default":"none"}get dataList(){return[]}get innerPosAndZoom(){return{innerZoom:this.innerZoom,currentPosStorage:this.currentPosStorage}}get isShowDefaultCursor(){return this.showDefaultCursor}get isMultiMoveMode(){return this.operationMode===y.MultiMove}get hasMarkerConfig(){return this.config.markerConfigurable===!0&&this.config.markerList&&this.config.markerList.length>0}setZoom(t){this.zoom=t,this.innerZoom=t,this.coordUtils.setZoomAndCurrentPos(this.zoom,this.currentPos)}setCurrentPos(t){this.currentPos=t,this.coordUtils.setZoomAndCurrentPos(this.zoom,this.currentPos)}setReferenceData(t){this.referenceData=t}setImgInfo(t){this.imgInfo=t}setCurrentPosStorage(t){this.currentPosStorage=t}setOperationMode(t){this.operationMode=t}recoverOperationMode(){this.operationMode===y.MultiMove&&this.setOperationMode(y.General)}updatePosition(t){const{zoom:i,currentPos:e}=t;this.setZoom(i),this.setCurrentPos(e),this.currentPosStorage=e,this.renderBasicCanvas(),this.render()}setLang(t){this.lang=t}setShowDefaultCursor(t){this.showDefaultCursor=t,this.container.style.cursor=this.defaultCursor}setCustomCursor(t){this.container.style.cursor=t}get forbidMouseOperation(){return this.forbidOperation||this.valid===!1}get pixelRatio(){var t;return T.getPixelRatio((t=this.canvas)==null?void 0:t.getContext("2d"))}init(){this.eventUnbinding(),this.initPosition(),this.eventBinding(),this.render(),this.renderBasicCanvas()}destroy(){this.destroyCanvas(),this.eventUnbinding()}updateCanvasBasicStyle(t,i,e){const s=this.pixelRatio;t.style.position="absolute",t.width=i.width*s,t.height=i.height*s,t.style.width=`${i.width}px`,t.style.height=`${i.height}px`,t.style.left="0",t.style.top="0",t.style.zIndex=`${e} `}createCanvas(t,i=!0){var e,s;const o=this.pixelRatio,r=document.createElement("canvas");this.updateCanvasBasicStyle(r,t,0),this.basicCanvas=r;const n=document.createElement("canvas");this.updateCanvasBasicStyle(n,t,10),i&&(this.container.hasChildNodes()?(this.container.insertBefore(n,this.container.childNodes[0]),this.container.insertBefore(r,this.container.childNodes[0])):(this.container.appendChild(r),this.container.appendChild(n))),this.canvas=n,this.container.style.cursor=this.defaultCursor,(e=this.ctx)==null||e.scale(o,o),(s=this.basicCtx)==null||s.scale(o,o)}destroyCanvas(){this.canvas&&this.container.contains(this.canvas)&&this.container.removeChild(this.canvas),this.basicCanvas&&this.container.contains(this.basicCanvas)&&this.container.removeChild(this.basicCanvas),this.clearInvalidPage(),this.clearImgDrag()}setStyle(t){this.style=t,this.render()}setImgNode(t,i={}){this.imgNode=t,this.setBasicImgInfo(Z({width:t.width,height:t.height,valid:!0,rotate:0},i)),this.isImgError===!0&&(this.isImgError=!1,this.emit("changeAnnotationShow")),typeof i.valid=="boolean"&&this.setValid(i.valid),this.initImgPos(),this.render(),this.renderBasicCanvas()}setErrorImg(){const t=this.isImgError;this.isImgError=!0,this.imgNode=void 0,this.setBasicImgInfo({width:0,height:0,valid:!0,rotate:0}),t===!1&&this.emit("changeAnnotationShow")}setBasicImgInfo(t){this.basicImgInfo=t,this.coordUtils.setBasicImgInfo(t)}setForbidOperation(t){this.forbidOperation=t,this.setShowDefaultCursor(t),this.render()}setForbidCursorLine(t){this.forbidCursorLine=t,this.render()}setIsHidden(t){this.isHidden=t,this.emit("hiddenChange")}setIsShowOrder(t){this.config.isShowOrder=t,this.render()}getCoordinate(t){const i=this.canvas.getBoundingClientRect();return{x:t.clientX-i.left,y:t.clientY-i.top}}getCoordinateUnderZoom(t){const i=this.canvas.getBoundingClientRect();return{x:t.clientX-i.left-this.currentPos.x,y:t.clientY-i.top-this.currentPos.y}}getCoordinateUnderZoomByRotate(t){const{x:i,y:e}=this.getCoordinateUnderZoom(t);return this.basicImgInfo.rotate===90?{x:e,y:this.basicImgInfo.height*this.zoom-i}:this.basicImgInfo.rotate===180?{x:this.basicImgInfo.width*this.zoom-i,y:this.basicImgInfo.height*this.zoom-e}:this.basicImgInfo.rotate===270?{x:this.basicImgInfo.width*this.zoom-e,y:i}:{x:i,y:e}}getGetCenterCoordinate(){return{x:this.size.width/2,y:this.size.height/2}}initPosition(){if(this.basicResult&&this.imgInfo){const{basicResult:t,size:i,imgNode:e,_imgAttribute:s,imgInfo:o,dependToolName:r}=this;if(t&&e&&r){let n=t;switch(r){case b.Polygon:case b.Line:{if(t.pointList){const h=S.calcViewportBoundaries(t.pointList);n={x:h.left,y:h.top,width:h.right-h.left,height:h.bottom-h.top}}break}}const a=E.getBasicRecPos(e,n,i,void 0,s==null?void 0:s.zoomRatio,s==null?void 0:s.isOriginalSize);a&&(this.setCurrentPos(a.currentPos),this.currentPosStorage=this.currentPos,this.setImgInfo(st(Z({},o),{width:o.width/this.innerZoom*a.innerZoom,height:o.height/this.innerZoom*a.innerZoom})),this.setZoom(a.innerZoom),this.render(),this.renderBasicCanvas())}}else this.initImgPos()}undo(){this.history.undo()}redo(){this.history.redo()}clearCanvas(){var t;(t=this.ctx)==null||t.clearRect(0,0,this.size.width,this.size.height)}clearBasicCanvas(){var t;(t=this.basicCtx)==null||t.clearRect(0,0,this.size.width,this.size.height)}eventBinding(){this.dblClickListener.addEvent(()=>{},this.onLeftDblClick,this.onRightDblClick),this.container.addEventListener("mousedown",this.onMouseDown),this.container.addEventListener("mousemove",this.onMouseMove),this.container.addEventListener("mouseup",this.onMouseUp),this.container.addEventListener("mouseleave",this.onMouseLeave),this.container.addEventListener("click",this.onClick),this.container.addEventListener("wheel",this.onWheel),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("keyup",this.onKeyUp),window.parent.document.addEventListener("contextmenu",this.onContextmenu,!1)}eventUnbinding(){this.container.removeEventListener("mousedown",this.onMouseDown),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("mouseup",this.onMouseUp),this.container.removeEventListener("mouseleave",this.onMouseLeave),this.container.removeEventListener("wheel",this.onWheel),this.container.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("keyup",this.onKeyUp),window.parent.document.removeEventListener("contextmenu",this.onContextmenu,!1),this.dblClickListener.removeEvent()}clearImgDrag(){this.isDrag=!1,this.isDragStart=!1,this.isSpaceClick=!1,this.startTime=0,this.container.style.cursor=this.defaultCursor,this.forbidCursorLine=!1}clearCursorLine(){this.coord={x:-1,y:-1}}onMouseDown(t){if(!this.canvas||this.isImgError)return!0;const i=this.getCoordinate(t);(this.isSpaceKey&&t.button===0||t.button===2)&&(t.stopPropagation(),this._firstClickCoordinate=i,this.currentPosStorage=this.currentPos,this.isSpaceClick=!0,this.isDragStart=!0,this.startTime=new Date().getTime())}onMouseMove(t){if(!this.canvas||this.isImgError)return!0;const i=this.getCoordinate(t);this.isShowCursor&&(this.coord=i);try{if(!i||!x(i==null?void 0:i.x)||!x(i==null?void 0:i.y))throw new Error("coord error");if(this.coord=i,(this.isSpaceClick||this.isDragStart)&&this._firstClickCoordinate){const e=this.getCurrentPos(i);this.setCurrentPos(e),this.isDrag=!0,this.container.style.cursor="grabbing",this.forbidCursorLine=!0,this.renderBasicCanvas(),this.emit("dependRender"),this.emit("dragMove",{currentPos:e,zoom:this.zoom,imgInfo:this.imgInfo})}this.render()}catch(e){console.error(e)}}onMouseUp(t){if(!this.canvas||this.isImgError)return!0;if(this.container.style.cursor=this.defaultCursor,this.forbidCursorLine=!1,this.isDrag=!1,this.isDragStart=!1,this.isSpaceClick=!1,this.startTime!==0&&this._firstClickCoordinate){const i=new Date().getTime(),e=this.getCoordinate(t);if(i-this.startTime>1e3||this.isSpaceKey===!0||K.calcTwoPointDistance(e,this._firstClickCoordinate)>10)return t.stopPropagation(),this.startTime=0,this.render(),!0}this.startTime=0,this.render()}onMouseLeave(){this.clearImgDrag()}onClick(t){}onLeftDblClick(t){}onRightDblClick(t){this.clearImgDrag()}onKeyDown(t){switch(t.keyCode===I.Alt&&t.preventDefault(),t.keyCode){case I.Space:this.isSpaceKey=!0;break;case I.Z:if(t.ctrlKey)return t.shiftKey?this.redo():this.undo(),!1;break}return!0}onKeyUp(t){switch(t.keyCode){case I.Space:this.isSpaceKey=!1;break}}exportCustomData(){return{}}onWheel(t,i=!0){if(!this.imgNode||!this.coord)return;t.preventDefault(),t.stopPropagation();const e=this.getCoordinate(t),s=t.deltaY||t.wheelDelta;let o=0;s>0&&this.zoom>p.min&&(o=-1),s<0&&this.zoom<p.max&&(o=1),this.wheelChangePos(e,o),this.emit("dependRender"),i&&this.render(),this.renderBasicCanvas()}renderCursorLine(t=(i=>(i=this.style.lineColor[0])!=null?i:"")()){if(!this.ctx||this.forbidCursorLine||this.forbidOperation)return;const{x:i,y:e}=this.coord;g.drawLine(this.canvas,{x:0,y:e},{x:1e4,y:e},{color:t}),g.drawLine(this.canvas,{x:i,y:0},{x:i,y:1e4},{color:t}),g.drawCircleWithFill(this.canvas,{x:i,y:e},1,{color:"white"})}setSize(t){var i;this.size=t,this.container.contains(this.canvas)&&(this.destroyCanvas(),this.createCanvas(t),this.eventUnbinding(),this.init(),((i=this.basicImgInfo)==null?void 0:i.valid)===!1&&this.renderInvalidPage())}setImgAttribute(t){const i=this._imgAttribute;if(this._imgAttribute=t,(i==null?void 0:i.zoomRatio)!==t.zoomRatio||i.isOriginalSize!==t.isOriginalSize){this.initImgPos();return}this.renderBasicCanvas(),this.render()}clearResult(t){}setValid(t){this.basicImgInfo.valid=t,t===!1?(this.renderInvalidPage(),this.clearResult(!1)):this.clearInvalidPage()}setRotate(t){this.basicImgInfo.rotate=t}setBasicResult(t){this.basicResult=t,this.coordUtils.setBasicResult(t),this.initPosition(),this.emit("dependRender")}setDependName(t,i){this.dependToolName=t,this.coordUtils.setDependInfo(t,i)}setAttributeLockList(t){this.attributeLockList=t,this.render()}setConfig(t){this.config=P.jsonParser(t)}setDataInjectionAtCreation(t){this.dataInjectionAtCreation=t}setRenderEnhance(t){this.renderEnhance=t}setCustomRenderStyle(t){this.customRenderStyle=t}updateRotate(){if(this.dependToolName)return this.emit("messageInfo",R.getMessagesByLocale(k.NoRotateInDependence,this.lang)),!1;if(this.dataList.length>0)return this.emit("messageInfo",R.getMessagesByLocale(k.NoRotateNotice,this.lang)),!1;const t=S.getRotate(this.basicImgInfo.rotate);this.basicImgInfo.rotate=t,this.initImgPos(),this.emit("updateResult")}getColor(t="",i=this.config){var e;if((i==null?void 0:i.attributeConfigurable)===!0&&this.style.attributeColor){const r=z.getAttributeIndex(t,(e=i.attributeList)!=null?e:[])+1;return this.style.attributeColor[r]}const{color:s,toolColor:o}=this.style;return o?o[s]:N.toolColor["1"]}getLineColor(t=""){var i,e,s;if(((i=this.config)==null?void 0:i.attributeConfigurable)===!0){const n=z.getAttributeIndex(t,(s=(e=this.config)==null?void 0:e.attributeList)!=null?s:[])+1;return this.style.attributeLineColor?this.style.attributeLineColor[n]:""}const{color:o,lineColor:r}=this.style;return o&&r?r[o]:""}clearInvalidPage(){this._invalidDOM&&this.container&&this.container.contains(this._invalidDOM)&&(this.container.removeChild(this._invalidDOM),this._invalidDOM=void 0)}renderInvalidPage(){!this.container||this._invalidDOM||(this._invalidDOM=X.renderInvalidPage(this.container,this.size,this.lang))}renderBasicCanvas(){if(!this.basicCanvas)return;this.clearBasicCanvas(),this.drawImg();const t=3;if(!this.forbidBasicResultRender&&this.basicResult&&this.dependToolName)switch(this.dependToolName){case b.Rect:{g.drawRect(this.basicCanvas,w.changeRectByZoom(this.basicResult,this.zoom,this.currentPos),{color:"rgba(204,204,204,1.00)",thickness:t});break}case b.Polygon:{g.drawPolygonWithFillAndLine(this.basicCanvas,w.changePointListByZoom(this.basicResult.pointList,this.zoom,this.currentPos),{fillColor:"transparent",strokeColor:"rgba(204,204,204,1.00)",isClose:!0,thickness:t});break}case b.Line:{g.drawLineWithPointList(this.basicCanvas,w.changePointListByZoom(this.basicResult.pointList,this.zoom,this.currentPos),{color:"rgba(204,204,204,1.00)",thickness:t});break}}}render(){!this.canvas||!this.ctx||!this.imgNode||this.clearCanvas()}changeStyle(t=this.defaultAttribute){this.emit("changeStyle",{attribute:t})}}export{rt as BasicToolOperation};
+import{toolStyleConverter as x}from"@labelbee/lb-utils";import{isNumber as S}from"lodash";import{EOperationMode as I,EToolName as y}from"../../constant/tool.js";import R from"../../utils/MathUtils.js";import w,{CoordinateUtils as j}from"../../utils/tool/AxisUtils.js";import T from"../../utils/tool/CanvasUtils.js";import L from"../../utils/tool/CommonToolUtils.js";import K from"../../utils/tool/LineToolUtils.js";import{EGrowthMode as W,EDragStatus as G,ELang as H}from"../../constant/annotation.js";import p from"../../constant/keyCode.js";import{COLORS_ARRAY as M,styleString as Y,BASE_ICON as F}from"../../constant/style.js";import k from"../../locales/index.js";import{EMessage as z}from"../../locales/constants.js";import V from"../../utils/ActionsHistory.js";import E from"../../utils/tool/AttributeUtils.js";import X from"../../utils/tool/DblClickEventListener.js";import g from"../../utils/tool/DrawUtils.js";import B from"../../utils/tool/ImgPosUtils.js";import $ from"../../utils/tool/RenderDomUtils.js";import U from"../../utils/tool/ZoomUtils.js";import q from"./eventListener.js";var J=Object.defineProperty,Q=Object.defineProperties,tt=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,it=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,Z=(d,t,i)=>t in d?J(d,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):d[t]=i,A=(d,t)=>{for(var i in t||(t={}))it.call(t,i)&&Z(d,i,t[i]);if(O)for(var i of O(t))et.call(t,i)&&Z(d,i,t[i]);return d},st=(d,t)=>Q(d,tt(t)),ot=(d,t,i)=>new Promise((e,s)=>{var o=r=>{try{n(i.next(r))}catch(a){s(a)}},h=r=>{try{n(i.throw(r))}catch(a){s(a)}},n=r=>r.done?e(r.value):Promise.resolve(r.value).then(o,h);n((i=i.apply(d,t)).next())});const P={min:.2,max:1e3,ratio:.4};class rt extends q{constructor(t){super();this.isDrag=!1,this.isSpaceKey=!1,this.operationMode=I.General,this.innerZoom=1,this.basicZoom=.01,this.isSpaceClick=!1,this.isDragStart=!1,this.startTime=0,this.initImgPos=()=>ot(this,null,function*(){var l,c;if(!this.imgNode)return;const u=(l=this._imgAttribute)==null?void 0:l.zoomRatio,m=(c=this._imgAttribute)==null?void 0:c.isOriginalSize,{currentPos:f,imgInfo:b,zoom:v}=B.getInitImgPos(this.size,{width:this.imgNode.width,height:this.imgNode.height},this.rotate,u,m);this.setCurrentPos(f),this.currentPosStorage=f,this.setImgInfo(b),this.setZoom(v),this.render(),this.renderBasicCanvas(),this.emit("dependRender"),this.emit("renderZoom",v,f,b)}),this.getCurrentPos=l=>{const{_firstClickCoordinate:c,currentPosStorage:u}=this;try{let m;return c&&u?m={y:u.y+l.y-c.y,x:u.x+l.x-c.x}:m={x:0,y:0},m}catch(m){return console.error(m),{x:0,y:0}}},this.wheelChangePos=(l,c,u)=>{const{currentPos:m,imgNode:f}=this;if(!f){console.error("unable to load image");return}if(this.zoom===this.basicZoom&&c===-1)return;const b=U.wheelChangePos(f,l,c,m,{zoom:u||this.zoom,innerZoom:this.innerZoom,basicZoom:this.basicZoom,zoomMax:P.max,rotate:this.rotate});if(!b)return;const{currentPos:v,ratio:N,zoom:_,imgInfo:D}=b;this.setZoom(_),this.setCurrentPos(v),this.currentPosStorage=v,this.setImgInfo(D),P.ratio=N,this.emit("renderZoom",_,v,D)},this.zoomChanged=(l,c=W.Linear)=>{const u=U.zoomChanged(this.zoom,l,c);this.wheelChangePos(this.getGetCenterCoordinate(),u>this.zoom?1:-1,u),this.render(),this.renderBasicCanvas()},this.zoomChangeOnCenter=l=>{this.wheelChangePos(this.getGetCenterCoordinate(),0,l),this.render(),this.renderBasicCanvas()},this.drawImg=()=>{!this.imgNode||this.hiddenImg===!0||g.drawImg(this.basicCanvas,this.imgNode,{zoom:this.zoom,currentPos:this.currentPos,rotate:this.rotate,imgAttribute:this._imgAttribute})};var i,e,s,o,h,n,r,a,C;this.container=t.container,this.config=L.jsonParser(t.config),this.showDefaultCursor=t.showDefaultCursor||!1,this.destroyCanvas(),this.createCanvas(t.size,t.isAppend),this.imgNode=t.imgNode,this.isImgError=!t.imgNode,this.basicImgInfo={width:(e=(i=t.imgNode)==null?void 0:i.width)!=null?e:0,height:(o=(s=t.imgNode)==null?void 0:s.height)!=null?o:0,valid:!0,rotate:0},this.forbidOperation=(h=t.forbidOperation)!=null?h:!1,this.forbidBasicResultRender=(n=t.forbidBasicResultRender)!=null?n:!1,this.size=t.size,this.currentPos={x:0,y:0},this.zoom=1,this.coord={x:-1,y:-1},this.currentPosStorage={x:0,y:0},this.isShowCursor=!1,this.style={strokeColor:M[4],fillColor:M[4],strokeWidth:2,opacity:1},this.attributeLockList=[],this.history=new V,this.style=(r=t.style)!=null?r:L.jsonParser(Y),this._imgAttribute=(a=t.imgAttribute)!=null?a:{},this.isHidden=!1,this.dragStatus=G.Wait,this.defaultAttribute=(C=t==null?void 0:t.defaultAttribute)!=null?C:"",this.forbidCursorLine=!!t.forbidCursorLine,this.lang=H.Zh,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onWheel=this.onWheel.bind(this),this.onLeftDblClick=this.onLeftDblClick.bind(this),this.onRightDblClick=this.onRightDblClick.bind(this),this.onClick=this.onClick.bind(this),this.clearImgDrag=this.clearImgDrag.bind(this),this.dblClickListener=new X(this.container,200),this.coordUtils=new j(this),this.coordUtils.setBasicImgInfo(this.basicImgInfo),this.hiddenImg=t.hiddenImg||!1}onContextmenu(t){t.preventDefault()}get ctx(){var t;return this._ctx||((t=this.canvas)==null?void 0:t.getContext("2d"))}get basicCtx(){var t;return(t=this.basicCanvas)==null?void 0:t.getContext("2d")}get rotate(){var t,i;return(i=(t=this.basicImgInfo)==null?void 0:t.rotate)!=null?i:0}get valid(){var t,i;return(i=(t=this.basicImgInfo)==null?void 0:t.valid)!=null?i:!0}get baseIcon(){return F[this.style.color]}get defaultCursor(){return this.showDefaultCursor?"default":"none"}get dataList(){return[]}get innerPosAndZoom(){return{innerZoom:this.innerZoom,currentPosStorage:this.currentPosStorage}}get isShowDefaultCursor(){return this.showDefaultCursor}get isMultiMoveMode(){return this.operationMode===I.MultiMove}get hasMarkerConfig(){return this.config.markerConfigurable===!0&&this.config.markerList&&this.config.markerList.length>0}setZoom(t){this.zoom=t,this.innerZoom=t,this.coordUtils.setZoomAndCurrentPos(this.zoom,this.currentPos)}setCurrentPos(t){this.currentPos=t,this.coordUtils.setZoomAndCurrentPos(this.zoom,this.currentPos)}setReferenceData(t){this.referenceData=t}setImgInfo(t){this.imgInfo=t}setCurrentPosStorage(t){this.currentPosStorage=t}setOperationMode(t){this.operationMode=t}recoverOperationMode(){this.operationMode===I.MultiMove&&this.setOperationMode(I.General)}updatePosition(t){const{zoom:i,currentPos:e}=t;this.setZoom(i),this.setCurrentPos(e),this.currentPosStorage=e,this.renderBasicCanvas(),this.render()}setLang(t){this.lang=t}setShowDefaultCursor(t){this.showDefaultCursor=t,this.container.style.cursor=this.defaultCursor}setCustomCursor(t){this.container.style.cursor=t}get forbidMouseOperation(){return this.forbidOperation||this.valid===!1}get pixelRatio(){var t;return T.getPixelRatio((t=this.canvas)==null?void 0:t.getContext("2d"))}init(){this.eventUnbinding(),this.initPosition(),this.eventBinding(),this.render(),this.renderBasicCanvas()}destroy(){this.destroyCanvas(),this.eventUnbinding()}updateCanvasBasicStyle(t,i,e){const s=this.pixelRatio;t.style.position="absolute",t.width=i.width*s,t.height=i.height*s,t.style.width=`${i.width}px`,t.style.height=`${i.height}px`,t.style.left="0",t.style.top="0",t.style.zIndex=`${e} `}createCanvas(t,i=!0){var e,s;const o=this.pixelRatio,h=document.createElement("canvas");this.updateCanvasBasicStyle(h,t,0),this.basicCanvas=h;const n=document.createElement("canvas");this.updateCanvasBasicStyle(n,t,10),i&&(this.container.hasChildNodes()?(this.container.insertBefore(n,this.container.childNodes[0]),this.container.insertBefore(h,this.container.childNodes[0])):(this.container.appendChild(h),this.container.appendChild(n))),this.canvas=n,this.container.style.cursor=this.defaultCursor,(e=this.ctx)==null||e.scale(o,o),(s=this.basicCtx)==null||s.scale(o,o)}destroyCanvas(){this.canvas&&this.container.contains(this.canvas)&&this.container.removeChild(this.canvas),this.basicCanvas&&this.container.contains(this.basicCanvas)&&this.container.removeChild(this.basicCanvas),this.clearInvalidPage(),this.clearImgDrag()}setStyle(t){this.style=t,this.render()}setImgNode(t,i={}){this.imgNode=t,this.setBasicImgInfo(A({width:t.width,height:t.height,valid:!0,rotate:0},i)),this.isImgError===!0&&(this.isImgError=!1,this.emit("changeAnnotationShow")),typeof i.valid=="boolean"&&this.setValid(i.valid),this.initImgPos(),this.render(),this.renderBasicCanvas()}setErrorImg(){const t=this.isImgError;this.isImgError=!0,this.imgNode=void 0,this.setBasicImgInfo({width:0,height:0,valid:!0,rotate:0}),t===!1&&this.emit("changeAnnotationShow")}setBasicImgInfo(t){this.basicImgInfo=t,this.coordUtils.setBasicImgInfo(t)}setForbidOperation(t){this.forbidOperation=t,this.setShowDefaultCursor(t),this.render()}setForbidCursorLine(t){this.forbidCursorLine=t,this.render()}setIsHidden(t){this.isHidden=t,this.emit("hiddenChange")}setDefaultAttribute(t){this.defaultAttribute=t}getCoordinateInOrigin(t){const i=this.canvas.getBoundingClientRect();return{x:(t.clientX-i.left-this.currentPos.x)/this.zoom,y:(t.clientY-i.top-this.currentPos.y)/this.zoom}}getTextIconSvg(t=""){var i;return E.getTextIconSvg(t,(i=this.config)==null?void 0:i.attributeList,this.config.attributeConfigurable,this.baseIcon)}setIsShowOrder(t){this.config.isShowOrder=t,this.render()}getCoordinate(t){const i=this.canvas.getBoundingClientRect();return{x:t.clientX-i.left,y:t.clientY-i.top}}getCoordinateUnderZoom(t){const i=this.canvas.getBoundingClientRect();return{x:t.clientX-i.left-this.currentPos.x,y:t.clientY-i.top-this.currentPos.y}}getCoordinateUnderZoomByRotate(t){const{x:i,y:e}=this.getCoordinateUnderZoom(t);return this.basicImgInfo.rotate===90?{x:e,y:this.basicImgInfo.height*this.zoom-i}:this.basicImgInfo.rotate===180?{x:this.basicImgInfo.width*this.zoom-i,y:this.basicImgInfo.height*this.zoom-e}:this.basicImgInfo.rotate===270?{x:this.basicImgInfo.width*this.zoom-e,y:i}:{x:i,y:e}}getGetCenterCoordinate(){return{x:this.size.width/2,y:this.size.height/2}}initPosition(){if(this.basicResult&&this.imgInfo){const{basicResult:t,size:i,imgNode:e,_imgAttribute:s,imgInfo:o,dependToolName:h}=this;if(t&&e&&h){let n=t;switch(h){case y.Polygon:case y.Line:{if(t.pointList){const a=R.calcViewportBoundaries(t.pointList);n={x:a.left,y:a.top,width:a.right-a.left,height:a.bottom-a.top}}break}}const r=B.getBasicRecPos(e,n,i,void 0,s==null?void 0:s.zoomRatio,s==null?void 0:s.isOriginalSize);r&&(this.setCurrentPos(r.currentPos),this.currentPosStorage=this.currentPos,this.setImgInfo(st(A({},o),{width:o.width/this.innerZoom*r.innerZoom,height:o.height/this.innerZoom*r.innerZoom})),this.setZoom(r.innerZoom),this.render(),this.renderBasicCanvas())}}else this.initImgPos()}undo(){this.history.undo()}redo(){this.history.redo()}clearCanvas(){var t;(t=this.ctx)==null||t.clearRect(0,0,this.size.width,this.size.height)}clearBasicCanvas(){var t;(t=this.basicCtx)==null||t.clearRect(0,0,this.size.width,this.size.height)}eventBinding(){this.dblClickListener.addEvent(()=>{},this.onLeftDblClick,this.onRightDblClick),this.container.addEventListener("mousedown",this.onMouseDown),this.container.addEventListener("mousemove",this.onMouseMove),this.container.addEventListener("mouseup",this.onMouseUp),this.container.addEventListener("mouseleave",this.onMouseLeave),this.container.addEventListener("click",this.onClick),this.container.addEventListener("wheel",this.onWheel),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("keyup",this.onKeyUp),window.parent.document.addEventListener("contextmenu",this.onContextmenu,!1)}eventUnbinding(){this.container.removeEventListener("mousedown",this.onMouseDown),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("mouseup",this.onMouseUp),this.container.removeEventListener("mouseleave",this.onMouseLeave),this.container.removeEventListener("wheel",this.onWheel),this.container.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("keyup",this.onKeyUp),window.parent.document.removeEventListener("contextmenu",this.onContextmenu,!1),this.dblClickListener.removeEvent()}clearImgDrag(){this.isDrag=!1,this.isDragStart=!1,this.isSpaceClick=!1,this.startTime=0,this.container.style.cursor=this.defaultCursor,this.forbidCursorLine=!1}clearCursorLine(){this.coord={x:-1,y:-1}}onMouseDown(t){if(!this.canvas||this.isImgError)return!0;const i=this.getCoordinate(t);(this.isSpaceKey&&t.button===0||t.button===2)&&(t.stopPropagation(),this._firstClickCoordinate=i,this.currentPosStorage=this.currentPos,this.isSpaceClick=!0,this.isDragStart=!0,this.startTime=new Date().getTime())}onMouseMove(t){if(!this.canvas||this.isImgError)return!0;const i=this.getCoordinate(t);this.isShowCursor&&(this.coord=i);try{if(!i||!S(i==null?void 0:i.x)||!S(i==null?void 0:i.y))throw new Error("coord error");if(this.coord=i,(this.isSpaceClick||this.isDragStart)&&this._firstClickCoordinate){const e=this.getCurrentPos(i);this.setCurrentPos(e),this.isDrag=!0,this.container.style.cursor="grabbing",this.forbidCursorLine=!0,this.renderBasicCanvas(),this.emit("dependRender"),this.emit("dragMove",{currentPos:e,zoom:this.zoom,imgInfo:this.imgInfo})}this.render()}catch(e){console.error(e)}}onMouseUp(t){if(!this.canvas||this.isImgError)return!0;if(this.container.style.cursor=this.defaultCursor,this.forbidCursorLine=!1,this.isDrag=!1,this.isDragStart=!1,this.isSpaceClick=!1,this.startTime!==0&&this._firstClickCoordinate){const i=new Date().getTime(),e=this.getCoordinate(t);if(i-this.startTime>1e3||this.isSpaceKey===!0||K.calcTwoPointDistance(e,this._firstClickCoordinate)>10)return t.stopPropagation(),this.startTime=0,this.render(),!0}this.startTime=0,this.render()}onMouseLeave(){this.clearImgDrag()}onClick(t){}onLeftDblClick(t){}onRightDblClick(t){this.clearImgDrag()}onKeyDown(t){switch(t.keyCode===p.Alt&&t.preventDefault(),t.keyCode){case p.Space:this.isSpaceKey=!0;break;case p.Z:if(t.ctrlKey)return t.shiftKey?this.redo():this.undo(),!1;break}return!0}onKeyUp(t){switch(t.keyCode){case p.Space:this.isSpaceKey=!1;break}}exportCustomData(){return{}}onWheel(t,i=!0){if(!this.imgNode||!this.coord)return;t.preventDefault(),t.stopPropagation();const e=this.getCoordinate(t),s=t.deltaY||t.wheelDelta;let o=0;s>0&&this.zoom>P.min&&(o=-1),s<0&&this.zoom<P.max&&(o=1),this.wheelChangePos(e,o),this.emit("dependRender"),i&&this.render(),this.renderBasicCanvas()}renderCursorLine(t=(i=>(i=this.style.lineColor[0])!=null?i:"")()){if(!this.ctx||this.forbidCursorLine||this.forbidOperation)return;const{x:i,y:e}=this.coord;g.drawLine(this.canvas,{x:0,y:e},{x:1e4,y:e},{color:t}),g.drawLine(this.canvas,{x:i,y:0},{x:i,y:1e4},{color:t}),g.drawCircleWithFill(this.canvas,{x:i,y:e},1,{color:"white"})}setSize(t){var i;this.size=t,this.container.contains(this.canvas)&&(this.destroyCanvas(),this.createCanvas(t),this.eventUnbinding(),this.init(),((i=this.basicImgInfo)==null?void 0:i.valid)===!1&&this.renderInvalidPage())}setImgAttribute(t){const i=this._imgAttribute;if(this._imgAttribute=t,(i==null?void 0:i.zoomRatio)!==t.zoomRatio||i.isOriginalSize!==t.isOriginalSize){this.initImgPos();return}this.renderBasicCanvas(),this.render()}clearResult(t){}setValid(t){this.basicImgInfo.valid=t,t===!1?(this.renderInvalidPage(),this.clearResult(!1)):this.clearInvalidPage()}setRotate(t){this.basicImgInfo.rotate=t}setBasicResult(t){this.basicResult=t,this.coordUtils.setBasicResult(t),this.initPosition(),this.emit("dependRender")}setDependName(t,i){this.dependToolName=t,this.coordUtils.setDependInfo(t,i)}setAttributeLockList(t){this.attributeLockList=t,this.render()}setConfig(t){this.config=L.jsonParser(t)}setDataInjectionAtCreation(t){this.dataInjectionAtCreation=t}setRenderEnhance(t){this.renderEnhance=t}setCustomRenderStyle(t){this.customRenderStyle=t}updateRotate(){if(this.dependToolName)return this.emit("messageInfo",k.getMessagesByLocale(z.NoRotateInDependence,this.lang)),!1;if(this.dataList.length>0)return this.emit("messageInfo",k.getMessagesByLocale(z.NoRotateNotice,this.lang)),!1;const t=R.getRotate(this.basicImgInfo.rotate);this.basicImgInfo.rotate=t,this.initImgPos(),this.emit("updateResult")}getColor(t="",i=this.config){return x.getColorByConfig({attribute:t,config:i,style:this.style})}getLineColor(t=""){var i,e,s,o,h,n,r,a;if(((i=this.config)==null?void 0:i.attributeConfigurable)===!0){const c=E.getAttributeIndex(t,(s=(e=this.config)==null?void 0:e.attributeList)!=null?s:[])+1;return((n=(h=(o=this.config)==null?void 0:o.attributeList)==null?void 0:h.find(m=>m.value===t))==null?void 0:n.color)?(a=(r=x.getColorByConfig({attribute:t,config:this.config}))==null?void 0:r.valid)==null?void 0:a.stroke:this.style.attributeLineColor?this.style.attributeLineColor[c]:""}const{color:C,lineColor:l}=this.style;return C&&l?l[C]:""}clearInvalidPage(){this._invalidDOM&&this.container&&this.container.contains(this._invalidDOM)&&(this.container.removeChild(this._invalidDOM),this._invalidDOM=void 0)}renderInvalidPage(){!this.container||this._invalidDOM||(this._invalidDOM=$.renderInvalidPage(this.container,this.size,this.lang))}renderBasicCanvas(){if(!this.basicCanvas)return;this.clearBasicCanvas(),this.drawImg();const t=3;if(!this.forbidBasicResultRender&&this.basicResult&&this.dependToolName)switch(this.dependToolName){case y.Rect:{g.drawRect(this.basicCanvas,w.changeRectByZoom(this.basicResult,this.zoom,this.currentPos),{color:"rgba(204,204,204,1.00)",thickness:t});break}case y.Polygon:{g.drawPolygonWithFillAndLine(this.basicCanvas,w.changePointListByZoom(this.basicResult.pointList,this.zoom,this.currentPos),{fillColor:"transparent",strokeColor:"rgba(204,204,204,1.00)",isClose:!0,thickness:t});break}case y.Line:{g.drawLineWithPointList(this.basicCanvas,w.changePointListByZoom(this.basicResult.pointList,this.zoom,this.currentPos),{color:"rgba(204,204,204,1.00)",thickness:t});break}}}render(){!this.canvas||!this.ctx||!this.imgNode||this.clearCanvas()}changeStyle(t=this.defaultAttribute){this.emit("changeStyle",{attribute:t})}}export{rt as BasicToolOperation};