coloration.ts

// tslint:disable:no-bitwise

const pattern = {
    hexa: /^#?(([\da-f]{3})(([\da-f]{3})([\da-f]{2})?|[\da-f]{1})?)$/i,
    rgba: /^rgba?\(([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)((,\s*)([\d]*(\.[\d]+)?))?\)$/i,
    hsva: /^hsla?\(([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)\%(,?\s*|\s+)([\d]*(\.[\d]+)?)\%((,\s*)([\d]*(\.[\d]+)?))?\)$/i
};

export interface RGB {
    /** Red color value [0,255]   */ r: number;
    /** Green color value [0,255] */ g: number;
    /** Blue color value [0,255]  */ b: number;
    /** Alpha color value [0,1]   */ a?: number;
}
export interface HSV {
    /** Hue color value [0,360]             */ h: number;
    /** Saluration color value [0,100]      */ s: number;
    /** Value/lightness color value [0,100] */ v: number;
    /** Alpha color value [0,1]             */ a?: number;
}
export interface ColorData {
    // RGB
    /** Red color value [-256,255]       */ r?: number;
    /** Green color value [-256,255]     */ g?: number;
    /** Blue color value [-256,255]      */ b?: number;
    // HSV/HSL
    /** Hue value [-360,360]             */ h?: number;
    /** Saluration value [-100,100]      */ s?: number;
    /** Value/lightness value [-100,100] */ v?: number;
    // Other
    /** luminosity value [-1,1]          */ luminosity?: number;
    /** color mask                       */ maskColor?: string;
    /** color mask opacity [0,1]         */ maskOpacity?: number;
    // alpha
    /** color mask alpha [-1,1]          */ alpha?: number;
}

export interface ColorNumber {
     /** intcolor */ intColor: number;
     /** Alpha color value [0,1] */ alpha: number;
}

export class Coloration {

    /**
     * CSS color list
     */
    static colorsName: any = {
        // CSS 1
        black: '#000000', silver: '#c0c0c0', gray: '#808080', white: '#ffffff', maroon: '#800000', red: '#ff0000',
        purple: '#800080', fuchsia: '#ff00ff', green: '#008000', lime: '#00ff00', olive: '#808000', yellow: '#ffff00',
        navy: '#000080', blue: '#0000ff', teal: '#008080', aqua: '#00ffff',
        // CSS 2 (Revision 1)
        orange: '#ffa500',
        // CSS 3
        aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc',
        bisque: '#ffe4c4', blanchedalmond: '#ffebcd', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887',
        cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed',
        cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', deaqua: '#00ffff', darkblue: '#00008b',
        darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9',
        darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00',
        darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f',
        darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1',
        darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969',
        dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22',
        gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', greenyellow: '#adff2f',
        grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082',
        ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00',
        lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff',
        lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3',
        lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa',
        lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0',
        limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', defuchsia: '#ff00ff', mediumaquamarine: '#66cdaa',
        mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371',
        mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc',
        mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1',
        moccasin: '#ffe4b5', navajowhite: '#ffdead', oldlace: '#fdf5e6', olivedrab: '#6b8e23', orangered: '#ff4500',
        orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee',
        palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb',
        plum: '#dda0dd', powderblue: '#b0e0e6', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513',
        salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d',
        skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa',
        springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', thistle: '#d8bfd8', tomato: '#ff6347',
        turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', whitesmoke: '#f5f5f5', yellowgreen: '#9acd32',
        // CSS 4
        rebeccapurple: '#663399'
    };

    private calcColor: ColorNumber;
    private rgb: RGB = { r: 0, g: 0, b: 0, a: 1 };
    private hsv: HSV = { h: 0, s: 0, v: 0, a: 1 };

    constructor(public color: string) {
        this.reset();
    }

    /**
     * reinit to base color
     */
    reset() {
        if (this.color) {
            this.calcColor = this.parseColor(this.color);
            this.updateColor();
        }
    }

    /**
     * change the luminosity of a color
     * @param lum value between -1 and 1
     * @returns Coloration
     */
    changeLuminosity(lum: number): Coloration {
        lum = this.minmax(lum, -1, 1);
        this.maskColor(lum < 0 ? '#000' : '#FFF', Math.abs(lum));
        return this;
    }

    /**
     * add color with a mark
     * @param color additional color
     * @param opacity value of opacity between 0 and 1 for the additional color
     * @returns Coloration
     */
    maskColor(color: string, opacity: number = 1): Coloration {
        if (this.calcColor) {
            const baseColor = this.calcColor;
            const additionalColor = this.parseColor(color);

            const lum = this.minmax(opacity, 0, 1);

            const R = baseColor.intColor >> 16;
            const G = baseColor.intColor >> 8 & 0x00FF;
            const B = baseColor.intColor & 0x0000FF;

            if (additionalColor.alpha) {
                this.calcColor.alpha = this.minmax(baseColor.alpha + additionalColor.alpha * opacity, 0, 1);
            }
            this.calcColor.intColor = this.rgbToInt(
                Math.round(((additionalColor.intColor >> 16) - R) * lum) + R,
                Math.round(((additionalColor.intColor >> 8 & 0x00FF) - G) * lum) + G,
                Math.round(((additionalColor.intColor & 0x0000FF) - B) * lum) + B
            );
            this.updateColor();
        }
        return this;
    }

    /**
     * change color with color parameters
     * @param colorData additionnal parameters
     * @returns Coloration
     */
    addColor(colorData: ColorData) {
        if (this.calcColor) {
            if (colorData.luminosity) {
                this.changeLuminosity(colorData.luminosity);
            }

            if (colorData.maskColor) {
                this.maskColor(colorData.maskColor, this.minmax(colorData.maskOpacity || 0, 0, 1));
            }

            if (colorData.r || colorData.g || colorData.b) {
                if (colorData.r) {
                    this.rgb.r = this.minmax(this.rgb.r + (+colorData.r), 0, 255);
                }
                if (colorData.g) {
                    this.rgb.g = this.minmax(this.rgb.g + (+colorData.g), 0, 255);
                }
                if (colorData.b) {
                    this.rgb.b = this.minmax(this.rgb.b + (+colorData.b), 0, 255);
                }
                this.calcColor.intColor = this.rgbToInt(this.rgb.r, this.rgb.g, this.rgb.b);
                this.updateColor();
            }

            if (colorData.h || colorData.s || colorData.v) {
                if (colorData.h) {
                    this.hsv.h = (this.hsv.h + (+colorData.h) + 360) % 360;
                }
                if (colorData.s) {
                    this.hsv.s = this.minmax(this.hsv.s + (+colorData.s), 0, 100);
                }
                if (colorData.v) {
                    this.hsv.v = this.minmax(this.hsv.v + (+colorData.v), 0, 100);
                }
                this.calcColor.intColor = this.hsvToInt(this.hsv.h, this.hsv.s, this.hsv.v);
                this.updateColor();
            }

            if (colorData.alpha) {
                this.hsv.a = this.rgb.a = this.calcColor.alpha = this.minmax(this.calcColor.alpha + (+colorData.alpha), 0, 1);
            }
        }
        return this;
    }

    /**
     * RGB informations
     * @returns RGB
     */
    getRGB(): RGB {
        return this.calcColor ? this.value<RGB>(() => Object.assign({}, this.rgb)) : null;
    }

    /**
     * HSV informations
     * @returns HSV
     */
    getHSV(): HSV {
        return this.calcColor ? this.value<HSV>(() => Object.assign({}, this.hsv)) : null;
    }

    /**
     * color in #HEX format
     * @returns string of #HEX
     */
    toHEX(): string {
        return this.calcColor ? this.value<string>(
            () => '#' + (0x1000000 + this.calcColor.intColor).toString(16).slice(1)
                + (this.calcColor.alpha < 1 ? (0x100 + Math.round(this.calcColor.alpha * 255)).toString(16).slice(1) : '')
        ) : null;
    }

    /**
     * color in HVL() format
     * @returns string of HVL(H, S%, V%)
     */
    toHSL(): string {
        return this.calcColor ? this.value<string>(
            () => `hsl(${this.hsv.h}, ${this.hsv.s}%, ${this.hsv.v}%${this.hsv.a < 1 ? ', ' + this.hsv.a : ''})`
        ) : null;
    }

    /**
     * color in RGB() format
     * @returns string of RGB(R, G, B)
     */
    toRGB(): string {
        return this.calcColor ? this.value<string>(
            () => `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}${this.rgb.a < 1 ? ', ' + this.rgb.a : ''})`
        ) : null;
    }

    /**
     * update colors data : RGB and HSL
     */
    private updateColor() {
        const color = this.calcColor.intColor;
        // update RGB
        this.rgb.r = color >> 16;
        this.rgb.g = color >> 8 & 0x00FF;
        this.rgb.b = color & 0x0000FF;
        this.rgb.a = this.calcColor.alpha;

        // update HSL
        this.hsv = this.rgb2hsv(this.rgb.r, this.rgb.g, this.rgb.b);
        this.hsv.a = this.calcColor.alpha;
    }

    /**
     * change color
     * @param color parse color : name, #HEXA, rgba()
     * @returns int color
     */
    private parseColor(color: string): ColorNumber {

        // si named color
        if (Coloration.colorsName[color]) {
            color = Coloration.colorsName[color];
        }

        // validate hexa string #RGB, #RGBA, #RRGGBB, #RRGGBBAA (ignore alpha)
        const matchHex = String(color).match(pattern.hexa);
        let intColor: number;
        let alpha = 1;
        if (matchHex) {
            const hexaColor = matchHex[4]
                ? matchHex[2] + matchHex[4]
                : matchHex[2][0] + matchHex[2][0] + matchHex[2][1] + matchHex[2][1] + matchHex[2][2] + matchHex[2][2];
            const hexaAlpha = matchHex[4]
                ? matchHex[5]
                : (matchHex[3] ? matchHex[3][1] + matchHex[3][1] : undefined);
            intColor = parseInt(hexaColor, 16);
            alpha = hexaAlpha !== undefined ? parseInt(hexaAlpha, 16) / 255 : 1;
        }

        if (intColor === undefined) {
            // validate rgb() / rgba()
            const matchRgb = String(color).match(pattern.rgba);
            if (matchRgb) {
                intColor = this.rgbToInt(parseInt(matchRgb[1], 10), parseInt(matchRgb[4], 10), parseInt(matchRgb[7], 10));
                alpha = matchRgb[11] !== undefined ? parseFloat(matchRgb[11]) : 1;
            }
        }

        if (intColor === undefined) {
            // validate hsv() / hsva()
            const matchHsv = String(color).match(pattern.hsva);
            if (matchHsv) {
                intColor = this.hsvToInt(parseInt(matchHsv[1], 10), parseInt(matchHsv[4], 10), parseInt(matchHsv[7], 10));
                alpha = matchHsv[11] !== undefined ? parseFloat(matchHsv[11]) : 1;
            }
        }

        return { intColor, alpha };

    }

    /**
     * convert HSV/HSL to int RGB
     * @param hue Hue [0, 360]
     * @param saturation Saturation [0, 100]
     * @param value Value [0, 100]
     * @returns int RGB
     * @see https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
     */
    private hsvToInt(hue: number, saturation: number, value: number): number {
        saturation = Math.max(0, saturation);

        const s = saturation / 100;
        const v = value / 100;
        const h = hue / 360;

        if (saturation === 0) {
            return this.rgbToInt(v * 256, v * 256, v * 256);
        }

        const q = v < 0.5 ? v * (1 + s) : v + s - v * s;
        const p = 2 * v - q;
        const r = this.hue2rgb(p, q, h + 1 / 3);
        const g = this.hue2rgb(p, q, h);
        const b = this.hue2rgb(p, q, h - 1 / 3);

        return this.rgbToInt(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
    }

    /**
     * hue color calculation
     * @param p number
     * @param q number
     * @param t number
     * @returns int color [0, 255]
     */
    private hue2rgb(p: number, q: number, t: number): number {
        if (t < 0) { t += 1; } else if (t > 1) { t -= 1; }
        if (t < 1 / 6) { return p + (q - p) * 6 * t; }
        if (t < 1 / 2) { return q; }
        if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; }
        return p;
    }

    /**
     * Convert RGB to HSV
     * @param r red [0, 255]
     * @param g green [0, 255]
     * @param b blue [0, 255]
     * @returns HSV data
     * @see https://stackoverflow.com/questions/39118528/rgb-to-hsl-conversion
     * @see https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
     */
    private rgb2hsv(r: number, g: number, b: number): HSV {

        // convert r,g,b [0,255] range to [0,1]
        r = r / 255;
        g = g / 255;
        b = b / 255;

        // get the min and max of r,g,b
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);

        // lightness is the average of the largest and smallest color components
        const val = (max + min) / 2;
        let hue: number;
        let sat: number;

        if (max === min) { // no saturation
            hue = 0;
            sat = 0;
        } else {
            const c = max - min; // chroma
            // saturation is simply the chroma scaled to fill
            // the interval [0, 1] for every combination of hue and lightness
            sat = c / (1 - Math.abs(2 * val - 1));
            switch (max) {
                case r:
                    hue = (g - b) / c + (g < b ? 6 : 0);
                    break;
                case g:
                    hue = (b - r) / c + 2;
                    break;
                case b:
                    hue = (r - g) / c + 4;
                    break;
            }
        }

        return {
            h: Math.round(hue * 60),  // °
            s: Math.round(sat * 100), // %
            v: Math.round(val * 100)  // %
        };
    }

    /**
     * convert RGB data to int value
     * @param r red [0, 255]
     * @param g green [0, 255]
     * @param b blue [0, 255]
     * @returns int value
     */
    private rgbToInt(r: number, g: number, b: number): number {
        return Math.round(r) * 0x10000 + Math.round(g) * 0x100 + Math.round(b);
    }

    /**
     * bound a value between two values
     * @param value value
     * @param min min value
     * @param max max value
     * @param defaultValue replace an invalid vvalue
     * @returns value between min and max
     */
    private minmax(value: number, min: number, max: number, defaultValue = 0) {
        return Math.min(Math.max(value || defaultValue, min), max);
    }

    /**
     * test is intColor is valid for return a vlaue
     * @param value callback of value
     * @returns value or null
     */
    private value<L>(value: () => L): L {
        return !isNaN(this.calcColor.intColor) ? value() : null;
    }

}