feat(animations): provide support for web-workers

Closes angular#12656

modules/@angular/platform-webworker/src/web_workers/shared/serializer.ts

@@ -13,8 +13,6 @@ import {isPresent} from '../../facade/lang';
 import {RenderStore} from './render_store';
 import {LocationType} from './serialized_types';
 
-
-
 // PRIMITIVE is any type that does not need to be serialized (string, number, boolean)
 // We set it to String so that it is considered a Type.
 /**
@@ -121,5 +119,6 @@ export class Serializer {
   }
 }
 
+export const ANIMATION_WORKER_PLAYER_PREFIX = 'AnimationPlayer.';
 
 export class RenderStoreObject {}

modules/@angular/platform-webworker/src/web_workers/ui/event_dispatcher.ts

@@ -5,8 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
-
 import {EventEmitter} from '../../facade/async';
 import {RenderStoreObject, Serializer} from '../shared/serializer';
 
@@ -15,6 +13,15 @@ import {serializeEventWithTarget, serializeGenericEvent, serializeKeyboardEvent,
 export class EventDispatcher {
   constructor(private _sink: EventEmitter<any>, private _serializer: Serializer) {}
 
+  dispatchAnimationEvent(player: any, phaseName: string, element: any): boolean {
+    this._sink.emit({
+      'element': this._serializer.serialize(element, RenderStoreObject),
+      'animationPlayer': this._serializer.serialize(player, RenderStoreObject),
+      'eventName': phaseName
+    });
+    return true;
+  }
+
   dispatchRenderEvent(element: any, eventTarget: string, eventName: string, event: any): boolean {
     var serializedEvent: any /** TODO #9100 */;
     // TODO (jteplitz602): support custom events #3350

modules/@angular/platform-webworker/src/web_workers/ui/renderer.ts

@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, RenderComponentType, Renderer, RootRenderer} from '@angular/core';
+import {AnimationPlayer, Injectable, RenderComponentType, Renderer, RootRenderer} from '@angular/core';
 
 import {MessageBus} from '../shared/message_bus';
 import {EVENT_CHANNEL, RENDERER_CHANNEL} from '../shared/messaging_api';
 import {RenderStore} from '../shared/render_store';
-import {PRIMITIVE, RenderStoreObject, Serializer} from '../shared/serializer';
+import {PRIMITIVE, RenderStoreObject, Serializer, ANIMATION_WORKER_PLAYER_PREFIX} from '../shared/serializer';
 import {ServiceMessageBrokerFactory} from '../shared/service_message_broker';
 import {EventDispatcher} from '../ui/event_dispatcher';
 
@@ -86,6 +86,62 @@ export class MessageBasedRenderer {
         this._listenGlobal.bind(this));
     broker.registerMethod(
         'listenDone', [RenderStoreObject, RenderStoreObject], this._listenDone.bind(this));
+    broker.registerMethod(
+        'animate',
+        [
+          RenderStoreObject, PRIMITIVE, PRIMITIVE, PRIMITIVE, PRIMITIVE, PRIMITIVE, PRIMITIVE,
+          PRIMITIVE
+        ],
+        this._animate.bind(this));
+
+    //
+    // The events below are available for when a player is created
+    // from the animate method above
+    //
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'play', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => player.play());
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'pause', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => player.pause());
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'init', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => player.init());
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'restart', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => player.restart());
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'destroy', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => { player.destroy(); });
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'finish', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => player.finish());
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'getPosition', [RenderStoreObject, RenderStoreObject],
+        (player: AnimationPlayer, element: any) => player.getPosition());
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'onStart',
+        [RenderStoreObject, RenderStoreObject, PRIMITIVE],
+        (player: AnimationPlayer, element: any) =>
+            this._listenOnAnimationPlayer(player, element, 'onStart'));
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'onDone',
+        [RenderStoreObject, RenderStoreObject, PRIMITIVE],
+        (player: AnimationPlayer, element: any) =>
+            this._listenOnAnimationPlayer(player, element, 'onDone'));
+
+    broker.registerMethod(
+        ANIMATION_WORKER_PLAYER_PREFIX + 'setPosition',
+        [RenderStoreObject, RenderStoreObject, PRIMITIVE],
+        (player: AnimationPlayer, element: any, position: number) => player.setPosition(position));
   }
 
   private _renderComponent(renderComponentType: RenderComponentType, rendererId: number) {
@@ -187,4 +243,24 @@ export class MessageBasedRenderer {
   }
 
   private _listenDone(renderer: Renderer, unlistenCallback: Function) { unlistenCallback(); }
+
+  private _animate(
+      renderer: Renderer, element: any, startingStyles: any, keyframes: any[], duration: number,
+      delay: number, easing: string, playerId: any) {
+    var player = renderer.animate(element, startingStyles, keyframes, duration, delay, easing);
+    this._renderStore.store(player, playerId);
+  }
+
+  private _listenOnAnimationPlayer(player: AnimationPlayer, element: any, phaseName: string) {
+    const onEventComplete =
+        () => { this._eventDispatcher.dispatchAnimationEvent(player, phaseName, element); };
+
+    // there is no need to register a unlistener value here since the
+    // internal player callbacks are removed when the player is destroyed
+    if (phaseName == 'onDone') {
+      player.onDone(() => onEventComplete());
+    } else {
+      player.onStart(() => onEventComplete());
+    }
+  }
 }

modules/@angular/platform-webworker/src/web_workers/worker/event_deserializer.ts

@@ -5,10 +5,16 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {AnimationTransitionEvent} from '@angular/core';
 
 // no deserialization is necessary in TS.
 // This is only here to match dart interface
 export function deserializeGenericEvent(serializedEvent: {[key: string]: any}):
     {[key: string]: any} {
   return serializedEvent;
 }
+
+export function deserializeAnimationEvent(serializedEvent: {[key: string]: any}):
+    AnimationTransitionEvent {
+  return new AnimationTransitionEvent(<any>serializedEvent);
+}

modules/@angular/platform-webworker/src/web_workers/worker/renderer.ts

@@ -15,9 +15,9 @@ import {ClientMessageBrokerFactory, FnArg, UiArguments} from '../shared/client_m
 import {MessageBus} from '../shared/message_bus';
 import {EVENT_CHANNEL, RENDERER_CHANNEL} from '../shared/messaging_api';
 import {RenderStore} from '../shared/render_store';
-import {RenderStoreObject, Serializer} from '../shared/serializer';
+import {PRIMITIVE, RenderStoreObject, Serializer, ANIMATION_WORKER_PLAYER_PREFIX} from '../shared/serializer';
 
-import {deserializeGenericEvent} from './event_deserializer';
+import {deserializeAnimationEvent, deserializeGenericEvent} from './event_deserializer';
 
 @Injectable()
 export class WebWorkerRootRenderer implements RootRenderer {
@@ -28,7 +28,7 @@ export class WebWorkerRootRenderer implements RootRenderer {
 
   constructor(
       messageBrokerFactory: ClientMessageBrokerFactory, bus: MessageBus,
-      private _serializer: Serializer, private _renderStore: RenderStore) {
+      private _serializer: Serializer, public renderStore: RenderStore) {
     this._messageBroker = messageBrokerFactory.createMessageBroker(RENDERER_CHANNEL);
     bus.initChannel(EVENT_CHANNEL);
     var source = bus.from(EVENT_CHANNEL);
@@ -37,14 +37,20 @@ export class WebWorkerRootRenderer implements RootRenderer {
 
   private _dispatchEvent(message: {[key: string]: any}): void {
     var eventName = message['eventName'];
-    var target = message['eventTarget'];
-    var event = deserializeGenericEvent(message['event']);
-    if (isPresent(target)) {
-      this.globalEvents.dispatchEvent(eventNameWithTarget(target, eventName), event);
+    var element =
+        <WebWorkerRenderNode>this._serializer.deserialize(message['element'], RenderStoreObject);
+    var playerData = message['animationPlayer'];
+    if (playerData) {
+      var player = <AnimationPlayer>this._serializer.deserialize(playerData, RenderStoreObject);
+      element.animationPlayers.dispatchEvent(player, eventName);
     } else {
-      var element =
-          <WebWorkerRenderNode>this._serializer.deserialize(message['element'], RenderStoreObject);
-      element.events.dispatchEvent(eventName, event);
+      var target = message['eventTarget'];
+      var event = deserializeGenericEvent(message['event']);
+      if (isPresent(target)) {
+        this.globalEvents.dispatchEvent(eventNameWithTarget(target, eventName), event);
+      } else {
+        element.events.dispatchEvent(eventName, event);
+      }
     }
   }
 
@@ -53,8 +59,8 @@ export class WebWorkerRootRenderer implements RootRenderer {
     if (!result) {
       result = new WebWorkerRenderer(this, componentType);
       this._componentRenderers.set(componentType.id, result);
-      var id = this._renderStore.allocateId();
-      this._renderStore.store(result, id);
+      var id = this.renderStore.allocateId();
+      this.renderStore.store(result, id);
       this.runOnService('renderComponent', [
         new FnArg(componentType, RenderComponentType),
         new FnArg(result, RenderStoreObject),
@@ -70,16 +76,16 @@ export class WebWorkerRootRenderer implements RootRenderer {
 
   allocateNode(): WebWorkerRenderNode {
     var result = new WebWorkerRenderNode();
-    var id = this._renderStore.allocateId();
-    this._renderStore.store(result, id);
+    var id = this.renderStore.allocateId();
+    this.renderStore.store(result, id);
     return result;
   }
 
-  allocateId(): number { return this._renderStore.allocateId(); }
+  allocateId(): number { return this.renderStore.allocateId(); }
 
   destroyNodes(nodes: any[]) {
     for (var i = 0; i < nodes.length; i++) {
-      this._renderStore.remove(nodes[i]);
+      this.renderStore.remove(nodes[i]);
     }
   }
 }
@@ -232,10 +238,21 @@ export class WebWorkerRenderer implements Renderer, RenderStoreObject {
   }
 
   animate(
-      element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[],
+      renderElement: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[],
       duration: number, delay: number, easing: string): AnimationPlayer {
-    // TODO
-    return null;
+    const playerId = this._rootRenderer.allocateId();
+    const renderNode = this._rootRenderer.allocateNode();
+
+    this._runOnService('animate', [
+      new FnArg(renderNode, RenderStoreObject), new FnArg(startingStyles, null),
+      new FnArg(keyframes, null), new FnArg(duration, null), new FnArg(delay, null),
+      new FnArg(easing, null), new FnArg(playerId, null)
+    ]);
+
+    const player = new _AnimationWorkerRendererPlayer(this._rootRenderer, renderElement);
+    this._rootRenderer.renderStore.store(player, playerId);
+
+    return player;
   }
 }
 
@@ -268,8 +285,94 @@ export class NamedEventEmitter {
   }
 }
 
+export class AnimationPlayerEmitter {
+  private _listeners: Map<AnimationPlayer, {[phaseName: string]: Function[]}>;
+
+  private _getListeners(player: AnimationPlayer, phaseName: string): Function[] {
+    if (!this._listeners) {
+      this._listeners = new Map<AnimationPlayer, {[phaseName: string]: Function[]}>();
+    }
+    var phaseMap = this._listeners.get(player);
+    if (!phaseMap) {
+      this._listeners.set(player, phaseMap = {});
+    }
+    var phaseFns = phaseMap[phaseName];
+    if (!phaseFns) {
+      phaseFns = phaseMap[phaseName] = [];
+    }
+    return phaseFns;
+  }
+
+  listen(player: AnimationPlayer, phaseName: string, callback: Function) {
+    this._getListeners(player, phaseName).push(callback);
+  }
+
+  unlisten(player: AnimationPlayer) { this._listeners.delete(player); }
+
+  dispatchEvent(player: AnimationPlayer, phaseName: string) {
+    var listeners = this._getListeners(player, phaseName);
+    for (var i = 0; i < listeners.length; i++) {
+      listeners[i]();
+    }
+  }
+}
+
 function eventNameWithTarget(target: string, eventName: string): string {
   return `${target}:${eventName}`;
 }
 
-export class WebWorkerRenderNode { events: NamedEventEmitter = new NamedEventEmitter(); }
+export class WebWorkerRenderNode {
+  events = new NamedEventEmitter();
+  animationPlayers = new AnimationPlayerEmitter();
+}
+
+class _AnimationWorkerRendererPlayer implements AnimationPlayer, RenderStoreObject {
+  public parentPlayer: AnimationPlayer = null;
+
+  private _started = false;
+
+  constructor(private _rootRenderer: WebWorkerRootRenderer, private _renderElement: any) {}
+
+  private _runOnService(fnName: string, fnArgs: FnArg[]) {
+    var fnArgsWithRenderer = [
+      new FnArg(this, RenderStoreObject), new FnArg(this._renderElement, RenderStoreObject)
+    ].concat(fnArgs);
+    this._rootRenderer.runOnService(ANIMATION_WORKER_PLAYER_PREFIX + fnName, fnArgsWithRenderer);
+  }
+
+  onStart(fn: () => void): void {
+    this._renderElement.animationPlayers.listen(this, 'onStart', fn);
+    this._runOnService('onStart', []);
+  }
+
+  onDone(fn: () => void): void {
+    this._renderElement.animationPlayers.listen(this, 'onDone', fn);
+    this._runOnService('onDone', []);
+  }
+
+  hasStarted(): boolean { return this._started; }
+
+  init(): void { this._runOnService('init', []); }
+
+  play(): void {
+    this._started = true;
+    this._runOnService('play', []);
+  }
+
+  pause(): void { this._runOnService('pause', []); }
+
+  restart(): void { this._runOnService('restart', []); }
+
+  finish(): void { this._runOnService('finish', []); }
+
+  destroy(): void {
+    this._renderElement.animationPlayers.unlisten(this);
+    this._runOnService('destroy', []);
+  }
+
+  reset(): void { this._runOnService('reset', []); }
+
+  setPosition(p: number): void { this._runOnService('setPosition', [new FnArg(p, null)]); }
+
+  getPosition(): number { return 0; }
+}