Merge pull request #437 from openseadragon/ian

Collections WIP

.gitignore

@@ -1,3 +1,4 @@
 *.sublime-workspace
 node_modules
 build/
+sftp-config.json

Gruntfile.js

@@ -34,7 +34,6 @@ module.exports = function(grunt) {
             "src/tilesource.js",
             "src/dzitilesource.js",
             "src/iiiftilesource.js",
-            "src/iiif1_1tilesource.js",
             "src/osmtilesource.js",
             "src/tmstilesource.js",
             "src/legacytilesource.js",
@@ -222,6 +221,13 @@ module.exports = function(grunt) {
         "uglify", "replace:cleanPaths", "copy:build"
     ]);
 
+    // ----------
+    // Minimal build task.
+    // For use during development as desired.
+    grunt.registerTask("minbuild", [
+        "git-describe", "concat", "copy:build"
+    ]);
+
     // ----------
     // Test task.
     // Builds and runs unit tests.

changelog.txt

@@ -1,10 +1,15 @@
 OPENSEADRAGON CHANGELOG
 =======================
 
-1.1.2: (in progress)
+1.2.0: (in progress)
 
+* New combined IIIF TileSource for 1.0 through 2.0 (#441)
+    * BREAKING CHANGE: Removed IIIF1_1TileSource (now that IIIFTileSource supports all versions)
+* Allowed TileSources to have dynamic tileSize via source.getTileSize(level) (#441)
+    * DEPRECATION: Use .getTileSize(level) instead of .tileSize
 * Fix for IIPServer-style urls when using DZI (#413)
 * Fix memory leak while destroying the viewer (#421)
+* Added fitBoundsWithConstraints() to the viewport (#423)
 
 1.1.1:
 

src/drawer.js

@@ -72,6 +72,32 @@ $.Drawer = function( options ) {
         };
     }
 
+    this._worldX = options.x || 0;
+    delete options.x;
+    this._worldY = options.y || 0;
+    delete options.y;
+
+    // Ratio of zoomable image height to width.
+    this.normHeight = options.source.dimensions.y / options.source.dimensions.x;
+
+    if ( options.width ) {
+        this._scale = options.width;
+        delete options.width;
+
+        if ( options.height ) {
+            $.console.error( "specifying both width and height to a drawer is not supported" );
+            delete options.height;
+        }
+    } else if ( options.height ) {
+        this._scale = options.height / this.normHeight;
+        delete options.height;
+    } else {
+        this._scale = 1;
+    }
+
+    this._worldWidth = this._scale;
+    this._worldHeight = this.normHeight * this._scale;
+
     $.extend( true, this, {
 
         //internal state properties
@@ -83,7 +109,7 @@ $.Drawer = function( options ) {
         lastDrawn:      [],    // An unordered list of Tiles drawn last frame.
         lastResetTime:  0,     // Last time for which the drawer was reset.
         midUpdate:      false, // Is the drawer currently updating the viewport?
-        updateAgain:    true,  // Does the drawer need to update the viewort again?
+        updateAgain:    true,  // Does the drawer need to update the viewport again?
 
 
         //internal state / configurable settings
@@ -126,8 +152,7 @@ $.Drawer = function( options ) {
      * @memberof OpenSeadragon.Drawer#
      */
     this.context    = this.useCanvas ? this.canvas.getContext( "2d" ) : null;
-    // Ratio of zoomable image height to width.
-    this.normHeight = this.source.dimensions.y / this.source.dimensions.x;
+
     /**
      * @member {Element} element
      * @memberof OpenSeadragon.Drawer#
@@ -357,7 +382,7 @@ function updateViewport( drawer ) {
         zeroRatioC      = drawer.viewport.deltaPixelsFromPoints(
             drawer.source.getPixelRatio( 0 ),
             true
-        ).x,
+        ).x * drawer._scale,
         lowestLevel     = Math.max(
             drawer.source.minLevel,
             Math.floor(
@@ -380,6 +405,11 @@ function updateViewport( drawer ) {
         levelOpacity,
         levelVisibility;
 
+    viewportTL.x -= drawer._worldX;
+    viewportTL.y -= drawer._worldY;
+    viewportBR.x -= drawer._worldX;
+    viewportBR.y -= drawer._worldY;
+
     // Reset tile's internal drawn state
     while ( drawer.lastDrawn.length > 0 ) {
         tile = drawer.lastDrawn.pop();
@@ -406,22 +436,22 @@ function updateViewport( drawer ) {
 
     //Don't draw if completely outside of the viewport
     if  ( !drawer.wrapHorizontal &&
-        ( viewportBR.x < 0 || viewportTL.x > 1 ) ) {
+        ( viewportBR.x < 0 || viewportTL.x > drawer._worldWidth ) ) {
         return;
     } else if
         ( !drawer.wrapVertical &&
-        ( viewportBR.y < 0 || viewportTL.y > drawer.normHeight ) ) {
+        ( viewportBR.y < 0 || viewportTL.y > drawer._worldHeight ) ) {
         return;
     }
 
     // Calculate viewport rect / bounds
     if ( !drawer.wrapHorizontal ) {
         viewportTL.x = Math.max( viewportTL.x, 0 );
-        viewportBR.x = Math.min( viewportBR.x, 1 );
+        viewportBR.x = Math.min( viewportBR.x, drawer._worldWidth );
     }
     if ( !drawer.wrapVertical ) {
         viewportTL.y = Math.max( viewportTL.y, 0 );
-        viewportBR.y = Math.min( viewportBR.y, drawer.normHeight );
+        viewportBR.y = Math.min( viewportBR.y, drawer._worldHeight );
     }
 
     // Calculations for the interval of levels to draw
@@ -438,7 +468,7 @@ function updateViewport( drawer ) {
         renderPixelRatioC = drawer.viewport.deltaPixelsFromPoints(
             drawer.source.getPixelRatio( level ),
             true
-        ).x;
+        ).x * drawer._scale;
 
         if ( ( !haveDrawn && renderPixelRatioC >= drawer.minPixelRatio ) ||
              ( level == lowestLevel ) ) {
@@ -452,7 +482,7 @@ function updateViewport( drawer ) {
         renderPixelRatioT = drawer.viewport.deltaPixelsFromPoints(
             drawer.source.getPixelRatio( level ),
             false
-        ).x;
+        ).x * drawer._scale;
 
         zeroRatioT      = drawer.viewport.deltaPixelsFromPoints(
             drawer.source.getPixelRatio(
@@ -462,7 +492,7 @@ function updateViewport( drawer ) {
                 )
             ),
             false
-        ).x;
+        ).x * drawer._scale;
 
         optimalRatio    = drawer.immediateRender ?
             1 :
@@ -548,8 +578,8 @@ function updateLevel( drawer, haveDrawn, drawLevel, level, levelOpacity, levelVi
     }
 
     //OK, a new drawing so do your calculations
-    tileTL    = drawer.source.getTileAtPoint( level, viewportTL );
-    tileBR    = drawer.source.getTileAtPoint( level, viewportBR );
+    tileTL    = drawer.source.getTileAtPoint( level, viewportTL.divide( drawer._scale ));
+    tileBR    = drawer.source.getTileAtPoint( level, viewportBR.divide( drawer._scale ));
     numberOfTiles  = drawer.source.getNumTiles( level );
 
     resetCoverage( drawer.coverage, level );
@@ -593,7 +623,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le
             drawer.tilesMatrix,
             currentTime,
             numberOfTiles,
-            drawer.normHeight
+            drawer._worldWidth,
+            drawer._worldHeight
         ),
         drawTile = drawLevel;
 
@@ -636,7 +667,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le
         drawer.source.tileOverlap,
         drawer.viewport,
         viewportCenter,
-        levelVisibility
+        levelVisibility,
+        drawer
     );
 
     if ( tile.loaded ) {
@@ -662,7 +694,7 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le
     return best;
 }
 
-function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeight ) {
+function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, worldWidth, worldHeight ) {
     var xMod,
         yMod,
         bounds,
@@ -684,8 +716,8 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
         exists  = tileSource.tileExists( level, xMod, yMod );
         url     = tileSource.getTileUrl( level, xMod, yMod );
 
-        bounds.x += 1.0 * ( x - xMod ) / numTiles.x;
-        bounds.y += normHeight * ( y - yMod ) / numTiles.y;
+        bounds.x += worldWidth * ( x - xMod ) / numTiles.x;
+        bounds.y += worldHeight * ( y - yMod ) / numTiles.y;
 
         tilesMatrix[ level ][ x ][ y ] = new $.Tile(
             level,
@@ -750,11 +782,10 @@ function onTileLoad( drawer, tile, time, image ) {
     tile.loaded = true;
     tile.image  = image;
 
-
     insertionIndex = drawer.tilesLoaded.length;
 
     if ( drawer.tilesLoaded.length >= drawer.maxImageCacheCount ) {
-        cutoff = Math.ceil( Math.log( drawer.source.tileSize ) / Math.log( 2 ) );
+        cutoff = Math.ceil( Math.log( drawer.source.getTileSize(tile.level) ) / Math.log( 2 ) );
 
         worstTile       = null;
         worstTileIndex  = -1;
@@ -793,10 +824,20 @@ function onTileLoad( drawer, tile, time, image ) {
 }
 
 
-function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility ){
-    var boundsTL     = tile.bounds.getTopLeft(),
-        boundsSize   = tile.bounds.getSize(),
-        positionC    = viewport.pixelFromPoint( boundsTL, true ),
+function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, drawer ){
+    var boundsTL     = tile.bounds.getTopLeft();
+
+    boundsTL.x *= drawer._scale;
+    boundsTL.y *= drawer._scale;
+    boundsTL.x += drawer._worldX;
+    boundsTL.y += drawer._worldY;
+
+    var boundsSize   = tile.bounds.getSize();
+
+    boundsSize.x *= drawer._scale;
+    boundsSize.y *= drawer._scale;
+
+    var positionC    = viewport.pixelFromPoint( boundsTL, true ),
         positionT    = viewport.pixelFromPoint( boundsTL, false ),
         sizeC        = viewport.deltaPixelsFromPoints( boundsSize, true ),
         sizeT        = viewport.deltaPixelsFromPoints( boundsSize, false ),

src/iiif1_1tilesource.js

@@ -1,192 +0,0 @@
-/*
- * OpenSeadragon - IIIF1_1TileSource
- *
- * Copyright (C) 2009 CodePlex Foundation
- * Copyright (C) 2010-2013 OpenSeadragon contributors
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- * - Redistributions of source code must retain the above copyright notice,
- *   this list of conditions and the following disclaimer.
- *
- * - Redistributions in binary form must reproduce the above copyright
- *   notice, this list of conditions and the following disclaimer in the
- *   documentation and/or other materials provided with the distribution.
- *
- * - Neither the name of CodePlex Foundation nor the names of its
- *   contributors may be used to endorse or promote products derived from
- *   this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
- * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
- * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
- * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
- * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-(function( $ ){
-
-/**
- * @class IIIF1_1TileSource
- * @classdesc A client implementation of the International Image Interoperability
- * Format: Image API 1.1
- *
- * @memberof OpenSeadragon
- * @extends OpenSeadragon.TileSource
- * @see http://library.stanford.edu/iiif/image-api/
- */
-$.IIIF1_1TileSource = function( options ){
-
-
-    $.extend( true, this, options );
-
-
-    if ( !( this.height && this.width && this['@id'] ) ){
-        throw new Error( 'IIIF required parameters not provided.' );
-    }
-
-    if ( ( this.profile &&
-        this.profile == "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level0" ) ){
-        // what if not reporting a profile?
-        throw new Error( 'IIIF Image API 1.1 compliance level 1 or greater is required.' );
-    }
-
-    if ( this.tile_width ) {
-        options.tileSize = this.tile_width;
-    } else if ( this.tile_height ) {
-        options.tileSize = this.tile_height;
-    } else {
-        // use the largest of tileOptions that is smaller than the short
-        // dimension
-
-        var shortDim = Math.min( this.height, this.width ),
-            tileOptions = [256,512,1024],
-            smallerTiles = [];
-
-            for ( var c = 0; c < tileOptions.length; c++ ) {
-                if ( tileOptions[c] <= shortDim ) {
-                    smallerTiles.push( tileOptions[c] );
-                }
-            }
-
-        if ( smallerTiles.length > 0 ) {
-            options.tileSize = Math.max.apply( null, smallerTiles );
-        } else {
-            // If we're smaller than 256, just use the short side.
-            options.tileSize = shortDim;
-        }
-        this.tile_width = options.tileSize;  // So that 'full' gets used for 
-        this.tile_height = options.tileSize; // the region below
-    }
-
-    if ( !options.maxLevel ) {
-        var mf = -1;
-        var scfs = this.scale_factors || this.scale_factor;
-        if ( scfs instanceof Array ) {
-            for ( var i = 0; i < scfs.length; i++ ) {
-                var cf = Number( scfs[i] );
-                if ( !isNaN( cf ) && cf > mf ) { mf = cf; }
-            }
-        }
-        if ( mf < 0 ) { options.maxLevel = Number( Math.ceil( Math.log( Math.max( this.width, this.height ), 2 ) ) ); }
-        else { options.maxLevel = mf; }
-    }
-
-    $.TileSource.apply( this, [ options ] );
-};
-
-$.extend( $.IIIF1_1TileSource.prototype, $.TileSource.prototype, /** @lends OpenSeadragon.IIIF1_1TileSource.prototype */{
-    /**
-     * Determine if the data and/or url imply the image service is supported by
-     * this tile source.
-     * @function
-     * @param {Object|Array} data
-     * @param {String} optional - url
-     */
-    supports: function( data, url ) {
-        return ( data['@context'] &&
-            data['@context'] == "http://library.stanford.edu/iiif/image-api/1.1/context.json" );
-    },
-
-    /**
-     *
-     * @function
-     * @param {Object} data - the raw configuration
-     * @example <caption>IIIF 1.1 Info Looks like this (XML syntax is no more)</caption>
-     * {
-     *   "@context" : "http://library.stanford.edu/iiif/image-api/1.1/context.json",
-     *   "@id" : "http://iiif.example.com/prefix/1E34750D-38DB-4825-A38A-B60A345E591C",
-     *   "width" : 6000,
-     *   "height" : 4000,
-     *   "scale_factors" : [ 1, 2, 4 ],
-     *   "tile_width" : 1024,
-     *   "tile_height" : 1024,
-     *   "formats" : [ "jpg", "png" ],
-     *   "qualities" : [ "native", "grey" ],
-     *   "profile" : "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level0"
-     * }
-     */
-    configure: function( data ){
-      return data;
-    },
-    /**
-     * Responsible for retreiving the url which will return an image for the
-     * region specified by the given x, y, and level components.
-     * @function
-     * @param {Number} level - z index
-     * @param {Number} x
-     * @param {Number} y
-     * @throws {Error}
-     */
-    getTileUrl: function( level, x, y ){
-
-        //# constants
-
-        var IIIF_ROTATION = '0',
-            IIIF_QUALITY = 'native.jpg',
-
-            //## get the scale (level as a decimal)
-            scale = Math.pow( 0.5, this.maxLevel - level ),
-
-            //# image dimensions at this level
-            levelWidth = Math.ceil( this.width * scale ),
-            levelHeight = Math.ceil( this.height * scale ),
-
-            //## iiif region
-            iiifTileSizeWidth = Math.ceil( this.tileSize / scale ),
-            iiifTileSizeHeight = Math.ceil( this.tileSize / scale ),
-            iiifRegion,
-            iiifTileX,
-            iiifTileY,
-            iiifTileW,
-            iiifTileH,
-            iiifSize,
-            uri;
-
-        if ( levelWidth < this.tile_width && levelHeight < this.tile_height ){
-            iiifSize = levelWidth + ",";
-            iiifRegion = 'full';
-        } else {
-            iiifTileX = x * iiifTileSizeWidth;
-            iiifTileY = y * iiifTileSizeHeight;
-            iiifTileW = Math.min( iiifTileSizeWidth, this.width - iiifTileX );
-            iiifTileH = Math.min( iiifTileSizeHeight, this.height - iiifTileY );
-
-            iiifSize = Math.ceil( iiifTileW * scale ) + ",";
-
-            iiifRegion = [ iiifTileX, iiifTileY, iiifTileW, iiifTileH ].join( ',' );
-        }
-        uri = [ this['@id'], iiifRegion, iiifSize, IIIF_ROTATION, IIIF_QUALITY ].join( '/' );
-        return uri;
-    }
-  });
-
-}( OpenSeadragon ));

src/iiiftilesource.js

@@ -32,50 +32,77 @@
  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/*
- * The getTileUrl implementation is based on Jon Stroop's Python version,
- * which is released under the New BSD license:
- * https://gist.github.com/jpstroop/4624253
- */
-
-
 (function( $ ){
 
 /**
  * @class IIIFTileSource
  * @classdesc A client implementation of the International Image Interoperability
- * Format: Image API Draft 0.2
+ * Format: Image API 1.0 - 2.0
  *
  * @memberof OpenSeadragon
  * @extends OpenSeadragon.TileSource
- * @see http://library.stanford.edu/iiif/image-api/
+ * @see http://iiif.io/api/image/
  */
 $.IIIFTileSource = function( options ){
 
+
     $.extend( true, this, options );
 
-    if( !(this.height && this.width && this.identifier && this.tilesUrl ) ){
-        throw new Error('IIIF required parameters not provided.');
+    if ( !( this.height && this.width && this['@id'] ) ) {
+        throw new Error( 'IIIF required parameters not provided.' );
     }
 
-    //TODO: at this point the base tile source implementation assumes
-    //      a tile is a square and so only has one property tileSize
-    //      to store it.  It may be possible to make tileSize a vector
-    //      OpenSeadraon.Point but would require careful implementation
-    //      to preserve backward compatibility.
-    options.tileSize = this.tile_width;
+    options.tileSizePerScaleFactor = {};
 
-    if (! options.maxLevel ) {
-        var mf = -1;
-        var scfs = this.scale_factors || this.scale_factor;
-        if ( scfs instanceof Array ) {
-            for ( var i = 0; i < scfs.length; i++ ) {
-                var cf = Number( scfs[i] );
-                if ( !isNaN( cf ) && cf > mf ) { mf = cf; }
+    if ( this.tile_width ) {
+        options.tileSize = this.tile_width;
+    } else if ( this.tile_height ) {
+        options.tileSize = this.tile_height;
+    } else if ( this.tiles ) {
+        // Version 2.0 forwards
+        if ( this.tiles.length == 1 ) {
+            options.tileSize = this.tiles[0].width;
+            this.scale_factors = this.tiles[0].scale_factors;
+        } 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];
+                    this.scale_factors.push(scaleFactor);
+                    options.tileSizePerScaleFactor[scaleFactor] = this.tiles[t].width;
+                }
             }
         }
-        if ( mf < 0 ) { options.maxLevel = Number(Math.ceil(Math.log(Math.max(this.width, this.height), 2))); }
-        else { options.maxLevel = mf; }
+    } else {
+        // use the largest of tileOptions that is smaller than the short dimension
+
+        var shortDim = Math.min( this.height, this.width ),
+            tileOptions = [256,512,1024],
+            smallerTiles = [];
+
+        for ( var c = 0; c < tileOptions.length; c++ ) {
+            if ( tileOptions[c] <= shortDim ) {
+                smallerTiles.push( tileOptions[c] );
+            }
+        }
+
+        if ( smallerTiles.length > 0 ) {
+            options.tileSize = Math.max.apply( null, smallerTiles );
+        } else {
+            // If we're smaller than 256, just use the short side.
+            options.tileSize = shortDim;
+        }
+        this.tile_width = options.tileSize;  // So that 'full' gets used for 
+        this.tile_height = options.tileSize; // the region below
+    }
+
+    if ( !options.maxLevel ) {
+        if ( !this.scale_factors ) { 
+            options.maxLevel = Number( Math.ceil( Math.log( Math.max( this.width, this.height ), 2 ) ) ); 
+        } else { 
+            options.maxLevel = Math.floor( Math.pow( Math.max.apply(null, this.scale_factors), 0.5) );
+        }
     }
 
     $.TileSource.apply( this, [ options ] );
@@ -85,72 +112,92 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
     /**
      * Determine if the data and/or url imply the image service is supported by
      * this tile source.
-     * @method
+     * @function
      * @param {Object|Array} data
      * @param {String} optional - url
      */
-    supports: function( data, url ){
-        return (
-            data.ns &&
-            "http://library.stanford.edu/iiif/image-api/ns/" == data.ns
-        ) || (
-            data.profile && (
-                "http://library.stanford.edu/iiif/image-api/compliance.html#level1" == data.profile ||
-                "http://library.stanford.edu/iiif/image-api/compliance.html#level2" == data.profile ||
-                "http://library.stanford.edu/iiif/image-api/compliance.html#level3" == data.profile ||
-                "http://library.stanford.edu/iiif/image-api/compliance.html" == data.profile
-            )
-        ) || (
-            data.documentElement &&
+    supports: function( data, url ) {
+        // Version 2.0 and forwards
+        if (data.protocol && data.protocol == 'http://iiif.io/api/image') {
+            return true;
+        // Version 1.1
+        } else if ( data['@context'] && (
+            data['@context'] == "http://library.stanford.edu/iiif/image-api/1.1/context.json" ||
+            data['@context'] == "http://iiif.io/api/image/1/context.json") ) {
+            // N.B. the iiif.io context is wrong, but where the representation lives so likely to be used
+            return true;
+
+        // Version 1.0
+        } else if ( data.profile && 
+            data.profile.indexOf("http://library.stanford.edu/iiif/image-api/compliance.html") === 0) {
+            return true;
+        } else if ( data.identifier && data.width && data.height ) {
+            return true;
+        } else if ( data.documentElement &&
             "info" == data.documentElement.tagName &&
             "http://library.stanford.edu/iiif/image-api/ns/" ==
-                data.documentElement.namespaceURI
-        );
+                data.documentElement.namespaceURI) {
+            return true;
+
+        // Not IIIF
+        } else {
+            return false;
+        }
     },
 
-   /**
+    /**
      *
-     * @method
-     * @param {Object|XMLDocument} data - the raw configuration
-     * @param {String} url - the url the data was retreived from if any.
-     * @return {Object} options - A dictionary of keyword arguments sufficient
-     *      to configure this tile source via its constructor.
+     * @function
+     * @param {Object} data - the raw configuration
+     * @example <caption>IIIF 1.1 Info Looks like this</caption>
+     * {
+     *   "@context" : "http://library.stanford.edu/iiif/image-api/1.1/context.json",
+     *   "@id" : "http://iiif.example.com/prefix/1E34750D-38DB-4825-A38A-B60A345E591C",
+     *   "width" : 6000,
+     *   "height" : 4000,
+     *   "scale_factors" : [ 1, 2, 4 ],
+     *   "tile_width" : 1024,
+     *   "tile_height" : 1024,
+     *   "formats" : [ "jpg", "png" ],
+     *   "qualities" : [ "native", "grey" ],
+     *   "profile" : "http://library.stanford.edu/iiif/image-api/1.1/compliance.html#level0"
+     * }
      */
     configure: function( data, url ){
-        var service,
-            options,
-            host;
-
-        if( !$.isPlainObject(data) ){
-
-            options = configureFromXml( this, data );
-
-        }else{
-
-            options = configureFromObject( this, data );
+        // Try to deduce our version and fake it upwards if needed
+        if ( !$.isPlainObject(data) ) {
+            var options = configureFromXml10( data );            
+            options['@context'] = "http://iiif.io/api/image/1.0/context.json";
+            options['@id'] = url.replace('/info.xml', '');
+            return options;
+        } else if ( !data['@context'] ) {
+            data['@context'] = 'http://iiif.io/api/image/1.0/context.json';
+            data['@id'] = url.replace('/info.json', '');
+            return data;
+        } else {
+            return data;
         }
+    },
 
-        if( url && !options.tilesUrl ){
-            service = url.split('/');
-            service.pop(); //info.json or info.xml
-            service = service.join('/');
-            if( 'http' !== url.substring( 0, 4 ) ){
-                host = location.protocol + '//' + location.host;
-                service = host + service;
-            }
-            options.tilesUrl = service.replace(
-                data.identifier,
-                ''
-            );
+    /**
+     * Return the tileSize for the given level.
+     * @function
+     * @param {Number} level
+    */
+
+    getTileSize: function( level ){
+        var scaleFactor = Math.pow(2, this.maxLevel - level);
+        // cache it in case any external code is going to read it directly
+        if (this.tileSizePerScaleFactor && this.tileSizePerScaleFactor[scaleFactor]) {
+            this.tileSize = this.tileSizePerScaleFactor[scaleFactor];
         }
-
-        return options;
+        return this.tileSize;
     },
 
     /**
      * Responsible for retreiving the url which will return an image for the
-     * region speified by the given x, y, and level components.
-     * @method
+     * region specified by the given x, y, and level components.
+     * @function
      * @param {Number} level - z index
      * @param {Number} x
      * @param {Number} y
@@ -160,170 +207,101 @@ $.extend( $.IIIFTileSource.prototype, $.TileSource.prototype, /** @lends OpenSea
 
         //# constants
         var IIIF_ROTATION = '0',
-            IIIF_QUALITY = 'native.jpg',
-
             //## get the scale (level as a decimal)
             scale = Math.pow( 0.5, this.maxLevel - level ),
 
-            //## get iiif size
-            // iiif_size = 'pct:' + ( scale * 100 ),
-
             //# image dimensions at this level
-            level_width = Math.ceil( this.width * scale ),
-            level_height = Math.ceil( this.height * scale ),
+            levelWidth = Math.ceil( this.width * scale ),
+            levelHeight = Math.ceil( this.height * scale ),
 
             //## iiif region
-            iiif_tile_size_width = Math.ceil( this.tileSize / scale ),
-            iiif_tile_size_height = Math.ceil( this.tileSize / scale ),
-            iiif_region,
-            iiif_tile_x,
-            iiif_tile_y,
-            iiif_tile_w,
-            iiif_tile_h,
-            iiif_size;
+            iiifTileSizeWidth,
+            iiifTileSizeHeight,
+            iiifRegion,
+            iiifTileX,
+            iiifTileY,
+            iiifTileW,
+            iiifTileH,
+            iiifSize,
+            iiifQuality,
+            uri;
 
+        iiifTileSizeWidth = Math.ceil( this.getTileSize(level) / scale );
+        iiifTileSizeHeight = iiifTileSizeWidth;
 
-        if ( level_width < this.tile_width && level_height < this.tile_height ){
-            iiif_size = level_width + ","; // + level_height; only one dim. for IIIF level 1 compliance
-            iiif_region = 'full';
+        if ( this['@context'].indexOf('/1.0/context.json') > -1 ||
+             this['@context'].indexOf('/1.1/context.json') > -1 ||
+             this['@context'].indexOf('/1/context.json') > -1 ) {
+            iiifQuality = "native.jpg";
         } else {
-            iiif_tile_x = x * iiif_tile_size_width;
-            iiif_tile_y = y * iiif_tile_size_height;
-            iiif_tile_w = Math.min( iiif_tile_size_width, this.width - iiif_tile_x );
-            iiif_tile_h = Math.min( iiif_tile_size_height, this.height - iiif_tile_y );
-            iiif_size = Math.ceil(iiif_tile_w * scale) + ",";
-            iiif_region = [ iiif_tile_x, iiif_tile_y, iiif_tile_w, iiif_tile_h ].join(',');
+            iiifQuality = "default.jpg";
         }
 
-        return [
-            this.tilesUrl,
-            this.identifier,
-            iiif_region,
-            iiif_size,
-            IIIF_ROTATION,
-            IIIF_QUALITY
-        ].join('/');
-    }
-
-
-});
-
-/**
- * @private
- * @inner
- * @function
- * @example
- *   <?xml version="1.0" encoding="UTF-8"?>
- *   <info xmlns="http://library.stanford.edu/iiif/image-api/ns/">
- *     <identifier>1E34750D-38DB-4825-A38A-B60A345E591C</identifier>
- *     <width>6000</width>
- *     <height>4000</height>
- *     <scale_factors>
- *       <scale_factor>1</scale_factor>
- *       <scale_factor>2</scale_factor>
- *       <scale_factor>4</scale_factor>
- *     </scale_factors>
- *     <tile_width>1024</tile_width>
- *     <tile_height>1024</tile_height>
- *     <formats>
- *       <format>jpg</format>
- *       <format>png</format>
- *     </formats>
- *     <qualities>
- *       <quality>native</quality>
- *       <quality>grey</quality>
- *     </qualities>
- *   </info>
- */
-function configureFromXml( tileSource, xmlDoc ){
-
-    //parse the xml
-    if ( !xmlDoc || !xmlDoc.documentElement ) {
-        throw new Error( $.getString( "Errors.Xml" ) );
-    }
-
-    var root            = xmlDoc.documentElement,
-        rootName        = root.tagName,
-        configuration   = null;
-
-    if ( rootName == "info" ) {
-
-        try {
-
-            configuration = {
-                "ns": root.namespaceURI
-            };
-
-            parseXML( root, configuration );
-
-            return configureFromObject( tileSource, configuration );
-
-        } catch ( e ) {
-            throw (e instanceof Error) ?
-                e :
-                new Error( $.getString("Errors.IIIF") );
+        if ( levelWidth < this.tile_width && levelHeight < this.tile_height ){
+            iiifSize = levelWidth + ",";
+            iiifRegion = 'full';
+        } else {
+            iiifTileX = x * iiifTileSizeWidth;
+            iiifTileY = y * iiifTileSizeHeight;
+            iiifTileW = Math.min( iiifTileSizeWidth, this.width - iiifTileX );
+            iiifTileH = Math.min( iiifTileSizeHeight, this.height - iiifTileY );
+            iiifSize = Math.ceil( iiifTileW * scale ) + ",";
+            iiifRegion = [ iiifTileX, iiifTileY, iiifTileW, iiifTileH ].join( ',' );
         }
+        uri = [ this['@id'], iiifRegion, iiifSize, IIIF_ROTATION, iiifQuality ].join( '/' );
+
+        return uri;
     }
 
-    throw new Error( $.getString( "Errors.IIIF" ) );
+  });
 
-}
-
-
-/**
- * @private
- * @inner
- * @function
- */
-function parseXML( node, configuration, property ){
-    var i,
-        value;
-    if( node.nodeType == 3 && property ){//text node
-        value = node.nodeValue.trim();
-        if( value.match(/^\d*$/)){
-            value = Number( value );
+    function configureFromXml10(xmlDoc) {
+        //parse the xml
+        if ( !xmlDoc || !xmlDoc.documentElement ) {
+            throw new Error( $.getString( "Errors.Xml" ) );
         }
-        if( !configuration[ property ] ){
-            configuration[ property ] = value;
-        }else{
-            if( !$.isArray( configuration[ property ] ) ){
-                configuration[ property ] = [ configuration[ property ] ];
+
+        var root            = xmlDoc.documentElement,
+            rootName        = root.tagName,
+            configuration   = null;
+
+        if ( rootName == "info" ) {
+            try {
+                configuration = {};
+                parseXML10( root, configuration );
+                return configuration;
+
+            } catch ( e ) {
+                throw (e instanceof Error) ?
+                    e :
+                    new Error( $.getString("Errors.IIIF") );
             }
-            configuration[ property ].push( value );
         }
-    } else if( node.nodeType == 1 ){
-        for( i = 0; i < node.childNodes.length; i++ ){
-            parseXML( node.childNodes[ i ], configuration, node.nodeName );
+        throw new Error( $.getString( "Errors.IIIF" ) );
+    }
+
+    function parseXML10( node, configuration, property ) {
+        var i,
+            value;
+        if ( node.nodeType == 3 && property ) {//text node
+            value = node.nodeValue.trim();
+            if( value.match(/^\d*$/)){
+                value = Number( value );
+            }
+            if( !configuration[ property ] ){
+                configuration[ property ] = value;
+            }else{
+                if( !$.isArray( configuration[ property ] ) ){
+                    configuration[ property ] = [ configuration[ property ] ];
+                }
+                configuration[ property ].push( value );
+            }
+        } else if( node.nodeType == 1 ){
+            for( i = 0; i < node.childNodes.length; i++ ){
+                parseXML10( node.childNodes[ i ], configuration, node.nodeName );
+            }
         }
     }
-}
 
 
-/**
- * @private
- * @inner
- * @function
- * @example
- *   {
- *       "profile" : "http://library.stanford.edu/iiif/image-api/compliance.html#level1",
- *       "identifier" : "1E34750D-38DB-4825-A38A-B60A345E591C",
- *       "width" : 6000,
- *       "height" : 4000,
- *       "scale_factors" : [ 1, 2, 4 ],
- *       "tile_width" : 1024,
- *       "tile_height" : 1024,
- *       "formats" : [ "jpg", "png" ],
- *       "quality" : [ "native", "grey" ]
- *   }
- */
-function configureFromObject( tileSource, configuration ){
-    //the image_host property is not part of the iiif standard but is included here to
-    //allow the info.json and info.xml specify a different server to load the
-    //images from so we can test the implementation.
-    if( configuration.image_host ){
-        configuration.tilesUrl = configuration.image_host;
-    }
-    return configuration;
-}
-
 }( OpenSeadragon ));

src/navigator.js

@@ -298,12 +298,9 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
     open: function( source ) {
         this.updateSize();
         var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio );
-        if( source.tileSize > containerSize.x ||
-            source.tileSize > containerSize.y ){
-            this.minPixelRatio = Math.min(
-                containerSize.x,
-                containerSize.y
-            ) / source.tileSize;
+        var ts = source.getTileSize(source.maxLevel);
+        if ( ts > containerSize.x || ts > containerSize.y ) {
+            this.minPixelRatio = Math.min( containerSize.x, containerSize.y ) / ts;
         } else {
             this.minPixelRatio = this.viewer.minPixelRatio;
         }

src/openseadragon.js

@@ -211,9 +211,6 @@
   * @property {Number} [opacity=1]
   *     Opacity of the drawer (1=opaque, 0=transparent)
   *
-  * @property {Number} [layersAspectRatioEpsilon=0.0001]
-  *     Maximum aspectRatio mismatch between 2 layers.
-  *
   * @property {Number} [degrees=0]
   *     Initial rotation.
   *
@@ -962,9 +959,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             // APPEARANCE
             opacity:                1,
 
-            // LAYERS SETTINGS
-            layersAspectRatioEpsilon:   0.0001,
-
             //REFERENCE STRIP SETTINGS
             showReferenceStrip:          false,
             referenceStripScroll:       'horizontal',

src/tilesource.js

@@ -127,6 +127,8 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
      */
     /**
      * The size of the image tiles used to compose the image.
+     * Please note that tileSize may be deprecated in a future release. 
+     * Instead the getTileSize(level) function should be used.
      * @member {Number} tileSize
      * @memberof OpenSeadragon.TileSource#
      */
@@ -194,6 +196,18 @@ $.TileSource = function( width, height, tileSize, tileOverlap, minLevel, maxLeve
 
 $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
 
+    /**
+     * Return the tileSize for a given level. 
+     * Subclasses should override this if tileSizes can be different at different levels
+     *   such as in IIIFTileSource.  Code should use this function rather than reading
+     *   from .tileSize directly.  tileSize may be deprecated in a future release.
+     * @function
+     * @param {Number} level
+     */
+    getTileSize: function( level ) {
+        return this.tileSize;
+    },
+
     /**
      * @function
      * @param {Number} level
@@ -220,8 +234,8 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
      */
     getNumTiles: function( level ) {
         var scale = this.getLevelScale( level ),
-            x = Math.ceil( scale * this.dimensions.x / this.tileSize ),
-            y = Math.ceil( scale * this.dimensions.y / this.tileSize );
+            x = Math.ceil( scale * this.dimensions.x / this.getTileSize(level) ),
+            y = Math.ceil( scale * this.dimensions.y / this.getTileSize(level) );
 
         return new $.Point( x, y );
     },
@@ -245,10 +259,11 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
      */
     getClosestLevel: function( rect ) {
         var i,
-            tilesPerSide = Math.floor( Math.max( rect.x, rect.y ) / this.tileSize ),
+            tilesPerSide,
             tiles;
         for( i = this.minLevel; i < this.maxLevel; i++ ){
             tiles = this.getNumTiles( i );
+            tilesPerSide = Math.floor( Math.max( rect.x, rect.y ) / this.getTileSize(i) );            
             if( Math.max( tiles.x, tiles.y ) + 1 >= tilesPerSide ){
                 break;
             }
@@ -263,8 +278,8 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
      */
     getTileAtPoint: function( level, point ) {
         var pixel = point.times( this.dimensions.x ).times( this.getLevelScale(level ) ),
-            tx = Math.floor( pixel.x / this.tileSize ),
-            ty = Math.floor( pixel.y / this.tileSize );
+            tx = Math.floor( pixel.x / this.getTileSize(level) ),
+            ty = Math.floor( pixel.y / this.getTileSize(level) );
 
         return new $.Point( tx, ty );
     },
@@ -277,10 +292,11 @@ $.TileSource.prototype = /** @lends OpenSeadragon.TileSource.prototype */{
      */
     getTileBounds: function( level, x, y ) {
         var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
-            px = ( x === 0 ) ? 0 : this.tileSize * x - this.tileOverlap,
-            py = ( y === 0 ) ? 0 : this.tileSize * y - this.tileOverlap,
-            sx = this.tileSize + ( x === 0 ? 1 : 2 ) * this.tileOverlap,
-            sy = this.tileSize + ( y === 0 ? 1 : 2 ) * this.tileOverlap,
+            tileSize = this.getTileSize(level),
+            px = ( x === 0 ) ? 0 : tileSize * x - this.tileOverlap,
+            py = ( y === 0 ) ? 0 : tileSize * y - this.tileOverlap,
+            sx = tileSize + ( x === 0 ? 1 : 2 ) * this.tileOverlap,
+            sy = tileSize + ( y === 0 ? 1 : 2 ) * this.tileOverlap,
             scale = 1.0 / dimensionsScaled.x;
 
         sx = Math.min( sx, dimensionsScaled.x - px );

src/viewer.js

@@ -497,13 +497,13 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * @fires OpenSeadragon.Viewer.event:open
      * @fires OpenSeadragon.Viewer.event:open-failed
      */
-    open: function ( tileSource ) {
+    open: function ( tileSource, options ) {
         var _this = this;
 
         _this._hideMessage();
 
         getTileSourceImplementation( _this, tileSource, function( tileSource ) {
-            openTileSource( _this, tileSource );
+            openTileSource( _this, tileSource, options );
         }, function( event ) {
             /**
              * Raised when an error occurs loading a TileSource.
@@ -1046,12 +1046,18 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * Add a layer.
      * options.tileSource can be anything that {@link OpenSeadragon.Viewer#open}
      *  supports except arrays of images as layers cannot be sequences.
+     * Note that you can specify options.width or options.height, but not both.
+     * The other dimension will be calculated according to the layer's aspect ratio.
      * @function
      * @param {Object} options
      * @param {String|Object|Function} options.tileSource The TileSource of the layer.
      * @param {Number} [options.opacity=1] The opacity of the layer.
      * @param {Number} [options.level] The level of the layer. Added on top of
      * all other layers if not specified.
+     * @param {Number} [options.x=0] The X position for the image in world coordinates.
+     * @param {Number} [options.y=0] The Y position for the image in world coordinates.
+     * @param {Number} [options.width=1] The width for the image in world coordinates.
+     * @param {Number} [options.height] The height for the image in world coordinates.
      * @returns {OpenSeadragon.Viewer} Chainable.
      * @fires OpenSeadragon.Viewer.event:add-layer
      * @fires OpenSeadragon.Viewer.event:add-layer-failed
@@ -1096,24 +1102,15 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                 return;
             }
 
-            for ( var i = 0; i < _this.drawers.length; i++ ) {
-                var otherAspectRatio = _this.drawers[ i ].source.aspectRatio;
-                var diff = otherAspectRatio - tileSource.aspectRatio;
-                if ( Math.abs( diff ) > _this.layersAspectRatioEpsilon ) {
-                    raiseAddLayerFailed({
-                        message: "Aspect ratio mismatch with layer " + i + ".",
-                        source: tileSource,
-                        options: options
-                    });
-                    return;
-                }
-            }
-
             var drawer = new $.Drawer({
                 viewer: _this,
                 source: tileSource,
                 viewport: _this.viewport,
                 element: _this.drawersContainer,
+                x: options.x,
+                y: options.y,
+                width: options.width,
+                height: options.height,
                 opacity: options.opacity !== undefined ?
                     options.opacity : _this.opacity,
                 maxImageCacheCount: _this.maxImageCacheCount,
@@ -1909,10 +1906,12 @@ function getTileSourceImplementation( viewer, tileSource, successCallback,
  * @function
  * @private
  */
-function openTileSource( viewer, source ) {
+function openTileSource( viewer, source, options ) {
     var i,
         _this = viewer;
 
+    options = options || {};
+
     if ( _this.source ) {
         _this.close( );
     }
@@ -1977,6 +1976,10 @@ function openTileSource( viewer, source ) {
         source:             _this.source,
         viewport:           _this.viewport,
         element:            _this.drawersContainer,
+        x:                  options.x,
+        y:                  options.y,
+        width:              options.width,
+        height:             options.height,
         opacity:            _this.opacity,
         maxImageCacheCount: _this.maxImageCacheCount,
         imageLoaderLimit:   _this.imageLoaderLimit,

src/viewport.js

@@ -322,38 +322,34 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
 
     /**
      * @function
-     * @return {OpenSeadragon.Viewport} Chainable.
-     * @fires OpenSeadragon.Viewer.event:constrain
+     * @private
+     * @param {OpenSeadragon.Rect} bounds
+     * @param {Boolean} immediately
+     * @return {OpenSeadragon.Rect} constrained bounds.
      */
-    applyConstraints: function( immediately ) {
-        var actualZoom = this.getZoom(),
-            constrainedZoom = Math.max(
-                Math.min( actualZoom, this.getMaxZoom() ),
-                this.getMinZoom()
-            ),
-            bounds,
-            horizontalThreshold,
+    _applyBoundaryConstraints: function( bounds, immediately ) {
+        var horizontalThreshold,
             verticalThreshold,
             left,
             right,
             top,
             bottom,
             dx = 0,
-            dy = 0;
+            dy = 0,
+            newBounds = new $.Rect(
+                bounds.x,
+                bounds.y,
+                bounds.width,
+                bounds.height
+            );
 
-        if ( actualZoom != constrainedZoom ) {
-            this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
-        }
+        horizontalThreshold = this.visibilityRatio * newBounds.width;
+        verticalThreshold   = this.visibilityRatio * newBounds.height;
 
-        bounds = this.getBounds();
-
-        horizontalThreshold = this.visibilityRatio * bounds.width;
-        verticalThreshold   = this.visibilityRatio * bounds.height;
-
-        left   = bounds.x + bounds.width;
-        right  = 1 - bounds.x;
-        top    = bounds.y + bounds.height;
-        bottom = this.contentAspectY - bounds.y;
+        left   = newBounds.x + newBounds.width;
+        right  = 1 - newBounds.x;
+        top    = newBounds.y + newBounds.height;
+        bottom = this.contentAspectY - newBounds.y;
 
         if ( this.wrapHorizontal ) {
             //do nothing
@@ -382,15 +378,14 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         }
 
         if ( dx || dy || immediately ) {
-            bounds.x += dx;
-            bounds.y += dy;
-            if( bounds.width > 1  ){
-                bounds.x = 0.5 - bounds.width/2;
+            newBounds.x += dx;
+            newBounds.y += dy;
+            if( newBounds.width > 1  ){
+                newBounds.x = 0.5 - newBounds.width/2;
             }
-            if( bounds.height > this.contentAspectY ){
-                bounds.y = this.contentAspectY/2 - bounds.height/2;
+            if( newBounds.height > this.contentAspectY ){
+                newBounds.y = this.contentAspectY/2 - newBounds.height/2;
             }
-            this.fitBounds( bounds, immediately );
         }
 
         if( this.viewer ){
@@ -409,6 +404,39 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             });
         }
 
+        return newBounds;
+    },
+
+    /**
+     * @function
+     * @return {OpenSeadragon.Viewport} Chainable.
+     * @fires OpenSeadragon.Viewer.event:constrain
+     */
+    applyConstraints: function( immediately ) {
+        if (true) {
+            return; // TEMP
+        }
+
+        var actualZoom = this.getZoom(),
+            constrainedZoom = Math.max(
+                Math.min( actualZoom, this.getMaxZoom() ),
+                this.getMinZoom()
+            ),
+            bounds,
+            constrainedBounds;
+
+        if ( actualZoom != constrainedZoom ) {
+            this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
+        }
+
+        bounds = this.getBounds();
+
+        constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
+
+        if ( bounds.x !== constrainedBounds.x || bounds.y !== constrainedBounds.y || immediately ){
+            this.fitBounds( constrainedBounds, immediately );
+        }
+
         return this;
     },
 
@@ -422,11 +450,16 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
 
     /**
      * @function
+     * @private
      * @param {OpenSeadragon.Rect} bounds
-     * @param {Boolean} immediately
+     * @param {Object} options (immediately=false, constraints=false)
      * @return {OpenSeadragon.Viewport} Chainable.
      */
-    fitBounds: function( bounds, immediately ) {
+    _fitBounds: function( bounds, options ) {
+        options = options || {};
+        var immediately = options.immediately || false;
+        var constraints = options.constraints || false;
+
         var aspect = this.getAspectRatio(),
             center = bounds.getCenter(),
             newBounds = new $.Rect(
@@ -438,7 +471,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             oldBounds,
             oldZoom,
             newZoom,
-            referencePoint;
+            referencePoint,
+            newBoundsAspectRatio,
+            newConstrainedZoom;
 
         if ( newBounds.getAspectRatio() >= aspect ) {
             newBounds.height = bounds.width / aspect;
@@ -448,14 +483,36 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             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;
+                newBounds.x = center.x - newBounds.width / 2;
+                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( center, immediately );
+            return this.panTo( constraints ? newBounds.getCenter() : center, immediately );
         }
 
         referencePoint = oldBounds.getTopLeft().times(
@@ -472,6 +529,31 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         return this.zoomTo( newZoom, referencePoint, immediately );
     },
 
+    /**
+     * @function
+     * @param {OpenSeadragon.Rect} bounds
+     * @param {Boolean} immediately
+     * @return {OpenSeadragon.Viewport} Chainable.
+     */
+    fitBounds: function( bounds, immediately ) {
+        return this._fitBounds( bounds, {
+            immediately: immediately,
+            constraints: false
+        } );
+    },
+
+    /**
+     * @function
+     * @param {OpenSeadragon.Rect} bounds
+     * @param {Boolean} immediately
+     * @return {OpenSeadragon.Viewport} Chainable.
+     */
+    fitBoundsWithConstraints: function( bounds, immediately ) {
+        return this._fitBounds( bounds, {
+            immediately: immediately,
+            constraints: true
+        } );
+    },
 
     /**
      * @function

test/data/iiif_2_0_tiled/info.json

@@ -0,0 +1,24 @@
+{
+  "@context": "http://iiif.io/api/image/2/context.json",
+  "@id": "http://localhost:8000/test/data/iiif_2_0_tiled",
+  "protocol": "http://iiif.io/api/image",
+  "height": 1024,
+  "width": 775,
+  "tiles" : [{"width":256, "scale_factors":[1,2,4,8]}],
+
+  "profile": ["http://iiif.io/api/image/2/level1.json",
+    {
+      "qualities": [
+        "native",
+        "bitonal",
+        "grey",
+        "color"
+      ],
+      "formats": [
+        "jpg",
+        "png",
+        "gif"
+      ]      
+    }
+  ]
+}

test/demo/collections/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenSeadragon Collections Demo</title>
+        <script type="text/javascript" src='../../../build/openseadragon/openseadragon.js'></script>
+        <script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
+        <script type="text/javascript" src='main.js'></script>
+        <style type="text/css">
+
+            html,
+            body,
+            .openseadragon1 {
+                width: 100%;
+                height: 100%;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div id="contentDiv" class="openseadragon1"></div>
+    </body>
+</html>

test/demo/collections/main.js

@@ -0,0 +1,52 @@
+(function() {
+
+    var App = {
+        init: function() {
+            var self = this;
+
+            this.viewer = OpenSeadragon( {
+                debugMode: true,
+                zoomPerScroll: 1.02,
+                // showNavigator: true,
+                id: "contentDiv",
+                prefixUrl: "../../../build/openseadragon/images/"
+            } );
+
+            this.viewer.addHandler( "open", function() {
+                self.addLayer();
+            });
+
+            this.viewer.open("../../data/tall.dzi", {
+                x: 1.5,
+                y: 0,
+                width: 1
+            });
+        },
+
+        // ----------
+        addLayer: function() {
+            var self = this;
+
+            var options = {
+                tileSource: '../../data/wide.dzi',
+                opacity: 1,
+                x: 0,
+                y: 1.5,
+                height: 1
+            };
+
+            var addLayerHandler = function( event ) {
+                if ( event.options === options ) {
+                    self.viewer.removeHandler( "add-layer", addLayerHandler );
+                }
+            };
+            this.viewer.addHandler( "add-layer", addLayerHandler );
+            this.viewer.addLayer( options );
+        }
+    };
+
+    $(document).ready(function() {
+        App.init();
+    });
+
+})();

test/demo/fitboundswithconstraints.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
+    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+    <style type="text/css">
+
+      .openseadragon1 {
+          width: 800px;
+          height: 600px;
+      }
+
+      #highlights li {
+        cursor: pointer;
+      }
+      
+    </style>
+</head>
+<body>
+    <div>
+        Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue.
+    </div>
+
+    <div id="contentDiv" class="openseadragon1"></div>
+    <div id="highlights"></div>
+    
+    <select onchange="changeMethod(this.value);">
+        <option value=0>viewport.fitBoundsWithConstraints(bounds);</option>
+        <option value=1>viewport.fitBounds(bounds);</option>
+        <option value=2>viewport.fitBounds(bounds).applyConstraints();</option>
+    </select>
+    <input type="button" value="Go home" onclick="goHome()"/>
+    
+    <script type="text/javascript">
+
+        var _viewer;
+        var _fittingMethod = 0;
+        
+        var _highlights = [
+            {"queryPoint":[0.13789887359998443,0.43710575899579285], "radius":0.004479581945070337,"text":"Pipe"},
+            {"queryPoint":[0.5923298766583593,0.6461653354541856],   "radius":0.013175241014912752,"text":"Fuel here"},
+            {"queryPoint":[0.43920338711232304,0.7483181389302148],  "radius":0.09222668710438928, "text":"Wheel"},
+            {"queryPoint":[0.07341677959486298,0.9028719921872319],  "radius":0.08996845561083797, "text":"Nothing special"}
+        ];        
+        
+        var generateUniqueHash = (function() {
+            var counter = 0;
+            return function() {
+                return "openseadragon_" + (counter++);
+            };
+        })();
+                    
+        var _viewer = OpenSeadragon({
+            element: document.getElementById("contentDiv"),
+            showNavigationControl: false,
+            prefixUrl: "../../build/openseadragon/images/",
+            hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
+            tileSources: {
+                Image: {
+                    xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
+                    Url:      'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/',
+                    Format:   "jpg", 
+                    Overlap:  1, 
+                    TileSize: 510,
+                    Size: {
+                        Width:  4592,
+                        Height: 3448
+                    }
+                }
+            }
+        });
+        _viewer.addHandler("open", function() {
+            var str = "<ul>";
+            for (var i=0; i<_highlights.length; ++i) {
+                var highlight = _highlights[i];
+                str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>";
+            }
+            str += "</ul>";
+            document.getElementById("highlights").innerHTML = str;
+        });
+        
+        function gotoHighlight(index) {
+            var highlight = _highlights[index];
+            
+            var viewport = _viewer.viewport;
+            var contentSize = viewport.contentSize;
+            var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom());
+            var radius  = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/
+            var center      = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]);            
+            var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2));
+                        
+            if (_fittingMethod === 0) {
+                viewport.fitBoundsWithConstraints(bounds, false);
+            }
+            else if (_fittingMethod === 1) {
+                viewport.fitBounds(bounds, false);
+            }
+            else if (_fittingMethod === 2) {
+                viewport.fitBounds(bounds, false).applyConstraints();
+            }           
+        }
+        
+        function changeMethod(value) {
+            _fittingMethod = parseInt(value, 10);
+        }
+        
+        function goHome() {
+            _viewer.viewport.goHome();
+        }
+
+    </script>
+</body>
+</html>

test/formats.js

@@ -72,37 +72,42 @@
 
      // ----------
     asyncTest('IIIF 1.0 JSON', function() {
-        testOpen('iiif1_0.json');
+        testOpen('iiif_1_0_files/info.json');
     });
 
     // ----------
     asyncTest('IIIF 1.0 XML', function() {
-        testOpen('iiif1_0.xml');
+        testOpen('iiif_1_0_files/info.xml');
     });
 
     // ----------
     asyncTest('IIIF 1.1 JSON', function() {
-        testOpen('iiif_1_1_tiled.json');
+        testOpen('iiif_1_1_tiled/info.json');
     });
 
     // ----------
     asyncTest('IIIF No Tiles, Less than 256', function() {
-        testOpen('iiif_1_1_no_tiles_255.json');
+        testOpen('iiif_1_1_no_tiles_255/info.json');
     });
 
     // ----------
     asyncTest('IIIF No Tiles, Bet. 256 and 512', function() {
-        testOpen('iiif_1_1_no_tiles_384.json');
+        testOpen('iiif_1_1_no_tiles_384/info.json');
     });
 
     // ----------
     asyncTest('IIIF No Tiles, Bet. 512 and 1024', function() {
-        testOpen('iiif_1_1_no_tiles_768.json');
+        testOpen('iiif_1_1_no_tiles_768/info.json');
     });
 
     // ----------
     asyncTest('IIIF No Tiles, Larger than 1024', function() {
-        testOpen('iiif_1_1_no_tiles_1048.json');
+        testOpen('iiif_1_1_no_tiles_1048/info.json');
+    });
+
+    // ----------
+    asyncTest('IIIF 2.0 JSON', function() {
+        testOpen('iiif_2_0_tiled/info.json');
     });    
 
 })();

test/test.html

@@ -14,7 +14,7 @@
     <script src="/test/lib/jquery-1.9.1.min.js"></script>
     <script src="/test/lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js"></script>
     <script src="/test/lib/jquery.simulate.js"></script>
-    <script src="/build/openseadragon/openseadragon.min.js"></script>
+    <script src="/build/openseadragon/openseadragon.js"></script>
     <script src="/test/legacy.mouse.shim.js"></script>
     <script src="/test/test.js"></script>