Merge pull request #980 from dfcreative/scene2d-static

Pass static argument to scene2d

Author: etpinard

package.json

@@ -65,7 +65,7 @@
     "gl-line3d": "^1.1.0",
     "gl-mat4": "^1.1.2",
     "gl-mesh3d": "^1.2.0",
-    "gl-plot2d": "^1.1.6",
+    "gl-plot2d": "^1.1.8",
     "gl-plot3d": "^1.5.1",
     "gl-pointcloud2d": "^1.0.0",
     "gl-scatter2d": "^1.0.5",

src/plots/gl2d/convert.js

@@ -89,6 +89,8 @@ function Axes2DOptions(scene) {
 
     this.borderColor = [0, 0, 0, 0];
     this.backgroundColor = [0, 0, 0, 0];
+
+    this.static = this.scene.staticPlot;
 }
 
 var proto = Axes2DOptions.prototype;

src/plots/gl2d/scene2d.js

@@ -129,19 +129,17 @@ proto.makeFramework = function() {
     }
 
     // position the canvas
-    var canvas = this.canvas,
-        pixelRatio = this.pixelRatio,
-        fullLayout = this.fullLayout;
+    var canvas = this.canvas;
 
-    canvas.width = Math.ceil(pixelRatio * fullLayout.width) |0;
-    canvas.height = Math.ceil(pixelRatio * fullLayout.height) |0;
     canvas.style.width = '100%';
     canvas.style.height = '100%';
     canvas.style.position = 'absolute';
     canvas.style.top = '0px';
     canvas.style.left = '0px';
     canvas.style['pointer-events'] = 'none';
 
+    this.updateSize(canvas);
+
     // disabling user select on the canvas
     // sanitizes double-clicks interactions
     // ref: https://github.com/plotly/plotly.js/issues/744
@@ -174,6 +172,9 @@ proto.toImage = function(format) {
     this.stopped = true;
     if(this.staticPlot) this.container.appendChild(STATIC_CANVAS);
 
+    // update canvas size
+    this.updateSize(this.canvas);
+
     // force redraw
     this.glplot.setDirty();
     this.glplot.draw();
@@ -226,6 +227,26 @@ proto.toImage = function(format) {
     return dataURL;
 };
 
+proto.updateSize = function(canvas) {
+    if(!canvas) canvas = this.canvas;
+
+    var pixelRatio = this.pixelRatio,
+        fullLayout = this.fullLayout;
+
+    var width = fullLayout.width,
+        height = fullLayout.height,
+        pixelWidth = Math.ceil(pixelRatio * width) |0,
+        pixelHeight = Math.ceil(pixelRatio * height) |0;
+
+    // check for resize
+    if(canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+        canvas.width = pixelWidth;
+        canvas.height = pixelHeight;
+    }
+
+    return canvas;
+};
+
 proto.computeTickMarks = function() {
     this.xaxis._length =
         this.glplot.viewBox[2] - this.glplot.viewBox[0];
@@ -344,24 +365,16 @@ proto.destroy = function() {
 };
 
 proto.plot = function(fullData, calcData, fullLayout) {
-    var glplot = this.glplot,
-        pixelRatio = this.pixelRatio;
+    var glplot = this.glplot;
 
     this.fullLayout = fullLayout;
     this.updateAxes(fullLayout);
     this.updateTraces(fullData, calcData);
 
     var width = fullLayout.width,
-        height = fullLayout.height,
-        pixelWidth = Math.ceil(pixelRatio * width) |0,
-        pixelHeight = Math.ceil(pixelRatio * height) |0;
+        height = fullLayout.height;
 
-    // check for resize
-    var canvas = this.canvas;
-    if(canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
-        canvas.width = pixelWidth;
-        canvas.height = pixelHeight;
-    }
+    this.updateSize(this.canvas);
 
     var options = this.glplotOptions;
     options.merge(fullLayout);

src/traces/pointcloud/attributes.js

@@ -75,7 +75,7 @@ module.exports = {
         },
         blend: {
             valType: 'boolean',
-            dflt: false,
+            dflt: null,
             role: 'style',
             description: [
                 'Determines if colors are blended together for a translucency effect',

src/traces/pointcloud/convert.js

@@ -175,7 +175,15 @@ proto.updateFast = function(options) {
 
     markerColor[3] *= opacity;
     this.pointcloudOptions.color = markerColor;
-    this.pointcloudOptions.blend = options.marker.blend;
+
+    // detect blending from the number of points, if undefined
+    // because large data with blending hits performance
+    var blend = options.marker.blend;
+    if(blend === null) {
+        var maxPoints = 100;
+        blend = x.length < maxPoints || y.length < maxPoints;
+    }
+    this.pointcloudOptions.blend = blend;
 
     borderColor[3] *= opacity;
     this.pointcloudOptions.borderColor = borderColor;

test/image/mocks/gl2d_multiple_subplots.json

@@ -60,6 +60,8 @@
         }
     ],
     "layout": {
+        "width": 700,
+        "height": 500,
         "xaxis": {
             "domain": [
                 0,
@@ -113,4 +115,4 @@
             "anchor": "x4"
         }
     }
-}
+}

test/image/mocks/gl2d_simple_inset.json

@@ -30,6 +30,8 @@
         }
     ],
     "layout": {
+        "width": 700,
+        "height": 500,
         "yaxis2": {
             "domain": [
                 0.6,
@@ -45,4 +47,4 @@
             "anchor": "y2"
         }
     }
-}
+}

test/image/mocks/gl2d_stacked_coupled_subplots.json

@@ -43,6 +43,8 @@
         }
     ],
     "layout": {
+        "width": 700,
+        "height": 500,
         "yaxis": {
             "domain": [
                 0,
@@ -65,4 +67,4 @@
             ]
         }
     }
-}
+}

test/image/mocks/gl2d_stacked_subplots.json

@@ -45,6 +45,8 @@
         }
     ],
     "layout": {
+        "width": 700,
+        "height": 500,
         "yaxis": {
             "domain": [
                 0,
@@ -73,4 +75,4 @@
             ]
         }
     }
-}
+}