diff --git a/wled00/data/index.css b/wled00/data/index.css index cb5aac3d1..45a979309 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -459,29 +459,19 @@ img { .sliderdisplay { content:''; position: absolute; - top: 13px; bottom: 13px; - left: 10px; right: 10px; + top: 12.5px; bottom: 12.5px; + left: 13px; right: 13px; background: var(--c-4); border-radius: 17px; pointer-events: none; z-index: -1; + --bg: var(--c-f); } -#rwrap .sliderdisplay, -#gwrap .sliderdisplay, -#bwrap .sliderdisplay, -#wwrap .sliderdisplay, -#wbal .sliderdisplay { - height: 28px; - top: 0; bottom: 0; - left: 0; right: 0; - /*border: 1px solid var(--c-b);*/ -} -#rwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #f00); } -#gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); } -#bwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #00f); } -#wwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #fff); } -#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #d4e0ff); } +#rwrap .sliderdisplay { --bg: #f00; } +#gwrap .sliderdisplay { --bg: #0f0; } +#bwrap .sliderdisplay { --bg: #00f; } +#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); } .sliderbubble { width: 36px; @@ -508,14 +498,7 @@ input[type=range] { background-color: transparent; cursor: pointer; } -#rwrap input[type=range], -#gwrap input[type=range], -#bwrap input[type=range], -#wwrap input[type=range], -#wbal input[type=range] { - width: 252px; - margin: 0; -} + input[type=range]:focus { outline: none; } @@ -551,24 +534,7 @@ input[type=range]:active + .sliderbubble { display: inline; transform: translateX(-50%); } -#rwrap input[type=range]::-webkit-slider-thumb, -#gwrap input[type=range]::-webkit-slider-thumb, -#bwrap input[type=range]::-webkit-slider-thumb, -#wwrap input[type=range]::-webkit-slider-thumb, -#wbal input[type=range]::-webkit-slider-thumb { - height: 18px; - width: 18px; - border: 2px solid #000; - margin-top: 5px; -} -#rwrap input[type=range]::-moz-range-thumb, -#gwrap input[type=range]::-moz-range-thumb, -#bwrap input[type=range]::-moz-range-thumb, -#wwrap input[type=range]::-moz-range-thumb, -#wbal input[type=range]::-moz-range-thumb { - border: 2px solid var(--c-1); -} -#wwrap, #wbal { +#wwrap { display: none; } @@ -577,14 +543,6 @@ input[type=range]:active + .sliderbubble { width: 240px; position: relative; } -#rwrap .sliderwrap, -#gwrap .sliderwrap, -#bwrap .sliderwrap, -#wwrap .sliderwrap, -#wbal .sliderwrap { - width: 260px; - margin: 10px 0 0; -} .sbs { margin: 0px -20px 5px -6px; diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 5be885f7e..a98d17136 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -45,31 +45,37 @@
+
+
+ +
+

+
+
+
+ +
+
+
-
- +

RGB color

+
+

-
- +
+

-
- +
+

White channel

- -
-
-
-
-

White balance

-
- +
diff --git a/wled00/data/index.js b/wled00/data/index.js index e340295ca..ebbe5dfe5 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -4,6 +4,7 @@ var noNewSegs = false; var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false; var whites = [0,0,0]; var selColors; +var mcct = false; //manual CCT (if false, CCT from RGB) var expanded = [false]; var powered = [true]; var nlDur = 60, nlTar = 0; @@ -40,26 +41,13 @@ var hol = [ var cpick = new iro.ColorPicker("#picker", { width: 260, wheelLightness: false, - wheelAngle: 90, + wheelAngle: 270, + wheelDirection: "clockwise", layout: [ { component: iro.ui.Wheel, options: {} - }, - { - component: iro.ui.Slider, - options: { - sliderType: 'value' - } - }/*, - { - component: iro.ui.Slider, - options: { - sliderType: 'kelvin', - minTemperature: 2100, - maxTemperature: 10000 - } - }*/ + } ] }); @@ -81,6 +69,7 @@ function applyCfg() var ccfg = cfg.comp.colors; d.getElementById('hexw').style.display = ccfg.hex ? "block":"none"; d.getElementById('picker').style.display = ccfg.picker ? "block":"none"; + d.getElementById('vwrap').style.display = ccfg.picker ? "block":"none"; d.getElementById('rgbwrap').style.display = ccfg.rgb ? "block":"none"; d.getElementById('qcs-w').style.display = ccfg.quick ? "block":"none"; var l = cfg.comp.labels; @@ -246,6 +235,7 @@ function onLoad() { cpick.on("input:end", function() { setColor(1); }); + cpick.on("color:change", updatePSliders); pmtLS = localStorage.getItem('wledPmt'); setTimeout(function(){requestJson(null, false);}, 50); d.addEventListener("visibilitychange", handleVisibilityChange, false); @@ -861,7 +851,7 @@ function updateTrail(e) var perc = e.value * 100 / max; perc = parseInt(perc); if (perc < 50) perc += 2; - var val = `linear-gradient(90deg, var(--c-f) ${perc}%, var(--c-4) ${perc}%)`; + var val = `linear-gradient(90deg, var(--bg) ${perc}%, var(--c-4) ${perc}%)`; e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val; } @@ -932,12 +922,12 @@ function updateUI() updateTrail(d.getElementById('sliderBri')); updateTrail(d.getElementById('sliderSpeed')); updateTrail(d.getElementById('sliderIntensity')); + //updateTrail(d.getElementById('sliderW')); d.getElementById('wwrap').style.display = (isRgbw) ? "block":"none"; - d.getElementById("wbal").style.display = (lastinfo.leds.cct) ? "block":"none"; updatePA(); - updateHex(); - updateRgb(); + //updateHex(); + //updateRgb(); } function displayRover(i,s) @@ -1015,8 +1005,8 @@ function readState(s,command=false) { if (isRgbw) whites[e] = parseInt(i.col[e][3]); selectSlot(csel); } - d.getElementById('sliderW').value = whites[csel]; - if (i.cct && i.cct>=0) d.getElementById("sliderA").value = i.cct; + //d.getElementById('sliderW').value = whites[csel]; + if (mcct & i.cct && i.cct>=0) d.getElementById("sliderA").value = i.cct; d.getElementById('sliderSpeed').value = i.sx; d.getElementById('sliderIntensity').value = i.ix; @@ -1164,6 +1154,9 @@ function requestJson(command, rinfo = true) { } d.title = name; isRgbw = info.leds.wv; + mcct = info.leds.cct; + let wsld = d.getElementById("wbal"); + if (mcct) wsld.parentNode.insertBefore(wsld,d.getElementById('qcs-w')); ledCount = info.leds.count; syncTglRecv = info.str; maxSeg = info.leds.maxseg; @@ -1717,8 +1710,9 @@ function selectSlot(b) { cd[csel].style.width="50px"; cpick.color.set(cd[csel].style.backgroundColor); d.getElementById('sliderW').value = whites[csel]; - updateHex(); - updateRgb(); + updateTrail(d.getElementById('sliderW')); + //updateHex(); + //updateRgb(); redrawPalPrev(); } @@ -1738,12 +1732,28 @@ function pC(col) setColor(0); } +function updatePSliders() { + updateRgb(); + updateHex(); + var v = d.getElementById('sliderV'); + v.value = cpick.color.value; + var hsv = {"h":cpick.color.hue,"s":cpick.color.saturation,"v":100}; + var c = iro.Color.hsvToRgb(hsv); + var cs = 'rgb('+c.r+','+c.g+','+c.b+')'; + v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs); + updateTrail(v); + if (!mcct) d.getElementById('sliderA').value = cpick.color.kelvin; +} + function updateRgb() { var col = cpick.color.rgb; - d.getElementById('sliderR').value = col.r; - d.getElementById('sliderG').value = col.g; - d.getElementById('sliderB').value = col.b; + var s = d.getElementById('sliderR'); + s.value = col.r; updateTrail(s,1); + s = d.getElementById('sliderG'); + s.value = col.g; updateTrail(s,2); + s = d.getElementById('sliderB'); + s.value = col.b; updateTrail(s,3); } function updateHex() @@ -1774,15 +1784,25 @@ function fromHex() setColor(2); } +function fromV() +{ + cpick.color.setChannel('hsv', 'v', d.getElementById('sliderV').value); +} + +function fromA() +{ + if (!mcct) cpick.color.set({ kelvin: d.getElementById('sliderA').value }); +} + function fromRgb() { var r = d.getElementById('sliderR').value; var g = d.getElementById('sliderG').value; var b = d.getElementById('sliderB').value; cpick.color.set(`rgb(${r},${g},${b})`); - setColor(0); } +//sr 0: from RGB sliders, 1: from picker, 2: from hex function setColor(sr) { var cd = d.getElementById('csl').children; if (sr == 1 && cd[csel].style.backgroundColor == 'rgb(0, 0, 0)') cpick.color.setChannel('hsv', 'v', 100); @@ -1795,13 +1815,14 @@ function setColor(sr) { } else if (csel == 2) { obj = {"seg": {"col": [[],[],[col.r, col.g, col.b, whites[csel]]]}}; } - updateHex(); - updateRgb(); + //updateHex(); + //updateRgb(); requestJson(obj); } function setBalance(b) { + if (!mcct) {setColor(0); return;} var obj = {"seg": {"cct": parseInt(b)}}; requestJson(obj); } diff --git a/wled00/data/iro.js b/wled00/data/iro.js index f459e417c..3d63d0418 100644 --- a/wled00/data/iro.js +++ b/wled00/data/iro.js @@ -1,7 +1,7 @@ /*! - * iro.js v5.3.1 - * 2016-2020 James Daniel + * iro.js v5.5.2 + * 2016-2021 James Daniel * Licensed under MPL 2.0 * github.com/jaames/iro.js */ -!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).iro=n()}(this,function(){"use strict";var k,s,n,i,o,m={},M=[],r=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function b(t){var n=t.parentNode;n&&n.removeChild(t)}function d(t,n,i){var r,e,u,o,l=arguments;if(n=j({},n),3=r/i?u=n:e=n}return n},function(t,n,i){n&&g(t.prototype,n),i&&g(t,i)}(l,[{key:"hsv",get:function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},set:function(t){var n=this.$;if(t=p({},n,t),this.onChange){var i={h:!1,v:!1,s:!1,a:!1};for(var r in n)i[r]=t[r]!=n[r];this.$=t,(i.h||i.s||i.v||i.a)&&this.onChange(this,i)}else this.$=t}},{key:"hsva",get:function(){return p({},this.$)},set:function(t){this.hsv=t}},{key:"hue",get:function(){return this.$.h},set:function(t){this.hsv={h:t}}},{key:"saturation",get:function(){return this.$.s},set:function(t){this.hsv={s:t}}},{key:"value",get:function(){return this.$.v},set:function(t){this.hsv={v:t}}},{key:"alpha",get:function(){return this.$.a},set:function(t){this.hsv=p({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return l.rgbToKelvin(this.rgb)},set:function(t){this.rgb=l.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=p({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=p({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=p({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,r=t.b;return{r:U(n),g:U(i),b:U(r)}},set:function(t){this.hsv=p({},l.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return p({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=l.hsvToHsl(this.$),n=t.h,i=t.s,r=t.l;return{h:U(n),s:U(i),l:U(r)}},set:function(t){this.hsv=p({},l.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return p({},this.hsl,{a:this.alpha})},set:function(t){this.hsl=t}},{key:"rgbString",get:function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},set:function(t){var n,i,r,e,u=1;if((n=P.exec(t))?(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255)):(n=z.exec(t))&&(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255),u=K(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:r,b:e,a:u}}},{key:"rgbaString",get:function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},set:function(t){this.rgbString=t}},{key:"hexString",get:function(){var t=this.rgb;return"#"+V(t.r)+V(t.g)+V(t.b)},set:function(t){var n,i,r,e,u=255;if((n=C.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3])):(n=D.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3]),u=17*Q(n[4])):(n=F.exec(t))?(i=Q(n[1]),r=Q(n[2]),e=Q(n[3])):(n=G.exec(t))&&(i=Q(n[1]),r=Q(n[2]),e=Q(n[3]),u=Q(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:r,b:e,a:u/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+V(t.r)+V(t.g)+V(t.b)+V(q(255*t.a))},set:function(t){this.hexString=t}},{key:"hslString",get:function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},set:function(t){var n,i,r,e,u=1;if((n=H.exec(t))?(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100)):(n=$.exec(t))&&(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100),u=K(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:r,l:e,a:u}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}]),l}();function Z(t){var n,i=t.width,r=t.sliderSize,e=t.borderWidth,u=t.handleRadius,o=t.padding,l=t.sliderShape,s="horizontal"===t.layoutDirection;return r=null!=(n=r)?n:2*o+2*u+2*e,"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*o-2*u-2*e,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-e/2}:{handleStart:r/2,handleRange:i-r,radius:r/2,x:0,y:0,width:s?r:i,height:s?i:r}}function tt(t,n){var i=Z(t),r=i.width,e=i.height,u=i.handleRange,o=i.handleStart,l="horizontal"===t.layoutDirection,s=l?r/2:e/2,c=o+function(t,n){var i=n.hsva,r=n.rgb;switch(t.sliderType){case"red":return r.r/2.55;case"green":return r.g/2.55;case"blue":return r.b/2.55;case"alpha":return 100*i.a;case"kelvin":var e=t.minTemperature,u=t.maxTemperature-e,o=(n.kelvin-e)/u*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;case"value":default:return i.v}}(t,n)/100*u;return l&&(c=-1*c+u+2*o),{x:l?s:c,y:l?c:s}}function nt(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function it(t,n,i){var r=t.wheelAngle,e=t.wheelDirection;return((n=!i&&"clockwise"===e||i&&"anticlockwise"===e?(i?180:360)-(r-n):r+n)%360+360)%360}function rt(t,n,i){var r=nt(t),e=r.cx,u=r.cy,o=t.width/2-t.padding-t.handleRadius-t.borderWidth;n=e-n,i=u-i;var l=it(t,Math.atan2(-i,-n)*(180/Math.PI)),s=Math.min(Math.sqrt(n*n+i*i),o);return{h:Math.round(l),s:Math.round(100/o*s)}}function et(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function ut(t,n,i){var r=et(t),e=r.width,u=r.height,o=r.radius,l=(n-o)/(e-2*o)*100,s=(i-o)/(u-2*o)*100;return{s:Math.max(0,Math.min(l,100)),v:Math.max(0,Math.min(100-s,100))}}function ot(t){X=X||document.getElementsByTagName("base");var n=window.navigator.userAgent,i=/^((?!chrome|android).)*safari/i.test(n),r=/iPhone|iPod|iPad/i.test(n),e=window.location;return(i||r)&&0=r/i?u=n:e=n}return n},function(t,n,i){n&&g(t.prototype,n),i&&g(t,i)}(l,[{key:"hsv",get:function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},set:function(t){var n=this.$;if(t=b({},n,t),this.onChange){var i={h:!1,v:!1,s:!1,a:!1};for(var r in n)i[r]=t[r]!=n[r];this.$=t,(i.h||i.s||i.v||i.a)&&this.onChange(this,i)}else this.$=t}},{key:"hsva",get:function(){return b({},this.$)},set:function(t){this.hsv=t}},{key:"hue",get:function(){return this.$.h},set:function(t){this.hsv={h:t}}},{key:"saturation",get:function(){return this.$.s},set:function(t){this.hsv={s:t}}},{key:"value",get:function(){return this.$.v},set:function(t){this.hsv={v:t}}},{key:"alpha",get:function(){return this.$.a},set:function(t){this.hsv=b({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return l.rgbToKelvin(this.rgb)},set:function(t){this.rgb=l.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=b({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=b({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=b({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,r=t.b;return{r:G(n),g:G(i),b:G(r)}},set:function(t){this.hsv=b({},l.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return b({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=l.hsvToHsl(this.$),n=t.h,i=t.s,r=t.l;return{h:G(n),s:G(i),l:G(r)}},set:function(t){this.hsv=b({},l.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return b({},this.hsl,{a:this.alpha})},set:function(t){this.hsl=t}},{key:"rgbString",get:function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},set:function(t){var n,i,r,e,u=1;if((n=_.exec(t))?(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255)):(n=H.exec(t))&&(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255),u=K(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:r,b:e,a:u}}},{key:"rgbaString",get:function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},set:function(t){this.rgbString=t}},{key:"hexString",get:function(){var t=this.rgb;return"#"+U(t.r)+U(t.g)+U(t.b)},set:function(t){var n,i,r,e,u=255;if((n=D.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3])):(n=F.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3]),u=17*Q(n[4])):(n=L.exec(t))?(i=Q(n[1]),r=Q(n[2]),e=Q(n[3])):(n=B.exec(t))&&(i=Q(n[1]),r=Q(n[2]),e=Q(n[3]),u=Q(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:r,b:e,a:u/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+U(t.r)+U(t.g)+U(t.b)+U(Z(255*t.a))},set:function(t){this.hexString=t}},{key:"hslString",get:function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},set:function(t){var n,i,r,e,u=1;if((n=P.exec(t))?(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100)):(n=$.exec(t))&&(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100),u=K(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:r,l:e,a:u}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}]),l}();function X(t){var n,i=t.width,r=t.sliderSize,e=t.borderWidth,u=t.handleRadius,o=t.padding,l=t.sliderShape,s="horizontal"===t.layoutDirection;return r=null!=(n=r)?n:2*o+2*u,"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*o-2*u,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-e/2}:{handleStart:r/2,handleRange:i-r,radius:r/2,x:0,y:0,width:s?r:i,height:s?i:r}}function Y(t,n){var i=X(t),r=i.width,e=i.height,u=i.handleRange,o=i.handleStart,l="horizontal"===t.layoutDirection,s=l?r/2:e/2,c=o+function(t,n){var i=n.hsva,r=n.rgb;switch(t.sliderType){case"red":return r.r/2.55;case"green":return r.g/2.55;case"blue":return r.b/2.55;case"alpha":return 100*i.a;case"kelvin":var e=t.minTemperature,u=t.maxTemperature-e,o=(n.kelvin-e)/u*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;case"value":default:return i.v}}(t,n)/100*u;return l&&(c=-1*c+u+2*o),{x:l?s:c,y:l?c:s}}var tt,nt=2*Math.PI,it=function(t,n){return(t%n+n)%n},rt=function(t,n){return Math.sqrt(t*t+n*n)};function et(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function ut(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function ot(t,n,i){var r=t.wheelAngle,e=t.wheelDirection;return i&&"clockwise"===e?n=r+n:"clockwise"===e?n=360-r+n:i&&"anticlockwise"===e?n=r+180-n:"anticlockwise"===e&&(n=r-n),it(n,360)}function lt(t,n,i){var r=ut(t),e=r.cx,u=r.cy,o=et(t);n=e-n,i=u-i;var l=ot(t,Math.atan2(-i,-n)*(360/nt)),s=Math.min(rt(n,i),o);return{h:Math.round(l),s:Math.round(100/o*s)}}function st(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function ct(t,n,i){var r=st(t),e=r.width,u=r.height,o=r.radius,l=(n-o)/(e-2*o)*100,s=(i-o)/(u-2*o)*100;return{s:Math.max(0,Math.min(l,100)),v:Math.max(0,Math.min(100-s,100))}}function at(t,n,i,r){for(var e=0;e