diff --git a/src/components/images/draw.js b/src/components/images/draw.js index a489c9eb026..28f1cfff2f7 100644 --- a/src/components/images/draw.js +++ b/src/components/images/draw.js @@ -145,8 +145,8 @@ module.exports = function draw(gd) { // Required for updating images - function keyFunction(d) { - return d.source; + function keyFunction(d, i) { + return d.source + i; } diff --git a/test/jasmine/tests/layout_images_test.js b/test/jasmine/tests/layout_images_test.js index d1f817908f5..7c6eadbe5bf 100644 --- a/test/jasmine/tests/layout_images_test.js +++ b/test/jasmine/tests/layout_images_test.js @@ -1,6 +1,8 @@ var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); var Images = require('@src/components/images'); + +var d3 = require('d3'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var mouseEvent = require('../assets/mouse_event'); @@ -290,4 +292,60 @@ describe('Layout images', function() { }); }); + describe('when adding/removing images', function() { + + afterEach(destroyGraphDiv); + + it('should properly add and removing image', function(done) { + var gd = createGraphDiv(), + data = [{ x: [1, 2, 3], y: [1, 2, 3] }], + layout = { width: 500, height: 400 }; + + function makeImage(source, x, y) { + return { + source: source, + x: x, + y: y, + sizex: 1, + sizey: 1 + }; + } + + function assertImages(cnt) { + expect(d3.selectAll('image').size()).toEqual(cnt); + } + + Plotly.plot(gd, data, layout).then(function() { + assertImages(0); + + return Plotly.relayout(gd, 'images[0]', makeImage(jsLogo, 0.1, 0.1)); + }).then(function() { + assertImages(1); + + return Plotly.relayout(gd, 'images[1]', makeImage(pythonLogo, 0.9, 0.9)); + }).then(function() { + assertImages(2); + + return Plotly.relayout(gd, 'images[2]', makeImage(pythonLogo, 0.2, 0.5)); + }).then(function() { + assertImages(3); + + return Plotly.relayout(gd, 'images[2]', 'remove'); + }).then(function() { + assertImages(2); + + return Plotly.relayout(gd, 'images[1]', 'remove'); + }).then(function() { + assertImages(1); + + return Plotly.relayout(gd, 'images[0]', 'remove'); + }).then(function() { + assertImages(0); + + done(); + }); + }); + + }); + });