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

Merge pull request #2537 from pearcetm/fix-tile-loading

Browse Source 
Fix sorting logic for best tiles to load
This commit is contained in:
Ian Gilman 2024-06-04 09:25:12 -07:00 committed by GitHub
commit 3f5735be67
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/tiledimage.js
View File

@ -72,8 +72,8 @@
* @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.iOSDevice] - See {@link OpenSeadragon.Options}.
* @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw. * @param {Number} [options.opacity=1] - Set to draw at proportional opacity. If zero, images will not draw.
* @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity. * @param {Boolean} [options.preload=false] - Set true to load even when the image is hidden by zero opacity.
* @param {String} [options.compositeOperation] - How the image is composited onto other images; see compositeOperation in {@link OpenSeadragon.Options} for possible * @param {String} [options.compositeOperation] - How the image is composited onto other images;
values. * see compositeOperation in {@link OpenSeadragon.Options} for possible values.
* @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}.
* @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}.
* @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}.
@ -1312,10 +1312,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
// returns boolean flag of whether the image should be marked as fully loaded // returns boolean flag of whether the image should be marked as fully loaded
_updateLevelsForViewport: function(){ _updateLevelsForViewport: function(){
var levelsInterval = this._getLevelsInterval(); var levelsInterval = this._getLevelsInterval();
var lowestLevel = levelsInterval.lowestLevel; var lowestLevel = levelsInterval.lowestLevel; // the lowest level we should draw at our current zoom
var highestLevel = levelsInterval.highestLevel; var highestLevel = levelsInterval.highestLevel; // the highest level we should draw at our current zoom
var bestTiles = []; var bestTiles = [];
var haveDrawn = false;
var drawArea = this.getDrawArea(); var drawArea = this.getDrawArea();
var currentTime = $.now(); var currentTime = $.now();
@ -1339,6 +1338,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){
levelList[i] = level; levelList[i] = level;
} }
// if a single-tile level is loaded, add that to the end of the list // if a single-tile level is loaded, add that to the end of the list
// as a fallback to use during zooming out, until a lower-res tile is // as a fallback to use during zooming out, until a lower-res tile is
// loaded // loaded
@ -1350,32 +1350,32 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
); );
if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){
levelList.push(level); levelList.push(level);
levelList.hasHigherResolutionFallback = true;
break; break;
} }
} }
// Update any level that will be drawn // Update any level that will be drawn.
// We are iterating from highest resolution to lowest resolution
// Once a level fully covers the viewport the loop is halted and
// lower-resolution levels are skipped
let useLevel = false;
for (let i = 0; i < levelList.length; i++) { for (let i = 0; i < levelList.length; i++) {
let level = levelList[i]; let level = levelList[i];
var drawLevel = false;
//Avoid calculations for draw if we have already drawn this
var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate(
this.source.getPixelRatio(level), this.source.getPixelRatio(level),
true true
).x * this._scaleSpring.current.value; ).x * this._scaleSpring.current.value;
if (i === levelList.length - 1 || // make sure we skip levels until currentRenderPixelRatio becomes >= minPixelRatio
(!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio) ) { // but always use the last level in the list so we draw something
drawLevel = true; if (i === levelList.length - 1 || currentRenderPixelRatio >= this.minPixelRatio ) {
haveDrawn = true; useLevel = true;
} else if (!haveDrawn) { } else if (!useLevel) {
continue; continue;
} }
//Perform calculations for draw if we haven't drawn this
var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate(
this.source.getPixelRatio(level), this.source.getPixelRatio(level),
false false
@ -1398,10 +1398,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
); );
// Update the level and keep track of 'best' tiles to load // Update the level and keep track of 'best' tiles to load
// the bestTiles
var result = this._updateLevel( var result = this._updateLevel(
haveDrawn,
drawLevel,
level, level,
levelOpacity, levelOpacity,
levelVisibility, levelVisibility,
@ -1558,8 +1555,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
/** /**
* Updates all tiles at a given resolution level. * Updates all tiles at a given resolution level.
* @private * @private
* @param {Boolean} haveDrawn
* @param {Boolean} drawLevel
* @param {Number} level * @param {Number} level
* @param {Number} levelOpacity * @param {Number} levelOpacity
* @param {Number} levelVisibility * @param {Number} levelVisibility
@ -1568,7 +1563,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @param {OpenSeadragon.Tile[]} best Array of the current best tiles * @param {OpenSeadragon.Tile[]} best Array of the current best tiles
* @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile - the current "best" tiles to draw, updatedTiles: OpenSeadragon.Tile) - the updated tiles}. * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile - the current "best" tiles to draw, updatedTiles: OpenSeadragon.Tile) - the updated tiles}.
*/ */
_updateLevel: function(haveDrawn, drawLevel, level, levelOpacity, _updateLevel: function(level, levelOpacity,
levelVisibility, drawArea, currentTime, best) { levelVisibility, drawArea, currentTime, best) {
var topLeftBound = drawArea.getBoundingBox().getTopLeft(); var topLeftBound = drawArea.getBoundingBox().getTopLeft();
@ -1583,7 +1578,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
* @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn. * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn.
* @property {Object} havedrawn * @property {Object} havedrawn - deprecated, always true (kept for backwards compatibility)
* @property {Object} level * @property {Object} level
* @property {Object} opacity * @property {Object} opacity
* @property {Object} visibility * @property {Object} visibility
@ -1596,7 +1591,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
*/ */
this.viewer.raiseEvent('update-level', { this.viewer.raiseEvent('update-level', {
tiledImage: this, tiledImage: this,
havedrawn: haveDrawn, havedrawn: true, // deprecated, kept for backwards compatibility
level: level, level: level,
opacity: levelOpacity, opacity: levelOpacity,
visibility: levelVisibility, visibility: levelVisibility,
@ -1651,8 +1646,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
} }
var result = this._updateTile( var result = this._updateTile(
drawLevel,
haveDrawn,
flippedX, y, flippedX, y,
level, level,
levelVisibility, levelVisibility,
@ -1729,8 +1722,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
/** /**
* Update a single tile at a particular resolution level. * Update a single tile at a particular resolution level.
* @private * @private
* @param {Boolean} haveDrawn
* @param {Boolean} drawLevel
* @param {Number} x * @param {Number} x
* @param {Number} y * @param {Number} y
* @param {Number} level * @param {Number} level
@ -1741,7 +1732,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @param {OpenSeadragon.Tile} best - The current "best" tile to draw. * @param {OpenSeadragon.Tile} best - The current "best" tile to draw.
* @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile[] - the current best tiles, tile: OpenSeadragon.Tile the current tile} * @returns {Object} Dictionary {bestTiles: OpenSeadragon.Tile[] - the current best tiles, tile: OpenSeadragon.Tile the current tile}
*/ */
_updateTile: function( haveDrawn, drawLevel, x, y, level, _updateTile: function( x, y, level,
levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ levelVisibility, viewportCenter, numberOfTiles, currentTime, best){
var tile = this._getTile( var tile = this._getTile(
@ -1749,8 +1740,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
level, level,
currentTime, currentTime,
numberOfTiles numberOfTiles
), );
drawTile = drawLevel;
if( this.viewer ){ if( this.viewer ){
/** /**
@ -1784,20 +1774,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if (tile.loaded && tile.opacity === 1){ if (tile.loaded && tile.opacity === 1){
this._setCoverage( this.coverage, level, x, y, true ); this._setCoverage( this.coverage, level, x, y, true );
} }
if ( haveDrawn && !drawTile ) {
if ( this._isCovered( this.coverage, level, x, y ) ) {
this._setCoverage( this.coverage, level, x, y, true );
} else {
drawTile = true;
}
}
if ( !drawTile ) {
return {
bestTiles: best,
tile: tile
};
}
this._positionTile( this._positionTile(
tile, tile,
@ -2183,9 +2159,11 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return -1; return -1;
} }
if (a.visibility === b.visibility) { if (a.visibility === b.visibility) {
// sort by smallest squared distance
return (a.squaredDistance - b.squaredDistance); return (a.squaredDistance - b.squaredDistance);
} else { } else {
return (a.visibility - b.visibility); // sort by largest visibility value
return (b.visibility - a.visibility);
} }
}); });
}, },