Skip to content

Commit 8d4ab24

Browse files
etpinardetpinard
authored
Merge pull request #4022 from plotly/rangeslider-styleOnSelect-fixup
Rangeslider style on select fix
2 parents c1ef691 + 3e17627 commit 8d4ab24

File tree

24 files changed

+149
-48
lines changed

24 files changed

+149
-48
lines changed

‎src/lib/make_trace_groups.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
* LICENSE file in the root directory of this source tree.
77
*/
88

9-
109
'use strict';
1110

11+
var d3 = require('d3');
12+
1213
/**
1314
* General helper to manage trace groups based on calcdata
1415
*
@@ -31,5 +32,10 @@ module.exports = function makeTraceGroups(traceLayer, cdModule, cls) {
3132

3233
traces.order();
3334

35+
// stash ref node to trace group in calcdata,
36+
// useful for (fast) styleOnSelect
37+
var k = traceLayer.classed('rangeplot') ? 'nodeRangePlot3' : 'node3';
38+
traces.each(function(cd) { cd[0][k] = d3.select(this); });
39+
3440
return traces;
3541
};

‎src/plots/cartesian/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,8 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
239239

240240
layers.enter().append('g')
241241
.attr('class', function(d) { return d.className; })
242-
.classed('mlayer', true);
242+
.classed('mlayer', true)
243+
.classed('rangeplot', plotinfo.isRangePlot);
243244

244245
layers.exit().remove();
245246

‎src/plots/cartesian/select.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -734,7 +734,10 @@ function updateSelectedState(gd, searchTraces, eventData) {
734734

735735
var _module = searchInfo._module;
736736
var fn = _module.styleOnSelect || _module.style;
737-
if(fn) fn(gd, cd);
737+
if(fn) {
738+
fn(gd, cd, cd[0].node3);
739+
if(cd[0].nodeRangePlot3) fn(gd, cd, cd[0].nodeRangePlot3);
740+
}
738741
}
739742

740743
if(hasRegl) {

‎src/traces/bar/plot.js

-2
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,6 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
7878

7979
var isHorizontal = (trace.orientation === 'h');
8080

81-
if(!plotinfo.isRangePlot) cd[0].node3 = plotGroup;
82-
8381
var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');
8482

8583
var bars = pointGroup.selectAll('g.point').data(Lib.identity);

‎src/traces/bar/style.js

+6-8
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ var attributeInsideTextFont = attributes.insidetextfont;
2020
var attributeOutsideTextFont = attributes.outsidetextfont;
2121
var helpers = require('./helpers');
2222

23-
function style(gd, cd) {
24-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
23+
function style(gd) {
24+
var s = d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
2525
var barcount = s.size();
2626
var fullLayout = gd._fullLayout;
2727

@@ -62,16 +62,14 @@ function styleTextPoints(sel, trace, gd) {
6262
});
6363
}
6464

65-
function styleOnSelect(gd, cd) {
66-
var s = cd[0].node3;
65+
function styleOnSelect(gd, cd, sel) {
6766
var trace = cd[0].trace;
6867

6968
if(trace.selectedpoints) {
70-
stylePointsInSelectionMode(s, trace, gd);
69+
stylePointsInSelectionMode(sel, trace, gd);
7170
} else {
72-
stylePoints(s, trace, gd);
73-
74-
Registry.getComponentMethod('errorbars', 'style')(s);
71+
stylePoints(sel, trace, gd);
72+
Registry.getComponentMethod('errorbars', 'style')(sel);
7573
}
7674
}
7775

‎src/traces/barpolar/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ module.exports = {
2424

2525
plot: require('./plot'),
2626
colorbar: require('../scatter/marker_colorbar'),
27+
2728
style: require('../bar/style').style,
29+
styleOnSelect: require('../bar/style').styleOnSelect,
2830

2931
hoverPoints: require('./hover'),
3032
selectPoints: require('../bar/select'),

‎src/traces/barpolar/plot.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ module.exports = function plot(gd, subplot, cdbar) {
2323
var pathFn = makePathFn(subplot);
2424
var barLayer = subplot.layers.frontplot.select('g.barlayer');
2525

26-
Lib.makeTraceGroups(barLayer, cdbar, 'trace bars').each(function(cd) {
27-
var plotGroup = cd[0].node3 = d3.select(this);
26+
Lib.makeTraceGroups(barLayer, cdbar, 'trace bars').each(function() {
27+
var plotGroup = d3.select(this);
2828
var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');
2929
var bars = pointGroup.selectAll('g.point').data(Lib.identity);
3030

‎src/traces/box/plot.js

-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ function plot(gd, plotinfo, cdbox, boxLayer) {
2626
var cd0 = cd[0];
2727
var t = cd0.t;
2828
var trace = cd0.trace;
29-
if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
3029

3130
// whisker width
3231
t.wdPos = t.bdPos * trace.whiskerwidth;

‎src/traces/box/style.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ var d3 = require('d3');
1212
var Color = require('../../components/color');
1313
var Drawing = require('../../components/drawing');
1414

15-
function style(gd, cd) {
16-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.boxes');
15+
function style(gd, cd, sel) {
16+
var s = sel ? sel : d3.select(gd).selectAll('g.trace.boxes');
1717

1818
s.style('opacity', function(d) { return d[0].trace.opacity; });
1919

@@ -55,10 +55,9 @@ function style(gd, cd) {
5555
});
5656
}
5757

58-
function styleOnSelect(gd, cd) {
59-
var s = cd[0].node3;
58+
function styleOnSelect(gd, cd, sel) {
6059
var trace = cd[0].trace;
61-
var pts = s.selectAll('path.point');
60+
var pts = sel.selectAll('path.point');
6261

6362
if(trace.selectedpoints) {
6463
Drawing.selectedPointStyle(pts, trace);

‎src/traces/choropleth/plot.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function plot(gd, geo, calcData) {
2424

2525
var choroplethLayer = geo.layers.backplot.select('.choroplethlayer');
2626
Lib.makeTraceGroups(choroplethLayer, calcData, 'trace choropleth').each(function(calcTrace) {
27-
var sel = calcTrace[0].node3 = d3.select(this);
27+
var sel = d3.select(this);
2828

2929
var paths = sel.selectAll('path.choroplethlocation')
3030
.data(Lib.identity);

‎src/traces/choroplethmapbox/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ module.exports = {
1818
eventData: require('../choropleth/event_data'),
1919
selectPoints: require('../choropleth/select'),
2020

21-
style: function(_, cd) {
21+
styleOnSelect: function(_, cd) {
2222
if(cd) {
2323
var trace = cd[0].trace;
2424
trace._glTrace.updateOnSelect(cd);

‎src/traces/funnel/style.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ var d3 = require('d3');
1212

1313
var Drawing = require('../../components/drawing');
1414
var Color = require('../../components/color');
15+
var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
1516

1617
var styleTextPoints = require('../bar/style').styleTextPoints;
1718

18-
function style(gd, cd) {
19-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
19+
function style(gd, cd, sel) {
20+
var s = sel ? sel : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
2021

2122
s.style('opacity', function(d) { return d[0].trace.opacity; });
2223

@@ -32,7 +33,7 @@ function style(gd, cd) {
3233
.call(Color.fill, di.mc || cont.color)
3334
.call(Color.stroke, di.mlc || cont.line.color)
3435
.call(Drawing.dashLine, cont.line.dash, di.mlw || cont.line.width)
35-
.style('opacity', trace.selectedpoints && !di.selected ? 0.3 : 1);
36+
.style('opacity', trace.selectedpoints && !di.selected ? DESELECTDIM : 1);
3637
}
3738
});
3839

‎src/traces/ohlc/plot.js

-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ module.exports = function plot(gd, plotinfo, cdOHLC, ohlcLayer) {
2121
var cd0 = cd[0];
2222
var t = cd0.t;
2323
var trace = cd0.trace;
24-
if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
2524

2625
if(trace.visible !== true || t.empty) {
2726
plotGroup.remove();

‎src/traces/ohlc/style.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ var d3 = require('d3');
1212
var Drawing = require('../../components/drawing');
1313
var Color = require('../../components/color');
1414

15-
module.exports = function style(gd, cd) {
16-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
15+
module.exports = function style(gd, cd, sel) {
16+
var s = sel ? sel : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
1717

1818
s.style('opacity', function(d) {
1919
return d[0].trace.opacity;

‎src/traces/scatter/plot.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
152152
if(ownFillDir !== 'x' && ownFillDir !== 'y') ownFillDir = '';
153153

154154
// store node for tweaking by selectPoints
155-
if(!plotinfo.isRangePlot) cdscatter[0].node3 = tr;
155+
cdscatter[0][plotinfo.isRangePlot ? 'nodeRangePlot3' : 'node3'] = tr;
156156

157157
var prevRevpath = '';
158158
var prevPolygons = [];

‎src/traces/scatter/style.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ var d3 = require('d3');
1313
var Drawing = require('../../components/drawing');
1414
var Registry = require('../../registry');
1515

16-
function style(gd, cd) {
17-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.scatter');
16+
function style(gd) {
17+
var s = d3.select(gd).selectAll('g.trace.scatter');
1818

1919
s.style('opacity', function(d) {
2020
return d[0].trace.opacity;
@@ -49,16 +49,15 @@ function styleText(sel, trace, gd) {
4949
Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
5050
}
5151

52-
function styleOnSelect(gd, cd) {
53-
var s = cd[0].node3;
52+
function styleOnSelect(gd, cd, sel) {
5453
var trace = cd[0].trace;
5554

5655
if(trace.selectedpoints) {
57-
Drawing.selectedPointStyle(s.selectAll('path.point'), trace);
58-
Drawing.selectedTextStyle(s.selectAll('text'), trace);
56+
Drawing.selectedPointStyle(sel.selectAll('path.point'), trace);
57+
Drawing.selectedTextStyle(sel.selectAll('text'), trace);
5958
} else {
60-
stylePoints(s, trace, gd);
61-
styleText(s, trace, gd);
59+
stylePoints(sel, trace, gd);
60+
styleText(sel, trace, gd);
6261
}
6362
}
6463

‎src/traces/scattergeo/plot.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ module.exports = function plot(gd, geo, calcData) {
3737
gTraces.selectAll('*').remove();
3838

3939
gTraces.each(function(calcTrace) {
40-
var s = calcTrace[0].node3 = d3.select(this);
40+
var s = d3.select(this);
4141
var trace = calcTrace[0].trace;
4242

4343
if(subTypes.hasLines(trace) || trace.fill !== 'none') {

‎src/traces/scattermapbox/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ module.exports = {
1818
eventData: require('./event_data'),
1919
selectPoints: require('./select'),
2020

21-
style: function(_, cd) {
21+
styleOnSelect: function(_, cd) {
2222
if(cd) {
2323
var trace = cd[0].trace;
2424
trace._glTrace.update(cd);

‎src/traces/scatterpolar/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ module.exports = {
2020
calc: require('./calc'),
2121
plot: require('./plot'),
2222
style: require('../scatter/style').style,
23+
styleOnSelect: require('../scatter/style').styleOnSelect,
2324
hoverPoints: require('./hover').hoverPoints,
2425
selectPoints: require('../scatter/select'),
2526

‎src/traces/violin/plot.js

-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
3838
var cd0 = cd[0];
3939
var t = cd0.t;
4040
var trace = cd0.trace;
41-
if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
4241

4342
if(trace.visible !== true || t.empty) {
4443
plotGroup.remove();

‎src/traces/violin/style.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ var d3 = require('d3');
1212
var Color = require('../../components/color');
1313
var stylePoints = require('../scatter/style').stylePoints;
1414

15-
module.exports = function style(gd, cd) {
16-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.violins');
15+
module.exports = function style(gd) {
16+
var s = d3.select(gd).selectAll('g.trace.violins');
1717

1818
s.style('opacity', function(d) { return d[0].trace.opacity; });
1919

‎src/traces/waterfall/style.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ var d3 = require('d3');
1212

1313
var Drawing = require('../../components/drawing');
1414
var Color = require('../../components/color');
15+
var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
1516

1617
var styleTextPoints = require('../bar/style').styleTextPoints;
1718

18-
function style(gd, cd) {
19-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
19+
function style(gd, cd, sel) {
20+
var s = sel ? sel : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
2021

2122
s.style('opacity', function(d) { return d[0].trace.opacity; });
2223

@@ -32,7 +33,7 @@ function style(gd, cd) {
3233
.call(Color.fill, cont.color)
3334
.call(Color.stroke, cont.line.color)
3435
.call(Drawing.dashLine, cont.line.dash, cont.line.width)
35-
.style('opacity', trace.selectedpoints && !di.selected ? 0.3 : 1);
36+
.style('opacity', trace.selectedpoints && !di.selected ? DESELECTDIM : 1);
3637
}
3738
});
3839

‎test/jasmine/tests/scatter_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1452,7 +1452,7 @@ describe('Test Scatter.style', function() {
14521452
// make sure styleOnSelect (called during selection)
14531453
// gives same results as restyle
14541454
gd.calcdata.forEach(function(cd) {
1455-
Scatter.styleOnSelect(gd, cd);
1455+
Scatter.styleOnSelect(gd, cd, cd[0].node3);
14561456
});
14571457
assertPts(attr, getterFn, expectation, ' (' + msg + ' via Scatter.styleOnSelect)');
14581458
});

0 commit comments

Comments
 (0)