Matias Niemelä
98
modules/@angular/compiler/src/animation/animation_ast.ts
Normal file
98
modules/@angular/compiler/src/animation/animation_ast.ts
Normal file
@ -0,0 +1,98 @@
|
||||
export abstract class AnimationAst {
|
||||
public startTime: number = 0;
|
||||
public playTime: number = 0;
|
||||
abstract visit(visitor: AnimationAstVisitor, context: any): any;
|
||||
}
|
||||
|
||||
export abstract class AnimationStateAst extends AnimationAst {
|
||||
abstract visit(visitor: AnimationAstVisitor, context: any): any;
|
||||
}
|
||||
|
||||
export interface AnimationAstVisitor {
|
||||
visitAnimationEntry(ast: AnimationEntryAst, context: any): any;
|
||||
visitAnimationStateDeclaration(ast: AnimationStateDeclarationAst, context: any): any;
|
||||
visitAnimationStateTransition(ast: AnimationStateTransitionAst, context: any): any;
|
||||
visitAnimationStep(ast: AnimationStepAst, context: any): any;
|
||||
visitAnimationSequence(ast: AnimationSequenceAst, context: any): any;
|
||||
visitAnimationGroup(ast: AnimationGroupAst, context: any): any;
|
||||
visitAnimationKeyframe(ast: AnimationKeyframeAst, context: any): any;
|
||||
visitAnimationStyles(ast: AnimationStylesAst, context: any): any;
|
||||
}
|
||||
|
||||
export class AnimationEntryAst extends AnimationAst {
|
||||
constructor(public name: string,
|
||||
public stateDeclarations: AnimationStateDeclarationAst[],
|
||||
public stateTransitions: AnimationStateTransitionAst[]) {
|
||||
super();
|
||||
}
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationEntry(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationStateDeclarationAst extends AnimationStateAst {
|
||||
constructor(public stateName: string, public styles: AnimationStylesAst) {
|
||||
super();
|
||||
}
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationStateDeclaration(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationStateTransitionExpression {
|
||||
constructor(public fromState: string, public toState: string) {}
|
||||
}
|
||||
|
||||
export class AnimationStateTransitionAst extends AnimationStateAst {
|
||||
constructor(public stateChanges: AnimationStateTransitionExpression[], public animation: AnimationSequenceAst) {
|
||||
super();
|
||||
}
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationStateTransition(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationStepAst extends AnimationAst {
|
||||
constructor(public startingStyles: AnimationStylesAst,
|
||||
public keyframes: AnimationKeyframeAst[],
|
||||
public duration: number,
|
||||
public delay: number,
|
||||
public easing: string) {
|
||||
super();
|
||||
}
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationStep(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationStylesAst extends AnimationAst {
|
||||
constructor(public styles: Array<{[key: string]: string | number}>) { super(); }
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationStyles(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationKeyframeAst extends AnimationAst {
|
||||
constructor(public offset: number, public styles: AnimationStylesAst) { super(); }
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationKeyframe(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export abstract class AnimationWithStepsAst extends AnimationAst {
|
||||
constructor(public steps: AnimationAst[]) { super(); }
|
||||
}
|
||||
|
||||
export class AnimationGroupAst extends AnimationWithStepsAst {
|
||||
constructor(steps: AnimationAst[]) { super(steps); }
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationGroup(this, context);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationSequenceAst extends AnimationWithStepsAst {
|
||||
constructor(steps: AnimationAst[]) { super(steps); }
|
||||
visit(visitor: AnimationAstVisitor, context: any): any {
|
||||
return visitor.visitAnimationSequence(this, context);
|
||||
}
|
||||
}
|
||||
368
modules/@angular/compiler/src/animation/animation_compiler.ts
Normal file
368
modules/@angular/compiler/src/animation/animation_compiler.ts
Normal file
@ -0,0 +1,368 @@
|
||||
import {BaseException} from '../facade/exceptions';
|
||||
import {ListWrapper, Map, StringMapWrapper} from '../facade/collection';
|
||||
import {isPresent, isBlank, isArray} from '../facade/lang';
|
||||
|
||||
import {Identifiers} from '../identifiers';
|
||||
import * as o from '../output/output_ast';
|
||||
|
||||
import {AUTO_STYLE} from '@angular/core';
|
||||
import {ANY_STATE, EMPTY_STATE} from '../../core_private';
|
||||
|
||||
import {
|
||||
AnimationParseError,
|
||||
ParsedAnimationResult,
|
||||
parseAnimationEntry
|
||||
} from './animation_parser';
|
||||
|
||||
import {CompileDirectiveMetadata} from "../compile_metadata";
|
||||
|
||||
import {
|
||||
AnimationAst,
|
||||
AnimationEntryAst,
|
||||
AnimationStateAst,
|
||||
AnimationStateDeclarationAst,
|
||||
AnimationStateTransitionAst,
|
||||
AnimationKeyframeAst,
|
||||
AnimationStylesAst,
|
||||
AnimationSequenceAst,
|
||||
AnimationGroupAst,
|
||||
AnimationStepAst,
|
||||
AnimationAstVisitor
|
||||
} from './animation_ast';
|
||||
|
||||
export class CompiledAnimation {
|
||||
constructor(public name: string,
|
||||
public statesMapStatement: o.Statement,
|
||||
public statesVariableName: string,
|
||||
public fnStatement: o.Statement,
|
||||
public fnVariable: o.Expression) {}
|
||||
}
|
||||
|
||||
export class AnimationCompiler {
|
||||
compileComponent(component: CompileDirectiveMetadata): CompiledAnimation[] {
|
||||
var compiledAnimations: CompiledAnimation[] = [];
|
||||
var index = 0;
|
||||
component.template.animations.forEach(entry => {
|
||||
var result = parseAnimationEntry(entry);
|
||||
if (result.errors.length > 0) {
|
||||
var errorMessage = '';
|
||||
result.errors.forEach((error: AnimationParseError) => { errorMessage += "\n- " + error.msg; });
|
||||
// todo (matsko): include the component name when throwing
|
||||
throw new BaseException(
|
||||
`Unable to parse the animation sequence for "${entry.name}" due to the following errors: ` +
|
||||
errorMessage);
|
||||
}
|
||||
|
||||
var factoryName = `${component.type.name}_${entry.name}_${index}`;
|
||||
index++;
|
||||
|
||||
var visitor = new _AnimationBuilder(entry.name, factoryName);
|
||||
compiledAnimations.push(visitor.build(result.ast));
|
||||
});
|
||||
return compiledAnimations;
|
||||
}
|
||||
}
|
||||
|
||||
var _ANIMATION_FACTORY_ELEMENT_VAR = o.variable('element');
|
||||
var _ANIMATION_FACTORY_VIEW_VAR = o.variable('view');
|
||||
var _ANIMATION_FACTORY_RENDERER_VAR = _ANIMATION_FACTORY_VIEW_VAR.prop('renderer');
|
||||
var _ANIMATION_CURRENT_STATE_VAR = o.variable('currentState');
|
||||
var _ANIMATION_NEXT_STATE_VAR = o.variable('nextState');
|
||||
var _ANIMATION_PLAYER_VAR = o.variable('player');
|
||||
var _ANIMATION_START_STATE_STYLES_VAR = o.variable('startStateStyles');
|
||||
var _ANIMATION_END_STATE_STYLES_VAR = o.variable('endStateStyles');
|
||||
var _ANIMATION_COLLECTED_STYLES = o.variable('collectedStyles');
|
||||
var EMPTY_MAP = o.literalMap([]);
|
||||
|
||||
class _AnimationBuilder implements AnimationAstVisitor {
|
||||
private _fnVarName: string;
|
||||
private _statesMapVarName: string;
|
||||
private _statesMapVar: any;
|
||||
|
||||
constructor(public animationName: string, factoryName: string) {
|
||||
this._fnVarName = factoryName + '_factory';
|
||||
this._statesMapVarName = factoryName + '_states';
|
||||
this._statesMapVar = o.variable(this._statesMapVarName);
|
||||
}
|
||||
|
||||
visitAnimationStyles(ast: AnimationStylesAst,
|
||||
context: _AnimationBuilderContext): o.Expression {
|
||||
var stylesArr = [];
|
||||
if (context.isExpectingFirstStyleStep) {
|
||||
stylesArr.push(_ANIMATION_START_STATE_STYLES_VAR);
|
||||
context.isExpectingFirstStyleStep = false;
|
||||
}
|
||||
|
||||
ast.styles.forEach(entry => {
|
||||
stylesArr.push(o.literalMap(StringMapWrapper.keys(entry).map(key => [key, o.literal(entry[key])])));
|
||||
});
|
||||
|
||||
return o.importExpr(Identifiers.AnimationStyles).instantiate([
|
||||
o.importExpr(Identifiers.collectAndResolveStyles).callFn([
|
||||
_ANIMATION_COLLECTED_STYLES,
|
||||
o.literalArr(stylesArr)
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
visitAnimationKeyframe(ast: AnimationKeyframeAst,
|
||||
context: _AnimationBuilderContext): o.Expression {
|
||||
return o.importExpr(Identifiers.AnimationKeyframe).instantiate([
|
||||
o.literal(ast.offset),
|
||||
ast.styles.visit(this, context)
|
||||
]);
|
||||
}
|
||||
|
||||
visitAnimationStep(ast: AnimationStepAst, context: _AnimationBuilderContext): o.Expression {
|
||||
if (context.endStateAnimateStep === ast) {
|
||||
return this._visitEndStateAnimation(ast, context);
|
||||
}
|
||||
|
||||
var startingStylesExpr = ast.startingStyles.visit(this, context);
|
||||
var keyframeExpressions = ast.keyframes.map(keyframeEntry => keyframeEntry.visit(this, context));
|
||||
return this._callAnimateMethod(ast, startingStylesExpr, o.literalArr(keyframeExpressions));
|
||||
}
|
||||
|
||||
_visitEndStateAnimation(ast: AnimationStepAst,
|
||||
context: _AnimationBuilderContext): o.Expression {
|
||||
var startingStylesExpr = ast.startingStyles.visit(this, context);
|
||||
var keyframeExpressions = ast.keyframes.map(keyframe => keyframe.visit(this, context));
|
||||
var keyframesExpr = o.importExpr(Identifiers.balanceAnimationKeyframes).callFn([
|
||||
_ANIMATION_COLLECTED_STYLES,
|
||||
_ANIMATION_END_STATE_STYLES_VAR,
|
||||
o.literalArr(keyframeExpressions)
|
||||
]);
|
||||
|
||||
return this._callAnimateMethod(ast, startingStylesExpr, keyframesExpr);
|
||||
}
|
||||
|
||||
_callAnimateMethod(ast: AnimationStepAst, startingStylesExpr, keyframesExpr) {
|
||||
return _ANIMATION_FACTORY_RENDERER_VAR.callMethod('animate', [
|
||||
_ANIMATION_FACTORY_ELEMENT_VAR,
|
||||
startingStylesExpr,
|
||||
keyframesExpr,
|
||||
o.literal(ast.duration),
|
||||
o.literal(ast.delay),
|
||||
o.literal(ast.easing)
|
||||
]);
|
||||
}
|
||||
|
||||
visitAnimationSequence(ast: AnimationSequenceAst,
|
||||
context: _AnimationBuilderContext): o.Expression {
|
||||
var playerExprs = ast.steps.map(step => step.visit(this, context));
|
||||
return o.importExpr(Identifiers.AnimationSequencePlayer).instantiate([
|
||||
o.literalArr(playerExprs)]);
|
||||
}
|
||||
|
||||
visitAnimationGroup(ast: AnimationGroupAst, context: _AnimationBuilderContext): o.Expression {
|
||||
var playerExprs = ast.steps.map(step => step.visit(this, context));
|
||||
return o.importExpr(Identifiers.AnimationGroupPlayer).instantiate([
|
||||
o.literalArr(playerExprs)]);
|
||||
}
|
||||
|
||||
visitAnimationStateDeclaration(ast: AnimationStateDeclarationAst, context: _AnimationBuilderContext): void {
|
||||
var flatStyles: {[key: string]: string|number} = {};
|
||||
_getStylesArray(ast).forEach(entry => {
|
||||
StringMapWrapper.forEach(entry, (value, key) => {
|
||||
flatStyles[key] = value;
|
||||
});
|
||||
});
|
||||
context.stateMap.registerState(ast.stateName, flatStyles);
|
||||
}
|
||||
|
||||
visitAnimationStateTransition(ast: AnimationStateTransitionAst, context: _AnimationBuilderContext): any {
|
||||
var steps = ast.animation.steps;
|
||||
var lastStep = steps[steps.length - 1];
|
||||
if (_isEndStateAnimateStep(lastStep)) {
|
||||
context.endStateAnimateStep = <AnimationStepAst>lastStep;
|
||||
}
|
||||
|
||||
context.isExpectingFirstStyleStep = true;
|
||||
|
||||
var stateChangePreconditions = [];
|
||||
|
||||
ast.stateChanges.forEach(stateChange => {
|
||||
stateChangePreconditions.push(
|
||||
_compareToAnimationStateExpr(_ANIMATION_CURRENT_STATE_VAR, stateChange.fromState)
|
||||
.and(_compareToAnimationStateExpr(_ANIMATION_NEXT_STATE_VAR, stateChange.toState))
|
||||
);
|
||||
|
||||
if (stateChange.fromState != ANY_STATE) {
|
||||
context.stateMap.registerState(stateChange.fromState);
|
||||
}
|
||||
|
||||
if (stateChange.toState != ANY_STATE) {
|
||||
context.stateMap.registerState(stateChange.toState);
|
||||
}
|
||||
});
|
||||
|
||||
var animationPlayerExpr = ast.animation.visit(this, context);
|
||||
|
||||
var reducedStateChangesPrecondition = stateChangePreconditions.reduce((a,b) => a.or(b));
|
||||
var precondition = _ANIMATION_PLAYER_VAR.equals(o.NULL_EXPR).and(reducedStateChangesPrecondition);
|
||||
|
||||
return new o.IfStmt(precondition, [
|
||||
_ANIMATION_PLAYER_VAR.set(animationPlayerExpr).toStmt()
|
||||
]);
|
||||
}
|
||||
|
||||
visitAnimationEntry(ast: AnimationEntryAst, context: _AnimationBuilderContext): any {
|
||||
//visit each of the declarations first to build the context state map
|
||||
ast.stateDeclarations.forEach(def => def.visit(this, context));
|
||||
|
||||
var statements = [];
|
||||
statements.push(
|
||||
_ANIMATION_FACTORY_VIEW_VAR.callMethod('cancelActiveAnimation', [
|
||||
_ANIMATION_FACTORY_ELEMENT_VAR,
|
||||
o.literal(this.animationName),
|
||||
_ANIMATION_NEXT_STATE_VAR.equals(o.literal(EMPTY_STATE))
|
||||
]).toStmt());
|
||||
|
||||
statements.push(_ANIMATION_COLLECTED_STYLES.set(EMPTY_MAP).toDeclStmt());
|
||||
statements.push(_ANIMATION_PLAYER_VAR.set(o.NULL_EXPR).toDeclStmt());
|
||||
|
||||
statements.push(
|
||||
_ANIMATION_START_STATE_STYLES_VAR.set(
|
||||
this._statesMapVar.key(_ANIMATION_CURRENT_STATE_VAR)
|
||||
).toDeclStmt());
|
||||
|
||||
statements.push(
|
||||
new o.IfStmt(_ANIMATION_START_STATE_STYLES_VAR.equals(o.NULL_EXPR), [
|
||||
_ANIMATION_START_STATE_STYLES_VAR.set(EMPTY_MAP).toStmt()
|
||||
]));
|
||||
|
||||
statements.push(
|
||||
_ANIMATION_END_STATE_STYLES_VAR.set(
|
||||
this._statesMapVar.key(_ANIMATION_NEXT_STATE_VAR)
|
||||
).toDeclStmt());
|
||||
|
||||
statements.push(
|
||||
new o.IfStmt(_ANIMATION_END_STATE_STYLES_VAR.equals(o.NULL_EXPR), [
|
||||
_ANIMATION_END_STATE_STYLES_VAR.set(EMPTY_MAP).toStmt()
|
||||
]));
|
||||
|
||||
// before we start any animation we want to clear out the starting
|
||||
// styles from the element's style property (since they were placed
|
||||
// there at the end of the last animation
|
||||
statements.push(
|
||||
_ANIMATION_FACTORY_RENDERER_VAR.callMethod('setElementStyles', [
|
||||
_ANIMATION_FACTORY_ELEMENT_VAR,
|
||||
o.importExpr(Identifiers.clearAnimationStyles).callFn([_ANIMATION_START_STATE_STYLES_VAR])
|
||||
]).toStmt());
|
||||
|
||||
ast.stateTransitions.forEach(transAst => statements.push(transAst.visit(this, context)));
|
||||
|
||||
// this check ensures that the animation factory always returns a player
|
||||
// so that the onDone callback can be used for tracking
|
||||
statements.push(
|
||||
new o.IfStmt(_ANIMATION_PLAYER_VAR.equals(o.NULL_EXPR), [
|
||||
_ANIMATION_PLAYER_VAR.set(
|
||||
o.importExpr(Identifiers.NoOpAnimationPlayer).instantiate([])
|
||||
).toStmt()
|
||||
]));
|
||||
|
||||
// once complete we want to apply the styles on the element
|
||||
// since the destination state's values should persist once
|
||||
// the animation sequence has completed.
|
||||
statements.push(
|
||||
_ANIMATION_PLAYER_VAR.callMethod('onDone', [
|
||||
o.fn([], [
|
||||
_ANIMATION_FACTORY_RENDERER_VAR.callMethod('setElementStyles', [
|
||||
_ANIMATION_FACTORY_ELEMENT_VAR,
|
||||
o.importExpr(Identifiers.balanceAnimationStyles).callFn([
|
||||
_ANIMATION_START_STATE_STYLES_VAR,
|
||||
_ANIMATION_END_STATE_STYLES_VAR
|
||||
])
|
||||
]).toStmt()
|
||||
])
|
||||
]).toStmt());
|
||||
|
||||
statements.push(
|
||||
_ANIMATION_FACTORY_VIEW_VAR.callMethod('registerAndStartAnimation', [
|
||||
_ANIMATION_FACTORY_ELEMENT_VAR,
|
||||
o.literal(this.animationName),
|
||||
_ANIMATION_PLAYER_VAR
|
||||
]).toStmt());
|
||||
|
||||
return o.fn([
|
||||
new o.FnParam(_ANIMATION_FACTORY_VIEW_VAR.name, o.importType(Identifiers.AppView)),
|
||||
new o.FnParam(_ANIMATION_FACTORY_ELEMENT_VAR.name, o.DYNAMIC_TYPE),
|
||||
new o.FnParam(_ANIMATION_CURRENT_STATE_VAR.name, o.DYNAMIC_TYPE),
|
||||
new o.FnParam(_ANIMATION_NEXT_STATE_VAR.name, o.DYNAMIC_TYPE)
|
||||
], statements);
|
||||
}
|
||||
|
||||
build(ast: AnimationAst): CompiledAnimation {
|
||||
var context = new _AnimationBuilderContext();
|
||||
var fnStatement = ast.visit(this, context).toDeclStmt(this._fnVarName);
|
||||
var fnVariable = o.variable(this._fnVarName);
|
||||
|
||||
var lookupMap = [];
|
||||
StringMapWrapper.forEach(context.stateMap.states, (value, stateName) => {
|
||||
var variableValue = EMPTY_MAP;
|
||||
if (isPresent(value)) {
|
||||
let styleMap = [];
|
||||
StringMapWrapper.forEach(value, (value, key) => {
|
||||
styleMap.push([key, o.literal(value)]);
|
||||
});
|
||||
variableValue = o.literalMap(styleMap);
|
||||
}
|
||||
lookupMap.push([stateName, variableValue]);
|
||||
});
|
||||
|
||||
var compiledStatesMapExpr = this._statesMapVar.set(o.literalMap(lookupMap)).toDeclStmt();
|
||||
return new CompiledAnimation(this.animationName,
|
||||
compiledStatesMapExpr,
|
||||
this._statesMapVarName,
|
||||
fnStatement,
|
||||
fnVariable);
|
||||
}
|
||||
}
|
||||
|
||||
class _AnimationBuilderContext {
|
||||
stateMap = new _AnimationBuilderStateMap();
|
||||
endStateAnimateStep: AnimationStepAst = null;
|
||||
isExpectingFirstStyleStep = false;
|
||||
}
|
||||
|
||||
class _AnimationBuilderStateMap {
|
||||
private _states: {[key: string]: {[prop: string]: string|number}} = {};
|
||||
get states() { return this._states; }
|
||||
registerState(name: string, value: {[prop: string]: string|number} = null): void {
|
||||
var existingEntry = this._states[name];
|
||||
if (isBlank(existingEntry)) {
|
||||
this._states[name] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _compareToAnimationStateExpr(value: o.Expression, animationState: string): o.Expression {
|
||||
var emptyStateLiteral = o.literal(EMPTY_STATE);
|
||||
switch (animationState) {
|
||||
case EMPTY_STATE:
|
||||
return value.equals(emptyStateLiteral);
|
||||
|
||||
case ANY_STATE:
|
||||
return o.literal(true);
|
||||
|
||||
default:
|
||||
return value.equals(o.literal(animationState));
|
||||
}
|
||||
}
|
||||
|
||||
function _isEndStateAnimateStep(step: AnimationAst): boolean {
|
||||
// the final animation step is characterized by having only TWO
|
||||
// keyframe values and it must have zero styles for both keyframes
|
||||
if (step instanceof AnimationStepAst
|
||||
&& step.duration > 0
|
||||
&& step.keyframes.length == 2) {
|
||||
var styles1 = _getStylesArray(step.keyframes[0])[0];
|
||||
var styles2 = _getStylesArray(step.keyframes[1])[0];
|
||||
return StringMapWrapper.isEmpty(styles1) && StringMapWrapper.isEmpty(styles2);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function _getStylesArray(obj: any) {
|
||||
return obj.styles.styles;
|
||||
}
|
||||
561
modules/@angular/compiler/src/animation/animation_parser.ts
Normal file
561
modules/@angular/compiler/src/animation/animation_parser.ts
Normal file
@ -0,0 +1,561 @@
|
||||
import {ListWrapper, StringMapWrapper} from '../facade/collection';
|
||||
import {Math} from '../facade/math';
|
||||
import {ANY_STATE, EMPTY_STATE} from '../../core_private';
|
||||
import {
|
||||
IS_DART,
|
||||
RegExpWrapper,
|
||||
isArray,
|
||||
isPresent,
|
||||
isBlank,
|
||||
isNumber,
|
||||
isString,
|
||||
isStringMap,
|
||||
NumberWrapper
|
||||
} from '../facade/lang';
|
||||
|
||||
import {FILL_STYLE_FLAG} from '../../core_private';
|
||||
|
||||
import {
|
||||
CompileAnimationEntryMetadata,
|
||||
CompileAnimationStateMetadata,
|
||||
CompileAnimationStateDeclarationMetadata,
|
||||
CompileAnimationStateTransitionMetadata,
|
||||
CompileAnimationMetadata,
|
||||
CompileAnimationWithStepsMetadata,
|
||||
CompileAnimationStyleMetadata,
|
||||
CompileAnimationAnimateMetadata,
|
||||
CompileAnimationGroupMetadata,
|
||||
CompileAnimationSequenceMetadata,
|
||||
CompileAnimationKeyframesSequenceMetadata
|
||||
} from '../compile_metadata';
|
||||
|
||||
import {
|
||||
AnimationAst,
|
||||
AnimationEntryAst,
|
||||
AnimationStateAst,
|
||||
AnimationStateTransitionAst,
|
||||
AnimationStateDeclarationAst,
|
||||
AnimationKeyframeAst,
|
||||
AnimationStylesAst,
|
||||
AnimationWithStepsAst,
|
||||
AnimationSequenceAst,
|
||||
AnimationGroupAst,
|
||||
AnimationStepAst,
|
||||
AnimationStateTransitionExpression
|
||||
} from './animation_ast';
|
||||
|
||||
import {StylesCollection} from './styles_collection';
|
||||
import {ParseError} from '../parse_util';
|
||||
|
||||
const _INITIAL_KEYFRAME = 0;
|
||||
const _TERMINAL_KEYFRAME = 1;
|
||||
const _ONE_SECOND = 1000;
|
||||
|
||||
export class AnimationParseError extends ParseError {
|
||||
constructor(message) { super(null, message); }
|
||||
toString(): string { return `${this.msg}`; }
|
||||
}
|
||||
|
||||
export class ParsedAnimationResult {
|
||||
constructor(public ast: AnimationEntryAst, public errors: AnimationParseError[]) {}
|
||||
}
|
||||
|
||||
export function parseAnimationEntry(entry: CompileAnimationEntryMetadata): ParsedAnimationResult {
|
||||
var errors: AnimationParseError[] = [];
|
||||
var stateStyles: {[key: string]: AnimationStylesAst} = {};
|
||||
var transitions: CompileAnimationStateTransitionMetadata[] = [];
|
||||
|
||||
var stateDeclarationAsts = [];
|
||||
entry.definitions.forEach(def => {
|
||||
if (def instanceof CompileAnimationStateDeclarationMetadata) {
|
||||
_parseAnimationDeclarationStates(def, errors).forEach(ast => {
|
||||
stateDeclarationAsts.push(ast);
|
||||
stateStyles[ast.stateName] = ast.styles;
|
||||
});
|
||||
} else {
|
||||
transitions.push(<CompileAnimationStateTransitionMetadata>def);
|
||||
}
|
||||
});
|
||||
|
||||
var stateTransitionAsts = transitions.map(transDef =>
|
||||
_parseAnimationStateTransition(transDef, stateStyles, errors));
|
||||
|
||||
var ast = new AnimationEntryAst(entry.name, stateDeclarationAsts, stateTransitionAsts);
|
||||
return new ParsedAnimationResult(ast, errors);
|
||||
}
|
||||
|
||||
function _parseAnimationDeclarationStates(stateMetadata: CompileAnimationStateDeclarationMetadata, errors: AnimationParseError[]): AnimationStateDeclarationAst[] {
|
||||
var styleValues: {[key: string]: string|number}[] = [];
|
||||
stateMetadata.styles.styles.forEach(stylesEntry => {
|
||||
// TODO (matsko): change this when we get CSS class integration support
|
||||
if (isStringMap(stylesEntry)) {
|
||||
styleValues.push(<{[key: string]: string|number}>stylesEntry);
|
||||
} else {
|
||||
errors.push(new AnimationParseError(`State based animations cannot contain references to other states`));
|
||||
}
|
||||
});
|
||||
var defStyles = new AnimationStylesAst(styleValues);
|
||||
|
||||
var states = stateMetadata.stateNameExpr.split(/\s*,\s*/);
|
||||
return states.map(state => new AnimationStateDeclarationAst(state, defStyles));
|
||||
}
|
||||
|
||||
function _parseAnimationStateTransition(transitionStateMetadata: CompileAnimationStateTransitionMetadata,
|
||||
stateStyles: {[key: string]: AnimationStylesAst},
|
||||
errors: AnimationParseError[]): AnimationStateTransitionAst {
|
||||
var styles = new StylesCollection();
|
||||
var transitionExprs = [];
|
||||
var transitionStates = transitionStateMetadata.stateChangeExpr.split(/\s*,\s*/);
|
||||
transitionStates.forEach(expr => {
|
||||
_parseAnimationTransitionExpr(expr, errors).forEach(transExpr => {
|
||||
transitionExprs.push(transExpr);
|
||||
});
|
||||
});
|
||||
var entry = _normalizeAnimationEntry(transitionStateMetadata.animation);
|
||||
var animation = _normalizeStyleSteps(entry, stateStyles, errors);
|
||||
var animationAst = _parseTransitionAnimation(animation, 0, styles, stateStyles, errors);
|
||||
if (errors.length == 0) {
|
||||
_fillAnimationAstStartingKeyframes(animationAst, styles, errors);
|
||||
}
|
||||
|
||||
var sequenceAst = (animationAst instanceof AnimationSequenceAst)
|
||||
? <AnimationSequenceAst>animationAst
|
||||
: new AnimationSequenceAst([animationAst]);
|
||||
|
||||
return new AnimationStateTransitionAst(transitionExprs, sequenceAst);
|
||||
}
|
||||
|
||||
function _parseAnimationTransitionExpr(eventStr: string, errors: AnimationParseError[]): AnimationStateTransitionExpression[] {
|
||||
var expressions = [];
|
||||
var match = eventStr.match(/^(\*|[-\w]+)\s*(<?[=-]>)\s*(\*|[-\w]+)$/);
|
||||
if (!isPresent(match) || match.length < 4) {
|
||||
errors.push(new AnimationParseError(`the provided ${eventStr} is not of a supported format`));
|
||||
return expressions;
|
||||
}
|
||||
|
||||
var fromState = match[1];
|
||||
var separator = match[2];
|
||||
var toState = match[3];
|
||||
expressions.push(
|
||||
new AnimationStateTransitionExpression(fromState, toState));
|
||||
|
||||
var isFullAnyStateExpr = fromState == ANY_STATE && toState == ANY_STATE;
|
||||
if (separator[0] == '<' && !isFullAnyStateExpr) {
|
||||
expressions.push(
|
||||
new AnimationStateTransitionExpression(toState, fromState));
|
||||
}
|
||||
return expressions;
|
||||
}
|
||||
|
||||
function _fetchSylesFromState(stateName: string,
|
||||
stateStyles: {[key: string]: AnimationStylesAst}): CompileAnimationStyleMetadata {
|
||||
var entry = stateStyles[stateName];
|
||||
if (isPresent(entry)) {
|
||||
var styles = <{[key: string]: string | number}[]>entry.styles;
|
||||
return new CompileAnimationStyleMetadata(0, styles);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function _normalizeAnimationEntry(entry: CompileAnimationMetadata | CompileAnimationMetadata[])
|
||||
:CompileAnimationMetadata {
|
||||
return isArray(entry)
|
||||
? new CompileAnimationSequenceMetadata(<CompileAnimationMetadata[]>entry)
|
||||
: <CompileAnimationMetadata>entry;
|
||||
}
|
||||
|
||||
function _normalizeStyleMetadata(entry: CompileAnimationStyleMetadata,
|
||||
stateStyles: {[key: string]: AnimationStylesAst},
|
||||
errors: AnimationParseError[]): Array<{[key: string]: string|number}> {
|
||||
var normalizedStyles = [];
|
||||
entry.styles.forEach(styleEntry => {
|
||||
if (isString(styleEntry)) {
|
||||
ListWrapper.addAll(normalizedStyles, _resolveStylesFromState(<string>styleEntry, stateStyles, errors));
|
||||
} else {
|
||||
normalizedStyles.push(<{[key: string]: string | number}>styleEntry);
|
||||
}
|
||||
});
|
||||
return normalizedStyles;
|
||||
}
|
||||
|
||||
function _normalizeStyleSteps(entry: CompileAnimationMetadata,
|
||||
stateStyles: {[key: string]: AnimationStylesAst},
|
||||
errors: AnimationParseError[]): CompileAnimationMetadata {
|
||||
var steps = _normalizeStyleStepEntry(entry, stateStyles, errors);
|
||||
return new CompileAnimationSequenceMetadata(steps);
|
||||
}
|
||||
|
||||
function _mergeAnimationStyles(stylesList: any[], newItem: {[key: string]: string|number}|string) {
|
||||
if (isStringMap(newItem) && stylesList.length > 0) {
|
||||
var lastIndex = stylesList.length - 1;
|
||||
var lastItem = stylesList[lastIndex];
|
||||
if (isStringMap(lastItem)) {
|
||||
stylesList[lastIndex] = StringMapWrapper.merge(
|
||||
<{[key: string]: string|number}>lastItem,
|
||||
<{[key: string]: string|number}>newItem
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
stylesList.push(newItem);
|
||||
}
|
||||
|
||||
function _normalizeStyleStepEntry(entry: CompileAnimationMetadata,
|
||||
stateStyles: {[key: string]: AnimationStylesAst},
|
||||
errors: AnimationParseError[]): CompileAnimationMetadata[] {
|
||||
var steps: CompileAnimationMetadata[];
|
||||
if (entry instanceof CompileAnimationWithStepsMetadata) {
|
||||
steps = entry.steps;
|
||||
} else {
|
||||
return [entry];
|
||||
}
|
||||
|
||||
var newSteps: CompileAnimationMetadata[] = [];
|
||||
var combinedStyles: {[key: string]: string | number}[];
|
||||
steps.forEach(step => {
|
||||
if (step instanceof CompileAnimationStyleMetadata) {
|
||||
// this occurs when a style step is followed by a previous style step
|
||||
// or when the first style step is run. We want to concatenate all subsequent
|
||||
// style steps together into a single style step such that we have the correct
|
||||
// starting keyframe data to pass into the animation player.
|
||||
if (!isPresent(combinedStyles)) {
|
||||
combinedStyles = [];
|
||||
}
|
||||
_normalizeStyleMetadata(<CompileAnimationStyleMetadata>step, stateStyles, errors).forEach(entry => {
|
||||
_mergeAnimationStyles(combinedStyles, entry);
|
||||
});
|
||||
} else {
|
||||
// it is important that we create a metadata entry of the combined styles
|
||||
// before we go on an process the animate, sequence or group metadata steps.
|
||||
// This will ensure that the AST will have the previous styles painted on
|
||||
// screen before any further animations that use the styles take place.
|
||||
if (isPresent(combinedStyles)) {
|
||||
newSteps.push(new CompileAnimationStyleMetadata(0, combinedStyles));
|
||||
combinedStyles = null;
|
||||
}
|
||||
|
||||
if (step instanceof CompileAnimationAnimateMetadata) {
|
||||
// we do not recurse into CompileAnimationAnimateMetadata since
|
||||
// those style steps are not going to be squashed
|
||||
var animateStyleValue = (<CompileAnimationAnimateMetadata>step).styles;
|
||||
if (animateStyleValue instanceof CompileAnimationStyleMetadata) {
|
||||
animateStyleValue.styles = _normalizeStyleMetadata(animateStyleValue, stateStyles, errors);
|
||||
} else if (animateStyleValue instanceof CompileAnimationKeyframesSequenceMetadata) {
|
||||
animateStyleValue.steps.forEach(step => {
|
||||
step.styles = _normalizeStyleMetadata(step, stateStyles, errors);
|
||||
});
|
||||
}
|
||||
} else if (step instanceof CompileAnimationWithStepsMetadata) {
|
||||
let innerSteps = _normalizeStyleStepEntry(step, stateStyles, errors);
|
||||
step = step instanceof CompileAnimationGroupMetadata
|
||||
? new CompileAnimationGroupMetadata(innerSteps)
|
||||
: new CompileAnimationSequenceMetadata(innerSteps);
|
||||
}
|
||||
|
||||
newSteps.push(step);
|
||||
}
|
||||
});
|
||||
|
||||
// this happens when only styles were animated within the sequence
|
||||
if (isPresent(combinedStyles)) {
|
||||
newSteps.push(new CompileAnimationStyleMetadata(0, combinedStyles));
|
||||
}
|
||||
|
||||
return newSteps;
|
||||
}
|
||||
|
||||
|
||||
function _resolveStylesFromState(stateName: string, stateStyles: {[key: string]: AnimationStylesAst}, errors: AnimationParseError[]) {
|
||||
var styles: {[key: string]: string|number}[] = [];
|
||||
if (stateName[0] != ':') {
|
||||
errors.push(new AnimationParseError(`Animation states via styles must be prefixed with a ":"`));
|
||||
} else {
|
||||
var normalizedStateName = stateName.substring(1);
|
||||
var value = stateStyles[normalizedStateName];
|
||||
if (!isPresent(value)) {
|
||||
errors.push(new AnimationParseError(`Unable to apply styles due to missing a state: "${normalizedStateName}"`));
|
||||
} else {
|
||||
value.styles.forEach(stylesEntry => {
|
||||
if (isStringMap(stylesEntry)) {
|
||||
styles.push(<{[key: string]: string | number}>stylesEntry);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
|
||||
class _AnimationTimings {
|
||||
constructor(public duration: number, public delay: number, public easing: string) {}
|
||||
}
|
||||
|
||||
function _parseAnimationKeyframes(keyframeSequence: CompileAnimationKeyframesSequenceMetadata,
|
||||
currentTime: number,
|
||||
collectedStyles: StylesCollection,
|
||||
stateStyles: {[key: string]: AnimationStylesAst},
|
||||
errors: AnimationParseError[]): AnimationKeyframeAst[] {
|
||||
var totalEntries = keyframeSequence.steps.length;
|
||||
var totalOffsets = 0;
|
||||
keyframeSequence.steps.forEach(step => totalOffsets += (isPresent(step.offset) ? 1 : 0));
|
||||
|
||||
if (totalOffsets > 0 && totalOffsets < totalEntries) {
|
||||
errors.push(new AnimationParseError(`Not all style() entries contain an offset for the provided keyframe()`));
|
||||
totalOffsets = totalEntries;
|
||||
}
|
||||
|
||||
var limit = totalEntries - 1;
|
||||
var margin = totalOffsets == 0 ? (1 / limit) : 0;
|
||||
var rawKeyframes = [];
|
||||
var index = 0;
|
||||
var doSortKeyframes = false;
|
||||
var lastOffset = 0;
|
||||
keyframeSequence.steps.forEach(styleMetadata => {
|
||||
var offset = styleMetadata.offset;
|
||||
var keyframeStyles: {[key: string]: string|number} = {};
|
||||
styleMetadata.styles.forEach(entry => {
|
||||
StringMapWrapper.forEach(<{[key: string]: string|number}>entry, (value, prop) => {
|
||||
if (prop != 'offset') {
|
||||
keyframeStyles[prop] = value;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (isPresent(offset)) {
|
||||
doSortKeyframes = doSortKeyframes || (offset < lastOffset);
|
||||
} else {
|
||||
offset = index == limit ? _TERMINAL_KEYFRAME : (margin * index);
|
||||
}
|
||||
|
||||
rawKeyframes.push([offset, keyframeStyles]);
|
||||
lastOffset = offset;
|
||||
index++;
|
||||
});
|
||||
|
||||
if (doSortKeyframes) {
|
||||
ListWrapper.sort(rawKeyframes, (a,b) => a[0] <= b[0] ? -1 : 1);
|
||||
}
|
||||
|
||||
var i;
|
||||
var firstKeyframe = rawKeyframes[0];
|
||||
if (firstKeyframe[0] != _INITIAL_KEYFRAME) {
|
||||
ListWrapper.insert(rawKeyframes, 0, firstKeyframe = [_INITIAL_KEYFRAME, {}]);
|
||||
}
|
||||
|
||||
var firstKeyframeStyles = firstKeyframe[1];
|
||||
var limit = rawKeyframes.length - 1;
|
||||
var lastKeyframe = rawKeyframes[limit];
|
||||
if (lastKeyframe[0] != _TERMINAL_KEYFRAME) {
|
||||
rawKeyframes.push(lastKeyframe = [_TERMINAL_KEYFRAME, {}]);
|
||||
limit++;
|
||||
}
|
||||
|
||||
var lastKeyframeStyles = lastKeyframe[1];
|
||||
for (i = 1; i <= limit; i++) {
|
||||
let entry = rawKeyframes[i];
|
||||
let styles = entry[1];
|
||||
|
||||
StringMapWrapper.forEach(styles, (value, prop) => {
|
||||
if (!isPresent(firstKeyframeStyles[prop])) {
|
||||
firstKeyframeStyles[prop] = FILL_STYLE_FLAG;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
for (i = limit - 1; i >= 0; i--) {
|
||||
let entry = rawKeyframes[i];
|
||||
let styles = entry[1];
|
||||
|
||||
StringMapWrapper.forEach(styles, (value, prop) => {
|
||||
if (!isPresent(lastKeyframeStyles[prop])) {
|
||||
lastKeyframeStyles[prop] = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return rawKeyframes.map(entry => new AnimationKeyframeAst(entry[0], new AnimationStylesAst([entry[1]])));
|
||||
}
|
||||
|
||||
function _parseTransitionAnimation(entry: CompileAnimationMetadata,
|
||||
currentTime: number,
|
||||
collectedStyles: StylesCollection,
|
||||
stateStyles: {[key: string]: AnimationStylesAst},
|
||||
errors: AnimationParseError[]): AnimationAst {
|
||||
var ast;
|
||||
var playTime = 0;
|
||||
var startingTime = currentTime;
|
||||
if (entry instanceof CompileAnimationWithStepsMetadata) {
|
||||
var maxDuration = 0;
|
||||
var steps = [];
|
||||
var isGroup = entry instanceof CompileAnimationGroupMetadata;
|
||||
var previousStyles;
|
||||
entry.steps.forEach(entry => {
|
||||
// these will get picked up by the next step...
|
||||
var time = isGroup ? startingTime : currentTime;
|
||||
if (entry instanceof CompileAnimationStyleMetadata) {
|
||||
entry.styles.forEach(stylesEntry => {
|
||||
// by this point we know that we only have stringmap values
|
||||
var map = <{[key: string]: string|number}>stylesEntry;
|
||||
StringMapWrapper.forEach(map, (value, prop) => {
|
||||
collectedStyles.insertAtTime(prop, time, value);
|
||||
});
|
||||
});
|
||||
previousStyles = entry.styles;
|
||||
return;
|
||||
}
|
||||
|
||||
var innerAst = _parseTransitionAnimation(entry, time, collectedStyles, stateStyles, errors);
|
||||
if (isPresent(previousStyles)) {
|
||||
if (entry instanceof CompileAnimationWithStepsMetadata) {
|
||||
let startingStyles = new AnimationStylesAst(previousStyles);
|
||||
steps.push(new AnimationStepAst(startingStyles, [], 0, 0, ''));
|
||||
} else {
|
||||
var innerStep = <AnimationStepAst>innerAst;
|
||||
ListWrapper.addAll(innerStep.startingStyles.styles, previousStyles);
|
||||
}
|
||||
previousStyles = null;
|
||||
}
|
||||
|
||||
var astDuration = innerAst.playTime;
|
||||
currentTime += astDuration;
|
||||
playTime += astDuration;
|
||||
maxDuration = Math.max(astDuration, maxDuration);
|
||||
steps.push(innerAst);
|
||||
});
|
||||
if (isPresent(previousStyles)) {
|
||||
let startingStyles = new AnimationStylesAst(previousStyles);
|
||||
steps.push(new AnimationStepAst(startingStyles, [], 0, 0, ''));
|
||||
}
|
||||
if (isGroup) {
|
||||
ast = new AnimationGroupAst(steps);
|
||||
playTime = maxDuration;
|
||||
currentTime = startingTime + playTime;
|
||||
} else {
|
||||
ast = new AnimationSequenceAst(steps);
|
||||
}
|
||||
} else if (entry instanceof CompileAnimationAnimateMetadata) {
|
||||
var timings = _parseTimeExpression(entry.timings, errors);
|
||||
var styles = entry.styles;
|
||||
|
||||
var keyframes;
|
||||
if (styles instanceof CompileAnimationKeyframesSequenceMetadata) {
|
||||
keyframes = _parseAnimationKeyframes(styles, currentTime, collectedStyles, stateStyles, errors);
|
||||
} else {
|
||||
let styleData = <CompileAnimationStyleMetadata>styles;
|
||||
let offset = _TERMINAL_KEYFRAME;
|
||||
let styleAst = new AnimationStylesAst(<{[key: string]: string|number}[]>styleData.styles);
|
||||
var keyframe = new AnimationKeyframeAst(offset, styleAst);
|
||||
keyframes = [keyframe];
|
||||
}
|
||||
|
||||
ast = new AnimationStepAst(new AnimationStylesAst([]), keyframes, timings.duration, timings.delay, timings.easing);
|
||||
playTime = timings.duration + timings.delay;
|
||||
currentTime += playTime;
|
||||
|
||||
keyframes.forEach(keyframe =>
|
||||
keyframe.styles.styles.forEach(entry =>
|
||||
StringMapWrapper.forEach(entry, (value, prop) =>
|
||||
collectedStyles.insertAtTime(prop, currentTime, value))
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// if the code reaches this stage then an error
|
||||
// has already been populated within the _normalizeStyleSteps()
|
||||
// operation...
|
||||
ast = new AnimationStepAst(null, [], 0, 0, '');
|
||||
}
|
||||
|
||||
ast.playTime = playTime;
|
||||
ast.startTime = startingTime;
|
||||
return ast;
|
||||
}
|
||||
|
||||
function _fillAnimationAstStartingKeyframes(ast: AnimationAst, collectedStyles: StylesCollection,
|
||||
errors: AnimationParseError[]): void {
|
||||
// steps that only contain style will not be filled
|
||||
if ((ast instanceof AnimationStepAst) && ast.keyframes.length > 0) {
|
||||
var keyframes = ast.keyframes;
|
||||
if (keyframes.length == 1) {
|
||||
var endKeyframe = keyframes[0];
|
||||
var startKeyframe = _createStartKeyframeFromEndKeyframe(endKeyframe, ast.startTime,
|
||||
ast.playTime, collectedStyles, errors);
|
||||
ast.keyframes = [startKeyframe, endKeyframe];
|
||||
}
|
||||
} else if (ast instanceof AnimationWithStepsAst) {
|
||||
ast.steps.forEach(entry => _fillAnimationAstStartingKeyframes(entry, collectedStyles, errors));
|
||||
}
|
||||
}
|
||||
|
||||
function _parseTimeExpression(exp: string | number,
|
||||
errors: AnimationParseError[]): _AnimationTimings {
|
||||
var regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?/gi;
|
||||
var duration: number;
|
||||
var delay: number = 0;
|
||||
var easing: string = null;
|
||||
if (isString(exp)) {
|
||||
var matches = RegExpWrapper.firstMatch(regex, <string>exp);
|
||||
if (!isPresent(matches)) {
|
||||
errors.push(new AnimationParseError(`The provided timing value "${exp}" is invalid.`));
|
||||
return new _AnimationTimings(0, 0, null);
|
||||
}
|
||||
|
||||
var durationMatch = NumberWrapper.parseFloat(matches[1]);
|
||||
var durationUnit = matches[2];
|
||||
if (durationUnit == 's') {
|
||||
durationMatch *= _ONE_SECOND;
|
||||
}
|
||||
duration = Math.floor(durationMatch);
|
||||
|
||||
var delayMatch = matches[3];
|
||||
var delayUnit = matches[4];
|
||||
if (isPresent(delayMatch)) {
|
||||
var delayVal: number = NumberWrapper.parseFloat(delayMatch);
|
||||
if (isPresent(delayUnit) && delayUnit == 's') {
|
||||
delayVal *= _ONE_SECOND;
|
||||
}
|
||||
delay = Math.floor(delayVal);
|
||||
}
|
||||
|
||||
var easingVal = matches[5];
|
||||
if (!isBlank(easingVal)) {
|
||||
easing = easingVal;
|
||||
}
|
||||
} else {
|
||||
duration = <number>exp;
|
||||
}
|
||||
|
||||
return new _AnimationTimings(duration, delay, easing);
|
||||
}
|
||||
|
||||
function _createStartKeyframeFromEndKeyframe(endKeyframe: AnimationKeyframeAst, startTime: number,
|
||||
duration: number, collectedStyles: StylesCollection,
|
||||
errors: AnimationParseError[]): AnimationKeyframeAst {
|
||||
var values: {[key: string]: string | number} = {};
|
||||
var endTime = startTime + duration;
|
||||
endKeyframe.styles.styles.forEach((styleData: {[key: string]: string|number}) => {
|
||||
StringMapWrapper.forEach(styleData, (val, prop) => {
|
||||
if (prop == 'offset') return;
|
||||
|
||||
var resultIndex = collectedStyles.indexOfAtOrBeforeTime(prop, startTime);
|
||||
var resultEntry, nextEntry, value;
|
||||
if (isPresent(resultIndex)) {
|
||||
resultEntry = collectedStyles.getByIndex(prop, resultIndex);
|
||||
value = resultEntry.value;
|
||||
nextEntry = collectedStyles.getByIndex(prop, resultIndex + 1);
|
||||
} else {
|
||||
// this is a flag that the runtime code uses to pass
|
||||
// in a value either from the state declaration styles
|
||||
// or using the AUTO_STYLE value (e.g. getComputedStyle)
|
||||
value = FILL_STYLE_FLAG;
|
||||
}
|
||||
|
||||
if (isPresent(nextEntry) && !nextEntry.matches(endTime, val)) {
|
||||
errors.push(new AnimationParseError(
|
||||
`The animated CSS property "${prop}" unexpectedly changes between steps "${resultEntry.time}ms" and "${endTime}ms" at "${nextEntry.time}ms"`));
|
||||
}
|
||||
|
||||
values[prop] = value;
|
||||
});
|
||||
});
|
||||
|
||||
return new AnimationKeyframeAst(_INITIAL_KEYFRAME, new AnimationStylesAst([values]));
|
||||
}
|
||||
52
modules/@angular/compiler/src/animation/styles_collection.ts
Normal file
52
modules/@angular/compiler/src/animation/styles_collection.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import {isPresent} from '../facade/lang';
|
||||
import {ListWrapper} from '../facade/collection';
|
||||
|
||||
export class StylesCollectionEntry {
|
||||
constructor(public time: number, public value: string | number) {}
|
||||
|
||||
matches(time: number, value: string | number): boolean {
|
||||
return time == this.time && value == this.value;
|
||||
}
|
||||
}
|
||||
|
||||
export class StylesCollection {
|
||||
styles: {[key: string]: StylesCollectionEntry[]} = {};
|
||||
|
||||
insertAtTime(property: string, time: number, value: string | number) {
|
||||
var tuple = new StylesCollectionEntry(time, value);
|
||||
var entries = this.styles[property];
|
||||
if (!isPresent(entries)) {
|
||||
entries = this.styles[property] = [];
|
||||
}
|
||||
|
||||
// insert this at the right stop in the array
|
||||
// this way we can keep it sorted
|
||||
var insertionIndex = 0;
|
||||
for (var i = entries.length - 1; i >= 0; i--) {
|
||||
if (entries[i].time <= time) {
|
||||
insertionIndex = i + 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ListWrapper.insert(entries, insertionIndex, tuple);
|
||||
}
|
||||
|
||||
getByIndex(property: string, index: number): StylesCollectionEntry {
|
||||
var items = this.styles[property];
|
||||
if (isPresent(items)) {
|
||||
return index >= items.length ? null : items[index];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
indexOfAtOrBeforeTime(property: string, time: number): number {
|
||||
var entries = this.styles[property];
|
||||
if (isPresent(entries)) {
|
||||
for (var i = entries.length - 1; i >= 0; i--) {
|
||||
if (entries[i].time <= time) return i;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user