From cd525a417d1220f860d31ac149433f06ccb04d8e Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 26 Sep 2016 17:57:52 -0400 Subject: [PATCH 01/11] Pass static argument to scene2d --- src/plots/gl2d/convert.js | 2 ++ 1 file changed, 2 insertions(+) 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; From 2558160ce427665a5c389d6e2360371126a50105 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Fri, 30 Sep 2016 11:29:44 -0400 Subject: [PATCH 02/11] Fix static canvas dimensions --- src/plots/gl2d/scene2d.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js index 06180291e91..cdcf9511504 100644 --- a/src/plots/gl2d/scene2d.js +++ b/src/plots/gl2d/scene2d.js @@ -169,6 +169,27 @@ proto.toImage = function(format) { this.stopped = true; if(this.staticPlot) this.container.appendChild(STATIC_CANVAS); + + + var glplot = this.glplot, + pixelRatio = this.pixelRatio; + + let 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 + var canvas = this.canvas; + if(canvas.width !== pixelWidth || canvas.height !== pixelHeight) { + canvas.width = pixelWidth; + canvas.height = pixelHeight; + } + + + // force redraw this.glplot.setDirty(); this.glplot.draw(); From 07af2b83e8d6b4bb9da5363ac27ffeeebadf0fd0 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Fri, 30 Sep 2016 11:39:51 -0400 Subject: [PATCH 03/11] es5ify --- src/plots/gl2d/scene2d.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js index cdcf9511504..c6d44602ec2 100644 --- a/src/plots/gl2d/scene2d.js +++ b/src/plots/gl2d/scene2d.js @@ -172,9 +172,8 @@ proto.toImage = function(format) { var glplot = this.glplot, - pixelRatio = this.pixelRatio; - - let fullLayout = this.fullLayout; + pixelRatio = this.pixelRatio, + fullLayout = this.fullLayout; var width = fullLayout.width, height = fullLayout.height, From e07201a794f3700475898c646b1d896f4e1038e3 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Fri, 30 Sep 2016 12:03:19 -0400 Subject: [PATCH 04/11] Factor out canvas resize --- src/plots/gl2d/scene2d.js | 60 ++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js index c6d44602ec2..455e1040562 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,25 +167,8 @@ proto.toImage = function(format) { this.stopped = true; if(this.staticPlot) this.container.appendChild(STATIC_CANVAS); - - - var glplot = this.glplot, - 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 - var canvas = this.canvas; - if(canvas.width !== pixelWidth || canvas.height !== pixelHeight) { - canvas.width = pixelWidth; - canvas.height = pixelHeight; - } - - + //update canvas size + this.updateSize(this.canvas); // force redraw this.glplot.setDirty(); @@ -241,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]; @@ -365,16 +366,9 @@ proto.plot = function(fullData, calcData, 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); From 4fb0b19caf89e4276f7065ca82976d76a6af0ddd Mon Sep 17 00:00:00 2001 From: Dmitry Date: Fri, 30 Sep 2016 12:16:13 -0400 Subject: [PATCH 05/11] Make eslint happy --- src/plots/gl2d/scene2d.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js index 455e1040562..af767f7fe64 100644 --- a/src/plots/gl2d/scene2d.js +++ b/src/plots/gl2d/scene2d.js @@ -167,7 +167,7 @@ proto.toImage = function(format) { this.stopped = true; if(this.staticPlot) this.container.appendChild(STATIC_CANVAS); - //update canvas size + // update canvas size this.updateSize(this.canvas); // force redraw @@ -223,7 +223,7 @@ proto.toImage = function(format) { }; proto.updateSize = function(canvas) { - if (!canvas) canvas = this.canvas; + if(!canvas) canvas = this.canvas; var pixelRatio = this.pixelRatio, fullLayout = this.fullLayout; @@ -240,7 +240,7 @@ proto.updateSize = function(canvas) { } return canvas; -} +}; proto.computeTickMarks = function() { this.xaxis._length = @@ -358,8 +358,7 @@ 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); From 973d6ec950469393a64fa8e92fcfa47b3c0618a9 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 3 Oct 2016 12:30:16 -0400 Subject: [PATCH 06/11] Add dimensions to mocks --- test/image/mocks/gl2d_multiple_subplots.json | 4 +++- test/image/mocks/gl2d_simple_inset.json | 4 +++- test/image/mocks/gl2d_stacked_coupled_subplots.json | 4 +++- test/image/mocks/gl2d_stacked_subplots.json | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) 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 +} From 0efb54ed4886ae3fe322392602d738d257e8f41f Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 3 Oct 2016 15:08:31 -0400 Subject: [PATCH 07/11] Detect blending dynamically --- src/traces/pointcloud/attributes.js | 2 +- src/traces/pointcloud/convert.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/traces/pointcloud/attributes.js b/src/traces/pointcloud/attributes.js index 9571c3dff53..953c1034f9f 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: undefined, 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..0e82598a687 100644 --- a/src/traces/pointcloud/convert.js +++ b/src/traces/pointcloud/convert.js @@ -174,7 +174,12 @@ proto.updateFast = function(options) { markerColor[3] *= opacity; this.pointcloudOptions.color = markerColor; - this.pointcloudOptions.blend = options.marker.blend; + + var blend = options.marker.blend; + if (blend == null) { + blend = x.length < 100 || y.length < 100; + } + this.pointcloudOptions.blend = blend; borderColor[3] *= opacity; this.pointcloudOptions.borderColor = borderColor; From 8192b50d8e14ec379ac7a9b5c0615dc23c118c0b Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 3 Oct 2016 15:22:46 -0400 Subject: [PATCH 08/11] Fix code for linter --- src/traces/pointcloud/convert.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/traces/pointcloud/convert.js b/src/traces/pointcloud/convert.js index 0e82598a687..35eef5d5d2f 100644 --- a/src/traces/pointcloud/convert.js +++ b/src/traces/pointcloud/convert.js @@ -176,8 +176,9 @@ proto.updateFast = function(options) { this.pointcloudOptions.color = markerColor; var blend = options.marker.blend; - if (blend == null) { - blend = x.length < 100 || y.length < 100; + if(blend === undefined) { + var maxPoints = 100; + blend = x.length < maxPoints || y.length < maxPoints; } this.pointcloudOptions.blend = blend; From 1649b1f16e329270caaf35903aa76dbebe8bbd8d Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 3 Oct 2016 15:25:59 -0400 Subject: [PATCH 09/11] Add comment --- src/traces/pointcloud/convert.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/traces/pointcloud/convert.js b/src/traces/pointcloud/convert.js index 35eef5d5d2f..f8308ba65ee 100644 --- a/src/traces/pointcloud/convert.js +++ b/src/traces/pointcloud/convert.js @@ -175,6 +175,8 @@ proto.updateFast = function(options) { markerColor[3] *= opacity; this.pointcloudOptions.color = markerColor; + // detect blending from the number of points, if undefined + // because large data with blending hits performance var blend = options.marker.blend; if(blend === undefined) { var maxPoints = 100; From cc4d3c732547faa032268af456518a690ad94ba7 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 3 Oct 2016 15:57:15 -0400 Subject: [PATCH 10/11] Change undefined to null --- src/traces/pointcloud/attributes.js | 2 +- src/traces/pointcloud/convert.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/traces/pointcloud/attributes.js b/src/traces/pointcloud/attributes.js index 953c1034f9f..1d4533985ed 100644 --- a/src/traces/pointcloud/attributes.js +++ b/src/traces/pointcloud/attributes.js @@ -75,7 +75,7 @@ module.exports = { }, blend: { valType: 'boolean', - dflt: undefined, + 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 f8308ba65ee..4e6c9a0dcbb 100644 --- a/src/traces/pointcloud/convert.js +++ b/src/traces/pointcloud/convert.js @@ -178,7 +178,7 @@ proto.updateFast = function(options) { // detect blending from the number of points, if undefined // because large data with blending hits performance var blend = options.marker.blend; - if(blend === undefined) { + if(blend === null) { var maxPoints = 100; blend = x.length < maxPoints || y.length < maxPoints; } From 1bc8d08ae9746d68909a83840992c0a5ec01fd46 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Mon, 3 Oct 2016 16:22:42 -0400 Subject: [PATCH 11/11] Update gl-plot2d --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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",