From 810987210c069876d2ba98a603086affc3244710 Mon Sep 17 00:00:00 2001 From: Christophe Avenel Date: Wed, 25 Oct 2023 09:26:48 +0200 Subject: [PATCH 1/3] Fix zoom out when wheel event.deltaY is zero Don't apply zoom in or zoom out when deltaY is zero on wheel events. Should fix https://github.com/openseadragon/openseadragon/issues/947 and not make OpenSeadragon zoom out when scrolling horizontally on a touchpad --- src/mousetracker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mousetracker.js b/src/mousetracker.js index 20200b31..57d89d5b 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -2070,7 +2070,7 @@ // y-index scrolling. // event.deltaMode: 0=pixel, 1=line, 2=page // TODO: Deltas in pixel mode should be accumulated then a scroll value computed after $.DEFAULT_SETTINGS.pixelsPerWheelLine threshold reached - nDelta = event.deltaY < 0 ? 1 : -1; + nDelta = event.deltaY ? (event.deltaY < 0 ? 1 : -1) : 0; eventInfo = { originalEvent: event, From e836ffcc61b50c5142c237f3a5522797929c1eaa Mon Sep 17 00:00:00 2001 From: Christophe Avenel Date: Tue, 31 Oct 2023 15:38:38 +0100 Subject: [PATCH 2/3] Add debounce of pan events Group pan events together if needed, in order to avoid lag if drawing of layers takes more time than it should. --- src/openseadragon.js | 4 ++++ src/viewer.js | 47 ++++++++++++++++++++++++++++++++++---------- 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 2cb2ac0d..746d1291 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -141,6 +141,9 @@ * DEPRECATED. A relative path to load a DZI file from the server. * Prefer the newer Options.tileSources. * + * @property {Boolean} [debouncePanEvents=false] + * Group multiple move events into one event. This is useful for debouncing. + * * @property {String} [prefixUrl='/images/'] * Prepends the prefixUrl to navImages paths, which is very useful * since the default paths are rarely useful for production @@ -1370,6 +1373,7 @@ function OpenSeadragon( options ){ useCanvas: true, // Use canvas element for drawing if available tileRetryMax: 0, tileRetryDelay: 2500, + debouncePanEvents: false, //INTERFACE RESOURCE SETTINGS prefixUrl: "/images/", diff --git a/src/viewer.js b/src/viewer.js index d82a2d77..f76f7524 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -3097,28 +3097,55 @@ function onCanvasDrag( event ) { * @property {?Object} userData - Arbitrary subscriber-defined object. */ this.raiseEvent( 'canvas-drag', canvasDragEventArgs); - - gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); + if (this.debouncePanEvents) { + if (!this.dragEventCombined) { + this.dragEventCombined = canvasDragEventArgs; + this.dragEventCombined.timeStamp = canvasDragEventArgs.originalEvent.timeStamp; + } + else { + this.dragEventCombined.delta = this.dragEventCombined.delta.plus(canvasDragEventArgs.delta); + } + if (this.dragEventCombined.timeout) { + clearTimeout(this.dragEventCombined.timeout); + this.dragEventCombined.timeout = null; + } + if (canvasDragEventArgs.originalEvent.timeStamp - this.dragEventCombined.timeStamp > this.debouncePanEvents) { + canvasDragEventArgs = this.dragEventCombined; + this.dragEventCombined = null; + } + else { + this.dragEventCombined.timeout = setTimeout(function () { + // call onCanvasDrag with en event with delta.x and delat.y = 0 + let newEvent = event; + newEvent.delta.x = 0; + newEvent.delta.y = 0; + this.dragEventCombined.timeStamp -= this.debouncePanEvents; + onCanvasDrag.call(this, newEvent); + }.bind(this), this.debouncePanEvents / 5); + return; + } + } + gestureSettings = this.gestureSettingsByDeviceType( canvasDragEventArgs.pointerType ); if(!canvasDragEventArgs.preventDefaultAction && this.viewport){ if (gestureSettings.dblClickDragToZoom && THIS[ this.hash ].draggingToZoom){ - var factor = Math.pow( this.zoomPerDblClickDrag, event.delta.y / 50); + var factor = Math.pow( this.zoomPerDblClickDrag, canvasDragEventArgs.delta.y / 50); this.viewport.zoomBy(factor); } else if (gestureSettings.dragToPan && !THIS[ this.hash ].draggingToZoom) { if( !this.panHorizontal ){ - event.delta.x = 0; + canvasDragEventArgs.delta.x = 0; } if( !this.panVertical ){ - event.delta.y = 0; + canvasDragEventArgs.delta.y = 0; } if(this.viewport.flipped){ - event.delta.x = -event.delta.x; + canvasDragEventArgs.delta.x = -canvasDragEventArgs.delta.x; } if( this.constrainDuringPan ){ - var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() ); + var delta = this.viewport.deltaPointsFromPixels( canvasDragEventArgs.delta.negate() ); this.viewport.centerSpringX.target.value += delta.x; this.viewport.centerSpringY.target.value += delta.y; @@ -3129,14 +3156,14 @@ function onCanvasDrag( event ) { this.viewport.centerSpringY.target.value -= delta.y; if (constrainedBounds.xConstrained) { - event.delta.x = 0; + canvasDragEventArgs.delta.x = 0; } if (constrainedBounds.yConstrained) { - event.delta.y = 0; + canvasDragEventArgs.delta.y = 0; } } - this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled && !this.constrainDuringPan); + this.viewport.panBy( this.viewport.deltaPointsFromPixels( canvasDragEventArgs.delta.negate() ), gestureSettings.flickEnabled && !this.constrainDuringPan); } } From c1038af37d11ca2811aab4bf3869499ddfdc2e41 Mon Sep 17 00:00:00 2001 From: Christophe Avenel Date: Wed, 8 Nov 2023 18:52:05 +0100 Subject: [PATCH 3/3] Revert "Add debounce of pan events" This reverts commit e836ffcc61b50c5142c237f3a5522797929c1eaa. --- src/openseadragon.js | 4 ---- src/viewer.js | 47 ++++++++++---------------------------------- 2 files changed, 10 insertions(+), 41 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 746d1291..2cb2ac0d 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -141,9 +141,6 @@ * DEPRECATED. A relative path to load a DZI file from the server. * Prefer the newer Options.tileSources. * - * @property {Boolean} [debouncePanEvents=false] - * Group multiple move events into one event. This is useful for debouncing. - * * @property {String} [prefixUrl='/images/'] * Prepends the prefixUrl to navImages paths, which is very useful * since the default paths are rarely useful for production @@ -1373,7 +1370,6 @@ function OpenSeadragon( options ){ useCanvas: true, // Use canvas element for drawing if available tileRetryMax: 0, tileRetryDelay: 2500, - debouncePanEvents: false, //INTERFACE RESOURCE SETTINGS prefixUrl: "/images/", diff --git a/src/viewer.js b/src/viewer.js index f76f7524..d82a2d77 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -3097,55 +3097,28 @@ function onCanvasDrag( event ) { * @property {?Object} userData - Arbitrary subscriber-defined object. */ this.raiseEvent( 'canvas-drag', canvasDragEventArgs); - if (this.debouncePanEvents) { - if (!this.dragEventCombined) { - this.dragEventCombined = canvasDragEventArgs; - this.dragEventCombined.timeStamp = canvasDragEventArgs.originalEvent.timeStamp; - } - else { - this.dragEventCombined.delta = this.dragEventCombined.delta.plus(canvasDragEventArgs.delta); - } - if (this.dragEventCombined.timeout) { - clearTimeout(this.dragEventCombined.timeout); - this.dragEventCombined.timeout = null; - } - if (canvasDragEventArgs.originalEvent.timeStamp - this.dragEventCombined.timeStamp > this.debouncePanEvents) { - canvasDragEventArgs = this.dragEventCombined; - this.dragEventCombined = null; - } - else { - this.dragEventCombined.timeout = setTimeout(function () { - // call onCanvasDrag with en event with delta.x and delat.y = 0 - let newEvent = event; - newEvent.delta.x = 0; - newEvent.delta.y = 0; - this.dragEventCombined.timeStamp -= this.debouncePanEvents; - onCanvasDrag.call(this, newEvent); - }.bind(this), this.debouncePanEvents / 5); - return; - } - } - gestureSettings = this.gestureSettingsByDeviceType( canvasDragEventArgs.pointerType ); + + gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); if(!canvasDragEventArgs.preventDefaultAction && this.viewport){ if (gestureSettings.dblClickDragToZoom && THIS[ this.hash ].draggingToZoom){ - var factor = Math.pow( this.zoomPerDblClickDrag, canvasDragEventArgs.delta.y / 50); + var factor = Math.pow( this.zoomPerDblClickDrag, event.delta.y / 50); this.viewport.zoomBy(factor); } else if (gestureSettings.dragToPan && !THIS[ this.hash ].draggingToZoom) { if( !this.panHorizontal ){ - canvasDragEventArgs.delta.x = 0; + event.delta.x = 0; } if( !this.panVertical ){ - canvasDragEventArgs.delta.y = 0; + event.delta.y = 0; } if(this.viewport.flipped){ - canvasDragEventArgs.delta.x = -canvasDragEventArgs.delta.x; + event.delta.x = -event.delta.x; } if( this.constrainDuringPan ){ - var delta = this.viewport.deltaPointsFromPixels( canvasDragEventArgs.delta.negate() ); + var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() ); this.viewport.centerSpringX.target.value += delta.x; this.viewport.centerSpringY.target.value += delta.y; @@ -3156,14 +3129,14 @@ function onCanvasDrag( event ) { this.viewport.centerSpringY.target.value -= delta.y; if (constrainedBounds.xConstrained) { - canvasDragEventArgs.delta.x = 0; + event.delta.x = 0; } if (constrainedBounds.yConstrained) { - canvasDragEventArgs.delta.y = 0; + event.delta.y = 0; } } - this.viewport.panBy( this.viewport.deltaPointsFromPixels( canvasDragEventArgs.delta.negate() ), gestureSettings.flickEnabled && !this.constrainDuringPan); + this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled && !this.constrainDuringPan); } }