canvas-mark-board
Version:
## 简介 `canvas-mark-board` 基于原生canvas封装的图像标注工具，在 vue / react / 原生js 应用中都可以实现标注功能。提供了一系列事件和方法，用于管理标注对象、绘制标注形状、导入标注数据等操作。
2 lines (1 loc) • 27.1 kB
JavaScript
function t(t,i,s,e){return new(s||(s=Promise))((function(o,n){function h(t){try{a(e.next(t))}catch(t){n(t)}}function r(t){try{a(e.throw(t))}catch(t){n(t)}}function a(t){var i;t.done?o(t.value):(i=t.value,i instanceof s?i:new s((function(t){t(i)}))).then(h,r)}a((e=e.apply(t,i||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const i={_events:Object.create(null),on(t,i){this._events[t]?this._events[t].push(i):this._events[t]=[i]},on_(t,i,s){return s&&(i=i.bind(s)),this.on(t,i),{type:t,listener:i}},off(t,i){this._events[t]&&(this._events[t]=this._events[t].filter((t=>t!==i)))},off_(t){if(!t)return;const i=t instanceof Array?t:[t];i.forEach((t=>this.off(t.type,t.listener))),i.length=0},emit(t,...i){this._events[t]&&this._events[t].forEach((t=>t.call(this,...i)))}};const s=["destroy","constructor"];const e={};const o={set(t,i=1,s=0,e=0,o=1,n=0,h=0){t.a=i,t.b=s,t.c=e,t.d=o,t.e=n,t.f=h},get:function(){return{a:1,b:0,c:0,d:1,e:0,f:0}},translateInner(t,i,s){t.e+=t.a*i+t.c*s,t.f+=t.b*i+t.d*s},scale(t,i,s=i){t.a*=i,t.b*=i,t.c*=s,t.d*=s},scaleOfInner(t,i,s,e=s){n.translateInner(t,i.x,i.y),n.scale(t,s,e),n.translateInner(t,-i.x,-i.y)},scaleOfOuter(t,i,s,o=s){n.toInnerPoint(t,i,e),n.scaleOfInner(t,e,s,o)},toInnerPoint(t,i,s,e){const{x:o,y:n}=i,{a:h,b:r,c:a,d:l}=t,c=1/(h*l-r*a);if(s||(s=i),s.x=(o*l-n*a)*c,s.y=(n*h-o*r)*c,!e){const{e:i,f:e}=t;s.x-=(i*l-e*a)*c,s.y-=(e*h-i*r)*c}}},n=o;function h(t,i,s,e){let o=1/0,n=-1;return i.forEach(((i,s)=>{let e=Math.sqrt(Math.pow(i.x-t.x,2)+Math.pow(i.y-t.y,2));e<o&&(o=e,n=s)})),o<s/e?n:-1}const r=(t,i,s=50,e=40)=>{const{x:o,y:n}=t,{x:h,y:r}=i;let a=Math.atan2(r-n,h-o);return[{x:h-s*Math.cos(a+e*Math.PI/180),y:r-s*Math.sin(a+e*Math.PI/180)},{x:h-s*Math.cos(a-e*Math.PI/180),y:r-s*Math.sin(a-e*Math.PI/180)}]},a=(t,i)=>Math.sqrt(Math.pow(t.x-i.x,2)+Math.pow(t.y-i.y,2));function l(t,i){return t.x===i.x&&t.y===i.y}function c(t,i){let s=!1,e=1/0;for(let o=0,n=i.length-1;o<i.length;n=o++){const h=i[o].x,r=i[o].y,a=i[n].x,l=i[n].y;r>t.y!=l>t.y&&t.x<(a-h)*(t.y-r)/(l-r)+h&&(s=!s);const c=a-h,d=l-r,u=((t.x-h)*c+(t.y-r)*d)/(c*c+d*d),p=Math.max(0,Math.min(1,u)),x=h+p*c,v=r+p*d,b=Math.sqrt(Math.pow(t.x-x,2)+Math.pow(t.y-v,2));b<e&&(e=b)}return s?-e:e}function d(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(t){var i=16*Math.random()|0;return("x"===t?i:3&i|8).toString(16)}))}function u(t,i,s){const e=window.devicePixelRatio||1,o=i.getBoundingClientRect(),n=Math.round(o.width),h=Math.round(o.height);return(i.width!==Math.round(n*e)||i.height!==Math.round(h*e))&&(i.width=Math.round(n*e),i.height=Math.round(h*e)),t.setTransform(1,0,0,1,0,0),t.scale(e,e),t.transform(s.a,s.b,s.c,s.d,s.e,s.f),e}var p=Object.freeze({__proto__:null,MatrixHelper:o,applyDPR:u,getArrow:r,getDistance:a,getMinDistance:h,getSides:(t,i)=>{const{x:s,y:e}=t,{x:o,y:n}=i;return[{x:(s+o)/2-(e-n)/6,y:(e+n)/2+(s-o)/6},{x:(s+o)/2+(e-n)/6,y:(e+n)/2-(s-o)/6}]},getUUID:d,isPointInPolygon:c,isSamePoint:l});class x{}class v extends x{constructor(t){super(),this.config=t}get __tag(){return"Circle"}draw(){const{center:t,radius:i,fillColor:s="black",ctx:e}=this.config,{x:o,y:n}=t;e.save(),e.beginPath(),e.fillStyle=s,e.arc(o,n,i,0,2*Math.PI),e.fill(),e.closePath(),e.restore()}}class b{constructor(){this.id="",this.group=[],this.pointList=[],this.oldPointList=[],this.label="",this.color="#ff0000",this.index=1,this.boxEventIds=[],this.status="draw",this.completeing=!1,this.expent=5,this.mouseDown=!1,this.lastMousePoint={x:0,y:0},this.acctivePointIndex=-1,this.rotation=void 0}setSelect(t){this.box.selectObject&&(this.box.selectObject.status="done",this.box.selectObject.render(),this.box.selectObject=void 0),this.status=t?"edit":"done",this.box.selectObject=this,this.render(),this.box.emit("onchange")}setData(t){const{label:i,color:s}=t;i&&(this.label=i),s&&(this.color=s),this.render(),this.box.render(),this.box.emit("onchange")}}class L extends b{constructor(t){super(),this.completeOffset=30,this.id=d(),this.minPointCount=2,this.box=t,this.index=t.markObjectList.length+1}boxMousedown(t){let i=t;"draw"==this.status&&(this.pointList=[i,i],this.mouseDown=!0),this.box.selectObject&&this.box.selectObject.id===this.id&&this.isPointInside(i)&&(this.mouseDown=!0,this.lastMousePoint=this.box.lastPoint)}setCursor(){}setMoveEdit(t){}boxMousemove(){var t;if((!this.box.selectObject||this.box.selectObject.id==this.id)&&1!=this.completeing)if("draw"==this.status&&this.pointList[0]&&(this.pointList[1]=this.box.lastPoint,this.render()),this.setCursor(),(null===(t=this.box.selectObject)||void 0===t?void 0:t.id)===this.id&&this.mouseDown&&"edit"==this.status){let t={x:this.box.lastPoint.x-this.lastMousePoint.x,y:this.box.lastPoint.y-this.lastMousePoint.y};-1==this.acctivePointIndex?this.pointList=this.pointList.map((i=>({x:i.x+t.x,y:i.y+t.y}))):this.setMoveEdit(t),this.lastMousePoint=this.box.lastPoint,this.render()}else"edit"==this.status&&(this.acctivePointIndex=h(this.box.lastPoint,this.vertexList,this.expent,this.box.t.a),this.render())}boxMouseup(){if(this.mouseDown&&"edit"==this.status&&this.acctivePointIndex>-1&&(this.box.selectObject=this),this.box.selectObject){if(this.box.selectObject.id!=this.id)return;this.box.selectObject.id===this.id&&(this.status="edit",this.lastMousePoint=this.box.lastPoint,this.acctivePointIndex=h(this.lastMousePoint,this.vertexList,this.expent,this.box.t.a),this.render(),this.box.render())}else"draw"!==this.status&&(this.status="done");this.mouseDown=!1,"draw"==this.status&&2===this.pointList.length&&this.complete()}destory(){this.pointList=[],this.removeAll()}removeAll(){for(var t=0;t<this.group.length;t++)this.group[t]=null;this.group=[]}complete(){return t(this,void 0,void 0,(function*(){if(this.pointList.length<this.minPointCount)return;if(Math.max(Math.abs(this.pointList[0].x-this.pointList[1].x),Math.abs(this.pointList[0].y-this.pointList[1].y))<this.completeOffset)return this.status="draw",this.pointList=[],void this.render();this.completeing=!0;let t=yield new Promise(((t,i)=>{this.box.emit("oncomplete",{ok:t,err:i})})).catch((()=>{this.completeing=!1,this.pointList=[],this.render()}));t&&(this.completeing=!1,this.label=null==t?void 0:t.label,this.color=null==t?void 0:t.color,this.status="done",this.render(),this.box.render(),this.box.addObjectData())}))}get vertexList(){return this.pointList}get resultPoints(){return this.pointList}get pathData(){let t="";return this.pointList.length&&(this.pointList.forEach(((i,s)=>{t+=0===s?`M${i.x},${i.y}`:`L${i.x},${i.y}`})),t+="Z "),t}get indexPoint(){return this.pointList[0]}render(){this.removeAll();let{config:t,regionCtx:i,t:{a:s}}=this.box;this.box.selectObject||this.box.clearCanvas(i),i.lineWidth=t.lineWidth/s,i.strokeStyle="draw"===this.status?t.drawColor:this.color;let e=new Path2D(this.pathData);this.group.push(e),"draw"===this.status&&i.stroke(e),"edit"===this.status&&(this.box.clearCanvas(i),i.stroke(e),i.fillStyle="edit"===this.status?t.fillColor:"rgba(0,0,0,0)",i.fill(e),this.vertexList.map(((t,e)=>{let o=null;o=this.acctivePointIndex===e?new v({ctx:i,center:t,radius:8/s,fillColor:this.color}):new v({ctx:i,center:t,radius:4/s,fillColor:this.color}),o.draw(),this.group.push(o)})))}isPointInside(t){if(!this.pointList.length||"draw"===this.status)return!1;let i=this.expent/this.box.t.a;return c(t,this.vertexList)<i}static import(t,i){let s=new this(t);return s.label=i.label,s.color=i.color||s.color,s.pointList=i.pointList,s.status="done",s.render(),s}}class y extends L{constructor(t){super(t),this.type=g.LINE,this.completeOffset=2}setMoveEdit(){this.pointList[this.acctivePointIndex]={x:this.lastMousePoint.x,y:this.lastMousePoint.y}}isPointInside(t){let i=this.expent/this.box.t.a;return c(t,this.pointList)<i}}class f extends b{constructor(t){super(),this.isClosed=!1,this.maxPointCount=1/0,this.drag=!1,this.minPointCount=2,this.id=d(),this.box=t,this.index=t.markObjectList.length+1,this.boxEventIds=[this.box.on_("oncontextmenu",this.boxContextmenu,this)]}boxContextmenu(){"draw"===this.status&&(this.pointList.pop(),this.render())}boxMousedown(i){return t(this,void 0,void 0,(function*(){if(!this.lastPointDown||!l(i,this.lastPointDown)){if(this.box.selectObject){if(this.box.selectObject.id!==this.id)return;this.isPointInside(i)&&(this.mouseDown=!0),this.lastMousePoint=this.box.lastPoint}if("draw"==this.status){if(this.lastPointDown=i,this.pointList.length>=this.minPointCount&&this.isClosed){let t=2,s={x:i.x-this.pointList[0].x,y:i.y-this.pointList[0].y};if(Math.abs(s.x)<4*t&&Math.abs(s.y)<4*t)return void(yield this.complete())}this.pointList.push(i)}}}))}boxMousemove(){if(!this.box.selectObject||this.box.selectObject.id==this.id){if(this.mouseDown&&"edit"==this.status){this.drag=!0;let t={x:this.box.lastPoint.x-this.lastMousePoint.x,y:this.box.lastPoint.y-this.lastMousePoint.y};-1==this.acctivePointIndex?this.pointList=this.pointList.map((i=>({x:i.x+t.x,y:i.y+t.y}))):this.pointList[this.acctivePointIndex]={x:this.lastMousePoint.x,y:this.lastMousePoint.y},this.lastMousePoint=this.box.lastPoint}else"edit"==this.status&&(this.acctivePointIndex=h(this.box.lastPoint,this.pointList,this.expent,this.box.t.a));"done"!==this.status&&this.render()}}boxMouseup(){if(this.box.selectObject){if(this.box.selectObject.id===this.id?(this.status="edit",this.lastMousePoint=this.box.lastPoint,this.acctivePointIndex=h(this.lastMousePoint,this.pointList,this.expent,this.box.t.a)):"draw"!=this.status&&(this.status="done"),"draw"===this.status&&this.box.selectObject.id!==this.id)return this.pointList=[],void(this.mouseDown=!1);this.render()}else if("edit"===this.status)this.status="done",this.box.render();else if("draw"===this.status){if(this.pointList.length===this.maxPointCount)return void this.complete();this.render()}this.drag&&"edit"==this.status&&this.box.render(),this.drag=!1,this.mouseDown=!1}destory(){this.box.off_(this.boxEventIds),this.pointList=[],this.removeAll()}removeAll(){for(var t=0;t<this.group.length;t++)this.group[t]=null;this.group=[]}complete(){return t(this,void 0,void 0,(function*(){if(this.pointList.length<this.minPointCount)return;this.completeing=!0;let t=yield new Promise(((t,i)=>{this.box.emit("oncomplete",{ok:t,err:i})})).catch((()=>{this.completeing=!1,this.pointList=[],this.render()}));t&&(this.completeing=!1,this.label=null==t?void 0:t.label,this.color=null==t?void 0:t.color,this.status="done",this.render(),this.box.render(),this.box.addObjectData())}))}get pathData(){let t="";return this.pointList.length&&(this.pointList.forEach(((i,s)=>{t+=0===s?`M${i.x},${i.y}`:`L${i.x},${i.y}`})),t+="Z "),t}get indexPoint(){return this.pointList[0]}get resultPoints(){return this.pointList}render(){this.removeAll();let{config:t,regionCtx:i,t:{a:s}}=this.box;if(this.box.selectObject||this.box.clearCanvas(i),i.lineWidth=t.lineWidth/s,i.strokeStyle="draw"===this.status?t.drawColor:this.color,"draw"===this.status){let t=this.pathData;this.pointList.length>=2&&(t+=`\n M${this.pointList[this.pointList.length-1].x},\n ${this.pointList[this.pointList.length-1].y}\n L${this.pointList[this.pointList.length-1].x},\n ${this.pointList[this.pointList.length-1].y} Z`),t+=`L${this.box.lastPoint.x},${this.box.lastPoint.y} Z`;let e=new Path2D(t);this.group.push(e),i.stroke(e),this.pointList.map((t=>{let e=null;e=new v({ctx:i,center:t,radius:4/s,fillColor:this.color}),this.group.push(e),e.draw()}))}if("edit"===this.status){this.box.clearCanvas(i);let e=new Path2D(this.pathData);this.group.push(e),i.stroke(e),i.fillStyle="edit"===this.status?t.fillColor:"rgba(0,0,0,0)",i.fill(new Path2D(this.pathData)),this.pointList.map(((t,e)=>{let o=null;o=this.acctivePointIndex===e?new v({ctx:i,center:t,radius:8/s,fillColor:this.color}):new v({ctx:i,center:t,radius:4/s,fillColor:this.color}),this.group.push(o),o.draw()}))}}isPointInside(t){let i=this.expent/this.box.t.a;return c(t,this.pointList)<i}static import(t,i){let s=new this(t);return s.label=i.label,s.color=i.color||s.color,s.pointList=i.pointList,s.status="done",s.render(),s}}var g;!function(t){t.NONE="",t.RECT="rect",t.POLYGON="polygon",t.CIRCLE="circle",t.ELLIPSE="ellipse",t.POINT="point",t.LINE="line",t.POLYLINE="polyline",t.LINE_ARROW="line_arrow"}(g||(g={}));const w={[g.NONE]:"",[g.RECT]:class extends L{constructor(t){super(t),this.type=g.RECT,this.minPointCount=2}setCursor(){-1!==this.acctivePointIndex&&(this.box.view.style.cursor=["nwse-resize","nesw-resize","nwse-resize","nesw-resize"][this.acctivePointIndex])}setMoveEdit(){let t,i=Object.assign({},this.vertexList[this.acctivePointIndex]);0==this.acctivePointIndex?t=Object.assign({},this.vertexList[2]):1==this.acctivePointIndex?t=Object.assign({},this.vertexList[3]):2==this.acctivePointIndex?t=Object.assign({},this.vertexList[0]):3==this.acctivePointIndex&&(t=Object.assign({},this.vertexList[1])),i=Object.assign({},this.box.lastPoint);let s=Math.min(i.x,t.x),e=Math.min(i.y,t.y),o=Math.max(i.x,t.x),n=Math.max(i.y,t.y);this.pointList=[{x:s,y:e},{x:o,y:n}],this.acctivePointIndex=this.vertexList.findIndex((t=>t.x==i.x&&t.y==i.y))}get pathData(){let t="";return this.vertexList.length&&(this.vertexList.forEach(((i,s)=>{t+=0===s?`M${i.x},${i.y}`:`L${i.x},${i.y}`})),t+="Z "),t}get vertexList(){return 2===this.pointList.length?[this.pointList[0],{x:this.pointList[0].x,y:this.pointList[1].y},this.pointList[1],{x:this.pointList[1].x,y:this.pointList[0].y}]:[]}},[g.POLYGON]:class extends f{constructor(t){super(t),this.type=g.POLYGON,this.minPointCount=3,this.isClosed=!0}},[g.CIRCLE]:class extends L{constructor(t){super(t),this.type=g.CIRCLE}setCursor(){1===this.acctivePointIndex&&(this.box.view.style.cursor="col-resize")}setMoveEdit(t){this.pointList[1]={x:this.pointList[1].x+t.x,y:this.pointList[1].y+t.y}}get vertexList(){return 2===this.pointList.length?[this.pointList[1]]:[]}get indexPoint(){var t;return null===(t=this.pointList)||void 0===t?void 0:t[1]}get pathData(){let t="";if(this.pointList.length){let i={x:2*this.pointList[0].x-this.pointList[1].x,y:2*this.pointList[0].y-this.pointList[1].y},s=a(this.pointList[0],this.pointList[1]);t+=`\n M ${i.x} ${i.y} \n A ${s} ${s} 0 0 1 ${this.pointList[1].x} ${this.pointList[1].y}\n A ${s} ${s} 0 0 1 ${i.x} ${i.y}\n `,t+="Z "}return t}isPointInside(t){let i=this.expent/this.box.initLayout.zoom;if(!this.pointList.length||"draw"===this.status)return!1;let s=Math.sqrt(Math.pow(this.pointList[0].x-t.x,2)+Math.pow(this.pointList[0].y-t.y,2)),e=a(this.pointList[0],this.pointList[1]);return s<=e+i&&0!==e}},[g.ELLIPSE]:class extends L{constructor(t){super(t),this.type=g.ELLIPSE}setCursor(){[0,2].includes(this.acctivePointIndex)?this.box.view.style.cursor="col-resize":[1,3].includes(this.acctivePointIndex)&&(this.box.view.style.cursor="row-resize")}setMoveEdit(t){0===this.acctivePointIndex?this.pointList[1]={x:this.pointList[1].x-t.x,y:this.pointList[1].y}:1===this.acctivePointIndex?this.pointList[1]={x:this.pointList[1].x,y:this.pointList[1].y+t.y}:2===this.acctivePointIndex?this.pointList[1]={x:this.pointList[1].x+t.x,y:this.pointList[1].y}:3===this.acctivePointIndex&&(this.pointList[1]={x:this.pointList[1].x,y:this.pointList[1].y-t.y})}get vertexList(){if(2===this.pointList.length){let t=this.pointList[1].x-this.pointList[0].x,i=this.pointList[1].y-this.pointList[0].y;return[{x:this.pointList[0].x-t,y:this.pointList[0].y},{x:this.pointList[0].x,y:this.pointList[0].y+i},{x:this.pointList[1].x,y:this.pointList[1].y-i},{x:this.pointList[0].x,y:this.pointList[0].y-i}]}return[]}get ellipseData(){if(2===this.pointList.length){let t=Math.abs(this.pointList[1].x-this.pointList[0].x),i=Math.abs(this.pointList[1].y-this.pointList[0].y);return{pointList:this.pointList[0],xr:t,yr:i}}return null}get indexPoint(){return this.vertexList[1]}get pathData(){let t="";if(this.pointList.length){let i=Math.abs(this.pointList[1].x-this.pointList[0].x),s=Math.abs(this.pointList[1].y-this.pointList[0].y);t+=`\n M ${this.vertexList[0].x} ${this.vertexList[0].y} \n A ${i} ${s} 0 0 1 ${this.vertexList[2].x} ${this.vertexList[2].y}\n A ${i} ${s} 0 0 1 ${this.vertexList[0].x} ${this.vertexList[0].y}\n `,t+="Z "}return t}isPointInside(t){if(!this.pointList.length||"draw"===this.status)return!1;const{xr:i,yr:s,pointList:e}=this.ellipseData;return Math.pow(t.x-e.x,2)/Math.pow(i,2)+Math.pow(t.y-e.y,2)/Math.pow(s,2)<=1||h(t,this.vertexList,this.expent,this.box.t.a)>-1}},[g.POLYLINE]:class extends f{constructor(t){super(t),this.type=g.POLYLINE,this.minPointCount=3}get pathData(){let t="";return this.pointList.length&&this.pointList.forEach(((i,s)=>{t+=0===s?`M${i.x},${i.y}`:`L${i.x},${i.y}`})),t}},[g.LINE]:y,[g.LINE_ARROW]:class extends y{constructor(t){super(t),this.type=g.LINE_ARROW}get pathData(){let t="";if(this.pointList.length){if(2===this.pointList.length&&this.pointList[0].x!=this.pointList[1].x&&this.pointList[0].y!=this.pointList[1].y){t+=`M${this.pointList[0].x},${this.pointList[1].y}`,t+=`L${this.pointList[0].x},${this.pointList[1].y}`;const[i,s]=this.pointList,[e,o]=r(i,s,20/this.box.t.a);t+="Z",t+=`M${i.x},${i.y}`,t+=`L${s.x},${s.y}`,t+="Z",t+=`M${e.x},${e.y}`,t+=`L${s.x},${s.y}`,t+=`M${s.x},${s.y}`,t+=`L${o.x},${o.y}`,t+="Z"}t+="Z "}return t}}},{scaleOfOuter:m}=o;let P=class{constructor(t){this.config={drawColor:"yellow",lineWidth:2,fillColor:"rgba(255, 255, 255, 0.3)",showLabel:!1},this.t={a:1,b:0,c:0,d:1,e:0,f:0},this.initLayout={zoom:1,offsetx:0,offsety:0,width:0,height:0},this.lastMovePoint={x:0,y:0},this.moveStatus=!1,this.mouseDown=!1,this.drag=!1,this.currentDrawingType=g.NONE,this.markObjectList=[],this.renderGroup=[],this.markMap=w,this._events=Object.create(null),this.init(t)}init(t){Object.assign(this.config,t||{}),this.view=document.querySelector(t.view),this.view.style.overflow="hidden",this.view.style.position="relative",this.view.style.cursor="default",this.canvas=this.createCanvas(),this.regionCanvas=this.createCanvas(),this.ctx=this.canvas.getContext("2d"),this.regionCtx=this.regionCanvas.getContext("2d"),this.view.addEventListener("mousemove",this.appMousemove.bind(this)),this.view.addEventListener("mousedown",this.appMousedown.bind(this)),this.view.addEventListener("mouseup",this.appMouseup.bind(this)),this.view.addEventListener("wheel",this.appWheel.bind(this)),this.view.addEventListener("dblclick",this.appDblclick.bind(this)),this.view.addEventListener("contextmenu",(t=>{t.preventDefault(),this.emit("oncontextmenu",this.lastMovePoint)})),this.windowKeydown=this.windowKeydown.bind(this),this.windowKeyup=this.windowKeyup.bind(this),window.addEventListener("keydown",this.windowKeydown),window.addEventListener("keyup",this.windowKeyup)}register(t,i){if(!t||!i)throw new Error("need type or markObject");this.markMap[t]=i}get viewDomInfo(){return this.view.getBoundingClientRect()}get lastPoint(){return this.lastMovePoint?this.lastMovePoint:null}createCanvas(){let t=document.createElement("canvas");return t.setAttribute("style",` width: ${this.viewDomInfo.width}px;\n height: ${this.viewDomInfo.height}px;\n position: absolute;\n `),t.width=this.viewDomInfo.width,t.height=this.viewDomInfo.height,this.view.appendChild(t),t}clearCanvas(t){t.save(),t.globalCompositeOperation="copy",t.beginPath(),t.lineTo(0,0),t.stroke(),t.restore()}clearMarkShapes(){this.markObjectList.forEach((t=>{t.destory(),t.render()})),this.markObjectList=[],this.render(),this.emit("onchange"),this.addObjectData()}setBackground(i){return t(this,void 0,void 0,(function*(){return new Promise((t=>{var s;(null===(s=this.img)||void 0===s?void 0:s.src)?this.img.src=i:(this.img=new Image,this.img.src=i,this.img.style.position="absolute",this.img.style.userSelect="none",this.img.style.pointerEvents="none"),this.img.onload=()=>{this.view.insertBefore(this.img,this.canvas),this.setLayout(this.img),t(null)}}))}))}transfrom(){var t;u(this.ctx,this.canvas,this.t),u(this.regionCtx,this.regionCanvas,this.t),this.img&&this.imgTrans(),null===(t=this.selectObject)||void 0===t||t.render(),this.render(),this.emit("ontransform",{t:this.t})}setLayout({width:t,height:i}){let s=this.viewDomInfo.width/t,e=this.viewDomInfo.height/i,o=Math.min(s,e),n=(this.viewDomInfo.width-t*o)/2,h=(this.viewDomInfo.height-i*o)/2;this.t={a:o,b:0,c:0,d:o,e:n,f:h},this.initLayout={zoom:o,offsetx:n,offsety:h,width:t,height:i},this.transfrom()}imgTrans(){this.img.style.transformOrigin=`${this.t.e}px ${this.t.f}px`,this.img.style.transform=`scale(${this.t.a}) translate(${this.t.e}px,${this.t.f}px)`}render(){for(var t=0;t<this.renderGroup.length;t++)this.renderGroup[t]=null;this.renderGroup=[],this.clearCanvas(this.ctx),this.ctx.font=`bold ${~~(14/this.t.a)}px 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif`,this.ctx.lineWidth=this.config.lineWidth/this.t.a,this.markObjectList.map((t=>{"draw"!==t.status&&this.config.showLabel&&(this.ctx.fillStyle=t.color,this.ctx.fillText(t.label+"",t.indexPoint.x,t.indexPoint.y-4/this.t.a)),this.ctx.strokeStyle=t.color;let i=new Path2D(t.pathData);this.renderGroup.push(i),this.ctx.stroke(i)}))}appWheel(t){if(!this.config.disableZoom&&(t.metaKey||t.ctrlKey||t.altKey)){t.preventDefault();const i={x:t.offsetX,y:t.offsetY};let s=t.deltaY>0?.9:1.1;m(this.t,i,s,s),this.transfrom()}}appDblclick(){this.t={a:this.initLayout.zoom,b:0,c:0,d:this.initLayout.zoom,e:this.initLayout.offsetx,f:this.initLayout.offsety},this.transfrom()}appMoving(t){if(this.config.disableMove)return;this.view.style.cursor="grab";let i=(t.x-this.lastMovePoint.x)*this.t.a,s=(t.y-this.lastMovePoint.y)*this.t.a;this.t.e+=i,this.t.f+=s,this.transfrom(),this.emit("onmove",{status:this.moveStatus})}appMousemove(t){let i=this.pointMapping(t);if(this.mouseDown&&this.moveStatus)return this.appMoving(i),void(this.lastMovePoint=this.pointMapping(t));this.view.style.cursor="default",!!this.markObjectList.find((t=>"draw"===t.status))&&(this.view.style.cursor="crosshair"),this.mouseDown&&this.selectObject&&(this.drag=!0,this.view.style.cursor="move"),void 0!==t.buttons&&(this.lastMovePoint={x:i.x,y:i.y}),this.getDrawMark("boxMousemove",i)}appMousedown(t){let i=this.pointMapping(t);this.mouseDown=!0,this.moveStatus||1===t.buttons&&this.getDrawMark("boxMousedown",i)}getDrawMark(t,i){var s,e;this.selectObject&&this.selectObject[t](i);const o=this.markObjectList[this.markObjectList.length-1];o&&"draw"==o.status&&(null===(e=null===(s=this.markObjectList)||void 0===s?void 0:s[this.markObjectList.length-1])||void 0===e||e[t](i))}appMouseup(t){var i,s,e,o,n,h,r;if(this.mouseDown=!1,this.moveStatus)return;let a=this.pointMapping(t);if(this.selectObject&&this.drag)return this.selectObject.isPointInside(a)||-1!==this.selectObject.acctivePointIndex||(this.selectObject=void 0),this.drag=!1,this.getDrawMark("boxMouseup",a),void this.emit("onchange");let l=this.markObjectList[this.markObjectList.length-1];if("draw"===l.status&&l.pointList&&(null===(i=this.lastMovePoint)||void 0===i?void 0:i.x)!==(null===(e=null===(s=null==l?void 0:l.pointList)||void 0===s?void 0:s[0])||void 0===e?void 0:e.x)&&l.pointList.length>0&&(null===(n=null===(o=null==l?void 0:l.pointList)||void 0===o?void 0:o[0])||void 0===n?void 0:n.x)!==(null===(r=null===(h=null==l?void 0:l.pointList)||void 0===h?void 0:h[1])||void 0===r?void 0:r.x))this.selectObject=void 0;else{let t=this.getSelectedIndex(a);void 0!==t&&this.markObjectList[t]?(this.drag&&this.selectObject&&this.selectObject.id!==this.markObjectList[t].id||(this.selectObject=this.markObjectList[t]),"draw"===this.markObjectList[t].status&&(this.selectObject=void 0)):this.selectObject=void 0}this.moveStatus=!1,this.mouseDown=!1,this.drag=!1,this.getDrawMark("boxMouseup",a),this.emit("onchange")}pointMapping(t){let i={x:0,y:0},s=t.offsetX||t.x,e=t.offsetY||t.y;return i.x=(s-this.t.e)/this.t.a,i.y=(e-this.t.f)/this.t.a,i}getSelectedIndex(t){let i=this.markObjectList.map(((t,i)=>i)).reverse().filter((i=>this.markObjectList[i].isPointInside(t)));if(i.length){if(1===i.length)return i[0];if(i.length>1){if(this.drag&&this.selectObject)return this.selectObject.index-1;if(this.selectObject){const t=this.selectObject.index-1;if(i.indexOf(t)>-1)return i[i.indexOf(t)+1]}if(!this.selectObject)return i[0]}}}setDrawType(i){return t(this,void 0,void 0,(function*(){if(this.currentDrawingType){let t=this.markObjectList[this.markObjectList.length-1];t&&"draw"===t.status&&(null==t||t.destory(),this.markObjectList.pop())}this.currentDrawingType=i,this.addObjectData(),this.emit("ondraw",{type:i})}))}get objects(){return this.markObjectList.filter((t=>"draw"!==t.status)).map((t=>{var i;return{id:t.id,label:t.label,type:t.type,color:t.color,select:t.id===(null===(i=this.selectObject)||void 0===i?void 0:i.id),pointList:t.resultPoints||t.pointList,rotation:t.rotation}}))}addObjectData(){let t=null;if(this.currentDrawingType)try{t=new this.markMap[this.currentDrawingType](this)}catch(t){throw new Error(`${this.currentDrawingType} mark type is not supported`)}t&&this.markObjectList.push(t),this.emit("onchange")}setObjectData(t){t.forEach((t=>{let i;if(t.type)try{i=this.markMap[t.type].import(this,t)}catch(i){throw new Error(`${t.type} mark type is not supported`)}i&&this.markObjectList.push(i)})),this.render(),this.emit("onchange")}setObject(t,i){let s=this.markObjectList.find((i=>i.id===t));s&&s.setData(i)}selectObjectById(t){let i=this.markObjectList.find((i=>i.id===t));i&&i.setSelect(!0)}deleteObject(t){var i;let s=this.markObjectList.find((i=>i.id===t));s&&(s.destory(),null===(i=this.selectObject)||void 0===i||i.render(),this.markObjectList.splice(this.markObjectList.indexOf(s),1),this.render(),this.emit("onchange"))}setMoveEditStatus(t){this.moveStatus!=t&&(this.moveStatus=t)}windowKeydown(i){return t(this,void 0,void 0,(function*(){if("Space"==i.code&&(this.setMoveEditStatus(!0),i.preventDefault()),"NumpadEnter"==i.code||"Enter"==i.code){let t=this.markObjectList[this.markObjectList.length-1];"draw"==(null==t?void 0:t.status)&&(yield t.complete())}"Delete"==i.code&&this.selectObject&&this.deleteObject(this.selectObject.id)}))}windowKeyup(t){"Space"==t.code&&this.setMoveEditStatus(!1)}destroy(){window.removeEventListener("keydown",this.windowKeydown),window.removeEventListener("keyup",this.windowKeyup),this.view.innerHTML="",this.view.replaceWith(this.view.cloneNode(!0))}on(t,i){}on_(t,i,s){return{}}off(t,i){}off_(t){}emit(t,...i){}};var O,M;P.MoveMarkObject=L,P.ClickMarkObject=f,P.MarkBoardUtils=p,P=function(t,i,s,e){var o,n=arguments.length,h=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,i,s,e);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(h=(n<3?o(h):n>3?o(i,s,h):o(i,s))||h);return n>3&&h&&Object.defineProperty(i,s,h),h}([(O=i,t=>{var i;(O.prototype?(i=O.prototype,Object.getOwnPropertyNames(i)):Object.keys(O)).forEach((i=>{if(!s.includes(i)&&!M)if(O.prototype){const s=function(t,i){return Object.getOwnPropertyDescriptor(t,i)}(O.prototype,i);s.writable&&(t.prototype[i]=O.prototype[i])}else t.prototype[i]=O[i]}))})],P);var j=P;export{j as default};