Implemented InteractionMapper.off

This commit is contained in:
Sebastian Kupke 2019-08-13 12:46:24 +02:00
parent e7bda6af17
commit 6e9ec938fc
85 changed files with 709 additions and 152 deletions

41
dist/iwmlib.js vendored
View File

@ -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);
}
}
}
}

41
dist/iwmlib.pixi.js vendored
View File

@ -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);
}
}
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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)
}
}
}
}

View File

@ -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",

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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()
await page.goto(`file://${__dirname}/hammerjs-destroy.html`)
console.log('App loaded')
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}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.tap('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
for (let j = 0; j < 5; 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,
deviceScaleFactor: 1
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()
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))

View File

@ -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()
await page.goto(`file://${__dirname}/hammerjs.html`)
console.log('App loaded')
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}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.tap('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
for (let j = 0; j < 5; 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,
deviceScaleFactor: 1
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()
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))

View File

@ -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()
await page.goto(`file://${__dirname}/index.html`)
console.log('App loaded')
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}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.click('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
for (let j = 0; j < 5; 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,
deviceScaleFactor: 1
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()
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))

View File

@ -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>

View File

@ -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(', ')}]
}]
}]
`
)
}

View File

@ -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>

View File

@ -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(', ')}]
}]
}]
`
)
}

View File

@ -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()
await page.goto(`file://${__dirname}/remove.html`)
console.log('App loaded')
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}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.click('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
for (let j = 0; j < 5; 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,
deviceScaleFactor: 1
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()
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))