Restore class name from onCancel event and remove previousAnimation from Animation manager.

Author: jdnichollsc

.npmignore

@@ -1,4 +1,7 @@
 ./src
 ./img
 ./www
-./react
+./react
+
+.github
+.stencil

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.1.3] - 2020-04-21
+### Fixed
+- Restore class name from `onCancel` event and remove `previousAnimation` from Animation manager.
+
 ## [1.1.2] - 2020-04-21
 ### Fixed
 - Fixed issue from `destroy` method by using `cancel` instead of `finish`.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
   "description": "Animate once, use Everywhere! 💫",
   "author": "Proyecto 26",

src/components/animatable-component/animatable-component.tsx

@@ -322,22 +322,20 @@ export class AnimatableComponent implements IAnimatableComponent {
    * Initialize manager
    */
   componentWillLoad() {
-    this.manager = new AnimationManager();
+    this.manager = new AnimationManager(this);
+    this.manager.setState(this.element, this);
   }
 
   componentDidLoad() {
-    this.manager.setState(this.element, this);
+    this.manager.update();
   }
 
-  /**
-   * Clear current animation
-   */
-  async componentWillUpdate() {
-    await this.clear();
+  componentWillUpdate() {
+    this.manager.setState(this.element, this);
   }
 
   componentDidUpdate() {
-    this.manager.setState(this.element, this);
+    this.manager.update();
   }
 
   componentDidUnload() {

src/components/animatable-cube/animatable-cube.tsx

@@ -332,22 +332,20 @@ export class Cube implements IAnimatableComponent {
    * Initialize manager
    */
   componentWillLoad() {
-    this.manager = new AnimationManager();
+    this.manager = new AnimationManager(this);
   }
 
   componentDidLoad() {
     this.manager.setState(this.element, this);
+    this.manager.update();
   }
 
-  /**
-   * Clear current animation
-   */
-  async componentWillUpdate() {
-    await this.clear();
+  componentWillUpdate() {
+    this.manager.setState(this.element, this);
   }
 
   componentDidUpdate() {
-    this.manager.setState(this.element, this);
+    this.manager.update();
   }
 
   componentDidUnload() {

src/index.html

@@ -179,6 +179,8 @@
     #animatable-cube {
       margin: 0 auto;
       margin-bottom: 50px;
+      display: block;
+      cursor: pointer;
     }
 
     body.reverse #direction {
@@ -1070,6 +1072,16 @@ <h3>
      * Animatable Components
      **/
     const animatableCube = document.querySelector('#animatable-cube');
+
+    animatableCube.addEventListener('click', function () {
+      animatableCube.getPlayState().then(function(playState) {
+        if (playState === 'running') {
+          animatableCube.pause();
+        } else {
+          animatableCube.play();
+        }
+      })
+    })
 
     let currentAnimatable = animatable;
 
@@ -1186,6 +1198,7 @@ <h3>
       console.log('ANIMATION FINISH', event);
 
       //Remove listener and create my own infinity :)
+      animatable.destroy();
       animatable.autoPlay = false;
       animatable.removeEventListener("finish", startSecondAnimation);
       animatable.options = {

src/utils/waapi.ts

@@ -85,7 +85,11 @@ export class AnimationManager {
   private element: HTMLElement
   private state: IAnimatable
   private animation: Animation = null
-  private previousAnimation: Animation = null 
+  private className: string
+
+  constructor(initState: IAnimatable) {
+    this.state = initState;
+  }
 
   get currentAnimation(): Animation {
     return this.animation || this.loadAnimation();
@@ -116,12 +120,10 @@ export class AnimationManager {
   }
 
   destroyAnimation() {
-    const currentAnimation = this.previousAnimation || this.animation;
-    if (currentAnimation !== null) {
-      currentAnimation.removeEventListener('finish', this.onFinishAnimation);
-      currentAnimation.removeEventListener('cancel', this.onCancelAnimation);
-      currentAnimation.cancel();
-    }
+    if (this.animation === null) return;
+    const currentAnimation = this.animation;
+    this.clearAnimation();
+    currentAnimation.cancel();
   }
 
   playAnimation() {
@@ -136,29 +138,50 @@ export class AnimationManager {
   setState(element: HTMLElement, newState: IAnimatable) {
     this.element = element;
     this.state = newState;
+  }
 
-    this.previousAnimation = this.currentAnimation;
+  update() {
     /**
-     * Check if `autoPlay` is enabled to emit the event and play the animation
+     * Check if `autoPlay` is enabled to play a new animation and emit the event.
      */
-    if (this.state.autoPlay) this.playAnimation();
+    if (this.state.autoPlay) {
+      this.destroyAnimation();
+      this.playAnimation();
+    }
   }
 
+  /**
+   * Emit `onStart` event and update class name with `fromClassName`.
+   */
   onStartAnimation = () => {
-    const { element, state } = this;
-    state.onStart.emit(element);
-    if (state.fromClassName !== undefined)
-      element.className = state.fromClassName;
+    this.state.onStart.emit(this.element);
+    if (this.state.fromClassName !== undefined) {
+      this.className = this.element.className;
+      this.element.className = this.state.fromClassName;
+    }
   }
 
+  /**
+   * Emit `onCancel` event and restore class name.
+   */
   onCancelAnimation = () => {
     this.state.onCancel.emit(this.element);
+    if (
+      this.state.fromClassName !== undefined &&
+      this.className !== undefined
+    ) {
+      this.element.className = this.className;
+    }
   }
 
+  /**
+   * Emit `onFinish` event and update class name with `toClassName`.
+   */
   onFinishAnimation = () => {
     const { element, state } = this;
     state.onFinish.emit(element);
-    if (state.toClassName !== undefined)
+    if (state.toClassName !== undefined) {
       element.className = state.toClassName;
+    }
   }
 }