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

package/es/utils/tool/DblClickEventListener.js

@@ -1 +1,100 @@
-import n from"./AxisUtils.js";class m{constructor(e,s){this.rcTime=0,this.mouseDownTime=0,this.onMouseDown=()=>{this.mouseDownTime=new Date().getTime()},this.dom=e,this.isDoubleClick=!1,this.delay=s}getRcTime(){return this.rcTime}getCoord(e){return{x:e.clientX,y:e.clientY}}removeEvent(){!this.dom||(this.dom.removeEventListener("mouseup",this.mouseUp),this.dom.removeEventListener("mousemove",this.mouseMove),this.dom.removeEventListener("dblclick",this.dblclick),this.dom.removeEventListener("mousedown",this.onMouseDown))}addEvent(e,s,c,o){!this.dom||(this.removeEvent(),this.mouseUp=i=>{const t=new Date().getTime(),h=o?o(i):!0;if(t-this.mouseDownTime>this.delay||h!==!0){e(i);return}if(i.button===2)if(this.rcTime===0)setTimeout(()=>{this.rcTime=0},this.delay),this.rcTime=t;else{t-this.rcTime<this.delay&&(c(i),clearTimeout(this.setTimeFun),this.cacheFunction=void 0),this.rcTime=0;return}this.setTimeFun&&clearTimeout(this.setTimeFun),this.clickCoord=this.getCoord(i),this.cacheFunction=()=>e(i),this.setTimeFun=setTimeout(()=>{if(this.isDoubleClick){this.isDoubleClick=!1;return}this.cacheFunction(),this.clickCoord=void 0},this.delay)},this.mouseMove=i=>{const t=this.getCoord(i);this.clickCoord&&!n.getIsInScope(t,this.clickCoord,10)&&(this.cacheFunction&&this.cacheFunction(),this.clickCoord=void 0,this.cacheFunction=null,clearTimeout(this.setTimeFun))},this.dblclick=i=>{this.isDoubleClick=!0,this.clickCoord=void 0,s(i)},this.dom.addEventListener("mouseup",this.mouseUp),this.dom.addEventListener("mousemove",this.mouseMove),this.dom.addEventListener("dblclick",this.dblclick),this.dom.addEventListener("mousedown",this.onMouseDown))}clearRightDblClick(){this.rcTime=0}}export{m as default};
+import AxisUtils from './AxisUtils.js';
+
+class DblClickEventListener {
+  constructor(dom, delay) {
+    this.rcTime = 0;
+    this.mouseDownTime = 0;
+    this.onMouseDown = () => {
+      this.mouseDownTime = new Date().getTime();
+    };
+    this.dom = dom;
+    this.isDoubleClick = false;
+    this.delay = delay;
+  }
+  getRcTime() {
+    return this.rcTime;
+  }
+  getCoord(e) {
+    return {
+      x: e.clientX,
+      y: e.clientY
+    };
+  }
+  removeEvent() {
+    if (!this.dom) {
+      return;
+    }
+    this.dom.removeEventListener("mouseup", this.mouseUp);
+    this.dom.removeEventListener("mousemove", this.mouseMove);
+    this.dom.removeEventListener("dblclick", this.dblclick);
+    this.dom.removeEventListener("mousedown", this.onMouseDown);
+  }
+  addEvent(singleClickFun, leftDblClick, rightDblClick, isAllowDouble) {
+    if (!this.dom) {
+      return;
+    }
+    this.removeEvent();
+    this.mouseUp = (e) => {
+      const cTime = new Date().getTime();
+      const isDoubleClick = isAllowDouble ? isAllowDouble(e) : true;
+      if (cTime - this.mouseDownTime > this.delay || isDoubleClick !== true) {
+        singleClickFun(e);
+        return;
+      }
+      if (e.button === 2) {
+        if (this.rcTime === 0) {
+          setTimeout(() => {
+            this.rcTime = 0;
+          }, this.delay);
+          this.rcTime = cTime;
+        } else {
+          if (cTime - this.rcTime < this.delay) {
+            rightDblClick(e);
+            clearTimeout(this.setTimeFun);
+            this.cacheFunction = void 0;
+          }
+          this.rcTime = 0;
+          return;
+        }
+      }
+      if (this.setTimeFun) {
+        clearTimeout(this.setTimeFun);
+      }
+      this.clickCoord = this.getCoord(e);
+      this.cacheFunction = () => singleClickFun(e);
+      this.setTimeFun = setTimeout(() => {
+        if (this.isDoubleClick) {
+          this.isDoubleClick = false;
+          return;
+        }
+        this.cacheFunction();
+        this.clickCoord = void 0;
+      }, this.delay);
+    };
+    this.mouseMove = (e) => {
+      const currentCoord = this.getCoord(e);
+      if (this.clickCoord && !AxisUtils.getIsInScope(currentCoord, this.clickCoord, 10)) {
+        if (this.cacheFunction) {
+          this.cacheFunction();
+        }
+        this.clickCoord = void 0;
+        this.cacheFunction = null;
+        clearTimeout(this.setTimeFun);
+      }
+    };
+    this.dblclick = (e) => {
+      this.isDoubleClick = true;
+      this.clickCoord = void 0;
+      leftDblClick(e);
+    };
+    this.dom.addEventListener("mouseup", this.mouseUp);
+    this.dom.addEventListener("mousemove", this.mouseMove);
+    this.dom.addEventListener("dblclick", this.dblclick);
+    this.dom.addEventListener("mousedown", this.onMouseDown);
+  }
+  clearRightDblClick() {
+    this.rcTime = 0;
+  }
+}
+
+export { DblClickEventListener as default };

package/es/utils/tool/DrawUtils.js

@@ -1,3 +1,490 @@
-import{ELineTypes as P,SEGMENT_NUMBER as p,DEFAULT_FONT as O}from"../../constant/tool.js";import b from"./PolygonUtils.js";import T from"./UnitUtils.js";import S from"./AxisUtils.js";import{getCuboidAllSideLine as D,getPointListsByDirection as W,getCuboidTextAttributeOffset as F}from"./CuboidUtils.js";import M from"./AttributeUtils.js";var U=Object.defineProperty,I=Object.defineProperties,R=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertySymbols,$=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable,k=(r,t,i)=>t in r?U(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i,m=(r,t)=>{for(var i in t||(t={}))$.call(t,i)&&k(r,i,t[i]);if(v)for(var i of v(t))L.call(t,i)&&k(r,i,t[i]);return r},A=(r,t)=>I(r,R(t));const j=1,B={x:0,y:0},X=0,u="",x=class{static drawLine(r,t,i,e={}){const o=r.getContext("2d"),{color:l=u,thickness:s=1,lineCap:a="round",lineDash:d}=e;o.save(),o.strokeStyle=l,o.lineWidth=s,o.lineCap=a,d&&o.setLineDash(d),o.beginPath(),o.moveTo(t.x,t.y),o.lineTo(i.x+1,i.y+1),o.stroke(),o.restore()}static drawRect(r,t,i={}){const e=r.getContext("2d"),{color:o=u,thickness:l=1,lineCap:s="round",hiddenText:a=!1,lineDash:d}=i;if(e.save(),e.strokeStyle=o,e.lineWidth=l,e.lineCap=s,Array.isArray(d)&&e.setLineDash(d),e.fillStyle=o,e.strokeRect(t.x,t.y,t.width,t.height),a===!1){let n="";if(t.attribute&&(n=`${n}  ${t.attribute}`),this.drawText(r,{x:t.x,y:t.y-5},n),t.textAttribute){const c=`${~~t.width} * ${~~t.height}`.length*7,w=0,y=Math.max(20,t.width-c);this.drawText(r,{x:t.x,y:t.y+t.height+20+w},t.textAttribute,{textMaxWidth:y})}}e.restore()}static drawRectWithFill(r,t,i={}){const e=r.getContext("2d"),{color:o=u}=i;e.save(),e.fillStyle=o,e.fillRect(t.x,t.y,t.width,t.height),e.restore()}static drawTagByDom(r,t,i){const e=r;if(!((t==null?void 0:t.length)>0))return;const o=document.createElement("div");return o.innerHTML=t,o.setAttribute("id",i),e==null||e.appendChild(o),o}static drawTag(r,t){var i;const e=r==null?void 0:r.parentNode,o=window.self.document.getElementById("tagToolTag");if(o&&e&&e.contains(o)&&(e==null||e.removeChild(o)),!((t==null?void 0:t.length)>0))return;const l=document.createElement("div");return l.innerHTML=(i=t.reduce((s,a)=>`${s}${a.keyName}: ${a.value.join(" \u3001 ")}
-`,""))!=null?i:"",l.setAttribute("id","tagToolTag"),e==null||e.appendChild(l),l}static drawLineWithPointList(r,t,i={}){if(t.length<2)return;const e=r.getContext("2d"),{color:o=u,thickness:l=1,lineCap:s="round",lineType:a=P.Line,lineDash:d,hoverEdgeIndex:n}=i;e.save(),(()=>{e.strokeStyle=o,e.lineWidth=l,e.lineCap=s,Array.isArray(d)?e.setLineDash(d):e.setLineDash([])})(),a===P.Curve?(n!==void 0&&n>-1&&t.push(t[0]),t=b.createSmoothCurvePointsFromPointList([...t],p),n!==void 0&&n>-1&&(t=t.slice((p+1)*n,(p+1)*(n+1)))):n!==void 0&&n>-1&&(t=[...t,t[0]],t=t.slice(n,n+2));const c=[];e.beginPath(),e.moveTo(t[0].x,t[0].y);for(let h=0;h<t.length-1;h++)t[h].specialEdge&&c.push({i1:h,i2:h+1}),e.lineTo(t[h+1].x,t[h+1].y);e.stroke(),e.save(),e.lineWidth=l*.8,e.lineCap="butt",e.strokeStyle="white",e.setLineDash([3,3]),c.forEach(h=>{const g=t[h.i1],C=t[h.i2];e.beginPath(),e.moveTo(g.x,g.y),e.lineTo(C.x,C.y),e.stroke()}),e.restore();const w=4,y=2;return t.forEach(h=>{h.specialPoint&&(this.drawSpecialPoint(r,h,w+y,o),this.drawSpecialPoint(r,h,w,"white"))}),e.restore(),t}static drawCircle(r,t,i,e={}){const o=r.getContext("2d"),{startAngleDeg:l=0,endAngleDeg:s=360,thickness:a=1,color:d=u,fill:n=u}=e,f=T.deg2rad(l),c=T.deg2rad(s);o.save(),o.beginPath(),o.strokeStyle=d,o.fillStyle=n,o.lineWidth=a,o.arc(t.x,t.y,i,f,c,!1),o.stroke(),n&&o.fill(),o.closePath(),o.restore()}static drawCircleWithFill(r,t,i=3,e={}){const o=r.getContext("2d"),{color:l=u}=e;o.save();const s=T.deg2rad(0),a=T.deg2rad(360);o.fillStyle=l,o.beginPath(),o.arc(t.x,t.y,i,s,a,!1),o.fill(),o.restore()}static drawSpecialPoint(r,t,i=6,e){const o=r.getContext("2d"),{x:l,y:s}=t;o.save(),o.beginPath(),o.fillStyle=e;const a=i*1.5,d=a*Math.sqrt(3)/2,n=a/2;o.moveTo(l,s-a),o.lineTo(l-d,s+n),o.lineTo(l+d,s+n),o.closePath(),o.fill(),o.restore()}static drawPolygon(r,t,i={}){const{isClose:e=!1,lineType:o=P.Line}=i;return e===!0&&(t=[...t,t[0]]),o===P.Curve&&(t=b.createSmoothCurvePointsFromPointList([...t])),this.drawLineWithPointList(r,t,A(m({},i),{lineType:P.Line})),t}static drawPolygonWithFill(r,t,i={}){if(t.length<2)return;const e=r.getContext("2d"),{color:o=u,lineType:l=P.Line}=i;e.save(),e.fillStyle=o,e.beginPath(),l===P.Curve&&(t=b.createSmoothCurvePointsFromPointList([...t,t[0]]));const[s,...a]=t;return e.moveTo(s.x,s.y),a.forEach(d=>{e.lineTo(d.x,d.y)}),e.fill(),e.restore(),t}static drawPolygonWithFillAndLine(r,t,i={}){const{strokeColor:e,fillColor:o,thickness:l,lineCap:s,isClose:a,lineType:d}=i,n=this.drawPolygon(r,t,{color:e,thickness:l,lineCap:s,isClose:a,lineType:d});return this.drawPolygonWithFill(r,t,{color:o,lineType:d}),n}static drawPolygonWithKeyPoint(r,t,i={}){const{pointColor:e="white",strokeColor:o}=i,l=this.drawPolygon(r,t,i);return l.forEach(s=>{this.drawCircleWithFill(r,s,4,{color:o}),this.drawCircleWithFill(r,s,3,{color:e})}),l}static drawSelectedPolygonWithFillAndLine(r,t,i={}){const{pointColor:e="white",strokeColor:o}=i,l=this.drawPolygonWithFillAndLine(r,t,i);return l.forEach(s=>{this.drawCircleWithFill(r,s,4,{color:o}),this.drawCircleWithFill(r,s,3,{color:e})}),l}static drawText(r,t,i,e={}){if(!i)return;const o=r.getContext("2d"),{color:l=u,font:s=O,shadowColor:a="",shadowBlur:d=0,shadowOffsetX:n=0,shadowOffsetY:f=0,textMaxWidth:c=164,offsetX:w=0,offsetY:y=0,textAlign:h="start",lineHeight:g}=e;o.save(),o.textAlign=h,o.fillStyle=l!=null?l:"white",o.font=s,o.shadowColor=a,o.shadowOffsetX=n,o.shadowOffsetY=f,o.shadowBlur=d,this.wrapText(r,`${i}`,t.x+w,t.y+y,c,g),o.restore()}static wrapText(r,t,i,e,o,l){if(typeof t!="string"||typeof i!="number"||typeof e!="number")return;const s=r.getContext("2d");typeof o=="undefined"&&(o=r&&r.width||300),typeof l=="undefined"&&(l=r&&parseInt(window.getComputedStyle(r).lineHeight,10)||parseInt(window.getComputedStyle(document.body).lineHeight,10));const a=t.split(`
-`);for(let d=0;d<a.length;d++){const n=a[d].split("");let f="";for(let c=0;c<n.length;c++){const w=f+n[c],h=s.measureText(w).width;o||(o=300),h>o&&c>0?(s.fillText(f,i,e),f=n[c],e+=l):f=w}s.fillText(f,i,e),e+=l}}static drawArrow(r,t,i,e={}){const{color:o=u,thickness:l=1,lineCap:s="round",theta:a=30,headLen:d=10}=e,n=Math.atan2(t.y-i.y,t.x-i.x)*180/Math.PI,f=(n+a)*Math.PI/180,c=(n-a)*Math.PI/180,w=d*Math.cos(f),y=d*Math.sin(f),h=d*Math.cos(c),g=d*Math.sin(c);r.save(),r.strokeStyle=o,r.lineWidth=l,r.lineCap=s,r.beginPath(),r.moveTo(i.x+w,i.y+y),r.lineTo(i.x,i.y),r.lineTo(i.x+h,i.y+g),r.stroke(),r.restore()}static drawArrowByCanvas(r,t,i,e={}){const o=r.getContext("2d");this.drawArrow(o,t,i,e)}static drawCuboid(r,t,i={}){const{backPoints:e,direction:o,frontPoints:l}=t,{strokeColor:s,thickness:a,fillColor:d}=i,n={color:s,thickness:a};if(e){const c=S.transformPlain2PointList(e);x.drawPolygon(r,c,A(m({},n),{isClose:!0}));const w=D(t);w==null||w.forEach(y=>{x.drawLine(r,y.p1,y.p2,m({},n))})}const f=S.transformPlain2PointList(l);if(o&&e&&l){const c=W({direction:o,frontPoints:l,backPoints:e});c&&x.drawPolygonWithFill(r,c,{color:d})}x.drawPolygon(r,f,A(m({},n),{isClose:!0}))}static drawCuboidWithText(r,t,i,e){const{strokeColor:o}=i,l=o,{config:s,hiddenText:a,selectedID:d,headerText:n,bottomText:f}=e,{backPoints:c,frontPoints:w,textAttribute:y}=t,h=w.br.x-w.bl.x;x.drawCuboid(r,t,i);let g="";(s==null?void 0:s.isShowOrder)&&t.order&&(t==null?void 0:t.order)>0&&(g=`${t.order}`),t.attribute&&(g=`${g}  ${M.getAttributeShowText(t.attribute,s==null?void 0:s.attributeList)}`),!a&&c&&g&&x.drawText(r,{x:c.tl.x,y:c.tl.y-5},n!=null?n:g,{color:o,textMaxWidth:300});const C=F({cuboid:t,currentPos:{x:0,y:0},zoom:1,topOffset:16,leftOffset:0});if(!a&&y&&t.id!==d){const E=Math.max(20,h*.8);x.drawText(r,{x:C.left,y:C.top},f!=null?f:y,{color:l,textMaxWidth:E})}}};let _=x;_.drawImg=(r,t,i={})=>{const e=r.getContext("2d"),{zoom:o=j,currentPos:l=B,rotate:s=X,imgAttribute:a}=i;switch(e.save(),s){case 0:e.translate(l.x,l.y);break;case 90:e.translate(l.x+t.height*o,l.y),e.rotate(90*Math.PI/180);break;case 180:e.translate(l.x+t.width*o,l.y+t.height*o),e.rotate(Math.PI);break;case 270:e.translate(l.x,l.y+t.width*o),e.rotate(270*Math.PI/180);break;default:e.translate(l.x,l.y);break}if(a){const{contrast:d,saturation:n,brightness:f}=a;e.filter=`saturate(${n+100}%) contrast(${d+100}%) brightness(${f+100}%)`}e.drawImage(t,0,0,t.width*o,t.height*o),e.restore()};export{_ as default};
+import { ELineTypes, SEGMENT_NUMBER, DEFAULT_FONT } from '../../constant/tool.js';
+import PolygonUtils from './PolygonUtils.js';
+import UnitUtils from './UnitUtils.js';
+import AxisUtils from './AxisUtils.js';
+import { getCuboidAllSideLine, getPointListsByDirection, getCuboidTextAttributeOffset } from './CuboidUtils.js';
+import AttributeUtils from './AttributeUtils.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 DEFAULT_ZOOM = 1;
+const DEFAULT_CURRENT_POS = {
+  x: 0,
+  y: 0
+};
+const DEFAULT_ROTATE = 0;
+const DEFAULT_COLOR = "";
+const _DrawUtils = class {
+  static drawLine(canvas, startPoint, endPoint, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR, thickness = 1, lineCap = "round", lineDash} = options;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = lineCap;
+    if (lineDash) {
+      ctx.setLineDash(lineDash);
+    }
+    ctx.beginPath();
+    ctx.moveTo(startPoint.x, startPoint.y);
+    ctx.lineTo(endPoint.x + 1, endPoint.y + 1);
+    ctx.stroke();
+    ctx.restore();
+  }
+  static drawRect(canvas, rect, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR, thickness = 1, lineCap = "round", hiddenText = false, lineDash} = options;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = lineCap;
+    if (Array.isArray(lineDash)) {
+      ctx.setLineDash(lineDash);
+    }
+    ctx.fillStyle = color;
+    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    if (hiddenText === false) {
+      let showText = "";
+      if (rect.attribute) {
+        showText = `${showText}  ${rect.attribute}`;
+      }
+      this.drawText(canvas, {x: rect.x, y: rect.y - 5}, showText);
+      if (rect.textAttribute) {
+        const text = `${~~rect.width} * ${~~rect.height}`;
+        const textSizeWidth = text.length * 7;
+        const marginTop = 0;
+        const textWidth = Math.max(20, rect.width - textSizeWidth);
+        this.drawText(canvas, {x: rect.x, y: rect.y + rect.height + 20 + marginTop}, rect.textAttribute, {
+          textMaxWidth: textWidth
+        });
+      }
+    }
+    ctx.restore();
+  }
+  static drawRectWithFill(canvas, rect, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR} = options;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    ctx.restore();
+  }
+  static drawTagByDom(parent, text, id) {
+    const parentNode = parent;
+    if (!((text == null ? void 0 : text.length) > 0)) {
+      return;
+    }
+    const dom = document.createElement("div");
+    dom.innerHTML = text;
+    dom.setAttribute("id", id);
+    parentNode == null ? void 0 : parentNode.appendChild(dom);
+    return dom;
+  }
+  static drawTag(canvas, tagList) {
+    var _a;
+    const parentNode = canvas == null ? void 0 : canvas.parentNode;
+    const oldDom = window.self.document.getElementById("tagToolTag");
+    if (oldDom && parentNode && parentNode.contains(oldDom)) {
+      parentNode == null ? void 0 : parentNode.removeChild(oldDom);
+    }
+    if (!((tagList == null ? void 0 : tagList.length) > 0)) {
+      return;
+    }
+    const dom = document.createElement("div");
+    dom.innerHTML = (_a = tagList.reduce((acc, cur) => {
+      return `${acc}${cur.keyName}: ${cur.value.join(` \u3001 `)}
+`;
+    }, "")) != null ? _a : "";
+    dom.setAttribute("id", "tagToolTag");
+    parentNode == null ? void 0 : parentNode.appendChild(dom);
+    return dom;
+  }
+  static drawLineWithPointList(canvas, pointList, options = {}) {
+    if (pointList.length < 2) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    const {
+      color = DEFAULT_COLOR,
+      thickness = 1,
+      lineCap = "round",
+      lineType = ELineTypes.Line,
+      lineDash,
+      hoverEdgeIndex
+    } = options;
+    ctx.save();
+    const setStyle = () => {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = thickness;
+      ctx.lineCap = lineCap;
+      if (Array.isArray(lineDash)) {
+        ctx.setLineDash(lineDash);
+      } else {
+        ctx.setLineDash([]);
+      }
+    };
+    setStyle();
+    if (lineType === ELineTypes.Curve) {
+      if (hoverEdgeIndex !== void 0 && hoverEdgeIndex > -1) {
+        pointList.push(pointList[0]);
+      }
+      pointList = PolygonUtils.createSmoothCurvePointsFromPointList([...pointList], SEGMENT_NUMBER);
+      if (hoverEdgeIndex !== void 0 && hoverEdgeIndex > -1) {
+        pointList = pointList.slice((SEGMENT_NUMBER + 1) * hoverEdgeIndex, (SEGMENT_NUMBER + 1) * (hoverEdgeIndex + 1));
+      }
+    } else if (hoverEdgeIndex !== void 0 && hoverEdgeIndex > -1) {
+      pointList = [...pointList, pointList[0]];
+      pointList = pointList.slice(hoverEdgeIndex, hoverEdgeIndex + 2);
+    }
+    const specialEdgeList = [];
+    ctx.beginPath();
+    ctx.moveTo(pointList[0].x, pointList[0].y);
+    for (let i = 0; i < pointList.length - 1; i++) {
+      if (pointList[i].specialEdge) {
+        specialEdgeList.push({
+          i1: i,
+          i2: i + 1
+        });
+      }
+      ctx.lineTo(pointList[i + 1].x, pointList[i + 1].y);
+    }
+    ctx.stroke();
+    ctx.save();
+    ctx.lineWidth = thickness * 0.8;
+    ctx.lineCap = "butt";
+    ctx.strokeStyle = "white";
+    ctx.setLineDash([3, 3]);
+    specialEdgeList.forEach((v) => {
+      const point1 = pointList[v.i1];
+      const point2 = pointList[v.i2];
+      ctx.beginPath();
+      ctx.moveTo(point1.x, point1.y);
+      ctx.lineTo(point2.x, point2.y);
+      ctx.stroke();
+    });
+    ctx.restore();
+    const DEFAULT_SPECIAL_POINT_RADIUS = 4;
+    const DEFAULT_BORDER = 2;
+    pointList.forEach((p) => {
+      if (p.specialPoint) {
+        this.drawSpecialPoint(canvas, p, DEFAULT_SPECIAL_POINT_RADIUS + DEFAULT_BORDER, color);
+        this.drawSpecialPoint(canvas, p, DEFAULT_SPECIAL_POINT_RADIUS, "white");
+      }
+    });
+    ctx.restore();
+    return pointList;
+  }
+  static drawCircle(canvas, anchorPoint, radius, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {
+      startAngleDeg = 0,
+      endAngleDeg = 360,
+      thickness = 1,
+      color = DEFAULT_COLOR,
+      fill = DEFAULT_COLOR
+    } = options;
+    const startAngleRad = UnitUtils.deg2rad(startAngleDeg);
+    const endAngleRad = UnitUtils.deg2rad(endAngleDeg);
+    ctx.save();
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = thickness;
+    ctx.arc(anchorPoint.x, anchorPoint.y, radius, startAngleRad, endAngleRad, false);
+    ctx.stroke();
+    if (fill) {
+      ctx.fill();
+    }
+    ctx.closePath();
+    ctx.restore();
+  }
+  static drawCircleWithFill(canvas, anchorPoint, radius = 3, options = {}) {
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR} = options;
+    ctx.save();
+    const startAngleRad = UnitUtils.deg2rad(0);
+    const endAngleRad = UnitUtils.deg2rad(360);
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(anchorPoint.x, anchorPoint.y, radius, startAngleRad, endAngleRad, false);
+    ctx.fill();
+    ctx.restore();
+  }
+  static drawSpecialPoint(canvas, point, pointRadius = 6, fillStyle) {
+    const ctx = canvas.getContext("2d");
+    const {x, y} = point;
+    ctx.save();
+    ctx.beginPath();
+    ctx.fillStyle = fillStyle;
+    const newPointRadius = pointRadius * 1.5;
+    const xl = newPointRadius * Math.sqrt(3) / 2;
+    const yl = newPointRadius / 2;
+    ctx.moveTo(x, y - newPointRadius);
+    ctx.lineTo(x - xl, y + yl);
+    ctx.lineTo(x + xl, y + yl);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+  static drawPolygon(canvas, pointList, options = {}) {
+    const {isClose = false, lineType = ELineTypes.Line} = options;
+    if (isClose === true) {
+      pointList = [...pointList, pointList[0]];
+    }
+    if (lineType === ELineTypes.Curve) {
+      pointList = PolygonUtils.createSmoothCurvePointsFromPointList([...pointList]);
+    }
+    this.drawLineWithPointList(canvas, pointList, __spreadProps(__spreadValues({}, options), {
+      lineType: ELineTypes.Line
+    }));
+    return pointList;
+  }
+  static drawPolygonWithFill(canvas, pointList, options = {}) {
+    if (pointList.length < 2) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    const {color = DEFAULT_COLOR, lineType = ELineTypes.Line} = options;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    if (lineType === ELineTypes.Curve) {
+      pointList = PolygonUtils.createSmoothCurvePointsFromPointList([...pointList, pointList[0]]);
+    }
+    const [startPoint, ...otherPointList] = pointList;
+    ctx.moveTo(startPoint.x, startPoint.y);
+    otherPointList.forEach((point) => {
+      ctx.lineTo(point.x, point.y);
+    });
+    ctx.fill();
+    ctx.restore();
+    return pointList;
+  }
+  static drawPolygonWithFillAndLine(canvas, pointList, options = {}) {
+    const {strokeColor, fillColor, thickness, lineCap, isClose, lineType} = options;
+    const newPointList = this.drawPolygon(canvas, pointList, {
+      color: strokeColor,
+      thickness,
+      lineCap,
+      isClose,
+      lineType
+    });
+    this.drawPolygonWithFill(canvas, pointList, {color: fillColor, lineType});
+    return newPointList;
+  }
+  static drawPolygonWithKeyPoint(canvas, pointList, options = {}) {
+    const {pointColor = "white", strokeColor} = options;
+    const newPointList = this.drawPolygon(canvas, pointList, options);
+    newPointList.forEach((point) => {
+      this.drawCircleWithFill(canvas, point, 4, {color: strokeColor});
+      this.drawCircleWithFill(canvas, point, 3, {color: pointColor});
+    });
+    return newPointList;
+  }
+  static drawSelectedPolygonWithFillAndLine(canvas, pointList, options = {}) {
+    const {pointColor = "white", strokeColor} = options;
+    const newPointList = this.drawPolygonWithFillAndLine(canvas, pointList, options);
+    newPointList.forEach((point) => {
+      this.drawCircleWithFill(canvas, point, 4, {color: strokeColor});
+      this.drawCircleWithFill(canvas, point, 3, {color: pointColor});
+    });
+    return newPointList;
+  }
+  static drawText(canvas, startPoint, text, options = {}) {
+    if (!text) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    const {
+      color = DEFAULT_COLOR,
+      font = DEFAULT_FONT,
+      shadowColor = "",
+      shadowBlur = 0,
+      shadowOffsetX = 0,
+      shadowOffsetY = 0,
+      textMaxWidth = 164,
+      offsetX = 0,
+      offsetY = 0,
+      textAlign = "start",
+      lineHeight
+    } = options;
+    ctx.save();
+    ctx.textAlign = textAlign;
+    ctx.fillStyle = color != null ? color : "white";
+    ctx.font = font;
+    ctx.shadowColor = shadowColor;
+    ctx.shadowOffsetX = shadowOffsetX;
+    ctx.shadowOffsetY = shadowOffsetY;
+    ctx.shadowBlur = shadowBlur;
+    this.wrapText(canvas, `${text}`, startPoint.x + offsetX, startPoint.y + offsetY, textMaxWidth, lineHeight);
+    ctx.restore();
+  }
+  static wrapText(canvas, text, x, y, maxWidth, lineHeight) {
+    if (typeof text !== "string" || typeof x !== "number" || typeof y !== "number") {
+      return;
+    }
+    const context = canvas.getContext("2d");
+    if (typeof maxWidth === "undefined") {
+      maxWidth = canvas && canvas.width || 300;
+    }
+    if (typeof lineHeight === "undefined") {
+      lineHeight = canvas && parseInt(window.getComputedStyle(canvas).lineHeight, 10) || parseInt(window.getComputedStyle(document.body).lineHeight, 10);
+    }
+    const arrParagraph = text.split("\n");
+    for (let i = 0; i < arrParagraph.length; i++) {
+      const arrText = arrParagraph[i].split("");
+      let line = "";
+      for (let n = 0; n < arrText.length; n++) {
+        const testLine = line + arrText[n];
+        const metrics = context.measureText(testLine);
+        const testWidth = metrics.width;
+        if (!maxWidth) {
+          maxWidth = 300;
+        }
+        if (testWidth > maxWidth && n > 0) {
+          context.fillText(line, x, y);
+          line = arrText[n];
+          y += lineHeight;
+        } else {
+          line = testLine;
+        }
+      }
+      context.fillText(line, x, y);
+      y += lineHeight;
+    }
+  }
+  static drawArrow(ctx, startPoint, endPoint, options = {}) {
+    const {color = DEFAULT_COLOR, thickness = 1, lineCap = "round", theta = 30, headLen = 10} = options;
+    const angle = Math.atan2(startPoint.y - endPoint.y, startPoint.x - endPoint.x) * 180 / Math.PI;
+    const angle1 = (angle + theta) * Math.PI / 180;
+    const angle2 = (angle - theta) * Math.PI / 180;
+    const topX = headLen * Math.cos(angle1);
+    const topY = headLen * Math.sin(angle1);
+    const botX = headLen * Math.cos(angle2);
+    const botY = headLen * Math.sin(angle2);
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.lineCap = lineCap;
+    ctx.beginPath();
+    ctx.moveTo(endPoint.x + topX, endPoint.y + topY);
+    ctx.lineTo(endPoint.x, endPoint.y);
+    ctx.lineTo(endPoint.x + botX, endPoint.y + botY);
+    ctx.stroke();
+    ctx.restore();
+  }
+  static drawArrowByCanvas(canvas, startPoint, endPoint, options = {}) {
+    const ctx = canvas.getContext("2d");
+    this.drawArrow(ctx, startPoint, endPoint, options);
+  }
+  static drawCuboid(canvas, cuboid, options = {}) {
+    const {backPoints, direction, frontPoints} = cuboid;
+    const {strokeColor, thickness, fillColor} = options;
+    const defaultStyle = {
+      color: strokeColor,
+      thickness
+    };
+    if (backPoints) {
+      const backPointList = AxisUtils.transformPlain2PointList(backPoints);
+      _DrawUtils.drawPolygon(canvas, backPointList, __spreadProps(__spreadValues({}, defaultStyle), {isClose: true}));
+      const sideLine = getCuboidAllSideLine(cuboid);
+      sideLine == null ? void 0 : sideLine.forEach((line) => {
+        _DrawUtils.drawLine(canvas, line.p1, line.p2, __spreadValues({}, defaultStyle));
+      });
+    }
+    const pointList = AxisUtils.transformPlain2PointList(frontPoints);
+    if (direction && backPoints && frontPoints) {
+      const points = getPointListsByDirection({direction, frontPoints, backPoints});
+      if (points) {
+        _DrawUtils.drawPolygonWithFill(canvas, points, {color: fillColor});
+      }
+    }
+    _DrawUtils.drawPolygon(canvas, pointList, __spreadProps(__spreadValues({}, defaultStyle), {isClose: true}));
+  }
+  static drawCuboidWithText(canvas, cuboid, options, dataConfig) {
+    const {strokeColor} = options;
+    const textColor = strokeColor;
+    const {config, hiddenText, selectedID, headerText, bottomText} = dataConfig;
+    const {backPoints, frontPoints, textAttribute} = cuboid;
+    const frontPointsSizeWidth = frontPoints.br.x - frontPoints.bl.x;
+    _DrawUtils.drawCuboid(canvas, cuboid, options);
+    let showText = "";
+    if ((config == null ? void 0 : config.isShowOrder) && cuboid.order && (cuboid == null ? void 0 : cuboid.order) > 0) {
+      showText = `${cuboid.order}`;
+    }
+    if (cuboid.attribute) {
+      showText = `${showText}  ${AttributeUtils.getAttributeShowText(cuboid.attribute, config == null ? void 0 : config.attributeList)}`;
+    }
+    if (!hiddenText && backPoints && showText) {
+      _DrawUtils.drawText(canvas, {x: backPoints.tl.x, y: backPoints.tl.y - 5}, headerText != null ? headerText : showText, {
+        color: strokeColor,
+        textMaxWidth: 300
+      });
+    }
+    const textPosition = getCuboidTextAttributeOffset({
+      cuboid,
+      currentPos: {x: 0, y: 0},
+      zoom: 1,
+      topOffset: 16,
+      leftOffset: 0
+    });
+    if (!hiddenText && textAttribute && cuboid.id !== selectedID) {
+      const textWidth = Math.max(20, frontPointsSizeWidth * 0.8);
+      _DrawUtils.drawText(canvas, {x: textPosition.left, y: textPosition.top}, bottomText != null ? bottomText : textAttribute, {
+        color: textColor,
+        textMaxWidth: textWidth
+      });
+    }
+  }
+};
+let DrawUtils = _DrawUtils;
+DrawUtils.drawImg = (canvas, imgNode, options = {}) => {
+  const ctx = canvas.getContext("2d");
+  const {zoom = DEFAULT_ZOOM, currentPos = DEFAULT_CURRENT_POS, rotate = DEFAULT_ROTATE, imgAttribute} = options;
+  ctx.save();
+  switch (rotate) {
+    case 0:
+      ctx.translate(currentPos.x, currentPos.y);
+      break;
+    case 90:
+      ctx.translate(currentPos.x + imgNode.height * zoom, currentPos.y);
+      ctx.rotate(90 * Math.PI / 180);
+      break;
+    case 180:
+      ctx.translate(currentPos.x + imgNode.width * zoom, currentPos.y + imgNode.height * zoom);
+      ctx.rotate(Math.PI);
+      break;
+    case 270:
+      ctx.translate(currentPos.x, currentPos.y + imgNode.width * zoom);
+      ctx.rotate(270 * Math.PI / 180);
+      break;
+    default:
+      ctx.translate(currentPos.x, currentPos.y);
+      break;
+  }
+  if (imgAttribute) {
+    const {contrast, saturation, brightness} = imgAttribute;
+    ctx.filter = `saturate(${saturation + 100}%) contrast(${contrast + 100}%) brightness(${brightness + 100}%)`;
+  }
+  ctx.drawImage(imgNode, 0, 0, imgNode.width * zoom, imgNode.height * zoom);
+  ctx.restore();
+};
+
+export { DrawUtils as default };

package/es/utils/tool/EnhanceCommonToolUtils.js

@@ -1 +1,48 @@
-import{EToolName as o,ECheckModel as n}from"../../constant/tool.js";import i from"../../core/toolOperation/ScribbleTool.js";import a from"../../core/toolOperation/cuboidOperation.js";import p from"../../core/toolOperation/pointCloud2dOperation.js";import c from"../../core/toolOperation/checkOperation.js";import l from"../../core/toolOperation/polygonOperation.js";import{RectOperation as m}from"../../core/toolOperation/rectOperation.js";import s from"../../core/toolOperation/tagOperation.js";import O from"../../core/toolOperation/LineToolOperation.js";import u from"../../core/toolOperation/pointOperation.js";import T from"../../core/toolOperation/TextToolOperation.js";import f from"../../core/toolOperation/segmentByRect.js";import j from"./CommonToolUtils.js";const e=t=>{switch(t){case o.Rect:case o.RectTrack:return m;case o.SegmentByRect:return f;case o.Tag:return s;case o.Polygon:return l;case n.Check:return c;case o.Line:return O;case o.Point:return u;case o.Text:return T;case o.ScribbleTool:return i;case o.Cuboid:return a;case o.PointCloudPolygon:return p;default:throw new Error("not match tool")}};class r extends j{}r.getCurrentOperation=e;export{r as default,e as getCurrentOperation};
+import { EToolName, ECheckModel } from '../../constant/tool.js';
+import ScribbleTool from '../../core/toolOperation/ScribbleTool.js';
+import CuboidOperation from '../../core/toolOperation/cuboidOperation.js';
+import PointCloud2dOperation from '../../core/toolOperation/pointCloud2dOperation.js';
+import CheckOperation from '../../core/toolOperation/checkOperation.js';
+import PolygonOperation from '../../core/toolOperation/polygonOperation.js';
+import { RectOperation } from '../../core/toolOperation/rectOperation.js';
+import TagOperation from '../../core/toolOperation/tagOperation.js';
+import LineToolOperation from '../../core/toolOperation/LineToolOperation.js';
+import PointOperation from '../../core/toolOperation/pointOperation.js';
+import TextToolOperation from '../../core/toolOperation/TextToolOperation.js';
+import SegmentByRect from '../../core/toolOperation/segmentByRect.js';
+import CommonToolUtils from './CommonToolUtils.js';
+
+const getCurrentOperation = (toolName) => {
+  switch (toolName) {
+    case EToolName.Rect:
+    case EToolName.RectTrack:
+      return RectOperation;
+    case EToolName.SegmentByRect:
+      return SegmentByRect;
+    case EToolName.Tag:
+      return TagOperation;
+    case EToolName.Polygon:
+      return PolygonOperation;
+    case ECheckModel.Check:
+      return CheckOperation;
+    case EToolName.Line:
+      return LineToolOperation;
+    case EToolName.Point:
+      return PointOperation;
+    case EToolName.Text:
+      return TextToolOperation;
+    case EToolName.ScribbleTool:
+      return ScribbleTool;
+    case EToolName.Cuboid:
+      return CuboidOperation;
+    case EToolName.PointCloudPolygon:
+      return PointCloud2dOperation;
+    default:
+      throw new Error("not match tool");
+  }
+};
+class EnhanceCommonToolUtils extends CommonToolUtils {
+}
+EnhanceCommonToolUtils.getCurrentOperation = getCurrentOperation;
+
+export { EnhanceCommonToolUtils as default, getCurrentOperation };