Version 1.0.12.

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}\\index.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "testrunner",
+            "program": "${workspaceFolder}\\bin\\testrunner.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "single",
+            "program": "${workspaceFolder}\\bin\\singleshot.js"
+        }
+    ]
+}

README.md

@@ -47,4 +47,4 @@ Afterwards you can view the documentation here:
 ## List of 3<sup>rd</sup> party libraries included
 
 - [PixiJS](http://www.pixijs.com)
-- [Greensock](https://greensock.com) with TweenLite
+- [Greensock](https://greensock.com) with TweenMax and TimelineMax

bin/README.md

@@ -0,0 +1,23 @@
+Testrunner prerequisites
+========================
+
+npm install puppeteer
+
+
+testrunner.js
+-------------
+start from iwmlib directory with node testrunner
+
+defined in package.json
+"testrunner": "node bin/testrunner.js"
+
+or in vscode, defined in launch.json like
+{
+    "type": "node",
+    "request": "launch",
+    "name": "testrunner",
+    "program": "${workspaceFolder}\\bin\\testrunner.js"
+}
+
+iterates all doctest.html files that are listed in index.html
+create a screenshot of all pages

bin/singleshot.js

@@ -0,0 +1,70 @@
+/**
+ * test one single page, make a screenshot and log errors to 
+ * console
+ * (c) 2019 - Leibniz-Insitut für Wissensmedien
+ * 
+ */
+const puppeteer = require('puppeteer');
+const fs = require("fs")
+const path = require("path")
+const start_dir = process.cwd()
+
+
+// const start_file = path.join(start_dir,"lib","frames.html")
+const start_file = path.join(start_dir,"lib","pixi","badge.html")
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+const events = ["error","pageerror"]
+function logPageEvent(event){
+    if(event !== undefined){
+         console.log(event.message)
+    }
+}
+
+async function makeScreenshot(href){
+    
+    const browser = await puppeteer.launch({
+        // headless: false,
+        // loglevel : 0,
+        args : [
+        '–allow-file-access-from-files',
+      ],});
+    const page = await browser.newPage();
+    
+    await page.setViewport({width: 1024,height : 624})
+    for (var i = 0; i < events.length; i++) {
+        page.on(events[i],logPageEvent)
+    }
+    page.once("load",logPageEvent)
+
+    // await Promise.all([ page.coverage.startJSCoverage() ]);
+    await page.goto(href)
+    // const jsCoverage = await Promise.all([ page.coverage.stopJSCoverage() ]);
+
+    const fname = path.parse(href).name
+
+    if (fname != "index"){
+        image_url = href.replace(fname + ".html" ,"thumbnails/" + fname + ".png")
+    }
+    else{
+        image_url = href.replace(fname + ".html" ,"thumbnail.png")
+    }
+    image_url = image_url.replace("file:///","")
+    console.log(image_url)
+    // console.log(jsCoverage)
+    
+    page.removeAllListeners()
+    
+    await page.screenshot({path: image_url});
+    await browser.close();
+}
+
+
+(async function(){
+
+        await makeScreenshot(start_file)
+    }
+)()

bin/testrunner.js

@@ -0,0 +1,116 @@
+/**
+ * 
+ * make screenshots and log errors to 
+ * console
+ * (c) 2019 - Leibniz-Insitut für Wissensmedien
+ * 
+ */
+
+const puppeteer = require('puppeteer');
+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")
+
+const start_file_uri = path.join("file:///", start_file )
+
+// define events and log them
+const events = ["error","pageerror"]
+function logPageEvent(event){
+    if (event !== undefined){
+     console.log(event.toString())
+    }
+}
+
+async function makeScreenshot(href){
+    
+    const browser = await puppeteer.launch({args: [
+        '–allow-file-access-from-files',
+      ],});
+
+    const page = await browser.newPage();
+    
+    await page.setViewport({width: 1024,height : 624})
+
+    // register events
+    for (var i = 0; i < events.length; i++) {
+        page.on(events[i],logPageEvent)
+    }
+    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:///","")
+    // fpath = fpath.replace("file:///","")
+    
+    page.removeAllListeners()
+    
+    fs.ensureDir(fpath)
+
+    await page.screenshot({path: image_url});
+    await browser.close();
+}
+
+/**
+ * 
+ * collect all navigational links in all documents
+ *  
+ * */ 
+
+async function collectLinks(href,reflist)
+{
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+
+
+    await page.goto(href)
+    let hrefs = await page.$$('a.wrapper')
+    
+    for (var i=0; i < hrefs.length; i++) {
+        let hrefValue = await hrefs[i].getProperty('href')
+        let linkText = await hrefValue.jsonValue();
+        if (!linkText.startsWith("file:"))
+        { 
+            continue;
+        }
+        if(linkText.endsWith("#")) continue;
+        if(linkText.endsWith("index.html")){
+            await collectLinks(linkText,reflist)
+        }
+        reflist.push(linkText)
+    }
+
+    await browser.close()
+}
+
+(async function(){
+    var reflist = []
+    let linkText = "file:///" + start_file.replace(/\\/g,"/")
+    reflist.push(linkText)
+    await collectLinks(start_file_uri,reflist)
+
+    // sort by path length to get depth first
+    reflist.sort(function(a,b){
+        let al = a.split("/").length
+        let bl = b.split("/").length
+
+        if (al < bl)  {return  1 }
+        if (al > bl)  {return -1 }
+        if (al == bl) {return  0 }
+    })
+    for (var i=0;i<reflist.length; i++) {
+        await makeScreenshot(reflist[i])
+        console.log(i,reflist[i])
+    }
+})()

dist/iwmlib.js

@@ -1687,12 +1687,23 @@
     }
 
     class InteractionDelta {
-        constructor(x, y, zoom, rotate, about) {
+        /**
+         *Creates an instance of InteractionDelta.
+         * @param {*} x
+         * @param {*} y
+         * @param {*} zoom
+         * @param {*} rotate
+         * @param {*} about
+         * @param {*} number - number of involved pointer
+         * @memberof InteractionDelta
+         */
+        constructor(x, y, zoom, rotate, about, number) {
             this.x = x;
             this.y = y;
             this.zoom = zoom;
             this.rotate = rotate;
             this.about = about;
+            this.number = number;
         }
 
         toString() {
@@ -1766,16 +1777,13 @@
                 let p1 = this.previous.get(c1.key);
                 let p2 = this.previous.get(c2.key);
 
-                //let p1 = previous[0]
-                //let p2 = previous[1]
-
                 let d1 = Points.subtract(c1, p1);
                 let d2 = Points.subtract(c2, p2);
                 let cm = Points.mean(c1, c2);
-                //let pm = Points.mean(p1, p2)
-                // UO: Using the mean lead to jumps between time slices with 3 and 2 fingers
+                
+                // Using the mean leads to jumps between time slices with 3 and 2 fingers
                 // We use the mean of deltas instead
-                let delta = Points.mean(d1, d2); //Points.subtract(cm, pm)
+                let delta = Points.mean(d1, d2); 
                 let zoom = 1.0;
                 let distance1 = Points.distance(p1, p2);
                 let distance2 = Points.distance(c1, c2);
@@ -1785,13 +1793,14 @@
                 let currentAngle = Points.angle(c1, c2);
                 let previousAngle = Points.angle(p1, p2);
                 let alpha = this.diffAngle(currentAngle, previousAngle);
-                return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm)
+                return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize)
             } else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
-                // We need to ensure that the keys are the same
+                // We need to ensure that the keys are the same, since single points with different keys
+                // can jump
                 let current = this.current.first();
                 let previous = this.previous.first();
                 let delta = Points.subtract(current, previous);
-                return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current)
+                return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
             }
             return null
         }
@@ -2327,6 +2336,8 @@
         onMouseWheel(event) {
             if (this.capture(event) && this.target.onMouseWheel) {
                 this.target.onMouseWheel(event);
+            } else {
+                //console.warn('Target has no onMouseWheel callback')
             }
         }
 
@@ -2520,6 +2531,8 @@
                 }
                 if (this.target.onMouseWheel) {
                     this.target.onMouseWheel(event);
+                } else {
+                    //console.warn('Target has no onMouseWheel callback', this.target)
                 }
             }
         }
@@ -2940,7 +2953,9 @@
             this.lastframe = t;
             if (dt > 0) {
                 // Avoid division by zero errors later on
-                let velocity = { t: t, dt: dt, dx: delta.x, dy: delta.y };
+                // and consider the number of involved pointers sind addVelocity will be called by the
+                // onMove events
+                let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number};
                 this.velocities.push(velocity);
                 while (this.velocities.length > buffer) {
                     this.velocities.shift();
@@ -2949,7 +2964,7 @@
         }
 
         meanVelocity(milliseconds = 30) {
-            this.addVelocity({ x: 0, y: 0 });
+            this.addVelocity({ x: 0, y: 0, number: 1 });
             let sum = { x: 0, y: 0 };
             let count = 0;
             let t = 0;
@@ -3221,7 +3236,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) {
@@ -4189,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) {
@@ -4945,11 +4965,13 @@
                 //console.log("iconSrc", iconSrc)
                 if (iconSrc.endsWith('index.png')) {
                     icon.src = iconSrc.replace('index.png', 'thumbnail.png');
-                } else if (iconSrc.endsWith('test.png')) {
-                    icon.src = iconSrc.replace('test.png', 'thumbnail.test.png');
-                } else {
+                } 
+                else {
                     icon.src = 'thumbnails/' + iconSrc;
                 }
+
+                // icon.src = 'thumbnails/' + iconSrc
+                // console.log(iconSrc)
                 wrapper.href = src;
                 let titleDiv = wrapper.querySelector('.title');
                 titleDiv.innerText = title;

dist/iwmlib.pixi.js

@@ -4851,12 +4851,23 @@
     }
 
     class InteractionDelta {
-        constructor(x, y, zoom, rotate, about) {
+        /**
+         *Creates an instance of InteractionDelta.
+         * @param {*} x
+         * @param {*} y
+         * @param {*} zoom
+         * @param {*} rotate
+         * @param {*} about
+         * @param {*} number - number of involved pointer
+         * @memberof InteractionDelta
+         */
+        constructor(x, y, zoom, rotate, about, number) {
             this.x = x;
             this.y = y;
             this.zoom = zoom;
             this.rotate = rotate;
             this.about = about;
+            this.number = number;
         }
 
         toString() {
@@ -4930,16 +4941,13 @@
                 let p1 = this.previous.get(c1.key);
                 let p2 = this.previous.get(c2.key);
 
-                //let p1 = previous[0]
-                //let p2 = previous[1]
-
                 let d1 = Points.subtract(c1, p1);
                 let d2 = Points.subtract(c2, p2);
                 let cm = Points.mean(c1, c2);
-                //let pm = Points.mean(p1, p2)
-                // UO: Using the mean lead to jumps between time slices with 3 and 2 fingers
+                
+                // Using the mean leads to jumps between time slices with 3 and 2 fingers
                 // We use the mean of deltas instead
-                let delta = Points.mean(d1, d2); //Points.subtract(cm, pm)
+                let delta = Points.mean(d1, d2); 
                 let zoom = 1.0;
                 let distance1 = Points.distance(p1, p2);
                 let distance2 = Points.distance(c1, c2);
@@ -4949,13 +4957,14 @@
                 let currentAngle = Points.angle(c1, c2);
                 let previousAngle = Points.angle(p1, p2);
                 let alpha = this.diffAngle(currentAngle, previousAngle);
-                return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm)
+                return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize)
             } else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
-                // We need to ensure that the keys are the same
+                // We need to ensure that the keys are the same, since single points with different keys
+                // can jump
                 let current = this.current.first();
                 let previous = this.previous.first();
                 let delta = Points.subtract(current, previous);
-                return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current)
+                return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
             }
             return null
         }
@@ -5491,6 +5500,8 @@
         onMouseWheel(event) {
             if (this.capture(event) && this.target.onMouseWheel) {
                 this.target.onMouseWheel(event);
+            } else {
+                //console.warn('Target has no onMouseWheel callback')
             }
         }
 
@@ -5684,6 +5695,8 @@
                 }
                 if (this.target.onMouseWheel) {
                     this.target.onMouseWheel(event);
+                } else {
+                    //console.warn('Target has no onMouseWheel callback', this.target)
                 }
             }
         }
@@ -6104,7 +6117,9 @@
             this.lastframe = t;
             if (dt > 0) {
                 // Avoid division by zero errors later on
-                let velocity = { t: t, dt: dt, dx: delta.x, dy: delta.y };
+                // and consider the number of involved pointers sind addVelocity will be called by the
+                // onMove events
+                let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number};
                 this.velocities.push(velocity);
                 while (this.velocities.length > buffer) {
                     this.velocities.shift();
@@ -6113,7 +6128,7 @@
         }
 
         meanVelocity(milliseconds = 30) {
-            this.addVelocity({ x: 0, y: 0 });
+            this.addVelocity({ x: 0, y: 0, number: 1 });
             let sum = { x: 0, y: 0 };
             let count = 0;
             let t = 0;
@@ -6385,7 +6400,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) {
@@ -7191,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) {
@@ -7783,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.
      *
@@ -7798,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)
         }
@@ -7810,13 +7901,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);
             }
         }
@@ -7828,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
         }
@@ -7842,19 +7934,75 @@
          * @param {*} options  Part of the PIXI API, but ignored in the implementation
          * @memberof Tile
          */
-        destroy(options, debug = false) {
-            if (this.parent != null) ;
+        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 };
-                if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts);
-                super.destroy(opts);
+                // No longer registered and not pending
+                if (count <= 0 && !Tile.isPending(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
+        }
+
+        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 });
         }
     }
 
@@ -7886,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);
@@ -7895,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);
         }
 
@@ -7920,9 +8071,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);
+            }
+            
         }
     }
 
@@ -7949,16 +8105,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);
@@ -8475,18 +8628,8 @@
         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 });
+        Tile.printInfos();
     }
     /**
      * A utility class that holds information typically provided by DZI files, i.e.
@@ -8892,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);
             }
@@ -9113,7 +9256,7 @@
         }
 
         worldBounds() {
-            let viewBounds = this.app.scene.bounds;
+            let viewBounds = this.app.scene.getBounds();
             // Using getBounds extends visible scope after loading tiles and leads
             // to excessive loading
             if (this.world != null) {
@@ -9924,7 +10067,7 @@
          * @param {boolean} [opts.shadow=false] - Should be a shadow been display during the animation?
          * @param {numer} [opts.eulerX=0] - The shift of the x-axis during the animation.
          * @param {numer} [opts.eulerY=0] - The shift of the y-axis during the animation.
-         * @param {GSAP.Ease} [opts.eulerEase=Sine.easeOut] - The ease of the shift.
+         * @param {GSAP.Ease} [opts.eulerEase=Power1.easeOut] - The ease of the shift.
          * @param {boolean} [opts.useBackTransforms=false] - When set to true, the flip animation also animates to the transform parameters of the back-object.
          * @param {GSAP.Ease} [opts.transformEase=Power2.easeOut] - The ease of the transform.
          * @param {numer} [opts.focus=800] - The value of the focus of the 3D camera (see pixi-projection).
@@ -9948,7 +10091,7 @@
                 shadow: false,
                 eulerX: 0,
                 eulerY: 0,
-                eulerEase: Sine.easeOut,
+                eulerEase: Power1.easeOut,
                 useBackTransforms: false,
                 transformEase: Power2.easeOut,
                 focus: 800,

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)
         }

gulpfile.js

@@ -15,7 +15,8 @@ function vendors() {
         './node_modules/pixi-filters/dist/pixi-filters.js',
         './node_modules/pixi-particles/dist/pixi-particles.js',
         './node_modules/pixi-projection/dist/pixi-projection.js',
-        './node_modules/gsap/src/uncompressed/TweenLite.js',
+        './node_modules/gsap/src/uncompressed/TweenMax.js',
+        './node_modules/gsap/src/uncompressed/TimelineMax.js',
         './lib/3rdparty/pixi-ease.js',
         './lib/3rdparty/pixi-viewport.js',
         './lib/3rdparty/convertPointFromPageToNode.js'
@@ -30,7 +31,7 @@ function vendors() {
 
 function preload() {
     return src([
-        './node_modules/gsap/src/uncompressed/TweenLite.js',
+        './node_modules/gsap/src/uncompressed/TweenMax.js',
         './lib/3rdparty/convertPointFromPageToNode.js',
     ], {sourcemaps: false})
         .pipe(concat('iwmlib.3rdparty.preload.js'))

lib/doctest.html

@@ -6,8 +6,8 @@
 	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
 	<script src="./3rdparty/highlight/highlight.pack.js"></script>
-	<script src="./3rdparty/all.js"></script>
-	<script src="../dist/iwmlib.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()">
 <main>

lib/examples/multitouch.html

@@ -50,9 +50,9 @@
         }
     </style>
 
-    <script type="text/javascript" src=".././3rdparty/all.js"></script>
-    <script type="text/javascript" src="../../lib/pixi/all.js"></script>
-    <script type="text/javascript" src="../../lib/all.js"></script>
+<script src="../../dist/iwmlib.3rdparty.js"></script>
+<script src="../../dist/iwmlib.js"></script>
+<script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 
 <body class="site" onload="loaded()">

lib/index.js

@@ -30,11 +30,13 @@ export default class Index {
             //console.log("iconSrc", iconSrc)
             if (iconSrc.endsWith('index.png')) {
                 icon.src = iconSrc.replace('index.png', 'thumbnail.png')
-            } else if (iconSrc.endsWith('test.png')) {
-                icon.src = iconSrc.replace('test.png', 'thumbnail.test.png')
-            } else {
+            } 
+            else {
                 icon.src = 'thumbnails/' + iconSrc
             }
+
+            // icon.src = 'thumbnails/' + iconSrc
+            // console.log(iconSrc)
             wrapper.href = src
             let titleDiv = wrapper.querySelector('.title')
             titleDiv.innerText = title

lib/interaction.js

@@ -122,12 +122,23 @@ export class PointMap extends MapProxy {
 }
 
 export class InteractionDelta {
-    constructor(x, y, zoom, rotate, about) {
+    /**
+     *Creates an instance of InteractionDelta.
+     * @param {*} x
+     * @param {*} y
+     * @param {*} zoom
+     * @param {*} rotate
+     * @param {*} about
+     * @param {*} number - number of involved pointer
+     * @memberof InteractionDelta
+     */
+    constructor(x, y, zoom, rotate, about, number) {
         this.x = x
         this.y = y
         this.zoom = zoom
         this.rotate = rotate
         this.about = about
+        this.number = number
     }
 
     toString() {
@@ -201,16 +212,13 @@ export class InteractionPoints {
             let p1 = this.previous.get(c1.key)
             let p2 = this.previous.get(c2.key)
 
-            //let p1 = previous[0]
-            //let p2 = previous[1]
-
             let d1 = Points.subtract(c1, p1)
             let d2 = Points.subtract(c2, p2)
             let cm = Points.mean(c1, c2)
-            //let pm = Points.mean(p1, p2)
-            // UO: Using the mean lead to jumps between time slices with 3 and 2 fingers
+            
+            // Using the mean leads to jumps between time slices with 3 and 2 fingers
             // We use the mean of deltas instead
-            let delta = Points.mean(d1, d2) //Points.subtract(cm, pm)
+            let delta = Points.mean(d1, d2) 
             let zoom = 1.0
             let distance1 = Points.distance(p1, p2)
             let distance2 = Points.distance(c1, c2)
@@ -220,13 +228,14 @@ export class InteractionPoints {
             let currentAngle = Points.angle(c1, c2)
             let previousAngle = Points.angle(p1, p2)
             let alpha = this.diffAngle(currentAngle, previousAngle)
-            return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm)
+            return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize)
         } else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
-            // We need to ensure that the keys are the same
+            // We need to ensure that the keys are the same, since single points with different keys
+            // can jump
             let current = this.current.first()
             let previous = this.previous.first()
             let delta = Points.subtract(current, previous)
-            return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current)
+            return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
         }
         return null
     }

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()
-    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 })
+    Tile.printInfos()
 }
 /**
  * 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)
         }
@@ -645,7 +635,7 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     worldBounds() {
-        let viewBounds = this.app.scene.bounds
+        let viewBounds = this.app.scene.bounds // UO: Never use getBounds()
         // Using getBounds extends visible scope after loading tiles and leads
         // to excessive loading
         if (this.world != null) {
@@ -1049,7 +1039,7 @@ export class DeepZoomImage extends PIXI.Container {
             this.ensureTiles(this.currentLevel, event.about)
             return
         }
-        
+
         let level = this.levelForScale(event.scale)
         let newLevel = Math.max(level, this.minimumLevel)
         if (newLevel != this.currentLevel) {
@@ -1086,15 +1076,12 @@ export class DeepZoomImage extends PIXI.Container {
    */
     deactivate() {
         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') {

lib/pixi/deepzoom/index.html

@@ -22,8 +22,9 @@
     </template>
 </head>
 <body>
-<div id="container" class="container">
-</div>
+    <div id="container" class="container">
+        <a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
+    </div>
 <script>
 const index = new Index(itemTemplate, [
         ['Deepzoom', 'deepzoom.html'],

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,98 @@
 
-export const deepZoomTileCache = new Map()
-
+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.
  *
  * 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
+     * @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
+    }
+
+    /**
+     * 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 +105,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 +124,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 +140,81 @@ 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
+    }
+
+    /**
+     * 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 })
+    }
 }

lib/pixi/flippable.html

@@ -13,6 +13,8 @@
 
     <script src="../../dist/iwmlib.js"></script>
     <script src="../../dist/iwmlib.pixi.js"></script>
+
+    <script src="../3rdparty/gsap/src/minified/TweenMax.min.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Flippable</h1>

lib/pixi/flippable.js

@@ -56,7 +56,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
      * @param {boolean} [opts.shadow=false] - Should be a shadow been display during the animation?
      * @param {numer} [opts.eulerX=0] - The shift of the x-axis during the animation.
      * @param {numer} [opts.eulerY=0] - The shift of the y-axis during the animation.
-     * @param {GSAP.Ease} [opts.eulerEase=Sine.easeOut] - The ease of the shift.
+     * @param {GSAP.Ease} [opts.eulerEase=Power1.easeOut] - The ease of the shift.
      * @param {boolean} [opts.useBackTransforms=false] - When set to true, the flip animation also animates to the transform parameters of the back-object.
      * @param {GSAP.Ease} [opts.transformEase=Power2.easeOut] - The ease of the transform.
      * @param {numer} [opts.focus=800] - The value of the focus of the 3D camera (see pixi-projection).
@@ -80,7 +80,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
             shadow: false,
             eulerX: 0,
             eulerY: 0,
-            eulerEase: Sine.easeOut,
+            eulerEase: Power1.easeOut,
             useBackTransforms: false,
             transformEase: Power2.easeOut,
             focus: 800,

lib/pixi/index.html

@@ -12,7 +12,7 @@
             <div class="preview">
                 <div class="thumbnail-container">
                     <div class="thumbnail">
-                        <img class="icon" >
+                        <img class="icon" src="thumbnails/notfound.png">
                         <!-- <iframe src="" frameborder="0"></iframe> -->
                      </div>
                 </div>
@@ -22,8 +22,9 @@
     </template>
 </head>
 <body>
-<div id="container" class="container">
-</div>
+    <div id="container" class="container">
+        <a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
+    </div>
 <script>
 const index = new Index(itemTemplate, [
         ['PIXI.Application', 'application.html'],
@@ -33,7 +34,6 @@ const index = new Index(itemTemplate, [
         ['ButtonGroup', 'buttongroup.html'],
         ['Coordinates', 'coordinates.html'],
         ['DeepZoom', 'deepzoom/index.html'],
-        // ['DeepZoomImage', 'deepzoomimage.html'],
         ['Flippable', 'flippable.html'],
         ['LabeledGraphics', 'labeledgraphics.html'],
         ['List', 'list.html'],

lib/pixi/modal.html

@@ -10,7 +10,6 @@
 
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
     <script src="../../dist/iwmlib.3rdparty.js"></script>
-
     <script src="../../dist/iwmlib.js"></script>
     <script src="../../dist/iwmlib.pixi.js"></script>
 </head>

lib/pixi/text.html

@@ -13,6 +13,8 @@
 
     <script src="../../dist/iwmlib.js"></script>
     <script src="../../dist/iwmlib.pixi.js"></script>
+
+    <script src="../3rdparty/d3.min.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Text</h1>

lib/scatter.js

@@ -127,7 +127,9 @@ class Throwable {
         this.lastframe = t
         if (dt > 0) {
             // Avoid division by zero errors later on
-            let velocity = { t: t, dt: dt, dx: delta.x, dy: delta.y }
+            // and consider the number of involved pointers sind addVelocity will be called by the
+            // onMove events
+            let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number}
             this.velocities.push(velocity)
             while (this.velocities.length > buffer) {
                 this.velocities.shift()
@@ -136,7 +138,7 @@ class Throwable {
     }
 
     meanVelocity(milliseconds = 30) {
-        this.addVelocity({ x: 0, y: 0 })
+        this.addVelocity({ x: 0, y: 0, number: 1 })
         let sum = { x: 0, y: 0 }
         let count = 0
         let t = 0
@@ -408,7 +410,9 @@ export class AbstractScatter extends Throwable {
 
     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) {

lib/uitest.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../css/doctest.css">
 	<script src="./3rdparty/highlight/highlight.pack.js"></script>
     <script src="../dist/iwmlib.3rdparty.js"></script>
-	<script src="../dist/iwmlib.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "iwmlib",
-    "version": "1.0.4",
+    "version": "1.0.10",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -193,6 +193,14 @@
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
             "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw=="
         },
+        "agent-base": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz",
+            "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==",
+            "requires": {
+                "es6-promisify": "^5.0.0"
+            }
+        },
         "amdefine": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -386,6 +394,11 @@
             "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
             "dev": true
         },
+        "async-limiter": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
+            "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
+        },
         "async-settle": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-1.0.0.tgz",
@@ -421,8 +434,7 @@
         "balanced-match": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-            "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-            "dev": true
+            "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "base": {
             "version": "0.11.2",
@@ -509,7 +521,6 @@
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-            "dev": true,
             "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -765,8 +776,7 @@
         "concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-            "dev": true
+            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "concat-stream": {
             "version": "1.6.2",
@@ -839,7 +849,6 @@
             "version": "2.6.9",
             "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
             "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-            "dev": true,
             "requires": {
                 "ms": "2.0.0"
             }
@@ -1039,6 +1048,19 @@
                 "es6-symbol": "^3.1.1"
             }
         },
+        "es6-promise": {
+            "version": "4.2.6",
+            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.6.tgz",
+            "integrity": "sha512-aRVgGdnmW2OiySVPUC9e6m+plolMAJKjZnQlCwNSuK5yQ0JN61DZSO1X1Ufd1foqWRAlig0rhduTCHe7sVtK5Q=="
+        },
+        "es6-promisify": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
+            "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
+            "requires": {
+                "es6-promise": "^4.0.3"
+            }
+        },
         "es6-symbol": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
@@ -1250,6 +1272,17 @@
                 }
             }
         },
+        "extract-zip": {
+            "version": "1.6.7",
+            "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
+            "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
+            "requires": {
+                "concat-stream": "1.6.2",
+                "debug": "2.6.9",
+                "mkdirp": "0.5.1",
+                "yauzl": "2.4.1"
+            }
+        },
         "falafel": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/falafel/-/falafel-2.1.0.tgz",
@@ -1280,6 +1313,14 @@
                 "time-stamp": "^1.0.0"
             }
         },
+        "fd-slicer": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
+            "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
+            "requires": {
+                "pend": "~1.2.0"
+            }
+        },
         "fill-range": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -1388,6 +1429,16 @@
                 "map-cache": "^0.2.2"
             }
         },
+        "fs-extra": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.0.1.tgz",
+            "integrity": "sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==",
+            "requires": {
+                "graceful-fs": "^4.1.2",
+                "jsonfile": "^4.0.0",
+                "universalify": "^0.1.0"
+            }
+        },
         "fs-mkdirp-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz",
@@ -1401,8 +1452,7 @@
         "fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-            "dev": true
+            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
         },
         "fsevents": {
             "version": "1.2.9",
@@ -1954,7 +2004,6 @@
             "version": "7.1.4",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
             "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
-            "dev": true,
             "requires": {
                 "fs.realpath": "^1.0.0",
                 "inflight": "^1.0.4",
@@ -2435,11 +2484,34 @@
             "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
             "dev": true
         },
+        "https-proxy-agent": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz",
+            "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==",
+            "requires": {
+                "agent-base": "^4.1.0",
+                "debug": "^3.1.0"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "3.2.6",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+                    "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                },
+                "ms": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+                    "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+                }
+            }
+        },
         "inflight": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
             "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-            "dev": true,
             "requires": {
                 "once": "^1.3.0",
                 "wrappy": "1"
@@ -2671,9 +2743,9 @@
             "dev": true
         },
         "ismobilejs": {
-            "version": "0.5.1",
-            "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-0.5.1.tgz",
-            "integrity": "sha512-QX4STsOcBYqlTjVGuAdP1MiRVxtiUbRHOKH0v7Gn1EvfUVIQnrSdgCM4zB4VCZuIejnb2NUMUx0Bwd3EIG6yyA=="
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-0.5.2.tgz",
+            "integrity": "sha512-ta9UdV60xVZk/ZafFtSFslQaE76SvNkcs1r73d2PVR21zVzx9xuYv9tNe4MxA1NN7WoeCc2RjGot3Bz1eHDx3Q=="
         },
         "isobject": {
             "version": "3.0.1",
@@ -2889,6 +2961,11 @@
                 "to-regex": "^3.0.2"
             }
         },
+        "mime": {
+            "version": "2.4.3",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.3.tgz",
+            "integrity": "sha512-QgrPRJfE+riq5TPZMcHZOtm8c6K/yYrMbKIoRfapfiGLxS8OTeIfRhUGW5LU7MlRa52KOAGCfUNruqLrIBvWZw=="
+        },
         "mini-signals": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/mini-signals/-/mini-signals-1.2.0.tgz",
@@ -2898,7 +2975,6 @@
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
             "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-            "dev": true,
             "requires": {
                 "brace-expansion": "^1.1.7"
             }
@@ -2929,11 +3005,25 @@
                 }
             }
         },
+        "mkdirp": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+            "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+            "requires": {
+                "minimist": "0.0.8"
+            },
+            "dependencies": {
+                "minimist": {
+                    "version": "0.0.8",
+                    "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+                    "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+                }
+            }
+        },
         "ms": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-            "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-            "dev": true
+            "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         },
         "murmurhash-js": {
             "version": "1.0.0",
@@ -3126,7 +3216,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
             "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-            "dev": true,
             "requires": {
                 "wrappy": "1"
             }
@@ -3215,8 +3304,7 @@
         "path-is-absolute": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-            "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-            "dev": true
+            "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
         },
         "path-parse": {
             "version": "1.0.6",
@@ -3249,6 +3337,11 @@
                 "pinkie-promise": "^2.0.0"
             }
         },
+        "pend": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+            "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
+        },
         "pify": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -3368,6 +3461,11 @@
             "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
             "dev": true
         },
+        "progress": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+            "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
+        },
         "propagating-hammerjs": {
             "version": "1.4.6",
             "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz",
@@ -3376,6 +3474,11 @@
                 "hammerjs": "^2.0.6"
             }
         },
+        "proxy-from-env": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
+            "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4="
+        },
         "pump": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
@@ -3397,6 +3500,36 @@
                 "pump": "^2.0.0"
             }
         },
+        "puppeteer": {
+            "version": "1.17.0",
+            "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.17.0.tgz",
+            "integrity": "sha512-3EXZSximCzxuVKpIHtyec8Wm2dWZn1fc5tQi34qWfiUgubEVYHjUvr0GOJojqf3mifI6oyKnCdrGxaOI+lWReA==",
+            "requires": {
+                "debug": "^4.1.0",
+                "extract-zip": "^1.6.6",
+                "https-proxy-agent": "^2.2.1",
+                "mime": "^2.0.3",
+                "progress": "^2.0.1",
+                "proxy-from-env": "^1.0.0",
+                "rimraf": "^2.6.1",
+                "ws": "^6.1.0"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "4.1.1",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+                    "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                },
+                "ms": {
+                    "version": "2.1.1",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+                    "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+                }
+            }
+        },
         "quote-stream": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/quote-stream/-/quote-stream-0.0.0.tgz",
@@ -3660,6 +3793,14 @@
             "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
             "dev": true
         },
+        "rimraf": {
+            "version": "2.6.3",
+            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+            "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+            "requires": {
+                "glob": "^7.1.3"
+            }
+        },
         "safe-buffer": {
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -4282,6 +4423,11 @@
                 "through2-filter": "^3.0.0"
             }
         },
+        "universalify": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+            "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+        },
         "unset-value": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -4463,6 +4609,14 @@
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
             "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
+        "ws": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+            "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+            "requires": {
+                "async-limiter": "~1.0.0"
+            }
+        },
         "xtend": {
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
@@ -4503,6 +4657,14 @@
             "requires": {
                 "camelcase": "^3.0.0"
             }
+        },
+        "yauzl": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
+            "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
+            "requires": {
+                "fd-slicer": "~1.0.1"
+            }
         }
     }
 }

package.json

@@ -1,13 +1,13 @@
 {
     "name": "iwmlib",
-    "version": "1.0.7",
+    "version": "1.0.12",
     "description": "An Open Source library for multi-touch, WebGL powered applications.",
     "main": "index.js",
     "directories": {
         "example": "examples"
     },
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "node bin/testrunner.js",
         "build": "rollup --config ./rollup.config.js",
         "watch": "rollup --watch --config ./rollup.config.js",
         "3rdparty": "gulp",
@@ -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",
@@ -36,6 +37,7 @@
         "pixi-particles": "^4.1.0",
         "pixi-projection": "^0.2.7",
         "pixi.js": "^4.8.7",
-        "propagating-hammerjs": "^1.4.6"
+        "propagating-hammerjs": "^1.4.6",
+        "puppeteer": "^1.16.0"
     }
 }