Merge branch 'master' into fix-195

.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",

changelog.txt

@@ -1,11 +1,17 @@
 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)
+* Fixed MouseTracker cross-browser issues with tracking pointers over and out of the tracked element (pull request #448, fix for #152, #404, #420, and #427)
+* Fixed incorrect flick direction after image is rotated (#452)
 
 1.1.1:
 

src/button.js

@@ -137,6 +137,7 @@ $.Button = function( options ) {
             this.tooltip;
 
         this.element.style.position = "relative";
+        $.setElementTouchActionNone( this.element );
 
         this.imgGroup.style.position =
         this.imgHover.style.position =

src/buttongroup.js

@@ -80,6 +80,8 @@ $.ButtonGroup = function( options ) {
         }
     }
 
+    $.setElementTouchActionNone( this.element );
+
     /**
      * Tracks mouse/touch/key events accross the group of buttons.
      * @member {OpenSeadragon.MouseTracker} tracker

src/drawer.js

@@ -750,11 +750,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;

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,51 +32,78 @@
  * 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 ) ){
+    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.tileSizePerScaleFactor = {};
+
+    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;
+                }
+            }
+        }
+    } 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 ( !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) );
         }
     }
-        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 ] );
 };
@@ -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 &&
+        // 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;
-
+        // Try to deduce our version and fake it upwards if needed
         if ( !$.isPlainObject(data) ) {
-
-            options = configureFromXml( this, data );
-
-        }else{
-
-            options = configureFromObject( this, 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,
-                ''
-            );
-        }
-
+            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;
+        }
+    },
+
+    /**
+     * 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 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,83 +207,55 @@ $.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('/');
+        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;
+    }
 
   });
 
-/**
- * @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 ){
-
+    function configureFromXml10(xmlDoc) {
         //parse the xml
         if ( !xmlDoc || !xmlDoc.documentElement ) {
             throw new Error( $.getString( "Errors.Xml" ) );
@@ -247,16 +266,10 @@ function configureFromXml( tileSource, xmlDoc ){
             configuration   = null;
 
         if ( rootName == "info" ) {
-
             try {
-
-            configuration = {
-                "ns": root.namespaceURI
-            };
-
-            parseXML( root, configuration );
-
-            return configureFromObject( tileSource, configuration );
+                configuration = {};
+                parseXML10( root, configuration );
+                return configuration;
 
             } catch ( e ) {
                 throw (e instanceof Error) ?
@@ -264,18 +277,10 @@ function configureFromXml( tileSource, xmlDoc ){
                     new Error( $.getString("Errors.IIIF") );
             }
         }
-
         throw new Error( $.getString( "Errors.IIIF" ) );
-
     }
 
-
-/**
- * @private
- * @inner
- * @function
- */
-function parseXML( node, configuration, property ){
+    function parseXML10( node, configuration, property ) {
         var i,
             value;
         if ( node.nodeType == 3 && property ) {//text node
@@ -293,37 +298,10 @@ function parseXML( node, configuration, property ){
             }
         } else if( node.nodeType == 1 ){
             for( i = 0; i < node.childNodes.length; i++ ){
-            parseXML( node.childNodes[ i ], configuration, node.nodeName );
+                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/mousetracker.js

@@ -122,28 +122,28 @@
          * @member {Number} clickTimeThreshold
          * @memberof OpenSeadragon.MouseTracker#
          */
-        this.clickTimeThreshold = options.clickTimeThreshold;
+        this.clickTimeThreshold = options.clickTimeThreshold || $.DEFAULT_SETTINGS.clickTimeThreshold;
         /**
          * The maximum distance allowed between a pointer down event and a pointer up event
          * to be treated as a click gesture.
          * @member {Number} clickDistThreshold
          * @memberof OpenSeadragon.MouseTracker#
          */
-        this.clickDistThreshold = options.clickDistThreshold;
+        this.clickDistThreshold = options.clickDistThreshold || $.DEFAULT_SETTINGS.clickDistThreshold;
         /**
          * The number of milliseconds within which two pointer down-up event combinations
          * will be treated as a double-click gesture.
          * @member {Number} dblClickTimeThreshold
          * @memberof OpenSeadragon.MouseTracker#
          */
-        this.dblClickTimeThreshold = options.dblClickTimeThreshold;
+        this.dblClickTimeThreshold = options.dblClickTimeThreshold || $.DEFAULT_SETTINGS.dblClickTimeThreshold;
         /**
          * The maximum distance allowed between two pointer click events
          * to be treated as a click gesture.
          * @member {Number} clickDistThreshold
          * @memberof OpenSeadragon.MouseTracker#
          */
-        this.dblClickDistThreshold = options.dblClickDistThreshold;
+        this.dblClickDistThreshold = options.dblClickDistThreshold || $.DEFAULT_SETTINGS.dblClickDistThreshold;
         this.userData           = options.userData        || null;
         this.stopDelay          = options.stopDelay       || 50;
 
@@ -187,8 +187,6 @@
 
             mouseover:             function ( event ) { onMouseOver( _this, event ); },
             mouseout:              function ( event ) { onMouseOut( _this, event ); },
-            mouseenter:            function ( event ) { onMouseEnter( _this, event ); },
-            mouseleave:            function ( event ) { onMouseLeave( _this, event ); },
             mousedown:             function ( event ) { onMouseDown( _this, event ); },
             mouseup:               function ( event ) { onMouseUp( _this, event ); },
             mouseupcaptured:       function ( event ) { onMouseUpCaptured( _this, event ); },
@@ -205,10 +203,10 @@
             gesturestart:          function ( event ) { onGestureStart( _this, event ); },
             gesturechange:         function ( event ) { onGestureChange( _this, event ); },
 
-            pointerenter:          function ( event ) { onPointerEnter( _this, event ); },
-            MSPointerEnter:        function ( event ) { onPointerEnter( _this, event ); },
-            pointerleave:          function ( event ) { onPointerLeave( _this, event ); },
-            MSPointerLeave:        function ( event ) { onPointerLeave( _this, event ); },
+            pointerover:           function ( event ) { onPointerOver( _this, event ); },
+            MSPointerOver:         function ( event ) { onPointerOver( _this, event ); },
+            pointerout:            function ( event ) { onPointerOut( _this, event ); },
+            MSPointerOut:          function ( event ) { onPointerOut( _this, event ); },
             pointerdown:           function ( event ) { onPointerDown( _this, event ); },
             MSPointerDown:         function ( event ) { onPointerDown( _this, event ); },
             pointerup:             function ( event ) { onPointerUp( _this, event ); },
@@ -217,6 +215,8 @@
             MSPointerMove:         function ( event ) { onPointerMove( _this, event ); },
             pointercancel:         function ( event ) { onPointerCancel( _this, event ); },
             MSPointerCancel:       function ( event ) { onPointerCancel( _this, event ); },
+            pointerupcaptured:     function ( event ) { onPointerUpCaptured( _this, event ); },
+            pointermovecaptured:   function ( event ) { onPointerMoveCaptured( _this, event ); },
 
             tracking:              false,
 
@@ -226,9 +226,12 @@
             //     of the element (for hover-capable devices) and/or have contact or a button press initiated in the element.
             activePointersLists:   [],
 
-            // Legacy mouse event tracking
+            // Legacy mouse capture tracking
             capturing:             false,
 
+            // Pointer event model capture tracking
+            pointerCaptureCount:   0,
+
             // Tracking for double-click gesture
             lastClickPos:          null,
             dblClickTimeOut:       null,
@@ -816,29 +819,28 @@
 
     if ( window.PointerEvent ) {
         // IE11 and other W3C Pointer Event implementations (see http://www.w3.org/TR/pointerevents)
-        $.MouseTracker.subscribeEvents.push( "pointerenter", "pointerleave", "pointerdown", "pointerup", "pointermove", "pointercancel" );
+        $.MouseTracker.subscribeEvents.push( "pointerover", "pointerout", "pointerdown", "pointerup", "pointermove", "pointercancel" );
         $.MouseTracker.unprefixedPointerEvents = true;
         if( navigator.maxTouchPoints ) {
             $.MouseTracker.maxTouchPoints = navigator.maxTouchPoints;
         } else {
             $.MouseTracker.maxTouchPoints = 0;
         }
-        $.MouseTracker.haveTouchEnter = true;
-        $.MouseTracker.haveMouseEnter = true;
+        $.MouseTracker.haveTouchEnter = false;
+        $.MouseTracker.haveMouseEnter = false;
     } else if ( window.MSPointerEvent ) {
         // IE10
-        $.MouseTracker.subscribeEvents.push( "MSPointerEnter", "MSPointerLeave", "MSPointerDown", "MSPointerUp", "MSPointerMove", "MSPointerCancel" );
+        $.MouseTracker.subscribeEvents.push( "MSPointerOver", "MSPointerOut", "MSPointerDown", "MSPointerUp", "MSPointerMove", "MSPointerCancel" );
         $.MouseTracker.unprefixedPointerEvents = false;
         if( navigator.msMaxTouchPoints ) {
             $.MouseTracker.maxTouchPoints = navigator.msMaxTouchPoints;
         } else {
             $.MouseTracker.maxTouchPoints = 0;
         }
-        $.MouseTracker.haveTouchEnter = true;
-        $.MouseTracker.haveMouseEnter = true;
+        $.MouseTracker.haveTouchEnter = false;
+        $.MouseTracker.haveMouseEnter = false;
     } else {
         // Legacy W3C mouse events
-        // TODO: Favor mouseenter/mouseleave over mouseover/mouseout when Webkit browser support is better
         $.MouseTracker.subscribeEvents.push( "mouseover", "mouseout", "mousedown", "mouseup", "mousemove" );
         $.MouseTracker.haveMouseEnter = false;
         if ( 'ontouchstart' in window ) {
@@ -1072,74 +1074,67 @@
                 );
             }
 
-            releaseMouse( tracker );
             delegate.tracking = false;
         }
     }
 
     /**
-     * Begin capturing mouse events to the tracked element (legacy mouse events only).
+     * Begin capturing pointer events to the tracked element.
      * @private
      * @inner
      */
-    function captureMouse( tracker ) {
+    function capturePointer( tracker, isLegacyMouse ) {
         var delegate = THIS[ tracker.hash ];
 
-        if ( !delegate.capturing ) {
-            if ( $.MouseTracker.supportsMouseCapture ) {
-                // IE<10, Firefox, other browsers with setCapture()/releaseCapture()
-                tracker.element.setCapture( true );
-            } else {
-                // For browsers without setCapture()/releaseCapture(), we emulate mouse capture by hanging listeners on the window object.
+        delegate.pointerCaptureCount++;
+        //$.console.log('pointerCaptureCount++ ', delegate.pointerCaptureCount);
+
+        if ( delegate.pointerCaptureCount === 1 ) {
+            // We emulate mouse capture by hanging listeners on the window object.
             //    (Note we listen on the capture phase so the captured handlers will get called first)
             $.addEvent(
                 window,
-                    "mouseup",
-                    delegate.mouseupcaptured,
+                isLegacyMouse ? 'mouseup' : ($.MouseTracker.unprefixedPointerEvents ? 'pointerup' : 'MSPointerUp'),
+                isLegacyMouse ? delegate.mouseupcaptured : delegate.pointerupcaptured,
                 true
             );
             $.addEvent(
                 window,
-                    "mousemove",
-                    delegate.mousemovecaptured,
+                isLegacyMouse ? 'mousemove' : ($.MouseTracker.unprefixedPointerEvents ? 'pointermove' : 'MSPointerMove'),
+                isLegacyMouse ? delegate.mousemovecaptured : delegate.pointermovecaptured,
                 true
             );
         }
-            delegate.capturing = true;
-        }
     }
 
 
     /**
-     * Stop capturing mouse events to the tracked element (legacy mouse events only).
+     * Stop capturing pointer events to the tracked element.
      * @private
      * @inner
      */
-    function releaseMouse( tracker ) {
+    function releasePointer( tracker, isLegacyMouse ) {
         var delegate = THIS[ tracker.hash ];
 
-        if ( delegate.capturing ) {
-            if ( $.MouseTracker.supportsMouseCapture ) {
-                // IE<10, Firefox, other browsers with setCapture()/releaseCapture()
-                tracker.element.releaseCapture();
-            } else {
-                // For browsers without setCapture()/releaseCapture(), we emulate mouse capture by hanging listeners on the window object.
+        delegate.pointerCaptureCount--;
+        //$.console.log('pointerCaptureCount-- ', delegate.pointerCaptureCount);
+
+        if ( delegate.pointerCaptureCount === 0 ) {
+            // We emulate mouse capture by hanging listeners on the window object.
             //    (Note we listen on the capture phase so the captured handlers will get called first)
             $.removeEvent(
                 window,
-                    "mousemove",
-                    delegate.mousemovecaptured,
+                isLegacyMouse ? 'mousemove' : ($.MouseTracker.unprefixedPointerEvents ? 'pointermove' : 'MSPointerMove'),
+                isLegacyMouse ? delegate.mousemovecaptured : delegate.pointermovecaptured,
                 true
             );
             $.removeEvent(
                 window,
-                    "mouseup",
-                    delegate.mouseupcaptured,
+                isLegacyMouse ? 'mouseup' : ($.MouseTracker.unprefixedPointerEvents ? 'pointerup' : 'MSPointerUp'),
+                isLegacyMouse ? delegate.mouseupcaptured : delegate.pointerupcaptured,
                 true
             );
         }
-            delegate.capturing = false;
-        }
     }
 
 
@@ -1421,7 +1416,7 @@
 
         event = $.getEvent( event );
 
-        if ( this === event.relatedTarget || isParentChild( this, event.relatedTarget ) ) {
+        if ( this === event.relatedTarget || isParentChild( event.currentTarget, event.relatedTarget ) ) {
             return;
         }
 
@@ -1446,7 +1441,7 @@
 
         event = $.getEvent( event );
 
-        if ( this === event.relatedTarget || isParentChild( this, event.relatedTarget ) ) {
+        if ( this === event.relatedTarget || isParentChild( event.currentTarget, event.relatedTarget ) ) {
             return;
         }
 
@@ -1462,48 +1457,6 @@
     }
 
 
-    /**
-     * @private
-     * @inner
-     */
-    function onMouseEnter( tracker, event ) {
-        var gPoint;
-
-        event = $.getEvent( event );
-
-        gPoint = {
-            id: $.MouseTracker.mousePointerId,
-            type: 'mouse',
-            isPrimary: true,
-            currentPos: getMouseAbsolute( event ),
-            currentTime: $.now()
-        };
-
-        updatePointersEnter( tracker, event, [ gPoint ] );
-    }
-
-
-    /**
-     * @private
-     * @inner
-     */
-    function onMouseLeave( tracker, event ) {
-        var gPoint;
-
-        event = $.getEvent( event );
-
-        gPoint = {
-            id: $.MouseTracker.mousePointerId,
-            type: 'mouse',
-            isPrimary: true,
-            currentPos: getMouseAbsolute( event ),
-            currentTime: $.now()
-        };
-
-        updatePointersExit( tracker, event, [ gPoint ] );
-    }
-
-
     /**
      * @private
      * @inner
@@ -1523,7 +1476,7 @@
 
         if ( updatePointersDown( tracker, event, [ gPoint ], event.button ) ) {
             $.stopEvent( event );
-            captureMouse( tracker );
+            capturePointer( tracker, true );
         }
 
         if ( tracker.clickHandler || tracker.dblClickHandler || tracker.pressHandler || tracker.dragHandler || tracker.dragEndHandler ) {
@@ -1542,8 +1495,6 @@
 
     /**
      * This handler is attached to the window object (on the capture phase) to emulate mouse capture.
-     * Only triggered in W3C browsers that don't have setCapture/releaseCapture 
-     * methods or don't support the new pointer events model.
      * onMouseUp is still attached to the tracked element, so stop propagation to avoid processing twice.
      *
      * @private
@@ -1573,7 +1524,7 @@
         };
 
         if ( updatePointersUp( tracker, event, [ gPoint ], event.button ) ) {
-            releaseMouse( tracker );
+            releasePointer( tracker, true );
         }
     }
 
@@ -1589,8 +1540,6 @@
     
     /**
      * This handler is attached to the window object (on the capture phase) to emulate mouse capture.
-     * Only triggered in W3C browsers that don't have setCapture/releaseCapture 
-     * methods or don't support the new pointer events model.
      * onMouseMove is still attached to the tracked element, so stop propagation to avoid processing twice.
      *
      * @private
@@ -1810,9 +1759,13 @@
      * @private
      * @inner
      */
-    function onPointerEnter( tracker, event ) {
+    function onPointerOver( tracker, event ) {
         var gPoint;
 
+        if ( this === event.relatedTarget || isParentChild( event.currentTarget, event.relatedTarget ) ) {
+            return;
+        }
+
         gPoint = {
             id: event.pointerId,
             type: getPointerType( event ),
@@ -1829,9 +1782,13 @@
      * @private
      * @inner
      */
-    function onPointerLeave( tracker, event ) {
+    function onPointerOut( tracker, event ) {
         var gPoint;
 
+        if ( this === event.relatedTarget || isParentChild( event.currentTarget, event.relatedTarget ) ) {
+            return;
+        }
+
         gPoint = {
             id: event.pointerId,
             type: getPointerType( event ),
@@ -1860,11 +1817,7 @@
         };
 
         if ( updatePointersDown( tracker, event, [ gPoint ], event.button ) ) {
-            if ( $.MouseTracker.unprefixedPointerEvents ) {
-                event.currentTarget.setPointerCapture( event.pointerId );
-            } else {
-                event.currentTarget.msSetPointerCapture( event.pointerId );
-            }
+            capturePointer( tracker, false );
             $.stopEvent( event );
         }
 
@@ -1879,6 +1832,31 @@
      * @inner
      */
     function onPointerUp( tracker, event ) {
+        handlePointerUp( tracker, event );
+    }
+
+
+    /**
+     * This handler is attached to the window object (on the capture phase) to emulate mouse capture.
+     * onPointerUp is still attached to the tracked element, so stop propagation to avoid processing twice.
+     *
+     * @private
+     * @inner
+     */
+    function onPointerUpCaptured( tracker, event ) {
+        var pointsList = tracker.getActivePointersListByType( getPointerType( event ) );
+        if ( pointsList.getById( event.pointerId ) ) {
+            handlePointerUp( tracker, event );
+        }
+        $.stopEvent( event );
+    }
+
+
+    /**
+     * @private
+     * @inner
+     */
+    function handlePointerUp( tracker, event ) {
         var gPoint;
 
         gPoint = {
@@ -1890,11 +1868,8 @@
         };
 
         if ( updatePointersUp( tracker, event, [ gPoint ], event.button ) ) {
-            if ( $.MouseTracker.unprefixedPointerEvents ) {
-                event.currentTarget.releasePointerCapture( event.pointerId );
-            } else {
-                event.currentTarget.msReleasePointerCapture( event.pointerId );
-            }
+            releasePointer( tracker, false );
+            //$.stopEvent( event );
         }
     }
 
@@ -1904,6 +1879,31 @@
      * @inner
      */
     function onPointerMove( tracker, event ) {
+        handlePointerMove( tracker, event );
+    }
+
+
+    /**
+     * This handler is attached to the window object (on the capture phase) to emulate mouse capture.
+     * onPointerMove is still attached to the tracked element, so stop propagation to avoid processing twice.
+     *
+     * @private
+     * @inner
+     */
+    function onPointerMoveCaptured( tracker, event ) {
+        var pointsList = tracker.getActivePointersListByType( getPointerType( event ) );
+        if ( pointsList.getById( event.pointerId ) ) {
+            handlePointerMove( tracker, event );
+        }
+        $.stopEvent( event );
+    }
+
+
+    /**
+     * @private
+     * @inner
+     */
+    function handlePointerMove( tracker, event ) {
         // Pointer changed coordinates, button state, pressure, tilt, or contact geometry (e.g. width and height)
         var gPoint;
 
@@ -2216,6 +2216,7 @@
             }
 
             pointsList.contacts++;
+            //$.console.log('contacts++ ', pointsList.contacts);
 
             if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) {
                 $.MouseTracker.gesturePointVelocityTracker.addPoint( tracker, curGPoint );
@@ -2342,6 +2343,7 @@
                     // Pointer was activated in our element but could have been removed in any element since events are captured to our element
 
                     pointsList.contacts--;
+                    //$.console.log('contacts-- ', pointsList.contacts);
 
                     if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) {
                         $.MouseTracker.gesturePointVelocityTracker.removePoint( tracker, updateGPoint );

src/navigator.js

@@ -112,6 +112,8 @@ $.Navigator = function( options ){
 
     options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio;
 
+    $.setElementTouchActionNone( this.element );
+
     this.borderWidth = 2;
     //At some browser magnification levels the display regions lines up correctly, but at some there appears to
     //be a one pixel gap.
@@ -298,12 +300,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;
         }
@@ -318,19 +317,11 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  * @function
  */
 function onCanvasClick( event ) {
-    var newBounds,
-        viewerPosition,
-        dimensions;
-    if (! this.drag) {
-        if ( this.viewer.viewport ) {
+    if ( event.quick && this.viewer.viewport ) {
         this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) );
         this.viewer.viewport.applyConstraints();
     }
 }
-    else {
-        this.drag = false;
-    }
-}
 
 /**
  * @private
@@ -339,7 +330,6 @@ function onCanvasClick( event ) {
  */
 function onCanvasDrag( event ) {
     if ( this.viewer.viewport ) {
-        this.drag = true;
         if( !this.panHorizontal ){
             event.delta.x = 0;
         }

src/openseadragon.js

@@ -1585,6 +1585,21 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
         },
 
 
+        /**
+         * Sets the specified element's touch-action style attribute to 'none'.
+         * @function
+         * @param {Element|String} element
+         */
+        setElementTouchActionNone: function( element ) {
+            element = $.getElement( element );
+            if ( typeof element.style.touchAction !== 'undefined' ) {
+                element.style.touchAction = 'none';
+            } else if ( typeof element.style.msTouchAction !== 'undefined' ) {
+                element.style.msTouchAction = 'none';
+            }
+        },
+
+
         /**
          * Add the specified CSS class to the element if not present.
          * @function

src/referencestrip.js

@@ -114,6 +114,8 @@ $.ReferenceStrip = function ( options ) {
     style.background    = '#000';
     style.position      = 'relative';
 
+    $.setElementTouchActionNone( this.element );
+
     $.setElementOpacity( this.element, 0.8 );
 
     this.viewer = viewer;
@@ -189,6 +191,7 @@ $.ReferenceStrip = function ( options ) {
         element.style.cssFloat      = 'left'; //Firefox
         element.style.styleFloat    = 'left'; //IE
         element.style.padding       = '2px';
+        $.setElementTouchActionNone( element );
 
         element.innerTracker = new $.MouseTracker( {
             element:            element,

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

@@ -275,13 +275,8 @@ $.Viewer = function( options ) {
         style.position = "absolute";
         style.top      = "0px";
         style.left     = "0px";
-        // Disable browser default touch handling
-        if (style["touch-action"] !== undefined) {
-            style["touch-action"] = "none";
-        } else if (style["-ms-touch-action"] !== undefined) {
-            style["-ms-touch-action"] = "none";
-        }
     }(this.canvas.style));
+    $.setElementTouchActionNone( this.canvas );
 
     //the container is created through applying the ControlDock constructor above
     this.container.className = "openseadragon-container";
@@ -2382,8 +2377,8 @@ function onCanvasDragEnd( event ) {
     if ( !event.preventDefaultAction && this.viewport ) {
         gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
         if ( gestureSettings.flickEnabled && event.speed >= gestureSettings.flickMinSpeed ) {
-            var amplitudeX = gestureSettings.flickMomentum * ( event.speed * Math.cos( event.direction ) ),
-                amplitudeY = gestureSettings.flickMomentum * ( event.speed * Math.sin( event.direction ) ),
+            var amplitudeX = gestureSettings.flickMomentum * ( event.speed * Math.cos( event.direction - (Math.PI / 180 * this.viewport.degrees) ) ),
+                amplitudeY = gestureSettings.flickMomentum * ( event.speed * Math.sin( event.direction - (Math.PI / 180 * this.viewport.degrees) ) ),
                 center = this.viewport.pixelFromPoint( this.viewport.getCenter( true ) ),
                 target = this.viewport.pointFromPixel( new $.Point( center.x - amplitudeX, center.y - amplitudeY ) );
             if( !this.panHorizontal ) {
@@ -2393,8 +2388,8 @@ function onCanvasDragEnd( event ) {
                 target.y = center.y;
             }
             this.viewport.panTo( target, false );
-            this.viewport.applyConstraints();
         }
+        this.viewport.applyConstraints();
     }
     /**
      * Raised when a mouse or touch drag operation ends on the {@link OpenSeadragon.Viewer#canvas} element.
@@ -2422,15 +2417,6 @@ function onCanvasDragEnd( event ) {
 }
 
 function onCanvasRelease( event ) {
-    var gestureSettings;
-
-    if ( event.insideElementPressed && this.viewport ) {
-        gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
-
-        if ( !gestureSettings.flickEnabled ) {
-            this.viewport.applyConstraints();
-        }
-    }
     /**
      * Raised when the mouse button is released or touch ends on the {@link OpenSeadragon.Viewer#canvas} element.
      *

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/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');
     });    
 
 })();