3 lines
14 KiB
JavaScript
3 lines
14 KiB
JavaScript
define("local_treestudyplan/vue-color-picker-wheel",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_exports.install=install;var component=function(template,style,script$$1,scope,functional,moduleIdentifier,createInjector,createInjectorSSR){var hook,component=("function"==typeof script$$1?script$$1.options:script$$1)||{};if(component.__file="color-picker.vue",component.render||(component.render=template.render,component.staticRenderFns=template.staticRenderFns,component._compiled=!0,functional&&(component.functional=!0)),component._scopeId=scope,style&&(hook=function(context){style.call(this,createInjector(context))}),void 0!==hook)if(component.functional){var originalRender=component.render;component.render=function(h,context){return hook.call(context),originalRender(h,context)}}else{var existing=component.beforeCreate;component.beforeCreate=existing?[].concat(existing,hook):[hook]}return component}({render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{ref:"color-wheel",staticClass:"cpw_container",class:{s_disabled:_vm.disabled},style:{width:_vm.width+"px",height:_vm.height+"px",position:"relative"},attrs:{id:"color-wheel"}},[_c("div",{ref:"farbtastic-solid",staticClass:"farbtastic-solid",staticStyle:{position:"absolute"},style:_vm.solidStyle}),_vm._v(" "),_c("canvas",{ref:"farbtastic-mask",staticClass:"farbtastic-mask",style:{width:_vm.width,height:_vm.height},attrs:{width:_vm.width,height:_vm.height}}),_vm._v(" "),_c("canvas",{ref:"farbtastic-overlay",staticClass:"farbtastic-overlay",style:{width:_vm.width,height:_vm.height},attrs:{width:_vm.width,height:_vm.height},on:{mousedown:_vm.mousedown,touchstart:_vm.touchHandleStart,touchmove:_vm.touchHandleMove,touchend:_vm.touchHandleEnd}})])},staticRenderFns:[]},(function(inject){inject&&inject("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-picker",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(newVal,oldVal){newVal!==oldVal&&this.setColor(newVal)}},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(color,noEmit){void 0===noEmit&&(noEmit=!1);var unpack=this.unpack(color);return this.color!==color&&unpack&&(this.color=color,this.rgb=unpack,this.hsl=this.RGBToHSL(this.rgb),this.updateDisplay(noEmit)),this},setHSL:function(hsl){return this.hsl=hsl,this.rgb=this.HSLToRGB(hsl),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(cnv){var ctx=cnv.getContext("2d"),backingStoreRatio=ctx.webkitBackingStorePixelRatio||ctx.mozBackingStorePixelRatio||ctx.msBackingStorePixelRatio||ctx.oBackingStorePixelRatio||ctx.backingStorePixelRatio||1;if(this.devicePixelRatio!==backingStoreRatio){var ratio=this.devicePixelRatio/backingStoreRatio,oldWidth=cnv.width,oldHeight=cnv.height;cnv.width=oldWidth*ratio,cnv.height=oldHeight*ratio,cnv.style.width=oldWidth+"px",cnv.style.height=oldHeight+"px",ctx.scale(ratio,ratio)}},drawCircle:function(){var angle2,color1,color2,tm=+new Date,r=this.radius,w=this.wheelWidth,nudge=8/r/24*Math.PI,m=this.ctxMask,angle1=0;m.save(),m.lineWidth=w/r,m.scale(r,r);for(var i=0;i<=24;++i){var d2=i/24;angle2=d2*Math.PI*2;var x1=Math.sin(angle1),y1=-Math.cos(angle1),x2=Math.sin(angle2),y2=-Math.cos(angle2),am=(angle1+angle2)/2,tan=1/Math.cos((angle2-angle1)/2),xm=Math.sin(am)*tan,ym=-Math.cos(am)*tan;if(color2=this.pack(this.HSLToRGB([d2,1,.5])),i>0){var grad=m.createLinearGradient(x1,y1,x2,y2);grad.addColorStop(0,color1),grad.addColorStop(1,color2),m.strokeStyle=grad,m.beginPath(),m.moveTo(x1,y1),m.quadraticCurveTo(xm,ym,x2,y2),m.stroke()}angle1=angle2-nudge,color1=color2}if(m.restore(),this.debug){var debugElement=document.createElement("div");debugElement.textContent="drawCircle "+(+new Date-tm)+" ms",document.body.appendChild(debugElement)}},drawMask:function(){var userAgent,this$1$1=this,tm=+new Date,size=2*this.square,sq=this.square;function calculateMask(sizex,sizey,outputPixel){for(var isx=1/sizex,isy=1/sizey,y=0;y<=sizey;++y)for(var l=1-y*isy,x=0;x<=sizex;++x){var s=1-x*isx,a=1-2*Math.min(l*s,(1-l)*s);outputPixel(x,y,a>0?(2*l-1+a)*(.5/a):0,a)}}if(this.ctxMask.getImageData){var sz=Math.floor(size/2),buffer=document.createElement("canvas");buffer.width=sz+1,buffer.height=sz+1;var ctx=buffer.getContext("2d"),frame=ctx.getImageData(0,0,sz+1,sz+1),i=0;calculateMask(sz,sz,(function(x,y,c,a){frame.data[i++]=frame.data[i++]=frame.data[i++]=255*c,frame.data[i++]=255*a})),ctx.putImageData(frame,0,0),this.ctxMask.drawImage(buffer,0,0,sz+1,sz+1,-sq,-sq,2*sq,2*sq)}else if(userAgent=window.navigator.userAgent,/MSIE|Trident/.test(userAgent)){var cacheLast,cache;calculateMask(Math.floor(size/6),6,(function(x,y,c,a){if(0===x&&(cacheLast=cache,cache=[]),c=Math.round(255*c),a=Math.round(255*a),y>0){var cLast=cacheLast[x][0],aLast=cacheLast[x][1],color1=this$1$1.packDX(cLast,aLast),color2=this$1$1.packDX(c,a),y1=Math.round(this$1$1.mid+(.333*(y-1)-1)*sq),y2=Math.round(this$1$1.mid+(.333*y-1)*sq),div=document.createElement("div");div.style.position="absolute",div.style.filter="progid:DXImageTransform.Microsoft.Gradient(StartColorStr="+color1+", EndColorStr="+color2+", GradientType=0)",div.style.top=y1,div.style.height=y2-y1,div.style.left=this$1$1.mid+(6*x-sq-1),div.style.width=this$1$1.mid+(6*x-sq-1),this$1$1.cnvMask.appendChild(div)}cache.push([c,a])}))}else{var sz$1=Math.floor(size/2);calculateMask(sz$1,sz$1,(function(x,y,_c,a){var c=Math.round(255*_c);this$1$1.ctxMask.fillStyle="rgba("+c+", "+c+", "+c+", "+a+")",this$1$1.ctxMask.fillRect(2*x-sq-1,2*y-sq-1,2,2)}))}if(this.debug){var debugElement=document.createElement("div");debugElement.textContent="drawMask "+(+new Date-tm)+" ms",document.body.appendChild(debugElement)}},drawMarkers:function(){var sz=this.width,lw=Math.ceil(this.markerSize/4),r=this.markerSize-lw+1,angle=6.28*this.hsl[0],x1=Math.sin(angle)*this.radius,y1=-Math.cos(angle)*this.radius,x2=2*this.square*(.5-this.hsl[1]),y2=2*this.square*(.5-this.hsl[2]),c1=this.invert?"#fff":"#000",c2=this.invert?"#000":"#fff",circles=[{x:x1,y:y1,r:r,c:"#000",lw:lw+1},{x:x1,y:y1,r:this.markerSize,c:"#fff",lw:lw},{x:x2,y:y2,r:r,c:c2,lw:lw+1},{x:x2,y:y2,r:this.markerSize,c:c1,lw:lw}];this.ctxOverlay.clearRect(-this.mid,-this.mid,sz,sz);for(var i=0;i<circles.length;i+=1){var c=circles[i];this.ctxOverlay.lineWidth=c.lw,this.ctxOverlay.strokeStyle=c.c,this.ctxOverlay.beginPath(),this.ctxOverlay.arc(c.x,c.y,c.r,0,2*Math.PI,!0),this.ctxOverlay.stroke()}},updateDisplay:function(noEmit){this.invert=.3*this.rgb[0]+.59*this.rgb[1]+.11*this.rgb[2]<=.6,this.drawMarkers(),noEmit||(this.$emit("input",this.color),this.$emit("colorChange",this.color),this.$emit("color-change",this.color))},widgetCoords:function(event){return{x:event.clientX-this.offset.left-this.mid,y:event.clientY-this.offset.top-this.mid}},mousedown:function(event){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 pos=this.widgetCoords(event);return this.circleDrag=Math.max(Math.abs(pos.x),Math.abs(pos.y))>this.square+2,this.mousemove(event),!1},mousemove:function(event){var pos=this.widgetCoords(event);if(this.circleDrag){var hue=Math.atan2(pos.x,-pos.y)/6.28;this.setHSL([(hue+1)%1,this.hsl[1],this.hsl[2]])}else{var sat=Math.max(0,Math.min(1,-pos.x/this.square/2+.5)),lum=Math.max(0,Math.min(1,-pos.y/this.square/2+.5));this.setHSL([this.hsl[0],sat,lum])}return!1},mouseup:function(){document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),this.dragging=!1},dec2hex:function(x){return(x<16?"0":"")+x.toString(16)},packDX:function(c,a){return"#"+(this.dec2hex(a)+this.dec2hex(c)+this.dec2hex(c)+this.dec2hex(c))},pack:function(rgb){var r=Math.round(255*rgb[0]),g=Math.round(255*rgb[1]),b=Math.round(255*rgb[2]);return"#"+(this.dec2hex(r)+this.dec2hex(g)+this.dec2hex(b))},unpack:function(color){return 7===color.length?[1,3,5].map((function(i){return parseInt(color.substring(i,i+2),16)/255})):4===color.length&&[1,2,3].map((function(i){return parseInt(color.substring(i,i+1),16)/15}))},HSLToRGB:function(hsl){var h=hsl[0],s=hsl[1],l=hsl[2],m2=l<=.5?l*(s+1):l+s-l*s,m1=2*l-m2;return[this.hueToRGB(m1,m2,h+.33333),this.hueToRGB(m1,m2,h),this.hueToRGB(m1,m2,h-.33333)]},hueToRGB:function(m1,m2,h){return 6*(h=(h+1)%1)<1?m1+(m2-m1)*h*6:2*h<1?m2:3*h<2?m1+(m2-m1)*(.66666-h)*6:m1},RGBToHSL:function(rgb){var r=rgb[0],g=rgb[1],b=rgb[2],min=Math.min(r,g,b),max=Math.max(r,g,b),delta=max-min,h=0,s=0,l=(min+max)/2;return l>0&&l<1&&(s=delta/(l<.5?2*l:2-2*l)),delta>0&&(max===r&&max!==g&&(h+=(g-b)/delta),max===g&&max!==b&&(h+=2+(b-r)/delta),max===b&&max!==r&&(h+=4+(r-g)/delta),h/=6),[h,s,l]},widgetCoordsTouch:function(event){return{x:event.targetTouches[0].clientX-this.offset.left-this.mid,y:event.targetTouches[0].clientY-this.offset.top-this.mid}},touchHandleStart:function(event){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 pos=this.widgetCoordsTouch(event);this.circleDrag=Math.max(Math.abs(pos.x),Math.abs(pos.y))>this.square+2}},touchHandleMove:function(event){if(this.touchHandled){event.preventDefault(),this._touchMoved=!0;var pos=this.widgetCoordsTouch(event);if(this.circleDrag){var hue=Math.atan2(pos.x,-pos.y)/6.28;this.setHSL([(hue+1)%1,this.hsl[1],this.hsl[2]])}else{var sat=Math.max(0,Math.min(1,-pos.x/this.square/2+.5)),lum=Math.max(0,Math.min(1,-pos.y/this.square/2+.5));this.setHSL([this.hsl[0],sat,lum])}}},touchHandleEnd:function(){this.touchHandled&&(this.touchHandled=!1)}}},"data-v-58e7c5c8",!1,0,(function __vue_create_injector__(){var head=document.head||document.getElementsByTagName("head")[0],styles=__vue_create_injector__.styles||(__vue_create_injector__.styles={}),isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(id,css){if(!document.querySelector('style[data-vue-ssr-id~="'+id+'"]')){var group=isOldIE?css.media||"default":id,style=styles[group]||(styles[group]={ids:[],parts:[],element:void 0});if(!style.ids.includes(id)){var code=css.source,index=style.ids.length;if(style.ids.push(id),css.map&&(code+="\n/*# sourceURL="+css.map.sources[0]+" */",code+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(css.map))))+" */"),isOldIE&&(style.element=style.element||document.querySelector("style[data-group="+group+"]")),!style.element){var el=style.element=document.createElement("style");el.type="text/css",css.media&&el.setAttribute("media",css.media),isOldIE&&(el.setAttribute("data-group",group),el.setAttribute("data-next-index","0")),head.appendChild(el)}if(isOldIE&&(index=parseInt(style.element.getAttribute("data-next-index")),style.element.setAttribute("data-next-index",index+1)),style.element.styleSheet)style.parts.push(code),style.element.styleSheet.cssText=style.parts.filter(Boolean).join("\n");else{var textNode=document.createTextNode(code),nodes=style.element.childNodes;nodes[index]&&style.element.removeChild(nodes[index]),nodes.length?style.element.insertBefore(textNode,nodes[index]):style.element.appendChild(textNode)}}}}}));function install(Vue){install.installed||(install.installed=!0,Vue.component("ColorPicker",component))}var plugin={install:install},GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:"undefined"!=typeof global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin);var _default=component;return _exports.default=_default,_exports.default}));
|
|
|
|
//# sourceMappingURL=vue-color-picker-wheel.min.js.map
|