@labelbee/lb-annotation 1.13.0-alpha.4 → 1.13.0-alpha.5

package/dist/core/toolOperation/ViewOperation.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-annotation",
-  "version": "1.13.0-alpha.4",
+  "version": "1.13.0-alpha.5",
   "description": "Annotation tool collection",
   "keywords": [
     "annotation",
@@ -92,11 +92,11 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@labelbee/lb-utils": "^1.6.0-alpha.4",
+    "@labelbee/lb-utils": "^1.6.0-alpha.5",
     "@turf/turf": "5.1.6",
     "color-rgba": "^2.3.0",
     "lodash": "^4.17.20",
     "three": ">=0.141.0"
   },
-  "gitHead": "9a348d54c0c974d871839d71271cc2f91249a4c3"
+  "gitHead": "4b65cf4fc97a570f3e73b7654450e334b8210a4e"
 }