Fixed animation in Graph2d. Some fixes in animation

lib/timeline/Range.js

@@ -122,29 +122,31 @@ Range.prototype.setRange = function(start, end, animate) {
     var duration = typeof animate === 'number' ? animate : 500;
     var initTime = new Date().valueOf();
     var anyChanged = false;
+
     function next() {
       if (!me.props.touch.dragging) {
         var now = new Date().valueOf();
         var time = now - initTime;
-        var s = util.easeInOutQuad(time, initStart, _start, duration);
-        var e = util.easeInOutQuad(time, initEnd, _end, duration);
+        var done = time > duration;
+        var s = done ? start : util.easeInOutQuad(time, initStart, _start, duration);
+        var e = done ? end   : util.easeInOutQuad(time, initEnd, _end, duration);
+
         changed = me._applyRange(s, e);
         anyChanged = anyChanged || changed;
         if (changed) {
           me.body.emitter.emit('rangechange', {start: new Date(s), end: new Date(e)});
         }
 
-        if (time <= duration) {
-          // animate with as high as possible frame rate, leave 20 ms in between
-          // each to prevent the browser from blocking
-          me.animateTimer = setTimeout(next, 20);
-        }
-        else {
-          // done
+        if (done) {
           if (anyChanged) {
             me.body.emitter.emit('rangechanged', {start: new Date(me.start), end: new Date(me.end)});
           }
         }
+        else {
+          // animate with as high as possible frame rate, leave 20 ms in between
+          // each to prevent the browser from blocking
+          me.animateTimer = setTimeout(next, 20);
+        }
       }
     }
 

lib/timeline/component/LineGraph.js

@@ -121,17 +121,6 @@ function LineGraph(body, options) {
   this.setOptions(options);
   this.groupsUsingDefaultStyles = [0];
 
-  this.body.emitter.on("rangechange",function() {
-      if (me.lastStart != 0) {
-        var offset = me.body.range.start - me.lastStart;
-        var range = me.body.range.end - me.body.range.start;
-        if (me.width != 0) {
-          var rangePerPixelInv = me.width/range;
-          var xOffset = offset * rangePerPixelInv;
-          me.svg.style.left = (-me.width - xOffset) + "px";
-        }
-      }
-    });
   this.body.emitter.on("rangechanged", function() {
     me.lastStart = me.body.range.start;
     me.svg.style.left = util.option.asSize(-me.width);
@@ -502,6 +491,7 @@ LineGraph.prototype._updateUngrouped = function() {
  * @return {boolean} Returns true if the component is resized
  */
 LineGraph.prototype.redraw = function() {
+  console.log('redraw')
   var resized = false;
 
   this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
@@ -525,9 +515,23 @@ LineGraph.prototype.redraw = function() {
     this.svg.style.width = util.option.asSize(3*this.width);
     this.svg.style.left = util.option.asSize(-this.width);
   }
+
   if (zoomed == true || this.abortedGraphUpdate == true) {
     this._updateGraph();
   }
+  else {
+    // move the whole svg while dragging
+    if (this.lastStart != 0) {
+      var offset = this.body.range.start - this.lastStart;
+      var range = this.body.range.end - this.body.range.start;
+      if (this.width != 0) {
+        var rangePerPixelInv = this.width/range;
+        var xOffset = offset * rangePerPixelInv;
+        this.svg.style.left = (-this.width - xOffset) + "px";
+      }
+    }
+
+  }
 
   this.legendLeft.redraw();
   this.legendRight.redraw();