From 01bb21d859b70d6c4784956b9ffd7f32d088afa6 Mon Sep 17 00:00:00 2001 From: pandrr Date: Fri, 12 Jul 2024 10:46:59 +0200 Subject: [PATCH] a --- dist/colorrick.js | 2 +- index.js | 4 ---- package-lock.json | 7 ++++--- package.json | 7 ++++--- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/dist/colorrick.js b/dist/colorrick.js index 243d2ba..c214157 100644 --- a/dist/colorrick.js +++ b/dist/colorrick.js @@ -25,7 +25,7 @@ return /******/ (() => { // webpackBootstrap \******************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { -eval("\n// window.chroma = require(\"chroma-js\");\nconst chroma = __webpack_require__(/*! chroma-js */ \"./node_modules/chroma-js/chroma.js\");\n// import chroma from \"chroma-js\";\n\n\nclass ColorRick\n{\n constructor(options)\n {\n this._elements=[];\n\n this.options=options;\n\n\n\n this._opacity=options.opacity;\n\n this._areaWidth=256;\n this._areaHeight=150;\n\n this._elContainer = document.createElement(\"div\");\n this._elContainer.classList.add(\"colorRick_dialog\");\n document.body.appendChild(this._elContainer);\n this._elements.push(this._elContainer);\n\n if(!options.showOpacity) \n {\n this._elContainer.style.setProperty('--width-opacity', \"0px\");\n this._elContainer.style.setProperty('--pad-opacity', \"0px\");\n }\n\n\n\n this._elContainer.style.setProperty('--width', this._areaWidth + \"px\");\n this._elContainer.style.setProperty('--height', this._areaHeight + \"px\");\n\n\n this._elArea = document.createElement(\"div\");\n this._elArea.classList.add(\"colorRick_area\");\n this._elContainer.appendChild(this._elArea);\n this._elements.push(this._elArea);\n\n this._elAreaCursor = document.createElement(\"div\");\n this._elAreaCursor.classList.add(\"colorRick_cursor\");\n this._elArea.appendChild(this._elAreaCursor);\n this._elements.push(this._elAreaCursor);\n\n this._elBrightness = document.createElement(\"div\");\n this._elBrightness.classList.add(\"colorRick_brightness\");\n this._elArea.appendChild(this._elBrightness);\n this._elements.push(this._elBrightness);\n\n // hue slider\n\n this._elHue = document.createElement(\"div\");\n this._elHue.classList.add(\"colorRick_hue\");\n this._elContainer.appendChild(this._elHue);\n this._elements.push(this._elHue);\n\n this._elHueCursor = document.createElement(\"div\");\n this._elHueCursor.classList.add(\"colorRick_cursor_hue\");\n this._elHue.appendChild(this._elHueCursor);\n this._elements.push(this._elHueCursor);\n\n // opacity slider\n\n if(options.showOpacity) \n {\n this._elOpacity = document.createElement(\"div\");\n this._elOpacity.classList.add(\"colorRick_opacity\");\n this._elContainer.appendChild(this._elOpacity);\n this._elements.push(this._elOpacity);\n\n this._elOpacityCursor = document.createElement(\"div\");\n this._elOpacityCursor.classList.add(\"colorRick_cursor_opacity\");\n this._elOpacity.appendChild(this._elOpacityCursor);\n this._elements.push(this._elOpacityCursor);\n }\n\n\n this._elColorBox = document.createElement(\"div\");\n this._elColorBox.classList.add(\"colorRick_preview\");\n this._elContainer.appendChild(this._elColorBox);\n this._elements.push(this._elColorBox);\n\n this._elColorBoxOrig = document.createElement(\"div\");\n this._elColorBoxOrig.classList.add(\"colorRick_preview\");\n this._elColorBoxOrig.classList.add(\"colorRick_preview_orig\");\n this._elContainer.appendChild(this._elColorBoxOrig);\n this._elements.push(this._elColorBoxOrig);\n\n this._elInputContainer = document.createElement(\"div\");\n this._elInputContainer.classList.add(\"colorRick_inputcontainer\");\n this._elContainer.appendChild(this._elInputContainer);\n this._elements.push(this._elInputContainer);\n\n let inputs=\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"
\"+\n \"HEX\"+\n \"\"+\n \"\"+\n \"
Opacity:
\"+\n \"
\"+\n \"RGB\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"
\"+\n \"HSV\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"
\";\n\n\n this._elInputContainer.innerHTML=inputs;\n\n this._inputHex=document.getElementById(\"colorRick_input_hex\");\n\n this._inputOpacity=document.getElementById(\"colorRick_input_opacity\");\n \n if(!options.showOpacity) \n {\n this._inputOpacity1=document.getElementById(\"colorrick_opacity_title\");\n this._inputOpacity1.style.opacity=0.0;\n this._inputOpacity.style.opacity=0.0;\n }\n\n this._inputR=document.getElementById(\"colorRick_input_r\");\n this._inputG=document.getElementById(\"colorRick_input_g\");\n this._inputB=document.getElementById(\"colorRick_input_b\");\n\n this._inputH=document.getElementById(\"colorRick_input_h\");\n this._inputS=document.getElementById(\"colorRick_input_s\");\n this._inputV=document.getElementById(\"colorRick_input_v\");\n\n this._elements.push(this._inputHex);\n this._elements.push(this._inputR,this._inputG,this._inputB);\n this._elements.push(this._inputH,this._inputS,this._inputV);\n \n\n this._color=chroma(\"white\");\n\n\n if(this.options.color)\n {\n this.setColor(this.options.color);\n\n }\n\n this._elColorBoxOrig.style.backgroundColor=this._color.hex();\n\n\n this.updateColorField();\n\n\n\n this._inputR.addEventListener(\"input\",(e)=>\n {\n this._setColorFromRgbInputs();\n });\n\n this._inputG.addEventListener(\"input\",(e)=>\n {\n this._setColorFromRgbInputs();\n });\n\n this._inputB.addEventListener(\"input\",(e)=>\n {\n this._setColorFromRgbInputs();\n });\n\n\n this._inputH.addEventListener(\"input\",(e)=>\n {\n this._setColorFromHsvInputs();\n });\n\n this._inputS.addEventListener(\"input\",(e)=>\n {\n this._setColorFromHsvInputs();\n });\n\n this._inputV.addEventListener(\"input\",(e)=>\n {\n this._setColorFromHsvInputs();\n });\n\n\n\n\n this._inputHex.addEventListener(\"input\",(e)=>\n {\n if(this.validateHexInput()) this.setColor(this.validateHexInput())\n });\n\n this._inputHex.addEventListener(\"blur\",(e)=>\n {\n if(!this.validateHexInput()) \n {\n this._inputHex.classList.remove(\"colorRick_invalid\");\n this._inputHex.value=this._color.hex();\n }\n\n });\n\n this._inputOpacity.addEventListener(\"input\",(e)=>\n {\n const f=parseFloat(this._inputOpacity.value);\n\n if(f===f)\n {\n this._opacity=parseFloat(this._inputOpacity.value);\n console.log(this._opacity)\n this.updateColorField();\n }\n });\n\n\n\n this._elHue.addEventListener(\"pointerdown\",this._onHueMouse.bind(this));\n this._elHue.addEventListener(\"pointermove\",this._onHueMouse.bind(this));\n\n \n if(this._elOpacity) this._elOpacity.addEventListener(\"pointerdown\",this._onOpacityMouse.bind(this));\n if(this._elOpacity) this._elOpacity.addEventListener(\"pointermove\",this._onOpacityMouse.bind(this));\n\n if(this._elOpacity) this._elOpacity.addEventListener(\"wheel\",(e)=>\n {\n let speed=0.003;\n if(e.altKey)speed/=3;\n if(e.deltaY>0)this._opacity-=speed;\n else this._opacity+=speed;\n \n this.updateColorField();\n \n e.preventDefault();\n },{\"passive\":false});\n\n \n this._elHue.addEventListener(\"wheel\",(e)=>\n {\n let speed=0.5;\n if(e.altKey)speed/=3;\n this._hue=parseFloat(this._hue);\n\n if(e.deltaY>0)this._hue-=speed;\n else this._hue+=speed;\n this._inputH.value=this._hue;\n\n this._setColorFromHsvInputs();\n \n e.preventDefault();\n },{\"passive\":false});\n\n\n if(this.options.ele)\n {\n const r=this.options.ele.getBoundingClientRect();\n\n const padding=30;\n const containerSize=this._elContainer.getBoundingClientRect();\n const leftAligned=(r.x+padding)>window.innerWidth-containerSize.width;\n\n if(!leftAligned) this._elContainer.style.left=(r.x+padding)+\"px\";\n else this._elContainer.style.left=(r.x-containerSize.width)+\"px\";\n \n if(r.y+containerSize.height>window.innerHeight) this._elContainer.style.top=(window.innerHeight-containerSize.height-10)+\"px\";\n else this._elContainer.style.top=(r.y)+\"px\";\n }\n\n this._elHue.addEventListener(\"pointerdown\",(e)=> { this._elHue.setPointerCapture(e.pointerId); if(this.options.onStart)this.options.onStart();});\n this._elHue.addEventListener(\"pointerup\",(e)=> { this._elHue.releasePointerCapture(e.pointerId); if(this.options.onEnd)this.options.onEnd();});\n\n this._elArea.addEventListener(\"pointerdown\",(e)=> { this._elArea.setPointerCapture(e.pointerId); if(this.options.onStart)this.options.onStart();});\n this._elArea.addEventListener(\"pointerup\",(e)=> { this._elArea.releasePointerCapture(e.pointerId); if(this.options.onEnd)this.options.onEnd();});\n\n\n this._elArea.addEventListener(\"pointerdown\",this._onAreaMouse.bind(this));\n this._elArea.addEventListener(\"pointermove\",this._onAreaMouse.bind(this));\n this._elArea.addEventListener(\"wheel\",(e)=>\n {\n let speed=0.008;\n if(e.altKey)speed/=3;\n \n if(e.deltaY>0)this._hueV-=speed;\n else this._hueV+=speed;\n\n this._inputV.value=this._hueV;\n\n this.updateColorField();\n e.preventDefault();\n },{\"passive\":false});\n\n this._elArea.addEventListener(\"pointerdown\",(e)=> { this._elArea.setPointerCapture(e.pointerId); });\n this._elArea.addEventListener(\"pointerup\",(e)=> { this._elArea.releasePointerCapture(e.pointerId); });\n\n document.addEventListener(\"pointerdown\",this._clickOutside.bind(this));\n\n this._elColorBoxOrig.addEventListener(\"click\",()=>{\n this.setColor(this._elColorBoxOrig.style.backgroundColor);\n });\n }\n\n _clickOutside(e)\n {\n if(this._elContainer.contains(e.target)) return true;\n\n this.close();\n }\n\n validateHexInput()\n {\n let v=this._inputHex.value;\n if(v.indexOf(\"#\")==-1) v=\"#\"+v;\n const valid=v.length==7;\n\n if(valid) \n {\n this._inputHex.classList.remove(\"colorRick_invalid\");\n return v;\n }\n else this._inputHex.classList.add(\"colorRick_invalid\");\n }\n\n setHsvInputs(h,s,v)\n {\n if(parseFloat(h)!=parseFloat(h)) h=0; // when grey\n this._inputH.value=parseFloat(h)||0;\n this._inputS.value=parseFloat(s)||0;\n this._inputV.value=parseFloat(v)||0;\n }\n\n _setColorFromHsvInputs()\n {\n this._hue=parseFloat(this._inputH.value)||0;\n this._hueS=parseFloat(this._inputS.value);\n this._hueV=parseFloat(this._inputV.value);\n\n this.updateColorField();\n }\n\n _setColorFromRgbInputs()\n {\n this.setColor([parseInt(this._inputR.value),parseInt(this._inputG.value),parseInt(this._inputB.value)]);\n }\n\n setColor(c)\n {\n this._color=chroma(c);\n this._hue=this._color.hsv()[0];\n this._hueS=this._color.hsv()[1];\n this._hueV=this._color.hsv()[2];\n\n this.setHsvInputs(this._color.hsv()[0], this._inputS.value=this._color.hsv()[1], this._inputV.value=this._color.hsv()[2]);\n\n this.updateColorField();\n }\n\n updateCursors()\n {\n if(this._color.luminance()>0.55)this._elAreaCursor.style.backgroundColor=\"black\";\n else this._elAreaCursor.style.backgroundColor=\"white\";\n\n if(this._elOpacityCursor)this._elOpacityCursor.style.top=(this._areaHeight-(this._opacity*this._areaHeight))+\"px\";\n this._elHueCursor.style.top=(this._areaHeight-(this._hue/360*this._areaHeight))+\"px\";\n this._elAreaCursor.style.marginLeft=(this._color.hsv()[1]*this._areaWidth-3)+\"px\";\n this._elAreaCursor.style.marginTop=(this._areaHeight-(this._color.hsv()[2]*this._areaHeight)-3)+\"px\";\n }\n\n validateHSV()\n {\n\n }\n\n updateColorField()\n {\n if(this._hue!=this._hue)this._hue=0;\n if(this._hue<0)this._hue=0;\n if(this._hue>360)this._hue=360;\n\n if(this._hueV!=this._hueV)this._hueV=0.0001;\n if(this._hueV<0)this._hueV=0.0001;\n if(this._hueV>1)this._hueV=1;\n\n if(this._hueS!=this._hueS)this._hueS=0.0001;\n if(this._hueS<0)this._hueS=0.0001;\n if(this._hueS>1)this._hueS=1;\n\n this._color=chroma(this._hue%360, this._hueS, this._hueV, 'hsv');\n\n if(this.options.onChange && (this._currentHex!=this._color.hex() || this._currentOpacity!=this._opacity))this.options.onChange(this._color,this._opacity);\n this._currentHex=this._color.hex();\n this._currentOpacity=this._opacity;\n\n const rgb_bgcol=chroma(this._hue%360, 1,1, 'hsv').rgb();\n this._elArea.style.background=\"linear-gradient(to right, rgb(255, 255, 255), rgb(\"+rgb_bgcol[0]+\", \"+rgb_bgcol[1]+\", \"+rgb_bgcol[2]+\"))\"\n\n\n \n \n if(this._elOpacity)\n {\n this._elColorBox.style.background=\"linear-gradient(to right,rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",1) 50%,rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",\"+this._opacity+\") 51%)\";\n this._elOpacity.style.background=\"linear-gradient(rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",1),rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",0))\"\n }\n else\n {\n this._elColorBox.style.backgroundColor=this._color.hex();\n }\n\n\n if(this._inputOpacity.value!=this._opacity) this._inputOpacity.value=Math.round(this._opacity*10000)/10000;\n this._inputHex.value=this._color.hex();\n\n this._inputR.value=this._color.rgb()[0];\n this._inputG.value=this._color.rgb()[1];\n this._inputB.value=this._color.rgb()[2];\n\n this.updateCursors();\n }\n\n close()\n {\n document.removeEventListener(\"pointerdown\",this._clickOutside.bind(this));\n\n for(let i=0;i\"+\n \"\"+\n \"\"+\n \"HEX\"+\n \"\"+\n \"\"+\n \"\"+\n \"
Opacity:
\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"RGB\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"HSV\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\"+\n \"\";\n\n\n this._elInputContainer.innerHTML=inputs;\n\n this._inputHex=document.getElementById(\"colorRick_input_hex\");\n\n this._inputOpacity=document.getElementById(\"colorRick_input_opacity\");\n \n if(!options.showOpacity) \n {\n this._inputOpacity1=document.getElementById(\"colorrick_opacity_title\");\n this._inputOpacity1.style.opacity=0.0;\n this._inputOpacity.style.opacity=0.0;\n }\n\n this._inputR=document.getElementById(\"colorRick_input_r\");\n this._inputG=document.getElementById(\"colorRick_input_g\");\n this._inputB=document.getElementById(\"colorRick_input_b\");\n\n this._inputH=document.getElementById(\"colorRick_input_h\");\n this._inputS=document.getElementById(\"colorRick_input_s\");\n this._inputV=document.getElementById(\"colorRick_input_v\");\n\n this._elements.push(this._inputHex);\n this._elements.push(this._inputR,this._inputG,this._inputB);\n this._elements.push(this._inputH,this._inputS,this._inputV);\n \n\n this._color=chroma(\"white\");\n\n\n if(this.options.color)\n {\n this.setColor(this.options.color);\n\n }\n\n this._elColorBoxOrig.style.backgroundColor=this._color.hex();\n\n\n this.updateColorField();\n\n\n\n this._inputR.addEventListener(\"input\",(e)=>\n {\n this._setColorFromRgbInputs();\n });\n\n this._inputG.addEventListener(\"input\",(e)=>\n {\n this._setColorFromRgbInputs();\n });\n\n this._inputB.addEventListener(\"input\",(e)=>\n {\n this._setColorFromRgbInputs();\n });\n\n\n this._inputH.addEventListener(\"input\",(e)=>\n {\n this._setColorFromHsvInputs();\n });\n\n this._inputS.addEventListener(\"input\",(e)=>\n {\n this._setColorFromHsvInputs();\n });\n\n this._inputV.addEventListener(\"input\",(e)=>\n {\n this._setColorFromHsvInputs();\n });\n\n\n\n\n this._inputHex.addEventListener(\"input\",(e)=>\n {\n if(this.validateHexInput()) this.setColor(this.validateHexInput())\n });\n\n this._inputHex.addEventListener(\"blur\",(e)=>\n {\n if(!this.validateHexInput()) \n {\n this._inputHex.classList.remove(\"colorRick_invalid\");\n this._inputHex.value=this._color.hex();\n }\n\n });\n\n this._inputOpacity.addEventListener(\"input\",(e)=>\n {\n const f=parseFloat(this._inputOpacity.value);\n\n if(f===f)\n {\n this._opacity=parseFloat(this._inputOpacity.value);\n console.log(this._opacity)\n this.updateColorField();\n }\n });\n\n\n\n this._elHue.addEventListener(\"pointerdown\",this._onHueMouse.bind(this));\n this._elHue.addEventListener(\"pointermove\",this._onHueMouse.bind(this));\n\n \n if(this._elOpacity) this._elOpacity.addEventListener(\"pointerdown\",this._onOpacityMouse.bind(this));\n if(this._elOpacity) this._elOpacity.addEventListener(\"pointermove\",this._onOpacityMouse.bind(this));\n\n if(this._elOpacity) this._elOpacity.addEventListener(\"wheel\",(e)=>\n {\n let speed=0.003;\n if(e.altKey)speed/=3;\n if(e.deltaY>0)this._opacity-=speed;\n else this._opacity+=speed;\n \n this.updateColorField();\n \n e.preventDefault();\n },{\"passive\":false});\n\n \n this._elHue.addEventListener(\"wheel\",(e)=>\n {\n let speed=0.5;\n if(e.altKey)speed/=3;\n this._hue=parseFloat(this._hue);\n\n if(e.deltaY>0)this._hue-=speed;\n else this._hue+=speed;\n this._inputH.value=this._hue;\n\n this._setColorFromHsvInputs();\n \n e.preventDefault();\n },{\"passive\":false});\n\n\n if(this.options.ele)\n {\n const r=this.options.ele.getBoundingClientRect();\n\n const padding=30;\n const containerSize=this._elContainer.getBoundingClientRect();\n const leftAligned=(r.x+padding)>window.innerWidth-containerSize.width;\n\n if(!leftAligned) this._elContainer.style.left=(r.x+padding)+\"px\";\n else this._elContainer.style.left=(r.x-containerSize.width)+\"px\";\n \n if(r.y+containerSize.height>window.innerHeight) this._elContainer.style.top=(window.innerHeight-containerSize.height-10)+\"px\";\n else this._elContainer.style.top=(r.y)+\"px\";\n }\n\n this._elHue.addEventListener(\"pointerdown\",(e)=> { this._elHue.setPointerCapture(e.pointerId); if(this.options.onStart)this.options.onStart();});\n this._elHue.addEventListener(\"pointerup\",(e)=> { this._elHue.releasePointerCapture(e.pointerId); if(this.options.onEnd)this.options.onEnd();});\n\n this._elArea.addEventListener(\"pointerdown\",(e)=> { this._elArea.setPointerCapture(e.pointerId); if(this.options.onStart)this.options.onStart();});\n this._elArea.addEventListener(\"pointerup\",(e)=> { this._elArea.releasePointerCapture(e.pointerId); if(this.options.onEnd)this.options.onEnd();});\n\n\n this._elArea.addEventListener(\"pointerdown\",this._onAreaMouse.bind(this));\n this._elArea.addEventListener(\"pointermove\",this._onAreaMouse.bind(this));\n this._elArea.addEventListener(\"wheel\",(e)=>\n {\n let speed=0.008;\n if(e.altKey)speed/=3;\n \n if(e.deltaY>0)this._hueV-=speed;\n else this._hueV+=speed;\n\n this._inputV.value=this._hueV;\n\n this.updateColorField();\n e.preventDefault();\n },{\"passive\":false});\n\n this._elArea.addEventListener(\"pointerdown\",(e)=> { this._elArea.setPointerCapture(e.pointerId); });\n this._elArea.addEventListener(\"pointerup\",(e)=> { this._elArea.releasePointerCapture(e.pointerId); });\n\n document.addEventListener(\"pointerdown\",this._clickOutside.bind(this));\n\n this._elColorBoxOrig.addEventListener(\"click\",()=>{\n this.setColor(this._elColorBoxOrig.style.backgroundColor);\n });\n }\n\n _clickOutside(e)\n {\n if(this._elContainer.contains(e.target)) return true;\n\n this.close();\n }\n\n validateHexInput()\n {\n let v=this._inputHex.value;\n if(v.indexOf(\"#\")==-1) v=\"#\"+v;\n const valid=v.length==7;\n\n if(valid) \n {\n this._inputHex.classList.remove(\"colorRick_invalid\");\n return v;\n }\n else this._inputHex.classList.add(\"colorRick_invalid\");\n }\n\n setHsvInputs(h,s,v)\n {\n if(parseFloat(h)!=parseFloat(h)) h=0; // when grey\n this._inputH.value=parseFloat(h)||0;\n this._inputS.value=parseFloat(s)||0;\n this._inputV.value=parseFloat(v)||0;\n }\n\n _setColorFromHsvInputs()\n {\n this._hue=parseFloat(this._inputH.value)||0;\n this._hueS=parseFloat(this._inputS.value);\n this._hueV=parseFloat(this._inputV.value);\n\n this.updateColorField();\n }\n\n _setColorFromRgbInputs()\n {\n this.setColor([parseInt(this._inputR.value),parseInt(this._inputG.value),parseInt(this._inputB.value)]);\n }\n\n setColor(c)\n {\n this._color=chroma(c);\n this._hue=this._color.hsv()[0];\n this._hueS=this._color.hsv()[1];\n this._hueV=this._color.hsv()[2];\n\n this.setHsvInputs(this._color.hsv()[0], this._inputS.value=this._color.hsv()[1], this._inputV.value=this._color.hsv()[2]);\n\n this.updateColorField();\n }\n\n updateCursors()\n {\n if(this._color.luminance()>0.55)this._elAreaCursor.style.backgroundColor=\"black\";\n else this._elAreaCursor.style.backgroundColor=\"white\";\n\n if(this._elOpacityCursor)this._elOpacityCursor.style.top=(this._areaHeight-(this._opacity*this._areaHeight))+\"px\";\n this._elHueCursor.style.top=(this._areaHeight-(this._hue/360*this._areaHeight))+\"px\";\n this._elAreaCursor.style.marginLeft=(this._color.hsv()[1]*this._areaWidth-3)+\"px\";\n this._elAreaCursor.style.marginTop=(this._areaHeight-(this._color.hsv()[2]*this._areaHeight)-3)+\"px\";\n }\n\n validateHSV()\n {\n\n }\n\n updateColorField()\n {\n if(this._hue!=this._hue)this._hue=0;\n if(this._hue<0)this._hue=0;\n if(this._hue>360)this._hue=360;\n\n if(this._hueV!=this._hueV)this._hueV=0.0001;\n if(this._hueV<0)this._hueV=0.0001;\n if(this._hueV>1)this._hueV=1;\n\n if(this._hueS!=this._hueS)this._hueS=0.0001;\n if(this._hueS<0)this._hueS=0.0001;\n if(this._hueS>1)this._hueS=1;\n\n this._color=chroma(this._hue%360, this._hueS, this._hueV, 'hsv');\n\n if(this.options.onChange && (this._currentHex!=this._color.hex() || this._currentOpacity!=this._opacity))this.options.onChange(this._color,this._opacity);\n this._currentHex=this._color.hex();\n this._currentOpacity=this._opacity;\n\n const rgb_bgcol=chroma(this._hue%360, 1,1, 'hsv').rgb();\n this._elArea.style.background=\"linear-gradient(to right, rgb(255, 255, 255), rgb(\"+rgb_bgcol[0]+\", \"+rgb_bgcol[1]+\", \"+rgb_bgcol[2]+\"))\"\n\n\n \n \n if(this._elOpacity)\n {\n this._elColorBox.style.background=\"linear-gradient(to right,rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",1) 50%,rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",\"+this._opacity+\") 51%)\";\n this._elOpacity.style.background=\"linear-gradient(rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",1),rgba(\"+this._color.rgb()[0]+\",\"+this._color.rgb()[1]+\",\"+this._color.rgb()[2]+\",0))\"\n }\n else\n {\n this._elColorBox.style.backgroundColor=this._color.hex();\n }\n\n\n if(this._inputOpacity.value!=this._opacity) this._inputOpacity.value=Math.round(this._opacity*10000)/10000;\n this._inputHex.value=this._color.hex();\n\n this._inputR.value=this._color.rgb()[0];\n this._inputG.value=this._color.rgb()[1];\n this._inputB.value=this._color.rgb()[2];\n\n this.updateCursors();\n }\n\n close()\n {\n document.removeEventListener(\"pointerdown\",this._clickOutside.bind(this));\n\n for(let i=0;i