@labelbee/lb-annotation 1.14.0-alpha.2 → 1.14.0-alpha.3

package/dist/core/toolOperation/ViewOperation.js

@@ -1 +1,556 @@
-"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=o=>{var i,r;const c=this.getCoordinateUnderZoom(o),n=AxisUtils.default.changePointByZoom(c,1/this.zoom);if(((i=this.annotations)==null?void 0:i.length)<=0||!((r=this.annotations)==null?void 0:r.length))return;let h="",s=Number.MAX_SAFE_INTEGER;for(let l=0;l<this.annotations.length;l++){const a=this.annotations[l];switch(a.type){case"rect":{const d=a.annotation;if(RectUtils.isInRect(c,d,newScope,this.zoom)){const u=d.width*d.height;u<s&&(h=d.id,s=u)}break}case"polygon":{const d=a.annotation;if(PolygonUtils.isInPolygon(n,d.pointList)){const u=PolygonUtils.getPolygonArea(d.pointList);u<s&&(h=d.id,s=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,o;this.connectPointsStatus&&((o=(e=this.connectPointsStatus).close)==null||o.call(e)),this.emit("connectionPointsStatusUpdate",()=>new Promise(i=>{const{promise:r,close:c}=MathUtils.default.getCollectionPointByAnnotationDataPromise(t);this.connectPointsStatus={close:c},r.then(n=>{this.connectionPoints=n.connectionPoints,this.render(),this.connectPointsStatus=void 0,i({connectionPoints:n.connectionPoints})})}))}setLoading(t){this.loading=t,this.render()}onMouseLeave(){super.onMouseLeave(),this.mouseHoverID=void 0,this.emit("onChange","hover",[])}onMouseDown(t){if(super.onMouseDown(t)||this.forbidMouseOperation||!this.imgInfo)return!0;const e=this.mouseHoverID;if(t.button===0){let o=[];e&&(o=[e]),this.emit("onChange","selected",o),this.render()}}onMouseMove(t){if(super.onMouseMove(t)||this.forbidMouseOperation||!this.imgInfo)return;const e=this.mouseHoverID,o=this.getHoverRectID(t);if(e!==o){this.mouseHoverID=o;let i=[];o&&(i=[o]),this.emit("onChange","hover",i),this.render()}}updateData(t){this.annotations=t,this.render()}getSpecificStyle(t){const e=___default.default.pick(t,["stroke","thickness","fill","radius"]),o=__spreadValues(__spreadValues({},this.style),e);return o.stroke&&Object.assign(o,{color:o.stroke}),o}getFontStyle(t,e){var o,i;const r=(o=t==null?void 0:t.fontSize)!=null?o:14,c=(i=t==null?void 0:t.fontFamily)!=null?i:"Arial";return __spreadProps(__spreadValues({},annotation.DEFAULT_TEXT_SHADOW),{color:e.stroke,font:`normal normal 600 ${r}px ${c}`})}appendOffset({x:t,y:e}){return{x:t+annotation.DEFAULT_TEXT_OFFSET.offsetX,y:e+annotation.DEFAULT_TEXT_OFFSET.offsetY}}getRenderText(t,e=!1){let o="",i="";return!t||e===!0?{headerText:o,bottomText:i}:((t==null?void 0:t.order)&&(o=`${t.order}`),(t==null?void 0:t.label)&&(o?o=`${o}_${t.label}`:o=`${t.label}`),(t==null?void 0:t.attribute)&&(o?o=`${o}  ${t.attribute}`:o=`${t.attribute}`),(t==null?void 0:t.textAttribute)&&(i=t==null?void 0:t.textAttribute),{headerText:o,bottomText:i})}getReferenceOptions(t){return t?{lineCap:"butt",lineDash:[20,20]}:{}}focusPositionByPointList(t){const e=MathUtils.default.calcViewportBoundaries(t),o={x:e.left,y:e.top,width:e.right-e.left,height:e.bottom-e.top},i=ImgPosUtils.getBasicRecPos(this.imgNode,o,this.size,.5);if(i){this.setCurrentPos(i.currentPos),this.setCurrentPosStorage(i.currentPos);const{imgInfo:r}=this,{innerZoom:c}=this.innerPosAndZoom;r&&this.setImgInfo(__spreadProps(__spreadValues({},r),{width:r.width/c*i.innerZoom,height:r.height/c*i.innerZoom})),this.setZoom(i.innerZoom),this.render(),this.renderBasicCanvas()}}renderConnectionPoints(){this.connectionPoints.forEach(t=>{const e=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),o=this.getFontStyle(t.annotation,e);return{style:e,fontStyle:o}}renderLine(t){var e,o,i;if(t.type!=="line")return;const{style:r,fontStyle:c}=this.getRenderStyle(t),n=t.annotation;if(!(((e=n==null?void 0:n.pointList)==null?void 0:e.length)>=2))return;const{lineType:h=tool.ELineTypes.Line}=n,s=AxisUtils.default.changePointListByZoom((o=n==null?void 0:n.pointList)!=null?o:[],this.zoom,this.currentPos),l=__spreadProps(__spreadValues(__spreadValues({},r),this.getReferenceOptions(n==null?void 0:n.isReference)),{lineType:h,strokeColor:r.stroke});let a=[];if(n.showKeyPoint?a=DrawUtils.drawPolygonWithKeyPoint(this.canvas,s,l):a=DrawUtils.drawPolygon(this.canvas,s,l),(n==null?void 0:n.showDirection)===!0&&((i=n==null?void 0:n.pointList)==null?void 0:i.length)>=2){let g=s[0],y=MathUtils.default.getLineCenterPoint([s[0],s[1]]);if(h===tool.ELineTypes.Curve){const f=Math.floor(tool.SEGMENT_NUMBER/2);g=a[f],y=a[f+1]}DrawUtils.drawArrowByCanvas(this.canvas,g,y,{color:r.stroke,thickness:r.thickness}),DrawUtils.drawCircle(this.canvas,s[0],r.thickness+6,{color:r.stroke,thickness:r.thickness})}const{headerText:u,bottomText:p}=this.getRenderText(n,n==null?void 0:n.hiddenText);if(u&&DrawUtils.drawText(this.canvas,this.appendOffset(s[0]),u,c),p){const g=s[s.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:g.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:g.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),p,c)}}renderPolygon(t){var e,o,i,r,c;if(t.type!=="polygon")return;const{style:n,fontStyle:h}=this.getRenderStyle(t),s=t.annotation;if(!(((e=s==null?void 0:s.pointList)==null?void 0:e.length)>=3))return;const{lineType:l=tool.ELineTypes.Line}=s,a=AxisUtils.default.changePointListByZoom((o=s==null?void 0:s.pointList)!=null?o:[],this.zoom,this.currentPos);if(s.id===this.mouseHoverID||n.fill){const f=rgba__default.default((r=(i=n==null?void 0:n.fill)!=null?i:n==null?void 0:n.stroke)!=null?r:DEFAULT_STROKE_COLOR),T=`rgba(${f[0]}, ${f[1]}, ${f[2]},${f[3]*.8})`;DrawUtils.drawPolygonWithFill(this.canvas,a,{color:T,lineType:l})}const d=__spreadProps(__spreadValues(__spreadProps(__spreadValues({},n),{isClose:!0}),this.getReferenceOptions(s==null?void 0:s.isReference)),{lineType:l,strokeColor:n.stroke});let u=[];if(s.showKeyPoint?u=DrawUtils.drawPolygonWithKeyPoint(this.canvas,a,d):u=DrawUtils.drawPolygon(this.canvas,a,d),(s==null?void 0:s.showDirection)===!0&&((c=s==null?void 0:s.pointList)==null?void 0:c.length)>=2){let f=a[0],T=MathUtils.default.getLineCenterPoint([a[0],a[1]]);if(l===tool.ELineTypes.Curve){const x=Math.floor(tool.SEGMENT_NUMBER/2);f=u[x],T=u[x+1]}DrawUtils.drawArrowByCanvas(this.canvas,f,T,{color:n.stroke,thickness:n.thickness}),DrawUtils.drawCircle(this.canvas,a[0],n.thickness+6,{color:n.stroke,thickness:n.thickness})}const{headerText:g,bottomText:y}=this.getRenderText(s,s==null?void 0:s.hiddenText);if(g&&DrawUtils.drawText(this.canvas,this.appendOffset(a[0]),g,h),y){const f=a[a.length-1];DrawUtils.drawText(this.canvas,this.appendOffset({x:f.x+annotation.TEXT_ATTRIBUTE_OFFSET.x,y:f.y+annotation.TEXT_ATTRIBUTE_OFFSET.y}),y,h)}}renderSingleCuboid(t){var e,o;const{style:i}=this.getRenderStyle(t),r=t.annotation,c=rgba__default.default((o=(e=i==null?void 0:i.fill)!=null?e:i==null?void 0:i.stroke)!=null?o:DEFAULT_STROKE_COLOR),n=`rgba(${c[0]}, ${c[1]}, ${c[2]},${c[3]*.8})`,h=i.stroke,s=AxisUtils.default.changeCuboidByZoom(r,this.zoom,this.currentPos),{headerText:l,bottomText:a}=this.getRenderText(r,r==null?void 0:r.hiddenText);DrawUtils.drawCuboidWithText(this.canvas,s,{strokeColor:h,fillColor:n,thickness:i.thickness},{config:this.config,hiddenText:r==null?void 0:r.hiddenText,headerText:l,bottomText:a})}renderBox3d(t){if(t.type!=="box3d")return;const e=t.annotation,o=matrix.pointCloudLidar2image(e,e.calib),i={fill:"transparent"},r=___default.default.pick(e,["stroke","thickness"]);o.forEach((c,n)=>{const h=__spreadValues(__spreadProps(__spreadValues({},r),{id:`${t.annotation.id}-${n}`,pointList:c.pointList}),i);switch(c.type){case"line":this.renderLine({type:"line",annotation:h});break;case"polygon":this.renderPolygon({type:"polygon",annotation:h});break}})}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,i,r,c,n;const h=this.getSpecificStyle(e.annotation),s=this.getFontStyle(e.annotation,h);switch(e.type){case"rect":{const l=e.annotation,{hiddenText:a=!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:x}=g;if(l.id===this.mouseHoverID||h.fill){const P=rgba__default.default((i=(o=h==null?void 0:h.fill)!=null?o:h==null?void 0:h.stroke)!=null?i:DEFAULT_STROKE_COLOR),b=`rgba(${P[0]}, ${P[1]}, ${P[2]},${P[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},s));const m=`${Math.round(T/p)} * ${Math.round(x/p)}`,k=m.length*7;if(!a&&!u&&DrawUtils.drawText(this.canvas,{x:y+T-k,y:f+x+15},m,s),S){const P=20,b=Math.max(20,T-k);DrawUtils.drawText(this.canvas,{x:y,y:f+x+P},l.textAttribute,__spreadValues({textMaxWidth:b},s))}break}case"polygon":{this.renderPolygon(e);break}case"line":{this.renderLine(e);break}case"point":{const l=e.annotation,a=AxisUtils.default.changePointByZoom(l,this.zoom,this.currentPos),d=(r=h.radius)!=null?r:DEFAULT_RADIUS;DrawUtils.drawCircle(this.canvas,a,d,h);const{headerText:u,bottomText:p}=this.getRenderText(l,l==null?void 0:l.hiddenText);u&&DrawUtils.drawText(this.canvas,{x:a.x+d/2,y:a.y-d-4},u,__spreadValues({textAlign:"center"},s)),p&&DrawUtils.drawText(this.canvas,this.appendOffset({x:a.x+d,y:a.y+d+24}),p,s);break}case"text":{const l=e.annotation,{text:a,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:x}=l,w=10,S=10,m=AxisUtils.default.changePointByZoom({x:d,y:u},this.zoom,this.currentPos),{width:k,height:P,fontHeight:b=0}=MathUtils.default.getTextArea(this.canvas,l.text,p,T,f);if(x==="rt")break;DrawUtils.drawRectWithFill(this.canvas,{x:m.x,y:m.y,width:k+S*2,height:P+w*2,id:"",sourceID:"",valid:!0,textAttribute:"",attribute:""},{color:y}),DrawUtils.drawText(this.canvas,{x:m.x+S,y:m.y+b+w},a,{color:g,lineHeight:f,font:T,textMaxWidth:p});break}case"box3d":{this.renderBox3d(e);break}case"cuboid":{this.renderSingleCuboid(e);break}default:break}(n=(c=e.annotation)==null?void 0:c.renderEnhance)==null||n.call(c,{ctx:this.ctx,canvas:this.canvas,currentPos:this.currentPos,zoom:this.zoom,data:e,toolInstance:this})}),this.renderConnectionPoints()}catch(t){console.error("ViewOperation Render Error",t)}}}module.exports=ViewOperation;
+'use strict';
+
+var _ = require('lodash');
+var rgba = require('color-rgba');
+var DrawUtils = require('../../utils/tool/DrawUtils.js');
+var AxisUtils = require('../../utils/tool/AxisUtils.js');
+var RectUtils = require('../../utils/tool/RectUtils.js');
+var PolygonUtils = require('../../utils/tool/PolygonUtils.js');
+var MathUtils = require('../../utils/MathUtils.js');
+var RenderDomClass = require('../../utils/tool/RenderDomClass.js');
+var tool = require('../../constant/tool.js');
+var annotation = require('../../constant/annotation.js');
+var ImgPosUtils = require('../../utils/tool/ImgPosUtils.js');
+var basicToolOperation = require('./basicToolOperation.js');
+var matrix = require('../pointCloud/matrix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var rgba__default = /*#__PURE__*/_interopDefaultLegacy(rgba);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const newScope = 3;
+const DEFAULT_RADIUS = 3;
+const DEFAULT_STROKE_COLOR = "#6371FF";
+class ViewOperation extends basicToolOperation.BasicToolOperation {
+  constructor(props) {
+    super(__spreadProps(__spreadValues({}, props), {showDefaultCursor: true}));
+    this.style = {};
+    this.annotations = [];
+    this.connectionPoints = [];
+    this.getHoverRectID = (e) => {
+      var _a, _b;
+      const coordinate = this.getCoordinateUnderZoom(e);
+      const originCoordinate = AxisUtils["default"].changePointByZoom(coordinate, 1 / this.zoom);
+      if (((_a = this.annotations) == null ? void 0 : _a.length) <= 0 || !((_b = this.annotations) == null ? void 0 : _b.length)) {
+        return;
+      }
+      let id = "";
+      let minArea = Number.MAX_SAFE_INTEGER;
+      for (let i = 0; i < this.annotations.length; i++) {
+        const annotation = this.annotations[i];
+        switch (annotation.type) {
+          case "rect": {
+            const rect = annotation.annotation;
+            if (RectUtils.isInRect(coordinate, rect, newScope, this.zoom)) {
+              const area = rect.width * rect.height;
+              if (area < minArea) {
+                id = rect.id;
+                minArea = area;
+              }
+            }
+            break;
+          }
+          case "polygon": {
+            const polygon = annotation.annotation;
+            if (PolygonUtils.isInPolygon(originCoordinate, polygon.pointList)) {
+              const area = PolygonUtils.getPolygonArea(polygon.pointList);
+              if (area < minArea) {
+                id = polygon.id;
+                minArea = area;
+              }
+            }
+            break;
+          }
+        }
+      }
+      return id;
+    };
+    var _a;
+    this.style = (_a = props.style) != null ? _a : {stroke: DEFAULT_STROKE_COLOR, thickness: 3};
+    this.annotations = props.annotations;
+    this.loading = false;
+    this.renderDomInstance = new RenderDomClass({
+      container: this.container,
+      height: this.canvas.height
+    });
+  }
+  clearConnectionPoints() {
+    this.connectionPoints = [];
+    this.render();
+  }
+  checkConnectionPoints(newAnnotations = this.annotations) {
+    var _a, _b;
+    if (this.connectPointsStatus) {
+      (_b = (_a = this.connectPointsStatus).close) == null ? void 0 : _b.call(_a);
+    }
+    this.emit("connectionPointsStatusUpdate", () => {
+      return new Promise((resolve) => {
+        const {promise, close} = MathUtils["default"].getCollectionPointByAnnotationDataPromise(newAnnotations);
+        this.connectPointsStatus = {
+          close
+        };
+        promise.then((res) => {
+          this.connectionPoints = res.connectionPoints;
+          this.render();
+          this.connectPointsStatus = void 0;
+          resolve({connectionPoints: res.connectionPoints});
+        });
+      });
+    });
+  }
+  setLoading(loading) {
+    this.loading = loading;
+    this.render();
+  }
+  onMouseLeave() {
+    super.onMouseLeave();
+    this.mouseHoverID = void 0;
+    this.emit("onChange", "hover", []);
+  }
+  onMouseDown(e) {
+    if (super.onMouseDown(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return true;
+    }
+    const newMouseSelectedID = this.mouseHoverID;
+    if (e.button === 0) {
+      let selectedID = [];
+      if (newMouseSelectedID) {
+        selectedID = [newMouseSelectedID];
+      }
+      this.emit("onChange", "selected", selectedID);
+      this.render();
+    }
+  }
+  onMouseMove(e) {
+    if (super.onMouseMove(e) || this.forbidMouseOperation || !this.imgInfo) {
+      return;
+    }
+    const oldMouseHoverID = this.mouseHoverID;
+    const newMouseHoverID = this.getHoverRectID(e);
+    if (oldMouseHoverID !== newMouseHoverID) {
+      this.mouseHoverID = newMouseHoverID;
+      let hoverID = [];
+      if (newMouseHoverID) {
+        hoverID = [newMouseHoverID];
+      }
+      this.emit("onChange", "hover", hoverID);
+      this.render();
+    }
+  }
+  updateData(annotations) {
+    this.annotations = annotations;
+    this.render();
+  }
+  getSpecificStyle(obj) {
+    const specificStyle = ___default["default"].pick(obj, ["stroke", "thickness", "fill", "radius"]);
+    const newStyle = __spreadValues(__spreadValues({}, this.style), specificStyle);
+    if (newStyle.stroke) {
+      Object.assign(newStyle, {
+        color: newStyle.stroke
+      });
+    }
+    return newStyle;
+  }
+  getFontStyle(obj, style) {
+    var _a, _b;
+    const fontSize = (_a = obj == null ? void 0 : obj.fontSize) != null ? _a : 14;
+    const fontFamily = (_b = obj == null ? void 0 : obj.fontFamily) != null ? _b : "Arial";
+    return __spreadProps(__spreadValues({}, annotation.DEFAULT_TEXT_SHADOW), {
+      color: style.stroke,
+      font: `normal normal 600 ${fontSize}px ${fontFamily}`
+    });
+  }
+  appendOffset({x, y}) {
+    return {x: x + annotation.DEFAULT_TEXT_OFFSET.offsetX, y: y + annotation.DEFAULT_TEXT_OFFSET.offsetY};
+  }
+  getRenderText(result, hiddenText = false) {
+    let headerText = "";
+    let bottomText = "";
+    if (!result || hiddenText === true) {
+      return {headerText, bottomText};
+    }
+    if (result == null ? void 0 : result.order) {
+      headerText = `${result.order}`;
+    }
+    if (result == null ? void 0 : result.label) {
+      if (headerText) {
+        headerText = `${headerText}_${result.label}`;
+      } else {
+        headerText = `${result.label}`;
+      }
+    }
+    if (result == null ? void 0 : result.attribute) {
+      if (headerText) {
+        headerText = `${headerText}  ${result.attribute}`;
+      } else {
+        headerText = `${result.attribute}`;
+      }
+    }
+    if (result == null ? void 0 : result.textAttribute) {
+      bottomText = result == null ? void 0 : result.textAttribute;
+    }
+    return {headerText, bottomText};
+  }
+  getReferenceOptions(isReference) {
+    return isReference ? {lineCap: "butt", lineDash: [20, 20]} : {};
+  }
+  focusPositionByPointList(pointList) {
+    const basicZone = MathUtils["default"].calcViewportBoundaries(pointList);
+    const newBoundary = {
+      x: basicZone.left,
+      y: basicZone.top,
+      width: basicZone.right - basicZone.left,
+      height: basicZone.bottom - basicZone.top
+    };
+    const pos = ImgPosUtils.getBasicRecPos(this.imgNode, newBoundary, this.size, 0.5);
+    if (pos) {
+      this.setCurrentPos(pos.currentPos);
+      this.setCurrentPosStorage(pos.currentPos);
+      const {imgInfo} = this;
+      const {innerZoom} = this.innerPosAndZoom;
+      if (imgInfo) {
+        this.setImgInfo(__spreadProps(__spreadValues({}, imgInfo), {
+          width: imgInfo.width / innerZoom * pos.innerZoom,
+          height: imgInfo.height / innerZoom * pos.innerZoom
+        }));
+      }
+      this.setZoom(pos.innerZoom);
+      this.render();
+      this.renderBasicCanvas();
+    }
+  }
+  renderConnectionPoints() {
+    this.connectionPoints.forEach((point) => {
+      const renderPoint = AxisUtils["default"].changePointByZoom(point, this.zoom, this.currentPos);
+      DrawUtils.drawCircleWithFill(this.canvas, renderPoint, 4, {color: "#fff"});
+      DrawUtils.drawCircleWithFill(this.canvas, renderPoint, 2, {color: "#000"});
+    });
+  }
+  getRenderStyle(annotation) {
+    const style = this.getSpecificStyle(annotation.annotation);
+    const fontStyle = this.getFontStyle(annotation.annotation, style);
+    return {
+      style,
+      fontStyle
+    };
+  }
+  renderLine(annotation$1) {
+    var _a, _b, _c;
+    if (annotation$1.type !== "line") {
+      return;
+    }
+    const {style, fontStyle} = this.getRenderStyle(annotation$1);
+    const line = annotation$1.annotation;
+    if (!(((_a = line == null ? void 0 : line.pointList) == null ? void 0 : _a.length) >= 2)) {
+      return;
+    }
+    const {lineType = tool.ELineTypes.Line} = line;
+    const renderLineWithZoom = AxisUtils["default"].changePointListByZoom((_b = line == null ? void 0 : line.pointList) != null ? _b : [], this.zoom, this.currentPos);
+    const lineRenderOptions = __spreadProps(__spreadValues(__spreadValues({}, style), this.getReferenceOptions(line == null ? void 0 : line.isReference)), {
+      lineType,
+      strokeColor: style.stroke
+    });
+    let newPointList = [];
+    if (line.showKeyPoint) {
+      newPointList = DrawUtils.drawPolygonWithKeyPoint(this.canvas, renderLineWithZoom, lineRenderOptions);
+    } else {
+      newPointList = DrawUtils.drawPolygon(this.canvas, renderLineWithZoom, lineRenderOptions);
+    }
+    const isShowDirection = (line == null ? void 0 : line.showDirection) === true && ((_c = line == null ? void 0 : line.pointList) == null ? void 0 : _c.length) >= 2;
+    if (isShowDirection) {
+      let startPoint = renderLineWithZoom[0];
+      let endPoint = MathUtils["default"].getLineCenterPoint([renderLineWithZoom[0], renderLineWithZoom[1]]);
+      if (lineType === tool.ELineTypes.Curve) {
+        const pos = Math.floor(tool.SEGMENT_NUMBER / 2);
+        startPoint = newPointList[pos];
+        endPoint = newPointList[pos + 1];
+      }
+      DrawUtils.drawArrowByCanvas(this.canvas, startPoint, endPoint, {
+        color: style.stroke,
+        thickness: style.thickness
+      });
+      DrawUtils.drawCircle(this.canvas, renderLineWithZoom[0], style.thickness + 6, {
+        color: style.stroke,
+        thickness: style.thickness
+      });
+    }
+    const {headerText, bottomText} = this.getRenderText(line, line == null ? void 0 : line.hiddenText);
+    if (headerText) {
+      DrawUtils.drawText(this.canvas, this.appendOffset(renderLineWithZoom[0]), headerText, fontStyle);
+    }
+    if (bottomText) {
+      const endPoint = renderLineWithZoom[renderLineWithZoom.length - 1];
+      DrawUtils.drawText(this.canvas, this.appendOffset({x: endPoint.x + annotation.TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + annotation.TEXT_ATTRIBUTE_OFFSET.y}), bottomText, fontStyle);
+    }
+  }
+  renderPolygon(annotation$1) {
+    var _a, _b, _c, _d, _e;
+    if (annotation$1.type !== "polygon") {
+      return;
+    }
+    const {style, fontStyle} = this.getRenderStyle(annotation$1);
+    const polygon = annotation$1.annotation;
+    if (!(((_a = polygon == null ? void 0 : polygon.pointList) == null ? void 0 : _a.length) >= 3)) {
+      return;
+    }
+    const {lineType = tool.ELineTypes.Line} = polygon;
+    const renderPolygon = AxisUtils["default"].changePointListByZoom((_b = polygon == null ? void 0 : polygon.pointList) != null ? _b : [], this.zoom, this.currentPos);
+    if (polygon.id === this.mouseHoverID || style.fill) {
+      const fillArr = rgba__default["default"]((_d = (_c = style == null ? void 0 : style.fill) != null ? _c : style == null ? void 0 : style.stroke) != null ? _d : DEFAULT_STROKE_COLOR);
+      const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
+      DrawUtils.drawPolygonWithFill(this.canvas, renderPolygon, {color: fill, lineType});
+    }
+    const polygonRenderOptions = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, style), {
+      isClose: true
+    }), this.getReferenceOptions(polygon == null ? void 0 : polygon.isReference)), {
+      lineType,
+      strokeColor: style.stroke
+    });
+    let newPointList = [];
+    if (polygon.showKeyPoint) {
+      newPointList = DrawUtils.drawPolygonWithKeyPoint(this.canvas, renderPolygon, polygonRenderOptions);
+    } else {
+      newPointList = DrawUtils.drawPolygon(this.canvas, renderPolygon, polygonRenderOptions);
+    }
+    const isShowDirection = (polygon == null ? void 0 : polygon.showDirection) === true && ((_e = polygon == null ? void 0 : polygon.pointList) == null ? void 0 : _e.length) >= 2;
+    if (isShowDirection) {
+      let startPoint = renderPolygon[0];
+      let endPoint = MathUtils["default"].getLineCenterPoint([renderPolygon[0], renderPolygon[1]]);
+      if (lineType === tool.ELineTypes.Curve) {
+        const pos = Math.floor(tool.SEGMENT_NUMBER / 2);
+        startPoint = newPointList[pos];
+        endPoint = newPointList[pos + 1];
+      }
+      DrawUtils.drawArrowByCanvas(this.canvas, startPoint, endPoint, {
+        color: style.stroke,
+        thickness: style.thickness
+      });
+      DrawUtils.drawCircle(this.canvas, renderPolygon[0], style.thickness + 6, {
+        color: style.stroke,
+        thickness: style.thickness
+      });
+    }
+    const {headerText, bottomText} = this.getRenderText(polygon, polygon == null ? void 0 : polygon.hiddenText);
+    if (headerText) {
+      DrawUtils.drawText(this.canvas, this.appendOffset(renderPolygon[0]), headerText, fontStyle);
+    }
+    if (bottomText) {
+      const endPoint = renderPolygon[renderPolygon.length - 1];
+      DrawUtils.drawText(this.canvas, this.appendOffset({x: endPoint.x + annotation.TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + annotation.TEXT_ATTRIBUTE_OFFSET.y}), bottomText, fontStyle);
+    }
+  }
+  renderSingleCuboid(annotation) {
+    var _a, _b;
+    const {style} = this.getRenderStyle(annotation);
+    const cuboid = annotation.annotation;
+    const fillArr = rgba__default["default"]((_b = (_a = style == null ? void 0 : style.fill) != null ? _a : style == null ? void 0 : style.stroke) != null ? _b : DEFAULT_STROKE_COLOR);
+    const fillColor = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
+    const strokeColor = style.stroke;
+    const transformCuboid = AxisUtils["default"].changeCuboidByZoom(cuboid, this.zoom, this.currentPos);
+    const {headerText, bottomText} = this.getRenderText(cuboid, cuboid == null ? void 0 : cuboid.hiddenText);
+    DrawUtils.drawCuboidWithText(this.canvas, transformCuboid, {strokeColor, fillColor, thickness: style.thickness}, {
+      config: this.config,
+      hiddenText: cuboid == null ? void 0 : cuboid.hiddenText,
+      headerText,
+      bottomText
+    });
+  }
+  renderBox3d(annotation) {
+    if (annotation.type !== "box3d") {
+      return;
+    }
+    const data = annotation.annotation;
+    const viewDataPointList = matrix.pointCloudLidar2image(data, data.calib);
+    const defaultViewStyle = {
+      fill: "transparent"
+    };
+    const extraData = ___default["default"].pick(data, ["stroke", "thickness"]);
+    viewDataPointList.forEach((v, i) => {
+      const newAnnotation = __spreadValues(__spreadProps(__spreadValues({}, extraData), {
+        id: `${annotation.annotation.id}-${i}`,
+        pointList: v.pointList
+      }), defaultViewStyle);
+      switch (v.type) {
+        case "line":
+          this.renderLine({
+            type: "line",
+            annotation: newAnnotation
+          });
+          break;
+        case "polygon":
+          this.renderPolygon({
+            type: "polygon",
+            annotation: newAnnotation
+          });
+          break;
+      }
+    });
+  }
+  render() {
+    try {
+      super.render();
+      if (this.loading === true) {
+        return;
+      }
+      const globalDomTextAnnotation = this.annotations.filter((v) => v.type === "text" && v.annotation.position === "rt").map((v) => v.annotation);
+      this.renderDomInstance.render(globalDomTextAnnotation);
+      this.annotations.forEach((annotation) => {
+        var _a, _b, _c, _d, _e;
+        const style = this.getSpecificStyle(annotation.annotation);
+        const fontStyle = this.getFontStyle(annotation.annotation, style);
+        switch (annotation.type) {
+          case "rect": {
+            const rect = annotation.annotation;
+            const {hiddenText = false, isReference, hiddenRectSize = false} = rect;
+            const {zoom} = this;
+            const renderRect = AxisUtils["default"].changeRectByZoom(rect, this.zoom, this.currentPos);
+            const {x, y, width, height} = renderRect;
+            if (rect.id === this.mouseHoverID || style.fill) {
+              const fillArr = rgba__default["default"]((_b = (_a = style == null ? void 0 : style.fill) != null ? _a : style == null ? void 0 : style.stroke) != null ? _b : DEFAULT_STROKE_COLOR);
+              const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
+              DrawUtils.drawRectWithFill(this.canvas, renderRect, {color: fill});
+            }
+            DrawUtils.drawRect(this.canvas, renderRect, __spreadValues(__spreadProps(__spreadValues({}, style), {
+              hiddenText: true
+            }), this.getReferenceOptions(isReference)));
+            const {headerText, bottomText} = this.getRenderText(rect, rect == null ? void 0 : rect.hiddenText);
+            if (headerText) {
+              DrawUtils.drawText(this.canvas, {x, y: y - 6}, headerText, __spreadValues({
+                textMaxWidth: 300
+              }, fontStyle));
+            }
+            const rectSize = `${Math.round(width / zoom)} * ${Math.round(height / zoom)}`;
+            const textSizeWidth = rectSize.length * 7;
+            if (!hiddenText && !hiddenRectSize) {
+              DrawUtils.drawText(this.canvas, {x: x + width - textSizeWidth, y: y + height + 15}, rectSize, fontStyle);
+            }
+            if (bottomText) {
+              const marginTop = 20;
+              const textWidth = Math.max(20, width - textSizeWidth);
+              DrawUtils.drawText(this.canvas, {x, y: y + height + marginTop}, rect.textAttribute, __spreadValues({
+                textMaxWidth: textWidth
+              }, fontStyle));
+            }
+            break;
+          }
+          case "polygon": {
+            this.renderPolygon(annotation);
+            break;
+          }
+          case "line": {
+            this.renderLine(annotation);
+            break;
+          }
+          case "point": {
+            const point = annotation.annotation;
+            const renderPoint = AxisUtils["default"].changePointByZoom(point, this.zoom, this.currentPos);
+            const radius = (_c = style.radius) != null ? _c : DEFAULT_RADIUS;
+            DrawUtils.drawCircle(this.canvas, renderPoint, radius, style);
+            const {headerText, bottomText} = this.getRenderText(point, point == null ? void 0 : point.hiddenText);
+            if (headerText) {
+              DrawUtils.drawText(this.canvas, {x: renderPoint.x + radius / 2, y: renderPoint.y - radius - 4}, headerText, __spreadValues({
+                textAlign: "center"
+              }, fontStyle));
+            }
+            if (bottomText) {
+              DrawUtils.drawText(this.canvas, this.appendOffset({x: renderPoint.x + radius, y: renderPoint.y + radius + 24}), bottomText, fontStyle);
+            }
+            break;
+          }
+          case "text": {
+            const textAnnotation = annotation.annotation;
+            const {
+              text,
+              x,
+              y,
+              textMaxWidth,
+              color = "white",
+              background = "rgba(0, 0, 0, 0.6)",
+              lineHeight = 25,
+              font = tool.DEFAULT_FONT,
+              position
+            } = textAnnotation;
+            const paddingTB = 10;
+            const paddingLR = 10;
+            const renderPoint = AxisUtils["default"].changePointByZoom({x, y}, this.zoom, this.currentPos);
+            const {
+              width,
+              height,
+              fontHeight = 0
+            } = MathUtils["default"].getTextArea(this.canvas, textAnnotation.text, textMaxWidth, font, lineHeight);
+            if (position === "rt") {
+              break;
+            }
+            DrawUtils.drawRectWithFill(this.canvas, {
+              x: renderPoint.x,
+              y: renderPoint.y,
+              width: width + paddingLR * 2,
+              height: height + paddingTB * 2,
+              id: "",
+              sourceID: "",
+              valid: true,
+              textAttribute: "",
+              attribute: ""
+            }, {
+              color: background
+            });
+            DrawUtils.drawText(this.canvas, {
+              x: renderPoint.x + paddingLR,
+              y: renderPoint.y + fontHeight + paddingTB
+            }, text, {
+              color,
+              lineHeight,
+              font,
+              textMaxWidth
+            });
+            break;
+          }
+          case "box3d": {
+            this.renderBox3d(annotation);
+            break;
+          }
+          case "cuboid": {
+            this.renderSingleCuboid(annotation);
+            break;
+          }
+          default: {
+            break;
+          }
+        }
+        (_e = (_d = annotation.annotation) == null ? void 0 : _d.renderEnhance) == null ? void 0 : _e.call(_d, {
+          ctx: this.ctx,
+          canvas: this.canvas,
+          currentPos: this.currentPos,
+          zoom: this.zoom,
+          data: annotation,
+          toolInstance: this
+        });
+      });
+      this.renderConnectionPoints();
+    } catch (e) {
+      console.error("ViewOperation Render Error", e);
+    }
+  }
+}
+
+module.exports = ViewOperation;