@labelbee/lb-annotation 1.12.0-alpha.9 → 1.12.1

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/dist/utils/ImgUtils.js

@@ -1 +1 @@
-"use strict";class ImgUtils{static load(s){return new Promise((o,t)=>{const e=new Image;s.startsWith("file")?e.src=encodeURI(s):e.src=s,e.onload=()=>{o(e)},e.onerror=()=>{t(e)}})}}module.exports=ImgUtils;
+"use strict";class ImgUtils{static load(s){return new Promise((o,r)=>{const e=new Image;e.crossOrigin="anonymous",s.startsWith("file")?e.src=encodeURI(s):e.src=s,e.onload=()=>{o(e)},e.onerror=()=>{r(e)}})}}module.exports=ImgUtils;

package/es/assets/attributeIcon/icon_cuboidFAB.svg.js

@@ -0,0 +1,3 @@
+var cuboidFAB = "<svg width=\"27\" height=\"27\" viewBox=\"0 0 27 27\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n        d=\"M13.5525 3.01367C7.75439 3.01367 3.03467 7.73076 3.03467 13.5289C3.0373 19.3297 7.75439 24.0468 13.5525 24.0468C19.3507 24.0468 24.0678 19.3297 24.0678 13.5315C24.0678 7.7334 19.3507 3.01367 13.5525 3.01367ZM19.3085 15.9072V15.9521C19.3085 15.9652 19.3059 15.9784 19.3059 15.9942C19.3059 16.0021 19.3059 16.0101 19.3032 16.018C19.3032 16.0312 19.3006 16.0443 19.2979 16.0575C19.2979 16.0654 19.2953 16.076 19.2953 16.0839C19.2927 16.0944 19.2927 16.105 19.29 16.1155C19.2874 16.1261 19.2848 16.1393 19.2848 16.1498C19.2821 16.1577 19.2821 16.1656 19.2795 16.1709C19.2769 16.1867 19.2716 16.2025 19.2689 16.2184C19.2689 16.221 19.2663 16.2236 19.2663 16.2263C19.2083 16.4504 19.0923 16.664 18.9156 16.8406L15.8386 19.9177C15.3112 20.445 14.449 20.445 13.9243 19.9177C13.397 19.3903 13.397 18.5281 13.9243 18.0034L14.6863 17.2414H9.14922C8.40303 17.2414 7.79394 16.6323 7.79394 15.8861C7.79394 15.1399 8.40303 14.5309 9.14922 14.5309H17.9559C18.3039 14.5309 18.652 14.6627 18.9156 14.9264C19.1793 15.19 19.3111 15.5381 19.3111 15.8861C19.3111 15.894 19.3085 15.902 19.3085 15.9072ZM19.3111 11.1743C19.3111 11.9205 18.7021 12.5296 17.9559 12.5296H9.14922C8.80117 12.5296 8.45312 12.3978 8.18945 12.1341C7.92578 11.8704 7.79394 11.5224 7.79394 11.1743V11.1532V11.111C7.79394 11.0979 7.79658 11.082 7.79658 11.0688C7.79658 11.0609 7.79658 11.053 7.79922 11.0451C7.79922 11.0319 7.80186 11.0187 7.80449 11.0056C7.80449 10.9977 7.80713 10.9871 7.80713 10.9792C7.80977 10.9687 7.80976 10.9581 7.8124 10.9476C7.81504 10.937 7.81768 10.9238 7.81768 10.9133C7.82031 10.9054 7.82031 10.8975 7.82295 10.8922C7.82559 10.8764 7.83086 10.8605 7.8335 10.8447C7.8335 10.8421 7.83613 10.8395 7.83613 10.8368C7.89414 10.6127 8.01016 10.3991 8.18682 10.2225L11.2612 7.14805C11.7886 6.6207 12.6508 6.6207 13.1755 7.14805C13.7028 7.67539 13.7028 8.5376 13.1755 9.0623L12.4187 9.82168H17.9559C18.6994 9.82168 19.3111 10.4308 19.3111 11.1743Z\"\n        fill=\"#2C7EFF\" />\n</svg>";
+
+export { cuboidFAB as default };

package/es/assets/attributeIcon/icon_cuboidLeft.svg.js

@@ -0,0 +1,3 @@
+var cuboidLeft = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n        d=\"M16.425 5.04961C16.35 4.82461 16.2 4.67461 15.975 4.59961L9.525 1.14961C9.225 0.999609 8.85 0.999609 8.55 1.14961L2.025 4.59961C1.725 4.74961 1.5 5.12461 1.5 5.49961V12.2496C1.5 12.6246 1.725 12.9996 2.025 13.1496L8.475 16.5996C8.7 16.6746 8.925 16.7496 9.15 16.6746C9.225 16.6746 9.375 16.5996 9.45 16.5996L15.9 13.1496C16.275 12.9996 16.5 12.6246 16.5 12.2496V5.49961C16.5 5.34961 16.425 5.19961 16.425 5.04961ZM9.15 8.87461V15.2496L9 15.3996L2.85 12.0996V5.64961L9 2.34961L15.15 5.64961L9.15 8.87461Z\"\n        fill=\"#2C7EFF\" />\n    <path d=\"M9 8.5V2.5L8.5 2L2.5 5.5V12.5L9 8.5Z\" fill=\"#2C7EFF\" />\n    <path d=\"M15.5 6L15 5.5L14.5 6L9 8.5V15.5H9.5L15.5 12.5V6Z\" fill=\"white\" />\n</svg>";
+
+export { cuboidLeft as default };

package/es/assets/attributeIcon/icon_cuboidMore.svg.js

@@ -0,0 +1,3 @@
+var cuboidMore = "<svg width=\"16\" height=\"4\" viewBox=\"0 0 16 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"#2C7EFF\" />\n    <circle cx=\"8\" cy=\"2\" r=\"2\" fill=\"#2C7EFF\" />\n    <circle cx=\"14\" cy=\"2\" r=\"2\" fill=\"#2C7EFF\" />\n</svg>";
+
+export { cuboidMore as default };

package/es/assets/attributeIcon/icon_cuboidRight.svg.js

@@ -0,0 +1,3 @@
+var cuboidRight = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n        d=\"M16.425 5.04961C16.35 4.82461 16.2 4.67461 15.975 4.59961L9.525 1.14961C9.225 0.999609 8.85 0.999609 8.55 1.14961L2.025 4.59961C1.725 4.74961 1.5 5.12461 1.5 5.49961V12.2496C1.5 12.6246 1.725 12.9996 2.025 13.1496L8.475 16.5996C8.7 16.6746 8.925 16.7496 9.15 16.6746C9.225 16.6746 9.375 16.5996 9.45 16.5996L15.9 13.1496C16.275 12.9996 16.5 12.6246 16.5 12.2496V5.49961C16.5 5.34961 16.425 5.19961 16.425 5.04961ZM9.15 8.87461V15.2496L9 15.3996L2.85 12.0996V5.64961L9 2.34961L15.15 5.64961L9.15 8.87461Z\"\n        fill=\"#2C7EFF\" />\n</svg>";
+
+export { cuboidRight as default };

package/es/assets/attributeIcon/icon_cuboidTop.svg.js

@@ -0,0 +1,3 @@
+var cuboidTop = "<svg width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g clip-path=\"url(#clip0_2295_37199)\">\n        <path\n            d=\"M5.16087 7.8398C5.00351 8.01726 4.94861 8.22216 4.99615 8.45452L5.23337 15.7654C5.25346 16.1002 5.44096 16.4249 5.72087 16.6098L11.9712 20.5356C12.2511 20.7204 12.6883 20.7277 13.0131 20.5402L18.8587 17.1652C19.1835 16.9777 19.3958 16.5954 19.3757 16.2606L19.1385 8.94971C19.0909 8.71735 19.0434 8.485 18.8659 8.32764C18.8284 8.26269 18.6885 8.17029 18.651 8.10533L12.4382 4.24447C12.1208 3.99471 11.6835 3.98735 11.3587 4.17485L5.51308 7.54985C5.38317 7.62485 5.29077 7.7648 5.16087 7.8398ZM12.1109 12.2276L17.6318 9.04014L17.8367 9.09505L18.0538 16.0711L12.468 19.2961L6.5351 15.62L6.31798 8.64399L12.1109 12.2276Z\"\n            fill=\"#2C7EFF\" />\n    </g>\n    <defs>\n        <clipPath id=\"clip0_2295_37199\">\n            <rect width=\"18\" height=\"18\" fill=\"white\" transform=\"translate(9 24.5898) rotate(-120)\" />\n        </clipPath>\n    </defs>\n</svg>";
+
+export { cuboidTop as default };

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};