Added support for keeping a limited set of tile textures.

dist/iwmlib.js

@@ -2336,6 +2336,8 @@
         onMouseWheel(event) {
             if (this.capture(event) && this.target.onMouseWheel) {
                 this.target.onMouseWheel(event);
+            } else {
+                //console.warn('Target has no onMouseWheel callback')
             }
         }
 
@@ -2529,6 +2531,8 @@
                 }
                 if (this.target.onMouseWheel) {
                     this.target.onMouseWheel(event);
+                } else {
+                    //console.warn('Target has no onMouseWheel callback', this.target)
                 }
             }
         }
@@ -4202,7 +4206,10 @@
                 let event = new ResizeEvent(this, { width: w, height: h });
                 this.onResize(event);
             }
-            if (this.resizeButton != null) ;
+            if (this.resizeButton != null) {
+                // this.resizeButton.style.width = 50/this.scale+"px"
+                // this.resizeButton.style.height = 50/this.scale+"px"
+            }
         }
 
         startResize(e) {

dist/iwmlib.pixi.js

@@ -5500,6 +5500,8 @@
         onMouseWheel(event) {
             if (this.capture(event) && this.target.onMouseWheel) {
                 this.target.onMouseWheel(event);
+            } else {
+                //console.warn('Target has no onMouseWheel callback')
             }
         }
 
@@ -5693,6 +5695,8 @@
                 }
                 if (this.target.onMouseWheel) {
                     this.target.onMouseWheel(event);
+                } else {
+                    //console.warn('Target has no onMouseWheel callback', this.target)
                 }
             }
         }
@@ -7204,7 +7208,10 @@
                 let event = new ResizeEvent(this, { width: w, height: h });
                 this.onResize(event);
             }
-            if (this.resizeButton != null) ;
+            if (this.resizeButton != null) {
+                // this.resizeButton.style.width = 50/this.scale+"px"
+                // this.resizeButton.style.height = 50/this.scale+"px"
+            }
         }
 
         startResize(e) {
@@ -7796,8 +7803,11 @@
         }
     }
 
-    const deepZoomTileCache = new Map();
+    const registeredTiles = new Map();
-
+    const pendingTiles = new Map();
+    /** Implements a baseTexture cache. The last textures are kept for reuse  */
+    const keepBaseTextures = 0;
+    const keptBaseTextures = [];
 
     /** The current Tile implementation simply uses PIXI.Sprites.
      *
@@ -7811,6 +7821,74 @@
             this.register(url);
         }
 
+        /**
+         * Static method to enable keeping of base textures
+         *
+         * @static
+         * @param {*} value
+         * @memberof Tile
+         */
+        static enableKeepBaseTextures(value = 1000) {
+            keepBaseTextures = value;
+        }
+
+        /**
+         * Marks the given url as pending. Pending tiles should not be destroyed
+         *
+         * @static
+         * @param {*} url
+         * @memberof Tile
+         */
+        static schedule(url) {
+            let count = 0;
+            if (pendingTiles.has(url)) {
+                count = pendingTiles.get(url);
+            }
+            pendingTiles.set(url, count + 1);
+            // console.log("Tile.scheduled", url, pendingTiles.size)
+        }
+
+        /**
+         * Returns true iff the url is pending
+         *
+         * @static
+         * @returns
+         * @memberof Tile
+         */
+        static isPending() {
+            return pendingTiles.has(url) && pendingTiles.get(url) > 0
+        }
+
+        /**
+         * Removes the given url from pending urls.
+         *
+         * @static
+         * @param {*} url
+         * @memberof Tile
+         */
+        static unschedule(url) {
+            if (pendingTiles.has(url)) {
+                let count = pendingTiles.get(url);
+                if (count > 1) {
+                    pendingTiles.set(url, count - 1);
+                }
+                else {
+                    pendingTiles.clear(url);
+                }
+            }
+            // console.log("Tile.unscheduled", url, pendingTiles.size)
+        }
+
+        /**
+         * Loads a tile from image using the PIXI.Texture.fromImage method.
+         *
+         * @static
+         * @param {*} imageId
+         * @param {*} crossorigin
+         * @param {*} scaleMode
+         * @returns
+         * @memberof Tile
+         */
         static fromImage(imageId, crossorigin, scaleMode) {
             return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
         }
@@ -7823,13 +7901,14 @@
          * @memberof Tile
          */
         register(url, debug = false) {
-            if (deepZoomTileCache.has(url)) {
+            Tile.unschedule(url);
-                let tiles = deepZoomTileCache.get(url);
+            if (registeredTiles.has(url)) {
+                let tiles = registeredTiles.get(url);
                 tiles.add(this);
                 if (debug) console.log("Tile.register", url, tiles.size);
             }
             else {
-                deepZoomTileCache.set(url, new Set([this]));
+                registeredTiles.set(url, new Set([this]));
                 if (debug) console.log("Tile.register", url, 1);
             }
         }
@@ -7841,10 +7920,10 @@
          * @memberof Tile
          */
         unregister() {
-            let tiles = deepZoomTileCache.get(this.url);
+            let tiles = registeredTiles.get(this.url);
             tiles.delete(this);
             if (tiles.size == 0) {
-                deepZoomTileCache.delete(this.url);
+                registeredTiles.delete(this.url);
             }
             return tiles.size
         }
@@ -7855,23 +7934,75 @@
          * @param {*} options  Part of the PIXI API, but ignored in the implementation
          * @memberof Tile
          */
-        destroy(options, debug = false) {
+        destroy(options, debug = true) {
             let count = this.unregister();
-            if (count <= 0) {
+
-                let opts = { children: true, texture: true, baseTexture: true };
+            if (keepBaseTextures > 0) {
+                keptBaseTextures.push({ url: this.url, texture: this.texture.baseTexture});
+
+                let opts = { children: true, texture: false, baseTexture: false };
+                if (debug) console.log("Tile.destroy", registeredTiles.size, opts);
                 super.destroy(opts);
-                if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts);
+
+                while(keptBaseTextures.length > keepBaseTextures) {
+                    let {url, texture} = keptBaseTextures.shift();
+                    let tiles = registeredTiles.get(url);
+                    if (tiles.size > 0 && !Tile.isPending(url)) {
+                        texture.destroy();
+                        if (debug) console.log("Destroying baseTexture", url);
+                    }
+                }
             }
             else {
-                let opts = { children: true, texture: false, baseTexture: false };
+                // No longer registered and not pending
-                if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts);
+                if (count <= 0 && !Tile.isPending(url)) {
-                super.destroy(opts);
+                    let opts = { children: true, texture: true, baseTexture: true };
+                    super.destroy(opts);
+                    if (debug) console.log("Tile.destroy", registeredTiles.size, opts);
+                }
+                else {
+                    let opts = { children: true, texture: false, baseTexture: false };
+                    if (debug) console.log("Tile.destroy", registeredTiles.size, opts);
+                    super.destroy(opts);
+                }
+                if (this.parent != null) {
+                    // UO: Emit warning and remove
+                    console.warn("Destroying tile with parent. Hiding instead");
+                    this.visible = false;
+                }
             }
-            if (this.parent != null) {
+            
-                // UO: Emit warning and remove
+        }
-                console.warn("Destroying tile with parent. Hiding instead");
+
-                this.visible = false;
+        /**
+         * Returns an available texture that can be reused
+         *
+         * @param {*} url
+         * @returns
+         * @memberof Tile
+         */
+        static textureAvailable(url) {
+            if (registeredTiles.has(url)) {
+                let tiles = registeredTiles.get(url);
+                for (let tile of tiles.values()) {
+                    //console.log("Reusing cached texture", tile.parent)
+                    return tile.texture
+                }
             }
+            return null
+        }
+
+        static printInfos() {
+            let references = new Map();
+            let multiples = 0;
+            for (let [url, tiles] of registeredTiles.entries()) {
+                let count = tiles.size;
+                references.set(url, count);
+                if (count > 1) {
+                    multiples += 1;
+                }
+            }
+            console.log({ multiples, references });
         }
     }
 
@@ -7903,6 +8034,8 @@
         schedule(url, col, row) {
             if (this.loaded.has(url)) return false
             if (this.loading.has(url)) return false
+
+            Tile.schedule(url);
             this.map.set(url, [col, row]);
             this.loading.add(url);
             this.loadQueue.push(url);
@@ -7912,6 +8045,7 @@
         unschedule(url) {
             if (this.loaded.has(url)) this.loaded.delete(url);
             if (this.loading.has(url)) this.loading.delete(url);
+            Tile.unschedule(url);
             this.loadQueue = this.loadQueue.filter(item => item != url);
         }
 
@@ -7971,16 +8105,13 @@
             if (this.loaded.has(url)) return false
             if (this.loading.has(url)) return false
 
-            if (deepZoomTileCache.has(url)) {
+            Tile.schedule(url);
-                let tiles = deepZoomTileCache.get(url);
+            let reusableTexture = Tile.textureAvailable(url);
-                for (let tile of tiles.values()) {
+            if (reusableTexture) {
-                    //console.log("Reusing cached texture", tile.parent)
+                if (this.debug) console.log('Texture reusable', reusableTexture);
-                    let texture = tile.texture;
+                this._textureAvailable(url, col, row, reusableTexture);
-                    this._textureAvailable(url, col, row, texture);
+                return false
-                    return false
-                }
             }
-            
             let texture = PIXI.utils.TextureCache[url];
             if (texture) {
                 if (this.debug) console.log('Texture already loaded', texture);
@@ -8497,18 +8628,8 @@
         return n % 2 == 0
     }
 
-
     function printTileCacheInfos() {
-        let references = new Map();
+        Tile.printInfos();
-        let multiples = 0;
-        for (let [url, tiles] of deepZoomTileCache.entries()) {
-            let count = tiles.size;
-            references.set(url, count);
-            if (count > 1) {
-                multiples += 1;
-            }
-        }
-        console.log({ multiples, references });
     }
     /**
      * A utility class that holds information typically provided by DZI files, i.e.
@@ -8914,7 +9035,7 @@
                 this.minimumLevel = deepZoomInfo.baseLevel;
             }
             this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel);
-            console.log("autoLoadTiles", this.autoLoadTiles);
+            //console.log("autoLoadTiles", this.autoLoadTiles)
             if (this.autoLoadTiles) {
                 this.setupTiles(center);
             }

doc/out/pixi_deepzoom_image.js.html

@@ -1864,7 +1864,7 @@ export class DeepZoomImage extends PIXI.Container {
             this.minimumLevel = deepZoomInfo.baseLevel
         }
         this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel)
-        console.log("autoLoadTiles", this.autoLoadTiles)
+        //console.log("autoLoadTiles", this.autoLoadTiles)
         if (this.autoLoadTiles) {
             this.setupTiles(center)
         }

lib/pixi/deepzoom/deepzoom.html

@@ -101,7 +101,7 @@
                 minScale: 0,
                 maxScale: 50,
                 onTransform: event => {
-                    console.log('currentLevel', deepZoomImage1.currentLevel)
+                    //console.log('currentLevel', deepZoomImage1.currentLevel)
                     deepZoomImage1.transformed(event)
                 }
             })

lib/pixi/deepzoom/image.js

@@ -1,24 +1,14 @@
 import { Capabilities } from '../../capabilities.js'
 import { Points } from '../../utils.js'
-import { deepZoomTileCache } from './tile.js'
+import Tile from './tile.js'
 import { Tiles } from './tiles.js'
 
 function isEven(n) {
     return n % 2 == 0
 }
 
-
 function printTileCacheInfos() {
-    let references = new Map()
+    Tile.printInfos()
-    let multiples = 0
-    for (let [url, tiles] of deepZoomTileCache.entries()) {
-        let count = tiles.size
-        references.set(url, count)
-        if (count > 1) {
-            multiples += 1
-        }
-    }
-    console.log({ multiples, references })
 }
 /**
  * A utility class that holds information typically provided by DZI files, i.e.
@@ -424,7 +414,7 @@ export class DeepZoomImage extends PIXI.Container {
             this.minimumLevel = deepZoomInfo.baseLevel
         }
         this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel)
-        console.log("autoLoadTiles", this.autoLoadTiles)
+        //console.log("autoLoadTiles", this.autoLoadTiles)
         if (this.autoLoadTiles) {
             this.setupTiles(center)
         }

lib/pixi/deepzoom/loader.js

@@ -1,4 +1,4 @@
-import { deepZoomTileCache, Tile } from './tile.js'
+import Tile from './tile.js'
 
 /**
  * A Tile Loader component that can be plugged into a Tiles Layer.
@@ -28,6 +28,8 @@ export class TileLoader {
     schedule(url, col, row) {
         if (this.loaded.has(url)) return false
         if (this.loading.has(url)) return false
+
+        Tile.schedule(url)
         this.map.set(url, [col, row])
         this.loading.add(url)
         this.loadQueue.push(url)
@@ -37,6 +39,7 @@ export class TileLoader {
     unschedule(url) {
         if (this.loaded.has(url)) this.loaded.delete(url)
         if (this.loading.has(url)) this.loading.delete(url)
+        Tile.unschedule(url)
         this.loadQueue = this.loadQueue.filter(item => item != url)
     }
 
@@ -96,16 +99,13 @@ export class PIXITileLoader extends TileLoader {
         if (this.loaded.has(url)) return false
         if (this.loading.has(url)) return false
 
-        if (deepZoomTileCache.has(url)) {
+        Tile.schedule(url)
-            let tiles = deepZoomTileCache.get(url)
+        let reusableTexture = Tile.textureAvailable(url)
-            for (let tile of tiles.values()) {
+        if (reusableTexture) {
-                //console.log("Reusing cached texture", tile.parent)
+            if (this.debug) console.log('Texture reusable', reusableTexture)
-                let texture = tile.texture
+            this._textureAvailable(url, col, row, reusableTexture)
-                this._textureAvailable(url, col, row, texture)
+            return false
-                return false
-            }
         }
-        
         let texture = PIXI.utils.TextureCache[url]
         if (texture) {
             if (this.debug) console.log('Texture already loaded', texture)

lib/pixi/deepzoom/tile.js

@@ -1,19 +1,90 @@
 
-export const deepZoomTileCache = new Map()
+const registeredTiles = new Map()
-
+const pendingTiles = new Map()
+/** Implements a baseTexture cache. The last textures are kept for reuse  */
+const keepTextures = 0
+const keptTextures = []
 
 /** The current Tile implementation simply uses PIXI.Sprites.
  *
  * BTW: PIXI.extras.TilingSprite is not appropriate. It should be used for
  * repeating patterns.
  **/
-export class Tile extends PIXI.Sprite {
+export default class Tile extends PIXI.Sprite {
     constructor(texture, url) {
         super(texture)
         this.url = url
         this.register(url)
     }
 
+    /**
+     * Static method to enable keeping of base textures
+     *
+     * @static
+     * @param {*} value
+     * @memberof Tile
+     */
+    static enableKeepTextures(value = 1000) {
+        keepTextures = value
+    }
+
+    /**
+     * Marks the given url as pending. Pending tiles should not be destroyed
+     *
+     * @static
+     * @param {*} url
+     * @memberof Tile
+     */
+    static schedule(url) {
+        let count = 0
+        if (pendingTiles.has(url)) {
+            count = pendingTiles.get(url)
+        }
+        pendingTiles.set(url, count + 1)
+        // console.log("Tile.scheduled", url, pendingTiles.size)
+    }
+
+    /**
+     * Returns true iff the url is pending
+     *
+     * @static
+     * @returns
+     * @memberof Tile
+     */
+    static isPending() {
+        return pendingTiles.has(url) && pendingTiles.get(url) > 0
+    }
+
+    /**
+     * Removes the given url from pending urls.
+     *
+     * @static
+     * @param {*} url
+     * @memberof Tile
+     */
+    static unschedule(url) {
+        if (pendingTiles.has(url)) {
+            let count = pendingTiles.get(url)
+            if (count > 1) {
+                pendingTiles.set(url, count - 1)
+            }
+            else {
+                pendingTiles.clear(url)
+            }
+        }
+        // console.log("Tile.unscheduled", url, pendingTiles.size)
+    }
+
+    /**
+     * Loads a tile from image using the PIXI.Texture.fromImage method.
+     *
+     * @static
+     * @param {*} imageId
+     * @param {*} crossorigin
+     * @param {*} scaleMode
+     * @returns
+     * @memberof Tile
+     */
     static fromImage(imageId, crossorigin, scaleMode) {
         return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
     }
@@ -26,13 +97,14 @@ export class Tile extends PIXI.Sprite {
      * @memberof Tile
      */
     register(url, debug = false) {
-        if (deepZoomTileCache.has(url)) {
+        Tile.unschedule(url)
-            let tiles = deepZoomTileCache.get(url)
+        if (registeredTiles.has(url)) {
+            let tiles = registeredTiles.get(url)
             tiles.add(this)
             if (debug) console.log("Tile.register", url, tiles.size)
         }
         else {
-            deepZoomTileCache.set(url, new Set([this]))
+            registeredTiles.set(url, new Set([this]))
             if (debug) console.log("Tile.register", url, 1)
         }
     }
@@ -44,10 +116,10 @@ export class Tile extends PIXI.Sprite {
      * @memberof Tile
      */
     unregister() {
-        let tiles = deepZoomTileCache.get(this.url)
+        let tiles = registeredTiles.get(this.url)
         tiles.delete(this)
         if (tiles.size == 0) {
-            deepZoomTileCache.delete(this.url)
+            registeredTiles.delete(this.url)
         }
         return tiles.size
     }
@@ -58,22 +130,73 @@ export class Tile extends PIXI.Sprite {
      * @param {*} options  Part of the PIXI API, but ignored in the implementation
      * @memberof Tile
      */
-    destroy(options, debug = false) {
+    destroy(options, debug = true) {
         let count = this.unregister()
-        if (count <= 0) {
+
-            let opts = { children: true, texture: true, baseTexture: true }
+        if (keepTextures > 0) {
+            keptTextures.push({ url: this.url, texture: this.texture})
+
+            let opts = { children: true, texture: false, baseTexture: false }
+            if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
             super.destroy(opts)
-            if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts)
+
+            while(keptTextures.length > keepTextures) {
+                let {url, texture} = keptTextures.shift()
+                let tiles = registeredTiles.get(url)
+                if (tiles.size > 0 && !Tile.isPending(url)) {
+                    texture.destroy(true) // Destroy base as well
+                    if (debug) console.log("Destroying texture and baseTexture", url)
+                }
+            }
         }
         else {
-            let opts = { children: true, texture: false, baseTexture: false }
+            // No longer registered and not pending
-            if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts)
+            if (count <= 0 && !Tile.isPending(url)) {
-            super.destroy(opts)
+                let opts = { children: true, texture: true, baseTexture: true }
-        }
+                super.destroy(opts)
-        if (this.parent != null) {
+                if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
-            // UO: Emit warning and remove
+            }
-            console.warn("Destroying tile with parent. Hiding instead")
+            else {
-            this.visible = false
+                let opts = { children: true, texture: false, baseTexture: false }
+                if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
+                super.destroy(opts)
+            }
+            if (this.parent != null) {
+                // UO: Emit warning and remove
+                console.warn("Destroying tile with parent. Hiding instead")
+                this.visible = false
+            }
         }
     }
+
+    /**
+     * Returns an available texture that can be reused
+     *
+     * @param {*} url
+     * @returns
+     * @memberof Tile
+     */
+    static textureAvailable(url) {
+        if (registeredTiles.has(url)) {
+            let tiles = registeredTiles.get(url)
+            for (let tile of tiles.values()) {
+                //console.log("Reusing cached texture", tile.parent)
+                return tile.texture
+            }
+        }
+        return null
+    }
+
+    static printInfos() {
+        let references = new Map()
+        let multiples = 0
+        for (let [url, tiles] of registeredTiles.entries()) {
+            let count = tiles.size
+            references.set(url, count)
+            if (count > 1) {
+                multiples += 1
+            }
+        }
+        console.log({ multiples, references })
+    }
 }