Fixed minor problems.

.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,109 @@
+/**
+ * 
+ * make screenshots 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","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)
+    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:///","")
+    
+    page.removeAllListeners()
+    
+    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])
+    }
+})()

css/flipeffect.css

@@ -0,0 +1,73 @@
+
+.flipWrapper
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* Fix to render
+.flipWrapper > div:first-child{
+    z-index: 1;
+} */
+
+.flipCard {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+     /*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
+    /* -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    user-drag: none; */
+}
+
+.flipFace{
+    box-shadow: 2px 2px 10px #000;
+    visibility: hidden;
+}
+
+.front{
+    width: 100%;
+    height: 100%;
+    position:absolute;
+    background-color:#333;
+}
+
+.back{
+    background-color:#333;
+    position:absolute;
+    border: 8px solid white;
+}
+
+.closeBtn {
+    transform-origin: top right;
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0px;
+    top: 0px;
+}
+
+.infoBtn {
+    transform-origin: bottom right;
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0px;
+    bottom: 0px;
+}
+
+.backBtn {
+    transform-origin: bottom right;
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0px;
+    bottom: 0px;
+}

css/index.css

@@ -0,0 +1,167 @@
+html {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+}
+
+body
+{
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+    font-family: sans-serif;
+    font-size: 22pt;
+    -webkit-tap-highlight-color: #ccc;
+    background-color: #DDD;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-overflow-scrolling: auto;
+    user-select: none;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    /* https://davidwalsh.name/font-smoothing */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+h3
+{
+    color: white;
+    padding: 4px;
+    margin: 2px;
+    background-color: rgba(0, 0, 15, .5);
+}
+
+a { text-decoration: none; }
+
+div.wrapper
+{
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    transform-origin: 0% 100%;
+    transform: scale(0.25);
+}
+
+/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
+@-webkit-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@-moz-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@-ms-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@-o-keyframes color_change {
+  from { background-color: rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+@keyframes color_change {
+  from { background-color:rgba(0, 0, 0, 0); }
+  to { background-color: red; }
+}
+
+/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
+.thumbnail
+{
+    position: relative;
+    -ms-zoom: 0.25;
+    -moz-transform: scale(0.25);
+    -moz-transform-origin: 0 0;
+    -o-transform: scale(0.25);
+    -o-transform-origin: 0 0;
+    -webkit-transform: scale(0.25);
+    -webkit-transform-origin: 0 0;
+}
+
+
+.thumbnail:after
+{
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: -1024px; /*** This is a deviation from the above mentioned
+    jamesfuthey blog. Otherwise touches would go through on iPad. ***/
+}
+
+.thumbnail iframe
+{
+    width: 1024px;
+    height: 624px;
+     -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
+    animation-delay: 3s;
+    -webkit-animation: color_change 1s infinite alternate;
+    -moz-animation: color_change 1s infinite alternate;
+    -ms-animation: color_change 1s infinite alternate;
+    -o-animation: color_change 1s infinite alternate;
+    animation: color_change 1s infinite alternate;
+}
+
+.thumbnail-container
+{
+    width: calc(1024px * 0.25);
+    height: calc(624px * 0.25);
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 2px 2px 10px #000;
+    color: #DDD;
+}
+
+div.preview
+{
+    display: inline-block;
+    margin: 22px;
+    padding: 0px;
+    color: #333;
+    font-size: 12pt;
+    text-align: center;
+    width: 256px;
+    height: 196px;
+}
+
+div.title
+{
+    padding-top: 8px;
+    width: 256px;
+    height: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.container
+{
+    margin: 0px;
+    padding: 0px;
+    border: 2pt #000;
+    min-height: 100%;
+    min-width: 100%;
+    display: -webkit-flex;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+iframe {
+   pointer-events: none;
+}
+
+/** See https://github.com/electron/electron/issues/4420 */
+::selection {
+    background: transparent;
+}
+

dist/iwmlib.js

@@ -1545,6 +1545,30 @@
 
     }
 
+    let ipc = null;
+
+    try {
+        ipc = require('electron').ipcRenderer;
+    } catch (e) {}
+
+    /** Basic class for app specific logging requirements.
+     * Can be used to implement persistent logging in electron apps.
+     */
+    class Logging {
+
+        /** Static log function.
+         * @param {*} message
+         */
+        static log(message) {
+
+            if (ipc) {
+                ipc.send('log', message);
+            } else {
+                console.log(message);
+            }
+        }
+    }
+
     /* globals Hammer, propagating */
 
     /** Interaction patterns
@@ -1663,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() {
@@ -1742,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);
@@ -1761,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
         }
@@ -1904,7 +1937,7 @@
         registerTap(key, point) {
             if (this.tapCounts.has(key)) {
                 let count = this.tapCounts.get(key);
-                this.tapCounts.set(key, count+1);
+                this.tapCounts.set(key, count + 1);
             }
             else {
                 this.tapCounts.set(key, 1);
@@ -1954,7 +1987,7 @@
             }
             let result = false;
             if (this.isTap(key)) {
-                
+
                 this.registerTap(key, ended);
                 result = this.tapCounts.get(key) == 2;
             }
@@ -2095,7 +2128,7 @@
                 element.addEventListener(
                     'pointerup',
                     e => {
-                        if (this.debug) console.log('pointerup');
+                        if (this.debug) console.log('pointerup', e.pointerId, e.pointerType);
                         this.onEnd(e);
                         if (this.capturePointerEvents) {
                             try {
@@ -2108,7 +2141,7 @@
                 element.addEventListener(
                     'pointercancel',
                     e => {
-                        if (this.debug) console.log('pointercancel');
+                        if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType);
                         this.onEnd(e);
                         if (this.capturePointerEvents)
                             element.releasePointerCapture(e.pointerId);
@@ -2120,7 +2153,7 @@
                     element.addEventListener(
                         'pointerleave',
                         e => {
-                            if (this.debug) console.log('pointerleave');
+                            if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType);
                             if (e.target == element) this.onEnd(e);
                         },
                         useCapture
@@ -2131,7 +2164,7 @@
                     element.addEventListener(
                         'pointerout',
                         e => {
-                            if (this.debug) console.log('pointerout');
+                            if (this.debug) console.log('pointerout', e.pointerId, e.pointerType);
                             if (e.target == element) this.onEnd(e);
                         },
                         useCapture
@@ -2142,8 +2175,9 @@
                     window.addEventListener(
                         'pointerout',
                         e => {
+                            if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target);
                             if (e.target == element) {
-                                this.onEnd(e);
+                               this.onEnd(e);
                             }
                         },
                         useCapture);
@@ -2302,6 +2336,8 @@
         onMouseWheel(event) {
             if (this.capture(event) && this.target.onMouseWheel) {
                 this.target.onMouseWheel(event);
+            } else {
+                //console.warn('Target has no onMouseWheel callback')
             }
         }
 
@@ -2450,9 +2486,10 @@
         constructor(
             element,
             target,
-            { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null } = {}
+            { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {}
         ) {
             super(element, target, { tapDistance, useCapture, longPressTime, mouseWheelElement });
+            this.logInteractionsAbove = logInteractionsAbove;
         }
 
         get targetInterface() {
@@ -2474,6 +2511,11 @@
                     this.interaction.addTarget(key, found);
                 }
             }
+            let size = this.interaction.current.size;
+            let limit = this.logInteractionsAbove;
+            if (size > limit) {
+                Logging.log(`Number of interactions ${size} exceeds ${limit}`);
+            }
         }
 
         onMouseWheel(event) {
@@ -2489,6 +2531,8 @@
                 }
                 if (this.target.onMouseWheel) {
                     this.target.onMouseWheel(event);
+                } else {
+                    //console.warn('Target has no onMouseWheel callback', this.target)
                 }
             }
         }
@@ -2664,10 +2708,26 @@
         /**
          * Distincts if the app is running inside electron or not.
          * 
-         * source: https://discuss.atom.io/t/detect-electron-or-web-page-running/33180/3
+         * source: https://github.com/cheton/is-electron
          */
         static get isElectron() {
-            return typeof process != 'undefined' && process.versions && process.versions.electron !== undefined
+
+            // Renderer process
+            if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+                return true
+            }
+
+            // Main process
+            if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
+                return true
+            }
+
+            // Detect the user agent when the `nodeIntegration` option is set to true
+            if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
+                return true
+            }
+
+            return false
         }
 
         /** Returns the display resolution. Necessary for retina displays.
@@ -2893,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();
@@ -2902,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;
@@ -3174,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) {
@@ -4142,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) {
@@ -4898,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;
@@ -7357,6 +7426,7 @@
     window.InteractionMapper = InteractionMapper$1;
     window.InteractionPoints = InteractionPoints;
     window.Interface = Interface;
+    window.Logging = Logging;
     window.PointMap = PointMap;
     window.Rect = Rect;
     window.Points = Points;

dist/iwmlib.pixi.js

@@ -4709,6 +4709,30 @@
     //     }
     }
 
+    let ipc = null;
+
+    try {
+        ipc = require('electron').ipcRenderer;
+    } catch (e) {}
+
+    /** Basic class for app specific logging requirements.
+     * Can be used to implement persistent logging in electron apps.
+     */
+    class Logging {
+
+        /** Static log function.
+         * @param {*} message
+         */
+        static log(message) {
+
+            if (ipc) {
+                ipc.send('log', message);
+            } else {
+                console.log(message);
+            }
+        }
+    }
+
     /* globals Hammer, propagating */
 
     /** Interaction patterns
@@ -4827,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() {
@@ -4906,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);
@@ -4925,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
         }
@@ -5068,7 +5101,7 @@
         registerTap(key, point) {
             if (this.tapCounts.has(key)) {
                 let count = this.tapCounts.get(key);
-                this.tapCounts.set(key, count+1);
+                this.tapCounts.set(key, count + 1);
             }
             else {
                 this.tapCounts.set(key, 1);
@@ -5118,7 +5151,7 @@
             }
             let result = false;
             if (this.isTap(key)) {
-                
+
                 this.registerTap(key, ended);
                 result = this.tapCounts.get(key) == 2;
             }
@@ -5259,7 +5292,7 @@
                 element.addEventListener(
                     'pointerup',
                     e => {
-                        if (this.debug) console.log('pointerup');
+                        if (this.debug) console.log('pointerup', e.pointerId, e.pointerType);
                         this.onEnd(e);
                         if (this.capturePointerEvents) {
                             try {
@@ -5272,7 +5305,7 @@
                 element.addEventListener(
                     'pointercancel',
                     e => {
-                        if (this.debug) console.log('pointercancel');
+                        if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType);
                         this.onEnd(e);
                         if (this.capturePointerEvents)
                             element.releasePointerCapture(e.pointerId);
@@ -5284,7 +5317,7 @@
                     element.addEventListener(
                         'pointerleave',
                         e => {
-                            if (this.debug) console.log('pointerleave');
+                            if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType);
                             if (e.target == element) this.onEnd(e);
                         },
                         useCapture
@@ -5295,7 +5328,7 @@
                     element.addEventListener(
                         'pointerout',
                         e => {
-                            if (this.debug) console.log('pointerout');
+                            if (this.debug) console.log('pointerout', e.pointerId, e.pointerType);
                             if (e.target == element) this.onEnd(e);
                         },
                         useCapture
@@ -5306,8 +5339,9 @@
                     window.addEventListener(
                         'pointerout',
                         e => {
+                            if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target);
                             if (e.target == element) {
-                                this.onEnd(e);
+                               this.onEnd(e);
                             }
                         },
                         useCapture);
@@ -5466,6 +5500,8 @@
         onMouseWheel(event) {
             if (this.capture(event) && this.target.onMouseWheel) {
                 this.target.onMouseWheel(event);
+            } else {
+                //console.warn('Target has no onMouseWheel callback')
             }
         }
 
@@ -5614,9 +5650,10 @@
         constructor(
             element,
             target,
-            { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null } = {}
+            { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {}
         ) {
             super(element, target, { tapDistance, useCapture, longPressTime, mouseWheelElement });
+            this.logInteractionsAbove = logInteractionsAbove;
         }
 
         get targetInterface() {
@@ -5638,6 +5675,11 @@
                     this.interaction.addTarget(key, found);
                 }
             }
+            let size = this.interaction.current.size;
+            let limit = this.logInteractionsAbove;
+            if (size > limit) {
+                Logging.log(`Number of interactions ${size} exceeds ${limit}`);
+            }
         }
 
         onMouseWheel(event) {
@@ -5653,6 +5695,8 @@
                 }
                 if (this.target.onMouseWheel) {
                     this.target.onMouseWheel(event);
+                } else {
+                    //console.warn('Target has no onMouseWheel callback', this.target)
                 }
             }
         }
@@ -5828,10 +5872,26 @@
         /**
          * Distincts if the app is running inside electron or not.
          * 
-         * source: https://discuss.atom.io/t/detect-electron-or-web-page-running/33180/3
+         * source: https://github.com/cheton/is-electron
          */
         static get isElectron() {
-            return typeof process != 'undefined' && process.versions && process.versions.electron !== undefined
+
+            // Renderer process
+            if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+                return true
+            }
+
+            // Main process
+            if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
+                return true
+            }
+
+            // Detect the user agent when the `nodeIntegration` option is set to true
+            if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
+                return true
+            }
+
+            return false
         }
 
         /** Returns the display resolution. Necessary for retina displays.
@@ -6057,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();
@@ -6066,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;
@@ -6338,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) {
@@ -7144,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) {
@@ -7736,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.
      *
@@ -7751,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)
         }
@@ -7763,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);
             }
         }
@@ -7781,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
         }
@@ -7795,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 });
         }
     }
 
@@ -7839,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);
@@ -7848,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);
         }
 
@@ -7873,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);
+            }
+            
         }
     }
 
@@ -7902,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);
@@ -8428,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.
@@ -8845,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);
             }
@@ -9066,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) {
@@ -9877,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).
@@ -9901,7 +10091,7 @@
                 shadow: false,
                 eulerX: 0,
                 eulerY: 0,
-                eulerEase: Sine.easeOut,
+                eulerEase: Power1.easeOut,
                 useBackTransforms: false,
                 transformEase: Power2.easeOut,
                 focus: 800,
@@ -13006,8 +13196,8 @@
      * // Create the app
      * const app = new PIXIApp({
      *     view: canvas,
-     *     width: 900,
-     *     height: 250
+     *     width: 600,
+     *     height: 400
      * }).setup().run()
      * 
      * // Create the Scrollview
@@ -13015,7 +13205,7 @@
      *     .add('elephant', './assets/elephant-1.jpg')
      *     .load((loader, resources) => {
      *         const sprite = new PIXI.Sprite(resources.elephant.texture)
-     *         const scrollview = new Scrollview({boxWidth: 400, boxHeight: 180})
+     *         const scrollview = new Scrollview({boxWidth: 400, boxHeight: 300})
      *         scrollview.content.addChild(sprite)
      *         app.scene.addChild(scrollview)
      *
@@ -13030,6 +13220,7 @@
          * Creates an instance of a Scrollview.
          * 
          * @constructor
+         * @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
          */
         constructor(opts = {}) {
 

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

@@ -1,55 +1,54 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
-	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
-  <!--   <script type="text/javascript" src="interface.js"></script> -->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-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="../dist/iwmlib.js"></script>
+    <!--   <script type="text/javascript" src="interface.js"></script> -->
 </head>
-<body onload="Doctest.run()" >
-<h1>
-	Application
-</h1>
-<p>
-    IWM Browser Applications follow a common three phase pattern, shared by
-    many programming environments as diverse as Processing, Arduino, Intern, etc.
-    <ul>
-        <li>Instantiate: Initialize the application, in this case a singleton and it's instance variables</li>
-        <li>Setup: Build more complex parts of the application, by loading data, creating the UI...</li>
-        <li>Run: Enter and run the main loop of the application.</li>
-    </ul>
-    This pattern is reflected by the IApp Interface:
-</p>
+
+<body onload="Doctest.run()">
+    <h1>
+        Application
+    </h1>
+    <p>
+        IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
+        <ul>
+            <li>Instantiate: Initialize the application, in this case a singleton and it's instance variables</li>
+            <li>Setup: Build more complex parts of the application, by loading data, creating the UI...</li>
+            <li>Run: Enter and run the main loop of the application.</li>
+        </ul>
+        This pattern is reflected by the IApp Interface:
+    </p>
     <pre><code class="js">
 class IApp extends Interface {
     setup() { return this }
     run() { return this }
 }
 </code></pre>
-<p>In practice the pattern may be more complex, because the setup phase can only be entered
-after loading things, a main loop cannot be entered because requirements are not met, etc.
-But the basic structure is always the same:
-</p>
-<script type="module" class="doctest">
-    console.log("Innerhalb script type=module")
-    import App from "./app.js"
-    const app = new App()
-    app.setup()
-    app.run()
-    window.app = app
-</script>
-<p>The setup and run methods can also be chained:
-</p>
-<script type="module" class="doctest">
-    app.setup().run()
-</script>
+    <p>In practice the pattern may be more complex, because the setup phase can only be entered after loading things, a main loop cannot be entered because requirements are not met, etc. But the basic structure is always the same:
+    </p>
+    <script type="module" class="doctest">
+        console.log("Innerhalb script type=module") 
+        import App from "./app.js" 
+        const app = new App() 
+        app.setup()
+        app.run()
+        window.app = app
+    </script>
+    <p>The setup and run methods can also be chained:
+    </p>
+    <script type="module" class="doctest">
+        app.setup().run()
+    </script>
 
-<h2>
-References
-</h2>
-<ul>
-    <li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
- </ul>
-</body>
+    <h2>
+        References
+    </h2>
+    <ul>
+        <li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
+    </ul>
+</body>

lib/bundle.js

@@ -5,6 +5,7 @@ import Events from './events.js'
 import {DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader} from './flippable.js'
 import Index from './index.js'
 import Interface from './interface.js'
+import Logging from './logging.js'
 import Poppable from './poppable.js'
 import PopupMenu from './popupmenu.js'
 import Popup from './popup.js'
@@ -60,6 +61,7 @@ window.InteractionDelta = InteractionDelta
 window.InteractionMapper = InteractionMapper
 window.InteractionPoints = InteractionPoints
 window.Interface = Interface
+window.Logging = Logging
 window.PointMap = PointMap
 window.Rect = Rect
 window.Points = Points

lib/capabilities.html

@@ -3,10 +3,10 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Doctests Capabilities</title>
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../css/doctest.css">
-    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script type="text/javascript" src="all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script type="text/javascript" src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run(); CapabilitiesTests.testAll()">
 <main>

lib/capabilities.js

@@ -37,10 +37,26 @@ export class Capabilities {
     /**
      * Distincts if the app is running inside electron or not.
      * 
-     * source: https://discuss.atom.io/t/detect-electron-or-web-page-running/33180/3
+     * source: https://github.com/cheton/is-electron
      */
     static get isElectron() {
-        return typeof process != 'undefined' && process.versions && process.versions.electron !== undefined
+
+        // Renderer process
+        if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+            return true
+        }
+
+        // Main process
+        if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
+            return true
+        }
+
+        // Detect the user agent when the `nodeIntegration` option is set to true
+        if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
+            return true
+        }
+
+        return false
     }
 
     /** Returns the display resolution. Necessary for retina displays.

lib/coordinates.html

@@ -4,11 +4,11 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Coordinates Doctest</title>
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <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="all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+    <script src="../dist/iwmlib.js"></script>
     <script>
         function drawPolygons() {
             canvas.width = main.getBoundingClientRect().width

lib/doctest.html

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Doctests</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-	<script src="../lib/3rdparty/all.js"></script>
-	<script src="all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()">
 <main>

lib/electron.html

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Electron Node.js Test</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-	<script src="../lib/3rdparty/all.js"></script>
-	<script src="all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+	<script src="./3rdparty/all.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()">
 <main>

lib/events.html

@@ -2,11 +2,11 @@
 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-	<script src="all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

lib/examples/memory/index.html

@@ -50,7 +50,7 @@
         }
     </style>
 
-    <script type="text/javascript" src="../../../lib/3rdparty/all.js"></script>
+    <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>
 </head>

lib/examples/multitouch.html

@@ -50,9 +50,9 @@
         }
     </style>
 
-    <script type="text/javascript" src="../../lib/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/flippable.html

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Flippable Doctest</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-	<script src="./all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 
     <link rel="stylesheet" href="../css/flipeffect.css">
 	<template id="flipTemplate">

lib/frames.html

@@ -3,11 +3,12 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta name="viewport" content="width=device-width, user-scalable=no" />
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-	<script src="all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

lib/imageloader.html

@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
 
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="./3rdparty/all.js"></script>
 
-	<script src="all.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 
 </head>
 <body onload="Doctest.run()" >

lib/index.html

@@ -1,10 +1,16 @@
-<html>
+<!doctype html>
+<html lang="en">
 <head>
-	<title>Lib Doctests</title>
+    <title>Lib Doctests</title>
+    <meta charset="utf-8"/>
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
     <link rel="stylesheet" href="../css/index.css">
-    <script src="all.js"></script>
+
+    <!-- following not necc for index.js included in iwmlib.js -->
+    <!-- <script src="./index.js"></script> -->
+    
+    <script src="../dist/iwmlib.js"></script>
 
     <template id="itemTemplate">
         <a class="wrapper" href="">

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

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run(); test()" >
 <h1>

lib/interaction.html

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Interaction Mapper Doctest</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
-    <script src="./3rdparty/all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

lib/interaction.js

@@ -4,6 +4,7 @@
 import Interface from './interface.js'
 import { Points, Angle, MapProxy } from './utils.js'
 import Events from './events.js'
+import Logging from './logging.js'
 
 /** Interaction patterns
 
@@ -121,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() {
@@ -200,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)
@@ -219,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
     }
@@ -362,7 +372,7 @@ export class Interaction extends InteractionPoints {
     registerTap(key, point) {
         if (this.tapCounts.has(key)) {
             let count = this.tapCounts.get(key)
-            this.tapCounts.set(key, count+1)
+            this.tapCounts.set(key, count + 1)
         }
         else {
             this.tapCounts.set(key, 1)
@@ -412,7 +422,7 @@ export class Interaction extends InteractionPoints {
         }
         let result = false
         if (this.isTap(key)) {
-            
+
             this.registerTap(key, ended)
             result = this.tapCounts.get(key) == 2
         }
@@ -553,7 +563,7 @@ export class InteractionDelegate {
             element.addEventListener(
                 'pointerup',
                 e => {
-                    if (this.debug) console.log('pointerup')
+                    if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
                     this.onEnd(e)
                     if (this.capturePointerEvents) {
                         try {
@@ -566,7 +576,7 @@ export class InteractionDelegate {
             element.addEventListener(
                 'pointercancel',
                 e => {
-                    if (this.debug) console.log('pointercancel')
+                    if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
                     this.onEnd(e)
                     if (this.capturePointerEvents)
                         element.releasePointerCapture(e.pointerId)
@@ -578,7 +588,7 @@ export class InteractionDelegate {
                 element.addEventListener(
                     'pointerleave',
                     e => {
-                        if (this.debug) console.log('pointerleave')
+                        if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
                         if (e.target == element) this.onEnd(e)
                     },
                     useCapture
@@ -589,7 +599,7 @@ export class InteractionDelegate {
                 element.addEventListener(
                     'pointerout',
                     e => {
-                        if (this.debug) console.log('pointerout')
+                        if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
                         if (e.target == element) this.onEnd(e)
                     },
                     useCapture
@@ -600,8 +610,9 @@ export class InteractionDelegate {
                 window.addEventListener(
                     'pointerout',
                     e => {
+                        if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
                         if (e.target == element) {
-                            this.onEnd(e)
+                           this.onEnd(e)
                         }
                     },
                     useCapture)
@@ -910,9 +921,10 @@ export class InteractionMapper extends InteractionDelegate {
     constructor(
         element,
         target,
-        { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null } = {}
+        { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {}
     ) {
         super(element, target, { tapDistance, useCapture, longPressTime, mouseWheelElement })
+        this.logInteractionsAbove = logInteractionsAbove
     }
 
     get targetInterface() {
@@ -934,6 +946,11 @@ export class InteractionMapper extends InteractionDelegate {
                 this.interaction.addTarget(key, found)
             }
         }
+        let size = this.interaction.current.size
+        let limit = this.logInteractionsAbove
+        if (size > limit) {
+            Logging.log(`Number of interactions ${size} exceeds ${limit}`)
+        }
     }
 
     onMouseWheel(event) {

lib/interface.html

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../css/doctest.css">
-    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

lib/logging.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Logging Doctest</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-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="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
+</head>
+
+<body id="page" onload="Doctest.run()">
+    <h1>
+        Logging
+    </h1>
+    <p>Store informations of your app permanently.</p>
+    <script class="doctest">
+        Logging.log('app started')
+    </script>
+</body>

lib/logging.js

@@ -0,0 +1,23 @@
+let ipc = null
+
+try {
+    ipc = require('electron').ipcRenderer
+} catch (e) {}
+
+/** Basic class for app specific logging requirements.
+ * Can be used to implement persistent logging in electron apps.
+ */
+export default class Logging {
+
+    /** Static log function.
+     * @param {*} message
+     */
+    static log(message) {
+
+        if (ipc) {
+            ipc.send('log', message)
+        } else {
+            console.log(message)
+        }
+    }
+}

lib/pixi/app-resolution.html

@@ -5,14 +5,14 @@
 
     <title>PIXI Application Resolution Doctest</title>
 
-    <link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
 
-    <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src=".././3rdparty/all.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src=".../../dist/iwmlib.pixi.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 
     <style>
         #dpi {

lib/pixi/app.html

@@ -5,14 +5,14 @@
 
     <title>PIXI Application Doctest</title>
 
-    <link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
 
-    <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Application</h1>

lib/pixi/application.html

@@ -5,7 +5,10 @@
 
     <title>PIXI.Application Doctest</title>
 
-    <script src="../3rdparty/pixi/pixi.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
+
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body>
     <h1>PIXI.Application with nothing!</h1>

lib/pixi/badge.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Badge</h1>

lib/pixi/blurfilter.html

@@ -5,14 +5,14 @@
 
     <title>PIXI BlurFilter</title>
 
-    <link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
 
-    <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>BlurFilter</h1>

lib/pixi/button.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Button</h1>

lib/pixi/buttongroup.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>ButtonGroup</h1>

lib/pixi/coordinates.html

@@ -4,13 +4,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>PIXI Coordinates Doctest</title>
-    <link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
-    <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 
 <body onload="Doctest.run()">

lib/pixi/deepzoom/deepzoom.html

@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>DeepZoomImage Doctests</title>
+
+    <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="../../../dist/iwmlib.3rdparty.js"></script>
+
+    <script src="../../../dist/iwmlib.js"></script>
+    <script src="../../../dist/iwmlib.pixi.js"></script>
+
+    <style>
+        #app {
+            display: table;
+            margin: 0 auto;
+        }
+
+        #app > * {
+            margin-bottom: 5px;
+        }
+    </style>
+</head>
+
+<body onload="Doctest.run()">
+    <h1>Double DeepZoomImage</h1>
+    <p>
+        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
+        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
+        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
+        as possible.
+    </p>
+    <br />
+    <div id="div1" style="float: left;"></div>
+    <div id="div2" style="float: right;"></div>
+    <div style="clear: left; margin-top: 540px;" />
+    <script class="doctest">
+
+        // deepZoom
+        //--------------------
+        const deepZoomInfo = new DeepZoomInfo({
+            "tileSize": 128,
+            "format": "jpg",
+            "overlap": 0,
+            "type": "map",
+            "height": 4096,
+            "width": 4096,
+            "path": "../assets/maps/test",
+            "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
+        })
+        // const deepZoomInfo = new DeepZoomInfo({
+        //     compression: [
+        //         "dds"
+        //     ],
+        //     clip: {
+        //         minLevel: 12,
+        //         maxLevel: 20,
+        //         startCol: 275215,
+        //         startRow: 181050,
+        //         bounds: {
+        //             min: [48.458353, 8.96484374976547],
+        //             max: [48.5747899110263, 9.14062499976523]
+        //         }
+        //     },
+        //     tileSize: 512,
+        //     format: "png",
+        //     overlap: 0,
+        //     type: "map",
+        //     height: 131072,
+        //     width: 131072,
+        //     path: "../../../var/tuesch/luftbild_2016_full",
+        //     urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
+        // })
+
+        // app
+        //--------------------
+        window.app = new PIXIApp({
+            width: 400,
+            height: 500,
+            backgroundColor: 0xFFCCCCCC
+        }).setup().run()
+        
+        div1.appendChild(app.view)
+
+        // create the ScatterContainer
+        //--------------------
+        const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
+        app.scene.addChild(scatterContainer1)
+
+        // Create the DeepZoomImage
+        //--------------------
+        setTimeout(() => {
+            const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
+            deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
+                minScale: 0,
+                maxScale: 50,
+                onTransform: event => {
+                    //console.log('currentLevel', deepZoomImage1.currentLevel)
+                    deepZoomImage1.transformed(event)
+                }
+            })
+
+            scatterContainer1.addChild(deepZoomImage1)
+        }, 1000)
+        
+        
+        // app2
+        //--------------------
+        const app2 = new PIXIApp({
+            width: 400,
+            height: 500,
+            backgroundColor: 0xFFCCCCCC
+        }).setup().run()
+        
+        div2.appendChild(app2.view)
+
+        // create the ScatterContainer
+        //--------------------
+        const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
+        app2.scene.addChild(scatterContainer2)
+
+        // Create the DeepZoomImage
+        //--------------------
+        const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
+        deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
+            minScale: 0,
+            maxScale: 100,
+            onTransform: (event) => {
+                deepZoomImage2.transformed(event)
+            }
+        })
+
+        scatterContainer2.addChild(deepZoomImage2)
+
+    </script>
+
+    <h1>DeepZoomImage in DeepZoomImage</h1>
+    <p>
+        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
+        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
+        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
+        as possible.
+    </p>
+    <br />
+    <div id="div3"></div>
+    <script class="doctest">
+
+        // app3
+        //--------------------
+        const app3 = new PIXIApp({
+            width: 900,
+            height: 500,
+            backgroundColor: 0xFFCCCCCC
+        }).setup().run()
+
+        window.app3 = app3
+        
+        div3.appendChild(app3.view)
+
+        // create the ScatterContainer
+        //--------------------
+        const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
+        app3.scene.addChild(scatterContainer3)
+
+        // Create the DeepZoomImage
+        //--------------------
+        const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
+        deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
+            minScale: 0,
+            maxScale: 100,
+            startScale: 2,
+            autoBringToFront: false,
+            onTransform: (event) => {
+                deepZoomImage3.transformed(event)
+            }
+        })
+
+        app3._deepZoomImage3 = deepZoomImage3
+
+        scatterContainer3.addChild(deepZoomImage3)
+
+        // Create the second DeepZoomImage
+        //--------------------
+        const border = new PIXI.Graphics()
+        border.beginFill(0x282828, 1)
+        border.drawRect(0, 0, 264, 244)
+        scatterContainer3.addChild(border)
+
+        const mask = new PIXI.Graphics()
+        mask.beginFill(0x282828, 1)
+        mask.drawRect(0, 0, 260, 240)
+        scatterContainer3.addChild(mask)
+
+        const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
+        deepZoomImage4.x = 4
+        deepZoomImage4.y = 4
+        deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
+            minScale: 0,
+            maxScale: 100,
+            onTransform: (event) => {
+                deepZoomImage4.transformed(event)
+            }
+        })
+        deepZoomImage4.mask = mask
+
+        app3._deepZoomImage4 = deepZoomImage4
+
+        scatterContainer3.addChild(deepZoomImage4)
+
+    </script>
+</body>
+
+</html>

lib/pixi/deepzoom/image.html

@@ -10,11 +10,10 @@
     <link rel="stylesheet" href="../../../css/doctest.css">
 
     <script src="../../3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../3rdparty/all.js"></script>
-    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../../all.js"></script>
-    <script src="../all.js"></script>
+    <script src="../../../dist/iwmlib.js"></script>
+    <script src="../../../dist/iwmlib.pixi.js"></script>
 
     <style>
         #app {

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.getBounds()
         // Using getBounds extends visible scope after loading tiles and leads
         // to excessive loading
         if (this.world != null) {

lib/pixi/deepzoom/index.html

@@ -1,219 +1,38 @@
-<!doctype html>
-<html lang="en">
-
+<html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>PIXI Lib Doctests</title>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
+    <link rel="stylesheet" href="../../../css/index.css">
 
-    <title>DeepZoomImage Doctests</title>
+    <script src="../../../dist/iwmlib.js"></script>
 
-    <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="../../../node_modules/jquery/dist/jquery.min.js"></script>
-
-    <script src="../../all.js"></script>
-    <script src="../all.js"></script>
-
-    <style>
-        #app {
-            display: table;
-            margin: 0 auto;
-        }
-
-        #app > * {
-            margin-bottom: 5px;
-        }
-    </style>
+    <template id="itemTemplate">
+        <a class="wrapper" href="">
+            <div class="preview">
+                <div class="thumbnail-container">
+                    <div class="thumbnail">
+                        <img class="icon" >
+                        <!-- <iframe src="" frameborder="0"></iframe> -->
+                     </div>
+                </div>
+                <div class="title"></div>
+            </div>
+        </a>
+    </template>
 </head>
-
-<body onload="Doctest.run()">
-    <h1>Double DeepZoomImage</h1>
-    <p>
-        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
-        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
-        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
-        as possible.
-    </p>
-    <br />
-    <div id="div1" style="float: left;"></div>
-    <div id="div2" style="float: right;"></div>
-    <div style="clear: left; margin-top: 540px;" />
-    <script class="doctest">
-
-        // deepZoom
-        //--------------------
-        const deepZoomInfo = new DeepZoomInfo({
-            "tileSize": 128,
-            "format": "jpg",
-            "overlap": 0,
-            "type": "map",
-            "height": 4096,
-            "width": 4096,
-            "path": "../assets/maps/test",
-            "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
-        })
-        // const deepZoomInfo = new DeepZoomInfo({
-        //     compression: [
-        //         "dds"
-        //     ],
-        //     clip: {
-        //         minLevel: 12,
-        //         maxLevel: 20,
-        //         startCol: 275215,
-        //         startRow: 181050,
-        //         bounds: {
-        //             min: [48.458353, 8.96484374976547],
-        //             max: [48.5747899110263, 9.14062499976523]
-        //         }
-        //     },
-        //     tileSize: 512,
-        //     format: "png",
-        //     overlap: 0,
-        //     type: "map",
-        //     height: 131072,
-        //     width: 131072,
-        //     path: "../../../var/tuesch/luftbild_2016_full",
-        //     urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
-        // })
-
-        // app
-        //--------------------
-        window.app = new PIXIApp({
-            width: 400,
-            height: 500,
-            backgroundColor: 0xFFCCCCCC
-        }).setup().run()
-        
-        div1.appendChild(app.view)
-
-        // create the ScatterContainer
-        //--------------------
-        const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
-        app.scene.addChild(scatterContainer1)
-
-        // Create the DeepZoomImage
-        //--------------------
-        setTimeout(() => {
-            const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
-            deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
-                minScale: 0,
-                maxScale: 50,
-                onTransform: event => {
-                    console.log('currentLevel', deepZoomImage1.currentLevel)
-                    deepZoomImage1.transformed(event)
-                }
-            })
-
-            scatterContainer1.addChild(deepZoomImage1)
-        }, 1000)
-        
-        
-        // app2
-        //--------------------
-        const app2 = new PIXIApp({
-            width: 400,
-            height: 500,
-            backgroundColor: 0xFFCCCCCC
-        }).setup().run()
-        
-        div2.appendChild(app2.view)
-
-        // create the ScatterContainer
-        //--------------------
-        const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
-        app2.scene.addChild(scatterContainer2)
-
-        // Create the DeepZoomImage
-        //--------------------
-        const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
-        deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
-            minScale: 0,
-            maxScale: 100,
-            onTransform: (event) => {
-                deepZoomImage2.transformed(event)
-            }
-        })
-
-        scatterContainer2.addChild(deepZoomImage2)
-
-    </script>
-
-    <h1>DeepZoomImage in DeepZoomImage</h1>
-    <p>
-        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
-        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
-        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
-        as possible.
-    </p>
-    <br />
-    <div id="div3"></div>
-    <script class="doctest">
-
-        // app3
-        //--------------------
-        const app3 = new PIXIApp({
-            width: 900,
-            height: 500,
-            backgroundColor: 0xFFCCCCCC
-        }).setup().run()
-
-        window.app3 = app3
-        
-        div3.appendChild(app3.view)
-
-        // create the ScatterContainer
-        //--------------------
-        const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
-        app3.scene.addChild(scatterContainer3)
-
-        // Create the DeepZoomImage
-        //--------------------
-        const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
-        deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
-            minScale: 0,
-            maxScale: 100,
-            startScale: 2,
-            autoBringToFront: false,
-            onTransform: (event) => {
-                deepZoomImage3.transformed(event)
-            }
-        })
-
-        app3._deepZoomImage3 = deepZoomImage3
-
-        scatterContainer3.addChild(deepZoomImage3)
-
-        // Create the second DeepZoomImage
-        //--------------------
-        const border = new PIXI.Graphics()
-        border.beginFill(0x282828, 1)
-        border.drawRect(0, 0, 264, 244)
-        scatterContainer3.addChild(border)
-
-        const mask = new PIXI.Graphics()
-        mask.beginFill(0x282828, 1)
-        mask.drawRect(0, 0, 260, 240)
-        scatterContainer3.addChild(mask)
-
-        const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
-        deepZoomImage4.x = 4
-        deepZoomImage4.y = 4
-        deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
-            minScale: 0,
-            maxScale: 100,
-            onTransform: (event) => {
-                deepZoomImage4.transformed(event)
-            }
-        })
-        deepZoomImage4.mask = mask
-
-        app3._deepZoomImage4 = deepZoomImage4
-
-        scatterContainer3.addChild(deepZoomImage4)
-
-    </script>
+<body>
+    <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'],
+        ['Image', 'image.html'],
+       
+    ],
+    null)
+index.load()
+</script>
 </body>
-
 </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/test.html

@@ -7,7 +7,7 @@
     <!-- disable zooming -->
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
     
-    <script src="../../../lib/3rdparty/all.js"></script>
+    <script src="../.././3rdparty/all.js"></script>
     <script src="../../../lib/all.js"></script>
 
     <link rel="stylesheet" href="../test/lib/bulma.css">

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
     }
@@ -58,20 +139,82 @@ export class Tile extends PIXI.Sprite {
      * @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 (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/flipeffect.html

@@ -3,13 +3,13 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>PIXI Flip Effect Doctest</title>
-	<link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../../css/doctest.css">
-	<script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+	<script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-	<script src="../all.js"></script>
-	<script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 
     <link rel="stylesheet" href="../../css/flipeffect.css">
 	<template id="flipTemplate">

lib/pixi/flippable.html

@@ -9,10 +9,12 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <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/flippable.test.html

@@ -7,9 +7,9 @@
 	<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="../all.js"></script>
-	<script src="./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 onload="Doctest.run();" >
 <h1>

lib/pixi/forcelayout.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 
     <script src="./lib/graphology.min.js"></script>
     <script src="./lib/graphology-layout-forceatlas2.js"></script>

lib/pixi/index.html

@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
     <link rel="stylesheet" href="../../css/index.css">
 
-    <script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
 
     <template id="itemTemplate">
         <a class="wrapper" href="">
             <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'],
@@ -32,8 +33,7 @@ const index = new Index(itemTemplate, [
         ['Button', 'button.html'],
         ['ButtonGroup', 'buttongroup.html'],
         ['Coordinates', 'coordinates.html'],
-        ['DeepZoom', 'deepzoom.html'],
-        ['DeepZoomImage', 'deepzoomimage.html'],
+        ['DeepZoom', 'deepzoom/index.html'],
         ['Flippable', 'flippable.html'],
         ['LabeledGraphics', 'labeledgraphics.html'],
         ['List', 'list.html'],

lib/pixi/labeledgraphics.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>LabeledGraphics</h1>

lib/pixi/message.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Message</h1>

lib/pixi/modal.html

@@ -9,10 +9,9 @@
     <link rel="stylesheet" href="../../css/doctest.css">
 
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../3rdparty/all.js"></script>
-
-    <script src="../all.js"></script>
-    <script src="./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 onload="Doctest.run()">
     <h1>Modal</h1>

lib/pixi/popover.html

@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../../css/doctest.css">
-	<script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+	<script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-	<script src="../all.js"></script>
-	<script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()" >
 	<h1>Popover</h1>

lib/pixi/popup.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Popup</h1>

lib/pixi/popupmenu.html

@@ -5,14 +5,14 @@
 
     <title>PIXI PopupMenu</title>
 
-    <link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+    <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>PopupMenu</h1>

lib/pixi/progress.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Progress</h1>

lib/pixi/scatter.html

@@ -4,13 +4,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>PIXI Scatter Doctest</title>
-    <link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
-    <script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 
 <body onload="Doctest.run()">

lib/pixi/slider.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Slider</h1>

lib/pixi/text.html

@@ -9,10 +9,12 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <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/pixi/theme.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Theme</h1>

lib/pixi/tooltip.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Tooltip</h1>

lib/pixi/volatile.html

@@ -9,10 +9,10 @@
     <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.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>Volatile</h1>

lib/poppable.html

@@ -4,11 +4,11 @@
 <head>
     <title>Poppable Doctest</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../css/doctest.css">
-    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-    <script src="all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="./3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 
 <body id="page" onload="Doctest.run()">

lib/popup.html

@@ -4,11 +4,11 @@
 <head>
     <title>Popup Doctest</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../css/doctest.css">
-    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-    <script src="all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 
 <body id="page" onload="Doctest.run()">

lib/popupmenu.html

@@ -3,11 +3,11 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../css/doctest.css">
-    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-    <script src="all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 
 <body onload="Doctest.run()">

lib/scatter.html

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Scatter Doctest</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<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="all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 	<script>
     function drawPolygons() {
         debugCanvas.width = main.getBoundingClientRect().width

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

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Styleguide</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<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="all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

lib/stylus/index.html

@@ -57,7 +57,7 @@
     }
     </style>
 
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/all.js"></script>
 	<script src="../../lib/bootstrap.js"></script>
 </head>
 <body class="site" oncontextmenu="return false" >

lib/test.html

@@ -4,11 +4,11 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta name="viewport" content="width=device-width, user-scalable=no" />
 	 <title>Doctests Functional Tests</title>
-	 <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	 <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
-	<script src="all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="./3rdparty/all.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 	<script src="pixi/all.js"></script>
 </head>
 <body onload="Doctest.run(); loaded()" >

lib/uitest.html

@@ -3,11 +3,11 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>UITest Doctest</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<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="./all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+    <script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>

lib/utils.html

@@ -3,10 +3,10 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Doctests</title>
-	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
 	<link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
-	<script src="all.js"></script>
+	<script src="./3rdparty/highlight/highlight.pack.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()">
 <main>

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",
@@ -1401,8 +1442,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",
@@ -1973,7 +2013,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",
@@ -2280,9 +2319,9 @@
             "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
         },
         "gsap": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.2.tgz",
-            "integrity": "sha512-7saMzK2HQ3OD4/hbygtkh0uAK8LUqcom6abL4YqGttyxAQdEvywQOw5VK3obKQ7GaLU8KhszArKJPxIKe8mbvg=="
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz",
+            "integrity": "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
         },
         "gulp": {
             "version": "4.0.2",
@@ -2454,11 +2493,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"
@@ -2690,9 +2752,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",
@@ -2887,11 +2949,6 @@
                 }
             }
         },
-        "material-design-icons": {
-            "version": "3.0.1",
-            "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
-            "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
-        },
         "micromatch": {
             "version": "3.1.10",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -2913,6 +2970,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",
@@ -2922,7 +2984,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"
             }
@@ -2953,11 +3014,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",
@@ -3150,7 +3225,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
             "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-            "dev": true,
             "requires": {
                 "wrappy": "1"
             }
@@ -3239,8 +3313,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",
@@ -3273,6 +3346,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",
@@ -3392,6 +3470,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",
@@ -3400,6 +3483,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",
@@ -3421,6 +3509,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",
@@ -3684,6 +3802,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",
@@ -4487,6 +4613,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",
@@ -4527,6 +4661,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.4",
+    "version": "1.0.10",
     "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,15 +28,15 @@
         "gulp-uglify": "^3.0.2"
     },
     "dependencies": {
-        "gsap": "^2.1.2",
+        "gsap": "^2.1.3",
         "hammerjs": "^2.0.8",
-        "material-design-icons": "^3.0.1",
         "optimal-select": "^4.0.1",
         "pixi-compressed-textures": "^1.1.8",
         "pixi-filters": "^2.7.1",
         "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"
     }
 }