improved transitionAxes yes/no logic

- use old vs new (after subroutines.doAutoRangeAndConstraints)
  range values to determine if we call transitionAxes or not,
  instead of "just" calling transitionAxes for all subplots
  with altered *and* autoranged axes.

Author: etpinard

src/plot_api/plot_api.js

@@ -2872,7 +2872,6 @@ function diffLayout(gd, oldFullLayout, newFullLayout, immutable, transition) {
     var flags = editTypes.layoutFlags();
     flags.arrays = {};
     flags.rangesAltered = {};
-    flags.autorangedAxes = {};
     flags.nChanges = 0;
     flags.nChangesAnim = 0;
 
@@ -2948,11 +2947,6 @@ function getDiffFlags(oldContainer, newContainer, outerparts, opts) {
         var parts = outerparts.concat(key);
         astr = parts.join('.');
 
-        // track auto-ranged cartesian axes, changed or not
-        if(AX_AUTORANGE_RE.test(astr) && newVal === true) {
-            flags.autorangedAxes[outerparts[0]] = 1;
-        }
-
         if(key.charAt(0) === '_' || typeof oldVal === 'function' || oldVal === newVal) continue;
 
         // FIXME: ax.tick0 and dtick get filled in during plotting (except for geo subplots),

src/plots/plots.js

@@ -2541,8 +2541,6 @@ plots.transition2 = function(gd, restyleFlags, relayoutFlags, oldFullLayout) {
     function prepareTransitions() {
         var fullLayout = gd._fullLayout;
         var subplots = fullLayout._plots;
-        var rangesAltered = relayoutFlags.rangesAltered;
-        var autorangedAxes = relayoutFlags.autorangedAxes;
 
         // no need to redraw at end of transition,
         // if all changes are animatable
@@ -2555,16 +2553,23 @@ plots.transition2 = function(gd, restyleFlags, relayoutFlags, oldFullLayout) {
             var plotinfo = subplots[k];
             var xa = plotinfo.xaxis;
             var ya = plotinfo.yaxis;
+            var xr0 = oldFullLayout[xa._name].range.slice();
+            var yr0 = oldFullLayout[ya._name].range.slice();
+            var xr1 = xa.range.slice();
+            var yr1 = ya.range.slice();
 
-            if(rangesAltered[xa._name] || rangesAltered[ya._name] ||
-                autorangedAxes[xa._name] || autorangedAxes[ya._name]
+            xa.setScale();
+            ya.setScale();
+
+            if(xr0[0] !== xr1[0] || xr0[1] !== xr1[1] ||
+                yr0[0] !== yr1[0] || yr0[1] !== yr1[1]
             ) {
                 edits[k] = {
                     plotinfo: plotinfo,
-                    xr0: oldFullLayout[xa._name].range.slice(),
-                    yr0: oldFullLayout[ya._name].range.slice(),
-                    xr1: xa.range.slice(),
-                    yr1: ya.range.slice()
+                    xr0: xr0,
+                    yr0: yr0,
+                    xr1: xr1,
+                    yr1: yr1
                 };
             }
         }

test/jasmine/tests/transition_test.js

@@ -643,7 +643,7 @@ describe('Plotly.react transitions:', function() {
         .then(done);
     });
 
-    it('should transition layout when one or more axes has *autorange:true*', function(done) {
+    it('should transition layout when one or more axis auto-ranged value changed', function(done) {
         var data = [{y: [1, 2, 1]}];
         var layout = {transition: {duration: 10}};
 
@@ -662,6 +662,7 @@ describe('Plotly.react transitions:', function() {
             assertAxAutorange('axes are autorange:true by default', true);
         })
         .then(function() {
+            // N.B. marker.size can expand axis range
             data[0].marker = {size: 30};
             return Plotly.react(gd, data, layout);
         })
@@ -698,6 +699,76 @@ describe('Plotly.react transitions:', function() {
         .then(done);
     });
 
+    it('should not transition layout when axis auto-ranged value do not changed', function(done) {
+        var data = [{y: [1, 2, 1]}];
+        var layout = {transition: {duration: 10}};
+
+        function assertAxAutorange(msg, exp) {
+            expect(gd.layout.xaxis.autorange).toBe(exp, msg);
+            expect(gd.layout.yaxis.autorange).toBe(exp, msg);
+            expect(gd._fullLayout.xaxis.autorange).toBe(exp, msg);
+            expect(gd._fullLayout.yaxis.autorange).toBe(exp, msg);
+        }
+
+        Plotly.react(gd, data, layout)
+        .then(function() {
+            methods.push([gd._fullLayout._basePlotModules[0], 'plot']);
+            methods.push([gd._fullLayout._basePlotModules[0], 'transitionAxes2']);
+            addSpies();
+            assertAxAutorange('axes are autorange:true by default', true);
+        })
+        .then(function() {
+            // N.B. different coordinate, but same auto-range value
+            data[0].y = [2, 1, 2];
+            return Plotly.react(gd, data, layout);
+        })
+        .then(function() {
+            assertSpies('do not transition autoranged axes, just the traces', [
+                [Plots, 'transition2', 1],
+                [gd._fullLayout._basePlotModules[0], 'transitionAxes2', 0],
+                [gd._fullLayout._basePlotModules[0], 'plot', 1]
+            ]);
+            assertAxAutorange('axes are still autorange:true', true);
+        })
+        .then(function() {
+            // N.B. different coordinates with different auto-range value
+            data[0].y = [20, 10, 20];
+            return Plotly.react(gd, data, layout);
+        })
+        .then(function() {
+            assertSpies('both trace and layout transitions', [
+                [Plots, 'transition2', 1],
+                [gd._fullLayout._basePlotModules[0], 'transitionAxes2', 1],
+                [Registry, 'call', [
+                    // xaxis call to _storeDirectGUIEdit from doAutoRange
+                    ['_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, {
+                        'xaxis.range': [-0.12852664576802508, 2.128526645768025],
+                        'xaxis.autorange': true
+                    }],
+                    // yaxis call to _storeDirectGUIEdit from doAutoRange
+                    ['_storeDirectGUIEdit', gd.layout, gd._fullLayout._preGUI, {
+                        'yaxis.range': [9.26751592356688, 20.73248407643312],
+                        'yaxis.autorange': true
+                    }],
+                    ['relayout', gd, {
+                        'xaxis.range': [-0.12852664576802508, 2.128526645768025],
+                        'yaxis.range': [9.26751592356688, 20.73248407643312]
+                    }]]
+                ],
+                [gd._fullLayout._basePlotModules[0], 'plot', [
+                    // one instantaneous transition options to halt
+                    // other trace transitions (if any)
+                    [gd, null, {duration: 0, easing: 'cubic-in-out'}, 'function'],
+                    // one _module.plot call from the relayout at end of axis transition
+                    [gd]
+                ]],
+            ]);
+            assertAxAutorange('axes are now autorange:false', false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('should emit transition events', function(done) {
         var events = ['transitioning', 'transitioned', 'react'];
         var store = {};