Skip to content

Commit 4f8f055

Browse files
etpinardetpinard
committed
Merge pull request #459 from plotly/surface-highlight
Make surface contour highlights on hover toggleable
2 parents c067cc7 + 07f318a commit 4f8f055

File tree

9 files changed

+169
-35
lines changed

9 files changed

+169
-35
lines changed

‎src/plot_api/plot_api.js‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -659,25 +659,25 @@ function cleanAxRef(container, attr) {
659659
}
660660
}
661661

662+
// Make a few changes to the data right away
663+
// before it gets used for anything
662664
function cleanData(data, existingData) {
663-
// make a few changes to the data right away
664-
// before it gets used for anything
665665

666-
/*
667-
* Enforce unique IDs
668-
*/
666+
// Enforce unique IDs
669667
var suids = [], // seen uids --- so we can weed out incoming repeats
670668
uids = data.concat(Array.isArray(existingData) ? existingData : [])
671669
.filter(function(trace) { return 'uid' in trace; })
672670
.map(function(trace) { return trace.uid; });
673671

674672
for(var tracei = 0; tracei < data.length; tracei++) {
675673
var trace = data[tracei];
674+
var i;
676675

677676
// assign uids to each trace and detect collisions.
678677
if(!('uid' in trace) || suids.indexOf(trace.uid) !== -1) {
679-
var newUid, i;
680-
for(i=0; i<100; i++) {
678+
var newUid;
679+
680+
for(i = 0; i < 100; i++) {
681681
newUid = Lib.randstr(uids);
682682
if(suids.indexOf(newUid)===-1) break;
683683
}
@@ -765,6 +765,27 @@ function cleanData(data, existingData) {
765765
if(cont.colorscale === 'YIOrRd') cont.colorscale = 'YlOrRd';
766766
}
767767

768+
// fix typo in surface 'highlight*' definitions
769+
if(trace.type === 'surface' && Lib.isPlainObject(trace.contours)) {
770+
var dims = ['x', 'y', 'z'];
771+
772+
for(i = 0; i < dims.length; i++) {
773+
var opts = trace.contours[dims[i]];
774+
775+
if(!Lib.isPlainObject(opts)) continue;
776+
777+
if(opts.highlightColor) {
778+
opts.highlightcolor = opts.highlightColor;
779+
delete opts.highlightColor;
780+
}
781+
782+
if(opts.highlightWidth) {
783+
opts.highlightwidth = opts.highlightWidth;
784+
delete opts.highlightWidth;
785+
}
786+
}
787+
}
788+
768789
// prune empty containers made before the new nestedProperty
769790
if(emptyContainer(trace, 'line')) delete trace.line;
770791
if('marker' in trace) {

‎src/plots/gl3d/layout/axis_attributes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
'use strict';
1010

11-
11+
var Color = require('../../../components/color');
1212
var axesAttrs = require('../../cartesian/layout_attributes');
1313
var extendFlat = require('../../../lib/extend').extendFlat;
1414

@@ -43,7 +43,7 @@ module.exports = {
4343
spikecolor: {
4444
valType: 'color',
4545
role: 'style',
46-
dflt: 'rgb(0,0,0)',
46+
dflt: Color.defaultLine,
4747
description: 'Sets the color of the spikes.'
4848
},
4949
showbackground: {

‎src/plots/gl3d/layout/axis_defaults.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99

1010
'use strict';
11+
1112
var colorMix = require('tinycolor2').mix;
1213

1314
var Lib = require('../../../lib');

‎src/traces/surface/attributes.js‎

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
'use strict';
1111

12+
var Color = require('../../components/color');
1213
var colorscaleAttrs = require('../../components/colorscale/attributes');
1314
var extendFlat = require('../../lib/extend').extendFlat;
1415

@@ -19,8 +20,12 @@ function makeContourProjAttr(axLetter) {
1920
role: 'info',
2021
dflt: false,
2122
description: [
22-
'Sets whether or not the dynamic contours are projected',
23-
'along the', axLetter, 'axis.'
23+
'Determines whether or not these contour lines are projected',
24+
'on the', axLetter, 'axis walls.',
25+
'If `highlight` is set to *true* (the default), the projected',
26+
'lines are shown on hover.',
27+
'If `show` is set to *true*, the projected lines are shown',
28+
'in permanence.'
2429
].join(' ')
2530
};
2631
}
@@ -32,8 +37,8 @@ function makeContourAttr(axLetter) {
3237
role: 'info',
3338
dflt: false,
3439
description: [
35-
'Sets whether or not dynamic contours are shown along the',
36-
axLetter, 'axis'
40+
'Determines whether or not contour lines about the', axLetter,
41+
'dimension are drawn.'
3742
].join(' ')
3843
},
3944
project: {
@@ -44,36 +49,49 @@ function makeContourAttr(axLetter) {
4449
color: {
4550
valType: 'color',
4651
role: 'style',
47-
dflt: '#000'
52+
dflt: Color.defaultLine,
53+
description: 'Sets the color of the contour lines.'
4854
},
4955
usecolormap: {
5056
valType: 'boolean',
5157
role: 'info',
52-
dflt: false
58+
dflt: false,
59+
description: [
60+
'An alternate to *color*.',
61+
'Determines whether or not the contour lines are colored using',
62+
'the trace *colorscale*.'
63+
].join(' ')
5364
},
5465
width: {
5566
valType: 'number',
5667
role: 'style',
5768
min: 1,
5869
max: 16,
59-
dflt: 2
70+
dflt: 2,
71+
description: 'Sets the width of the contour lines.'
6072
},
6173
highlight: {
6274
valType: 'boolean',
6375
role: 'info',
64-
dflt: false
76+
dflt: true,
77+
description: [
78+
'Determines whether or not contour lines about the', axLetter,
79+
'dimension are highlighted on hover.'
80+
].join(' ')
6581
},
66-
highlightColor: {
82+
highlightcolor: {
6783
valType: 'color',
6884
role: 'style',
69-
dflt: '#000'
85+
dflt: Color.defaultLine,
86+
description: 'Sets the color of the highlighted contour lines.'
7087
},
71-
highlightWidth: {
88+
highlightwidth: {
7289
valType: 'number',
7390
role: 'style',
7491
min: 1,
7592
max: 16,
76-
dflt: 2
93+
dflt: 2,
94+
description: 'Sets the width of the highlighted contour lines.'
7795
}
7896
};
7997
}
@@ -102,6 +120,7 @@ module.exports = {
102120
'used for setting a color scale independent of `z`.'
103121
].join(' ')
104122
},
123+
105124
cauto: colorscaleAttrs.zauto,
106125
cmin: colorscaleAttrs.zmin,
107126
cmax: colorscaleAttrs.zmax,
@@ -110,6 +129,7 @@ module.exports = {
110129
{dflt: false}),
111130
reversescale: colorscaleAttrs.reversescale,
112131
showscale: colorscaleAttrs.showscale,
132+
113133
contours: {
114134
x: makeContourAttr('x'),
115135
y: makeContourAttr('y'),
@@ -118,8 +138,15 @@ module.exports = {
118138
hidesurface: {
119139
valType: 'boolean',
120140
role: 'info',
121-
dflt: false
141+
dflt: false,
142+
description: [
143+
'Determines whether or not a surface is drawn.',
144+
'For example, set `hidesurface` to *false*',
145+
'`contours.x.show` to *true* and',
146+
'`contours.y.show` to *true* to draw a wire frame plot.'
147+
].join(' ')
122148
},
149+
123150
lighting: {
124151
ambient: {
125152
valType: 'number',
@@ -163,7 +190,8 @@ module.exports = {
163190
role: 'style',
164191
min: 0,
165192
max: 1,
166-
dflt: 1
193+
dflt: 1,
194+
description: 'Sets the opacity of the surface.'
167195
},
168196

169197
_nestedModules: { // nested module coupling

‎src/traces/surface/convert.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -280,13 +280,11 @@ proto.update = function(data) {
280280
}
281281

282282
var highlightEnable = [true, true, true];
283-
var contourEnable = [true, true, true];
284283
var axis = ['x', 'y', 'z'];
285284

286285
for(i = 0; i < 3; ++i) {
287286
var contourParams = data.contours[axis[i]];
288287
highlightEnable[i] = contourParams.highlight;
289-
contourEnable[i] = contourParams.show;
290288

291289
params.showContour[i] = contourParams.show || contourParams.highlight;
292290
if(!params.showContour[i]) continue;
@@ -301,6 +299,7 @@ proto.update = function(data) {
301299
this.showContour[i] = true;
302300
params.levels[i] = contourLevels[i];
303301
surface.highlightColor[i] = params.contourColor[i] = str2RgbaArray(contourParams.color);
302+
304303
if(contourParams.usecolormap) {
305304
surface.highlightTint[i] = params.contourTint[i] = 0;
306305
}
@@ -313,18 +312,17 @@ proto.update = function(data) {
313312
}
314313

315314
if(contourParams.highlight) {
316-
params.dynamicColor[i] = str2RgbaArray(contourParams.highlightColor);
317-
params.dynamicWidth[i] = contourParams.highlightWidth;
315+
params.dynamicColor[i] = str2RgbaArray(contourParams.highlightcolor);
316+
params.dynamicWidth[i] = contourParams.highlightwidth;
318317
}
319318
}
320319

321320
params.coords = coords;
322321

323322
surface.update(params);
324323

325-
surface.highlightEnable = highlightEnable;
326-
surface.contourEnable = contourEnable;
327324
surface.visible = data.visible;
325+
surface.enableDynamic = highlightEnable;
328326

329327
surface.snapToData = true;
330328

‎src/traces/surface/defaults.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
8282
}
8383

8484
if(highlight) {
85-
coerce(contourDim + '.highlightColor');
86-
coerce(contourDim + '.highlightWidth');
85+
coerce(contourDim + '.highlightcolor');
86+
coerce(contourDim + '.highlightwidth');
8787
}
8888
}
8989

@@ -94,6 +94,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
9494
mapLegacy(traceIn, 'zauto', 'cauto');
9595
}
9696

97+
// TODO if contours.?.usecolormap are false and hidesurface is true
98+
// the colorbar shouldn't be shown by default
99+
97100
colorscaleDefaults(
98101
traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'c'}
99102
);

‎test/image/baselines/gl3d_contour-lines.png‎

-716 Bytes
Loading

‎test/jasmine/tests/plot_api_test.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -689,5 +689,71 @@ describe('Test plot api', function() {
689689
Plotly.plot(gd, data);
690690
expect(gd.data[0].marker.colorscale).toBe('YlOrRd');
691691
});
692+
693+
it('should rename \'highlightColor\' to \'highlightcolor\')', function() {
694+
var data = [{
695+
type: 'surface',
696+
contours: {
697+
x: { highlightColor: 'red' },
698+
y: { highlightcolor: 'blue' }
699+
}
700+
}, {
701+
type: 'surface'
702+
}, {
703+
type: 'surface',
704+
contours: false
705+
}, {
706+
type: 'surface',
707+
contours: {
708+
stuff: {},
709+
x: false,
710+
y: []
711+
}
712+
}];
713+
714+
spyOn(Plots.subplotsRegistry.gl3d, 'plot');
715+
716+
Plotly.plot(gd, data);
717+
718+
expect(Plots.subplotsRegistry.gl3d.plot).toHaveBeenCalled();
719+
720+
var contours = gd.data[0].contours;
721+
722+
expect(contours.x.highlightColor).toBeUndefined();
723+
expect(contours.x.highlightcolor).toEqual('red');
724+
expect(contours.y.highlightcolor).toEqual('blue');
725+
expect(contours.z).toBeUndefined();
726+
727+
expect(gd.data[1].contours).toBeUndefined();
728+
expect(gd.data[2].contours).toBe(false);
729+
expect(gd.data[3].contours).toEqual({ stuff: {}, x: false, y: [] });
730+
});
731+
732+
it('should rename \'highlightWidth\' to \'highlightwidth\')', function() {
733+
var data = [{
734+
type: 'surface',
735+
contours: {
736+
z: { highlightwidth: 'red' },
737+
y: { highlightWidth: 'blue' }
738+
}
739+
}, {
740+
type: 'surface'
741+
}];
742+
743+
spyOn(Plots.subplotsRegistry.gl3d, 'plot');
744+
745+
Plotly.plot(gd, data);
746+
747+
expect(Plots.subplotsRegistry.gl3d.plot).toHaveBeenCalled();
748+
749+
var contours = gd.data[0].contours;
750+
751+
expect(contours.x).toBeUndefined();
752+
expect(contours.y.highlightwidth).toEqual('blue');
753+
expect(contours.z.highlightWidth).toBeUndefined();
754+
expect(contours.z.highlightwidth).toEqual('red');
755+
756+
expect(gd.data[1].contours).toBeUndefined();
757+
});
692758
});
693759
});

0 commit comments

Comments
 (0)