diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
index 55c9687f..409ea89f 100644
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@@ -1040,6 +1040,26 @@ function (option, path) {
The width of the timeline in pixels or as a percentage. |
+
+ zoomable |
+ boolean |
+ true |
+
+ Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
+ Only applicable when option moveable is set true .
+ |
+
+
+
+ zoomKey |
+ String |
+ '' |
+ Specifies whether the Timeline is only zoomed when an additional key is down.
+ Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
+ Only applicable when option moveable is set true .
+ |
+
+
zoomMax |
Number |
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 322a197d..70ab3129 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -916,6 +916,16 @@ function (option, path) {
+
+ zoomKey |
+ String |
+ '' |
+ Specifies whether the Timeline is only zoomed when an additional key is down.
+ Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
+ Only applicable when option moveable is set true .
+ |
+
+
zoomMax |
number |
diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js
index 11c33093..5bf5d403 100644
--- a/lib/timeline/Range.js
+++ b/lib/timeline/Range.js
@@ -78,7 +78,7 @@ Range.prototype = new Component();
Range.prototype.setOptions = function (options) {
if (options) {
// copy the options that we know
- var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate', 'hiddenDates'];
+ var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate', 'hiddenDates', 'zoomKey'];
util.selectiveExtend(fields, this.options, options);
if ('start' in options || 'end' in options) {
@@ -474,6 +474,9 @@ Range.prototype._onMouseWheel = function(event) {
// only zoom when the mouse is inside the current range
if (!this._isInsideRange(event)) return;
+
+ // only zoom when the according key is pressed and the zoomKey option is set
+ if (this.options.zoomKey && !event[this.options.zoomKey]) return;
// retrieve delta
var delta = 0;
diff --git a/lib/timeline/optionsGraph2d.js b/lib/timeline/optionsGraph2d.js
index 40569248..c6dc0ddb 100644
--- a/lib/timeline/optionsGraph2d.js
+++ b/lib/timeline/optionsGraph2d.js
@@ -150,6 +150,7 @@ let allOptions = {
},
width: {string, number},
zoomable: {boolean},
+ zoomKey: {string: ['ctrlKey', 'altKey', 'metaKey', '']},
zoomMax: {number},
zoomMin: {number},
__type__: {object}
@@ -251,6 +252,7 @@ let configureOptions = {
start: '',
width: '100%',
zoomable: true,
+ zoomKey: ['ctrlKey', 'altKey', 'metaKey', ''],
zoomMax: [315360000000000, 10, 315360000000000, 1],
zoomMin: [10, 10, 315360000000000, 1]
}
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 81585612..da4c4803 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -113,6 +113,7 @@ let allOptions = {
type: {string},
width: {string, number},
zoomable: {boolean},
+ zoomKey: {string: ['ctrlKey', 'altKey', 'metaKey', '']},
zoomMax: {number},
zoomMin: {number},
@@ -197,6 +198,7 @@ let configureOptions = {
type: ['box', 'point', 'range', 'background'],
width: '100%',
zoomable: true,
+ zoomKey: ['ctrlKey', 'altKey', 'metaKey', ''],
zoomMax: [315360000000000, 10, 315360000000000, 1],
zoomMin: [10, 10, 315360000000000, 1]
}