From 96b4e315f5d52c7db54e0cead230e0e3e37b7805 Mon Sep 17 00:00:00 2001
From: Ricky Reusser <rsreusser@gmail.com>
Date: Wed, 24 May 2017 15:34:34 -0400
Subject: [PATCH] Transition fillcolor

Conflicts:
	test/jasmine/tests/scatter_test.js
---
 src/components/drawing/index.js    | 10 ++++++++++
 src/traces/scatter/plot.js         | 12 ++++++++----
 test/jasmine/tests/scatter_test.js | 21 +++++++++++++++++++++
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
index 093f4ffe04a..4cf63dcfc09 100644
--- a/src/components/drawing/index.js
+++ b/src/components/drawing/index.js
@@ -156,6 +156,16 @@ drawing.dashStyle = function(dash, lineWidth) {
     return dash;
 };
 
+// Same as fillGroupStyle, except in this case the selection may be a transition
+drawing.singleFillStyle = function(sel) {
+    var node = d3.select(sel.node());
+    var data = node.data();
+    var fillcolor = (((data[0] || [])[0] || {}).trace || {}).fillcolor;
+    if(fillcolor) {
+        sel.call(Color.fill, fillcolor);
+    }
+};
+
 drawing.fillGroupStyle = function(s) {
     s.style('stroke-width', 0)
     .each(function(d) {
diff --git a/src/traces/scatter/plot.js b/src/traces/scatter/plot.js
index 9175c40f068..8357a1210d4 100644
--- a/src/traces/scatter/plot.js
+++ b/src/traces/scatter/plot.js
@@ -340,10 +340,12 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
                     // For the sake of animations, wrap the points around so that
                     // the points on the axes are the first two points. Otherwise
                     // animations get a little crazy if the number of points changes.
-                    transition(ownFillEl3).attr('d', 'M' + pt1 + 'L' + pt0 + 'L' + fullpath.substr(1));
+                    transition(ownFillEl3).attr('d', 'M' + pt1 + 'L' + pt0 + 'L' + fullpath.substr(1))
+                        .call(Drawing.singleFillStyle);
                 } else {
                     // fill to self: just join the path to itself
-                    transition(ownFillEl3).attr('d', fullpath + 'Z');
+                    transition(ownFillEl3).attr('d', fullpath + 'Z')
+                        .call(Drawing.singleFillStyle);
                 }
             }
         }
@@ -354,7 +356,8 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
                 // contours, we just add the two paths closed on themselves.
                 // This makes strange results if one path is *not* entirely
                 // inside the other, but then that is a strange usage.
-                transition(tonext).attr('d', fullpath + 'Z' + prevRevpath + 'Z');
+                transition(tonext).attr('d', fullpath + 'Z' + prevRevpath + 'Z')
+                    .call(Drawing.singleFillStyle);
             }
             else {
                 // tonextx/y: for now just connect endpoints with lines. This is
@@ -362,7 +365,8 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
                 // y/x, but if they *aren't*, we should ideally do more complicated
                 // things depending on whether the new endpoint projects onto the
                 // existing curve or off the end of it
-                transition(tonext).attr('d', fullpath + 'L' + prevRevpath.substr(1) + 'Z');
+                transition(tonext).attr('d', fullpath + 'L' + prevRevpath.substr(1) + 'Z')
+                    .call(Drawing.singleFillStyle);
             }
             trace._polygons = trace._polygons.concat(prevPolygons);
         }
diff --git a/test/jasmine/tests/scatter_test.js b/test/jasmine/tests/scatter_test.js
index fd309f2f2dc..658285ec965 100644
--- a/test/jasmine/tests/scatter_test.js
+++ b/test/jasmine/tests/scatter_test.js
@@ -575,6 +575,27 @@ describe('end-to-end scatter tests', function() {
         .catch(fail)
         .then(done);
     });
+
+    it('animates fillcolor', function(done) {
+        function fill() {
+            return d3.selectAll('.js-fill').node().style.fill;
+        }
+
+        Plotly.plot(gd, [{
+            x: [1, 2, 3, 4, 5, 6, 7],
+            y: [2, 3, 4, 5, 6, 7, 8],
+            fill: 'tozeroy',
+            fillcolor: 'rgb(255, 0, 0)',
+        }]).then(function() {
+            expect(fill()).toEqual('rgb(255, 0, 0)');
+            return Plotly.animate(gd,
+                [{data: [{fillcolor: 'rgb(0, 0, 255)'}]}],
+                {frame: {duration: 0, redraw: false}}
+            );
+        }).then(function() {
+            expect(fill()).toEqual('rgb(0, 0, 255)');
+        }).catch(fail).then(done);
+    });
 });
 
 describe('scatter hoverPoints', function() {