Merge pull request #3207 from plotly/issue-br3d

Implementation of break lines, sub & superscripts and bold & italic styles in WebGL texts

Author: archmoj

package-lock.json

@@ -77,10 +77,10 @@
     "gl-line3d": "^1.1.6",
     "gl-mat4": "^1.2.0",
     "gl-mesh3d": "^2.0.2",
-    "gl-plot2d": "^1.3.1",
-    "gl-plot3d": "^1.5.11",
+    "gl-plot2d": "^1.4.0",
+    "gl-plot3d": "^1.6.0",
     "gl-pointcloud2d": "^1.0.1",
-    "gl-scatter3d": "^1.0.16",
+    "gl-scatter3d": "^1.1.0",
     "gl-select-box": "^1.0.2",
     "gl-spikes2d": "^1.0.1",
     "gl-streamtube3d": "^1.1.1",

package.json

@@ -11,7 +11,6 @@
 
 var Axes = require('../cartesian/axes');
 
-var convertHTMLToUnicode = require('../../lib/html2unicode');
 var str2RGBArray = require('../../lib/str2rgbarray');
 
 function Axes2DOptions(scene) {
@@ -118,7 +117,7 @@ proto.merge = function(options) {
 
         for(j = 0; j <= 2; j += 2) {
             this.labelEnable[i + j] = false;
-            this.labels[i + j] = convertHTMLToUnicode(axTitle);
+            this.labels[i + j] = axTitle;
             this.labelColor[i + j] = str2RGBArray(ax.titlefont.color);
             this.labelFont[i + j] = ax.titlefont.family;
             this.labelSize[i + j] = ax.titlefont.size;

src/lib/html2unicode.js

@@ -20,7 +20,6 @@ var getContext = require('webgl-context');
 
 var createOptions = require('./convert');
 var createCamera = require('./camera');
-var convertHTMLToUnicode = require('../../lib/html2unicode');
 var showNoWebGlMsg = require('../../lib/show_no_webgl_msg');
 var axisConstraints = require('../cartesian/constraints');
 var enforceAxisConstraints = axisConstraints.enforce;
@@ -279,7 +278,7 @@ proto.computeTickMarks = function() {
     for(var j = 0; j < 2; ++j) {
         for(var i = 0; i < nextTicks[j].length; ++i) {
             // coercing tick value (may not be a string) to a string
-            nextTicks[j][i].text = convertHTMLToUnicode(nextTicks[j][i].text + '');
+            nextTicks[j][i].text = nextTicks[j][i].text + '';
         }
     }
 

src/plots/gl2d/convert.js

@@ -9,7 +9,6 @@
 
 'use strict';
 
-var convertHTMLToUnicode = require('../../../lib/html2unicode');
 var str2RgbaArray = require('../../../lib/str2rgbarray');
 
 var AXES_NAMES = ['xaxis', 'yaxis', 'zaxis'];
@@ -84,7 +83,7 @@ proto.merge = function(sceneLayout) {
         }
 
         // Axes labels
-        opts.labels[i] = convertHTMLToUnicode(axes.title);
+        opts.labels[i] = axes.title;
         if('titlefont' in axes) {
             if(axes.titlefont.color) opts.labelColor[i] = str2RgbaArray(axes.titlefont.color);
             if(axes.titlefont.family) opts.labelFont[i] = axes.titlefont.family;

src/plots/gl2d/scene2d.js

@@ -15,7 +15,6 @@ module.exports = computeTickMarks;
 
 var Axes = require('../../cartesian/axes');
 var Lib = require('../../../lib');
-var convertHTMLToUnicode = require('../../../lib/html2unicode');
 
 var AXES_NAMES = ['xaxis', 'yaxis', 'zaxis'];
 
@@ -73,7 +72,11 @@ function computeTickMarks(scene) {
             var dataTicks = Axes.calcTicks(axes);
             for(var j = 0; j < dataTicks.length; ++j) {
                 dataTicks[j].x = dataTicks[j].x * scene.dataScale[i];
-                dataTicks[j].text = convertHTMLToUnicode(dataTicks[j].text);
+
+                if(axes.type === 'date') {
+                    dataTicks[j].text =
+                    dataTicks[j].text.replace(/\<br\>/g, ' ');
+                }
             }
             ticks[i] = dataTicks;
 

src/plots/gl3d/layout/convert.js

@@ -169,7 +169,7 @@ function render(scene) {
     scene.drawAnnotations(scene);
 }
 
-function initializeGLPlot(scene, fullLayout, canvas, gl) {
+function initializeGLPlot(scene, canvas, gl) {
     var gd = scene.graphDiv;
 
     var glplotOptions = {
@@ -318,7 +318,7 @@ function Scene(options, fullLayout) {
     this.convertAnnotations = Registry.getComponentMethod('annotations3d', 'convert');
     this.drawAnnotations = Registry.getComponentMethod('annotations3d', 'draw');
 
-    if(!initializeGLPlot(this, fullLayout)) return; // todo check the necessity for this line
+    if(!initializeGLPlot(this)) return; // todo check the necessity for this line
 }
 
 var proto = Scene.prototype;
@@ -334,7 +334,7 @@ proto.recoverContext = function() {
             requestAnimationFrame(tryRecover);
             return;
         }
-        if(!initializeGLPlot(scene, scene.fullLayout, canvas, gl)) {
+        if(!initializeGLPlot(scene, canvas, gl)) {
             Lib.error('Catastrophic and unrecoverable WebGL error. Context lost.');
             return;
         }

src/plots/gl3d/layout/tick_marks.js

@@ -0,0 +1,48 @@
+{
+  "data": [
+    {
+      "x": [3],
+      "y": [0],
+      "z": [2],
+      "text": ["This <i>text</i> was <b>too</b> long.<br>But <i><b>right now</b></i> it is <br>presented on<br>multiple <b><i>lines!<br>It is now<br>also possible</i></b> to use <sup>Super</sup> and <sub>Sub</sub><br>texts either <i>lower</i> or <b>UPPER</b> cases.<br><br>Aa<sup>Xx<sup>23.5<sup>Ab</sup></sup></sup><br>Aa<sub>Xx<sub>23.5<sub>Ab</sub></sub></sub>"],
+      "type": "scatter3d",
+      "mode":"markers+text",
+      "textposition": "middle center"
+    }
+  ],
+  "layout": {
+    "title":"Now texts could be displayed in 3D on multiple lines.",
+    "width": 1200,
+    "height": 900,
+    "scene":{
+      "xaxis":{
+        "titlefont": {
+          "color": "#f00",
+          "family": "Sans-Serif",
+          "size": 18
+        },
+        "title": "An axis with<br><i>Italic</i> & <b>bold</b> info! &\nSay no to '\\n'.<br>Only use <'br'> for line breaks."
+      },
+      "yaxis":{
+        "titlefont": {
+          "color": "#00f",
+          "family": "Times New Roman",
+          "size": 32
+        },
+        "title": "I<sub>x<sub>2<sub>n<sup>3</sup></sub></sub></sub> + z<sup>(n<sup>i</sup>+Log[y<sub>x<sup>2</sup></sub>])</sup>"
+      },
+      "zaxis":{
+        "titlefont": {
+          "color": "#0f0",
+          "family": "Courier New",
+          "size": 18
+        },
+        "title": "A <b>long</b><br>axis presented<br>on <i>multiple</i> lines."},
+      "camera":{
+        "eye":{"x":-1.5,"y":1.5,"z":1.5},
+        "center":{"x":0,"y":0,"z":0},
+        "up":{"x":0,"y":0,"z":1}
+      }
+    }
+  }
+}