diff --git a/chartjs-plugin-zoom.js b/chartjs-plugin-zoom.js index 13566f171..2543f24b5 100644 --- a/chartjs-plugin-zoom.js +++ b/chartjs-plugin-zoom.js @@ -1,7 +1,7 @@ /*! * chartjs-plugin-zoom * http://chartjs.org/ - * Version: 0.4.1 + * Version: 0.4.3 * * Copyright 2016 Evert Timberg * Released under the MIT license @@ -300,7 +300,7 @@ var zoomPlugin = { beforeInit: function(chartInstance) { chartInstance.zoom = {}; - this.node = chartInstance.chart.ctx.canvas; + var node = chartInstance.zoom.node = chartInstance.chart.ctx.canvas; var options = chartInstance.options; var panThreshold = helpers.getValueOrDefault(options.pan ? options.pan.threshold : undefined, zoomNS.defaults.pan.threshold); @@ -312,7 +312,7 @@ var zoomPlugin = { chartInstance.zoom._mouseDownHandler = function(event) { chartInstance.zoom._dragZoomStart = event; }; - this.node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler); + node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler); chartInstance.zoom._mouseMoveHandler = function(event){ if (chartInstance.zoom._dragZoomStart) { @@ -322,7 +322,7 @@ var zoomPlugin = { chartInstance.update(0); }; - this.node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); + node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); chartInstance.zoom._mouseUpHandler = function(event){ if (chartInstance.zoom._dragZoomStart) { @@ -347,7 +347,7 @@ var zoomPlugin = { chartInstance.zoom._dragZoomEnd = null; } }; - this.node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler); + node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler); } else { chartInstance.zoom._wheelHandler = function(event) { var rect = event.target.getBoundingClientRect(); @@ -368,11 +368,11 @@ var zoomPlugin = { event.preventDefault(); }; - this.node.addEventListener('wheel', chartInstance.zoom._wheelHandler); + node.addEventListener('wheel', chartInstance.zoom._wheelHandler); } if (Hammer) { - var mc = new Hammer.Manager(this.node); + var mc = new Hammer.Manager(node); mc.add(new Hammer.Pinch()); mc.add(new Hammer.Pan({ threshold: panThreshold @@ -454,28 +454,29 @@ var zoomPlugin = { }, destroy: function(chartInstance) { + if (chartInstance.zoom) { + var options = chartInstance.options; + var node = chartInstance.zoom.node; + + if (options.zoom && options.zoom.drag) { + node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler); + node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); + node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler); + } else { + node.removeEventListener('wheel', chartInstance.zoom._wheelHandler); + } - var options = chartInstance.options; + delete chartInstance.zoom; - if (options.zoom && options.zoom.drag) { - this.node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler); - this.node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); - this.node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler); - } else { - this.node.removeEventListener('wheel', chartInstance.zoom._wheelHandler); - } - - this.node = null; - this.zoom = null; - - var mc = chartInstance._mc; - if (mc) { - mc.remove('pinchstart'); - mc.remove('pinch'); - mc.remove('pinchend'); - mc.remove('panstart'); - mc.remove('pan'); - mc.remove('panend'); + var mc = chartInstance._mc; + if (mc) { + mc.remove('pinchstart'); + mc.remove('pinch'); + mc.remove('pinchend'); + mc.remove('panstart'); + mc.remove('pan'); + mc.remove('panend'); + } } } }; diff --git a/chartjs-plugin-zoom.min.js b/chartjs-plugin-zoom.min.js index 9a7a3ad13..11c2f7d01 100644 --- a/chartjs-plugin-zoom.min.js +++ b/chartjs-plugin-zoom.min.js @@ -1,10 +1,10 @@ /*! * chartjs-plugin-zoom * http://chartjs.org/ - * Version: 0.4.1 + * Version: 0.4.3 * * Copyright 2016 Evert Timberg * Released under the MIT license * https://github.com/chartjs/chartjs-plugin-zoom/blob/master/LICENSE.md */ -!function e(t,o,n){function a(r,l){if(!o[r]){if(!t[r]){var m="function"==typeof require&&require;if(!l&&m)return m(r,!0);if(i)return i(r,!0);var u=new Error("Cannot find module '"+r+"'");throw u.code="MODULE_NOT_FOUND",u}var s=o[r]={exports:{}};t[r][0].call(s.exports,function(e){var o=t[r][1][e];return a(o?o:e)},s,s.exports,e,t,o,n)}return o[r].exports}for(var i="function"==typeof require&&require,r=0;r1?x.zoomCumulativeDelta+1:x.zoomCumulativeDelta-1,Math.abs(x.zoomCumulativeDelta)>m&&(x.zoomCumulativeDelta<0?(s<=u?i<=0?l=Math.min(r,l+1):i=Math.max(0,i-1):s>u&&(l>=r?i=Math.max(0,i-1):l=Math.min(r,l+1)),x.zoomCumulativeDelta=0):x.zoomCumulativeDelta>0&&(s<=u?i=iu&&(l=l>i?l=Math.max(i,l-1):l),x.zoomCumulativeDelta=0),e.options.ticks.min=a[i],e.options.ticks.max=a[l])}function i(e,t,o){var n,a,i=e.options;e.isHorizontal()?(n=e.right-e.left,a=(o.x-e.left)/n):(n=e.bottom-e.top,a=(o.y-e.top)/n);var r=1-a,l=n*(t-1),m=l*a,u=l*r;i.time.min=e.getValueForPixel(e.getPixelForValue(e.firstTick)+m),i.time.max=e.getValueForPixel(e.getPixelForValue(e.lastTick)-u)}function r(e,t,o){var n=e.max-e.min,a=n*(t-1),i=e.isHorizontal()?o.x:o.y,r=(e.getValueForPixel(i)-e.min)/n,l=1-r,m=a*r,u=a*l;e.options.ticks.min=e.min+m,e.options.ticks.max=e.max-u}function l(e,t,o,n){var a=z[e.options.type];a&&a(e,t,o,n)}function m(e,t,o){var a=e.chartArea;o||(o={x:(a.left+a.right)/2,y:(a.top+a.bottom)/2});var i=e.options.zoom;if(i&&g.getValueOrDefault(i.enabled,F.zoom.enabled)){var r=g.getValueOrDefault(e.options.zoom.mode,F.zoom.mode);i.sensitivity=g.getValueOrDefault(e.options.zoom.sensitivity,F.zoom.sensitivity),g.each(e.scales,function(e,a){e.isHorizontal()&&n(r,"x")?l(e,t,o,i):!e.isHorizontal()&&n(r,"y")&&l(e,t,o,i)}),e.update(0)}}function u(e,t,o){var n,a=e.chart.data.labels,i=a.length-1,r=Math.max(e.ticks.length-(e.options.gridLines.offsetGridLines?0:1),1),l=o.speed,m=e.minIndex,u=Math.round(e.width/(r*l));x.panCumulativeDelta+=t,m=x.panCumulativeDelta>u?Math.max(0,m-1):x.panCumulativeDelta<-u?Math.min(i-r+1,m+1):m,x.panCumulativeDelta=m!==e.minIndex?0:x.panCumulativeDelta,n=Math.min(i,m+r-1),e.options.ticks.min=a[m],e.options.ticks.max=a[n]}function s(e,t){var o=e.options;o.time.min=e.getValueForPixel(e.getPixelForValue(e.firstTick)-t),o.time.max=e.getValueForPixel(e.getPixelForValue(e.lastTick)-t)}function d(e,t){var o=e.options.ticks,n=e.start,a=e.end;o.reverse?(o.max=e.getValueForPixel(e.getPixelForValue(n)-t),o.min=e.getValueForPixel(e.getPixelForValue(a)-t)):(o.min=e.getValueForPixel(e.getPixelForValue(n)-t),o.max=e.getValueForPixel(e.getPixelForValue(a)-t))}function c(e,t,o){var n=D[e.options.type];n&&n(e,t,o)}function p(e,t,o){var a=e.options.pan;if(a&&g.getValueOrDefault(a.enabled,F.pan.enabled)){var i=g.getValueOrDefault(e.options.pan.mode,F.pan.mode);a.speed=g.getValueOrDefault(e.options.pan.speed,F.pan.speed),g.each(e.scales,function(e,r){e.isHorizontal()&&n(i,"x")&&0!==t?c(e,t,a):!e.isHorizontal()&&n(i,"y")&&0!==o&&c(e,o,a)}),e.update(0)}}function f(e){var t=e.scales;for(var o in t){var n=t[o];if(!n.isHorizontal())return n}}var v=e("hammerjs");v="function"==typeof v?v:window.Hammer;var h=e("chart.js");h="function"==typeof h?h:window.Chart;var g=h.helpers,x=h.Zoom=h.Zoom||{},z=x.zoomFunctions=x.zoomFunctions||{},D=x.panFunctions=x.panFunctions||{},F=x.defaults={pan:{enabled:!0,mode:"xy",speed:20,threshold:10},zoom:{enabled:!0,mode:"xy",sensitivity:3}};x.zoomFunctions.category=a,x.zoomFunctions.time=i,x.zoomFunctions.linear=r,x.zoomFunctions.logarithmic=r,x.panFunctions.category=u,x.panFunctions.time=s,x.panFunctions.linear=d,x.panFunctions.logarithmic=d,x.panCumulativeDelta=0,x.zoomCumulativeDelta=0;var y={afterInit:function(e){g.each(e.scales,function(e){e.originalOptions=JSON.parse(JSON.stringify(e.options))}),e.resetZoom=function(){g.each(e.scales,function(e,t){var o=e.options.time,n=e.options.ticks;o&&(delete o.min,delete o.max),n&&(delete n.min,delete n.max),e.options=g.configMerge(e.options,e.originalOptions)}),g.each(e.data.datasets,function(e,t){e._meta=null}),e.update()}},beforeInit:function(e){e.zoom={},this.node=e.chart.ctx.canvas;var t=e.options,o=g.getValueOrDefault(t.pan?t.pan.threshold:void 0,x.defaults.pan.threshold);if(t.zoom&&t.zoom.drag?(t.zoom.mode="x",e.zoom._mouseDownHandler=function(t){e.zoom._dragZoomStart=t},this.node.addEventListener("mousedown",e.zoom._mouseDownHandler),e.zoom._mouseMoveHandler=function(t){e.zoom._dragZoomStart&&(e.zoom._dragZoomEnd=t,e.update(0)),e.update(0)},this.node.addEventListener("mousemove",e.zoom._mouseMoveHandler),e.zoom._mouseUpHandler=function(t){if(e.zoom._dragZoomStart){var o=e.chartArea,n=f(e),a=e.zoom._dragZoomStart,i=a.target.getBoundingClientRect().left,r=Math.min(a.x,t.x)-i,l=Math.max(a.x,t.x)-i,u=l-r,s=o.right-o.left,d=1+(s-u)/s;u>0&&m(e,d,{x:u/2+r,y:(n.bottom-n.top)/2}),e.zoom._dragZoomStart=null,e.zoom._dragZoomEnd=null}},this.node.addEventListener("mouseup",e.zoom._mouseUpHandler)):(e.zoom._wheelHandler=function(t){var o=t.target.getBoundingClientRect(),n=t.clientX-o.left,a=t.clientY-o.top,i={x:n,y:a};t.deltaY<0?m(e,1.1,i):m(e,.909,i),t.preventDefault()},this.node.addEventListener("wheel",e.zoom._wheelHandler)),v){var n=new v.Manager(this.node);n.add(new v.Pinch),n.add(new v.Pan({threshold:o}));var a,i=function(t){var o=1/a*t.scale;m(e,o,t.center),a=t.scale};n.on("pinchstart",function(e){a=1}),n.on("pinch",i),n.on("pinchend",function(e){i(e),a=null,x.zoomCumulativeDelta=0});var r=null,l=null,u=function(t){if(null!==r&&null!==l){var o=t.deltaX-r,n=t.deltaY-l;r=t.deltaX,l=t.deltaY,p(e,o,n)}};n.on("panstart",function(e){r=0,l=0,u(e)}),n.on("panmove",u),n.on("panend",function(e){r=null,l=null,x.panCumulativeDelta=0}),e._mc=n}},beforeDatasetsDraw:function(e){var t=e.chart.ctx,o=e.chartArea;if(t.save(),t.beginPath(),e.zoom._dragZoomEnd){var n=f(e),a=e.zoom._dragZoomStart,i=e.zoom._dragZoomEnd,r=a.target.getBoundingClientRect().left,l=Math.min(a.x,i.x)-r,m=Math.max(a.x,i.x)-r,u=m-l;t.fillStyle="rgba(225,225,225,0.3)",t.lineWidth=5,t.fillRect(l,n.top,u,n.bottom-n.top)}t.rect(o.left,o.top,o.right-o.left,o.bottom-o.top),t.clip()},afterDatasetsDraw:function(e){e.chart.ctx.restore()},destroy:function(e){var t=e.options;t.zoom&&t.zoom.drag?(this.node.removeEventListener("mousedown",e.zoom._mouseDownHandler),this.node.removeEventListener("mousemove",e.zoom._mouseMoveHandler),this.node.removeEventListener("mouseup",e.zoom._mouseUpHandler)):this.node.removeEventListener("wheel",e.zoom._wheelHandler),this.node=null,this.zoom=null;var o=e._mc;o&&(o.remove("pinchstart"),o.remove("pinch"),o.remove("pinchend"),o.remove("panstart"),o.remove("pan"),o.remove("panend"))}};t.exports=y,h.pluginService.register(y)},{"chart.js":1,hammerjs:1}]},{},[2]); \ No newline at end of file +!function e(o,t,n){function a(r,l){if(!t[r]){if(!o[r]){var m="function"==typeof require&&require;if(!l&&m)return m(r,!0);if(i)return i(r,!0);var u=new Error("Cannot find module '"+r+"'");throw u.code="MODULE_NOT_FOUND",u}var s=t[r]={exports:{}};o[r][0].call(s.exports,function(e){var t=o[r][1][e];return a(t?t:e)},s,s.exports,e,o,t,n)}return t[r].exports}for(var i="function"==typeof require&&require,r=0;r1?x.zoomCumulativeDelta+1:x.zoomCumulativeDelta-1,Math.abs(x.zoomCumulativeDelta)>m&&(x.zoomCumulativeDelta<0?(s<=u?i<=0?l=Math.min(r,l+1):i=Math.max(0,i-1):s>u&&(l>=r?i=Math.max(0,i-1):l=Math.min(r,l+1)),x.zoomCumulativeDelta=0):x.zoomCumulativeDelta>0&&(s<=u?i=iu&&(l=l>i?l=Math.max(i,l-1):l),x.zoomCumulativeDelta=0),e.options.ticks.min=a[i],e.options.ticks.max=a[l])}function i(e,o,t){var n,a,i=e.options;e.isHorizontal()?(n=e.right-e.left,a=(t.x-e.left)/n):(n=e.bottom-e.top,a=(t.y-e.top)/n);var r=1-a,l=n*(o-1),m=l*a,u=l*r;i.time.min=e.getValueForPixel(e.getPixelForValue(e.firstTick)+m),i.time.max=e.getValueForPixel(e.getPixelForValue(e.lastTick)-u)}function r(e,o,t){var n=e.max-e.min,a=n*(o-1),i=e.isHorizontal()?t.x:t.y,r=(e.getValueForPixel(i)-e.min)/n,l=1-r,m=a*r,u=a*l;e.options.ticks.min=e.min+m,e.options.ticks.max=e.max-u}function l(e,o,t,n){var a=z[e.options.type];a&&a(e,o,t,n)}function m(e,o,t){var a=e.chartArea;t||(t={x:(a.left+a.right)/2,y:(a.top+a.bottom)/2});var i=e.options.zoom;if(i&&g.getValueOrDefault(i.enabled,F.zoom.enabled)){var r=g.getValueOrDefault(e.options.zoom.mode,F.zoom.mode);i.sensitivity=g.getValueOrDefault(e.options.zoom.sensitivity,F.zoom.sensitivity),g.each(e.scales,function(e,a){e.isHorizontal()&&n(r,"x")?l(e,o,t,i):!e.isHorizontal()&&n(r,"y")&&l(e,o,t,i)}),e.update(0)}}function u(e,o,t){var n,a=e.chart.data.labels,i=a.length-1,r=Math.max(e.ticks.length-(e.options.gridLines.offsetGridLines?0:1),1),l=t.speed,m=e.minIndex,u=Math.round(e.width/(r*l));x.panCumulativeDelta+=o,m=x.panCumulativeDelta>u?Math.max(0,m-1):x.panCumulativeDelta<-u?Math.min(i-r+1,m+1):m,x.panCumulativeDelta=m!==e.minIndex?0:x.panCumulativeDelta,n=Math.min(i,m+r-1),e.options.ticks.min=a[m],e.options.ticks.max=a[n]}function s(e,o){var t=e.options;t.time.min=e.getValueForPixel(e.getPixelForValue(e.firstTick)-o),t.time.max=e.getValueForPixel(e.getPixelForValue(e.lastTick)-o)}function c(e,o){var t=e.options.ticks,n=e.start,a=e.end;t.reverse?(t.max=e.getValueForPixel(e.getPixelForValue(n)-o),t.min=e.getValueForPixel(e.getPixelForValue(a)-o)):(t.min=e.getValueForPixel(e.getPixelForValue(n)-o),t.max=e.getValueForPixel(e.getPixelForValue(a)-o))}function d(e,o,t){var n=D[e.options.type];n&&n(e,o,t)}function p(e,o,t){var a=e.options.pan;if(a&&g.getValueOrDefault(a.enabled,F.pan.enabled)){var i=g.getValueOrDefault(e.options.pan.mode,F.pan.mode);a.speed=g.getValueOrDefault(e.options.pan.speed,F.pan.speed),g.each(e.scales,function(e,r){e.isHorizontal()&&n(i,"x")&&0!==o?d(e,o,a):!e.isHorizontal()&&n(i,"y")&&0!==t&&d(e,t,a)}),e.update(0)}}function f(e){var o=e.scales;for(var t in o){var n=o[t];if(!n.isHorizontal())return n}}var v=e("hammerjs");v="function"==typeof v?v:window.Hammer;var h=e("chart.js");h="function"==typeof h?h:window.Chart;var g=h.helpers,x=h.Zoom=h.Zoom||{},z=x.zoomFunctions=x.zoomFunctions||{},D=x.panFunctions=x.panFunctions||{},F=x.defaults={pan:{enabled:!0,mode:"xy",speed:20,threshold:10},zoom:{enabled:!0,mode:"xy",sensitivity:3}};x.zoomFunctions.category=a,x.zoomFunctions.time=i,x.zoomFunctions.linear=r,x.zoomFunctions.logarithmic=r,x.panFunctions.category=u,x.panFunctions.time=s,x.panFunctions.linear=c,x.panFunctions.logarithmic=c,x.panCumulativeDelta=0,x.zoomCumulativeDelta=0;var y={afterInit:function(e){g.each(e.scales,function(e){e.originalOptions=JSON.parse(JSON.stringify(e.options))}),e.resetZoom=function(){g.each(e.scales,function(e,o){var t=e.options.time,n=e.options.ticks;t&&(delete t.min,delete t.max),n&&(delete n.min,delete n.max),e.options=g.configMerge(e.options,e.originalOptions)}),g.each(e.data.datasets,function(e,o){e._meta=null}),e.update()}},beforeInit:function(e){e.zoom={};var o=e.zoom.node=e.chart.ctx.canvas,t=e.options,n=g.getValueOrDefault(t.pan?t.pan.threshold:void 0,x.defaults.pan.threshold);if(t.zoom&&t.zoom.drag?(t.zoom.mode="x",e.zoom._mouseDownHandler=function(o){e.zoom._dragZoomStart=o},o.addEventListener("mousedown",e.zoom._mouseDownHandler),e.zoom._mouseMoveHandler=function(o){e.zoom._dragZoomStart&&(e.zoom._dragZoomEnd=o,e.update(0)),e.update(0)},o.addEventListener("mousemove",e.zoom._mouseMoveHandler),e.zoom._mouseUpHandler=function(o){if(e.zoom._dragZoomStart){var t=e.chartArea,n=f(e),a=e.zoom._dragZoomStart,i=a.target.getBoundingClientRect().left,r=Math.min(a.x,o.x)-i,l=Math.max(a.x,o.x)-i,u=l-r,s=t.right-t.left,c=1+(s-u)/s;u>0&&m(e,c,{x:u/2+r,y:(n.bottom-n.top)/2}),e.zoom._dragZoomStart=null,e.zoom._dragZoomEnd=null}},o.addEventListener("mouseup",e.zoom._mouseUpHandler)):(e.zoom._wheelHandler=function(o){var t=o.target.getBoundingClientRect(),n=o.clientX-t.left,a=o.clientY-t.top,i={x:n,y:a};o.deltaY<0?m(e,1.1,i):m(e,.909,i),o.preventDefault()},o.addEventListener("wheel",e.zoom._wheelHandler)),v){var a=new v.Manager(o);a.add(new v.Pinch),a.add(new v.Pan({threshold:n}));var i,r=function(o){var t=1/i*o.scale;m(e,t,o.center),i=o.scale};a.on("pinchstart",function(e){i=1}),a.on("pinch",r),a.on("pinchend",function(e){r(e),i=null,x.zoomCumulativeDelta=0});var l=null,u=null,s=function(o){if(null!==l&&null!==u){var t=o.deltaX-l,n=o.deltaY-u;l=o.deltaX,u=o.deltaY,p(e,t,n)}};a.on("panstart",function(e){l=0,u=0,s(e)}),a.on("panmove",s),a.on("panend",function(e){l=null,u=null,x.panCumulativeDelta=0}),e._mc=a}},beforeDatasetsDraw:function(e){var o=e.chart.ctx,t=e.chartArea;if(o.save(),o.beginPath(),e.zoom._dragZoomEnd){var n=f(e),a=e.zoom._dragZoomStart,i=e.zoom._dragZoomEnd,r=a.target.getBoundingClientRect().left,l=Math.min(a.x,i.x)-r,m=Math.max(a.x,i.x)-r,u=m-l;o.fillStyle="rgba(225,225,225,0.3)",o.lineWidth=5,o.fillRect(l,n.top,u,n.bottom-n.top)}o.rect(t.left,t.top,t.right-t.left,t.bottom-t.top),o.clip()},afterDatasetsDraw:function(e){e.chart.ctx.restore()},destroy:function(e){if(e.zoom){var o=e.options,t=e.zoom.node;o.zoom&&o.zoom.drag?(t.removeEventListener("mousedown",e.zoom._mouseDownHandler),t.removeEventListener("mousemove",e.zoom._mouseMoveHandler),t.removeEventListener("mouseup",e.zoom._mouseUpHandler)):t.removeEventListener("wheel",e.zoom._wheelHandler),delete e.zoom;var n=e._mc;n&&(n.remove("pinchstart"),n.remove("pinch"),n.remove("pinchend"),n.remove("panstart"),n.remove("pan"),n.remove("panend"))}}};o.exports=y,h.pluginService.register(y)},{"chart.js":1,hammerjs:1}]},{},[2]); \ No newline at end of file diff --git a/package.json b/package.json index 39e8deb20..e5c4f115c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "chartjs-plugin-zoom", "description": "Simple HTML5 charts using the canvas element.", - "version": "0.4.1", + "version": "0.4.3", "license": "MIT", "main": "src/chart.zoom.js", "repository": { diff --git a/samples/zoom.html b/samples/zoom.html index 9ef52bd59..e74840de4 100644 --- a/samples/zoom.html +++ b/samples/zoom.html @@ -144,7 +144,7 @@ }; - + diff --git a/src/chart.zoom.js b/src/chart.zoom.js index 19a78c142..f5a7b219e 100644 --- a/src/chart.zoom.js +++ b/src/chart.zoom.js @@ -288,7 +288,7 @@ var zoomPlugin = { beforeInit: function(chartInstance) { chartInstance.zoom = {}; - this.node = chartInstance.chart.ctx.canvas; + var node = chartInstance.zoom.node = chartInstance.chart.ctx.canvas; var options = chartInstance.options; var panThreshold = helpers.getValueOrDefault(options.pan ? options.pan.threshold : undefined, zoomNS.defaults.pan.threshold); @@ -300,7 +300,7 @@ var zoomPlugin = { chartInstance.zoom._mouseDownHandler = function(event) { chartInstance.zoom._dragZoomStart = event; }; - this.node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler); + node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler); chartInstance.zoom._mouseMoveHandler = function(event){ if (chartInstance.zoom._dragZoomStart) { @@ -310,7 +310,7 @@ var zoomPlugin = { chartInstance.update(0); }; - this.node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); + node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); chartInstance.zoom._mouseUpHandler = function(event){ if (chartInstance.zoom._dragZoomStart) { @@ -335,7 +335,7 @@ var zoomPlugin = { chartInstance.zoom._dragZoomEnd = null; } }; - this.node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler); + node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler); } else { chartInstance.zoom._wheelHandler = function(event) { var rect = event.target.getBoundingClientRect(); @@ -356,11 +356,11 @@ var zoomPlugin = { event.preventDefault(); }; - this.node.addEventListener('wheel', chartInstance.zoom._wheelHandler); + node.addEventListener('wheel', chartInstance.zoom._wheelHandler); } if (Hammer) { - var mc = new Hammer.Manager(this.node); + var mc = new Hammer.Manager(node); mc.add(new Hammer.Pinch()); mc.add(new Hammer.Pan({ threshold: panThreshold @@ -442,28 +442,29 @@ var zoomPlugin = { }, destroy: function(chartInstance) { + if (chartInstance.zoom) { + var options = chartInstance.options; + var node = chartInstance.zoom.node; + + if (options.zoom && options.zoom.drag) { + node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler); + node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); + node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler); + } else { + node.removeEventListener('wheel', chartInstance.zoom._wheelHandler); + } - var options = chartInstance.options; + delete chartInstance.zoom; - if (options.zoom && options.zoom.drag) { - this.node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler); - this.node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler); - this.node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler); - } else { - this.node.removeEventListener('wheel', chartInstance.zoom._wheelHandler); - } - - this.node = null; - this.zoom = null; - - var mc = chartInstance._mc; - if (mc) { - mc.remove('pinchstart'); - mc.remove('pinch'); - mc.remove('pinchend'); - mc.remove('panstart'); - mc.remove('pan'); - mc.remove('panend'); + var mc = chartInstance._mc; + if (mc) { + mc.remove('pinchstart'); + mc.remove('pinch'); + mc.remove('pinchend'); + mc.remove('panstart'); + mc.remove('pan'); + mc.remove('panend'); + } } } };