diff --git a/changelog.txt b/changelog.txt index 7cd7b667..8b7a991c 100644 --- a/changelog.txt +++ b/changelog.txt @@ -6,6 +6,7 @@ OPENSEADRAGON CHANGELOG * True multi-image mode (#450) * BREAKING CHANGE: Navigator no longer sends an open event when its viewer opens * BREAKING CHANGE: Viewer.drawers and Viewer.drawersContainer no longer exist + * BREAKING CHANGE: A Viewer's Drawer and Viewport are now made once per Viewer and reused for every image that Viewer opens (rather than being recreated for every open); this means if you change Viewer options between opens, the behavior is different now. * DEPRECATION: use Viewer.addTiledImage instead of Viewer.addLayer * addTiledImage supports positioning config properties * DEPRECATION: use World.getItemAt instead of Viewer.getLayerAtLevel @@ -19,9 +20,11 @@ OPENSEADRAGON CHANGELOG * DEPRECATION: use Drawer.clear and World.update instead of Drawer.update * DEPRECATION: the layersAspectRatioEpsilon option is no longer necessary * DEPRECATION: Viewer's add-layer event is now World's add-item event - * DEPRECATION: Viewer's layer-level-changed event is now World's item-index-changed event + * DEPRECATION: Viewer's layer-level-changed event is now World's item-index-change event * DEPRECATION: Viewer's remove-layer event is now World's remove-item event * DEPRECATION: Viewer's add-layer-failed event is now add-item-failed + * DEPRECATION: TileSourceCollection has been retired in favor of World + * DEPRECATION: collectionMode no longer draws outlines or reflections for items * Drawer has been split into three classes: * TiledImage, tile management and positioning for a single tiled image * TileCache, tile caching for all images diff --git a/src/navigator.js b/src/navigator.js index 5f1767cc..df4b637a 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -239,7 +239,7 @@ $.Navigator = function( options ){ } }); - viewer.world.addHandler("item-index-changed", function(event) { + viewer.world.addHandler("item-index-change", function(event) { var item = _this.world.getItemAt(event.previousIndex); _this.world.setItemIndex(item, event.newIndex); }); diff --git a/src/openseadragon.js b/src/openseadragon.js index 14221847..70aeca84 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -531,12 +531,21 @@ * @property {Number} [referenceStripSizeRatio=0.2] * * @property {Boolean} [collectionMode=false] + * Set to true to have the viewer arrange your TiledImages in a grid or line. * * @property {Number} [collectionRows=3] + * 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 {String} [collectionLayout='horizontal'] + * If collectionMode is true, specifies whether to arrange vertically or horizontally. * * @property {Number} [collectionTileSize=800] + * If collectionMode is true, specifies the size, in world coordinates, for each TiledImage to fit into. + * The TiledImage will be centered within a square of the specified size. + * + * @property {Number} [collectionTileMargin=80] + * If collectionMode is true, specifies the margin, in world coordinates, between each TiledImage. * * @property {String|Boolean} [crossOriginPolicy=false] * Valid values are 'Anonymous', 'use-credentials', and false. If false, canvas requests will @@ -984,6 +993,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 cfe4a0b3..7e0ee5ee 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -39,6 +39,7 @@ * or {@link OpenSeadragon.Viewer#addTiledImage} instead. * @class TiledImage * @memberof OpenSeadragon + * @extends OpenSeadragon.EventSource * @classdesc Handles rendering of tiles for an {@link OpenSeadragon.Viewer}. * A new instance is created for each TileSource opened. * @param {Object} options - Configuration for this TiledImage. @@ -68,6 +69,8 @@ $.TiledImage = function( options ) { $.console.assert( options.imageLoader, "[TiledImage] options.imageLoader is required" ); $.console.assert( options.source, "[TiledImage] options.source is required" ); + $.EventSource.call( this ); + this._tileCache = options.tileCache; delete options.tileCache; @@ -86,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 ) { @@ -94,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 @@ -128,7 +128,7 @@ $.TiledImage = function( options ) { }, options ); }; -$.TiledImage.prototype = /** @lends OpenSeadragon.TiledImage.prototype */{ +$.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.TiledImage.prototype */{ /** * @returns {Boolean} Whether the TiledImage is scheduled for an update at the * soonest possible opportunity. @@ -166,17 +166,89 @@ $.TiledImage.prototype = /** @lends OpenSeadragon.TiledImage.prototype */{ /** * @returns {OpenSeadragon.Rect} This TiledImage's bounds in world coordinates. */ - getWorldBounds: function() { + getBounds: function() { return new $.Rect( this._worldX, this._worldY, this._worldWidth, this._worldHeight ); }, + // deprecated + getWorldBounds: function() { + $.console.error('[TiledImage.getWorldBounds] is deprecated; use TiledImage.getBounds instead'); + return this.getBounds(); + }, + /** * @returns {OpenSeadragon.Point} This TiledImage's content size, in original pixels. */ getContentSize: function() { return new $.Point(this.source.dimensions.x, this.source.dimensions.y); + }, + + /** + * Sets the TiledImage's position in the world. + * @param {OpenSeadragon.Point} position - The new position, in world coordinates. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + 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._raiseBoundsChange(); + }, + + /** + * Sets the TiledImage's width in the world, adjusting the height to match based on aspect ratio. + * @param {Number} width - The new width, in world coordinates. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setWidth: function(width) { + if (this._worldWidth === width) { + return; + } + + this._setScale(width); + this.updateAgain = true; + this._raiseBoundsChange(); + }, + + /** + * Sets the TiledImage's height in the world, adjusting the width to match based on aspect ratio. + * @param {Number} height - The new height, in world coordinates. + * @fires OpenSeadragon.TiledImage.event:bounds-change + */ + setHeight: function(height) { + if (this._worldHeight === height) { + return; + } + + this._setScale(height / this.normHeight); + this.updateAgain = true; + this._raiseBoundsChange(); + }, + + // private + _setScale: function(scale) { + this._scale = scale; + this._worldWidth = this._scale; + this._worldHeight = this.normHeight * this._scale; + }, + + // private + _raiseBoundsChange: function() { + /** + * Raised when the TiledImage's bounds are changed. + * @event bounds-change + * @memberOf OpenSeadragon.TiledImage + * @type {object} + * @property {OpenSeadragon.World} eventSource - A reference to the TiledImage which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('bounds-change'); } -}; +}); /** * @private @@ -794,8 +866,7 @@ function drawTiles( tiledImage, lastDrawn ){ viewer, viewport, position, - tileSource, - collectionTileSource; + tileSource; // We need a callback to give image manipulation a chance to happen var drawingHandler = function(args) { diff --git a/src/tilesourcecollection.js b/src/tilesourcecollection.js index 52dcbd67..a180aa52 100644 --- a/src/tilesourcecollection.js +++ b/src/tilesourcecollection.js @@ -34,110 +34,9 @@ (function( $ ){ -/** - * @class TileSourceCollection - * @memberof OpenSeadragon - * @extends OpenSeadragon.TileSource - */ +// deprecated $.TileSourceCollection = function( tileSize, tileSources, rows, layout ) { - var options; - - if( $.isPlainObject( tileSize ) ){ - options = tileSize; - }else{ - options = { - tileSize: arguments[ 0 ], - tileSources: arguments[ 1 ], - rows: arguments[ 2 ], - layout: arguments[ 3 ] - }; - } - - if( !options.layout ){ - options.layout = 'horizontal'; - } - - var minLevel = 0, - levelSize = 1.0, - tilesPerRow = Math.ceil( options.tileSources.length / options.rows ), - longSide = tilesPerRow >= options.rows ? - tilesPerRow : - options.rows; - - if( 'horizontal' == options.layout ){ - options.width = ( options.tileSize ) * tilesPerRow; - options.height = ( options.tileSize ) * options.rows; - } else { - options.height = ( options.tileSize ) * tilesPerRow; - options.width = ( options.tileSize ) * options.rows; - } - - options.tileOverlap = -options.tileMargin; - options.tilesPerRow = tilesPerRow; - - //Set min level to avoid loading sublevels since collection is a - //different kind of abstraction - - while( levelSize < ( options.tileSize ) * longSide ){ - //$.console.log( '%s levelSize %s minLevel %s', options.tileSize * longSide, levelSize, minLevel ); - levelSize = levelSize * 2.0; - minLevel++; - } - options.minLevel = minLevel; - - //for( var name in options ){ - // $.console.log( 'Collection %s %s', name, options[ name ] ); - //} - - $.TileSource.apply( this, [ options ] ); - + $.console.error('TileSourceCollection is deprecated; use World instead'); }; -$.extend( $.TileSourceCollection.prototype, $.TileSource.prototype, /** @lends OpenSeadragon.TileSourceCollection.prototype */{ - - /** - * @function - * @param {Number} level - * @param {Number} x - * @param {Number} y - */ - getTileBounds: function( level, x, y ) { - var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ), - px = this.tileSize * x - this.tileOverlap, - py = this.tileSize * y - this.tileOverlap, - sx = this.tileSize + 1 * this.tileOverlap, - sy = this.tileSize + 1 * this.tileOverlap, - scale = 1.0 / dimensionsScaled.x; - - sx = Math.min( sx, dimensionsScaled.x - px ); - sy = Math.min( sy, dimensionsScaled.y - py ); - - return new $.Rect( px * scale, py * scale, sx * scale, sy * scale ); - }, - - /** - * - * @function - */ - configure: function( data, url ){ - return; - }, - - - /** - * @function - * @param {Number} level - * @param {Number} x - * @param {Number} y - */ - getTileUrl: function( level, x, y ) { - //$.console.log([ level, '/', x, '_', y ].join( '' )); - return null; - } - - - -}); - - }( OpenSeadragon )); diff --git a/src/viewer.js b/src/viewer.js index 727cbf9d..2b2ea1f1 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -384,10 +384,6 @@ $.Viewer = function( options ) { }); this.world.addHandler('add-item', function(event) { - if (_this.viewport) { - _this.viewport.setHomeBounds(_this.world.getHomeBounds(), _this.world.getContentFactor()); - } - // For backwards compatibility, we maintain the source property _this.source = _this.world.getItemAt(0).source; @@ -399,10 +395,6 @@ $.Viewer = function( options ) { }); this.world.addHandler('remove-item', function(event) { - if (_this.viewport) { - _this.viewport.setHomeBounds(_this.world.getHomeBounds(), _this.world.getContentFactor()); - } - // For backwards compatibility, we maintain the source property if (_this.world.getItemCount()) { _this.source = _this.world.getItemAt(0).source; @@ -413,7 +405,13 @@ $.Viewer = function( options ) { THIS[ _this.hash ].forceRedraw = true; }); - this.world.addHandler('item-index-changed', function(event) { + this.world.addHandler('metrics-change', function(event) { + if (_this.viewport) { + _this.viewport.setHomeBounds(_this.world.getHomeBounds(), _this.world.getContentFactor()); + } + }); + + this.world.addHandler('item-index-change', function(event) { // For backwards compatibility, we maintain the source property _this.source = _this.world.getItemAt(0).source; }); @@ -438,6 +436,8 @@ $.Viewer = function( options ) { margins: this.viewportMargins }); + this.viewport.setHomeBounds(this.world.getHomeBounds(), this.world.getContentFactor()); + // Create the image loader this.imageLoader = new $.ImageLoader(); @@ -1301,6 +1301,15 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, index: options.index }); + if (_this.collectionMode) { + _this.world.arrange({ + rows: _this.collectionRows, + layout: _this.collectionLayout, + tileSize: _this.collectionTileSize, + tileMargin: _this.collectionTileMargin + }); + } + if (_this.world.getItemCount() === 1 && !_this.preserveViewport) { _this.viewport.goHome(true); } diff --git a/src/world.js b/src/world.js index 3e4d3924..9dc47b45 100644 --- a/src/world.js +++ b/src/world.js @@ -43,6 +43,8 @@ * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this World. **/ $.World = function( options ) { + var _this = this; + $.console.assert( options.viewer, "[World] options.viewer is required" ); $.EventSource.call( this ); @@ -50,6 +52,10 @@ $.World = function( options ) { this.viewer = options.viewer; this._items = []; this._needsUpdate = false; + this._delegatedFigureSizes = function(event) { + _this._figureSizes(); + }; + this._figureSizes(); }; @@ -59,6 +65,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W * @param {OpenSeadragon.TiledImage} item - The item to add. * @param {Number} [options.index] - Index for the item. If not specified, goes at the top. * @fires OpenSeadragon.World.event:add-item + * @fires OpenSeadragon.World.event:metrics-change */ addItem: function( item, options ) { $.console.assert(item, "[World.addItem] item is required"); @@ -75,6 +82,8 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W this._figureSizes(); this._needsUpdate = true; + item.addHandler('bounds-change', this._delegatedFigureSizes); + /** * Raised when an item is added to the World. * @event add-item @@ -120,7 +129,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W * Change the index of a item so that it appears over or under others. * @param {OpenSeadragon.TiledImage} item - The item to move. * @param {Number} index - The new index. - * @fires OpenSeadragon.World.event:item-index-changed + * @fires OpenSeadragon.World.event:item-index-change */ setItemIndex: function( item, index ) { $.console.assert(item, "[World.setItemIndex] item is required"); @@ -142,7 +151,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W /** * Raised when the order of the indexes has been changed. - * @event item-index-changed + * @event item-index-change * @memberOf OpenSeadragon.World * @type {object} * @property {OpenSeadragon.World} eventSource - A reference to the World which raised the event. @@ -152,7 +161,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W * @property {Number} newIndex - The new index of the item * @property {?Object} userData - Arbitrary subscriber-defined object. */ - this.raiseEvent( 'item-index-changed', { + this.raiseEvent( 'item-index-change', { item: item, previousIndex: oldIndex, newIndex: index @@ -163,6 +172,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W * Remove an item. * @param {OpenSeadragon.TiledImage} item - The item to remove. * @fires OpenSeadragon.World.event:remove-item + * @fires OpenSeadragon.World.event:metrics-change */ removeItem: function( item ) { $.console.assert(item, "[World.removeItem] item is required"); @@ -172,6 +182,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W return; } + item.removeHandler('bounds-change', this._delegatedFigureSizes); this._items.splice( index, 1 ); this._figureSizes(); this._needsUpdate = true; @@ -181,15 +192,23 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W /** * Remove all items. * @fires OpenSeadragon.World.event:remove-item + * @fires OpenSeadragon.World.event:metrics-change */ removeAll: function() { + var item; + for (var i = 0; i < this._items.length; i++) { + item = this._items[i]; + item.removeHandler('bounds-change', this._delegatedFigureSizes); + } + var removedItems = this._items; this._items = []; this._figureSizes(); this._needsUpdate = true; - for (var i = 0; i < removedItems.length; i++) { - this._raiseRemoveItem(removedItems[i]); + for (i = 0; i < removedItems.length; i++) { + item = removedItems[i]; + this._raiseRemoveItem(item); } }, @@ -242,39 +261,109 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W return this._contentFactor; }, + /** + * Arranges all of the TiledImages with the specified settings. + * @param {Object} options - Specifies how to arrange. + * @param {String} [options.layout] - See collectionLayout in {@link OpenSeadragon.Options}. + * @param {Number} [options.rows] - See collectionRows 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 + */ + arrange: function(options) { + options = options || {}; + var layout = options.layout || $.DEFAULT_SETTINGS.collectionLayout; + var rows = options.rows || $.DEFAULT_SETTINGS.collectionRows; + 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 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 += increment; + x = 0; + } else { + x += increment; + y = 0; + } + } + + item = this._items[i]; + box = item.getBounds(); + 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 += increment; + } else { + y += increment; + } + } + }, + // private _figureSizes: function() { + var oldHomeBounds = this._homeBounds ? this._homeBounds.clone() : null; + var oldContentSize = this._contentSize ? this._contentSize.clone() : null; + var oldContentFactor = this._contentFactor || 0; + if ( !this._items.length ) { this._homeBounds = new $.Rect(0, 0, 1, 1); this._contentSize = new $.Point(1, 1); - return; + } else { + var bounds = this._items[0].getBounds(); + this._contentFactor = this._items[0].getContentSize().x / bounds.width; + var left = bounds.x; + var top = bounds.y; + var right = bounds.x + bounds.width; + var bottom = bounds.y + bounds.height; + var box; + for ( var i = 1; i < this._items.length; i++ ) { + box = this._items[i].getBounds(); + this._contentFactor = Math.max(this._contentFactor, this._items[i].getContentSize().x / box.width); + left = Math.min( left, box.x ); + top = Math.min( top, box.y ); + right = Math.max( right, box.x + box.width ); + bottom = Math.max( bottom, box.y + box.height ); + } + + this._homeBounds = new $.Rect( left, top, right - left, bottom - top ); + this._contentSize = new $.Point(this._homeBounds.width * this._contentFactor, + this._homeBounds.height * this._contentFactor); } - var bounds = this._items[0].getWorldBounds(); - this._contentFactor = this._items[0].getContentSize().x / bounds.width; - var left = bounds.x; - var top = bounds.y; - var right = bounds.x + bounds.width; - var bottom = bounds.y + bounds.height; - var box; - for ( var i = 1; i < this._items.length; i++ ) { - box = this._items[i].getWorldBounds(); - this._contentFactor = Math.max(this._contentFactor, this._items[i].getContentSize().x / box.width); - left = Math.min( left, box.x ); - top = Math.min( top, box.y ); - right = Math.max( right, box.x + box.width ); - bottom = Math.max( bottom, box.y + box.height ); + if (this._contentFactor !== oldContentFactor || !this._homeBounds.equals(oldHomeBounds) || + !this._contentSize.equals(oldContentSize)) { + /** + * Raised when the home bounds, content size, or content factor change. + * @event metrics-change + * @memberOf OpenSeadragon.World + * @type {object} + * @property {OpenSeadragon.World} eventSource - A reference to the World which raised the event. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + this.raiseEvent('metrics-change', {}); } - - this._homeBounds = new $.Rect( left, top, right - left, bottom - top ); - this._contentSize = new $.Point(this._homeBounds.width * this._contentFactor, - this._homeBounds.height * this._contentFactor); }, // private _raiseRemoveItem: function(item) { /** - * Raised when a item is removed. + * Raised when an item is removed. * @event remove-item * @memberOf OpenSeadragon.World * @type {object} diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index 927b777f..426015b2 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -16,6 +16,11 @@ // debugMode: true, zoomPerScroll: 1.02, showNavigator: testNavigator, + collectionMode: true, + collectionRows: 3, + collectionLayout: 'vertical', + // collectionTileSize: 10, + // collectionTileMargin: 10, // wrapHorizontal: true, // wrapVertical: true, id: "contentDiv", @@ -96,7 +101,7 @@ } // this.crossTest3(); - this.basicTest(); + this.collectionTest(); }, // ---------- @@ -189,6 +194,24 @@ }); }, + // ---------- + collectionTest: function() { + var tileSources = []; + var random; + for (var i = 0; i < 10; i++) { + 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); + }, + // ---------- gridTest: function() { var self = this; diff --git a/test/multi-image.js b/test/multi-image.js index 4975b9b4..f67f5a37 100644 --- a/test/multi-image.js +++ b/test/multi-image.js @@ -63,9 +63,9 @@ equal( viewer.world.getItemAt( 2 ), item2, "The item at index 2 should be the second added item." ); - viewer.world.addHandler( "item-index-changed", + viewer.world.addHandler( "item-index-change", function itemIndexChangedHandler( event ) { - viewer.world.removeHandler( "item-index-changed", + viewer.world.removeHandler( "item-index-change", itemIndexChangedHandler ); equal( event.item, item2, "The item which changed index should be item2" );