blockbench/lib/color-picker.min.js

var ColorWheel=function(t){"use strict";var e=function(t,e,i,s,a,r,n,o){var h,c=("function"==typeof i?i.options:i)||{};if(c.__file="color-wheel.vue",c.render||(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),c._scopeId=s,e&&(h=function(t){e.call(this,n(t))}),void 0!==h)if(c.functional){var d=c.render;c.render=function(t,e){return h.call(e),d(t,e)}}else{var l=c.beforeCreate;c.beforeCreate=l?[].concat(l,h):[h]}return c}({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"color-wheel",staticClass:"cpw_container",class:{s_disabled:t.disabled},style:{width:t.width+"px",height:t.height+"px",position:"relative"},attrs:{id:"color-wheel"}},[i("div",{ref:"farbtastic-solid",staticClass:"farbtastic-solid",staticStyle:{position:"absolute"},style:t.solidStyle}),t._v(" "),i("canvas",{ref:"farbtastic-mask",staticClass:"farbtastic-mask",style:{width:t.width,height:t.height},attrs:{width:t.width,height:t.height}}),t._v(" "),i("canvas",{ref:"farbtastic-overlay",staticClass:"farbtastic-overlay",style:{width:t.width,height:t.height},attrs:{width:t.width,height:t.height},on:{mousedown:t.mousedown,touchstart:t.touchHandleStart,touchmove:t.touchHandleMove,touchend:t.touchHandleEnd}})])},staticRenderFns:[]},function(t){t&&t("data-v-58e7c5c8_0",{source:"\n.s_disabled[data-v-58e7c5c8]{opacity:.5\n}\n.cpw_container[data-v-58e7c5c8]{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none\n}\n.cpw_container .farbtastic-mask[data-v-58e7c5c8]{position:absolute;left:0\n}\n.cpw_container .farbtastic-overlay[data-v-58e7c5c8]{position:absolute;left:0\n}",map:void 0,media:void 0})},{name:"color-wheel",props:{width:{required:!1,type:Number,default:300},height:{required:!1,type:Number,default:300},disabled:{required:!1,type:Boolean,default:!1},startColor:{required:!1,type:String},value:{required:!1,type:String}},mounted:function(){this.hasCamelCaseColorChangeListener&&console.warn("Using the colorChange event is deprecated since version 0.4.0. It will be deleted in version 1.0.0. 'v-model' or the kebab-case variant 'color-change' should be used."),this.initWidget(),this.setColor(this.value||this.startColor||"#000000")},data:function(){return{debug:!1,dragging:!1,circleDrag:!1,color:"",rgb:"",hsl:"",radius:"",square:"",mid:"",markerSize:"",ctxMask:"",ctxOverlay:"",cnvMask:"",cnvOverlay:"",offset:{left:"",top:""}}},watch:{value:function(t,e){t!==e&&this.setColor(t)}},computed:{hasCamelCaseColorChangeListener:function(){return this.$listeners&&this.$listeners.colorChange},solidStyle:function(){return{"background-color":this.pack(this.HSLToRGB([this.hsl[0],1,.5])),width:2*this.square-1+"px",height:2*this.square-1+"px",left:this.mid-this.square+"px",top:this.mid-this.square+"px"}},wheelWidth:function(){return(this.width||300)/10}},methods:{setColor:function(t,e){void 0===e&&(e=!1);var i=this.unpack(t);return this.color!==t&&i&&(this.color=t,this.rgb=i,this.hsl=this.RGBToHSL(this.rgb),this.updateDisplay(e)),this},setHSL:function(t){return this.hsl=t,this.rgb=this.HSLToRGB(t),this.color=this.pack(this.rgb),this.updateDisplay(),this},initWidget:function(){this.radius=(this.width-this.wheelWidth)/2-1,this.square=Math.floor(.7*(this.radius-this.wheelWidth/2))-1,this.mid=Math.floor(this.width/2),this.markerSize=.3*this.wheelWidth,this.cnvMask=this.$refs["farbtastic-mask"],this.ctxMask=this.cnvMask.getContext("2d"),this.cnvOverlay=this.$refs["farbtastic-overlay"],this.ctxOverlay=this.cnvOverlay.getContext("2d"),this.devicePixelRatio=window.devicePixelRatio||1,this.upscaleCanvas(this.cnvMask),this.upscaleCanvas(this.cnvOverlay),this.ctxMask.translate(this.mid,this.mid),this.ctxOverlay.translate(this.mid,this.mid),this.drawCircle(),this.drawMask()},upscaleCanvas:function(t){var e=t.getContext("2d"),i=e.webkitBackingStorePixelRatio||e.mozBackingStorePixelRatio||e.msBackingStorePixelRatio||e.oBackingStorePixelRatio||e.backingStorePixelRatio||1;if(this.devicePixelRatio!==i){var s=this.devicePixelRatio/i,a=t.width,r=t.height;t.width=a*s,t.height=r*s,t.style.width=a+"px",t.style.height=r+"px",e.scale(s,s)}},drawCircle:function(){var t,e,i,s=+new Date,a=this.radius,r=this.wheelWidth,n=8/a/24*Math.PI,o=this.ctxMask,h=0;o.save(),o.lineWidth=r/a,o.scale(a,a);for(var c=0;c<=24;++c){var d=c/24;t=d*Math.PI*2;var l=Math.sin(h),u=-Math.cos(h),f=Math.sin(t),m=-Math.cos(t),v=(h+t)/2,g=1/Math.cos((t-h)/2),p=Math.sin(v)*g,x=-Math.cos(v)*g;if(i=this.pack(this.HSLToRGB([d,1,.5])),0<c){var w=o.createLinearGradient(l,u,f,m);w.addColorStop(0,e),w.addColorStop(1,i),o.strokeStyle=w,o.beginPath(),o.moveTo(l,u),o.quadraticCurveTo(p,x,f,m),o.stroke()}h=t-n,e=i}if(o.restore(),this.debug){var y=document.createElement("div");y.textContent="drawCircle "+(+new Date-s)+" ms",document.body.appendChild(y)}},drawMask:function(){var t,l=this,e=+new Date,i=2*this.square,u=this.square;function s(t,e,i){for(var s=1/t,a=1/e,r=0;r<=e;++r)for(var n=1-r*a,o=0;o<=t;++o){var h=1-o*s,c=1-2*Math.min(n*h,(1-n)*h);i(o,r,0<c?(2*n-1+c)*(.5/c):0,c)}}if(this.ctxMask.getImageData){var a=Math.floor(i/2),r=document.createElement("canvas");r.width=a+1,r.height=a+1;var n=r.getContext("2d"),o=n.getImageData(0,0,a+1,a+1),h=0;s(a,a,function(t,e,i,s){o.data[h++]=o.data[h++]=o.data[h++]=255*i,o.data[h++]=255*s}),n.putImageData(o,0,0),this.ctxMask.drawImage(r,0,0,a+1,a+1,-u,-u,2*u,2*u)}else if(t=window.navigator.userAgent,/MSIE|Trident/.test(t)){var f,m;s(Math.floor(i/6),6,function(t,e,i,s){if(0===t&&(f=m,m=[]),i=Math.round(255*i),s=Math.round(255*s),0<e){var a=f[t][0],r=f[t][1],n=l.packDX(a,r),o=l.packDX(i,s),h=Math.round(l.mid+(.333*(e-1)-1)*u),c=Math.round(l.mid+(.333*e-1)*u),d=document.createElement("div");d.style.position="absolute",d.style.filter="progid:DXImageTransform.Microsoft.Gradient(StartColorStr="+n+", EndColorStr="+o+", GradientType=0)",d.style.top=h,d.style.height=c-h,d.style.left=l.mid+(6*t-u-1),d.style.width=l.mid+(6*t-u-1),l.cnvMask.appendChild(d)}m.push([i,s])})}else{var c=Math.floor(i/2);s(c,c,function(t,e,i,s){var a=Math.round(255*i);l.ctxMask.fillStyle="rgba("+a+", "+a+", "+a+", "+s+")",l.ctxMask.fillRect(2*t-u-1,2*e-u-1,2,2)})}if(this.debug){var d=document.createElement("div");d.textContent="drawMask "+(+new Date-e)+" ms",document.body.appendChild(d)}},drawMarkers:function(){var t=this.width,e=Math.ceil(this.markerSize/4),i=this.markerSize-e+1,s=6.28*this.hsl[0],a=Math.sin(s)*this.radius,r=-Math.cos(s)*this.radius,n=2*this.square*(.5-this.hsl[1]),o=2*this.square*(.5-this.hsl[2]),h=this.invert?"#fff":"#000",c=this.invert?"#000":"#fff",d=[{x:a,y:r,r:i,c:"#000",lw:e+1},{x:a,y:r,r:this.markerSize,c:"#fff",lw:e},{x:n,y:o,r:i,c:c,lw:e+1},{x:n,y:o,r:this.markerSize,c:h,lw:e}];this.ctxOverlay.clearRect(-this.mid,-this.mid,t,t);for(var l=0;l<d.length;l+=1){var u=d[l];this.ctxOverlay.lineWidth=u.lw,this.ctxOverlay.strokeStyle=u.c,this.ctxOverlay.beginPath(),this.ctxOverlay.arc(u.x,u.y,u.r,0,2*Math.PI,!0),this.ctxOverlay.stroke()}},updateDisplay:function(t){this.invert=.3*this.rgb[0]+.59*this.rgb[1]+.11*this.rgb[2]<=.6,this.drawMarkers(),t||(this.$emit("input",this.color),this.$emit("colorChange",this.color),this.$emit("color-change",this.color))},widgetCoords:function(t){return{x:t.clientX-this.offset.left-this.mid,y:t.clientY-this.offset.top-this.mid}},mousedown:function(t){if(this.disabled)return!1;this.dragging||(document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup),this.dragging=!0),this.offset={left:this.$refs["color-wheel"].getBoundingClientRect().left,top:this.$refs["color-wheel"].getBoundingClientRect().top};var e=this.widgetCoords(t);return this.circleDrag=Math.max(Math.abs(e.x),Math.abs(e.y))>this.square+2,this.mousemove(t),!1},mousemove:function(t){var e=this.widgetCoords(t);if(this.circleDrag){var i=Math.atan2(e.x,-e.y)/6.28;this.setHSL([(i+1)%1,this.hsl[1],this.hsl[2]])}else{var s=Math.max(0,Math.min(1,-e.x/this.square/2+.5)),a=Math.max(0,Math.min(1,-e.y/this.square/2+.5));this.setHSL([this.hsl[0],s,a])}return!1},mouseup:function(){document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),this.dragging=!1},dec2hex:function(t){return(t<16?"0":"")+t.toString(16)},packDX:function(t,e){return"#"+(this.dec2hex(e)+this.dec2hex(t)+this.dec2hex(t)+this.dec2hex(t))},pack:function(t){var e=Math.round(255*t[0]),i=Math.round(255*t[1]),s=Math.round(255*t[2]);return"#"+(this.dec2hex(e)+this.dec2hex(i)+this.dec2hex(s))},unpack:function(e){return 7===e.length?[1,3,5].map(function(t){return parseInt(e.substring(t,t+2),16)/255}):4===e.length&&[1,2,3].map(function(t){return parseInt(e.substring(t,t+1),16)/15})},HSLToRGB:function(t){var e=t[0],i=t[1],s=t[2],a=s<=.5?s*(i+1):s+i-s*i,r=2*s-a;return[this.hueToRGB(r,a,e+.33333),this.hueToRGB(r,a,e),this.hueToRGB(r,a,e-.33333)]},hueToRGB:function(t,e,i){return 6*(i=(i+1)%1)<1?t+(e-t)*i*6:2*i<1?e:3*i<2?t+(e-t)*(.66666-i)*6:t},RGBToHSL:function(t){var e=t[0],i=t[1],s=t[2],a=Math.min(e,i,s),r=Math.max(e,i,s),n=r-a,o=0,h=0,c=(a+r)/2;return 0<c&&c<1&&(h=n/(c<.5?2*c:2-2*c)),0<n&&(r===e&&r!==i&&(o+=(i-s)/n),r===i&&r!==s&&(o+=2+(s-e)/n),r===s&&r!==e&&(o+=4+(e-i)/n),o/=6),[o,h,c]},widgetCoordsTouch:function(t){return{x:t.targetTouches[0].clientX-this.offset.left-this.mid,y:t.targetTouches[0].clientY-this.offset.top-this.mid}},touchHandleStart:function(t){if(!this.touchHandled){this.touchHandled=!0,this._touchMoved=!1,this.offset={left:this.$refs["color-wheel"].getBoundingClientRect().left,top:this.$refs["color-wheel"].getBoundingClientRect().top};var e=this.widgetCoordsTouch(t);this.circleDrag=Math.max(Math.abs(e.x),Math.abs(e.y))>this.square+2}},touchHandleMove:function(t){if(this.touchHandled){t.preventDefault(),this._touchMoved=!0;var e=this.widgetCoordsTouch(t);if(this.circleDrag){var i=Math.atan2(e.x,-e.y)/6.28;this.setHSL([(i+1)%1,this.hsl[1],this.hsl[2]])}else{var s=Math.max(0,Math.min(1,-e.x/this.square/2+.5)),a=Math.max(0,Math.min(1,-e.y/this.square/2+.5));this.setHSL([this.hsl[0],s,a])}}},touchHandleEnd:function(){this.touchHandled&&(this.touchHandled=!1)}}},"data-v-58e7c5c8",!1,0,function t(){var c=document.head||document.getElementsByTagName("head")[0],d=t.styles||(t.styles={}),l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,e){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var i=l?e.media||"default":t,s=d[i]||(d[i]={ids:[],parts:[],element:void 0});if(!s.ids.includes(t)){var a=e.source,r=s.ids.length;if(s.ids.push(t),e.map&&(a+="\n/*# sourceURL="+e.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),l&&(s.element=s.element||document.querySelector("style[data-group="+i+"]")),!s.element){var n=s.element=document.createElement("style");n.type="text/css",e.media&&n.setAttribute("media",e.media),l&&(n.setAttribute("data-group",i),n.setAttribute("data-next-index","0")),c.appendChild(n)}if(l&&(r=parseInt(s.element.getAttribute("data-next-index")),s.element.setAttribute("data-next-index",r+1)),s.element.styleSheet)s.parts.push(a),s.element.styleSheet.cssText=s.parts.filter(Boolean).join("\n");else{var o=document.createTextNode(a),h=s.element.childNodes;h[r]&&s.element.removeChild(h[r]),h.length?s.element.insertBefore(o,h[r]):s.element.appendChild(o)}}}}});function i(t){i.installed||(i.installed=!0,t.component("ColorWheel",e))}var s={install:i},a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&a.use(s),t.install=i,t.default=e,t}({});