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

@@ -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/",

src/viewer.js

@@ -3097,28 +3097,55 @@ function onCanvasDrag( event ) {
      * @property {?Object} userData - Arbitrary subscriber-defined object.
      */
     this.raiseEvent( 'canvas-drag', canvasDragEventArgs);
-
+    if (this.debouncePanEvents) {
-    gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
+        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);
         }
 
     }