From 6443d57e096d15cfacd881dc5783a3b01fd0fc8d Mon Sep 17 00:00:00 2001 From: thatcher Date: Mon, 19 Mar 2012 19:03:58 -0400 Subject: [PATCH] corrected major performance issue discovered in navigator becuase minPixelRatio was set to Zero. This caused images to be loaded ad infinitum in the navigator, oops. --- build.properties | 2 +- openseadragon.js | 139 +++++++++++++++++++++++++++++++------------ src/drawer.js | 3 +- src/mousetracker.js | 4 +- src/navigator.js | 77 +++++++++++++++++++++--- src/openseadragon.js | 2 +- src/viewer.js | 51 ++++++++-------- 7 files changed, 204 insertions(+), 74 deletions(-) diff --git a/build.properties b/build.properties index 4aea5bd6..0f1bacd6 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 27 +BUILD_ID: 30 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/openseadragon.js b/openseadragon.js index e855578a..12a13709 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,5 +1,5 @@ /** - * @version OpenSeadragon 0.9.27 + * @version OpenSeadragon 0.9.30 * * @fileOverview *

@@ -461,7 +461,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){ controlsFadeDelay: 2000, controlsFadeLength: 1500, - maxImageCacheCount: 100, + maxImageCacheCount: 200, minPixelRatio: 0.5, mouseNavEnabled: true, prefixUrl: null, @@ -2155,7 +2155,7 @@ $.EventHandler.prototype = { * @inner */ function onFocus( tracker, event ){ - console.log( "focus %s", event ); + //console.log( "focus %s", event ); if ( tracker.focusHandler ) { try { tracker.focusHandler( @@ -2180,7 +2180,7 @@ $.EventHandler.prototype = { * @inner */ function onBlur( tracker, event ){ - console.log( "blur %s", event ); + //console.log( "blur %s", event ); if ( tracker.blurHandler ) { try { tracker.blurHandler( @@ -3070,10 +3070,7 @@ $.Control.prototype = { (function( $ ){ // dictionary from hash to private properties -var THIS = {}, -// We keep a list of viewers so we can 'wake-up' each viewer on -// a page after toggling between fullpage modes - VIEWERS = {}; +var THIS = {}; /** * @@ -3243,15 +3240,16 @@ $.Viewer = function( options ) { onFullPageHandler = $.delegate( this, onFullPage ), onFocusHandler = $.delegate( this, onFocus ), onBlurHandler = $.delegate( this, onBlur ), - navImages = this.navImages, - zoomIn, - zoomOut, - goHome, - fullPage; + navImages = this.navImages; + + this.zoomInButton = null; + this.zoomOutButton = null; + this.goHomeButton = null; + this.fullPageButton = null; if( this.showNavigationControl ){ - zoomIn = new $.Button({ + this.zoomInButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.ZoomIn" ), @@ -3268,7 +3266,7 @@ $.Viewer = function( options ) { onBlur: onBlurHandler }); - zoomOut = new $.Button({ + this.zoomOutButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.ZoomOut" ), @@ -3285,7 +3283,7 @@ $.Viewer = function( options ) { onBlur: onBlurHandler }); - goHome = new $.Button({ + this.goHomeButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.Home" ), @@ -3298,7 +3296,7 @@ $.Viewer = function( options ) { onBlur: onBlurHandler }); - fullPage = new $.Button({ + this.fullPageButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.FullPage" ), @@ -3315,10 +3313,10 @@ $.Viewer = function( options ) { clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, buttons: [ - zoomIn, - zoomOut, - goHome, - fullPage + this.zoomInButton, + this.zoomOutButton, + this.goHomeButton, + this.fullPageButton ] }); @@ -3404,7 +3402,7 @@ $.Viewer = function( options ) { initialTileSource.minLevel, initialTileSource.maxLevel ); - customTileSource.getTileUrl = initialTileSource; + customTileSource.getTileUrl = initialTileSource.getTileUrl; this.open( customTileSource ); } } @@ -3601,9 +3599,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, * @name OpenSeadragon.Viewer.prototype.isDashboardEnabled * @return {Boolean} */ - isDashboardEnabled: function () { - //TODO: why this indirection? these methods arent even implemented - return this.areControlsEnabled(); + areControlsEnabled: function () { + return this.controls.length && this.controls[ i ].isVisibile(); }, @@ -3612,9 +3609,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, * @name OpenSeadragon.Viewer.prototype.setDashboardEnabled * @return {OpenSeadragon.Viewer} Chainable. */ - setDashboardEnabled: function( enabled ) { - //TODO: why this indirection? these methods arent even implemented - return this.setControlsEnabled( enabled ); + setControlsEnabled: function( enabled ) { + if( enabled ){ + abortControlsAutoHide( this ); + } else { + beginControlsAutoHide( this ); + }; }, @@ -4135,7 +4135,8 @@ function onHome() { function onFullPage() { this.setFullPage( !this.isFullPage() ); // correct for no mouseout event on change - this.buttons.emulateExit(); + this.buttons.emulateExit(); + this.fullPageButton.element.focus(); if ( this.viewport ) { this.viewport.applyConstraints(); } @@ -4164,17 +4165,21 @@ $.Navigator = function( options ){ } options = $.extend( true, { - sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio + navigatorSizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio }, options, { element: this.element, //These need to be overridden to prevent recursion since //the navigator is a viewer and a viewer has a navigator - minPixelRatio: 0, showNavigator: false, mouseNavEnabled: false, showNavigationControl: false }); + options.minPixelRatio = Math.min( + options.navigatorSizeRatio * $.DEFAULT_SETTINGS.minPixelRatio, + $.DEFAULT_SETTINGS.minPixelRatio + ); + (function( style ){ style.marginTop = '0px'; style.marginRight = '0px'; @@ -4186,8 +4191,9 @@ $.Navigator = function( options ){ style.overflow = 'hidden'; }( this.element.style )); - this.displayRegion = $.makeNeutralElement( "div" ); - this.displayRegion.id = this.element.id + '-displayregion'; + this.displayRegion = $.makeNeutralElement( "textarea" ); + this.displayRegion.id = this.element.id + '-displayregion'; + this.displayRegion.className = 'displayregion'; (function( style ){ style.position = 'relative'; @@ -4200,6 +4206,65 @@ $.Navigator = function( options ){ style.zIndex = 999999999; }( this.displayRegion.style )); + this.displayRegion.innerTracker = new $.MouseTracker({ + element: this.displayRegion, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + focusHandler: function(){ + _this.viewer.setControlsEnabled( true ); + (function( style ){ + style.border = '1px solid #437AB2'; + style.outline = '2px auto #437AB2'; + }( this.element.style )); + + }, + blurHandler: function(){ + _this.viewer.setControlsEnabled( false ); + (function( style ){ + style.border = '1px solid #900'; + style.outline = '2px auto #900'; + }( this.element.style )); + }, + keyHandler: function(tracker, keyCode){ + //console.log( keyCode ); + switch( keyCode ){ + case 119://w + _this.viewer.viewport.panBy(new $.Point(0, -0.1)); + break; + case 115://s + _this.viewer.viewport.panBy(new $.Point(0, 0.1)); + break; + case 97://a + _this.viewer.viewport.panBy(new $.Point(-0.1, 0)); + break; + case 100://d + _this.viewer.viewport.panBy(new $.Point(0.1, 0)); + break; + case 61://=|+ + _this.viewer.viewport.zoomBy(1.1); + break; + case 45://-|_ + _this.viewer.viewport.zoomBy(0.9); + break; + case 48://0|) + _this.viewer.viewport.goHome(); + break; + default: + //console.log( 'navigator keycode %s', keyCode ); + return; + } + } + }).setTracking( true ); // default state + + /*this.displayRegion.outerTracker = new $.MouseTracker({ + element: this.container, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + enterHandler: $.delegate( this, onContainerEnter ), + exitHandler: $.delegate( this, onContainerExit ), + releaseHandler: $.delegate( this, onContainerRelease ) + }).setTracking( this.mouseNavEnabled ? true : false ); // always tracking*/ + this.element.appendChild( this.displayRegion ); viewer.addControl( @@ -4211,8 +4276,8 @@ $.Navigator = function( options ){ this.element.style.width = options.width + 'px'; this.element.style.height = options.height + 'px'; } else { - this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; - this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; + this.element.style.width = ( viewerSize.x * options.navigatorSizeRatio ) + 'px'; + this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px'; } $.Viewer.apply( this, [ options ] ); @@ -4222,7 +4287,6 @@ $.Navigator = function( options ){ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, { update: function( viewport ){ - var bounds = viewport.getBounds( true ), topleft = this.viewport.pixelFromPoint( bounds.getTopLeft() ) @@ -6403,7 +6467,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le numberOfTiles, drawer.normHeight ), - drawTile = drawLevel; + drawTile = drawLevel, + newbest; setCoverage( drawer.coverage, level, x, y, false ); diff --git a/src/drawer.js b/src/drawer.js index fd6605ff..24c44cc4 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -534,7 +534,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le numberOfTiles, drawer.normHeight ), - drawTile = drawLevel; + drawTile = drawLevel, + newbest; setCoverage( drawer.coverage, level, x, y, false ); diff --git a/src/mousetracker.js b/src/mousetracker.js index 9f931bbf..4c20218e 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -478,7 +478,7 @@ * @inner */ function onFocus( tracker, event ){ - console.log( "focus %s", event ); + //console.log( "focus %s", event ); if ( tracker.focusHandler ) { try { tracker.focusHandler( @@ -503,7 +503,7 @@ * @inner */ function onBlur( tracker, event ){ - console.log( "blur %s", event ); + //console.log( "blur %s", event ); if ( tracker.blurHandler ) { try { tracker.blurHandler( diff --git a/src/navigator.js b/src/navigator.js index 58ba8e80..ba416d34 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -20,17 +20,21 @@ $.Navigator = function( options ){ } options = $.extend( true, { - sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio + navigatorSizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio }, options, { element: this.element, //These need to be overridden to prevent recursion since //the navigator is a viewer and a viewer has a navigator - minPixelRatio: 0, showNavigator: false, mouseNavEnabled: false, showNavigationControl: false }); + options.minPixelRatio = Math.min( + options.navigatorSizeRatio * $.DEFAULT_SETTINGS.minPixelRatio, + $.DEFAULT_SETTINGS.minPixelRatio + ); + (function( style ){ style.marginTop = '0px'; style.marginRight = '0px'; @@ -42,8 +46,9 @@ $.Navigator = function( options ){ style.overflow = 'hidden'; }( this.element.style )); - this.displayRegion = $.makeNeutralElement( "div" ); - this.displayRegion.id = this.element.id + '-displayregion'; + this.displayRegion = $.makeNeutralElement( "textarea" ); + this.displayRegion.id = this.element.id + '-displayregion'; + this.displayRegion.className = 'displayregion'; (function( style ){ style.position = 'relative'; @@ -56,6 +61,65 @@ $.Navigator = function( options ){ style.zIndex = 999999999; }( this.displayRegion.style )); + this.displayRegion.innerTracker = new $.MouseTracker({ + element: this.displayRegion, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + focusHandler: function(){ + _this.viewer.setControlsEnabled( true ); + (function( style ){ + style.border = '1px solid #437AB2'; + style.outline = '2px auto #437AB2'; + }( this.element.style )); + + }, + blurHandler: function(){ + _this.viewer.setControlsEnabled( false ); + (function( style ){ + style.border = '1px solid #900'; + style.outline = '2px auto #900'; + }( this.element.style )); + }, + keyHandler: function(tracker, keyCode){ + //console.log( keyCode ); + switch( keyCode ){ + case 119://w + _this.viewer.viewport.panBy(new $.Point(0, -0.1)); + break; + case 115://s + _this.viewer.viewport.panBy(new $.Point(0, 0.1)); + break; + case 97://a + _this.viewer.viewport.panBy(new $.Point(-0.1, 0)); + break; + case 100://d + _this.viewer.viewport.panBy(new $.Point(0.1, 0)); + break; + case 61://=|+ + _this.viewer.viewport.zoomBy(1.1); + break; + case 45://-|_ + _this.viewer.viewport.zoomBy(0.9); + break; + case 48://0|) + _this.viewer.viewport.goHome(); + break; + default: + //console.log( 'navigator keycode %s', keyCode ); + return; + } + } + }).setTracking( true ); // default state + + /*this.displayRegion.outerTracker = new $.MouseTracker({ + element: this.container, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + enterHandler: $.delegate( this, onContainerEnter ), + exitHandler: $.delegate( this, onContainerExit ), + releaseHandler: $.delegate( this, onContainerRelease ) + }).setTracking( this.mouseNavEnabled ? true : false ); // always tracking*/ + this.element.appendChild( this.displayRegion ); viewer.addControl( @@ -67,8 +131,8 @@ $.Navigator = function( options ){ this.element.style.width = options.width + 'px'; this.element.style.height = options.height + 'px'; } else { - this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; - this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; + this.element.style.width = ( viewerSize.x * options.navigatorSizeRatio ) + 'px'; + this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px'; } $.Viewer.apply( this, [ options ] ); @@ -78,7 +142,6 @@ $.Navigator = function( options ){ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, { update: function( viewport ){ - var bounds = viewport.getBounds( true ), topleft = this.viewport.pixelFromPoint( bounds.getTopLeft() ) diff --git a/src/openseadragon.js b/src/openseadragon.js index c81a3737..b0ebb4d9 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -461,7 +461,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){ controlsFadeDelay: 2000, controlsFadeLength: 1500, - maxImageCacheCount: 100, + maxImageCacheCount: 200, minPixelRatio: 0.5, mouseNavEnabled: true, prefixUrl: null, diff --git a/src/viewer.js b/src/viewer.js index 9b4e7157..0ef5e167 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2,10 +2,7 @@ (function( $ ){ // dictionary from hash to private properties -var THIS = {}, -// We keep a list of viewers so we can 'wake-up' each viewer on -// a page after toggling between fullpage modes - VIEWERS = {}; +var THIS = {}; /** * @@ -175,15 +172,16 @@ $.Viewer = function( options ) { onFullPageHandler = $.delegate( this, onFullPage ), onFocusHandler = $.delegate( this, onFocus ), onBlurHandler = $.delegate( this, onBlur ), - navImages = this.navImages, - zoomIn, - zoomOut, - goHome, - fullPage; + navImages = this.navImages; + + this.zoomInButton = null; + this.zoomOutButton = null; + this.goHomeButton = null; + this.fullPageButton = null; if( this.showNavigationControl ){ - zoomIn = new $.Button({ + this.zoomInButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.ZoomIn" ), @@ -200,7 +198,7 @@ $.Viewer = function( options ) { onBlur: onBlurHandler }); - zoomOut = new $.Button({ + this.zoomOutButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.ZoomOut" ), @@ -217,7 +215,7 @@ $.Viewer = function( options ) { onBlur: onBlurHandler }); - goHome = new $.Button({ + this.goHomeButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.Home" ), @@ -230,7 +228,7 @@ $.Viewer = function( options ) { onBlur: onBlurHandler }); - fullPage = new $.Button({ + this.fullPageButton = new $.Button({ clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, tooltip: $.getString( "Tooltips.FullPage" ), @@ -247,10 +245,10 @@ $.Viewer = function( options ) { clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, buttons: [ - zoomIn, - zoomOut, - goHome, - fullPage + this.zoomInButton, + this.zoomOutButton, + this.goHomeButton, + this.fullPageButton ] }); @@ -336,7 +334,7 @@ $.Viewer = function( options ) { initialTileSource.minLevel, initialTileSource.maxLevel ); - customTileSource.getTileUrl = initialTileSource; + customTileSource.getTileUrl = initialTileSource.getTileUrl; this.open( customTileSource ); } } @@ -533,9 +531,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, * @name OpenSeadragon.Viewer.prototype.isDashboardEnabled * @return {Boolean} */ - isDashboardEnabled: function () { - //TODO: why this indirection? these methods arent even implemented - return this.areControlsEnabled(); + areControlsEnabled: function () { + return this.controls.length && this.controls[ i ].isVisibile(); }, @@ -544,9 +541,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, * @name OpenSeadragon.Viewer.prototype.setDashboardEnabled * @return {OpenSeadragon.Viewer} Chainable. */ - setDashboardEnabled: function( enabled ) { - //TODO: why this indirection? these methods arent even implemented - return this.setControlsEnabled( enabled ); + setControlsEnabled: function( enabled ) { + if( enabled ){ + abortControlsAutoHide( this ); + } else { + beginControlsAutoHide( this ); + }; }, @@ -1067,7 +1067,8 @@ function onHome() { function onFullPage() { this.setFullPage( !this.isFullPage() ); // correct for no mouseout event on change - this.buttons.emulateExit(); + this.buttons.emulateExit(); + this.fullPageButton.element.focus(); if ( this.viewport ) { this.viewport.applyConstraints(); }