html2canvas-pro 2.0.3 → 2.1.0

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

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,120 @@
+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

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

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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,22 @@
+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;
+    }
+}