fixes #2666 - show no-WebGL msg for all gl trace types

etpinard · etpinard · commit a2a215ee5ae8 · 2018-06-05T16:56:21.000-04:00
- gl2d was broken (fixed here)
- all regl-based trace types (scattergl, scatterpolargl,
  splom and parcoords) were missing.
diff --git a/src/lib/prepare_regl.js b/src/lib/prepare_regl.js
@@ -8,6 +8,8 @@
 
 'use strict';
 
+var showNoWebGlMsg = require('./show_no_webgl_msg');
+
 // Note that this module should be ONLY required into
 // files corresponding to regl trace modules
 // so that bundles with non-regl only don't include
@@ -21,23 +23,35 @@ var createRegl = require('regl');
  *
  * @param {DOM node or object} gd : graph div object
  * @param {array} extensions : list of extension to pass to createRegl
+ *
+ * @return {boolean} true if all createRegl calls succeeded, false otherwise
  */
 module.exports = function prepareRegl(gd, extensions) {
     var fullLayout = gd._fullLayout;
+    var success = true;
 
     fullLayout._glcanvas.each(function(d) {
         if(d.regl) return;
         // only parcoords needs pick layer
         if(d.pick && !fullLayout._has('parcoords')) return;
 
-        d.regl = createRegl({
-            canvas: this,
-            attributes: {
-                antialias: !d.pick,
-                preserveDrawingBuffer: true
-            },
-            pixelRatio: gd._context.plotGlPixelRatio || global.devicePixelRatio,
-            extensions: extensions || []
-        });
+        try {
+            d.regl = createRegl({
+                canvas: this,
+                attributes: {
+                    antialias: !d.pick,
+                    preserveDrawingBuffer: true
+                },
+                pixelRatio: gd._context.plotGlPixelRatio || global.devicePixelRatio,
+                extensions: extensions || []
+            });
+        } catch(e) {
+            success = false;
+        }
     });
+
+    if(!success) {
+        showNoWebGlMsg({container: fullLayout._glcontainer.node()});
+    }
+    return success;
 };
diff --git a/src/lib/show_no_webgl_msg.js b/src/lib/show_no_webgl_msg.js
@@ -21,7 +21,7 @@ var noop = function() {};
  * Expects 'scene' to have property 'container'
  *
  */
-module.exports = function showWebGlMsg(scene) {
+module.exports = function showNoWebGlMsg(scene) {
     for(var prop in scene) {
         if(typeof scene[prop] === 'function') scene[prop] = noop;
     }
@@ -36,6 +36,10 @@ module.exports = function showWebGlMsg(scene) {
     div.style.cursor = 'pointer';
     div.style.fontSize = '24px';
     div.style.color = Color.defaults[0];
+    div.style.position = 'absolute';
+    div.style.left = '20px';
+    div.style.top = '50%';
+    div.style.width = div.style.height = '100%';
 
     scene.container.appendChild(div);
     scene.container.style.background = '#FFFFFF';
diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js
@@ -45,6 +45,7 @@ function Scene2D(options, fullLayout) {
     this.updateRefs(fullLayout);
 
     this.makeFramework();
+    if(this.stopped) return;
 
     // update options
     this.glplotOptions = createOptions(this);
@@ -121,7 +122,11 @@ proto.makeFramework = function() {
             premultipliedAlpha: true
         });
 
-        if(!gl) showNoWebGlMsg(this);
+        if(!gl) {
+            showNoWebGlMsg(this);
+            this.stopped = true;
+            return;
+        }
 
         this.canvas = liveCanvas;
         this.gl = gl;
diff --git a/src/plots/plots.js b/src/plots/plots.js
@@ -682,6 +682,7 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou
     if(hadGl && !hasGl) {
         if(oldFullLayout._glcontainer !== undefined) {
             oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();
+            oldFullLayout._glcontainer.selectAll('.no-webgl').remove();
             oldFullLayout._glcanvas = null;
         }
     }
diff --git a/src/traces/parcoords/plot.js b/src/traces/parcoords/plot.js
@@ -17,7 +17,8 @@ module.exports = function plot(gd, cdparcoords) {
     var root = fullLayout._paperdiv;
     var container = fullLayout._glcontainer;
 
-    prepareRegl(gd);
+    var success = prepareRegl(gd);
+    if(!success) return;
 
     var gdDimensions = {};
     var gdDimensionsOriginalOrder = {};
diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js
@@ -326,7 +326,15 @@ function plot(gd, subplot, cdata) {
     var width = fullLayout.width;
     var height = fullLayout.height;
 
-    prepareRegl(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
+    var success = prepareRegl(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
+    if(!success) {
+        scene.error2d = false;
+        scene.line2d = false;
+        scene.scatter2d = false;
+        scene.fill2d = false;
+        return;
+    }
+
     var regl = fullLayout._glcanvas.data()[0].regl;
 
     // that is needed for fills
diff --git a/src/traces/splom/base_plot.js b/src/traces/splom/base_plot.js
@@ -24,7 +24,8 @@ function plot(gd) {
     var _module = Registry.getModule(SPLOM);
     var splomCalcData = getModuleCalcData(gd.calcdata, _module)[0];
 
-    prepareRegl(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
+    var success = prepareRegl(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
+    if(!success) return;
 
     if(fullLayout._hasOnlyLargeSploms) {
         drawGrid(gd);
@@ -209,7 +210,10 @@ function clean(newFullData, newFullLayout, oldFullData, oldFullLayout, oldCalcda
             var trace = cd0.trace;
             var scene = cd0.t._scene;
 
-            if(trace.type === 'splom' && scene && scene.matrix) {
+            if(
+                trace.type === 'splom' &&
+                scene && scene.matrix && scene.matrix.destroy
+            ) {
                 scene.matrix.destroy();
                 cd0.t._scene = null;
             }
diff --git a/test/jasmine/bundle_tests/no_webgl_test.js b/test/jasmine/bundle_tests/no_webgl_test.js
@@ -17,8 +17,7 @@ describe('Plotly w/o WebGL support:', function() {
     });
 
     function checkNoWebGLMsg(visible) {
-        var glDiv = gd.querySelector('div.gl-container');
-        var msg = glDiv.querySelector('div.no-webgl');
+        var msg = gd.querySelector('div.no-webgl');
         if(visible) {
             expect(msg.innerHTML.substr(0, 22)).toBe('WebGL is not supported');
         } else {
@@ -38,4 +37,69 @@ describe('Plotly w/o WebGL support:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('gl2d subplots', function(done) {
+        Plotly.react(gd, require('@mocks/gl2d_pointcloud-basic.json'))
+        .then(function() {
+            checkNoWebGLMsg(true);
+            return Plotly.react(gd, require('@mocks/10.json'));
+        })
+        .then(function() {
+            checkNoWebGLMsg(false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('scattergl subplots', function(done) {
+        Plotly.react(gd, require('@mocks/gl2d_12.json'))
+        .then(function() {
+            checkNoWebGLMsg(true);
+            return Plotly.react(gd, require('@mocks/10.json'));
+        })
+        .then(function() {
+            checkNoWebGLMsg(false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('scatterpolargl subplots', function(done) {
+        Plotly.react(gd, require('@mocks/glpolar_scatter.json'))
+        .then(function() {
+            checkNoWebGLMsg(true);
+            return Plotly.react(gd, require('@mocks/10.json'));
+        })
+        .then(function() {
+            checkNoWebGLMsg(false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('splom subplots', function(done) {
+        Plotly.react(gd, require('@mocks/splom_0.json'))
+        .then(function() {
+            checkNoWebGLMsg(true);
+            return Plotly.react(gd, require('@mocks/10.json'));
+        })
+        .then(function() {
+            checkNoWebGLMsg(false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('parcoords subplots', function(done) {
+        Plotly.react(gd, require('@mocks/gl2d_parcoords_2.json'))
+        .then(function() {
+            checkNoWebGLMsg(true);
+            return Plotly.react(gd, require('@mocks/10.json'));
+        })
+        .then(function() {
+            checkNoWebGLMsg(false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });

Original file line number	Diff line number	Diff line change
`@@ -682,6 +682,7 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou`
`682`	`682`	`if(hadGl && !hasGl) {`
`683`	`683`	`if(oldFullLayout._glcontainer !== undefined) {`
`684`	`684`	`oldFullLayout._glcontainer.selectAll('.gl-canvas').remove();`
	`685`	`+ oldFullLayout._glcontainer.selectAll('.no-webgl').remove();`
`685`	`686`	`oldFullLayout._glcanvas = null;`
`686`	`687`	`}`
`687`	`688`	`}`