mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
First steps for collection mode
This commit is contained in:
Ian Gilman
parent
673f698cc1
commit
56ddf8c9c3
@ -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;
|
||||
|
||||
@ -128,7 +131,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.
|
||||
@ -175,8 +178,30 @@ $.TiledImage.prototype = /** @lends OpenSeadragon.TiledImage.prototype */{
|
||||
*/
|
||||
getContentSize: function() {
|
||||
return new $.Point(this.source.dimensions.x, this.source.dimensions.y);
|
||||
},
|
||||
|
||||
/**
|
||||
* @fires OpenSeadragon.TiledImage.event:bounds-changed
|
||||
*/
|
||||
setPosition: function(position) {
|
||||
this._worldX = position.x;
|
||||
this._worldY = position.y;
|
||||
this.updateAgain = true;
|
||||
this._raiseBoundsChanged();
|
||||
},
|
||||
|
||||
_raiseBoundsChanged: function() {
|
||||
/**
|
||||
* Raised when the TiledImage's bounds are changed.
|
||||
* @event bounds-changed
|
||||
* @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-changed');
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* @private
|
||||
@ -794,8 +819,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) {
|
||||
|
||||
@ -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,6 +405,12 @@ $.Viewer = function( options ) {
|
||||
THIS[ _this.hash ].forceRedraw = true;
|
||||
});
|
||||
|
||||
this.world.addHandler('home-bounds-changed', function(event) {
|
||||
if (_this.viewport) {
|
||||
_this.viewport.setHomeBounds(_this.world.getHomeBounds(), _this.world.getContentFactor());
|
||||
}
|
||||
});
|
||||
|
||||
this.world.addHandler('item-index-changed', function(event) {
|
||||
// For backwards compatibility, we maintain the source property
|
||||
_this.source = _this.world.getItemAt(0).source;
|
||||
@ -1301,6 +1299,15 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
index: options.index
|
||||
});
|
||||
|
||||
if (_this.collectionMode) {
|
||||
_this.world.layout({
|
||||
rows: _this.collectionRows,
|
||||
layout: _this.collectionLayout,
|
||||
tileSize: _this.collectionTileSize,
|
||||
tileMargin: _this.collectionTileMargin
|
||||
});
|
||||
}
|
||||
|
||||
if (_this.world.getItemCount() === 1 && !_this.preserveViewport) {
|
||||
_this.viewport.goHome(true);
|
||||
}
|
||||
|
||||
55
src/world.js
55
src/world.js
@ -61,6 +61,8 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
|
||||
* @fires OpenSeadragon.World.event:add-item
|
||||
*/
|
||||
addItem: function( item, options ) {
|
||||
var _this = this;
|
||||
|
||||
$.console.assert(item, "[World.addItem] item is required");
|
||||
$.console.assert(item instanceof $.TiledImage, "[World.addItem] only TiledImages supported at this time");
|
||||
|
||||
@ -75,6 +77,11 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
|
||||
this._figureSizes();
|
||||
this._needsUpdate = true;
|
||||
|
||||
// TODO: remove handler when removing item from world
|
||||
item.addHandler('bounds-changed', function(event) {
|
||||
_this._figureSizes();
|
||||
});
|
||||
|
||||
/**
|
||||
* Raised when an item is added to the World.
|
||||
* @event add-item
|
||||
@ -242,14 +249,41 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
|
||||
return this._contentFactor;
|
||||
},
|
||||
|
||||
layout: function(config) {
|
||||
var layout = config.layout || $.DEFAULT_SETTINGS.collectionLayout;
|
||||
var rows = config.rows || $.DEFAULT_SETTINGS.collectionRows;
|
||||
var wrap = Math.ceil(this._items.length / rows);
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
for (var i = 0; i < this._items.length; i++) {
|
||||
if (i && (i % wrap) === 0) {
|
||||
if (layout === 'horizontal') {
|
||||
y += 1;
|
||||
x = 0;
|
||||
} else {
|
||||
x += 1;
|
||||
y = 0;
|
||||
}
|
||||
}
|
||||
|
||||
this._items[i].setPosition(new $.Point(x, y));
|
||||
|
||||
if (layout === 'horizontal') {
|
||||
x += 1;
|
||||
} else {
|
||||
y += 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// private
|
||||
_figureSizes: function() {
|
||||
var oldHomeBounds = this._homeBounds ? this._homeBounds.clone() : null;
|
||||
|
||||
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].getWorldBounds();
|
||||
this._contentFactor = this._items[0].getContentSize().x / bounds.width;
|
||||
var left = bounds.x;
|
||||
@ -269,12 +303,25 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
|
||||
this._homeBounds = new $.Rect( left, top, right - left, bottom - top );
|
||||
this._contentSize = new $.Point(this._homeBounds.width * this._contentFactor,
|
||||
this._homeBounds.height * this._contentFactor);
|
||||
}
|
||||
|
||||
if (!this._homeBounds.equals(oldHomeBounds)) {
|
||||
/**
|
||||
* Raised when the home bounds change.
|
||||
* @event home-bounds-changed
|
||||
* @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('home-bounds-changed');
|
||||
}
|
||||
},
|
||||
|
||||
// private
|
||||
_raiseRemoveItem: function(item) {
|
||||
/**
|
||||
* Raised when a item is removed.
|
||||
* Raised when an item is removed.
|
||||
* @event remove-item
|
||||
* @memberOf OpenSeadragon.World
|
||||
* @type {object}
|
||||
|
||||
@ -16,6 +16,9 @@
|
||||
// debugMode: true,
|
||||
zoomPerScroll: 1.02,
|
||||
showNavigator: testNavigator,
|
||||
collectionMode: true,
|
||||
collectionRows: 3,
|
||||
collectionLayout: 'vertical',
|
||||
// wrapHorizontal: true,
|
||||
// wrapVertical: true,
|
||||
id: "contentDiv",
|
||||
@ -96,7 +99,7 @@
|
||||
}
|
||||
|
||||
// this.crossTest3();
|
||||
this.basicTest();
|
||||
this.collectionTest();
|
||||
},
|
||||
|
||||
// ----------
|
||||
@ -189,6 +192,16 @@
|
||||
});
|
||||
},
|
||||
|
||||
// ----------
|
||||
collectionTest: function() {
|
||||
var tileSources = [];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
tileSources.push('../../data/testpattern.dzi');
|
||||
}
|
||||
|
||||
this.viewer.open(tileSources);
|
||||
},
|
||||
|
||||
// ----------
|
||||
gridTest: function() {
|
||||
var self = this;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user