From e48357cda287c9a7b6381644e8555785b40d82ff Mon Sep 17 00:00:00 2001 From: Neville Bonavia Date: Fri, 27 Apr 2018 09:50:57 +0200 Subject: [PATCH 1/3] Added Resizing Support --- .gitignore | 1 + demo/index.html | 38 ++++++++++++++++++++++++++++---------- simpleheat.js | 13 +++++++++++++ 3 files changed, 42 insertions(+), 10 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index f8de37d..3bd1625 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,28 +3,35 @@ simpleheat demo -

+ +

simpleheat is a tiny and fast JS heatmap library. More on mourner / simpleheat

-
-
-
- -
+
+ +
+
+
+
+ +
+ +
@@ -48,7 +55,6 @@ console.timeEnd('draw'); frame = null; } - draw(); get('canvas').onmousemove = function (e) { @@ -58,6 +64,8 @@ var radius = get('radius'), blur = get('blur'), + width = get('width'), + height = get('height'), changeType = 'oninput' in radius ? 'oninput' : 'onchange'; radius[changeType] = blur[changeType] = function (e) { @@ -65,6 +73,16 @@ frame = frame || window.requestAnimationFrame(draw); }; +width[changeType] = height[changeType] = function (e) { + var container = get('container'); + var canvas = get('canvas'); + canvas.width = width.value; + canvas.height = height.value; + container.style.width = width.value + "px"; + container.style.height = height.value + "px"; + heat.resize(); +} + diff --git a/simpleheat.js b/simpleheat.js index dc06eb9..f670265 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -70,8 +70,21 @@ simpleheat.prototype = { }, resize: function () { + var canvasWidth = parseInt(this._canvas.width,10); + var canvasHeight = parseInt(this._canvas.height,10); + var self = this; + if (this._data != null) { + this._data = this._data.map(function(point) { + return [ + point[0]*canvasWidth/self._width, + point[1]*canvasHeight/self._height, + point[2]] + }) + } + this._width = this._canvas.width; this._height = this._canvas.height; + this.draw(); }, gradient: function (grad) { From 82a3e2620d466d955483c51be28e23f7e54a0daf Mon Sep 17 00:00:00 2001 From: Neville Bonavia Date: Fri, 27 Apr 2018 10:20:55 +0200 Subject: [PATCH 2/3] Returning this after resize --- simpleheat.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/simpleheat.js b/simpleheat.js index f670265..96cfcef 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -44,6 +44,7 @@ simpleheat.prototype = { clear: function () { this._data = []; + this.draw(); return this; }, @@ -85,6 +86,8 @@ simpleheat.prototype = { this._width = this._canvas.width; this._height = this._canvas.height; this.draw(); + + return this; }, gradient: function (grad) { From 07b84431a21849e67d00324119852b28df0672f0 Mon Sep 17 00:00:00 2001 From: Neville Bonavia Date: Fri, 27 Apr 2018 10:21:36 +0200 Subject: [PATCH 3/3] Removed auto draw after clear because it was not in scope --- simpleheat.js | 1 - 1 file changed, 1 deletion(-) diff --git a/simpleheat.js b/simpleheat.js index 96cfcef..cbe105d 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -44,7 +44,6 @@ simpleheat.prototype = { clear: function () { this._data = []; - this.draw(); return this; },