mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-24 14:16:10 +03:00
Code Issues Projects Releases Wiki Activity

Add debounce of pan events

Browse Source 
Group pan events together if needed, in order to avoid lag if drawing of layers takes more time than it should.
This commit is contained in:
Christophe Avenel 2023-10-31 15:38:38 +01:00
parent 810987210c
commit e836ffcc61
2 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/openseadragon.js
View File

@ -141,6 +141,9 @@
* <strong>DEPRECATED</strong>. 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/",

47
src/viewer.js
View File

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