var ReinventedColorWheel=function(){"use strict" var e=function(e){var t=e[0],n=e[1]/100,h=e[2]/100 return 0===h?[0,0,0]:[t,2*(n*=(h*=2)<=1?h:2-h)/(h+n)*100,(h+n)/2*100]} var t,n,h,i=function(e){var t,n,h=e[0],i=e[1]/100,s=e[2]/100 return t=i*s,[h,100*(t=(t/=(n=(2-i)*s)<=1?n:2-n)||0),100*(n/=2)]},s="PointerEvent"in window !s&&"ontouchend"in window?(t=function(e,t){return e.addEventListener("touchstart",function(n){(h=1===n.touches.length&&e)&&(n.preventDefault(),t(n.targetTouches[0]))})},n=function(e,t){return e.addEventListener("touchmove",function(n){h===e&&(n.preventDefault(),t(n.targetTouches[0]))})}):(t=function(e,t){return e.addEventListener(s?"pointerdown":"mousedown",function(n){0===n.button&&(h=e,t(n))})},n=function(e,t){return addEventListener(s?"pointermove":"mousemove",function(n){h===e&&t(n)})},addEventListener(s?"pointerup":"mouseup",function(){h=void 0})) var o={hsv:[0,100,100],hsl:[0,100,50],wheelDiameter:200,wheelThickness:20,handleDiameter:16,wheelReflectsSaturation:!0,onChange:function(){}} function l(e,t){return e?[r(e[0])?(n=e[0],h=360,i=(n+.5|0)%h,i<0?i+h:i):t[0],r(e[1])?a(e[1]):t[1],r(e[2])?a(e[2]):t[2]]:t var n,h,i}function a(e){return e<0?0:e>100?100:e}function r(e){return"number"==typeof e&&isFinite(e)}function d(e,t){var n=document.createElement(e) return n.className=t,n}return function(){function s(e){var i=this this.options=e,this.wheelDiameter=this._option("wheelDiameter"),this.wheelThickness=this._option("wheelThickness"),this.handleDiameter=this._option("handleDiameter"),this.onChange=this._option("onChange"),this.wheelReflectsSaturation=this._option("wheelReflectsSaturation"),this.rootElement=this.options.appendTo.appendChild(d("div","reinvented-color-wheel")),this.hueWheelElement=this.rootElement.appendChild(d("canvas","reinvented-color-wheel--hue-wheel")),this.hueWheelContext=this.hueWheelElement.getContext("2d"),this.hueHandleElement=this.rootElement.appendChild(d("div","reinvented-color-wheel--hue-handle")),this.svSpaceElement=this.rootElement.appendChild(d("canvas","reinvented-color-wheel--sv-space")),this.svSpaceContext=this.svSpaceElement.getContext("2d"),this.svHandleElement=this.rootElement.appendChild(d("div","reinvented-color-wheel--sv-handle")),this._redrawHueWheel=function(){i._redrawHueWheelRequested=!1 var e=i.wheelDiameter,t=e/2,n=t-i.wheelThickness/2,h=Math.PI/180,s=i.wheelReflectsSaturation?","+i.hsl[1]+"%,"+i.hsl[2]+"%)":",100%,50%)",o=i.hueWheelContext o.clearRect(0,0,e,e),o.lineWidth=i.wheelThickness for(var l=0;l<360;l++)o.beginPath(),o.arc(t,t,n,(l-90.7)*h,(l-89.3)*h),o.strokeStyle="hsl("+l+s,o.stroke()},this._onMoveHueHandle=function(e){var t=i.hueWheelElement.getBoundingClientRect(),n=i.wheelDiameter/2,h=e.clientX-t.left-n,s=e.clientY-t.top-n,o=Math.atan2(s,h) i.setHSV(180*o/Math.PI+90)},this._onMoveSvHandle=function(e){var t=i.svSpaceElement.getBoundingClientRect(),n=100*(e.clientX-t.left)/t.width,h=100*(t.bottom-e.clientY)/t.height i.setHSV(i.hsv[0],n,h)},this.hueWheelContext.imageSmoothingEnabled=!1,this.svSpaceContext.imageSmoothingEnabled=!1,!e.hsv&&e.hsl?this.hsv=s.hsl2hsv(this.hsl=l(e.hsl,o.hsl)):this.hsl=s.hsv2hsl(this.hsv=l(e.hsv,o.hsv)),t(this.hueWheelElement,function(e){var t=i.hueWheelElement.getBoundingClientRect() i.hueWheelContext.getImageData(e.clientX-t.left,e.clientY-t.top,1,1).data[3]?i._onMoveHueHandle(e):h=void 0}),n(this.hueWheelElement,this._onMoveHueHandle),t(this.svSpaceElement,this._onMoveSvHandle),n(this.svSpaceElement,this._onMoveSvHandle),this.redraw()}return s.prototype.setHSV=function(){var e=this.hsv,t=this.hsv=l(arguments,e),n=e[0]-t[0],h=e[1]-t[1]||e[2]-t[2] n&&(this.hsl[0]=this.hsv[0],this._redrawHueHandle(),this._updateSvBackground()),h&&(this.hsl=s.hsv2hsl(t),this._redrawSvHandle(),this.wheelReflectsSaturation&&!this._redrawHueWheelRequested&&(requestAnimationFrame(this._redrawHueWheel),this._redrawHueWheelRequested=!0)),(n||h)&&this.onChange(this)},s.prototype.setHSL=function(){this.setHSV.apply(this,s.hsl2hsv(l(arguments,this.hsl)))},s.prototype.redraw=function(){this.hueWheelElement.width=this.hueWheelElement.height=this.wheelDiameter,this.svSpaceElement.width=this.svSpaceElement.height=(this.wheelDiameter-2*this.wheelThickness)*Math.sqrt(2)/2 var e=this.hueHandleElement.style,t=this.svHandleElement.style e.width=e.height=t.width=t.height=this.handleDiameter+"px",e.marginLeft=e.marginTop=t.marginLeft=t.marginTop=-this.handleDiameter/2+"px",this._redrawHueWheel(),this._redrawHueHandle(),this._redrawSvSpace(),this._redrawSvHandle()},s.prototype._redrawSvSpace=function(){this._updateSvBackground() var e=this.svSpaceElement.width,t=this.svSpaceContext,n=t.createLinearGradient(0,0,e,0),h=t.createLinearGradient(0,0,0,e) n.addColorStop(0,"rgba(255,255,255,1)"),n.addColorStop(1,"rgba(255,255,255,0)"),h.addColorStop(0,"rgba(0,0,0,0)"),h.addColorStop(1,"rgba(0,0,0,1)"),t.fillStyle=n,t.fillRect(0,0,e,e),t.fillStyle=h,t.fillRect(0,0,e,e)},s.prototype._updateSvBackground=function(){this.svSpaceElement.style.backgroundColor="hsl("+this.hsv[0]+",100%,50%)"},s.prototype._redrawHueHandle=function(){var e=this.wheelDiameter/2,t=e-this.wheelThickness/2,n=(this.hsv[0]-90)*Math.PI/180,h=this.hueHandleElement.style h.left=t*Math.cos(n)+e+"px",h.top=t*Math.sin(n)+e+"px"},s.prototype._redrawSvHandle=function(){var e=this.svSpaceElement,t=this.svHandleElement.style t.left=e.offsetLeft+e.offsetWidth*this.hsv[1]/100+"px",t.top=e.offsetTop+e.offsetHeight*(1-this.hsv[2]/100)+"px"},s.prototype._option=function(e){var t=this.options[e] return void 0!==t?t:o[e]},s.default=s,s.defaultOptions=o,s.hsv2hsl=i,s.hsl2hsv=e,s}()}()