Implemented InteractionMapper.off

dist/iwmlib.js

@@ -2750,6 +2750,10 @@
                 return this
             }
 
+            if (typeof Hammer.__hammers === 'undefined') {
+                Hammer.__hammers = new Map();
+            }
+
             // convert to array
             types = Array.isArray(types) ? types : types.split(/\s/);
             if (elements instanceof NodeList || elements instanceof HTMLCollection) {
@@ -2792,6 +2796,14 @@
                         hammer.on(type, event => {
                             cb(event);
                         });
+
+                        if (Hammer.__hammers.has(elements[j])) {
+                            const elementHammers = Hammer.__hammers.get(elements[j]);
+                            elementHammers.push(hammer);
+                            Hammer.__hammers.set(elements[j], elementHammers);
+                        } else {
+                            Hammer.__hammers.set(elements[j], [hammer]);
+                        }
                     }
                 } else {
                     for (let j = 0; j < elements.length; j++) {
@@ -2801,8 +2813,35 @@
                     }
                 }
             }
+        }
 
-            return this
+        /**
+         *
+         *
+         * @static
+         * @param {HTMLElement|HTMLElement[]} elements - An HTML element or an array of HTML elements.
+         */
+        static off(elements) {
+            if (typeof Hammer === 'undefined') {
+                console.error('Hammer.js not found!');
+                return this
+            }
+
+            // convert to array
+            if (elements instanceof NodeList || elements instanceof HTMLCollection) {
+                elements = Array.from(elements);
+            }
+            elements = Array.isArray(elements) ? elements : [elements];
+
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+
+                if (Hammer.__hammers.has(element)) {
+                    const elementHammers = Hammer.__hammers.get(element);
+                    elementHammers.forEach(it => it.destroy());
+                    Hammer.__hammers.delete(element);
+                }
+            }
         }
     }
 

dist/iwmlib.pixi.js

@@ -6374,6 +6374,10 @@
                 return this
             }
 
+            if (typeof Hammer.__hammers === 'undefined') {
+                Hammer.__hammers = new Map();
+            }
+
             // convert to array
             types = Array.isArray(types) ? types : types.split(/\s/);
             if (elements instanceof NodeList || elements instanceof HTMLCollection) {
@@ -6416,6 +6420,14 @@
                         hammer.on(type, event => {
                             cb(event);
                         });
+
+                        if (Hammer.__hammers.has(elements[j])) {
+                            const elementHammers = Hammer.__hammers.get(elements[j]);
+                            elementHammers.push(hammer);
+                            Hammer.__hammers.set(elements[j], elementHammers);
+                        } else {
+                            Hammer.__hammers.set(elements[j], [hammer]);
+                        }
                     }
                 } else {
                     for (let j = 0; j < elements.length; j++) {
@@ -6425,8 +6437,35 @@
                     }
                 }
             }
+        }
 
-            return this
+        /**
+         *
+         *
+         * @static
+         * @param {HTMLElement|HTMLElement[]} elements - An HTML element or an array of HTML elements.
+         */
+        static off(elements) {
+            if (typeof Hammer === 'undefined') {
+                console.error('Hammer.js not found!');
+                return this
+            }
+
+            // convert to array
+            if (elements instanceof NodeList || elements instanceof HTMLCollection) {
+                elements = Array.from(elements);
+            }
+            elements = Array.isArray(elements) ? elements : [elements];
+
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+
+                if (Hammer.__hammers.has(element)) {
+                    const elementHammers = Hammer.__hammers.get(element);
+                    elementHammers.forEach(it => it.destroy());
+                    Hammer.__hammers.delete(element);
+                }
+            }
         }
     }
 

doc/out/AbstractPopup.html

@@ -2918,7 +2918,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Badge.html

@@ -2374,7 +2374,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/BlurFilter.html

@@ -1798,7 +1798,7 @@ app.scene.filters = [blurFilter]</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Button.html

@@ -3816,7 +3816,7 @@ the tint property of the icon sprite.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ButtonGroup.html

@@ -3578,7 +3578,7 @@ app.scene.addChild(buttonGroup)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/DeepZoomImage.html

@@ -5096,7 +5096,7 @@ i.e. after loading a single tile</p></td>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/DeepZoomInfo.html

@@ -2609,7 +2609,7 @@ on completion.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Flippable.html

@@ -2512,7 +2512,7 @@ front.on('click', event => flippable.toggle())</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/FontInfo.html

@@ -1559,7 +1559,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Hypenate.html

@@ -1761,7 +1761,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/InteractivePopup.html

@@ -2343,7 +2343,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/LabeledGraphics.exports.LabeledGraphics.html

@@ -1561,7 +1561,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/LabeledGraphics.html

@@ -2626,7 +2626,7 @@ than wanted</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/List.html

@@ -2585,7 +2585,7 @@ app.scene.addChild(list)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Message.html

@@ -2441,7 +2441,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/MessageInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/MessageMessageInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Modal.html

@@ -2342,7 +2342,7 @@ a string or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ModalInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ModalModalInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PIXIApp.html

@@ -5743,7 +5743,7 @@ rejected with an error.</td>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Popup.html

@@ -2336,7 +2336,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenu.html

@@ -2390,7 +2390,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupMenuPopupInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupPopupInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupPopupInteractivePopup.html

@@ -1789,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Progress.html

@@ -2875,7 +2875,7 @@ app.scene.addChild(progress)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Scrollview.html

@@ -1707,7 +1707,7 @@ app.loader
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Slider.html

@@ -2966,7 +2966,7 @@ app.scene.addChild(slider)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Switch.html

@@ -3396,7 +3396,7 @@ app.scene.addChild(switch1)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/TextLabel.TextLabel.html

@@ -1690,7 +1690,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Theme.html

@@ -3165,7 +3165,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ThemeDark.html

@@ -1586,7 +1586,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ThemeLight.html

@@ -1598,7 +1598,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ThemeRed.html

@@ -1598,7 +1598,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/TileQuadNode.html

@@ -2050,7 +2050,7 @@ an indicator of tiles to free.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Tooltip.html

@@ -2512,7 +2512,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/UITest.html

@@ -4183,7 +4183,7 @@ test.start()</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Volatile.html

@@ -2099,7 +2099,7 @@ app.scene.addChild(button)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/global.html

@@ -3320,7 +3320,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/index.html

@@ -1485,7 +1485,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_abstractpopup.js.html

@@ -1808,7 +1808,7 @@ export default class AbstractPopup extends PIXI.Graphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_app.js.html

@@ -2189,7 +2189,7 @@ class FpsDisplay extends PIXI.Graphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_badge.js.html

@@ -1569,7 +1569,7 @@ export default class Badge extends AbstractPopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_blurfilter.js.html

@@ -1727,7 +1727,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_button.js.html

@@ -2171,7 +2171,7 @@ export default class Button extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_buttongroup.js.html

@@ -2174,7 +2174,7 @@ export default class ButtonGroup extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_deepzoom_image.js.html

@@ -2512,7 +2512,7 @@ export class DeepZoomImage extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_flippable.js.html

@@ -1906,7 +1906,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_labeledgraphics.js.html

@@ -1855,7 +1855,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_list.js.html

@@ -1834,7 +1834,7 @@ export default class List extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_message.js.html

@@ -1583,7 +1583,7 @@ export default class Message extends InteractivePopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_modal.js.html

@@ -1664,7 +1664,7 @@ export default class Modal extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_popup.js.html

@@ -1674,7 +1674,7 @@ export default class Popup extends InteractivePopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_popupmenu.js.html

@@ -1577,7 +1577,7 @@ export default class PopupMenu extends Popup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_progress.js.html

@@ -1759,7 +1759,7 @@ export default class Progress extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_scrollview.js.html

@@ -1518,7 +1518,7 @@ export default class Scrollview extends Scrollbox {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_slider.js.html

@@ -1923,7 +1923,7 @@ export default class Slider extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_switch.js.html

@@ -1977,7 +1977,7 @@ export default class Switch extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_theme.js.html

@@ -1718,7 +1718,7 @@ export class ThemeRed extends Theme {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_tooltip.js.html

@@ -1611,7 +1611,7 @@ export default class Tooltip extends AbstractPopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_volatile.js.html

@@ -1615,7 +1615,7 @@ export default class Volatile {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/uitest.js.html

@@ -2466,7 +2466,7 @@ class Event {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Aug 13 2019 12:46:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

lib/interaction.js

@@ -1087,6 +1087,10 @@ export class InteractionMapper extends InteractionDelegate {
             return this
         }
 
+        if (typeof Hammer.__hammers === 'undefined') {
+            Hammer.__hammers = new Map()
+        }
+
         // convert to array
         types = Array.isArray(types) ? types : types.split(/\s/)
         if (elements instanceof NodeList || elements instanceof HTMLCollection) {
@@ -1129,6 +1133,14 @@ export class InteractionMapper extends InteractionDelegate {
                     hammer.on(type, event => {
                         cb(event)
                     })
+
+                    if (Hammer.__hammers.has(elements[j])) {
+                        const elementHammers = Hammer.__hammers.get(elements[j])
+                        elementHammers.push(hammer)
+                        Hammer.__hammers.set(elements[j], elementHammers)
+                    } else {
+                        Hammer.__hammers.set(elements[j], [hammer])
+                    }
                 }
             } else {
                 for (let j = 0; j < elements.length; j++) {
@@ -1138,8 +1150,35 @@ export class InteractionMapper extends InteractionDelegate {
                 }
             }
         }
+    }
 
-        return this
+    /**
+     *
+     *
+     * @static
+     * @param {HTMLElement|HTMLElement[]} elements - An HTML element or an array of HTML elements.
+     */
+    static off(elements) {
+        if (typeof Hammer === 'undefined') {
+            console.error('Hammer.js not found!')
+            return this
+        }
+
+        // convert to array
+        if (elements instanceof NodeList || elements instanceof HTMLCollection) {
+            elements = Array.from(elements)
+        }
+        elements = Array.isArray(elements) ? elements : [elements]
+
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i]
+
+            if (Hammer.__hammers.has(element)) {
+                const elementHammers = Hammer.__hammers.get(element)
+                elementHammers.forEach(it => it.destroy())
+                Hammer.__hammers.delete(element)
+            }
+        }
     }
 }
 

package.json

@@ -12,6 +12,8 @@
         "test-eventlistener-remove": "node ./test/tests/eventlistener/remove.js",
         "test-eventlistener-hammerjs": "node ./test/tests/eventlistener/hammerjs.js",
         "test-eventlistener-hammerjs-destroy": "node ./test/tests/eventlistener/hammerjs-destroy.js",
+        "test-eventlistener-interactionmapper": "node ./test/tests/eventlistener/interactionmapper.js",
+        "test-eventlistener-interactionmapper-off": "node ./test/tests/eventlistener/interactionmapper-off.js",
         "build": "rollup --config ./rollup.config.js",
         "watch": "rollup --watch --config ./rollup.config.js",
         "3rdparty": "gulp",

test/tests/eventlistener/hammerjs-destroy.js

@@ -5,11 +5,11 @@ const fse = require('fs-extra')
 const _ = require('lodash')
 
 const CYCLES = 5000
-const TIMEOUT = 250
+const ID = 'hammerjs-destroy'
 
 ;(async () => {
     const browser = await puppeteer.launch({
-        headless: false,
+        headless: true,
         args: ['--disable-web-security'],
         defaultViewport: {
             width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
             hasTouch: true
         }
     })
-    const page = await browser.newPage()
+    const page = (await browser.pages())[0]
-    await page.goto(`file://${__dirname}/hammerjs-destroy.html`)
+    await page.goto(`file://${__dirname}/${ID}.html`)
-
-    console.log('App loaded')
 
     const metrics = []
 
     for (let i = 0; i < CYCLES; i++) {
         console.log(`Cycle ${i + 1} of ${CYCLES}`)
 
-        await sleep(TIMEOUT)
         metrics.push(await page.metrics())
 
         await page.tap('#add') // button 1
-        await sleep(100)
+        for (let j = 0; j < 5; j++) {
-        for (let j = 0; j < 10; j++) {
             await page.tap('#contentRandom') // button in card
         }
-        await sleep(100)
         await page.tap('#delete') // button 2
     }
 
@@ -43,19 +38,15 @@ const TIMEOUT = 250
 
     await page.setViewport({
         width: 1920,
-        height: 1280,
+        height: 1280
-        deviceScaleFactor: 1
     })
 
     await page.goto(`file://${__dirname}/../../chart/index.html`)
+    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
 
-    //await browser.close()
+    await browser.close()
 })()
 
-function sleep(milliseconds) {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
-}
-
 async function writeMetrics(metrics) {
     const first = metrics[0].Timestamp
     const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))

test/tests/eventlistener/hammerjs.js

@@ -5,11 +5,11 @@ const fse = require('fs-extra')
 const _ = require('lodash')
 
 const CYCLES = 5000
-const TIMEOUT = 250
+const ID = 'hammerjs'
 
 ;(async () => {
     const browser = await puppeteer.launch({
-        headless: false,
+        headless: true,
         args: ['--disable-web-security'],
         defaultViewport: {
             width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
             hasTouch: true
         }
     })
-    const page = await browser.newPage()
+    const page = (await browser.pages())[0]
-    await page.goto(`file://${__dirname}/hammerjs.html`)
+    await page.goto(`file://${__dirname}/${ID}.html`)
-
-    console.log('App loaded')
 
     const metrics = []
 
     for (let i = 0; i < CYCLES; i++) {
         console.log(`Cycle ${i + 1} of ${CYCLES}`)
 
-        await sleep(TIMEOUT)
         metrics.push(await page.metrics())
 
         await page.tap('#add') // button 1
-        await sleep(100)
+        for (let j = 0; j < 5; j++) {
-        for (let j = 0; j < 10; j++) {
             await page.tap('#contentRandom') // button in card
         }
-        await sleep(100)
         await page.tap('#delete') // button 2
     }
 
@@ -43,19 +38,15 @@ const TIMEOUT = 250
 
     await page.setViewport({
         width: 1920,
-        height: 1280,
+        height: 1280
-        deviceScaleFactor: 1
     })
 
     await page.goto(`file://${__dirname}/../../chart/index.html`)
+    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
 
-    //await browser.close()
+    await browser.close()
 })()
 
-function sleep(milliseconds) {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
-}
-
 async function writeMetrics(metrics) {
     const first = metrics[0].Timestamp
     const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))

test/tests/eventlistener/index.js

@@ -5,11 +5,11 @@ const fse = require('fs-extra')
 const _ = require('lodash')
 
 const CYCLES = 5000
-const TIMEOUT = 250
+const ID = 'index'
 
 ;(async () => {
     const browser = await puppeteer.launch({
-        headless: false,
+        headless: true,
         args: ['--disable-web-security'],
         defaultViewport: {
             width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
             hasTouch: false
         }
     })
-    const page = await browser.newPage()
+    const page = (await browser.pages())[0]
-    await page.goto(`file://${__dirname}/index.html`)
+    await page.goto(`file://${__dirname}/${ID}.html`)
-
-    console.log('App loaded')
 
     const metrics = []
 
     for (let i = 0; i < CYCLES; i++) {
         console.log(`Cycle ${i + 1} of ${CYCLES}`)
 
-        await sleep(TIMEOUT)
         metrics.push(await page.metrics())
 
         await page.click('#add') // button 1
-        await sleep(100)
+        for (let j = 0; j < 5; j++) {
-        for (let j = 0; j < 10; j++) {
             await page.click('#contentRandom') // button in card
         }
-        await sleep(100)
         await page.click('#delete') // button 2
     }
 
@@ -43,19 +38,15 @@ const TIMEOUT = 250
 
     await page.setViewport({
         width: 1920,
-        height: 1280,
+        height: 1280
-        deviceScaleFactor: 1
     })
 
     await page.goto(`file://${__dirname}/../../chart/index.html`)
+    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
 
-    //await browser.close()
+    await browser.close()
 })()
 
-function sleep(milliseconds) {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
-}
-
 async function writeMetrics(metrics) {
     const first = metrics[0].Timestamp
     const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))

test/tests/eventlistener/interactionmapper-off.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Test EventListener</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
+        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
+        <script src="../../../dist/iwmlib.3rdparty.min.js"></script>
+        <script src="../../../dist/iwmlib.js"></script>
+    </head>
+    <body>
+        <section class="section">
+            <div class="container">
+                <h1 class="title">
+                    Memory Test EventListener with InteractionMapper and removal (off)
+                </h1>
+                <p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="container">
+                <div class="columns">
+                    <div class="column">
+                        <div class="buttons">
+                            <a class="button is-info is-fullwidth" id="add">Add HTML content</a>
+                            <a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
+                        </div>
+                    </div>
+                    <div class="column" id="content"></div>
+                </div>
+            </div>
+        </section>
+
+        <script>
+            const html = `
+                <div class="card">
+                    <div class="card-image">
+                        <figure class="image is-4by3">
+                        <img src="./images/1280x960.png" alt="Placeholder image">
+                        </figure>
+                    </div>
+                    <div class="card-content">
+                        <div class="media">
+                        <div class="media-left">
+                            <figure class="image is-48x48">
+                            <img src="./images/96x96.png" alt="Placeholder image">
+                            </figure>
+                        </div>
+                        <div class="media-content">
+                            <p class="title is-4">John Smith</p>
+                            <p class="subtitle is-6">@johnsmith</p>
+                        </div>
+                        </div>
+
+                        <div class="content">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Phasellus nec iaculis mauris.
+                        </div>
+                    </div>
+                    <footer class="card-footer">
+                        <a href="#" class="card-footer-item" id="contentRandom">Random</a>
+                        <a href="#" class="card-footer-item" id="contentDelete">Delete</a>
+                    </footer>
+                </div>
+            `
+
+            InteractionMapper.on('tap', document.querySelector('#add'), function() {
+                document.querySelector('#content').innerHTML = html
+
+                InteractionMapper.on('tap', document.querySelector('#contentRandom'), function() {
+                    document.querySelector('.media-content .title').innerHTML = chance.name()
+                    document.querySelector('.media-content .subtitle').innerHTML = chance.email()
+                    document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
+                })
+
+                InteractionMapper.on('tap', document.querySelector('#contentDelete'), function() {
+                    InteractionMapper.off(document.querySelector('#contentRandom'))
+                    InteractionMapper.off(document.querySelector('#contentDelete'))
+                    document.querySelector('#content').innerHTML = ''
+                })
+            })
+
+            InteractionMapper.on('tap', document.querySelector('#delete'), function() {
+                InteractionMapper.off(document.querySelector('#contentRandom'))
+                InteractionMapper.off(document.querySelector('#contentDelete'))
+                document.querySelector('#content').innerHTML = ''
+            })
+        </script>
+    </body>
+</html>

test/tests/eventlistener/interactionmapper-off.js

@@ -0,0 +1,146 @@
+/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
+
+const puppeteer = require('puppeteer')
+const fse = require('fs-extra')
+const _ = require('lodash')
+
+const CYCLES = 5000
+const ID = 'interactionmapper-off'
+
+;(async () => {
+    const browser = await puppeteer.launch({
+        headless: true,
+        args: ['--disable-web-security'],
+        defaultViewport: {
+            width: 1920,
+            height: 1280,
+            hasTouch: true
+        }
+    })
+    const page = (await browser.pages())[0]
+    await page.goto(`file://${__dirname}/${ID}.html`)
+
+    const metrics = []
+
+    for (let i = 0; i < CYCLES; i++) {
+        console.log(`Cycle ${i + 1} of ${CYCLES}`)
+
+        metrics.push(await page.metrics())
+
+        await page.tap('#add') // button 1
+        for (let j = 0; j < 5; j++) {
+            await page.tap('#contentRandom') // button in card
+        }
+        await page.tap('#delete') // button 2
+    }
+
+    await writeMetrics(metrics)
+
+    await page.setViewport({
+        width: 1920,
+        height: 1280
+    })
+
+    await page.goto(`file://${__dirname}/../../chart/index.html`)
+    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
+
+    await browser.close()
+})()
+
+async function writeMetrics(metrics) {
+    const first = metrics[0].Timestamp
+    const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
+    const documents = metrics.map(it => it.Documents)
+    const frames = metrics.map(it => it.Frames)
+    const jsEventListeners = metrics.map(it => it.JSEventListeners)
+    const nodes = metrics.map(it => it.Nodes)
+    const layoutCount = metrics.map(it => it.LayoutCount)
+    const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
+    const layoutDuration = metrics.map(it => it.LayoutDuration)
+    const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
+    const scriptDuration = metrics.map(it => it.ScriptDuration)
+    const taskDuration = metrics.map(it => it.TaskDuration)
+    const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
+    const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)
+
+    const labels = `[${timestamp.join(', ')}]`
+
+    await fse.outputFile(
+        `${__dirname}/../../chart/data.js`,
+        `
+        var data = [{
+            labels: ${labels},
+            datasets: [{
+                label: 'Documents',
+                backgroundColor: 'rgba(205, 37, 44, 0.2)',
+                borderColor: 'rgba(205, 37, 44, 1.00)',
+                data: [${documents.join(', ')}]
+            }, {
+                label: 'Frames',
+                backgroundColor: 'rgba(239, 116, 55, 0.2)',
+                borderColor: 'rgba(239, 116, 55, 1.00)',
+                data: [${frames.join(', ')}]
+            }]
+        }, {
+            labels: ${labels},
+            datasets: [{
+                label: 'JSEventListeners',
+                backgroundColor: 'rgba(248, 189, 64, 0.2)',
+                borderColor: 'rgba(248, 189, 64, 1.00)',
+                data: [${jsEventListeners.join(', ')}]
+            }, {
+                label: 'Nodes',
+                backgroundColor: 'rgba(181, 202, 62, 0.2)',
+                borderColor: 'rgba(181, 202, 62, 1.00)',
+                data: [${nodes.join(', ')}]
+            }, {
+                label: 'LayoutCount',
+                backgroundColor: 'rgba(50, 184, 79, 0.2)',
+                borderColor: 'rgba(50, 184, 79, 1.00)',
+                data: [${layoutCount.join(', ')}]
+            }, {
+                label: 'RecalcStyleCount',
+                backgroundColor: 'rgba(37, 180, 171, 0.2)',
+                borderColor: 'rgba(37, 180, 171, 1.00)',
+                data: [${recalcStyleCount.join(', ')}]
+            }]
+        }, {
+            labels: ${labels},
+            datasets: [{
+                label: 'LayoutDuration',
+                backgroundColor: 'rgba(45, 134, 203, 0.2)',
+                borderColor: 'rgba(45, 134, 203, 1.00)',
+                data: [${layoutDuration.join(', ')}]
+            }, {
+                label: 'RecalcStyleDuration',
+                backgroundColor: 'rgba(100, 58, 195, 0.2)',
+                borderColor: 'rgba(100, 58, 195, 1.00)',
+                data: [${recalcStyleDuration.join(', ')}]
+            }, {
+                label: 'ScriptDuration',
+                backgroundColor: 'rgba(161, 59, 195, 0.2)',
+                borderColor: 'rgba(161, 59, 195, 1.00)',
+                data: [${scriptDuration.join(', ')}]
+            }, {
+                label: 'TaksDuration',
+                backgroundColor: 'rgba(221, 65, 150, 0.2)',
+                borderColor: 'rgba(221, 65, 150, 1.00)',
+                data: [${taskDuration.join(', ')}]
+            }]
+        }, {
+            labels: ${labels},
+            datasets: [{
+                label: 'JSHeapUsedSize',
+                backgroundColor: 'rgba(163, 104, 70, 0.2)',
+                borderColor: 'rgba(163, 104, 70, 1.00)',
+                data: [${jsHeapUsedSize.join(', ')}]
+            }, {
+                label: 'JSHeapTotalSize',
+                backgroundColor: 'rgba(118, 118, 118, 0.2)',
+                borderColor: 'rgba(118, 118, 118, 1.00)',
+                data: [${jsHeapTotalSize.join(', ')}]
+            }]
+        }]
+    `
+    )
+}

test/tests/eventlistener/interactionmapper.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Test EventListener</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
+        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
+        <script src="../../../dist/iwmlib.3rdparty.min.js"></script>
+        <script src="../../../dist/iwmlib.js"></script>
+    </head>
+    <body>
+        <section class="section">
+            <div class="container">
+                <h1 class="title">
+                    Memory Test EventListener with InteractionMapper
+                </h1>
+                <p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="container">
+                <div class="columns">
+                    <div class="column">
+                        <div class="buttons">
+                            <a class="button is-info is-fullwidth" id="add">Add HTML content</a>
+                            <a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
+                        </div>
+                    </div>
+                    <div class="column" id="content"></div>
+                </div>
+            </div>
+        </section>
+
+        <script>
+            const html = `
+                <div class="card">
+                    <div class="card-image">
+                        <figure class="image is-4by3">
+                        <img src="./images/1280x960.png" alt="Placeholder image">
+                        </figure>
+                    </div>
+                    <div class="card-content">
+                        <div class="media">
+                        <div class="media-left">
+                            <figure class="image is-48x48">
+                            <img src="./images/96x96.png" alt="Placeholder image">
+                            </figure>
+                        </div>
+                        <div class="media-content">
+                            <p class="title is-4">John Smith</p>
+                            <p class="subtitle is-6">@johnsmith</p>
+                        </div>
+                        </div>
+
+                        <div class="content">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Phasellus nec iaculis mauris.
+                        </div>
+                    </div>
+                    <footer class="card-footer">
+                        <a href="#" class="card-footer-item" id="contentRandom">Random</a>
+                        <a href="#" class="card-footer-item" id="contentDelete">Delete</a>
+                    </footer>
+                </div>
+            `
+
+            InteractionMapper.on('tap', document.querySelector('#add'), function() {
+                document.querySelector('#content').innerHTML = html
+
+                InteractionMapper.on('tap', document.querySelector('#contentRandom'), function() {
+                    document.querySelector('.media-content .title').innerHTML = chance.name()
+                    document.querySelector('.media-content .subtitle').innerHTML = chance.email()
+                    document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
+                })
+
+                InteractionMapper.on('tap', document.querySelector('#contentDelete'), function() {
+                    document.querySelector('#content').innerHTML = ''
+                })
+            })
+
+            InteractionMapper.on('tap', document.querySelector('#delete'), function() {
+                document.querySelector('#content').innerHTML = ''
+            })
+        </script>
+    </body>
+</html>

test/tests/eventlistener/interactionmapper.js

@@ -0,0 +1,146 @@
+/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
+
+const puppeteer = require('puppeteer')
+const fse = require('fs-extra')
+const _ = require('lodash')
+
+const CYCLES = 5000
+const ID = 'interactionmapper'
+
+;(async () => {
+    const browser = await puppeteer.launch({
+        headless: true,
+        args: ['--disable-web-security'],
+        defaultViewport: {
+            width: 1920,
+            height: 1280,
+            hasTouch: true
+        }
+    })
+    const page = (await browser.pages())[0]
+    await page.goto(`file://${__dirname}/${ID}.html`)
+
+    const metrics = []
+
+    for (let i = 0; i < CYCLES; i++) {
+        console.log(`Cycle ${i + 1} of ${CYCLES}`)
+
+        metrics.push(await page.metrics())
+
+        await page.tap('#add') // button 1
+        for (let j = 0; j < 5; j++) {
+            await page.tap('#contentRandom') // button in card
+        }
+        await page.tap('#delete') // button 2
+    }
+
+    await writeMetrics(metrics)
+
+    await page.setViewport({
+        width: 1920,
+        height: 1280
+    })
+
+    await page.goto(`file://${__dirname}/../../chart/index.html`)
+    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
+
+    await browser.close()
+})()
+
+async function writeMetrics(metrics) {
+    const first = metrics[0].Timestamp
+    const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
+    const documents = metrics.map(it => it.Documents)
+    const frames = metrics.map(it => it.Frames)
+    const jsEventListeners = metrics.map(it => it.JSEventListeners)
+    const nodes = metrics.map(it => it.Nodes)
+    const layoutCount = metrics.map(it => it.LayoutCount)
+    const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
+    const layoutDuration = metrics.map(it => it.LayoutDuration)
+    const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
+    const scriptDuration = metrics.map(it => it.ScriptDuration)
+    const taskDuration = metrics.map(it => it.TaskDuration)
+    const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
+    const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)
+
+    const labels = `[${timestamp.join(', ')}]`
+
+    await fse.outputFile(
+        `${__dirname}/../../chart/data.js`,
+        `
+        var data = [{
+            labels: ${labels},
+            datasets: [{
+                label: 'Documents',
+                backgroundColor: 'rgba(205, 37, 44, 0.2)',
+                borderColor: 'rgba(205, 37, 44, 1.00)',
+                data: [${documents.join(', ')}]
+            }, {
+                label: 'Frames',
+                backgroundColor: 'rgba(239, 116, 55, 0.2)',
+                borderColor: 'rgba(239, 116, 55, 1.00)',
+                data: [${frames.join(', ')}]
+            }]
+        }, {
+            labels: ${labels},
+            datasets: [{
+                label: 'JSEventListeners',
+                backgroundColor: 'rgba(248, 189, 64, 0.2)',
+                borderColor: 'rgba(248, 189, 64, 1.00)',
+                data: [${jsEventListeners.join(', ')}]
+            }, {
+                label: 'Nodes',
+                backgroundColor: 'rgba(181, 202, 62, 0.2)',
+                borderColor: 'rgba(181, 202, 62, 1.00)',
+                data: [${nodes.join(', ')}]
+            }, {
+                label: 'LayoutCount',
+                backgroundColor: 'rgba(50, 184, 79, 0.2)',
+                borderColor: 'rgba(50, 184, 79, 1.00)',
+                data: [${layoutCount.join(', ')}]
+            }, {
+                label: 'RecalcStyleCount',
+                backgroundColor: 'rgba(37, 180, 171, 0.2)',
+                borderColor: 'rgba(37, 180, 171, 1.00)',
+                data: [${recalcStyleCount.join(', ')}]
+            }]
+        }, {
+            labels: ${labels},
+            datasets: [{
+                label: 'LayoutDuration',
+                backgroundColor: 'rgba(45, 134, 203, 0.2)',
+                borderColor: 'rgba(45, 134, 203, 1.00)',
+                data: [${layoutDuration.join(', ')}]
+            }, {
+                label: 'RecalcStyleDuration',
+                backgroundColor: 'rgba(100, 58, 195, 0.2)',
+                borderColor: 'rgba(100, 58, 195, 1.00)',
+                data: [${recalcStyleDuration.join(', ')}]
+            }, {
+                label: 'ScriptDuration',
+                backgroundColor: 'rgba(161, 59, 195, 0.2)',
+                borderColor: 'rgba(161, 59, 195, 1.00)',
+                data: [${scriptDuration.join(', ')}]
+            }, {
+                label: 'TaksDuration',
+                backgroundColor: 'rgba(221, 65, 150, 0.2)',
+                borderColor: 'rgba(221, 65, 150, 1.00)',
+                data: [${taskDuration.join(', ')}]
+            }]
+        }, {
+            labels: ${labels},
+            datasets: [{
+                label: 'JSHeapUsedSize',
+                backgroundColor: 'rgba(163, 104, 70, 0.2)',
+                borderColor: 'rgba(163, 104, 70, 1.00)',
+                data: [${jsHeapUsedSize.join(', ')}]
+            }, {
+                label: 'JSHeapTotalSize',
+                backgroundColor: 'rgba(118, 118, 118, 0.2)',
+                borderColor: 'rgba(118, 118, 118, 1.00)',
+                data: [${jsHeapTotalSize.join(', ')}]
+            }]
+        }]
+    `
+    )
+}

test/tests/eventlistener/remove.js

@@ -5,11 +5,11 @@ const fse = require('fs-extra')
 const _ = require('lodash')
 
 const CYCLES = 5000
-const TIMEOUT = 250
+const ID = 'remove'
 
 ;(async () => {
     const browser = await puppeteer.launch({
-        headless: false,
+        headless: true,
         args: ['--disable-web-security'],
         defaultViewport: {
             width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
             hasTouch: false
         }
     })
-    const page = await browser.newPage()
+    const page = (await browser.pages())[0]
-    await page.goto(`file://${__dirname}/remove.html`)
+    await page.goto(`file://${__dirname}/${ID}.html`)
-
-    console.log('App loaded')
 
     const metrics = []
 
     for (let i = 0; i < CYCLES; i++) {
         console.log(`Cycle ${i + 1} of ${CYCLES}`)
 
-        await sleep(TIMEOUT)
         metrics.push(await page.metrics())
 
         await page.click('#add') // button 1
-        await sleep(100)
+        for (let j = 0; j < 5; j++) {
-        for (let j = 0; j < 10; j++) {
             await page.click('#contentRandom') // button in card
         }
-        await sleep(100)
         await page.click('#delete') // button 2
     }
 
@@ -43,19 +38,15 @@ const TIMEOUT = 250
 
     await page.setViewport({
         width: 1920,
-        height: 1280,
+        height: 1280
-        deviceScaleFactor: 1
     })
 
     await page.goto(`file://${__dirname}/../../chart/index.html`)
+    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
 
-    //await browser.close()
+    await browser.close()
 })()
 
-function sleep(milliseconds) {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
-}
-
 async function writeMetrics(metrics) {
     const first = metrics[0].Timestamp
     const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))