changelog.txt

@@ -5,10 +5,9 @@ OPENSEADRAGON CHANGELOG
 
 * BREAKING CHANGE: Dropped support for IE11 (#2300, #2361 @AndrewADev)
 * DEPRECATION: The OpenSeadragon.createCallback function is no longer recommended (#2367 @akansjain)
-* Introduced maxTilesPerFrame option to allow loading more tiles simultaneously (#2387 @jetic83)
+* Fixed: Sometimes if the viewport was flipped and the user zoomed in far enough, it would flip back (#2364 @SebDelile)
 * Test improvements (#2382 @AndrewADev)
 * MouseTracker options documentation fixes (#2389 @msalsbery)
-* Fixed: Sometimes if the viewport was flipped and the user zoomed in far enough, it would flip back (#2364 @SebDelile)
 
 4.1.0:
 

src/openseadragon.js

@@ -290,12 +290,6 @@
   * @property {Number} [rotationIncrement=90]
   *     The number of degrees to rotate right or left when the rotate buttons or keyboard shortcuts are activated.
   *
-  * @property {Number} [maxTilesPerFrame=1]
-  *     The number of tiles loaded per frame. As the frame rate of the client's machine is usually high (e.g., 50 fps),
-  *     one tile per frame should be a good choice. However, for large screens or lower frame rates, the number of
-  *     loaded tiles per frame can be adjusted here. Reasonable values might be 2 or 3 tiles per frame.
-  *     (Note that the actual frame rate is given by the client's browser and machine).
-  *
   * @property {Number} [pixelsPerWheelLine=40]
   *     For pixel-resolution scrolling devices, the number of pixels equal to one scroll line.
   *
@@ -1294,7 +1288,6 @@ function OpenSeadragon( options ){
             preserveImageSizeOnResize: false, // requires autoResize=true
             minScrollDeltaTime:     50,
             rotationIncrement:      90,
-            maxTilesPerFrame:       1,
 
             //DEFAULT CONTROL SETTINGS
             showSequenceControl:     true,  //SEQUENCE

src/tiledimage.js

@@ -182,8 +182,7 @@ $.TiledImage = function( options ) {
         opacity:                           $.DEFAULT_SETTINGS.opacity,
         preload:                           $.DEFAULT_SETTINGS.preload,
         compositeOperation:                $.DEFAULT_SETTINGS.compositeOperation,
-        subPixelRoundingForTransparency:   $.DEFAULT_SETTINGS.subPixelRoundingForTransparency,
-        maxTilesPerFrame:                  $.DEFAULT_SETTINGS.maxTilesPerFrame
+        subPixelRoundingForTransparency:   $.DEFAULT_SETTINGS.subPixelRoundingForTransparency
     }, options );
 
     this._preload = this.preload;
@@ -1209,7 +1208,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         var levelsInterval = this._getLevelsInterval();
         var lowestLevel = levelsInterval.lowestLevel;
         var highestLevel = levelsInterval.highestLevel;
-        var bestTiles = [];
+        var bestTile = null;
         var haveDrawn = false;
         var currentTime = $.now();
 
@@ -1254,7 +1253,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             );
 
             // Update the level and keep track of 'best' tile to load
-            bestTiles = this._updateLevel(
+            bestTile = this._updateLevel(
                 haveDrawn,
                 drawLevel,
                 level,
@@ -1262,7 +1261,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
                 levelVisibility,
                 drawArea,
                 currentTime,
-                bestTiles
+                bestTile
             );
 
             // Stop the loop if lower-res tiles would all be covered by
@@ -1275,13 +1274,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         // Perform the actual drawing
         this._drawTiles(this.lastDrawn);
 
-        // Load the new 'best' n tiles
-        if (bestTiles && bestTiles.length > 0) {
-            bestTiles.forEach(function (tile) {
-                if (tile && !tile.context2D) {
-                    this._loadTile(tile, currentTime);
-                }
-            }, this);
+        // Load the new 'best' tile
+        if (bestTile && !bestTile.context2D) {
+            this._loadTile(bestTile, currentTime);
             this._needsDraw = true;
             this._setFullyLoaded(false);
         } else {
@@ -1340,7 +1335,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @param {Number} levelVisibility
      * @param {OpenSeadragon.Rect} drawArea
      * @param {Number} currentTime
-     * @param {OpenSeadragon.Tile[]} best - The current "best" n tiles to draw.
+     * @param {OpenSeadragon.Tile} best - The current "best" tile to draw.
      */
     _updateLevel: function(haveDrawn, drawLevel, level, levelOpacity,
                            levelVisibility, drawArea, currentTime, best) {
@@ -1365,7 +1360,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
              * @property {Object} topleft deprecated, use drawArea instead
              * @property {Object} bottomright deprecated, use drawArea instead
              * @property {Object} currenttime
-             * @property {Object[]} best
+             * @property {Object} best
              * @property {?Object} userData - Arbitrary subscriber-defined object.
              */
             this.viewer.raiseEvent('update-level', {
@@ -1454,7 +1449,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @param {OpenSeadragon.Point} viewportCenter
      * @param {Number} numberOfTiles
      * @param {Number} currentTime
-     * @param {OpenSeadragon.Tile[]} best - The current "best" tiles to draw.
+     * @param {OpenSeadragon.Tile} best - The current "best" tile to draw.
      */
     _updateTile: function( haveDrawn, drawLevel, x, y, level, levelOpacity,
                            levelVisibility, viewportCenter, numberOfTiles, currentTime, best){
@@ -1543,7 +1538,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
             // the tile is already in the download queue
             this._tilesLoading++;
         } else if (!loadingCoverage) {
-            best = this._compareTiles( best, tile, this.maxTilesPerFrame );
+            best = this._compareTiles( best, tile );
         }
 
         return best;
@@ -1917,49 +1912,28 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
     /**
      * @private
      * @inner
-     * Determines the 'best tiles' from the given 'last best' tiles and the
+     * Determines whether the 'last best' tile for the area is better than the
      * tile in question.
      *
-     * @param {OpenSeadragon.Tile[]} previousBest The best tiles so far.
-     * @param {OpenSeadragon.Tile} tile The new tile to consider.
-     * @param {Number} maxNTiles The max number of best tiles.
-     * @returns {OpenSeadragon.Tile[]} The new best tiles.
+     * @param {OpenSeadragon.Tile} previousBest
+     * @param {OpenSeadragon.Tile} tile
+     * @returns {OpenSeadragon.Tile} The new best tile.
      */
-    _compareTiles: function( previousBest, tile, maxNTiles ) {
+    _compareTiles: function( previousBest, tile ) {
         if ( !previousBest ) {
-            return [tile];
+            return tile;
         }
-        previousBest.push(tile);
-        this._sortTiles(previousBest);
-        if (previousBest.length > maxNTiles) {
-            previousBest.pop();
+
+        if ( tile.visibility > previousBest.visibility ) {
+            return tile;
+        } else if ( tile.visibility === previousBest.visibility ) {
+            if ( tile.squaredDistance < previousBest.squaredDistance ) {
+                return tile;
+            }
         }
         return previousBest;
     },
 
-    /**
-     * @private
-     * @inner
-     * Sorts tiles in an array according to distance and visibility.
-     *
-     * @param {OpenSeadragon.Tile[]} tiles The tiles.
-     */
-    _sortTiles: function( tiles ) {
-        tiles.sort(function (a, b) {
-            if (a === null) {
-                return 1;
-            }
-            if (b === null) {
-                return -1;
-            }
-            if (a.visibility === b.visibility) {
-                return (a.squaredDistance - b.squaredDistance);
-            } else {
-                return (a.visibility - b.visibility);
-            }
-        });
-    },
-
     /**
      * @private
      * @inner

src/viewer.js

@@ -1604,7 +1604,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     minZoomImageRatio: _this.minZoomImageRatio,
                     wrapHorizontal: _this.wrapHorizontal,
                     wrapVertical: _this.wrapVertical,
-                    maxTilesPerFrame: _this.maxTilesPerFrame,
                     immediateRender: _this.immediateRender,
                     blendTime: _this.blendTime,
                     alwaysBlend: _this.alwaysBlend,

test/demo/max-tiles-per-frame.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>OpenSeadragon maxTilesPerFrame Demo</title>
-    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
-    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
-    <style type="text/css">
-
-        .openseadragon1 {
-            width: 100vw;
-            height: 100vh;
-        }
-
-    </style>
-</head>
-<body>
-    <div>
-        Simple demo page to show an OpenSeadragon viewer with a higher maxTilesPerFrame.
-    </div>
-    <div id="contentDiv" class="openseadragon1"></div>
-    <script type="text/javascript">
-
-        var viewer = OpenSeadragon({
-            debugMode: true,
-            id: "contentDiv",
-            prefixUrl: "../../build/openseadragon/images/",
-            tileSources:  "https://openseadragon.github.io/example-images/duomo/duomo.dzi",
-            showNavigator:true,
-            debugMode:true,
-            maxTilesPerFrame:3,
-        });
-
-    </script>
-</body>
-</html>