html2canvas-pro 2.1.0 → 2.2.0

package/src/css/types/functions/gradient.ts

@@ -1,206 +0,0 @@
-import { CSSValue } from '../../syntax/parser';
-import {
-    CSSRadialExtent,
-    CSSRadialGradientImage,
-    CSSRadialShape,
-    GradientColorStop,
-    GradientCorner,
-    UnprocessedGradientColorStop
-} from '../image';
-import { color as colorType } from '../color';
-import { getAbsoluteValue, HUNDRED_PERCENT, isLengthPercentage, ZERO_LENGTH } from '../length-percentage';
-import { Context } from '../../../core/context';
-
-export const parseColorStop = (context: Context, args: CSSValue[]): UnprocessedGradientColorStop => {
-    const color = colorType.parse(context, args[0]);
-    const stop = args[1];
-    return stop && isLengthPercentage(stop) ? { color, stop } : { color, stop: null };
-};
-
-export const processColorStops = (stops: UnprocessedGradientColorStop[], lineLength: number): GradientColorStop[] => {
-    const first = stops[0];
-    const last = stops[stops.length - 1];
-    if (first.stop === null) {
-        first.stop = ZERO_LENGTH;
-    }
-
-    if (last.stop === null) {
-        last.stop = HUNDRED_PERCENT;
-    }
-
-    const processStops: (number | null)[] = [];
-    let previous = 0;
-    for (let i = 0; i < stops.length; i++) {
-        const stop = stops[i].stop;
-        if (stop !== null) {
-            const absoluteValue = getAbsoluteValue(stop, lineLength);
-            if (absoluteValue > previous) {
-                processStops.push(absoluteValue);
-            } else {
-                processStops.push(previous);
-            }
-            previous = absoluteValue;
-        } else {
-            processStops.push(null);
-        }
-    }
-
-    let gapBegin = null;
-    for (let i = 0; i < processStops.length; i++) {
-        const stop = processStops[i];
-        if (stop === null) {
-            if (gapBegin === null) {
-                gapBegin = i;
-            }
-        } else if (gapBegin !== null) {
-            const gapLength = i - gapBegin;
-            const beforeGap = processStops[gapBegin - 1] as number;
-            const gapValue = (stop - beforeGap) / (gapLength + 1);
-            for (let g = 1; g <= gapLength; g++) {
-                processStops[gapBegin + g - 1] = gapValue * g;
-            }
-            gapBegin = null;
-        }
-    }
-
-    return stops.map(({ color }, i) => {
-        return { color, stop: Math.max(Math.min(1, (processStops[i] as number) / lineLength), 0) };
-    });
-};
-
-const getAngleFromCorner = (corner: GradientCorner, width: number, height: number): number => {
-    const centerX = width / 2;
-    const centerY = height / 2;
-    const x = getAbsoluteValue(corner[0], width) - centerX;
-    const y = centerY - getAbsoluteValue(corner[1], height);
-
-    return (Math.atan2(y, x) + Math.PI * 2) % (Math.PI * 2);
-};
-
-export const calculateGradientDirection = (
-    angle: number | GradientCorner,
-    width: number,
-    height: number
-): [number, number, number, number, number] => {
-    const radian = typeof angle === 'number' ? angle : getAngleFromCorner(angle, width, height);
-
-    const lineLength = Math.abs(width * Math.sin(radian)) + Math.abs(height * Math.cos(radian));
-
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const halfLineLength = lineLength / 2;
-
-    const yDiff = Math.sin(radian - Math.PI / 2) * halfLineLength;
-    const xDiff = Math.cos(radian - Math.PI / 2) * halfLineLength;
-
-    return [lineLength, halfWidth - xDiff, halfWidth + xDiff, halfHeight - yDiff, halfHeight + yDiff];
-};
-
-const distance = (a: number, b: number): number => Math.sqrt(a * a + b * b);
-
-const findCorner = (width: number, height: number, x: number, y: number, closest: boolean): [number, number] => {
-    const corners = [
-        [0, 0],
-        [0, height],
-        [width, 0],
-        [width, height]
-    ];
-
-    return corners.reduce(
-        (stat, corner) => {
-            const [cx, cy] = corner;
-            const d = distance(x - cx, y - cy);
-            if (closest ? d < stat.optimumDistance : d > stat.optimumDistance) {
-                return {
-                    optimumCorner: corner,
-                    optimumDistance: d
-                };
-            }
-
-            return stat;
-        },
-        {
-            optimumDistance: closest ? Infinity : -Infinity,
-            optimumCorner: null
-        }
-    ).optimumCorner as [number, number];
-};
-
-export const calculateRadius = (
-    gradient: CSSRadialGradientImage,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-): [number, number] => {
-    let rx = 0;
-    let ry = 0;
-
-    switch (gradient.size) {
-        case CSSRadialExtent.CLOSEST_SIDE:
-            // The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient’s center.
-            // If the shape is an ellipse, it exactly meets the closest side in each dimension.
-            if (gradient.shape === CSSRadialShape.CIRCLE) {
-                rx = ry = Math.min(Math.abs(x), Math.abs(x - width), Math.abs(y), Math.abs(y - height));
-            } else if (gradient.shape === CSSRadialShape.ELLIPSE) {
-                rx = Math.min(Math.abs(x), Math.abs(x - width));
-                ry = Math.min(Math.abs(y), Math.abs(y - height));
-            }
-            break;
-
-        case CSSRadialExtent.CLOSEST_CORNER:
-            // The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient’s center.
-            // If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.
-            if (gradient.shape === CSSRadialShape.CIRCLE) {
-                rx = ry = Math.min(
-                    distance(x, y),
-                    distance(x, y - height),
-                    distance(x - width, y),
-                    distance(x - width, y - height)
-                );
-            } else if (gradient.shape === CSSRadialShape.ELLIPSE) {
-                // Compute the ratio ry/rx (which is to be the same as for "closest-side")
-                const c = Math.min(Math.abs(y), Math.abs(y - height)) / Math.min(Math.abs(x), Math.abs(x - width));
-                const [cx, cy] = findCorner(width, height, x, y, true);
-                rx = distance(cx - x, (cy - y) / c);
-                ry = c * rx;
-            }
-            break;
-
-        case CSSRadialExtent.FARTHEST_SIDE:
-            // Same as closest-side, except the ending shape is sized based on the farthest side(s)
-            if (gradient.shape === CSSRadialShape.CIRCLE) {
-                rx = ry = Math.max(Math.abs(x), Math.abs(x - width), Math.abs(y), Math.abs(y - height));
-            } else if (gradient.shape === CSSRadialShape.ELLIPSE) {
-                rx = Math.max(Math.abs(x), Math.abs(x - width));
-                ry = Math.max(Math.abs(y), Math.abs(y - height));
-            }
-            break;
-
-        case CSSRadialExtent.FARTHEST_CORNER:
-            // Same as closest-corner, except the ending shape is sized based on the farthest corner.
-            // If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.
-            if (gradient.shape === CSSRadialShape.CIRCLE) {
-                rx = ry = Math.max(
-                    distance(x, y),
-                    distance(x, y - height),
-                    distance(x - width, y),
-                    distance(x - width, y - height)
-                );
-            } else if (gradient.shape === CSSRadialShape.ELLIPSE) {
-                // Compute the ratio ry/rx (which is to be the same as for "farthest-side")
-                const c = Math.max(Math.abs(y), Math.abs(y - height)) / Math.max(Math.abs(x), Math.abs(x - width));
-                const [cx, cy] = findCorner(width, height, x, y, false);
-                rx = distance(cx - x, (cy - y) / c);
-                ry = c * rx;
-            }
-            break;
-    }
-
-    if (Array.isArray(gradient.size)) {
-        rx = getAbsoluteValue(gradient.size[0], width);
-        ry = gradient.size.length === 2 ? getAbsoluteValue(gradient.size[1], height) : rx;
-    }
-
-    return [rx, ry];
-};

package/src/css/types/functions/linear-gradient.ts

@@ -1,28 +0,0 @@
-import { CSSValue, parseFunctionArgs } from '../../syntax/parser';
-import { TokenType } from '../../syntax/tokenizer';
-import { isAngle, angle as angleType, parseNamedSide, deg } from '../angle';
-import { CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop } from '../image';
-import { parseColorStop } from './gradient';
-import { Context } from '../../../core/context';
-
-export const linearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
-    let angle: number | GradientCorner = deg(180);
-    const stops: UnprocessedGradientColorStop[] = [];
-
-    parseFunctionArgs(tokens).forEach((arg, i) => {
-        if (i === 0) {
-            const firstToken = arg[0];
-            if (firstToken.type === TokenType.IDENT_TOKEN && firstToken.value === 'to') {
-                angle = parseNamedSide(arg);
-                return;
-            } else if (isAngle(firstToken)) {
-                angle = angleType.parse(context, firstToken);
-                return;
-            }
-        }
-        const colorStop = parseColorStop(context, arg);
-        stops.push(colorStop);
-    });
-
-    return { angle, stops, type: CSSImageType.LINEAR_GRADIENT };
-};

package/src/css/types/functions/radial-gradient.ts

@@ -1,101 +0,0 @@
-import { CSSValue, isIdentToken, parseFunctionArgs } from '../../syntax/parser';
-import {
-    CSSImageType,
-    CSSRadialExtent,
-    CSSRadialGradientImage,
-    CSSRadialShape,
-    CSSRadialSize,
-    UnprocessedGradientColorStop
-} from '../image';
-import { parseColorStop } from './gradient';
-import {
-    FIFTY_PERCENT,
-    HUNDRED_PERCENT,
-    isLengthPercentage,
-    LengthPercentage,
-    ZERO_LENGTH
-} from '../length-percentage';
-import { isLength } from '../length';
-import { Context } from '../../../core/context';
-export const CLOSEST_SIDE = 'closest-side';
-export const FARTHEST_SIDE = 'farthest-side';
-export const CLOSEST_CORNER = 'closest-corner';
-export const FARTHEST_CORNER = 'farthest-corner';
-export const CIRCLE = 'circle';
-export const ELLIPSE = 'ellipse';
-export const COVER = 'cover';
-export const CONTAIN = 'contain';
-
-export const radialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
-    let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
-    let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
-    const stops: UnprocessedGradientColorStop[] = [];
-    const position: LengthPercentage[] = [];
-    parseFunctionArgs(tokens).forEach((arg, i) => {
-        let isColorStop = true;
-        if (i === 0) {
-            let isAtPosition = false;
-            isColorStop = arg.reduce((acc, token) => {
-                if (isAtPosition) {
-                    if (isIdentToken(token)) {
-                        switch (token.value) {
-                            case 'center':
-                                position.push(FIFTY_PERCENT);
-                                return acc;
-                            case 'top':
-                            case 'left':
-                                position.push(ZERO_LENGTH);
-                                return acc;
-                            case 'right':
-                            case 'bottom':
-                                position.push(HUNDRED_PERCENT);
-                                return acc;
-                        }
-                    } else if (isLengthPercentage(token) || isLength(token)) {
-                        position.push(token);
-                    }
-                } else if (isIdentToken(token)) {
-                    switch (token.value) {
-                        case CIRCLE:
-                            shape = CSSRadialShape.CIRCLE;
-                            return false;
-                        case ELLIPSE:
-                            shape = CSSRadialShape.ELLIPSE;
-                            return false;
-                        case 'at':
-                            isAtPosition = true;
-                            return false;
-                        case CLOSEST_SIDE:
-                            size = CSSRadialExtent.CLOSEST_SIDE;
-                            return false;
-                        case COVER:
-                        case FARTHEST_SIDE:
-                            size = CSSRadialExtent.FARTHEST_SIDE;
-                            return false;
-                        case CONTAIN:
-                        case CLOSEST_CORNER:
-                            size = CSSRadialExtent.CLOSEST_CORNER;
-                            return false;
-                        case FARTHEST_CORNER:
-                            size = CSSRadialExtent.FARTHEST_CORNER;
-                            return false;
-                    }
-                } else if (isLength(token) || isLengthPercentage(token)) {
-                    if (!Array.isArray(size)) {
-                        size = [];
-                    }
-                    size.push(token);
-                    return false;
-                }
-                return acc;
-            }, isColorStop);
-        }
-
-        if (isColorStop) {
-            const colorStop = parseColorStop(context, arg);
-            stops.push(colorStop);
-        }
-    });
-
-    return { size, shape, stops, position, type: CSSImageType.RADIAL_GRADIENT };
-};

package/src/css/types/image.ts

@@ -1,120 +0,0 @@
-import { CSSValue } from '../syntax/parser';
-import { TokenType } from '../syntax/tokenizer';
-import { Color } from './color';
-import { linearGradient } from './functions/linear-gradient';
-import { prefixLinearGradient } from './functions/-prefix-linear-gradient';
-import { ITypeDescriptor } from '../type-descriptor';
-import { LengthPercentage } from './length-percentage';
-import { webkitGradient } from './functions/-webkit-gradient';
-import { radialGradient } from './functions/radial-gradient';
-import { prefixRadialGradient } from './functions/-prefix-radial-gradient';
-import { Context } from '../../core/context';
-
-export const enum CSSImageType {
-    URL,
-    LINEAR_GRADIENT,
-    RADIAL_GRADIENT
-}
-
-export const isLinearGradient = (background: ICSSImage): background is CSSLinearGradientImage => {
-    return background.type === CSSImageType.LINEAR_GRADIENT;
-};
-
-export const isRadialGradient = (background: ICSSImage): background is CSSRadialGradientImage => {
-    return background.type === CSSImageType.RADIAL_GRADIENT;
-};
-
-export interface UnprocessedGradientColorStop {
-    color: Color;
-    stop: LengthPercentage | null;
-}
-
-export interface GradientColorStop {
-    color: Color;
-    stop: number;
-}
-
-export interface ICSSImage {
-    type: CSSImageType;
-}
-
-export interface CSSURLImage extends ICSSImage {
-    url: string;
-    type: CSSImageType.URL;
-}
-
-// interface ICSSGeneratedImage extends ICSSImage {}
-
-export type GradientCorner = [LengthPercentage, LengthPercentage];
-
-interface ICSSGradientImage extends ICSSImage {
-    stops: UnprocessedGradientColorStop[];
-}
-
-export interface CSSLinearGradientImage extends ICSSGradientImage {
-    angle: number | GradientCorner;
-    type: CSSImageType.LINEAR_GRADIENT;
-}
-
-export const enum CSSRadialShape {
-    CIRCLE,
-    ELLIPSE
-}
-
-export const enum CSSRadialExtent {
-    CLOSEST_SIDE,
-    FARTHEST_SIDE,
-    CLOSEST_CORNER,
-    FARTHEST_CORNER
-}
-
-export type CSSRadialSize = CSSRadialExtent | LengthPercentage[];
-
-export interface CSSRadialGradientImage extends ICSSGradientImage {
-    type: CSSImageType.RADIAL_GRADIENT;
-    shape: CSSRadialShape;
-    size: CSSRadialSize;
-    position: LengthPercentage[];
-}
-
-export const image: ITypeDescriptor<ICSSImage> = {
-    name: 'image',
-    parse: (context: Context, value: CSSValue): ICSSImage => {
-        if (value.type === TokenType.URL_TOKEN) {
-            const image: CSSURLImage = { url: value.value, type: CSSImageType.URL };
-            context.cache.addImage(value.value);
-            return image;
-        }
-
-        if (value.type === TokenType.FUNCTION) {
-            const imageFunction = SUPPORTED_IMAGE_FUNCTIONS[value.name];
-            if (typeof imageFunction === 'undefined') {
-                throw new Error(`Attempting to parse an unsupported image function "${value.name}"`);
-            }
-            return imageFunction(context, value.values);
-        }
-
-        throw new Error(`Unsupported image type ${value.type}`);
-    }
-};
-
-export function isSupportedImage(value: CSSValue): boolean {
-    return (
-        !(value.type === TokenType.IDENT_TOKEN && value.value === 'none') &&
-        (value.type !== TokenType.FUNCTION || !!SUPPORTED_IMAGE_FUNCTIONS[value.name])
-    );
-}
-
-const SUPPORTED_IMAGE_FUNCTIONS: Record<string, (context: Context, args: CSSValue[]) => ICSSImage> = {
-    'linear-gradient': linearGradient,
-    '-moz-linear-gradient': prefixLinearGradient,
-    '-ms-linear-gradient': prefixLinearGradient,
-    '-o-linear-gradient': prefixLinearGradient,
-    '-webkit-linear-gradient': prefixLinearGradient,
-    'radial-gradient': radialGradient,
-    '-moz-radial-gradient': prefixRadialGradient,
-    '-ms-radial-gradient': prefixRadialGradient,
-    '-o-radial-gradient': prefixRadialGradient,
-    '-webkit-radial-gradient': prefixRadialGradient,
-    '-webkit-gradient': webkitGradient
-};

package/src/css/types/index.ts

@@ -1 +0,0 @@
-export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage' | 'time';

package/src/css/types/length-percentage.ts

@@ -1,137 +0,0 @@
-import { DimensionToken, FLAG_INTEGER, NumberValueToken, TokenType } from '../syntax/tokenizer';
-import { CSSValue, CSSFunction, isDimensionToken } from '../syntax/parser';
-import { isLength } from './length';
-export type LengthPercentage = DimensionToken | NumberValueToken;
-export type LengthPercentageTuple = [LengthPercentage] | [LengthPercentage, LengthPercentage];
-
-export const isLengthPercentage = (token: CSSValue): token is LengthPercentage =>
-    token.type === TokenType.PERCENTAGE_TOKEN || isLength(token);
-
-/**
- * Check if a token is a calc() function
- */
-export const isCalcFunction = (token: CSSValue): token is CSSFunction =>
-    token.type === TokenType.FUNCTION && token.name === 'calc';
-
-/**
- * Evaluate a calc() expression and convert to LengthPercentage token
- * Supports basic arithmetic: +, -, *, /
- * Note: Percentages in calc() are converted based on a context value
- */
-export const evaluateCalcToLengthPercentage = (calcToken: CSSFunction, contextValue = 0): LengthPercentage | null => {
-    // Build expression string from tokens
-    const buildExpression = (values: CSSValue[]): string | null => {
-        let expression = '';
-
-        for (const value of values) {
-            if (value.type === TokenType.WHITESPACE_TOKEN) {
-                continue;
-            }
-
-            if (value.type === TokenType.FUNCTION) {
-                if (value.name === 'calc') {
-                    const nested = buildExpression(value.values);
-                    if (nested === null) return null;
-                    expression += `(${nested})`;
-                } else {
-                    return null;
-                }
-            } else if (value.type === TokenType.NUMBER_TOKEN) {
-                expression += value.number.toString();
-            } else if (value.type === TokenType.DIMENSION_TOKEN) {
-                // Convert units to px
-                if (value.unit === 'px') {
-                    expression += value.number.toString();
-                } else if (value.unit === 'rem' || value.unit === 'em') {
-                    expression += (value.number * 16).toString();
-                } else {
-                    expression += value.number.toString();
-                }
-            } else if (value.type === TokenType.PERCENTAGE_TOKEN) {
-                // Convert percentage to absolute value based on context
-                expression += ((value.number / 100) * contextValue).toString();
-            } else if (value.type === TokenType.DELIM_TOKEN) {
-                const op = value.value;
-                if (op === '+' || op === '-' || op === '*' || op === '/') {
-                    expression += ` ${op} `;
-                } else if (op === '(') {
-                    expression += '(';
-                } else if (op === ')') {
-                    expression += ')';
-                }
-            }
-        }
-
-        return expression;
-    };
-
-    try {
-        const expression = buildExpression(calcToken.values);
-        if (expression === null || expression.trim() === '') {
-            return null;
-        }
-
-        // Evaluate the expression
-        // Note: Using Function constructor (similar to color.ts line 185)
-        const result = new Function('return ' + expression)();
-
-        if (typeof result === 'number' && !isNaN(result)) {
-            // Return as a number token in px
-            return {
-                type: TokenType.NUMBER_TOKEN,
-                number: result,
-                flags: FLAG_INTEGER
-            };
-        }
-    } catch (e) {
-        return null;
-    }
-
-    return null;
-};
-export const parseLengthPercentageTuple = (tokens: LengthPercentage[]): LengthPercentageTuple =>
-    tokens.length > 1 ? [tokens[0], tokens[1]] : [tokens[0]];
-export const ZERO_LENGTH: NumberValueToken = {
-    type: TokenType.NUMBER_TOKEN,
-    number: 0,
-    flags: FLAG_INTEGER
-};
-
-export const FIFTY_PERCENT: NumberValueToken = {
-    type: TokenType.PERCENTAGE_TOKEN,
-    number: 50,
-    flags: FLAG_INTEGER
-};
-
-export const HUNDRED_PERCENT: NumberValueToken = {
-    type: TokenType.PERCENTAGE_TOKEN,
-    number: 100,
-    flags: FLAG_INTEGER
-};
-
-export const getAbsoluteValueForTuple = (
-    tuple: LengthPercentageTuple,
-    width: number,
-    height: number
-): [number, number] => {
-    const [x, y] = tuple;
-    return [getAbsoluteValue(x, width), getAbsoluteValue(typeof y !== 'undefined' ? y : x, height)];
-};
-export const getAbsoluteValue = (token: LengthPercentage, parent: number): number => {
-    if (token.type === TokenType.PERCENTAGE_TOKEN) {
-        return (token.number / 100) * parent;
-    }
-
-    if (isDimensionToken(token)) {
-        switch (token.unit) {
-            case 'rem':
-            case 'em':
-                return 16 * token.number; // TODO use correct font-size
-            case 'px':
-            default:
-                return token.number;
-        }
-    }
-
-    return token.number;
-};

package/src/css/types/length.ts

@@ -1,7 +0,0 @@
-import { CSSValue } from '../syntax/parser';
-import { DimensionToken, NumberValueToken, TokenType } from '../syntax/tokenizer';
-
-export type Length = DimensionToken | NumberValueToken;
-
-export const isLength = (token: CSSValue): token is Length =>
-    token.type === TokenType.NUMBER_TOKEN || token.type === TokenType.DIMENSION_TOKEN;

package/src/css/types/time.ts

@@ -1,20 +0,0 @@
-import { CSSValue } from '../syntax/parser';
-import { TokenType } from '../syntax/tokenizer';
-import { ITypeDescriptor } from '../type-descriptor';
-import { Context } from '../../core/context';
-
-export const time: ITypeDescriptor<number> = {
-    name: 'time',
-    parse: (_context: Context, value: CSSValue): number => {
-        if (value.type === TokenType.DIMENSION_TOKEN) {
-            switch (value.unit.toLowerCase()) {
-                case 's':
-                    return 1000 * value.number;
-                case 'ms':
-                    return value.number;
-            }
-        }
-
-        throw new Error(`Unsupported time type`);
-    }
-};

package/src/dom/__mocks__/document-cloner.ts

@@ -1,22 +0,0 @@
-export class DocumentCloner {
-    clonedReferenceElement?: HTMLElement;
-
-    constructor() {
-        this.clonedReferenceElement = {
-            ownerDocument: {
-                defaultView: {
-                    pageXOffset: 12,
-                    pageYOffset: 34
-                }
-            }
-        } as HTMLElement;
-    }
-
-    toIFrame(): Promise<HTMLIFrameElement> {
-        return Promise.resolve({} as HTMLIFrameElement);
-    }
-
-    static destroy(): boolean {
-        return true;
-    }
-}