Merge pull request #589 from plotly/gl2d-fixes-for-carson

scattergl lines fixes for opacity and connectgaps

Author: etpinard

src/traces/scattergl/convert.js

@@ -107,6 +107,7 @@ var proto = LineWithMarkers.prototype;
 
 proto.handlePick = function(pickResult) {
     var index = pickResult.pointId;
+
     if(pickResult.object !== this.line || this.connectgaps) {
         index = this.idToIndex[pickResult.pointId];
     }
@@ -136,19 +137,20 @@ proto.isFancy = function(options) {
 
     if(!options.x || !options.y) return true;
 
-    var marker = options.marker || {};
-    if(Array.isArray(marker.symbol) ||
-         marker.symbol !== 'circle' ||
-         Array.isArray(marker.size) ||
-         Array.isArray(marker.line.width) ||
-         Array.isArray(marker.opacity)
-    ) return true;
-
-    var markerColor = marker.color;
-    if(Array.isArray(markerColor)) return true;
+    if(this.hasMarkers) {
+        var marker = options.marker || {};
+
+        if(Array.isArray(marker.symbol) ||
+             marker.symbol !== 'circle' ||
+             Array.isArray(marker.size) ||
+             Array.isArray(marker.color) ||
+             Array.isArray(marker.line.width) ||
+             Array.isArray(marker.line.color) ||
+             Array.isArray(marker.opacity)
+        ) return true;
+    }
 
-    var lineColor = Array.isArray(marker.line.color);
-    if(Array.isArray(lineColor)) return true;
+    if(this.hasLines && !this.connectgaps) return true;
 
     if(this.hasErrorX) return true;
     if(this.hasErrorY) return true;
@@ -471,8 +473,10 @@ proto.updateFancy = function(options) {
 
 proto.updateLines = function(options, positions) {
     var i;
+
     if(this.hasLines) {
         var linePositions = positions;
+
         if(!options.connectgaps) {
             var p = 0;
             var x = this.xData;
@@ -484,12 +488,11 @@ proto.updateLines = function(options, positions) {
                 linePositions[p++] = y[i];
             }
         }
-        this.lineOptions.positions = linePositions;
 
-        var lineColor = str2RGBArray(options.line.color);
-        if(this.hasMarkers) lineColor[3] *= options.marker.opacity;
+        this.lineOptions.positions = linePositions;
 
-        var lineWidth = Math.round(0.5 * this.lineOptions.width),
+        var lineColor = convertColor(options.line.color, options.opacity, 1),
+            lineWidth = Math.round(0.5 * this.lineOptions.width),
             dashes = (DASHES[options.line.dash] || [1]).slice();
 
         for(i = 0; i < dashes.length; ++i) dashes[i] *= lineWidth;

test/image/mocks/gl2d_line_opacity.json

@@ -0,0 +1,44 @@
+{
+  "data": [
+    {
+      "x": [
+        1,
+        2,
+        null,
+        4,
+        5
+      ],
+      "y": [
+        1,
+        2,
+        null,
+        4,
+        5
+      ],
+      "connectgaps": false,
+      "type": "scattergl",
+      "opacity": 0.4
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "type": "linear",
+      "range": [
+        0.9867209252516599,
+        5.01327907474834
+      ],
+      "autorange": true
+    },
+    "yaxis": {
+      "type": "linear",
+      "range": [
+        0.9529946929492039,
+        5.047005307050796
+      ],
+      "autorange": true
+    },
+    "height": 450,
+    "width": 1100,
+    "autosize": true
+  }
+}