From f21d53b44f71ceb69c75a35146d91c3a78e6b70f Mon Sep 17 00:00:00 2001 From: Ted Driggs Date: Thu, 13 Jul 2023 06:50:26 -0700 Subject: [PATCH] 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 --- lib/network/modules/InteractionHandler.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/lib/network/modules/InteractionHandler.js b/lib/network/modules/InteractionHandler.js index 44c6c954bf..84506ea5d5 100644 --- a/lib/network/modules/InteractionHandler.js +++ b/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 });