Fix #233: onPan function is called multiple times (#250)

Author: benmccann

README.md

@@ -34,6 +34,7 @@ plugins: {
 			// Panning directions. Remove the appropriate direction to disable
 			// Eg. 'y' would only allow panning in the y direction
 			mode: 'xy',
+
 			rangeMin: {
 				// Format of min pan range depends on scale type
 				x: null,
@@ -44,9 +45,11 @@ plugins: {
 				x: null,
 				y: null
 			},
+
+			// Function called while the user is panning
+			onPan: function({chart}) { console.log(`I'm panning!!!`); }
 			// Function called once panning is completed
-			// Useful for dynamic data loading
-			onPan: function({chart}) { console.log(`I was panned!!!`); }
+			onPanComplete: function({chart}) { console.log(`I was panned!!!`); }
 		},
 
 		// Container for zoom options
@@ -83,9 +86,10 @@ plugins: {
 			// (percentage of zoom on a wheel event)
 			speed: 0.1,
 
+			// Function called while the user is zooming
+			onZoom: function({chart}) { console.log(`I'm zooming!!!`); }
 			// Function called once zooming is completed
-			// Useful for dynamic data loading
-			onZoom: function({chart}) { console.log(`I was zoomed!!!`); }
+			onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); }
 		}
 	}
 }

src/plugin.js

@@ -455,20 +455,26 @@ var zoomPlugin = {
 
 			var chartArea = chartInstance.chartArea;
 
+			var zoomOptions = chartInstance.$zoom._options.zoom;
 			var chartDistanceX = chartArea.right - chartArea.left;
-			var xEnabled = directionEnabled(chartInstance.$zoom._options.zoom.mode, 'x');
+			var xEnabled = directionEnabled(zoomOptions.mode, 'x');
 			var zoomX = xEnabled && dragDistanceX ? 1 + ((chartDistanceX - dragDistanceX) / chartDistanceX) : 1;
 
 			var chartDistanceY = chartArea.bottom - chartArea.top;
-			var yEnabled = directionEnabled(chartInstance.$zoom._options.zoom.mode, 'y');
+			var yEnabled = directionEnabled(zoomOptions.mode, 'y');
 			var zoomY = yEnabled && dragDistanceY ? 1 + ((chartDistanceY - dragDistanceY) / chartDistanceY) : 1;
 
 			doZoom(chartInstance, zoomX, zoomY, {
 				x: (startX - chartArea.left) / (1 - dragDistanceX / chartDistanceX) + chartArea.left,
 				y: (startY - chartArea.top) / (1 - dragDistanceY / chartDistanceY) + chartArea.top
 			});
+
+			if (typeof zoomOptions.onZoomComplete === 'function') {
+				zoomOptions.onZoomComplete({chart: chartInstance});
+			}
 		};
 
+		var _scrollTimeout = null;
 		chartInstance.$zoom._wheelHandler = function(event) {
 			var rect = event.target.getBoundingClientRect();
 			var offsetX = event.clientX - rect.left;
@@ -479,13 +485,21 @@ var zoomPlugin = {
 				y: offsetY
 			};
 
-			var speedPercent = chartInstance.$zoom._options.zoom.speed;
+			var zoomOptions = chartInstance.$zoom._options.zoom;
+			var speedPercent = zoomOptions.speed;
 
 			if (event.deltaY >= 0) {
 				speedPercent = -speedPercent;
 			}
 			doZoom(chartInstance, 1 + speedPercent, 1 + speedPercent, center);
 
+			clearTimeout(_scrollTimeout);
+			_scrollTimeout = setTimeout(function() {
+				if (typeof zoomOptions.onZoomComplete === 'function') {
+					zoomOptions.onZoomComplete({chart: chartInstance});
+				}
+			}, 250);
+
 			// Prevent the event from triggering the default behavior (eg. Content scrolling).
 			if (event.cancelable) {
 				event.preventDefault();
@@ -569,6 +583,11 @@ var zoomPlugin = {
 				setTimeout(function() {
 					panning = false;
 				}, 500);
+
+				var panOptions = chartInstance.$zoom._options.pan;
+				if (typeof panOptions.onPanComplete === 'function') {
+					panOptions.onPanComplete({chart: chartInstance});
+				}
 			});
 
 			chartInstance.$zoom._ghostClickHandler = function(e) {