Test images and shapes

Author: rreusser

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,23 +130,23 @@ 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];
 
                 if((activeAxIds.indexOf(obji.xref) !== -1) ||
                     (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) {

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);
     });