@labelbee/lb-annotation 1.27.0-alpha.14 → 1.27.0-alpha.16

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(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{s(e.next(a))}catch(n){o(n)}},c=a=>{try{s(e.throw(a))}catch(n){o(n)}},s=a=>a.done?i(a.value):Promise.resolve(a.value).then(r,c);s((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.getHoverRectID=i=>{var o,r;const c=this.getCoordinateUnderZoom(i),s=AxisUtils.default.changePointByZoom(c,1/this.zoom);if(((o=this.annotations)==null?void 0:o.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let a="",n=Number.MAX_SAFE_INTEGER;for(let h=0;h<this.annotations.length;h++){const l=this.annotations[h];switch(l.type){case"rect":{const d=l.annotation;if(RectUtils.isInRect(c,d,newScope,this.zoom)){const f=d.width*d.height;f<n&&(a=d.id,n=f)}break}case"polygon":{const d=l.annotation;if(PolygonUtils.isInPolygon(s,d.pointList)){const f=PolygonUtils.getPolygonArea(d.pointList);f<n&&(a=d.id,n=f)}break}}}return a};var e;this.style=(e=t.style)!=null?e:{stroke:DEFAULT_STROKE_COLOR,thickness:3},this.annotations=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:c}=MathUtils.default.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:c},r.then(s=>{this.connectionPoints=s.connectionPoints,this.render(),this.connectPointsStatus=void 0,o({connectionPoints:s.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()})}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.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}})}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,c=(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 ${c}`})}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),{headerText:i,bottomText:o})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){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:c}=this.innerPosAndZoom;r&&this.setImgInfo(__spreadProps(__spreadValues({},r),{width:r.width/c*o.innerZoom,height:r.height/c*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"})})}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:c}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=2))return;const{lineType:a=tool.ELineTypes.Line}=s,n=AxisUtils.default.changePointListByZoom((i=s==null?void 0:s.pointList)!=null?i:[],this.zoom,this.currentPos),h=__spreadProps(__spreadValues(__spreadValues({},r),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:a,strokeColor:r.stroke});let l=[];if(s.showKeyPoint?l=DrawUtils.drawPolygonWithKeyPoint(this.canvas,n,h):l=DrawUtils.drawPolygon(this.canvas,n,h),(s==null?void 0:s.showDirection)===!0&&((o=s==null?void 0:s.pointList)==null?void 0:o.length)>=2){let g=n[0],y=MathUtils.default.getLineCenterPoint([n[0],n[1]]);if(a===tool.ELineTypes.Curve){const u=Math.floor(tool.SEGMENT_NUMBER/2);g=l[u],y=l[u+1]}DrawUtils.drawArrowByCanvas(this.canvas,g,y,{color:r.stroke,thickness:r.thickness}),DrawUtils.drawCircle(this.canvas,n[0],r.thickness+6,{color:r.stroke,thickness:r.thickness})}const{headerText:f,bottomText:p}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(f&&DrawUtils.drawText(this.canvas,this.appendOffset(n[0]),f,c),p){const g=n[n.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:g.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:g.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),p,c)}}renderPolygon(t){var e,i,o,r,c;if(t.type!=="polygon")return;const{style:s,fontStyle:a}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=3))return;const{lineType:h=tool.ELineTypes.Line}=n,l=AxisUtils.default.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos);if(n.id===this.mouseHoverID||s.fill){const u=rgba__default.default((r=(o=s==null?void 0:s.fill)!=null?o:s==null?void 0:s.stroke)!=null?r:DEFAULT_STROKE_COLOR),m=`rgba(${u[0]}, ${u[1]}, ${u[2]},${u[3]*.8})`;DrawUtils.drawPolygonWithFill(this.canvas,l,{color:m,lineType:h})}const d=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},s),{isClose:!0}),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:h,strokeColor:s.stroke});let f=[];if(n.showKeyPoint?f=DrawUtils.drawPolygonWithKeyPoint(this.canvas,l,d):f=DrawUtils.drawPolygon(this.canvas,l,d),(n==null?void 0:n.showDirection)===!0&&((c=n==null?void 0:n.pointList)==null?void 0:c.length)>=2){let u=l[0],m=MathUtils.default.getLineCenterPoint([l[0],l[1]]);if(h===tool.ELineTypes.Curve){const P=Math.floor(tool.SEGMENT_NUMBER/2);u=f[P],m=f[P+1]}DrawUtils.drawArrowByCanvas(this.canvas,u,m,{color:s.stroke,thickness:s.thickness}),DrawUtils.drawCircle(this.canvas,l[0],s.thickness+6,{color:s.stroke,thickness:s.thickness})}const{headerText:g,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(g&&DrawUtils.drawText(this.canvas,this.appendOffset(l[0]),g,a),y){const u=l[l.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:u.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:u.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),y,a)}}renderSingleCuboid(t){var e,i;const{style:o}=this.getRenderStyle(t),r=t.annotation,c=rgba__default.default((i=(e=o==null?void 0:o.fill)!=null?e:o==null?void 0:o.stroke)!=null?i:DEFAULT_STROKE_COLOR),s=`rgba(${c[0]}, ${c[1]}, ${c[2]},${c[3]*.8})`,a=o.stroke,n=AxisUtils.default.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:h,bottomText:l}=this.getRenderText(r,r==null?void 0:r.hiddenText);DrawUtils.drawCuboidWithText(this.canvas,n,{strokeColor:a,fillColor:s,thickness:o.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:h,bottomText:l})}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"},c=___default.default.pick(i,["stroke","thickness"]);o.forEach((s,a)=>{const n=__spreadValues(__spreadProps(__spreadValues({},c),{id:`${t.annotation.id}-${a}`,pointList:s.pointList}),r);switch(s.type){case"line":this.renderLine({type:"line",annotation:n});break;case"polygon":this.renderPolygon({type:"polygon",annotation:n});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 c={width:this.imgNode.width,height:this.imgNode.height},{ctx:s,canvas:a}=CanvasUtils.createCanvas(c),n=typeof t.pixelSize=="number"?t.pixelSize:13;s&&(i==null?void 0:i.length)>0&&(DrawUtils.drawPixel({canvas:a,points:i,size:c,defaultRGBA:t.defaultRGBA,pixelSize:n}),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,c,s;const a=this.getSpecificStyle(e.annotation),n=this.getFontStyle(e.annotation,a);switch(e.type){case"rect":{const h=e.annotation,{hiddenText:l=!1,isReference:d,hiddenRectSize:f=!1}=h,{zoom:p}=this,g=AxisUtils.default.changeRectByZoom(h,this.zoom,this.currentPos),{x:y,y:u,width:m,height:P}=g,x=rgba__default.default((o=(i=a==null?void 0:a.fill)!=null?i:a==null?void 0:a.stroke)!=null?o:DEFAULT_STROKE_COLOR),w=`rgba(${x[0]}, ${x[1]}, ${x[2]},${x[3]*.8})`;(h.id===this.mouseHoverID||a.fill)&&DrawUtils.drawRectWithFill(this.canvas,g,{color:w}),DrawUtils.drawRect(this.canvas,g,__spreadValues(__spreadProps(__spreadValues({},a),{hiddenText:!0}),this.getReferenceOptions(d))),(h==null?void 0:h.isHighlight)&&DrawUtils.drawHighlightFlag({canvas:this.canvas,color:w,position:{x:y-16,y:u-16}});const{headerText:T,bottomText:I}=this.getRenderText(h,h==null?void 0:h.hiddenText);T&&DrawUtils.drawText(this.canvas,{x:y,y:u-6},T,__spreadValues({textMaxWidth:300},n));const b=`${Math.round(m/p)} * ${Math.round(P/p)}`,S=b.length*7;if(!l&&!f&&DrawUtils.drawText(this.canvas,{x:y+m-S,y:u+P+15},b,n),I){const k=20,C=Math.max(20,m-S);DrawUtils.drawText(this.canvas,{x:y,y:u+P+k},h.textAttribute,__spreadValues({textMaxWidth:C},n))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const h=e.annotation,l=AxisUtils.default.changePointByZoom(h,this.zoom,this.currentPos),d=(r=a.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,l,d,a);const{headerText:f,bottomText:p}=this.getRenderText(h,h==null?void 0:h.hiddenText);f&&DrawUtils.drawText(this.canvas,{x:l.x+d/2,y:l.y-d-4},f,__spreadValues({textAlign:"center"},n)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:l.x+d,y:l.y+d+24}),p,n);break}case"text":{const h=e.annotation,{text:l,x:d,y:f,textMaxWidth:p,color:g="white",background:y="rgba(0, 0, 0, 0.6)",lineHeight:u=25,font:m=tool.DEFAULT_FONT,position:P}=h,x=10,w=10,T=AxisUtils.default.changePointByZoom({x:d,y:f},this.zoom,this.currentPos),{width:I,height:b,fontHeight:S=0}=MathUtils.default.getTextArea(this.canvas,h.text,p,m,u);if(P==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:T.x,y:T.y,width:I+w*2,height:b+x*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:y}),DrawUtils.drawText(this.canvas,{x:T.x+w,y:T.y+S+x},l,{color:g,lineHeight:u,font:m,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=(c=e.annotation).renderEnhance)==null||s.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)}}}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(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=c=>{try{n(e.next(c))}catch(s){o(s)}},a=c=>{try{n(e.throw(c))}catch(s){o(s)}},n=c=>c.done?i(c.value):Promise.resolve(c.value).then(r,a);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.getHoverRectID=i=>{var o,r;const a=this.getCoordinateUnderZoom(i),n=AxisUtils.default.changePointByZoom(a,1/this.zoom);if(((o=this.annotations)==null?void 0:o.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let c="",s=Number.MAX_SAFE_INTEGER;for(let u=0;u<this.annotations.length;u++){const h=this.annotations[u];switch(h.type){case"rect":{const l=h.annotation;if(RectUtils.isInRect(a,l,newScope,this.zoom)){const d=l.width*l.height;d<s&&(c=l.id,s=d)}break}case"polygon":{const l=h.annotation;if(PolygonUtils.isInPolygon(n,l.pointList)){const d=PolygonUtils.getPolygonArea(l.pointList);d<s&&(c=l.id,s=d)}break}}}return c};var e;this.style=(e=t.style)!=null?e:{stroke:DEFAULT_STROKE_COLOR,thickness:3},this.annotations=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:a}=MathUtils.default.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:a},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()})}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.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}})}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,a=(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 ${a}`})}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),{headerText:i,bottomText:o})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){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:a}=this.innerPosAndZoom;r&&this.setImgInfo(__spreadProps(__spreadValues({},r),{width:r.width/a*o.innerZoom,height:r.height/a*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"})})}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:a}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:c=tool.ELineTypes.Line}=n,s=AxisUtils.default.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos),u=__spreadProps(__spreadValues(__spreadValues({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:c,strokeColor:r.stroke});let h=[];if(n.showKeyPoint?h=DrawUtils.drawPolygonWithKeyPoint(this.canvas,s,u):h=DrawUtils.drawPolygon(this.canvas,s,u),(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(c===tool.ELineTypes.Curve){const f=Math.floor(tool.SEGMENT_NUMBER/2);v=h[f],p=h[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:d,bottomText:y}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(d&&DrawUtils.drawText(this.canvas,this.appendOffset(s[0]),d,a),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,a)}}renderPolygon(t){var e,i,o,r,a;if(t.type!=="polygon")return;const{style:n,fontStyle:c}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:u=tool.ELineTypes.Line}=s,h=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,h,{color:m,lineType:u})}const l=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:u,strokeColor:n.stroke});let d=[];if(s.showKeyPoint?d=DrawUtils.drawPolygonWithKeyPoint(this.canvas,h,l):d=DrawUtils.drawPolygon(this.canvas,h,l),(s==null?void 0:s.showDirection)===!0&&((a=s==null?void 0:s.pointList)==null?void 0:a.length)>=2){let f=h[0],m=MathUtils.default.getLineCenterPoint([h[0],h[1]]);if(u===tool.ELineTypes.Curve){const x=Math.floor(tool.SEGMENT_NUMBER/2);f=d[x],m=d[x+1]}DrawUtils.drawArrowByCanvas(this.canvas,f,m,{color:n.stroke,thickness:n.thickness}),DrawUtils.drawCircle(this.canvas,h[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(h[0]),v,c),p){const f=h[h.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:f.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:f.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),p,c)}}renderSingleCuboid(t){var e,i;const{style:o}=this.getRenderStyle(t),r=t.annotation,a=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(${a[0]}, ${a[1]}, ${a[2]},${a[3]*.8})`,c=o.stroke,s=AxisUtils.default.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:u,bottomText:h}=this.getRenderText(r,r==null?void 0:r.hiddenText);DrawUtils.drawCuboidWithText(this.canvas,s,{strokeColor:c,fillColor:n,thickness:o.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:u,bottomText:h})}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"},a=___default.default.pick(i,["stroke","thickness"]);o.forEach((n,c)=>{const s=__spreadValues(__spreadProps(__spreadValues({},a),{id:`${t.annotation.id}-${c}`,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 a={width:this.imgNode.width,height:this.imgNode.height},{ctx:n,canvas:c}=CanvasUtils.createCanvas(a),s=typeof t.pixelSize=="number"?t.pixelSize:13;n&&(i==null?void 0:i.length)>0&&(DrawUtils.drawPixel({canvas:c,points:i,size:a,defaultRGBA:t.defaultRGBA,pixelSize:s}),DrawUtils.drawImg(this.canvas,c,{zoom:this.zoom,currentPos:this.currentPos}),this.cacheCanvas={[o]:c})}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,a,n,c,s;const u=this.getSpecificStyle(e.annotation),h=this.getFontStyle(e.annotation,u);switch(e.type){case"rect":{const l=e.annotation,{hiddenText:d=!1,isReference:y,hiddenRectSize:v=!1}=l,{zoom:p}=this,f=AxisUtils.default.changeRectByZoom(l,this.zoom,this.currentPos),{x:m,y:x,width:w,height:b}=f,P=rgba__default.default((o=(i=u==null?void 0:u.fill)!=null?i:u==null?void 0:u.stroke)!=null?o:DEFAULT_STROKE_COLOR),S=`rgba(${P[0]}, ${P[1]}, ${P[2]},${P[3]*.8})`;(l.id===this.mouseHoverID||u.fill)&&DrawUtils.drawRectWithFill(this.canvas,f,{color:S}),DrawUtils.drawRect(this.canvas,f,__spreadValues(__spreadProps(__spreadValues({},u),{hiddenText:!0}),this.getReferenceOptions(y))),(l==null?void 0:l.isHighlight)&&DrawUtils.drawHighlightFlag({canvas:this.canvas,color:S,position:{x:m-16,y:x-16}});const{headerText:I,bottomText:T}=this.getRenderText(l,l==null?void 0:l.hiddenText);I&&DrawUtils.drawText(this.canvas,{x:m,y:x-6},I,__spreadValues({textMaxWidth:300},h));const k=`${Math.round(w/p)} * ${Math.round(b/p)}`,C=k.length*7;if(!d&&!v&&DrawUtils.drawText(this.canvas,{x:m+w-C,y:x+b+15},k,h),T){const E=20,R=Math.max(20,w-C);DrawUtils.drawText(this.canvas,{x:m,y:x+b+E},l.textAttribute,__spreadValues({textMaxWidth:R},h))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const l=e.annotation,d=AxisUtils.default.changePointByZoom(l,this.zoom,this.currentPos),y=(r=u.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,d,y,u);const{headerText:v,bottomText:p}=this.getRenderText(l,l==null?void 0:l.hiddenText);v&&DrawUtils.drawText(this.canvas,{x:d.x+y/2,y:d.y-y-4},v,__spreadValues({textAlign:"center"},h)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:d.x+y,y:d.y+y+24}),p,h);break}case"text":{const l=e.annotation,{text:d,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}=l,S=10,I=10,T=AxisUtils.default.changePointByZoom({x:y,y:v},this.zoom,this.currentPos);P&&(T.x+=(a=P.x)!=null?a:0,T.y+=(n=P.y)!=null?n:0);const{width:k,height:C,fontHeight:E=0}=MathUtils.default.getTextArea(this.canvas,l.text,p,w,x);if(b==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:T.x,y:T.y,width:k+I*2,height:C+S*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:m}),DrawUtils.drawText(this.canvas,{x:T.x+I,y:T.y+E+S},d,{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=(c=e.annotation).renderEnhance)==null||s.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)}}}module.exports=ViewOperation;

package/es/core/toolOperation/ViewOperation.js

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

package/package.json

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