diff --git a/package.json b/package.json index d958e854e0a..4c9ff14a004 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "regl": "^1.3.1", "regl-error2d": "^2.0.3", "regl-line2d": "^2.1.2", - "regl-scatter2d": "^2.1.11", + "regl-scatter2d": "^2.1.12", "right-now": "^1.0.0", "robust-orientation": "^1.1.3", "sane-topojson": "^2.0.0", diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js index 3ee553e6992..f8d00352358 100644 --- a/src/traces/scattergl/index.js +++ b/src/traces/scattergl/index.js @@ -387,12 +387,30 @@ function sceneOptions(container, subplot, trace, positions) { if(hasMarkers) { markerOptions = makeMarkerOptions(markerOpts); - selectedOptions = trace.selected ? makeMarkerOptions(extend({}, markerOpts, trace.selected.marker)) : markerOptions; - unselectedOptions = trace.unselected ? makeMarkerOptions(extend({}, markerOpts, trace.unselected.marker)) : markerOptions; + selectedOptions = makeSelectedOptions(trace.selected, markerOpts); + unselectedOptions = makeSelectedOptions(trace.unselected, markerOpts); markerOptions.positions = positions; } + function makeSelectedOptions(selected, markerOpts) { + var options = {}; + + if(selected.marker.symbol) { + options = makeMarkerOptions(extend({}, markerOpts, selected.marker)); + } + + // shortcut simple selection logic + else { + options = {}; + if(selected.marker.size) options.sizes = selected.marker.size; + if(selected.marker.color) options.colors = selected.marker.color; + if(selected.marker.opacity !== undefined) options.opacity = selected.marker.opacity; + } + + return options; + } + function makeMarkerOptions(markerOpts) { var markerOptions = {}, i; @@ -911,7 +929,7 @@ function plot(container, subplot, cdata) { if(!scene.select2d && scene.scatter2d) { var selectRegl = layout._glcanvas.data()[1].regl; - // smol hack to create scatter instance by cloning scatter2d + // create scatter instance by cloning scatter2d scene.select2d = createScatter(selectRegl, {clone: scene.scatter2d}); scene.select2d.update(scene.selectedOptions); diff --git a/test/jasmine/tests/gl2d_plot_interact_test.js b/test/jasmine/tests/gl2d_plot_interact_test.js index 625250504ca..b2acdce3c53 100644 --- a/test/jasmine/tests/gl2d_plot_interact_test.js +++ b/test/jasmine/tests/gl2d_plot_interact_test.js @@ -378,7 +378,7 @@ describe('Test gl2d plots', function() { .then(done); }); - it('@noCI should display selection of big number of points', function(done) { + it('@noCI should display selection of big number of regular points', function(done) { // generate large number of points var x = [], y = [], n = 2e2, N = n * n; for(var i = 0; i < N; i++) { @@ -406,6 +406,46 @@ describe('Test gl2d plots', function() { .then(done); }); + + it('@noCI should display selection of big number of miscellaneous points', function(done) { + var colorList = [ + '#006385', '#F06E75', '#90ed7d', '#f7a35c', '#8085e9', + '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1', + '#5DA5DA', '#F06E75', '#F15854', '#B2912F', '#B276B2', + '#DECF3F', '#FAA43A', '#4D4D4D', '#F17CB0', '#60BD68' + ]; + + // generate large number of points + var x = [], y = [], n = 2e2, N = n * n, color = [], symbol = [], size = []; + for(var i = 0; i < N; i++) { + x.push((i % n) / n); + y.push(i / N); + color.push(colorList[i % colorList.length]); + symbol.push('x'); + size.push(6); + } + + var mock = { + data: [{ + x: x, y: y, type: 'scattergl', mode: 'markers', + marker: {symbol: symbol, size: size, color: color} + }], + layout: { + dragmode: 'select' + } + }; + + Plotly.plot(gd, mock) + .then(select([[160, 100], [180, 100]])) + .then(function() { + expect(readPixel(gd.querySelector('.gl-canvas-context'), 168, 100)[3]).toBe(0); + expect(readPixel(gd.querySelector('.gl-canvas-context'), 158, 100)[3]).not.toBe(0); + expect(readPixel(gd.querySelector('.gl-canvas-focus'), 168, 100)[3]).not.toBe(0); + }) + .catch(fail) + .then(done); + }); + it('should be able to toggle from svg to gl', function(done) { Plotly.plot(gd, [{ y: [1, 2, 1],