Implement connect gaps for 2d WebGL plots

package.json

@@ -28,6 +28,7 @@
     "cibuild": "node tasks/cibundle.js",
     "watch": "node tasks/watch_plotly.js",
     "lint": "eslint . || true",
+    "lint-fix": "eslint . --fix",
     "test-jasmine": "karma start test/jasmine/karma.conf.js",
     "citest-jasmine": "karma start test/jasmine/karma.ciconf.js",
     "test-image": "./tasks/test_image.sh",
@@ -55,7 +56,7 @@
     "gl-error2d": "^1.0.0",
     "gl-error3d": "^1.0.0",
     "gl-heatmap2d": "^1.0.2",
-    "gl-line2d": "^1.2.1",
+    "gl-line2d": "^1.3.0",
     "gl-line3d": "^1.1.0",
     "gl-mat4": "^1.1.2",
     "gl-mesh3d": "^1.0.7",
@@ -85,7 +86,7 @@
     "browserify": "^13.0.0",
     "browserify-transform-tools": "^1.5.1",
     "ecstatic": "^1.4.0",
-    "eslint": "^2.1.0",
+    "eslint": "^2.8.0",
     "falafel": "^1.2.0",
     "fs-extra": "^0.27.0",
     "fuse.js": "^2.2.0",

src/traces/scattergl/attributes.js

@@ -86,6 +86,7 @@ module.exports = {
             reversescale: scatterMarkerLineAttrs.reversescale
         }
     },
+    connectgaps: scatterAttrs.connectgaps,
     fill: extendFlat({}, scatterAttrs.fill, {
         values: ['none', 'tozeroy', 'tozerox']
     }),

src/traces/scattergl/convert.js

@@ -39,6 +39,7 @@ function LineWithMarkers(scene, uid) {
     this.color = 'rgb(0, 0, 0)';
     this.name = '';
     this.hoverinfo = 'all';
+    this.connectgaps = true;
 
     this.idToIndex = [];
     this.bounds = [0, 0, 0, 0];
@@ -103,7 +104,10 @@ function LineWithMarkers(scene, uid) {
 var proto = LineWithMarkers.prototype;
 
 proto.handlePick = function(pickResult) {
-    var index = this.idToIndex[pickResult.pointId];
+    var index = pickResult.pointId;
+    if(pickResult.object !== this.line || this.connectgaps) {
+        index = this.idToIndex[pickResult.pointId];
+    }
 
     return {
         trace: this,
@@ -248,6 +252,7 @@ proto.update = function(options) {
     this.name = options.name;
     this.hoverinfo = options.hoverinfo;
     this.bounds = [Infinity, Infinity, -Infinity, -Infinity];
+    this.connectgaps = !!options.connectgaps;
 
     if(this.isFancy(options)) {
         this.updateFancy(options);
@@ -460,16 +465,29 @@ proto.updateFancy = function(options) {
 };
 
 proto.updateLines = function(options, positions) {
+    var i;
     if(this.hasLines) {
-        this.lineOptions.positions = positions;
+        var linePositions = positions;
+        if(!options.connectgaps) {
+            var p = 0;
+            var x = this.xData;
+            var y = this.yData;
+            linePositions = new Float32Array(2 * x.length);
+
+            for(i=0; i<x.length; ++i) {
+                linePositions[p++] = x[i];
+                linePositions[p++] = y[i];
+            }
+        }
+        this.lineOptions.positions = linePositions;
 
         var lineColor = str2RGBArray(options.line.color);
         if(this.hasMarkers) lineColor[3] *= options.marker.opacity;
 
         var lineWidth = Math.round(0.5 * this.lineOptions.width),
             dashes = (DASHES[options.line.dash] || [1]).slice();
 
-        for(var i = 0; i < dashes.length; ++i) dashes[i] *= lineWidth;
+        for(i = 0; i < dashes.length; ++i) dashes[i] *= lineWidth;
 
         switch(options.fill) {
             case 'tozeroy':

src/traces/scattergl/defaults.js

@@ -37,6 +37,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('mode', len < constants.PTS_LINESONLY ? 'lines+markers' : 'lines');
 
     if(subTypes.hasLines(traceOut)) {
+        coerce('connectgaps');
         handleLineDefaults(traceIn, traceOut, defaultColor, coerce);
     }
 

test/image/mocks/gl2d_connect_gaps.json

@@ -0,0 +1,21 @@
+{
+  "data": [
+    {
+      "x": [1, 2, 3, 4, 5],
+      "y": [1, 1, null, -1, -1],
+      "connectgaps": false,
+      "mode": "lines",
+      "type": "scattergl"
+    },
+    {
+      "x": [1, 2, 3, 4, 5],
+      "y": [-2, -2, null, 2, 2],
+      "connectgaps": true,
+      "mode": "lines",
+      "type": "scattergl"
+    }
+  ],
+  "layout": {
+    "title": "Connect gaps test"
+  }
+}