implement connect gaps for 2d webgl plots

Author: mikolalysenko

package.json

@@ -55,7 +55,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",

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);
@@ -461,7 +466,19 @@ proto.updateFancy = function(options) {
 
 proto.updateLines = function(options, positions) {
     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(var 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;

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"
+  }
+}