Added optional modifier keys

Author: BarryPSmith

README.md

@@ -57,10 +57,21 @@ plugins: {
 			// Minimal pan distance required before actually applying pan
 			threshold: 10,
 
+			// Required modifier key for panning. Default null (no key required)
+			// Can be one of 'ctrl', 'shift', 'alt', 'meta'
+			modifierKey: null,
+
+			// Usually non mouse input implie no keyboard,
+			// so by default modifier key is only required on mouse.
+			requireModifierNonMouse: false,
+
 			// Function called while the user is panning
 			onPan: function({chart}) { console.log(`I'm panning!!!`); },
 			// Function called once panning is completed
-			onPanComplete: function({chart}) { console.log(`I was panned!!!`); }
+			onPanComplete: function({chart}) { console.log(`I was panned!!!`); },
+			// Function called when pan fails because modifier key was not detected.
+			// event is the a hammer event that failed - see https://hammerjs.github.io/api#event-object
+			onModifierKeyFailed: function({chart, event}) { console.log(`I didn't start panning!`); }
 		},
 
 		// Container for zoom options
@@ -109,10 +120,17 @@ plugins: {
 			// On category scale, minimal zoom level before actually applying zoom
 			sensitivity: 3,
 
+			// Prevent accidental capture of scroll events.
+			// Can be one of 'ctrl', 'alt', 'shift', or 'meta'
+			// Default null (no modifier key needed)
+			wheelModifierKey: 'ctrl',
+
 			// Function called while the user is zooming
 			onZoom: function({chart}) { console.log(`I'm zooming!!!`); },
 			// Function called once zooming is completed
-			onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); }
+			onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); },
+			// Function called when wheel input occurs without modifier key
+			onWheelModifierFailed: function({chart, event}) { console.log(`I didn't start zooming!`); }
 		}
 	}
 }

src/plugin.js

@@ -17,13 +17,16 @@ Chart.Zoom.defaults = Chart.defaults.global.plugins.zoom = {
 		enabled: false,
 		mode: 'xy',
 		speed: 20,
-		threshold: 10
+		threshold: 10,
+		modifierKey: null,
+		requireModifierNonMouse: false,
 	},
 	zoom: {
 		enabled: false,
 		mode: 'xy',
 		sensitivity: 3,
-		speed: 0.1
+		speed: 0.1,
+		wheelModifierKey: null
 	}
 };
 
@@ -510,6 +513,20 @@ var zoomPlugin = {
 
 		var _scrollTimeout = null;
 		chartInstance.$zoom._wheelHandler = function(event) {
+			var zoomOptions = chartInstance.$zoom._options.zoom;
+
+			if (zoomOptions
+					&& zoomOptions.wheelModifierKey
+					&& !event[zoomOptions.wheelModifierKey + 'Key']) {
+				if (typeof zoomOptions.onWheelModifierKeyFailed === 'function') {
+					zoomOptions.onWheelModifierKeyFailed({
+						chart: chartInstance,
+						event: event
+					});
+				}
+				return;
+			}
+
 			// Prevent the event from triggering the default behavior (eg. Content scrolling).
 			if (event.cancelable) {
 				event.preventDefault();
@@ -530,7 +547,6 @@ var zoomPlugin = {
 				y: offsetY
 			};
 
-			var zoomOptions = chartInstance.$zoom._options.zoom;
 			var speedPercent = zoomOptions.speed;
 
 			if (event.deltaY >= 0) {
@@ -547,10 +563,33 @@ var zoomPlugin = {
 		};
 
 		if (Hammer) {
+			var panEnabler = function(recognizer, event) {
+				const panOptions = chartInstance.$zoom._options.pan;
+				if (!panOptions || !panOptions.enabled) {
+					return false;
+				}
+				if (!event || !event.srcEvent) { // Sometimes Hammer queries this with a null event.
+					return true;
+				}
+				const requireModifier = panOptions.modifierKey
+					&& (panOptions.requireModifierNonMouse || event.pointerType === 'mouse');
+				if (requireModifier && !event.srcEvent[panOptions.modifierKey + 'Key']) {
+					if (typeof panOptions.onModifierKeyFailed === 'function') {
+						panOptions.onModifierKeyFailed({
+							chart: chartInstance,
+							event: event
+						});
+					}
+					return false;
+				}
+				return true;
+			};
+
 			var mc = new Hammer.Manager(node);
 			mc.add(new Hammer.Pinch());
 			mc.add(new Hammer.Pan({
-				threshold: panThreshold
+				threshold: panThreshold,
+				enable: panEnabler
 			}));
 
 			// Hammer reports the total scaling. We need the incremental amount

test/specs/defaults.spec.js

@@ -6,13 +6,16 @@ describe('defaults', function() {
 			enabled: false,
 			mode: 'xy',
 			speed: 20,
-			threshold: 10
+			threshold: 10,
+			modifierKey: null,
+			requireModifierNonMouse: false
 		},
 		zoom: {
 			enabled: false,
 			mode: 'xy',
 			sensitivity: 3,
-			speed: 0.1
+			speed: 0.1,
+			wheelModifierKey: null
 		}
 	};