451 lines
16 KiB
JavaScript
451 lines
16 KiB
JavaScript
/* @flow */
|
|
'use strict';
|
|
|
|
import type Color from './Color';
|
|
import type {Path} from './drawing/Path';
|
|
import type Size from './drawing/Size';
|
|
import type Logger from './Logger';
|
|
|
|
import type {BackgroundImage} from './parsing/background';
|
|
import type {Border, BorderSide} from './parsing/border';
|
|
import type {Font} from './parsing/font';
|
|
import type {TextDecoration} from './parsing/textDecoration';
|
|
import type {TextShadow} from './parsing/textShadow';
|
|
import type {Matrix} from './parsing/transform';
|
|
|
|
import type {BoundCurves} from './Bounds';
|
|
import type {LinearGradient, RadialGradient} from './Gradient';
|
|
import type {ResourceStore, ImageElement} from './ResourceLoader';
|
|
import type NodeContainer from './NodeContainer';
|
|
import type StackingContext from './StackingContext';
|
|
import type {TextBounds} from './TextBounds';
|
|
|
|
import {Bounds, parsePathForBorder, calculateContentBox, calculatePaddingBoxPath} from './Bounds';
|
|
import {FontMetrics} from './Font';
|
|
import {parseGradient, GRADIENT_TYPE} from './Gradient';
|
|
import TextContainer from './TextContainer';
|
|
|
|
import {
|
|
calculateBackgroungPositioningArea,
|
|
calculateBackgroungPaintingArea,
|
|
calculateBackgroundPosition,
|
|
calculateBackgroundRepeatPath,
|
|
calculateBackgroundSize,
|
|
calculateGradientBackgroundSize
|
|
} from './parsing/background';
|
|
import {BORDER_STYLE} from './parsing/border';
|
|
|
|
export type RenderOptions = {
|
|
scale: number,
|
|
backgroundColor: ?Color,
|
|
imageStore: ResourceStore,
|
|
fontMetrics: FontMetrics,
|
|
logger: Logger,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
height: number
|
|
};
|
|
|
|
export interface RenderTarget<Output> {
|
|
clip(clipPaths: Array<Path>, callback: () => void): void,
|
|
|
|
drawImage(image: ImageElement, source: Bounds, destination: Bounds): void,
|
|
|
|
drawShape(path: Path, color: Color): void,
|
|
|
|
fill(color: Color): void,
|
|
|
|
getTarget(): Promise<Output>,
|
|
|
|
rectangle(x: number, y: number, width: number, height: number, color: Color): void,
|
|
|
|
render(options: RenderOptions): void,
|
|
|
|
renderLinearGradient(bounds: Bounds, gradient: LinearGradient): void,
|
|
|
|
renderRadialGradient(bounds: Bounds, gradient: RadialGradient): void,
|
|
|
|
renderRepeat(
|
|
path: Path,
|
|
image: ImageElement,
|
|
imageSize: Size,
|
|
offsetX: number,
|
|
offsetY: number
|
|
): void,
|
|
|
|
renderTextNode(
|
|
textBounds: Array<TextBounds>,
|
|
color: Color,
|
|
font: Font,
|
|
textDecoration: TextDecoration | null,
|
|
textShadows: Array<TextShadow> | null
|
|
): void,
|
|
|
|
setOpacity(opacity: number): void,
|
|
|
|
transform(offsetX: number, offsetY: number, matrix: Matrix, callback: () => void): void
|
|
}
|
|
|
|
export default class Renderer {
|
|
target: RenderTarget<*>;
|
|
options: RenderOptions;
|
|
_opacity: ?number;
|
|
|
|
constructor(target: RenderTarget<*>, options: RenderOptions) {
|
|
this.target = target;
|
|
this.options = options;
|
|
target.render(options);
|
|
}
|
|
|
|
renderNode(container: NodeContainer) {
|
|
if (container.isVisible()) {
|
|
this.renderNodeBackgroundAndBorders(container);
|
|
this.renderNodeContent(container);
|
|
}
|
|
}
|
|
|
|
renderNodeContent(container: NodeContainer) {
|
|
const callback = () => {
|
|
if (container.childNodes.length) {
|
|
container.childNodes.forEach(child => {
|
|
if (child instanceof TextContainer) {
|
|
const style = child.parent.style;
|
|
this.target.renderTextNode(
|
|
child.bounds,
|
|
style.color,
|
|
style.font,
|
|
style.textDecoration,
|
|
style.textShadow
|
|
);
|
|
} else {
|
|
this.target.drawShape(child, container.style.color);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (container.image) {
|
|
const image = this.options.imageStore.get(container.image);
|
|
if (image) {
|
|
const contentBox = calculateContentBox(
|
|
container.bounds,
|
|
container.style.padding,
|
|
container.style.border
|
|
);
|
|
const width =
|
|
typeof image.width === 'number' && image.width > 0
|
|
? image.width
|
|
: contentBox.width;
|
|
const height =
|
|
typeof image.height === 'number' && image.height > 0
|
|
? image.height
|
|
: contentBox.height;
|
|
if (width > 0 && height > 0) {
|
|
this.target.clip([calculatePaddingBoxPath(container.curvedBounds)], () => {
|
|
this.target.drawImage(
|
|
image,
|
|
new Bounds(0, 0, width, height),
|
|
contentBox
|
|
);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const paths = container.getClipPaths();
|
|
if (paths.length) {
|
|
this.target.clip(paths, callback);
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
|
|
renderNodeBackgroundAndBorders(container: NodeContainer) {
|
|
const HAS_BACKGROUND =
|
|
!container.style.background.backgroundColor.isTransparent() ||
|
|
container.style.background.backgroundImage.length;
|
|
|
|
const hasRenderableBorders = container.style.border.some(
|
|
border =>
|
|
border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
|
|
);
|
|
|
|
const callback = () => {
|
|
const backgroundPaintingArea = calculateBackgroungPaintingArea(
|
|
container.curvedBounds,
|
|
container.style.background.backgroundClip
|
|
);
|
|
|
|
if (HAS_BACKGROUND) {
|
|
this.target.clip([backgroundPaintingArea], () => {
|
|
if (!container.style.background.backgroundColor.isTransparent()) {
|
|
this.target.fill(container.style.background.backgroundColor);
|
|
}
|
|
|
|
this.renderBackgroundImage(container);
|
|
});
|
|
}
|
|
|
|
container.style.border.forEach((border, side) => {
|
|
if (
|
|
border.borderStyle !== BORDER_STYLE.NONE &&
|
|
!border.borderColor.isTransparent()
|
|
) {
|
|
this.renderBorder(border, side, container.curvedBounds);
|
|
}
|
|
});
|
|
};
|
|
|
|
if (HAS_BACKGROUND || hasRenderableBorders) {
|
|
const paths = container.parent ? container.parent.getClipPaths() : [];
|
|
if (paths.length) {
|
|
this.target.clip(paths, callback);
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
}
|
|
|
|
renderBackgroundImage(container: NodeContainer) {
|
|
container.style.background.backgroundImage.slice(0).reverse().forEach(backgroundImage => {
|
|
if (backgroundImage.source.method === 'url' && backgroundImage.source.args.length) {
|
|
this.renderBackgroundRepeat(container, backgroundImage);
|
|
} else if (/gradient/i.test(backgroundImage.source.method)) {
|
|
this.renderBackgroundGradient(container, backgroundImage);
|
|
}
|
|
});
|
|
}
|
|
|
|
renderBackgroundRepeat(container: NodeContainer, background: BackgroundImage) {
|
|
const image = this.options.imageStore.get(background.source.args[0]);
|
|
if (image) {
|
|
const backgroundPositioningArea = calculateBackgroungPositioningArea(
|
|
container.style.background.backgroundOrigin,
|
|
container.bounds,
|
|
container.style.padding,
|
|
container.style.border
|
|
);
|
|
const backgroundImageSize = calculateBackgroundSize(
|
|
background,
|
|
image,
|
|
backgroundPositioningArea
|
|
);
|
|
const position = calculateBackgroundPosition(
|
|
background.position,
|
|
backgroundImageSize,
|
|
backgroundPositioningArea
|
|
);
|
|
const path = calculateBackgroundRepeatPath(
|
|
background,
|
|
position,
|
|
backgroundImageSize,
|
|
backgroundPositioningArea,
|
|
container.bounds
|
|
);
|
|
|
|
const offsetX = Math.round(backgroundPositioningArea.left + position.x);
|
|
const offsetY = Math.round(backgroundPositioningArea.top + position.y);
|
|
this.target.renderRepeat(path, image, backgroundImageSize, offsetX, offsetY);
|
|
}
|
|
}
|
|
|
|
renderBackgroundGradient(container: NodeContainer, background: BackgroundImage) {
|
|
const backgroundPositioningArea = calculateBackgroungPositioningArea(
|
|
container.style.background.backgroundOrigin,
|
|
container.bounds,
|
|
container.style.padding,
|
|
container.style.border
|
|
);
|
|
const backgroundImageSize = calculateGradientBackgroundSize(
|
|
background,
|
|
backgroundPositioningArea
|
|
);
|
|
const position = calculateBackgroundPosition(
|
|
background.position,
|
|
backgroundImageSize,
|
|
backgroundPositioningArea
|
|
);
|
|
const gradientBounds = new Bounds(
|
|
Math.round(backgroundPositioningArea.left + position.x),
|
|
Math.round(backgroundPositioningArea.top + position.y),
|
|
backgroundImageSize.width,
|
|
backgroundImageSize.height
|
|
);
|
|
|
|
const gradient = parseGradient(container, background.source, gradientBounds);
|
|
if (gradient) {
|
|
switch (gradient.type) {
|
|
case GRADIENT_TYPE.LINEAR_GRADIENT:
|
|
// $FlowFixMe
|
|
this.target.renderLinearGradient(gradientBounds, gradient);
|
|
break;
|
|
case GRADIENT_TYPE.RADIAL_GRADIENT:
|
|
// $FlowFixMe
|
|
this.target.renderRadialGradient(gradientBounds, gradient);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
renderBorder(border: Border, side: BorderSide, curvePoints: BoundCurves) {
|
|
this.target.drawShape(parsePathForBorder(curvePoints, side), border.borderColor);
|
|
}
|
|
|
|
renderStack(stack: StackingContext) {
|
|
if (stack.container.isVisible()) {
|
|
const opacity = stack.getOpacity();
|
|
if (opacity !== this._opacity) {
|
|
this.target.setOpacity(stack.getOpacity());
|
|
this._opacity = opacity;
|
|
}
|
|
|
|
const transform = stack.container.style.transform;
|
|
if (transform !== null) {
|
|
this.target.transform(
|
|
stack.container.bounds.left + transform.transformOrigin[0].value,
|
|
stack.container.bounds.top + transform.transformOrigin[1].value,
|
|
transform.transform,
|
|
() => this.renderStackContent(stack)
|
|
);
|
|
} else {
|
|
this.renderStackContent(stack);
|
|
}
|
|
}
|
|
}
|
|
|
|
renderStackContent(stack: StackingContext) {
|
|
const [
|
|
negativeZIndex,
|
|
zeroOrAutoZIndexOrTransformedOrOpacity,
|
|
positiveZIndex,
|
|
nonPositionedFloats,
|
|
nonPositionedInlineLevel
|
|
] = splitStackingContexts(stack);
|
|
const [inlineLevel, nonInlineLevel] = splitDescendants(stack);
|
|
|
|
// https://www.w3.org/TR/css-position-3/#painting-order
|
|
// 1. the background and borders of the element forming the stacking context.
|
|
this.renderNodeBackgroundAndBorders(stack.container);
|
|
// 2. the child stacking contexts with negative stack levels (most negative first).
|
|
negativeZIndex.sort(sortByZIndex).forEach(this.renderStack, this);
|
|
// 3. For all its in-flow, non-positioned, block-level descendants in tree order:
|
|
this.renderNodeContent(stack.container);
|
|
nonInlineLevel.forEach(this.renderNode, this);
|
|
// 4. All non-positioned floating descendants, in tree order. For each one of these,
|
|
// treat the element as if it created a new stacking context, but any positioned descendants and descendants
|
|
// which actually create a new stacking context should be considered part of the parent stacking context,
|
|
// not this new one.
|
|
nonPositionedFloats.forEach(this.renderStack, this);
|
|
// 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
|
|
nonPositionedInlineLevel.forEach(this.renderStack, this);
|
|
inlineLevel.forEach(this.renderNode, this);
|
|
// 6. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
|
|
// All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
|
|
// For those with 'z-index: auto', treat the element as if it created a new stacking context,
|
|
// but any positioned descendants and descendants which actually create a new stacking context should be
|
|
// considered part of the parent stacking context, not this new one. For those with 'z-index: 0',
|
|
// treat the stacking context generated atomically.
|
|
//
|
|
// All opacity descendants with opacity less than 1
|
|
//
|
|
// All transform descendants with transform other than none
|
|
zeroOrAutoZIndexOrTransformedOrOpacity.forEach(this.renderStack, this);
|
|
// 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
|
|
// order (smallest first) then tree order.
|
|
positiveZIndex.sort(sortByZIndex).forEach(this.renderStack, this);
|
|
}
|
|
|
|
render(stack: StackingContext): Promise<*> {
|
|
if (this.options.backgroundColor) {
|
|
this.target.rectangle(
|
|
this.options.x,
|
|
this.options.y,
|
|
this.options.width,
|
|
this.options.height,
|
|
this.options.backgroundColor
|
|
);
|
|
}
|
|
this.renderStack(stack);
|
|
const target = this.target.getTarget();
|
|
if (__DEV__) {
|
|
return target.then(output => {
|
|
this.options.logger.log(`Render completed`);
|
|
return output;
|
|
});
|
|
}
|
|
return target;
|
|
}
|
|
}
|
|
|
|
const splitDescendants = (stack: StackingContext): [Array<NodeContainer>, Array<NodeContainer>] => {
|
|
const inlineLevel = [];
|
|
const nonInlineLevel = [];
|
|
|
|
const length = stack.children.length;
|
|
for (let i = 0; i < length; i++) {
|
|
let child = stack.children[i];
|
|
if (child.isInlineLevel()) {
|
|
inlineLevel.push(child);
|
|
} else {
|
|
nonInlineLevel.push(child);
|
|
}
|
|
}
|
|
return [inlineLevel, nonInlineLevel];
|
|
};
|
|
|
|
const splitStackingContexts = (
|
|
stack: StackingContext
|
|
): [
|
|
Array<StackingContext>,
|
|
Array<StackingContext>,
|
|
Array<StackingContext>,
|
|
Array<StackingContext>,
|
|
Array<StackingContext>
|
|
] => {
|
|
const negativeZIndex = [];
|
|
const zeroOrAutoZIndexOrTransformedOrOpacity = [];
|
|
const positiveZIndex = [];
|
|
const nonPositionedFloats = [];
|
|
const nonPositionedInlineLevel = [];
|
|
const length = stack.contexts.length;
|
|
for (let i = 0; i < length; i++) {
|
|
let child = stack.contexts[i];
|
|
if (
|
|
child.container.isPositioned() ||
|
|
child.container.style.opacity < 1 ||
|
|
child.container.isTransformed()
|
|
) {
|
|
if (child.container.style.zIndex.order < 0) {
|
|
negativeZIndex.push(child);
|
|
} else if (child.container.style.zIndex.order > 0) {
|
|
positiveZIndex.push(child);
|
|
} else {
|
|
zeroOrAutoZIndexOrTransformedOrOpacity.push(child);
|
|
}
|
|
} else {
|
|
if (child.container.isFloating()) {
|
|
nonPositionedFloats.push(child);
|
|
} else {
|
|
nonPositionedInlineLevel.push(child);
|
|
}
|
|
}
|
|
}
|
|
return [
|
|
negativeZIndex,
|
|
zeroOrAutoZIndexOrTransformedOrOpacity,
|
|
positiveZIndex,
|
|
nonPositionedFloats,
|
|
nonPositionedInlineLevel
|
|
];
|
|
};
|
|
|
|
const sortByZIndex = (a: StackingContext, b: StackingContext): number => {
|
|
if (a.container.style.zIndex.order > b.container.style.zIndex.order) {
|
|
return 1;
|
|
} else if (a.container.style.zIndex.order < b.container.style.zIndex.order) {
|
|
return -1;
|
|
}
|
|
|
|
return a.container.index > b.container.index ? 1 : -1;
|
|
};
|