Fix merge conflict in upstream changelog.txt

changelog.txt

@@ -9,12 +9,14 @@ OPENSEADRAGON CHANGELOG
 * Fixed flickering tiles with useCanvas=false when no cache is used (#661)
 * Added additional coordinates conversion methods to TiledImage (#662)
 * 'display: none' no longer gets reset on overlays during draw (#668)
+* Added `preserveImageSizeOnResize` option (#666)
+* Better error reporting for tile load failures (#679)
+* Added collectionColumns as a configuration parameter (#680)
 * Added support for non-square tiles (#673)
     * TileSource.Options objects can now optionally provide tileWidth/tileWidth instead of tileSize for non-square tile support.
     * IIIFTileSources will now respect non-square tiles if available.
     * DEPRECATION: TileSource.getTileSize is deprecated use TileSource.getTileWidth and TileSource.getTileHeight instead.
 
-
 2.0.0:
 
 * True multi-image mode (#450)

package.json

@@ -5,16 +5,16 @@
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-contrib-clean": "^0.5.0",
-    "grunt-text-replace": "^0.3.11",
+    "grunt-contrib-compress": "^0.9.1",
     "grunt-contrib-concat": "^0.4.0",
-    "grunt-git-describe": "^2.3.2",
+    "grunt-contrib-connect": "^0.7.1",
+    "grunt-contrib-jshint": "^0.10.0",
     "grunt-contrib-uglify": "^0.4.0",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-contrib-jshint": "^0.10.0",
+    "grunt-git-describe": "^2.3.2",
-    "grunt-contrib-compress": "^0.9.1",
+    "grunt-qunit-istanbul": "^0.5.0",
-    "grunt-contrib-connect": "^0.7.1",
+    "grunt-text-replace": "^0.3.11",
-    "qunitjs": "^1.14.0",
+    "qunitjs": "^1.18.0"
-    "grunt-qunit-istanbul": "^0.4.5"
   },
   "scripts": {
     "test": "grunt test"

src/imageloader.js

@@ -51,6 +51,7 @@ function ImageJob ( options ) {
 }
 
 ImageJob.prototype = {
+    errorMsg: null,
     start: function(){
         var _this = this;
 
@@ -64,10 +65,12 @@ ImageJob.prototype = {
             _this.finish( true );
         };
         this.image.onabort = this.image.onerror = function(){
+            _this.errorMsg = "Image load aborted";
             _this.finish( false );
         };
 
         this.jobId = window.setTimeout( function(){
+            _this.errorMsg = "Image load exceeded timeout";
             _this.finish( false );
         }, this.timeout);
 
@@ -173,7 +176,7 @@ function completeJob( loader, job, callback ) {
         loader.jobsInProgress++;
     }
 
-    callback( job.image );
+    callback( job.image, job.errorMsg );
 }
 
 }( OpenSeadragon ));

src/openseadragon.js

@@ -252,6 +252,9 @@
   * @property {Boolean} [autoResize=true]
   *     Set to false to prevent polling for viewer size changes. Useful for providing custom resize behavior.
   *
+  * @property {Boolean} [preserveImageSizeOnResize=false]
+  *     Set to true to have the image size preserved when the viewer is resized. This requires autoResize=true (default).
+  *
   * @property {Number} [pixelsPerWheelLine=40]
   *     For pixel-resolution scrolling devices, the number of pixels equal to one scroll line.
   *
@@ -556,6 +559,10 @@
   *     If collectionMode is true, specifies how many rows the grid should have. Use 1 to make a line.
   *     If collectionLayout is 'vertical', specifies how many columns instead.
   *
+  * @property {Number} [collectionColumns=0]
+  *     If collectionMode is true, specifies how many columns the grid should have. Use 1 to make a line.
+  *     If collectionLayout is 'vertical', specifies how many rows instead. Ignored if collectionRows is not set to a falsy value.
+  *
   * @property {String} [collectionLayout='horizontal']
   *     If collectionMode is true, specifies whether to arrange vertically or horizontally.
   *
@@ -987,6 +994,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             maxZoomPixelRatio:      1.1, //-> higher allows 'over zoom' into pixels
             pixelsPerWheelLine:     40,
             autoResize:             true,
+            preserveImageSizeOnResize: false, // requires autoResize=true
 
             //DEFAULT CONTROL SETTINGS
             showSequenceControl:     true,  //SEQUENCE
@@ -1035,6 +1043,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
 
             //COLLECTION VISUALIZATION SETTINGS
             collectionRows:         3, //or columns depending on layout
+            collectionColumns:      0, //columns in horizontal layout, rows in vertical layout
             collectionLayout:       'horizontal', //vertical
             collectionMode:         false,
             collectionTileSize:     800,

src/tiledimage.js

@@ -1011,8 +1011,8 @@ function loadTile( tiledImage, tile, time ) {
     tiledImage._imageLoader.addJob({
         src: tile.url,
         crossOriginPolicy: tiledImage.crossOriginPolicy,
-        callback: function( image ){
+        callback: function( image, errorMsg ){
-            onTileLoad( tiledImage, tile, time, image );
+            onTileLoad( tiledImage, tile, time, image, errorMsg );
         },
         abort: function() {
             tile.loading = false;
@@ -1020,9 +1020,9 @@ function loadTile( tiledImage, tile, time ) {
     });
 }
 
-function onTileLoad( tiledImage, tile, time, image ) {
+function onTileLoad( tiledImage, tile, time, image, errorMsg ) {
     if ( !image ) {
-        $.console.log( "Tile %s failed to load: %s", tile, tile.url );
+        $.console.log( "Tile %s failed to load: %s - error: %s", tile, tile.url, errorMsg );
         if( !tiledImage.debugMode ){
             tile.loading = false;
             tile.exists = false;

src/viewer.js

@@ -1318,6 +1318,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     _this.world.arrange({
                         immediately: queueItem.options.collectionImmediately,
                         rows: _this.collectionRows,
+                        columns: _this.collectionColumns,
                         layout: _this.collectionLayout,
                         tileSize: _this.collectionTileSize,
                         tileMargin: _this.collectionTileMargin
@@ -1710,7 +1711,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * is closed which include when changing page.
      * @method
      * @param {Element|String|Object} element - A reference to an element or an id for
-     *      the element which will overlayed. Or an Object specifying the configuration for the overlay
+     *      the element which will be overlayed. Or an Object specifying the configuration for the overlay
      * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
      *      rectangle which will be overlayed.
      * @param {OpenSeadragon.OverlayPlacement} placement - The position of the
@@ -1770,6 +1771,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * Updates the overlay represented by the reference to the element or
      * element id moving it to the new location, relative to the new placement.
      * @method
+     * @param {Element|String} element - A reference to an element or an id for
+     *      the element which is overlayed.
      * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
      *      rectangle which will be overlayed.
      * @param {OpenSeadragon.OverlayPlacement} placement - The position of the
@@ -2824,13 +2827,31 @@ function updateOnce( viewer ) {
         return;
     }
 
+    var containerSize;
     if ( viewer.autoResize ) {
-        var containerSize = _getSafeElemSize( viewer.container );
+        containerSize = _getSafeElemSize( viewer.container );
         if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
+            if ( viewer.preserveImageSizeOnResize ) {
+                var prevContainerSize = THIS[ viewer.hash ].prevContainerSize;
+                var bounds = viewer.viewport.getBounds(true);
+                var deltaX = (containerSize.x - prevContainerSize.x);
+                var deltaY = (containerSize.y - prevContainerSize.y);
+                var viewportDiff = viewer.viewport.deltaPointsFromPixels(new OpenSeadragon.Point(deltaX, deltaY), true);
+                viewer.viewport.resize(new OpenSeadragon.Point(containerSize.x, containerSize.y), false);
+
+                // Keep the center of the image in the center and just adjust the amount of image shown
+                bounds.width += viewportDiff.x;
+                bounds.height += viewportDiff.y;
+                bounds.x -= (viewportDiff.x / 2);
+                bounds.y -= (viewportDiff.y / 2);
+                viewer.viewport.fitBoundsWithConstraints(bounds, true);
+            }
+            else {
                 // maintain image position
                 var oldBounds = viewer.viewport.getBounds();
                 var oldCenter = viewer.viewport.getCenter();
                 resizeViewportAndRecenter(viewer, containerSize, oldBounds, oldCenter);
+            }
             THIS[ viewer.hash ].prevContainerSize = containerSize;
             THIS[ viewer.hash ].forceRedraw = true;
         }

src/world.js

@@ -281,6 +281,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
      * @param {Boolean} [options.immediately=false] - Whether to animate to the new arrangement.
      * @param {String} [options.layout] - See collectionLayout in {@link OpenSeadragon.Options}.
      * @param {Number} [options.rows] - See collectionRows in {@link OpenSeadragon.Options}.
+     * @param {Number} [options.columns] - See collectionColumns in {@link OpenSeadragon.Options}.
      * @param {Number} [options.tileSize] - See collectionTileSize in {@link OpenSeadragon.Options}.
      * @param {Number} [options.tileMargin] - See collectionTileMargin in {@link OpenSeadragon.Options}.
      * @fires OpenSeadragon.World.event:metrics-change
@@ -290,10 +291,16 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
         var immediately = options.immediately || false;
         var layout = options.layout || $.DEFAULT_SETTINGS.collectionLayout;
         var rows = options.rows || $.DEFAULT_SETTINGS.collectionRows;
+        var columns = options.columns || $.DEFAULT_SETTINGS.collectionColumns;
         var tileSize = options.tileSize || $.DEFAULT_SETTINGS.collectionTileSize;
         var tileMargin = options.tileMargin || $.DEFAULT_SETTINGS.collectionTileMargin;
         var increment = tileSize + tileMargin;
-        var wrap = Math.ceil(this._items.length / rows);
+        var wrap;
+        if (!options.rows && columns) {
+            wrap = columns;
+        } else {
+            wrap = Math.ceil(this._items.length / rows);
+        }
         var x = 0;
         var y = 0;
         var item, box, width, height, position;

test/demo/tilesource-swap.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>TileSource Swapping</title>
+        <script type="text/javascript" src="../../build/openseadragon/openseadragon.js"></script>
+        <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
+        <style type="text/css">
+
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+
+            .viewer-position {
+                position: absolute;
+                left: 0;
+                top: 30px;
+                right: 0;
+                bottom: 0;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div>This is a demo of using a single image stand-in and then swapping to a full TileSource on zooming. Click the image to see it in action.</div>
+        <div id="openseadragon1" class="viewer-position"></div>
+        <script>
+
+            var duomoStandin = {
+                type: 'legacy-image-pyramid',
+                levels: [
+                    {
+                        url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
+                        width: 218,
+                        height: 160
+                    }
+                ]
+            };
+
+            var duomo = {
+                Image: {
+                    xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
+                    Url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/',
+                    Format: 'jpg',
+                    Overlap: '2',
+                    TileSize: '256',
+                    Size: {
+                        Width:  '13920',
+                        Height: '10200'
+                    }
+                }
+            };
+
+            var viewer = OpenSeadragon({
+                id: 'openseadragon1',
+                prefixUrl: '../../build/openseadragon/images/',
+                tileSources: duomoStandin,
+                minZoomImageRatio: 0.1,
+                defaultZoomLevel: 0.1,
+                zoomPerClick: 1
+            });
+
+            viewer.addHandler('canvas-click', function(event) {
+                if (event.quick) {
+                    var standin = viewer.world.getItemAt(0);
+                    var standinBounds = standin.getBounds();
+                    viewer.viewport.fitBounds(standinBounds);
+
+                    viewer.addTiledImage({
+                        x: standinBounds.x,
+                        y: standinBounds.y,
+                        width: standinBounds.width,
+                        tileSource: duomo,
+                        index: 0, // Add the new image below the stand-in.
+                        success: function(event) {
+                            var fullImage = event.item;
+
+                            // The changeover will look better if we wait for the first tile to be drawn.
+                            var tileDrawnHandler = function(event) {
+                                if (event.tiledImage === fullImage) {
+                                    viewer.removeHandler('tile-drawn', tileDrawnHandler);
+                                    viewer.world.removeItem(standin);
+                                }
+                            };
+
+                            viewer.addHandler('tile-drawn', tileDrawnHandler);
+                        }
+                    });
+                }
+            });
+
+        </script>
+    </body>
+</html>

test/modules/world.js

@@ -213,6 +213,26 @@
 
             checkBounds(new OpenSeadragon.Rect(0, 0, 1, 4), 'one vertical column');
 
+            viewer.world.arrange({
+                layout: 'horizontal',
+                rows: false,
+                columns: 3,
+                tileSize: 1,
+                tileMargin: 0.5
+            });
+
+            checkBounds(new OpenSeadragon.Rect(0, 0, 4, 1), 'three horizontal columns (one horizontal row)');
+
+            viewer.world.arrange({
+                layout: 'vertical',
+                rows: false,
+                columns: 3,
+                tileSize: 1,
+                tileMargin: 0.5
+            });
+
+            checkBounds(new OpenSeadragon.Rect(0, 0, 1, 4), 'three vertical rows (one vertical column)');
+
             start();
         });