html2canvas-pro 2.1.0 → 2.2.0

package/src/css/types/color-utilities.ts

@@ -1,452 +0,0 @@
-import { Context } from '../../core/context';
-import { CSSValue, isDimensionToken, isNumberToken, nonFunctionArgSeparator } from '../syntax/parser';
-import { rgb2rgbLinear, rgbLinear2xyz, srgbLinear2rgb, xyz2rgbLinear } from './color-spaces/srgb';
-import { TokenType } from '../syntax/tokenizer';
-import { angle, deg } from './angle';
-import { getAbsoluteValue, isLengthPercentage } from './length-percentage';
-import { clamp, multiplyMatrices } from './color-math';
-
-type Color = number;
-
-export const isTransparent = (color: Color): boolean => (0xff & color) === 0;
-
-export const asString = (color: Color): string => {
-    const alpha = 0xff & color;
-    const blue = 0xff & (color >> 8);
-    const green = 0xff & (color >> 16);
-    const red = 0xff & (color >> 24);
-    return alpha < 255 ? `rgba(${red},${green},${blue},${alpha / 255})` : `rgb(${red},${green},${blue})`;
-};
-
-export const pack = (r: number, g: number, b: number, a: number): Color =>
-    ((r << 24) | (g << 16) | (b << 8) | (Math.round(a * 255) << 0)) >>> 0;
-
-export const getTokenColorValue = (token: CSSValue, i: number): number => {
-    if (token.type === TokenType.NUMBER_TOKEN) {
-        return token.number;
-    }
-
-    if (token.type === TokenType.PERCENTAGE_TOKEN) {
-        const max = i === 3 ? 1 : 255;
-        return i === 3 ? (token.number / 100) * max : Math.round((token.number / 100) * max);
-    }
-
-    return 0;
-};
-
-export const isRelativeTransform = (tokens: CSSValue[]): boolean =>
-    (tokens[0].type === TokenType.IDENT_TOKEN ? tokens[0].value : 'unknown') === 'from';
-
-// Re-export from color-math to maintain backward compatibility
-export { clamp, multiplyMatrices };
-
-export const packSrgb = (args: number[]): number => {
-    return pack(
-        clamp(Math.round(args[0] * 255), 0, 255),
-        clamp(Math.round(args[1] * 255), 0, 255),
-        clamp(Math.round(args[2] * 255), 0, 255),
-        clamp(args[3], 0, 1)
-    );
-};
-
-export const packSrgbLinear = ([r, g, b, a]: [number, number, number, number]): number => {
-    const rgb = srgbLinear2rgb([r, g, b]);
-    return pack(
-        clamp(Math.round(rgb[0] * 255), 0, 255),
-        clamp(Math.round(rgb[1] * 255), 0, 255),
-        clamp(Math.round(rgb[2] * 255), 0, 255),
-        a
-    );
-};
-
-export const packXYZ = (args: number[]): number => {
-    const srgb_linear = xyz2rgbLinear([args[0], args[1], args[2]]);
-    return packSrgbLinear([srgb_linear[0], srgb_linear[1], srgb_linear[2], args[3]]);
-};
-
-export const packLab = (_context: Context, args: CSSValue[]): number => {
-    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
-        throw new Error('Relative color not supported for lab()');
-    }
-    const [l, a, b, alpha] = extractLabComponents(args),
-        rgb = srgbLinear2rgb(xyz2rgbLinear(lab2xyz([l, a, b])));
-
-    return pack(
-        clamp(Math.round(rgb[0] * 255), 0, 255),
-        clamp(Math.round(rgb[1] * 255), 0, 255),
-        clamp(Math.round(rgb[2] * 255), 0, 255),
-        alpha
-    );
-};
-
-export const packOkLab = (_context: Context, args: CSSValue[]): number => {
-    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
-        throw new Error('Relative color not supported for oklab()');
-    }
-    const [l, a, b, alpha] = extractLabComponents(args),
-        rgb = srgbLinear2rgb(xyz2rgbLinear(oklab2xyz([l, a, b])));
-
-    return pack(
-        clamp(Math.round(rgb[0] * 255), 0, 255),
-        clamp(Math.round(rgb[1] * 255), 0, 255),
-        clamp(Math.round(rgb[2] * 255), 0, 255),
-        alpha
-    );
-};
-
-export const packOkLch = (_context: Context, args: CSSValue[]): number => {
-    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
-        throw new Error('Relative color not supported for oklch()');
-    }
-    const [l, c, h, alpha] = extractOkLchComponents(args),
-        rgb = srgbLinear2rgb(xyz2rgbLinear(oklab2xyz(lch2lab([l, c, h]))));
-
-    return pack(
-        clamp(Math.round(rgb[0] * 255), 0, 255),
-        clamp(Math.round(rgb[1] * 255), 0, 255),
-        clamp(Math.round(rgb[2] * 255), 0, 255),
-        alpha
-    );
-};
-
-export const packLch = (_context: Context, args: CSSValue[]): number => {
-    if (isRelativeTransform(args.filter(nonFunctionArgSeparator))) {
-        throw new Error('Relative color not supported for lch()');
-    }
-    const [l, c, h, a] = extractLchComponents(args),
-        rgb = srgbLinear2rgb(xyz2rgbLinear(lab2xyz(lch2lab([l, c, h]))));
-
-    return pack(
-        clamp(Math.round(rgb[0] * 255), 0, 255),
-        clamp(Math.round(rgb[1] * 255), 0, 255),
-        clamp(Math.round(rgb[2] * 255), 0, 255),
-        a
-    );
-};
-
-export const extractHslComponents = (context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const tokens = args.filter(nonFunctionArgSeparator),
-        [hue, saturation, lightness, alpha] = tokens,
-        h = (hue.type === TokenType.NUMBER_TOKEN ? deg(hue.number) : angle.parse(context, hue)) / (Math.PI * 2),
-        s = isLengthPercentage(saturation) ? saturation.number / 100 : 0,
-        l = isLengthPercentage(lightness) ? lightness.number / 100 : 0,
-        a = typeof alpha !== 'undefined' && isLengthPercentage(alpha) ? getAbsoluteValue(alpha, 1) : 1;
-    return [h, s, l, a];
-};
-
-export const packHSL = (context: Context, args: CSSValue[]): number => {
-    if (isRelativeTransform(args)) {
-        throw new Error('Relative color not supported for hsl()');
-    }
-    const [h, s, l, a] = extractHslComponents(context, args),
-        rgb = hsl2rgb([h, s, l]);
-    return pack(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255, s === 0 ? 1 : a);
-};
-
-export const extractLchComponents = (args: CSSValue[]): [number, number, number, number] => {
-    const tokens = args.filter(nonFunctionArgSeparator),
-        l = isLengthPercentage(tokens[0]) ? tokens[0].number : 0,
-        c = isLengthPercentage(tokens[1]) ? tokens[1].number : 0,
-        h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0,
-        a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
-
-    return [l, c, h, a];
-};
-
-export const extractLabComponents = (args: CSSValue[]): [number, number, number, number] => {
-    const tokens = args.filter(nonFunctionArgSeparator),
-        l =
-            tokens[0].type === TokenType.PERCENTAGE_TOKEN
-                ? tokens[0].number / 100
-                : isNumberToken(tokens[0])
-                  ? tokens[0].number
-                  : 0,
-        a =
-            tokens[1].type === TokenType.PERCENTAGE_TOKEN
-                ? tokens[1].number / 100
-                : isNumberToken(tokens[1])
-                  ? tokens[1].number
-                  : 0,
-        b = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0,
-        alpha = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
-
-    return [l, a, b, alpha];
-};
-
-export const extractOkLchComponents = (args: CSSValue[]): [number, number, number, number] => {
-    const tokens = args.filter(nonFunctionArgSeparator),
-        l =
-            tokens[0].type === TokenType.PERCENTAGE_TOKEN
-                ? tokens[0].number / 100
-                : isNumberToken(tokens[0])
-                  ? tokens[0].number
-                  : 0,
-        c =
-            tokens[1].type === TokenType.PERCENTAGE_TOKEN
-                ? tokens[1].number / 100
-                : isNumberToken(tokens[1])
-                  ? tokens[1].number
-                  : 0,
-        h = isNumberToken(tokens[2]) || isDimensionToken(tokens[2]) ? tokens[2].number : 0,
-        a = typeof tokens[4] !== 'undefined' && isLengthPercentage(tokens[4]) ? getAbsoluteValue(tokens[4], 1) : 1;
-
-    return [l, c, h, a];
-};
-
-/**
- * Convert D65 to D50
- *
- * @param xyz
- */
-export const d65toD50 = (xyz: [number, number, number]): [number, number, number] => {
-    return multiplyMatrices(
-        [
-            1.0479297925449969, 0.022946870601609652, -0.05019226628920524, 0.02962780877005599, 0.9904344267538799,
-            -0.017073799063418826, -0.009243040646204504, 0.015055191490298152, 0.7518742814281371
-        ],
-        xyz
-    );
-};
-
-/**
- * Convert D50 to D65
- *
- * @param xyz
- */
-export const d50toD65 = (xyz: [number, number, number]): [number, number, number] => {
-    return multiplyMatrices(
-        [
-            0.955473421488075, -0.02309845494876471, 0.06325924320057072, -0.0283697093338637, 1.0099953980813041,
-            0.021041441191917323, 0.012314014864481998, -0.020507649298898964, 1.330365926242124
-        ],
-        xyz
-    );
-};
-
-export const hue2rgb = (t1: number, t2: number, hue: number): number => {
-    if (hue < 0) {
-        hue += 1;
-    }
-    if (hue >= 1) {
-        hue -= 1;
-    }
-
-    if (hue < 1 / 6) {
-        return (t2 - t1) * hue * 6 + t1;
-    } else if (hue < 1 / 2) {
-        return t2;
-    } else if (hue < 2 / 3) {
-        return (t2 - t1) * 6 * (2 / 3 - hue) + t1;
-    } else {
-        return t1;
-    }
-};
-
-const hsl2rgb = ([h, s, l]: [number, number, number]): [number, number, number] => {
-    if (s === 0) {
-        return [l * 255, l * 255, l * 255];
-    }
-    const t2 = l <= 0.5 ? l * (s + 1) : l + s - l * s,
-        t1 = l * 2 - t2,
-        r = hue2rgb(t1, t2, h + 1 / 3),
-        g = hue2rgb(t1, t2, h),
-        b = hue2rgb(t1, t2, h - 1 / 3);
-
-    return [r, g, b];
-};
-
-/**
- * Convert lch to OKLab
- *
- * @param l
- * @param c
- * @param h
- */
-const lch2lab = ([l, c, h]: [number, number, number]): [number, number, number] => {
-    if (c < 0) {
-        c = 0;
-    }
-    if (isNaN(h)) {
-        h = 0;
-    }
-    return [l, c * Math.cos((h * Math.PI) / 180), c * Math.sin((h * Math.PI) / 180)];
-};
-
-/**
- * Convert OKLab to XYZ relative to D65
- *
- * @param lab
- */
-const oklab2xyz = (lab: [number, number, number]): [number, number, number] => {
-    const LMSg = multiplyMatrices(
-            [
-                1, 0.3963377773761749, 0.2158037573099136, 1, -0.1055613458156586, -0.0638541728258133, 1,
-                -0.0894841775298119, -1.2914855480194092
-            ],
-            lab
-        ),
-        LMS = LMSg.map((val: number) => val ** 3);
-
-    return multiplyMatrices(
-        [
-            1.2268798758459243, -0.5578149944602171, 0.2813910456659647, -0.0405757452148008, 1.112286803280317,
-            -0.0717110580655164, -0.0763729366746601, -0.4214933324022432, 1.5869240198367816
-        ],
-        LMS
-    );
-};
-
-/**
- * Convert Lab to D50-adapted XYZ
- *
- * @param lab
- */
-const lab2xyz = (lab: [number, number, number]): [number, number, number] => {
-    const fy = (lab[0] + 16) / 116,
-        fx = lab[1] / 500 + fy,
-        fz = fy - lab[2] / 200,
-        k = 24389 / 27,
-        e = 24 / 116,
-        xyz = [
-            ((fx > e ? fx ** 3 : (116 * fx - 16) / k) * 0.3457) / 0.3585,
-            lab[0] > 8 ? fy ** 3 : lab[0] / k,
-            ((fz > e ? fz ** 3 : (116 * fz - 16) / k) * (1.0 - 0.3457 - 0.3585)) / 0.3585
-        ];
-
-    return d50toD65([xyz[0], xyz[1], xyz[2]]);
-};
-
-/**
- * Convert RGB to XYZ
- *
- * @param _context
- * @param args
- */
-export const rgbToXyz = (_context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const tokens = args.filter(nonFunctionArgSeparator);
-
-    if (tokens.length === 3) {
-        const [r, g, b] = tokens.map(getTokenColorValue),
-            rgb_linear = rgb2rgbLinear([r / 255, g / 255, b / 255]),
-            [x, y, z] = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]);
-        return [x, y, z, 1];
-    }
-
-    if (tokens.length === 4) {
-        const [r, g, b, a] = tokens.map(getTokenColorValue),
-            rgb_linear = rgb2rgbLinear([r / 255, g / 255, b / 255]),
-            [x, y, z] = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]);
-        return [x, y, z, a];
-    }
-
-    return [0, 0, 0, 1];
-};
-
-/**
- * HSL to XYZ
- *
- * @param context
- * @param args
- */
-export const hslToXyz = (context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const [h, s, l, a] = extractHslComponents(context, args),
-        rgb_linear = rgb2rgbLinear(hsl2rgb([h, s, l])),
-        [x, y, z] = rgbLinear2xyz([rgb_linear[0], rgb_linear[1], rgb_linear[2]]);
-
-    return [x, y, z, a];
-};
-
-/**
- * LAB to XYZ
- *
- * @param _context
- * @param args
- */
-export const labToXyz = (_context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const [l, a, b, alpha] = extractLabComponents(args),
-        [x, y, z] = lab2xyz([l, a, b]);
-    return [x, y, z, alpha];
-};
-
-/**
- * LCH to XYZ
- *
- * @param _context
- * @param args
- */
-export const lchToXyz = (_context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const [l, c, h, alpha] = extractLchComponents(args),
-        [x, y, z] = lab2xyz(lch2lab([l, c, h]));
-    return [x, y, z, alpha];
-};
-
-/**
- * OKLch to XYZ
- *
- * @param _context
- * @param args
- */
-export const oklchToXyz = (_context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const [l, c, h, alpha] = extractOkLchComponents(args),
-        [x, y, z] = oklab2xyz(lch2lab([l, c, h]));
-    return [x, y, z, alpha];
-};
-
-/**
- * OKLab to XYZ
- *
- * @param _context
- * @param args
- */
-export const oklabToXyz = (_context: Context, args: CSSValue[]): [number, number, number, number] => {
-    const [l, c, h, alpha] = extractLabComponents(args),
-        [x, y, z] = oklab2xyz([l, c, h]);
-    return [x, y, z, alpha];
-};
-
-/**
- * XYZ-50 to XYZ
- *
- * @param args
- */
-export const xyz50ToXYZ = (args: number[]): [number, number, number] => {
-    return d50toD65([args[0], args[1], args[2]]);
-};
-
-/**
- * Does nothing, required for SUPPORTED_COLOR_SPACES_FROM_XYZ in the _color() function
- *
- * @param args
- */
-export const xyzFromXYZ = (args: [number, number, number, number]): [number, number, number, number] => {
-    return args;
-};
-
-/**
- * XYZ-65 to XYZ-50
- *
- * @param args
- */
-export const xyz50FromXYZ = (args: [number, number, number, number]): [number, number, number, number] => {
-    const [x, y, z] = d65toD50([args[0], args[2], args[3]]);
-    return [x, y, z, args[3]];
-};
-
-/**
- * Convert XYZ to SRGB and Pack
- *
- * @param args
- */
-export const convertXyz = (args: number[]): number => {
-    return packXYZ([args[0], args[1], args[2], args[3]]);
-};
-
-/**
- * Convert XYZ-50 to SRGB and Pack
- *
- * @param args
- */
-export const convertXyz50 = (args: number[]): number => {
-    const xyz = xyz50ToXYZ([args[0], args[1], args[2]]);
-    return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
-};