diff --git a/package.json b/package.json index b64da497b34..207638952bd 100644 --- a/package.json +++ b/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", diff --git a/src/plots/gl2d/convert.js b/src/plots/gl2d/convert.js index c84ba0cdfc6..d22e5feb78e 100644 --- a/src/plots/gl2d/convert.js +++ b/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; diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js index 06180291e91..af767f7fe64 100644 --- a/src/plots/gl2d/scene2d.js +++ b/src/plots/gl2d/scene2d.js @@ -124,12 +124,8 @@ 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'; @@ -137,6 +133,8 @@ proto.makeFramework = function() { 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 @@ -169,6 +167,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(); @@ -221,6 +222,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]; @@ -337,24 +358,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); diff --git a/src/traces/pointcloud/attributes.js b/src/traces/pointcloud/attributes.js index 9571c3dff53..1d4533985ed 100644 --- a/src/traces/pointcloud/attributes.js +++ b/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', diff --git a/src/traces/pointcloud/convert.js b/src/traces/pointcloud/convert.js index 2c7374c8a14..4e6c9a0dcbb 100644 --- a/src/traces/pointcloud/convert.js +++ b/src/traces/pointcloud/convert.js @@ -174,7 +174,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; diff --git a/test/image/mocks/gl2d_multiple_subplots.json b/test/image/mocks/gl2d_multiple_subplots.json index c646969e354..20d6003e1d3 100644 --- a/test/image/mocks/gl2d_multiple_subplots.json +++ b/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" } } -} \ No newline at end of file +} diff --git a/test/image/mocks/gl2d_simple_inset.json b/test/image/mocks/gl2d_simple_inset.json index f0342b364f8..3bdb16b5ed1 100644 --- a/test/image/mocks/gl2d_simple_inset.json +++ b/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" } } -} \ No newline at end of file +} diff --git a/test/image/mocks/gl2d_stacked_coupled_subplots.json b/test/image/mocks/gl2d_stacked_coupled_subplots.json index 27915792aa5..f09edb3d52c 100644 --- a/test/image/mocks/gl2d_stacked_coupled_subplots.json +++ b/test/image/mocks/gl2d_stacked_coupled_subplots.json @@ -43,6 +43,8 @@ } ], "layout": { + "width": 700, + "height": 500, "yaxis": { "domain": [ 0, @@ -65,4 +67,4 @@ ] } } -} \ No newline at end of file +} diff --git a/test/image/mocks/gl2d_stacked_subplots.json b/test/image/mocks/gl2d_stacked_subplots.json index ff5d275efed..a9341f0dff5 100644 --- a/test/image/mocks/gl2d_stacked_subplots.json +++ b/test/image/mocks/gl2d_stacked_subplots.json @@ -45,6 +45,8 @@ } ], "layout": { + "width": 700, + "height": 500, "yaxis": { "domain": [ 0, @@ -73,4 +75,4 @@ ] } } -} \ No newline at end of file +}