From fb7103ed535d17d31c3ceaf3649939740994b531 Mon Sep 17 00:00:00 2001 From: easylogic Date: Thu, 4 Jun 2020 21:45:37 +0900 Subject: [PATCH] fixed change color format in chromedevtool style --- addon/codemirror-colorpicker.css | 7 ++++++- addon/codemirror-colorpicker.js | 17 +++++++---------- dist/codemirror-colorpicker.css | 7 ++++++- dist/codemirror-colorpicker.js | 17 +++++++---------- dist/codemirror-colorpicker.min.js | 2 +- index.html | 2 +- package.json | 2 +- src/colorpicker/ui/ColorInformation.js | 22 ++++++++++------------ src/scss/component/information.scss | 4 +++- src/scss/index.scss | 2 +- 10 files changed, 43 insertions(+), 39 deletions(-) diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css index 04aecf1..7a7a2ce 100644 --- a/addon/codemirror-colorpicker.css +++ b/addon/codemirror-colorpicker.css @@ -256,7 +256,12 @@ text-align: center; font-size: 12px; color: #a9a9a9; - padding-top: 2px; } + padding-top: 2px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input { text-align: center; width: 100%; diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js index b33e96f..5cbd683 100644 --- a/addon/codemirror-colorpicker.js +++ b/addon/codemirror-colorpicker.js @@ -7935,7 +7935,7 @@ var ColorInformation = function (_UIElement) { }, { key: 'nextFormat', value: function nextFormat() { - var current_format = this.format || 'hex'; + var current_format = this.$store.format || 'hex'; var next_format = 'hex'; if (current_format == 'hex') { @@ -7947,20 +7947,17 @@ var ColorInformation = function (_UIElement) { } this.format = next_format; - this.initFormat(); - - this.$store.dispatch('/changeFormat', this.format); + this.$store.dispatch('/changeFormat', next_format); this.$store.emit('lastUpdateColor'); + this.initFormat(); } }, { key: 'goToFormat', value: function goToFormat(to_format) { this.format = to_format; - if (to_format === 'rgb' || to_format === 'hsl') { - this.initFormat(); - } - this.$store.dispatch('/changeFormat', this.format); + this.$store.emit('lastUpdateColor'); + this.initFormat(); } }, { key: 'getFormat', @@ -8080,7 +8077,7 @@ var ColorInformation = function (_UIElement) { }, { key: 'click $el .information-item.hex .input-field .title', value: function click$elInformationItemHexInputFieldTitle(e) { - this.goToFormat('hex'); + this.goToFormat('rgb'); } }, { key: 'click $el .information-item.rgb .input-field .title', @@ -8090,7 +8087,7 @@ var ColorInformation = function (_UIElement) { }, { key: 'click $el .information-item.hsl .input-field .title', value: function click$elInformationItemHslInputFieldTitle(e) { - this.goToFormat('rgb'); + this.goToFormat('hex'); } }, { key: 'setRGBInput', diff --git a/dist/codemirror-colorpicker.css b/dist/codemirror-colorpicker.css index 04aecf1..7a7a2ce 100644 --- a/dist/codemirror-colorpicker.css +++ b/dist/codemirror-colorpicker.css @@ -256,7 +256,12 @@ text-align: center; font-size: 12px; color: #a9a9a9; - padding-top: 2px; } + padding-top: 2px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .codemirror-colorpicker .colorpicker-body .information > .information-item > .input-field input { text-align: center; width: 100%; diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js index 0482239..fb0d3c6 100644 --- a/dist/codemirror-colorpicker.js +++ b/dist/codemirror-colorpicker.js @@ -8068,7 +8068,7 @@ var ColorInformation = function (_UIElement) { }, { key: 'nextFormat', value: function nextFormat() { - var current_format = this.format || 'hex'; + var current_format = this.$store.format || 'hex'; var next_format = 'hex'; if (current_format == 'hex') { @@ -8080,20 +8080,17 @@ var ColorInformation = function (_UIElement) { } this.format = next_format; - this.initFormat(); - - this.$store.dispatch('/changeFormat', this.format); + this.$store.dispatch('/changeFormat', next_format); this.$store.emit('lastUpdateColor'); + this.initFormat(); } }, { key: 'goToFormat', value: function goToFormat(to_format) { this.format = to_format; - if (to_format === 'rgb' || to_format === 'hsl') { - this.initFormat(); - } - this.$store.dispatch('/changeFormat', this.format); + this.$store.emit('lastUpdateColor'); + this.initFormat(); } }, { key: 'getFormat', @@ -8213,7 +8210,7 @@ var ColorInformation = function (_UIElement) { }, { key: 'click $el .information-item.hex .input-field .title', value: function click$elInformationItemHexInputFieldTitle(e) { - this.goToFormat('hex'); + this.goToFormat('rgb'); } }, { key: 'click $el .information-item.rgb .input-field .title', @@ -8223,7 +8220,7 @@ var ColorInformation = function (_UIElement) { }, { key: 'click $el .information-item.hsl .input-field .title', value: function click$elInformationItemHslInputFieldTitle(e) { - this.goToFormat('rgb'); + this.goToFormat('hex'); } }, { key: 'setRGBInput', diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js index 7133979..74d967a 100644 --- a/dist/codemirror-colorpicker.min.js +++ b/dist/codemirror-colorpicker.min.js @@ -1 +1 @@ -var CodeMirrorColorPicker=function(){"use strict";function h(t,e){var r=2>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};return n=Object.assign(n,U(n))}if(0<=t&&t<=4294967295){n={type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255};return n=Object.assign(n,U(n))}}return t}function D(r){"string"==typeof r&&(r=T(r));var t=(r=r.map(function(t){if("string"==typeof t){var e=E(t),r=A(e.str).split(" ");return r[1]?r[1].includes("%")?r[1]=parseFloat(r[1].replace(/%/,""))/100:r[1]=parseFloat(r[1]):r[1]="*",r[0]=I(r[0],e.matches),r}if(Array.isArray(t))return t[1]?"string"==typeof t[1]&&(t[1].includes("%")?t[1]=parseFloat(t[1].replace(/%/,""))/100:t[1]=+t[1]):t[1]="*",[].concat(O(t))})).filter(function(t){return"*"===t[1]}).length;if(0= $scale ? 255 : 0;\n\n if ($hasColor) {\n\n if (v == 0) {\n $r = 0 \n $g = 0 \n $b = 0\n }\n \n } else {\n const value = Math.round(v)\n $r = value \n $g = value \n $b = value \n }\n \n ",{$C:(t=Kt(t))/100,$scale:r,$hasColor:e})}function kt(){var t=0>R,C[l+1]=c*B>>R,C[l+2]=h*B>>R,u-=f,c-=v,h-=g,f-=P.r,v-=P.g,g-=P.b,o=s+((o=r+e+1)>R,C[o+1]=c*B>>R,C[o+2]=h*B>>R,u-=f,c-=v,h-=g,f-=P.r,v-=P.g,g-=P.b,o=r+((o=n+S) 255 - $C) ? 255 : 0\n $g = ($g > 255 - $C) ? 255 : 0\n $b = ($b > 255 - $C) ? 255 : 0\n\n ",{$C:2.55*Math.abs(t)})},contrast:function(){var t=0>1),s=n[l];return n[l]=n[0],n[0]=s,n},createBitmap:Yt,createBlurMatrix:ne,pack:function(n){return function(r,t){zt(r.pixels.length,function(t,e){n(r.pixels,t,e,r.pixels[t],r.pixels[t+1],r.pixels[t+2],r.pixels[t+3])},function(){t(r)})}},packXY:re,pixel:Qt,getBitmap:Wt,putBitmap:qt,radian:function(t){return yt.CONSTANT.radian(t)},convolution:ae,parseParamNumber:Kt,filter:ce,clamp:ue,fillColor:ie,fillPixelColor:oe},"multi",fe),$(Ut,"merge",ve),$(Ut,"matches",le),$(Ut,"parseFilter",se),$(Ut,"partial",ge),Ut),Vt=Ht;function Lt(t){var e=1= mx) return {currentRunIndex: cri, i: null}; c(cri); i++;"}).join("\n");return new Function("ri","i","s","mx","c","\n let cri = ri;\n \n "+e+"\n \n return {currentRunIndex: cri, i: i} \n ")}(v),e=g,r={},n=0;n>2)},function(){r()},n.functionDumpCount,n.frameTimer,n.loopCount)}function Xt(t,r,n,e){var i=4>2;n(t,e%r,Math.floor(e/r))},function(){e()},i.functionDumpCount,i.frameTimer,i.loopCount)}function Yt(t,e,r){return{pixels:new Uint8ClampedArray(t),width:e,height:r}}function Wt(t,e){return gt.getBitmap(t,e)}function qt(t,e,r){return gt.putBitmap(t,e,r)}function Kt(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}var Zt=/(([\w_\-]+)(\(([^\)]*)\))?)+/gi;function Jt(t,e,r){var a,n,i,o,l;return a={},n=[{callback:t,context:1t.width||a>t.height||(u=s*e.width+l<<2,c=a*t.width+o<<2,t.pixels[c]=e.pixels[u],t.pixels[c+1]=e.pixels[u+1],t.pixels[c+2]=e.pixels[u+2],t.pixels[c+3]=e.pixels[u+3])}(n,t,r,r);for(var i=Yt(n.pixels.length,n.width,n.height),o=Yt(t.pixels.length,t.width,t.height),a=function(t,o,i,e){var a=Math.round(Math.sqrt(t.length)),l=Math.floor(a/2),r=e?1:0,n="let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ",s=[],u=[],c=[],h=[];t.forEach(function(t,e){var r=Math.floor(e/a)-l,n=e%a-l;0!=t&&(s.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4]]"),u.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 1]]"),c.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 2]]"),h.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 3]]"))}),n+="r = "+s.join(" + ")+"; g = "+u.join(" + ")+"; b = "+c.join(" + ")+"; a = "+h.join(" + ")+";",n+="$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + ("+r+")*(255-a); ";var f=new Function("$dp","$sp","$di","$sx","$sy","$t",n);return function(t,e,r,n,i){f(t,e,r,n,i,o)}}(h,v,n.width,(n.height,f)),l=t.pixels.length/4,s=0;s>2,o=0,a=0,l=0,s=0,u=0,c=0,h=0;ht.width||a>t.height||(u=a*t.width+o<<2,c=s*e.width+l<<2,e.pixels[c]=t.pixels[u],e.pixels[c+1]=t.pixels[u+1],e.pixels[c+2]=t.pixels[u+2],e.pixels[c+3]=t.pixels[u+3])}}(i,o,r,r),e(o)}}function le(r){var e=ze.convertMatches(r),t=e.str.match(Zt),n=[];if(!t)return n;n=t.map(function(t){return{filter:t,origin:ze.reverseMatches(t,e.matches)}});var i={next:0};return n=n.map(function(t){var e=r.indexOf(t.origin,i.next);return t.startIndex=e,t.endIndex=e+t.origin.length,t.arr=se(t.origin),i.next=t.endIndex,t}).filter(function(t){return!!t.arr.length})}function se(t){var e=ze.convertMatches(t),r=e.str.match(Zt);if(!r[0])return[];var n=r[0].split("("),i=n.shift(),o=[];return n.length&&(o=n.shift().split(")")[0].split(",").map(function(t){return ze.reverseMatches(t,e.matches)})),[i].concat(O(o)).map(ze.trim)}function ue(t){return Math.min(255,t)}function ce(t){return ve(le(t).map(function(t){return t.arr}))}function he(t){for(var e=0=l)return e(n);o()}()},r)}o()}}function ve(t){return fe.apply(void 0,O(t))}function ge(n){for(var i=null,t=arguments.length,e=Array(1= "+(t=xe(de(t)))+" ? 1.0 : 0.0;\n\n outColor = vec4(c, c, c, pixelColor.a);\n ")}var Ue=_({},{blur:function(){return be([1,1,1,1,1,1,1,1,1])},normal:function(){return be([0,0,0,0,1,0,0,0,0])},emboss:function(){var t=0 "+r+") {\n outColor = vec4("+Ce(ze.parse(e))+".rgb, pixelColor.a);\n } else {\n outColor = vec4("+n+".rgb, pixelColor.a);\n }\n ")},brightness:function(){return $e("\n outColor = pixelColor + ("+xe(de(0 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.g > 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.b > 1.0 - "+t+") ? 1.0 : 0.0,\n pixelColor.a \n );\n ")},chaos:function(){return $e("\n vec2 st = pixelColor.st;\n st *= "+xe(de(0e&&(t=ft(t,e)),t.map(function(t){return h(t,r)})},ImageToCanvas:function(t,e,r){var n=3=t){e=Xe[n-1],r=Xe[n];break}return e&&r?ze.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):Xe[0].rgb}},We=_({},Ft,Ht),qe={Color:ze,HueColor:Ye,ColorNames:f,ImageFilter:We,GL:Ne,Canvas:gt,ImageLoader:dt},Ke=(ze.color,0),Ze=[],Je=(m(Qe,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(t){for(var e=this,r=!1;!(r=e.hasClass(t));){if(!e.el.parentNode)return null;e=new Qe(e.el.parentNode)}return r?e:null}},{key:"checked",value:function(){return this.el.checked}},{key:"removeClass",value:function(t){return this.el.className=(" "+this.el.className+" ").replace(" "+t+" "," ").trim(),this}},{key:"hasClass",value:function(t){return!!this.el.className&&-1<(" "+this.el.className+" ").indexOf(" "+t+" ")}},{key:"addClass",value:function(t){return this.hasClass(t)||(this.el.className=this.el.className+" "+t),this}},{key:"toggleClass",value:function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)}},{key:"html",value:function(e){try{"string"==typeof e?this.el.innerHTML=e:this.empty().append(e)}catch(t){console.log(e)}return this}},{key:"find",value:function(t){return this.el.querySelector(t)}},{key:"$",value:function(t){return new Qe(this.find(t))}},{key:"findAll",value:function(t){return this.el.querySelectorAll(t)}},{key:"$$",value:function(t){return[].concat(O(this.findAll(t))).map(function(t){return new Qe(t)})}},{key:"empty",value:function(){return this.html("")}},{key:"append",value:function(t){return"string"==typeof t?this.el.appendChild(document.createTextNode(t)):this.el.appendChild(t.el||t),this}},{key:"appendTo",value:function(t){return(t.el?t.el:t).appendChild(this.el),this}},{key:"remove",value:function(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}},{key:"text",value:function(){return this.el.textContent}},{key:"css",value:function(t,e){var r=this;if(2==arguments.length)this.el.style[t]=e;else if(1==arguments.length){if("string"==typeof t)return getComputedStyle(this.el)[t];var n=t||{};Object.keys(n).forEach(function(t){r.el.style[t]=n[t]})}return this}},{key:"cssFloat",value:function(t){return parseFloat(this.css(t))}},{key:"cssInt",value:function(t){return parseInt(this.css(t))}},{key:"offset",value:function(){var t=this.el.getBoundingClientRect();return{top:t.top+Qe.getScrollTop(),left:t.left+Qe.getScrollLeft()}}},{key:"rect",value:function(){return this.el.getBoundingClientRect()}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"size",value:function(){return[this.width(),this.height()]}},{key:"width",value:function(){return this.el.offsetWidth||this.el.getBoundingClientRect().width}},{key:"contentWidth",value:function(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}},{key:"height",value:function(){return this.el.offsetHeight||this.el.getBoundingClientRect().height}},{key:"contentHeight",value:function(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}},{key:"dataKey",value:function(t){return this.uniqId+"."+t}},{key:"data",value:function(t,e){if(2==arguments.length)return Ze[this.dataKey(t)]=e,this;if(1==arguments.length)return Ze[this.dataKey(t)];var r=Object.keys(Ze),n=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(n)}).map(function(t){return Ze[t]})}},{key:"val",value:function(t){return 0==arguments.length?this.el.value:(1==arguments.length&&(this.el.value=t),this)}},{key:"int",value:function(){return parseInt(this.val(),10)}},{key:"float",value:function(){return parseFloat(this.val())}},{key:"show",value:function(){return this.css("display","block")}},{key:"hide",value:function(){return this.css("display","none")}},{key:"toggle",value:function(){return"none"==this.css("display")?this.show():this.hide()}},{key:"scrollTop",value:function(){return this.el===document.body?Qe.getScrollTop():this.el.scrollTop}},{key:"scrollLeft",value:function(){return this.el===document.body?Qe.getScrollLeft():this.el.scrollLeft}},{key:"on",value:function(t,e,r,n){return this.el.addEventListener(t,e,r,n),this}},{key:"off",value:function(t,e){return this.el.removeEventListener(t,e),this}},{key:"getElement",value:function(){return this.el}},{key:"createChild",value:function(t,e,r,n){var i=3"}},{key:"initialize",value:function(){}},{key:"initializeEvent",value:function(){var e=this;this.initializeEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].initializeEvent()})}},{key:"destroy",value:function(){var e=this;this.destroyEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].destroy()})}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(lr).forEach(this.parseEvent.bind(this))}},{key:"collectProps",value:function(){if(!this.collapsedProps){for(var t=this.__proto__,e=[];e.push.apply(e,O(Object.getOwnPropertyNames(t))),t=t.__proto__;);this.collapsedProps=e}return this.collapsedProps}},{key:"filterProps",value:function(e){return this.collectProps().filter(function(t){return t.match(e)})}},{key:"parseEvent",value:function(t){var e=t.split(" ");this.bindingEvent(e,this[t].bind(this))}},{key:"getDefaultDomElement",value:function(t){var e=void 0;return(e=t?this.refs[t]||this[t]||window[t]:this.el||this.$el||this.$root)instanceof Je?e.getElement():e}},{key:"getDefaultEventObject",value:function(t){var e=this,r=t.split("."),n=r.shift(),i=r.includes("Control"),o=r.includes("Shift"),a=r.includes("Alt"),l=r.includes("Meta"),s=(r=r.filter(function(t){return!1===ur.includes(t)})).filter(function(t){return!!e[t]});return{eventName:n,isControl:i,isShift:o,isAlt:a,isMeta:l,codes:r=r.filter(function(t){return!1===s.includes(t)}).map(function(t){return t.toLowerCase()}),checkMethodList:s}}},{key:"bindingEvent",value:function(t,e){var r,n=(r=t,Array.isArray(r)?r:Array.from(r)),i=n[0],o=n[1],a=n.slice(2);o=this.getDefaultDomElement(o);var l=this.getDefaultEventObject(i);l.dom=o,l.delegate=a.join(" "),this.addEvent(l,e)}},{key:"matchPath",value:function(t,e){return t?t.matches(e)?t:this.matchPath(t.parentElement,e):null}},{key:"getBindings",value:function(){return this._bindings||this.initBindings(),this._bindings}},{key:"addBinding",value:function(t){this.getBindings().push(t)}},{key:"initBindings",value:function(){this._bindings=[]}},{key:"checkEventType",value:function(e,t){var r=this,n=!t.isControl||e.ctrlKey,i=!t.isShift||e.shiftKey,o=!t.isAlt||e.altKey,a=!t.isMeta||e.metaKey,l=!0;t.codes.length&&(l=t.codes.includes(e.code.toLowerCase())||t.codes.includes(e.key.toLowerCase()));var s=!0;return t.checkMethodList.length&&(s=t.checkMethodList.every(function(t){return r[t].call(r,e)})),n&&o&&i&&a&&l&&s}},{key:"makeCallback",value:function(r,n){var i=this;return r.delegate?function(t){if(t.xy=ir.posXY(t),i.checkEventType(t,r)){var e=i.matchPath(t.target||t.srcElement,r.delegate);if(e)return t.delegateTarget=e,t.$delegateTarget=new Je(e),n(t)}}:function(t){if(t.xy=ir.posXY(t),i.checkEventType(t,r))return n(t)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t);var r=!0;"touchstart"===t.eventName&&(r={passive:!0}),ir.addEvent(t.dom,t.eventName,t.callback,r)}},{key:"removeEventAll",value:function(){var e=this;this.getBindings().forEach(function(t){e.removeEvent(t)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,n=t.callback;ir.removeEvent(r,e,n)}}]),hr);function hr(){d(this,hr),this.state=new or(this),this.refs={},this.childComponents=this.components()}var fr=/^@/,vr=(C(gr,cr),m(gr,[{key:"initializeStoreEvent",value:function(){var n=this;this.storeEvents={},this.filterProps(fr).forEach(function(t){var e=t.split("@");e.shift();var r=e.join("@");n.storeEvents[r]=n[t].bind(n),n.$store.on(r,n.storeEvents[r])})}},{key:"destoryStoreEvent",value:function(){var e=this;Object.keys(this.storeEvents).forEach(function(t){e.$store.off(t,e.storeEvents[t])})}}]),gr);function gr(t){d(this,gr);var e=x(this,(gr.__proto__||Object.getPrototypeOf(gr)).call(this,t));return e.opt=t||{},t&&t.$store&&(e.$store=t.$store),e.initialize(),e.initializeStoreEvent(),e}var dr=(C(pr,tr),m(pr,[{key:"initialize",value:function(){k(pr.prototype.__proto__||Object.getPrototypeOf(pr.prototype),"initialize",this).call(this),this.$store.rgb={},this.$store.hsl={},this.$store.hsv={},this.$store.alpha=1,this.$store.format="hex"}},{key:"/changeFormat",value:function(t,e){t.format=e,t.emit("changeFormat")}},{key:"/initColor",value:function(t,e,r){t.dispatch("/changeColor",e,r,!0),t.emit("initColor")}},{key:"/changeColor",value:function(t,e,r,n){var i;"string"==typeof(e=e||"#FF0000")&&(e=ze.parse(e)),e.source=e.source||r,t.alpha=void 0===(i=e.a)||null==i?t.alpha:e.a,t.format="hsv"!=e.type&&e.type||t.format,"hsl"==e.type?(t.hsl=Object.assign(t.hsl,e),t.rgb=ze.HSLtoRGB(t.hsl),t.hsv=ze.HSLtoHSV(e)):"hex"==e.type||"rgb"==e.type?(t.rgb=Object.assign(t.rgb,e),t.hsl=ze.RGBtoHSL(t.rgb),t.hsv=ze.RGBtoHSV(e)):"hsv"==e.type&&(t.hsv=Object.assign(t.hsv,e),t.rgb=ze.HSVtoRGB(t.hsv),t.hsl=ze.HSVtoHSL(t.hsv)),n||t.emit("changeColor",e.source)}},{key:"/getHueColor",value:function(t){return Ye.checkHueColor(t.hsv.h/360)}},{key:"/toString",value:function(t,e){var r=t[e=e||t.format]||t.rgb;return ze.format(_({},r,{a:t.alpha}),e)}},{key:"/toColor",value:function(t,e){return"rgb"==(e=e||t.format)?t.dispatch("/toRGB"):"hsl"==e?t.dispatch("/toHSL"):"hex"==e?t.dispatch("/toHEX"):t.dispatch("/toString",e)}},{key:"/toRGB",value:function(t){return t.dispatch("/toString","rgb")}},{key:"/toHSL",value:function(t){return t.dispatch("/toString","hsl")}},{key:"/toHEX",value:function(t){return t.dispatch("/toString","hex").toUpperCase()}}]),pr);function pr(){return d(this,pr),x(this,(pr.__proto__||Object.getPrototypeOf(pr)).apply(this,arguments))}var mr=(m(yr,[{key:"initialize",value:function(){this.initializeModule()}},{key:"initializeModule",value:function(){var e=this;this.modules.forEach(function(t){new t(e)})}},{key:"action",value:function(t,e){this.actions[t]={context:e,callback:e[t]}}},{key:"dispatch",value:function(t){var e=[].concat(Array.prototype.slice.call(arguments)),r=(t=e.shift(),this.actions[t]);if(r)return r.callback.apply(r.context,[this].concat(O(e)))}},{key:"module",value:function(){}},{key:"on",value:function(t,e){this.callbacks.push({event:t,callback:e})}},{key:"off",value:function(e,r){0==arguments.length?this.callbacks=[]:1==arguments.length?this.callbacks=this.callbacks.filter(function(t){return t.event!=e}):2==arguments.length&&(this.callbacks=this.callbacks.filter(function(t){return t.event!=e&&t.callback!=r}))}},{key:"emit",value:function(){var e=[].concat(Array.prototype.slice.call(arguments)),r=e.shift();this.callbacks.filter(function(t){return t.event==r}).forEach(function(t){t&&"function"==typeof t.callback&&t.callback.apply(t,O(e))})}}]),yr);function yr(t){d(this,yr),this.callbacks=[],this.actions=[],this.modules=t.modules||[],this.initialize()}var br=(C(kr,vr),m(kr,[{key:"initialize",value:function(){var t=this;this.$body=null,this.$root=null,this.$store=new mr({modules:[dr,rr]}),this.callbackChange=function(){t.callbackColorValue()},this.callbackLastUpdate=function(){t.callbackLastUpdateColorValue()},this.colorpickerShowCallback=function(){},this.colorpickerHideCallback=function(){},this.colorpickerLastUpdateCallback=function(){},this.$body=new Je(this.getContainer()),this.$root=new Je("div","codemirror-colorpicker"),"inline"==this.opt.position&&this.$body.append(this.$root),this.opt.type&&this.$root.addClass(this.opt.type),this.opt.hideInformation&&this.$root.addClass("hide-information"),this.opt.hideColorsets&&this.$root.addClass("hide-colorsets"),this.$arrow=new Je("div","arrow"),this.$root.append(this.$arrow),this.$store.dispatch("/setUserPalette",this.opt.colorSets),this.render(),this.$root.append(this.$el),this.initColorWithoutChangeEvent(this.opt.color),this.initializeEvent()}},{key:"initColorWithoutChangeEvent",value:function(t){this.$store.dispatch("/initColor",t)}},{key:"show",value:function(t,e,r,n,i){this.colorpickerShowCallback=r,this.colorpickerHideCallback=n,this.colorpickerLastUpdateCallback=i,this.$root.css(this.getInitalizePosition()).show(),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.outputFormat=t.outputFormat,this.hideDelay=+(void 0===t.hideDelay?2e3:t.hideDelay),0window.innerWidth&&(n-=e+n-window.innerWidth),n<0&&(n=0);var i=t.top-this.$body.scrollTop();r+i>window.innerHeight&&(i-=r+i-window.innerHeight),i<0&&(i=0),this.$root.css({left:n+"px",top:i+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"isAbsolute",value:function(){return"inline"!==this.opt.position}},{key:"mouseup.isAbsolute document",value:function(t){this.__isMouseDown=!1,this.checkInHtml(t.target)||(0==this.checkColorPickerClass(t.target)?this.hide():this.__isMouseIn||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay)))}},{key:"keyup.isAbsolute.escape $root",value:function(){this.hide()}},{key:"mouseover.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker)}},{key:"mousemove.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker)}},{key:"mouseenter.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker),this.__isMouseIn=!0}},{key:"mouseleave.isAbsolute $root",value:function(){this.__isMouseIn=!1,this.__isMouseDown||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay))}},{key:"mousedown.isAbsolute $root",value:function(){this.__isMouseDown=!0}},{key:"setHideDelay",value:function(t){this.delayTime=t||0}},{key:"runHideDelay",value:function(){this.isColorPickerShow&&this.setHideDelay()}},{key:"callbackColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerShowCallback&&this.colorpickerShowCallback(t)}},{key:"callbackLastUpdateColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onLastUpdate&&this.opt.onLastUpdate.call(this,t),"function"==typeof this.colorpickerLastUpdateCallback&&this.colorpickerLastUpdateCallback(t)}},{key:"callbackHideColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onHide&&this.opt.onHide.call(this,t),"function"==typeof this.colorpickerHideCallback&&this.colorpickerHideCallback(t)}},{key:"getCurrentColor",value:function(){return this.$store.dispatch("/toColor",this.outputFormat)}},{key:"checkColorPickerClass",value:function(t){var e=new Je(t).closest("codemirror-colorview"),r=new Je(t).closest("codemirror-colorpicker"),n=new Je(t).closest("CodeMirror");return t.nodeName,!!(r||e||n)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"initializeStoreEvent",value:function(){k(kr.prototype.__proto__||Object.getPrototypeOf(kr.prototype),"initializeStoreEvent",this).call(this),this.$store.on("changeColor",this.callbackChange),this.$store.on("lastUpdateColor",this.callbackLastUpdate),this.$store.on("changeFormat",this.callbackChange)}},{key:"destroy",value:function(){k(kr.prototype.__proto__||Object.getPrototypeOf(kr.prototype),"destroy",this).call(this),this.$store.off("changeColor",this.callbackChange),this.$store.off("lastUpdateColor",this.callbackLastUpdate),this.$store.off("changeFormat",this.callbackChange),this.callbackChange=void 0,this.callbackLastUpdate=void 0,this.colorpickerShowCallback=void 0,this.colorpickerHideCallback=void 0}}]),kr);function kr(t){d(this,kr);var e=x(this,(kr.__proto__||Object.getPrototypeOf(kr)).call(this,t));return e.isColorPickerShow=!1,e.isShortCut=!1,e.hideDelay=+(void 0===e.opt.hideDeplay?2e3:e.opt.hideDelay),e.timerCloseColorPicker,e.autoHide=e.opt.autoHide||!0,e.outputFormat=e.opt.outputFormat,e.$checkColorPickerClass=e.checkColorPickerClass.bind(e),e}var Cr=(C(xr,vr),m(xr,[{key:"refresh",value:function(){}},{key:"refreshColorUI",value:function(){}},{key:"changeColor",value:function(t){this.$store.dispatch("/changeColor",Object.assign({source:this.source},t||{}))}},{key:"mouseup document",value:function(t){this.onDragEnd(t)}},{key:"mousemove document",value:function(t){this.onDragMove(t)}},{key:"mousedown $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"mousedown $container",value:function(t){this.isDown=!0,this.onDragStart(t)}},{key:"touchend document",value:function(t){this.onDragEnd(t)}},{key:"touchmove document",value:function(t){this.onDragMove(t)}},{key:"touchstart $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"touchstart $container",value:function(t){this.onDragStart(t)}},{key:"onDragStart",value:function(t){this.isDown=!0,this.refreshColorUI(t)}},{key:"onDragMove",value:function(t){this.isDown&&this.refreshColorUI(t)}},{key:"onDragEnd",value:function(){this.isDown&&(this.$store.emit("lastUpdateColor"),this.isDown=!1)}},{key:"@changeColor",value:function(t){this.source!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),xr);function xr(t){d(this,xr);var e=x(this,(xr.__proto__||Object.getPrototypeOf(xr)).call(this,t));return e.source="base-box",e}var _r=(C(wr,Cr),m(wr,[{key:"getMinMaxPosition",value:function(){var t=this.getMinPosition(),e=this.getMaxDist();return{min:t,max:t+e,width:e}}},{key:"getCurrent",value:function(t){return min+this.getMaxDist()*t}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().left}},{key:"getMaxDist",value:function(){return this.state.get("$container.width")}},{key:"getDist",value:function(t){var e=this.getMinMaxPosition(),r=e.min,n=e.max;return t=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first"),this.setMousePosition(this.getMaxDist()*((t||0)/this.maxValue))}}]),wr);function wr(t){d(this,wr);var e=x(this,(wr.__proto__||Object.getPrototypeOf(wr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="base-slider",e}var Or=(C(Mr,_r),m(Mr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$container.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){k(Mr.prototype.__proto__||Object.getPrototypeOf(Mr.prototype),"refresh",this).call(this),this.setBackgroundColor()}},{key:"getDefaultValue",value:function(){return this.$store.hsv.v}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({type:"hsv",v:e/100*this.maxValue})}}]),Mr);function Mr(t){d(this,Mr);var e=x(this,(Mr.__proto__||Object.getPrototypeOf(Mr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="value-control",e}var Sr=(C(Er,_r),m(Er,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){k(Er.prototype.__proto__||Object.getPrototypeOf(Er.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=ze.format(t,"rgb");t.a=1;var r=ze.format(t,"rgb");this.setOpacityColorBarBackground(e,r)}},{key:"setOpacityColorBarBackground",value:function(t,e){this.refs.$colorbar.css("background","linear-gradient(to right, "+t+", "+e+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),Er);function Er(t){d(this,Er);var e=x(this,(Er.__proto__||Object.getPrototypeOf(Er)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="opacity-control",e}var Tr=(C(Ir,vr),m(Ir,[{key:"components",value:function(){return{Value:Or,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Ir);function Ir(){return d(this,Ir),x(this,(Ir.__proto__||Object.getPrototypeOf(Ir)).apply(this,arguments))}var Ar=(C(Pr,vr),m(Pr,[{key:"template",value:function(){return'\n
\n \n
\n
\n
\n '}},{key:"refresh",value:function(t){this.setColorUI(t)}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.renderValue(),this.setHueColor(null,t)}},{key:"renderValue",value:function(){var t=1-this.$store.hsv.v;this.refs.$valuewheel.css({"background-color":"rgba(0, 0, 0, "+t+")"})}},{key:"renderWheel",value:function(t,e){this.width&&!t&&(t=this.width),this.height&&!e&&(e=this.height);var r=new Je("canvas"),n=r.el.getContext("2d");r.el.width=t,r.el.height=e,r.css({width:t+"px",height:e+"px"});for(var i=n.getImageData(0,0,t,e),o=i.data,a=Math.floor(t/2),l=Math.floor(e/2),s=e\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n \n '}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var e=this,r=this.format||"hex";["hex","rgb","hsl"].filter(function(t){return t!==r}).forEach(function(t){e.$el.removeClass(t)}),this.$el.addClass(r)}},{key:"nextFormat",value:function(){var t=this.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e="hex"),this.format=e,this.initFormat(),this.$store.dispatch("/changeFormat",this.format),this.$store.emit("lastUpdateColor")}},{key:"goToFormat",value:function(t){"rgb"!==(this.format=t)&&"hsl"!==t||this.initFormat(),this.$store.dispatch("/changeFormat",this.format)}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"checkNumberKey",value:function(t){var e=t.which,r=!1;return 37!=e&&39!=e&&8!=e&&46!=e&&9!=e||(r=!0),!(!r&&(e<48||57\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n \n '}},{key:"refresh",value:function(){this.load()}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"@toggleColorChooser",value:function(){this.toggle()}},{key:"load $colorsetsList",value:function(){return"\n
\n "+this.$store.dispatch("/getColorSetsList").map(function(t,e){return'\n
\n

'+t.name+'

\n
\n
\n '+t.colors.filter(function(t,e){return e<5}).map(function(t){return'
\n
\n
'}).join("")+"\n
\n
\n
"}).join("")+"\n
\n "}},{key:"show",value:function(){this.$el.addClass("open")}},{key:"hide",value:function(){this.$el.removeClass("open")}},{key:"toggle",value:function(){this.$el.toggleClass("open")}},{key:"click $toggleButton",value:function(){this.toggle()}},{key:"click $colorsetsList .colorsets-item",value:function(t){var e=t.$delegateTarget;if(e){var r=parseInt(e.attr("data-colorsets-index"));this.$store.dispatch("/setCurrentColorSets",r),this.hide()}}},{key:"destroy",value:function(){k(Fr.prototype.__proto__||Object.getPrototypeOf(Fr.prototype),"destroy",this).call(this),this.hide()}}]),Fr);function Fr(){return d(this,Fr),x(this,(Fr.__proto__||Object.getPrototypeOf(Fr)).apply(this,arguments))}var jr=(C(Hr,vr),m(Hr,[{key:"template",value:function(){return'\n
\n
\n \n
\n
\n
\n '}},{key:"load $colorSetsColorList",value:function(){var t=this.$store.dispatch("/getCurrentColorSets");return'\n
\n '+this.$store.dispatch("/getCurrentColors").map(function(t,e){return'
\n
\n
\n
'}).join("")+" \n "+(t.edit?'
+
':"")+" \n
\n "}},{key:"refresh",value:function(){this.load()}},{key:"addColor",value:function(t){this.$store.dispatch("/addCurrentColor",t)}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"click $colorSetsChooseButton",value:function(){this.$store.emit("toggleColorChooser")}},{key:"contextmenu $colorSetsColorList",value:function(t){if(t.preventDefault(),this.$store.dispatch("/getCurrentColorSets").edit){var e=new Je(t.target).closest("color-item");if(e){var r=parseInt(e.attr("data-index"));this.$store.emit("showContextMenu",t,r)}else this.$store.emit("showContextMenu",t)}}},{key:"click $colorSetsColorList .add-color-item",value:function(){this.addColor(this.$store.dispatch("/toColor"))}},{key:"click $colorSetsColorList .color-item",value:function(t){this.$store.dispatch("/changeColor",t.$delegateTarget.attr("data-color")),this.$store.emit("lastUpdateColor")}}]),Hr);function Hr(){return d(this,Hr),x(this,(Hr.__proto__||Object.getPrototypeOf(Hr)).apply(this,arguments))}var Vr=(C(Lr,vr),m(Lr,[{key:"template",value:function(){return'\n
    \n
  • Remove color
    • \n
  • Remove all to the right
    • \n
  • Clear palette
    • \n
\n '}},{key:"show",value:function(t,e){var r=ir.pos(t);this.$el.css({top:r.clientY-10+"px",left:r.clientX+"px"}),this.$el.addClass("show"),this.selectedColorIndex=e,void 0===this.selectedColorIndex?this.$el.addClass("small"):this.$el.removeClass("small")}},{key:"hide",value:function(){this.$el.removeClass("show")}},{key:"runCommand",value:function(t){switch(t){case"remove-color":this.$store.dispatch("/removeCurrentColor",this.selectedColorIndex);break;case"remove-all-to-the-right":this.$store.dispatch("/removeCurrentColorToTheRight",this.selectedColorIndex);break;case"clear-palette":this.$store.dispatch("/clearPalette")}}},{key:"@showContextMenu",value:function(t,e){this.show(t,e)}},{key:"click $el .menu-item",value:function(t){t.preventDefault(),this.runCommand(t.$delegateTarget.attr("data-type")),this.hide()}}]),Lr);function Lr(){return d(this,Lr),x(this,(Lr.__proto__||Object.getPrototypeOf(Lr)).apply(this,arguments))}var Nr=(C(Gr,br),m(Gr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorwheel:Ar,control:Tr,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),Gr);function Gr(){return d(this,Gr),x(this,(Gr.__proto__||Object.getPrototypeOf(Gr)).apply(this,arguments))}var zr=(C(Xr,_r),m(Xr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),Xr);function Xr(t){d(this,Xr);var e=x(this,(Xr.__proto__||Object.getPrototypeOf(Xr)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="hue-control",e}var Yr=(C(Wr,vr),m(Wr,[{key:"components",value:function(){return{Hue:zr,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"chromedevtool-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Wr);function Wr(){return d(this,Wr),x(this,(Wr.__proto__||Object.getPrototypeOf(Wr)).apply(this,arguments))}var qr="chromedevtool-palette",Kr=(C(Zr,vr),m(Zr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.state.get("$el.width"),r=this.state.get("$el.height"),n=t.x/e,i=(r-t.y)/r;this.$store.dispatch("/changeColor",{type:"hsv",s:n,v:i,source:qr})}},{key:"setColorUI",value:function(){var t=this.state.get("$el.width")*this.$store.hsv.s,e=this.state.get("$el.height")*(1-this.$store.hsv.v);this.refs.$drag_pointer.css({left:t+"px",top:e+"px"}),this.drag_pointer_pos={x:t,y:e},this.setBackgroundColor(this.$store.dispatch("/getHueColor"))}},{key:"setMainColor",value:function(t){var e=this.$el.offset(),r=this.state.get("$el.contentWidth"),n=this.state.get("$el.contentHeight"),i=ir.pos(t).pageX-e.left,o=ir.pos(t).pageY-e.top;i<0?i=0:r\n
\n
\n
\n
\n
\n
\n \n '}},{key:"components",value:function(){return{palette:Kr,control:Yr,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),Qr);function Qr(){return d(this,Qr),x(this,(Qr.__proto__||Object.getPrototypeOf(Qr)).apply(this,arguments))}var tn=(C(en,vr),m(en,[{key:"components",value:function(){return{Hue:zr,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),en);function en(){return d(this,en),x(this,(en.__proto__||Object.getPrototypeOf(en)).apply(this,arguments))}var rn=(C(nn,br),m(nn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:tn}}}]),nn);function nn(){return d(this,nn),x(this,(nn.__proto__||Object.getPrototypeOf(nn)).apply(this,arguments))}var on=(C(an,_r),m(an,[{key:"getMaxDist",value:function(){return this.state.get("$container.height")}},{key:"setMousePosition",value:function(t){this.refs.$bar.css({top:t+"px"})}},{key:"getMousePosition",value:function(t){return ir.pos(t).pageY}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().top}},{key:"getCaculatedDist",value:function(t){var e=t?this.getMousePosition(t):this.getCurrent(this.getDefaultValue()/this.maxValue);return 100-this.getDist(e)}},{key:"setColorUI",value:function(t){(t=t||this.getDefaultValue())<=this.minValue?this.refs.$bar.addClass("first").removeClass("last"):t>=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first");var e=1-(t||0)/this.maxValue;this.setMousePosition(this.getMaxDist()*e)}}]),an);function an(t){d(this,an);var e=x(this,(an.__proto__||Object.getPrototypeOf(an)).call(this,t));return e.source="vertical-slider",e}var ln=(C(sn,on),m(sn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),sn);function sn(t){d(this,sn);var e=x(this,(sn.__proto__||Object.getPrototypeOf(sn)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="vertical-hue-control",e}var un=(C(cn,on),m(cn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){k(cn.prototype.__proto__||Object.getPrototypeOf(cn.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=ze.format(t,"rgb");t.a=1;var r=ze.format(t,"rgb");this.refs.$colorbar.css("background","linear-gradient(to top, "+e+", "+r+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),cn);function cn(t){d(this,cn);var e=x(this,(cn.__proto__||Object.getPrototypeOf(cn)).call(this,t));return e.source="vertical-opacity-control",e}var hn=(C(fn,vr),m(fn,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'
'}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),fn);function fn(){return d(this,fn),x(this,(fn.__proto__||Object.getPrototypeOf(fn)).apply(this,arguments))}var vn=(C(gn,br),m(gn,[{key:"template",value:function(){return'\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:hn}}}]),gn);function gn(){return d(this,gn),x(this,(gn.__proto__||Object.getPrototypeOf(gn)).apply(this,arguments))}var dn=(C(pn,vr),m(pn,[{key:"components",value:function(){return{Value:Or,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),pn);function pn(){return d(this,pn),x(this,(pn.__proto__||Object.getPrototypeOf(pn)).apply(this,arguments))}var mn=(C(yn,Ar),m(yn,[{key:"template",value:function(){return'\n
\n \n
\n
\n '}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.setHueColor(null,t)}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"setHueColor",value:function(t,e){if(this.state.get("$el.width")){var r=this.getRectangle(),n=r.minX,i=r.minY,o=r.radius,a=r.centerX,l=r.centerY,s=this.getCurrentXY(t,this.getDefaultValue(),o,a,l),u=b((h=s.x)-a,(f=s.y)-l),c=this.getCurrentXY(null,u,o-this.half_thinkness,a,l),h=c.x,f=c.y;this.refs.$drag_pointer.css({left:h-n+"px",top:f-i+"px"}),e||this.changeColor({type:"hsv",h:u})}}}]),yn);function yn(t){d(this,yn);var e=x(this,(yn.__proto__||Object.getPrototypeOf(yn)).call(this,t));return e.width=214,e.height=214,e.thinkness=16,e.half_thinkness=e.thinkness/2,e.source="colorring",e}var bn=(C($n,br),m($n,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorring:mn,palette:Kr,control:dn,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),$n);function $n(){return d(this,$n),x(this,($n.__proto__||Object.getPrototypeOf($n)).apply(this,arguments))}var kn=(C(Cn,vr),m(Cn,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(){this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Cn);function Cn(){return d(this,Cn),x(this,(Cn.__proto__||Object.getPrototypeOf(Cn)).apply(this,arguments))}var xn=(C(_n,br),m(_n,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:kn,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),_n);function _n(){return d(this,_n),x(this,(_n.__proto__||Object.getPrototypeOf(_n)).apply(this,arguments))}var wn=(C(On,vr),m(On,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),On);function On(){return d(this,On),x(this,(On.__proto__||Object.getPrototypeOf(On)).apply(this,arguments))}var Mn=(C(Sn,br),m(Sn,[{key:"template",value:function(){return"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n "}},{key:"components",value:function(){return{palette:Kr,control:wn}}},{key:"initColorWithoutChangeEvent",value:function(t){console.log(t),this.$store.dispatch("/initColor",t),this.refresh()}},{key:"setBackgroundColor",value:function(){var t=this.$store.dispatch("/toColor"),e=this.$store.rgb,r=ze.brightness(e.r,e.g,e.b);this.refs.$colorview.css({"background-color":t,color:127>16,g:(65280&t)>>8,b:(255&t)>>0,a:1};return n=Object.assign(n,U(n))}if(0<=t&&t<=4294967295){n={type:"hex",r:(4278190080&t)>>24,g:(16711680&t)>>16,b:(65280&t)>>8,a:(255&t)/255};return n=Object.assign(n,U(n))}}return t}function D(r){"string"==typeof r&&(r=T(r));var t=(r=r.map(function(t){if("string"==typeof t){var e=E(t),r=A(e.str).split(" ");return r[1]?r[1].includes("%")?r[1]=parseFloat(r[1].replace(/%/,""))/100:r[1]=parseFloat(r[1]):r[1]="*",r[0]=I(r[0],e.matches),r}if(Array.isArray(t))return t[1]?"string"==typeof t[1]&&(t[1].includes("%")?t[1]=parseFloat(t[1].replace(/%/,""))/100:t[1]=+t[1]):t[1]="*",[].concat(O(t))})).filter(function(t){return"*"===t[1]}).length;if(0= $scale ? 255 : 0;\n\n if ($hasColor) {\n\n if (v == 0) {\n $r = 0 \n $g = 0 \n $b = 0\n }\n \n } else {\n const value = Math.round(v)\n $r = value \n $g = value \n $b = value \n }\n \n ",{$C:(t=Kt(t))/100,$scale:r,$hasColor:e})}function kt(){var t=0>R,C[l+1]=c*B>>R,C[l+2]=h*B>>R,u-=f,c-=v,h-=g,f-=P.r,v-=P.g,g-=P.b,o=s+((o=r+e+1)>R,C[o+1]=c*B>>R,C[o+2]=h*B>>R,u-=f,c-=v,h-=g,f-=P.r,v-=P.g,g-=P.b,o=r+((o=n+S) 255 - $C) ? 255 : 0\n $g = ($g > 255 - $C) ? 255 : 0\n $b = ($b > 255 - $C) ? 255 : 0\n\n ",{$C:2.55*Math.abs(t)})},contrast:function(){var t=0>1),s=n[l];return n[l]=n[0],n[0]=s,n},createBitmap:Yt,createBlurMatrix:ne,pack:function(n){return function(r,t){zt(r.pixels.length,function(t,e){n(r.pixels,t,e,r.pixels[t],r.pixels[t+1],r.pixels[t+2],r.pixels[t+3])},function(){t(r)})}},packXY:re,pixel:Qt,getBitmap:Wt,putBitmap:qt,radian:function(t){return yt.CONSTANT.radian(t)},convolution:ae,parseParamNumber:Kt,filter:ce,clamp:ue,fillColor:ie,fillPixelColor:oe},"multi",fe),$(Ut,"merge",ve),$(Ut,"matches",le),$(Ut,"parseFilter",se),$(Ut,"partial",ge),Ut),Vt=Ht;function Lt(t){var e=1= mx) return {currentRunIndex: cri, i: null}; c(cri); i++;"}).join("\n");return new Function("ri","i","s","mx","c","\n let cri = ri;\n \n "+e+"\n \n return {currentRunIndex: cri, i: i} \n ")}(v),e=g,r={},n=0;n>2)},function(){r()},n.functionDumpCount,n.frameTimer,n.loopCount)}function Xt(t,r,n,e){var i=4>2;n(t,e%r,Math.floor(e/r))},function(){e()},i.functionDumpCount,i.frameTimer,i.loopCount)}function Yt(t,e,r){return{pixels:new Uint8ClampedArray(t),width:e,height:r}}function Wt(t,e){return gt.getBitmap(t,e)}function qt(t,e,r){return gt.putBitmap(t,e,r)}function Kt(t){return"string"==typeof t&&(t=(t=t.replace(/deg/,"")).replace(/px/,"")),+t}var Zt=/(([\w_\-]+)(\(([^\)]*)\))?)+/gi;function Jt(t,e,r){var a,n,i,o,l;return a={},n=[{callback:t,context:1t.width||a>t.height||(u=s*e.width+l<<2,c=a*t.width+o<<2,t.pixels[c]=e.pixels[u],t.pixels[c+1]=e.pixels[u+1],t.pixels[c+2]=e.pixels[u+2],t.pixels[c+3]=e.pixels[u+3])}(n,t,r,r);for(var i=Yt(n.pixels.length,n.width,n.height),o=Yt(t.pixels.length,t.width,t.height),a=function(t,o,i,e){var a=Math.round(Math.sqrt(t.length)),l=Math.floor(a/2),r=e?1:0,n="let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ",s=[],u=[],c=[],h=[];t.forEach(function(t,e){var r=Math.floor(e/a)-l,n=e%a-l;0!=t&&(s.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4]]"),u.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 1]]"),c.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 2]]"),h.push("$t["+e+"][$sp[(($sy + ("+r+")) * "+i+" + ($sx + ("+n+"))) * 4 + 3]]"))}),n+="r = "+s.join(" + ")+"; g = "+u.join(" + ")+"; b = "+c.join(" + ")+"; a = "+h.join(" + ")+";",n+="$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + ("+r+")*(255-a); ";var f=new Function("$dp","$sp","$di","$sx","$sy","$t",n);return function(t,e,r,n,i){f(t,e,r,n,i,o)}}(h,v,n.width,(n.height,f)),l=t.pixels.length/4,s=0;s>2,o=0,a=0,l=0,s=0,u=0,c=0,h=0;ht.width||a>t.height||(u=a*t.width+o<<2,c=s*e.width+l<<2,e.pixels[c]=t.pixels[u],e.pixels[c+1]=t.pixels[u+1],e.pixels[c+2]=t.pixels[u+2],e.pixels[c+3]=t.pixels[u+3])}}(i,o,r,r),e(o)}}function le(r){var e=ze.convertMatches(r),t=e.str.match(Zt),n=[];if(!t)return n;n=t.map(function(t){return{filter:t,origin:ze.reverseMatches(t,e.matches)}});var i={next:0};return n=n.map(function(t){var e=r.indexOf(t.origin,i.next);return t.startIndex=e,t.endIndex=e+t.origin.length,t.arr=se(t.origin),i.next=t.endIndex,t}).filter(function(t){return!!t.arr.length})}function se(t){var e=ze.convertMatches(t),r=e.str.match(Zt);if(!r[0])return[];var n=r[0].split("("),i=n.shift(),o=[];return n.length&&(o=n.shift().split(")")[0].split(",").map(function(t){return ze.reverseMatches(t,e.matches)})),[i].concat(O(o)).map(ze.trim)}function ue(t){return Math.min(255,t)}function ce(t){return ve(le(t).map(function(t){return t.arr}))}function he(t){for(var e=0=l)return e(n);o()}()},r)}o()}}function ve(t){return fe.apply(void 0,O(t))}function ge(n){for(var i=null,t=arguments.length,e=Array(1= "+(t=xe(de(t)))+" ? 1.0 : 0.0;\n\n outColor = vec4(c, c, c, pixelColor.a);\n ")}var Ue=_({},{blur:function(){return be([1,1,1,1,1,1,1,1,1])},normal:function(){return be([0,0,0,0,1,0,0,0,0])},emboss:function(){var t=0 "+r+") {\n outColor = vec4("+Ce(ze.parse(e))+".rgb, pixelColor.a);\n } else {\n outColor = vec4("+n+".rgb, pixelColor.a);\n }\n ")},brightness:function(){return $e("\n outColor = pixelColor + ("+xe(de(0 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.g > 1.0 - "+t+") ? 1.0 : 0.0,\n (pixelColor.b > 1.0 - "+t+") ? 1.0 : 0.0,\n pixelColor.a \n );\n ")},chaos:function(){return $e("\n vec2 st = pixelColor.st;\n st *= "+xe(de(0e&&(t=ft(t,e)),t.map(function(t){return h(t,r)})},ImageToCanvas:function(t,e,r){var n=3=t){e=Xe[n-1],r=Xe[n];break}return e&&r?ze.interpolateRGB(e,r,(t-e.start)/(r.start-e.start)):Xe[0].rgb}},We=_({},Ft,Ht),qe={Color:ze,HueColor:Ye,ColorNames:f,ImageFilter:We,GL:Ne,Canvas:gt,ImageLoader:dt},Ke=(ze.color,0),Ze=[],Je=(m(Qe,[{key:"attr",value:function(t,e){return 1==arguments.length?this.el.getAttribute(t):(this.el.setAttribute(t,e),this)}},{key:"closest",value:function(t){for(var e=this,r=!1;!(r=e.hasClass(t));){if(!e.el.parentNode)return null;e=new Qe(e.el.parentNode)}return r?e:null}},{key:"checked",value:function(){return this.el.checked}},{key:"removeClass",value:function(t){return this.el.className=(" "+this.el.className+" ").replace(" "+t+" "," ").trim(),this}},{key:"hasClass",value:function(t){return!!this.el.className&&-1<(" "+this.el.className+" ").indexOf(" "+t+" ")}},{key:"addClass",value:function(t){return this.hasClass(t)||(this.el.className=this.el.className+" "+t),this}},{key:"toggleClass",value:function(t){this.hasClass(t)?this.removeClass(t):this.addClass(t)}},{key:"html",value:function(e){try{"string"==typeof e?this.el.innerHTML=e:this.empty().append(e)}catch(t){console.log(e)}return this}},{key:"find",value:function(t){return this.el.querySelector(t)}},{key:"$",value:function(t){return new Qe(this.find(t))}},{key:"findAll",value:function(t){return this.el.querySelectorAll(t)}},{key:"$$",value:function(t){return[].concat(O(this.findAll(t))).map(function(t){return new Qe(t)})}},{key:"empty",value:function(){return this.html("")}},{key:"append",value:function(t){return"string"==typeof t?this.el.appendChild(document.createTextNode(t)):this.el.appendChild(t.el||t),this}},{key:"appendTo",value:function(t){return(t.el?t.el:t).appendChild(this.el),this}},{key:"remove",value:function(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}},{key:"text",value:function(){return this.el.textContent}},{key:"css",value:function(t,e){var r=this;if(2==arguments.length)this.el.style[t]=e;else if(1==arguments.length){if("string"==typeof t)return getComputedStyle(this.el)[t];var n=t||{};Object.keys(n).forEach(function(t){r.el.style[t]=n[t]})}return this}},{key:"cssFloat",value:function(t){return parseFloat(this.css(t))}},{key:"cssInt",value:function(t){return parseInt(this.css(t))}},{key:"offset",value:function(){var t=this.el.getBoundingClientRect();return{top:t.top+Qe.getScrollTop(),left:t.left+Qe.getScrollLeft()}}},{key:"rect",value:function(){return this.el.getBoundingClientRect()}},{key:"position",value:function(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.el.getBoundingClientRect()}},{key:"size",value:function(){return[this.width(),this.height()]}},{key:"width",value:function(){return this.el.offsetWidth||this.el.getBoundingClientRect().width}},{key:"contentWidth",value:function(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}},{key:"height",value:function(){return this.el.offsetHeight||this.el.getBoundingClientRect().height}},{key:"contentHeight",value:function(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}},{key:"dataKey",value:function(t){return this.uniqId+"."+t}},{key:"data",value:function(t,e){if(2==arguments.length)return Ze[this.dataKey(t)]=e,this;if(1==arguments.length)return Ze[this.dataKey(t)];var r=Object.keys(Ze),n=this.uniqId+".";return r.filter(function(t){return 0==t.indexOf(n)}).map(function(t){return Ze[t]})}},{key:"val",value:function(t){return 0==arguments.length?this.el.value:(1==arguments.length&&(this.el.value=t),this)}},{key:"int",value:function(){return parseInt(this.val(),10)}},{key:"float",value:function(){return parseFloat(this.val())}},{key:"show",value:function(){return this.css("display","block")}},{key:"hide",value:function(){return this.css("display","none")}},{key:"toggle",value:function(){return"none"==this.css("display")?this.show():this.hide()}},{key:"scrollTop",value:function(){return this.el===document.body?Qe.getScrollTop():this.el.scrollTop}},{key:"scrollLeft",value:function(){return this.el===document.body?Qe.getScrollLeft():this.el.scrollLeft}},{key:"on",value:function(t,e,r,n){return this.el.addEventListener(t,e,r,n),this}},{key:"off",value:function(t,e){return this.el.removeEventListener(t,e),this}},{key:"getElement",value:function(){return this.el}},{key:"createChild",value:function(t,e,r,n){var i=3"}},{key:"initialize",value:function(){}},{key:"initializeEvent",value:function(){var e=this;this.initializeEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].initializeEvent()})}},{key:"destroy",value:function(){var e=this;this.destroyEventMachin(),Object.keys(this.childComponents).forEach(function(t){e[t]&&e[t].destroy()})}},{key:"destroyEventMachin",value:function(){this.removeEventAll()}},{key:"initializeEventMachin",value:function(){this.filterProps(lr).forEach(this.parseEvent.bind(this))}},{key:"collectProps",value:function(){if(!this.collapsedProps){for(var t=this.__proto__,e=[];e.push.apply(e,O(Object.getOwnPropertyNames(t))),t=t.__proto__;);this.collapsedProps=e}return this.collapsedProps}},{key:"filterProps",value:function(e){return this.collectProps().filter(function(t){return t.match(e)})}},{key:"parseEvent",value:function(t){var e=t.split(" ");this.bindingEvent(e,this[t].bind(this))}},{key:"getDefaultDomElement",value:function(t){var e=void 0;return(e=t?this.refs[t]||this[t]||window[t]:this.el||this.$el||this.$root)instanceof Je?e.getElement():e}},{key:"getDefaultEventObject",value:function(t){var e=this,r=t.split("."),n=r.shift(),i=r.includes("Control"),o=r.includes("Shift"),a=r.includes("Alt"),l=r.includes("Meta"),s=(r=r.filter(function(t){return!1===ur.includes(t)})).filter(function(t){return!!e[t]});return{eventName:n,isControl:i,isShift:o,isAlt:a,isMeta:l,codes:r=r.filter(function(t){return!1===s.includes(t)}).map(function(t){return t.toLowerCase()}),checkMethodList:s}}},{key:"bindingEvent",value:function(t,e){var r,n=(r=t,Array.isArray(r)?r:Array.from(r)),i=n[0],o=n[1],a=n.slice(2);o=this.getDefaultDomElement(o);var l=this.getDefaultEventObject(i);l.dom=o,l.delegate=a.join(" "),this.addEvent(l,e)}},{key:"matchPath",value:function(t,e){return t?t.matches(e)?t:this.matchPath(t.parentElement,e):null}},{key:"getBindings",value:function(){return this._bindings||this.initBindings(),this._bindings}},{key:"addBinding",value:function(t){this.getBindings().push(t)}},{key:"initBindings",value:function(){this._bindings=[]}},{key:"checkEventType",value:function(e,t){var r=this,n=!t.isControl||e.ctrlKey,i=!t.isShift||e.shiftKey,o=!t.isAlt||e.altKey,a=!t.isMeta||e.metaKey,l=!0;t.codes.length&&(l=t.codes.includes(e.code.toLowerCase())||t.codes.includes(e.key.toLowerCase()));var s=!0;return t.checkMethodList.length&&(s=t.checkMethodList.every(function(t){return r[t].call(r,e)})),n&&o&&i&&a&&l&&s}},{key:"makeCallback",value:function(r,n){var i=this;return r.delegate?function(t){if(t.xy=ir.posXY(t),i.checkEventType(t,r)){var e=i.matchPath(t.target||t.srcElement,r.delegate);if(e)return t.delegateTarget=e,t.$delegateTarget=new Je(e),n(t)}}:function(t){if(t.xy=ir.posXY(t),i.checkEventType(t,r))return n(t)}}},{key:"addEvent",value:function(t,e){t.callback=this.makeCallback(t,e),this.addBinding(t);var r=!0;"touchstart"===t.eventName&&(r={passive:!0}),ir.addEvent(t.dom,t.eventName,t.callback,r)}},{key:"removeEventAll",value:function(){var e=this;this.getBindings().forEach(function(t){e.removeEvent(t)}),this.initBindings()}},{key:"removeEvent",value:function(t){var e=t.eventName,r=t.dom,n=t.callback;ir.removeEvent(r,e,n)}}]),hr);function hr(){d(this,hr),this.state=new or(this),this.refs={},this.childComponents=this.components()}var fr=/^@/,vr=(C(gr,cr),m(gr,[{key:"initializeStoreEvent",value:function(){var n=this;this.storeEvents={},this.filterProps(fr).forEach(function(t){var e=t.split("@");e.shift();var r=e.join("@");n.storeEvents[r]=n[t].bind(n),n.$store.on(r,n.storeEvents[r])})}},{key:"destoryStoreEvent",value:function(){var e=this;Object.keys(this.storeEvents).forEach(function(t){e.$store.off(t,e.storeEvents[t])})}}]),gr);function gr(t){d(this,gr);var e=x(this,(gr.__proto__||Object.getPrototypeOf(gr)).call(this,t));return e.opt=t||{},t&&t.$store&&(e.$store=t.$store),e.initialize(),e.initializeStoreEvent(),e}var dr=(C(pr,tr),m(pr,[{key:"initialize",value:function(){k(pr.prototype.__proto__||Object.getPrototypeOf(pr.prototype),"initialize",this).call(this),this.$store.rgb={},this.$store.hsl={},this.$store.hsv={},this.$store.alpha=1,this.$store.format="hex"}},{key:"/changeFormat",value:function(t,e){t.format=e,t.emit("changeFormat")}},{key:"/initColor",value:function(t,e,r){t.dispatch("/changeColor",e,r,!0),t.emit("initColor")}},{key:"/changeColor",value:function(t,e,r,n){var i;"string"==typeof(e=e||"#FF0000")&&(e=ze.parse(e)),e.source=e.source||r,t.alpha=void 0===(i=e.a)||null==i?t.alpha:e.a,t.format="hsv"!=e.type&&e.type||t.format,"hsl"==e.type?(t.hsl=Object.assign(t.hsl,e),t.rgb=ze.HSLtoRGB(t.hsl),t.hsv=ze.HSLtoHSV(e)):"hex"==e.type||"rgb"==e.type?(t.rgb=Object.assign(t.rgb,e),t.hsl=ze.RGBtoHSL(t.rgb),t.hsv=ze.RGBtoHSV(e)):"hsv"==e.type&&(t.hsv=Object.assign(t.hsv,e),t.rgb=ze.HSVtoRGB(t.hsv),t.hsl=ze.HSVtoHSL(t.hsv)),n||t.emit("changeColor",e.source)}},{key:"/getHueColor",value:function(t){return Ye.checkHueColor(t.hsv.h/360)}},{key:"/toString",value:function(t,e){var r=t[e=e||t.format]||t.rgb;return ze.format(_({},r,{a:t.alpha}),e)}},{key:"/toColor",value:function(t,e){return"rgb"==(e=e||t.format)?t.dispatch("/toRGB"):"hsl"==e?t.dispatch("/toHSL"):"hex"==e?t.dispatch("/toHEX"):t.dispatch("/toString",e)}},{key:"/toRGB",value:function(t){return t.dispatch("/toString","rgb")}},{key:"/toHSL",value:function(t){return t.dispatch("/toString","hsl")}},{key:"/toHEX",value:function(t){return t.dispatch("/toString","hex").toUpperCase()}}]),pr);function pr(){return d(this,pr),x(this,(pr.__proto__||Object.getPrototypeOf(pr)).apply(this,arguments))}var mr=(m(yr,[{key:"initialize",value:function(){this.initializeModule()}},{key:"initializeModule",value:function(){var e=this;this.modules.forEach(function(t){new t(e)})}},{key:"action",value:function(t,e){this.actions[t]={context:e,callback:e[t]}}},{key:"dispatch",value:function(t){var e=[].concat(Array.prototype.slice.call(arguments)),r=(t=e.shift(),this.actions[t]);if(r)return r.callback.apply(r.context,[this].concat(O(e)))}},{key:"module",value:function(){}},{key:"on",value:function(t,e){this.callbacks.push({event:t,callback:e})}},{key:"off",value:function(e,r){0==arguments.length?this.callbacks=[]:1==arguments.length?this.callbacks=this.callbacks.filter(function(t){return t.event!=e}):2==arguments.length&&(this.callbacks=this.callbacks.filter(function(t){return t.event!=e&&t.callback!=r}))}},{key:"emit",value:function(){var e=[].concat(Array.prototype.slice.call(arguments)),r=e.shift();this.callbacks.filter(function(t){return t.event==r}).forEach(function(t){t&&"function"==typeof t.callback&&t.callback.apply(t,O(e))})}}]),yr);function yr(t){d(this,yr),this.callbacks=[],this.actions=[],this.modules=t.modules||[],this.initialize()}var br=(C(kr,vr),m(kr,[{key:"initialize",value:function(){var t=this;this.$body=null,this.$root=null,this.$store=new mr({modules:[dr,rr]}),this.callbackChange=function(){t.callbackColorValue()},this.callbackLastUpdate=function(){t.callbackLastUpdateColorValue()},this.colorpickerShowCallback=function(){},this.colorpickerHideCallback=function(){},this.colorpickerLastUpdateCallback=function(){},this.$body=new Je(this.getContainer()),this.$root=new Je("div","codemirror-colorpicker"),"inline"==this.opt.position&&this.$body.append(this.$root),this.opt.type&&this.$root.addClass(this.opt.type),this.opt.hideInformation&&this.$root.addClass("hide-information"),this.opt.hideColorsets&&this.$root.addClass("hide-colorsets"),this.$arrow=new Je("div","arrow"),this.$root.append(this.$arrow),this.$store.dispatch("/setUserPalette",this.opt.colorSets),this.render(),this.$root.append(this.$el),this.initColorWithoutChangeEvent(this.opt.color),this.initializeEvent()}},{key:"initColorWithoutChangeEvent",value:function(t){this.$store.dispatch("/initColor",t)}},{key:"show",value:function(t,e,r,n,i){this.colorpickerShowCallback=r,this.colorpickerHideCallback=n,this.colorpickerLastUpdateCallback=i,this.$root.css(this.getInitalizePosition()).show(),this.isColorPickerShow=!0,this.isShortCut=t.isShortCut||!1,this.outputFormat=t.outputFormat,this.hideDelay=+(void 0===t.hideDelay?2e3:t.hideDelay),0window.innerWidth&&(n-=e+n-window.innerWidth),n<0&&(n=0);var i=t.top-this.$body.scrollTop();r+i>window.innerHeight&&(i-=r+i-window.innerHeight),i<0&&(i=0),this.$root.css({left:n+"px",top:i+"px"})}},{key:"getInitalizePosition",value:function(){return"inline"==this.opt.position?{position:"relative",left:"auto",top:"auto",display:"inline-block"}:{position:"fixed",left:"-10000px",top:"-10000px"}}},{key:"isAbsolute",value:function(){return"inline"!==this.opt.position}},{key:"mouseup.isAbsolute document",value:function(t){this.__isMouseDown=!1,this.checkInHtml(t.target)||(0==this.checkColorPickerClass(t.target)?this.hide():this.__isMouseIn||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay)))}},{key:"keyup.isAbsolute.escape $root",value:function(){this.hide()}},{key:"mouseover.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker)}},{key:"mousemove.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker)}},{key:"mouseenter.isAbsolute $root",value:function(){clearTimeout(this.timerCloseColorPicker),this.__isMouseIn=!0}},{key:"mouseleave.isAbsolute $root",value:function(){this.__isMouseIn=!1,this.__isMouseDown||(clearTimeout(this.timerCloseColorPicker),this.timerCloseColorPicker=setTimeout(this.hide.bind(this),this.delayTime||this.hideDelay))}},{key:"mousedown.isAbsolute $root",value:function(){this.__isMouseDown=!0}},{key:"setHideDelay",value:function(t){this.delayTime=t||0}},{key:"runHideDelay",value:function(){this.isColorPickerShow&&this.setHideDelay()}},{key:"callbackColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onChange&&this.opt.onChange.call(this,t),"function"==typeof this.colorpickerShowCallback&&this.colorpickerShowCallback(t)}},{key:"callbackLastUpdateColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onLastUpdate&&this.opt.onLastUpdate.call(this,t),"function"==typeof this.colorpickerLastUpdateCallback&&this.colorpickerLastUpdateCallback(t)}},{key:"callbackHideColorValue",value:function(t){t=t||this.getCurrentColor(),"function"==typeof this.opt.onHide&&this.opt.onHide.call(this,t),"function"==typeof this.colorpickerHideCallback&&this.colorpickerHideCallback(t)}},{key:"getCurrentColor",value:function(){return this.$store.dispatch("/toColor",this.outputFormat)}},{key:"checkColorPickerClass",value:function(t){var e=new Je(t).closest("codemirror-colorview"),r=new Je(t).closest("codemirror-colorpicker"),n=new Je(t).closest("CodeMirror");return t.nodeName,!!(r||e||n)}},{key:"checkInHtml",value:function(t){return"HTML"==t.nodeName}},{key:"initializeStoreEvent",value:function(){k(kr.prototype.__proto__||Object.getPrototypeOf(kr.prototype),"initializeStoreEvent",this).call(this),this.$store.on("changeColor",this.callbackChange),this.$store.on("lastUpdateColor",this.callbackLastUpdate),this.$store.on("changeFormat",this.callbackChange)}},{key:"destroy",value:function(){k(kr.prototype.__proto__||Object.getPrototypeOf(kr.prototype),"destroy",this).call(this),this.$store.off("changeColor",this.callbackChange),this.$store.off("lastUpdateColor",this.callbackLastUpdate),this.$store.off("changeFormat",this.callbackChange),this.callbackChange=void 0,this.callbackLastUpdate=void 0,this.colorpickerShowCallback=void 0,this.colorpickerHideCallback=void 0}}]),kr);function kr(t){d(this,kr);var e=x(this,(kr.__proto__||Object.getPrototypeOf(kr)).call(this,t));return e.isColorPickerShow=!1,e.isShortCut=!1,e.hideDelay=+(void 0===e.opt.hideDeplay?2e3:e.opt.hideDelay),e.timerCloseColorPicker,e.autoHide=e.opt.autoHide||!0,e.outputFormat=e.opt.outputFormat,e.$checkColorPickerClass=e.checkColorPickerClass.bind(e),e}var Cr=(C(xr,vr),m(xr,[{key:"refresh",value:function(){}},{key:"refreshColorUI",value:function(){}},{key:"changeColor",value:function(t){this.$store.dispatch("/changeColor",Object.assign({source:this.source},t||{}))}},{key:"mouseup document",value:function(t){this.onDragEnd(t)}},{key:"mousemove document",value:function(t){this.onDragMove(t)}},{key:"mousedown $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"mousedown $container",value:function(t){this.isDown=!0,this.onDragStart(t)}},{key:"touchend document",value:function(t){this.onDragEnd(t)}},{key:"touchmove document",value:function(t){this.onDragMove(t)}},{key:"touchstart $bar",value:function(t){t.preventDefault(),this.isDown=!0}},{key:"touchstart $container",value:function(t){this.onDragStart(t)}},{key:"onDragStart",value:function(t){this.isDown=!0,this.refreshColorUI(t)}},{key:"onDragMove",value:function(t){this.isDown&&this.refreshColorUI(t)}},{key:"onDragEnd",value:function(){this.isDown&&(this.$store.emit("lastUpdateColor"),this.isDown=!1)}},{key:"@changeColor",value:function(t){this.source!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),xr);function xr(t){d(this,xr);var e=x(this,(xr.__proto__||Object.getPrototypeOf(xr)).call(this,t));return e.source="base-box",e}var _r=(C(wr,Cr),m(wr,[{key:"getMinMaxPosition",value:function(){var t=this.getMinPosition(),e=this.getMaxDist();return{min:t,max:t+e,width:e}}},{key:"getCurrent",value:function(t){return min+this.getMaxDist()*t}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().left}},{key:"getMaxDist",value:function(){return this.state.get("$container.width")}},{key:"getDist",value:function(t){var e=this.getMinMaxPosition(),r=e.min,n=e.max;return t=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first"),this.setMousePosition(this.getMaxDist()*((t||0)/this.maxValue))}}]),wr);function wr(t){d(this,wr);var e=x(this,(wr.__proto__||Object.getPrototypeOf(wr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="base-slider",e}var Or=(C(Mr,_r),m(Mr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$container.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){k(Mr.prototype.__proto__||Object.getPrototypeOf(Mr.prototype),"refresh",this).call(this),this.setBackgroundColor()}},{key:"getDefaultValue",value:function(){return this.$store.hsv.v}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({type:"hsv",v:e/100*this.maxValue})}}]),Mr);function Mr(t){d(this,Mr);var e=x(this,(Mr.__proto__||Object.getPrototypeOf(Mr)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="value-control",e}var Sr=(C(Er,_r),m(Er,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){k(Er.prototype.__proto__||Object.getPrototypeOf(Er.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=ze.format(t,"rgb");t.a=1;var r=ze.format(t,"rgb");this.setOpacityColorBarBackground(e,r)}},{key:"setOpacityColorBarBackground",value:function(t,e){this.refs.$colorbar.css("background","linear-gradient(to right, "+t+", "+e+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),Er);function Er(t){d(this,Er);var e=x(this,(Er.__proto__||Object.getPrototypeOf(Er)).call(this,t));return e.minValue=0,e.maxValue=1,e.source="opacity-control",e}var Tr=(C(Ir,vr),m(Ir,[{key:"components",value:function(){return{Value:Or,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Ir);function Ir(){return d(this,Ir),x(this,(Ir.__proto__||Object.getPrototypeOf(Ir)).apply(this,arguments))}var Ar=(C(Pr,vr),m(Pr,[{key:"template",value:function(){return'\n
\n \n
\n
\n
\n '}},{key:"refresh",value:function(t){this.setColorUI(t)}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.renderValue(),this.setHueColor(null,t)}},{key:"renderValue",value:function(){var t=1-this.$store.hsv.v;this.refs.$valuewheel.css({"background-color":"rgba(0, 0, 0, "+t+")"})}},{key:"renderWheel",value:function(t,e){this.width&&!t&&(t=this.width),this.height&&!e&&(e=this.height);var r=new Je("canvas"),n=r.el.getContext("2d");r.el.width=t,r.el.height=e,r.css({width:t+"px",height:e+"px"});for(var i=n.getImageData(0,0,t,e),o=i.data,a=Math.floor(t/2),l=Math.floor(e/2),s=e\n
\n \n
\n
\n
\n \n
HEX
\n
\n
\n
\n
\n \n
R
\n
\n
\n \n
G
\n
\n
\n \n
B
\n
\n
\n \n
A
\n
\n
\n
\n
\n \n
H
\n
\n
\n \n
%
\n
S
\n
\n
\n \n
%
\n
L
\n
\n
\n \n
A
\n
\n
\n \n '}},{key:"setCurrentFormat",value:function(t){this.format=t,this.initFormat()}},{key:"initFormat",value:function(){var e=this,r=this.format||"hex";["hex","rgb","hsl"].filter(function(t){return t!==r}).forEach(function(t){e.$el.removeClass(t)}),this.$el.addClass(r)}},{key:"nextFormat",value:function(){var t=this.$store.format||"hex",e="hex";"hex"==t?e="rgb":"rgb"==t?e="hsl":"hsl"==t&&(e="hex"),this.format=e,this.$store.dispatch("/changeFormat",e),this.$store.emit("lastUpdateColor"),this.initFormat()}},{key:"goToFormat",value:function(t){this.format=t,this.$store.dispatch("/changeFormat",this.format),this.$store.emit("lastUpdateColor"),this.initFormat()}},{key:"getFormat",value:function(){return this.format||"hex"}},{key:"checkNumberKey",value:function(t){var e=t.which,r=!1;return 37!=e&&39!=e&&8!=e&&46!=e&&9!=e||(r=!0),!(!r&&(e<48||57\n
\n
\n

Color Palettes

\n ×\n
\n
\n
\n \n '}},{key:"refresh",value:function(){this.load()}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"@toggleColorChooser",value:function(){this.toggle()}},{key:"load $colorsetsList",value:function(){return"\n
\n "+this.$store.dispatch("/getColorSetsList").map(function(t,e){return'\n
\n

'+t.name+'

\n
\n
\n '+t.colors.filter(function(t,e){return e<5}).map(function(t){return'
\n
\n
'}).join("")+"\n
\n
\n
"}).join("")+"\n
\n "}},{key:"show",value:function(){this.$el.addClass("open")}},{key:"hide",value:function(){this.$el.removeClass("open")}},{key:"toggle",value:function(){this.$el.toggleClass("open")}},{key:"click $toggleButton",value:function(){this.toggle()}},{key:"click $colorsetsList .colorsets-item",value:function(t){var e=t.$delegateTarget;if(e){var r=parseInt(e.attr("data-colorsets-index"));this.$store.dispatch("/setCurrentColorSets",r),this.hide()}}},{key:"destroy",value:function(){k(Fr.prototype.__proto__||Object.getPrototypeOf(Fr.prototype),"destroy",this).call(this),this.hide()}}]),Fr);function Fr(){return d(this,Fr),x(this,(Fr.__proto__||Object.getPrototypeOf(Fr)).apply(this,arguments))}var jr=(C(Hr,vr),m(Hr,[{key:"template",value:function(){return'\n
\n
\n \n
\n
\n
\n '}},{key:"load $colorSetsColorList",value:function(){var t=this.$store.dispatch("/getCurrentColorSets");return'\n
\n '+this.$store.dispatch("/getCurrentColors").map(function(t,e){return'
\n
\n
\n
'}).join("")+" \n "+(t.edit?'
+
':"")+" \n
\n "}},{key:"refresh",value:function(){this.load()}},{key:"addColor",value:function(t){this.$store.dispatch("/addCurrentColor",t)}},{key:"@changeCurrentColorSets",value:function(){this.refresh()}},{key:"click $colorSetsChooseButton",value:function(){this.$store.emit("toggleColorChooser")}},{key:"contextmenu $colorSetsColorList",value:function(t){if(t.preventDefault(),this.$store.dispatch("/getCurrentColorSets").edit){var e=new Je(t.target).closest("color-item");if(e){var r=parseInt(e.attr("data-index"));this.$store.emit("showContextMenu",t,r)}else this.$store.emit("showContextMenu",t)}}},{key:"click $colorSetsColorList .add-color-item",value:function(){this.addColor(this.$store.dispatch("/toColor"))}},{key:"click $colorSetsColorList .color-item",value:function(t){this.$store.dispatch("/changeColor",t.$delegateTarget.attr("data-color")),this.$store.emit("lastUpdateColor")}}]),Hr);function Hr(){return d(this,Hr),x(this,(Hr.__proto__||Object.getPrototypeOf(Hr)).apply(this,arguments))}var Vr=(C(Lr,vr),m(Lr,[{key:"template",value:function(){return'\n
    \n
  • Remove color
    • \n
  • Remove all to the right
    • \n
  • Clear palette
    • \n
\n '}},{key:"show",value:function(t,e){var r=ir.pos(t);this.$el.css({top:r.clientY-10+"px",left:r.clientX+"px"}),this.$el.addClass("show"),this.selectedColorIndex=e,void 0===this.selectedColorIndex?this.$el.addClass("small"):this.$el.removeClass("small")}},{key:"hide",value:function(){this.$el.removeClass("show")}},{key:"runCommand",value:function(t){switch(t){case"remove-color":this.$store.dispatch("/removeCurrentColor",this.selectedColorIndex);break;case"remove-all-to-the-right":this.$store.dispatch("/removeCurrentColorToTheRight",this.selectedColorIndex);break;case"clear-palette":this.$store.dispatch("/clearPalette")}}},{key:"@showContextMenu",value:function(t,e){this.show(t,e)}},{key:"click $el .menu-item",value:function(t){t.preventDefault(),this.runCommand(t.$delegateTarget.attr("data-type")),this.hide()}}]),Lr);function Lr(){return d(this,Lr),x(this,(Lr.__proto__||Object.getPrototypeOf(Lr)).apply(this,arguments))}var Nr=(C(Gr,br),m(Gr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorwheel:Ar,control:Tr,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),Gr);function Gr(){return d(this,Gr),x(this,(Gr.__proto__||Object.getPrototypeOf(Gr)).apply(this,arguments))}var zr=(C(Xr,_r),m(Xr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),Xr);function Xr(t){d(this,Xr);var e=x(this,(Xr.__proto__||Object.getPrototypeOf(Xr)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="hue-control",e}var Yr=(C(Wr,vr),m(Wr,[{key:"components",value:function(){return{Hue:zr,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"chromedevtool-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Wr);function Wr(){return d(this,Wr),x(this,(Wr.__proto__||Object.getPrototypeOf(Wr)).apply(this,arguments))}var qr="chromedevtool-palette",Kr=(C(Zr,vr),m(Zr,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(t){this.$el.css("background-color",t)}},{key:"refresh",value:function(){this.setColorUI()}},{key:"caculateSV",value:function(){var t=this.drag_pointer_pos||{x:0,y:0},e=this.state.get("$el.width"),r=this.state.get("$el.height"),n=t.x/e,i=(r-t.y)/r;this.$store.dispatch("/changeColor",{type:"hsv",s:n,v:i,source:qr})}},{key:"setColorUI",value:function(){var t=this.state.get("$el.width")*this.$store.hsv.s,e=this.state.get("$el.height")*(1-this.$store.hsv.v);this.refs.$drag_pointer.css({left:t+"px",top:e+"px"}),this.drag_pointer_pos={x:t,y:e},this.setBackgroundColor(this.$store.dispatch("/getHueColor"))}},{key:"setMainColor",value:function(t){var e=this.$el.offset(),r=this.state.get("$el.contentWidth"),n=this.state.get("$el.contentHeight"),i=ir.pos(t).pageX-e.left,o=ir.pos(t).pageY-e.top;i<0?i=0:r\n
\n
\n
\n
\n
\n
\n \n '}},{key:"components",value:function(){return{palette:Kr,control:Yr,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),Qr);function Qr(){return d(this,Qr),x(this,(Qr.__proto__||Object.getPrototypeOf(Qr)).apply(this,arguments))}var tn=(C(en,vr),m(en,[{key:"components",value:function(){return{Hue:zr,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),en);function en(){return d(this,en),x(this,(en.__proto__||Object.getPrototypeOf(en)).apply(this,arguments))}var rn=(C(nn,br),m(nn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:tn}}}]),nn);function nn(){return d(this,nn),x(this,(nn.__proto__||Object.getPrototypeOf(nn)).apply(this,arguments))}var on=(C(an,_r),m(an,[{key:"getMaxDist",value:function(){return this.state.get("$container.height")}},{key:"setMousePosition",value:function(t){this.refs.$bar.css({top:t+"px"})}},{key:"getMousePosition",value:function(t){return ir.pos(t).pageY}},{key:"getMinPosition",value:function(){return this.refs.$container.offset().top}},{key:"getCaculatedDist",value:function(t){var e=t?this.getMousePosition(t):this.getCurrent(this.getDefaultValue()/this.maxValue);return 100-this.getDist(e)}},{key:"setColorUI",value:function(t){(t=t||this.getDefaultValue())<=this.minValue?this.refs.$bar.addClass("first").removeClass("last"):t>=this.maxValue?this.refs.$bar.addClass("last").removeClass("first"):this.refs.$bar.removeClass("last").removeClass("first");var e=1-(t||0)/this.maxValue;this.setMousePosition(this.getMaxDist()*e)}}]),an);function an(t){d(this,an);var e=x(this,(an.__proto__||Object.getPrototypeOf(an)).call(this,t));return e.source="vertical-slider",e}var ln=(C(sn,on),m(sn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n '}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({h:e/100*this.maxValue,type:"hsv"})}}]),sn);function sn(t){d(this,sn);var e=x(this,(sn.__proto__||Object.getPrototypeOf(sn)).call(this,t));return e.minValue=0,e.maxValue=360,e.source="vertical-hue-control",e}var un=(C(cn,on),m(cn,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){k(cn.prototype.__proto__||Object.getPrototypeOf(cn.prototype),"refresh",this).call(this),this.setOpacityColorBar()}},{key:"setOpacityColorBar",value:function(){var t=Object.assign({},this.$store.rgb);t.a=0;var e=ze.format(t,"rgb");t.a=1;var r=ze.format(t,"rgb");this.refs.$colorbar.css("background","linear-gradient(to top, "+e+", "+r+")")}},{key:"getDefaultValue",value:function(){return this.$store.alpha}},{key:"refreshColorUI",value:function(t){var e=this.getCaculatedDist(t);this.setColorUI(e/100*this.maxValue),this.changeColor({a:Math.floor(e)/100*this.maxValue})}}]),cn);function cn(t){d(this,cn);var e=x(this,(cn.__proto__||Object.getPrototypeOf(cn)).call(this,t));return e.source="vertical-opacity-control",e}var hn=(C(fn,vr),m(fn,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'
'}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),fn);function fn(){return d(this,fn),x(this,(fn.__proto__||Object.getPrototypeOf(fn)).apply(this,arguments))}var vn=(C(gn,br),m(gn,[{key:"template",value:function(){return'\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:hn}}}]),gn);function gn(){return d(this,gn),x(this,(gn.__proto__||Object.getPrototypeOf(gn)).apply(this,arguments))}var dn=(C(pn,vr),m(pn,[{key:"components",value:function(){return{Value:Or,Opacity:Sr}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n '}},{key:"setBackgroundColor",value:function(){this.refs.$controlColor.css("background-color",this.$store.dispatch("/toRGB"))}},{key:"refresh",value:function(){this.setColorUI(),this.setBackgroundColor()}},{key:"setColorUI",value:function(){this.Value.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"macos-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),pn);function pn(){return d(this,pn),x(this,(pn.__proto__||Object.getPrototypeOf(pn)).apply(this,arguments))}var mn=(C(yn,Ar),m(yn,[{key:"template",value:function(){return'\n
\n \n
\n
\n '}},{key:"setColorUI",value:function(t){this.renderCanvas(),this.setHueColor(null,t)}},{key:"getDefaultValue",value:function(){return this.$store.hsv.h}},{key:"setHueColor",value:function(t,e){if(this.state.get("$el.width")){var r=this.getRectangle(),n=r.minX,i=r.minY,o=r.radius,a=r.centerX,l=r.centerY,s=this.getCurrentXY(t,this.getDefaultValue(),o,a,l),u=b((h=s.x)-a,(f=s.y)-l),c=this.getCurrentXY(null,u,o-this.half_thinkness,a,l),h=c.x,f=c.y;this.refs.$drag_pointer.css({left:h-n+"px",top:f-i+"px"}),e||this.changeColor({type:"hsv",h:u})}}}]),yn);function yn(t){d(this,yn);var e=x(this,(yn.__proto__||Object.getPrototypeOf(yn)).call(this,t));return e.width=214,e.height=214,e.thinkness=16,e.half_thinkness=e.thinkness/2,e.source="colorring",e}var bn=(C($n,br),m($n,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{colorring:mn,palette:Kr,control:dn,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),$n);function $n(){return d(this,$n),x(this,($n.__proto__||Object.getPrototypeOf($n)).apply(this,arguments))}var kn=(C(Cn,vr),m(Cn,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(){this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),Cn);function Cn(){return d(this,Cn),x(this,(Cn.__proto__||Object.getPrototypeOf(Cn)).apply(this,arguments))}var xn=(C(_n,br),m(_n,[{key:"template",value:function(){return'\n
\n
\n
\n
\n
\n
\n
\n
\n '}},{key:"components",value:function(){return{palette:Kr,control:kn,information:Br,currentColorSets:jr,colorSetsChooser:Ur,contextMenu:Vr}}}]),_n);function _n(){return d(this,_n),x(this,(_n.__proto__||Object.getPrototypeOf(_n)).apply(this,arguments))}var wn=(C(On,vr),m(On,[{key:"components",value:function(){return{Hue:ln,Opacity:un}}},{key:"template",value:function(){return'\n
\n
\n
\n
\n '}},{key:"refresh",value:function(){this.setColorUI()}},{key:"setColorUI",value:function(){this.Hue.setColorUI(),this.Opacity.setColorUI()}},{key:"@changeColor",value:function(t){"mini-control"!=t&&this.refresh()}},{key:"@initColor",value:function(){this.refresh()}}]),On);function On(){return d(this,On),x(this,(On.__proto__||Object.getPrototypeOf(On)).apply(this,arguments))}var Mn=(C(Sn,br),m(Sn,[{key:"template",value:function(){return"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n "}},{key:"components",value:function(){return{palette:Kr,control:wn}}},{key:"initColorWithoutChangeEvent",value:function(t){console.log(t),this.$store.dispatch("/initColor",t),this.refresh()}},{key:"setBackgroundColor",value:function(){var t=this.$store.dispatch("/toColor"),e=this.$store.rgb,r=ze.brightness(e.r,e.g,e.b);this.refs.$colorview.css({"background-color":t,color:127Default Html Sample colorpicker : { mode : 'edit', hideDelay: 0, - type: 'vscode', + type: 'chromedevtool', onHide: function (color) { console.log('hide', color) } diff --git a/package.json b/package.json index 1e41f47..5dc2e72 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codemirror-colorpicker", - "version": "1.9.69", + "version": "1.9.70", "description": "simple colorpicker used anywhere", "main": "./dist/codemirror-colorpicker.js", "scripts": { diff --git a/src/colorpicker/ui/ColorInformation.js b/src/colorpicker/ui/ColorInformation.js index cea606e..aa2645a 100644 --- a/src/colorpicker/ui/ColorInformation.js +++ b/src/colorpicker/ui/ColorInformation.js @@ -74,9 +74,10 @@ export default class ColorInformation extends UIElement { this.$el.addClass(current_format); } - + + nextFormat() { - var current_format = this.format || 'hex'; + var current_format = this.$store.format || 'hex'; var next_format = 'hex'; if (current_format == 'hex') { @@ -88,19 +89,16 @@ export default class ColorInformation extends UIElement { } this.format = next_format; + this.$store.dispatch('/changeFormat', next_format); + this.$store.emit('lastUpdateColor') this.initFormat(); - - this.$store.dispatch('/changeFormat', this.format); - this.$store.emit('lastUpdateColor') - } + } goToFormat(to_format) { this.format = to_format; - if (to_format === 'rgb' || to_format === 'hsl') { - this.initFormat(); - } - this.$store.dispatch('/changeFormat', this.format); + this.$store.emit('lastUpdateColor') + this.initFormat(); } getFormat () { @@ -180,7 +178,7 @@ export default class ColorInformation extends UIElement { } 'click $el .information-item.hex .input-field .title' (e) { - this.goToFormat('hex'); + this.goToFormat('rgb'); } 'click $el .information-item.rgb .input-field .title' (e) { @@ -188,7 +186,7 @@ export default class ColorInformation extends UIElement { } 'click $el .information-item.hsl .input-field .title' (e) { - this.goToFormat('rgb'); + this.goToFormat('hex'); } setRGBInput() { diff --git a/src/scss/component/information.scss b/src/scss/component/information.scss index 7d31722..4c0a784 100644 --- a/src/scss/component/information.scss +++ b/src/scss/component/information.scss @@ -50,12 +50,14 @@ padding: 3px; box-sizing: border-box; position: relative; - + > .title { text-align:center; font-size:12px; color:#a9a9a9; padding-top:2px; + cursor: pointer; + user-select: none; } input { diff --git a/src/scss/index.scss b/src/scss/index.scss index bd15159..b2f2a7a 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -2,4 +2,4 @@ @import './colorview'; @import './colorpicker'; - \ No newline at end of file + \ No newline at end of file