From f712e15793ddd85c7fba684b1a9a4858aeac90a9 Mon Sep 17 00:00:00 2001 From: Antoine Vandecreme <ant.vand@gmail.com> Date: Mon, 14 Oct 2013 18:01:58 -0400 Subject: [PATCH] Recenter the image after switching fullscreen mode. #62 and #170 --- src/viewer.js | 74 +++++++++++++++++++++++---------------------------- 1 file changed, 33 insertions(+), 41 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index e8ef88ac..27f9cc79 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -648,9 +648,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, docStyle = document.documentElement.style, canvasStyle = this.canvas.style, _this = this, - oldBounds, - newBounds, - viewer, hash, nodes, i; @@ -659,7 +656,39 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if ( fullPage == this.isFullPage() ) { return; } - + + if ( this.viewport ) { + var oldBounds = this.viewport.getBounds(); + var oldCenter = this.viewport.getCenter(); + + // This function recenter the image as it was before switching mode. + // TODO: better adjust width and height. The new width and height + // should depend on the image dimensions and on the dimensions + // of the viewport before and after switching mode. + var resizeAfterFullscreenHandler = function() { + _this.removeHandler( "animation-finish", resizeAfterFullscreenHandler ); + + var viewport = _this.viewport; + if ( !viewport ) { + return; + } + + // We try to remove blanks as much as possible + var imageHeight = 1 / _this.source.aspectRatio; + var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1; + var newHeight = oldBounds.height <= imageHeight ? + oldBounds.height : imageHeight; + + var newBounds = new $.Rect( + oldCenter.x - ( newWidth / 2.0 ), + oldCenter.y - ( newHeight / 2.0 ), + newWidth, + newHeight + ); + viewport.fitBounds( newBounds, true ); + }; + this.addHandler( "animation-finish", resizeAfterFullscreenHandler ); + } if ( fullPage ) { @@ -811,43 +840,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, } this.raiseEvent( 'fullpage', { fullpage: fullPage } ); - if ( this.viewport ) { - oldBounds = this.viewport.getBounds(); - this.viewport.resize( THIS[ this.hash ].prevContainerSize ); - newBounds = this.viewport.getBounds(); - - if ( fullPage ) { - THIS[ this.hash ].fsBoundsDelta = new $.Point( - newBounds.width / oldBounds.width, - newBounds.height / oldBounds.height - ); - } else { - this.viewport.update(); - this.viewport.zoomBy( - Math.max( - THIS[ this.hash ].fsBoundsDelta.x, - THIS[ this.hash ].fsBoundsDelta.y - ), - null, - true - ); - //Ensures that if multiple viewers are on a page, the viewers that - //were hidden during fullpage are 'reopened' - for( hash in VIEWERS ){ - viewer = VIEWERS[ hash ]; - if( viewer !== this && viewer != this.navigator ){ - viewer.open( viewer.source ); - if( viewer.navigator ){ - viewer.navigator.open( viewer.source ); - } - } - } - } - - THIS[ this.hash ].forceRedraw = true; - updateOnce( this ); - - } return this; },