Skip to content

Commit 2fd9c26

Browse files
rreusserrreusser
committed
Start adding back transition behavior
1 parent e4363a2 commit 2fd9c26

File tree

5 files changed

+400
-62
lines changed

5 files changed

+400
-62
lines changed

‎src/plot_api/plot_api.js

Lines changed: 84 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2493,12 +2493,11 @@ Plotly.relayout = function relayout(gd, astr, val) {
24932493
* @param {string id or DOM element} gd
24942494
* the id or DOM element of the graph container div
24952495
*/
2496-
Plotly.transition = function(gd, data, layout, traces, transitionConfig) {
2496+
Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
24972497
gd = getGraphDiv(gd);
24982498

2499-
return Promise.resolve();
2500-
2501-
/*var fullLayout = gd._fullLayout;
2499+
var i, value, traceIdx;
2500+
var fullLayout = gd._fullLayout;
25022501

25032502
transitionConfig = Lib.extendFlat({
25042503
ease: 'cubic-in-out',
@@ -2517,76 +2516,112 @@ Plotly.transition = function(gd, data, layout, traces, transitionConfig) {
25172516
}
25182517

25192518
// Select which traces will be updated:
2520-
if(isNumeric(traces)) traces = [traces];
2521-
else if(!Array.isArray(traces) || !traces.length) {
2522-
traces = gd._fullData.map(function(v, i) {return i;});
2519+
if(isNumeric(traceIndices)) traceIndices = [traceIndices];
2520+
else if(!Array.isArray(traceIndices) || !traceIndices.length) {
2521+
traceIndices = gd._fullData.map(function(v, i) {return i;});
25232522
}
25242523

2525-
var transitioningTraces = [];
2524+
var animatedTraces = [];
25262525

2527-
function prepareAnimations() {
2528-
for(i = 0; i < traces.length; i++) {
2529-
var traceIdx = traces[i];
2526+
function prepareTransitions() {
2527+
for(i = 0; i < traceIndices.length; i++) {
2528+
var traceIdx = traceIndices[i];
25302529
var trace = gd._fullData[traceIdx];
25312530
var module = trace._module;
25322531

25332532
if(!module.animatable) {
25342533
continue;
25352534
}
25362535

2537-
transitioningTraces.push(traceIdx);
2536+
animatedTraces.push(traceIdx);
25382537

2539-
newTraceData = newData[i];
2540-
curData = gd.data[traces[i]];
2541-
2542-
for(var ai in newTraceData) {
2543-
var value = newTraceData[ai];
2544-
Lib.nestedProperty(curData, ai).set(value);
2545-
}
2546-
2547-
var traceIdx = traces[i];
2548-
if(gd.data[traceIdx].marker && gd.data[traceIdx].marker.size) {
2549-
gd._fullData[traceIdx].marker.size = gd.data[traceIdx].marker.size;
2550-
}
2551-
if(gd.data[traceIdx].error_y && gd.data[traceIdx].error_y.array) {
2552-
gd._fullData[traceIdx].error_y.array = gd.data[traceIdx].error_y.array;
2553-
}
2554-
if(gd.data[traceIdx].error_x && gd.data[traceIdx].error_x.array) {
2555-
gd._fullData[traceIdx].error_x.array = gd.data[traceIdx].error_x.array;
2556-
}
2557-
gd._fullData[traceIdx].x = gd.data[traceIdx].x;
2558-
gd._fullData[traceIdx].y = gd.data[traceIdx].y;
2559-
gd._fullData[traceIdx].z = gd.data[traceIdx].z;
2560-
gd._fullData[traceIdx].key = gd.data[traceIdx].key;
2538+
Lib.extendDeepNoArrays(gd.data[traceIndices[i]], data[i]);
25612539
}
25622540

2563-
doCalcdata(gd, transitioningTraces);
2541+
Plots.supplyDefaults(gd)
2542+
2543+
// doCalcdata(gd, animatedTraces);
2544+
doCalcdata(gd);
25642545

25652546
ErrorBars.calc(gd);
25662547
}
25672548

2568-
function doAnimations() {
2569-
var a, i, j;
2549+
var restyleList = [];
2550+
var relayoutList = [];
2551+
var completionTimeout = null;
2552+
var completion = null;
2553+
2554+
function executeTransitions () {
2555+
var j;
25702556
var basePlotModules = fullLayout._basePlotModules;
2571-
for(j = 0; j < basePlotModules.length; j++) {
2572-
basePlotModules[j].plot(gd, transitioningTraces, transitionOpts);
2557+
for (j = 0; j < basePlotModules.length; j++) {
2558+
basePlotModules[j].plot(gd, animatedTraces, transitionConfig);
25732559
}
25742560

2575-
if(layout) {
2576-
for(j = 0; j < basePlotModules.length; j++) {
2577-
if(basePlotModules[j].transitionAxes) {
2578-
basePlotModules[j].transitionAxes(gd, layout, transitionOpts);
2561+
if (layout) {
2562+
for (j = 0; j < basePlotModules.length; j++) {
2563+
if (basePlotModules[j].transitionAxes) {
2564+
var newLayout = Lib.extendDeep({}, gd._fullLayout, layout);
2565+
basePlotModules[j].transitionAxes(gd, newLayout, transitionConfig);
25792566
}
25802567
}
25812568
}
25822569

2583-
if(!transitionOpts.leadingEdgeRestyle) {
2584-
return new Promise(function(resolve, reject) {
2585-
completion = resolve;
2586-
completionTimeout = setTimeout(resolve, transitionOpts.duration);
2587-
});
2570+
return new Promise(function(resolve, reject) {
2571+
completion = resolve;
2572+
completionTimeout = setTimeout(resolve, transitionConfig.duration);
2573+
});
2574+
}
2575+
2576+
function interruptPreviousTransitions () {
2577+
var ret;
2578+
clearTimeout(completionTimeout);
2579+
2580+
if (completion) {
2581+
completion();
2582+
}
2583+
2584+
if (gd._animationInterrupt) {
2585+
ret = gd._animationInterrupt();
2586+
gd._animationInterrupt = null;
25882587
}
2589-
}*/
2588+
return ret;
2589+
}
2590+
2591+
for (i = 0; i < traceIndices.length; i++) {
2592+
var traceIdx = traceIndices[i];
2593+
var contFull = gd._fullData[traceIdx];
2594+
var module = contFull._module;
2595+
2596+
if (!module.animatable) {
2597+
var thisTrace = [traceIdx];
2598+
var thisUpdate = {};
2599+
2600+
for (var ai in data[i]) {
2601+
thisUpdate[ai] = [data[i][ai]];
2602+
}
2603+
2604+
restyleList.push((function (md, data, traces) {
2605+
return function () {
2606+
return Plotly.restyle(gd, data, traces);
2607+
}
2608+
}(module, thisUpdate, [traceIdx])));
2609+
}
2610+
}
2611+
2612+
var seq = [Plots.previousPromises, interruptPreviousTransitions, prepareTransitions, executeTransitions];
2613+
seq = seq.concat(restyleList);
2614+
2615+
var plotDone = Lib.syncOrAsync(seq, gd);
2616+
2617+
if(!plotDone || !plotDone.then) plotDone = Promise.resolve();
2618+
2619+
return plotDone.then(function() {
2620+
gd.emit('plotly_beginanimate', []);
2621+
return gd;
2622+
});
2623+
2624+
return Promise.resolve();
25902625
};
25912626

25922627
/**

‎src/plots/cartesian/index.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@ exports.attrRegex = constants.attrRegex;
2525

2626
exports.attributes = require('./attributes');
2727

28-
exports.plot = function(gd, traces) {
29-
var cdSubplot, cd, trace, i, j, k, isFullReplot;
28+
exports.transitionAxes = require('./transition_axes');
29+
30+
exports.plot = function(gd, traces, transitionOpts) {
31+
var cdSubplot, cd, trace, i, j, k;
3032

3133
var fullLayout = gd._fullLayout,
3234
subplots = Plots.getSubplotIds(fullLayout, 'cartesian'),
@@ -36,15 +38,10 @@ exports.plot = function(gd, traces) {
3638
if(!Array.isArray(traces)) {
3739
// If traces is not provided, then it's a complete replot and missing
3840
// traces are removed
39-
isFullReplot = true;
4041
traces = [];
4142
for(i = 0; i < calcdata.length; i++) {
4243
traces.push(i);
4344
}
44-
} else {
45-
// If traces are explicitly specified, then it's a partial replot and
46-
// traces are not removed.
47-
isFullReplot = false;
4845
}
4946

5047
for(i = 0; i < subplots.length; i++) {
@@ -92,7 +89,7 @@ exports.plot = function(gd, traces) {
9289
}
9390
}
9491

95-
_module.plot(gd, subplotInfo, cdModule, isFullReplot);
92+
_module.plot(gd, subplotInfo, cdModule, transitionOpts);
9693
}
9794
}
9895
};

0 commit comments

Comments
 (0)