Make gl-components use pre-created canvases

Author: dy

src/plot_api/plot_api.js

@@ -3056,6 +3056,8 @@ function makePlotFramework(gd) {
                 .style('position', 'absolute')
                 .style('top', 0)
                 .style('left', 0)
+                .style('width', '100%')
+                .style('height', '100%')
                 .style('pointer-events', 'none')
                 .style('overflow', 'visible');
 

src/plots/gl2d/scene2d.js

@@ -111,7 +111,7 @@ proto.makeFramework = function() {
         this.gl = STATIC_CONTEXT;
     }
     else {
-        var liveCanvas = document.createElement('canvas');
+        var liveCanvas = this.container.querySelector('.gl-canvas-focus');
 
         var gl = getContext({
             canvas: liveCanvas,
@@ -139,7 +139,7 @@ proto.makeFramework = function() {
     // disabling user select on the canvas
     // sanitizes double-clicks interactions
     // ref: https://github.com/plotly/plotly.js/issues/744
-    canvas.className += 'user-select-none';
+    canvas.className += ' user-select-none';
 
     // create SVG container for hover text
     var svgContainer = this.svgContainer = document.createElementNS(
@@ -158,7 +158,6 @@ proto.makeFramework = function() {
 
     // append canvas, hover svg and mouse div to container
     var container = this.container;
-    container.appendChild(canvas);
     container.appendChild(svgContainer);
     container.appendChild(mouseContainer);
 
@@ -369,7 +368,6 @@ proto.destroy = function() {
 
     this.glplot.dispose();
 
-    if(!this.staticPlot) this.container.removeChild(this.canvas);
     this.container.removeChild(this.svgContainer);
     this.container.removeChild(this.mouseContainer);
 

src/plots/gl3d/scene.js

@@ -136,9 +136,9 @@ function render(scene) {
 
 function initializeGLPlot(scene, fullLayout, canvas, gl) {
     var glplotOptions = {
-        canvas: canvas,
         gl: gl,
         container: scene.container,
+        canvas: scene.container.querySelector('.gl-canvas-focus'),
         axes: scene.axesOptions,
         spikes: scene.spikeOptions,
         pickRadius: 10,
@@ -228,8 +228,7 @@ function initializeGLPlot(scene, fullLayout, canvas, gl) {
 function Scene(options, fullLayout) {
 
     // create sub container for plot
-    var sceneContainer = document.createElement('div');
-    var plotContainer = options.container;
+    var sceneContainer = fullLayout._glcontainer.node();
 
     // keep a ref to the graph div to fire hover+click events
     this.graphDiv = options.graphDiv;
@@ -251,7 +250,6 @@ function Scene(options, fullLayout) {
     sceneContainer.style.position = 'absolute';
     sceneContainer.style.top = sceneContainer.style.left = '0px';
     sceneContainer.style.width = sceneContainer.style.height = '100%';
-    plotContainer.appendChild(sceneContainer);
 
     this.fullLayout = fullLayout;
     this.id = options.id || 'scene';

src/traces/contourgl/index.js

@@ -21,7 +21,7 @@ ContourGl.plot = require('./convert');
 ContourGl.moduleType = 'trace';
 ContourGl.name = 'contourgl';
 ContourGl.basePlotModule = require('../../plots/gl2d');
-ContourGl.categories = ['gl2d', '2dMap'];
+ContourGl.categories = ['gl', 'gl2d', '2dMap'];
 ContourGl.meta = {
     description: [
         'WebGL contour (beta)'

src/traces/heatmapgl/index.js

@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
 HeatmapGl.moduleType = 'trace';
 HeatmapGl.name = 'heatmapgl';
 HeatmapGl.basePlotModule = require('../../plots/gl2d');
-HeatmapGl.categories = ['gl2d', '2dMap'];
+HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
 HeatmapGl.meta = {
     description: [
         'WebGL version of the heatmap trace type.'

src/traces/mesh3d/index.js

@@ -20,7 +20,7 @@ Mesh3D.plot = require('./convert');
 Mesh3D.moduleType = 'trace';
 Mesh3D.name = 'mesh3d',
 Mesh3D.basePlotModule = require('../../plots/gl3d');
-Mesh3D.categories = ['gl3d'];
+Mesh3D.categories = ['gl', 'gl3d'];
 Mesh3D.meta = {
     description: [
         'Draws sets of triangles with coordinates given by',

src/traces/pointcloud/index.js

@@ -20,7 +20,7 @@ pointcloud.plot = require('./convert');
 pointcloud.moduleType = 'trace';
 pointcloud.name = 'pointcloud';
 pointcloud.basePlotModule = require('../../plots/gl2d');
-pointcloud.categories = ['gl2d', 'showLegend'];
+pointcloud.categories = ['gl', 'gl2d', 'showLegend'];
 pointcloud.meta = {
     description: [
         'The data visualized as a point cloud set in `x` and `y`',

src/traces/scatter3d/index.js

@@ -20,7 +20,7 @@ Scatter3D.calc = require('./calc');
 Scatter3D.moduleType = 'trace';
 Scatter3D.name = 'scatter3d';
 Scatter3D.basePlotModule = require('../../plots/gl3d');
-Scatter3D.categories = ['gl3d', 'symbols', 'markerColorscale', 'showLegend'];
+Scatter3D.categories = ['gl', 'gl3d', 'symbols', 'markerColorscale', 'showLegend'];
 Scatter3D.meta = {
     hrName: 'scatter_3d',
     description: [

src/traces/scattergl/index.js

@@ -23,7 +23,7 @@ ScatterGl.selectPoints = require('./select');
 ScatterGl.moduleType = 'trace';
 ScatterGl.name = 'scattergl';
 ScatterGl.basePlotModule = require('../../plots/gl2d');
-ScatterGl.categories = ['gl2d', 'symbols', 'errorBarsOK', 'markerColorscale', 'showLegend', 'scatter-like'];
+ScatterGl.categories = ['gl', 'gl2d', 'symbols', 'errorBarsOK', 'markerColorscale', 'showLegend', 'scatter-like'];
 ScatterGl.meta = {
     description: [
         'The data visualized as scatter point or lines is set in `x` and `y`',

src/traces/surface/index.js

@@ -20,7 +20,7 @@ Surface.plot = require('./convert');
 Surface.moduleType = 'trace';
 Surface.name = 'surface';
 Surface.basePlotModule = require('../../plots/gl3d');
-Surface.categories = ['gl3d', '2dMap', 'noOpacity'];
+Surface.categories = ['gl', 'gl3d', '2dMap', 'noOpacity'];
 Surface.meta = {
     description: [
         'The data the describes the coordinates of the surface is set in `z`.',