diff --git a/src/tiledimage.js b/src/tiledimage.js index 0372b8be..c1562497 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -72,8 +72,8 @@ * @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 {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 - values. + * @param {String} [options.compositeOperation] - How the image is composited onto other images; + * see compositeOperation in {@link OpenSeadragon.Options} for possible values. * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}. * @param {String|CanvasGradient|CanvasPattern|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}. * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}. @@ -1081,7 +1081,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag // _tilesToDraw might have been updated by the update; refresh it tileArray = this._tilesToDraw.flat(); - // mark the tiles as being drawn, so that they won't be discarded from + // mark the tiles as being drawn, so that they won't be discarded from // the tileCache tileArray.forEach(tileInfo => { tileInfo.tile.beingDrawn = true; @@ -1312,10 +1312,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag // returns boolean flag of whether the image should be marked as fully loaded _updateLevelsForViewport: function(){ var levelsInterval = this._getLevelsInterval(); - var lowestLevel = levelsInterval.lowestLevel; - var highestLevel = levelsInterval.highestLevel; + var lowestLevel = levelsInterval.lowestLevel; // the lowest level we should draw at our current zoom + var highestLevel = levelsInterval.highestLevel; // the highest level we should draw at our current zoom var bestTiles = []; - var haveDrawn = false; var drawArea = this.getDrawArea(); var currentTime = $.now(); @@ -1339,6 +1338,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ levelList[i] = level; } + // 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 // loaded @@ -1350,32 +1350,32 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag ); if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ levelList.push(level); - levelList.hasHigherResolutionFallback = true; 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++) { let level = levelList[i]; - var drawLevel = false; - //Avoid calculations for draw if we have already drawn this var currentRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), true ).x * this._scaleSpring.current.value; - if (i === levelList.length - 1 || - (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio) ) { - drawLevel = true; - haveDrawn = true; - } else if (!haveDrawn) { + // make sure we skip levels until currentRenderPixelRatio becomes >= minPixelRatio + // but always use the last level in the list so we draw something + if (i === levelList.length - 1 || currentRenderPixelRatio >= this.minPixelRatio ) { + useLevel = true; + } else if (!useLevel) { continue; } - //Perform calculations for draw if we haven't drawn this var targetRenderPixelRatio = this.viewport.deltaPixelsFromPointsNoRotate( this.source.getPixelRatio(level), false @@ -1398,10 +1398,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag ); // Update the level and keep track of 'best' tiles to load - // the bestTiles var result = this._updateLevel( - haveDrawn, - drawLevel, level, levelOpacity, levelVisibility, @@ -1558,8 +1555,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag /** * Updates all tiles at a given resolution level. * @private - * @param {Boolean} haveDrawn - * @param {Boolean} drawLevel * @param {Number} level * @param {Number} levelOpacity * @param {Number} levelVisibility @@ -1568,8 +1563,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag * @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}. */ - _updateLevel: function(haveDrawn, drawLevel, level, levelOpacity, - levelVisibility, drawArea, currentTime, best) { + _updateLevel: function(level, levelOpacity, + levelVisibility, drawArea, currentTime, best) { var topLeftBound = drawArea.getBoundingBox().getTopLeft(); var bottomRightBound = drawArea.getBoundingBox().getBottomRight(); @@ -1583,7 +1578,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag * @type {object} * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event. * @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} opacity * @property {Object} visibility @@ -1596,7 +1591,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag */ this.viewer.raiseEvent('update-level', { tiledImage: this, - havedrawn: haveDrawn, + havedrawn: true, // deprecated, kept for backwards compatibility level: level, opacity: levelOpacity, visibility: levelVisibility, @@ -1651,8 +1646,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag } var result = this._updateTile( - drawLevel, - haveDrawn, flippedX, y, level, levelVisibility, @@ -1729,8 +1722,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag /** * Update a single tile at a particular resolution level. * @private - * @param {Boolean} haveDrawn - * @param {Boolean} drawLevel * @param {Number} x * @param {Number} y * @param {Number} level @@ -1741,16 +1732,15 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag * @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} */ - _updateTile: function( haveDrawn, drawLevel, x, y, level, - levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ + _updateTile: function( x, y, level, + levelVisibility, viewportCenter, numberOfTiles, currentTime, best){ var tile = this._getTile( x, y, level, currentTime, numberOfTiles - ), - drawTile = drawLevel; + ); if( this.viewer ){ /** @@ -1784,20 +1774,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag if (tile.loaded && tile.opacity === 1){ 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( tile, @@ -2183,9 +2159,11 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag return -1; } if (a.visibility === b.visibility) { + // sort by smallest squared distance return (a.squaredDistance - b.squaredDistance); } else { - return (a.visibility - b.visibility); + // sort by largest visibility value + return (b.visibility - a.visibility); } }); },