From 2e4e187b2160313cb2ff7cff16a895714524f142 Mon Sep 17 00:00:00 2001 From: nein09 Date: Fri, 29 Aug 2014 11:53:29 -0700 Subject: [PATCH 1/3] Adding functionality for https://github.com/openseadragon/openseadragon/issues/127 - option for home button to fill rather than fit. - Added a option to pass to the OpenSeadragon constructor called homeFillsViewer, which defaults to false. If true, the home button will fill the viewer with the image, centered on the image's center, zoomed to fill the viewer at the image's smallest dimension, and clipped at the image's largest dimension. For example, a very tall, thin image in a 4:3 aspect ratio viewer will zoom so that the width of the image fills the viewer, and most of the height of the image is clipped. --- src/viewer.js | 6 ++++-- src/viewport.js | 22 ++++++++++++++-------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 5435b3a0..6011dbe3 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1937,7 +1937,8 @@ function openTileSource( viewer, source ) { degrees: _this.degrees //, //TODO: figure out how to support these in a way that makes sense //minZoomLevel: this.minZoomLevel, - //maxZoomLevel: this.maxZoomLevel + //maxZoomLevel: this.maxZoomLevel, + //homeFillsViewer: this.homeFillsViewer }); } else { if( source ){ @@ -1958,7 +1959,8 @@ function openTileSource( viewer, source ) { maxZoomLevel: _this.maxZoomLevel, viewer: _this, degrees: _this.degrees, - navigatorRotate: _this.navigatorRotate + navigatorRotate: _this.navigatorRotate, + homeFillsViewer: _this.homeFillsViewer }); } diff --git a/src/viewport.js b/src/viewport.js index e1231500..af917956 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -84,7 +84,8 @@ $.Viewport = function( options ) { defaultZoomLevel: $.DEFAULT_SETTINGS.defaultZoomLevel, minZoomLevel: $.DEFAULT_SETTINGS.minZoomLevel, maxZoomLevel: $.DEFAULT_SETTINGS.maxZoomLevel, - degrees: $.DEFAULT_SETTINGS.degrees + degrees: $.DEFAULT_SETTINGS.degrees, + homeFillsViewer: $.DEFAULT_SETTINGS.homeFillsViewer }, options ); @@ -148,15 +149,21 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ * @function */ getHomeZoom: function() { - var aspectFactor = - this.contentAspectX / this.getAspectRatio(); - if( this.defaultZoomLevel ){ return this.defaultZoomLevel; } else { - return ( aspectFactor >= 1 ) ? - 1 : - aspectFactor; + var aspectFactor = + this.contentAspectX / this.getAspectRatio(); + + if( this.homeFillsViewer ){ // fill the viewer and clip the image + return ( aspectFactor >= 1) ? + aspectFactor : + 1; + } else { + return ( aspectFactor >= 1 ) ? + 1 : + aspectFactor; + } } }, @@ -167,7 +174,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ var center = this.homeBounds.getCenter( ), width = 1.0 / this.getHomeZoom( ), height = width / this.getAspectRatio(); - return new $.Rect( center.x - ( width / 2.0 ), center.y - ( height / 2.0 ), From 741978caf91a904bfeb5833c2df49b97fd642330 Mon Sep 17 00:00:00 2001 From: nein09 Date: Fri, 12 Sep 2014 10:33:48 -0700 Subject: [PATCH 2/3] Incorporate code review feedback for Openseadragon isue 127. Added appropriate default values and docs to openseadragon.js; restored a blank line that I accidentally deleted. --- src/openseadragon.js | 1 + src/viewport.js | 53 ++++++++++++++++++++++---------------------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index a74bbfcc..e82d864d 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -908,6 +908,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ defaultZoomLevel: 0, minZoomLevel: null, maxZoomLevel: null, + homeFillsViewer: false, //UI RESPONSIVENESS AND FEEL clickTimeThreshold: 300, diff --git a/src/viewport.js b/src/viewport.js index af917956..a224cbaa 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -174,6 +174,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ var center = this.homeBounds.getCenter( ), width = 1.0 / this.getHomeZoom( ), height = width / this.getAspectRatio(); + return new $.Rect( center.x - ( width / 2.0 ), center.y - ( height / 2.0 ), @@ -325,7 +326,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ return this.zoomSpring.target.value; } }, - + /** * @function * @private @@ -348,7 +349,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ bounds.width, bounds.height ); - + horizontalThreshold = this.visibilityRatio * newBounds.width; verticalThreshold = this.visibilityRatio * newBounds.height; @@ -393,7 +394,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ newBounds.y = this.contentAspectY/2 - newBounds.height/2; } } - + if( this.viewer ){ /** * Raised when the viewport constraints are applied (see {@link OpenSeadragon.Viewport#applyConstraints}). @@ -409,10 +410,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ immediately: immediately }); } - + return newBounds; }, - + /** * @function * @return {OpenSeadragon.Viewport} Chainable. @@ -426,7 +427,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ), bounds, constrainedBounds; - + if ( actualZoom != constrainedZoom ) { this.zoomTo( constrainedZoom, this.zoomPoint, immediately ); } @@ -434,11 +435,11 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ bounds = this.getBounds(); constrainedBounds = this._applyBoundaryConstraints( bounds, immediately ); - + if ( bounds.x !== constrainedBounds.x || bounds.y !== constrainedBounds.y || immediately ){ this.fitBounds( constrainedBounds, immediately ); } - + return this; }, @@ -449,7 +450,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ensureVisible: function( immediately ) { return this.applyConstraints( immediately ); }, - + /** * @function * @private @@ -461,7 +462,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ options = options || {}; var immediately = options.immediately || false; var constraints = options.constraints || false; - + var aspect = this.getAspectRatio(), center = bounds.getCenter(), newBounds = new $.Rect( @@ -476,7 +477,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ referencePoint, newBoundsAspectRatio, newConstrainedZoom; - + if ( newBounds.getAspectRatio() >= aspect ) { newBounds.height = bounds.width / aspect; newBounds.y = center.y - newBounds.height / 2; @@ -484,24 +485,24 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ newBounds.width = bounds.height * aspect; newBounds.x = center.x - newBounds.width / 2; } - + if ( constraints ) { newBoundsAspectRatio = newBounds.getAspectRatio(); } - + this.panTo( this.getCenter( true ), true ); this.zoomTo( this.getZoom( true ), null, true ); - + oldBounds = this.getBounds(); oldZoom = this.getZoom(); newZoom = 1.0 / newBounds.width; - + if ( constraints ) { newConstrainedZoom = Math.max( Math.min(newZoom, this.getMaxZoom() ), this.getMinZoom() ); - + if (newZoom !== newConstrainedZoom) { newZoom = newConstrainedZoom; newBounds.width = 1.0 / newZoom; @@ -509,14 +510,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ newBounds.height = newBounds.width / newBoundsAspectRatio; newBounds.y = center.y - newBounds.height / 2; } - + newBounds = this._applyBoundaryConstraints( newBounds, immediately ); } - + if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) { return this.panTo( constraints ? newBounds.getCenter() : center, immediately ); } - + referencePoint = oldBounds.getTopLeft().times( this.containerSize.x / oldBounds.width ).minus( @@ -527,10 +528,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ this.containerSize.x / oldBounds.width - this.containerSize.x / newBounds.width ); - + return this.zoomTo( newZoom, referencePoint, immediately ); }, - + /** * @function * @param {OpenSeadragon.Rect} bounds @@ -543,7 +544,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ constraints: false } ); }, - + /** * @function * @param {OpenSeadragon.Rect} bounds @@ -556,7 +557,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ constraints: true } ); }, - + /** * @function * @param {Boolean} immediately @@ -737,7 +738,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ } this.degrees = degrees; this.viewer.forceRedraw(); - + /** * Raised when rotation has been changed. * @@ -1089,7 +1090,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ return viewerCoordinates.plus( OpenSeadragon.getElementPosition( this.viewer.element )); }, - + /** * Convert a viewport zoom to an image zoom. * Image zoom: ratio of the original image size to displayed image size. @@ -1107,7 +1108,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ var viewportToImageZoomRatio = containerWidth / imageWidth; return viewportZoom * viewportToImageZoomRatio; }, - + /** * Convert an image zoom to a viewport zoom. * Image zoom: ratio of the original image size to displayed image size. From 8b368f72f75d32fe6257711bd35dc2688394247c Mon Sep 17 00:00:00 2001 From: nein09 Date: Fri, 12 Sep 2014 14:50:43 -0700 Subject: [PATCH 3/3] I somehow missed saving the jsdoc change in my last commit. --- src/openseadragon.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index 9ce9adca..4b92b033 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -221,6 +221,10 @@ * * @property {Number} [maxZoomLevel=null] * + * @property {Boolean} [homeFillsViewer=false] + * Make the 'home' button fill the viewer and clip the image, instead + * of fitting the image to the viewer and letterboxing. + * * @property {Boolean} [panHorizontal=true] * Allow horizontal pan. * @@ -298,7 +302,6 @@ * @property {Boolean} [gestureSettingsMouse.flickEnabled=false] - Enable flick gesture * @property {Number} [gestureSettingsMouse.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsMouse.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture - * @property {Boolean} [gestureSettingsMouse.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {OpenSeadragon.GestureSettings} [gestureSettingsTouch] * Settings for gestures generated by a touch pointer device. (See {@link OpenSeadragon.GestureSettings}) @@ -310,7 +313,6 @@ * @property {Boolean} [gestureSettingsTouch.flickEnabled=true] - Enable flick gesture * @property {Number} [gestureSettingsTouch.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsTouch.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture - * @property {Boolean} [gestureSettingsTouch.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {OpenSeadragon.GestureSettings} [gestureSettingsPen] * Settings for gestures generated by a pen pointer device. (See {@link OpenSeadragon.GestureSettings}) @@ -322,7 +324,6 @@ * @property {Boolean} [gestureSettingsPen.flickEnabled=false] - Enable flick gesture * @property {Number} [gestureSettingsPen.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsPen.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture - * @property {Boolean} [gestureSettingsPen.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {OpenSeadragon.GestureSettings} [gestureSettingsUnknown] * Settings for gestures generated by unknown pointer devices. (See {@link OpenSeadragon.GestureSettings}) @@ -334,7 +335,6 @@ * @property {Boolean} [gestureSettingsUnknown.flickEnabled=true] - Enable flick gesture * @property {Number} [gestureSettingsUnknown.flickMinSpeed=120] - If flickEnabled is true, the minimum speed to initiate a flick gesture (pixels-per-second) * @property {Number} [gestureSettingsUnknown.flickMomentum=0.25] - If flickEnabled is true, the momentum factor for the flick gesture - * @property {Boolean} [gestureSettingsUnknown.pinchRotate=false] - If pinchRotate is true, the user will have the ability to rotate the image using their fingers. * * @property {Number} [zoomPerClick=2.0] * The "zoom distance" per mouse click or touch tap. Note: Setting this to 1.0 effectively disables the click-to-zoom feature (also see gestureSettings[Mouse|Touch|Pen].clickToZoom/dblClickToZoom). @@ -921,10 +921,10 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ dblClickDistThreshold: 20, springStiffness: 6.5, animationTime: 1.2, - gestureSettingsMouse: { scrollToZoom: true, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, - gestureSettingsTouch: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, - gestureSettingsPen: { scrollToZoom: false, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, - gestureSettingsUnknown: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25, pinchRotate: false }, + gestureSettingsMouse: { scrollToZoom: true, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25 }, + gestureSettingsTouch: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25 }, + gestureSettingsPen: { scrollToZoom: false, clickToZoom: true, dblClickToZoom: false, pinchToZoom: false, flickEnabled: false, flickMinSpeed: 120, flickMomentum: 0.25 }, + gestureSettingsUnknown: { scrollToZoom: false, clickToZoom: false, dblClickToZoom: true, pinchToZoom: true, flickEnabled: true, flickMinSpeed: 120, flickMomentum: 0.25 }, zoomPerClick: 2, zoomPerScroll: 1.2, zoomPerSecond: 1.0,