Merge pull request #1053 from mcFrax/fix-animate-selection-frame-progression

Fix selection fade frame progression

Author: mirabilos

auto_tests/tests/highlight_series_background.js

@@ -123,6 +123,35 @@ describe("highlight-series-background", function() {
     }, 500);
   });
 
+  it('testSelectionAnimationWithReducedFPS', function() {
+    var graph = setupGraph(0.7,'rgb(255,0,0)');
+    var frameCallback, middleFrameNum, lastFrameNum, cleanupCallback;
+    utils.repeatAndCleanup = function (repeatFn, maxFrames, framePeriodInMillis, cleanupFn) {
+      frameCallback = repeatFn;
+      cleanupCallback = cleanupFn;
+      middleFrameNum = Math.round(maxFrames / 2) - 1;
+      lastFrameNum = maxFrames - 1;
+      frameCallback(0);
+    }
+    var expectedFinalAlpha = 76;
+
+    assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+
+    graph.setSelection(0, 'y', true);
+
+    frameCallback(middleFrameNum);
+    var colorAfterMiddleFrame = Util.samplePixel(graph.canvas_, 100, 100);
+
+    frameCallback(lastFrameNum);
+    cleanupCallback();
+    var colorAtTheEnd = Util.samplePixel(graph.canvas_, 100, 100);
+
+    assert.deepEqual(
+      [colorAfterMiddleFrame, colorAtTheEnd],
+      [[255,0,0, expectedFinalAlpha / 2], [255,0,0, expectedFinalAlpha]],
+    );
+  });
+
   it('testGetSelectionZeroCanvasY', function () {
     var graph = document.getElementById("graph");
     var calls = []

src/dygraph.js

@@ -1715,27 +1715,20 @@ Dygraph.prototype.animateSelection_ = function(direction) {
 
   var thisId = ++this.animateId;
   var that = this;
-  var cleanupIfClearing = function() {
-    // if we haven't reached fadeLevel 0 in the max frame time,
-    // ensure that the clear happens and just go to 0
-    if (that.fadeLevel !== 0 && direction < 0) {
-      that.fadeLevel = 0;
-      that.clearSelection();
-    }
-  };
+
   utils.repeatAndCleanup(
-    function(n) {
+    function(step) {
       // ignore simultaneous animations
       if (that.animateId != thisId) return;
 
-      that.fadeLevel += direction;
+      that.fadeLevel = start + (step + 1) * direction;
       if (that.fadeLevel === 0) {
         that.clearSelection();
       } else {
         that.updateSelection_(that.fadeLevel / totalSteps);
       }
     },
-    steps, millis, cleanupIfClearing);
+    steps, millis, function() {});
 };
 
 /**