From 0e37b4d9f8b9aaf36d19263b9f8e10aad0628e05 Mon Sep 17 00:00:00 2001 From: claudiaaziz Date: Wed, 25 Oct 2023 12:54:18 -0400 Subject: [PATCH] Fix bg & eraser to adjust to pickr --- assets/menu icons/active-background-color.png | Bin 0 -> 9694 bytes .../menu icons/inactive-background-color.png | Bin 0 -> 9004 bytes ...ot-active-brush.png => inactive-brush.png} | Bin ...-active-eraser.png => inactive-eraser.png} | Bin dist/main.js | 2 +- dist/main.js.map | 2 +- index.html | 6 ++- src/scripts/UndoAndRedoHandler.js | 2 +- src/scripts/colorHandler.js | 40 +++++++++++++++++- src/scripts/drawingHandler.js | 2 +- src/scripts/toolIcon.js | 15 +++++-- 11 files changed, 58 insertions(+), 11 deletions(-) create mode 100644 assets/menu icons/active-background-color.png create mode 100644 assets/menu icons/inactive-background-color.png rename assets/menu icons/{not-active-brush.png => inactive-brush.png} (100%) rename assets/menu icons/{not-active-eraser.png => inactive-eraser.png} (100%) diff --git a/assets/menu icons/active-background-color.png b/assets/menu icons/active-background-color.png new file mode 100644 index 0000000000000000000000000000000000000000..cec80b49a30bd73f32d83d87b9003a68626fa15c GIT binary patch literal 9694 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 literal 0 HcmV?d00001 diff --git a/assets/menu icons/not-active-brush.png b/assets/menu icons/inactive-brush.png similarity index 100% rename from assets/menu icons/not-active-brush.png rename to assets/menu icons/inactive-brush.png diff --git a/assets/menu icons/not-active-eraser.png b/assets/menu icons/inactive-eraser.png similarity index 100% rename from assets/menu icons/not-active-eraser.png rename to assets/menu icons/inactive-eraser.png diff --git a/dist/main.js b/dist/main.js index d94a22a..11b38c6 100644 --- a/dist/main.js +++ b/dist/main.js @@ -1,2 +1,2 @@ -!function(){var t={612:function(t){var e;self,e=()=>(()=>{"use strict";var t={d:(e,n)=>{for(var s in n)t.o(n,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:n[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.d(e,{default:()=>S});var n={};function s(t,e,n,s,o={}){e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(n)||(n=[n]);for(const i of e)for(const e of n)i[t](e,s,{capture:!1,...o});return Array.prototype.slice.call(arguments,1)}t.r(n),t.d(n,{adjustableInputNumbers:()=>h,createElementFromString:()=>r,createFromTemplate:()=>a,eventPath:()=>c,off:()=>i,on:()=>o,resolveElement:()=>l});const o=s.bind(null,"addEventListener"),i=s.bind(null,"removeEventListener");function r(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function a(t){const e=(t,e)=>{const n=t.getAttribute(e);return t.removeAttribute(e),n},n=(t,s={})=>{const o=e(t,":obj"),i=e(t,":ref"),r=o?s[o]={}:s;i&&(s[i]=t);for(const s of Array.from(t.children)){const t=e(s,":arr"),o=n(s,t?{}:r);t&&(r[t]||(r[t]=[])).push(Object.keys(o).length?o:s)}return s};return n(r(t))}function c(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let n=t.target.parentElement;for(e=[t.target,n];n=n.parentElement;)e.push(n);return e.push(document,window),e}function l(t){return t instanceof Element?t:"string"==typeof t?t.split(/>>/g).reduce(((t,e,n,s)=>(t=t.querySelector(e),nt)){function n(n){const s=[.001,.01,.1][Number(n.shiftKey||2*n.ctrlKey)]*(n.deltaY<0?1:-1);let o=0,i=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,((t,n)=>n<=i&&n+t.length>=i?(i=n,e(Number(t),s,o)):(o++,t))),t.focus(),t.setSelectionRange(i,i),n.preventDefault(),t.dispatchEvent(new Event("input"))}o(t,"focus",(()=>o(window,"wheel",n,{passive:!1}))),o(t,"blur",(()=>i(window,"wheel",n)))}const{min:d,max:p,floor:u,round:v}=Math;function m(t,e,n){e/=100,n/=100;const s=u(t=t/360*6),o=t-s,i=n*(1-e),r=n*(1-o*e),a=n*(1-(1-o)*e),c=s%6;return[255*[n,r,i,i,a,n][c],255*[a,n,n,r,i,i][c],255*[i,i,a,n,n,r][c]]}function g(t,e,n){const s=(2-(e/=100))*(n/=100)/2;return 0!==s&&(e=1===s?0:s<.5?e*n/(2*s):e*n/(2-2*s)),[t,100*e,100*s]}function b(t,e,n){const s=d(t/=255,e/=255,n/=255),o=p(t,e,n),i=o-s;let r,a;if(0===i)r=a=0;else{a=i/o;const s=((o-t)/6+i/2)/i,c=((o-e)/6+i/2)/i,l=((o-n)/6+i/2)/i;t===o?r=l-c:e===o?r=1/3+s-l:n===o&&(r=2/3+c-s),r<0?r+=1:r>1&&(r-=1)}return[360*r,100*a,100*o]}function f(t,e,n,s){return e/=100,n/=100,[...b(255*(1-d(1,(t/=100)*(1-(s/=100))+s)),255*(1-d(1,e*(1-s)+s)),255*(1-d(1,n*(1-s)+s)))]}function y(t,e,n){e/=100;const s=2*(e*=(n/=100)<.5?n:1-n)/(n+e)*100,o=100*(n+e);return[t,isNaN(s)?0:s,o]}function w(t){return b(...t.match(/.{2}/g).map((t=>parseInt(t,16))))}function _(t=0,e=0,n=0,s=1){const o=(t,e)=>(n=-1)=>e(~n?t.map((t=>Number(t.toFixed(n)))):t),i={h:t,s:e,v:n,a:s,toHSVA(){const t=[i.h,i.s,i.v,i.a];return t.toString=o(t,(t=>`hsva(${t[0]}, ${t[1]}%, ${t[2]}%, ${i.a})`)),t},toHSLA(){const t=[...g(i.h,i.s,i.v),i.a];return t.toString=o(t,(t=>`hsla(${t[0]}, ${t[1]}%, ${t[2]}%, ${i.a})`)),t},toRGBA(){const t=[...m(i.h,i.s,i.v),i.a];return t.toString=o(t,(t=>`rgba(${t[0]}, ${t[1]}, ${t[2]}, ${i.a})`)),t},toCMYK(){const t=function(t,e,n){const s=m(t,e,n),o=s[0]/255,i=s[1]/255,r=s[2]/255,a=d(1-o,1-i,1-r);return[100*(1===a?0:(1-o-a)/(1-a)),100*(1===a?0:(1-i-a)/(1-a)),100*(1===a?0:(1-r-a)/(1-a)),100*a]}(i.h,i.s,i.v);return t.toString=o(t,(t=>`cmyk(${t[0]}%, ${t[1]}%, ${t[2]}%, ${t[3]}%)`)),t},toHEXA(){const t=function(t,e,n){return m(t,e,n).map((t=>v(t).toString(16).padStart(2,"0")))}(i.h,i.s,i.v),e=i.a>=1?"":Number((255*i.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=()=>`#${t.join("").toUpperCase()}`,t},clone:()=>_(i.h,i.s,i.v,i.a)};return i}const C=t=>Math.max(Math.min(t,1),0);function H(t){const e={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},t),_keyboard(t){const{options:n}=e,{type:s,key:o}=t;if(document.activeElement===n.wrapper){const{lock:n}=e.options,i="ArrowUp"===o,r="ArrowRight"===o,a="ArrowDown"===o,c="ArrowLeft"===o;if("keydown"===s&&(i||r||a||c)){let s=0,o=0;"v"===n?s=i||r?1:-1:"h"===n?s=i||r?-1:1:(o=i?-1:a?1:0,s=c?-1:r?1:0),e.update(C(e.cache.x+.01*s),C(e.cache.y+.01*o)),t.preventDefault()}else o.startsWith("Arrow")&&(e.options.onstop(),t.preventDefault())}},_tapstart(t){o(document,["mouseup","touchend","touchcancel"],e._tapstop),o(document,["mousemove","touchmove"],e._tapmove),t.cancelable&&t.preventDefault(),e._tapmove(t)},_tapmove(t){const{options:n,cache:s}=e,{lock:o,element:i,wrapper:r}=n,a=r.getBoundingClientRect();let c=0,l=0;if(t){const e=t&&t.touches&&t.touches[0];c=t?(e||t).clientX:0,l=t?(e||t).clientY:0,ca.left+a.width&&(c=a.left+a.width),la.top+a.height&&(l=a.top+a.height),c-=a.left,l-=a.top}else s&&(c=s.x*a.width,l=s.y*a.height);"h"!==o&&(i.style.left=`calc(${c/a.width*100}% - ${i.offsetWidth/2}px)`),"v"!==o&&(i.style.top=`calc(${l/a.height*100}% - ${i.offsetHeight/2}px)`),e.cache={x:c/a.width,y:l/a.height};const h=C(c/a.width),d=C(l/a.height);switch(o){case"v":return n.onchange(h);case"h":return n.onchange(d);default:return n.onchange(h,d)}},_tapstop(){e.options.onstop(),i(document,["mouseup","touchend","touchcancel"],e._tapstop),i(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(t=0,n=0){const{left:s,top:o,width:i,height:r}=e.options.wrapper.getBoundingClientRect();"h"===e.options.lock&&(n=t),e._tapmove({clientX:s+i*t,clientY:o+r*n})},destroy(){const{options:t,_tapstart:n,_keyboard:s}=e;i(document,["keydown","keyup"],s),i([t.wrapper,t.element],"mousedown",n),i([t.wrapper,t.element],"touchstart",n,{passive:!1})}},{options:n,_tapstart:s,_keyboard:r}=e;return o([n.wrapper,n.element],"mousedown",s),o([n.wrapper,n.element],"touchstart",s,{passive:!1}),o(document,["keydown","keyup"],r),e}function k(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=o(t.elements,"click",(e=>{t.elements.forEach((n=>n.classList[e.target===n?"add":"remove"](t.className))),t.onchange(e),e.stopPropagation()}));return{destroy:()=>i(...e)}}const A={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8,padding:0};class S{static utils=n;static version="1.9.0";static I18N_DEFAULTS={"ui:dialog":"color picker dialog","btn:toggle":"toggle color picker dialog","btn:swatch":"color swatch","btn:last-color":"use previous color","btn:save":"Save","btn:cancel":"Cancel","btn:clear":"Clear","aria:btn:save":"save and close","aria:btn:cancel":"cancel and close","aria:btn:clear":"clear and close","aria:input":"color input field","aria:palette":"color selection area","aria:hue":"hue selection slider","aria:opacity":"selection slider"};static DEFAULT_OPTIONS={appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"};_initializingActive=!0;_recalc=!0;_nanopop=null;_root=null;_color=_();_lastColor=_();_swatchColors=[];_setupAnimationFrame=null;_eventListener={init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]};constructor(t){this.options=t=Object.assign({...S.DEFAULT_OPTIONS},t);const{swatches:e,components:n,theme:s,sliders:o,lockOpacity:i,padding:r}=t;["nano","monolith"].includes(s)&&!o&&(t.sliders="h"),n.interaction||(n.interaction={});const{preview:a,opacity:c,hue:l,palette:h}=n;n.opacity=!i&&c,n.palette=h||a||c||l,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach((t=>this.addSwatch(t)));const{button:d,app:p}=this._root;this._nanopop=((t,e,n)=>{const s="object"!=typeof t||t instanceof HTMLElement?{reference:t,popper:e,...n}:t;return{update(t=s){const{reference:e,popper:n}=Object.assign(s,t);if(!n||!e)throw new Error("Popper- or reference-element missing.");return((t,e,n)=>{const{container:s,arrow:o,margin:i,padding:r,position:a,variantFlipOrder:c,positionFlipOrder:l}={container:document.documentElement.getBoundingClientRect(),...A,...n},{left:h,top:d}=e.style;e.style.left="0",e.style.top="0";const p=t.getBoundingClientRect(),u=e.getBoundingClientRect(),v={t:p.top-u.height-i,b:p.bottom+i,r:p.right+i,l:p.left-u.width-i},m={vs:p.left,vm:p.left+p.width/2-u.width/2,ve:p.left+p.width-u.width,hs:p.top,hm:p.bottom-p.height/2-u.height/2,he:p.bottom-u.height},[g,b="middle"]=a.split("-"),f=l[g],y=c[b],{top:w,left:_,bottom:C,right:H}=s;for(const t of f){const n="t"===t||"b"===t;let s=v[t];const[i,a]=n?["top","left"]:["left","top"],[c,l]=n?[u.height,u.width]:[u.width,u.height],[h,d]=n?[C,H]:[H,C],[g,b]=n?[w,_]:[_,w];if(!(sh))for(const h of y){let v=m[(n?"v":"h")+h];if(!(vd)){if(v-=u[a],s-=u[i],e.style[a]=`${v}px`,e.style[i]=`${s}px`,o){const t=n?p.width/2:p.height/2,e=2*tnew S(t);_preBuild(){const{options:t}=this;for(const e of["el","container"])t[e]=l(t[e]);this._root=(t=>{const{components:e,useAsButton:n,inline:s,appClass:o,theme:i,lockOpacity:r}=t.options,c=t=>t?"":'style="display:none" hidden',l=e=>t._t(e),h=a(`\n
\n\n ${n?"":''}\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n
\n `),d=h.interaction;return d.options.find((t=>!t.hidden&&!t.classList.add("active"))),d.type=()=>d.options.find((t=>t.classList.contains("active"))),h})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const n=t.el.parentElement;t.el.nextSibling?n.insertBefore(e.app,t.el.nextSibling):n.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,n=(t.options.sliders||"v").repeat(2),[s,o]=n.match(/^[vh]+$/g)?n:[],i=()=>this._color||(this._color=this._lastColor.clone()),r={palette:H({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(n,s){if(!e.palette)return;const o=i(),{_root:r,options:a}=t,{lastColor:c,currentColor:l}=r.preview;t._recalc&&(o.s=100*n,o.v=100-100*s,o.v<0&&(o.v=0),t._updateOutput("slider"));const h=o.toRGBA().toString(0);this.element.style.background=h,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${o.a}), transparent),\n linear-gradient(to left, hsla(${o.h}, 100%, 50%, ${o.a}), rgba(255, 255, 255, ${o.a}))\n `,a.comparison?a.useAsButton||t._lastColor||c.style.setProperty("--pcr-color",h):(r.button.style.setProperty("--pcr-color",h),r.button.classList.remove("clear"));const d=o.toHEXA().toString();for(const{el:e,color:n}of t._swatchColors)e.classList[d===n.toHEXA().toString()?"add":"remove"]("pcr-active");l.style.setProperty("--pcr-color",h)}}),hue:H({lock:"v"===o?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop","slider",t),onchange(n){if(!e.hue||!e.palette)return;const s=i();t._recalc&&(s.h=360*n),this.element.style.backgroundColor=`hsl(${s.h}, 100%, 50%)`,r.palette.trigger()}}),opacity:H({lock:"v"===s?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop","slider",t),onchange(n){if(!e.opacity||!e.palette)return;const s=i();t._recalc&&(s.a=Math.round(100*n)/100),this.element.style.background=`rgba(0, 0, 0, ${s.a})`,r.palette.trigger()}}),selectable:k({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput("swatch")}})};this._components=r}_bindEvents(){const{_root:t,options:e}=this,n=[o(t.interaction.clear,"click",(()=>this._clearColor())),o([t.interaction.cancel,t.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel")})),o(t.interaction.save,"click",(()=>{!this.applyColor()&&!e.showAlways&&this.hide()})),o(t.interaction.result,["keyup","input"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),t.stopImmediatePropagation()})),o(t.interaction.result,["focus","blur"],(t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput(null)})),o([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const s=e.closeWithKey;n.push(o(t.button,"click",(()=>this.isOpen()?this.hide():this.show())),o(document,"keyup",(t=>this.isOpen()&&(t.key===s||t.code===s)&&this.hide())),o(document,["touchstart","mousedown"],(e=>{this.isOpen()&&!c(e).some((e=>e===t.app||e===t.button))&&this.hide()}),{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};h(t.interaction.result,((t,n,s)=>{const o=e[this.getColorRepresentation().toLowerCase()];if(o){const e=o[s],i=t+(e>=100?1e3*n:n);return i<=0?0:Number((i{s.isOpen()&&(e.closeOnScroll&&s.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function e(){s._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)))}),{capture:!0}))}this._eventBindings=n}_rePositioningPicker(){const{options:t}=this;if(!t.inline&&!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top=(window.innerHeight-e.height)/2+"px",t.style.left=(window.innerWidth-e.width)/2+"px"}}_updateOutput(t){const{_root:e,_color:n,options:s}=this;if(e.interaction.type()){const t=`to${e.interaction.type().getAttribute("data-type")}`;e.interaction.result.value="function"==typeof n[t]?n[t]().toString(s.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",n,t,this)}_clearColor(t=!1){const{_root:e,options:n}=this;n.useAsButton||e.button.style.setProperty("--pcr-color","rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),n.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear"))}_parseLocalColor(t){const{values:e,type:n,a:s}=function(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map((t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0));let s;t:for(const o in e)if(s=e[o].exec(t))switch(o){case"cmyk":{const[,t,e,i,r]=n(s);if(t>100||e>100||i>100||r>100)break t;return{values:f(t,e,i,r),type:o}}case"rgba":{let[,t,,e,,i,,,r]=n(s);if(t="%"===s[2]?t/100*255:t,e="%"===s[4]?e/100*255:e,i="%"===s[6]?i/100*255:i,r="%"===s[9]?r/100:r,t>255||e>255||i>255||r<0||r>1)break t;return{values:[...b(t,e,i),r],a:r,type:o}}case"hexa":{let[,t]=s;4!==t.length&&3!==t.length||(t=t.split("").map((t=>t+t)).join(""));const e=t.substring(0,6);let n=t.substring(6);return n=n?parseInt(n,16)/255:void 0,{values:[...w(e),n],a:n,type:o}}case"hsla":{let[,t,e,i,,r]=n(s);if(r="%"===s[6]?r/100:r,t>360||e>100||i>100||r<0||r>1)break t;return{values:[...y(t,e,i),r],a:r,type:o}}case"hsva":{let[,t,e,i,,r]=n(s);if(r="%"===s[6]?r/100:r,t>360||e>100||i>100||r<0||r>1)break t;return{values:[t,e,i,r],a:r,type:o}}}return{values:null,type:null}}(t),{lockOpacity:o}=this.options,i=void 0!==s&&1!==s;return e&&3===e.length&&(e[3]=void 0),{values:!e||o&&i?null:e,type:n}}_t(t){return this.options.i18n[t]||S.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach((t=>t(...e,this)))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t]||[],s=n.indexOf(e);return~s&&n.splice(s,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:n}=this,s=_(...e),i=r(`'}\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n \n `),d=h.interaction;return d.options.find((t=>!t.hidden&&!t.classList.add("active"))),d.type=()=>d.options.find((t=>t.classList.contains("active"))),h})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const n=t.el.parentElement;t.el.nextSibling?n.insertBefore(e.app,t.el.nextSibling):n.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,n=(t.options.sliders||"v").repeat(2),[s,o]=n.match(/^[vh]+$/g)?n:[],r=()=>this._color||(this._color=this._lastColor.clone()),i={palette:H({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(n,s){if(!e.palette)return;const o=r(),{_root:i,options:a}=t,{lastColor:c,currentColor:l}=i.preview;t._recalc&&(o.s=100*n,o.v=100-100*s,o.v<0&&(o.v=0),t._updateOutput("slider"));const h=o.toRGBA().toString(0);this.element.style.background=h,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${o.a}), transparent),\n linear-gradient(to left, hsla(${o.h}, 100%, 50%, ${o.a}), rgba(255, 255, 255, ${o.a}))\n `,a.comparison?a.useAsButton||t._lastColor||c.style.setProperty("--pcr-color",h):(i.button.style.setProperty("--pcr-color",h),i.button.classList.remove("clear"));const d=o.toHEXA().toString();for(const{el:e,color:n}of t._swatchColors)e.classList[d===n.toHEXA().toString()?"add":"remove"]("pcr-active");l.style.setProperty("--pcr-color",h)}}),hue:H({lock:"v"===o?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop","slider",t),onchange(n){if(!e.hue||!e.palette)return;const s=r();t._recalc&&(s.h=360*n),this.element.style.backgroundColor=`hsl(${s.h}, 100%, 50%)`,i.palette.trigger()}}),opacity:H({lock:"v"===s?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop","slider",t),onchange(n){if(!e.opacity||!e.palette)return;const s=r();t._recalc&&(s.a=Math.round(100*n)/100),this.element.style.background=`rgba(0, 0, 0, ${s.a})`,i.palette.trigger()}}),selectable:k({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput("swatch")}})};this._components=i}_bindEvents(){const{_root:t,options:e}=this,n=[o(t.interaction.clear,"click",(()=>this._clearColor())),o([t.interaction.cancel,t.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel")})),o(t.interaction.save,"click",(()=>{!this.applyColor()&&!e.showAlways&&this.hide()})),o(t.interaction.result,["keyup","input"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),t.stopImmediatePropagation()})),o(t.interaction.result,["focus","blur"],(t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput(null)})),o([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const s=e.closeWithKey;n.push(o(t.button,"click",(()=>this.isOpen()?this.hide():this.show())),o(document,"keyup",(t=>this.isOpen()&&(t.key===s||t.code===s)&&this.hide())),o(document,["touchstart","mousedown"],(e=>{this.isOpen()&&!c(e).some((e=>e===t.app||e===t.button))&&this.hide()}),{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};h(t.interaction.result,((t,n,s)=>{const o=e[this.getColorRepresentation().toLowerCase()];if(o){const e=o[s],r=t+(e>=100?1e3*n:n);return r<=0?0:Number((r{s.isOpen()&&(e.closeOnScroll&&s.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function e(){s._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)))}),{capture:!0}))}this._eventBindings=n}_rePositioningPicker(){const{options:t}=this;if(!t.inline&&!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top=(window.innerHeight-e.height)/2+"px",t.style.left=(window.innerWidth-e.width)/2+"px"}}_updateOutput(t){const{_root:e,_color:n,options:s}=this;if(e.interaction.type()){const t=`to${e.interaction.type().getAttribute("data-type")}`;e.interaction.result.value="function"==typeof n[t]?n[t]().toString(s.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",n,t,this)}_clearColor(t=!1){const{_root:e,options:n}=this;n.useAsButton||e.button.style.setProperty("--pcr-color","rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),n.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear"))}_parseLocalColor(t){const{values:e,type:n,a:s}=function(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=t=>t.map((t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0));let s;t:for(const o in e)if(s=e[o].exec(t))switch(o){case"cmyk":{const[,t,e,r,i]=n(s);if(t>100||e>100||r>100||i>100)break t;return{values:f(t,e,r,i),type:o}}case"rgba":{let[,t,,e,,r,,,i]=n(s);if(t="%"===s[2]?t/100*255:t,e="%"===s[4]?e/100*255:e,r="%"===s[6]?r/100*255:r,i="%"===s[9]?i/100:i,t>255||e>255||r>255||i<0||i>1)break t;return{values:[...b(t,e,r),i],a:i,type:o}}case"hexa":{let[,t]=s;4!==t.length&&3!==t.length||(t=t.split("").map((t=>t+t)).join(""));const e=t.substring(0,6);let n=t.substring(6);return n=n?parseInt(n,16)/255:void 0,{values:[...w(e),n],a:n,type:o}}case"hsla":{let[,t,e,r,,i]=n(s);if(i="%"===s[6]?i/100:i,t>360||e>100||r>100||i<0||i>1)break t;return{values:[...y(t,e,r),i],a:i,type:o}}case"hsva":{let[,t,e,r,,i]=n(s);if(i="%"===s[6]?i/100:i,t>360||e>100||r>100||i<0||i>1)break t;return{values:[t,e,r,i],a:i,type:o}}}return{values:null,type:null}}(t),{lockOpacity:o}=this.options,r=void 0!==s&&1!==s;return e&&3===e.length&&(e[3]=void 0),{values:!e||o&&r?null:e,type:n}}_t(t){return this.options.i18n[t]||A.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach((t=>t(...e,this)))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const n=this._eventListener[t]||[],s=n.indexOf(e);return~s&&n.splice(s,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:n}=this,s=_(...e),r=i(`'}\\n\\n
\\n
\\n
\\n \\n
\\n
\\n\\n
\\n
\\n
\\n
\\n\\n
\\n
\\n
\\n
\\n\\n
\\n
\\n
\\n
\\n
\\n\\n
\\n\\n
\\n \\n\\n \\n \\n \\n \\n \\n\\n \\n \\n \\n
\\n
\\n \\n `),u=p.interaction;return u.options.find((t=>!t.hidden&&!t.classList.add(\"active\"))),u.type=()=>u.options.find((t=>t.classList.contains(\"active\"))),p})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition=\"none\",t.useAsButton||(e.preview.lastColor.style.transition=\"none\")),this.hide()}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||\"v\").repeat(2),[n,i]=o.match(/^[vh]+$/g)?o:[],s=()=>this._color||(this._color=this._lastColor.clone()),r={palette:C({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit(\"changestop\",\"slider\",t),onchange(o,n){if(!e.palette)return;const i=s(),{_root:r,options:a}=t,{lastColor:l,currentColor:c}=r.preview;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput(\"slider\"));const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background=`\\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\\n `,a.comparison?a.useAsButton||t._lastColor||l.style.setProperty(\"--pcr-color\",p):(r.button.style.setProperty(\"--pcr-color\",p),r.button.classList.remove(\"clear\"));const u=i.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?\"add\":\"remove\"](\"pcr-active\");c.style.setProperty(\"--pcr-color\",p)}}),hue:C({lock:\"v\"===i?\"h\":\"v\",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit(\"changestop\",\"slider\",t),onchange(o){if(!e.hue||!e.palette)return;const n=s();t._recalc&&(n.h=360*o),this.element.style.backgroundColor=`hsl(${n.h}, 100%, 50%)`,r.palette.trigger()}}),opacity:C({lock:\"v\"===n?\"h\":\"v\",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit(\"changestop\",\"slider\",t),onchange(o){if(!e.opacity||!e.palette)return;const n=s();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background=`rgba(0, 0, 0, ${n.a})`,r.palette.trigger()}}),selectable:k({elements:t._root.interaction.options,className:\"active\",onchange(e){t._representation=e.target.getAttribute(\"data-type\").toUpperCase(),t._recalc&&t._updateOutput(\"swatch\")}})};this._components=r}_bindEvents(){const{_root:t,options:e}=this,o=[i(t.interaction.clear,\"click\",(()=>this._clearColor())),i([t.interaction.cancel,t.preview.lastColor],\"click\",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit(\"cancel\")})),i(t.interaction.save,\"click\",(()=>{!this.applyColor()&&!e.showAlways&&this.hide()})),i(t.interaction.result,[\"keyup\",\"input\"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit(\"change\",this._color,\"input\",this),this._emit(\"changestop\",\"input\",this)),t.stopImmediatePropagation()})),i(t.interaction.result,[\"focus\",\"blur\"],(t=>{this._recalc=\"blur\"===t.type,this._recalc&&this._updateOutput(null)})),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],[\"mousedown\",\"touchstart\"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const n=e.closeWithKey;o.push(i(t.button,\"click\",(()=>this.isOpen()?this.hide():this.show())),i(document,\"keyup\",(t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide())),i(document,[\"touchstart\",\"mousedown\"],(e=>{this.isOpen()&&!l(e).some((e=>e===t.app||e===t.button))&&this.hide()}),{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};p(t.interaction.result,((t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],s=t+(e>=100?1e3*o:o);return s<=0?0:Number((s{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)))}),{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;if(!t.inline){if(!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top=(window.innerHeight-e.height)/2+\"px\",t.style.left=(window.innerWidth-e.width)/2+\"px\"}}}_updateOutput(t){const{_root:e,_color:o,options:n}=this;if(e.interaction.type()){const t=`to${e.interaction.type().getAttribute(\"data-type\")}`;e.interaction.result.value=\"function\"==typeof o[t]?o[t]().toString(n.outputPrecision):\"\"}!this._initializingActive&&this._recalc&&this._emit(\"change\",o,t,this)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||e.button.style.setProperty(\"--pcr-color\",\"rgba(0, 0, 0, 0.15)\"),e.button.classList.add(\"clear\"),o.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit(\"save\",null),this._emit(\"clear\"))}_parseLocalColor(t){const{values:e,type:o,a:n}=w(t),{lockOpacity:i}=this.options,s=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&s?null:e,type:o}}_t(t){return this.options.i18n[t]||E.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach((t=>t(...e,this)))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t]||[],n=o.indexOf(e);return~n&&o.splice(n,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=A(...e),s=r(`'}\\n\\n
\\n
\\n
\\n \\n
\\n
\\n\\n
\\n
\\n
\\n
\\n\\n
\\n
\\n
\\n
\\n\\n
\\n
\\n
\\n
\\n
\\n\\n
\\n\\n
\\n \\n\\n \\n \\n \\n \\n \\n\\n \\n \\n \\n
\\n
\\n \\n `),u=p.interaction;return u.options.find((t=>!t.hidden&&!t.classList.add(\"active\"))),u.type=()=>u.options.find((t=>t.classList.contains(\"active\"))),p})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition=\"none\",t.useAsButton||(e.preview.lastColor.style.transition=\"none\")),this.hide()}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||\"v\").repeat(2),[n,i]=o.match(/^[vh]+$/g)?o:[],s=()=>this._color||(this._color=this._lastColor.clone()),r={palette:C({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit(\"changestop\",\"slider\",t),onchange(o,n){if(!e.palette)return;const i=s(),{_root:r,options:a}=t,{lastColor:l,currentColor:c}=r.preview;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput(\"slider\"));const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background=`\\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\\n `,a.comparison?a.useAsButton||t._lastColor||l.style.setProperty(\"--pcr-color\",p):(r.button.style.setProperty(\"--pcr-color\",p),r.button.classList.remove(\"clear\"));const u=i.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?\"add\":\"remove\"](\"pcr-active\");c.style.setProperty(\"--pcr-color\",p)}}),hue:C({lock:\"v\"===i?\"h\":\"v\",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit(\"changestop\",\"slider\",t),onchange(o){if(!e.hue||!e.palette)return;const n=s();t._recalc&&(n.h=360*o),this.element.style.backgroundColor=`hsl(${n.h}, 100%, 50%)`,r.palette.trigger()}}),opacity:C({lock:\"v\"===n?\"h\":\"v\",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit(\"changestop\",\"slider\",t),onchange(o){if(!e.opacity||!e.palette)return;const n=s();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background=`rgba(0, 0, 0, ${n.a})`,r.palette.trigger()}}),selectable:k({elements:t._root.interaction.options,className:\"active\",onchange(e){t._representation=e.target.getAttribute(\"data-type\").toUpperCase(),t._recalc&&t._updateOutput(\"swatch\")}})};this._components=r}_bindEvents(){const{_root:t,options:e}=this,o=[i(t.interaction.clear,\"click\",(()=>this._clearColor())),i([t.interaction.cancel,t.preview.lastColor],\"click\",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit(\"cancel\")})),i(t.interaction.save,\"click\",(()=>{!this.applyColor()&&!e.showAlways&&this.hide()})),i(t.interaction.result,[\"keyup\",\"input\"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit(\"change\",this._color,\"input\",this),this._emit(\"changestop\",\"input\",this)),t.stopImmediatePropagation()})),i(t.interaction.result,[\"focus\",\"blur\"],(t=>{this._recalc=\"blur\"===t.type,this._recalc&&this._updateOutput(null)})),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],[\"mousedown\",\"touchstart\"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const n=e.closeWithKey;o.push(i(t.button,\"click\",(()=>this.isOpen()?this.hide():this.show())),i(document,\"keyup\",(t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide())),i(document,[\"touchstart\",\"mousedown\"],(e=>{this.isOpen()&&!l(e).some((e=>e===t.app||e===t.button))&&this.hide()}),{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};p(t.interaction.result,((t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],s=t+(e>=100?1e3*o:o);return s<=0?0:Number((s{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function e(){n._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)))}),{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;if(!t.inline){if(!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top=(window.innerHeight-e.height)/2+\"px\",t.style.left=(window.innerWidth-e.width)/2+\"px\"}}}_updateOutput(t){const{_root:e,_color:o,options:n}=this;if(e.interaction.type()){const t=`to${e.interaction.type().getAttribute(\"data-type\")}`;e.interaction.result.value=\"function\"==typeof o[t]?o[t]().toString(n.outputPrecision):\"\"}!this._initializingActive&&this._recalc&&this._emit(\"change\",o,t,this)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||e.button.style.setProperty(\"--pcr-color\",\"rgba(0, 0, 0, 0.15)\"),e.button.classList.add(\"clear\"),o.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit(\"save\",null),this._emit(\"clear\"))}_parseLocalColor(t){const{values:e,type:o,a:n}=w(t),{lockOpacity:i}=this.options,s=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&s?null:e,type:o}}_t(t){return this.options.i18n[t]||E.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach((t=>t(...e,this)))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t]||[],n=o.indexOf(e);return~n&&o.splice(n,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=A(...e),s=r(`
- + + - + diff --git a/src/scripts/UndoAndRedoHandler.js b/src/scripts/UndoAndRedoHandler.js index 565ba4f..59331ef 100644 --- a/src/scripts/UndoAndRedoHandler.js +++ b/src/scripts/UndoAndRedoHandler.js @@ -45,7 +45,7 @@ class UndoAndRedoHandler { this.canvasHandler.ctx.lineTo(point.x, point.y); // set brush styling based on point clr & brush size - if (path.isErase) point.color = this.canvasHandler.colorHandler.bgColorPicker.value; + if (path.isErase) point.color = this.canvasHandler.colorHandler.bgColor; this.canvasHandler.brushHandler.setBrushStyling(point.color, point.brushSize); this.canvasHandler.ctx.stroke(); diff --git a/src/scripts/colorHandler.js b/src/scripts/colorHandler.js index 93ca7d2..f6e16bd 100644 --- a/src/scripts/colorHandler.js +++ b/src/scripts/colorHandler.js @@ -7,7 +7,7 @@ class ColorHandler { this.setupColorHandling(); } - setupColorPicker () { + setupColorPicker() { this.brushColorPicker = Pickr.create({ el: "#color-picker", theme: "classic", @@ -23,11 +23,47 @@ class ColorHandler { setupColorHandling() { this.currentColor = "black"; + this.bgColor = "#FFFFFF"; // color change event for brush color this.brushColorPicker.on("change", (color) => { - this.currentColor = color.toHEXA().toString() + const selectedMode = this.getSelectedMode(); + if (selectedMode === "background-color-pickr") { + this.bgColor = color.toHEXA().toString(); + this.bgColorChange() + } else if (selectedMode === "brush") { + this.currentColor = color.toHEXA().toString(); + this.canvasHandler.brushHandler.setBrushStyling( + color.toHEXA().toString() + ); + } else if (selectedMode === "eraser") { + this.currentColor = color.toHEXA().toString(); + this.canvasHandler.brushHandler.setBrushStyling( + color.toHEXA().toString() + ); + } }); } + + bgColorChange() { + const drawnPaths = this.canvasHandler.undoAndRedoHandler.drawnPaths; + const redoStack = this.canvasHandler.undoAndRedoHandler.redoStack; + this.canvasHandler.eraseAndClearHandler.clear(); + this.canvasHandler.undoAndRedoHandler.drawnPaths = drawnPaths; + this.canvasHandler.undoAndRedoHandler.redoStack = redoStack; + drawnPaths.forEach((path) => + this.canvasHandler.undoAndRedoHandler.redrawPath(path) + ); + this.canvasHandler.canvas.style.backgroundColor = this.bgColor; + } + + getSelectedMode() { + const radioButtons = document.getElementsByName("tool"); + for (const radioButton of radioButtons) { + if (radioButton.checked) { + return radioButton.id; + } + } + } } export default ColorHandler; diff --git a/src/scripts/drawingHandler.js b/src/scripts/drawingHandler.js index b36a1c6..84af089 100644 --- a/src/scripts/drawingHandler.js +++ b/src/scripts/drawingHandler.js @@ -53,7 +53,7 @@ class DrawingHandler { // Set brush styling based on whether eraser or brush is checked const color = this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked - ? this.canvasHandler.colorHandler.bgColorPicker.value + ? this.canvasHandler.colorHandler.bgColor : this.canvasHandler.colorHandler.currentColor; this.canvasHandler.brushHandler.setBrushStyling( diff --git a/src/scripts/toolIcon.js b/src/scripts/toolIcon.js index e9714ac..ea98dfb 100644 --- a/src/scripts/toolIcon.js +++ b/src/scripts/toolIcon.js @@ -2,8 +2,12 @@ class ToolIcon { constructor() { this.brushRadio = document.getElementById("brush"); this.eraserRadio = document.getElementById("eraser"); + this.bgColorRadio = document.getElementById("background-color-pickr"); this.brushLabel = document.querySelector('label[for="brush"]'); this.eraserLabel = document.querySelector('label[for="eraser"]'); + this.bgColorLabel = document.querySelector( + 'label[for="background-color-pickr"]' + ); this.detectChange(); this.updateIcon(); } @@ -12,17 +16,22 @@ class ToolIcon { // update brush icon based on whether the brush is checked this.brushLabel.querySelector("img").src = this.brushRadio.checked ? "assets/tab-icon.png" - : "assets/menu icons/not-active-brush.png"; + : "assets/menu icons/inactive-brush.png"; // update eraser icon based on whether the eraser is checked this.eraserLabel.querySelector("img").src = this.eraserRadio.checked ? "assets/menu icons/active-eraser.png" - : "assets/menu icons/not-active-eraser.png"; + : "assets/menu icons/inactive-eraser.png"; + + // update bg color icon based on whether the bg color is checked + this.bgColorLabel.querySelector("img").src = this.bgColorRadio.checked + ? "assets/menu icons/active-background-color.png" + : "assets/menu icons/inactive-background-color.png"; } detectChange() { // update icon clr when tool is changed - [this.brushRadio, this.eraserRadio].forEach((radio) => { + [this.brushRadio, this.eraserRadio, this.bgColorRadio].forEach((radio) => { radio.addEventListener("change", () => this.updateIcon()); }); }