Enable text for scattergl trace

package.json

@@ -83,6 +83,7 @@
     "gl-select-box": "^1.0.2",
     "gl-spikes2d": "^1.0.1",
     "gl-surface3d": "^1.3.5",
+    "gl-text": "^1.1.1",
     "glslify": "^6.1.1",
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",

src/components/drawing/index.js

@@ -603,7 +603,9 @@ drawing.tryColorscale = function(marker, prefix) {
     else return Lib.identity;
 };
 
-var TEXTOFFSETSIGN = {start: 1, end: -1, middle: 0, bottom: 1, top: -1};
+var TEXTOFFSETSIGN = {
+    start: 1, end: -1, middle: 0, bottom: 1, top: -1
+};
 
 function textPointPosition(s, textPosition, fontSize, markerRadius) {
     var group = d3.select(s.node().parentNode);
@@ -623,7 +625,7 @@ function textPointPosition(s, textPosition, fontSize, markerRadius) {
     var numLines = (svgTextUtils.lineCount(s) - 1) * LINE_SPACING + 1;
     var dx = TEXTOFFSETSIGN[h] * r;
     var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r +
-            (TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;
+        (TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;
 
     // fix the overall text group position
     s.attr('text-anchor', h);

src/traces/scattergl/attributes.js

@@ -37,9 +37,15 @@ var attrs = module.exports = overrideAll({
             'this trace\'s (x,y) coordinates.'
         ].join(' ')
     }),
+
+    hovertext: scatterAttrs.hovertext,
+
+    textposition: scatterAttrs.textposition,
+    textfont: scatterAttrs.textfont,
+
     mode: {
         valType: 'flaglist',
-        flags: ['lines', 'markers'],
+        flags: ['lines', 'markers', 'text'],
         extras: ['none'],
         role: 'info',
         description: [
@@ -77,10 +83,12 @@ var attrs = module.exports = overrideAll({
     hoveron: scatterAttrs.hoveron,
 
     selected: {
-        marker: scatterAttrs.selected.marker
+        marker: scatterAttrs.selected.marker,
+        textfont: scatterAttrs.selected.textfont
     },
     unselected: {
-        marker: scatterAttrs.unselected.marker
+        marker: scatterAttrs.unselected.marker,
+        textfont: scatterAttrs.unselected.textfont
     },
 
     opacity: plotAttrs.opacity

src/traces/scattergl/convert.js

@@ -25,10 +25,15 @@ var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var constants = require('./constants');
 var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
+var TEXTOFFSETSIGN = {
+    start: 1, left: 1, end: -1, right: -1, middle: 0, center: 0, bottom: 1, top: -1
+};
+
 function convertStyle(gd, trace) {
     var i;
 
     var opts = {
+        text: undefined,
         marker: undefined,
         line: undefined,
         fill: undefined,
@@ -40,6 +45,10 @@ function convertStyle(gd, trace) {
 
     if(trace.visible !== true) return opts;
 
+    if(subTypes.hasText(trace)) {
+        opts.text = convertTextfont(trace, trace.textfont);
+    }
+
     if(subTypes.hasMarkers(trace)) {
         opts.marker = convertMarkerStyle(trace);
         opts.selected = convertMarkerSelection(trace, trace.selected);
@@ -88,6 +97,138 @@ function convertStyle(gd, trace) {
     return opts;
 }
 
+function convertTextfont(trace, textfont) {
+    var textOptions = {}, i;
+
+    textOptions.color = textfont.color;
+
+    textOptions.align = [];
+    textOptions.baseline = [];
+
+    var textposition = Array.isArray(trace.textposition) ? trace.textposition : [trace.textposition];
+
+    for(i = 0.0; i < textposition.length; i++) {
+        var textpos = textposition[i].split(/\s+/);
+
+        switch(textpos[1]) {
+            case 'left':
+                textOptions.align.push('right');
+                break;
+            case 'right':
+                textOptions.align.push('left');
+                break;
+            default:
+                textOptions.align.push(textpos[1]);
+        }
+
+        switch(textpos[0]) {
+            case 'top':
+                textOptions.baseline.push('bottom');
+                break;
+            case 'bottom':
+                textOptions.baseline.push('top');
+                break;
+            default:
+                textOptions.baseline.push(textpos[0]);
+        }
+    }
+
+    // [{family, color, size}, {family, color, size}, ...] →
+    // {family: [], color: [], size: []}
+    if(Array.isArray(textfont)) {
+        textOptions.font = [];
+        textOptions.color = [];
+        for(i = 0; i < textfont.length; i++) {
+            textOptions.font.push({
+                family: textfont[i].family,
+                size: textfont[i].size
+            });
+            textOptions.color.push(textfont[i].color);
+        }
+    }
+    else {
+        // if any textfont param is array - make render a batch
+        if(Array.isArray(textfont.family) || Array.isArray(textfont.size)) {
+            textOptions.font = Array(Math.max(
+                textfont.family && textfont.family.length || 1,
+                textfont.size && textfont.size.length || 1
+            ));
+
+            for(i = 0; i < textOptions.font.length; i++) {
+                textOptions.font[i] = {
+                    family: textfont.family[i] || textfont.family,
+                    size: textfont.size[i] || textfont.size
+                };
+            }
+        }
+        // if both are single values, make render fast single-value
+        else {
+            textOptions.font = {
+                family: textfont.family,
+                size: textfont.size
+            };
+        }
+        textOptions.color = textfont.color;
+    }
+
+    // corresponds to textPointPosition from component.drawing
+    if(trace.marker) {
+        var sizes = [];
+        if(Array.isArray(trace.marker.size)) {
+            for(i = 0; i < trace.marker.size.length; i++) {
+                sizes.push(trace.marker.size[i]);
+            }
+        }
+        else if(Array.isArray(trace.marker)) {
+            for(i = 0; i < trace.marker.length; i++) {
+                sizes.push(trace.marker[i].size);
+            }
+        }
+        else {
+            sizes.push(trace.marker.size);
+        }
+
+        textOptions.offset = [];
+        for(i = 0; i < Math.max(trace.x.length, trace.y.length); i++) {
+            var size = sizes.length > 1 ? sizes[i] : sizes[0];
+            var markerRadius = size / 2;
+            var fontSize = Array.isArray(textOptions.font) ? textOptions.font[i].size : textOptions.font.size;
+            var align = Array.isArray(textOptions.align) ? textOptions.align.length > 1 ? textOptions.align[i] : textOptions.align[0] : textOptions.align;
+            var baseline = Array.isArray(textOptions.baseline) ? textOptions.baseline.length > 1 ? textOptions.baseline[i] : textOptions.baseline[0] : textOptions.baseline;
+            var hSign = TEXTOFFSETSIGN[align];
+            var vSign = TEXTOFFSETSIGN[baseline];
+            var xPad = markerRadius ? markerRadius / 0.8 + 1 : 0;
+            var yPad = - vSign * xPad - vSign * 0.5;
+            textOptions.offset.push(
+                [hSign * xPad / fontSize, yPad / fontSize]
+            );
+        }
+    }
+
+    textOptions.position = [];
+    for(i = 0; i < trace.x.length; i++) {
+        textOptions.position.push(trace.x[i], trace.y[i]);
+    }
+    textOptions.text = trace.text;
+
+    // filter out bad font sizes
+    if(Array.isArray(textOptions.font)) {
+        for(i = 0; i < textOptions.font.length; i++) {
+            if(!isNumeric(textOptions.font[i].size)) {
+                textOptions.font[i].size = 0;
+            }
+        }
+    }
+    else {
+        if(!isNumeric(textOptions.font.size)) {
+            textOptions.font.size = 0;
+        }
+    }
+
+    return textOptions;
+}
+
+
 function convertMarkerStyle(trace) {
     var count = trace._length;
     var optsIn = trace.marker;
@@ -224,6 +365,10 @@ function convertMarkerSelection(trace, target) {
         if(target.marker.opacity !== undefined) optsOut.opacity = target.marker.opacity;
     }
 
+    if(target.textfont) {
+        optsOut.textfont = convertTextfont(trace, target.textfont);
+    }
+
     return optsOut;
 }
 

src/traces/scattergl/defaults.js

@@ -18,6 +18,7 @@ var handleXYDefaults = require('../scatter/xy_defaults');
 var handleMarkerDefaults = require('../scatter/marker_defaults');
 var handleLineDefaults = require('../scatter/line_defaults');
 var handleFillColorDefaults = require('../scatter/fillcolor_defaults');
+var handleTextDefaults = require('../scatter/text_defaults');
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -32,9 +33,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         traceOut.visible = false;
         return;
     }
+    var defaultMode = len < constants.PTS_LINESONLY ? 'lines+markers' : 'lines';
 
     coerce('text');
-    coerce('mode', len < constants.PTS_LINESONLY ? 'lines+markers' : 'lines');
+    coerce('mode', defaultMode);
 
     if(subTypes.hasLines(traceOut)) {
         coerce('connectgaps');
@@ -49,6 +51,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         dfltHoverOn.push('points');
     }
 
+    if(subTypes.hasText(traceOut)) {
+        handleTextDefaults(traceIn, traceOut, layout, coerce);
+    }
+
     coerce('fill');
     if(traceOut.fill !== 'none') {
         handleFillColorDefaults(traceIn, traceOut, defaultColor, coerce);