html2canvas-pro 2.0.3 → 2.1.0

package/src/render/bound-curves.ts

@@ -0,0 +1,388 @@
+import { ElementContainer } from '../dom/element-container';
+import { getAbsoluteValue, getAbsoluteValueForTuple } from '../css/types/length-percentage';
+import { Vector } from './vector';
+import { BezierCurve } from './bezier-curve';
+import { Path } from './path';
+
+export class BoundCurves {
+    readonly topLeftBorderDoubleOuterBox: Path;
+    readonly topRightBorderDoubleOuterBox: Path;
+    readonly bottomRightBorderDoubleOuterBox: Path;
+    readonly bottomLeftBorderDoubleOuterBox: Path;
+    readonly topLeftBorderDoubleInnerBox: Path;
+    readonly topRightBorderDoubleInnerBox: Path;
+    readonly bottomRightBorderDoubleInnerBox: Path;
+    readonly bottomLeftBorderDoubleInnerBox: Path;
+    readonly topLeftBorderStroke: Path;
+    readonly topRightBorderStroke: Path;
+    readonly bottomRightBorderStroke: Path;
+    readonly bottomLeftBorderStroke: Path;
+    readonly topLeftBorderBox: Path;
+    readonly topRightBorderBox: Path;
+    readonly bottomRightBorderBox: Path;
+    readonly bottomLeftBorderBox: Path;
+    readonly topLeftPaddingBox: Path;
+    readonly topRightPaddingBox: Path;
+    readonly bottomRightPaddingBox: Path;
+    readonly bottomLeftPaddingBox: Path;
+    readonly topLeftContentBox: Path;
+    readonly topRightContentBox: Path;
+    readonly bottomRightContentBox: Path;
+    readonly bottomLeftContentBox: Path;
+
+    constructor(element: ElementContainer) {
+        const styles = element.styles;
+        const bounds = element.bounds;
+
+        let [tlh, tlv] = getAbsoluteValueForTuple(styles.borderTopLeftRadius, bounds.width, bounds.height);
+        let [trh, trv] = getAbsoluteValueForTuple(styles.borderTopRightRadius, bounds.width, bounds.height);
+        let [brh, brv] = getAbsoluteValueForTuple(styles.borderBottomRightRadius, bounds.width, bounds.height);
+        let [blh, blv] = getAbsoluteValueForTuple(styles.borderBottomLeftRadius, bounds.width, bounds.height);
+
+        const factors = [];
+        factors.push((tlh + trh) / bounds.width);
+        factors.push((blh + brh) / bounds.width);
+        factors.push((tlv + blv) / bounds.height);
+        factors.push((trv + brv) / bounds.height);
+        const maxFactor = Math.max(...factors);
+
+        if (maxFactor > 1) {
+            tlh /= maxFactor;
+            tlv /= maxFactor;
+            trh /= maxFactor;
+            trv /= maxFactor;
+            brh /= maxFactor;
+            brv /= maxFactor;
+            blh /= maxFactor;
+            blv /= maxFactor;
+        }
+
+        const topWidth = bounds.width - trh;
+        const rightHeight = bounds.height - brv;
+        const bottomWidth = bounds.width - brh;
+        const leftHeight = bounds.height - blv;
+
+        const borderTopWidth = styles.borderTopWidth;
+        const borderRightWidth = styles.borderRightWidth;
+        const borderBottomWidth = styles.borderBottomWidth;
+        const borderLeftWidth = styles.borderLeftWidth;
+
+        const paddingTop = getAbsoluteValue(styles.paddingTop, element.bounds.width);
+        const paddingRight = getAbsoluteValue(styles.paddingRight, element.bounds.width);
+        const paddingBottom = getAbsoluteValue(styles.paddingBottom, element.bounds.width);
+        const paddingLeft = getAbsoluteValue(styles.paddingLeft, element.bounds.width);
+
+        this.topLeftBorderDoubleOuterBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 3,
+                      bounds.top + borderTopWidth / 3,
+                      tlh - borderLeftWidth / 3,
+                      tlv - borderTopWidth / 3,
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3);
+        this.topRightBorderDoubleOuterBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + topWidth,
+                      bounds.top + borderTopWidth / 3,
+                      trh - borderRightWidth / 3,
+                      trv - borderTopWidth / 3,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + borderTopWidth / 3);
+        this.bottomRightBorderDoubleOuterBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh - borderRightWidth / 3,
+                      brv - borderBottomWidth / 3,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borderRightWidth / 3,
+                      bounds.top + bounds.height - borderBottomWidth / 3
+                  );
+        this.bottomLeftBorderDoubleOuterBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 3,
+                      bounds.top + leftHeight,
+                      blh - borderLeftWidth / 3,
+                      blv - borderBottomWidth / 3,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
+        this.topLeftBorderDoubleInnerBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + (borderLeftWidth * 2) / 3,
+                      bounds.top + (borderTopWidth * 2) / 3,
+                      tlh - (borderLeftWidth * 2) / 3,
+                      tlv - (borderTopWidth * 2) / 3,
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
+        this.topRightBorderDoubleInnerBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + topWidth,
+                      bounds.top + (borderTopWidth * 2) / 3,
+                      trh - (borderRightWidth * 2) / 3,
+                      trv - (borderTopWidth * 2) / 3,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - (borderRightWidth * 2) / 3,
+                      bounds.top + (borderTopWidth * 2) / 3
+                  );
+        this.bottomRightBorderDoubleInnerBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh - (borderRightWidth * 2) / 3,
+                      brv - (borderBottomWidth * 2) / 3,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - (borderRightWidth * 2) / 3,
+                      bounds.top + bounds.height - (borderBottomWidth * 2) / 3
+                  );
+        this.bottomLeftBorderDoubleInnerBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + (borderLeftWidth * 2) / 3,
+                      bounds.top + leftHeight,
+                      blh - (borderLeftWidth * 2) / 3,
+                      blv - (borderBottomWidth * 2) / 3,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(
+                      bounds.left + (borderLeftWidth * 2) / 3,
+                      bounds.top + bounds.height - (borderBottomWidth * 2) / 3
+                  );
+        this.topLeftBorderStroke =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 2,
+                      bounds.top + borderTopWidth / 2,
+                      tlh - borderLeftWidth / 2,
+                      tlv - borderTopWidth / 2,
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2);
+        this.topRightBorderStroke =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + topWidth,
+                      bounds.top + borderTopWidth / 2,
+                      trh - borderRightWidth / 2,
+                      trv - borderTopWidth / 2,
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + borderTopWidth / 2);
+        this.bottomRightBorderStroke =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + bottomWidth,
+                      bounds.top + rightHeight,
+                      brh - borderRightWidth / 2,
+                      brv - borderBottomWidth / 2,
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borderRightWidth / 2,
+                      bounds.top + bounds.height - borderBottomWidth / 2
+                  );
+        this.bottomLeftBorderStroke =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth / 2,
+                      bounds.top + leftHeight,
+                      blh - borderLeftWidth / 2,
+                      blv - borderBottomWidth / 2,
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
+        this.topLeftBorderBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
+                : new Vector(bounds.left, bounds.top);
+        this.topRightBorderBox =
+            trh > 0 || trv > 0
+                ? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT)
+                : new Vector(bounds.left + bounds.width, bounds.top);
+        this.bottomRightBorderBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh, brv, CORNER.BOTTOM_RIGHT)
+                : new Vector(bounds.left + bounds.width, bounds.top + bounds.height);
+        this.bottomLeftBorderBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left, bounds.top + leftHeight, blh, blv, CORNER.BOTTOM_LEFT)
+                : new Vector(bounds.left, bounds.top + bounds.height);
+        this.topLeftPaddingBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth,
+                      bounds.top + borderTopWidth,
+                      Math.max(0, tlh - borderLeftWidth),
+                      Math.max(0, tlv - borderTopWidth),
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth);
+        this.topRightPaddingBox =
+            trh > 0 || trv > 0
+                ? getCurvePoints(
+                      bounds.left + Math.min(topWidth, bounds.width - borderRightWidth),
+                      bounds.top + borderTopWidth,
+                      topWidth > bounds.width + borderRightWidth ? 0 : Math.max(0, trh - borderRightWidth),
+                      Math.max(0, trv - borderTopWidth),
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth);
+        this.bottomRightPaddingBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth),
+                      bounds.top + Math.min(rightHeight, bounds.height - borderBottomWidth),
+                      Math.max(0, brh - borderRightWidth),
+                      Math.max(0, brv - borderBottomWidth),
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - borderRightWidth,
+                      bounds.top + bounds.height - borderBottomWidth
+                  );
+        this.bottomLeftPaddingBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth,
+                      bounds.top + Math.min(leftHeight, bounds.height - borderBottomWidth),
+                      Math.max(0, blh - borderLeftWidth),
+                      Math.max(0, blv - borderBottomWidth),
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);
+        this.topLeftContentBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth + paddingLeft,
+                      bounds.top + borderTopWidth + paddingTop,
+                      Math.max(0, tlh - (borderLeftWidth + paddingLeft)),
+                      Math.max(0, tlv - (borderTopWidth + paddingTop)),
+                      CORNER.TOP_LEFT
+                  )
+                : new Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop);
+        this.topRightContentBox =
+            trh > 0 || trv > 0
+                ? getCurvePoints(
+                      bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth + paddingLeft),
+                      bounds.top + borderTopWidth + paddingTop,
+                      topWidth > bounds.width + borderLeftWidth + paddingLeft ? 0 : trh - borderLeftWidth + paddingLeft,
+                      trv - (borderTopWidth + paddingTop),
+                      CORNER.TOP_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - (borderRightWidth + paddingRight),
+                      bounds.top + borderTopWidth + paddingTop
+                  );
+        this.bottomRightContentBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(
+                      bounds.left + Math.min(bottomWidth, bounds.width - (borderLeftWidth + paddingLeft)),
+                      bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth + paddingTop),
+                      Math.max(0, brh - (borderRightWidth + paddingRight)),
+                      brv - (borderBottomWidth + paddingBottom),
+                      CORNER.BOTTOM_RIGHT
+                  )
+                : new Vector(
+                      bounds.left + bounds.width - (borderRightWidth + paddingRight),
+                      bounds.top + bounds.height - (borderBottomWidth + paddingBottom)
+                  );
+        this.bottomLeftContentBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(
+                      bounds.left + borderLeftWidth + paddingLeft,
+                      bounds.top + leftHeight,
+                      Math.max(0, blh - (borderLeftWidth + paddingLeft)),
+                      blv - (borderBottomWidth + paddingBottom),
+                      CORNER.BOTTOM_LEFT
+                  )
+                : new Vector(
+                      bounds.left + borderLeftWidth + paddingLeft,
+                      bounds.top + bounds.height - (borderBottomWidth + paddingBottom)
+                  );
+    }
+}
+
+enum CORNER {
+    TOP_LEFT = 0,
+    TOP_RIGHT = 1,
+    BOTTOM_RIGHT = 2,
+    BOTTOM_LEFT = 3
+}
+
+const getCurvePoints = (x: number, y: number, r1: number, r2: number, position: CORNER): BezierCurve => {
+    const kappa = 4 * ((Math.sqrt(2) - 1) / 3);
+    const ox = r1 * kappa; // control point offset horizontal
+    const oy = r2 * kappa; // control point offset vertical
+    const xm = x + r1; // x-middle
+    const ym = y + r2; // y-middle
+
+    switch (position) {
+        case CORNER.TOP_LEFT:
+            return new BezierCurve(
+                new Vector(x, ym),
+                new Vector(x, ym - oy),
+                new Vector(xm - ox, y),
+                new Vector(xm, y)
+            );
+        case CORNER.TOP_RIGHT:
+            return new BezierCurve(
+                new Vector(x, y),
+                new Vector(x + ox, y),
+                new Vector(xm, ym - oy),
+                new Vector(xm, ym)
+            );
+        case CORNER.BOTTOM_RIGHT:
+            return new BezierCurve(
+                new Vector(xm, y),
+                new Vector(xm, y + oy),
+                new Vector(x + ox, ym),
+                new Vector(x, ym)
+            );
+        case CORNER.BOTTOM_LEFT:
+        default:
+            return new BezierCurve(
+                new Vector(xm, ym),
+                new Vector(xm - ox, ym),
+                new Vector(x, y + oy),
+                new Vector(x, y)
+            );
+    }
+};
+
+export const calculateBorderBoxPath = (curves: BoundCurves): Path[] => {
+    return [curves.topLeftBorderBox, curves.topRightBorderBox, curves.bottomRightBorderBox, curves.bottomLeftBorderBox];
+};
+
+export const calculateContentBoxPath = (curves: BoundCurves): Path[] => {
+    return [
+        curves.topLeftContentBox,
+        curves.topRightContentBox,
+        curves.bottomRightContentBox,
+        curves.bottomLeftContentBox
+    ];
+};
+
+export const calculatePaddingBoxPath = (curves: BoundCurves): Path[] => {
+    return [
+        curves.topLeftPaddingBox,
+        curves.topRightPaddingBox,
+        curves.bottomRightPaddingBox,
+        curves.bottomLeftPaddingBox
+    ];
+};

package/src/render/box-sizing.ts

@@ -0,0 +1,31 @@
+import { getAbsoluteValue } from '../css/types/length-percentage';
+import { Bounds } from '../css/layout/bounds';
+import { ElementContainer } from '../dom/element-container';
+
+export const paddingBox = (element: ElementContainer): Bounds => {
+    const bounds = element.bounds;
+    const styles = element.styles;
+    return bounds.add(
+        styles.borderLeftWidth,
+        styles.borderTopWidth,
+        -(styles.borderRightWidth + styles.borderLeftWidth),
+        -(styles.borderTopWidth + styles.borderBottomWidth)
+    );
+};
+
+export const contentBox = (element: ElementContainer): Bounds => {
+    const styles = element.styles;
+    const bounds = element.bounds;
+
+    const paddingLeft = getAbsoluteValue(styles.paddingLeft, bounds.width);
+    const paddingRight = getAbsoluteValue(styles.paddingRight, bounds.width);
+    const paddingTop = getAbsoluteValue(styles.paddingTop, bounds.width);
+    const paddingBottom = getAbsoluteValue(styles.paddingBottom, bounds.width);
+
+    return bounds.add(
+        paddingLeft + styles.borderLeftWidth,
+        paddingTop + styles.borderTopWidth,
+        -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight),
+        -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom)
+    );
+};

package/{dist/lib/render/canvas/__tests__/background-renderer.test.js → src/render/canvas/__tests__/background-renderer.test.ts}

@@ -1,18 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const assert_1 = require("assert");
-const background_renderer_1 = require("../background-renderer");
-const context_1 = require("../../../core/context");
-const bounds_1 = require("../../../css/layout/bounds");
-const config_1 = require("../../../config");
+import { ok } from 'assert';
+import { BackgroundRenderer, BackgroundRendererDependencies } from '../background-renderer';
+import { Context } from '../../../core/context';
+import { Bounds } from '../../../css/layout/bounds';
+import { Html2CanvasConfig } from '../../../config';
+
 describe('BackgroundRenderer', () => {
     it('should be instantiated', () => {
         const mockWindow = {
             document: {
-                createElement: (_name) => {
+                createElement: (_name: string) => {
                     let _href = '';
                     return {
-                        set href(value) {
+                        set href(value: string) {
                             _href = value;
                         },
                         get href() {
@@ -31,24 +30,32 @@ describe('BackgroundRenderer', () => {
                 }
             },
             location: { href: 'http://localhost/' }
-        };
-        const config = new config_1.Html2CanvasConfig({ window: mockWindow });
-        const context = new context_1.Context({
-            logging: false,
-            imageTimeout: 15000,
-            useCORS: false,
-            allowTaint: false
-        }, new bounds_1.Bounds(0, 0, 800, 600), config);
+        } as unknown as Window;
+
+        const config = new Html2CanvasConfig({ window: mockWindow });
+        const context = new Context(
+            {
+                logging: false,
+                imageTimeout: 15000,
+                useCORS: false,
+                allowTaint: false
+            },
+            new Bounds(0, 0, 800, 600),
+            config
+        );
+
         const canvas = {
             width: 800,
             height: 600
-        };
+        } as unknown as HTMLCanvasElement;
+
         const ctx = {
             fillStyle: '',
-            save: () => { },
-            restore: () => { }
-        };
-        const deps = {
+            save: () => {},
+            restore: () => {}
+        } as unknown as CanvasRenderingContext2D;
+
+        const deps: BackgroundRendererDependencies = {
             ctx,
             context,
             canvas,
@@ -58,8 +65,8 @@ describe('BackgroundRenderer', () => {
                 scale: 1
             }
         };
-        const renderer = new background_renderer_1.BackgroundRenderer(deps);
-        (0, assert_1.ok)(renderer);
+
+        const renderer = new BackgroundRenderer(deps);
+        ok(renderer);
     });
 });
-//# sourceMappingURL=background-renderer.test.js.map

package/src/render/canvas/__tests__/border-renderer.test.ts

@@ -0,0 +1,24 @@
+import { ok } from 'assert';
+import { BorderRenderer, BorderRendererDependencies, PathCallbacks } from '../border-renderer';
+
+describe('BorderRenderer', () => {
+    it('should be instantiated', () => {
+        const ctx = {
+            strokeStyle: '',
+            save: () => {},
+            restore: () => {}
+        } as unknown as CanvasRenderingContext2D;
+
+        const deps: BorderRendererDependencies = {
+            ctx
+        };
+
+        const pathCallbacks: PathCallbacks = {
+            path: () => {},
+            formatPath: () => {}
+        };
+
+        const renderer = new BorderRenderer(deps, pathCallbacks);
+        ok(renderer);
+    });
+});

package/src/render/canvas/__tests__/effects-renderer.test.ts

@@ -0,0 +1,32 @@
+import { ok, strictEqual } from 'assert';
+import { EffectsRenderer, EffectsRendererDependencies, EffectsPathCallback } from '../effects-renderer';
+
+describe('EffectsRenderer', () => {
+    it('should be instantiated', () => {
+        const ctx = {
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 0,
+            shadowColor: '',
+            globalAlpha: 1,
+            save: () => {},
+            restore: () => {}
+        } as unknown as CanvasRenderingContext2D;
+
+        const deps: EffectsRendererDependencies = {
+            ctx
+        };
+
+        const pathCallback: EffectsPathCallback = {
+            path: () => {}
+        };
+
+        const renderer = new EffectsRenderer(deps, pathCallback);
+        ok(renderer);
+
+        // Test public methods exist
+        strictEqual(typeof renderer.applyEffects, 'function');
+        strictEqual(typeof renderer.applyEffect, 'function');
+        strictEqual(typeof renderer.popEffect, 'function');
+    });
+});