Images: Call Images.draw in plot step and while dragging

Author: mdtusz

src/plot_api/plot_api.js

@@ -24,6 +24,7 @@ var Fx = require('../plots/cartesian/graph_interact');
 var Color = require('../components/color');
 var Drawing = require('../components/drawing');
 var ErrorBars = require('../components/errorbars');
+var Images = require('../components/images');
 var Legend = require('../components/legend');
 var RangeSlider = require('../components/rangeslider');
 var RangeSelector = require('../components/rangeselector');
@@ -301,6 +302,7 @@ Plotly.plot = function(gd, data, layout, config) {
     // be set to false before these will work properly.
     function finalDraw() {
         Shapes.drawAll(gd);
+        Images.draw(gd);
         Plotly.Annotations.drawAll(gd);
         Legend.draw(gd);
         RangeSlider.draw(gd);

src/plotly.js

@@ -49,6 +49,7 @@ exports.ErrorBars = require('./components/errorbars');
 exports.Annotations = require('./components/annotations');
 exports.Shapes = require('./components/shapes');
 exports.Legend = require('./components/legend');
+exports.Images = require('./components/images');
 exports.ModeBar = require('./components/modebar');
 
 exports.register = function register(_modules) {

src/plots/cartesian/dragbox.js

@@ -520,6 +520,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
         redrawObjs(fullLayout.annotations || [], Plotly.Annotations);
         redrawObjs(fullLayout.shapes || [], Plotly.Shapes);
+        redrawObjs(fullLayout.images || [], Plotly.Images);
     }
 
     function doubleClick() {

src/plots/plots.js

@@ -781,7 +781,7 @@ plots.supplyLayoutModuleDefaults = function(layoutIn, layoutOut, fullData) {
 
     // TODO register these
     // Legend must come after traces (e.g. it depends on 'barmode')
-    var moduleLayoutDefaults = ['Fx', 'Annotations', 'Shapes', 'Legend'];
+    var moduleLayoutDefaults = ['Fx', 'Annotations', 'Shapes', 'Legend', 'Images'];
     for(i = 0; i < moduleLayoutDefaults.length; i++) {
         _module = moduleLayoutDefaults[i];
 

src/traces/heatmap/style.js

@@ -12,7 +12,7 @@
 var d3 = require('d3');
 
 module.exports = function style(gd) {
-    d3.select(gd).selectAll('image')
+    d3.select(gd).selectAll('.hm image')
         .style('opacity', function(d) {
             return d.trace.opacity;
         });