support for different text alignments using scattergl

archmoj · archmoj · commit e6d7532c0d07 · 2018-10-31T17:21:30.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "gl-plot2d": "^1.3.1",
     "gl-plot3d": "^1.5.10",
     "gl-pointcloud2d": "^1.0.1",
-    "gl-scatter3d": "^1.0.14",
+    "gl-scatter3d": "git://github.com/gl-vis/gl-scatter3d.git#2e325c43a31c33737bc547ed3fad749c0f995250",
     "gl-select-box": "^1.0.2",
     "gl-spikes2d": "^1.0.1",
     "gl-streamtube3d": "^1.1.0",
diff --git a/src/traces/scatter3d/attributes.js b/src/traces/scatter3d/attributes.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', arrayOk: true}),
     textfont: {
         color: scatterAttrs.textfont.color,
         size: scatterAttrs.textfont.size,
diff --git a/src/traces/scatter3d/convert.js b/src/traces/scatter3d/convert.js
@@ -133,14 +133,49 @@ function calculateErrorParams(errors) {
     return {capSize: capSize, color: color, lineWidth: lineWidth};
 }
 
+function parseAlignmentX(a) {
+    if (a === null || a === undefined) return 0;
+    else if (typeof(a) === 'number') return a;
+    else if (a.indexOf('left') > -1) return -1;
+    else if (a.indexOf('right') > -1) return 1;
+    return 0;
+}
+
+function parseAlignmentY(a) {
+    if (a === null || a === undefined) return 0;
+    else if (typeof(a) === 'number') return a;
+    else if (a.indexOf('top') > -1) return -1;
+    else if (a.indexOf('bottom') > -1) return 1;
+    return 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; // center
+    var defaultAlignmentY = -1; // top
+
+    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 +268,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
diff --git a/test/image/baselines/gl3d_scatter3d-different-align-texts.png b/test/image/baselines/gl3d_scatter3d-different-align-texts.png
diff --git a/test/image/mocks/gl3d_scatter3d-different-align-texts.json b/test/image/mocks/gl3d_scatter3d-different-align-texts.json
@@ -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 }
+            }
+        }
+    }
+}
