diff --git a/README.md b/README.md index 1ddabf86..71fafeca 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # OpenSeadragon +[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/openseadragon/openseadragon?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) An open-source, web-based viewer for zoomable images, implemented in pure JavaScript. diff --git a/changelog.txt b/changelog.txt index e9c895f1..33787519 100644 --- a/changelog.txt +++ b/changelog.txt @@ -15,6 +15,9 @@ OPENSEADRAGON CHANGELOG * Debug mode now works with rotate images (#453) * Now supporting dzi xml with namespaces (#462) * You can now rotate the navigator along with the main viewer (#455) +* Viewport.setRotation now allows all rotation angles (#466) +* Pinch rotate is now available (defaults to off) (#468) +* Added option for home button to fill viewer (#474) 1.1.1: diff --git a/src/iiiftilesource.js b/src/iiiftilesource.js index 8c1da291..c3c1fcd5 100644 --- a/src/iiiftilesource.js +++ b/src/iiiftilesource.js @@ -54,6 +54,7 @@ $.IIIFTileSource = function( options ){ options.tileSizePerScaleFactor = {}; + // N.B. 2.0 renamed scale_factors to scaleFactors if ( this.tile_width ) { options.tileSize = this.tile_width; } else if ( this.tile_height ) { @@ -62,13 +63,13 @@ $.IIIFTileSource = function( options ){ // Version 2.0 forwards if ( this.tiles.length == 1 ) { options.tileSize = this.tiles[0].width; - this.scale_factors = this.tiles[0].scale_factors; + this.scale_factors = this.tiles[0].scaleFactors; } else { // Multiple tile sizes at different levels this.scale_factors = []; for (var t = 0; t < this.tiles.length; t++ ) { - for (var sf = 0; sf < this.tiles[t].scale_factors.length; sf++) { - var scaleFactor = this.tiles[t].scale_factors[sf]; + for (var sf = 0; sf < this.tiles[t].scaleFactors.length; sf++) { + var scaleFactor = this.tiles[t].scaleFactors[sf]; this.scale_factors.push(scaleFactor); options.tileSizePerScaleFactor[scaleFactor] = this.tiles[t].width; } diff --git a/src/openseadragon.js b/src/openseadragon.js index fb915644..f8b744de 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. * @@ -912,6 +916,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/viewer.js b/src/viewer.js index 9fab1181..39ed6294 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 4de54f96..fafaff6d 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; + } } }, @@ -319,7 +326,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ return this.zoomSpring.target.value; } }, - + /** * @function * @private @@ -342,7 +349,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ bounds.width, bounds.height ); - + horizontalThreshold = this.visibilityRatio * newBounds.width; verticalThreshold = this.visibilityRatio * newBounds.height; @@ -387,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}). @@ -403,10 +410,10 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ immediately: immediately }); } - + return newBounds; }, - + /** * @function * @return {OpenSeadragon.Viewport} Chainable. @@ -420,7 +427,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ), bounds, constrainedBounds; - + if ( actualZoom != constrainedZoom ) { this.zoomTo( constrainedZoom, this.zoomPoint, immediately ); } @@ -428,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; }, @@ -443,7 +450,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ ensureVisible: function( immediately ) { return this.applyConstraints( immediately ); }, - + /** * @function * @private @@ -455,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( @@ -470,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; @@ -478,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; @@ -503,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( @@ -521,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 @@ -537,7 +544,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ constraints: false } ); }, - + /** * @function * @param {OpenSeadragon.Rect} bounds @@ -550,7 +557,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ constraints: true } ); }, - + /** * @function * @param {Boolean} immediately @@ -725,7 +732,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{ degrees = ( degrees + 360 ) % 360; this.degrees = degrees; this.viewer.forceRedraw(); - + /** * Raised when rotation has been changed. * @@ -1077,7 +1084,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. @@ -1095,7 +1102,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. diff --git a/test/data/iiif_2_0_tiled/info.json b/test/data/iiif_2_0_tiled/info.json index 4cb0c3ab..d9b56f62 100644 --- a/test/data/iiif_2_0_tiled/info.json +++ b/test/data/iiif_2_0_tiled/info.json @@ -4,7 +4,7 @@ "protocol": "http://iiif.io/api/image", "height": 1024, "width": 775, - "tiles" : [{"width":256, "scale_factors":[1,2,4,8]}], + "tiles" : [{"width":256, "scaleFactors":[1,2,4,8]}], "profile": ["http://iiif.io/api/image/2/level1.json", {