html2canvas - npm Package Compare versions

Comparing version 1.0.0-rc.7 to 1.0.0

CHANGELOG.md

@@ -5,2 +5,23 @@ # Changelog
 
+# [1.0.0](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.7...v1.0.0) (2021-07-04)
+
+
+### ci
+
+* update docs publish action (#2451) ([7222aba](https://github.com/niklasvh/html2canvas/commit/7222aba1b42138c3d466525172411b3d9869095f)), closes [#2451](https://github.com/niklasvh/html2canvas/issues/2451)
+
+### deps
+
+* update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
+
+### fix
+
+* opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
+
+### test
+
+* update karma runner (#2524) ([ff35c7d](https://github.com/niklasvh/html2canvas/commit/ff35c7dbd33f863f5b614d778baf8cb1e8dded60)), closes [#2524](https://github.com/niklasvh/html2canvas/issues/2524)
+
+
+
 # [1.0.0-rc.7](https://github.com/niklasvh/html2canvas/compare/v1.0.0-rc.6...v1.0.0-rc.7) (2020-08-09)
@@ -7,0 +28,0 @@

dist/lib/css/property-descriptors/border-style.js

@@ -8,2 +8,5 @@ "use strict";
     BORDER_STYLE[BORDER_STYLE["SOLID"] = 1] = "SOLID";
+    BORDER_STYLE[BORDER_STYLE["DASHED"] = 2] = "DASHED";
+    BORDER_STYLE[BORDER_STYLE["DOTTED"] = 3] = "DOTTED";
+    BORDER_STYLE[BORDER_STYLE["DOUBLE"] = 4] = "DOUBLE";
 })(BORDER_STYLE = exports.BORDER_STYLE || (exports.BORDER_STYLE = {}));
@@ -19,2 +22,8 @@ var borderStyleForSide = function (side) { return ({
                 return BORDER_STYLE.NONE;
+            case 'dashed':
+                return BORDER_STYLE.DASHED;
+            case 'dotted':
+                return BORDER_STYLE.DOTTED;
+            case 'double':
+                return BORDER_STYLE.DOUBLE;
         }
@@ -21,0 +30,0 @@ return BORDER_STYLE.SOLID;

dist/lib/css/property-descriptors/display.js

@@ -19,2 +19,3 @@ "use strict";
         case 'block':
+        case '-webkit-box':
             return 2 /* BLOCK */;
@@ -21,0 +22,0 @@ case 'inline':

dist/lib/render/border.js

@@ -17,2 +17,57 @@ "use strict";
 };
+exports.parsePathForBorderDoubleOuter = function (curves, borderSide) {
+    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);
+    }
+};
+exports.parsePathForBorderDoubleInner = function (curves, borderSide) {
+    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);
+    }
+};
+exports.parsePathForBorderStroke = function (curves, borderSide) {
+    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);
+    }
+};
+var createStrokePathFromCurves = function (outer1, outer2) {
+    var path = [];
+    if (bezier_curve_1.isBezierCurve(outer1)) {
+        path.push(outer1.subdivide(0.5, false));
+    }
+    else {
+        path.push(outer1);
+    }
+    if (bezier_curve_1.isBezierCurve(outer2)) {
+        path.push(outer2.subdivide(0.5, true));
+    }
+    else {
+        path.push(outer2);
+    }
+    return path;
+};
 var createPathFromCurves = function (outer1, inner1, outer2, inner2) {
@@ -19,0 +74,0 @@ var path = [];

dist/lib/render/bound-curves.js

@@ -42,2 +42,50 @@ "use strict";
         var paddingLeft = length_percentage_1.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_1.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_1.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_1.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_1.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_1.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_1.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_1.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_1.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_1.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_1.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_1.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_1.Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
         this.topLeftBorderBox =
@@ -65,11 +113,11 @@ tlh > 0 || tlv > 0
             trh > 0 || trv > 0
-                ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth), bounds.top + borderTopWidth, topWidth > bounds.width + borderLeftWidth ? 0 : trh - borderLeftWidth, trv - borderTopWidth, CORNER.TOP_RIGHT)
+                ? 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_1.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 + borderTopWidth), Math.max(0, brh - borderRightWidth), brv - borderBottomWidth, CORNER.BOTTOM_RIGHT)
+                ? 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_1.Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + bounds.height - borderBottomWidth);
         this.bottomLeftPaddingBox =
             blh > 0 || blv > 0
-                ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + leftHeight, Math.max(0, blh - borderLeftWidth), blv - borderBottomWidth, CORNER.BOTTOM_LEFT)
+                ? 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_1.Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);
@@ -76,0 +124,0 @@ this.topLeftContentBox =

dist/lib/render/canvas/canvas-renderer.js

@@ -99,2 +99,5 @@ "use strict";
         this.ctx.save();
+        if (effects_1.isOpacityEffect(effect)) {
+            this.ctx.globalAlpha = effect.opacity;
+        }
         if (effects_1.isTransformEffect(effect)) {
@@ -123,3 +126,2 @@ this.ctx.translate(effect.offsetX, effect.offsetY);
                         if (!styles.isVisible()) return [3 /*break*/, 2];
-                        this.ctx.globalAlpha = styles.opacity;
                         return [4 /*yield*/, this.renderStackContent(stack)];
@@ -692,3 +694,3 @@ case 1:
     };
-    CanvasRenderer.prototype.renderBorder = function (color, side, curvePoints) {
+    CanvasRenderer.prototype.renderSolidBorder = function (color, side, curvePoints) {
         return __awaiter(this, void 0, void 0, function () {
@@ -703,2 +705,26 @@ return __generator(this, function (_a) {
     };
+    CanvasRenderer.prototype.renderDoubleBorder = function (color, width, side, curvePoints) {
+        return __awaiter(this, void 0, void 0, function () {
+            var outerPaths, innerPaths;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(width < 3)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.renderSolidBorder(color, side, curvePoints)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                    case 2:
+                        outerPaths = border_1.parsePathForBorderDoubleOuter(curvePoints, side);
+                        this.path(outerPaths);
+                        this.ctx.fillStyle = color_1.asString(color);
+                        this.ctx.fill();
+                        innerPaths = border_1.parsePathForBorderDoubleInner(curvePoints, side);
+                        this.path(innerPaths);
+                        this.ctx.fill();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
@@ -715,6 +741,6 @@ return __awaiter(this, void 0, void 0, function () {
                         borders = [
-                            { style: styles.borderTopStyle, color: styles.borderTopColor },
-                            { style: styles.borderRightStyle, color: styles.borderRightColor },
-                            { style: styles.borderBottomStyle, color: styles.borderBottomColor },
-                            { style: styles.borderLeftStyle, color: styles.borderLeftColor }
+                            { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
+                            { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
+                            { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
+                            { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
                         ];
@@ -766,16 +792,33 @@ backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(background_1.getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves);
                     case 3:
-                        if (!(_i < borders_1.length)) return [3 /*break*/, 7];
+                        if (!(_i < borders_1.length)) return [3 /*break*/, 13];
                         border = borders_1[_i];
-                        if (!(border.style !== border_style_1.BORDER_STYLE.NONE && !color_1.isTransparent(border.color))) return [3 /*break*/, 5];
-                        return [4 /*yield*/, this.renderBorder(border.color, side, paint.curves)];
+                        if (!(border.style !== border_style_1.BORDER_STYLE.NONE && !color_1.isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
+                        if (!(border.style === border_style_1.BORDER_STYLE.DASHED)) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, border_style_1.BORDER_STYLE.DASHED)];
                     case 4:
                         _a.sent();
-                        _a.label = 5;
+                        return [3 /*break*/, 11];
                     case 5:
+                        if (!(border.style === border_style_1.BORDER_STYLE.DOTTED)) return [3 /*break*/, 7];
+                        return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, border_style_1.BORDER_STYLE.DOTTED)];
+                    case 6:
+                        _a.sent();
+                        return [3 /*break*/, 11];
+                    case 7:
+                        if (!(border.style === border_style_1.BORDER_STYLE.DOUBLE)) return [3 /*break*/, 9];
+                        return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)];
+                    case 8:
+                        _a.sent();
+                        return [3 /*break*/, 11];
+                    case 9: return [4 /*yield*/, this.renderSolidBorder(border.color, side, paint.curves)];
+                    case 10:
+                        _a.sent();
+                        _a.label = 11;
+                    case 11:
                         side++;
-                        _a.label = 6;
-                    case 6:
+                        _a.label = 12;
+                    case 12:
                         _i++;
                         return [3 /*break*/, 3];
-                    case 7: return [2 /*return*/];
+                    case 13: return [2 /*return*/];
                 }
@@ -785,2 +828,106 @@ });
     };
+    CanvasRenderer.prototype.renderDashedDottedBorder = function (color, width, side, curvePoints, style) {
+        return __awaiter(this, void 0, void 0, function () {
+            var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, path1, path2;
+            return __generator(this, function (_a) {
+                this.ctx.save();
+                strokePaths = border_1.parsePathForBorderStroke(curvePoints, side);
+                boxPaths = border_1.parsePathForBorder(curvePoints, side);
+                if (style === border_style_1.BORDER_STYLE.DASHED) {
+                    this.path(boxPaths);
+                    this.ctx.clip();
+                }
+                if (bezier_curve_1.isBezierCurve(boxPaths[0])) {
+                    startX = boxPaths[0].start.x;
+                    startY = boxPaths[0].start.y;
+                }
+                else {
+                    startX = boxPaths[0].x;
+                    startY = boxPaths[0].y;
+                }
+                if (bezier_curve_1.isBezierCurve(boxPaths[1])) {
+                    endX = boxPaths[1].end.x;
+                    endY = boxPaths[1].end.y;
+                }
+                else {
+                    endX = boxPaths[1].x;
+                    endY = boxPaths[1].y;
+                }
+                if (side === 0 || side === 2) {
+                    length = Math.abs(startX - endX);
+                }
+                else {
+                    length = Math.abs(startY - endY);
+                }
+                this.ctx.beginPath();
+                if (style === border_style_1.BORDER_STYLE.DOTTED) {
+                    this.formatPath(strokePaths);
+                }
+                else {
+                    this.formatPath(boxPaths.slice(0, 2));
+                }
+                dashLength = width < 3 ? width * 3 : width * 2;
+                spaceLength = width < 3 ? width * 2 : width;
+                if (style === border_style_1.BORDER_STYLE.DOTTED) {
+                    dashLength = width;
+                    spaceLength = width;
+                }
+                useLineDash = true;
+                if (length <= dashLength * 2) {
+                    useLineDash = false;
+                }
+                else if (length <= dashLength * 2 + spaceLength) {
+                    multiplier = length / (2 * dashLength + spaceLength);
+                    dashLength *= multiplier;
+                    spaceLength *= multiplier;
+                }
+                else {
+                    numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
+                    minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
+                    maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
+                    spaceLength =
+                        maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
+                            ? minSpace
+                            : maxSpace;
+                }
+                if (useLineDash) {
+                    if (style === border_style_1.BORDER_STYLE.DOTTED) {
+                        this.ctx.setLineDash([0, dashLength + spaceLength]);
+                    }
+                    else {
+                        this.ctx.setLineDash([dashLength, spaceLength]);
+                    }
+                }
+                if (style === border_style_1.BORDER_STYLE.DOTTED) {
+                    this.ctx.lineCap = 'round';
+                    this.ctx.lineWidth = width;
+                }
+                else {
+                    this.ctx.lineWidth = width * 2 + 1.1;
+                }
+                this.ctx.strokeStyle = color_1.asString(color);
+                this.ctx.stroke();
+                this.ctx.setLineDash([]);
+                // dashed round edge gap
+                if (style === border_style_1.BORDER_STYLE.DASHED) {
+                    if (bezier_curve_1.isBezierCurve(boxPaths[0])) {
+                        path1 = boxPaths[3];
+                        path2 = boxPaths[0];
+                        this.ctx.beginPath();
+                        this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
+                        this.ctx.stroke();
+                    }
+                    if (bezier_curve_1.isBezierCurve(boxPaths[1])) {
+                        path1 = boxPaths[1];
+                        path2 = boxPaths[2];
+                        this.ctx.beginPath();
+                        this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
+                        this.ctx.stroke();
+                    }
+                }
+                this.ctx.restore();
+                return [2 /*return*/];
+            });
+        });
+    };
     CanvasRenderer.prototype.render = function (element) {
@@ -787,0 +934,0 @@ return __awaiter(this, void 0, void 0, function () {

dist/lib/render/effects.js

@@ -6,6 +6,6 @@ "use strict";
         this.type = 0 /* TRANSFORM */;
+        this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
         this.offsetX = offsetX;
         this.offsetY = offsetY;
         this.matrix = matrix;
-        this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
     }
@@ -24,2 +24,11 @@ return TransformEffect;
 exports.ClipEffect = ClipEffect;
+var OpacityEffect = /** @class */ (function () {
+    function OpacityEffect(opacity) {
+        this.type = 2 /* OPACITY */;
+        this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
+        this.opacity = opacity;
+    }
+    return OpacityEffect;
+}());
+exports.OpacityEffect = OpacityEffect;
 exports.isTransformEffect = function (effect) {
@@ -29,2 +38,3 @@ return effect.type === 0 /* TRANSFORM */;
 exports.isClipEffect = function (effect) { return effect.type === 1 /* CLIP */; };
+exports.isOpacityEffect = function (effect) { return effect.type === 2 /* OPACITY */; };
 //# sourceMappingURL=effects.js.map

dist/lib/render/stacking-context.js

@@ -30,2 +30,5 @@ "use strict";
         this.curves = new bound_curves_1.BoundCurves(element);
+        if (element.styles.opacity < 1) {
+            this.effects.push(new effects_1.OpacityEffect(element.styles.opacity));
+        }
         if (element.styles.transform !== null) {
@@ -32,0 +35,0 @@ var offsetX = element.bounds.left + element.styles.transformOrigin[0].number;

dist/types/css/property-descriptors/border-style.d.ts

 import { IPropertyIdentValueDescriptor } from '../IPropertyDescriptor';
 export declare enum BORDER_STYLE {
     NONE = 0,
-    SOLID = 1
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
 }
@@ -6,0 +9,0 @@ export declare const borderTopStyle: IPropertyIdentValueDescriptor<BORDER_STYLE>;

dist/types/render/border.d.ts

 import { Path } from './path';
 import { BoundCurves } from './bound-curves';
 export declare const parsePathForBorder: (curves: BoundCurves, borderSide: number) => Path[];
+export declare const parsePathForBorderDoubleOuter: (curves: BoundCurves, borderSide: number) => Path[];
+export declare const parsePathForBorderDoubleInner: (curves: BoundCurves, borderSide: number) => Path[];
+export declare const parsePathForBorderStroke: (curves: BoundCurves, borderSide: number) => Path[];

dist/types/render/bound-curves.d.ts

 import { ElementContainer } from '../dom/element-container';
 import { Path } from './path';
 export declare 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;
@@ -5,0 +17,0 @@ readonly topRightBorderBox: Path;

dist/types/render/canvas/canvas-renderer.d.ts

 import { ElementPaint, StackingContext } from '../stacking-context';
 import { Color } from '../../css/types/color';
 import { ElementContainer } from '../../dom/element-container';
+import { BORDER_STYLE } from '../../css/property-descriptors/border-style';
 import { CSSParsedDeclaration } from '../../css/index';
@@ -53,5 +54,7 @@ import { TextContainer } from '../../dom/text-container';
     renderBackgroundImage(container: ElementContainer): Promise<void>;
-    renderBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void>;
+    renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void>;
+    renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves): Promise<void>;
     renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void>;
+    renderDashedDottedBorder(color: Color, width: number, side: number, curvePoints: BoundCurves, style: BORDER_STYLE): Promise<void>;
     render(element: ElementContainer): Promise<HTMLCanvasElement>;
 }

dist/types/render/effects.d.ts

@@ -5,3 +5,4 @@ import { Matrix } from '../css/property-descriptors/transform';
     TRANSFORM = 0,
-    CLIP = 1
+    CLIP = 1,
+    OPACITY = 2
 }
@@ -30,3 +31,10 @@ export declare const enum EffectTarget {
 }
+export declare class OpacityEffect implements IElementEffect {
+    readonly type: EffectType;
+    readonly target: number;
+    readonly opacity: number;
+    constructor(opacity: number);
+}
 export declare const isTransformEffect: (effect: IElementEffect) => effect is TransformEffect;
 export declare const isClipEffect: (effect: IElementEffect) => effect is ClipEffect;
+export declare const isOpacityEffect: (effect: IElementEffect) => effect is OpacityEffect;

dist/types/src/css/property-descriptors/border-style.d.ts

 import { IPropertyIdentValueDescriptor } from '../IPropertyDescriptor';
 export declare enum BORDER_STYLE {
     NONE = 0,
-    SOLID = 1
+    SOLID = 1,
+    DASHED = 2,
+    DOTTED = 3,
+    DOUBLE = 4
 }
@@ -6,0 +9,0 @@ export declare const borderTopStyle: IPropertyIdentValueDescriptor<BORDER_STYLE>;

dist/types/src/render/border.d.ts

 import { Path } from './path';
 import { BoundCurves } from './bound-curves';
 export declare const parsePathForBorder: (curves: BoundCurves, borderSide: number) => Path[];
+export declare const parsePathForBorderDoubleOuter: (curves: BoundCurves, borderSide: number) => Path[];
+export declare const parsePathForBorderDoubleInner: (curves: BoundCurves, borderSide: number) => Path[];
+export declare const parsePathForBorderStroke: (curves: BoundCurves, borderSide: number) => Path[];

dist/types/src/render/bound-curves.d.ts

 import { ElementContainer } from '../dom/element-container';
 import { Path } from './path';
 export declare 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;
@@ -5,0 +17,0 @@ readonly topRightBorderBox: Path;

dist/types/src/render/canvas/canvas-renderer.d.ts

 import { ElementPaint, StackingContext } from '../stacking-context';
 import { Color } from '../../css/types/color';
 import { ElementContainer } from '../../dom/element-container';
+import { BORDER_STYLE } from '../../css/property-descriptors/border-style';
 import { CSSParsedDeclaration } from '../../css/index';
@@ -53,5 +54,7 @@ import { TextContainer } from '../../dom/text-container';
     renderBackgroundImage(container: ElementContainer): Promise<void>;
-    renderBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void>;
+    renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void>;
+    renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves): Promise<void>;
     renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void>;
+    renderDashedDottedBorder(color: Color, width: number, side: number, curvePoints: BoundCurves, style: BORDER_STYLE): Promise<void>;
     render(element: ElementContainer): Promise<HTMLCanvasElement>;
 }

dist/types/src/render/effects.d.ts

@@ -5,3 +5,4 @@ import { Matrix } from '../css/property-descriptors/transform';
     TRANSFORM = 0,
-    CLIP = 1
+    CLIP = 1,
+    OPACITY = 2
 }
@@ -30,3 +31,10 @@ export declare const enum EffectTarget {
 }
+export declare class OpacityEffect implements IElementEffect {
+    readonly type: EffectType;
+    readonly target: number;
+    readonly opacity: number;
+    constructor(opacity: number);
+}
 export declare const isTransformEffect: (effect: IElementEffect) => effect is TransformEffect;
 export declare const isClipEffect: (effect: IElementEffect) => effect is ClipEffect;
+export declare const isOpacityEffect: (effect: IElementEffect) => effect is OpacityEffect;

package.json

@@ -9,3 +9,3 @@ {
   "browser": "dist/html2canvas.js",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0",
   "author": {
@@ -32,4 +32,6 @@ "name": "Niklas von Hertzen",
     "@types/chai": "^4.1.7",
+    "@types/express": "^4.17.11",
     "@types/glob": "^7.1.1",
     "@types/jest": "^24.0.18",
+    "@types/karma": "^6.3.0",
     "@types/mocha": "^5.2.6",
@@ -55,3 +57,3 @@ "@types/node": "^11.13.2",
     "eslint-plugin-prettier": "3.0.1",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "filenamify-url": "1.0.0",
@@ -63,9 +65,9 @@ "glob": "7.1.3",
     "js-polyfills": "^0.1.42",
-    "karma": "^4.0.1",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma": "^6.3.2",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-edge-launcher": "^0.4.2",
-    "karma-firefox-launcher": "^1.1.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-ie-launcher": "^1.0.0",
-    "karma-junit-reporter": "^1.2.0",
-    "karma-mocha": "^1.3.0",
+    "karma-junit-reporter": "^2.0.1",
+    "karma-mocha": "^2.0.1",
     "karma-safarinative-launcher": "^1.1.0",
@@ -95,3 +97,4 @@ "karma-sauce-launcher": "^2.0.2",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "yargs": "^17.0.1"
   },
@@ -111,6 +114,6 @@ "scripts": {
     "unittest": "jest",
-    "karma": "node karma",
+    "karma": "ts-node tests/karma",
     "watch": "rollup -c rollup.config.ts -w",
     "watch:unittest": "mocha --require ts-node/register --watch-extensions ts -w src/**/__tests__/*.ts",
-    "start": "node tests/server"
+    "start": "ts-node tests/server --port=8080 --cors=8081"
   },
@@ -117,0 +120,0 @@ "homepage": "https://html2canvas.hertzen.com",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3093767

increased by4.43%

Lines of code

26039

increased by3.48%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

69

increased by4.55%

No dependency changes