mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

adjusted gitignore

Browse Source
This commit is contained in:
nedim hadzialic
2021-04-30 18:04:35 +02:00
parent ec11729b98
commit 6f439311b2
476 changed files with 27953 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
dist/lib/render/background.js vendored Normal file
View File

@@ -0,0 +1,178 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var background_size_1 = require("../css/property-descriptors/background-size");
var vector_1 = require("./vector");
var background_repeat_1 = require("../css/property-descriptors/background-repeat");
var length_percentage_1 = require("../css/types/length-percentage");
var parser_1 = require("../css/syntax/parser");
var box_sizing_1 = require("./box-sizing");
var background_clip_1 = require("../css/property-descriptors/background-clip");
exports.calculateBackgroundPositioningArea = function (backgroundOrigin, element) {
if (backgroundOrigin === 0 /* BORDER_BOX */) {
return element.bounds;
}
if (backgroundOrigin === 2 /* CONTENT_BOX */) {
return box_sizing_1.contentBox(element);
}
return box_sizing_1.paddingBox(element);
};
exports.calculateBackgroundPaintingArea = function (backgroundClip, element) {
if (backgroundClip === background_clip_1.BACKGROUND_CLIP.BORDER_BOX) {
return element.bounds;
}
if (backgroundClip === background_clip_1.BACKGROUND_CLIP.CONTENT_BOX) {
return box_sizing_1.contentBox(element);
}
return box_sizing_1.paddingBox(element);
};
exports.calculateBackgroundRendering = function (container, index, intrinsicSize) {
var backgroundPositioningArea = exports.calculateBackgroundPositioningArea(exports.getBackgroundValueForIndex(container.styles.backgroundOrigin, index), container);
var backgroundPaintingArea = exports.calculateBackgroundPaintingArea(exports.getBackgroundValueForIndex(container.styles.backgroundClip, index), container);
var backgroundImageSize = exports.calculateBackgroundSize(exports.getBackgroundValueForIndex(container.styles.backgroundSize, index), intrinsicSize, backgroundPositioningArea);
var sizeWidth = backgroundImageSize[0], sizeHeight = backgroundImageSize[1];
var position = length_percentage_1.getAbsoluteValueForTuple(exports.getBackgroundValueForIndex(container.styles.backgroundPosition, index), backgroundPositioningArea.width - sizeWidth, backgroundPositioningArea.height - sizeHeight);
var path = exports.calculateBackgroundRepeatPath(exports.getBackgroundValueForIndex(container.styles.backgroundRepeat, index), position, backgroundImageSize, backgroundPositioningArea, backgroundPaintingArea);
var offsetX = Math.round(backgroundPositioningArea.left + position[0]);
var offsetY = Math.round(backgroundPositioningArea.top + position[1]);
return [path, offsetX, offsetY, sizeWidth, sizeHeight];
};
exports.isAuto = function (token) { return parser_1.isIdentToken(token) && token.value === background_size_1.BACKGROUND_SIZE.AUTO; };
var hasIntrinsicValue = function (value) { return typeof value === 'number'; };
exports.calculateBackgroundSize = function (size, _a, bounds) {
var intrinsicWidth = _a[0], intrinsicHeight = _a[1], intrinsicProportion = _a[2];
var first = size[0], second = size[1];
if (length_percentage_1.isLengthPercentage(first) && second && length_percentage_1.isLengthPercentage(second)) {
return [length_percentage_1.getAbsoluteValue(first, bounds.width), length_percentage_1.getAbsoluteValue(second, bounds.height)];
}
var hasIntrinsicProportion = hasIntrinsicValue(intrinsicProportion);
if (parser_1.isIdentToken(first) && (first.value === background_size_1.BACKGROUND_SIZE.CONTAIN || first.value === background_size_1.BACKGROUND_SIZE.COVER)) {
if (hasIntrinsicValue(intrinsicProportion)) {
var targetRatio = bounds.width / bounds.height;
return targetRatio < intrinsicProportion !== (first.value === background_size_1.BACKGROUND_SIZE.COVER)
? [bounds.width, bounds.width / intrinsicProportion]
: [bounds.height * intrinsicProportion, bounds.height];
}
return [bounds.width, bounds.height];
}
var hasIntrinsicWidth = hasIntrinsicValue(intrinsicWidth);
var hasIntrinsicHeight = hasIntrinsicValue(intrinsicHeight);
var hasIntrinsicDimensions = hasIntrinsicWidth || hasIntrinsicHeight;
// If the background-size is auto or auto auto:
if (exports.isAuto(first) && (!second || exports.isAuto(second))) {
// If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
if (hasIntrinsicWidth && hasIntrinsicHeight) {
return [intrinsicWidth, intrinsicHeight];
}
// 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) {
var width_1 = hasIntrinsicWidth
? intrinsicWidth
: intrinsicHeight * intrinsicProportion;
var height_1 = hasIntrinsicHeight
? intrinsicHeight
: intrinsicWidth / intrinsicProportion;
return [width_1, height_1];
}
// 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.
var width_2 = hasIntrinsicWidth ? intrinsicWidth : bounds.width;
var height_2 = hasIntrinsicHeight ? intrinsicHeight : bounds.height;
return [width_2, height_2];
}
// 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) {
var width_3 = 0;
var height_3 = 0;
if (length_percentage_1.isLengthPercentage(first)) {
width_3 = length_percentage_1.getAbsoluteValue(first, bounds.width);
}
else if (length_percentage_1.isLengthPercentage(second)) {
height_3 = length_percentage_1.getAbsoluteValue(second, bounds.height);
}
if (exports.isAuto(first)) {
width_3 = height_3 * intrinsicProportion;
}
else if (!second || exports.isAuto(second)) {
height_3 = width_3 / intrinsicProportion;
}
return [width_3, height_3];
}
// 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.
var width = null;
var height = null;
if (length_percentage_1.isLengthPercentage(first)) {
width = length_percentage_1.getAbsoluteValue(first, bounds.width);
}
else if (second && length_percentage_1.isLengthPercentage(second)) {
height = length_percentage_1.getAbsoluteValue(second, bounds.height);
}
if (width !== null && (!second || exports.isAuto(second))) {
height =
hasIntrinsicWidth && hasIntrinsicHeight
? (width / intrinsicWidth) * intrinsicHeight
: bounds.height;
}
if (height !== null && exports.isAuto(first)) {
width =
hasIntrinsicWidth && hasIntrinsicHeight
? (height / intrinsicHeight) * intrinsicWidth
: bounds.width;
}
if (width !== null && height !== null) {
return [width, height];
}
throw new Error("Unable to calculate background-size for element");
};
exports.getBackgroundValueForIndex = function (values, index) {
var value = values[index];
if (typeof value === 'undefined') {
return values[0];
}
return value;
};
exports.calculateBackgroundRepeatPath = function (repeat, _a, _b, backgroundPositioningArea, backgroundPaintingArea) {
var x = _a[0], y = _a[1];
var width = _b[0], height = _b[1];
switch (repeat) {
case background_repeat_1.BACKGROUND_REPEAT.REPEAT_X:
return [
new vector_1.Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(backgroundPositioningArea.top + y)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(height + backgroundPositioningArea.top + y)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left), Math.round(height + backgroundPositioningArea.top + y))
];
case background_repeat_1.BACKGROUND_REPEAT.REPEAT_Y:
return [
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top))
];
case background_repeat_1.BACKGROUND_REPEAT.NO_REPEAT:
return [
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y + height)),
new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y + height))
];
default:
return [
new vector_1.Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.top)),
new vector_1.Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.top)),
new vector_1.Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)),
new vector_1.Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top))
];
}
};
//# sourceMappingURL=background.js.map

1
dist/lib/render/background.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

35
dist/lib/render/bezier-curve.js vendored Normal file
View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vector_1 = require("./vector");
var path_1 = require("./path");
var lerp = function (a, b, t) {
return new vector_1.Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
};
var BezierCurve = /** @class */ (function () {
function BezierCurve(start, startControl, endControl, end) {
this.type = path_1.PathType.BEZIER_CURVE;
this.start = start;
this.startControl = startControl;
this.endControl = endControl;
this.end = end;
}
BezierCurve.prototype.subdivide = function (t, firstHalf) {
var ab = lerp(this.start, this.startControl, t);
var bc = lerp(this.startControl, this.endControl, t);
var cd = lerp(this.endControl, this.end, t);
var abbc = lerp(ab, bc, t);
var bccd = lerp(bc, cd, t);
var dest = lerp(abbc, bccd, t);
return firstHalf ? new BezierCurve(this.start, ab, abbc, dest) : new BezierCurve(dest, bccd, cd, this.end);
};
BezierCurve.prototype.add = function (deltaX, deltaY) {
return new BezierCurve(this.start.add(deltaX, deltaY), this.startControl.add(deltaX, deltaY), this.endControl.add(deltaX, deltaY), this.end.add(deltaX, deltaY));
};
BezierCurve.prototype.reverse = function () {
return new BezierCurve(this.end, this.endControl, this.startControl, this.start);
};
return BezierCurve;
}());
exports.BezierCurve = BezierCurve;
exports.isBezierCurve = function (path) { return path.type === path_1.PathType.BEZIER_CURVE; };
//# sourceMappingURL=bezier-curve.js.map

1
dist/lib/render/bezier-curve.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"bezier-curve.js","sourceRoot":"","sources":["../../../src/render/bezier-curve.ts"],"names":[],"mappings":";;AAAA,mCAAgC;AAChC,+BAA6C;AAE7C,IAAM,IAAI,GAAG,UAAC,CAAS,EAAE,CAAS,EAAE,CAAS;IACzC,OAAO,IAAI,eAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AACpE,CAAC,CAAC;AAEF;IAOI,qBAAY,KAAa,EAAE,YAAoB,EAAE,UAAkB,EAAE,GAAW;QAC5E,IAAI,CAAC,IAAI,GAAG,eAAQ,CAAC,YAAY,CAAC;QAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACnB,CAAC;IAED,+BAAS,GAAT,UAAU,CAAS,EAAE,SAAkB;QACnC,IAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAClD,IAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;QACvD,IAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC9C,IAAM,IAAI,GAAG,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAC7B,IAAM,IAAI,GAAG,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAC7B,IAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjC,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/G,CAAC;IAED,yBAAG,GAAH,UAAI,MAAc,EAAE,MAAc;QAC9B,OAAO,IAAI,WAAW,CAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACnC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAC/B,CAAC;IACN,CAAC;IAED,6BAAO,GAAP;QACI,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrF,CAAC;IACL,kBAAC;AAAD,CAAC,AArCD,IAqCC;AArCY,kCAAW;AAuCX,QAAA,aAAa,GAAG,UAAC,IAAU,IAA0B,OAAA,IAAI,CAAC,IAAI,KAAK,eAAQ,CAAC,YAAY,EAAnC,CAAmC,CAAC"}

45
dist/lib/render/border.js vendored Normal file
View File

@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var bezier_curve_1 = require("./bezier-curve");
exports.parsePathForBorder = function (curves, borderSide) {
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);
}
};
var createPathFromCurves = function (outer1, inner1, outer2, inner2) {
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);
}
if (bezier_curve_1.isBezierCurve(inner2)) {
path.push(inner2.subdivide(0.5, true).reverse());
}
else {
path.push(inner2);
}
if (bezier_curve_1.isBezierCurve(inner1)) {
path.push(inner1.subdivide(0.5, false).reverse());
}
else {
path.push(inner1);
}
return path;
};
//# sourceMappingURL=border.js.map

1
dist/lib/render/border.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../src/render/border.ts"],"names":[],"mappings":";;AAEA,+CAA6C;AAEhC,QAAA,kBAAkB,GAAG,UAAC,MAAmB,EAAE,UAAkB;IACtE,QAAQ,UAAU,EAAE;QAChB,KAAK,CAAC;YACF,OAAO,oBAAoB,CACvB,MAAM,CAAC,gBAAgB,EACvB,MAAM,CAAC,iBAAiB,EACxB,MAAM,CAAC,iBAAiB,EACxB,MAAM,CAAC,kBAAkB,CAC5B,CAAC;QACN,KAAK,CAAC;YACF,OAAO,oBAAoB,CACvB,MAAM,CAAC,iBAAiB,EACxB,MAAM,CAAC,kBAAkB,EACzB,MAAM,CAAC,oBAAoB,EAC3B,MAAM,CAAC,qBAAqB,CAC/B,CAAC;QACN,KAAK,CAAC;YACF,OAAO,oBAAoB,CACvB,MAAM,CAAC,oBAAoB,EAC3B,MAAM,CAAC,qBAAqB,EAC5B,MAAM,CAAC,mBAAmB,EAC1B,MAAM,CAAC,oBAAoB,CAC9B,CAAC;QACN,KAAK,CAAC,CAAC;QACP;YACI,OAAO,oBAAoB,CACvB,MAAM,CAAC,mBAAmB,EAC1B,MAAM,CAAC,oBAAoB,EAC3B,MAAM,CAAC,gBAAgB,EACvB,MAAM,CAAC,iBAAiB,CAC3B,CAAC;KACT;AACL,CAAC,CAAC;AAEF,IAAM,oBAAoB,GAAG,UAAC,MAAY,EAAE,MAAY,EAAE,MAAY,EAAE,MAAY;IAChF,IAAM,IAAI,GAAG,EAAE,CAAC;IAChB,IAAI,4BAAa,CAAC,MAAM,CAAC,EAAE;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;KAC3C;SAAM;QACH,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrB;IAED,IAAI,4BAAa,CAAC,MAAM,CAAC,EAAE;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;KAC1C;SAAM;QACH,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrB;IAED,IAAI,4BAAa,CAAC,MAAM,CAAC,EAAE;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;KACpD;SAAM;QACH,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrB;IAED,IAAI,4BAAa,CAAC,MAAM,CAAC,EAAE;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;KACrD;SAAM;QACH,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrB;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC"}

138
dist/lib/render/bound-curves.js vendored Normal file
View File

@@ -0,0 +1,138 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var length_percentage_1 = require("../css/types/length-percentage");
var vector_1 = require("./vector");
var bezier_curve_1 = require("./bezier-curve");
var BoundCurves = /** @class */ (function () {
function BoundCurves(element) {
var styles = element.styles;
var bounds = element.bounds;
var _a = length_percentage_1.getAbsoluteValueForTuple(styles.borderTopLeftRadius, bounds.width, bounds.height), tlh = _a[0], tlv = _a[1];
var _b = length_percentage_1.getAbsoluteValueForTuple(styles.borderTopRightRadius, bounds.width, bounds.height), trh = _b[0], trv = _b[1];
var _c = length_percentage_1.getAbsoluteValueForTuple(styles.borderBottomRightRadius, bounds.width, bounds.height), brh = _c[0], brv = _c[1];
var _d = length_percentage_1.getAbsoluteValueForTuple(styles.borderBottomLeftRadius, bounds.width, bounds.height), blh = _d[0], blv = _d[1];
var 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);
var maxFactor = Math.max.apply(Math, factors);
if (maxFactor > 1) {
tlh /= maxFactor;
tlv /= maxFactor;
trh /= maxFactor;
trv /= maxFactor;
brh /= maxFactor;
brv /= maxFactor;
blh /= maxFactor;
blv /= maxFactor;
}
var topWidth = bounds.width - trh;
var rightHeight = bounds.height - brv;
var bottomWidth = bounds.width - brh;
var leftHeight = bounds.height - blv;
var borderTopWidth = styles.borderTopWidth;
var borderRightWidth = styles.borderRightWidth;
var borderBottomWidth = styles.borderBottomWidth;
var borderLeftWidth = styles.borderLeftWidth;
var paddingTop = length_percentage_1.getAbsoluteValue(styles.paddingTop, element.bounds.width);
var paddingRight = length_percentage_1.getAbsoluteValue(styles.paddingRight, element.bounds.width);
var paddingBottom = length_percentage_1.getAbsoluteValue(styles.paddingBottom, element.bounds.width);
var paddingLeft = length_percentage_1.getAbsoluteValue(styles.paddingLeft, element.bounds.width);
this.topLeftBorderBox =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
: new vector_1.Vector(bounds.left, bounds.top);
this.topRightBorderBox =
trh > 0 || trv > 0
? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT)
: new vector_1.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_1.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_1.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_1.Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth);
this.topRightPaddingBox =
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)
: 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)
: 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)
: new vector_1.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_1.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_1.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_1.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_1.Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + bounds.height - (borderBottomWidth + paddingBottom));
}
return BoundCurves;
}());
exports.BoundCurves = BoundCurves;
var CORNER;
(function (CORNER) {
CORNER[CORNER["TOP_LEFT"] = 0] = "TOP_LEFT";
CORNER[CORNER["TOP_RIGHT"] = 1] = "TOP_RIGHT";
CORNER[CORNER["BOTTOM_RIGHT"] = 2] = "BOTTOM_RIGHT";
CORNER[CORNER["BOTTOM_LEFT"] = 3] = "BOTTOM_LEFT";
})(CORNER || (CORNER = {}));
var getCurvePoints = function (x, y, r1, r2, position) {
var kappa = 4 * ((Math.sqrt(2) - 1) / 3);
var ox = r1 * kappa; // control point offset horizontal
var oy = r2 * kappa; // control point offset vertical
var xm = x + r1; // x-middle
var ym = y + r2; // y-middle
switch (position) {
case CORNER.TOP_LEFT:
return new bezier_curve_1.BezierCurve(new vector_1.Vector(x, ym), new vector_1.Vector(x, ym - oy), new vector_1.Vector(xm - ox, y), new vector_1.Vector(xm, y));
case CORNER.TOP_RIGHT:
return new bezier_curve_1.BezierCurve(new vector_1.Vector(x, y), new vector_1.Vector(x + ox, y), new vector_1.Vector(xm, ym - oy), new vector_1.Vector(xm, ym));
case CORNER.BOTTOM_RIGHT:
return new bezier_curve_1.BezierCurve(new vector_1.Vector(xm, y), new vector_1.Vector(xm, y + oy), new vector_1.Vector(x + ox, ym), new vector_1.Vector(x, ym));
case CORNER.BOTTOM_LEFT:
default:
return new bezier_curve_1.BezierCurve(new vector_1.Vector(xm, ym), new vector_1.Vector(xm - ox, ym), new vector_1.Vector(x, y + oy), new vector_1.Vector(x, y));
}
};
exports.calculateBorderBoxPath = function (curves) {
return [curves.topLeftBorderBox, curves.topRightBorderBox, curves.bottomRightBorderBox, curves.bottomLeftBorderBox];
};
exports.calculateContentBoxPath = function (curves) {
return [
curves.topLeftContentBox,
curves.topRightContentBox,
curves.bottomRightContentBox,
curves.bottomLeftContentBox
];
};
exports.calculatePaddingBoxPath = function (curves) {
return [
curves.topLeftPaddingBox,
curves.topRightPaddingBox,
curves.bottomRightPaddingBox,
curves.bottomLeftPaddingBox
];
};
//# sourceMappingURL=bound-curves.js.map

1
dist/lib/render/bound-curves.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

18
dist/lib/render/box-sizing.js vendored Normal file
View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var length_percentage_1 = require("../css/types/length-percentage");
exports.paddingBox = function (element) {
var bounds = element.bounds;
var styles = element.styles;
return bounds.add(styles.borderLeftWidth, styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth), -(styles.borderTopWidth + styles.borderBottomWidth));
};
exports.contentBox = function (element) {
var styles = element.styles;
var bounds = element.bounds;
var paddingLeft = length_percentage_1.getAbsoluteValue(styles.paddingLeft, bounds.width);
var paddingRight = length_percentage_1.getAbsoluteValue(styles.paddingRight, bounds.width);
var paddingTop = length_percentage_1.getAbsoluteValue(styles.paddingTop, bounds.width);
var paddingBottom = length_percentage_1.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));
};
//# sourceMappingURL=box-sizing.js.map

1
dist/lib/render/box-sizing.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"box-sizing.js","sourceRoot":"","sources":["../../../src/render/box-sizing.ts"],"names":[],"mappings":";;AAAA,oEAAgE;AAInD,QAAA,UAAU,GAAG,UAAC,OAAyB;IAChD,IAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,IAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,OAAO,MAAM,CAAC,GAAG,CACb,MAAM,CAAC,eAAe,EACtB,MAAM,CAAC,cAAc,EACrB,CAAC,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,eAAe,CAAC,EACnD,CAAC,CAAC,MAAM,CAAC,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CACtD,CAAC;AACN,CAAC,CAAC;AAEW,QAAA,UAAU,GAAG,UAAC,OAAyB;IAChD,IAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,IAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAE9B,IAAM,WAAW,GAAG,oCAAgB,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACvE,IAAM,YAAY,GAAG,oCAAgB,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACzE,IAAM,UAAU,GAAG,oCAAgB,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACrE,IAAM,aAAa,GAAG,oCAAgB,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IAE3E,OAAO,MAAM,CAAC,GAAG,CACb,WAAW,GAAG,MAAM,CAAC,eAAe,EACpC,UAAU,GAAG,MAAM,CAAC,cAAc,EAClC,CAAC,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,eAAe,GAAG,WAAW,GAAG,YAAY,CAAC,EAChF,CAAC,CAAC,MAAM,CAAC,cAAc,GAAG,MAAM,CAAC,iBAAiB,GAAG,UAAU,GAAG,aAAa,CAAC,CACnF,CAAC;AACN,CAAC,CAAC"}

838
dist/lib/render/canvas/canvas-renderer.js vendored Normal file
View File

@@ -0,0 +1,838 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
var stacking_context_1 = require("../stacking-context");
var color_1 = require("../../css/types/color");
var logger_1 = require("../../core/logger");
var border_style_1 = require("../../css/property-descriptors/border-style");
var path_1 = require("../path");
var background_clip_1 = require("../../css/property-descriptors/background-clip");
var bound_curves_1 = require("../bound-curves");
var bezier_curve_1 = require("../bezier-curve");
var vector_1 = require("../vector");
var image_1 = require("../../css/types/image");
var border_1 = require("../border");
var background_1 = require("../background");
var parser_1 = require("../../css/syntax/parser");
var text_1 = require("../../css/layout/text");
var css_line_break_1 = require("css-line-break");
var image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
var box_sizing_1 = require("../box-sizing");
var canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container");
var svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container");
var effects_1 = require("../effects");
var bitwise_1 = require("../../core/bitwise");
var gradient_1 = require("../../css/types/functions/gradient");
var length_percentage_1 = require("../../css/types/length-percentage");
var font_metrics_1 = require("../font-metrics");
var bounds_1 = require("../../css/layout/bounds");
var list_style_type_1 = require("../../css/property-descriptors/list-style-type");
var line_height_1 = require("../../css/property-descriptors/line-height");
var input_element_container_1 = require("../../dom/replaced-elements/input-element-container");
var text_align_1 = require("../../css/property-descriptors/text-align");
var textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
var select_element_container_1 = require("../../dom/elements/select-element-container");
var iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
var MASK_OFFSET = 10000;
var CanvasRenderer = /** @class */ (function () {
function CanvasRenderer(options) {
this._activeEffects = [];
this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.options = options;
if (!options.canvas) {
this.canvas.width = Math.floor(options.width * options.scale);
this.canvas.height = Math.floor(options.height * options.scale);
this.canvas.style.width = options.width + "px";
this.canvas.style.height = options.height + "px";
}
this.fontMetrics = new font_metrics_1.FontMetrics(document);
this.ctx.scale(this.options.scale, this.options.scale);
this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
this.ctx.textBaseline = 'bottom';
this._activeEffects = [];
logger_1.Logger.getInstance(options.id).debug("Canvas renderer initialized (" + options.width + "x" + options.height + " at " + options.x + "," + options.y + ") with scale " + options.scale);
}
CanvasRenderer.prototype.applyEffects = function (effects, target) {
var _this = this;
while (this._activeEffects.length) {
this.popEffect();
}
effects.filter(function (effect) { return bitwise_1.contains(effect.target, target); }).forEach(function (effect) { return _this.applyEffect(effect); });
};
CanvasRenderer.prototype.applyEffect = function (effect) {
this.ctx.save();
if (effects_1.isOpacityEffect(effect)) {
this.ctx.globalAlpha = effect.opacity;
}
if (effects_1.isTransformEffect(effect)) {
this.ctx.translate(effect.offsetX, effect.offsetY);
this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
this.ctx.translate(-effect.offsetX, -effect.offsetY);
}
if (effects_1.isClipEffect(effect)) {
this.path(effect.path);
this.ctx.clip();
}
this._activeEffects.push(effect);
};
CanvasRenderer.prototype.popEffect = function () {
this._activeEffects.pop();
this.ctx.restore();
};
CanvasRenderer.prototype.renderStack = function (stack) {
return __awaiter(this, void 0, void 0, function () {
var styles;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
styles = stack.element.container.styles;
if (!styles.isVisible()) return [3 /*break*/, 2];
return [4 /*yield*/, this.renderStackContent(stack)];
case 1:
_a.sent();
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.renderNode = function (paint) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!paint.container.styles.isVisible()) return [3 /*break*/, 3];
return [4 /*yield*/, this.renderNodeBackgroundAndBorders(paint)];
case 1:
_a.sent();
return [4 /*yield*/, this.renderNodeContent(paint)];
case 2:
_a.sent();
_a.label = 3;
case 3: return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing) {
var _this = this;
if (letterSpacing === 0) {
this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
}
else {
var letters = css_line_break_1.toCodePoints(text.text).map(function (i) { return css_line_break_1.fromCodePoint(i); });
letters.reduce(function (left, letter) {
_this.ctx.fillText(letter, left, text.bounds.top + text.bounds.height);
return left + _this.ctx.measureText(letter).width;
}, text.bounds.left);
}
};
CanvasRenderer.prototype.createFontStyle = function (styles) {
var fontVariant = styles.fontVariant
.filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; })
.join('');
var fontFamily = styles.fontFamily.join(', ');
var fontSize = parser_1.isDimensionToken(styles.fontSize)
? "" + styles.fontSize.number + styles.fontSize.unit
: styles.fontSize.number + "px";
return [
[styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
fontFamily,
fontSize
];
};
CanvasRenderer.prototype.renderTextNode = function (text, styles) {
return __awaiter(this, void 0, void 0, function () {
var _a, font, fontFamily, fontSize;
var _this = this;
return __generator(this, function (_b) {
_a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2];
this.ctx.font = font;
text.textBounds.forEach(function (text) {
_this.ctx.fillStyle = color_1.asString(styles.color);
_this.renderTextWithLetterSpacing(text, styles.letterSpacing);
var textShadows = styles.textShadow;
if (textShadows.length && text.text.trim().length) {
textShadows
.slice(0)
.reverse()
.forEach(function (textShadow) {
_this.ctx.shadowColor = color_1.asString(textShadow.color);
_this.ctx.shadowOffsetX = textShadow.offsetX.number * _this.options.scale;
_this.ctx.shadowOffsetY = textShadow.offsetY.number * _this.options.scale;
_this.ctx.shadowBlur = textShadow.blur.number;
_this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
});
_this.ctx.shadowColor = '';
_this.ctx.shadowOffsetX = 0;
_this.ctx.shadowOffsetY = 0;
_this.ctx.shadowBlur = 0;
}
if (styles.textDecorationLine.length) {
_this.ctx.fillStyle = color_1.asString(styles.textDecorationColor || styles.color);
styles.textDecorationLine.forEach(function (textDecorationLine) {
switch (textDecorationLine) {
case 1 /* UNDERLINE */:
// Draws a line at the baseline of the font
// TODO As some browsers display the line as more than 1px if the font-size is big,
// need to take that into account both in position and size
var baseline = _this.fontMetrics.getMetrics(fontFamily, fontSize).baseline;
_this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top + baseline), text.bounds.width, 1);
break;
case 2 /* OVERLINE */:
_this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1);
break;
case 3 /* LINE_THROUGH */:
// TODO try and find exact position for line-through
var middle = _this.fontMetrics.getMetrics(fontFamily, fontSize).middle;
_this.ctx.fillRect(text.bounds.left, Math.ceil(text.bounds.top + middle), text.bounds.width, 1);
break;
}
});
}
});
return [2 /*return*/];
});
});
};
CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) {
if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
var box = box_sizing_1.contentBox(container);
var path = bound_curves_1.calculatePaddingBoxPath(curves);
this.path(path);
this.ctx.save();
this.ctx.clip();
this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height);
this.ctx.restore();
}
};
CanvasRenderer.prototype.renderNodeContent = function (paint) {
return __awaiter(this, void 0, void 0, function () {
var container, curves, styles, _i, _a, child, image, e_1, image, e_2, iframeRenderer, canvas, size, bounds, x, textBounds, img, image, url, e_3, bounds;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
this.applyEffects(paint.effects, 4 /* CONTENT */);
container = paint.container;
curves = paint.curves;
styles = container.styles;
_i = 0, _a = container.textNodes;
_b.label = 1;
case 1:
if (!(_i < _a.length)) return [3 /*break*/, 4];
child = _a[_i];
return [4 /*yield*/, this.renderTextNode(child, styles)];
case 2:
_b.sent();
_b.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4:
if (!(container instanceof image_element_container_1.ImageElementContainer)) return [3 /*break*/, 8];
_b.label = 5;
case 5:
_b.trys.push([5, 7, , 8]);
return [4 /*yield*/, this.options.cache.match(container.src)];
case 6:
image = _b.sent();
this.renderReplacedElement(container, curves, image);
return [3 /*break*/, 8];
case 7:
e_1 = _b.sent();
logger_1.Logger.getInstance(this.options.id).error("Error loading image " + container.src);
return [3 /*break*/, 8];
case 8:
if (container instanceof canvas_element_container_1.CanvasElementContainer) {
this.renderReplacedElement(container, curves, container.canvas);
}
if (!(container instanceof svg_element_container_1.SVGElementContainer)) return [3 /*break*/, 12];
_b.label = 9;
case 9:
_b.trys.push([9, 11, , 12]);
return [4 /*yield*/, this.options.cache.match(container.svg)];
case 10:
image = _b.sent();
this.renderReplacedElement(container, curves, image);
return [3 /*break*/, 12];
case 11:
e_2 = _b.sent();
logger_1.Logger.getInstance(this.options.id).error("Error loading svg " + container.svg.substring(0, 255));
return [3 /*break*/, 12];
case 12:
if (!(container instanceof iframe_element_container_1.IFrameElementContainer && container.tree)) return [3 /*break*/, 14];
iframeRenderer = new CanvasRenderer({
id: this.options.id,
scale: this.options.scale,
backgroundColor: container.backgroundColor,
x: 0,
y: 0,
scrollX: 0,
scrollY: 0,
width: container.width,
height: container.height,
cache: this.options.cache,
windowWidth: container.width,
windowHeight: container.height
});
return [4 /*yield*/, iframeRenderer.render(container.tree)];
case 13:
canvas = _b.sent();
if (container.width && container.height) {
this.ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
}
_b.label = 14;
case 14:
if (container instanceof input_element_container_1.InputElementContainer) {
size = Math.min(container.bounds.width, container.bounds.height);
if (container.type === input_element_container_1.CHECKBOX) {
if (container.checked) {
this.ctx.save();
this.path([
new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
new vector_1.Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
new vector_1.Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
new vector_1.Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
new vector_1.Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
]);
this.ctx.fillStyle = color_1.asString(input_element_container_1.INPUT_COLOR);
this.ctx.fill();
this.ctx.restore();
}
}
else if (container.type === input_element_container_1.RADIO) {
if (container.checked) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
this.ctx.fillStyle = color_1.asString(input_element_container_1.INPUT_COLOR);
this.ctx.fill();
this.ctx.restore();
}
}
}
if (isTextInputElement(container) && container.value.length) {
this.ctx.font = this.createFontStyle(styles)[0];
this.ctx.fillStyle = color_1.asString(styles.color);
this.ctx.textBaseline = 'middle';
this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
bounds = box_sizing_1.contentBox(container);
x = 0;
switch (container.styles.textAlign) {
case text_align_1.TEXT_ALIGN.CENTER:
x += bounds.width / 2;
break;
case text_align_1.TEXT_ALIGN.RIGHT:
x += bounds.width;
break;
}
textBounds = bounds.add(x, 0, 0, -bounds.height / 2 + 1);
this.ctx.save();
this.path([
new vector_1.Vector(bounds.left, bounds.top),
new vector_1.Vector(bounds.left + bounds.width, bounds.top),
new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
new vector_1.Vector(bounds.left, bounds.top + bounds.height)
]);
this.ctx.clip();
this.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing);
this.ctx.restore();
this.ctx.textBaseline = 'bottom';
this.ctx.textAlign = 'left';
}
if (!bitwise_1.contains(container.styles.display, 2048 /* LIST_ITEM */)) return [3 /*break*/, 20];
if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19];
img = container.styles.listStyleImage;
if (!(img.type === image_1.CSSImageType.URL)) return [3 /*break*/, 18];
image = void 0;
url = img.url;
_b.label = 15;
case 15:
_b.trys.push([15, 17, , 18]);
return [4 /*yield*/, this.options.cache.match(url)];
case 16:
image = _b.sent();
this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
return [3 /*break*/, 18];
case 17:
e_3 = _b.sent();
logger_1.Logger.getInstance(this.options.id).error("Error loading list-style-image " + url);
return [3 /*break*/, 18];
case 18: return [3 /*break*/, 20];
case 19:
if (paint.listValue && container.styles.listStyleType !== list_style_type_1.LIST_STYLE_TYPE.NONE) {
this.ctx.font = this.createFontStyle(styles)[0];
this.ctx.fillStyle = color_1.asString(styles.color);
this.ctx.textBaseline = 'middle';
this.ctx.textAlign = 'right';
bounds = new bounds_1.Bounds(container.bounds.left, container.bounds.top + length_percentage_1.getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, line_height_1.computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
this.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing);
this.ctx.textBaseline = 'bottom';
this.ctx.textAlign = 'left';
}
_b.label = 20;
case 20: return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.renderStackContent = function (stack) {
return __awaiter(this, void 0, void 0, function () {
var _i, _a, child, _b, _c, child, _d, _e, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o, child;
return __generator(this, function (_p) {
switch (_p.label) {
case 0:
// https://www.w3.org/TR/css-position-3/#painting-order
// 1. the background and borders of the element forming the stacking context.
return [4 /*yield*/, this.renderNodeBackgroundAndBorders(stack.element)];
case 1:
// https://www.w3.org/TR/css-position-3/#painting-order
// 1. the background and borders of the element forming the stacking context.
_p.sent();
_i = 0, _a = stack.negativeZIndex;
_p.label = 2;
case 2:
if (!(_i < _a.length)) return [3 /*break*/, 5];
child = _a[_i];
return [4 /*yield*/, this.renderStack(child)];
case 3:
_p.sent();
_p.label = 4;
case 4:
_i++;
return [3 /*break*/, 2];
case 5:
// 3. For all its in-flow, non-positioned, block-level descendants in tree order:
return [4 /*yield*/, this.renderNodeContent(stack.element)];
case 6:
// 3. For all its in-flow, non-positioned, block-level descendants in tree order:
_p.sent();
_b = 0, _c = stack.nonInlineLevel;
_p.label = 7;
case 7:
if (!(_b < _c.length)) return [3 /*break*/, 10];
child = _c[_b];
return [4 /*yield*/, this.renderNode(child)];
case 8:
_p.sent();
_p.label = 9;
case 9:
_b++;
return [3 /*break*/, 7];
case 10:
_d = 0, _e = stack.nonPositionedFloats;
_p.label = 11;
case 11:
if (!(_d < _e.length)) return [3 /*break*/, 14];
child = _e[_d];
return [4 /*yield*/, this.renderStack(child)];
case 12:
_p.sent();
_p.label = 13;
case 13:
_d++;
return [3 /*break*/, 11];
case 14:
_f = 0, _g = stack.nonPositionedInlineLevel;
_p.label = 15;
case 15:
if (!(_f < _g.length)) return [3 /*break*/, 18];
child = _g[_f];
return [4 /*yield*/, this.renderStack(child)];
case 16:
_p.sent();
_p.label = 17;
case 17:
_f++;
return [3 /*break*/, 15];
case 18:
_h = 0, _j = stack.inlineLevel;
_p.label = 19;
case 19:
if (!(_h < _j.length)) return [3 /*break*/, 22];
child = _j[_h];
return [4 /*yield*/, this.renderNode(child)];
case 20:
_p.sent();
_p.label = 21;
case 21:
_h++;
return [3 /*break*/, 19];
case 22:
_k = 0, _l = stack.zeroOrAutoZIndexOrTransformedOrOpacity;
_p.label = 23;
case 23:
if (!(_k < _l.length)) return [3 /*break*/, 26];
child = _l[_k];
return [4 /*yield*/, this.renderStack(child)];
case 24:
_p.sent();
_p.label = 25;
case 25:
_k++;
return [3 /*break*/, 23];
case 26:
_m = 0, _o = stack.positiveZIndex;
_p.label = 27;
case 27:
if (!(_m < _o.length)) return [3 /*break*/, 30];
child = _o[_m];
return [4 /*yield*/, this.renderStack(child)];
case 28:
_p.sent();
_p.label = 29;
case 29:
_m++;
return [3 /*break*/, 27];
case 30: return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.mask = function (paths) {
this.ctx.beginPath();
this.ctx.moveTo(0, 0);
this.ctx.lineTo(this.canvas.width, 0);
this.ctx.lineTo(this.canvas.width, this.canvas.height);
this.ctx.lineTo(0, this.canvas.height);
this.ctx.lineTo(0, 0);
this.formatPath(paths.slice(0).reverse());
this.ctx.closePath();
};
CanvasRenderer.prototype.path = function (paths) {
this.ctx.beginPath();
this.formatPath(paths);
this.ctx.closePath();
};
CanvasRenderer.prototype.formatPath = function (paths) {
var _this = this;
paths.forEach(function (point, index) {
var start = bezier_curve_1.isBezierCurve(point) ? point.start : point;
if (index === 0) {
_this.ctx.moveTo(start.x, start.y);
}
else {
_this.ctx.lineTo(start.x, start.y);
}
if (bezier_curve_1.isBezierCurve(point)) {
_this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
}
});
};
CanvasRenderer.prototype.renderRepeat = function (path, pattern, offsetX, offsetY) {
this.path(path);
this.ctx.fillStyle = pattern;
this.ctx.translate(offsetX, offsetY);
this.ctx.fill();
this.ctx.translate(-offsetX, -offsetY);
};
CanvasRenderer.prototype.resizeImage = function (image, width, height) {
if (image.width === width && image.height === height) {
return image;
}
var canvas = this.canvas.ownerDocument.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
return canvas;
};
CanvasRenderer.prototype.renderBackgroundImage = function (container) {
return __awaiter(this, void 0, void 0, function () {
var index, _loop_1, this_1, _i, _a, backgroundImage;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
index = container.styles.backgroundImage.length - 1;
_loop_1 = function (backgroundImage) {
var image, url, e_4, _a, path, x, y, width, height, pattern, _b, path, x, y, width, height, _c, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_2, pattern, _d, path, left, top_1, width, height, position, x, y, _e, rx, ry, radialGradient_1, midX, midY, f, invF;
return __generator(this, function (_f) {
switch (_f.label) {
case 0:
if (!(backgroundImage.type === image_1.CSSImageType.URL)) return [3 /*break*/, 5];
image = void 0;
url = backgroundImage.url;
_f.label = 1;
case 1:
_f.trys.push([1, 3, , 4]);
return [4 /*yield*/, this_1.options.cache.match(url)];
case 2:
image = _f.sent();
return [3 /*break*/, 4];
case 3:
e_4 = _f.sent();
logger_1.Logger.getInstance(this_1.options.id).error("Error loading background-image " + url);
return [3 /*break*/, 4];
case 4:
if (image) {
_a = background_1.calculateBackgroundRendering(container, index, [
image.width,
image.height,
image.width / image.height
]), path = _a[0], x = _a[1], y = _a[2], width = _a[3], height = _a[4];
pattern = this_1.ctx.createPattern(this_1.resizeImage(image, width, height), 'repeat');
this_1.renderRepeat(path, pattern, x, y);
}
return [3 /*break*/, 6];
case 5:
if (image_1.isLinearGradient(backgroundImage)) {
_b = background_1.calculateBackgroundRendering(container, index, [null, null, null]), path = _b[0], x = _b[1], y = _b[2], width = _b[3], height = _b[4];
_c = gradient_1.calculateGradientDirection(backgroundImage.angle, width, height), lineLength = _c[0], x0 = _c[1], x1 = _c[2], y0 = _c[3], y1 = _c[4];
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
gradient_2 = ctx.createLinearGradient(x0, y0, x1, y1);
gradient_1.processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) {
return gradient_2.addColorStop(colorStop.stop, color_1.asString(colorStop.color));
});
ctx.fillStyle = gradient_2;
ctx.fillRect(0, 0, width, height);
if (width > 0 && height > 0) {
pattern = this_1.ctx.createPattern(canvas, 'repeat');
this_1.renderRepeat(path, pattern, x, y);
}
}
else if (image_1.isRadialGradient(backgroundImage)) {
_d = background_1.calculateBackgroundRendering(container, index, [
null,
null,
null
]), path = _d[0], left = _d[1], top_1 = _d[2], width = _d[3], height = _d[4];
position = backgroundImage.position.length === 0 ? [length_percentage_1.FIFTY_PERCENT] : backgroundImage.position;
x = length_percentage_1.getAbsoluteValue(position[0], width);
y = length_percentage_1.getAbsoluteValue(position[position.length - 1], height);
_e = gradient_1.calculateRadius(backgroundImage, x, y, width, height), rx = _e[0], ry = _e[1];
if (rx > 0 && rx > 0) {
radialGradient_1 = this_1.ctx.createRadialGradient(left + x, top_1 + y, 0, left + x, top_1 + y, rx);
gradient_1.processColorStops(backgroundImage.stops, rx * 2).forEach(function (colorStop) {
return radialGradient_1.addColorStop(colorStop.stop, color_1.asString(colorStop.color));
});
this_1.path(path);
this_1.ctx.fillStyle = radialGradient_1;
if (rx !== ry) {
midX = container.bounds.left + 0.5 * container.bounds.width;
midY = container.bounds.top + 0.5 * container.bounds.height;
f = ry / rx;
invF = 1 / f;
this_1.ctx.save();
this_1.ctx.translate(midX, midY);
this_1.ctx.transform(1, 0, 0, f, 0, 0);
this_1.ctx.translate(-midX, -midY);
this_1.ctx.fillRect(left, invF * (top_1 - midY) + midY, width, height * invF);
this_1.ctx.restore();
}
else {
this_1.ctx.fill();
}
}
}
_f.label = 6;
case 6:
index--;
return [2 /*return*/];
}
});
};
this_1 = this;
_i = 0, _a = container.styles.backgroundImage.slice(0).reverse();
_b.label = 1;
case 1:
if (!(_i < _a.length)) return [3 /*break*/, 4];
backgroundImage = _a[_i];
return [5 /*yield**/, _loop_1(backgroundImage)];
case 2:
_b.sent();
_b.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4: return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.renderBorder = function (color, side, curvePoints) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.path(border_1.parsePathForBorder(curvePoints, side));
this.ctx.fillStyle = color_1.asString(color);
this.ctx.fill();
return [2 /*return*/];
});
});
};
CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
return __awaiter(this, void 0, void 0, function () {
var styles, hasBackground, borders, backgroundPaintingArea, side, _i, borders_1, border;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
this.applyEffects(paint.effects, 2 /* BACKGROUND_BORDERS */);
styles = paint.container.styles;
hasBackground = !color_1.isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
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 }
];
backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(background_1.getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves);
if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2];
this.ctx.save();
this.path(backgroundPaintingArea);
this.ctx.clip();
if (!color_1.isTransparent(styles.backgroundColor)) {
this.ctx.fillStyle = color_1.asString(styles.backgroundColor);
this.ctx.fill();
}
return [4 /*yield*/, this.renderBackgroundImage(paint.container)];
case 1:
_a.sent();
this.ctx.restore();
styles.boxShadow
.slice(0)
.reverse()
.forEach(function (shadow) {
_this.ctx.save();
var borderBoxArea = bound_curves_1.calculateBorderBoxPath(paint.curves);
var maskOffset = shadow.inset ? 0 : MASK_OFFSET;
var shadowPaintingArea = path_1.transformPath(borderBoxArea, -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number, (shadow.inset ? 1 : -1) * shadow.spread.number, shadow.spread.number * (shadow.inset ? -2 : 2), shadow.spread.number * (shadow.inset ? -2 : 2));
if (shadow.inset) {
_this.path(borderBoxArea);
_this.ctx.clip();
_this.mask(shadowPaintingArea);
}
else {
_this.mask(borderBoxArea);
_this.ctx.clip();
_this.path(shadowPaintingArea);
}
_this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
_this.ctx.shadowOffsetY = shadow.offsetY.number;
_this.ctx.shadowColor = color_1.asString(shadow.color);
_this.ctx.shadowBlur = shadow.blur.number;
_this.ctx.fillStyle = shadow.inset ? color_1.asString(shadow.color) : 'rgba(0,0,0,1)';
_this.ctx.fill();
_this.ctx.restore();
});
_a.label = 2;
case 2:
side = 0;
_i = 0, borders_1 = borders;
_a.label = 3;
case 3:
if (!(_i < borders_1.length)) return [3 /*break*/, 7];
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)];
case 4:
_a.sent();
_a.label = 5;
case 5:
side++;
_a.label = 6;
case 6:
_i++;
return [3 /*break*/, 3];
case 7: return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.render = function (element) {
return __awaiter(this, void 0, void 0, function () {
var stack;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (this.options.backgroundColor) {
this.ctx.fillStyle = color_1.asString(this.options.backgroundColor);
this.ctx.fillRect(this.options.x - this.options.scrollX, this.options.y - this.options.scrollY, this.options.width, this.options.height);
}
stack = stacking_context_1.parseStackingContexts(element);
return [4 /*yield*/, this.renderStack(stack)];
case 1:
_a.sent();
this.applyEffects([], 2 /* BACKGROUND_BORDERS */);
return [2 /*return*/, this.canvas];
}
});
});
};
return CanvasRenderer;
}());
exports.CanvasRenderer = CanvasRenderer;
var isTextInputElement = function (container) {
if (container instanceof textarea_element_container_1.TextareaElementContainer) {
return true;
}
else if (container instanceof select_element_container_1.SelectElementContainer) {
return true;
}
else if (container instanceof input_element_container_1.InputElementContainer && container.type !== input_element_container_1.RADIO && container.type !== input_element_container_1.CHECKBOX) {
return true;
}
return false;
};
var calculateBackgroundCurvedPaintingArea = function (clip, curves) {
switch (clip) {
case background_clip_1.BACKGROUND_CLIP.BORDER_BOX:
return bound_curves_1.calculateBorderBoxPath(curves);
case background_clip_1.BACKGROUND_CLIP.CONTENT_BOX:
return bound_curves_1.calculateContentBoxPath(curves);
case background_clip_1.BACKGROUND_CLIP.PADDING_BOX:
default:
return bound_curves_1.calculatePaddingBoxPath(curves);
}
};
var canvasTextAlign = function (textAlign) {
switch (textAlign) {
case text_align_1.TEXT_ALIGN.CENTER:
return 'center';
case text_align_1.TEXT_ALIGN.RIGHT:
return 'right';
case text_align_1.TEXT_ALIGN.LEFT:
default:
return 'left';
}
};
//# sourceMappingURL=canvas-renderer.js.map

1
dist/lib/render/canvas/canvas-renderer.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

87
dist/lib/render/canvas/foreignobject-renderer.js vendored Normal file
View File

@@ -0,0 +1,87 @@
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
var logger_1 = require("../../core/logger");
var features_1 = require("../../core/features");
var color_1 = require("../../css/types/color");
var ForeignObjectRenderer = /** @class */ (function () {
function ForeignObjectRenderer(options) {
this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.options = options;
this.canvas.width = Math.floor(options.width * options.scale);
this.canvas.height = Math.floor(options.height * options.scale);
this.canvas.style.width = options.width + "px";
this.canvas.style.height = options.height + "px";
this.ctx.scale(this.options.scale, this.options.scale);
this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
logger_1.Logger.getInstance(options.id).debug("EXPERIMENTAL ForeignObject renderer initialized (" + options.width + "x" + options.height + " at " + options.x + "," + options.y + ") with scale " + options.scale);
}
ForeignObjectRenderer.prototype.render = function (element) {
return __awaiter(this, void 0, void 0, function () {
var svg, img;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
svg = features_1.createForeignObjectSVG(Math.max(this.options.windowWidth, this.options.width) * this.options.scale, Math.max(this.options.windowHeight, this.options.height) * this.options.scale, this.options.scrollX * this.options.scale, this.options.scrollY * this.options.scale, element);
return [4 /*yield*/, exports.loadSerializedSVG(svg)];
case 1:
img = _a.sent();
if (this.options.backgroundColor) {
this.ctx.fillStyle = color_1.asString(this.options.backgroundColor);
this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale);
}
this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);
return [2 /*return*/, this.canvas];
}
});
});
};
return ForeignObjectRenderer;
}());
exports.ForeignObjectRenderer = ForeignObjectRenderer;
exports.loadSerializedSVG = function (svg) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () {
resolve(img);
};
img.onerror = reject;
img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));
});
};
//# sourceMappingURL=foreignobject-renderer.js.map

1
dist/lib/render/canvas/foreignobject-renderer.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"foreignobject-renderer.js","sourceRoot":"","sources":["../../../../src/render/canvas/foreignobject-renderer.ts"],"names":[],"mappings":"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"}

37
dist/lib/render/effects.js vendored Normal file
View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var TransformEffect = /** @class */ (function () {
function TransformEffect(offsetX, offsetY, matrix) {
this.type = 0 /* TRANSFORM */;
this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
this.offsetX = offsetX;
this.offsetY = offsetY;
this.matrix = matrix;
}
return TransformEffect;
}());
exports.TransformEffect = TransformEffect;
var ClipEffect = /** @class */ (function () {
function ClipEffect(path, target) {
this.type = 1 /* CLIP */;
this.target = target;
this.path = path;
}
return ClipEffect;
}());
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) {
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

1
dist/lib/render/effects.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../src/render/effects.ts"],"names":[],"mappings":";;AAmBA;IAOI,yBAAY,OAAe,EAAE,OAAe,EAAE,MAAc;QANnD,SAAI,qBAAoC;QACxC,WAAM,GAAW,4CAAsD,CAAC;QAM7E,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IACL,sBAAC;AAAD,CAAC,AAZD,IAYC;AAZY,0CAAe;AAc5B;IAKI,oBAAY,IAAY,EAAE,MAAoB;QAJrC,SAAI,gBAA+B;QAKxC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACrB,CAAC;IACL,iBAAC;AAAD,CAAC,AATD,IASC;AATY,gCAAU;AAWvB;IAKI,uBAAY,OAAe;QAJlB,SAAI,mBAAkC;QACtC,WAAM,GAAW,4CAAsD,CAAC;QAI7E,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;IACL,oBAAC;AAAD,CAAC,AARD,IAQC;AARY,sCAAa;AAUb,QAAA,iBAAiB,GAAG,UAAC,MAAsB;IACpD,OAAA,MAAM,CAAC,IAAI,sBAAyB;AAApC,CAAoC,CAAC;AAC5B,QAAA,YAAY,GAAG,UAAC,MAAsB,IAA2B,OAAA,MAAM,CAAC,IAAI,iBAAoB,EAA/B,CAA+B,CAAC;AACjG,QAAA,eAAe,GAAG,UAAC,MAAsB,IAA8B,OAAA,MAAM,CAAC,IAAI,oBAAuB,EAAlC,CAAkC,CAAC"}

53
dist/lib/render/font-metrics.js vendored Normal file
View File

@@ -0,0 +1,53 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var util_1 = require("../core/util");
var SAMPLE_TEXT = 'Hidden Text';
var FontMetrics = /** @class */ (function () {
function FontMetrics(document) {
this._data = {};
this._document = document;
}
FontMetrics.prototype.parseMetrics = function (fontFamily, fontSize) {
var container = this._document.createElement('div');
var img = this._document.createElement('img');
var span = this._document.createElement('span');
var body = this._document.body;
container.style.visibility = 'hidden';
container.style.fontFamily = fontFamily;
container.style.fontSize = fontSize;
container.style.margin = '0';
container.style.padding = '0';
body.appendChild(container);
img.src = util_1.SMALL_IMAGE;
img.width = 1;
img.height = 1;
img.style.margin = '0';
img.style.padding = '0';
img.style.verticalAlign = 'baseline';
span.style.fontFamily = fontFamily;
span.style.fontSize = fontSize;
span.style.margin = '0';
span.style.padding = '0';
span.appendChild(this._document.createTextNode(SAMPLE_TEXT));
container.appendChild(span);
container.appendChild(img);
var baseline = img.offsetTop - span.offsetTop + 2;
container.removeChild(span);
container.appendChild(this._document.createTextNode(SAMPLE_TEXT));
container.style.lineHeight = 'normal';
img.style.verticalAlign = 'super';
var middle = img.offsetTop - container.offsetTop + 2;
body.removeChild(container);
return { baseline: baseline, middle: middle };
};
FontMetrics.prototype.getMetrics = function (fontFamily, fontSize) {
var key = fontFamily + " " + fontSize;
if (typeof this._data[key] === 'undefined') {
this._data[key] = this.parseMetrics(fontFamily, fontSize);
}
return this._data[key];
};
return FontMetrics;
}());
exports.FontMetrics = FontMetrics;
//# sourceMappingURL=font-metrics.js.map

1
dist/lib/render/font-metrics.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"font-metrics.js","sourceRoot":"","sources":["../../../src/render/font-metrics.ts"],"names":[],"mappings":"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"}

29
dist/lib/render/path.js vendored Normal file
View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var PathType;
(function (PathType) {
PathType[PathType["VECTOR"] = 0] = "VECTOR";
PathType[PathType["BEZIER_CURVE"] = 1] = "BEZIER_CURVE";
})(PathType = exports.PathType || (exports.PathType = {}));
exports.equalPath = function (a, b) {
if (a.length === b.length) {
return a.some(function (v, i) { return v === b[i]; });
}
return false;
};
exports.transformPath = function (path, deltaX, deltaY, deltaW, deltaH) {
return path.map(function (point, index) {
switch (index) {
case 0:
return point.add(deltaX, deltaY);
case 1:
return point.add(deltaX + deltaW, deltaY);
case 2:
return point.add(deltaX + deltaW, deltaY + deltaH);
case 3:
return point.add(deltaX, deltaY + deltaH);
}
return point;
});
};
//# sourceMappingURL=path.js.map

1
dist/lib/render/path.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"path.js","sourceRoot":"","sources":["../../../src/render/path.ts"],"names":[],"mappings":";;AAEA,IAAY,QAGX;AAHD,WAAY,QAAQ;IAChB,2CAAU,CAAA;IACV,uDAAgB,CAAA;AACpB,CAAC,EAHW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAGnB;AAOY,QAAA,SAAS,GAAG,UAAC,CAAS,EAAE,CAAS;IAC1C,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,EAAE;QACvB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAV,CAAU,CAAC,CAAC;KACvC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEW,QAAA,aAAa,GAAG,UAAC,IAAY,EAAE,MAAc,EAAE,MAAc,EAAE,MAAc,EAAE,MAAc;IACtG,OAAO,IAAI,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK;QACzB,QAAQ,KAAK,EAAE;YACX,KAAK,CAAC;gBACF,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACrC,KAAK,CAAC;gBACF,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;YAC9C,KAAK,CAAC;gBACF,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;YACvD,KAAK,CAAC;gBACF,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;SACjD;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC"}

157
dist/lib/render/stacking-context.js vendored Normal file
View File

@@ -0,0 +1,157 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var bitwise_1 = require("../core/bitwise");
var bound_curves_1 = require("./bound-curves");
var effects_1 = require("./effects");
var overflow_1 = require("../css/property-descriptors/overflow");
var path_1 = require("./path");
var ol_element_container_1 = require("../dom/elements/ol-element-container");
var li_element_container_1 = require("../dom/elements/li-element-container");
var counter_1 = require("../css/types/functions/counter");
var StackingContext = /** @class */ (function () {
function StackingContext(container) {
this.element = container;
this.inlineLevel = [];
this.nonInlineLevel = [];
this.negativeZIndex = [];
this.zeroOrAutoZIndexOrTransformedOrOpacity = [];
this.positiveZIndex = [];
this.nonPositionedFloats = [];
this.nonPositionedInlineLevel = [];
}
return StackingContext;
}());
exports.StackingContext = StackingContext;
var ElementPaint = /** @class */ (function () {
function ElementPaint(element, parentStack) {
this.container = element;
this.effects = parentStack.slice(0);
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) {
var offsetX = element.bounds.left + element.styles.transformOrigin[0].number;
var offsetY = element.bounds.top + element.styles.transformOrigin[1].number;
var matrix = element.styles.transform;
this.effects.push(new effects_1.TransformEffect(offsetX, offsetY, matrix));
}
if (element.styles.overflowX !== overflow_1.OVERFLOW.VISIBLE) {
var borderBox = bound_curves_1.calculateBorderBoxPath(this.curves);
var paddingBox = bound_curves_1.calculatePaddingBoxPath(this.curves);
if (path_1.equalPath(borderBox, paddingBox)) {
this.effects.push(new effects_1.ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
}
else {
this.effects.push(new effects_1.ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */));
this.effects.push(new effects_1.ClipEffect(paddingBox, 4 /* CONTENT */));
}
}
}
ElementPaint.prototype.getParentEffects = function () {
var effects = this.effects.slice(0);
if (this.container.styles.overflowX !== overflow_1.OVERFLOW.VISIBLE) {
var borderBox = bound_curves_1.calculateBorderBoxPath(this.curves);
var paddingBox = bound_curves_1.calculatePaddingBoxPath(this.curves);
if (!path_1.equalPath(borderBox, paddingBox)) {
effects.push(new effects_1.ClipEffect(paddingBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */));
}
}
return effects;
};
return ElementPaint;
}());
exports.ElementPaint = ElementPaint;
var parseStackTree = function (parent, stackingContext, realStackingContext, listItems) {
parent.container.elements.forEach(function (child) {
var treatAsRealStackingContext = bitwise_1.contains(child.flags, 4 /* CREATES_REAL_STACKING_CONTEXT */);
var createsStackingContext = bitwise_1.contains(child.flags, 2 /* CREATES_STACKING_CONTEXT */);
var paintContainer = new ElementPaint(child, parent.getParentEffects());
if (bitwise_1.contains(child.styles.display, 2048 /* LIST_ITEM */)) {
listItems.push(paintContainer);
}
var listOwnerItems = bitwise_1.contains(child.flags, 8 /* IS_LIST_OWNER */) ? [] : listItems;
if (treatAsRealStackingContext || createsStackingContext) {
var parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
var stack = new StackingContext(paintContainer);
if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
var order_1 = child.styles.zIndex.order;
if (order_1 < 0) {
var index_1 = 0;
parentStack.negativeZIndex.some(function (current, i) {
if (order_1 > current.element.container.styles.zIndex.order) {
index_1 = i;
return false;
}
else if (index_1 > 0) {
return true;
}
return false;
});
parentStack.negativeZIndex.splice(index_1, 0, stack);
}
else if (order_1 > 0) {
var index_2 = 0;
parentStack.positiveZIndex.some(function (current, i) {
if (order_1 >= current.element.container.styles.zIndex.order) {
index_2 = i + 1;
return false;
}
else if (index_2 > 0) {
return true;
}
return false;
});
parentStack.positiveZIndex.splice(index_2, 0, stack);
}
else {
parentStack.zeroOrAutoZIndexOrTransformedOrOpacity.push(stack);
}
}
else {
if (child.styles.isFloating()) {
parentStack.nonPositionedFloats.push(stack);
}
else {
parentStack.nonPositionedInlineLevel.push(stack);
}
}
parseStackTree(paintContainer, stack, treatAsRealStackingContext ? stack : realStackingContext, listOwnerItems);
}
else {
if (child.styles.isInlineLevel()) {
stackingContext.inlineLevel.push(paintContainer);
}
else {
stackingContext.nonInlineLevel.push(paintContainer);
}
parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems);
}
if (bitwise_1.contains(child.flags, 8 /* IS_LIST_OWNER */)) {
processListItems(child, listOwnerItems);
}
});
};
var processListItems = function (owner, elements) {
var numbering = owner instanceof ol_element_container_1.OLElementContainer ? owner.start : 1;
var reversed = owner instanceof ol_element_container_1.OLElementContainer ? owner.reversed : false;
for (var i = 0; i < elements.length; i++) {
var item = elements[i];
if (item.container instanceof li_element_container_1.LIElementContainer &&
typeof item.container.value === 'number' &&
item.container.value !== 0) {
numbering = item.container.value;
}
item.listValue = counter_1.createCounterText(numbering, item.container.styles.listStyleType, true);
numbering += reversed ? -1 : 1;
}
};
exports.parseStackingContexts = function (container) {
var paintContainer = new ElementPaint(container, []);
var root = new StackingContext(paintContainer);
var listItems = [];
parseStackTree(paintContainer, root, root, listItems);
processListItems(paintContainer.container, listItems);
return root;
};
//# sourceMappingURL=stacking-context.js.map

1
dist/lib/render/stacking-context.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

17
dist/lib/render/vector.js vendored Normal file
View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var path_1 = require("./path");
var Vector = /** @class */ (function () {
function Vector(x, y) {
this.type = path_1.PathType.VECTOR;
this.x = x;
this.y = y;
}
Vector.prototype.add = function (deltaX, deltaY) {
return new Vector(this.x + deltaX, this.y + deltaY);
};
return Vector;
}());
exports.Vector = Vector;
exports.isVector = function (path) { return path.type === path_1.PathType.VECTOR; };
//# sourceMappingURL=vector.js.map

1
dist/lib/render/vector.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"vector.js","sourceRoot":"","sources":["../../../src/render/vector.ts"],"names":[],"mappings":";;AAAA,+BAA6C;AAE7C;IAKI,gBAAY,CAAS,EAAE,CAAS;QAC5B,IAAI,CAAC,IAAI,GAAG,eAAQ,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAED,oBAAG,GAAH,UAAI,MAAc,EAAE,MAAc;QAC9B,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IACxD,CAAC;IACL,aAAC;AAAD,CAAC,AAdD,IAcC;AAdY,wBAAM;AAgBN,QAAA,QAAQ,GAAG,UAAC,IAAU,IAAqB,OAAA,IAAI,CAAC,IAAI,KAAK,eAAQ,CAAC,MAAM,EAA7B,CAA6B,CAAC"}