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.0.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);
@@ -622,8 +624,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;
+    var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r + (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,13 @@ var attrs = module.exports = overrideAll({
             'this trace\'s (x,y) coordinates.'
         ].join(' ')
     }),
+
+    textposition: scatterAttrs.textposition,
+    textfont: scatterAttrs.textfont,
+
     mode: {
         valType: 'flaglist',
-        flags: ['lines', 'markers'],
+        flags: ['lines', 'markers', 'text'],
         extras: ['none'],
         role: 'info',
         description: [
@@ -77,10 +81,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,66 @@ function convertStyle(gd, trace) {
 
     if(trace.visible !== true) return opts;
 
+    if(subTypes.hasText(trace)) {
+        opts.text = [];
+
+        for(i = 0; i < trace.text.length; i++) {
+            var textOptions = opts.text[i] = {};
+
+            var textfont = unarr(trace.textfont, i);
+            var fontSize = unarr(textfont.size, i);
+            if(typeof fontSize !== 'number') {
+                continue;
+            }
+
+            textOptions.color = unarr(textfont.color, i);
+
+            textOptions.font = {
+                family: unarr(textfont.family, i),
+                size: fontSize
+            };
+
+
+            var textpos = unarr(trace.textposition, i);
+            textpos = textpos.split(/\s+/);
+            switch(textpos[1]) {
+                case 'left':
+                    textOptions.align = 'right';
+                    break;
+                case 'right':
+                    textOptions.align = 'left';
+                    break;
+                default:
+                    textOptions.align = textpos[1];
+            }
+
+            switch(textpos[0]) {
+                case 'top':
+                    textOptions.baseline = 'bottom';
+                    break;
+                case 'bottom':
+                    textOptions.baseline = 'top';
+                    break;
+                default:
+                    textOptions.baseline = textpos[0];
+            }
+
+            // corresponds to textPointPosition from component.drawing
+            if(trace.marker) {
+                var hSign = TEXTOFFSETSIGN[textOptions.align];
+                var markerRadius = unarr(unarr(trace.marker, i).size, i) / 2;
+                var xPad = markerRadius ? markerRadius / 0.8 + 1 : 0;
+                var vSign = TEXTOFFSETSIGN[textOptions.baseline];
+                var yPad = - vSign * xPad - vSign * 0.5;
+                textOptions.offset = [hSign * xPad / fontSize, yPad / fontSize];
+            }
+
+            textOptions.position = [unarr(trace.x, i), unarr(trace.y, i)];
+
+            textOptions.text = unarr(trace.text, i);
+        }
+    }
+
     if(subTypes.hasMarkers(trace)) {
         opts.marker = convertMarkerStyle(trace);
         opts.selected = convertMarkerSelection(trace, trace.selected);
@@ -88,6 +153,13 @@ function convertStyle(gd, trace) {
     return opts;
 }
 
+
+// FIXME: find proper util method for this
+function unarr(obj, i) {
+    if(Array.isArray(obj)) return obj[i];
+    return obj;
+}
+
 function convertMarkerStyle(trace) {
     var count = trace._length;
     var optsIn = trace.marker;

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);

src/traces/scattergl/index.js

@@ -13,6 +13,7 @@ var createLine = require('regl-line2d');
 var createError = require('regl-error2d');
 var cluster = require('point-cluster');
 var arrayRange = require('array-range');
+var Text = require('gl-text');
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
@@ -103,6 +104,7 @@ function calc(gd, trace) {
     if(opts.marker && !scene.scatter2d) scene.scatter2d = true;
     if(opts.line && !scene.line2d) scene.line2d = true;
     if((opts.errorX || opts.errorY) && !scene.error2d) scene.error2d = true;
+    if(opts.text && !scene.glText) scene.glText = true;
 
     // FIXME: organize it in a more appropriate manner, probably in sceneOptions
     // put point-cluster instance for optimized regl calc
@@ -118,6 +120,7 @@ function calc(gd, trace) {
     scene.markerOptions.push(opts.marker);
     scene.selectedOptions.push(opts.selected);
     scene.unselectedOptions.push(opts.unselected);
+    scene.textOptions.push(opts.text);
     scene.count++;
 
     // stash scene ref
@@ -132,6 +135,7 @@ function calc(gd, trace) {
     return [{x: false, y: false, t: stash, trace: trace}];
 }
 
+
 // create scene options
 function sceneOptions(gd, subplot, trace, positions, x, y) {
     var opts = convertStyle(gd, trace);
@@ -161,6 +165,7 @@ function sceneOptions(gd, subplot, trace, positions, x, y) {
     return opts;
 }
 
+
 // make sure scene exists on subplot, return it
 function sceneUpdate(gd, subplot) {
     var scene = subplot._scene;
@@ -178,7 +183,8 @@ function sceneUpdate(gd, subplot) {
         selectedOptions: [],
         unselectedOptions: [],
         errorXOptions: [],
-        errorYOptions: []
+        errorYOptions: [],
+        textOptions: []
     };
 
     var initOpts = {
@@ -189,6 +195,7 @@ function sceneUpdate(gd, subplot) {
         scatter2d: false,
         error2d: false,
         line2d: false,
+        glText: false,
         select2d: null
     };
 
@@ -213,6 +220,11 @@ function sceneUpdate(gd, subplot) {
             if(scene.line2d) scene.line2d.update(opts);
             if(scene.error2d) scene.error2d.update(opts.concat(opts));
             if(scene.select2d) scene.select2d.update(opts);
+            if(scene.glText) {
+                // scene.glText.forEach(function (text) {
+                //     text.update(opts);
+                // })
+            }
 
             scene.draw();
         };
@@ -248,6 +260,14 @@ function sceneUpdate(gd, subplot) {
                 scene.scatter2d.draw(scene.unselectBatch);
             }
 
+            if(scene.glText.length) {
+                scene.glText.forEach(function(items) {
+                    items.forEach(function(item) {
+                        item.render();
+                    });
+                });
+            }
+
             scene.dirty = false;
         };
 
@@ -293,7 +313,13 @@ function sceneUpdate(gd, subplot) {
             if(scene.error2d) scene.error2d.destroy();
             if(scene.line2d) scene.line2d.destroy();
             if(scene.select2d) scene.select2d.destroy();
+            if(scene.glText) {scene.glText.forEach(function(items) {
+                items.forEach(function(item) {
+                    item.destroy();
+                });
+            });}
 
+            scene.textOptions = null;
             scene.lineOptions = null;
             scene.fillOptions = null;
             scene.markerOptions = null;
@@ -318,9 +344,12 @@ function sceneUpdate(gd, subplot) {
     return scene;
 }
 
+
 function plot(gd, subplot, cdata) {
     if(!cdata.length) return;
 
+    var i, j, items, textOptions;
+
     var fullLayout = gd._fullLayout;
     var scene = cdata[0][0].t._scene;
     var dragmode = fullLayout.dragmode;
@@ -357,8 +386,27 @@ function plot(gd, subplot, cdata) {
         if(scene.fill2d === true) {
             scene.fill2d = createLine(regl);
         }
+        if(scene.glText === true) {
+            scene.glText = [];
+            for(i = 0; i < scene.textOptions.length; i++) {
+                textOptions = scene.textOptions[i];
+                items = [];
+                for(j = 0; j < textOptions.length; j++) {
+                    items.push(new Text(regl));
+                }
+                scene.glText[i] = items;
+            }
+        }
 
         // update main marker options
+        if(scene.glText) {
+            for(i = 0; i < scene.textOptions.length; i++) {
+                textOptions = scene.textOptions[i];
+                for(j = 0; j < textOptions.length; j++) {
+                    scene.glText[i][j].update(textOptions[j]);
+                }
+            }
+        }
         if(scene.line2d) {
             scene.line2d.update(scene.lineOptions);
         }
@@ -572,12 +620,20 @@ function plot(gd, subplot, cdata) {
     if(scene.select2d) {
         scene.select2d.update(vpRange);
     }
+    if(scene.glText) {
+        scene.glText.forEach(function(items, i) {
+            items.forEach(function(item) {
+                item.update(vpRange[i]);
+            });
+        });
+    }
 
     scene.draw();
 
     return;
 }
 
+
 function hoverPoints(pointData, xval, yval, hovermode) {
     var cd = pointData.cd;
     var stash = cd[0].t;
@@ -816,6 +872,7 @@ function selectPoints(searchInfo, polygon) {
     return selection;
 }
 
+
 function style(gd, cds) {
     if(!cds) return;
 
@@ -831,6 +888,7 @@ function style(gd, cds) {
     scene.draw();
 }
 
+
 module.exports = {
     moduleType: 'trace',
     name: 'scattergl',

tasks/header.js

@@ -87,7 +87,10 @@ function updateHeadersInSrcFiles() {
     });
 
     function isCorrect(header) {
-        return (header.value === licenseStr);
+        return (
+            header.value.replace(/\s+$/gm, '') ===
+            licenseStr.replace(/\s+$/gm, '')
+        );
     }
 
     function hasWrongDate(header) {