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

deps: update dependencies with lint fixes (#2565)

Browse Source
This commit is contained in:
Niklas von Hertzen
2021-07-11 20:25:22 +08:00
committed by GitHub
parent e7a021ab93
commit b2902ec31c
55 changed files with 14658 additions and 11598 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/render/background.ts
View File

@@ -218,7 +218,7 @@ export const calculateBackgroundRepeatPath = (
[width, height]: [number, number],
backgroundPositioningArea: Bounds,
backgroundPaintingArea: Bounds
) => {
): [Vector, Vector, Vector, Vector] => {
switch (repeat) {
case BACKGROUND_REPEAT.REPEAT_X:
return [

60
src/render/canvas/canvas-renderer.ts
View File

@@ -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);

6
src/render/canvas/foreignobject-renderer.ts
View File

@@ -20,13 +20,11 @@ export class ForeignObjectRenderer {
this.ctx.scale(this.options.scale, this.options.scale);
this.ctx.translate(-options.x + options.scrollX, -options.y + options.scrollY);
Logger.getInstance(options.id).debug(
`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${
options.y
}) with scale ${options.scale}`
`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`
);
}
async render(element: HTMLElement) {
async render(element: HTMLElement): Promise<HTMLCanvasElement> {
const svg = createForeignObjectSVG(
Math.max(this.options.windowWidth, this.options.width) * this.options.scale,
Math.max(this.options.windowHeight, this.options.height) * this.options.scale,

2
src/render/stacking-context.ts
View File

@@ -84,7 +84,7 @@ const parseStackTree = (
realStackingContext: StackingContext,
listItems: ElementPaint[]
) => {
parent.container.elements.forEach(child => {
parent.container.elements.forEach((child) => {
const treatAsRealStackingContext = contains(child.flags, FLAGS.CREATES_REAL_STACKING_CONTEXT);
const createsStackingContext = contains(child.flags, FLAGS.CREATES_STACKING_CONTEXT);
const paintContainer = new ElementPaint(child, parent.getParentEffects());