Merge branch 'master' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib

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.3rdparty.js

@@ -85199,86 +85199,86 @@ module.exports = function (_Plugin) {
 
 },{}]},{},[13]);
 
-/*jslint plusplus: true, vars: true, indent: 2 */
-/* convertPointFromPageToNode.js from
- <script src="https://gist.github.com/Yaffle/1145197.js"></script>
-
-  convertPointFromPageToNode(element, event.pageX, event.pageY) -> {x, y}
-  returns coordinate in element's local coordinate system (works properly
-  with css transforms without perspective projection)
-  convertPointFromNodeToPage(element, offsetX, offsetY) -> {x, y}
-  returns coordinate in window's coordinate system (works properly with
-  css transforms without perspective projection)
-*/
-
-(function () {
-    'use strict'
-
-    var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
-
-    function Point(x, y, z) {
-        this.x = x
-        this.y = y
-        this.z = z
-    }
-
-    Point.prototype.transformBy = function (matrix) {
-        var tmp = matrix.multiply(I.translate(this.x, this.y, this.z))
-        return new Point(tmp.m41, tmp.m42, tmp.m43)
-    }
-
-    function createMatrix(transform) {
-        try {
-            return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
-        } catch(e) {
-            console.warn(transform)
-            console.warn(e.toString())
-            return I
-        }
-    }
-
-    function getTransformationMatrix(element) {
-        var transformationMatrix = I
-        var x = element
-
-        while (x != undefined && x !== x.ownerDocument.documentElement) {
-            var computedStyle = window.getComputedStyle(x, undefined)
-            var transform = computedStyle.transform || 'none'
-            var c = transform === 'none' ? I : createMatrix(transform)
-            transformationMatrix = c.multiply(transformationMatrix)
-            x = x.parentNode
-        }
-
-        var w = element.offsetWidth
-        var h = element.offsetHeight
-        var i = 4
-        var left = +Infinity
-        var top = +Infinity
-        while (--i >= 0) {
-            var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
-                        0).transformBy(transformationMatrix)
-            if (p.x < left) {
-                left = p.x
-            }
-            if (p.y < top) {
-                top = p.y
-            }
-        }
-        var rect = element.getBoundingClientRect()
-        transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
-                                        window.pageYOffset + rect.top - top, 0)
-                            .multiply(transformationMatrix)
-        return transformationMatrix
-    }
-
-    window.convertPointFromPageToNode = function (element, pageX, pageY) {
-        return new Point(pageX, pageY, 0).transformBy(
-                                    getTransformationMatrix(element).inverse())
-    }
-
-    window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
-        return new Point(offsetX, offsetY, 0).transformBy(
-                                    getTransformationMatrix(element))
-    }
-
-}())
+/*jslint plusplus: true, vars: true, indent: 2 */
+/* convertPointFromPageToNode.js from
+ <script src="https://gist.github.com/Yaffle/1145197.js"></script>
+
+  convertPointFromPageToNode(element, event.pageX, event.pageY) -> {x, y}
+  returns coordinate in element's local coordinate system (works properly
+  with css transforms without perspective projection)
+  convertPointFromNodeToPage(element, offsetX, offsetY) -> {x, y}
+  returns coordinate in window's coordinate system (works properly with
+  css transforms without perspective projection)
+*/
+
+(function () {
+    'use strict'
+
+    var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
+
+    function Point(x, y, z) {
+        this.x = x
+        this.y = y
+        this.z = z
+    }
+
+    Point.prototype.transformBy = function (matrix) {
+        var tmp = matrix.multiply(I.translate(this.x, this.y, this.z))
+        return new Point(tmp.m41, tmp.m42, tmp.m43)
+    }
+
+    function createMatrix(transform) {
+        try {
+            return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
+        } catch(e) {
+            console.warn(transform)
+            console.warn(e.toString())
+            return I
+        }
+    }
+
+    function getTransformationMatrix(element) {
+        var transformationMatrix = I
+        var x = element
+
+        while (x != undefined && x !== x.ownerDocument.documentElement) {
+            var computedStyle = window.getComputedStyle(x, undefined)
+            var transform = computedStyle.transform || 'none'
+            var c = transform === 'none' ? I : createMatrix(transform)
+            transformationMatrix = c.multiply(transformationMatrix)
+            x = x.parentNode
+        }
+
+        var w = element.offsetWidth
+        var h = element.offsetHeight
+        var i = 4
+        var left = +Infinity
+        var top = +Infinity
+        while (--i >= 0) {
+            var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
+                        0).transformBy(transformationMatrix)
+            if (p.x < left) {
+                left = p.x
+            }
+            if (p.y < top) {
+                top = p.y
+            }
+        }
+        var rect = element.getBoundingClientRect()
+        transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
+                                        window.pageYOffset + rect.top - top, 0)
+                            .multiply(transformationMatrix)
+        return transformationMatrix
+    }
+
+    window.convertPointFromPageToNode = function (element, pageX, pageY) {
+        return new Point(pageX, pageY, 0).transformBy(
+                                    getTransformationMatrix(element).inverse())
+    }
+
+    window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
+        return new Point(offsetX, offsetY, 0).transformBy(
+                                    getTransformationMatrix(element))
+    }
+
+}())

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
@@ -1904,7 +1928,7 @@
         registerTap(key, point) {
             if (this.tapCounts.has(key)) {
                 let count = this.tapCounts.get(key);
-                this.tapCounts.set(key, count+1);
+                this.tapCounts.set(key, count + 1);
             }
             else {
                 this.tapCounts.set(key, 1);
@@ -1954,7 +1978,7 @@
             }
             let result = false;
             if (this.isTap(key)) {
-                
+
                 this.registerTap(key, ended);
                 result = this.tapCounts.get(key) == 2;
             }
@@ -2095,7 +2119,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 +2132,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 +2144,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 +2155,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 +2166,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 +2475,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 +2500,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 +2695,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.
@@ -7357,6 +7404,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
@@ -5068,7 +5092,7 @@
         registerTap(key, point) {
             if (this.tapCounts.has(key)) {
                 let count = this.tapCounts.get(key);
-                this.tapCounts.set(key, count+1);
+                this.tapCounts.set(key, count + 1);
             }
             else {
                 this.tapCounts.set(key, 1);
@@ -5118,7 +5142,7 @@
             }
             let result = false;
             if (this.isTap(key)) {
-                
+
                 this.registerTap(key, ended);
                 result = this.tapCounts.get(key) == 2;
             }
@@ -5259,7 +5283,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 +5296,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 +5308,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 +5319,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 +5330,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 +5639,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 +5664,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 +5859,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.

lib/app.html

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

lib/bundle.js

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

lib/capabilities.html

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

lib/capabilities.js

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

lib/coordinates.html

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

lib/doctest.html

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

lib/events.html

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

lib/examples/memory/index.html

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

lib/examples/multitouch.html

@@ -50,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/flippable.html

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

lib/frames.html

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

lib/imageloader.html

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

lib/index.html

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

lib/inspect.html

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

lib/interaction.html

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

lib/interaction.js

@@ -4,6 +4,7 @@
 import Interface from './interface.js'
 import { Points, Angle, MapProxy } from './utils.js'
 import Events from './events.js'
+import Logging from './logging.js'
 
 /** Interaction patterns
 
@@ -362,7 +363,7 @@ export class Interaction extends InteractionPoints {
     registerTap(key, point) {
         if (this.tapCounts.has(key)) {
             let count = this.tapCounts.get(key)
-            this.tapCounts.set(key, count+1)
+            this.tapCounts.set(key, count + 1)
         }
         else {
             this.tapCounts.set(key, 1)
@@ -412,7 +413,7 @@ export class Interaction extends InteractionPoints {
         }
         let result = false
         if (this.isTap(key)) {
-            
+
             this.registerTap(key, ended)
             result = this.tapCounts.get(key) == 2
         }
@@ -553,7 +554,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 +567,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 +579,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 +590,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 +601,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 +912,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 +937,11 @@ export class InteractionMapper extends InteractionDelegate {
                 this.interaction.addTarget(key, found)
             }
         }
+        let size = this.interaction.current.size
+        let limit = this.logInteractionsAbove
+        if (size > limit) {
+            Logging.log(`Number of interactions ${size} exceeds ${limit}`)
+        }
     }
 
     onMouseWheel(event) {

lib/interface.html

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

lib/logging.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Logging Doctest</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="../css/doctest.css">
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
+</head>
+
+<body id="page" onload="Doctest.run()">
+    <h1>
+        Logging
+    </h1>
+    <p>Store informations of your app permanently.</p>
+    <script class="doctest">
+        Logging.log('app started')
+    </script>
+</body>

lib/logging.js

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

lib/pixi/app-resolution.html

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

lib/pixi/app.html

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

lib/pixi/application.html

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

lib/pixi/badge.html

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

lib/pixi/blurfilter.html

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

lib/pixi/button.html

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

lib/pixi/buttongroup.html

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

lib/pixi/coordinates.html

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

lib/pixi/deepzoom/deepzoom.html

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

lib/pixi/deepzoom/image.html

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

lib/pixi/deepzoom/index.html

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

lib/pixi/flippable.html

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

lib/pixi/flippable.test.html

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

lib/pixi/forcelayout.html

@@ -9,10 +9,10 @@
     <link rel="stylesheet" href="../../css/doctest.css">
 
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
-    <script src="../3rdparty/all.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
 
-    <script src="../all.js"></script>
-    <script src="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 
     <script src="./lib/graphology.min.js"></script>
     <script src="./lib/graphology-layout-forceatlas2.js"></script>

lib/pixi/index.html

@@ -5,7 +5,7 @@
     <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="">
@@ -32,8 +32,8 @@ const index = new Index(itemTemplate, [
         ['Button', 'button.html'],
         ['ButtonGroup', 'buttongroup.html'],
         ['Coordinates', 'coordinates.html'],
-        ['DeepZoom', 'deepzoom.html'],
-        ['DeepZoomImage', 'deepzoomimage.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="./all.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
 </head>
 <body onload="Doctest.run()">
     <h1>LabeledGraphics</h1>

lib/pixi/message.html

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

lib/pixi/modal.html

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

lib/pixi/popover.html

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

lib/pixi/popup.html

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

lib/pixi/popupmenu.html

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

lib/pixi/progress.html

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

lib/pixi/scatter.html

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

lib/pixi/slider.html

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

lib/pixi/text.html

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

lib/pixi/theme.html

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

lib/pixi/tooltip.html

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

lib/pixi/volatile.html

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

lib/poppable.html

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

lib/popup.html

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

lib/popupmenu.html

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

lib/scatter.html

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

lib/styleguide.html

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

lib/stylus/index.html

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

lib/test.html

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

lib/uitest.html

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

lib/utils.html

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

package-lock.json

@@ -1424,8 +1424,7 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -1446,14 +1445,12 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -1468,20 +1465,17 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -1598,8 +1592,7 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -1611,7 +1604,6 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -1626,7 +1618,6 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -1634,14 +1625,12 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "minipass": {
                     "version": "2.3.5",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -1660,7 +1649,6 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -1741,8 +1729,7 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -1754,7 +1741,6 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -1840,8 +1826,7 @@
                 "safe-buffer": {
                     "version": "5.1.2",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -1877,7 +1862,6 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -1897,7 +1881,6 @@
                     "version": "3.0.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -1941,14 +1924,12 @@
                 "wrappy": {
                     "version": "1.0.2",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 },
                 "yallist": {
                     "version": "3.0.3",
                     "bundled": true,
-                    "dev": true,
-                    "optional": true
+                    "dev": true
                 }
             }
         },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iwmlib",
-    "version": "1.0.4",
+    "version": "1.0.7",
     "description": "An Open Source library for multi-touch, WebGL powered applications.",
     "main": "index.js",
     "directories": {