UNPKG

cyberalien-color

Version:

Color library

1,469 lines (1,312 loc) 43.7 kB
/** * This file is part of the cyberalien-color package. * * (c) Vjacheslav Trushkin <cyberalien@gmail.com> * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ "use strict"; const Keywords = require('./keywords'); /** * Color class * * You can set and get color or components in HSL and RGB color spaces, * import/export color from/to different commonly used formats, mix colors. * Class automatically converts between color spaces when needed. * * Class automatically converts between color spaces when needed. */ class Color { /** * @ignore */ constructor() { // Reset color spaces this._rgb = this._rgbRounded = this._hsl = this._hslRounded = this._luminance = null; this._alpha = 1; } /** * Get keywords object * * @returns {Object} */ static keywords() { return Keywords; } /** * Set values */ /** * Set value in RGB color space. * Setting RGB color resets alpha to 1 * * @param {number} red Red color component in 0-255 range * @param {number} green Green color component in 0-255 range * @param {number} blue Blue color component in 0-255 range * @param {boolean} [rounded] True if values are rounded. * Used for performance to avoid rounding values when its not needed. * * @returns {Color} Current color instance for method chaining */ setRGB(red, green, blue, rounded) { return this._setRGBArray([red, green, blue, 1], rounded === void 0 ? false : rounded); } /** * Set value in RGB color space with alpha channel. * * @param {number} red Red color component in 0-255 range * @param {number} green Green color component in 0-255 range * @param {number} blue Blue color component in 0-255 range * @param {number} alpha Alpha in 0-1 range * @param {boolean} [rounded] True if values are rounded. * Used for performance to avoid rounding values when its not needed. * * @returns {Color} Current color instance for method chaining */ setRGBA(red, green, blue, alpha, rounded) { return this._setRGBArray([red, green, blue, alpha], rounded === void 0 ? false : rounded); } /** * Set value as RGB array. * If alpha channel is missing, alpha will be reset to 1 * * @param {Array} color Array of color components * @param {boolean|Array} [rounded] True if values are rounded or array of rounded values. * Used for performance to avoid rounding values when its not needed. * * @returns {Color|null} Current color instance for method chaining, null on failure */ setRGBArray(color, rounded) { this._setRGBArray(color.slice(0), typeof rounded === 'boolean' ? rounded : false); if (rounded !== void 0 && rounded instanceof Array) { this._rgbRounded = rounded.slice(0); } return this; } /** * Set value in HSL color space. * Setting HSL color resets alpha to 1 * * @param {number} hue Hue color component in 0-360 range * @param {number} saturation Saturation color component in 0-100 range * @param {number} lightness Lightness color component in 0-100 range * @param {boolean} [rounded] True if values are rounded. * Used for performance to avoid rounding values when its not needed. * * @returns {Color} Current color instance for method chaining */ setHSL(hue, saturation, lightness, rounded) { return this._setHSLArray([hue, saturation, lightness, 1], rounded === void 0 ? false : rounded); } /** * Set value in HSL color space with alpha channel. * * @param {number} hue Hue color component in 0-360 range * @param {number} saturation Saturation color component in 0-100 range * @param {number} lightness Lightness color component in 0-100 range * @param {number} alpha Alpha in 0-1 range * @param {boolean} [rounded] True if values are rounded. * Used for performance to avoid rounding values when its not needed. * * @returns {Color} Current color instance for method chaining */ setHSLA(hue, saturation, lightness, alpha, rounded) { return this._setHSLArray([hue, saturation, lightness, alpha], rounded === void 0 ? false : rounded); } /** * Set value as HSL array. * If alpha channel is missing, alpha will be reset to 1 * * @param {Array} color Array of color components * @param {boolean|Array} [rounded] True if values are rounded or array of rounded values. * Used for performance to avoid rounding values when its not needed. * * @returns {Color|null} Current color instance for method chaining, null on failure */ setHSLArray(color, rounded) { this._setHSLArray(color.slice(0), typeof rounded === 'boolean' ? rounded : false); if (rounded !== void 0 && rounded instanceof Array) { this._hslRounded = rounded.slice(0); } return this; } /** * Set alpha channel value * * @param {number} value Alpha value in 0-1 range * * @returns {Color} Current color instance for method chaining */ setAlpha(value) { this._alpha = value; return this; } /** * Set red color component * * @param {number} value Red color component in 0-255 range * @param {boolean} [rounded] True if value is rounded. * * @returns {Color} Current color instance for method chaining */ setRed(value, rounded) { return this._setRGB(0, value, rounded === void 0 ? false : rounded); } /** * Set green color component * * @param {number} value Green color component in 0-255 range * @param {boolean} [rounded] True if value is rounded. * * @returns {Color} Current color instance for method chaining */ setGreen(value, rounded) { return this._setRGB(1, value, rounded === void 0 ? false : rounded); } /** * Set blue color component * * @param {number} value Blue color component in 0-255 range * @param {boolean} [rounded] True if value is rounded. * * @returns {Color} Current color instance for method chaining */ setBlue(value, rounded) { return this._setRGB(2, value, rounded === void 0 ? false : rounded); } /** * Set hue color component * * @param {number} value Hue color component in 0-360 range * @param {boolean} [rounded] True if value is rounded. * * @returns {Color} Current color instance for method chaining */ setHue(value, rounded) { return this._setHSL(0, value, rounded === void 0 ? false : rounded); } /** * Set saturation color component * * @param {number} value Saturation color component in 0-100 range * @param {boolean} [rounded] True if value is rounded. * * @returns {Color} Current color instance for method chaining */ setSaturation(value, rounded) { return this._setHSL(1, value, rounded === void 0 ? false : rounded); } /** * Set lightness color component * * @param {number} value Lightness color component in 0-100 range * @param {boolean} [rounded] True if value is rounded. * * @returns {Color} Current color instance for method chaining */ setLightness(value, rounded) { return this._setHSL(2, value, rounded === void 0 ? false : rounded); } /** * Mix with another color * * @param {Color} color Color to mix this color with * @param {number} [weight] Percentage of mixed color to be included in mix * * @returns {Color} Current color instance for method chaining */ mix(color, weight) { weight = weight === void 0 ? 50 : weight; if (weight <= 0) { return this; } if (weight >= 100) { this.reset(); this._setRGBArray(color.getRGBA()); return this; } if (this._rgb === null) { this._convertToRGB(); } let rgb = color.getRGBA(), mix2 = weight / 100, // weight of another color mix1 = 1 - mix2; // weight of this color return this._setRGBArray([ this._rgb[0] * mix1 + rgb[0] * mix2, this._rgb[1] * mix1 + rgb[1] * mix2, this._rgb[2] * mix1 + rgb[2] * mix2, this._alpha * mix1 + rgb[3] * mix2 ]); } /* * Get values */ /** * Get RGB value as array * * @param {boolean} [round] True if result should be rounded * * @return {Array} Array of color values */ getRGB(round) { if (this._rgb === null) { this._convertToRGB(); } if (round && this._rgbRounded === null) { this._roundRGB(); } return round ? this._rgbRounded.slice(0) : this._rgb.slice(0); } /** * Get RGB value as array with alpha channel * * @param {boolean} [round] True if result should be rounded * * @return {Array} Array of color values */ getRGBA(round) { let result = this.getRGB(round); result.push(this._alpha); return result; } /** * Get HSL value as array * * @param {boolean} [round] True if result should be rounded * * @return {Array} Array of color values */ getHSL(round) { if (this._hsl === null) { this._convertToHSL(); } if (round && this._hslRounded === null) { this._roundHSL(); } return round ? this._hslRounded.slice(0) : this._hsl.slice(0); } /** * Get HSL value as array with alpha channel * * @param {boolean} [round] True if result should be rounded * * @return {Array} Array of color values */ getHSLA(round) { let result = this.getHSL(round); result.push(this._alpha); return result; } /** * Get alpha value * * @returns {number} Alpha value in 0-1 range */ getAlpha() { return this._alpha; } /** * Get red color component * * @param {boolean} [round] True if result should be rounded * * @returns {number} Color component in 0-255 range */ getRed(round) { return this._getRGB(0, round); } /** * Get green color component * * @param {boolean} [round] True if result should be rounded * * @returns {number} Color component in 0-255 range */ getGreen(round) { return this._getRGB(1, round); } /** * Get blue color component * * @param {boolean} [round] True if result should be rounded * * @returns {number} Color component in 0-255 range */ getBlue(round) { return this._getRGB(2, round); } /** * Get hue color component * * @param {boolean} [round] True if result should be rounded * * @returns {number} Color component in 0-360 range */ getHue(round) { return this._getHSL(0, round); } /** * Get saturation color component * * @param {boolean} [round] True if result should be rounded * * @returns {number} Color component in 0-100 range */ getSaturation(round) { return this._getHSL(1, round); } /** * Get lightness color component * * @param {boolean} [round] True if result should be rounded * * @returns {number} Color component in 0-100 range */ getLightness(round) { return this._getHSL(2, round); } /** * Get luminance * * @returns {number} */ getLuminance() { if (this._luminance !== null) { return this._luminance; } let values = []; if (this._rgb === null) { this._convertToRGB(); } for (let i = 0; i < 3; i++) { let value = this._rgb[i] / 255; values[i] = value < .03928 ? value / 12.92 : Math.pow((value + .055) / 1.055, 2.4); } this._luminance = values[0] * .2126 + values[1] * .7152 + values[2] * 0.0722; return this._luminance; } /** * Calculate contrast between this and another color * * @param {Color|number} color Color or color's luminance value * * @returns {number} Contrast in 1-21 range */ getContrast(color) { let lum1 = this.getLuminance() + 0.05, lum2 = (typeof color === 'number' ? color : color.getLuminance()) + 0.05; return lum1 > lum2 ? lum1 / lum2 : lum2 / lum1; } /* * Misc functions */ /** * Reset values. * * @returns {Color} Current color instance for method chaining */ reset() { this._rgb = this._rgbRounded = this._hsl = this._hslRounded = this._luminance = null; this._alpha = 1; return this; } /** * Normalize all values. * * @returns {Color} Current color instance for method chaining */ normalize() { // Normalize RGB color space if (this._rgb !== null) { this._rgb = [ this._rgb[0] < 0 ? 0 : (this._rgb[0] > 255 ? 255 : this._rgb[0]), this._rgb[1] < 0 ? 0 : (this._rgb[1] > 255 ? 255 : this._rgb[1]), this._rgb[2] < 0 ? 0 : (this._rgb[2] > 255 ? 255 : this._rgb[2]) ]; if (this._rgbRounded !== null) { this._rgbRounded = [ this._rgbRounded[0] < 0 ? 0 : (this._rgbRounded[0] > 255 ? 255 : this._rgbRounded[0]), this._rgbRounded[1] < 0 ? 0 : (this._rgbRounded[1] > 255 ? 255 : this._rgbRounded[1]), this._rgbRounded[2] < 0 ? 0 : (this._rgbRounded[2] > 255 ? 255 : this._rgbRounded[2]) ]; } } // Normalize HSL color space if (this._hsl !== null) { this._hsl = [ this._hsl[0] < 0 ? this._hsl[0] % 360 + 360 : (this._hsl[0] >= 360 ? this._hsl[0] % 360 : this._hsl[0]), this._hsl[1] < 0 ? 0 : (this._hsl[1] > 100 ? 100 : this._hsl[1]), this._hsl[2] < 0 ? 0 : (this._hsl[2] > 100 ? 100 : this._hsl[2]) ]; if (this._hslRounded !== null) { this._hslRounded = [ this._hslRounded[0] < 0 ? this._hslRounded[0] % 360 + 360 : (this._hslRounded[0] >= 360 ? this._hslRounded[0] % 360 : this._hslRounded[0]), this._hslRounded[1] < 0 ? 0 : (this._hslRounded[1] > 100 ? 100 : this._hslRounded[1]), this._hslRounded[2] < 0 ? 0 : (this._hslRounded[2] > 100 ? 100 : this._hslRounded[2]) ]; } } // Normalize alpha this._alpha = this._alpha < 0 ? 0 : (this._alpha > 1 ? 1 : this._alpha); // Reset luminance cache this._luminance = null; return this; } /** * Make a clone of color object * * @returns {Color} New color instance */ clone() { let color = new Color(); if (this._rgb !== null) { color.setRGBArray(this._rgb, this._rgbRounded); } else { color.setHSLArray(this._hsl, this._hslRounded); } if (this._alpha < 1) { color.setAlpha(this._alpha); } return color; } /** * Create keyword from color object * * @param {boolean} [findClosest] True if function should find closest keyword, false if exact match is required * @param {boolean} [useExtended] True if extended keywords list should be used * * @returns {string|boolean} Keyword, false on error */ toKeyword(findClosest, useExtended) { let color, keywords, match, margin, componentMargin, rgb, keyword, diff, componentDiff, maxComponentDiff, i; findClosest = findClosest === void 0 ? true : findClosest; useExtended = useExtended === void 0 ? true : useExtended; // Check for transparent color if (this._alpha === 0) { return 'transparent'; } // Get keywords and rgb color if (useExtended) { keywords = Keywords.all; } else { keywords = Keywords.base; } if (this._rgb === null) { this._convertToRGB(); } color = this._rgb; match = false; margin = findClosest ? 1000 : 1; componentMargin = findClosest ? 256 : 1; // Check each component for (keyword in keywords) { //noinspection JSUnfilteredForInLoop rgb = keywords[keyword]; diff = 0; maxComponentDiff = 0; for (i = 0; i < 3; i++) { componentDiff = Math.abs(rgb[i] - color[i]); diff += componentDiff; if (diff > margin) { break; } maxComponentDiff = Math.max(maxComponentDiff, componentDiff); } // Check for exact match if (diff === 0) { //noinspection JSUnfilteredForInLoop return keyword; } // Compare to previous results if (findClosest && diff < margin) { match = keyword; margin = diff; componentMargin = maxComponentDiff; } else if (findClosest && diff === margin && maxComponentDiff < componentMargin) { // Same overall difference, but each component difference is smaller match = keyword; componentMargin = maxComponentDiff; } } return match; } /** * Get hex string * * @param {boolean} compress True if color should be compressed (such as #123 instead of #112233) * * @returns {string} */ toHex(compress) { return this._getHexValue(compress === void 0 ? false : compress, false); } /** * Get hex string with alpha channel * * @param {boolean} [compress] True if color should be compressed (such as #f123 instead of #ff112233) * * @returns {string} */ toIEHex(compress) { return this._getHexValue(compress === void 0 ? false : compress, true); } /** * Get color as rgb or rgba string * * @param {boolean} [compress] True if string should be compressed * @param {boolean} [ignoreAlpha] True if alpha channel should be ignored. Returns rgb() string * @param {number} [alphaPrecision] Number of digits after dot in alpha. Default = 2 * * @returns {string} */ toRGBString(compress, ignoreAlpha, alphaPrecision) { return this.toString({ format: 'rgb', compress: compress === void 0 ? false : compress, ignoreAlpha: ignoreAlpha === void 0 ? false : ignoreAlpha, alphaPrecision: alphaPrecision === void 0 ? 2 : alphaPrecision }); } /** * Get color as hsl or hsla string * * @param {boolean} [compress] True if string should be compressed * @param {boolean} [ignoreAlpha] True if alpha channel should be ignored. Returns rgb() string * @param {number} [alphaPrecision] Number of digits after dot in alpha. Default = 2 * @param {number} [roundPrecision] Number of digits after dot in color components. Default = 2 * * @returns {string} */ toHSLString(compress, ignoreAlpha, alphaPrecision, roundPrecision) { return this.toString({ format: 'hsl', compress: compress === void 0 ? false : compress, ignoreAlpha: ignoreAlpha === void 0 ? false : ignoreAlpha, alphaPrecision: alphaPrecision === void 0 ? 2 : alphaPrecision, roundPrecision: roundPrecision === void 0 ? 2 : roundPrecision }); } /** * Get value as string * * @param {object} options List of options. Possible options: * format: color format. possible values: * auto (default): set automatically. * If RGB color is rounded or roundPrecision is set to 0, result color * will be in hex (if alpha == 1 or ignored) or rgba format. Otherwise * result will be in hsl or hsla format. * rgb: rgb(r, g, b) or rgba(r, g, b, a) * rgba: rgba(r, g, b, a) * hsl: hsl(h, s, l) or hsla(h, s, l, a) * hsla: hsla(h, s, l, a) * hex: hex string * iehex: hex string with alpha channel * ignoreAlpha: true if alpha channel should be ignored. default = false * This option is ignored when format is set to 'hex' or 'iehex' * roundPrecision: number of digits after dot in floating numbers. default = 2 * Floating numbers are allowed only in hsl() and hsla() colors * alphaPrecision: number of digits after dot in alpha channel. default = 2 * If set to 0 alpha channel is ignored. This option is ignored if alpha value * is 1 or ignoreAlpha is set or if selected format doesn't support alpha channel. * compress: true if result string should be as short as possible. Examples: * compressed: * rgba(1,2,3,.4) * #123 * not compressed: * rgba(1, 2, 3, 0.4) * #112233 * * @returns {string} */ toString(options) { let rgb, hsl, result, op = options === void 0 ? {} : options, format = op.format === void 0 ? 'auto' : op.format, ignoreAlpha = op.ignoreAlpha === void 0 ? false : op.ignoreAlpha, roundPrecision = op.roundPrecision === void 0 ? 2 : op.roundPrecision, alphaPrecision = op.alphaPrecision === void 0 ? 2 : op.alphaPrecision, compress = op.compress === void 0 ? false : op.compress, alpha = ignoreAlpha ? 1 : Color._round(this._alpha, alphaPrecision), comma = compress ? ',' : ', '; switch (format) { case 'auto': // Try hex or rgba format if (this._rgb === null) { this._convertToRGB(); } if (this._rgbRounded === null) { this._roundRGB(); } // Check if components are rounded if (roundPrecision > 0 && !Color._equalColors(this._rgb, this._rgbRounded)) { format = 'hsl'; break; } // Rounded or precision == 0 if (alpha === 1) { return this._getHexValue(compress, false); } result = 'rgba(' + this._rgbRounded[0] + comma + this._rgbRounded[1] + comma + this._rgbRounded[2] + comma + alpha + ')'; return compress ? Color._compressString(result) : result; case 'rgb': case 'rgba': if (this._rgb === null) { this._convertToRGB(); } if (this._rgbRounded === null) { this._roundRGB(); } result = (alpha === 1 && format !== 'rgba' ? 'rgb(' : 'rgba(') + this._rgbRounded[0] + comma + this._rgbRounded[1] + comma + this._rgbRounded[2] + (alpha === 1 && format !== 'rgba' ? '' : comma + alpha) + ')'; return compress ? Color._compressString(result) : result; case 'hex': return this._getHexValue(compress, false); case 'iehex': return this._getHexValue(compress, true); } // Only HSL format left if (this._hsl === null) { this._convertToHSL(); } result = (alpha === 1 && format !== 'hsla' ? 'hsl(' : 'hsla(') + Color._round(this._hsl[0], roundPrecision) + comma + Color._round(this._hsl[1], roundPrecision) + '%' + comma + Color._round(this._hsl[2], roundPrecision) + '%' + (alpha === 1 && format !== 'hsla' ? '' : comma + alpha) + ')'; return compress ? Color._compressString(result) : result; } /** * Create new color object from keyword * * @param {string} keyword Color value * @param {boolean} [useExtended] True if extended keywords list should be used * * @returns {Color|null} Color object on success, null on failure */ static fromKeyword(keyword, useExtended) { useExtended = useExtended === void 0 ? true : useExtended; keyword = keyword.toLowerCase(); if (keyword === 'transparent') { return (new Color()).setRGBA(0, 0, 0, 0, true); } let keywords = useExtended ? Keywords.all : Keywords.base; if (keywords[keyword] === void 0) { return null; } return (new Color()).setRGBArray(keywords[keyword], true); } /** * Create new color object from HEX string * * @param {string} color Color string * * @returns {Color|null} Color object on success, null on failure */ static fromHex(color) { let red, green, blue, alpha = false, start = 0; if (color.slice(0, 1) === '#') { color = color.slice(1); } if (!/^[\da-f]+$/i.test(color)) { return null; } //noinspection FallThroughInSwitchStatementJS switch (color.length) { case 4: alpha = color.slice(0, 1); alpha += alpha; start ++; // no break case 3: red = color.slice(start, ++start); green = color.slice(start, ++start); blue = color.slice(start, ++start); red += red; green += green; blue += blue; break; case 8: alpha = color.slice(0, 2); start += 2; // no break case 6: red = color.slice(start++, ++start); green = color.slice(start++, ++start); blue = color.slice(start++, ++start); break; default: return null; } return (new Color()).setRGBA( parseInt(red, 16), parseInt(green, 16), parseInt(blue, 16), alpha === false ? 1 : parseInt(alpha, 16) / 255, true ); } /** * Create new color object from string * * @param {string} color Color string * * @returns {Color|null} Color object on success, null on failure */ static fromString(color) { let parts, keyword, colors, alpha, result, r, g, b, h, s, l, rounded; if (color.indexOf('(') === -1) { // Missing required character. Test for hex string and keyword result = Color.fromHex(color); return result === null ? Color.fromKeyword(color) : result; } // Remove whitespace and change to lower case color = color.toLowerCase().replace(/\s+/g, ''); if (color.slice(-1) !== ')') { return null; } color = color.slice(0, color.length - 1); parts = color.split('(', 2); if (parts.length !== 2 || /[^\d.,%-]/.test(parts[1])) { return null; } keyword = parts[0]; colors = parts[1].split(','); alpha = 1; if (keyword.slice(-1) === 'a') { // with alpha if (colors.length !== 4) { return null; } alpha = parseFloat(colors.pop()); if (isNaN(alpha)) { alpha = 0; } else { alpha = alpha < 0 ? 0 : (alpha > 1 ? 1 : alpha); } } else if (colors.length !== 3) { return null; } switch (keyword) { case 'rgb': case 'rgba': if (colors[0].slice(-1) === '%') { // All components must be percentages if (colors[1].slice(-1) !== '%' || colors[2].slice(-1) !== '%') { return null; } // Convert to numbers and normalize colors r = parseFloat(colors[0]); g = parseFloat(colors[1]); b = parseFloat(colors[2]); return (new Color()).setRGBA( isNaN(r) || r < 0 ? 0 : (r > 100 ? 255 : r * 2.55), isNaN(g) || g < 0 ? 0 : (g > 100 ? 255 : g * 2.55), isNaN(b) || b < 0 ? 0 : (b > 100 ? 255 : b * 2.55), alpha ); } // None of components must be percentages if (parts[1].indexOf('%') !== -1) { return null; } // Double values are not allowed in rgb() r = parseInt(colors[0]); g = parseInt(colors[1]); b = parseInt(colors[2]); return (new Color()).setRGBA( isNaN(r) || r < 0 ? 0 : (r > 255 ? 255 : r), isNaN(g) || g < 0 ? 0 : (g > 255 ? 255 : g), isNaN(b) || b < 0 ? 0 : (b > 255 ? 255 : b), alpha, true ); case 'hsl': case 'hsla': if (colors[0].indexOf('%') !== -1 || colors[1].slice(-1) !== '%' || colors[2].slice(-1) !== '%') { // Hue cannot be percentage, saturation and lightness must be percentage return null; } // All values could be double numbers h = parseFloat(colors[0]); s = parseFloat(colors[1]); l = parseFloat(colors[2]); rounded = parts[1].indexOf('.') === -1; // Create new object, assign normalized values and return color return (new Color()).setHSLA( isNaN(h) ? 0 : (h < 0 ? h % 360 + 360 : (h >= 360 ? h % 360 : h)), isNaN(s) || s < 0 ? 0 : (s > 100 ? 100 : s), isNaN(l) || l < 0 ? 0 : (l > 100 ? 100 : l), alpha, rounded ); } return null; } /* * Private functions * * Do not call these functions directly */ /** * Set value as RGB array * * @param {Array} color Array of color components * @param {boolean} [rounded] True if values are rounded. * Used for performance to avoid rounding values when its not needed. * * @returns {Color|null} Current color instance for method chaining, null on failure * * @private */ _setRGBArray(color, rounded) { if (color.length === 4) { this._alpha = color.pop(); } else if (color.length !== 3) { return null; } else { this._alpha = 1; } this._resetSpaces('rgb'); this._rgb = color; this._rgbRounded = rounded ? color.slice(0) : null; return this; } /** * Set value as HSL array * * @param {Array} color Array of color components * @param {boolean} [rounded] True if values are rounded. * Used for performance to avoid rounding values when its not needed. * * @returns {Color|null} Current color instance for method chaining, null on failure * * @private */ _setHSLArray(color, rounded) { if (color.length === 4) { this._alpha = color.pop(); } else if (color.length !== 3) { return null; } else { this._alpha = 1; } this._resetSpaces('hsl'); this._hsl = color; this._hslRounded = rounded ? color.slice(0) : null; return this; } /** * Internal function used by setRed() and similar functions * * @param {number} index * @param {number} value * @param {boolean} rounded * * @returns {Color} * * @private */ _setRGB(index, value, rounded) { if (this._rgb === null) { this._convertToRGB(); } // Set value this._resetSpaces('rgb'); this._rgb[index] = value; // Set rounded value if (this._rgbRounded !== null) { if (rounded || Math.round(value) === value) { this._rgbRounded[index] = value; } else { this._rgbRounded = null; } } return this; } /** * Internal function used by setHue() and similar functions * * @param {number} index * @param {number} value * @param {boolean} rounded * * @returns {Color} * * @private */ _setHSL(index, value, rounded) { if (this._hsl === null) { this._convertToHSL(); } // Set value this._resetSpaces('hsl'); this._hsl[index] = value; // Set rounded value if (this._hslRounded !== null) { if (rounded || Math.round(value) === value) { this._hslRounded[index] = value; } else { this._hslRounded = null; } } return this; } /** * Internal function used by getRed() and similar functions * * @param {number} index * @param {boolean} [round] * * @returns {*} * * @private */ _getRGB(index, round) { if (this._rgb === null) { this._convertToRGB(); } if (round && this._rgbRounded === null) { this._roundRGB(); } return round ? this._rgbRounded[index] : this._rgb[index]; } /** * Internal function used by getHue() and similar functions * * @param {number} index * @param {boolean} [round] * * @returns {*} * * @private */ _getHSL(index, round) { if (this._hsl === null) { this._convertToHSL(); } if (round && this._hslRounded === null) { this._roundHSL(); } return round ? this._hslRounded[index] : this._hsl[index]; } /** * Round RGB colors * * @private */ _roundRGB() { let r = Math.round(this._rgb[0]), g = Math.round(this._rgb[1]), b = Math.round(this._rgb[2]); this._rgbRounded = [ r < 0 ? 0 : (r > 255 ? 255 : r), g < 0 ? 0 : (g > 255 ? 255 : g), b < 0 ? 0 : (b > 255 ? 255 : b), ]; } /** * Round HSL colors * * @private */ _roundHSL() { let h = Math.round(this._hsl[0]), s = Math.round(this._hsl[1]), l = Math.round(this._hsl[2]); this._hslRounded = [ h < 0 ? h % 360 + 360 : (h >= 360 ? h % 360 : h), s < 0 ? 0 : (s > 100 ? 100 : s), l < 0 ? 0 : (l > 100 ? 100 : l) ]; } /** * Normalize values * * @param {number} value Value to normalize * @param {number} [max] Maximum value, default = 100 * * @returns {number} * * @private */ static _normalize(value, max) { max = max === void 0 ? 100 : max; return value < 0 ? 0 : (value > max ? max : value); } /** * Normalize hue value * * @param {number} value Value to normalize * * @returns {number} * * @private */ static _normalizeHue(value) { return value < 0 ? value % 360 + 360 : (value >= 360 ? value % 360 : value); } /** * Convert HSL color to RGB * * @param {number} r Red color component in 0-255 range * @param {number} g Green color component in 0-255 range * @param {number} b Blue color component in 0-255 range * @param {boolean} round True if result should be rounded * * @returns {Array<number>} HSL color. Hue is in 0-360 range, other color components are in 0-100 range * * @private */ static _rgb2hsl(r, g, b, round) { let c1 = r / 255, c2 = g / 255, c3 = b / 255, kmin = Math.min(c1, Math.min(c2, c3)), kmax = Math.max(c1, Math.max(c2, c3)), l = (kmax + kmin) / 2, s, h, delta; round = round === void 0 ? false : round; if (kmax === kmin) { s = h = 0; } else { if (l < 0.5) { s = (kmax - kmin) / (kmax + kmin); } else { s = (kmax - kmin) / (2 - kmax - kmin); } delta = kmax - kmin; if (kmax === c1) { h = (c2 - c3) / delta; } if (kmax === c2) { h = 2 + (c3 - c1) / delta; } if(kmax === c3) { h = 4 + (c1 - c2) / delta; } h = h * 60; if (h < 0) { h += 360; } } return round ? [Math.round(h), Math.round(s * 100), Math.round(l * 100)] : [h, s * 100, l * 100]; } /** * Convert HSL color to RGB * * @param {number} h Hue color component in 0-360 range * @param {number} s Saturation color component in 0-100 range * @param {number} l Lightness color component in 0-100 range * @param {boolean} round True if result should be rounded * * @returns {Array<number>} RGB color. Each color component is in 0-255 range * * @private */ static _hsl2rgb(h, s, l, round) { let lum, sat, hue, m1, m2, c1, c2, c3; function valore(n1, n2, hue) { hue = hue < 0 ? hue % 360 + 360 : (hue >= 360 ? hue % 360 : hue); if (hue >= 240) { return n1; } if (hue < 60) { return n1 + (n2 - n1) * hue / 60; } if (hue < 180) { return n2; } return n1 + (n2 - n1) * (240 - hue) / 60; } round = round === void 0 ? false : round; hue = h < 0 ? h % 360 + 360 : (h >= 360 ? h % 360 : h); sat = s < 0 ? 0 : (s > 100 ? 1 : s / 100); lum = l < 0 ? 0 : (l > 100 ? 1 : l / 100); if (lum <= 0.5) { m2 = lum * (1 + sat); } else { m2 = lum + sat * (1 - lum); } m1 = 2 * lum - m2; if (sat === 0 && hue === 0) { c1 = lum; c2 = lum; c3 = lum; } else { c1 = valore(m1, m2, hue + 120); c2 = valore(m1, m2, hue); c3 = valore(m1, m2, hue - 120); } return [ round ? Math.round(c1 * 255) : c1 * 255, round ? Math.round(c2 * 255) : c2 * 255, round ? Math.round(c3 * 255) : c3 * 255 ]; } /** * Convert color space to RGB * * @private */ _convertToRGB() { this._rgb = this._hsl === null ? [255, 0, 0] : Color._hsl2rgb(this._hsl[0], this._hsl[1], this._hsl[2], false); this._rgbRounded = null; } /** * Convert color space to HSL * * @private */ _convertToHSL() { this._hsl = this._rgb === null ? [0, 100, 50] : Color._rgb2hsl(this._rgb[0], this._rgb[1], this._rgb[2], false); this._hslRounded = null; } /** * Reset color spaces * * @param {string} keep Color space to keep * * @private */ _resetSpaces(keep) { keep = keep === void 0 ? '' : keep; if (keep !== 'rgb') { this._rgb = this._rgbRounded = null; } if (keep !== 'hsl') { this._hsl = this._hslRounded = null; } this._luminance = null; } /** * Round number * * @param {number} number Number to round * @param {number} precision Number of digits after dot * * @returns {number} * * @private */ static _round(number, precision) { precision = Math.pow(10, precision); return Math.round(number * precision) / precision; } /** * Compare color spacer * * @param {Array} var1 Array of color components for color 1 * @param {Array} var2 Array of color components for color 2 * * @returns {boolean} True if colors are the same, false if not * * @private */ static _equalColors(var1, var2) { if (!(var1 instanceof Array && var2 instanceof Array)) { return false; } for (let i = 0; i < 3; i++) { if (var1[i] !== var2[i]) { return false; } } return true; } /** * Get color as hex string * * @param {boolean} compress True if color should be compressed * @param {boolean} includeAlpha True if result should include alpha channel (IE format) * * @returns {string} * * @private */ _getHexValue(compress, includeAlpha) { if (this._rgb === null) { this._convertToRGB(); } if (this._rgbRounded === null) { this._roundRGB(); } // Convert to hex string let result = '#'; if (includeAlpha) { let alpha = Math.max(Math.min(Math.round(this._alpha * 255), 255), 0); result += (alpha < 16 ? '0' : '') + alpha.toString(16); } for (let i = 0; i < 3; i++) { result += (this._rgbRounded[i] < 16 ? '0' : '') + this._rgbRounded[i].toString(16); } return compress ? Color._compressString(result) : result; } /** * Compress string * * @param {string} value Color to compress * * @returns {string} * * @private */ static _compressString(value) { if (value.slice(0, 1) === '#') { // Compress hex string let length = value.length - 1; if (length !== 6 && length !== 8) { return value; } let str1 = '', str2 = '', total = length / 2; for (let i = 0; i < total; i++) { str1 += value.slice(i * 2 + 1, i * 2 + 2); str2 += value.slice(i * 2 + 2, i * 2 + 3); if (str1 !== str2) { return value; } } return '#' + str1; } // Remove extra spaces and zeros return value.replace(' ', '').replace('(0.', '(.').replace(',0.', ',.'); } } module.exports = Color;