simplify scattergl per-symbol logic

- dynamically list -open symbols - draw -open symbol as filled unicode symbols with transparent fill so that the border width scales the same as their non-open versions -> this adds support for heaxgon2-open 🎉 - add annotation about 'x' and 'x-open' in `imagetest`
plotly · Jun 13, 2017 · fffc702 · fffc702
1 parent 39618de
commit fffc702
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 123 deletions.
diff --git a/src/constants/gl2d_markers.js b/src/constants/gl2d_markers.js
@@ -9,138 +9,65 @@
 
 'use strict';
 
-module.exports = {
+var extendFlat = require('../lib/extend').extendFlat;
+
+var symbolsWithOpenSupport = {
     'circle': {
         unicode: '●'
     },
-    'circle-open': {
-        unicode: '○'
-    },
     'square': {
         unicode: '■'
     },
-    'square-open': {
-        unicode: '□'
-    },
     'diamond': {
         unicode: '◆'
     },
-    'diamond-open': {
-        unicode: '◇'
-    },
     'cross': {
         unicode: '✚'
     },
-    'cross-open': {
-        unicode: '✚',
-        bwFactor: 0.5,
-        transparentFill: true
-    },
     'x': {
         unicode: '❌'
     },
-    'x-open': {
-        unicode: '❌',
-        bwFactor: 0.5,
-        transparentFill: true
-    },
     'triangle-up': {
         unicode: '▲'
     },
-    'triangle-up-open': {
-        unicode: '△'
-    },
     'triangle-down': {
         unicode: '▼'
     },
-    'triangle-down-open': {
-        unicode: '▽'
-    },
     'triangle-left': {
-        unicode: '◄',
-    },
-    'triangle-left-open': {
-        unicode: '◁',
+        unicode: '◄'
     },
     'triangle-right': {
-        unicode: '►',
-    },
-    'triangle-right-open': {
-        unicode: '▷',
+        unicode: '►'
     },
     'triangle-ne': {
-        unicode: '◥',
-    },
-    'triangle-ne-open': {
-        unicode: '◹',
+        unicode: '◥'
     },
     'triangle-nw': {
-        unicode: '◤',
-    },
-    'triangle-nw-open': {
-        unicode: '◸',
+        unicode: '◤'
     },
     'triangle-se': {
-        unicode: '◢',
-    },
-    'triangle-se-open': {
-        unicode: '◿',
+        unicode: '◢'
     },
     'triangle-sw': {
-        unicode: '◣',
-    },
-    'triangle-sw-open': {
-        unicode: '◺',
+        unicode: '◣'
     },
     'pentagon': {
-        unicode: '⬟',
-    },
-    'pentagon-open': {
-        unicode: '⬠',
+        unicode: '⬟'
     },
     'hexagon': {
-        unicode: '⬢',
-    },
-    'hexagon-open': {
-        unicode: '⬡',
+        unicode: '⬢'
     },
     'hexagon2': {
-        unicode: '⬣',
+        unicode: '⬣'
     },
     'star': {
-        unicode: '★',
-    },
-    'star-open': {
-        unicode: '☆',
+        unicode: '★'
     },
     'diamond-tall': {
-        unicode: '♦',
-    },
-    'diamond-tall-open': {
-        unicode: '♢',
+        unicode: '♦'
     },
     'bowtie': {
-        unicode: '⧓',
-    },
-    'bowtie-open': {
-        unicode: '⋈',
-        bwFactor: 0.2
-    },
-    'circle-cross-open': {
-        unicode: '⨁',
-        bwFactor: 0.2
-    },
-    'circle-x-open': {
-        unicode: '⨂',
-        bwFactor: 0.2
-    },
-    'square-cross-open': {
-        unicode: '⊞',
-        bwFactor: 0.2
-    },
-    'square-x-open': {
-        unicode: '⊠',
-        bwFactor: 0.2
+        unicode: '⧓'
     },
     'diamond-x': {
         unicode: '❖',
@@ -150,46 +77,57 @@ module.exports = {
         unicode: '+',
         noBorder: true
     },
-    'cross-thin-open': {
-        unicode: '+',
-    },
     'asterisk': {
         unicode: '✳',
         noBorder: true
     },
-    'asterisk-open': {
-        unicode: '✳',
-    },
     'y-up': {
         unicode: '⅄',
         noBorder: true
     },
-    'y-up-open': {
-        unicode: '⅄',
-        noBorder: true
-    },
     'y-down': {
         unicode: 'Y',
         noBorder: true
     },
-    'y-down-open': {
-        unicode: 'Y',
-        noBorder: true
-    },
     'line-ew': {
         unicode: '─',
         noBorder: true
     },
-    'line-ew-open': {
-        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
     },
-    'line-ns-open': {
-        unicode: '│',
-        noBorder: 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
+);
diff --git a/src/traces/scattergl/convert.js b/src/traces/scattergl/convert.js
@@ -508,34 +508,43 @@ proto.updateFancy = function(options) {
         var colors = convertColorScale(markerOpts, markerOpacity, traceOpacity, len);
         var borderWidths = convertNumber(markerOpts.line.width, len);
         var borderColors = convertColorScale(markerOpts.line, markerOpacity, traceOpacity, len);
-        var index, symbol, symbolSpec, _colors, _borderColors, bwFactor;
+        var index, symbol, symbolSpec, _colors, _borderColors, bwFactor, isOpen;
 
         sizes = convertArray(markerSizeFunc, markerOpts.size, len);
 
         for(i = 0; i < pId; ++i) {
             index = idToIndex[i];
             symbol = symbols[index];
             symbolSpec = MARKER_SYMBOLS[symbol];
+            isOpen = isSymbolOpen(symbol);
 
-            if(isSymbolOpen(symbol)) {
-                _colors = colors;
-                _borderColors = colors;
-                bwFactor = symbolSpec.bwFactor || 0.25;
-            } else if(symbolSpec.noBorder) {
+            if(symbolSpec.noBorder && !isOpen) {
                 _colors = borderColors;
-                _borderColors = borderColors;
-                bwFactor = symbolSpec.bwFactor || 0.25;
             } else {
                 _colors = colors;
+            }
+
+            if(isOpen) {
+                _borderColors = colors;
+            } else {
                 _borderColors = borderColors;
-                bwFactor = symbolSpec.bwFactor || 0.5;
+            }
+
+            if(symbolSpec.bwFactor) {
+                bwFactor = symbolSpec.bwFactor;
+            } else if(symbolSpec.noBorder) {
+                bwFactor = 0.25;
+            } else if(symbolSpec.noFill) {
+                bwFactor = 0.1;
+            } else {
+                bwFactor = 0.5;
             }
 
             this.scatter.options.sizes[i] = 4.0 * sizes[index];
             this.scatter.options.glyphs[i] = symbolSpec.unicode;
             this.scatter.options.borderWidths[i] = bwFactor * borderWidths[index];
 
-            if(symbolSpec.transparentFill) {
+            if(isOpen && !symbolSpec.noBorder && !symbolSpec.noFill) {
                 fillColor(this.scatter.options.colors, transparent, i, 0);
             } else {
                 fillColor(this.scatter.options.colors, _colors, i, index);

diff --git a/test/image/baselines/gl2d_marker_symbols.png b/test/image/baselines/gl2d_marker_symbols.png
diff --git a/test/image/mocks/gl2d_marker_symbols.json b/test/image/mocks/gl2d_marker_symbols.json
@@ -409,7 +409,7 @@
           20,
           20,
           20,
-          1,
+          20,
           1,
           20,
           1,
@@ -461,7 +461,7 @@
         "marker symbol: triangle-nw-open",
         "marker symbol: pentagon-open",
         "marker symbol: hexagon-open",
-        "marker symbol: hexagon2-open<br>NOT AVAILABLE",
+        "marker symbol: hexagon2-open",
         "marker symbol: octagon-open<br>NOT AVAILABLE",
         "marker symbol: star-open",
         "marker symbol: hexagram-open<br>NOT AVAILABLE",
@@ -1008,6 +1008,22 @@
     },
     "showlegend": false,
     "hovermode": "closest",
-    "plot_bgcolor": "#d3d3d3"
+    "plot_bgcolor": "#d3d3d3",
+    "annotations": [
+      {
+        "showarrow": false,
+        "xref": "paper",
+        "yref": "paper",
+        "x": 1,
+        "xanchor": "right",
+        "y": 0.5,
+        "yanchor": "middle",
+        "xshift": -15,
+        "text": "<b>IMPORTANT</b>: marker symbol 'x' and 'x-open'<br>do not render in the imagetest container",
+        "font": {
+          "size": 16
+        }
+      }
+    ]
   }
-}
+}