html2canvas-pro 2.1.0 → 2.2.0

package/src/render/background.ts

@@ -1,298 +0,0 @@
-import { Bounds } from '../css/layout/bounds';
-import { BACKGROUND_ORIGIN } from '../css/property-descriptors/background-origin';
-import { ElementContainer } from '../dom/element-container';
-import { BACKGROUND_SIZE, BackgroundSizeInfo } from '../css/property-descriptors/background-size';
-import { Vector } from './vector';
-import { BACKGROUND_REPEAT } from '../css/property-descriptors/background-repeat';
-import { getAbsoluteValue, getAbsoluteValueForTuple, isLengthPercentage } from '../css/types/length-percentage';
-import { CSSValue, isIdentToken } from '../css/syntax/parser';
-import { contentBox, paddingBox } from './box-sizing';
-import { Path } from './path';
-import { BACKGROUND_CLIP } from '../css/property-descriptors/background-clip';
-
-export const calculateBackgroundPositioningArea = (
-    backgroundOrigin: BACKGROUND_ORIGIN,
-    element: ElementContainer
-): Bounds => {
-    if (backgroundOrigin === BACKGROUND_ORIGIN.BORDER_BOX) {
-        return element.bounds;
-    }
-
-    if (backgroundOrigin === BACKGROUND_ORIGIN.CONTENT_BOX) {
-        return contentBox(element);
-    }
-
-    return paddingBox(element);
-};
-
-export const calculateBackgroundPaintingArea = (backgroundClip: BACKGROUND_CLIP, element: ElementContainer): Bounds => {
-    if (backgroundClip === BACKGROUND_CLIP.BORDER_BOX) {
-        return element.bounds;
-    }
-
-    if (backgroundClip === BACKGROUND_CLIP.CONTENT_BOX) {
-        return contentBox(element);
-    }
-
-    return paddingBox(element);
-};
-
-export const calculateBackgroundRendering = (
-    container: ElementContainer,
-    index: number,
-    intrinsicSize: [number | null, number | null, number | null]
-): [Path[], number, number, number, number] => {
-    const backgroundPositioningArea = calculateBackgroundPositioningArea(
-        getBackgroundValueForIndex(container.styles.backgroundOrigin, index),
-        container
-    );
-
-    const backgroundPaintingArea = calculateBackgroundPaintingArea(
-        getBackgroundValueForIndex(container.styles.backgroundClip, index),
-        container
-    );
-
-    const backgroundImageSize = calculateBackgroundSize(
-        getBackgroundValueForIndex(container.styles.backgroundSize, index),
-        intrinsicSize,
-        backgroundPositioningArea
-    );
-
-    let [sizeWidth, sizeHeight] = backgroundImageSize;
-
-    const position = getAbsoluteValueForTuple(
-        getBackgroundValueForIndex(container.styles.backgroundPosition, index),
-        backgroundPositioningArea.width - sizeWidth,
-        backgroundPositioningArea.height - sizeHeight
-    );
-
-    const path = calculateBackgroundRepeatPath(
-        getBackgroundValueForIndex(container.styles.backgroundRepeat, index),
-        position,
-        backgroundImageSize,
-        backgroundPositioningArea,
-        backgroundPaintingArea
-    );
-
-    const offsetX = Math.round(backgroundPositioningArea.left + position[0]);
-    const offsetY = Math.round(backgroundPositioningArea.top + position[1]);
-
-    sizeWidth = Math.max(1, sizeWidth);
-    sizeHeight = Math.max(1, sizeHeight);
-
-    return [path, offsetX, offsetY, sizeWidth, sizeHeight];
-};
-
-export const isAuto = (token: CSSValue): boolean => isIdentToken(token) && token.value === BACKGROUND_SIZE.AUTO;
-
-const hasIntrinsicValue = (value: number | null): value is number => typeof value === 'number';
-
-export const calculateBackgroundSize = (
-    size: BackgroundSizeInfo[],
-    [intrinsicWidth, intrinsicHeight, intrinsicProportion]: [number | null, number | null, number | null],
-    bounds: Bounds
-): [number, number] => {
-    const [first, second] = size;
-
-    if (!first) {
-        return [0, 0];
-    }
-
-    if (isLengthPercentage(first) && second && isLengthPercentage(second)) {
-        return [getAbsoluteValue(first, bounds.width), getAbsoluteValue(second, bounds.height)];
-    }
-
-    const hasIntrinsicProportion = hasIntrinsicValue(intrinsicProportion);
-
-    if (isIdentToken(first) && (first.value === BACKGROUND_SIZE.CONTAIN || first.value === BACKGROUND_SIZE.COVER)) {
-        if (hasIntrinsicValue(intrinsicProportion)) {
-            const targetRatio = bounds.width / bounds.height;
-
-            return targetRatio < intrinsicProportion !== (first.value === BACKGROUND_SIZE.COVER)
-                ? [bounds.width, bounds.width / intrinsicProportion]
-                : [bounds.height * intrinsicProportion, bounds.height];
-        }
-
-        return [bounds.width, bounds.height];
-    }
-
-    const hasIntrinsicWidth = hasIntrinsicValue(intrinsicWidth);
-    const hasIntrinsicHeight = hasIntrinsicValue(intrinsicHeight);
-    const hasIntrinsicDimensions = hasIntrinsicWidth || hasIntrinsicHeight;
-
-    // If the background-size is auto or auto auto:
-    if (isAuto(first) && (!second || isAuto(second))) {
-        // If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
-        if (hasIntrinsicWidth && hasIntrinsicHeight) {
-            return [intrinsicWidth as number, intrinsicHeight as number];
-        }
-
-        // If the image has no intrinsic dimensions and has no intrinsic proportions,
-        // it's rendered at the size of the background positioning area.
-
-        if (!hasIntrinsicProportion && !hasIntrinsicDimensions) {
-            return [bounds.width, bounds.height];
-        }
-
-        // TODO If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
-
-        // If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension.
-        // The other dimension is computed using the specified dimension and the intrinsic proportions.
-        if (hasIntrinsicDimensions && hasIntrinsicProportion) {
-            const width = hasIntrinsicWidth
-                ? (intrinsicWidth as number)
-                : (intrinsicHeight as number) * (intrinsicProportion as number);
-            const height = hasIntrinsicHeight
-                ? (intrinsicHeight as number)
-                : (intrinsicWidth as number) / (intrinsicProportion as number);
-            return [width, height];
-        }
-
-        // If the image has only one intrinsic dimension but has no intrinsic proportions,
-        // it's rendered using the specified dimension and the other dimension of the background positioning area.
-        const width = hasIntrinsicWidth ? (intrinsicWidth as number) : bounds.width;
-        const height = hasIntrinsicHeight ? (intrinsicHeight as number) : bounds.height;
-        return [width, height];
-    }
-
-    // If the image has intrinsic proportions, it's stretched to the specified dimension.
-    // The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
-    if (hasIntrinsicProportion) {
-        let width = 0;
-        let height = 0;
-        if (isLengthPercentage(first)) {
-            width = getAbsoluteValue(first, bounds.width);
-        } else if (isLengthPercentage(second)) {
-            height = getAbsoluteValue(second, bounds.height);
-        }
-
-        if (isAuto(first)) {
-            width = height * (intrinsicProportion as number);
-        } else if (!second || isAuto(second)) {
-            height = width / (intrinsicProportion as number);
-        }
-
-        return [width, height];
-    }
-
-    // If the image has no intrinsic proportions, it's stretched to the specified dimension.
-    // The unspecified dimension is computed using the image's corresponding intrinsic dimension,
-    // if there is one. If there is no such intrinsic dimension,
-    // it becomes the corresponding dimension of the background positioning area.
-
-    let width = null;
-    let height = null;
-
-    if (isLengthPercentage(first)) {
-        width = getAbsoluteValue(first, bounds.width);
-    } else if (second && isLengthPercentage(second)) {
-        height = getAbsoluteValue(second, bounds.height);
-    }
-
-    if (width !== null && (!second || isAuto(second))) {
-        height =
-            hasIntrinsicWidth && hasIntrinsicHeight
-                ? (width / (intrinsicWidth as number)) * (intrinsicHeight as number)
-                : bounds.height;
-    }
-
-    if (height !== null && isAuto(first)) {
-        width =
-            hasIntrinsicWidth && hasIntrinsicHeight
-                ? (height / (intrinsicHeight as number)) * (intrinsicWidth as number)
-                : bounds.width;
-    }
-
-    if (width !== null && height !== null) {
-        return [width, height];
-    }
-
-    throw new Error(`Unable to calculate background-size for element`);
-};
-
-export const getBackgroundValueForIndex = <T>(values: T[], index: number): T => {
-    const value = values[index];
-    if (typeof value === 'undefined') {
-        return values[0];
-    }
-
-    return value;
-};
-
-export const calculateBackgroundRepeatPath = (
-    repeat: BACKGROUND_REPEAT,
-    [x, y]: [number, number],
-    [width, height]: [number, number],
-    backgroundPositioningArea: Bounds,
-    backgroundPaintingArea: Bounds
-): [Vector, Vector, Vector, Vector] => {
-    switch (repeat) {
-        case BACKGROUND_REPEAT.REPEAT_X:
-            return [
-                new Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width),
-                    Math.round(backgroundPositioningArea.top + y)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width),
-                    Math.round(height + backgroundPositioningArea.top + y)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left),
-                    Math.round(height + backgroundPositioningArea.top + y)
-                )
-            ];
-        case BACKGROUND_REPEAT.REPEAT_Y:
-            return [
-                new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x + width),
-                    Math.round(backgroundPositioningArea.top)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x + width),
-                    Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x),
-                    Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)
-                )
-            ];
-        case BACKGROUND_REPEAT.NO_REPEAT:
-            return [
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x),
-                    Math.round(backgroundPositioningArea.top + y)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x + width),
-                    Math.round(backgroundPositioningArea.top + y)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x + width),
-                    Math.round(backgroundPositioningArea.top + y + height)
-                ),
-                new Vector(
-                    Math.round(backgroundPositioningArea.left + x),
-                    Math.round(backgroundPositioningArea.top + y + height)
-                )
-            ];
-        default:
-            return [
-                new Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.top)),
-                new Vector(
-                    Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width),
-                    Math.round(backgroundPaintingArea.top)
-                ),
-                new Vector(
-                    Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width),
-                    Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)
-                ),
-                new Vector(
-                    Math.round(backgroundPaintingArea.left),
-                    Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)
-                )
-            ];
-    }
-};

package/src/render/bezier-curve.ts

@@ -1,47 +0,0 @@
-import { Vector } from './vector';
-import { IPath, PathType, Path } from './path';
-
-const lerp = (a: Vector, b: Vector, t: number): Vector => {
-    return new Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
-};
-
-export class BezierCurve implements IPath {
-    type: PathType;
-    start: Vector;
-    startControl: Vector;
-    endControl: Vector;
-    end: Vector;
-
-    constructor(start: Vector, startControl: Vector, endControl: Vector, end: Vector) {
-        this.type = PathType.BEZIER_CURVE;
-        this.start = start;
-        this.startControl = startControl;
-        this.endControl = endControl;
-        this.end = end;
-    }
-
-    subdivide(t: number, firstHalf: boolean): BezierCurve {
-        const ab = lerp(this.start, this.startControl, t);
-        const bc = lerp(this.startControl, this.endControl, t);
-        const cd = lerp(this.endControl, this.end, t);
-        const abbc = lerp(ab, bc, t);
-        const bccd = lerp(bc, cd, t);
-        const dest = lerp(abbc, bccd, t);
-        return firstHalf ? new BezierCurve(this.start, ab, abbc, dest) : new BezierCurve(dest, bccd, cd, this.end);
-    }
-
-    add(deltaX: number, deltaY: number): BezierCurve {
-        return new BezierCurve(
-            this.start.add(deltaX, deltaY),
-            this.startControl.add(deltaX, deltaY),
-            this.endControl.add(deltaX, deltaY),
-            this.end.add(deltaX, deltaY)
-        );
-    }
-
-    reverse(): BezierCurve {
-        return new BezierCurve(this.end, this.endControl, this.startControl, this.start);
-    }
-}
-
-export const isBezierCurve = (path: Path): path is BezierCurve => path.type === PathType.BEZIER_CURVE;

package/src/render/border.ts

@@ -1,165 +0,0 @@
-import { Path } from './path';
-import { BoundCurves } from './bound-curves';
-import { isBezierCurve } from './bezier-curve';
-
-export const parsePathForBorder = (curves: BoundCurves, borderSide: number): Path[] => {
-    switch (borderSide) {
-        case 0:
-            return createPathFromCurves(
-                curves.topLeftBorderBox,
-                curves.topLeftPaddingBox,
-                curves.topRightBorderBox,
-                curves.topRightPaddingBox
-            );
-        case 1:
-            return createPathFromCurves(
-                curves.topRightBorderBox,
-                curves.topRightPaddingBox,
-                curves.bottomRightBorderBox,
-                curves.bottomRightPaddingBox
-            );
-        case 2:
-            return createPathFromCurves(
-                curves.bottomRightBorderBox,
-                curves.bottomRightPaddingBox,
-                curves.bottomLeftBorderBox,
-                curves.bottomLeftPaddingBox
-            );
-        case 3:
-        default:
-            return createPathFromCurves(
-                curves.bottomLeftBorderBox,
-                curves.bottomLeftPaddingBox,
-                curves.topLeftBorderBox,
-                curves.topLeftPaddingBox
-            );
-    }
-};
-
-export const parsePathForBorderDoubleOuter = (curves: BoundCurves, borderSide: number): Path[] => {
-    switch (borderSide) {
-        case 0:
-            return createPathFromCurves(
-                curves.topLeftBorderBox,
-                curves.topLeftBorderDoubleOuterBox,
-                curves.topRightBorderBox,
-                curves.topRightBorderDoubleOuterBox
-            );
-        case 1:
-            return createPathFromCurves(
-                curves.topRightBorderBox,
-                curves.topRightBorderDoubleOuterBox,
-                curves.bottomRightBorderBox,
-                curves.bottomRightBorderDoubleOuterBox
-            );
-        case 2:
-            return createPathFromCurves(
-                curves.bottomRightBorderBox,
-                curves.bottomRightBorderDoubleOuterBox,
-                curves.bottomLeftBorderBox,
-                curves.bottomLeftBorderDoubleOuterBox
-            );
-        case 3:
-        default:
-            return createPathFromCurves(
-                curves.bottomLeftBorderBox,
-                curves.bottomLeftBorderDoubleOuterBox,
-                curves.topLeftBorderBox,
-                curves.topLeftBorderDoubleOuterBox
-            );
-    }
-};
-
-export const parsePathForBorderDoubleInner = (curves: BoundCurves, borderSide: number): Path[] => {
-    switch (borderSide) {
-        case 0:
-            return createPathFromCurves(
-                curves.topLeftBorderDoubleInnerBox,
-                curves.topLeftPaddingBox,
-                curves.topRightBorderDoubleInnerBox,
-                curves.topRightPaddingBox
-            );
-        case 1:
-            return createPathFromCurves(
-                curves.topRightBorderDoubleInnerBox,
-                curves.topRightPaddingBox,
-                curves.bottomRightBorderDoubleInnerBox,
-                curves.bottomRightPaddingBox
-            );
-        case 2:
-            return createPathFromCurves(
-                curves.bottomRightBorderDoubleInnerBox,
-                curves.bottomRightPaddingBox,
-                curves.bottomLeftBorderDoubleInnerBox,
-                curves.bottomLeftPaddingBox
-            );
-        case 3:
-        default:
-            return createPathFromCurves(
-                curves.bottomLeftBorderDoubleInnerBox,
-                curves.bottomLeftPaddingBox,
-                curves.topLeftBorderDoubleInnerBox,
-                curves.topLeftPaddingBox
-            );
-    }
-};
-
-export const parsePathForBorderStroke = (curves: BoundCurves, borderSide: number): Path[] => {
-    switch (borderSide) {
-        case 0:
-            return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke);
-        case 1:
-            return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke);
-        case 2:
-            return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke);
-        case 3:
-        default:
-            return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke);
-    }
-};
-
-const createStrokePathFromCurves = (outer1: Path, outer2: Path): Path[] => {
-    const path = [];
-    if (isBezierCurve(outer1)) {
-        path.push(outer1.subdivide(0.5, false));
-    } else {
-        path.push(outer1);
-    }
-
-    if (isBezierCurve(outer2)) {
-        path.push(outer2.subdivide(0.5, true));
-    } else {
-        path.push(outer2);
-    }
-
-    return path;
-};
-
-const createPathFromCurves = (outer1: Path, inner1: Path, outer2: Path, inner2: Path): Path[] => {
-    const path = [];
-    if (isBezierCurve(outer1)) {
-        path.push(outer1.subdivide(0.5, false));
-    } else {
-        path.push(outer1);
-    }
-
-    if (isBezierCurve(outer2)) {
-        path.push(outer2.subdivide(0.5, true));
-    } else {
-        path.push(outer2);
-    }
-
-    if (isBezierCurve(inner2)) {
-        path.push(inner2.subdivide(0.5, true).reverse());
-    } else {
-        path.push(inner2);
-    }
-
-    if (isBezierCurve(inner1)) {
-        path.push(inner1.subdivide(0.5, false).reverse());
-    } else {
-        path.push(inner1);
-    }
-
-    return path;
-};