Supporting collectionTileSize and collectionTileMargin

src/openseadragon.js

@@ -538,6 +538,8 @@
   *
   * @property {Number} [collectionTileSize=800]
   *
+  * @property {Number} [collectionTileMargin=80]
+  *
   * @property {String|Boolean} [crossOriginPolicy=false]
   *      Valid values are 'Anonymous', 'use-credentials', and false. If false, canvas requests will
   *      not use CORS, and the canvas will be tainted.
@@ -984,6 +986,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             collectionLayout:       'horizontal', //vertical
             collectionMode:         false,
             collectionTileSize:     800,
+            collectionTileMargin:   80,
 
             //PERFORMANCE SETTINGS
             imageLoaderLimit:       0,

src/tiledimage.js

@@ -89,7 +89,7 @@ $.TiledImage = function( options ) {
     this.normHeight = options.source.dimensions.y / options.source.dimensions.x;
 
     if ( options.width ) {
-        this._scale = options.width;
+        this._setScale(options.width);
         delete options.width;
 
         if ( options.height ) {
@@ -97,15 +97,12 @@ $.TiledImage = function( options ) {
             delete options.height;
         }
     } else if ( options.height ) {
-        this._scale = options.height / this.normHeight;
+        this._setScale(options.height / this.normHeight);
         delete options.height;
     } else {
-        this._scale = 1;
+        this._setScale(1);
     }
 
-    this._worldWidth = this._scale;
-    this._worldHeight = this.normHeight * this._scale;
-
     $.extend( true, this, {
 
         //internal state properties
@@ -184,12 +181,48 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @fires OpenSeadragon.TiledImage.event:bounds-changed
      */
     setPosition: function(position) {
+        if (this._worldX === position.x && this._worldY === position.y) {
+            return;
+        }
+
         this._worldX = position.x;
         this._worldY = position.y;
         this.updateAgain = true;
         this._raiseBoundsChanged();
     },
 
+    /**
+     * @fires OpenSeadragon.TiledImage.event:bounds-changed
+     */
+    setWidth: function(width) {
+        if (this._worldWidth === width) {
+            return;
+        }
+
+        this._setScale(width);
+        this.updateAgain = true;
+        this._raiseBoundsChanged();
+    },
+
+    /**
+     * @fires OpenSeadragon.TiledImage.event:bounds-changed
+     */
+    setHeight: function(height) {
+        if (this._worldHeight === height) {
+            return;
+        }
+
+        this._setScale(height / this.normHeight);
+        this.updateAgain = true;
+        this._raiseBoundsChanged();
+    },
+
+    _setScale: function(scale) {
+        this._scale = scale;
+        this._worldWidth = this._scale;
+        this._worldHeight = this.normHeight * this._scale;
+    },
+
     _raiseBoundsChanged: function() {
         /**
          * Raised when the TiledImage's bounds are changed.

src/world.js

@@ -252,26 +252,43 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
     layout: function(config) {
         var layout = config.layout || $.DEFAULT_SETTINGS.collectionLayout;
         var rows = config.rows || $.DEFAULT_SETTINGS.collectionRows;
+        var tileSize = config.tileSize || $.DEFAULT_SETTINGS.collectionTileSize;
+        var tileMargin = config.tileMargin || $.DEFAULT_SETTINGS.collectionTileMargin;
+        var increment = tileSize + tileMargin;
         var wrap = Math.ceil(this._items.length / rows);
         var x = 0;
         var y = 0;
+        var item, box, width, height, position;
         for (var i = 0; i < this._items.length; i++) {
             if (i && (i % wrap) === 0) {
                 if (layout === 'horizontal') {
-                    y += 1;
+                    y += increment;
                     x = 0;
                 } else {
-                    x += 1;
+                    x += increment;
                     y = 0;
                 }
             }
 
-            this._items[i].setPosition(new $.Point(x, y));
+            item = this._items[i];
+            box = item.getWorldBounds();
+            if (box.width > box.height) {
+                width = tileSize;
+            } else {
+                width = tileSize * (box.width / box.height);
+            }
+
+            height = width * (box.height / box.width);
+            position = new $.Point(x + ((tileSize - width) / 2),
+                y + ((tileSize - height) / 2));
+
+            item.setPosition(position);
+            item.setWidth(width);
 
             if (layout === 'horizontal') {
-                x += 1;
+                x += increment;
             } else {
-                y += 1;
+                y += increment;
             }
         }
     },

test/demo/collections/main.js

@@ -19,6 +19,8 @@
                 collectionMode: true,
                 collectionRows: 3,
                 collectionLayout: 'vertical',
+                // collectionTileSize: 10,
+                // collectionTileMargin: 10,
                 // wrapHorizontal: true,
                 // wrapVertical: true,
                 id: "contentDiv",
@@ -195,8 +197,16 @@
         // ----------
         collectionTest: function() {
             var tileSources = [];
+            var random;
             for (var i = 0; i < 10; i++) {
-                tileSources.push('../../data/testpattern.dzi');
+                random = Math.random();
+                if (random < 0.33) {
+                    tileSources.push('../../data/testpattern.dzi');
+                } else if (random < 0.66) {
+                    tileSources.push('../../data/tall.dzi');
+                } else {
+                    tileSources.push('../../data/wide.dzi');
+                }
             }
 
             this.viewer.open(tileSources);