Towards async loaders

Tevemadar · Mar 19, 2024 · 92cabcb · 92cabcb
1 parent 6cdf38a
commit 92cabcb
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 30 deletions.
diff --git a/configuration.js b/configuration.js
@@ -59,9 +59,14 @@ const locators = {
      * @param {type} format <code>Format</code> 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
@@ -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
@@ -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
@@ -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();
                     }