From 35ecdf6d0e16098a308c1c1249a010f6fd98054e Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Mon, 11 Apr 2022 13:32:14 +0200 Subject: [PATCH 01/11] add slider input and label WIP --- dist/Slider.d.ts | 2 + dist/iro.es.js | 162 +++++++++++++++++++++-------- dist/iro.js | 166 ++++++++++++++++++++++-------- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 162 +++++++++++++++++++++-------- src/ComponentWrapper.tsx | 2 +- src/Slider.tsx | 162 +++++++++++++++++++++++------ 7 files changed, 499 insertions(+), 159 deletions(-) diff --git a/dist/Slider.d.ts b/dist/Slider.d.ts index 1ca0546..c557744 100644 --- a/dist/Slider.d.ts +++ b/dist/Slider.d.ts @@ -6,6 +6,8 @@ interface IroSliderProps extends IroComponentProps { sliderShape: SliderShape; minTemperature: number; maxTemperature: number; + showInput: boolean; + disabled: boolean; } export declare function IroSlider(props: IroSliderProps): h.JSX.Element; export declare namespace IroSlider { diff --git a/dist/iro.es.js b/dist/iro.es.js index 8f351a7..3b292c6 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -5,7 +5,7 @@ * github.com/jaames/iro.js */ -var n,u,t,i,r,o,f={},e=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function s(n,l){for(var u in l){ n[u]=l[u]; }return n}function a(n){var l=n.parentNode;l&&l.removeChild(n);}function h(n,l,u){var t,i,r,o,f=arguments;if(l=s({},l),arguments.length>3){ for(u=[u],t=3;t2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps){ for(r in l.defaultProps){ void 0===f[r]&&(f[r]=l.defaultProps[r]); } }return y(l,f,t,o,null)}function y(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u:r};return null==r&&null!=l.vnode&&l.vnode(f),f}function d(n){return n.children}function _(n,l){this.props=n,this.context=l;}function k(n,l){if(null==l){ return n.__?k(n.__,n.__.__k.indexOf(n)+1):null; }for(var u;l0?y(_.type,_.props,_.key,null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(p=w[h])||p&&_.key==p.key&&_.type===p.type){ w[h]=void 0; }else { for(v=0;v 0) { rootStyles[isHorizontal ? 'marginLeft' : 'marginTop'] = margin; } - return (h(d, null, props.children(this.uid, rootProps, rootStyles))); + return (v(d, null, props.children(this.uid, rootProps, rootStyles))); }; // More info on handleEvent: // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38 @@ -1275,15 +1275,14 @@ var IroComponentWrapper = /*@__PURE__*/(function (Component) { }; return IroComponentWrapper; -}(m)); +}(_)); function IroHandle(props) { var radius = props.r; var url = props.url; var cx = radius; var cy = radius; - return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: { - '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0);', + return (v("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: { transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"), willChange: 'transform', top: cssValue(-radius), @@ -1293,9 +1292,9 @@ function IroHandle(props) { position: 'absolute', overflow: 'visible' } }, - url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))), - !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })), - !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" })))); + url && (v("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))), + !url && (v("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })), + !url && (v("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" })))); } IroHandle.defaultProps = { fill: 'none', @@ -1306,6 +1305,8 @@ IroHandle.defaultProps = { props: { x: 0, y: 0 } }; +var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmount;function l$1(t,r){l.__h&&l.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$1(n){return o$1=1,p(w$1,n)}function p(n,r,o){var i=l$1(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u$1),i.__}function _$1(n,u){var r=l$1(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o$1=8,_$1(function(){return n},t)}function x$1(){for(var t;t=i.shift();){ if(t.__P){ try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],l.__e(u,t.__v);} } }}l.__b=function(n){u$1=null,c$1&&c$1(n);},l.__r=function(n){f$1&&f$1(n),t$1=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},l.diffed=function(t){e$1&&e$1(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r$1===l.requestAnimationFrame||((r$1=l.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b$1&&(t=requestAnimationFrame(u));})(x$1)),u$1=null;},l.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l.__e(r,t.__v);}}),a$1&&a$1(t,u);},l.unmount=function(t){v$1&&v$1(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g$1(n);}catch(n$1){u=n$1;}}),u&&l.__e(u,r.__v));};var b$1="function"==typeof requestAnimationFrame;function g$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function j$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t} + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1315,29 +1316,108 @@ function IroSlider(props) { var radius = ref.radius; var handlePos = getSliderHandlePosition(props, activeColor); var gradient = getSliderGradient(props, activeColor); + var ref$1 = m$1(activeColor[props.sliderType]); + var sliderValue = ref$1[0]; + var setSliderValue = ref$1[1]; + setSliderValue(activeColor[props.sliderType]); function handleInput(x, y, type) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'alpha') { + setSliderValue(value.toFixed(2)); + } + else { + setSliderValue(Math.round(value)); + } props.onInput(type, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroSlider", style: Object.assign({}, {position: 'relative', - width: cssValue(width), - height: cssValue(height), - borderRadius: cssValue(radius), - // checkered bg to represent alpha - background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)", - backgroundSize: '8px 8px'}, - rootStyles) }), - h("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute', - top: 0, - left: 0, - width: "100%", - height: "100%", + var handleSliderValue = A(function (e) { + e.preventDefault(); + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return; + } + var maxlen; + if (props.sliderType === 'alpha') { + maxlen = 4; + } + else if (props.sliderType === 'kelvin') { + maxlen = 10; + } + else { + maxlen = 3; + } + var value = e.target.value.toString(); + var valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); + var clampedValue; + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + switch (props.sliderType) { + case 'hue': + clampedValue = clamp(+valueString, 0, 360); + break; + case 'saturation': + case 'value': + clampedValue = clamp(+valueString, 0, 100); + break; + case 'red': + case 'green': + case 'blue': + clampedValue = clamp(+valueString, 0, 255); + break; + case 'alpha': + if (valueString === '0.') { + clampedValue = 0.01; + } + else { + clampedValue = clamp(+valueString, 0, 1); + } + break; + } + activeColor[props.sliderType] = +clampedValue; + return clampedValue; + }, [setSliderValue, props.sliderType]); + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( + // add wrapper element + v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', + flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', + alignItems: 'baseline'}, + rootStyles) }, + v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { + position: 'relative', + display: 'block', + width: cssValue(width), + height: cssValue(height), borderRadius: cssValue(radius), - background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, - cssBorderStyles(props)) }), - h(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y }))); })); + // checkered bg to represent alpha + background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)", + backgroundSize: '8px 8px', + } }), + v("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute', + top: 0, + left: 0, + width: "100%", + height: "100%", + borderRadius: cssValue(radius), + background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, + cssBorderStyles(props)) }), + v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), + v("span", { className: "IroSliderLabel", style: { + display: props.showInput ? 'block' : 'none', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(props.handleRadius) : cssValue(0), + width: cssValue(10) + } }, props.sliderType[0].toUpperCase()), + v("input", { onKeyPress: handleSliderValue, className: "IroSliderInput", style: { + display: props.showInput ? 'block' : 'none', + width: cssValue(33), + height: cssValue(18), + fontSize: '12px', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(5) : cssValue(0) + }, type: "text", disabled: props.disabled, value: sliderValue }))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); @@ -1375,19 +1455,19 @@ function IroBox(props) { // let the color picker fire input:start, input:move or input:end events props.onInput(inputType, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width), + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (v("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width), height: cssValue(height), position: 'relative'}, rootStyles) }), - h("div", { className: "IroBox", style: Object.assign({}, {width: '100%', + v("div", { className: "IroBox", style: Object.assign({}, {width: '100%', height: '100%', borderRadius: cssValue(radius)}, cssBorderStyles(props), {background: cssGradient('linear', 'to bottom', gradients[1]) + ',' + cssGradient('linear', 'to right', gradients[0])}) }), - colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), - h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); + colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (v(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), + v(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); } var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)'; @@ -1439,22 +1519,22 @@ function IroWheel(props) { // let the color picker fire input:start, input:move or input:end events props.onInput(inputType, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width), + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (v("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width), height: cssValue(width), position: 'relative'}, rootStyles) }), - h("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles, {transform: ("rotateZ(" + (props.wheelAngle + 90) + "deg)"), background: props.wheelDirection === 'clockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE}) }), - h("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles, {background: 'radial-gradient(circle closest-side, #fff, transparent)'}) }), - props.wheelLightness && (h("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles, + props.wheelLightness && (v("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles, {background: '#000', opacity: 1 - hsv.v / 100}) })), - h("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles, cssBorderStyles(props)) }), - colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), - h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); + colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (v(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), + v(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); } function createWidget(WidgetComponent) { @@ -1462,7 +1542,7 @@ function createWidget(WidgetComponent) { var widget; // will become an instance of the widget component class var widgetRoot = document.createElement('div'); // Render widget into a temp DOM node - I(h(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }}, + S(v(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }}, props)), widgetRoot); function mountWidget() { var container = parent instanceof Element ? parent : document.querySelector(parent); @@ -1739,18 +1819,18 @@ var IroColorPicker = /*@__PURE__*/(function (Component) { }); } } - return (h("div", { class: "IroColorPicker", id: state.id, style: { + return (v("div", { class: "IroColorPicker", id: state.id, style: { display: state.display } }, layout.map(function (ref, componentIndex) { var UiComponent = ref.component; var options = ref.options; - return (h(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex }))); + return (v(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex }))); }))); }; return IroColorPicker; -}(m)); +}(_)); IroColorPicker.defaultProps = Object.assign({}, iroColorPickerOptionDefaults, {colors: [], display: 'block', @@ -1766,7 +1846,7 @@ var iro; iro.ColorPicker = IroColorPickerWidget; var ui; (function (ui) { - ui.h = h; + ui.h = v; ui.ComponentBase = IroComponentWrapper; ui.Handle = IroHandle; ui.Slider = IroSlider; diff --git a/dist/iro.js b/dist/iro.js index 55e7eb4..2990676 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -9,9 +9,9 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.iro = factory()); -}(this, function () { 'use strict'; +}(this, (function () { 'use strict'; - var n,u,t,i,r,o,f={},e=[],c=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function s(n,l){for(var u in l){ n[u]=l[u]; }return n}function a(n){var l=n.parentNode;l&&l.removeChild(n);}function h(n,l,u){var t,i,r,o,f=arguments;if(l=s({},l),arguments.length>3){ for(u=[u],t=3;t2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps){ for(r in l.defaultProps){ void 0===f[r]&&(f[r]=l.defaultProps[r]); } }return y(l,f,t,o,null)}function y(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u:r};return null==r&&null!=l.vnode&&l.vnode(f),f}function d(n){return n.children}function _(n,l){this.props=n,this.context=l;}function k(n,l){if(null==l){ return n.__?k(n.__,n.__.__k.indexOf(n)+1):null; }for(var u;l0?y(_.type,_.props,_.key,null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(p=w[h])||p&&_.key==p.key&&_.type===p.type){ w[h]=void 0; }else { for(v=0;v 0) { rootStyles[isHorizontal ? 'marginLeft' : 'marginTop'] = margin; } - return (h(d, null, props.children(this.uid, rootProps, rootStyles))); + return (v(d, null, props.children(this.uid, rootProps, rootStyles))); }; // More info on handleEvent: // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38 @@ -1281,15 +1281,14 @@ }; return IroComponentWrapper; - }(m)); + }(_)); function IroHandle(props) { var radius = props.r; var url = props.url; var cx = radius; var cy = radius; - return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: { - '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0);', + return (v("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: { transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"), willChange: 'transform', top: cssValue(-radius), @@ -1299,9 +1298,9 @@ position: 'absolute', overflow: 'visible' } }, - url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))), - !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })), - !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" })))); + url && (v("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))), + !url && (v("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })), + !url && (v("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" })))); } IroHandle.defaultProps = { fill: 'none', @@ -1312,6 +1311,8 @@ props: { x: 0, y: 0 } }; + var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmount;function l$1(t,r){l.__h&&l.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$1(n){return o$1=1,p(w$1,n)}function p(n,r,o){var i=l$1(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u$1),i.__}function _$1(n,u){var r=l$1(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o$1=8,_$1(function(){return n},t)}function x$1(){for(var t;t=i.shift();){ if(t.__P){ try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],l.__e(u,t.__v);} } }}l.__b=function(n){u$1=null,c$1&&c$1(n);},l.__r=function(n){f$1&&f$1(n),t$1=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},l.diffed=function(t){e$1&&e$1(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r$1===l.requestAnimationFrame||((r$1=l.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b$1&&(t=requestAnimationFrame(u));})(x$1)),u$1=null;},l.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l.__e(r,t.__v);}}),a$1&&a$1(t,u);},l.unmount=function(t){v$1&&v$1(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g$1(n);}catch(n$1){u=n$1;}}),u&&l.__e(u,r.__v));};var b$1="function"==typeof requestAnimationFrame;function g$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function j$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t} + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1321,29 +1322,108 @@ var radius = ref.radius; var handlePos = getSliderHandlePosition(props, activeColor); var gradient = getSliderGradient(props, activeColor); + var ref$1 = m$1(activeColor[props.sliderType]); + var sliderValue = ref$1[0]; + var setSliderValue = ref$1[1]; + setSliderValue(activeColor[props.sliderType]); function handleInput(x, y, type) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'alpha') { + setSliderValue(value.toFixed(2)); + } + else { + setSliderValue(Math.round(value)); + } props.onInput(type, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroSlider", style: Object.assign({}, {position: 'relative', - width: cssValue(width), - height: cssValue(height), - borderRadius: cssValue(radius), - // checkered bg to represent alpha - background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)", - backgroundSize: '8px 8px'}, - rootStyles) }), - h("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute', - top: 0, - left: 0, - width: "100%", - height: "100%", + var handleSliderValue = A(function (e) { + e.preventDefault(); + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return; + } + var maxlen; + if (props.sliderType === 'alpha') { + maxlen = 4; + } + else if (props.sliderType === 'kelvin') { + maxlen = 10; + } + else { + maxlen = 3; + } + var value = e.target.value.toString(); + var valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); + var clampedValue; + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + switch (props.sliderType) { + case 'hue': + clampedValue = clamp(+valueString, 0, 360); + break; + case 'saturation': + case 'value': + clampedValue = clamp(+valueString, 0, 100); + break; + case 'red': + case 'green': + case 'blue': + clampedValue = clamp(+valueString, 0, 255); + break; + case 'alpha': + if (valueString === '0.') { + clampedValue = 0.01; + } + else { + clampedValue = clamp(+valueString, 0, 1); + } + break; + } + activeColor[props.sliderType] = +clampedValue; + return clampedValue; + }, [setSliderValue, props.sliderType]); + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( + // add wrapper element + v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', + flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', + alignItems: 'baseline'}, + rootStyles) }, + v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { + position: 'relative', + display: 'block', + width: cssValue(width), + height: cssValue(height), borderRadius: cssValue(radius), - background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, - cssBorderStyles(props)) }), - h(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y }))); })); + // checkered bg to represent alpha + background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)", + backgroundSize: '8px 8px', + } }), + v("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute', + top: 0, + left: 0, + width: "100%", + height: "100%", + borderRadius: cssValue(radius), + background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, + cssBorderStyles(props)) }), + v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), + v("span", { className: "IroSliderLabel", style: { + display: props.showInput ? 'block' : 'none', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(props.handleRadius) : cssValue(0), + width: cssValue(10) + } }, props.sliderType[0].toUpperCase()), + v("input", { onKeyPress: handleSliderValue, className: "IroSliderInput", style: { + display: props.showInput ? 'block' : 'none', + width: cssValue(33), + height: cssValue(18), + fontSize: '12px', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(5) : cssValue(0) + }, type: "text", disabled: props.disabled, value: sliderValue }))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); @@ -1381,19 +1461,19 @@ // let the color picker fire input:start, input:move or input:end events props.onInput(inputType, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width), + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (v("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width), height: cssValue(height), position: 'relative'}, rootStyles) }), - h("div", { className: "IroBox", style: Object.assign({}, {width: '100%', + v("div", { className: "IroBox", style: Object.assign({}, {width: '100%', height: '100%', borderRadius: cssValue(radius)}, cssBorderStyles(props), {background: cssGradient('linear', 'to bottom', gradients[1]) + ',' + cssGradient('linear', 'to right', gradients[0])}) }), - colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), - h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); + colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (v(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), + v(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); } var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)'; @@ -1445,22 +1525,22 @@ // let the color picker fire input:start, input:move or input:end events props.onInput(inputType, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width), + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (v("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width), height: cssValue(width), position: 'relative'}, rootStyles) }), - h("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles, {transform: ("rotateZ(" + (props.wheelAngle + 90) + "deg)"), background: props.wheelDirection === 'clockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE}) }), - h("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles, {background: 'radial-gradient(circle closest-side, #fff, transparent)'}) }), - props.wheelLightness && (h("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles, + props.wheelLightness && (v("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles, {background: '#000', opacity: 1 - hsv.v / 100}) })), - h("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles, cssBorderStyles(props)) }), - colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), - h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); + colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (v(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), + v(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); } function createWidget(WidgetComponent) { @@ -1468,7 +1548,7 @@ var widget; // will become an instance of the widget component class var widgetRoot = document.createElement('div'); // Render widget into a temp DOM node - I(h(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }}, + S(v(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }}, props)), widgetRoot); function mountWidget() { var container = parent instanceof Element ? parent : document.querySelector(parent); @@ -1745,18 +1825,18 @@ }); } } - return (h("div", { class: "IroColorPicker", id: state.id, style: { + return (v("div", { class: "IroColorPicker", id: state.id, style: { display: state.display } }, layout.map(function (ref, componentIndex) { var UiComponent = ref.component; var options = ref.options; - return (h(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex }))); + return (v(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex }))); }))); }; return IroColorPicker; - }(m)); + }(_)); IroColorPicker.defaultProps = Object.assign({}, iroColorPickerOptionDefaults, {colors: [], display: 'block', @@ -1772,7 +1852,7 @@ iro.ColorPicker = IroColorPickerWidget; var ui; (function (ui) { - ui.h = h; + ui.h = v; ui.ComponentBase = IroComponentWrapper; ui.Handle = IroHandle; ui.Slider = IroSlider; @@ -1784,4 +1864,4 @@ return iro$1; -})); +}))); diff --git a/dist/iro.min.js b/dist/iro.min.js index 2d20321..79dc611 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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 m,s,n,i,o,x={},j=[],r=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function M(t,n){for(var i in n)t[i]=n[i];return t}function y(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var r,e,u,o,l=arguments;if(n=M({},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=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=i/n?r=o:e=o}return o},i=s,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return s.rgbToKelvin(this.rgb)},set:function(t){this.rgb=s.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=s.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:l(n),g:l(i),b:l(t)}},set:function(t){this.hsv=r({},s.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=s.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:l(n),s:l(i),l:l(t)}},set:function(t){this.hsv=r({},s.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+d(t.r)+d(t.g)+d(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*h(n[1]),e=17*h(n[2]),r=17*h(n[3])):(n=et.exec(t))?(i=17*h(n[1]),e=17*h(n[2]),r=17*h(n[3]),o=17*h(n[4])):(n=rt.exec(t))?(i=h(n[1]),e=h(n[2]),r=h(n[3])):(n=ot.exec(t))&&(i=h(n[1]),e=h(n[2]),r=h(n[3]),o=h(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+d(t.r)+d(t.g)+d(t.b)+d(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&V(i.prototype,t),n&&V(i,n),s}();function p(t){var n=t.width,i=t.sliderSize,e=t.borderWidth,r=t.handleRadius,o=t.padding,u=t.sliderShape,s="horizontal"===t.layoutDirection,i=null!=i?i:2*o+2*r;return"circle"===u?{handleStart:t.padding+t.handleRadius,handleRange:n-2*o-2*r,width:n,height:n,cx:n/2,cy:n/2,radius:n/2-e/2}:{handleStart:i/2,handleRange:n-i,radius:i/2,x:0,y:0,width:s?i:n,height:s?n:i}}function ut(t,n){var i=p(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){return(t%n+n)%n}var lt,ct=2*Math.PI,at=function(t,n){return Math.sqrt(t*t+n*n)};function ft(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function ht(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ft(t),r=(n=r-n,i=e-i,ht(t,Math.atan2(-i,-n)*(360/ct))),e=Math.min(at(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function dt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=dt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function pt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function _t(t){return N=1,n=Ht,t=t,(e=St(wt++,2)).t=n,e.c||(e.i=[i?i(t):Ht(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=s),e.i;var n,i,e}function Rt(t,n){return N=8,i=function(){return t},n=n,o=St(wt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=xt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(zt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){s=null,Mt&&Mt(t)},x.p=function(t){jt&&jt(t),wt=0;t=(s=t.c).I;t&&(t.f.forEach(E),t.f.forEach(zt),t.f=[])},x.diffed=function(t){It&&It(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==xt.push(t)&&kt===x.requestAnimationFrame||((kt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),s=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||zt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),Ot&&Ot(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function E(t){var n=s,i=t.c;"function"==typeof i&&(t.c=void 0,i()),s=n}function zt(t){var n=s;t.c=t.i(),s=n}function Ht(t,n){return"function"==typeof n?n(t):n}function z(u){var t=u.activeIndex,s=void 0!==t&&ti?e:e+t.key.toString();switch(u.sliderType){case"hue":n=o(+r,0,360);break;case"saturation":case"value":n=o(+r,0,100);break;case"red":case"green":case"blue":n=o(+r,0,255);break;case"alpha":n="0."===r?.01:o(+r,0,1)}return s[u.sliderType]=+n,n}function o(t,n,i){return Math.min(Math.max(t,n),i)}},[f,u.sliderType]);return v(_,Object.assign({},u,{onInput:function(t,n,i){t=function(t,n,i){var e=(r=p(t)).handleRange,r=r.handleStart,i="horizontal"===t.layoutDirection?-1*i+e+r:n-r,o=(i=Math.max(Math.min(i,e),0),Math.round(100/e*i));switch(t.sliderType){case"kelvin":var u=t.minTemperature;return u+o/100*(t.maxTemperature-u);case"alpha":return o/100;case"hue":return 3.6*o;case"red":case"blue":case"green":return 2.55*o;default:return o}}(u,t,n),u.parent.inputActive=!0,s[u.sliderType]=t,"alpha"===u.sliderType?f(t.toFixed(2)):f(Math.round(t)),u.onInput(i,u.id)}}),function(t,n,i){return v("div",{className:"IroSliderWrapper",style:Object.assign({},{width:"max-content",flexDirection:"horizontal"===u.layoutDirection?"column":"row",alignItems:"baseline"},i)},v("div",Object.assign({},n,{className:"IroSlider",style:{position:"relative",display:"block",width:y(e),height:y(r),borderRadius:y(o),background:"conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)",backgroundSize:"8px 8px"}}),v("div",{className:"IroSliderGradient",style:Object.assign({},{position:"absolute",top:0,left:0,width:"100%",height:"100%",borderRadius:y(o),background:yt("linear","horizontal"===u.layoutDirection?"to top":"to right",c)},bt(u))}),v(R,{isActive:!0,index:s.index,r:u.handleRadius,url:u.handleSvg,props:u.handleProps,x:l.x,y:l.y})),v("span",{className:"IroSliderLabel",style:{display:u.showInput?"block":"none",marginLeft:"vertical"===u.layoutDirection?y(u.handleRadius):"0px",width:"10px"}},u.sliderType[0].toUpperCase()),v("input",{onKeyPress:h,className:"IroSliderInput",style:{display:u.showInput?"block":"none",width:"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===u.layoutDirection?"5px":"0px"},type:"text",disabled:u.disabled,value:a}))})}function Pt(r){var t=dt(r),e=t.width,o=t.height,u=t.radius,s=r.colors,l=r.parent,t=r.activeIndex,c=void 0!==t&&t3){ for(u=[u],t=3;t2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps){ for(r in l.defaultProps){ void 0===f[r]&&(f[r]=l.defaultProps[r]); } }return y(l,f,t,o,null)}function y(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u:r};return null==r&&null!=l.vnode&&l.vnode(f),f}function d(n){return n.children}function _(n,l){this.props=n,this.context=l;}function k(n,l){if(null==l){ return n.__?k(n.__,n.__.__k.indexOf(n)+1):null; }for(var u;l0?y(_.type,_.props,_.key,null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(p=w[h])||p&&_.key==p.key&&_.type===p.type){ w[h]=void 0; }else { for(v=0;v 0) { rootStyles[isHorizontal ? 'marginLeft' : 'marginTop'] = margin; } - return (h(d, null, props.children(this.uid, rootProps, rootStyles))); + return (v(d, null, props.children(this.uid, rootProps, rootStyles))); }; // More info on handleEvent: // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38 @@ -1275,15 +1275,14 @@ var IroComponentWrapper = /*@__PURE__*/(function (Component) { }; return IroComponentWrapper; -}(m)); +}(_)); function IroHandle(props) { var radius = props.r; var url = props.url; var cx = radius; var cy = radius; - return (h("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: { - '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0);', + return (v("svg", { className: ("IroHandle IroHandle--" + (props.index) + " " + (props.isActive ? 'IroHandle--isActive' : '')), style: { transform: ("translate(" + (cssValue(props.x)) + ", " + (cssValue(props.y)) + ")"), willChange: 'transform', top: cssValue(-radius), @@ -1293,9 +1292,9 @@ function IroHandle(props) { position: 'absolute', overflow: 'visible' } }, - url && (h("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))), - !url && (h("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })), - !url && (h("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" })))); + url && (v("use", Object.assign({ xlinkHref: resolveSvgUrl(url) }, props.props))), + !url && (v("circle", { cx: cx, cy: cy, r: radius, fill: "none", "stroke-width": 2, stroke: "#000" })), + !url && (v("circle", { cx: cx, cy: cy, r: radius - 2, fill: props.fill, "stroke-width": 2, stroke: "#fff" })))); } IroHandle.defaultProps = { fill: 'none', @@ -1306,6 +1305,8 @@ IroHandle.defaultProps = { props: { x: 0, y: 0 } }; +var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmount;function l$1(t,r){l.__h&&l.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$1(n){return o$1=1,p(w$1,n)}function p(n,r,o){var i=l$1(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u$1),i.__}function _$1(n,u){var r=l$1(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o$1=8,_$1(function(){return n},t)}function x$1(){for(var t;t=i.shift();){ if(t.__P){ try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],l.__e(u,t.__v);} } }}l.__b=function(n){u$1=null,c$1&&c$1(n);},l.__r=function(n){f$1&&f$1(n),t$1=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},l.diffed=function(t){e$1&&e$1(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r$1===l.requestAnimationFrame||((r$1=l.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b$1&&(t=requestAnimationFrame(u));})(x$1)),u$1=null;},l.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l.__e(r,t.__v);}}),a$1&&a$1(t,u);},l.unmount=function(t){v$1&&v$1(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g$1(n);}catch(n$1){u=n$1;}}),u&&l.__e(u,r.__v));};var b$1="function"==typeof requestAnimationFrame;function g$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function j$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t} + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1315,29 +1316,108 @@ function IroSlider(props) { var radius = ref.radius; var handlePos = getSliderHandlePosition(props, activeColor); var gradient = getSliderGradient(props, activeColor); + var ref$1 = m$1(activeColor[props.sliderType]); + var sliderValue = ref$1[0]; + var setSliderValue = ref$1[1]; + setSliderValue(activeColor[props.sliderType]); function handleInput(x, y, type) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'alpha') { + setSliderValue(value.toFixed(2)); + } + else { + setSliderValue(Math.round(value)); + } props.onInput(type, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroSlider", style: Object.assign({}, {position: 'relative', - width: cssValue(width), - height: cssValue(height), - borderRadius: cssValue(radius), - // checkered bg to represent alpha - background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)", - backgroundSize: '8px 8px'}, - rootStyles) }), - h("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute', - top: 0, - left: 0, - width: "100%", - height: "100%", + var handleSliderValue = A(function (e) { + e.preventDefault(); + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return; + } + var maxlen; + if (props.sliderType === 'alpha') { + maxlen = 4; + } + else if (props.sliderType === 'kelvin') { + maxlen = 10; + } + else { + maxlen = 3; + } + var value = e.target.value.toString(); + var valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); + var clampedValue; + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + switch (props.sliderType) { + case 'hue': + clampedValue = clamp(+valueString, 0, 360); + break; + case 'saturation': + case 'value': + clampedValue = clamp(+valueString, 0, 100); + break; + case 'red': + case 'green': + case 'blue': + clampedValue = clamp(+valueString, 0, 255); + break; + case 'alpha': + if (valueString === '0.') { + clampedValue = 0.01; + } + else { + clampedValue = clamp(+valueString, 0, 1); + } + break; + } + activeColor[props.sliderType] = +clampedValue; + return clampedValue; + }, [setSliderValue, props.sliderType]); + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( + // add wrapper element + v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', + flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', + alignItems: 'baseline'}, + rootStyles) }, + v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { + position: 'relative', + display: 'block', + width: cssValue(width), + height: cssValue(height), borderRadius: cssValue(radius), - background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, - cssBorderStyles(props)) }), - h(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y }))); })); + // checkered bg to represent alpha + background: "conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)", + backgroundSize: '8px 8px', + } }), + v("div", { className: "IroSliderGradient", style: Object.assign({}, {position: 'absolute', + top: 0, + left: 0, + width: "100%", + height: "100%", + borderRadius: cssValue(radius), + background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, + cssBorderStyles(props)) }), + v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), + v("span", { className: "IroSliderLabel", style: { + display: props.showInput ? 'block' : 'none', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(props.handleRadius) : cssValue(0), + width: cssValue(10) + } }, props.sliderType[0].toUpperCase()), + v("input", { onKeyPress: handleSliderValue, className: "IroSliderInput", style: { + display: props.showInput ? 'block' : 'none', + width: cssValue(33), + height: cssValue(18), + fontSize: '12px', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(5) : cssValue(0) + }, type: "text", disabled: props.disabled, value: sliderValue }))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); @@ -1375,19 +1455,19 @@ function IroBox(props) { // let the color picker fire input:start, input:move or input:end events props.onInput(inputType, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width), + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (v("div", Object.assign({}, rootProps, { className: "IroBox", style: Object.assign({}, {width: cssValue(width), height: cssValue(height), position: 'relative'}, rootStyles) }), - h("div", { className: "IroBox", style: Object.assign({}, {width: '100%', + v("div", { className: "IroBox", style: Object.assign({}, {width: '100%', height: '100%', borderRadius: cssValue(radius)}, cssBorderStyles(props), {background: cssGradient('linear', 'to bottom', gradients[1]) + ',' + cssGradient('linear', 'to right', gradients[0])}) }), - colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), - h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); + colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (v(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), + v(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); } var HUE_GRADIENT_CLOCKWISE = 'conic-gradient(red, yellow, lime, aqua, blue, magenta, red)'; @@ -1439,22 +1519,22 @@ function IroWheel(props) { // let the color picker fire input:start, input:move or input:end events props.onInput(inputType, props.id); } - return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width), + return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (v("div", Object.assign({}, rootProps, { className: "IroWheel", style: Object.assign({}, {width: cssValue(width), height: cssValue(width), position: 'relative'}, rootStyles) }), - h("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelHue", style: Object.assign({}, circleStyles, {transform: ("rotateZ(" + (props.wheelAngle + 90) + "deg)"), background: props.wheelDirection === 'clockwise' ? HUE_GRADIENT_CLOCKWISE : HUE_GRADIENT_ANTICLOCKWISE}) }), - h("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelSaturation", style: Object.assign({}, circleStyles, {background: 'radial-gradient(circle closest-side, #fff, transparent)'}) }), - props.wheelLightness && (h("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles, + props.wheelLightness && (v("div", { className: "IroWheelLightness", style: Object.assign({}, circleStyles, {background: '#000', opacity: 1 - hsv.v / 100}) })), - h("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles, + v("div", { className: "IroWheelBorder", style: Object.assign({}, circleStyles, cssBorderStyles(props)) }), - colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), - h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); + colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (v(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }), + v(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.activeHandleRadius || props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); })); } function createWidget(WidgetComponent) { @@ -1462,7 +1542,7 @@ function createWidget(WidgetComponent) { var widget; // will become an instance of the widget component class var widgetRoot = document.createElement('div'); // Render widget into a temp DOM node - I(h(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }}, + S(v(WidgetComponent, Object.assign({}, {ref: function (ref) { return widget = ref; }}, props)), widgetRoot); function mountWidget() { var container = parent instanceof Element ? parent : document.querySelector(parent); @@ -1739,18 +1819,18 @@ var IroColorPicker = /*@__PURE__*/(function (Component) { }); } } - return (h("div", { class: "IroColorPicker", id: state.id, style: { + return (v("div", { class: "IroColorPicker", id: state.id, style: { display: state.display } }, layout.map(function (ref, componentIndex) { var UiComponent = ref.component; var options = ref.options; - return (h(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex }))); + return (v(UiComponent, Object.assign({}, state, options, { ref: undefined, onInput: this$1.emitInputEvent.bind(this$1), parent: this$1, index: componentIndex }))); }))); }; return IroColorPicker; -}(m)); +}(_)); IroColorPicker.defaultProps = Object.assign({}, iroColorPickerOptionDefaults, {colors: [], display: 'block', @@ -1766,7 +1846,7 @@ var iro; iro.ColorPicker = IroColorPickerWidget; var ui; (function (ui) { - ui.h = h; + ui.h = v; ui.ComponentBase = IroComponentWrapper; ui.Handle = IroHandle; ui.Slider = IroSlider; diff --git a/src/ComponentWrapper.tsx b/src/ComponentWrapper.tsx index 83074d4..39f3b09 100644 --- a/src/ComponentWrapper.tsx +++ b/src/ComponentWrapper.tsx @@ -47,7 +47,7 @@ export class IroComponentWrapper extends Component { const rootStyles = { overflow: 'visible', - display: isHorizontal ? 'inline-block' : 'block' + display: isHorizontal ? 'inline-flex' : 'flex' }; // first component shouldn't have any margin diff --git a/src/Slider.tsx b/src/Slider.tsx index 51c510c..1193739 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -1,4 +1,5 @@ import { h } from 'preact'; +import { useCallback, useState } from 'preact/hooks'; import { IroColor, SliderShape, @@ -22,6 +23,8 @@ interface IroSliderProps extends IroComponentProps { sliderShape: SliderShape; minTemperature: number; maxTemperature: number; + showInput: boolean; // show input fields for manual value input + disabled: boolean; // enable / disable manual value input }; export function IroSlider(props: IroSliderProps) { @@ -30,57 +33,152 @@ export function IroSlider(props: IroSliderProps) { const { width, height, radius } = getSliderDimensions(props); const handlePos = getSliderHandlePosition(props, activeColor); const gradient = getSliderGradient(props, activeColor); + const [sliderValue, setSliderValue] = useState(activeColor[props.sliderType]); + setSliderValue(activeColor[props.sliderType]) function handleInput(x: number, y: number, type: IroInputType) { const value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'alpha') { + setSliderValue(value.toFixed(2)); + } else { + setSliderValue(Math.round(value)); + } props.onInput(type, props.id); } + const handleSliderValue = useCallback((e) => { + e.preventDefault(); + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return; + } + + let maxlen: number; + if (props.sliderType === 'alpha') { + maxlen = 4; + } else if (props.sliderType === 'kelvin') { + maxlen = 10; + } else { + maxlen = 3; + } + const value = (e.target as HTMLInputElement).value.toString(); + const valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); + let clampedValue: number; + + function clamp(num: number, min: number, max: number) { + return Math.min(Math.max(num, min), max); + } + + switch(props.sliderType) { + case 'hue': + clampedValue = clamp(+valueString, 0, 360); + break; + case 'saturation': + case 'value': + clampedValue = clamp(+valueString, 0, 100); + break; + case 'red': + case 'green': + case 'blue': + clampedValue = clamp(+valueString, 0, 255); + break; + case 'alpha': + if (valueString === '0.') { + clampedValue = 0.01; + } else { + clampedValue = clamp(+valueString, 0, 1); + } + break; + case 'kelvin': // TODO + break; + } + activeColor[props.sliderType] = +clampedValue; + return clampedValue; + }, [setSliderValue, props.sliderType]); + return ( {(uid, rootProps, rootStyles) => ( + // add wrapper element
+
+ +
+ + {props.sliderType[0].toUpperCase()} + + - + type="text" + disabled={ props.disabled } + value={ sliderValue } + > +
)} From d291aa85e69b2bb11b0e0960bb3a82ff124a23ae Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Tue, 12 Apr 2022 14:01:34 +0200 Subject: [PATCH 02/11] add Input component in seperate file. Outsource some functions to iro-core --- dist/Input.d.ts | 17 +++ dist/iro.es.js | 209 +++++++++++++++++++----------- dist/iro.js | 209 +++++++++++++++++++----------- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 209 +++++++++++++++++++----------- package.json | 2 +- src/Input.tsx | 80 ++++++++++++ src/Slider.tsx | 97 ++------------ 8 files changed, 509 insertions(+), 316 deletions(-) create mode 100644 dist/Input.d.ts create mode 100644 src/Input.tsx diff --git a/dist/Input.d.ts b/dist/Input.d.ts new file mode 100644 index 0000000..19cd3bc --- /dev/null +++ b/dist/Input.d.ts @@ -0,0 +1,17 @@ +import { h } from 'preact'; +import { LayoutDirection } from '@irojs/iro-core'; +import { IroColor, SliderType } from '@irojs/iro-core'; +interface IroInputProps { + sliderType: SliderType; + activeColor: IroColor; + layoutDirection: LayoutDirection; + handleRadius: number; + disabled: boolean; +} +export declare function IroInput(props: IroInputProps): h.JSX.Element; +export declare namespace IroInput { + var defaultProps: { + disabled: boolean; + }; +} +export {}; diff --git a/dist/iro.es.js b/dist/iro.es.js index 3b292c6..e688db1 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -20,6 +20,9 @@ function _defineProperties(target, props) { function _createClass(Constructor, protoProps, staticProps) { if (protoProps) { _defineProperties(Constructor.prototype, protoProps); } if (staticProps) { _defineProperties(Constructor, staticProps); } + Object.defineProperty(Constructor, "prototype", { + writable: false + }); return Constructor; } @@ -118,9 +121,7 @@ function intToHex(_int) { return _int.toString(16).padStart(2, '0'); } -var IroColor = -/*#__PURE__*/ -function () { +var IroColor = /*#__PURE__*/function () { /** * @constructor Color object * @param value - initial color value @@ -829,6 +830,90 @@ function getSliderValueFromInput(props, x, y) { return percent; } } +/** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ + +function clampSliderValue(type, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (type) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + // TODO + return 0; + } +} +/** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + +function getSliderValueFromInputField(props, e) { + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return 0; + } + + var maxlen; + + if (props.sliderType === 'alpha') { + maxlen = 4; + } else if (props.sliderType === 'kelvin') { + maxlen = 10; + } else { + maxlen = 3; + } + + var target = e.target; + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + } + + var valueNum = +valueString; + return clampSliderValue(props.sliderType, valueNum); +} +/** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + +function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props.sliderType, valueNum); +} /** * @desc Get the current handle position for a given color * @param props - slider props @@ -986,8 +1071,8 @@ function translateWheelAngle(props, angle, invert) { if (invert && wheelDirection === 'clockwise') { angle = wheelAngle + angle; } // clockwise (input handling) else if (wheelDirection === 'clockwise') { angle = 360 - wheelAngle + angle; } // inverted and anticlockwise - else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling) - else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; } + else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling) + else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; } return mod(angle, 360); } /** @@ -1307,6 +1392,48 @@ IroHandle.defaultProps = { var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmount;function l$1(t,r){l.__h&&l.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$1(n){return o$1=1,p(w$1,n)}function p(n,r,o){var i=l$1(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u$1),i.__}function _$1(n,u){var r=l$1(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o$1=8,_$1(function(){return n},t)}function x$1(){for(var t;t=i.shift();){ if(t.__P){ try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],l.__e(u,t.__v);} } }}l.__b=function(n){u$1=null,c$1&&c$1(n);},l.__r=function(n){f$1&&f$1(n),t$1=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},l.diffed=function(t){e$1&&e$1(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r$1===l.requestAnimationFrame||((r$1=l.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b$1&&(t=requestAnimationFrame(u));})(x$1)),u$1=null;},l.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l.__e(r,t.__v);}}),a$1&&a$1(t,u);},l.unmount=function(t){v$1&&v$1(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g$1(n);}catch(n$1){u=n$1;}}),u&&l.__e(u,r.__v));};var b$1="function"==typeof requestAnimationFrame;function g$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function j$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t} +function IroInput(props) { + var disabled = props.disabled; + var type = props.sliderType; + var name = type[0].toUpperCase(); + var activeColor = props.activeColor; + var ref = m$1(activeColor[props.sliderType]); + var sliderValue = ref[0]; + var setSliderValue = ref[1]; + var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); + setSliderValue(val); + var onKeypress = A(function (e) { + e.preventDefault(); + var value = getSliderValueFromInputField(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + var onPaste = A(function (e) { + e.preventDefault(); + var value = getSliderValueFromClipboard(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + return (v("div", { className: "IroSliderValue" }, + v("span", { className: "IroSliderLabel", style: { + display: 'inline-block', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(props.handleRadius) : cssValue(0), + width: cssValue(10) + } }, name), + v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { + display: 'inline-block', + width: cssValue(33), + height: cssValue(18), + fontSize: '12px', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(5) : cssValue(0) + }, type: "text", disabled: disabled, value: sliderValue }))); +} +IroInput.defaultProps = { + disabled: false +}; + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1316,69 +1443,12 @@ function IroSlider(props) { var radius = ref.radius; var handlePos = getSliderHandlePosition(props, activeColor); var gradient = getSliderGradient(props, activeColor); - var ref$1 = m$1(activeColor[props.sliderType]); - var sliderValue = ref$1[0]; - var setSliderValue = ref$1[1]; - setSliderValue(activeColor[props.sliderType]); function handleInput(x, y, type) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; - if (props.sliderType === 'alpha') { - setSliderValue(value.toFixed(2)); - } - else { - setSliderValue(Math.round(value)); - } props.onInput(type, props.id); } - var handleSliderValue = A(function (e) { - e.preventDefault(); - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return; - } - var maxlen; - if (props.sliderType === 'alpha') { - maxlen = 4; - } - else if (props.sliderType === 'kelvin') { - maxlen = 10; - } - else { - maxlen = 3; - } - var value = e.target.value.toString(); - var valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); - var clampedValue; - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - switch (props.sliderType) { - case 'hue': - clampedValue = clamp(+valueString, 0, 360); - break; - case 'saturation': - case 'value': - clampedValue = clamp(+valueString, 0, 100); - break; - case 'red': - case 'green': - case 'blue': - clampedValue = clamp(+valueString, 0, 255); - break; - case 'alpha': - if (valueString === '0.') { - clampedValue = 0.01; - } - else { - clampedValue = clamp(+valueString, 0, 1); - } - break; - } - activeColor[props.sliderType] = +clampedValue; - return clampedValue; - }, [setSliderValue, props.sliderType]); return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( // add wrapper element v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', @@ -1404,20 +1474,7 @@ function IroSlider(props) { background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - v("span", { className: "IroSliderLabel", style: { - display: props.showInput ? 'block' : 'none', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(props.handleRadius) : cssValue(0), - width: cssValue(10) - } }, props.sliderType[0].toUpperCase()), - v("input", { onKeyPress: handleSliderValue, className: "IroSliderInput", style: { - display: props.showInput ? 'block' : 'none', - width: cssValue(33), - height: cssValue(18), - fontSize: '12px', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(5) : cssValue(0) - }, type: "text", disabled: props.disabled, value: sliderValue }))); })); + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); diff --git a/dist/iro.js b/dist/iro.js index 2990676..d0ac22c 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -26,6 +26,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) { _defineProperties(Constructor.prototype, protoProps); } if (staticProps) { _defineProperties(Constructor, staticProps); } + Object.defineProperty(Constructor, "prototype", { + writable: false + }); return Constructor; } @@ -124,9 +127,7 @@ return _int.toString(16).padStart(2, '0'); } - var IroColor = - /*#__PURE__*/ - function () { + var IroColor = /*#__PURE__*/function () { /** * @constructor Color object * @param value - initial color value @@ -835,6 +836,90 @@ return percent; } } + /** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ + + function clampSliderValue(type, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (type) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + // TODO + return 0; + } + } + /** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + + function getSliderValueFromInputField(props, e) { + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return 0; + } + + var maxlen; + + if (props.sliderType === 'alpha') { + maxlen = 4; + } else if (props.sliderType === 'kelvin') { + maxlen = 10; + } else { + maxlen = 3; + } + + var target = e.target; + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + } + + var valueNum = +valueString; + return clampSliderValue(props.sliderType, valueNum); + } + /** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + + function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props.sliderType, valueNum); + } /** * @desc Get the current handle position for a given color * @param props - slider props @@ -992,8 +1077,8 @@ if (invert && wheelDirection === 'clockwise') { angle = wheelAngle + angle; } // clockwise (input handling) else if (wheelDirection === 'clockwise') { angle = 360 - wheelAngle + angle; } // inverted and anticlockwise - else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling) - else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; } + else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling) + else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; } return mod(angle, 360); } /** @@ -1313,6 +1398,48 @@ var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmount;function l$1(t,r){l.__h&&l.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$1(n){return o$1=1,p(w$1,n)}function p(n,r,o){var i=l$1(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u$1),i.__}function _$1(n,u){var r=l$1(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o$1=8,_$1(function(){return n},t)}function x$1(){for(var t;t=i.shift();){ if(t.__P){ try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],l.__e(u,t.__v);} } }}l.__b=function(n){u$1=null,c$1&&c$1(n);},l.__r=function(n){f$1&&f$1(n),t$1=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},l.diffed=function(t){e$1&&e$1(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r$1===l.requestAnimationFrame||((r$1=l.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b$1&&(t=requestAnimationFrame(u));})(x$1)),u$1=null;},l.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l.__e(r,t.__v);}}),a$1&&a$1(t,u);},l.unmount=function(t){v$1&&v$1(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g$1(n);}catch(n$1){u=n$1;}}),u&&l.__e(u,r.__v));};var b$1="function"==typeof requestAnimationFrame;function g$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function j$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t} + function IroInput(props) { + var disabled = props.disabled; + var type = props.sliderType; + var name = type[0].toUpperCase(); + var activeColor = props.activeColor; + var ref = m$1(activeColor[props.sliderType]); + var sliderValue = ref[0]; + var setSliderValue = ref[1]; + var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); + setSliderValue(val); + var onKeypress = A(function (e) { + e.preventDefault(); + var value = getSliderValueFromInputField(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + var onPaste = A(function (e) { + e.preventDefault(); + var value = getSliderValueFromClipboard(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + return (v("div", { className: "IroSliderValue" }, + v("span", { className: "IroSliderLabel", style: { + display: 'inline-block', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(props.handleRadius) : cssValue(0), + width: cssValue(10) + } }, name), + v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { + display: 'inline-block', + width: cssValue(33), + height: cssValue(18), + fontSize: '12px', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(5) : cssValue(0) + }, type: "text", disabled: disabled, value: sliderValue }))); + } + IroInput.defaultProps = { + disabled: false + }; + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1322,69 +1449,12 @@ var radius = ref.radius; var handlePos = getSliderHandlePosition(props, activeColor); var gradient = getSliderGradient(props, activeColor); - var ref$1 = m$1(activeColor[props.sliderType]); - var sliderValue = ref$1[0]; - var setSliderValue = ref$1[1]; - setSliderValue(activeColor[props.sliderType]); function handleInput(x, y, type) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; - if (props.sliderType === 'alpha') { - setSliderValue(value.toFixed(2)); - } - else { - setSliderValue(Math.round(value)); - } props.onInput(type, props.id); } - var handleSliderValue = A(function (e) { - e.preventDefault(); - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return; - } - var maxlen; - if (props.sliderType === 'alpha') { - maxlen = 4; - } - else if (props.sliderType === 'kelvin') { - maxlen = 10; - } - else { - maxlen = 3; - } - var value = e.target.value.toString(); - var valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); - var clampedValue; - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - switch (props.sliderType) { - case 'hue': - clampedValue = clamp(+valueString, 0, 360); - break; - case 'saturation': - case 'value': - clampedValue = clamp(+valueString, 0, 100); - break; - case 'red': - case 'green': - case 'blue': - clampedValue = clamp(+valueString, 0, 255); - break; - case 'alpha': - if (valueString === '0.') { - clampedValue = 0.01; - } - else { - clampedValue = clamp(+valueString, 0, 1); - } - break; - } - activeColor[props.sliderType] = +clampedValue; - return clampedValue; - }, [setSliderValue, props.sliderType]); return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( // add wrapper element v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', @@ -1410,20 +1480,7 @@ background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - v("span", { className: "IroSliderLabel", style: { - display: props.showInput ? 'block' : 'none', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(props.handleRadius) : cssValue(0), - width: cssValue(10) - } }, props.sliderType[0].toUpperCase()), - v("input", { onKeyPress: handleSliderValue, className: "IroSliderInput", style: { - display: props.showInput ? 'block' : 'none', - width: cssValue(33), - height: cssValue(18), - fontSize: '12px', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(5) : cssValue(0) - }, type: "text", disabled: props.disabled, value: sliderValue }))); })); + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); diff --git a/dist/iro.min.js b/dist/iro.min.js index 79dc611..1842344 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,T,n,$,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function v(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=i/n?r=o:e=o}return o},i=s,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return s.rgbToKelvin(this.rgb)},set:function(t){this.rgb=s.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=s.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:l(n),g:l(i),b:l(t)}},set:function(t){this.hsv=r({},s.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=s.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:l(n),s:l(i),l:l(t)}},set:function(t){this.hsv=r({},s.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+d(t.r)+d(t.g)+d(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*h(n[1]),e=17*h(n[2]),r=17*h(n[3])):(n=et.exec(t))?(i=17*h(n[1]),e=17*h(n[2]),r=17*h(n[3]),o=17*h(n[4])):(n=rt.exec(t))?(i=h(n[1]),e=h(n[2]),r=h(n[3])):(n=ot.exec(t))&&(i=h(n[1]),e=h(n[2]),r=h(n[3]),o=h(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+d(t.r)+d(t.g)+d(t.b)+d(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&V(i.prototype,t),n&&V(i,n),s}();function p(t){var n=t.width,i=t.sliderSize,e=t.borderWidth,r=t.handleRadius,o=t.padding,u=t.sliderShape,s="horizontal"===t.layoutDirection,i=null!=i?i:2*o+2*r;return"circle"===u?{handleStart:t.padding+t.handleRadius,handleRange:n-2*o-2*r,width:n,height:n,cx:n/2,cy:n/2,radius:n/2-e/2}:{handleStart:i/2,handleRange:n-i,radius:i/2,x:0,y:0,width:s?i:n,height:s?n:i}}function ut(t,n){var i=p(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){return(t%n+n)%n}var lt,ct=2*Math.PI,at=function(t,n){return Math.sqrt(t*t+n*n)};function ft(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function ht(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ft(t),r=(n=r-n,i=e-i,ht(t,Math.atan2(-i,-n)*(360/ct))),e=Math.min(at(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function dt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=dt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function pt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function _t(t){return N=1,n=Ht,t=t,(e=St(wt++,2)).t=n,e.c||(e.i=[i?i(t):Ht(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=s),e.i;var n,i,e}function Rt(t,n){return N=8,i=function(){return t},n=n,o=St(wt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=xt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(zt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){s=null,Mt&&Mt(t)},x.p=function(t){jt&&jt(t),wt=0;t=(s=t.c).I;t&&(t.f.forEach(E),t.f.forEach(zt),t.f=[])},x.diffed=function(t){It&&It(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==xt.push(t)&&kt===x.requestAnimationFrame||((kt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),s=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||zt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),Ot&&Ot(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function E(t){var n=s,i=t.c;"function"==typeof i&&(t.c=void 0,i()),s=n}function zt(t){var n=s;t.c=t.i(),s=n}function Ht(t,n){return"function"==typeof n?n(t):n}function z(u){var t=u.activeIndex,s=void 0!==t&&ti?e:e+t.key.toString();switch(u.sliderType){case"hue":n=o(+r,0,360);break;case"saturation":case"value":n=o(+r,0,100);break;case"red":case"green":case"blue":n=o(+r,0,255);break;case"alpha":n="0."===r?.01:o(+r,0,1)}return s[u.sliderType]=+n,n}function o(t,n,i){return Math.min(Math.max(t,n),i)}},[f,u.sliderType]);return v(_,Object.assign({},u,{onInput:function(t,n,i){t=function(t,n,i){var e=(r=p(t)).handleRange,r=r.handleStart,i="horizontal"===t.layoutDirection?-1*i+e+r:n-r,o=(i=Math.max(Math.min(i,e),0),Math.round(100/e*i));switch(t.sliderType){case"kelvin":var u=t.minTemperature;return u+o/100*(t.maxTemperature-u);case"alpha":return o/100;case"hue":return 3.6*o;case"red":case"blue":case"green":return 2.55*o;default:return o}}(u,t,n),u.parent.inputActive=!0,s[u.sliderType]=t,"alpha"===u.sliderType?f(t.toFixed(2)):f(Math.round(t)),u.onInput(i,u.id)}}),function(t,n,i){return v("div",{className:"IroSliderWrapper",style:Object.assign({},{width:"max-content",flexDirection:"horizontal"===u.layoutDirection?"column":"row",alignItems:"baseline"},i)},v("div",Object.assign({},n,{className:"IroSlider",style:{position:"relative",display:"block",width:y(e),height:y(r),borderRadius:y(o),background:"conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0)",backgroundSize:"8px 8px"}}),v("div",{className:"IroSliderGradient",style:Object.assign({},{position:"absolute",top:0,left:0,width:"100%",height:"100%",borderRadius:y(o),background:yt("linear","horizontal"===u.layoutDirection?"to top":"to right",c)},bt(u))}),v(R,{isActive:!0,index:s.index,r:u.handleRadius,url:u.handleSvg,props:u.handleProps,x:l.x,y:l.y})),v("span",{className:"IroSliderLabel",style:{display:u.showInput?"block":"none",marginLeft:"vertical"===u.layoutDirection?y(u.handleRadius):"0px",width:"10px"}},u.sliderType[0].toUpperCase()),v("input",{onKeyPress:h,className:"IroSliderInput",style:{display:u.showInput?"block":"none",width:"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===u.layoutDirection?"5px":"0px"},type:"text",disabled:u.disabled,value:a}))})}function Pt(r){var t=dt(r),e=t.width,o=t.height,u=t.radius,s=r.colors,l=r.parent,t=r.activeIndex,c=void 0!==t&&t=i/n?r=o:e=o}return o},i=l,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},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=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:s(n),g:s(i),b:s(t)}},set:function(t){this.hsv=r({},l.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return r({},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,t=t.l;return{h:s(n),s:s(i),l:s(t)}},set:function(t){this.hsv=r({},l.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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,e,r,o=255;if((n=it.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3])):(n=et.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3]),o=17*d(n[4])):(n=rt.exec(t))?(i=d(n[1]),e=d(n[2]),r=d(n[3])):(n=ot.exec(t))&&(i=d(n[1]),e=d(n[2]),r=d(n[3]),o=d(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+v(t.r)+v(t.g)+v(t.b)+v(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),l}();function g(t){var n=t.width,i=t.sliderSize,e=t.borderWidth,r=t.handleRadius,o=t.padding,u=t.sliderShape,l="horizontal"===t.layoutDirection,i=null!=i?i:2*o+2*r;return"circle"===u?{handleStart:t.padding+t.handleRadius,handleRange:n-2*o-2*r,width:n,height:n,cx:n/2,cy:n/2,radius:n/2-e/2}:{handleStart:i/2,handleRange:n-i,radius:i/2,x:0,y:0,width:l?i:n,height:l?n:i}}function ut(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return 0}}function lt(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Tt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Tt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=l),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(Pt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){l=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(l=t.c).I;t&&(t.f.forEach(E),t.f.forEach(Pt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),l=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Pt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=l,i=t.c;"function"==typeof i&&(t.c=void 0,i()),l=n}function Pt(t){var n=l;t.c=t.i(),l=n}function Tt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],n=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?10:3,e=n.target,r=e.value.toString(),r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString();return ut(t.sliderType,+r)}(i,t);return r[i.sliderType]=t},[o,i.sliderType])),o=Nt(function(t){t.preventDefault();n=i,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?ut(n.sliderType,+t):0;return r[i.sliderType]=n},[o,i.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===i.layoutDirection?y(i.handleRadius):"0px",width:"10px"}},e),h("input",{onKeyPress:n,onPaste:o,className:"IroSliderInput",style:{display:"inline-block",width:"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===i.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:u}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t maxlen ? valueString : valueString + e.key.toString(); + } + + var valueNum = +valueString; + return clampSliderValue(props.sliderType, valueNum); +} +/** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + +function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props.sliderType, valueNum); +} /** * @desc Get the current handle position for a given color * @param props - slider props @@ -986,8 +1071,8 @@ function translateWheelAngle(props, angle, invert) { if (invert && wheelDirection === 'clockwise') { angle = wheelAngle + angle; } // clockwise (input handling) else if (wheelDirection === 'clockwise') { angle = 360 - wheelAngle + angle; } // inverted and anticlockwise - else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling) - else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; } + else if (invert && wheelDirection === 'anticlockwise') { angle = wheelAngle + 180 - angle; } // anticlockwise (input handling) + else if (wheelDirection === 'anticlockwise') { angle = wheelAngle - angle; } return mod(angle, 360); } /** @@ -1307,6 +1392,48 @@ IroHandle.defaultProps = { var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmount;function l$1(t,r){l.__h&&l.__h(u$1,t,o$1||r),o$1=0;var i=u$1.__H||(u$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({}),i.__[t]}function m$1(n){return o$1=1,p(w$1,n)}function p(n,r,o){var i=l$1(t$1++,2);return i.t=n,i.__c||(i.__=[o?o(r):w$1(void 0,r),function(n){var t=i.t(i.__[0],n);i.__[0]!==t&&(i.__=[t,i.__[1]],i.__c.setState({}));}],i.__c=u$1),i.__}function _$1(n,u){var r=l$1(t$1++,7);return k$1(r.__H,u)&&(r.__=n(),r.__H=u,r.__h=n),r.__}function A(n,t){return o$1=8,_$1(function(){return n},t)}function x$1(){for(var t;t=i.shift();){ if(t.__P){ try{t.__H.__h.forEach(g$1),t.__H.__h.forEach(j$1),t.__H.__h=[];}catch(u){t.__H.__h=[],l.__e(u,t.__v);} } }}l.__b=function(n){u$1=null,c$1&&c$1(n);},l.__r=function(n){f$1&&f$1(n),t$1=0;var r=(u$1=n.__c).__H;r&&(r.__h.forEach(g$1),r.__h.forEach(j$1),r.__h=[]);},l.diffed=function(t){e$1&&e$1(t);var o=t.__c;o&&o.__H&&o.__H.__h.length&&(1!==i.push(o)&&r$1===l.requestAnimationFrame||((r$1=l.requestAnimationFrame)||function(n){var t,u=function(){clearTimeout(r),b$1&&cancelAnimationFrame(t),setTimeout(n);},r=setTimeout(u,100);b$1&&(t=requestAnimationFrame(u));})(x$1)),u$1=null;},l.__c=function(t,u){u.some(function(t){try{t.__h.forEach(g$1),t.__h=t.__h.filter(function(n){return !n.__||j$1(n)});}catch(r){u.some(function(n){n.__h&&(n.__h=[]);}),u=[],l.__e(r,t.__v);}}),a$1&&a$1(t,u);},l.unmount=function(t){v$1&&v$1(t);var u,r=t.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{g$1(n);}catch(n$1){u=n$1;}}),u&&l.__e(u,r.__v));};var b$1="function"==typeof requestAnimationFrame;function g$1(n){var t=u$1,r=n.__c;"function"==typeof r&&(n.__c=void 0,r()),u$1=t;}function j$1(n){var t=u$1;n.__c=n.__(),u$1=t;}function k$1(n,t){return !n||n.length!==t.length||t.some(function(t,u){return t!==n[u]})}function w$1(n,t){return "function"==typeof t?t(n):t} +function IroInput(props) { + var disabled = props.disabled; + var type = props.sliderType; + var name = type[0].toUpperCase(); + var activeColor = props.activeColor; + var ref = m$1(activeColor[props.sliderType]); + var sliderValue = ref[0]; + var setSliderValue = ref[1]; + var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); + setSliderValue(val); + var onKeypress = A(function (e) { + e.preventDefault(); + var value = getSliderValueFromInputField(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + var onPaste = A(function (e) { + e.preventDefault(); + var value = getSliderValueFromClipboard(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + return (v("div", { className: "IroSliderValue" }, + v("span", { className: "IroSliderLabel", style: { + display: 'inline-block', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(props.handleRadius) : cssValue(0), + width: cssValue(10) + } }, name), + v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { + display: 'inline-block', + width: cssValue(33), + height: cssValue(18), + fontSize: '12px', + marginLeft: props.layoutDirection === 'vertical' ? + cssValue(5) : cssValue(0) + }, type: "text", disabled: disabled, value: sliderValue }))); +} +IroInput.defaultProps = { + disabled: false +}; + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1316,69 +1443,12 @@ function IroSlider(props) { var radius = ref.radius; var handlePos = getSliderHandlePosition(props, activeColor); var gradient = getSliderGradient(props, activeColor); - var ref$1 = m$1(activeColor[props.sliderType]); - var sliderValue = ref$1[0]; - var setSliderValue = ref$1[1]; - setSliderValue(activeColor[props.sliderType]); function handleInput(x, y, type) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; - if (props.sliderType === 'alpha') { - setSliderValue(value.toFixed(2)); - } - else { - setSliderValue(Math.round(value)); - } props.onInput(type, props.id); } - var handleSliderValue = A(function (e) { - e.preventDefault(); - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return; - } - var maxlen; - if (props.sliderType === 'alpha') { - maxlen = 4; - } - else if (props.sliderType === 'kelvin') { - maxlen = 10; - } - else { - maxlen = 3; - } - var value = e.target.value.toString(); - var valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); - var clampedValue; - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - switch (props.sliderType) { - case 'hue': - clampedValue = clamp(+valueString, 0, 360); - break; - case 'saturation': - case 'value': - clampedValue = clamp(+valueString, 0, 100); - break; - case 'red': - case 'green': - case 'blue': - clampedValue = clamp(+valueString, 0, 255); - break; - case 'alpha': - if (valueString === '0.') { - clampedValue = 0.01; - } - else { - clampedValue = clamp(+valueString, 0, 1); - } - break; - } - activeColor[props.sliderType] = +clampedValue; - return clampedValue; - }, [setSliderValue, props.sliderType]); return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( // add wrapper element v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', @@ -1404,20 +1474,7 @@ function IroSlider(props) { background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - v("span", { className: "IroSliderLabel", style: { - display: props.showInput ? 'block' : 'none', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(props.handleRadius) : cssValue(0), - width: cssValue(10) - } }, props.sliderType[0].toUpperCase()), - v("input", { onKeyPress: handleSliderValue, className: "IroSliderInput", style: { - display: props.showInput ? 'block' : 'none', - width: cssValue(33), - height: cssValue(18), - fontSize: '12px', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(5) : cssValue(0) - }, type: "text", disabled: props.disabled, value: sliderValue }))); })); + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); diff --git a/package.json b/package.json index c40d5b1..0597179 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "main": "dist/iro.js", "types": "dist/index.d.ts", "dependencies": { - "@irojs/iro-core": "^1.2.1", + "@irojs/iro-core": "file:../iro-core", "preact": "^10.0.0" }, "devDependencies": { diff --git a/src/Input.tsx b/src/Input.tsx new file mode 100644 index 0000000..6e24958 --- /dev/null +++ b/src/Input.tsx @@ -0,0 +1,80 @@ +import { h } from 'preact'; +import { cssValue, LayoutDirection } from '@irojs/iro-core'; +import { useCallback, useState } from 'preact/hooks'; +import { + IroColor, + SliderType, + getSliderValueFromInputField, + getSliderValueFromClipboard +} from '@irojs/iro-core'; + +interface IroInputProps { + sliderType: SliderType; + activeColor: IroColor; + layoutDirection: LayoutDirection; + handleRadius: number; + disabled: boolean; + // minTemperature: number; + // maxTemperature: number; +} + +export function IroInput(props: IroInputProps) { + const disabled = props.disabled; + const type = props.sliderType; + const name = type[0].toUpperCase(); + const activeColor = props.activeColor; + const [sliderValue, setSliderValue] = useState(activeColor[props.sliderType]); + const val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); + setSliderValue(val); + + const onKeypress = useCallback((e: KeyboardEvent) => { + e.preventDefault(); + const value = getSliderValueFromInputField(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + + const onPaste = useCallback((e: ClipboardEvent) => { + e.preventDefault(); + const value = getSliderValueFromClipboard(props, e); + activeColor[props.sliderType] = value; + return value; + }, [setSliderValue, props.sliderType]); + + return ( +
+ + {name} + + + +
+ ); +} + +IroInput.defaultProps = { + disabled: false +}; \ No newline at end of file diff --git a/src/Slider.tsx b/src/Slider.tsx index 1193739..d93c602 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -1,12 +1,11 @@ import { h } from 'preact'; -import { useCallback, useState } from 'preact/hooks'; import { IroColor, SliderShape, SliderType, sliderDefaultOptions, getSliderDimensions, - getSliderValueFromInput, + getSliderValueFromInput, getSliderHandlePosition, getSliderGradient, cssBorderStyles, @@ -17,6 +16,7 @@ import { import { IroComponentWrapper } from './ComponentWrapper'; import { IroComponentProps, IroInputType } from './ComponentTypes'; import { IroHandle } from './Handle'; +import { IroInput } from './Input'; interface IroSliderProps extends IroComponentProps { sliderType: SliderType; @@ -33,71 +33,14 @@ export function IroSlider(props: IroSliderProps) { const { width, height, radius } = getSliderDimensions(props); const handlePos = getSliderHandlePosition(props, activeColor); const gradient = getSliderGradient(props, activeColor); - const [sliderValue, setSliderValue] = useState(activeColor[props.sliderType]); - setSliderValue(activeColor[props.sliderType]) function handleInput(x: number, y: number, type: IroInputType) { const value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; - if (props.sliderType === 'alpha') { - setSliderValue(value.toFixed(2)); - } else { - setSliderValue(Math.round(value)); - } props.onInput(type, props.id); } - const handleSliderValue = useCallback((e) => { - e.preventDefault(); - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return; - } - - let maxlen: number; - if (props.sliderType === 'alpha') { - maxlen = 4; - } else if (props.sliderType === 'kelvin') { - maxlen = 10; - } else { - maxlen = 3; - } - const value = (e.target as HTMLInputElement).value.toString(); - const valueString = value.length + 1 > maxlen ? value : value + e.key.toString(); - let clampedValue: number; - - function clamp(num: number, min: number, max: number) { - return Math.min(Math.max(num, min), max); - } - - switch(props.sliderType) { - case 'hue': - clampedValue = clamp(+valueString, 0, 360); - break; - case 'saturation': - case 'value': - clampedValue = clamp(+valueString, 0, 100); - break; - case 'red': - case 'green': - case 'blue': - clampedValue = clamp(+valueString, 0, 255); - break; - case 'alpha': - if (valueString === '0.') { - clampedValue = 0.01; - } else { - clampedValue = clamp(+valueString, 0, 1); - } - break; - case 'kelvin': // TODO - break; - } - activeColor[props.sliderType] = +clampedValue; - return clampedValue; - }, [setSliderValue, props.sliderType]); - return ( {(uid, rootProps, rootStyles) => ( @@ -152,33 +95,15 @@ export function IroSlider(props: IroSliderProps) { y={ handlePos.y } // todo: use percentage />
- - {props.sliderType[0].toUpperCase()} - - - + {props.showInput && ( + + )} )} From 983814af1614f8361219752592575a17bc73fce9 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Thu, 14 Apr 2022 11:07:51 +0200 Subject: [PATCH 03/11] add minTemperature and maxTemperature to Input props --- dist/Input.d.ts | 2 + dist/iro.es.js | 178 +++++++++++++++--------------- dist/iro.js | 178 +++++++++++++++--------------- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 178 +++++++++++++++--------------- src/Input.tsx | 6 +- src/Slider.tsx | 2 + 7 files changed, 278 insertions(+), 268 deletions(-) diff --git a/dist/Input.d.ts b/dist/Input.d.ts index 19cd3bc..c43e7a3 100644 --- a/dist/Input.d.ts +++ b/dist/Input.d.ts @@ -7,6 +7,8 @@ interface IroInputProps { layoutDirection: LayoutDirection; handleRadius: number; disabled: boolean; + minTemperature: number; + maxTemperature: number; } export declare function IroInput(props: IroInputProps): h.JSX.Element; export declare namespace IroInput { diff --git a/dist/iro.es.js b/dist/iro.es.js index e688db1..94bd2cd 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -508,7 +508,7 @@ var IroColor = /*#__PURE__*/function () { }, set: function set(value) { this.hsv = _extends({}, IroColor.rgbToHsv(value), { - a: value.a === undefined ? 1 : value.a + a: value.a === undefined ? this.alpha : value.a }); } }, { @@ -537,7 +537,7 @@ var IroColor = /*#__PURE__*/function () { }, set: function set(value) { this.hsv = _extends({}, IroColor.hslToHsv(value), { - a: value.a === undefined ? 1 : value.a + a: value.a === undefined ? this.alpha : value.a }); } }, { @@ -830,90 +830,6 @@ function getSliderValueFromInput(props, x, y) { return percent; } } -/** - * @desc Clamp slider value between min and max values - * @param type - props.sliderType - * @param value - value to clamp - */ - -function clampSliderValue(type, value) { - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - - switch (type) { - case 'hue': - return clamp(value, 0, 360); - - case 'saturation': - case 'value': - return clamp(value, 0, 100); - - case 'red': - case 'green': - case 'blue': - return clamp(value, 0, 255); - - case 'alpha': - return clamp(value, 0, 1); - - case 'kelvin': - // TODO - return 0; - } -} -/** - * @desc Get the current slider value from input field input - * @param props - slider props - * @param e - KeyboardEvent - */ - -function getSliderValueFromInputField(props, e) { - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return 0; - } - - var maxlen; - - if (props.sliderType === 'alpha') { - maxlen = 4; - } else if (props.sliderType === 'kelvin') { - maxlen = 10; - } else { - maxlen = 3; - } - - var target = e.target; - var valueString = target.value.toString(); - - if (target.selectionStart !== undefined) { - valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); - } else { - valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); - } - - var valueNum = +valueString; - return clampSliderValue(props.sliderType, valueNum); -} -/** - * @desc Get the current slider value from clipboard data - * @param props - slider props - * @param e - ClipboardEvent - */ - -function getSliderValueFromClipboard(props, e) { - // allow only whole or decimal numbers - var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; - var valueString = e.clipboardData.getData('text'); - - if (!r.test(valueString)) { - return 0; - } - - var valueNum = +valueString; - return clampSliderValue(props.sliderType, valueNum); -} /** * @desc Get the current handle position for a given color * @param props - slider props @@ -1009,6 +925,92 @@ function getSliderGradient(props, color) { } } +/** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ +function clampSliderValue(props, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (props.sliderType) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + // TODO + var minTemperature = props.minTemperature, + maxTemperature = props.maxTemperature; + return clamp(value, minTemperature, maxTemperature); + } +} +/** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + +function getSliderValueFromInputField(props, e) { + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return 0; + } + + var maxlen; + + if (props.sliderType === 'alpha') { + maxlen = 4; + } else if (props.sliderType === 'kelvin') { + maxlen = 5; + } else { + maxlen = 3; + } + + var target = e.target; + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); +} +/** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + +function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); +} + var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e @@ -1423,7 +1425,7 @@ function IroInput(props) { } }, name), v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { display: 'inline-block', - width: cssValue(33), + width: type === 'kelvin' ? cssValue(40) : cssValue(33), height: cssValue(18), fontSize: '12px', marginLeft: props.layoutDirection === 'vertical' ? @@ -1474,7 +1476,7 @@ function IroSlider(props) { background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); })); + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); diff --git a/dist/iro.js b/dist/iro.js index d0ac22c..b6824e0 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -514,7 +514,7 @@ }, set: function set(value) { this.hsv = _extends({}, IroColor.rgbToHsv(value), { - a: value.a === undefined ? 1 : value.a + a: value.a === undefined ? this.alpha : value.a }); } }, { @@ -543,7 +543,7 @@ }, set: function set(value) { this.hsv = _extends({}, IroColor.hslToHsv(value), { - a: value.a === undefined ? 1 : value.a + a: value.a === undefined ? this.alpha : value.a }); } }, { @@ -836,90 +836,6 @@ return percent; } } - /** - * @desc Clamp slider value between min and max values - * @param type - props.sliderType - * @param value - value to clamp - */ - - function clampSliderValue(type, value) { - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - - switch (type) { - case 'hue': - return clamp(value, 0, 360); - - case 'saturation': - case 'value': - return clamp(value, 0, 100); - - case 'red': - case 'green': - case 'blue': - return clamp(value, 0, 255); - - case 'alpha': - return clamp(value, 0, 1); - - case 'kelvin': - // TODO - return 0; - } - } - /** - * @desc Get the current slider value from input field input - * @param props - slider props - * @param e - KeyboardEvent - */ - - function getSliderValueFromInputField(props, e) { - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return 0; - } - - var maxlen; - - if (props.sliderType === 'alpha') { - maxlen = 4; - } else if (props.sliderType === 'kelvin') { - maxlen = 10; - } else { - maxlen = 3; - } - - var target = e.target; - var valueString = target.value.toString(); - - if (target.selectionStart !== undefined) { - valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); - } else { - valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); - } - - var valueNum = +valueString; - return clampSliderValue(props.sliderType, valueNum); - } - /** - * @desc Get the current slider value from clipboard data - * @param props - slider props - * @param e - ClipboardEvent - */ - - function getSliderValueFromClipboard(props, e) { - // allow only whole or decimal numbers - var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; - var valueString = e.clipboardData.getData('text'); - - if (!r.test(valueString)) { - return 0; - } - - var valueNum = +valueString; - return clampSliderValue(props.sliderType, valueNum); - } /** * @desc Get the current handle position for a given color * @param props - slider props @@ -1015,6 +931,92 @@ } } + /** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ + function clampSliderValue(props, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (props.sliderType) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + // TODO + var minTemperature = props.minTemperature, + maxTemperature = props.maxTemperature; + return clamp(value, minTemperature, maxTemperature); + } + } + /** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + + function getSliderValueFromInputField(props, e) { + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return 0; + } + + var maxlen; + + if (props.sliderType === 'alpha') { + maxlen = 4; + } else if (props.sliderType === 'kelvin') { + maxlen = 5; + } else { + maxlen = 3; + } + + var target = e.target; + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); + } + /** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + + function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); + } + var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e @@ -1429,7 +1431,7 @@ } }, name), v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { display: 'inline-block', - width: cssValue(33), + width: type === 'kelvin' ? cssValue(40) : cssValue(33), height: cssValue(18), fontSize: '12px', marginLeft: props.layoutDirection === 'vertical' ? @@ -1480,7 +1482,7 @@ background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); })); + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); diff --git a/dist/iro.min.js b/dist/iro.min.js index 1842344..308a774 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,$,n,H,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=i/n?r=o:e=o}return o},i=l,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},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=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:s(n),g:s(i),b:s(t)}},set:function(t){this.hsv=r({},l.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return r({},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,t=t.l;return{h:s(n),s:s(i),l:s(t)}},set:function(t){this.hsv=r({},l.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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,e,r,o=255;if((n=it.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3])):(n=et.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3]),o=17*d(n[4])):(n=rt.exec(t))?(i=d(n[1]),e=d(n[2]),r=d(n[3])):(n=ot.exec(t))&&(i=d(n[1]),e=d(n[2]),r=d(n[3]),o=d(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+v(t.r)+v(t.g)+v(t.b)+v(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),l}();function g(t){var n=t.width,i=t.sliderSize,e=t.borderWidth,r=t.handleRadius,o=t.padding,u=t.sliderShape,l="horizontal"===t.layoutDirection,i=null!=i?i:2*o+2*r;return"circle"===u?{handleStart:t.padding+t.handleRadius,handleRange:n-2*o-2*r,width:n,height:n,cx:n/2,cy:n/2,radius:n/2-e/2}:{handleStart:i/2,handleRange:n-i,radius:i/2,x:0,y:0,width:l?i:n,height:l?n:i}}function ut(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return 0}}function lt(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Tt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Tt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=l),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(Pt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){l=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(l=t.c).I;t&&(t.f.forEach(E),t.f.forEach(Pt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),l=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Pt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=l,i=t.c;"function"==typeof i&&(t.c=void 0,i()),l=n}function Pt(t){var n=l;t.c=t.i(),l=n}function Tt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],n=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?10:3,e=n.target,r=e.value.toString(),r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString();return ut(t.sliderType,+r)}(i,t);return r[i.sliderType]=t},[o,i.sliderType])),o=Nt(function(t){t.preventDefault();n=i,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?ut(n.sliderType,+t):0;return r[i.sliderType]=n},[o,i.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===i.layoutDirection?y(i.handleRadius):"0px",width:"10px"}},e),h("input",{onKeyPress:n,onPaste:o,className:"IroSliderInput",style:{display:"inline-block",width:"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===i.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:u}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t=i/n?r=o:e=o}return o},i=l,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},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=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:s(n),g:s(i),b:s(t)}},set:function(t){this.hsv=r({},l.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"rgba",get:function(){return r({},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,t=t.l;return{h:s(n),s:s(i),l:s(t)}},set:function(t){this.hsv=r({},l.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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,e,r,o=255;if((n=it.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3])):(n=et.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3]),o=17*d(n[4])):(n=rt.exec(t))?(i=d(n[1]),e=d(n[2]),r=d(n[3])):(n=ot.exec(t))&&(i=d(n[1]),e=d(n[2]),r=d(n[3]),o=d(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+v(t.r)+v(t.g)+v(t.b)+v(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),l}();function g(t){var n=t.width,i=t.sliderSize,e=t.borderWidth,r=t.handleRadius,o=t.padding,u=t.sliderShape,l="horizontal"===t.layoutDirection,i=null!=i?i:2*o+2*r;return"circle"===u?{handleStart:t.padding+t.handleRadius,handleRange:n-2*o-2*r,width:n,height:n,cx:n/2,cy:n/2,radius:n/2-e/2}:{handleStart:i/2,handleRange:n-i,radius:i/2,x:0,y:0,width:l?i:n,height:l?n:i}}function ut(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function lt(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function st(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Pt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Pt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=l),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){l=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(l=t.c).I;t&&(t.f.forEach(E),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),l=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=l,i=t.c;"function"==typeof i&&(t.c=void 0,i()),l=n}function Tt(t){var n=l;t.c=t.i(),l=n}function Pt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],l=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return lt(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return r[i.sliderType]=t},[o,i.sliderType])),o=Nt(function(t){t.preventDefault();n=i,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?lt(n,+t):0;return r[i.sliderType]=n},[o,i.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===i.layoutDirection?y(i.handleRadius):"0px",width:"10px"}},e),h("input",{onKeyPress:l,onPaste:o,className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===n?"40px":"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===i.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:u}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t maxlen ? valueString : valueString + e.key.toString(); - } - - var valueNum = +valueString; - return clampSliderValue(props.sliderType, valueNum); -} -/** - * @desc Get the current slider value from clipboard data - * @param props - slider props - * @param e - ClipboardEvent - */ - -function getSliderValueFromClipboard(props, e) { - // allow only whole or decimal numbers - var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; - var valueString = e.clipboardData.getData('text'); - - if (!r.test(valueString)) { - return 0; - } - - var valueNum = +valueString; - return clampSliderValue(props.sliderType, valueNum); -} /** * @desc Get the current handle position for a given color * @param props - slider props @@ -1009,6 +925,92 @@ function getSliderGradient(props, color) { } } +/** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ +function clampSliderValue(props, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (props.sliderType) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + // TODO + var minTemperature = props.minTemperature, + maxTemperature = props.maxTemperature; + return clamp(value, minTemperature, maxTemperature); + } +} +/** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + +function getSliderValueFromInputField(props, e) { + // regex for digit or dot (.) + if (!/^([0-9]|\.)$/i.test(e.key)) { + return 0; + } + + var maxlen; + + if (props.sliderType === 'alpha') { + maxlen = 4; + } else if (props.sliderType === 'kelvin') { + maxlen = 5; + } else { + maxlen = 3; + } + + var target = e.target; + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); +} +/** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + +function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); +} + var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e @@ -1423,7 +1425,7 @@ function IroInput(props) { } }, name), v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { display: 'inline-block', - width: cssValue(33), + width: type === 'kelvin' ? cssValue(40) : cssValue(33), height: cssValue(18), fontSize: '12px', marginLeft: props.layoutDirection === 'vertical' ? @@ -1474,7 +1476,7 @@ function IroSlider(props) { background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection })))); })); + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); diff --git a/src/Input.tsx b/src/Input.tsx index 6e24958..2439b3b 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -14,8 +14,8 @@ interface IroInputProps { layoutDirection: LayoutDirection; handleRadius: number; disabled: boolean; - // minTemperature: number; - // maxTemperature: number; + minTemperature: number; + maxTemperature: number; } export function IroInput(props: IroInputProps) { @@ -60,7 +60,7 @@ export function IroInput(props: IroInputProps) { className="IroSliderInput" style={{ display: 'inline-block', - width: cssValue(33), + width: type === 'kelvin' ? cssValue(40) : cssValue(33), height: cssValue(18), fontSize: '12px', marginLeft: props.layoutDirection === 'vertical' ? diff --git a/src/Slider.tsx b/src/Slider.tsx index d93c602..f64e2ab 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -102,6 +102,8 @@ export function IroSlider(props: IroSliderProps) { activeColor={ activeColor } handleRadius={ props.handleRadius } layoutDirection={ props.layoutDirection } + minTemperature={ props.minTemperature } + maxTemperature={ props.maxTemperature } /> )} From f9a4cb7d0a8891db237d07251ced729ca4a08f8a Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Tue, 19 Apr 2022 09:53:03 +0200 Subject: [PATCH 04/11] update bundled files --- dist/iro.es.js | 16 +++++++++++++--- dist/iro.js | 16 +++++++++++++--- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 16 +++++++++++++--- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/dist/iro.es.js b/dist/iro.es.js index 94bd2cd..fa7ac8d 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -716,6 +716,16 @@ function getSliderDimensions(props) { handleRadius = props.handleRadius, padding = props.padding, sliderShape = props.sliderShape; + var length; + + if (props.showInput) { + length = width - 55; + } else { + var _props$sliderLength; + + length = (_props$sliderLength = props.sliderLength) != null ? _props$sliderLength : width; + } + var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2; @@ -733,12 +743,12 @@ function getSliderDimensions(props) { } else { return { handleStart: sliderSize / 2, - handleRange: width - sliderSize, + handleRange: length - sliderSize, radius: sliderSize / 2, x: 0, y: 0, - width: ishorizontal ? sliderSize : width, - height: ishorizontal ? width : sliderSize + width: ishorizontal ? sliderSize : length, + height: ishorizontal ? length : sliderSize }; } } diff --git a/dist/iro.js b/dist/iro.js index b6824e0..7af6289 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -722,6 +722,16 @@ handleRadius = props.handleRadius, padding = props.padding, sliderShape = props.sliderShape; + var length; + + if (props.showInput) { + length = width - 55; + } else { + var _props$sliderLength; + + length = (_props$sliderLength = props.sliderLength) != null ? _props$sliderLength : width; + } + var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2; @@ -739,12 +749,12 @@ } else { return { handleStart: sliderSize / 2, - handleRange: width - sliderSize, + handleRange: length - sliderSize, radius: sliderSize / 2, x: 0, y: 0, - width: ishorizontal ? sliderSize : width, - height: ishorizontal ? width : sliderSize + width: ishorizontal ? sliderSize : length, + height: ishorizontal ? length : sliderSize }; } } diff --git a/dist/iro.min.js b/dist/iro.min.js index 308a774..a5b0299 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,$,n,H,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=i/n?r=o:e=o}return o},i=l,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},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=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:s(n),g:s(i),b:s(t)}},set:function(t){this.hsv=r({},l.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"rgba",get:function(){return r({},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,t=t.l;return{h:s(n),s:s(i),l:s(t)}},set:function(t){this.hsv=r({},l.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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,e,r,o=255;if((n=it.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3])):(n=et.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3]),o=17*d(n[4])):(n=rt.exec(t))?(i=d(n[1]),e=d(n[2]),r=d(n[3])):(n=ot.exec(t))&&(i=d(n[1]),e=d(n[2]),r=d(n[3]),o=d(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+v(t.r)+v(t.g)+v(t.b)+v(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),l}();function g(t){var n=t.width,i=t.sliderSize,e=t.borderWidth,r=t.handleRadius,o=t.padding,u=t.sliderShape,l="horizontal"===t.layoutDirection,i=null!=i?i:2*o+2*r;return"circle"===u?{handleStart:t.padding+t.handleRadius,handleRange:n-2*o-2*r,width:n,height:n,cx:n/2,cy:n/2,radius:n/2-e/2}:{handleStart:i/2,handleRange:n-i,radius:i/2,x:0,y:0,width:l?i:n,height:l?n:i}}function ut(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function lt(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function st(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Pt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Pt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=l),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){l=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(l=t.c).I;t&&(t.f.forEach(E),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),l=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=l,i=t.c;"function"==typeof i&&(t.c=void 0,i()),l=n}function Tt(t){var n=l;t.c=t.i(),l=n}function Pt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],l=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return lt(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return r[i.sliderType]=t},[o,i.sliderType])),o=Nt(function(t){t.preventDefault();n=i,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?lt(n,+t):0;return r[i.sliderType]=n},[o,i.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===i.layoutDirection?y(i.handleRadius):"0px",width:"10px"}},e),h("input",{onKeyPress:l,onPaste:o,className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===n?"40px":"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===i.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:u}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t=i/n?r=o:e=o}return o},i=l,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},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=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:s(n),g:s(i),b:s(t)}},set:function(t){this.hsv=r({},l.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"rgba",get:function(){return r({},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,t=t.l;return{h:s(n),s:s(i),l:s(t)}},set:function(t){this.hsv=r({},l.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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,e,r,o=255;if((n=it.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3])):(n=et.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3]),o=17*d(n[4])):(n=rt.exec(t))?(i=d(n[1]),e=d(n[2]),r=d(n[3])):(n=ot.exec(t))&&(i=d(n[1]),e=d(n[2]),r=d(n[3]),o=d(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+v(t.r)+v(t.g)+v(t.b)+v(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),l}();function g(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,l=t.sliderShape,s=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:s?e:n,height:s?n:e}}function ut(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function lt(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function st(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Pt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Pt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=l),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){l=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(l=t.c).I;t&&(t.f.forEach(E),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),l=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=l,i=t.c;"function"==typeof i&&(t.c=void 0,i()),l=n}function Tt(t){var n=l;t.c=t.i(),l=n}function Pt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],l=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return lt(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return r[i.sliderType]=t},[o,i.sliderType])),o=Nt(function(t){t.preventDefault();n=i,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?lt(n,+t):0;return r[i.sliderType]=n},[o,i.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===i.layoutDirection?y(i.handleRadius):"0px",width:"10px"}},e),h("input",{onKeyPress:l,onPaste:o,className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===n?"40px":"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===i.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:u}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t Date: Tue, 26 Apr 2022 09:44:55 +0200 Subject: [PATCH 05/11] fix issue with kelvin color --- dist/iro.es.js | 27 +++++++++++++++++++++++++-- dist/iro.js | 27 +++++++++++++++++++++++++-- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 27 +++++++++++++++++++++++++-- src/Input.tsx | 6 +++++- src/Slider.tsx | 3 +++ 6 files changed, 84 insertions(+), 8 deletions(-) diff --git a/dist/iro.es.js b/dist/iro.es.js index fa7ac8d..fdb3b2c 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -454,10 +454,25 @@ var IroColor = /*#__PURE__*/function () { }, { key: "kelvin", get: function get() { - return IroColor.rgbToKelvin(this.rgb); + /** Rgb to kelvin conversion is a little funky, producing results + * that differ from the original value. + * Check if rgb values are equal and return RGB to kelvin conversion + * only if necessary + */ + var res; + var rgb = IroColor.kelvinToRgb(this._kelvin); + + if (rgb.r === this.rgb.r && rgb.g === this.rgb.g && rgb.b === this.rgb.b) { + res = this._kelvin; + } else { + res = IroColor.rgbToKelvin(this.rgb); + } + + return res; }, set: function set(value) { this.rgb = IroColor.kelvinToRgb(value); + this._kelvin = value; } }, { key: "red", @@ -1417,7 +1432,12 @@ function IroInput(props) { var onKeypress = A(function (e) { e.preventDefault(); var value = getSliderValueFromInputField(props, e); - activeColor[props.sliderType] = value; + if (type === 'kelvin' && value < props.minTemperature) { + activeColor[props.sliderType] = props.minTemperature; + } + else { + activeColor[props.sliderType] = value; + } return value; }, [setSliderValue, props.sliderType]); var onPaste = A(function (e) { @@ -1459,6 +1479,9 @@ function IroSlider(props) { var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'kelvin') { + activeColor._kelvin = value; + } props.onInput(type, props.id); } return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( diff --git a/dist/iro.js b/dist/iro.js index 7af6289..b62d55a 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -460,10 +460,25 @@ }, { key: "kelvin", get: function get() { - return IroColor.rgbToKelvin(this.rgb); + /** Rgb to kelvin conversion is a little funky, producing results + * that differ from the original value. + * Check if rgb values are equal and return RGB to kelvin conversion + * only if necessary + */ + var res; + var rgb = IroColor.kelvinToRgb(this._kelvin); + + if (rgb.r === this.rgb.r && rgb.g === this.rgb.g && rgb.b === this.rgb.b) { + res = this._kelvin; + } else { + res = IroColor.rgbToKelvin(this.rgb); + } + + return res; }, set: function set(value) { this.rgb = IroColor.kelvinToRgb(value); + this._kelvin = value; } }, { key: "red", @@ -1423,7 +1438,12 @@ var onKeypress = A(function (e) { e.preventDefault(); var value = getSliderValueFromInputField(props, e); - activeColor[props.sliderType] = value; + if (type === 'kelvin' && value < props.minTemperature) { + activeColor[props.sliderType] = props.minTemperature; + } + else { + activeColor[props.sliderType] = value; + } return value; }, [setSliderValue, props.sliderType]); var onPaste = A(function (e) { @@ -1465,6 +1485,9 @@ var value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'kelvin') { + activeColor._kelvin = value; + } props.onInput(type, props.id); } return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( diff --git a/dist/iro.min.js b/dist/iro.min.js index a5b0299..39cb199 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,$,n,H,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=i/n?r=o:e=o}return o},i=l,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},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=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:s(n),g:s(i),b:s(t)}},set:function(t){this.hsv=r({},l.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"rgba",get:function(){return r({},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,t=t.l;return{h:s(n),s:s(i),l:s(t)}},set:function(t){this.hsv=r({},l.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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,e,r,o=255;if((n=it.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3])):(n=et.exec(t))?(i=17*d(n[1]),e=17*d(n[2]),r=17*d(n[3]),o=17*d(n[4])):(n=rt.exec(t))?(i=d(n[1]),e=d(n[2]),r=d(n[3])):(n=ot.exec(t))&&(i=d(n[1]),e=d(n[2]),r=d(n[3]),o=d(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+v(t.r)+v(t.g)+v(t.b)+v(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),l}();function g(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,l=t.sliderShape,s=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:s?e:n,height:s?n:e}}function ut(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function lt(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function st(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),st(n,360)}function vt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Pt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Pt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=l),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){l=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(l=t.c).I;t&&(t.f.forEach(E),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),l=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=l,i=t.c;"function"==typeof i&&(t.c=void 0,i()),l=n}function Tt(t){var n=l;t.c=t.i(),l=n}function Pt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],l=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return lt(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return r[i.sliderType]=t},[o,i.sliderType])),o=Nt(function(t){t.preventDefault();n=i,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?lt(n,+t):0;return r[i.sliderType]=n},[o,i.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===i.layoutDirection?y(i.handleRadius):"0px",width:"10px"}},e),h("input",{onKeyPress:l,onPaste:o,className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===n?"40px":"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===i.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:u}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t=i/n?r=o:e=o}return o},i=s,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){var t=s.kelvinToRgb(this.I),t=t.r===this.rgb.r&&t.g===this.rgb.g&&t.b===this.rgb.b?this.I:s.rgbToKelvin(this.rgb);return t},set:function(t){this.rgb=s.kelvinToRgb(t),this.I=t}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=s.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:l(n),g:l(i),b:l(t)}},set:function(t){this.hsv=r({},s.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=s.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:l(n),s:l(i),l:l(t)}},set:function(t){this.hsv=r({},s.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+d(t.r)+d(t.g)+d(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*v(n[1]),e=17*v(n[2]),r=17*v(n[3])):(n=et.exec(t))?(i=17*v(n[1]),e=17*v(n[2]),r=17*v(n[3]),o=17*v(n[4])):(n=rt.exec(t))?(i=v(n[1]),e=v(n[2]),r=v(n[3])):(n=ot.exec(t))&&(i=v(n[1]),e=v(n[2]),r=v(n[3]),o=v(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+d(t.r)+d(t.g)+d(t.b)+d(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),s}();function g(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,s=t.sliderShape,l=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===s?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:l?e:n,height:l?n:e}}function ut(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function lt(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),lt(n,360)}function dt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Pt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Pt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=s),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.O,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.O=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.O.f.forEach(E),n.O.f.forEach(Tt),n.O.f=[]}catch(t){n.O.f=[],x.o(t,n.d)}}x.e=function(t){s=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(s=t.c).O;t&&(t.f.forEach(E),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.O&&t.O.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),s=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.O&&(t.O.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=s,i=t.c;"function"==typeof i&&(t.c=void 0,i()),s=n}function Tt(t){var n=s;t.c=t.i(),s=n}function Pt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],s=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return st(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return"kelvin"===n&&t { e.preventDefault(); const value = getSliderValueFromInputField(props, e); - activeColor[props.sliderType] = value; + if (type === 'kelvin' && value < props.minTemperature) { + activeColor[props.sliderType] = props.minTemperature; + } else { + activeColor[props.sliderType] = value; + } return value; }, [setSliderValue, props.sliderType]); diff --git a/src/Slider.tsx b/src/Slider.tsx index f64e2ab..1862186 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -38,6 +38,9 @@ export function IroSlider(props: IroSliderProps) { const value = getSliderValueFromInput(props, x, y); props.parent.inputActive = true; activeColor[props.sliderType] = value; + if (props.sliderType === 'kelvin') { + activeColor._kelvin = value; + } props.onInput(type, props.id); } From abb819857906ea5fff666e8233983f29af23aec3 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Tue, 26 Apr 2022 13:39:42 +0200 Subject: [PATCH 06/11] update dependency iro-core --- dist/iro.es.js | 108 ++++++++++++++++++------------ dist/iro.js | 108 ++++++++++++++++++------------ dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 108 ++++++++++++++++++------------ 4 files changed, 193 insertions(+), 133 deletions(-) diff --git a/dist/iro.es.js b/dist/iro.es.js index fdb3b2c..e3a9840 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -74,11 +74,7 @@ var REGEX_HEX_4 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_I var REGEX_HEX_6 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); var REGEX_HEX_8 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); // Kelvin temperature bounds -var KELVIN_MIN = 2000; -var KELVIN_MAX = 40000; // Math shorthands - -var log = Math.log, - round = Math.round, +var round = Math.round, floor = Math.floor; /** * @desc Clamp a number between a min and max value @@ -319,23 +315,51 @@ var IroColor = /*#__PURE__*/function () { ; IroColor.kelvinToRgb = function kelvinToRgb(kelvin) { - var temp = kelvin / 100; + var temperature = kelvin / 100.0; var r, g, b; - if (temp < 66) { + if (temperature < 66.0) { r = 255; - g = -155.25485562709179 - 0.44596950469579133 * (g = temp - 2) + 104.49216199393888 * log(g); - b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp - 10) + 115.67994401066147 * log(b); } else { - r = 351.97690566805693 + 0.114206453784165 * (r = temp - 55) - 40.25366309332127 * log(r); - g = 325.4494125711974 + 0.07943456536662342 * (g = temp - 50) - 28.0852963507957 * log(g); + r = temperature - 55.0; + r = 351.97690566805693 + 0.114206453784165 * r - 40.25366309332127 * Math.log(r); + if (r < 0) { r = 0; } + if (r > 255) { r = 255; } + } + /* Calculate g */ + + + if (temperature < 66.0) { + g = temperature - 2; + g = -155.25485562709179 - 0.44596950469579133 * g + 104.49216199393888 * Math.log(g); + if (g < 0) { g = 0; } + if (g > 255) { g = 255; } + } else { + g = temperature - 50.0; + g = 325.4494125711974 + 0.07943456536662342 * g - 28.0852963507957 * Math.log(g); + if (g < 0) { g = 0; } + if (g > 255) { g = 255; } + } + /* Calculate b */ + + + if (temperature >= 66.0) { b = 255; + } else { + if (temperature <= 20.0) { + b = 0; + } else { + b = temperature - 10; + b = -254.76935184120902 + 0.8274096064007395 * b + 115.67994401066147 * Math.log(b); + if (b < 0) { b = 0; } + if (b > 255) { b = 255; } + } } return { - r: clamp(floor(r), 0, 255), - g: clamp(floor(g), 0, 255), - b: clamp(floor(b), 0, 255) + r: r, + b: b, + g: g }; } /** @@ -345,26 +369,23 @@ var IroColor = /*#__PURE__*/function () { ; IroColor.rgbToKelvin = function rgbToKelvin(rgb) { - var r = rgb.r, - b = rgb.b; - var eps = 0.4; - var minTemp = KELVIN_MIN; - var maxTemp = KELVIN_MAX; - var temp; + var temperature, testRGB; + var epsilon = 0.4; + var minTemperature = 1000; + var maxTemperature = 40000; - while (maxTemp - minTemp > eps) { - temp = (maxTemp + minTemp) * 0.5; + while (maxTemperature - minTemperature > epsilon) { + temperature = (maxTemperature + minTemperature) / 2; + testRGB = IroColor.kelvinToRgb(temperature); - var _rgb = IroColor.kelvinToRgb(temp); - - if (_rgb.b / _rgb.r >= b / r) { - maxTemp = temp; + if (testRGB.b / testRGB.r >= rgb.b / rgb.r) { + maxTemperature = temperature; } else { - minTemp = temp; + minTemperature = temperature; } } - return temp; + return temperature; }; _createClass(IroColor, [{ @@ -454,25 +475,10 @@ var IroColor = /*#__PURE__*/function () { }, { key: "kelvin", get: function get() { - /** Rgb to kelvin conversion is a little funky, producing results - * that differ from the original value. - * Check if rgb values are equal and return RGB to kelvin conversion - * only if necessary - */ - var res; - var rgb = IroColor.kelvinToRgb(this._kelvin); - - if (rgb.r === this.rgb.r && rgb.g === this.rgb.g && rgb.b === this.rgb.b) { - res = this._kelvin; - } else { - res = IroColor.rgbToKelvin(this.rgb); - } - - return res; + return round(IroColor.rgbToKelvin(this.raw_rgb)); }, set: function set(value) { this.rgb = IroColor.kelvinToRgb(value); - this._kelvin = value; } }, { key: "red", @@ -526,6 +532,20 @@ var IroColor = /*#__PURE__*/function () { a: value.a === undefined ? this.alpha : value.a }); } + }, { + key: "raw_rgb", + get: function get() { + var _IroColor$hsvToRgb2 = IroColor.hsvToRgb(this.$), + r = _IroColor$hsvToRgb2.r, + g = _IroColor$hsvToRgb2.g, + b = _IroColor$hsvToRgb2.b; + + return { + r: r, + g: g, + b: b + }; + } }, { key: "rgba", get: function get() { diff --git a/dist/iro.js b/dist/iro.js index b62d55a..2fa4d76 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -80,11 +80,7 @@ var REGEX_HEX_6 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); var REGEX_HEX_8 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); // Kelvin temperature bounds - var KELVIN_MIN = 2000; - var KELVIN_MAX = 40000; // Math shorthands - - var log = Math.log, - round = Math.round, + var round = Math.round, floor = Math.floor; /** * @desc Clamp a number between a min and max value @@ -325,23 +321,51 @@ ; IroColor.kelvinToRgb = function kelvinToRgb(kelvin) { - var temp = kelvin / 100; + var temperature = kelvin / 100.0; var r, g, b; - if (temp < 66) { + if (temperature < 66.0) { r = 255; - g = -155.25485562709179 - 0.44596950469579133 * (g = temp - 2) + 104.49216199393888 * log(g); - b = temp < 20 ? 0 : -254.76935184120902 + 0.8274096064007395 * (b = temp - 10) + 115.67994401066147 * log(b); } else { - r = 351.97690566805693 + 0.114206453784165 * (r = temp - 55) - 40.25366309332127 * log(r); - g = 325.4494125711974 + 0.07943456536662342 * (g = temp - 50) - 28.0852963507957 * log(g); + r = temperature - 55.0; + r = 351.97690566805693 + 0.114206453784165 * r - 40.25366309332127 * Math.log(r); + if (r < 0) { r = 0; } + if (r > 255) { r = 255; } + } + /* Calculate g */ + + + if (temperature < 66.0) { + g = temperature - 2; + g = -155.25485562709179 - 0.44596950469579133 * g + 104.49216199393888 * Math.log(g); + if (g < 0) { g = 0; } + if (g > 255) { g = 255; } + } else { + g = temperature - 50.0; + g = 325.4494125711974 + 0.07943456536662342 * g - 28.0852963507957 * Math.log(g); + if (g < 0) { g = 0; } + if (g > 255) { g = 255; } + } + /* Calculate b */ + + + if (temperature >= 66.0) { b = 255; + } else { + if (temperature <= 20.0) { + b = 0; + } else { + b = temperature - 10; + b = -254.76935184120902 + 0.8274096064007395 * b + 115.67994401066147 * Math.log(b); + if (b < 0) { b = 0; } + if (b > 255) { b = 255; } + } } return { - r: clamp(floor(r), 0, 255), - g: clamp(floor(g), 0, 255), - b: clamp(floor(b), 0, 255) + r: r, + b: b, + g: g }; } /** @@ -351,26 +375,23 @@ ; IroColor.rgbToKelvin = function rgbToKelvin(rgb) { - var r = rgb.r, - b = rgb.b; - var eps = 0.4; - var minTemp = KELVIN_MIN; - var maxTemp = KELVIN_MAX; - var temp; + var temperature, testRGB; + var epsilon = 0.4; + var minTemperature = 1000; + var maxTemperature = 40000; - while (maxTemp - minTemp > eps) { - temp = (maxTemp + minTemp) * 0.5; + while (maxTemperature - minTemperature > epsilon) { + temperature = (maxTemperature + minTemperature) / 2; + testRGB = IroColor.kelvinToRgb(temperature); - var _rgb = IroColor.kelvinToRgb(temp); - - if (_rgb.b / _rgb.r >= b / r) { - maxTemp = temp; + if (testRGB.b / testRGB.r >= rgb.b / rgb.r) { + maxTemperature = temperature; } else { - minTemp = temp; + minTemperature = temperature; } } - return temp; + return temperature; }; _createClass(IroColor, [{ @@ -460,25 +481,10 @@ }, { key: "kelvin", get: function get() { - /** Rgb to kelvin conversion is a little funky, producing results - * that differ from the original value. - * Check if rgb values are equal and return RGB to kelvin conversion - * only if necessary - */ - var res; - var rgb = IroColor.kelvinToRgb(this._kelvin); - - if (rgb.r === this.rgb.r && rgb.g === this.rgb.g && rgb.b === this.rgb.b) { - res = this._kelvin; - } else { - res = IroColor.rgbToKelvin(this.rgb); - } - - return res; + return round(IroColor.rgbToKelvin(this.raw_rgb)); }, set: function set(value) { this.rgb = IroColor.kelvinToRgb(value); - this._kelvin = value; } }, { key: "red", @@ -532,6 +538,20 @@ a: value.a === undefined ? this.alpha : value.a }); } + }, { + key: "raw_rgb", + get: function get() { + var _IroColor$hsvToRgb2 = IroColor.hsvToRgb(this.$), + r = _IroColor$hsvToRgb2.r, + g = _IroColor$hsvToRgb2.g, + b = _IroColor$hsvToRgb2.b; + + return { + r: r, + g: g, + b: b + }; + } }, { key: "rgba", get: function get() { diff --git a/dist/iro.min.js b/dist/iro.min.js index 39cb199..b6febb5 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,$,n,H,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=i/n?r=o:e=o}return o},i=s,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){var t=s.kelvinToRgb(this.I),t=t.r===this.rgb.r&&t.g===this.rgb.g&&t.b===this.rgb.b?this.I:s.rgbToKelvin(this.rgb);return t},set:function(t){this.rgb=s.kelvinToRgb(t),this.I=t}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=s.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:l(n),g:l(i),b:l(t)}},set:function(t){this.hsv=r({},s.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=s.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:l(n),s:l(i),l:l(t)}},set:function(t){this.hsv=r({},s.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255)):(n=Y.exec(t))&&(i=f(n[1],255),e=f(n[2],255),r=f(n[3],255),o=f(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+d(t.r)+d(t.g)+d(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*v(n[1]),e=17*v(n[2]),r=17*v(n[3])):(n=et.exec(t))?(i=17*v(n[1]),e=17*v(n[2]),r=17*v(n[3]),o=17*v(n[4])):(n=rt.exec(t))?(i=v(n[1]),e=v(n[2]),r=v(n[3])):(n=ot.exec(t))&&(i=v(n[1]),e=v(n[2]),r=v(n[3]),o=v(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+d(t.r)+d(t.g)+d(t.b)+d(c(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,e,r,o=1;if((n=tt.exec(t))?(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100)):(n=nt.exec(t))&&(i=f(n[1],360),e=f(n[2],100),r=f(n[3],100),o=f(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),s}();function g(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,s=t.sliderShape,l=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===s?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:l?e:n,height:l?n:e}}function ut(t,n){var i=g(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function lt(t,n){return(t%n+n)%n}var ct,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function b(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),lt(n,360)}function dt(t,n,i){var e=b(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function pt(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=pt(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function bt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function Rt(t){return N=1,n=Pt,t=t,(e=_t(kt++,2)).t=n,e.c||(e.i=[i?i(t):Pt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=s),e.i;var n,i,e}function Nt(t,n){return N=8,i=function(){return t},n=n,o=_t(kt++,7),e=o.O,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.O=n,o.f=i),o.i;var i,e,r,o}function Et(){for(var n;n=Mt.shift();)if(n.m)try{n.O.f.forEach(E),n.O.f.forEach(Tt),n.O.f=[]}catch(t){n.O.f=[],x.o(t,n.d)}}x.e=function(t){s=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(s=t.c).O;t&&(t.f.forEach(E),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.O&&t.O.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),zt&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);zt&&(i=requestAnimationFrame(n))})(Et)),s=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){At&&At(t);var n,t=t.c;t&&t.O&&(t.O.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var zt="function"==typeof requestAnimationFrame;function E(t){var n=s,i=t.c;"function"==typeof i&&(t.c=void 0,i()),s=n}function Tt(t){var n=s;t.c=t.i(),s=n}function Pt(t,n){return"function"==typeof n?n(t):n}function $t(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=Rt(r[i.sliderType]),u=o[0],o=o[1],s=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Nt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return st(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return"kelvin"===n&&t=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+a(t.r)+a(t.g)+a(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+a(t.r)+a(t.g)+a(t.b)+a(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function f(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,l=t.sliderShape,s=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:s?e:n,height:s?n:e}}function lt(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function ct(t,n){return(t%n+n)%n}var v,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),ct(n,360)}function dt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function pt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function gt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function At(t){return N=1,n=Tt,t=t,(e=_t(wt++,2)).t=n,e.c||(e.i=[i?i(t):Tt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=R),e.i;var n,i,e}function Rt(t,n){return N=8,i=function(){return t},n=n,o=_t(wt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=xt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(zt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){R=null,Mt&&Mt(t)},x.p=function(t){jt&&jt(t),wt=0;t=(R=t.c).I;t&&(t.f.forEach(E),t.f.forEach(zt),t.f=[])},x.diffed=function(t){It&&It(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==xt.push(t)&&kt===x.requestAnimationFrame||((kt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),R=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||zt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),Ot&&Ot(t,i)},x.unmount=function(t){St&&St(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function E(t){var n=R,i=t.c;"function"==typeof i&&(t.c=void 0,i()),R=n}function zt(t){var n=R;t.c=t.i(),R=n}function Tt(t,n){return"function"==typeof n?n(t):n}function Pt(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=At(r[i.sliderType]),u=o[0],o=o[1],l=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Rt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return st(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return"kelvin"===n&&t 255) { r = 255; } + } + /* Calculate g */ + + + if (temperature < 66.0) { + g = temperature - 2; + g = -155.25485562709179 - 0.44596950469579133 * g + 104.49216199393888 * Math.log(g); + if (g < 0) { g = 0; } + if (g > 255) { g = 255; } + } else { + g = temperature - 50.0; + g = 325.4494125711974 + 0.07943456536662342 * g - 28.0852963507957 * Math.log(g); + if (g < 0) { g = 0; } + if (g > 255) { g = 255; } + } + /* Calculate b */ + + + if (temperature >= 66.0) { b = 255; + } else { + if (temperature <= 20.0) { + b = 0; + } else { + b = temperature - 10; + b = -254.76935184120902 + 0.8274096064007395 * b + 115.67994401066147 * Math.log(b); + if (b < 0) { b = 0; } + if (b > 255) { b = 255; } + } } return { - r: clamp(floor(r), 0, 255), - g: clamp(floor(g), 0, 255), - b: clamp(floor(b), 0, 255) + r: r, + b: b, + g: g }; } /** @@ -345,26 +369,23 @@ var IroColor = /*#__PURE__*/function () { ; IroColor.rgbToKelvin = function rgbToKelvin(rgb) { - var r = rgb.r, - b = rgb.b; - var eps = 0.4; - var minTemp = KELVIN_MIN; - var maxTemp = KELVIN_MAX; - var temp; + var temperature, testRGB; + var epsilon = 0.4; + var minTemperature = 1000; + var maxTemperature = 40000; - while (maxTemp - minTemp > eps) { - temp = (maxTemp + minTemp) * 0.5; + while (maxTemperature - minTemperature > epsilon) { + temperature = (maxTemperature + minTemperature) / 2; + testRGB = IroColor.kelvinToRgb(temperature); - var _rgb = IroColor.kelvinToRgb(temp); - - if (_rgb.b / _rgb.r >= b / r) { - maxTemp = temp; + if (testRGB.b / testRGB.r >= rgb.b / rgb.r) { + maxTemperature = temperature; } else { - minTemp = temp; + minTemperature = temperature; } } - return temp; + return temperature; }; _createClass(IroColor, [{ @@ -454,25 +475,10 @@ var IroColor = /*#__PURE__*/function () { }, { key: "kelvin", get: function get() { - /** Rgb to kelvin conversion is a little funky, producing results - * that differ from the original value. - * Check if rgb values are equal and return RGB to kelvin conversion - * only if necessary - */ - var res; - var rgb = IroColor.kelvinToRgb(this._kelvin); - - if (rgb.r === this.rgb.r && rgb.g === this.rgb.g && rgb.b === this.rgb.b) { - res = this._kelvin; - } else { - res = IroColor.rgbToKelvin(this.rgb); - } - - return res; + return round(IroColor.rgbToKelvin(this.raw_rgb)); }, set: function set(value) { this.rgb = IroColor.kelvinToRgb(value); - this._kelvin = value; } }, { key: "red", @@ -526,6 +532,20 @@ var IroColor = /*#__PURE__*/function () { a: value.a === undefined ? this.alpha : value.a }); } + }, { + key: "raw_rgb", + get: function get() { + var _IroColor$hsvToRgb2 = IroColor.hsvToRgb(this.$), + r = _IroColor$hsvToRgb2.r, + g = _IroColor$hsvToRgb2.g, + b = _IroColor$hsvToRgb2.b; + + return { + r: r, + g: g, + b: b + }; + } }, { key: "rgba", get: function get() { From 2712c79f7821c91dbcd7493e88f1b1361eb960a4 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Thu, 28 Apr 2022 11:46:55 +0200 Subject: [PATCH 07/11] update input function - kelvin special case --- dist/iro.es.js | 57 ++++++++++++++++++------------- dist/iro.js | 57 ++++++++++++++++++------------- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 57 ++++++++++++++++++------------- src/Input.tsx | 34 ++++++++++++++---- 5 files changed, 131 insertions(+), 76 deletions(-) diff --git a/dist/iro.es.js b/dist/iro.es.js index e3a9840..6d65211 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -997,7 +997,6 @@ function clampSliderValue(props, value) { return clamp(value, 0, 1); case 'kelvin': - // TODO var minTemperature = props.minTemperature, maxTemperature = props.maxTemperature; return clamp(value, minTemperature, maxTemperature); @@ -1009,33 +1008,25 @@ function clampSliderValue(props, value) { * @param e - KeyboardEvent */ -function getSliderValueFromInputField(props, e) { - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return 0; - } - - var maxlen; +function getSliderValueFromInputField(e) { + var target = e.target; + var valueNum = parseInt(target.value); // regex for digit or dot (.) - if (props.sliderType === 'alpha') { - maxlen = 4; - } else if (props.sliderType === 'kelvin') { - maxlen = 5; - } else { - maxlen = 3; + if (!/^([0-9]|\.)$/i.test(e.key)) { + e.preventDefault(); + return valueNum; } - var target = e.target; var valueString = target.value.toString(); if (target.selectionStart !== undefined) { + // cursor position valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); } else { - valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + valueString = valueString + e.key.toString(); } - var valueNum = +valueString; - return clampSliderValue(props, valueNum); + return +valueString; } /** * @desc Get the current slider value from clipboard data @@ -1450,13 +1441,33 @@ function IroInput(props) { var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); setSliderValue(val); var onKeypress = A(function (e) { - e.preventDefault(); - var value = getSliderValueFromInputField(props, e); - if (type === 'kelvin' && value < props.minTemperature) { - activeColor[props.sliderType] = props.minTemperature; + var value = getSliderValueFromInputField(e); + if (type === 'kelvin') { + var strlen = value.toString().length, minlen = props.minTemperature.toString().length, maxlen = props.maxTemperature.toString().length; + if (strlen > maxlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } + else if (strlen >= minlen) { + if (value < props.minTemperature) { + if (maxlen === minlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.minTemperature; + } + } + else if (value > props.maxTemperature) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } + else { + e.preventDefault(); + activeColor[props.sliderType] = value; + } + } } else { - activeColor[props.sliderType] = value; + e.preventDefault(); + activeColor[props.sliderType] = clampSliderValue(props, value); } return value; }, [setSliderValue, props.sliderType]); diff --git a/dist/iro.js b/dist/iro.js index 2fa4d76..3678bb4 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -1003,7 +1003,6 @@ return clamp(value, 0, 1); case 'kelvin': - // TODO var minTemperature = props.minTemperature, maxTemperature = props.maxTemperature; return clamp(value, minTemperature, maxTemperature); @@ -1015,33 +1014,25 @@ * @param e - KeyboardEvent */ - function getSliderValueFromInputField(props, e) { - // regex for digit or dot (.) - if (!/^([0-9]|\.)$/i.test(e.key)) { - return 0; - } - - var maxlen; + function getSliderValueFromInputField(e) { + var target = e.target; + var valueNum = parseInt(target.value); // regex for digit or dot (.) - if (props.sliderType === 'alpha') { - maxlen = 4; - } else if (props.sliderType === 'kelvin') { - maxlen = 5; - } else { - maxlen = 3; + if (!/^([0-9]|\.)$/i.test(e.key)) { + e.preventDefault(); + return valueNum; } - var target = e.target; var valueString = target.value.toString(); if (target.selectionStart !== undefined) { + // cursor position valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); } else { - valueString = valueString.length + 1 > maxlen ? valueString : valueString + e.key.toString(); + valueString = valueString + e.key.toString(); } - var valueNum = +valueString; - return clampSliderValue(props, valueNum); + return +valueString; } /** * @desc Get the current slider value from clipboard data @@ -1456,13 +1447,33 @@ var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); setSliderValue(val); var onKeypress = A(function (e) { - e.preventDefault(); - var value = getSliderValueFromInputField(props, e); - if (type === 'kelvin' && value < props.minTemperature) { - activeColor[props.sliderType] = props.minTemperature; + var value = getSliderValueFromInputField(e); + if (type === 'kelvin') { + var strlen = value.toString().length, minlen = props.minTemperature.toString().length, maxlen = props.maxTemperature.toString().length; + if (strlen > maxlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } + else if (strlen >= minlen) { + if (value < props.minTemperature) { + if (maxlen === minlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.minTemperature; + } + } + else if (value > props.maxTemperature) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } + else { + e.preventDefault(); + activeColor[props.sliderType] = value; + } + } } else { - activeColor[props.sliderType] = value; + e.preventDefault(); + activeColor[props.sliderType] = clampSliderValue(props, value); } return value; }, [setSliderValue, props.sliderType]); diff --git a/dist/iro.min.js b/dist/iro.min.js index b6febb5..455df77 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,$,n,H,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+a(t.r)+a(t.g)+a(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+a(t.r)+a(t.g)+a(t.b)+a(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function f(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,l=t.sliderShape,s=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:s?e:n,height:s?n:e}}function lt(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function ct(t,n){return(t%n+n)%n}var v,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),ct(n,360)}function dt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function pt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function gt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function At(t){return N=1,n=Tt,t=t,(e=_t(wt++,2)).t=n,e.c||(e.i=[i?i(t):Tt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=R),e.i;var n,i,e}function Rt(t,n){return N=8,i=function(){return t},n=n,o=_t(wt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=xt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(zt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){R=null,Mt&&Mt(t)},x.p=function(t){jt&&jt(t),wt=0;t=(R=t.c).I;t&&(t.f.forEach(E),t.f.forEach(zt),t.f=[])},x.diffed=function(t){It&&It(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==xt.push(t)&&kt===x.requestAnimationFrame||((kt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),R=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||zt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),Ot&&Ot(t,i)},x.unmount=function(t){St&&St(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function E(t){var n=R,i=t.c;"function"==typeof i&&(t.c=void 0,i()),R=n}function zt(t){var n=R;t.c=t.i(),R=n}function Tt(t,n){return"function"==typeof n?n(t):n}function Pt(i){var t=i.disabled,n=i.sliderType,e=n[0].toUpperCase(),r=i.activeColor,o=At(r[i.sliderType]),u=o[0],o=o[1],l=(o("alpha"===n?r[i.sliderType].toFixed(2):Math.round(r[i.sliderType])),Rt(function(t){t.preventDefault();t=function(t,n){if(!/^([0-9]|\.)$/i.test(n.key))return 0;var i="alpha"===t.sliderType?4:"kelvin"===t.sliderType?5:3,e=n.target,r=e.value.toString();return st(t,+(r=void 0!==e.selectionStart?r.substring(0,e.selectionStart)+n.key.toString()+r.substring(e.selectionEnd):r.length+1>i?r:r+n.key.toString()))}(i,t);return"kelvin"===n&&t=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+a(t.r)+a(t.g)+a(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+a(t.r)+a(t.g)+a(t.b)+a(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function f(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,l=t.sliderShape,s=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:s?e:n,height:s?n:e}}function lt(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function ct(t,n){return(t%n+n)%n}var d,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),ct(n,360)}function vt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function pt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function gt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function At(t){return N=1,n=Tt,t=t,(e=_t(wt++,2)).t=n,e.c||(e.i=[i?i(t):Tt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=R),e.i;var n,i,e}function Rt(t,n){return N=8,i=function(){return t},n=n,o=_t(wt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=xt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(zt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){R=null,Mt&&Mt(t)},x.p=function(t){jt&&jt(t),wt=0;t=(R=t.c).I;t&&(t.f.forEach(E),t.f.forEach(zt),t.f=[])},x.diffed=function(t){It&&It(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==xt.push(t)&&kt===x.requestAnimationFrame||((kt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),R=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||zt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),Ot&&Ot(t,i)},x.unmount=function(t){St&&St(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function E(t){var n=R,i=t.c;"function"==typeof i&&(t.c=void 0,i()),R=n}function zt(t){var n=R;t.c=t.i(),R=n}function Tt(t,n){return"function"==typeof n?n(t):n}function Pt(o){var t=o.disabled,u=o.sliderType,n=u[0].toUpperCase(),l=o.activeColor,i=At(l[o.sliderType]),e=i[0],i=i[1],r=(i("alpha"===u?l[o.sliderType].toFixed(2):Math.round(l[o.sliderType])),Rt(function(t){r=(n=t).target,i=parseInt(r.value);var n,i,e,r=/^([0-9]|\.)$/i.test(n.key)?(i=r.value.toString(),void 0!==r.selectionStart?i=i.substring(0,r.selectionStart)+n.key.toString()+i.substring(r.selectionEnd):i+=n.key.toString(),+i):(n.preventDefault(),i);return"kelvin"===u?(n=r.toString().length,i=o.minTemperature.toString().length,(e=o.maxTemperature.toString().length)o.maxTemperature?(t.preventDefault(),l[o.sliderType]=o.maxTemperature):(t.preventDefault(),l[o.sliderType]=r))):(t.preventDefault(),l[o.sliderType]=st(o,r)),r},[i,o.sliderType])),i=Rt(function(t){t.preventDefault();n=o,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?st(n,+t):0;return l[o.sliderType]=n},[i,o.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===o.layoutDirection?b(o.handleRadius):"0px",width:"10px"}},n),h("input",{onKeyPress:r,onPaste:i,className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===u?"40px":"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===o.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:e}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t maxlen ? valueString : valueString + e.key.toString(); + valueString = valueString + e.key.toString(); } - var valueNum = +valueString; - return clampSliderValue(props, valueNum); + return +valueString; } /** * @desc Get the current slider value from clipboard data @@ -1450,13 +1441,33 @@ function IroInput(props) { var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); setSliderValue(val); var onKeypress = A(function (e) { - e.preventDefault(); - var value = getSliderValueFromInputField(props, e); - if (type === 'kelvin' && value < props.minTemperature) { - activeColor[props.sliderType] = props.minTemperature; + var value = getSliderValueFromInputField(e); + if (type === 'kelvin') { + var strlen = value.toString().length, minlen = props.minTemperature.toString().length, maxlen = props.maxTemperature.toString().length; + if (strlen > maxlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } + else if (strlen >= minlen) { + if (value < props.minTemperature) { + if (maxlen === minlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.minTemperature; + } + } + else if (value > props.maxTemperature) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } + else { + e.preventDefault(); + activeColor[props.sliderType] = value; + } + } } else { - activeColor[props.sliderType] = value; + e.preventDefault(); + activeColor[props.sliderType] = clampSliderValue(props, value); } return value; }, [setSliderValue, props.sliderType]); diff --git a/src/Input.tsx b/src/Input.tsx index 214ef02..bf5ac92 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -5,7 +5,8 @@ import { IroColor, SliderType, getSliderValueFromInputField, - getSliderValueFromClipboard + getSliderValueFromClipboard, + clampSliderValue } from '@irojs/iro-core'; interface IroInputProps { @@ -28,12 +29,33 @@ export function IroInput(props: IroInputProps) { setSliderValue(val); const onKeypress = useCallback((e: KeyboardEvent) => { - e.preventDefault(); - const value = getSliderValueFromInputField(props, e); - if (type === 'kelvin' && value < props.minTemperature) { - activeColor[props.sliderType] = props.minTemperature; + const value = getSliderValueFromInputField(e); + + if (type === 'kelvin') { + let strlen = value.toString().length, + minlen = props.minTemperature.toString().length, + maxlen = props.maxTemperature.toString().length; + + if (strlen > maxlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } else if (strlen >= minlen) { + if (value < props.minTemperature) { + if (maxlen === minlen) { + e.preventDefault(); + activeColor[props.sliderType] = props.minTemperature; + } + } else if (value > props.maxTemperature) { + e.preventDefault(); + activeColor[props.sliderType] = props.maxTemperature; + } else { + e.preventDefault(); + activeColor[props.sliderType] = value; + } + } } else { - activeColor[props.sliderType] = value; + e.preventDefault(); + activeColor[props.sliderType] = clampSliderValue(props, value); } return value; }, [setSliderValue, props.sliderType]); From b47b9d21aafe0d55b7e856644cb8f3f8a18b97f7 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Tue, 3 May 2022 13:28:18 +0200 Subject: [PATCH 08/11] outsource label element, allow for seperate display of label and input --- dist/Label.d.ts | 10 ++++++++++ src/Label.tsx | 28 ++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 dist/Label.d.ts create mode 100644 src/Label.tsx diff --git a/dist/Label.d.ts b/dist/Label.d.ts new file mode 100644 index 0000000..b6105be --- /dev/null +++ b/dist/Label.d.ts @@ -0,0 +1,10 @@ +import { h } from 'preact'; +import { LayoutDirection } from '@irojs/iro-core'; +import { SliderType } from '@irojs/iro-core'; +interface IroLabelProps { + sliderType: SliderType; + layoutDirection: LayoutDirection; + handleRadius: number; +} +export declare function IroLabel(props: IroLabelProps): h.JSX.Element; +export {}; diff --git a/src/Label.tsx b/src/Label.tsx new file mode 100644 index 0000000..9551263 --- /dev/null +++ b/src/Label.tsx @@ -0,0 +1,28 @@ +import { h } from 'preact'; +import { cssValue, LayoutDirection } from '@irojs/iro-core'; +import { SliderType } from '@irojs/iro-core'; + +interface IroLabelProps { + sliderType: SliderType; + layoutDirection: LayoutDirection; + handleRadius: number; +} + +export function IroLabel(props: IroLabelProps) { + const name = props.sliderType[0].toUpperCase(); + + return ( +
+ {name} +
+ ); +} From 9b4a62da2ba253da83cb27b1f4f9cc5d0a8c5d81 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Tue, 3 May 2022 13:29:30 +0200 Subject: [PATCH 09/11] layout changes, vertical slider fixes for input --- dist/Input.d.ts | 1 + dist/Slider.d.ts | 2 + dist/iro.es.js | 254 ++++++++++++++++++------------ dist/iro.js | 254 ++++++++++++++++++------------ dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 254 ++++++++++++++++++------------ src/ColorPicker.tsx | 5 +- src/Input.tsx | 22 +-- src/Slider.tsx | 17 +- 9 files changed, 480 insertions(+), 331 deletions(-) diff --git a/dist/Input.d.ts b/dist/Input.d.ts index c43e7a3..644d2bb 100644 --- a/dist/Input.d.ts +++ b/dist/Input.d.ts @@ -3,6 +3,7 @@ import { LayoutDirection } from '@irojs/iro-core'; import { IroColor, SliderType } from '@irojs/iro-core'; interface IroInputProps { sliderType: SliderType; + sliderSize: number; activeColor: IroColor; layoutDirection: LayoutDirection; handleRadius: number; diff --git a/dist/Slider.d.ts b/dist/Slider.d.ts index c557744..79d7f3c 100644 --- a/dist/Slider.d.ts +++ b/dist/Slider.d.ts @@ -4,9 +4,11 @@ import { IroComponentProps } from './ComponentTypes'; interface IroSliderProps extends IroComponentProps { sliderType: SliderType; sliderShape: SliderShape; + sliderSize: number; minTemperature: number; maxTemperature: number; showInput: boolean; + showLabel: boolean; disabled: boolean; } export declare function IroSlider(props: IroSliderProps): h.JSX.Element; diff --git a/dist/iro.es.js b/dist/iro.es.js index 6d65211..ee86821 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -731,6 +731,108 @@ var IroColor = /*#__PURE__*/function () { return IroColor; }(); +/** + * @desc Get input field dimensions + * @param props - InputOptions + */ +function getInputDimensions(props) { + var sliderSize = props.sliderSize, + layoutDirection = props.layoutDirection; + var inputWidth; + var fontSize; + + if (layoutDirection === 'vertical') { + inputWidth = 30; + fontSize = 12; + } else { + inputWidth = sliderSize <= 30 ? 26 : sliderSize; + fontSize = sliderSize <= 30 ? 10 : 12; + } + + return { + inputWidth: inputWidth, + inputHeight: 18, + fontSize: fontSize + }; +} +/** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ + +function clampSliderValue(props, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (props.sliderType) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + var minTemperature = props.minTemperature, + maxTemperature = props.maxTemperature; + return clamp(value, minTemperature, maxTemperature); + } +} +/** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + +function getSliderValueFromInputField(e) { + var target = e.target; + var valueNum = parseInt(target.value); // regex for digit or dot (.) + + if (!/^([0-9]|\.)$/i.test(e.key)) { + e.preventDefault(); + return valueNum; + } + + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + // cursor position + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString + e.key.toString(); + } + + return +valueString; +} +/** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + +function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); +} + var sliderDefaultOptions = { sliderShape: 'bar', sliderType: 'value', @@ -751,17 +853,30 @@ function getSliderDimensions(props) { handleRadius = props.handleRadius, padding = props.padding, sliderShape = props.sliderShape; + var ishorizontal = props.layoutDirection === 'horizontal'; var length; - if (props.showInput) { - length = width - 55; + if (props.sliderLength) { + length = props.sliderLength; } else { - var _props$sliderLength; + // automatically calculate slider length + length = width - handleRadius; - length = (_props$sliderLength = props.sliderLength) != null ? _props$sliderLength : width; - } + if (props.showInput) { + var _getInputDimensions = getInputDimensions(props), + inputWidth = _getInputDimensions.inputWidth, + inputHeight = _getInputDimensions.inputHeight; + + length -= ishorizontal ? inputHeight : inputWidth; + length -= 3; // padding + } + + if (props.showLabel) { + length -= ishorizontal ? 12 : 10; + length -= 3; // padding + } + } // automatically calculate sliderSize if its not defined - var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2; @@ -814,7 +929,7 @@ function getCurrentSliderValue(props, color) { var minTemperature = props.minTemperature, maxTemperature = props.maxTemperature; var temperatureRange = maxTemperature - minTemperature; - var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clmap percentage + var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clamp percentage return Math.max(0, Math.min(percent, 100)); @@ -970,83 +1085,6 @@ function getSliderGradient(props, color) { } } -/** - * @desc Clamp slider value between min and max values - * @param type - props.sliderType - * @param value - value to clamp - */ -function clampSliderValue(props, value) { - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - - switch (props.sliderType) { - case 'hue': - return clamp(value, 0, 360); - - case 'saturation': - case 'value': - return clamp(value, 0, 100); - - case 'red': - case 'green': - case 'blue': - return clamp(value, 0, 255); - - case 'alpha': - return clamp(value, 0, 1); - - case 'kelvin': - var minTemperature = props.minTemperature, - maxTemperature = props.maxTemperature; - return clamp(value, minTemperature, maxTemperature); - } -} -/** - * @desc Get the current slider value from input field input - * @param props - slider props - * @param e - KeyboardEvent - */ - -function getSliderValueFromInputField(e) { - var target = e.target; - var valueNum = parseInt(target.value); // regex for digit or dot (.) - - if (!/^([0-9]|\.)$/i.test(e.key)) { - e.preventDefault(); - return valueNum; - } - - var valueString = target.value.toString(); - - if (target.selectionStart !== undefined) { - // cursor position - valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); - } else { - valueString = valueString + e.key.toString(); - } - - return +valueString; -} -/** - * @desc Get the current slider value from clipboard data - * @param props - slider props - * @param e - ClipboardEvent - */ - -function getSliderValueFromClipboard(props, e) { - // allow only whole or decimal numbers - var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; - var valueString = e.clipboardData.getData('text'); - - if (!r.test(valueString)) { - return 0; - } - - var valueNum = +valueString; - return clampSliderValue(props, valueNum); -} - var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e @@ -1433,11 +1471,13 @@ var t$1,u$1,r$1,o$1=0,i=[],c$1=l.__b,f$1=l.__r,e$1=l.diffed,a$1=l.__c,v$1=l.unmo function IroInput(props) { var disabled = props.disabled; var type = props.sliderType; - var name = type[0].toUpperCase(); + var ref = getInputDimensions(props); + var inputWidth = ref.inputWidth; + var fontSize = ref.fontSize; var activeColor = props.activeColor; - var ref = m$1(activeColor[props.sliderType]); - var sliderValue = ref[0]; - var setSliderValue = ref[1]; + var ref$1 = m$1(activeColor[props.sliderType]); + var sliderValue = ref$1[0]; + var setSliderValue = ref$1[1]; var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); setSliderValue(val); var onKeypress = A(function (e) { @@ -1478,25 +1518,29 @@ function IroInput(props) { return value; }, [setSliderValue, props.sliderType]); return (v("div", { className: "IroSliderValue" }, - v("span", { className: "IroSliderLabel", style: { - display: 'inline-block', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(props.handleRadius) : cssValue(0), - width: cssValue(10) - } }, name), v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { display: 'inline-block', - width: type === 'kelvin' ? cssValue(40) : cssValue(33), + width: type === 'kelvin' ? cssValue(40) : inputWidth, height: cssValue(18), - fontSize: '12px', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(5) : cssValue(0) + fontSize: fontSize, + padding: cssValue(2) }, type: "text", disabled: disabled, value: sliderValue }))); } IroInput.defaultProps = { disabled: false }; +function IroLabel(props) { + var name = props.sliderType[0].toUpperCase(); + return (v("div", { className: "IroSliderLabel", style: { + display: 'inline-block', + width: cssValue(10), + height: cssValue(12), + lineHeight: cssValue(12), + fontSize: props.layoutDirection === 'horizontal' ? cssValue(12) : cssValue(14) + } }, name)); +} + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1517,9 +1561,11 @@ function IroSlider(props) { } return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( // add wrapper element - v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', + v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: props.layoutDirection === 'vertical' ? cssValue(props.width) : 'unset', + height: props.layoutDirection === 'horizontal' ? cssValue(props.width) : 'unset', flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', - alignItems: 'baseline'}, + alignItems: props.layoutDirection === 'horizontal' ? 'center' : 'baseline', + justifyContent: 'space-between'}, rootStyles) }, v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { position: 'relative', @@ -1540,7 +1586,8 @@ function IroSlider(props) { background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); + props.showLabel && (v(IroLabel, { sliderType: props.sliderType, layoutDirection: props.layoutDirection, handleRadius: props.handleRadius })), + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, sliderSize: props.sliderSize, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); @@ -1943,7 +1990,8 @@ var IroColorPicker = /*@__PURE__*/(function (Component) { } } return (v("div", { class: "IroColorPicker", id: state.id, style: { - display: state.display + display: state.display, + flexDirection: props.layoutDirection === 'horizontal' ? 'row' : 'column' } }, layout.map(function (ref, componentIndex) { var UiComponent = ref.component; var options = ref.options; @@ -1956,7 +2004,7 @@ var IroColorPicker = /*@__PURE__*/(function (Component) { }(_)); IroColorPicker.defaultProps = Object.assign({}, iroColorPickerOptionDefaults, {colors: [], - display: 'block', + display: 'flex', id: null, layout: 'default', margin: null}); diff --git a/dist/iro.js b/dist/iro.js index 3678bb4..a5a21eb 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -737,6 +737,108 @@ return IroColor; }(); + /** + * @desc Get input field dimensions + * @param props - InputOptions + */ + function getInputDimensions(props) { + var sliderSize = props.sliderSize, + layoutDirection = props.layoutDirection; + var inputWidth; + var fontSize; + + if (layoutDirection === 'vertical') { + inputWidth = 30; + fontSize = 12; + } else { + inputWidth = sliderSize <= 30 ? 26 : sliderSize; + fontSize = sliderSize <= 30 ? 10 : 12; + } + + return { + inputWidth: inputWidth, + inputHeight: 18, + fontSize: fontSize + }; + } + /** + * @desc Clamp slider value between min and max values + * @param type - props.sliderType + * @param value - value to clamp + */ + + function clampSliderValue(props, value) { + function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); + } + + switch (props.sliderType) { + case 'hue': + return clamp(value, 0, 360); + + case 'saturation': + case 'value': + return clamp(value, 0, 100); + + case 'red': + case 'green': + case 'blue': + return clamp(value, 0, 255); + + case 'alpha': + return clamp(value, 0, 1); + + case 'kelvin': + var minTemperature = props.minTemperature, + maxTemperature = props.maxTemperature; + return clamp(value, minTemperature, maxTemperature); + } + } + /** + * @desc Get the current slider value from input field input + * @param props - slider props + * @param e - KeyboardEvent + */ + + function getSliderValueFromInputField(e) { + var target = e.target; + var valueNum = parseInt(target.value); // regex for digit or dot (.) + + if (!/^([0-9]|\.)$/i.test(e.key)) { + e.preventDefault(); + return valueNum; + } + + var valueString = target.value.toString(); + + if (target.selectionStart !== undefined) { + // cursor position + valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); + } else { + valueString = valueString + e.key.toString(); + } + + return +valueString; + } + /** + * @desc Get the current slider value from clipboard data + * @param props - slider props + * @param e - ClipboardEvent + */ + + function getSliderValueFromClipboard(props, e) { + // allow only whole or decimal numbers + var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; + var valueString = e.clipboardData.getData('text'); + + if (!r.test(valueString)) { + return 0; + } + + var valueNum = +valueString; + return clampSliderValue(props, valueNum); + } + var sliderDefaultOptions = { sliderShape: 'bar', sliderType: 'value', @@ -757,17 +859,30 @@ handleRadius = props.handleRadius, padding = props.padding, sliderShape = props.sliderShape; + var ishorizontal = props.layoutDirection === 'horizontal'; var length; - if (props.showInput) { - length = width - 55; + if (props.sliderLength) { + length = props.sliderLength; } else { - var _props$sliderLength; + // automatically calculate slider length + length = width - handleRadius; - length = (_props$sliderLength = props.sliderLength) != null ? _props$sliderLength : width; - } + if (props.showInput) { + var _getInputDimensions = getInputDimensions(props), + inputWidth = _getInputDimensions.inputWidth, + inputHeight = _getInputDimensions.inputHeight; + + length -= ishorizontal ? inputHeight : inputWidth; + length -= 3; // padding + } + + if (props.showLabel) { + length -= ishorizontal ? 12 : 10; + length -= 3; // padding + } + } // automatically calculate sliderSize if its not defined - var ishorizontal = props.layoutDirection === 'horizontal'; // automatically calculate sliderSize if its not defined sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2; @@ -820,7 +935,7 @@ var minTemperature = props.minTemperature, maxTemperature = props.maxTemperature; var temperatureRange = maxTemperature - minTemperature; - var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clmap percentage + var percent = (color.kelvin - minTemperature) / temperatureRange * 100; // clamp percentage return Math.max(0, Math.min(percent, 100)); @@ -976,83 +1091,6 @@ } } - /** - * @desc Clamp slider value between min and max values - * @param type - props.sliderType - * @param value - value to clamp - */ - function clampSliderValue(props, value) { - function clamp(num, min, max) { - return Math.min(Math.max(num, min), max); - } - - switch (props.sliderType) { - case 'hue': - return clamp(value, 0, 360); - - case 'saturation': - case 'value': - return clamp(value, 0, 100); - - case 'red': - case 'green': - case 'blue': - return clamp(value, 0, 255); - - case 'alpha': - return clamp(value, 0, 1); - - case 'kelvin': - var minTemperature = props.minTemperature, - maxTemperature = props.maxTemperature; - return clamp(value, minTemperature, maxTemperature); - } - } - /** - * @desc Get the current slider value from input field input - * @param props - slider props - * @param e - KeyboardEvent - */ - - function getSliderValueFromInputField(e) { - var target = e.target; - var valueNum = parseInt(target.value); // regex for digit or dot (.) - - if (!/^([0-9]|\.)$/i.test(e.key)) { - e.preventDefault(); - return valueNum; - } - - var valueString = target.value.toString(); - - if (target.selectionStart !== undefined) { - // cursor position - valueString = valueString.substring(0, target.selectionStart) + e.key.toString() + valueString.substring(target.selectionEnd); - } else { - valueString = valueString + e.key.toString(); - } - - return +valueString; - } - /** - * @desc Get the current slider value from clipboard data - * @param props - slider props - * @param e - ClipboardEvent - */ - - function getSliderValueFromClipboard(props, e) { - // allow only whole or decimal numbers - var r = /^[+]?([.]\d+|\d+([.]\d+)?)$/i; - var valueString = e.clipboardData.getData('text'); - - if (!r.test(valueString)) { - return 0; - } - - var valueNum = +valueString; - return clampSliderValue(props, valueNum); - } - var TAU = Math.PI * 2; // javascript's modulo operator doesn't produce positive numbers with negative input // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e @@ -1439,11 +1477,13 @@ function IroInput(props) { var disabled = props.disabled; var type = props.sliderType; - var name = type[0].toUpperCase(); + var ref = getInputDimensions(props); + var inputWidth = ref.inputWidth; + var fontSize = ref.fontSize; var activeColor = props.activeColor; - var ref = m$1(activeColor[props.sliderType]); - var sliderValue = ref[0]; - var setSliderValue = ref[1]; + var ref$1 = m$1(activeColor[props.sliderType]); + var sliderValue = ref$1[0]; + var setSliderValue = ref$1[1]; var val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); setSliderValue(val); var onKeypress = A(function (e) { @@ -1484,25 +1524,29 @@ return value; }, [setSliderValue, props.sliderType]); return (v("div", { className: "IroSliderValue" }, - v("span", { className: "IroSliderLabel", style: { - display: 'inline-block', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(props.handleRadius) : cssValue(0), - width: cssValue(10) - } }, name), v("input", { onKeyPress: onKeypress, onPaste: onPaste, className: "IroSliderInput", style: { display: 'inline-block', - width: type === 'kelvin' ? cssValue(40) : cssValue(33), + width: type === 'kelvin' ? cssValue(40) : inputWidth, height: cssValue(18), - fontSize: '12px', - marginLeft: props.layoutDirection === 'vertical' ? - cssValue(5) : cssValue(0) + fontSize: fontSize, + padding: cssValue(2) }, type: "text", disabled: disabled, value: sliderValue }))); } IroInput.defaultProps = { disabled: false }; + function IroLabel(props) { + var name = props.sliderType[0].toUpperCase(); + return (v("div", { className: "IroSliderLabel", style: { + display: 'inline-block', + width: cssValue(10), + height: cssValue(12), + lineHeight: cssValue(12), + fontSize: props.layoutDirection === 'horizontal' ? cssValue(12) : cssValue(14) + } }, name)); + } + function IroSlider(props) { var activeIndex = props.activeIndex; var activeColor = (activeIndex !== undefined && activeIndex < props.colors.length) ? props.colors[activeIndex] : props.color; @@ -1523,9 +1567,11 @@ } return (v(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return ( // add wrapper element - v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: 'max-content', + v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: props.layoutDirection === 'vertical' ? cssValue(props.width) : 'unset', + height: props.layoutDirection === 'horizontal' ? cssValue(props.width) : 'unset', flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', - alignItems: 'baseline'}, + alignItems: props.layoutDirection === 'horizontal' ? 'center' : 'baseline', + justifyContent: 'space-between'}, rootStyles) }, v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { position: 'relative', @@ -1546,7 +1592,8 @@ background: cssGradient('linear', props.layoutDirection === 'horizontal' ? 'to top' : 'to right', gradient)}, cssBorderStyles(props)) }), v(IroHandle, { isActive: true, index: activeColor.index, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePos.x, y: handlePos.y })), - props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); + props.showLabel && (v(IroLabel, { sliderType: props.sliderType, layoutDirection: props.layoutDirection, handleRadius: props.handleRadius })), + props.showInput && (v(IroInput, { disabled: props.disabled, sliderType: props.sliderType, sliderSize: props.sliderSize, activeColor: activeColor, handleRadius: props.handleRadius, layoutDirection: props.layoutDirection, minTemperature: props.minTemperature, maxTemperature: props.maxTemperature })))); })); } IroSlider.defaultProps = Object.assign({}, sliderDefaultOptions); @@ -1949,7 +1996,8 @@ } } return (v("div", { class: "IroColorPicker", id: state.id, style: { - display: state.display + display: state.display, + flexDirection: props.layoutDirection === 'horizontal' ? 'row' : 'column' } }, layout.map(function (ref, componentIndex) { var UiComponent = ref.component; var options = ref.options; @@ -1962,7 +2010,7 @@ }(_)); IroColorPicker.defaultProps = Object.assign({}, iroColorPickerOptionDefaults, {colors: [], - display: 'block', + display: 'flex', id: null, layout: 'default', margin: null}); diff --git a/dist/iro.min.js b/dist/iro.min.js index 455df77..1715ddf 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,$,n,H,F,M={},L=[],W=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function C(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+a(t.r)+a(t.g)+a(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+a(t.r)+a(t.g)+a(t.b)+a(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function f(t){var n,i=t.width,e=t.sliderSize,r=t.borderWidth,o=t.handleRadius,u=t.padding,l=t.sliderShape,s=(n=t.showInput?i-55:null!=(n=t.sliderLength)?n:i,"horizontal"===t.layoutDirection),e=null!=e?e:2*u+2*o;return"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*u-2*o,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-r/2}:{handleStart:e/2,handleRange:n-e,radius:e/2,x:0,y:0,width:s?e:n,height:s?n:e}}function lt(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function ct(t,n){return(t%n+n)%n}var d,at=2*Math.PI,ft=function(t,n){return Math.sqrt(t*t+n*n)};function ht(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function dt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),ct(n,360)}function vt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=ht(t),r=(n=r-n,i=e-i,dt(t,Math.atan2(-i,-n)*(360/at))),e=Math.min(ft(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function pt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function gt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function At(t){return N=1,n=Tt,t=t,(e=_t(wt++,2)).t=n,e.c||(e.i=[i?i(t):Tt(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=R),e.i;var n,i,e}function Rt(t,n){return N=8,i=function(){return t},n=n,o=_t(wt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=xt.shift();)if(n.m)try{n.I.f.forEach(E),n.I.f.forEach(zt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){R=null,Mt&&Mt(t)},x.p=function(t){jt&&jt(t),wt=0;t=(R=t.c).I;t&&(t.f.forEach(E),t.f.forEach(zt),t.f=[])},x.diffed=function(t){It&&It(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==xt.push(t)&&kt===x.requestAnimationFrame||((kt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),R=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(E),n.f=n.f.filter(function(t){return!t.i||zt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),Ot&&Ot(t,i)},x.unmount=function(t){St&&St(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{E(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function E(t){var n=R,i=t.c;"function"==typeof i&&(t.c=void 0,i()),R=n}function zt(t){var n=R;t.c=t.i(),R=n}function Tt(t,n){return"function"==typeof n?n(t):n}function Pt(o){var t=o.disabled,u=o.sliderType,n=u[0].toUpperCase(),l=o.activeColor,i=At(l[o.sliderType]),e=i[0],i=i[1],r=(i("alpha"===u?l[o.sliderType].toFixed(2):Math.round(l[o.sliderType])),Rt(function(t){r=(n=t).target,i=parseInt(r.value);var n,i,e,r=/^([0-9]|\.)$/i.test(n.key)?(i=r.value.toString(),void 0!==r.selectionStart?i=i.substring(0,r.selectionStart)+n.key.toString()+i.substring(r.selectionEnd):i+=n.key.toString(),+i):(n.preventDefault(),i);return"kelvin"===u?(n=r.toString().length,i=o.minTemperature.toString().length,(e=o.maxTemperature.toString().length)o.maxTemperature?(t.preventDefault(),l[o.sliderType]=o.maxTemperature):(t.preventDefault(),l[o.sliderType]=r))):(t.preventDefault(),l[o.sliderType]=st(o,r)),r},[i,o.sliderType])),i=Rt(function(t){t.preventDefault();n=o,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?st(n,+t):0;return l[o.sliderType]=n},[i,o.sliderType]);return h("div",{className:"IroSliderValue"},h("span",{className:"IroSliderLabel",style:{display:"inline-block",marginLeft:"vertical"===o.layoutDirection?b(o.handleRadius):"0px",width:"10px"}},n),h("input",{onKeyPress:r,onPaste:i,className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===u?"40px":"33px",height:"18px",fontSize:"12px",marginLeft:"vertical"===o.layoutDirection?"5px":"0px"},type:"text",disabled:t,value:e}))}function z(e){var t=e.activeIndex,r=void 0!==t&&t=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+c(t.r)+c(t.g)+c(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+c(t.r)+c(t.g)+c(t.b)+c(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function lt(t){var n,i=t.sliderSize,t="vertical"===t.layoutDirection?(n=30,12):(n=i<=30?26:i,i<=30?10:12);return{inputWidth:n,inputHeight:18,fontSize:t}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function f(t){var n,i,e,r=t.width,o=t.sliderSize,u=t.borderWidth,l=t.handleRadius,s=t.padding,a=t.sliderShape,c="horizontal"===t.layoutDirection;return t.sliderLength?e=t.sliderLength:(e=r-l,t.showInput&&(n=(i=lt(t)).inputWidth,i=i.inputHeight,e=e-(c?i:n)-3),t.showLabel&&(e=e-(c?12:10)-3)),o=null!=o?o:2*s+2*l,"circle"===a?{handleStart:t.padding+t.handleRadius,handleRange:r-2*s-2*l,width:r,height:r,cx:r/2,cy:r/2,radius:r/2-u/2}:{handleStart:o/2,handleRange:e-o,radius:o/2,x:0,y:0,width:c?o:e,height:c?e:o}}function at(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function ct(t,n){return(t%n+n)%n}var d,ft=2*Math.PI,ht=function(t,n){return Math.sqrt(t*t+n*n)};function dt(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),ct(n,360)}function pt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=dt(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/ft))),e=Math.min(ht(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function yt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function zt(t){return R=1,n=Ht,t=t,(e=At(kt++,2)).t=n,e.c||(e.i=[i?i(t):Ht(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=z),e.i;var n,i,e}function Rt(t,n){return R=8,i=function(){return t},n=n,o=At(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(N),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){z=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(z=t.c).I;t&&(t.f.forEach(N),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),z=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(N),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){_t&&_t(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{N(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function N(t){var n=z,i=t.c;"function"==typeof i&&(t.c=void 0,i()),z=n}function Tt(t){var n=z;t.c=t.i(),z=n}function Ht(t,n){return"function"==typeof n?n(t):n}function Pt(o){var t=o.disabled,u=o.sliderType,n=lt(o),i=n.inputWidth,n=n.fontSize,l=o.activeColor,e=zt(l[o.sliderType]),r=e[0],e=e[1];return e("alpha"===u?l[o.sliderType].toFixed(2):Math.round(l[o.sliderType])),h("div",{className:"IroSliderValue"},h("input",{onKeyPress:Rt(function(t){r=(n=t).target,i=parseInt(r.value);var n,i,e,r=/^([0-9]|\.)$/i.test(n.key)?(i=r.value.toString(),void 0!==r.selectionStart?i=i.substring(0,r.selectionStart)+n.key.toString()+i.substring(r.selectionEnd):i+=n.key.toString(),+i):(n.preventDefault(),i);return"kelvin"===u?(n=r.toString().length,i=o.minTemperature.toString().length,(e=o.maxTemperature.toString().length)o.maxTemperature?(t.preventDefault(),l[o.sliderType]=o.maxTemperature):(t.preventDefault(),l[o.sliderType]=r))):(t.preventDefault(),l[o.sliderType]=st(o,r)),r},[e,o.sliderType]),onPaste:Rt(function(t){t.preventDefault();n=o,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?st(n,+t):0;return l[o.sliderType]=n},[e,o.sliderType]),className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===u?"40px":i,height:"18px",fontSize:n,padding:"2px"},type:"text",disabled:t,value:r}))}function $t(t){var n=t.sliderType[0].toUpperCase();return h("div",{className:"IroSliderLabel",style:{display:"inline-block",width:"10px",height:"12px",lineHeight:"12px",fontSize:"horizontal"===t.layoutDirection?"12px":"14px"}},n)}function E(e){var t=e.activeIndex,r=void 0!==t&&t { layout.map(({component: UiComponent, options: options }, componentIndex: number) => ( diff --git a/src/Input.tsx b/src/Input.tsx index bf5ac92..d7e0a4a 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -6,11 +6,13 @@ import { SliderType, getSliderValueFromInputField, getSliderValueFromClipboard, + getInputDimensions, clampSliderValue } from '@irojs/iro-core'; interface IroInputProps { sliderType: SliderType; + sliderSize: number; activeColor: IroColor; layoutDirection: LayoutDirection; handleRadius: number; @@ -22,7 +24,7 @@ interface IroInputProps { export function IroInput(props: IroInputProps) { const disabled = props.disabled; const type = props.sliderType; - const name = type[0].toUpperCase(); + const {inputWidth, fontSize} = getInputDimensions(props); const activeColor = props.activeColor; const [sliderValue, setSliderValue] = useState(activeColor[props.sliderType]); const val = (type === 'alpha') ? activeColor[props.sliderType].toFixed(2) : Math.round(activeColor[props.sliderType]); @@ -69,28 +71,16 @@ export function IroInput(props: IroInputProps) { return (
- - {name} - @@ -98,10 +102,17 @@ export function IroSlider(props: IroSliderProps) { y={ handlePos.y } // todo: use percentage />
+ {props.showLabel && ( + )} {props.showInput && ( Date: Tue, 3 May 2022 13:33:11 +0200 Subject: [PATCH 10/11] discard align:baseline; default to align:center --- dist/iro.es.js | 2 +- dist/iro.js | 2 +- dist/iro.min.js | 2 +- docs/.vuepress/theme/js/iro.es.js | 2 +- src/Slider.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/iro.es.js b/dist/iro.es.js index ee86821..91a4f26 100644 --- a/dist/iro.es.js +++ b/dist/iro.es.js @@ -1564,7 +1564,7 @@ function IroSlider(props) { v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: props.layoutDirection === 'vertical' ? cssValue(props.width) : 'unset', height: props.layoutDirection === 'horizontal' ? cssValue(props.width) : 'unset', flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', - alignItems: props.layoutDirection === 'horizontal' ? 'center' : 'baseline', + alignItems: 'center', justifyContent: 'space-between'}, rootStyles) }, v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { diff --git a/dist/iro.js b/dist/iro.js index a5a21eb..18bab80 100644 --- a/dist/iro.js +++ b/dist/iro.js @@ -1570,7 +1570,7 @@ v("div", { className: "IroSliderWrapper", style: Object.assign({}, {width: props.layoutDirection === 'vertical' ? cssValue(props.width) : 'unset', height: props.layoutDirection === 'horizontal' ? cssValue(props.width) : 'unset', flexDirection: props.layoutDirection === 'horizontal' ? 'column' : 'row', - alignItems: props.layoutDirection === 'horizontal' ? 'center' : 'baseline', + alignItems: 'center', justifyContent: 'space-between'}, rootStyles) }, v("div", Object.assign({}, rootProps, { className: "IroSlider", style: { diff --git a/dist/iro.min.js b/dist/iro.min.js index 1715ddf..2da823f 100644 --- a/dist/iro.min.js +++ b/dist/iro.min.js @@ -4,4 +4,4 @@ * 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,x,P,n,$,D,M={},W=[],C=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function j(t,n){for(var i in n)t[i]=n[i];return t}function F(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var e,r,o,u={};for(o in n)"key"==o?e=n[o]:"ref"==o?r=n[o]:u[o]=n[o];if(2=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+c(t.r)+c(t.g)+c(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+c(t.r)+c(t.g)+c(t.b)+c(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function lt(t){var n,i=t.sliderSize,t="vertical"===t.layoutDirection?(n=30,12):(n=i<=30?26:i,i<=30?10:12);return{inputWidth:n,inputHeight:18,fontSize:t}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function f(t){var n,i,e,r=t.width,o=t.sliderSize,u=t.borderWidth,l=t.handleRadius,s=t.padding,a=t.sliderShape,c="horizontal"===t.layoutDirection;return t.sliderLength?e=t.sliderLength:(e=r-l,t.showInput&&(n=(i=lt(t)).inputWidth,i=i.inputHeight,e=e-(c?i:n)-3),t.showLabel&&(e=e-(c?12:10)-3)),o=null!=o?o:2*s+2*l,"circle"===a?{handleStart:t.padding+t.handleRadius,handleRange:r-2*s-2*l,width:r,height:r,cx:r/2,cy:r/2,radius:r/2-u/2}:{handleStart:o/2,handleRange:e-o,radius:o/2,x:0,y:0,width:c?o:e,height:c?e:o}}function at(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function ct(t,n){return(t%n+n)%n}var d,ft=2*Math.PI,ht=function(t,n){return Math.sqrt(t*t+n*n)};function dt(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),ct(n,360)}function pt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=dt(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/ft))),e=Math.min(ht(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function yt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function zt(t){return R=1,n=Ht,t=t,(e=At(kt++,2)).t=n,e.c||(e.i=[i?i(t):Ht(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=z),e.i;var n,i,e}function Rt(t,n){return R=8,i=function(){return t},n=n,o=At(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(N),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){z=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(z=t.c).I;t&&(t.f.forEach(N),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),z=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(N),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){_t&&_t(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{N(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function N(t){var n=z,i=t.c;"function"==typeof i&&(t.c=void 0,i()),z=n}function Tt(t){var n=z;t.c=t.i(),z=n}function Ht(t,n){return"function"==typeof n?n(t):n}function Pt(o){var t=o.disabled,u=o.sliderType,n=lt(o),i=n.inputWidth,n=n.fontSize,l=o.activeColor,e=zt(l[o.sliderType]),r=e[0],e=e[1];return e("alpha"===u?l[o.sliderType].toFixed(2):Math.round(l[o.sliderType])),h("div",{className:"IroSliderValue"},h("input",{onKeyPress:Rt(function(t){r=(n=t).target,i=parseInt(r.value);var n,i,e,r=/^([0-9]|\.)$/i.test(n.key)?(i=r.value.toString(),void 0!==r.selectionStart?i=i.substring(0,r.selectionStart)+n.key.toString()+i.substring(r.selectionEnd):i+=n.key.toString(),+i):(n.preventDefault(),i);return"kelvin"===u?(n=r.toString().length,i=o.minTemperature.toString().length,(e=o.maxTemperature.toString().length)o.maxTemperature?(t.preventDefault(),l[o.sliderType]=o.maxTemperature):(t.preventDefault(),l[o.sliderType]=r))):(t.preventDefault(),l[o.sliderType]=st(o,r)),r},[e,o.sliderType]),onPaste:Rt(function(t){t.preventDefault();n=o,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?st(n,+t):0;return l[o.sliderType]=n},[e,o.sliderType]),className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===u?"40px":i,height:"18px",fontSize:n,padding:"2px"},type:"text",disabled:t,value:r}))}function $t(t){var n=t.sliderType[0].toUpperCase();return h("div",{className:"IroSliderLabel",style:{display:"inline-block",width:"10px",height:"12px",lineHeight:"12px",fontSize:"horizontal"===t.layoutDirection?"12px":"14px"}},n)}function E(e){var t=e.activeIndex,r=void 0!==t&&t=t.b/t.r?r=n:e=n;return n},i=o,(t=[{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=r({},n,t),this.onChange){var i,e={h:!1,v:!1,s:!1,a:!1};for(i in n)e[i]=t[i]!=n[i];this.$=t,(e.h||e.s||e.v||e.a)&&this.onChange(this,e)}else this.$=t}},{key:"hsva",get:function(){return r({},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=r({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return u(o.rgbToKelvin(this.raw_rgb))},set:function(t){this.rgb=o.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=r({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=r({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=r({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=o.hsvToRgb(this.$),n=t.r,i=t.g,t=t.b;return{r:u(n),g:u(i),b:u(t)}},set:function(t){this.hsv=r({},o.rgbToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"raw_rgb",get:function(){var t=o.hsvToRgb(this.$);return{r:t.r,g:t.g,b:t.b}}},{key:"rgba",get:function(){return r({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=o.hsvToHsl(this.$),n=t.h,i=t.s,t=t.l;return{h:u(n),s:u(i),l:u(t)}},set:function(t){this.hsv=r({},o.hslToHsv(t),{a:void 0===t.a?this.alpha:t.a})}},{key:"hsla",get:function(){return r({},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,e,r,o=1;if((n=X.exec(t))?(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255)):(n=Y.exec(t))&&(i=l(n[1],255),e=l(n[2],255),r=l(n[3],255),o=l(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:e,b:r,a:o}}},{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"#"+a(t.r)+a(t.g)+a(t.b)},set:function(t){var n,i,e,r,o=255;if((n=it.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3])):(n=et.exec(t))?(i=17*s(n[1]),e=17*s(n[2]),r=17*s(n[3]),o=17*s(n[4])):(n=rt.exec(t))?(i=s(n[1]),e=s(n[2]),r=s(n[3])):(n=ot.exec(t))&&(i=s(n[1]),e=s(n[2]),r=s(n[3]),o=s(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:e,b:r,a:o/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+a(t.r)+a(t.g)+a(t.b)+a(ut(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,e,r,o=1;if((n=tt.exec(t))?(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100)):(n=nt.exec(t))&&(i=l(n[1],360),e=l(n[2],100),r=l(n[3],100),o=l(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:e,l:r,a:o}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}])&&U(i.prototype,t),n&&U(i,n),Object.defineProperty(i,"prototype",{writable:!1}),o}();function lt(t){var n,i=t.sliderSize,t="vertical"===t.layoutDirection?(n=30,12):(n=i<=30?26:i,i<=30?10:12);return{inputWidth:n,inputHeight:18,fontSize:t}}function st(t,n){function i(t,n,i){return Math.min(Math.max(t,n),i)}switch(t.sliderType){case"hue":return i(n,0,360);case"saturation":case"value":return i(n,0,100);case"red":case"green":case"blue":return i(n,0,255);case"alpha":return i(n,0,1);case"kelvin":return i(n,t.minTemperature,t.maxTemperature)}}function f(t){var n,i,e,r=t.width,o=t.sliderSize,u=t.borderWidth,l=t.handleRadius,s=t.padding,c=t.sliderShape,a="horizontal"===t.layoutDirection;return t.sliderLength?e=t.sliderLength:(e=r-l,t.showInput&&(n=(i=lt(t)).inputWidth,i=i.inputHeight,e=e-(a?i:n)-3),t.showLabel&&(e=e-(a?12:10)-3)),o=null!=o?o:2*s+2*l,"circle"===c?{handleStart:t.padding+t.handleRadius,handleRange:r-2*s-2*l,width:r,height:r,cx:r/2,cy:r/2,radius:r/2-u/2}:{handleStart:o/2,handleRange:e-o,radius:o/2,x:0,y:0,width:a?o:e,height:a?e:o}}function ct(t,n){var i=f(t),e=i.width,r=i.height,o=i.handleRange,i=i.handleStart,u="horizontal"===t.layoutDirection,e=u?e/2:r/2,r=i+function(t,n){var i=n.hsva,e=n.rgb;switch(t.sliderType){case"red":return e.r/2.55;case"green":return e.g/2.55;case"blue":return e.b/2.55;case"alpha":return 100*i.a;case"kelvin":var r=t.minTemperature,o=t.maxTemperature,o=(n.kelvin-r)/(o-r)*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;default:return i.v}}(t,n)/100*o;return u&&(r=-1*r+o+2*i),{x:u?e:r,y:u?r:e}}function at(t,n){return(t%n+n)%n}var d,ft=2*Math.PI,ht=function(t,n){return Math.sqrt(t*t+n*n)};function dt(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function p(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function vt(t,n,i){var e=t.wheelAngle,t=t.wheelDirection;return i&&"clockwise"===t?n=e+n:"clockwise"===t?n=360-e+n:i&&"anticlockwise"===t?n=e+180-n:"anticlockwise"===t&&(n=e-n),at(n,360)}function pt(t,n,i){var e=p(t),r=e.cx,e=e.cy,o=dt(t),r=(n=r-n,i=e-i,vt(t,Math.atan2(-i,-n)*(360/ft))),e=Math.min(ht(n,i),o);return{h:Math.round(r),s:Math.round(100/o*e)}}function g(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function gt(t,n,i){var t=g(t),e=t.width,r=t.height,t=t.radius,i=(i-t)/(r-2*t)*100;return{s:Math.max(0,Math.min((n-t)/(e-2*t)*100,100)),v:Math.max(0,Math.min(100-i,100))}}function yt(t,n,i,e){for(var r=0;r=n.i.length&&n.i.push({}),n.i[t]}function zt(t){return R=1,n=Ht,t=t,(e=At(kt++,2)).t=n,e.c||(e.i=[i?i(t):Ht(void 0,t),function(t){t=e.t(e.i[0],t);e.i[0]!==t&&(e.i=[t,e.i[1]],e.c.setState({}))}],e.c=z),e.i;var n,i,e}function Rt(t,n){return R=8,i=function(){return t},n=n,o=At(kt++,7),e=o.I,r=n,e&&e.length===r.length&&!r.some(function(t,n){return t!==e[n]})||(o.i=i(),o.I=n,o.f=i),o.i;var i,e,r,o}function Nt(){for(var n;n=Mt.shift();)if(n.m)try{n.I.f.forEach(N),n.I.f.forEach(Tt),n.I.f=[]}catch(t){n.I.f=[],x.o(t,n.d)}}x.e=function(t){z=null,jt&&jt(t)},x.p=function(t){It&&It(t),kt=0;t=(z=t.c).I;t&&(t.f.forEach(N),t.f.forEach(Tt),t.f=[])},x.diffed=function(t){Ot&&Ot(t);t=t.c;t&&t.I&&t.I.f.length&&(1!==Mt.push(t)&&xt===x.requestAnimationFrame||((xt=x.requestAnimationFrame)||function(t){function n(){clearTimeout(e),Et&&cancelAnimationFrame(i),setTimeout(t)}var i,e=setTimeout(n,100);Et&&(i=requestAnimationFrame(n))})(Nt)),z=null},x.c=function(t,i){i.some(function(n){try{n.f.forEach(N),n.f=n.f.filter(function(t){return!t.i||Tt(t)})}catch(t){i.some(function(t){t.f&&(t.f=[])}),i=[],x.o(t,n.d)}}),St&&St(t,i)},x.unmount=function(t){_t&&_t(t);var n,t=t.c;t&&t.I&&(t.I.i.forEach(function(t){try{N(t)}catch(t){n=t}}),n&&x.o(n,t.d))};var Et="function"==typeof requestAnimationFrame;function N(t){var n=z,i=t.c;"function"==typeof i&&(t.c=void 0,i()),z=n}function Tt(t){var n=z;t.c=t.i(),z=n}function Ht(t,n){return"function"==typeof n?n(t):n}function Pt(o){var t=o.disabled,u=o.sliderType,n=lt(o),i=n.inputWidth,n=n.fontSize,l=o.activeColor,e=zt(l[o.sliderType]),r=e[0],e=e[1];return e("alpha"===u?l[o.sliderType].toFixed(2):Math.round(l[o.sliderType])),h("div",{className:"IroSliderValue"},h("input",{onKeyPress:Rt(function(t){r=(n=t).target,i=parseInt(r.value);var n,i,e,r=/^([0-9]|\.)$/i.test(n.key)?(i=r.value.toString(),void 0!==r.selectionStart?i=i.substring(0,r.selectionStart)+n.key.toString()+i.substring(r.selectionEnd):i+=n.key.toString(),+i):(n.preventDefault(),i);return"kelvin"===u?(n=r.toString().length,i=o.minTemperature.toString().length,(e=o.maxTemperature.toString().length)o.maxTemperature?(t.preventDefault(),l[o.sliderType]=o.maxTemperature):(t.preventDefault(),l[o.sliderType]=r))):(t.preventDefault(),l[o.sliderType]=st(o,r)),r},[e,o.sliderType]),onPaste:Rt(function(t){t.preventDefault();n=o,t=(t=t).clipboardData.getData("text");var n=/^[+]?([.]\d+|\d+([.]\d+)?)$/i.test(t)?st(n,+t):0;return l[o.sliderType]=n},[e,o.sliderType]),className:"IroSliderInput",style:{display:"inline-block",width:"kelvin"===u?"40px":i,height:"18px",fontSize:n,padding:"2px"},type:"text",disabled:t,value:r}))}function $t(t){var n=t.sliderType[0].toUpperCase();return h("div",{className:"IroSliderLabel",style:{display:"inline-block",width:"10px",height:"12px",lineHeight:"12px",fontSize:"horizontal"===t.layoutDirection?"12px":"14px"}},n)}function E(e){var t=e.activeIndex,r=void 0!==t&&t Date: Wed, 4 May 2022 12:13:31 +0200 Subject: [PATCH 11/11] update changelog --- CHANGELOG.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48a4a38..18a49a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,24 @@ ### Changelog +#### 5.6.0 + +##### Fixes + +- Fixed an issue where alpha value was reset to 1 after sliding both alpha and +any of the r/g/b sliders (#227). +- Fixed an issue with inaccurate kelvin conversion (replaced with more accurate script). + +##### Additions + +- Added optional label and input elements. Picker color can now be set via input field. +- Added optional `showInput`, `showLabel` and `disabled` slider options for displaying an input field and/or label field next to a slider. +- Added optional `sliderLength` slider option to set each slider's dimension seperately. + +##### Changes +- Utilize display:flex on the entire wrapper component. +- Wrap Slider components in a flex wrapper for easy positioning of elements. +- Add IroColor.raw_rgb getter for kelvin conversion issues (returns float numbers instead of int). + #### 5.5.2 ##### Fixes