qw-utils/dist/js/colorUtils.js

qw Utils package

var _defineProperty = require("/Users/lxy/qw-utils/node_modules/@babel/runtime/helpers/defineProperty.js").default;
require("core-js/modules/es.array.push.js");
class colorUtils {
  constructor() {
    /**
     * 判断是否 十六进制颜色值.
     * 输入形式可为 #fff000 #f00
     *
     * @param   String  color   十六进制颜色值
     * @return  Boolean
     */
    _defineProperty(this, "isHexColor", color => {
      const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/;
      return reg.test(color);
    });
    /**
     * RGB 颜色值转换为 十六进制颜色值.
     * r, g, 和 b 需要在 [0, 255] 范围内
     *
     * @return  String          类似#ff00ff
     * @param r
     * @param g
     * @param b
     */
    _defineProperty(this, "rgbToHex", (r, g, b) => {
      // tslint:disable-next-line:no-bitwise
      const hex = (r << 16 | g << 8 | b).toString(16);
      return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
    });
    _defineProperty(this, "colorIsDark", color => {
      if (!this.isHexColor(color)) return;
      const [r, g, b] = this.hexToRGB(color).replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',').map(item => Number(item));
      return r * 0.299 + g * 0.578 + b * 0.114 < 192;
    });
    /**
     * Darkens a HEX color given the passed percentage
     * @param {string} color The color to process
     * @param {number} amount The amount to change the color by
     * @returns {string} The HEX representation of the processed color
     */
    _defineProperty(this, "darken", (color, amount) => {
      color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
      amount = Math.trunc(255 * amount / 100);
      return `#${this.subtractLight(color.substring(0, 2), amount)}${this.subtractLight(color.substring(2, 4), amount)}${this.subtractLight(color.substring(4, 6), amount)}`;
    });
    /**
     * Lightens a 6 char HEX color according to the passed percentage
     * @param {string} color The color to change
     * @param {number} amount The amount to change the color by
     * @returns {string} The processed color represented as HEX
     */
    _defineProperty(this, "lighten", (color, amount) => {
      color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
      amount = Math.trunc(255 * amount / 100);
      return `#${this.addLight(color.substring(0, 2), amount)}${this.addLight(color.substring(2, 4), amount)}${this.addLight(color.substring(4, 6), amount)}`;
    });
    /* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
    /**
     * Sums the passed percentage to the R, G or B of a HEX color
     * @param {string} color The color to change
     * @param {number} amount The amount to change the color by
     * @returns {string} The processed part of the color
     */
    _defineProperty(this, "addLight", (color, amount) => {
      const cc = parseInt(color, 16) + amount;
      const c = cc > 255 ? 255 : cc;
      return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
    });
    /**
     * Calculates luminance of an rgb color
     * @param {number} r red
     * @param {number} g green
     * @param {number} b blue
     */
    _defineProperty(this, "luminanace", (r, g, b) => {
      const a = [r, g, b].map(v => {
        v /= 255;
        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
      });
      return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
    });
    /**
     * Calculates contrast between two rgb colors
     * @param {string} rgb1 rgb color 1
     * @param {string} rgb2 rgb color 2
     */
    _defineProperty(this, "contrast", (rgb1, rgb2) => {
      return (this.luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) / (this.luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05);
    });
    /**
     * Determines what the best text color is (black or white) based con the contrast with the background
     * @param hexColor - Last selected color by the user
     */
    _defineProperty(this, "calculateBestTextColor", hexColor => {
      const rgbColor = this.hexToRGB(hexColor.substring(1));
      const contrastWithBlack = this.contrast(rgbColor.split(','), [0, 0, 0]);
      return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
    });
    /**
     * Subtracts the indicated percentage to the R, G or B of a HEX color
     * @param {string} color The color to change
     * @param {number} amount The amount to change the color by
     * @returns {string} The processed part of the color
     */
    _defineProperty(this, "subtractLight", (color, amount) => {
      const cc = parseInt(color, 16) - amount;
      const c = cc < 0 ? 0 : cc;
      return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
    });
  }
  /**
   * Transform a HEX color to its RGB representation
   * @param {string} hex The color to transform
   * @returns The RGB representation of the passed color
   */
  hexToRGB(hex, opacity) {
    let sHex = hex.toLowerCase();
    if (this.isHexColor(hex)) {
      if (sHex.length === 4) {
        let sColorNew = '#';
        for (let i = 1; i < 4; i += 1) {
          sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
        }
        sHex = sColorNew;
      }
      const sColorChange = [];
      for (let i = 1; i < 7; i += 2) {
        sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)));
      }
      return opacity ? 'RGBA(' + sColorChange.join(',') + ',' + opacity + ')' : 'RGB(' + sColorChange.join(',') + ')';
    }
    return sHex;
  }
}
module.exports = {
  colorUtils
};