Merge pull request #1082 from hansmaulwurf23/zoom_key

Added option zoomKey

docs/graph2d/index.html

@@ -1040,6 +1040,26 @@ function (option, path) {
             <td>The width of the timeline in pixels or as a percentage.</td>
         </tr>
 
+		<tr>
+      		<td>zoomable</td>
+      		<td>boolean</td>
+      		<td><code>true</code></td>
+      		<td>
+        		Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
+        		Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
+      		</td>
+    	</tr>
+
+		<tr>
+		    <td>zoomKey</td>
+		    <td>String</td>
+		    <td><code>''</code></td>
+		    <td>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 <code>moveable</code> is set <code><code>true</code></code>.
+		    </td>
+		</tr>
+
         <tr>
             <td>zoomMax</td>
             <td>Number</td>

docs/timeline/index.html

@@ -916,6 +916,16 @@ function (option, path) {
       </td>
     </tr>
 
+	<tr>
+      <td>zoomKey</td>
+      <td>String</td>
+      <td><code>''</code></td>
+      <td>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 <code>moveable</code> is set <code><code>true</code></code>.
+      </td>
+    </tr>
+
     <tr>
       <td>zoomMax</td>
       <td>number</td>

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;

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

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