Merge pull request #3200 from plotly/issue-2872

Implementation of arrayOk textposition for scatter3d traces

Author: archmoj

package-lock.json

@@ -80,7 +80,7 @@
     "gl-plot2d": "^1.3.1",
     "gl-plot3d": "^1.5.11",
     "gl-pointcloud2d": "^1.0.1",
-    "gl-scatter3d": "^1.0.15",
+    "gl-scatter3d": "^1.0.16",
     "gl-select-box": "^1.0.2",
     "gl-spikes2d": "^1.0.1",
     "gl-streamtube3d": "^1.1.1",

package.json

@@ -439,11 +439,14 @@ function commonPrefix(name1, name2, show1, show2) {
 function cleanTextPosition(textposition) {
     var posY = 'middle',
         posX = 'center';
-    if(textposition.indexOf('top') !== -1) posY = 'top';
-    else if(textposition.indexOf('bottom') !== -1) posY = 'bottom';
 
-    if(textposition.indexOf('left') !== -1) posX = 'left';
-    else if(textposition.indexOf('right') !== -1) posX = 'right';
+    if(typeof textposition === 'string') {
+        if(textposition.indexOf('top') !== -1) posY = 'top';
+        else if(textposition.indexOf('bottom') !== -1) posY = 'bottom';
+
+        if(textposition.indexOf('left') !== -1) posX = 'left';
+        else if(textposition.indexOf('right') !== -1) posX = 'right';
+    }
 
     return posY + ' ' + posX;
 }

src/plot_api/helpers.js

@@ -160,7 +160,7 @@ var attrs = module.exports = overrideAll({
         colorAttributes('marker')
     ),
 
-    textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center', arrayOk: false}),
+    textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center'}),
     textfont: {
         color: scatterAttrs.textfont.color,
         size: scatterAttrs.textfont.size,

src/traces/scatter3d/attributes.js

@@ -133,14 +133,47 @@ function calculateErrorParams(errors) {
     return {capSize: capSize, color: color, lineWidth: lineWidth};
 }
 
+function parseAlignmentX(a) {
+    if(a === null || a === undefined) return 0;
+
+    return (a.indexOf('left') > -1) ? -1 :
+           (a.indexOf('right') > -1) ? 1 : 0;
+}
+
+function parseAlignmentY(a) {
+    if(a === null || a === undefined) return 0;
+
+    return (a.indexOf('top') > -1) ? -1 :
+           (a.indexOf('bottom') > -1) ? 1 : 0;
+}
+
 function calculateTextOffset(tp) {
     // Read out text properties
-    var textOffset = [0, 0];
-    if(Array.isArray(tp)) return [0, -1];
-    if(tp.indexOf('bottom') >= 0) textOffset[1] += 1;
-    if(tp.indexOf('top') >= 0) textOffset[1] -= 1;
-    if(tp.indexOf('left') >= 0) textOffset[0] -= 1;
-    if(tp.indexOf('right') >= 0) textOffset[0] += 1;
+
+    var defaultAlignmentX = 0;
+    var defaultAlignmentY = 0;
+
+    var textOffset = [
+        defaultAlignmentX,
+        defaultAlignmentY
+    ];
+
+    if(Array.isArray(tp)) {
+        for(var i = 0; i < tp.length; i++) {
+            textOffset[i] = [
+                defaultAlignmentX,
+                defaultAlignmentY
+            ];
+            if(tp[i]) {
+                textOffset[i][0] = parseAlignmentX(tp[i]);
+                textOffset[i][1] = parseAlignmentY(tp[i]);
+            }
+        }
+    } else {
+        textOffset[0] = parseAlignmentX(tp);
+        textOffset[1] = parseAlignmentY(tp);
+    }
+
     return textOffset;
 }
 
@@ -233,7 +266,7 @@ function convertPlotlyOptions(scene, data) {
     }
 
     if('textposition' in data) {
-        params.textOffset = calculateTextOffset(data.textposition);  // arrayOk === false
+        params.textOffset = calculateTextOffset(data.textposition);
         params.textColor = formatColor(data.textfont, 1, len);
         params.textSize = formatParam(data.textfont.size, len, Lib.identity, 12);
         params.textFont = data.textfont.family;  // arrayOk === false

src/traces/scatter3d/convert.js

@@ -0,0 +1,25 @@
+{
+    "data": [
+        {
+            "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
+            "y": [0, 1, 0, 1, 0, 1, 0, 1, 0],
+            "z": [0, 1, 2, 3, 4, 5, 6, 7, 8],
+            "type": "scatter3d",
+            "mode":"lines+markers+text",
+            "text": ["middle center", "bottom", "right", "bottom right", "bottom left", "left", "top right", "top", "top left"],
+            "textposition":      ["", "bottom", "right", "bottom right", "bottom left", "left", "top right", "top", "top left"]
+        }
+    ],
+    "layout": {
+        "title":"Texts in scatter3d could be aligned differently using arrays",
+        "width": 800,
+        "height": 600,
+        "scene":{
+            "camera":{
+                "eye":{ "x":-1.25,"y":1.25,"z":1.25 },
+                "center":{ "x":0,"y":0,"z":0 },
+                "up":{ "x":0,"y":0,"z":1 }
+            }
+        }
+    }
+}

test/image/baselines/gl3d_scatter3d-different-align-texts.png

@@ -559,6 +559,31 @@ describe('Test gl3d plots', function() {
         .then(done);
     });
 
+    it('@gl should only accept texts for textposition otherwise textposition is set to middle center before passing to webgl', function(done) {
+        Plotly.plot(gd, [{
+            type: 'scatter3d',
+            mode: 'markers+text+lines',
+            x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+            y: [-1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16],
+            z: [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
+            text: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p'],
+            textposition: ['left top', 'right top', 'left bottom', 'right bottom', null, undefined, true, false, [], {}, NaN, Infinity, 0, 1.2]
+        }])
+        .then(function() {
+            var AllTextpositions = gd._fullData[0].textposition;
+
+            expect(AllTextpositions[0]).toBe('top left', 'is not top left');
+            expect(AllTextpositions[1]).toBe('top right', 'is not top right');
+            expect(AllTextpositions[2]).toBe('bottom left', 'is not bottom left');
+            expect(AllTextpositions[3]).toBe('bottom right', 'is not bottom right');
+            for(var i = 4; i < AllTextpositions.length; i++) {
+                expect(AllTextpositions[i]).toBe('middle center', 'is not middle center');
+            }
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('@gl axis ticks should not be set when axis _length is NaN', function(done) {
         Plotly.plot(gd,
             {