mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
deps: update dependencies with lint fixes (#2565)
This commit is contained in:
Niklas von Hertzen
committed by
GitHub
GitHub
parent
e7a021ab93
commit
b2902ec31c
@ -88,21 +88,19 @@ export class CanvasRenderer {
|
||||
this.ctx.textBaseline = 'bottom';
|
||||
this._activeEffects = [];
|
||||
Logger.getInstance(options.id).debug(
|
||||
`Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${
|
||||
options.scale
|
||||
}`
|
||||
`Canvas renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
|
||||
);
|
||||
}
|
||||
|
||||
applyEffects(effects: IElementEffect[], target: EffectTarget) {
|
||||
applyEffects(effects: IElementEffect[], target: EffectTarget): void {
|
||||
while (this._activeEffects.length) {
|
||||
this.popEffect();
|
||||
}
|
||||
|
||||
effects.filter(effect => contains(effect.target, target)).forEach(effect => this.applyEffect(effect));
|
||||
effects.filter((effect) => contains(effect.target, target)).forEach((effect) => this.applyEffect(effect));
|
||||
}
|
||||
|
||||
applyEffect(effect: IElementEffect) {
|
||||
applyEffect(effect: IElementEffect): void {
|
||||
this.ctx.save();
|
||||
if (isOpacityEffect(effect)) {
|
||||
this.ctx.globalAlpha = effect.opacity;
|
||||
@ -129,30 +127,30 @@ export class CanvasRenderer {
|
||||
this._activeEffects.push(effect);
|
||||
}
|
||||
|
||||
popEffect() {
|
||||
popEffect(): void {
|
||||
this._activeEffects.pop();
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
async renderStack(stack: StackingContext) {
|
||||
async renderStack(stack: StackingContext): Promise<void> {
|
||||
const styles = stack.element.container.styles;
|
||||
if (styles.isVisible()) {
|
||||
await this.renderStackContent(stack);
|
||||
}
|
||||
}
|
||||
|
||||
async renderNode(paint: ElementPaint) {
|
||||
async renderNode(paint: ElementPaint): Promise<void> {
|
||||
if (paint.container.styles.isVisible()) {
|
||||
await this.renderNodeBackgroundAndBorders(paint);
|
||||
await this.renderNodeContent(paint);
|
||||
}
|
||||
}
|
||||
|
||||
renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number) {
|
||||
renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number): void {
|
||||
if (letterSpacing === 0) {
|
||||
this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
|
||||
} else {
|
||||
const letters = toCodePoints(text.text).map(i => fromCodePoint(i));
|
||||
const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
|
||||
letters.reduce((left, letter) => {
|
||||
this.ctx.fillText(letter, left, text.bounds.top + baseline);
|
||||
|
||||
@ -163,7 +161,7 @@ export class CanvasRenderer {
|
||||
|
||||
private createFontStyle(styles: CSSParsedDeclaration): string[] {
|
||||
const fontVariant = styles.fontVariant
|
||||
.filter(variant => variant === 'normal' || variant === 'small-caps')
|
||||
.filter((variant) => variant === 'normal' || variant === 'small-caps')
|
||||
.join('');
|
||||
const fontFamily = styles.fontFamily.join(', ');
|
||||
const fontSize = isDimensionToken(styles.fontSize)
|
||||
@ -177,7 +175,7 @@ export class CanvasRenderer {
|
||||
];
|
||||
}
|
||||
|
||||
async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration) {
|
||||
async renderTextNode(text: TextContainer, styles: CSSParsedDeclaration): Promise<void> {
|
||||
const [font, fontFamily, fontSize] = this.createFontStyle(styles);
|
||||
|
||||
this.ctx.font = font;
|
||||
@ -185,7 +183,7 @@ export class CanvasRenderer {
|
||||
|
||||
const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
|
||||
|
||||
text.textBounds.forEach(text => {
|
||||
text.textBounds.forEach((text) => {
|
||||
this.ctx.fillStyle = asString(styles.color);
|
||||
this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline);
|
||||
const textShadows: TextShadow = styles.textShadow;
|
||||
@ -194,7 +192,7 @@ export class CanvasRenderer {
|
||||
textShadows
|
||||
.slice(0)
|
||||
.reverse()
|
||||
.forEach(textShadow => {
|
||||
.forEach((textShadow) => {
|
||||
this.ctx.shadowColor = asString(textShadow.color);
|
||||
this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
|
||||
this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
|
||||
@ -211,7 +209,7 @@ export class CanvasRenderer {
|
||||
|
||||
if (styles.textDecorationLine.length) {
|
||||
this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
|
||||
styles.textDecorationLine.forEach(textDecorationLine => {
|
||||
styles.textDecorationLine.forEach((textDecorationLine) => {
|
||||
switch (textDecorationLine) {
|
||||
case TEXT_DECORATION_LINE.UNDERLINE:
|
||||
// Draws a line at the baseline of the font
|
||||
@ -247,7 +245,7 @@ export class CanvasRenderer {
|
||||
container: ReplacedElementContainer,
|
||||
curves: BoundCurves,
|
||||
image: HTMLImageElement | HTMLCanvasElement
|
||||
) {
|
||||
): void {
|
||||
if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) {
|
||||
const box = contentBox(container);
|
||||
const path = calculatePaddingBoxPath(curves);
|
||||
@ -269,7 +267,7 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
async renderNodeContent(paint: ElementPaint) {
|
||||
async renderNodeContent(paint: ElementPaint): Promise<void> {
|
||||
this.applyEffects(paint.effects, EffectTarget.CONTENT);
|
||||
const container = paint.container;
|
||||
const curves = paint.curves;
|
||||
@ -456,7 +454,7 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
async renderStackContent(stack: StackingContext) {
|
||||
async renderStackContent(stack: StackingContext): Promise<void> {
|
||||
// https://www.w3.org/TR/css-position-3/#painting-order
|
||||
// 1. the background and borders of the element forming the stacking context.
|
||||
await this.renderNodeBackgroundAndBorders(stack.element);
|
||||
@ -504,7 +502,7 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
mask(paths: Path[]) {
|
||||
mask(paths: Path[]): void {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(0, 0);
|
||||
this.ctx.lineTo(this.canvas.width, 0);
|
||||
@ -515,13 +513,13 @@ export class CanvasRenderer {
|
||||
this.ctx.closePath();
|
||||
}
|
||||
|
||||
path(paths: Path[]) {
|
||||
path(paths: Path[]): void {
|
||||
this.ctx.beginPath();
|
||||
this.formatPath(paths);
|
||||
this.ctx.closePath();
|
||||
}
|
||||
|
||||
formatPath(paths: Path[]) {
|
||||
formatPath(paths: Path[]): void {
|
||||
paths.forEach((point, index) => {
|
||||
const start: Vector = isBezierCurve(point) ? point.start : point;
|
||||
if (index === 0) {
|
||||
@ -543,7 +541,7 @@ export class CanvasRenderer {
|
||||
});
|
||||
}
|
||||
|
||||
renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number) {
|
||||
renderRepeat(path: Path[], pattern: CanvasPattern | CanvasGradient, offsetX: number, offsetY: number): void {
|
||||
this.path(path);
|
||||
this.ctx.fillStyle = pattern;
|
||||
this.ctx.translate(offsetX, offsetY);
|
||||
@ -564,7 +562,7 @@ export class CanvasRenderer {
|
||||
return canvas;
|
||||
}
|
||||
|
||||
async renderBackgroundImage(container: ElementContainer) {
|
||||
async renderBackgroundImage(container: ElementContainer): Promise<void> {
|
||||
let index = container.styles.backgroundImage.length - 1;
|
||||
for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
|
||||
if (backgroundImage.type === CSSImageType.URL) {
|
||||
@ -598,7 +596,7 @@ export class CanvasRenderer {
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
|
||||
|
||||
processColorStops(backgroundImage.stops, lineLength).forEach(colorStop =>
|
||||
processColorStops(backgroundImage.stops, lineLength).forEach((colorStop) =>
|
||||
gradient.addColorStop(colorStop.stop, asString(colorStop.color))
|
||||
);
|
||||
|
||||
@ -622,7 +620,7 @@ export class CanvasRenderer {
|
||||
if (rx > 0 && rx > 0) {
|
||||
const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
|
||||
|
||||
processColorStops(backgroundImage.stops, rx * 2).forEach(colorStop =>
|
||||
processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) =>
|
||||
radialGradient.addColorStop(colorStop.stop, asString(colorStop.color))
|
||||
);
|
||||
|
||||
@ -651,13 +649,13 @@ export class CanvasRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves) {
|
||||
async renderSolidBorder(color: Color, side: number, curvePoints: BoundCurves): Promise<void> {
|
||||
this.path(parsePathForBorder(curvePoints, side));
|
||||
this.ctx.fillStyle = asString(color);
|
||||
this.ctx.fill();
|
||||
}
|
||||
|
||||
async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves) {
|
||||
async renderDoubleBorder(color: Color, width: number, side: number, curvePoints: BoundCurves): Promise<void> {
|
||||
if (width < 3) {
|
||||
await this.renderSolidBorder(color, side, curvePoints);
|
||||
return;
|
||||
@ -672,7 +670,7 @@ export class CanvasRenderer {
|
||||
this.ctx.fill();
|
||||
}
|
||||
|
||||
async renderNodeBackgroundAndBorders(paint: ElementPaint) {
|
||||
async renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void> {
|
||||
this.applyEffects(paint.effects, EffectTarget.BACKGROUND_BORDERS);
|
||||
const styles = paint.container.styles;
|
||||
const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
|
||||
@ -706,7 +704,7 @@ export class CanvasRenderer {
|
||||
styles.boxShadow
|
||||
.slice(0)
|
||||
.reverse()
|
||||
.forEach(shadow => {
|
||||
.forEach((shadow) => {
|
||||
this.ctx.save();
|
||||
const borderBoxArea = calculateBorderBoxPath(paint.curves);
|
||||
const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
|
||||
@ -774,7 +772,7 @@ export class CanvasRenderer {
|
||||
side: number,
|
||||
curvePoints: BoundCurves,
|
||||
style: BORDER_STYLE
|
||||
) {
|
||||
): Promise<void> {
|
||||
this.ctx.save();
|
||||
|
||||
const strokePaths = parsePathForBorderStroke(curvePoints, side);
|
||||
|
||||
Reference in New Issue
Block a user