Make text selection work

Author: dy

package-lock.json

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

package.json

@@ -46,61 +46,7 @@ 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(!isNumeric(fontSize)) 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);
-        }
+        opts.text = convertTextfont(trace, trace.textfont);
     }
 
     if(subTypes.hasMarkers(trace)) {
@@ -151,6 +97,69 @@ function convertStyle(gd, trace) {
     return opts;
 }
 
+function convertTextfont(trace, textfont) {
+    var opts = [], i;
+
+    for(i = 0; i < trace.text.length; i++) {
+        var textOptions = opts[i] = {};
+
+        textOptions.color = unarr(textfont.color, i);
+
+        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];
+        }
+
+        textfont = unarr(textfont, i);
+
+        var fontSize = unarr(textfont.size, i);
+
+        if(!isNumeric(fontSize)) {
+            continue;
+        }
+
+        textOptions.font = {
+            family: unarr(textfont.family, i),
+            size: fontSize
+        };
+
+        // 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);
+
+    }
+
+    return opts;
+}
 
 // FIXME: find proper util method for this
 function unarr(obj, i) {
@@ -294,6 +303,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/convert.js

@@ -316,11 +316,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();
+            if(scene.glText) {
+                scene.glText.forEach(function(items) {
+                    items.forEach(function(item) {
+                        item.destroy();
+                    });
                 });
-            });}
+            }
 
             scene.textOptions = null;
             scene.lineOptions = null;
@@ -826,13 +828,15 @@ function selectPoints(searchInfo, polygon) {
 
     if(!scene) return selection;
 
-    var hasOnlyLines = (!subTypes.hasMarkers(trace) && !subTypes.hasText(trace));
+    var hasText = subTypes.hasText(trace);
+    var hasOnlyLines = !subTypes.hasMarkers(trace) && !hasText;
     if(trace.visible !== true || hasOnlyLines) return selection;
 
     // degenerate polygon does not enable selection
     // filter out points by visible scatter ones
     var els = null;
     var unels = null;
+    // FIXME: clearing selection does not work here
     var i;
     if(polygon !== false && !polygon.degenerate) {
         els = [], unels = [];
@@ -869,6 +873,26 @@ function selectPoints(searchInfo, polygon) {
         scene.scatter2d.update(scene.unselectedOptions);
     }
 
+    // update texts selection
+    if(hasText) {
+        var el, textOptions;
+        if(els) {
+            for(i = 0; i < els.length; i++) {
+                el = els[i];
+                textOptions = scene.selectedOptions[stash.index].textfont;
+                if(!textOptions) continue;
+                scene.glText[stash.index][el].update(textOptions[el]);
+            }
+        }
+        if(unels) {
+            for(i = 0; i < unels.length; i++) {
+                el = unels[i];
+                textOptions = scene.unselectedOptions[stash.index].textfont || scene.textOptions[stash.index][el];
+                scene.glText[stash.index][el].update(textOptions);
+            }
+        }
+    }
+
     scene.selectBatch[stash.index] = els;
     scene.unselectBatch[stash.index] = unels;