add back 'x' and add 'cross-open' & 'x-open'

- fill 'cross-open' and 'x-open' with transparent
  so that they match the svg version
- N.B. 'x' does not render in `imagetest` (appears as [])
  but appears to work ok in other browsers/OS

Author: etpinard

src/constants/gl2d_markers.js

@@ -31,6 +31,19 @@ module.exports = {
     'cross': {
         unicode: '✚'
     },
+    'cross-open': {
+        unicode: '✚',
+        bwFactor: 0.5,
+        transparentFill: true
+    },
+    'x': {
+        unicode: '❌'
+    },
+    'x-open': {
+        unicode: '❌',
+        bwFactor: 0.5,
+        transparentFill: true
+    },
     'triangle-up': {
         unicode: '▲'
     },

src/traces/scattergl/convert.js

@@ -29,7 +29,7 @@ var MARKER_SYMBOLS = require('../../constants/gl2d_markers');
 var DASHES = require('../../constants/gl2d_dashes');
 
 var AXES = ['xaxis', 'yaxis'];
-
+var transparent = [0, 0, 0, 0];
 
 function LineWithMarkers(scene, uid) {
     this.scene = scene;
@@ -255,6 +255,12 @@ function isSymbolOpen(symbol) {
     return symbol.split('-open')[1] === '';
 }
 
+function fillColor(colorIn, colorOut, offsetIn, offsetOut) {
+    for(var j = 0; j < 4; j++) {
+        colorIn[4 * offsetIn + j] = colorOut[4 * offsetOut + j];
+    }
+}
+
 proto.update = function(options) {
     if(options.visible !== true) {
         this.isVisible = false;
@@ -444,7 +450,7 @@ proto.updateFancy = function(options) {
     var getX = (xaxis.type === 'log') ? xaxis.d2l : function(x) { return x; };
     var getY = (yaxis.type === 'log') ? yaxis.d2l : function(y) { return y; };
 
-    var i, j, xx, yy, ex0, ex1, ey0, ey1;
+    var i, xx, yy, ex0, ex1, ey0, ey1;
 
     for(i = 0; i < len; ++i) {
         this.xData[i] = xx = getX(x[i]);
@@ -529,10 +535,12 @@ proto.updateFancy = function(options) {
             this.scatter.options.glyphs[i] = symbolSpec.unicode;
             this.scatter.options.borderWidths[i] = bwFactor * borderWidths[index];
 
-            for(j = 0; j < 4; ++j) {
-                this.scatter.options.colors[4 * i + j] = _colors[4 * index + j];
-                this.scatter.options.borderColors[4 * i + j] = _borderColors[4 * index + j];
+            if(symbolSpec.transparentFill) {
+                fillColor(this.scatter.options.colors, transparent, i, 0);
+            } else {
+                fillColor(this.scatter.options.colors, _colors, i, index);
             }
+            fillColor(this.scatter.options.borderColors, _borderColors, i, index);
         }
 
         this.fancyScatter.update();

test/image/baselines/gl2d_marker_symbols.png

@@ -151,7 +151,7 @@
           20,
           20,
           20,
-          1,
+          20,
           20,
           20,
           20,
@@ -203,7 +203,7 @@
         "marker symbol: square",
         "marker symbol: diamond",
         "marker symbol: cross",
-        "marker symbol: x<br>NOT AVAILABLE",
+        "marker symbol: x",
         "marker symbol: triangle-up",
         "marker symbol: triangle-down",
         "marker symbol: triangle-left",
@@ -397,8 +397,8 @@
           20,
           20,
           20,
-          1,
-          1,
+          20,
+          20,
           20,
           20,
           20,
@@ -449,8 +449,8 @@
         "marker symbol: circle-open",
         "marker symbol: square-open",
         "marker symbol: diamond-open",
-        "marker symbol: cross-open<br>NOT AVAILABLE",
-        "marker symbol: x-open<br>NOT AVAILABLE",
+        "marker symbol: cross-open",
+        "marker symbol: x-open",
         "marker symbol: triangle-up-open",
         "marker symbol: triangle-down-open",
         "marker symbol: triangle-left-open",
@@ -1007,6 +1007,7 @@
       "zeroline": false
     },
     "showlegend": false,
-    "hovermode": "closest"
+    "hovermode": "closest",
+    "plot_bgcolor": "#d3d3d3"
   }
-}
+}