fix #3957 - call _module.style(onSelect) passing rangePlot <g.trace>

... during selection mousemove. To do so,

- make _module.styleOnSelect handle a 3rd argument
  (in practice, a d3 selection of <g.trace> of the main plot
  OR the range plot)
- similarly for _module.style methods that get called during selections

Author: etpinard

src/plots/cartesian/select.js

@@ -734,7 +734,10 @@ function updateSelectedState(gd, searchTraces, eventData) {
 
         var _module = searchInfo._module;
         var fn = _module.styleOnSelect || _module.style;
-        if(fn) fn(gd, cd);
+        if(fn) {
+            fn(gd, cd, cd[0].node3);
+            if(cd[0].nodeRangePlot3) fn(gd, cd, cd[0].nodeRangePlot3);
+        }
     }
 
     if(hasRegl) {

src/traces/bar/style.js

@@ -62,16 +62,14 @@ function styleTextPoints(sel, trace, gd) {
     });
 }
 
-function styleOnSelect(gd, cd) {
-    var s = cd[0].node3;
+function styleOnSelect(gd, cd, sel) {
     var trace = cd[0].trace;
 
     if(trace.selectedpoints) {
-        stylePointsInSelectionMode(s, trace, gd);
+        stylePointsInSelectionMode(sel, trace, gd);
     } else {
-        stylePoints(s, trace, gd);
-
-        Registry.getComponentMethod('errorbars', 'style')(s);
+        stylePoints(sel, trace, gd);
+        Registry.getComponentMethod('errorbars', 'style')(sel);
     }
 }
 

src/traces/box/style.js

@@ -12,8 +12,8 @@ var d3 = require('d3');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.boxes');
+function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.trace.boxes');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
 
@@ -55,10 +55,9 @@ function style(gd, cd) {
     });
 }
 
-function styleOnSelect(gd, cd) {
-    var s = cd[0].node3;
+function styleOnSelect(gd, cd, sel) {
     var trace = cd[0].trace;
-    var pts = s.selectAll('path.point');
+    var pts = sel.selectAll('path.point');
 
     if(trace.selectedpoints) {
         Drawing.selectedPointStyle(pts, trace);

src/traces/funnel/style.js

@@ -15,8 +15,8 @@ var Color = require('../../components/color');
 
 var styleTextPoints = require('../bar/style').styleTextPoints;
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
+function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
 

src/traces/ohlc/style.js

@@ -12,8 +12,8 @@ var d3 = require('d3');
 var Drawing = require('../../components/drawing');
 var Color = require('../../components/color');
 
-module.exports = function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
+module.exports = function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
 
     s.style('opacity', function(d) {
         return d[0].trace.opacity;

src/traces/scatter/style.js

@@ -49,16 +49,15 @@ function styleText(sel, trace, gd) {
     Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
 }
 
-function styleOnSelect(gd, cd) {
-    var s = cd[0].node3;
+function styleOnSelect(gd, cd, sel) {
     var trace = cd[0].trace;
 
     if(trace.selectedpoints) {
-        Drawing.selectedPointStyle(s.selectAll('path.point'), trace);
-        Drawing.selectedTextStyle(s.selectAll('text'), trace);
+        Drawing.selectedPointStyle(sel.selectAll('path.point'), trace);
+        Drawing.selectedTextStyle(sel.selectAll('text'), trace);
     } else {
-        stylePoints(s, trace, gd);
-        styleText(s, trace, gd);
+        stylePoints(sel, trace, gd);
+        styleText(sel, trace, gd);
     }
 }
 

src/traces/waterfall/style.js

@@ -15,8 +15,8 @@ var Color = require('../../components/color');
 
 var styleTextPoints = require('../bar/style').styleTextPoints;
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
+function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });