From 19c6179533587be014bfa97c272830a9812bbf8a Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Tue, 27 Oct 2015 14:00:45 -0600 Subject: [PATCH 1/4] Added a patch to help slow down the scroll devices that fire too fast. This new code reduces the number of 'canvas-scroll' events that fire and slows down the zoom process. --- src/openseadragon.js | 6 ++++ src/viewer.js | 76 +++++++++++++++++++++++++------------------- 2 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 6b36327b..77806b57 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -255,6 +255,11 @@ * @property {Boolean} [preserveImageSizeOnResize=false] * Set to true to have the image size preserved when the viewer is resized. This requires autoResize=true (default). * + * @property {Number} [minScrollDelta=3] + * Number of milliseconds between canvas-scroll events. This value helps normalize the rate of canvas-scroll + * events between different devices, causing the faster devices to slow down enough to make the zoom control + * more manageable. + * * @property {Number} [pixelsPerWheelLine=40] * For pixel-resolution scrolling devices, the number of pixels equal to one scroll line. * @@ -1003,6 +1008,7 @@ if (typeof define === 'function' && define.amd) { pixelsPerWheelLine: 40, autoResize: true, preserveImageSizeOnResize: false, // requires autoResize=true + minScrollDelta: 3, //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE diff --git a/src/viewer.js b/src/viewer.js index c66556f1..a94b59db 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -604,7 +604,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, var originalSuccess = options.success; options.success = function(event) { successes++; - + // TODO: now that options has other things besides tileSource, the overlays // should probably be at the options level, not the tileSource level. if (options.tileSource.overlays) { @@ -2735,42 +2735,54 @@ function onCanvasPinch( event ) { return false; } +var lastScroll = new Date().getTime(); function onCanvasScroll( event ) { var gestureSettings, - factor; + factor, + thisScroll, + deltaScroll; - if ( !event.preventDefaultAction && this.viewport ) { - gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); - if ( gestureSettings.scrollToZoom ) { - factor = Math.pow( this.zoomPerScroll, event.scroll ); - this.viewport.zoomBy( - factor, - this.viewport.pointFromPixel( event.position, true ) - ); - this.viewport.applyConstraints(); + /* Certain scroll devices fire the scroll event way too fast so we are injecting a simple adjustment to keep things + * partially normalized. If we have already fired an event within the last 'minScrollDelta' milliseconds we skip + * this one and wait for the next event. */ + thisScroll = new Date().getTime(); + deltaScroll = thisScroll - lastScroll; + if (deltaScroll > this.minScrollDelta) { + lastScroll = thisScroll; + + if ( !event.preventDefaultAction && this.viewport ) { + gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); + if ( gestureSettings.scrollToZoom ) { + factor = Math.pow( this.zoomPerScroll, event.scroll ); + this.viewport.zoomBy( + factor, + this.viewport.pointFromPixel( event.position, true ) + ); + this.viewport.applyConstraints(); + } } + /** + * Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#canvas} element (mouse wheel). + * + * @event canvas-scroll + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. + * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event. + * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element. + * @property {Number} scroll - The scroll delta for the event. + * @property {Boolean} shift - True if the shift key was pressed during this event. + * @property {Object} originalEvent - The original DOM event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent( 'canvas-scroll', { + tracker: event.eventSource, + position: event.position, + scroll: event.scroll, + shift: event.shift, + originalEvent: event.originalEvent + }); } - /** - * Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#canvas} element (mouse wheel). - * - * @event canvas-scroll - * @memberof OpenSeadragon.Viewer - * @type {object} - * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. - * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event. - * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element. - * @property {Number} scroll - The scroll delta for the event. - * @property {Boolean} shift - True if the shift key was pressed during this event. - * @property {Object} originalEvent - The original DOM event. - * @property {?Object} userData - Arbitrary subscriber-defined object. - */ - this.raiseEvent( 'canvas-scroll', { - tracker: event.eventSource, - position: event.position, - scroll: event.scroll, - shift: event.shift, - originalEvent: event.originalEvent - }); if (gestureSettings && gestureSettings.scrollToZoom) { //cancels event From ad4bbb9daf4bebb68d81e12de2791dd2c63148db Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Tue, 27 Oct 2015 15:33:39 -0600 Subject: [PATCH 2/4] Changed name of config parameter to include 'MS' to suggest milliseconds. --- src/openseadragon.js | 4 ++-- src/viewer.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 77806b57..ff677fdc 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -255,7 +255,7 @@ * @property {Boolean} [preserveImageSizeOnResize=false] * Set to true to have the image size preserved when the viewer is resized. This requires autoResize=true (default). * - * @property {Number} [minScrollDelta=3] + * @property {Number} [minScrollDeltaMS=3] * Number of milliseconds between canvas-scroll events. This value helps normalize the rate of canvas-scroll * events between different devices, causing the faster devices to slow down enough to make the zoom control * more manageable. @@ -1008,7 +1008,7 @@ if (typeof define === 'function' && define.amd) { pixelsPerWheelLine: 40, autoResize: true, preserveImageSizeOnResize: false, // requires autoResize=true - minScrollDelta: 3, + minScrollDeltaMS: 3, //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE diff --git a/src/viewer.js b/src/viewer.js index a94b59db..3005a850 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2747,7 +2747,7 @@ function onCanvasScroll( event ) { * this one and wait for the next event. */ thisScroll = new Date().getTime(); deltaScroll = thisScroll - lastScroll; - if (deltaScroll > this.minScrollDelta) { + if (deltaScroll > this.minScrollDeltaMS) { lastScroll = thisScroll; if ( !event.preventDefaultAction && this.viewport ) { From 40edbd7a1ce7f0ee26588371bb1d7856ed42fdb4 Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Wed, 28 Oct 2015 17:07:51 -0600 Subject: [PATCH 3/4] Updates as per code review requests --- src/openseadragon.js | 4 ++-- src/viewer.js | 15 ++++++++------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index ff677fdc..c0111b2b 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -255,7 +255,7 @@ * @property {Boolean} [preserveImageSizeOnResize=false] * Set to true to have the image size preserved when the viewer is resized. This requires autoResize=true (default). * - * @property {Number} [minScrollDeltaMS=3] + * @property {Number} [minScrollDeltaTime=50] * Number of milliseconds between canvas-scroll events. This value helps normalize the rate of canvas-scroll * events between different devices, causing the faster devices to slow down enough to make the zoom control * more manageable. @@ -1008,7 +1008,7 @@ if (typeof define === 'function' && define.amd) { pixelsPerWheelLine: 40, autoResize: true, preserveImageSizeOnResize: false, // requires autoResize=true - minScrollDeltaMS: 3, + minScrollDeltaTime: 50, //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE diff --git a/src/viewer.js b/src/viewer.js index 3005a850..aad68718 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -203,6 +203,8 @@ $.Viewer = function( options ) { this._loadQueue = []; this.currentOverlays = []; + this._lastScrollTime = $.now(); // variable used to help normalize the scroll event speed of different devices + //Inherit some behaviors and properties $.EventSource.call( this ); @@ -2735,20 +2737,19 @@ function onCanvasPinch( event ) { return false; } -var lastScroll = new Date().getTime(); function onCanvasScroll( event ) { var gestureSettings, factor, - thisScroll, - deltaScroll; + thisScrollTime, + deltaScrollTime; /* Certain scroll devices fire the scroll event way too fast so we are injecting a simple adjustment to keep things * partially normalized. If we have already fired an event within the last 'minScrollDelta' milliseconds we skip * this one and wait for the next event. */ - thisScroll = new Date().getTime(); - deltaScroll = thisScroll - lastScroll; - if (deltaScroll > this.minScrollDeltaMS) { - lastScroll = thisScroll; + thisScrollTime = $.now(); + deltaScrollTime = thisScrollTime - this._lastScrollTime; + if (deltaScrollTime > this.minScrollDeltaTime) { + this._lastScrollTime = thisScrollTime; if ( !event.preventDefaultAction && this.viewport ) { gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); From 3214494dc9f98e45f033692d485f0078cdb0e038 Mon Sep 17 00:00:00 2001 From: Grant Echols Date: Mon, 2 Nov 2015 16:03:27 -0700 Subject: [PATCH 4/4] Added code to swallow the canvas-scroll event if we are swallowing it because of time. --- src/viewer.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index aad68718..c539adaf 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2783,11 +2783,13 @@ function onCanvasScroll( event ) { shift: event.shift, originalEvent: event.originalEvent }); + if (gestureSettings && gestureSettings.scrollToZoom) { + //cancels event + return false; + } } - - if (gestureSettings && gestureSettings.scrollToZoom) { - //cancels event - return false; + else { + return false; // We are swallowing this event } }