Merge pull request #4022 from plotly/rangeslider-styleOnSelect-fixup

Rangeslider style on select fix

Author: etpinard

src/lib/make_trace_groups.js

@@ -6,9 +6,10 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
+var d3 = require('d3');
+
 /**
  * General helper to manage trace groups based on calcdata
  *
@@ -31,5 +32,10 @@ module.exports = function makeTraceGroups(traceLayer, cdModule, cls) {
 
     traces.order();
 
+    // stash ref node to trace group in calcdata,
+    // useful for (fast) styleOnSelect
+    var k = traceLayer.classed('rangeplot') ? 'nodeRangePlot3' : 'node3';
+    traces.each(function(cd) { cd[0][k] = d3.select(this); });
+
     return traces;
 };

src/plots/cartesian/index.js

@@ -239,7 +239,8 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 
     layers.enter().append('g')
         .attr('class', function(d) { return d.className; })
-        .classed('mlayer', true);
+        .classed('mlayer', true)
+        .classed('rangeplot', plotinfo.isRangePlot);
 
     layers.exit().remove();
 

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/plot.js

@@ -78,8 +78,6 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
 
         var isHorizontal = (trace.orientation === 'h');
 
-        if(!plotinfo.isRangePlot) cd[0].node3 = plotGroup;
-
         var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');
 
         var bars = pointGroup.selectAll('g.point').data(Lib.identity);

src/traces/bar/style.js

@@ -20,8 +20,8 @@ var attributeInsideTextFont = attributes.insidetextfont;
 var attributeOutsideTextFont = attributes.outsidetextfont;
 var helpers = require('./helpers');
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
+function style(gd) {
+    var s = d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
     var barcount = s.size();
     var fullLayout = gd._fullLayout;
 
@@ -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/barpolar/index.js

@@ -24,7 +24,9 @@ module.exports = {
 
     plot: require('./plot'),
     colorbar: require('../scatter/marker_colorbar'),
+
     style: require('../bar/style').style,
+    styleOnSelect: require('../bar/style').styleOnSelect,
 
     hoverPoints: require('./hover'),
     selectPoints: require('../bar/select'),

src/traces/barpolar/plot.js

@@ -23,8 +23,8 @@ module.exports = function plot(gd, subplot, cdbar) {
     var pathFn = makePathFn(subplot);
     var barLayer = subplot.layers.frontplot.select('g.barlayer');
 
-    Lib.makeTraceGroups(barLayer, cdbar, 'trace bars').each(function(cd) {
-        var plotGroup = cd[0].node3 = d3.select(this);
+    Lib.makeTraceGroups(barLayer, cdbar, 'trace bars').each(function() {
+        var plotGroup = d3.select(this);
         var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');
         var bars = pointGroup.selectAll('g.point').data(Lib.identity);
 

src/traces/box/plot.js

@@ -26,7 +26,6 @@ function plot(gd, plotinfo, cdbox, boxLayer) {
         var cd0 = cd[0];
         var t = cd0.t;
         var trace = cd0.trace;
-        if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
 
         // whisker width
         t.wdPos = t.bdPos * trace.whiskerwidth;

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/choropleth/plot.js

@@ -24,7 +24,7 @@ function plot(gd, geo, calcData) {
 
     var choroplethLayer = geo.layers.backplot.select('.choroplethlayer');
     Lib.makeTraceGroups(choroplethLayer, calcData, 'trace choropleth').each(function(calcTrace) {
-        var sel = calcTrace[0].node3 = d3.select(this);
+        var sel = d3.select(this);
 
         var paths = sel.selectAll('path.choroplethlocation')
             .data(Lib.identity);