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

package/es/core/toolOperation/ViewOperation.js

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