mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
142 lines
5.1 KiB
JavaScript
142 lines
5.1 KiB
JavaScript
/* @flow */
|
|
'use strict';
|
|
|
|
import type {Background} from './parsing/background';
|
|
import type {Border} from './parsing/border';
|
|
import type {BorderRadius} from './parsing/borderRadius';
|
|
import type {DisplayBit} from './parsing/display';
|
|
import type {Float} from './parsing/float';
|
|
import type {Font} from './parsing/font';
|
|
import type {Padding} from './parsing/padding';
|
|
import type {Position} from './parsing/position';
|
|
import type {TextTransform} from './parsing/textTransform';
|
|
import type {TextDecoration} from './parsing/textDecoration';
|
|
import type {Transform} from './parsing/transform';
|
|
import type {zIndex} from './parsing/zIndex';
|
|
|
|
import type {Bounds} from './Bounds';
|
|
import type ImageLoader from './ImageLoader';
|
|
|
|
import type TextContainer from './TextContainer';
|
|
|
|
import Color from './Color';
|
|
|
|
import {contains} from './Util';
|
|
import {parseBackground} from './parsing/background';
|
|
import {parseBorder} from './parsing/border';
|
|
import {parseBorderRadius} from './parsing/borderRadius';
|
|
import {parseDisplay, DISPLAY} from './parsing/display';
|
|
import {parseCSSFloat, FLOAT} from './parsing/float';
|
|
import {parseFont} from './parsing/font';
|
|
import {parseLetterSpacing} from './parsing/letterSpacing';
|
|
import {parsePadding} from './parsing/padding';
|
|
import {parsePosition, POSITION} from './parsing/position';
|
|
import {parseTextDecoration} from './parsing/textDecoration';
|
|
import {parseTextTransform} from './parsing/textTransform';
|
|
import {parseTransform} from './parsing/transform';
|
|
import {parseZIndex} from './parsing/zIndex';
|
|
|
|
import {parseBounds} from './Bounds';
|
|
|
|
type StyleDeclaration = {
|
|
background: Background,
|
|
border: Array<Border>,
|
|
borderRadius: Array<BorderRadius>,
|
|
color: Color,
|
|
display: DisplayBit,
|
|
float: Float,
|
|
font: Font,
|
|
letterSpacing: number,
|
|
opacity: number,
|
|
padding: Padding,
|
|
position: Position,
|
|
textDecoration: TextDecoration,
|
|
textTransform: TextTransform,
|
|
transform: Transform,
|
|
zIndex: zIndex
|
|
};
|
|
|
|
export default class NodeContainer {
|
|
name: ?string;
|
|
parent: ?NodeContainer;
|
|
style: StyleDeclaration;
|
|
textNodes: Array<TextContainer>;
|
|
bounds: Bounds;
|
|
image: ?string;
|
|
|
|
constructor(node: HTMLElement, parent: ?NodeContainer, imageLoader: ImageLoader) {
|
|
this.parent = parent;
|
|
this.textNodes = [];
|
|
const style = node.ownerDocument.defaultView.getComputedStyle(node, null);
|
|
const display = parseDisplay(style.display);
|
|
|
|
this.style = {
|
|
background: parseBackground(style, imageLoader),
|
|
border: parseBorder(style),
|
|
borderRadius: parseBorderRadius(style),
|
|
color: new Color(style.color),
|
|
display: display,
|
|
float: parseCSSFloat(style.float),
|
|
font: parseFont(style),
|
|
letterSpacing: parseLetterSpacing(style.letterSpacing),
|
|
opacity: parseFloat(style.opacity),
|
|
padding: parsePadding(style),
|
|
position: parsePosition(style.position),
|
|
textDecoration: parseTextDecoration(style),
|
|
textTransform: parseTextTransform(style.textTransform),
|
|
transform: parseTransform(style),
|
|
zIndex: parseZIndex(style.zIndex)
|
|
};
|
|
this.image =
|
|
node instanceof HTMLImageElement
|
|
? imageLoader.loadImage(node.currentSrc || node.src)
|
|
: null;
|
|
this.bounds = parseBounds(node, this.isTransformed());
|
|
if (__DEV__) {
|
|
this.name = `${node.tagName.toLowerCase()}${node.id
|
|
? `#${node.id}`
|
|
: ''}${node.className.split(' ').map(s => (s.length ? `.${s}` : '')).join('')}`;
|
|
}
|
|
}
|
|
isInFlow(): boolean {
|
|
return this.isRootElement() && !this.isFloating() && !this.isAbsolutelyPositioned();
|
|
}
|
|
isVisible(): boolean {
|
|
return !contains(this.style.display, DISPLAY.NONE) && this.style.opacity > 0;
|
|
}
|
|
isAbsolutelyPositioned(): boolean {
|
|
return this.style.position !== POSITION.STATIC && this.style.position !== POSITION.RELATIVE;
|
|
}
|
|
isPositioned(): boolean {
|
|
return this.style.position !== POSITION.STATIC;
|
|
}
|
|
isFloating(): boolean {
|
|
return this.style.float !== FLOAT.NONE;
|
|
}
|
|
isRootElement(): boolean {
|
|
return this.parent === null;
|
|
}
|
|
isTransformed(): boolean {
|
|
return this.style.transform !== null;
|
|
}
|
|
isPositionedWithZIndex(): boolean {
|
|
return this.isPositioned() && !this.style.zIndex.auto;
|
|
}
|
|
isInlineLevel(): boolean {
|
|
return (
|
|
contains(this.style.display, DISPLAY.INLINE) ||
|
|
contains(this.style.display, DISPLAY.INLINE_BLOCK) ||
|
|
contains(this.style.display, DISPLAY.INLINE_FLEX) ||
|
|
contains(this.style.display, DISPLAY.INLINE_GRID) ||
|
|
contains(this.style.display, DISPLAY.INLINE_LIST_ITEM) ||
|
|
contains(this.style.display, DISPLAY.INLINE_TABLE)
|
|
);
|
|
}
|
|
isInlineBlockOrInlineTable(): boolean {
|
|
return (
|
|
contains(this.style.display, DISPLAY.INLINE_BLOCK) ||
|
|
contains(this.style.display, DISPLAY.INLINE_TABLE)
|
|
);
|
|
}
|
|
}
|