More gl2d symbols!

package.json

@@ -64,6 +64,7 @@
     "delaunay-triangulate": "^1.1.6",
     "es6-promise": "^3.0.2",
     "fast-isnumeric": "^1.1.1",
+    "font-atlas-sdf": "^1.3.3",
     "gl-contour2d": "^1.1.2",
     "gl-error2d": "^1.2.1",
     "gl-error3d": "^1.0.6",
@@ -76,7 +77,7 @@
     "gl-plot3d": "^1.5.4",
     "gl-pointcloud2d": "^1.0.0",
     "gl-scatter2d": "^1.2.2",
-    "gl-scatter2d-sdf": "^1.3.9",
+    "gl-scatter2d-sdf": "^1.3.10",
     "gl-scatter3d": "^1.0.4",
     "gl-select-box": "^1.0.1",
     "gl-shader": "4.2.0",

src/constants/gl2d_markers.js

@@ -0,0 +1,132 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var extendFlat = require('../lib/extend').extendFlat;
+
+var symbolsWithOpenSupport = {
+    'circle': {
+        unicode: '●'
+    },
+    'square': {
+        unicode: '■'
+    },
+    'diamond': {
+        unicode: '◆'
+    },
+    'cross': {
+        unicode: '✚'
+    },
+    'x': {
+        unicode: '❌'
+    },
+    'triangle-up': {
+        unicode: '▲'
+    },
+    'triangle-down': {
+        unicode: '▼'
+    },
+    'triangle-left': {
+        unicode: '◄'
+    },
+    'triangle-right': {
+        unicode: '►'
+    },
+    'triangle-ne': {
+        unicode: '◥'
+    },
+    'triangle-nw': {
+        unicode: '◤'
+    },
+    'triangle-se': {
+        unicode: '◢'
+    },
+    'triangle-sw': {
+        unicode: '◣'
+    },
+    'pentagon': {
+        unicode: '⬟'
+    },
+    'hexagon': {
+        unicode: '⬢'
+    },
+    'hexagon2': {
+        unicode: '⬣'
+    },
+    'star': {
+        unicode: '★'
+    },
+    'diamond-tall': {
+        unicode: '♦'
+    },
+    'bowtie': {
+        unicode: '⧓'
+    },
+    'diamond-x': {
+        unicode: '❖'
+    },
+    'cross-thin': {
+        unicode: '+',
+        noBorder: true
+    },
+    'asterisk': {
+        unicode: '✳',
+        noBorder: true
+    },
+    'y-up': {
+        unicode: '⅄',
+        noBorder: true
+    },
+    'y-down': {
+        unicode: 'Y',
+        noBorder: true
+    },
+    'line-ew': {
+        unicode: '─',
+        noBorder: true
+    },
+    'line-ns': {
+        unicode: '│',
+        noBorder: true
+    }
+};
+
+var openSymbols = {};
+var keys = Object.keys(symbolsWithOpenSupport);
+
+for(var i = 0; i < keys.length; i++) {
+    var k = keys[i];
+    openSymbols[k + '-open'] = extendFlat({}, symbolsWithOpenSupport[k]);
+}
+
+var otherSymbols = {
+    'circle-cross-open': {
+        unicode: '⨁',
+        noFill: true
+    },
+    'circle-x-open': {
+        unicode: '⨂',
+        noFill: true
+    },
+    'square-cross-open': {
+        unicode: '⊞',
+        noFill: true
+    },
+    'square-x-open': {
+        unicode: '⊠',
+        noFill: true
+    }
+};
+
+module.exports = extendFlat({},
+    symbolsWithOpenSupport,
+    openSymbols,
+    otherSymbols
+);

src/traces/scatter3d/attributes.js

@@ -13,7 +13,7 @@ var colorAttributes = require('../../components/colorscale/color_attributes');
 var errorBarAttrs = require('../../components/errorbars/attributes');
 var DASHES = require('../../constants/gl3d_dashes');
 
-var MARKER_SYMBOLS = require('../../constants/gl_markers');
+var MARKER_SYMBOLS = require('../../constants/gl3d_markers');
 var extendFlat = require('../../lib/extend').extendFlat;
 
 var scatterLineAttrs = scatterAttrs.line,

src/traces/scatter3d/convert.js

@@ -20,7 +20,7 @@ var str2RgbaArray = require('../../lib/str2rgbarray');
 var formatColor = require('../../lib/gl_format_color');
 var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var DASH_PATTERNS = require('../../constants/gl3d_dashes');
-var MARKER_SYMBOLS = require('../../constants/gl_markers');
+var MARKER_SYMBOLS = require('../../constants/gl3d_markers');
 
 var calculateError = require('./calc_errors');
 

src/traces/scatter3d/index.js

@@ -12,7 +12,7 @@ var Scatter3D = {};
 
 Scatter3D.plot = require('./convert');
 Scatter3D.attributes = require('./attributes');
-Scatter3D.markerSymbols = require('../../constants/gl_markers');
+Scatter3D.markerSymbols = require('../../constants/gl3d_markers');
 Scatter3D.supplyDefaults = require('./defaults');
 Scatter3D.colorbar = require('../scatter/colorbar');
 Scatter3D.calc = require('./calc');

src/traces/scattergl/attributes.js

@@ -12,7 +12,7 @@ var scatterAttrs = require('../scatter/attributes');
 var colorAttributes = require('../../components/colorscale/color_attributes');
 
 var DASHES = require('../../constants/gl2d_dashes');
-var MARKERS = require('../../constants/gl_markers');
+var MARKERS = require('../../constants/gl2d_markers');
 var extendFlat = require('../../lib/extend').extendFlat;
 var extendDeep = require('../../lib/extend').extendDeep;
 

src/traces/scattergl/convert.js

@@ -25,11 +25,11 @@ var formatColor = require('../../lib/gl_format_color');
 var subTypes = require('../scatter/subtypes');
 var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var getTraceColor = require('../scatter/get_trace_color');
-var MARKER_SYMBOLS = require('../../constants/gl_markers');
+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;
@@ -214,7 +214,7 @@ function _convertArray(convert, data, count) {
 var convertNumber = convertArray.bind(null, function(x) { return +x; });
 var convertColorBase = convertArray.bind(null, str2RGBArray);
 var convertSymbol = convertArray.bind(null, function(x) {
-    return MARKER_SYMBOLS[x] || '●';
+    return MARKER_SYMBOLS[x] ? x : 'circle';
 });
 
 function convertColor(color, opacity, count) {
@@ -251,8 +251,17 @@ function _convertColor(colors, opacities, count) {
     return result;
 }
 
-proto.update = function(options) {
+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;
         this.hasLines = false;
@@ -441,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]);
@@ -491,29 +500,53 @@ proto.updateFancy = function(options) {
         this.scatter.options.colors = new Array(pId * 4);
         this.scatter.options.borderColors = new Array(pId * 4);
 
-        var markerSizeFunc = makeBubbleSizeFn(options),
-            markerOpts = options.marker,
-            markerOpacity = markerOpts.opacity,
-            traceOpacity = options.opacity,
-            colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len),
-            glyphs = convertSymbol(markerOpts.symbol, len),
-            borderWidths = convertNumber(markerOpts.line.width, len),
-            borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len),
-            index;
+        var markerSizeFunc = makeBubbleSizeFn(options);
+        var markerOpts = options.marker;
+        var markerOpacity = markerOpts.opacity;
+        var traceOpacity = options.opacity;
+        var symbols = convertSymbol(markerOpts.symbol, len);
+        var colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len);
+        var borderWidths = convertNumber(markerOpts.line.width, len);
+        var borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len);
+        var index, size, symbol, symbolSpec, isOpen, _colors, _borderColors, bw, minBorderWidth;
 
         sizes = convertArray(markerSizeFunc, markerOpts.size, len);
 
         for(i = 0; i < pId; ++i) {
             index = idToIndex[i];
 
-            this.scatter.options.sizes[i] = 4.0 * sizes[index];
-            this.scatter.options.glyphs[i] = glyphs[index];
-            this.scatter.options.borderWidths[i] = 0.5 * borderWidths[index];
+            symbol = symbols[index];
+            symbolSpec = MARKER_SYMBOLS[symbol];
+            isOpen = isSymbolOpen(symbol);
+
+            if(symbolSpec.noBorder && !isOpen) {
+                _colors = borderColors;
+            } else {
+                _colors = colors;
+            }
+
+            if(isOpen) {
+                _borderColors = colors;
+            } else {
+                _borderColors = borderColors;
+            }
+
+            // See  https://github.com/plotly/plotly.js/pull/1781#discussion_r121820798
+            // for more info on this logic
+            size = sizes[index];
+            bw = borderWidths[index];
+            minBorderWidth = (symbolSpec.noBorder || symbolSpec.noFill) ? 0.1 * size : 0;
+
+            this.scatter.options.sizes[i] = 4.0 * size;
+            this.scatter.options.glyphs[i] = symbolSpec.unicode;
+            this.scatter.options.borderWidths[i] = 0.5 * ((bw > minBorderWidth) ? bw - minBorderWidth : 0);
 
-            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(isOpen && !symbolSpec.noBorder && !symbolSpec.noFill) {
+                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/mocks/gl3d_marker_symbols.json

@@ -0,0 +1,77 @@
+{
+  "data": [
+    {
+      "type": "scatter3d",
+      "x": [1, 2, 3, 4, 5, 6, 7, 8],
+      "y": [1, 1, 1, 1, 1, 1, 1, 1],
+      "z": [1, 1, 1, 1, 1, 1, 1, 1],
+      "mode": "markers",
+      "text": [
+        "marker symbol: 'circle'",
+        "marker symbol: 'circle-open'",
+        "marker symbol: 'square'",
+        "marker symbol: 'square-open'",
+        "marker symbol: 'diamond'",
+        "marker symbol: 'diamond-open'",
+        "marker symbol: 'cross'"
+      ],
+      "marker": {
+        "color": "blue",
+        "size": 8,
+        "symbol": [
+          "circle",
+          "circle-open",
+          "square",
+          "square-open",
+          "diamond",
+          "diamond-open",
+          "cross"
+        ],
+        "line": {
+          "color": "orange",
+          "width": 1.5
+        }
+      },
+      "hovertext": "text"
+    }
+  ],
+  "layout": {
+    "width": 500,
+    "height": 500,
+    "margin": {"l": 0, "r": 0, "b": 0, "t": 0},
+    "scene": {
+      "camera": {
+        "eye": {
+          "x": 0.1,
+          "y": 0.1,
+          "z": 2.1
+        }
+      },
+      "xaxis": {
+        "showgrid": false,
+        "zeroline": false,
+        "showline": false,
+        "showticklabels": false,
+        "title": "",
+        "range": [0, 10]
+      },
+      "yaxis": {
+        "showgrid": false,
+        "zeroline": false,
+        "showline": false,
+        "showticklabels": false,
+        "title": "",
+        "range": [0, 6]
+      },
+      "zaxis": {
+        "showgrid": false,
+        "zeroline": false,
+        "showline": false,
+        "showticklabels": false,
+        "title": "",
+        "range": [0, 2]
+      }
+    },
+    "hovermode": "closest"
+  }
+}