mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 05:06:09 +03:00
Code Issues Projects Releases Wiki Activity

tiledImage bounds animation now works

Browse Source
This commit is contained in:
Ian Gilman 2014-12-02 11:44:02 -08:00
parent 4e788473b0
commit 6a7f56d858
12 changed files with 159 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.txt
View File

@ -15,10 +15,10 @@ OPENSEADRAGON CHANGELOG
* DEPRECATION: use World.getItemCount instead of Viewer.getLayersCount * DEPRECATION: use World.getItemCount instead of Viewer.getLayersCount
* DEPRECATION: use World.setItemIndex instead of Viewer.setLayerLevel * DEPRECATION: use World.setItemIndex instead of Viewer.setLayerLevel
* DEPRECATION: use World.removeItem instead of Viewer.removeLayer * DEPRECATION: use World.removeItem instead of Viewer.removeLayer
* DEPRECATION: use World.needsUpdate instead of Drawer.needsUpdate * DEPRECATION: use World.needsDraw instead of Drawer.needsUpdate
* DEPRECATION: use TileCache.numTilesLoaded instead of Drawer.numTilesLoaded * DEPRECATION: use TileCache.numTilesLoaded instead of Drawer.numTilesLoaded
* DEPRECATION: use World.resetItems instead of Drawer.reset * DEPRECATION: use World.resetItems instead of Drawer.reset
* DEPRECATION: use Drawer.clear and World.update instead of Drawer.update * DEPRECATION: use Drawer.clear and World.draw instead of Drawer.update
* DEPRECATION: the layersAspectRatioEpsilon option is no longer necessary * DEPRECATION: the layersAspectRatioEpsilon option is no longer necessary
* DEPRECATION: Viewer's add-layer event is now World's add-item event * 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-change event * DEPRECATION: Viewer's layer-level-changed event is now World's item-index-change event

8
src/drawer.js
View File

@ -168,8 +168,8 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
// deprecated // deprecated
needsUpdate: function() { needsUpdate: function() {
$.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsUpdate instead." ); $.console.error( "[Drawer.needsUpdate] this function is deprecated. Use World.needsDraw instead." );
return this.viewer.world.needsUpdate(); return this.viewer.world.needsDraw();
}, },
// deprecated // deprecated
@ -187,9 +187,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
// deprecated // deprecated
update: function() { update: function() {
$.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.update instead." ); $.console.error( "[Drawer.update] this function is deprecated. Use Drawer.clear and World.draw instead." );
this.clear(); this.clear();
this.viewer.world.update(); this.viewer.world.draw();
return this; return this;
}, },

3
src/navigator.js
View File

@ -290,7 +290,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
); );
this.viewport.fitBounds( newBounds, true ); this.viewport.fitBounds( newBounds, true );
this.oldContainerSize = containerSize; this.oldContainerSize = containerSize;
this.drawer.update(); this.drawer.clear();
this.world.draw();
} }
} }
}, },

152
src/tiledimage.js
View File

@ -52,6 +52,8 @@
* @param {Number} [options.y=0] - Top position, in viewport coordinates. * @param {Number} [options.y=0] - Top position, in viewport coordinates.
* @param {Number} [options.width=1] - Width, in viewport coordinates. * @param {Number} [options.width=1] - Width, in viewport coordinates.
* @param {Number} [options.height] - Height, in viewport coordinates. * @param {Number} [options.height] - Height, in viewport coordinates.
* @param {Number} [options.springStiffness] - See {@link OpenSeadragon.Options}.
* @param {Boolean} [options.animationTime] - See {@link OpenSeadragon.Options}.
* @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}. * @param {Number} [options.minZoomImageRatio] - See {@link OpenSeadragon.Options}.
* @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.wrapHorizontal] - See {@link OpenSeadragon.Options}.
* @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.wrapVertical] - See {@link OpenSeadragon.Options}.
@ -113,8 +115,8 @@ $.TiledImage = function( options ) {
coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean. coverage: {}, // A '3d' dictionary [level][x][y] --> Boolean.
lastDrawn: [], // An unordered list of Tiles drawn last frame. lastDrawn: [], // An unordered list of Tiles drawn last frame.
lastResetTime: 0, // Last time for which the tiledImage was reset. lastResetTime: 0, // Last time for which the tiledImage was reset.
midUpdate: false, // Is the tiledImage currently updating the viewport? _midDraw: false, // Is the tiledImage currently updating the viewport?
updateAgain: true, // Does the tiledImage need to update the viewport again? _needsDraw: true, // Does the tiledImage need to update the viewport again?
//configurable settings //configurable settings
springStiffness: $.DEFAULT_SETTINGS.springStiffness, springStiffness: $.DEFAULT_SETTINGS.springStiffness,
@ -176,11 +178,10 @@ $.TiledImage = function( options ) {
$.extend($.TiledImage.prototype, $.EventSource.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 * @returns {Boolean} Whether the TiledImage needs to be drawn.
* soonest possible opportunity.
*/ */
needsUpdate: function() { needsDraw: function() {
return this.updateAgain; return this._needsDraw;
}, },
/** /**
@ -190,16 +191,38 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
reset: function() { reset: function() {
this._tileCache.clearTilesFor(this); this._tileCache.clearTilesFor(this);
this.lastResetTime = $.now(); this.lastResetTime = $.now();
this.updateAgain = true; this._needsDraw = true;
}, },
/** /**
* Forces the TiledImage to update. * Updates the TiledImage's bounds, animating if needed.
* @returns {Boolean} Whether the TiledImage animated.
*/ */
update: function() { update: function() {
this.midUpdate = true; var oldX = this._xSpring.current.value;
var oldY = this._ySpring.current.value;
var oldScale = this._scaleSpring.current.value;
this._xSpring.update();
this._ySpring.update();
this._scaleSpring.update();
if (this._xSpring.current.value !== oldX || this._ySpring.current.value !== oldY ||
this._scaleSpring.current.value !== oldScale) {
this._needsDraw = true;
return true;
}
return false;
},
/**
* Draws the TiledImage to its Drawer.
*/
draw: function() {
this._midDraw = true;
updateViewport( this ); updateViewport( this );
this.midUpdate = false; this._midDraw = false;
}, },
/** /**
@ -374,9 +397,12 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @fires OpenSeadragon.TiledImage.event:bounds-change * @fires OpenSeadragon.TiledImage.event:bounds-change
*/ */
setPosition: function(position, immediately) { setPosition: function(position, immediately) {
var sameTarget = (this._xSpring.target.value === position.x &&
this._ySpring.target.value === position.y);
if (immediately) { if (immediately) {
if (this._xSpring.target.value === position.x && this._ySpring.target.value === position.y && if (sameTarget && this._xSpring.current.value === position.x &&
this._xSpring.current.value === position.x && this._ySpring.current.value === position.y) { this._ySpring.current.value === position.y) {
return; return;
} }
@ -384,9 +410,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
this._ySpring.resetTo(position.y); this._ySpring.resetTo(position.y);
this._xSpring.update(); this._xSpring.update();
this._ySpring.update(); this._ySpring.update();
this.updateAgain = true;
} else { } else {
if (this._xSpring.target.value === position.x && this._ySpring.target.value === position.y) { if (sameTarget) {
return; return;
} }
@ -394,7 +419,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
this._ySpring.springTo(position.y); this._ySpring.springTo(position.y);
} }
if (!sameTarget) {
this._raiseBoundsChange(); this._raiseBoundsChange();
}
}, },
/** /**
@ -404,25 +431,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @fires OpenSeadragon.TiledImage.event:bounds-change * @fires OpenSeadragon.TiledImage.event:bounds-change
*/ */
setWidth: function(width, immediately) { setWidth: function(width, immediately) {
if (immediately) { this._setScale(width, immediately);
if (this._worldWidthTarget === width && this._worldWidthCurrent === width) {
return;
}
this._scaleSpring.resetTo(width);
this._scaleSpring.update();
this._updateForScale();
this.updateAgain = true;
} else {
if (this._worldWidthTarget === width) {
return;
}
this._scaleSpring.springTo(width);
this._updateForScale();
}
this._raiseBoundsChange();
}, },
/** /**
@ -432,18 +441,22 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @fires OpenSeadragon.TiledImage.event:bounds-change * @fires OpenSeadragon.TiledImage.event:bounds-change
*/ */
setHeight: function(height, immediately) { setHeight: function(height, immediately) {
var scale = height / this.normHeight; this._setScale(height / this.normHeight, immediately);
},
// private
_setScale: function(scale, immediately) {
var sameTarget = (this._scaleSpring.target.value === scale);
if (immediately) { if (immediately) {
if (this._worldHeightTarget === height && this._worldHeightCurrent === height) { if (sameTarget && this._scaleSpring.current.value === scale) {
return; return;
} }
this._scaleSpring.resetTo(scale); this._scaleSpring.resetTo(scale);
this._scaleSpring.update(); this._scaleSpring.update();
this._updateForScale(); this._updateForScale();
this.updateAgain = true;
} else { } else {
if (this._worldHeightTarget === height) { if (sameTarget) {
return; return;
} }
@ -451,28 +464,25 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
this._updateForScale(); this._updateForScale();
} }
if (!sameTarget) {
this._raiseBoundsChange(); this._raiseBoundsChange();
}, }
// private
_setScale: function(scale) {
this._scale = scale;
this._worldWidth = this._scale;
this._worldHeight = this.normHeight * this._scale;
}, },
// private // private
_updateForScale: function() { _updateForScale: function() {
this._worldWidthTarget = this._scale.target.value; this._worldWidthTarget = this._scaleSpring.target.value;
this._worldHeightTarget = this.normHeight * this._scale.target.value; this._worldHeightTarget = this.normHeight * this._scaleSpring.target.value;
this._worldWidthCurrent = this._scale.current.value; this._worldWidthCurrent = this._scaleSpring.current.value;
this._worldHeightCurrent = this.normHeight * this._scale.current.value; this._worldHeightCurrent = this.normHeight * this._scaleSpring.current.value;
}, },
// private // private
_raiseBoundsChange: function() { _raiseBoundsChange: function() {
/** /**
* Raised when the TiledImage's bounds are changed. * Raised when the TiledImage's bounds are changed.
* Note that this event is triggered only when the animation target is changed;
* not for every frame of animation.
* @event bounds-change * @event bounds-change
* @memberOf OpenSeadragon.TiledImage * @memberOf OpenSeadragon.TiledImage
* @type {object} * @type {object}
@ -492,7 +502,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
*/ */
function updateViewport( tiledImage ) { function updateViewport( tiledImage ) {
tiledImage.updateAgain = false; tiledImage._needsDraw = false;
var tile, var tile,
level, level,
@ -503,7 +513,7 @@ function updateViewport( tiledImage ) {
zeroRatioC = tiledImage.viewport.deltaPixelsFromPoints( zeroRatioC = tiledImage.viewport.deltaPixelsFromPoints(
tiledImage.source.getPixelRatio( 0 ), tiledImage.source.getPixelRatio( 0 ),
true true
).x * tiledImage._scale, ).x * tiledImage._scaleSpring.current.value,
lowestLevel = Math.max( lowestLevel = Math.max(
tiledImage.source.minLevel, tiledImage.source.minLevel,
Math.floor( Math.floor(
@ -551,23 +561,23 @@ function updateViewport( tiledImage ) {
var viewportBR = viewportBounds.getBottomRight(); var viewportBR = viewportBounds.getBottomRight();
//Don't draw if completely outside of the viewport //Don't draw if completely outside of the viewport
if ( !tiledImage.wrapHorizontal && (viewportBR.x < 0 || viewportTL.x > tiledImage._worldWidth ) ) { if ( !tiledImage.wrapHorizontal && (viewportBR.x < 0 || viewportTL.x > tiledImage._worldWidthCurrent ) ) {
return; return;
} }
if ( !tiledImage.wrapVertical && ( viewportBR.y < 0 || viewportTL.y > tiledImage._worldHeight ) ) { if ( !tiledImage.wrapVertical && ( viewportBR.y < 0 || viewportTL.y > tiledImage._worldHeightCurrent ) ) {
return; return;
} }
// Calculate viewport rect / bounds // Calculate viewport rect / bounds
if ( !tiledImage.wrapHorizontal ) { if ( !tiledImage.wrapHorizontal ) {
viewportTL.x = Math.max( viewportTL.x, 0 ); viewportTL.x = Math.max( viewportTL.x, 0 );
viewportBR.x = Math.min( viewportBR.x, tiledImage._worldWidth ); viewportBR.x = Math.min( viewportBR.x, tiledImage._worldWidthCurrent );
} }
if ( !tiledImage.wrapVertical ) { if ( !tiledImage.wrapVertical ) {
viewportTL.y = Math.max( viewportTL.y, 0 ); viewportTL.y = Math.max( viewportTL.y, 0 );
viewportBR.y = Math.min( viewportBR.y, tiledImage._worldHeight ); viewportBR.y = Math.min( viewportBR.y, tiledImage._worldHeightCurrent );
} }
// Calculations for the interval of levels to draw // Calculations for the interval of levels to draw
@ -584,7 +594,7 @@ function updateViewport( tiledImage ) {
renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPoints( renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPoints(
tiledImage.source.getPixelRatio( level ), tiledImage.source.getPixelRatio( level ),
true true
).x * tiledImage._scale; ).x * tiledImage._scaleSpring.current.value;
if ( ( !haveDrawn && renderPixelRatioC >= tiledImage.minPixelRatio ) || if ( ( !haveDrawn && renderPixelRatioC >= tiledImage.minPixelRatio ) ||
( level == lowestLevel ) ) { ( level == lowestLevel ) ) {
@ -598,7 +608,7 @@ function updateViewport( tiledImage ) {
renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPoints( renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPoints(
tiledImage.source.getPixelRatio( level ), tiledImage.source.getPixelRatio( level ),
false false
).x * tiledImage._scale; ).x * tiledImage._scaleSpring.current.value;
zeroRatioT = tiledImage.viewport.deltaPixelsFromPoints( zeroRatioT = tiledImage.viewport.deltaPixelsFromPoints(
tiledImage.source.getPixelRatio( tiledImage.source.getPixelRatio(
@ -608,7 +618,7 @@ function updateViewport( tiledImage ) {
) )
), ),
false false
).x * tiledImage._scale; ).x * tiledImage._scaleSpring.current.value;
optimalRatio = tiledImage.immediateRender ? optimalRatio = tiledImage.immediateRender ?
1 : 1 :
@ -648,7 +658,7 @@ function updateViewport( tiledImage ) {
if ( best ) { if ( best ) {
loadTile( tiledImage, best, currentTime ); loadTile( tiledImage, best, currentTime );
// because we haven't finished drawing, so // because we haven't finished drawing, so
tiledImage.updateAgain = true; tiledImage._needsDraw = true;
} }
} }
@ -696,8 +706,8 @@ function updateLevel( tiledImage, haveDrawn, drawLevel, level, levelOpacity, lev
} }
//OK, a new drawing so do your calculations //OK, a new drawing so do your calculations
tileTL = tiledImage.source.getTileAtPoint( level, viewportTL.divide( tiledImage._scale )); tileTL = tiledImage.source.getTileAtPoint( level, viewportTL.divide( tiledImage._scaleSpring.current.value ));
tileBR = tiledImage.source.getTileAtPoint( level, viewportBR.divide( tiledImage._scale )); tileBR = tiledImage.source.getTileAtPoint( level, viewportBR.divide( tiledImage._scaleSpring.current.value ));
numberOfTiles = tiledImage.source.getNumTiles( level ); numberOfTiles = tiledImage.source.getNumTiles( level );
resetCoverage( tiledImage.coverage, level ); resetCoverage( tiledImage.coverage, level );
@ -741,8 +751,8 @@ function updateTile( tiledImage, drawLevel, haveDrawn, x, y, level, levelOpacity
tiledImage.tilesMatrix, tiledImage.tilesMatrix,
currentTime, currentTime,
numberOfTiles, numberOfTiles,
tiledImage._worldWidth, tiledImage._worldWidthCurrent,
tiledImage._worldHeight tiledImage._worldHeightCurrent
), ),
drawTile = drawLevel; drawTile = drawLevel;
@ -805,7 +815,7 @@ function updateTile( tiledImage, drawLevel, haveDrawn, x, y, level, levelOpacity
} }
if ( tile.loaded ) { if ( tile.loaded ) {
var needsUpdate = blendTile( var needsDraw = blendTile(
tiledImage, tiledImage,
tile, tile,
x, y, x, y,
@ -814,8 +824,8 @@ function updateTile( tiledImage, drawLevel, haveDrawn, x, y, level, levelOpacity
currentTime currentTime
); );
if ( needsUpdate ) { if ( needsDraw ) {
tiledImage.updateAgain = true; tiledImage._needsDraw = true;
} }
} else if ( tile.loading ) { } else if ( tile.loading ) {
// the tile is already in the download queue // the tile is already in the download queue
@ -908,29 +918,29 @@ function onTileLoad( tiledImage, tile, time, image ) {
// Check if we're mid-update; this can happen on IE8 because image load events for // Check if we're mid-update; this can happen on IE8 because image load events for
// cached images happen immediately there // cached images happen immediately there
if ( !tiledImage.midUpdate ) { if ( !tiledImage._midDraw ) {
finish(); finish();
} else { } else {
// Wait until after the update, in case caching unloads any tiles // Wait until after the update, in case caching unloads any tiles
window.setTimeout( finish, 1); window.setTimeout( finish, 1);
} }
tiledImage.updateAgain = true; tiledImage._needsDraw = true;
} }
function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, tiledImage ){ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, tiledImage ){
var boundsTL = tile.bounds.getTopLeft(); var boundsTL = tile.bounds.getTopLeft();
boundsTL.x *= tiledImage._scale; boundsTL.x *= tiledImage._scaleSpring.current.value;
boundsTL.y *= tiledImage._scale; boundsTL.y *= tiledImage._scaleSpring.current.value;
boundsTL.x += tiledImage._xSpring.current.value; boundsTL.x += tiledImage._xSpring.current.value;
boundsTL.y += tiledImage._ySpring.current.value; boundsTL.y += tiledImage._ySpring.current.value;
var boundsSize = tile.bounds.getSize(); var boundsSize = tile.bounds.getSize();
boundsSize.x *= tiledImage._scale; boundsSize.x *= tiledImage._scaleSpring.current.value;
boundsSize.y *= tiledImage._scale; boundsSize.y *= tiledImage._scaleSpring.current.value;
var positionC = viewport.pixelFromPoint( boundsTL, true ), var positionC = viewport.pixelFromPoint( boundsTL, true ),
positionT = viewport.pixelFromPoint( boundsTL, false ), positionT = viewport.pixelFromPoint( boundsTL, false ),

15
src/viewer.js
View File

@ -1337,7 +1337,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
y: queueItem.options.y, y: queueItem.options.y,
width: queueItem.options.width, width: queueItem.options.width,
height: queueItem.options.height, height: queueItem.options.height,
imageLoaderLimit: _this.imageLoaderLimit, springStiffness: _this.springStiffness,
animationTime: _this.animationTime,
minZoomImageRatio: _this.minZoomImageRatio, minZoomImageRatio: _this.minZoomImageRatio,
wrapHorizontal: _this.wrapHorizontal, wrapHorizontal: _this.wrapHorizontal,
wrapVertical: _this.wrapVertical, wrapVertical: _this.wrapVertical,
@ -1345,8 +1346,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
blendTime: _this.blendTime, blendTime: _this.blendTime,
alwaysBlend: _this.alwaysBlend, alwaysBlend: _this.alwaysBlend,
minPixelRatio: _this.minPixelRatio, minPixelRatio: _this.minPixelRatio,
debugMode: _this.debugMode, debugMode: _this.debugMode
debugGridColor: _this.debugGridColor
}); });
_this.world.addItem( tiledImage, { _this.world.addItem( tiledImage, {
@ -2659,6 +2659,7 @@ function updateOnce( viewer ) {
} }
animated = viewer.viewport.update(); animated = viewer.viewport.update();
animated = viewer.world.update() || animated;
if( viewer.referenceStrip ){ if( viewer.referenceStrip ){
animated = viewer.referenceStrip.update( viewer.viewport ) || animated; animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
@ -2678,8 +2679,8 @@ function updateOnce( viewer ) {
abortControlsAutoHide( viewer ); abortControlsAutoHide( viewer );
} }
if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsUpdate() ) { if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsDraw() ) {
updateWorld( viewer ); drawWorld( viewer );
viewer._drawOverlays(); viewer._drawOverlays();
if( viewer.navigator ){ if( viewer.navigator ){
viewer.navigator.update( viewer.viewport ); viewer.navigator.update( viewer.viewport );
@ -2750,9 +2751,9 @@ function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter
viewport.fitBounds( newBounds, true ); viewport.fitBounds( newBounds, true );
} }
function updateWorld( viewer ) { function drawWorld( viewer ) {
viewer.drawer.clear(); viewer.drawer.clear();
viewer.world.update(); viewer.world.draw();
/** /**
* <em>- Needs documentation -</em> * <em>- Needs documentation -</em>

40
src/world.js
View File

@ -51,7 +51,7 @@ $.World = function( options ) {
this.viewer = options.viewer; this.viewer = options.viewer;
this._items = []; this._items = [];
this._needsUpdate = false; this._needsDraw = false;
this._delegatedFigureSizes = function(event) { this._delegatedFigureSizes = function(event) {
_this._figureSizes(); _this._figureSizes();
}; };
@ -80,7 +80,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
} }
this._figureSizes(); this._figureSizes();
this._needsUpdate = true; this._needsDraw = true;
item.addHandler('bounds-change', this._delegatedFigureSizes); item.addHandler('bounds-change', this._delegatedFigureSizes);
@ -147,7 +147,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
this._items.splice( oldIndex, 1 ); this._items.splice( oldIndex, 1 );
this._items.splice( index, 0, item ); this._items.splice( index, 0, item );
this._needsUpdate = true; this._needsDraw = true;
/** /**
* Raised when the order of the indexes has been changed. * Raised when the order of the indexes has been changed.
@ -185,7 +185,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
item.removeHandler('bounds-change', this._delegatedFigureSizes); item.removeHandler('bounds-change', this._delegatedFigureSizes);
this._items.splice( index, 1 ); this._items.splice( index, 1 );
this._figureSizes(); this._figureSizes();
this._needsUpdate = true; this._needsDraw = true;
this._raiseRemoveItem(item); this._raiseRemoveItem(item);
}, },
@ -204,7 +204,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
var removedItems = this._items; var removedItems = this._items;
this._items = []; this._items = [];
this._figureSizes(); this._figureSizes();
this._needsUpdate = true; this._needsDraw = true;
for (i = 0; i < removedItems.length; i++) { for (i = 0; i < removedItems.length; i++) {
item = removedItems[i]; item = removedItems[i];
@ -222,26 +222,38 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
}, },
/** /**
* Updates (i.e. draws) all items. * Updates (i.e. animates bounds of) all items.
*/ */
update: function() { update: function() {
var animated = false;
for ( var i = 0; i < this._items.length; i++ ) { for ( var i = 0; i < this._items.length; i++ ) {
this._items[i].update(); animated = this._items[i].update() || animated;
} }
this._needsUpdate = false; return animated;
},
/**
* Draws all items.
*/
draw: function() {
for ( var i = 0; i < this._items.length; i++ ) {
this._items[i].draw();
}
this._needsDraw = false;
}, },
/** /**
* @returns {Boolean} true if any items need updating. * @returns {Boolean} true if any items need updating.
*/ */
needsUpdate: function() { needsDraw: function() {
for ( var i = 0; i < this._items.length; i++ ) { for ( var i = 0; i < this._items.length; i++ ) {
if ( this._items[i].needsUpdate() ) { if ( this._items[i].needsDraw() ) {
return true; return true;
} }
} }
return this._needsUpdate; return this._needsDraw;
}, },
/** /**
@ -264,6 +276,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
/** /**
* Arranges all of the TiledImages with the specified settings. * Arranges all of the TiledImages with the specified settings.
* @param {Object} options - Specifies how to arrange. * @param {Object} options - Specifies how to arrange.
* @param {Boolean} [options.immediately=false] - Whether to animate to the new arrangement.
* @param {String} [options.layout] - See collectionLayout in {@link OpenSeadragon.Options}. * @param {String} [options.layout] - See collectionLayout in {@link OpenSeadragon.Options}.
* @param {Number} [options.rows] - See collectionRows 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.tileSize] - See collectionTileSize in {@link OpenSeadragon.Options}.
@ -272,6 +285,7 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
*/ */
arrange: function(options) { arrange: function(options) {
options = options || {}; options = options || {};
var immediately = options.immediately || false;
var layout = options.layout || $.DEFAULT_SETTINGS.collectionLayout; var layout = options.layout || $.DEFAULT_SETTINGS.collectionLayout;
var rows = options.rows || $.DEFAULT_SETTINGS.collectionRows; var rows = options.rows || $.DEFAULT_SETTINGS.collectionRows;
var tileSize = options.tileSize || $.DEFAULT_SETTINGS.collectionTileSize; var tileSize = options.tileSize || $.DEFAULT_SETTINGS.collectionTileSize;
@ -304,8 +318,8 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
position = new $.Point(x + ((tileSize - width) / 2), position = new $.Point(x + ((tileSize - width) / 2),
y + ((tileSize - height) / 2)); y + ((tileSize - height) / 2));
item.setPosition(position); item.setPosition(position, immediately);
item.setWidth(width); item.setWidth(width, immediately);
if (layout === 'horizontal') { if (layout === 'horizontal') {
x += increment; x += increment;

25
test/demo/collections/main.js
View File

@ -6,10 +6,10 @@
init: function() { init: function() {
var self = this; var self = this;
var testInitialOpen = true; var testInitialOpen = false;
var testOverlays = false; var testOverlays = false;
var testMargins = false; var testMargins = false;
var testNavigator = false; var testNavigator = true;
var margins; var margins;
var config = { var config = {
@ -112,10 +112,26 @@
} }
if (!testInitialOpen) { if (!testInitialOpen) {
this.collectionTest(); this.gridTest();
} }
}, },
// ----------
shrink: function(index) {
index = index || 0;
var image = this.viewer.world.getItemAt(index);
image.setWidth(image.getBounds().width * 0.3);
},
// ----------
move: function(index) {
index = index || 0;
var image = this.viewer.world.getItemAt(index);
var point = image.getBounds().getTopLeft();
point.x += image.getBounds().width * 0.3;
image.setPosition(point);
},
// ---------- // ----------
basicTest: function() { basicTest: function() {
var self = this; var self = this;
@ -124,7 +140,8 @@
}); });
this.viewer.open({ this.viewer.open({
tileSource: "../../data/testpattern.dzi" tileSource: "../../data/testpattern.dzi",
width: 1
}); });
}, },

4
test/modules/drawer.js
View File

@ -74,10 +74,10 @@
Util.testDeprecation(viewer.drawer, 'updateOverlay', viewer, 'updateOverlay'); Util.testDeprecation(viewer.drawer, 'updateOverlay', viewer, 'updateOverlay');
Util.testDeprecation(viewer.drawer, 'removeOverlay', viewer, 'removeOverlay'); Util.testDeprecation(viewer.drawer, 'removeOverlay', viewer, 'removeOverlay');
Util.testDeprecation(viewer.drawer, 'clearOverlays', viewer, 'clearOverlays'); Util.testDeprecation(viewer.drawer, 'clearOverlays', viewer, 'clearOverlays');
Util.testDeprecation(viewer.drawer, 'needsUpdate', viewer.world, 'needsUpdate'); Util.testDeprecation(viewer.drawer, 'needsUpdate', viewer.world, 'needsDraw');
Util.testDeprecation(viewer.drawer, 'numTilesLoaded', viewer.tileCache, 'numTilesLoaded'); Util.testDeprecation(viewer.drawer, 'numTilesLoaded', viewer.tileCache, 'numTilesLoaded');
Util.testDeprecation(viewer.drawer, 'reset', viewer.world, 'resetItems'); Util.testDeprecation(viewer.drawer, 'reset', viewer.world, 'resetItems');
Util.testDeprecation(viewer.drawer, 'update', viewer.world, 'update'); Util.testDeprecation(viewer.drawer, 'update', viewer.world, 'draw');
start(); start();
}); });

4
test/modules/navigator.js
View File

@ -140,7 +140,7 @@
currentDisplayRegionLeft = displayRegion.position().left; currentDisplayRegionLeft = displayRegion.position().left;
currentDisplayWidth = displayRegion.width(); currentDisplayWidth = displayRegion.width();
viewerAndNavigatorDisplayReady = viewer.drawer !== null && viewerAndNavigatorDisplayReady = viewer.drawer !== null &&
!viewer.drawer.needsUpdate() && !viewer.world.needsDraw() &&
currentDisplayWidth > 0 && currentDisplayWidth > 0 &&
Util.equalsWithVariance(lastDisplayRegionLeft, currentDisplayRegionLeft, 0.0001) && Util.equalsWithVariance(lastDisplayRegionLeft, currentDisplayRegionLeft, 0.0001) &&
Util.equalsWithVariance(lastDisplayWidth, currentDisplayWidth, 0.0001) && Util.equalsWithVariance(lastDisplayWidth, currentDisplayWidth, 0.0001) &&
@ -160,7 +160,7 @@
else { else {
if (count === 40) { if (count === 40) {
console.log("waitForViewer:" + console.log("waitForViewer:" +
viewer.drawer + ":" + viewer.drawer.needsUpdate() + ":" + viewer.drawer + ":" + viewer.world.needsDraw() + ":" +
viewerAndNavigatorDisplayReady + ":" + viewerAndNavigatorDisplayReady + ":" +
lastDisplayRegionLeft + ":" + currentDisplayRegionLeft + ":" + lastDisplayRegionLeft + ":" + currentDisplayRegionLeft + ":" +
lastDisplayWidth + ":" + currentDisplayWidth + ":" + lastDisplayWidth + ":" + currentDisplayWidth + ":" +

4
test/modules/overlays.js
View File

@ -29,7 +29,7 @@
} }
var ready = viewer.isOpen() && var ready = viewer.isOpen() &&
viewer.drawer !== null && viewer.drawer !== null &&
!viewer.drawer.needsUpdate() && !viewer.world.needsDraw() &&
Util.equalsWithVariance( viewer.viewport.getBounds( true ).x, Util.equalsWithVariance( viewer.viewport.getBounds( true ).x,
viewer.viewport.getBounds().x, 0.000 ) && viewer.viewport.getBounds().x, 0.000 ) &&
Util.equalsWithVariance( viewer.viewport.getBounds( true ).y, Util.equalsWithVariance( viewer.viewport.getBounds( true ).y,
@ -46,7 +46,7 @@
}, 100 ); }, 100 );
} else { } else {
console.log( "waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer + console.log( "waitForViewer:" + viewer.isOpen( ) + ":" + viewer.drawer +
":" + viewer.drawer.needsUpdate() ); ":" + viewer.world.needsDraw() );
handler(); handler();
} }
} }

4
test/modules/tiledimage.js
View File

@ -91,7 +91,7 @@
viewer.addHandler('open', function(event) { viewer.addHandler('open', function(event) {
var image = viewer.world.getItemAt(0); var image = viewer.world.getItemAt(0);
equal(image.needsUpdate(), true, 'needs update after open'); equal(image.needsDraw(), true, 'needs draw after open');
viewer.addHandler('update-level', function updateLevelHandler(event) { viewer.addHandler('update-level', function updateLevelHandler(event) {
viewer.removeHandler('update-level', updateLevelHandler); viewer.removeHandler('update-level', updateLevelHandler);
@ -137,7 +137,7 @@
start(); start();
}); });
image.update(); image.draw();
}); });
viewer.open('/test/data/testpattern.dzi'); viewer.open('/test/data/testpattern.dzi');

8
test/modules/world.js
View File

@ -144,24 +144,24 @@
}); });
// ---------- // ----------
asyncTest('update', function() { asyncTest('draw', function() {
var handlerCount = 0; var handlerCount = 0;
viewer.addHandler('open', function(event) { viewer.addHandler('open', function(event) {
equal(viewer.world.needsUpdate(), true, 'needs update after open'); equal(viewer.world.needsDraw(), true, 'needs draw after open');
viewer.addHandler('update-level', function updateHandler() { viewer.addHandler('update-level', function updateHandler() {
viewer.removeHandler('update-level', updateHandler); viewer.removeHandler('update-level', updateHandler);
handlerCount++; handlerCount++;
}); });
viewer.world.update(); viewer.world.draw();
equal(handlerCount, 1, 'correct number of handlers called'); equal(handlerCount, 1, 'correct number of handlers called');
start(); start();
}); });
equal(viewer.world.needsUpdate(), false, 'needs no update at first'); equal(viewer.world.needsDraw(), false, 'needs no draw at first');
viewer.open('/test/data/testpattern.dzi'); viewer.open('/test/data/testpattern.dzi');
}); });