Fix color clustering

package.json

@@ -99,8 +99,8 @@
     "polybooljs": "^1.2.0",
     "regl": "^1.3.1",
     "regl-error2d": "^2.0.3",
-    "regl-line2d": "^2.1.4",
-    "regl-scatter2d": "^2.1.13",
+    "regl-line2d": "^2.1.5",
+    "regl-scatter2d": "^2.1.17",
     "right-now": "^1.0.0",
     "robust-orientation": "^1.1.3",
     "sane-topojson": "^2.0.0",
@@ -119,18 +119,18 @@
     "check-node-version": "^3.2.0",
     "deep-equal": "^1.0.1",
     "ecstatic": "^3.2.0",
-    "eslint": "^4.17.0",
+    "eslint": "^4.18.0",
     "falafel": "^2.0.0",
     "fs-extra": "^2.0.0",
     "fuse.js": "^3.2.0",
     "glob": "^7.0.0",
     "gzip-size": "^4.1.0",
     "image-size": "^0.6.2",
     "into-stream": "^3.1.0",
-    "jasmine-core": "^2.4.1",
+    "jasmine-core": "^2.99.1",
     "jsdom": "^11.6.2",
     "karma": "^2.0.0",
-    "karma-browserify": "^5.1.1",
+    "karma-browserify": "^5.2.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.0.0",
     "karma-firefox-launcher": "^1.0.1",

src/traces/scattergl/index.js

@@ -779,9 +779,9 @@ function plot(container, subplot, cdata) {
         }
         // fill requires linked traces, so we generate it's positions here
         if(scene.fill2d) {
-            scene.fillOptions.forEach(function(fillOptions, i) {
+            scene.fillOptions = scene.fillOptions.map(function(fillOptions, i) {
                 var cdscatter = cdata[i];
-                if(!fillOptions || !cdscatter || !cdscatter[0] || !cdscatter[0].trace) return;
+                if(!fillOptions || !cdscatter || !cdscatter[0] || !cdscatter[0].trace) return null;
                 var cd = cdscatter[0];
                 var trace = cd.trace;
                 var stash = cd.t;
@@ -861,6 +861,8 @@ function plot(container, subplot, cdata) {
 
                 fillOptions.opacity = trace.opacity;
                 fillOptions.positions = pos;
+
+                return fillOptions;
             });
 
             scene.fill2d.update(scene.fillOptions);
@@ -945,7 +947,7 @@ function plot(container, subplot, cdata) {
             scene.select2d = createScatter(layout._glcanvas.data()[1].regl, {clone: scene.scatter2d});
         }
 
-        if(scene.scatter2d) {
+        if(scene.scatter2d && scene.selectBatch && scene.selectBatch.length) {
             // update only traces with selection
             scene.scatter2d.update(scene.unselectedOptions.map(function(opts, i) {
                 return scene.selectBatch[i] ? opts : null;

test/jasmine/tests/gl2d_plot_interact_test.js

@@ -648,7 +648,6 @@ describe('@gl Test gl2d plots', function() {
         .then(done);
     });
 
-
     it('should not scroll document while panning', function(done) {
         var mock = {
             data: [
@@ -773,4 +772,64 @@ describe('@gl Test gl2d plots', function() {
         .catch(fail)
         .then(done);
     });
+
+    it('should remove fill2d', function(done) {
+        var mock = require('@mocks/gl2d_axes_labels2.json');
+
+        Plotly.plot(gd, mock.data, mock.layout)
+        .then(delay(1000))
+        .then(function() {
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 100, 80)[0]).not.toBe(0);
+
+            return Plotly.restyle(gd, {fill: 'none'});
+        })
+        .then(function() {
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 100, 80)[0]).toBe(0);
+        })
+        .catch(fail)
+        .then(done);
+    });
+
+    it('should be able to draw more than 4096 colors', function(done) {
+        var gd = createGraphDiv();
+        var x = [];
+        var color = [];
+        var N = 1e5;
+        var w = 500;
+        var h = 500;
+
+        for(var i = 0; i < N; i++) {
+            x.push(i);
+            color.push(Math.random());
+        }
+
+        Plotly.newPlot(gd, [{
+            type: 'scattergl',
+            mode: 'markers',
+            x: x,
+            y: color,
+            marker: {
+                color: color,
+                colorscale: [
+                    [0, 'rgb(255, 0, 0)'],
+                    [0.5, 'rgb(0, 255, 0)'],
+                    [1.0, 'rgb(0, 0, 255)']
+                ]
+            }
+        }], {
+            width: w,
+            height: h,
+            margin: {l: 0, t: 0, b: 0, r: 0}
+        })
+        .then(function() {
+            var total = readPixel(gd.querySelector('.gl-canvas-context'), 0, 0, w, h)
+                .reduce(function(acc, v) { return acc + v; }, 0);
+
+            // the total value was 3762487 before PR
+            // https://github.com/plotly/plotly.js/pull/2377
+            expect(total).toBeGreaterThan(4e6);
+        })
+        .catch(fail)
+        .then(done);
+    });
 });