Add supplyTransitionDefaults to coerce input

Author: rreusser

src/plot_api/plot_api.js

@@ -2536,22 +2536,7 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
     var i, traceIdx;
     var fullLayout = gd._fullLayout;
 
-    transitionConfig = Lib.extendFlat({
-        ease: 'cubic-in-out',
-        duration: 500,
-        delay: 0,
-        cascade: 0
-    }, transitionConfig || {});
-
-    // Create a single transition to be passed around:
-    if(transitionConfig.duration > 0) {
-        gd._currentTransition = d3.transition()
-            .duration(transitionConfig.duration)
-            .delay(transitionConfig.delay)
-            .ease(transitionConfig.ease);
-    } else {
-        gd._currentTransition = null;
-    }
+    transitionConfig = Plots.supplyTransitionDefaults(transitionConfig);
 
     var dataLength = Array.isArray(data) ? data.length : 0;
 
@@ -2665,7 +2650,7 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
             basePlotModules[j].plot(gd, transitionedTraces, traceTransitionConfig);
         }
 
-        gd._transitionData._completionTimeout = setTimeout(completeTransition, transitionConfig.duration);
+        gd._transitionData._completionTimeout = setTimeout(completeTransition, transitionConfig.duration + transitionConfig.delay);
 
         if(!hasAxisTransition && !hasTraceTransition) {
             return false;

src/plots/plots.js

@@ -17,6 +17,7 @@ var Lib = require('../lib');
 var Color = require('../components/color');
 
 var plots = module.exports = {};
+var transitionAttrs = require('./transition_attributes');
 
 var modules = plots.modules = {},
     allTypes = plots.allTypes = [],
@@ -725,6 +726,21 @@ plots.supplyDataDefaults = function(dataIn, dataOut, layout) {
     }
 };
 
+plots.supplyTransitionDefaults = function(config) {
+    var configOut = {};
+
+    function coerce(attr, dflt) {
+        return Lib.coerce(config, configOut, transitionAttrs, attr, dflt);
+    }
+
+    coerce('duration');
+    coerce('ease');
+    coerce('delay');
+    coerce('redraw');
+
+    return configOut;
+};
+
 plots.supplyTraceDefaults = function(traceIn, traceIndex, layout) {
     var traceOut = {},
         defaultColor = Color.defaults[traceIndex % Color.defaults.length];

src/plots/transition_attributes.js

@@ -0,0 +1,85 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = {
+    duration: {
+        valType: 'number',
+        role: 'info',
+        dflt: 500,
+        description: [
+            'The duration of the transition, in milliseconds. If equal to zero,',
+            'updates are synchronous.'
+        ].join(' ')
+    },
+    ease: {
+        valType: 'enumerated',
+        dflt: 'cubic-in-out',
+        values: [
+            "linear",
+            "quad",
+            "cubic",
+            "sin",
+            "exp",
+            "circle",
+            "elastic",
+            "back",
+            "bounce",
+            "linear-in",
+            "quad-in",
+            "cubic-in",
+            "sin-in",
+            "exp-in",
+            "circle-in",
+            "elastic-in",
+            "back-in",
+            "bounce-in",
+            "linear-out",
+            "quad-out",
+            "cubic-out",
+            "sin-out",
+            "exp-out",
+            "circle-out",
+            "elastic-out",
+            "back-out",
+            "bounce-out",
+            "linear-in-out",
+            "quad-in-out",
+            "cubic-in-out",
+            "sin-in-out",
+            "exp-in-out",
+            "circle-in-out",
+            "elastic-in-out",
+            "back-in-out",
+            "bounce-in-out"
+        ],
+        role: 'info',
+        description: 'The easing function used for the transition'
+    },
+    delay: {
+        valType: 'number',
+        role: 'info',
+        dflt: 0,
+        description: [
+            'The duration of the transition, in milliseconds. If equal to zero,',
+            'updates are synchronous.'
+        ].join(' ')
+    },
+    redraw: {
+        valType: 'boolean',
+        role: 'info',
+        dflt: true,
+        description: [
+            'Redraw the plot at completion of the transition. This is desirable',
+            'for transitions that include properties that cannot be transitioned,',
+            'but may significantly slow down updates that do not require a full',
+            'redraw of the plot'
+        ].join(' ')
+    },
+};

test/jasmine/tests/transition_test.js

@@ -1,13 +1,42 @@
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
+var Plots = Plotly.Plots;
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
 
 var mock = require('@mocks/animation');
 
-describe('Transition API', function() {
+describe('Plots.supplyTransitionDefaults', function() {
+    'use strict';
+
+    it('supplies transition defaults', function() {
+        expect(Plots.supplyTransitionDefaults({})).toEqual({
+            duration: 500,
+            ease: 'cubic-in-out',
+            redraw: true,
+            delay: 0,
+        });
+    });
+
+    it('uses provided values', function() {
+        expect(Plots.supplyTransitionDefaults({
+            duration: 100,
+            ease: 'quad-in-out',
+            redraw: false,
+            delay: 50,
+        })).toEqual({
+            duration: 100,
+            ease: 'quad-in-out',
+            redraw: false,
+            delay: 50,
+        });
+    });
+
+});
+
+describe('Plotly.transition', function() {
     'use strict';
 
     var gd;
@@ -26,11 +55,18 @@ describe('Transition API', function() {
 
     it('resolves without waiting for transition to complete', function(done) {
         var t1 = Date.now();
-        var duration = 100;
+        var duration = 50;
+        var calls = 0;
+        // Callback to exit only after called twice:
+        function end() {if (++calls === 2) done();}
+
+        // Not testing this, but make sure not to exit before the transition is all done:
+        gd.on('plotly_endtransition', end);
+
         Plotly.transition(gd, null, {'xaxis.range': [0.2, 0.3]}, null, {duration: duration}).then(function() {
             var t2 = Date.now();
             expect(t2 - t1).toBeLessThan(duration);
-        }).catch(fail).then(done);
+        }).catch(fail).then(end);
     });
 
     it('emits plotly_begintransition on transition start', function(done) {
@@ -49,4 +85,5 @@ describe('Transition API', function() {
         Plotly.transition(gd, null, {'xaxis.range': [0.2, 0.3]}, null, {duration: 50});
         gd.on('plotly_endtransition', done);
     });
+
 });