Fixed: internal cache not allways calling destructor, refresh handler…

… was not called on internal cache. Polish code. Improve filtering demo.

src/openseadragon.js

@@ -300,7 +300,7 @@
   * @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]
+  * @property {Number} [maxTilesPerFrame=10]
   *     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.
@@ -1329,7 +1329,7 @@ function OpenSeadragon( options ){
             preserveImageSizeOnResize: false, // requires autoResize=true
             minScrollDeltaTime:     50,
             rotationIncrement:      90,
-            maxTilesPerFrame:       1,
+            maxTilesPerFrame:       10,
 
             //DEFAULT CONTROL SETTINGS
             showSequenceControl:     true,  //SEQUENCE
@@ -2651,7 +2651,7 @@ function OpenSeadragon( options ){
 
 
         //@private, runs non-invasive update of all tiles given in the list
-        invalidateTilesLater: function(tileList, tStamp, viewer, batch = 999) {
+        invalidateTilesLater: function(tileList, tStamp, viewer, batch = $.DEFAULT_SETTINGS.maxTilesPerFrame) {
             let i = 0;
             let interval = setInterval(() => {
                 let tile = tileList[i];
@@ -2660,21 +2660,18 @@ function OpenSeadragon( options ){
                 }
 
                 if (i >= tileList.length) {
-                    console.log(":::::::::::::::::::::::::::::end");
                     clearInterval(interval);
                     return;
                 }
                 const tiledImage = tile.tiledImage;
                 if (tiledImage.invalidatedAt > tStamp) {
-                    console.log(":::::::::::::::::::::::::::::end");
                     clearInterval(interval);
                     return;
                 }
                 let count = 1;
                 for (; i < tileList.length; i++) {
                     const tile = tileList[i];
                     if (!tile.loaded) {
-                        console.log("skipping tile: not loaded", tile);
                         continue;
                     }
 
@@ -2692,7 +2689,7 @@ function OpenSeadragon( options ){
                         break;
                     }
                 }
-            }, 5); //how to select the delay...?? todo: just try out
+            });
         },
 
         //@private, runs tile update event
@@ -2704,7 +2701,6 @@ function OpenSeadragon( options ){
                 tile: tile,
                 tiledImage: image,
             }).then(() => {
-                //TODO IF NOT CACHE ERRO
                 const newCache = tile.getCache();
                 if (newCache) {
                     newCache._updateStamp = tStamp;

src/tilecache.js

@@ -195,7 +195,8 @@
             }
 
             if (!supportedTypes.includes(internalCache.type)) {
-                internalCache.transformTo(supportedTypes.length > 1 ? supportedTypes : supportedTypes[0]);
+                internalCache.transformTo(supportedTypes.length > 1 ? supportedTypes : supportedTypes[0])
+                    .then(() => this._triggerNeedsDraw);
                 return undefined; // type is NOT compatible
             }
 
@@ -421,8 +422,8 @@
         }
 
         _triggerNeedsDraw() {
-            for (let tile of this._tiles) {
-                tile.tiledImage.redraw();
+            if (this._tiles.length > 0) {
+                this._tiles[0].tiledImage.redraw();
             }
         }
 
@@ -617,7 +618,7 @@
          */
         setDataAs(data, type) {
             // no check for state, users must ensure compatibility manually
-            $.convertor.destroy(this._data, this._data);
+            $.convertor.destroy(this._data, this._type);
             this._type = type;
             this._data = data;
             this.loaded = true;

src/tiledimage.js

@@ -301,9 +301,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
         if (viewportOnly) {
             return;
         }
-        //else update all tiles at some point, but by priority of access time
+
         const tiles = this.tileCache.getLoadedTilesFor(this);
-        tiles.sort((a, b) => a.lastTouchTime - b.lastTouchTime);
         $.invalidateTilesLater(tiles, tStamp, this.viewer);
     },
 
@@ -2042,6 +2041,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
     _loadTile: function(tile, time ) {
         var _this = this;
         tile.loading = true;
+        tile.tiledImage = this;
         this._imageLoader.addJob({
             src: tile.getUrl(),
             tile: tile,

src/viewer.js

@@ -370,23 +370,6 @@ $.Viewer = function( options ) {
 
         THIS[ _this.hash ].forceRedraw = true;
 
-        //if we are not throttling
-        if (_this.imageLoader.canAcceptNewJob()) {
-            //todo small hack, we could make this builtin speedup more sophisticated, breaks tests --> commented out
-            const item = event.item;
-            const origOpacity = item.opacity;
-            const origMaxTiles = item.maxTilesPerFrame;
-            //update tiles
-            item.opacity = 0; //prevent draw
-            item.maxTilesPerFrame = 50; //todo based on image size and also number of images!
-
-            //TODO check if the method is used correctly
-            item._updateLevelsForViewport();
-            item._needsDraw = true; //we did not draw
-            item.opacity = origOpacity;
-            item.maxTilesPerFrame = origMaxTiles;
-        }
-
         if (!_this._updateRequestId) {
             _this._updateRequestId = scheduleUpdate( _this, updateMulti );
         }
@@ -543,7 +526,6 @@ $.Viewer = function( options ) {
 
     // Open initial tilesources
     if (this.tileSources) {
-        console.log(this);
         this.open( this.tileSources );
     }
 
@@ -963,7 +945,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             redrawImmediately: true,
             drawerOptions: null
         };
-        console.debug("RESUEST DRAWER ", options.mainDrawer);
         options = $.extend(true, defaultOpts, options);
         const mainDrawer = options.mainDrawer;
         const redrawImmediately = options.redrawImmediately;

src/world.js

@@ -242,15 +242,10 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
         const updatedAt = $.now();
         $.__updated = updatedAt;
         for ( let i = 0; i < this._items.length; i++ ) {
-            console.log("Refreshing ", this._items[i].lastDrawn);
-
             this._items[i].invalidate(true, updatedAt);
         }
 
-        //update all tiles at some point, but by priority of access time
         const tiles = this.viewer.tileCache.getLoadedTilesFor(true);
-        tiles.sort((a, b) => a.lastTouchTime - b.lastTouchTime);
-        console.log("Refreshing with late update: ", tiles);
         $.invalidateTilesLater(tiles, updatedAt, this.viewer);
     },
 

test/demo/filtering-plugin/demo.js

@@ -132,14 +132,31 @@ switcher.addDrawerOption("drawer");
 $("#title-drawer").html(switcher.activeName("drawer"));
 switcher.render("#title-banner");
 
+const url = new URL(window.location);
+const targetSource = url.searchParams.get("image") || Object.values(sources)[0];
 const viewer = window.viewer = new OpenSeadragon({
     id: 'openseadragon',
     prefixUrl: '/build/openseadragon/images/',
-    tileSources: 'https://openseadragon.github.io/example-images/highsmith/highsmith.dzi',
+    tileSources: targetSource,
     crossOriginPolicy: 'Anonymous',
     drawer: switcher.activeImplementation("drawer"),
 });
 
+const sources = {
+    'Highsmith': "https://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
+    'Rainbow Grid': "../../data/testpattern.dzi",
+    'Leaves': "../../data/iiif_2_0_sizes/info.json",
+    "Duomo":"https://openseadragon.github.io/example-images/duomo/duomo.dzi",
+}
+$("#image-select")
+    .html(Object.entries(sources).map(([k, v]) =>
+        `<option value="${v}" ${targetSource === v ? "selected" : ""}>${k}</option>`).join("\n"))
+    .on('change', e => {
+        url.searchParams.set('image', e.target.value);
+        window.history.pushState(null, '', url.toString());
+        viewer.addTiledImage({tileSource: e.target.value, index: 0, replace: true});
+    });
+
 
 // Prevent Caman from caching the canvas because without this:
 // 1. We have a memory leak

test/demo/filtering-plugin/index.html

@@ -46,6 +46,9 @@ <h1>OpenSeadragon filtering plugin demo: <span id="title-drawer"></span></h1>
                         <div id="openseadragon"></div>
                     </div>
                     <div class="wdzt-cell-layout column-2">
+                        <select id="image-select">
+                        </select>
+
                         <h3>Available filters</h3>
                         <ul id="available">
                         </ul>