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] }