From 48d5cef4d261ad937a27fb993ca63e43ab1a3836 Mon Sep 17 00:00:00 2001 From: jonl-percsolutions-com Date: Tue, 7 Jun 2016 11:15:25 -0700 Subject: [PATCH 1/3] Only draw if ready Check height and width to make sure map is ready to draw. --- simpleheat.js | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/simpleheat.js b/simpleheat.js index de0fd65..db1fb7f 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -96,24 +96,27 @@ simpleheat.prototype = { }, draw: function (minOpacity) { - if (!this._circle) this.radius(this.defaultRadius); - if (!this._grad) this.gradient(this.defaultGradient); - var ctx = this._ctx; + // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient + if (this._isReady()) { + if (!this._circle) this.radius(this.defaultRadius); + if (!this._grad) this.gradient(this.defaultGradient); - ctx.clearRect(0, 0, this._width, this._height); + var ctx = this._ctx; - // draw a grayscale heatmap by putting a blurred circle at each data point - for (var i = 0, len = this._data.length, p; i < len; i++) { - p = this._data[i]; - ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity); - ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r); - } + ctx.clearRect(0, 0, this._width, this._height); - // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient - var colored = ctx.getImageData(0, 0, this._width, this._height); - this._colorize(colored.data, this._grad); - ctx.putImageData(colored, 0, 0); + // draw a grayscale heatmap by putting a blurred circle at each data point + for (var i = 0, len = this._data.length, p; i < len; i++) { + p = this._data[i]; + ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity); + ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r); + } + + var colored = ctx.getImageData(0, 0, this._width, this._height); + this._colorize(colored.data, this._grad); + ctx.putImageData(colored, 0, 0); + } return this; }, @@ -138,5 +141,10 @@ simpleheat.prototype = { // the canvas class needs to have a default constructor without any parameter return new this._canvas.constructor(); } + }, + + _isReady:function() { + return this._width > 0 && this._height > 0; } + }; From 48165119f57e601995109d27f16fa2e354efe47b Mon Sep 17 00:00:00 2001 From: jonl-percsolutions-com Date: Tue, 7 Jun 2016 14:53:42 -0700 Subject: [PATCH 2/3] convert return to early, add comments --- simpleheat.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/simpleheat.js b/simpleheat.js index db1fb7f..2138a30 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -96,28 +96,30 @@ simpleheat.prototype = { }, draw: function (minOpacity) { - + //return if not ready + if (!this._isReady()) { + return this; + } + // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient - if (this._isReady()) { - if (!this._circle) this.radius(this.defaultRadius); - if (!this._grad) this.gradient(this.defaultGradient); + if (!this._circle) this.radius(this.defaultRadius); + if (!this._grad) this.gradient(this.defaultGradient); - var ctx = this._ctx; + var ctx = this._ctx; - ctx.clearRect(0, 0, this._width, this._height); + ctx.clearRect(0, 0, this._width, this._height); - // draw a grayscale heatmap by putting a blurred circle at each data point - for (var i = 0, len = this._data.length, p; i < len; i++) { - p = this._data[i]; - ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity); - ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r); - } - - var colored = ctx.getImageData(0, 0, this._width, this._height); - this._colorize(colored.data, this._grad); - ctx.putImageData(colored, 0, 0); + // draw a grayscale heatmap by putting a blurred circle at each data point + for (var i = 0, len = this._data.length, p; i < len; i++) { + p = this._data[i]; + ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity); + ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r); } + var colored = ctx.getImageData(0, 0, this._width, this._height); + this._colorize(colored.data, this._grad); + ctx.putImageData(colored, 0, 0); + return this; }, @@ -144,6 +146,7 @@ simpleheat.prototype = { }, _isReady:function() { + //not ready unless we have a valid width or height return this._width > 0 && this._height > 0; } From 886ab005984736fae2f926cad8c1eec2084d2b9b Mon Sep 17 00:00:00 2001 From: jonl-percsolutions-com Date: Wed, 8 Jun 2016 08:04:29 -0700 Subject: [PATCH 3/3] coding style changes. --- simpleheat.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/simpleheat.js b/simpleheat.js index 2138a30..6c9fc03 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -96,10 +96,8 @@ simpleheat.prototype = { }, draw: function (minOpacity) { - //return if not ready - if (!this._isReady()) { - return this; - } + //return if width or height invalid + if (!this._width || !this._height) return this; // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient if (!this._circle) this.radius(this.defaultRadius); @@ -143,11 +141,6 @@ simpleheat.prototype = { // the canvas class needs to have a default constructor without any parameter return new this._canvas.constructor(); } - }, - - _isReady:function() { - //not ready unless we have a valid width or height - return this._width > 0 && this._height > 0; } - + };