Commit 389c3609 authored by Diego Rey's avatar Diego Rey
Browse files

Fixed animation control for graph 2D

parent a5ed5208
...@@ -29,6 +29,10 @@ export class Graph2DComponent { ...@@ -29,6 +29,10 @@ export class Graph2DComponent {
public constructor(private ghciService: GHCIService) { public constructor(private ghciService: GHCIService) {
this.ghciServiceSub = ghciService.messages.subscribe( this.ghciServiceSub = ghciService.messages.subscribe(
canvas => { canvas => {
// Stop Animation
if (this.animation.init) {
this.stopAnimation();
}
switch(canvas.tipo) { switch(canvas.tipo) {
case 'graph': { case 'graph': {
var jsonCanvas = JSON.parse(canvas.resultado); var jsonCanvas = JSON.parse(canvas.resultado);
...@@ -122,14 +126,12 @@ export class Graph2DComponent { ...@@ -122,14 +126,12 @@ export class Graph2DComponent {
break; break;
} }
case 'animacion': { case 'animacion': {
if(!this.animation.init) { var animationData = canvas.resultado.map(res => JSON.parse(res));
this.animation.init = true; for (var frame of animationData) {
var animationData = canvas.resultado.map(res => JSON.parse(res)); this.animation.data.push(this.normalizeShapesData(frame));
for (var frame of animationData) {
this.animation.data.push(this.normalizeShapesData(frame));
}
this.runAnimation();
} }
this.runAnimation();
this.animation.init = true;
break; break;
} }
} }
...@@ -199,6 +201,8 @@ export class Graph2DComponent { ...@@ -199,6 +201,8 @@ export class Graph2DComponent {
] ]
}) })
} }
// Update Frame
this.animation.currentFrame = (this.animation.currentFrame + 1) % this.animation.data.length;
} }
/** /**
* @name runAnimation * @name runAnimation
...@@ -207,9 +211,9 @@ export class Graph2DComponent { ...@@ -207,9 +211,9 @@ export class Graph2DComponent {
public runAnimation = function() { public runAnimation = function() {
var $this = this; var $this = this;
if ($this.animation.timer !== null) return; if ($this.animation.timer !== null) return;
$this.updateFrame($this.animation.data[$this.animation.currentFrame]);
$this.animation.timer = setInterval(function(){ $this.animation.timer = setInterval(function(){
$this.updateFrame($this.animation.data[$this.animation.currentFrame]); $this.updateFrame($this.animation.data[$this.animation.currentFrame]);
$this.animation.currentFrame = ($this.animation.currentFrame + 1) % $this.animation.data.length;
}, $this.animation.speed); }, $this.animation.speed);
$this.animation.playing = true; $this.animation.playing = true;
} }
...@@ -223,6 +227,20 @@ export class Graph2DComponent { ...@@ -223,6 +227,20 @@ export class Graph2DComponent {
$this.animation.timer = null; $this.animation.timer = null;
$this.animation.playing = false; $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 * @name zoomOut
...@@ -250,7 +268,11 @@ export class Graph2DComponent { ...@@ -250,7 +268,11 @@ export class Graph2DComponent {
* @desc remove all the graph from the instance. * @desc remove all the graph from the instance.
*/ */
public cleanPlot = function () { public cleanPlot = function () {
this.instance.removeAllGraphs(); if (this.animation.playing) {
this.stopAnimation();
} else {
this.instance.removeAllGraphs();
}
} }
/** /**
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment