IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Working on stacked buttons.

This commit is contained in:
Sebastian Kupke 2019-07-30 16:56:29 +02:00
parent 0bcf931465
commit 5f46b4feae
115 changed files with 3277 additions and 5134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc
View File

@ -2,5 +2,6 @@
"singleQuote": true, "singleQuote": true,
"jsxSingleQuote": true, "jsxSingleQuote": true,
"tabWidth": 4, "tabWidth": 4,
"semi": false "semi": false,
"printWidth": 120
} }

1087
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

4602
dist/iwmlib.pixi.js vendored
View File

File diff suppressed because it is too large Load Diff

2
doc/out/AbstractPopup.html
View File

@ -2912,7 +2912,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Badge.html
View File

@ -2368,7 +2368,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/BlurFilter.html
View File

@ -1792,7 +1792,7 @@ app.scene.filters = [blurFilter]</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Button.html
View File

@ -3810,7 +3810,7 @@ the tint property of the icon sprite.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

114
doc/out/ButtonGroup.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line77">buttongroup.js:77</a> <a href="pixi_buttongroup.js.html#line80">buttongroup.js:80</a>
</div> </div>
</div> </div>
@ -1811,6 +1811,110 @@ or a Theme object.</p></td>
<tr>
<td class="name"><code>maxWidth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal.</p></td>
</tr>
<tr>
<td class="name"><code>maxHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical.</p></td>
</tr>
<tr>
<td class="name"><code>stacked</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
false
</td>
<td class="description last">
<span class="optional">optional</span>
<p>If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.</p></td>
</tr>
<tr> <tr>
<td class="name"><code>padding</code></td> <td class="name"><code>padding</code></td>
@ -2889,7 +2993,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line367">buttongroup.js:367</a> <a href="pixi_buttongroup.js.html#line370">buttongroup.js:370</a>
</div> </div>
</div> </div>
@ -2994,7 +3098,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line262">buttongroup.js:262</a> <a href="pixi_buttongroup.js.html#line265">buttongroup.js:265</a>
</div> </div>
</div> </div>
@ -3099,7 +3203,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line356">buttongroup.js:356</a> <a href="pixi_buttongroup.js.html#line359">buttongroup.js:359</a>
</div> </div>
</div> </div>
@ -3206,7 +3310,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/DeepZoomImage.html
View File

@ -5090,7 +5090,7 @@ i.e. after loading a single tile</p></td>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/DeepZoomInfo.html
View File

@ -2603,7 +2603,7 @@ on completion.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Flippable.html
View File

@ -2506,7 +2506,7 @@ front.on('click', event => flippable.toggle())</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/FontInfo.html
View File

@ -1553,7 +1553,7 @@
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Hypenate.html
View File

@ -1755,7 +1755,7 @@
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/InteractivePopup.html
View File

@ -2337,7 +2337,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/LabeledGraphics.exports.LabeledGraphics.html
View File

@ -1555,7 +1555,7 @@
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/LabeledGraphics.html
View File

@ -2620,7 +2620,7 @@ than wanted</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/List.html
View File

@ -2579,7 +2579,7 @@ app.scene.addChild(list)</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Message.html
View File

@ -2435,7 +2435,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/MessageInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/MessageMessageInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Modal.html
View File

@ -2336,7 +2336,7 @@ a string or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/ModalInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/ModalModalInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PIXIApp.html
View File

@ -5737,7 +5737,7 @@ rejected with an error.</td>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Popup.html
View File

@ -2330,7 +2330,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupMenu.html
View File

@ -2384,7 +2384,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupMenuPopupInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupMenuPopupPopupInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/PopupPopupInteractivePopup.html
View File

@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Progress.html
View File

@ -2869,7 +2869,7 @@ app.scene.addChild(progress)</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Scrollview.html
View File

@ -1701,7 +1701,7 @@ app.loader
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Slider.html
View File

@ -2960,7 +2960,7 @@ app.scene.addChild(slider)</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Switch.html
View File

@ -3390,7 +3390,7 @@ app.scene.addChild(switch1)</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/TextLabel.TextLabel.html
View File

@ -1684,7 +1684,7 @@
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Theme.html
View File

@ -3159,7 +3159,7 @@ const app = new PIXIApp({
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/ThemeDark.html
View File

@ -1580,7 +1580,7 @@ const app = new PIXIApp({
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/ThemeLight.html
View File

@ -1592,7 +1592,7 @@ const app = new PIXIApp({
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/ThemeRed.html
View File

@ -1592,7 +1592,7 @@ const app = new PIXIApp({
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/TileQuadNode.html
View File

@ -2044,7 +2044,7 @@ an indicator of tiles to free.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Tooltip.html
View File

@ -2506,7 +2506,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/UITest.html
View File

@ -4177,7 +4177,7 @@ test.start()</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/Volatile.html
View File

@ -2093,7 +2093,7 @@ app.scene.addChild(button)</code></pre>
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/global.html
View File

@ -3314,7 +3314,7 @@
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/index.html
View File

@ -1479,7 +1479,7 @@
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_abstractpopup.js.html
View File

@ -1825,7 +1825,7 @@ export default class AbstractPopup extends PIXI.Graphics {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_app.js.html
View File

@ -2227,7 +2227,7 @@ class FpsDisplay extends PIXI.Graphics {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_badge.js.html
View File

@ -1571,7 +1571,7 @@ export default class Badge extends AbstractPopup {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_blurfilter.js.html
View File

@ -1738,7 +1738,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_button.js.html
View File

@ -2182,7 +2182,7 @@ export default class Button extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

5
doc/out/pixi_buttongroup.js.html
View File

@ -1479,6 +1479,9 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object. * or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button. * @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button. * @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
* @param {number} [opts.maxWidth] - The maximum width of the buttongroup. Only used if stacked is true and the orientation is horizontal.
* @param {number} [opts.maxHeight] - The maximum height of the buttongroup. Only used if stacked is true and the orientation is vertical.
* @param {boolean} [opts.stacked=false] - If set to true, the buttons of the buttongroup gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border. * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button). * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right. * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@ -1821,7 +1824,7 @@ export default class ButtonGroup extends PIXI.Graphics {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_deepzoom_image.js.html
View File

@ -2545,7 +2545,7 @@ export class DeepZoomImage extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_flippable.js.html
View File

@ -1925,7 +1925,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_labeledgraphics.js.html
View File

@ -1870,7 +1870,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_list.js.html
View File

@ -1848,7 +1848,7 @@ export default class List extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_message.js.html
View File

@ -1579,7 +1579,7 @@ export default class Message extends InteractivePopup {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_modal.js.html
View File

@ -1661,7 +1661,7 @@ export default class Modal extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_popup.js.html
View File

@ -1688,7 +1688,7 @@ export default class Popup extends InteractivePopup {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_popupmenu.js.html
View File

@ -1574,7 +1574,7 @@ export default class PopupMenu extends Popup {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_progress.js.html
View File

@ -1779,7 +1779,7 @@ export default class Progress extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_scrollview.js.html
View File

@ -1512,7 +1512,7 @@ export default class Scrollview extends Scrollbox {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_slider.js.html
View File

@ -1951,7 +1951,7 @@ export default class Slider extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_switch.js.html
View File

@ -2016,7 +2016,7 @@ export default class Switch extends PIXI.Container {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_theme.js.html
View File

@ -1713,7 +1713,7 @@ export class ThemeRed extends Theme {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_tooltip.js.html
View File

@ -1605,7 +1605,7 @@ export default class Tooltip extends AbstractPopup {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/pixi_volatile.js.html
View File

@ -1609,7 +1609,7 @@ export default class Volatile {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

2
doc/out/uitest.js.html
View File

@ -2547,7 +2547,7 @@ class Event {
<footer class="content-size"> <footer class="content-size">
<div class="footer"> <div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit) Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
</div> </div>
</footer> </footer>
</div> </div>

14
lib/bootstrap.js vendored
View File

@ -1,9 +1,6 @@
class Bootstrap extends Object { class Bootstrap extends Object {
static get isSafari() { static get isSafari() {
return ( return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
/Safari/.test(navigator.userAgent) &&
/Apple Computer, Inc/.test(navigator.vendor)
)
} }
static get isModernSafari() { static get isModernSafari() {
@ -78,11 +75,7 @@ class Bootstrap extends Object {
}, },
null null
) )
} else if ( } else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
this.isModernSafari ||
this.isModernChrome ||
this.isModernFirefox
) {
this.load(src, callback) this.load(src, callback)
} else { } else {
this.load( this.load(
@ -129,8 +122,7 @@ class Bootstrap extends Object {
baseURL: baseUrl, baseURL: baseUrl,
map: { map: {
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js', 'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
'systemjs-babel-build': 'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
}, },
transpiler: 'plugin-babel', transpiler: 'plugin-babel',
meta: { meta: {

10
lib/bundle.js
View File

@ -2,15 +2,7 @@ import App from './app.js'
import Doctest from './doctest.js' import Doctest from './doctest.js'
import Errors from './errors.js' import Errors from './errors.js'
import Events from './events.js' import Events from './events.js'
import { import { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js'
DOMFlip,
DOMFlippable,
CardLoader,
PDFLoader,
ImageLoader,
FrameLoader,
HTMLLoader
} from './flippable.js'
import Index from './index.js' import Index from './index.js'
import Interface from './interface.js' import Interface from './interface.js'
import Logging from './logging.js' import Logging from './logging.js'

20
lib/capabilities.js
View File

@ -45,20 +45,12 @@ export class Capabilities {
*/ */
static get isElectron() { static get isElectron() {
// Renderer process // Renderer process
if ( if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
typeof window !== 'undefined' &&
typeof window.process === 'object' &&
window.process.type === 'renderer'
) {
return true return true
} }
// Main process // Main process
if ( if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
typeof process !== 'undefined' &&
typeof process.versions === 'object' &&
!!process.versions.electron
) {
return true return true
} }
@ -126,9 +118,7 @@ export class Capabilities {
export class CapabilitiesTests { export class CapabilitiesTests {
static testConfirm() { static testConfirm() {
let bool = confirm('Please confirm') let bool = confirm('Please confirm')
document.getElementById('demo').innerHTML = bool document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed'
? 'Confirmed'
: 'Not confirmed'
} }
static testPrompt() { static testPrompt() {
@ -149,9 +139,7 @@ export class CapabilitiesTests {
} }
static testMultiTouchTable() { static testMultiTouchTable() {
let value = let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable
'Is the device a multi-touch table? ' +
Capabilities.isMultiTouchTable
multi_touch_table.innerHTML = value multi_touch_table.innerHTML = value
} }

176
lib/card/card.js
View File

@ -32,8 +32,7 @@ export default class Card {
console.log('Setup Card...', modules) console.log('Setup Card...', modules)
context.modules = [] context.modules = []
modules.forEach(module => { modules.forEach(module => {
if (module.apply(context)) if (module.apply(context)) context.modules.push(module.constructor.name)
context.modules.push(module.constructor.name)
}) })
} }
@ -138,10 +137,7 @@ export default class Card {
event.stopPropagation() event.stopPropagation()
if (callStack) callStack.call(that, ...args) if (callStack) callStack.call(that, ...args)
else { else {
console.error( console.error('Could not call callback function ' + attributeVal, ...args)
'Could not call callback function ' + attributeVal,
...args
)
} }
}) })
} }
@ -168,9 +164,7 @@ export default class Card {
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g, /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) { function(data) {
let path = that._getRelativePath(arguments[4]) let path = that._getRelativePath(arguments[4])
const tag = `<${arguments[1]} ${arguments[2]} ${ const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
arguments[3]
}="${path}" ${arguments[5]}>`
/* if (that.debug) */ console.log('Adjusted: ', tag) /* if (that.debug) */ console.log('Adjusted: ', tag)
return tag return tag
} }
@ -328,16 +322,13 @@ export default class Card {
//Test if meanwhile another popup was registered... //Test if meanwhile another popup was registered...
this._getPopup(context) || this._getPopup(context) ||
// Or if an highlight was loaded, if the highlight already was closed. // Or if an highlight was loaded, if the highlight already was closed.
(highlight !== null && (highlight !== null && !this._isHighlightActive(context, highlight))
!this._isHighlightActive(context, highlight))
) { ) {
//.. if so remove the create popup instantly. //.. if so remove the create popup instantly.
popup.remove() popup.remove()
} else { } else {
// Otherwise set the popup regularly. // Otherwise set the popup regularly.
let popupParagraphs = popup.element.querySelectorAll( let popupParagraphs = popup.element.querySelectorAll('.popupContent > *')
'.popupContent > *'
)
// Remove a design error of naming two adjacent elements popup. // Remove a design error of naming two adjacent elements popup.
// Todo: fix this properly and remove this code. // Todo: fix this properly and remove this code.
@ -388,8 +379,7 @@ export default class Card {
* @memberof Card * @memberof Card
*/ */
static _createPopup(context, position, content, options = {}) { static _createPopup(context, position, content, options = {}) {
if (this.debug) if (this.debug) console.log('Create Popup.', context, position, content, options)
console.log('Create Popup.', context, position, content, options)
let popup = new Popup( let popup = new Popup(
Object.assign( Object.assign(
{ {
@ -482,9 +472,7 @@ export default class Card {
node = event.target node = event.target
} }
if (local == null) { if (local == null) {
let globalClick = event.center let globalClick = event.center ? event.center : { x: event.x, y: event.y }
? event.center
: { x: event.x, y: event.y }
local = Points.fromPageToNode(context, globalClick) local = Points.fromPageToNode(context, globalClick)
} }
if (this.debug) console.log('loadPopup', event) if (this.debug) console.log('loadPopup', event)
@ -517,17 +505,11 @@ export default class Card {
// Extract the body from the Popup site. // Extract the body from the Popup site.
let parser = new DOMParser() let parser = new DOMParser()
let popupPage = parser.parseFromString( let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
xhr.responseText,
'text/html'
)
//Fix the relative path of loaded images in the popup. //Fix the relative path of loaded images in the popup.
popupPage.querySelectorAll('img').forEach(node => { popupPage.querySelectorAll('img').forEach(node => {
node.setAttribute( node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
'src',
that._getRelativePath(node.getAttribute('src'))
)
}) })
let html = popupPage.body.innerHTML let html = popupPage.body.innerHTML
/** /**
@ -549,18 +531,10 @@ export default class Card {
Card._cleanup(context) Card._cleanup(context)
if (!isSame) { if (!isSame) {
Card._activateCorrespondingHighlights( Card._activateCorrespondingHighlights(context, node, parentArticle)
context,
node,
parentArticle
)
let callback = (popup, callback) => { let callback = (popup, callback) => {
if (this.debug) if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup)
console.log(
'Close popup (Editable = ' + editable + ').',
popup
)
if (editable) { if (editable) {
let isDirty = mainController.askSaveNode() let isDirty = mainController.askSaveNode()
if (isDirty) if (isDirty)
@ -596,8 +570,7 @@ export default class Card {
} }
//console.log("onreadystatechange", editable) //console.log("onreadystatechange", editable)
if (editable) { if (editable) {
if (this.debug) if (this.debug) console.log('pushController', src, popup.insertedNode)
console.log('pushController', src, popup.insertedNode)
mainController.pushController(popup.insertedNode, src) mainController.pushController(popup.insertedNode, src)
} }
} }
@ -627,10 +600,7 @@ export default class Card {
} }
if (correspondingHighlights.length > 0) { if (correspondingHighlights.length > 0) {
for (let highlight of correspondingHighlights) { for (let highlight of correspondingHighlights) {
if ( if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
highlight.parentNode &&
highlight.parentNode.nodeName.toLowerCase() == 'g'
) {
Highlight.openHighlight(highlight, { Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation animation: Card.highlightAnimation
}) })
@ -729,10 +699,7 @@ export default class Card {
let matrix = node.getCTM() let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix) let point = svgPoint.matrixTransform(matrix)
let global = Points.fromNodeToPage( let global = Points.fromNodeToPage(node.closest('div'), point)
node.closest('div'),
point
)
let local = Points.fromPageToNode(context, global) let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div') let overlay = document.createElement('div')
@ -778,16 +745,12 @@ export default class Card {
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 0) { if (xhr.status == 200 || xhr.status == 0) {
let html = this.postProcessResponseText( let html = this.postProcessResponseText(xhr.responseText)
xhr.responseText
)
let selector = Card.popupHtmlSelector let selector = Card.popupHtmlSelector
let content = { html: html.body.innerHTML, selector } let content = { html: html.body.innerHTML, selector }
resolve(content) resolve(content)
} else { } else {
reject( reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`)
` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`
)
} }
} }
} }
@ -802,8 +765,7 @@ export default class Card {
let editable = Card.isEditable() let editable = Card.isEditable()
if (editable) { if (editable) {
if (node.classList.contains('zoomable-icon')) if (node.classList.contains('zoomable-icon')) this._openZoomable(event)
this._openZoomable(event)
return return
} }
this._openZoomable(event) this._openZoomable(event)
@ -852,10 +814,7 @@ export default class Card {
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight) globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 }) let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 })
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos) let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos)
let relativeBottomRight = Points.fromPageToNode( let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight)
zoomable,
globalBottomRight
)
let width = let width =
relativeBottomRight.x + relativeBottomRight.x +
@ -969,12 +928,8 @@ export default class Card {
}) })
let zoomedFigStyle = window.getComputedStyle(zoomedFig) let zoomedFigStyle = window.getComputedStyle(zoomedFig)
let borderX = let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth)
parseFloat(zoomedFigStyle.borderLeftWidth) + let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth)
parseFloat(zoomedFigStyle.borderRightWidth)
let borderY =
parseFloat(zoomedFigStyle.borderBottomWidth) +
parseFloat(zoomedFigStyle.borderTopWidth)
const scaleFactor = 2 const scaleFactor = 2
const transformOrigin = 'bottom right' const transformOrigin = 'bottom right'
@ -1026,14 +981,7 @@ export default class Card {
.to(zoomCaption, this.animation.fade, { .to(zoomCaption, this.animation.fade, {
autoAlpha: 1 autoAlpha: 1
}) })
} else } else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
this._openZoomableEditorBehaviour(
wrapper,
img,
zoomable,
zoomedFig,
current
)
} }
/** /**
@ -1066,13 +1014,7 @@ export default class Card {
return parent.querySelector('.icon') return parent.querySelector('.icon')
} }
static _openZoomableEditorBehaviour( static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) {
wrapper,
img,
zoomable,
zoomedFig,
current
) {
let zoomContainer = document.createElement('div') let zoomContainer = document.createElement('div')
let zoomIcon = zoomable.querySelector('.zoom-icon') let zoomIcon = zoomable.querySelector('.zoom-icon')
zoomContainer.style.position = 'relative' zoomContainer.style.position = 'relative'
@ -1166,8 +1108,7 @@ export default class Card {
* @memberof Card * @memberof Card
*/ */
static closeZoomable(context, zoomable, zoomedFig) { static closeZoomable(context, zoomable, zoomedFig) {
if (this.debug) if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig)
console.log('Close Zoomable', context, zoomable, zoomedFig)
if (zoomable) { if (zoomable) {
this._unsetZoomable(context) this._unsetZoomable(context)
@ -1218,13 +1159,7 @@ export default class Card {
* @param {*} src - The src of the expanded element * @param {*} src - The src of the expanded element
* @param {*} callback - A callback that is called when the expanded element is closed * @param {*} callback - A callback that is called when the expanded element is closed
*/ */
static expandIndexCard( static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) {
card,
html,
tagName = 'article',
src = null,
callback = null
) {
let editable = Card.isEditable() let editable = Card.isEditable()
let context = this.getContext(card) let context = this.getContext(card)
@ -1257,10 +1192,7 @@ export default class Card {
let globalPreviewRect = Card._getGlobalRect(card) let globalPreviewRect = Card._getGlobalRect(card)
let globalIndexCardRect = Card._getGlobalRect(indexbox) let globalIndexCardRect = Card._getGlobalRect(indexbox)
let localOrigin = Points.fromPageToNode( let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect))
indexbox,
Rect.getPosition(globalPreviewRect)
)
let scaleX = globalPreviewRect.width / globalIndexCardRect.width let scaleX = globalPreviewRect.width / globalIndexCardRect.width
let scaleY = globalPreviewRect.height / globalIndexCardRect.height let scaleY = globalPreviewRect.height / globalIndexCardRect.height
@ -1331,15 +1263,12 @@ export default class Card {
let cardName = strparts[strparts.length - 1] let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ') strparts = card.className.split(' ')
let cardType = strparts[1] let cardType = strparts[1]
let msg = let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg) console.log('Logging:', msg)
Logging.log(msg) Logging.log(msg)
} }
let desiredBorderBottomWidth = parseInt( let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
window.getComputedStyle(titlebar).borderBottomWidth
)
TweenLite.to(clone, Card.animation.articleTransition, { TweenLite.to(clone, Card.animation.articleTransition, {
x: -padding, x: -padding,
y: -padding, y: -padding,
@ -1360,8 +1289,7 @@ export default class Card {
}) })
// Retain the border at same visual thickness. // Retain the border at same visual thickness.
titlebar.style.borderBottomWidth = titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
desiredBorderBottomWidth / transform.scaleY + 'px'
} }
}) })
@ -1384,13 +1312,7 @@ export default class Card {
let cardName = strparts[strparts.length - 1] let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ') strparts = card.className.split(' ')
let cardType = strparts[1] let cardType = strparts[1]
let msg = let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName
'Card: ' +
cardID +
': closeTopic: ' +
cardType +
', ' +
cardName
console.log('Logging:', msg) console.log('Logging:', msg)
Logging.log(msg) Logging.log(msg)
} }
@ -1457,8 +1379,7 @@ export default class Card {
}) })
// Retain the border at same visual thickness. // Retain the border at same visual thickness.
titlebar.style.borderBottomWidth = titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
desiredBorderBottomWidth / transform.scaleY + 'px'
} }
}) })
} }
@ -1468,9 +1389,7 @@ export default class Card {
if (iconClone == null) { if (iconClone == null) {
iconClone = clone.querySelector('.cardicon') iconClone = clone.querySelector('.cardicon')
console.warn( console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.")
"Legacy selector. Change it to 'card-icon' and find a more suitable name."
)
} }
if (iconClone.tagName == 'img') { if (iconClone.tagName == 'img') {
@ -1478,11 +1397,7 @@ export default class Card {
} }
//console.log("ICON: ", iconClone) //console.log("ICON: ", iconClone)
iconClone.classList.remove('info') iconClone.classList.remove('info')
iconClone.classList.add( iconClone.classList.add('close', 'view-button', 'transparent-background')
'close',
'view-button',
'transparent-background'
)
// We append the icon clone to the subcard-content. // We append the icon clone to the subcard-content.
// Then it's always on the content and not on the background // Then it's always on the content and not on the background
@ -1589,13 +1504,7 @@ export default class Card {
// card.insertAdjacentElement('afterbegin', article) // card.insertAdjacentElement('afterbegin', article)
// TweenLite.set(article, { autoAlpha: 0 }) // TweenLite.set(article, { autoAlpha: 0 })
Card.expandIndexCard( Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback)
card,
parsedHTML,
'article',
relativeSource,
saveCallback
)
} }
} }
xhr.onerror = () => { xhr.onerror = () => {
@ -1632,9 +1541,7 @@ export default class Card {
let dom = child.closest('.info-card') let dom = child.closest('.info-card')
if (!dom) { if (!dom) {
dom = child.querySelector('.wrapper') dom = child.querySelector('.wrapper')
console.warn( console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.")
"Change the 'wrapper' class to 'info-card' it's more suitable."
)
} }
return dom // (dom == null) ? document.body : dom return dom // (dom == null) ? document.body : dom
} }
@ -1782,9 +1689,7 @@ export default class Card {
if (indexbox != null) { if (indexbox != null) {
// column != null || // column != null ||
let links = Array.from(indexbox.getElementsByTagName('a')) let links = Array.from(indexbox.getElementsByTagName('a'))
let globalClick = event.center let globalClick = event.center ? event.center : { x: event.x, y: event.y }
? event.center
: { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(indexbox, globalClick) let localClick = Points.fromPageToNode(indexbox, globalClick)
let linkRects = links.map(link => { let linkRects = links.map(link => {
@ -1819,16 +1724,9 @@ export default class Card {
let closestLinkIndex = distances.indexOf(Math.min(...distances)) let closestLinkIndex = distances.indexOf(Math.min(...distances))
let closestLink = links[closestLinkIndex] let closestLink = links[closestLinkIndex]
console.log( console.log('finding closest links', closestLink, closestLink.getClientRects())
'finding closest links',
closestLink,
closestLink.getClientRects()
)
if ( if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) {
distances[closestLinkIndex] < 44 &&
closestLink.getAttribute('href')
) {
// Adapt context and local position // Adapt context and local position
let context = this.getContext(closestLink) let context = this.getContext(closestLink)
let local = Points.fromPageToNode(context, globalClick) let local = Points.fromPageToNode(context, globalClick)

36
lib/card/highlight.js
View File

@ -60,10 +60,7 @@ export default class Highlight extends Object {
if (circle.classList.length == 0) { if (circle.classList.length == 0) {
circle.removeAttribute('class') circle.removeAttribute('class')
} }
if ( if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
circle.hasAttribute('id') &&
circle.getAttribute('id').startsWith('@@')
) {
circle.removeAttribute('id') circle.removeAttribute('id')
} }
circle.removeAttribute('data-svg-origin') circle.removeAttribute('data-svg-origin')
@ -78,10 +75,7 @@ export default class Highlight extends Object {
} }
} }
static expand( static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
obj,
{ scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
) {
if (obj == null) return if (obj == null) return
//console.log("expand") //console.log("expand")
obj.classList.add('zooming') obj.classList.add('zooming')
@ -166,9 +160,7 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke }) this.shrink(maskImage, { stroke })
return return
} }
let circles = Array.from(circleGroup.children).filter( let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
e => e.tagName == 'circle'
)
for (let c of circles) { for (let c of circles) {
//console.log("shrinking all circles") //console.log("shrinking all circles")
this.shrink(c, { stroke }) this.shrink(c, { stroke })
@ -188,10 +180,7 @@ export default class Highlight extends Object {
return false return false
} }
static openHighlight( static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) {
target,
{ animation = 0.5, scale = 2, onExpanded = null } = {}
) {
if (Highlight._isExpanded(target)) { if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!') console.log('Target is already expanded!')
return return
@ -205,10 +194,7 @@ export default class Highlight extends Object {
let image = parent.querySelector(imageId) let image = parent.querySelector(imageId)
if (image) { if (image) {
this._bringToFront(image) this._bringToFront(image)
} else } else console.error('Could not find corresponding image element.')
console.error(
'Could not find corresponding image element.'
)
} else console.log('Element was no parent:', target) } else console.log('Element was no parent:', target)
} }
this._bringToFront(target) this._bringToFront(target)
@ -253,12 +239,7 @@ export default class Highlight extends Object {
if (target && parent) { if (target && parent) {
parent.removeChild(target) parent.removeChild(target)
parent.appendChild(target) parent.appendChild(target)
} else } else console.error('Could not bring to front. Either no target or no parent.', target, parent)
console.error(
'Could not bring to front. Either no target or no parent.',
target,
parent
)
} }
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) { static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
@ -293,10 +274,7 @@ export default class Highlight extends Object {
* @returns * @returns
* @memberof Highlight * @memberof Highlight
*/ */
static _createSVGMask( static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
element,
{ svgRoot = null, image = null, id = null } = {}
) {
// We can fetch these values here, but it's more efficient to // We can fetch these values here, but it's more efficient to
// simply pass them in, as it's likely they were already retrieved beforehand. // simply pass them in, as it's likely they were already retrieved beforehand.
if (svgRoot == null) svgRoot = element.closest('svg') if (svgRoot == null) svgRoot = element.closest('svg')

73
lib/card/plugin.js
View File

@ -48,10 +48,7 @@ export class CardPluginBase {
} }
_getVerificationFunctions(context) { _getVerificationFunctions(context) {
return [ return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)]
this._verifyContext.bind(this, context),
this._verifyRequirements.bind(this, context)
]
} }
_verifyContext(context) { _verifyContext(context) {
@ -139,11 +136,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
constructor( constructor(
wrapperSelector, wrapperSelector,
overlaySelector = null, overlaySelector = null,
{ { zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {}
zoomAnimationDuration = 0.4,
fadeAnimationDuration = 0.4,
interactionType = 'tap'
} = {}
) { ) {
super() super()
this.wrapperSelector = wrapperSelector this.wrapperSelector = wrapperSelector
@ -160,14 +153,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
_getVerificationFunctions(context) { _getVerificationFunctions(context) {
let arr = super._getVerificationFunctions(context) let arr = super._getVerificationFunctions(context)
let funcs = [ let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)]
this._verifyElementsExist.bind(
this,
context,
this.wrapperSelector,
this.overlaySelector
)
]
return arr.concat(funcs) return arr.concat(funcs)
} }
@ -252,9 +238,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
* The minor side should not exceed the height of the context window. * The minor side should not exceed the height of the context window.
*/ */
const maxMinorSize = const maxMinorSize =
context.offsetHeight - context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop)
2 * parseInt(headerStlye.paddingTop) -
2 * parseInt(headerStlye.marginTop)
const max = { const max = {
width: context.offsetWidth * maxFillRatio, width: context.offsetWidth * maxFillRatio,
@ -284,10 +268,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
// const minorImageSize = getImageSize(minorSide) // const minorImageSize = getImageSize(minorSide)
let ratio = getImageSize(minorSide) / getImageSize(majorSide) let ratio = getImageSize(minorSide) / getImageSize(majorSide)
let size = let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize
majorImageSize > max[majorSide.name]
? max[majorSide.name]
: majorImageSize
if (size * ratio > maxMinorSize) { if (size * ratio > maxMinorSize) {
size = maxMinorSize / ratio size = maxMinorSize / ratio
@ -298,10 +279,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
height: 0 height: 0
} }
let position = Points.fromPageToNode( let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
context,
Points.fromNodeToPage(source, { x: 0, y: 0 })
)
let targetOffset = { let targetOffset = {
x: 0, x: 0,
@ -312,13 +290,9 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
targetDimensions[minorSide.name] = size * ratio targetDimensions[minorSide.name] = size * ratio
targetOffset[majorSide.axis] = targetOffset[majorSide.axis] =
(context['offset' + capitalize(majorSide.name)] - (context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2
targetDimensions[majorSide.name]) /
2
targetOffset[minorSide.axis] = targetOffset[minorSide.axis] =
(context['offset' + capitalize(minorSide.name)] - (context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2
targetDimensions[minorSide.name]) /
2
overlay.appendChild(imageWrapper) overlay.appendChild(imageWrapper)
@ -358,18 +332,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
} }
getBorderHeight(style) { getBorderHeight(style) {
const borderWidth = const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth) const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom)
const padding =
parseInt(style.paddingTop) + parseInt(style.paddingBottom)
return parseInt(style.width) + borderWidth + padding return parseInt(style.width) + borderWidth + padding
} }
getBorderWidth(style) { getBorderWidth(style) {
const borderWidth = const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth) const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight)
const padding =
parseInt(style.paddingLeft) + parseInt(style.paddingRight)
return parseInt(style.width) + borderWidth + padding return parseInt(style.width) + borderWidth + padding
} }
@ -404,16 +374,12 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase {
_doesParentExist(context, parent) { _doesParentExist(context, parent) {
if (parent == null) return true if (parent == null) return true
let valid = context.querySelector(parent) != null let valid = context.querySelector(parent) != null
if (!valid) if (!valid) console.error('Could not find parent on context.', context, parent)
console.error('Could not find parent on context.', context, parent)
return valid return valid
} }
append(context) { append(context) {
parent = parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container)
this.parent == null
? context
: context.querySelector(this.parent).appendChild(container)
let container = document.createElement('div') let container = document.createElement('div')
container.className = this.className container.className = this.className
parent.appendChild(container) parent.appendChild(container)
@ -513,15 +479,8 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
utterance.onboundary = () => { utterance.onboundary = () => {
console.log('onboundary', node.innerText) console.log('onboundary', node.innerText)
if ( if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) {
this.currentText.substring(0, 5) != console.log('text for speech synth changed!', this.currentText, node.innerText)
node.innerText.substring(0, 5)
) {
console.log(
'text for speech synth changed!',
this.currentText,
node.innerText
)
this._stop() this._stop()
} }
} }

24
lib/card/scatter.js
View File

@ -63,11 +63,7 @@ export default class ScatterCard extends Card {
* @returns * @returns
* @memberof Card * @memberof Card
*/ */
static createCardScatter( static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) {
html,
scatterContainer,
{ basePath = './', modules = [] } = {}
) {
let element = document.createElement('div') let element = document.createElement('div')
scatterContainer.element.appendChild(element) scatterContainer.element.appendChild(element)
@ -94,11 +90,7 @@ export default class ScatterCard extends Card {
* @returns * @returns
* @memberof CardScatter * @memberof CardScatter
*/ */
static loadAndCreateScatterCard( static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) {
scatterContainer,
item,
{ basePath = '../', modules = [], onClose = null } = {}
) {
console.log(basePath) console.log(basePath)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let url = basePath + '/' + item + '/index.html' let url = basePath + '/' + item + '/index.html'
@ -106,14 +98,10 @@ export default class ScatterCard extends Card {
this.loadHTML(url) this.loadHTML(url)
.then(html => { .then(html => {
console.log('Received', html) console.log('Received', html)
let element = this.createCardScatter( let element = this.createCardScatter(html, scatterContainer, {
html, basePath,
scatterContainer, modules
{ })
basePath,
modules
}
)
if (onClose) this.addOnCloseListener(element, onClose) if (onClose) this.addOnCloseListener(element, onClose)
resolve(element) resolve(element)
}) })

18
lib/card/wrapper.js
View File

@ -5,10 +5,7 @@ import Events from '../events.js'
import { Points } from '../utils.js' import { Points } from '../utils.js'
export default class CardWrapper extends Object { export default class CardWrapper extends Object {
constructor( constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
domNode,
{ triggerSVGClicks = true, allowClickDistance = 44 } = {}
) {
super() super()
this.domNode = domNode this.domNode = domNode
this.triggerSVGClicks = triggerSVGClicks this.triggerSVGClicks = triggerSVGClicks
@ -57,7 +54,7 @@ export default class CardWrapper extends Object {
isClickable(node) { isClickable(node) {
if (node == null) return false if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node)) // console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) { if (this.isClickPrevented(node)) {
return false return false
} }
@ -99,9 +96,7 @@ export default class CardWrapper extends Object {
nearestActive(event) { nearestActive(event) {
let element = this.domNode let element = this.domNode
let activeNodes = this.activeNodes() let activeNodes = this.activeNodes()
let globalClick = event.center let globalClick = event.center ? event.center : { x: event.x, y: event.y }
? event.center
: { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(element, globalClick) let localClick = Points.fromPageToNode(element, globalClick)
let clickRects = activeNodes.map(link => { let clickRects = activeNodes.map(link => {
@ -154,7 +149,7 @@ export default class CardWrapper extends Object {
} }
nodeTapped(node, event) { nodeTapped(node, event) {
console.log("nodeTapped", node, this.isClickable(node)) console.log('nodeTapped', node, this.isClickable(node))
if (this.isClickable(node)) { if (this.isClickable(node)) {
this.simulateClick(node, event) this.simulateClick(node, event)
return true return true
@ -165,7 +160,7 @@ export default class CardWrapper extends Object {
return true return true
} }
for (let [selector, handler] of this.tapHandler.entries()) { for (let [selector, handler] of this.tapHandler.entries()) {
console.log("nodeTapped", selector) console.log('nodeTapped', selector)
for (let obj of this.domNode.querySelectorAll(selector)) { for (let obj of this.domNode.querySelectorAll(selector)) {
if (node == obj) { if (node == obj) {
handler(event, node) handler(event, node)
@ -177,10 +172,9 @@ export default class CardWrapper extends Object {
} }
tap(event, calledBy = 'unknown') { tap(event, calledBy = 'unknown') {
if (event.isTrusted) { if (event.isTrusted) {
let node = this.nearestActive(event) let node = this.nearestActive(event)
console.log("tap", node) console.log('tap', node)
this.nodeTapped(node, event) this.nodeTapped(node, event)
/* let node = document.elementFromPoint(event.clientX, event.clientY) /* let node = document.elementFromPoint(event.clientX, event.clientY)

22
lib/doctest.js
View File

@ -30,32 +30,21 @@ export default class Doctest {
static expect(expr, value) { static expect(expr, value) {
if (this.pprint(expr) != this.pprint(value)) { if (this.pprint(expr) != this.pprint(value)) {
//throw new Error("got `" + expr + "` but expected `" + value + "`.") //throw new Error("got `" + expr + "` but expected `" + value + "`.")
throw new Error( throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.')
'got `' +
this.pprint(expr) +
'` but expected `' +
this.pprint(value) +
'`.'
)
} }
} }
static expectError(error, message) { static expectError(error, message) {
let index = error.toString().indexOf(message) let index = error.toString().indexOf(message)
if (index < 0) { if (index < 0) {
throw new Error( throw new Error('got `' + message + '` but expected `' + error + '`.')
'got `' + message + '` but expected `' + error + '`.'
)
} }
} }
static expectLog(...messages) { static expectLog(...messages) {
// if (!docTestLogMessages.equals(messages)) { // if (!docTestLogMessages.equals(messages)) {
docTestLogMessages.forEach((msg, i) => { docTestLogMessages.forEach((msg, i) => {
if (msg != messages[i]) if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.')
throw new Error(
'Unexpected log message: `' + messages[i] + '`.'
)
}) })
// throw new Error('Uups') // throw new Error('Uups')
//} //}
@ -104,10 +93,7 @@ export default class Doctest {
let lines = text.value.split('\n') let lines = text.value.split('\n')
let better = [] let better = []
for (let line of lines) { for (let line of lines) {
if ( if (replaceExpect && line.trim().startsWith('Doctest.expect(')) {
replaceExpect &&
line.trim().startsWith('Doctest.expect(')
) {
line = line.replace(/Doctest\.expect\(/, '>>> ').trim() line = line.replace(/Doctest\.expect\(/, '>>> ').trim()
if (line.endsWith(')') || line.endsWith(',')) { if (line.endsWith(')') || line.endsWith(',')) {
line = line.slice(0, -1) line = line.slice(0, -1)

16
lib/events.js
View File

@ -38,8 +38,7 @@ export default class Events {
// be this is a bug or a security feature. Workaround: we introduce // be this is a bug or a security feature. Workaround: we introduce
// a mouseDownSubstitute attribute that can be assigned to cloned // a mouseDownSubstitute attribute that can be assigned to cloned
// events after instantiation. // events after instantiation.
if (Reflect.has(event, 'mouseDownSubstitute')) if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute
return event.mouseDownSubstitute
return event.buttons || event.which return event.buttons || event.which
} }
@ -74,15 +73,7 @@ export default class Events {
for (let i = 0; i < targets.length; i++) { for (let i = 0; i < targets.length; i++) {
let t = targets[i] let t = targets[i]
let touchTarget = document.elementFromPoint(t.pageX, t.pageY) let touchTarget = document.elementFromPoint(t.pageX, t.pageY)
let touch = new Touch( let touch = new Touch(undefined, touchTarget, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY)
undefined,
touchTarget,
t.identifier,
t.pageX,
t.pageY,
t.screenX,
t.screenY
)
touches.push(touch) touches.push(touch)
} }
return new TouchList(...touches) return new TouchList(...touches)
@ -166,8 +157,7 @@ export default class Events {
let result = event.type let result = event.type
let selector = this.selector(event.target) let selector = this.selector(event.target)
result += ' selector: ' + selector result += ' selector: ' + selector
if (event.target != document.querySelector(selector)) if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector)
console.log('Cannot resolve', selector)
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'] let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']
for (let key of keys) { for (let key of keys) {
try { try {

46
lib/flippable.js
View File

@ -258,28 +258,22 @@ export class DOMFlip {
frontLoaded(loader) { frontLoaded(loader) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let scatter = new DOMScatter( let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, {
this.cardWrapper, x: loader.x,
this.domScatterContainer, y: loader.y,
{ startScale: loader.scale,
x: loader.x, scale: loader.scale,
y: loader.y, maxScale: loader.maxScale,
startScale: loader.scale, minScale: loader.minScale,
scale: loader.scale, width: loader.wantedWidth,
maxScale: loader.maxScale, height: loader.wantedHeight,
minScale: loader.minScale, rotation: loader.rotation,
width: loader.wantedWidth, translatable: this.translatable,
height: loader.wantedHeight, scalable: this.scalable,
rotation: loader.rotation, rotatable: this.rotatable,
translatable: this.translatable, overdoScaling: this.overdoScaling,
scalable: this.scalable, tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null
rotatable: this.rotatable, })
overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory
? this.tapDelegateFactory(this.cardWrapper)
: null
}
)
if (this.center) { if (this.center) {
scatter.centerAt(this.center) scatter.centerAt(this.center)
@ -296,9 +290,7 @@ export class DOMFlip {
//Remove callback //Remove callback
if (scatter.onTransform) { if (scatter.onTransform) {
let callbackIdx = scatter.onTransform.indexOf( let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale)
removeOnMinScale
)
scatter.onTransform.splice(callbackIdx, 1) scatter.onTransform.splice(callbackIdx, 1)
} }
} }
@ -572,9 +564,7 @@ export class DOMFlippable {
this.flipped = !this.flipped this.flipped = !this.flipped
let targetY = this.flipped ? 180 : 0 let targetY = this.flipped ? 180 : 0
let targetZ = this.flipped let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle
? this.startAngle + this.targetRotation(this.startAngle)
: this.startAngle
let targetScale = this.flipped ? this.wantedScale : this.startScale let targetScale = this.flipped ? this.wantedScale : this.startScale
let w = this.flipped ? this.wantedWidth : this.startWidth let w = this.flipped ? this.wantedWidth : this.startWidth
let h = this.flipped ? this.wantedHeight : this.startHeight let h = this.flipped ? this.wantedHeight : this.startHeight

34
lib/frames.js
View File

@ -59,15 +59,7 @@ export class FrameTarget {
let point = pointMap.get(key) let point = pointMap.get(key)
let p = Points.fromPageToNode(this.frame, point) let p = Points.fromPageToNode(this.frame, point)
let touchTarget = doc.elementFromPoint(p.x, p.y) let touchTarget = doc.elementFromPoint(p.x, p.y)
let touch = new Touch( let touch = new Touch(undefined, touchTarget, key, p.x, p.y, p.x, p.y)
undefined,
touchTarget,
key,
p.x,
p.y,
p.x,
p.y
)
touches.push(touch) touches.push(touch)
} }
return new TouchList(...touches) return new TouchList(...touches)
@ -102,12 +94,7 @@ export class FrameTarget {
this.target.dispatchEvent(touchEvent) this.target.dispatchEvent(touchEvent)
} }
simulateTouchEventSafari( simulateTouchEventSafari(type, point, pointMap, touchEventKey = 'targetTouches') {
type,
point,
pointMap,
touchEventKey = 'targetTouches'
) {
let p = Points.fromPageToNode(this.frame, point) let p = Points.fromPageToNode(this.frame, point)
let data = { let data = {
view: this.frame.contentWindow, view: this.frame.contentWindow,
@ -131,9 +118,7 @@ export class FrameTarget {
} }
isMouseLikeEvent(event) { isMouseLikeEvent(event) {
return ( return event.type.startsWith('mouse') || event.type.startsWith('pointer')
event.type.startsWith('mouse') || event.type.startsWith('pointer')
)
} }
onStart(event, interaction) { onStart(event, interaction) {
@ -142,11 +127,7 @@ export class FrameTarget {
if (this.isMouseLikeEvent(event)) { if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mousedown', point) this.simulateMouseEvent('mousedown', point)
} else { } else {
this.simulateTouchEvent( this.simulateTouchEvent('touchstart', point, interaction.current)
'touchstart',
point,
interaction.current
)
return return
} }
} }
@ -170,12 +151,7 @@ export class FrameTarget {
if (this.isMouseLikeEvent(event)) { if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mouseend', point) this.simulateMouseEvent('mouseend', point)
} else { } else {
this.simulateTouchEvent( this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches')
'touchend',
point,
interaction.ended,
'changedTouches'
)
return return
} }
} }

189
lib/interaction.js
View File

@ -205,10 +205,10 @@ export class InteractionPoints {
delta() { delta() {
let prev = [] let prev = []
let curr = [] let curr = []
let cm = { x: 0, y: 0} let cm = { x: 0, y: 0 }
let pm = { x: 0, y: 0} let pm = { x: 0, y: 0 }
let count = 0 let count = 0
for(let key of this.current.keys()) { for (let key of this.current.keys()) {
if (this.previous.has(key)) { if (this.previous.has(key)) {
let p = this.previous.get(key) let p = this.previous.get(key)
let c = this.current.get(key) let c = this.current.get(key)
@ -227,7 +227,7 @@ export class InteractionPoints {
let scaled = 0 let scaled = 0
let alpha = 0 let alpha = 0
let zoom = 1 let zoom = 1
for(let i=0; i<count; i++) { for (let i = 0; i < count; i++) {
let p = prev[i] let p = prev[i]
let c = curr[i] let c = curr[i]
let previousAngle = Points.angle(p, pm) let previousAngle = Points.angle(p, pm)
@ -253,17 +253,8 @@ export class InteractionPoints {
let c2 = current[1] let c2 = current[1]
let distance2 = Points.distance(c1, c2) let distance2 = Points.distance(c1, c2)
return new InteractionDelta( return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, count, distance2)
delta.x, } else {
delta.y,
zoom,
alpha,
cm,
count,
distance2
)
}
else {
return null return null
} }
} }
@ -303,33 +294,14 @@ export class InteractionPoints {
let currentAngle = Points.angle(c1, c2) let currentAngle = Points.angle(c1, c2)
let previousAngle = Points.angle(p1, p2) let previousAngle = Points.angle(p1, p2)
let alpha = this.diffAngle(currentAngle, previousAngle) let alpha = this.diffAngle(currentAngle, previousAngle)
return new InteractionDelta( return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize, distance2)
delta.x, } else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
delta.y,
zoom,
alpha,
cm,
csize,
distance2
)
} else if (
csize == 1 &&
psize == 1 &&
this.current.firstKey() == this.previous.firstKey()
) {
// We need to ensure that the keys are the same, since single points with different keys // We need to ensure that the keys are the same, since single points with different keys
// can jump // can jump
let current = this.current.first() let current = this.current.first()
let previous = this.previous.first() let previous = this.previous.first()
let delta = Points.subtract(current, previous) let delta = Points.subtract(current, previous)
return new InteractionDelta( return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
delta.x,
delta.y,
1.0,
0.0,
current,
csize
)
} }
return null return null
} }
@ -483,11 +455,7 @@ export class Interaction extends InteractionPoints {
isTap(key) { isTap(key) {
let ended = this.ended.get(key) let ended = this.ended.get(key)
let start = this.start.get(key) let start = this.start.get(key)
if ( if (start && ended && Points.distance(ended, start) < this.tapDistance) {
start &&
ended &&
Points.distance(ended, start) < this.tapDistance
) {
let t1 = this.timestamps.get(key) let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) { if (tookLong) {
@ -509,10 +477,7 @@ export class Interaction extends InteractionPoints {
this.unregisterTap(key) this.unregisterTap(key)
} }
} }
if ( if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
this.tapTimestamps.has(key) &&
performance.now() > this.tapTimestamps.get(key) + this.tapDuration
) {
//console.log("tap too long") //console.log("tap too long")
this.unregisterTap(key) this.unregisterTap(key)
} }
@ -537,11 +502,7 @@ export class Interaction extends InteractionPoints {
isLongPress(key) { isLongPress(key) {
let ended = this.ended.get(key) let ended = this.ended.get(key)
let start = this.start.get(key) let start = this.start.get(key)
if ( if (start && ended && Points.distance(ended, start) < this.tapDistance) {
start &&
ended &&
Points.distance(ended, start) < this.tapDistance
) {
let t1 = this.timestamps.get(key) let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) { if (tookLong) {
@ -608,9 +569,7 @@ export class InteractionDelegate {
setupInteraction() { setupInteraction() {
if (this.debug) { if (this.debug) {
let error = this.targetInterface.implementationError( let error = this.targetInterface.implementationError(this.target.constructor)
this.target.constructor
)
if (error != null) { if (error != null) {
throw new Error('Expected IInteractionTarget: ' + error) throw new Error('Expected IInteractionTarget: ' + error)
} }
@ -648,16 +607,11 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointermove', 'pointermove',
e => { e => {
if (this.debug) if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
console.log('pointermove', e.pointerId, e.pointerType)
if ( if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
e.pointerType == 'touch' ||
(e.pointerType == 'mouse' && Events.isPointerDown(e))
) {
// this.capture(e) && // this.capture(e) &&
if (this.debug) if (this.debug) console.log('pointermove captured', e.pointerId)
console.log('pointermove captured', e.pointerId)
this.onMove(e) this.onMove(e)
} }
}, },
@ -666,8 +620,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointerup', 'pointerup',
e => { e => {
if (this.debug) if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
console.log('pointerup', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) { if (this.capturePointerEvents) {
try { try {
@ -682,11 +635,9 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointercancel', 'pointercancel',
e => { e => {
if (this.debug) if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
console.log('pointercancel', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
element.releasePointerCapture(e.pointerId)
}, },
useCapture useCapture
) )
@ -695,12 +646,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointerleave', 'pointerleave',
e => { e => {
if (this.debug) if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
console.log(
'pointerleave',
e.pointerId,
e.pointerType
)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
useCapture useCapture
@ -711,12 +657,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointerout', 'pointerout',
e => { e => {
if (this.debug) if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
console.log(
'pointerout',
e.pointerId,
e.pointerType
)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
useCapture useCapture
@ -727,13 +668,7 @@ export class InteractionDelegate {
window.addEventListener( window.addEventListener(
'pointerout', 'pointerout',
e => { e => {
if (this.debug) if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
console.log(
'pointerout',
e.pointerId,
e.pointerType,
e.target
)
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
} }
@ -746,8 +681,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'touchstart', 'touchstart',
e => { e => {
if (this.debug) if (this.debug) console.log('touchstart', this.touchPoints(e))
console.log('touchstart', this.touchPoints(e))
if (this.capture(e)) { if (this.capture(e)) {
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onStart(touch) this.onStart(touch)
@ -759,8 +693,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'touchmove', 'touchmove',
e => { e => {
if (this.debug) if (this.debug) console.log('touchmove', this.touchPoints(e), e)
console.log('touchmove', this.touchPoints(e), e)
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onMove(touch) this.onMove(touch)
} }
@ -783,12 +716,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'touchcancel', 'touchcancel',
e => { e => {
if (this.debug) if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
console.log(
'touchcancel',
e.targetTouches.length,
e.changedTouches.length
)
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onEnd(touch) this.onEnd(touch)
} }
@ -837,9 +765,7 @@ export class InteractionDelegate {
e => { e => {
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
console.warn( console.warn("Shouldn't happen: mouseout ends interaction")
"Shouldn't happen: mouseout ends interaction"
)
} }
}, },
useCapture useCapture
@ -880,16 +806,8 @@ export class InteractionDelegate {
} }
setupMouseWheelInteraction() { setupMouseWheelInteraction() {
this.mouseWheelElement.addEventListener( this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true)
'mousewheel', this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true)
this.onMouseWheel.bind(this),
true
)
this.mouseWheelElement.addEventListener(
'DOMMouseScroll',
this.onMouseWheel.bind(this),
true
)
} }
onMouseWheel(event) { onMouseWheel(event) {
@ -953,10 +871,7 @@ export class InteractionDelegate {
break break
} }
case 'Touch': { case 'Touch': {
let id = let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString()
event.touchType === 'stylus'
? 'stylus'
: event.identifier.toString()
result[id] = this.getPosition(event) result[id] = this.getPosition(event)
break break
} }
@ -1006,10 +921,7 @@ export class InteractionDelegate {
let point = extracted[key] let point = extracted[key]
let updated = this.interaction.update(key, point) let updated = this.interaction.update(key, point)
if (updated) { if (updated) {
console.warn( console.warn("new pointer in updateInteraction shouldn't happen", key)
"new pointer in updateInteraction shouldn't happen",
key
)
this.interactionStarted(event, key, point) this.interactionStarted(event, key, point)
} }
} }
@ -1143,11 +1055,7 @@ export class InteractionMapper extends InteractionDelegate {
onEnd(event) { onEnd(event) {
let extracted = this.extractPoint(event, 'changedTouches') let extracted = this.extractPoint(event, 'changedTouches')
this.endInteraction(event, extracted) this.endInteraction(event, extracted)
let mapped = this.interaction.mapInteraction( let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this))
extracted,
['ended'],
this.mapPositionToPoint.bind(this)
)
for (let [target, interaction] of mapped.entries()) { for (let [target, interaction] of mapped.entries()) {
target.onEnd(event, interaction) target.onEnd(event, interaction)
} }
@ -1181,10 +1089,7 @@ export class InteractionMapper extends InteractionDelegate {
// convert to array // convert to array
types = Array.isArray(types) ? types : types.split(/\s/) types = Array.isArray(types) ? types : types.split(/\s/)
if ( if (elements instanceof NodeList || elements instanceof HTMLCollection) {
elements instanceof NodeList ||
elements instanceof HTMLCollection
) {
elements = Array.from(elements) elements = Array.from(elements)
} }
elements = Array.isArray(elements) ? elements : [elements] elements = Array.isArray(elements) ? elements : [elements]
@ -1193,9 +1098,7 @@ export class InteractionMapper extends InteractionDelegate {
const type = types[i].toLowerCase() const type = types[i].toLowerCase()
// list of hammer events // list of hammer events
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test( const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type)
type
)
// if it is a hammer event // if it is a hammer event
if (useHammer) { if (useHammer) {
@ -1210,33 +1113,15 @@ export class InteractionMapper extends InteractionDelegate {
// recognizers // recognizers
if (type.startsWith('pan')) { if (type.startsWith('pan')) {
hammer hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
.get('pan')
.set(
Object.assign(
{ direction: Hammer.DIRECTION_ALL },
opts
)
)
} else if (type.startsWith('pinch')) { } else if (type.startsWith('pinch')) {
hammer hammer.get('pinch').set(Object.assign({ enable: true }, opts))
.get('pinch')
.set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('press')) { } else if (type.startsWith('press')) {
hammer.get('press').set(opts) hammer.get('press').set(opts)
} else if (type.startsWith('rotate')) { } else if (type.startsWith('rotate')) {
hammer hammer.get('rotate').set(Object.assign({ enable: true }, opts))
.get('rotate')
.set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('swipe')) { } else if (type.startsWith('swipe')) {
hammer hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
.get('swipe')
.set(
Object.assign(
{ direction: Hammer.DIRECTION_ALL },
opts
)
)
} else if (type.startsWith('tap')) { } else if (type.startsWith('tap')) {
hammer.get('tap').set(opts) hammer.get('tap').set(opts)
} }

6
lib/logging.js
View File

@ -59,11 +59,7 @@ export default class Logging {
} }
} }
static setup({ static setup({ log = console.log, warn = console.warn, error = console.error } = {}) {
log = console.log,
warn = console.warn,
error = console.error
} = {}) {
logHandlers.log = log logHandlers.log = log
logHandlers.warn = warn logHandlers.warn = warn
logHandlers.error = error logHandlers.error = error

39
lib/pixi/abstractpopup.js
View File

@ -83,12 +83,10 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
this.headerStyle.wordWrap = true this.headerStyle.wordWrap = true
this.headerStyle.wordWrapWidth = this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
this.opts.maxWidth - 2 * this.opts.padding
this.textStyle.wordWrap = true this.textStyle.wordWrap = true
this.textStyle.wordWrapWidth = this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
this.opts.maxWidth - 2 * this.opts.padding
} }
this.alpha = 0 this.alpha = 0
@ -131,10 +129,7 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.header instanceof PIXI.Text) { if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header header = this.opts.header
} else if (typeof this.opts.header === 'number') { } else if (typeof this.opts.header === 'number') {
header = new PIXI.Text( header = new PIXI.Text(this.opts.header.toString(), this.headerStyle)
this.opts.header.toString(),
this.headerStyle
)
} else { } else {
header = new PIXI.Text(this.opts.header, this.headerStyle) header = new PIXI.Text(this.opts.header, this.headerStyle)
} }
@ -161,10 +156,7 @@ export default class AbstractPopup extends PIXI.Graphics {
if (typeof this.opts.content === 'string') { if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle) content = new PIXI.Text(this.opts.content, this.textStyle)
} else if (typeof this.opts.content === 'number') { } else if (typeof this.opts.content === 'number') {
content = new PIXI.Text( content = new PIXI.Text(this.opts.content.toString(), this.textStyle)
this.opts.content.toString(),
this.textStyle
)
} else { } else {
content = this.opts.content content = this.opts.content
} }
@ -235,31 +227,16 @@ export default class AbstractPopup extends PIXI.Graphics {
* @return {AbstractPopup} A reference to the popup for chaining. * @return {AbstractPopup} A reference to the popup for chaining.
*/ */
draw() { draw() {
const square = const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const diameter = Math.round(this.opts.radius * 2) const diameter = Math.round(this.opts.radius * 2)
this.clear() this.clear()
this.lineStyle( this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.beginFill(this.opts.fill, this.opts.fillAlpha) this.beginFill(this.opts.fill, this.opts.fillAlpha)
if (square && diameter === this.wantedWidth) { if (square && diameter === this.wantedWidth) {
this.drawCircle( this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
this.wantedWidth / 2,
this.wantedHeight / 2,
this.opts.radius
)
} else { } else {
this.drawRoundedRect( this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
} }
this.endFill() this.endFill()

80
lib/pixi/app.js
View File

@ -28,10 +28,7 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
let dy = 0 let dy = 0
let canvas = this.renderer.view let canvas = this.renderer.view
let context = canvas.getContext('webgl') let context = canvas.getContext('webgl')
if ( if (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height) {
context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height
) {
extendWidth = context.drawingBufferWidth / canvas.width extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth //dx = wantedWidth - context.drawingBufferWidth
@ -143,10 +140,7 @@ export default class PIXIApp extends PIXI.Application {
console.log('App is in fullScreen mode or autoResize mode') console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50) const resizeDebounced = debounce(event => this.resize(event), 50)
window.addEventListener('resize', resizeDebounced) window.addEventListener('resize', resizeDebounced)
document.body.addEventListener( document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
'orientationchange',
this.checkOrientation.bind(this)
)
} }
if (monkeyPatchMapping) { if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping') console.log('Using monkey patched coordinate mapping')
@ -177,18 +171,12 @@ export default class PIXIApp extends PIXI.Application {
uri: '/graphql' uri: '/graphql'
}) })
const wsClient = new subscriptions.SubscriptionClient( const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
`wss://${location.hostname}/subscriptions`, reconnect: true,
{ connectionParams: {}
reconnect: true, })
connectionParams: {}
}
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions( const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
networkInterface,
wsClient
)
this.apolloClient = new apollo.ApolloClient({ this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions networkInterface: networkInterfaceWithSubscriptions
@ -324,10 +312,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to. * @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
* @return {PIXIApp} - Returns the PIXIApp for chaining. * @return {PIXIApp} - Returns the PIXIApp for chaining.
*/ */
resize( resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
event,
{ width = window.innerWidth, height = window.innerHeight } = {}
) {
this.width = width this.width = width
this.height = height this.height = height
this.expandRenderer() this.expandRenderer()
@ -348,8 +333,7 @@ export default class PIXIApp extends PIXI.Application {
monkeyPatchPixiMapping() { monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) { if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction let interactionManager = this.renderer.plugins.interaction
this.originalMapPositionToPoint = this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (point, x, y) => { interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y) return this.fixedMapPositionToPoint(point, x, y)
} }
@ -378,8 +362,7 @@ export default class PIXIApp extends PIXI.Application {
if ( if (
context !== null && context !== null &&
(context.drawingBufferWidth < canvas.width || (context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
context.drawingBufferHeight < canvas.height)
) { ) {
extendWidth = context.drawingBufferWidth / canvas.width extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height extendHeight = context.drawingBufferHeight / canvas.height
@ -388,12 +371,7 @@ export default class PIXIApp extends PIXI.Application {
} }
x *= extendWidth x *= extendWidth
y *= extendHeight y *= extendHeight
return this.originalMapPositionToPoint.call( return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
interactionManager,
local,
x,
y + dy
)
} }
/** /**
@ -444,9 +422,7 @@ export default class PIXIApp extends PIXI.Application {
* @return {Modal} Returns the Modal object. * @return {Modal} Returns the Modal object.
*/ */
modal(opts = {}) { modal(opts = {}) {
let modal = new Modal( let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(modal) this.scene.addChild(modal)
return modal return modal
@ -459,9 +435,7 @@ export default class PIXIApp extends PIXI.Application {
* @return {Message} Returns the Message object. * @return {Message} Returns the Message object.
*/ */
message(opts = {}) { message(opts = {}) {
let message = new Message( let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(message) this.scene.addChild(message)
return message return message
@ -480,11 +454,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status? * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining. * @return {PIXIApp} The PIXIApp object for chaining.
*/ */
loadSprites( loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
this.loadTextures( this.loadTextures(
resources, resources,
textures => { textures => {
@ -517,11 +487,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status? * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining. * @return {PIXIApp} The PIXIApp object for chaining.
*/ */
loadTextures( loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
if (!Array.isArray(resources)) { if (!Array.isArray(resources)) {
resources = [resources] resources = [resources]
} }
@ -534,16 +500,10 @@ export default class PIXIApp extends PIXI.Application {
let resolution = Math.round(this.renderer.resolution) let resolution = Math.round(this.renderer.resolution)
switch (resolution) { switch (resolution) {
case 2: case 2:
loader.add( loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
resource,
resource.replace(/\.([^.]*)$/, '@2x.$1')
)
break break
case 3: case 3:
loader.add( loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
resource,
resource.replace(/\.([^.]*)$/, '@3x.$1')
)
break break
default: default:
loader.add(resource) loader.add(resource)
@ -708,11 +668,7 @@ export default class PIXIApp extends PIXI.Application {
pixiGlobal.x *= resolution pixiGlobal.x *= resolution
pixiGlobal.y *= resolution pixiGlobal.y *= resolution
// console.log("app.convertPointFromNodeToPage", pixiGlobal) // console.log("app.convertPointFromNodeToPage", pixiGlobal)
return window.convertPointFromNodeToPage( return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
app.view,
pixiGlobal.x,
pixiGlobal.y
)
} }
} }

14
lib/pixi/badge.js
View File

@ -87,11 +87,7 @@ export default class Badge extends AbstractPopup {
content: this.opts.tooltip content: this.opts.tooltip
}) })
} else { } else {
this.opts.tooltip = Object.assign( this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
{},
{ object: this },
this.opts.tooltip
)
this.tooltip = new Tooltip(this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip)
} }
} }
@ -108,12 +104,8 @@ export default class Badge extends AbstractPopup {
layout() { layout() {
super.layout() super.layout()
this.content.x = this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2 this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
this.content.y =
this.height / 2 -
this.content.height / 2 -
this.opts.strokeWidth / 2
return this return this
} }

25
lib/pixi/blurfilter.js
View File

@ -68,9 +68,7 @@ export default class BlurFilter extends PIXI.Filter {
return this.tiltShiftXFilter.shape return this.tiltShiftXFilter.shape
} }
set shape(value) { set shape(value) {
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize( this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
value
)
} }
/** /**
@ -189,12 +187,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [shape.x, shape.y, shape.r] this.uniforms.circle = [shape.x, shape.y, shape.r]
} else { } else {
this.uniforms.shape = 2 this.uniforms.shape = 2
this.uniforms.rectangle = [ this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height]
shape.x,
shape.y,
shape.x + shape.width,
shape.y + shape.height
]
} }
this.uniforms.blur = blur this.uniforms.blur = blur
this.uniforms.delta = new PIXI.Point(0, 0) this.uniforms.delta = new PIXI.Point(0, 0)
@ -228,12 +221,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
return new PIXI.Circle(circle[0], circle[1], circle[2]) return new PIXI.Circle(circle[0], circle[1], circle[2])
} else { } else {
const rectangle = this.uniforms.rectangle const rectangle = this.uniforms.rectangle
return new PIXI.Rectangle( return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
rectangle[0],
rectangle[1],
rectangle[2],
rectangle[3]
)
} }
} }
set shape(value) { set shape(value) {
@ -242,12 +230,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [value.x, value.y, value.r] this.uniforms.circle = [value.x, value.y, value.r]
} else { } else {
this.uniforms.shape = 2 this.uniforms.shape = 2
this.uniforms.rectangle = [ this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]
value.x,
value.y,
value.x + value.width,
value.y + value.height
]
} }
} }
} }

121
lib/pixi/button.js
View File

@ -1,8 +1,9 @@
/* global PIXI TweenLite */ /* global */
import Theme from './theme.js' import Theme from './theme.js'
import Tooltip from './tooltip.js' import Tooltip from './tooltip.js'
import Badge from './badge.js' import Badge from './badge.js'
import Events from '../events.js' import Events from '../events.js'
import { Points } from '../utils.js'
/** /**
* Callback for the button action. * Callback for the button action.
@ -156,15 +157,9 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id this.id = this.opts.id
if ( if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
typeof this.opts.icon === 'undefined' &&
typeof this.opts.iconActive !== 'undefined'
) {
this.opts.icon = this.opts.iconActive this.opts.icon = this.opts.iconActive
} else if ( } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
typeof this.opts.icon !== 'undefined' &&
typeof this.opts.iconActive === 'undefined'
) {
this.opts.iconActive = this.opts.icon this.opts.iconActive = this.opts.icon
} }
@ -180,6 +175,8 @@ export default class Button extends PIXI.Container {
this._active = null this._active = null
this._disabled = null this._disabled = null
this.__start = { x: null, y: null }
this.iconInactive = null this.iconInactive = null
this.iconActive = null this.iconActive = null
this.text = null this.text = null
@ -234,17 +231,11 @@ export default class Button extends PIXI.Container {
// Icon // Icon
//----------------- //-----------------
if (this.opts.icon) { if (this.opts.icon) {
this.iconInactive = this.loadIcon( this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
this.opts.icon,
this.opts.iconColor
)
} }
if (this.opts.iconActive) { if (this.opts.iconActive) {
this.iconActive = this.loadIcon( this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
this.opts.iconActive,
this.opts.iconColorActive
)
} }
// interaction // interaction
@ -272,6 +263,8 @@ export default class Button extends PIXI.Container {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => { this.button.on('pointerdown', e => {
//this.capture(e) //this.capture(e)
this.__start.x = e.data.global.x
this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, { TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7, alpha: 0.7,
overwrite: 'none' overwrite: 'none'
@ -280,25 +273,30 @@ export default class Button extends PIXI.Container {
this.button.on('pointerup', e => { this.button.on('pointerup', e => {
this.capture(e) this.capture(e)
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.action) { const distance = Points.distance(e.data.global, this.__start)
this.opts.action.call(this, e, this)
}
TweenLite.to([this.button, this.content], this.theme.fast, { if (distance < 5) {
alpha: 0.83, if (this.opts.beforeAction) {
overwrite: 'none' this.opts.beforeAction.call(this, e, this)
}) }
if (this.opts.type === 'checkbox') { if (this.opts.action) {
this.active = !this.active this.opts.action.call(this, e, this)
} }
if (this.opts.afterAction) { TweenLite.to([this.button, this.content], this.theme.fast, {
this.opts.afterAction.call(this, e, this) alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
}
} }
}) })
@ -319,11 +317,7 @@ export default class Button extends PIXI.Container {
content: this.opts.tooltip content: this.opts.tooltip
}) })
} else { } else {
this.opts.tooltip = Object.assign( this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
{},
{ object: this },
this.opts.tooltip
)
this.tooltip = new Tooltip(this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip)
} }
} }
@ -353,15 +347,10 @@ export default class Button extends PIXI.Container {
badge.x = this.x - badge.width / 2 + opts.offsetLeft badge.x = this.x - badge.width / 2 + opts.offsetLeft
break break
case 'center': case 'center':
badge.x = badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
break break
case 'right': case 'right':
badge.x = badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
this.x + this.width - badge.width / 2 + opts.offsetLeft
} }
switch (opts.verticalAlign) { switch (opts.verticalAlign) {
@ -369,15 +358,10 @@ export default class Button extends PIXI.Container {
badge.y = this.y - badge.height / 2 + opts.offsetTop badge.y = this.y - badge.height / 2 + opts.offsetTop
break break
case 'middle': case 'middle':
badge.y = badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
break break
case 'bottom': case 'bottom':
badge.y = badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
this.y + this.height - badge.height / 2 + opts.offsetTop
} }
this.addChild(badge) this.addChild(badge)
@ -516,8 +500,7 @@ export default class Button extends PIXI.Container {
this.content.x = (this._width - this.content.width) / 2 this.content.x = (this._width - this.content.width) / 2
break break
case 'right': case 'right':
this.content.x = this.content.x = this._width - this.opts.padding - this.content.width
this._width - this.opts.padding - this.content.width
break break
} }
@ -529,8 +512,7 @@ export default class Button extends PIXI.Container {
this.content.y = (this._height - this.content.height) / 2 this.content.y = (this._height - this.content.height) / 2
break break
case 'bottom': case 'bottom':
this.content.y = this.content.y = this._height - this.opts.padding - this.content.height
this._height - this.opts.padding - this.content.height
break break
} }
@ -546,30 +528,13 @@ export default class Button extends PIXI.Container {
draw() { draw() {
this.button.clear() this.button.clear()
if (this.active) { if (this.active) {
this.button.lineStyle( this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.opts.strokeActiveWidth, this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else { } else {
this.button.lineStyle( this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.button.beginFill(this.opts.fill, this.opts.fillAlpha) this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
} }
this.button.drawRoundedRect( this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
0,
0,
this._width,
this._height,
this.opts.radius
)
this.button.endFill() this.button.endFill()
return this return this
@ -686,9 +651,7 @@ export default class Button extends PIXI.Container {
size = this.opts.minHeight - 2 * this.opts.padding size = this.opts.minHeight - 2 * this.opts.padding
} }
const url = Button.iconIsUrl(icon) const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
? icon
: `../../assets/icons/${icon}.png`
const iconTexture = PIXI.Texture.fromImage(url, true) const iconTexture = PIXI.Texture.fromImage(url, true)
const sprite = new PIXI.Sprite(iconTexture) const sprite = new PIXI.Sprite(iconTexture)

68
lib/pixi/buttongroup.html
View File

@ -10,6 +10,7 @@
<script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.pixi.js"></script>
@ -29,10 +30,10 @@
const app = new PIXIApp({ const app = new PIXIApp({
view: canvas, view: canvas,
width: 1000, width: 1000,
height: 1000 height: 1400
}).setup().run() }).setup().run()
let buttonGroup1 = new ButtonGroup({ const buttonGroup1 = new ButtonGroup({
x: 10, x: 10,
y: 10, y: 10,
buttons: [ buttons: [
@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({
] ]
}) })
let buttonGroup2 = new ButtonGroup({ const buttonGroup2 = new ButtonGroup({
x: 260, x: 260,
y: 10, y: 10,
buttons: [ buttons: [
@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({
strokeWidth: 3 strokeWidth: 3
}) })
let buttonGroup3 = new ButtonGroup({ const buttonGroup3 = new ButtonGroup({
x: 610, x: 610,
y: 10, y: 10,
buttons: [ buttons: [
@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({
strokeWidth: 1 strokeWidth: 1
}) })
let buttonGroup4 = new ButtonGroup({ const buttonGroup4 = new ButtonGroup({
x: 10, x: 10,
y: 90, y: 90,
buttons: [ buttons: [
@ -93,7 +94,7 @@ let buttonGroup4 = new ButtonGroup({
strokeWidth: 1 strokeWidth: 1
}) })
let buttonGroup5 = new ButtonGroup({ const buttonGroup5 = new ButtonGroup({
x: 10, x: 10,
y: 180, y: 180,
buttons: [ buttons: [
@ -106,7 +107,7 @@ let buttonGroup5 = new ButtonGroup({
type: 'checkbox' type: 'checkbox'
}) })
let buttonGroup6 = new ButtonGroup({ const buttonGroup6 = new ButtonGroup({
x: 450, x: 450,
y: 180, y: 180,
buttons: [ buttons: [
@ -119,7 +120,7 @@ let buttonGroup6 = new ButtonGroup({
type: 'radio' type: 'radio'
}) })
let buttonGroup7 = new ButtonGroup({ const buttonGroup7 = new ButtonGroup({
x: 10, x: 10,
y: 250, y: 250,
theme: 'light', theme: 'light',
@ -134,7 +135,7 @@ let buttonGroup7 = new ButtonGroup({
style: 'link' style: 'link'
}) })
let buttonGroup8 = new ButtonGroup({ const buttonGroup8 = new ButtonGroup({
x: 610, x: 610,
y: 250, y: 250,
buttons: [ buttons: [
@ -147,7 +148,7 @@ let buttonGroup8 = new ButtonGroup({
margin: 0 margin: 0
}) })
let buttonGroup9 = new ButtonGroup({ const buttonGroup9 = new ButtonGroup({
x: 10, x: 10,
y: 320, y: 320,
buttons: [ buttons: [
@ -160,7 +161,7 @@ let buttonGroup9 = new ButtonGroup({
minWidth: 70 minWidth: 70
}) })
let buttonGroup10 = new ButtonGroup({ const buttonGroup10 = new ButtonGroup({
x: 100, x: 100,
y: 320, y: 320,
buttons: [ buttons: [
@ -176,7 +177,7 @@ let buttonGroup10 = new ButtonGroup({
margin: 0 margin: 0
}) })
let buttonGroup11 = new ButtonGroup({ const buttonGroup11 = new ButtonGroup({
x: 250, x: 250,
y: 320, y: 320,
buttons: [ buttons: [
@ -197,7 +198,7 @@ let buttonGroup11 = new ButtonGroup({
type: 'checkbox' type: 'checkbox'
}) })
let buttonGroup12 = new ButtonGroup({ const buttonGroup12 = new ButtonGroup({
x: 400, x: 400,
y: 320, y: 320,
buttons: [ buttons: [
@ -212,7 +213,7 @@ let buttonGroup12 = new ButtonGroup({
type: 'radio' type: 'radio'
}) })
let buttonGroup13 = new ButtonGroup({ const buttonGroup13 = new ButtonGroup({
x: 520, x: 520,
y: 320, y: 320,
buttons: [ buttons: [
@ -231,10 +232,49 @@ let buttonGroup13 = new ButtonGroup({
minHeight: 100 minHeight: 100
}) })
const buttonGroup14 = new ButtonGroup({
x: 10,
y: 960,
buttons: [
{label: 'Stacked button 1', action: event => console.log('clicked 1')},
{label: 'Stacked button 2', action: event => console.log('clicked 2')},
{label: 'Stacked button 3', action: event => console.log('clicked 3')},
{label: 'Stacked button 4', action: event => console.log('clicked 4')},
{label: 'Stacked button 5', action: event => console.log('clicked 5')},
{label: 'Stacked button 6', action: event => console.log('clicked 6')},
{label: 'Stacked button 7', action: event => console.log('clicked 7')},
{label: 'Stacked button 8', action: event => console.log('clicked 8')}
],
stacked: true,
maxWidth: 620,
app
})
const buttonGroup15 = new ButtonGroup({
x: 10,
y: 1040,
buttons: [
{icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
{icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
{icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
{icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
{icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
{icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
{icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
],
orientation: 'vertical',
margin: 0,
stacked: true,
maxHeight: 200,
app
})
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3) app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4) app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6) app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8) app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13) app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15)
</script> </script>
</body> </body>
</html>

298
lib/pixi/buttongroup.js
View File

@ -1,5 +1,8 @@
/* globals ThrowPropsPlugin, Strong */
import Theme from './theme.js' import Theme from './theme.js'
import Button from './button.js' import Button from './button.js'
import Events from '../events.js'
/** /**
* Class that represents a PixiJS ButtonGroup. * Class that represents a PixiJS ButtonGroup.
@ -23,7 +26,7 @@ import Button from './button.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics} * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
*/ */
export default class ButtonGroup extends PIXI.Graphics { export default class ButtonGroup extends PIXI.Container {
/** /**
* Creates an instance of a ButtonGroup. * Creates an instance of a ButtonGroup.
* *
@ -39,6 +42,10 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object. * or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button. * @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button. * @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
* @param {number} [opts.maxWidth] - The maximum width of the button group. Only used if stacked is true and the orientation is horizontal.
* @param {number} [opts.maxHeight] - The maximum height of the button group. Only used if stacked is true and the orientation is vertical.
* @param {boolean} [opts.stacked=false] - If set to true, the buttons of the button group gets stacked if they are broader or higher than the maximum permitted width or height, depending on orientation.
* @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group.
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border. * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button). * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right. * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@ -87,6 +94,10 @@ export default class ButtonGroup extends PIXI.Graphics {
buttons: [], buttons: [],
minWidth: 44, minWidth: 44,
minHeight: 44, minHeight: 44,
maxWidth: null,
maxHeight: null,
stacked: false,
app: null,
padding: theme.padding, padding: theme.padding,
margin: theme.margin, margin: theme.margin,
iconPosition: 'left', // left, right iconPosition: 'left', // left, right
@ -119,6 +130,7 @@ export default class ButtonGroup extends PIXI.Graphics {
this.buttons = [] this.buttons = []
this._disabled = null this._disabled = null
this.__dragging = false
this.visible = this.opts.visible this.visible = this.opts.visible
@ -138,6 +150,12 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {ButtonGroup} A reference to the button group for chaining. * @return {ButtonGroup} A reference to the button group for chaining.
*/ */
setup() { setup() {
// inner container
//--------------------
const container = new PIXI.Graphics()
this.addChild(container)
this.container = container
// Buttons // Buttons
//----------------- //-----------------
let position = 0 let position = 0
@ -164,19 +182,11 @@ export default class ButtonGroup extends PIXI.Graphics {
it.fillActive = it.fillActive || this.opts.fillActive it.fillActive = it.fillActive || this.opts.fillActive
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
it.stroke = it.stroke || this.opts.stroke it.stroke = it.stroke || this.opts.stroke
it.strokeWidth = it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeAlpha =
it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeActive = it.strokeActive || this.opts.strokeActive it.strokeActive = it.strokeActive || this.opts.strokeActive
it.strokeActiveWidth = it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
it.strokeActiveWidth != null it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
? it.strokeActiveWidth
: this.opts.strokeActiveWidth
it.strokeActiveAlpha =
it.strokeActiveAlpha != null
? it.strokeActiveAlpha
: this.opts.strokeActiveAlpha
it.textStyle = it.textStyle || this.opts.textStyle it.textStyle = it.textStyle || this.opts.textStyle
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
it.style = it.style || this.opts.style it.style = it.style || this.opts.style
@ -195,10 +205,7 @@ export default class ButtonGroup extends PIXI.Graphics {
it.align = it.align || this.opts.align it.align = it.align || this.opts.align
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
it.afterAction = (event, button) => { it.afterAction = (event, button) => {
if ( if (this.opts.type === 'radio' && button.opts.type === 'default') {
this.opts.type === 'radio' &&
button.opts.type === 'default'
) {
this.buttons.forEach(it => { this.buttons.forEach(it => {
if (it.opts.type === 'default') { if (it.opts.type === 'default') {
it.active = false it.active = false
@ -215,23 +222,21 @@ export default class ButtonGroup extends PIXI.Graphics {
if (typeof it.tooltip === 'string') { if (typeof it.tooltip === 'string') {
it.tooltip = { content: it.tooltip, container: this } it.tooltip = { content: it.tooltip, container: this }
} else { } else {
it.tooltip = Object.assign( it.tooltip = Object.assign({}, { container: this }, it.tooltip)
{},
{ container: this },
it.tooltip
)
} }
} }
let button = new Button(it) let button = new Button(it)
this.addChild(button) this.container.addChild(button)
this.buttons.push(button) this.buttons.push(button)
position += button.__originalPosition = {
(this.opts.orientation === 'horizontal' x: button.x,
? button.width y: button.y
: button.height) + this.opts.margin }
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
} }
if (this.opts.orientation === 'vertical') { if (this.opts.orientation === 'vertical') {
@ -249,6 +254,43 @@ export default class ButtonGroup extends PIXI.Graphics {
this.disabled = this.opts.disabled this.disabled = this.opts.disabled
} }
// interaction
//--------------------
if (this.opts.stacked) {
this.interactive = true
this.on('pointerdown', this.onStart.bind(this))
this.on('pointermove', this.onMove.bind(this))
this.on('pointerup', this.onEnd.bind(this))
this.on('pointercancel', this.onEnd.bind(this))
this.on('pointerout', this.onEnd.bind(this))
this.on('pointerupoutside', this.onEnd.bind(this))
this.on('scroll', this.onScroll.bind(this))
// mousewheel
//--------------------
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
event.preventDefault()
this.emit('scroll', event)
}
})
}
const background = new PIXI.Graphics()
background.beginFill(0x000000, 0)
background.drawRect(0, 0, this.width, this.height)
background.endFill()
this.addChildAt(background, 0)
this.__initWidth = this.container.width
this.__deltaWidth = this.container.width - this.opts.maxWidth
}
return this return this
} }
@ -266,6 +308,12 @@ export default class ButtonGroup extends PIXI.Graphics {
//----------------- //-----------------
this.draw() this.draw()
// stacked
//-----------------
if (this.opts.stacked) {
this.stack()
}
return this return this
} }
@ -279,41 +327,27 @@ export default class ButtonGroup extends PIXI.Graphics {
if (this.opts.margin === 0) { if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide()) this.buttons.forEach(it => it.hide())
this.clear() this.container.clear()
this.lineStyle( this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.opts.strokeWidth, this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
this.opts.stroke, this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
this.opts.strokeAlpha
)
this.beginFill(this.opts.fill, this.opts.fillAlpha)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
// Draw borders // Draw borders
this.lineStyle( this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha / 2
)
this.buttons.forEach((it, i) => { this.buttons.forEach((it, i) => {
if (i > 0) { if (i > 0) {
this.moveTo(it.x, it.y) this.container.moveTo(it.x, it.y)
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
this.lineTo(it.x, it.height) this.container.lineTo(it.x, it.height)
} else { } else {
this.lineTo(it.width, it.y) this.container.lineTo(it.width, it.y)
} }
} }
}) })
this.endFill() this.container.endFill()
} }
return this return this
@ -367,4 +401,168 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/**
*
* @private
* @param {*} event
*/
onStart(event) {
this.__dragging = true
this.capture(event)
this.__delta = {
x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
/**
*
* @private
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x = event.data.global.x + this.__delta.x
} else {
this.container.position.y = event.data.global.y + this.__delta.y
}
if (this.opts.stacked) {
this.stack()
}
}
}
/**
*
* @private
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
if (typeof ThrowPropsPlugin != 'undefined') {
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
if (this.opts.orientation === 'horizontal') {
const distanceToLeft = this.container.x
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
if (distanceToLeft > 0 && distanceToLeft > distanceToRight) {
throwProps.x.end = 0
} else if (distanceToRight > 0 && distanceToRight > distanceToLeft) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth
}
} else {
const distanceToTop = this.container.y
const distanceToBottom = this.opts.maxHeight - this.container.y - this.container.height
if (distanceToTop > 0 && distanceToTop > distanceToBottom) {
throwProps.y.end = 0
} else if (distanceToBottom > 0 && distanceToBottom > distanceToTop) {
throwProps.y.end = this.opts.maxHeight - this.container.height
}
}
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
* @private
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.__initWidth < this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.container.height < this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
}
}
if (this.opts.stacked) {
this.stack()
}
}
/**
* Captures an event to inform InteractionMapper about processed events.
*
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
Events.capturedBy(originalEvent, this)
}
/**
*
*/
stack() {
this.buttons.forEach((it, index) => {
if (it.__originalPosition.x + this.container.x < 0) {
// left border
it.x = -this.container.x
} else if (it.__originalPosition.x + it.width > Math.abs(this.container.x) + this.opts.maxWidth) {
// right border
it.x = Math.abs(this.container.x) + this.opts.maxWidth - it.width
} else {
it.x = it.__originalPosition.x
}
})
this.buttons.sort((a, b) => {
const delta = Math.abs(this.container.x) + this.opts.maxWidth / 2
const distanceA = Math.abs(a.x - delta)
const distanceB = Math.abs(b.x - delta)
if (distanceA > distanceB) {
return -1
} else if (distanceB > distanceA) {
return 1
} else {
return 0
}
})
this.buttons.forEach(it => {
const parent = it.parent
parent.removeChild(it)
parent.addChild(it)
})
}
} }

22
lib/pixi/flipeffect.js
View File

@ -112,15 +112,9 @@ export default class FlipEffect {
this.scatter = scatter this.scatter = scatter
this.backLoader = backLoader this.backLoader = backLoader
this.scatterLoader = new ScatterLoader(scatter) this.scatterLoader = new ScatterLoader(scatter)
this.domFlip = new DOMFlip( this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
domScatterContainer, onBack: this.backCardClosed.bind(this)
flipTemplate, })
this.scatterLoader,
backLoader,
{
onBack: this.backCardClosed.bind(this)
}
)
this.setupInfoButton() this.setupInfoButton()
} }
@ -147,11 +141,7 @@ export default class FlipEffect {
let center = this.scatter.center let center = this.scatter.center
let canvas = app.renderer.view let canvas = app.renderer.view
let domNode = this.domFlip.domScatterContainer.element let domNode = this.domFlip.domScatterContainer.element
let page = window.convertPointFromNodeToPage( let page = window.convertPointFromNodeToPage(canvas, center.x * resolution, center.y * resolution)
canvas,
center.x * resolution,
center.y * resolution
)
let local = window.convertPointFromPageToNode(domNode, page.x, page.y) let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
return local return local
} }
@ -231,9 +221,7 @@ export default class FlipEffect {
canvas.height = 44 * 4 canvas.height = 44 * 4
svgImage.onload = e => { svgImage.onload = e => {
let displayObject = this.scatter.displayObject let displayObject = this.scatter.displayObject
canvas canvas.getContext('2d').drawImage(svgImage, 0, 0, canvas.width, canvas.height)
.getContext('2d')
.drawImage(svgImage, 0, 0, canvas.width, canvas.height)
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas)) let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
this.infoBtn = new PIXI.Sprite(texure) this.infoBtn = new PIXI.Sprite(texure)
this.infoBtn.anchor.set(0.5, 0.5) this.infoBtn.anchor.set(0.5, 0.5)

47
lib/pixi/flippable.js
View File

@ -93,12 +93,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// planes // planes
//-------------------- //--------------------
this.setPlanes( this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic)
this.opts.focus,
this.opts.near,
this.opts.far,
this.opts.orthographic
)
// flipped // flipped
//-------------------- //--------------------
@ -137,9 +132,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow // shadow
//-------------------- //--------------------
const shadow = new PIXI.projection.Sprite3d( const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
PIXI.Texture.fromImage('../../assets/images/shadow.png')
)
shadow.renderable = false shadow.renderable = false
shadow.anchor.set(0.5) shadow.anchor.set(0.5)
shadow.scale3d.set(0.98) shadow.scale3d.set(0.98)
@ -231,21 +224,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y, y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x, anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y, anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
width: this.opts.useBackTransforms width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
? toObject.width * 2 height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
: fromObject.width * 2, rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
height: this.opts.useBackTransforms skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
? toObject.height * 2 skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
: fromObject.height * 2,
rotation: this.opts.useBackTransforms
? toObject.rotation
: fromObject.rotation,
skewX: this.opts.useBackTransforms
? toObject.skew.x
: fromObject.skew.x,
skewY: this.opts.useBackTransforms
? toObject.skew.y
: fromObject.skew.y
} }
// set toObject end values // set toObject end values
@ -331,15 +314,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow // shadow
//-------------------- //--------------------
new TimelineMax() new TimelineMax().to(shadow, half, { alpha: 0.3, ease }).to(shadow, half, { alpha: 0.7, ease })
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
// blurfilter // blurfilter
//-------------------- //--------------------
new TimelineMax() new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
.to(blurFilter, half, { blur: 6, ease })
.to(blurFilter, half, { blur: 0.2, ease })
} }
/** /**
@ -353,8 +332,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const shadow = this.objects.shadow const shadow = this.objects.shadow
const inner = this.objects.inner const inner = this.objects.inner
inner.position3d.z = inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
-Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2
//this.objects.shadow.euler = this.objects.inner.euler //this.objects.shadow.euler = this.objects.inner.euler
shadow.euler.x = -inner.euler.x shadow.euler.x = -inner.euler.x
@ -421,10 +399,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
generateTexture(displayObject) { generateTexture(displayObject) {
// renderTexture // renderTexture
//-------------------- //--------------------
const renderTexture = PIXI.RenderTexture.create( const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
displayObject.width,
displayObject.height
)
// save position // save position
const transform = [ const transform = [

33
lib/pixi/labeledgraphics.js
View File

@ -77,15 +77,9 @@ export class Hypenate {
let first = true let first = true
let lastPart = '' let lastPart = ''
for (let part of parts) { for (let part of parts) {
let partMetrics = PIXI.TextMetrics.measureText( let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle)
part,
pixiStyle
)
if (x + partMetrics.width + space.width > width) { if (x + partMetrics.width + space.width > width) {
newWord += newWord += (first || lastPart.endsWith('-') ? '\n' : '-\n') + part
(first || lastPart.endsWith('-')
? '\n'
: '-\n') + part
x = partMetrics.width x = partMetrics.width
} else { } else {
newWord += part newWord += part
@ -136,12 +130,7 @@ class TextLabel extends PIXI.Text {
* @param {canvas} * @param {canvas}
* @memberof TextLabel * @memberof TextLabel
*/ */
constructor( constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) {
text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas) super(text, style, canvas)
this.normFontSize = this.style.fontSize this.normFontSize = this.style.fontSize
this.minZoom = minZoom this.minZoom = minZoom
@ -290,21 +279,11 @@ export class LabeledGraphics extends PIXI.Graphics {
const truncatedLines = lines.slice(0, maxLines) const truncatedLines = lines.slice(0, maxLines)
const lastLine = truncatedLines[truncatedLines.length - 1] const lastLine = truncatedLines[truncatedLines.length - 1]
const words = lastLine.split(' ') const words = lastLine.split(' ')
const wordMetrics = PIXI.TextMetrics.measureText( const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
`\u00A0\n...\n${words.join('\n')}`, const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
pixiStyle
)
const [
spaceLength,
dotsLength,
...wordLengths
] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce( const { text: newLastLine } = wordLengths.reduce(
(data, wordLength, i) => { (data, wordLength, i) => {
if ( if (data.length + wordLength + spaceLength >= wordWrapWidth) {
data.length + wordLength + spaceLength >=
wordWrapWidth
) {
return { ...data, length: wordWrapWidth } return { ...data, length: wordWrapWidth }
} }
return { return {

40
lib/pixi/list.js
View File

@ -1,4 +1,4 @@
/* globals */ /* globals ThrowPropsPlugin, Strong */
/* Imports */ /* Imports */
import Events from '../events.js' import Events from '../events.js'
@ -108,9 +108,7 @@ export default class List extends PIXI.Container {
if (this.opts.app) { if (this.opts.app) {
const app = this.opts.app const app = this.opts.app
app.view.addEventListener('mousewheel', event => { app.view.addEventListener('mousewheel', event => {
const bounds = this.mask const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
? this.mask.getBounds()
: this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) { if (bounds.contains(x, y)) {
@ -167,14 +165,10 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') { if (this.opts.orientation === 'vertical') {
switch (this.opts.align) { switch (this.opts.align) {
case 'center': case 'center':
this.__items.forEach( this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
it => (it.x = margin + this.width / 2 - it.width / 2)
)
break break
case 'right': case 'right':
this.__items.forEach( this.__items.forEach(it => (it.x = margin + this.width - it.width))
it => (it.x = margin + this.width - it.width)
)
break break
default: default:
this.__items.forEach(it => (it.x = margin)) this.__items.forEach(it => (it.x = margin))
@ -200,14 +194,10 @@ export default class List extends PIXI.Container {
this.__items.forEach(it => (it.y = margin)) this.__items.forEach(it => (it.y = margin))
break break
case 'bottom': case 'bottom':
this.__items.forEach( this.__items.forEach(it => (it.y = margin + this.height - it.height))
it => (it.y = margin + this.height - it.height)
)
break break
default: default:
this.__items.forEach( this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2))
it => (it.y = margin + this.height / 2 - it.height / 2)
)
break break
} }
@ -341,8 +331,7 @@ export default class List extends PIXI.Container {
{ {
throwProps, throwProps,
ease: Strong.easeOut, ease: Strong.easeOut,
onComplete: () => onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
ThrowPropsPlugin.untrack(this.container.position)
}, },
0.8, 0.8,
0.4 0.4
@ -363,20 +352,14 @@ export default class List extends PIXI.Container {
this.container.position.x -= event.deltaX this.container.position.x -= event.deltaX
if (this.container.position.x > 0) { if (this.container.position.x > 0) {
this.container.position.x = 0 this.container.position.x = 0
} else if ( } else if (this.container.position.x + this.innerWidth < this.opts.width) {
this.container.position.x + this.innerWidth <
this.opts.width
) {
this.container.position.x = this.opts.width - this.innerWidth this.container.position.x = this.opts.width - this.innerWidth
} }
} else { } else {
this.container.position.y -= event.deltaY this.container.position.y -= event.deltaY
if (this.container.position.y > 0) { if (this.container.position.y > 0) {
this.container.position.y = 0 this.container.position.y = 0
} else if ( } else if (this.container.position.y + this.innerHeight < this.opts.height) {
this.container.position.y + this.innerHeight <
this.opts.height
) {
this.container.position.y = this.opts.height - this.innerHeight this.container.position.y = this.opts.height - this.innerHeight
} }
} }
@ -388,10 +371,7 @@ export default class List extends PIXI.Container {
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture. * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/ */
capture(event) { capture(event) {
const originalEvent = const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
event.data && event.data.originalEvent
? event.data.originalEvent
: event
Events.capturedBy(originalEvent, this) Events.capturedBy(originalEvent, this)
} }
} }

6
lib/pixi/message.js
View File

@ -91,8 +91,7 @@ export default class Message extends InteractivePopup {
this.x = this.opts.app.size.width / 2 - this.width / 2 this.x = this.opts.app.size.width / 2 - this.width / 2
break break
case 'right': case 'right':
this.x = this.x = this.opts.app.size.width - this.opts.margin - this.width
this.opts.app.size.width - this.opts.margin - this.width
break break
} }
@ -105,8 +104,7 @@ export default class Message extends InteractivePopup {
this.y = this.opts.app.size.height / 2 - this.height / 2 this.y = this.opts.app.size.height / 2 - this.height / 2
break break
case 'bottom': case 'bottom':
this.y = this.y = this.opts.app.size.height - this.opts.margin - this.height
this.opts.app.size.height - this.opts.margin - this.height
break break
} }
} }

5
lib/pixi/modal.js
View File

@ -134,10 +134,7 @@ export default class Modal extends PIXI.Container {
// background // background
//----------------- //-----------------
this.background.clear() this.background.clear()
this.background.beginFill( this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
this.opts.backgroundFill,
this.opts.backgroundFillAlpha
)
this.background.drawRect(0, 0, width, height) this.background.drawRect(0, 0, width, height)
this.background.endFill() this.background.endFill()

13
lib/pixi/popover.js
View File

@ -36,12 +36,8 @@ export default class Popover extends PIXI.Graphics {
wordWrapWidth: width - this.padding * 2 wordWrapWidth: width - this.padding * 2
} }
this.titleTextStyle = new PIXI.TextStyle( this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))
Object.assign({}, style, titleStyle) this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle))
)
this.textTextStyle = new PIXI.TextStyle(
Object.assign({}, style, textStyle)
)
if (title || text) { if (title || text) {
this.setup() this.setup()
@ -64,10 +60,7 @@ export default class Popover extends PIXI.Graphics {
if (this.opts.text) { if (this.opts.text) {
this.textText = new PIXI.Text(this.opts.text, this.textTextStyle) this.textText = new PIXI.Text(this.opts.text, this.textTextStyle)
this.textText.position.set( this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding)
this.padding,
this.titleY + this.titleHeight + this.padding
)
this.addChild(this.textText) this.addChild(this.textText)
} }

36
lib/pixi/popup.js
View File

@ -73,10 +73,7 @@ export class InteractivePopup extends AbstractPopup {
// closeButton // closeButton
//----------------- //-----------------
if (this.opts.closeButton) { if (this.opts.closeButton) {
let closeButton = PIXI.Sprite.fromImage( let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
'../../assets/icons/close.png',
true
)
closeButton.width = this.headerStyle.fontSize closeButton.width = this.headerStyle.fontSize
closeButton.height = closeButton.width closeButton.height = closeButton.width
closeButton.tint = this.theme.color2 closeButton.tint = this.theme.color2
@ -100,10 +97,7 @@ export class InteractivePopup extends AbstractPopup {
//----------------- //-----------------
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
const wordWrapWidth = const wordWrapWidth =
this.opts.maxWidth - this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
2 * this.opts.padding -
this.smallPadding -
this._closeButton.width
if (this._header) { if (this._header) {
this.headerStyle.wordWrapWidth = wordWrapWidth this.headerStyle.wordWrapWidth = wordWrapWidth
} else if (this._content) { } else if (this._content) {
@ -116,18 +110,10 @@ export class InteractivePopup extends AbstractPopup {
//----------------- //-----------------
if (this.opts.button || this.opts.buttonGroup) { if (this.opts.button || this.opts.buttonGroup) {
if (this.opts.button) { if (this.opts.button) {
this._buttons = new Button( this._buttons = new Button(Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.button))
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.button
)
)
} else { } else {
this._buttons = new ButtonGroup( this._buttons = new ButtonGroup(
Object.assign( Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
{ textStyle: this.theme.textStyleSmall },
this.opts.buttonGroup
)
) )
} }
this.addChild(this._buttons) this.addChild(this._buttons)
@ -149,18 +135,15 @@ export class InteractivePopup extends AbstractPopup {
// closeButton // closeButton
//----------------- //-----------------
if (this.opts.closeButton) { if (this.opts.closeButton) {
this._closeButton.x = this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width
this.wantedWidth - this.smallPadding - this._closeButton.width
this._closeButton.y = this.smallPadding this._closeButton.y = this.smallPadding
} }
// buttons // buttons
//----------------- //-----------------
if (this._buttons) { if (this._buttons) {
this._buttons.x = this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
this.wantedWidth - this.opts.padding - this._buttons.width this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
this._buttons.y =
this.wantedHeight - this.opts.padding - this._buttons.height
} }
return this return this
@ -183,10 +166,7 @@ export class InteractivePopup extends AbstractPopup {
} }
if (this._buttons) { if (this._buttons) {
size.width = Math.max( size.width = Math.max(size.width, this._buttons.x + this._buttons.width)
size.width,
this._buttons.x + this._buttons.width
)
size.height += this.innerPadding + this._buttons.height size.height += this.innerPadding + this._buttons.height
} }

5
lib/pixi/popupmenu.js
View File

@ -74,10 +74,7 @@ export default class PopupMenu extends Popup {
let object = null let object = null
if (item.label) { if (item.label) {
object = new PIXI.Text( object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle)
item.label,
item.textStyle || this.opts.textStyle
)
} else { } else {
object = item.content object = item.content
} }

38
lib/pixi/progress.js
View File

@ -154,10 +154,7 @@ export default class Progress extends PIXI.Container {
//----------------- //-----------------
if (this.opts.background) { if (this.opts.background) {
this.background.clear() this.background.clear()
this.background.beginFill( this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
this.opts.backgroundFill,
this.opts.backgroundFillAlpha
)
this.background.drawRect(0, 0, width, height) this.background.drawRect(0, 0, width, height)
this.background.endFill() this.background.endFill()
} }
@ -201,20 +198,10 @@ export default class Progress extends PIXI.Container {
const wantedWidth = this.opts.width || width - 2 * this.opts.margin const wantedWidth = this.opts.width || width - 2 * this.opts.margin
const wantedHeight = this.opts.height const wantedHeight = this.opts.height
this.bar.lineStyle( this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.bar.beginFill(this.opts.fill, this.opts.fillAlpha) this.bar.beginFill(this.opts.fill, this.opts.fillAlpha)
if (this.radius > 1) { if (this.radius > 1) {
this.bar.drawRoundedRect( this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius)
0,
0,
wantedWidth,
wantedHeight,
this.radius
)
} else { } else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight) this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
} }
@ -238,24 +225,11 @@ export default class Progress extends PIXI.Container {
const barActiveWidth = (wantedWidth * this._progress) / 100 const barActiveWidth = (wantedWidth * this._progress) / 100
this.barActive.lineStyle( this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.opts.strokeActiveWidth, this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.barActive.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
if (barActiveWidth > 0) { if (barActiveWidth > 0) {
if (this.radius > 1) { if (this.radius > 1) {
this.barActive.drawRoundedRect( this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius)
0,
0,
barActiveWidth,
wantedHeight,
this.radius
)
} else { } else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight) this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
} }

44
lib/pixi/scatter.js
View File

@ -79,12 +79,8 @@ export class ScatterContainer extends PIXI.Graphics {
let y = 0 let y = 0
// @container: We need to call the constant values, as the container // @container: We need to call the constant values, as the container
// gets resized, when a child moves outside the original boundaries. // gets resized, when a child moves outside the original boundaries.
let w = this.container let w = this.container ? this.containerDimensions.x : this.backgroundWidth || this.app.width
? this.containerDimensions.x let h = this.container ? this.containerDimensions.y : this.backgroundHeight || this.app.height
: this.backgroundWidth || this.app.width
let h = this.container
? this.containerDimensions.y
: this.backgroundHeight || this.app.height
if (this.app.fullscreen && this.app.monkeyPatchMapping) { if (this.app.fullscreen && this.app.monkeyPatchMapping) {
let fixed = this.mapPositionToPoint({ x: w, y: 0 }) let fixed = this.mapPositionToPoint({ x: w, y: 0 })
@ -167,14 +163,8 @@ export class ScatterContainer extends PIXI.Graphics {
// if (hit) { // if (hit) {
// console.log("findHitScatter", displayObject) // console.log("findHitScatter", displayObject)
// } // }
if ( if (hit && this.hitScatter === null && typeof displayObject != undefined) {
hit && this.hitScatter = displayObject.scatter ? displayObject.scatter : null
this.hitScatter === null &&
typeof displayObject != undefined
) {
this.hitScatter = displayObject.scatter
? displayObject.scatter
: null
} }
} }
@ -184,10 +174,7 @@ export class ScatterContainer extends PIXI.Graphics {
let local = new PIXI.Point() let local = new PIXI.Point()
let interactionManager = this.renderer.plugins.interaction let interactionManager = this.renderer.plugins.interaction
interactionManager.mapPositionToPoint(local, point.x, point.y) interactionManager.mapPositionToPoint(local, point.x, point.y)
if ( if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) {
element instanceof DisplayObjectScatter &&
element.displayObject.parent != null
) {
return element.displayObject.parent.toLocal(local) return element.displayObject.parent.toLocal(local)
} }
return local return local
@ -204,12 +191,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction let interactionManager = this.renderer.plugins.interaction
let fakeEvent = this.fakeInteractionEvent(local) let fakeEvent = this.fakeInteractionEvent(local)
interactionManager.processInteractive( interactionManager.processInteractive(fakeEvent, this, this.findHitScatter.bind(this), true)
fakeEvent,
this,
this.findHitScatter.bind(this),
true
)
if (this.claimEvents) event.claimedByScatter = this.hitScatter if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter return this.hitScatter
} }
@ -223,8 +205,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction let interactionManager = this.renderer.plugins.interaction
let displayObject = interactionManager.hitTest(local, this) let displayObject = interactionManager.hitTest(local, this)
if (displayObject != null && displayObject.scatter != null) if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter
this.hitScatter = displayObject.scatter
if (this.claimEvents) event.claimedByScatter = this.hitScatter if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter return this.hitScatter
} }
@ -359,8 +340,7 @@ export class DisplayObjectScatter extends AbstractScatter {
get container() { get container() {
// return this.displayObject.parent // return this.displayObject.parent
let obj = this.displayObject let obj = this.displayObject
while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) obj = obj.parent
obj = obj.parent
return obj.parent return obj.parent
} }
@ -469,8 +449,7 @@ export class DisplayObjectScatter extends AbstractScatter {
mapPositionToContainerPoint(point) { mapPositionToContainerPoint(point) {
// UO: We need the coordinates related to this scatter in case // UO: We need the coordinates related to this scatter in case
// of nested scatters // of nested scatters
if (this.container != null) if (this.container != null) return this.container.mapPositionToPoint(point, this)
return this.container.mapPositionToPoint(point, this)
return point return point
} }
@ -483,10 +462,7 @@ export class DisplayObjectScatter extends AbstractScatter {
if (this.displayObject.parent instanceof ScatterContainer) { if (this.displayObject.parent instanceof ScatterContainer) {
let scatterContainer = this.displayObject.parent let scatterContainer = this.displayObject.parent
scatterContainer.bringToFront(this.displayObject) scatterContainer.bringToFront(this.displayObject)
} else if ( } else if (this.displayObject.parent != null && this.displayObject.parent.scatter) {
this.displayObject.parent != null &&
this.displayObject.parent.scatter
) {
this.displayObject.parent.scatter.toFront(this.displayObject) this.displayObject.parent.scatter.toFront(this.displayObject)
} }
} }

89
lib/pixi/scrollbox.js
View File

@ -238,10 +238,7 @@ export default class Scrollbox extends PIXI.Container {
* @readonly * @readonly
*/ */
get contentWidth() { get contentWidth() {
return ( return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
this.options.boxWidth -
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
)
} }
/** /**
@ -250,10 +247,7 @@ export default class Scrollbox extends PIXI.Container {
* @readonly * @readonly
*/ */
get contentHeight() { get contentHeight() {
return ( return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.options.boxHeight -
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
)
} }
/** /**
@ -330,19 +324,11 @@ export default class Scrollbox extends PIXI.Container {
this.scrollbar.clear() this.scrollbar.clear()
let options = {} let options = {}
options.left = 0 options.left = 0
options.right = options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
this.scrollWidth +
(this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.top = 0 options.top = 0
options.bottom = options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollHeight + const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width =
this.scrollWidth +
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollbarTop = (this.content.top / height) * this.boxHeight this.scrollbarTop = (this.content.top / height) * this.boxHeight
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
@ -359,14 +345,9 @@ export default class Scrollbox extends PIXI.Container {
: this.scrollbarWidth : this.scrollbarWidth
if (this.isScrollbarVertical) { if (this.isScrollbarVertical) {
this.scrollbar this.scrollbar
.beginFill( .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect( .drawRect(
this.boxWidth - this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
0, 0,
this.scrollbarSize, this.scrollbarSize,
this.boxHeight this.boxHeight
@ -375,15 +356,10 @@ export default class Scrollbox extends PIXI.Container {
} }
if (this.isScrollbarHorizontal) { if (this.isScrollbarHorizontal) {
this.scrollbar this.scrollbar
.beginFill( .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect( .drawRect(
0, 0,
this.boxHeight - this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxWidth, this.boxWidth,
this.scrollbarSize this.scrollbarSize
) )
@ -391,14 +367,9 @@ export default class Scrollbox extends PIXI.Container {
} }
if (this.isScrollbarVertical) { if (this.isScrollbarVertical) {
this.scrollbar this.scrollbar
.beginFill( .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect( .drawRect(
this.boxWidth - this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.scrollbarTop, this.scrollbarTop,
this.scrollbarSize, this.scrollbarSize,
this.scrollbarHeight this.scrollbarHeight
@ -407,15 +378,10 @@ export default class Scrollbox extends PIXI.Container {
} }
if (this.isScrollbarHorizontal) { if (this.isScrollbarHorizontal) {
this.scrollbar this.scrollbar
.beginFill( .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect( .drawRect(
this.scrollbarLeft, this.scrollbarLeft,
this.boxHeight - this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth, this.scrollbarWidth,
this.scrollbarSize this.scrollbarSize
) )
@ -489,10 +455,7 @@ export default class Scrollbox extends PIXI.Container {
const local = this.toLocal(e.data.global) const local = this.toLocal(e.data.global)
if (this.isScrollbarHorizontal) { if (this.isScrollbarHorizontal) {
if (local.y > this.boxHeight - this.scrollbarSize) { if (local.y > this.boxHeight - this.scrollbarSize) {
if ( if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) {
local.x >= this.scrollbarLeft &&
local.x <= this.scrollbarLeft + this.scrollbarWidth
) {
this.pointerDown = { type: 'horizontal', last: local } this.pointerDown = { type: 'horizontal', last: local }
} else { } else {
if (local.x > this.scrollbarLeft) { if (local.x > this.scrollbarLeft) {
@ -511,10 +474,7 @@ export default class Scrollbox extends PIXI.Container {
} }
if (this.isScrollbarVertical) { if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) { if (local.x > this.boxWidth - this.scrollbarSize) {
if ( if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) {
local.y >= this.scrollbarTop &&
local.y <= this.scrollbarTop + this.scrollbarWidth
) {
this.pointerDown = { type: 'vertical', last: local } this.pointerDown = { type: 'vertical', last: local }
} else { } else {
if (local.y > this.scrollbarTop) { if (local.y > this.scrollbarTop) {
@ -574,26 +534,15 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height) * @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/ */
resize(options) { resize(options) {
this.options.boxWidth = this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
typeof options.boxWidth !== 'undefined' this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
? options.boxWidth
: this.options.boxWidth
this.options.boxHeight =
typeof options.boxHeight !== 'undefined'
? options.boxHeight
: this.options.boxHeight
if (options.scrollWidth) { if (options.scrollWidth) {
this.scrollWidth = options.scrollWidth this.scrollWidth = options.scrollWidth
} }
if (options.scrollHeight) { if (options.scrollHeight) {
this.scrollHeight = options.scrollHeight this.scrollHeight = options.scrollHeight
} }
this.content.resize( this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
this.options.boxWidth,
this.options.boxHeight,
this.scrollWidth,
this.scrollHeight
)
this.update() this.update()
} }

56
lib/pixi/slider.js
View File

@ -176,12 +176,8 @@ export default class Slider extends PIXI.Container {
this.on('pointermove', e => { this.on('pointermove', e => {
if (this.control.dragging) { if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition( const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
this.control.parent this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
).x
this._value = this.pixelToValue(
moveX - this.control.delta - this.opts.controlRadius
)
let x = this.valueToPixel(this._value) + this.opts.controlRadius let x = this.valueToPixel(this._value) + this.opts.controlRadius
this.control.x = x this.control.x = x
@ -193,16 +189,8 @@ export default class Slider extends PIXI.Container {
if (container instanceof Element) { if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false) container.addEventListener('pointerup', e => this.onEnd(e), false)
container.addEventListener( container.addEventListener('pointercancel', e => this.onEnd(e), false)
'pointercancel', container.addEventListener('pointerleave', e => this.onEnd(e), false)
e => this.onEnd(e),
false
)
container.addEventListener(
'pointerleave',
e => this.onEnd(e),
false
)
container.addEventListener('pointerout', e => this.onEnd(e), false) container.addEventListener('pointerout', e => this.onEnd(e), false)
container.addEventListener('mouseup', e => this.onEnd(e), false) container.addEventListener('mouseup', e => this.onEnd(e), false)
container.addEventListener('mousecancel', e => this.onEnd(e), false) container.addEventListener('mousecancel', e => this.onEnd(e), false)
@ -263,9 +251,7 @@ export default class Slider extends PIXI.Container {
if (this.sliderObj.pointerdowned) { if (this.sliderObj.pointerdowned) {
this.sliderObj.pointerdowned = false this.sliderObj.pointerdowned = false
const position = e.data.getLocalPosition(this.control.parent) const position = e.data.getLocalPosition(this.control.parent)
this.value = this.pixelToValue( this.value = this.pixelToValue(position.x - this.opts.controlRadius)
position.x - this.opts.controlRadius
)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 }) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
} }
}) })
@ -325,11 +311,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj.clear() this.sliderObj.clear()
this.sliderObj.beginFill(0xffffff, 0) this.sliderObj.beginFill(0xffffff, 0)
this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2) this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2)
this.sliderObj.lineStyle( this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha) this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha)
this.sliderObj.moveTo(x, y) this.sliderObj.moveTo(x, y)
this.sliderObj.lineTo(x + w, y) this.sliderObj.lineTo(x + w, y)
@ -343,20 +325,10 @@ export default class Slider extends PIXI.Container {
// Draw control // Draw control
this.control.clear() this.control.clear()
this.control.lineStyle( this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.opts.controlStrokeWidth, this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.beginFill(
this.opts.controlFill,
this.opts.controlFillAlpha
)
this.control.drawCircle(0, 0, cr - 1) this.control.drawCircle(0, 0, cr - 1)
this.control.beginFill( this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.drawCircle(0, 0, cr / 6) this.control.drawCircle(0, 0, cr / 6)
this.control.endFill() this.control.endFill()
@ -394,10 +366,7 @@ export default class Slider extends PIXI.Container {
} else if (value > this.opts.max) { } else if (value > this.opts.max) {
value = this.opts.max value = this.opts.max
} }
return ( return (this.opts.width * (value - this.opts.min)) / (this.opts.max - this.opts.min)
(this.opts.width * (value - this.opts.min)) /
(this.opts.max - this.opts.min)
)
} }
/** /**
@ -413,10 +382,7 @@ export default class Slider extends PIXI.Container {
} else if (pixel > this.opts.width) { } else if (pixel > this.opts.width) {
pixel = this.opts.width pixel = this.opts.width
} }
return ( return this.opts.min + ((this.opts.max - this.opts.min) * pixel) / this.opts.width
this.opts.min +
((this.opts.max - this.opts.min) * pixel) / this.opts.width
)
} }
/** /**

31
lib/pixi/stylus.js
View File

@ -119,10 +119,7 @@ export default class Stylus extends PIXI.Graphics {
let identifier = event.data.identifier let identifier = event.data.identifier
if (typeof event.data.originalEvent.changedTouches !== 'undefined') { if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) { for (let touch of event.data.originalEvent.changedTouches) {
if ( if (touch.identifier === identifier && touch.touchType === 'stylus') {
touch.identifier === identifier &&
touch.touchType === 'stylus'
) {
this.tiltX = Angle.radian2degree(touch.azimuthAngle) this.tiltX = Angle.radian2degree(touch.azimuthAngle)
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle) this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
return true return true
@ -142,10 +139,7 @@ export default class Stylus extends PIXI.Graphics {
let identifier = event.data.identifier let identifier = event.data.identifier
if (typeof event.data.originalEvent.changedTouches !== 'undefined') { if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
for (let touch of event.data.originalEvent.changedTouches) { for (let touch of event.data.originalEvent.changedTouches) {
if ( if (touch.identifier === identifier && touch.pointerType === 'touch') {
touch.identifier === identifier &&
touch.pointerType === 'touch'
) {
return true return true
} }
} }
@ -182,8 +176,7 @@ export default class Stylus extends PIXI.Graphics {
this.tiltY += 5 this.tiltY += 5
break break
} }
if (this.debug) if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
}) })
this.on('pointerdown', e => { this.on('pointerdown', e => {
@ -197,15 +190,9 @@ export default class Stylus extends PIXI.Graphics {
}) })
this.on('pointermove', e => { this.on('pointermove', e => {
if ( if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
Events.isPointerDown(e.data.originalEvent) || if (this.debug) console.log('pointermove', e, this.eventInside(e))
this.isStylusPointer(e) || if (this.eventInside(e) && this.singlePointer()) this.moveStroke(this.toStroke(e))
this.isStylusTouch(e)
) {
if (this.debug)
console.log('pointermove', e, this.eventInside(e))
if (this.eventInside(e) && this.singlePointer())
this.moveStroke(this.toStroke(e))
} }
}) })
this.on('pointerup', e => { this.on('pointerup', e => {
@ -320,11 +307,7 @@ export default class Stylus extends PIXI.Graphics {
this.moveTo(start.x, start.y) this.moveTo(start.x, start.y)
for (let i = 1; i < stroke.length; i++) { for (let i = 1; i < stroke.length; i++) {
let info = stroke[i] let info = stroke[i]
this.lineStyle( this.lineStyle(this.tiltToLineWidth(info.tiltY), info.color, this.colorAlpha)
this.tiltToLineWidth(info.tiltY),
info.color,
this.colorAlpha
)
this.lineTo(info.x, info.y) this.lineTo(info.x, info.y)
} }
this.endFill() this.endFill()

71
lib/pixi/switch.js
View File

@ -152,10 +152,8 @@ export default class Switch extends PIXI.Container {
opts opts
) )
this.opts.controlRadius = this.opts.controlRadius = this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadius || this.opts.height / 2 this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation // Validation
//----------------- //-----------------
@ -317,32 +315,15 @@ export default class Switch extends PIXI.Container {
draw() { draw() {
this.switchObj.clear() this.switchObj.clear()
if (this.active) { if (this.active) {
this.switchObj.lineStyle( this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.opts.strokeActiveWidth, this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else { } else {
this.switchObj.lineStyle( this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha) this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
} }
this.switchObj.moveTo(this.radius, 0) this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0) this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo( this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo( this.switchObj.arcTo(
this.opts.width, this.opts.width,
@ -364,21 +345,11 @@ export default class Switch extends PIXI.Container {
this.opts.controlStrokeActive, this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha this.opts.controlStrokeActiveAlpha
) )
this.control.beginFill( this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
this.opts.controlFillActive,
this.opts.controlFillActiveAlpha
)
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1) this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
} else { } else {
this.control.lineStyle( this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.opts.controlStrokeWidth, this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.beginFill(
this.opts.controlFill,
this.opts.controlFillAlpha
)
this.control.drawCircle(0, 0, this.opts.controlRadius - 1) this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
} }
this.control.endFill() this.control.endFill()
@ -394,24 +365,11 @@ export default class Switch extends PIXI.Container {
*/ */
drawAnimated() { drawAnimated() {
this.switchObj.clear() this.switchObj.clear()
this.switchObj.lineStyle( this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
this.tempAnimated.strokeWidth, this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
this.tempAnimated.stroke,
this.tempAnimated.strokeAlpha
)
this.switchObj.beginFill(
this.tempAnimated.fill,
this.tempAnimated.fillAlpha
)
this.switchObj.moveTo(this.radius, 0) this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0) this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo( this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo( this.switchObj.arcTo(
this.opts.width, this.opts.width,
@ -431,10 +389,7 @@ export default class Switch extends PIXI.Container {
this.tempAnimated.controlStroke, this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha this.tempAnimated.controlStrokeAlpha
) )
this.control.beginFill( this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.tempAnimated.controlFill,
this.tempAnimated.controlFillAlpha
)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1) this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill() this.control.endFill()

24
lib/pixi/test.js
View File

@ -131,21 +131,9 @@ export class RecorderTools extends PIXI.Container {
setupToolbar() { setupToolbar() {
this.toolbar = new PIXI.Graphics() this.toolbar = new PIXI.Graphics()
this.record = new RecordCommand( this.record = new RecordCommand(this, 0xcc0000, new PIXI.Circle(0, 0, 16))
this, this.play = new PlayCommand(this, 0x0000cc, new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16))
0xcc0000, this.stop = new StopCommand(this, 0x0000cc, new PIXI.Rectangle(0, 0, 32, 32))
new PIXI.Circle(0, 0, 16)
)
this.play = new PlayCommand(
this,
0x0000cc,
new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16)
)
this.stop = new StopCommand(
this,
0x0000cc,
new PIXI.Rectangle(0, 0, 32, 32)
)
this.toolbar.addChild(this.record).position.set(44, 48) this.toolbar.addChild(this.record).position.set(44, 48)
this.toolbar.addChild(this.play).position.set(44 + 44, 16) this.toolbar.addChild(this.play).position.set(44 + 44, 16)
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32) this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32)
@ -183,11 +171,7 @@ export class RecorderTools extends PIXI.Container {
mapPositionToPoint(point) { mapPositionToPoint(point) {
let local = new PIXI.Point() let local = new PIXI.Point()
this.renderer.plugins.interaction.mapPositionToPoint( this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y)
local,
point.x,
point.y
)
return local return local
} }

3
lib/pixi/theme.js
View File

@ -80,8 +80,7 @@ export default class Theme {
* is used for large actived text. * is used for large actived text.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const colorPrimary = const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white

87
lib/pixi/timeline.js
View File

@ -89,24 +89,13 @@ export class Ticks {
return date.toLocaleDateString('de', format) return date.toLocaleDateString('de', format)
} }
draw( draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks = false) {
timeline,
range,
width,
height,
available,
format,
nextFormat,
level,
extraTicks = false
) {
let first = null let first = null
let last = null let last = null
let keyedFormat = format ? format[this.formatKey] : null let keyedFormat = format ? format[this.formatKey] : null
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null
let redundant = nextFormat ? this.formatKey in nextFormat : false let redundant = nextFormat ? this.formatKey in nextFormat : false
let fullyRedundant = let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
keyedFormat != null && keyedFormat == keyedNextFormat
let y = timeline.getY() let y = timeline.getY()
for (let { start, end } of this.iterRanges(range)) { for (let { start, end } of this.iterRanges(range)) {
let x = timeline.toX(start) let x = timeline.toX(start)
@ -131,12 +120,7 @@ export class Ticks {
} }
if (!fullyRedundant) { if (!fullyRedundant) {
timeline.ensureLabel( timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small)
key,
text,
{ x: xx, y: yy, align },
FontInfo.small
)
} }
if (extraTicks) timeline.drawTick(x, -level) if (extraTicks) timeline.drawTick(x, -level)
} }
@ -286,11 +270,7 @@ export class DayTicks extends Ticks {
} }
iterStart(start) { iterStart(start) {
return Dates.create( return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
start.getFullYear(),
start.getMonth(),
start.getDate()
)
} }
next(date) { next(date) {
@ -331,22 +311,11 @@ export class HourTicks extends Ticks {
} }
dateKey(date) { dateKey(date) {
return ( return this.key + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours()
this.key +
date.getFullYear() +
date.getMonth() +
date.getDate() +
date.getHours()
)
} }
iterStart(start) { iterStart(start) {
return Dates.create( return Dates.create(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours())
start.getFullYear(),
start.getMonth(),
start.getDate(),
start.getHours()
)
} }
next(date) { next(date) {
@ -388,14 +357,7 @@ export class MinuteTicks extends Ticks {
} }
dateKey(date) { dateKey(date) {
return ( return this.key + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes()
this.key +
date.getFullYear() +
date.getMonth() +
date.getDate() +
date.getHours() +
date.getMinutes()
)
} }
iterStart(start) { iterStart(start) {
@ -450,10 +412,7 @@ export class TimeTicks {
let available = amount * size let available = amount * size
availables.set(ticks, available) availables.set(ticks, available)
if (available < ticks.minWidth) break if (available < ticks.minWidth) break
formats.set( formats.set(ticks, available < ticks.minLabelWidth ? null : ticks.format(available))
ticks,
available < ticks.minLabelWidth ? null : ticks.format(available)
)
nextFormats.set(previous, formats.get(ticks)) nextFormats.set(previous, formats.get(ticks))
previous = ticks previous = ticks
visible.push(ticks) visible.push(ticks)
@ -522,16 +481,7 @@ export class ColorRanges {
} }
export default class Timeline extends BitmapLabeledGraphics { export default class Timeline extends BitmapLabeledGraphics {
constructor( constructor(width, height, { ticks = null, baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
width,
height,
{
ticks = null,
baseLine = 0.5,
showRange = true,
throwDamping = 0.95
} = {}
) {
super() super()
this.wantedWidth = width this.wantedWidth = width
this.wantedHeight = height this.wantedHeight = height
@ -548,12 +498,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.deltas = [] this.deltas = []
this.labelDates = [] this.labelDates = []
this.colorRanges = [] this.colorRanges = []
this.rangeColors = new Cycle( this.rangeColors = new Cycle(Colors.eminence, Colors.steelblue, Colors.ochre, Colors.turquoise)
Colors.eminence,
Colors.steelblue,
Colors.ochre,
Colors.turquoise
)
this.callbacks = [] this.callbacks = []
this.onTapCallbacks = [] this.onTapCallbacks = []
this.onDoubleTapCallbacks = [] this.onDoubleTapCallbacks = []
@ -565,14 +510,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false this.autoScroll = false
this.direction = -1 this.direction = -1
this.throwDamping = throwDamping this.throwDamping = throwDamping
this.timeticks = this.timeticks = ticks || new TimeTicks(new DecadeTicks(), new YearTicks(), new MonthTicks(), new DayTicks())
ticks ||
new TimeTicks(
new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks()
)
this.labelPrefix = '__' this.labelPrefix = '__'
} }
@ -729,8 +667,7 @@ export default class Timeline extends BitmapLabeledGraphics {
prepareLabels() { prepareLabels() {
for (let key of this.labels.keys()) { for (let key of this.labels.keys()) {
if (!key.startsWith(this.labelPrefix)) if (!key.startsWith(this.labelPrefix)) this.labels.get(key).visible = false
this.labels.get(key).visible = false
} }
} }

50
lib/popup.js
View File

@ -147,8 +147,7 @@ export default class Popup extends Poppable {
img.ondrag = e => { img.ondrag = e => {
e.preventDefault() e.preventDefault()
let target = let target = this.element.querySelector('iframe') || this.element
this.element.querySelector('iframe') || this.element
let delta = { let delta = {
x: e.clientX - this.currentPos.x, x: e.clientX - this.currentPos.x,
y: e.clientY - this.currentPos.y y: e.clientY - this.currentPos.y
@ -250,10 +249,7 @@ export default class Popup extends Poppable {
if (images.length > 0) { if (images.length > 0) {
let count = 0 let count = 0
for (let image of images) { for (let image of images) {
if ( if (!image.complete && !image.src.startsWith('data:')) {
!image.complete &&
!image.src.startsWith('data:')
) {
total += 1 total += 1
console.log('image not complete', image.src) console.log('image not complete', image.src)
image.onload = e => { image.onload = e => {
@ -365,8 +361,7 @@ export default class Popup extends Poppable {
target.ondragstart = e => { target.ondragstart = e => {
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
var img = document.createElement('img') var img = document.createElement('img')
img.src = img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
e.dataTransfer.setDragImage(img, 0, 0) e.dataTransfer.setDragImage(img, 0, 0)
} }
target.ondrag = e => { target.ondrag = e => {
@ -416,8 +411,7 @@ export default class Popup extends Poppable {
layout() {} layout() {}
remove() { remove() {
if (this.parent.contains(this.element)) if (this.parent.contains(this.element)) this.parent.removeChild(this.element)
this.parent.removeChild(this.element)
this.unregister(this.context) this.unregister(this.context)
} }
@ -572,36 +566,30 @@ export default class Popup extends Poppable {
//if targetBoundingBox is set, popup is placed next to the rectangle //if targetBoundingBox is set, popup is placed next to the rectangle
if (this.targetBoundingBox) { if (this.targetBoundingBox) {
let bbTop = this.targetBoundingBox.y let bbTop = this.targetBoundingBox.y
let bbBottom = let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height
this.targetBoundingBox.y + this.targetBoundingBox.height
let bbLeft = this.targetBoundingBox.x let bbLeft = this.targetBoundingBox.x
let bbRight = let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width
this.targetBoundingBox.x + this.targetBoundingBox.width
//console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight) //console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
switch (notchPosition) { switch (notchPosition) {
case 'bottomLeft': case 'bottomLeft':
case 'bottomRight': case 'bottomRight':
case 'bottomCenter': case 'bottomCenter':
y = bbTop y = bbTop
if (!this.useEventPosWithBoundingBox) if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
x = (bbLeft + bbRight) / 2
break break
case 'topLeft': case 'topLeft':
case 'topRight': case 'topRight':
case 'topCenter': case 'topCenter':
y = bbBottom y = bbBottom
if (!this.useEventPosWithBoundingBox) if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
x = (bbLeft + bbRight) / 2
break break
case 'centerRight': case 'centerRight':
x = bbLeft x = bbLeft
if (!this.useEventPosWithBoundingBox) if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
y = (bbTop + bbBottom) / 2
break break
case 'centerLeft': case 'centerLeft':
x = bbRight x = bbRight
if (!this.useEventPosWithBoundingBox) if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
y = (bbTop + bbBottom) / 2
break break
default: default:
break break
@ -747,8 +735,7 @@ export default class Popup extends Poppable {
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)', boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
bottom: -this.notchSize + 'px', bottom: -this.notchSize + 'px',
position: 'absolute', position: 'absolute',
borderTop: borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent', borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent',
borderBottom: 0 borderBottom: 0
@ -776,8 +763,7 @@ export default class Popup extends Poppable {
left, left,
top: -this.notchSize + 'px', top: -this.notchSize + 'px',
position: 'absolute', position: 'absolute',
borderBottom: borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent', borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent', borderLeft: this.notchSize + 'px solid transparent',
borderTop: 0 borderTop: 0
@ -814,16 +800,13 @@ export default class Popup extends Poppable {
let top = size.height / 2 - this.notchSize let top = size.height / 2 - this.notchSize
if (notchPosition.endsWith('Left')) { if (notchPosition.endsWith('Left')) {
left = -this.notchSize * 2 + 'px' left = -this.notchSize * 2 + 'px'
borderRight = borderRight = this.notchSize + 'px solid ' + this.backgroundColor
this.notchSize + 'px solid ' + this.backgroundColor this.element.style.boxShadow = '15px 10px 15px rgba(0, 0, 0, 0.3)'
this.element.style.boxShadow =
'15px 10px 15px rgba(0, 0, 0, 0.3)'
} }
if (notchPosition.endsWith('Right')) { if (notchPosition.endsWith('Right')) {
left = size.width + 'px' left = size.width + 'px'
borderLeft = this.notchSize + 'px solid ' + this.backgroundColor borderLeft = this.notchSize + 'px solid ' + this.backgroundColor
this.element.style.boxShadow = this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)'
'15px 5px 15px rgba(0, 0, 0, 0.3)'
} }
top = Math.round(top) + 'px' top = Math.round(top) + 'px'
@ -880,8 +863,7 @@ export default class Popup extends Poppable {
onMove = null onMove = null
} = {} } = {}
) { ) {
let notchPosition = let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
let popup = new Popup({ let popup = new Popup({
parent, parent,
context, context,

36
lib/popupmenu.js
View File

@ -195,8 +195,7 @@ export default class PopupMenu extends Popup {
return return
} }
console.log('open', point) console.log('open', point)
let notchPosition = let notchPosition = point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
let popup = new PopupMenu({ let popup = new PopupMenu({
parent, parent,
fontSize, fontSize,
@ -219,21 +218,9 @@ export default class PopupMenu extends Popup {
if (this.eventOutside(e)) this.closePopup(context) if (this.eventOutside(e)) this.closePopup(context)
} }
if (autoClose) { if (autoClose) {
context.addEventListener( context.addEventListener('mousedown', popup.closeEventListener, true)
'mousedown', context.addEventListener('touchstart', popup.closeEventListener, true)
popup.closeEventListener, context.addEventListener('pointerdown', popup.closeEventListener, true)
true
)
context.addEventListener(
'touchstart',
popup.closeEventListener,
true
)
context.addEventListener(
'pointerdown',
popup.closeEventListener,
true
)
} }
} }
@ -248,18 +235,9 @@ export default class PopupMenu extends Popup {
let registered = Poppable.get(context) let registered = Poppable.get(context)
if (registered) { if (registered) {
registered.close() registered.close()
context.removeEventListener( context.removeEventListener('mousedown', registered.closeEventListener)
'mousedown', context.removeEventListener('touchstart', registered.closeEventListener)
registered.closeEventListener context.removeEventListener('pointerdown', registered.closeEventListener)
)
context.removeEventListener(
'touchstart',
registered.closeEventListener
)
context.removeEventListener(
'pointerdown',
registered.closeEventListener
)
} }
} }
} }

101
lib/scatter.js
View File

@ -45,14 +45,7 @@ const END = 'onEnd'
export class ScatterEvent extends BaseEvent { export class ScatterEvent extends BaseEvent {
constructor( constructor(
target, target,
{ { translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
translate = { x: 0, y: 0 },
scale = null,
rotate = 0,
about = null,
fast = false,
type = null
} = {}
) { ) {
super('scatterTransformed', { target: target }) super('scatterTransformed', { target: target })
this.translate = translate this.translate = translate
@ -65,13 +58,7 @@ export class ScatterEvent extends BaseEvent {
toString() { toString() {
return ( return (
"Event('scatterTransformed', scale: " + "Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')'
this.scale +
' about: ' +
this.about.x +
', ' +
this.about.y +
')'
) )
} }
} }
@ -91,13 +78,7 @@ export class ResizeEvent extends BaseEvent {
} }
toString() { toString() {
return ( return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')'
'Event(scatterResized width: ' +
this.width +
'height: ' +
this.height +
')'
)
} }
} }
@ -376,7 +357,7 @@ export class AbstractScatter extends Throwable {
/** /**
Removes self from container when it's closed. Removes self from container when it's closed.
*/ */
if(this.container){ if (this.container) {
this.container.remove(this) this.container.remove(this)
} }
} }
@ -512,10 +493,7 @@ export class AbstractScatter extends Throwable {
_checkAutoClose() { _checkAutoClose() {
if (this.scaleAutoClose) if (this.scaleAutoClose)
if ( if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.scale <
this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
) {
this.zoom(this.minScale, { this.zoom(this.minScale, {
animate: 0.2, animate: 0.2,
onComplete: this.close.bind(this) onComplete: this.close.bind(this)
@ -570,17 +548,7 @@ export class AbstractScatter extends Throwable {
this.move(delta, { animate: animate }) this.move(delta, { animate: animate })
} }
zoom( zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) {
scale,
{
animate = 0,
about = null,
delay = 0,
x = null,
y = null,
onComplete = null
} = {}
) {
let anchor = about || this.center let anchor = about || this.center
if (scale != this.scale) { if (scale != this.scale) {
if (animate > 0) { if (animate > 0) {
@ -631,15 +599,9 @@ export class AbstractScatter extends Throwable {
let origin = this.rotationOrigin let origin = this.rotationOrigin
let beta = Points.angle(origin, anchor) let beta = Points.angle(origin, anchor)
let distance = Points.distance(origin, anchor) let distance = Points.distance(origin, anchor)
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale( let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom)
zoom
)
let newOrigin = Points.arc( let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
anchor,
beta + rotate,
distance * thresholdedZoom
)
let extra = Points.subtract(newOrigin, origin) let extra = Points.subtract(newOrigin, origin)
let offset = Points.subtract(anchor, origin) let offset = Points.subtract(anchor, origin)
this._move(offset) this._move(offset)
@ -702,10 +664,8 @@ export class AbstractScatter extends Throwable {
} }
calculateScaleTransparency() { calculateScaleTransparency() {
let transparency = let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold
(this.scale - this.minScale) / this.scaleCloseThreshold transparency = transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
transparency =
transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
return transparency return transparency
} }
@ -763,8 +723,7 @@ export class AbstractScatter extends Throwable {
if (this.scaleAutoClose) { if (this.scaleAutoClose) {
if (this.scale <= this.minScale + this.scaleCloseThreshold) { if (this.scale <= this.minScale + this.scaleCloseThreshold) {
if (this.scaleAutoCloseTimeout) if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout)
clearTimeout(this.scaleAutoCloseTimeout)
this.scaleAutoCloseTimeout = setTimeout(() => { this.scaleAutoCloseTimeout = setTimeout(() => {
this._checkAutoClose() this._checkAutoClose()
}, 600) }, 600)
@ -927,13 +886,7 @@ export class DOMScatterContainer {
*/ */
constructor( constructor(
element, element,
{ { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {}
stopEvents = 'auto',
claimEvents = true,
useCapture = true,
touchAction = 'none',
debugCanvas = null
} = {}
) { ) {
this.onCapture = null this.onCapture = null
this.element = element this.element = element
@ -944,11 +897,7 @@ export class DOMScatterContainer {
movement of scatter objects, the touchmove event has to be bound again. movement of scatter objects, the touchmove event has to be bound again.
*/ */
if (Capabilities.isSafari) { if (Capabilities.isSafari) {
document.addEventListener( document.addEventListener('touchmove', event => this.preventPinch(event), false)
'touchmove',
event => this.preventPinch(event),
false
)
stopEvents = false stopEvents = false
} else { } else {
stopEvents = true stopEvents = true
@ -984,14 +933,7 @@ export class DOMScatterContainer {
for (let [key, point] of current.entries()) { for (let [key, point] of current.entries()) {
let local = point let local = point
context.beginPath() context.beginPath()
context.arc( context.arc(local.x * resolution, local.y * resolution, radius, 0, 2 * Math.PI, false)
local.x * resolution,
local.y * resolution,
radius,
0,
2 * Math.PI,
false
)
context.fill() context.fill()
context.stroke() context.stroke()
} }
@ -1007,18 +949,16 @@ export class DOMScatterContainer {
} }
} }
/** /**
* Removes an element from the scatter. * Removes an element from the scatter.
* *
* @param {Scatter} scatter - Element to remove. * @param {Scatter} scatter - Element to remove.
* @memberof DOMScatterContainer * @memberof DOMScatterContainer
*/ */
remove(scatter){ remove(scatter) {
this.scatter.delete(scatter.element) this.scatter.delete(scatter.element)
} }
/** /**
* Adds an element to the ScatterContainer. * Adds an element to the ScatterContainer.
* *
@ -1065,10 +1005,7 @@ export class DOMScatterContainer {
***/ ***/
let found = document.elementFromPoint(global.x, global.y) let found = document.elementFromPoint(global.x, global.y)
for (let target of this.scatter.values()) { for (let target of this.scatter.values()) {
if ( if (target.interactive && this.isDescendant(target.element, found)) {
target.interactive &&
this.isDescendant(target.element, found)
) {
if (this.stopEvents) Events.stop(event) if (this.stopEvents) Events.stop(event)
if (this.claimEvents) event.claimedByScatter = target if (this.claimEvents) event.claimedByScatter = target
return target return target
@ -1499,10 +1436,8 @@ export class DOMScatter extends AbstractScatter {
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected)) let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
if ( if (
(this.element.offsetWidth + resizeW) / this.scale > (this.element.offsetWidth + resizeW) / this.scale > (this.width * 0.5) / this.scale &&
(this.width * 0.5) / this.scale && (this.element.offsetHeight + resizeH) / this.scale > (this.height * 0.3) / this.scale
(this.element.offsetHeight + resizeH) / this.scale >
(this.height * 0.3) / this.scale
) )
TweenLite.to(this.element, 0, { TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale, width: this.element.offsetWidth + resizeW / this.scale,

145
lib/uitest.js
View File

@ -194,9 +194,7 @@ export default class UITest {
if (opts.eventType) { if (opts.eventType) {
opts.eventTypes = opts.eventType opts.eventTypes = opts.eventType
} }
opts.eventTypes = Array.isArray(opts.eventTypes) opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes]
? opts.eventTypes
: [opts.eventTypes]
// timeline // timeline
//-------------------- //--------------------
@ -234,14 +232,8 @@ export default class UITest {
if (opts.eventTypes[0]) { if (opts.eventTypes[0]) {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const eventStart = Event.create( const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', eventStart)
coords,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', eventStart)
elem.dispatchEvent(eventStart) elem.dispatchEvent(eventStart)
// onStart // onStart
@ -253,14 +245,8 @@ export default class UITest {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const eventComplete = Event.create( const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', eventComplete)
coords,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', eventComplete)
elem.dispatchEvent(eventComplete) elem.dispatchEvent(eventComplete)
// onComplete // onComplete
@ -355,14 +341,8 @@ export default class UITest {
onStart: () => { onStart: () => {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const event = Event.create( const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', event)
from,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event) elem.dispatchEvent(event)
// onStart // onStart
@ -374,14 +354,8 @@ export default class UITest {
onUpdate: () => { onUpdate: () => {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const event = Event.create( const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', event)
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event) elem.dispatchEvent(event)
// onUpdate // onUpdate
@ -393,14 +367,8 @@ export default class UITest {
onComplete: () => { onComplete: () => {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const event = Event.create( const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', event)
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event) elem.dispatchEvent(event)
// onComplete // onComplete
@ -551,66 +519,39 @@ export default class UITest {
onStart: () => { onStart: () => {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const event = Event.create( const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', event)
from,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event) elem.dispatchEvent(event)
// onStart // onStart
//-------------------- //--------------------
if ( if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
opts.onStart &&
(opts.doubleCallbacks || key === 0)
) {
opts.onStart.call(this, event) opts.onStart.call(this, event)
} }
}, },
onUpdate: () => { onUpdate: () => {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const event = Event.create( const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', event)
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event) elem.dispatchEvent(event)
// onUpdate // onUpdate
//-------------------- //--------------------
if ( if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
opts.onUpdate &&
(opts.doubleCallbacks || key === 0)
) {
opts.onUpdate.call(this, event) opts.onUpdate.call(this, event)
} }
}, },
onComplete: () => { onComplete: () => {
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const event = Event.create( const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
elem, if (this.opts.debug) console.log('dispatch event', event)
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event) elem.dispatchEvent(event)
// onComplete // onComplete
//-------------------- //--------------------
if ( if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
opts.onComplete &&
(opts.doubleCallbacks || key === 0)
) {
opts.onComplete.call(this, event) opts.onComplete.call(this, event)
} }
} }
@ -728,9 +669,7 @@ export default class UITest {
'No execution time was specified for this action, and a default interval was not set in the class constructor!' 'No execution time was specified for this action, and a default interval was not set in the class constructor!'
) )
} }
timelinePosition = timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1)
Math.max(...this._timelinePositions) +
(this.opts.defaultInterval || 1)
} }
if (opts === null) { if (opts === null) {
@ -805,12 +744,8 @@ class Util {
* @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method. * @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method.
*/ */
static extractElement(context, element) { static extractElement(context, element) {
const cont = Util.isFrame(context) const cont = Util.isFrame(context) ? context.contentDocument : context.document
? context.contentDocument const elem = Util.isString(element) ? cont.querySelector(element) : element
: context.document
const elem = Util.isString(element)
? cont.querySelector(element)
: element
return elem return elem
} }
@ -866,9 +801,7 @@ class Util {
type: 'thru' type: 'thru'
} }
} else { } else {
opts.bezier.values = opts.bezier.values.map(it => opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
Util.extractPosition(it)
)
bezier = opts.bezier bezier = opts.bezier
} }
@ -1004,16 +937,9 @@ class Event {
* @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events * @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events
* @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties. * @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties.
*/ */
static create( static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
target,
position = { x: 0, y: 0 },
type = 'pointerup',
opts = {}
) {
const rect = const rect =
typeof target.getBoundingClientRect === 'function' typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }
? target.getBoundingClientRect()
: { x: 0, y: 0 }
// EventInit // EventInit
const eventOpts = { const eventOpts = {
@ -1072,25 +998,12 @@ class Event {
if (type.startsWith('pointer')) { if (type.startsWith('pointer')) {
return new PointerEvent( return new PointerEvent(
type, type,
Object.assign( Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)
{},
eventOpts,
uiEventOpts,
mouseEventOpts,
pointerEventOpts,
opts
)
) )
} else if (type.startsWith('touch')) { } else if (type.startsWith('touch')) {
return new TouchEvent( return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
type,
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
)
} else { } else {
return new MouseEvent( return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
type,
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
)
} }
} }
} }

65
lib/utils.js
View File

@ -1,4 +1,4 @@
/* globals WebKitPoint */ /* globals */
/** Tests whether an object is empty /** Tests whether an object is empty
* @param {Object} obj - the object to be tested * @param {Object} obj - the object to be tested
@ -60,11 +60,9 @@ export function sample(population, k) {
set and it doesn't suffer from frequent reselections. set and it doesn't suffer from frequent reselections.
*/ */
if (!Array.isArray(population)) if (!Array.isArray(population)) throw new TypeError('Population must be an array.')
throw new TypeError('Population must be an array.')
let n = population.length let n = population.length
if (k < 0 || k > n) if (k < 0 || k > n) throw new RangeError('Sample larger than population or is negative')
throw new RangeError('Sample larger than population or is negative')
let result = new Array(k) let result = new Array(k)
let setsize = 21 // size of a small set minus size of an empty list let setsize = 21 // size of a small set minus size of an empty list
@ -143,9 +141,7 @@ export class Dates {
} }
static startYearRange(date) { static startYearRange(date) {
return new Date( return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999))
Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
)
} }
static endYearRange(date) { static endYearRange(date) {
@ -165,11 +161,7 @@ export class Dates {
} }
static nextDay(date) { static nextDay(date) {
return this.create( return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1)
date.getFullYear(),
date.getMonth(),
date.getDate() + 1
)
} }
static nextHour(date) { static nextHour(date) {
@ -672,15 +664,9 @@ export class Polygon {
*/ */
draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) { draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
context.beginPath() context.beginPath()
context.moveTo( context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y)
this.points[0].x + this.center.x,
this.points[0].y + this.center.y
)
for (let i = 1; i < this.points.length; i++) { for (let i = 1; i < this.points.length; i++) {
context.lineTo( context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y)
this.points[i].x + this.center.x,
this.points[i].y + this.center.y
)
} }
context.closePath() context.closePath()
context.lineWidth = lineWidth context.lineWidth = lineWidth
@ -737,10 +723,7 @@ export class Polygon {
for (i = 0, j = nvert - 1; i < nvert; j = i++) { for (i = 0, j = nvert - 1; i < nvert; j = i++) {
if ( if (
verty[i] > testy != verty[j] > testy && verty[i] > testy != verty[j] > testy &&
testx < testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i]
((vertx[j] - vertx[i]) * (testy - verty[i])) /
(verty[j] - verty[i]) +
vertx[i]
) )
c = !c c = !c
} }
@ -774,12 +757,8 @@ export class Polygon {
for (side = 0; side < this.getNumberOfSides(); side++) { for (side = 0; side < this.getNumberOfSides(); side++) {
/* get the axis that we will project onto */ /* get the axis that we will project onto */
if (side == 0) { if (side == 0) {
axis.x = axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y
this.points[this.getNumberOfSides() - 1].y - axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x
this.points[0].y
axis.y =
this.points[0].x -
this.points[this.getNumberOfSides() - 1].x
} else { } else {
axis.x = this.points[side - 1].y - this.points[side].y axis.x = this.points[side - 1].y - this.points[side].y
axis.y = this.points[side].x - this.points[side - 1].x axis.y = this.points[side].x - this.points[side - 1].x
@ -803,8 +782,7 @@ export class Polygon {
maxA += tmp maxA += tmp
/* project polygon B onto axis to determine the min/max */ /* project polygon B onto axis to determine the min/max */
minB = maxB = minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y
other.points[0].x * axis.x + other.points[0].y * axis.y
for (i = 1; i < other.getNumberOfSides(); i++) { for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
if (tmp > maxB) maxB = tmp if (tmp > maxB) maxB = tmp
@ -831,12 +809,8 @@ export class Polygon {
for (side = 0; side < other.getNumberOfSides(); side++) { for (side = 0; side < other.getNumberOfSides(); side++) {
/* get the axis that we will project onto */ /* get the axis that we will project onto */
if (side == 0) { if (side == 0) {
axis.x = axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y
other.points[other.getNumberOfSides() - 1].y - axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x
other.points[0].y
axis.y =
other.points[0].x -
other.points[other.getNumberOfSides() - 1].x
} else { } else {
axis.x = other.points[side - 1].y - other.points[side].y axis.x = other.points[side - 1].y - other.points[side].y
axis.y = other.points[side].x - other.points[side - 1].x axis.y = other.points[side].x - other.points[side - 1].x
@ -860,8 +834,7 @@ export class Polygon {
maxA += tmp maxA += tmp
/* project polygon B onto axis to determine the min/max */ /* project polygon B onto axis to determine the min/max */
minB = maxB = minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y
other.points[0].x * axis.x + other.points[0].y * axis.y
for (i = 1; i < other.getNumberOfSides(); i++) { for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
if (tmp > maxB) maxB = tmp if (tmp > maxB) maxB = tmp
@ -918,12 +891,7 @@ export class Rect {
* @memberof Rect * @memberof Rect
*/ */
static contains(rect, point) { static contains(rect, point) {
return ( return point.x > rect.left && point.x < rect.x + rect.right && point.y > rect.top && point.y < rect.bottom
point.x > rect.left &&
point.x < rect.x + rect.right &&
point.y > rect.top &&
point.y < rect.bottom
)
} }
/** /**
@ -1003,8 +971,7 @@ export class LowPassFilter {
* @access private * @access private
*/ */
__push(value) { __push(value) {
let removed = let removed = this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0
this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0
this.buffer.push(value) this.buffer.push(value)
return removed return removed

90
package-lock.json generated
View File

@ -1979,9 +1979,9 @@
} }
}, },
"eslint": { "eslint": {
"version": "6.0.1", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.0.1.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.1.0.tgz",
"integrity": "sha512-DyQRaMmORQ+JsWShYsSg4OPTjY56u1nCjAmICrE8vLWqyLKxhFXOthwMj1SA8xwfrv0CofLNVnqbfyhwCkaO0w==", "integrity": "sha512-QhrbdRD7ofuV09IuE2ySWBz0FyXCq0rriLTZXZqaWSI79CVtHVRdkFuFTViiqzZhkCgfOh9USpriuGN2gIpZDQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/code-frame": "^7.0.0", "@babel/code-frame": "^7.0.0",
@ -1990,7 +1990,7 @@
"cross-spawn": "^6.0.5", "cross-spawn": "^6.0.5",
"debug": "^4.0.1", "debug": "^4.0.1",
"doctrine": "^3.0.0", "doctrine": "^3.0.0",
"eslint-scope": "^4.0.3", "eslint-scope": "^5.0.0",
"eslint-utils": "^1.3.1", "eslint-utils": "^1.3.1",
"eslint-visitor-keys": "^1.0.0", "eslint-visitor-keys": "^1.0.0",
"espree": "^6.0.0", "espree": "^6.0.0",
@ -1998,34 +1998,35 @@
"esutils": "^2.0.2", "esutils": "^2.0.2",
"file-entry-cache": "^5.0.1", "file-entry-cache": "^5.0.1",
"functional-red-black-tree": "^1.0.1", "functional-red-black-tree": "^1.0.1",
"glob-parent": "^3.1.0", "glob-parent": "^5.0.0",
"globals": "^11.7.0", "globals": "^11.7.0",
"ignore": "^4.0.6", "ignore": "^4.0.6",
"import-fresh": "^3.0.0", "import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4", "imurmurhash": "^0.1.4",
"inquirer": "^6.2.2", "inquirer": "^6.4.1",
"is-glob": "^4.0.0", "is-glob": "^4.0.0",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
"json-stable-stringify-without-jsonify": "^1.0.1", "json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.3.0", "levn": "^0.3.0",
"lodash": "^4.17.11", "lodash": "^4.17.14",
"minimatch": "^3.0.4", "minimatch": "^3.0.4",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"natural-compare": "^1.4.0", "natural-compare": "^1.4.0",
"optionator": "^0.8.2", "optionator": "^0.8.2",
"progress": "^2.0.0", "progress": "^2.0.0",
"regexpp": "^2.0.1", "regexpp": "^2.0.1",
"semver": "^5.5.1", "semver": "^6.1.2",
"strip-ansi": "^4.0.0", "strip-ansi": "^5.2.0",
"strip-json-comments": "^2.0.1", "strip-json-comments": "^3.0.1",
"table": "^5.2.3", "table": "^5.2.3",
"text-table": "^0.2.0" "text-table": "^0.2.0",
"v8-compile-cache": "^2.0.3"
}, },
"dependencies": { "dependencies": {
"ansi-regex": { "ansi-regex": {
"version": "3.0.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true "dev": true
}, },
"debug": { "debug": {
@ -2043,20 +2044,41 @@
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"dev": true "dev": true
}, },
"glob-parent": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
"integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
},
"ms": { "ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true "dev": true
}, },
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"strip-ansi": { "strip-ansi": {
"version": "4.0.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-regex": "^3.0.0" "ansi-regex": "^4.1.0"
} }
},
"strip-json-comments": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz",
"integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
"dev": true
} }
} }
}, },
@ -2079,9 +2101,9 @@
} }
}, },
"eslint-scope": { "eslint-scope": {
"version": "4.0.3", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
"integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==", "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
"dev": true, "dev": true,
"requires": { "requires": {
"esrecurse": "^4.1.0", "esrecurse": "^4.1.0",
@ -2123,9 +2145,9 @@
}, },
"dependencies": { "dependencies": {
"acorn": { "acorn": {
"version": "6.2.0", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.0.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
"integrity": "sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==", "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==",
"dev": true "dev": true
} }
} }
@ -5954,11 +5976,11 @@
"dev": true "dev": true
}, },
"propagating-hammerjs": { "propagating-hammerjs": {
"version": "1.4.6", "version": "1.4.7",
"resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz", "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz",
"integrity": "sha1-/tAOmwB2f/1C0U9bUxvEk+tnLjc=", "integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==",
"requires": { "requires": {
"hammerjs": "^2.0.6" "hammerjs": "^2.0.8"
} }
}, },
"proxy-from-env": { "proxy-from-env": {
@ -6001,9 +6023,9 @@
"dev": true "dev": true
}, },
"puppeteer": { "puppeteer": {
"version": "1.18.1", "version": "1.19.0",
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz", "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.19.0.tgz",
"integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==", "integrity": "sha512-2S6E6ygpoqcECaagDbBopoSOPDv0pAZvTbnBgUY+6hq0/XDFDOLEMNlHF/SKJlzcaZ9ckiKjKDuueWI3FN/WXw==",
"dev": true, "dev": true,
"requires": { "requires": {
"debug": "^4.1.0", "debug": "^4.1.0",
@ -7743,6 +7765,12 @@
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
"dev": true "dev": true
}, },
"v8-compile-cache": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
"integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==",
"dev": true
},
"v8flags": { "v8flags": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz", "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",

6
package.json
View File

@ -22,7 +22,7 @@
"license": "LGPL-3.0-or-later", "license": "LGPL-3.0-or-later",
"devDependencies": { "devDependencies": {
"@pixi/jsdoc-template": "^2.4.2", "@pixi/jsdoc-template": "^2.4.2",
"eslint": "^6.0.1", "eslint": "^6.1.0",
"eslint-config-prettier": "^6.0.0", "eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0", "eslint-plugin-prettier": "^3.1.0",
"fs-extra": "^8.0.1", "fs-extra": "^8.0.1",
@ -34,7 +34,7 @@
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"htmlhint": "^0.11.0", "htmlhint": "^0.11.0",
"prettier": "^1.18.2", "prettier": "^1.18.2",
"puppeteer": "^1.18.1", "puppeteer": "^1.19.0",
"stylelint": "^10.1.0", "stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0" "stylelint-config-standard": "^18.3.0"
}, },
@ -47,6 +47,6 @@
"pixi-particles": "^4.1.1", "pixi-particles": "^4.1.1",
"pixi-projection": "^0.2.8", "pixi-projection": "^0.2.8",
"pixi.js": "^4.8.8", "pixi.js": "^4.8.8",
"propagating-hammerjs": "^1.4.6" "propagating-hammerjs": "^1.4.7"
} }
} }