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

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

3632
dist/iwmlib.js vendored

File diff suppressed because it is too large Load Diff

4178
dist/iwmlib.pixi.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -1467,7 +1467,7 @@ like Popup, Message, Tooltip...</p></div>
<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>
@ -2491,7 +2491,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2648,7 +2648,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2753,7 +2753,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2912,7 +2912,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1939,7 +1939,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2100,7 +2100,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2209,7 +2209,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2368,7 +2368,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ is assigned to!</p></div>
<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>
@ -1792,7 +1792,7 @@ app.scene.filters = [blurFilter]</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -3369,7 +3369,7 @@ the tint property of the icon sprite.</p>
<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>
@ -3493,7 +3493,7 @@ the tint property of the icon sprite.</p>
<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>
@ -3598,7 +3598,7 @@ the tint property of the icon sprite.</p>
<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>
@ -3703,7 +3703,7 @@ the tint property of the icon sprite.</p>
<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>
@ -3810,7 +3810,7 @@ the tint property of the icon sprite.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2889,7 +2889,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<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>
@ -2994,7 +2994,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<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>
@ -3099,7 +3099,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<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>
@ -3206,7 +3206,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -5090,7 +5090,7 @@ i.e. after loading a single tile</p></td>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -2603,7 +2603,7 @@ on completion.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2399,7 +2399,7 @@ front.on('click', event => flippable.toggle())</code></pre>
<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>
@ -2506,7 +2506,7 @@ front.on('click', event => flippable.toggle())</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1553,7 +1553,7 @@
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -1463,7 +1463,7 @@
<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>
@ -1557,7 +1557,7 @@
<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>
@ -1755,7 +1755,7 @@
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -1467,7 +1467,7 @@ like Popup, Message...</p></div>
<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>
@ -1910,7 +1910,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2069,7 +2069,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2178,7 +2178,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2337,7 +2337,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1463,7 +1463,7 @@
<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>
@ -1555,7 +1555,7 @@
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -1463,7 +1463,7 @@
<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>
@ -1571,7 +1571,7 @@ resuse and place labels across different layout variants</p>
<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>
@ -1647,7 +1647,7 @@ resuse and place labels across different layout variants</p>
<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>
@ -1996,7 +1996,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<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>
@ -2146,7 +2146,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<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>
@ -2267,7 +2267,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<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>
@ -2388,7 +2388,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<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>
@ -2620,7 +2620,7 @@ than wanted</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2077,7 +2077,7 @@ app.scene.addChild(list)</code></pre>
<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>
@ -2201,7 +2201,7 @@ app.scene.addChild(list)</code></pre>
<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>
@ -2306,7 +2306,7 @@ app.scene.addChild(list)</code></pre>
<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>
@ -2427,7 +2427,7 @@ app.scene.addChild(list)</code></pre>
<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>
@ -2579,7 +2579,7 @@ app.scene.addChild(list)</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2169,7 +2169,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2328,7 +2328,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2435,7 +2435,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2015,7 +2015,7 @@ a string or a PIXI.Text object.</p>
<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>
@ -2122,7 +2122,7 @@ a string or a PIXI.Text object.</p>
<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>
@ -2229,7 +2229,7 @@ a string or a PIXI.Text object.</p>
<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>
@ -2336,7 +2336,7 @@ a string or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -2316,7 +2316,7 @@ const app = new PIXIApp({
<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>
@ -2423,7 +2423,7 @@ const app = new PIXIApp({
<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>
@ -2552,7 +2552,7 @@ handler for the orientationchange event.</p>
<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>
@ -2749,7 +2749,7 @@ to browser page coordinates.</p>
<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>
@ -2946,7 +2946,7 @@ to local DisplayObject coordinates.</p>
<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>
@ -3023,7 +3023,7 @@ to the layout method.</p>
<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>
@ -3188,7 +3188,7 @@ to the layout method.</p>
<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>
@ -3347,7 +3347,7 @@ adapt their layout to the new app size.</p>
<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>
@ -3680,7 +3680,7 @@ renderer resolution?</p></td>
<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>
@ -4013,7 +4013,7 @@ renderer resolution?</p></td>
<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>
@ -4170,7 +4170,7 @@ renderer resolution?</p></td>
<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>
@ -4327,7 +4327,7 @@ renderer resolution?</p></td>
<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>
@ -4528,7 +4528,7 @@ rejected with an error.</td>
<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>
@ -4633,7 +4633,7 @@ rejected with an error.</td>
<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>
@ -4769,7 +4769,7 @@ rejected with an error.</td>
<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>
@ -4930,7 +4930,7 @@ called without a parameter.</td>
<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>
@ -5131,7 +5131,7 @@ rejected with an error.</td>
<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>
@ -5428,7 +5428,7 @@ rejected with an error.</td>
<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>
@ -5534,7 +5534,7 @@ Overwrite this method if you need additonal views and components.</p>
<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>
@ -5737,7 +5737,7 @@ rejected with an error.</td>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1901,7 +1901,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2062,7 +2062,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2171,7 +2171,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2330,7 +2330,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1955,7 +1955,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2116,7 +2116,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2225,7 +2225,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2384,7 +2384,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,7 +1469,7 @@ like Popup, Message...</p></div>
<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>
@ -1783,7 +1783,7 @@ like Popup, Message...</p></div>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2552,7 +2552,7 @@ app.scene.addChild(progress)</code></pre>
<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>
@ -2657,7 +2657,7 @@ app.scene.addChild(progress)</code></pre>
<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>
@ -2762,7 +2762,7 @@ app.scene.addChild(progress)</code></pre>
<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>
@ -2869,7 +2869,7 @@ app.scene.addChild(progress)</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1594,7 +1594,7 @@ app.loader
<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>
@ -1701,7 +1701,7 @@ app.loader
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2643,7 +2643,7 @@ app.scene.addChild(slider)</code></pre>
<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>
@ -2748,7 +2748,7 @@ app.scene.addChild(slider)</code></pre>
<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>
@ -2853,7 +2853,7 @@ app.scene.addChild(slider)</code></pre>
<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>
@ -2960,7 +2960,7 @@ app.scene.addChild(slider)</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -3073,7 +3073,7 @@ app.scene.addChild(switch1)</code></pre>
<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>
@ -3178,7 +3178,7 @@ app.scene.addChild(switch1)</code></pre>
<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>
@ -3283,7 +3283,7 @@ app.scene.addChild(switch1)</code></pre>
<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>
@ -3390,7 +3390,7 @@ app.scene.addChild(switch1)</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1463,7 +1463,7 @@
<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>
@ -1684,7 +1684,7 @@
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2999,7 +2999,7 @@ const app = new PIXIApp({
<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>
@ -3159,7 +3159,7 @@ const app = new PIXIApp({
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1580,7 +1580,7 @@ const app = new PIXIApp({
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1466,7 +1466,7 @@ The color1 is set to 0xf6f6f6, color2 to 0x282828.</p></div>
<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>
@ -1592,7 +1592,7 @@ const app = new PIXIApp({
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1466,7 +1466,7 @@ The primaryColor is set to 0xd92f31.</p></div>
<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>
@ -1592,7 +1592,7 @@ const app = new PIXIApp({
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -2044,7 +2044,7 @@ an indicator of tiles to free.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -2077,7 +2077,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2238,7 +2238,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2347,7 +2347,7 @@ a string, a number or a PIXI.Text object.</p>
<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>
@ -2506,7 +2506,7 @@ a string, a number or a PIXI.Text object.</p>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1857,7 +1857,7 @@ test.start()</code></pre>
<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>
@ -1962,7 +1962,7 @@ test.start()</code></pre>
<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>
@ -2596,7 +2596,7 @@ test.start()</code></pre>
<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>
@ -3340,7 +3340,7 @@ test.start()</code></pre>
<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>
@ -3445,7 +3445,7 @@ test.start()</code></pre>
<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>
@ -3550,7 +3550,7 @@ test.start()</code></pre>
<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>
@ -3655,7 +3655,7 @@ test.start()</code></pre>
<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>
@ -4177,7 +4177,7 @@ test.start()</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1465,7 +1465,7 @@
<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>
@ -1986,7 +1986,7 @@ app.scene.addChild(button)</code></pre>
<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>
@ -2093,7 +2093,7 @@ app.scene.addChild(button)</code></pre>
<footer class="content-size">
<div class="footer">
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -3314,7 +3314,7 @@
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -1479,7 +1479,7 @@
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -1451,10 +1451,9 @@
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
export default class AbstractPopup extends PIXI.Graphics {
/**
* Creates an instance of an AbstractPopup (only for internal use).
*
*
* @constructor
* @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.
@ -1485,34 +1484,37 @@ export default class AbstractPopup extends PIXI.Graphics {
* to landscape, the popup cannot be displayed in portrait mode.
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
},
opts
)
this.id = this.opts.id
@ -1521,10 +1523,12 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.maxWidth) {
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.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
this.textStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
}
this.alpha = 0
@ -1539,7 +1543,7 @@ export default class AbstractPopup extends PIXI.Graphics {
// padding
this.innerPadding = this.opts.padding * 1.5
// interaction
//-----------------
this.interactive = true
@ -1547,15 +1551,14 @@ export default class AbstractPopup extends PIXI.Graphics {
this.show()
})
}
/**
* Creates the framework and instantiates everything.
*
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
// position
//-----------------
this.sy = this.opts.padding
@ -1563,15 +1566,17 @@ export default class AbstractPopup extends PIXI.Graphics {
// header
//-----------------
if (this.opts.header != null) {
let header = null
if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header
} 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 {
header = new PIXI.Text(this.opts.header, this.headerStyle)
header = new PIXI.Text(this.opts.header, this.headerStyle)
}
header.x = this.opts.padding
@ -1591,13 +1596,15 @@ export default class AbstractPopup extends PIXI.Graphics {
// content
//-----------------
if (this.opts.content != null) {
let content = null
if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle)
} 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 {
content = this.opts.content
}
@ -1614,24 +1621,23 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Should be called to refresh the layout of the popup. Can be used after resizing.
*
*
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
// wanted width &amp; wanted height
//-----------------
const padding = this.opts.padding
const size = this.getInnerSize()
const width = size.width + (2 * padding)
const height = size.height + (2 * padding)
const width = size.width + 2 * padding
const height = size.height + 2 * padding
this.wantedWidth = Math.max(width, this.opts.minWidth)
this.wantedHeight = Math.max(height, this.opts.minHeight)
if (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
}
/**
* Draws the canvas.
*
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
draw() {
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const square =
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const diameter = Math.round(this.opts.radius * 2)
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)
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 {
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
}
this.endFill()
return this
}
/**
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
*
* @private
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let width = 0
let height = 0
@ -1713,17 +1732,16 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height
}
return {width, height}
return { width, height }
}
/**
* Shows the popup (sets his alpha values to 1).
*
*
* @param {callback} [cb] - Executed when show animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
show(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 1,
onComplete: () => {
@ -1735,15 +1753,14 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Hides the popup (sets his alpha values to 0).
*
*
* @param {callback} [cb] - Executed when hide animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
hide(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 0,
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
* a string, a number or a PIXI.Text object.
*
*
* @member {string|number|PIXI.Text}
*/
get header() {
@ -1777,11 +1794,11 @@ export default class AbstractPopup extends PIXI.Graphics {
this.opts.header = value
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string, a number or a PIXI.DisplayObject.
*
*
* @member {string|number|PIXI.DisplayObject}
*/
get content() {
@ -1808,7 +1825,7 @@ export default class AbstractPopup extends PIXI.Graphics {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1444,7 +1444,7 @@ import Theme from './theme.js'
import Progress from './progress.js'
import Modal from './modal.js'
import Message from './message.js'
import {debounce} from '../utils.js'
import { debounce } from '../utils.js'
/**
* 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}
*/
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution
let extendWidth = 1.0
@ -1469,8 +1468,10 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; canvas.height) {
if (
context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; canvas.height
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//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}
*/
export default class PIXIApp extends PIXI.Application {
/**
* 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.
*/
constructor({
width = null, height = null, view = null,
transparent = true, 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 }) {
width = null,
height = null,
view = null,
transparent = true,
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
if (fullScreen) {
@ -1549,7 +1560,7 @@ export default class PIXIApp extends PIXI.Application {
autoResize,
backgroundColor,
forceCanvas,
roundPixels // not needed for PixiJS >= 5
roundPixels // not needed for PixiJS >= 5
})
this.width = width
@ -1572,7 +1583,10 @@ export default class PIXIApp extends PIXI.Application {
console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50)
window.addEventListener('resize', resizeDebounced)
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
document.body.addEventListener(
'orientationchange',
this.checkOrientation.bind(this)
)
}
if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping')
@ -1599,15 +1613,17 @@ export default class PIXIApp extends PIXI.Application {
// GraphQL
if (this.graphql &amp;&amp; typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({
uri: '/graphql'
})
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true,
connectionParams: {}
})
const wsClient = new subscriptions.SubscriptionClient(
`wss://${location.hostname}/subscriptions`,
{
reconnect: true,
connectionParams: {}
}
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface,
@ -1620,7 +1636,11 @@ export default class PIXIApp extends PIXI.Application {
}
// 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.stage.addChild(this._progress)
@ -1645,9 +1665,12 @@ export default class PIXIApp extends PIXI.Application {
checkOrientation(event) {
var value = this.orientation()
if (value != this.orient) {
setTimeout(100, function () {
this.orientationChanged(true)
}.bind(this))
setTimeout(
100,
function() {
this.orientationChanged(true)
}.bind(this)
)
this.orient = value
}
}
@ -1670,9 +1693,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [width] - The width 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
@ -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.
* @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.height = height
this.expandRenderer()
@ -1764,7 +1788,8 @@ export default class PIXIApp extends PIXI.Application {
monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
this.originalMapPositionToPoint =
interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (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).
* To compensate these distortions we need to fix the mapping to the actual
* drawing buffer coordinates.
@ -1791,8 +1816,11 @@ export default class PIXIApp extends PIXI.Application {
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context !== null &amp;&amp; (context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; canvas.height)) {
if (
context !== null &amp;&amp;
(context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
@ -1800,7 +1828,12 @@ export default class PIXIApp extends PIXI.Application {
}
x *= extendWidth
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.
*/
progress(value) {
if (typeof value === 'undefined') {
return this._progress
}
@ -1852,8 +1884,9 @@ export default class PIXIApp extends PIXI.Application {
* @return {Modal} Returns the Modal object.
*/
modal(opts = {}) {
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
let modal = new Modal(
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(modal)
return modal
@ -1866,8 +1899,9 @@ export default class PIXIApp extends PIXI.Application {
* @return {Message} Returns the Message object.
*/
message(opts = {}) {
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
let message = new Message(
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(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?
* @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()
for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
if (loaded) {
loaded.call(this, sprites)
}
}, { resolutionDependent, progress })
if (loaded) {
loaded.call(this, sprites)
}
},
{ resolutionDependent, progress }
)
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?
* @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)) {
resources = [resources]
}
@ -1927,17 +1969,21 @@ export default class PIXIApp extends PIXI.Application {
const loader = this.loader
for (let resource of resources) {
if (!loader.resources[resource]) {
if (resolutionDependent) {
let resolution = Math.round(this.renderer.resolution)
switch (resolution) {
case 2:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@2x.$1')
)
break
case 3:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@3x.$1')
)
break
default:
loader.add(resource)
@ -1980,7 +2026,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
query(query, opts = {}) {
if (typeof query === 'string') {
opts = Object.assign({}, opts, { query })
} else {
@ -2012,7 +2057,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
mutate(mutation, opts = {}) {
if (typeof mutation === 'string') {
opts = Object.assign({}, opts, { mutation })
} else {
@ -2044,7 +2088,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
subscribe(subscription, opts = {}) {
if (typeof subscription === 'string') {
opts = Object.assign({}, opts, { subscription })
} else {
@ -2075,13 +2118,13 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
*
* @return {PIXI.Point} Returns a PIXI.Point.
*/
convertPointFromPageToNode(displayObject, x, y) {
let resolution = this.renderer.resolution
console.log("resolution", resolution)
console.log('resolution', resolution)
let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
pixiGlobal.x /= resolution
pixiGlobal.y /= resolution
@ -2095,7 +2138,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
*
* @return {Point} Returns a DOM Point.
*/
@ -2105,7 +2148,11 @@ export default class PIXIApp extends PIXI.Application {
pixiGlobal.x *= resolution
pixiGlobal.y *= resolution
// 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}
*/
class FpsDisplay extends PIXI.Graphics {
/**
* 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.
*/
constructor(app) {
super()
this.app = app
this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, .6)
.beginFill(0x434f4f, 0.6)
.drawRoundedRect(0, 0, 68, 32, 5)
.endFill()
.position.set(20, 20)
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
}))
this.text = new PIXI.Text(
this.fps,
new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
})
)
this.text.position.set(6, 6)
this.addChild(this.text)
@ -2161,7 +2209,7 @@ class FpsDisplay extends PIXI.Graphics {
* @return {PIXIApp} Returns the PIXIApp object for chaining.
*/
refreshFps() {
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`
this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
return this
}
@ -2179,7 +2227,7 @@ class FpsDisplay extends PIXI.Graphics {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1444,7 +1444,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Badge.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -1452,13 +1452,13 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Add an DisplayObject to the app
* const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle)
*
*
* const badge1 = new Badge({
* object: circle,
* 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}
*/
export default class Badge extends AbstractPopup {
/**
* Creates an instance of a Badge.
*
*
* @constructor
* @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.
@ -1483,15 +1482,18 @@ export default class Badge extends AbstractPopup {
* to display.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
tooltip: null
}, opts)
opts = Object.assign(
{},
{
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
tooltip: null
},
opts
)
super(opts)
@ -1505,7 +1507,7 @@ export default class Badge extends AbstractPopup {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
@ -1514,35 +1516,44 @@ export default class Badge extends AbstractPopup {
* @return {Badge} A reference to the badge for chaining.
*/
setup() {
super.setup()
// tooltip
//-----------------
if (this.opts.tooltip) {
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 {
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)
}
}
return this
}
/**
* Should be called to refresh the layout of the badge. Can be used after resizing.
*
*
* @override
* @return {Badge} A reference to the badge for chaining.
*/
layout() {
super.layout()
this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2
this.content.x =
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
}
@ -1560,7 +1571,7 @@ export default class Badge extends AbstractPopup {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1453,17 +1453,17 @@
* height: 270,
* transparent: false
* }).setup().run()
*
*
* // Add a video sprite
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
* sprite.width = app.size.width
* sprite.height = app.size.height
* app.scene.addChild(sprite)
*
*
* // Create the filter and assign it to the scene
* const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60))
* app.scene.filters = [blurFilter]
*
*
* @class
* @extends PIXI.Filter
* @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.
*/
export default class BlurFilter extends PIXI.Filter {
constructor(shape, blur = 50) {
super()
@ -1499,7 +1498,7 @@ export default class BlurFilter extends PIXI.Filter {
set blur(value) {
this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value
}
/**
* The blur shape.
*
@ -1509,26 +1508,39 @@ export default class BlurFilter extends PIXI.Filter {
return this.tiltShiftXFilter.shape
}
set shape(value) {
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
value
)
}
/**
*
*
* @private
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value
* @returns {Object}
*/
normalize(value) {
let shape = null
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) {
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 {
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
@ -1544,9 +1556,7 @@ export default class BlurFilter extends PIXI.Filter {
* @private
*/
class TiltShiftAxisFilter extends PIXI.Filter {
constructor(shape, blur){
constructor(shape, blur) {
const vertex = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
@ -1613,13 +1623,18 @@ class TiltShiftAxisFilter extends PIXI.Filter {
`
super(vertex, fragment)
if (shape.type === 'circle') {
this.uniforms.shape = 1
this.uniforms.circle = [shape.x, shape.y, shape.r]
} else {
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.delta = new PIXI.Point(0, 0)
@ -1640,7 +1655,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
set blur(value) {
this.uniforms.blur = value
}
/**
* The blur shape.
*
@ -1653,7 +1668,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
return new PIXI.Circle(circle[0], circle[1], circle[2])
} else {
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) {
@ -1662,7 +1682,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [value.x, value.y, value.r]
} else {
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
}
}
</code></pre>
</article>
</section>
@ -1714,7 +1738,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1487,7 +1487,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
*/
export default class Button extends PIXI.Container {
/**
* 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)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
label: null,
x: 0,
y: 0,
minWidth: 44,
minHeight: 44,
padding: theme.padding,
icon: undefined,
iconActive: undefined,
iconPosition: 'left',
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: false,
active: false,
action: null,
beforeAction: null,
afterAction: null,
type: 'default',
align: 'center',
verticalAlign: 'middle',
tooltip: null,
badge: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
label: null,
x: 0,
y: 0,
minWidth: 44,
minHeight: 44,
padding: theme.padding,
icon: undefined,
iconActive: undefined,
iconPosition: 'left',
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: false,
active: false,
action: null,
beforeAction: null,
afterAction: null,
type: 'default',
align: 'center',
verticalAlign: 'middle',
tooltip: null,
badge: null,
visible: true
},
opts
)
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
} 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
}
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
@ -1640,7 +1653,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
setup() {
// Button
//-----------------
let button = new PIXI.Graphics()
@ -1662,18 +1674,27 @@ export default class Button extends PIXI.Container {
// 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) {
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
this.iconActive = this.loadIcon(
this.opts.iconActive,
this.opts.iconColorActive
)
}
// interaction
//-----------------
this.button.on('pointerover', 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 => {
@ -1682,13 +1703,19 @@ export default class Button extends PIXI.Container {
this.button.on('pointerout', 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
this.button.on('pointerdown', 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 => {
@ -1701,7 +1728,10 @@ export default class Button extends PIXI.Container {
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') {
this.active = !this.active
@ -1718,15 +1748,22 @@ export default class Button extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active // calls .layout()
this.active = this.opts.active // calls .layout()
// tooltip
//-----------------
if (this.opts.tooltip) {
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 {
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)
}
}
@ -1734,12 +1771,15 @@ export default class Button extends PIXI.Container {
// badge
//-----------------
if (this.opts.badge) {
let opts = Object.assign({}, {
align: 'right',
verticalAlign: 'top',
offsetLeft: 0,
offsetTop: 0
})
let opts = Object.assign(
{},
{
align: 'right',
verticalAlign: 'top',
offsetLeft: 0,
offsetTop: 0
}
)
if (typeof this.opts.badge === 'string') {
opts = Object.assign(opts, { content: this.opts.badge })
} else {
@ -1749,25 +1789,35 @@ export default class Button extends PIXI.Container {
const badge = new Badge(opts)
switch (opts.align) {
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
break
case 'right':
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
break
case 'bottom':
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
@ -1788,7 +1838,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layout() {
// Clear 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.
*/
layoutInnerContent() {
for (let child of this.content.children) {
switch (this.opts.verticalAlign) {
case 'top':
child.y = 0
break
case 'middle':
child.y = this.content.height / 2 - child.height / 2
break
case 'bottom':
child.y = this.content.height - child.height
break
case 'top':
child.y = 0
break
case 'middle':
child.y = this.content.height / 2 - child.height / 2
break
case 'bottom':
child.y = this.content.height - child.height
break
}
}
@ -1900,29 +1948,30 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layoutContent() {
switch (this.opts.align) {
case 'left':
this.content.x = this.opts.padding
break
case 'center':
this.content.x = ((this._width - this.content.width) / 2)
break
case 'right':
this.content.x = this._width - this.opts.padding - this.content.width
break
case 'left':
this.content.x = this.opts.padding
break
case 'center':
this.content.x = (this._width - this.content.width) / 2
break
case 'right':
this.content.x =
this._width - this.opts.padding - this.content.width
break
}
switch (this.opts.verticalAlign) {
case 'top':
this.content.y = this.opts.padding
break
case 'middle':
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y = this._height - this.opts.padding - this.content.height
break
case 'top':
this.content.y = this.opts.padding
break
case 'middle':
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y =
this._height - this.opts.padding - this.content.height
break
}
return this
@ -1935,16 +1984,32 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
draw() {
this.button.clear()
if (this.active) {
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.button.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} 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.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()
return this
@ -1959,7 +2024,6 @@ export default class Button extends PIXI.Container {
return this._active
}
set active(value) {
this._active = value
if (this._active) {
@ -1984,18 +2048,17 @@ export default class Button extends PIXI.Container {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.button.interactive = false
this.button.buttonMode = false
this.button.alpha = .5
this.button.alpha = 0.5
if (this.icon) {
this.icon.alpha = .5
this.icon.alpha = 0.5
}
if (this.text) {
this.text.alpha = .5
this.text.alpha = 0.5
}
} else {
this.button.interactive = true
@ -2016,7 +2079,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 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.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 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.
*/
loadIcon(icon, color) {
let displayObject = null
if (icon instanceof PIXI.DisplayObject) {
@ -2063,10 +2123,12 @@ export default class Button extends PIXI.Container {
if (this.text) {
size = this.text.height
} 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 sprite = new PIXI.Sprite(iconTexture)
@ -2120,7 +2182,7 @@ export default class Button extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1443,7 +1443,7 @@ import Button from './button.js'
/**
* Class that represents a PixiJS ButtonGroup.
*
*
* @example
* // Create the button group
* 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}
*/
export default class ButtonGroup extends PIXI.Graphics {
/**
* Creates an instance of a ButtonGroup.
*
*
* @constructor
* @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.
@ -1514,50 +1513,53 @@ export default class ButtonGroup extends PIXI.Graphics {
* @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
buttons: [],
minWidth: 44,
minHeight: 44,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: null,
type: 'default', // default, checkbox, radio
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
buttons: [],
minWidth: 44,
minHeight: 44,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: null,
type: 'default', // default, checkbox, radio
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
},
opts
)
this.buttons = []
this._disabled = null
this.visible = this.opts.visible
// setup
@ -1568,21 +1570,19 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// Buttons
//-----------------
let position = 0
for (let it of this.opts.buttons) {
delete it.x
delete it.y
@ -1604,11 +1604,19 @@ export default class ButtonGroup extends PIXI.Graphics {
it.fillActive = it.fillActive || this.opts.fillActive
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
it.stroke = it.stroke || this.opts.stroke
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeWidth =
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.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
it.strokeActiveWidth =
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.textStyleActive = it.textStyleActive || this.opts.textStyleActive
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.verticalAlign = it.verticalAlign || this.opts.verticalAlign
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 => {
if (it.opts.type === 'default') {
it.active = false
@ -1642,18 +1653,25 @@ export default class ButtonGroup extends PIXI.Graphics {
if (it.tooltip) {
if (typeof it.tooltip === 'string') {
it.tooltip = {content: it.tooltip, container: this}
it.tooltip = { content: it.tooltip, container: this }
} else {
it.tooltip = Object.assign({}, {container: this}, it.tooltip)
it.tooltip = Object.assign(
{},
{ container: this },
it.tooltip
)
}
}
let button = new Button(it)
this.addChild(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') {
@ -1673,14 +1691,13 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* 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.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -1691,26 +1708,38 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {ButtonGroup} A reference to the button group for chaining.
*/
draw() {
if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide())
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.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
// 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) => {
if (i > 0) {
@ -1721,7 +1750,6 @@ export default class ButtonGroup extends PIXI.Graphics {
} else {
this.lineTo(it.width, it.y)
}
}
})
@ -1730,10 +1758,10 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
*
*
* @member {boolean}
*/
get disabled() {
@ -1741,32 +1769,29 @@ export default class ButtonGroup extends PIXI.Graphics {
}
set 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.
*
*
* @private
* @return {number} The maximum with of a button of the button group.
*/
getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width)
return Math.max(...widths)
}
/**
* Shows the button group (sets his alpha value to 1).
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
show() {
this.alpha = 1
return this
@ -1774,11 +1799,10 @@ export default class ButtonGroup extends PIXI.Graphics {
/**
* Hides the button group (sets his alpha value to 0).
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
hide() {
this.alpha = 0
return this
@ -1797,7 +1821,7 @@ export default class ButtonGroup extends PIXI.Graphics {
<footer class="content-size">
<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>
</footer>
</div>

View File

@ -2545,7 +2545,7 @@ export class DeepZoomImage extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1469,10 +1469,10 @@
* const front = PIXI.Sprite.fromImage('./assets/front.jpg')
* const back = PIXI.Sprite.fromImage('./assets/back.jpg')
* app.scene.addChild(front)
*
*
* // Create the flippable
* const flippable = new Flippable(front, back, app.renderer)
*
*
* front.interactive = true
* front.on('click', event => flippable.toggle())
*
@ -1482,7 +1482,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
*/
export default class Flippable extends PIXI.projection.Camera3d {
/**
* 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.
*/
constructor(front, back, renderer, opts = {}) {
super()
this.opts = Object.assign({}, {
front,
back,
renderer,
duration: 1,
ease: Power2.easeOut,
shadow: false,
eulerX: 0,
eulerY: 0,
eulerEase: Power1.easeOut,
useBackTransforms: false,
transformEase: Power2.easeOut,
focus: 800,
near: 10,
far: 10000,
orthographic: false
}, opts)
this.opts = Object.assign(
{},
{
front,
back,
renderer,
duration: 1,
ease: Power2.easeOut,
shadow: false,
eulerX: 0,
eulerY: 0,
eulerEase: Power1.easeOut,
useBackTransforms: false,
transformEase: Power2.easeOut,
focus: 800,
near: 10,
far: 10000,
orthographic: false
},
opts
)
// 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
//--------------------
@ -1553,8 +1560,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining.
*/
setup() {
const scale = .5
const scale = 0.5
// filters
//--------------------
@ -1571,16 +1577,18 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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.anchor.set(0.5)
shadow.scale3d.set(.98)
shadow.scale3d.set(0.98)
shadow.alpha = 0.7
shadow.filters = [blurFilter]
shadow.visible = this.opts.shadow
outer.addChild(shadow)
this.objects.shadow = shadow
// inner
//--------------------
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)
front.scale.set(-1 / scale, 1 / scale)
front.renderable = true
front.anchor.set(.5)
front.anchor.set(0.5)
inner.addChild(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)
back.scale.set(1 / scale, 1 / scale)
back.renderable = false
back.anchor.set(.5)
back.anchor.set(0.5)
inner.addChild(back)
this.objects.back = back
@ -1618,7 +1626,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
return this._flipped
}
set flipped(toBack) {
this._flipped = toBack
// references
@ -1639,7 +1646,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
//--------------------
front.texture = this.generateTexture(this.opts.front)
back.texture = this.generateTexture(this.opts.back)
// switch objects and set params for virtual objects
//--------------------
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,
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
height: this.opts.useBackTransforms ? 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
width: this.opts.useBackTransforms
? toObject.width * 2
: fromObject.width * 2,
height: this.opts.useBackTransforms
? 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
@ -1745,20 +1762,24 @@ export default class Flippable extends PIXI.projection.Camera3d {
// camera
//--------------------
new TimelineMax()
.to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease})
.to(this.euler, half, {x: 0, y: 0, ease})
.to(this.euler, half, {
x: this.opts.eulerX,
y: this.opts.eulerY,
ease
})
.to(this.euler, half, { x: 0, y: 0, ease })
// shadow
//--------------------
new TimelineMax()
.to(shadow, half, {alpha: .3, ease})
.to(shadow, half, {alpha: .7, ease})
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
// blurfilter
//--------------------
new TimelineMax()
.to(blurFilter, half, {blur: 6, ease})
.to(blurFilter, half, {blur: .2, ease})
.to(blurFilter, half, { blur: 6, 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.
*/
layout() {
const front = this.objects.front
const back = this.objects.back
const shadow = this.objects.shadow
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
shadow.euler.x = -inner.euler.x
shadow.euler.y = -inner.euler.y
if (this.frontSideInFront) {
front.renderable = true
back.renderable = false
@ -1838,13 +1859,25 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {PIXI.Texture} The generated PIXI.Texture.
*/
generateTexture(displayObject) {
// renderTexture
//--------------------
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
const renderTexture = PIXI.RenderTexture.create(
displayObject.width,
displayObject.height
)
// 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.skew.set(0, 0)
@ -1853,7 +1886,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// render
//--------------------
this.opts.renderer.render(displayObject, renderTexture)
// restore position
displayObject.setTransform(...transform)
@ -1892,7 +1925,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1438,13 +1438,10 @@
</div>
</header>
<article>
<pre id="source-code" class="prettyprint source linenums"><code>
/**
<pre id="source-code" class="prettyprint source linenums"><code>/**
* Defines usefull default text styles.
*/
export class FontInfo {
static get small() {
return app.theme.textStyleSmall
}
@ -1460,15 +1457,13 @@ export class FontInfo {
/**
* Static methods to support hyphenation of lines.
*
*
* @class Hypenate
*/
export class Hypenate {
static splitPart(part) {
let parts = part.split('-')
if (parts.length == 1)
return [part]
if (parts.length == 1) return [part]
let result = []
let last = parts.pop()
for (let p of parts) {
@ -1479,7 +1474,7 @@ export class Hypenate {
}
static splitWord(word) {
if (typeof (language) == 'undefined') {
if (typeof language == 'undefined') {
if (word.indexOf('-') > -1) {
return word.split('-')
}
@ -1496,13 +1491,13 @@ export class Hypenate {
}
static abbreviateLine(label, style, width) {
const pixiStyle = new PIXI.TextStyle(style)
const pixiStyle = new PIXI.TextStyle(style)
let metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
while(metrics.width > width &amp;&amp; label.length > 3) {
label = label.slice(0, label.length-1)
while (metrics.width > width &amp;&amp; label.length > 3) {
label = label.slice(0, label.length - 1)
metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
}
label = label.slice(0, label.length-1)
label = label.slice(0, label.length - 1)
return label + '…'
}
@ -1518,17 +1513,21 @@ export class Hypenate {
if (parts.length == 1) {
newWord += '\n' + word + ' '
x = wordMetrics.width + space.width
}
else {
} else {
let first = true
let lastPart = ''
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) {
newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part
newWord +=
(first || lastPart.endsWith('-')
? '\n'
: '-\n') + part
x = partMetrics.width
}
else {
} else {
newWord += part
x += partMetrics.width
}
@ -1538,8 +1537,7 @@ export class Hypenate {
x += space.width
}
result += newWord + ' '
}
else {
} else {
result += word + ' '
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
* @param {*} text
@ -1571,17 +1569,21 @@ export class Hypenate {
}
class TextLabel extends PIXI.Text {
/**
*Creates an instance of TextLabel.
* @param {string} text - The string that you would like the text to display
* @param {object|PIXI.TextStyle} [style] - The style parameters
* @param {canvas}
* @param {object|PIXI.TextStyle} [style] - The style parameters
* @param {canvas}
* @memberof TextLabel
*/
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
super(text, style, canvas )
this.normFontSize = this.style.fontSize
constructor(
text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize
this.minZoom = minZoom
this.maxZoom = maxZoom
}
@ -1620,10 +1622,9 @@ class TextLabel extends PIXI.Text {
* @extends {PIXI.Graphics}
*/
export class LabeledGraphics extends PIXI.Graphics {
/**
* Creates an instance of LabeledGraphics and defines a local label cache.
*
*
* @memberof LabeledGraphics
*/
constructor() {
@ -1635,14 +1636,13 @@ export class LabeledGraphics extends PIXI.Graphics {
return new TextLabel(label, fontInfo)
}
/**
* Main additional method. Ensures that a text object is created that is cached
* under the given key.
*
* @param {*} key - The cache key
* @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'
* justify: 'top', 'bottom', or 'center'
* maxLines: {integer} truncates the text and adds ellipsis
@ -1653,11 +1653,9 @@ export class LabeledGraphics extends PIXI.Graphics {
* @memberof LabeledGraphics
*/
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
if (attrs.maxWidth &amp;&amp; attrs.maxLines == 1) {
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
}
else {
} else {
if (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)
}
}
if (!this.labels.has(key)) {
let text = this._createText(label, fontInfo)
this.labels.set(key, text)
@ -1681,8 +1679,7 @@ export class LabeledGraphics extends PIXI.Graphics {
for (let k in attrs) {
text[k] = attrs[k]
}
if (label != text.text)
text.text = label
if (label != text.text) text.text = label
// 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
switch (attrs.justify || null) {
@ -1733,17 +1730,30 @@ export class LabeledGraphics extends PIXI.Graphics {
const truncatedLines = lines.slice(0, maxLines)
const lastLine = truncatedLines[truncatedLines.length - 1]
const words = lastLine.split(' ')
const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce((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 })
const wordMetrics = PIXI.TextMetrics.measureText(
`\u00A0\n...\n${words.join('\n')}`,
pixiStyle
)
const [
spaceLength,
dotsLength,
...wordLengths
] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce(
(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}...`
newText = truncatedLines.join('\n')
}
@ -1761,7 +1771,7 @@ export class LabeledGraphics extends PIXI.Graphics {
return this.labels.get(key)
}
/**
/**
* Hides the label with the given key.
* @param {*} key
* @memberof LabeledGraphics
@ -1773,7 +1783,7 @@ export class LabeledGraphics extends PIXI.Graphics {
}
}
/**
/**
* Removes the label with the given key.
* @param {*} key
* @memberof LabeledGraphics
@ -1784,7 +1794,6 @@ export class LabeledGraphics extends PIXI.Graphics {
label.destroy()
}
/**
* Ensures that labels are hidden on clear.
*
@ -1807,7 +1816,6 @@ export class LabeledGraphics extends PIXI.Graphics {
}
}
const labelCache = new Map()
function getTexture(label, fontInfo = FontInfo.normal) {
@ -1825,7 +1833,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
}
class SpriteLabel extends PIXI.Sprite {
constructor(label, fontInfo) {
let texture = getTexture(label, fontInfo)
super(texture)
@ -1845,12 +1852,10 @@ class SpriteLabel extends PIXI.Sprite {
}
export class BitmapLabeledGraphics extends LabeledGraphics {
_createText(label, fontInfo) {
let texture = getTexture(label, fontInfo)
return new SpriteLabel(texture)
}
}
</code></pre>
</article>
@ -1865,7 +1870,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1449,10 +1449,10 @@ import Events from '../events.js'
* @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
*
*
* // Create the list
* const list = new List([elephant1, elephant2])
*
*
* app.scene.addChild(list)
*
* @class
@ -1461,7 +1461,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
*/
export default class List extends PIXI.Container {
/**
* Creates an instance of a Flippable.
*
@ -1483,19 +1482,22 @@ export default class List extends PIXI.Container {
* scroll your list.
*/
constructor(items = [], opts = {}) {
super()
this.opts = Object.assign({}, {
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
}, opts)
this.opts = Object.assign(
{},
{
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
},
opts
)
this.__items = items
this.__dragging = false
@ -1512,7 +1514,6 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Container()
@ -1527,7 +1528,7 @@ export default class List extends PIXI.Container {
// add items
//--------------------
for(let item of this.__items) {
for (let item of this.__items) {
container.addChild(item)
}
@ -1547,7 +1548,9 @@ export default class List extends PIXI.Container {
if (this.opts.app) {
const app = this.opts.app
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 y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
@ -1571,7 +1574,7 @@ export default class List extends PIXI.Container {
setItems(items) {
this.container.removeChildren()
this.__items = items
for(let item of this.__items) {
for (let item of this.__items) {
this.container.addChild(item)
}
this.layout()
@ -1583,14 +1586,12 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
layout() {
const margin = this.opts.margin
let x = margin
let y = margin
for (let item of this.__items) {
item.x = x
item.y = y
@ -1606,13 +1607,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
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
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
default:
this.__items.forEach(it => it.x = margin)
this.__items.forEach(it => (it.x = margin))
break
}
@ -1632,13 +1637,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) {
case 'top':
this.__items.forEach(it => it.y = margin)
this.__items.forEach(it => (it.y = margin))
break
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
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
}
@ -1657,13 +1666,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerWidth() {
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 += 2 * this.opts.margin
@ -1671,13 +1679,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerHeight() {
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 += 2 * this.opts.margin
@ -1686,11 +1693,10 @@ export default class List extends PIXI.Container {
/**
* Resizes the list.
*
*
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
*/
resize(widthOrHeight) {
if (this.opts.orientation === 'horizontal') {
this.opts.width = widthOrHeight
} else {
@ -1701,12 +1707,11 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onStart(event) {
this.__dragging = true
this.capture(event)
@ -1716,21 +1721,19 @@ export default class List extends PIXI.Container {
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, {x: true, y: true})
if (typeof ThrowPropsPlugin != "undefined") {
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
@ -1742,19 +1745,18 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
const throwProps = {}
if (this.opts.orientation === 'horizontal') {
let min = this.opts.width - this.innerWidth
min = min > 0 ? 0 : min
@ -1773,37 +1775,48 @@ export default class List extends PIXI.Container {
}
}
if (typeof ThrowPropsPlugin != "undefined") {
ThrowPropsPlugin.to(this.container.position, {
throwProps,
ease: Strong.easeOut,
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
}, .8, .4)
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.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
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.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
}
}
@ -1815,7 +1828,10 @@ export default class List extends PIXI.Container {
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
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)
}
}
@ -1832,7 +1848,7 @@ export default class List extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1439,11 +1439,11 @@
</header>
<article>
<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.
*
*
* @example
* // Create the PixiJS App
* const app = new PIXIApp({
@ -1451,7 +1451,7 @@ import {InteractivePopup} from './popup.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create a button
* let button = new Button({
* label: 'Click me',
@ -1464,7 +1464,7 @@ import {InteractivePopup} from './popup.js'
* app.scene.addChild(message)
* }
* })
*
*
* // Add the button to the scene
* 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}
*/
export default class Message extends InteractivePopup {
/**
* Creates an instance of a Message.
*
*
* @constructor
* @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.
@ -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.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
app: window.app,
closeButton: false,
minWidth: 280,
minHeight: 100,
margin: theme.margin,
align: 'right', // left, center, right
verticalAlign: 'top', // top, middle, bottom
duration: 5,
autoClose: true,
closeDuration: theme.fast
}, opts)
opts = Object.assign(
{},
{
app: window.app,
closeButton: false,
minWidth: 280,
minHeight: 100,
margin: theme.margin,
align: 'right', // left, center, right
verticalAlign: 'top', // top, middle, bottom
duration: 5,
autoClose: true,
closeDuration: theme.fast
},
opts
)
super(opts)
}
/**
* Relayouts the position of the message box.
*
*
* @return {Message} Returns the message box for chaining.
*/
layout() {
super.layout()
// horizontal
@ -1527,10 +1528,11 @@ export default class Message extends InteractivePopup {
this.x = this.opts.margin
break
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
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
}
@ -1540,21 +1542,21 @@ export default class Message extends InteractivePopup {
this.y = this.opts.margin
break
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
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
}
}
/**
* Shows the message box.
*
*
* @private
*/
show() {
super.show()
if (this.opts.autoClose) {
@ -1577,7 +1579,7 @@ export default class Message extends InteractivePopup {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1439,11 +1439,11 @@
</header>
<article>
<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.
*
*
* @example
* // Create the button and the modal when clicked
* 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}
*/
export default class Modal extends PIXI.Container {
/**
* Creates an instance of a Modal.
*
*
* @constructor
* @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.
@ -1483,20 +1482,23 @@ export default class Modal extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
app: window.app,
backgroundFill: theme.background,
backgroundFillAlpha: .6,
closeOnBackground: true,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
app: window.app,
backgroundFill: theme.background,
backgroundFillAlpha: 0.6,
closeOnBackground: true,
visible: true
},
opts
)
this.id = this.opts.id
@ -1514,15 +1516,14 @@ export default class Modal extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Modal} A reference to the modal for chaining.
*/
setup() {
// interaction
//-----------------
this.interactive = true
@ -1560,21 +1561,23 @@ export default class Modal extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the modal. Can be used after resizing.
*
*
* @return {Modal} A reference to the modal for chaining.
*/
layout() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
// background
//-----------------
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.endFill()
@ -1584,33 +1587,39 @@ export default class Modal extends PIXI.Container {
return this
}
/**
* Shows the modal (sets his alpha values to 1).
*
*
* @return {Modal} A reference to the modal for chaining.
*/
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
}
/**
* Hides the modal (sets his alpha values to 0).
*
*
* @return {Modal} A reference to the modal for chaining.
*/
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
}
/**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string or a PIXI.Text object.
*
*
* @member {string|PIXI.Text}
*/
get header() {
@ -1622,11 +1631,11 @@ export default class Modal extends PIXI.Container {
this.popup.destroy()
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string or a PIXI.DisplayObject.
*
*
* @member {string|PIXI.DisplayObject}
*/
get content() {
@ -1652,7 +1661,7 @@ export default class Modal extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1452,7 +1452,6 @@ import ButtonGroup from './buttongroup.js'
* @extends AbstractPopup
*/
export class InteractivePopup extends AbstractPopup {
/**
* 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.
*/
constructor(opts = {}) {
opts = Object.assign({}, {
closeOnPopup: false,
closeButton: true,
button: null,
buttonGroup: null
}, opts)
opts = Object.assign(
{},
{
closeOnPopup: false,
closeButton: true,
button: null,
buttonGroup: null
},
opts
)
super(opts)
@ -1496,7 +1498,6 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
super.setup()
// interaction
@ -1512,7 +1513,10 @@ export class InteractivePopup extends AbstractPopup {
// 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.height = closeButton.width
closeButton.tint = this.theme.color2
@ -1535,7 +1539,11 @@ export class InteractivePopup extends AbstractPopup {
// maxWidth is set and a closeButton should be displayed
//-----------------
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) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} 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._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 {
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)
@ -1566,21 +1584,23 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
super.layout()
// 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
}
// buttons
//-----------------
if (this._buttons) {
this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
this._buttons.x =
this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y =
this.wantedHeight - this.opts.padding - this._buttons.height
}
return this
@ -1590,13 +1610,12 @@ export class InteractivePopup extends AbstractPopup {
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
*
* @private
* @override
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let size = super.getInnerSize()
if (this._closeButton) {
@ -1604,7 +1623,10 @@ export class InteractivePopup extends AbstractPopup {
}
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
}
@ -1630,7 +1652,6 @@ export class InteractivePopup extends AbstractPopup {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
*/
export default class Popup extends InteractivePopup {
/**
* 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.
*/
constructor(opts = {}) {
opts = Object.assign({}, {
closeButton: false,
minWidth: 0,
minHeight: 0
}, opts)
opts = Object.assign(
{},
{
closeButton: false,
minWidth: 0,
minHeight: 0
},
opts
)
super(opts)
}
@ -1664,7 +1688,7 @@ export default class Popup extends InteractivePopup {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1443,7 +1443,7 @@ import Popup from './popup.js'
/**
* Class that represents a PixiJS PopupMenu.
*
*
* @example
* // Create the button and the modal when clicked
* 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}
*/
export default class PopupMenu extends Popup {
/**
* Creates an instance of a PopupMenu.
*
*
* @constructor
* @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.
@ -1483,38 +1482,42 @@ export default class PopupMenu extends Popup {
* @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
closeOnPopup: true
}, opts)
opts = Object.assign(
{},
{
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
closeOnPopup: true
},
opts
)
super(opts)
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {PopupMenu} A reference to the popupmenu for chaining.
*/
setup() {
// content
//-----------------
const content = new PIXI.Container()
let y = 0
for (let item of this.opts.items) {
let object = null
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 {
object = item.content
}
@ -1523,16 +1526,22 @@ export default class PopupMenu extends Popup {
if (item.action) {
if (item.disabled) {
object.alpha = .5
object.alpha = 0.5
} else {
object.interactive = true
object.buttonMode = true
}
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 => {
TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'})
TweenLite.to(object, this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
})
object.on('pointerup', e => {
item.action.call(object, e, object)
@ -1565,7 +1574,7 @@ export default class PopupMenu extends Popup {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1442,7 +1442,7 @@
/**
* Class that represents a PixiJS Progress.
*
*
* @example
* // Create the progress
* const progress = new Progress({
@ -1458,10 +1458,9 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
*/
export default class Progress extends PIXI.Container {
/**
* Creates an instance of a Progress.
*
*
* @constructor
* @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.
@ -1493,36 +1492,39 @@ export default class Progress extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
app: window.app,
width: null,
height: 2,
margin: 100,
padding: 0,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: 0,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: 0,
strokeActiveAlpha: theme.strokeActiveAlpha,
background: false,
backgroundFill: theme.background,
backgroundFillAlpha: 1,
radius: theme.radius,
destroyOnComplete: true,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
app: window.app,
width: null,
height: 2,
margin: 100,
padding: 0,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: 0,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: 0,
strokeActiveAlpha: theme.strokeActiveAlpha,
background: false,
backgroundFill: theme.background,
backgroundFillAlpha: 1,
radius: theme.radius,
destroyOnComplete: true,
visible: true
},
opts
)
this.id = this.opts.id
@ -1531,7 +1533,7 @@ export default class Progress extends PIXI.Container {
this.barActive = null
this.alpha = 0
this.visible = this.opts.visible
this._progress = 0
@ -1544,15 +1546,14 @@ export default class Progress extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
setup() {
// interaction
//-----------------
this.on('added', e => {
@ -1579,14 +1580,13 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the progress. Can be used after resizing.
*
*
* @return {Progress} A reference to the progress for chaining.
*/
layout() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
@ -1594,7 +1594,10 @@ export default class Progress extends PIXI.Container {
//-----------------
if (this.opts.background) {
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.endFill()
}
@ -1603,15 +1606,14 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
draw() {
this.bar.clear()
this.barActive.clear()
@ -1620,59 +1622,80 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Draws the bar.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
drawBar() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
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
}
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
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)
if (this.radius > 1) {
this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius)
this.bar.drawRoundedRect(
0,
0,
wantedWidth,
wantedHeight,
this.radius
)
} else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
}
this.bar.endFill()
this.bar.x = width / 2 - this.bar.width / 2
this.bar.y = height / 2 - this.bar.height / 2
return this
}
/**
* Draws the active bar.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
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 wantedHeight = this.bar.height - (2 * this.opts.padding)
const barActiveWidth = wantedWidth * this._progress / 100
const barActiveWidth = (wantedWidth * this._progress) / 100
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.barActive.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.barActive.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
if (barActiveWidth > 0) {
if (this.radius > 1) {
this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius)
this.barActive.drawRoundedRect(
0,
0,
barActiveWidth,
wantedHeight,
this.radius
)
} else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
}
@ -1684,39 +1707,41 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Shows the progress (sets his alpha values to 1).
*
*
* @return {Progress} A reference to the progress for chaining.
*/
show() {
TweenLite.to(this, this.theme.fast, {alpha: 1})
TweenLite.to(this, this.theme.fast, { alpha: 1 })
return this
}
/**
* Hides the progress (sets his alpha values to 1).
*
*
* @return {Progress} A reference to the progress for chaining.
*/
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
}
/**
* Gets or sets the progress. Has to be a number between 0 and 100.
*
*
* @member {number}
*/
get progress() {
return this._progress
}
set progress(value) {
value = Math.round(value)
if (value &lt; 0) {
@ -1734,7 +1759,7 @@ export default class Progress extends PIXI.Container {
if (value === 100 &amp;&amp; this.opts.destroyOnComplete) {
TweenLite.to(this, this.theme.fast, {
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">
<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>
</footer>
</div>

View File

@ -1442,7 +1442,7 @@
/**
* Class that represents a PixiJS Scrollview.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -1450,7 +1450,7 @@
* width: 600,
* height: 400
* }).setup().run()
*
*
* // Create the Scrollview
* app.loader
* .add('elephant', './assets/elephant-1.jpg')
@ -1466,38 +1466,34 @@
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
*/
export default class Scrollview extends Scrollbox {
/**
* Creates an instance of a Scrollview.
*
*
* @constructor
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
*/
constructor(opts = {}) {
super(opts)
this.opts = opts
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the Scrollview. Can be used after resizing.
*
*
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
layout() {
this.update()
return this
@ -1516,7 +1512,7 @@ export default class Scrollview extends Scrollbox {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1467,7 +1467,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Slider.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -1475,7 +1475,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the slider
* const slider = new Slider({
* x: 10,
@ -1491,10 +1491,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
*/
export default class Slider extends PIXI.Container {
/**
* Creates an instance of a Slider.
*
*
* @constructor
* @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.
@ -1522,46 +1521,49 @@ export default class Slider extends PIXI.Container {
* @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved.
* @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
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 250,
height: 2,
container: null,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
controlFill: theme.fill,
controlFillAlpha: .5,
controlStroke: theme.primaryColor,
controlStrokeWidth: 2,
controlStrokeAlpha: theme.strokeAlpha,
controlRadius: 16,
orientation: 'horizontal',
min: 0,
max: 100,
value: 0,
disabled: false,
onStart: null,
onUpdate: null,
onComplete: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 250,
height: 2,
container: null,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
controlFill: theme.fill,
controlFillAlpha: 0.5,
controlStroke: theme.primaryColor,
controlStrokeWidth: 2,
controlStrokeAlpha: theme.strokeAlpha,
controlRadius: 16,
orientation: 'horizontal',
min: 0,
max: 100,
value: 0,
disabled: false,
onStart: null,
onUpdate: null,
onComplete: null,
tooltip: null,
visible: true
},
opts
)
this.opts.container = this.opts.container || this
// Validation
@ -1589,7 +1591,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// setup
@ -1600,23 +1602,26 @@ export default class Slider extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
setup() {
// Container events
//-----------------
const container = this.opts.container
this.on('pointermove', e => {
if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
const moveX = this.control.event.data.getLocalPosition(
this.control.parent
).x
this._value = this.pixelToValue(
moveX - this.control.delta - this.opts.controlRadius
)
let x = this.valueToPixel(this._value) + this.opts.controlRadius
this.control.x = x
@ -1628,8 +1633,16 @@ export default class Slider extends PIXI.Container {
if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false)
container.addEventListener('pointercancel', e => this.onEnd(e), false)
container.addEventListener('pointerleave', e => this.onEnd(e), false)
container.addEventListener(
'pointercancel',
e => this.onEnd(e),
false
)
container.addEventListener(
'pointerleave',
e => this.onEnd(e),
false
)
container.addEventListener('pointerout', e => this.onEnd(e), false)
container.addEventListener('mouseup', 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.delta = e.data.getLocalPosition(this.control).x
control.dragging = true
if (this.opts.onStart) {
this.opts.onStart.call(this, e, this)
}
@ -1669,20 +1682,20 @@ export default class Slider extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
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 => {
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.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
@ -1690,15 +1703,17 @@ export default class Slider extends PIXI.Container {
if (this.sliderObj.pointerdowned) {
this.sliderObj.pointerdowned = false
const position = e.data.getLocalPosition(this.control.parent)
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
this.value = this.pixelToValue(
position.x - this.opts.controlRadius
)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}
})
// disabled
//-----------------
this.disabled = this.opts.disabled
// tooltip
//-----------------
if (this.opts.tooltip) {
@ -1715,14 +1730,13 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the slider. Can be used after resizing.
*
*
* @return {Slider} A reference to the slider for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -1733,15 +1747,14 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Draws the slider to the canvas.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
draw() {
const r = this.radius
const cr = this.opts.controlRadius
const w = this.opts.width
@ -1752,12 +1765,16 @@ export default class Slider extends PIXI.Container {
this.sliderObj.clear()
this.sliderObj.beginFill(0xffffff, 0)
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.moveTo(x, y)
this.sliderObj.lineTo(x + w, y)
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.lineTo(x, y + h)
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
this.control.clear()
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
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.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.endFill()
@ -1778,12 +1805,11 @@ export default class Slider extends PIXI.Container {
/**
* Executed, when the slider control movement ended.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
onEnd(e) {
if (this.control.dragging) {
this.control.event = null
this.control.dragging = false
@ -1797,9 +1823,9 @@ export default class Slider extends PIXI.Container {
/**
* Calculates the value for a given pixel.
*
*
* @private
* @param {number} value
* @param {number} value
* @returns {number} The calucalted pixel.
*/
valueToPixel(value) {
@ -1808,14 +1834,17 @@ export default class Slider extends PIXI.Container {
} else if (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.
*
*
* @private
* @param {number} pixel
* @param {number} pixel
* @returns {number} The calucalted value.
*/
pixelToValue(pixel) {
@ -1824,12 +1853,15 @@ export default class Slider extends PIXI.Container {
} else if (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.
*
*
* @member {number}
*/
get value() {
@ -1845,27 +1877,26 @@ export default class Slider extends PIXI.Container {
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.
*
*
* @member {boolean}
*/
get disabled() {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.interactive = false
this.sliderObj.interactive = false
this.control.interactive = false
this.control.buttonMode = false
this.alpha = .5
this.alpha = 0.5
} else {
this.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).
*
*
* @return {Slider} A reference to the slider for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.fillAlpha = 1
this.opts.controlStrokeAlpha = 1
@ -1891,14 +1921,13 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Hides the slider (sets his alpha values to 1).
*
*
* @return {Slider} A reference to the slider for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.fillAlpha = 0
this.opts.controlStrokeAlpha = 0
@ -1922,7 +1951,7 @@ export default class Slider extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1475,7 +1475,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Switch.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -1483,7 +1483,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the switch
* const switch1 = new Switch({
* x: 10,
@ -1499,10 +1499,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
*/
export default class Switch extends PIXI.Container {
/**
* Creates an instance of a Switch.
*
*
* @constructor
* @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.
@ -1542,56 +1541,61 @@ export default class Switch extends PIXI.Container {
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is 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
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * 0.8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
},
opts
)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
this.opts.controlRadius =
this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation
//-----------------
@ -1610,7 +1614,7 @@ export default class Switch extends PIXI.Container {
this.switchObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// animated
@ -1637,15 +1641,14 @@ export default class Switch extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
setup() {
// Switch
//-----------------
let switchObj = new PIXI.Graphics()
@ -1656,7 +1659,7 @@ export default class Switch extends PIXI.Container {
//-----------------
this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2
@ -1664,23 +1667,22 @@ export default class Switch extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
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 => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1})
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
})
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 => {
if (this.opts.beforeAction) {
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) {
this.opts.afterAction.call(this, e, this)
@ -1711,7 +1713,7 @@ export default class Switch extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active
// tooltip
//-----------------
if (this.opts.tooltip) {
@ -1728,14 +1730,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the switch. Can be used after resizing.
*
*
* @return {Switch} A reference to the switch for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -1746,28 +1747,50 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Draws the switch to the canvas.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
draw() {
this.switchObj.clear()
if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.switchObj.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} 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.moveTo(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.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.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.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.arcTo(0, this.opts.height, 0, this.radius, 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
this.control.clear()
if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha)
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
this.control.lineStyle(
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)
} else {
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
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.endFill()
return this
}
/**
* Draws the animation.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
drawAnimated() {
this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
this.switchObj.lineStyle(
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.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.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.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill()
this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.lineStyle(
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.endFill()
return this
}
/**
* Gets or sets the active state.
*
*
* @member {boolean}
*/
get active() {
@ -1829,12 +1891,10 @@ export default class Switch extends PIXI.Container {
}
set active(value) {
this._active = value
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, {
colorProps: {
fill: this.opts.fillActive,
@ -1853,10 +1913,10 @@ export default class Switch extends PIXI.Container {
onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw()
})
} 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, {
colorProps: {
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.
*
*
* @member {boolean}
*/
get disabled() {
@ -1888,14 +1948,13 @@ export default class Switch extends PIXI.Container {
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.switchObj.interactive = false
this.switchObj.buttonMode = false
this.switchObj.alpha = .5
this.control.alpha = .5
this.switchObj.alpha = 0.5
this.control.alpha = 0.5
} else {
this.switchObj.interactive = 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).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1
@ -1924,14 +1982,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Hides the switch (sets his alpha values to 1).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0
@ -1959,7 +2016,7 @@ export default class Switch extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1471,7 +1471,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export default class Theme {
/**
* Creates an instance of a Theme.
*
@ -1521,52 +1520,86 @@ export default class Theme {
* is used for large actived text.
*/
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
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
this.opts = Object.assign({}, {
margin: 12,
padding: 12,
radius: 4,
fast: .25,
normal: .5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: .6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: .6,
strokeActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
}, opts)
this.opts = Object.assign(
{},
{
margin: 12,
padding: 12,
radius: 4,
fast: 0.25,
normal: 0.5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: 0.6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
},
opts
)
// Set textStyle and variants
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,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
}, this.opts.textStyle)
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)
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,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
},
this.opts.textStyle
)
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)
}
@ -1579,7 +1612,6 @@ export default class Theme {
* @return {Theme} Returns a newly created Theme object.
*/
static fromString(theme) {
if (theme &amp;&amp; typeof theme === 'object') {
return theme
}
@ -1611,9 +1643,7 @@ export default class Theme {
* @extends Theme
* @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.
@ -1633,15 +1663,13 @@ export class ThemeDark extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeLight extends Theme {
/**
* Creates an instance of a ThemeLight.
*
* @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}
*/
export class ThemeRed extends Theme {
/**
* Creates an instance of a ThemeRed.
*
* @constructor
*/
constructor() {
super({primaryColor: 0xd92f31})
super({ primaryColor: 0xd92f31 })
}
}
</code></pre>
@ -1687,7 +1713,7 @@ export class ThemeRed extends Theme {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1443,7 +1443,7 @@ import AbstractPopup from './abstractpopup.js'
/**
* Class that represents a PixiJS Tooltip.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -1451,13 +1451,13 @@ import AbstractPopup from './abstractpopup.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Add an DisplayObject to the app
* const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle)
*
*
* const tooltip = new Tooltip({
* object: circle,
* 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}
*/
export default class Tooltip extends AbstractPopup {
/**
* Creates an instance of a Tooltip.
*
*
* @constructor
* @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.
@ -1485,19 +1484,22 @@ export default class Tooltip extends AbstractPopup {
* @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
object: null,
container: null,
offsetLeft: 8,
offsetTop: -8,
delay: 0
}, opts)
opts = Object.assign(
{},
{
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
object: null,
container: null,
offsetLeft: 8,
offsetTop: -8,
delay: 0
},
opts
)
opts.container = opts.container || opts.object
@ -1511,15 +1513,14 @@ export default class Tooltip extends AbstractPopup {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Tooltip} A reference to the tooltip for chaining.
*/
setup() {
super.setup()
// bind events this
@ -1527,7 +1528,7 @@ export default class Tooltip extends AbstractPopup {
this.interactive = true
let mouseoverTooltip = false
this.on('mouseover', e => {
mouseoverTooltip = true
})
@ -1540,7 +1541,7 @@ export default class Tooltip extends AbstractPopup {
})
}
})
// bind events object
//-----------------
const object = this.opts.object
@ -1549,7 +1550,6 @@ export default class Tooltip extends AbstractPopup {
let mouseoverObject = false
object.on('mouseover', e => {
this.timeout = window.setTimeout(() => {
mouseoverObject = true
this.visible = true
@ -1576,15 +1576,14 @@ export default class Tooltip extends AbstractPopup {
return this
}
/**
* Calculates and sets the position of the tooltip.
*
*
* @private
* @return {Tooltip} A reference to the tooltip for chaining.
*/
setPosition(e) {
const position = e.data.getLocalPosition(this.opts.container)
this.x = position.x + this.opts.offsetLeft
@ -1606,7 +1605,7 @@ export default class Tooltip extends AbstractPopup {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

View File

@ -1444,14 +1444,14 @@ import Theme from './theme.js'
/**
* Class that represents a PixiJS Volatile.
*
*
* @example
* const app = new PIXIApp({
* view: canvas,
* width: 900,
* height: 250
* }).setup().run()
*
*
* const button = new Button({
* label: 'Volatile!',
* action: () => {
@ -1462,17 +1462,16 @@ import Theme from './theme.js'
* })
* }
* })
*
*
* app.scene.addChild(button)
*
* @class
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
*/
export default class Volatile {
/**
* Creates an instance of a Volatile.
*
*
* @constructor
* @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.
@ -1486,21 +1485,24 @@ export default class Volatile {
* @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
object: null,
direction: 'top', // top, right, bottom, left
onStart: null,
onComplete: null,
distance: 160,
duration: 1.5,
ease: Quad.easeOut,
destroyOnComplete: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
object: null,
direction: 'top', // top, right, bottom, left
onStart: null,
onComplete: null,
distance: 160,
duration: 1.5,
ease: Quad.easeOut,
destroyOnComplete: true
},
opts
)
this.id = this.opts.id
@ -1522,38 +1524,34 @@ export default class Volatile {
//-----------------
this.run()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Volatile} A reference to the volatile for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the volatile. Can be used after resizing.
*
*
* @return {Volatile} A reference to the volatile for chaining.
*/
layout() {
return this
}
/**
* Starts the volatile animation.
*
*
* @private
* @return {Volatile} A reference to the volatile for chaining.
*/
run() {
for (let object of this.objects) {
let x = object.x
let y = object.y
@ -1584,13 +1582,12 @@ export default class Volatile {
}
},
onComplete: () => {
if (this.opts.onComplete) {
this.opts.onComplete.call(object, object)
}
if (this.opts.destroyOnComplete) {
object.destroy({children: true})
object.destroy({ children: true })
}
}
})
@ -1612,7 +1609,7 @@ export default class Volatile {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.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>
</footer>
</div>

File diff suppressed because it is too large Load Diff

View File

@ -3,6 +3,7 @@ const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const concat = require('gulp-concat')
const replace = require('gulp-replace')
const prettier = require('gulp-prettier')
function vendors() {
return src(
@ -52,4 +53,28 @@ function preload() {
.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)

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) {
_inherits(Bootstrap, _Object);
var Bootstrap = (function(_Object) {
_inherits(Bootstrap, _Object)
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, [{
key: 'import',
value: function _import(src) {
var _this2 = this;
_createClass(Bootstrap, null, [
{
key: 'import',
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')) {
this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js', function () {
_this2.load(src, null, null);
}, null);
} else if (this.isModernSafari || this.isModernChrome) {
this.load(src, callback);
} else {
this.load(this.baseUrl + '/3rdparty/systemjs/system.js', function () {
SystemJS.config(_this2.systemjsConfig);
SystemJS.import(src);
}, 'script');
}
}
}, {
key: 'load',
value: function load(src, callback) {
var _this3 = this;
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;');
if (src.endsWith('babel.js')) {
this.load(
this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
function() {
_this2.load(src, null, null)
},
null
)
} else if (this.isModernSafari || this.isModernChrome) {
this.load(src, callback)
} else {
this.load(
this.baseUrl + '/3rdparty/systemjs/system.js',
function() {
SystemJS.config(_this2.systemjsConfig)
SystemJS.import(src)
},
'script'
)
}
}
}
}, {
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');
},
{
key: 'load',
value: function load(src, callback) {
var _this3 = this
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 type =
arguments.length > 2 && arguments[2] !== undefined
? arguments[2]
: 'module'
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 {
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
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',
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;
}(Object);
return Bootstrap
})(Object)
window.Bootstrap = Bootstrap;
window.Bootstrap = Bootstrap

69
lib/bootstrap.js vendored
View File

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

View File

@ -2,7 +2,15 @@ import App from './app.js'
import Doctest from './doctest.js'
import Errors from './errors.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 Interface from './interface.js'
import Logging from './logging.js'
@ -14,9 +22,44 @@ import { Capabilities, CapabilitiesTests } from './capabilities.js'
import { EventRecorder } from './events.js'
import { FrameContainer, FrameTarget } from './frames.js'
import { Inspect } from './inspect.js'
import { PointMap, 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 {
PointMap,
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 Card from './card/card.js'

View File

@ -1,7 +1,6 @@
/** Report capabilities with guaranteed values.
*/
export class Capabilities {
/** Returns the browser userAgent.
@return {string}
*/
@ -14,7 +13,7 @@ export class Capabilities {
@return {boolean}
*/
static get isMobile() {
return (/Mobi/.test(navigator.userAgent))
return /Mobi/.test(navigator.userAgent)
}
/** Tests whether the app is running on a iOS device.
@ -22,7 +21,7 @@ export class Capabilities {
@return {boolean}
*/
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.
@ -31,28 +30,44 @@ export class Capabilities {
@return {boolean}
*/
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.
*
*
* source: https://github.com/cheton/is-electron
*/
static get isElectron() {
// 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
}
// 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
}
// 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
}
@ -70,52 +85,56 @@ export class Capabilities {
@return {boolean}
*/
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
@return {boolean}
*/
static supportsMouseEvents() {
return typeof(window.MouseEvent) != 'undefined'
return typeof window.MouseEvent != 'undefined'
}
/** Returns true if touch events are supported
@return {boolean}
*/
static supportsTouchEvents() {
return typeof(window.TouchEvent) != 'undefined'
return typeof window.TouchEvent != 'undefined'
}
/** Returns true if pointer events are supported
@return {boolean}
*/
static supportsPointerEvents() {
return typeof(window.PointerEvent) != 'undefined'
return typeof window.PointerEvent != 'undefined'
}
/** Returns true if DOM templates are supported
@return {boolean}
*/
static supportsTemplate() {
return 'content' in document.createElement('template');
return 'content' in document.createElement('template')
}
}
/** Basic tests for Capabilities.
*/
export class CapabilitiesTests {
static testConfirm() {
let bool = confirm('Please confirm')
document.getElementById('demo').innerHTML = (bool) ? 'Confirmed' : 'Not confirmed'
document.getElementById('demo').innerHTML = bool
? 'Confirmed'
: 'Not confirmed'
}
static testPrompt() {
let person = prompt('Please enter your name', 'Harry Potter')
if (person != null) {
demo.innerHTML =
'Hello ' + person + '! How are you today?'
demo.innerHTML = 'Hello ' + person + '! How are you today?'
}
}
@ -130,7 +149,9 @@ export class CapabilitiesTests {
}
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
}

File diff suppressed because it is too large Load Diff

View File

@ -4,17 +4,15 @@
let _HighlightEnabled = true
let _CircleIds = 0
/** Helper method to round values with one digit precision */
function round(value) {
return Math.round(parseFloat(value) * 10) / 10
}
/**
* A namespace with static functions to expand and shrink highlighted image regions.
* Assumes an SVG image with the following structure:
*
*
* <svg viewbox="0 0 100 100">
* <!-- The defs section must be defined and cannot be generated in JavaScript -->
* <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="60" cy="67" r="8" stroke-width="0.5" />
* </svg>
*
*
* 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.
*
*
* @class Highlight
* @extends {Object}
*/
export default class Highlight extends Object {
static disableAnimations() {
_HighlightEnabled = false
let expanded = document.querySelectorAll('.expanded')
@ -64,7 +61,10 @@ export default class Highlight extends Object {
if (circle.classList.length == 0) {
circle.removeAttribute('class')
}
if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
if (
circle.hasAttribute('id') &&
circle.getAttribute('id').startsWith('@@')
) {
circle.removeAttribute('id')
}
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 } = {}) {
if (obj == null)
return
static expand(
obj,
{ scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
) {
if (obj == null) return
//console.log("expand")
obj.classList.add('zooming')
TweenLite.to(obj, duration, {
@ -102,8 +104,7 @@ export default class Highlight extends Object {
static shrink(obj, { duration = 0.5, stroke = 2 } = {}) {
//console.log("shrink")
if (obj == null)
return
if (obj == null) return
obj.classList.add('zooming')
TweenLite.to(obj, duration, {
scale: 1,
@ -141,7 +142,6 @@ export default class Highlight extends Object {
let circleGroup = circle.parentNode
let image = svgRoot.querySelector('image')
let stroke = parseFloat(circleGroup.getAttribute('stroke-width') || 6)
let defs = svgRoot.querySelector('defs')
@ -160,15 +160,16 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke })
return
}
//console.log("animate called while zooming out -> expand")
}
else if (circle.classList.contains('zooming')) {
//console.log("animate called while zooming out -> expand")
} else if (circle.classList.contains('zooming')) {
//console.log("animate called while zooming in -> shrink")
this.shrink(circle, { stroke })
this.shrink(maskImage, { stroke })
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) {
//console.log("shrinking all circles")
this.shrink(c, { stroke })
@ -188,11 +189,10 @@ export default class Highlight extends Object {
return false
}
static openHighlight(target, {
animation = 0.5,
scale = 2,
onExpanded = null
} = {}) {
static openHighlight(
target,
{ animation = 0.5, scale = 2, onExpanded = null } = {}
) {
if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!')
return
@ -206,7 +206,10 @@ export default class Highlight extends Object {
let image = parent.querySelector(imageId)
if (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)
}
this._bringToFront(target)
@ -215,10 +218,15 @@ export default class Highlight extends Object {
let image = svgRoot.querySelector('image')
// 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)
TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` })
TweenLite.set(maskImage, {
transformOrigin: `${center.x}% ${center.y}%`
})
TweenLite.set(target, { transformOrigin: '50% 50%' })
TweenLite.to([target, maskImage], animation, {
@ -233,8 +241,7 @@ export default class Highlight extends Object {
static toggleHighlight(node) {
if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node)
}
else {
} else {
Highlight.openHighlight(node)
}
}
@ -244,7 +251,12 @@ export default class Highlight extends Object {
if (target && parent) {
parent.removeChild(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 } = {}) {
@ -258,13 +270,15 @@ export default class Highlight extends Object {
let maskImage = svgRoot.getElementById(maskImageId)
if (!mask || !maskImage)
[mask, maskImage] = Highlight._createSVGMask(circle, { svgRoot, image, id })
[mask, maskImage] = Highlight._createSVGMask(circle, {
svgRoot,
image,
id
})
return [mask, maskImage]
}
/**
* Creates an SVG mask for a provided svgElement.
*
@ -277,8 +291,10 @@ export default class Highlight extends Object {
* @returns
* @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
// simply pass them in, as it's likely they were already retrieved beforehand.
if (svgRoot == null) svgRoot = element.closest('svg')
@ -316,7 +332,6 @@ export default class Highlight extends Object {
let height = bbox.height
if (maskImage == null) {
maskImage = document.createElementNS(svg, 'image')
maskImage.style.pointerEvents = 'none'
maskImage.setAttribute('id', maskImageId)
@ -369,8 +384,7 @@ export default class Highlight extends Object {
}
static animate(event) {
if (!_HighlightEnabled)
return
if (!_HighlightEnabled) return
event.stopPropagation()
Highlight.animateCircle(event.target)
@ -394,4 +408,3 @@ export default class Highlight extends Object {
}
Highlight.expandedClass = 'expanded'

View File

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

View File

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

View File

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

View File

@ -5,8 +5,10 @@ import Events from '../events.js'
import { Points } from '../utils.js'
export default class CardWrapper extends Object {
constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
constructor(
domNode,
{ triggerSVGClicks = true, allowClickDistance = 44 } = {}
) {
super()
this.domNode = domNode
this.triggerSVGClicks = triggerSVGClicks
@ -16,42 +18,43 @@ export default class CardWrapper extends Object {
}
handleClicks() {
this.domNode.addEventListener('click', event => {
if (event.isTrusted) {
Events.stop(event)
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
this.tap(event, "triggerSVGClicks")
this.domNode.addEventListener(
'click',
event => {
if (event.isTrusted) {
Events.stop(event)
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
this.tap(event, 'triggerSVGClicks')
}
}
}
}, true)
},
true
)
}
handleClicksAsTaps() {
this.domNode.addEventListener('click', event => {
if (event.isTrusted) {
Events.stop(event)
}
this.tap(event)
}, true)
this.domNode.addEventListener(
'click',
event => {
if (event.isTrusted) {
Events.stop(event)
}
this.tap(event)
},
true
)
}
isClickable(node) {
if (node == null)
return false
if (node.tagName == 'A' && node.hasAttribute("href"))
return true
if (node.hasAttribute("onclick"))
return true
if (node == null) return false
if (node.tagName == 'A' && node.hasAttribute('href')) return true
if (node.hasAttribute('onclick')) return true
return false
}
hasClickHandler(node) {
if (node == null)
return false
if (this.tapNodes.has(node))
return true
if (node == null) return false
if (this.tapNodes.has(node)) return true
for (let [selector, handler] of this.tapHandler.entries()) {
for (let obj of this.domNode.querySelectorAll(selector)) {
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
* Therefore we can only detect the following standard cases:
* 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() {
let result = []
for (let node of this.domNode.querySelectorAll("*")) {
if (this.isClickable(node))
result.push(node)
if (this.hasClickHandler(node))
result.push(node)
for (let node of this.domNode.querySelectorAll('*')) {
if (this.isClickable(node)) result.push(node)
if (this.hasClickHandler(node)) result.push(node)
}
return result
}
@ -84,14 +85,26 @@ export default class CardWrapper extends Object {
nearestActive(event) {
let element = this.domNode
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 clickRects = activeNodes.map(link => {
let rect = link.getBoundingClientRect()
let topLeft = Points.fromPageToNode(element, rect)
let center = Points.fromPageToNode(element, { 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 center = Points.fromPageToNode(element, {
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 = []
@ -147,12 +160,12 @@ export default class CardWrapper extends Object {
return false
}
tap(event, calledBy='unknown') {
tap(event, calledBy = 'unknown') {
if (event.isTrusted) {
let node = this.nearestActive(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)) {
node = this.nearestActive(event)
this.nodeTapped(node, event)
@ -161,13 +174,10 @@ export default class CardWrapper extends Object {
}
onTap(objOrSelector, handler) {
if (typeof (objOrSelector) == 'string') {
if (typeof objOrSelector == 'string') {
this.tapHandler.set(objOrSelector, handler)
}
else {
} else {
this.tapNodes.set(objOrSelector, handler)
}
}
}

View File

@ -5,12 +5,15 @@
var docTestLogMessages = []
Array.prototype.equals = function(array) {
return this.length == array.length &&
this.every( function(this_i,i) { return this_i == array[i] } )
return (
this.length == array.length &&
this.every(function(this_i, i) {
return this_i == array[i]
})
)
}
export default class Doctest {
static assert(value) {
if (!value) {
throw new Error('Assertion violated')
@ -18,34 +21,42 @@ export default class Doctest {
}
static pprint(obj) {
if (obj === null)
return 'null'
if (obj === null) return 'null'
let stringified = obj.toString()
if (stringified == '[object Object]')
return JSON.stringify(obj)
if (stringified == '[object Object]') return JSON.stringify(obj)
return stringified
}
static expect(expr, value) {
if (this.pprint(expr) != this.pprint(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) {
let index = error.toString().indexOf(message)
if (index < 0) {
throw new Error('got `' + message + '` but expected `' + error + '`.')
throw new Error(
'got `' + message + '` but expected `' + error + '`.'
)
}
}
static expectLog(...messages) {
// if (!docTestLogMessages.equals(messages)) {
docTestLogMessages.forEach((msg, i) => {
if (msg != messages[i])
throw new Error('Unexpected log message: `' + messages[i] + '`.')
})
// if (!docTestLogMessages.equals(messages)) {
docTestLogMessages.forEach((msg, i) => {
if (msg != messages[i])
throw new Error(
'Unexpected log message: `' + messages[i] + '`.'
)
})
// throw new Error('Uups')
//}
}
@ -55,37 +66,35 @@ export default class Doctest {
}
static highlight(code) {
if (typeof(hljs) == 'undefined')
return code
if (typeof hljs == 'undefined') return code
return hljs.highlight('javascript', code)
}
static stripLeadingLines(code) {
let result = []
let informative = false
for(let line of code.split('\n')) {
for (let line of code.split('\n')) {
if (line.trim().length > 0) {
informative = true
}
if (informative)
result.push(line)
if (informative) result.push(line)
}
return result.join('\n')
}
static event(type='mouse', {clientX = 0, clientY = 0} = {}) {
static event(type = 'mouse', { clientX = 0, clientY = 0 } = {}) {
if (type.startsWith('mouse')) {
return new MouseEvent(type, { clientX, clientY })
}
return { type, clientX, clientY }
}
static run(replaceExpect=false) {
if (typeof(hljs) != 'undefined') {
static run(replaceExpect = false) {
if (typeof hljs != 'undefined') {
hljs.initHighlighting()
}
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 code = this.stripLeadingLines(doctest.innerHTML)
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 lines = text.value.split('\n')
let better = []
for(let line of lines) {
if (replaceExpect && line.trim().startsWith('Doctest.expect(')) {
for (let line of lines) {
if (
replaceExpect &&
line.trim().startsWith('Doctest.expect(')
) {
line = line.replace(/Doctest\.expect\(/, '>>> ').trim()
if (line.endsWith(')') || line.endsWith(',')) {
line = line.slice(0, -1)

View File

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

View File

@ -1,6 +1,4 @@
export default class Events {
static stop(event) {
event.preventDefault()
event.stopPropagation()
@ -20,8 +18,7 @@ export default class Events {
}
static isCaptured(event) {
if (event.__capturedBy)
return true
if (event.__capturedBy) return true
return false
}
@ -30,7 +27,7 @@ export default class Events {
}
static isPointerDown(event) {
// According to
// According to
// https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
// pointer events use the buttons feature to represent pressed buttons
return event.buttons
@ -77,8 +74,15 @@ export default class Events {
for (let i = 0; i < targets.length; i++) {
let t = targets[i]
let touchTarget = document.elementFromPoint(t.pageX, t.pageY)
let touch = new Touch(undefined, touchTarget, t.identifier,
t.pageX, t.pageY, t.screenX, t.screenY)
let touch = new Touch(
undefined,
touchTarget,
t.identifier,
t.pageX,
t.pageY,
t.screenX,
t.screenY
)
touches.push(touch)
}
return new TouchList(...touches)
@ -168,8 +172,7 @@ export default class Events {
for (let key of keys) {
try {
result += ' ' + key + ':' + event[key]
}
catch (e) {
} catch (e) {
console.log('Invalid key: ' + key)
}
}
@ -179,11 +182,15 @@ export default class Events {
static compareExtractedWithSimulated() {
var diffs = 0
if (this.extracted.length != this.simulated.length) {
alert('Unequal length of extracted [' + this.extracted.length +
'] and simulated events [' + this.simulated.length + '].')
alert(
'Unequal length of extracted [' +
this.extracted.length +
'] and simulated events [' +
this.simulated.length +
'].'
)
diffs += 1
}
else {
} else {
for (let i = 0; i < this.extracted.length; i++) {
var extracted = this.extracted[i]
var simulated = this.simulated[i]
@ -238,8 +245,10 @@ export default class Events {
div.innerHTML = line
this.popup.appendChild(div)
}
Elements.setStyle(this.popup,
{ left: event.clientX + 'px', top: event.clientY + 'px' })
Elements.setStyle(this.popup, {
left: event.clientX + 'px',
top: event.clientY + 'px'
})
}
}
@ -250,7 +259,6 @@ Events.simulated = []
Events.simulationRunning = false
export class EventRecorder {
constructor() {
this.recording = []
this.recorded = []
@ -262,8 +270,7 @@ export class EventRecorder {
if (length == 0) {
this.startTime = event.timeStamp
Events.reset()
}
else {
} else {
let last = this.recording[length - 1]
if (event.timeStamp < last.time) {
console.log('warning: wrong temporal order')
@ -291,7 +298,7 @@ export class EventRecorder {
if (this.step < this.recorded.length) {
let { type, time, constructor, data } = this.recorded[this.step]
Events.simulateEvent(type, constructor, data)
this.step += 1
let dt = 0
if (this.step < this.recorded.length) {
@ -305,8 +312,7 @@ export class EventRecorder {
let delta = Math.round(dt)
setTimeout(() => this.replay(whileCondition, onComplete), delta)
}
}
else {
} else {
console.log('Played ' + this.step + ' events' + onComplete)
Events.simulationRunning = false
if (onComplete != null) {
@ -316,4 +322,3 @@ export class EventRecorder {
}
}
}

View File

@ -31,12 +31,10 @@ export class CardLoader {
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
this.addedNode = null
console.log({
width,
height,
maxWidth,
maxHeight,
maxHeight
})
}
@ -152,11 +150,13 @@ export class HTMLLoader extends CardLoader {
domNode.innerHTML = xhr.response
this.addedNode = domNode.firstElementChild
let { width, height } = this.size(this.addedNode)
console.log("HTMLLoader.load", { added: this.addedNode, width, height })
if (width)
this.wantedWidth = width || this.wantedWidth
if (height)
this.wantedHeight = height || this.wantedHeight
console.log('HTMLLoader.load', {
added: this.addedNode,
width,
height
})
if (width) this.wantedWidth = width || this.wantedWidth
if (height) this.wantedHeight = height || this.wantedHeight
resolve(this)
}
xhr.onerror = e => {
@ -169,7 +169,7 @@ export class HTMLLoader extends CardLoader {
/**
* Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes.
*
*
* Overwrite this method if you want to extract values from other infos.
*
* @returns { width: int, height: int }
@ -248,7 +248,7 @@ export class DOMFlip {
this.cardWrapper = dom.querySelector('#' + this.id)
let front = this.cardWrapper.querySelector('.front')
this.frontLoader.load(front).then(loader => {
this.frontLoaded(loader).then((obj) => {
this.frontLoaded(loader).then(obj => {
if (this.onLoaded) this.onLoaded()
resolve(this)
})
@ -275,7 +275,9 @@ export class DOMFlip {
scalable: this.scalable,
rotatable: this.rotatable,
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) {
const removeOnMinScale = function () {
const removeOnMinScale = function() {
if (scatter.scale <= scatter.minScale) {
this.flippable.close()
@ -294,7 +296,9 @@ export class DOMFlip {
//Remove callback
if (scatter.onTransform) {
let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale)
let callbackIdx = scatter.onTransform.indexOf(
removeOnMinScale
)
scatter.onTransform.splice(callbackIdx, 1)
}
}
@ -325,7 +329,7 @@ export class DOMFlip {
}
setupFlippable(flippable, loader) {
console.log("setupFlippable", loader.wantedWidth)
console.log('setupFlippable', loader.wantedWidth)
flippable.wantedWidth = loader.wantedWidth
flippable.wantedHeight = loader.wantedHeight
flippable.wantedScale = loader.scale
@ -335,12 +339,10 @@ export class DOMFlip {
}
start({ targetCenter = null } = {}) {
console.log("DOMFlip.start", targetCenter)
console.log('DOMFlip.start', targetCenter)
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter })
}
else {
} else {
let back = this.cardWrapper.querySelector('.back')
let flippable = this.flippable
this.backLoader.load(back).then(loader => {
@ -487,7 +489,7 @@ export class DOMFlippable {
clickInfo() {
this.bringToFront()
console.log("clickInfo")
console.log('clickInfo')
this.infoBtn.click()
}
@ -585,14 +587,14 @@ export class DOMFlippable {
let y = this.flipped ? yy : this.startY
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, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
console.log("start end", this.flipDuration)
console.log('start end', this.flipDuration)
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn)
@ -602,7 +604,6 @@ export class DOMFlippable {
this.onFrontFlipped(this)
}
} else {
if (this.onBackFlipped == null) {
this.enable(this.infoBtn, this.fadeDuration)
this.enable(this.closeBtn, this.fadeDuration)
@ -625,7 +626,7 @@ export class DOMFlippable {
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/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -20,15 +20,14 @@ try {
/** Basic class for app specific logging requirements.
* 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
* (e.g. display update loops at 60fps, programmatic loops, ...).
*
*
* The logging handlers can be overwritten by calling the static
* setup method.
*/
export default class Logging {
/** Static log function.
* @param {*} message
*/
@ -37,9 +36,9 @@ export default class Logging {
}
/**
* Static warn function.
* Static warn function.
* Emits each warning only once per session.
* @param {*} message
* @param {*} message
*/
static warn(message) {
if (!logMessages.has(message)) {
@ -49,10 +48,10 @@ export default class Logging {
}
/**
* Static error function.
* Emits each error message only once per session.
* @param {*} message
*/
* Static error function.
* Emits each error message only once per session.
* @param {*} message
*/
static error(message) {
if (!logMessages.has(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.warn = warn
logHandlers.error = error

View File

@ -11,10 +11,9 @@ import Theme from './theme.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
export default class AbstractPopup extends PIXI.Graphics {
/**
* Creates an instance of an AbstractPopup (only for internal use).
*
*
* @constructor
* @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.
@ -45,34 +44,37 @@ export default class AbstractPopup extends PIXI.Graphics {
* to landscape, the popup cannot be displayed in portrait mode.
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
},
opts
)
this.id = this.opts.id
@ -81,10 +83,12 @@ export default class AbstractPopup extends PIXI.Graphics {
if (this.opts.maxWidth) {
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.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
this.textStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
}
this.alpha = 0
@ -99,7 +103,7 @@ export default class AbstractPopup extends PIXI.Graphics {
// padding
this.innerPadding = this.opts.padding * 1.5
// interaction
//-----------------
this.interactive = true
@ -107,15 +111,14 @@ export default class AbstractPopup extends PIXI.Graphics {
this.show()
})
}
/**
* Creates the framework and instantiates everything.
*
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
// position
//-----------------
this.sy = this.opts.padding
@ -123,15 +126,17 @@ export default class AbstractPopup extends PIXI.Graphics {
// header
//-----------------
if (this.opts.header != null) {
let header = null
if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header
} 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 {
header = new PIXI.Text(this.opts.header, this.headerStyle)
header = new PIXI.Text(this.opts.header, this.headerStyle)
}
header.x = this.opts.padding
@ -151,13 +156,15 @@ export default class AbstractPopup extends PIXI.Graphics {
// content
//-----------------
if (this.opts.content != null) {
let content = null
if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle)
} 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 {
content = this.opts.content
}
@ -174,24 +181,23 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Should be called to refresh the layout of the popup. Can be used after resizing.
*
*
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
// wanted width & wanted height
//-----------------
const padding = this.opts.padding
const size = this.getInnerSize()
const width = size.width + (2 * padding)
const height = size.height + (2 * padding)
const width = size.width + 2 * padding
const height = size.height + 2 * padding
this.wantedWidth = Math.max(width, this.opts.minWidth)
this.wantedHeight = Math.max(height, this.opts.minHeight)
if (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
}
/**
* Draws the canvas.
*
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
draw() {
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const square =
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const diameter = Math.round(this.opts.radius * 2)
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)
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 {
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
}
this.endFill()
return this
}
/**
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
*
* @private
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let width = 0
let height = 0
@ -273,17 +292,16 @@ export default class AbstractPopup extends PIXI.Graphics {
height += this._content.height
}
return {width, height}
return { width, height }
}
/**
* Shows the popup (sets his alpha values to 1).
*
*
* @param {callback} [cb] - Executed when show animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
show(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 1,
onComplete: () => {
@ -295,15 +313,14 @@ export default class AbstractPopup extends PIXI.Graphics {
return this
}
/**
* Hides the popup (sets his alpha values to 0).
*
*
* @param {callback} [cb] - Executed when hide animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
hide(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 0,
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
* a string, a number or a PIXI.Text object.
*
*
* @member {string|number|PIXI.Text}
*/
get header() {
@ -337,11 +354,11 @@ export default class AbstractPopup extends PIXI.Graphics {
this.opts.header = value
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string, a number or a PIXI.DisplayObject.
*
*
* @member {string|number|PIXI.DisplayObject}
*/
get content() {

View File

@ -4,7 +4,7 @@ import Theme from './theme.js'
import Progress from './progress.js'
import Modal from './modal.js'
import Message from './message.js'
import {debounce} from '../utils.js'
import { debounce } from '../utils.js'
/**
* 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}
*/
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
mapPositionToPoint(point, x, y) {
let resolution = this.renderer.resolution
let extendWidth = 1.0
@ -29,8 +28,10 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height) {
if (
context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//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}
*/
export default class PIXIApp extends PIXI.Application {
/**
* 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.
*/
constructor({
width = null, height = null, view = null,
transparent = true, 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 }) {
width = null,
height = null,
view = null,
transparent = true,
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
if (fullScreen) {
@ -109,7 +120,7 @@ export default class PIXIApp extends PIXI.Application {
autoResize,
backgroundColor,
forceCanvas,
roundPixels // not needed for PixiJS >= 5
roundPixels // not needed for PixiJS >= 5
})
this.width = width
@ -132,7 +143,10 @@ export default class PIXIApp extends PIXI.Application {
console.log('App is in fullScreen mode or autoResize mode')
const resizeDebounced = debounce(event => this.resize(event), 50)
window.addEventListener('resize', resizeDebounced)
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
document.body.addEventListener(
'orientationchange',
this.checkOrientation.bind(this)
)
}
if (monkeyPatchMapping) {
console.log('Using monkey patched coordinate mapping')
@ -159,15 +173,17 @@ export default class PIXIApp extends PIXI.Application {
// GraphQL
if (this.graphql && typeof apollo !== 'undefined') {
const networkInterface = apollo.createNetworkInterface({
uri: '/graphql'
})
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true,
connectionParams: {}
})
const wsClient = new subscriptions.SubscriptionClient(
`wss://${location.hostname}/subscriptions`,
{
reconnect: true,
connectionParams: {}
}
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface,
@ -180,7 +196,11 @@ export default class PIXIApp extends PIXI.Application {
}
// 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.stage.addChild(this._progress)
@ -205,9 +225,12 @@ export default class PIXIApp extends PIXI.Application {
checkOrientation(event) {
var value = this.orientation()
if (value != this.orient) {
setTimeout(100, function () {
this.orientationChanged(true)
}.bind(this))
setTimeout(
100,
function() {
this.orientationChanged(true)
}.bind(this)
)
this.orient = value
}
}
@ -230,9 +253,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {number} [width] - The width 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
@ -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.
* @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.height = height
this.expandRenderer()
@ -324,7 +348,8 @@ export default class PIXIApp extends PIXI.Application {
monkeyPatchPixiMapping() {
if (this.originalMapPositionToPoint === null) {
let interactionManager = this.renderer.plugins.interaction
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
this.originalMapPositionToPoint =
interactionManager.mapPositionToPoint
interactionManager.mapPositionToPoint = (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).
* To compensate these distortions we need to fix the mapping to the actual
* drawing buffer coordinates.
@ -351,8 +376,11 @@ export default class PIXIApp extends PIXI.Application {
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (context !== null && (context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)) {
if (
context !== null &&
(context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
@ -360,7 +388,12 @@ export default class PIXIApp extends PIXI.Application {
}
x *= extendWidth
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.
*/
progress(value) {
if (typeof value === 'undefined') {
return this._progress
}
@ -412,8 +444,9 @@ export default class PIXIApp extends PIXI.Application {
* @return {Modal} Returns the Modal object.
*/
modal(opts = {}) {
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
let modal = new Modal(
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(modal)
return modal
@ -426,8 +459,9 @@ export default class PIXIApp extends PIXI.Application {
* @return {Message} Returns the Message object.
*/
message(opts = {}) {
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
let message = new Message(
Object.assign({ theme: this.theme }, opts, { app: this })
)
this.scene.addChild(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?
* @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()
for (let [key, texture] of textures) {
sprites.set(key, new PIXI.Sprite(texture))
}
if (loaded) {
loaded.call(this, sprites)
}
}, { resolutionDependent, progress })
if (loaded) {
loaded.call(this, sprites)
}
},
{ resolutionDependent, progress }
)
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?
* @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)) {
resources = [resources]
}
@ -487,17 +529,21 @@ export default class PIXIApp extends PIXI.Application {
const loader = this.loader
for (let resource of resources) {
if (!loader.resources[resource]) {
if (resolutionDependent) {
let resolution = Math.round(this.renderer.resolution)
switch (resolution) {
case 2:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@2x.$1')
)
break
case 3:
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
loader.add(
resource,
resource.replace(/\.([^.]*)$/, '@3x.$1')
)
break
default:
loader.add(resource)
@ -540,7 +586,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
query(query, opts = {}) {
if (typeof query === 'string') {
opts = Object.assign({}, opts, { query })
} else {
@ -572,7 +617,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
mutate(mutation, opts = {}) {
if (typeof mutation === 'string') {
opts = Object.assign({}, opts, { mutation })
} else {
@ -604,7 +648,6 @@ export default class PIXIApp extends PIXI.Application {
* rejected with an error.
*/
subscribe(subscription, opts = {}) {
if (typeof subscription === 'string') {
opts = Object.assign({}, opts, { subscription })
} else {
@ -635,13 +678,13 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
*
* @return {PIXI.Point} Returns a PIXI.Point.
*/
convertPointFromPageToNode(displayObject, x, y) {
let resolution = this.renderer.resolution
console.log("resolution", resolution)
console.log('resolution', resolution)
let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
pixiGlobal.x /= resolution
pixiGlobal.y /= resolution
@ -655,7 +698,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {DisplayObject} displayObject - The PIXI displayObject.
* @param {number} x - The x coordinate.
* @param {number} y - The y coordinate.
*
*
* @return {Point} Returns a DOM Point.
*/
@ -665,7 +708,11 @@ export default class PIXIApp extends PIXI.Application {
pixiGlobal.x *= resolution
pixiGlobal.y *= resolution
// 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}
*/
class FpsDisplay extends PIXI.Graphics {
/**
* 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.
*/
constructor(app) {
super()
this.app = app
this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, .6)
.beginFill(0x434f4f, 0.6)
.drawRoundedRect(0, 0, 68, 32, 5)
.endFill()
.position.set(20, 20)
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
}))
this.text = new PIXI.Text(
this.fps,
new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
})
)
this.text.position.set(6, 6)
this.addChild(this.text)
@ -721,7 +769,7 @@ class FpsDisplay extends PIXI.Graphics {
* @return {PIXIApp} Returns the PIXIApp object for chaining.
*/
refreshFps() {
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`
this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
return this
}

View File

@ -13,17 +13,17 @@
* height: 270,
* transparent: false
* }).setup().run()
*
*
* // Add a video sprite
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
* sprite.width = app.size.width
* sprite.height = app.size.height
* app.scene.addChild(sprite)
*
*
* // Create the filter and assign it to the scene
* const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60))
* app.scene.filters = [blurFilter]
*
*
* @class
* @extends PIXI.Filter
* @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.
*/
export default class BlurFilter extends PIXI.Filter {
constructor(shape, blur = 50) {
super()
@ -59,7 +58,7 @@ export default class BlurFilter extends PIXI.Filter {
set blur(value) {
this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value
}
/**
* The blur shape.
*
@ -69,26 +68,39 @@ export default class BlurFilter extends PIXI.Filter {
return this.tiltShiftXFilter.shape
}
set shape(value) {
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value)
this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(
value
)
}
/**
*
*
* @private
* @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value
* @returns {Object}
*/
normalize(value) {
let shape = null
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) {
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 {
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
@ -104,9 +116,7 @@ export default class BlurFilter extends PIXI.Filter {
* @private
*/
class TiltShiftAxisFilter extends PIXI.Filter {
constructor(shape, blur){
constructor(shape, blur) {
const vertex = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
@ -173,13 +183,18 @@ class TiltShiftAxisFilter extends PIXI.Filter {
`
super(vertex, fragment)
if (shape.type === 'circle') {
this.uniforms.shape = 1
this.uniforms.circle = [shape.x, shape.y, shape.r]
} else {
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.delta = new PIXI.Point(0, 0)
@ -200,7 +215,7 @@ class TiltShiftAxisFilter extends PIXI.Filter {
set blur(value) {
this.uniforms.blur = value
}
/**
* The blur shape.
*
@ -213,7 +228,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
return new PIXI.Circle(circle[0], circle[1], circle[2])
} else {
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) {
@ -222,7 +242,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
this.uniforms.circle = [value.x, value.y, value.r]
} else {
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
}
}

View File

@ -2,10 +2,10 @@ import PIXIApp from './app.js'
import BlurFilter from './blurfilter.js'
import FlipEffect from './flipeffect.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 {ScatterContainer, DisplayObjectScatter} from './scatter.js'
import {AppTest, Command, RecorderTools} from './test.js'
import { ScatterContainer, DisplayObjectScatter } from './scatter.js'
import { AppTest, Command, RecorderTools } from './test.js'
import Timeline from './timeline.js'
import Theme from './theme.js'
import Button from './button.js'
@ -23,7 +23,7 @@ import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Progress from './progress.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
are visible inside doctests.
*/
@ -57,4 +57,4 @@ window.Badge = Badge
window.Progress = Progress
window.List = List
window.LabeledGraphics = LabeledGraphics
window.FontInfo = FontInfo
window.FontInfo = FontInfo

View File

@ -47,7 +47,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
*/
export default class Button extends PIXI.Container {
/**
* 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)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
label: null,
x: 0,
y: 0,
minWidth: 44,
minHeight: 44,
padding: theme.padding,
icon: undefined,
iconActive: undefined,
iconPosition: 'left',
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: false,
active: false,
action: null,
beforeAction: null,
afterAction: null,
type: 'default',
align: 'center',
verticalAlign: 'middle',
tooltip: null,
badge: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
label: null,
x: 0,
y: 0,
minWidth: 44,
minHeight: 44,
padding: theme.padding,
icon: undefined,
iconActive: undefined,
iconPosition: 'left',
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: false,
active: false,
action: null,
beforeAction: null,
afterAction: null,
type: 'default',
align: 'center',
verticalAlign: 'middle',
tooltip: null,
badge: null,
visible: true
},
opts
)
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
} 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
}
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
@ -200,7 +213,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
setup() {
// Button
//-----------------
let button = new PIXI.Graphics()
@ -222,18 +234,27 @@ export default class Button extends PIXI.Container {
// 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) {
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
this.iconActive = this.loadIcon(
this.opts.iconActive,
this.opts.iconColorActive
)
}
// interaction
//-----------------
this.button.on('pointerover', 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 => {
@ -242,13 +263,19 @@ export default class Button extends PIXI.Container {
this.button.on('pointerout', 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
this.button.on('pointerdown', 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 => {
@ -261,7 +288,10 @@ export default class Button extends PIXI.Container {
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') {
this.active = !this.active
@ -278,15 +308,22 @@ export default class Button extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active // calls .layout()
this.active = this.opts.active // calls .layout()
// tooltip
//-----------------
if (this.opts.tooltip) {
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 {
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)
}
}
@ -294,12 +331,15 @@ export default class Button extends PIXI.Container {
// badge
//-----------------
if (this.opts.badge) {
let opts = Object.assign({}, {
align: 'right',
verticalAlign: 'top',
offsetLeft: 0,
offsetTop: 0
})
let opts = Object.assign(
{},
{
align: 'right',
verticalAlign: 'top',
offsetLeft: 0,
offsetTop: 0
}
)
if (typeof this.opts.badge === 'string') {
opts = Object.assign(opts, { content: this.opts.badge })
} else {
@ -309,25 +349,35 @@ export default class Button extends PIXI.Container {
const badge = new Badge(opts)
switch (opts.align) {
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
break
case 'right':
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
break
case 'bottom':
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
@ -348,7 +398,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layout() {
// Clear 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.
*/
layoutInnerContent() {
for (let child of this.content.children) {
switch (this.opts.verticalAlign) {
case 'top':
child.y = 0
break
case 'middle':
child.y = this.content.height / 2 - child.height / 2
break
case 'bottom':
child.y = this.content.height - child.height
break
case 'top':
child.y = 0
break
case 'middle':
child.y = this.content.height / 2 - child.height / 2
break
case 'bottom':
child.y = this.content.height - child.height
break
}
}
@ -460,29 +508,30 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
layoutContent() {
switch (this.opts.align) {
case 'left':
this.content.x = this.opts.padding
break
case 'center':
this.content.x = ((this._width - this.content.width) / 2)
break
case 'right':
this.content.x = this._width - this.opts.padding - this.content.width
break
case 'left':
this.content.x = this.opts.padding
break
case 'center':
this.content.x = (this._width - this.content.width) / 2
break
case 'right':
this.content.x =
this._width - this.opts.padding - this.content.width
break
}
switch (this.opts.verticalAlign) {
case 'top':
this.content.y = this.opts.padding
break
case 'middle':
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y = this._height - this.opts.padding - this.content.height
break
case 'top':
this.content.y = this.opts.padding
break
case 'middle':
this.content.y = (this._height - this.content.height) / 2
break
case 'bottom':
this.content.y =
this._height - this.opts.padding - this.content.height
break
}
return this
@ -495,16 +544,32 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
draw() {
this.button.clear()
if (this.active) {
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.button.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.button.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} 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.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()
return this
@ -519,7 +584,6 @@ export default class Button extends PIXI.Container {
return this._active
}
set active(value) {
this._active = value
if (this._active) {
@ -544,18 +608,17 @@ export default class Button extends PIXI.Container {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.button.interactive = false
this.button.buttonMode = false
this.button.alpha = .5
this.button.alpha = 0.5
if (this.icon) {
this.icon.alpha = .5
this.icon.alpha = 0.5
}
if (this.text) {
this.text.alpha = .5
this.text.alpha = 0.5
}
} else {
this.button.interactive = true
@ -576,7 +639,6 @@ export default class Button extends PIXI.Container {
* @return {Button} A reference to the button for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 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.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 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.
*/
loadIcon(icon, color) {
let displayObject = null
if (icon instanceof PIXI.DisplayObject) {
@ -623,10 +683,12 @@ export default class Button extends PIXI.Container {
if (this.text) {
size = this.text.height
} 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 sprite = new PIXI.Sprite(iconTexture)

View File

@ -3,7 +3,7 @@ import Button from './button.js'
/**
* Class that represents a PixiJS ButtonGroup.
*
*
* @example
* // Create the button group
* 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}
*/
export default class ButtonGroup extends PIXI.Graphics {
/**
* Creates an instance of a ButtonGroup.
*
*
* @constructor
* @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.
@ -74,50 +73,53 @@ export default class ButtonGroup extends PIXI.Graphics {
* @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
buttons: [],
minWidth: 44,
minHeight: 44,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: null,
type: 'default', // default, checkbox, radio
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
buttons: [],
minWidth: 44,
minHeight: 44,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
iconColor: theme.iconColor,
iconColorActive: theme.iconColorActive,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.fillActive,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
style: 'default',
radius: theme.radius,
disabled: null,
type: 'default', // default, checkbox, radio
orientation: 'horizontal',
align: 'center', // left, center, right
verticalAlign: 'middle', // top, middle, bottom
visible: true
},
opts
)
this.buttons = []
this._disabled = null
this.visible = this.opts.visible
// setup
@ -128,21 +130,19 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// Buttons
//-----------------
let position = 0
for (let it of this.opts.buttons) {
delete it.x
delete it.y
@ -164,11 +164,19 @@ export default class ButtonGroup extends PIXI.Graphics {
it.fillActive = it.fillActive || this.opts.fillActive
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
it.stroke = it.stroke || this.opts.stroke
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
it.strokeWidth =
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.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
it.strokeActiveWidth =
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.textStyleActive = it.textStyleActive || this.opts.textStyleActive
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.verticalAlign = it.verticalAlign || this.opts.verticalAlign
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 => {
if (it.opts.type === 'default') {
it.active = false
@ -202,18 +213,25 @@ export default class ButtonGroup extends PIXI.Graphics {
if (it.tooltip) {
if (typeof it.tooltip === 'string') {
it.tooltip = {content: it.tooltip, container: this}
it.tooltip = { content: it.tooltip, container: this }
} else {
it.tooltip = Object.assign({}, {container: this}, it.tooltip)
it.tooltip = Object.assign(
{},
{ container: this },
it.tooltip
)
}
}
let button = new Button(it)
this.addChild(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') {
@ -233,14 +251,13 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* 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.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -251,26 +268,38 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {ButtonGroup} A reference to the button group for chaining.
*/
draw() {
if (this.opts.margin === 0) {
this.buttons.forEach(it => it.hide())
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.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
// 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) => {
if (i > 0) {
@ -281,7 +310,6 @@ export default class ButtonGroup extends PIXI.Graphics {
} else {
this.lineTo(it.width, it.y)
}
}
})
@ -290,10 +318,10 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
* Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
*
*
* @member {boolean}
*/
get disabled() {
@ -301,32 +329,29 @@ export default class ButtonGroup extends PIXI.Graphics {
}
set 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.
*
*
* @private
* @return {number} The maximum with of a button of the button group.
*/
getMaxButtonWidth() {
let widths = this.buttons.map(it => it.width)
return Math.max(...widths)
}
/**
* Shows the button group (sets his alpha value to 1).
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
show() {
this.alpha = 1
return this
@ -334,11 +359,10 @@ export default class ButtonGroup extends PIXI.Graphics {
/**
* Hides the button group (sets his alpha value to 0).
*
*
* @return {ButtonGroup} A reference to the button group for chaining.
*/
hide() {
this.alpha = 0
return this

View File

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

View File

@ -29,10 +29,10 @@
* const front = PIXI.Sprite.fromImage('./assets/front.jpg')
* const back = PIXI.Sprite.fromImage('./assets/back.jpg')
* app.scene.addChild(front)
*
*
* // Create the flippable
* const flippable = new Flippable(front, back, app.renderer)
*
*
* front.interactive = true
* front.on('click', event => flippable.toggle())
*
@ -42,7 +42,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
*/
export default class Flippable extends PIXI.projection.Camera3d {
/**
* 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.
*/
constructor(front, back, renderer, opts = {}) {
super()
this.opts = Object.assign({}, {
front,
back,
renderer,
duration: 1,
ease: Power2.easeOut,
shadow: false,
eulerX: 0,
eulerY: 0,
eulerEase: Power1.easeOut,
useBackTransforms: false,
transformEase: Power2.easeOut,
focus: 800,
near: 10,
far: 10000,
orthographic: false
}, opts)
this.opts = Object.assign(
{},
{
front,
back,
renderer,
duration: 1,
ease: Power2.easeOut,
shadow: false,
eulerX: 0,
eulerY: 0,
eulerEase: Power1.easeOut,
useBackTransforms: false,
transformEase: Power2.easeOut,
focus: 800,
near: 10,
far: 10000,
orthographic: false
},
opts
)
// 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
//--------------------
@ -113,8 +120,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {Flippable} A reference to the flippable for chaining.
*/
setup() {
const scale = .5
const scale = 0.5
// filters
//--------------------
@ -131,16 +137,18 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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.anchor.set(0.5)
shadow.scale3d.set(.98)
shadow.scale3d.set(0.98)
shadow.alpha = 0.7
shadow.filters = [blurFilter]
shadow.visible = this.opts.shadow
outer.addChild(shadow)
this.objects.shadow = shadow
// inner
//--------------------
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)
front.scale.set(-1 / scale, 1 / scale)
front.renderable = true
front.anchor.set(.5)
front.anchor.set(0.5)
inner.addChild(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)
back.scale.set(1 / scale, 1 / scale)
back.renderable = false
back.anchor.set(.5)
back.anchor.set(0.5)
inner.addChild(back)
this.objects.back = back
@ -178,7 +186,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
return this._flipped
}
set flipped(toBack) {
this._flipped = toBack
// references
@ -199,7 +206,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
//--------------------
front.texture = this.generateTexture(this.opts.front)
back.texture = this.generateTexture(this.opts.back)
// switch objects and set params for virtual objects
//--------------------
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,
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
height: this.opts.useBackTransforms ? 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
width: this.opts.useBackTransforms
? toObject.width * 2
: fromObject.width * 2,
height: this.opts.useBackTransforms
? 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
@ -305,20 +322,24 @@ export default class Flippable extends PIXI.projection.Camera3d {
// camera
//--------------------
new TimelineMax()
.to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease})
.to(this.euler, half, {x: 0, y: 0, ease})
.to(this.euler, half, {
x: this.opts.eulerX,
y: this.opts.eulerY,
ease
})
.to(this.euler, half, { x: 0, y: 0, ease })
// shadow
//--------------------
new TimelineMax()
.to(shadow, half, {alpha: .3, ease})
.to(shadow, half, {alpha: .7, ease})
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
// blurfilter
//--------------------
new TimelineMax()
.to(blurFilter, half, {blur: 6, ease})
.to(blurFilter, half, {blur: .2, ease})
.to(blurFilter, half, { blur: 6, 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.
*/
layout() {
const front = this.objects.front
const back = this.objects.back
const shadow = this.objects.shadow
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
shadow.euler.x = -inner.euler.x
shadow.euler.y = -inner.euler.y
if (this.frontSideInFront) {
front.renderable = true
back.renderable = false
@ -398,13 +419,25 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @return {PIXI.Texture} The generated PIXI.Texture.
*/
generateTexture(displayObject) {
// renderTexture
//--------------------
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
const renderTexture = PIXI.RenderTexture.create(
displayObject.width,
displayObject.height
)
// 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.skew.set(0, 0)
@ -413,7 +446,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// render
//--------------------
this.opts.renderer.render(displayObject, renderTexture)
// restore position
displayObject.setTransform(...transform)

View File

@ -1,10 +1,7 @@
/**
* Defines usefull default text styles.
*/
export class FontInfo {
static get small() {
return app.theme.textStyleSmall
}
@ -20,15 +17,13 @@ export class FontInfo {
/**
* Static methods to support hyphenation of lines.
*
*
* @class Hypenate
*/
export class Hypenate {
static splitPart(part) {
let parts = part.split('-')
if (parts.length == 1)
return [part]
if (parts.length == 1) return [part]
let result = []
let last = parts.pop()
for (let p of parts) {
@ -39,7 +34,7 @@ export class Hypenate {
}
static splitWord(word) {
if (typeof (language) == 'undefined') {
if (typeof language == 'undefined') {
if (word.indexOf('-') > -1) {
return word.split('-')
}
@ -56,13 +51,13 @@ export class Hypenate {
}
static abbreviateLine(label, style, width) {
const pixiStyle = new PIXI.TextStyle(style)
const pixiStyle = new PIXI.TextStyle(style)
let metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
while(metrics.width > width && label.length > 3) {
label = label.slice(0, label.length-1)
while (metrics.width > width && label.length > 3) {
label = label.slice(0, label.length - 1)
metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
}
label = label.slice(0, label.length-1)
label = label.slice(0, label.length - 1)
return label + '…'
}
@ -78,17 +73,21 @@ export class Hypenate {
if (parts.length == 1) {
newWord += '\n' + word + ' '
x = wordMetrics.width + space.width
}
else {
} else {
let first = true
let lastPart = ''
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) {
newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part
newWord +=
(first || lastPart.endsWith('-')
? '\n'
: '-\n') + part
x = partMetrics.width
}
else {
} else {
newWord += part
x += partMetrics.width
}
@ -98,8 +97,7 @@ export class Hypenate {
x += space.width
}
result += newWord + ' '
}
else {
} else {
result += word + ' '
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
* @param {*} text
@ -131,17 +129,21 @@ export class Hypenate {
}
class TextLabel extends PIXI.Text {
/**
*Creates an instance of TextLabel.
* @param {string} text - The string that you would like the text to display
* @param {object|PIXI.TextStyle} [style] - The style parameters
* @param {canvas}
* @param {object|PIXI.TextStyle} [style] - The style parameters
* @param {canvas}
* @memberof TextLabel
*/
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
super(text, style, canvas )
this.normFontSize = this.style.fontSize
constructor(
text,
style = null,
canvas = null,
{ minZoom = 0.1, maxZoom = 10 } = {}
) {
super(text, style, canvas)
this.normFontSize = this.style.fontSize
this.minZoom = minZoom
this.maxZoom = maxZoom
}
@ -180,10 +182,9 @@ class TextLabel extends PIXI.Text {
* @extends {PIXI.Graphics}
*/
export class LabeledGraphics extends PIXI.Graphics {
/**
* Creates an instance of LabeledGraphics and defines a local label cache.
*
*
* @memberof LabeledGraphics
*/
constructor() {
@ -195,14 +196,13 @@ export class LabeledGraphics extends PIXI.Graphics {
return new TextLabel(label, fontInfo)
}
/**
* Main additional method. Ensures that a text object is created that is cached
* under the given key.
*
* @param {*} key - The cache key
* @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'
* justify: 'top', 'bottom', or 'center'
* maxLines: {integer} truncates the text and adds ellipsis
@ -213,11 +213,9 @@ export class LabeledGraphics extends PIXI.Graphics {
* @memberof LabeledGraphics
*/
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
if (attrs.maxWidth && attrs.maxLines == 1) {
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
}
else {
} else {
if (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)
}
}
if (!this.labels.has(key)) {
let text = this._createText(label, fontInfo)
this.labels.set(key, text)
@ -241,8 +239,7 @@ export class LabeledGraphics extends PIXI.Graphics {
for (let k in attrs) {
text[k] = attrs[k]
}
if (label != text.text)
text.text = label
if (label != text.text) text.text = label
// 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
switch (attrs.justify || null) {
@ -293,17 +290,30 @@ export class LabeledGraphics extends PIXI.Graphics {
const truncatedLines = lines.slice(0, maxLines)
const lastLine = truncatedLines[truncatedLines.length - 1]
const words = lastLine.split(' ')
const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce((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 })
const wordMetrics = PIXI.TextMetrics.measureText(
`\u00A0\n...\n${words.join('\n')}`,
pixiStyle
)
const [
spaceLength,
dotsLength,
...wordLengths
] = wordMetrics.lineWidths
const { text: newLastLine } = wordLengths.reduce(
(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}...`
newText = truncatedLines.join('\n')
}
@ -321,7 +331,7 @@ export class LabeledGraphics extends PIXI.Graphics {
return this.labels.get(key)
}
/**
/**
* Hides the label with the given key.
* @param {*} key
* @memberof LabeledGraphics
@ -333,7 +343,7 @@ export class LabeledGraphics extends PIXI.Graphics {
}
}
/**
/**
* Removes the label with the given key.
* @param {*} key
* @memberof LabeledGraphics
@ -344,7 +354,6 @@ export class LabeledGraphics extends PIXI.Graphics {
label.destroy()
}
/**
* Ensures that labels are hidden on clear.
*
@ -367,7 +376,6 @@ export class LabeledGraphics extends PIXI.Graphics {
}
}
const labelCache = new Map()
function getTexture(label, fontInfo = FontInfo.normal) {
@ -385,7 +393,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
}
class SpriteLabel extends PIXI.Sprite {
constructor(label, fontInfo) {
let texture = getTexture(label, fontInfo)
super(texture)
@ -405,10 +412,8 @@ class SpriteLabel extends PIXI.Sprite {
}
export class BitmapLabeledGraphics extends LabeledGraphics {
_createText(label, fontInfo) {
let texture = getTexture(label, fontInfo)
return new SpriteLabel(texture)
}
}

View File

@ -9,10 +9,10 @@ import Events from '../events.js'
* @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
*
*
* // Create the list
* const list = new List([elephant1, elephant2])
*
*
* app.scene.addChild(list)
*
* @class
@ -21,7 +21,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
*/
export default class List extends PIXI.Container {
/**
* Creates an instance of a Flippable.
*
@ -43,19 +42,22 @@ export default class List extends PIXI.Container {
* scroll your list.
*/
constructor(items = [], opts = {}) {
super()
this.opts = Object.assign({}, {
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
}, opts)
this.opts = Object.assign(
{},
{
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
},
opts
)
this.__items = items
this.__dragging = false
@ -72,7 +74,6 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Container()
@ -87,7 +88,7 @@ export default class List extends PIXI.Container {
// add items
//--------------------
for(let item of this.__items) {
for (let item of this.__items) {
container.addChild(item)
}
@ -107,7 +108,9 @@ export default class List extends PIXI.Container {
if (this.opts.app) {
const app = this.opts.app
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 y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
@ -131,7 +134,7 @@ export default class List extends PIXI.Container {
setItems(items) {
this.container.removeChildren()
this.__items = items
for(let item of this.__items) {
for (let item of this.__items) {
this.container.addChild(item)
}
this.layout()
@ -143,14 +146,12 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
layout() {
const margin = this.opts.margin
let x = margin
let y = margin
for (let item of this.__items) {
item.x = x
item.y = y
@ -166,13 +167,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
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
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
default:
this.__items.forEach(it => it.x = margin)
this.__items.forEach(it => (it.x = margin))
break
}
@ -192,13 +197,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) {
case 'top':
this.__items.forEach(it => it.y = margin)
this.__items.forEach(it => (it.y = margin))
break
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
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
}
@ -217,13 +226,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerWidth() {
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 += 2 * this.opts.margin
@ -231,13 +239,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerHeight() {
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 += 2 * this.opts.margin
@ -246,11 +253,10 @@ export default class List extends PIXI.Container {
/**
* Resizes the list.
*
*
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
*/
resize(widthOrHeight) {
if (this.opts.orientation === 'horizontal') {
this.opts.width = widthOrHeight
} else {
@ -261,12 +267,11 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onStart(event) {
this.__dragging = true
this.capture(event)
@ -276,21 +281,19 @@ export default class List extends PIXI.Container {
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, {x: true, y: true})
if (typeof ThrowPropsPlugin != "undefined") {
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
@ -302,19 +305,18 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
const throwProps = {}
if (this.opts.orientation === 'horizontal') {
let min = this.opts.width - this.innerWidth
min = min > 0 ? 0 : min
@ -333,37 +335,48 @@ export default class List extends PIXI.Container {
}
}
if (typeof ThrowPropsPlugin != "undefined") {
ThrowPropsPlugin.to(this.container.position, {
throwProps,
ease: Strong.easeOut,
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
}, .8, .4)
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
} else if (
this.container.position.x + this.innerWidth <
this.opts.width
) {
this.container.position.x = this.opts.width - this.innerWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
} else if (
this.container.position.y + this.innerHeight <
this.opts.height
) {
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.
*/
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)
}
}

View File

@ -1,9 +1,9 @@
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.
*
*
* @example
* // Create the PixiJS App
* const app = new PIXIApp({
@ -11,7 +11,7 @@ import {InteractivePopup} from './popup.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create a button
* let button = new Button({
* label: 'Click me',
@ -24,7 +24,7 @@ import {InteractivePopup} from './popup.js'
* app.scene.addChild(message)
* }
* })
*
*
* // Add the button to the scene
* 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}
*/
export default class Message extends InteractivePopup {
/**
* Creates an instance of a Message.
*
*
* @constructor
* @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.
@ -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.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
app: window.app,
closeButton: false,
minWidth: 280,
minHeight: 100,
margin: theme.margin,
align: 'right', // left, center, right
verticalAlign: 'top', // top, middle, bottom
duration: 5,
autoClose: true,
closeDuration: theme.fast
}, opts)
opts = Object.assign(
{},
{
app: window.app,
closeButton: false,
minWidth: 280,
minHeight: 100,
margin: theme.margin,
align: 'right', // left, center, right
verticalAlign: 'top', // top, middle, bottom
duration: 5,
autoClose: true,
closeDuration: theme.fast
},
opts
)
super(opts)
}
/**
* Relayouts the position of the message box.
*
*
* @return {Message} Returns the message box for chaining.
*/
layout() {
super.layout()
// horizontal
@ -87,10 +88,11 @@ export default class Message extends InteractivePopup {
this.x = this.opts.margin
break
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
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
}
@ -100,21 +102,21 @@ export default class Message extends InteractivePopup {
this.y = this.opts.margin
break
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
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
}
}
/**
* Shows the message box.
*
*
* @private
*/
show() {
super.show()
if (this.opts.autoClose) {

View File

@ -1,9 +1,9 @@
import Theme from './theme.js'
import {InteractivePopup} from './popup.js'
import { InteractivePopup } from './popup.js'
/**
* Class that represents a PixiJS Modal.
*
*
* @example
* // Create the button and the modal when clicked
* 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}
*/
export default class Modal extends PIXI.Container {
/**
* Creates an instance of a Modal.
*
*
* @constructor
* @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.
@ -43,20 +42,23 @@ export default class Modal extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
app: window.app,
backgroundFill: theme.background,
backgroundFillAlpha: .6,
closeOnBackground: true,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
app: window.app,
backgroundFill: theme.background,
backgroundFillAlpha: 0.6,
closeOnBackground: true,
visible: true
},
opts
)
this.id = this.opts.id
@ -74,15 +76,14 @@ export default class Modal extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Modal} A reference to the modal for chaining.
*/
setup() {
// interaction
//-----------------
this.interactive = true
@ -120,21 +121,23 @@ export default class Modal extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the modal. Can be used after resizing.
*
*
* @return {Modal} A reference to the modal for chaining.
*/
layout() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
// background
//-----------------
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.endFill()
@ -144,33 +147,39 @@ export default class Modal extends PIXI.Container {
return this
}
/**
* Shows the modal (sets his alpha values to 1).
*
*
* @return {Modal} A reference to the modal for chaining.
*/
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
}
/**
* Hides the modal (sets his alpha values to 0).
*
*
* @return {Modal} A reference to the modal for chaining.
*/
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
}
/**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string or a PIXI.Text object.
*
*
* @member {string|PIXI.Text}
*/
get header() {
@ -182,11 +191,11 @@ export default class Modal extends PIXI.Container {
this.popup.destroy()
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string or a PIXI.DisplayObject.
*
*
* @member {string|PIXI.DisplayObject}
*/
get content() {

View File

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

View File

@ -12,7 +12,6 @@ import ButtonGroup from './buttongroup.js'
* @extends AbstractPopup
*/
export class InteractivePopup extends AbstractPopup {
/**
* 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.
*/
constructor(opts = {}) {
opts = Object.assign({}, {
closeOnPopup: false,
closeButton: true,
button: null,
buttonGroup: null
}, opts)
opts = Object.assign(
{},
{
closeOnPopup: false,
closeButton: true,
button: null,
buttonGroup: null
},
opts
)
super(opts)
@ -56,7 +58,6 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
super.setup()
// interaction
@ -72,7 +73,10 @@ export class InteractivePopup extends AbstractPopup {
// 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.height = closeButton.width
closeButton.tint = this.theme.color2
@ -95,7 +99,11 @@ export class InteractivePopup extends AbstractPopup {
// maxWidth is set and a closeButton should be displayed
//-----------------
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) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} 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._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 {
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)
@ -126,21 +144,23 @@ export class InteractivePopup extends AbstractPopup {
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
super.layout()
// 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
}
// buttons
//-----------------
if (this._buttons) {
this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
this._buttons.x =
this.wantedWidth - this.opts.padding - this._buttons.width
this._buttons.y =
this.wantedHeight - this.opts.padding - this._buttons.height
}
return this
@ -150,13 +170,12 @@ export class InteractivePopup extends AbstractPopup {
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
*
* @private
* @override
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let size = super.getInnerSize()
if (this._closeButton) {
@ -164,7 +183,10 @@ export class InteractivePopup extends AbstractPopup {
}
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
}
@ -190,7 +212,6 @@ export class InteractivePopup extends AbstractPopup {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
*/
export default class Popup extends InteractivePopup {
/**
* 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.
*/
constructor(opts = {}) {
opts = Object.assign({}, {
closeButton: false,
minWidth: 0,
minHeight: 0
}, opts)
opts = Object.assign(
{},
{
closeButton: false,
minWidth: 0,
minHeight: 0
},
opts
)
super(opts)
}

View File

@ -3,7 +3,7 @@ import Popup from './popup.js'
/**
* Class that represents a PixiJS PopupMenu.
*
*
* @example
* // Create the button and the modal when clicked
* 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}
*/
export default class PopupMenu extends Popup {
/**
* Creates an instance of a PopupMenu.
*
*
* @constructor
* @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.
@ -43,38 +42,42 @@ export default class PopupMenu extends Popup {
* @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
closeOnPopup: true
}, opts)
opts = Object.assign(
{},
{
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
closeOnPopup: true
},
opts
)
super(opts)
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {PopupMenu} A reference to the popupmenu for chaining.
*/
setup() {
// content
//-----------------
const content = new PIXI.Container()
let y = 0
for (let item of this.opts.items) {
let object = null
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 {
object = item.content
}
@ -83,16 +86,22 @@ export default class PopupMenu extends Popup {
if (item.action) {
if (item.disabled) {
object.alpha = .5
object.alpha = 0.5
} else {
object.interactive = true
object.buttonMode = true
}
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 => {
TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'})
TweenLite.to(object, this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
})
object.on('pointerup', e => {
item.action.call(object, e, object)

View File

@ -2,7 +2,7 @@ import Theme from './theme.js'
/**
* Class that represents a PixiJS Progress.
*
*
* @example
* // Create the 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}
*/
export default class Progress extends PIXI.Container {
/**
* Creates an instance of a Progress.
*
*
* @constructor
* @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.
@ -53,36 +52,39 @@ export default class Progress extends PIXI.Container {
* @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
app: window.app,
width: null,
height: 2,
margin: 100,
padding: 0,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: 0,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: 0,
strokeActiveAlpha: theme.strokeActiveAlpha,
background: false,
backgroundFill: theme.background,
backgroundFillAlpha: 1,
radius: theme.radius,
destroyOnComplete: true,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
app: window.app,
width: null,
height: 2,
margin: 100,
padding: 0,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: 0,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.strokeActive,
strokeActiveWidth: 0,
strokeActiveAlpha: theme.strokeActiveAlpha,
background: false,
backgroundFill: theme.background,
backgroundFillAlpha: 1,
radius: theme.radius,
destroyOnComplete: true,
visible: true
},
opts
)
this.id = this.opts.id
@ -91,7 +93,7 @@ export default class Progress extends PIXI.Container {
this.barActive = null
this.alpha = 0
this.visible = this.opts.visible
this._progress = 0
@ -104,15 +106,14 @@ export default class Progress extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
setup() {
// interaction
//-----------------
this.on('added', e => {
@ -139,14 +140,13 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the progress. Can be used after resizing.
*
*
* @return {Progress} A reference to the progress for chaining.
*/
layout() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
@ -154,7 +154,10 @@ export default class Progress extends PIXI.Container {
//-----------------
if (this.opts.background) {
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.endFill()
}
@ -163,15 +166,14 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Draws the canvas.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
draw() {
this.bar.clear()
this.barActive.clear()
@ -180,59 +182,80 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Draws the bar.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
drawBar() {
const width = this.opts.app.size.width
const height = this.opts.app.size.height
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
}
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
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)
if (this.radius > 1) {
this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius)
this.bar.drawRoundedRect(
0,
0,
wantedWidth,
wantedHeight,
this.radius
)
} else {
this.bar.drawRect(0, 0, wantedWidth, wantedHeight)
}
this.bar.endFill()
this.bar.x = width / 2 - this.bar.width / 2
this.bar.y = height / 2 - this.bar.height / 2
return this
}
/**
* Draws the active bar.
*
*
* @private
* @return {Progress} A reference to the progress for chaining.
*/
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 wantedHeight = this.bar.height - (2 * this.opts.padding)
const barActiveWidth = wantedWidth * this._progress / 100
const barActiveWidth = (wantedWidth * this._progress) / 100
this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.barActive.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.barActive.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
if (barActiveWidth > 0) {
if (this.radius > 1) {
this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius)
this.barActive.drawRoundedRect(
0,
0,
barActiveWidth,
wantedHeight,
this.radius
)
} else {
this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight)
}
@ -244,39 +267,41 @@ export default class Progress extends PIXI.Container {
return this
}
/**
* Shows the progress (sets his alpha values to 1).
*
*
* @return {Progress} A reference to the progress for chaining.
*/
show() {
TweenLite.to(this, this.theme.fast, {alpha: 1})
TweenLite.to(this, this.theme.fast, { alpha: 1 })
return this
}
/**
* Hides the progress (sets his alpha values to 1).
*
*
* @return {Progress} A reference to the progress for chaining.
*/
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
}
/**
* Gets or sets the progress. Has to be a number between 0 and 100.
*
*
* @member {number}
*/
get progress() {
return this._progress
}
set progress(value) {
value = Math.round(value)
if (value < 0) {
@ -294,7 +319,7 @@ export default class Progress extends PIXI.Container {
if (value === 100 && this.opts.destroyOnComplete) {
TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => this.destroy({children: true})
onComplete: () => this.destroy({ children: true })
})
}
}

View File

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

View File

@ -1,5 +1,3 @@
/**
* 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 {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/
constructor(options)
{
constructor(options) {
super()
this.options = Object.assign({}, {
boxWidth: 100,
boxHeight: 100,
scrollbarSize: 10,
scrollbarBackground: 14540253,
scrollbarBackgroundAlpha: 1,
scrollbarForeground: 8947848,
scrollbarForegroundAlpha: 1,
dragScroll: true,
stopPropagation: true,
scrollbarOffsetHorizontal: 0,
scrollbarOffsetVertical: 0,
underflow: 'top-left',
fadeScrollbar: false,
fadeWait: 3000,
fadeEase: 'easeInOutSine'
}, options)
this.options = Object.assign(
{},
{
boxWidth: 100,
boxHeight: 100,
scrollbarSize: 10,
scrollbarBackground: 14540253,
scrollbarBackgroundAlpha: 1,
scrollbarForeground: 8947848,
scrollbarForegroundAlpha: 1,
dragScroll: true,
stopPropagation: true,
scrollbarOffsetHorizontal: 0,
scrollbarOffsetVertical: 0,
underflow: 'top-left',
fadeScrollbar: false,
fadeWait: 3000,
fadeEase: 'easeInOutSine'
},
options
)
this.ease = new PIXI.extras.Ease.list()
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/)
* @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
.decelerate()
.on('moved', () => this._drawScrollbars())
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.decelerate().on('moved', () => this._drawScrollbars())
/**
* graphics element for drawing the scrollbars
@ -82,12 +88,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of horizontal scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetHorizontal()
{
get scrollbarOffsetHorizontal() {
return this.options.scrollbarOffsetHorizontal
}
set scrollbarOffsetHorizontal(value)
{
set scrollbarOffsetHorizontal(value) {
this.options.scrollbarOffsetHorizontal = value
}
@ -95,12 +99,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of vertical scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetVertical()
{
get scrollbarOffsetVertical() {
return this.options.scrollbarOffsetVertical
}
set scrollbarOffsetVertical(value)
{
set 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)
* @type {boolean}
*/
get disable()
{
get disable() {
return this._disabled
}
set disable(value)
{
if (this._disabled !== value)
{
set disable(value) {
if (this._disabled !== value) {
this._disabled = value
this.update()
}
@ -125,12 +124,10 @@ export default class Scrollbox extends PIXI.Container {
* call stopPropagation on any events that impact scrollbox
* @type {boolean}
*/
get stopPropagation()
{
get stopPropagation() {
return this.options.stopPropagation
}
set stopPropagation(value)
{
set 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
* @type {boolean}
*/
get dragScroll()
{
get dragScroll() {
return this.options.dragScroll
}
set dragScroll(value)
{
set dragScroll(value) {
this.options.dragScroll = value
if (value)
{
if (value) {
this.content.drag()
}
else
{
} else {
this.content.removePlugin('drag')
}
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
* @type {number}
*/
get boxWidth()
{
get boxWidth() {
return this.options.boxWidth
}
set boxWidth(value)
{
set boxWidth(value) {
this.options.boxWidth = value
this.content.screenWidth = value
this.update()
@ -178,12 +168,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflow()
{
get overflow() {
return this.options.overflow
}
set overflow(value)
{
set overflow(value) {
this.options.overflow = value
this.options.overflowX = 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
* @type {string}
*/
get overflowX()
{
get overflowX() {
return this.options.overflowX
}
set overflowX(value)
{
set overflowX(value) {
this.options.overflowX = value
this.update()
}
@ -214,12 +200,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowY()
{
get overflowY() {
return this.options.overflowY
}
set overflowY(value)
{
set overflowY(value) {
this.options.overflowY = value
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
* @type {number}
*/
get boxHeight()
{
get boxHeight() {
return this.options.boxHeight
}
set boxHeight(value)
{
set boxHeight(value) {
this.options.boxHeight = value
this.content.screenHeight = value
this.update()
@ -243,12 +225,10 @@ export default class Scrollbox extends PIXI.Container {
* scrollbar size in pixels
* @type {number}
*/
get scrollbarSize()
{
get scrollbarSize() {
return this.options.scrollbarSize
}
set scrollbarSize(value)
{
set scrollbarSize(value) {
this.options.scrollbarSize = value
}
@ -257,9 +237,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number}
* @readonly
*/
get contentWidth()
{
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
get contentWidth() {
return (
this.options.boxWidth -
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
)
}
/**
@ -267,9 +249,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number}
* @readonly
*/
get contentHeight()
{
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
get contentHeight() {
return (
this.options.boxHeight -
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
)
}
/**
@ -277,8 +261,7 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean}
* @readonly
*/
get isScrollbarVertical()
{
get isScrollbarVertical() {
return this._isScrollbarVertical
}
@ -287,24 +270,21 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean}
* @readonly
*/
get isScrollbarHorizontal()
{
get isScrollbarHorizontal() {
return this._isScrollbarHorizontal
}
/**
* top coordinate of scrollbar
*/
get scrollTop()
{
get scrollTop() {
return this.content.top
}
/**
* left coordinate of scrollbar
*/
get scrollLeft()
{
get scrollLeft() {
return this.content.left
}
@ -312,12 +292,10 @@ export default class Scrollbox extends PIXI.Container {
* width of content area
* if not set then it uses content.width to calculate width
*/
get scrollWidth()
{
get scrollWidth() {
return this._scrollWidth || this.content.width
}
set scrollWidth(value)
{
set scrollWidth(value) {
this._scrollWidth = value
}
@ -325,12 +303,10 @@ export default class Scrollbox extends PIXI.Container {
* height of content area
* if not set then it uses content.height to calculate height
*/
get scrollHeight()
{
get scrollHeight() {
return this._scrollHeight || this.content.height
}
set scrollHeight(value)
{
set scrollHeight(value) {
this._scrollHeight = value
}
@ -338,52 +314,111 @@ export default class Scrollbox extends PIXI.Container {
* draws scrollbars
* @private
*/
_drawScrollbars()
{
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? 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
_drawScrollbars() {
this._isScrollbarHorizontal =
this.overflowX === 'scroll'
? 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()
let options = {}
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.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
options.bottom =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width =
this.scrollWidth +
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollbarTop = (this.content.top / height) * this.boxHeight
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
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.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth
if (this.isScrollbarVertical)
{
this.scrollbarWidth =
this.scrollbarWidth + this.scrollbarLeft > this.boxWidth
? this.boxWidth - this.scrollbarLeft
: this.scrollbarWidth
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
)
.endFill()
}
if (this.isScrollbarHorizontal)
{
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
0,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
.endFill()
}
if (this.isScrollbarVertical)
{
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
)
.endFill()
}
if (this.isScrollbarHorizontal)
{
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.scrollbarLeft,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
.endFill()
}
// 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
* @private
*/
_drawMask()
{
_drawMask() {
this._maskContent
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
@ -406,19 +440,20 @@ export default class Scrollbox extends PIXI.Container {
/**
* call when scrollbox content changes
*/
update()
{
update() {
this.content.mask = null
this._maskContent.clear()
if (!this._disabled)
{
if (!this._disabled) {
this._drawScrollbars()
this._drawMask()
if (this.options.dragScroll)
{
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y'
if (direction !== null)
{
if (this.options.dragScroll) {
const direction =
this.isScrollbarHorizontal && this.isScrollbarVertical
? 'all'
: this.isScrollbarHorizontal
? 'x'
: 'y'
if (direction !== null) {
this.content
.drag({ clampWheel: true, direction })
.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
*/
activateFade()
{
if (this.options.fade)
{
if (this.fade)
{
activateFade() {
if (this.options.fade) {
if (this.fade) {
this.ease.remove(this.fade)
}
this.scrollbar.alpha = 1
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.on('each', () => this.content.dirty = true)
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
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
* @private
*/
scrollbarDown(e)
{
scrollbarDown(e) {
const local = this.toLocal(e.data.global)
if (this.isScrollbarHorizontal)
{
if (local.y > this.boxHeight - this.scrollbarSize)
{
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
{
if (this.isScrollbarHorizontal) {
if (local.y > this.boxHeight - this.scrollbarSize) {
if (
local.x >= this.scrollbarLeft &&
local.x <= this.scrollbarLeft + this.scrollbarWidth
) {
this.pointerDown = { type: 'horizontal', last: local }
}
else
{
if (local.x > this.scrollbarLeft)
{
} else {
if (local.x > this.scrollbarLeft) {
this.content.left += this.content.worldScreenWidth
this.update()
}
else
{
} else {
this.content.left -= this.content.worldScreenWidth
this.update()
}
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
return
}
}
if (this.isScrollbarVertical)
{
if (local.x > this.boxWidth - this.scrollbarSize)
{
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
{
if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) {
if (
local.y >= this.scrollbarTop &&
local.y <= this.scrollbarTop + this.scrollbarWidth
) {
this.pointerDown = { type: 'vertical', last: local }
}
else
{
if (local.y > this.scrollbarTop)
{
} else {
if (local.y > this.scrollbarTop) {
this.content.top += this.content.worldScreenHeight
this.update()
}
else
{
} else {
this.content.top -= this.content.worldScreenHeight
this.update()
}
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
return
@ -516,26 +538,20 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarMove(e)
{
if (this.pointerDown)
{
if (this.pointerDown.type === 'horizontal')
{
scrollbarMove(e) {
if (this.pointerDown) {
if (this.pointerDown.type === 'horizontal') {
const local = this.toLocal(e.data.global)
this.content.left += local.x - this.pointerDown.last.x
this.pointerDown.last = local
this.update()
}
else if (this.pointerDown.type === 'vertical')
{
} else if (this.pointerDown.type === 'vertical') {
const local = this.toLocal(e.data.global)
this.content.top += local.y - this.pointerDown.last.y
this.pointerDown.last = local
this.update()
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
}
@ -545,8 +561,7 @@ export default class Scrollbox extends PIXI.Container {
* handle pointer down on scrollbar
* @private
*/
scrollbarUp()
{
scrollbarUp() {
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.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options)
{
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
if (options.scrollWidth)
{
resize(options) {
this.options.boxWidth =
typeof options.boxWidth !== 'undefined'
? options.boxWidth
: this.options.boxWidth
this.options.boxHeight =
typeof options.boxHeight !== 'undefined'
? options.boxHeight
: this.options.boxHeight
if (options.scrollWidth) {
this.scrollWidth = options.scrollWidth
}
if (options.scrollHeight)
{
if (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()
}
@ -581,8 +604,7 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} width
* @param {number} height
*/
ensureVisible(x, y, width, height)
{
ensureVisible(x, y, width, height) {
this.content.ensureVisible(x, y, width, height)
this._drawScrollbars()
}

View File

@ -2,7 +2,7 @@ import Scrollbox from './scrollbox.js'
/**
* Class that represents a PixiJS Scrollview.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -10,7 +10,7 @@ import Scrollbox from './scrollbox.js'
* width: 600,
* height: 400
* }).setup().run()
*
*
* // Create the Scrollview
* app.loader
* .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}
*/
export default class Scrollview extends Scrollbox {
/**
* Creates an instance of a Scrollview.
*
*
* @constructor
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
*/
constructor(opts = {}) {
super(opts)
this.opts = opts
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the Scrollview. Can be used after resizing.
*
*
* @return {Scrollview} A reference to the Scrollview for chaining.
*/
layout() {
this.update()
return this

View File

@ -27,7 +27,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Slider.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -35,7 +35,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the slider
* const slider = new Slider({
* x: 10,
@ -51,10 +51,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
*/
export default class Slider extends PIXI.Container {
/**
* Creates an instance of a Slider.
*
*
* @constructor
* @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.
@ -82,46 +81,49 @@ export default class Slider extends PIXI.Container {
* @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved.
* @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
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 250,
height: 2,
container: null,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
controlFill: theme.fill,
controlFillAlpha: .5,
controlStroke: theme.primaryColor,
controlStrokeWidth: 2,
controlStrokeAlpha: theme.strokeAlpha,
controlRadius: 16,
orientation: 'horizontal',
min: 0,
max: 100,
value: 0,
disabled: false,
onStart: null,
onUpdate: null,
onComplete: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 250,
height: 2,
container: null,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
controlFill: theme.fill,
controlFillAlpha: 0.5,
controlStroke: theme.primaryColor,
controlStrokeWidth: 2,
controlStrokeAlpha: theme.strokeAlpha,
controlRadius: 16,
orientation: 'horizontal',
min: 0,
max: 100,
value: 0,
disabled: false,
onStart: null,
onUpdate: null,
onComplete: null,
tooltip: null,
visible: true
},
opts
)
this.opts.container = this.opts.container || this
// Validation
@ -149,7 +151,7 @@ export default class Slider extends PIXI.Container {
this.sliderObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// setup
@ -160,23 +162,26 @@ export default class Slider extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
setup() {
// Container events
//-----------------
const container = this.opts.container
this.on('pointermove', e => {
if (this.control.dragging) {
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
const moveX = this.control.event.data.getLocalPosition(
this.control.parent
).x
this._value = this.pixelToValue(
moveX - this.control.delta - this.opts.controlRadius
)
let x = this.valueToPixel(this._value) + this.opts.controlRadius
this.control.x = x
@ -188,8 +193,16 @@ export default class Slider extends PIXI.Container {
if (container instanceof Element) {
container.addEventListener('pointerup', e => this.onEnd(e), false)
container.addEventListener('pointercancel', e => this.onEnd(e), false)
container.addEventListener('pointerleave', e => this.onEnd(e), false)
container.addEventListener(
'pointercancel',
e => this.onEnd(e),
false
)
container.addEventListener(
'pointerleave',
e => this.onEnd(e),
false
)
container.addEventListener('pointerout', e => this.onEnd(e), false)
container.addEventListener('mouseup', 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.delta = e.data.getLocalPosition(this.control).x
control.dragging = true
if (this.opts.onStart) {
this.opts.onStart.call(this, e, this)
}
@ -229,20 +242,20 @@ export default class Slider extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
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 => {
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.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
@ -250,15 +263,17 @@ export default class Slider extends PIXI.Container {
if (this.sliderObj.pointerdowned) {
this.sliderObj.pointerdowned = false
const position = e.data.getLocalPosition(this.control.parent)
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
this.value = this.pixelToValue(
position.x - this.opts.controlRadius
)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}
})
// disabled
//-----------------
this.disabled = this.opts.disabled
// tooltip
//-----------------
if (this.opts.tooltip) {
@ -275,14 +290,13 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the slider. Can be used after resizing.
*
*
* @return {Slider} A reference to the slider for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -293,15 +307,14 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Draws the slider to the canvas.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
draw() {
const r = this.radius
const cr = this.opts.controlRadius
const w = this.opts.width
@ -312,12 +325,16 @@ export default class Slider extends PIXI.Container {
this.sliderObj.clear()
this.sliderObj.beginFill(0xffffff, 0)
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.moveTo(x, y)
this.sliderObj.lineTo(x + w, y)
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.lineTo(x, y + h)
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
this.control.clear()
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
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.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.endFill()
@ -338,12 +365,11 @@ export default class Slider extends PIXI.Container {
/**
* Executed, when the slider control movement ended.
*
*
* @private
* @return {Slider} A reference to the slider for chaining.
*/
onEnd(e) {
if (this.control.dragging) {
this.control.event = null
this.control.dragging = false
@ -357,9 +383,9 @@ export default class Slider extends PIXI.Container {
/**
* Calculates the value for a given pixel.
*
*
* @private
* @param {number} value
* @param {number} value
* @returns {number} The calucalted pixel.
*/
valueToPixel(value) {
@ -368,14 +394,17 @@ export default class Slider extends PIXI.Container {
} else if (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.
*
*
* @private
* @param {number} pixel
* @param {number} pixel
* @returns {number} The calucalted value.
*/
pixelToValue(pixel) {
@ -384,12 +413,15 @@ export default class Slider extends PIXI.Container {
} else if (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.
*
*
* @member {number}
*/
get value() {
@ -405,27 +437,26 @@ export default class Slider extends PIXI.Container {
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.
*
*
* @member {boolean}
*/
get disabled() {
return this._disabled
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.interactive = false
this.sliderObj.interactive = false
this.control.interactive = false
this.control.buttonMode = false
this.alpha = .5
this.alpha = 0.5
} else {
this.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).
*
*
* @return {Slider} A reference to the slider for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.fillAlpha = 1
this.opts.controlStrokeAlpha = 1
@ -451,14 +481,13 @@ export default class Slider extends PIXI.Container {
return this
}
/**
* Hides the slider (sets his alpha values to 1).
*
*
* @return {Slider} A reference to the slider for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.fillAlpha = 0
this.opts.controlStrokeAlpha = 0

View File

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

View File

@ -35,7 +35,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Switch.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -43,7 +43,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the switch
* const switch1 = new Switch({
* x: 10,
@ -59,10 +59,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
*/
export default class Switch extends PIXI.Container {
/**
* Creates an instance of a Switch.
*
*
* @constructor
* @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.
@ -102,56 +101,61 @@ export default class Switch extends PIXI.Container {
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is 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
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * 0.8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
},
opts
)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
this.opts.controlRadius =
this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation
//-----------------
@ -170,7 +174,7 @@ export default class Switch extends PIXI.Container {
this.switchObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// animated
@ -197,15 +201,14 @@ export default class Switch extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
setup() {
// Switch
//-----------------
let switchObj = new PIXI.Graphics()
@ -216,7 +219,7 @@ export default class Switch extends PIXI.Container {
//-----------------
this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2
@ -224,23 +227,22 @@ export default class Switch extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
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 => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1})
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
})
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 => {
if (this.opts.beforeAction) {
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) {
this.opts.afterAction.call(this, e, this)
@ -271,7 +273,7 @@ export default class Switch extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active
// tooltip
//-----------------
if (this.opts.tooltip) {
@ -288,14 +290,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the switch. Can be used after resizing.
*
*
* @return {Switch} A reference to the switch for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -306,28 +307,50 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Draws the switch to the canvas.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
draw() {
this.switchObj.clear()
if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.switchObj.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} 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.moveTo(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.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.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.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.arcTo(0, this.opts.height, 0, this.radius, 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
this.control.clear()
if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha)
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
this.control.lineStyle(
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)
} else {
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
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.endFill()
return this
}
/**
* Draws the animation.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
drawAnimated() {
this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
this.switchObj.lineStyle(
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.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.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.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill()
this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.lineStyle(
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.endFill()
return this
}
/**
* Gets or sets the active state.
*
*
* @member {boolean}
*/
get active() {
@ -389,12 +451,10 @@ export default class Switch extends PIXI.Container {
}
set active(value) {
this._active = value
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, {
colorProps: {
fill: this.opts.fillActive,
@ -413,10 +473,10 @@ export default class Switch extends PIXI.Container {
onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw()
})
} 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, {
colorProps: {
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.
*
*
* @member {boolean}
*/
get disabled() {
@ -448,14 +508,13 @@ export default class Switch extends PIXI.Container {
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.switchObj.interactive = false
this.switchObj.buttonMode = false
this.switchObj.alpha = .5
this.control.alpha = .5
this.switchObj.alpha = 0.5
this.control.alpha = 0.5
} else {
this.switchObj.interactive = 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).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1
@ -484,14 +542,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Hides the switch (sets his alpha values to 1).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0

View File

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

View File

@ -31,7 +31,6 @@
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export default class Theme {
/**
* Creates an instance of a Theme.
*
@ -81,52 +80,86 @@ export default class Theme {
* is used for large actived text.
*/
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
const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
this.opts = Object.assign({}, {
margin: 12,
padding: 12,
radius: 4,
fast: .25,
normal: .5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: .6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: .6,
strokeActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
}, opts)
this.opts = Object.assign(
{},
{
margin: 12,
padding: 12,
radius: 4,
fast: 0.25,
normal: 0.5,
slow: 1,
primaryColor: colorPrimary,
color1: color1,
color2: color2,
fill: color1,
fillAlpha: 1,
fillActive: color1,
fillActiveAlpha: 1,
stroke: color2,
strokeWidth: 0.6,
strokeAlpha: 1,
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
},
opts
)
// Set textStyle and variants
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,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
}, this.opts.textStyle)
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)
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,
fill: color2,
stroke: color1,
strokeThickness: 0,
miterLimit: 1,
lineJoin: 'round'
},
this.opts.textStyle
)
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)
}
@ -139,7 +172,6 @@ export default class Theme {
* @return {Theme} Returns a newly created Theme object.
*/
static fromString(theme) {
if (theme && typeof theme === 'object') {
return theme
}
@ -171,9 +203,7 @@ export default class Theme {
* @extends Theme
* @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.
@ -193,15 +223,13 @@ export class ThemeDark extends Theme {
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
*/
export class ThemeLight extends Theme {
/**
* Creates an instance of a ThemeLight.
*
* @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}
*/
export class ThemeRed extends Theme {
/**
* Creates an instance of a ThemeRed.
*
* @constructor
*/
constructor() {
super({primaryColor: 0xd92f31})
super({ primaryColor: 0xd92f31 })
}
}

View File

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

View File

@ -3,7 +3,7 @@ import AbstractPopup from './abstractpopup.js'
/**
* Class that represents a PixiJS Tooltip.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@ -11,13 +11,13 @@ import AbstractPopup from './abstractpopup.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Add an DisplayObject to the app
* const circle = new PIXI.Graphics()
* circle.beginFill(0x5251a3)
* circle.drawCircle(50, 50, 40)
* app.scene.addChild(circle)
*
*
* const tooltip = new Tooltip({
* object: circle,
* 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}
*/
export default class Tooltip extends AbstractPopup {
/**
* Creates an instance of a Tooltip.
*
*
* @constructor
* @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.
@ -45,19 +44,22 @@ export default class Tooltip extends AbstractPopup {
* @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
opts = Object.assign({}, {
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
object: null,
container: null,
offsetLeft: 8,
offsetTop: -8,
delay: 0
}, opts)
opts = Object.assign(
{},
{
minWidth: 0,
minHeight: 0,
padding: theme.padding / 2,
object: null,
container: null,
offsetLeft: 8,
offsetTop: -8,
delay: 0
},
opts
)
opts.container = opts.container || opts.object
@ -71,15 +73,14 @@ export default class Tooltip extends AbstractPopup {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Tooltip} A reference to the tooltip for chaining.
*/
setup() {
super.setup()
// bind events this
@ -87,7 +88,7 @@ export default class Tooltip extends AbstractPopup {
this.interactive = true
let mouseoverTooltip = false
this.on('mouseover', e => {
mouseoverTooltip = true
})
@ -100,7 +101,7 @@ export default class Tooltip extends AbstractPopup {
})
}
})
// bind events object
//-----------------
const object = this.opts.object
@ -109,7 +110,6 @@ export default class Tooltip extends AbstractPopup {
let mouseoverObject = false
object.on('mouseover', e => {
this.timeout = window.setTimeout(() => {
mouseoverObject = true
this.visible = true
@ -136,15 +136,14 @@ export default class Tooltip extends AbstractPopup {
return this
}
/**
* Calculates and sets the position of the tooltip.
*
*
* @private
* @return {Tooltip} A reference to the tooltip for chaining.
*/
setPosition(e) {
const position = e.data.getLocalPosition(this.opts.container)
this.x = position.x + this.opts.offsetLeft

View File

@ -4,14 +4,14 @@ import Theme from './theme.js'
/**
* Class that represents a PixiJS Volatile.
*
*
* @example
* const app = new PIXIApp({
* view: canvas,
* width: 900,
* height: 250
* }).setup().run()
*
*
* const button = new Button({
* label: 'Volatile!',
* action: () => {
@ -22,17 +22,16 @@ import Theme from './theme.js'
* })
* }
* })
*
*
* app.scene.addChild(button)
*
* @class
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
*/
export default class Volatile {
/**
* Creates an instance of a Volatile.
*
*
* @constructor
* @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.
@ -46,21 +45,24 @@ export default class Volatile {
* @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
object: null,
direction: 'top', // top, right, bottom, left
onStart: null,
onComplete: null,
distance: 160,
duration: 1.5,
ease: Quad.easeOut,
destroyOnComplete: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
object: null,
direction: 'top', // top, right, bottom, left
onStart: null,
onComplete: null,
distance: 160,
duration: 1.5,
ease: Quad.easeOut,
destroyOnComplete: true
},
opts
)
this.id = this.opts.id
@ -82,38 +84,34 @@ export default class Volatile {
//-----------------
this.run()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Volatile} A reference to the volatile for chaining.
*/
setup() {
return this
}
/**
* Should be called to refresh the layout of the volatile. Can be used after resizing.
*
*
* @return {Volatile} A reference to the volatile for chaining.
*/
layout() {
return this
}
/**
* Starts the volatile animation.
*
*
* @private
* @return {Volatile} A reference to the volatile for chaining.
*/
run() {
for (let object of this.objects) {
let x = object.x
let y = object.y
@ -144,13 +142,12 @@ export default class Volatile {
}
},
onComplete: () => {
if (this.opts.onComplete) {
this.opts.onComplete.call(object, object)
}
if (this.opts.destroyOnComplete) {
object.destroy({children: true})
object.destroy({ children: true })
}
}
})

View File

@ -2,9 +2,8 @@
* shown.
*/
export default class Poppable {
/** Register the poppable element in a context. Closes previously registered ones.
* @param {*} context
* @param {*} context
*/
register(context) {
let registered = Poppable.get(context)
@ -16,7 +15,7 @@ export default class Poppable {
/**
* Unregister object from context
* @param {*} context
* @param {*} context
*/
unregister(context) {
Poppable.delete(context)
@ -33,20 +32,20 @@ export default class Poppable {
return Poppable.registrations.get(context)
}
/** Sets the poppable in the given context
* @static
* @param {*} context
* @param {*} poppable
* @returns
* @memberof Poppable
*/
/** Sets the poppable in the given context
* @static
* @param {*} context
* @param {*} poppable
* @returns
* @memberof Poppable
*/
static set(context, poppable) {
return Poppable.registrations.set(context, poppable)
}
/** Test whether a poppable exists in the given context
*
* @param {*} context
*
* @param {*} context
*/
static has(context) {
return Poppable.registrations.has(context)
@ -65,8 +64,8 @@ export default class Poppable {
/** All poppable must implement a close method. */
close() {
console.error("Must be implemented")
console.error('Must be implemented')
}
}
Poppable.registrations = new Map()
Poppable.registrations = new Map()

View File

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

View File

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

View File

@ -9,16 +9,11 @@ import { Capabilities } from './capabilities.js'
/** This interface allows scatters to delegate tap events to other objects. */
export class ITapDelegate extends Interface {
/** 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. */
handleClicks() {
}
handleClicks() {}
}
/**
@ -70,7 +65,7 @@ export class ScatterEvent extends BaseEvent {
toString() {
return (
'Event(\'scatterTransformed\', scale: ' +
"Event('scatterTransformed', scale: " +
this.scale +
' about: ' +
this.about.x +
@ -145,7 +140,12 @@ class Throwable {
// Avoid division by zero errors later on
// and consider the number of involved pointers sind addVelocity will be called by the
// 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)
while (this.velocities.length > buffer) {
this.velocities.shift()
@ -241,8 +241,8 @@ class Throwable {
// damping, collison detection, etc. here
let next = Points.multiplyScalar(velocity, this.throwDamping)
return {
x: (this.movableX) ? next.x : 0,
y: (this.movableY) ? next.y : 0
x: this.movableX ? next.x : 0,
y: this.movableY ? next.y : 0
}
}
@ -283,7 +283,7 @@ export class AbstractScatter extends Throwable {
onClose = null,
onThrowFinished = null,
scaleAutoClose = false,
scaleCloseThreshold = 0.10,
scaleCloseThreshold = 0.1,
scaleCloseBuffer = 0.05,
maxRotation = Angle.degree2radian(5),
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.
*/
this.scaleAutoClose = scaleAutoClose
@ -387,7 +387,7 @@ export class AbstractScatter extends Throwable {
if (this.useLowPassFilter) {
rotate = this.rotateLPF.next(rotate)
zoom = this.zoomLPF.next(zoom)
// console.log({rotate, zoom})
// console.log({rotate, zoom})
}
this.transform(delta, zoom, rotate, delta.about)
if (zoom != 1) this.interactionAnchor = delta.about
@ -395,8 +395,8 @@ export class AbstractScatter extends Throwable {
}
get polygon() {
let w2 = this.width * this.scale / 2
let h2 = this.height * this.scale / 2
let w2 = (this.width * this.scale) / 2
let h2 = (this.height * this.scale) / 2
let center = this.center
let polygon = new Polygon(center)
polygon.addPoint({ x: -w2, y: -h2 })
@ -409,11 +409,9 @@ export class AbstractScatter extends Throwable {
isOutside() {
let stagePolygon = this.containerPolygon
if (stagePolygon == null)
return false
if (stagePolygon == null) return false
let polygon = this.polygon
if (polygon == null)
return false
if (polygon == null) return false
let result = stagePolygon.intersectsWith(polygon)
return result === false || result.overlap < this.throwVisibility
}
@ -456,7 +454,7 @@ export class AbstractScatter extends Throwable {
keepOnStage(velocity, collision = 0.5) {
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
if (!stagePolygon) return { x: 0, y: 0 }
let polygon = this.polygon
@ -498,10 +496,18 @@ export class AbstractScatter extends Throwable {
_checkAutoClose() {
if (this.scaleAutoClose)
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) })
if (
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) {
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,
type: UPDATE
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -609,9 +615,15 @@ export class AbstractScatter extends Throwable {
let origin = this.rotationOrigin
let beta = Points.angle(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 offset = Points.subtract(anchor, origin)
this._move(offset)
@ -631,7 +643,7 @@ export class AbstractScatter extends Throwable {
rotate: rotate,
about: anchor
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -643,7 +655,7 @@ export class AbstractScatter extends Throwable {
/**
* For a given zoom, a new scale is calculated, taking
* min and max scale into account.
*
*
* @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.
*/
@ -661,8 +673,7 @@ export class AbstractScatter extends Throwable {
zoom = scale / this.scale
}
if (this.scaleAutoClose)
this._updateTransparency()
if (this.scaleAutoClose) this._updateTransparency()
return { zoom, scale }
}
@ -675,8 +686,10 @@ export class AbstractScatter extends Throwable {
}
calculateScaleTransparency() {
let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold
transparency = (transparency > 1) ? 1 : (transparency < 0) ? 0 : transparency
let transparency =
(this.scale - this.minScale) / this.scaleCloseThreshold
transparency =
transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
return transparency
}
@ -693,7 +706,7 @@ export class AbstractScatter extends Throwable {
animateZoomBounce(dt = 1) {
if (this.zoomAnchor != null) {
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.maxScale) zoom = 1 - amount
if (zoom != 1) {
@ -734,8 +747,8 @@ export class AbstractScatter extends Throwable {
if (this.scaleAutoClose) {
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout)
if (this.scaleAutoCloseTimeout)
clearTimeout(this.scaleAutoCloseTimeout)
this.scaleAutoCloseTimeout = setTimeout(() => {
this._checkAutoClose()
}, 600)
@ -745,7 +758,6 @@ export class AbstractScatter extends Throwable {
}
onStart(event, interaction) {
if (this.startGesture(interaction)) {
this.dragging = true
this.interactionAnchor = null
@ -759,7 +771,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: START
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -794,7 +806,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: END
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -805,7 +817,7 @@ export class AbstractScatter extends Throwable {
}
}
onTap(event, interaction, point) { }
onTap(event, interaction, point) {}
onDragUpdate(delta) {
if (this.onTransform != null) {
@ -816,7 +828,7 @@ export class AbstractScatter extends Throwable {
about: this.currentAbout,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -830,7 +842,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -844,7 +856,7 @@ export class AbstractScatter extends Throwable {
fast: true,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -857,16 +869,14 @@ export class AbstractScatter extends Throwable {
fast: false,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
}
onZoomed(about) {
if (this.scaleAutoClose)
this._updateTransparency()
if (this.scaleAutoClose) this._updateTransparency()
if (this.onTransform != null) {
let event = new ScatterEvent(this, {
@ -875,7 +885,7 @@ export class AbstractScatter extends Throwable {
fast: false,
type: null
})
this.onTransform.forEach(function (f) {
this.onTransform.forEach(function(f) {
f(event)
})
}
@ -901,7 +911,13 @@ export class DOMScatterContainer {
*/
constructor(
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.element = element
@ -1015,7 +1031,10 @@ export class DOMScatterContainer {
***/
let found = document.elementFromPoint(global.x, global.y)
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.claimEvents) event.claimedByScatter = target
return target
@ -1049,8 +1068,6 @@ export class DOMScatterContainer {
}
}
export class DOMScatter extends AbstractScatter {
constructor(
element,
@ -1074,7 +1091,7 @@ export class DOMScatter extends AbstractScatter {
x = 0,
y = 0,
width = null, // required
height = null, // required
height = null, // required
resizable = false,
tapDelegate = null,
triggerSVGClicks = false,
@ -1087,7 +1104,7 @@ export class DOMScatter extends AbstractScatter {
autoThrow = true,
scaleAutoClose = false,
onClose = null,
scaleCloseThreshold = 0.10,
scaleCloseThreshold = 0.1,
scaleCloseBuffer = 0.05,
useLowPassFilter = true,
maxRotation = Angle.degree2radian(15)
@ -1147,7 +1164,7 @@ export class DOMScatter extends AbstractScatter {
transformOrigin: transformOrigin
}
this.tapNodes = new Map()
// For tweenlite we need initial values in _gsTransform
TweenLite.set(element, this.initialValues)
this.onResize = onResize
@ -1166,15 +1183,15 @@ export class DOMScatter extends AbstractScatter {
button.className = 'interactiveElement'
this.element.appendChild(button)
button.addEventListener('pointerdown', (e) => {
button.addEventListener('pointerdown', e => {
this.startResize(e)
})
button.addEventListener('pointermove', (e) => {
button.addEventListener('pointermove', e => {
this.resize(e)
})
button.addEventListener('pointerup', (e) => {
button.addEventListener('pointerup', e => {
this.stopResize(e)
})
this.resizeButton = button
@ -1344,7 +1361,7 @@ export class DOMScatter extends AbstractScatter {
onTap(event, interaction, point) {
if (this.tapDelegate) {
Events.stop(event)
this.tapDelegate.tap(event, "scatter")
this.tapDelegate.tap(event, 'scatter')
}
}
@ -1396,12 +1413,18 @@ export class DOMScatter extends AbstractScatter {
e.preventDefault()
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.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)
@ -1424,23 +1447,31 @@ export class DOMScatter extends AbstractScatter {
rotation = (rotation + 360) % 360
let event = new CustomEvent('resized')
if (e.target.getAttribute('resizing') == 'true') {
let deltaX = (e.clientX - this.oldX)
let deltaY = (e.clientY - this.oldY)
let deltaX = e.clientX - this.oldX
let deltaY = e.clientY - this.oldY
let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2))
let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY))
phi = ((phi) + 630) % 360
let rot = ((rotation + 90) + 630) % 360
phi = (phi + 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 resizeW = r * Math.cos(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.oldY = e.clientY
@ -1454,9 +1485,15 @@ export class DOMScatter extends AbstractScatter {
e.preventDefault()
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%'
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)
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } })

File diff suppressed because it is too large Load Diff

View File

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

105
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "iwmlib",
"version": "1.0.15",
"version": "1.0.16",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -465,6 +465,7 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
"integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
"dev": true,
"requires": {
"es6-promisify": "^5.0.0"
}
@ -758,7 +759,8 @@
"async-limiter": {
"version": "1.0.0",
"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": {
"version": "1.0.0",
@ -842,7 +844,8 @@
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true
},
"base": {
"version": "0.11.2",
@ -938,6 +941,7 @@
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -1391,7 +1395,8 @@
"concat-map": {
"version": "0.0.1",
"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": {
"version": "1.6.2",
@ -1563,6 +1568,7 @@
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"requires": {
"ms": "2.0.0"
}
@ -1910,12 +1916,14 @@
"es6-promise": {
"version": "4.2.8",
"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": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
"integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
"dev": true,
"requires": {
"es6-promise": "^4.0.3"
}
@ -2348,6 +2356,7 @@
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
"integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
"dev": true,
"requires": {
"concat-stream": "1.6.2",
"debug": "2.6.9",
@ -2433,6 +2442,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
"integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
"dev": true,
"requires": {
"pend": "~1.2.0"
}
@ -2601,6 +2611,7 @@
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
@ -2610,7 +2621,8 @@
"graceful-fs": {
"version": "4.2.0",
"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": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true
},
"fsevents": {
"version": "1.2.9",
@ -3219,6 +3232,7 @@
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
"integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
@ -3681,6 +3695,29 @@
"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": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
@ -3911,6 +3948,7 @@
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
"integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
"dev": true,
"requires": {
"agent-base": "^4.3.0",
"debug": "^3.1.0"
@ -3920,6 +3958,7 @@
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
@ -3927,7 +3966,8 @@
"ms": {
"version": "2.1.2",
"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",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
@ -4577,6 +4618,7 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6"
}
@ -5004,7 +5046,8 @@
"mime": {
"version": "2.4.4",
"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": {
"version": "1.40.0",
@ -5036,6 +5079,7 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5080,6 +5124,7 @@
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
"minimist": "0.0.8"
},
@ -5087,14 +5132,16 @@
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
}
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"murmurhash-js": {
"version": "1.0.0",
@ -5338,6 +5385,7 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
"wrappy": "1"
}
@ -5538,7 +5586,8 @@
"path-is-absolute": {
"version": "1.0.1",
"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": {
"version": "2.0.1",
@ -5580,7 +5629,8 @@
"pend": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true
},
"performance-now": {
"version": "2.1.0",
@ -5695,6 +5745,18 @@
"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": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -5888,7 +5950,8 @@
"progress": {
"version": "2.0.3",
"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": {
"version": "1.4.6",
@ -5901,7 +5964,8 @@
"proxy-from-env": {
"version": "1.0.0",
"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": {
"version": "1.2.0",
@ -5940,6 +6004,7 @@
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz",
"integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==",
"dev": true,
"requires": {
"debug": "^4.1.0",
"extract-zip": "^1.6.6",
@ -5955,6 +6020,7 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
@ -5962,7 +6028,8 @@
"ms": {
"version": "2.1.2",
"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",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
"dev": true,
"requires": {
"glob": "^7.1.3"
}
@ -7594,7 +7662,8 @@
"universalify": {
"version": "0.1.2",
"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": {
"version": "1.0.0",
@ -7857,6 +7926,7 @@
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
"dev": true,
"requires": {
"async-limiter": "~1.0.0"
}
@ -7918,6 +7988,7 @@
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
"integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
"dev": true,
"requires": {
"fd-slicer": "~1.0.1"
}

View File

@ -1,6 +1,6 @@
{
"name": "iwmlib",
"version": "1.0.15",
"version": "1.0.16",
"description": "An Open Source library for multi-touch, WebGL powered applications.",
"main": "index.js",
"directories": {
@ -11,6 +11,7 @@
"build": "rollup --config ./rollup.config.js",
"watch": "rollup --watch --config ./rollup.config.js",
"3rdparty": "gulp",
"prettier": "gulp prettify",
"jsdoc": "jsdoc -c ./doc/conf.json"
},
"repository": {
@ -24,18 +25,20 @@
"eslint": "^6.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"fs-extra": "^8.0.1",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-prettier": "^2.1.0",
"gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0",
"gulp-uglify": "^3.0.2",
"htmlhint": "^0.11.0",
"prettier": "^1.18.2",
"puppeteer": "^1.18.1",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0"
},
"dependencies": {
"fs-extra": "^8.0.1",
"gsap": "^2.1.3",
"hammerjs": "^2.0.8",
"optimal-select": "^4.0.1",
@ -44,7 +47,6 @@
"pixi-particles": "^4.1.1",
"pixi-projection": "^0.2.8",
"pixi.js": "^4.8.8",
"propagating-hammerjs": "^1.4.6",
"puppeteer": "^1.18.1"
"propagating-hammerjs": "^1.4.6"
}
}