html2canvas-pro 2.0.4 → 2.1.0

package/src/render/background.ts

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

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

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