Added missing variables.

This reverts commit 012fe4bc4a.

bin/testrunner.js

@@ -7,7 +7,8 @@
  */
 
 const puppeteer = require('puppeteer');
-const fs = require("fs")
+const fs_bare = require("fs") // required for fs-extra
+const fs = require("fs-extra")
 const path = require("path")
 const start_dir = process.cwd()
 const start_file = path.join(start_dir,"lib","index.html")
@@ -39,18 +40,24 @@ async function makeScreenshot(href){
     page.once("load",logPageEvent)
 
     await page.goto(href)
+    href = href.replace("file:///","")
     const fname = path.parse(href).name
-
+    let fpath
     if (fname != "index"){
         image_url = href.replace(fname + ".html" ,"thumbnails/" + fname + ".png")
+        fpath = href.replace(fname + ".html", "thumbnails")
     }
     else{
         image_url = href.replace(fname + ".html" ,"thumbnail.png")
+        fpath = href.replace(fname + ".html", "")
     }
-    image_url = image_url.replace("file:///","")
+    // image_url = image_url.replace("file:///","")
+    // fpath = fpath.replace("file:///","")
 
     page.removeAllListeners()
 
+    fs.ensureDir(fpath)
+
     await page.screenshot({path: image_url});
     await browser.close();
 }

dist/iwmlib.js

@@ -2995,11 +2995,16 @@
             }
         }
 
+        _throwDeltaTime() {
+            let t = performance.now();
+            let dt = t - this.lastframe;
+            this.lastframe = t;
+            return dt
+        }
+
         animateThrow(time) {
             if (this.velocity != null) {
-                let t = performance.now();
-                let dt = t - this.lastframe;
-                this.lastframe = t;
+                let dt = this._throwDeltaTime();
                 // console.log("animateThrow", dt)
                 let next = this.nextVelocity(this.velocity);
                 let prevLength = Points.length(this.velocity);
@@ -3232,7 +3237,9 @@
 
         keepOnStage(velocity, collision = 0.5) {
             let stagePolygon = this.containerPolygon;
-            if (!stagePolygon) return
+            // UO: since keepOnStage is called in nextVelocity we need to 
+            // ensure a return value
+            if (!stagePolygon) return { x: 0, y: 0}
             let polygon = this.polygon;
             let bounced = this.bouncing();
             if (bounced) {
@@ -4251,7 +4258,7 @@
                 let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected));
                 let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));
 
-                if (this.element.offsetWidth + resizeW / this.scale > this.width * 0.3 && this.element.offsetHeight + resizeH / this.scale > this.height * 0.3) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
+                if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3  / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
 
                 this.oldX = e.clientX;
                 this.oldY = e.clientY;

dist/iwmlib.pixi.js

@@ -6159,11 +6159,16 @@
             }
         }
 
+        _throwDeltaTime() {
+            let t = performance.now();
+            let dt = t - this.lastframe;
+            this.lastframe = t;
+            return dt
+        }
+
         animateThrow(time) {
             if (this.velocity != null) {
-                let t = performance.now();
-                let dt = t - this.lastframe;
-                this.lastframe = t;
+                let dt = this._throwDeltaTime();
                 // console.log("animateThrow", dt)
                 let next = this.nextVelocity(this.velocity);
                 let prevLength = Points.length(this.velocity);
@@ -6396,7 +6401,9 @@
 
         keepOnStage(velocity, collision = 0.5) {
             let stagePolygon = this.containerPolygon;
-            if (!stagePolygon) return
+            // UO: since keepOnStage is called in nextVelocity we need to 
+            // ensure a return value
+            if (!stagePolygon) return { x: 0, y: 0}
             let polygon = this.polygon;
             let bounced = this.bouncing();
             if (bounced) {
@@ -7253,7 +7260,7 @@
                 let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected));
                 let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));
 
-                if (this.element.offsetWidth + resizeW / this.scale > this.width * 0.3 && this.element.offsetHeight + resizeH / this.scale > this.height * 0.3) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
+                if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3  / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
 
                 this.oldX = e.clientX;
                 this.oldY = e.clientY;
@@ -7794,8 +7801,14 @@
         }
     }
 
-    const deepZoomTileCache = new Map();
+    /* ES Lint  */
+    /* globals PIXI, console*/
 
+    const registeredTiles = new Map();
+    // const pendingTiles = new Map()
+    /** Implements a baseTexture cache. The last textures are kept for reuse  */
+    let keepTextures = 0;
+    const keptTextures = [];
 
     /** The current Tile implementation simply uses PIXI.Sprites.
      *
@@ -7809,6 +7822,83 @@
             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)
+        } */
+
+        /**
+         * 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)
+        } */
+
+
+        /**
+         * Returns true iff the url is pending
+         *
+         * @static
+         * @param {*} url
+         * @returns
+         * @memberof Tile
+         */
+        /*static isPending(url) {
+            return pendingTiles.has(url) && pendingTiles.get(url) > 0
+        } */
+
+        static isObsolete(url) {
+            if (registeredTiles.has(url) && registeredTiles.get(url) > 0) {
+                return false
+            }
+            return true
+        }
+
+        /**
+         * 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)
         }
@@ -7821,13 +7911,14 @@
          * @memberof Tile
          */
         register(url, debug = false) {
-            if (deepZoomTileCache.has(url)) {
-                let tiles = deepZoomTileCache.get(url);
+            //Tile.unschedule(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);
             }
         }
@@ -7839,10 +7930,11 @@
          * @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 0
             }
             return tiles.size
         }
@@ -7854,19 +7946,83 @@
          * @memberof Tile
          */
         destroy(options, debug = false) {
-            if (this.parent != null) ;
             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();
+                    if (Tile.isObsolete(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 };
-                if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts);
-                super.destroy(opts);
+                // No longer registered and not pending
+                if (count <= 0) { // && !Tile.isPending(this.url)
+                    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;
+                }
             }
         }
+
+        /**
+         * 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
+        }
+
+        /**
+         * Texture received too late. We do not need it.
+         * @param {*} url 
+         * @param {*} texture 
+         */
+        static lateTexture(url, texture) {
+            let destroyBase = !registeredTiles.has(url);
+            texture.destroy(destroyBase);
+        }
+
+        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 });
+        }
     }
 
     /**
@@ -7897,6 +8053,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);
@@ -7906,6 +8064,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);
         }
 
@@ -7931,9 +8090,14 @@
                 console.warn("Tile already loaded");
                 tile.unregister();
             }
-            tile = new Tile(texture, url);
-            this.loaded.set(url, tile);
-            this.tiles.tileAvailable(tile, col, row, url);
+            try {
+                tile = new Tile(texture, url);
+                this.loaded.set(url, tile);
+                this.tiles.tileAvailable(tile, col, row, url);
+            } catch (error) {
+                console.warn("Tile loading error", error);
+            }
+            
         }
     }
 
@@ -7960,16 +8124,13 @@
             if (this.loaded.has(url)) return false
             if (this.loading.has(url)) return false
 
-            if (deepZoomTileCache.has(url)) {
-                let tiles = deepZoomTileCache.get(url);
-                for (let tile of tiles.values()) {
-                    //console.log("Reusing cached texture", tile.parent)
-                    let texture = tile.texture;
-                    this._textureAvailable(url, col, row, texture);
-                    return false
-                }
+            //Tile.schedule(url)
+            let reusableTexture = Tile.textureAvailable(url);
+            if (reusableTexture) {
+                if (this.debug) console.log('Texture reusable', reusableTexture);
+                this._textureAvailable(url, col, row, reusableTexture);
+                return false
             }
-            
             let texture = PIXI.utils.TextureCache[url];
             if (texture) {
                 if (this.debug) console.log('Texture already loaded', texture);
@@ -8024,8 +8185,8 @@
         _onLoaded(loader, resource) {
             if (this.destroyed) {
                 let texture = resource.texture;
-                let destroyBase = !deepZoomTileCache.has(resource.url);
-                texture.destroy(destroyBase);
+                let url = resource.url;
+                Tile.lateTexture(url, texture);
                 console.warn("Received resource after destroy", texture);
                 return
             }
@@ -8486,19 +8647,6 @@
         return n % 2 == 0
     }
 
-
-    function printTileCacheInfos() {
-        let references = new Map();
-        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.
      * height and width of the overall image, overlap, and image type.
@@ -8853,6 +9001,7 @@
                 : 1;
             this.alpha = alpha;
             this.fastLoads = 0;
+            this.active = true;
             this.autoLoadTiles = autoLoadTiles;
             this.minimumLevel = minimumLevel;
             this.quadTrees = new Map(); // url as keys, TileQuadNodes as values
@@ -8903,7 +9052,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);
             }
@@ -9124,9 +9273,9 @@
         }
 
         worldBounds() {
-            let viewBounds = this.app.scene.getBounds();
+            let viewBounds = this.app.scene.bounds || this.app.scene.getBounds(); 
             // Using getBounds extends visible scope after loading tiles and leads
-            // to excessive loading
+            // to excessive loading. So we prefer bounds over getBounds()
             if (this.world != null) {
                 let bounds = this.world.bounds;
                 let x = Math.max(-bounds.width, bounds.x);
@@ -9506,6 +9655,9 @@
          * @param {boolean} debug - log debug infos
          */
         transformed(event) {
+            if (!this.active) {
+                return
+            }
             let key = this.currentLevel.toString();
             let currentTiles = this.tileLayers[key];
             if (typeof currentTiles == 'undefined') {
@@ -9553,6 +9705,7 @@
        * @memberof DeepZoomImage
        */
         activate() {
+            this.active = true;
             this.destroyTilesAboveLevel(this.currentLevel);
             this.ensureTiles(this.currentLevel, null);
             //console.log("Activate Textures!", this.currentLevel)
@@ -9564,35 +9717,19 @@
        * @memberof DeepZoomImage
        */
         deactivate() {
+            this.active = false;
             this.destroyAllTiles();
-            Object.keys(this.tileLayers).forEach(key => {
-                this.destroyTiles(key);
-            });
             this.tileContainer.destroy({ children: true });
-            printTileCacheInfos();
         }
 
         throwFinished() {
-            console.log("throwFinished");
+            //console.log("throwFinished")
             let key = this.currentLevel.toString();
             let currentTiles = this.tileLayers[key];
             if (typeof currentTiles == 'undefined') {
                 return
             }
-
             this.ensureTiles(this.currentLevel);
-            // let all = new Set()
-            // for (let tile of currentTiles.children) {
-            //     all.add(tile.url)
-            // }
-            // let { centerCol, centerRow, needed } = this.neededTiles(currentTiles, this.currentLevel)
-            // for (let [url, col, row] of needed) {
-            //     all.delete(url)
-            // }
-            // for (let url of all) {
-            //     currentTiles.destroyTileByUrl(url)
-            // }
-            // currentTiles.loader.loader.reset()
         }
     }
 

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/interaction.html

@@ -23,7 +23,7 @@ a single delegate pattern.
 <p>The main differences are that <code>PointerEvent</code> are fired for each
 touch point, whereas the <code>TouchEvent</code> collects multiple
 <code>TouchPoints</code> into a single event. The basic PointMap and Interaction
-classes unify this behavior by collection all contact points regardless
+classes unify this behavior by collecting all contact points regardless
 of their original mouse, touch, or pointer events.</p>
 <h2>
     Point Maps

lib/logging.js

@@ -1,11 +1,17 @@
 let ipc = null
+let logMessages = new Set()
 
 try {
     ipc = require('electron').ipcRenderer
-} catch (e) {}
+} catch (e) {
+    console.log("Cannot use electron logging.")
+}
 
 /** Basic class for app specific logging requirements.
  * Can be used to implement persistent logging in electron apps.
+ * Uses a logMessage cache to prevent error overflows. This is 
+ * needed since errors may occur very frequently
+ * (e.g. display update loops at 60fps, programmatic loops, ...).
  */
 export default class Logging {
 
@@ -20,4 +26,36 @@ export default class Logging {
             console.log(message)
         }
     }
+
+    /**
+     * Static warn function. 
+     * Emits each warning only once per session.
+     * @param {*} message 
+     */
+    static warn(message) {
+        if (!logMessages.has(message)) {
+            logMessages.add(message)
+            if (ipc) {
+                ipc.send('warn', message)
+            } else {
+                console.warn(message)
+            }
+        }
+    }
+
+    /**
+    * Static error function. 
+    * Emits each error message only once per session.
+    * @param {*} message 
+    */
+    static error(message) {
+        if (!logMessages.has(message)) {
+            logMessages.add(message)
+            if (ipc) {
+                ipc.send('error', message)
+            } else {
+                console.error(message)
+            }
+        }
+    }
 }

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,25 +1,12 @@
 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()
-    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.
  * height and width of the overall image, overlap, and image type.
@@ -374,6 +361,7 @@ export class DeepZoomImage extends PIXI.Container {
             : 1
         this.alpha = alpha
         this.fastLoads = 0
+        this.active = true
         this.autoLoadTiles = autoLoadTiles
         this.minimumLevel = minimumLevel
         this.quadTrees = new Map() // url as keys, TileQuadNodes as values
@@ -424,7 +412,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)
         }
@@ -645,9 +633,9 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     worldBounds() {
-        let viewBounds = this.app.scene.getBounds()
+        let viewBounds = this.app.scene.bounds || this.app.scene.getBounds() 
         // Using getBounds extends visible scope after loading tiles and leads
-        // to excessive loading
+        // to excessive loading. So we prefer bounds over getBounds()
         if (this.world != null) {
             let bounds = this.world.bounds
             let x = Math.max(-bounds.width, bounds.x)
@@ -1027,6 +1015,9 @@ export class DeepZoomImage extends PIXI.Container {
      * @param {boolean} debug - log debug infos
      */
     transformed(event) {
+        if (!this.active) {
+            return
+        }
         let key = this.currentLevel.toString()
         let currentTiles = this.tileLayers[key]
         if (typeof currentTiles == 'undefined') {
@@ -1074,6 +1065,7 @@ export class DeepZoomImage extends PIXI.Container {
    * @memberof DeepZoomImage
    */
     activate() {
+        this.active = true
         this.destroyTilesAboveLevel(this.currentLevel)
         this.ensureTiles(this.currentLevel, null)
         //console.log("Activate Textures!", this.currentLevel)
@@ -1085,34 +1077,18 @@ export class DeepZoomImage extends PIXI.Container {
    * @memberof DeepZoomImage
    */
     deactivate() {
+        this.active = false
         this.destroyAllTiles()
-        Object.keys(this.tileLayers).forEach(key => {
-            this.destroyTiles(key)
-        })
         this.tileContainer.destroy({ children: true })
-        printTileCacheInfos()
     }
 
     throwFinished() {
-        console.log("throwFinished")
+        //console.log("throwFinished")
         let key = this.currentLevel.toString()
         let currentTiles = this.tileLayers[key]
         if (typeof currentTiles == 'undefined') {
             return
         }
-
         this.ensureTiles(this.currentLevel)
-        // let all = new Set()
-        // for (let tile of currentTiles.children) {
-        //     all.add(tile.url)
-        // }
-        // let { centerCol, centerRow, needed } = this.neededTiles(currentTiles, this.currentLevel)
-        // for (let [url, col, row] of needed) {
-        //     all.delete(url)
-        // }
-        // for (let url of all) {
-        //     currentTiles.destroyTileByUrl(url)
-        // }
-        // currentTiles.loader.loader.reset()
     }
 }

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)
     }
 
@@ -62,9 +65,14 @@ export class TileLoader {
             console.warn("Tile already loaded")
             tile.unregister()
         }
-        tile = new Tile(texture, url)
-        this.loaded.set(url, tile)
-        this.tiles.tileAvailable(tile, col, row, url)
+        try {
+            tile = new Tile(texture, url)
+            this.loaded.set(url, tile)
+            this.tiles.tileAvailable(tile, col, row, url)
+        } catch (error) {
+            console.warn("Tile loading error", error)
+        }
+        
     }
 }
 
@@ -91,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)) {
-            let tiles = deepZoomTileCache.get(url)
-            for (let tile of tiles.values()) {
-                //console.log("Reusing cached texture", tile.parent)
-                let texture = tile.texture
-                this._textureAvailable(url, col, row, texture)
-                return false
-            }
+        //Tile.schedule(url)
+        let reusableTexture = Tile.textureAvailable(url)
+        if (reusableTexture) {
+            if (this.debug) console.log('Texture reusable', reusableTexture)
+            this._textureAvailable(url, col, row, reusableTexture)
+            return false
         }
-        
         let texture = PIXI.utils.TextureCache[url]
         if (texture) {
             if (this.debug) console.log('Texture already loaded', texture)
@@ -155,8 +160,8 @@ export class PIXITileLoader extends TileLoader {
     _onLoaded(loader, resource) {
         if (this.destroyed) {
             let texture = resource.texture
-            let destroyBase = !deepZoomTileCache.has(resource.url)
-            texture.destroy(destroyBase)
+            let url = resource.url
+            Tile.lateTexture(url, texture)
             console.warn("Received resource after destroy", texture)
             return
         }

lib/pixi/deepzoom/tile.js

@@ -1,19 +1,66 @@
+/* ES Lint  */
+/* globals PIXI, console*/
 
-export const deepZoomTileCache = new Map()
-
+const registeredTiles = new Map()
+/** Implements a baseTexture cache. The last textures are kept for reuse  */
+let keepTextures = 0
+const keptTextures = []
+const lateTextures = new Map()
+let lastSweepTime = 0
+let sweepInterval = 2000.0
 
 /** 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
+    }
+
+    /**
+     * Returns true iff the url is pending
+     *
+     * @static
+     * @param {*} url
+     * @returns
+     * @memberof Tile
+     */
+    /*static isPending(url) {
+        return pendingTiles.has(url) && pendingTiles.get(url) > 0
+    } */
+
+    static isObsolete(url) {
+        if (registeredTiles.has(url) && registeredTiles.get(url) > 0) {
+            return false
+        }
+        return true
+    }
+
+    /**
+     * 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 +73,14 @@ export class Tile extends PIXI.Sprite {
      * @memberof Tile
      */
     register(url, debug = false) {
-        if (deepZoomTileCache.has(url)) {
-            let tiles = deepZoomTileCache.get(url)
+        //Tile.unschedule(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 +92,11 @@ 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 0
         }
         return tiles.size
     }
@@ -59,19 +108,127 @@ export class Tile extends PIXI.Sprite {
      * @memberof Tile
      */
     destroy(options, debug = false) {
-        if (this.parent != null) {
-
-        }
         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()
+                if (Tile.isObsolete(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 }
-            if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts)
-            super.destroy(opts)
+            // No longer registered and not pending
+            if (count <= 0) { // && !Tile.isPending(this.url)
+                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
+            }
         }
     }
+
+    /**
+     * 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
+    }
+
+    /**
+     * Specialized renderWebGL to avoid freezing system
+     *
+     * @param {*} renderer
+     * @memberof Tile
+     */
+    renderWebGL(renderer) {
+        try {
+            super.renderWebGL(renderer)
+        }
+        catch (e) {
+            // We want persistent logging here
+            Logging.error("Error in Tile.renderWebGL: " + e.message)
+        }
+    }
+
+    /**
+     * Removes lately arrived texture if they have not been touched in the meanwhile.
+     *
+     * @static
+     * @memberof Tile
+     */
+    static sweepLateTextures() {
+        let now = performance.now()
+        if (now > lastSweepTime + sweepInterval) {
+            lastSweepTime = now
+            let count = 0
+            for (let [url, texture] of lateTextures.entries()) {
+                if (texture) {
+                    let base = texture.baseTexture
+                    if (base != null && base.touched == 0) {
+                        texture.destroy(true)
+                        //console.info("Sweeping ", url)
+                        count += 1
+                        lateTextures.delete(url)
+                    }
+                }
+            }
+            if (count > 0)
+                console.log("Sweeping textures", count)
+        }
+    }
+
+    /**
+     * Texture received too late. We do not need it.
+     * @param {*} url 
+     * @param {*} texture 
+     */
+    static lateTexture(url, texture) {
+        lateTextures.set(url, texture)
+        //console.warn("Tile.lateTexture")
+        // We cannot destroy the texture since we got errors in t.renderWebGL.
+        // Perhaps we can destroy unsed textures later on
+        Tile.sweepLateTextures()
+    }
+
+    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 })
+    }
 }

lib/scatter.js

@@ -173,11 +173,16 @@ class Throwable {
         }
     }
 
+    _throwDeltaTime() {
+        let t = performance.now()
+        let dt = t - this.lastframe
+        this.lastframe = t
+        return dt
+    }
+
     animateThrow(time) {
         if (this.velocity != null) {
-            let t = performance.now()
-            let dt = t - this.lastframe
-            this.lastframe = t
+            let dt = this._throwDeltaTime()
             // console.log("animateThrow", dt)
             let next = this.nextVelocity(this.velocity)
             let prevLength = Points.length(this.velocity)
@@ -1434,7 +1439,7 @@ export class DOMScatter extends AbstractScatter {
             let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected))
             let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
 
-            if (this.element.offsetWidth + resizeW / this.scale > this.width * 0.3 && this.element.offsetHeight + resizeH / this.scale > this.height * 0.3) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
+            if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3  / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });
 
             this.oldX = e.clientX
             this.oldY = e.clientY

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iwmlib",
-    "version": "1.0.8",
+    "version": "1.0.14",
     "description": "An Open Source library for multi-touch, WebGL powered applications.",
     "main": "index.js",
     "directories": {
@@ -28,6 +28,7 @@
         "gulp-uglify": "^3.0.2"
     },
     "dependencies": {
+        "fs-extra": "^8.0.1",
         "gsap": "^2.1.3",
         "hammerjs": "^2.0.8",
         "optimal-select": "^4.0.1",