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

3632
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

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

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

@ -1451,10 +1451,9 @@
* @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).
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the popup. * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
* @param {number} [opts.id=auto generated] - The id of the popup. * @param {number} [opts.id=auto generated] - The id of the popup.
@ -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
@ -1539,7 +1543,7 @@ export default class AbstractPopup extends PIXI.Graphics {
// padding // padding
this.innerPadding = this.opts.padding * 1.5 this.innerPadding = this.opts.padding * 1.5
// interaction // interaction
//----------------- //-----------------
this.interactive = true this.interactive = true
@ -1547,15 +1551,14 @@ export default class AbstractPopup extends PIXI.Graphics {
this.show() this.show()
}) })
} }
/** /**
* Creates the framework and instantiates everything. * Creates the framework and instantiates everything.
* *
* @private * @private
* @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
} }
@ -1614,24 +1621,23 @@ export default class AbstractPopup extends PIXI.Graphics {
return this return this
} }
/** /**
* Should be called to refresh the layout of the popup. Can be used after resizing. * Should be called to refresh the layout of the popup. Can be used after resizing.
* *
* @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)
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth) this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth)
} }
@ -1661,41 +1667,54 @@ export default class AbstractPopup extends PIXI.Graphics {
return this return this
} }
/** /**
* Draws the canvas. * Draws the canvas.
* *
* @private * @private
* @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()
return this return this
} }
/** /**
* Calculates the size of the children of the AbstractPopup. * Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children * Cannot use getBounds() because it is not updated when children
* are removed. * are removed.
* *
* @private * @private
* @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,17 +1732,16 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height height += this._content.height
} }
return {width, height} return { width, height }
} }
/** /**
* Shows the popup (sets his alpha values to 1). * Shows the popup (sets his alpha values to 1).
* *
* @param {callback} [cb] - Executed when show animation was completed. * @param {callback} [cb] - Executed when show animation was completed.
* @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: () => {
@ -1735,15 +1753,14 @@ export default class AbstractPopup extends PIXI.Graphics {
return this return this
} }
/** /**
* Hides the popup (sets his alpha values to 0). * Hides the popup (sets his alpha values to 0).
* *
* @param {callback} [cb] - Executed when hide animation was completed. * @param {callback} [cb] - Executed when hide animation was completed.
* @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: () => {
@ -1764,7 +1781,7 @@ export default class AbstractPopup extends PIXI.Graphics {
/** /**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string, a number or a PIXI.Text object. * a string, a number or a PIXI.Text object.
* *
* @member {string|number|PIXI.Text} * @member {string|number|PIXI.Text}
*/ */
get header() { get header() {
@ -1777,11 +1794,11 @@ export default class AbstractPopup extends PIXI.Graphics {
this.opts.header = value this.opts.header = value
this.setup().layout() this.setup().layout()
} }
/** /**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string, a number or a PIXI.DisplayObject. * a string, a number or a PIXI.DisplayObject.
* *
* @member {string|number|PIXI.DisplayObject} * @member {string|number|PIXI.DisplayObject}
*/ */
get content() { get content() {
@ -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>

198
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)
} }
@ -1772,7 +1797,7 @@ export default class PIXIApp extends PIXI.Application {
} }
/** /**
* In some browsers the canvas is distorted if the screen resolution and * In some browsers the canvas is distorted if the screen resolution and
* overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels). * overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels).
* To compensate these distortions we need to fix the mapping to the actual * To compensate these distortions we need to fix the mapping to the actual
* drawing buffer coordinates. * drawing buffer coordinates.
@ -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 {
@ -2075,13 +2118,13 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject. * @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate. * @param {number} x - The x coordinate.
* @param {number} y - The y coordinate. * @param {number} y - The y coordinate.
* *
* @return {PIXI.Point} Returns a PIXI.Point. * @return {PIXI.Point} Returns a PIXI.Point.
*/ */
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
@ -2095,7 +2138,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject. * @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate. * @param {number} x - The x coordinate.
* @param {number} y - The y coordinate. * @param {number} y - The y coordinate.
* *
* @return {Point} Returns a DOM Point. * @return {Point} Returns a DOM Point.
*/ */
@ -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>

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

@ -1444,7 +1444,7 @@ import Tooltip from './tooltip.js'
/** /**
* Class that represents a PixiJS Badge. * Class that represents a PixiJS Badge.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -1452,13 +1452,13 @@ import Tooltip from './tooltip.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Add an DisplayObject to the app * // Add an DisplayObject to the app
* const circle = new PIXI.Graphics() * const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3) * circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40) * circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle) * app.scene.addChild(circle)
* *
* const badge1 = new Badge({ * const badge1 = new Badge({
* object: circle, * object: circle,
* container: app.scene, * container: app.scene,
@ -1470,10 +1470,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the badge. * @param {object} [opts] - An options object to specify to style and behaviour of the badge.
* @param {number} [opts.minWidth=0] - The minimum width of the badge. * @param {number} [opts.minWidth=0] - The minimum width of the 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)
@ -1505,7 +1507,7 @@ export default class Badge extends AbstractPopup {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
@ -1514,35 +1516,44 @@ 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)
} }
} }
return this return this
} }
/** /**
* Should be called to refresh the layout of the badge. Can be used after resizing. * Should be called to refresh the layout of the badge. Can be used after resizing.
* *
* @override * @override
* @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>

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

@ -1453,17 +1453,17 @@
* height: 270, * height: 270,
* transparent: false * transparent: false
* }).setup().run() * }).setup().run()
* *
* // Add a video sprite * // Add a video sprite
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4")) * const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
* sprite.width = app.size.width * sprite.width = app.size.width
* sprite.height = app.size.height * sprite.height = app.size.height
* app.scene.addChild(sprite) * app.scene.addChild(sprite)
* *
* // Create the filter and assign it to the scene * // Create the filter and assign it to the scene
* const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60)) * const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60))
* app.scene.filters = [blurFilter] * app.scene.filters = [blurFilter]
* *
* @class * @class
* @extends PIXI.Filter * @extends PIXI.Filter
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} shape The area where the blur effect should be applied to. Relative to the * @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} shape The area where the blur effect should be applied to. Relative to the
@ -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()
@ -1499,7 +1498,7 @@ export default class BlurFilter extends PIXI.Filter {
set blur(value) { set blur(value) {
this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value
} }
/** /**
* The blur shape. * The blur shape.
* *
@ -1509,26 +1508,39 @@ 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
)
} }
/** /**
* *
* @private * @private
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value * @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value
* @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;
@ -1613,13 +1623,18 @@ class TiltShiftAxisFilter extends PIXI.Filter {
` `
super(vertex, fragment) super(vertex, fragment)
if (shape.type === 'circle') { if (shape.type === 'circle') {
this.uniforms.shape = 1 this.uniforms.shape = 1
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)
@ -1640,7 +1655,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
set blur(value) { set blur(value) {
this.uniforms.blur = value this.uniforms.blur = value
} }
/** /**
* The blur shape. * The blur shape.
* *
@ -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>

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

@ -1443,7 +1443,7 @@ import Button from './button.js'
/** /**
* Class that represents a PixiJS ButtonGroup. * Class that represents a PixiJS ButtonGroup.
* *
* @example * @example
* // Create the button group * // Create the button group
* const buttonGroup = new ButtonGroup({ * const buttonGroup = new ButtonGroup({
@ -1464,10 +1464,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the button group. * @param {object} [opts] - An options object to specify to style and behaviour of the button group.
* @param {number} [opts.id=auto generated] - The id of the button group. * @param {number} [opts.id=auto generated] - The id of the button group.
@ -1514,50 +1513,53 @@ 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 = []
this._disabled = null this._disabled = null
this.visible = this.opts.visible this.visible = this.opts.visible
// setup // setup
@ -1568,21 +1570,19 @@ export default class ButtonGroup extends PIXI.Graphics {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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,18 +1653,25 @@ 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
)
} }
} }
let button = new Button(it) let button = new Button(it)
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') {
@ -1673,14 +1691,13 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/** /**
* Should be called to refresh the layout of the button group. Can be used after resizing. * Should be called to refresh the layout of the button group. Can be used after resizing.
* *
* @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)
@ -1691,26 +1708,38 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/** /**
* Draws the canvas. * Draws the canvas.
* *
* @private * @private
* @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)
} }
} }
}) })
@ -1730,10 +1758,10 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/** /**
* Gets or sets the disabled state. When disabled, no button of the button group can be clicked. * Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
* *
* @member {boolean} * @member {boolean}
*/ */
get disabled() { get disabled() {
@ -1741,32 +1769,29 @@ 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))
} }
/** /**
* Searches all buttons of the button group and returns the maximum width of one button. * Searches all buttons of the button group and returns the maximum width of one button.
* *
* @private * @private
* @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)
} }
/** /**
* Shows the button group (sets his alpha value to 1). * Shows the button group (sets his alpha value to 1).
* *
* @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
@ -1774,11 +1799,10 @@ export default class ButtonGroup extends PIXI.Graphics {
/** /**
* Hides the button group (sets his alpha value to 0). * Hides the button group (sets his alpha value to 0).
* *
* @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>

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

@ -1469,10 +1469,10 @@
* const front = PIXI.Sprite.fromImage('./assets/front.jpg') * const front = PIXI.Sprite.fromImage('./assets/front.jpg')
* const back = PIXI.Sprite.fromImage('./assets/back.jpg') * const back = PIXI.Sprite.fromImage('./assets/back.jpg')
* app.scene.addChild(front) * app.scene.addChild(front)
* *
* // Create the flippable * // Create the flippable
* const flippable = new Flippable(front, back, app.renderer) * const flippable = new Flippable(front, back, app.renderer)
* *
* front.interactive = true * front.interactive = true
* front.on('click', event => flippable.toggle()) * front.on('click', event => flippable.toggle())
* *
@ -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,16 +1577,18 @@ 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
outer.addChild(shadow) outer.addChild(shadow)
this.objects.shadow = shadow this.objects.shadow = shadow
// inner // inner
//-------------------- //--------------------
const inner = new PIXI.projection.Container3d() const inner = new PIXI.projection.Container3d()
@ -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
@ -1639,7 +1646,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
//-------------------- //--------------------
front.texture = this.generateTexture(this.opts.front) front.texture = this.generateTexture(this.opts.front)
back.texture = this.generateTexture(this.opts.back) back.texture = this.generateTexture(this.opts.back)
// switch objects and set params for virtual objects // switch objects and set params for virtual objects
//-------------------- //--------------------
const fromCenter = this.anchorToCenter(fromObject) const fromCenter = this.anchorToCenter(fromObject)
@ -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,18 +1788,18 @@ 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
shadow.euler.y = -inner.euler.y shadow.euler.y = -inner.euler.y
if (this.frontSideInFront) { if (this.frontSideInFront) {
front.renderable = true front.renderable = true
back.renderable = false back.renderable = false
@ -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)
@ -1853,7 +1886,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// render // render
//-------------------- //--------------------
this.opts.renderer.render(displayObject, renderTexture) this.opts.renderer.render(displayObject, renderTexture)
// restore position // restore position
displayObject.setTransform(...transform) displayObject.setTransform(...transform)
@ -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>

119
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
} }
@ -1460,15 +1457,13 @@ export class FontInfo {
/** /**
* Static methods to support hyphenation of lines. * Static methods to support hyphenation of lines.
* *
* @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('-')
} }
@ -1496,13 +1491,13 @@ 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
} }
@ -1548,7 +1546,7 @@ export class Hypenate {
} }
/** /**
* Main method and entry point for text hyphenation * Main method and entry point for text hyphenation
* *
* @static * @static
* @param {*} text * @param {*} text
@ -1571,17 +1569,21 @@ 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
* @param {object|PIXI.TextStyle} [style] - The style parameters * @param {object|PIXI.TextStyle} [style] - The style parameters
* @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,
this.normFontSize = this.style.fontSize style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize
this.minZoom = minZoom this.minZoom = minZoom
this.maxZoom = maxZoom this.maxZoom = maxZoom
} }
@ -1620,10 +1622,9 @@ 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.
* *
* @memberof LabeledGraphics * @memberof LabeledGraphics
*/ */
constructor() { constructor() {
@ -1635,14 +1636,13 @@ 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.
* *
* @param {*} key - The cache key * @param {*} key - The cache key
* @param {*} label - The label to show * @param {*} label - The label to show
* @param {*} [attrs={}] - Defines attributes of the text object. * @param {*} [attrs={}] - Defines attributes of the text object.
* align: 'right', 'left', or 'center' * align: 'right', 'left', or 'center'
* justify: 'top', 'bottom', or 'center' * justify: 'top', 'bottom', or 'center'
* maxLines: {integer} truncates the text and adds ellipsis * maxLines: {integer} truncates the text and adds ellipsis
@ -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)
} }
@ -1671,7 +1669,7 @@ export class LabeledGraphics extends PIXI.Graphics {
label = this.truncateLabel(label, fontInfo, maxLines) label = this.truncateLabel(label, fontInfo, maxLines)
} }
} }
if (!this.labels.has(key)) { if (!this.labels.has(key)) {
let text = this._createText(label, fontInfo) let text = this._createText(label, fontInfo)
this.labels.set(key, text) this.labels.set(key, text)
@ -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')
} }
@ -1761,7 +1771,7 @@ export class LabeledGraphics extends PIXI.Graphics {
return this.labels.get(key) return this.labels.get(key)
} }
/** /**
* Hides the label with the given key. * Hides the label with the given key.
* @param {*} key * @param {*} key
* @memberof LabeledGraphics * @memberof LabeledGraphics
@ -1773,7 +1783,7 @@ export class LabeledGraphics extends PIXI.Graphics {
} }
} }
/** /**
* Removes the label with the given key. * Removes the label with the given key.
* @param {*} key * @param {*} key
* @memberof LabeledGraphics * @memberof LabeledGraphics
@ -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>

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

@ -1449,10 +1449,10 @@ import Events from '../events.js'
* @example * @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg') * const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg') * const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
* *
* // Create the list * // Create the list
* const list = new List([elephant1, elephant2]) * const list = new List([elephant1, elephant2])
* *
* app.scene.addChild(list) * app.scene.addChild(list)
* *
* @class * @class
@ -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
} }
@ -1657,13 +1666,12 @@ 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
@ -1671,13 +1679,12 @@ 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
@ -1686,11 +1693,10 @@ export default class List extends PIXI.Container {
/** /**
* Resizes the list. * Resizes the list.
* *
* @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 {
@ -1701,12 +1707,11 @@ export default class List extends PIXI.Container {
} }
/** /**
* *
* @private * @private
* @param {*} event * @param {*} event
*/ */
onStart(event) { onStart(event) {
this.__dragging = true this.__dragging = true
this.capture(event) this.capture(event)
@ -1716,21 +1721,19 @@ 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')
} }
} }
/** /**
* *
* @private * @private
* @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') {
@ -1742,19 +1745,18 @@ export default class List extends PIXI.Container {
} }
/** /**
* *
* @private * @private
* @param {*} event * @param {*} event
*/ */
onEnd(event) { onEnd(event) {
if (this.__dragging) { if (this.__dragging) {
this.__dragging = false this.__dragging = false
this.capture(event) this.capture(event)
const throwProps = {} const throwProps = {}
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
let min = this.opts.width - this.innerWidth let min = this.opts.width - this.innerWidth
min = min > 0 ? 0 : min min = min > 0 ? 0 : min
@ -1773,37 +1775,48 @@ 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
)
} }
} }
} }
/** /**
* *
* @private * @private
* @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>

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

@ -1439,11 +1439,11 @@
</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.
* *
* @example * @example
* // Create the PixiJS App * // Create the PixiJS App
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -1451,7 +1451,7 @@ import {InteractivePopup} from './popup.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Create a button * // Create a button
* let button = new Button({ * let button = new Button({
* label: 'Click me', * label: 'Click me',
@ -1464,7 +1464,7 @@ import {InteractivePopup} from './popup.js'
* app.scene.addChild(message) * app.scene.addChild(message)
* } * }
* }) * })
* *
* // Add the button to the scene * // Add the button to the scene
* app.scene.addChild(button) * app.scene.addChild(button)
* *
@ -1473,10 +1473,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the message. * @param {object} [opts] - An options object to specify to style and behaviour of the message.
* @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to. * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
@ -1493,32 +1492,34 @@ 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)
} }
/** /**
* Relayouts the position of the message box. * Relayouts the position of the message box.
* *
* @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,21 +1542,21 @@ 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
} }
} }
/** /**
* Shows the message box. * Shows the message box.
* *
* @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>

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

@ -1439,11 +1439,11 @@
</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.
* *
* @example * @example
* // Create the button and the modal when clicked * // Create the button and the modal when clicked
* const button = new Button({ * const button = new Button({
@ -1468,10 +1468,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal. * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {number} [opts.id=auto generated] - The id of the modal. * @param {number} [opts.id=auto generated] - The id of the 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
@ -1514,15 +1516,14 @@ export default class Modal extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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
@ -1560,21 +1561,23 @@ export default class Modal extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the modal. Can be used after resizing. * Should be called to refresh the layout of the modal. Can be used after resizing.
* *
* @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()
@ -1584,33 +1587,39 @@ export default class Modal extends PIXI.Container {
return this return this
} }
/** /**
* Shows the modal (sets his alpha values to 1). * Shows the modal (sets his alpha values to 1).
* *
* @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
} }
/** /**
* Hides the modal (sets his alpha values to 0). * Hides the modal (sets his alpha values to 0).
* *
* @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
} }
/** /**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string or a PIXI.Text object. * a string or a PIXI.Text object.
* *
* @member {string|PIXI.Text} * @member {string|PIXI.Text}
*/ */
get header() { get header() {
@ -1622,11 +1631,11 @@ export default class Modal extends PIXI.Container {
this.popup.destroy() this.popup.destroy()
this.setup().layout() this.setup().layout()
} }
/** /**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string or a PIXI.DisplayObject. * a string or a PIXI.DisplayObject.
* *
* @member {string|PIXI.DisplayObject} * @member {string|PIXI.DisplayObject}
*/ */
get content() { get content() {
@ -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>

82
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
@ -1590,13 +1610,12 @@ export class InteractivePopup extends AbstractPopup {
* Calculates the size of the children of the AbstractPopup. * Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children * Cannot use getBounds() because it is not updated when children
* are removed. * are removed.
* *
* @private * @private
* @override * @override
* @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>

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

@ -1443,7 +1443,7 @@ import Popup from './popup.js'
/** /**
* Class that represents a PixiJS PopupMenu. * Class that represents a PixiJS PopupMenu.
* *
* @example * @example
* // Create the button and the modal when clicked * // Create the button and the modal when clicked
* const button = new Button({ * const button = new Button({
@ -1468,10 +1468,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal. * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object. * @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object.
@ -1483,38 +1482,42 @@ 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)
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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>

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

@ -1442,7 +1442,7 @@
/** /**
* Class that represents a PixiJS Progress. * Class that represents a PixiJS Progress.
* *
* @example * @example
* // Create the progress * // Create the progress
* const progress = new Progress({ * const progress = new Progress({
@ -1458,10 +1458,9 @@
* @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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the progress. * @param {object} [opts] - An options object to specify to style and behaviour of the progress.
* @param {number} [opts.id=auto generated] - The id of the progress. * @param {number} [opts.id=auto generated] - The id of the 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
@ -1531,7 +1533,7 @@ export default class Progress extends PIXI.Container {
this.barActive = null this.barActive = null
this.alpha = 0 this.alpha = 0
this.visible = this.opts.visible this.visible = this.opts.visible
this._progress = 0 this._progress = 0
@ -1544,15 +1546,14 @@ export default class Progress extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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 => {
@ -1579,14 +1580,13 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the progress. Can be used after resizing. * Should be called to refresh the layout of the progress. Can be used after resizing.
* *
* @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()
} }
@ -1603,15 +1606,14 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Draws the canvas. * Draws the canvas.
* *
* @private * @private
* @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()
@ -1620,59 +1622,80 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Draws the bar. * Draws the bar.
* *
* @private * @private
* @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)
} }
this.bar.endFill() this.bar.endFill()
this.bar.x = width / 2 - this.bar.width / 2 this.bar.x = width / 2 - this.bar.width / 2
this.bar.y = height / 2 - this.bar.height / 2 this.bar.y = height / 2 - this.bar.height / 2
return this return this
} }
/** /**
* Draws the active bar. * Draws the active bar.
* *
* @private * @private
* @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.opts.strokeActive, this.opts.strokeActiveAlpha) this.barActive.lineStyle(
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.barActive.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
if (barActiveWidth > 0) { if (barActiveWidth > 0) {
if (this.radius > 1) { if (this.radius > 1) {
this.barActive.drawRoundedRect(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)
} }
@ -1684,39 +1707,41 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Shows the progress (sets his alpha values to 1). * Shows the progress (sets his alpha values to 1).
* *
* @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
} }
/** /**
* Hides the progress (sets his alpha values to 1). * Hides the progress (sets his alpha values to 1).
* *
* @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
} }
/** /**
* Gets or sets the progress. Has to be a number between 0 and 100. * Gets or sets the progress. Has to be a number between 0 and 100.
* *
* @member {number} * @member {number}
*/ */
get progress() { get progress() {
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>

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

@ -1442,7 +1442,7 @@
/** /**
* Class that represents a PixiJS Scrollview. * Class that represents a PixiJS Scrollview.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -1450,7 +1450,7 @@
* width: 600, * width: 600,
* height: 400 * height: 400
* }).setup().run() * }).setup().run()
* *
* // Create the Scrollview * // Create the Scrollview
* app.loader * app.loader
* .add('elephant', './assets/elephant-1.jpg') * .add('elephant', './assets/elephant-1.jpg')
@ -1466,38 +1466,34 @@
* @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.
* *
* @constructor * @constructor
* @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
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @return {Scrollview} A reference to the Scrollview for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
setup() { setup() {
return this return this
} }
/** /**
* Should be called to refresh the layout of the Scrollview. Can be used after resizing. * Should be called to refresh the layout of the Scrollview. Can be used after resizing.
* *
* @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>

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

@ -1467,7 +1467,7 @@ import Tooltip from './tooltip.js'
/** /**
* Class that represents a PixiJS Slider. * Class that represents a PixiJS Slider.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -1475,7 +1475,7 @@ import Tooltip from './tooltip.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Create the slider * // Create the slider
* const slider = new Slider({ * const slider = new Slider({
* x: 10, * x: 10,
@ -1491,10 +1491,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the slider. * @param {object} [opts] - An options object to specify to style and behaviour of the slider.
* @param {number} [opts.id=auto generated] - The id of the slider. * @param {number} [opts.id=auto generated] - The id of the slider.
@ -1522,46 +1521,49 @@ export default class Slider extends PIXI.Container {
* @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved. * @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved.
* @param {onCompleteCallback} [opts.onComplete] - Executed when the slider control was dropped. * @param {onCompleteCallback} [opts.onComplete] - Executed when the slider control was dropped.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display. * to display.
* @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
// Validation // Validation
@ -1589,7 +1591,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj = null this.sliderObj = null
this.control = null this.control = null
this.tooltip = null this.tooltip = null
this.visible = this.opts.visible this.visible = this.opts.visible
// setup // setup
@ -1600,23 +1602,26 @@ export default class Slider extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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)
@ -1660,7 +1673,7 @@ export default class Slider extends PIXI.Container {
control.event = e control.event = e
control.delta = e.data.getLocalPosition(this.control).x control.delta = e.data.getLocalPosition(this.control).x
control.dragging = true control.dragging = true
if (this.opts.onStart) { if (this.opts.onStart) {
this.opts.onStart.call(this, e, this) this.opts.onStart.call(this, e, this)
} }
@ -1669,20 +1682,20 @@ export default class Slider extends PIXI.Container {
this.control = control this.control = control
this.addChild(this.control) this.addChild(this.control)
// 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,15 +1703,17 @@ 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 })
} }
}) })
// disabled // disabled
//----------------- //-----------------
this.disabled = this.opts.disabled this.disabled = this.opts.disabled
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
@ -1715,14 +1730,13 @@ export default class Slider extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the slider. Can be used after resizing. * Should be called to refresh the layout of the slider. Can be used after resizing.
* *
* @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)
@ -1733,15 +1747,14 @@ export default class Slider extends PIXI.Container {
return this return this
} }
/** /**
* Draws the slider to the canvas. * Draws the slider to the canvas.
* *
* @private * @private
* @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()
@ -1778,12 +1805,11 @@ export default class Slider extends PIXI.Container {
/** /**
* Executed, when the slider control movement ended. * Executed, when the slider control movement ended.
* *
* @private * @private
* @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
@ -1797,9 +1823,9 @@ export default class Slider extends PIXI.Container {
/** /**
* Calculates the value for a given pixel. * Calculates the value for a given pixel.
* *
* @private * @private
* @param {number} value * @param {number} value
* @returns {number} The calucalted pixel. * @returns {number} The calucalted pixel.
*/ */
valueToPixel(value) { valueToPixel(value) {
@ -1808,14 +1834,17 @@ 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)
)
} }
/** /**
* Calculates the pixel for a given value. * Calculates the pixel for a given value.
* *
* @private * @private
* @param {number} pixel * @param {number} pixel
* @returns {number} The calucalted value. * @returns {number} The calucalted value.
*/ */
pixelToValue(pixel) { pixelToValue(pixel) {
@ -1824,12 +1853,15 @@ 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
)
} }
/** /**
* Gets or sets the value. * Gets or sets the value.
* *
* @member {number} * @member {number}
*/ */
get value() { get value() {
@ -1845,27 +1877,26 @@ 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 })
} }
/** /**
* Gets or sets the disabled state. When disabled, the slider cannot be clicked. * Gets or sets the disabled state. When disabled, the slider cannot be clicked.
* *
* @member {boolean} * @member {boolean}
*/ */
get disabled() { get disabled() {
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.interactive = false this.interactive = false
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
@ -1877,11 +1908,10 @@ export default class Slider extends PIXI.Container {
/** /**
* Shows the slider (sets his alpha values to 1). * Shows the slider (sets his alpha values to 1).
* *
* @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
@ -1891,14 +1921,13 @@ export default class Slider extends PIXI.Container {
return this return this
} }
/** /**
* Hides the slider (sets his alpha values to 1). * Hides the slider (sets his alpha values to 1).
* *
* @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>

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

@ -1475,7 +1475,7 @@ import Tooltip from './tooltip.js'
/** /**
* Class that represents a PixiJS Switch. * Class that represents a PixiJS Switch.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -1483,7 +1483,7 @@ import Tooltip from './tooltip.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Create the switch * // Create the switch
* const switch1 = new Switch({ * const switch1 = new Switch({
* x: 10, * x: 10,
@ -1499,10 +1499,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the switch. * @param {object} [opts] - An options object to specify to style and behaviour of the switch.
* @param {number} [opts.id=auto generated] - The id of the switch. * @param {number} [opts.id=auto generated] - The id of the switch.
@ -1542,56 +1541,61 @@ export default class Switch extends PIXI.Container {
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered. * @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered.
* @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered. * @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display. * to display.
* @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
//----------------- //-----------------
@ -1610,7 +1614,7 @@ export default class Switch extends PIXI.Container {
this.switchObj = null this.switchObj = null
this.control = null this.control = null
this.tooltip = null this.tooltip = null
this.visible = this.opts.visible this.visible = this.opts.visible
// animated // animated
@ -1637,15 +1641,14 @@ export default class Switch extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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()
@ -1656,7 +1659,7 @@ export default class Switch extends PIXI.Container {
//----------------- //-----------------
this.xInactive = this.opts.controlRadius this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics() let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2 control.y = this.opts.height / 2
@ -1664,23 +1667,22 @@ export default class Switch extends PIXI.Container {
this.control = control this.control = control
this.addChild(this.control) this.addChild(this.control)
// 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)
@ -1711,7 +1713,7 @@ export default class Switch extends PIXI.Container {
// active // active
//----------------- //-----------------
this.active = this.opts.active this.active = this.opts.active
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
@ -1728,14 +1730,13 @@ export default class Switch extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the switch. Can be used after resizing. * Should be called to refresh the layout of the switch. Can be used after resizing.
* *
* @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)
@ -1746,28 +1747,50 @@ export default class Switch extends PIXI.Container {
return this return this
} }
/** /**
* Draws the switch to the canvas. * Draws the switch to the canvas.
* *
* @private * @private
* @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,52 +1799,91 @@ 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()
return this return this
} }
/** /**
* Draws the animation. * Draws the animation.
* *
* @private * @private
* @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()
return this return this
} }
/** /**
* Gets or sets the active state. * Gets or sets the active state.
* *
* @member {boolean} * @member {boolean}
*/ */
get active() { get active() {
@ -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,
@ -1877,10 +1937,10 @@ export default class Switch extends PIXI.Container {
}) })
} }
} }
/** /**
* Gets or sets the disabled state. When disabled, the switch cannot be clicked. * Gets or sets the disabled state. When disabled, the switch cannot be clicked.
* *
* @member {boolean} * @member {boolean}
*/ */
get disabled() { get disabled() {
@ -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
@ -1906,11 +1965,10 @@ export default class Switch extends PIXI.Container {
/** /**
* Shows the switch (sets his alpha values to 1). * Shows the switch (sets his alpha values to 1).
* *
* @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
@ -1924,14 +1982,13 @@ export default class Switch extends PIXI.Container {
return this return this
} }
/** /**
* Hides the switch (sets his alpha values to 1). * Hides the switch (sets his alpha values to 1).
* *
* @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>

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

@ -1443,7 +1443,7 @@ import AbstractPopup from './abstractpopup.js'
/** /**
* Class that represents a PixiJS Tooltip. * Class that represents a PixiJS Tooltip.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -1451,13 +1451,13 @@ import AbstractPopup from './abstractpopup.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Add an DisplayObject to the app * // Add an DisplayObject to the app
* const circle = new PIXI.Graphics() * const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3) * circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40) * circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle) * app.scene.addChild(circle)
* *
* const tooltip = new Tooltip({ * const tooltip = new Tooltip({
* object: circle, * object: circle,
* container: app.scene, * container: app.scene,
@ -1469,10 +1469,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the tooltip. * @param {object} [opts] - An options object to specify to style and behaviour of the tooltip.
* @param {number} [opts.minWidth=0] - The minimum width of the tooltip. * @param {number} [opts.minWidth=0] - The minimum width of the 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
@ -1511,15 +1513,14 @@ export default class Tooltip extends AbstractPopup {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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
@ -1527,7 +1528,7 @@ export default class Tooltip extends AbstractPopup {
this.interactive = true this.interactive = true
let mouseoverTooltip = false let mouseoverTooltip = false
this.on('mouseover', e => { this.on('mouseover', e => {
mouseoverTooltip = true mouseoverTooltip = true
}) })
@ -1540,7 +1541,7 @@ export default class Tooltip extends AbstractPopup {
}) })
} }
}) })
// bind events object // bind events object
//----------------- //-----------------
const object = this.opts.object const object = this.opts.object
@ -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
@ -1576,15 +1576,14 @@ export default class Tooltip extends AbstractPopup {
return this return this
} }
/** /**
* Calculates and sets the position of the tooltip. * Calculates and sets the position of the tooltip.
* *
* @private * @private
* @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>

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

@ -1444,14 +1444,14 @@ import Theme from './theme.js'
/** /**
* Class that represents a PixiJS Volatile. * Class that represents a PixiJS Volatile.
* *
* @example * @example
* const app = new PIXIApp({ * const app = new PIXIApp({
* view: canvas, * view: canvas,
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* const button = new Button({ * const button = new Button({
* label: 'Volatile!', * label: 'Volatile!',
* action: () => { * action: () => {
@ -1462,17 +1462,16 @@ import Theme from './theme.js'
* }) * })
* } * }
* }) * })
* *
* app.scene.addChild(button) * app.scene.addChild(button)
* *
* @class * @class
* @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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal. * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {number} [opts.id=auto generated] - The id of the tooltip. * @param {number} [opts.id=auto generated] - The id of the tooltip.
@ -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
@ -1522,38 +1524,34 @@ export default class Volatile {
//----------------- //-----------------
this.run() this.run()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
setup() { setup() {
return this return this
} }
/** /**
* Should be called to refresh the layout of the volatile. Can be used after resizing. * Should be called to refresh the layout of the volatile. Can be used after resizing.
* *
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
layout() { layout() {
return this return this
} }
/** /**
* Starts the volatile animation. * Starts the volatile animation.
* *
* @private * @private
* @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>

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

File diff suppressed because it is too large Load Diff

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'

59
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,28 +30,44 @@ 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')
)
} }
/** /**
* Distincts if the app is running inside electron or not. * Distincts if the app is running inside electron or not.
* *
* 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

87
lib/card/highlight.js
View File

@ -4,17 +4,15 @@
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:
* *
* <svg viewbox="0 0 100 100"> * <svg viewbox="0 0 100 100">
* <!-- The defs section must be defined and cannot be generated in JavaScript --> * <!-- The defs section must be defined and cannot be generated in JavaScript -->
* <defs> * <defs>
@ -23,15 +21,14 @@ function round(value) {
* <circle onclick="Highlight.animateZoom(event)" cx="47" cy="18" r="8" stroke-width="0.5" /> * <circle onclick="Highlight.animateZoom(event)" cx="47" cy="18" r="8" stroke-width="0.5" />
* <circle onclick="Highlight.animateZoom(event)" cx="60" cy="67" r="8" stroke-width="0.5" /> * <circle onclick="Highlight.animateZoom(event)" cx="60" cy="67" r="8" stroke-width="0.5" />
* </svg> * </svg>
* *
* The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the * The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the
* circles can be represnted in percent. * circles can be represnted in percent.
* *
* @class Highlight * @class Highlight
* @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')
@ -160,15 +160,16 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke }) this.shrink(maskImage, { stroke })
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:'
} }
} }

96
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) {
@ -68,15 +71,13 @@ export default class CardWrapper extends Object {
* See https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not * See https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not
* Therefore we can only detect the following standard cases: * Therefore we can only detect the following standard cases:
* I. All clickable objects like activeNodes * I. All clickable objects like activeNodes
* II. Objects that have been attached a click handler by the scatter itself via * II. Objects that have been attached a click handler by the scatter itself via
*/ */
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)
} }

49
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
} }
@ -30,7 +27,7 @@ export default class Events {
} }
static isPointerDown(event) { static isPointerDown(event) {
// According to // According to
// https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
// pointer events use the buttons feature to represent pressed buttons // pointer events use the buttons feature to represent pressed buttons
return event.buttons return event.buttons
@ -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')
@ -291,7 +298,7 @@ export class EventRecorder {
if (this.step < this.recorded.length) { if (this.step < this.recorded.length) {
let { type, time, constructor, data } = this.recorded[this.step] let { type, time, constructor, data } = this.recorded[this.step]
Events.simulateEvent(type, constructor, data) Events.simulateEvent(type, constructor, data)
this.step += 1 this.step += 1
let dt = 0 let dt = 0
if (this.step < this.recorded.length) { if (this.step < this.recorded.length) {
@ -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 {
} }
} }
} }

47
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 => {
@ -169,7 +169,7 @@ export class HTMLLoader extends CardLoader {
/** /**
* Tries to determine the size of the addedNode. * Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes. * Checks for explicit width and height style attributes.
* *
* Overwrite this method if you want to extract values from other infos. * Overwrite this method if you want to extract values from other infos.
* *
* @returns { width: int, height: int } * @returns { width: int, height: int }
@ -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]
// } // }
} }

23
lib/logging.js
View File

@ -20,15 +20,14 @@ try {
/** Basic class for app specific logging requirements. /** Basic class for app specific logging requirements.
* Can be used to implement persistent logging in electron apps. * Can be used to implement persistent logging in electron apps.
* Uses a logMessage cache to prevent error overflows. This is * Uses a logMessage cache to prevent error overflows. This is
* needed since errors may occur very frequently * needed since errors may occur very frequently
* (e.g. display update loops at 60fps, programmatic loops, ...). * (e.g. display update loops at 60fps, programmatic loops, ...).
* *
* The logging handlers can be overwritten by calling the static * The logging handlers can be overwritten by calling the static
* setup method. * setup method.
*/ */
export default class Logging { export default class Logging {
/** Static log function. /** Static log function.
* @param {*} message * @param {*} message
*/ */
@ -37,9 +36,9 @@ export default class Logging {
} }
/** /**
* Static warn function. * Static warn function.
* Emits each warning only once per session. * Emits each warning only once per session.
* @param {*} message * @param {*} message
*/ */
static warn(message) { static warn(message) {
if (!logMessages.has(message)) { if (!logMessages.has(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

143
lib/pixi/abstractpopup.js
View File

@ -11,10 +11,9 @@ 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).
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the popup. * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
* @param {number} [opts.id=auto generated] - The id of the popup. * @param {number} [opts.id=auto generated] - The id of the popup.
@ -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
@ -99,7 +103,7 @@ export default class AbstractPopup extends PIXI.Graphics {
// padding // padding
this.innerPadding = this.opts.padding * 1.5 this.innerPadding = this.opts.padding * 1.5
// interaction // interaction
//----------------- //-----------------
this.interactive = true this.interactive = true
@ -107,15 +111,14 @@ export default class AbstractPopup extends PIXI.Graphics {
this.show() this.show()
}) })
} }
/** /**
* Creates the framework and instantiates everything. * Creates the framework and instantiates everything.
* *
* @private * @private
* @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
} }
@ -174,24 +181,23 @@ export default class AbstractPopup extends PIXI.Graphics {
return this return this
} }
/** /**
* Should be called to refresh the layout of the popup. Can be used after resizing. * Should be called to refresh the layout of the popup. Can be used after resizing.
* *
* @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)
if (this.opts.maxWidth) { if (this.opts.maxWidth) {
this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth) this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth)
} }
@ -221,41 +227,54 @@ export default class AbstractPopup extends PIXI.Graphics {
return this return this
} }
/** /**
* Draws the canvas. * Draws the canvas.
* *
* @private * @private
* @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()
return this return this
} }
/** /**
* Calculates the size of the children of the AbstractPopup. * Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children * Cannot use getBounds() because it is not updated when children
* are removed. * are removed.
* *
* @private * @private
* @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,17 +292,16 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height height += this._content.height
} }
return {width, height} return { width, height }
} }
/** /**
* Shows the popup (sets his alpha values to 1). * Shows the popup (sets his alpha values to 1).
* *
* @param {callback} [cb] - Executed when show animation was completed. * @param {callback} [cb] - Executed when show animation was completed.
* @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: () => {
@ -295,15 +313,14 @@ export default class AbstractPopup extends PIXI.Graphics {
return this return this
} }
/** /**
* Hides the popup (sets his alpha values to 0). * Hides the popup (sets his alpha values to 0).
* *
* @param {callback} [cb] - Executed when hide animation was completed. * @param {callback} [cb] - Executed when hide animation was completed.
* @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: () => {
@ -324,7 +341,7 @@ export default class AbstractPopup extends PIXI.Graphics {
/** /**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string, a number or a PIXI.Text object. * a string, a number or a PIXI.Text object.
* *
* @member {string|number|PIXI.Text} * @member {string|number|PIXI.Text}
*/ */
get header() { get header() {
@ -337,11 +354,11 @@ export default class AbstractPopup extends PIXI.Graphics {
this.opts.header = value this.opts.header = value
this.setup().layout() this.setup().layout()
} }
/** /**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string, a number or a PIXI.DisplayObject. * a string, a number or a PIXI.DisplayObject.
* *
* @member {string|number|PIXI.DisplayObject} * @member {string|number|PIXI.DisplayObject}
*/ */
get content() { get content() {

196
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)
} }
@ -332,7 +357,7 @@ export default class PIXIApp extends PIXI.Application {
} }
/** /**
* In some browsers the canvas is distorted if the screen resolution and * In some browsers the canvas is distorted if the screen resolution and
* overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels). * overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels).
* To compensate these distortions we need to fix the mapping to the actual * To compensate these distortions we need to fix the mapping to the actual
* drawing buffer coordinates. * drawing buffer coordinates.
@ -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 {
@ -635,13 +678,13 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject. * @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate. * @param {number} x - The x coordinate.
* @param {number} y - The y coordinate. * @param {number} y - The y coordinate.
* *
* @return {PIXI.Point} Returns a PIXI.Point. * @return {PIXI.Point} Returns a PIXI.Point.
*/ */
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
@ -655,7 +698,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject. * @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate. * @param {number} x - The x coordinate.
* @param {number} y - The y coordinate. * @param {number} y - The y coordinate.
* *
* @return {Point} Returns a DOM Point. * @return {Point} Returns a DOM Point.
*/ */
@ -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
} }

64
lib/pixi/blurfilter.js
View File

@ -13,17 +13,17 @@
* height: 270, * height: 270,
* transparent: false * transparent: false
* }).setup().run() * }).setup().run()
* *
* // Add a video sprite * // Add a video sprite
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4")) * const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
* sprite.width = app.size.width * sprite.width = app.size.width
* sprite.height = app.size.height * sprite.height = app.size.height
* app.scene.addChild(sprite) * app.scene.addChild(sprite)
* *
* // Create the filter and assign it to the scene * // Create the filter and assign it to the scene
* const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60)) * const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60))
* app.scene.filters = [blurFilter] * app.scene.filters = [blurFilter]
* *
* @class * @class
* @extends PIXI.Filter * @extends PIXI.Filter
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} shape The area where the blur effect should be applied to. Relative to the * @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} shape The area where the blur effect should be applied to. Relative to the
@ -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()
@ -59,7 +58,7 @@ export default class BlurFilter extends PIXI.Filter {
set blur(value) { set blur(value) {
this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value
} }
/** /**
* The blur shape. * The blur shape.
* *
@ -69,26 +68,39 @@ 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
)
} }
/** /**
* *
* @private * @private
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value * @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value
* @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;
@ -173,13 +183,18 @@ class TiltShiftAxisFilter extends PIXI.Filter {
` `
super(vertex, fragment) super(vertex, fragment)
if (shape.type === 'circle') { if (shape.type === 'circle') {
this.uniforms.shape = 1 this.uniforms.shape = 1
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)
@ -200,7 +215,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
set blur(value) { set blur(value) {
this.uniforms.blur = value this.uniforms.blur = value
} }
/** /**
* The blur shape. * The blur shape.
* *
@ -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
} }
} }

10
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.
*/ */
@ -57,4 +57,4 @@ window.Badge = Badge
window.Progress = Progress window.Progress = Progress
window.List = List window.List = List
window.LabeledGraphics = LabeledGraphics window.LabeledGraphics = LabeledGraphics
window.FontInfo = FontInfo window.FontInfo = FontInfo

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)

174
lib/pixi/buttongroup.js
View File

@ -3,7 +3,7 @@ import Button from './button.js'
/** /**
* Class that represents a PixiJS ButtonGroup. * Class that represents a PixiJS ButtonGroup.
* *
* @example * @example
* // Create the button group * // Create the button group
* const buttonGroup = new ButtonGroup({ * const buttonGroup = new ButtonGroup({
@ -24,10 +24,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the button group. * @param {object} [opts] - An options object to specify to style and behaviour of the button group.
* @param {number} [opts.id=auto generated] - The id of the button group. * @param {number} [opts.id=auto generated] - The id of the button group.
@ -74,50 +73,53 @@ 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 = []
this._disabled = null this._disabled = null
this.visible = this.opts.visible this.visible = this.opts.visible
// setup // setup
@ -128,21 +130,19 @@ export default class ButtonGroup extends PIXI.Graphics {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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,18 +213,25 @@ 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
)
} }
} }
let button = new Button(it) let button = new Button(it)
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') {
@ -233,14 +251,13 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/** /**
* Should be called to refresh the layout of the button group. Can be used after resizing. * Should be called to refresh the layout of the button group. Can be used after resizing.
* *
* @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)
@ -251,26 +268,38 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/** /**
* Draws the canvas. * Draws the canvas.
* *
* @private * @private
* @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)
} }
} }
}) })
@ -290,10 +318,10 @@ export default class ButtonGroup extends PIXI.Graphics {
return this return this
} }
/** /**
* Gets or sets the disabled state. When disabled, no button of the button group can be clicked. * Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
* *
* @member {boolean} * @member {boolean}
*/ */
get disabled() { get disabled() {
@ -301,32 +329,29 @@ 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))
} }
/** /**
* Searches all buttons of the button group and returns the maximum width of one button. * Searches all buttons of the button group and returns the maximum width of one button.
* *
* @private * @private
* @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)
} }
/** /**
* Shows the button group (sets his alpha value to 1). * Shows the button group (sets his alpha value to 1).
* *
* @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
@ -334,11 +359,10 @@ export default class ButtonGroup extends PIXI.Graphics {
/** /**
* Hides the button group (sets his alpha value to 0). * Hides the button group (sets his alpha value to 0).
* *
* @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
} }
} }

135
lib/pixi/flippable.js
View File

@ -29,10 +29,10 @@
* const front = PIXI.Sprite.fromImage('./assets/front.jpg') * const front = PIXI.Sprite.fromImage('./assets/front.jpg')
* const back = PIXI.Sprite.fromImage('./assets/back.jpg') * const back = PIXI.Sprite.fromImage('./assets/back.jpg')
* app.scene.addChild(front) * app.scene.addChild(front)
* *
* // Create the flippable * // Create the flippable
* const flippable = new Flippable(front, back, app.renderer) * const flippable = new Flippable(front, back, app.renderer)
* *
* front.interactive = true * front.interactive = true
* front.on('click', event => flippable.toggle()) * front.on('click', event => flippable.toggle())
* *
@ -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,16 +137,18 @@ 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
outer.addChild(shadow) outer.addChild(shadow)
this.objects.shadow = shadow this.objects.shadow = shadow
// inner // inner
//-------------------- //--------------------
const inner = new PIXI.projection.Container3d() const inner = new PIXI.projection.Container3d()
@ -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
@ -199,7 +206,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
//-------------------- //--------------------
front.texture = this.generateTexture(this.opts.front) front.texture = this.generateTexture(this.opts.front)
back.texture = this.generateTexture(this.opts.back) back.texture = this.generateTexture(this.opts.back)
// switch objects and set params for virtual objects // switch objects and set params for virtual objects
//-------------------- //--------------------
const fromCenter = this.anchorToCenter(fromObject) const fromCenter = this.anchorToCenter(fromObject)
@ -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,18 +348,18 @@ 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
shadow.euler.y = -inner.euler.y shadow.euler.y = -inner.euler.y
if (this.frontSideInFront) { if (this.frontSideInFront) {
front.renderable = true front.renderable = true
back.renderable = false back.renderable = false
@ -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)
@ -413,7 +446,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// render // render
//-------------------- //--------------------
this.opts.renderer.render(displayObject, renderTexture) this.opts.renderer.render(displayObject, renderTexture)
// restore position // restore position
displayObject.setTransform(...transform) displayObject.setTransform(...transform)

115
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
} }
@ -20,15 +17,13 @@ export class FontInfo {
/** /**
* Static methods to support hyphenation of lines. * Static methods to support hyphenation of lines.
* *
* @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('-')
} }
@ -56,13 +51,13 @@ 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
} }
@ -108,7 +106,7 @@ export class Hypenate {
} }
/** /**
* Main method and entry point for text hyphenation * Main method and entry point for text hyphenation
* *
* @static * @static
* @param {*} text * @param {*} text
@ -131,17 +129,21 @@ 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
* @param {object|PIXI.TextStyle} [style] - The style parameters * @param {object|PIXI.TextStyle} [style] - The style parameters
* @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,
this.normFontSize = this.style.fontSize style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize
this.minZoom = minZoom this.minZoom = minZoom
this.maxZoom = maxZoom this.maxZoom = maxZoom
} }
@ -180,10 +182,9 @@ 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.
* *
* @memberof LabeledGraphics * @memberof LabeledGraphics
*/ */
constructor() { constructor() {
@ -195,14 +196,13 @@ 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.
* *
* @param {*} key - The cache key * @param {*} key - The cache key
* @param {*} label - The label to show * @param {*} label - The label to show
* @param {*} [attrs={}] - Defines attributes of the text object. * @param {*} [attrs={}] - Defines attributes of the text object.
* align: 'right', 'left', or 'center' * align: 'right', 'left', or 'center'
* justify: 'top', 'bottom', or 'center' * justify: 'top', 'bottom', or 'center'
* maxLines: {integer} truncates the text and adds ellipsis * maxLines: {integer} truncates the text and adds ellipsis
@ -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)
} }
@ -231,7 +229,7 @@ export class LabeledGraphics extends PIXI.Graphics {
label = this.truncateLabel(label, fontInfo, maxLines) label = this.truncateLabel(label, fontInfo, maxLines)
} }
} }
if (!this.labels.has(key)) { if (!this.labels.has(key)) {
let text = this._createText(label, fontInfo) let text = this._createText(label, fontInfo)
this.labels.set(key, text) this.labels.set(key, text)
@ -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')
} }
@ -321,7 +331,7 @@ export class LabeledGraphics extends PIXI.Graphics {
return this.labels.get(key) return this.labels.get(key)
} }
/** /**
* Hides the label with the given key. * Hides the label with the given key.
* @param {*} key * @param {*} key
* @memberof LabeledGraphics * @memberof LabeledGraphics
@ -333,7 +343,7 @@ export class LabeledGraphics extends PIXI.Graphics {
} }
} }
/** /**
* Removes the label with the given key. * Removes the label with the given key.
* @param {*} key * @param {*} key
* @memberof LabeledGraphics * @memberof LabeledGraphics
@ -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)
} }
} }

134
lib/pixi/list.js
View File

@ -9,10 +9,10 @@ import Events from '../events.js'
* @example * @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg') * const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg') * const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
* *
* // Create the list * // Create the list
* const list = new List([elephant1, elephant2]) * const list = new List([elephant1, elephant2])
* *
* app.scene.addChild(list) * app.scene.addChild(list)
* *
* @class * @class
@ -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
} }
@ -217,13 +226,12 @@ 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
@ -231,13 +239,12 @@ 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
@ -246,11 +253,10 @@ export default class List extends PIXI.Container {
/** /**
* Resizes the list. * Resizes the list.
* *
* @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 {
@ -261,12 +267,11 @@ export default class List extends PIXI.Container {
} }
/** /**
* *
* @private * @private
* @param {*} event * @param {*} event
*/ */
onStart(event) { onStart(event) {
this.__dragging = true this.__dragging = true
this.capture(event) this.capture(event)
@ -276,21 +281,19 @@ 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')
} }
} }
/** /**
* *
* @private * @private
* @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') {
@ -302,19 +305,18 @@ export default class List extends PIXI.Container {
} }
/** /**
* *
* @private * @private
* @param {*} event * @param {*} event
*/ */
onEnd(event) { onEnd(event) {
if (this.__dragging) { if (this.__dragging) {
this.__dragging = false this.__dragging = false
this.capture(event) this.capture(event)
const throwProps = {} const throwProps = {}
if (this.opts.orientation === 'horizontal') { if (this.opts.orientation === 'horizontal') {
let min = this.opts.width - this.innerWidth let min = this.opts.width - this.innerWidth
min = min > 0 ? 0 : min min = min > 0 ? 0 : min
@ -333,37 +335,48 @@ 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
)
} }
} }
} }
/** /**
* *
* @private * @private
* @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)
} }
} }

56
lib/pixi/message.js
View File

@ -1,9 +1,9 @@
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.
* *
* @example * @example
* // Create the PixiJS App * // Create the PixiJS App
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -11,7 +11,7 @@ import {InteractivePopup} from './popup.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Create a button * // Create a button
* let button = new Button({ * let button = new Button({
* label: 'Click me', * label: 'Click me',
@ -24,7 +24,7 @@ import {InteractivePopup} from './popup.js'
* app.scene.addChild(message) * app.scene.addChild(message)
* } * }
* }) * })
* *
* // Add the button to the scene * // Add the button to the scene
* app.scene.addChild(button) * app.scene.addChild(button)
* *
@ -33,10 +33,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the message. * @param {object} [opts] - An options object to specify to style and behaviour of the message.
* @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to. * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
@ -53,32 +52,34 @@ 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)
} }
/** /**
* Relayouts the position of the message box. * Relayouts the position of the message box.
* *
* @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,21 +102,21 @@ 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
} }
} }
/** /**
* Shows the message box. * Shows the message box.
* *
* @private * @private
*/ */
show() { show() {
super.show() super.show()
if (this.opts.autoClose) { if (this.opts.autoClose) {

71
lib/pixi/modal.js
View File

@ -1,9 +1,9 @@
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.
* *
* @example * @example
* // Create the button and the modal when clicked * // Create the button and the modal when clicked
* const button = new Button({ * const button = new Button({
@ -28,10 +28,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal. * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {number} [opts.id=auto generated] - The id of the modal. * @param {number} [opts.id=auto generated] - The id of the 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
@ -74,15 +76,14 @@ export default class Modal extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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
@ -120,21 +121,23 @@ export default class Modal extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the modal. Can be used after resizing. * Should be called to refresh the layout of the modal. Can be used after resizing.
* *
* @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()
@ -144,33 +147,39 @@ export default class Modal extends PIXI.Container {
return this return this
} }
/** /**
* Shows the modal (sets his alpha values to 1). * Shows the modal (sets his alpha values to 1).
* *
* @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
} }
/** /**
* Hides the modal (sets his alpha values to 0). * Hides the modal (sets his alpha values to 0).
* *
* @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
} }
/** /**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string or a PIXI.Text object. * a string or a PIXI.Text object.
* *
* @member {string|PIXI.Text} * @member {string|PIXI.Text}
*/ */
get header() { get header() {
@ -182,11 +191,11 @@ export default class Modal extends PIXI.Container {
this.popup.destroy() this.popup.destroy()
this.setup().layout() this.setup().layout()
} }
/** /**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string or a PIXI.DisplayObject. * a string or a PIXI.DisplayObject.
* *
* @member {string|PIXI.DisplayObject} * @member {string|PIXI.DisplayObject}
*/ */
get content() { get content() {

68
lib/pixi/popover.js
View File

@ -1,13 +1,30 @@
/** /**
* *
*/ */
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
let style = { let style = {
@ -16,12 +33,16 @@ 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()
this.draw() this.draw()
@ -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
} }
} }

80
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
@ -150,13 +170,12 @@ export class InteractivePopup extends AbstractPopup {
* Calculates the size of the children of the AbstractPopup. * Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children * Cannot use getBounds() because it is not updated when children
* are removed. * are removed.
* *
* @private * @private
* @override * @override
* @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)
} }

49
lib/pixi/popupmenu.js
View File

@ -3,7 +3,7 @@ import Popup from './popup.js'
/** /**
* Class that represents a PixiJS PopupMenu. * Class that represents a PixiJS PopupMenu.
* *
* @example * @example
* // Create the button and the modal when clicked * // Create the button and the modal when clicked
* const button = new Button({ * const button = new Button({
@ -28,10 +28,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal. * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object. * @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object.
@ -43,38 +42,42 @@ 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)
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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)

159
lib/pixi/progress.js
View File

@ -2,7 +2,7 @@ import Theme from './theme.js'
/** /**
* Class that represents a PixiJS Progress. * Class that represents a PixiJS Progress.
* *
* @example * @example
* // Create the progress * // Create the progress
* const progress = new Progress({ * const progress = new Progress({
@ -18,10 +18,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the progress. * @param {object} [opts] - An options object to specify to style and behaviour of the progress.
* @param {number} [opts.id=auto generated] - The id of the progress. * @param {number} [opts.id=auto generated] - The id of the 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
@ -91,7 +93,7 @@ export default class Progress extends PIXI.Container {
this.barActive = null this.barActive = null
this.alpha = 0 this.alpha = 0
this.visible = this.opts.visible this.visible = this.opts.visible
this._progress = 0 this._progress = 0
@ -104,15 +106,14 @@ export default class Progress extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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 => {
@ -139,14 +140,13 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the progress. Can be used after resizing. * Should be called to refresh the layout of the progress. Can be used after resizing.
* *
* @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()
} }
@ -163,15 +166,14 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Draws the canvas. * Draws the canvas.
* *
* @private * @private
* @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()
@ -180,59 +182,80 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Draws the bar. * Draws the bar.
* *
* @private * @private
* @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)
} }
this.bar.endFill() this.bar.endFill()
this.bar.x = width / 2 - this.bar.width / 2 this.bar.x = width / 2 - this.bar.width / 2
this.bar.y = height / 2 - this.bar.height / 2 this.bar.y = height / 2 - this.bar.height / 2
return this return this
} }
/** /**
* Draws the active bar. * Draws the active bar.
* *
* @private * @private
* @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.opts.strokeActive, this.opts.strokeActiveAlpha) this.barActive.lineStyle(
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha) this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.barActive.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
if (barActiveWidth > 0) { if (barActiveWidth > 0) {
if (this.radius > 1) { if (this.radius > 1) {
this.barActive.drawRoundedRect(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)
} }
@ -244,39 +267,41 @@ export default class Progress extends PIXI.Container {
return this return this
} }
/** /**
* Shows the progress (sets his alpha values to 1). * Shows the progress (sets his alpha values to 1).
* *
* @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
} }
/** /**
* Hides the progress (sets his alpha values to 1). * Hides the progress (sets his alpha values to 1).
* *
* @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
} }
/** /**
* Gets or sets the progress. Has to be a number between 0 and 100. * Gets or sets the progress. Has to be a number between 0 and 100.
* *
* @member {number} * @member {number}
*/ */
get progress() { get progress() {
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()
} }

18
lib/pixi/scrollview.js
View File

@ -2,7 +2,7 @@ import Scrollbox from './scrollbox.js'
/** /**
* Class that represents a PixiJS Scrollview. * Class that represents a PixiJS Scrollview.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -10,7 +10,7 @@ import Scrollbox from './scrollbox.js'
* width: 600, * width: 600,
* height: 400 * height: 400
* }).setup().run() * }).setup().run()
* *
* // Create the Scrollview * // Create the Scrollview
* app.loader * app.loader
* .add('elephant', './assets/elephant-1.jpg') * .add('elephant', './assets/elephant-1.jpg')
@ -26,38 +26,34 @@ 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.
* *
* @constructor * @constructor
* @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
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @return {Scrollview} A reference to the Scrollview for chaining. * @return {Scrollview} A reference to the Scrollview for chaining.
*/ */
setup() { setup() {
return this return this
} }
/** /**
* Should be called to refresh the layout of the Scrollview. Can be used after resizing. * Should be called to refresh the layout of the Scrollview. Can be used after resizing.
* *
* @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

199
lib/pixi/slider.js
View File

@ -27,7 +27,7 @@ import Tooltip from './tooltip.js'
/** /**
* Class that represents a PixiJS Slider. * Class that represents a PixiJS Slider.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -35,7 +35,7 @@ import Tooltip from './tooltip.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Create the slider * // Create the slider
* const slider = new Slider({ * const slider = new Slider({
* x: 10, * x: 10,
@ -51,10 +51,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the slider. * @param {object} [opts] - An options object to specify to style and behaviour of the slider.
* @param {number} [opts.id=auto generated] - The id of the slider. * @param {number} [opts.id=auto generated] - The id of the slider.
@ -82,46 +81,49 @@ export default class Slider extends PIXI.Container {
* @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved. * @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved.
* @param {onCompleteCallback} [opts.onComplete] - Executed when the slider control was dropped. * @param {onCompleteCallback} [opts.onComplete] - Executed when the slider control was dropped.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display. * to display.
* @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
// Validation // Validation
@ -149,7 +151,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj = null this.sliderObj = null
this.control = null this.control = null
this.tooltip = null this.tooltip = null
this.visible = this.opts.visible this.visible = this.opts.visible
// setup // setup
@ -160,23 +162,26 @@ export default class Slider extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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)
@ -220,7 +233,7 @@ export default class Slider extends PIXI.Container {
control.event = e control.event = e
control.delta = e.data.getLocalPosition(this.control).x control.delta = e.data.getLocalPosition(this.control).x
control.dragging = true control.dragging = true
if (this.opts.onStart) { if (this.opts.onStart) {
this.opts.onStart.call(this, e, this) this.opts.onStart.call(this, e, this)
} }
@ -229,20 +242,20 @@ export default class Slider extends PIXI.Container {
this.control = control this.control = control
this.addChild(this.control) this.addChild(this.control)
// 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,15 +263,17 @@ 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 })
} }
}) })
// disabled // disabled
//----------------- //-----------------
this.disabled = this.opts.disabled this.disabled = this.opts.disabled
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
@ -275,14 +290,13 @@ export default class Slider extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the slider. Can be used after resizing. * Should be called to refresh the layout of the slider. Can be used after resizing.
* *
* @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)
@ -293,15 +307,14 @@ export default class Slider extends PIXI.Container {
return this return this
} }
/** /**
* Draws the slider to the canvas. * Draws the slider to the canvas.
* *
* @private * @private
* @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()
@ -338,12 +365,11 @@ export default class Slider extends PIXI.Container {
/** /**
* Executed, when the slider control movement ended. * Executed, when the slider control movement ended.
* *
* @private * @private
* @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
@ -357,9 +383,9 @@ export default class Slider extends PIXI.Container {
/** /**
* Calculates the value for a given pixel. * Calculates the value for a given pixel.
* *
* @private * @private
* @param {number} value * @param {number} value
* @returns {number} The calucalted pixel. * @returns {number} The calucalted pixel.
*/ */
valueToPixel(value) { valueToPixel(value) {
@ -368,14 +394,17 @@ 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)
)
} }
/** /**
* Calculates the pixel for a given value. * Calculates the pixel for a given value.
* *
* @private * @private
* @param {number} pixel * @param {number} pixel
* @returns {number} The calucalted value. * @returns {number} The calucalted value.
*/ */
pixelToValue(pixel) { pixelToValue(pixel) {
@ -384,12 +413,15 @@ 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
)
} }
/** /**
* Gets or sets the value. * Gets or sets the value.
* *
* @member {number} * @member {number}
*/ */
get value() { get value() {
@ -405,27 +437,26 @@ 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 })
} }
/** /**
* Gets or sets the disabled state. When disabled, the slider cannot be clicked. * Gets or sets the disabled state. When disabled, the slider cannot be clicked.
* *
* @member {boolean} * @member {boolean}
*/ */
get disabled() { get disabled() {
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.interactive = false this.interactive = false
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
@ -437,11 +468,10 @@ export default class Slider extends PIXI.Container {
/** /**
* Shows the slider (sets his alpha values to 1). * Shows the slider (sets his alpha values to 1).
* *
* @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
@ -451,14 +481,13 @@ export default class Slider extends PIXI.Container {
return this return this
} }
/** /**
* Hides the slider (sets his alpha values to 1). * Hides the slider (sets his alpha values to 1).
* *
* @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)
} }

263
lib/pixi/switch.js
View File

@ -35,7 +35,7 @@ import Tooltip from './tooltip.js'
/** /**
* Class that represents a PixiJS Switch. * Class that represents a PixiJS Switch.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -43,7 +43,7 @@ import Tooltip from './tooltip.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Create the switch * // Create the switch
* const switch1 = new Switch({ * const switch1 = new Switch({
* x: 10, * x: 10,
@ -59,10 +59,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the switch. * @param {object} [opts] - An options object to specify to style and behaviour of the switch.
* @param {number} [opts.id=auto generated] - The id of the switch. * @param {number} [opts.id=auto generated] - The id of the switch.
@ -102,56 +101,61 @@ export default class Switch extends PIXI.Container {
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered. * @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered.
* @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered. * @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display. * to display.
* @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
//----------------- //-----------------
@ -170,7 +174,7 @@ export default class Switch extends PIXI.Container {
this.switchObj = null this.switchObj = null
this.control = null this.control = null
this.tooltip = null this.tooltip = null
this.visible = this.opts.visible this.visible = this.opts.visible
// animated // animated
@ -197,15 +201,14 @@ export default class Switch extends PIXI.Container {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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()
@ -216,7 +219,7 @@ export default class Switch extends PIXI.Container {
//----------------- //-----------------
this.xInactive = this.opts.controlRadius this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics() let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2 control.y = this.opts.height / 2
@ -224,23 +227,22 @@ export default class Switch extends PIXI.Container {
this.control = control this.control = control
this.addChild(this.control) this.addChild(this.control)
// 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)
@ -271,7 +273,7 @@ export default class Switch extends PIXI.Container {
// active // active
//----------------- //-----------------
this.active = this.opts.active this.active = this.opts.active
// tooltip // tooltip
//----------------- //-----------------
if (this.opts.tooltip) { if (this.opts.tooltip) {
@ -288,14 +290,13 @@ export default class Switch extends PIXI.Container {
return this return this
} }
/** /**
* Should be called to refresh the layout of the switch. Can be used after resizing. * Should be called to refresh the layout of the switch. Can be used after resizing.
* *
* @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)
@ -306,28 +307,50 @@ export default class Switch extends PIXI.Container {
return this return this
} }
/** /**
* Draws the switch to the canvas. * Draws the switch to the canvas.
* *
* @private * @private
* @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,52 +359,91 @@ 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()
return this return this
} }
/** /**
* Draws the animation. * Draws the animation.
* *
* @private * @private
* @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()
return this return this
} }
/** /**
* Gets or sets the active state. * Gets or sets the active state.
* *
* @member {boolean} * @member {boolean}
*/ */
get active() { get active() {
@ -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,
@ -437,10 +497,10 @@ export default class Switch extends PIXI.Container {
}) })
} }
} }
/** /**
* Gets or sets the disabled state. When disabled, the switch cannot be clicked. * Gets or sets the disabled state. When disabled, the switch cannot be clicked.
* *
* @member {boolean} * @member {boolean}
*/ */
get disabled() { get disabled() {
@ -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
@ -466,11 +525,10 @@ export default class Switch extends PIXI.Container {
/** /**
* Shows the switch (sets his alpha values to 1). * Shows the switch (sets his alpha values to 1).
* *
* @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
@ -484,14 +542,13 @@ export default class Switch extends PIXI.Container {
return this return this
} }
/** /**
* Hides the switch (sets his alpha values to 1). * Hides the switch (sets his alpha values to 1).
* *
* @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})
} }
} }

290
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()
} }
} }

51
lib/pixi/tooltip.js
View File

@ -3,7 +3,7 @@ import AbstractPopup from './abstractpopup.js'
/** /**
* Class that represents a PixiJS Tooltip. * Class that represents a PixiJS Tooltip.
* *
* @example * @example
* // Create the app * // Create the app
* const app = new PIXIApp({ * const app = new PIXIApp({
@ -11,13 +11,13 @@ import AbstractPopup from './abstractpopup.js'
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* // Add an DisplayObject to the app * // Add an DisplayObject to the app
* const circle = new PIXI.Graphics() * const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3) * circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40) * circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle) * app.scene.addChild(circle)
* *
* const tooltip = new Tooltip({ * const tooltip = new Tooltip({
* object: circle, * object: circle,
* container: app.scene, * container: app.scene,
@ -29,10 +29,9 @@ 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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the tooltip. * @param {object} [opts] - An options object to specify to style and behaviour of the tooltip.
* @param {number} [opts.minWidth=0] - The minimum width of the tooltip. * @param {number} [opts.minWidth=0] - The minimum width of the 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
@ -71,15 +73,14 @@ export default class Tooltip extends AbstractPopup {
//----------------- //-----------------
this.layout() this.layout()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @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
@ -87,7 +88,7 @@ export default class Tooltip extends AbstractPopup {
this.interactive = true this.interactive = true
let mouseoverTooltip = false let mouseoverTooltip = false
this.on('mouseover', e => { this.on('mouseover', e => {
mouseoverTooltip = true mouseoverTooltip = true
}) })
@ -100,7 +101,7 @@ export default class Tooltip extends AbstractPopup {
}) })
} }
}) })
// bind events object // bind events object
//----------------- //-----------------
const object = this.opts.object const object = this.opts.object
@ -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
@ -136,15 +136,14 @@ export default class Tooltip extends AbstractPopup {
return this return this
} }
/** /**
* Calculates and sets the position of the tooltip. * Calculates and sets the position of the tooltip.
* *
* @private * @private
* @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

55
lib/pixi/volatile.js
View File

@ -4,14 +4,14 @@ import Theme from './theme.js'
/** /**
* Class that represents a PixiJS Volatile. * Class that represents a PixiJS Volatile.
* *
* @example * @example
* const app = new PIXIApp({ * const app = new PIXIApp({
* view: canvas, * view: canvas,
* width: 900, * width: 900,
* height: 250 * height: 250
* }).setup().run() * }).setup().run()
* *
* const button = new Button({ * const button = new Button({
* label: 'Volatile!', * label: 'Volatile!',
* action: () => { * action: () => {
@ -22,17 +22,16 @@ import Theme from './theme.js'
* }) * })
* } * }
* }) * })
* *
* app.scene.addChild(button) * app.scene.addChild(button)
* *
* @class * @class
* @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.
* *
* @constructor * @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal. * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {number} [opts.id=auto generated] - The id of the tooltip. * @param {number} [opts.id=auto generated] - The id of the tooltip.
@ -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
@ -82,38 +84,34 @@ export default class Volatile {
//----------------- //-----------------
this.run() this.run()
} }
/** /**
* Creates children and instantiates everything. * Creates children and instantiates everything.
* *
* @private * @private
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
setup() { setup() {
return this return this
} }
/** /**
* Should be called to refresh the layout of the volatile. Can be used after resizing. * Should be called to refresh the layout of the volatile. Can be used after resizing.
* *
* @return {Volatile} A reference to the volatile for chaining. * @return {Volatile} A reference to the volatile for chaining.
*/ */
layout() { layout() {
return this return this
} }
/** /**
* Starts the volatile animation. * Starts the volatile animation.
* *
* @private * @private
* @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 })
} }
} }
}) })

27
lib/poppable.js
View File

@ -2,9 +2,8 @@
* 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
*/ */
register(context) { register(context) {
let registered = Poppable.get(context) let registered = Poppable.get(context)
@ -16,7 +15,7 @@ export default class Poppable {
/** /**
* Unregister object from context * Unregister object from context
* @param {*} context * @param {*} context
*/ */
unregister(context) { unregister(context) {
Poppable.delete(context) Poppable.delete(context)
@ -33,20 +32,20 @@ export default class Poppable {
return Poppable.registrations.get(context) return Poppable.registrations.get(context)
} }
/** 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)
} }
/** Test whether a poppable exists in the given context /** Test whether a poppable exists in the given context
* *
* @param {*} context * @param {*} context
*/ */
static has(context) { static has(context) {
return Poppable.registrations.has(context) return Poppable.registrations.has(context)
@ -65,8 +64,8 @@ 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')
} }
} }
Poppable.registrations = new Map() Poppable.registrations = new Map()

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

177
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
@ -305,7 +305,7 @@ export class AbstractScatter extends Throwable {
}) })
/** /**
* Closes the card when the minScale is reached and the * Closes the card when the minScale is reached and the
* card is released. Card can be saved by scaling it up again. * card is released. Card can be saved by scaling it up again.
*/ */
this.scaleAutoClose = scaleAutoClose this.scaleAutoClose = scaleAutoClose
@ -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
} }
@ -456,7 +454,7 @@ export class AbstractScatter extends Throwable {
keepOnStage(velocity, collision = 0.5) { keepOnStage(velocity, collision = 0.5) {
let stagePolygon = this.containerPolygon let stagePolygon = this.containerPolygon
// UO: since keepOnStage is called in nextVelocity we need to // UO: since keepOnStage is called in nextVelocity we need to
// ensure a return value // ensure a return value
if (!stagePolygon) return { x: 0, y: 0 } if (!stagePolygon) return { x: 0, y: 0 }
let polygon = this.polygon let polygon = this.polygon
@ -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)
}) })
} }
@ -643,7 +655,7 @@ export class AbstractScatter extends Throwable {
/** /**
* For a given zoom, a new scale is calculated, taking * For a given zoom, a new scale is calculated, taking
* min and max scale into account. * min and max scale into account.
* *
* @param {number} zoom - The zoom factor, to scale the object with. * @param {number} zoom - The zoom factor, to scale the object with.
* @returns {object} - Returns an object containing the a value for a valid scale and the corrected zoom factor. * @returns {object} - Returns an object containing the a value for a valid scale and the corrected zoom factor.
*/ */
@ -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)
@ -1147,7 +1164,7 @@ export class DOMScatter extends AbstractScatter {
transformOrigin: transformOrigin transformOrigin: transformOrigin
} }
this.tapNodes = new Map() this.tapNodes = new Map()
// For tweenlite we need initial values in _gsTransform // For tweenlite we need initial values in _gsTransform
TweenLite.set(element, this.initialValues) TweenLite.set(element, this.initialValues)
this.onResize = onResize this.onResize = onResize
@ -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' } })

743
lib/uitest.js
View File

File diff suppressed because it is too large Load Diff

88
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
@ -978,7 +974,7 @@ export class LowPassFilter {
/** /**
* Setup buffer with array of values * Setup buffer with array of values
* *
* @param {array} values * @param {array} values
* @returns {array} * @returns {array}
* @access public * @access public
@ -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"
} }
} }