Handle both mouse wheel and trackpad

The current code ignores magnitude differences in deltaY, resulting in an experience that is either too fast on trackpad or too slow with a mousewheel.

This change allows those to differ within a clamped range, so that one zoomSpeed value works well for both input devices.

Fixes #1882

Author: Ted Driggs

lib/network/modules/InteractionHandler.js

@@ -590,8 +590,6 @@ class InteractionHandler {
 
   /**
    * Event handler for mouse wheel event, used to zoom the timeline
-   * See http://adomas.org/javascript-mouse-wheel/
-   *     https://github.com/EightMedia/hammer.js/issues/256
    *
    * @param {MouseEvent}  event
    * @private
@@ -604,8 +602,14 @@ class InteractionHandler {
       if (event.deltaY !== 0) {
         // calculate the new scale
         let scale = this.body.view.scale;
-        scale *=
-          1 + (event.deltaY < 0 ? 1 : -1) * (this.options.zoomSpeed * 0.1);
+        const scaledY = event.deltaY / 8;
+        /**
+         * Rapid mouse wheel movement can cause the graph to zoom so fast
+         * that the entire graph disappears; therefore limit it to two
+         * "wheel clicks" per event.
+         */
+        const clampedY = Math.sign(scaledY) * Math.min(Math.abs(scaledY), 2);
+        scale *= 1 - clampedY * (this.options.zoomSpeed * 0.1);
 
         // calculate the pointer location
         const pointer = this.getPointer({ x: event.clientX, y: event.clientY });