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

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/out/AbstractPopup.html
+5 -5
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>
doc/out/Badge.html
+5 -5
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>
doc/out/BlurFilter.html
+2 -2
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>
doc/out/Button.html
+6 -6
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>
doc/out/ButtonGroup.html
+5 -5
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>
doc/out/DeepZoomImage.html
+1 -1
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>
doc/out/DeepZoomInfo.html
+1 -1
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>
doc/out/Flippable.html
+3 -3
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>
doc/out/FontInfo.html
+2 -2
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>
doc/out/Hypenate.html
+3 -3
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>
doc/out/InteractivePopup.html
+5 -5
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>
doc/out/LabeledGraphics.exports.LabeledGraphics.html
+2 -2
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>
doc/out/LabeledGraphics.html
+8 -8
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>
doc/out/List.html
+6 -6
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>
doc/out/Message.html
+4 -4
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>
doc/out/MessageInteractivePopup.html
+2 -2
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>
doc/out/MessageMessageInteractivePopup.html
+2 -2
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>
doc/out/Modal.html
+5 -5
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>
doc/out/ModalInteractivePopup.html
+2 -2
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>
doc/out/ModalModalInteractivePopup.html
+2 -2
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>
doc/out/PIXIApp.html
+20 -20
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>
doc/out/Popup.html
+5 -5
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>
doc/out/PopupInteractivePopup.html
+2 -2
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>
doc/out/PopupMenu.html
+5 -5
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>
doc/out/PopupMenuPopupInteractivePopup.html
+2 -2
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>
doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
+2 -2
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>
doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
+2 -2
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>
doc/out/PopupMenuPopupPopupInteractivePopup.html
+2 -2
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>
doc/out/PopupPopupInteractivePopup.html
+2 -2
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>
doc/out/Progress.html
+5 -5
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>
doc/out/Scrollview.html
+3 -3
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>
doc/out/Slider.html
+5 -5
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>
doc/out/Switch.html
+5 -5
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>
doc/out/TextLabel.TextLabel.html
+2 -2
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>
doc/out/Theme.html
+3 -3
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>
doc/out/ThemeDark.html
+2 -2
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>
doc/out/ThemeLight.html
+2 -2
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>
doc/out/ThemeRed.html
+2 -2
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>
doc/out/TileQuadNode.html
+1 -1
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>
doc/out/Tooltip.html
+5 -5
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>
doc/out/UITest.html
+9 -9
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>
doc/out/Volatile.html
+3 -3
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>
doc/out/global.html
+1 -1
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>
doc/out/index.html
+1 -1
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>
doc/out/pixi_abstractpopup.js.html
+81 -64
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>
doc/out/pixi_app.js.html
+123 -75
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>
doc/out/pixi_badge.js.html
+34 -23
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>
doc/out/pixi_blurfilter.js.html
+45 -21
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>
doc/out/pixi_button.js.html
+184 -122
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>
doc/out/pixi_buttongroup.js.html
+100 -76
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>
doc/out/pixi_deepzoom_image.js.html
+1 -1
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>
doc/out/pixi_flippable.js.html
+85 -52
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>
doc/out/pixi_labeledgraphics.js.html
+62 -57
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>
doc/out/pixi_list.js.html
+76 -60
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>
doc/out/pixi_message.js.html
+30 -28
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>
doc/out/pixi_modal.js.html
+41 -32
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>
doc/out/pixi_popup.js.html
+53 -29
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>
doc/out/pixi_popupmenu.js.html
+30 -21
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>
doc/out/pixi_progress.js.html
+93 -68
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>
doc/out/pixi_scrollview.js.html
+8 -12
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>
doc/out/pixi_slider.js.html
+115 -86
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>
doc/out/pixi_switch.js.html
+161 -104
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>
doc/out/pixi_theme.js.html
+81 -55
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>
doc/out/pixi_tooltip.js.html
+26 -27
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>
doc/out/pixi_volatile.js.html
+27 -30
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>
doc/out/uitest.js.html
+438 -307
View File
File diff suppressed because it is too large Load Diff