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

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

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.
@@ -7359,6 +7406,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.
@@ -9066,7 +9113,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 +9924,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 +9948,7 @@
                 shadow: false,
                 eulerX: 0,
                 eulerY: 0,
-                eulerEase: Sine.easeOut,
+                eulerEase: Power1.easeOut,
                 useBackTransforms: false,
                 transformEase: Power2.easeOut,
                 focus: 800,

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

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

lib/pixi/flippable.js

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

lib/pixi/text.html

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

lib/uitest.html

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

package.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": {