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); } }