Skip to content

Animate API #802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 45 commits into from
Sep 6, 2016
Merged

Animate API #802

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
57892ed
Animate API
rreusser Aug 1, 2016
ae7c54c
Partial draw: Correct traces selected based on fill
rreusser Aug 4, 2016
4e23c21
Handle the case where no module found
rreusser Aug 4, 2016
b98be71
supplyDataDefaults instead of supplyDefaults for transitions
rreusser Aug 4, 2016
00bfd52
Dragbox compares axes by value instead of reference
rreusser Aug 4, 2016
f46e5fb
Attempt simultaneous axis and data transitions
rreusser Aug 9, 2016
981c1a8
Fall back to disallowing simultaneous data + axis transitions
rreusser Aug 11, 2016
80078e4
lib function to interleave trace updates into a restyle
rreusser Aug 12, 2016
a36fb6e
Add supplyTransitionDefaults to coerce input
rreusser Aug 12, 2016
b249f7b
Remove unexposed cascade option
rreusser Aug 19, 2016
d06699d
Group transitions to avoid race conditions
rreusser Aug 23, 2016
4ea79b2
Overhaul transition completion behavior
rreusser Aug 23, 2016
639faa2
Trigger transition completion even if nothing else happened
rreusser Aug 23, 2016
36207ee
Fixes from first review pass
rreusser Aug 24, 2016
4834703
Fix broken tests
rreusser Aug 24, 2016
6f0b42b
Mirror changes from #878 and small typo fix
rreusser Aug 25, 2016
a311922
Fix errorbar typo
rreusser Aug 25, 2016
d5c82c6
Add a tests for scatter simplify: false
rreusser Aug 25, 2016
0f848ab
Fix the scatter select id field
rreusser Aug 25, 2016
a6be166
Disable mouse interaction during finite-duration transition
rreusser Aug 25, 2016
dd0b1f8
Expand the animate API
rreusser Aug 25, 2016
bd6e8c0
Rework transition and animate to resolve at the *end*
rreusser Aug 28, 2016
1b497e3
Regroup animate tests to prevent race conditions
rreusser Aug 28, 2016
9079632
Add a couple more purge tests
rreusser Aug 28, 2016
14516cf
Tweak point enter/exit transitions
rreusser Aug 28, 2016
9c83914
Write Plotly.transition out of the picture yayyy
rreusser Aug 28, 2016
ee95be1
Fix frame attributes
rreusser Aug 29, 2016
dfd2037
Update attributes to improve interop with animations
rreusser Aug 29, 2016
82fefa9
Move point symbol style to single point style func
rreusser Aug 30, 2016
db6b942
Test moving transition and doCalcdata to plots.js
rreusser Sep 2, 2016
0d3da5e
Change namespace of transition
rreusser Sep 2, 2016
0221c79
Refactor animationOpts API
rreusser Sep 2, 2016
f3a292d
Apply non-range props from layout to transition
rreusser Sep 2, 2016
f709572
Use Lib.isPlainObject instead of typeof
rreusser Sep 2, 2016
68b9a0c
Stop testing the things that don't pass the tests 😑
rreusser Sep 6, 2016
29c14d7
Switch to window.[request|cancel]AnimationFrame for consistency
rreusser Sep 6, 2016
84c93fe
Remove .transition from core
rreusser Sep 6, 2016
75ec8a5
Add immediate interrupt
rreusser Sep 6, 2016
c8e46f2
Fix one of the animate tests
rreusser Sep 6, 2016
1d43355
Tweak tests
rreusser Sep 6, 2016
1fe652d
Fix race condition in .animate
rreusser Sep 6, 2016
2bc29b8
Limit transition duration to <= frame duration
rreusser Sep 6, 2016
0f23eef
jsDoc for animate, addFrames, and deleteFrames
rreusser Sep 6, 2016
c85c3a2
Verify gd is a plot div for animate, addFrames, deleteFrames
rreusser Sep 6, 2016
4e88184
Throw animate API errors whne gd is not a plot
rreusser Sep 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fall back to disallowing simultaneous data + axis transitions
  • Loading branch information
@rreusser
rreusser committed Sep 6, 2016
commit 981c1a88df301fc97410f2a64307834f596f9a7f
19 changes: 15 additions & 4 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2618,22 +2618,22 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {

function executeCallbacks(list) {
var p = Promise.resolve();
if (!list) return p;
if(!list) return p;
while(list.length) {
p = p.then((list.shift()));
}
return p;
}

function flushCallbacks(list) {
if (!list) return;
if(!list) return;
while(list.length) {
list.shift();
}
}

var restyleList = [];
function executeTransitions() {
var traceTransitionConfig;
var hasTraceTransition = false;
var j;
var basePlotModules = fullLayout._basePlotModules;
Expand All @@ -2655,6 +2655,17 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
}
}

if(hasAxisTransition) {
traceTransitionConfig = Lib.extendFlat({}, transitionConfig);
traceTransitionConfig.duration = 0;
} else {
traceTransitionConfig = transitionConfig;
}

for(j = 0; j < basePlotModules.length; j++) {
basePlotModules[j].plot(gd, transitionedTraces, traceTransitionConfig);
}

gd._transitionData._completionTimeout = setTimeout(completeTransition, transitionConfig.duration);

if(!hasAxisTransition && !hasTraceTransition) {
Expand All @@ -2671,7 +2682,7 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
}

function interruptPreviousTransitions() {
if (gd._transitionData._completionTimeout) {
if(gd._transitionData._completionTimeout) {
// Prevent the previous completion from occurring:
clearTimeout(gd._transitionData._completionTimeout);
gd._transitionData._completionTimeout = null;
Expand Down
7 changes: 3 additions & 4 deletions src/plots/cartesian/transition_axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionConfig) {
axi.range = to.slice();
}

return Plotly.relayout(gd, attrs).then(function () {
return Plotly.relayout(gd, attrs).then(function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🐄 [minor style pointer] we usually refer to the second arg of Plotly.relayout (in the 2-argument form) as aobj for attribute object. attrs should be reserved for attribute objects as in src/traces/scatter/attributes.js.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aobj for attribute object.

for(var i = 0; i < affectedSubplots.length; i++) {
unsetSubplotTransform(affectedSubplots[i]);
}
Expand All @@ -264,6 +264,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionConfig) {
});
}

var t1, t2, raf;
var easeFn = d3.ease(transitionConfig.ease);

gd._transitionData._interruptCallbacks.push(function() {
Expand All @@ -272,14 +273,12 @@ module.exports = function transitionAxes(gd, newLayout, transitionConfig) {
return transitionTail();
});

gd._transitionData._cleanupCallbacks.push(function () {
gd._transitionData._cleanupCallbacks.push(function() {
cancelAnimationFrame(raf);
raf = null;
return transitionComplete();
});

var t1, t2, raf;

function doFrame() {
t2 = Date.now();

Expand Down
Binary file added test/image/baselines/animation.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions test/jasmine/tests/transition_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
var Plotly = require('@lib/index');
var PlotlyInternal = require('@src/plotly');
var Lib = require('@src/lib');

var createGraphDiv = require('../assets/create_graph_div');
Expand Down Expand Up @@ -37,7 +36,7 @@ describe('Transition API', function() {
it('emits plotly_begintransition on transition start', function(done) {
var beginTransitionCnt = 0;

gd.on('plotly_begintransition', function () {
gd.on('plotly_begintransition', function() {
beginTransitionCnt++;
});

Expand Down