@labelbee/lb-annotation 1.27.0-alpha.67 → 1.27.0-alpha.69

package/dist/core/toolOperation/ViewOperation.js

@@ -1 +1 @@
-"use strict";var lbUtils=require("@labelbee/lb-utils"),_=require("lodash"),rgba=require("color-rgba"),DrawUtils=require("../../utils/tool/DrawUtils.js"),AxisUtils=require("../../utils/tool/AxisUtils.js"),RectUtils=require("../../utils/tool/RectUtils.js"),PolygonUtils=require("../../utils/tool/PolygonUtils.js"),MathUtils=require("../../utils/MathUtils.js"),RenderDomClass=require("../../utils/tool/RenderDomClass.js"),tool=require("../../constant/tool.js"),annotation=require("../../constant/annotation.js"),ImgUtils=require("../../utils/ImgUtils.js"),CanvasUtils=require("../../utils/tool/CanvasUtils.js"),basicToolOperation=require("./basicToolOperation.js"),matrix=require("../pointCloud/matrix.js");function _interopDefaultLegacy(g){return g&&typeof g=="object"&&"default"in g?g:{default:g}}var ___default=_interopDefaultLegacy(_),rgba__default=_interopDefaultLegacy(rgba),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(g,t,e)=>t in g?__defProp(g,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):g[t]=e,__spreadValues=(g,t)=>{for(var e in t||(t={}))__hasOwnProp.call(t,e)&&__defNormalProp(g,e,t[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(t))__propIsEnum.call(t,e)&&__defNormalProp(g,e,t[e]);return g},__spreadProps=(g,t)=>__defProps(g,__getOwnPropDescs(t)),__async=(g,t,e)=>new Promise((i,o)=>{var r=a=>{try{n(e.next(a))}catch(s){o(s)}},l=a=>{try{n(e.throw(a))}catch(s){o(s)}},n=a=>a.done?i(a.value):Promise.resolve(a.value).then(r,l);n((e=e.apply(g,t)).next())});const newScope=3,DEFAULT_RADIUS=3,DEFAULT_STROKE_COLOR="#6371FF";class ViewOperation extends basicToolOperation.BasicToolOperation{constructor(t){super(__spreadProps(__spreadValues({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.needUpdatePosition=!0,this.posTimer=null,this.convexHullGroup={},this.pointCloudBoxList=[],this.hiddenText=!1,this.getHoverRectID=i=>{var o,r;const l=this.getCoordinateUnderZoom(i),n=AxisUtils.default.changePointByZoom(l,1/this.zoom);if(((o=this.annotations)==null?void 0:o.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let a="",s=Number.MAX_SAFE_INTEGER;for(let d=0;d<this.annotations.length;d++){const c=this.annotations[d];switch(c.type){case"rect":{const h=c.annotation;if(RectUtils.isInRect(l,h,newScope,this.zoom)){const u=h.width*h.height;u<s&&(a=h.id,s=u)}break}case"polygon":{const h=c.annotation;if(PolygonUtils.isInPolygon(n,h.pointList)){const u=PolygonUtils.getPolygonArea(h.pointList);u<s&&(a=h.id,s=u)}break}}}return a};var e;this.style=(e=t.style)!=null?e:{stroke:DEFAULT_STROKE_COLOR,thickness:3},this.annotations=t.annotations,this.convexHullGroup=PolygonUtils.createConvexHullGroup(t.annotations),this.loading=!1,this.renderDomInstance=new RenderDomClass({container:this.container,height:this.canvas.height})}clearConnectionPoints(){this.connectionPoints=[],this.render()}checkConnectionPoints(t=this.annotations){var e,i;this.connectPointsStatus&&((i=(e=this.connectPointsStatus).close)==null||i.call(e)),this.emit("connectionPointsStatusUpdate",()=>new Promise(o=>{const{promise:r,close:l}=MathUtils.default.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:l},r.then(n=>{this.connectionPoints=n.connectionPoints,this.render(),this.connectPointsStatus=void 0,o({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 i=[];e&&(i=[e]),this.emit("onChange","selected",i),this.render()}}setImgNode(t,e={}){super.setImgNode(t,e),this.staticMode&&this.generateStaticImgNode()}generateStaticImgNode(){var t,e;const i=ImgUtils.cropAndEnlarge(this.canvas,(t=this.basicImgInfo)==null?void 0:t.width,(e=this.basicImgInfo)==null?void 0:e.height,1);ImgUtils.default.load(i).then(o=>{this.staticImgNode=o,this.drawStaticImg()})}onRightClick(t){const e=this.getClickTargetId(t);this.needUpdatePosition=!1,this.posTimer&&clearTimeout(this.posTimer),this.emit("onRightClick",{event:t,targetId:e}),this.posTimer=setTimeout(()=>{this.needUpdatePosition=!0},1e3)}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const e=this.mouseHoverID,i=this.getHoverRectID(t);if(e!==i){this.mouseHoverID=i;let o=[];i&&(o=[i]),this.emit("onChange","hover",o),this.render()}}updateData(t){return __async(this,null,function*(){if(!___default.default.isEqual(this.annotations,t)&&(this.annotations=t,this.convexHullGroup=PolygonUtils.createConvexHullGroup(t),this.staticMode&&(this.staticImgNode=void 0),this.render(),this.staticMode)){const e=this.zoom,i=this.currentPos;this.initImgPos(),this.generateStaticImgNode();const o=this.staticImgNode;this.staticImgNode=void 0,this.updatePosition({zoom:e,currentPos:i}),this.staticImgNode=o}})}setPointCloudBoxList(t){this.pointCloudBoxList=t}setHiddenText(t){this.hiddenText=t,this.render()}setConfig(t){this.config=t}getSpecificStyle(t){const e=___default.default.pick(t,["stroke","thickness","fill","radius"]),i=__spreadValues(__spreadValues({},this.style),e);return i.stroke&&Object.assign(i,{color:i.stroke}),i}getFontStyle(t,e){var i,o;const r=(i=t==null?void 0:t.fontSize)!=null?i:14,l=(o=t==null?void 0:t.fontFamily)!=null?o:"Arial";return __spreadProps(__spreadValues({},annotation.DEFAULT_TEXT_SHADOW),{color:e.stroke,font:`normal normal 600 ${r}px ${l}`})}appendOffset({x:t,y:e}){return{x:t+annotation.DEFAULT_TEXT_OFFSET.offsetX,y:e+annotation.DEFAULT_TEXT_OFFSET.offsetY}}getRenderText(t,e=!1){let i="",o="";return!t||e===!0?{headerText:i,bottomText:o}:((t==null?void 0:t.order)&&(i=`${t.order}`),(t==null?void 0:t.label)&&(i?i=`${i}_${t.label}`:i=`${t.label}`),(t==null?void 0:t.attribute)&&(i?i=`${i}  ${t.attribute}`:i=`${t.attribute}`),(t==null?void 0:t.textAttribute)&&(o=t==null?void 0:t.textAttribute),(t==null?void 0:t.subAttributeText)&&(i+=t==null?void 0:t.subAttributeText),{headerText:i,bottomText:o})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){if(!this.needUpdatePosition)return;const e=MathUtils.default.calcViewportBoundaries(t),i={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},o=lbUtils.ImgPosUtils.getBasicRecPos(this.imgNode,i,this.size,.5);if(o){this.setCurrentPos(o.currentPos),this.setCurrentPosStorage(o.currentPos);const{imgInfo:r}=this,{innerZoom:l}=this.innerPosAndZoom;r&&this.setImgInfo(__spreadProps(__spreadValues({},r),{width:r.width/l*o.innerZoom,height:r.height/l*o.innerZoom})),this.setZoom(o.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=AxisUtils.default.changePointByZoom(t,this.zoom,this.currentPos);DrawUtils.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),DrawUtils.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}renderAttribute(){___default.default.chunk(this.annotations,6).forEach(e=>{var i,o;const r=e.find(c=>c.type==="polygon");if(!r)return;const{fontStyle:l}=this.getRenderStyle(r),n=r.annotation,a=(i=this.pointCloudBoxList)==null?void 0:i.find(c=>c.id===n.id),s=this.hiddenText?"":`${a==null?void 0:a.trackID} ${a==null?void 0:a.attribute}`,d=AxisUtils.default.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos);s&&DrawUtils.drawText(this.canvas,this.appendOffset(d[0]),s,l)})}getRenderStyle(t){const e=this.getSpecificStyle(t.annotation),i=this.getFontStyle(t.annotation,e);return{style:e,fontStyle:i}}renderLine(t){var e,i,o;if(t.type!=="line")return;const{style:r,fontStyle:l}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:a=tool.ELineTypes.Line}=n,s=AxisUtils.default.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos),d=__spreadProps(__spreadValues(__spreadValues({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:a,strokeColor:r.stroke});let c=[];if(n.showKeyPoint?c=DrawUtils.drawPolygonWithKeyPoint(this.canvas,s,d):c=DrawUtils.drawPolygon(this.canvas,s,d),(n==null?void 0:n.showDirection)===!0&&((o=n==null?void 0:n.pointList)==null?void 0:o.length)>=2){let v=s[0],p=MathUtils.default.getLineCenterPoint([s[0],s[1]]);if(a===tool.ELineTypes.Curve){const f=Math.floor(tool.SEGMENT_NUMBER/2);v=c[f],p=c[f+1]}DrawUtils.drawArrowByCanvas(this.canvas,v,p,{color:r.stroke,thickness:r.thickness}),DrawUtils.drawCircle(this.canvas,s[0],r.thickness+6,{color:r.stroke,thickness:r.thickness})}const{headerText:u,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(u&&DrawUtils.drawText(this.canvas,this.appendOffset(s[0]),u,l),y){const v=s[s.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:v.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:v.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),y,l)}}renderPolygon(t){var e,i,o,r,l;if(t.type!=="polygon")return;const{style:n,fontStyle:a}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:d=tool.ELineTypes.Line}=s,c=AxisUtils.default.changePointListByZoom((i=s==null?void 0:s.pointList)!=null?i:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const f=rgba__default.default((r=(o=n==null?void 0:n.fill)!=null?o:n==null?void 0:n.stroke)!=null?r:DEFAULT_STROKE_COLOR),m=`rgba(${f[0]}, ${f[1]}, ${f[2]},${f[3]*.8})`;DrawUtils.drawPolygonWithFill(this.canvas,c,{color:m,lineType:d})}const h=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:d,strokeColor:n.stroke});let u=[];if(s.showKeyPoint?u=DrawUtils.drawPolygonWithKeyPoint(this.canvas,c,h):u=DrawUtils.drawPolygon(this.canvas,c,h),(s==null?void 0:s.showDirection)===!0&&((l=s==null?void 0:s.pointList)==null?void 0:l.length)>=2){let f=c[0],m=MathUtils.default.getLineCenterPoint([c[0],c[1]]);if(d===tool.ELineTypes.Curve){const x=Math.floor(tool.SEGMENT_NUMBER/2);f=u[x],m=u[x+1]}DrawUtils.drawArrowByCanvas(this.canvas,f,m,{color:n.stroke,thickness:n.thickness}),DrawUtils.drawCircle(this.canvas,c[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:v,bottomText:p}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(v&&DrawUtils.drawText(this.canvas,this.appendOffset(c[0]),v,a),p){const f=c[c.length-2];DrawUtils.drawText(this.canvas,this.appendOffset({x:f.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:f.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),p,a)}}renderSingleCuboid(t){var e,i;const{style:o}=this.getRenderStyle(t),r=t.annotation,l=rgba__default.default((i=(e=o==null?void 0:o.fill)!=null?e:o==null?void 0:o.stroke)!=null?i:DEFAULT_STROKE_COLOR),n=`rgba(${l[0]}, ${l[1]}, ${l[2]},${l[3]*.8})`,a=o.stroke,s=AxisUtils.default.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:d,bottomText:c}=this.getRenderText(r,r==null?void 0:r.hiddenText);DrawUtils.drawCuboidWithText(this.canvas,s,{strokeColor:a,fillColor:n,thickness:o.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:d,bottomText:c})}renderBox3d(t){var e;if(t.type!=="box3d")return;const i=t.annotation,{transferViewData:o}=(e=matrix.pointCloudLidar2image(i,i.calib))!=null?e:{};if(!o)return;const r={fill:"transparent"},l=___default.default.pick(i,["stroke","thickness"]);o.forEach((n,a)=>{const s=__spreadValues(__spreadProps(__spreadValues({},l),{id:`${t.annotation.id}-${a}`,pointList:n.pointList}),r);switch(n.type){case"line":this.renderLine({type:"line",annotation:s});break;case"polygon":this.renderPolygon({type:"polygon",annotation:s});break}})}renderPixelPoints(t){var e;if(t.type!=="pixelPoints")return;const i=t.annotation;if(!this.imgNode){console.error("Need to load after imgLoaded");return}if(!(i.length>0)){console.warn("Empty pixelPoints");return}const o=this.imgNode.src+i.length+t.defaultRGBA,r=(e=this.cacheCanvas)==null?void 0:e[o];if(r){DrawUtils.drawImg(this.canvas,r,{zoom:this.zoom,currentPos:this.currentPos});return}const l={width:this.imgNode.width,height:this.imgNode.height},{ctx:n,canvas:a}=CanvasUtils.createCanvas(l),s=typeof t.pixelSize=="number"?t.pixelSize:13;n&&(i==null?void 0:i.length)>0&&(DrawUtils.drawPixel({canvas:a,points:i,size:l,defaultRGBA:t.defaultRGBA,pixelSize:s}),DrawUtils.drawImg(this.canvas,a,{zoom:this.zoom,currentPos:this.currentPos}),this.cacheCanvas={[o]:a})}render(){try{if(this.staticImgNode||(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 i,o,r,l,n,a,s;const d=this.getSpecificStyle(e.annotation),c=this.getFontStyle(e.annotation,d);switch(e.type){case"rect":{const h=e.annotation,{hiddenText:u=!1,isReference:y,hiddenRectSize:v=!1}=h,{zoom:p}=this,f=AxisUtils.default.changeRectByZoom(h,this.zoom,this.currentPos),{x:m,y:x,width:w,height:b}=f,P=rgba__default.default((o=(i=d==null?void 0:d.fill)!=null?i:d==null?void 0:d.stroke)!=null?o:DEFAULT_STROKE_COLOR),C=`rgba(${P[0]}, ${P[1]}, ${P[2]},${P[3]*.8})`;(h.id===this.mouseHoverID||d.fill)&&DrawUtils.drawRectWithFill(this.canvas,f,{color:C}),DrawUtils.drawRect(this.canvas,f,__spreadValues(__spreadProps(__spreadValues({},d),{hiddenText:!0}),this.getReferenceOptions(y))),(h==null?void 0:h.isHighlight)&&DrawUtils.drawHighlightFlag({canvas:this.canvas,color:C,position:{x:m-16,y:x-16}});const{headerText:S,bottomText:T}=this.getRenderText(h,h==null?void 0:h.hiddenText);S&&DrawUtils.drawText(this.canvas,{x:m,y:x-6},S,__spreadValues({textMaxWidth:300},c));const k=`${Math.round(w/p)} * ${Math.round(b/p)}`,I=k.length*7;if(!u&&!v&&DrawUtils.drawText(this.canvas,{x:m+w-I,y:x+b+15},k,c),T){const R=20,E=Math.max(20,w-I);DrawUtils.drawText(this.canvas,{x:m,y:x+b+R},h.textAttribute,__spreadValues({textMaxWidth:E},c))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const h=e.annotation,u=AxisUtils.default.changePointByZoom(h,this.zoom,this.currentPos),y=(r=d.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,u,y,d);const{headerText:v,bottomText:p}=this.getRenderText(h,h==null?void 0:h.hiddenText);v&&DrawUtils.drawText(this.canvas,{x:u.x+y/2,y:u.y-y-4},v,__spreadValues({textAlign:"center"},c)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:u.x+y,y:u.y+y+24}),p,c);break}case"text":{const h=e.annotation,{text:u,x:y,y:v,textMaxWidth:p,color:f="white",background:m="rgba(0, 0, 0, 0.6)",lineHeight:x=25,font:w=tool.DEFAULT_FONT,position:b,offset:P}=h,C=10,S=10,T=AxisUtils.default.changePointByZoom({x:y,y:v},this.zoom,this.currentPos);P&&(T.x+=(l=P.x)!=null?l:0,T.y+=(n=P.y)!=null?n:0);const{width:k,height:I,fontHeight:R=0}=MathUtils.default.getTextArea(this.canvas,h.text,p,w,x);if(b==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:T.x,y:T.y,width:k+S*2,height:I+C*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:m}),DrawUtils.drawText(this.canvas,{x:T.x+S,y:T.y+R+C},u,{color:f,lineHeight:x,font:w,textMaxWidth:p});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}case"pixelPoints":{this.renderPixelPoints(e);break}default:break}"renderEnhance"in e.annotation&&((s=(a=e.annotation).renderEnhance)==null||s.call(a,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this}))}),this.renderConnectionPoints(),this.renderAttribute()}catch(t){console.error("ViewOperation Render Error",t)}}getClickTargetId(t){const e=this.getCoordinateUnderZoom(t),i=AxisUtils.default.changePointByZoom(e,1/this.zoom);for(const o in this.convexHullGroup){if(!Object.prototype.hasOwnProperty.call(this.convexHullGroup,o))continue;const r=this.convexHullGroup[o].convexHull;if(PolygonUtils.isInPolygon(i,r))return o}}}module.exports=ViewOperation;
+"use strict";var lbUtils=require("@labelbee/lb-utils"),_=require("lodash"),rgba=require("color-rgba"),DrawUtils=require("../../utils/tool/DrawUtils.js"),AxisUtils=require("../../utils/tool/AxisUtils.js"),RectUtils=require("../../utils/tool/RectUtils.js"),PolygonUtils=require("../../utils/tool/PolygonUtils.js"),MathUtils=require("../../utils/MathUtils.js"),RenderDomClass=require("../../utils/tool/RenderDomClass.js"),tool=require("../../constant/tool.js"),annotation=require("../../constant/annotation.js"),ImgUtils=require("../../utils/ImgUtils.js"),CanvasUtils=require("../../utils/tool/CanvasUtils.js"),basicToolOperation=require("./basicToolOperation.js"),matrix=require("../pointCloud/matrix.js");function _interopDefaultLegacy(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}var ___default=_interopDefaultLegacy(_),rgba__default=_interopDefaultLegacy(rgba),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(v,t,e)=>t in v?__defProp(v,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):v[t]=e,__spreadValues=(v,t)=>{for(var e in t||(t={}))__hasOwnProp.call(t,e)&&__defNormalProp(v,e,t[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(t))__propIsEnum.call(t,e)&&__defNormalProp(v,e,t[e]);return v},__spreadProps=(v,t)=>__defProps(v,__getOwnPropDescs(t)),__async=(v,t,e)=>new Promise((i,o)=>{var r=a=>{try{n(e.next(a))}catch(s){o(s)}},l=a=>{try{n(e.throw(a))}catch(s){o(s)}},n=a=>a.done?i(a.value):Promise.resolve(a.value).then(r,l);n((e=e.apply(v,t)).next())});const newScope=3,DEFAULT_RADIUS=3,DEFAULT_STROKE_COLOR="#6371FF";class ViewOperation extends basicToolOperation.BasicToolOperation{constructor(t){super(__spreadProps(__spreadValues({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.needUpdatePosition=!0,this.posTimer=null,this.convexHullGroup={},this.pointCloudBoxList=[],this.hiddenText=!1,this.renderToolName=void 0,this.getHoverRectID=i=>{var o,r;const l=this.getCoordinateUnderZoom(i),n=AxisUtils.default.changePointByZoom(l,1/this.zoom);if(((o=this.annotations)==null?void 0:o.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let a="",s=Number.MAX_SAFE_INTEGER;for(let d=0;d<this.annotations.length;d++){const c=this.annotations[d];switch(c.type){case"rect":{const h=c.annotation;if(RectUtils.isInRect(l,h,newScope,this.zoom)){const u=h.width*h.height;u<s&&(a=h.id,s=u)}break}case"polygon":{const h=c.annotation;if(PolygonUtils.isInPolygon(n,h.pointList)){const u=PolygonUtils.getPolygonArea(h.pointList);u<s&&(a=h.id,s=u)}break}}}return a};var e;this.style=(e=t.style)!=null?e:{stroke:DEFAULT_STROKE_COLOR,thickness:3},this.annotations=t.annotations,this.convexHullGroup=PolygonUtils.createConvexHullGroup(t.annotations),this.loading=!1,this.renderDomInstance=new RenderDomClass({container:this.container,height:this.canvas.height}),this.renderToolName=t.renderToolName}clearConnectionPoints(){this.connectionPoints=[],this.render()}checkConnectionPoints(t=this.annotations){var e,i;this.connectPointsStatus&&((i=(e=this.connectPointsStatus).close)==null||i.call(e)),this.emit("connectionPointsStatusUpdate",()=>new Promise(o=>{const{promise:r,close:l}=MathUtils.default.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:l},r.then(n=>{this.connectionPoints=n.connectionPoints,this.render(),this.connectPointsStatus=void 0,o({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 i=[];e&&(i=[e]),this.emit("onChange","selected",i),this.render()}}setImgNode(t,e={}){super.setImgNode(t,e),this.staticMode&&this.generateStaticImgNode()}generateStaticImgNode(){var t,e;const i=ImgUtils.cropAndEnlarge(this.canvas,(t=this.basicImgInfo)==null?void 0:t.width,(e=this.basicImgInfo)==null?void 0:e.height,1);ImgUtils.default.load(i).then(o=>{this.staticImgNode=o,this.drawStaticImg()})}onRightClick(t){const e=this.getClickTargetId(t);this.needUpdatePosition=!1,this.posTimer&&clearTimeout(this.posTimer),this.emit("onRightClick",{event:t,targetId:e}),this.posTimer=setTimeout(()=>{this.needUpdatePosition=!0},1e3)}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const e=this.mouseHoverID,i=this.getHoverRectID(t);if(e!==i){this.mouseHoverID=i;let o=[];i&&(o=[i]),this.emit("onChange","hover",o),this.render()}}updateData(t){return __async(this,null,function*(){if(!___default.default.isEqual(this.annotations,t)&&(this.annotations=t,this.convexHullGroup=PolygonUtils.createConvexHullGroup(t),this.staticMode&&(this.staticImgNode=void 0),this.render(),this.staticMode)){const e=this.zoom,i=this.currentPos;this.initImgPos(),this.generateStaticImgNode();const o=this.staticImgNode;this.staticImgNode=void 0,this.updatePosition({zoom:e,currentPos:i}),this.staticImgNode=o}})}setPointCloudBoxList(t){this.pointCloudBoxList=t}setHiddenText(t){this.hiddenText=t,this.render()}setConfig(t){this.config=t}getSpecificStyle(t){const e=___default.default.pick(t,["stroke","thickness","fill","radius"]),i=__spreadValues(__spreadValues({},this.style),e);return i.stroke&&Object.assign(i,{color:i.stroke}),i}getFontStyle(t,e){var i,o;const r=(i=t==null?void 0:t.fontSize)!=null?i:14,l=(o=t==null?void 0:t.fontFamily)!=null?o:"Arial";return __spreadProps(__spreadValues({},annotation.DEFAULT_TEXT_SHADOW),{color:e.stroke,font:`normal normal 600 ${r}px ${l}`})}appendOffset({x:t,y:e}){return{x:t+annotation.DEFAULT_TEXT_OFFSET.offsetX,y:e+annotation.DEFAULT_TEXT_OFFSET.offsetY}}getRenderText(t,e=!1){let i="",o="";return!t||e===!0?{headerText:i,bottomText:o}:((t==null?void 0:t.order)&&(i=`${t.order}`),(t==null?void 0:t.label)&&(i?i=`${i}_${t.label}`:i=`${t.label}`),(t==null?void 0:t.attribute)&&(i?i=`${i}  ${t.attribute}`:i=`${t.attribute}`),(t==null?void 0:t.textAttribute)&&(o=t==null?void 0:t.textAttribute),(t==null?void 0:t.subAttributeText)&&(i+=t==null?void 0:t.subAttributeText),{headerText:i,bottomText:o})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){if(!this.needUpdatePosition)return;const e=MathUtils.default.calcViewportBoundaries(t),i={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},o=lbUtils.ImgPosUtils.getBasicRecPos(this.imgNode,i,this.size,.5);if(o){this.setCurrentPos(o.currentPos),this.setCurrentPosStorage(o.currentPos);const{imgInfo:r}=this,{innerZoom:l}=this.innerPosAndZoom;r&&this.setImgInfo(__spreadProps(__spreadValues({},r),{width:r.width/l*o.innerZoom,height:r.height/l*o.innerZoom})),this.setZoom(o.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=AxisUtils.default.changePointByZoom(t,this.zoom,this.currentPos);DrawUtils.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),DrawUtils.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}renderPointCloud3DRectAttribute(){___default.default.chunk(this.annotations,6).forEach(e=>{var i,o;const r=e.find(c=>c.type==="polygon");if(!r)return;const{fontStyle:l}=this.getRenderStyle(r),n=r.annotation,a=(i=this.pointCloudBoxList)==null?void 0:i.find(c=>c.id===n.id);if(!a)return;const s=this.hiddenText?"":`${a==null?void 0:a.trackID} ${a==null?void 0:a.attribute}`,d=AxisUtils.default.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos);s&&DrawUtils.drawText(this.canvas,this.appendOffset(d[0]),s,l)})}getRenderStyle(t){const e=this.getSpecificStyle(t.annotation),i=this.getFontStyle(t.annotation,e);return{style:e,fontStyle:i}}renderLine(t){var e,i,o;if(t.type!=="line")return;const{style:r,fontStyle:l}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:a=tool.ELineTypes.Line}=n,s=AxisUtils.default.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos),d=__spreadProps(__spreadValues(__spreadValues({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:a,strokeColor:r.stroke});let c=[];if(n.showKeyPoint?c=DrawUtils.drawPolygonWithKeyPoint(this.canvas,s,d):c=DrawUtils.drawPolygon(this.canvas,s,d),(n==null?void 0:n.showDirection)===!0&&((o=n==null?void 0:n.pointList)==null?void 0:o.length)>=2){let g=s[0],p=MathUtils.default.getLineCenterPoint([s[0],s[1]]);if(a===tool.ELineTypes.Curve){const f=Math.floor(tool.SEGMENT_NUMBER/2);g=c[f],p=c[f+1]}DrawUtils.drawArrowByCanvas(this.canvas,g,p,{color:r.stroke,thickness:r.thickness}),DrawUtils.drawCircle(this.canvas,s[0],r.thickness+6,{color:r.stroke,thickness:r.thickness})}const{headerText:u,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(u&&DrawUtils.drawText(this.canvas,this.appendOffset(s[0]),u,l),y){const g=s[s.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:g.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:g.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),y,l)}}renderPolygon(t){var e,i,o,r,l;if(t.type!=="polygon")return;const{style:n,fontStyle:a}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:d=tool.ELineTypes.Line}=s,c=AxisUtils.default.changePointListByZoom((i=s==null?void 0:s.pointList)!=null?i:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const f=rgba__default.default((r=(o=n==null?void 0:n.fill)!=null?o:n==null?void 0:n.stroke)!=null?r:DEFAULT_STROKE_COLOR),m=`rgba(${f[0]}, ${f[1]}, ${f[2]},${f[3]*.8})`;DrawUtils.drawPolygonWithFill(this.canvas,c,{color:m,lineType:d})}const h=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:d,strokeColor:n.stroke});let u=[];if(s.showKeyPoint?u=DrawUtils.drawPolygonWithKeyPoint(this.canvas,c,h):u=DrawUtils.drawPolygon(this.canvas,c,h),(s==null?void 0:s.showDirection)===!0&&((l=s==null?void 0:s.pointList)==null?void 0:l.length)>=2){let f=c[0],m=MathUtils.default.getLineCenterPoint([c[0],c[1]]);if(d===tool.ELineTypes.Curve){const x=Math.floor(tool.SEGMENT_NUMBER/2);f=u[x],m=u[x+1]}DrawUtils.drawArrowByCanvas(this.canvas,f,m,{color:n.stroke,thickness:n.thickness}),DrawUtils.drawCircle(this.canvas,c[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:g,bottomText:p}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(g&&DrawUtils.drawText(this.canvas,this.appendOffset(c[0]),g,a),p){const f=c[c.length-2];DrawUtils.drawText(this.canvas,this.appendOffset({x:f.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:f.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),p,a)}}renderSingleCuboid(t){var e,i;const{style:o}=this.getRenderStyle(t),r=t.annotation,l=rgba__default.default((i=(e=o==null?void 0:o.fill)!=null?e:o==null?void 0:o.stroke)!=null?i:DEFAULT_STROKE_COLOR),n=`rgba(${l[0]}, ${l[1]}, ${l[2]},${l[3]*.8})`,a=o.stroke,s=AxisUtils.default.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:d,bottomText:c}=this.getRenderText(r,r==null?void 0:r.hiddenText);DrawUtils.drawCuboidWithText(this.canvas,s,{strokeColor:a,fillColor:n,thickness:o.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:d,bottomText:c})}renderBox3d(t){var e;if(t.type!=="box3d")return;const i=t.annotation,{transferViewData:o}=(e=matrix.pointCloudLidar2image(i,i.calib))!=null?e:{};if(!o)return;const r={fill:"transparent"},l=___default.default.pick(i,["stroke","thickness"]);o.forEach((n,a)=>{const s=__spreadValues(__spreadProps(__spreadValues({},l),{id:`${t.annotation.id}-${a}`,pointList:n.pointList}),r);switch(n.type){case"line":this.renderLine({type:"line",annotation:s});break;case"polygon":this.renderPolygon({type:"polygon",annotation:s});break}})}renderPixelPoints(t){var e;if(t.type!=="pixelPoints")return;const i=t.annotation;if(!this.imgNode){console.error("Need to load after imgLoaded");return}if(!(i.length>0)){console.warn("Empty pixelPoints");return}const o=this.imgNode.src+i.length+t.defaultRGBA,r=(e=this.cacheCanvas)==null?void 0:e[o];if(r){DrawUtils.drawImg(this.canvas,r,{zoom:this.zoom,currentPos:this.currentPos});return}const l={width:this.imgNode.width,height:this.imgNode.height},{ctx:n,canvas:a}=CanvasUtils.createCanvas(l),s=typeof t.pixelSize=="number"?t.pixelSize:13;n&&(i==null?void 0:i.length)>0&&(DrawUtils.drawPixel({canvas:a,points:i,size:l,defaultRGBA:t.defaultRGBA,pixelSize:s}),DrawUtils.drawImg(this.canvas,a,{zoom:this.zoom,currentPos:this.currentPos}),this.cacheCanvas={[o]:a})}render(){try{if(this.staticImgNode||(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 i,o,r,l,n,a,s;const d=this.getSpecificStyle(e.annotation),c=this.getFontStyle(e.annotation,d);switch(e.type){case"rect":{const h=e.annotation,{hiddenText:u=!1,isReference:y,hiddenRectSize:g=!1}=h,{zoom:p}=this,f=AxisUtils.default.changeRectByZoom(h,this.zoom,this.currentPos),{x:m,y:x,width:w,height:b}=f,P=rgba__default.default((o=(i=d==null?void 0:d.fill)!=null?i:d==null?void 0:d.stroke)!=null?o:DEFAULT_STROKE_COLOR),C=`rgba(${P[0]}, ${P[1]}, ${P[2]},${P[3]*.8})`;(h.id===this.mouseHoverID||d.fill)&&DrawUtils.drawRectWithFill(this.canvas,f,{color:C}),DrawUtils.drawRect(this.canvas,f,__spreadValues(__spreadProps(__spreadValues({},d),{hiddenText:!0}),this.getReferenceOptions(y))),(h==null?void 0:h.isHighlight)&&DrawUtils.drawHighlightFlag({canvas:this.canvas,color:C,position:{x:m-16,y:x-16}});const{headerText:S,bottomText:T}=this.getRenderText(h,h==null?void 0:h.hiddenText);S&&DrawUtils.drawText(this.canvas,{x:m,y:x-6},S,__spreadValues({textMaxWidth:300},c));const k=`${Math.round(w/p)} * ${Math.round(b/p)}`,I=k.length*7;if(!u&&!g&&DrawUtils.drawText(this.canvas,{x:m+w-I,y:x+b+15},k,c),T){const R=20,D=Math.max(20,w-I);DrawUtils.drawText(this.canvas,{x:m,y:x+b+R},h.textAttribute,__spreadValues({textMaxWidth:D},c))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const h=e.annotation,u=AxisUtils.default.changePointByZoom(h,this.zoom,this.currentPos),y=(r=d.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,u,y,d);const{headerText:g,bottomText:p}=this.getRenderText(h,h==null?void 0:h.hiddenText);g&&DrawUtils.drawText(this.canvas,{x:u.x+y/2,y:u.y-y-4},g,__spreadValues({textAlign:"center"},c)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:u.x+y,y:u.y+y+24}),p,c);break}case"text":{const h=e.annotation,{text:u,x:y,y:g,textMaxWidth:p,color:f="white",background:m="rgba(0, 0, 0, 0.6)",lineHeight:x=25,font:w=tool.DEFAULT_FONT,position:b,offset:P}=h,C=10,S=10,T=AxisUtils.default.changePointByZoom({x:y,y:g},this.zoom,this.currentPos);P&&(T.x+=(l=P.x)!=null?l:0,T.y+=(n=P.y)!=null?n:0);const{width:k,height:I,fontHeight:R=0}=MathUtils.default.getTextArea(this.canvas,h.text,p,w,x);if(b==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:T.x,y:T.y,width:k+S*2,height:I+C*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:m}),DrawUtils.drawText(this.canvas,{x:T.x+S,y:T.y+R+C},u,{color:f,lineHeight:x,font:w,textMaxWidth:p});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}case"pixelPoints":{this.renderPixelPoints(e);break}default:break}"renderEnhance"in e.annotation&&((s=(a=e.annotation).renderEnhance)==null||s.call(a,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this}))}),this.renderConnectionPoints(),this.renderToolName&&this.renderToolName===tool.EPointCloudName.PointCloud&&this.renderPointCloud3DRectAttribute()}catch(t){console.error("ViewOperation Render Error",t)}}getClickTargetId(t){const e=this.getCoordinateUnderZoom(t),i=AxisUtils.default.changePointByZoom(e,1/this.zoom);for(const o in this.convexHullGroup){if(!Object.prototype.hasOwnProperty.call(this.convexHullGroup,o))continue;const r=this.convexHullGroup[o].convexHull;if(PolygonUtils.isInPolygon(i,r))return o}}}module.exports=ViewOperation;

package/dist/types/core/toolOperation/ViewOperation.d.ts

@@ -2,11 +2,13 @@
  * 查看模式 - 支持简单数据注入查看
  */
 import { TAnnotationViewData, TAnnotationViewLine, TAnnotationViewPolygon, TAnnotationViewBox3d, TAnnotationViewPixelPoints, IBasicStyle, TAnnotationViewCuboid, IPointCloudBoxList } from '@labelbee/lb-utils';
+import { EPointCloudName } from '@/constant/tool';
 import { BasicToolOperation, IBasicToolOperationProps } from './basicToolOperation';
 interface IViewOperationProps extends IBasicToolOperationProps {
     style: IBasicStyle;
     staticMode?: boolean;
     annotations: TAnnotationViewData[];
+    renderToolName?: EPointCloudName;
 }
 export interface ISpecificStyle {
     stroke: string;
@@ -32,6 +34,7 @@ export default class ViewOperation extends BasicToolOperation {
     private convexHullGroup;
     private pointCloudBoxList?;
     private hiddenText?;
+    private renderToolName?;
     constructor(props: IViewOperationProps);
     clearConnectionPoints(): void;
     /**
@@ -103,8 +106,9 @@ export default class ViewOperation extends BasicToolOperation {
     /**
      * Separate rendering of sub attribute content
      * The principle is the same as other tools for rendering sub attribute content
+     * Currently, only secondary attributes are being rendered in point cloud rendering
      */
-    renderAttribute(): void;
+    renderPointCloud3DRectAttribute(): void;
     getRenderStyle(annotation: TAnnotationViewData): {
         style: {
             radius: any;

package/es/core/toolOperation/ViewOperation.js

@@ -1 +1 @@
-import{ImgPosUtils as W}from"@labelbee/lb-utils";import B from"lodash";import $ from"color-rgba";import h from"../../utils/tool/DrawUtils.js";import T from"../../utils/tool/AxisUtils.js";import G from"../../utils/tool/RectUtils.js";import D from"../../utils/tool/PolygonUtils.js";import L from"../../utils/MathUtils.js";import V from"../../utils/tool/RenderDomClass.js";import{ELineTypes as E,DEFAULT_FONT as K,SEGMENT_NUMBER as H}from"../../constant/tool.js";import{DEFAULT_TEXT_OFFSET as F,TEXT_ATTRIBUTE_OFFSET as U,DEFAULT_TEXT_SHADOW as X}from"../../constant/annotation.js";import q,{cropAndEnlarge as Y}from"../../utils/ImgUtils.js";import J from"../../utils/tool/CanvasUtils.js";import{BasicToolOperation as Q}from"./basicToolOperation.js";import{pointCloudLidar2image as tt}from"../pointCloud/matrix.js";var et=Object.defineProperty,ot=Object.defineProperties,it=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertySymbols,nt=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable,Z=(x,t,e)=>t in x?et(x,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):x[t]=e,p=(x,t)=>{for(var e in t||(t={}))nt.call(t,e)&&Z(x,e,t[e]);if(N)for(var e of N(t))st.call(t,e)&&Z(x,e,t[e]);return x},_=(x,t)=>ot(x,it(t)),rt=(x,t,e)=>new Promise((o,i)=>{var r=a=>{try{n(e.next(a))}catch(s){i(s)}},l=a=>{try{n(e.throw(a))}catch(s){i(s)}},n=a=>a.done?o(a.value):Promise.resolve(a.value).then(r,l);n((e=e.apply(x,t)).next())});const at=3,lt=3,z="#6371FF";class ct extends Q{constructor(t){super(_(p({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.needUpdatePosition=!0,this.posTimer=null,this.convexHullGroup={},this.pointCloudBoxList=[],this.hiddenText=!1,this.getHoverRectID=o=>{var i,r;const l=this.getCoordinateUnderZoom(o),n=T.changePointByZoom(l,1/this.zoom);if(((i=this.annotations)==null?void 0:i.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let a="",s=Number.MAX_SAFE_INTEGER;for(let u=0;u<this.annotations.length;u++){const c=this.annotations[u];switch(c.type){case"rect":{const d=c.annotation;if(G.isInRect(l,d,at,this.zoom)){const f=d.width*d.height;f<s&&(a=d.id,s=f)}break}case"polygon":{const d=c.annotation;if(D.isInPolygon(n,d.pointList)){const f=D.getPolygonArea(d.pointList);f<s&&(a=d.id,s=f)}break}}}return a};var e;this.style=(e=t.style)!=null?e:{stroke:z,thickness:3},this.annotations=t.annotations,this.convexHullGroup=D.createConvexHullGroup(t.annotations),this.loading=!1,this.renderDomInstance=new V({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:l}=L.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:l},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()}}setImgNode(t,e={}){super.setImgNode(t,e),this.staticMode&&this.generateStaticImgNode()}generateStaticImgNode(){var t,e;const o=Y(this.canvas,(t=this.basicImgInfo)==null?void 0:t.width,(e=this.basicImgInfo)==null?void 0:e.height,1);q.load(o).then(i=>{this.staticImgNode=i,this.drawStaticImg()})}onRightClick(t){const e=this.getClickTargetId(t);this.needUpdatePosition=!1,this.posTimer&&clearTimeout(this.posTimer),this.emit("onRightClick",{event:t,targetId:e}),this.posTimer=setTimeout(()=>{this.needUpdatePosition=!0},1e3)}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){return rt(this,null,function*(){if(!B.isEqual(this.annotations,t)&&(this.annotations=t,this.convexHullGroup=D.createConvexHullGroup(t),this.staticMode&&(this.staticImgNode=void 0),this.render(),this.staticMode)){const e=this.zoom,o=this.currentPos;this.initImgPos(),this.generateStaticImgNode();const i=this.staticImgNode;this.staticImgNode=void 0,this.updatePosition({zoom:e,currentPos:o}),this.staticImgNode=i}})}setPointCloudBoxList(t){this.pointCloudBoxList=t}setHiddenText(t){this.hiddenText=t,this.render()}setConfig(t){this.config=t}getSpecificStyle(t){const e=B.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,l=(i=t==null?void 0:t.fontFamily)!=null?i:"Arial";return _(p({},X),{color:e.stroke,font:`normal normal 600 ${r}px ${l}`})}appendOffset({x:t,y:e}){return{x:t+F.offsetX,y:e+F.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),(t==null?void 0:t.subAttributeText)&&(o+=t==null?void 0:t.subAttributeText),{headerText:o,bottomText:i})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){if(!this.needUpdatePosition)return;const e=L.calcViewportBoundaries(t),o={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},i=W.getBasicRecPos(this.imgNode,o,this.size,.5);if(i){this.setCurrentPos(i.currentPos),this.setCurrentPosStorage(i.currentPos);const{imgInfo:r}=this,{innerZoom:l}=this.innerPosAndZoom;r&&this.setImgInfo(_(p({},r),{width:r.width/l*i.innerZoom,height:r.height/l*i.innerZoom})),this.setZoom(i.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=T.changePointByZoom(t,this.zoom,this.currentPos);h.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),h.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}renderAttribute(){B.chunk(this.annotations,6).forEach(e=>{var o,i;const r=e.find(c=>c.type==="polygon");if(!r)return;const{fontStyle:l}=this.getRenderStyle(r),n=r.annotation,a=(o=this.pointCloudBoxList)==null?void 0:o.find(c=>c.id===n.id),s=this.hiddenText?"":`${a==null?void 0:a.trackID} ${a==null?void 0:a.attribute}`,u=T.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos);s&&h.drawText(this.canvas,this.appendOffset(u[0]),s,l)})}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:l}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:a=E.Line}=n,s=T.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos),u=_(p(p({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:a,strokeColor:r.stroke});let c=[];if(n.showKeyPoint?c=h.drawPolygonWithKeyPoint(this.canvas,s,u):c=h.drawPolygon(this.canvas,s,u),(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=L.getLineCenterPoint([s[0],s[1]]);if(a===E.Curve){const g=Math.floor(H/2);v=c[g],m=c[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,l),y){const v=s[s.length-1];h.drawText(this.canvas,this.appendOffset({x:v.x+U.x,y:v.y+U.y}),y,l)}}renderPolygon(t){var e,o,i,r,l;if(t.type!=="polygon")return;const{style:n,fontStyle:a}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:u=E.Line}=s,c=T.changePointListByZoom((o=s==null?void 0:s.pointList)!=null?o:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const g=$((r=(i=n==null?void 0:n.fill)!=null?i:n==null?void 0:n.stroke)!=null?r:z),P=`rgba(${g[0]}, ${g[1]}, ${g[2]},${g[3]*.8})`;h.drawPolygonWithFill(this.canvas,c,{color:P,lineType:u})}const d=_(p(_(p({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:u,strokeColor:n.stroke});let f=[];if(s.showKeyPoint?f=h.drawPolygonWithKeyPoint(this.canvas,c,d):f=h.drawPolygon(this.canvas,c,d),(s==null?void 0:s.showDirection)===!0&&((l=s==null?void 0:s.pointList)==null?void 0:l.length)>=2){let g=c[0],P=L.getLineCenterPoint([c[0],c[1]]);if(u===E.Curve){const w=Math.floor(H/2);g=f[w],P=f[w+1]}h.drawArrowByCanvas(this.canvas,g,P,{color:n.stroke,thickness:n.thickness}),h.drawCircle(this.canvas,c[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(c[0]),v,a),m){const g=c[c.length-2];h.drawText(this.canvas,this.appendOffset({x:g.x+U.x,y:g.y+U.y}),m,a)}}renderSingleCuboid(t){var e,o;const{style:i}=this.getRenderStyle(t),r=t.annotation,l=$((o=(e=i==null?void 0:i.fill)!=null?e:i==null?void 0:i.stroke)!=null?o:z),n=`rgba(${l[0]}, ${l[1]}, ${l[2]},${l[3]*.8})`,a=i.stroke,s=T.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:u,bottomText:c}=this.getRenderText(r,r==null?void 0:r.hiddenText);h.drawCuboidWithText(this.canvas,s,{strokeColor:a,fillColor:n,thickness:i.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:u,bottomText:c})}renderBox3d(t){var e;if(t.type!=="box3d")return;const o=t.annotation,{transferViewData:i}=(e=tt(o,o.calib))!=null?e:{};if(!i)return;const r={fill:"transparent"},l=B.pick(o,["stroke","thickness"]);i.forEach((n,a)=>{const s=p(_(p({},l),{id:`${t.annotation.id}-${a}`,pointList:n.pointList}),r);switch(n.type){case"line":this.renderLine({type:"line",annotation:s});break;case"polygon":this.renderPolygon({type:"polygon",annotation:s});break}})}renderPixelPoints(t){var e;if(t.type!=="pixelPoints")return;const o=t.annotation;if(!this.imgNode){console.error("Need to load after imgLoaded");return}if(!(o.length>0)){console.warn("Empty pixelPoints");return}const i=this.imgNode.src+o.length+t.defaultRGBA,r=(e=this.cacheCanvas)==null?void 0:e[i];if(r){h.drawImg(this.canvas,r,{zoom:this.zoom,currentPos:this.currentPos});return}const l={width:this.imgNode.width,height:this.imgNode.height},{ctx:n,canvas:a}=J.createCanvas(l),s=typeof t.pixelSize=="number"?t.pixelSize:13;n&&(o==null?void 0:o.length)>0&&(h.drawPixel({canvas:a,points:o,size:l,defaultRGBA:t.defaultRGBA,pixelSize:s}),h.drawImg(this.canvas,a,{zoom:this.zoom,currentPos:this.currentPos}),this.cacheCanvas={[i]:a})}render(){try{if(this.staticImgNode||(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,l,n,a,s;const u=this.getSpecificStyle(e.annotation),c=this.getFontStyle(e.annotation,u);switch(e.type){case"rect":{const d=e.annotation,{hiddenText:f=!1,isReference:y,hiddenRectSize:v=!1}=d,{zoom:m}=this,g=T.changeRectByZoom(d,this.zoom,this.currentPos),{x:P,y:w,width:k,height:S}=g,b=$((i=(o=u==null?void 0:u.fill)!=null?o:u==null?void 0:u.stroke)!=null?i:z),I=`rgba(${b[0]}, ${b[1]}, ${b[2]},${b[3]*.8})`;(d.id===this.mouseHoverID||u.fill)&&h.drawRectWithFill(this.canvas,g,{color:I}),h.drawRect(this.canvas,g,p(_(p({},u),{hiddenText:!0}),this.getReferenceOptions(y))),(d==null?void 0:d.isHighlight)&&h.drawHighlightFlag({canvas:this.canvas,color:I,position:{x:P-16,y:w-16}});const{headerText:R,bottomText:C}=this.getRenderText(d,d==null?void 0:d.hiddenText);R&&h.drawText(this.canvas,{x:P,y:w-6},R,p({textMaxWidth:300},c));const O=`${Math.round(k/m)} * ${Math.round(S/m)}`,A=O.length*7;if(!f&&!v&&h.drawText(this.canvas,{x:P+k-A,y:w+S+15},O,c),C){const M=20,j=Math.max(20,k-A);h.drawText(this.canvas,{x:P,y:w+S+M},d.textAttribute,p({textMaxWidth:j},c))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const d=e.annotation,f=T.changePointByZoom(d,this.zoom,this.currentPos),y=(r=u.radius)!=null?r:lt;h.drawCircle(this.canvas,f,y,u);const{headerText:v,bottomText:m}=this.getRenderText(d,d==null?void 0:d.hiddenText);v&&h.drawText(this.canvas,{x:f.x+y/2,y:f.y-y-4},v,p({textAlign:"center"},c)),m&&h.drawText(this.canvas,this.appendOffset({x:f.x+y,y:f.y+y+24}),m,c);break}case"text":{const d=e.annotation,{text:f,x:y,y:v,textMaxWidth:m,color:g="white",background:P="rgba(0, 0, 0, 0.6)",lineHeight:w=25,font:k=K,position:S,offset:b}=d,I=10,R=10,C=T.changePointByZoom({x:y,y:v},this.zoom,this.currentPos);b&&(C.x+=(l=b.x)!=null?l:0,C.y+=(n=b.y)!=null?n:0);const{width:O,height:A,fontHeight:M=0}=L.getTextArea(this.canvas,d.text,m,k,w);if(S==="rt")break;h.drawRectWithFill(this.canvas,{x:C.x,y:C.y,width:O+R*2,height:A+I*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:P}),h.drawText(this.canvas,{x:C.x+R,y:C.y+M+I},f,{color:g,lineHeight:w,font:k,textMaxWidth:m});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}case"pixelPoints":{this.renderPixelPoints(e);break}default:break}"renderEnhance"in e.annotation&&((s=(a=e.annotation).renderEnhance)==null||s.call(a,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this}))}),this.renderConnectionPoints(),this.renderAttribute()}catch(t){console.error("ViewOperation Render Error",t)}}getClickTargetId(t){const e=this.getCoordinateUnderZoom(t),o=T.changePointByZoom(e,1/this.zoom);for(const i in this.convexHullGroup){if(!Object.prototype.hasOwnProperty.call(this.convexHullGroup,i))continue;const r=this.convexHullGroup[i].convexHull;if(D.isInPolygon(o,r))return i}}}export{ct as default};
+import{ImgPosUtils as W}from"@labelbee/lb-utils";import B from"lodash";import N from"color-rgba";import h from"../../utils/tool/DrawUtils.js";import T from"../../utils/tool/AxisUtils.js";import G from"../../utils/tool/RectUtils.js";import D from"../../utils/tool/PolygonUtils.js";import L from"../../utils/MathUtils.js";import V from"../../utils/tool/RenderDomClass.js";import{ELineTypes as E,DEFAULT_FONT as K,EPointCloudName as X,SEGMENT_NUMBER as $}from"../../constant/tool.js";import{DEFAULT_TEXT_OFFSET as H,TEXT_ATTRIBUTE_OFFSET as U,DEFAULT_TEXT_SHADOW as q}from"../../constant/annotation.js";import Y,{cropAndEnlarge as J}from"../../utils/ImgUtils.js";import Q from"../../utils/tool/CanvasUtils.js";import{BasicToolOperation as tt}from"./basicToolOperation.js";import{pointCloudLidar2image as et}from"../pointCloud/matrix.js";var ot=Object.defineProperty,it=Object.defineProperties,nt=Object.getOwnPropertyDescriptors,F=Object.getOwnPropertySymbols,st=Object.prototype.hasOwnProperty,rt=Object.prototype.propertyIsEnumerable,Z=(x,t,e)=>t in x?ot(x,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):x[t]=e,p=(x,t)=>{for(var e in t||(t={}))st.call(t,e)&&Z(x,e,t[e]);if(F)for(var e of F(t))rt.call(t,e)&&Z(x,e,t[e]);return x},_=(x,t)=>it(x,nt(t)),at=(x,t,e)=>new Promise((o,i)=>{var r=a=>{try{n(e.next(a))}catch(s){i(s)}},l=a=>{try{n(e.throw(a))}catch(s){i(s)}},n=a=>a.done?o(a.value):Promise.resolve(a.value).then(r,l);n((e=e.apply(x,t)).next())});const lt=3,ct=3,z="#6371FF";class ht extends tt{constructor(t){super(_(p({},t),{showDefaultCursor:!0}));this.style={},this.annotations=[],this.connectionPoints=[],this.needUpdatePosition=!0,this.posTimer=null,this.convexHullGroup={},this.pointCloudBoxList=[],this.hiddenText=!1,this.renderToolName=void 0,this.getHoverRectID=o=>{var i,r;const l=this.getCoordinateUnderZoom(o),n=T.changePointByZoom(l,1/this.zoom);if(((i=this.annotations)==null?void 0:i.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let a="",s=Number.MAX_SAFE_INTEGER;for(let u=0;u<this.annotations.length;u++){const c=this.annotations[u];switch(c.type){case"rect":{const d=c.annotation;if(G.isInRect(l,d,lt,this.zoom)){const f=d.width*d.height;f<s&&(a=d.id,s=f)}break}case"polygon":{const d=c.annotation;if(D.isInPolygon(n,d.pointList)){const f=D.getPolygonArea(d.pointList);f<s&&(a=d.id,s=f)}break}}}return a};var e;this.style=(e=t.style)!=null?e:{stroke:z,thickness:3},this.annotations=t.annotations,this.convexHullGroup=D.createConvexHullGroup(t.annotations),this.loading=!1,this.renderDomInstance=new V({container:this.container,height:this.canvas.height}),this.renderToolName=t.renderToolName}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:l}=L.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:l},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()}}setImgNode(t,e={}){super.setImgNode(t,e),this.staticMode&&this.generateStaticImgNode()}generateStaticImgNode(){var t,e;const o=J(this.canvas,(t=this.basicImgInfo)==null?void 0:t.width,(e=this.basicImgInfo)==null?void 0:e.height,1);Y.load(o).then(i=>{this.staticImgNode=i,this.drawStaticImg()})}onRightClick(t){const e=this.getClickTargetId(t);this.needUpdatePosition=!1,this.posTimer&&clearTimeout(this.posTimer),this.emit("onRightClick",{event:t,targetId:e}),this.posTimer=setTimeout(()=>{this.needUpdatePosition=!0},1e3)}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){return at(this,null,function*(){if(!B.isEqual(this.annotations,t)&&(this.annotations=t,this.convexHullGroup=D.createConvexHullGroup(t),this.staticMode&&(this.staticImgNode=void 0),this.render(),this.staticMode)){const e=this.zoom,o=this.currentPos;this.initImgPos(),this.generateStaticImgNode();const i=this.staticImgNode;this.staticImgNode=void 0,this.updatePosition({zoom:e,currentPos:o}),this.staticImgNode=i}})}setPointCloudBoxList(t){this.pointCloudBoxList=t}setHiddenText(t){this.hiddenText=t,this.render()}setConfig(t){this.config=t}getSpecificStyle(t){const e=B.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,l=(i=t==null?void 0:t.fontFamily)!=null?i:"Arial";return _(p({},q),{color:e.stroke,font:`normal normal 600 ${r}px ${l}`})}appendOffset({x:t,y:e}){return{x:t+H.offsetX,y:e+H.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),(t==null?void 0:t.subAttributeText)&&(o+=t==null?void 0:t.subAttributeText),{headerText:o,bottomText:i})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){if(!this.needUpdatePosition)return;const e=L.calcViewportBoundaries(t),o={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},i=W.getBasicRecPos(this.imgNode,o,this.size,.5);if(i){this.setCurrentPos(i.currentPos),this.setCurrentPosStorage(i.currentPos);const{imgInfo:r}=this,{innerZoom:l}=this.innerPosAndZoom;r&&this.setImgInfo(_(p({},r),{width:r.width/l*i.innerZoom,height:r.height/l*i.innerZoom})),this.setZoom(i.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=T.changePointByZoom(t,this.zoom,this.currentPos);h.drawCircleWithFill(this.canvas,e,4,{color:"#fff"}),h.drawCircleWithFill(this.canvas,e,2,{color:"#000"})})}renderPointCloud3DRectAttribute(){B.chunk(this.annotations,6).forEach(e=>{var o,i;const r=e.find(c=>c.type==="polygon");if(!r)return;const{fontStyle:l}=this.getRenderStyle(r),n=r.annotation,a=(o=this.pointCloudBoxList)==null?void 0:o.find(c=>c.id===n.id);if(!a)return;const s=this.hiddenText?"":`${a==null?void 0:a.trackID} ${a==null?void 0:a.attribute}`,u=T.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos);s&&h.drawText(this.canvas,this.appendOffset(u[0]),s,l)})}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:l}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:a=E.Line}=n,s=T.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos),u=_(p(p({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:a,strokeColor:r.stroke});let c=[];if(n.showKeyPoint?c=h.drawPolygonWithKeyPoint(this.canvas,s,u):c=h.drawPolygon(this.canvas,s,u),(n==null?void 0:n.showDirection)===!0&&((i=n==null?void 0:n.pointList)==null?void 0:i.length)>=2){let m=s[0],v=L.getLineCenterPoint([s[0],s[1]]);if(a===E.Curve){const g=Math.floor($/2);m=c[g],v=c[g+1]}h.drawArrowByCanvas(this.canvas,m,v,{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,l),y){const m=s[s.length-1];h.drawText(this.canvas,this.appendOffset({x:m.x+U.x,y:m.y+U.y}),y,l)}}renderPolygon(t){var e,o,i,r,l;if(t.type!=="polygon")return;const{style:n,fontStyle:a}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:u=E.Line}=s,c=T.changePointListByZoom((o=s==null?void 0:s.pointList)!=null?o:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const g=N((r=(i=n==null?void 0:n.fill)!=null?i:n==null?void 0:n.stroke)!=null?r:z),P=`rgba(${g[0]}, ${g[1]}, ${g[2]},${g[3]*.8})`;h.drawPolygonWithFill(this.canvas,c,{color:P,lineType:u})}const d=_(p(_(p({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:u,strokeColor:n.stroke});let f=[];if(s.showKeyPoint?f=h.drawPolygonWithKeyPoint(this.canvas,c,d):f=h.drawPolygon(this.canvas,c,d),(s==null?void 0:s.showDirection)===!0&&((l=s==null?void 0:s.pointList)==null?void 0:l.length)>=2){let g=c[0],P=L.getLineCenterPoint([c[0],c[1]]);if(u===E.Curve){const w=Math.floor($/2);g=f[w],P=f[w+1]}h.drawArrowByCanvas(this.canvas,g,P,{color:n.stroke,thickness:n.thickness}),h.drawCircle(this.canvas,c[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:m,bottomText:v}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(m&&h.drawText(this.canvas,this.appendOffset(c[0]),m,a),v){const g=c[c.length-2];h.drawText(this.canvas,this.appendOffset({x:g.x+U.x,y:g.y+U.y}),v,a)}}renderSingleCuboid(t){var e,o;const{style:i}=this.getRenderStyle(t),r=t.annotation,l=N((o=(e=i==null?void 0:i.fill)!=null?e:i==null?void 0:i.stroke)!=null?o:z),n=`rgba(${l[0]}, ${l[1]}, ${l[2]},${l[3]*.8})`,a=i.stroke,s=T.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:u,bottomText:c}=this.getRenderText(r,r==null?void 0:r.hiddenText);h.drawCuboidWithText(this.canvas,s,{strokeColor:a,fillColor:n,thickness:i.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:u,bottomText:c})}renderBox3d(t){var e;if(t.type!=="box3d")return;const o=t.annotation,{transferViewData:i}=(e=et(o,o.calib))!=null?e:{};if(!i)return;const r={fill:"transparent"},l=B.pick(o,["stroke","thickness"]);i.forEach((n,a)=>{const s=p(_(p({},l),{id:`${t.annotation.id}-${a}`,pointList:n.pointList}),r);switch(n.type){case"line":this.renderLine({type:"line",annotation:s});break;case"polygon":this.renderPolygon({type:"polygon",annotation:s});break}})}renderPixelPoints(t){var e;if(t.type!=="pixelPoints")return;const o=t.annotation;if(!this.imgNode){console.error("Need to load after imgLoaded");return}if(!(o.length>0)){console.warn("Empty pixelPoints");return}const i=this.imgNode.src+o.length+t.defaultRGBA,r=(e=this.cacheCanvas)==null?void 0:e[i];if(r){h.drawImg(this.canvas,r,{zoom:this.zoom,currentPos:this.currentPos});return}const l={width:this.imgNode.width,height:this.imgNode.height},{ctx:n,canvas:a}=Q.createCanvas(l),s=typeof t.pixelSize=="number"?t.pixelSize:13;n&&(o==null?void 0:o.length)>0&&(h.drawPixel({canvas:a,points:o,size:l,defaultRGBA:t.defaultRGBA,pixelSize:s}),h.drawImg(this.canvas,a,{zoom:this.zoom,currentPos:this.currentPos}),this.cacheCanvas={[i]:a})}render(){try{if(this.staticImgNode||(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,l,n,a,s;const u=this.getSpecificStyle(e.annotation),c=this.getFontStyle(e.annotation,u);switch(e.type){case"rect":{const d=e.annotation,{hiddenText:f=!1,isReference:y,hiddenRectSize:m=!1}=d,{zoom:v}=this,g=T.changeRectByZoom(d,this.zoom,this.currentPos),{x:P,y:w,width:k,height:S}=g,b=N((i=(o=u==null?void 0:u.fill)!=null?o:u==null?void 0:u.stroke)!=null?i:z),I=`rgba(${b[0]}, ${b[1]}, ${b[2]},${b[3]*.8})`;(d.id===this.mouseHoverID||u.fill)&&h.drawRectWithFill(this.canvas,g,{color:I}),h.drawRect(this.canvas,g,p(_(p({},u),{hiddenText:!0}),this.getReferenceOptions(y))),(d==null?void 0:d.isHighlight)&&h.drawHighlightFlag({canvas:this.canvas,color:I,position:{x:P-16,y:w-16}});const{headerText:R,bottomText:C}=this.getRenderText(d,d==null?void 0:d.hiddenText);R&&h.drawText(this.canvas,{x:P,y:w-6},R,p({textMaxWidth:300},c));const O=`${Math.round(k/v)} * ${Math.round(S/v)}`,A=O.length*7;if(!f&&!m&&h.drawText(this.canvas,{x:P+k-A,y:w+S+15},O,c),C){const M=20,j=Math.max(20,k-A);h.drawText(this.canvas,{x:P,y:w+S+M},d.textAttribute,p({textMaxWidth:j},c))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const d=e.annotation,f=T.changePointByZoom(d,this.zoom,this.currentPos),y=(r=u.radius)!=null?r:ct;h.drawCircle(this.canvas,f,y,u);const{headerText:m,bottomText:v}=this.getRenderText(d,d==null?void 0:d.hiddenText);m&&h.drawText(this.canvas,{x:f.x+y/2,y:f.y-y-4},m,p({textAlign:"center"},c)),v&&h.drawText(this.canvas,this.appendOffset({x:f.x+y,y:f.y+y+24}),v,c);break}case"text":{const d=e.annotation,{text:f,x:y,y:m,textMaxWidth:v,color:g="white",background:P="rgba(0, 0, 0, 0.6)",lineHeight:w=25,font:k=K,position:S,offset:b}=d,I=10,R=10,C=T.changePointByZoom({x:y,y:m},this.zoom,this.currentPos);b&&(C.x+=(l=b.x)!=null?l:0,C.y+=(n=b.y)!=null?n:0);const{width:O,height:A,fontHeight:M=0}=L.getTextArea(this.canvas,d.text,v,k,w);if(S==="rt")break;h.drawRectWithFill(this.canvas,{x:C.x,y:C.y,width:O+R*2,height:A+I*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:P}),h.drawText(this.canvas,{x:C.x+R,y:C.y+M+I},f,{color:g,lineHeight:w,font:k,textMaxWidth:v});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}case"pixelPoints":{this.renderPixelPoints(e);break}default:break}"renderEnhance"in e.annotation&&((s=(a=e.annotation).renderEnhance)==null||s.call(a,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this}))}),this.renderConnectionPoints(),this.renderToolName&&this.renderToolName===X.PointCloud&&this.renderPointCloud3DRectAttribute()}catch(t){console.error("ViewOperation Render Error",t)}}getClickTargetId(t){const e=this.getCoordinateUnderZoom(t),o=T.changePointByZoom(e,1/this.zoom);for(const i in this.convexHullGroup){if(!Object.prototype.hasOwnProperty.call(this.convexHullGroup,i))continue;const r=this.convexHullGroup[i].convexHull;if(D.isInPolygon(o,r))return i}}}export{ht as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-annotation",
-  "version": "1.27.0-alpha.67",
+  "version": "1.27.0-alpha.69",
   "description": "Annotation tool collection",
   "keywords": [
     "annotation",
@@ -94,7 +94,7 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@labelbee/lb-utils": "1.19.0-alpha.26",
+    "@labelbee/lb-utils": "1.19.0-alpha.27",
     "@turf/turf": "5.1.6",
     "color-rgba": "^2.3.0",
     "lodash": "^4.17.20",