diff --git a/src/traces/scattergl/convert.js b/src/traces/scattergl/convert.js index d05beb344ac..e1c405b938a 100644 --- a/src/traces/scattergl/convert.js +++ b/src/traces/scattergl/convert.js @@ -21,6 +21,7 @@ var subTypes = require('../scatter/subtypes'); var makeBubbleSizeFn = require('../scatter/make_bubble_size_func'); var constants = require('./constants'); +var DESELECTDIM = require('../../constants/interactions').DESELECTDIM; function convertStyle(gd, trace) { var i; @@ -41,6 +42,14 @@ function convertStyle(gd, trace) { opts.marker = convertMarkerStyle(trace); opts.selected = convertMarkerSelection(trace, trace.selected); opts.unselected = convertMarkerSelection(trace, trace.unselected); + + if(!trace.unselected && Array.isArray(trace.marker.opacity)) { + var mo = trace.marker.opacity; + opts.unselected.opacity = new Array(mo.length); + for(i = 0; i < mo.length; i++) { + opts.unselected.opacity[i] = DESELECTDIM * mo[i]; + } + } } if(subTypes.hasLines(trace)) { diff --git a/test/image/baselines/gl2d_selectedpoints.png b/test/image/baselines/gl2d_selectedpoints.png new file mode 100644 index 00000000000..00f8f43aede Binary files /dev/null and b/test/image/baselines/gl2d_selectedpoints.png differ diff --git a/test/image/mocks/gl2d_selectedpoints.json b/test/image/mocks/gl2d_selectedpoints.json new file mode 100644 index 00000000000..923c2e2bbd9 --- /dev/null +++ b/test/image/mocks/gl2d_selectedpoints.json @@ -0,0 +1,33 @@ +{ + "data": [{ + "name": "array marker opacity edge case", + "type": "scattergl", + "mode": "markers", + "x": [1, 2, 3, 4, 5, 6], + "y": [1, 3, 2, 4, 5, 7], + "marker": { + "size": 20, + "opacity": [0.9, 0.8, 0.7, 1, 0.6, 0.8] + }, + "selectedpoints": [1, 4, 2] + }, { + "name": "array marker opacity + set unselected.marker.opacity", + "type": "scattergl", + "mode": "markers", + "x": [1, 2, 3, 4, 5, 6], + "y": [3, 5, 4, 6, 7, 9], + "marker": { + "size": 20, + "opacity": [0.9, 0.8, 0.7, 1, 0.6, 0.8] + }, + "unselected": { + "marker": { + "opacity": 0 + } + }, + "selectedpoints": [1, 4, 2] + }], + "layout": { + "showlegend": false + } +}