canvas-select/lib/canvas-select.min.js

一个用于图片标注的javascript库，基于canvas，简单轻量，支持矩形、多边形、点、折线、圆形、网格。

/*!
 * canvas-select v2.29.0
 * 一个用于图片标注的javascript库，基于canvas，简单轻量，支持矩形、多边形、点、折线、圆形、网格。
 * (c) 2025 heylight
 * Released under the MIT License.
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).CanvasSelect=e()}(this,(function(){"use strict";var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};function e(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function s(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(s.prototype=i.prototype,new s)}var i=function(){return i=Object.assign||function(t){for(var e,i=1,s=arguments.length;i<s;i++)for(var a in e=arguments[i])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},i.apply(this,arguments)};function s(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var s,a,n=i.call(t),h=[];try{for(;(void 0===e||e-- >0)&&!(s=n.next()).done;)h.push(s.value)}catch(t){a={error:t}}finally{try{s&&!s.done&&(i=n.return)&&i.call(n)}finally{if(a)throw a.error}}return h}"function"==typeof SuppressedError&&SuppressedError;var a,n=function(t,e){this.label="",this.coor=[],this.active=!1,this.creating=!1,this.dragging=!1,this.uuid=function(){for(var t=[],e="0123456789abcdef",i=0;i<36;i++){var s=Math.floor(16*Math.random());t[i]=e.slice(s,s+1)}t[14]="4";var a=3&t[19]|8;return t[19]=e.slice(a,a+1),t[8]=t[13]=t[18]=t[23]="-",t.join("")}(),this.index=e,Object.assign(this,t)},h=function(t){function i(e,i){var s=t.call(this,e,i)||this;return s.type=1,s}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=s(this.coor,2),e=s(t[0],2),i=e[0],a=e[1],n=s(t[1],2),h=n[0],o=n[1];return[[i,a],[i+(h-i)/2,a],[h,a],[h,a+(o-a)/2],[h,o],[i+(h-i)/2,o],[i,o],[i,a+(o-a)/2]]},enumerable:!1,configurable:!0}),i}(n),o=function(t){function i(e,i){var s=t.call(this,e,i)||this;return s.type=2,s}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){return this.coor.length>2?this.coor:[]},enumerable:!1,configurable:!0}),i}(n),r=function(t){function i(e,i){var s=t.call(this,e,i)||this;return s.type=3,s}return e(i,t),i}(n),c=function(){function t(){this._eventTree={}}return t.prototype.on=function(t,e){var i=this._eventTree[t];Array.isArray(i)?i.push(e):this._eventTree[t]=[e]},t.prototype.emit=function(t){for(var e=[],i=1;i<arguments.length;i++)e[i-1]=arguments[i];var a=this._eventTree[t];Array.isArray(a)&&a.forEach((function(t){return t.apply(void 0,function(t,e,i){if(i||2===arguments.length)for(var s,a=0,n=e.length;a<n;a++)!s&&a in e||(s||(s=Array.prototype.slice.call(e,0,a)),s[a]=e[a]);return t.concat(s||Array.prototype.slice.call(e))}([],s(e),!1))}))},t.prototype.off=function(t,e){var i=this._eventTree[t],s=i.find((function(t){return t===e}));Array.isArray(i)&&s&&i.splice(s,1)},t}(),l=function(t){function i(e,i){var s=t.call(this,e,i)||this;return s.type=4,s}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){return this.coor.length>1?this.coor:[]},enumerable:!1,configurable:!0}),i}(n),d=function(t){function i(e,i){var s=t.call(this,e,i)||this;return s.type=5,s.radius=0,s.radius=e.radius||s.radius,s}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=s(this.coor,2),e=t[0],i=t[1];return[[e,i-this.radius],[e+this.radius,i],[e,i+this.radius],[e-this.radius,i]]},enumerable:!1,configurable:!0}),i}(n),u=function(t){function i(e,i){var s=t.call(this,e,i)||this;return s.type=6,s.row=1,s.col=1,s.selected=[],s.row=e.row>0?e.row:s.row,s.col=e.col>0?e.col:s.col,s.selected=Array.isArray(e.selected)?e.selected:[],s}return e(i,t),Object.defineProperty(i.prototype,"ctrlsData",{get:function(){var t=s(this.coor,2),e=s(t[0],2),i=e[0],a=e[1],n=s(t[1],2),h=n[0],o=n[1];return[[i,a],[i+(h-i)/2,a],[h,a],[h,a+(o-a)/2],[h,o],[i+(h-i)/2,o],[i,o],[i,a+(o-a)/2]]},enumerable:!1,configurable:!0}),Object.defineProperty(i.prototype,"gridRects",{get:function(){for(var t=s(this.coor,2),e=s(t[0],2),i=e[0],a=e[1],n=s(t[1],2),o=n[0],r=n[1],c=this,l=c.row,d=c.col,u=c.strokeStyle,v=c.fillStyle,f=c.active,p=c.creating,g=c.lineWidth,y=(o-i)/this.col,I=(r-a)/this.row,m=[],S=0;S<l;S++)for(var M=0;M<d;M++){var b=[i+M*y,a+S*I],x=new h({coor:[b,[b[0]+y,b[1]+I]],strokeStyle:u,fillStyle:v,active:f,creating:p,lineWidth:g},S*d+M);m.push(x)}return m},enumerable:!1,configurable:!0}),i}(n),v="2.29.0";return function(t){t[t.None=0]="None",t[t.Rect=1]="Rect",t[t.Polygon=2]="Polygon",t[t.Dot=3]="Dot",t[t.Line=4]="Line",t[t.Circle=5]="Circle",t[t.Grid=6]="Grid"}(a||(a={})),function(t){function n(e,i){var s=t.call(this)||this;s.version=v,s.lock=!1,s.readonly=!1,s.MIN_WIDTH=10,s.MIN_HEIGHT=10,s.MIN_RADIUS=5,s.strokeStyle="#0f0",s.fillStyle="rgba(0, 0, 255, 0.1)",s.lineWidth=1,s.activeStrokeStyle="#f00",s.activeFillStyle="rgba(0, 0, 255, 0.1)",s.ctrlStrokeStyle="#000",s.ctrlFillStyle="#fff",s.ctrlRadius=3,s.hideLabel=!1,s.labelFillStyle="#fff",s.labelFont="10px sans-serif",s.textFillStyle="#000",s.labelMaxLen=10,s.WIDTH=0,s.HEIGHT=0,s.dataset=[],s.isMagnifierVisible=!0,s.magnifierPosition="auto",s.remmber=[],s.mouse=[0,0],s.remmberOrigin=[0,0],s.createType=a.None,s.ctrlIndex=-1,s.image=new Image,s.IMAGE_ORIGIN_WIDTH=0,s.IMAGE_WIDTH=0,s.IMAGE_ORIGIN_HEIGHT=0,s.IMAGE_HEIGHT=0,s.originX=0,s.originY=0,s.scaleStep=0,s.scrollZoom=!0,s.timer=null,s.dblTouch=300,s.dblTouchStore=0,s.alpha=!0,s.focusMode=!1,s.scaleTouchStore=0,s.isTouch2=!1,s.isMobile=navigator.userAgent.includes("Mobile"),s.labelUp=!1,s.isCtrlKey=!1,s.ctrlCode="ControlLeft",s.gridMenuEnable=!0,s.gridSelectedFillStyle="rgba(255, 255, 0, 0.6)",s.handleLoad=s.handleLoad.bind(s),s.handleContextmenu=s.handleContextmenu.bind(s),s.handleMousewheel=s.handleMousewheel.bind(s),s.handleMouseDown=s.handleMouseDown.bind(s),s.handleMouseMove=s.handleMouseMove.bind(s),s.handleMouseUp=s.handleMouseUp.bind(s),s.handleDblclick=s.handleDblclick.bind(s),s.handleKeyup=s.handleKeyup.bind(s),s.handleKeydown=s.handleKeydown.bind(s);var n="string"==typeof e?document.querySelector(e):e;return n instanceof HTMLCanvasElement?(s.canvas=n,s.offScreen=document.createElement("canvas"),s.initSetting(),s.initEvents(),i&&s.setImage(i)):console.warn("HTMLCanvasElement is required!"),s}return e(n,t),Object.defineProperty(n.prototype,"activeShape",{get:function(){return this.dataset.find((function(t){return t.active}))||{}},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"scale",{get:function(){return this.IMAGE_ORIGIN_WIDTH&&this.IMAGE_WIDTH?this.IMAGE_WIDTH/this.IMAGE_ORIGIN_WIDTH:1},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"imageMin",{get:function(){return Math.min(this.IMAGE_WIDTH,this.IMAGE_HEIGHT)},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"imageOriginMax",{get:function(){return Math.max(this.IMAGE_ORIGIN_WIDTH,this.IMAGE_ORIGIN_HEIGHT)},enumerable:!1,configurable:!0}),n.prototype.createMagnifierCanvas=function(){this.isMagnifierVisible&&(this.magnifierCanvas=this.magnifierCanvas||document.createElement("canvas"),this.magnifierCtx=this.magnifierCanvas&&this.magnifierCanvas.getContext("2d",{willReadFrequently:!0}),this.magnifierCanvas.style.position="fixed",this.magnifierCanvas.style.pointerEvents="none",this.magnifierCanvas.style.zIndex="1000",this.magnifierCanvas.style.border="1px solid black",this.magnifierCanvas.style.borderRadius="50%",this.magnifierCanvas.style.width="100px",this.magnifierCanvas.style.height="100px",document.body.appendChild(this.magnifierCanvas))},n.prototype.createMagnifier=function(t,e){this.magnifierCanvas?this.updateMagnifier(t,e):this.createMagnifierCanvas()},n.prototype.updateMagnifier=function(t,e){var i,a;if(this.canvas&&this.magnifierCanvas&&this.magnifierCtx){var n=100,h=window.devicePixelRatio||1;if(this.magnifierCanvas.width=n,this.magnifierCanvas.height=n,this.magnifierCtx.clearRect(0,0,n,n),this.magnifierPosition&&2===this.magnifierPosition.length){var o=s(this.magnifierPosition,2),r=o[0],c=o[1];this.magnifierCanvas.style.left="".concat(r,"px"),this.magnifierCanvas.style.top="".concat(c,"px")}else this.magnifierCanvas.style.left="".concat(t+10,"px"),this.magnifierCanvas.style.top="".concat(e+10,"px");var l=this.getImageDataFromCanvas(this.canvas,[t*h-50,e*h-50,n,n]),d=null===(i=this.magnifierCanvas.getContext("2d",{willReadFrequently:!0}))||void 0===i?void 0:i.createImageData(this.magnifierCanvas.width,this.magnifierCanvas.height);if(d&&l){for(var u=0,v=0;v<n;v+=1)for(var f=0;f<n;f+=1){for(var p=v;p<v+1;p++)for(var g=f;g<f+1;g++){var y=4*(p*n+g);d.data[y]=l.data[u],d.data[y+1]=l.data[u+1],d.data[y+2]=l.data[u+2],d.data[y+3]=l.data[u+3]}u+=4}null===(a=this.magnifierCanvas.getContext("2d",{willReadFrequently:!0}))||void 0===a||a.putImageData(d,0,0),this.magnifierCtx.strokeStyle="rgba(0, 0, 0, 0.5)",this.magnifierCtx.lineWidth=2,this.magnifierCtx.strokeRect(0,0,n,n)}}},n.prototype.destroyMagnifier=function(){this.magnifierCanvas&&(this.magnifierCanvas.remove(),this.magnifierCanvas=void 0,this.magnifierCtx=void 0)},n.prototype.getImageDataFromCanvas=function(t,e){var i=s(e,4),a=i[0],n=i[1],h=i[2],o=i[3],r=t.getContext("2d",{willReadFrequently:!0});return null==r?void 0:r.getImageData(a,n,h,o)},n.prototype.mergeEvent=function(t){var e,s,a=0,n=0,h=0,o=0;if(this.isMobile&&t.touches){var r=t.touches[0],c=r.clientX,l=r.clientY,d=t.target.getBoundingClientRect(),u=d.left,v=d.top;if(a=Math.round(c-u),n=Math.round(l-v),2===(null===(e=t.touches)||void 0===e?void 0:e.length)){var f=t.touches[1]||{},p=f.clientX,g=void 0===p?0:p,y=f.clientY,I=void 0===y?0:y;h=Math.round(Math.abs((g-c)/2+c)-u),o=Math.round(Math.abs((I-l)/2+l)-v)}else 1===(null===(s=t.touches)||void 0===s?void 0:s.length)&&(h=Math.round(c-u),o=Math.round(l-v))}else a=t.offsetX,n=t.offsetY;return i(i({},t),{mouseX:a,mouseY:n,mouseCX:h,mouseCY:o})},n.prototype.handleLoad=function(){this.emit("load",this.image.src),this.IMAGE_ORIGIN_WIDTH=this.IMAGE_WIDTH=this.image.width,this.IMAGE_ORIGIN_HEIGHT=this.IMAGE_HEIGHT=this.image.height,this.fitZoom()},n.prototype.handleContextmenu=function(t){t.preventDefault(),this.lock},n.prototype.handleMousewheel=function(t){if(t.stopPropagation(),!this.lock&&this.scrollZoom){var e=this.mergeEvent(t),i=e.mouseX,s=e.mouseY;this.mouse=[i,s],this.setScale(t.deltaY<0,!0)}},n.prototype.handleMouseDown=function(t){var e,i,n,c=this;if(t.stopPropagation(),!this.lock){var v=this.mergeEvent(t),f=v.mouseX,p=v.mouseY,g=v.mouseCX,y=v.mouseCY,I=Math.round(f/this.scale),m=Math.round(p/this.scale);if(this.mouse=this.isMobile&&2===(null===(e=t.touches)||void 0===e?void 0:e.length)?[g,y]:[f,p],this.remmberOrigin=[f-this.originX,p-this.originY],!this.isMobile&&1===t.buttons||this.isMobile&&1===(null===(i=t.touches)||void 0===i?void 0:i.length)){var S=this.activeShape.ctrlsData||[];if(this.ctrlIndex=S.findIndex((function(t){return c.isPointInCircle(c.mouse,t,c.ctrlRadius)})),this.ctrlIndex>-1&&!this.readonly){var M=s(S[this.ctrlIndex],2),b=M[0],x=M[1];this.activeShape.type===a.Polygon&&this.activeShape.coor.length>2&&0===this.ctrlIndex&&this.handleDblclick(t),this.remmber=[[I-b,m-x]]}else if(this.isInBackground(t)){if(this.activeShape.creating&&!this.readonly){if([a.Polygon,a.Line].includes(this.activeShape.type)){var E=s(this.activeShape.coor[this.activeShape.coor.length-1],2),H=E[0],T=E[1];if(H!==I&&T!==m){var G=Math.round(I-this.originX/this.scale),w=Math.round(m-this.originY/this.scale);this.activeShape.coor.push([G,w])}}}else if(this.createType===a.None||this.readonly||this.isCtrlKey){var C=s(this.hitOnShape(this.mouse),2),_=C[0],D=C[1];if(_>-1&&D){if(D.dragging=!0,this.dataset.forEach((function(t,e){return t.active=e===_})),this.dataset.splice(_,1),this.dataset.push(D),!this.readonly)if(this.remmber=[],[a.Dot,a.Circle].includes(D.type)){var k=s(D.coor,2);H=k[0],T=k[1];this.remmber=[[I-H,m-T]]}else D.coor.forEach((function(t){c.remmber.push([I-t[0],m-t[1]])}));this.emit("select",D)}else this.activeShape.active=!1,this.dataset.sort((function(t,e){return t.index-e.index})),this.emit("select",null)}else{var W=void 0,R=[G=Math.round(I-this.originX/this.scale),w=Math.round(m-this.originY/this.scale)];switch(this.createType){case a.Rect:(W=new h({coor:[R,R]},this.dataset.length)).creating=!0;break;case a.Polygon:(W=new o({coor:[R]},this.dataset.length)).creating=!0;break;case a.Dot:W=new r({coor:R},this.dataset.length),this.emit("add",W);break;case a.Line:(W=new l({coor:[R]},this.dataset.length)).creating=!0;break;case a.Circle:(W=new d({coor:R},this.dataset.length)).creating=!0;break;case a.Grid:(W=new u({coor:[R,R]},this.dataset.length)).creating=!0}W&&(this.dataset.forEach((function(t){t.active=!1})),W.active=!0,this.dataset.push(W))}this.update()}}else if(!this.isMobile&&2===t.buttons||this.isMobile&&3===(null===(n=t.touches)||void 0===n?void 0:n.length)&&!this.readonly){if([a.Grid].includes(this.activeShape.type)&&this.gridMenuEnable){var A=prompt("x 行 y 列 x,y",[this.activeShape.row,this.activeShape.col].join(","));if("string"==typeof A){var L=s(A.split(","),2),P=L[0],O=L[1];/^[1-9]\d*$/.test(P)&&/^[1-9]\d*$/.test(O)&&(this.activeShape.row=Number(P),this.activeShape.col=Number(O),this.update())}}this.emit("contextmenu",t)}}},n.prototype.handleMouseMove=function(t){var e,i,n,h;if(t.stopPropagation(),!this.lock){var o=this.mergeEvent(t),r=o.mouseX,c=o.mouseY,l=o.mouseCX,d=o.mouseCY,u=Math.round(r/this.scale),v=Math.round(c/this.scale);if(this.mouse=this.isMobile&&2===(null===(e=t.touches)||void 0===e?void 0:e.length)?[l,d]:[r,c],(!this.isMobile&&1===t.buttons||this.isMobile&&1===(null===(i=t.touches)||void 0===i?void 0:i.length))&&this.activeShape.type){if(this.ctrlIndex>-1&&this.remmber.length&&(this.isInBackground(t)||this.activeShape.type===a.Circle)){var f=s(this.remmber,1),p=s(f[0],2),g=p[0],y=p[1];if([a.Rect,a.Grid].includes(this.activeShape.type)){var I=s(this.activeShape.coor,2),m=s(I[0],2),S=m[0],M=m[1],b=s(I[1],2),x=b[0],E=b[1],H=[];switch(this.ctrlIndex){case 0:H=[[u-g,v-y],[x,E]];break;case 1:H=[[S,v-y],[x,E]];break;case 2:H=[[S,v-y],[u-g,E]];break;case 3:H=[[S,M],[u-g,E]];break;case 4:H=[[S,M],[u-g,v-y]];break;case 5:H=[[S,M],[x,v-y]];break;case 6:H=[[u-g,M],[x,v-y]];break;case 7:H=[[u-g,M],[x,E]]}var T=s(H,2),G=s(T[0],2),w=G[0],C=G[1],_=s(T[1],2),D=_[0],k=_[1];(w<0||D<0||C<0||k<0||D>this.IMAGE_ORIGIN_WIDTH||k>this.IMAGE_ORIGIN_HEIGHT)&&(w<0&&(w=0),D<0&&(D=0),C<0&&(C=0),k<0&&(k=0),D>this.IMAGE_ORIGIN_WIDTH&&(D=this.IMAGE_ORIGIN_WIDTH),k>this.IMAGE_ORIGIN_HEIGHT&&(k=this.IMAGE_ORIGIN_HEIGHT)),D-w>=this.MIN_WIDTH&&k-C>=this.MIN_HEIGHT?this.activeShape.coor=[[w,C],[D,k]]:this.emit("warn","Width cannot be less than ".concat(this.MIN_WIDTH,",Height cannot be less than").concat(this.MIN_HEIGHT,"。"))}else if([a.Polygon,a.Line].includes(this.activeShape.type)){var W=[Math.round(u-this.originX/this.scale),Math.round(v-this.originY/this.scale)];this.activeShape.coor.splice(this.ctrlIndex,1,W)}else if(this.activeShape.type===a.Circle){var R=Math.round(u-this.originX/this.scale)-this.activeShape.coor[0];R>=this.MIN_RADIUS&&(this.activeShape.radius=R)}if(this.isMagnifierVisible){var A=s(this.isMobile?[l,d]:[r,c],2),L=A[0],P=A[1];this.createMagnifier(L,P)}}else if(this.activeShape.dragging&&!this.readonly){if(this.isMagnifierVisible&&3===this.activeShape.type){var O=s(this.isMobile?[l,d]:[r,c],2);L=O[0],P=O[1];this.createMagnifier(L,P)}H=[];var N=!0,X=this.IMAGE_ORIGIN_WIDTH||this.WIDTH,Y=this.IMAGE_ORIGIN_HEIGHT||this.HEIGHT;if([a.Dot,a.Circle].includes(this.activeShape.type)){var F=s(this.remmber[0],2),j=F[0];y=v-F[1];((g=u-j)<0||g>X||y<0||y>Y)&&(N=!1),H=[g,y]}else for(var K=0;K<this.activeShape.coor.length;K++){var U=this.remmber[K];g=u-U[0],y=v-U[1];(g<0||g>X||y<0||y>Y)&&(N=!1),H.push([g,y])}N&&(this.activeShape.coor=H)}else if(this.activeShape.creating&&this.isInBackground(t)){g=Math.round(u-this.originX/this.scale),y=Math.round(v-this.originY/this.scale);if([a.Rect,a.Grid].includes(this.activeShape.type))this.activeShape.coor.splice(1,1,[g,y]);else if(this.activeShape.type===a.Circle){var q=s(this.activeShape.coor,2),B=(S=q[0],M=q[1],Math.sqrt(Math.pow(S-g,2)+Math.pow(M-y,2)));this.activeShape.radius=B}}this.update()}else if([a.Polygon,a.Line].includes(this.activeShape.type)&&this.activeShape.creating)this.update();else if(!this.isMobile&&2===t.buttons&&3===t.which||this.isMobile&&1===(null===(n=t.touches)||void 0===n?void 0:n.length)&&!this.isTouch2)this.originX=Math.round(r-this.remmberOrigin[0]),this.originY=Math.round(c-this.remmberOrigin[1]),this.update();else if(this.isMobile&&2===(null===(h=t.touches)||void 0===h?void 0:h.length)){this.isTouch2=!0;var V=t.touches[0],Z=t.touches[1],z=this.scaleTouchStore;this.scaleTouchStore=Math.abs((Z.clientX-V.clientX)*(Z.clientY-V.clientY)),this.setScale(this.scaleTouchStore>z,!0)}}},n.prototype.handleMouseUp=function(t){var e;if(t.stopPropagation(),!this.lock){if(this.destroyMagnifier(),this.isMobile){if(0===(null===(e=t.touches)||void 0===e?void 0:e.length)&&(this.isTouch2=!1),Date.now()-this.dblTouchStore<this.dblTouch)return void this.handleDblclick(t);this.dblTouchStore=Date.now()}if(this.remmber=[],this.activeShape.type!==a.None&&!this.isCtrlKey&&(this.activeShape.dragging=!1,this.activeShape.creating)){if([a.Rect,a.Grid].includes(this.activeShape.type)){var i=s(this.activeShape.coor,2),n=s(i[0],2),h=n[0],o=n[1],r=s(i[1],2),c=r[0],l=r[1];Math.abs(h-c)<this.MIN_WIDTH||Math.abs(o-l)<this.MIN_HEIGHT?(this.dataset.pop(),this.emit("warn","Width cannot be less than ".concat(this.MIN_WIDTH,",Height cannot be less than ").concat(this.MIN_HEIGHT))):(this.activeShape.coor=[[Math.min(h,c),Math.min(o,l)],[Math.max(h,c),Math.max(o,l)]],this.activeShape.creating=!1,this.emit("add",this.activeShape))}else this.activeShape.type===a.Circle&&(this.activeShape.radius<this.MIN_RADIUS?(this.dataset.pop(),this.emit("warn","Radius cannot be less than ".concat(this.MIN_WIDTH))):(this.activeShape.creating=!1,this.emit("add",this.activeShape)));this.update()}}},n.prototype.handleDblclick=function(t){var e=this;if(t.stopPropagation(),!this.lock)if([a.Polygon,a.Line].includes(this.activeShape.type)){var i=this.activeShape.type===a.Polygon&&this.activeShape.coor.length>2,s=this.activeShape.type===a.Line&&this.activeShape.coor.length>1;(i||s)&&(this.emit("add",this.activeShape),this.activeShape.creating=!1,this.update())}else[a.Grid].includes(this.activeShape.type)&&this.activeShape.active&&(this.activeShape.gridRects.forEach((function(t){if(e.isPointInRect(e.mouse,t.coor)){var i=e.activeShape.selected.findIndex((function(e){return t.index===e}));i>-1?e.activeShape.selected.splice(i,1):e.activeShape.selected.push(t.index)}})),this.update())},n.prototype.handleKeydown=function(t){t.code===this.ctrlCode&&(this.isCtrlKey=!0)},n.prototype.handleKeyup=function(t){t.code===this.ctrlCode&&(this.isCtrlKey=!1),this.lock||document.activeElement!==document.body||this.readonly||this.activeShape.type&&([a.Polygon,a.Line].includes(this.activeShape.type)&&"Escape"===t.key?(this.activeShape.coor.length>1&&this.activeShape.creating?this.activeShape.coor.pop():this.deleteByIndex(this.activeShape.index),this.update()):"Backspace"===t.key&&this.deleteByIndex(this.activeShape.index))},n.prototype.initSetting=function(){var t;if(this.canvas&&this.offScreen){var e=window.devicePixelRatio||1;this.image.crossOrigin="anonymous",this.canvas.style.userSelect="none",this.ctx=this.ctx||this.canvas.getContext("2d",{alpha:this.alpha}),this.WIDTH=Math.round(this.canvas.clientWidth),this.HEIGHT=Math.round(this.canvas.clientHeight),this.canvas.width=this.WIDTH*e,this.canvas.height=this.HEIGHT*e,this.canvas.style.width=this.WIDTH+"px",this.canvas.style.height=this.HEIGHT+"px",this.offScreen.width=this.WIDTH,this.offScreen.height=this.HEIGHT,this.offScreenCtx=this.offScreenCtx||this.offScreen.getContext("2d",{willReadFrequently:!0}),null===(t=this.ctx)||void 0===t||t.scale(e,e)}},n.prototype.initEvents=function(){this.canvas&&(this.image.addEventListener("load",this.handleLoad),this.canvas.addEventListener("touchstart",this.handleMouseDown),this.canvas.addEventListener("touchmove",this.handleMouseMove),this.canvas.addEventListener("touchend",this.handleMouseUp),this.canvas.addEventListener("contextmenu",this.handleContextmenu),this.canvas.addEventListener("mousewheel",this.handleMousewheel),this.canvas.addEventListener("wheel",this.handleMousewheel),this.canvas.addEventListener("mousedown",this.handleMouseDown),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseup",this.handleMouseUp),this.canvas.addEventListener("dblclick",this.handleDblclick),document.body.addEventListener("keydown",this.handleKeydown,!0),document.body.addEventListener("keyup",this.handleKeyup,!0))},n.prototype.setImage=function(t){"string"==typeof t?this.image.src=t:(this.image=t,this.image.crossOrigin="anonymous",this.image.complete?this.handleLoad():this.image.addEventListener("load",this.handleLoad))},n.prototype.setData=function(t){var e=this;setTimeout((function(){var i=[];t.forEach((function(t,e){if(Object.prototype.toString.call(t).includes("Object")){var s=void 0;switch(t.type){case a.Rect:s=new h(t,e);break;case a.Polygon:s=new o(t,e);break;case a.Dot:s=new r(t,e);break;case a.Line:s=new l(t,e);break;case a.Circle:s=new d(t,e);break;case a.Grid:s=new u(t,e);break;default:console.warn("Invalid shape",t)}[a.Rect,a.Polygon,a.Dot,a.Line,a.Circle,a.Grid].includes(t.type)&&s&&i.push(s)}else console.warn("Shape must be an enumerable Object.",t)})),e.dataset=i,e.update()}))},n.prototype.hitOnShape=function(t){for(var e,i=-1,s=this.dataset.length-1;s>-1;s--){var n=this.dataset[s];if(!n.hide&&(n.type===a.Dot&&this.isPointInCircle(t,n.coor,this.ctrlRadius)||n.type===a.Circle&&this.isPointInCircle(t,n.coor,n.radius*this.scale)||n.type===a.Rect&&this.isPointInRect(t,n.coor)||n.type===a.Polygon&&this.isPointInPolygon(t,n.coor)||n.type===a.Line&&this.isPointInLine(t,n.coor)||n.type===a.Grid&&this.isPointInRect(t,n.coor))){if(this.focusMode&&!n.active)continue;i=s,e=n;break}}return[i,e]},n.prototype.isInBackground=function(t){var e=this.mergeEvent(t),i=e.mouseX,s=e.mouseY;return i>=this.originX&&s>=this.originY&&i<=this.originX+this.IMAGE_ORIGIN_WIDTH*this.scale&&s<=this.originY+this.IMAGE_ORIGIN_HEIGHT*this.scale},n.prototype.isPointInRect=function(t,e){var i=this,a=s(t,2),n=a[0],h=a[1],o=s(e.map((function(t){return t.map((function(t){return t*i.scale}))})),2),r=s(o[0],2),c=r[0],l=r[1],d=s(o[1],2),u=d[0],v=d[1];return c+this.originX<=n&&n<=u+this.originX&&l+this.originY<=h&&h<=v+this.originY},n.prototype.isPointInPolygon=function(t,e){var i=this;if(!this.offScreenCtx)return!1;this.offScreenCtx.save(),this.offScreenCtx.clearRect(0,0,this.WIDTH,this.HEIGHT),this.offScreenCtx.translate(this.originX,this.originY),this.offScreenCtx.beginPath(),e.forEach((function(t,e){var a,n,h=s(t.map((function(t){return Math.round(t*i.scale)})),2),o=h[0],r=h[1];0===e?null===(a=i.offScreenCtx)||void 0===a||a.moveTo(o,r):null===(n=i.offScreenCtx)||void 0===n||n.lineTo(o,r)})),this.offScreenCtx.closePath(),this.offScreenCtx.fill();var a=this.offScreenCtx.getImageData(0,0,this.WIDTH,this.HEIGHT),n=(t[1]-1)*this.WIDTH*4+4*t[0];return this.offScreenCtx.restore(),0!==a.data[n+3]},n.prototype.isPointInCircle=function(t,e,i){var a=this,n=s(t,2),h=n[0],o=n[1],r=s(e.map((function(t){return t*a.scale})),2),c=r[0],l=r[1];return Math.sqrt(Math.pow(c+this.originX-h,2)+Math.pow(l+this.originY-o,2))<=i},n.prototype.isPointInLine=function(t,e){var i=this;if(!this.offScreenCtx)return!1;this.offScreenCtx.save(),this.offScreenCtx.clearRect(0,0,this.WIDTH,this.HEIGHT),this.offScreenCtx.translate(this.originX,this.originY),this.offScreenCtx.lineWidth=this.lineWidth>5?this.lineWidth:5,this.offScreenCtx.beginPath(),e.forEach((function(t,e){var a,n,h=s(t.map((function(t){return Math.round(t*i.scale)})),2),o=h[0],r=h[1];0===e?null===(a=i.offScreenCtx)||void 0===a||a.moveTo(o,r):null===(n=i.offScreenCtx)||void 0===n||n.lineTo(o,r)})),this.offScreenCtx.stroke();var a=this.offScreenCtx.getImageData(0,0,this.WIDTH,this.HEIGHT),n=(t[1]-1)*this.WIDTH*4+4*t[0];return this.offScreenCtx.restore(),0!==a.data[n+3]},n.prototype.drawRect=function(t,e){var i=this;if(this.ctx&&2===t.coor.length){var a=t.strokeStyle,n=t.fillStyle,h=t.active,o=t.creating,r=t.coor,c=t.lineWidth,l=s(r.map((function(t){return t.map((function(t){return Math.round(t*i.scale)}))})),2),d=s(l[0],2),u=d[0],v=d[1],f=s(l[1],2),p=f[0],g=f[1];this.ctx.save(),this.ctx.lineWidth=c||this.lineWidth,this.ctx.fillStyle=h||o?this.activeFillStyle:(null==e?void 0:e.isSelected)?null==e?void 0:e.selectedFillStyle:n||this.fillStyle,this.ctx.strokeStyle=h||o?this.activeStrokeStyle:a||this.strokeStyle;var y=p-u,I=g-v;o||this.ctx.fillRect(u,v,y,I),this.ctx.strokeRect(u,v,y,I),this.ctx.restore(),this.drawLabel(r[0],t)}},n.prototype.drawPolygon=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=t.fillStyle,n=t.active,h=t.creating,o=t.coor,r=t.lineWidth;if(this.ctx.save(),this.ctx.lineJoin="round",this.ctx.lineWidth=r||this.lineWidth,this.ctx.fillStyle=n||h?this.activeFillStyle:a||this.fillStyle,this.ctx.strokeStyle=n||h?this.activeStrokeStyle:i||this.strokeStyle,this.ctx.beginPath(),o.forEach((function(t,i){var a,n,h=s(t.map((function(t){return Math.round(t*e.scale)})),2),o=h[0],r=h[1];0===i?null===(a=e.ctx)||void 0===a||a.moveTo(o,r):null===(n=e.ctx)||void 0===n||n.lineTo(o,r)})),h){var c=s(this.mouse||[],2),l=c[0],d=c[1];this.ctx.lineTo(l-this.originX,d-this.originY)}else o.length>2&&this.ctx.closePath();this.ctx.fill(),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(o[0],t)}},n.prototype.drawDot=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=t.creating,n=t.fillStyle,h=t.active,o=t.coor,r=t.lineWidth,c=s(o.map((function(t){return t*e.scale})),2),l=c[0],d=c[1];this.ctx.save(),this.ctx.lineWidth=r||this.lineWidth,this.ctx.fillStyle=h||a?this.activeFillStyle:n||this.ctrlFillStyle,this.ctx.strokeStyle=h?this.activeStrokeStyle:i||this.strokeStyle,this.ctx.beginPath(),this.ctx.arc(l,d,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.arc(l,d,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(o,t)}},n.prototype.drawCirle=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=t.fillStyle,n=t.active,h=t.coor;t.label;var o=t.creating,r=t.radius,c=t.ctrlsData,l=t.lineWidth,d=s(h.map((function(t){return t*e.scale})),2),u=d[0],v=d[1];this.ctx.save(),this.ctx.lineWidth=l||this.lineWidth,this.ctx.fillStyle=n||o?this.activeFillStyle:a||this.fillStyle,this.ctx.strokeStyle=n||o?this.activeStrokeStyle:i||this.strokeStyle,this.ctx.beginPath(),this.ctx.arc(u,v,r*this.scale,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.arc(u,v,r*this.scale,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore(),this.drawLabel(c[0],t)}},n.prototype.drawLine=function(t){var e=this;if(this.ctx){var i=t.strokeStyle,a=t.active,n=t.creating,h=t.coor,o=t.lineWidth;if(this.ctx.save(),this.ctx.lineJoin="round",this.ctx.lineWidth=o||this.lineWidth,this.ctx.strokeStyle=a||n?this.activeStrokeStyle:i||this.strokeStyle,this.ctx.beginPath(),h.forEach((function(t,i){var a,n,h=s(t.map((function(t){return Math.round(t*e.scale)})),2),o=h[0],r=h[1];0===i?null===(a=e.ctx)||void 0===a||a.moveTo(o,r):null===(n=e.ctx)||void 0===n||n.lineTo(o,r)})),n){var r=s(this.mouse||[],2),c=r[0],l=r[1];this.ctx.lineTo(c-this.originX,l-this.originY)}this.ctx.stroke(),this.ctx.restore(),this.drawLabel(h[0],t)}},n.prototype.drawGrid=function(t){var e=this;if(this.ctx&&2===t.coor.length){var i=t.strokeStyle,a=t.fillStyle,n=t.active,h=t.creating,o=t.coor,r=t.lineWidth,c=s(o.map((function(t){return t.map((function(t){return Math.round(t*e.scale)}))})),2),l=s(c[0],2),d=l[0],u=l[1],v=s(c[1],2),f=v[0],p=v[1];this.ctx.save(),this.ctx.lineWidth=r||this.lineWidth,this.ctx.fillStyle=n||h?this.activeFillStyle:a||this.fillStyle,this.ctx.strokeStyle=n||h?this.activeStrokeStyle:i||this.strokeStyle,t.gridRects.forEach((function(i,s){var a;e.drawRect(i,{selectedFillStyle:t.selectedFillStyle||e.gridSelectedFillStyle,isSelected:null===(a=t.selected)||void 0===a?void 0:a.includes(s)})}));var g=f-d,y=p-u;h||this.ctx.fillRect(d,u,g,y),this.ctx.strokeRect(d,u,g,y),this.ctx.restore(),this.drawLabel(o[0],t)}},n.prototype.drawCtrl=function(t){var e=this;if(this.ctx){var i=s(t.map((function(t){return t*e.scale})),2),a=i[0],n=i[1];this.ctx.save(),this.ctx.beginPath(),this.ctx.fillStyle=this.ctrlFillStyle,this.ctx.strokeStyle=this.ctrlStrokeStyle,this.ctx.arc(a,n,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.fill(),this.ctx.arc(a,n,this.ctrlRadius,0,2*Math.PI,!0),this.ctx.stroke(),this.ctx.restore()}},n.prototype.drawCtrlList=function(t){var e=this;t.ctrlsData.forEach((function(i,s){t.type===a.Circle?1===s&&e.drawCtrl(i):e.drawCtrl(i)}))},n.prototype.drawLabel=function(t,e){var i=this,a=e.label,n=void 0===a?"":a,h=e.labelFillStyle,o=void 0===h?"":h,r=e.labelFont,c=void 0===r?"":r,l=e.textFillStyle,d=void 0===l?"":l,u=e.hideLabel,v=e.labelUp,f=e.lineWidth,p="boolean"==typeof u?u:this.hideLabel,g="boolean"==typeof v?v:this.labelUp,y=f||this.lineWidth;if(this.ctx&&n.length&&!p){this.ctx.font=c||this.labelFont;var I=n.length<this.labelMaxLen+1?n:"".concat(n.slice(0,this.labelMaxLen),"..."),m=this.ctx.measureText(I),S=parseInt(this.ctx.font)-4,M=m.width+8,b=S+8,x=s(t.map((function(t){return t*i.scale})),2),E=x[0],H=x[1],T=this.IMAGE_ORIGIN_WIDTH-t[0]<M/this.scale,G=this.IMAGE_ORIGIN_HEIGHT-t[1]<b/this.scale,w=t[1]>b/this.scale,C=g?w:G;this.ctx.save(),this.ctx.fillStyle=o||this.labelFillStyle,this.ctx.fillRect(T?E-m.width-4-y/2:E+y/2,C?H-b-y/2:H+y/2,M,b),this.ctx.fillStyle=d||this.textFillStyle,this.ctx.fillText(I,T?E-m.width:E+4+y/2,C?H-b+S+4:H+S+4+y/2,180),this.ctx.restore()}},n.prototype.update=function(){var t=this;window.cancelAnimationFrame(this.timer),this.timer=window.requestAnimationFrame((function(){if(t.ctx){t.ctx.save(),t.ctx.clearRect(0,0,t.WIDTH,t.HEIGHT),t.ctx.translate(t.originX,t.originY),t.IMAGE_WIDTH&&t.IMAGE_HEIGHT&&t.ctx.drawImage(t.image,0,0,t.IMAGE_WIDTH,t.IMAGE_HEIGHT);for(var e=t.focusMode?t.activeShape.type?[t.activeShape]:[]:t.dataset,i=0;i<e.length;i++){var s=e[i];if(!s.hide)switch(s.type){case a.Rect:t.drawRect(s);break;case a.Polygon:t.drawPolygon(s);break;case a.Dot:t.drawDot(s);break;case a.Line:t.drawLine(s);break;case a.Circle:t.drawCirle(s);break;case a.Grid:t.drawGrid(s)}}[a.Rect,a.Polygon,a.Line,a.Circle,a.Grid].includes(t.activeShape.type)&&!t.activeShape.hide&&t.drawCtrlList(t.activeShape),t.ctx.restore(),t.emit("updated",t.dataset)}}))},n.prototype.deleteByIndex=function(t){var e=this.dataset.findIndex((function(e){return e.index===t}));e>-1&&(this.emit("delete",this.dataset[e]),this.dataset.splice(e,1),this.dataset.forEach((function(t,e){t.index=e})),this.update())},n.prototype.deleteByUuid=function(t){var e=this.dataset.find((function(e){return e.uuid===t}));e&&(this.emit("delete",e),this.dataset=this.dataset.filter((function(e){return e.uuid!==t})),this.update())},n.prototype.calcStep=function(t){void 0===t&&(t=""),this.IMAGE_WIDTH<this.WIDTH&&this.IMAGE_HEIGHT<this.HEIGHT&&(""!==t&&"b"!==t||(this.setScale(!0,!1,!0),this.calcStep("b"))),(this.IMAGE_WIDTH>this.WIDTH||this.IMAGE_HEIGHT>this.HEIGHT)&&(""!==t&&"s"!==t||(this.setScale(!1,!1,!0),this.calcStep("s")))},n.prototype.setScale=function(t,e,i){if(void 0===e&&(e=!1),void 0===i&&(i=!1),!this.lock&&!(!t&&this.imageMin<20||t&&this.IMAGE_WIDTH>100*this.imageOriginMax)){t?this.scaleStep++:this.scaleStep--;var a=0,n=0,h=s(this.mouse||[],2),o=h[0],r=h[1];e&&(a=(o-this.originX)/this.scale,n=(r-this.originY)/this.scale);var c=Math.abs(this.scaleStep),l=this.IMAGE_WIDTH;if(this.IMAGE_WIDTH=Math.round(this.IMAGE_ORIGIN_WIDTH*Math.pow(this.scaleStep>=0?1.05:.95,c)),this.IMAGE_HEIGHT=Math.round(this.IMAGE_ORIGIN_HEIGHT*Math.pow(this.scaleStep>=0?1.05:.95,c)),e)this.originX=o-a*this.scale,this.originY=r-n*this.scale;else{var d=this.IMAGE_WIDTH/l;this.originX=this.WIDTH/2-(this.WIDTH/2-this.originX)*d,this.originY=this.HEIGHT/2-(this.HEIGHT/2-this.originY)*d}i||this.update()}},n.prototype.fitZoom=function(){this.calcStep(),this.IMAGE_HEIGHT/this.IMAGE_WIDTH>=this.HEIGHT/this.WIDTH?(this.IMAGE_WIDTH=this.IMAGE_ORIGIN_WIDTH/(this.IMAGE_ORIGIN_HEIGHT/this.HEIGHT),this.IMAGE_HEIGHT=this.HEIGHT):(this.IMAGE_WIDTH=this.WIDTH,this.IMAGE_HEIGHT=this.IMAGE_ORIGIN_HEIGHT/(this.IMAGE_ORIGIN_WIDTH/this.WIDTH)),this.originX=(this.WIDTH-this.IMAGE_WIDTH)/2,this.originY=(this.HEIGHT-this.IMAGE_HEIGHT)/2,this.update()},n.prototype.setFocusMode=function(t){this.focusMode=t,this.update()},n.prototype.destroy=function(){this.canvas&&(this.image.removeEventListener("load",this.handleLoad),this.canvas.removeEventListener("contextmenu",this.handleContextmenu),this.canvas.removeEventListener("mousewheel",this.handleMousewheel),this.canvas.removeEventListener("wheel",this.handleMousewheel),this.canvas.removeEventListener("mousedown",this.handleMouseDown),this.canvas.removeEventListener("touchend",this.handleMouseDown),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("touchmove",this.handleMouseMove),this.canvas.removeEventListener("mouseup",this.handleMouseUp),this.canvas.removeEventListener("touchend",this.handleMouseUp),this.canvas.removeEventListener("dblclick",this.handleDblclick),document.body.removeEventListener("keydown",this.handleKeydown,!0),document.body.removeEventListener("keyup",this.handleKeyup,!0),this.canvas.width=this.WIDTH,this.canvas.height=this.HEIGHT,this.canvas.style.width="",this.canvas.style.height="",this.canvas.style.userSelect="")},n.prototype.resize=function(){this.canvas&&(this.canvas.removeAttribute("width"),this.canvas.removeAttribute("height"),this.canvas.style.width="",this.canvas.style.height="",this.initSetting(),this.update())},n}(c)}));
//# sourceMappingURL=canvas-select.min.js.map