-
Notifications
You must be signed in to change notification settings - Fork 2
/
colorPicker.min.js
1 lines (1 loc) · 5.42 KB
/
colorPicker.min.js
1
function colorPicker(a,b){this.canvas=a,this.ctx=a.getContext("2d");var c=this;this.nov=b.nov||!1,this.clrImg=new Image,this.nov?this.clrImg.src=b.image||"color-nov-500.png":this.clrImg.src=b.image||"color-500.png",this.h=0,this.s=0,this.v=0,this.changed=!0,this.bgcolor=b.bgcolor||"rgb(200,200,200)",this.setWidth(a.width,a.height,b.centerX||!1,b.centerY||!1,b.scale||!1),this.drawInterval=b.drawInterval||10,this.onColorChange=b.onColorChange||!1,this.onCenterClick=b.onCenterClick||!1,this.setColorHSV(b.h,b.s,b.v),"undefined"==typeof b.autoStartDraw||1==b.autoStartDraw?this.drawID=setInterval(function(){c.draw()},c.drawInterval):this.drawID=!1,a.addEventListener("mousedown",function(a){if(document.body.contains(c.canvas)){var b=c.getMousePos(a);if(c.selected=c.contains(b.x,b.y),!c.selected){var d=b.x-c.centerX,e=b.y-c.centerY,f=Math.pow(d,2)+Math.pow(e,2);if(f<=c.scale*c.scale*25&&f>c.scale*c.scale){var g=Math.atan2(e,d);if(g+=e<0?2*Math.PI:0,f<=c.scale*c.scale*16){c.h=g;var h=(Math.sqrt(f)-c.scale)/3/c.scale;h=h>1?1:h,c.s=h<0?0:h,c.selected="c",c.onColorChange&&c.onColorChange()}else c.nov||(c.v=g/(2*Math.PI)%1,c.selected="v",c.onColorChange&&c.onColorChange())}}c.changed=!0}}),a.addEventListener("mousemove",function(a){if(c.selected&&document.body.contains(c.canvas)){c.onColorChange&&c.onColorChange();var b=c.getMousePos(a),d=b.x-c.centerX,e=b.y-c.centerY,f=Math.atan2(e,d);if(f+=e<0?2*Math.PI:0,"c"==c.selected){c.h=f;var g=(Math.sqrt(Math.pow(d,2)+Math.pow(e,2))-c.scale)/3/c.scale;g=g>1?1:g,g=g<0?0:g,c.s=g}else"v"!=c.selected||c.nov||(c.v=f/(2*Math.PI)%1);c.changed=!0}}),window.addEventListener("mouseup",function(a){if(c.selected&&document.body.contains(c.canvas)&&(c.selected=!1,c.changed=!0),c.onCenterClick&&document.body.contains(c.canvas)){var b=c.getMousePos(a);Math.pow(c.centerX-b.x,2)+Math.pow(c.centerY-b.y,2)<c.scale*c.scale&&c.onCenterClick()}})}colorPicker.prototype.draw=function(a){this.changed&&(this.ctx.save(),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.beginPath(),this.ctx.rect(0,0,2*this.centerX,2*this.centerY),this.ctx.closePath(),this.ctx.fillStyle=this.bgcolor,this.ctx.fill(),this.ctx.translate(this.centerX,this.centerY),this.nov||(hsl=hsv2hsl(this.h/Math.PI*180,100*this.s,100),hsl="hsl("+hsl.h+","+hsl.s+"%,"+hsl.l+"%)",this.ctx.lineWidth=this.scale,this.ctx.beginPath(),this.ctx.strokeStyle=hsl,this.ctx.arc(0,0,4*this.scale+this.scale/2,0,2*Math.PI,!1),this.ctx.stroke(),this.ctx.closePath()),this.ctx.drawImage(this.clrImg,5*-this.scale,5*-this.scale,10*this.scale,10*this.scale),hsl=hsv2hsl(this.h/Math.PI*180,100*this.s,100*this.v),hsl="hsl("+hsl.h+","+hsl.s+"%,"+hsl.l+"%)",this.ctx.beginPath(),this.ctx.arc(0,0,1*this.scale,0,2*Math.PI,!1),this.ctx.closePath(),this.ctx.fillStyle=hsl,this.ctx.fill(),this.ctx.save(),this.ctx.rotate(this.h),this.ctx.translate(this.scale+this.s*this.scale*3,0),this.drawHandle("c"),this.ctx.restore(),this.nov||(this.ctx.rotate(2*this.v*Math.PI),this.ctx.translate(4.5*this.scale,0),this.drawHandle("v")),this.ctx.restore()),this.changed=!1},colorPicker.prototype.drawHandle=function(a){var b=Math.round(this.scale/6.66667,0);this.ctx.lineWidth=b,this.ctx.beginPath(),this.ctx.arc(0,0,this.scale/2-b/2,0,2*Math.PI,!1),this.ctx.closePath(),this.ctx.fillStyle="rgba(0,0,0,0)",this.ctx.strokeStyle=this.selected===a?"rgba(220,220,220,0.7)":"rgba(255,255,255,1)",this.ctx.stroke(),this.ctx.fill()},colorPicker.prototype.getMousePos=function(a){var b=this.canvas.getBoundingClientRect();return{x:a.clientX-b.left,y:a.clientY-b.top}},colorPicker.prototype.getHandlers=function(){return{xv:this.centerX+Math.cos(2*this.v*Math.PI)*(4.5*this.scale),yv:this.centerY+Math.sin(2*this.v*Math.PI)*(4.5*this.scale),xc:this.centerX+Math.cos(this.h)*(3*this.scale*this.s+this.scale),yc:this.centerY+Math.sin(this.h)*(3*this.scale*this.s+this.scale)}},colorPicker.prototype.contains=function(a,b){return handlersPos=this.getHandlers(),!this.nov&&Math.pow(handlersPos.xv-a,2)+Math.pow(handlersPos.yv-b,2)<=this.scale/2*this.scale/2?"v":Math.pow(handlersPos.xc-a,2)+Math.pow(handlersPos.yc-b,2)<=this.scale/2*this.scale/2&&"c"};var hsv2hsl=function(a,b,c){var d=(2-b/100)*c/2;return hsl={h:a,s:b*c/(d<50?2*d:200-2*d),l:d},isNaN(hsl.s)&&(hsl.s=0),hsl},hsv2rgb=function(a,b,c){var d,e,f,g=Math.floor(6*a),h=6*a-g,i=c*(1-b),j=c*(1-h*b),k=c*(1-(1-h)*b);switch(g%6){case 0:d=c,e=k,f=i;break;case 1:d=j,e=c,f=i;break;case 2:d=i,e=c,f=k;break;case 3:d=i,e=j,f=c;break;case 4:d=k,e=i,f=c;break;case 5:d=c,e=i,f=j}return{r:Math.round(255*d),g:Math.round(255*e),b:Math.round(255*f)}};colorPicker.prototype.setWidth=function(a,b,c,d,e){this.canvas.width=a,this.canvas.heigth=b,this.ctx.canvas.width=a,this.ctx.canvas.height=b,this.centerX=c||a/2,this.centerY=d||b/2,this.scale=e||Math.min(a,b)/10,this.changed=!0},colorPicker.prototype.getColorHSV=function(){return this.nov&&(this.v=1),{h:this.h/(2*Math.PI),s:this.s,v:this.v}},colorPicker.prototype.getColorHSL=function(){return this.nov&&(this.v=1),hsl=hsv2hsl(this.h,this.s,this.v),{h:hsl.h/(2*Math.PI),s:hsl.s,l:hsl.l}},colorPicker.prototype.getColorRGB=function(){return this.nov&&(this.v=1),hsv2rgb(this.h,this.s,this.v)},colorPicker.prototype.setColorHSV=function(a,b,c){this.h=a<=1?a*(2*Math.PI):0,this.s=b<=1?b:0,this.v=c<=1?c:0,this.nov&&(this.v=1),this.changed=!0},colorPicker.prototype.startDraw=function(){if(!this.drawID){var a=this;this.drawID=setInterval(function(){a.draw()},a.drawInterval)}},colorPicker.prototype.stopDraw=function(){this.drawID&&(clearInterval(this.drawID),this.drawID=!1)};