Fixed animation control for graph 2D

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

@@ -29,6 +29,10 @@ export class Graph2DComponent {
     public constructor(private ghciService: GHCIService) {
         this.ghciServiceSub = ghciService.messages.subscribe(
             canvas => {
+                // Stop Animation
+                if (this.animation.init) {
+                    this.stopAnimation();
+                }
                 switch(canvas.tipo) { 
                     case 'graph': {
                         var jsonCanvas = JSON.parse(canvas.resultado);
@@ -122,14 +126,12 @@ export class Graph2DComponent {
                         break; 
                     }
                     case 'animacion': {                        
-                        if(!this.animation.init) {
-                            this.animation.init = true;
                         var animationData = canvas.resultado.map(res => JSON.parse(res));
                         for (var frame of animationData) {
                             this.animation.data.push(this.normalizeShapesData(frame));
                         }
                         this.runAnimation();
-                        }
+                        this.animation.init = true;
                         break; 
                     }
                 }
@@ -199,6 +201,8 @@ export class Graph2DComponent {
                 ]
             })
         }
+        // Update Frame
+        this.animation.currentFrame = (this.animation.currentFrame + 1) % this.animation.data.length;
     }
     /**
      * @name runAnimation
@@ -207,9 +211,9 @@ export class Graph2DComponent {
     public runAnimation = function() {
         var $this = this;
         if ($this.animation.timer !== null) return;
+        $this.updateFrame($this.animation.data[$this.animation.currentFrame]);
         $this.animation.timer = setInterval(function(){
             $this.updateFrame($this.animation.data[$this.animation.currentFrame]);
-            $this.animation.currentFrame = ($this.animation.currentFrame + 1) % $this.animation.data.length;    
         }, $this.animation.speed);
         $this.animation.playing = true;
     }
@@ -223,6 +227,20 @@ export class Graph2DComponent {
         $this.animation.timer = null;
         $this.animation.playing = false;
     }
+    /**
+     * @name stopAnimation
+     * @desc Stop Shapes Animation
+     */
+    public stopAnimation = function() {
+        var $this = this;
+        clearInterval($this.animation.timer);
+        $this.animation.data = [];
+        $this.animation.timer = null;
+        $this.animation.currentFrame = 0;
+        $this.animation.speed = 1000;
+        $this.animation.playing = false;
+        this.instance.removeAllGraphs();
+    }
 
     /**
      * @name zoomOut
@@ -250,8 +268,12 @@ export class Graph2DComponent {
      * @desc remove all the graph from the instance.
      */
     public cleanPlot = function () {
+        if (this.animation.playing) {
+            this.stopAnimation();
+        } else {
             this.instance.removeAllGraphs();
         }
+    }
 
     /**
      * @name exportPlot