From 92cabcbc3f3f4e2546618713b7f8fdcad1ba958a Mon Sep 17 00:00:00 2001 From: Gergely Csucs Date: Tue, 19 Mar 2024 15:21:04 +0100 Subject: [PATCH] Towards async loaders --- configuration.js | 11 ++++++++--- filmstrip.js | 18 ++++++++++-------- filmstripzoom.html | 14 +++++--------- zoomer.js | 21 +++++++++++---------- 4 files changed, 34 insertions(+), 30 deletions(-) diff --git a/configuration.js b/configuration.js index d533982..8475aa0 100644 --- a/configuration.js +++ b/configuration.js @@ -59,9 +59,14 @@ const locators = { * @param {type} format Format field (from the DZI descriptor, usually "png" or "jpg") * @returns {string} */ - TileLocator: (section_id, level, x, y, format) => - `${args.pyramids}/${section_id}.tif/${section_id}_files`+ - `/${level}/${x}_${y}.${format}`, + TileLocator: async (section_id, level, x, y, format) => { + const img = document.createElement("img"); + await new Promise(resolve => { + img.onload = resolve; + img.src = `${args.pyramids}/${section_id}.tif/${section_id}_files/${level}/${x}_${y}.${format}`; + }); + return img; + }, /** * Provide the link of the atlas descriptor, atlas data is often just next to LocaliZoom, * and appending a .json extension is enough diff --git a/filmstrip.js b/filmstrip.js index 74ae058..5f1cbca 100644 --- a/filmstrip.js +++ b/filmstrip.js @@ -130,7 +130,7 @@ var filmstrip={}; ctx.fillRect(x*160-pos+20-10,20,128+10+10,128); } if(item.icon===null){ - item.icon=locators.DZILocator(item.id).then(dzi=>{ + item.icon=locators.DZILocator(item.id).then(async dzi=>{ // item.icon=new XMLHttpRequest(); // item.icon.open("GET",locators.DZILocator(item.id)); // item.icon.onload=function(event){ @@ -153,13 +153,15 @@ var filmstrip={}; width=(width+1)>>1; height=(height+1)>>1; } - var img=document.createElement("img"); - img.onload=function(event){ - item.icon=img; - redraw(); -// console.log(""+item.icon); - }; - img.src=locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format")); + item.icon=await locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format")); + redraw(); +// var img=document.createElement("img"); +// img.onload=function(event){ +// item.icon=img; +// redraw(); +//// console.log(""+item.icon); +// }; +// img.src=locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format")); }); // item.icon.send(); } diff --git a/filmstripzoom.html b/filmstripzoom.html index f499cb5..4df3b08 100644 --- a/filmstripzoom.html +++ b/filmstripzoom.html @@ -440,15 +440,11 @@ cfg.MaxLevel++; } - cfg.Key=function(level,x,y){ - return locators.TileLocator(section_id,this.MaxLevel-level,x,y,cfg.Format); - }; - cfg.Load = async function (key, x, y) { - const img = document.createElement("img"); - await new Promise(resolve => { - img.onload = resolve; - img.src = key; - }); +// cfg.Key=function(level,x,y){ +// return locators.TileLocator(section_id,this.MaxLevel-level,x,y,cfg.Format); +// }; + cfg.Load = async function (level, x, y) { + const img = await locators.TileLocator(section_id, cfg.MaxLevel-level, x, y, cfg.Format); const canvas = document.createElement("canvas"); canvas.width = cfg.TileSize; canvas.height = cfg.TileSize; diff --git a/zoomer.js b/zoomer.js index e5bee23..ab6553a 100644 --- a/zoomer.js +++ b/zoomer.js @@ -12,6 +12,7 @@ class ZoomView { stop() { this.#view = null; } + static keyfunc=(l,x,y)=>`${l}-${x}-${y}`; async prepare(view) { this.redraw = drawImage; let {cutx, cuty, cutw, cuth} = view; @@ -62,16 +63,16 @@ class ZoomView { let clip = TileSize; let mask = 0; let lvl = level; - let key = dizcfg.Key(lvl, ex, ey); - let tile = dizcache.get(key); +// let key = dizcfg.Key(lvl, ex, ey); + let tile = dizcache.get(ZoomView.keyfunc(lvl,ex,ey)); while (!tile && lvl < MaxLevel) { clip /= 2; mask = (mask << 1) + 1; ex >>= 1; ey >>= 1; lvl++; - key = dizcfg.Key(lvl, ex, ey); - tile = dizcache.get(key); +// key = dizcfg.Key(lvl, ex, ey); + tile = dizcache.get(ZoomView.keyfunc(lvl,ex,ey)); } if (tile) ctx.drawImage(tile, (ox & mask) * clip, (oy & mask) * clip, clip, clip, x * TileSize, y * TileSize, TileSize, TileSize); @@ -99,13 +100,13 @@ class ZoomView { let ey = ty + y; if (ex >= 0 && ey >= 0 && ex * TileSize < planewidth && ey * TileSize < planeheight) { let templevel = level; - let key = this.#cfg.Key(level, ex, ey); + let key = ZoomView.keyfunc(level, ex, ey); //this.#cfg.Key(level, ex, ey); while (!this.#cache.get(key) && templevel < MaxLevel) { - loadmap.set(key, {ex, ey, key, level: templevel}); + loadmap.set(key, {level: templevel, ex, ey}); ex >>= 1; ey >>= 1; templevel++; - key = this.#cfg.Key(templevel, ex, ey); + key = ZoomView.keyfunc(templevel, ex, ey); } } } @@ -117,9 +118,9 @@ class ZoomView { while ((loading.length || queued.size) && this.#view === curr) { while (loading.length && queued.size < 10) { const promise = new Promise(async resolve => { - const {ex, ey, key} = loading.pop(); - const tile = await Load(key, ex, ey); - this.#cache.put(key, tile); + const {level, ex, ey} = loading.pop(); + const tile = await Load(level, ex, ey); + this.#cache.put(ZoomView.keyfunc(level, ex, ey), tile); if (this.#view === curr) { drawImage(); }