fix(animations): support persisting dynamic styles within animation states (#18468)

Closes #18423
Closes #17505

Author: matsko

packages/animations/browser/src/dsl/animation_ast.ts

@@ -82,6 +82,7 @@ export class AnimateAst extends Ast {
 
 export class StyleAst extends Ast {
   public isEmptyStep = false;
+  public containsDynamicStyles = false;
 
   constructor(
       public styles: (ɵStyleData|string)[], public easing: string|null,

packages/animations/browser/src/dsl/animation_ast_builder.ts

@@ -8,7 +8,7 @@
 import {AUTO_STYLE, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnimateMetadata, AnimationAnimateRefMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationOptions, AnimationQueryMetadata, AnimationQueryOptions, AnimationReferenceMetadata, AnimationSequenceMetadata, AnimationStaggerMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, AnimationTriggerMetadata, style, ɵStyleData} from '@angular/animations';
 
 import {getOrSetAsInMap} from '../render/shared';
-import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, copyObj, normalizeAnimationEntry, resolveTiming, validateStyleParams} from '../util';
+import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, SUBSTITUTION_EXPR_START, copyObj, extractStyleParams, iteratorToArray, normalizeAnimationEntry, resolveTiming, validateStyleParams} from '../util';
 
 import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
 import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
@@ -112,7 +112,35 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
   }
 
   visitState(metadata: AnimationStateMetadata, context: AnimationAstBuilderContext): StateAst {
-    return new StateAst(metadata.name, this.visitStyle(metadata.styles, context));
+    const styleAst = this.visitStyle(metadata.styles, context);
+    const astParams = (metadata.options && metadata.options.params) || null;
+    if (styleAst.containsDynamicStyles) {
+      const missingSubs = new Set<string>();
+      const params = astParams || {};
+      styleAst.styles.forEach(value => {
+        if (isObject(value)) {
+          const stylesObj = value as any;
+          Object.keys(stylesObj).forEach(prop => {
+            extractStyleParams(stylesObj[prop]).forEach(sub => {
+              if (!params.hasOwnProperty(sub)) {
+                missingSubs.add(sub);
+              }
+            });
+          });
+        }
+      });
+      if (missingSubs.size) {
+        const missingSubsArr = iteratorToArray(missingSubs.values());
+        context.errors.push(
+            `state("${metadata.name}", ...) must define default values for all the following style substitutions: ${missingSubsArr.join(', ')}`);
+      }
+    }
+
+    const stateAst = new StateAst(metadata.name, styleAst);
+    if (astParams) {
+      stateAst.options = {params: astParams};
+    }
+    return stateAst;
   }
 
   visitTransition(metadata: AnimationTransitionMetadata, context: AnimationAstBuilderContext):
@@ -206,6 +234,7 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
       styles.push(metadata.styles);
     }
 
+    let containsDynamicStyles = false;
     let collectedEasing: string|null = null;
     styles.forEach(styleData => {
       if (isObject(styleData)) {
@@ -215,9 +244,21 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
           collectedEasing = easing as string;
           delete styleMap['easing'];
         }
+        if (!containsDynamicStyles) {
+          for (let prop in styleMap) {
+            const value = styleMap[prop];
+            if (value.toString().indexOf(SUBSTITUTION_EXPR_START) >= 0) {
+              containsDynamicStyles = true;
+              break;
+            }
+          }
+        }
       }
     });
-    return new StyleAst(styles, collectedEasing, metadata.offset);
+
+    const ast = new StyleAst(styles, collectedEasing, metadata.offset);
+    ast.containsDynamicStyles = containsDynamicStyles;
+    return ast;
   }
 
   private _validateStyleAst(ast: StyleAst, context: AnimationAstBuilderContext): void {

packages/animations/browser/src/dsl/animation_transition_factory.ts

@@ -9,38 +9,51 @@ import {AnimationOptions, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../render/animation_driver';
 import {getOrSetAsInMap} from '../render/shared';
-import {iteratorToArray, mergeAnimationOptions} from '../util';
+import {copyObj, interpolateParams, iteratorToArray, mergeAnimationOptions} from '../util';
 
-import {TransitionAst} from './animation_ast';
+import {StyleAst, TransitionAst} from './animation_ast';
 import {buildAnimationTimelines} from './animation_timeline_builder';
 import {TransitionMatcherFn} from './animation_transition_expr';
 import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
 import {ElementInstructionMap} from './element_instruction_map';
 
+const EMPTY_OBJECT = {};
+
 export class AnimationTransitionFactory {
   constructor(
       private _triggerName: string, public ast: TransitionAst,
-      private _stateStyles: {[stateName: string]: ɵStyleData}) {}
+      private _stateStyles: {[stateName: string]: AnimationStateStyles}) {}
 
   match(currentState: any, nextState: any): boolean {
     return oneOrMoreTransitionsMatch(this.ast.matchers, currentState, nextState);
   }
 
+  buildStyles(stateName: string, params: {[key: string]: any}, errors: any[]) {
+    const backupStateStyler = this._stateStyles['*'];
+    const stateStyler = this._stateStyles[stateName];
+    const backupStyles = backupStateStyler ? backupStateStyler.buildStyles(params, errors) : {};
+    return stateStyler ? stateStyler.buildStyles(params, errors) : backupStyles;
+  }
+
   build(
       driver: AnimationDriver, element: any, currentState: any, nextState: any,
-      options?: AnimationOptions,
+      currentOptions?: AnimationOptions, nextOptions?: AnimationOptions,
       subInstructions?: ElementInstructionMap): AnimationTransitionInstruction {
-    const animationOptions = mergeAnimationOptions(this.ast.options || {}, options || {});
+    const errors: any[] = [];
+
+    const transitionAnimationParams = this.ast.options && this.ast.options.params || EMPTY_OBJECT;
+    const currentAnimationParams = currentOptions && currentOptions.params || EMPTY_OBJECT;
+    const currentStateStyles = this.buildStyles(currentState, currentAnimationParams, errors);
+    const nextAnimationParams = nextOptions && nextOptions.params || EMPTY_OBJECT;
+    const nextStateStyles = this.buildStyles(nextState, nextAnimationParams, errors);
 
-    const backupStateStyles = this._stateStyles['*'] || {};
-    const currentStateStyles = this._stateStyles[currentState] || backupStateStyles;
-    const nextStateStyles = this._stateStyles[nextState] || backupStateStyles;
     const queriedElements = new Set<any>();
     const preStyleMap = new Map<any, {[prop: string]: boolean}>();
     const postStyleMap = new Map<any, {[prop: string]: boolean}>();
     const isRemoval = nextState === 'void';
 
-    const errors: any[] = [];
+    const animationOptions = {params: {...transitionAnimationParams, ...nextAnimationParams}};
+
     const timelines = buildAnimationTimelines(
         driver, element, this.ast.animation, currentStateStyles, nextStateStyles, animationOptions,
         subInstructions, errors);
@@ -75,3 +88,31 @@ function oneOrMoreTransitionsMatch(
     matchFns: TransitionMatcherFn[], currentState: any, nextState: any): boolean {
   return matchFns.some(fn => fn(currentState, nextState));
 }
+
+export class AnimationStateStyles {
+  constructor(private styles: StyleAst, private defaultParams: {[key: string]: any}) {}
+
+  buildStyles(params: {[key: string]: any}, errors: string[]): ɵStyleData {
+    const finalStyles: ɵStyleData = {};
+    const combinedParams = copyObj(this.defaultParams);
+    Object.keys(params).forEach(key => {
+      const value = params[key];
+      if (value != null) {
+        combinedParams[key] = value;
+      }
+    });
+    this.styles.styles.forEach(value => {
+      if (typeof value !== 'string') {
+        const styleObj = value as any;
+        Object.keys(styleObj).forEach(prop => {
+          let val = styleObj[prop];
+          if (val.length > 1) {
+            val = interpolateParams(val, combinedParams, errors);
+          }
+          finalStyles[prop] = val;
+        });
+      }
+    });
+    return finalStyles;
+  }
+}

packages/animations/browser/src/dsl/animation_trigger.ts

@@ -7,10 +7,11 @@
  */
 import {ɵStyleData} from '@angular/animations';
 
-import {copyStyles} from '../util';
+import {copyStyles, interpolateParams} from '../util';
+
+import {SequenceAst, StyleAst, TransitionAst, TriggerAst} from './animation_ast';
+import {AnimationStateStyles, AnimationTransitionFactory} from './animation_transition_factory';
 
-import {SequenceAst, TransitionAst, TriggerAst} from './animation_ast';
-import {AnimationTransitionFactory} from './animation_transition_factory';
 
 /**
  * @experimental Animation support is experimental.
@@ -25,16 +26,12 @@ export function buildTrigger(name: string, ast: TriggerAst): AnimationTrigger {
 export class AnimationTrigger {
   public transitionFactories: AnimationTransitionFactory[] = [];
   public fallbackTransition: AnimationTransitionFactory;
-  public states: {[stateName: string]: ɵStyleData} = {};
+  public states: {[stateName: string]: AnimationStateStyles} = {};
 
   constructor(public name: string, public ast: TriggerAst) {
     ast.states.forEach(ast => {
-      const obj = this.states[ast.name] = {};
-      ast.style.styles.forEach(styleTuple => {
-        if (typeof styleTuple == 'object') {
-          copyStyles(styleTuple as ɵStyleData, false, obj);
-        }
-      });
+      const defaultParams = (ast.options && ast.options.params) || {};
+      this.states[ast.name] = new AnimationStateStyles(ast.style, defaultParams);
     });
 
     balanceProperties(this.states, 'true', '1');
@@ -53,10 +50,15 @@ export class AnimationTrigger {
     const entry = this.transitionFactories.find(f => f.match(currentState, nextState));
     return entry || null;
   }
+
+  matchStyles(currentState: any, params: {[key: string]: any}, errors: any[]): ɵStyleData {
+    return this.fallbackTransition.buildStyles(currentState, params, errors);
+  }
 }
 
 function createFallbackTransition(
-    triggerName: string, states: {[stateName: string]: ɵStyleData}): AnimationTransitionFactory {
+    triggerName: string,
+    states: {[stateName: string]: AnimationStateStyles}): AnimationTransitionFactory {
   const matchers = [(fromState: any, toState: any) => true];
   const animation = new SequenceAst([]);
   const transition = new TransitionAst(matchers, animation);

packages/animations/browser/src/render/transition_animation_engine.ts

@@ -66,6 +66,8 @@ export class StateValue {
   public value: string;
   public options: AnimationOptions;
 
+  get params(): {[key: string]: any} { return this.options.params as{[key: string]: any}; }
+
   constructor(input: any) {
     const isObj = input && input.hasOwnProperty('value');
     const value = isObj ? input['value'] : input;
@@ -213,7 +215,24 @@ export class AnimationTransitionNamespace {
     // The removal arc here is special cased because the same element is triggered
     // twice in the event that it contains animations on the outer/inner portions
     // of the host container
-    if (!isRemoval && fromState.value === toState.value) return;
+    if (!isRemoval && fromState.value === toState.value) {
+      // this means that despite the value not changing, some inner params
+      // have changed which means that the animation final styles need to be applied
+      if (!objEquals(fromState.params, toState.params)) {
+        const errors: any[] = [];
+        const fromStyles = trigger.matchStyles(fromState.value, fromState.params, errors);
+        const toStyles = trigger.matchStyles(toState.value, toState.params, errors);
+        if (errors.length) {
+          this._engine.reportError(errors);
+        } else {
+          this._engine.afterFlush(() => {
+            eraseStyles(element, fromStyles);
+            setStyles(element, toStyles);
+          });
+        }
+      }
+      return;
+    }
 
     const playersOnElement: TransitionAnimationPlayer[] =
         getOrSetAsInMap(this._engine.playersByElement, element, []);
@@ -664,7 +683,7 @@ export class TransitionAnimationEngine {
   private _buildInstruction(entry: QueueInstruction, subTimelines: ElementInstructionMap) {
     return entry.transition.build(
         this.driver, entry.element, entry.fromState.value, entry.toState.value,
-        entry.toState.options, subTimelines);
+        entry.fromState.options, entry.toState.options, subTimelines);
   }
 
   destroyInnerAnimations(containerElement: any) {
@@ -781,6 +800,11 @@ export class TransitionAnimationEngine {
     }
   }
 
+  reportError(errors: string[]) {
+    throw new Error(
+        `Unable to process animations due to the following failed trigger transitions\n ${errors.join("\n")}`);
+  }
+
   private _flushAnimations(cleanupFns: Function[], microtaskId: number):
       TransitionAnimationPlayer[] {
     const subTimelines = new ElementInstructionMap();
@@ -901,14 +925,14 @@ export class TransitionAnimationEngine {
     }
 
     if (erroneousTransitions.length) {
-      let msg = `Unable to process animations due to the following failed trigger transitions\n`;
+      const errors: string[] = [];
       erroneousTransitions.forEach(instruction => {
-        msg += `@${instruction.triggerName} has failed due to:\n`;
-        instruction.errors !.forEach(error => { msg += `- ${error}\n`; });
+        errors.push(`@${instruction.triggerName} has failed due to:\n`);
+        instruction.errors !.forEach(error => errors.push(`- ${error}\n`));
       });
 
       allPlayers.forEach(player => player.destroy());
-      throw new Error(msg);
+      this.reportError(errors);
     }
 
     // these can only be detected here since we have a map of all the elements
@@ -1491,3 +1515,14 @@ function _flattenGroupPlayersRecur(players: AnimationPlayer[], finalPlayers: Ani
     }
   }
 }
+
+function objEquals(a: {[key: string]: any}, b: {[key: string]: any}): boolean {
+  const k1 = Object.keys(a);
+  const k2 = Object.keys(b);
+  if (k1.length != k2.length) return false;
+  for (let i = 0; i < k1.length; i++) {
+    const prop = k1[i];
+    if (!b.hasOwnProperty(prop) || a[prop] !== b[prop]) return false;
+  }
+  return true;
+}

packages/animations/browser/src/util.ts

@@ -9,6 +9,8 @@ import {AnimateTimings, AnimationMetadata, AnimationOptions, sequence, ɵStyleDa
 
 export const ONE_SECOND = 1000;
 
+export const SUBSTITUTION_EXPR_START = '{{';
+export const SUBSTITUTION_EXPR_END = '}}';
 export const ENTER_CLASSNAME = 'ng-enter';
 export const LEAVE_CLASSNAME = 'ng-leave';
 export const ENTER_SELECTOR = '.ng-enter';
@@ -151,10 +153,8 @@ export function normalizeAnimationEntry(steps: AnimationMetadata | AnimationMeta
 export function validateStyleParams(
     value: string | number, options: AnimationOptions, errors: any[]) {
   const params = options.params || {};
-  if (typeof value !== 'string') return;
-
-  const matches = value.toString().match(PARAM_REGEX);
-  if (matches) {
+  const matches = extractStyleParams(value);
+  if (matches.length) {
     matches.forEach(varName => {
       if (!params.hasOwnProperty(varName)) {
         errors.push(
@@ -164,7 +164,22 @@ export function validateStyleParams(
   }
 }
 
-const PARAM_REGEX = /\{\{\s*(.+?)\s*\}\}/g;
+const PARAM_REGEX =
+    new RegExp(`${SUBSTITUTION_EXPR_START}\\s*(.+?)\\s*${SUBSTITUTION_EXPR_END}`, 'g');
+export function extractStyleParams(value: string | number): string[] {
+  let params: string[] = [];
+  if (typeof value === 'string') {
+    const val = value.toString();
+
+    let match: any;
+    while (match = PARAM_REGEX.exec(val)) {
+      params.push(match[1] as string);
+    }
+    PARAM_REGEX.lastIndex = 0;
+  }
+  return params;
+}
+
 export function interpolateParams(
     value: string | number, params: {[name: string]: any}, errors: any[]): string|number {
   const original = value.toString();