From c532ca242dab1813aea90056d1831880d702ab42 Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Wed, 18 Jan 2017 16:46:16 -0500 Subject: [PATCH 1/3] Still update layout objects if there's no transitioned axis --- src/plots/cartesian/transition_axes.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/plots/cartesian/transition_axes.js b/src/plots/cartesian/transition_axes.js index 2994b07efe9..9ed5df4319c 100644 --- a/src/plots/cartesian/transition_axes.js +++ b/src/plots/cartesian/transition_axes.js @@ -100,7 +100,21 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo var updatedAxisIds = Object.keys(updates); var affectedSubplots = computeAffectedSubplots(fullLayout, updatedAxisIds, updates); + function updateLayoutObjs() { + function redrawObjs(objArray, method) { + var i; + for(i = 0; i < objArray.length; i++) { + method(gd, i); + } + } + + redrawObjs(fullLayout.annotations || [], Registry.getComponentMethod('annotations', 'drawOne')); + redrawObjs(fullLayout.shapes || [], Registry.getComponentMethod('shapes', 'drawOne')); + redrawObjs(fullLayout.images || [], Registry.getComponentMethod('images', 'draw')); + } + if(!affectedSubplots.length) { + updateLayoutObjs(); return false; } @@ -202,7 +216,6 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo ticksAndAnnotations(subplot.xaxis, subplot.yaxis); - var xa2 = subplot.xaxis; var ya2 = subplot.yaxis; From f5877721ddf2ce35d3d142e550e299486b39b4e1 Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Mon, 17 Jul 2017 11:01:07 -0700 Subject: [PATCH 2/3] Add test for animating annotations --- src/plots/cartesian/transition_axes.js | 3 +- test/jasmine/tests/annotations_test.js | 38 ++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/plots/cartesian/transition_axes.js b/src/plots/cartesian/transition_axes.js index 9ed5df4319c..418b0b5baa1 100644 --- a/src/plots/cartesian/transition_axes.js +++ b/src/plots/cartesian/transition_axes.js @@ -102,8 +102,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo function updateLayoutObjs() { function redrawObjs(objArray, method) { - var i; - for(i = 0; i < objArray.length; i++) { + for(var i = 0; i < objArray.length; i++) { method(gd, i); } } diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js index 485b8b78474..67ce47095ec 100644 --- a/test/jasmine/tests/annotations_test.js +++ b/test/jasmine/tests/annotations_test.js @@ -1344,3 +1344,41 @@ describe('annotation effects', function() { .then(done); }); }); + +describe('animating annotations', function() { + var gd; + + beforeEach(function() { + gd = createGraphDiv(); + }); + + afterEach(destroyGraphDiv); + + it('updates annoations when no axis update present', function(done) { + + function assertAnnotations(expected) { + var texts = Plotly.d3.select(gd).selectAll('.annotation .annotation-text'); + expect(expected.length).toEqual(texts.size()); + + texts.each(function(i) { + expect(Plotly.d3.select(this).text()).toEqual(expected[i]); + }); + } + + Plotly.plot(gd, + [{y: [1, 2, 3]}], + {annotations: [{text: 'hello'}]} + ).then(function() { + assertAnnotations(['hello']); + + return Plotly.animate(gd, [{ + layout: {annotations: [{text: 'hi'}]} + }], { + frame: {redraw: false, duration: 0} + }); + }).then(function() { + assertAnnotations(['hi']); + + }).catch(failTest).then(done); + }); +}); From ed8323842e6ed77c2eedc645db666b2088f84749 Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Mon, 17 Jul 2017 15:51:08 -0700 Subject: [PATCH 3/3] Test images and shapes --- src/plots/cartesian/transition_axes.js | 17 +++++---- test/jasmine/tests/annotations_test.js | 48 ++++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 10 deletions(-) diff --git a/src/plots/cartesian/transition_axes.js b/src/plots/cartesian/transition_axes.js index 418b0b5baa1..42591e49217 100644 --- a/src/plots/cartesian/transition_axes.js +++ b/src/plots/cartesian/transition_axes.js @@ -101,15 +101,18 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo var affectedSubplots = computeAffectedSubplots(fullLayout, updatedAxisIds, updates); function updateLayoutObjs() { - function redrawObjs(objArray, method) { + function redrawObjs(objArray, method, shortCircuit) { for(var i = 0; i < objArray.length; i++) { method(gd, i); + + // once is enough for images (which doesn't use the `i` arg anyway) + if(shortCircuit) return; } } redrawObjs(fullLayout.annotations || [], Registry.getComponentMethod('annotations', 'drawOne')); redrawObjs(fullLayout.shapes || [], Registry.getComponentMethod('shapes', 'drawOne')); - redrawObjs(fullLayout.images || [], Registry.getComponentMethod('images', 'draw')); + redrawObjs(fullLayout.images || [], Registry.getComponentMethod('images', 'draw'), true); } if(!affectedSubplots.length) { @@ -127,7 +130,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo Axes.doTicks(gd, activeAxIds[i], true); } - function redrawObjs(objArray, method) { + function redrawObjs(objArray, method, shortCircuit) { for(i = 0; i < objArray.length; i++) { var obji = objArray[i]; @@ -135,15 +138,15 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo (activeAxIds.indexOf(obji.yref) !== -1)) { method(gd, i); } + + // once is enough for images (which doesn't use the `i` arg anyway) + if(shortCircuit) return; } } - // annotations and shapes 'draw' method is slow, - // use the finer-grained 'drawOne' method instead - redrawObjs(fullLayout.annotations || [], Registry.getComponentMethod('annotations', 'drawOne')); redrawObjs(fullLayout.shapes || [], Registry.getComponentMethod('shapes', 'drawOne')); - redrawObjs(fullLayout.images || [], Registry.getComponentMethod('images', 'draw')); + redrawObjs(fullLayout.images || [], Registry.getComponentMethod('images', 'draw'), true); } function unsetSubplotTransform(subplot) { diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js index 67ce47095ec..cad65de3123 100644 --- a/test/jasmine/tests/annotations_test.js +++ b/test/jasmine/tests/annotations_test.js @@ -1348,6 +1348,10 @@ describe('annotation effects', function() { describe('animating annotations', function() { var gd; + // Two slightly different 1x1 pngs: + var img1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/C/HgAGfgJ+p8YU1AAAAABJRU5ErkJggg=='; + var img2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4//9/PQAJewN9w0ic/wAAAABJRU5ErkJggg=='; + beforeEach(function() { gd = createGraphDiv(); }); @@ -1360,24 +1364,62 @@ describe('animating annotations', function() { var texts = Plotly.d3.select(gd).selectAll('.annotation .annotation-text'); expect(expected.length).toEqual(texts.size()); - texts.each(function(i) { + texts.each(function(d, i) { expect(Plotly.d3.select(this).text()).toEqual(expected[i]); }); } + function assertShapes(expected) { + var paths = Plotly.d3.select(gd).selectAll('.shapelayer path'); + + expect(expected.length).toEqual(paths.size()); + + paths.each(function(d, i) { + expect(Plotly.d3.select(this).style('fill')).toEqual(expected[i]); + }); + } + + function assertImages(expected) { + var imgs = Plotly.d3.select(gd).selectAll('.imagelayer image'); + + expect(expected.length).toEqual(imgs.size()); + + imgs.each(function(d, i) { + expect(Plotly.d3.select(this).attr('href')).toEqual(expected[i]); + }); + } + Plotly.plot(gd, [{y: [1, 2, 3]}], - {annotations: [{text: 'hello'}]} + { + annotations: [{text: 'hello'}], + shapes: [{fillcolor: 'rgb(170, 170, 170)'}], + images: [{source: img1}] + } ).then(function() { assertAnnotations(['hello']); + assertShapes(['rgb(170, 170, 170)']); + assertImages([img1]); return Plotly.animate(gd, [{ - layout: {annotations: [{text: 'hi'}]} + layout: { + annotations: [{text: 'hi'}], + shapes: [ + {fillcolor: 'rgb(171, 171, 171)'}, + {fillcolor: 'rgb(172, 172, 172)'} + ], + images: [{source: img2}] + } }], { frame: {redraw: false, duration: 0} }); }).then(function() { assertAnnotations(['hi']); + assertShapes([ + 'rgb(171, 171, 171)', + 'rgb(172, 172, 172)' + ]); + assertImages([img2]); }).catch(failTest).then(done); });