Adding a return value in boundary condition.

.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);
@@ -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);
@@ -2450,9 +2484,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 +2509,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) {
@@ -2664,10 +2704,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 +2949,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 +2960,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;
@@ -4898,11 +4956,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 +7417,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);
@@ -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);
@@ -5614,9 +5648,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 +5673,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) {
@@ -5828,10 +5868,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 +6113,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 +6124,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;
@@ -9066,7 +9124,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 +9935,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 +9959,7 @@
                 shadow: false,
                 eulerX: 0,
                 eulerY: 0,
-                eulerEase: Sine.easeOut,
+                eulerEase: Power1.easeOut,
                 useBackTransforms: false,
                 transformEase: Power2.easeOut,
                 focus: 800,
@@ -13006,8 +13064,8 @@
      * // Create the app
      * const app = new PIXIApp({
      *     view: canvas,
-     *     width: 900,
+     *     width: 600,
-     *     height: 250
+     *     height: 400
      * }).setup().run()
      * 
      * // Create the Scrollview
@@ -13015,7 +13073,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 +13088,7 @@
          * Creates an instance of a Scrollview.
          * 
          * @constructor
+         * @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
          */
         constructor(opts = {}) {
 

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">
+    <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">
+    <link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
+    <script src="../dist/iwmlib.js"></script>
-  <!--   <script type="text/javascript" src="interface.js"></script> -->
+    <!--   <script type="text/javascript" src="interface.js"></script> -->
 </head>
-<body onload="Doctest.run()" >
+
-<h1>
+<body onload="Doctest.run()">
-	Application
+    <h1>
-</h1>
+        Application
-<p>
+    </h1>
-    IWM Browser Applications follow a common three phase pattern, shared by
+    <p>
-    many programming environments as diverse as Processing, Arduino, Intern, etc.
+        IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
-    <ul>
+        <ul>
-        <li>Instantiate: Initialize the application, in this case a singleton and it's instance variables</li>
+            <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>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>
+            <li>Run: Enter and run the main loop of the application.</li>
-    </ul>
+        </ul>
-    This pattern is reflected by the IApp Interface:
+        This pattern is reflected by the IApp Interface:
-</p>
+    </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
+    <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:
-after loading things, a main loop cannot be entered because requirements are not met, etc.
+    </p>
-But the basic structure is always the same:
+    <script type="module" class="doctest">
-</p>
+        console.log("Innerhalb script type=module") 
-<script type="module" class="doctest">
+        import App from "./app.js" 
-    console.log("Innerhalb script type=module")
+        const app = new App() 
-    import App from "./app.js"
+        app.setup()
-    const app = new App()
+        app.run()
-    app.setup()
+        window.app = app
-    app.run()
+    </script>
-    window.app = app
+    <p>The setup and run methods can also be chained:
-</script>
+    </p>
-<p>The setup and run methods can also be chained:
+    <script type="module" class="doctest">
-</p>
+        app.setup().run()
-<script type="module" class="doctest">
+    </script>
-    app.setup().run()
-</script>
 
-<h2>
+    <h2>
-References
+        References
-</h2>
+    </h2>
-<ul>
+    <ul>
-    <li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
+        <li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
- </ul>
+    </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 src="./3rdparty/highlight/highlight.pack.js"></script>
-    <script type="text/javascript" src="all.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="../dist/iwmlib.3rdparty.js"></script>
-    <script src="all.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="./3rdparty/highlight/highlight.pack.js"></script>
-	<script src="../lib/3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
-	<script src="all.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="./3rdparty/highlight/highlight.pack.js"></script>
-	<script src="../lib/3rdparty/all.js"></script>
+	<script src="./3rdparty/all.js"></script>
-	<script src="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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
-	<script src="all.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 src="../../dist/iwmlib.3rdparty.js"></script>
-    <script type="text/javascript" src="../../lib/pixi/all.js"></script>
+<script src="../../dist/iwmlib.js"></script>
-    <script type="text/javascript" src="../../lib/all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
-	<script src="./all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/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/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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
+    <script src="../dist/iwmlib.js"></script>
-    <script src="./3rdparty/all.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)
@@ -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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src=".././3rdparty/all.js"></script>
 
-    <script src="../all.js"></script>
+    <script src=".../../dist/iwmlib.pixi.js"></script>
-    <script src="./all.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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../../dist/iwmlib.3rdparty.js"></script>
-    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
 
-    <script src="../../all.js"></script>
+    <script src="../../../dist/iwmlib.js"></script>
-    <script src="../all.js"></script>
+    <script src="../../../dist/iwmlib.pixi.js"></script>
 
     <style>
         #app {

lib/pixi/deepzoom/image.js

@@ -645,7 +645,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>
-<html lang="en">
-
 <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">
+    <template id="itemTemplate">
-    <link rel="stylesheet" href="../../../css/doctest.css">
+        <a class="wrapper" href="">
-
+            <div class="preview">
-    <script src="../../3rdparty/highlight/highlight.pack.js"></script>
+                <div class="thumbnail-container">
-    <script src="../../3rdparty/all.js"></script>
+                    <div class="thumbnail">
-    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
+                        <img class="icon" >
-
+                        <!-- <iframe src="" frameborder="0"></iframe> -->
-    <script src="../../all.js"></script>
+                     </div>
-    <script src="../all.js"></script>
+                </div>
-
+                <div class="title"></div>
-    <style>
+            </div>
-        #app {
+        </a>
-            display: table;
+    </template>
-            margin: 0 auto;
-        }
-
-        #app > * {
-            margin-bottom: 5px;
-        }
-    </style>
 </head>
+<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'],
        
-<body onload="Doctest.run()">
+    ],
-    <h1>Double DeepZoomImage</h1>
+    null)
-    <p>
+index.load()
-        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
+</script>
-        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/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/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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-	<script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
-	<script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.3rdparty.js"></script>
-	<script src="../all.js"></script>
+	<script src="../../dist/iwmlib.js"></script>
-	<script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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 id="container" class="container">
-</div>
+        <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'],
+        ['DeepZoom', 'deepzoom/index.html'],
-        ['DeepZoomImage', 'deepzoomimage.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.3rdparty.js"></script>
-
+    <script src="../../dist/iwmlib.js"></script>
-    <script src="../all.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
-    <script src="./all.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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-	<script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
-	<script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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=".././3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../../lib/3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="../../dist/iwmlib.js"></script>
-    <script src="./all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+    <script src="./3rdparty/all.js"></script>
-    <script src="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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
-    <script src="all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
-    <script src="all.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="../dist/iwmlib.3rdparty.js"></script>
-	<script src="all.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="../dist/iwmlib.3rdparty.js"></script>
-	<script src="all.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="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../lib/3rdparty/all.js"></script>
+    <script src="./3rdparty/all.js"></script>
-	<script src="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="../dist/iwmlib.3rdparty.js"></script>
-	<script src="./all.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="./3rdparty/highlight/highlight.pack.js"></script>
-	<script src="all.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()">
 <main>

package.json

@@ -1,13 +1,13 @@
 {
     "name": "iwmlib",
-    "version": "1.0.4",
+    "version": "1.0.8",
     "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"
     }
 }