@labelbee/lb-annotation 1.20.0-alpha.3 → 1.20.0-alpha.4

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));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 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 c="",s=Number.MAX_SAFE_INTEGER;for(let h=0;h<this.annotations.length;h++){const a=this.annotations[h];switch(a.type){case"rect":{const d=a.annotation;if(RectUtils.isInRect(l,d,newScope,this.zoom)){const u=d.width*d.height;u<s&&(c=d.id,s=u)}break}case"polygon":{const d=a.annotation;if(PolygonUtils.isInPolygon(n,d.pointList)){const u=PolygonUtils.getPolygonArea(d.pointList);u<s&&(c=d.id,s=u)}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: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()})}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){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,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),{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: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"})})}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:c=tool.ELineTypes.Line}=n,s=AxisUtils.default.changePointListByZoom((i=n==null?void 0:n.pointList)!=null?i:[],this.zoom,this.currentPos),h=__spreadProps(__spreadValues(__spreadValues({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:c,strokeColor:r.stroke});let a=[];if(n.showKeyPoint?a=DrawUtils.drawPolygonWithKeyPoint(this.canvas,s,h):a=DrawUtils.drawPolygon(this.canvas,s,h),(n==null?void 0:n.showDirection)===!0&&((o=n==null?void 0:n.pointList)==null?void 0:o.length)>=2){let v=s[0],y=MathUtils.default.getLineCenterPoint([s[0],s[1]]);if(c===tool.ELineTypes.Curve){const f=Math.floor(tool.SEGMENT_NUMBER/2);v=a[f],y=a[f+1]}DrawUtils.drawArrowByCanvas(this.canvas,v,y,{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:p}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(u&&DrawUtils.drawText(this.canvas,this.appendOffset(s[0]),u,l),p){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}),p,l)}}renderPolygon(t){var e,i,o,r,l;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:h=tool.ELineTypes.Line}=s,a=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,a,{color:m,lineType:h})}const d=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:h,strokeColor:n.stroke});let u=[];if(s.showKeyPoint?u=DrawUtils.drawPolygonWithKeyPoint(this.canvas,a,d):u=DrawUtils.drawPolygon(this.canvas,a,d),(s==null?void 0:s.showDirection)===!0&&((l=s==null?void 0:s.pointList)==null?void 0:l.length)>=2){let f=a[0],m=MathUtils.default.getLineCenterPoint([a[0],a[1]]);if(h===tool.ELineTypes.Curve){const P=Math.floor(tool.SEGMENT_NUMBER/2);f=u[P],m=u[P+1]}DrawUtils.drawArrowByCanvas(this.canvas,f,m,{color:n.stroke,thickness:n.thickness}),DrawUtils.drawCircle(this.canvas,a[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:v,bottomText:y}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(v&&DrawUtils.drawText(this.canvas,this.appendOffset(a[0]),v,c),y){const f=a[a.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:f.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:f.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),y,c)}}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})`,c=o.stroke,s=AxisUtils.default.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:h,bottomText:a}=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:h,bottomText:a})}renderBox3d(t){if(t.type!=="box3d")return;const e=t.annotation,{transferViewData:i}=matrix.pointCloudLidar2image(e,e.calib),o={fill:"transparent"},r=___default.default.pick(e,["stroke","thickness"]);i.forEach((l,n)=>{const c=__spreadValues(__spreadProps(__spreadValues({},r),{id:`${t.annotation.id}-${n}`,pointList:l.pointList}),o);switch(l.type){case"line":this.renderLine({type:"line",annotation:c});break;case"polygon":this.renderPolygon({type:"polygon",annotation:c});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:c}=CanvasUtils.createCanvas(l);n&&(i==null?void 0:i.length)>0&&(DrawUtils.drawPixel({canvas:c,points:i,size:l,defaultRGBA:t.defaultRGBA,pixelSize:13}),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,l,n;const c=this.getSpecificStyle(e.annotation),s=this.getFontStyle(e.annotation,c);switch(e.type){case"rect":{const h=e.annotation,{hiddenText:a=!1,isReference:d,hiddenRectSize:u=!1}=h,{zoom:p}=this,v=AxisUtils.default.changeRectByZoom(h,this.zoom,this.currentPos),{x:y,y:f,width:m,height:P}=v;if(h.id===this.mouseHoverID||c.fill){const x=rgba__default.default((o=(i=c==null?void 0:c.fill)!=null?i:c==null?void 0:c.stroke)!=null?o:DEFAULT_STROKE_COLOR),b=`rgba(${x[0]}, ${x[1]}, ${x[2]},${x[3]*.8})`;DrawUtils.drawRectWithFill(this.canvas,v,{color:b})}DrawUtils.drawRect(this.canvas,v,__spreadValues(__spreadProps(__spreadValues({},c),{hiddenText:!0}),this.getReferenceOptions(d)));const{headerText:w,bottomText:S}=this.getRenderText(h,h==null?void 0:h.hiddenText);w&&DrawUtils.drawText(this.canvas,{x:y,y:f-6},w,__spreadValues({textMaxWidth:300},s));const T=`${Math.round(m/p)} * ${Math.round(P/p)}`,I=T.length*7;if(!a&&!u&&DrawUtils.drawText(this.canvas,{x:y+m-I,y:f+P+15},T,s),S){const x=20,b=Math.max(20,m-I);DrawUtils.drawText(this.canvas,{x:y,y:f+P+x},h.textAttribute,__spreadValues({textMaxWidth:b},s))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const h=e.annotation,a=AxisUtils.default.changePointByZoom(h,this.zoom,this.currentPos),d=(r=c.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,a,d,c);const{headerText:u,bottomText:p}=this.getRenderText(h,h==null?void 0:h.hiddenText);u&&DrawUtils.drawText(this.canvas,{x:a.x+d/2,y:a.y-d-4},u,__spreadValues({textAlign:"center"},s)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:a.x+d,y:a.y+d+24}),p,s);break}case"text":{const h=e.annotation,{text:a,x:d,y:u,textMaxWidth:p,color:v="white",background:y="rgba(0, 0, 0, 0.6)",lineHeight:f=25,font:m=tool.DEFAULT_FONT,position:P}=h,w=10,S=10,T=AxisUtils.default.changePointByZoom({x:d,y:u},this.zoom,this.currentPos),{width:I,height:x,fontHeight:b=0}=MathUtils.default.getTextArea(this.canvas,h.text,p,m,f);if(P==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:T.x,y:T.y,width:I+S*2,height:x+w*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:y}),DrawUtils.drawText(this.canvas,{x:T.x+S,y:T.y+b+w},a,{color:v,lineHeight:f,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&&((n=(l=e.annotation).renderEnhance)==null||n.call(l,{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(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.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 h=0;h<this.annotations.length;h++){const c=this.annotations[h];switch(c.type){case"rect":{const d=c.annotation;if(RectUtils.isInRect(l,d,newScope,this.zoom)){const u=d.width*d.height;u<s&&(a=d.id,s=u)}break}case"polygon":{const d=c.annotation;if(PolygonUtils.isInPolygon(n,d.pointList)){const u=PolygonUtils.getPolygonArea(d.pointList);u<s&&(a=d.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.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()})}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,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),{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: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"})})}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),h=__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,h):c=DrawUtils.drawPolygon(this.canvas,s,h),(n==null?void 0:n.showDirection)===!0&&((o=n==null?void 0:n.pointList)==null?void 0:o.length)>=2){let g=s[0],y=MathUtils.default.getLineCenterPoint([s[0],s[1]]);if(a===tool.ELineTypes.Curve){const f=Math.floor(tool.SEGMENT_NUMBER/2);g=c[f],y=c[f+1]}DrawUtils.drawArrowByCanvas(this.canvas,g,y,{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:p}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(u&&DrawUtils.drawText(this.canvas,this.appendOffset(s[0]),u,l),p){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}),p,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:h=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:h})}const d=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:h,strokeColor:n.stroke});let u=[];if(s.showKeyPoint?u=DrawUtils.drawPolygonWithKeyPoint(this.canvas,c,d):u=DrawUtils.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 f=c[0],m=MathUtils.default.getLineCenterPoint([c[0],c[1]]);if(h===tool.ELineTypes.Curve){const P=Math.floor(tool.SEGMENT_NUMBER/2);f=u[P],m=u[P+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:y}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(g&&DrawUtils.drawText(this.canvas,this.appendOffset(c[0]),g,a),y){const f=c[c.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:f.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:f.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),y,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:h,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:h,bottomText:c})}renderBox3d(t){if(t.type!=="box3d")return;const e=t.annotation,{transferViewData:i}=matrix.pointCloudLidar2image(e,e.calib),o={fill:"transparent"},r=___default.default.pick(e,["stroke","thickness"]);i.forEach((l,n)=>{const a=__spreadValues(__spreadProps(__spreadValues({},r),{id:`${t.annotation.id}-${n}`,pointList:l.pointList}),o);switch(l.type){case"line":this.renderLine({type:"line",annotation:a});break;case"polygon":this.renderPolygon({type:"polygon",annotation:a});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;const a=this.getSpecificStyle(e.annotation),s=this.getFontStyle(e.annotation,a);switch(e.type){case"rect":{const h=e.annotation,{hiddenText:c=!1,isReference:d,hiddenRectSize:u=!1}=h,{zoom:p}=this,g=AxisUtils.default.changeRectByZoom(h,this.zoom,this.currentPos),{x:y,y:f,width:m,height:P}=g;if(h.id===this.mouseHoverID||a.fill){const 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),b=`rgba(${x[0]}, ${x[1]}, ${x[2]},${x[3]*.8})`;DrawUtils.drawRectWithFill(this.canvas,g,{color:b})}DrawUtils.drawRect(this.canvas,g,__spreadValues(__spreadProps(__spreadValues({},a),{hiddenText:!0}),this.getReferenceOptions(d)));const{headerText:w,bottomText:S}=this.getRenderText(h,h==null?void 0:h.hiddenText);w&&DrawUtils.drawText(this.canvas,{x:y,y:f-6},w,__spreadValues({textMaxWidth:300},s));const T=`${Math.round(m/p)} * ${Math.round(P/p)}`,I=T.length*7;if(!c&&!u&&DrawUtils.drawText(this.canvas,{x:y+m-I,y:f+P+15},T,s),S){const x=20,b=Math.max(20,m-I);DrawUtils.drawText(this.canvas,{x:y,y:f+P+x},h.textAttribute,__spreadValues({textMaxWidth:b},s))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const h=e.annotation,c=AxisUtils.default.changePointByZoom(h,this.zoom,this.currentPos),d=(r=a.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,c,d,a);const{headerText:u,bottomText:p}=this.getRenderText(h,h==null?void 0:h.hiddenText);u&&DrawUtils.drawText(this.canvas,{x:c.x+d/2,y:c.y-d-4},u,__spreadValues({textAlign:"center"},s)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:c.x+d,y:c.y+d+24}),p,s);break}case"text":{const h=e.annotation,{text:c,x:d,y:u,textMaxWidth:p,color:g="white",background:y="rgba(0, 0, 0, 0.6)",lineHeight:f=25,font:m=tool.DEFAULT_FONT,position:P}=h,w=10,S=10,T=AxisUtils.default.changePointByZoom({x:d,y:u},this.zoom,this.currentPos),{width:I,height:x,fontHeight:b=0}=MathUtils.default.getTextArea(this.canvas,h.text,p,m,f);if(P==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:T.x,y:T.y,width:I+S*2,height:x+w*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:y}),DrawUtils.drawText(this.canvas,{x:T.x+S,y:T.y+b+w},c,{color:g,lineHeight:f,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&&((n=(l=e.annotation).renderEnhance)==null||n.call(l,{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/dist/types/core/toolOperation/ViewOperation.d.ts

@@ -41,10 +41,15 @@ export default class ViewOperation extends BasicToolOperation {
         valid: boolean;
         rotate: number;
     }>): void;
+    /**
+     * TODO: New Pattern.
+     *
+     * 1. crop the canvas.
+     */
     generateStaticImgNode(): void;
     onMouseMove(e: MouseEvent): void;
     getHoverRectID: (e: MouseEvent) => string | undefined;
-    updateData(annotations: TAnnotationViewData[]): void;
+    updateData(annotations: TAnnotationViewData[]): Promise<void>;
     /**
      * 获取当前结果的标注类型
      * @param obj

package/es/core/toolOperation/ViewOperation.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-annotation",
-  "version": "1.20.0-alpha.3",
+  "version": "1.20.0-alpha.4",
   "description": "Annotation tool collection",
   "keywords": [
     "annotation",
@@ -94,7 +94,7 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@labelbee/lb-utils": "1.13.0-alpha.3",
+    "@labelbee/lb-utils": "1.13.0-alpha.4",
     "@turf/turf": "5.1.6",
     "color-rgba": "^2.3.0",
     "lodash": "^4.17.20",