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

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

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-07-19 08:39:08 +02:00
commit bb660b0e04
125 changed files with 11184 additions and 8154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3544
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

3708
dist/iwmlib.pixi.js vendored
View File

File diff suppressed because it is too large Load Diff

10
doc/out/AbstractPopup.html
View File

@ -1467,7 +1467,7 @@ like Popup, Message, Tooltip...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line49">abstractpopup.js:49</a> <a href="pixi_abstractpopup.js.html#line48">abstractpopup.js:48</a>
</div> </div>
</div> </div>
@ -2491,7 +2491,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2648,7 +2648,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line185">abstractpopup.js:185</a> <a href="pixi_abstractpopup.js.html#line192">abstractpopup.js:192</a>
</div> </div>
</div> </div>
@ -2753,7 +2753,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a> <a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Badge.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_badge.js.html#line47">badge.js:47</a> <a href="pixi_badge.js.html#line46">badge.js:46</a>
</div> </div>
</div> </div>
@ -1939,7 +1939,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2100,7 +2100,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_badge.js.html#line102">badge.js:102</a> <a href="pixi_badge.js.html#line110">badge.js:110</a>
</div> </div>
</div> </div>
@ -2209,7 +2209,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a> <a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/BlurFilter.html
View File

@ -1469,7 +1469,7 @@ is assigned to!</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_blurfilter.js.html#line37">blurfilter.js:37</a> <a href="pixi_blurfilter.js.html#line36">blurfilter.js:36</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

12
doc/out/Button.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_button.js.html#line110">button.js:110</a> <a href="pixi_button.js.html#line109">button.js:109</a>
</div> </div>
</div> </div>
@ -3369,7 +3369,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_button.js.html#line194">button.js:194</a> <a href="pixi_button.js.html#line207">button.js:207</a>
</div> </div>
</div> </div>
@ -3493,7 +3493,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_button.js.html#line597">button.js:597</a> <a href="pixi_button.js.html#line659">button.js:659</a>
</div> </div>
</div> </div>
@ -3598,7 +3598,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_button.js.html#line352">button.js:352</a> <a href="pixi_button.js.html#line402">button.js:402</a>
</div> </div>
</div> </div>
@ -3703,7 +3703,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_button.js.html#line580">button.js:580</a> <a href="pixi_button.js.html#line643">button.js:643</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/ButtonGroup.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line78">buttongroup.js:78</a> <a href="pixi_buttongroup.js.html#line77">buttongroup.js:77</a>
</div> </div>
</div> </div>
@ -2889,7 +2889,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line342">buttongroup.js:342</a> <a href="pixi_buttongroup.js.html#line367">buttongroup.js:367</a>
</div> </div>
</div> </div>
@ -2994,7 +2994,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line244">buttongroup.js:244</a> <a href="pixi_buttongroup.js.html#line262">buttongroup.js:262</a>
</div> </div>
</div> </div>
@ -3099,7 +3099,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_buttongroup.js.html#line330">buttongroup.js:330</a> <a href="pixi_buttongroup.js.html#line356">buttongroup.js:356</a>
</div> </div>
</div> </div>
@ -3206,7 +3206,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

6
doc/out/Flippable.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_flippable.js.html#line72">flippable.js:72</a> <a href="pixi_flippable.js.html#line71">flippable.js:71</a>
</div> </div>
</div> </div>
@ -2399,7 +2399,7 @@ front.on('click', event => flippable.toggle())</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_flippable.js.html#line331">flippable.js:331</a> <a href="pixi_flippable.js.html#line352">flippable.js:352</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/FontInfo.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line6">labeledgraphics.js:6</a> <a href="pixi_labeledgraphics.js.html#line4">labeledgraphics.js:4</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

6
doc/out/Hypenate.html
View File

@ -1463,7 +1463,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line21">labeledgraphics.js:21</a> <a href="pixi_labeledgraphics.js.html#line18">labeledgraphics.js:18</a>
</div> </div>
</div> </div>
@ -1557,7 +1557,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line120">labeledgraphics.js:120</a> <a href="pixi_labeledgraphics.js.html#line118">labeledgraphics.js:118</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/InteractivePopup.html
View File

@ -1467,7 +1467,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -1910,7 +1910,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2069,7 +2069,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line130">popup.js:130</a> <a href="pixi_popup.js.html#line148">popup.js:148</a>
</div> </div>
</div> </div>
@ -2178,7 +2178,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a> <a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1463,7 +1463,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line189">labeledgraphics.js:189</a> <a href="pixi_labeledgraphics.js.html#line190">labeledgraphics.js:190</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

16
doc/out/LabeledGraphics.html
View File

@ -1463,7 +1463,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line174">labeledgraphics.js:174</a> <a href="pixi_labeledgraphics.js.html#line176">labeledgraphics.js:176</a>
</div> </div>
</div> </div>
@ -1571,7 +1571,7 @@ resuse and place labels across different layout variants</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line353">labeledgraphics.js:353</a> <a href="pixi_labeledgraphics.js.html#line362">labeledgraphics.js:362</a>
</div> </div>
</div> </div>
@ -1647,7 +1647,7 @@ resuse and place labels across different layout variants</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line365">labeledgraphics.js:365</a> <a href="pixi_labeledgraphics.js.html#line374">labeledgraphics.js:374</a>
</div> </div>
</div> </div>
@ -1996,7 +1996,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line320">labeledgraphics.js:320</a> <a href="pixi_labeledgraphics.js.html#line330">labeledgraphics.js:330</a>
</div> </div>
</div> </div>
@ -2146,7 +2146,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line329">labeledgraphics.js:329</a> <a href="pixi_labeledgraphics.js.html#line339">labeledgraphics.js:339</a>
</div> </div>
</div> </div>
@ -2267,7 +2267,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line341">labeledgraphics.js:341</a> <a href="pixi_labeledgraphics.js.html#line351">labeledgraphics.js:351</a>
</div> </div>
</div> </div>
@ -2388,7 +2388,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line284">labeledgraphics.js:284</a> <a href="pixi_labeledgraphics.js.html#line281">labeledgraphics.js:281</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

12
doc/out/List.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_list.js.html#line47">list.js:47</a> <a href="pixi_list.js.html#line46">list.js:46</a>
</div> </div>
</div> </div>
@ -2077,7 +2077,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_list.js.html#line379">list.js:379</a> <a href="pixi_list.js.html#line392">list.js:392</a>
</div> </div>
</div> </div>
@ -2201,7 +2201,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_list.js.html#line147">list.js:147</a> <a href="pixi_list.js.html#line150">list.js:150</a>
</div> </div>
</div> </div>
@ -2306,7 +2306,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_list.js.html#line254">list.js:254</a> <a href="pixi_list.js.html#line261">list.js:261</a>
</div> </div>
</div> </div>
@ -2427,7 +2427,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_list.js.html#line133">list.js:133</a> <a href="pixi_list.js.html#line136">list.js:136</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

8
doc/out/Message.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_message.js.html#line57">message.js:57</a> <a href="pixi_message.js.html#line56">message.js:56</a>
</div> </div>
</div> </div>
@ -2169,7 +2169,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2328,7 +2328,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_message.js.html#line82">message.js:82</a> <a href="pixi_message.js.html#line84">message.js:84</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/MessageInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/MessageMessageInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Modal.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_modal.js.html#line47">modal.js:47</a> <a href="pixi_modal.js.html#line46">modal.js:46</a>
</div> </div>
</div> </div>
@ -2015,7 +2015,7 @@ a string or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_modal.js.html#line166">modal.js:166</a> <a href="pixi_modal.js.html#line172">modal.js:172</a>
</div> </div>
</div> </div>
@ -2122,7 +2122,7 @@ a string or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_modal.js.html#line131">modal.js:131</a> <a href="pixi_modal.js.html#line132">modal.js:132</a>
</div> </div>
</div> </div>
@ -2229,7 +2229,7 @@ a string or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_modal.js.html#line155">modal.js:155</a> <a href="pixi_modal.js.html#line158">modal.js:158</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/ModalInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/ModalModalInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

40
doc/out/PIXIApp.html
View File

@ -2316,7 +2316,7 @@ const app = new PIXIApp({
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line272">app.js:272</a> <a href="pixi_app.js.html#line293">app.js:293</a>
</div> </div>
</div> </div>
@ -2423,7 +2423,7 @@ const app = new PIXIApp({
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line207">app.js:207</a> <a href="pixi_app.js.html#line227">app.js:227</a>
</div> </div>
</div> </div>
@ -2552,7 +2552,7 @@ handler for the orientationchange event.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line664">app.js:664</a> <a href="pixi_app.js.html#line707">app.js:707</a>
</div> </div>
</div> </div>
@ -2749,7 +2749,7 @@ to browser page coordinates.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line644">app.js:644</a> <a href="pixi_app.js.html#line687">app.js:687</a>
</div> </div>
</div> </div>
@ -2946,7 +2946,7 @@ to local DisplayObject coordinates.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line244">app.js:244</a> <a href="pixi_app.js.html#line265">app.js:265</a>
</div> </div>
</div> </div>
@ -3023,7 +3023,7 @@ to the layout method.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line374">app.js:374</a> <a href="pixi_app.js.html#line407">app.js:407</a>
</div> </div>
</div> </div>
@ -3188,7 +3188,7 @@ to the layout method.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line235">app.js:235</a> <a href="pixi_app.js.html#line258">app.js:258</a>
</div> </div>
</div> </div>
@ -3347,7 +3347,7 @@ adapt their layout to the new app size.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line451">app.js:451</a> <a href="pixi_app.js.html#line485">app.js:485</a>
</div> </div>
</div> </div>
@ -3680,7 +3680,7 @@ renderer resolution?</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line483">app.js:483</a> <a href="pixi_app.js.html#line522">app.js:522</a>
</div> </div>
</div> </div>
@ -4013,7 +4013,7 @@ renderer resolution?</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line430">app.js:430</a> <a href="pixi_app.js.html#line463">app.js:463</a>
</div> </div>
</div> </div>
@ -4170,7 +4170,7 @@ renderer resolution?</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line416">app.js:416</a> <a href="pixi_app.js.html#line448">app.js:448</a>
</div> </div>
</div> </div>
@ -4327,7 +4327,7 @@ renderer resolution?</p></td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line576">app.js:576</a> <a href="pixi_app.js.html#line621">app.js:621</a>
</div> </div>
</div> </div>
@ -4528,7 +4528,7 @@ rejected with an error.</td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line197">app.js:197</a> <a href="pixi_app.js.html#line217">app.js:217</a>
</div> </div>
</div> </div>
@ -4633,7 +4633,7 @@ rejected with an error.</td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line222">app.js:222</a> <a href="pixi_app.js.html#line245">app.js:245</a>
</div> </div>
</div> </div>
@ -4769,7 +4769,7 @@ rejected with an error.</td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line398">app.js:398</a> <a href="pixi_app.js.html#line431">app.js:431</a>
</div> </div>
</div> </div>
@ -4930,7 +4930,7 @@ called without a parameter.</td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line544">app.js:544</a> <a href="pixi_app.js.html#line590">app.js:590</a>
</div> </div>
</div> </div>
@ -5131,7 +5131,7 @@ rejected with an error.</td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line308">app.js:308</a> <a href="pixi_app.js.html#line329">app.js:329</a>
</div> </div>
</div> </div>
@ -5428,7 +5428,7 @@ rejected with an error.</td>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line153">app.js:153</a> <a href="pixi_app.js.html#line167">app.js:167</a>
</div> </div>
</div> </div>
@ -5534,7 +5534,7 @@ Overwrite this method if you need additonal views and components.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_app.js.html#line608">app.js:608</a> <a href="pixi_app.js.html#line652">app.js:652</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Popup.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line205">popup.js:205</a> <a href="pixi_popup.js.html#line226">popup.js:226</a>
</div> </div>
</div> </div>
@ -1901,7 +1901,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2062,7 +2062,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line130">popup.js:130</a> <a href="pixi_popup.js.html#line148">popup.js:148</a>
</div> </div>
</div> </div>
@ -2171,7 +2171,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a> <a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/PopupInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/PopupMenu.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popupmenu.js.html#line47">popupmenu.js:47</a> <a href="pixi_popupmenu.js.html#line46">popupmenu.js:46</a>
</div> </div>
</div> </div>
@ -1955,7 +1955,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2116,7 +2116,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line130">popup.js:130</a> <a href="pixi_popup.js.html#line148">popup.js:148</a>
</div> </div>
</div> </div>
@ -2225,7 +2225,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a> <a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/PopupMenuPopupInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/PopupMenuPopupPopupInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/PopupPopupInteractivePopup.html
View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_popup.js.html#line28">popup.js:28</a> <a href="pixi_popup.js.html#line27">popup.js:27</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Progress.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_progress.js.html#line57">progress.js:57</a> <a href="pixi_progress.js.html#line56">progress.js:56</a>
</div> </div>
</div> </div>
@ -2552,7 +2552,7 @@ app.scene.addChild(progress)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_progress.js.html#line266">progress.js:266</a> <a href="pixi_progress.js.html#line289">progress.js:289</a>
</div> </div>
</div> </div>
@ -2657,7 +2657,7 @@ app.scene.addChild(progress)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_progress.js.html#line150">progress.js:150</a> <a href="pixi_progress.js.html#line151">progress.js:151</a>
</div> </div>
</div> </div>
@ -2762,7 +2762,7 @@ app.scene.addChild(progress)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_progress.js.html#line255">progress.js:255</a> <a href="pixi_progress.js.html#line278">progress.js:278</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

6
doc/out/Scrollview.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_scrollview.js.html#line38">scrollview.js:38</a> <a href="pixi_scrollview.js.html#line37">scrollview.js:37</a>
</div> </div>
</div> </div>
@ -1594,7 +1594,7 @@ app.loader
<div class="tag-source"> <div class="tag-source">
<a href="pixi_scrollview.js.html#line61">scrollview.js:61</a> <a href="pixi_scrollview.js.html#line58">scrollview.js:58</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Slider.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_slider.js.html#line90">slider.js:90</a> <a href="pixi_slider.js.html#line89">slider.js:89</a>
</div> </div>
</div> </div>
@ -2643,7 +2643,7 @@ app.scene.addChild(slider)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_slider.js.html#line462">slider.js:462</a> <a href="pixi_slider.js.html#line492">slider.js:492</a>
</div> </div>
</div> </div>
@ -2748,7 +2748,7 @@ app.scene.addChild(slider)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_slider.js.html#line286">slider.js:286</a> <a href="pixi_slider.js.html#line301">slider.js:301</a>
</div> </div>
</div> </div>
@ -2853,7 +2853,7 @@ app.scene.addChild(slider)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_slider.js.html#line445">slider.js:445</a> <a href="pixi_slider.js.html#line476">slider.js:476</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Switch.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_switch.js.html#line110">switch.js:110</a> <a href="pixi_switch.js.html#line109">switch.js:109</a>
</div> </div>
</div> </div>
@ -3073,7 +3073,7 @@ app.scene.addChild(switch1)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_switch.js.html#line495">switch.js:495</a> <a href="pixi_switch.js.html#line553">switch.js:553</a>
</div> </div>
</div> </div>
@ -3178,7 +3178,7 @@ app.scene.addChild(switch1)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_switch.js.html#line299">switch.js:299</a> <a href="pixi_switch.js.html#line301">switch.js:301</a>
</div> </div>
</div> </div>
@ -3283,7 +3283,7 @@ app.scene.addChild(switch1)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_switch.js.html#line474">switch.js:474</a> <a href="pixi_switch.js.html#line533">switch.js:533</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1463,7 +1463,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line142">labeledgraphics.js:142</a> <a href="pixi_labeledgraphics.js.html#line139">labeledgraphics.js:139</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

6
doc/out/Theme.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_theme.js.html#line85">theme.js:85</a> <a href="pixi_theme.js.html#line84">theme.js:84</a>
</div> </div>
</div> </div>
@ -2999,7 +2999,7 @@ const app = new PIXIApp({
<div class="tag-source"> <div class="tag-source">
<a href="pixi_theme.js.html#line143">theme.js:143</a> <a href="pixi_theme.js.html#line176">theme.js:176</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/ThemeDark.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_theme.js.html#line176">theme.js:176</a> <a href="pixi_theme.js.html#line208">theme.js:208</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/ThemeLight.html
View File

@ -1466,7 +1466,7 @@ The color1 is set to 0xf6f6f6, color2 to 0x282828.</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_theme.js.html#line204">theme.js:204</a> <a href="pixi_theme.js.html#line233">theme.js:233</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

4
doc/out/ThemeRed.html
View File

@ -1466,7 +1466,7 @@ The primaryColor is set to 0xd92f31.</p></div>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_theme.js.html#line234">theme.js:234</a> <a href="pixi_theme.js.html#line261">theme.js:261</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

10
doc/out/Tooltip.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_tooltip.js.html#line49">tooltip.js:49</a> <a href="pixi_tooltip.js.html#line48">tooltip.js:48</a>
</div> </div>
</div> </div>
@ -2077,7 +2077,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a> <a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
</div> </div>
</div> </div>
@ -2238,7 +2238,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line185">abstractpopup.js:185</a> <a href="pixi_abstractpopup.js.html#line192">abstractpopup.js:192</a>
</div> </div>
</div> </div>
@ -2347,7 +2347,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a> <a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

18
doc/out/UITest.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line42">uitest.js:42</a> <a href="uitest.js.html#line41">uitest.js:41</a>
</div> </div>
</div> </div>
@ -1857,7 +1857,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line126">uitest.js:126</a> <a href="uitest.js.html#line134">uitest.js:134</a>
</div> </div>
</div> </div>
@ -1962,7 +1962,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line266">uitest.js:266</a> <a href="uitest.js.html#line301">uitest.js:301</a>
</div> </div>
</div> </div>
@ -2596,7 +2596,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line391">uitest.js:391</a> <a href="uitest.js.html#line455">uitest.js:455</a>
</div> </div>
</div> </div>
@ -3340,7 +3340,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line136">uitest.js:136</a> <a href="uitest.js.html#line144">uitest.js:144</a>
</div> </div>
</div> </div>
@ -3445,7 +3445,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line106">uitest.js:106</a> <a href="uitest.js.html#line114">uitest.js:114</a>
</div> </div>
</div> </div>
@ -3550,7 +3550,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line116">uitest.js:116</a> <a href="uitest.js.html#line124">uitest.js:124</a>
</div> </div>
</div> </div>
@ -3655,7 +3655,7 @@ test.start()</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="uitest.js.html#line156">uitest.js:156</a> <a href="uitest.js.html#line164">uitest.js:164</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

6
doc/out/Volatile.html
View File

@ -1465,7 +1465,7 @@
<div class="tag-source"> <div class="tag-source">
<a href="pixi_volatile.js.html#line50">volatile.js:50</a> <a href="pixi_volatile.js.html#line49">volatile.js:49</a>
</div> </div>
</div> </div>
@ -1986,7 +1986,7 @@ app.scene.addChild(button)</code></pre>
<div class="tag-source"> <div class="tag-source">
<a href="pixi_volatile.js.html#line104">volatile.js:104</a> <a href="pixi_volatile.js.html#line105">volatile.js:105</a>
</div> </div>
</div> </div>
@ -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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1451,7 +1451,6 @@
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics} * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/ */
export default class AbstractPopup extends PIXI.Graphics { export default class AbstractPopup extends PIXI.Graphics {
/** /**
* Creates an instance of an AbstractPopup (only for internal use). * Creates an instance of an AbstractPopup (only for internal use).
* *
@ -1485,34 +1484,37 @@ export default class AbstractPopup extends PIXI.Graphics {
* to landscape, the popup cannot be displayed in portrait mode. * to landscape, the popup cannot be displayed in portrait mode.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
header: null, // null or null x: 0,
content: null, // null or String or PIXI.DisplayObject y: 0,
minWidth: 320, header: null, // null or null
minHeight: 130, content: null, // null or String or PIXI.DisplayObject
maxWidth: null, minWidth: 320,
padding: theme.padding, minHeight: 130,
fill: theme.fill, maxWidth: null,
fillAlpha: theme.fillAlpha, padding: theme.padding,
stroke: theme.stroke, fill: theme.fill,
strokeWidth: theme.strokeWidth, fillAlpha: theme.fillAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
headerStyle: theme.textStyleLarge, strokeWidth: theme.strokeWidth,
textStyle: theme.textStyleSmall, strokeAlpha: theme.strokeAlpha,
radius: theme.radius, headerStyle: theme.textStyleLarge,
onHidden: null, textStyle: theme.textStyleSmall,
visible: true, radius: theme.radius,
orientation: null onHidden: null,
}, opts) visible: true,
orientation: null
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -1521,10 +1523,12 @@ 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.opts.maxWidth - (2 * this.opts.padding) this.headerStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
this.textStyle.wordWrap = true this.textStyle.wordWrap = true
this.textStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) this.textStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
} }
this.alpha = 0 this.alpha = 0
@ -1555,7 +1559,6 @@ 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.
*/ */
setup() { setup() {
// position // position
//----------------- //-----------------
this.sy = this.opts.padding this.sy = this.opts.padding
@ -1563,15 +1566,17 @@ export default class AbstractPopup extends PIXI.Graphics {
// header // header
//----------------- //-----------------
if (this.opts.header != null) { if (this.opts.header != null) {
let header = null let header = null
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(this.opts.header.toString(), this.headerStyle) header = new PIXI.Text(
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)
} }
header.x = this.opts.padding header.x = this.opts.padding
@ -1591,13 +1596,15 @@ export default class AbstractPopup extends PIXI.Graphics {
// content // content
//----------------- //-----------------
if (this.opts.content != null) { if (this.opts.content != null) {
let content = null let content = null
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(this.opts.content.toString(), this.textStyle) content = new PIXI.Text(
this.opts.content.toString(),
this.textStyle
)
} else { } else {
content = this.opts.content content = this.opts.content
} }
@ -1621,13 +1628,12 @@ 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.
*/ */
layout() { layout() {
// wanted width &amp; wanted height // wanted width &amp; wanted height
//----------------- //-----------------
const padding = this.opts.padding const padding = this.opts.padding
const size = this.getInnerSize() const size = this.getInnerSize()
const width = size.width + (2 * padding) const width = size.width + 2 * padding
const height = size.height + (2 * padding) const height = size.height + 2 * padding
this.wantedWidth = Math.max(width, this.opts.minWidth) this.wantedWidth = Math.max(width, this.opts.minWidth)
this.wantedHeight = Math.max(height, this.opts.minHeight) this.wantedHeight = Math.max(height, this.opts.minHeight)
@ -1669,17 +1675,31 @@ 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.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.lineStyle(
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 &amp;&amp; diameter === this.wantedWidth) { if (square &amp;&amp; diameter === this.wantedWidth) {
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius) this.drawCircle(
this.wantedWidth / 2,
this.wantedHeight / 2,
this.opts.radius
)
} else { } else {
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius) this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
} }
this.endFill() this.endFill()
@ -1695,7 +1715,6 @@ export default class AbstractPopup extends PIXI.Graphics {
* @returns {object} An JavaScript object width the keys width and height. * @returns {object} An JavaScript object width the keys width and height.
*/ */
getInnerSize() { getInnerSize() {
let width = 0 let width = 0
let height = 0 let height = 0
@ -1713,7 +1732,7 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height height += this._content.height
} }
return {width, height} return { width, height }
} }
/** /**
@ -1723,7 +1742,6 @@ 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.
*/ */
show(cb) { show(cb) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 1, alpha: 1,
onComplete: () => { onComplete: () => {
@ -1743,7 +1761,6 @@ 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.
*/ */
hide(cb) { hide(cb) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => { onComplete: () => {
@ -1808,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1444,7 +1444,7 @@ import Theme from './theme.js'
import Progress from './progress.js' import Progress from './progress.js'
import Modal from './modal.js' import Modal from './modal.js'
import Message from './message.js' import Message from './message.js'
import {debounce} from '../utils.js' import { debounce } from '../utils.js'
/** /**
* A special InteractionManager for fullscreen apps, which may * A special InteractionManager for fullscreen apps, which may
@ -1461,7 +1461,6 @@ import {debounce} from '../utils.js'
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size} * @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
*/ */
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager { class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
mapPositionToPoint(point, x, y) { mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution let resolution = this.renderer.resolution
let extendWidth = 1.0 let extendWidth = 1.0
@ -1469,8 +1468,10 @@ 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 (context.drawingBufferWidth &lt; canvas.width || if (
context.drawingBufferHeight &lt; canvas.height) { context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; 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
@ -1503,7 +1504,6 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
* @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application} * @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
*/ */
export default class PIXIApp extends PIXI.Application { export default class PIXIApp extends PIXI.Application {
/** /**
* Creates an instance of a PixiApp. * Creates an instance of a PixiApp.
* *
@ -1526,12 +1526,23 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision. * @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
*/ */
constructor({ constructor({
width = null, height = null, view = null, width = null,
transparent = true, backgroundColor = 0x282828, theme = 'dark', height = null,
antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true, view = null,
fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true, transparent = true,
graphql = false }) { backgroundColor = 0x282828,
theme = 'dark',
antialias = true,
resolution = window.devicePixelRatio || 1,
autoResize = true,
fpsLogging = false,
progress = {},
forceCanvas = false,
roundPixels = true,
monkeyPatchMapping = true,
adaptive = true,
graphql = false
}) {
const fullScreen = !width || !height const fullScreen = !width || !height
if (fullScreen) { if (fullScreen) {
@ -1549,7 +1560,7 @@ export default class PIXIApp extends PIXI.Application {
autoResize, autoResize,
backgroundColor, backgroundColor,
forceCanvas, forceCanvas,
roundPixels // not needed for PixiJS >= 5 roundPixels // not needed for PixiJS >= 5
}) })
this.width = width this.width = width
@ -1572,7 +1583,10 @@ 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('orientationchange', this.checkOrientation.bind(this)) document.body.addEventListener(
'orientationchange',
this.checkOrientation.bind(this)
)
} }
if (monkeyPatchMapping) { if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping') console.log('Using monkey patched coordinate mapping')
@ -1599,15 +1613,17 @@ export default class PIXIApp extends PIXI.Application {
// GraphQL // GraphQL
if (this.graphql &amp;&amp; typeof apollo !== 'undefined') { if (this.graphql &amp;&amp; typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({ const networkInterface = apollo.createNetworkInterface({
uri: '/graphql' uri: '/graphql'
}) })
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, { const wsClient = new subscriptions.SubscriptionClient(
reconnect: true, `wss://${location.hostname}/subscriptions`,
connectionParams: {} {
}) reconnect: true,
connectionParams: {}
}
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions( const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface, networkInterface,
@ -1620,7 +1636,11 @@ export default class PIXIApp extends PIXI.Application {
} }
// progress // progress
this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this })) this._progress = new Progress(
Object.assign({ theme: this.theme }, this.progressOpts, {
app: this
})
)
this._progress.visible = false this._progress.visible = false
this.stage.addChild(this._progress) this.stage.addChild(this._progress)
@ -1645,9 +1665,12 @@ export default class PIXIApp extends PIXI.Application {
checkOrientation(event) { checkOrientation(event) {
var value = this.orientation() var value = this.orientation()
if (value != this.orient) { if (value != this.orient) {
setTimeout(100, function () { setTimeout(
this.orientationChanged(true) 100,
}.bind(this)) function() {
this.orientationChanged(true)
}.bind(this)
)
this.orient = value this.orient = value
} }
} }
@ -1670,9 +1693,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [width] - The width of the app. * @param {number} [width] - The width of the app.
* @param {number} [height] - The height of the app. * @param {number} [height] - The height of the app.
*/ */
layout(width, height) { layout(width, height) {}
}
/** /**
* Draws the display tree of the app. Typically this can be delegated * Draws the display tree of the app. Typically this can be delegated
@ -1743,7 +1764,10 @@ 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(event, { width = window.innerWidth, height = window.innerHeight } = {}) { resize(
event,
{ width = window.innerWidth, height = window.innerHeight } = {}
) {
this.width = width this.width = width
this.height = height this.height = height
this.expandRenderer() this.expandRenderer()
@ -1764,7 +1788,8 @@ 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 = interactionManager.mapPositionToPoint this.originalMapPositionToPoint =
interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (point, x, y) => { interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y) return this.fixedMapPositionToPoint(point, x, y)
} }
@ -1791,8 +1816,11 @@ export default class PIXIApp extends PIXI.Application {
let canvas = this.renderer.view let canvas = this.renderer.view
let context = canvas.getContext('webgl') let context = canvas.getContext('webgl')
if (context !== null &amp;&amp; (context.drawingBufferWidth &lt; canvas.width || if (
context.drawingBufferHeight &lt; canvas.height)) { context !== null &amp;&amp;
(context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; 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
@ -1800,7 +1828,12 @@ export default class PIXIApp extends PIXI.Application {
} }
x *= extendWidth x *= extendWidth
y *= extendHeight y *= extendHeight
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy) return this.originalMapPositionToPoint.call(
interactionManager,
local,
x,
y + dy
)
} }
/** /**
@ -1834,7 +1867,6 @@ export default class PIXIApp extends PIXI.Application {
* called without a parameter. * called without a parameter.
*/ */
progress(value) { progress(value) {
if (typeof value === 'undefined') { if (typeof value === 'undefined') {
return this._progress return this._progress
} }
@ -1852,8 +1884,9 @@ 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
@ -1866,8 +1899,9 @@ 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
@ -1886,21 +1920,26 @@ 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(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { loadSprites(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
this.loadTextures(
resources,
textures => {
let sprites = new Map()
this.loadTextures(resources, textures => { for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
let sprites = new Map() if (loaded) {
loaded.call(this, sprites)
for (let [key, texture] of textures) { }
sprites.set(key, new PIXI.Sprite(texture)) },
} { resolutionDependent, progress }
)
if (loaded) {
loaded.call(this, sprites)
}
}, { resolutionDependent, progress })
return this return this
} }
@ -1918,8 +1957,11 @@ 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(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { loadTextures(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
if (!Array.isArray(resources)) { if (!Array.isArray(resources)) {
resources = [resources] resources = [resources]
} }
@ -1927,17 +1969,21 @@ export default class PIXIApp extends PIXI.Application {
const loader = this.loader const loader = this.loader
for (let resource of resources) { for (let resource of resources) {
if (!loader.resources[resource]) { if (!loader.resources[resource]) {
if (resolutionDependent) { if (resolutionDependent) {
let resolution = Math.round(this.renderer.resolution) let resolution = Math.round(this.renderer.resolution)
switch (resolution) { switch (resolution) {
case 2: case 2:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1')) loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@2x.$1')
)
break break
case 3: case 3:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1')) loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@3x.$1')
)
break break
default: default:
loader.add(resource) loader.add(resource)
@ -1980,7 +2026,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error. * rejected with an error.
*/ */
query(query, opts = {}) { query(query, opts = {}) {
if (typeof query === 'string') { if (typeof query === 'string') {
opts = Object.assign({}, opts, { query }) opts = Object.assign({}, opts, { query })
} else { } else {
@ -2012,7 +2057,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error. * rejected with an error.
*/ */
mutate(mutation, opts = {}) { mutate(mutation, opts = {}) {
if (typeof mutation === 'string') { if (typeof mutation === 'string') {
opts = Object.assign({}, opts, { mutation }) opts = Object.assign({}, opts, { mutation })
} else { } else {
@ -2044,7 +2088,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error. * rejected with an error.
*/ */
subscribe(subscription, opts = {}) { subscribe(subscription, opts = {}) {
if (typeof subscription === 'string') { if (typeof subscription === 'string') {
opts = Object.assign({}, opts, { subscription }) opts = Object.assign({}, opts, { subscription })
} else { } else {
@ -2081,7 +2124,7 @@ export default class PIXIApp extends PIXI.Application {
convertPointFromPageToNode(displayObject, x, y) { convertPointFromPageToNode(displayObject, x, y) {
let resolution = this.renderer.resolution let resolution = this.renderer.resolution
console.log("resolution", resolution) console.log('resolution', resolution)
let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y) let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
pixiGlobal.x /= resolution pixiGlobal.x /= resolution
pixiGlobal.y /= resolution pixiGlobal.y /= resolution
@ -2105,7 +2148,11 @@ 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(app.view, pixiGlobal.x, pixiGlobal.y) return window.convertPointFromNodeToPage(
app.view,
pixiGlobal.x,
pixiGlobal.y
)
} }
} }
@ -2119,7 +2166,6 @@ export default class PIXIApp extends PIXI.Application {
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics} * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/ */
class FpsDisplay extends PIXI.Graphics { class FpsDisplay extends PIXI.Graphics {
/** /**
* Creates an instance of a FpsDisplay. * Creates an instance of a FpsDisplay.
* *
@ -2127,25 +2173,27 @@ class FpsDisplay extends PIXI.Graphics {
* @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed. * @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
*/ */
constructor(app) { constructor(app) {
super() super()
this.app = app this.app = app
this.lineStyle(3, 0x434f4f, 1) this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, .6) .beginFill(0x434f4f, 0.6)
.drawRoundedRect(0, 0, 68, 32, 5) .drawRoundedRect(0, 0, 68, 32, 5)
.endFill() .endFill()
.position.set(20, 20) .position.set(20, 20)
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({ this.text = new PIXI.Text(
fontFamily: 'Arial', this.fps,
fontSize: 14, new PIXI.TextStyle({
fontWeight: 'bold', fontFamily: 'Arial',
fill: '#f6f6f6', fontSize: 14,
stroke: '#434f4f', fontWeight: 'bold',
strokeThickness: 3 fill: '#f6f6f6',
})) stroke: '#434f4f',
strokeThickness: 3
})
)
this.text.position.set(6, 6) this.text.position.set(6, 6)
this.addChild(this.text) this.addChild(this.text)
@ -2161,7 +2209,7 @@ class FpsDisplay extends PIXI.Graphics {
* @return {PIXIApp} Returns the PIXIApp object for chaining. * @return {PIXIApp} Returns the PIXIApp object for chaining.
*/ */
refreshFps() { refreshFps() {
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps` this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
return this return this
} }
@ -2179,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1470,7 +1470,6 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest}
*/ */
export default class Badge extends AbstractPopup { export default class Badge extends AbstractPopup {
/** /**
* Creates an instance of a Badge. * Creates an instance of a Badge.
* *
@ -1483,15 +1482,18 @@ export default class Badge extends AbstractPopup {
* to display. * to display.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
minWidth: 0, {},
minHeight: 0, {
padding: theme.padding / 2, minWidth: 0,
tooltip: null minHeight: 0,
}, opts) padding: theme.padding / 2,
tooltip: null
},
opts
)
super(opts) super(opts)
@ -1514,16 +1516,22 @@ export default class Badge extends AbstractPopup {
* @return {Badge} A reference to the badge for chaining. * @return {Badge} A reference to the badge for chaining.
*/ */
setup() { setup() {
super.setup() super.setup()
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({object: this, content: this.opts.tooltip}) this.tooltip = new Tooltip({
object: this,
content: this.opts.tooltip
})
} else { } else {
this.opts.tooltip = Object.assign({}, {object: this}, this.opts.tooltip) this.opts.tooltip = Object.assign(
{},
{ object: this },
this.opts.tooltip
)
this.tooltip = new Tooltip(this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip)
} }
} }
@ -1538,11 +1546,14 @@ export default class Badge extends AbstractPopup {
* @return {Badge} A reference to the badge for chaining. * @return {Badge} A reference to the badge for chaining.
*/ */
layout() { layout() {
super.layout() super.layout()
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2 this.content.x =
this.content.y = this.height / 2 - this.content.height / 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
return this return this
} }
@ -1560,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1471,7 +1471,6 @@
* @param {number} [blur=50] The strength of the blur. * @param {number} [blur=50] The strength of the blur.
*/ */
export default class BlurFilter extends PIXI.Filter { export default class BlurFilter extends PIXI.Filter {
constructor(shape, blur = 50) { constructor(shape, blur = 50) {
super() super()
@ -1509,7 +1508,9 @@ 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(value) this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
value
)
} }
/** /**
@ -1519,16 +1520,27 @@ export default class BlurFilter extends PIXI.Filter {
* @returns {Object} * @returns {Object}
*/ */
normalize(value) { normalize(value) {
let shape = null let shape = null
if (value instanceof PIXI.Circle) { if (value instanceof PIXI.Circle) {
shape = {type: 'circle', x: value.x, y: value.y, r: value.radius} shape = { type: 'circle', x: value.x, y: value.y, r: value.radius }
} else if (value instanceof PIXI.Rectangle) { } else if (value instanceof PIXI.Rectangle) {
shape = {type: 'rectangle', x: value.x, y: value.y, width: value.width, height: value.height} shape = {
type: 'rectangle',
x: value.x,
y: value.y,
width: value.width,
height: value.height
}
} else { } else {
const bounds = value.getBounds() const bounds = value.getBounds()
shape = {type: 'rectangle', x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height} shape = {
type: 'rectangle',
x: bounds.x,
y: bounds.y,
width: bounds.width,
height: bounds.height
}
} }
return shape return shape
@ -1544,9 +1556,7 @@ export default class BlurFilter extends PIXI.Filter {
* @private * @private
*/ */
class TiltShiftAxisFilter extends PIXI.Filter { class TiltShiftAxisFilter extends PIXI.Filter {
constructor(shape, blur) {
constructor(shape, blur){
const vertex = ` const vertex = `
attribute vec2 aVertexPosition; attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord; attribute vec2 aTextureCoord;
@ -1619,7 +1629,12 @@ 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 = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height] this.uniforms.rectangle = [
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)
@ -1653,7 +1668,12 @@ 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(rectangle[0], rectangle[1], rectangle[2], rectangle[3]) return new PIXI.Rectangle(
rectangle[0],
rectangle[1],
rectangle[2],
rectangle[3]
)
} }
} }
set shape(value) { set shape(value) {
@ -1662,7 +1682,12 @@ 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 = [value.x, value.y, value.x + value.width, value.y + value.height] this.uniforms.rectangle = [
value.x,
value.y,
value.x + value.width,
value.y + value.height
]
} }
} }
} }
@ -1700,7 +1725,6 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
this.uniforms.delta.y = 0.1 this.uniforms.delta.y = 0.1
} }
} }
</code></pre> </code></pre>
</article> </article>
</section> </section>
@ -1714,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1487,7 +1487,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
*/ */
export default class Button extends PIXI.Container { export default class Button extends PIXI.Container {
/** /**
* Creates an instance of a Button. * Creates an instance of a Button.
* *
@ -1546,62 +1545,76 @@ export default class Button extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
label: null, {
x: 0, id: PIXI.utils.uid(),
y: 0, label: null,
minWidth: 44, x: 0,
minHeight: 44, y: 0,
padding: theme.padding, minWidth: 44,
icon: undefined, minHeight: 44,
iconActive: undefined, padding: theme.padding,
iconPosition: 'left', icon: undefined,
iconColor: theme.iconColor, iconActive: undefined,
iconColorActive: theme.iconColorActive, iconPosition: 'left',
fill: theme.fill, iconColor: theme.iconColor,
fillAlpha: theme.fillAlpha, iconColorActive: theme.iconColorActive,
fillActive: theme.fillActive, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.fillActive,
strokeWidth: theme.strokeWidth, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.strokeActive, strokeWidth: theme.strokeWidth,
strokeActiveWidth: theme.strokeActiveWidth, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.strokeActive,
textStyle: theme.textStyle, strokeActiveWidth: theme.strokeActiveWidth,
textStyleActive: theme.textStyleActive, strokeActiveAlpha: theme.strokeActiveAlpha,
style: 'default', textStyle: theme.textStyle,
radius: theme.radius, textStyleActive: theme.textStyleActive,
disabled: false, style: 'default',
active: false, radius: theme.radius,
action: null, disabled: false,
beforeAction: null, active: false,
afterAction: null, action: null,
type: 'default', beforeAction: null,
align: 'center', afterAction: null,
verticalAlign: 'middle', type: 'default',
tooltip: null, align: 'center',
badge: null, verticalAlign: 'middle',
visible: true tooltip: null,
}, opts) badge: null,
visible: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
if (typeof this.opts.icon === 'undefined' &amp;&amp; typeof this.opts.iconActive !== 'undefined') { if (
typeof this.opts.icon === 'undefined' &amp;&amp;
typeof this.opts.iconActive !== 'undefined'
) {
this.opts.icon = this.opts.iconActive this.opts.icon = this.opts.iconActive
} else if (typeof this.opts.icon !== 'undefined' &amp;&amp; typeof this.opts.iconActive === 'undefined') { } else if (
typeof this.opts.icon !== 'undefined' &amp;&amp;
typeof this.opts.iconActive === 'undefined'
) {
this.opts.iconActive = this.opts.icon this.opts.iconActive = this.opts.icon
} }
if (this.opts.style === 'link') { if (this.opts.style === 'link') {
Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 }) Object.assign(this.opts, {
strokeAlpha: 0,
strokeActiveAlpha: 0,
fillAlpha: 0,
fillActiveAlpha: 0
})
} }
this._active = null this._active = null
@ -1640,7 +1653,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
setup() { setup() {
// Button // Button
//----------------- //-----------------
let button = new PIXI.Graphics() let button = new PIXI.Graphics()
@ -1662,18 +1674,27 @@ export default class Button extends PIXI.Container {
// Icon // Icon
//----------------- //-----------------
if (this.opts.icon) { if (this.opts.icon) {
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor) this.iconInactive = this.loadIcon(
this.opts.icon,
this.opts.iconColor
)
} }
if (this.opts.iconActive) { if (this.opts.iconActive) {
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive) this.iconActive = this.loadIcon(
this.opts.iconActive,
this.opts.iconColorActive
)
} }
// interaction // interaction
//----------------- //-----------------
this.button.on('pointerover', e => { this.button.on('pointerover', e => {
this.capture(e) this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
}) })
this.button.on('pointermove', e => { this.button.on('pointermove', e => {
@ -1682,13 +1703,19 @@ export default class Button extends PIXI.Container {
this.button.on('pointerout', e => { this.button.on('pointerout', e => {
this.capture(e) this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: 1, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
}) })
// 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)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .7, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
})
}) })
this.button.on('pointerup', e => { this.button.on('pointerup', e => {
@ -1701,7 +1728,10 @@ export default class Button extends PIXI.Container {
this.opts.action.call(this, e, this) this.opts.action.call(this, e, this)
} }
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') { if (this.opts.type === 'checkbox') {
this.active = !this.active this.active = !this.active
@ -1718,15 +1748,22 @@ export default class Button extends PIXI.Container {
// active // active
//----------------- //-----------------
this.active = this.opts.active // calls .layout() this.active = this.opts.active // calls .layout()
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ object: this, content: this.opts.tooltip }) this.tooltip = new Tooltip({
object: this,
content: this.opts.tooltip
})
} else { } else {
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.opts.tooltip = Object.assign(
{},
{ object: this },
this.opts.tooltip
)
this.tooltip = new Tooltip(this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip)
} }
} }
@ -1734,12 +1771,15 @@ export default class Button extends PIXI.Container {
// badge // badge
//----------------- //-----------------
if (this.opts.badge) { if (this.opts.badge) {
let opts = Object.assign({}, { let opts = Object.assign(
align: 'right', {},
verticalAlign: 'top', {
offsetLeft: 0, align: 'right',
offsetTop: 0 verticalAlign: 'top',
}) offsetLeft: 0,
offsetTop: 0
}
)
if (typeof this.opts.badge === 'string') { if (typeof this.opts.badge === 'string') {
opts = Object.assign(opts, { content: this.opts.badge }) opts = Object.assign(opts, { content: this.opts.badge })
} else { } else {
@ -1749,25 +1789,35 @@ export default class Button extends PIXI.Container {
const badge = new Badge(opts) const badge = new Badge(opts)
switch (opts.align) { switch (opts.align) {
case 'left': case 'left':
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 = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft badge.x =
break this.x +
case 'right': this.width / 2 -
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
} }
switch (opts.verticalAlign) { switch (opts.verticalAlign) {
case 'top': case 'top':
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 = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop badge.y =
break this.y +
case 'bottom': this.height / 2 -
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
} }
this.addChild(badge) this.addChild(badge)
@ -1788,7 +1838,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
layout() { layout() {
// Clear content // Clear content
//----------------- //-----------------
this.removeChild(this.content) this.removeChild(this.content)
@ -1874,18 +1923,17 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
layoutInnerContent() { layoutInnerContent() {
for (let child of this.content.children) { for (let child of this.content.children) {
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
child.y = 0 child.y = 0
break break
case 'middle': case 'middle':
child.y = this.content.height / 2 - child.height / 2 child.y = this.content.height / 2 - child.height / 2
break break
case 'bottom': case 'bottom':
child.y = this.content.height - child.height child.y = this.content.height - child.height
break break
} }
} }
@ -1900,29 +1948,30 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
layoutContent() { layoutContent() {
switch (this.opts.align) { switch (this.opts.align) {
case 'left': case 'left':
this.content.x = this.opts.padding this.content.x = this.opts.padding
break break
case 'center': case 'center':
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._width - this.opts.padding - this.content.width this.content.x =
break this._width - this.opts.padding - this.content.width
break
} }
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
this.content.y = this.opts.padding this.content.y = this.opts.padding
break break
case 'middle': case 'middle':
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._height - this.opts.padding - this.content.height this.content.y =
break this._height - this.opts.padding - this.content.height
break
} }
return this return this
@ -1935,16 +1984,32 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
draw() { draw() {
this.button.clear() this.button.clear()
if (this.active) { if (this.active) {
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) this.button.lineStyle(
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else { } else {
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.button.lineStyle(
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(0, 0, this._width, this._height, this.opts.radius) this.button.drawRoundedRect(
0,
0,
this._width,
this._height,
this.opts.radius
)
this.button.endFill() this.button.endFill()
return this return this
@ -1959,7 +2024,6 @@ export default class Button extends PIXI.Container {
return this._active return this._active
} }
set active(value) { set active(value) {
this._active = value this._active = value
if (this._active) { if (this._active) {
@ -1984,18 +2048,17 @@ export default class Button extends PIXI.Container {
return this._disabled return this._disabled
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
if (this._disabled) { if (this._disabled) {
this.button.interactive = false this.button.interactive = false
this.button.buttonMode = false this.button.buttonMode = false
this.button.alpha = .5 this.button.alpha = 0.5
if (this.icon) { if (this.icon) {
this.icon.alpha = .5 this.icon.alpha = 0.5
} }
if (this.text) { if (this.text) {
this.text.alpha = .5 this.text.alpha = 0.5
} }
} else { } else {
this.button.interactive = true this.button.interactive = true
@ -2016,7 +2079,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
show() { show() {
this.opts.strokeAlpha = 1 this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1 this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1 this.opts.fillAlpha = 1
@ -2033,7 +2095,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
hide() { hide() {
this.opts.strokeAlpha = 0 this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0 this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0 this.opts.fillAlpha = 0
@ -2053,7 +2114,6 @@ export default class Button extends PIXI.Container {
* @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject. * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
*/ */
loadIcon(icon, color) { loadIcon(icon, color) {
let displayObject = null let displayObject = null
if (icon instanceof PIXI.DisplayObject) { if (icon instanceof PIXI.DisplayObject) {
@ -2063,10 +2123,12 @@ export default class Button extends PIXI.Container {
if (this.text) { if (this.text) {
size = this.text.height size = this.text.height
} else if (this.opts.minHeight) { } else if (this.opts.minHeight) {
size = this.opts.minHeight - (2 * this.opts.padding) size = this.opts.minHeight - 2 * this.opts.padding
} }
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png` const url = Button.iconIsUrl(icon)
? 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)
@ -2120,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1464,7 +1464,6 @@ import Button from './button.js'
* @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.Graphics {
/** /**
* Creates an instance of a ButtonGroup. * Creates an instance of a ButtonGroup.
* *
@ -1514,45 +1513,48 @@ export default class ButtonGroup extends PIXI.Graphics {
* @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
buttons: [], x: 0,
minWidth: 44, y: 0,
minHeight: 44, buttons: [],
padding: theme.padding, minWidth: 44,
margin: theme.margin, minHeight: 44,
iconPosition: 'left', // left, right padding: theme.padding,
iconColor: theme.iconColor, margin: theme.margin,
iconColorActive: theme.iconColorActive, iconPosition: 'left', // left, right
fill: theme.fill, iconColor: theme.iconColor,
fillAlpha: theme.fillAlpha, iconColorActive: theme.iconColorActive,
fillActive: theme.fillActive, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.fillActive,
strokeWidth: theme.strokeWidth, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.strokeActive, strokeWidth: theme.strokeWidth,
strokeActiveWidth: theme.strokeActiveWidth, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.strokeActive,
textStyle: theme.textStyle, strokeActiveWidth: theme.strokeActiveWidth,
textStyleActive: theme.textStyleActive, strokeActiveAlpha: theme.strokeActiveAlpha,
style: 'default', textStyle: theme.textStyle,
radius: theme.radius, textStyleActive: theme.textStyleActive,
disabled: null, style: 'default',
type: 'default', // default, checkbox, radio radius: theme.radius,
orientation: 'horizontal', disabled: null,
align: 'center', // left, center, right type: 'default', // default, checkbox, radio
verticalAlign: 'middle', // top, middle, bottom orientation: 'horizontal',
visible: true align: 'center', // left, center, right
}, opts) verticalAlign: 'middle', // top, middle, bottom
visible: true
},
opts
)
this.buttons = [] this.buttons = []
@ -1576,13 +1578,11 @@ 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() {
// Buttons // Buttons
//----------------- //-----------------
let position = 0 let position = 0
for (let it of this.opts.buttons) { for (let it of this.opts.buttons) {
delete it.x delete it.x
delete it.y delete it.y
@ -1604,11 +1604,19 @@ 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 != null ? it.strokeWidth : this.opts.strokeWidth it.strokeWidth =
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
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 != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth it.strokeActiveWidth =
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha it.strokeActiveWidth != null
? 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
@ -1627,7 +1635,10 @@ 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 (this.opts.type === 'radio' &amp;&amp; button.opts.type === 'default') { if (
this.opts.type === 'radio' &amp;&amp;
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
@ -1642,9 +1653,13 @@ export default class ButtonGroup extends PIXI.Graphics {
if (it.tooltip) { if (it.tooltip) {
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({}, {container: this}, it.tooltip) it.tooltip = Object.assign(
{},
{ container: this },
it.tooltip
)
} }
} }
@ -1653,7 +1668,10 @@ export default class ButtonGroup extends PIXI.Graphics {
this.addChild(button) this.addChild(button)
this.buttons.push(button) this.buttons.push(button)
position += (this.opts.orientation === 'horizontal' ? button.width : 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') {
@ -1680,7 +1698,6 @@ 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.
*/ */
layout() { layout() {
// set position // set position
//----------------- //-----------------
this.position.set(this.opts.x, this.opts.y) this.position.set(this.opts.x, this.opts.y)
@ -1699,18 +1716,30 @@ 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.
*/ */
draw() { draw() {
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.clear()
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.lineStyle(
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)
this.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius) this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
// Draw borders // Draw borders
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2) this.lineStyle(
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) {
@ -1721,7 +1750,6 @@ export default class ButtonGroup extends PIXI.Graphics {
} else { } else {
this.lineTo(it.width, it.y) this.lineTo(it.width, it.y)
} }
} }
}) })
@ -1741,10 +1769,9 @@ export default class ButtonGroup extends PIXI.Graphics {
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
this.buttons.forEach(it => it.disabled = value) this.buttons.forEach(it => (it.disabled = value))
} }
/** /**
@ -1754,7 +1781,6 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {number} The maximum with of a button of the button group. * @return {number} The maximum with of a button of the button group.
*/ */
getMaxButtonWidth() { getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width) let widths = this.buttons.map(it => it.width)
return Math.max(...widths) return Math.max(...widths)
@ -1766,7 +1792,6 @@ 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.
*/ */
show() { show() {
this.alpha = 1 this.alpha = 1
return this return this
@ -1778,7 +1803,6 @@ 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.
*/ */
hide() { hide() {
this.alpha = 0 this.alpha = 0
return this return this
@ -1797,7 +1821,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1482,7 +1482,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
*/ */
export default class Flippable extends PIXI.projection.Camera3d { export default class Flippable extends PIXI.projection.Camera3d {
/** /**
* Creates an instance of a Flippable. * Creates an instance of a Flippable.
* *
@ -1508,30 +1507,38 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished. * @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished.
*/ */
constructor(front, back, renderer, opts = {}) { constructor(front, back, renderer, opts = {}) {
super() super()
this.opts = Object.assign({}, { this.opts = Object.assign(
front, {},
back, {
renderer, front,
duration: 1, back,
ease: Power2.easeOut, renderer,
shadow: false, duration: 1,
eulerX: 0, ease: Power2.easeOut,
eulerY: 0, shadow: false,
eulerEase: Power1.easeOut, eulerX: 0,
useBackTransforms: false, eulerY: 0,
transformEase: Power2.easeOut, eulerEase: Power1.easeOut,
focus: 800, useBackTransforms: false,
near: 10, transformEase: Power2.easeOut,
far: 10000, focus: 800,
orthographic: false near: 10,
}, opts) far: 10000,
orthographic: false
},
opts
)
// planes // planes
//-------------------- //--------------------
this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic) this.setPlanes(
this.opts.focus,
this.opts.near,
this.opts.far,
this.opts.orthographic
)
// flipped // flipped
//-------------------- //--------------------
@ -1553,8 +1560,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining. * @return {Flippable} A reference to the flippable for chaining.
*/ */
setup() { setup() {
const scale = 0.5
const scale = .5
// filters // filters
//-------------------- //--------------------
@ -1571,10 +1577,12 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow // shadow
//-------------------- //--------------------
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png')) const shadow = new PIXI.projection.Sprite3d(
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(.98) shadow.scale3d.set(0.98)
shadow.alpha = 0.7 shadow.alpha = 0.7
shadow.filters = [blurFilter] shadow.filters = [blurFilter]
shadow.visible = this.opts.shadow shadow.visible = this.opts.shadow
@ -1593,7 +1601,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY) const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
front.scale.set(-1 / scale, 1 / scale) front.scale.set(-1 / scale, 1 / scale)
front.renderable = true front.renderable = true
front.anchor.set(.5) front.anchor.set(0.5)
inner.addChild(front) inner.addChild(front)
this.objects.front = front this.objects.front = front
@ -1602,7 +1610,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY) const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
back.scale.set(1 / scale, 1 / scale) back.scale.set(1 / scale, 1 / scale)
back.renderable = false back.renderable = false
back.anchor.set(.5) back.anchor.set(0.5)
inner.addChild(back) inner.addChild(back)
this.objects.back = back this.objects.back = back
@ -1618,7 +1626,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
return this._flipped return this._flipped
} }
set flipped(toBack) { set flipped(toBack) {
this._flipped = toBack this._flipped = toBack
// references // references
@ -1664,11 +1671,21 @@ 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 ? toObject.width * 2 : fromObject.width * 2, width: this.opts.useBackTransforms
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2, ? toObject.width * 2
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation, : fromObject.width * 2,
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x, height: this.opts.useBackTransforms
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y ? toObject.height * 2
: 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
@ -1745,20 +1762,24 @@ export default class Flippable extends PIXI.projection.Camera3d {
// camera // camera
//-------------------- //--------------------
new TimelineMax() new TimelineMax()
.to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease}) .to(this.euler, half, {
.to(this.euler, half, {x: 0, y: 0, ease}) x: this.opts.eulerX,
y: this.opts.eulerY,
ease
})
.to(this.euler, half, { x: 0, y: 0, ease })
// shadow // shadow
//-------------------- //--------------------
new TimelineMax() new TimelineMax()
.to(shadow, half, {alpha: .3, ease}) .to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, {alpha: .7, ease}) .to(shadow, half, { alpha: 0.7, ease })
// blurfilter // blurfilter
//-------------------- //--------------------
new TimelineMax() new TimelineMax()
.to(blurFilter, half, {blur: 6, ease}) .to(blurFilter, half, { blur: 6, ease })
.to(blurFilter, half, {blur: .2, ease}) .to(blurFilter, half, { blur: 0.2, ease })
} }
/** /**
@ -1767,13 +1788,13 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining. * @return {Flippable} A reference to the flippable for chaining.
*/ */
layout() { layout() {
const front = this.objects.front const front = this.objects.front
const back = this.objects.back const back = this.objects.back
const shadow = this.objects.shadow const shadow = this.objects.shadow
const inner = this.objects.inner const inner = this.objects.inner
inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2 inner.position3d.z =
-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
@ -1838,13 +1859,25 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {PIXI.Texture} The generated PIXI.Texture. * @return {PIXI.Texture} The generated PIXI.Texture.
*/ */
generateTexture(displayObject) { generateTexture(displayObject) {
// renderTexture // renderTexture
//-------------------- //--------------------
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height) const renderTexture = PIXI.RenderTexture.create(
displayObject.width,
displayObject.height
)
// save position // save position
const transform = [displayObject.x, displayObject.y, displayObject.scale.x, displayObject.scale.y, displayObject.rotation, displayObject.skew.x, displayObject.skew.y, displayObject.pivot.x, displayObject.pivot.y] const transform = [
displayObject.x,
displayObject.y,
displayObject.scale.x,
displayObject.scale.y,
displayObject.rotation,
displayObject.skew.x,
displayObject.skew.y,
displayObject.pivot.x,
displayObject.pivot.y
]
displayObject.position.set(0, 0) displayObject.position.set(0, 0)
displayObject.skew.set(0, 0) displayObject.skew.set(0, 0)
@ -1892,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1438,13 +1438,10 @@
</div> </div>
</header> </header>
<article> <article>
<pre id="source-code" class="prettyprint source linenums"><code> <pre id="source-code" class="prettyprint source linenums"><code>/**
/**
* Defines usefull default text styles. * Defines usefull default text styles.
*/ */
export class FontInfo { export class FontInfo {
static get small() { static get small() {
return app.theme.textStyleSmall return app.theme.textStyleSmall
} }
@ -1464,11 +1461,9 @@ export class FontInfo {
* @class Hypenate * @class Hypenate
*/ */
export class Hypenate { export class Hypenate {
static splitPart(part) { static splitPart(part) {
let parts = part.split('-') let parts = part.split('-')
if (parts.length == 1) if (parts.length == 1) return [part]
return [part]
let result = [] let result = []
let last = parts.pop() let last = parts.pop()
for (let p of parts) { for (let p of parts) {
@ -1479,7 +1474,7 @@ export class Hypenate {
} }
static splitWord(word) { static splitWord(word) {
if (typeof (language) == 'undefined') { if (typeof language == 'undefined') {
if (word.indexOf('-') > -1) { if (word.indexOf('-') > -1) {
return word.split('-') return word.split('-')
} }
@ -1498,11 +1493,11 @@ export class Hypenate {
static abbreviateLine(label, style, width) { static abbreviateLine(label, style, width) {
const pixiStyle = new PIXI.TextStyle(style) const pixiStyle = new PIXI.TextStyle(style)
let metrics = PIXI.TextMetrics.measureText(label, pixiStyle) let metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
while(metrics.width > width &amp;&amp; label.length > 3) { while (metrics.width > width &amp;&amp; label.length > 3) {
label = label.slice(0, label.length-1) label = label.slice(0, label.length - 1)
metrics = PIXI.TextMetrics.measureText(label, pixiStyle) metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
} }
label = label.slice(0, label.length-1) label = label.slice(0, label.length - 1)
return label + '…' return label + '…'
} }
@ -1518,17 +1513,21 @@ export class Hypenate {
if (parts.length == 1) { if (parts.length == 1) {
newWord += '\n' + word + ' ' newWord += '\n' + word + ' '
x = wordMetrics.width + space.width x = wordMetrics.width + space.width
} } else {
else {
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(part, pixiStyle) let partMetrics = PIXI.TextMetrics.measureText(
part,
pixiStyle
)
if (x + partMetrics.width + space.width > width) { if (x + partMetrics.width + space.width > width) {
newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part newWord +=
(first || lastPart.endsWith('-')
? '\n'
: '-\n') + part
x = partMetrics.width x = partMetrics.width
} } else {
else {
newWord += part newWord += part
x += partMetrics.width x += partMetrics.width
} }
@ -1538,8 +1537,7 @@ export class Hypenate {
x += space.width x += space.width
} }
result += newWord + ' ' result += newWord + ' '
} } else {
else {
result += word + ' ' result += word + ' '
x += wordMetrics.width + space.width x += wordMetrics.width + space.width
} }
@ -1571,7 +1569,6 @@ export class Hypenate {
} }
class TextLabel extends PIXI.Text { class TextLabel extends PIXI.Text {
/** /**
*Creates an instance of TextLabel. *Creates an instance of TextLabel.
* @param {string} text - The string that you would like the text to display * @param {string} text - The string that you would like the text to display
@ -1579,8 +1576,13 @@ class TextLabel extends PIXI.Text {
* @param {canvas} * @param {canvas}
* @memberof TextLabel * @memberof TextLabel
*/ */
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) { constructor(
super(text, style, canvas ) text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize this.normFontSize = this.style.fontSize
this.minZoom = minZoom this.minZoom = minZoom
this.maxZoom = maxZoom this.maxZoom = maxZoom
@ -1620,7 +1622,6 @@ class TextLabel extends PIXI.Text {
* @extends {PIXI.Graphics} * @extends {PIXI.Graphics}
*/ */
export class LabeledGraphics extends PIXI.Graphics { export class LabeledGraphics extends PIXI.Graphics {
/** /**
* Creates an instance of LabeledGraphics and defines a local label cache. * Creates an instance of LabeledGraphics and defines a local label cache.
* *
@ -1635,7 +1636,6 @@ export class LabeledGraphics extends PIXI.Graphics {
return new TextLabel(label, fontInfo) return new TextLabel(label, fontInfo)
} }
/** /**
* Main additional method. Ensures that a text object is created that is cached * Main additional method. Ensures that a text object is created that is cached
* under the given key. * under the given key.
@ -1653,11 +1653,9 @@ export class LabeledGraphics extends PIXI.Graphics {
* @memberof LabeledGraphics * @memberof LabeledGraphics
*/ */
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) { ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
if (attrs.maxWidth &amp;&amp; attrs.maxLines == 1) { if (attrs.maxWidth &amp;&amp; attrs.maxLines == 1) {
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth) label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
} } else {
else {
if (attrs.maxWidth) { if (attrs.maxWidth) {
label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth) label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth)
} }
@ -1681,8 +1679,7 @@ export class LabeledGraphics extends PIXI.Graphics {
for (let k in attrs) { for (let k in attrs) {
text[k] = attrs[k] text[k] = attrs[k]
} }
if (label != text.text) if (label != text.text) text.text = label
text.text = label
// We do not follow the flexbox jargon and use align for x and justify for y axis // We do not follow the flexbox jargon and use align for x and justify for y axis
// This deviation is needed to ensure backward compatability // This deviation is needed to ensure backward compatability
switch (attrs.justify || null) { switch (attrs.justify || null) {
@ -1733,17 +1730,30 @@ 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(`\u00A0\n...\n${words.join('\n')}`, pixiStyle) const wordMetrics = PIXI.TextMetrics.measureText(
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths `\u00A0\n...\n${words.join('\n')}`,
const { text: newLastLine } = wordLengths.reduce((data, wordLength, i) => { pixiStyle
if (data.length + wordLength + spaceLength >= wordWrapWidth) { )
return { ...data, length: wordWrapWidth } const [
} spaceLength,
return { dotsLength,
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`, ...wordLengths
length: data.length + wordLength + spaceLength, ] = wordMetrics.lineWidths
}; const { text: newLastLine } = wordLengths.reduce(
}, { text: '', length: dotsLength }) (data, wordLength, i) => {
if (
data.length + wordLength + spaceLength >=
wordWrapWidth
) {
return { ...data, length: wordWrapWidth }
}
return {
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
length: data.length + wordLength + spaceLength
}
},
{ text: '', length: dotsLength }
)
truncatedLines[truncatedLines.length - 1] = `${newLastLine}...` truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`
newText = truncatedLines.join('\n') newText = truncatedLines.join('\n')
} }
@ -1784,7 +1794,6 @@ export class LabeledGraphics extends PIXI.Graphics {
label.destroy() label.destroy()
} }
/** /**
* Ensures that labels are hidden on clear. * Ensures that labels are hidden on clear.
* *
@ -1807,7 +1816,6 @@ export class LabeledGraphics extends PIXI.Graphics {
} }
} }
const labelCache = new Map() const labelCache = new Map()
function getTexture(label, fontInfo = FontInfo.normal) { function getTexture(label, fontInfo = FontInfo.normal) {
@ -1825,7 +1833,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
} }
class SpriteLabel extends PIXI.Sprite { class SpriteLabel extends PIXI.Sprite {
constructor(label, fontInfo) { constructor(label, fontInfo) {
let texture = getTexture(label, fontInfo) let texture = getTexture(label, fontInfo)
super(texture) super(texture)
@ -1845,12 +1852,10 @@ class SpriteLabel extends PIXI.Sprite {
} }
export class BitmapLabeledGraphics extends LabeledGraphics { export class BitmapLabeledGraphics extends LabeledGraphics {
_createText(label, fontInfo) { _createText(label, fontInfo) {
let texture = getTexture(label, fontInfo) let texture = getTexture(label, fontInfo)
return new SpriteLabel(texture) return new SpriteLabel(texture)
} }
} }
</code></pre> </code></pre>
</article> </article>
@ -1865,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1461,7 +1461,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
*/ */
export default class List extends PIXI.Container { export default class List extends PIXI.Container {
/** /**
* Creates an instance of a Flippable. * Creates an instance of a Flippable.
* *
@ -1483,19 +1482,22 @@ export default class List extends PIXI.Container {
* scroll your list. * scroll your list.
*/ */
constructor(items = [], opts = {}) { constructor(items = [], opts = {}) {
super() super()
this.opts = Object.assign({}, { this.opts = Object.assign(
padding: 10, {},
margin: 10, {
orientation: 'vertical', padding: 10,
align: 'left', margin: 10,
verticalAlign: 'middle', orientation: 'vertical',
width: null, align: 'left',
height: null, verticalAlign: 'middle',
app: null width: null,
}, opts) height: null,
app: null
},
opts
)
this.__items = items this.__items = items
this.__dragging = false this.__dragging = false
@ -1512,7 +1514,6 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining. * @return {List} A reference to the list for chaining.
*/ */
setup() { setup() {
// inner container // inner container
//-------------------- //--------------------
const container = new PIXI.Container() const container = new PIXI.Container()
@ -1527,7 +1528,7 @@ export default class List extends PIXI.Container {
// add items // add items
//-------------------- //--------------------
for(let item of this.__items) { for (let item of this.__items) {
container.addChild(item) container.addChild(item)
} }
@ -1547,7 +1548,9 @@ 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 ? this.mask.getBounds() : this.getBounds() const bounds = this.mask
? 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)) {
@ -1571,7 +1574,7 @@ export default class List extends PIXI.Container {
setItems(items) { setItems(items) {
this.container.removeChildren() this.container.removeChildren()
this.__items = items this.__items = items
for(let item of this.__items) { for (let item of this.__items) {
this.container.addChild(item) this.container.addChild(item)
} }
this.layout() this.layout()
@ -1583,14 +1586,12 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining. * @return {List} A reference to the list for chaining.
*/ */
layout() { layout() {
const margin = this.opts.margin const margin = this.opts.margin
let x = margin let x = margin
let y = margin let y = margin
for (let item of this.__items) { for (let item of this.__items) {
item.x = x item.x = x
item.y = y item.y = y
@ -1606,13 +1607,17 @@ 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(it => it.x = margin + this.width / 2 - it.width / 2) this.__items.forEach(
it => (it.x = margin + this.width / 2 - it.width / 2)
)
break break
case 'right': case 'right':
this.__items.forEach(it => it.x = margin + this.width - it.width) this.__items.forEach(
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))
break break
} }
@ -1632,13 +1637,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
this.__items.forEach(it => it.y = margin) this.__items.forEach(it => (it.y = margin))
break break
case 'bottom': case 'bottom':
this.__items.forEach(it => it.y = margin + this.height - it.height) this.__items.forEach(
it => (it.y = margin + this.height - it.height)
)
break break
default: default:
this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2) this.__items.forEach(
it => (it.y = margin + this.height / 2 - it.height / 2)
)
break break
} }
@ -1660,10 +1669,9 @@ export default class List extends PIXI.Container {
* *
*/ */
get innerWidth() { get innerWidth() {
let size = 0 let size = 0
this.__items.forEach(it => size += it.width) this.__items.forEach(it => (size += it.width))
size += this.opts.padding * (this.__items.length - 1) size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin size += 2 * this.opts.margin
@ -1674,10 +1682,9 @@ export default class List extends PIXI.Container {
* *
*/ */
get innerHeight() { get innerHeight() {
let size = 0 let size = 0
this.__items.forEach(it => size += it.height) this.__items.forEach(it => (size += it.height))
size += this.opts.padding * (this.__items.length - 1) size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin size += 2 * this.opts.margin
@ -1690,7 +1697,6 @@ export default class List extends PIXI.Container {
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list. * @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
*/ */
resize(widthOrHeight) { resize(widthOrHeight) {
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
this.opts.width = widthOrHeight this.opts.width = widthOrHeight
} else { } else {
@ -1706,7 +1712,6 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onStart(event) { onStart(event) {
this.__dragging = true this.__dragging = true
this.capture(event) this.capture(event)
@ -1716,8 +1721,8 @@ export default class List extends PIXI.Container {
y: this.container.position.y - event.data.global.y y: this.container.position.y - event.data.global.y
} }
TweenLite.killTweensOf(this.container.position, {x: true, y: true}) TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != "undefined") { if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y') ThrowPropsPlugin.track(this.container.position, 'x,y')
} }
} }
@ -1728,9 +1733,7 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onMove(event) { onMove(event) {
if (this.__dragging) { if (this.__dragging) {
this.capture(event) this.capture(event)
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
@ -1747,7 +1750,6 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onEnd(event) { onEnd(event) {
if (this.__dragging) { if (this.__dragging) {
this.__dragging = false this.__dragging = false
@ -1773,12 +1775,18 @@ export default class List extends PIXI.Container {
} }
} }
if (typeof ThrowPropsPlugin != "undefined") { if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(this.container.position, { ThrowPropsPlugin.to(
throwProps, this.container.position,
ease: Strong.easeOut, {
onComplete: () => ThrowPropsPlugin.untrack(this.container.position) throwProps,
}, .8, .4) ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
} }
} }
} }
@ -1789,21 +1797,26 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onScroll(event) { onScroll(event) {
this.capture(event) this.capture(event)
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
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 (this.container.position.x + this.innerWidth &lt; this.opts.width) { } else if (
this.container.position.x + this.innerWidth &lt;
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 (this.container.position.y + this.innerHeight &lt; this.opts.height) { } else if (
this.container.position.y + this.innerHeight &lt;
this.opts.height
) {
this.container.position.y = this.opts.height - this.innerHeight this.container.position.y = this.opts.height - this.innerHeight
} }
} }
@ -1815,7 +1828,10 @@ 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 = event.data &amp;&amp; event.data.originalEvent ? event.data.originalEvent : event const originalEvent =
event.data &amp;&amp; event.data.originalEvent
? event.data.originalEvent
: event
Events.capturedBy(originalEvent, this) Events.capturedBy(originalEvent, this)
} }
} }
@ -1832,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1439,7 +1439,7 @@
</header> </header>
<article> <article>
<pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js' <pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
import {InteractivePopup} from './popup.js' import { InteractivePopup } from './popup.js'
/** /**
* Class that represents a Message. A message pops up and disappears after a specific amount of time. * Class that represents a Message. A message pops up and disappears after a specific amount of time.
@ -1473,7 +1473,6 @@ import {InteractivePopup} from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
*/ */
export default class Message extends InteractivePopup { export default class Message extends InteractivePopup {
/** /**
* Creates an instance of a Message. * Creates an instance of a Message.
* *
@ -1493,21 +1492,24 @@ export default class Message extends InteractivePopup {
* @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box. * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
app: window.app, {},
closeButton: false, {
minWidth: 280, app: window.app,
minHeight: 100, closeButton: false,
margin: theme.margin, minWidth: 280,
align: 'right', // left, center, right minHeight: 100,
verticalAlign: 'top', // top, middle, bottom margin: theme.margin,
duration: 5, align: 'right', // left, center, right
autoClose: true, verticalAlign: 'top', // top, middle, bottom
closeDuration: theme.fast duration: 5,
}, opts) autoClose: true,
closeDuration: theme.fast
},
opts
)
super(opts) super(opts)
} }
@ -1518,7 +1520,6 @@ export default class Message extends InteractivePopup {
* @return {Message} Returns the message box for chaining. * @return {Message} Returns the message box for chaining.
*/ */
layout() { layout() {
super.layout() super.layout()
// horizontal // horizontal
@ -1527,10 +1528,11 @@ export default class Message extends InteractivePopup {
this.x = this.opts.margin this.x = this.opts.margin
break break
case 'center': case 'center':
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.opts.app.size.width - this.opts.margin - this.width this.x =
this.opts.app.size.width - this.opts.margin - this.width
break break
} }
@ -1540,10 +1542,11 @@ export default class Message extends InteractivePopup {
this.y = this.opts.margin this.y = this.opts.margin
break break
case 'middle': case 'middle':
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.opts.app.size.height - this.opts.margin - this.height this.y =
this.opts.app.size.height - this.opts.margin - this.height
break break
} }
} }
@ -1554,7 +1557,6 @@ export default class Message extends InteractivePopup {
* @private * @private
*/ */
show() { show() {
super.show() super.show()
if (this.opts.autoClose) { if (this.opts.autoClose) {
@ -1577,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1439,7 +1439,7 @@
</header> </header>
<article> <article>
<pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js' <pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
import {InteractivePopup} from './popup.js' import { InteractivePopup } from './popup.js'
/** /**
* Class that represents a PixiJS Modal. * Class that represents a PixiJS Modal.
@ -1468,7 +1468,6 @@ import {InteractivePopup} from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
*/ */
export default class Modal extends PIXI.Container { export default class Modal extends PIXI.Container {
/** /**
* Creates an instance of a Modal. * Creates an instance of a Modal.
* *
@ -1483,20 +1482,23 @@ export default class Modal extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
app: window.app, {
backgroundFill: theme.background, id: PIXI.utils.uid(),
backgroundFillAlpha: .6, app: window.app,
closeOnBackground: true, backgroundFill: theme.background,
visible: true backgroundFillAlpha: 0.6,
}, opts) closeOnBackground: true,
visible: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -1522,7 +1524,6 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
setup() { setup() {
// interaction // interaction
//----------------- //-----------------
this.interactive = true this.interactive = true
@ -1567,14 +1568,16 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
layout() { layout() {
const width = this.opts.app.size.width const width = this.opts.app.size.width
const height = this.opts.app.size.height const height = this.opts.app.size.height
// background // background
//----------------- //-----------------
this.background.clear() this.background.clear()
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha) this.background.beginFill(
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()
@ -1591,7 +1594,10 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
show() { show() {
TweenLite.to(this, this.theme.fast, {alpha: 1, onStart: () => this.visible = true}) TweenLite.to(this, this.theme.fast, {
alpha: 1,
onStart: () => (this.visible = true)
})
return this return this
} }
@ -1602,7 +1608,10 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
hide() { hide() {
TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false}) TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => (this.visible = false)
})
return this return this
} }
@ -1652,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1452,7 +1452,6 @@ import ButtonGroup from './buttongroup.js'
* @extends AbstractPopup * @extends AbstractPopup
*/ */
export class InteractivePopup extends AbstractPopup { export class InteractivePopup extends AbstractPopup {
/** /**
* Creates an instance of an InteractivePopup (only for internal use). * Creates an instance of an InteractivePopup (only for internal use).
* *
@ -1464,13 +1463,16 @@ export class InteractivePopup extends AbstractPopup {
* @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner. * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
opts = Object.assign(
opts = Object.assign({}, { {},
closeOnPopup: false, {
closeButton: true, closeOnPopup: false,
button: null, closeButton: true,
buttonGroup: null button: null,
}, opts) buttonGroup: null
},
opts
)
super(opts) super(opts)
@ -1496,7 +1498,6 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining. * @return {AbstractPopup} A reference to the popup for chaining.
*/ */
setup() { setup() {
super.setup() super.setup()
// interaction // interaction
@ -1512,7 +1513,10 @@ export class InteractivePopup extends AbstractPopup {
// closeButton // closeButton
//----------------- //-----------------
if (this.opts.closeButton) { if (this.opts.closeButton) {
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true) let closeButton = PIXI.Sprite.fromImage(
'../../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
@ -1535,7 +1539,11 @@ export class InteractivePopup extends AbstractPopup {
// maxWidth is set and a closeButton should be displayed // maxWidth is set and a closeButton should be displayed
//----------------- //-----------------
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
const wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) - this.smallPadding - this._closeButton.width const wordWrapWidth =
this.opts.maxWidth -
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) {
@ -1548,9 +1556,19 @@ 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(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.button)) this._buttons = new Button(
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.button
)
)
} else { } else {
this._buttons = new ButtonGroup(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.buttonGroup)) this._buttons = new ButtonGroup(
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.buttonGroup
)
)
} }
this.addChild(this._buttons) this.addChild(this._buttons)
@ -1566,21 +1584,23 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining. * @return {AbstractPopup} A reference to the popup for chaining.
*/ */
layout() { layout() {
super.layout() super.layout()
// closeButton // closeButton
//----------------- //-----------------
if (this.opts.closeButton) { if (this.opts.closeButton) {
this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width this._closeButton.x =
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.wantedWidth - this.opts.padding - this._buttons.width this._buttons.x =
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y =
this.wantedHeight - this.opts.padding - this._buttons.height
} }
return this return this
@ -1596,7 +1616,6 @@ export class InteractivePopup extends AbstractPopup {
* @returns {object} An JavaScript object width the keys width and height. * @returns {object} An JavaScript object width the keys width and height.
*/ */
getInnerSize() { getInnerSize() {
let size = super.getInnerSize() let size = super.getInnerSize()
if (this._closeButton) { if (this._closeButton) {
@ -1604,7 +1623,10 @@ export class InteractivePopup extends AbstractPopup {
} }
if (this._buttons) { if (this._buttons) {
size.width = Math.max(size.width, this._buttons.x + this._buttons.width) size.width = Math.max(
size.width,
this._buttons.x + this._buttons.width
)
size.height += this.innerPadding + this._buttons.height size.height += this.innerPadding + this._buttons.height
} }
@ -1630,7 +1652,6 @@ export class InteractivePopup extends AbstractPopup {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
*/ */
export default class Popup extends InteractivePopup { export default class Popup extends InteractivePopup {
/** /**
* Creates an instance of a Popup. * Creates an instance of a Popup.
* *
@ -1641,12 +1662,15 @@ export default class Popup extends InteractivePopup {
* @param {number} [opts.minHeight=0] - The minimum height of the popup. * @param {number} [opts.minHeight=0] - The minimum height of the popup.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
opts = Object.assign(
opts = Object.assign({}, { {},
closeButton: false, {
minWidth: 0, closeButton: false,
minHeight: 0 minWidth: 0,
}, opts) minHeight: 0
},
opts
)
super(opts) super(opts)
} }
@ -1664,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1468,7 +1468,6 @@ import Popup from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest}
*/ */
export default class PopupMenu extends Popup { export default class PopupMenu extends Popup {
/** /**
* Creates an instance of a PopupMenu. * Creates an instance of a PopupMenu.
* *
@ -1483,15 +1482,18 @@ export default class PopupMenu extends Popup {
* @param {boolean} [opts.closeOnPopup=true] - The opacity of the background. * @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
items: [], {},
margin: theme.margin / 2, {
textStyle: theme.textStyle, items: [],
closeOnPopup: true margin: theme.margin / 2,
}, opts) textStyle: theme.textStyle,
closeOnPopup: true
},
opts
)
super(opts) super(opts)
} }
@ -1503,18 +1505,19 @@ export default class PopupMenu extends Popup {
* @return {PopupMenu} A reference to the popupmenu for chaining. * @return {PopupMenu} A reference to the popupmenu for chaining.
*/ */
setup() { setup() {
// content // content
//----------------- //-----------------
const content = new PIXI.Container() const content = new PIXI.Container()
let y = 0 let y = 0
for (let item of this.opts.items) { for (let item of this.opts.items) {
let object = null let object = null
if (item.label) { if (item.label) {
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle) object = new PIXI.Text(
item.label,
item.textStyle || this.opts.textStyle
)
} else { } else {
object = item.content object = item.content
} }
@ -1523,16 +1526,22 @@ export default class PopupMenu extends Popup {
if (item.action) { if (item.action) {
if (item.disabled) { if (item.disabled) {
object.alpha = .5 object.alpha = 0.5
} else { } else {
object.interactive = true object.interactive = true
object.buttonMode = true object.buttonMode = true
} }
object.on('pointerover', e => { object.on('pointerover', e => {
TweenLite.to(object, this.theme.fast, {alpha: .83, overwrite: 'none'}) TweenLite.to(object, this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
}) })
object.on('pointerout', e => { object.on('pointerout', e => {
TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'}) TweenLite.to(object, this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
}) })
object.on('pointerup', e => { object.on('pointerup', e => {
item.action.call(object, e, object) item.action.call(object, e, object)
@ -1565,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1458,7 +1458,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
*/ */
export default class Progress extends PIXI.Container { export default class Progress extends PIXI.Container {
/** /**
* Creates an instance of a Progress. * Creates an instance of a Progress.
* *
@ -1493,36 +1492,39 @@ export default class Progress extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
app: window.app, {
width: null, id: PIXI.utils.uid(),
height: 2, app: window.app,
margin: 100, width: null,
padding: 0, height: 2,
fill: theme.fill, margin: 100,
fillAlpha: theme.fillAlpha, padding: 0,
fillActive: theme.primaryColor, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.primaryColor,
strokeWidth: 0, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.strokeActive, strokeWidth: 0,
strokeActiveWidth: 0, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.strokeActive,
background: false, strokeActiveWidth: 0,
backgroundFill: theme.background, strokeActiveAlpha: theme.strokeActiveAlpha,
backgroundFillAlpha: 1, background: false,
radius: theme.radius, backgroundFill: theme.background,
destroyOnComplete: true, backgroundFillAlpha: 1,
visible: true radius: theme.radius,
}, opts) destroyOnComplete: true,
visible: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -1552,7 +1554,6 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
setup() { setup() {
// interaction // interaction
//----------------- //-----------------
this.on('added', e => { this.on('added', e => {
@ -1586,7 +1587,6 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
layout() { layout() {
const width = this.opts.app.size.width const width = this.opts.app.size.width
const height = this.opts.app.size.height const height = this.opts.app.size.height
@ -1594,7 +1594,10 @@ 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.opts.backgroundFill, this.opts.backgroundFillAlpha) this.background.beginFill(
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()
} }
@ -1611,7 +1614,6 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
draw() { draw() {
this.bar.clear() this.bar.clear()
this.barActive.clear() this.barActive.clear()
@ -1628,22 +1630,31 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
drawBar() { drawBar() {
const width = this.opts.app.size.width const width = this.opts.app.size.width
const height = this.opts.app.size.height const height = this.opts.app.size.height
this.radius = this.opts.radius this.radius = this.opts.radius
if ((this.radius * 2) > this.opts.height) { if (this.radius * 2 > this.opts.height) {
this.radius = this.opts.height / 2 this.radius = this.opts.height / 2
} }
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.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.bar.lineStyle(
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(0, 0, wantedWidth, wantedHeight, this.radius) this.bar.drawRoundedRect(
0,
0,
wantedWidth,
wantedHeight,
this.radius
)
} else { } else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight) this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
} }
@ -1662,17 +1673,29 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
drawBarActive() { drawBarActive() {
const wantedWidth = this.bar.width - 2 * this.opts.padding
const wantedHeight = this.bar.height - 2 * this.opts.padding
const wantedWidth = this.bar.width - (2 * this.opts.padding) const barActiveWidth = (wantedWidth * this._progress) / 100
const wantedHeight = this.bar.height - (2 * this.opts.padding)
const barActiveWidth = wantedWidth * this._progress / 100 this.barActive.lineStyle(
this.opts.strokeActiveWidth,
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) this.opts.strokeActive,
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) 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(0, 0, barActiveWidth, wantedHeight, this.radius) this.barActive.drawRoundedRect(
0,
0,
barActiveWidth,
wantedHeight,
this.radius
)
} else { } else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight) this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
} }
@ -1691,7 +1714,7 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
show() { show() {
TweenLite.to(this, this.theme.fast, {alpha: 1}) TweenLite.to(this, this.theme.fast, { alpha: 1 })
return this return this
} }
@ -1702,7 +1725,10 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
hide() { hide() {
TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false}) TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => (this.visible = false)
})
return this return this
} }
@ -1716,7 +1742,6 @@ export default class Progress extends PIXI.Container {
return this._progress return this._progress
} }
set progress(value) { set progress(value) {
value = Math.round(value) value = Math.round(value)
if (value &lt; 0) { if (value &lt; 0) {
@ -1734,7 +1759,7 @@ export default class Progress extends PIXI.Container {
if (value === 100 &amp;&amp; this.opts.destroyOnComplete) { if (value === 100 &amp;&amp; this.opts.destroyOnComplete) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => this.destroy({children: true}) onComplete: () => this.destroy({ children: true })
}) })
} }
} }
@ -1754,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1466,7 +1466,6 @@
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport} * @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
*/ */
export default class Scrollview extends Scrollbox { export default class Scrollview extends Scrollbox {
/** /**
* Creates an instance of a Scrollview. * Creates an instance of a Scrollview.
* *
@ -1474,7 +1473,6 @@ export default class Scrollview extends Scrollbox {
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html * @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super(opts) super(opts)
this.opts = opts this.opts = opts
@ -1487,7 +1485,6 @@ export default class Scrollview extends Scrollbox {
* @return {Scrollview} A reference to the Scrollview for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
setup() { setup() {
return this return this
} }
@ -1497,7 +1494,6 @@ export default class Scrollview extends Scrollbox {
* @return {Scrollview} A reference to the Scrollview for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
layout() { layout() {
this.update() this.update()
return this return this
@ -1516,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1491,7 +1491,6 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
*/ */
export default class Slider extends PIXI.Container { export default class Slider extends PIXI.Container {
/** /**
* Creates an instance of a Slider. * Creates an instance of a Slider.
* *
@ -1526,41 +1525,44 @@ export default class Slider extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
width: 250, x: 0,
height: 2, y: 0,
container: null, width: 250,
fill: theme.fill, height: 2,
fillAlpha: theme.fillAlpha, container: null,
stroke: theme.stroke, fill: theme.fill,
strokeWidth: theme.strokeWidth, fillAlpha: theme.fillAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
controlFill: theme.fill, strokeWidth: theme.strokeWidth,
controlFillAlpha: .5, strokeAlpha: theme.strokeAlpha,
controlStroke: theme.primaryColor, controlFill: theme.fill,
controlStrokeWidth: 2, controlFillAlpha: 0.5,
controlStrokeAlpha: theme.strokeAlpha, controlStroke: theme.primaryColor,
controlRadius: 16, controlStrokeWidth: 2,
orientation: 'horizontal', controlStrokeAlpha: theme.strokeAlpha,
min: 0, controlRadius: 16,
max: 100, orientation: 'horizontal',
value: 0, min: 0,
disabled: false, max: 100,
onStart: null, value: 0,
onUpdate: null, disabled: false,
onComplete: null, onStart: null,
tooltip: null, onUpdate: null,
visible: true onComplete: null,
}, opts) tooltip: null,
visible: true
},
opts
)
this.opts.container = this.opts.container || this this.opts.container = this.opts.container || this
@ -1608,15 +1610,18 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
setup() { setup() {
// Container events // Container events
//----------------- //-----------------
const container = this.opts.container const container = this.opts.container
this.on('pointermove', e => { this.on('pointermove', e => {
if (this.control.dragging) { if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x const moveX = this.control.event.data.getLocalPosition(
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius) this.control.parent
).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
@ -1628,8 +1633,16 @@ 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('pointercancel', e => this.onEnd(e), false) container.addEventListener(
container.addEventListener('pointerleave', e => this.onEnd(e), false) 'pointercancel',
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)
@ -1673,16 +1686,16 @@ export default class Slider extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.sliderObj.on('pointerover', e => { this.sliderObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}) })
this.sliderObj.on('pointerout', e => { this.sliderObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1}) TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
}) })
this.sliderObj.on('pointerdown', e => { this.sliderObj.on('pointerdown', e => {
this.sliderObj.pointerdowned = true this.sliderObj.pointerdowned = true
TweenLite.to(this.control, this.theme.fast, {alpha: .7}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
}) })
// Click on the slider bar // Click on the slider bar
@ -1690,8 +1703,10 @@ 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(position.x - this.opts.controlRadius) this.value = this.pixelToValue(
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) position.x - this.opts.controlRadius
)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
} }
}) })
@ -1722,7 +1737,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
layout() { layout() {
// set position // set position
//----------------- //-----------------
this.position.set(this.opts.x, this.opts.y) this.position.set(this.opts.x, this.opts.y)
@ -1741,7 +1755,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
draw() { draw() {
const r = this.radius const r = this.radius
const cr = this.opts.controlRadius const cr = this.opts.controlRadius
const w = this.opts.width const w = this.opts.width
@ -1752,12 +1765,16 @@ 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.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.sliderObj.lineStyle(
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)
this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r) this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r)
this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r) this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r)
this.sliderObj.lineTo(x, y + h) this.sliderObj.lineTo(x, y + h)
this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r) this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r)
@ -1766,10 +1783,20 @@ export default class Slider extends PIXI.Container {
// Draw control // Draw control
this.control.clear() this.control.clear()
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha) this.control.lineStyle(
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha) this.opts.controlStrokeWidth,
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.opts.controlStroke, this.opts.controlStrokeAlpha) this.control.beginFill(
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()
@ -1783,7 +1810,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
onEnd(e) { onEnd(e) {
if (this.control.dragging) { if (this.control.dragging) {
this.control.event = null this.control.event = null
this.control.dragging = false this.control.dragging = false
@ -1808,7 +1834,10 @@ 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 this.opts.width * (value - this.opts.min) / (this.opts.max - this.opts.min) return (
(this.opts.width * (value - this.opts.min)) /
(this.opts.max - this.opts.min)
)
} }
/** /**
@ -1824,7 +1853,10 @@ 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 this.opts.min + ((this.opts.max - this.opts.min) * pixel / this.opts.width) return (
this.opts.min +
((this.opts.max - this.opts.min) * pixel) / this.opts.width
)
} }
/** /**
@ -1845,7 +1877,7 @@ export default class Slider extends PIXI.Container {
const x = this.valueToPixel(value) + this.opts.controlRadius const x = this.valueToPixel(value) + this.opts.controlRadius
TweenLite.to(this.control, this.theme.fast, {x}) TweenLite.to(this.control, this.theme.fast, { x })
} }
/** /**
@ -1857,7 +1889,6 @@ export default class Slider extends PIXI.Container {
return this._disabled return this._disabled
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
if (this._disabled) { if (this._disabled) {
@ -1865,7 +1896,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj.interactive = false this.sliderObj.interactive = false
this.control.interactive = false this.control.interactive = false
this.control.buttonMode = false this.control.buttonMode = false
this.alpha = .5 this.alpha = 0.5
} else { } else {
this.interactive = true this.interactive = true
this.sliderObj.interactive = true this.sliderObj.interactive = true
@ -1881,7 +1912,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
show() { show() {
this.opts.strokeAlpha = 1 this.opts.strokeAlpha = 1
this.opts.fillAlpha = 1 this.opts.fillAlpha = 1
this.opts.controlStrokeAlpha = 1 this.opts.controlStrokeAlpha = 1
@ -1898,7 +1928,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
hide() { hide() {
this.opts.strokeAlpha = 0 this.opts.strokeAlpha = 0
this.opts.fillAlpha = 0 this.opts.fillAlpha = 0
this.opts.controlStrokeAlpha = 0 this.opts.controlStrokeAlpha = 0
@ -1922,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1499,7 +1499,6 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
*/ */
export default class Switch extends PIXI.Container { export default class Switch extends PIXI.Container {
/** /**
* Creates an instance of a Switch. * Creates an instance of a Switch.
* *
@ -1546,52 +1545,57 @@ export default class Switch extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
width: 44, x: 0,
height: 28, y: 0,
fill: theme.fill, width: 44,
fillAlpha: theme.fillAlpha, height: 28,
fillActive: theme.primaryColor, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.primaryColor,
strokeWidth: theme.strokeWidth, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.primaryColor, strokeWidth: theme.strokeWidth,
strokeActiveWidth: theme.strokeActiveWidth, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.primaryColor,
controlFill: theme.stroke, strokeActiveWidth: theme.strokeActiveWidth,
controlFillAlpha: theme.strokeAlpha, strokeActiveAlpha: theme.strokeActiveAlpha,
controlFillActive: theme.stroke, controlFill: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha, controlFillAlpha: theme.strokeAlpha,
controlStroke: theme.stroke, controlFillActive: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8, controlFillActiveAlpha: theme.strokeAlpha,
controlStrokeAlpha: theme.strokeAlpha, controlStroke: theme.stroke,
controlStrokeActive: theme.stroke, controlStrokeWidth: theme.strokeWidth * 0.8,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8, controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActiveAlpha: theme.strokeActiveAlpha, controlStrokeActive: theme.stroke,
duration: theme.fast, controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
durationActive: theme.fast, controlStrokeActiveAlpha: theme.strokeActiveAlpha,
disabled: false, duration: theme.fast,
active: false, durationActive: theme.fast,
action: null, disabled: false,
actionActive: null, active: false,
beforeAction: null, action: null,
afterAction: null, actionActive: null,
tooltip: null, beforeAction: null,
visible: true afterAction: null,
}, opts) tooltip: null,
visible: true
},
opts
)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2) this.opts.controlRadius =
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation // Validation
//----------------- //-----------------
@ -1645,7 +1649,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
setup() { setup() {
// Switch // Switch
//----------------- //-----------------
let switchObj = new PIXI.Graphics() let switchObj = new PIXI.Graphics()
@ -1668,19 +1671,18 @@ export default class Switch extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.switchObj.on('pointerover', e => { this.switchObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}) })
this.switchObj.on('pointerout', e => { this.switchObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1}) TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
}) })
this.switchObj.on('pointerdown', e => { this.switchObj.on('pointerdown', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .7}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
}) })
this.switchObj.on('pointerup', e => { this.switchObj.on('pointerup', e => {
if (this.opts.beforeAction) { if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this) this.opts.beforeAction.call(this, e, this)
} }
@ -1697,7 +1699,7 @@ export default class Switch extends PIXI.Container {
} }
} }
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
if (this.opts.afterAction) { if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this) this.opts.afterAction.call(this, e, this)
@ -1735,7 +1737,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
layout() { layout() {
// set position // set position
//----------------- //-----------------
this.position.set(this.opts.x, this.opts.y) this.position.set(this.opts.x, this.opts.y)
@ -1754,20 +1755,42 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
draw() { draw() {
this.switchObj.clear() this.switchObj.clear()
if (this.active) { if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) this.switchObj.lineStyle(
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else { } else {
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.switchObj.lineStyle(
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.opts.width, 0, this.opts.width, this.radius, this.radius) this.switchObj.arcTo(
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.opts.width,
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius) 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.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height) this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius) this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius) this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
@ -1776,12 +1799,26 @@ export default class Switch extends PIXI.Container {
// Draw control // Draw control
this.control.clear() this.control.clear()
if (this.active) { if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha) this.control.lineStyle(
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha) this.opts.controlStrokeActiveWidth,
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
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.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha) this.control.lineStyle(
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha) this.opts.controlStrokeWidth,
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()
@ -1796,23 +1833,48 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
drawAnimated() { drawAnimated() {
this.switchObj.clear() this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha) this.switchObj.lineStyle(
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha) this.tempAnimated.strokeWidth,
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.opts.width, 0, this.opts.width, this.radius, this.radius) this.switchObj.arcTo(
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.opts.width,
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius) 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.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height) this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius) this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius) this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill() this.switchObj.endFill()
this.control.clear() this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha) this.control.lineStyle(
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha) this.tempAnimated.controlStrokeWidth,
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
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()
@ -1829,12 +1891,10 @@ export default class Switch extends PIXI.Container {
} }
set active(value) { set active(value) {
this._active = value this._active = value
if (this._active) { if (this._active) {
TweenLite.to(this.control, this.opts.duration, { x: this.xActive })
TweenLite.to(this.control, this.opts.duration, {x: this.xActive})
TweenLite.to(this.tempAnimated, this.opts.duration, { TweenLite.to(this.tempAnimated, this.opts.duration, {
colorProps: { colorProps: {
fill: this.opts.fillActive, fill: this.opts.fillActive,
@ -1853,10 +1913,10 @@ export default class Switch extends PIXI.Container {
onUpdate: () => this.drawAnimated(), onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw() onComplete: () => this.draw()
}) })
} else { } else {
TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive}) TweenLite.to(this.control, this.opts.durationActive, {
x: this.xInactive
})
TweenLite.to(this.tempAnimated, this.opts.durationActive, { TweenLite.to(this.tempAnimated, this.opts.durationActive, {
colorProps: { colorProps: {
fill: this.opts.fill, fill: this.opts.fill,
@ -1888,14 +1948,13 @@ export default class Switch extends PIXI.Container {
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
if (this._disabled) { if (this._disabled) {
this.switchObj.interactive = false this.switchObj.interactive = false
this.switchObj.buttonMode = false this.switchObj.buttonMode = false
this.switchObj.alpha = .5 this.switchObj.alpha = 0.5
this.control.alpha = .5 this.control.alpha = 0.5
} else { } else {
this.switchObj.interactive = true this.switchObj.interactive = true
this.switchObj.buttonMode = true this.switchObj.buttonMode = true
@ -1910,7 +1969,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
show() { show() {
this.opts.strokeAlpha = 1 this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1 this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1 this.opts.fillAlpha = 1
@ -1931,7 +1989,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
hide() { hide() {
this.opts.strokeAlpha = 0 this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0 this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0 this.opts.fillAlpha = 0
@ -1959,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1471,7 +1471,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export default class Theme { export default class Theme {
/** /**
* Creates an instance of a Theme. * Creates an instance of a Theme.
* *
@ -1521,52 +1520,86 @@ export default class Theme {
* is used for large actived text. * is used for large actived text.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const colorPrimary =
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue this.opts = Object.assign(
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black {},
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white {
margin: 12,
this.opts = Object.assign({}, { padding: 12,
margin: 12, radius: 4,
padding: 12, fast: 0.25,
radius: 4, normal: 0.5,
fast: .25, slow: 1,
normal: .5, primaryColor: colorPrimary,
slow: 1, color1: color1,
primaryColor: colorPrimary, color2: color2,
color1: color1, fill: color1,
color2: color2, fillAlpha: 1,
fill: color1, fillActive: color1,
fillAlpha: 1, fillActiveAlpha: 1,
fillActive: color1, stroke: color2,
fillActiveAlpha: 1, strokeWidth: 0.6,
stroke: color2, strokeAlpha: 1,
strokeWidth: .6, strokeActive: color2,
strokeAlpha: 1, strokeActiveWidth: 0.6,
strokeActive: color2, strokeActiveAlpha: 1,
strokeActiveWidth: .6, iconColor: color2,
strokeActiveAlpha: 1, iconColorActive: colorPrimary,
iconColor: color2, background: color1
iconColorActive: colorPrimary, },
background: color1 opts
}, opts) )
// Set textStyle and variants // Set textStyle and variants
this.opts.textStyle = Object.assign({}, { this.opts.textStyle = Object.assign(
fontFamily: '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default', {},
fontWeight: '500', {
fontSize: 18, fontFamily:
fill: color2, '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
stroke: color1, fontWeight: '500',
strokeThickness: 0, fontSize: 18,
miterLimit: 1, fill: color2,
lineJoin: 'round' stroke: color1,
}, this.opts.textStyle) strokeThickness: 0,
this.opts.textStyleSmall = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize - 3}, this.opts.textStyleSmall) miterLimit: 1,
this.opts.textStyleLarge = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize + 3}, this.opts.textStyleLarge) lineJoin: 'round'
this.opts.textStyleActive = Object.assign({}, this.opts.textStyle, {fill: this.opts.primaryColor}, this.opts.textStyleActive) },
this.opts.textStyleSmallActive = Object.assign({}, this.opts.textStyleSmall, {fill: this.opts.primaryColor}, this.opts.textStyleSmallActive) this.opts.textStyle
this.opts.textStyleLargeActive = Object.assign({}, this.opts.textStyleLarge, {fill: this.opts.primaryColor}, this.opts.textStyleLargeActive) )
this.opts.textStyleSmall = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize - 3 },
this.opts.textStyleSmall
)
this.opts.textStyleLarge = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize + 3 },
this.opts.textStyleLarge
)
this.opts.textStyleActive = Object.assign(
{},
this.opts.textStyle,
{ fill: this.opts.primaryColor },
this.opts.textStyleActive
)
this.opts.textStyleSmallActive = Object.assign(
{},
this.opts.textStyleSmall,
{ fill: this.opts.primaryColor },
this.opts.textStyleSmallActive
)
this.opts.textStyleLargeActive = Object.assign(
{},
this.opts.textStyleLarge,
{ fill: this.opts.primaryColor },
this.opts.textStyleLargeActive
)
Object.assign(this, this.opts) Object.assign(this, this.opts)
} }
@ -1579,7 +1612,6 @@ export default class Theme {
* @return {Theme} Returns a newly created Theme object. * @return {Theme} Returns a newly created Theme object.
*/ */
static fromString(theme) { static fromString(theme) {
if (theme &amp;&amp; typeof theme === 'object') { if (theme &amp;&amp; typeof theme === 'object') {
return theme return theme
} }
@ -1611,9 +1643,7 @@ export default class Theme {
* @extends Theme * @extends Theme
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export class ThemeDark extends Theme { export class ThemeDark extends Theme {}
}
/** /**
* Class that represents a PixiJS ThemeLight. * Class that represents a PixiJS ThemeLight.
@ -1633,15 +1663,13 @@ export class ThemeDark extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export class ThemeLight extends Theme { export class ThemeLight extends Theme {
/** /**
* Creates an instance of a ThemeLight. * Creates an instance of a ThemeLight.
* *
* @constructor * @constructor
*/ */
constructor() { constructor() {
super({ color1: 0xf6f6f6, color2: 0x282828 })
super({color1: 0xf6f6f6, color2: 0x282828})
} }
} }
@ -1663,15 +1691,13 @@ export class ThemeLight extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export class ThemeRed extends Theme { export class ThemeRed extends Theme {
/** /**
* Creates an instance of a ThemeRed. * Creates an instance of a ThemeRed.
* *
* @constructor * @constructor
*/ */
constructor() { constructor() {
super({ primaryColor: 0xd92f31 })
super({primaryColor: 0xd92f31})
} }
} }
</code></pre> </code></pre>
@ -1687,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1469,7 +1469,6 @@ import AbstractPopup from './abstractpopup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest}
*/ */
export default class Tooltip extends AbstractPopup { export default class Tooltip extends AbstractPopup {
/** /**
* Creates an instance of a Tooltip. * Creates an instance of a Tooltip.
* *
@ -1485,19 +1484,22 @@ export default class Tooltip extends AbstractPopup {
* @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened. * @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
minWidth: 0, {},
minHeight: 0, {
padding: theme.padding / 2, minWidth: 0,
object: null, minHeight: 0,
container: null, padding: theme.padding / 2,
offsetLeft: 8, object: null,
offsetTop: -8, container: null,
delay: 0 offsetLeft: 8,
}, opts) offsetTop: -8,
delay: 0
},
opts
)
opts.container = opts.container || opts.object opts.container = opts.container || opts.object
@ -1519,7 +1521,6 @@ export default class Tooltip extends AbstractPopup {
* @return {Tooltip} A reference to the tooltip for chaining. * @return {Tooltip} A reference to the tooltip for chaining.
*/ */
setup() { setup() {
super.setup() super.setup()
// bind events this // bind events this
@ -1549,7 +1550,6 @@ export default class Tooltip extends AbstractPopup {
let mouseoverObject = false let mouseoverObject = false
object.on('mouseover', e => { object.on('mouseover', e => {
this.timeout = window.setTimeout(() => { this.timeout = window.setTimeout(() => {
mouseoverObject = true mouseoverObject = true
this.visible = true this.visible = true
@ -1584,7 +1584,6 @@ export default class Tooltip extends AbstractPopup {
* @return {Tooltip} A reference to the tooltip for chaining. * @return {Tooltip} A reference to the tooltip for chaining.
*/ */
setPosition(e) { setPosition(e) {
const position = e.data.getLocalPosition(this.opts.container) const position = e.data.getLocalPosition(this.opts.container)
this.x = position.x + this.opts.offsetLeft this.x = position.x + this.opts.offsetLeft
@ -1606,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1469,7 +1469,6 @@ import Theme from './theme.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
*/ */
export default class Volatile { export default class Volatile {
/** /**
* Creates an instance of a Volatile. * Creates an instance of a Volatile.
* *
@ -1486,21 +1485,24 @@ export default class Volatile {
* @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation? * @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
object: null, {
direction: 'top', // top, right, bottom, left id: PIXI.utils.uid(),
onStart: null, object: null,
onComplete: null, direction: 'top', // top, right, bottom, left
distance: 160, onStart: null,
duration: 1.5, onComplete: null,
ease: Quad.easeOut, distance: 160,
destroyOnComplete: true duration: 1.5,
}, opts) ease: Quad.easeOut,
destroyOnComplete: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -1530,7 +1532,6 @@ export default class Volatile {
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
setup() { setup() {
return this return this
} }
@ -1540,7 +1541,6 @@ export default class Volatile {
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
layout() { layout() {
return this return this
} }
@ -1551,9 +1551,7 @@ export default class Volatile {
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
run() { run() {
for (let object of this.objects) { for (let object of this.objects) {
let x = object.x let x = object.x
let y = object.y let y = object.y
@ -1584,13 +1582,12 @@ export default class Volatile {
} }
}, },
onComplete: () => { onComplete: () => {
if (this.opts.onComplete) { if (this.opts.onComplete) {
this.opts.onComplete.call(object, object) this.opts.onComplete.call(object, object)
} }
if (this.opts.destroyOnComplete) { if (this.opts.destroyOnComplete) {
object.destroy({children: true}) object.destroy({ children: true })
} }
} }
}) })
@ -1612,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

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

@ -1464,7 +1464,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest}
*/ */
export default class UITest { export default class UITest {
/** /**
* Creates an instance of an UITest. * Creates an instance of an UITest.
* *
@ -1478,19 +1477,28 @@ export default class UITest {
* @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action. * @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
this.opts = Object.assign(
this.opts = Object.assign({}, { {},
timeScale: 1, {
eventType: 'auto', timeScale: 1,
debug: false, eventType: 'auto',
defaultInterval: null debug: false,
}, opts) defaultInterval: null
},
opts
)
// timeline // timeline
//-------------------- //--------------------
this._timeline = new TimelineMax(Object.assign({}, { this._timeline = new TimelineMax(
paused: true Object.assign(
}, this.opts)) {},
{
paused: true
},
this.opts
)
)
this._timeline.timeScale(this.opts.timeScale) this._timeline.timeScale(this.opts.timeScale)
// eventType // eventType
@ -1592,91 +1600,118 @@ export default class UITest {
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
*/ */
tap(element, position, timelinePosition, opts = {}) { tap(element, position, timelinePosition, opts = {}) {
// arguments // arguments
//-------------------- //--------------------
[position, timelinePosition, opts] = this.reorderArguments(arguments) ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
this._timelinePositions.push(timelinePosition) this._timelinePositions.push(timelinePosition)
// debug // debug
//-------------------- //--------------------
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts}) if (this.opts.debug)
console.log('tap params', {
element,
position,
timelinePosition,
opts
})
// opts // opts
//-------------------- //--------------------
opts = Object.assign({}, { opts = Object.assign(
onStart: null, {},
onComplete: null, {
eventTypes: this.resolveEvents(['down', 'up']), onStart: null,
eventType: null, onComplete: null,
context: window, eventTypes: this.resolveEvents(['down', 'up']),
bubbles: true, eventType: null,
cancelable: true context: window,
}, opts) bubbles: true,
cancelable: true
},
opts
)
if (opts.eventType) { if (opts.eventType) {
opts.eventTypes = opts.eventType opts.eventTypes = opts.eventType
} }
opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes] opts.eventTypes = Array.isArray(opts.eventTypes)
? opts.eventTypes
: [opts.eventTypes]
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback(position => { this._timeline.addCallback(
position => {
// element
//--------------------
const elem = Util.extractElement(opts.context, element)
// element // position
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) if (position === null) {
const rect = elem.getBoundingClientRect()
position = [rect.width / 2, rect.height / 2]
}
// position // coords
//-------------------- //--------------------
if (position === null) { const coords = Util.extractPosition(position)
const rect = elem.getBoundingClientRect() if (this.opts.debug) console.log('local coords', coords)
position = [rect.width / 2, rect.height / 2]
}
// coords // eventTypes
//-------------------- //--------------------
const coords = Util.extractPosition(position) if (opts.eventTypes.length === 1) {
if (this.opts.debug) console.log('local coords', coords) opts.eventTypes.unshift(null)
}
// eventTypes // event opts
//-------------------- //--------------------
if (opts.eventTypes.length === 1) { const eventOpts = {
opts.eventTypes.unshift(null) bubbles: opts.bubbles,
} cancelable: opts.cancelable
}
// event opts if (opts.eventTypes[0]) {
//-------------------- // create and dispatch event
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable} //--------------------
const eventStart = Event.create(
elem,
coords,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', eventStart)
elem.dispatchEvent(eventStart)
if (opts.eventTypes[0]) { // onStart
//--------------------
if (opts.onStart) {
opts.onStart.call(this, eventStart)
}
}
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts) const eventComplete = Event.create(
if (this.opts.debug) console.log('dispatch event', eventStart) elem,
elem.dispatchEvent(eventStart) coords,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', eventComplete)
elem.dispatchEvent(eventComplete)
// onStart // onComplete
//-------------------- //--------------------
if (opts.onStart) { if (opts.onComplete) {
opts.onStart.call(this, eventStart) opts.onComplete.call(this, eventComplete)
} }
} },
timelinePosition,
// create and dispatch event [position]
//-------------------- )
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', eventComplete)
elem.dispatchEvent(eventComplete)
// onComplete
//--------------------
if (opts.onComplete) {
opts.onComplete.call(this, eventComplete)
}
}, timelinePosition, [position])
this._actions++ this._actions++
@ -1702,103 +1737,132 @@ export default class UITest {
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
*/ */
pan(element, position, timelinePosition, opts = {}) { pan(element, position, timelinePosition, opts = {}) {
// arguments // arguments
//-------------------- //--------------------
[position, timelinePosition, opts] = this.reorderArguments(arguments) ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
this._timelinePositions.push(timelinePosition) this._timelinePositions.push(timelinePosition)
// debug // debug
//-------------------- //--------------------
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts}) if (this.opts.debug)
console.log('tap params', {
element,
position,
timelinePosition,
opts
})
// opts // opts
//-------------------- //--------------------
opts = Object.assign({}, { opts = Object.assign(
onStart: null, {},
onUpdate: null, {
onComplete: null, onStart: null,
to: {x: 0, y: 0}, onUpdate: null,
duration: 1, onComplete: null,
ease: Power0.easeNone, to: { x: 0, y: 0 },
eventTypes: this.resolveEvents(['down', 'move', 'up']), duration: 1,
context: window, ease: Power0.easeNone,
bubbles: true, eventTypes: this.resolveEvents(['down', 'move', 'up']),
cancelable: true context: window,
}, opts) bubbles: true,
cancelable: true
},
opts
)
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback(position => { this._timeline.addCallback(
position => {
// element
//--------------------
const elem = Util.extractElement(opts.context, element)
// element // coords
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const from = Util.extractPosition(position)
// coords // event opts
//-------------------- //--------------------
const from = Util.extractPosition(position) const eventOpts = {
bubbles: opts.bubbles,
cancelable: opts.cancelable
}
// event opts const gsOpts = {
//-------------------- ease: opts.ease,
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable} onStart: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
const gsOpts = { // onStart
ease: opts.ease, //--------------------
onStart: () => { if (opts.onStart) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// create and dispatch event // onUpdate
//-------------------- //--------------------
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts) if (opts.onUpdate) {
if (this.opts.debug) console.log('dispatch event', event) opts.onUpdate.call(this, event)
elem.dispatchEvent(event) }
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart // onComplete
//-------------------- //--------------------
if (opts.onStart) { if (opts.onComplete) {
opts.onStart.call(this, event) opts.onComplete.call(this, event)
} }
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (opts.onUpdate) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (opts.onComplete) {
opts.onComplete.call(this, event)
} }
} }
}
// to // to
//-------------------- //--------------------
const object = Util.extractTo(opts) const object = Util.extractTo(opts)
Object.assign(gsOpts, object) Object.assign(gsOpts, object)
// drag animation // drag animation
//-------------------- //--------------------
TweenLite.to(from, opts.duration, gsOpts) TweenLite.to(from, opts.duration, gsOpts)
},
}, timelinePosition, [position]) timelinePosition,
[position]
)
this._actions++ this._actions++
@ -1827,144 +1891,183 @@ export default class UITest {
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
*/ */
pinch(element, position, timelinePosition, opts = {}) { pinch(element, position, timelinePosition, opts = {}) {
// arguments // arguments
//-------------------- //--------------------
[position, timelinePosition, opts] = this.reorderArguments(arguments) ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
this._timelinePositions.push(timelinePosition) this._timelinePositions.push(timelinePosition)
// debug // debug
//-------------------- //--------------------
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts}) if (this.opts.debug)
console.log('tap params', {
element,
position,
timelinePosition,
opts
})
// opts // opts
//-------------------- //--------------------
opts = Object.assign({}, { opts = Object.assign(
onStart: null, {},
onUpdate: null, {
onComplete: null, onStart: null,
doubleCallbacks: false, onUpdate: null,
duration: 1, onComplete: null,
distance: 100, doubleCallbacks: false,
to: null, duration: 1,
bezier: null, distance: 100,
ease: Power0.easeNone, to: null,
eventTypes: this.resolveEvents(['down', 'move', 'up']), bezier: null,
context: window, ease: Power0.easeNone,
bubbles: true, eventTypes: this.resolveEvents(['down', 'move', 'up']),
cancelable: true context: window,
}, opts) bubbles: true,
cancelable: true
},
opts
)
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback(position => { this._timeline.addCallback(
position => {
// element // element
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const elem = Util.extractElement(opts.context, element)
// from
//--------------------
let from1 = null
let from2 = null
if (Array.isArray(position) &amp;&amp; !Util.isNumber(position[0])) {
from1 = Util.extractPosition(position[0])
from2 = Util.extractPosition(position[1])
} else {
from1 = Util.extractPosition(position)
from2 = {x: from1.x, y: from1.y}
}
// to
//--------------------
let gsOpts1 = {}
let gsOpts2 = {}
if (opts.to || opts.bezier) {
[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
} else {
const distance = opts.distance != null ? opts.distance : 100
gsOpts1.x = from1.x - distance / 2
gsOpts1.y = from1.y
gsOpts2.x = from2.x + distance / 2
gsOpts2.y = from2.y
}
// pointers
//--------------------
const pointers = new Map()
pointers.set(0, {element: from1, gsOpts: gsOpts1})
pointers.set(1, {element: from2, gsOpts: gsOpts2})
// loop
//--------------------
pointers.forEach((value, key) => {
// from // from
//-------------------- //--------------------
const from = value.element let from1 = null
let from2 = null
// event opts if (Array.isArray(position) &amp;&amp; !Util.isNumber(position[0])) {
//-------------------- from1 = Util.extractPosition(position[0])
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable, pointerId: key, isPrimary: key === 0} from2 = Util.extractPosition(position[1])
} else {
const gsOpts = { from1 = Util.extractPosition(position)
ease: opts.ease, from2 = { x: from1.x, y: from1.y }
onStart: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart
//--------------------
if (opts.onStart &amp;&amp; (opts.doubleCallbacks || key === 0)) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (opts.onUpdate &amp;&amp; (opts.doubleCallbacks || key === 0)) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (opts.onComplete &amp;&amp; (opts.doubleCallbacks || key === 0)) {
opts.onComplete.call(this, event)
}
}
} }
// to // to
//-------------------- //--------------------
Object.assign(gsOpts, value.gsOpts) let gsOpts1 = {}
let gsOpts2 = {}
// drag animation if (opts.to || opts.bezier) {
;[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
} else {
const distance = opts.distance != null ? opts.distance : 100
gsOpts1.x = from1.x - distance / 2
gsOpts1.y = from1.y
gsOpts2.x = from2.x + distance / 2
gsOpts2.y = from2.y
}
// pointers
//-------------------- //--------------------
TweenLite.to(from, opts.duration, gsOpts) const pointers = new Map()
}) pointers.set(0, { element: from1, gsOpts: gsOpts1 })
pointers.set(1, { element: from2, gsOpts: gsOpts2 })
}, timelinePosition, [position]) // loop
//--------------------
pointers.forEach((value, key) => {
// from
//--------------------
const from = value.element
// event opts
//--------------------
const eventOpts = {
bubbles: opts.bubbles,
cancelable: opts.cancelable,
pointerId: key,
isPrimary: key === 0
}
const gsOpts = {
ease: opts.ease,
onStart: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart
//--------------------
if (
opts.onStart &amp;&amp;
(opts.doubleCallbacks || key === 0)
) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (
opts.onUpdate &amp;&amp;
(opts.doubleCallbacks || key === 0)
) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (
opts.onComplete &amp;&amp;
(opts.doubleCallbacks || key === 0)
) {
opts.onComplete.call(this, event)
}
}
}
// to
//--------------------
Object.assign(gsOpts, value.gsOpts)
// drag animation
//--------------------
TweenLite.to(from, opts.duration, gsOpts)
})
},
timelinePosition,
[position]
)
this._actions++ this._actions++
@ -2015,7 +2118,6 @@ export default class UITest {
* @returns {array} - Returns an array of the position, the timelinePosition and the opts object. * @returns {array} - Returns an array of the position, the timelinePosition and the opts object.
*/ */
reorderArguments(params) { reorderArguments(params) {
// first parameter // first parameter
//-------------------- //--------------------
const element = params[0] const element = params[0]
@ -2030,7 +2132,11 @@ export default class UITest {
//-------------------- //--------------------
if (Util.isNumber(params[1])) { if (Util.isNumber(params[1])) {
timelinePosition = params[1] timelinePosition = params[1]
} else if (Util.isObject(params[1]) &amp;&amp; !Util.isPixiDisplayObject(params[1]) &amp;&amp; (params[1].x == null || params[1].y == null)) { } else if (
Util.isObject(params[1]) &amp;&amp;
!Util.isPixiDisplayObject(params[1]) &amp;&amp;
(params[1].x == null || params[1].y == null)
) {
opts = params[1] opts = params[1]
} else if (params[1] != null) { } else if (params[1] != null) {
position = params[1] position = params[1]
@ -2058,9 +2164,13 @@ export default class UITest {
if (timelinePosition === null) { if (timelinePosition === null) {
if (this.opts.defaultInterval === null &amp;&amp; this._actions > 1) { if (this.opts.defaultInterval === null &amp;&amp; this._actions > 1) {
throw new Error('No execution time was specified for this action, and a default interval was not set in the class constructor!') throw new Error(
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
)
} }
timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1) timelinePosition =
Math.max(...this._timelinePositions) +
(this.opts.defaultInterval || 1)
} }
if (opts === null) { if (opts === null) {
@ -2077,7 +2187,6 @@ export default class UITest {
* @param {string[]} events - An array of event types. * @param {string[]} events - An array of event types.
*/ */
resolveEvents(events) { resolveEvents(events) {
const data = [] const data = []
if (this.opts.eventType === 'pointer') { if (this.opts.eventType === 'pointer') {
@ -2128,7 +2237,6 @@ export default class UITest {
* @class * @class
*/ */
class Util { class Util {
/** /**
* Resolves the element from a specific context. * Resolves the element from a specific context.
* *
@ -2137,9 +2245,12 @@ 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
} }
@ -2152,10 +2263,9 @@ class Util {
* @return {object} - Returns an object with the keys x and y. * @return {object} - Returns an object with the keys x and y.
*/ */
static extractPosition(object) { static extractPosition(object) {
// event coords // event coords
//-------------------- //--------------------
const position = {x: 0, y: 0} const position = { x: 0, y: 0 }
// get the position // get the position
//-------------------- //--------------------
@ -2185,11 +2295,9 @@ class Util {
* @return {object} - Returns an object with the to or bezier keys. * @return {object} - Returns an object with the to or bezier keys.
*/ */
static extractTo(opts) { static extractTo(opts) {
const object = {} const object = {}
if (opts.bezier) { if (opts.bezier) {
let bezier = null let bezier = null
if (Array.isArray(opts.bezier)) { if (Array.isArray(opts.bezier)) {
@ -2198,7 +2306,9 @@ class Util {
type: 'thru' type: 'thru'
} }
} else { } else {
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it)) opts.bezier.values = opts.bezier.values.map(it =>
Util.extractPosition(it)
)
bezier = opts.bezier bezier = opts.bezier
} }
@ -2220,13 +2330,10 @@ class Util {
* @return {object[]} - Returns an array of objects with the keys x and y. * @return {object[]} - Returns an array of objects with the keys x and y.
*/ */
static extractMultiTo(opts) { static extractMultiTo(opts) {
const objects = [] const objects = []
if (opts.bezier) { if (opts.bezier) {
opts.bezier.forEach(it => { opts.bezier.forEach(it => {
let bezier = null let bezier = null
if (Array.isArray(it)) { if (Array.isArray(it)) {
@ -2243,9 +2350,7 @@ class Util {
bezier bezier
}) })
}) })
} else { } else {
opts.to.forEach(it => { opts.to.forEach(it => {
const to = Util.extractPosition(it) const to = Util.extractPosition(it)
objects.push({ objects.push({
@ -2299,7 +2404,11 @@ class Util {
* @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false. * @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false.
*/ */
static isPixiDisplayObject(object) { static isPixiDisplayObject(object) {
return typeof object.getBounds === 'function' &amp;&amp; typeof object.renderWebGL === 'function' &amp;&amp; typeof object.setTransform === 'function' return (
typeof object.getBounds === 'function' &amp;&amp;
typeof object.renderWebGL === 'function' &amp;&amp;
typeof object.setTransform === 'function'
)
} }
/** /**
@ -2326,7 +2435,6 @@ class Util {
* @class * @class
*/ */
class Event { class Event {
/** /**
* Creates an event object. * Creates an event object.
* *
@ -2336,9 +2444,16 @@ 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(target, position = {x: 0, y: 0}, type = 'pointerup', opts = {}) { static create(
target,
const rect = typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : {x: 0, y: 0} position = { x: 0, y: 0 },
type = 'pointerup',
opts = {}
) {
const rect =
typeof target.getBoundingClientRect === 'function'
? target.getBoundingClientRect()
: { x: 0, y: 0 }
// EventInit // EventInit
const eventOpts = { const eventOpts = {
@ -2395,11 +2510,27 @@ class Event {
} }
if (type.startsWith('pointer')) { if (type.startsWith('pointer')) {
return new PointerEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)) return new PointerEvent(
type,
Object.assign(
{},
eventOpts,
uiEventOpts,
mouseEventOpts,
pointerEventOpts,
opts
)
)
} else if (type.startsWith('touch')) { } else if (type.startsWith('touch')) {
return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)) return new TouchEvent(
type,
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
)
} else { } else {
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)) return new MouseEvent(
type,
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
)
} }
} }
} }
@ -2416,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.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit) 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)
</div> </div>
</footer> </footer>
</div> </div>

25
gulpfile.js
View File

@ -3,6 +3,7 @@ const uglify = require('gulp-uglify')
const rename = require('gulp-rename') const rename = require('gulp-rename')
const concat = require('gulp-concat') const concat = require('gulp-concat')
const replace = require('gulp-replace') const replace = require('gulp-replace')
const prettier = require('gulp-prettier')
function vendors() { function vendors() {
return src( return src(
@ -52,4 +53,28 @@ function preload() {
.pipe(dest('dist', { sourcemaps: false })) .pipe(dest('dist', { sourcemaps: false }))
} }
function prettify() {
return src(
[
'./lib/*.js',
'./lib/card/*.js',
'./lib/pixi/*.js',
'!./lib/bootstrap.babel.js'
],
{
base: './lib'
}
)
.pipe(
prettier({
singleQuote: true,
jsxSingleQuote: true,
tabWidth: 4,
semi: false
})
)
.pipe(dest('./lib'))
}
exports.prettify = prettify
exports.default = parallel(vendors, preload) exports.default = parallel(vendors, preload)

400
lib/bootstrap.babel.js vendored
View File

@ -1,175 +1,275 @@
'use strict'; 'use strict'
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i]
descriptor.enumerable = descriptor.enumerable || false
descriptor.configurable = true
if ('value' in descriptor) descriptor.writable = true
Object.defineProperty(target, descriptor.key, descriptor)
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps)
if (staticProps) defineProperties(Constructor, staticProps)
return Constructor
}
})()
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function')
}
}
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError(
"this hasn't been initialised - super() hasn't been called"
)
}
return call && (typeof call === 'object' || typeof call === 'function')
? call
: self
}
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } function _inherits(subClass, superClass) {
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError(
'Super expression must either be null or a function, not ' +
typeof superClass
)
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
})
if (superClass)
Object.setPrototypeOf
? Object.setPrototypeOf(subClass, superClass)
: (subClass.__proto__ = superClass)
}
var Bootstrap = function (_Object) { var Bootstrap = (function(_Object) {
_inherits(Bootstrap, _Object); _inherits(Bootstrap, _Object)
function Bootstrap() { function Bootstrap() {
_classCallCheck(this, Bootstrap); _classCallCheck(this, Bootstrap)
return _possibleConstructorReturn(this, (Bootstrap.__proto__ || Object.getPrototypeOf(Bootstrap)).apply(this, arguments)); return _possibleConstructorReturn(
this,
(Bootstrap.__proto__ || Object.getPrototypeOf(Bootstrap)).apply(
this,
arguments
)
)
} }
_createClass(Bootstrap, null, [{ _createClass(Bootstrap, null, [
key: 'import', {
value: function _import(src) { key: 'import',
var _this2 = this; value: function _import(src) {
var _this2 = this
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; var callback =
arguments.length > 1 && arguments[1] !== undefined
? arguments[1]
: null
if (src.endsWith('babel.js')) { if (src.endsWith('babel.js')) {
this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js', function () { this.load(
_this2.load(src, null, null); this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
}, null); function() {
} else if (this.isModernSafari || this.isModernChrome) { _this2.load(src, null, null)
this.load(src, callback); },
} else { null
this.load(this.baseUrl + '/3rdparty/systemjs/system.js', function () { )
SystemJS.config(_this2.systemjsConfig); } else if (this.isModernSafari || this.isModernChrome) {
SystemJS.import(src); this.load(src, callback)
}, 'script'); } else {
} this.load(
} this.baseUrl + '/3rdparty/systemjs/system.js',
}, { function() {
key: 'load', SystemJS.config(_this2.systemjsConfig)
value: function load(src, callback) { SystemJS.import(src)
var _this3 = this; },
'script'
var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'module'; )
var script = document.createElement('script');
if (type === 'module') {
script.setAttribute('type', 'module');
script.setAttribute('crossorigin', 'use-credentials');
}
script.onload = function () {
if (callback) {
callback.call(_this3, script);
}
};
script.src = src;
document.head.appendChild(script);
}
}, {
key: 'require',
value: function require(src) {
console.log('Dummy require');
}
}, {
key: 'renderFont',
value: function renderFont() {
var font = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Open Sans';
var _arr = [300, 400, 600, 700, 800];
for (var _i = 0; _i < _arr.length; _i++) {
var weight = _arr[_i];var _arr2 = ['normal', 'italic'];
for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
var style = _arr2[_i2];
var p = document.createElement('p');
p.innerHTML = '.';
document.body.appendChild(p);
p.setAttribute('style', 'font-family: \'' + font + '\'; font-weight: ' + weight + '; font-style: \'' + style + '\'; position: absolute; top: -10000px;');
} }
} }
} },
}, { {
key: 'isSafari', key: 'load',
get: function get() { value: function load(src, callback) {
return (/Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor) var _this3 = this
);
}
}, {
key: 'isModernSafari',
get: function get() {
if (!this.isSafari) return false;
var agent = navigator.appVersion;
var offset = agent.indexOf('Version');
if (offset != -1) {
var version = parseFloat(agent.substring(offset + 8));
return version >= 10.1;
}
return false;
}
}, {
key: 'isChrome',
get: function get() {
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = winNav.userAgent.indexOf('OPR') > -1;
var isIEedge = winNav.userAgent.indexOf('Edge') > -1;
var isIOSChrome = winNav.userAgent.match('CriOS');
if (isIOSChrome) { var type =
return true; arguments.length > 2 && arguments[2] !== undefined
} else if (isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera == false && isIEedge == false) { ? arguments[2]
return true; : 'module'
} else {
return false;
}
}
}, {
key: 'isModernChrome',
get: function get() {
if (!this.isChrome) {
return false;
}
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
var version = raw ? parseInt(raw[2], 10) : false;
return version > 62;
}
}, {
key: 'systemjsConfig',
get: function get() {
var baseUrl = this.baseUrl; var script = document.createElement('script')
if (type === 'module') {
script.setAttribute('type', 'module')
script.setAttribute('crossorigin', 'use-credentials')
}
script.onload = function() {
if (callback) {
callback.call(_this3, script)
}
}
script.src = src
document.head.appendChild(script)
}
},
{
key: 'require',
value: function require(src) {
console.log('Dummy require')
}
},
{
key: 'renderFont',
value: function renderFont() {
var font =
arguments.length > 0 && arguments[0] !== undefined
? arguments[0]
: 'Open Sans'
var _arr = [300, 400, 600, 700, 800]
return { for (var _i = 0; _i < _arr.length; _i++) {
baseURL: baseUrl, var weight = _arr[_i]
map: { var _arr2 = ['normal', 'italic']
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js' for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
}, var style = _arr2[_i2]
transpiler: 'plugin-babel', var p = document.createElement('p')
meta: { p.innerHTML = '.'
'*.js': { document.body.appendChild(p)
authorization: true, p.setAttribute(
babelOptions: { 'style',
es2015: false "font-family: '" +
font +
"'; font-weight: " +
weight +
"; font-style: '" +
style +
"'; position: absolute; top: -10000px;"
)
}
}
}
},
{
key: 'isSafari',
get: function get() {
return (
/Safari/.test(navigator.userAgent) &&
/Apple Computer, Inc/.test(navigator.vendor)
)
}
},
{
key: 'isModernSafari',
get: function get() {
if (!this.isSafari) return false
var agent = navigator.appVersion
var offset = agent.indexOf('Version')
if (offset != -1) {
var version = parseFloat(agent.substring(offset + 8))
return version >= 10.1
}
return false
}
},
{
key: 'isChrome',
get: function get() {
var isChromium = window.chrome
var winNav = window.navigator
var vendorName = winNav.vendor
var isOpera = winNav.userAgent.indexOf('OPR') > -1
var isIEedge = winNav.userAgent.indexOf('Edge') > -1
var isIOSChrome = winNav.userAgent.match('CriOS')
if (isIOSChrome) {
return true
} else if (
isChromium !== null &&
isChromium !== undefined &&
vendorName === 'Google Inc.' &&
isOpera == false &&
isIEedge == false
) {
return true
} else {
return false
}
}
},
{
key: 'isModernChrome',
get: function get() {
if (!this.isChrome) {
return false
}
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
var version = raw ? parseInt(raw[2], 10) : false
return version > 62
}
},
{
key: 'systemjsConfig',
get: function get() {
var baseUrl = this.baseUrl
return {
baseURL: baseUrl,
map: {
'plugin-babel':
baseUrl + '/3rdparty/systemjs/plugin-babel.js',
'systemjs-babel-build':
baseUrl +
'/3rdparty/systemjs/systemjs-babel-browser.js'
},
transpiler: 'plugin-babel',
meta: {
'*.js': {
authorization: true,
babelOptions: {
es2015: false
}
} }
} }
} }
};
}
}, {
key: 'baseUrl',
get: function get() {
var baseUrl = './';
var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
var script = scripts[i];
var src = script.getAttribute('src');
var re = /\/bootstrap(.babel)?\.js$/;
if (re.test(src)) {
baseUrl = src.replace(re, '');
}
} }
},
{
key: 'baseUrl',
get: function get() {
var baseUrl = './'
var scripts = document.getElementsByTagName('script')
return baseUrl; for (var i = 0; i < scripts.length; i++) {
var script = scripts[i]
var src = script.getAttribute('src')
var re = /\/bootstrap(.babel)?\.js$/
if (re.test(src)) {
baseUrl = src.replace(re, '')
}
}
return baseUrl
}
} }
}]); ])
return Bootstrap; return Bootstrap
}(Object); })(Object)
window.Bootstrap = Bootstrap; window.Bootstrap = Bootstrap

69
lib/bootstrap.js vendored
View File

@ -1,13 +1,13 @@
class Bootstrap extends Object { class Bootstrap extends Object {
static get isSafari() { static get isSafari() {
return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor) return (
/Safari/.test(navigator.userAgent) &&
/Apple Computer, Inc/.test(navigator.vendor)
)
} }
static get isModernSafari() { static get isModernSafari() {
if (!this.isSafari) if (!this.isSafari) return false
return false
let agent = navigator.appVersion let agent = navigator.appVersion
let offset = agent.indexOf('Version') let offset = agent.indexOf('Version')
if (offset != -1) { if (offset != -1) {
@ -27,7 +27,13 @@ class Bootstrap extends Object {
if (isIOSChrome) { if (isIOSChrome) {
return true return true
} else if (isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera == false && isIEedge == false) { } else if (
isChromium !== null &&
isChromium !== undefined &&
vendorName === 'Google Inc.' &&
isOpera == false &&
isIEedge == false
) {
return true return true
} else { } else {
return false return false
@ -45,7 +51,6 @@ class Bootstrap extends Object {
} }
static get isFirefox() { static get isFirefox() {
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { if (window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
return true return true
} }
@ -54,7 +59,6 @@ class Bootstrap extends Object {
} }
static get isModernFirefox() { static get isModernFirefox() {
if (!this.isFirefox) { if (!this.isFirefox) {
return false return false
} }
@ -67,26 +71,35 @@ class Bootstrap extends Object {
static import(src, callback = null) { static import(src, callback = null) {
if (src.endsWith('babel.js')) { if (src.endsWith('babel.js')) {
this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js', this.load(
this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
() => { () => {
this.load(src, callback, null) this.load(src, callback, null)
}, },
null) null
} )
else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) { } else if (
this.isModernSafari ||
this.isModernChrome ||
this.isModernFirefox
) {
this.load(src, callback) this.load(src, callback)
} else { } else {
this.load(this.baseUrl + '/3rdparty/systemjs/system.js', () => { this.load(
SystemJS.config(this.systemjsConfig) this.baseUrl + '/3rdparty/systemjs/system.js',
let promise = SystemJS.import(src) () => {
if (promise) { SystemJS.config(this.systemjsConfig)
promise.then(() => { let promise = SystemJS.import(src)
if (callback) { if (promise) {
callback.call(this) promise.then(() => {
} if (callback) {
}) callback.call(this)
} }
}, 'script') })
}
},
'script'
)
} }
} }
@ -110,14 +123,14 @@ class Bootstrap extends Object {
} }
static get systemjsConfig() { static get systemjsConfig() {
const baseUrl = this.baseUrl const baseUrl = this.baseUrl
return { return {
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': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js' 'systemjs-babel-build':
baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
}, },
transpiler: 'plugin-babel', transpiler: 'plugin-babel',
meta: { meta: {
@ -132,7 +145,6 @@ class Bootstrap extends Object {
} }
static get baseUrl() { static get baseUrl() {
let baseUrl = './' let baseUrl = './'
let scripts = document.getElementsByTagName('script') let scripts = document.getElementsByTagName('script')
@ -154,7 +166,10 @@ class Bootstrap extends Object {
let p = document.createElement('p') let p = document.createElement('p')
p.innerHTML = '.' p.innerHTML = '.'
document.body.appendChild(p) document.body.appendChild(p)
p.setAttribute('style', `font-family: '${font}'; font-weight: ${weight}; font-style: '${style}'; position: absolute; top: -10000px;`) p.setAttribute(
'style',
`font-family: '${font}'; font-weight: ${weight}; font-style: '${style}'; position: absolute; top: -10000px;`
)
} }
} }
} }

51
lib/bundle.js
View File

@ -2,7 +2,15 @@ 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 { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js' import {
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'
@ -14,9 +22,44 @@ import { Capabilities, CapabilitiesTests } from './capabilities.js'
import { EventRecorder } from './events.js' import { EventRecorder } from './events.js'
import { FrameContainer, FrameTarget } from './frames.js' import { FrameContainer, FrameTarget } from './frames.js'
import { Inspect } from './inspect.js' import { Inspect } from './inspect.js'
import { PointMap, InteractionPoints, Interaction, IInteractionTarget, InteractionDelta, InteractionMapper, InteractionDelegate, IInteractionMapperTarget } from './interaction.js' import {
import { ITapDelegate, ResizeEvent, DOMScatterContainer, AbstractScatter, DOMScatter, ScatterEvent, BaseEvent } from './scatter.js' PointMap,
import { Cycle, Colors, Elements, Angle, Dates, Points, Polygon, Rect, Sets, Strings, isEmpty, getId, lerp, debounce, randomInt, randomFloat, LowPassFilter } from './utils.js' InteractionPoints,
Interaction,
IInteractionTarget,
InteractionDelta,
InteractionMapper,
InteractionDelegate,
IInteractionMapperTarget
} from './interaction.js'
import {
ITapDelegate,
ResizeEvent,
DOMScatterContainer,
AbstractScatter,
DOMScatter,
ScatterEvent,
BaseEvent
} from './scatter.js'
import {
Cycle,
Colors,
Elements,
Angle,
Dates,
Points,
Polygon,
Rect,
Sets,
Strings,
isEmpty,
getId,
lerp,
debounce,
randomInt,
randomFloat,
LowPassFilter
} from './utils.js'
import UITest from './uitest.js' import UITest from './uitest.js'
import Card from './card/card.js' import Card from './card/card.js'

57
lib/capabilities.js
View File

@ -1,7 +1,6 @@
/** Report capabilities with guaranteed values. /** Report capabilities with guaranteed values.
*/ */
export class Capabilities { export class Capabilities {
/** Returns the browser userAgent. /** Returns the browser userAgent.
@return {string} @return {string}
*/ */
@ -14,7 +13,7 @@ export class Capabilities {
@return {boolean} @return {boolean}
*/ */
static get isMobile() { static get isMobile() {
return (/Mobi/.test(navigator.userAgent)) return /Mobi/.test(navigator.userAgent)
} }
/** Tests whether the app is running on a iOS device. /** Tests whether the app is running on a iOS device.
@ -22,7 +21,7 @@ export class Capabilities {
@return {boolean} @return {boolean}
*/ */
static get isIOS() { static get isIOS() {
return (/iPad|iPhone|iPod/.test(navigator.userAgent)) && !window.MSStream return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
} }
/** Tests whether the app is running in a Safari environment. /** Tests whether the app is running in a Safari environment.
@ -31,7 +30,12 @@ export class Capabilities {
@return {boolean} @return {boolean}
*/ */
static get isSafari() { static get isSafari() {
return navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS') return (
navigator.vendor &&
navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
!navigator.userAgent.match('CriOS')
)
} }
/** /**
@ -40,19 +44,30 @@ export class Capabilities {
* source: https://github.com/cheton/is-electron * source: https://github.com/cheton/is-electron
*/ */
static get isElectron() { static get isElectron() {
// Renderer process // Renderer process
if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') { if (
typeof window !== 'undefined' &&
typeof window.process === 'object' &&
window.process.type === 'renderer'
) {
return true return true
} }
// Main process // Main process
if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) { if (
typeof process !== 'undefined' &&
typeof process.versions === 'object' &&
!!process.versions.electron
) {
return true return true
} }
// Detect the user agent when the `nodeIntegration` option is set to true // Detect the user agent when the `nodeIntegration` option is set to true
if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) { if (
typeof navigator === 'object' &&
typeof navigator.userAgent === 'string' &&
navigator.userAgent.indexOf('Electron') >= 0
) {
return true return true
} }
@ -70,52 +85,56 @@ export class Capabilities {
@return {boolean} @return {boolean}
*/ */
static get isMultiTouchTable() { static get isMultiTouchTable() {
return Capabilities.devicePixelRatio > 2 && Capabilities.isMobile === false && /Windows/i.test(Capabilities.userAgent) return (
Capabilities.devicePixelRatio > 2 &&
Capabilities.isMobile === false &&
/Windows/i.test(Capabilities.userAgent)
)
} }
/** Returns true if mouse events are supported /** Returns true if mouse events are supported
@return {boolean} @return {boolean}
*/ */
static supportsMouseEvents() { static supportsMouseEvents() {
return typeof(window.MouseEvent) != 'undefined' return typeof window.MouseEvent != 'undefined'
} }
/** Returns true if touch events are supported /** Returns true if touch events are supported
@return {boolean} @return {boolean}
*/ */
static supportsTouchEvents() { static supportsTouchEvents() {
return typeof(window.TouchEvent) != 'undefined' return typeof window.TouchEvent != 'undefined'
} }
/** Returns true if pointer events are supported /** Returns true if pointer events are supported
@return {boolean} @return {boolean}
*/ */
static supportsPointerEvents() { static supportsPointerEvents() {
return typeof(window.PointerEvent) != 'undefined' return typeof window.PointerEvent != 'undefined'
} }
/** Returns true if DOM templates are supported /** Returns true if DOM templates are supported
@return {boolean} @return {boolean}
*/ */
static supportsTemplate() { static supportsTemplate() {
return 'content' in document.createElement('template'); return 'content' in document.createElement('template')
} }
} }
/** Basic tests for Capabilities. /** Basic tests for 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) ? 'Confirmed' : 'Not confirmed' document.getElementById('demo').innerHTML = bool
? 'Confirmed'
: 'Not confirmed'
} }
static testPrompt() { static testPrompt() {
let person = prompt('Please enter your name', 'Harry Potter') let person = prompt('Please enter your name', 'Harry Potter')
if (person != null) { if (person != null) {
demo.innerHTML = demo.innerHTML = 'Hello ' + person + '! How are you today?'
'Hello ' + person + '! How are you today?'
} }
} }
@ -130,7 +149,9 @@ export class CapabilitiesTests {
} }
static testMultiTouchTable() { static testMultiTouchTable() {
let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable let value =
'Is the device a multi-touch table? ' +
Capabilities.isMultiTouchTable
multi_touch_table.innerHTML = value multi_touch_table.innerHTML = value
} }

862
lib/card/card.js
View File

File diff suppressed because it is too large Load Diff

79
lib/card/highlight.js
View File

@ -4,13 +4,11 @@
let _HighlightEnabled = true let _HighlightEnabled = true
let _CircleIds = 0 let _CircleIds = 0
/** Helper method to round values with one digit precision */ /** Helper method to round values with one digit precision */
function round(value) { function round(value) {
return Math.round(parseFloat(value) * 10) / 10 return Math.round(parseFloat(value) * 10) / 10
} }
/** /**
* A namespace with static functions to expand and shrink highlighted image regions. * A namespace with static functions to expand and shrink highlighted image regions.
* Assumes an SVG image with the following structure: * Assumes an SVG image with the following structure:
@ -31,7 +29,6 @@ function round(value) {
* @extends {Object} * @extends {Object}
*/ */
export default class Highlight extends Object { export default class Highlight extends Object {
static disableAnimations() { static disableAnimations() {
_HighlightEnabled = false _HighlightEnabled = false
let expanded = document.querySelectorAll('.expanded') let expanded = document.querySelectorAll('.expanded')
@ -64,7 +61,10 @@ export default class Highlight extends Object {
if (circle.classList.length == 0) { if (circle.classList.length == 0) {
circle.removeAttribute('class') circle.removeAttribute('class')
} }
if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) { if (
circle.hasAttribute('id') &&
circle.getAttribute('id').startsWith('@@')
) {
circle.removeAttribute('id') circle.removeAttribute('id')
} }
circle.removeAttribute('data-svg-origin') circle.removeAttribute('data-svg-origin')
@ -79,9 +79,11 @@ export default class Highlight extends Object {
} }
} }
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) { static expand(
if (obj == null) obj,
return { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
) {
if (obj == null) return
//console.log("expand") //console.log("expand")
obj.classList.add('zooming') obj.classList.add('zooming')
TweenLite.to(obj, duration, { TweenLite.to(obj, duration, {
@ -102,8 +104,7 @@ export default class Highlight extends Object {
static shrink(obj, { duration = 0.5, stroke = 2 } = {}) { static shrink(obj, { duration = 0.5, stroke = 2 } = {}) {
//console.log("shrink") //console.log("shrink")
if (obj == null) if (obj == null) return
return
obj.classList.add('zooming') obj.classList.add('zooming')
TweenLite.to(obj, duration, { TweenLite.to(obj, duration, {
scale: 1, scale: 1,
@ -141,7 +142,6 @@ export default class Highlight extends Object {
let circleGroup = circle.parentNode let circleGroup = circle.parentNode
let image = svgRoot.querySelector('image') let image = svgRoot.querySelector('image')
let stroke = parseFloat(circleGroup.getAttribute('stroke-width') || 6) let stroke = parseFloat(circleGroup.getAttribute('stroke-width') || 6)
let defs = svgRoot.querySelector('defs') let defs = svgRoot.querySelector('defs')
@ -161,14 +161,15 @@ export default class Highlight extends Object {
return return
} }
//console.log("animate called while zooming out -> expand") //console.log("animate called while zooming out -> expand")
} } else if (circle.classList.contains('zooming')) {
else if (circle.classList.contains('zooming')) {
//console.log("animate called while zooming in -> shrink") //console.log("animate called while zooming in -> shrink")
this.shrink(circle, { stroke }) this.shrink(circle, { stroke })
this.shrink(maskImage, { stroke }) this.shrink(maskImage, { stroke })
return return
} }
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle') let circles = Array.from(circleGroup.children).filter(
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,11 +189,10 @@ export default class Highlight extends Object {
return false return false
} }
static openHighlight(target, { static openHighlight(
animation = 0.5, target,
scale = 2, { animation = 0.5, scale = 2, onExpanded = null } = {}
onExpanded = null ) {
} = {}) {
if (Highlight._isExpanded(target)) { if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!') console.log('Target is already expanded!')
return return
@ -206,7 +206,10 @@ 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 console.error('Could not find corresponding image element.') } else
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)
@ -215,10 +218,15 @@ export default class Highlight extends Object {
let image = svgRoot.querySelector('image') let image = svgRoot.querySelector('image')
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image }) let [mask, maskImage] = Highlight._getSVGMask(target, {
svgRoot,
image
})
let center = Highlight._calculateCenterRelativeTo(target, image) let center = Highlight._calculateCenterRelativeTo(target, image)
TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` }) TweenLite.set(maskImage, {
transformOrigin: `${center.x}% ${center.y}%`
})
TweenLite.set(target, { transformOrigin: '50% 50%' }) TweenLite.set(target, { transformOrigin: '50% 50%' })
TweenLite.to([target, maskImage], animation, { TweenLite.to([target, maskImage], animation, {
@ -233,8 +241,7 @@ export default class Highlight extends Object {
static toggleHighlight(node) { static toggleHighlight(node) {
if (Highlight._isExpanded(node)) { if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node) Highlight.closeHighlight(node)
} } else {
else {
Highlight.openHighlight(node) Highlight.openHighlight(node)
} }
} }
@ -244,7 +251,12 @@ 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 console.error('Could not bring to front. Either no target or no parent.', target, parent) } else
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 } = {}) {
@ -258,13 +270,15 @@ export default class Highlight extends Object {
let maskImage = svgRoot.getElementById(maskImageId) let maskImage = svgRoot.getElementById(maskImageId)
if (!mask || !maskImage) if (!mask || !maskImage)
[mask, maskImage] = Highlight._createSVGMask(circle, { svgRoot, image, id }) [mask, maskImage] = Highlight._createSVGMask(circle, {
svgRoot,
image,
id
})
return [mask, maskImage] return [mask, maskImage]
} }
/** /**
* Creates an SVG mask for a provided svgElement. * Creates an SVG mask for a provided svgElement.
* *
@ -277,8 +291,10 @@ export default class Highlight extends Object {
* @returns * @returns
* @memberof Highlight * @memberof Highlight
*/ */
static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) { static _createSVGMask(
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')
@ -316,7 +332,6 @@ export default class Highlight extends Object {
let height = bbox.height let height = bbox.height
if (maskImage == null) { if (maskImage == null) {
maskImage = document.createElementNS(svg, 'image') maskImage = document.createElementNS(svg, 'image')
maskImage.style.pointerEvents = 'none' maskImage.style.pointerEvents = 'none'
maskImage.setAttribute('id', maskImageId) maskImage.setAttribute('id', maskImageId)
@ -369,8 +384,7 @@ export default class Highlight extends Object {
} }
static animate(event) { static animate(event) {
if (!_HighlightEnabled) if (!_HighlightEnabled) return
return
event.stopPropagation() event.stopPropagation()
Highlight.animateCircle(event.target) Highlight.animateCircle(event.target)
@ -394,4 +408,3 @@ export default class Highlight extends Object {
} }
Highlight.expandedClass = 'expanded' Highlight.expandedClass = 'expanded'

292
lib/card/plugin.js
View File

@ -1,13 +1,12 @@
export var CardPlugin = CardPlugin || {} export var CardPlugin = CardPlugin || {}
export class CardPluginBase { export class CardPluginBase {
apply(context) { apply(context) {
if (this.verify(context)) { if (this.verify(context)) {
this.append(context) this.append(context)
console.log("Plugin " + this.name + " was verified successfully.") console.log('Plugin ' + this.name + ' was verified successfully.')
return true return true
} else console.error("Could not verify module " + this.name + ".") } else console.error('Could not verify module ' + this.name + '.')
return false return false
} }
@ -32,19 +31,20 @@ export class CardPluginBase {
missing.push(selector) missing.push(selector)
} }
} }
const valid = (missing.length == 0) const valid = missing.length == 0
if (!valid) console.error("Elements were missing: ", missing.join(", ")) if (!valid) console.error('Elements were missing: ', missing.join(', '))
return valid return valid
} }
/** /**
* Appends the Plugin to the context. * Appends the Plugin to the context.
* *
* @memberof CardPlugin * @memberof CardPlugin
*/ */
append(context) { append(context) {
console.error("Call of abstract method CardPlugin.prototype.append(context). Plugins need to overwrite the append method!") console.error(
'Call of abstract method CardPlugin.prototype.append(context). Plugins need to overwrite the append method!'
)
} }
_getVerificationFunctions(context) { _getVerificationFunctions(context) {
@ -56,7 +56,7 @@ export class CardPluginBase {
_verifyContext(context) { _verifyContext(context) {
if (!(context instanceof HTMLElement)) { if (!(context instanceof HTMLElement)) {
console.error("Context is not of type HTML Element.", context) console.error('Context is not of type HTML Element.', context)
return false return false
} else return true } else return true
} }
@ -71,13 +71,18 @@ export class CardPluginBase {
} }
}) })
const valid = (missing.length == 0) const valid = missing.length == 0
if (!valid) console.error("Could not apply module '" + this.name + "'. Following modules are required but were missing: " + missing.join(",")) if (!valid)
else console.log("All requirements were met! Well done!") console.error(
"Could not apply module '" +
this.name +
"'. Following modules are required but were missing: " +
missing.join(',')
)
else console.log('All requirements were met! Well done!')
return valid return valid
} }
_collectAllRequirements() { _collectAllRequirements() {
let requirements = [] let requirements = []
let klass = this.__proto__ let klass = this.__proto__
@ -91,9 +96,6 @@ export class CardPluginBase {
} }
} }
CardPlugin.LightBox = class LightBox extends CardPluginBase { CardPlugin.LightBox = class LightBox extends CardPluginBase {
constructor(className, style = {}) { constructor(className, style = {}) {
super() super()
@ -102,27 +104,30 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
} }
append(context) { append(context) {
let wrapper = document.createElement("div") let wrapper = document.createElement('div')
wrapper.className = this.className wrapper.className = this.className
Object.assign(wrapper.style, { Object.assign(
zIndex: 1000, wrapper.style,
// backgroundColor: "black", {
top: 0, zIndex: 1000,
left: 0, // backgroundColor: "black",
width: "100%", top: 0,
height: "100%" left: 0,
}, this.style, { width: '100%',
display: "none", height: '100%'
position: "absolute", },
}) this.style,
{
display: 'none',
position: 'absolute'
}
)
context.appendChild(wrapper) context.appendChild(wrapper)
} }
} }
/** /**
* The Enlargeable Overlay module allows the user to click on the thumbnail image, * The Enlargeable Overlay module allows the user to click on the thumbnail image,
* and the images gets enlarged inside the card. * and the images gets enlarged inside the card.
@ -131,12 +136,15 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
* @extends {CardPlugin} * @extends {CardPlugin}
*/ */
CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginBase { CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginBase {
constructor(
constructor(wrapperSelector, overlaySelector = null, { wrapperSelector,
zoomAnimationDuration = 0.4, overlaySelector = null,
fadeAnimationDuration = 0.4, {
interactionType = "tap" zoomAnimationDuration = 0.4,
} = {}) { fadeAnimationDuration = 0.4,
interactionType = 'tap'
} = {}
) {
super() super()
this.wrapperSelector = wrapperSelector this.wrapperSelector = wrapperSelector
this.overlaySelector = overlaySelector this.overlaySelector = overlaySelector
@ -147,15 +155,18 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
} }
get require() { get require() {
return [ return [CardPlugin.LightBox]
CardPlugin.LightBox
]
} }
_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)
} }
@ -165,7 +176,6 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
this.setupEnlargeableThumbnail(context, source) this.setupEnlargeableThumbnail(context, source)
} }
/** /**
* Get the preview image. * Get the preview image.
* *
@ -177,26 +187,25 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
* @memberof EnlargeableThumbnail * @memberof EnlargeableThumbnail
*/ */
_retrieveSource(context) { _retrieveSource(context) {
let img = context.querySelector(this.wrapperSelector + " img") let img = context.querySelector(this.wrapperSelector + ' img')
let src = img.getAttribute("src") let src = img.getAttribute('src')
let parts = src.split("/") let parts = src.split('/')
parts.pop() parts.pop()
parts.push(parts[parts.length - 1]) parts.push(parts[parts.length - 1])
let imagePath = parts.join("/") + ".jpg" let imagePath = parts.join('/') + '.jpg'
return imagePath return imagePath
} }
setupEnlargeableThumbnail(context, src) { setupEnlargeableThumbnail(context, src) {
let wrapper = context.querySelector(this.wrapperSelector) let wrapper = context.querySelector(this.wrapperSelector)
let overlay = context.querySelector(this.overlaySelector) let overlay = context.querySelector(this.overlaySelector)
let icon = document.createElement("div") let icon = document.createElement('div')
icon.className = "button corner-button bottom-right icon zoom" icon.className = 'button corner-button bottom-right icon zoom'
wrapper.appendChild(icon) wrapper.appendChild(icon)
Object.assign(wrapper.style, { Object.assign(wrapper.style, {
cursor: "pointer" cursor: 'pointer'
}) })
InteractionMapper.on(this.interactionType, wrapper, () => { InteractionMapper.on(this.interactionType, wrapper, () => {
@ -209,28 +218,28 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
} }
openThumbnailDetail(context, src) { openThumbnailDetail(context, src) {
let overlay = context.querySelector(".img-overlay") let overlay = context.querySelector('.img-overlay')
overlay.innerHTML = "" overlay.innerHTML = ''
let source = context.querySelector(this.wrapperSelector) let source = context.querySelector(this.wrapperSelector)
let sourceStyle = window.getComputedStyle(source) let sourceStyle = window.getComputedStyle(source)
let imageWrapper = source.cloneNode(true) let imageWrapper = source.cloneNode(true)
let image = imageWrapper.querySelector("img") let image = imageWrapper.querySelector('img')
Object.assign(imageWrapper.style, { Object.assign(imageWrapper.style, {
maxWidth: "none", maxWidth: 'none',
maxHeight: "none" maxHeight: 'none'
}) })
Object.assign(image.style, { Object.assign(image.style, {
width: "100%", width: '100%',
height: "100%", height: '100%',
objectFit: "cover" objectFit: 'cover'
}) })
this._replaceIcon(imageWrapper) this._replaceIcon(imageWrapper)
image.onload = () => { image.onload = () => {
let header = context.querySelector("header") let header = context.querySelector('header')
let headerStlye = window.getComputedStyle(header) let headerStlye = window.getComputedStyle(header)
/** /**
@ -242,20 +251,20 @@ 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 = context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop) const maxMinorSize =
context.offsetHeight -
2 * parseInt(headerStlye.paddingTop) -
2 * parseInt(headerStlye.marginTop)
const max = { const max = {
width: context.offsetWidth * maxFillRatio, width: context.offsetWidth * maxFillRatio,
height: context.offsetHeight * maxFillRatio height: context.offsetHeight * maxFillRatio
} }
let majorSide let majorSide
let minorSide let minorSide
const _width = { name: "width", axis: "x" } const _width = { name: 'width', axis: 'x' }
const _height = { name: "height", axis: "y" } const _height = { name: 'height', axis: 'y' }
if (image.naturalHeight > image.naturalWidth) { if (image.naturalHeight > image.naturalWidth) {
majorSide = _height majorSide = _height
minorSide = _width minorSide = _width
@ -268,14 +277,17 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
return string.charAt(0).toUpperCase() + string.slice(1) return string.charAt(0).toUpperCase() + string.slice(1)
} }
function getImageSize(side) { function getImageSize(side) {
return image["natural" + capitalize(side.name)] return image['natural' + capitalize(side.name)]
} }
const majorImageSize = getImageSize(majorSide) const majorImageSize = getImageSize(majorSide)
// const minorImageSize = getImageSize(minorSide) // const minorImageSize = getImageSize(minorSide)
let ratio = getImageSize(minorSide) / getImageSize(majorSide) let ratio = getImageSize(minorSide) / getImageSize(majorSide)
let size = (majorImageSize > max[majorSide.name]) ? max[majorSide.name] : majorImageSize let size =
majorImageSize > max[majorSide.name]
? max[majorSide.name]
: majorImageSize
if (size * ratio > maxMinorSize) { if (size * ratio > maxMinorSize) {
size = maxMinorSize / ratio size = maxMinorSize / ratio
@ -286,8 +298,10 @@ 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,
@ -297,8 +311,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
targetDimensions[majorSide.name] = size targetDimensions[majorSide.name] = size
targetDimensions[minorSide.name] = size * ratio targetDimensions[minorSide.name] = size * ratio
targetOffset[majorSide.axis] = (context["offset" + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2 targetOffset[majorSide.axis] =
targetOffset[minorSide.axis] = (context["offset" + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2 (context['offset' + capitalize(majorSide.name)] -
targetDimensions[majorSide.name]) /
2
targetOffset[minorSide.axis] =
(context['offset' + capitalize(minorSide.name)] -
targetDimensions[minorSide.name]) /
2
overlay.appendChild(imageWrapper) overlay.appendChild(imageWrapper)
@ -307,14 +327,13 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
top: 0, top: 0,
x: position.x, x: position.x,
y: position.y, y: position.y,
position: "absolute", position: 'absolute',
width: parseInt(sourceStyle.width), width: parseInt(sourceStyle.width),
height: parseInt(sourceStyle.height) height: parseInt(sourceStyle.height)
}) })
TweenMax.set(overlay, { TweenMax.set(overlay, {
display: "flex", display: 'flex',
autoAlpha: 0 autoAlpha: 0
}) })
@ -322,7 +341,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
x: targetOffset.x, x: targetOffset.x,
y: targetOffset.y, y: targetOffset.y,
width: targetDimensions.width, width: targetDimensions.width,
height: targetDimensions.height, height: targetDimensions.height
}) })
TweenMax.to(overlay, this.fadeAnimationTime, { TweenMax.to(overlay, this.fadeAnimationTime, {
autoAlpha: 1 autoAlpha: 1
@ -333,35 +352,40 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
} }
_replaceIcon(clone) { _replaceIcon(clone) {
let zoomIcon = clone.querySelector(".icon.zoom") let zoomIcon = clone.querySelector('.icon.zoom')
zoomIcon.classList.remove("zoom") zoomIcon.classList.remove('zoom')
zoomIcon.classList.add("close") zoomIcon.classList.add('close')
} }
getBorderHeight(style) { getBorderHeight(style) {
const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth) const borderWidth =
const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom) parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
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 = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth) const borderWidth =
const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight) parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
const padding =
parseInt(style.paddingLeft) + parseInt(style.paddingRight)
return parseInt(style.width) + borderWidth + padding return parseInt(style.width) + borderWidth + padding
} }
closeThumnailDetail(context) { closeThumnailDetail(context) {
let overlay = context.querySelector(".img-overlay") let overlay = context.querySelector('.img-overlay')
let timeline = new TimelineLite() let timeline = new TimelineLite()
timeline.to(overlay, this.fadeAnimationDuration, { timeline
autoAlpha: 0 .to(overlay, this.fadeAnimationDuration, {
}).set(overlay, { autoAlpha: 0
display: "none" })
}) .set(overlay, {
display: 'none'
})
} }
} }
CardPlugin.Ui = class UiPlugin extends CardPluginBase { CardPlugin.Ui = class UiPlugin extends CardPluginBase {
@ -373,56 +397,52 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase {
_getVerificationFunctions(context) { _getVerificationFunctions(context) {
let arr = super._getVerificationFunctions(context) let arr = super._getVerificationFunctions(context)
let func = [ let func = [this._doesParentExist.bind(this, context, this.parent)]
this._doesParentExist.bind(this, context, this.parent)
]
return arr.concat(func) return arr.concat(func)
} }
_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) console.error("Could not find parent on context.", context, parent) if (!valid)
console.error('Could not find parent on context.', context, parent)
return valid return valid
} }
append(context) { append(context) {
parent = (this.parent == null) ? context : context.querySelector(this.parent).appendChild(container) parent =
let container = document.createElement("div") this.parent == null
? context
: context.querySelector(this.parent).appendChild(container)
let container = document.createElement('div')
container.className = this.className container.className = this.className
parent.appendChild(container) parent.appendChild(container)
} }
} }
CardPlugin.Speech = class SpeechPlugin extends CardPluginBase { CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
constructor(parentSelector, className, interactionType = 'tap') {
constructor(parentSelector, className, interactionType = "tap") {
super() super()
this.className = className this.className = className
this.parentSelector = parentSelector this.parentSelector = parentSelector
this.interactionType = interactionType this.interactionType = interactionType
} }
get require() { get require() {
return [ return [CardPlugin.Ui]
CardPlugin.Ui
]
} }
append(context) { append(context) {
let container = context.querySelector(this.parentSelector) let container = context.querySelector(this.parentSelector)
this.button = document.createElement("div") this.button = document.createElement('div')
this.button.className = "icon button " + this.className this.button.className = 'icon button ' + this.className
container.appendChild(this.button) container.appendChild(this.button)
InteractionMapper.on(this.interactionType, this.button, () => { InteractionMapper.on(this.interactionType, this.button, () => {
let subcard = context.querySelector(".mainview > .subcard") let subcard = context.querySelector('.mainview > .subcard')
let target = (subcard) ? subcard : context let target = subcard ? subcard : context
this.speak(target) this.speak(target)
}) })
} }
@ -433,8 +453,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
} }
_activateButton() { _activateButton() {
if (this.button) if (this.button) this.button.classList.add('active')
this.button.classList.add("active")
} }
_deactivate() { _deactivate() {
@ -442,36 +461,32 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
} }
_deactivateButton() { _deactivateButton() {
if (this.button) if (this.button) this.button.classList.remove('active')
this.button.classList.remove("active")
} }
_isSameNode(node) { _isSameNode(node) {
//console.log(this.currentText, node.innerText) //console.log(this.currentText, node.innerText)
return (this.currentText == node.innerText) return this.currentText == node.innerText
} }
speak(node) { speak(node) {
console.log(this._isSameNode(node)) console.log(this._isSameNode(node))
if (!window.speechSynthesis.speaking) { if (!window.speechSynthesis.speaking) {
console.log("Noone talking!") console.log('Noone talking!')
this._start(node) this._start(node)
} else if (this._isSameNode(node)) { } else if (this._isSameNode(node)) {
console.log("Requested same!") console.log('Requested same!')
this._stop() this._stop()
} else { } else {
console.log("Requested Different!") console.log('Requested Different!')
this._stop() this._stop()
this._start(node) this._start(node)
} }
} }
_disableActive() { _disableActive() {
console.log("disableActive:", this.active) console.log('disableActive:', this.active)
if (this.active) { if (this.active) {
this.active._deactivate() this.active._deactivate()
} }
@ -483,28 +498,40 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
let voices = window.speechSynthesis.getVoices() let voices = window.speechSynthesis.getVoices()
console.log(voices) console.log(voices)
let voice = voices.filter((val) => { let voice = voices.filter(val => {
//console.log(val) //console.log(val)
return val.name == "Microsoft Hedda Desktop - German" return val.name == 'Microsoft Hedda Desktop - German'
})[0] })[0]
//console.log(voice) //console.log(voice)
utterance.voice = voice utterance.voice = voice
console.log("TALK: ", utterance) console.log('TALK: ', utterance)
window.speechSynthesis.speak(utterance) window.speechSynthesis.speak(utterance)
this._activate() this._activate()
window.speechSynthesis.resume() window.speechSynthesis.resume()
utterance.onboundary = () => {
utterance.onboundary = () => { console.log("onboundary", node.innerText); if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) { console.log("text for speech synth changed!", this.currentText, node.innerText); this._stop() } } console.log('onboundary', node.innerText)
utterance.onend = () => console.log("onend", node.innerText) if (
utterance.onerror = () => console.log("onerror", node.innerText) this.currentText.substring(0, 5) !=
utterance.onmark = () => console.log("onmark", node.innerText) node.innerText.substring(0, 5)
utterance.onpause = () => console.log("onpause", node.innerText) ) {
utterance.onresume = () => console.log("onresume", node.innerText) console.log(
utterance.onstart = () => console.log("onstart", node.innerText) 'text for speech synth changed!',
utterance.onerror = () => console.log("onerror", node.innerText) this.currentText,
node.innerText
)
this._stop()
}
}
utterance.onend = () => console.log('onend', node.innerText)
utterance.onerror = () => console.log('onerror', node.innerText)
utterance.onmark = () => console.log('onmark', node.innerText)
utterance.onpause = () => console.log('onpause', node.innerText)
utterance.onresume = () => console.log('onresume', node.innerText)
utterance.onstart = () => console.log('onstart', node.innerText)
utterance.onerror = () => console.log('onerror', node.innerText)
} }
_stop() { _stop() {
@ -517,7 +544,9 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
return this.constructor.active return this.constructor.active
} }
set active(val) { this.constructor.active = val } set active(val) {
this.constructor.active = val
}
get currentText() { get currentText() {
return this.constructor.text return this.constructor.text
@ -526,5 +555,4 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
set currentText(val) { set currentText(val) {
this.constructor.text = val this.constructor.text = val
} }
} }

70
lib/card/scatter.js
View File

@ -6,8 +6,6 @@ import Card from './card.js'
* @class ScatterCard * @class ScatterCard
*/ */
export default class ScatterCard extends Card { export default class ScatterCard extends Card {
/** /**
* TODO: Find a more suitable name. * TODO: Find a more suitable name.
* Adjusts the HTML to work in the new context. * Adjusts the HTML to work in the new context.
@ -19,32 +17,27 @@ export default class ScatterCard extends Card {
* @param {*} [opts={}] * @param {*} [opts={}]
* @memberof Card * @memberof Card
*/ */
static setup(context, htmlString, { static setup(context, htmlString, { basePath = './', modules = [] } = {}) {
basePath = "./", context.classList.add('info-card')
modules = []
} = {}) {
context.classList.add("info-card")
this.relativePath = basePath this.relativePath = basePath
htmlString = this._adjustRelativeLinks(htmlString) htmlString = this._adjustRelativeLinks(htmlString)
let parser = new DOMParser() let parser = new DOMParser()
let html = parser.parseFromString(htmlString, "text/html") let html = parser.parseFromString(htmlString, 'text/html')
/** /**
* Conflicts with the FindTarget method of the Abstract scatter. * Conflicts with the FindTarget method of the Abstract scatter.
*/ */
this._replaceAttributes(html, "onclick", this._replaceCallback) this._replaceAttributes(html, 'onclick', this._replaceCallback)
let content = html.querySelector('.mainview')
let content = html.querySelector(".mainview")
context.appendChild(content) context.appendChild(content)
super.setup(context, modules) super.setup(context, modules)
return context return context
} }
/** /**
* Appends a close listener to the scatter element. * Appends a close listener to the scatter element.
* *
@ -59,7 +52,6 @@ export default class ScatterCard extends Card {
} }
} }
/** /**
* Creates a scatter for the card and applies the card to it, * Creates a scatter for the card and applies the card to it,
* *
@ -71,11 +63,12 @@ export default class ScatterCard extends Card {
* @returns * @returns
* @memberof Card * @memberof Card
*/ */
static createCardScatter(html, scatterContainer, { static createCardScatter(
basePath = "./", html,
modules = [] scatterContainer,
} = {}) { { basePath = './', modules = [] } = {}
let element = document.createElement("div") ) {
let element = document.createElement('div')
scatterContainer.element.appendChild(element) scatterContainer.element.appendChild(element)
new DOMScatter(element, scatterContainer, { new DOMScatter(element, scatterContainer, {
@ -90,8 +83,6 @@ export default class ScatterCard extends Card {
return element return element
} }
/** /**
*Utility function to create a fully functional card scatter. *Utility function to create a fully functional card scatter.
* *
@ -103,24 +94,27 @@ export default class ScatterCard extends Card {
* @returns * @returns
* @memberof CardScatter * @memberof CardScatter
*/ */
static loadAndCreateScatterCard(scatterContainer, item, { static loadAndCreateScatterCard(
basePath = "../", scatterContainer,
modules = [], item,
onClose = null { 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'
console.log("Loading", url) console.log('Loading', url)
this.loadHTML(url) this.loadHTML(url)
.then(html => { .then(html => {
console.log("Received", html) console.log('Received', html)
let element = this.createCardScatter(html, scatterContainer, { let element = this.createCardScatter(
basePath, html,
modules scatterContainer,
}) {
if (onClose) basePath,
this.addOnCloseListener(element, onClose) modules
}
)
if (onClose) this.addOnCloseListener(element, onClose)
resolve(element) resolve(element)
}) })
.catch(e => reject(e)) .catch(e => reject(e))
@ -134,14 +128,12 @@ export default class ScatterCard extends Card {
static _getLanguage(context) { static _getLanguage(context) {
return context.language return context.language
} }
} }
ScatterCard.selectedLanguage = 0 ScatterCard.selectedLanguage = 0
ScatterCard.languages = ["Deutsch", "English"] ScatterCard.languages = ['Deutsch', 'English']
ScatterCard.languageTags = { ScatterCard.languageTags = {
Deutsch: "de", Deutsch: 'de',
English: "en" English: 'en'
} }
ScatterCard.scatterContainer = null ScatterCard.scatterContainer = null

9
lib/card/theme.js
View File

@ -7,7 +7,6 @@
* @class Theme * @class Theme
*/ */
export default class Theme { export default class Theme {
/** /**
* Loads a config file and parses it to JSON. * Loads a config file and parses it to JSON.
* *
@ -18,17 +17,15 @@ export default class Theme {
*/ */
static loadConfig(path = null) { static loadConfig(path = null) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
path = (path) ? path : './config.json' path = path ? path : './config.json'
let xhttp = new XMLHttpRequest() let xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function () { xhttp.onreadystatechange = function() {
if (this.readyState == 4) { if (this.readyState == 4) {
if (this.status == 200 || Theme._isLocal()) { if (this.status == 200 || Theme._isLocal()) {
try { try {
const json = JSON.parse(this.responseText) const json = JSON.parse(this.responseText)
resolve(json) resolve(json)
} catch (e) { } catch (e) {
reject(e) reject(e)
} }
@ -41,6 +38,6 @@ export default class Theme {
} }
static _isLocal() { static _isLocal() {
return (window.location.protocol == 'file:') return window.location.protocol == 'file:'
} }
} }

94
lib/card/wrapper.js
View File

@ -5,8 +5,10 @@ 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
@ -16,42 +18,43 @@ export default class CardWrapper extends Object {
} }
handleClicks() { handleClicks() {
this.domNode.addEventListener('click', event => { this.domNode.addEventListener(
if (event.isTrusted) { 'click',
Events.stop(event) event => {
if (this.triggerSVGClicks && this.isSVGNode(event.target)) { if (event.isTrusted) {
this.tap(event, "triggerSVGClicks") Events.stop(event)
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
this.tap(event, 'triggerSVGClicks')
}
} }
} },
true
}, true) )
} }
handleClicksAsTaps() { handleClicksAsTaps() {
this.domNode.addEventListener('click', event => { this.domNode.addEventListener(
if (event.isTrusted) { 'click',
Events.stop(event) event => {
if (event.isTrusted) {
} Events.stop(event)
this.tap(event) }
}, true) this.tap(event)
},
true
)
} }
isClickable(node) { isClickable(node) {
if (node == null) if (node == null) return false
return false if (node.tagName == 'A' && node.hasAttribute('href')) return true
if (node.tagName == 'A' && node.hasAttribute("href")) if (node.hasAttribute('onclick')) return true
return true
if (node.hasAttribute("onclick"))
return true
return false return false
} }
hasClickHandler(node) { hasClickHandler(node) {
if (node == null) if (node == null) return false
return false if (this.tapNodes.has(node)) return true
if (this.tapNodes.has(node))
return true
for (let [selector, handler] of this.tapHandler.entries()) { for (let [selector, handler] of this.tapHandler.entries()) {
for (let obj of this.domNode.querySelectorAll(selector)) { for (let obj of this.domNode.querySelectorAll(selector)) {
if (node == obj) { if (node == obj) {
@ -72,11 +75,9 @@ export default class CardWrapper extends Object {
*/ */
activeNodes() { activeNodes() {
let result = [] let result = []
for (let node of this.domNode.querySelectorAll("*")) { for (let node of this.domNode.querySelectorAll('*')) {
if (this.isClickable(node)) if (this.isClickable(node)) result.push(node)
result.push(node) if (this.hasClickHandler(node)) result.push(node)
if (this.hasClickHandler(node))
result.push(node)
} }
return result return result
} }
@ -84,14 +85,26 @@ 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) ? event.center : { x: event.x, y: event.y } let globalClick = event.center
? 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 => {
let rect = link.getBoundingClientRect() let rect = link.getBoundingClientRect()
let topLeft = Points.fromPageToNode(element, rect) let topLeft = Points.fromPageToNode(element, rect)
let center = Points.fromPageToNode(element, { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }) let center = Points.fromPageToNode(element, {
return { x: topLeft.x, y: topLeft.y, width: rect.width, height: rect.height, center, link } x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2
})
return {
x: topLeft.x,
y: topLeft.y,
width: rect.width,
height: rect.height,
center,
link
}
}) })
let distances = [] let distances = []
@ -147,12 +160,12 @@ export default class CardWrapper extends Object {
return false return false
} }
tap(event, calledBy='unknown') { tap(event, calledBy = 'unknown') {
if (event.isTrusted) { if (event.isTrusted) {
let node = this.nearestActive(event) let node = this.nearestActive(event)
this.nodeTapped(node, event) this.nodeTapped(node, event)
/* let node = document.elementFromPoint(event.clientX, event.clientY) /* let node = document.elementFromPoint(event.clientX, event.clientY)
if (!this.nodeTapped(node, event)) { if (!this.nodeTapped(node, event)) {
node = this.nearestActive(event) node = this.nearestActive(event)
this.nodeTapped(node, event) this.nodeTapped(node, event)
@ -161,13 +174,10 @@ export default class CardWrapper extends Object {
} }
onTap(objOrSelector, handler) { onTap(objOrSelector, handler) {
if (typeof (objOrSelector) == 'string') { if (typeof objOrSelector == 'string') {
this.tapHandler.set(objOrSelector, handler) this.tapHandler.set(objOrSelector, handler)
} } else {
else {
this.tapNodes.set(objOrSelector, handler) this.tapNodes.set(objOrSelector, handler)
} }
} }
} }

62
lib/doctest.js
View File

@ -5,12 +5,15 @@
var docTestLogMessages = [] var docTestLogMessages = []
Array.prototype.equals = function(array) { Array.prototype.equals = function(array) {
return this.length == array.length && return (
this.every( function(this_i,i) { return this_i == array[i] } ) this.length == array.length &&
this.every(function(this_i, i) {
return this_i == array[i]
})
)
} }
export default class Doctest { export default class Doctest {
static assert(value) { static assert(value) {
if (!value) { if (!value) {
throw new Error('Assertion violated') throw new Error('Assertion violated')
@ -18,34 +21,42 @@ export default class Doctest {
} }
static pprint(obj) { static pprint(obj) {
if (obj === null) if (obj === null) return 'null'
return 'null'
let stringified = obj.toString() let stringified = obj.toString()
if (stringified == '[object Object]') if (stringified == '[object Object]') return JSON.stringify(obj)
return JSON.stringify(obj)
return stringified return stringified
} }
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('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.') throw new Error(
'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('got `' + message + '` but expected `' + error + '`.') throw new 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')
//} //}
} }
@ -55,37 +66,35 @@ export default class Doctest {
} }
static highlight(code) { static highlight(code) {
if (typeof(hljs) == 'undefined') if (typeof hljs == 'undefined') return code
return code
return hljs.highlight('javascript', code) return hljs.highlight('javascript', code)
} }
static stripLeadingLines(code) { static stripLeadingLines(code) {
let result = [] let result = []
let informative = false let informative = false
for(let line of code.split('\n')) { for (let line of code.split('\n')) {
if (line.trim().length > 0) { if (line.trim().length > 0) {
informative = true informative = true
} }
if (informative) if (informative) result.push(line)
result.push(line)
} }
return result.join('\n') return result.join('\n')
} }
static event(type='mouse', {clientX = 0, clientY = 0} = {}) { static event(type = 'mouse', { clientX = 0, clientY = 0 } = {}) {
if (type.startsWith('mouse')) { if (type.startsWith('mouse')) {
return new MouseEvent(type, { clientX, clientY }) return new MouseEvent(type, { clientX, clientY })
} }
return { type, clientX, clientY } return { type, clientX, clientY }
} }
static run(replaceExpect=false) { static run(replaceExpect = false) {
if (typeof(hljs) != 'undefined') { if (typeof hljs != 'undefined') {
hljs.initHighlighting() hljs.initHighlighting()
} }
let doctests = document.querySelectorAll('.doctest') let doctests = document.querySelectorAll('.doctest')
for(let i=0; i<doctests.length; i++) { for (let i = 0; i < doctests.length; i++) {
let doctest = doctests[i] let doctest = doctests[i]
let code = this.stripLeadingLines(doctest.innerHTML) let code = this.stripLeadingLines(doctest.innerHTML)
let text = this.highlight(code) let text = this.highlight(code)
@ -94,8 +103,11 @@ export default class Doctest {
// let re = /Doctest\.expect\(([\s\S]*)[\,\s\S]*([\s\S]*)\)/g // let re = /Doctest\.expect\(([\s\S]*)[\,\s\S]*([\s\S]*)\)/g
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 (replaceExpect && line.trim().startsWith('Doctest.expect(')) { if (
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)

64
lib/errors.js
View File

@ -1,17 +1,16 @@
var recordedErrors = new Map() var recordedErrors = new Map()
export default class Errors { export default class Errors {
static countErrors() { static countErrors() {
let total = 0 let total = 0
for(let error of recordedErrors.keys()) { for (let error of recordedErrors.keys()) {
total += recordedErrors.get(error).size total += recordedErrors.get(error).size
} }
return total return total
} }
static setStyle(element, styles) { static setStyle(element, styles) {
for(let key in styles) { for (let key in styles) {
element.style[key] = styles[key] element.style[key] = styles[key]
} }
} }
@ -20,8 +19,7 @@ export default class Errors {
if (recordedErrors.has(error)) { if (recordedErrors.has(error)) {
let sources = recordedErrors.get(error) let sources = recordedErrors.get(error)
sources.add(source) sources.add(source)
} } else {
else {
recordedErrors.set(error, new Set([source])) recordedErrors.set(error, new Set([source]))
} }
} }
@ -37,16 +35,19 @@ export default class Errors {
this.setStyle(document.body, { this.setStyle(document.body, {
border: '2px solid red' border: '2px solid red'
}) })
this.setStyle(errors, {position: 'absolute', this.setStyle(errors, {
position: 'absolute',
top: '0px', top: '0px',
padding: '8px', padding: '8px',
width: '100%', width: '100%',
background: 'red', background: 'red',
color: 'white'}) color: 'white'
})
document.body.appendChild(errors) document.body.appendChild(errors)
let counter = document.createElement('div') let counter = document.createElement('div')
counter.setAttribute('id', 'runtime-errors-counter') counter.setAttribute('id', 'runtime-errors-counter')
this.setStyle(counter, {borderRadius: '50%', this.setStyle(counter, {
borderRadius: '50%',
width: '32px', width: '32px',
height: '32px', height: '32px',
background: 'white', background: 'white',
@ -54,16 +55,19 @@ export default class Errors {
fontSize: '18px', fontSize: '18px',
textAlign: 'center', textAlign: 'center',
lineHeight: '32px', lineHeight: '32px',
verticalAlign: 'middle'}) verticalAlign: 'middle'
})
counter.innerHTML = '1' counter.innerHTML = '1'
errors.appendChild(counter) errors.appendChild(counter)
let header = document.createElement('div') let header = document.createElement('div')
this.setStyle(header, {position: 'absolute', this.setStyle(header, {
position: 'absolute',
top: '6px', top: '6px',
left: '48px', left: '48px',
height: '44px', height: '44px',
fontSize: '32px'}) fontSize: '32px'
})
header.innerHTML = 'Runtime Errors' header.innerHTML = 'Runtime Errors'
errors.appendChild(header) errors.appendChild(header)
errors.addEventListener('click', this.toggleErrors.bind(this)) errors.addEventListener('click', this.toggleErrors.bind(this))
@ -74,9 +78,9 @@ export default class Errors {
static expandErrors() { static expandErrors() {
let errors = document.getElementById('runtime-errors') let errors = document.getElementById('runtime-errors')
for(let error of recordedErrors.keys()) { for (let error of recordedErrors.keys()) {
for(var source of recordedErrors.get(error)) { for (var source of recordedErrors.get(error)) {
if (typeof(source) == 'undefined') { if (typeof source == 'undefined') {
source = 'See console for details' source = 'See console for details'
return return
} }
@ -93,9 +97,8 @@ export default class Errors {
let errors = document.getElementById('runtime-errors') let errors = document.getElementById('runtime-errors')
let infos = errors.querySelectorAll('.info') let infos = errors.querySelectorAll('.info')
if (infos.length > 0) { if (infos.length > 0) {
infos.forEach((info) => errors.removeChild(info)) infos.forEach(info => errors.removeChild(info))
} } else {
else {
this.expandErrors() this.expandErrors()
} }
} }
@ -111,26 +114,29 @@ export default class Errors {
static registerGlobalErrorHandler() { static registerGlobalErrorHandler() {
// Register more informative error handler // Register more informative error handler
window.addEventListener('error', (event) => { window.addEventListener(
// if (typeof(event.error) == 'undefined') { 'error',
// console.info("Catched undefined error", event) event => {
// } // if (typeof(event.error) == 'undefined') {
this.appendError(event.error, event.filename) // console.info("Catched undefined error", event)
}, true) // }
this.appendError(event.error, event.filename)
},
true
)
document.addEventListener('DOMContentLoaded', (event) => { document.addEventListener('DOMContentLoaded', event => {
this.showErrors() this.showErrors()
}) })
} }
static registerFrameAwaitErrors() { static registerFrameAwaitErrors() {
let iframes = document.getElementsByTagName('iframe') let iframes = document.getElementsByTagName('iframe')
for(let i=0; i<iframes.length; i++) { for (let i = 0; i < iframes.length; i++) {
let target = iframes[i] let target = iframes[i]
target.iframeTimeout = setTimeout( target.iframeTimeout = setTimeout(() => {
() => { this.appendError('Cannot load iframe', target.src)
this.appendError('Cannot load iframe', target.src)}, }, frameErrorTimeout)
frameErrorTimeout)
target.onload = () => { target.onload = () => {
clearTimeout(target.iframeTimeout) clearTimeout(target.iframeTimeout)
} }

45
lib/events.js
View File

@ -1,6 +1,4 @@
export default class Events { export default class Events {
static stop(event) { static stop(event) {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
@ -20,8 +18,7 @@ export default class Events {
} }
static isCaptured(event) { static isCaptured(event) {
if (event.__capturedBy) if (event.__capturedBy) return true
return true
return false return false
} }
@ -77,8 +74,15 @@ 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(undefined, touchTarget, t.identifier, let touch = new Touch(
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)
@ -168,8 +172,7 @@ export default class Events {
for (let key of keys) { for (let key of keys) {
try { try {
result += ' ' + key + ':' + event[key] result += ' ' + key + ':' + event[key]
} } catch (e) {
catch (e) {
console.log('Invalid key: ' + key) console.log('Invalid key: ' + key)
} }
} }
@ -179,11 +182,15 @@ export default class Events {
static compareExtractedWithSimulated() { static compareExtractedWithSimulated() {
var diffs = 0 var diffs = 0
if (this.extracted.length != this.simulated.length) { if (this.extracted.length != this.simulated.length) {
alert('Unequal length of extracted [' + this.extracted.length + alert(
'] and simulated events [' + this.simulated.length + '].') 'Unequal length of extracted [' +
this.extracted.length +
'] and simulated events [' +
this.simulated.length +
'].'
)
diffs += 1 diffs += 1
} } else {
else {
for (let i = 0; i < this.extracted.length; i++) { for (let i = 0; i < this.extracted.length; i++) {
var extracted = this.extracted[i] var extracted = this.extracted[i]
var simulated = this.simulated[i] var simulated = this.simulated[i]
@ -238,8 +245,10 @@ export default class Events {
div.innerHTML = line div.innerHTML = line
this.popup.appendChild(div) this.popup.appendChild(div)
} }
Elements.setStyle(this.popup, Elements.setStyle(this.popup, {
{ left: event.clientX + 'px', top: event.clientY + 'px' }) left: event.clientX + 'px',
top: event.clientY + 'px'
})
} }
} }
@ -250,7 +259,6 @@ Events.simulated = []
Events.simulationRunning = false Events.simulationRunning = false
export class EventRecorder { export class EventRecorder {
constructor() { constructor() {
this.recording = [] this.recording = []
this.recorded = [] this.recorded = []
@ -262,8 +270,7 @@ export class EventRecorder {
if (length == 0) { if (length == 0) {
this.startTime = event.timeStamp this.startTime = event.timeStamp
Events.reset() Events.reset()
} } else {
else {
let last = this.recording[length - 1] let last = this.recording[length - 1]
if (event.timeStamp < last.time) { if (event.timeStamp < last.time) {
console.log('warning: wrong temporal order') console.log('warning: wrong temporal order')
@ -305,8 +312,7 @@ export class EventRecorder {
let delta = Math.round(dt) let delta = Math.round(dt)
setTimeout(() => this.replay(whileCondition, onComplete), delta) setTimeout(() => this.replay(whileCondition, onComplete), delta)
} }
} } else {
else {
console.log('Played ' + this.step + ' events' + onComplete) console.log('Played ' + this.step + ' events' + onComplete)
Events.simulationRunning = false Events.simulationRunning = false
if (onComplete != null) { if (onComplete != null) {
@ -316,4 +322,3 @@ export class EventRecorder {
} }
} }
} }

45
lib/flippable.js
View File

@ -31,12 +31,10 @@ export class CardLoader {
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
this.addedNode = null this.addedNode = null
console.log({ console.log({
width, width,
height, height,
maxWidth, maxWidth,
maxHeight, maxHeight
}) })
} }
@ -152,11 +150,13 @@ export class HTMLLoader extends CardLoader {
domNode.innerHTML = xhr.response domNode.innerHTML = xhr.response
this.addedNode = domNode.firstElementChild this.addedNode = domNode.firstElementChild
let { width, height } = this.size(this.addedNode) let { width, height } = this.size(this.addedNode)
console.log("HTMLLoader.load", { added: this.addedNode, width, height }) console.log('HTMLLoader.load', {
if (width) added: this.addedNode,
this.wantedWidth = width || this.wantedWidth width,
if (height) height
this.wantedHeight = height || this.wantedHeight })
if (width) this.wantedWidth = width || this.wantedWidth
if (height) this.wantedHeight = height || this.wantedHeight
resolve(this) resolve(this)
} }
xhr.onerror = e => { xhr.onerror = e => {
@ -248,7 +248,7 @@ export class DOMFlip {
this.cardWrapper = dom.querySelector('#' + this.id) this.cardWrapper = dom.querySelector('#' + this.id)
let front = this.cardWrapper.querySelector('.front') let front = this.cardWrapper.querySelector('.front')
this.frontLoader.load(front).then(loader => { this.frontLoader.load(front).then(loader => {
this.frontLoaded(loader).then((obj) => { this.frontLoaded(loader).then(obj => {
if (this.onLoaded) this.onLoaded() if (this.onLoaded) this.onLoaded()
resolve(this) resolve(this)
}) })
@ -275,7 +275,9 @@ export class DOMFlip {
scalable: this.scalable, scalable: this.scalable,
rotatable: this.rotatable, rotatable: this.rotatable,
overdoScaling: this.overdoScaling, overdoScaling: this.overdoScaling,
tapDelegate: (this.tapDelegateFactory) ? this.tapDelegateFactory(this.cardWrapper) : null tapDelegate: this.tapDelegateFactory
? this.tapDelegateFactory(this.cardWrapper)
: null
} }
) )
@ -284,7 +286,7 @@ export class DOMFlip {
} }
if (this.closeOnMinScale) { if (this.closeOnMinScale) {
const removeOnMinScale = function () { const removeOnMinScale = function() {
if (scatter.scale <= scatter.minScale) { if (scatter.scale <= scatter.minScale) {
this.flippable.close() this.flippable.close()
@ -294,7 +296,9 @@ export class DOMFlip {
//Remove callback //Remove callback
if (scatter.onTransform) { if (scatter.onTransform) {
let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale) let callbackIdx = scatter.onTransform.indexOf(
removeOnMinScale
)
scatter.onTransform.splice(callbackIdx, 1) scatter.onTransform.splice(callbackIdx, 1)
} }
} }
@ -325,7 +329,7 @@ export class DOMFlip {
} }
setupFlippable(flippable, loader) { setupFlippable(flippable, loader) {
console.log("setupFlippable", loader.wantedWidth) console.log('setupFlippable', loader.wantedWidth)
flippable.wantedWidth = loader.wantedWidth flippable.wantedWidth = loader.wantedWidth
flippable.wantedHeight = loader.wantedHeight flippable.wantedHeight = loader.wantedHeight
flippable.wantedScale = loader.scale flippable.wantedScale = loader.scale
@ -335,12 +339,10 @@ export class DOMFlip {
} }
start({ targetCenter = null } = {}) { start({ targetCenter = null } = {}) {
console.log("DOMFlip.start", targetCenter) console.log('DOMFlip.start', targetCenter)
if (this.preloadBack) { if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter }) this.flippable.start({ duration: this.flipDuration, targetCenter })
} } else {
else {
let back = this.cardWrapper.querySelector('.back') let back = this.cardWrapper.querySelector('.back')
let flippable = this.flippable let flippable = this.flippable
this.backLoader.load(back).then(loader => { this.backLoader.load(back).then(loader => {
@ -487,7 +489,7 @@ export class DOMFlippable {
clickInfo() { clickInfo() {
this.bringToFront() this.bringToFront()
console.log("clickInfo") console.log('clickInfo')
this.infoBtn.click() this.infoBtn.click()
} }
@ -585,14 +587,14 @@ export class DOMFlippable {
let y = this.flipped ? yy : this.startY let y = this.flipped ? yy : this.startY
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
console.log("start", this.flipDuration) console.log('start', this.flipDuration)
TweenLite.to(this.card, this.flipDuration, { TweenLite.to(this.card, this.flipDuration, {
rotationY: targetY, rotationY: targetY,
ease: Power1.easeOut, ease: Power1.easeOut,
transformOrigin: '50% 50%', transformOrigin: '50% 50%',
onUpdate, onUpdate,
onComplete: e => { onComplete: e => {
console.log("start end", this.flipDuration) console.log('start end', this.flipDuration)
if (this.flipped) { if (this.flipped) {
//this.hide(this.front) //this.hide(this.front)
this.enable(this.backBtn) this.enable(this.backBtn)
@ -602,7 +604,6 @@ export class DOMFlippable {
this.onFrontFlipped(this) this.onFrontFlipped(this)
} }
} else { } else {
if (this.onBackFlipped == null) { if (this.onBackFlipped == null) {
this.enable(this.infoBtn, this.fadeDuration) this.enable(this.infoBtn, this.fadeDuration)
this.enable(this.closeBtn, this.fadeDuration) this.enable(this.closeBtn, this.fadeDuration)
@ -625,7 +626,7 @@ export class DOMFlippable {
force3D: true force3D: true
}) })
console.log("start 2", this.wantedWidth, this.startWidth, {w, h}) console.log('start 2', this.wantedWidth, this.startWidth, { w, h })
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/ // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, { TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale, scale: targetScale,

100
lib/frames.js
View File

@ -1,12 +1,12 @@
import {Points} from './utils.js' import { Points } from './utils.js'
import {Capabilities} from './capabilities.js' import { Capabilities } from './capabilities.js'
export class FrameContainer { export class FrameContainer {
constructor(element) { constructor(element) {
this.element = element this.element = element
this.delegate = new InteractionMapper(element, this, this.delegate = new InteractionMapper(element, this, {
{ mouseWheelElement: window}) mouseWheelElement: window
})
} }
capture(event) { capture(event) {
@ -30,8 +30,7 @@ export class FrameContainer {
} }
export class FrameTarget { export class FrameTarget {
constructor(frame, target, debug = false) {
constructor(frame, target, debug=false) {
this.frame = frame this.frame = frame
this.target = target this.target = target
this.debug = debug this.debug = debug
@ -48,22 +47,30 @@ export class FrameTarget {
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
clientX: p.x, clientX: p.x,
clientY: p.y}) clientY: p.y
})
this.target.dispatchEvent(event) this.target.dispatchEvent(event)
} }
createTouchList(pointMap) { createTouchList(pointMap) {
let touches = [] let touches = []
let doc = this.frame.contentWindow.document let doc = this.frame.contentWindow.document
for(let key of pointMap.keys()) { for (let key of pointMap.keys()) {
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(undefined, touchTarget, key, let touch = new Touch(
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)
} }
simulateTouchEventChrome(type, point, pointMap) { simulateTouchEventChrome(type, point, pointMap) {
@ -80,8 +87,8 @@ export class FrameTarget {
radiusX: 2.5, radiusX: 2.5,
radiusY: 2.5, radiusY: 2.5,
rotationAngle: 10, rotationAngle: 10,
force: 0.5, force: 0.5
}); })
const touchEvent = new TouchEvent(type, { const touchEvent = new TouchEvent(type, {
cancelable: true, cancelable: true,
@ -89,47 +96,57 @@ export class FrameTarget {
touches: [touchObj], touches: [touchObj],
targetTouches: [touchObj], targetTouches: [touchObj],
changedTouches: [touchObj], changedTouches: [touchObj],
shiftKey: false, shiftKey: false
}); })
if (this.debug) console.log("simulateTouchEventChrome", touchEvent) if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
this.target.dispatchEvent(touchEvent); this.target.dispatchEvent(touchEvent)
} }
simulateTouchEventSafari(type, point, pointMap, touchEventKey='targetTouches') { simulateTouchEventSafari(
type,
point,
pointMap,
touchEventKey = 'targetTouches'
) {
let p = Points.fromPageToNode(this.frame, point) let p = Points.fromPageToNode(this.frame, point)
let data = { view: this.frame.contentWindow, let data = {
view: this.frame.contentWindow,
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
clientX: p.x, clientX: p.x,
clientY: p.y} clientY: p.y
}
data[touchEventKey] = this.createTouchList(pointMap) data[touchEventKey] = this.createTouchList(pointMap)
let event = new TouchEvent(type, data) let event = new TouchEvent(type, data)
if (this.debug) console.log("simulateTouchEventChrome", touchEvent) if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
this.target.dispatchEvent(event) this.target.dispatchEvent(event)
} }
simulateTouchEvent(type, point, pointMap, touchEventKey='targetTouches') { simulateTouchEvent(type, point, pointMap, touchEventKey = 'targetTouches') {
if (Capabilities.isSafari) { if (Capabilities.isSafari) {
this.simulateTouchEventSafari(type, point, pointMap, touchEventKey) this.simulateTouchEventSafari(type, point, pointMap, touchEventKey)
} } else {
else {
this.simulateTouchEventChrome(type, point, pointMap) this.simulateTouchEventChrome(type, point, pointMap)
} }
} }
isMouseLikeEvent(event) { isMouseLikeEvent(event) {
return event.type.startsWith('mouse') || event.type.startsWith('pointer') return (
event.type.startsWith('mouse') || event.type.startsWith('pointer')
)
} }
onStart(event, interaction) { onStart(event, interaction) {
if (this.debug) console.log('onStart', this.frame.parentNode) if (this.debug) console.log('onStart', this.frame.parentNode)
for(let [key, point] of interaction.current.entries()) { for (let [key, point] of interaction.current.entries()) {
if (this.isMouseLikeEvent(event)) { if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mousedown', point) this.simulateMouseEvent('mousedown', point)
} } else {
else { this.simulateTouchEvent(
this.simulateTouchEvent('touchstart', point, 'touchstart',
interaction.current) point,
interaction.current
)
return return
} }
} }
@ -137,13 +154,11 @@ export class FrameTarget {
onMove(event, interaction) { onMove(event, interaction) {
if (this.debug) console.log('onMove') if (this.debug) console.log('onMove')
for(let [key, point] of interaction.current.entries()) { for (let [key, point] of interaction.current.entries()) {
if (this.isMouseLikeEvent(event)) { if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mousemove', point) this.simulateMouseEvent('mousemove', point)
} } else {
else { this.simulateTouchEvent('touchmove', point, interaction.current)
this.simulateTouchEvent('touchmove', point,
interaction.current)
return return
} }
} }
@ -151,13 +166,16 @@ export class FrameTarget {
onEnd(event, interaction) { onEnd(event, interaction) {
if (this.debug) console.log('onEnd') if (this.debug) console.log('onEnd')
for(let [key, point] of interaction.current.entries()) { for (let [key, point] of interaction.current.entries()) {
if (this.isMouseLikeEvent(event)) { if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mouseend', point) this.simulateMouseEvent('mouseend', point)
} } else {
else { this.simulateTouchEvent(
this.simulateTouchEvent('touchend', point, 'touchend',
interaction.ended, 'changedTouches') point,
interaction.ended,
'changedTouches'
)
return return
} }
} }

13
lib/imageloader.js
View File

@ -14,7 +14,7 @@ function onerror(event) {
} }
function load() { function load() {
loadQueue.forEach((url) => { loadQueue.forEach(url => {
let xhr = new XMLHttpRequest() let xhr = new XMLHttpRequest()
xhr.responseType = 'blob' xhr.responseType = 'blob'
xhr.onload = onload xhr.onload = onload
@ -25,11 +25,11 @@ function load() {
}) })
} }
self.onmessage = (event) => { self.onmessage = event => {
let msg = event.data let msg = event.data
switch(msg.command) { switch (msg.command) {
case 'load': case 'load':
for(let url of msg.urls) { for (let url of msg.urls) {
console.log('Load', url) console.log('Load', url)
loadQueue.push(url) loadQueue.push(url)
} }
@ -37,13 +37,12 @@ self.onmessage = (event) => {
break break
case 'abort': case 'abort':
loadQueue = [] loadQueue = []
for(let xhr of pendingRequests.values()) { for (let xhr of pendingRequests.values()) {
console.log('Abort') console.log('Abort')
xhr.abort() xhr.abort()
} }
break break
default: default:
console.warn('Unknown worker command: ' + msg.command) console.warn('Unknown worker command: ' + msg.command)
} }
} }

28
lib/index.js
View File

@ -1,15 +1,14 @@
import {Capabilities} from './capabilities.js' import { Capabilities } from './capabilities.js'
export default class Index { export default class Index {
constructor(template, pages, notfound = 'thumbnails/notfound.png') {
constructor(template, pages, notfound='thumbnails/notfound.png') {
this.template = template this.template = template
this.pages = pages this.pages = pages
this.notfound = notfound this.notfound = notfound
} }
setup() { setup() {
for(let pair of this.pages) { for (let pair of this.pages) {
let [title, src] = pair let [title, src] = pair
let id = getId() let id = getId()
pair.push(id) pair.push(id)
@ -18,20 +17,18 @@ export default class Index {
wrapper.id = id wrapper.id = id
let clone = document.importNode(t.content, true) let clone = document.importNode(t.content, true)
container.appendChild(clone) container.appendChild(clone)
wrapper = container.querySelector('#'+id) wrapper = container.querySelector('#' + id)
let icon = wrapper.querySelector('.icon') let icon = wrapper.querySelector('.icon')
icon.onerror = (e) => { icon.onerror = e => {
if (this.notfound) if (this.notfound) icon.src = this.notfound
icon.src = this.notfound
} }
let iconSrc = src.replace('.html', '.png') let iconSrc = src.replace('.html', '.png')
//console.log("iconSrc", iconSrc) //console.log("iconSrc", iconSrc)
if (iconSrc.endsWith('index.png')) { if (iconSrc.endsWith('index.png')) {
icon.src = iconSrc.replace('index.png', 'thumbnail.png') icon.src = iconSrc.replace('index.png', 'thumbnail.png')
} } else {
else {
icon.src = 'thumbnails/' + iconSrc icon.src = 'thumbnails/' + iconSrc
} }
@ -44,8 +41,7 @@ export default class Index {
} }
frames() { frames() {
if (this.pages.length == 0) if (this.pages.length == 0) return
return
let [title, src, id] = this.pages.shift() let [title, src, id] = this.pages.shift()
let iframe = document.createElement('iframe') let iframe = document.createElement('iframe')
iframe.frameborder = 0 iframe.frameborder = 0
@ -53,7 +49,7 @@ export default class Index {
let icon = wrapper.querySelector('.icon') let icon = wrapper.querySelector('.icon')
icon.parentNode.replaceChild(iframe, icon) icon.parentNode.replaceChild(iframe, icon)
iframe.onload = (e) => { iframe.onload = e => {
this.frames() this.frames()
} }
iframe.src = src + window.location.search iframe.src = src + window.location.search
@ -61,13 +57,11 @@ export default class Index {
load() { load() {
this.setup() this.setup()
if (window.location.search.startsWith('?test')) if (window.location.search.startsWith('?test')) this.frames()
this.frames()
} }
loadAndTest() { loadAndTest() {
this.setup() this.setup()
if (!Capabilities.isMobile) if (!Capabilities.isMobile) this.frames()
this.frames()
} }
} }

3
lib/inspect.js
View File

@ -1,8 +1,7 @@
export class Inspect { export class Inspect {
// Code inspection functions // Code inspection functions
static allScriptSources() static allScriptSources() {
{
let sources = [] let sources = []
let scripts = document.getElementsByTagName('script') let scripts = document.getElementsByTagName('script')
for (let i = 0; i < scripts.length; i++) { for (let i = 0; i < scripts.length; i++) {

231
lib/interaction.js
View File

@ -13,16 +13,15 @@ import Logging from './logging.js'
*/ */
export class IInteractionTarget extends Interface { export class IInteractionTarget extends Interface {
capture(event) { capture(event) {
return typeof true return typeof true
} }
onStart(event, interaction) { } onStart(event, interaction) {}
onMove(event, interaction) { } onMove(event, interaction) {}
onEnd(event, interaction) { } onEnd(event, interaction) {}
onMouseWheel(event) { } onMouseWheel(event) {}
} }
export class IInteractionMapperTarget extends Interface { export class IInteractionMapperTarget extends Interface {
@ -230,14 +229,32 @@ 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(delta.x, delta.y, zoom, alpha, cm, csize) return new InteractionDelta(
} else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) { delta.x,
delta.y,
zoom,
alpha,
cm,
csize
)
} 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(delta.x, delta.y, 1.0, 0.0, current, csize) return new InteractionDelta(
delta.x,
delta.y,
1.0,
0.0,
current,
csize
)
} }
return null return null
} }
@ -375,8 +392,7 @@ export class Interaction extends InteractionPoints {
if (this.tapCounts.has(key)) { if (this.tapCounts.has(key)) {
let count = this.tapCounts.get(key) let count = this.tapCounts.get(key)
this.tapCounts.set(key, count + 1) this.tapCounts.set(key, count + 1)
} } else {
else {
this.tapCounts.set(key, 1) this.tapCounts.set(key, 1)
} }
this.tapPositions.set(key, point) this.tapPositions.set(key, point)
@ -418,7 +434,10 @@ export class Interaction extends InteractionPoints {
this.unregisterTap(key) this.unregisterTap(key)
} }
} }
if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) { if (
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)
} }
@ -426,8 +445,7 @@ export class Interaction extends InteractionPoints {
if (this.isTap(key)) { if (this.isTap(key)) {
this.registerTap(key, ended) this.registerTap(key, ended)
result = this.tapCounts.get(key) == 2 result = this.tapCounts.get(key) == 2
} } else {
else {
this.unregisterTap(key) this.unregisterTap(key)
} }
//console.log("isDoubleTap", this.tapCounts.get(key), result) //console.log("isDoubleTap", this.tapCounts.get(key), result)
@ -494,7 +512,13 @@ export class InteractionDelegate {
constructor( constructor(
element, element,
target, target,
{ mouseWheelElement = null, useCapture = true, capturePointerEvents = true, cancelOnWindowOut = true, debug = false } = {} {
mouseWheelElement = null,
useCapture = true,
capturePointerEvents = true,
cancelOnWindowOut = true,
debug = false
} = {}
) { ) {
this.debug = debug this.debug = debug
this.interaction = new Interaction() this.interaction = new Interaction()
@ -549,7 +573,8 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointermove', 'pointermove',
e => { e => {
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType) if (this.debug)
console.log('pointermove', e.pointerId, e.pointerType)
if ( if (
e.pointerType == 'touch' || e.pointerType == 'touch' ||
@ -566,7 +591,8 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointerup', 'pointerup',
e => { e => {
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType) if (this.debug)
console.log('pointerup', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) { if (this.capturePointerEvents) {
try { try {
@ -581,7 +607,8 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointercancel', 'pointercancel',
e => { e => {
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType) if (this.debug)
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)
@ -593,7 +620,12 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointerleave', 'pointerleave',
e => { e => {
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType) if (this.debug)
console.log(
'pointerleave',
e.pointerId,
e.pointerType
)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
useCapture useCapture
@ -604,7 +636,12 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'pointerout', 'pointerout',
e => { e => {
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType) if (this.debug)
console.log(
'pointerout',
e.pointerId,
e.pointerType
)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
useCapture useCapture
@ -615,14 +652,20 @@ export class InteractionDelegate {
window.addEventListener( window.addEventListener(
'pointerout', 'pointerout',
e => { e => {
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target) if (this.debug)
console.log(
'pointerout',
e.pointerId,
e.pointerType,
e.target
)
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
} }
}, },
useCapture) useCapture
)
} }
} else if (window.TouchEvent) { } else if (window.TouchEvent) {
if (this.debug) console.log('Touch API') if (this.debug) console.log('Touch API')
element.addEventListener( element.addEventListener(
@ -698,8 +741,7 @@ export class InteractionDelegate {
// && Events.isMouseDown(e)) // && Events.isMouseDown(e))
if (Events.isMouseDown(e)) { if (Events.isMouseDown(e)) {
if (this.debug) if (this.debug) console.log('mousemove', e)
console.log('mousemove', e)
this.onMove(e) this.onMove(e)
} }
}, },
@ -720,7 +762,9 @@ export class InteractionDelegate {
e => { e => {
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
console.warn('Shouldn\'t happen: mouseout ends interaction') console.warn(
"Shouldn't happen: mouseout ends interaction"
)
} }
}, },
useCapture useCapture
@ -734,7 +778,8 @@ export class InteractionDelegate {
this.onEnd(e) this.onEnd(e)
} }
}, },
useCapture) useCapture
)
} }
} }
} }
@ -823,42 +868,42 @@ export class InteractionDelegate {
// 'targetTouches' // 'targetTouches'
let result = {} let result = {}
switch (event.constructor.name) { switch (event.constructor.name) {
case 'MouseEvent': { case 'MouseEvent': {
let buttons = event.buttons || event.which let buttons = event.buttons || event.which
if (buttons) result['mouse'] = this.getPosition(event) if (buttons) result['mouse'] = this.getPosition(event)
break break
} }
case 'PointerEvent': { case 'PointerEvent': {
result[event.pointerId.toString()] = this.getPosition(event) result[event.pointerId.toString()] = this.getPosition(event)
break break
} }
case 'Touch': { case 'Touch': {
let id = let id =
event.touchType === 'stylus' event.touchType === 'stylus'
? 'stylus' ? 'stylus'
: event.identifier.toString() : event.identifier.toString()
result[id] = this.getPosition(event) result[id] = this.getPosition(event)
break break
} }
// case 'TouchEvent': // case 'TouchEvent':
// // Needs to be observed: Perhaps changedTouches are all we need. If so // // Needs to be observed: Perhaps changedTouches are all we need. If so
// // we can remove the touchEventKey default parameter // // we can remove the touchEventKey default parameter
// if (touchEventKey == 'all') { // if (touchEventKey == 'all') {
// for(let t of event.targetTouches) { // for(let t of event.targetTouches) {
// result[t.identifier.toString()] = this.getPosition(t) // result[t.identifier.toString()] = this.getPosition(t)
// } // }
// for(let t of event.changedTouches) { // for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t) // result[t.identifier.toString()] = this.getPosition(t)
// } // }
// } // }
// else { // else {
// for(let t of event.changedTouches) { // for(let t of event.changedTouches) {
// result[t.identifier.toString()] = this.getPosition(t) // result[t.identifier.toString()] = this.getPosition(t)
// } // }
// } // }
// break // break
default: default:
break break
} }
return result return result
} }
@ -871,7 +916,7 @@ export class InteractionDelegate {
// Callback: can be overwritten // Callback: can be overwritten
} }
interactionFinished(event, key, point) { } interactionFinished(event, key, point) {}
startInteraction(event, extracted) { startInteraction(event, extracted) {
for (let key in extracted) { for (let key in extracted) {
@ -886,7 +931,10 @@ 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('new pointer in updateInteraction shouldn\'t happen', key) console.warn(
"new pointer in updateInteraction shouldn't happen",
key
)
this.interactionStarted(event, key, point) this.interactionStarted(event, key, point)
} }
} }
@ -924,13 +972,23 @@ export class InteractionDelegate {
* @extends {InteractionDelegate} * @extends {InteractionDelegate}
*/ */
export class InteractionMapper extends InteractionDelegate { export class InteractionMapper extends InteractionDelegate {
constructor( constructor(
element, element,
target, target,
{ tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {} {
tapDistance = 10,
longPressTime = 500.0,
useCapture = true,
mouseWheelElement = null,
logInteractionsAbove = 12
} = {}
) { ) {
super(element, target, { tapDistance, useCapture, longPressTime, mouseWheelElement }) super(element, target, {
tapDistance,
useCapture,
longPressTime,
mouseWheelElement
})
this.logInteractionsAbove = logInteractionsAbove this.logInteractionsAbove = logInteractionsAbove
} }
@ -1039,10 +1097,7 @@ export class InteractionMapper extends InteractionDelegate {
* @param {object} [opts] - An options object. See the hammer documentation for more details. * @param {object} [opts] - An options object. See the hammer documentation for more details.
*/ */
static on(types, elements, cb, opts = {}) { static on(types, elements, cb, opts = {}) {
opts = Object.assign({}, {}, opts)
opts = Object.assign({}, {
}, opts)
if (typeof Hammer === 'undefined') { if (typeof Hammer === 'undefined') {
console.error('Hammer.js not found!') console.error('Hammer.js not found!')
@ -1051,23 +1106,25 @@ 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 (elements instanceof NodeList || elements instanceof HTMLCollection) { if (
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]
for (let i = 0; i < types.length; i++) { for (let i = 0; i < types.length; i++) {
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(type) const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
type
)
// if it is a hammer event // if it is a hammer event
if (useHammer) { if (useHammer) {
for (let j = 0; j < elements.length; j++) { for (let j = 0; j < elements.length; j++) {
// if(elements[j].tagName == "svg") return false; // if(elements[j].tagName == "svg") return false;
let hammer = new Hammer(elements[j], opts) let hammer = new Hammer(elements[j], opts)
@ -1078,15 +1135,33 @@ export class InteractionMapper extends InteractionDelegate {
// recognizers // recognizers
if (type.startsWith('pan')) { if (type.startsWith('pan')) {
hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)) hammer
.get('pan')
.set(
Object.assign(
{ direction: Hammer.DIRECTION_ALL },
opts
)
)
} else if (type.startsWith('pinch')) { } else if (type.startsWith('pinch')) {
hammer.get('pinch').set(Object.assign({ enable: true }, opts)) hammer
.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.get('rotate').set(Object.assign({ enable: true }, opts)) hammer
.get('rotate')
.set(Object.assign({ enable: true }, opts))
} else if (type.startsWith('swipe')) { } else if (type.startsWith('swipe')) {
hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts)) hammer
.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)
} }
@ -1095,9 +1170,7 @@ export class InteractionMapper extends InteractionDelegate {
cb(event) cb(event)
}) })
} }
} else { } else {
for (let j = 0; j < elements.length; j++) { for (let j = 0; j < elements.length; j++) {
Hammer.on(elements[j], type, event => { Hammer.on(elements[j], type, event => {
cb(event) cb(event)

13
lib/interface.js
View File

@ -7,11 +7,10 @@ export default class Interface {
static implementationError(klass) { static implementationError(klass) {
let interfaceKeys = Reflect.ownKeys(this.prototype) let interfaceKeys = Reflect.ownKeys(this.prototype)
let classKeys = Reflect.ownKeys(klass.prototype) let classKeys = Reflect.ownKeys(klass.prototype)
for(let key of interfaceKeys) { for (let key of interfaceKeys) {
let interfaceDesc = this.prototype[key] let interfaceDesc = this.prototype[key]
let classDesc = klass.prototype[key] let classDesc = klass.prototype[key]
if (typeof(classDesc) == 'undefined') if (typeof classDesc == 'undefined') return 'Missing ' + key
return 'Missing ' + key
} }
return null return null
} }
@ -23,8 +22,8 @@ export default class Interface {
return error == null return error == null
} }
// TODO: Specify optional methods // TODO: Specify optional methods
// static optionalMethods() { // static optionalMethods() {
// return [this.onMouseWheel] // return [this.onMouseWheel]
// } // }
} }

15
lib/logging.js
View File

@ -28,7 +28,6 @@ try {
* setup method. * setup method.
*/ */
export default class Logging { export default class Logging {
/** Static log function. /** Static log function.
* @param {*} message * @param {*} message
*/ */
@ -49,10 +48,10 @@ export default class Logging {
} }
/** /**
* Static error function. * Static error function.
* Emits each error message only once per session. * Emits each error message only once per session.
* @param {*} message * @param {*} message
*/ */
static error(message) { static error(message) {
if (!logMessages.has(message)) { if (!logMessages.has(message)) {
logMessages.add(message) logMessages.add(message)
@ -60,7 +59,11 @@ export default class Logging {
} }
} }
static setup({log=console.log, warn=console.warn, error=console.error} = {}) { static setup({
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

105
lib/pixi/abstractpopup.js
View File

@ -11,7 +11,6 @@ import Theme from './theme.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}
*/ */
export default class AbstractPopup extends PIXI.Graphics { export default class AbstractPopup extends PIXI.Graphics {
/** /**
* Creates an instance of an AbstractPopup (only for internal use). * Creates an instance of an AbstractPopup (only for internal use).
* *
@ -45,34 +44,37 @@ export default class AbstractPopup extends PIXI.Graphics {
* to landscape, the popup cannot be displayed in portrait mode. * to landscape, the popup cannot be displayed in portrait mode.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
header: null, // null or null x: 0,
content: null, // null or String or PIXI.DisplayObject y: 0,
minWidth: 320, header: null, // null or null
minHeight: 130, content: null, // null or String or PIXI.DisplayObject
maxWidth: null, minWidth: 320,
padding: theme.padding, minHeight: 130,
fill: theme.fill, maxWidth: null,
fillAlpha: theme.fillAlpha, padding: theme.padding,
stroke: theme.stroke, fill: theme.fill,
strokeWidth: theme.strokeWidth, fillAlpha: theme.fillAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
headerStyle: theme.textStyleLarge, strokeWidth: theme.strokeWidth,
textStyle: theme.textStyleSmall, strokeAlpha: theme.strokeAlpha,
radius: theme.radius, headerStyle: theme.textStyleLarge,
onHidden: null, textStyle: theme.textStyleSmall,
visible: true, radius: theme.radius,
orientation: null onHidden: null,
}, opts) visible: true,
orientation: null
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -81,10 +83,12 @@ 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.opts.maxWidth - (2 * this.opts.padding) this.headerStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
this.textStyle.wordWrap = true this.textStyle.wordWrap = true
this.textStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) this.textStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
} }
this.alpha = 0 this.alpha = 0
@ -115,7 +119,6 @@ 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.
*/ */
setup() { setup() {
// position // position
//----------------- //-----------------
this.sy = this.opts.padding this.sy = this.opts.padding
@ -123,15 +126,17 @@ export default class AbstractPopup extends PIXI.Graphics {
// header // header
//----------------- //-----------------
if (this.opts.header != null) { if (this.opts.header != null) {
let header = null let header = null
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(this.opts.header.toString(), this.headerStyle) header = new PIXI.Text(
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)
} }
header.x = this.opts.padding header.x = this.opts.padding
@ -151,13 +156,15 @@ export default class AbstractPopup extends PIXI.Graphics {
// content // content
//----------------- //-----------------
if (this.opts.content != null) { if (this.opts.content != null) {
let content = null let content = null
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(this.opts.content.toString(), this.textStyle) content = new PIXI.Text(
this.opts.content.toString(),
this.textStyle
)
} else { } else {
content = this.opts.content content = this.opts.content
} }
@ -181,13 +188,12 @@ 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.
*/ */
layout() { layout() {
// wanted width & wanted height // wanted width & wanted height
//----------------- //-----------------
const padding = this.opts.padding const padding = this.opts.padding
const size = this.getInnerSize() const size = this.getInnerSize()
const width = size.width + (2 * padding) const width = size.width + 2 * padding
const height = size.height + (2 * padding) const height = size.height + 2 * padding
this.wantedWidth = Math.max(width, this.opts.minWidth) this.wantedWidth = Math.max(width, this.opts.minWidth)
this.wantedHeight = Math.max(height, this.opts.minHeight) this.wantedHeight = Math.max(height, this.opts.minHeight)
@ -229,17 +235,31 @@ 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.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.lineStyle(
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.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius) this.drawCircle(
this.wantedWidth / 2,
this.wantedHeight / 2,
this.opts.radius
)
} else { } else {
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius) this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
} }
this.endFill() this.endFill()
@ -255,7 +275,6 @@ export default class AbstractPopup extends PIXI.Graphics {
* @returns {object} An JavaScript object width the keys width and height. * @returns {object} An JavaScript object width the keys width and height.
*/ */
getInnerSize() { getInnerSize() {
let width = 0 let width = 0
let height = 0 let height = 0
@ -273,7 +292,7 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height height += this._content.height
} }
return {width, height} return { width, height }
} }
/** /**
@ -283,7 +302,6 @@ 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.
*/ */
show(cb) { show(cb) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 1, alpha: 1,
onComplete: () => { onComplete: () => {
@ -303,7 +321,6 @@ 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.
*/ */
hide(cb) { hide(cb) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => { onComplete: () => {

190
lib/pixi/app.js
View File

@ -4,7 +4,7 @@ import Theme from './theme.js'
import Progress from './progress.js' import Progress from './progress.js'
import Modal from './modal.js' import Modal from './modal.js'
import Message from './message.js' import Message from './message.js'
import {debounce} from '../utils.js' import { debounce } from '../utils.js'
/** /**
* A special InteractionManager for fullscreen apps, which may * A special InteractionManager for fullscreen apps, which may
@ -21,7 +21,6 @@ import {debounce} from '../utils.js'
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size} * @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
*/ */
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager { class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
mapPositionToPoint(point, x, y) { mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution let resolution = this.renderer.resolution
let extendWidth = 1.0 let extendWidth = 1.0
@ -29,8 +28,10 @@ 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 (context.drawingBufferWidth < canvas.width || if (
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
@ -63,7 +64,6 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
* @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application} * @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
*/ */
export default class PIXIApp extends PIXI.Application { export default class PIXIApp extends PIXI.Application {
/** /**
* Creates an instance of a PixiApp. * Creates an instance of a PixiApp.
* *
@ -86,12 +86,23 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision. * @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
*/ */
constructor({ constructor({
width = null, height = null, view = null, width = null,
transparent = true, backgroundColor = 0x282828, theme = 'dark', height = null,
antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true, view = null,
fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true, transparent = true,
graphql = false }) { backgroundColor = 0x282828,
theme = 'dark',
antialias = true,
resolution = window.devicePixelRatio || 1,
autoResize = true,
fpsLogging = false,
progress = {},
forceCanvas = false,
roundPixels = true,
monkeyPatchMapping = true,
adaptive = true,
graphql = false
}) {
const fullScreen = !width || !height const fullScreen = !width || !height
if (fullScreen) { if (fullScreen) {
@ -109,7 +120,7 @@ export default class PIXIApp extends PIXI.Application {
autoResize, autoResize,
backgroundColor, backgroundColor,
forceCanvas, forceCanvas,
roundPixels // not needed for PixiJS >= 5 roundPixels // not needed for PixiJS >= 5
}) })
this.width = width this.width = width
@ -132,7 +143,10 @@ 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('orientationchange', this.checkOrientation.bind(this)) document.body.addEventListener(
'orientationchange',
this.checkOrientation.bind(this)
)
} }
if (monkeyPatchMapping) { if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping') console.log('Using monkey patched coordinate mapping')
@ -159,15 +173,17 @@ export default class PIXIApp extends PIXI.Application {
// GraphQL // GraphQL
if (this.graphql && typeof apollo !== 'undefined') { if (this.graphql && typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({ const networkInterface = apollo.createNetworkInterface({
uri: '/graphql' uri: '/graphql'
}) })
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, { const wsClient = new subscriptions.SubscriptionClient(
reconnect: true, `wss://${location.hostname}/subscriptions`,
connectionParams: {} {
}) reconnect: true,
connectionParams: {}
}
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions( const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface, networkInterface,
@ -180,7 +196,11 @@ export default class PIXIApp extends PIXI.Application {
} }
// progress // progress
this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this })) this._progress = new Progress(
Object.assign({ theme: this.theme }, this.progressOpts, {
app: this
})
)
this._progress.visible = false this._progress.visible = false
this.stage.addChild(this._progress) this.stage.addChild(this._progress)
@ -205,9 +225,12 @@ export default class PIXIApp extends PIXI.Application {
checkOrientation(event) { checkOrientation(event) {
var value = this.orientation() var value = this.orientation()
if (value != this.orient) { if (value != this.orient) {
setTimeout(100, function () { setTimeout(
this.orientationChanged(true) 100,
}.bind(this)) function() {
this.orientationChanged(true)
}.bind(this)
)
this.orient = value this.orient = value
} }
} }
@ -230,9 +253,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [width] - The width of the app. * @param {number} [width] - The width of the app.
* @param {number} [height] - The height of the app. * @param {number} [height] - The height of the app.
*/ */
layout(width, height) { layout(width, height) {}
}
/** /**
* Draws the display tree of the app. Typically this can be delegated * Draws the display tree of the app. Typically this can be delegated
@ -303,7 +324,10 @@ 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(event, { width = window.innerWidth, height = window.innerHeight } = {}) { resize(
event,
{ width = window.innerWidth, height = window.innerHeight } = {}
) {
this.width = width this.width = width
this.height = height this.height = height
this.expandRenderer() this.expandRenderer()
@ -324,7 +348,8 @@ 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 = interactionManager.mapPositionToPoint this.originalMapPositionToPoint =
interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (point, x, y) => { interactionManager.mapPositionToPoint = (point, x, y) => {
return this.fixedMapPositionToPoint(point, x, y) return this.fixedMapPositionToPoint(point, x, y)
} }
@ -351,8 +376,11 @@ export default class PIXIApp extends PIXI.Application {
let canvas = this.renderer.view let canvas = this.renderer.view
let context = canvas.getContext('webgl') let context = canvas.getContext('webgl')
if (context !== null && (context.drawingBufferWidth < canvas.width || if (
context.drawingBufferHeight < canvas.height)) { context !== null &&
(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
@ -360,7 +388,12 @@ export default class PIXIApp extends PIXI.Application {
} }
x *= extendWidth x *= extendWidth
y *= extendHeight y *= extendHeight
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy) return this.originalMapPositionToPoint.call(
interactionManager,
local,
x,
y + dy
)
} }
/** /**
@ -394,7 +427,6 @@ export default class PIXIApp extends PIXI.Application {
* called without a parameter. * called without a parameter.
*/ */
progress(value) { progress(value) {
if (typeof value === 'undefined') { if (typeof value === 'undefined') {
return this._progress return this._progress
} }
@ -412,8 +444,9 @@ 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
@ -426,8 +459,9 @@ 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
@ -446,21 +480,26 @@ 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(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { loadSprites(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
this.loadTextures(
resources,
textures => {
let sprites = new Map()
this.loadTextures(resources, textures => { for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
let sprites = new Map() if (loaded) {
loaded.call(this, sprites)
for (let [key, texture] of textures) { }
sprites.set(key, new PIXI.Sprite(texture)) },
} { resolutionDependent, progress }
)
if (loaded) {
loaded.call(this, sprites)
}
}, { resolutionDependent, progress })
return this return this
} }
@ -478,8 +517,11 @@ 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(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) { loadTextures(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
if (!Array.isArray(resources)) { if (!Array.isArray(resources)) {
resources = [resources] resources = [resources]
} }
@ -487,17 +529,21 @@ export default class PIXIApp extends PIXI.Application {
const loader = this.loader const loader = this.loader
for (let resource of resources) { for (let resource of resources) {
if (!loader.resources[resource]) { if (!loader.resources[resource]) {
if (resolutionDependent) { if (resolutionDependent) {
let resolution = Math.round(this.renderer.resolution) let resolution = Math.round(this.renderer.resolution)
switch (resolution) { switch (resolution) {
case 2: case 2:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1')) loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@2x.$1')
)
break break
case 3: case 3:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1')) loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@3x.$1')
)
break break
default: default:
loader.add(resource) loader.add(resource)
@ -540,7 +586,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error. * rejected with an error.
*/ */
query(query, opts = {}) { query(query, opts = {}) {
if (typeof query === 'string') { if (typeof query === 'string') {
opts = Object.assign({}, opts, { query }) opts = Object.assign({}, opts, { query })
} else { } else {
@ -572,7 +617,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error. * rejected with an error.
*/ */
mutate(mutation, opts = {}) { mutate(mutation, opts = {}) {
if (typeof mutation === 'string') { if (typeof mutation === 'string') {
opts = Object.assign({}, opts, { mutation }) opts = Object.assign({}, opts, { mutation })
} else { } else {
@ -604,7 +648,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error. * rejected with an error.
*/ */
subscribe(subscription, opts = {}) { subscribe(subscription, opts = {}) {
if (typeof subscription === 'string') { if (typeof subscription === 'string') {
opts = Object.assign({}, opts, { subscription }) opts = Object.assign({}, opts, { subscription })
} else { } else {
@ -641,7 +684,7 @@ export default class PIXIApp extends PIXI.Application {
convertPointFromPageToNode(displayObject, x, y) { convertPointFromPageToNode(displayObject, x, y) {
let resolution = this.renderer.resolution let resolution = this.renderer.resolution
console.log("resolution", resolution) console.log('resolution', resolution)
let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y) let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
pixiGlobal.x /= resolution pixiGlobal.x /= resolution
pixiGlobal.y /= resolution pixiGlobal.y /= resolution
@ -665,7 +708,11 @@ 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(app.view, pixiGlobal.x, pixiGlobal.y) return window.convertPointFromNodeToPage(
app.view,
pixiGlobal.x,
pixiGlobal.y
)
} }
} }
@ -679,7 +726,6 @@ export default class PIXIApp extends PIXI.Application {
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics} * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/ */
class FpsDisplay extends PIXI.Graphics { class FpsDisplay extends PIXI.Graphics {
/** /**
* Creates an instance of a FpsDisplay. * Creates an instance of a FpsDisplay.
* *
@ -687,25 +733,27 @@ class FpsDisplay extends PIXI.Graphics {
* @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed. * @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
*/ */
constructor(app) { constructor(app) {
super() super()
this.app = app this.app = app
this.lineStyle(3, 0x434f4f, 1) this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, .6) .beginFill(0x434f4f, 0.6)
.drawRoundedRect(0, 0, 68, 32, 5) .drawRoundedRect(0, 0, 68, 32, 5)
.endFill() .endFill()
.position.set(20, 20) .position.set(20, 20)
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({ this.text = new PIXI.Text(
fontFamily: 'Arial', this.fps,
fontSize: 14, new PIXI.TextStyle({
fontWeight: 'bold', fontFamily: 'Arial',
fill: '#f6f6f6', fontSize: 14,
stroke: '#434f4f', fontWeight: 'bold',
strokeThickness: 3 fill: '#f6f6f6',
})) stroke: '#434f4f',
strokeThickness: 3
})
)
this.text.position.set(6, 6) this.text.position.set(6, 6)
this.addChild(this.text) this.addChild(this.text)
@ -721,7 +769,7 @@ class FpsDisplay extends PIXI.Graphics {
* @return {PIXIApp} Returns the PIXIApp object for chaining. * @return {PIXIApp} Returns the PIXIApp object for chaining.
*/ */
refreshFps() { refreshFps() {
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps` this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
return this return this
} }

50
lib/pixi/blurfilter.js
View File

@ -31,7 +31,6 @@
* @param {number} [blur=50] The strength of the blur. * @param {number} [blur=50] The strength of the blur.
*/ */
export default class BlurFilter extends PIXI.Filter { export default class BlurFilter extends PIXI.Filter {
constructor(shape, blur = 50) { constructor(shape, blur = 50) {
super() super()
@ -69,7 +68,9 @@ 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(value) this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
value
)
} }
/** /**
@ -79,16 +80,27 @@ export default class BlurFilter extends PIXI.Filter {
* @returns {Object} * @returns {Object}
*/ */
normalize(value) { normalize(value) {
let shape = null let shape = null
if (value instanceof PIXI.Circle) { if (value instanceof PIXI.Circle) {
shape = {type: 'circle', x: value.x, y: value.y, r: value.radius} shape = { type: 'circle', x: value.x, y: value.y, r: value.radius }
} else if (value instanceof PIXI.Rectangle) { } else if (value instanceof PIXI.Rectangle) {
shape = {type: 'rectangle', x: value.x, y: value.y, width: value.width, height: value.height} shape = {
type: 'rectangle',
x: value.x,
y: value.y,
width: value.width,
height: value.height
}
} else { } else {
const bounds = value.getBounds() const bounds = value.getBounds()
shape = {type: 'rectangle', x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height} shape = {
type: 'rectangle',
x: bounds.x,
y: bounds.y,
width: bounds.width,
height: bounds.height
}
} }
return shape return shape
@ -104,9 +116,7 @@ export default class BlurFilter extends PIXI.Filter {
* @private * @private
*/ */
class TiltShiftAxisFilter extends PIXI.Filter { class TiltShiftAxisFilter extends PIXI.Filter {
constructor(shape, blur) {
constructor(shape, blur){
const vertex = ` const vertex = `
attribute vec2 aVertexPosition; attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord; attribute vec2 aTextureCoord;
@ -179,7 +189,12 @@ 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 = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height] this.uniforms.rectangle = [
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)
@ -213,7 +228,12 @@ 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(rectangle[0], rectangle[1], rectangle[2], rectangle[3]) return new PIXI.Rectangle(
rectangle[0],
rectangle[1],
rectangle[2],
rectangle[3]
)
} }
} }
set shape(value) { set shape(value) {
@ -222,7 +242,12 @@ 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 = [value.x, value.y, value.x + value.width, value.y + value.height] this.uniforms.rectangle = [
value.x,
value.y,
value.x + value.width,
value.y + value.height
]
} }
} }
} }
@ -260,4 +285,3 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
this.uniforms.delta.y = 0.1 this.uniforms.delta.y = 0.1
} }
} }

8
lib/pixi/bundle.js
View File

@ -2,10 +2,10 @@ import PIXIApp from './app.js'
import BlurFilter from './blurfilter.js' import BlurFilter from './blurfilter.js'
import FlipEffect from './flipeffect.js' import FlipEffect from './flipeffect.js'
import Flippable from './flippable.js' import Flippable from './flippable.js'
import {DeepZoomInfo, DeepZoomImage} from './deepzoom/image.js' import { DeepZoomInfo, DeepZoomImage } from './deepzoom/image.js'
import Popover from './popover.js' import Popover from './popover.js'
import {ScatterContainer, DisplayObjectScatter} from './scatter.js' import { ScatterContainer, DisplayObjectScatter } from './scatter.js'
import {AppTest, Command, RecorderTools} from './test.js' import { AppTest, Command, RecorderTools } from './test.js'
import Timeline from './timeline.js' import Timeline from './timeline.js'
import Theme from './theme.js' import Theme from './theme.js'
import Button from './button.js' import Button from './button.js'
@ -23,7 +23,7 @@ import Tooltip from './tooltip.js'
import Badge from './badge.js' import Badge from './badge.js'
import Progress from './progress.js' import Progress from './progress.js'
import List from './list.js' import List from './list.js'
import {LabeledGraphics, FontInfo} from './labeledgraphics.js' import { LabeledGraphics, FontInfo } from './labeledgraphics.js'
/* Needed to ensure that rollup.js includes class definitions and the classes /* Needed to ensure that rollup.js includes class definitions and the classes
are visible inside doctests. are visible inside doctests.
*/ */

304
lib/pixi/button.js
View File

@ -47,7 +47,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
*/ */
export default class Button extends PIXI.Container { export default class Button extends PIXI.Container {
/** /**
* Creates an instance of a Button. * Creates an instance of a Button.
* *
@ -106,62 +105,76 @@ export default class Button extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
label: null, {
x: 0, id: PIXI.utils.uid(),
y: 0, label: null,
minWidth: 44, x: 0,
minHeight: 44, y: 0,
padding: theme.padding, minWidth: 44,
icon: undefined, minHeight: 44,
iconActive: undefined, padding: theme.padding,
iconPosition: 'left', icon: undefined,
iconColor: theme.iconColor, iconActive: undefined,
iconColorActive: theme.iconColorActive, iconPosition: 'left',
fill: theme.fill, iconColor: theme.iconColor,
fillAlpha: theme.fillAlpha, iconColorActive: theme.iconColorActive,
fillActive: theme.fillActive, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.fillActive,
strokeWidth: theme.strokeWidth, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.strokeActive, strokeWidth: theme.strokeWidth,
strokeActiveWidth: theme.strokeActiveWidth, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.strokeActive,
textStyle: theme.textStyle, strokeActiveWidth: theme.strokeActiveWidth,
textStyleActive: theme.textStyleActive, strokeActiveAlpha: theme.strokeActiveAlpha,
style: 'default', textStyle: theme.textStyle,
radius: theme.radius, textStyleActive: theme.textStyleActive,
disabled: false, style: 'default',
active: false, radius: theme.radius,
action: null, disabled: false,
beforeAction: null, active: false,
afterAction: null, action: null,
type: 'default', beforeAction: null,
align: 'center', afterAction: null,
verticalAlign: 'middle', type: 'default',
tooltip: null, align: 'center',
badge: null, verticalAlign: 'middle',
visible: true tooltip: null,
}, opts) badge: null,
visible: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') { if (
typeof this.opts.icon === 'undefined' &&
typeof this.opts.iconActive !== 'undefined'
) {
this.opts.icon = this.opts.iconActive this.opts.icon = this.opts.iconActive
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') { } else if (
typeof this.opts.icon !== 'undefined' &&
typeof this.opts.iconActive === 'undefined'
) {
this.opts.iconActive = this.opts.icon this.opts.iconActive = this.opts.icon
} }
if (this.opts.style === 'link') { if (this.opts.style === 'link') {
Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 }) Object.assign(this.opts, {
strokeAlpha: 0,
strokeActiveAlpha: 0,
fillAlpha: 0,
fillActiveAlpha: 0
})
} }
this._active = null this._active = null
@ -200,7 +213,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
setup() { setup() {
// Button // Button
//----------------- //-----------------
let button = new PIXI.Graphics() let button = new PIXI.Graphics()
@ -222,18 +234,27 @@ export default class Button extends PIXI.Container {
// Icon // Icon
//----------------- //-----------------
if (this.opts.icon) { if (this.opts.icon) {
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor) this.iconInactive = this.loadIcon(
this.opts.icon,
this.opts.iconColor
)
} }
if (this.opts.iconActive) { if (this.opts.iconActive) {
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive) this.iconActive = this.loadIcon(
this.opts.iconActive,
this.opts.iconColorActive
)
} }
// interaction // interaction
//----------------- //-----------------
this.button.on('pointerover', e => { this.button.on('pointerover', e => {
this.capture(e) this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
}) })
this.button.on('pointermove', e => { this.button.on('pointermove', e => {
@ -242,13 +263,19 @@ export default class Button extends PIXI.Container {
this.button.on('pointerout', e => { this.button.on('pointerout', e => {
this.capture(e) this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: 1, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
}) })
// 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)
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .7, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
})
}) })
this.button.on('pointerup', e => { this.button.on('pointerup', e => {
@ -261,7 +288,10 @@ export default class Button extends PIXI.Container {
this.opts.action.call(this, e, this) this.opts.action.call(this, e, this)
} }
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' }) TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') { if (this.opts.type === 'checkbox') {
this.active = !this.active this.active = !this.active
@ -278,15 +308,22 @@ export default class Button extends PIXI.Container {
// active // active
//----------------- //-----------------
this.active = this.opts.active // calls .layout() this.active = this.opts.active // calls .layout()
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
if (typeof this.opts.tooltip === 'string') { if (typeof this.opts.tooltip === 'string') {
this.tooltip = new Tooltip({ object: this, content: this.opts.tooltip }) this.tooltip = new Tooltip({
object: this,
content: this.opts.tooltip
})
} else { } else {
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip) this.opts.tooltip = Object.assign(
{},
{ object: this },
this.opts.tooltip
)
this.tooltip = new Tooltip(this.opts.tooltip) this.tooltip = new Tooltip(this.opts.tooltip)
} }
} }
@ -294,12 +331,15 @@ export default class Button extends PIXI.Container {
// badge // badge
//----------------- //-----------------
if (this.opts.badge) { if (this.opts.badge) {
let opts = Object.assign({}, { let opts = Object.assign(
align: 'right', {},
verticalAlign: 'top', {
offsetLeft: 0, align: 'right',
offsetTop: 0 verticalAlign: 'top',
}) offsetLeft: 0,
offsetTop: 0
}
)
if (typeof this.opts.badge === 'string') { if (typeof this.opts.badge === 'string') {
opts = Object.assign(opts, { content: this.opts.badge }) opts = Object.assign(opts, { content: this.opts.badge })
} else { } else {
@ -309,25 +349,35 @@ export default class Button extends PIXI.Container {
const badge = new Badge(opts) const badge = new Badge(opts)
switch (opts.align) { switch (opts.align) {
case 'left': case 'left':
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 = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft badge.x =
break this.x +
case 'right': this.width / 2 -
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
} }
switch (opts.verticalAlign) { switch (opts.verticalAlign) {
case 'top': case 'top':
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 = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop badge.y =
break this.y +
case 'bottom': this.height / 2 -
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
} }
this.addChild(badge) this.addChild(badge)
@ -348,7 +398,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
layout() { layout() {
// Clear content // Clear content
//----------------- //-----------------
this.removeChild(this.content) this.removeChild(this.content)
@ -434,18 +483,17 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
layoutInnerContent() { layoutInnerContent() {
for (let child of this.content.children) { for (let child of this.content.children) {
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
child.y = 0 child.y = 0
break break
case 'middle': case 'middle':
child.y = this.content.height / 2 - child.height / 2 child.y = this.content.height / 2 - child.height / 2
break break
case 'bottom': case 'bottom':
child.y = this.content.height - child.height child.y = this.content.height - child.height
break break
} }
} }
@ -460,29 +508,30 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
layoutContent() { layoutContent() {
switch (this.opts.align) { switch (this.opts.align) {
case 'left': case 'left':
this.content.x = this.opts.padding this.content.x = this.opts.padding
break break
case 'center': case 'center':
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._width - this.opts.padding - this.content.width this.content.x =
break this._width - this.opts.padding - this.content.width
break
} }
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
this.content.y = this.opts.padding this.content.y = this.opts.padding
break break
case 'middle': case 'middle':
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._height - this.opts.padding - this.content.height this.content.y =
break this._height - this.opts.padding - this.content.height
break
} }
return this return this
@ -495,16 +544,32 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
draw() { draw() {
this.button.clear() this.button.clear()
if (this.active) { if (this.active) {
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) this.button.lineStyle(
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else { } else {
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.button.lineStyle(
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(0, 0, this._width, this._height, this.opts.radius) this.button.drawRoundedRect(
0,
0,
this._width,
this._height,
this.opts.radius
)
this.button.endFill() this.button.endFill()
return this return this
@ -519,7 +584,6 @@ export default class Button extends PIXI.Container {
return this._active return this._active
} }
set active(value) { set active(value) {
this._active = value this._active = value
if (this._active) { if (this._active) {
@ -544,18 +608,17 @@ export default class Button extends PIXI.Container {
return this._disabled return this._disabled
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
if (this._disabled) { if (this._disabled) {
this.button.interactive = false this.button.interactive = false
this.button.buttonMode = false this.button.buttonMode = false
this.button.alpha = .5 this.button.alpha = 0.5
if (this.icon) { if (this.icon) {
this.icon.alpha = .5 this.icon.alpha = 0.5
} }
if (this.text) { if (this.text) {
this.text.alpha = .5 this.text.alpha = 0.5
} }
} else { } else {
this.button.interactive = true this.button.interactive = true
@ -576,7 +639,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
show() { show() {
this.opts.strokeAlpha = 1 this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1 this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1 this.opts.fillAlpha = 1
@ -593,7 +655,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining. * @return {Button} A reference to the button for chaining.
*/ */
hide() { hide() {
this.opts.strokeAlpha = 0 this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0 this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0 this.opts.fillAlpha = 0
@ -613,7 +674,6 @@ export default class Button extends PIXI.Container {
* @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject. * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
*/ */
loadIcon(icon, color) { loadIcon(icon, color) {
let displayObject = null let displayObject = null
if (icon instanceof PIXI.DisplayObject) { if (icon instanceof PIXI.DisplayObject) {
@ -623,10 +683,12 @@ export default class Button extends PIXI.Container {
if (this.text) { if (this.text) {
size = this.text.height size = this.text.height
} else if (this.opts.minHeight) { } else if (this.opts.minHeight) {
size = this.opts.minHeight - (2 * this.opts.padding) size = this.opts.minHeight - 2 * this.opts.padding
} }
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png` const url = Button.iconIsUrl(icon)
? 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)

138
lib/pixi/buttongroup.js
View File

@ -24,7 +24,6 @@ import Button from './button.js'
* @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.Graphics {
/** /**
* Creates an instance of a ButtonGroup. * Creates an instance of a ButtonGroup.
* *
@ -74,45 +73,48 @@ export default class ButtonGroup extends PIXI.Graphics {
* @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
buttons: [], x: 0,
minWidth: 44, y: 0,
minHeight: 44, buttons: [],
padding: theme.padding, minWidth: 44,
margin: theme.margin, minHeight: 44,
iconPosition: 'left', // left, right padding: theme.padding,
iconColor: theme.iconColor, margin: theme.margin,
iconColorActive: theme.iconColorActive, iconPosition: 'left', // left, right
fill: theme.fill, iconColor: theme.iconColor,
fillAlpha: theme.fillAlpha, iconColorActive: theme.iconColorActive,
fillActive: theme.fillActive, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.fillActive,
strokeWidth: theme.strokeWidth, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.strokeActive, strokeWidth: theme.strokeWidth,
strokeActiveWidth: theme.strokeActiveWidth, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.strokeActive,
textStyle: theme.textStyle, strokeActiveWidth: theme.strokeActiveWidth,
textStyleActive: theme.textStyleActive, strokeActiveAlpha: theme.strokeActiveAlpha,
style: 'default', textStyle: theme.textStyle,
radius: theme.radius, textStyleActive: theme.textStyleActive,
disabled: null, style: 'default',
type: 'default', // default, checkbox, radio radius: theme.radius,
orientation: 'horizontal', disabled: null,
align: 'center', // left, center, right type: 'default', // default, checkbox, radio
verticalAlign: 'middle', // top, middle, bottom orientation: 'horizontal',
visible: true align: 'center', // left, center, right
}, opts) verticalAlign: 'middle', // top, middle, bottom
visible: true
},
opts
)
this.buttons = [] this.buttons = []
@ -136,13 +138,11 @@ 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() {
// Buttons // Buttons
//----------------- //-----------------
let position = 0 let position = 0
for (let it of this.opts.buttons) { for (let it of this.opts.buttons) {
delete it.x delete it.x
delete it.y delete it.y
@ -164,11 +164,19 @@ 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 != null ? it.strokeWidth : this.opts.strokeWidth it.strokeWidth =
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
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 != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth it.strokeActiveWidth =
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha it.strokeActiveWidth != null
? 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
@ -187,7 +195,10 @@ 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 (this.opts.type === 'radio' && button.opts.type === 'default') { if (
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
@ -202,9 +213,13 @@ export default class ButtonGroup extends PIXI.Graphics {
if (it.tooltip) { if (it.tooltip) {
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({}, {container: this}, it.tooltip) it.tooltip = Object.assign(
{},
{ container: this },
it.tooltip
)
} }
} }
@ -213,7 +228,10 @@ export default class ButtonGroup extends PIXI.Graphics {
this.addChild(button) this.addChild(button)
this.buttons.push(button) this.buttons.push(button)
position += (this.opts.orientation === 'horizontal' ? button.width : 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') {
@ -240,7 +258,6 @@ 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.
*/ */
layout() { layout() {
// set position // set position
//----------------- //-----------------
this.position.set(this.opts.x, this.opts.y) this.position.set(this.opts.x, this.opts.y)
@ -259,18 +276,30 @@ 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.
*/ */
draw() { draw() {
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.clear()
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.lineStyle(
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)
this.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius) this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
// Draw borders // Draw borders
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2) this.lineStyle(
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) {
@ -281,7 +310,6 @@ export default class ButtonGroup extends PIXI.Graphics {
} else { } else {
this.lineTo(it.width, it.y) this.lineTo(it.width, it.y)
} }
} }
}) })
@ -301,10 +329,9 @@ export default class ButtonGroup extends PIXI.Graphics {
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
this.buttons.forEach(it => it.disabled = value) this.buttons.forEach(it => (it.disabled = value))
} }
/** /**
@ -314,7 +341,6 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {number} The maximum with of a button of the button group. * @return {number} The maximum with of a button of the button group.
*/ */
getMaxButtonWidth() { getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width) let widths = this.buttons.map(it => it.width)
return Math.max(...widths) return Math.max(...widths)
@ -326,7 +352,6 @@ 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.
*/ */
show() { show() {
this.alpha = 1 this.alpha = 1
return this return this
@ -338,7 +363,6 @@ 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.
*/ */
hide() { hide() {
this.alpha = 0 this.alpha = 0
return this return this

118
lib/pixi/flipeffect.js
View File

@ -1,13 +1,12 @@
import {getId, Angle} from '../utils.js' import { getId, Angle } from '../utils.js'
import {DOMScatter} from '../scatter.js' import { DOMScatter } from '../scatter.js'
import {CardLoader, DOMFlip, DOMFlippable} from '../flippable.js' import { CardLoader, DOMFlip, DOMFlippable } from '../flippable.js'
import {Capabilities} from '../capabilities.js' import { Capabilities } from '../capabilities.js'
import {DeepZoomImage} from './deepzoom/image.js' import { DeepZoomImage } from './deepzoom/image.js'
let globalScatterLoaderCanvas = null let globalScatterLoaderCanvas = null
export class ScatterLoader extends CardLoader { export class ScatterLoader extends CardLoader {
get scatter() { get scatter() {
return this.src return this.src
} }
@ -35,8 +34,7 @@ export class ScatterLoader extends CardLoader {
if (isSprite) { if (isSprite) {
w = this.scatter.displayObject.texture.width w = this.scatter.displayObject.texture.width
h = this.scatter.displayObject.texture.height h = this.scatter.displayObject.texture.height
} } else if (isDeepZoom) {
else if (isDeepZoom) {
let [ww, hh] = this.scatter.displayObject.baseSize let [ww, hh] = this.scatter.displayObject.baseSize
w = ww w = ww
h = hh h = hh
@ -48,8 +46,9 @@ export class ScatterLoader extends CardLoader {
canvas.width = w canvas.width = w
canvas.height = h canvas.height = h
let renderer = new PIXI.WebGLRenderer(w, h, { let renderer = new PIXI.WebGLRenderer(w, h, {
view: canvas, view: canvas,
resolution: resolution}) resolution: resolution
})
let displayObject = this.scatter.displayObject let displayObject = this.scatter.displayObject
let x = displayObject.x let x = displayObject.x
@ -64,8 +63,7 @@ export class ScatterLoader extends CardLoader {
if (Capabilities.isSafari) { if (Capabilities.isSafari) {
displayObject.y = h displayObject.y = h
displayObject.scale.set(1, -1) // sx, -sy) displayObject.scale.set(1, -1) // sx, -sy)
} } else {
else {
displayObject.y = 0 displayObject.y = 0
displayObject.scale.set(1, 1) displayObject.scale.set(1, 1)
} }
@ -87,12 +85,11 @@ export class ScatterLoader extends CardLoader {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement let isImage = domNode instanceof HTMLImageElement
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
let image = (isImage) ? domNode : document.createElement("img") let image = isImage ? domNode : document.createElement('img')
let [x, y, w, h, cloneURL] = this.cloneScatterImage() let [x, y, w, h, cloneURL] = this.cloneScatterImage()
let [ww, hh] = this.unscaledSize() let [ww, hh] = this.unscaledSize()
image.onload = (e) => { image.onload = e => {
if (!isImage) if (!isImage) domNode.appendChild(image)
domNode.appendChild(image)
this.x = x this.x = x
this.y = y this.y = y
this.wantedWidth = ww this.wantedWidth = ww
@ -101,40 +98,42 @@ export class ScatterLoader extends CardLoader {
this.rotation = this.scatter.rotation this.rotation = this.scatter.rotation
resolve(this) resolve(this)
} }
image.onerror = (e) => { image.onerror = e => {
reject(this) reject(this)
} }
image.src = cloneURL image.src = cloneURL
}) })
} }
} }
export default class FlipEffect { export default class FlipEffect {
constructor(scatter, domScatterContainer, flipTemplate, backLoader) { constructor(scatter, domScatterContainer, flipTemplate, backLoader) {
this.flipped = false this.flipped = false
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(domScatterContainer, flipTemplate, this.domFlip = new DOMFlip(
this.scatterLoader, domScatterContainer,
backLoader, { flipTemplate,
onBack: this.backCardClosed.bind(this) this.scatterLoader,
}) backLoader,
{
onBack: this.backCardClosed.bind(this)
}
)
this.setupInfoButton() this.setupInfoButton()
} }
startFlip() { startFlip() {
let center = this.flipCenter() let center = this.flipCenter()
let loader = this.backLoader let loader = this.backLoader
this.domFlip.load().then((domFlip) => { this.domFlip.load().then(domFlip => {
this.scatter.displayObject.visible = false this.scatter.displayObject.visible = false
domFlip.centerAt(center) domFlip.centerAt(center)
domFlip.zoom(this.scatter.scale) domFlip.zoom(this.scatter.scale)
let target = this.constraintFlipCenter(center, loader) let target = this.constraintFlipCenter(center, loader)
console.log("FlipEffect.startFlip", target, loader) console.log('FlipEffect.startFlip', target, loader)
domFlip.start({targetCenter: target}) domFlip.start({ targetCenter: target })
}) })
} }
@ -144,13 +143,15 @@ export default class FlipEffect {
flipCenter() { flipCenter() {
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
let resolution = (isSprite) ? app.renderer.resolution : 1 let resolution = isSprite ? app.renderer.resolution : 1
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(canvas, let page = window.convertPointFromNodeToPage(
center.x*resolution, canvas,
center.y*resolution) 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
} }
@ -158,18 +159,14 @@ export default class FlipEffect {
constraintFlipCenter(center, loader) { constraintFlipCenter(center, loader) {
let w = loader.wantedWidth let w = loader.wantedWidth
let h = loader.wantedHeight let h = loader.wantedHeight
console.log("constraintFlipCenter", w, h) console.log('constraintFlipCenter', w, h)
let canvas = app.renderer.view let canvas = app.renderer.view
let x = center.x let x = center.x
let y = center.y let y = center.y
if (x < w/2) if (x < w / 2) x = w / 2
x = w/2 if (y < h / 2) y = h / 2
if (y < h/2) if (x > canvas.width) x = canvas.width - w / 2
y = h/2 if (y > canvas.height) y = canvas.height - h / 2
if (x > canvas.width)
x = canvas.width - w/2
if (y > canvas.height)
y = canvas.height - h/2
return { x, y } return { x, y }
} }
@ -177,22 +174,26 @@ export default class FlipEffect {
let iscale = 1.0 / this.scatter.scale let iscale = 1.0 / this.scatter.scale
this.infoBtn = new PIXI.Graphics() this.infoBtn = new PIXI.Graphics()
this.infoBtn.beginFill(0x333333) this.infoBtn.beginFill(0x333333)
this.infoBtn.lineStyle(4, 0xFFFFFF) this.infoBtn.lineStyle(4, 0xffffff)
this.infoBtn.drawCircle(0, 0, 22) this.infoBtn.drawCircle(0, 0, 22)
this.infoBtn.endFill() this.infoBtn.endFill()
this.infoBtn.beginFill(0xFFFFFF) this.infoBtn.beginFill(0xffffff)
this.infoBtn.lineStyle(0) this.infoBtn.lineStyle(0)
this.infoBtn.drawCircle(0, -8, 4) this.infoBtn.drawCircle(0, -8, 4)
this.infoBtn.endFill() this.infoBtn.endFill()
this.infoBtn.lineStyle(6, 0xFFFFFF) this.infoBtn.lineStyle(6, 0xffffff)
this.infoBtn.moveTo(0, -2) this.infoBtn.moveTo(0, -2)
this.infoBtn.lineTo(0, 14) this.infoBtn.lineTo(0, 14)
this.infoBtn.endFill() this.infoBtn.endFill()
this.infoBtn.on('click', (e) => { this.infoSelected() }) this.infoBtn.on('click', e => {
this.infoBtn.on('tap', (e) => { this.infoSelected() }) this.infoSelected()
})
this.infoBtn.on('tap', e => {
this.infoSelected()
})
this.infoBtn.interactive = true this.infoBtn.interactive = true
this.infoBtn.width = 44 this.infoBtn.width = 44
@ -207,8 +208,7 @@ export default class FlipEffect {
this.infoBtn.scale.x = iscale this.infoBtn.scale.x = iscale
this.infoBtn.scale.y = iscale this.infoBtn.scale.y = iscale
displayObject.foreground.addChild(this.infoBtn) displayObject.foreground.addChild(this.infoBtn)
} } else {
else {
displayObject.addChild(this.infoBtn) displayObject.addChild(this.infoBtn)
} }
@ -231,15 +231,15 @@ 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.getContext ('2d').drawImage(svgImage, 0, 0, canvas
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)
if (displayObject.foreground) { if (displayObject.foreground) {
displayObject.foreground.addChild(this.infoBtn) displayObject.foreground.addChild(this.infoBtn)
} } else {
else {
displayObject.addChild(this.infoBtn) displayObject.addChild(this.infoBtn)
} }
this.infoBtn.scale.set(0.5, 0.5) this.infoBtn.scale.set(0.5, 0.5)
@ -248,8 +248,12 @@ export default class FlipEffect {
this.infoBtn.position = new PIXI.Point(w, h) this.infoBtn.position = new PIXI.Point(w, h)
this.infoBtn.interactive = true this.infoBtn.interactive = true
this.infoBtn.updateTransform() this.infoBtn.updateTransform()
this.infoBtn.on('click', (e) => { this.infoSelected() }) this.infoBtn.on('click', e => {
this.infoBtn.on('tap', (e) => { this.infoSelected() }) this.infoSelected()
})
this.infoBtn.on('tap', e => {
this.infoSelected()
})
} }
svgImage.src = url svgImage.src = url
} }
@ -275,13 +279,11 @@ export default class FlipEffect {
let ortho = 90 let ortho = 90
let rest = alpha % ortho let rest = alpha % ortho
let delta = 0.0 let delta = 0.0
if (rest > (ortho / 2.0)) { if (rest > ortho / 2.0) {
delta = ortho - rest delta = ortho - rest
} } else {
else {
delta = -rest delta = -rest
} }
return delta return delta
} }
} }

119
lib/pixi/flippable.js
View File

@ -42,7 +42,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
*/ */
export default class Flippable extends PIXI.projection.Camera3d { export default class Flippable extends PIXI.projection.Camera3d {
/** /**
* Creates an instance of a Flippable. * Creates an instance of a Flippable.
* *
@ -68,30 +67,38 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished. * @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished.
*/ */
constructor(front, back, renderer, opts = {}) { constructor(front, back, renderer, opts = {}) {
super() super()
this.opts = Object.assign({}, { this.opts = Object.assign(
front, {},
back, {
renderer, front,
duration: 1, back,
ease: Power2.easeOut, renderer,
shadow: false, duration: 1,
eulerX: 0, ease: Power2.easeOut,
eulerY: 0, shadow: false,
eulerEase: Power1.easeOut, eulerX: 0,
useBackTransforms: false, eulerY: 0,
transformEase: Power2.easeOut, eulerEase: Power1.easeOut,
focus: 800, useBackTransforms: false,
near: 10, transformEase: Power2.easeOut,
far: 10000, focus: 800,
orthographic: false near: 10,
}, opts) far: 10000,
orthographic: false
},
opts
)
// planes // planes
//-------------------- //--------------------
this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic) this.setPlanes(
this.opts.focus,
this.opts.near,
this.opts.far,
this.opts.orthographic
)
// flipped // flipped
//-------------------- //--------------------
@ -113,8 +120,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining. * @return {Flippable} A reference to the flippable for chaining.
*/ */
setup() { setup() {
const scale = 0.5
const scale = .5
// filters // filters
//-------------------- //--------------------
@ -131,10 +137,12 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow // shadow
//-------------------- //--------------------
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png')) const shadow = new PIXI.projection.Sprite3d(
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(.98) shadow.scale3d.set(0.98)
shadow.alpha = 0.7 shadow.alpha = 0.7
shadow.filters = [blurFilter] shadow.filters = [blurFilter]
shadow.visible = this.opts.shadow shadow.visible = this.opts.shadow
@ -153,7 +161,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY) const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
front.scale.set(-1 / scale, 1 / scale) front.scale.set(-1 / scale, 1 / scale)
front.renderable = true front.renderable = true
front.anchor.set(.5) front.anchor.set(0.5)
inner.addChild(front) inner.addChild(front)
this.objects.front = front this.objects.front = front
@ -162,7 +170,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY) const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
back.scale.set(1 / scale, 1 / scale) back.scale.set(1 / scale, 1 / scale)
back.renderable = false back.renderable = false
back.anchor.set(.5) back.anchor.set(0.5)
inner.addChild(back) inner.addChild(back)
this.objects.back = back this.objects.back = back
@ -178,7 +186,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
return this._flipped return this._flipped
} }
set flipped(toBack) { set flipped(toBack) {
this._flipped = toBack this._flipped = toBack
// references // references
@ -224,11 +231,21 @@ 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 ? toObject.width * 2 : fromObject.width * 2, width: this.opts.useBackTransforms
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2, ? toObject.width * 2
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation, : fromObject.width * 2,
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x, height: this.opts.useBackTransforms
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y ? toObject.height * 2
: 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
@ -305,20 +322,24 @@ export default class Flippable extends PIXI.projection.Camera3d {
// camera // camera
//-------------------- //--------------------
new TimelineMax() new TimelineMax()
.to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease}) .to(this.euler, half, {
.to(this.euler, half, {x: 0, y: 0, ease}) x: this.opts.eulerX,
y: this.opts.eulerY,
ease
})
.to(this.euler, half, { x: 0, y: 0, ease })
// shadow // shadow
//-------------------- //--------------------
new TimelineMax() new TimelineMax()
.to(shadow, half, {alpha: .3, ease}) .to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, {alpha: .7, ease}) .to(shadow, half, { alpha: 0.7, ease })
// blurfilter // blurfilter
//-------------------- //--------------------
new TimelineMax() new TimelineMax()
.to(blurFilter, half, {blur: 6, ease}) .to(blurFilter, half, { blur: 6, ease })
.to(blurFilter, half, {blur: .2, ease}) .to(blurFilter, half, { blur: 0.2, ease })
} }
/** /**
@ -327,13 +348,13 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining. * @return {Flippable} A reference to the flippable for chaining.
*/ */
layout() { layout() {
const front = this.objects.front const front = this.objects.front
const back = this.objects.back const back = this.objects.back
const shadow = this.objects.shadow const shadow = this.objects.shadow
const inner = this.objects.inner const inner = this.objects.inner
inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2 inner.position3d.z =
-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
@ -398,13 +419,25 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {PIXI.Texture} The generated PIXI.Texture. * @return {PIXI.Texture} The generated PIXI.Texture.
*/ */
generateTexture(displayObject) { generateTexture(displayObject) {
// renderTexture // renderTexture
//-------------------- //--------------------
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height) const renderTexture = PIXI.RenderTexture.create(
displayObject.width,
displayObject.height
)
// save position // save position
const transform = [displayObject.x, displayObject.y, displayObject.scale.x, displayObject.scale.y, displayObject.rotation, displayObject.skew.x, displayObject.skew.y, displayObject.pivot.x, displayObject.pivot.y] const transform = [
displayObject.x,
displayObject.y,
displayObject.scale.x,
displayObject.scale.y,
displayObject.rotation,
displayObject.skew.x,
displayObject.skew.y,
displayObject.pivot.x,
displayObject.pivot.y
]
displayObject.position.set(0, 0) displayObject.position.set(0, 0)
displayObject.skew.set(0, 0) displayObject.skew.set(0, 0)

93
lib/pixi/labeledgraphics.js
View File

@ -1,10 +1,7 @@
/** /**
* Defines usefull default text styles. * Defines usefull default text styles.
*/ */
export class FontInfo { export class FontInfo {
static get small() { static get small() {
return app.theme.textStyleSmall return app.theme.textStyleSmall
} }
@ -24,11 +21,9 @@ export class FontInfo {
* @class Hypenate * @class Hypenate
*/ */
export class Hypenate { export class Hypenate {
static splitPart(part) { static splitPart(part) {
let parts = part.split('-') let parts = part.split('-')
if (parts.length == 1) if (parts.length == 1) return [part]
return [part]
let result = [] let result = []
let last = parts.pop() let last = parts.pop()
for (let p of parts) { for (let p of parts) {
@ -39,7 +34,7 @@ export class Hypenate {
} }
static splitWord(word) { static splitWord(word) {
if (typeof (language) == 'undefined') { if (typeof language == 'undefined') {
if (word.indexOf('-') > -1) { if (word.indexOf('-') > -1) {
return word.split('-') return word.split('-')
} }
@ -58,11 +53,11 @@ export class Hypenate {
static abbreviateLine(label, style, width) { static abbreviateLine(label, style, width) {
const pixiStyle = new PIXI.TextStyle(style) const pixiStyle = new PIXI.TextStyle(style)
let metrics = PIXI.TextMetrics.measureText(label, pixiStyle) let metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
while(metrics.width > width && label.length > 3) { while (metrics.width > width && label.length > 3) {
label = label.slice(0, label.length-1) label = label.slice(0, label.length - 1)
metrics = PIXI.TextMetrics.measureText(label, pixiStyle) metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
} }
label = label.slice(0, label.length-1) label = label.slice(0, label.length - 1)
return label + '…' return label + '…'
} }
@ -78,17 +73,21 @@ export class Hypenate {
if (parts.length == 1) { if (parts.length == 1) {
newWord += '\n' + word + ' ' newWord += '\n' + word + ' '
x = wordMetrics.width + space.width x = wordMetrics.width + space.width
} } else {
else {
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(part, pixiStyle) let partMetrics = PIXI.TextMetrics.measureText(
part,
pixiStyle
)
if (x + partMetrics.width + space.width > width) { if (x + partMetrics.width + space.width > width) {
newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part newWord +=
(first || lastPart.endsWith('-')
? '\n'
: '-\n') + part
x = partMetrics.width x = partMetrics.width
} } else {
else {
newWord += part newWord += part
x += partMetrics.width x += partMetrics.width
} }
@ -98,8 +97,7 @@ export class Hypenate {
x += space.width x += space.width
} }
result += newWord + ' ' result += newWord + ' '
} } else {
else {
result += word + ' ' result += word + ' '
x += wordMetrics.width + space.width x += wordMetrics.width + space.width
} }
@ -131,7 +129,6 @@ export class Hypenate {
} }
class TextLabel extends PIXI.Text { class TextLabel extends PIXI.Text {
/** /**
*Creates an instance of TextLabel. *Creates an instance of TextLabel.
* @param {string} text - The string that you would like the text to display * @param {string} text - The string that you would like the text to display
@ -139,8 +136,13 @@ class TextLabel extends PIXI.Text {
* @param {canvas} * @param {canvas}
* @memberof TextLabel * @memberof TextLabel
*/ */
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) { constructor(
super(text, style, canvas ) text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize this.normFontSize = this.style.fontSize
this.minZoom = minZoom this.minZoom = minZoom
this.maxZoom = maxZoom this.maxZoom = maxZoom
@ -180,7 +182,6 @@ class TextLabel extends PIXI.Text {
* @extends {PIXI.Graphics} * @extends {PIXI.Graphics}
*/ */
export class LabeledGraphics extends PIXI.Graphics { export class LabeledGraphics extends PIXI.Graphics {
/** /**
* Creates an instance of LabeledGraphics and defines a local label cache. * Creates an instance of LabeledGraphics and defines a local label cache.
* *
@ -195,7 +196,6 @@ export class LabeledGraphics extends PIXI.Graphics {
return new TextLabel(label, fontInfo) return new TextLabel(label, fontInfo)
} }
/** /**
* Main additional method. Ensures that a text object is created that is cached * Main additional method. Ensures that a text object is created that is cached
* under the given key. * under the given key.
@ -213,11 +213,9 @@ export class LabeledGraphics extends PIXI.Graphics {
* @memberof LabeledGraphics * @memberof LabeledGraphics
*/ */
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) { ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
if (attrs.maxWidth && attrs.maxLines == 1) { if (attrs.maxWidth && attrs.maxLines == 1) {
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth) label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
} } else {
else {
if (attrs.maxWidth) { if (attrs.maxWidth) {
label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth) label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth)
} }
@ -241,8 +239,7 @@ export class LabeledGraphics extends PIXI.Graphics {
for (let k in attrs) { for (let k in attrs) {
text[k] = attrs[k] text[k] = attrs[k]
} }
if (label != text.text) if (label != text.text) text.text = label
text.text = label
// We do not follow the flexbox jargon and use align for x and justify for y axis // We do not follow the flexbox jargon and use align for x and justify for y axis
// This deviation is needed to ensure backward compatability // This deviation is needed to ensure backward compatability
switch (attrs.justify || null) { switch (attrs.justify || null) {
@ -293,17 +290,30 @@ 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(`\u00A0\n...\n${words.join('\n')}`, pixiStyle) const wordMetrics = PIXI.TextMetrics.measureText(
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths `\u00A0\n...\n${words.join('\n')}`,
const { text: newLastLine } = wordLengths.reduce((data, wordLength, i) => { pixiStyle
if (data.length + wordLength + spaceLength >= wordWrapWidth) { )
return { ...data, length: wordWrapWidth } const [
} spaceLength,
return { dotsLength,
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`, ...wordLengths
length: data.length + wordLength + spaceLength, ] = wordMetrics.lineWidths
}; const { text: newLastLine } = wordLengths.reduce(
}, { text: '', length: dotsLength }) (data, wordLength, i) => {
if (
data.length + wordLength + spaceLength >=
wordWrapWidth
) {
return { ...data, length: wordWrapWidth }
}
return {
text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
length: data.length + wordLength + spaceLength
}
},
{ text: '', length: dotsLength }
)
truncatedLines[truncatedLines.length - 1] = `${newLastLine}...` truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`
newText = truncatedLines.join('\n') newText = truncatedLines.join('\n')
} }
@ -344,7 +354,6 @@ export class LabeledGraphics extends PIXI.Graphics {
label.destroy() label.destroy()
} }
/** /**
* Ensures that labels are hidden on clear. * Ensures that labels are hidden on clear.
* *
@ -367,7 +376,6 @@ export class LabeledGraphics extends PIXI.Graphics {
} }
} }
const labelCache = new Map() const labelCache = new Map()
function getTexture(label, fontInfo = FontInfo.normal) { function getTexture(label, fontInfo = FontInfo.normal) {
@ -385,7 +393,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
} }
class SpriteLabel extends PIXI.Sprite { class SpriteLabel extends PIXI.Sprite {
constructor(label, fontInfo) { constructor(label, fontInfo) {
let texture = getTexture(label, fontInfo) let texture = getTexture(label, fontInfo)
super(texture) super(texture)
@ -405,10 +412,8 @@ class SpriteLabel extends PIXI.Sprite {
} }
export class BitmapLabeledGraphics extends LabeledGraphics { export class BitmapLabeledGraphics extends LabeledGraphics {
_createText(label, fontInfo) { _createText(label, fontInfo) {
let texture = getTexture(label, fontInfo) let texture = getTexture(label, fontInfo)
return new SpriteLabel(texture) return new SpriteLabel(texture)
} }
} }

106
lib/pixi/list.js
View File

@ -21,7 +21,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
*/ */
export default class List extends PIXI.Container { export default class List extends PIXI.Container {
/** /**
* Creates an instance of a Flippable. * Creates an instance of a Flippable.
* *
@ -43,19 +42,22 @@ export default class List extends PIXI.Container {
* scroll your list. * scroll your list.
*/ */
constructor(items = [], opts = {}) { constructor(items = [], opts = {}) {
super() super()
this.opts = Object.assign({}, { this.opts = Object.assign(
padding: 10, {},
margin: 10, {
orientation: 'vertical', padding: 10,
align: 'left', margin: 10,
verticalAlign: 'middle', orientation: 'vertical',
width: null, align: 'left',
height: null, verticalAlign: 'middle',
app: null width: null,
}, opts) height: null,
app: null
},
opts
)
this.__items = items this.__items = items
this.__dragging = false this.__dragging = false
@ -72,7 +74,6 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining. * @return {List} A reference to the list for chaining.
*/ */
setup() { setup() {
// inner container // inner container
//-------------------- //--------------------
const container = new PIXI.Container() const container = new PIXI.Container()
@ -87,7 +88,7 @@ export default class List extends PIXI.Container {
// add items // add items
//-------------------- //--------------------
for(let item of this.__items) { for (let item of this.__items) {
container.addChild(item) container.addChild(item)
} }
@ -107,7 +108,9 @@ 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 ? this.mask.getBounds() : this.getBounds() const bounds = this.mask
? 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)) {
@ -131,7 +134,7 @@ export default class List extends PIXI.Container {
setItems(items) { setItems(items) {
this.container.removeChildren() this.container.removeChildren()
this.__items = items this.__items = items
for(let item of this.__items) { for (let item of this.__items) {
this.container.addChild(item) this.container.addChild(item)
} }
this.layout() this.layout()
@ -143,14 +146,12 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining. * @return {List} A reference to the list for chaining.
*/ */
layout() { layout() {
const margin = this.opts.margin const margin = this.opts.margin
let x = margin let x = margin
let y = margin let y = margin
for (let item of this.__items) { for (let item of this.__items) {
item.x = x item.x = x
item.y = y item.y = y
@ -166,13 +167,17 @@ 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(it => it.x = margin + this.width / 2 - it.width / 2) this.__items.forEach(
it => (it.x = margin + this.width / 2 - it.width / 2)
)
break break
case 'right': case 'right':
this.__items.forEach(it => it.x = margin + this.width - it.width) this.__items.forEach(
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))
break break
} }
@ -192,13 +197,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) { switch (this.opts.verticalAlign) {
case 'top': case 'top':
this.__items.forEach(it => it.y = margin) this.__items.forEach(it => (it.y = margin))
break break
case 'bottom': case 'bottom':
this.__items.forEach(it => it.y = margin + this.height - it.height) this.__items.forEach(
it => (it.y = margin + this.height - it.height)
)
break break
default: default:
this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2) this.__items.forEach(
it => (it.y = margin + this.height / 2 - it.height / 2)
)
break break
} }
@ -220,10 +229,9 @@ export default class List extends PIXI.Container {
* *
*/ */
get innerWidth() { get innerWidth() {
let size = 0 let size = 0
this.__items.forEach(it => size += it.width) this.__items.forEach(it => (size += it.width))
size += this.opts.padding * (this.__items.length - 1) size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin size += 2 * this.opts.margin
@ -234,10 +242,9 @@ export default class List extends PIXI.Container {
* *
*/ */
get innerHeight() { get innerHeight() {
let size = 0 let size = 0
this.__items.forEach(it => size += it.height) this.__items.forEach(it => (size += it.height))
size += this.opts.padding * (this.__items.length - 1) size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin size += 2 * this.opts.margin
@ -250,7 +257,6 @@ export default class List extends PIXI.Container {
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list. * @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
*/ */
resize(widthOrHeight) { resize(widthOrHeight) {
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
this.opts.width = widthOrHeight this.opts.width = widthOrHeight
} else { } else {
@ -266,7 +272,6 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onStart(event) { onStart(event) {
this.__dragging = true this.__dragging = true
this.capture(event) this.capture(event)
@ -276,8 +281,8 @@ export default class List extends PIXI.Container {
y: this.container.position.y - event.data.global.y y: this.container.position.y - event.data.global.y
} }
TweenLite.killTweensOf(this.container.position, {x: true, y: true}) TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != "undefined") { if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y') ThrowPropsPlugin.track(this.container.position, 'x,y')
} }
} }
@ -288,9 +293,7 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onMove(event) { onMove(event) {
if (this.__dragging) { if (this.__dragging) {
this.capture(event) this.capture(event)
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
@ -307,7 +310,6 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onEnd(event) { onEnd(event) {
if (this.__dragging) { if (this.__dragging) {
this.__dragging = false this.__dragging = false
@ -333,12 +335,18 @@ export default class List extends PIXI.Container {
} }
} }
if (typeof ThrowPropsPlugin != "undefined") { if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(this.container.position, { ThrowPropsPlugin.to(
throwProps, this.container.position,
ease: Strong.easeOut, {
onComplete: () => ThrowPropsPlugin.untrack(this.container.position) throwProps,
}, .8, .4) ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
} }
} }
} }
@ -349,21 +357,26 @@ export default class List extends PIXI.Container {
* @param {*} event * @param {*} event
*/ */
onScroll(event) { onScroll(event) {
this.capture(event) this.capture(event)
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
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 (this.container.position.x + this.innerWidth < this.opts.width) { } else if (
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 (this.container.position.y + this.innerHeight < this.opts.height) { } else if (
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
} }
} }
@ -375,7 +388,10 @@ 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 = event.data && event.data.originalEvent ? event.data.originalEvent : event const originalEvent =
event.data && event.data.originalEvent
? event.data.originalEvent
: event
Events.capturedBy(originalEvent, this) Events.capturedBy(originalEvent, this)
} }
} }

44
lib/pixi/message.js
View File

@ -1,5 +1,5 @@
import Theme from './theme.js' import Theme from './theme.js'
import {InteractivePopup} from './popup.js' import { InteractivePopup } from './popup.js'
/** /**
* Class that represents a Message. A message pops up and disappears after a specific amount of time. * Class that represents a Message. A message pops up and disappears after a specific amount of time.
@ -33,7 +33,6 @@ import {InteractivePopup} from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
*/ */
export default class Message extends InteractivePopup { export default class Message extends InteractivePopup {
/** /**
* Creates an instance of a Message. * Creates an instance of a Message.
* *
@ -53,21 +52,24 @@ export default class Message extends InteractivePopup {
* @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box. * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
app: window.app, {},
closeButton: false, {
minWidth: 280, app: window.app,
minHeight: 100, closeButton: false,
margin: theme.margin, minWidth: 280,
align: 'right', // left, center, right minHeight: 100,
verticalAlign: 'top', // top, middle, bottom margin: theme.margin,
duration: 5, align: 'right', // left, center, right
autoClose: true, verticalAlign: 'top', // top, middle, bottom
closeDuration: theme.fast duration: 5,
}, opts) autoClose: true,
closeDuration: theme.fast
},
opts
)
super(opts) super(opts)
} }
@ -78,7 +80,6 @@ export default class Message extends InteractivePopup {
* @return {Message} Returns the message box for chaining. * @return {Message} Returns the message box for chaining.
*/ */
layout() { layout() {
super.layout() super.layout()
// horizontal // horizontal
@ -87,10 +88,11 @@ export default class Message extends InteractivePopup {
this.x = this.opts.margin this.x = this.opts.margin
break break
case 'center': case 'center':
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.opts.app.size.width - this.opts.margin - this.width this.x =
this.opts.app.size.width - this.opts.margin - this.width
break break
} }
@ -100,10 +102,11 @@ export default class Message extends InteractivePopup {
this.y = this.opts.margin this.y = this.opts.margin
break break
case 'middle': case 'middle':
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.opts.app.size.height - this.opts.margin - this.height this.y =
this.opts.app.size.height - this.opts.margin - this.height
break break
} }
} }
@ -114,7 +117,6 @@ export default class Message extends InteractivePopup {
* @private * @private
*/ */
show() { show() {
super.show() super.show()
if (this.opts.autoClose) { if (this.opts.autoClose) {

41
lib/pixi/modal.js
View File

@ -1,5 +1,5 @@
import Theme from './theme.js' import Theme from './theme.js'
import {InteractivePopup} from './popup.js' import { InteractivePopup } from './popup.js'
/** /**
* Class that represents a PixiJS Modal. * Class that represents a PixiJS Modal.
@ -28,7 +28,6 @@ import {InteractivePopup} from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
*/ */
export default class Modal extends PIXI.Container { export default class Modal extends PIXI.Container {
/** /**
* Creates an instance of a Modal. * Creates an instance of a Modal.
* *
@ -43,20 +42,23 @@ export default class Modal extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
app: window.app, {
backgroundFill: theme.background, id: PIXI.utils.uid(),
backgroundFillAlpha: .6, app: window.app,
closeOnBackground: true, backgroundFill: theme.background,
visible: true backgroundFillAlpha: 0.6,
}, opts) closeOnBackground: true,
visible: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -82,7 +84,6 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
setup() { setup() {
// interaction // interaction
//----------------- //-----------------
this.interactive = true this.interactive = true
@ -127,14 +128,16 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
layout() { layout() {
const width = this.opts.app.size.width const width = this.opts.app.size.width
const height = this.opts.app.size.height const height = this.opts.app.size.height
// background // background
//----------------- //-----------------
this.background.clear() this.background.clear()
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha) this.background.beginFill(
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()
@ -151,7 +154,10 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
show() { show() {
TweenLite.to(this, this.theme.fast, {alpha: 1, onStart: () => this.visible = true}) TweenLite.to(this, this.theme.fast, {
alpha: 1,
onStart: () => (this.visible = true)
})
return this return this
} }
@ -162,7 +168,10 @@ export default class Modal extends PIXI.Container {
* @return {Modal} A reference to the modal for chaining. * @return {Modal} A reference to the modal for chaining.
*/ */
hide() { hide() {
TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false}) TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => (this.visible = false)
})
return this return this
} }

62
lib/pixi/popover.js
View File

@ -2,11 +2,28 @@
* *
*/ */
export default class Popover extends PIXI.Graphics { export default class Popover extends PIXI.Graphics {
constructor({
constructor({title = null, text = null, x = 0, y = 0, placement = 'top', width = 250, titleStyle = {}, textStyle = {fontSize: '1.6em'}} = {}) { title = null,
text = null,
x = 0,
y = 0,
placement = 'top',
width = 250,
titleStyle = {},
textStyle = { fontSize: '1.6em' }
} = {}) {
super() super()
this.opts = {title, text, x, y, placement, width, titleStyle, textStyle} this.opts = {
title,
text,
x,
y,
placement,
width,
titleStyle,
textStyle
}
this.padding = 12 this.padding = 12
@ -16,11 +33,15 @@ export default class Popover extends PIXI.Graphics {
stroke: '#f6f6f6', stroke: '#f6f6f6',
strokeThickness: 3, strokeThickness: 3,
wordWrap: true, wordWrap: true,
wordWrapWidth: width - (this.padding * 2) wordWrapWidth: width - this.padding * 2
} }
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle)) this.titleTextStyle = new PIXI.TextStyle(
this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle)) Object.assign({}, style, titleStyle)
)
this.textTextStyle = new PIXI.TextStyle(
Object.assign({}, style, textStyle)
)
if (title || text) { if (title || text) {
this.setup() this.setup()
@ -43,7 +64,10 @@ 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.padding, this.titleY + this.titleHeight + this.padding) this.textText.position.set(
this.padding,
this.titleY + this.titleHeight + this.padding
)
this.addChild(this.textText) this.addChild(this.textText)
} }
@ -58,7 +82,7 @@ export default class Popover extends PIXI.Graphics {
draw() { draw() {
this.clear() this.clear()
this.beginFill(0xffffff, 1) this.beginFill(0xffffff, 1)
this.lineStyle(1, 0x282828, .5) this.lineStyle(1, 0x282828, 0.5)
// Draw rounded rectangle // Draw rounded rectangle
const height = this.height + this.padding const height = this.height + this.padding
@ -72,7 +96,7 @@ export default class Popover extends PIXI.Graphics {
this.lineStyle(0) this.lineStyle(0)
this.beginFill(0xf7f7f7, 1) this.beginFill(0xf7f7f7, 1)
let x = 1 let x = 1
let y = this.titleText.x + this.titleText.height + (this.padding / 2) let y = this.titleText.x + this.titleText.height + this.padding / 2
this.moveTo(x, y) this.moveTo(x, y)
y = 9 y = 9
this.lineTo(x, y) this.lineTo(x, y)
@ -82,7 +106,7 @@ export default class Popover extends PIXI.Graphics {
this.lineTo(x, y) this.lineTo(x, y)
this.quadraticCurveTo(x + 5, y, x + 5, y + 8) this.quadraticCurveTo(x + 5, y, x + 5, y + 8)
x += 5 x += 5
y += this.titleText.x + this.titleText.height + (this.padding / 2) y += this.titleText.x + this.titleText.height + this.padding / 2
this.lineTo(x, y) this.lineTo(x, y)
if (this.opts.text) { if (this.opts.text) {
x = 1 x = 1
@ -100,7 +124,6 @@ export default class Popover extends PIXI.Graphics {
} }
drawAnchor(placement) { drawAnchor(placement) {
let x = 0 let x = 0
let y = 0 let y = 0
@ -109,7 +132,7 @@ export default class Popover extends PIXI.Graphics {
if (this.opts.title) { if (this.opts.title) {
this.beginFill(0xf7f7f7, 1) this.beginFill(0xf7f7f7, 1)
} }
x = (this.width / 2) - 10 x = this.width / 2 - 10
y = 1 y = 1
this.moveTo(x, y) this.moveTo(x, y)
x += 10 x += 10
@ -121,7 +144,7 @@ export default class Popover extends PIXI.Graphics {
break break
case 'right': case 'right':
x = 1 x = 1
y = (this.height / 2) - 10 y = this.height / 2 - 10
if (this.titleY + this.titleHeight > y) { if (this.titleY + this.titleHeight > y) {
this.beginFill(0xf7f7f7, 1) this.beginFill(0xf7f7f7, 1)
} }
@ -135,7 +158,7 @@ export default class Popover extends PIXI.Graphics {
break break
case 'left': case 'left':
x = this.width - 2 x = this.width - 2
y = (this.height / 2) - 10 y = this.height / 2 - 10
if (this.titleY + this.titleHeight > y) { if (this.titleY + this.titleHeight > y) {
this.beginFill(0xf7f7f7, 1) this.beginFill(0xf7f7f7, 1)
} }
@ -148,7 +171,7 @@ export default class Popover extends PIXI.Graphics {
this.lineTo(x, y) this.lineTo(x, y)
break break
default: default:
x = (this.width / 2) - 10 x = this.width / 2 - 10
y = this.height - 2 y = this.height - 2
this.moveTo(x, y) this.moveTo(x, y)
x += 10 x += 10
@ -162,22 +185,21 @@ export default class Popover extends PIXI.Graphics {
} }
positioning() { positioning() {
const x = this.opts.x const x = this.opts.x
const y = this.opts.y const y = this.opts.y
switch (this.opts.placement) { switch (this.opts.placement) {
case 'bottom': case 'bottom':
this.position.set(x - (this.width / 2), y + 10) this.position.set(x - this.width / 2, y + 10)
break break
case 'right': case 'right':
this.position.set(x, y - (this.height / 2)) this.position.set(x, y - this.height / 2)
break break
case 'left': case 'left':
this.position.set(x - this.width, y - (this.height / 2)) this.position.set(x - this.width, y - this.height / 2)
break break
default: default:
this.position.set(x - (this.width / 2), y - this.height) this.position.set(x - this.width / 2, y - this.height)
break break
} }
} }

76
lib/pixi/popup.js
View File

@ -12,7 +12,6 @@ import ButtonGroup from './buttongroup.js'
* @extends AbstractPopup * @extends AbstractPopup
*/ */
export class InteractivePopup extends AbstractPopup { export class InteractivePopup extends AbstractPopup {
/** /**
* Creates an instance of an InteractivePopup (only for internal use). * Creates an instance of an InteractivePopup (only for internal use).
* *
@ -24,13 +23,16 @@ export class InteractivePopup extends AbstractPopup {
* @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner. * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
opts = Object.assign(
opts = Object.assign({}, { {},
closeOnPopup: false, {
closeButton: true, closeOnPopup: false,
button: null, closeButton: true,
buttonGroup: null button: null,
}, opts) buttonGroup: null
},
opts
)
super(opts) super(opts)
@ -56,7 +58,6 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining. * @return {AbstractPopup} A reference to the popup for chaining.
*/ */
setup() { setup() {
super.setup() super.setup()
// interaction // interaction
@ -72,7 +73,10 @@ export class InteractivePopup extends AbstractPopup {
// closeButton // closeButton
//----------------- //-----------------
if (this.opts.closeButton) { if (this.opts.closeButton) {
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true) let closeButton = PIXI.Sprite.fromImage(
'../../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
@ -95,7 +99,11 @@ export class InteractivePopup extends AbstractPopup {
// maxWidth is set and a closeButton should be displayed // maxWidth is set and a closeButton should be displayed
//----------------- //-----------------
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
const wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) - this.smallPadding - this._closeButton.width const wordWrapWidth =
this.opts.maxWidth -
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) {
@ -108,9 +116,19 @@ 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(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.button)) this._buttons = new Button(
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.button
)
)
} else { } else {
this._buttons = new ButtonGroup(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.buttonGroup)) this._buttons = new ButtonGroup(
Object.assign(
{ textStyle: this.theme.textStyleSmall },
this.opts.buttonGroup
)
)
} }
this.addChild(this._buttons) this.addChild(this._buttons)
@ -126,21 +144,23 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining. * @return {AbstractPopup} A reference to the popup for chaining.
*/ */
layout() { layout() {
super.layout() super.layout()
// closeButton // closeButton
//----------------- //-----------------
if (this.opts.closeButton) { if (this.opts.closeButton) {
this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width this._closeButton.x =
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.wantedWidth - this.opts.padding - this._buttons.width this._buttons.x =
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y =
this.wantedHeight - this.opts.padding - this._buttons.height
} }
return this return this
@ -156,7 +176,6 @@ export class InteractivePopup extends AbstractPopup {
* @returns {object} An JavaScript object width the keys width and height. * @returns {object} An JavaScript object width the keys width and height.
*/ */
getInnerSize() { getInnerSize() {
let size = super.getInnerSize() let size = super.getInnerSize()
if (this._closeButton) { if (this._closeButton) {
@ -164,7 +183,10 @@ export class InteractivePopup extends AbstractPopup {
} }
if (this._buttons) { if (this._buttons) {
size.width = Math.max(size.width, this._buttons.x + this._buttons.width) size.width = Math.max(
size.width,
this._buttons.x + this._buttons.width
)
size.height += this.innerPadding + this._buttons.height size.height += this.innerPadding + this._buttons.height
} }
@ -190,7 +212,6 @@ export class InteractivePopup extends AbstractPopup {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
*/ */
export default class Popup extends InteractivePopup { export default class Popup extends InteractivePopup {
/** /**
* Creates an instance of a Popup. * Creates an instance of a Popup.
* *
@ -201,12 +222,15 @@ export default class Popup extends InteractivePopup {
* @param {number} [opts.minHeight=0] - The minimum height of the popup. * @param {number} [opts.minHeight=0] - The minimum height of the popup.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
opts = Object.assign(
opts = Object.assign({}, { {},
closeButton: false, {
minWidth: 0, closeButton: false,
minHeight: 0 minWidth: 0,
}, opts) minHeight: 0
},
opts
)
super(opts) super(opts)
} }

37
lib/pixi/popupmenu.js
View File

@ -28,7 +28,6 @@ import Popup from './popup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest}
*/ */
export default class PopupMenu extends Popup { export default class PopupMenu extends Popup {
/** /**
* Creates an instance of a PopupMenu. * Creates an instance of a PopupMenu.
* *
@ -43,15 +42,18 @@ export default class PopupMenu extends Popup {
* @param {boolean} [opts.closeOnPopup=true] - The opacity of the background. * @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
items: [], {},
margin: theme.margin / 2, {
textStyle: theme.textStyle, items: [],
closeOnPopup: true margin: theme.margin / 2,
}, opts) textStyle: theme.textStyle,
closeOnPopup: true
},
opts
)
super(opts) super(opts)
} }
@ -63,18 +65,19 @@ export default class PopupMenu extends Popup {
* @return {PopupMenu} A reference to the popupmenu for chaining. * @return {PopupMenu} A reference to the popupmenu for chaining.
*/ */
setup() { setup() {
// content // content
//----------------- //-----------------
const content = new PIXI.Container() const content = new PIXI.Container()
let y = 0 let y = 0
for (let item of this.opts.items) { for (let item of this.opts.items) {
let object = null let object = null
if (item.label) { if (item.label) {
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle) object = new PIXI.Text(
item.label,
item.textStyle || this.opts.textStyle
)
} else { } else {
object = item.content object = item.content
} }
@ -83,16 +86,22 @@ export default class PopupMenu extends Popup {
if (item.action) { if (item.action) {
if (item.disabled) { if (item.disabled) {
object.alpha = .5 object.alpha = 0.5
} else { } else {
object.interactive = true object.interactive = true
object.buttonMode = true object.buttonMode = true
} }
object.on('pointerover', e => { object.on('pointerover', e => {
TweenLite.to(object, this.theme.fast, {alpha: .83, overwrite: 'none'}) TweenLite.to(object, this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
}) })
object.on('pointerout', e => { object.on('pointerout', e => {
TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'}) TweenLite.to(object, this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
}) })
object.on('pointerup', e => { object.on('pointerup', e => {
item.action.call(object, e, object) item.action.call(object, e, object)

117
lib/pixi/progress.js
View File

@ -18,7 +18,6 @@ import Theme from './theme.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
*/ */
export default class Progress extends PIXI.Container { export default class Progress extends PIXI.Container {
/** /**
* Creates an instance of a Progress. * Creates an instance of a Progress.
* *
@ -53,36 +52,39 @@ export default class Progress extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
app: window.app, {
width: null, id: PIXI.utils.uid(),
height: 2, app: window.app,
margin: 100, width: null,
padding: 0, height: 2,
fill: theme.fill, margin: 100,
fillAlpha: theme.fillAlpha, padding: 0,
fillActive: theme.primaryColor, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.primaryColor,
strokeWidth: 0, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.strokeActive, strokeWidth: 0,
strokeActiveWidth: 0, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.strokeActive,
background: false, strokeActiveWidth: 0,
backgroundFill: theme.background, strokeActiveAlpha: theme.strokeActiveAlpha,
backgroundFillAlpha: 1, background: false,
radius: theme.radius, backgroundFill: theme.background,
destroyOnComplete: true, backgroundFillAlpha: 1,
visible: true radius: theme.radius,
}, opts) destroyOnComplete: true,
visible: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -112,7 +114,6 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
setup() { setup() {
// interaction // interaction
//----------------- //-----------------
this.on('added', e => { this.on('added', e => {
@ -146,7 +147,6 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
layout() { layout() {
const width = this.opts.app.size.width const width = this.opts.app.size.width
const height = this.opts.app.size.height const height = this.opts.app.size.height
@ -154,7 +154,10 @@ 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.opts.backgroundFill, this.opts.backgroundFillAlpha) this.background.beginFill(
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()
} }
@ -171,7 +174,6 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
draw() { draw() {
this.bar.clear() this.bar.clear()
this.barActive.clear() this.barActive.clear()
@ -188,22 +190,31 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
drawBar() { drawBar() {
const width = this.opts.app.size.width const width = this.opts.app.size.width
const height = this.opts.app.size.height const height = this.opts.app.size.height
this.radius = this.opts.radius this.radius = this.opts.radius
if ((this.radius * 2) > this.opts.height) { if (this.radius * 2 > this.opts.height) {
this.radius = this.opts.height / 2 this.radius = this.opts.height / 2
} }
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.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.bar.lineStyle(
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(0, 0, wantedWidth, wantedHeight, this.radius) this.bar.drawRoundedRect(
0,
0,
wantedWidth,
wantedHeight,
this.radius
)
} else { } else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight) this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
} }
@ -222,17 +233,29 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
drawBarActive() { drawBarActive() {
const wantedWidth = this.bar.width - 2 * this.opts.padding
const wantedHeight = this.bar.height - 2 * this.opts.padding
const wantedWidth = this.bar.width - (2 * this.opts.padding) const barActiveWidth = (wantedWidth * this._progress) / 100
const wantedHeight = this.bar.height - (2 * this.opts.padding)
const barActiveWidth = wantedWidth * this._progress / 100 this.barActive.lineStyle(
this.opts.strokeActiveWidth,
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) this.opts.strokeActive,
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) 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(0, 0, barActiveWidth, wantedHeight, this.radius) this.barActive.drawRoundedRect(
0,
0,
barActiveWidth,
wantedHeight,
this.radius
)
} else { } else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight) this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
} }
@ -251,7 +274,7 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
show() { show() {
TweenLite.to(this, this.theme.fast, {alpha: 1}) TweenLite.to(this, this.theme.fast, { alpha: 1 })
return this return this
} }
@ -262,7 +285,10 @@ export default class Progress extends PIXI.Container {
* @return {Progress} A reference to the progress for chaining. * @return {Progress} A reference to the progress for chaining.
*/ */
hide() { hide() {
TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false}) TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => (this.visible = false)
})
return this return this
} }
@ -276,7 +302,6 @@ export default class Progress extends PIXI.Container {
return this._progress return this._progress
} }
set progress(value) { set progress(value) {
value = Math.round(value) value = Math.round(value)
if (value < 0) { if (value < 0) {
@ -294,7 +319,7 @@ export default class Progress extends PIXI.Container {
if (value === 100 && this.opts.destroyOnComplete) { if (value === 100 && this.opts.destroyOnComplete) {
TweenLite.to(this, this.theme.fast, { TweenLite.to(this, this.theme.fast, {
alpha: 0, alpha: 0,
onComplete: () => this.destroy({children: true}) onComplete: () => this.destroy({ children: true })
}) })
} }
} }

144
lib/pixi/scatter.js
View File

@ -9,30 +9,32 @@ import { InteractionMapper } from '../interaction.js'
* on the same level. * on the same level.
*/ */
export class ScatterContainer extends PIXI.Graphics { export class ScatterContainer extends PIXI.Graphics {
/** /**
* @constructor * @constructor
* @param {PIXI.Renderer} renderer - PIXI renderer, needed for hit testing * @param {PIXI.Renderer} renderer - PIXI renderer, needed for hit testing
* @param {Bool} stopEvents - Whether events should be stopped or propagated * @param {Bool} stopEvents - Whether events should be stopped or propagated
* @param {Bool} claimEvents - Whether events should be marked as claimed * @param {Bool} claimEvents - Whether events should be marked as claimed
* if findTarget return as non-null value. * if findTarget return as non-null value.
* @param {PIXI.Container} container - A container for the scatter * @param {PIXI.Container} container - A container for the scatter
* @param {Bool} showBounds - Show bounds for debugging purposes. * @param {Bool} showBounds - Show bounds for debugging purposes.
* @param {Bool} showTouches - Show touches and pointer for debugging purposes. * @param {Bool} showTouches - Show touches and pointer for debugging purposes.
* @param {Color} backgroundColor - Set background color if specified. * @param {Color} backgroundColor - Set background color if specified.
* @param {PIXIApp} app - Needed if showBounds is true to register * @param {PIXIApp} app - Needed if showBounds is true to register
* update handler. * update handler.
*/ */
constructor(renderer, { constructor(
stopEvents = true, renderer,
claimEvents = true, {
container = null, stopEvents = true,
showBounds = false, claimEvents = true,
showPolygon = false, container = null,
showTouches = false, showBounds = false,
backgroundColor = null, showPolygon = false,
app = window.app showTouches = false,
} = {}) { backgroundColor = null,
app = window.app
} = {}
) {
super() super()
this.container = container this.container = container
if (this.container) if (this.container)
@ -53,7 +55,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.backgroundColor = backgroundColor this.backgroundColor = backgroundColor
if (showBounds || showTouches || showPolygon) { if (showBounds || showTouches || showPolygon) {
//console.log("Show TOUCHES!!!") //console.log("Show TOUCHES!!!")
this.app.ticker.add((delta) => this.update(delta), this) this.app.ticker.add(delta => this.update(delta), this)
} }
if (backgroundColor) { if (backgroundColor) {
this.updateBackground() this.updateBackground()
@ -77,8 +79,12 @@ 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) ? this.containerDimensions.x : (this.backgroundWidth || this.app.width) let w = this.container
let h = (this.container) ? this.containerDimensions.y : (this.backgroundHeight || this.app.height) ? this.containerDimensions.x
: 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 })
@ -113,7 +119,7 @@ export class ScatterContainer extends PIXI.Graphics {
update(dt) { update(dt) {
this.clear() this.clear()
this.lineStyle(1, 0x0000FF) this.lineStyle(1, 0x0000ff)
if (this.showBounds) { if (this.showBounds) {
for (let child of this.children) { for (let child of this.children) {
if (child.scatter) { if (child.scatter) {
@ -125,11 +131,11 @@ export class ScatterContainer extends PIXI.Graphics {
this.drawCircle(child.scatter.x, child.scatter.y, 4) this.drawCircle(child.scatter.x, child.scatter.y, 4)
} }
} }
this.lineStyle(2, 0x0000FF) this.lineStyle(2, 0x0000ff)
this.drawShape(this.bounds) this.drawShape(this.bounds)
} }
if (this.showPolygon) { if (this.showPolygon) {
this.lineStyle(2, 0xFF0000) this.lineStyle(2, 0xff0000)
for (let child of this.children) { for (let child of this.children) {
if (child.scatter) { if (child.scatter) {
let polygon = child.scatter.polygon let polygon = child.scatter.polygon
@ -149,8 +155,7 @@ export class ScatterContainer extends PIXI.Graphics {
} }
capture(event) { capture(event) {
if (this.stopEvents) if (this.stopEvents) Events.stop(event)
Events.stop(event)
return true return true
} }
@ -162,8 +167,14 @@ export class ScatterContainer extends PIXI.Graphics {
// if (hit) { // if (hit) {
// console.log("findHitScatter", displayObject) // console.log("findHitScatter", displayObject)
// } // }
if (hit && this.hitScatter === null && typeof (displayObject) != undefined) { if (
this.hitScatter = (displayObject.scatter) ? displayObject.scatter : null hit &&
this.hitScatter === null &&
typeof displayObject != undefined
) {
this.hitScatter = displayObject.scatter
? displayObject.scatter
: null
} }
} }
@ -173,7 +184,10 @@ 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 (element instanceof DisplayObjectScatter && element.displayObject.parent != null) { if (
element instanceof DisplayObjectScatter &&
element.displayObject.parent != null
) {
return element.displayObject.parent.toLocal(local) return element.displayObject.parent.toLocal(local)
} }
return local return local
@ -190,11 +204,13 @@ 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(fakeEvent, interactionManager.processInteractive(
fakeEvent,
this, this,
this.findHitScatter.bind(this), true) this.findHitScatter.bind(this),
if (this.claimEvents) true
event.claimedByScatter = this.hitScatter )
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter return this.hitScatter
} }
@ -209,19 +225,13 @@ export class ScatterContainer extends PIXI.Graphics {
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) if (this.claimEvents) event.claimedByScatter = this.hitScatter
event.claimedByScatter = this.hitScatter
return this.hitScatter return this.hitScatter
} }
onStart(event, interaction) {}
onStart(event, interaction) { onMove(event, interaction) {}
}
onMove(event, interaction) {
}
onEnd(event, interaction) { onEnd(event, interaction) {
for (let key of interaction.ended.keys()) { for (let key of interaction.ended.keys()) {
@ -253,7 +263,6 @@ export class ScatterContainer extends PIXI.Graphics {
if (this.backgroundColor) { if (this.backgroundColor) {
this.updateBackground() this.updateBackground()
} }
} }
} }
@ -262,14 +271,20 @@ export class ScatterContainer extends PIXI.Graphics {
* PIXI.DisplayObject can be wrapped. * PIXI.DisplayObject can be wrapped.
*/ */
export class DisplayObjectScatter extends AbstractScatter { export class DisplayObjectScatter extends AbstractScatter {
constructor(
constructor(displayObject, renderer, displayObject,
{ x = null, y = null, renderer,
{
x = null,
y = null,
minScale = 0.1, minScale = 0.1,
maxScale = 1.0, maxScale = 1.0,
startScale = 1.0, startScale = 1.0,
autoBringToFront = true, autoBringToFront = true,
translatable = true, scalable = true, rotatable = true, resizable = false, translatable = true,
scalable = true,
rotatable = true,
resizable = false,
movableX = true, movableX = true,
movableY = true, movableY = true,
throwVisibility = 44, throwVisibility = 44,
@ -279,19 +294,29 @@ export class DisplayObjectScatter extends AbstractScatter {
rotation = null, rotation = null,
overdoScaling = 1.5, overdoScaling = 1.5,
onTransform = null, onTransform = null,
onThrowFinished = null } = {}) { onThrowFinished = null
} = {}
) {
// For the simulation of named parameters, // For the simulation of named parameters,
// see: http://exploringjs.com/es6/ch_parameter-handling.html // see: http://exploringjs.com/es6/ch_parameter-handling.html
super({ super({
overdoScaling, overdoScaling,
minScale, maxScale, minScale,
maxScale,
startScale, startScale,
autoBringToFront, autoBringToFront,
translatable, scalable, rotatable, resizable, translatable,
movableX, movableY, throwVisibility, throwDamping, scalable,
rotatable,
resizable,
movableX,
movableY,
throwVisibility,
throwDamping,
autoThrow, autoThrow,
onThrowFinished, onThrowFinished,
rotationDegrees, rotation, rotationDegrees,
rotation,
onTransform onTransform
}) })
this.displayObject = displayObject this.displayObject = displayObject
@ -458,7 +483,10 @@ 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 (this.displayObject.parent != null && this.displayObject.parent.scatter) { } else if (
this.displayObject.parent != null &&
this.displayObject.parent.scatter
) {
this.displayObject.parent.scatter.toFront(this.displayObject) this.displayObject.parent.scatter.toFront(this.displayObject)
} }
} }

424
lib/pixi/scrollbox.js
View File

@ -1,5 +1,3 @@
/** /**
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars * pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
*/ */
@ -26,26 +24,29 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set * @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading * @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/ */
constructor(options) constructor(options) {
{
super() super()
this.options = Object.assign({}, { this.options = Object.assign(
boxWidth: 100, {},
boxHeight: 100, {
scrollbarSize: 10, boxWidth: 100,
scrollbarBackground: 14540253, boxHeight: 100,
scrollbarBackgroundAlpha: 1, scrollbarSize: 10,
scrollbarForeground: 8947848, scrollbarBackground: 14540253,
scrollbarForegroundAlpha: 1, scrollbarBackgroundAlpha: 1,
dragScroll: true, scrollbarForeground: 8947848,
stopPropagation: true, scrollbarForegroundAlpha: 1,
scrollbarOffsetHorizontal: 0, dragScroll: true,
scrollbarOffsetVertical: 0, stopPropagation: true,
underflow: 'top-left', scrollbarOffsetHorizontal: 0,
fadeScrollbar: false, scrollbarOffsetVertical: 0,
fadeWait: 3000, underflow: 'top-left',
fadeEase: 'easeInOutSine' fadeScrollbar: false,
}, options) fadeWait: 3000,
fadeEase: 'easeInOutSine'
},
options
)
this.ease = new PIXI.extras.Ease.list() this.ease = new PIXI.extras.Ease.list()
this.on('added', event => { this.on('added', event => {
@ -57,10 +58,15 @@ export default class Scrollbox extends PIXI.Container {
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/) * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
* @type {PIXI.extras.Viewport} * @type {PIXI.extras.Viewport}
*/ */
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight })) this.content = this.addChild(
this.content new PIXI.extras.Viewport({
.decelerate() passiveWheel: this.options.stopPropagation,
.on('moved', () => this._drawScrollbars()) stopPropagation: this.options.stopPropagation,
screenWidth: this.options.boxWidth,
screenHeight: this.options.boxHeight
})
)
this.content.decelerate().on('moved', () => this._drawScrollbars())
/** /**
* graphics element for drawing the scrollbars * graphics element for drawing the scrollbars
@ -82,12 +88,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of horizontal scrollbar (in pixels) * offset of horizontal scrollbar (in pixels)
* @type {number} * @type {number}
*/ */
get scrollbarOffsetHorizontal() get scrollbarOffsetHorizontal() {
{
return this.options.scrollbarOffsetHorizontal return this.options.scrollbarOffsetHorizontal
} }
set scrollbarOffsetHorizontal(value) set scrollbarOffsetHorizontal(value) {
{
this.options.scrollbarOffsetHorizontal = value this.options.scrollbarOffsetHorizontal = value
} }
@ -95,12 +99,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of vertical scrollbar (in pixels) * offset of vertical scrollbar (in pixels)
* @type {number} * @type {number}
*/ */
get scrollbarOffsetVertical() get scrollbarOffsetVertical() {
{
return this.options.scrollbarOffsetVertical return this.options.scrollbarOffsetVertical
} }
set scrollbarOffsetVertical(value) set scrollbarOffsetVertical(value) {
{
this.options.scrollbarOffsetVertical = value this.options.scrollbarOffsetVertical = value
} }
@ -108,14 +110,11 @@ export default class Scrollbox extends PIXI.Container {
* disable the scrollbox (if set to true this will also remove the mask) * disable the scrollbox (if set to true this will also remove the mask)
* @type {boolean} * @type {boolean}
*/ */
get disable() get disable() {
{
return this._disabled return this._disabled
} }
set disable(value) set disable(value) {
{ if (this._disabled !== value) {
if (this._disabled !== value)
{
this._disabled = value this._disabled = value
this.update() this.update()
} }
@ -125,12 +124,10 @@ export default class Scrollbox extends PIXI.Container {
* call stopPropagation on any events that impact scrollbox * call stopPropagation on any events that impact scrollbox
* @type {boolean} * @type {boolean}
*/ */
get stopPropagation() get stopPropagation() {
{
return this.options.stopPropagation return this.options.stopPropagation
} }
set stopPropagation(value) set stopPropagation(value) {
{
this.options.stopPropagation = value this.options.stopPropagation = value
} }
@ -138,19 +135,14 @@ export default class Scrollbox extends PIXI.Container {
* user may drag the content area to scroll content * user may drag the content area to scroll content
* @type {boolean} * @type {boolean}
*/ */
get dragScroll() get dragScroll() {
{
return this.options.dragScroll return this.options.dragScroll
} }
set dragScroll(value) set dragScroll(value) {
{
this.options.dragScroll = value this.options.dragScroll = value
if (value) if (value) {
{
this.content.drag() this.content.drag()
} } else {
else
{
this.content.removePlugin('drag') this.content.removePlugin('drag')
} }
this.update() this.update()
@ -160,12 +152,10 @@ export default class Scrollbox extends PIXI.Container {
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box * width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
* @type {number} * @type {number}
*/ */
get boxWidth() get boxWidth() {
{
return this.options.boxWidth return this.options.boxWidth
} }
set boxWidth(value) set boxWidth(value) {
{
this.options.boxWidth = value this.options.boxWidth = value
this.content.screenWidth = value this.content.screenWidth = value
this.update() this.update()
@ -178,12 +168,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar * auto = if content is larger than box size, then show scrollbar
* @type {string} * @type {string}
*/ */
get overflow() get overflow() {
{
return this.options.overflow return this.options.overflow
} }
set overflow(value) set overflow(value) {
{
this.options.overflow = value this.options.overflow = value
this.options.overflowX = value this.options.overflowX = value
this.options.overflowY = value this.options.overflowY = value
@ -197,12 +185,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar * auto = if content is larger than box size, then show scrollbar
* @type {string} * @type {string}
*/ */
get overflowX() get overflowX() {
{
return this.options.overflowX return this.options.overflowX
} }
set overflowX(value) set overflowX(value) {
{
this.options.overflowX = value this.options.overflowX = value
this.update() this.update()
} }
@ -214,12 +200,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar * auto = if content is larger than box size, then show scrollbar
* @type {string} * @type {string}
*/ */
get overflowY() get overflowY() {
{
return this.options.overflowY return this.options.overflowY
} }
set overflowY(value) set overflowY(value) {
{
this.options.overflowY = value this.options.overflowY = value
this.update() this.update()
} }
@ -228,12 +212,10 @@ export default class Scrollbox extends PIXI.Container {
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box * height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
* @type {number} * @type {number}
*/ */
get boxHeight() get boxHeight() {
{
return this.options.boxHeight return this.options.boxHeight
} }
set boxHeight(value) set boxHeight(value) {
{
this.options.boxHeight = value this.options.boxHeight = value
this.content.screenHeight = value this.content.screenHeight = value
this.update() this.update()
@ -243,12 +225,10 @@ export default class Scrollbox extends PIXI.Container {
* scrollbar size in pixels * scrollbar size in pixels
* @type {number} * @type {number}
*/ */
get scrollbarSize() get scrollbarSize() {
{
return this.options.scrollbarSize return this.options.scrollbarSize
} }
set scrollbarSize(value) set scrollbarSize(value) {
{
this.options.scrollbarSize = value this.options.scrollbarSize = value
} }
@ -257,9 +237,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number} * @type {number}
* @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)
)
} }
/** /**
@ -267,9 +249,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number} * @type {number}
* @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)
)
} }
/** /**
@ -277,8 +261,7 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean} * @type {boolean}
* @readonly * @readonly
*/ */
get isScrollbarVertical() get isScrollbarVertical() {
{
return this._isScrollbarVertical return this._isScrollbarVertical
} }
@ -287,24 +270,21 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean} * @type {boolean}
* @readonly * @readonly
*/ */
get isScrollbarHorizontal() get isScrollbarHorizontal() {
{
return this._isScrollbarHorizontal return this._isScrollbarHorizontal
} }
/** /**
* top coordinate of scrollbar * top coordinate of scrollbar
*/ */
get scrollTop() get scrollTop() {
{
return this.content.top return this.content.top
} }
/** /**
* left coordinate of scrollbar * left coordinate of scrollbar
*/ */
get scrollLeft() get scrollLeft() {
{
return this.content.left return this.content.left
} }
@ -312,12 +292,10 @@ export default class Scrollbox extends PIXI.Container {
* width of content area * width of content area
* if not set then it uses content.width to calculate width * if not set then it uses content.width to calculate width
*/ */
get scrollWidth() get scrollWidth() {
{
return this._scrollWidth || this.content.width return this._scrollWidth || this.content.width
} }
set scrollWidth(value) set scrollWidth(value) {
{
this._scrollWidth = value this._scrollWidth = value
} }
@ -325,12 +303,10 @@ export default class Scrollbox extends PIXI.Container {
* height of content area * height of content area
* if not set then it uses content.height to calculate height * if not set then it uses content.height to calculate height
*/ */
get scrollHeight() get scrollHeight() {
{
return this._scrollHeight || this.content.height return this._scrollHeight || this.content.height
} }
set scrollHeight(value) set scrollHeight(value) {
{
this._scrollHeight = value this._scrollHeight = value
} }
@ -338,52 +314,111 @@ export default class Scrollbox extends PIXI.Container {
* draws scrollbars * draws scrollbars
* @private * @private
*/ */
_drawScrollbars() _drawScrollbars() {
{ this._isScrollbarHorizontal =
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth this.overflowX === 'scroll'
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight ? true
: ['hidden', 'none'].indexOf(this.overflowX) !== -1
? false
: this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical =
this.overflowY === 'scroll'
? true
: ['hidden', 'none'].indexOf(this.overflowY) !== -1
? false
: this.scrollHeight > this.options.boxHeight
this.scrollbar.clear() this.scrollbar.clear()
let options = {} let options = {}
options.left = 0 options.left = 0
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0) options.right =
this.scrollWidth +
(this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.top = 0 options.top = 0
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) options.bottom =
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0) this.scrollHeight +
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0) (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
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight this.scrollbarHeight =
this.scrollbarTop + this.scrollbarHeight > this.boxHeight
? this.boxHeight - this.scrollbarTop
: this.scrollbarHeight
this.scrollbarLeft = (this.content.left / width) * this.boxWidth this.scrollbarLeft = (this.content.left / width) * this.boxWidth
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth this.scrollbarWidth =
if (this.isScrollbarVertical) this.scrollbarWidth + this.scrollbarLeft > this.boxWidth
{ ? this.boxWidth - this.scrollbarLeft
: this.scrollbarWidth
if (this.isScrollbarVertical) {
this.scrollbar this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha) .beginFill(
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight) this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
)
.endFill() .endFill()
} }
if (this.isScrollbarHorizontal) if (this.isScrollbarHorizontal) {
{
this.scrollbar this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha) .beginFill(
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize) this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
0,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
.endFill() .endFill()
} }
if (this.isScrollbarVertical) if (this.isScrollbarVertical) {
{
this.scrollbar this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha) .beginFill(
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight) this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
)
.endFill() .endFill()
} }
if (this.isScrollbarHorizontal) if (this.isScrollbarHorizontal) {
{
this.scrollbar this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha) .beginFill(
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize) this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.scrollbarLeft,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
.endFill() .endFill()
} }
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight) // this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
@ -394,8 +429,7 @@ export default class Scrollbox extends PIXI.Container {
* draws mask layer * draws mask layer
* @private * @private
*/ */
_drawMask() _drawMask() {
{
this._maskContent this._maskContent
.beginFill(0) .beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight) .drawRect(0, 0, this.boxWidth, this.boxHeight)
@ -406,19 +440,20 @@ export default class Scrollbox extends PIXI.Container {
/** /**
* call when scrollbox content changes * call when scrollbox content changes
*/ */
update() update() {
{
this.content.mask = null this.content.mask = null
this._maskContent.clear() this._maskContent.clear()
if (!this._disabled) if (!this._disabled) {
{
this._drawScrollbars() this._drawScrollbars()
this._drawMask() this._drawMask()
if (this.options.dragScroll) if (this.options.dragScroll) {
{ const direction =
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y' this.isScrollbarHorizontal && this.isScrollbarVertical
if (direction !== null) ? 'all'
{ : this.isScrollbarHorizontal
? 'x'
: 'y'
if (direction !== null) {
this.content this.content
.drag({ clampWheel: true, direction }) .drag({ clampWheel: true, direction })
.clamp({ direction, underflow: this.options.underflow }) .clamp({ direction, underflow: this.options.underflow })
@ -430,18 +465,18 @@ export default class Scrollbox extends PIXI.Container {
/** /**
* show the scrollbar and restart the timer for fade if options.fade is set * show the scrollbar and restart the timer for fade if options.fade is set
*/ */
activateFade() activateFade() {
{ if (this.options.fade) {
if (this.options.fade) if (this.fade) {
{
if (this.fade)
{
this.ease.remove(this.fade) this.ease.remove(this.fade)
} }
this.scrollbar.alpha = 1 this.scrollbar.alpha = 1
const time = this.options.fade === true ? 1000 : this.options.fade const time = this.options.fade === true ? 1000 : this.options.fade
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase }) this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
this.fade.on('each', () => this.content.dirty = true) wait: this.options.fadeWait,
ease: this.options.fadeEase
})
this.fade.on('each', () => (this.content.dirty = true))
} }
} }
@ -450,60 +485,47 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e * @param {PIXI.interaction.InteractionEvent} e
* @private * @private
*/ */
scrollbarDown(e) scrollbarDown(e) {
{
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 (
{ local.x >= this.scrollbarLeft &&
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) 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)
{
this.content.left += this.content.worldScreenWidth this.content.left += this.content.worldScreenWidth
this.update() this.update()
} } else {
else
{
this.content.left -= this.content.worldScreenWidth this.content.left -= this.content.worldScreenWidth
this.update() this.update()
} }
} }
if (this.options.stopPropagation) if (this.options.stopPropagation) {
{
e.stopPropagation() e.stopPropagation()
} }
return return
} }
} }
if (this.isScrollbarVertical) if (this.isScrollbarVertical) {
{ if (local.x > this.boxWidth - this.scrollbarSize) {
if (local.x > this.boxWidth - this.scrollbarSize) if (
{ local.y >= this.scrollbarTop &&
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) 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)
{
this.content.top += this.content.worldScreenHeight this.content.top += this.content.worldScreenHeight
this.update() this.update()
} } else {
else
{
this.content.top -= this.content.worldScreenHeight this.content.top -= this.content.worldScreenHeight
this.update() this.update()
} }
} }
if (this.options.stopPropagation) if (this.options.stopPropagation) {
{
e.stopPropagation() e.stopPropagation()
} }
return return
@ -516,26 +538,20 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e * @param {PIXI.interaction.InteractionEvent} e
* @private * @private
*/ */
scrollbarMove(e) scrollbarMove(e) {
{ if (this.pointerDown) {
if (this.pointerDown) if (this.pointerDown.type === 'horizontal') {
{
if (this.pointerDown.type === 'horizontal')
{
const local = this.toLocal(e.data.global) const local = this.toLocal(e.data.global)
this.content.left += local.x - this.pointerDown.last.x this.content.left += local.x - this.pointerDown.last.x
this.pointerDown.last = local this.pointerDown.last = local
this.update() this.update()
} } else if (this.pointerDown.type === 'vertical') {
else if (this.pointerDown.type === 'vertical')
{
const local = this.toLocal(e.data.global) const local = this.toLocal(e.data.global)
this.content.top += local.y - this.pointerDown.last.y this.content.top += local.y - this.pointerDown.last.y
this.pointerDown.last = local this.pointerDown.last = local
this.update() this.update()
} }
if (this.options.stopPropagation) if (this.options.stopPropagation) {
{
e.stopPropagation() e.stopPropagation()
} }
} }
@ -545,8 +561,7 @@ export default class Scrollbox extends PIXI.Container {
* handle pointer down on scrollbar * handle pointer down on scrollbar
* @private * @private
*/ */
scrollbarUp() scrollbarUp() {
{
this.pointerDown = null this.pointerDown = null
} }
@ -558,19 +573,27 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width) * @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
* @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
if (options.scrollWidth) : this.options.boxWidth
{ this.options.boxHeight =
typeof options.boxHeight !== 'undefined'
? options.boxHeight
: this.options.boxHeight
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.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight) this.content.resize(
this.options.boxWidth,
this.options.boxHeight,
this.scrollWidth,
this.scrollHeight
)
this.update() this.update()
} }
@ -581,8 +604,7 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} width * @param {number} width
* @param {number} height * @param {number} height
*/ */
ensureVisible(x, y, width, height) ensureVisible(x, y, width, height) {
{
this.content.ensureVisible(x, y, width, height) this.content.ensureVisible(x, y, width, height)
this._drawScrollbars() this._drawScrollbars()
} }

4
lib/pixi/scrollview.js
View File

@ -26,7 +26,6 @@ import Scrollbox from './scrollbox.js'
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport} * @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
*/ */
export default class Scrollview extends Scrollbox { export default class Scrollview extends Scrollbox {
/** /**
* Creates an instance of a Scrollview. * Creates an instance of a Scrollview.
* *
@ -34,7 +33,6 @@ export default class Scrollview extends Scrollbox {
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html * @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super(opts) super(opts)
this.opts = opts this.opts = opts
@ -47,7 +45,6 @@ export default class Scrollview extends Scrollbox {
* @return {Scrollview} A reference to the Scrollview for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
setup() { setup() {
return this return this
} }
@ -57,7 +54,6 @@ export default class Scrollview extends Scrollbox {
* @return {Scrollview} A reference to the Scrollview for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
layout() { layout() {
this.update() this.update()
return this return this

141
lib/pixi/slider.js
View File

@ -51,7 +51,6 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
*/ */
export default class Slider extends PIXI.Container { export default class Slider extends PIXI.Container {
/** /**
* Creates an instance of a Slider. * Creates an instance of a Slider.
* *
@ -86,41 +85,44 @@ export default class Slider extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
width: 250, x: 0,
height: 2, y: 0,
container: null, width: 250,
fill: theme.fill, height: 2,
fillAlpha: theme.fillAlpha, container: null,
stroke: theme.stroke, fill: theme.fill,
strokeWidth: theme.strokeWidth, fillAlpha: theme.fillAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
controlFill: theme.fill, strokeWidth: theme.strokeWidth,
controlFillAlpha: .5, strokeAlpha: theme.strokeAlpha,
controlStroke: theme.primaryColor, controlFill: theme.fill,
controlStrokeWidth: 2, controlFillAlpha: 0.5,
controlStrokeAlpha: theme.strokeAlpha, controlStroke: theme.primaryColor,
controlRadius: 16, controlStrokeWidth: 2,
orientation: 'horizontal', controlStrokeAlpha: theme.strokeAlpha,
min: 0, controlRadius: 16,
max: 100, orientation: 'horizontal',
value: 0, min: 0,
disabled: false, max: 100,
onStart: null, value: 0,
onUpdate: null, disabled: false,
onComplete: null, onStart: null,
tooltip: null, onUpdate: null,
visible: true onComplete: null,
}, opts) tooltip: null,
visible: true
},
opts
)
this.opts.container = this.opts.container || this this.opts.container = this.opts.container || this
@ -168,15 +170,18 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
setup() { setup() {
// Container events // Container events
//----------------- //-----------------
const container = this.opts.container const container = this.opts.container
this.on('pointermove', e => { this.on('pointermove', e => {
if (this.control.dragging) { if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x const moveX = this.control.event.data.getLocalPosition(
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius) this.control.parent
).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
@ -188,8 +193,16 @@ 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('pointercancel', e => this.onEnd(e), false) container.addEventListener(
container.addEventListener('pointerleave', e => this.onEnd(e), false) 'pointercancel',
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)
@ -233,16 +246,16 @@ export default class Slider extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.sliderObj.on('pointerover', e => { this.sliderObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}) })
this.sliderObj.on('pointerout', e => { this.sliderObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1}) TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
}) })
this.sliderObj.on('pointerdown', e => { this.sliderObj.on('pointerdown', e => {
this.sliderObj.pointerdowned = true this.sliderObj.pointerdowned = true
TweenLite.to(this.control, this.theme.fast, {alpha: .7}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
}) })
// Click on the slider bar // Click on the slider bar
@ -250,8 +263,10 @@ 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(position.x - this.opts.controlRadius) this.value = this.pixelToValue(
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) position.x - this.opts.controlRadius
)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
} }
}) })
@ -282,7 +297,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
layout() { layout() {
// set position // set position
//----------------- //-----------------
this.position.set(this.opts.x, this.opts.y) this.position.set(this.opts.x, this.opts.y)
@ -301,7 +315,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
draw() { draw() {
const r = this.radius const r = this.radius
const cr = this.opts.controlRadius const cr = this.opts.controlRadius
const w = this.opts.width const w = this.opts.width
@ -312,12 +325,16 @@ 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.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.sliderObj.lineStyle(
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)
this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r) this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r)
this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r) this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r)
this.sliderObj.lineTo(x, y + h) this.sliderObj.lineTo(x, y + h)
this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r) this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r)
@ -326,10 +343,20 @@ export default class Slider extends PIXI.Container {
// Draw control // Draw control
this.control.clear() this.control.clear()
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha) this.control.lineStyle(
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha) this.opts.controlStrokeWidth,
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.opts.controlStroke, this.opts.controlStrokeAlpha) this.control.beginFill(
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()
@ -343,7 +370,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
onEnd(e) { onEnd(e) {
if (this.control.dragging) { if (this.control.dragging) {
this.control.event = null this.control.event = null
this.control.dragging = false this.control.dragging = false
@ -368,7 +394,10 @@ 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 this.opts.width * (value - this.opts.min) / (this.opts.max - this.opts.min) return (
(this.opts.width * (value - this.opts.min)) /
(this.opts.max - this.opts.min)
)
} }
/** /**
@ -384,7 +413,10 @@ 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 this.opts.min + ((this.opts.max - this.opts.min) * pixel / this.opts.width) return (
this.opts.min +
((this.opts.max - this.opts.min) * pixel) / this.opts.width
)
} }
/** /**
@ -405,7 +437,7 @@ export default class Slider extends PIXI.Container {
const x = this.valueToPixel(value) + this.opts.controlRadius const x = this.valueToPixel(value) + this.opts.controlRadius
TweenLite.to(this.control, this.theme.fast, {x}) TweenLite.to(this.control, this.theme.fast, { x })
} }
/** /**
@ -417,7 +449,6 @@ export default class Slider extends PIXI.Container {
return this._disabled return this._disabled
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
if (this._disabled) { if (this._disabled) {
@ -425,7 +456,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj.interactive = false this.sliderObj.interactive = false
this.control.interactive = false this.control.interactive = false
this.control.buttonMode = false this.control.buttonMode = false
this.alpha = .5 this.alpha = 0.5
} else { } else {
this.interactive = true this.interactive = true
this.sliderObj.interactive = true this.sliderObj.interactive = true
@ -441,7 +472,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
show() { show() {
this.opts.strokeAlpha = 1 this.opts.strokeAlpha = 1
this.opts.fillAlpha = 1 this.opts.fillAlpha = 1
this.opts.controlStrokeAlpha = 1 this.opts.controlStrokeAlpha = 1
@ -458,7 +488,6 @@ export default class Slider extends PIXI.Container {
* @return {Slider} A reference to the slider for chaining. * @return {Slider} A reference to the slider for chaining.
*/ */
hide() { hide() {
this.opts.strokeAlpha = 0 this.opts.strokeAlpha = 0
this.opts.fillAlpha = 0 this.opts.fillAlpha = 0
this.opts.controlStrokeAlpha = 0 this.opts.controlStrokeAlpha = 0

104
lib/pixi/stylus.js
View File

@ -4,7 +4,6 @@ import Events from '../events.js'
import { Angle } from '../utils.js' import { Angle } from '../utils.js'
class StylusCommand extends Object { class StylusCommand extends Object {
constructor() { constructor() {
super() super()
} }
@ -23,7 +22,6 @@ class StylusCommand extends Object {
} }
class StrokeCommand extends StylusCommand { class StrokeCommand extends StylusCommand {
constructor(stroke) { constructor(stroke) {
super() super()
this.stroke = stroke this.stroke = stroke
@ -50,7 +48,6 @@ class StrokeCommand extends StylusCommand {
} }
class ClearCommand extends StylusCommand { class ClearCommand extends StylusCommand {
do(stylus) { do(stylus) {
// Clears the command stack // Clears the command stack
stylus.commandStack = [] stylus.commandStack = []
@ -71,20 +68,20 @@ class ClearCommand extends StylusCommand {
} }
} }
export default class Stylus extends PIXI.Graphics { export default class Stylus extends PIXI.Graphics {
constructor({
constructor({ width = window.innerWidth, width = window.innerWidth,
height = window.innerHeight, height = window.innerHeight,
interactive = true, interactive = true,
color = 0x000000, color = 0x000000,
tiltX = 0, tiltX = 0,
tiltY = 0, tiltY = 0,
backgroundAlpha = 1, backgroundAlpha = 1,
backgroundFill = 0xFFFFFF, backgroundFill = 0xffffff,
colorAlpha = 1, colorAlpha = 1,
captureEvents = true, captureEvents = true,
acceptMouseEvents = true } = {}) { acceptMouseEvents = true
} = {}) {
super() super()
this.activePointers = 0 this.activePointers = 0
this.wantedWidth = width this.wantedWidth = width
@ -95,16 +92,15 @@ export default class Stylus extends PIXI.Graphics {
this.color = color this.color = color
this.interactive = interactive this.interactive = interactive
this.debug = false this.debug = false
this.tiltX = tiltX // degrees -90 ... 90 this.tiltX = tiltX // degrees -90 ... 90
this.tiltY = tiltY // degrees -90 ... 90 this.tiltY = tiltY // degrees -90 ... 90
this.captureEvents = captureEvents this.captureEvents = captureEvents
this.commandStack = [] this.commandStack = []
this.undoCommandStack = [] this.undoCommandStack = []
this.strokes = [] this.strokes = []
this.stroke = [] this.stroke = []
this.minStrokeLength = 4 this.minStrokeLength = 4
if (captureEvents) if (captureEvents) this.registerEventHandler(acceptMouseEvents)
this.registerEventHandler(acceptMouseEvents)
this.drawBackground() this.drawBackground()
} }
@ -121,9 +117,12 @@ export default class Stylus extends PIXI.Graphics {
isStylusPointer(event) { isStylusPointer(event) {
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 (touch.identifier === identifier && touch.touchType === 'stylus') { if (
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
@ -141,9 +140,12 @@ export default class Stylus extends PIXI.Graphics {
isStylusTouch(event) { isStylusTouch(event) {
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 (touch.identifier === identifier && touch.pointerType === 'touch') { if (
touch.identifier === identifier &&
touch.pointerType === 'touch'
) {
return true return true
} }
} }
@ -165,25 +167,26 @@ export default class Stylus extends PIXI.Graphics {
} }
registerEventHandler() { registerEventHandler() {
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', e => {
switch (e.keyCode) { switch (e.keyCode) {
case 38: // up arrow case 38: // up arrow
this.tiltX += 5 this.tiltX += 5
break break
case 40: // down arrow case 40: // down arrow
this.tiltX -= 5 this.tiltX -= 5
break break
case 37: // left arrow case 37: // left arrow
this.tiltY -= 5 this.tiltY -= 5
break break
case 39: // right arrow case 39: // right arrow
this.tiltY += 5 this.tiltY += 5
break break
} }
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY) if (this.debug)
console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
}) })
this.on('pointerdown', (e) => { this.on('pointerdown', e => {
if (this.debug) console.log('pointerdown', e) if (this.debug) console.log('pointerdown', e)
if (this.eventInside(e)) { if (this.eventInside(e)) {
this.activePointers += 1 this.activePointers += 1
@ -193,14 +196,19 @@ export default class Stylus extends PIXI.Graphics {
} }
}) })
this.on('pointermove', (e) => { this.on('pointermove', e => {
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) { if (
if (this.debug) console.log('pointermove', e, this.eventInside(e)) Events.isPointerDown(e.data.originalEvent) ||
this.isStylusPointer(e) ||
this.isStylusTouch(e)
) {
if (this.debug)
console.log('pointermove', e, this.eventInside(e))
if (this.eventInside(e) && this.singlePointer()) if (this.eventInside(e) && this.singlePointer())
this.moveStroke(this.toStroke(e)) this.moveStroke(this.toStroke(e))
} }
}) })
this.on('pointerup', (e) => { this.on('pointerup', e => {
if (this.eventInside(e)) { if (this.eventInside(e)) {
if (this.activePointers > 0) { if (this.activePointers > 0) {
this.activePointers -= 1 this.activePointers -= 1
@ -209,13 +217,13 @@ export default class Stylus extends PIXI.Graphics {
} }
if (this.debug) console.log('pointerup', this.activePointers) if (this.debug) console.log('pointerup', this.activePointers)
}) })
this.on('pointerleave', (e) => { this.on('pointerleave', e => {
if (this.activePointers > 0) { if (this.activePointers > 0) {
this.activePointers -= 1 this.activePointers -= 1
} }
this.endStroke(this.toStroke(e)) this.endStroke(this.toStroke(e))
}) })
this.on('pointercancel', (e) => { this.on('pointercancel', e => {
if (this.activePointers > 0) { if (this.activePointers > 0) {
this.activePointers -= 1 this.activePointers -= 1
} }
@ -246,7 +254,6 @@ export default class Stylus extends PIXI.Graphics {
} }
eventInside(event) { eventInside(event) {
let local = this.toLocal(event.data.global) let local = this.toLocal(event.data.global)
for (let child of this.children) { for (let child of this.children) {
let r = child.getBounds() let r = child.getBounds()
@ -255,10 +262,8 @@ export default class Stylus extends PIXI.Graphics {
return false return false
} }
} }
if (local.x < 0 || local.x > this.wantedWidth) if (local.x < 0 || local.x > this.wantedWidth) return false
return false if (local.y < 0 || local.y > this.wantedHeight) return false
if (local.y < 0 || local.y > this.wantedHeight)
return false
event.stopPropagation() event.stopPropagation()
// if (this.debug) console.log('stopPropagation', event) // if (this.debug) console.log('stopPropagation', event)
if (event.data.originalEvent.claimedByScatter) { if (event.data.originalEvent.claimedByScatter) {
@ -276,9 +281,11 @@ export default class Stylus extends PIXI.Graphics {
let x = Math.max(0, Math.min(local.x, this.wantedWidth)) let x = Math.max(0, Math.min(local.x, this.wantedWidth))
let y = Math.max(0, Math.min(local.y, this.wantedHeight)) let y = Math.max(0, Math.min(local.y, this.wantedHeight))
let desc = { let desc = {
x, y, x,
y,
pressure: event.pressure || null, pressure: event.pressure || null,
tiltX: this.tiltX, tiltY: this.tiltY, tiltX: this.tiltX,
tiltY: this.tiltY,
color: this.color color: this.color
} }
return desc return desc
@ -313,8 +320,11 @@ 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.tiltToLineWidth(info.tiltY), this.lineStyle(
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()
@ -329,7 +339,7 @@ export default class Stylus extends PIXI.Graphics {
drawStrokes() { drawStrokes() {
this.drawBackground() this.drawBackground()
this.lineStyle(1.0, 0xFF0000, 1) this.lineStyle(1.0, 0xff0000, 1)
for (let stroke of this.iterStrokes()) { for (let stroke of this.iterStrokes()) {
this.drawStroke(stroke) this.drawStroke(stroke)
} }

213
lib/pixi/switch.js
View File

@ -59,7 +59,6 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
*/ */
export default class Switch extends PIXI.Container { export default class Switch extends PIXI.Container {
/** /**
* Creates an instance of a Switch. * Creates an instance of a Switch.
* *
@ -106,52 +105,57 @@ export default class Switch extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)? * @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
super() super()
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
x: 0, {
y: 0, id: PIXI.utils.uid(),
width: 44, x: 0,
height: 28, y: 0,
fill: theme.fill, width: 44,
fillAlpha: theme.fillAlpha, height: 28,
fillActive: theme.primaryColor, fill: theme.fill,
fillActiveAlpha: theme.fillActiveAlpha, fillAlpha: theme.fillAlpha,
stroke: theme.stroke, fillActive: theme.primaryColor,
strokeWidth: theme.strokeWidth, fillActiveAlpha: theme.fillActiveAlpha,
strokeAlpha: theme.strokeAlpha, stroke: theme.stroke,
strokeActive: theme.primaryColor, strokeWidth: theme.strokeWidth,
strokeActiveWidth: theme.strokeActiveWidth, strokeAlpha: theme.strokeAlpha,
strokeActiveAlpha: theme.strokeActiveAlpha, strokeActive: theme.primaryColor,
controlFill: theme.stroke, strokeActiveWidth: theme.strokeActiveWidth,
controlFillAlpha: theme.strokeAlpha, strokeActiveAlpha: theme.strokeActiveAlpha,
controlFillActive: theme.stroke, controlFill: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha, controlFillAlpha: theme.strokeAlpha,
controlStroke: theme.stroke, controlFillActive: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8, controlFillActiveAlpha: theme.strokeAlpha,
controlStrokeAlpha: theme.strokeAlpha, controlStroke: theme.stroke,
controlStrokeActive: theme.stroke, controlStrokeWidth: theme.strokeWidth * 0.8,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8, controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActiveAlpha: theme.strokeActiveAlpha, controlStrokeActive: theme.stroke,
duration: theme.fast, controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
durationActive: theme.fast, controlStrokeActiveAlpha: theme.strokeActiveAlpha,
disabled: false, duration: theme.fast,
active: false, durationActive: theme.fast,
action: null, disabled: false,
actionActive: null, active: false,
beforeAction: null, action: null,
afterAction: null, actionActive: null,
tooltip: null, beforeAction: null,
visible: true afterAction: null,
}, opts) tooltip: null,
visible: true
},
opts
)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2) this.opts.controlRadius =
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation // Validation
//----------------- //-----------------
@ -205,7 +209,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
setup() { setup() {
// Switch // Switch
//----------------- //-----------------
let switchObj = new PIXI.Graphics() let switchObj = new PIXI.Graphics()
@ -228,19 +231,18 @@ export default class Switch extends PIXI.Container {
// interaction // interaction
//----------------- //-----------------
this.switchObj.on('pointerover', e => { this.switchObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}) })
this.switchObj.on('pointerout', e => { this.switchObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1}) TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
}) })
this.switchObj.on('pointerdown', e => { this.switchObj.on('pointerdown', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .7}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
}) })
this.switchObj.on('pointerup', e => { this.switchObj.on('pointerup', e => {
if (this.opts.beforeAction) { if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this) this.opts.beforeAction.call(this, e, this)
} }
@ -257,7 +259,7 @@ export default class Switch extends PIXI.Container {
} }
} }
TweenLite.to(this.control, this.theme.fast, {alpha: .83}) TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
if (this.opts.afterAction) { if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this) this.opts.afterAction.call(this, e, this)
@ -295,7 +297,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
layout() { layout() {
// set position // set position
//----------------- //-----------------
this.position.set(this.opts.x, this.opts.y) this.position.set(this.opts.x, this.opts.y)
@ -314,20 +315,42 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
draw() { draw() {
this.switchObj.clear() this.switchObj.clear()
if (this.active) { if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha) this.switchObj.lineStyle(
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else { } else {
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha) this.switchObj.lineStyle(
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.opts.width, 0, this.opts.width, this.radius, this.radius) this.switchObj.arcTo(
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.opts.width,
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius) 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.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height) this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius) this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius) this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
@ -336,12 +359,26 @@ export default class Switch extends PIXI.Container {
// Draw control // Draw control
this.control.clear() this.control.clear()
if (this.active) { if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha) this.control.lineStyle(
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha) this.opts.controlStrokeActiveWidth,
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
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.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha) this.control.lineStyle(
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha) this.opts.controlStrokeWidth,
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()
@ -356,23 +393,48 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
drawAnimated() { drawAnimated() {
this.switchObj.clear() this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha) this.switchObj.lineStyle(
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha) this.tempAnimated.strokeWidth,
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.opts.width, 0, this.opts.width, this.radius, this.radius) this.switchObj.arcTo(
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke. this.opts.width,
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius) 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.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height) this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius) this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius) this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill() this.switchObj.endFill()
this.control.clear() this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha) this.control.lineStyle(
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha) this.tempAnimated.controlStrokeWidth,
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
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()
@ -389,12 +451,10 @@ export default class Switch extends PIXI.Container {
} }
set active(value) { set active(value) {
this._active = value this._active = value
if (this._active) { if (this._active) {
TweenLite.to(this.control, this.opts.duration, { x: this.xActive })
TweenLite.to(this.control, this.opts.duration, {x: this.xActive})
TweenLite.to(this.tempAnimated, this.opts.duration, { TweenLite.to(this.tempAnimated, this.opts.duration, {
colorProps: { colorProps: {
fill: this.opts.fillActive, fill: this.opts.fillActive,
@ -413,10 +473,10 @@ export default class Switch extends PIXI.Container {
onUpdate: () => this.drawAnimated(), onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw() onComplete: () => this.draw()
}) })
} else { } else {
TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive}) TweenLite.to(this.control, this.opts.durationActive, {
x: this.xInactive
})
TweenLite.to(this.tempAnimated, this.opts.durationActive, { TweenLite.to(this.tempAnimated, this.opts.durationActive, {
colorProps: { colorProps: {
fill: this.opts.fill, fill: this.opts.fill,
@ -448,14 +508,13 @@ export default class Switch extends PIXI.Container {
} }
set disabled(value) { set disabled(value) {
this._disabled = value this._disabled = value
if (this._disabled) { if (this._disabled) {
this.switchObj.interactive = false this.switchObj.interactive = false
this.switchObj.buttonMode = false this.switchObj.buttonMode = false
this.switchObj.alpha = .5 this.switchObj.alpha = 0.5
this.control.alpha = .5 this.control.alpha = 0.5
} else { } else {
this.switchObj.interactive = true this.switchObj.interactive = true
this.switchObj.buttonMode = true this.switchObj.buttonMode = true
@ -470,7 +529,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
show() { show() {
this.opts.strokeAlpha = 1 this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1 this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1 this.opts.fillAlpha = 1
@ -491,7 +549,6 @@ export default class Switch extends PIXI.Container {
* @return {Switch} A reference to the switch for chaining. * @return {Switch} A reference to the switch for chaining.
*/ */
hide() { hide() {
this.opts.strokeAlpha = 0 this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0 this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0 this.opts.fillAlpha = 0

55
lib/pixi/test.js
View File

@ -15,12 +15,11 @@ export class Command extends PIXI.Graphics {
this.setup() this.setup()
} }
setup() { setup() {}
}
draw() { draw() {
this.clear() this.clear()
var color = (this.selected) ? this.selectedColor : 0xFFFFFF var color = this.selected ? this.selectedColor : 0xffffff
this.lineStyle(0) this.lineStyle(0)
this.beginFill(color, 1) this.beginFill(color, 1)
this.drawShape(this.shape) this.drawShape(this.shape)
@ -108,7 +107,6 @@ export class StopCommand extends Command {
} }
export class RecorderTools extends PIXI.Container { export class RecorderTools extends PIXI.Container {
constructor(renderer) { constructor(renderer) {
super(renderer) super(renderer)
this.renderer = renderer this.renderer = renderer
@ -122,7 +120,9 @@ export class RecorderTools extends PIXI.Container {
setup(container) { setup(container) {
// Since this delegate might shadow another delegate, we mus avoid // Since this delegate might shadow another delegate, we mus avoid
// capturing PointerEvents. // capturing PointerEvents.
this.delegate = new InteractionMapper(container, this, { capturePointerEvents: false }) this.delegate = new InteractionMapper(container, this, {
capturePointerEvents: false
})
} }
findTarget(event, local, global) { findTarget(event, local, global) {
@ -131,13 +131,21 @@ export class RecorderTools extends PIXI.Container {
setupToolbar() { setupToolbar() {
this.toolbar = new PIXI.Graphics() this.toolbar = new PIXI.Graphics()
this.record = new RecordCommand(this, 0xCC0000, new PIXI.Circle(0, 0, 16)) this.record = new RecordCommand(
this.play = new PlayCommand(this, 0x0000CC, new PIXI.Polygon(0, 16, this,
32, 16 + 16, 0xcc0000,
0, 16 + 32, new PIXI.Circle(0, 0, 16)
0, 16)) )
this.stop = new StopCommand(this, 0x0000CC, this.play = new PlayCommand(
new PIXI.Rectangle(0, 0, 32, 32)) 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)
@ -149,7 +157,7 @@ export class RecorderTools extends PIXI.Container {
var graphics = this.toolbar var graphics = this.toolbar
graphics.clear() graphics.clear()
graphics.beginFill(0x000000, 0.5) graphics.beginFill(0x000000, 0.5)
graphics.lineStyle(2, 0xFFFFFF, 1) graphics.lineStyle(2, 0xffffff, 1)
graphics.drawRoundedRect(16, 16, 44 * 4 + 8, 64, 8) graphics.drawRoundedRect(16, 16, 44 * 4 + 8, 64, 8)
graphics.endFill() graphics.endFill()
} }
@ -175,7 +183,11 @@ 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(local, point.x, point.y) this.renderer.plugins.interaction.mapPositionToPoint(
local,
point.x,
point.y
)
return local return local
} }
@ -184,8 +196,7 @@ export class RecorderTools extends PIXI.Container {
} }
capture(event) { capture(event) {
if (typeof event.mouseDownSubstitute != 'undefined') if (typeof event.mouseDownSubstitute != 'undefined') return false
return false
return true return true
} }
@ -226,8 +237,7 @@ export class RecorderTools extends PIXI.Container {
let local = this.extractLocal(event) let local = this.extractLocal(event)
if (this.toolbar.containsPoint(local)) { if (this.toolbar.containsPoint(local)) {
this.onPress(local) this.onPress(local)
} } else {
else {
this.recordEvent(event) this.recordEvent(event)
this.updateTouchGraphics(interaction) this.updateTouchGraphics(interaction)
} }
@ -244,9 +254,9 @@ export class RecorderTools extends PIXI.Container {
} }
let p = current.get(key) let p = current.get(key)
if (key == 'mouse') { if (key == 'mouse') {
graphics.beginFill(0xCC0000, 0.5) graphics.beginFill(0xcc0000, 0.5)
} else { } else {
graphics.beginFill(0xCCCCCC, 0.5) graphics.beginFill(0xcccccc, 0.5)
} }
graphics.drawCircle(p.x, p.y, 20) graphics.drawCircle(p.x, p.y, 20)
} }
@ -256,7 +266,6 @@ export class RecorderTools extends PIXI.Container {
} }
export class AppTest extends PIXIApp { export class AppTest extends PIXIApp {
constructor(canvas, container) { constructor(canvas, container) {
super({ view: canvas, backgroundColor: 0x000000 }) super({ view: canvas, backgroundColor: 0x000000 })
this.container = container this.container = container
@ -277,7 +286,3 @@ export class AppTest extends PIXIApp {
return this return this
} }
} }

134
lib/pixi/theme.js
View File

@ -31,7 +31,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export default class Theme { export default class Theme {
/** /**
* Creates an instance of a Theme. * Creates an instance of a Theme.
* *
@ -81,52 +80,86 @@ export default class Theme {
* is used for large actived text. * is used for large actived text.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const colorPrimary =
opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue this.opts = Object.assign(
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black {},
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white {
margin: 12,
this.opts = Object.assign({}, { padding: 12,
margin: 12, radius: 4,
padding: 12, fast: 0.25,
radius: 4, normal: 0.5,
fast: .25, slow: 1,
normal: .5, primaryColor: colorPrimary,
slow: 1, color1: color1,
primaryColor: colorPrimary, color2: color2,
color1: color1, fill: color1,
color2: color2, fillAlpha: 1,
fill: color1, fillActive: color1,
fillAlpha: 1, fillActiveAlpha: 1,
fillActive: color1, stroke: color2,
fillActiveAlpha: 1, strokeWidth: 0.6,
stroke: color2, strokeAlpha: 1,
strokeWidth: .6, strokeActive: color2,
strokeAlpha: 1, strokeActiveWidth: 0.6,
strokeActive: color2, strokeActiveAlpha: 1,
strokeActiveWidth: .6, iconColor: color2,
strokeActiveAlpha: 1, iconColorActive: colorPrimary,
iconColor: color2, background: color1
iconColorActive: colorPrimary, },
background: color1 opts
}, opts) )
// Set textStyle and variants // Set textStyle and variants
this.opts.textStyle = Object.assign({}, { this.opts.textStyle = Object.assign(
fontFamily: '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default', {},
fontWeight: '500', {
fontSize: 18, fontFamily:
fill: color2, '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
stroke: color1, fontWeight: '500',
strokeThickness: 0, fontSize: 18,
miterLimit: 1, fill: color2,
lineJoin: 'round' stroke: color1,
}, this.opts.textStyle) strokeThickness: 0,
this.opts.textStyleSmall = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize - 3}, this.opts.textStyleSmall) miterLimit: 1,
this.opts.textStyleLarge = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize + 3}, this.opts.textStyleLarge) lineJoin: 'round'
this.opts.textStyleActive = Object.assign({}, this.opts.textStyle, {fill: this.opts.primaryColor}, this.opts.textStyleActive) },
this.opts.textStyleSmallActive = Object.assign({}, this.opts.textStyleSmall, {fill: this.opts.primaryColor}, this.opts.textStyleSmallActive) this.opts.textStyle
this.opts.textStyleLargeActive = Object.assign({}, this.opts.textStyleLarge, {fill: this.opts.primaryColor}, this.opts.textStyleLargeActive) )
this.opts.textStyleSmall = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize - 3 },
this.opts.textStyleSmall
)
this.opts.textStyleLarge = Object.assign(
{},
this.opts.textStyle,
{ fontSize: this.opts.textStyle.fontSize + 3 },
this.opts.textStyleLarge
)
this.opts.textStyleActive = Object.assign(
{},
this.opts.textStyle,
{ fill: this.opts.primaryColor },
this.opts.textStyleActive
)
this.opts.textStyleSmallActive = Object.assign(
{},
this.opts.textStyleSmall,
{ fill: this.opts.primaryColor },
this.opts.textStyleSmallActive
)
this.opts.textStyleLargeActive = Object.assign(
{},
this.opts.textStyleLarge,
{ fill: this.opts.primaryColor },
this.opts.textStyleLargeActive
)
Object.assign(this, this.opts) Object.assign(this, this.opts)
} }
@ -139,7 +172,6 @@ export default class Theme {
* @return {Theme} Returns a newly created Theme object. * @return {Theme} Returns a newly created Theme object.
*/ */
static fromString(theme) { static fromString(theme) {
if (theme && typeof theme === 'object') { if (theme && typeof theme === 'object') {
return theme return theme
} }
@ -171,9 +203,7 @@ export default class Theme {
* @extends Theme * @extends Theme
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export class ThemeDark extends Theme { export class ThemeDark extends Theme {}
}
/** /**
* Class that represents a PixiJS ThemeLight. * Class that represents a PixiJS ThemeLight.
@ -193,15 +223,13 @@ export class ThemeDark extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export class ThemeLight extends Theme { export class ThemeLight extends Theme {
/** /**
* Creates an instance of a ThemeLight. * Creates an instance of a ThemeLight.
* *
* @constructor * @constructor
*/ */
constructor() { constructor() {
super({ color1: 0xf6f6f6, color2: 0x282828 })
super({color1: 0xf6f6f6, color2: 0x282828})
} }
} }
@ -223,14 +251,12 @@ export class ThemeLight extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/ */
export class ThemeRed extends Theme { export class ThemeRed extends Theme {
/** /**
* Creates an instance of a ThemeRed. * Creates an instance of a ThemeRed.
* *
* @constructor * @constructor
*/ */
constructor() { constructor() {
super({ primaryColor: 0xd92f31 })
super({primaryColor: 0xd92f31})
} }
} }

288
lib/pixi/timeline.js
View File

@ -2,9 +2,7 @@ import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
import { Capabilities } from '../capabilities.js' import { Capabilities } from '../capabilities.js'
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js' import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
export class Ticks { export class Ticks {
get reservedPrefixes() { get reservedPrefixes() {
return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second'] return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second']
} }
@ -70,15 +68,19 @@ export class Ticks {
visibleLast = end visibleLast = end
} }
} }
if (first == null) if (first == null) return info
return info return {
return { start: first, end: last, visibleStart: visibleFirst, visibleEnd: visibleLast, units: units } start: first,
end: last,
visibleStart: visibleFirst,
visibleEnd: visibleLast,
units: units
}
} }
drawTick(timeline, x, y, date) { drawTick(timeline, x, y, date) {
let visible = date > timeline.start && date < timeline.end let visible = date > timeline.start && date < timeline.end
if (!visible) if (!visible) return false
return false
timeline.drawTick(x) timeline.drawTick(x)
return true return true
} }
@ -87,13 +89,24 @@ export class Ticks {
return date.toLocaleDateString('de', format) return date.toLocaleDateString('de', format)
} }
draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks=false) { draw(
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 = keyedFormat != null && keyedFormat == keyedNextFormat let fullyRedundant =
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)
@ -110,31 +123,29 @@ export class Ticks {
let nextX = timeline.toX(end) - 100 let nextX = timeline.toX(end) - 100
if (x < 0 && nextX > -100 && !redundant) { if (x < 0 && nextX > -100 && !redundant) {
xx = Math.min(4, nextX) xx = Math.min(4, nextX)
} } else {
else {
xx -= 2 xx -= 2
} }
} } else if (level > 0) {
else if (level > 0) {
xx = x + available / 2 xx = x + available / 2
} }
if (!fullyRedundant) { if (!fullyRedundant) {
timeline.ensureLabel(key, text, timeline.ensureLabel(
key,
text,
{ x: xx, y: yy, align }, { x: xx, y: yy, align },
FontInfo.small) FontInfo.small
)
} }
if (extraTicks) if (extraTicks) timeline.drawTick(x, -level)
timeline.drawTick(x, -level)
} }
if (timeline.visibleRange(start, end)) { if (timeline.visibleRange(start, end)) {
if (first == null) if (first == null) first = start
first = start
last = end last = end
} }
} }
if (first == null) if (first == null) return null
return null
return { start: first, end: last } return { start: first, end: last }
} }
@ -149,7 +160,6 @@ export class Ticks {
} }
export class DecadeTicks extends Ticks { export class DecadeTicks extends Ticks {
get milliseconds() { get milliseconds() {
return 10 * 365 * 24 * 60 * 60 * 1000 return 10 * 365 * 24 * 60 * 60 * 1000
} }
@ -182,14 +192,12 @@ export class DecadeTicks extends Ticks {
} }
export class YearTicks extends Ticks { export class YearTicks extends Ticks {
get milliseconds() { get milliseconds() {
return 365 * 24 * 60 * 60 * 1000 return 365 * 24 * 60 * 60 * 1000
} }
format(available) { format(available) {
if (available < 44) if (available < 44) return { year: '2-digit', timeZone: 'UTC' }
return { year: '2-digit', timeZone: 'UTC' }
return { year: 'numeric', timeZone: 'UTC' } return { year: 'numeric', timeZone: 'UTC' }
} }
@ -211,17 +219,14 @@ export class YearTicks extends Ticks {
} }
export class MonthTicks extends Ticks { export class MonthTicks extends Ticks {
get milliseconds() { get milliseconds() {
return (365 / 12) * 24 * 60 * 60 * 1000 return (365 / 12) * 24 * 60 * 60 * 1000
} }
format(available) { format(available) {
let format = { month: 'narrow', timeZone: 'UTC' } let format = { month: 'narrow', timeZone: 'UTC' }
if (available > 44) if (available > 44) format.month = 'short'
format.month = 'short' if (available > 66) format.year = '2-digit'
if (available > 66)
format.year = '2-digit'
if (available > 100) { if (available > 100) {
format.month = 'long' format.month = 'long'
format.year = 'numeric' format.year = 'numeric'
@ -251,15 +256,13 @@ export class MonthTicks extends Ticks {
} }
export class DayTicks extends Ticks { export class DayTicks extends Ticks {
get milliseconds() { get milliseconds() {
return 24 * 60 * 60 * 1000 return 24 * 60 * 60 * 1000
} }
format(available) { format(available) {
let format = { day: 'numeric', timeZone: 'UTC' } let format = { day: 'numeric', timeZone: 'UTC' }
if (available > 44) if (available > 44) format.month = 'short'
format.month = 'short'
if (available > 100) { if (available > 100) {
format.month = 'long' format.month = 'long'
format.year = '2-digit' format.year = '2-digit'
@ -283,7 +286,11 @@ export class DayTicks extends Ticks {
} }
iterStart(start) { iterStart(start) {
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate()) return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate()
)
} }
next(date) { next(date) {
@ -292,7 +299,6 @@ export class DayTicks extends Ticks {
} }
export class HourTicks extends Ticks { export class HourTicks extends Ticks {
get milliseconds() { get milliseconds() {
return 60 * 60 * 1000 return 60 * 60 * 1000
} }
@ -325,17 +331,22 @@ export class HourTicks extends Ticks {
} }
dateKey(date) { dateKey(date) {
return this.key + date.getFullYear() return (
+ date.getMonth() this.key +
+ date.getDate() date.getFullYear() +
+ date.getHours() date.getMonth() +
date.getDate() +
date.getHours()
)
} }
iterStart(start) { iterStart(start) {
return Dates.create(start.getFullYear(), return Dates.create(
start.getFullYear(),
start.getMonth(), start.getMonth(),
start.getDate(), start.getDate(),
start.getHours()) start.getHours()
)
} }
next(date) { next(date) {
@ -348,7 +359,6 @@ export class HourTicks extends Ticks {
} }
export class MinuteTicks extends Ticks { export class MinuteTicks extends Ticks {
get milliseconds() { get milliseconds() {
return 60 * 1000 return 60 * 1000
} }
@ -378,19 +388,24 @@ export class MinuteTicks extends Ticks {
} }
dateKey(date) { dateKey(date) {
return this.key + date.getFullYear() return (
+ date.getMonth() this.key +
+ date.getDate() date.getFullYear() +
+ date.getHours() date.getMonth() +
+ date.getMinutes() date.getDate() +
date.getHours() +
date.getMinutes()
)
} }
iterStart(start) { iterStart(start) {
return Dates.create(start.getFullYear(), return Dates.create(
start.getFullYear(),
start.getMonth(), start.getMonth(),
start.getDate(), start.getDate(),
start.getHours(), start.getHours(),
start.getMinutes()) start.getMinutes()
)
} }
next(date) { next(date) {
@ -403,7 +418,6 @@ export class MinuteTicks extends Ticks {
} }
export class TimeTicks { export class TimeTicks {
constructor(...ticks) { constructor(...ticks) {
this.ticks = ticks this.ticks = ticks
} }
@ -435,9 +449,11 @@ export class TimeTicks {
let amount = ticks.milliseconds / duration let amount = ticks.milliseconds / duration
let available = amount * size let available = amount * size
availables.set(ticks, available) availables.set(ticks, available)
if (available < ticks.minWidth) if (available < ticks.minWidth) break
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)
@ -445,21 +461,26 @@ export class TimeTicks {
let level = 0 let level = 0
let ranges = [] let ranges = []
for (let ticks of visible) { for (let ticks of visible) {
if (range == null) if (range == null) continue
continue range = ticks.draw(
range = ticks.draw(timeline, range, width, height, timeline,
range,
width,
height,
availables.get(ticks), availables.get(ticks),
formats.get(ticks), formats.get(ticks),
nextFormats.get(ticks), level) nextFormats.get(ticks),
level
)
if (range) { if (range) {
ranges.push({ticks, range}) ranges.push({ ticks, range })
} }
level += 1 level += 1
} }
let extraLevel = ranges.length - 1 let extraLevel = ranges.length - 1
let extraStart = extraLevel let extraStart = extraLevel
for(let {ticks, range} of ranges) { for (let { ticks, range } of ranges) {
ticks.drawExtra(timeline, range, extraLevel) ticks.drawExtra(timeline, range, extraLevel)
extraLevel -= 1 extraLevel -= 1
if (extraLevel <= 0) { if (extraLevel <= 0) {
@ -475,7 +496,6 @@ export class TimeTicks {
} }
export class ColorRanges { export class ColorRanges {
constructor(label, color, ranges) { constructor(label, color, ranges) {
this.label = label this.label = label
this.color = color this.color = color
@ -502,9 +522,16 @@ export class ColorRanges {
} }
export default class Timeline extends BitmapLabeledGraphics { export default class Timeline extends BitmapLabeledGraphics {
constructor(
constructor(width, height, { ticks = null, width,
baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) { 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
@ -521,10 +548,12 @@ export default class Timeline extends BitmapLabeledGraphics {
this.deltas = [] this.deltas = []
this.labelDates = [] this.labelDates = []
this.colorRanges = [] this.colorRanges = []
this.rangeColors = new Cycle(Colors.eminence, this.rangeColors = new Cycle(
Colors.eminence,
Colors.steelblue, Colors.steelblue,
Colors.ochre, Colors.ochre,
Colors.turquoise) Colors.turquoise
)
this.callbacks = [] this.callbacks = []
this.onTapCallbacks = [] this.onTapCallbacks = []
this.onDoubleTapCallbacks = [] this.onDoubleTapCallbacks = []
@ -536,18 +565,21 @@ 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 = ticks || new TimeTicks(new DecadeTicks(), this.timeticks =
new YearTicks(), ticks ||
new MonthTicks(), new TimeTicks(
new DayTicks()) new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks()
)
this.labelPrefix = '__' this.labelPrefix = '__'
} }
updateSelection() { updateSelection() {
if (this.visibleDate(this.start) && this.visibleDate(this.end)) { if (this.visibleDate(this.start) && this.visibleDate(this.end)) {
this.selection = [this.start, this.end] this.selection = [this.start, this.end]
} } else {
else {
this.timeticks.selectedRange(this) this.timeticks.selectedRange(this)
} }
@ -593,8 +625,12 @@ export default class Timeline extends BitmapLabeledGraphics {
let cr = this.colorRanges[i] let cr = this.colorRanges[i]
let label = cr.label let label = cr.label
cr.draw(this, w, h) cr.draw(this, w, h)
let current = this.ensureLabel('colorRange:' + label, label, let current = this.ensureLabel(
{ x: xx, y: yy, align: 'right' }, FontInfo.small) 'colorRange:' + label,
label,
{ x: xx, y: yy, align: 'right' },
FontInfo.small
)
let r = current.getBounds() let r = current.getBounds()
xx -= r.width + 16 xx -= r.width + 16
@ -623,7 +659,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.prepareLabels() this.prepareLabels()
this.updateColorRanges(w, h) this.updateColorRanges(w, h)
this.lineStyle(2, 0xFFFFFF) this.lineStyle(2, 0xffffff)
if (this.start != null && this.end != null) { if (this.start != null && this.end != null) {
this.moveTo(this.toX(this.start), y) this.moveTo(this.toX(this.start), y)
this.lineTo(this.toX(this.end), y) this.lineTo(this.toX(this.end), y)
@ -631,32 +667,30 @@ export default class Timeline extends BitmapLabeledGraphics {
this.updateSelection() this.updateSelection()
let selected = this.selection let selected = this.selection
if (selected[0] != this.start && selected[1] != this.end) { if (selected[0] != this.start && selected[1] != this.end) {
if (this.showRange) if (this.showRange) this.drawSelectedRamge(selected)
this.drawSelectedRamge(selected)
} }
for (let callback of this.callbacks) { for (let callback of this.callbacks) {
callback(this.scroll, this.zoom, this.selection) callback(this.scroll, this.zoom, this.selection)
} }
} } else {
else {
this.moveTo(this.inset, y) this.moveTo(this.inset, y)
this.lineTo(w - this.inset, y) this.lineTo(w - this.inset, y)
} }
if (this.progress != null && this.progress < 1) { if (this.progress != null && this.progress < 1) {
this.lineStyle(2, 0xCCCCFF) this.lineStyle(2, 0xccccff)
this.moveTo(this.inset, y) this.moveTo(this.inset, y)
this.lineTo((w - this.inset) * this.progress, y) this.lineTo((w - this.inset) * this.progress, y)
} }
} }
totalWidth(bounded = false) { totalWidth(bounded = false) {
let w = this.wantedWidth - (2 * this.inset) let w = this.wantedWidth - 2 * this.inset
return w * this.validZoom(this.zoom, bounded) return w * this.validZoom(this.zoom, bounded)
} }
validZoom(zoom, bounded = true) { validZoom(zoom, bounded = true) {
let overshoot = (bounded) ? 1.0 : 2.0 let overshoot = bounded ? 1.0 : 2.0
zoom = Math.max(zoom, this.minZoom / overshoot) zoom = Math.max(zoom, this.minZoom / overshoot)
zoom = Math.min(zoom, this.maxZoom * overshoot) zoom = Math.min(zoom, this.maxZoom * overshoot)
return zoom return zoom
@ -690,7 +724,7 @@ export default class Timeline extends BitmapLabeledGraphics {
y = this.getY() y = this.getY()
} }
this.moveTo(x, y) this.moveTo(x, y)
this.lineTo(x, y - (this.tickHeight * direction * this.direction)) this.lineTo(x, y - this.tickHeight * direction * this.direction)
} }
prepareLabels() { prepareLabels() {
@ -710,24 +744,22 @@ export default class Timeline extends BitmapLabeledGraphics {
visibleDate(date, offset = 0) { visibleDate(date, offset = 0) {
if (date >= this.start && date <= this.end) { if (date >= this.start && date <= this.end) {
let x = this.toX(date) + offset let x = this.toX(date) + offset
return (x > 0 && x < this.wantedWidth) return x > 0 && x < this.wantedWidth
} }
return false return false
} }
visibleRange(start, end) { visibleRange(start, end) {
let x = this.toX(start) let x = this.toX(start)
if (x > this.wantedWidth) if (x > this.wantedWidth) return false
return false
x = this.toX(end) x = this.toX(end)
if (x < 0) if (x < 0) return false
return false
return true return true
} }
tickLabelOffset(direction = 1, level = 0) { tickLabelOffset(direction = 1, level = 0) {
let fs = FontInfo.small.fontSize let fs = FontInfo.small.fontSize
let dh = fs + (level * (fs + 2)) let dh = fs + level * (fs + 2)
return this.direction * direction * dh return this.direction * direction * dh
} }
@ -740,12 +772,16 @@ export default class Timeline extends BitmapLabeledGraphics {
let [label, date] = this.labelDates[i] let [label, date] = this.labelDates[i]
let align = 'center' // (last == null) ? 'right' : 'left' let align = 'center' // (last == null) ? 'right' : 'left'
let x = this.toX(date) let x = this.toX(date)
let current = this.ensureLabel(this.labelPrefix + label, label, let current = this.ensureLabel(
this.labelPrefix + label,
label,
{ {
x: x, y: y, x: x,
y: y,
align align
}, },
FontInfo.small) FontInfo.small
)
let r = current.getBounds() let r = current.getBounds()
current.visible = !(last != null && r.x + r.width > last.x) current.visible = !(last != null && r.x + r.width > last.x)
if (current.visible) { if (current.visible) {
@ -753,12 +789,26 @@ export default class Timeline extends BitmapLabeledGraphics {
last = r last = r
} }
} }
} } else {
else { let start = this.start.toLocaleDateString('de', {
let start = this.start.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' }) year: 'numeric',
let end = this.end.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' }) month: 'numeric',
this.ensureLabel(this.labelPrefix + 'start', start, { x: this.toX(this.start), y: h2 }) day: 'numeric'
this.ensureLabel(this.labelPrefix + 'end', end, { x: this.toX(this.end), y: h2, align: 'right' }) })
let end = this.end.toLocaleDateString('de', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
})
this.ensureLabel(this.labelPrefix + 'start', start, {
x: this.toX(this.start),
y: h2
})
this.ensureLabel(this.labelPrefix + 'end', end, {
x: this.toX(this.end),
y: h2,
align: 'right'
})
} }
} }
@ -774,7 +824,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.killTweens() this.killTweens()
this.deltas = [] this.deltas = []
this.validScroll() this.validScroll()
if (typeof ThrowPropsPlugin != "undefined") { if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this, 'delta') ThrowPropsPlugin.track(this, 'delta')
} }
} }
@ -796,8 +846,7 @@ export default class Timeline extends BitmapLabeledGraphics {
} }
onEnd(event, interaction) { onEnd(event, interaction) {
if (typeof ThrowPropsPlugin != 'undefined') {
if (typeof ThrowPropsPlugin != "undefined") {
let vel = ThrowPropsPlugin.getVelocity(this, 'delta') let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
ThrowPropsPlugin.untrack(this) ThrowPropsPlugin.untrack(this)
} }
@ -815,33 +864,31 @@ export default class Timeline extends BitmapLabeledGraphics {
let anchor = interaction.current.mean() let anchor = interaction.current.mean()
this.keepInBounds(delta, anchor) this.keepInBounds(delta, anchor)
for(let key of interaction.ended.keys()) { for (let key of interaction.ended.keys()) {
if (interaction.isDoubleTap(key)) { if (interaction.isDoubleTap(key)) {
this.onDoubleTap(event, interaction, key) this.onDoubleTap(event, interaction, key)
} } else if (interaction.isTap(key)) {
else if (interaction.isTap(key)) {
this.onTap(event, interaction, key) this.onTap(event, interaction, key)
} } else if (interaction.isLongPress(key)) {
else if (interaction.isLongPress(key)) {
this.onLongPress(event, interaction, key) this.onLongPress(event, interaction, key)
} }
} }
} }
onLongPress(event, interaction, key) { onLongPress(event, interaction, key) {
for(let callback of this.onLongPressCallbacks) { for (let callback of this.onLongPressCallbacks) {
callback(event, interaction, key) callback(event, interaction, key)
} }
} }
onTap(event, interaction, key) { onTap(event, interaction, key) {
for(let callback of this.onTapCallbacks) { for (let callback of this.onTapCallbacks) {
callback(event, interaction, key) callback(event, interaction, key)
} }
} }
onDoubleTap(event, interaction, key) { onDoubleTap(event, interaction, key) {
for(let callback of this.onDoubleTapCallbacks) { for (let callback of this.onDoubleTapCallbacks) {
callback(event, interaction, key) callback(event, interaction, key)
} }
} }
@ -854,8 +901,7 @@ export default class Timeline extends BitmapLabeledGraphics {
_scrollMaximum(bounded) { _scrollMaximum(bounded) {
let total = this.totalWidth(bounded) let total = this.totalWidth(bounded)
let limit = this.wantedWidth let limit = this.wantedWidth
if (total > limit) if (total > limit) return 0
return 0
let w = limit - 2 * this.inset let w = limit - 2 * this.inset
return (w - total) / 2 return (w - total) / 2
} }
@ -873,7 +919,6 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false this.autoScroll = false
} }
validScroll(bounded = true) { validScroll(bounded = true) {
let minimum = this.scrollMinimum(bounded) let minimum = this.scrollMinimum(bounded)
let maximum = this.scrollMaximum(bounded) let maximum = this.scrollMaximum(bounded)
@ -898,8 +943,7 @@ export default class Timeline extends BitmapLabeledGraphics {
let newX = this.toX(date) let newX = this.toX(date)
tweens.scroll = this.scroll + anchor.x - newX tweens.scroll = this.scroll + anchor.x - newX
this.zoom = oldZoom this.zoom = oldZoom
} } else {
else {
if (this.zoom < this.minZoom) { if (this.zoom < this.minZoom) {
tweens.zoom = this.minZoom tweens.zoom = this.minZoom
} }
@ -911,7 +955,9 @@ export default class Timeline extends BitmapLabeledGraphics {
} }
} }
if (!isEmpty(tweens)) { if (!isEmpty(tweens)) {
tweens.onUpdate = () => { this.redraw() } tweens.onUpdate = () => {
this.redraw()
}
TweenLite.to(this, 0.5, tweens).delay(0.1) TweenLite.to(this, 0.5, tweens).delay(0.1)
return return
} }
@ -928,15 +974,14 @@ export default class Timeline extends BitmapLabeledGraphics {
let direction = event.detail < 0 || event.wheelDelta > 0 let direction = event.detail < 0 || event.wheelDelta > 0
let anchor = { x: event.clientX, y: event.clientY } let anchor = { x: event.clientX, y: event.clientY }
const zoomFactor = 1.5 const zoomFactor = 1.5
this.onZoom((direction) ? zoomFactor : 1 / zoomFactor, anchor) this.onZoom(direction ? zoomFactor : 1 / zoomFactor, anchor)
this.redraw() this.redraw()
this.keepInBounds(0, anchor) this.keepInBounds(0, anchor)
} }
showRanges(ranges, label = "Untitled", color = null) { showRanges(ranges, label = 'Untitled', color = null) {
for (let cr of this.colorRanges) { for (let cr of this.colorRanges) {
if (cr.label == label) if (cr.label == label) return
return
} }
while (this.colorRanges.length >= this.rangeColors.length) { while (this.colorRanges.length >= this.rangeColors.length) {
this.colorRanges.shift() this.colorRanges.shift()
@ -945,4 +990,3 @@ export default class Timeline extends BitmapLabeledGraphics {
this.redraw() this.redraw()
} }
} }

29
lib/pixi/tooltip.js
View File

@ -29,7 +29,6 @@ import AbstractPopup from './abstractpopup.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest}
*/ */
export default class Tooltip extends AbstractPopup { export default class Tooltip extends AbstractPopup {
/** /**
* Creates an instance of a Tooltip. * Creates an instance of a Tooltip.
* *
@ -45,19 +44,22 @@ export default class Tooltip extends AbstractPopup {
* @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened. * @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, { opts = Object.assign(
minWidth: 0, {},
minHeight: 0, {
padding: theme.padding / 2, minWidth: 0,
object: null, minHeight: 0,
container: null, padding: theme.padding / 2,
offsetLeft: 8, object: null,
offsetTop: -8, container: null,
delay: 0 offsetLeft: 8,
}, opts) offsetTop: -8,
delay: 0
},
opts
)
opts.container = opts.container || opts.object opts.container = opts.container || opts.object
@ -79,7 +81,6 @@ export default class Tooltip extends AbstractPopup {
* @return {Tooltip} A reference to the tooltip for chaining. * @return {Tooltip} A reference to the tooltip for chaining.
*/ */
setup() { setup() {
super.setup() super.setup()
// bind events this // bind events this
@ -109,7 +110,6 @@ export default class Tooltip extends AbstractPopup {
let mouseoverObject = false let mouseoverObject = false
object.on('mouseover', e => { object.on('mouseover', e => {
this.timeout = window.setTimeout(() => { this.timeout = window.setTimeout(() => {
mouseoverObject = true mouseoverObject = true
this.visible = true this.visible = true
@ -144,7 +144,6 @@ export default class Tooltip extends AbstractPopup {
* @return {Tooltip} A reference to the tooltip for chaining. * @return {Tooltip} A reference to the tooltip for chaining.
*/ */
setPosition(e) { setPosition(e) {
const position = e.data.getLocalPosition(this.opts.container) const position = e.data.getLocalPosition(this.opts.container)
this.x = position.x + this.opts.offsetLeft this.x = position.x + this.opts.offsetLeft

35
lib/pixi/volatile.js
View File

@ -29,7 +29,6 @@ import Theme from './theme.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
*/ */
export default class Volatile { export default class Volatile {
/** /**
* Creates an instance of a Volatile. * Creates an instance of a Volatile.
* *
@ -46,21 +45,24 @@ export default class Volatile {
* @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation? * @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
*/ */
constructor(opts = {}) { constructor(opts = {}) {
const theme = Theme.fromString(opts.theme) const theme = Theme.fromString(opts.theme)
this.theme = theme this.theme = theme
this.opts = Object.assign({}, { this.opts = Object.assign(
id: PIXI.utils.uid(), {},
object: null, {
direction: 'top', // top, right, bottom, left id: PIXI.utils.uid(),
onStart: null, object: null,
onComplete: null, direction: 'top', // top, right, bottom, left
distance: 160, onStart: null,
duration: 1.5, onComplete: null,
ease: Quad.easeOut, distance: 160,
destroyOnComplete: true duration: 1.5,
}, opts) ease: Quad.easeOut,
destroyOnComplete: true
},
opts
)
this.id = this.opts.id this.id = this.opts.id
@ -90,7 +92,6 @@ export default class Volatile {
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
setup() { setup() {
return this return this
} }
@ -100,7 +101,6 @@ export default class Volatile {
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
layout() { layout() {
return this return this
} }
@ -111,9 +111,7 @@ export default class Volatile {
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
run() { run() {
for (let object of this.objects) { for (let object of this.objects) {
let x = object.x let x = object.x
let y = object.y let y = object.y
@ -144,13 +142,12 @@ export default class Volatile {
} }
}, },
onComplete: () => { onComplete: () => {
if (this.opts.onComplete) { if (this.opts.onComplete) {
this.opts.onComplete.call(object, object) this.opts.onComplete.call(object, object)
} }
if (this.opts.destroyOnComplete) { if (this.opts.destroyOnComplete) {
object.destroy({children: true}) object.destroy({ children: true })
} }
} }
}) })

15
lib/poppable.js
View File

@ -2,7 +2,6 @@
* shown. * shown.
*/ */
export default class Poppable { export default class Poppable {
/** Register the poppable element in a context. Closes previously registered ones. /** Register the poppable element in a context. Closes previously registered ones.
* @param {*} context * @param {*} context
*/ */
@ -34,12 +33,12 @@ export default class Poppable {
} }
/** Sets the poppable in the given context /** Sets the poppable in the given context
* @static * @static
* @param {*} context * @param {*} context
* @param {*} poppable * @param {*} poppable
* @returns * @returns
* @memberof Poppable * @memberof Poppable
*/ */
static set(context, poppable) { static set(context, poppable) {
return Poppable.registrations.set(context, poppable) return Poppable.registrations.set(context, poppable)
} }
@ -65,7 +64,7 @@ export default class Poppable {
/** All poppable must implement a close method. */ /** All poppable must implement a close method. */
close() { close() {
console.error("Must be implemented") console.error('Must be implemented')
} }
} }

375
lib/popup.js
View File

@ -1,5 +1,5 @@
import { Elements } from "./utils.js" import { Elements } from './utils.js'
import Poppable from "./poppable.js" import Poppable from './poppable.js'
/** A Popup that shows text labels, images, or html /** A Popup that shows text labels, images, or html
*/ */
@ -36,16 +36,16 @@ export default class Popup extends Poppable {
parent = null, parent = null,
content = null, content = null,
context = window, context = window,
fontSize = "1em", fontSize = '1em',
fontFamily = "Arial", fontFamily = 'Arial',
padding = 16, padding = 16,
notchSize = 10, notchSize = 10,
switchPos = false, switchPos = false,
minWidth = null, minWidth = null,
maxWidth = 800, maxWidth = 800,
backgroundColor = "#EEE", backgroundColor = '#EEE',
normalColor = "#444", normalColor = '#444',
notchPosition = "bottomCenter", notchPosition = 'bottomCenter',
zIndex = 0, zIndex = 0,
keepWithin = null, keepWithin = null,
autoClose = true, autoClose = true,
@ -60,7 +60,7 @@ export default class Popup extends Poppable {
onResize = null, onResize = null,
onMove = null, onMove = null,
noStyle = false, noStyle = false,
hideOnUp = true, hideOnUp = true
} = {}) { } = {}) {
super() super()
this.context = context this.context = context
@ -108,38 +108,38 @@ export default class Popup extends Poppable {
//console.log("Popup.setup", this.draggable) //console.log("Popup.setup", this.draggable)
this.content = content this.content = content
this.items = {} this.items = {}
this.element = document.createElement("div") this.element = document.createElement('div')
this.element.classList.add("popup") this.element.classList.add('popup')
this.setAlpha(this.element, 0) this.setAlpha(this.element, 0)
// this.element.style.opacity = 0 // this.element.style.opacity = 0
Elements.addClass(this.element, "unselectable") Elements.addClass(this.element, 'unselectable')
this.notch = document.createElement("div") this.notch = document.createElement('div')
Elements.setStyle(this.notch, this.notchStyle()) Elements.setStyle(this.notch, this.notchStyle())
this.notch.className = "notch" this.notch.className = 'notch'
this.setupDraggable() this.setupDraggable()
if (this.closeIcon) { if (this.closeIcon) {
let img = document.createElement("img") let img = document.createElement('img')
img.setAttribute("draggable", false) img.setAttribute('draggable', false)
img.src = this.closeIcon img.src = this.closeIcon
img.style.position = "absolute" img.style.position = 'absolute'
img.style.right = "0px" img.style.right = '0px'
img.style.top = "0px" img.style.top = '0px'
img.style.width = "16px" img.style.width = '16px'
img.style.height = "16px" img.style.height = '16px'
img.onclick = e => { img.onclick = e => {
this.close() this.close()
} }
this.element.appendChild(img) this.element.appendChild(img)
} }
if (this.resizeIcon) { if (this.resizeIcon) {
let img = document.createElement("img") let img = document.createElement('img')
img.style.position = "absolute" img.style.position = 'absolute'
img.style.right = "0px" img.style.right = '0px'
img.style.bottom = "0px" img.style.bottom = '0px'
img.style.width = "16px" img.style.width = '16px'
img.style.height = "16px" img.style.height = '16px'
img.src = this.resizeIcon img.src = this.resizeIcon
img.setAttribute("draggable", true) img.setAttribute('draggable', true)
img.ondragstart = e => { img.ondragstart = e => {
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
return true return true
@ -147,27 +147,27 @@ export default class Popup extends Poppable {
img.ondrag = e => { img.ondrag = e => {
e.preventDefault() e.preventDefault()
let target = this.element.querySelector("iframe") || this.element let target =
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
} }
this.currentPos = { x: e.clientX, y: e.clientY } this.currentPos = { x: e.clientX, y: e.clientY }
if (delta.x == 0 && delta.y == 0) if (delta.x == 0 && delta.y == 0) return
return
let rect = target.getBoundingClientRect() let rect = target.getBoundingClientRect()
let width = rect.width + delta.x let width = rect.width + delta.x
let height = rect.height + delta.y let height = rect.height + delta.y
target.style.width = width + "px" target.style.width = width + 'px'
target.style.height = height + "px" target.style.height = height + 'px'
switch (this.notchPosition) { switch (this.notchPosition) {
case "bottomLeft": case 'bottomLeft':
case "bottomCenter": case 'bottomCenter':
let bottom = parseFloat(this.element.style.bottom) let bottom = parseFloat(this.element.style.bottom)
this.element.style.bottom = bottom - delta.y + "px" this.element.style.bottom = bottom - delta.y + 'px'
break break
default: default:
break break
@ -177,31 +177,30 @@ export default class Popup extends Poppable {
this.onResize({ target, delta, width, height }) this.onResize({ target, delta, width, height })
} }
} }
img.ondragend = e => { } img.ondragend = e => {}
this.element.appendChild(img) this.element.appendChild(img)
} }
for (let key in content) { for (let key in content) {
switch (key) { switch (key) {
case "selector": case 'selector':
break break
case "text": case 'text':
let text = document.createElement("span") let text = document.createElement('span')
this.element.appendChild(text) this.element.appendChild(text)
text.innerHTML = content[key] text.innerHTML = content[key]
Elements.setStyle(text, { color: this.normalColor }) Elements.setStyle(text, { color: this.normalColor })
Elements.addClass(text, "unselectable") Elements.addClass(text, 'unselectable')
Elements.addClass(text, "PopupContent") Elements.addClass(text, 'PopupContent')
this.insertedNode = text this.insertedNode = text
this.loaded = true this.loaded = true
break break
case "img": case 'img':
alert("img to be implemented") alert('img to be implemented')
break break
case "iframe": case 'iframe':
let iframe = document.createElement("iframe") let iframe = document.createElement('iframe')
iframe.setAttribute("frameBorder", 0) iframe.setAttribute('frameBorder', 0)
iframe.src = content[key] iframe.src = content[key]
iframe.onload = e => { iframe.onload = e => {
let body = iframe.contentWindow.document.body let body = iframe.contentWindow.document.body
@ -216,8 +215,8 @@ export default class Popup extends Poppable {
}) })
let w = Math.max(body.scrollWidth, body.offsetWidth) let w = Math.max(body.scrollWidth, body.offsetWidth)
let h = Math.max(body.scrollHeight, body.offsetHeight) let h = Math.max(body.scrollHeight, body.offsetHeight)
iframe.style.width = w + "px" iframe.style.width = w + 'px'
iframe.style.height = h + "px" iframe.style.height = h + 'px'
this.layoutAfterInsert() this.layoutAfterInsert()
if (this.onload != null) { if (this.onload != null) {
this.onload() this.onload()
@ -225,13 +224,13 @@ export default class Popup extends Poppable {
this.loaded = true this.loaded = true
} }
this.element.appendChild(iframe) this.element.appendChild(iframe)
Elements.addClass(iframe, "PopupContent") Elements.addClass(iframe, 'PopupContent')
this.insertIntoDOM() this.insertIntoDOM()
return return
case "html": case 'html':
this.loaded = false this.loaded = false
let div = document.createElement("div") let div = document.createElement('div')
Elements.addClass(div, "PopupContent") Elements.addClass(div, 'PopupContent')
this.element.appendChild(div) this.element.appendChild(div)
div.innerHTML = content.html div.innerHTML = content.html
//console.log("insert", content) //console.log("insert", content)
@ -242,8 +241,7 @@ export default class Popup extends Poppable {
div.innerHTML = `<p style="color:red;">Popup content not found. Missing ${selector}</p>` div.innerHTML = `<p style="color:red;">Popup content not found. Missing ${selector}</p>`
this.insertedNode = div.firstElementChild this.insertedNode = div.firstElementChild
} }
} } else {
else {
this.insertedNode = div.firstElementChild || div this.insertedNode = div.firstElementChild || div
} }
this.setAlpha(this.insertedNode, 0) this.setAlpha(this.insertedNode, 0)
@ -252,9 +250,12 @@ 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 (!image.complete && !image.src.startsWith('data:')) { if (
!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 => {
count += 1 count += 1
if (count == total) { if (count == total) {
@ -271,15 +272,15 @@ export default class Popup extends Poppable {
this.loaded = true this.loaded = true
} }
break break
case "node": case 'node':
this.loaded = true this.loaded = true
Elements.addClass(content.node, "PopupContent") Elements.addClass(content.node, 'PopupContent')
this.element.appendChild(content.node) this.element.appendChild(content.node)
this.insertedNode = content.node this.insertedNode = content.node
this.setAlpha(this.insertedNode, 0) this.setAlpha(this.insertedNode, 0)
break break
default: default:
alert("Unexpected content type: " + key) alert('Unexpected content type: ' + key)
break break
} }
} }
@ -293,8 +294,7 @@ export default class Popup extends Poppable {
let closing = this.closingEvent(e) let closing = this.closingEvent(e)
if (closing) { if (closing) {
this.close() this.close()
} } else {
else {
this.setupCloseHandler() this.setupCloseHandler()
} }
} }
@ -303,18 +303,36 @@ export default class Popup extends Poppable {
let close = this.handleClose let close = this.handleClose
if (this.hideOnUp) { if (this.hideOnUp) {
if (window.PointerEvent) if (window.PointerEvent)
this.parent.addEventListener("pointerup", close.bind(this), { capture: true, once: true }) this.parent.addEventListener('pointerup', close.bind(this), {
capture: true,
once: true
})
else if (window.TouchEvent) else if (window.TouchEvent)
this.parent.addEventListener("touchend", close.bind(this), { capture: true, once: true }) this.parent.addEventListener('touchend', close.bind(this), {
capture: true,
once: true
})
else else
this.parent.addEventListener("mouseup", close.bind(this), { capture: true, once: true }) this.parent.addEventListener('mouseup', close.bind(this), {
capture: true,
once: true
})
} else { } else {
if (window.PointerEvent) if (window.PointerEvent)
this.parent.addEventListener("pointerdown", close.bind(this), { capture: true, once: true }) this.parent.addEventListener('pointerdown', close.bind(this), {
capture: true,
once: true
})
else if (window.TouchEvent) else if (window.TouchEvent)
this.parent.addEventListener("touchstart", close.bind(this), { capture: true, once: true }) this.parent.addEventListener('touchstart', close.bind(this), {
capture: true,
once: true
})
else else
this.parent.addEventListener("mousedown", close.bind(this), { capture: true, once: true }) this.parent.addEventListener('mousedown', close.bind(this), {
capture: true,
once: true
})
} }
} }
@ -326,7 +344,7 @@ export default class Popup extends Poppable {
closingEvent(e) { closingEvent(e) {
if (this.interactive) { if (this.interactive) {
let node = e.target.closest(".PopupContent") let node = e.target.closest('.PopupContent')
return node == null return node == null
} }
return true return true
@ -336,18 +354,19 @@ export default class Popup extends Poppable {
let body = iframe.contentWindow.document.body let body = iframe.contentWindow.document.body
let w = Math.max(body.scrollWidth, body.offsetWidth) let w = Math.max(body.scrollWidth, body.offsetWidth)
let h = Math.max(body.scrollHeight, body.offsetHeight) let h = Math.max(body.scrollHeight, body.offsetHeight)
iframe.style.width = w + "px" iframe.style.width = w + 'px'
iframe.style.height = h + "px" iframe.style.height = h + 'px'
} }
setupDraggable() { setupDraggable() {
if (this.draggable) { if (this.draggable) {
let target = this.element let target = this.element
target.setAttribute("draggable", true) target.setAttribute('draggable', true)
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 = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' img.src =
'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
e.dataTransfer.setDragImage(img, 0, 0) e.dataTransfer.setDragImage(img, 0, 0)
} }
target.ondrag = e => { target.ondrag = e => {
@ -378,9 +397,7 @@ export default class Popup extends Poppable {
} }
} }
moveDragged(target) { moveDragged(target) {}
}
insertIntoDOM(layout = true) { insertIntoDOM(layout = true) {
this.setAlpha(this.insertedNode, 0) this.setAlpha(this.insertedNode, 0)
@ -396,8 +413,7 @@ export default class Popup extends Poppable {
/** Layout the menu items. Needed only in the subclass. /** Layout the menu items. Needed only in the subclass.
*/ */
layout() { } layout() {}
remove() { remove() {
if (this.parent.contains(this.element)) if (this.parent.contains(this.element))
@ -412,8 +428,7 @@ export default class Popup extends Poppable {
this.unregister(this.context) this.unregister(this.context)
if (this.closeCommand) { if (this.closeCommand) {
this.closeCommand(this, () => this.remove()) this.closeCommand(this, () => this.remove())
} } else {
else {
this.remove() this.remove()
} }
} }
@ -427,10 +442,10 @@ export default class Popup extends Poppable {
* @memberof Popup * @memberof Popup
*/ */
setAlpha(targets, value) { setAlpha(targets, value) {
let objs = (targets instanceof Array) ? targets : [targets] let objs = targets instanceof Array ? targets : [targets]
for (let obj of objs) { for (let obj of objs) {
if (value) { if (value) {
obj.style.transition = "opacity 0.2s ease-in" obj.style.transition = 'opacity 0.2s ease-in'
} }
obj.style.opacity = value obj.style.opacity = value
} }
@ -459,12 +474,11 @@ export default class Popup extends Poppable {
*/ */
showAt(content, point) { showAt(content, point) {
this.setup(content) this.setup(content)
console.log("showAt", this.loaded) console.log('showAt', this.loaded)
if (this.loaded) { if (this.loaded) {
this.placeAt(point) this.placeAt(point)
this.fadeIn() this.fadeIn()
} } else {
else {
this.setAlpha([this.element, this.insertedNode], 0) this.setAlpha([this.element, this.insertedNode], 0)
this.onload = () => { this.onload = () => {
this.layoutAfterInsert() this.layoutAfterInsert()
@ -483,7 +497,7 @@ export default class Popup extends Poppable {
* @memberof Popup * @memberof Popup
*/ */
placeOrigin(x, y) { placeOrigin(x, y) {
Elements.setStyle(this.element, { left: x + "px", top: y + "px" }) Elements.setStyle(this.element, { left: x + 'px', top: y + 'px' })
} }
/** /**
@ -523,25 +537,24 @@ export default class Popup extends Poppable {
* @memberof Popup * @memberof Popup
*/ */
notchPositionWithin(x, y) { notchPositionWithin(x, y) {
let horizontal = "Center" let horizontal = 'Center'
let vertical = "center" let vertical = 'center'
let { width, height } = this.withinDimensions() let { width, height } = this.withinDimensions()
let local = this.localPointWithin(x, y, width, height) let local = this.localPointWithin(x, y, width, height)
if (local.y < height * 0.33) { if (local.y < height * 0.33) {
vertical = "top" vertical = 'top'
} }
if (local.y > height * 0.66) { if (local.y > height * 0.66) {
vertical = "bottom" vertical = 'bottom'
} }
if (local.x < width * 0.33) { if (local.x < width * 0.33) {
horizontal = "Left" horizontal = 'Left'
} }
if (local.x > width * 0.66) { if (local.x > width * 0.66) {
horizontal = "Right" horizontal = 'Right'
} }
let result = vertical + horizontal let result = vertical + horizontal
if (result == "centerCenter") if (result == 'centerCenter') return this.notchPosition
return this.notchPosition
return result return result
} }
@ -553,37 +566,39 @@ export default class Popup extends Poppable {
notchPosition = this.notchPositionWithin(x, y) notchPosition = this.notchPositionWithin(x, y)
} }
Elements.setStyle(this.notch, this.notchStyle(notchPosition)) Elements.setStyle(this.notch, this.notchStyle(notchPosition))
this.notch.className = "notch " + notchPosition this.notch.className = 'notch ' + notchPosition
let { width, height } = this.localDimensions() let { width, height } = this.localDimensions()
//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 = this.targetBoundingBox.y + this.targetBoundingBox.height let bbBottom =
this.targetBoundingBox.y + this.targetBoundingBox.height
let bbLeft = this.targetBoundingBox.x let bbLeft = this.targetBoundingBox.x
let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width let bbRight =
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
@ -595,14 +610,14 @@ export default class Popup extends Poppable {
//calculate position depending on several (optional) parameters //calculate position depending on several (optional) parameters
switch (notchPosition) { switch (notchPosition) {
case "bottomLeft": case 'bottomLeft':
x -= this.padding x -= this.padding
x -= this.notchSize x -= this.notchSize
y -= height y -= height
y -= this.notchSize * 2 y -= this.notchSize * 2
y -= this.posOffset y -= this.posOffset
break break
case "bottomRight": case 'bottomRight':
x -= width x -= width
x += this.padding x += this.padding
x += this.notchSize x += this.notchSize
@ -610,36 +625,36 @@ export default class Popup extends Poppable {
y -= this.notchSize * 2 y -= this.notchSize * 2
y -= this.posOffset y -= this.posOffset
break break
case "bottomCenter": case 'bottomCenter':
x -= width / 2 x -= width / 2
y -= height y -= height
y -= this.notchSize * 2 y -= this.notchSize * 2
y -= this.posOffset y -= this.posOffset
break break
case "topLeft": case 'topLeft':
x -= this.padding x -= this.padding
x -= this.notchSize x -= this.notchSize
y += this.notchSize * 2 y += this.notchSize * 2
y += this.posOffset y += this.posOffset
break break
case "topRight": case 'topRight':
x -= width x -= width
x += this.padding x += this.padding
x += this.notchSize x += this.notchSize
y += this.notchSize * 2 y += this.notchSize * 2
y += this.posOffset y += this.posOffset
break break
case "topCenter": case 'topCenter':
x -= width / 2 x -= width / 2
y += this.notchSize * 2 y += this.notchSize * 2
y += this.posOffset y += this.posOffset
break break
case "centerRight": case 'centerRight':
x -= width + this.notchSize * 2 x -= width + this.notchSize * 2
x -= this.posOffset x -= this.posOffset
y -= height / 2 y -= height / 2
break break
case "centerLeft": case 'centerLeft':
//console.log("height", height) //console.log("height", height)
y -= height / 2 y -= height / 2
x += this.notchSize * 2 x += this.notchSize * 2
@ -667,23 +682,23 @@ export default class Popup extends Poppable {
defaultStyle() { defaultStyle() {
let padding = this.padding let padding = this.padding
let style = { let style = {
maxWidth: this.maxWidth + "px", maxWidth: this.maxWidth + 'px',
zIndex: this.zIndex, zIndex: this.zIndex,
position: "absolute", position: 'absolute'
} }
if (this.minWidth) { if (this.minWidth) {
style.minWidth = this.minWidth + "px" style.minWidth = this.minWidth + 'px'
} }
if (!this.noStyle) { if (!this.noStyle) {
Object.assign(style, { Object.assign(style, {
borderRadius: Math.round(this.padding / 2) + "px", borderRadius: Math.round(this.padding / 2) + 'px',
backgroundColor: this.backgroundColor, backgroundColor: this.backgroundColor,
padding: this.padding + "px", padding: this.padding + 'px',
boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)", boxShadow: '0 10px 15px rgba(0, 0, 0, 0.3)',
fontFamily: this.fontFamily, fontFamily: this.fontFamily,
fontSize: this.fontSize, fontSize: this.fontSize,
stroke: "black", stroke: 'black',
fill: "white" fill: 'white'
}) })
} }
@ -700,58 +715,58 @@ export default class Popup extends Poppable {
let height = 0 let height = 0
let left = this.padding let left = this.padding
let size = this.localDimensions() let size = this.localDimensions()
if (notchPosition.endsWith("Right")) { if (notchPosition.endsWith('Right')) {
left = size.width - this.padding - this.notchSize * 2 left = size.width - this.padding - this.notchSize * 2
} }
if (notchPosition.endsWith("Center")) { if (notchPosition.endsWith('Center')) {
left = size.width / 2 - this.notchSize left = size.width / 2 - this.notchSize
} }
left = Math.round(left) + 'px' left = Math.round(left) + 'px'
let borderBottom = 0 let borderBottom = 0
let borderTop = 0 let borderTop = 0
if (notchPosition.startsWith("bottom")) { if (notchPosition.startsWith('bottom')) {
if (this.noStyle) { if (this.noStyle) {
return { return {
width, width,
height, height,
left, left,
bottom: -this.notchSize + "px", bottom: -this.notchSize + 'px',
position: "absolute", position: 'absolute',
borderStyle: "solid", borderStyle: 'solid',
borderTopWidth: this.notchSize + "px", borderTopWidth: this.notchSize + 'px',
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
} }
} else { } else {
return { return {
width, width,
height, height,
left, left,
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: this.notchSize + "px solid " + this.backgroundColor, borderTop:
borderRight: this.notchSize + "px solid transparent", this.notchSize + 'px solid ' + this.backgroundColor,
borderLeft: this.notchSize + "px solid transparent", borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent',
borderBottom: 0 borderBottom: 0
} }
} }
} }
if (notchPosition.startsWith("top")) { if (notchPosition.startsWith('top')) {
if (this.noStyle) { if (this.noStyle) {
return { return {
width, width,
height, height,
left, left,
top: -this.notchSize + "px", top: -this.notchSize + 'px',
position: "absolute", position: 'absolute',
borderStyle: "solid", borderStyle: 'solid',
borderBottomWidth: this.notchSize + "px", borderBottomWidth: this.notchSize + 'px',
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
} }
} else { } else {
@ -759,31 +774,29 @@ export default class Popup extends Poppable {
width, width,
height, height,
left, left,
top: -this.notchSize + "px", top: -this.notchSize + 'px',
position: "absolute", position: 'absolute',
borderBottom: this.notchSize + "px solid " + this.backgroundColor, borderBottom:
borderRight: this.notchSize + "px solid transparent", this.notchSize + 'px solid ' + this.backgroundColor,
borderLeft: this.notchSize + "px solid transparent", borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent',
borderTop: 0 borderTop: 0
} }
} }
} }
if (this.noStyle) { if (this.noStyle) {
if (notchPosition.endsWith('Left')) {
if (notchPosition.endsWith("Left")) { left = -this.notchSize * 2 + 'px'
left = -this.notchSize * 2 + "px"
} }
if (notchPosition.endsWith("Right")) { if (notchPosition.endsWith('Right')) {
left = size.width + "px" left = size.width + 'px'
} }
let top = size.height / 2 - this.notchSize let top = size.height / 2 - this.notchSize
top = Math.round(top) + 'px' top = Math.round(top) + 'px'
return { return {
width, width,
height, height,
@ -791,29 +804,30 @@ export default class Popup extends Poppable {
top, top,
borderRightWidth: this.notchSize, borderRightWidth: this.notchSize,
borderLeftWidth: this.notchSize, borderLeftWidth: this.notchSize,
position: "absolute", position: 'absolute',
borderTop: this.notchSize + "px solid transparent", borderTop: this.notchSize + 'px solid transparent',
borderBottom: this.notchSize + "px solid transparent" borderBottom: this.notchSize + 'px solid transparent'
} }
} else { } else {
let borderRight = this.notchSize + "px solid transparent" let borderRight = this.notchSize + 'px solid transparent'
let borderLeft = this.notchSize + "px solid transparent" let borderLeft = this.notchSize + 'px solid transparent'
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 = this.notchSize + "px solid " + this.backgroundColor borderRight =
this.element.style.boxShadow = "15px 10px 15px rgba(0, 0, 0, 0.3)" this.notchSize + 'px solid ' + this.backgroundColor
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 = "15px 5px 15px rgba(0, 0, 0, 0.3)" this.element.style.boxShadow =
'15px 5px 15px rgba(0, 0, 0, 0.3)'
} }
top = Math.round(top) + 'px' top = Math.round(top) + 'px'
return { return {
width, width,
height, height,
@ -822,9 +836,9 @@ export default class Popup extends Poppable {
borderRight, borderRight,
borderLeft, borderLeft,
// boxShadow, // boxShadow,
position: "absolute", position: 'absolute',
borderTop: this.notchSize + "px solid transparent", borderTop: this.notchSize + 'px solid transparent',
borderBottom: this.notchSize + "px solid transparent" borderBottom: this.notchSize + 'px solid transparent'
} }
} }
} }
@ -842,16 +856,16 @@ export default class Popup extends Poppable {
{ {
parent = null, parent = null,
context = window, context = window,
fontSize = "1em", fontSize = '1em',
fontFamily = "Arial", fontFamily = 'Arial',
padding = 16, padding = 16,
notchSize = 10, notchSize = 10,
switchPos = false, switchPos = false,
minWidth = null, minWidth = null,
maxWidth = 800, maxWidth = 800,
backgroundColor = "#EEE", backgroundColor = '#EEE',
zIndex = 0, zIndex = 0,
normalColor = "#444", normalColor = '#444',
closeIcon = null, closeIcon = null,
resizeIcon = null, resizeIcon = null,
closeCommand = null, closeCommand = null,
@ -866,9 +880,8 @@ export default class Popup extends Poppable {
onMove = null onMove = null
} = {} } = {}
) { ) {
let notchPosition =
switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
let notchPosition = (switchPos && point.y < 50) ? "topCenter" : "bottomCenter"
let popup = new Popup({ let popup = new Popup({
parent, parent,
context, context,

169
lib/popupmenu.js
View File

@ -6,21 +6,22 @@ import { Elements } from './utils.js'
*/ */
export default class PopupMenu extends Popup { export default class PopupMenu extends Popup {
/** /**
* The constructor. * The constructor.
* @constructor * @constructor
* @param {DOM Element} parent - The DOM parent element. * @param {DOM Element} parent - The DOM parent element.
* @param {Object} commands - A dict object with command label strings as keys * @param {Object} commands - A dict object with command label strings as keys
* and command functions as values. * and command functions as values.
* @param {string} fontSize - Describes the font size as CSS value * @param {string} fontSize - Describes the font size as CSS value
* @param {number || string} padding - Describes the padding as CSS value * @param {number || string} padding - Describes the padding as CSS value
* @param {number || string} notchSize - Describes the size of the notch (callout) as CSS value * @param {number || string} notchSize - Describes the size of the notch (callout) as CSS value
* @param {string} highlightColor - The color of highlighted menu items as CSS value * @param {string} highlightColor - The color of highlighted menu items as CSS value
* @param {string} backgroundColor - The color of the background as CSS value * @param {string} backgroundColor - The color of the background as CSS value
* @param {string} normalColor - The color of normal menu items as CSS value * @param {string} normalColor - The color of normal menu items as CSS value
* @param {DOM Element} keepWithin - The container to stay within * @param {DOM Element} keepWithin - The container to stay within
* @param {boolean} autoClose - Autoclose the menu after selecting an item * @param {boolean} autoClose - Autoclose the menu after selecting an item
*/ */
constructor({ parent = null, constructor({
parent = null,
commands = null, commands = null,
fontSize = '1em', fontSize = '1em',
fontFamily = 'Arial', fontFamily = 'Arial',
@ -35,8 +36,20 @@ export default class PopupMenu extends Popup {
highlightColor = 'black', highlightColor = 'black',
notchPosition = 'bottomLeft', notchPosition = 'bottomLeft',
keepWithin = null, keepWithin = null,
autoClose = true } = {}) { autoClose = true
super({ parent, fontSize, fontFamily, padding, notchSize, notchPosition, backgroundColor, keepWithin, normalColor, autoClose }) } = {}) {
super({
parent,
fontSize,
fontFamily,
padding,
notchSize,
notchPosition,
backgroundColor,
keepWithin,
normalColor,
autoClose
})
this.commands = commands this.commands = commands
this.zIndex = zIndex this.zIndex = zIndex
this.switchPos = switchPos this.switchPos = switchPos
@ -50,7 +63,6 @@ export default class PopupMenu extends Popup {
* @return {PopupMenu} this * @return {PopupMenu} this
*/ */
setup(commands) { setup(commands) {
this.commands = commands this.commands = commands
this.items = {} this.items = {}
this.element = document.createElement('div') this.element = document.createElement('div')
@ -63,14 +75,25 @@ export default class PopupMenu extends Popup {
this.element.appendChild(item) this.element.appendChild(item)
item.innerHTML = key item.innerHTML = key
item.style.paddingBottom = item.style.paddingTop = this.spacing item.style.paddingBottom = item.style.paddingTop = this.spacing
Elements.setStyle(item, { color: this.normalColor, cursor: 'default' }) Elements.setStyle(item, {
color: this.normalColor,
cursor: 'default'
})
Elements.addClass(item, 'unselectable') Elements.addClass(item, 'unselectable')
Elements.addClass(item, 'popupMenuItem') Elements.addClass(item, 'popupMenuItem')
this.items[key] = item this.items[key] = item
item.onclick = (event) => { this.perform(key) } item.onclick = event => {
item.ontap = (event) => { this.perform(key) } this.perform(key)
item.onmouseover = (event) => { this.over(event, key) } }
item.onmouseout = (event) => { this.out(event, key) } item.ontap = event => {
this.perform(key)
}
item.onmouseover = event => {
this.over(event, key)
}
item.onmouseout = event => {
this.out(event, key)
}
} }
this.element.appendChild(this.notch) this.element.appendChild(this.notch)
@ -100,7 +123,7 @@ export default class PopupMenu extends Popup {
*/ */
update(key, highlight = false) { update(key, highlight = false) {
let text = this.items[key] let text = this.items[key]
text.style.color = (highlight) ? this.highlightColor : this.normalColor text.style.color = highlight ? this.highlightColor : this.normalColor
} }
/** Mouse over handöer. /** Mouse over handöer.
@ -126,7 +149,7 @@ export default class PopupMenu extends Popup {
* and command functions as values. * and command functions as values.
* @param {Point} point - The position as x, y coordinates {px}. * @param {Point} point - The position as x, y coordinates {px}.
* @return {PopupMenu} this * @return {PopupMenu} this
*/ */
showAt(commands, point) { showAt(commands, point) {
this.show(commands) this.show(commands)
this.placeAt(point) this.placeAt(point)
@ -146,44 +169,71 @@ export default class PopupMenu extends Popup {
* @param {string} normalColor - The color of normal menu items as CSS value * @param {string} normalColor - The color of normal menu items as CSS value
* @param {boolean} autoClose - Autoclose the menu after selecting an item * @param {boolean} autoClose - Autoclose the menu after selecting an item
*/ */
static open(commands, point, { parent = null, static open(
context = window, commands,
fontSize = '1em', point,
fontFamily = 'Arial', {
padding = 16, parent = null,
zIndex = 1, context = window,
spacing = '0px', fontSize = '1em',
switchPos = false, fontFamily = 'Arial',
notchSize = 10, padding = 16,
maxWidth = 800, zIndex = 1,
keepWithin = null, spacing = '0px',
backgroundColor = '#EEE', switchPos = false,
normalColor = '#444', notchSize = 10,
autoClose = true } = {}) { maxWidth = 800,
keepWithin = null,
backgroundColor = '#EEE',
normalColor = '#444',
autoClose = true
} = {}
) {
let registered = Poppable.get(context) let registered = Poppable.get(context)
if (registered) { if (registered) {
this.closePopup() this.closePopup()
return return
} }
console.log("open", point) console.log('open', point)
let notchPosition = (point.y < 50 && switchPos) ? 'topCenter' : 'bottomCenter' let notchPosition =
point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
let popup = new PopupMenu({ let popup = new PopupMenu({
parent, fontSize, padding, zIndex, spacing, switchPos, notchSize, parent,
fontSize,
padding,
zIndex,
spacing,
switchPos,
notchSize,
notchPosition, notchPosition,
maxWidth, backgroundColor, normalColor, maxWidth,
notchPosition, keepWithin, autoClose backgroundColor,
normalColor,
notchPosition,
keepWithin,
autoClose
}) })
popup.showAt(commands, point) popup.showAt(commands, point)
popup.register(context) popup.register(context)
popup.closeEventListener = (e) => { popup.closeEventListener = e => {
if (this.eventOutside(e)) if (this.eventOutside(e)) this.closePopup(context)
this.closePopup(context)
} }
if (autoClose) { if (autoClose) {
context.addEventListener('mousedown', popup.closeEventListener, true) context.addEventListener(
context.addEventListener('touchstart', popup.closeEventListener, true) 'mousedown',
context.addEventListener('pointerdown', popup.closeEventListener, true) popup.closeEventListener,
true
)
context.addEventListener(
'touchstart',
popup.closeEventListener,
true
)
context.addEventListener(
'pointerdown',
popup.closeEventListener,
true
)
} }
} }
@ -194,13 +244,22 @@ export default class PopupMenu extends Popup {
/** Convenient static methods to close the PopupMenu implemented /** Convenient static methods to close the PopupMenu implemented
* as a class variable. * as a class variable.
*/ */
static closePopup(context=window) { static closePopup(context = window) {
let registered = Poppable.get(context) let registered = Poppable.get(context)
if (registered) { if (registered) {
registered.close() registered.close()
context.removeEventListener('mousedown', registered.closeEventListener) context.removeEventListener(
context.removeEventListener('touchstart', registered.closeEventListener) 'mousedown',
context.removeEventListener('pointerdown', registered.closeEventListener) registered.closeEventListener
)
context.removeEventListener(
'touchstart',
registered.closeEventListener
)
context.removeEventListener(
'pointerdown',
registered.closeEventListener
)
} }
} }
} }

169
lib/scatter.js
View File

@ -9,16 +9,11 @@ import { Capabilities } from './capabilities.js'
/** This interface allows scatters to delegate tap events to other objects. */ /** This interface allows scatters to delegate tap events to other objects. */
export class ITapDelegate extends Interface { export class ITapDelegate extends Interface {
/** This method must be defined by the delegate. It handles the tap event. */ /** This method must be defined by the delegate. It handles the tap event. */
tap(event) { tap(event) {}
}
/** Tells the delegate that it should handle standard click events. */ /** Tells the delegate that it should handle standard click events. */
handleClicks() { handleClicks() {}
}
} }
/** /**
@ -70,7 +65,7 @@ export class ScatterEvent extends BaseEvent {
toString() { toString() {
return ( return (
'Event(\'scatterTransformed\', scale: ' + "Event('scatterTransformed', scale: " +
this.scale + this.scale +
' about: ' + ' about: ' +
this.about.x + this.about.x +
@ -145,7 +140,12 @@ class Throwable {
// Avoid division by zero errors later on // Avoid division by zero errors later on
// and consider the number of involved pointers sind addVelocity will be called by the // and consider the number of involved pointers sind addVelocity will be called by the
// onMove events // onMove events
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number } let velocity = {
t: t,
dt: dt,
dx: delta.x / delta.number,
dy: delta.y / delta.number
}
this.velocities.push(velocity) this.velocities.push(velocity)
while (this.velocities.length > buffer) { while (this.velocities.length > buffer) {
this.velocities.shift() this.velocities.shift()
@ -241,8 +241,8 @@ class Throwable {
// damping, collison detection, etc. here // damping, collison detection, etc. here
let next = Points.multiplyScalar(velocity, this.throwDamping) let next = Points.multiplyScalar(velocity, this.throwDamping)
return { return {
x: (this.movableX) ? next.x : 0, x: this.movableX ? next.x : 0,
y: (this.movableY) ? next.y : 0 y: this.movableY ? next.y : 0
} }
} }
@ -283,7 +283,7 @@ export class AbstractScatter extends Throwable {
onClose = null, onClose = null,
onThrowFinished = null, onThrowFinished = null,
scaleAutoClose = false, scaleAutoClose = false,
scaleCloseThreshold = 0.10, scaleCloseThreshold = 0.1,
scaleCloseBuffer = 0.05, scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5), maxRotation = Angle.degree2radian(5),
useLowPassFilter = true useLowPassFilter = true
@ -387,7 +387,7 @@ export class AbstractScatter extends Throwable {
if (this.useLowPassFilter) { if (this.useLowPassFilter) {
rotate = this.rotateLPF.next(rotate) rotate = this.rotateLPF.next(rotate)
zoom = this.zoomLPF.next(zoom) zoom = this.zoomLPF.next(zoom)
// console.log({rotate, zoom}) // console.log({rotate, zoom})
} }
this.transform(delta, zoom, rotate, delta.about) this.transform(delta, zoom, rotate, delta.about)
if (zoom != 1) this.interactionAnchor = delta.about if (zoom != 1) this.interactionAnchor = delta.about
@ -395,8 +395,8 @@ export class AbstractScatter extends Throwable {
} }
get polygon() { get polygon() {
let w2 = this.width * this.scale / 2 let w2 = (this.width * this.scale) / 2
let h2 = this.height * this.scale / 2 let h2 = (this.height * this.scale) / 2
let center = this.center let center = this.center
let polygon = new Polygon(center) let polygon = new Polygon(center)
polygon.addPoint({ x: -w2, y: -h2 }) polygon.addPoint({ x: -w2, y: -h2 })
@ -409,11 +409,9 @@ export class AbstractScatter extends Throwable {
isOutside() { isOutside() {
let stagePolygon = this.containerPolygon let stagePolygon = this.containerPolygon
if (stagePolygon == null) if (stagePolygon == null) return false
return false
let polygon = this.polygon let polygon = this.polygon
if (polygon == null) if (polygon == null) return false
return false
let result = stagePolygon.intersectsWith(polygon) let result = stagePolygon.intersectsWith(polygon)
return result === false || result.overlap < this.throwVisibility return result === false || result.overlap < this.throwVisibility
} }
@ -498,10 +496,18 @@ export class AbstractScatter extends Throwable {
_checkAutoClose() { _checkAutoClose() {
if (this.scaleAutoClose) if (this.scaleAutoClose)
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) { if (
this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) }) this.scale <
this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this)
})
} else if (this.scale < this.minScale + this.scaleCloseThreshold) { } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
this.zoom(this.minScale + this.scaleCloseThreshold, { animate: 0.4 }) this.zoom(this.minScale + this.scaleCloseThreshold, {
animate: 0.4
})
} }
} }
@ -600,7 +606,7 @@ export class AbstractScatter extends Throwable {
fast: false, fast: false,
type: UPDATE type: UPDATE
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -609,9 +615,15 @@ 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(zoom) let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(
zoom
)
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom) let newOrigin = Points.arc(
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)
@ -631,7 +643,7 @@ export class AbstractScatter extends Throwable {
rotate: rotate, rotate: rotate,
about: anchor about: anchor
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -661,8 +673,7 @@ export class AbstractScatter extends Throwable {
zoom = scale / this.scale zoom = scale / this.scale
} }
if (this.scaleAutoClose) if (this.scaleAutoClose) this._updateTransparency()
this._updateTransparency()
return { zoom, scale } return { zoom, scale }
} }
@ -675,8 +686,10 @@ export class AbstractScatter extends Throwable {
} }
calculateScaleTransparency() { calculateScaleTransparency() {
let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold let transparency =
transparency = (transparency > 1) ? 1 : (transparency < 0) ? 0 : transparency (this.scale - this.minScale) / this.scaleCloseThreshold
transparency =
transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
return transparency return transparency
} }
@ -693,7 +706,7 @@ export class AbstractScatter extends Throwable {
animateZoomBounce(dt = 1) { animateZoomBounce(dt = 1) {
if (this.zoomAnchor != null) { if (this.zoomAnchor != null) {
let zoom = 1 let zoom = 1
let amount = Math.min(0.01, 0.3 * dt / 100000.0) let amount = Math.min(0.01, (0.3 * dt) / 100000.0)
if (this.scale < this.minScale) zoom = 1 + amount if (this.scale < this.minScale) zoom = 1 + amount
if (this.scale > this.maxScale) zoom = 1 - amount if (this.scale > this.maxScale) zoom = 1 - amount
if (zoom != 1) { if (zoom != 1) {
@ -734,8 +747,8 @@ 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)
@ -745,7 +758,6 @@ export class AbstractScatter extends Throwable {
} }
onStart(event, interaction) { onStart(event, interaction) {
if (this.startGesture(interaction)) { if (this.startGesture(interaction)) {
this.dragging = true this.dragging = true
this.interactionAnchor = null this.interactionAnchor = null
@ -759,7 +771,7 @@ export class AbstractScatter extends Throwable {
fast: false, fast: false,
type: START type: START
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -794,7 +806,7 @@ export class AbstractScatter extends Throwable {
fast: false, fast: false,
type: END type: END
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -805,7 +817,7 @@ export class AbstractScatter extends Throwable {
} }
} }
onTap(event, interaction, point) { } onTap(event, interaction, point) {}
onDragUpdate(delta) { onDragUpdate(delta) {
if (this.onTransform != null) { if (this.onTransform != null) {
@ -816,7 +828,7 @@ export class AbstractScatter extends Throwable {
about: this.currentAbout, about: this.currentAbout,
type: null type: null
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -830,7 +842,7 @@ export class AbstractScatter extends Throwable {
fast: false, fast: false,
type: null type: null
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -844,7 +856,7 @@ export class AbstractScatter extends Throwable {
fast: true, fast: true,
type: null type: null
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -857,16 +869,14 @@ export class AbstractScatter extends Throwable {
fast: false, fast: false,
type: null type: null
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
} }
onZoomed(about) { onZoomed(about) {
if (this.scaleAutoClose) this._updateTransparency()
if (this.scaleAutoClose)
this._updateTransparency()
if (this.onTransform != null) { if (this.onTransform != null) {
let event = new ScatterEvent(this, { let event = new ScatterEvent(this, {
@ -875,7 +885,7 @@ export class AbstractScatter extends Throwable {
fast: false, fast: false,
type: null type: null
}) })
this.onTransform.forEach(function (f) { this.onTransform.forEach(function(f) {
f(event) f(event)
}) })
} }
@ -901,7 +911,13 @@ 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
@ -1015,7 +1031,10 @@ 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 (target.interactive && this.isDescendant(target.element, found)) { if (
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
@ -1049,8 +1068,6 @@ export class DOMScatterContainer {
} }
} }
export class DOMScatter extends AbstractScatter { export class DOMScatter extends AbstractScatter {
constructor( constructor(
element, element,
@ -1074,7 +1091,7 @@ export class DOMScatter extends AbstractScatter {
x = 0, x = 0,
y = 0, y = 0,
width = null, // required width = null, // required
height = null, // required height = null, // required
resizable = false, resizable = false,
tapDelegate = null, tapDelegate = null,
triggerSVGClicks = false, triggerSVGClicks = false,
@ -1087,7 +1104,7 @@ export class DOMScatter extends AbstractScatter {
autoThrow = true, autoThrow = true,
scaleAutoClose = false, scaleAutoClose = false,
onClose = null, onClose = null,
scaleCloseThreshold = 0.10, scaleCloseThreshold = 0.1,
scaleCloseBuffer = 0.05, scaleCloseBuffer = 0.05,
useLowPassFilter = true, useLowPassFilter = true,
maxRotation = Angle.degree2radian(15) maxRotation = Angle.degree2radian(15)
@ -1166,15 +1183,15 @@ export class DOMScatter extends AbstractScatter {
button.className = 'interactiveElement' button.className = 'interactiveElement'
this.element.appendChild(button) this.element.appendChild(button)
button.addEventListener('pointerdown', (e) => { button.addEventListener('pointerdown', e => {
this.startResize(e) this.startResize(e)
}) })
button.addEventListener('pointermove', (e) => { button.addEventListener('pointermove', e => {
this.resize(e) this.resize(e)
}) })
button.addEventListener('pointerup', (e) => { button.addEventListener('pointerup', e => {
this.stopResize(e) this.stopResize(e)
}) })
this.resizeButton = button this.resizeButton = button
@ -1344,7 +1361,7 @@ export class DOMScatter extends AbstractScatter {
onTap(event, interaction, point) { onTap(event, interaction, point) {
if (this.tapDelegate) { if (this.tapDelegate) {
Events.stop(event) Events.stop(event)
this.tapDelegate.tap(event, "scatter") this.tapDelegate.tap(event, 'scatter')
} }
} }
@ -1396,12 +1413,18 @@ export class DOMScatter extends AbstractScatter {
e.preventDefault() e.preventDefault()
let event = new CustomEvent('resizeStarted') let event = new CustomEvent('resizeStarted')
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top } let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
this.bringToFront() this.bringToFront()
this.element.style.transformOrigin = '0% 0%' this.element.style.transformOrigin = '0% 0%'
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top } let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition) let offset = Points.subtract(oldPostition, newPostition)
@ -1424,23 +1447,31 @@ export class DOMScatter extends AbstractScatter {
rotation = (rotation + 360) % 360 rotation = (rotation + 360) % 360
let event = new CustomEvent('resized') let event = new CustomEvent('resized')
if (e.target.getAttribute('resizing') == 'true') { if (e.target.getAttribute('resizing') == 'true') {
let deltaX = e.clientX - this.oldX
let deltaX = (e.clientX - this.oldX) let deltaY = e.clientY - this.oldY
let deltaY = (e.clientY - this.oldY)
let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2))
let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY)) let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY))
phi = ((phi) + 630) % 360 phi = (phi + 630) % 360
let rot = ((rotation + 90) + 630) % 360 let rot = (rotation + 90 + 630) % 360
let diffAngle = ((0 + rot) + 360) % 360 let diffAngle = (0 + rot + 360) % 360
let phiCorrected = (phi + diffAngle + 360) % 360 let phiCorrected = (phi + diffAngle + 360) % 360
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected)) let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected))
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected)) let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale }) if (
(this.element.offsetWidth + resizeW) / this.scale >
(this.width * 0.5) / this.scale &&
(this.element.offsetHeight + resizeH) / this.scale >
(this.height * 0.3) / this.scale
)
TweenLite.to(this.element, 0, {
width: this.element.offsetWidth + resizeW / this.scale,
height: this.element.offsetHeight + resizeH / this.scale
})
this.oldX = e.clientX this.oldX = e.clientX
this.oldY = e.clientY this.oldY = e.clientY
@ -1454,9 +1485,15 @@ export class DOMScatter extends AbstractScatter {
e.preventDefault() e.preventDefault()
let event = new CustomEvent('resizeEnded') let event = new CustomEvent('resizeEnded')
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top } let oldPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
this.element.style.transformOrigin = '50% 50%' this.element.style.transformOrigin = '50% 50%'
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top } let newPostition = {
x: this.element.getBoundingClientRect().left,
y: this.element.getBoundingClientRect().top
}
let offset = Points.subtract(oldPostition, newPostition) let offset = Points.subtract(oldPostition, newPostition)
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } }) TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } })

701
lib/uitest.js
View File

@ -24,7 +24,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest}
*/ */
export default class UITest { export default class UITest {
/** /**
* Creates an instance of an UITest. * Creates an instance of an UITest.
* *
@ -38,19 +37,28 @@ export default class UITest {
* @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action. * @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action.
*/ */
constructor(opts = {}) { constructor(opts = {}) {
this.opts = Object.assign(
this.opts = Object.assign({}, { {},
timeScale: 1, {
eventType: 'auto', timeScale: 1,
debug: false, eventType: 'auto',
defaultInterval: null debug: false,
}, opts) defaultInterval: null
},
opts
)
// timeline // timeline
//-------------------- //--------------------
this._timeline = new TimelineMax(Object.assign({}, { this._timeline = new TimelineMax(
paused: true Object.assign(
}, this.opts)) {},
{
paused: true
},
this.opts
)
)
this._timeline.timeScale(this.opts.timeScale) this._timeline.timeScale(this.opts.timeScale)
// eventType // eventType
@ -152,91 +160,118 @@ export default class UITest {
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
*/ */
tap(element, position, timelinePosition, opts = {}) { tap(element, position, timelinePosition, opts = {}) {
// arguments // arguments
//-------------------- //--------------------
[position, timelinePosition, opts] = this.reorderArguments(arguments) ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
this._timelinePositions.push(timelinePosition) this._timelinePositions.push(timelinePosition)
// debug // debug
//-------------------- //--------------------
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts}) if (this.opts.debug)
console.log('tap params', {
element,
position,
timelinePosition,
opts
})
// opts // opts
//-------------------- //--------------------
opts = Object.assign({}, { opts = Object.assign(
onStart: null, {},
onComplete: null, {
eventTypes: this.resolveEvents(['down', 'up']), onStart: null,
eventType: null, onComplete: null,
context: window, eventTypes: this.resolveEvents(['down', 'up']),
bubbles: true, eventType: null,
cancelable: true context: window,
}, opts) bubbles: true,
cancelable: true
},
opts
)
if (opts.eventType) { if (opts.eventType) {
opts.eventTypes = opts.eventType opts.eventTypes = opts.eventType
} }
opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes] opts.eventTypes = Array.isArray(opts.eventTypes)
? opts.eventTypes
: [opts.eventTypes]
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback(position => { this._timeline.addCallback(
position => {
// element
//--------------------
const elem = Util.extractElement(opts.context, element)
// element // position
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) if (position === null) {
const rect = elem.getBoundingClientRect()
position = [rect.width / 2, rect.height / 2]
}
// position // coords
//-------------------- //--------------------
if (position === null) { const coords = Util.extractPosition(position)
const rect = elem.getBoundingClientRect() if (this.opts.debug) console.log('local coords', coords)
position = [rect.width / 2, rect.height / 2]
}
// coords // eventTypes
//-------------------- //--------------------
const coords = Util.extractPosition(position) if (opts.eventTypes.length === 1) {
if (this.opts.debug) console.log('local coords', coords) opts.eventTypes.unshift(null)
}
// eventTypes // event opts
//-------------------- //--------------------
if (opts.eventTypes.length === 1) { const eventOpts = {
opts.eventTypes.unshift(null) bubbles: opts.bubbles,
} cancelable: opts.cancelable
}
// event opts if (opts.eventTypes[0]) {
//-------------------- // create and dispatch event
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable} //--------------------
const eventStart = Event.create(
elem,
coords,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', eventStart)
elem.dispatchEvent(eventStart)
if (opts.eventTypes[0]) { // onStart
//--------------------
if (opts.onStart) {
opts.onStart.call(this, eventStart)
}
}
// create and dispatch event // create and dispatch event
//-------------------- //--------------------
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts) const eventComplete = Event.create(
if (this.opts.debug) console.log('dispatch event', eventStart) elem,
elem.dispatchEvent(eventStart) coords,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', eventComplete)
elem.dispatchEvent(eventComplete)
// onStart // onComplete
//-------------------- //--------------------
if (opts.onStart) { if (opts.onComplete) {
opts.onStart.call(this, eventStart) opts.onComplete.call(this, eventComplete)
} }
} },
timelinePosition,
// create and dispatch event [position]
//-------------------- )
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', eventComplete)
elem.dispatchEvent(eventComplete)
// onComplete
//--------------------
if (opts.onComplete) {
opts.onComplete.call(this, eventComplete)
}
}, timelinePosition, [position])
this._actions++ this._actions++
@ -262,103 +297,132 @@ export default class UITest {
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
*/ */
pan(element, position, timelinePosition, opts = {}) { pan(element, position, timelinePosition, opts = {}) {
// arguments // arguments
//-------------------- //--------------------
[position, timelinePosition, opts] = this.reorderArguments(arguments) ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
this._timelinePositions.push(timelinePosition) this._timelinePositions.push(timelinePosition)
// debug // debug
//-------------------- //--------------------
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts}) if (this.opts.debug)
console.log('tap params', {
element,
position,
timelinePosition,
opts
})
// opts // opts
//-------------------- //--------------------
opts = Object.assign({}, { opts = Object.assign(
onStart: null, {},
onUpdate: null, {
onComplete: null, onStart: null,
to: {x: 0, y: 0}, onUpdate: null,
duration: 1, onComplete: null,
ease: Power0.easeNone, to: { x: 0, y: 0 },
eventTypes: this.resolveEvents(['down', 'move', 'up']), duration: 1,
context: window, ease: Power0.easeNone,
bubbles: true, eventTypes: this.resolveEvents(['down', 'move', 'up']),
cancelable: true context: window,
}, opts) bubbles: true,
cancelable: true
},
opts
)
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback(position => { this._timeline.addCallback(
position => {
// element
//--------------------
const elem = Util.extractElement(opts.context, element)
// element // coords
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const from = Util.extractPosition(position)
// coords // event opts
//-------------------- //--------------------
const from = Util.extractPosition(position) const eventOpts = {
bubbles: opts.bubbles,
cancelable: opts.cancelable
}
// event opts const gsOpts = {
//-------------------- ease: opts.ease,
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable} onStart: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
const gsOpts = { // onStart
ease: opts.ease, //--------------------
onStart: () => { if (opts.onStart) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// create and dispatch event // onUpdate
//-------------------- //--------------------
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts) if (opts.onUpdate) {
if (this.opts.debug) console.log('dispatch event', event) opts.onUpdate.call(this, event)
elem.dispatchEvent(event) }
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart // onComplete
//-------------------- //--------------------
if (opts.onStart) { if (opts.onComplete) {
opts.onStart.call(this, event) opts.onComplete.call(this, event)
} }
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (opts.onUpdate) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (opts.onComplete) {
opts.onComplete.call(this, event)
} }
} }
}
// to // to
//-------------------- //--------------------
const object = Util.extractTo(opts) const object = Util.extractTo(opts)
Object.assign(gsOpts, object) Object.assign(gsOpts, object)
// drag animation // drag animation
//-------------------- //--------------------
TweenLite.to(from, opts.duration, gsOpts) TweenLite.to(from, opts.duration, gsOpts)
},
}, timelinePosition, [position]) timelinePosition,
[position]
)
this._actions++ this._actions++
@ -387,144 +451,183 @@ export default class UITest {
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring. * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
*/ */
pinch(element, position, timelinePosition, opts = {}) { pinch(element, position, timelinePosition, opts = {}) {
// arguments // arguments
//-------------------- //--------------------
[position, timelinePosition, opts] = this.reorderArguments(arguments) ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
this._timelinePositions.push(timelinePosition) this._timelinePositions.push(timelinePosition)
// debug // debug
//-------------------- //--------------------
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts}) if (this.opts.debug)
console.log('tap params', {
element,
position,
timelinePosition,
opts
})
// opts // opts
//-------------------- //--------------------
opts = Object.assign({}, { opts = Object.assign(
onStart: null, {},
onUpdate: null, {
onComplete: null, onStart: null,
doubleCallbacks: false, onUpdate: null,
duration: 1, onComplete: null,
distance: 100, doubleCallbacks: false,
to: null, duration: 1,
bezier: null, distance: 100,
ease: Power0.easeNone, to: null,
eventTypes: this.resolveEvents(['down', 'move', 'up']), bezier: null,
context: window, ease: Power0.easeNone,
bubbles: true, eventTypes: this.resolveEvents(['down', 'move', 'up']),
cancelable: true context: window,
}, opts) bubbles: true,
cancelable: true
},
opts
)
// timeline // timeline
//-------------------- //--------------------
this._timeline.addCallback(position => { this._timeline.addCallback(
position => {
// element // element
//-------------------- //--------------------
const elem = Util.extractElement(opts.context, element) const elem = Util.extractElement(opts.context, element)
// from
//--------------------
let from1 = null
let from2 = null
if (Array.isArray(position) && !Util.isNumber(position[0])) {
from1 = Util.extractPosition(position[0])
from2 = Util.extractPosition(position[1])
} else {
from1 = Util.extractPosition(position)
from2 = {x: from1.x, y: from1.y}
}
// to
//--------------------
let gsOpts1 = {}
let gsOpts2 = {}
if (opts.to || opts.bezier) {
[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
} else {
const distance = opts.distance != null ? opts.distance : 100
gsOpts1.x = from1.x - distance / 2
gsOpts1.y = from1.y
gsOpts2.x = from2.x + distance / 2
gsOpts2.y = from2.y
}
// pointers
//--------------------
const pointers = new Map()
pointers.set(0, {element: from1, gsOpts: gsOpts1})
pointers.set(1, {element: from2, gsOpts: gsOpts2})
// loop
//--------------------
pointers.forEach((value, key) => {
// from // from
//-------------------- //--------------------
const from = value.element let from1 = null
let from2 = null
// event opts if (Array.isArray(position) && !Util.isNumber(position[0])) {
//-------------------- from1 = Util.extractPosition(position[0])
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable, pointerId: key, isPrimary: key === 0} from2 = Util.extractPosition(position[1])
} else {
const gsOpts = { from1 = Util.extractPosition(position)
ease: opts.ease, from2 = { x: from1.x, y: from1.y }
onStart: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart
//--------------------
if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
opts.onComplete.call(this, event)
}
}
} }
// to // to
//-------------------- //--------------------
Object.assign(gsOpts, value.gsOpts) let gsOpts1 = {}
let gsOpts2 = {}
// drag animation if (opts.to || opts.bezier) {
;[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
} else {
const distance = opts.distance != null ? opts.distance : 100
gsOpts1.x = from1.x - distance / 2
gsOpts1.y = from1.y
gsOpts2.x = from2.x + distance / 2
gsOpts2.y = from2.y
}
// pointers
//-------------------- //--------------------
TweenLite.to(from, opts.duration, gsOpts) const pointers = new Map()
}) pointers.set(0, { element: from1, gsOpts: gsOpts1 })
pointers.set(1, { element: from2, gsOpts: gsOpts2 })
}, timelinePosition, [position]) // loop
//--------------------
pointers.forEach((value, key) => {
// from
//--------------------
const from = value.element
// event opts
//--------------------
const eventOpts = {
bubbles: opts.bubbles,
cancelable: opts.cancelable,
pointerId: key,
isPrimary: key === 0
}
const gsOpts = {
ease: opts.ease,
onStart: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[0],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onStart
//--------------------
if (
opts.onStart &&
(opts.doubleCallbacks || key === 0)
) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (
opts.onUpdate &&
(opts.doubleCallbacks || key === 0)
) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (
opts.onComplete &&
(opts.doubleCallbacks || key === 0)
) {
opts.onComplete.call(this, event)
}
}
}
// to
//--------------------
Object.assign(gsOpts, value.gsOpts)
// drag animation
//--------------------
TweenLite.to(from, opts.duration, gsOpts)
})
},
timelinePosition,
[position]
)
this._actions++ this._actions++
@ -575,7 +678,6 @@ export default class UITest {
* @returns {array} - Returns an array of the position, the timelinePosition and the opts object. * @returns {array} - Returns an array of the position, the timelinePosition and the opts object.
*/ */
reorderArguments(params) { reorderArguments(params) {
// first parameter // first parameter
//-------------------- //--------------------
const element = params[0] const element = params[0]
@ -590,7 +692,11 @@ export default class UITest {
//-------------------- //--------------------
if (Util.isNumber(params[1])) { if (Util.isNumber(params[1])) {
timelinePosition = params[1] timelinePosition = params[1]
} else if (Util.isObject(params[1]) && !Util.isPixiDisplayObject(params[1]) && (params[1].x == null || params[1].y == null)) { } else if (
Util.isObject(params[1]) &&
!Util.isPixiDisplayObject(params[1]) &&
(params[1].x == null || params[1].y == null)
) {
opts = params[1] opts = params[1]
} else if (params[1] != null) { } else if (params[1] != null) {
position = params[1] position = params[1]
@ -618,9 +724,13 @@ export default class UITest {
if (timelinePosition === null) { if (timelinePosition === null) {
if (this.opts.defaultInterval === null && this._actions > 1) { if (this.opts.defaultInterval === null && this._actions > 1) {
throw new Error('No execution time was specified for this action, and a default interval was not set in the class constructor!') throw new Error(
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
)
} }
timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1) timelinePosition =
Math.max(...this._timelinePositions) +
(this.opts.defaultInterval || 1)
} }
if (opts === null) { if (opts === null) {
@ -637,7 +747,6 @@ export default class UITest {
* @param {string[]} events - An array of event types. * @param {string[]} events - An array of event types.
*/ */
resolveEvents(events) { resolveEvents(events) {
const data = [] const data = []
if (this.opts.eventType === 'pointer') { if (this.opts.eventType === 'pointer') {
@ -688,7 +797,6 @@ export default class UITest {
* @class * @class
*/ */
class Util { class Util {
/** /**
* Resolves the element from a specific context. * Resolves the element from a specific context.
* *
@ -697,9 +805,12 @@ 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
} }
@ -712,10 +823,9 @@ class Util {
* @return {object} - Returns an object with the keys x and y. * @return {object} - Returns an object with the keys x and y.
*/ */
static extractPosition(object) { static extractPosition(object) {
// event coords // event coords
//-------------------- //--------------------
const position = {x: 0, y: 0} const position = { x: 0, y: 0 }
// get the position // get the position
//-------------------- //--------------------
@ -745,11 +855,9 @@ class Util {
* @return {object} - Returns an object with the to or bezier keys. * @return {object} - Returns an object with the to or bezier keys.
*/ */
static extractTo(opts) { static extractTo(opts) {
const object = {} const object = {}
if (opts.bezier) { if (opts.bezier) {
let bezier = null let bezier = null
if (Array.isArray(opts.bezier)) { if (Array.isArray(opts.bezier)) {
@ -758,7 +866,9 @@ class Util {
type: 'thru' type: 'thru'
} }
} else { } else {
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it)) opts.bezier.values = opts.bezier.values.map(it =>
Util.extractPosition(it)
)
bezier = opts.bezier bezier = opts.bezier
} }
@ -780,13 +890,10 @@ class Util {
* @return {object[]} - Returns an array of objects with the keys x and y. * @return {object[]} - Returns an array of objects with the keys x and y.
*/ */
static extractMultiTo(opts) { static extractMultiTo(opts) {
const objects = [] const objects = []
if (opts.bezier) { if (opts.bezier) {
opts.bezier.forEach(it => { opts.bezier.forEach(it => {
let bezier = null let bezier = null
if (Array.isArray(it)) { if (Array.isArray(it)) {
@ -803,9 +910,7 @@ class Util {
bezier bezier
}) })
}) })
} else { } else {
opts.to.forEach(it => { opts.to.forEach(it => {
const to = Util.extractPosition(it) const to = Util.extractPosition(it)
objects.push({ objects.push({
@ -859,7 +964,11 @@ class Util {
* @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false. * @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false.
*/ */
static isPixiDisplayObject(object) { static isPixiDisplayObject(object) {
return typeof object.getBounds === 'function' && typeof object.renderWebGL === 'function' && typeof object.setTransform === 'function' return (
typeof object.getBounds === 'function' &&
typeof object.renderWebGL === 'function' &&
typeof object.setTransform === 'function'
)
} }
/** /**
@ -886,7 +995,6 @@ class Util {
* @class * @class
*/ */
class Event { class Event {
/** /**
* Creates an event object. * Creates an event object.
* *
@ -896,9 +1004,16 @@ 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(target, position = {x: 0, y: 0}, type = 'pointerup', opts = {}) { static create(
target,
const rect = typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : {x: 0, y: 0} position = { x: 0, y: 0 },
type = 'pointerup',
opts = {}
) {
const rect =
typeof target.getBoundingClientRect === 'function'
? target.getBoundingClientRect()
: { x: 0, y: 0 }
// EventInit // EventInit
const eventOpts = { const eventOpts = {
@ -955,11 +1070,27 @@ class Event {
} }
if (type.startsWith('pointer')) { if (type.startsWith('pointer')) {
return new PointerEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)) return new PointerEvent(
type,
Object.assign(
{},
eventOpts,
uiEventOpts,
mouseEventOpts,
pointerEventOpts,
opts
)
)
} else if (type.startsWith('touch')) { } else if (type.startsWith('touch')) {
return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)) return new TouchEvent(
type,
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
)
} else { } else {
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)) return new MouseEvent(
type,
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
)
} }
} }
} }

86
lib/utils.js
View File

@ -61,31 +61,31 @@ export function sample(population, k) {
*/ */
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
if (k > 5) if (k > 5) setsize += Math.pow(4, Math.ceil(Math.log(k * 3, 4)))
setsize += Math.pow(4, Math.ceil(Math.log(k * 3, 4)))
if (n <= setsize) { if (n <= setsize) {
// An n-length list is smaller than a k-length set // An n-length list is smaller than a k-length set
let pool = population.slice() let pool = population.slice()
for (let i = 0; i < k; i++) { // inletiant: non-selected at [0,n-i) for (let i = 0; i < k; i++) {
let j = Math.random() * (n - i) | 0 // inletiant: non-selected at [0,n-i)
let j = (Math.random() * (n - i)) | 0
result[i] = pool[j] result[i] = pool[j]
pool[j] = pool[n - i - 1] // move non-selected item into vacancy pool[j] = pool[n - i - 1] // move non-selected item into vacancy
} }
} else { } else {
let selected = new Set() let selected = new Set()
for (let i = 0; i < k; i++) { for (let i = 0; i < k; i++) {
let j = Math.random() * (n - i) | 0 let j = (Math.random() * (n - i)) | 0
while (selected.has(j)) { while (selected.has(j)) {
j = Math.random() * (n - i) | 0 j = (Math.random() * (n - i)) | 0
} }
selected.add(j) selected.add(j)
result[i] = population[j] result[i] = population[j]
@ -95,7 +95,6 @@ export function sample(population, k) {
return result return result
} }
// Returns a function, that, as long as it continues to be invoked, will not // Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for // be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the // N milliseconds. If `immediate` is passed, trigger the function on the
@ -103,10 +102,10 @@ export function sample(population, k) {
// Taken from: https://davidwalsh.name/essential-javascript-functions // Taken from: https://davidwalsh.name/essential-javascript-functions
export function debounce(func, wait, immediate) { export function debounce(func, wait, immediate) {
let timeout let timeout
return function () { return function() {
let context = this, let context = this,
args = arguments args = arguments
let later = function () { let later = function() {
timeout = null timeout = null
if (!immediate) func.apply(context, args) if (!immediate) func.apply(context, args)
} }
@ -135,7 +134,6 @@ export function randomFloat(min = 0.0, max = 1.0) {
} }
export class Dates { export class Dates {
static create(fullYear, month, day) { static create(fullYear, month, day) {
return new Date(Date.UTC(fullYear, month, day)) return new Date(Date.UTC(fullYear, month, day))
} }
@ -145,7 +143,9 @@ export class Dates {
} }
static startYearRange(date) { static startYearRange(date) {
return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)) return new Date(
Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
)
} }
static endYearRange(date) { static endYearRange(date) {
@ -433,7 +433,6 @@ export class Points {
* @class Sets * @class Sets
*/ */
export class Sets { export class Sets {
/** /**
* Returns the intersection of all sets * Returns the intersection of all sets
* https://stackoverflow.com/questions/31930894/javascript-set-data-structure-intersect * https://stackoverflow.com/questions/31930894/javascript-set-data-structure-intersect
@ -444,12 +443,10 @@ export class Sets {
*/ */
static intersect(...sets) { static intersect(...sets) {
if (!sets.length) return new Set() if (!sets.length) return new Set()
const i = sets.reduce((m, s, i) => s.size < sets[m].size ? i : m, 0) const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
const [smallest] = sets.splice(i, 1) const [smallest] = sets.splice(i, 1)
const res = new Set() const res = new Set()
for (let val of smallest) for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val)
if (sets.every(s => s.has(val)))
res.add(val)
return res return res
} }
@ -497,7 +494,6 @@ export class Sets {
/** Static methods to compute angles. /** Static methods to compute angles.
*/ */
export class Angle { export class Angle {
static normalize(angle) { static normalize(angle) {
let TAU = Math.PI * 2.0 let TAU = Math.PI * 2.0
while (angle > Math.PI) { while (angle > Math.PI) {
@ -544,11 +540,11 @@ export class Angle {
} }
static degree2radian(degree) { static degree2radian(degree) {
return Math.PI * degree / 180.0 return (Math.PI * degree) / 180.0
} }
static radian2degree(rad) { static radian2degree(rad) {
return 180.0 / Math.PI * rad return (180.0 / Math.PI) * rad
} }
} }
@ -742,10 +738,9 @@ export class Polygon {
if ( if (
verty[i] > testy != verty[j] > testy && verty[i] > testy != verty[j] > testy &&
testx < testx <
(vertx[j] - vertx[i]) * ((vertx[j] - vertx[i]) * (testy - verty[i])) /
(testy - verty[i]) / (verty[j] - verty[i]) +
(verty[j] - verty[i]) + vertx[i]
vertx[i]
) )
c = !c c = !c
} }
@ -909,13 +904,10 @@ export class Polygon {
} }
} }
/** /**
* Util functions to deal with DOMRects. * Util functions to deal with DOMRects.
*/ */
export class Rect { export class Rect {
/** /**
* Test if a given point is contained by the provided Rect. * Test if a given point is contained by the provided Rect.
* *
@ -926,12 +918,14 @@ export class Rect {
* @memberof Rect * @memberof Rect
*/ */
static contains(rect, point) { static contains(rect, point) {
return (point.x > rect.left && return (
point.x < rect.x + rect.right point.x > rect.left &&
&& point.y > rect.top && point.y < rect.bottom) point.x < rect.x + rect.right &&
point.y > rect.top &&
point.y < rect.bottom
)
} }
/** /**
*Returns the position of an rect as point object. *Returns the position of an rect as point object.
* *
@ -948,7 +942,6 @@ export class Rect {
/** String utility functions */ /** String utility functions */
export class Strings { export class Strings {
static toUpperCaseFirstChar(str) { static toUpperCaseFirstChar(str) {
return str.substr(0, 1).toUpperCase() + str.substr(1) return str.substr(0, 1).toUpperCase() + str.substr(1)
} }
@ -958,19 +951,22 @@ export class Strings {
} }
static toUpperCaseEachWord(str, delim = ' ') { static toUpperCaseEachWord(str, delim = ' ') {
return str.split(delim).map((v) => v.toUpperCaseFirstChar()).join(delim) return str
.split(delim)
.map(v => v.toUpperCaseFirstChar())
.join(delim)
} }
static toLowerCaseEachWord(str, delim = ' ') { static toLowerCaseEachWord(str, delim = ' ') {
return str.split(delim).map((v) => v.toLowerCaseFirstChar()).join(delim) return str
.split(delim)
.map(v => v.toLowerCaseFirstChar())
.join(delim)
} }
} }
export class LowPassFilter { export class LowPassFilter {
constructor(smoothing = 0.5, bufferMaxSize = 10) {
constructor(smoothing = 0.5, bufferMaxSize=10) {
this.smoothing = smoothing // must be smaller than 1 this.smoothing = smoothing // must be smaller than 1
this.buffer = [] // FIFO queue this.buffer = [] // FIFO queue
this.bufferMaxSize = bufferMaxSize this.bufferMaxSize = bufferMaxSize
@ -1007,9 +1003,8 @@ export class LowPassFilter {
* @access private * @access private
*/ */
__push(value) { __push(value) {
let removed = (this.buffer.length === this.bufferMaxSize) let removed =
? this.buffer.shift() this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0
: 0
this.buffer.push(value) this.buffer.push(value)
return removed return removed
@ -1023,7 +1018,6 @@ export class LowPassFilter {
* @access public * @access public
*/ */
next(nextValue) { next(nextValue) {
// push new value to the end, and remove oldest one // push new value to the end, and remove oldest one
let removed = this.__push(nextValue) let removed = this.__push(nextValue)
// smooth value using all values from buffer // smooth value using all values from buffer
@ -1052,5 +1046,3 @@ export class LowPassFilter {
return values return values
} }
} }

105
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "iwmlib", "name": "iwmlib",
"version": "1.0.15", "version": "1.0.16",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -465,6 +465,7 @@
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
"integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
"dev": true,
"requires": { "requires": {
"es6-promisify": "^5.0.0" "es6-promisify": "^5.0.0"
} }
@ -758,7 +759,8 @@
"async-limiter": { "async-limiter": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==" "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
"dev": true
}, },
"async-settle": { "async-settle": {
"version": "1.0.0", "version": "1.0.0",
@ -842,7 +844,8 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true
}, },
"base": { "base": {
"version": "0.11.2", "version": "0.11.2",
@ -938,6 +941,7 @@
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -1391,7 +1395,8 @@
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
}, },
"concat-stream": { "concat-stream": {
"version": "1.6.2", "version": "1.6.2",
@ -1563,6 +1568,7 @@
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"requires": { "requires": {
"ms": "2.0.0" "ms": "2.0.0"
} }
@ -1910,12 +1916,14 @@
"es6-promise": { "es6-promise": {
"version": "4.2.8", "version": "4.2.8",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
"dev": true
}, },
"es6-promisify": { "es6-promisify": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
"integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
"dev": true,
"requires": { "requires": {
"es6-promise": "^4.0.3" "es6-promise": "^4.0.3"
} }
@ -2348,6 +2356,7 @@
"version": "1.6.7", "version": "1.6.7",
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
"integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=", "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
"dev": true,
"requires": { "requires": {
"concat-stream": "1.6.2", "concat-stream": "1.6.2",
"debug": "2.6.9", "debug": "2.6.9",
@ -2433,6 +2442,7 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
"integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
"dev": true,
"requires": { "requires": {
"pend": "~1.2.0" "pend": "~1.2.0"
} }
@ -2601,6 +2611,7 @@
"version": "8.1.0", "version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"dev": true,
"requires": { "requires": {
"graceful-fs": "^4.2.0", "graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0", "jsonfile": "^4.0.0",
@ -2610,7 +2621,8 @@
"graceful-fs": { "graceful-fs": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.0.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.0.tgz",
"integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==" "integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==",
"dev": true
} }
} }
}, },
@ -2627,7 +2639,8 @@
"fs.realpath": { "fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
}, },
"fsevents": { "fsevents": {
"version": "1.2.9", "version": "1.2.9",
@ -3219,6 +3232,7 @@
"version": "7.1.4", "version": "7.1.4",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
"integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==", "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
"dev": true,
"requires": { "requires": {
"fs.realpath": "^1.0.0", "fs.realpath": "^1.0.0",
"inflight": "^1.0.4", "inflight": "^1.0.4",
@ -3681,6 +3695,29 @@
"vinyl": "^2.0.0" "vinyl": "^2.0.0"
} }
}, },
"gulp-prettier": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/gulp-prettier/-/gulp-prettier-2.1.0.tgz",
"integrity": "sha512-6PvGPX+x0d1+PbP7tHF42o6zWzxCXqouTnpwZV1GjF47/wAgWBfPU1E6/6d4uAGM+NhmwWdKvIVumL3wMZZxDg==",
"dev": true,
"requires": {
"plugin-error": "^1.0.1",
"prettier": "^1.5.3",
"safe-buffer": "^5.1.2",
"through2": "^3.0.0"
},
"dependencies": {
"through2": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
"integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
"dev": true,
"requires": {
"readable-stream": "2 || 3"
}
}
}
},
"gulp-rename": { "gulp-rename": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz", "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
@ -3911,6 +3948,7 @@
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
"integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==", "integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
"dev": true,
"requires": { "requires": {
"agent-base": "^4.3.0", "agent-base": "^4.3.0",
"debug": "^3.1.0" "debug": "^3.1.0"
@ -3920,6 +3958,7 @@
"version": "3.2.6", "version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": { "requires": {
"ms": "^2.1.1" "ms": "^2.1.1"
} }
@ -3927,7 +3966,8 @@
"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
} }
} }
}, },
@ -3984,6 +4024,7 @@
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": { "requires": {
"once": "^1.3.0", "once": "^1.3.0",
"wrappy": "1" "wrappy": "1"
@ -4577,6 +4618,7 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"requires": { "requires": {
"graceful-fs": "^4.1.6" "graceful-fs": "^4.1.6"
} }
@ -5004,7 +5046,8 @@
"mime": { "mime": {
"version": "2.4.4", "version": "2.4.4",
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz", "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
"integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==" "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
"dev": true
}, },
"mime-db": { "mime-db": {
"version": "1.40.0", "version": "1.40.0",
@ -5036,6 +5079,7 @@
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -5080,6 +5124,7 @@
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
}, },
@ -5087,14 +5132,16 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
} }
} }
}, },
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
}, },
"murmurhash-js": { "murmurhash-js": {
"version": "1.0.0", "version": "1.0.0",
@ -5338,6 +5385,7 @@
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -5538,7 +5586,8 @@
"path-is-absolute": { "path-is-absolute": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
}, },
"path-key": { "path-key": {
"version": "2.0.1", "version": "2.0.1",
@ -5580,7 +5629,8 @@
"pend": { "pend": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=" "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true
}, },
"performance-now": { "performance-now": {
"version": "2.1.0", "version": "2.1.0",
@ -5695,6 +5745,18 @@
"resource-loader": "^2.2.3" "resource-loader": "^2.2.3"
} }
}, },
"plugin-error": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
"dev": true,
"requires": {
"ansi-colors": "^1.0.1",
"arr-diff": "^4.0.0",
"arr-union": "^3.1.0",
"extend-shallow": "^3.0.2"
}
},
"posix-character-classes": { "posix-character-classes": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -5888,7 +5950,8 @@
"progress": { "progress": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==" "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
"dev": true
}, },
"propagating-hammerjs": { "propagating-hammerjs": {
"version": "1.4.6", "version": "1.4.6",
@ -5901,7 +5964,8 @@
"proxy-from-env": { "proxy-from-env": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
"integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=" "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
"dev": true
}, },
"psl": { "psl": {
"version": "1.2.0", "version": "1.2.0",
@ -5940,6 +6004,7 @@
"version": "1.18.1", "version": "1.18.1",
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz", "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz",
"integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==", "integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==",
"dev": true,
"requires": { "requires": {
"debug": "^4.1.0", "debug": "^4.1.0",
"extract-zip": "^1.6.6", "extract-zip": "^1.6.6",
@ -5955,6 +6020,7 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": { "requires": {
"ms": "^2.1.1" "ms": "^2.1.1"
} }
@ -5962,7 +6028,8 @@
"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
} }
} }
}, },
@ -6361,6 +6428,7 @@
"version": "2.6.3", "version": "2.6.3",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
"dev": true,
"requires": { "requires": {
"glob": "^7.1.3" "glob": "^7.1.3"
} }
@ -7594,7 +7662,8 @@
"universalify": { "universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"dev": true
}, },
"unset-value": { "unset-value": {
"version": "1.0.0", "version": "1.0.0",
@ -7857,6 +7926,7 @@
"version": "6.2.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
"dev": true,
"requires": { "requires": {
"async-limiter": "~1.0.0" "async-limiter": "~1.0.0"
} }
@ -7918,6 +7988,7 @@
"version": "2.4.1", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
"integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=", "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
"dev": true,
"requires": { "requires": {
"fd-slicer": "~1.0.1" "fd-slicer": "~1.0.1"
} }

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "iwmlib", "name": "iwmlib",
"version": "1.0.15", "version": "1.0.16",
"description": "An Open Source library for multi-touch, WebGL powered applications.", "description": "An Open Source library for multi-touch, WebGL powered applications.",
"main": "index.js", "main": "index.js",
"directories": { "directories": {
@ -11,6 +11,7 @@
"build": "rollup --config ./rollup.config.js", "build": "rollup --config ./rollup.config.js",
"watch": "rollup --watch --config ./rollup.config.js", "watch": "rollup --watch --config ./rollup.config.js",
"3rdparty": "gulp", "3rdparty": "gulp",
"prettier": "gulp prettify",
"jsdoc": "jsdoc -c ./doc/conf.json" "jsdoc": "jsdoc -c ./doc/conf.json"
}, },
"repository": { "repository": {
@ -24,18 +25,20 @@
"eslint": "^6.0.1", "eslint": "^6.0.1",
"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",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-prettier": "^2.1.0",
"gulp-rename": "^1.4.0", "gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0", "gulp-replace": "^1.0.0",
"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",
"stylelint": "^10.1.0", "stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0" "stylelint-config-standard": "^18.3.0"
}, },
"dependencies": { "dependencies": {
"fs-extra": "^8.0.1",
"gsap": "^2.1.3", "gsap": "^2.1.3",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"optimal-select": "^4.0.1", "optimal-select": "^4.0.1",
@ -44,7 +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.6"
"puppeteer": "^1.18.1"
} }
} }