diff --git a/src/openseadragon.js b/src/openseadragon.js index 14221847..211fd10d 100644 --- a/src/openseadragon.js +++ b/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, diff --git a/src/tiledimage.js b/src/tiledimage.js index cf55f40c..6e5e4a2a 100644 --- a/src/tiledimage.js +++ b/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. diff --git a/src/world.js b/src/world.js index 94045a49..f4b3c134 100644 --- a/src/world.js +++ b/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; } } }, diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index 7ca4d8b0..426015b2 100644 --- a/test/demo/collections/main.js +++ b/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);