From 52ef8156c05ee47104231097d203039b1778d85d Mon Sep 17 00:00:00 2001
From: Aiosa <469130@mail.muni.cz>
Date: Sun, 3 Mar 2024 17:59:39 +0100
Subject: [PATCH] Fixed: internal cache not allways calling destructor, refresh
handler was not called on internal cache. Polish code. Improve filtering
demo.
---
src/openseadragon.js | 12 ++++--------
src/tilecache.js | 9 +++++----
src/tiledimage.js | 4 ++--
src/viewer.js | 19 -------------------
src/world.js | 5 -----
test/demo/filtering-plugin/demo.js | 19 ++++++++++++++++++-
test/demo/filtering-plugin/index.html | 3 +++
7 files changed, 32 insertions(+), 39 deletions(-)
diff --git a/src/openseadragon.js b/src/openseadragon.js
index e94ad8e8..444a819c 100644
--- a/src/openseadragon.js
+++ b/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,13 +2660,11 @@ 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;
}
@@ -2674,7 +2672,6 @@ function OpenSeadragon( options ){
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;
diff --git a/src/tilecache.js b/src/tilecache.js
index c7b4eec2..e2bf1fe9 100644
--- a/src/tilecache.js
+++ b/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;
diff --git a/src/tiledimage.js b/src/tiledimage.js
index a8df28c0..5efcc3b1 100644
--- a/src/tiledimage.js
+++ b/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,
diff --git a/src/viewer.js b/src/viewer.js
index df1ef3ac..1c3683bf 100644
--- a/src/viewer.js
+++ b/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;
diff --git a/src/world.js b/src/world.js
index db0604e2..598b2326 100644
--- a/src/world.js
+++ b/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);
},
diff --git a/test/demo/filtering-plugin/demo.js b/test/demo/filtering-plugin/demo.js
index f53e50e9..9c789e89 100644
--- a/test/demo/filtering-plugin/demo.js
+++ b/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]) =>
+ ``).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
diff --git a/test/demo/filtering-plugin/index.html b/test/demo/filtering-plugin/index.html
index 88f75f5c..86dd06ab 100644
--- a/test/demo/filtering-plugin/index.html
+++ b/test/demo/filtering-plugin/index.html
@@ -46,6 +46,9 @@