Merge branch 'master' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib
This commit is contained in:
commit
bb660b0e04
2622
dist/iwmlib.js
vendored
2622
dist/iwmlib.js
vendored
File diff suppressed because it is too large
Load Diff
2740
dist/iwmlib.pixi.js
vendored
2740
dist/iwmlib.pixi.js
vendored
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1451,7 +1451,6 @@
|
||||
* @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).
|
||||
*
|
||||
@ -1485,13 +1484,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -1512,7 +1512,9 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
onHidden: null,
|
||||
visible: true,
|
||||
orientation: null
|
||||
}, opts)
|
||||
},
|
||||
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
|
||||
@ -1555,7 +1559,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// position
|
||||
//-----------------
|
||||
this.sy = this.opts.padding
|
||||
@ -1563,13 +1566,15 @@ 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)
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -1621,13 +1628,12 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// wanted width & wanted height
|
||||
//-----------------
|
||||
const padding = this.opts.padding
|
||||
const size = this.getInnerSize()
|
||||
const width = size.width + (2 * padding)
|
||||
const height = size.height + (2 * padding)
|
||||
const width = size.width + 2 * padding
|
||||
const height = size.height + 2 * padding
|
||||
|
||||
this.wantedWidth = Math.max(width, this.opts.minWidth)
|
||||
this.wantedHeight = Math.max(height, this.opts.minHeight)
|
||||
@ -1669,17 +1675,31 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
||||
const square =
|
||||
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
||||
const diameter = Math.round(this.opts.radius * 2)
|
||||
|
||||
this.clear()
|
||||
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||
this.lineStyle(
|
||||
this.opts.strokeWidth,
|
||||
this.opts.stroke,
|
||||
this.opts.strokeAlpha
|
||||
)
|
||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||
if (square && diameter === this.wantedWidth) {
|
||||
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
|
||||
this.drawCircle(
|
||||
this.wantedWidth / 2,
|
||||
this.wantedHeight / 2,
|
||||
this.opts.radius
|
||||
)
|
||||
} else {
|
||||
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
|
||||
this.drawRoundedRect(
|
||||
0,
|
||||
0,
|
||||
this.wantedWidth,
|
||||
this.wantedHeight,
|
||||
this.opts.radius
|
||||
)
|
||||
}
|
||||
this.endFill()
|
||||
|
||||
@ -1695,7 +1715,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @returns {object} An JavaScript object width the keys width and height.
|
||||
*/
|
||||
getInnerSize() {
|
||||
|
||||
let width = 0
|
||||
let height = 0
|
||||
|
||||
@ -1723,7 +1742,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
show(cb) {
|
||||
|
||||
TweenLite.to(this, this.theme.fast, {
|
||||
alpha: 1,
|
||||
onComplete: () => {
|
||||
@ -1743,7 +1761,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
hide(cb) {
|
||||
|
||||
TweenLite.to(this, this.theme.fast, {
|
||||
alpha: 0,
|
||||
onComplete: () => {
|
||||
@ -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>
|
||||
|
||||
@ -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 < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height) {
|
||||
if (
|
||||
context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height
|
||||
) {
|
||||
extendWidth = context.drawingBufferWidth / canvas.width
|
||||
extendHeight = context.drawingBufferHeight / canvas.height
|
||||
//dx = wantedWidth - context.drawingBufferWidth
|
||||
@ -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) {
|
||||
@ -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 && typeof apollo !== 'undefined') {
|
||||
|
||||
const networkInterface = apollo.createNetworkInterface({
|
||||
uri: '/graphql'
|
||||
})
|
||||
|
||||
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
|
||||
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 () {
|
||||
setTimeout(
|
||||
100,
|
||||
function() {
|
||||
this.orientationChanged(true)
|
||||
}.bind(this))
|
||||
}.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)
|
||||
}
|
||||
@ -1791,8 +1816,11 @@ export default class PIXIApp extends PIXI.Application {
|
||||
let canvas = this.renderer.view
|
||||
let context = canvas.getContext('webgl')
|
||||
|
||||
if (context !== null && (context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height)) {
|
||||
if (
|
||||
context !== null &&
|
||||
(context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height)
|
||||
) {
|
||||
extendWidth = context.drawingBufferWidth / canvas.width
|
||||
extendHeight = context.drawingBufferHeight / canvas.height
|
||||
//dx = wantedWidth - context.drawingBufferWidth
|
||||
@ -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,10 +1920,14 @@ 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 } = {}) {
|
||||
|
||||
this.loadTextures(resources, textures => {
|
||||
|
||||
loadSprites(
|
||||
resources,
|
||||
loaded = null,
|
||||
{ resolutionDependent = true, progress = false } = {}
|
||||
) {
|
||||
this.loadTextures(
|
||||
resources,
|
||||
textures => {
|
||||
let sprites = new Map()
|
||||
|
||||
for (let [key, texture] of textures) {
|
||||
@ -1899,8 +1937,9 @@ export default class PIXIApp extends PIXI.Application {
|
||||
if (loaded) {
|
||||
loaded.call(this, sprites)
|
||||
}
|
||||
|
||||
}, { resolutionDependent, progress })
|
||||
},
|
||||
{ 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 {
|
||||
@ -2081,7 +2124,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||
|
||||
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
|
||||
@ -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({
|
||||
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>
|
||||
|
||||
@ -1470,7 +1470,6 @@ 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.
|
||||
*
|
||||
@ -1483,15 +1482,18 @@ export default class Badge extends AbstractPopup {
|
||||
* to display.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
const theme = Theme.fromString(opts.theme)
|
||||
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
padding: theme.padding / 2,
|
||||
tooltip: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
|
||||
@ -1514,16 +1516,22 @@ 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)
|
||||
}
|
||||
}
|
||||
@ -1538,11 +1546,14 @@ export default class Badge extends AbstractPopup {
|
||||
* @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>
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -1509,7 +1508,9 @@ 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
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1519,16 +1520,27 @@ export default class BlurFilter extends PIXI.Filter {
|
||||
* @returns {Object}
|
||||
*/
|
||||
normalize(value) {
|
||||
|
||||
let shape = null
|
||||
|
||||
if (value instanceof PIXI.Circle) {
|
||||
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) {
|
||||
|
||||
const vertex = `
|
||||
attribute vec2 aVertexPosition;
|
||||
attribute vec2 aTextureCoord;
|
||||
@ -1619,7 +1629,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
||||
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)
|
||||
@ -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>
|
||||
|
||||
@ -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,13 +1545,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
label: null,
|
||||
x: 0,
|
||||
@ -1590,18 +1590,31 @@ export default class Button extends PIXI.Container {
|
||||
tooltip: null,
|
||||
badge: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
|
||||
if (
|
||||
typeof this.opts.icon === 'undefined' &&
|
||||
typeof this.opts.iconActive !== 'undefined'
|
||||
) {
|
||||
this.opts.icon = this.opts.iconActive
|
||||
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
|
||||
} else if (
|
||||
typeof this.opts.icon !== 'undefined' &&
|
||||
typeof this.opts.iconActive === 'undefined'
|
||||
) {
|
||||
this.opts.iconActive = this.opts.icon
|
||||
}
|
||||
|
||||
if (this.opts.style === 'link') {
|
||||
Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 })
|
||||
Object.assign(this.opts, {
|
||||
strokeAlpha: 0,
|
||||
strokeActiveAlpha: 0,
|
||||
fillAlpha: 0,
|
||||
fillActiveAlpha: 0
|
||||
})
|
||||
}
|
||||
|
||||
this._active = null
|
||||
@ -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
|
||||
@ -1724,9 +1754,16 @@ export default class Button extends PIXI.Container {
|
||||
//-----------------
|
||||
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({}, {
|
||||
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 {
|
||||
@ -1753,10 +1793,15 @@ export default class Button extends PIXI.Container {
|
||||
badge.x = this.x - badge.width / 2 + opts.offsetLeft
|
||||
break
|
||||
case 'center':
|
||||
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
|
||||
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
|
||||
badge.x =
|
||||
this.x + this.width - badge.width / 2 + opts.offsetLeft
|
||||
}
|
||||
|
||||
switch (opts.verticalAlign) {
|
||||
@ -1764,10 +1809,15 @@ export default class Button extends PIXI.Container {
|
||||
badge.y = this.y - badge.height / 2 + opts.offsetTop
|
||||
break
|
||||
case 'middle':
|
||||
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
|
||||
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
|
||||
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,7 +1923,6 @@ 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':
|
||||
@ -1900,16 +1948,16 @@ 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)
|
||||
this.content.x = (this._width - this.content.width) / 2
|
||||
break
|
||||
case 'right':
|
||||
this.content.x = this._width - this.opts.padding - this.content.width
|
||||
this.content.x =
|
||||
this._width - this.opts.padding - this.content.width
|
||||
break
|
||||
}
|
||||
|
||||
@ -1921,7 +1969,8 @@ export default class Button extends PIXI.Container {
|
||||
this.content.y = (this._height - this.content.height) / 2
|
||||
break
|
||||
case 'bottom':
|
||||
this.content.y = this._height - this.opts.padding - this.content.height
|
||||
this.content.y =
|
||||
this._height - this.opts.padding - this.content.height
|
||||
break
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1464,7 +1464,6 @@ 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.
|
||||
*
|
||||
@ -1514,13 +1513,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -1552,7 +1552,9 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
align: 'center', // left, center, right
|
||||
verticalAlign: 'middle', // top, middle, bottom
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.buttons = []
|
||||
|
||||
@ -1576,13 +1578,11 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @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' && button.opts.type === 'default') {
|
||||
if (
|
||||
this.opts.type === 'radio' &&
|
||||
button.opts.type === 'default'
|
||||
) {
|
||||
this.buttons.forEach(it => {
|
||||
if (it.opts.type === 'default') {
|
||||
it.active = false
|
||||
@ -1644,7 +1655,11 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
if (typeof it.tooltip === 'string') {
|
||||
it.tooltip = { content: it.tooltip, container: this }
|
||||
} else {
|
||||
it.tooltip = Object.assign({}, {container: this}, it.tooltip)
|
||||
it.tooltip = Object.assign(
|
||||
{},
|
||||
{ container: this },
|
||||
it.tooltip
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1653,7 +1668,10 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
this.addChild(button)
|
||||
this.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') {
|
||||
@ -1680,7 +1698,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// set position
|
||||
//-----------------
|
||||
this.position.set(this.opts.x, this.opts.y)
|
||||
@ -1699,18 +1716,30 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
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)
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
@ -1741,10 +1769,9 @@ 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))
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1754,7 +1781,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @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)
|
||||
@ -1766,7 +1792,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.alpha = 1
|
||||
|
||||
return this
|
||||
@ -1778,7 +1803,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,10 +1507,11 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
front,
|
||||
back,
|
||||
renderer,
|
||||
@ -1527,11 +1527,18 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
near: 10,
|
||||
far: 10000,
|
||||
orthographic: false
|
||||
}, opts)
|
||||
},
|
||||
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,10 +1577,12 @@ 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
|
||||
@ -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
|
||||
@ -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: 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: 0.2, ease })
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1767,13 +1788,13 @@ 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
|
||||
@ -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)
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
@ -1464,11 +1461,9 @@ export class FontInfo {
|
||||
* @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('-')
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -1571,7 +1569,6 @@ 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
|
||||
@ -1579,7 +1576,12 @@ class TextLabel extends PIXI.Text {
|
||||
* @param {canvas}
|
||||
* @memberof TextLabel
|
||||
*/
|
||||
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
|
||||
constructor(
|
||||
text,
|
||||
style = null,
|
||||
canvas = null,
|
||||
{ minZoom = 0.1, maxZoom = 10 } = {}
|
||||
) {
|
||||
super(text, style, canvas)
|
||||
this.normFontSize = this.style.fontSize
|
||||
this.minZoom = minZoom
|
||||
@ -1620,7 +1622,6 @@ 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.
|
||||
*
|
||||
@ -1635,7 +1636,6 @@ 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.
|
||||
@ -1653,11 +1653,9 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||
* @memberof LabeledGraphics
|
||||
*/
|
||||
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
|
||||
|
||||
if (attrs.maxWidth && attrs.maxLines == 1) {
|
||||
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (attrs.maxWidth) {
|
||||
label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth)
|
||||
}
|
||||
@ -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) {
|
||||
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 })
|
||||
length: data.length + wordLength + spaceLength
|
||||
}
|
||||
},
|
||||
{ text: '', length: dotsLength }
|
||||
)
|
||||
truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`
|
||||
newText = truncatedLines.join('\n')
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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,10 +1482,11 @@ export default class List extends PIXI.Container {
|
||||
* scroll your list.
|
||||
*/
|
||||
constructor(items = [], opts = {}) {
|
||||
|
||||
super()
|
||||
|
||||
this.opts = Object.assign({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
orientation: 'vertical',
|
||||
@ -1495,7 +1495,9 @@ export default class List extends PIXI.Container {
|
||||
width: null,
|
||||
height: null,
|
||||
app: null
|
||||
}, opts)
|
||||
},
|
||||
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()
|
||||
@ -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)) {
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -1660,10 +1669,9 @@ 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
|
||||
|
||||
@ -1674,10 +1682,9 @@ 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
|
||||
|
||||
@ -1690,7 +1697,6 @@ export default class List extends PIXI.Container {
|
||||
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
|
||||
*/
|
||||
resize(widthOrHeight) {
|
||||
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
this.opts.width = widthOrHeight
|
||||
} else {
|
||||
@ -1706,7 +1712,6 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onStart(event) {
|
||||
|
||||
this.__dragging = true
|
||||
|
||||
this.capture(event)
|
||||
@ -1717,7 +1722,7 @@ export default class List extends PIXI.Container {
|
||||
}
|
||||
|
||||
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
|
||||
if (typeof ThrowPropsPlugin != "undefined") {
|
||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
||||
ThrowPropsPlugin.track(this.container.position, 'x,y')
|
||||
}
|
||||
}
|
||||
@ -1728,9 +1733,7 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onMove(event) {
|
||||
|
||||
if (this.__dragging) {
|
||||
|
||||
this.capture(event)
|
||||
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
@ -1747,7 +1750,6 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onEnd(event) {
|
||||
|
||||
if (this.__dragging) {
|
||||
this.__dragging = false
|
||||
|
||||
@ -1773,12 +1775,18 @@ export default class List extends PIXI.Container {
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof ThrowPropsPlugin != "undefined") {
|
||||
ThrowPropsPlugin.to(this.container.position, {
|
||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
||||
ThrowPropsPlugin.to(
|
||||
this.container.position,
|
||||
{
|
||||
throwProps,
|
||||
ease: Strong.easeOut,
|
||||
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
|
||||
}, .8, .4)
|
||||
onComplete: () =>
|
||||
ThrowPropsPlugin.untrack(this.container.position)
|
||||
},
|
||||
0.8,
|
||||
0.4
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1789,21 +1797,26 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onScroll(event) {
|
||||
|
||||
this.capture(event)
|
||||
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
this.container.position.x -= event.deltaX
|
||||
if (this.container.position.x > 0) {
|
||||
this.container.position.x = 0
|
||||
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
|
||||
} else if (
|
||||
this.container.position.x + this.innerWidth <
|
||||
this.opts.width
|
||||
) {
|
||||
this.container.position.x = this.opts.width - this.innerWidth
|
||||
}
|
||||
} else {
|
||||
this.container.position.y -= event.deltaY
|
||||
if (this.container.position.y > 0) {
|
||||
this.container.position.y = 0
|
||||
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
|
||||
} else if (
|
||||
this.container.position.y + this.innerHeight <
|
||||
this.opts.height
|
||||
) {
|
||||
this.container.position.y = this.opts.height - this.innerHeight
|
||||
}
|
||||
}
|
||||
@ -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 && event.data.originalEvent ? event.data.originalEvent : event
|
||||
const originalEvent =
|
||||
event.data && 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>
|
||||
|
||||
@ -1473,7 +1473,6 @@ 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.
|
||||
*
|
||||
@ -1493,10 +1492,11 @@ 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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
app: window.app,
|
||||
closeButton: false,
|
||||
minWidth: 280,
|
||||
@ -1507,7 +1507,9 @@ export default class Message extends InteractivePopup {
|
||||
duration: 5,
|
||||
autoClose: true,
|
||||
closeDuration: theme.fast
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
}
|
||||
@ -1518,7 +1520,6 @@ export default class Message extends InteractivePopup {
|
||||
* @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,10 +1542,11 @@ 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
|
||||
}
|
||||
}
|
||||
@ -1554,7 +1557,6 @@ export default class Message extends InteractivePopup {
|
||||
* @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>
|
||||
|
||||
@ -1468,7 +1468,6 @@ 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.
|
||||
*
|
||||
@ -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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
app: window.app,
|
||||
backgroundFill: theme.background,
|
||||
backgroundFillAlpha: .6,
|
||||
backgroundFillAlpha: 0.6,
|
||||
closeOnBackground: true,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -1522,7 +1524,6 @@ export default class Modal extends PIXI.Container {
|
||||
* @return {Modal} A reference to the modal for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// interaction
|
||||
//-----------------
|
||||
this.interactive = true
|
||||
@ -1567,14 +1568,16 @@ export default class Modal extends PIXI.Container {
|
||||
* @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()
|
||||
|
||||
@ -1591,7 +1594,10 @@ export default class Modal extends PIXI.Container {
|
||||
* @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
|
||||
}
|
||||
@ -1602,7 +1608,10 @@ export default class Modal extends PIXI.Container {
|
||||
* @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
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
closeOnPopup: false,
|
||||
closeButton: true,
|
||||
button: null,
|
||||
buttonGroup: null
|
||||
}, opts)
|
||||
},
|
||||
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
|
||||
@ -1596,7 +1616,6 @@ export class InteractivePopup extends AbstractPopup {
|
||||
* @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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
closeButton: false,
|
||||
minWidth: 0,
|
||||
minHeight: 0
|
||||
}, opts)
|
||||
},
|
||||
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>
|
||||
|
||||
@ -1468,7 +1468,6 @@ 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.
|
||||
*
|
||||
@ -1483,15 +1482,18 @@ 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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
items: [],
|
||||
margin: theme.margin / 2,
|
||||
textStyle: theme.textStyle,
|
||||
closeOnPopup: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
}
|
||||
@ -1503,18 +1505,19 @@ export default class PopupMenu extends Popup {
|
||||
* @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>
|
||||
|
||||
@ -1458,7 +1458,6 @@
|
||||
* @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.
|
||||
*
|
||||
@ -1493,13 +1492,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
app: window.app,
|
||||
width: null,
|
||||
@ -1522,7 +1522,9 @@ export default class Progress extends PIXI.Container {
|
||||
radius: theme.radius,
|
||||
destroyOnComplete: true,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -1552,7 +1554,6 @@ export default class Progress extends PIXI.Container {
|
||||
* @return {Progress} A reference to the progress for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// interaction
|
||||
//-----------------
|
||||
this.on('added', e => {
|
||||
@ -1586,7 +1587,6 @@ export default class Progress extends PIXI.Container {
|
||||
* @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()
|
||||
}
|
||||
@ -1611,7 +1614,6 @@ export default class Progress extends PIXI.Container {
|
||||
* @return {Progress} A reference to the progress for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
this.bar.clear()
|
||||
this.barActive.clear()
|
||||
|
||||
@ -1628,22 +1630,31 @@ export default class Progress extends PIXI.Container {
|
||||
* @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)
|
||||
}
|
||||
@ -1662,17 +1673,29 @@ export default class Progress extends PIXI.Container {
|
||||
* @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)
|
||||
}
|
||||
@ -1702,7 +1725,10 @@ export default class Progress extends PIXI.Container {
|
||||
* @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
|
||||
}
|
||||
@ -1716,7 +1742,6 @@ export default class Progress extends PIXI.Container {
|
||||
return this._progress
|
||||
}
|
||||
set progress(value) {
|
||||
|
||||
value = Math.round(value)
|
||||
|
||||
if (value < 0) {
|
||||
@ -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>
|
||||
|
||||
@ -1466,7 +1466,6 @@
|
||||
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
|
||||
*/
|
||||
export default class Scrollview extends Scrollbox {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Scrollview.
|
||||
*
|
||||
@ -1474,7 +1473,6 @@ export default class Scrollview extends Scrollbox {
|
||||
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
super(opts)
|
||||
|
||||
this.opts = opts
|
||||
@ -1487,7 +1485,6 @@ export default class Scrollview extends Scrollbox {
|
||||
* @return {Scrollview} A reference to the Scrollview for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -1497,7 +1494,6 @@ export default class Scrollview extends Scrollbox {
|
||||
* @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>
|
||||
|
||||
@ -1491,7 +1491,6 @@ 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.
|
||||
*
|
||||
@ -1526,13 +1525,14 @@ export default class Slider extends PIXI.Container {
|
||||
* @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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -1545,7 +1545,7 @@ export default class Slider extends PIXI.Container {
|
||||
strokeWidth: theme.strokeWidth,
|
||||
strokeAlpha: theme.strokeAlpha,
|
||||
controlFill: theme.fill,
|
||||
controlFillAlpha: .5,
|
||||
controlFillAlpha: 0.5,
|
||||
controlStroke: theme.primaryColor,
|
||||
controlStrokeWidth: 2,
|
||||
controlStrokeAlpha: theme.strokeAlpha,
|
||||
@ -1560,7 +1560,9 @@ export default class Slider extends PIXI.Container {
|
||||
onComplete: null,
|
||||
tooltip: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.opts.container = this.opts.container || this
|
||||
|
||||
@ -1608,15 +1610,18 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
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)
|
||||
@ -1673,7 +1686,7 @@ export default class Slider extends PIXI.Container {
|
||||
// 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 => {
|
||||
@ -1682,7 +1695,7 @@ export default class Slider extends PIXI.Container {
|
||||
|
||||
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,8 +1703,10 @@ 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 })
|
||||
}
|
||||
})
|
||||
|
||||
@ -1722,7 +1737,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// set position
|
||||
//-----------------
|
||||
this.position.set(this.opts.x, this.opts.y)
|
||||
@ -1741,7 +1755,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
const r = this.radius
|
||||
const cr = this.opts.controlRadius
|
||||
const w = this.opts.width
|
||||
@ -1752,7 +1765,11 @@ 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)
|
||||
@ -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()
|
||||
|
||||
@ -1783,7 +1810,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
onEnd(e) {
|
||||
|
||||
if (this.control.dragging) {
|
||||
this.control.event = null
|
||||
this.control.dragging = false
|
||||
@ -1808,7 +1834,10 @@ 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)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1824,7 +1853,10 @@ 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
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1857,7 +1889,6 @@ export default class Slider extends PIXI.Container {
|
||||
return this._disabled
|
||||
}
|
||||
set disabled(value) {
|
||||
|
||||
this._disabled = value
|
||||
|
||||
if (this._disabled) {
|
||||
@ -1865,7 +1896,7 @@ export default class Slider extends PIXI.Container {
|
||||
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
|
||||
@ -1881,7 +1912,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.opts.strokeAlpha = 1
|
||||
this.opts.fillAlpha = 1
|
||||
this.opts.controlStrokeAlpha = 1
|
||||
@ -1898,7 +1928,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
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>
|
||||
|
||||
@ -1499,7 +1499,6 @@ 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.
|
||||
*
|
||||
@ -1546,13 +1545,14 @@ export default class Switch extends PIXI.Container {
|
||||
* @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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -1573,10 +1573,10 @@ export default class Switch extends PIXI.Container {
|
||||
controlFillActive: theme.stroke,
|
||||
controlFillActiveAlpha: theme.strokeAlpha,
|
||||
controlStroke: theme.stroke,
|
||||
controlStrokeWidth: theme.strokeWidth * .8,
|
||||
controlStrokeWidth: theme.strokeWidth * 0.8,
|
||||
controlStrokeAlpha: theme.strokeAlpha,
|
||||
controlStrokeActive: theme.stroke,
|
||||
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
|
||||
controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
|
||||
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
|
||||
duration: theme.fast,
|
||||
durationActive: theme.fast,
|
||||
@ -1588,10 +1588,14 @@ export default class Switch extends PIXI.Container {
|
||||
afterAction: null,
|
||||
tooltip: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
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
|
||||
//-----------------
|
||||
@ -1645,7 +1649,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// Switch
|
||||
//-----------------
|
||||
let switchObj = new PIXI.Graphics()
|
||||
@ -1668,7 +1671,7 @@ export default class Switch extends PIXI.Container {
|
||||
// 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 => {
|
||||
@ -1676,11 +1679,10 @@ export default class Switch extends PIXI.Container {
|
||||
})
|
||||
|
||||
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)
|
||||
@ -1735,7 +1737,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// set position
|
||||
//-----------------
|
||||
this.position.set(this.opts.x, this.opts.y)
|
||||
@ -1754,20 +1755,42 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
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.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,
|
||||
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,12 +1799,26 @@ 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()
|
||||
@ -1796,23 +1833,48 @@ export default class Switch extends PIXI.Container {
|
||||
* @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.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,
|
||||
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()
|
||||
|
||||
@ -1829,11 +1891,9 @@ 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.tempAnimated, this.opts.duration, {
|
||||
colorProps: {
|
||||
@ -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,
|
||||
@ -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
|
||||
@ -1910,7 +1969,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.opts.strokeAlpha = 1
|
||||
this.opts.strokeActiveAlpha = 1
|
||||
this.opts.fillAlpha = 1
|
||||
@ -1931,7 +1989,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
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>
|
||||
|
||||
@ -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,17 +1520,19 @@ export default class Theme {
|
||||
* is used for large actived text.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
|
||||
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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
margin: 12,
|
||||
padding: 12,
|
||||
radius: 4,
|
||||
fast: .25,
|
||||
normal: .5,
|
||||
fast: 0.25,
|
||||
normal: 0.5,
|
||||
slow: 1,
|
||||
primaryColor: colorPrimary,
|
||||
color1: color1,
|
||||
@ -1541,19 +1542,24 @@ export default class Theme {
|
||||
fillActive: color1,
|
||||
fillActiveAlpha: 1,
|
||||
stroke: color2,
|
||||
strokeWidth: .6,
|
||||
strokeWidth: 0.6,
|
||||
strokeAlpha: 1,
|
||||
strokeActive: color2,
|
||||
strokeActiveWidth: .6,
|
||||
strokeActiveWidth: 0.6,
|
||||
strokeActiveAlpha: 1,
|
||||
iconColor: color2,
|
||||
iconColorActive: colorPrimary,
|
||||
background: color1
|
||||
}, opts)
|
||||
},
|
||||
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',
|
||||
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,
|
||||
@ -1561,12 +1567,39 @@ export default class Theme {
|
||||
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
|
||||
)
|
||||
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 && 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,14 +1663,12 @@ 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 })
|
||||
}
|
||||
}
|
||||
@ -1663,14 +1691,12 @@ export class ThemeLight extends Theme {
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
|
||||
*/
|
||||
export class ThemeRed extends Theme {
|
||||
|
||||
/**
|
||||
* Creates an instance of a ThemeRed.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
constructor() {
|
||||
|
||||
super({ primaryColor: 0xd92f31 })
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1469,7 +1469,6 @@ 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.
|
||||
*
|
||||
@ -1485,10 +1484,11 @@ 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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
padding: theme.padding / 2,
|
||||
@ -1497,7 +1497,9 @@ export default class Tooltip extends AbstractPopup {
|
||||
offsetLeft: 8,
|
||||
offsetTop: -8,
|
||||
delay: 0
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
opts.container = opts.container || opts.object
|
||||
|
||||
@ -1519,7 +1521,6 @@ export default class Tooltip extends AbstractPopup {
|
||||
* @return {Tooltip} A reference to the tooltip for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
super.setup()
|
||||
|
||||
// bind events this
|
||||
@ -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
|
||||
@ -1584,7 +1584,6 @@ export default class Tooltip extends AbstractPopup {
|
||||
* @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>
|
||||
|
||||
@ -1469,7 +1469,6 @@ import Theme from './theme.js'
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
|
||||
*/
|
||||
export default class Volatile {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Volatile.
|
||||
*
|
||||
@ -1486,11 +1485,12 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
object: null,
|
||||
direction: 'top', // top, right, bottom, left
|
||||
@ -1500,7 +1500,9 @@ export default class Volatile {
|
||||
duration: 1.5,
|
||||
ease: Quad.easeOut,
|
||||
destroyOnComplete: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -1530,7 +1532,6 @@ export default class Volatile {
|
||||
* @return {Volatile} A reference to the volatile for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -1540,7 +1541,6 @@ export default class Volatile {
|
||||
* @return {Volatile} A reference to the volatile for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -1551,9 +1551,7 @@ export default class Volatile {
|
||||
* @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,7 +1582,6 @@ export default class Volatile {
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
|
||||
if (this.opts.onComplete) {
|
||||
this.opts.onComplete.call(object, object)
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1464,7 +1464,6 @@
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest}
|
||||
*/
|
||||
export default class UITest {
|
||||
|
||||
/**
|
||||
* Creates an instance of an UITest.
|
||||
*
|
||||
@ -1478,19 +1477,28 @@ export default class UITest {
|
||||
* @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
this.opts = Object.assign({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
timeScale: 1,
|
||||
eventType: 'auto',
|
||||
debug: false,
|
||||
defaultInterval: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline = new TimelineMax(Object.assign({}, {
|
||||
this._timeline = new TimelineMax(
|
||||
Object.assign(
|
||||
{},
|
||||
{
|
||||
paused: true
|
||||
}, this.opts))
|
||||
},
|
||||
this.opts
|
||||
)
|
||||
)
|
||||
this._timeline.timeScale(this.opts.timeScale)
|
||||
|
||||
// eventType
|
||||
@ -1592,19 +1600,26 @@ export default class UITest {
|
||||
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
|
||||
*/
|
||||
tap(element, position, timelinePosition, opts = {}) {
|
||||
|
||||
// arguments
|
||||
//--------------------
|
||||
[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
;[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
this._timelinePositions.push(timelinePosition)
|
||||
|
||||
// debug
|
||||
//--------------------
|
||||
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
|
||||
if (this.opts.debug)
|
||||
console.log('tap params', {
|
||||
element,
|
||||
position,
|
||||
timelinePosition,
|
||||
opts
|
||||
})
|
||||
|
||||
// opts
|
||||
//--------------------
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
onStart: null,
|
||||
onComplete: null,
|
||||
eventTypes: this.resolveEvents(['down', 'up']),
|
||||
@ -1612,17 +1627,21 @@ export default class UITest {
|
||||
context: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
if (opts.eventType) {
|
||||
opts.eventTypes = opts.eventType
|
||||
}
|
||||
opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes]
|
||||
opts.eventTypes = Array.isArray(opts.eventTypes)
|
||||
? opts.eventTypes
|
||||
: [opts.eventTypes]
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline.addCallback(position => {
|
||||
|
||||
this._timeline.addCallback(
|
||||
position => {
|
||||
// element
|
||||
//--------------------
|
||||
const elem = Util.extractElement(opts.context, element)
|
||||
@ -1647,14 +1666,22 @@ export default class UITest {
|
||||
|
||||
// event opts
|
||||
//--------------------
|
||||
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable}
|
||||
const eventOpts = {
|
||||
bubbles: opts.bubbles,
|
||||
cancelable: opts.cancelable
|
||||
}
|
||||
|
||||
if (opts.eventTypes[0]) {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', eventStart)
|
||||
const eventStart = Event.create(
|
||||
elem,
|
||||
coords,
|
||||
opts.eventTypes[0],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', eventStart)
|
||||
elem.dispatchEvent(eventStart)
|
||||
|
||||
// onStart
|
||||
@ -1666,8 +1693,14 @@ export default class UITest {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', eventComplete)
|
||||
const eventComplete = Event.create(
|
||||
elem,
|
||||
coords,
|
||||
opts.eventTypes[1],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', eventComplete)
|
||||
elem.dispatchEvent(eventComplete)
|
||||
|
||||
// onComplete
|
||||
@ -1675,8 +1708,10 @@ export default class UITest {
|
||||
if (opts.onComplete) {
|
||||
opts.onComplete.call(this, eventComplete)
|
||||
}
|
||||
|
||||
}, timelinePosition, [position])
|
||||
},
|
||||
timelinePosition,
|
||||
[position]
|
||||
)
|
||||
|
||||
this._actions++
|
||||
|
||||
@ -1702,19 +1737,26 @@ export default class UITest {
|
||||
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
|
||||
*/
|
||||
pan(element, position, timelinePosition, opts = {}) {
|
||||
|
||||
// arguments
|
||||
//--------------------
|
||||
[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
;[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
this._timelinePositions.push(timelinePosition)
|
||||
|
||||
// debug
|
||||
//--------------------
|
||||
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
|
||||
if (this.opts.debug)
|
||||
console.log('tap params', {
|
||||
element,
|
||||
position,
|
||||
timelinePosition,
|
||||
opts
|
||||
})
|
||||
|
||||
// opts
|
||||
//--------------------
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
onStart: null,
|
||||
onUpdate: null,
|
||||
onComplete: null,
|
||||
@ -1725,12 +1767,14 @@ export default class UITest {
|
||||
context: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline.addCallback(position => {
|
||||
|
||||
this._timeline.addCallback(
|
||||
position => {
|
||||
// element
|
||||
//--------------------
|
||||
const elem = Util.extractElement(opts.context, element)
|
||||
@ -1741,16 +1785,24 @@ export default class UITest {
|
||||
|
||||
// event opts
|
||||
//--------------------
|
||||
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable}
|
||||
const eventOpts = {
|
||||
bubbles: opts.bubbles,
|
||||
cancelable: opts.cancelable
|
||||
}
|
||||
|
||||
const gsOpts = {
|
||||
ease: opts.ease,
|
||||
onStart: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[0],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onStart
|
||||
@ -1760,11 +1812,16 @@ export default class UITest {
|
||||
}
|
||||
},
|
||||
onUpdate: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[1],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onUpdate
|
||||
@ -1774,11 +1831,16 @@ export default class UITest {
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[2],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onComplete
|
||||
@ -1797,8 +1859,10 @@ export default class UITest {
|
||||
// drag animation
|
||||
//--------------------
|
||||
TweenLite.to(from, opts.duration, gsOpts)
|
||||
|
||||
}, timelinePosition, [position])
|
||||
},
|
||||
timelinePosition,
|
||||
[position]
|
||||
)
|
||||
|
||||
this._actions++
|
||||
|
||||
@ -1827,19 +1891,26 @@ export default class UITest {
|
||||
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
|
||||
*/
|
||||
pinch(element, position, timelinePosition, opts = {}) {
|
||||
|
||||
// arguments
|
||||
//--------------------
|
||||
[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
;[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
this._timelinePositions.push(timelinePosition)
|
||||
|
||||
// debug
|
||||
//--------------------
|
||||
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
|
||||
if (this.opts.debug)
|
||||
console.log('tap params', {
|
||||
element,
|
||||
position,
|
||||
timelinePosition,
|
||||
opts
|
||||
})
|
||||
|
||||
// opts
|
||||
//--------------------
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
onStart: null,
|
||||
onUpdate: null,
|
||||
onComplete: null,
|
||||
@ -1853,12 +1924,14 @@ export default class UITest {
|
||||
context: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline.addCallback(position => {
|
||||
|
||||
this._timeline.addCallback(
|
||||
position => {
|
||||
// element
|
||||
//--------------------
|
||||
const elem = Util.extractElement(opts.context, element)
|
||||
@ -1882,7 +1955,7 @@ export default class UITest {
|
||||
let gsOpts2 = {}
|
||||
|
||||
if (opts.to || opts.bezier) {
|
||||
[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
|
||||
;[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
|
||||
} else {
|
||||
const distance = opts.distance != null ? opts.distance : 100
|
||||
gsOpts1.x = from1.x - distance / 2
|
||||
@ -1900,56 +1973,84 @@ export default class UITest {
|
||||
// loop
|
||||
//--------------------
|
||||
pointers.forEach((value, key) => {
|
||||
|
||||
// from
|
||||
//--------------------
|
||||
const from = value.element
|
||||
|
||||
// event opts
|
||||
//--------------------
|
||||
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable, pointerId: key, isPrimary: key === 0}
|
||||
const eventOpts = {
|
||||
bubbles: opts.bubbles,
|
||||
cancelable: opts.cancelable,
|
||||
pointerId: key,
|
||||
isPrimary: key === 0
|
||||
}
|
||||
|
||||
const gsOpts = {
|
||||
ease: opts.ease,
|
||||
onStart: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[0],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onStart
|
||||
//--------------------
|
||||
if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
|
||||
if (
|
||||
opts.onStart &&
|
||||
(opts.doubleCallbacks || key === 0)
|
||||
) {
|
||||
opts.onStart.call(this, event)
|
||||
}
|
||||
},
|
||||
onUpdate: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[1],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onUpdate
|
||||
//--------------------
|
||||
if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
|
||||
if (
|
||||
opts.onUpdate &&
|
||||
(opts.doubleCallbacks || key === 0)
|
||||
) {
|
||||
opts.onUpdate.call(this, event)
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[2],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onComplete
|
||||
//--------------------
|
||||
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
|
||||
if (
|
||||
opts.onComplete &&
|
||||
(opts.doubleCallbacks || key === 0)
|
||||
) {
|
||||
opts.onComplete.call(this, event)
|
||||
}
|
||||
}
|
||||
@ -1963,8 +2064,10 @@ export default class UITest {
|
||||
//--------------------
|
||||
TweenLite.to(from, opts.duration, gsOpts)
|
||||
})
|
||||
|
||||
}, timelinePosition, [position])
|
||||
},
|
||||
timelinePosition,
|
||||
[position]
|
||||
)
|
||||
|
||||
this._actions++
|
||||
|
||||
@ -2015,7 +2118,6 @@ export default class UITest {
|
||||
* @returns {array} - Returns an array of the position, the timelinePosition and the opts object.
|
||||
*/
|
||||
reorderArguments(params) {
|
||||
|
||||
// first parameter
|
||||
//--------------------
|
||||
const element = params[0]
|
||||
@ -2030,7 +2132,11 @@ export default class UITest {
|
||||
//--------------------
|
||||
if (Util.isNumber(params[1])) {
|
||||
timelinePosition = params[1]
|
||||
} else if (Util.isObject(params[1]) && !Util.isPixiDisplayObject(params[1]) && (params[1].x == null || params[1].y == null)) {
|
||||
} else if (
|
||||
Util.isObject(params[1]) &&
|
||||
!Util.isPixiDisplayObject(params[1]) &&
|
||||
(params[1].x == null || params[1].y == null)
|
||||
) {
|
||||
opts = params[1]
|
||||
} else if (params[1] != null) {
|
||||
position = params[1]
|
||||
@ -2058,9 +2164,13 @@ export default class UITest {
|
||||
|
||||
if (timelinePosition === null) {
|
||||
if (this.opts.defaultInterval === null && this._actions > 1) {
|
||||
throw new Error('No execution time was specified for this action, and a default interval was not set in the class constructor!')
|
||||
throw new Error(
|
||||
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
|
||||
)
|
||||
}
|
||||
timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1)
|
||||
timelinePosition =
|
||||
Math.max(...this._timelinePositions) +
|
||||
(this.opts.defaultInterval || 1)
|
||||
}
|
||||
|
||||
if (opts === null) {
|
||||
@ -2077,7 +2187,6 @@ export default class UITest {
|
||||
* @param {string[]} events - An array of event types.
|
||||
*/
|
||||
resolveEvents(events) {
|
||||
|
||||
const data = []
|
||||
|
||||
if (this.opts.eventType === 'pointer') {
|
||||
@ -2128,7 +2237,6 @@ export default class UITest {
|
||||
* @class
|
||||
*/
|
||||
class Util {
|
||||
|
||||
/**
|
||||
* Resolves the element from a specific context.
|
||||
*
|
||||
@ -2137,9 +2245,12 @@ class Util {
|
||||
* @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method.
|
||||
*/
|
||||
static extractElement(context, element) {
|
||||
|
||||
const cont = Util.isFrame(context) ? context.contentDocument : context.document
|
||||
const elem = Util.isString(element) ? cont.querySelector(element) : element
|
||||
const cont = Util.isFrame(context)
|
||||
? context.contentDocument
|
||||
: context.document
|
||||
const elem = Util.isString(element)
|
||||
? cont.querySelector(element)
|
||||
: element
|
||||
|
||||
return elem
|
||||
}
|
||||
@ -2152,7 +2263,6 @@ class Util {
|
||||
* @return {object} - Returns an object with the keys x and y.
|
||||
*/
|
||||
static extractPosition(object) {
|
||||
|
||||
// event coords
|
||||
//--------------------
|
||||
const position = { x: 0, y: 0 }
|
||||
@ -2185,11 +2295,9 @@ class Util {
|
||||
* @return {object} - Returns an object with the to or bezier keys.
|
||||
*/
|
||||
static extractTo(opts) {
|
||||
|
||||
const object = {}
|
||||
|
||||
if (opts.bezier) {
|
||||
|
||||
let bezier = null
|
||||
|
||||
if (Array.isArray(opts.bezier)) {
|
||||
@ -2198,7 +2306,9 @@ class Util {
|
||||
type: 'thru'
|
||||
}
|
||||
} else {
|
||||
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
|
||||
opts.bezier.values = opts.bezier.values.map(it =>
|
||||
Util.extractPosition(it)
|
||||
)
|
||||
bezier = opts.bezier
|
||||
}
|
||||
|
||||
@ -2220,13 +2330,10 @@ class Util {
|
||||
* @return {object[]} - Returns an array of objects with the keys x and y.
|
||||
*/
|
||||
static extractMultiTo(opts) {
|
||||
|
||||
const objects = []
|
||||
|
||||
if (opts.bezier) {
|
||||
|
||||
opts.bezier.forEach(it => {
|
||||
|
||||
let bezier = null
|
||||
|
||||
if (Array.isArray(it)) {
|
||||
@ -2243,9 +2350,7 @@ class Util {
|
||||
bezier
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
opts.to.forEach(it => {
|
||||
const to = Util.extractPosition(it)
|
||||
objects.push({
|
||||
@ -2299,7 +2404,11 @@ class Util {
|
||||
* @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false.
|
||||
*/
|
||||
static isPixiDisplayObject(object) {
|
||||
return typeof object.getBounds === 'function' && typeof object.renderWebGL === 'function' && typeof object.setTransform === 'function'
|
||||
return (
|
||||
typeof object.getBounds === 'function' &&
|
||||
typeof object.renderWebGL === 'function' &&
|
||||
typeof object.setTransform === 'function'
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -2326,7 +2435,6 @@ class Util {
|
||||
* @class
|
||||
*/
|
||||
class Event {
|
||||
|
||||
/**
|
||||
* Creates an event object.
|
||||
*
|
||||
@ -2336,9 +2444,16 @@ class Event {
|
||||
* @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events
|
||||
* @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties.
|
||||
*/
|
||||
static create(target, position = {x: 0, y: 0}, type = 'pointerup', opts = {}) {
|
||||
|
||||
const rect = typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : {x: 0, y: 0}
|
||||
static create(
|
||||
target,
|
||||
position = { x: 0, y: 0 },
|
||||
type = 'pointerup',
|
||||
opts = {}
|
||||
) {
|
||||
const rect =
|
||||
typeof target.getBoundingClientRect === 'function'
|
||||
? target.getBoundingClientRect()
|
||||
: { x: 0, y: 0 }
|
||||
|
||||
// EventInit
|
||||
const eventOpts = {
|
||||
@ -2395,11 +2510,27 @@ class Event {
|
||||
}
|
||||
|
||||
if (type.startsWith('pointer')) {
|
||||
return new PointerEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts))
|
||||
return new PointerEvent(
|
||||
type,
|
||||
Object.assign(
|
||||
{},
|
||||
eventOpts,
|
||||
uiEventOpts,
|
||||
mouseEventOpts,
|
||||
pointerEventOpts,
|
||||
opts
|
||||
)
|
||||
)
|
||||
} else if (type.startsWith('touch')) {
|
||||
return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
|
||||
return new TouchEvent(
|
||||
type,
|
||||
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
|
||||
)
|
||||
} else {
|
||||
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
|
||||
return new MouseEvent(
|
||||
type,
|
||||
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2416,7 +2547,7 @@ class Event {
|
||||
|
||||
<footer class="content-size">
|
||||
<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>
|
||||
|
||||
25
gulpfile.js
25
gulpfile.js
@ -3,6 +3,7 @@ const uglify = require('gulp-uglify')
|
||||
const rename = require('gulp-rename')
|
||||
const concat = require('gulp-concat')
|
||||
const replace = require('gulp-replace')
|
||||
const prettier = require('gulp-prettier')
|
||||
|
||||
function vendors() {
|
||||
return src(
|
||||
@ -52,4 +53,28 @@ function preload() {
|
||||
.pipe(dest('dist', { sourcemaps: false }))
|
||||
}
|
||||
|
||||
function prettify() {
|
||||
return src(
|
||||
[
|
||||
'./lib/*.js',
|
||||
'./lib/card/*.js',
|
||||
'./lib/pixi/*.js',
|
||||
'!./lib/bootstrap.babel.js'
|
||||
],
|
||||
{
|
||||
base: './lib'
|
||||
}
|
||||
)
|
||||
.pipe(
|
||||
prettier({
|
||||
singleQuote: true,
|
||||
jsxSingleQuote: true,
|
||||
tabWidth: 4,
|
||||
semi: false
|
||||
})
|
||||
)
|
||||
.pipe(dest('./lib'))
|
||||
}
|
||||
|
||||
exports.prettify = prettify
|
||||
exports.default = parallel(vendors, preload)
|
||||
|
||||
272
lib/bootstrap.babel.js
vendored
272
lib/bootstrap.babel.js
vendored
@ -1,142 +1,241 @@
|
||||
'use strict';
|
||||
'use strict'
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
var _createClass = (function() {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i]
|
||||
descriptor.enumerable = descriptor.enumerable || false
|
||||
descriptor.configurable = true
|
||||
if ('value' in descriptor) descriptor.writable = true
|
||||
Object.defineProperty(target, descriptor.key, descriptor)
|
||||
}
|
||||
}
|
||||
return function(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps)
|
||||
if (staticProps) defineProperties(Constructor, staticProps)
|
||||
return Constructor
|
||||
}
|
||||
})()
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError('Cannot call a class as a function')
|
||||
}
|
||||
}
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
function _possibleConstructorReturn(self, call) {
|
||||
if (!self) {
|
||||
throw new ReferenceError(
|
||||
"this hasn't been initialised - super() hasn't been called"
|
||||
)
|
||||
}
|
||||
return call && (typeof call === 'object' || typeof call === 'function')
|
||||
? call
|
||||
: self
|
||||
}
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
function _inherits(subClass, superClass) {
|
||||
if (typeof superClass !== 'function' && superClass !== null) {
|
||||
throw new TypeError(
|
||||
'Super expression must either be null or a function, not ' +
|
||||
typeof superClass
|
||||
)
|
||||
}
|
||||
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
||||
constructor: {
|
||||
value: subClass,
|
||||
enumerable: false,
|
||||
writable: true,
|
||||
configurable: true
|
||||
}
|
||||
})
|
||||
if (superClass)
|
||||
Object.setPrototypeOf
|
||||
? Object.setPrototypeOf(subClass, superClass)
|
||||
: (subClass.__proto__ = superClass)
|
||||
}
|
||||
|
||||
var Bootstrap = function (_Object) {
|
||||
_inherits(Bootstrap, _Object);
|
||||
var Bootstrap = (function(_Object) {
|
||||
_inherits(Bootstrap, _Object)
|
||||
|
||||
function Bootstrap() {
|
||||
_classCallCheck(this, Bootstrap);
|
||||
_classCallCheck(this, Bootstrap)
|
||||
|
||||
return _possibleConstructorReturn(this, (Bootstrap.__proto__ || Object.getPrototypeOf(Bootstrap)).apply(this, arguments));
|
||||
return _possibleConstructorReturn(
|
||||
this,
|
||||
(Bootstrap.__proto__ || Object.getPrototypeOf(Bootstrap)).apply(
|
||||
this,
|
||||
arguments
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
_createClass(Bootstrap, null, [{
|
||||
_createClass(Bootstrap, null, [
|
||||
{
|
||||
key: 'import',
|
||||
value: function _import(src) {
|
||||
var _this2 = this;
|
||||
var _this2 = this
|
||||
|
||||
var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
var callback =
|
||||
arguments.length > 1 && arguments[1] !== undefined
|
||||
? arguments[1]
|
||||
: null
|
||||
|
||||
if (src.endsWith('babel.js')) {
|
||||
this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js', function () {
|
||||
_this2.load(src, null, null);
|
||||
}, null);
|
||||
this.load(
|
||||
this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
|
||||
function() {
|
||||
_this2.load(src, null, null)
|
||||
},
|
||||
null
|
||||
)
|
||||
} else if (this.isModernSafari || this.isModernChrome) {
|
||||
this.load(src, callback);
|
||||
this.load(src, callback)
|
||||
} else {
|
||||
this.load(this.baseUrl + '/3rdparty/systemjs/system.js', function () {
|
||||
SystemJS.config(_this2.systemjsConfig);
|
||||
SystemJS.import(src);
|
||||
}, 'script');
|
||||
this.load(
|
||||
this.baseUrl + '/3rdparty/systemjs/system.js',
|
||||
function() {
|
||||
SystemJS.config(_this2.systemjsConfig)
|
||||
SystemJS.import(src)
|
||||
},
|
||||
'script'
|
||||
)
|
||||
}
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'load',
|
||||
value: function load(src, callback) {
|
||||
var _this3 = this;
|
||||
var _this3 = this
|
||||
|
||||
var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'module';
|
||||
var type =
|
||||
arguments.length > 2 && arguments[2] !== undefined
|
||||
? arguments[2]
|
||||
: 'module'
|
||||
|
||||
var script = document.createElement('script');
|
||||
var script = document.createElement('script')
|
||||
if (type === 'module') {
|
||||
script.setAttribute('type', 'module');
|
||||
script.setAttribute('crossorigin', 'use-credentials');
|
||||
script.setAttribute('type', 'module')
|
||||
script.setAttribute('crossorigin', 'use-credentials')
|
||||
}
|
||||
script.onload = function() {
|
||||
if (callback) {
|
||||
callback.call(_this3, script);
|
||||
callback.call(_this3, script)
|
||||
}
|
||||
};
|
||||
script.src = src;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
}, {
|
||||
script.src = src
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'require',
|
||||
value: function require(src) {
|
||||
console.log('Dummy require');
|
||||
console.log('Dummy require')
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'renderFont',
|
||||
value: function renderFont() {
|
||||
var font = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Open Sans';
|
||||
var _arr = [300, 400, 600, 700, 800];
|
||||
var font =
|
||||
arguments.length > 0 && arguments[0] !== undefined
|
||||
? arguments[0]
|
||||
: 'Open Sans'
|
||||
var _arr = [300, 400, 600, 700, 800]
|
||||
|
||||
for (var _i = 0; _i < _arr.length; _i++) {
|
||||
var weight = _arr[_i];var _arr2 = ['normal', 'italic'];
|
||||
var weight = _arr[_i]
|
||||
var _arr2 = ['normal', 'italic']
|
||||
|
||||
for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
|
||||
var style = _arr2[_i2];
|
||||
var p = document.createElement('p');
|
||||
p.innerHTML = '.';
|
||||
document.body.appendChild(p);
|
||||
p.setAttribute('style', 'font-family: \'' + font + '\'; font-weight: ' + weight + '; font-style: \'' + style + '\'; position: absolute; top: -10000px;');
|
||||
var style = _arr2[_i2]
|
||||
var p = document.createElement('p')
|
||||
p.innerHTML = '.'
|
||||
document.body.appendChild(p)
|
||||
p.setAttribute(
|
||||
'style',
|
||||
"font-family: '" +
|
||||
font +
|
||||
"'; font-weight: " +
|
||||
weight +
|
||||
"; font-style: '" +
|
||||
style +
|
||||
"'; position: absolute; top: -10000px;"
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'isSafari',
|
||||
get: function get() {
|
||||
return (/Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
|
||||
);
|
||||
return (
|
||||
/Safari/.test(navigator.userAgent) &&
|
||||
/Apple Computer, Inc/.test(navigator.vendor)
|
||||
)
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'isModernSafari',
|
||||
get: function get() {
|
||||
if (!this.isSafari) return false;
|
||||
var agent = navigator.appVersion;
|
||||
var offset = agent.indexOf('Version');
|
||||
if (!this.isSafari) return false
|
||||
var agent = navigator.appVersion
|
||||
var offset = agent.indexOf('Version')
|
||||
if (offset != -1) {
|
||||
var version = parseFloat(agent.substring(offset + 8));
|
||||
return version >= 10.1;
|
||||
var version = parseFloat(agent.substring(offset + 8))
|
||||
return version >= 10.1
|
||||
}
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'isChrome',
|
||||
get: function get() {
|
||||
var isChromium = window.chrome;
|
||||
var winNav = window.navigator;
|
||||
var vendorName = winNav.vendor;
|
||||
var isOpera = winNav.userAgent.indexOf('OPR') > -1;
|
||||
var isIEedge = winNav.userAgent.indexOf('Edge') > -1;
|
||||
var isIOSChrome = winNav.userAgent.match('CriOS');
|
||||
var isChromium = window.chrome
|
||||
var winNav = window.navigator
|
||||
var vendorName = winNav.vendor
|
||||
var isOpera = winNav.userAgent.indexOf('OPR') > -1
|
||||
var isIEedge = winNav.userAgent.indexOf('Edge') > -1
|
||||
var isIOSChrome = winNav.userAgent.match('CriOS')
|
||||
|
||||
if (isIOSChrome) {
|
||||
return true;
|
||||
} else if (isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera == false && isIEedge == false) {
|
||||
return true;
|
||||
return true
|
||||
} else if (
|
||||
isChromium !== null &&
|
||||
isChromium !== undefined &&
|
||||
vendorName === 'Google Inc.' &&
|
||||
isOpera == false &&
|
||||
isIEedge == false
|
||||
) {
|
||||
return true
|
||||
} else {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'isModernChrome',
|
||||
get: function get() {
|
||||
if (!this.isChrome) {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
|
||||
var version = raw ? parseInt(raw[2], 10) : false;
|
||||
return version > 62;
|
||||
var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
|
||||
var version = raw ? parseInt(raw[2], 10) : false
|
||||
return version > 62
|
||||
}
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'systemjsConfig',
|
||||
get: function get() {
|
||||
|
||||
var baseUrl = this.baseUrl;
|
||||
var baseUrl = this.baseUrl
|
||||
|
||||
return {
|
||||
baseURL: baseUrl,
|
||||
map: {
|
||||
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
||||
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
|
||||
'plugin-babel':
|
||||
baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
||||
'systemjs-babel-build':
|
||||
baseUrl +
|
||||
'/3rdparty/systemjs/systemjs-babel-browser.js'
|
||||
},
|
||||
transpiler: 'plugin-babel',
|
||||
meta: {
|
||||
@ -147,29 +246,30 @@ var Bootstrap = function (_Object) {
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}, {
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'baseUrl',
|
||||
get: function get() {
|
||||
|
||||
var baseUrl = './';
|
||||
var scripts = document.getElementsByTagName('script');
|
||||
var baseUrl = './'
|
||||
var scripts = document.getElementsByTagName('script')
|
||||
|
||||
for (var i = 0; i < scripts.length; i++) {
|
||||
var script = scripts[i];
|
||||
var src = script.getAttribute('src');
|
||||
var re = /\/bootstrap(.babel)?\.js$/;
|
||||
var script = scripts[i]
|
||||
var src = script.getAttribute('src')
|
||||
var re = /\/bootstrap(.babel)?\.js$/
|
||||
if (re.test(src)) {
|
||||
baseUrl = src.replace(re, '');
|
||||
baseUrl = src.replace(re, '')
|
||||
}
|
||||
}
|
||||
|
||||
return baseUrl;
|
||||
return baseUrl
|
||||
}
|
||||
}]);
|
||||
}
|
||||
])
|
||||
|
||||
return Bootstrap;
|
||||
}(Object);
|
||||
return Bootstrap
|
||||
})(Object)
|
||||
|
||||
window.Bootstrap = Bootstrap;
|
||||
window.Bootstrap = Bootstrap
|
||||
|
||||
51
lib/bootstrap.js
vendored
51
lib/bootstrap.js
vendored
@ -1,13 +1,13 @@
|
||||
|
||||
class Bootstrap extends Object {
|
||||
|
||||
static get isSafari() {
|
||||
return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
|
||||
return (
|
||||
/Safari/.test(navigator.userAgent) &&
|
||||
/Apple Computer, Inc/.test(navigator.vendor)
|
||||
)
|
||||
}
|
||||
|
||||
static get isModernSafari() {
|
||||
if (!this.isSafari)
|
||||
return false
|
||||
if (!this.isSafari) return false
|
||||
let agent = navigator.appVersion
|
||||
let offset = agent.indexOf('Version')
|
||||
if (offset != -1) {
|
||||
@ -27,7 +27,13 @@ class Bootstrap extends Object {
|
||||
|
||||
if (isIOSChrome) {
|
||||
return true
|
||||
} else if (isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera == false && isIEedge == false) {
|
||||
} else if (
|
||||
isChromium !== null &&
|
||||
isChromium !== undefined &&
|
||||
vendorName === 'Google Inc.' &&
|
||||
isOpera == false &&
|
||||
isIEedge == false
|
||||
) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
@ -45,7 +51,6 @@ class Bootstrap extends Object {
|
||||
}
|
||||
|
||||
static get isFirefox() {
|
||||
|
||||
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
|
||||
return true
|
||||
}
|
||||
@ -54,7 +59,6 @@ class Bootstrap extends Object {
|
||||
}
|
||||
|
||||
static get isModernFirefox() {
|
||||
|
||||
if (!this.isFirefox) {
|
||||
return false
|
||||
}
|
||||
@ -67,16 +71,23 @@ class Bootstrap extends Object {
|
||||
|
||||
static import(src, callback = null) {
|
||||
if (src.endsWith('babel.js')) {
|
||||
this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
|
||||
this.load(
|
||||
this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
|
||||
() => {
|
||||
this.load(src, callback, null)
|
||||
},
|
||||
null)
|
||||
}
|
||||
else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
|
||||
null
|
||||
)
|
||||
} else if (
|
||||
this.isModernSafari ||
|
||||
this.isModernChrome ||
|
||||
this.isModernFirefox
|
||||
) {
|
||||
this.load(src, callback)
|
||||
} else {
|
||||
this.load(this.baseUrl + '/3rdparty/systemjs/system.js', () => {
|
||||
this.load(
|
||||
this.baseUrl + '/3rdparty/systemjs/system.js',
|
||||
() => {
|
||||
SystemJS.config(this.systemjsConfig)
|
||||
let promise = SystemJS.import(src)
|
||||
if (promise) {
|
||||
@ -86,7 +97,9 @@ class Bootstrap extends Object {
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 'script')
|
||||
},
|
||||
'script'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,14 +123,14 @@ class Bootstrap extends Object {
|
||||
}
|
||||
|
||||
static get systemjsConfig() {
|
||||
|
||||
const baseUrl = this.baseUrl
|
||||
|
||||
return {
|
||||
baseURL: baseUrl,
|
||||
map: {
|
||||
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
|
||||
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
|
||||
'systemjs-babel-build':
|
||||
baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
|
||||
},
|
||||
transpiler: 'plugin-babel',
|
||||
meta: {
|
||||
@ -132,7 +145,6 @@ class Bootstrap extends Object {
|
||||
}
|
||||
|
||||
static get baseUrl() {
|
||||
|
||||
let baseUrl = './'
|
||||
let scripts = document.getElementsByTagName('script')
|
||||
|
||||
@ -154,7 +166,10 @@ class Bootstrap extends Object {
|
||||
let p = document.createElement('p')
|
||||
p.innerHTML = '.'
|
||||
document.body.appendChild(p)
|
||||
p.setAttribute('style', `font-family: '${font}'; font-weight: ${weight}; font-style: '${style}'; position: absolute; top: -10000px;`)
|
||||
p.setAttribute(
|
||||
'style',
|
||||
`font-family: '${font}'; font-weight: ${weight}; font-style: '${style}'; position: absolute; top: -10000px;`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,15 @@ import App from './app.js'
|
||||
import Doctest from './doctest.js'
|
||||
import Errors from './errors.js'
|
||||
import Events from './events.js'
|
||||
import { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js'
|
||||
import {
|
||||
DOMFlip,
|
||||
DOMFlippable,
|
||||
CardLoader,
|
||||
PDFLoader,
|
||||
ImageLoader,
|
||||
FrameLoader,
|
||||
HTMLLoader
|
||||
} from './flippable.js'
|
||||
import Index from './index.js'
|
||||
import Interface from './interface.js'
|
||||
import Logging from './logging.js'
|
||||
@ -14,9 +22,44 @@ import { Capabilities, CapabilitiesTests } from './capabilities.js'
|
||||
import { EventRecorder } from './events.js'
|
||||
import { FrameContainer, FrameTarget } from './frames.js'
|
||||
import { Inspect } from './inspect.js'
|
||||
import { PointMap, InteractionPoints, Interaction, IInteractionTarget, InteractionDelta, InteractionMapper, InteractionDelegate, IInteractionMapperTarget } from './interaction.js'
|
||||
import { ITapDelegate, ResizeEvent, DOMScatterContainer, AbstractScatter, DOMScatter, ScatterEvent, BaseEvent } from './scatter.js'
|
||||
import { Cycle, Colors, Elements, Angle, Dates, Points, Polygon, Rect, Sets, Strings, isEmpty, getId, lerp, debounce, randomInt, randomFloat, LowPassFilter } from './utils.js'
|
||||
import {
|
||||
PointMap,
|
||||
InteractionPoints,
|
||||
Interaction,
|
||||
IInteractionTarget,
|
||||
InteractionDelta,
|
||||
InteractionMapper,
|
||||
InteractionDelegate,
|
||||
IInteractionMapperTarget
|
||||
} from './interaction.js'
|
||||
import {
|
||||
ITapDelegate,
|
||||
ResizeEvent,
|
||||
DOMScatterContainer,
|
||||
AbstractScatter,
|
||||
DOMScatter,
|
||||
ScatterEvent,
|
||||
BaseEvent
|
||||
} from './scatter.js'
|
||||
import {
|
||||
Cycle,
|
||||
Colors,
|
||||
Elements,
|
||||
Angle,
|
||||
Dates,
|
||||
Points,
|
||||
Polygon,
|
||||
Rect,
|
||||
Sets,
|
||||
Strings,
|
||||
isEmpty,
|
||||
getId,
|
||||
lerp,
|
||||
debounce,
|
||||
randomInt,
|
||||
randomFloat,
|
||||
LowPassFilter
|
||||
} from './utils.js'
|
||||
import UITest from './uitest.js'
|
||||
|
||||
import Card from './card/card.js'
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/** Report capabilities with guaranteed values.
|
||||
*/
|
||||
export class Capabilities {
|
||||
|
||||
/** Returns the browser userAgent.
|
||||
@return {string}
|
||||
*/
|
||||
@ -14,7 +13,7 @@ export class Capabilities {
|
||||
@return {boolean}
|
||||
*/
|
||||
static get isMobile() {
|
||||
return (/Mobi/.test(navigator.userAgent))
|
||||
return /Mobi/.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
/** Tests whether the app is running on a iOS device.
|
||||
@ -22,7 +21,7 @@ export class Capabilities {
|
||||
@return {boolean}
|
||||
*/
|
||||
static get isIOS() {
|
||||
return (/iPad|iPhone|iPod/.test(navigator.userAgent)) && !window.MSStream
|
||||
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
|
||||
}
|
||||
|
||||
/** Tests whether the app is running in a Safari environment.
|
||||
@ -31,7 +30,12 @@ export class Capabilities {
|
||||
@return {boolean}
|
||||
*/
|
||||
static get isSafari() {
|
||||
return navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS')
|
||||
return (
|
||||
navigator.vendor &&
|
||||
navigator.vendor.indexOf('Apple') > -1 &&
|
||||
navigator.userAgent &&
|
||||
!navigator.userAgent.match('CriOS')
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -40,19 +44,30 @@ export class Capabilities {
|
||||
* source: https://github.com/cheton/is-electron
|
||||
*/
|
||||
static get isElectron() {
|
||||
|
||||
// Renderer process
|
||||
if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
|
||||
if (
|
||||
typeof window !== 'undefined' &&
|
||||
typeof window.process === 'object' &&
|
||||
window.process.type === 'renderer'
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Main process
|
||||
if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
|
||||
if (
|
||||
typeof process !== 'undefined' &&
|
||||
typeof process.versions === 'object' &&
|
||||
!!process.versions.electron
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Detect the user agent when the `nodeIntegration` option is set to true
|
||||
if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
|
||||
if (
|
||||
typeof navigator === 'object' &&
|
||||
typeof navigator.userAgent === 'string' &&
|
||||
navigator.userAgent.indexOf('Electron') >= 0
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
@ -70,52 +85,56 @@ export class Capabilities {
|
||||
@return {boolean}
|
||||
*/
|
||||
static get isMultiTouchTable() {
|
||||
return Capabilities.devicePixelRatio > 2 && Capabilities.isMobile === false && /Windows/i.test(Capabilities.userAgent)
|
||||
return (
|
||||
Capabilities.devicePixelRatio > 2 &&
|
||||
Capabilities.isMobile === false &&
|
||||
/Windows/i.test(Capabilities.userAgent)
|
||||
)
|
||||
}
|
||||
|
||||
/** Returns true if mouse events are supported
|
||||
@return {boolean}
|
||||
*/
|
||||
static supportsMouseEvents() {
|
||||
return typeof(window.MouseEvent) != 'undefined'
|
||||
return typeof window.MouseEvent != 'undefined'
|
||||
}
|
||||
|
||||
/** Returns true if touch events are supported
|
||||
@return {boolean}
|
||||
*/
|
||||
static supportsTouchEvents() {
|
||||
return typeof(window.TouchEvent) != 'undefined'
|
||||
return typeof window.TouchEvent != 'undefined'
|
||||
}
|
||||
|
||||
/** Returns true if pointer events are supported
|
||||
@return {boolean}
|
||||
*/
|
||||
static supportsPointerEvents() {
|
||||
return typeof(window.PointerEvent) != 'undefined'
|
||||
return typeof window.PointerEvent != 'undefined'
|
||||
}
|
||||
|
||||
/** Returns true if DOM templates are supported
|
||||
@return {boolean}
|
||||
*/
|
||||
static supportsTemplate() {
|
||||
return 'content' in document.createElement('template');
|
||||
return 'content' in document.createElement('template')
|
||||
}
|
||||
}
|
||||
|
||||
/** Basic tests for Capabilities.
|
||||
*/
|
||||
export class CapabilitiesTests {
|
||||
|
||||
static testConfirm() {
|
||||
let bool = confirm('Please confirm')
|
||||
document.getElementById('demo').innerHTML = (bool) ? 'Confirmed' : 'Not confirmed'
|
||||
document.getElementById('demo').innerHTML = bool
|
||||
? 'Confirmed'
|
||||
: 'Not confirmed'
|
||||
}
|
||||
|
||||
static testPrompt() {
|
||||
let person = prompt('Please enter your name', 'Harry Potter')
|
||||
if (person != null) {
|
||||
demo.innerHTML =
|
||||
'Hello ' + person + '! How are you today?'
|
||||
demo.innerHTML = 'Hello ' + person + '! How are you today?'
|
||||
}
|
||||
}
|
||||
|
||||
@ -130,7 +149,9 @@ export class CapabilitiesTests {
|
||||
}
|
||||
|
||||
static testMultiTouchTable() {
|
||||
let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable
|
||||
let value =
|
||||
'Is the device a multi-touch table? ' +
|
||||
Capabilities.isMultiTouchTable
|
||||
multi_touch_table.innerHTML = value
|
||||
}
|
||||
|
||||
|
||||
640
lib/card/card.js
640
lib/card/card.js
File diff suppressed because it is too large
Load Diff
@ -4,13 +4,11 @@
|
||||
let _HighlightEnabled = true
|
||||
let _CircleIds = 0
|
||||
|
||||
|
||||
/** Helper method to round values with one digit precision */
|
||||
function round(value) {
|
||||
return Math.round(parseFloat(value) * 10) / 10
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A namespace with static functions to expand and shrink highlighted image regions.
|
||||
* Assumes an SVG image with the following structure:
|
||||
@ -31,7 +29,6 @@ function round(value) {
|
||||
* @extends {Object}
|
||||
*/
|
||||
export default class Highlight extends Object {
|
||||
|
||||
static disableAnimations() {
|
||||
_HighlightEnabled = false
|
||||
let expanded = document.querySelectorAll('.expanded')
|
||||
@ -64,7 +61,10 @@ export default class Highlight extends Object {
|
||||
if (circle.classList.length == 0) {
|
||||
circle.removeAttribute('class')
|
||||
}
|
||||
if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
|
||||
if (
|
||||
circle.hasAttribute('id') &&
|
||||
circle.getAttribute('id').startsWith('@@')
|
||||
) {
|
||||
circle.removeAttribute('id')
|
||||
}
|
||||
circle.removeAttribute('data-svg-origin')
|
||||
@ -79,9 +79,11 @@ export default class Highlight extends Object {
|
||||
}
|
||||
}
|
||||
|
||||
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
|
||||
if (obj == null)
|
||||
return
|
||||
static expand(
|
||||
obj,
|
||||
{ scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
|
||||
) {
|
||||
if (obj == null) return
|
||||
//console.log("expand")
|
||||
obj.classList.add('zooming')
|
||||
TweenLite.to(obj, duration, {
|
||||
@ -102,8 +104,7 @@ export default class Highlight extends Object {
|
||||
|
||||
static shrink(obj, { duration = 0.5, stroke = 2 } = {}) {
|
||||
//console.log("shrink")
|
||||
if (obj == null)
|
||||
return
|
||||
if (obj == null) return
|
||||
obj.classList.add('zooming')
|
||||
TweenLite.to(obj, duration, {
|
||||
scale: 1,
|
||||
@ -141,7 +142,6 @@ export default class Highlight extends Object {
|
||||
let circleGroup = circle.parentNode
|
||||
let image = svgRoot.querySelector('image')
|
||||
|
||||
|
||||
let stroke = parseFloat(circleGroup.getAttribute('stroke-width') || 6)
|
||||
|
||||
let defs = svgRoot.querySelector('defs')
|
||||
@ -161,14 +161,15 @@ export default class Highlight extends Object {
|
||||
return
|
||||
}
|
||||
//console.log("animate called while zooming out -> expand")
|
||||
}
|
||||
else if (circle.classList.contains('zooming')) {
|
||||
} else if (circle.classList.contains('zooming')) {
|
||||
//console.log("animate called while zooming in -> shrink")
|
||||
this.shrink(circle, { stroke })
|
||||
this.shrink(maskImage, { stroke })
|
||||
return
|
||||
}
|
||||
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
|
||||
let circles = Array.from(circleGroup.children).filter(
|
||||
e => e.tagName == 'circle'
|
||||
)
|
||||
for (let c of circles) {
|
||||
//console.log("shrinking all circles")
|
||||
this.shrink(c, { stroke })
|
||||
@ -188,11 +189,10 @@ export default class Highlight extends Object {
|
||||
return false
|
||||
}
|
||||
|
||||
static openHighlight(target, {
|
||||
animation = 0.5,
|
||||
scale = 2,
|
||||
onExpanded = null
|
||||
} = {}) {
|
||||
static openHighlight(
|
||||
target,
|
||||
{ animation = 0.5, scale = 2, onExpanded = null } = {}
|
||||
) {
|
||||
if (Highlight._isExpanded(target)) {
|
||||
console.log('Target is already expanded!')
|
||||
return
|
||||
@ -206,7 +206,10 @@ export default class Highlight extends Object {
|
||||
let image = parent.querySelector(imageId)
|
||||
if (image) {
|
||||
this._bringToFront(image)
|
||||
} else console.error('Could not find corresponding image element.')
|
||||
} else
|
||||
console.error(
|
||||
'Could not find corresponding image element.'
|
||||
)
|
||||
} else console.log('Element was no parent:', target)
|
||||
}
|
||||
this._bringToFront(target)
|
||||
@ -215,10 +218,15 @@ export default class Highlight extends Object {
|
||||
let image = svgRoot.querySelector('image')
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image })
|
||||
let [mask, maskImage] = Highlight._getSVGMask(target, {
|
||||
svgRoot,
|
||||
image
|
||||
})
|
||||
let center = Highlight._calculateCenterRelativeTo(target, image)
|
||||
|
||||
TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` })
|
||||
TweenLite.set(maskImage, {
|
||||
transformOrigin: `${center.x}% ${center.y}%`
|
||||
})
|
||||
TweenLite.set(target, { transformOrigin: '50% 50%' })
|
||||
|
||||
TweenLite.to([target, maskImage], animation, {
|
||||
@ -233,8 +241,7 @@ export default class Highlight extends Object {
|
||||
static toggleHighlight(node) {
|
||||
if (Highlight._isExpanded(node)) {
|
||||
Highlight.closeHighlight(node)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
Highlight.openHighlight(node)
|
||||
}
|
||||
}
|
||||
@ -244,7 +251,12 @@ export default class Highlight extends Object {
|
||||
if (target && parent) {
|
||||
parent.removeChild(target)
|
||||
parent.appendChild(target)
|
||||
} else console.error('Could not bring to front. Either no target or no parent.', target, parent)
|
||||
} else
|
||||
console.error(
|
||||
'Could not bring to front. Either no target or no parent.',
|
||||
target,
|
||||
parent
|
||||
)
|
||||
}
|
||||
|
||||
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
|
||||
@ -258,13 +270,15 @@ export default class Highlight extends Object {
|
||||
let maskImage = svgRoot.getElementById(maskImageId)
|
||||
|
||||
if (!mask || !maskImage)
|
||||
[mask, maskImage] = Highlight._createSVGMask(circle, { svgRoot, image, id })
|
||||
[mask, maskImage] = Highlight._createSVGMask(circle, {
|
||||
svgRoot,
|
||||
image,
|
||||
id
|
||||
})
|
||||
|
||||
return [mask, maskImage]
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Creates an SVG mask for a provided svgElement.
|
||||
*
|
||||
@ -277,8 +291,10 @@ export default class Highlight extends Object {
|
||||
* @returns
|
||||
* @memberof Highlight
|
||||
*/
|
||||
static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
|
||||
|
||||
static _createSVGMask(
|
||||
element,
|
||||
{ svgRoot = null, image = null, id = null } = {}
|
||||
) {
|
||||
// We can fetch these values here, but it's more efficient to
|
||||
// simply pass them in, as it's likely they were already retrieved beforehand.
|
||||
if (svgRoot == null) svgRoot = element.closest('svg')
|
||||
@ -316,7 +332,6 @@ export default class Highlight extends Object {
|
||||
let height = bbox.height
|
||||
|
||||
if (maskImage == null) {
|
||||
|
||||
maskImage = document.createElementNS(svg, 'image')
|
||||
maskImage.style.pointerEvents = 'none'
|
||||
maskImage.setAttribute('id', maskImageId)
|
||||
@ -369,8 +384,7 @@ export default class Highlight extends Object {
|
||||
}
|
||||
|
||||
static animate(event) {
|
||||
if (!_HighlightEnabled)
|
||||
return
|
||||
if (!_HighlightEnabled) return
|
||||
|
||||
event.stopPropagation()
|
||||
Highlight.animateCircle(event.target)
|
||||
@ -394,4 +408,3 @@ export default class Highlight extends Object {
|
||||
}
|
||||
|
||||
Highlight.expandedClass = 'expanded'
|
||||
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
export var CardPlugin = CardPlugin || {}
|
||||
|
||||
export class CardPluginBase {
|
||||
|
||||
apply(context) {
|
||||
if (this.verify(context)) {
|
||||
this.append(context)
|
||||
console.log("Plugin " + this.name + " was verified successfully.")
|
||||
console.log('Plugin ' + this.name + ' was verified successfully.')
|
||||
return true
|
||||
} else console.error("Could not verify module " + this.name + ".")
|
||||
} else console.error('Could not verify module ' + this.name + '.')
|
||||
return false
|
||||
}
|
||||
|
||||
@ -32,19 +31,20 @@ export class CardPluginBase {
|
||||
missing.push(selector)
|
||||
}
|
||||
}
|
||||
const valid = (missing.length == 0)
|
||||
if (!valid) console.error("Elements were missing: ", missing.join(", "))
|
||||
const valid = missing.length == 0
|
||||
if (!valid) console.error('Elements were missing: ', missing.join(', '))
|
||||
return valid
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Appends the Plugin to the context.
|
||||
*
|
||||
* @memberof CardPlugin
|
||||
*/
|
||||
append(context) {
|
||||
console.error("Call of abstract method CardPlugin.prototype.append(context). Plugins need to overwrite the append method!")
|
||||
console.error(
|
||||
'Call of abstract method CardPlugin.prototype.append(context). Plugins need to overwrite the append method!'
|
||||
)
|
||||
}
|
||||
|
||||
_getVerificationFunctions(context) {
|
||||
@ -56,7 +56,7 @@ export class CardPluginBase {
|
||||
|
||||
_verifyContext(context) {
|
||||
if (!(context instanceof HTMLElement)) {
|
||||
console.error("Context is not of type HTML Element.", context)
|
||||
console.error('Context is not of type HTML Element.', context)
|
||||
return false
|
||||
} else return true
|
||||
}
|
||||
@ -71,13 +71,18 @@ export class CardPluginBase {
|
||||
}
|
||||
})
|
||||
|
||||
const valid = (missing.length == 0)
|
||||
if (!valid) console.error("Could not apply module '" + this.name + "'. Following modules are required but were missing: " + missing.join(","))
|
||||
else console.log("All requirements were met! Well done!")
|
||||
const valid = missing.length == 0
|
||||
if (!valid)
|
||||
console.error(
|
||||
"Could not apply module '" +
|
||||
this.name +
|
||||
"'. Following modules are required but were missing: " +
|
||||
missing.join(',')
|
||||
)
|
||||
else console.log('All requirements were met! Well done!')
|
||||
return valid
|
||||
}
|
||||
|
||||
|
||||
_collectAllRequirements() {
|
||||
let requirements = []
|
||||
let klass = this.__proto__
|
||||
@ -91,9 +96,6 @@ export class CardPluginBase {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
CardPlugin.LightBox = class LightBox extends CardPluginBase {
|
||||
constructor(className, style = {}) {
|
||||
super()
|
||||
@ -102,27 +104,30 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
|
||||
}
|
||||
|
||||
append(context) {
|
||||
let wrapper = document.createElement("div")
|
||||
let wrapper = document.createElement('div')
|
||||
wrapper.className = this.className
|
||||
|
||||
Object.assign(wrapper.style, {
|
||||
Object.assign(
|
||||
wrapper.style,
|
||||
{
|
||||
zIndex: 1000,
|
||||
// backgroundColor: "black",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%"
|
||||
}, this.style, {
|
||||
display: "none",
|
||||
position: "absolute",
|
||||
})
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
this.style,
|
||||
{
|
||||
display: 'none',
|
||||
position: 'absolute'
|
||||
}
|
||||
)
|
||||
|
||||
context.appendChild(wrapper)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The Enlargeable Overlay module allows the user to click on the thumbnail image,
|
||||
* and the images gets enlarged inside the card.
|
||||
@ -131,12 +136,15 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
|
||||
* @extends {CardPlugin}
|
||||
*/
|
||||
CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginBase {
|
||||
|
||||
constructor(wrapperSelector, overlaySelector = null, {
|
||||
constructor(
|
||||
wrapperSelector,
|
||||
overlaySelector = null,
|
||||
{
|
||||
zoomAnimationDuration = 0.4,
|
||||
fadeAnimationDuration = 0.4,
|
||||
interactionType = "tap"
|
||||
} = {}) {
|
||||
interactionType = 'tap'
|
||||
} = {}
|
||||
) {
|
||||
super()
|
||||
this.wrapperSelector = wrapperSelector
|
||||
this.overlaySelector = overlaySelector
|
||||
@ -147,15 +155,18 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
}
|
||||
|
||||
get require() {
|
||||
return [
|
||||
CardPlugin.LightBox
|
||||
]
|
||||
return [CardPlugin.LightBox]
|
||||
}
|
||||
|
||||
_getVerificationFunctions(context) {
|
||||
let arr = super._getVerificationFunctions(context)
|
||||
let funcs = [
|
||||
this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)
|
||||
this._verifyElementsExist.bind(
|
||||
this,
|
||||
context,
|
||||
this.wrapperSelector,
|
||||
this.overlaySelector
|
||||
)
|
||||
]
|
||||
return arr.concat(funcs)
|
||||
}
|
||||
@ -165,7 +176,6 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
this.setupEnlargeableThumbnail(context, source)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the preview image.
|
||||
*
|
||||
@ -177,26 +187,25 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
* @memberof EnlargeableThumbnail
|
||||
*/
|
||||
_retrieveSource(context) {
|
||||
let img = context.querySelector(this.wrapperSelector + " img")
|
||||
let src = img.getAttribute("src")
|
||||
let parts = src.split("/")
|
||||
let img = context.querySelector(this.wrapperSelector + ' img')
|
||||
let src = img.getAttribute('src')
|
||||
let parts = src.split('/')
|
||||
parts.pop()
|
||||
parts.push(parts[parts.length - 1])
|
||||
let imagePath = parts.join("/") + ".jpg"
|
||||
let imagePath = parts.join('/') + '.jpg'
|
||||
return imagePath
|
||||
}
|
||||
|
||||
|
||||
setupEnlargeableThumbnail(context, src) {
|
||||
let wrapper = context.querySelector(this.wrapperSelector)
|
||||
let overlay = context.querySelector(this.overlaySelector)
|
||||
|
||||
let icon = document.createElement("div")
|
||||
icon.className = "button corner-button bottom-right icon zoom"
|
||||
let icon = document.createElement('div')
|
||||
icon.className = 'button corner-button bottom-right icon zoom'
|
||||
wrapper.appendChild(icon)
|
||||
|
||||
Object.assign(wrapper.style, {
|
||||
cursor: "pointer"
|
||||
cursor: 'pointer'
|
||||
})
|
||||
|
||||
InteractionMapper.on(this.interactionType, wrapper, () => {
|
||||
@ -209,28 +218,28 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
}
|
||||
|
||||
openThumbnailDetail(context, src) {
|
||||
let overlay = context.querySelector(".img-overlay")
|
||||
overlay.innerHTML = ""
|
||||
let overlay = context.querySelector('.img-overlay')
|
||||
overlay.innerHTML = ''
|
||||
let source = context.querySelector(this.wrapperSelector)
|
||||
let sourceStyle = window.getComputedStyle(source)
|
||||
let imageWrapper = source.cloneNode(true)
|
||||
let image = imageWrapper.querySelector("img")
|
||||
let image = imageWrapper.querySelector('img')
|
||||
|
||||
Object.assign(imageWrapper.style, {
|
||||
maxWidth: "none",
|
||||
maxHeight: "none"
|
||||
maxWidth: 'none',
|
||||
maxHeight: 'none'
|
||||
})
|
||||
|
||||
Object.assign(image.style, {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover"
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
})
|
||||
|
||||
this._replaceIcon(imageWrapper)
|
||||
|
||||
image.onload = () => {
|
||||
let header = context.querySelector("header")
|
||||
let header = context.querySelector('header')
|
||||
let headerStlye = window.getComputedStyle(header)
|
||||
|
||||
/**
|
||||
@ -242,20 +251,20 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
/**
|
||||
* The minor side should not exceed the height of the context window.
|
||||
*/
|
||||
const maxMinorSize = context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop)
|
||||
|
||||
|
||||
const maxMinorSize =
|
||||
context.offsetHeight -
|
||||
2 * parseInt(headerStlye.paddingTop) -
|
||||
2 * parseInt(headerStlye.marginTop)
|
||||
|
||||
const max = {
|
||||
width: context.offsetWidth * maxFillRatio,
|
||||
height: context.offsetHeight * maxFillRatio
|
||||
}
|
||||
|
||||
|
||||
let majorSide
|
||||
let minorSide
|
||||
const _width = { name: "width", axis: "x" }
|
||||
const _height = { name: "height", axis: "y" }
|
||||
const _width = { name: 'width', axis: 'x' }
|
||||
const _height = { name: 'height', axis: 'y' }
|
||||
if (image.naturalHeight > image.naturalWidth) {
|
||||
majorSide = _height
|
||||
minorSide = _width
|
||||
@ -268,14 +277,17 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
return string.charAt(0).toUpperCase() + string.slice(1)
|
||||
}
|
||||
function getImageSize(side) {
|
||||
return image["natural" + capitalize(side.name)]
|
||||
return image['natural' + capitalize(side.name)]
|
||||
}
|
||||
|
||||
const majorImageSize = getImageSize(majorSide)
|
||||
// const minorImageSize = getImageSize(minorSide)
|
||||
|
||||
let ratio = getImageSize(minorSide) / getImageSize(majorSide)
|
||||
let size = (majorImageSize > max[majorSide.name]) ? max[majorSide.name] : majorImageSize
|
||||
let size =
|
||||
majorImageSize > max[majorSide.name]
|
||||
? max[majorSide.name]
|
||||
: majorImageSize
|
||||
|
||||
if (size * ratio > maxMinorSize) {
|
||||
size = maxMinorSize / ratio
|
||||
@ -286,8 +298,10 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
height: 0
|
||||
}
|
||||
|
||||
|
||||
let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
|
||||
let position = Points.fromPageToNode(
|
||||
context,
|
||||
Points.fromNodeToPage(source, { x: 0, y: 0 })
|
||||
)
|
||||
|
||||
let targetOffset = {
|
||||
x: 0,
|
||||
@ -297,8 +311,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
targetDimensions[majorSide.name] = size
|
||||
targetDimensions[minorSide.name] = size * ratio
|
||||
|
||||
targetOffset[majorSide.axis] = (context["offset" + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2
|
||||
targetOffset[minorSide.axis] = (context["offset" + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2
|
||||
targetOffset[majorSide.axis] =
|
||||
(context['offset' + capitalize(majorSide.name)] -
|
||||
targetDimensions[majorSide.name]) /
|
||||
2
|
||||
targetOffset[minorSide.axis] =
|
||||
(context['offset' + capitalize(minorSide.name)] -
|
||||
targetDimensions[minorSide.name]) /
|
||||
2
|
||||
|
||||
overlay.appendChild(imageWrapper)
|
||||
|
||||
@ -307,14 +327,13 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
top: 0,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
width: parseInt(sourceStyle.width),
|
||||
height: parseInt(sourceStyle.height)
|
||||
})
|
||||
|
||||
|
||||
TweenMax.set(overlay, {
|
||||
display: "flex",
|
||||
display: 'flex',
|
||||
autoAlpha: 0
|
||||
})
|
||||
|
||||
@ -322,7 +341,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
x: targetOffset.x,
|
||||
y: targetOffset.y,
|
||||
width: targetDimensions.width,
|
||||
height: targetDimensions.height,
|
||||
height: targetDimensions.height
|
||||
})
|
||||
TweenMax.to(overlay, this.fadeAnimationTime, {
|
||||
autoAlpha: 1
|
||||
@ -333,35 +352,40 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
|
||||
}
|
||||
|
||||
_replaceIcon(clone) {
|
||||
let zoomIcon = clone.querySelector(".icon.zoom")
|
||||
zoomIcon.classList.remove("zoom")
|
||||
zoomIcon.classList.add("close")
|
||||
let zoomIcon = clone.querySelector('.icon.zoom')
|
||||
zoomIcon.classList.remove('zoom')
|
||||
zoomIcon.classList.add('close')
|
||||
}
|
||||
|
||||
getBorderHeight(style) {
|
||||
const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
|
||||
const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom)
|
||||
const borderWidth =
|
||||
parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
|
||||
const padding =
|
||||
parseInt(style.paddingTop) + parseInt(style.paddingBottom)
|
||||
return parseInt(style.width) + borderWidth + padding
|
||||
}
|
||||
|
||||
getBorderWidth(style) {
|
||||
const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
|
||||
const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight)
|
||||
const borderWidth =
|
||||
parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
|
||||
const padding =
|
||||
parseInt(style.paddingLeft) + parseInt(style.paddingRight)
|
||||
return parseInt(style.width) + borderWidth + padding
|
||||
}
|
||||
|
||||
closeThumnailDetail(context) {
|
||||
let overlay = context.querySelector(".img-overlay")
|
||||
let overlay = context.querySelector('.img-overlay')
|
||||
|
||||
let timeline = new TimelineLite()
|
||||
|
||||
timeline.to(overlay, this.fadeAnimationDuration, {
|
||||
timeline
|
||||
.to(overlay, this.fadeAnimationDuration, {
|
||||
autoAlpha: 0
|
||||
}).set(overlay, {
|
||||
display: "none"
|
||||
})
|
||||
.set(overlay, {
|
||||
display: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
CardPlugin.Ui = class UiPlugin extends CardPluginBase {
|
||||
@ -373,56 +397,52 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase {
|
||||
|
||||
_getVerificationFunctions(context) {
|
||||
let arr = super._getVerificationFunctions(context)
|
||||
let func = [
|
||||
this._doesParentExist.bind(this, context, this.parent)
|
||||
]
|
||||
let func = [this._doesParentExist.bind(this, context, this.parent)]
|
||||
return arr.concat(func)
|
||||
}
|
||||
|
||||
_doesParentExist(context, parent) {
|
||||
if (parent == null) return true
|
||||
let valid = (context.querySelector(parent) != null)
|
||||
if (!valid) console.error("Could not find parent on context.", context, parent)
|
||||
let valid = context.querySelector(parent) != null
|
||||
if (!valid)
|
||||
console.error('Could not find parent on context.', context, parent)
|
||||
return valid
|
||||
}
|
||||
|
||||
append(context) {
|
||||
parent = (this.parent == null) ? context : context.querySelector(this.parent).appendChild(container)
|
||||
let container = document.createElement("div")
|
||||
parent =
|
||||
this.parent == null
|
||||
? context
|
||||
: context.querySelector(this.parent).appendChild(container)
|
||||
let container = document.createElement('div')
|
||||
container.className = this.className
|
||||
parent.appendChild(container)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||
|
||||
constructor(parentSelector, className, interactionType = "tap") {
|
||||
constructor(parentSelector, className, interactionType = 'tap') {
|
||||
super()
|
||||
this.className = className
|
||||
this.parentSelector = parentSelector
|
||||
this.interactionType = interactionType
|
||||
|
||||
}
|
||||
|
||||
get require() {
|
||||
return [
|
||||
CardPlugin.Ui
|
||||
]
|
||||
return [CardPlugin.Ui]
|
||||
}
|
||||
|
||||
append(context) {
|
||||
let container = context.querySelector(this.parentSelector)
|
||||
this.button = document.createElement("div")
|
||||
this.button.className = "icon button " + this.className
|
||||
this.button = document.createElement('div')
|
||||
this.button.className = 'icon button ' + this.className
|
||||
container.appendChild(this.button)
|
||||
|
||||
InteractionMapper.on(this.interactionType, this.button, () => {
|
||||
let subcard = context.querySelector(".mainview > .subcard")
|
||||
let target = (subcard) ? subcard : context
|
||||
let subcard = context.querySelector('.mainview > .subcard')
|
||||
let target = subcard ? subcard : context
|
||||
|
||||
this.speak(target)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@ -433,8 +453,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||
}
|
||||
|
||||
_activateButton() {
|
||||
if (this.button)
|
||||
this.button.classList.add("active")
|
||||
if (this.button) this.button.classList.add('active')
|
||||
}
|
||||
|
||||
_deactivate() {
|
||||
@ -442,36 +461,32 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||
}
|
||||
|
||||
_deactivateButton() {
|
||||
if (this.button)
|
||||
this.button.classList.remove("active")
|
||||
if (this.button) this.button.classList.remove('active')
|
||||
}
|
||||
|
||||
_isSameNode(node) {
|
||||
//console.log(this.currentText, node.innerText)
|
||||
return (this.currentText == node.innerText)
|
||||
return this.currentText == node.innerText
|
||||
}
|
||||
|
||||
speak(node) {
|
||||
|
||||
console.log(this._isSameNode(node))
|
||||
|
||||
if (!window.speechSynthesis.speaking) {
|
||||
console.log("Noone talking!")
|
||||
console.log('Noone talking!')
|
||||
this._start(node)
|
||||
} else if (this._isSameNode(node)) {
|
||||
console.log("Requested same!")
|
||||
console.log('Requested same!')
|
||||
this._stop()
|
||||
|
||||
} else {
|
||||
console.log("Requested Different!")
|
||||
console.log('Requested Different!')
|
||||
this._stop()
|
||||
this._start(node)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
_disableActive() {
|
||||
console.log("disableActive:", this.active)
|
||||
console.log('disableActive:', this.active)
|
||||
if (this.active) {
|
||||
this.active._deactivate()
|
||||
}
|
||||
@ -483,28 +498,40 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||
|
||||
let voices = window.speechSynthesis.getVoices()
|
||||
console.log(voices)
|
||||
let voice = voices.filter((val) => {
|
||||
let voice = voices.filter(val => {
|
||||
//console.log(val)
|
||||
return val.name == "Microsoft Hedda Desktop - German"
|
||||
return val.name == 'Microsoft Hedda Desktop - German'
|
||||
})[0]
|
||||
|
||||
//console.log(voice)
|
||||
|
||||
utterance.voice = voice
|
||||
console.log("TALK: ", utterance)
|
||||
console.log('TALK: ', utterance)
|
||||
window.speechSynthesis.speak(utterance)
|
||||
this._activate()
|
||||
window.speechSynthesis.resume()
|
||||
|
||||
|
||||
utterance.onboundary = () => { console.log("onboundary", node.innerText); if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) { console.log("text for speech synth changed!", this.currentText, node.innerText); this._stop() } }
|
||||
utterance.onend = () => console.log("onend", node.innerText)
|
||||
utterance.onerror = () => console.log("onerror", node.innerText)
|
||||
utterance.onmark = () => console.log("onmark", node.innerText)
|
||||
utterance.onpause = () => console.log("onpause", node.innerText)
|
||||
utterance.onresume = () => console.log("onresume", node.innerText)
|
||||
utterance.onstart = () => console.log("onstart", node.innerText)
|
||||
utterance.onerror = () => console.log("onerror", node.innerText)
|
||||
utterance.onboundary = () => {
|
||||
console.log('onboundary', node.innerText)
|
||||
if (
|
||||
this.currentText.substring(0, 5) !=
|
||||
node.innerText.substring(0, 5)
|
||||
) {
|
||||
console.log(
|
||||
'text for speech synth changed!',
|
||||
this.currentText,
|
||||
node.innerText
|
||||
)
|
||||
this._stop()
|
||||
}
|
||||
}
|
||||
utterance.onend = () => console.log('onend', node.innerText)
|
||||
utterance.onerror = () => console.log('onerror', node.innerText)
|
||||
utterance.onmark = () => console.log('onmark', node.innerText)
|
||||
utterance.onpause = () => console.log('onpause', node.innerText)
|
||||
utterance.onresume = () => console.log('onresume', node.innerText)
|
||||
utterance.onstart = () => console.log('onstart', node.innerText)
|
||||
utterance.onerror = () => console.log('onerror', node.innerText)
|
||||
}
|
||||
|
||||
_stop() {
|
||||
@ -517,7 +544,9 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||
return this.constructor.active
|
||||
}
|
||||
|
||||
set active(val) { this.constructor.active = val }
|
||||
set active(val) {
|
||||
this.constructor.active = val
|
||||
}
|
||||
|
||||
get currentText() {
|
||||
return this.constructor.text
|
||||
@ -526,5 +555,4 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
|
||||
set currentText(val) {
|
||||
this.constructor.text = val
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ import Card from './card.js'
|
||||
* @class ScatterCard
|
||||
*/
|
||||
export default class ScatterCard extends Card {
|
||||
|
||||
|
||||
/**
|
||||
* TODO: Find a more suitable name.
|
||||
* Adjusts the HTML to work in the new context.
|
||||
@ -19,32 +17,27 @@ export default class ScatterCard extends Card {
|
||||
* @param {*} [opts={}]
|
||||
* @memberof Card
|
||||
*/
|
||||
static setup(context, htmlString, {
|
||||
basePath = "./",
|
||||
modules = []
|
||||
} = {}) {
|
||||
context.classList.add("info-card")
|
||||
static setup(context, htmlString, { basePath = './', modules = [] } = {}) {
|
||||
context.classList.add('info-card')
|
||||
|
||||
this.relativePath = basePath
|
||||
htmlString = this._adjustRelativeLinks(htmlString)
|
||||
|
||||
let parser = new DOMParser()
|
||||
let html = parser.parseFromString(htmlString, "text/html")
|
||||
let html = parser.parseFromString(htmlString, 'text/html')
|
||||
|
||||
/**
|
||||
* Conflicts with the FindTarget method of the Abstract scatter.
|
||||
*/
|
||||
this._replaceAttributes(html, "onclick", this._replaceCallback)
|
||||
this._replaceAttributes(html, 'onclick', this._replaceCallback)
|
||||
|
||||
|
||||
let content = html.querySelector(".mainview")
|
||||
let content = html.querySelector('.mainview')
|
||||
context.appendChild(content)
|
||||
|
||||
super.setup(context, modules)
|
||||
return context
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Appends a close listener to the scatter element.
|
||||
*
|
||||
@ -59,7 +52,6 @@ export default class ScatterCard extends Card {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Creates a scatter for the card and applies the card to it,
|
||||
*
|
||||
@ -71,11 +63,12 @@ export default class ScatterCard extends Card {
|
||||
* @returns
|
||||
* @memberof Card
|
||||
*/
|
||||
static createCardScatter(html, scatterContainer, {
|
||||
basePath = "./",
|
||||
modules = []
|
||||
} = {}) {
|
||||
let element = document.createElement("div")
|
||||
static createCardScatter(
|
||||
html,
|
||||
scatterContainer,
|
||||
{ basePath = './', modules = [] } = {}
|
||||
) {
|
||||
let element = document.createElement('div')
|
||||
|
||||
scatterContainer.element.appendChild(element)
|
||||
new DOMScatter(element, scatterContainer, {
|
||||
@ -90,8 +83,6 @@ export default class ScatterCard extends Card {
|
||||
return element
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
*Utility function to create a fully functional card scatter.
|
||||
*
|
||||
@ -103,24 +94,27 @@ export default class ScatterCard extends Card {
|
||||
* @returns
|
||||
* @memberof CardScatter
|
||||
*/
|
||||
static loadAndCreateScatterCard(scatterContainer, item, {
|
||||
basePath = "../",
|
||||
modules = [],
|
||||
onClose = null
|
||||
} = {}) {
|
||||
static loadAndCreateScatterCard(
|
||||
scatterContainer,
|
||||
item,
|
||||
{ basePath = '../', modules = [], onClose = null } = {}
|
||||
) {
|
||||
console.log(basePath)
|
||||
return new Promise((resolve, reject) => {
|
||||
let url = basePath + "/" + item + "/index.html"
|
||||
console.log("Loading", url)
|
||||
let url = basePath + '/' + item + '/index.html'
|
||||
console.log('Loading', url)
|
||||
this.loadHTML(url)
|
||||
.then(html => {
|
||||
console.log("Received", html)
|
||||
let element = this.createCardScatter(html, scatterContainer, {
|
||||
console.log('Received', html)
|
||||
let element = this.createCardScatter(
|
||||
html,
|
||||
scatterContainer,
|
||||
{
|
||||
basePath,
|
||||
modules
|
||||
})
|
||||
if (onClose)
|
||||
this.addOnCloseListener(element, onClose)
|
||||
}
|
||||
)
|
||||
if (onClose) this.addOnCloseListener(element, onClose)
|
||||
resolve(element)
|
||||
})
|
||||
.catch(e => reject(e))
|
||||
@ -134,14 +128,12 @@ export default class ScatterCard extends Card {
|
||||
static _getLanguage(context) {
|
||||
return context.language
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ScatterCard.selectedLanguage = 0
|
||||
ScatterCard.languages = ["Deutsch", "English"]
|
||||
ScatterCard.languages = ['Deutsch', 'English']
|
||||
ScatterCard.languageTags = {
|
||||
Deutsch: "de",
|
||||
English: "en"
|
||||
Deutsch: 'de',
|
||||
English: 'en'
|
||||
}
|
||||
ScatterCard.scatterContainer = null
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
* @class Theme
|
||||
*/
|
||||
export default class Theme {
|
||||
|
||||
/**
|
||||
* Loads a config file and parses it to JSON.
|
||||
*
|
||||
@ -18,17 +17,15 @@ export default class Theme {
|
||||
*/
|
||||
static loadConfig(path = null) {
|
||||
return new Promise((resolve, reject) => {
|
||||
path = (path) ? path : './config.json'
|
||||
path = path ? path : './config.json'
|
||||
|
||||
let xhttp = new XMLHttpRequest()
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
|
||||
if (this.status == 200 || Theme._isLocal()) {
|
||||
try {
|
||||
const json = JSON.parse(this.responseText)
|
||||
resolve(json)
|
||||
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
@ -41,6 +38,6 @@ export default class Theme {
|
||||
}
|
||||
|
||||
static _isLocal() {
|
||||
return (window.location.protocol == 'file:')
|
||||
return window.location.protocol == 'file:'
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,10 @@ import Events from '../events.js'
|
||||
import { Points } from '../utils.js'
|
||||
|
||||
export default class CardWrapper extends Object {
|
||||
|
||||
constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
|
||||
constructor(
|
||||
domNode,
|
||||
{ triggerSVGClicks = true, allowClickDistance = 44 } = {}
|
||||
) {
|
||||
super()
|
||||
this.domNode = domNode
|
||||
this.triggerSVGClicks = triggerSVGClicks
|
||||
@ -16,42 +18,43 @@ export default class CardWrapper extends Object {
|
||||
}
|
||||
|
||||
handleClicks() {
|
||||
this.domNode.addEventListener('click', event => {
|
||||
this.domNode.addEventListener(
|
||||
'click',
|
||||
event => {
|
||||
if (event.isTrusted) {
|
||||
Events.stop(event)
|
||||
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
|
||||
this.tap(event, "triggerSVGClicks")
|
||||
this.tap(event, 'triggerSVGClicks')
|
||||
}
|
||||
}
|
||||
|
||||
}, true)
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
handleClicksAsTaps() {
|
||||
this.domNode.addEventListener('click', event => {
|
||||
this.domNode.addEventListener(
|
||||
'click',
|
||||
event => {
|
||||
if (event.isTrusted) {
|
||||
Events.stop(event)
|
||||
|
||||
}
|
||||
this.tap(event)
|
||||
}, true)
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
isClickable(node) {
|
||||
if (node == null)
|
||||
return false
|
||||
if (node.tagName == 'A' && node.hasAttribute("href"))
|
||||
return true
|
||||
if (node.hasAttribute("onclick"))
|
||||
return true
|
||||
if (node == null) return false
|
||||
if (node.tagName == 'A' && node.hasAttribute('href')) return true
|
||||
if (node.hasAttribute('onclick')) return true
|
||||
return false
|
||||
}
|
||||
|
||||
hasClickHandler(node) {
|
||||
if (node == null)
|
||||
return false
|
||||
if (this.tapNodes.has(node))
|
||||
return true
|
||||
if (node == null) return false
|
||||
if (this.tapNodes.has(node)) return true
|
||||
for (let [selector, handler] of this.tapHandler.entries()) {
|
||||
for (let obj of this.domNode.querySelectorAll(selector)) {
|
||||
if (node == obj) {
|
||||
@ -72,11 +75,9 @@ export default class CardWrapper extends Object {
|
||||
*/
|
||||
activeNodes() {
|
||||
let result = []
|
||||
for (let node of this.domNode.querySelectorAll("*")) {
|
||||
if (this.isClickable(node))
|
||||
result.push(node)
|
||||
if (this.hasClickHandler(node))
|
||||
result.push(node)
|
||||
for (let node of this.domNode.querySelectorAll('*')) {
|
||||
if (this.isClickable(node)) result.push(node)
|
||||
if (this.hasClickHandler(node)) result.push(node)
|
||||
}
|
||||
return result
|
||||
}
|
||||
@ -84,14 +85,26 @@ export default class CardWrapper extends Object {
|
||||
nearestActive(event) {
|
||||
let element = this.domNode
|
||||
let activeNodes = this.activeNodes()
|
||||
let globalClick = (event.center) ? event.center : { x: event.x, y: event.y }
|
||||
let globalClick = event.center
|
||||
? event.center
|
||||
: { x: event.x, y: event.y }
|
||||
let localClick = Points.fromPageToNode(element, globalClick)
|
||||
|
||||
let clickRects = activeNodes.map(link => {
|
||||
let rect = link.getBoundingClientRect()
|
||||
let topLeft = Points.fromPageToNode(element, rect)
|
||||
let center = Points.fromPageToNode(element, { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 })
|
||||
return { x: topLeft.x, y: topLeft.y, width: rect.width, height: rect.height, center, link }
|
||||
let center = Points.fromPageToNode(element, {
|
||||
x: rect.x + rect.width / 2,
|
||||
y: rect.y + rect.height / 2
|
||||
})
|
||||
return {
|
||||
x: topLeft.x,
|
||||
y: topLeft.y,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
center,
|
||||
link
|
||||
}
|
||||
})
|
||||
|
||||
let distances = []
|
||||
@ -161,13 +174,10 @@ export default class CardWrapper extends Object {
|
||||
}
|
||||
|
||||
onTap(objOrSelector, handler) {
|
||||
if (typeof (objOrSelector) == 'string') {
|
||||
if (typeof objOrSelector == 'string') {
|
||||
this.tapHandler.set(objOrSelector, handler)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.tapNodes.set(objOrSelector, handler)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -5,12 +5,15 @@
|
||||
var docTestLogMessages = []
|
||||
|
||||
Array.prototype.equals = function(array) {
|
||||
return this.length == array.length &&
|
||||
this.every( function(this_i,i) { return this_i == array[i] } )
|
||||
return (
|
||||
this.length == array.length &&
|
||||
this.every(function(this_i, i) {
|
||||
return this_i == array[i]
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export default class Doctest {
|
||||
|
||||
static assert(value) {
|
||||
if (!value) {
|
||||
throw new Error('Assertion violated')
|
||||
@ -18,25 +21,31 @@ export default class Doctest {
|
||||
}
|
||||
|
||||
static pprint(obj) {
|
||||
if (obj === null)
|
||||
return 'null'
|
||||
if (obj === null) return 'null'
|
||||
let stringified = obj.toString()
|
||||
if (stringified == '[object Object]')
|
||||
return JSON.stringify(obj)
|
||||
if (stringified == '[object Object]') return JSON.stringify(obj)
|
||||
return stringified
|
||||
}
|
||||
|
||||
static expect(expr, value) {
|
||||
if (this.pprint(expr) != this.pprint(value)) {
|
||||
//throw new Error("got `" + expr + "` but expected `" + value + "`.")
|
||||
throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.')
|
||||
throw new Error(
|
||||
'got `' +
|
||||
this.pprint(expr) +
|
||||
'` but expected `' +
|
||||
this.pprint(value) +
|
||||
'`.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
static expectError(error, message) {
|
||||
let index = error.toString().indexOf(message)
|
||||
if (index < 0) {
|
||||
throw new Error('got `' + message + '` but expected `' + error + '`.')
|
||||
throw new Error(
|
||||
'got `' + message + '` but expected `' + error + '`.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +53,9 @@ export default class Doctest {
|
||||
// if (!docTestLogMessages.equals(messages)) {
|
||||
docTestLogMessages.forEach((msg, i) => {
|
||||
if (msg != messages[i])
|
||||
throw new Error('Unexpected log message: `' + messages[i] + '`.')
|
||||
throw new Error(
|
||||
'Unexpected log message: `' + messages[i] + '`.'
|
||||
)
|
||||
})
|
||||
// throw new Error('Uups')
|
||||
//}
|
||||
@ -55,8 +66,7 @@ export default class Doctest {
|
||||
}
|
||||
|
||||
static highlight(code) {
|
||||
if (typeof(hljs) == 'undefined')
|
||||
return code
|
||||
if (typeof hljs == 'undefined') return code
|
||||
return hljs.highlight('javascript', code)
|
||||
}
|
||||
|
||||
@ -67,8 +77,7 @@ export default class Doctest {
|
||||
if (line.trim().length > 0) {
|
||||
informative = true
|
||||
}
|
||||
if (informative)
|
||||
result.push(line)
|
||||
if (informative) result.push(line)
|
||||
}
|
||||
return result.join('\n')
|
||||
}
|
||||
@ -81,7 +90,7 @@ export default class Doctest {
|
||||
}
|
||||
|
||||
static run(replaceExpect = false) {
|
||||
if (typeof(hljs) != 'undefined') {
|
||||
if (typeof hljs != 'undefined') {
|
||||
hljs.initHighlighting()
|
||||
}
|
||||
let doctests = document.querySelectorAll('.doctest')
|
||||
@ -95,7 +104,10 @@ export default class Doctest {
|
||||
let lines = text.value.split('\n')
|
||||
let better = []
|
||||
for (let line of lines) {
|
||||
if (replaceExpect && line.trim().startsWith('Doctest.expect(')) {
|
||||
if (
|
||||
replaceExpect &&
|
||||
line.trim().startsWith('Doctest.expect(')
|
||||
) {
|
||||
line = line.replace(/Doctest\.expect\(/, '>>> ').trim()
|
||||
if (line.endsWith(')') || line.endsWith(',')) {
|
||||
line = line.slice(0, -1)
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
var recordedErrors = new Map()
|
||||
|
||||
export default class Errors {
|
||||
|
||||
static countErrors() {
|
||||
let total = 0
|
||||
for (let error of recordedErrors.keys()) {
|
||||
@ -20,8 +19,7 @@ export default class Errors {
|
||||
if (recordedErrors.has(error)) {
|
||||
let sources = recordedErrors.get(error)
|
||||
sources.add(source)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
recordedErrors.set(error, new Set([source]))
|
||||
}
|
||||
}
|
||||
@ -37,16 +35,19 @@ export default class Errors {
|
||||
this.setStyle(document.body, {
|
||||
border: '2px solid red'
|
||||
})
|
||||
this.setStyle(errors, {position: 'absolute',
|
||||
this.setStyle(errors, {
|
||||
position: 'absolute',
|
||||
top: '0px',
|
||||
padding: '8px',
|
||||
width: '100%',
|
||||
background: 'red',
|
||||
color: 'white'})
|
||||
color: 'white'
|
||||
})
|
||||
document.body.appendChild(errors)
|
||||
let counter = document.createElement('div')
|
||||
counter.setAttribute('id', 'runtime-errors-counter')
|
||||
this.setStyle(counter, {borderRadius: '50%',
|
||||
this.setStyle(counter, {
|
||||
borderRadius: '50%',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
background: 'white',
|
||||
@ -54,16 +55,19 @@ export default class Errors {
|
||||
fontSize: '18px',
|
||||
textAlign: 'center',
|
||||
lineHeight: '32px',
|
||||
verticalAlign: 'middle'})
|
||||
verticalAlign: 'middle'
|
||||
})
|
||||
counter.innerHTML = '1'
|
||||
errors.appendChild(counter)
|
||||
|
||||
let header = document.createElement('div')
|
||||
this.setStyle(header, {position: 'absolute',
|
||||
this.setStyle(header, {
|
||||
position: 'absolute',
|
||||
top: '6px',
|
||||
left: '48px',
|
||||
height: '44px',
|
||||
fontSize: '32px'})
|
||||
fontSize: '32px'
|
||||
})
|
||||
header.innerHTML = 'Runtime Errors'
|
||||
errors.appendChild(header)
|
||||
errors.addEventListener('click', this.toggleErrors.bind(this))
|
||||
@ -76,7 +80,7 @@ export default class Errors {
|
||||
let errors = document.getElementById('runtime-errors')
|
||||
for (let error of recordedErrors.keys()) {
|
||||
for (var source of recordedErrors.get(error)) {
|
||||
if (typeof(source) == 'undefined') {
|
||||
if (typeof source == 'undefined') {
|
||||
source = 'See console for details'
|
||||
return
|
||||
}
|
||||
@ -93,9 +97,8 @@ export default class Errors {
|
||||
let errors = document.getElementById('runtime-errors')
|
||||
let infos = errors.querySelectorAll('.info')
|
||||
if (infos.length > 0) {
|
||||
infos.forEach((info) => errors.removeChild(info))
|
||||
}
|
||||
else {
|
||||
infos.forEach(info => errors.removeChild(info))
|
||||
} else {
|
||||
this.expandErrors()
|
||||
}
|
||||
}
|
||||
@ -111,14 +114,18 @@ export default class Errors {
|
||||
|
||||
static registerGlobalErrorHandler() {
|
||||
// Register more informative error handler
|
||||
window.addEventListener('error', (event) => {
|
||||
window.addEventListener(
|
||||
'error',
|
||||
event => {
|
||||
// if (typeof(event.error) == 'undefined') {
|
||||
// console.info("Catched undefined error", event)
|
||||
// }
|
||||
this.appendError(event.error, event.filename)
|
||||
}, true)
|
||||
},
|
||||
true
|
||||
)
|
||||
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.addEventListener('DOMContentLoaded', event => {
|
||||
this.showErrors()
|
||||
})
|
||||
}
|
||||
@ -127,10 +134,9 @@ export default class Errors {
|
||||
let iframes = document.getElementsByTagName('iframe')
|
||||
for (let i = 0; i < iframes.length; i++) {
|
||||
let target = iframes[i]
|
||||
target.iframeTimeout = setTimeout(
|
||||
() => {
|
||||
this.appendError('Cannot load iframe', target.src)},
|
||||
frameErrorTimeout)
|
||||
target.iframeTimeout = setTimeout(() => {
|
||||
this.appendError('Cannot load iframe', target.src)
|
||||
}, frameErrorTimeout)
|
||||
target.onload = () => {
|
||||
clearTimeout(target.iframeTimeout)
|
||||
}
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
|
||||
export default class Events {
|
||||
|
||||
static stop(event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
@ -20,8 +18,7 @@ export default class Events {
|
||||
}
|
||||
|
||||
static isCaptured(event) {
|
||||
if (event.__capturedBy)
|
||||
return true
|
||||
if (event.__capturedBy) return true
|
||||
return false
|
||||
}
|
||||
|
||||
@ -77,8 +74,15 @@ export default class Events {
|
||||
for (let i = 0; i < targets.length; i++) {
|
||||
let t = targets[i]
|
||||
let touchTarget = document.elementFromPoint(t.pageX, t.pageY)
|
||||
let touch = new Touch(undefined, touchTarget, t.identifier,
|
||||
t.pageX, t.pageY, t.screenX, t.screenY)
|
||||
let touch = new Touch(
|
||||
undefined,
|
||||
touchTarget,
|
||||
t.identifier,
|
||||
t.pageX,
|
||||
t.pageY,
|
||||
t.screenX,
|
||||
t.screenY
|
||||
)
|
||||
touches.push(touch)
|
||||
}
|
||||
return new TouchList(...touches)
|
||||
@ -168,8 +172,7 @@ export default class Events {
|
||||
for (let key of keys) {
|
||||
try {
|
||||
result += ' ' + key + ':' + event[key]
|
||||
}
|
||||
catch (e) {
|
||||
} catch (e) {
|
||||
console.log('Invalid key: ' + key)
|
||||
}
|
||||
}
|
||||
@ -179,11 +182,15 @@ export default class Events {
|
||||
static compareExtractedWithSimulated() {
|
||||
var diffs = 0
|
||||
if (this.extracted.length != this.simulated.length) {
|
||||
alert('Unequal length of extracted [' + this.extracted.length +
|
||||
'] and simulated events [' + this.simulated.length + '].')
|
||||
alert(
|
||||
'Unequal length of extracted [' +
|
||||
this.extracted.length +
|
||||
'] and simulated events [' +
|
||||
this.simulated.length +
|
||||
'].'
|
||||
)
|
||||
diffs += 1
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
for (let i = 0; i < this.extracted.length; i++) {
|
||||
var extracted = this.extracted[i]
|
||||
var simulated = this.simulated[i]
|
||||
@ -238,8 +245,10 @@ export default class Events {
|
||||
div.innerHTML = line
|
||||
this.popup.appendChild(div)
|
||||
}
|
||||
Elements.setStyle(this.popup,
|
||||
{ left: event.clientX + 'px', top: event.clientY + 'px' })
|
||||
Elements.setStyle(this.popup, {
|
||||
left: event.clientX + 'px',
|
||||
top: event.clientY + 'px'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -250,7 +259,6 @@ Events.simulated = []
|
||||
Events.simulationRunning = false
|
||||
|
||||
export class EventRecorder {
|
||||
|
||||
constructor() {
|
||||
this.recording = []
|
||||
this.recorded = []
|
||||
@ -262,8 +270,7 @@ export class EventRecorder {
|
||||
if (length == 0) {
|
||||
this.startTime = event.timeStamp
|
||||
Events.reset()
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let last = this.recording[length - 1]
|
||||
if (event.timeStamp < last.time) {
|
||||
console.log('warning: wrong temporal order')
|
||||
@ -305,8 +312,7 @@ export class EventRecorder {
|
||||
let delta = Math.round(dt)
|
||||
setTimeout(() => this.replay(whileCondition, onComplete), delta)
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
console.log('Played ' + this.step + ' events' + onComplete)
|
||||
Events.simulationRunning = false
|
||||
if (onComplete != null) {
|
||||
@ -316,4 +322,3 @@ export class EventRecorder {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -31,12 +31,10 @@ export class CardLoader {
|
||||
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
|
||||
this.addedNode = null
|
||||
console.log({
|
||||
|
||||
width,
|
||||
height,
|
||||
maxWidth,
|
||||
maxHeight,
|
||||
|
||||
maxHeight
|
||||
})
|
||||
}
|
||||
|
||||
@ -152,11 +150,13 @@ export class HTMLLoader extends CardLoader {
|
||||
domNode.innerHTML = xhr.response
|
||||
this.addedNode = domNode.firstElementChild
|
||||
let { width, height } = this.size(this.addedNode)
|
||||
console.log("HTMLLoader.load", { added: this.addedNode, width, height })
|
||||
if (width)
|
||||
this.wantedWidth = width || this.wantedWidth
|
||||
if (height)
|
||||
this.wantedHeight = height || this.wantedHeight
|
||||
console.log('HTMLLoader.load', {
|
||||
added: this.addedNode,
|
||||
width,
|
||||
height
|
||||
})
|
||||
if (width) this.wantedWidth = width || this.wantedWidth
|
||||
if (height) this.wantedHeight = height || this.wantedHeight
|
||||
resolve(this)
|
||||
}
|
||||
xhr.onerror = e => {
|
||||
@ -248,7 +248,7 @@ export class DOMFlip {
|
||||
this.cardWrapper = dom.querySelector('#' + this.id)
|
||||
let front = this.cardWrapper.querySelector('.front')
|
||||
this.frontLoader.load(front).then(loader => {
|
||||
this.frontLoaded(loader).then((obj) => {
|
||||
this.frontLoaded(loader).then(obj => {
|
||||
if (this.onLoaded) this.onLoaded()
|
||||
resolve(this)
|
||||
})
|
||||
@ -275,7 +275,9 @@ export class DOMFlip {
|
||||
scalable: this.scalable,
|
||||
rotatable: this.rotatable,
|
||||
overdoScaling: this.overdoScaling,
|
||||
tapDelegate: (this.tapDelegateFactory) ? this.tapDelegateFactory(this.cardWrapper) : null
|
||||
tapDelegate: this.tapDelegateFactory
|
||||
? this.tapDelegateFactory(this.cardWrapper)
|
||||
: null
|
||||
}
|
||||
)
|
||||
|
||||
@ -294,7 +296,9 @@ export class DOMFlip {
|
||||
|
||||
//Remove callback
|
||||
if (scatter.onTransform) {
|
||||
let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale)
|
||||
let callbackIdx = scatter.onTransform.indexOf(
|
||||
removeOnMinScale
|
||||
)
|
||||
scatter.onTransform.splice(callbackIdx, 1)
|
||||
}
|
||||
}
|
||||
@ -325,7 +329,7 @@ export class DOMFlip {
|
||||
}
|
||||
|
||||
setupFlippable(flippable, loader) {
|
||||
console.log("setupFlippable", loader.wantedWidth)
|
||||
console.log('setupFlippable', loader.wantedWidth)
|
||||
flippable.wantedWidth = loader.wantedWidth
|
||||
flippable.wantedHeight = loader.wantedHeight
|
||||
flippable.wantedScale = loader.scale
|
||||
@ -335,12 +339,10 @@ export class DOMFlip {
|
||||
}
|
||||
|
||||
start({ targetCenter = null } = {}) {
|
||||
console.log("DOMFlip.start", targetCenter)
|
||||
console.log('DOMFlip.start', targetCenter)
|
||||
if (this.preloadBack) {
|
||||
|
||||
this.flippable.start({ duration: this.flipDuration, targetCenter })
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let back = this.cardWrapper.querySelector('.back')
|
||||
let flippable = this.flippable
|
||||
this.backLoader.load(back).then(loader => {
|
||||
@ -487,7 +489,7 @@ export class DOMFlippable {
|
||||
|
||||
clickInfo() {
|
||||
this.bringToFront()
|
||||
console.log("clickInfo")
|
||||
console.log('clickInfo')
|
||||
this.infoBtn.click()
|
||||
}
|
||||
|
||||
@ -585,14 +587,14 @@ export class DOMFlippable {
|
||||
let y = this.flipped ? yy : this.startY
|
||||
|
||||
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
|
||||
console.log("start", this.flipDuration)
|
||||
console.log('start', this.flipDuration)
|
||||
TweenLite.to(this.card, this.flipDuration, {
|
||||
rotationY: targetY,
|
||||
ease: Power1.easeOut,
|
||||
transformOrigin: '50% 50%',
|
||||
onUpdate,
|
||||
onComplete: e => {
|
||||
console.log("start end", this.flipDuration)
|
||||
console.log('start end', this.flipDuration)
|
||||
if (this.flipped) {
|
||||
//this.hide(this.front)
|
||||
this.enable(this.backBtn)
|
||||
@ -602,7 +604,6 @@ export class DOMFlippable {
|
||||
this.onFrontFlipped(this)
|
||||
}
|
||||
} else {
|
||||
|
||||
if (this.onBackFlipped == null) {
|
||||
this.enable(this.infoBtn, this.fadeDuration)
|
||||
this.enable(this.closeBtn, this.fadeDuration)
|
||||
@ -625,7 +626,7 @@ export class DOMFlippable {
|
||||
force3D: true
|
||||
})
|
||||
|
||||
console.log("start 2", this.wantedWidth, this.startWidth, {w, h})
|
||||
console.log('start 2', this.wantedWidth, this.startWidth, { w, h })
|
||||
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
|
||||
TweenLite.to(this.element, this.flipDuration / 2, {
|
||||
scale: targetScale,
|
||||
|
||||
@ -2,11 +2,11 @@ import {Points} from './utils.js'
|
||||
import { Capabilities } from './capabilities.js'
|
||||
|
||||
export class FrameContainer {
|
||||
|
||||
constructor(element) {
|
||||
this.element = element
|
||||
this.delegate = new InteractionMapper(element, this,
|
||||
{ mouseWheelElement: window})
|
||||
this.delegate = new InteractionMapper(element, this, {
|
||||
mouseWheelElement: window
|
||||
})
|
||||
}
|
||||
|
||||
capture(event) {
|
||||
@ -30,7 +30,6 @@ export class FrameContainer {
|
||||
}
|
||||
|
||||
export class FrameTarget {
|
||||
|
||||
constructor(frame, target, debug = false) {
|
||||
this.frame = frame
|
||||
this.target = target
|
||||
@ -48,7 +47,8 @@ export class FrameTarget {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
clientX: p.x,
|
||||
clientY: p.y})
|
||||
clientY: p.y
|
||||
})
|
||||
this.target.dispatchEvent(event)
|
||||
}
|
||||
|
||||
@ -59,8 +59,15 @@ export class FrameTarget {
|
||||
let point = pointMap.get(key)
|
||||
let p = Points.fromPageToNode(this.frame, point)
|
||||
let touchTarget = doc.elementFromPoint(p.x, p.y)
|
||||
let touch = new Touch(undefined, touchTarget, key,
|
||||
p.x, p.y, p.x, p.y)
|
||||
let touch = new Touch(
|
||||
undefined,
|
||||
touchTarget,
|
||||
key,
|
||||
p.x,
|
||||
p.y,
|
||||
p.x,
|
||||
p.y
|
||||
)
|
||||
touches.push(touch)
|
||||
}
|
||||
return new TouchList(...touches)
|
||||
@ -80,8 +87,8 @@ export class FrameTarget {
|
||||
radiusX: 2.5,
|
||||
radiusY: 2.5,
|
||||
rotationAngle: 10,
|
||||
force: 0.5,
|
||||
});
|
||||
force: 0.5
|
||||
})
|
||||
|
||||
const touchEvent = new TouchEvent(type, {
|
||||
cancelable: true,
|
||||
@ -89,36 +96,44 @@ export class FrameTarget {
|
||||
touches: [touchObj],
|
||||
targetTouches: [touchObj],
|
||||
changedTouches: [touchObj],
|
||||
shiftKey: false,
|
||||
});
|
||||
if (this.debug) console.log("simulateTouchEventChrome", touchEvent)
|
||||
this.target.dispatchEvent(touchEvent);
|
||||
shiftKey: false
|
||||
})
|
||||
if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
|
||||
this.target.dispatchEvent(touchEvent)
|
||||
}
|
||||
|
||||
simulateTouchEventSafari(type, point, pointMap, touchEventKey='targetTouches') {
|
||||
simulateTouchEventSafari(
|
||||
type,
|
||||
point,
|
||||
pointMap,
|
||||
touchEventKey = 'targetTouches'
|
||||
) {
|
||||
let p = Points.fromPageToNode(this.frame, point)
|
||||
let data = { view: this.frame.contentWindow,
|
||||
let data = {
|
||||
view: this.frame.contentWindow,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
clientX: p.x,
|
||||
clientY: p.y}
|
||||
clientY: p.y
|
||||
}
|
||||
data[touchEventKey] = this.createTouchList(pointMap)
|
||||
let event = new TouchEvent(type, data)
|
||||
if (this.debug) console.log("simulateTouchEventChrome", touchEvent)
|
||||
if (this.debug) console.log('simulateTouchEventChrome', touchEvent)
|
||||
this.target.dispatchEvent(event)
|
||||
}
|
||||
|
||||
simulateTouchEvent(type, point, pointMap, touchEventKey = 'targetTouches') {
|
||||
if (Capabilities.isSafari) {
|
||||
this.simulateTouchEventSafari(type, point, pointMap, touchEventKey)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.simulateTouchEventChrome(type, point, pointMap)
|
||||
}
|
||||
}
|
||||
|
||||
isMouseLikeEvent(event) {
|
||||
return event.type.startsWith('mouse') || event.type.startsWith('pointer')
|
||||
return (
|
||||
event.type.startsWith('mouse') || event.type.startsWith('pointer')
|
||||
)
|
||||
}
|
||||
|
||||
onStart(event, interaction) {
|
||||
@ -126,10 +141,12 @@ export class FrameTarget {
|
||||
for (let [key, point] of interaction.current.entries()) {
|
||||
if (this.isMouseLikeEvent(event)) {
|
||||
this.simulateMouseEvent('mousedown', point)
|
||||
}
|
||||
else {
|
||||
this.simulateTouchEvent('touchstart', point,
|
||||
interaction.current)
|
||||
} else {
|
||||
this.simulateTouchEvent(
|
||||
'touchstart',
|
||||
point,
|
||||
interaction.current
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
@ -140,10 +157,8 @@ export class FrameTarget {
|
||||
for (let [key, point] of interaction.current.entries()) {
|
||||
if (this.isMouseLikeEvent(event)) {
|
||||
this.simulateMouseEvent('mousemove', point)
|
||||
}
|
||||
else {
|
||||
this.simulateTouchEvent('touchmove', point,
|
||||
interaction.current)
|
||||
} else {
|
||||
this.simulateTouchEvent('touchmove', point, interaction.current)
|
||||
return
|
||||
}
|
||||
}
|
||||
@ -154,10 +169,13 @@ export class FrameTarget {
|
||||
for (let [key, point] of interaction.current.entries()) {
|
||||
if (this.isMouseLikeEvent(event)) {
|
||||
this.simulateMouseEvent('mouseend', point)
|
||||
}
|
||||
else {
|
||||
this.simulateTouchEvent('touchend', point,
|
||||
interaction.ended, 'changedTouches')
|
||||
} else {
|
||||
this.simulateTouchEvent(
|
||||
'touchend',
|
||||
point,
|
||||
interaction.ended,
|
||||
'changedTouches'
|
||||
)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ function onerror(event) {
|
||||
}
|
||||
|
||||
function load() {
|
||||
loadQueue.forEach((url) => {
|
||||
loadQueue.forEach(url => {
|
||||
let xhr = new XMLHttpRequest()
|
||||
xhr.responseType = 'blob'
|
||||
xhr.onload = onload
|
||||
@ -25,7 +25,7 @@ function load() {
|
||||
})
|
||||
}
|
||||
|
||||
self.onmessage = (event) => {
|
||||
self.onmessage = event => {
|
||||
let msg = event.data
|
||||
switch (msg.command) {
|
||||
case 'load':
|
||||
@ -45,5 +45,4 @@ self.onmessage = (event) => {
|
||||
default:
|
||||
console.warn('Unknown worker command: ' + msg.command)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
20
lib/index.js
20
lib/index.js
@ -1,7 +1,6 @@
|
||||
import { Capabilities } from './capabilities.js'
|
||||
|
||||
export default class Index {
|
||||
|
||||
constructor(template, pages, notfound = 'thumbnails/notfound.png') {
|
||||
this.template = template
|
||||
this.pages = pages
|
||||
@ -22,16 +21,14 @@ export default class Index {
|
||||
|
||||
let icon = wrapper.querySelector('.icon')
|
||||
|
||||
icon.onerror = (e) => {
|
||||
if (this.notfound)
|
||||
icon.src = this.notfound
|
||||
icon.onerror = e => {
|
||||
if (this.notfound) icon.src = this.notfound
|
||||
}
|
||||
let iconSrc = src.replace('.html', '.png')
|
||||
//console.log("iconSrc", iconSrc)
|
||||
if (iconSrc.endsWith('index.png')) {
|
||||
icon.src = iconSrc.replace('index.png', 'thumbnail.png')
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
icon.src = 'thumbnails/' + iconSrc
|
||||
}
|
||||
|
||||
@ -44,8 +41,7 @@ export default class Index {
|
||||
}
|
||||
|
||||
frames() {
|
||||
if (this.pages.length == 0)
|
||||
return
|
||||
if (this.pages.length == 0) return
|
||||
let [title, src, id] = this.pages.shift()
|
||||
let iframe = document.createElement('iframe')
|
||||
iframe.frameborder = 0
|
||||
@ -53,7 +49,7 @@ export default class Index {
|
||||
let icon = wrapper.querySelector('.icon')
|
||||
|
||||
icon.parentNode.replaceChild(iframe, icon)
|
||||
iframe.onload = (e) => {
|
||||
iframe.onload = e => {
|
||||
this.frames()
|
||||
}
|
||||
iframe.src = src + window.location.search
|
||||
@ -61,13 +57,11 @@ export default class Index {
|
||||
|
||||
load() {
|
||||
this.setup()
|
||||
if (window.location.search.startsWith('?test'))
|
||||
this.frames()
|
||||
if (window.location.search.startsWith('?test')) this.frames()
|
||||
}
|
||||
|
||||
loadAndTest() {
|
||||
this.setup()
|
||||
if (!Capabilities.isMobile)
|
||||
this.frames()
|
||||
if (!Capabilities.isMobile) this.frames()
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
export class Inspect {
|
||||
// Code inspection functions
|
||||
|
||||
static allScriptSources()
|
||||
{
|
||||
static allScriptSources() {
|
||||
let sources = []
|
||||
let scripts = document.getElementsByTagName('script')
|
||||
for (let i = 0; i < scripts.length; i++) {
|
||||
|
||||
@ -13,7 +13,6 @@ import Logging from './logging.js'
|
||||
*/
|
||||
|
||||
export class IInteractionTarget extends Interface {
|
||||
|
||||
capture(event) {
|
||||
return typeof true
|
||||
}
|
||||
@ -230,14 +229,32 @@ export class InteractionPoints {
|
||||
let currentAngle = Points.angle(c1, c2)
|
||||
let previousAngle = Points.angle(p1, p2)
|
||||
let alpha = this.diffAngle(currentAngle, previousAngle)
|
||||
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize)
|
||||
} else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
|
||||
return new InteractionDelta(
|
||||
delta.x,
|
||||
delta.y,
|
||||
zoom,
|
||||
alpha,
|
||||
cm,
|
||||
csize
|
||||
)
|
||||
} else if (
|
||||
csize == 1 &&
|
||||
psize == 1 &&
|
||||
this.current.firstKey() == this.previous.firstKey()
|
||||
) {
|
||||
// We need to ensure that the keys are the same, since single points with different keys
|
||||
// can jump
|
||||
let current = this.current.first()
|
||||
let previous = this.previous.first()
|
||||
let delta = Points.subtract(current, previous)
|
||||
return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current, csize)
|
||||
return new InteractionDelta(
|
||||
delta.x,
|
||||
delta.y,
|
||||
1.0,
|
||||
0.0,
|
||||
current,
|
||||
csize
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
@ -375,8 +392,7 @@ export class Interaction extends InteractionPoints {
|
||||
if (this.tapCounts.has(key)) {
|
||||
let count = this.tapCounts.get(key)
|
||||
this.tapCounts.set(key, count + 1)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.tapCounts.set(key, 1)
|
||||
}
|
||||
this.tapPositions.set(key, point)
|
||||
@ -418,7 +434,10 @@ export class Interaction extends InteractionPoints {
|
||||
this.unregisterTap(key)
|
||||
}
|
||||
}
|
||||
if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
|
||||
if (
|
||||
this.tapTimestamps.has(key) &&
|
||||
performance.now() > this.tapTimestamps.get(key) + this.tapDuration
|
||||
) {
|
||||
//console.log("tap too long")
|
||||
this.unregisterTap(key)
|
||||
}
|
||||
@ -426,8 +445,7 @@ export class Interaction extends InteractionPoints {
|
||||
if (this.isTap(key)) {
|
||||
this.registerTap(key, ended)
|
||||
result = this.tapCounts.get(key) == 2
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.unregisterTap(key)
|
||||
}
|
||||
//console.log("isDoubleTap", this.tapCounts.get(key), result)
|
||||
@ -494,7 +512,13 @@ export class InteractionDelegate {
|
||||
constructor(
|
||||
element,
|
||||
target,
|
||||
{ mouseWheelElement = null, useCapture = true, capturePointerEvents = true, cancelOnWindowOut = true, debug = false } = {}
|
||||
{
|
||||
mouseWheelElement = null,
|
||||
useCapture = true,
|
||||
capturePointerEvents = true,
|
||||
cancelOnWindowOut = true,
|
||||
debug = false
|
||||
} = {}
|
||||
) {
|
||||
this.debug = debug
|
||||
this.interaction = new Interaction()
|
||||
@ -549,7 +573,8 @@ export class InteractionDelegate {
|
||||
element.addEventListener(
|
||||
'pointermove',
|
||||
e => {
|
||||
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
|
||||
if (this.debug)
|
||||
console.log('pointermove', e.pointerId, e.pointerType)
|
||||
|
||||
if (
|
||||
e.pointerType == 'touch' ||
|
||||
@ -566,7 +591,8 @@ export class InteractionDelegate {
|
||||
element.addEventListener(
|
||||
'pointerup',
|
||||
e => {
|
||||
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
|
||||
if (this.debug)
|
||||
console.log('pointerup', e.pointerId, e.pointerType)
|
||||
this.onEnd(e)
|
||||
if (this.capturePointerEvents) {
|
||||
try {
|
||||
@ -581,7 +607,8 @@ export class InteractionDelegate {
|
||||
element.addEventListener(
|
||||
'pointercancel',
|
||||
e => {
|
||||
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
|
||||
if (this.debug)
|
||||
console.log('pointercancel', e.pointerId, e.pointerType)
|
||||
this.onEnd(e)
|
||||
if (this.capturePointerEvents)
|
||||
element.releasePointerCapture(e.pointerId)
|
||||
@ -593,7 +620,12 @@ export class InteractionDelegate {
|
||||
element.addEventListener(
|
||||
'pointerleave',
|
||||
e => {
|
||||
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
|
||||
if (this.debug)
|
||||
console.log(
|
||||
'pointerleave',
|
||||
e.pointerId,
|
||||
e.pointerType
|
||||
)
|
||||
if (e.target == element) this.onEnd(e)
|
||||
},
|
||||
useCapture
|
||||
@ -604,7 +636,12 @@ export class InteractionDelegate {
|
||||
element.addEventListener(
|
||||
'pointerout',
|
||||
e => {
|
||||
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
|
||||
if (this.debug)
|
||||
console.log(
|
||||
'pointerout',
|
||||
e.pointerId,
|
||||
e.pointerType
|
||||
)
|
||||
if (e.target == element) this.onEnd(e)
|
||||
},
|
||||
useCapture
|
||||
@ -615,14 +652,20 @@ export class InteractionDelegate {
|
||||
window.addEventListener(
|
||||
'pointerout',
|
||||
e => {
|
||||
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
|
||||
if (this.debug)
|
||||
console.log(
|
||||
'pointerout',
|
||||
e.pointerId,
|
||||
e.pointerType,
|
||||
e.target
|
||||
)
|
||||
if (e.target == element) {
|
||||
this.onEnd(e)
|
||||
}
|
||||
},
|
||||
useCapture)
|
||||
useCapture
|
||||
)
|
||||
}
|
||||
|
||||
} else if (window.TouchEvent) {
|
||||
if (this.debug) console.log('Touch API')
|
||||
element.addEventListener(
|
||||
@ -698,8 +741,7 @@ export class InteractionDelegate {
|
||||
// && Events.isMouseDown(e))
|
||||
|
||||
if (Events.isMouseDown(e)) {
|
||||
if (this.debug)
|
||||
console.log('mousemove', e)
|
||||
if (this.debug) console.log('mousemove', e)
|
||||
this.onMove(e)
|
||||
}
|
||||
},
|
||||
@ -720,7 +762,9 @@ export class InteractionDelegate {
|
||||
e => {
|
||||
if (e.target == element) {
|
||||
this.onEnd(e)
|
||||
console.warn('Shouldn\'t happen: mouseout ends interaction')
|
||||
console.warn(
|
||||
"Shouldn't happen: mouseout ends interaction"
|
||||
)
|
||||
}
|
||||
},
|
||||
useCapture
|
||||
@ -734,7 +778,8 @@ export class InteractionDelegate {
|
||||
this.onEnd(e)
|
||||
}
|
||||
},
|
||||
useCapture)
|
||||
useCapture
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -886,7 +931,10 @@ export class InteractionDelegate {
|
||||
let point = extracted[key]
|
||||
let updated = this.interaction.update(key, point)
|
||||
if (updated) {
|
||||
console.warn('new pointer in updateInteraction shouldn\'t happen', key)
|
||||
console.warn(
|
||||
"new pointer in updateInteraction shouldn't happen",
|
||||
key
|
||||
)
|
||||
this.interactionStarted(event, key, point)
|
||||
}
|
||||
}
|
||||
@ -924,13 +972,23 @@ export class InteractionDelegate {
|
||||
* @extends {InteractionDelegate}
|
||||
*/
|
||||
export class InteractionMapper extends InteractionDelegate {
|
||||
|
||||
constructor(
|
||||
element,
|
||||
target,
|
||||
{ tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {}
|
||||
{
|
||||
tapDistance = 10,
|
||||
longPressTime = 500.0,
|
||||
useCapture = true,
|
||||
mouseWheelElement = null,
|
||||
logInteractionsAbove = 12
|
||||
} = {}
|
||||
) {
|
||||
super(element, target, { tapDistance, useCapture, longPressTime, mouseWheelElement })
|
||||
super(element, target, {
|
||||
tapDistance,
|
||||
useCapture,
|
||||
longPressTime,
|
||||
mouseWheelElement
|
||||
})
|
||||
this.logInteractionsAbove = logInteractionsAbove
|
||||
}
|
||||
|
||||
@ -1039,10 +1097,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||
* @param {object} [opts] - An options object. See the hammer documentation for more details.
|
||||
*/
|
||||
static on(types, elements, cb, opts = {}) {
|
||||
|
||||
opts = Object.assign({}, {
|
||||
|
||||
}, opts)
|
||||
opts = Object.assign({}, {}, opts)
|
||||
|
||||
if (typeof Hammer === 'undefined') {
|
||||
console.error('Hammer.js not found!')
|
||||
@ -1051,23 +1106,25 @@ export class InteractionMapper extends InteractionDelegate {
|
||||
|
||||
// convert to array
|
||||
types = Array.isArray(types) ? types : types.split(/\s/)
|
||||
if (elements instanceof NodeList || elements instanceof HTMLCollection) {
|
||||
if (
|
||||
elements instanceof NodeList ||
|
||||
elements instanceof HTMLCollection
|
||||
) {
|
||||
elements = Array.from(elements)
|
||||
}
|
||||
elements = Array.isArray(elements) ? elements : [elements]
|
||||
|
||||
for (let i = 0; i < types.length; i++) {
|
||||
|
||||
const type = types[i].toLowerCase()
|
||||
|
||||
// list of hammer events
|
||||
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type)
|
||||
const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(
|
||||
type
|
||||
)
|
||||
|
||||
// if it is a hammer event
|
||||
if (useHammer) {
|
||||
|
||||
for (let j = 0; j < elements.length; j++) {
|
||||
|
||||
// if(elements[j].tagName == "svg") return false;
|
||||
|
||||
let hammer = new Hammer(elements[j], opts)
|
||||
@ -1078,15 +1135,33 @@ export class InteractionMapper extends InteractionDelegate {
|
||||
|
||||
// recognizers
|
||||
if (type.startsWith('pan')) {
|
||||
hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
|
||||
hammer
|
||||
.get('pan')
|
||||
.set(
|
||||
Object.assign(
|
||||
{ direction: Hammer.DIRECTION_ALL },
|
||||
opts
|
||||
)
|
||||
)
|
||||
} else if (type.startsWith('pinch')) {
|
||||
hammer.get('pinch').set(Object.assign({ enable: true }, opts))
|
||||
hammer
|
||||
.get('pinch')
|
||||
.set(Object.assign({ enable: true }, opts))
|
||||
} else if (type.startsWith('press')) {
|
||||
hammer.get('press').set(opts)
|
||||
} else if (type.startsWith('rotate')) {
|
||||
hammer.get('rotate').set(Object.assign({ enable: true }, opts))
|
||||
hammer
|
||||
.get('rotate')
|
||||
.set(Object.assign({ enable: true }, opts))
|
||||
} else if (type.startsWith('swipe')) {
|
||||
hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts))
|
||||
hammer
|
||||
.get('swipe')
|
||||
.set(
|
||||
Object.assign(
|
||||
{ direction: Hammer.DIRECTION_ALL },
|
||||
opts
|
||||
)
|
||||
)
|
||||
} else if (type.startsWith('tap')) {
|
||||
hammer.get('tap').set(opts)
|
||||
}
|
||||
@ -1095,9 +1170,7 @@ export class InteractionMapper extends InteractionDelegate {
|
||||
cb(event)
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
for (let j = 0; j < elements.length; j++) {
|
||||
Hammer.on(elements[j], type, event => {
|
||||
cb(event)
|
||||
|
||||
@ -10,8 +10,7 @@ export default class Interface {
|
||||
for (let key of interfaceKeys) {
|
||||
let interfaceDesc = this.prototype[key]
|
||||
let classDesc = klass.prototype[key]
|
||||
if (typeof(classDesc) == 'undefined')
|
||||
return 'Missing ' + key
|
||||
if (typeof classDesc == 'undefined') return 'Missing ' + key
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
@ -28,7 +28,6 @@ try {
|
||||
* setup method.
|
||||
*/
|
||||
export default class Logging {
|
||||
|
||||
/** Static log function.
|
||||
* @param {*} message
|
||||
*/
|
||||
@ -60,7 +59,11 @@ export default class Logging {
|
||||
}
|
||||
}
|
||||
|
||||
static setup({log=console.log, warn=console.warn, error=console.error} = {}) {
|
||||
static setup({
|
||||
log = console.log,
|
||||
warn = console.warn,
|
||||
error = console.error
|
||||
} = {}) {
|
||||
logHandlers.log = log
|
||||
logHandlers.warn = warn
|
||||
logHandlers.error = error
|
||||
|
||||
@ -11,7 +11,6 @@ import Theme from './theme.js'
|
||||
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
|
||||
*/
|
||||
export default class AbstractPopup extends PIXI.Graphics {
|
||||
|
||||
/**
|
||||
* Creates an instance of an AbstractPopup (only for internal use).
|
||||
*
|
||||
@ -45,13 +44,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -72,7 +72,9 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
onHidden: null,
|
||||
visible: true,
|
||||
orientation: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -81,10 +83,12 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
|
||||
if (this.opts.maxWidth) {
|
||||
this.headerStyle.wordWrap = true
|
||||
this.headerStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
|
||||
this.headerStyle.wordWrapWidth =
|
||||
this.opts.maxWidth - 2 * this.opts.padding
|
||||
|
||||
this.textStyle.wordWrap = true
|
||||
this.textStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
|
||||
this.textStyle.wordWrapWidth =
|
||||
this.opts.maxWidth - 2 * this.opts.padding
|
||||
}
|
||||
|
||||
this.alpha = 0
|
||||
@ -115,7 +119,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// position
|
||||
//-----------------
|
||||
this.sy = this.opts.padding
|
||||
@ -123,13 +126,15 @@ 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)
|
||||
}
|
||||
@ -151,13 +156,15 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
// content
|
||||
//-----------------
|
||||
if (this.opts.content != null) {
|
||||
|
||||
let content = null
|
||||
|
||||
if (typeof this.opts.content === 'string') {
|
||||
content = new PIXI.Text(this.opts.content, this.textStyle)
|
||||
} else if (typeof this.opts.content === 'number') {
|
||||
content = new PIXI.Text(this.opts.content.toString(), this.textStyle)
|
||||
content = new PIXI.Text(
|
||||
this.opts.content.toString(),
|
||||
this.textStyle
|
||||
)
|
||||
} else {
|
||||
content = this.opts.content
|
||||
}
|
||||
@ -181,13 +188,12 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// wanted width & wanted height
|
||||
//-----------------
|
||||
const padding = this.opts.padding
|
||||
const size = this.getInnerSize()
|
||||
const width = size.width + (2 * padding)
|
||||
const height = size.height + (2 * padding)
|
||||
const width = size.width + 2 * padding
|
||||
const height = size.height + 2 * padding
|
||||
|
||||
this.wantedWidth = Math.max(width, this.opts.minWidth)
|
||||
this.wantedHeight = Math.max(height, this.opts.minHeight)
|
||||
@ -229,17 +235,31 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
||||
const square =
|
||||
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
|
||||
const diameter = Math.round(this.opts.radius * 2)
|
||||
|
||||
this.clear()
|
||||
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||
this.lineStyle(
|
||||
this.opts.strokeWidth,
|
||||
this.opts.stroke,
|
||||
this.opts.strokeAlpha
|
||||
)
|
||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||
if (square && diameter === this.wantedWidth) {
|
||||
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
|
||||
this.drawCircle(
|
||||
this.wantedWidth / 2,
|
||||
this.wantedHeight / 2,
|
||||
this.opts.radius
|
||||
)
|
||||
} else {
|
||||
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
|
||||
this.drawRoundedRect(
|
||||
0,
|
||||
0,
|
||||
this.wantedWidth,
|
||||
this.wantedHeight,
|
||||
this.opts.radius
|
||||
)
|
||||
}
|
||||
this.endFill()
|
||||
|
||||
@ -255,7 +275,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @returns {object} An JavaScript object width the keys width and height.
|
||||
*/
|
||||
getInnerSize() {
|
||||
|
||||
let width = 0
|
||||
let height = 0
|
||||
|
||||
@ -283,7 +302,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
show(cb) {
|
||||
|
||||
TweenLite.to(this, this.theme.fast, {
|
||||
alpha: 1,
|
||||
onComplete: () => {
|
||||
@ -303,7 +321,6 @@ export default class AbstractPopup extends PIXI.Graphics {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
hide(cb) {
|
||||
|
||||
TweenLite.to(this, this.theme.fast, {
|
||||
alpha: 0,
|
||||
onComplete: () => {
|
||||
|
||||
154
lib/pixi/app.js
154
lib/pixi/app.js
@ -21,7 +21,6 @@ import {debounce} from '../utils.js'
|
||||
* @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
|
||||
*/
|
||||
class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
|
||||
|
||||
mapPositionToPoint(point, x, y) {
|
||||
let resolution = this.renderer.resolution
|
||||
let extendWidth = 1.0
|
||||
@ -29,8 +28,10 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
|
||||
let dy = 0
|
||||
let canvas = this.renderer.view
|
||||
let context = canvas.getContext('webgl')
|
||||
if (context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height) {
|
||||
if (
|
||||
context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height
|
||||
) {
|
||||
extendWidth = context.drawingBufferWidth / canvas.width
|
||||
extendHeight = context.drawingBufferHeight / canvas.height
|
||||
//dx = wantedWidth - context.drawingBufferWidth
|
||||
@ -63,7 +64,6 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
|
||||
* @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
|
||||
*/
|
||||
export default class PIXIApp extends PIXI.Application {
|
||||
|
||||
/**
|
||||
* Creates an instance of a PixiApp.
|
||||
*
|
||||
@ -86,12 +86,23 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
|
||||
*/
|
||||
constructor({
|
||||
width = null, height = null, view = null,
|
||||
transparent = true, backgroundColor = 0x282828, theme = 'dark',
|
||||
antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true,
|
||||
fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true,
|
||||
graphql = false }) {
|
||||
|
||||
width = null,
|
||||
height = null,
|
||||
view = null,
|
||||
transparent = true,
|
||||
backgroundColor = 0x282828,
|
||||
theme = 'dark',
|
||||
antialias = true,
|
||||
resolution = window.devicePixelRatio || 1,
|
||||
autoResize = true,
|
||||
fpsLogging = false,
|
||||
progress = {},
|
||||
forceCanvas = false,
|
||||
roundPixels = true,
|
||||
monkeyPatchMapping = true,
|
||||
adaptive = true,
|
||||
graphql = false
|
||||
}) {
|
||||
const fullScreen = !width || !height
|
||||
|
||||
if (fullScreen) {
|
||||
@ -132,7 +143,10 @@ export default class PIXIApp extends PIXI.Application {
|
||||
console.log('App is in fullScreen mode or autoResize mode')
|
||||
const resizeDebounced = debounce(event => this.resize(event), 50)
|
||||
window.addEventListener('resize', resizeDebounced)
|
||||
document.body.addEventListener('orientationchange', this.checkOrientation.bind(this))
|
||||
document.body.addEventListener(
|
||||
'orientationchange',
|
||||
this.checkOrientation.bind(this)
|
||||
)
|
||||
}
|
||||
if (monkeyPatchMapping) {
|
||||
console.log('Using monkey patched coordinate mapping')
|
||||
@ -159,15 +173,17 @@ export default class PIXIApp extends PIXI.Application {
|
||||
|
||||
// GraphQL
|
||||
if (this.graphql && typeof apollo !== 'undefined') {
|
||||
|
||||
const networkInterface = apollo.createNetworkInterface({
|
||||
uri: '/graphql'
|
||||
})
|
||||
|
||||
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
|
||||
const wsClient = new subscriptions.SubscriptionClient(
|
||||
`wss://${location.hostname}/subscriptions`,
|
||||
{
|
||||
reconnect: true,
|
||||
connectionParams: {}
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
|
||||
networkInterface,
|
||||
@ -180,7 +196,11 @@ export default class PIXIApp extends PIXI.Application {
|
||||
}
|
||||
|
||||
// progress
|
||||
this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this }))
|
||||
this._progress = new Progress(
|
||||
Object.assign({ theme: this.theme }, this.progressOpts, {
|
||||
app: this
|
||||
})
|
||||
)
|
||||
this._progress.visible = false
|
||||
this.stage.addChild(this._progress)
|
||||
|
||||
@ -205,9 +225,12 @@ export default class PIXIApp extends PIXI.Application {
|
||||
checkOrientation(event) {
|
||||
var value = this.orientation()
|
||||
if (value != this.orient) {
|
||||
setTimeout(100, function () {
|
||||
setTimeout(
|
||||
100,
|
||||
function() {
|
||||
this.orientationChanged(true)
|
||||
}.bind(this))
|
||||
}.bind(this)
|
||||
)
|
||||
this.orient = value
|
||||
}
|
||||
}
|
||||
@ -230,9 +253,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @param {number} [width] - The width of the app.
|
||||
* @param {number} [height] - The height of the app.
|
||||
*/
|
||||
layout(width, height) {
|
||||
|
||||
}
|
||||
layout(width, height) {}
|
||||
|
||||
/**
|
||||
* Draws the display tree of the app. Typically this can be delegated
|
||||
@ -303,7 +324,10 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
|
||||
* @return {PIXIApp} - Returns the PIXIApp for chaining.
|
||||
*/
|
||||
resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
|
||||
resize(
|
||||
event,
|
||||
{ width = window.innerWidth, height = window.innerHeight } = {}
|
||||
) {
|
||||
this.width = width
|
||||
this.height = height
|
||||
this.expandRenderer()
|
||||
@ -324,7 +348,8 @@ export default class PIXIApp extends PIXI.Application {
|
||||
monkeyPatchPixiMapping() {
|
||||
if (this.originalMapPositionToPoint === null) {
|
||||
let interactionManager = this.renderer.plugins.interaction
|
||||
this.originalMapPositionToPoint = interactionManager.mapPositionToPoint
|
||||
this.originalMapPositionToPoint =
|
||||
interactionManager.mapPositionToPoint
|
||||
interactionManager.mapPositionToPoint = (point, x, y) => {
|
||||
return this.fixedMapPositionToPoint(point, x, y)
|
||||
}
|
||||
@ -351,8 +376,11 @@ export default class PIXIApp extends PIXI.Application {
|
||||
let canvas = this.renderer.view
|
||||
let context = canvas.getContext('webgl')
|
||||
|
||||
if (context !== null && (context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height)) {
|
||||
if (
|
||||
context !== null &&
|
||||
(context.drawingBufferWidth < canvas.width ||
|
||||
context.drawingBufferHeight < canvas.height)
|
||||
) {
|
||||
extendWidth = context.drawingBufferWidth / canvas.width
|
||||
extendHeight = context.drawingBufferHeight / canvas.height
|
||||
//dx = wantedWidth - context.drawingBufferWidth
|
||||
@ -360,7 +388,12 @@ export default class PIXIApp extends PIXI.Application {
|
||||
}
|
||||
x *= extendWidth
|
||||
y *= extendHeight
|
||||
return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
|
||||
return this.originalMapPositionToPoint.call(
|
||||
interactionManager,
|
||||
local,
|
||||
x,
|
||||
y + dy
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -394,7 +427,6 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* called without a parameter.
|
||||
*/
|
||||
progress(value) {
|
||||
|
||||
if (typeof value === 'undefined') {
|
||||
return this._progress
|
||||
}
|
||||
@ -412,8 +444,9 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @return {Modal} Returns the Modal object.
|
||||
*/
|
||||
modal(opts = {}) {
|
||||
|
||||
let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
|
||||
let modal = new Modal(
|
||||
Object.assign({ theme: this.theme }, opts, { app: this })
|
||||
)
|
||||
this.scene.addChild(modal)
|
||||
|
||||
return modal
|
||||
@ -426,8 +459,9 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @return {Message} Returns the Message object.
|
||||
*/
|
||||
message(opts = {}) {
|
||||
|
||||
let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
|
||||
let message = new Message(
|
||||
Object.assign({ theme: this.theme }, opts, { app: this })
|
||||
)
|
||||
this.scene.addChild(message)
|
||||
|
||||
return message
|
||||
@ -446,10 +480,14 @@ 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 } = {}) {
|
||||
|
||||
this.loadTextures(resources, textures => {
|
||||
|
||||
loadSprites(
|
||||
resources,
|
||||
loaded = null,
|
||||
{ resolutionDependent = true, progress = false } = {}
|
||||
) {
|
||||
this.loadTextures(
|
||||
resources,
|
||||
textures => {
|
||||
let sprites = new Map()
|
||||
|
||||
for (let [key, texture] of textures) {
|
||||
@ -459,8 +497,9 @@ export default class PIXIApp extends PIXI.Application {
|
||||
if (loaded) {
|
||||
loaded.call(this, sprites)
|
||||
}
|
||||
|
||||
}, { resolutionDependent, progress })
|
||||
},
|
||||
{ resolutionDependent, progress }
|
||||
)
|
||||
|
||||
return this
|
||||
}
|
||||
@ -478,8 +517,11 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
|
||||
* @return {PIXIApp} The PIXIApp object for chaining.
|
||||
*/
|
||||
loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
|
||||
|
||||
loadTextures(
|
||||
resources,
|
||||
loaded = null,
|
||||
{ resolutionDependent = true, progress = false } = {}
|
||||
) {
|
||||
if (!Array.isArray(resources)) {
|
||||
resources = [resources]
|
||||
}
|
||||
@ -487,17 +529,21 @@ export default class PIXIApp extends PIXI.Application {
|
||||
const loader = this.loader
|
||||
|
||||
for (let resource of resources) {
|
||||
|
||||
if (!loader.resources[resource]) {
|
||||
|
||||
if (resolutionDependent) {
|
||||
let resolution = Math.round(this.renderer.resolution)
|
||||
switch (resolution) {
|
||||
case 2:
|
||||
loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'))
|
||||
loader.add(
|
||||
resource,
|
||||
resource.replace(/\.([^.]*)$/, '@2x.$1')
|
||||
)
|
||||
break
|
||||
case 3:
|
||||
loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'))
|
||||
loader.add(
|
||||
resource,
|
||||
resource.replace(/\.([^.]*)$/, '@3x.$1')
|
||||
)
|
||||
break
|
||||
default:
|
||||
loader.add(resource)
|
||||
@ -540,7 +586,6 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* rejected with an error.
|
||||
*/
|
||||
query(query, opts = {}) {
|
||||
|
||||
if (typeof query === 'string') {
|
||||
opts = Object.assign({}, opts, { query })
|
||||
} else {
|
||||
@ -572,7 +617,6 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* rejected with an error.
|
||||
*/
|
||||
mutate(mutation, opts = {}) {
|
||||
|
||||
if (typeof mutation === 'string') {
|
||||
opts = Object.assign({}, opts, { mutation })
|
||||
} else {
|
||||
@ -604,7 +648,6 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* rejected with an error.
|
||||
*/
|
||||
subscribe(subscription, opts = {}) {
|
||||
|
||||
if (typeof subscription === 'string') {
|
||||
opts = Object.assign({}, opts, { subscription })
|
||||
} else {
|
||||
@ -641,7 +684,7 @@ export default class PIXIApp extends PIXI.Application {
|
||||
|
||||
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
|
||||
@ -665,7 +708,11 @@ export default class PIXIApp extends PIXI.Application {
|
||||
pixiGlobal.x *= resolution
|
||||
pixiGlobal.y *= resolution
|
||||
// console.log("app.convertPointFromNodeToPage", pixiGlobal)
|
||||
return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
|
||||
return window.convertPointFromNodeToPage(
|
||||
app.view,
|
||||
pixiGlobal.x,
|
||||
pixiGlobal.y
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -679,7 +726,6 @@ export default class PIXIApp extends PIXI.Application {
|
||||
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
|
||||
*/
|
||||
class FpsDisplay extends PIXI.Graphics {
|
||||
|
||||
/**
|
||||
* Creates an instance of a FpsDisplay.
|
||||
*
|
||||
@ -687,25 +733,27 @@ class FpsDisplay extends PIXI.Graphics {
|
||||
* @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
|
||||
*/
|
||||
constructor(app) {
|
||||
|
||||
super()
|
||||
|
||||
this.app = app
|
||||
|
||||
this.lineStyle(3, 0x434f4f, 1)
|
||||
.beginFill(0x434f4f, .6)
|
||||
.beginFill(0x434f4f, 0.6)
|
||||
.drawRoundedRect(0, 0, 68, 32, 5)
|
||||
.endFill()
|
||||
.position.set(20, 20)
|
||||
|
||||
this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
|
||||
this.text = new PIXI.Text(
|
||||
this.fps,
|
||||
new PIXI.TextStyle({
|
||||
fontFamily: 'Arial',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
fill: '#f6f6f6',
|
||||
stroke: '#434f4f',
|
||||
strokeThickness: 3
|
||||
}))
|
||||
})
|
||||
)
|
||||
this.text.position.set(6, 6)
|
||||
|
||||
this.addChild(this.text)
|
||||
@ -721,7 +769,7 @@ class FpsDisplay extends PIXI.Graphics {
|
||||
* @return {PIXIApp} Returns the PIXIApp object for chaining.
|
||||
*/
|
||||
refreshFps() {
|
||||
this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`
|
||||
this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
* @param {number} [blur=50] The strength of the blur.
|
||||
*/
|
||||
export default class BlurFilter extends PIXI.Filter {
|
||||
|
||||
constructor(shape, blur = 50) {
|
||||
super()
|
||||
|
||||
@ -69,7 +68,9 @@ 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
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -79,16 +80,27 @@ export default class BlurFilter extends PIXI.Filter {
|
||||
* @returns {Object}
|
||||
*/
|
||||
normalize(value) {
|
||||
|
||||
let shape = null
|
||||
|
||||
if (value instanceof PIXI.Circle) {
|
||||
shape = { type: 'circle', x: value.x, y: value.y, r: value.radius }
|
||||
} else if (value instanceof PIXI.Rectangle) {
|
||||
shape = {type: 'rectangle', x: value.x, y: value.y, width: value.width, height: value.height}
|
||||
shape = {
|
||||
type: 'rectangle',
|
||||
x: value.x,
|
||||
y: value.y,
|
||||
width: value.width,
|
||||
height: value.height
|
||||
}
|
||||
} else {
|
||||
const bounds = value.getBounds()
|
||||
shape = {type: 'rectangle', x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height}
|
||||
shape = {
|
||||
type: 'rectangle',
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: bounds.width,
|
||||
height: bounds.height
|
||||
}
|
||||
}
|
||||
|
||||
return shape
|
||||
@ -104,9 +116,7 @@ export default class BlurFilter extends PIXI.Filter {
|
||||
* @private
|
||||
*/
|
||||
class TiltShiftAxisFilter extends PIXI.Filter {
|
||||
|
||||
constructor(shape, blur) {
|
||||
|
||||
const vertex = `
|
||||
attribute vec2 aVertexPosition;
|
||||
attribute vec2 aTextureCoord;
|
||||
@ -179,7 +189,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
||||
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)
|
||||
@ -213,7 +228,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
||||
return new PIXI.Circle(circle[0], circle[1], circle[2])
|
||||
} else {
|
||||
const rectangle = this.uniforms.rectangle
|
||||
return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
|
||||
return new PIXI.Rectangle(
|
||||
rectangle[0],
|
||||
rectangle[1],
|
||||
rectangle[2],
|
||||
rectangle[3]
|
||||
)
|
||||
}
|
||||
}
|
||||
set shape(value) {
|
||||
@ -222,7 +242,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
|
||||
this.uniforms.circle = [value.x, value.y, value.r]
|
||||
} else {
|
||||
this.uniforms.shape = 2
|
||||
this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height]
|
||||
this.uniforms.rectangle = [
|
||||
value.x,
|
||||
value.y,
|
||||
value.x + value.width,
|
||||
value.y + value.height
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -260,4 +285,3 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
|
||||
this.uniforms.delta.y = 0.1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -47,7 +47,6 @@ import Events from '../events.js'
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
|
||||
*/
|
||||
export default class Button extends PIXI.Container {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Button.
|
||||
*
|
||||
@ -106,13 +105,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
label: null,
|
||||
x: 0,
|
||||
@ -150,18 +150,31 @@ export default class Button extends PIXI.Container {
|
||||
tooltip: null,
|
||||
badge: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
|
||||
if (
|
||||
typeof this.opts.icon === 'undefined' &&
|
||||
typeof this.opts.iconActive !== 'undefined'
|
||||
) {
|
||||
this.opts.icon = this.opts.iconActive
|
||||
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
|
||||
} else if (
|
||||
typeof this.opts.icon !== 'undefined' &&
|
||||
typeof this.opts.iconActive === 'undefined'
|
||||
) {
|
||||
this.opts.iconActive = this.opts.icon
|
||||
}
|
||||
|
||||
if (this.opts.style === 'link') {
|
||||
Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 })
|
||||
Object.assign(this.opts, {
|
||||
strokeAlpha: 0,
|
||||
strokeActiveAlpha: 0,
|
||||
fillAlpha: 0,
|
||||
fillActiveAlpha: 0
|
||||
})
|
||||
}
|
||||
|
||||
this._active = null
|
||||
@ -200,7 +213,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// Button
|
||||
//-----------------
|
||||
let button = new PIXI.Graphics()
|
||||
@ -222,18 +234,27 @@ export default class Button extends PIXI.Container {
|
||||
// Icon
|
||||
//-----------------
|
||||
if (this.opts.icon) {
|
||||
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
|
||||
this.iconInactive = this.loadIcon(
|
||||
this.opts.icon,
|
||||
this.opts.iconColor
|
||||
)
|
||||
}
|
||||
|
||||
if (this.opts.iconActive) {
|
||||
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
|
||||
this.iconActive = this.loadIcon(
|
||||
this.opts.iconActive,
|
||||
this.opts.iconColorActive
|
||||
)
|
||||
}
|
||||
|
||||
// interaction
|
||||
//-----------------
|
||||
this.button.on('pointerover', e => {
|
||||
this.capture(e)
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 0.83,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
this.button.on('pointermove', e => {
|
||||
@ -242,13 +263,19 @@ export default class Button extends PIXI.Container {
|
||||
|
||||
this.button.on('pointerout', e => {
|
||||
this.capture(e)
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: 1, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 1,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
this.button.on('pointerdown', e => {
|
||||
//this.capture(e)
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .7, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 0.7,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
this.button.on('pointerup', e => {
|
||||
@ -261,7 +288,10 @@ export default class Button extends PIXI.Container {
|
||||
this.opts.action.call(this, e, this)
|
||||
}
|
||||
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 0.83,
|
||||
overwrite: 'none'
|
||||
})
|
||||
|
||||
if (this.opts.type === 'checkbox') {
|
||||
this.active = !this.active
|
||||
@ -284,9 +314,16 @@ export default class Button extends PIXI.Container {
|
||||
//-----------------
|
||||
if (this.opts.tooltip) {
|
||||
if (typeof this.opts.tooltip === 'string') {
|
||||
this.tooltip = new Tooltip({ object: this, content: this.opts.tooltip })
|
||||
this.tooltip = new Tooltip({
|
||||
object: this,
|
||||
content: this.opts.tooltip
|
||||
})
|
||||
} else {
|
||||
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||
this.opts.tooltip = Object.assign(
|
||||
{},
|
||||
{ object: this },
|
||||
this.opts.tooltip
|
||||
)
|
||||
this.tooltip = new Tooltip(this.opts.tooltip)
|
||||
}
|
||||
}
|
||||
@ -294,12 +331,15 @@ export default class Button extends PIXI.Container {
|
||||
// badge
|
||||
//-----------------
|
||||
if (this.opts.badge) {
|
||||
let opts = Object.assign({}, {
|
||||
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 {
|
||||
@ -313,10 +353,15 @@ export default class Button extends PIXI.Container {
|
||||
badge.x = this.x - badge.width / 2 + opts.offsetLeft
|
||||
break
|
||||
case 'center':
|
||||
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
|
||||
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
|
||||
badge.x =
|
||||
this.x + this.width - badge.width / 2 + opts.offsetLeft
|
||||
}
|
||||
|
||||
switch (opts.verticalAlign) {
|
||||
@ -324,10 +369,15 @@ export default class Button extends PIXI.Container {
|
||||
badge.y = this.y - badge.height / 2 + opts.offsetTop
|
||||
break
|
||||
case 'middle':
|
||||
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
|
||||
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
|
||||
badge.y =
|
||||
this.y + this.height - badge.height / 2 + opts.offsetTop
|
||||
}
|
||||
|
||||
this.addChild(badge)
|
||||
@ -348,7 +398,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// Clear content
|
||||
//-----------------
|
||||
this.removeChild(this.content)
|
||||
@ -434,7 +483,6 @@ 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':
|
||||
@ -460,16 +508,16 @@ 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)
|
||||
this.content.x = (this._width - this.content.width) / 2
|
||||
break
|
||||
case 'right':
|
||||
this.content.x = this._width - this.opts.padding - this.content.width
|
||||
this.content.x =
|
||||
this._width - this.opts.padding - this.content.width
|
||||
break
|
||||
}
|
||||
|
||||
@ -481,7 +529,8 @@ export default class Button extends PIXI.Container {
|
||||
this.content.y = (this._height - this.content.height) / 2
|
||||
break
|
||||
case 'bottom':
|
||||
this.content.y = this._height - this.opts.padding - this.content.height
|
||||
this.content.y =
|
||||
this._height - this.opts.padding - this.content.height
|
||||
break
|
||||
}
|
||||
|
||||
@ -495,16 +544,32 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
this.button.clear()
|
||||
if (this.active) {
|
||||
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||
this.button.lineStyle(
|
||||
this.opts.strokeActiveWidth,
|
||||
this.opts.strokeActive,
|
||||
this.opts.strokeActiveAlpha
|
||||
)
|
||||
this.button.beginFill(
|
||||
this.opts.fillActive,
|
||||
this.opts.fillActiveAlpha
|
||||
)
|
||||
} else {
|
||||
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||
this.button.lineStyle(
|
||||
this.opts.strokeWidth,
|
||||
this.opts.stroke,
|
||||
this.opts.strokeAlpha
|
||||
)
|
||||
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||
}
|
||||
this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
|
||||
this.button.drawRoundedRect(
|
||||
0,
|
||||
0,
|
||||
this._width,
|
||||
this._height,
|
||||
this.opts.radius
|
||||
)
|
||||
this.button.endFill()
|
||||
|
||||
return this
|
||||
@ -519,7 +584,6 @@ export default class Button extends PIXI.Container {
|
||||
return this._active
|
||||
}
|
||||
set active(value) {
|
||||
|
||||
this._active = value
|
||||
|
||||
if (this._active) {
|
||||
@ -544,18 +608,17 @@ export default class Button extends PIXI.Container {
|
||||
return this._disabled
|
||||
}
|
||||
set disabled(value) {
|
||||
|
||||
this._disabled = value
|
||||
|
||||
if (this._disabled) {
|
||||
this.button.interactive = false
|
||||
this.button.buttonMode = false
|
||||
this.button.alpha = .5
|
||||
this.button.alpha = 0.5
|
||||
if (this.icon) {
|
||||
this.icon.alpha = .5
|
||||
this.icon.alpha = 0.5
|
||||
}
|
||||
if (this.text) {
|
||||
this.text.alpha = .5
|
||||
this.text.alpha = 0.5
|
||||
}
|
||||
} else {
|
||||
this.button.interactive = true
|
||||
@ -576,7 +639,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.opts.strokeAlpha = 1
|
||||
this.opts.strokeActiveAlpha = 1
|
||||
this.opts.fillAlpha = 1
|
||||
@ -593,7 +655,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
hide() {
|
||||
|
||||
this.opts.strokeAlpha = 0
|
||||
this.opts.strokeActiveAlpha = 0
|
||||
this.opts.fillAlpha = 0
|
||||
@ -613,7 +674,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
|
||||
*/
|
||||
loadIcon(icon, color) {
|
||||
|
||||
let displayObject = null
|
||||
|
||||
if (icon instanceof PIXI.DisplayObject) {
|
||||
@ -623,10 +683,12 @@ export default class Button extends PIXI.Container {
|
||||
if (this.text) {
|
||||
size = this.text.height
|
||||
} else if (this.opts.minHeight) {
|
||||
size = this.opts.minHeight - (2 * this.opts.padding)
|
||||
size = this.opts.minHeight - 2 * this.opts.padding
|
||||
}
|
||||
|
||||
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
|
||||
const url = Button.iconIsUrl(icon)
|
||||
? icon
|
||||
: `../../assets/icons/${icon}.png`
|
||||
const iconTexture = PIXI.Texture.fromImage(url, true)
|
||||
|
||||
const sprite = new PIXI.Sprite(iconTexture)
|
||||
|
||||
@ -24,7 +24,6 @@ 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.
|
||||
*
|
||||
@ -74,13 +73,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -112,7 +112,9 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
align: 'center', // left, center, right
|
||||
verticalAlign: 'middle', // top, middle, bottom
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.buttons = []
|
||||
|
||||
@ -136,13 +138,11 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// Buttons
|
||||
//-----------------
|
||||
let position = 0
|
||||
|
||||
for (let it of this.opts.buttons) {
|
||||
|
||||
delete it.x
|
||||
delete it.y
|
||||
|
||||
@ -164,11 +164,19 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
it.fillActive = it.fillActive || this.opts.fillActive
|
||||
it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha
|
||||
it.stroke = it.stroke || this.opts.stroke
|
||||
it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
|
||||
it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
|
||||
it.strokeWidth =
|
||||
it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth
|
||||
it.strokeAlpha =
|
||||
it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha
|
||||
it.strokeActive = it.strokeActive || this.opts.strokeActive
|
||||
it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth
|
||||
it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
|
||||
it.strokeActiveWidth =
|
||||
it.strokeActiveWidth != null
|
||||
? it.strokeActiveWidth
|
||||
: this.opts.strokeActiveWidth
|
||||
it.strokeActiveAlpha =
|
||||
it.strokeActiveAlpha != null
|
||||
? it.strokeActiveAlpha
|
||||
: this.opts.strokeActiveAlpha
|
||||
it.textStyle = it.textStyle || this.opts.textStyle
|
||||
it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
|
||||
it.style = it.style || this.opts.style
|
||||
@ -187,7 +195,10 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
it.align = it.align || this.opts.align
|
||||
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
|
||||
it.afterAction = (event, button) => {
|
||||
if (this.opts.type === 'radio' && button.opts.type === 'default') {
|
||||
if (
|
||||
this.opts.type === 'radio' &&
|
||||
button.opts.type === 'default'
|
||||
) {
|
||||
this.buttons.forEach(it => {
|
||||
if (it.opts.type === 'default') {
|
||||
it.active = false
|
||||
@ -204,7 +215,11 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
if (typeof it.tooltip === 'string') {
|
||||
it.tooltip = { content: it.tooltip, container: this }
|
||||
} else {
|
||||
it.tooltip = Object.assign({}, {container: this}, it.tooltip)
|
||||
it.tooltip = Object.assign(
|
||||
{},
|
||||
{ container: this },
|
||||
it.tooltip
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,7 +228,10 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
this.addChild(button)
|
||||
this.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') {
|
||||
@ -240,7 +258,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// set position
|
||||
//-----------------
|
||||
this.position.set(this.opts.x, this.opts.y)
|
||||
@ -259,18 +276,30 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
if (this.opts.margin === 0) {
|
||||
|
||||
this.buttons.forEach(it => it.hide())
|
||||
|
||||
this.clear()
|
||||
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||
this.lineStyle(
|
||||
this.opts.strokeWidth,
|
||||
this.opts.stroke,
|
||||
this.opts.strokeAlpha
|
||||
)
|
||||
this.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||
this.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
|
||||
this.drawRoundedRect(
|
||||
0,
|
||||
0,
|
||||
this.width,
|
||||
this.height,
|
||||
this.opts.radius
|
||||
)
|
||||
|
||||
// Draw borders
|
||||
this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
|
||||
this.lineStyle(
|
||||
this.opts.strokeWidth,
|
||||
this.opts.stroke,
|
||||
this.opts.strokeAlpha / 2
|
||||
)
|
||||
|
||||
this.buttons.forEach((it, i) => {
|
||||
if (i > 0) {
|
||||
@ -281,7 +310,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
} else {
|
||||
this.lineTo(it.width, it.y)
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
@ -301,10 +329,9 @@ 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))
|
||||
}
|
||||
|
||||
/**
|
||||
@ -314,7 +341,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @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)
|
||||
@ -326,7 +352,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.alpha = 1
|
||||
|
||||
return this
|
||||
@ -338,7 +363,6 @@ export default class ButtonGroup extends PIXI.Graphics {
|
||||
* @return {ButtonGroup} A reference to the button group for chaining.
|
||||
*/
|
||||
hide() {
|
||||
|
||||
this.alpha = 0
|
||||
|
||||
return this
|
||||
|
||||
@ -7,7 +7,6 @@ import {DeepZoomImage} from './deepzoom/image.js'
|
||||
let globalScatterLoaderCanvas = null
|
||||
|
||||
export class ScatterLoader extends CardLoader {
|
||||
|
||||
get scatter() {
|
||||
return this.src
|
||||
}
|
||||
@ -35,8 +34,7 @@ export class ScatterLoader extends CardLoader {
|
||||
if (isSprite) {
|
||||
w = this.scatter.displayObject.texture.width
|
||||
h = this.scatter.displayObject.texture.height
|
||||
}
|
||||
else if (isDeepZoom) {
|
||||
} else if (isDeepZoom) {
|
||||
let [ww, hh] = this.scatter.displayObject.baseSize
|
||||
w = ww
|
||||
h = hh
|
||||
@ -49,7 +47,8 @@ export class ScatterLoader extends CardLoader {
|
||||
canvas.height = h
|
||||
let renderer = new PIXI.WebGLRenderer(w, h, {
|
||||
view: canvas,
|
||||
resolution: resolution})
|
||||
resolution: resolution
|
||||
})
|
||||
|
||||
let displayObject = this.scatter.displayObject
|
||||
let x = displayObject.x
|
||||
@ -64,8 +63,7 @@ export class ScatterLoader extends CardLoader {
|
||||
if (Capabilities.isSafari) {
|
||||
displayObject.y = h
|
||||
displayObject.scale.set(1, -1) // sx, -sy)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
displayObject.y = 0
|
||||
displayObject.scale.set(1, 1)
|
||||
}
|
||||
@ -87,12 +85,11 @@ export class ScatterLoader extends CardLoader {
|
||||
return new Promise((resolve, reject) => {
|
||||
let isImage = domNode instanceof HTMLImageElement
|
||||
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
|
||||
let image = (isImage) ? domNode : document.createElement("img")
|
||||
let image = isImage ? domNode : document.createElement('img')
|
||||
let [x, y, w, h, cloneURL] = this.cloneScatterImage()
|
||||
let [ww, hh] = this.unscaledSize()
|
||||
image.onload = (e) => {
|
||||
if (!isImage)
|
||||
domNode.appendChild(image)
|
||||
image.onload = e => {
|
||||
if (!isImage) domNode.appendChild(image)
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.wantedWidth = ww
|
||||
@ -101,39 +98,41 @@ export class ScatterLoader extends CardLoader {
|
||||
this.rotation = this.scatter.rotation
|
||||
resolve(this)
|
||||
}
|
||||
image.onerror = (e) => {
|
||||
image.onerror = e => {
|
||||
reject(this)
|
||||
}
|
||||
image.src = cloneURL
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default class FlipEffect {
|
||||
|
||||
constructor(scatter, domScatterContainer, flipTemplate, backLoader) {
|
||||
this.flipped = false
|
||||
this.scatter = scatter
|
||||
this.backLoader = backLoader
|
||||
this.scatterLoader = new ScatterLoader(scatter)
|
||||
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate,
|
||||
this.domFlip = new DOMFlip(
|
||||
domScatterContainer,
|
||||
flipTemplate,
|
||||
this.scatterLoader,
|
||||
backLoader, {
|
||||
backLoader,
|
||||
{
|
||||
onBack: this.backCardClosed.bind(this)
|
||||
})
|
||||
}
|
||||
)
|
||||
this.setupInfoButton()
|
||||
}
|
||||
|
||||
startFlip() {
|
||||
let center = this.flipCenter()
|
||||
let loader = this.backLoader
|
||||
this.domFlip.load().then((domFlip) => {
|
||||
this.domFlip.load().then(domFlip => {
|
||||
this.scatter.displayObject.visible = false
|
||||
domFlip.centerAt(center)
|
||||
domFlip.zoom(this.scatter.scale)
|
||||
let target = this.constraintFlipCenter(center, loader)
|
||||
console.log("FlipEffect.startFlip", target, loader)
|
||||
console.log('FlipEffect.startFlip', target, loader)
|
||||
domFlip.start({ targetCenter: target })
|
||||
})
|
||||
}
|
||||
@ -144,13 +143,15 @@ export default class FlipEffect {
|
||||
|
||||
flipCenter() {
|
||||
let isSprite = this.scatter.displayObject instanceof PIXI.Sprite
|
||||
let resolution = (isSprite) ? app.renderer.resolution : 1
|
||||
let resolution = isSprite ? app.renderer.resolution : 1
|
||||
let center = this.scatter.center
|
||||
let canvas = app.renderer.view
|
||||
let domNode = this.domFlip.domScatterContainer.element
|
||||
let page = window.convertPointFromNodeToPage(canvas,
|
||||
let page = window.convertPointFromNodeToPage(
|
||||
canvas,
|
||||
center.x * resolution,
|
||||
center.y*resolution)
|
||||
center.y * resolution
|
||||
)
|
||||
let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
|
||||
return local
|
||||
}
|
||||
@ -158,18 +159,14 @@ export default class FlipEffect {
|
||||
constraintFlipCenter(center, loader) {
|
||||
let w = loader.wantedWidth
|
||||
let h = loader.wantedHeight
|
||||
console.log("constraintFlipCenter", w, h)
|
||||
console.log('constraintFlipCenter', w, h)
|
||||
let canvas = app.renderer.view
|
||||
let x = center.x
|
||||
let y = center.y
|
||||
if (x < w/2)
|
||||
x = w/2
|
||||
if (y < h/2)
|
||||
y = h/2
|
||||
if (x > canvas.width)
|
||||
x = canvas.width - w/2
|
||||
if (y > canvas.height)
|
||||
y = canvas.height - h/2
|
||||
if (x < w / 2) x = w / 2
|
||||
if (y < h / 2) y = h / 2
|
||||
if (x > canvas.width) x = canvas.width - w / 2
|
||||
if (y > canvas.height) y = canvas.height - h / 2
|
||||
return { x, y }
|
||||
}
|
||||
|
||||
@ -177,22 +174,26 @@ export default class FlipEffect {
|
||||
let iscale = 1.0 / this.scatter.scale
|
||||
this.infoBtn = new PIXI.Graphics()
|
||||
this.infoBtn.beginFill(0x333333)
|
||||
this.infoBtn.lineStyle(4, 0xFFFFFF)
|
||||
this.infoBtn.lineStyle(4, 0xffffff)
|
||||
this.infoBtn.drawCircle(0, 0, 22)
|
||||
this.infoBtn.endFill()
|
||||
|
||||
this.infoBtn.beginFill(0xFFFFFF)
|
||||
this.infoBtn.beginFill(0xffffff)
|
||||
this.infoBtn.lineStyle(0)
|
||||
this.infoBtn.drawCircle(0, -8, 4)
|
||||
this.infoBtn.endFill()
|
||||
|
||||
this.infoBtn.lineStyle(6, 0xFFFFFF)
|
||||
this.infoBtn.lineStyle(6, 0xffffff)
|
||||
this.infoBtn.moveTo(0, -2)
|
||||
this.infoBtn.lineTo(0, 14)
|
||||
this.infoBtn.endFill()
|
||||
|
||||
this.infoBtn.on('click', (e) => { this.infoSelected() })
|
||||
this.infoBtn.on('tap', (e) => { this.infoSelected() })
|
||||
this.infoBtn.on('click', e => {
|
||||
this.infoSelected()
|
||||
})
|
||||
this.infoBtn.on('tap', e => {
|
||||
this.infoSelected()
|
||||
})
|
||||
|
||||
this.infoBtn.interactive = true
|
||||
this.infoBtn.width = 44
|
||||
@ -207,8 +208,7 @@ export default class FlipEffect {
|
||||
this.infoBtn.scale.x = iscale
|
||||
this.infoBtn.scale.y = iscale
|
||||
displayObject.foreground.addChild(this.infoBtn)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
displayObject.addChild(this.infoBtn)
|
||||
}
|
||||
|
||||
@ -231,15 +231,15 @@ export default class FlipEffect {
|
||||
canvas.height = 44 * 4
|
||||
svgImage.onload = e => {
|
||||
let displayObject = this.scatter.displayObject
|
||||
canvas.getContext ('2d').drawImage(svgImage, 0, 0,
|
||||
canvas.width, canvas.height)
|
||||
canvas
|
||||
.getContext('2d')
|
||||
.drawImage(svgImage, 0, 0, canvas.width, canvas.height)
|
||||
let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas))
|
||||
this.infoBtn = new PIXI.Sprite(texure)
|
||||
this.infoBtn.anchor.set(0.5, 0.5)
|
||||
if (displayObject.foreground) {
|
||||
displayObject.foreground.addChild(this.infoBtn)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
displayObject.addChild(this.infoBtn)
|
||||
}
|
||||
this.infoBtn.scale.set(0.5, 0.5)
|
||||
@ -248,8 +248,12 @@ export default class FlipEffect {
|
||||
this.infoBtn.position = new PIXI.Point(w, h)
|
||||
this.infoBtn.interactive = true
|
||||
this.infoBtn.updateTransform()
|
||||
this.infoBtn.on('click', (e) => { this.infoSelected() })
|
||||
this.infoBtn.on('tap', (e) => { this.infoSelected() })
|
||||
this.infoBtn.on('click', e => {
|
||||
this.infoSelected()
|
||||
})
|
||||
this.infoBtn.on('tap', e => {
|
||||
this.infoSelected()
|
||||
})
|
||||
}
|
||||
svgImage.src = url
|
||||
}
|
||||
@ -275,13 +279,11 @@ export default class FlipEffect {
|
||||
let ortho = 90
|
||||
let rest = alpha % ortho
|
||||
let delta = 0.0
|
||||
if (rest > (ortho / 2.0)) {
|
||||
if (rest > ortho / 2.0) {
|
||||
delta = ortho - rest
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
delta = -rest
|
||||
}
|
||||
return delta
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
|
||||
*/
|
||||
export default class Flippable extends PIXI.projection.Camera3d {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Flippable.
|
||||
*
|
||||
@ -68,10 +67,11 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
front,
|
||||
back,
|
||||
renderer,
|
||||
@ -87,11 +87,18 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
near: 10,
|
||||
far: 10000,
|
||||
orthographic: false
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// planes
|
||||
//--------------------
|
||||
this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic)
|
||||
this.setPlanes(
|
||||
this.opts.focus,
|
||||
this.opts.near,
|
||||
this.opts.far,
|
||||
this.opts.orthographic
|
||||
)
|
||||
|
||||
// flipped
|
||||
//--------------------
|
||||
@ -113,8 +120,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
* @return {Flippable} A reference to the flippable for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
const scale = .5
|
||||
const scale = 0.5
|
||||
|
||||
// filters
|
||||
//--------------------
|
||||
@ -131,10 +137,12 @@ 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
|
||||
@ -153,7 +161,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
|
||||
front.scale.set(-1 / scale, 1 / scale)
|
||||
front.renderable = true
|
||||
front.anchor.set(.5)
|
||||
front.anchor.set(0.5)
|
||||
inner.addChild(front)
|
||||
this.objects.front = front
|
||||
|
||||
@ -162,7 +170,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
|
||||
back.scale.set(1 / scale, 1 / scale)
|
||||
back.renderable = false
|
||||
back.anchor.set(.5)
|
||||
back.anchor.set(0.5)
|
||||
inner.addChild(back)
|
||||
this.objects.back = back
|
||||
|
||||
@ -178,7 +186,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
return this._flipped
|
||||
}
|
||||
set flipped(toBack) {
|
||||
|
||||
this._flipped = toBack
|
||||
|
||||
// references
|
||||
@ -224,11 +231,21 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
|
||||
anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
|
||||
anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
|
||||
width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
|
||||
height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
|
||||
rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
|
||||
skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
|
||||
skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
|
||||
width: this.opts.useBackTransforms
|
||||
? toObject.width * 2
|
||||
: fromObject.width * 2,
|
||||
height: this.opts.useBackTransforms
|
||||
? toObject.height * 2
|
||||
: fromObject.height * 2,
|
||||
rotation: this.opts.useBackTransforms
|
||||
? toObject.rotation
|
||||
: fromObject.rotation,
|
||||
skewX: this.opts.useBackTransforms
|
||||
? toObject.skew.x
|
||||
: fromObject.skew.x,
|
||||
skewY: this.opts.useBackTransforms
|
||||
? toObject.skew.y
|
||||
: fromObject.skew.y
|
||||
}
|
||||
|
||||
// set toObject end values
|
||||
@ -305,20 +322,24 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
// camera
|
||||
//--------------------
|
||||
new TimelineMax()
|
||||
.to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease})
|
||||
.to(this.euler, half, {
|
||||
x: 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: 0.2, ease })
|
||||
}
|
||||
|
||||
/**
|
||||
@ -327,13 +348,13 @@ 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
|
||||
@ -398,13 +419,25 @@ export default class Flippable extends PIXI.projection.Camera3d {
|
||||
* @return {PIXI.Texture} The generated PIXI.Texture.
|
||||
*/
|
||||
generateTexture(displayObject) {
|
||||
|
||||
// renderTexture
|
||||
//--------------------
|
||||
const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
|
||||
const renderTexture = PIXI.RenderTexture.create(
|
||||
displayObject.width,
|
||||
displayObject.height
|
||||
)
|
||||
|
||||
// save position
|
||||
const transform = [displayObject.x, displayObject.y, displayObject.scale.x, displayObject.scale.y, displayObject.rotation, displayObject.skew.x, displayObject.skew.y, displayObject.pivot.x, displayObject.pivot.y]
|
||||
const transform = [
|
||||
displayObject.x,
|
||||
displayObject.y,
|
||||
displayObject.scale.x,
|
||||
displayObject.scale.y,
|
||||
displayObject.rotation,
|
||||
displayObject.skew.x,
|
||||
displayObject.skew.y,
|
||||
displayObject.pivot.x,
|
||||
displayObject.pivot.y
|
||||
]
|
||||
|
||||
displayObject.position.set(0, 0)
|
||||
displayObject.skew.set(0, 0)
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
|
||||
|
||||
/**
|
||||
* Defines usefull default text styles.
|
||||
*/
|
||||
export class FontInfo {
|
||||
|
||||
static get small() {
|
||||
return app.theme.textStyleSmall
|
||||
}
|
||||
@ -24,11 +21,9 @@ export class FontInfo {
|
||||
* @class Hypenate
|
||||
*/
|
||||
export class Hypenate {
|
||||
|
||||
static splitPart(part) {
|
||||
let parts = part.split('-')
|
||||
if (parts.length == 1)
|
||||
return [part]
|
||||
if (parts.length == 1) return [part]
|
||||
let result = []
|
||||
let last = parts.pop()
|
||||
for (let p of parts) {
|
||||
@ -39,7 +34,7 @@ export class Hypenate {
|
||||
}
|
||||
|
||||
static splitWord(word) {
|
||||
if (typeof (language) == 'undefined') {
|
||||
if (typeof language == 'undefined') {
|
||||
if (word.indexOf('-') > -1) {
|
||||
return word.split('-')
|
||||
}
|
||||
@ -78,17 +73,21 @@ export class Hypenate {
|
||||
if (parts.length == 1) {
|
||||
newWord += '\n' + word + ' '
|
||||
x = wordMetrics.width + space.width
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
let first = true
|
||||
let lastPart = ''
|
||||
for (let part of parts) {
|
||||
let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle)
|
||||
let partMetrics = PIXI.TextMetrics.measureText(
|
||||
part,
|
||||
pixiStyle
|
||||
)
|
||||
if (x + partMetrics.width + space.width > width) {
|
||||
newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part
|
||||
newWord +=
|
||||
(first || lastPart.endsWith('-')
|
||||
? '\n'
|
||||
: '-\n') + part
|
||||
x = partMetrics.width
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
newWord += part
|
||||
x += partMetrics.width
|
||||
}
|
||||
@ -98,8 +97,7 @@ export class Hypenate {
|
||||
x += space.width
|
||||
}
|
||||
result += newWord + ' '
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
result += word + ' '
|
||||
x += wordMetrics.width + space.width
|
||||
}
|
||||
@ -131,7 +129,6 @@ 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
|
||||
@ -139,7 +136,12 @@ class TextLabel extends PIXI.Text {
|
||||
* @param {canvas}
|
||||
* @memberof TextLabel
|
||||
*/
|
||||
constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
|
||||
constructor(
|
||||
text,
|
||||
style = null,
|
||||
canvas = null,
|
||||
{ minZoom = 0.1, maxZoom = 10 } = {}
|
||||
) {
|
||||
super(text, style, canvas)
|
||||
this.normFontSize = this.style.fontSize
|
||||
this.minZoom = minZoom
|
||||
@ -180,7 +182,6 @@ 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.
|
||||
*
|
||||
@ -195,7 +196,6 @@ 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.
|
||||
@ -213,11 +213,9 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||
* @memberof LabeledGraphics
|
||||
*/
|
||||
ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
|
||||
|
||||
if (attrs.maxWidth && attrs.maxLines == 1) {
|
||||
label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (attrs.maxWidth) {
|
||||
label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth)
|
||||
}
|
||||
@ -241,8 +239,7 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||
for (let k in attrs) {
|
||||
text[k] = attrs[k]
|
||||
}
|
||||
if (label != text.text)
|
||||
text.text = label
|
||||
if (label != text.text) text.text = label
|
||||
// We do not follow the flexbox jargon and use align for x and justify for y axis
|
||||
// This deviation is needed to ensure backward compatability
|
||||
switch (attrs.justify || null) {
|
||||
@ -293,17 +290,30 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||
const truncatedLines = lines.slice(0, maxLines)
|
||||
const lastLine = truncatedLines[truncatedLines.length - 1]
|
||||
const words = lastLine.split(' ')
|
||||
const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
|
||||
const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
|
||||
const { text: newLastLine } = wordLengths.reduce((data, wordLength, i) => {
|
||||
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
|
||||
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 })
|
||||
length: data.length + wordLength + spaceLength
|
||||
}
|
||||
},
|
||||
{ text: '', length: dotsLength }
|
||||
)
|
||||
truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`
|
||||
newText = truncatedLines.join('\n')
|
||||
}
|
||||
@ -344,7 +354,6 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||
label.destroy()
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Ensures that labels are hidden on clear.
|
||||
*
|
||||
@ -367,7 +376,6 @@ export class LabeledGraphics extends PIXI.Graphics {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const labelCache = new Map()
|
||||
|
||||
function getTexture(label, fontInfo = FontInfo.normal) {
|
||||
@ -385,7 +393,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
|
||||
}
|
||||
|
||||
class SpriteLabel extends PIXI.Sprite {
|
||||
|
||||
constructor(label, fontInfo) {
|
||||
let texture = getTexture(label, fontInfo)
|
||||
super(texture)
|
||||
@ -405,10 +412,8 @@ class SpriteLabel extends PIXI.Sprite {
|
||||
}
|
||||
|
||||
export class BitmapLabeledGraphics extends LabeledGraphics {
|
||||
|
||||
_createText(label, fontInfo) {
|
||||
let texture = getTexture(label, fontInfo)
|
||||
return new SpriteLabel(texture)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -21,7 +21,6 @@ import Events from '../events.js'
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
|
||||
*/
|
||||
export default class List extends PIXI.Container {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Flippable.
|
||||
*
|
||||
@ -43,10 +42,11 @@ export default class List extends PIXI.Container {
|
||||
* scroll your list.
|
||||
*/
|
||||
constructor(items = [], opts = {}) {
|
||||
|
||||
super()
|
||||
|
||||
this.opts = Object.assign({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
orientation: 'vertical',
|
||||
@ -55,7 +55,9 @@ export default class List extends PIXI.Container {
|
||||
width: null,
|
||||
height: null,
|
||||
app: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.__items = items
|
||||
this.__dragging = false
|
||||
@ -72,7 +74,6 @@ export default class List extends PIXI.Container {
|
||||
* @return {List} A reference to the list for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// inner container
|
||||
//--------------------
|
||||
const container = new PIXI.Container()
|
||||
@ -107,7 +108,9 @@ export default class List extends PIXI.Container {
|
||||
if (this.opts.app) {
|
||||
const app = this.opts.app
|
||||
app.view.addEventListener('mousewheel', event => {
|
||||
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
|
||||
const bounds = this.mask
|
||||
? this.mask.getBounds()
|
||||
: this.getBounds()
|
||||
const x = event.clientX - app.view.getBoundingClientRect().left
|
||||
const y = event.clientY - app.view.getBoundingClientRect().top
|
||||
if (bounds.contains(x, y)) {
|
||||
@ -143,14 +146,12 @@ export default class List extends PIXI.Container {
|
||||
* @return {List} A reference to the list for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
const margin = this.opts.margin
|
||||
|
||||
let x = margin
|
||||
let y = margin
|
||||
|
||||
for (let item of this.__items) {
|
||||
|
||||
item.x = x
|
||||
item.y = y
|
||||
|
||||
@ -166,13 +167,17 @@ export default class List extends PIXI.Container {
|
||||
if (this.opts.orientation === 'vertical') {
|
||||
switch (this.opts.align) {
|
||||
case 'center':
|
||||
this.__items.forEach(it => it.x = margin + this.width / 2 - it.width / 2)
|
||||
this.__items.forEach(
|
||||
it => (it.x = margin + this.width / 2 - it.width / 2)
|
||||
)
|
||||
break
|
||||
case 'right':
|
||||
this.__items.forEach(it => it.x = margin + this.width - it.width)
|
||||
this.__items.forEach(
|
||||
it => (it.x = margin + this.width - it.width)
|
||||
)
|
||||
break
|
||||
default:
|
||||
this.__items.forEach(it => it.x = margin)
|
||||
this.__items.forEach(it => (it.x = margin))
|
||||
break
|
||||
}
|
||||
|
||||
@ -192,13 +197,17 @@ export default class List extends PIXI.Container {
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
switch (this.opts.verticalAlign) {
|
||||
case 'top':
|
||||
this.__items.forEach(it => it.y = margin)
|
||||
this.__items.forEach(it => (it.y = margin))
|
||||
break
|
||||
case 'bottom':
|
||||
this.__items.forEach(it => it.y = margin + this.height - it.height)
|
||||
this.__items.forEach(
|
||||
it => (it.y = margin + this.height - it.height)
|
||||
)
|
||||
break
|
||||
default:
|
||||
this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2)
|
||||
this.__items.forEach(
|
||||
it => (it.y = margin + this.height / 2 - it.height / 2)
|
||||
)
|
||||
break
|
||||
}
|
||||
|
||||
@ -220,10 +229,9 @@ 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
|
||||
|
||||
@ -234,10 +242,9 @@ 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
|
||||
|
||||
@ -250,7 +257,6 @@ export default class List extends PIXI.Container {
|
||||
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
|
||||
*/
|
||||
resize(widthOrHeight) {
|
||||
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
this.opts.width = widthOrHeight
|
||||
} else {
|
||||
@ -266,7 +272,6 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onStart(event) {
|
||||
|
||||
this.__dragging = true
|
||||
|
||||
this.capture(event)
|
||||
@ -277,7 +282,7 @@ export default class List extends PIXI.Container {
|
||||
}
|
||||
|
||||
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
|
||||
if (typeof ThrowPropsPlugin != "undefined") {
|
||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
||||
ThrowPropsPlugin.track(this.container.position, 'x,y')
|
||||
}
|
||||
}
|
||||
@ -288,9 +293,7 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onMove(event) {
|
||||
|
||||
if (this.__dragging) {
|
||||
|
||||
this.capture(event)
|
||||
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
@ -307,7 +310,6 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onEnd(event) {
|
||||
|
||||
if (this.__dragging) {
|
||||
this.__dragging = false
|
||||
|
||||
@ -333,12 +335,18 @@ export default class List extends PIXI.Container {
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof ThrowPropsPlugin != "undefined") {
|
||||
ThrowPropsPlugin.to(this.container.position, {
|
||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
||||
ThrowPropsPlugin.to(
|
||||
this.container.position,
|
||||
{
|
||||
throwProps,
|
||||
ease: Strong.easeOut,
|
||||
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
|
||||
}, .8, .4)
|
||||
onComplete: () =>
|
||||
ThrowPropsPlugin.untrack(this.container.position)
|
||||
},
|
||||
0.8,
|
||||
0.4
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -349,21 +357,26 @@ export default class List extends PIXI.Container {
|
||||
* @param {*} event
|
||||
*/
|
||||
onScroll(event) {
|
||||
|
||||
this.capture(event)
|
||||
|
||||
if (this.opts.orientation === 'horizontal') {
|
||||
this.container.position.x -= event.deltaX
|
||||
if (this.container.position.x > 0) {
|
||||
this.container.position.x = 0
|
||||
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
|
||||
} else if (
|
||||
this.container.position.x + this.innerWidth <
|
||||
this.opts.width
|
||||
) {
|
||||
this.container.position.x = this.opts.width - this.innerWidth
|
||||
}
|
||||
} else {
|
||||
this.container.position.y -= event.deltaY
|
||||
if (this.container.position.y > 0) {
|
||||
this.container.position.y = 0
|
||||
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
|
||||
} else if (
|
||||
this.container.position.y + this.innerHeight <
|
||||
this.opts.height
|
||||
) {
|
||||
this.container.position.y = this.opts.height - this.innerHeight
|
||||
}
|
||||
}
|
||||
@ -375,7 +388,10 @@ export default class List extends PIXI.Container {
|
||||
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
|
||||
*/
|
||||
capture(event) {
|
||||
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
|
||||
const originalEvent =
|
||||
event.data && event.data.originalEvent
|
||||
? event.data.originalEvent
|
||||
: event
|
||||
Events.capturedBy(originalEvent, this)
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +33,6 @@ 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.
|
||||
*
|
||||
@ -53,10 +52,11 @@ 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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
app: window.app,
|
||||
closeButton: false,
|
||||
minWidth: 280,
|
||||
@ -67,7 +67,9 @@ export default class Message extends InteractivePopup {
|
||||
duration: 5,
|
||||
autoClose: true,
|
||||
closeDuration: theme.fast
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
}
|
||||
@ -78,7 +80,6 @@ export default class Message extends InteractivePopup {
|
||||
* @return {Message} Returns the message box for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
super.layout()
|
||||
|
||||
// horizontal
|
||||
@ -87,10 +88,11 @@ export default class Message extends InteractivePopup {
|
||||
this.x = this.opts.margin
|
||||
break
|
||||
case 'center':
|
||||
this.x = (this.opts.app.size.width / 2) - (this.width / 2)
|
||||
this.x = this.opts.app.size.width / 2 - this.width / 2
|
||||
break
|
||||
case 'right':
|
||||
this.x = this.opts.app.size.width - this.opts.margin - this.width
|
||||
this.x =
|
||||
this.opts.app.size.width - this.opts.margin - this.width
|
||||
break
|
||||
}
|
||||
|
||||
@ -100,10 +102,11 @@ 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
|
||||
}
|
||||
}
|
||||
@ -114,7 +117,6 @@ export default class Message extends InteractivePopup {
|
||||
* @private
|
||||
*/
|
||||
show() {
|
||||
|
||||
super.show()
|
||||
|
||||
if (this.opts.autoClose) {
|
||||
|
||||
@ -28,7 +28,6 @@ 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.
|
||||
*
|
||||
@ -43,20 +42,23 @@ export default class Modal extends PIXI.Container {
|
||||
* @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
super()
|
||||
|
||||
const theme = Theme.fromString(opts.theme)
|
||||
this.theme = theme
|
||||
|
||||
this.opts = Object.assign({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
app: window.app,
|
||||
backgroundFill: theme.background,
|
||||
backgroundFillAlpha: .6,
|
||||
backgroundFillAlpha: 0.6,
|
||||
closeOnBackground: true,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -82,7 +84,6 @@ export default class Modal extends PIXI.Container {
|
||||
* @return {Modal} A reference to the modal for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// interaction
|
||||
//-----------------
|
||||
this.interactive = true
|
||||
@ -127,14 +128,16 @@ export default class Modal extends PIXI.Container {
|
||||
* @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()
|
||||
|
||||
@ -151,7 +154,10 @@ export default class Modal extends PIXI.Container {
|
||||
* @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
|
||||
}
|
||||
@ -162,7 +168,10 @@ export default class Modal extends PIXI.Container {
|
||||
* @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
|
||||
}
|
||||
|
||||
@ -2,11 +2,28 @@
|
||||
*
|
||||
*/
|
||||
export default class Popover extends PIXI.Graphics {
|
||||
|
||||
constructor({title = null, text = null, x = 0, y = 0, placement = 'top', width = 250, titleStyle = {}, textStyle = {fontSize: '1.6em'}} = {}) {
|
||||
constructor({
|
||||
title = null,
|
||||
text = null,
|
||||
x = 0,
|
||||
y = 0,
|
||||
placement = 'top',
|
||||
width = 250,
|
||||
titleStyle = {},
|
||||
textStyle = { fontSize: '1.6em' }
|
||||
} = {}) {
|
||||
super()
|
||||
|
||||
this.opts = {title, text, x, y, placement, width, titleStyle, textStyle}
|
||||
this.opts = {
|
||||
title,
|
||||
text,
|
||||
x,
|
||||
y,
|
||||
placement,
|
||||
width,
|
||||
titleStyle,
|
||||
textStyle
|
||||
}
|
||||
|
||||
this.padding = 12
|
||||
|
||||
@ -16,11 +33,15 @@ export default class Popover extends PIXI.Graphics {
|
||||
stroke: '#f6f6f6',
|
||||
strokeThickness: 3,
|
||||
wordWrap: true,
|
||||
wordWrapWidth: width - (this.padding * 2)
|
||||
wordWrapWidth: width - this.padding * 2
|
||||
}
|
||||
|
||||
this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle))
|
||||
this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle))
|
||||
this.titleTextStyle = new PIXI.TextStyle(
|
||||
Object.assign({}, style, titleStyle)
|
||||
)
|
||||
this.textTextStyle = new PIXI.TextStyle(
|
||||
Object.assign({}, style, textStyle)
|
||||
)
|
||||
|
||||
if (title || text) {
|
||||
this.setup()
|
||||
@ -43,7 +64,10 @@ export default class Popover extends PIXI.Graphics {
|
||||
|
||||
if (this.opts.text) {
|
||||
this.textText = new PIXI.Text(this.opts.text, this.textTextStyle)
|
||||
this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding)
|
||||
this.textText.position.set(
|
||||
this.padding,
|
||||
this.titleY + this.titleHeight + this.padding
|
||||
)
|
||||
this.addChild(this.textText)
|
||||
}
|
||||
|
||||
@ -58,7 +82,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
draw() {
|
||||
this.clear()
|
||||
this.beginFill(0xffffff, 1)
|
||||
this.lineStyle(1, 0x282828, .5)
|
||||
this.lineStyle(1, 0x282828, 0.5)
|
||||
|
||||
// Draw rounded rectangle
|
||||
const height = this.height + this.padding
|
||||
@ -72,7 +96,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
this.lineStyle(0)
|
||||
this.beginFill(0xf7f7f7, 1)
|
||||
let x = 1
|
||||
let y = this.titleText.x + this.titleText.height + (this.padding / 2)
|
||||
let y = this.titleText.x + this.titleText.height + this.padding / 2
|
||||
this.moveTo(x, y)
|
||||
y = 9
|
||||
this.lineTo(x, y)
|
||||
@ -82,7 +106,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
this.lineTo(x, y)
|
||||
this.quadraticCurveTo(x + 5, y, x + 5, y + 8)
|
||||
x += 5
|
||||
y += this.titleText.x + this.titleText.height + (this.padding / 2)
|
||||
y += this.titleText.x + this.titleText.height + this.padding / 2
|
||||
this.lineTo(x, y)
|
||||
if (this.opts.text) {
|
||||
x = 1
|
||||
@ -100,7 +124,6 @@ export default class Popover extends PIXI.Graphics {
|
||||
}
|
||||
|
||||
drawAnchor(placement) {
|
||||
|
||||
let x = 0
|
||||
let y = 0
|
||||
|
||||
@ -109,7 +132,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
if (this.opts.title) {
|
||||
this.beginFill(0xf7f7f7, 1)
|
||||
}
|
||||
x = (this.width / 2) - 10
|
||||
x = this.width / 2 - 10
|
||||
y = 1
|
||||
this.moveTo(x, y)
|
||||
x += 10
|
||||
@ -121,7 +144,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
break
|
||||
case 'right':
|
||||
x = 1
|
||||
y = (this.height / 2) - 10
|
||||
y = this.height / 2 - 10
|
||||
if (this.titleY + this.titleHeight > y) {
|
||||
this.beginFill(0xf7f7f7, 1)
|
||||
}
|
||||
@ -135,7 +158,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
break
|
||||
case 'left':
|
||||
x = this.width - 2
|
||||
y = (this.height / 2) - 10
|
||||
y = this.height / 2 - 10
|
||||
if (this.titleY + this.titleHeight > y) {
|
||||
this.beginFill(0xf7f7f7, 1)
|
||||
}
|
||||
@ -148,7 +171,7 @@ export default class Popover extends PIXI.Graphics {
|
||||
this.lineTo(x, y)
|
||||
break
|
||||
default:
|
||||
x = (this.width / 2) - 10
|
||||
x = this.width / 2 - 10
|
||||
y = this.height - 2
|
||||
this.moveTo(x, y)
|
||||
x += 10
|
||||
@ -162,22 +185,21 @@ export default class Popover extends PIXI.Graphics {
|
||||
}
|
||||
|
||||
positioning() {
|
||||
|
||||
const x = this.opts.x
|
||||
const y = this.opts.y
|
||||
|
||||
switch (this.opts.placement) {
|
||||
case 'bottom':
|
||||
this.position.set(x - (this.width / 2), y + 10)
|
||||
this.position.set(x - this.width / 2, y + 10)
|
||||
break
|
||||
case 'right':
|
||||
this.position.set(x, y - (this.height / 2))
|
||||
this.position.set(x, y - this.height / 2)
|
||||
break
|
||||
case 'left':
|
||||
this.position.set(x - this.width, y - (this.height / 2))
|
||||
this.position.set(x - this.width, y - this.height / 2)
|
||||
break
|
||||
default:
|
||||
this.position.set(x - (this.width / 2), y - this.height)
|
||||
this.position.set(x - this.width / 2, y - this.height)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ import ButtonGroup from './buttongroup.js'
|
||||
* @extends AbstractPopup
|
||||
*/
|
||||
export class InteractivePopup extends AbstractPopup {
|
||||
|
||||
/**
|
||||
* Creates an instance of an InteractivePopup (only for internal use).
|
||||
*
|
||||
@ -24,13 +23,16 @@ export class InteractivePopup extends AbstractPopup {
|
||||
* @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
closeOnPopup: false,
|
||||
closeButton: true,
|
||||
button: null,
|
||||
buttonGroup: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
|
||||
@ -56,7 +58,6 @@ export class InteractivePopup extends AbstractPopup {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
super.setup()
|
||||
|
||||
// interaction
|
||||
@ -72,7 +73,10 @@ export class InteractivePopup extends AbstractPopup {
|
||||
// closeButton
|
||||
//-----------------
|
||||
if (this.opts.closeButton) {
|
||||
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
|
||||
let closeButton = PIXI.Sprite.fromImage(
|
||||
'../../assets/icons/close.png',
|
||||
true
|
||||
)
|
||||
closeButton.width = this.headerStyle.fontSize
|
||||
closeButton.height = closeButton.width
|
||||
closeButton.tint = this.theme.color2
|
||||
@ -95,7 +99,11 @@ export class InteractivePopup extends AbstractPopup {
|
||||
// maxWidth is set and a closeButton should be displayed
|
||||
//-----------------
|
||||
if (this.opts.maxWidth) {
|
||||
const wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) - this.smallPadding - this._closeButton.width
|
||||
const wordWrapWidth =
|
||||
this.opts.maxWidth -
|
||||
2 * this.opts.padding -
|
||||
this.smallPadding -
|
||||
this._closeButton.width
|
||||
if (this._header) {
|
||||
this.headerStyle.wordWrapWidth = wordWrapWidth
|
||||
} else if (this._content) {
|
||||
@ -108,9 +116,19 @@ export class InteractivePopup extends AbstractPopup {
|
||||
//-----------------
|
||||
if (this.opts.button || this.opts.buttonGroup) {
|
||||
if (this.opts.button) {
|
||||
this._buttons = new Button(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.button))
|
||||
this._buttons = new Button(
|
||||
Object.assign(
|
||||
{ textStyle: this.theme.textStyleSmall },
|
||||
this.opts.button
|
||||
)
|
||||
)
|
||||
} else {
|
||||
this._buttons = new ButtonGroup(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.buttonGroup))
|
||||
this._buttons = new ButtonGroup(
|
||||
Object.assign(
|
||||
{ textStyle: this.theme.textStyleSmall },
|
||||
this.opts.buttonGroup
|
||||
)
|
||||
)
|
||||
}
|
||||
this.addChild(this._buttons)
|
||||
|
||||
@ -126,21 +144,23 @@ export class InteractivePopup extends AbstractPopup {
|
||||
* @return {AbstractPopup} A reference to the popup for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
super.layout()
|
||||
|
||||
// closeButton
|
||||
//-----------------
|
||||
if (this.opts.closeButton) {
|
||||
this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width
|
||||
this._closeButton.x =
|
||||
this.wantedWidth - this.smallPadding - this._closeButton.width
|
||||
this._closeButton.y = this.smallPadding
|
||||
}
|
||||
|
||||
// buttons
|
||||
//-----------------
|
||||
if (this._buttons) {
|
||||
this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width
|
||||
this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height
|
||||
this._buttons.x =
|
||||
this.wantedWidth - this.opts.padding - this._buttons.width
|
||||
this._buttons.y =
|
||||
this.wantedHeight - this.opts.padding - this._buttons.height
|
||||
}
|
||||
|
||||
return this
|
||||
@ -156,7 +176,6 @@ export class InteractivePopup extends AbstractPopup {
|
||||
* @returns {object} An JavaScript object width the keys width and height.
|
||||
*/
|
||||
getInnerSize() {
|
||||
|
||||
let size = super.getInnerSize()
|
||||
|
||||
if (this._closeButton) {
|
||||
@ -164,7 +183,10 @@ export class InteractivePopup extends AbstractPopup {
|
||||
}
|
||||
|
||||
if (this._buttons) {
|
||||
size.width = Math.max(size.width, this._buttons.x + this._buttons.width)
|
||||
size.width = Math.max(
|
||||
size.width,
|
||||
this._buttons.x + this._buttons.width
|
||||
)
|
||||
size.height += this.innerPadding + this._buttons.height
|
||||
}
|
||||
|
||||
@ -190,7 +212,6 @@ export class InteractivePopup extends AbstractPopup {
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
|
||||
*/
|
||||
export default class Popup extends InteractivePopup {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Popup.
|
||||
*
|
||||
@ -201,12 +222,15 @@ export default class Popup extends InteractivePopup {
|
||||
* @param {number} [opts.minHeight=0] - The minimum height of the popup.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
closeButton: false,
|
||||
minWidth: 0,
|
||||
minHeight: 0
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
}
|
||||
|
||||
@ -28,7 +28,6 @@ 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.
|
||||
*
|
||||
@ -43,15 +42,18 @@ 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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
items: [],
|
||||
margin: theme.margin / 2,
|
||||
textStyle: theme.textStyle,
|
||||
closeOnPopup: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
super(opts)
|
||||
}
|
||||
@ -63,18 +65,19 @@ export default class PopupMenu extends Popup {
|
||||
* @return {PopupMenu} A reference to the popupmenu for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// content
|
||||
//-----------------
|
||||
const content = new PIXI.Container()
|
||||
|
||||
let y = 0
|
||||
for (let item of this.opts.items) {
|
||||
|
||||
let object = null
|
||||
|
||||
if (item.label) {
|
||||
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle)
|
||||
object = new PIXI.Text(
|
||||
item.label,
|
||||
item.textStyle || this.opts.textStyle
|
||||
)
|
||||
} else {
|
||||
object = item.content
|
||||
}
|
||||
@ -83,16 +86,22 @@ export default class PopupMenu extends Popup {
|
||||
|
||||
if (item.action) {
|
||||
if (item.disabled) {
|
||||
object.alpha = .5
|
||||
object.alpha = 0.5
|
||||
} else {
|
||||
object.interactive = true
|
||||
object.buttonMode = true
|
||||
}
|
||||
object.on('pointerover', e => {
|
||||
TweenLite.to(object, this.theme.fast, {alpha: .83, overwrite: 'none'})
|
||||
TweenLite.to(object, this.theme.fast, {
|
||||
alpha: 0.83,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
object.on('pointerout', e => {
|
||||
TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'})
|
||||
TweenLite.to(object, this.theme.fast, {
|
||||
alpha: 1,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
object.on('pointerup', e => {
|
||||
item.action.call(object, e, object)
|
||||
|
||||
@ -18,7 +18,6 @@ import Theme from './theme.js'
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
|
||||
*/
|
||||
export default class Progress extends PIXI.Container {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Progress.
|
||||
*
|
||||
@ -53,13 +52,14 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
app: window.app,
|
||||
width: null,
|
||||
@ -82,7 +82,9 @@ export default class Progress extends PIXI.Container {
|
||||
radius: theme.radius,
|
||||
destroyOnComplete: true,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -112,7 +114,6 @@ export default class Progress extends PIXI.Container {
|
||||
* @return {Progress} A reference to the progress for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// interaction
|
||||
//-----------------
|
||||
this.on('added', e => {
|
||||
@ -146,7 +147,6 @@ export default class Progress extends PIXI.Container {
|
||||
* @return {Progress} A reference to the progress for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
const width = this.opts.app.size.width
|
||||
const height = this.opts.app.size.height
|
||||
|
||||
@ -154,7 +154,10 @@ export default class Progress extends PIXI.Container {
|
||||
//-----------------
|
||||
if (this.opts.background) {
|
||||
this.background.clear()
|
||||
this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha)
|
||||
this.background.beginFill(
|
||||
this.opts.backgroundFill,
|
||||
this.opts.backgroundFillAlpha
|
||||
)
|
||||
this.background.drawRect(0, 0, width, height)
|
||||
this.background.endFill()
|
||||
}
|
||||
@ -171,7 +174,6 @@ export default class Progress extends PIXI.Container {
|
||||
* @return {Progress} A reference to the progress for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
this.bar.clear()
|
||||
this.barActive.clear()
|
||||
|
||||
@ -188,22 +190,31 @@ export default class Progress extends PIXI.Container {
|
||||
* @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)
|
||||
}
|
||||
@ -222,17 +233,29 @@ export default class Progress extends PIXI.Container {
|
||||
* @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)
|
||||
}
|
||||
@ -262,7 +285,10 @@ export default class Progress extends PIXI.Container {
|
||||
* @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
|
||||
}
|
||||
@ -276,7 +302,6 @@ export default class Progress extends PIXI.Container {
|
||||
return this._progress
|
||||
}
|
||||
set progress(value) {
|
||||
|
||||
value = Math.round(value)
|
||||
|
||||
if (value < 0) {
|
||||
|
||||
@ -9,7 +9,6 @@ import { InteractionMapper } from '../interaction.js'
|
||||
* on the same level.
|
||||
*/
|
||||
export class ScatterContainer extends PIXI.Graphics {
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {PIXI.Renderer} renderer - PIXI renderer, needed for hit testing
|
||||
@ -23,7 +22,9 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
* @param {PIXIApp} app - Needed if showBounds is true to register
|
||||
* update handler.
|
||||
*/
|
||||
constructor(renderer, {
|
||||
constructor(
|
||||
renderer,
|
||||
{
|
||||
stopEvents = true,
|
||||
claimEvents = true,
|
||||
container = null,
|
||||
@ -32,7 +33,8 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
showTouches = false,
|
||||
backgroundColor = null,
|
||||
app = window.app
|
||||
} = {}) {
|
||||
} = {}
|
||||
) {
|
||||
super()
|
||||
this.container = container
|
||||
if (this.container)
|
||||
@ -53,7 +55,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
this.backgroundColor = backgroundColor
|
||||
if (showBounds || showTouches || showPolygon) {
|
||||
//console.log("Show TOUCHES!!!")
|
||||
this.app.ticker.add((delta) => this.update(delta), this)
|
||||
this.app.ticker.add(delta => this.update(delta), this)
|
||||
}
|
||||
if (backgroundColor) {
|
||||
this.updateBackground()
|
||||
@ -77,8 +79,12 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
let y = 0
|
||||
// @container: We need to call the constant values, as the container
|
||||
// gets resized, when a child moves outside the original boundaries.
|
||||
let w = (this.container) ? this.containerDimensions.x : (this.backgroundWidth || this.app.width)
|
||||
let h = (this.container) ? this.containerDimensions.y : (this.backgroundHeight || this.app.height)
|
||||
let w = this.container
|
||||
? this.containerDimensions.x
|
||||
: this.backgroundWidth || this.app.width
|
||||
let h = this.container
|
||||
? this.containerDimensions.y
|
||||
: this.backgroundHeight || this.app.height
|
||||
|
||||
if (this.app.fullscreen && this.app.monkeyPatchMapping) {
|
||||
let fixed = this.mapPositionToPoint({ x: w, y: 0 })
|
||||
@ -113,7 +119,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
|
||||
update(dt) {
|
||||
this.clear()
|
||||
this.lineStyle(1, 0x0000FF)
|
||||
this.lineStyle(1, 0x0000ff)
|
||||
if (this.showBounds) {
|
||||
for (let child of this.children) {
|
||||
if (child.scatter) {
|
||||
@ -125,11 +131,11 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
this.drawCircle(child.scatter.x, child.scatter.y, 4)
|
||||
}
|
||||
}
|
||||
this.lineStyle(2, 0x0000FF)
|
||||
this.lineStyle(2, 0x0000ff)
|
||||
this.drawShape(this.bounds)
|
||||
}
|
||||
if (this.showPolygon) {
|
||||
this.lineStyle(2, 0xFF0000)
|
||||
this.lineStyle(2, 0xff0000)
|
||||
for (let child of this.children) {
|
||||
if (child.scatter) {
|
||||
let polygon = child.scatter.polygon
|
||||
@ -149,8 +155,7 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
}
|
||||
|
||||
capture(event) {
|
||||
if (this.stopEvents)
|
||||
Events.stop(event)
|
||||
if (this.stopEvents) Events.stop(event)
|
||||
return true
|
||||
}
|
||||
|
||||
@ -162,8 +167,14 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
// if (hit) {
|
||||
// console.log("findHitScatter", displayObject)
|
||||
// }
|
||||
if (hit && this.hitScatter === null && typeof (displayObject) != undefined) {
|
||||
this.hitScatter = (displayObject.scatter) ? displayObject.scatter : null
|
||||
if (
|
||||
hit &&
|
||||
this.hitScatter === null &&
|
||||
typeof displayObject != undefined
|
||||
) {
|
||||
this.hitScatter = displayObject.scatter
|
||||
? displayObject.scatter
|
||||
: null
|
||||
}
|
||||
}
|
||||
|
||||
@ -173,7 +184,10 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
let local = new PIXI.Point()
|
||||
let interactionManager = this.renderer.plugins.interaction
|
||||
interactionManager.mapPositionToPoint(local, point.x, point.y)
|
||||
if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) {
|
||||
if (
|
||||
element instanceof DisplayObjectScatter &&
|
||||
element.displayObject.parent != null
|
||||
) {
|
||||
return element.displayObject.parent.toLocal(local)
|
||||
}
|
||||
return local
|
||||
@ -190,11 +204,13 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
this.hitScatter = null
|
||||
let interactionManager = this.renderer.plugins.interaction
|
||||
let fakeEvent = this.fakeInteractionEvent(local)
|
||||
interactionManager.processInteractive(fakeEvent,
|
||||
interactionManager.processInteractive(
|
||||
fakeEvent,
|
||||
this,
|
||||
this.findHitScatter.bind(this), true)
|
||||
if (this.claimEvents)
|
||||
event.claimedByScatter = this.hitScatter
|
||||
this.findHitScatter.bind(this),
|
||||
true
|
||||
)
|
||||
if (this.claimEvents) event.claimedByScatter = this.hitScatter
|
||||
return this.hitScatter
|
||||
}
|
||||
|
||||
@ -209,19 +225,13 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
let displayObject = interactionManager.hitTest(local, this)
|
||||
if (displayObject != null && displayObject.scatter != null)
|
||||
this.hitScatter = displayObject.scatter
|
||||
if (this.claimEvents)
|
||||
event.claimedByScatter = this.hitScatter
|
||||
if (this.claimEvents) event.claimedByScatter = this.hitScatter
|
||||
return this.hitScatter
|
||||
}
|
||||
|
||||
onStart(event, interaction) {}
|
||||
|
||||
onStart(event, interaction) {
|
||||
|
||||
}
|
||||
|
||||
onMove(event, interaction) {
|
||||
|
||||
}
|
||||
onMove(event, interaction) {}
|
||||
|
||||
onEnd(event, interaction) {
|
||||
for (let key of interaction.ended.keys()) {
|
||||
@ -253,7 +263,6 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
if (this.backgroundColor) {
|
||||
this.updateBackground()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -262,14 +271,20 @@ export class ScatterContainer extends PIXI.Graphics {
|
||||
* PIXI.DisplayObject can be wrapped.
|
||||
*/
|
||||
export class DisplayObjectScatter extends AbstractScatter {
|
||||
|
||||
constructor(displayObject, renderer,
|
||||
{ x = null, y = null,
|
||||
constructor(
|
||||
displayObject,
|
||||
renderer,
|
||||
{
|
||||
x = null,
|
||||
y = null,
|
||||
minScale = 0.1,
|
||||
maxScale = 1.0,
|
||||
startScale = 1.0,
|
||||
autoBringToFront = true,
|
||||
translatable = true, scalable = true, rotatable = true, resizable = false,
|
||||
translatable = true,
|
||||
scalable = true,
|
||||
rotatable = true,
|
||||
resizable = false,
|
||||
movableX = true,
|
||||
movableY = true,
|
||||
throwVisibility = 44,
|
||||
@ -279,19 +294,29 @@ export class DisplayObjectScatter extends AbstractScatter {
|
||||
rotation = null,
|
||||
overdoScaling = 1.5,
|
||||
onTransform = null,
|
||||
onThrowFinished = null } = {}) {
|
||||
onThrowFinished = null
|
||||
} = {}
|
||||
) {
|
||||
// For the simulation of named parameters,
|
||||
// see: http://exploringjs.com/es6/ch_parameter-handling.html
|
||||
super({
|
||||
overdoScaling,
|
||||
minScale, maxScale,
|
||||
minScale,
|
||||
maxScale,
|
||||
startScale,
|
||||
autoBringToFront,
|
||||
translatable, scalable, rotatable, resizable,
|
||||
movableX, movableY, throwVisibility, throwDamping,
|
||||
translatable,
|
||||
scalable,
|
||||
rotatable,
|
||||
resizable,
|
||||
movableX,
|
||||
movableY,
|
||||
throwVisibility,
|
||||
throwDamping,
|
||||
autoThrow,
|
||||
onThrowFinished,
|
||||
rotationDegrees, rotation,
|
||||
rotationDegrees,
|
||||
rotation,
|
||||
onTransform
|
||||
})
|
||||
this.displayObject = displayObject
|
||||
@ -458,7 +483,10 @@ export class DisplayObjectScatter extends AbstractScatter {
|
||||
if (this.displayObject.parent instanceof ScatterContainer) {
|
||||
let scatterContainer = this.displayObject.parent
|
||||
scatterContainer.bringToFront(this.displayObject)
|
||||
} else if (this.displayObject.parent != null && this.displayObject.parent.scatter) {
|
||||
} else if (
|
||||
this.displayObject.parent != null &&
|
||||
this.displayObject.parent.scatter
|
||||
) {
|
||||
this.displayObject.parent.scatter.toFront(this.displayObject)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
/**
|
||||
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
|
||||
*/
|
||||
@ -26,10 +24,11 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
|
||||
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
|
||||
*/
|
||||
constructor(options)
|
||||
{
|
||||
constructor(options) {
|
||||
super()
|
||||
this.options = Object.assign({}, {
|
||||
this.options = Object.assign(
|
||||
{},
|
||||
{
|
||||
boxWidth: 100,
|
||||
boxHeight: 100,
|
||||
scrollbarSize: 10,
|
||||
@ -45,7 +44,9 @@ export default class Scrollbox extends PIXI.Container {
|
||||
fadeScrollbar: false,
|
||||
fadeWait: 3000,
|
||||
fadeEase: 'easeInOutSine'
|
||||
}, options)
|
||||
},
|
||||
options
|
||||
)
|
||||
this.ease = new PIXI.extras.Ease.list()
|
||||
|
||||
this.on('added', event => {
|
||||
@ -57,10 +58,15 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
|
||||
* @type {PIXI.extras.Viewport}
|
||||
*/
|
||||
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
|
||||
this.content
|
||||
.decelerate()
|
||||
.on('moved', () => this._drawScrollbars())
|
||||
this.content = this.addChild(
|
||||
new PIXI.extras.Viewport({
|
||||
passiveWheel: this.options.stopPropagation,
|
||||
stopPropagation: this.options.stopPropagation,
|
||||
screenWidth: this.options.boxWidth,
|
||||
screenHeight: this.options.boxHeight
|
||||
})
|
||||
)
|
||||
this.content.decelerate().on('moved', () => this._drawScrollbars())
|
||||
|
||||
/**
|
||||
* graphics element for drawing the scrollbars
|
||||
@ -82,12 +88,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* offset of horizontal scrollbar (in pixels)
|
||||
* @type {number}
|
||||
*/
|
||||
get scrollbarOffsetHorizontal()
|
||||
{
|
||||
get scrollbarOffsetHorizontal() {
|
||||
return this.options.scrollbarOffsetHorizontal
|
||||
}
|
||||
set scrollbarOffsetHorizontal(value)
|
||||
{
|
||||
set scrollbarOffsetHorizontal(value) {
|
||||
this.options.scrollbarOffsetHorizontal = value
|
||||
}
|
||||
|
||||
@ -95,12 +99,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* offset of vertical scrollbar (in pixels)
|
||||
* @type {number}
|
||||
*/
|
||||
get scrollbarOffsetVertical()
|
||||
{
|
||||
get scrollbarOffsetVertical() {
|
||||
return this.options.scrollbarOffsetVertical
|
||||
}
|
||||
set scrollbarOffsetVertical(value)
|
||||
{
|
||||
set scrollbarOffsetVertical(value) {
|
||||
this.options.scrollbarOffsetVertical = value
|
||||
}
|
||||
|
||||
@ -108,14 +110,11 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* disable the scrollbox (if set to true this will also remove the mask)
|
||||
* @type {boolean}
|
||||
*/
|
||||
get disable()
|
||||
{
|
||||
get disable() {
|
||||
return this._disabled
|
||||
}
|
||||
set disable(value)
|
||||
{
|
||||
if (this._disabled !== value)
|
||||
{
|
||||
set disable(value) {
|
||||
if (this._disabled !== value) {
|
||||
this._disabled = value
|
||||
this.update()
|
||||
}
|
||||
@ -125,12 +124,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* call stopPropagation on any events that impact scrollbox
|
||||
* @type {boolean}
|
||||
*/
|
||||
get stopPropagation()
|
||||
{
|
||||
get stopPropagation() {
|
||||
return this.options.stopPropagation
|
||||
}
|
||||
set stopPropagation(value)
|
||||
{
|
||||
set stopPropagation(value) {
|
||||
this.options.stopPropagation = value
|
||||
}
|
||||
|
||||
@ -138,19 +135,14 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* user may drag the content area to scroll content
|
||||
* @type {boolean}
|
||||
*/
|
||||
get dragScroll()
|
||||
{
|
||||
get dragScroll() {
|
||||
return this.options.dragScroll
|
||||
}
|
||||
set dragScroll(value)
|
||||
{
|
||||
set dragScroll(value) {
|
||||
this.options.dragScroll = value
|
||||
if (value)
|
||||
{
|
||||
if (value) {
|
||||
this.content.drag()
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
this.content.removePlugin('drag')
|
||||
}
|
||||
this.update()
|
||||
@ -160,12 +152,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
|
||||
* @type {number}
|
||||
*/
|
||||
get boxWidth()
|
||||
{
|
||||
get boxWidth() {
|
||||
return this.options.boxWidth
|
||||
}
|
||||
set boxWidth(value)
|
||||
{
|
||||
set boxWidth(value) {
|
||||
this.options.boxWidth = value
|
||||
this.content.screenWidth = value
|
||||
this.update()
|
||||
@ -178,12 +168,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* auto = if content is larger than box size, then show scrollbar
|
||||
* @type {string}
|
||||
*/
|
||||
get overflow()
|
||||
{
|
||||
get overflow() {
|
||||
return this.options.overflow
|
||||
}
|
||||
set overflow(value)
|
||||
{
|
||||
set overflow(value) {
|
||||
this.options.overflow = value
|
||||
this.options.overflowX = value
|
||||
this.options.overflowY = value
|
||||
@ -197,12 +185,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* auto = if content is larger than box size, then show scrollbar
|
||||
* @type {string}
|
||||
*/
|
||||
get overflowX()
|
||||
{
|
||||
get overflowX() {
|
||||
return this.options.overflowX
|
||||
}
|
||||
set overflowX(value)
|
||||
{
|
||||
set overflowX(value) {
|
||||
this.options.overflowX = value
|
||||
this.update()
|
||||
}
|
||||
@ -214,12 +200,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* auto = if content is larger than box size, then show scrollbar
|
||||
* @type {string}
|
||||
*/
|
||||
get overflowY()
|
||||
{
|
||||
get overflowY() {
|
||||
return this.options.overflowY
|
||||
}
|
||||
set overflowY(value)
|
||||
{
|
||||
set overflowY(value) {
|
||||
this.options.overflowY = value
|
||||
this.update()
|
||||
}
|
||||
@ -228,12 +212,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
|
||||
* @type {number}
|
||||
*/
|
||||
get boxHeight()
|
||||
{
|
||||
get boxHeight() {
|
||||
return this.options.boxHeight
|
||||
}
|
||||
set boxHeight(value)
|
||||
{
|
||||
set boxHeight(value) {
|
||||
this.options.boxHeight = value
|
||||
this.content.screenHeight = value
|
||||
this.update()
|
||||
@ -243,12 +225,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* scrollbar size in pixels
|
||||
* @type {number}
|
||||
*/
|
||||
get scrollbarSize()
|
||||
{
|
||||
get scrollbarSize() {
|
||||
return this.options.scrollbarSize
|
||||
}
|
||||
set scrollbarSize(value)
|
||||
{
|
||||
set scrollbarSize(value) {
|
||||
this.options.scrollbarSize = value
|
||||
}
|
||||
|
||||
@ -257,9 +237,11 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
get contentWidth()
|
||||
{
|
||||
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
get contentWidth() {
|
||||
return (
|
||||
this.options.boxWidth -
|
||||
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -267,9 +249,11 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @type {number}
|
||||
* @readonly
|
||||
*/
|
||||
get contentHeight()
|
||||
{
|
||||
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
get contentHeight() {
|
||||
return (
|
||||
this.options.boxHeight -
|
||||
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -277,8 +261,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @type {boolean}
|
||||
* @readonly
|
||||
*/
|
||||
get isScrollbarVertical()
|
||||
{
|
||||
get isScrollbarVertical() {
|
||||
return this._isScrollbarVertical
|
||||
}
|
||||
|
||||
@ -287,24 +270,21 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @type {boolean}
|
||||
* @readonly
|
||||
*/
|
||||
get isScrollbarHorizontal()
|
||||
{
|
||||
get isScrollbarHorizontal() {
|
||||
return this._isScrollbarHorizontal
|
||||
}
|
||||
|
||||
/**
|
||||
* top coordinate of scrollbar
|
||||
*/
|
||||
get scrollTop()
|
||||
{
|
||||
get scrollTop() {
|
||||
return this.content.top
|
||||
}
|
||||
|
||||
/**
|
||||
* left coordinate of scrollbar
|
||||
*/
|
||||
get scrollLeft()
|
||||
{
|
||||
get scrollLeft() {
|
||||
return this.content.left
|
||||
}
|
||||
|
||||
@ -312,12 +292,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* width of content area
|
||||
* if not set then it uses content.width to calculate width
|
||||
*/
|
||||
get scrollWidth()
|
||||
{
|
||||
get scrollWidth() {
|
||||
return this._scrollWidth || this.content.width
|
||||
}
|
||||
set scrollWidth(value)
|
||||
{
|
||||
set scrollWidth(value) {
|
||||
this._scrollWidth = value
|
||||
}
|
||||
|
||||
@ -325,12 +303,10 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* height of content area
|
||||
* if not set then it uses content.height to calculate height
|
||||
*/
|
||||
get scrollHeight()
|
||||
{
|
||||
get scrollHeight() {
|
||||
return this._scrollHeight || this.content.height
|
||||
}
|
||||
set scrollHeight(value)
|
||||
{
|
||||
set scrollHeight(value) {
|
||||
this._scrollHeight = value
|
||||
}
|
||||
|
||||
@ -338,52 +314,111 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* draws scrollbars
|
||||
* @private
|
||||
*/
|
||||
_drawScrollbars()
|
||||
{
|
||||
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth
|
||||
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight
|
||||
_drawScrollbars() {
|
||||
this._isScrollbarHorizontal =
|
||||
this.overflowX === 'scroll'
|
||||
? true
|
||||
: ['hidden', 'none'].indexOf(this.overflowX) !== -1
|
||||
? false
|
||||
: this.scrollWidth > this.options.boxWidth
|
||||
this._isScrollbarVertical =
|
||||
this.overflowY === 'scroll'
|
||||
? true
|
||||
: ['hidden', 'none'].indexOf(this.overflowY) !== -1
|
||||
? false
|
||||
: this.scrollHeight > this.options.boxHeight
|
||||
this.scrollbar.clear()
|
||||
let options = {}
|
||||
options.left = 0
|
||||
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
options.right =
|
||||
this.scrollWidth +
|
||||
(this._isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
options.top = 0
|
||||
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
options.bottom =
|
||||
this.scrollHeight +
|
||||
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
const width =
|
||||
this.scrollWidth +
|
||||
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
|
||||
const height =
|
||||
this.scrollHeight +
|
||||
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
|
||||
this.scrollbarTop = (this.content.top / height) * this.boxHeight
|
||||
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
|
||||
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
|
||||
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight
|
||||
this.scrollbarHeight =
|
||||
this.scrollbarTop + this.scrollbarHeight > this.boxHeight
|
||||
? this.boxHeight - this.scrollbarTop
|
||||
: this.scrollbarHeight
|
||||
this.scrollbarLeft = (this.content.left / width) * this.boxWidth
|
||||
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
|
||||
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
|
||||
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth
|
||||
if (this.isScrollbarVertical)
|
||||
{
|
||||
this.scrollbarWidth =
|
||||
this.scrollbarWidth + this.scrollbarLeft > this.boxWidth
|
||||
? this.boxWidth - this.scrollbarLeft
|
||||
: this.scrollbarWidth
|
||||
if (this.isScrollbarVertical) {
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
|
||||
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
|
||||
.beginFill(
|
||||
this.options.scrollbarBackground,
|
||||
this.options.scrollbarBackgroundAlpha
|
||||
)
|
||||
.drawRect(
|
||||
this.boxWidth -
|
||||
this.scrollbarSize +
|
||||
this.options.scrollbarOffsetVertical,
|
||||
0,
|
||||
this.scrollbarSize,
|
||||
this.boxHeight
|
||||
)
|
||||
.endFill()
|
||||
}
|
||||
if (this.isScrollbarHorizontal)
|
||||
{
|
||||
if (this.isScrollbarHorizontal) {
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
|
||||
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
|
||||
.beginFill(
|
||||
this.options.scrollbarBackground,
|
||||
this.options.scrollbarBackgroundAlpha
|
||||
)
|
||||
.drawRect(
|
||||
0,
|
||||
this.boxHeight -
|
||||
this.scrollbarSize +
|
||||
this.options.scrollbarOffsetHorizontal,
|
||||
this.boxWidth,
|
||||
this.scrollbarSize
|
||||
)
|
||||
.endFill()
|
||||
}
|
||||
if (this.isScrollbarVertical)
|
||||
{
|
||||
if (this.isScrollbarVertical) {
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
|
||||
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
|
||||
.beginFill(
|
||||
this.options.scrollbarForeground,
|
||||
this.options.scrollbarForegroundAlpha
|
||||
)
|
||||
.drawRect(
|
||||
this.boxWidth -
|
||||
this.scrollbarSize +
|
||||
this.options.scrollbarOffsetVertical,
|
||||
this.scrollbarTop,
|
||||
this.scrollbarSize,
|
||||
this.scrollbarHeight
|
||||
)
|
||||
.endFill()
|
||||
}
|
||||
if (this.isScrollbarHorizontal)
|
||||
{
|
||||
if (this.isScrollbarHorizontal) {
|
||||
this.scrollbar
|
||||
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
|
||||
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
|
||||
.beginFill(
|
||||
this.options.scrollbarForeground,
|
||||
this.options.scrollbarForegroundAlpha
|
||||
)
|
||||
.drawRect(
|
||||
this.scrollbarLeft,
|
||||
this.boxHeight -
|
||||
this.scrollbarSize +
|
||||
this.options.scrollbarOffsetHorizontal,
|
||||
this.scrollbarWidth,
|
||||
this.scrollbarSize
|
||||
)
|
||||
.endFill()
|
||||
}
|
||||
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
|
||||
@ -394,8 +429,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* draws mask layer
|
||||
* @private
|
||||
*/
|
||||
_drawMask()
|
||||
{
|
||||
_drawMask() {
|
||||
this._maskContent
|
||||
.beginFill(0)
|
||||
.drawRect(0, 0, this.boxWidth, this.boxHeight)
|
||||
@ -406,19 +440,20 @@ export default class Scrollbox extends PIXI.Container {
|
||||
/**
|
||||
* call when scrollbox content changes
|
||||
*/
|
||||
update()
|
||||
{
|
||||
update() {
|
||||
this.content.mask = null
|
||||
this._maskContent.clear()
|
||||
if (!this._disabled)
|
||||
{
|
||||
if (!this._disabled) {
|
||||
this._drawScrollbars()
|
||||
this._drawMask()
|
||||
if (this.options.dragScroll)
|
||||
{
|
||||
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y'
|
||||
if (direction !== null)
|
||||
{
|
||||
if (this.options.dragScroll) {
|
||||
const direction =
|
||||
this.isScrollbarHorizontal && this.isScrollbarVertical
|
||||
? 'all'
|
||||
: this.isScrollbarHorizontal
|
||||
? 'x'
|
||||
: 'y'
|
||||
if (direction !== null) {
|
||||
this.content
|
||||
.drag({ clampWheel: true, direction })
|
||||
.clamp({ direction, underflow: this.options.underflow })
|
||||
@ -430,18 +465,18 @@ export default class Scrollbox extends PIXI.Container {
|
||||
/**
|
||||
* show the scrollbar and restart the timer for fade if options.fade is set
|
||||
*/
|
||||
activateFade()
|
||||
{
|
||||
if (this.options.fade)
|
||||
{
|
||||
if (this.fade)
|
||||
{
|
||||
activateFade() {
|
||||
if (this.options.fade) {
|
||||
if (this.fade) {
|
||||
this.ease.remove(this.fade)
|
||||
}
|
||||
this.scrollbar.alpha = 1
|
||||
const time = this.options.fade === true ? 1000 : this.options.fade
|
||||
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase })
|
||||
this.fade.on('each', () => this.content.dirty = true)
|
||||
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
|
||||
wait: this.options.fadeWait,
|
||||
ease: this.options.fadeEase
|
||||
})
|
||||
this.fade.on('each', () => (this.content.dirty = true))
|
||||
}
|
||||
}
|
||||
|
||||
@ -450,60 +485,47 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @param {PIXI.interaction.InteractionEvent} e
|
||||
* @private
|
||||
*/
|
||||
scrollbarDown(e)
|
||||
{
|
||||
scrollbarDown(e) {
|
||||
const local = this.toLocal(e.data.global)
|
||||
if (this.isScrollbarHorizontal)
|
||||
{
|
||||
if (local.y > this.boxHeight - this.scrollbarSize)
|
||||
{
|
||||
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
|
||||
{
|
||||
if (this.isScrollbarHorizontal) {
|
||||
if (local.y > this.boxHeight - this.scrollbarSize) {
|
||||
if (
|
||||
local.x >= this.scrollbarLeft &&
|
||||
local.x <= this.scrollbarLeft + this.scrollbarWidth
|
||||
) {
|
||||
this.pointerDown = { type: 'horizontal', last: local }
|
||||
}
|
||||
else
|
||||
{
|
||||
if (local.x > this.scrollbarLeft)
|
||||
{
|
||||
} else {
|
||||
if (local.x > this.scrollbarLeft) {
|
||||
this.content.left += this.content.worldScreenWidth
|
||||
this.update()
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
this.content.left -= this.content.worldScreenWidth
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
if (this.options.stopPropagation)
|
||||
{
|
||||
if (this.options.stopPropagation) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this.isScrollbarVertical)
|
||||
{
|
||||
if (local.x > this.boxWidth - this.scrollbarSize)
|
||||
{
|
||||
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
|
||||
{
|
||||
if (this.isScrollbarVertical) {
|
||||
if (local.x > this.boxWidth - this.scrollbarSize) {
|
||||
if (
|
||||
local.y >= this.scrollbarTop &&
|
||||
local.y <= this.scrollbarTop + this.scrollbarWidth
|
||||
) {
|
||||
this.pointerDown = { type: 'vertical', last: local }
|
||||
}
|
||||
else
|
||||
{
|
||||
if (local.y > this.scrollbarTop)
|
||||
{
|
||||
} else {
|
||||
if (local.y > this.scrollbarTop) {
|
||||
this.content.top += this.content.worldScreenHeight
|
||||
this.update()
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
this.content.top -= this.content.worldScreenHeight
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
if (this.options.stopPropagation)
|
||||
{
|
||||
if (this.options.stopPropagation) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
return
|
||||
@ -516,26 +538,20 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @param {PIXI.interaction.InteractionEvent} e
|
||||
* @private
|
||||
*/
|
||||
scrollbarMove(e)
|
||||
{
|
||||
if (this.pointerDown)
|
||||
{
|
||||
if (this.pointerDown.type === 'horizontal')
|
||||
{
|
||||
scrollbarMove(e) {
|
||||
if (this.pointerDown) {
|
||||
if (this.pointerDown.type === 'horizontal') {
|
||||
const local = this.toLocal(e.data.global)
|
||||
this.content.left += local.x - this.pointerDown.last.x
|
||||
this.pointerDown.last = local
|
||||
this.update()
|
||||
}
|
||||
else if (this.pointerDown.type === 'vertical')
|
||||
{
|
||||
} else if (this.pointerDown.type === 'vertical') {
|
||||
const local = this.toLocal(e.data.global)
|
||||
this.content.top += local.y - this.pointerDown.last.y
|
||||
this.pointerDown.last = local
|
||||
this.update()
|
||||
}
|
||||
if (this.options.stopPropagation)
|
||||
{
|
||||
if (this.options.stopPropagation) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
}
|
||||
@ -545,8 +561,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* handle pointer down on scrollbar
|
||||
* @private
|
||||
*/
|
||||
scrollbarUp()
|
||||
{
|
||||
scrollbarUp() {
|
||||
this.pointerDown = null
|
||||
}
|
||||
|
||||
@ -558,19 +573,27 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
|
||||
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
|
||||
*/
|
||||
resize(options)
|
||||
{
|
||||
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
|
||||
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
|
||||
if (options.scrollWidth)
|
||||
{
|
||||
resize(options) {
|
||||
this.options.boxWidth =
|
||||
typeof options.boxWidth !== 'undefined'
|
||||
? options.boxWidth
|
||||
: this.options.boxWidth
|
||||
this.options.boxHeight =
|
||||
typeof options.boxHeight !== 'undefined'
|
||||
? options.boxHeight
|
||||
: this.options.boxHeight
|
||||
if (options.scrollWidth) {
|
||||
this.scrollWidth = options.scrollWidth
|
||||
}
|
||||
if (options.scrollHeight)
|
||||
{
|
||||
if (options.scrollHeight) {
|
||||
this.scrollHeight = options.scrollHeight
|
||||
}
|
||||
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
|
||||
this.content.resize(
|
||||
this.options.boxWidth,
|
||||
this.options.boxHeight,
|
||||
this.scrollWidth,
|
||||
this.scrollHeight
|
||||
)
|
||||
this.update()
|
||||
}
|
||||
|
||||
@ -581,8 +604,7 @@ export default class Scrollbox extends PIXI.Container {
|
||||
* @param {number} width
|
||||
* @param {number} height
|
||||
*/
|
||||
ensureVisible(x, y, width, height)
|
||||
{
|
||||
ensureVisible(x, y, width, height) {
|
||||
this.content.ensureVisible(x, y, width, height)
|
||||
this._drawScrollbars()
|
||||
}
|
||||
|
||||
@ -26,7 +26,6 @@ import Scrollbox from './scrollbox.js'
|
||||
* @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
|
||||
*/
|
||||
export default class Scrollview extends Scrollbox {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Scrollview.
|
||||
*
|
||||
@ -34,7 +33,6 @@ export default class Scrollview extends Scrollbox {
|
||||
* @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
super(opts)
|
||||
|
||||
this.opts = opts
|
||||
@ -47,7 +45,6 @@ export default class Scrollview extends Scrollbox {
|
||||
* @return {Scrollview} A reference to the Scrollview for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -57,7 +54,6 @@ export default class Scrollview extends Scrollbox {
|
||||
* @return {Scrollview} A reference to the Scrollview for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
this.update()
|
||||
|
||||
return this
|
||||
|
||||
@ -51,7 +51,6 @@ 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.
|
||||
*
|
||||
@ -86,13 +85,14 @@ export default class Slider extends PIXI.Container {
|
||||
* @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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -105,7 +105,7 @@ export default class Slider extends PIXI.Container {
|
||||
strokeWidth: theme.strokeWidth,
|
||||
strokeAlpha: theme.strokeAlpha,
|
||||
controlFill: theme.fill,
|
||||
controlFillAlpha: .5,
|
||||
controlFillAlpha: 0.5,
|
||||
controlStroke: theme.primaryColor,
|
||||
controlStrokeWidth: 2,
|
||||
controlStrokeAlpha: theme.strokeAlpha,
|
||||
@ -120,7 +120,9 @@ export default class Slider extends PIXI.Container {
|
||||
onComplete: null,
|
||||
tooltip: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.opts.container = this.opts.container || this
|
||||
|
||||
@ -168,15 +170,18 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// Container events
|
||||
//-----------------
|
||||
const container = this.opts.container
|
||||
|
||||
this.on('pointermove', e => {
|
||||
if (this.control.dragging) {
|
||||
const moveX = this.control.event.data.getLocalPosition(this.control.parent).x
|
||||
this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius)
|
||||
const moveX = this.control.event.data.getLocalPosition(
|
||||
this.control.parent
|
||||
).x
|
||||
this._value = this.pixelToValue(
|
||||
moveX - this.control.delta - this.opts.controlRadius
|
||||
)
|
||||
let x = this.valueToPixel(this._value) + this.opts.controlRadius
|
||||
this.control.x = x
|
||||
|
||||
@ -188,8 +193,16 @@ export default class Slider extends PIXI.Container {
|
||||
|
||||
if (container instanceof Element) {
|
||||
container.addEventListener('pointerup', e => this.onEnd(e), false)
|
||||
container.addEventListener('pointercancel', e => this.onEnd(e), false)
|
||||
container.addEventListener('pointerleave', e => this.onEnd(e), false)
|
||||
container.addEventListener(
|
||||
'pointercancel',
|
||||
e => this.onEnd(e),
|
||||
false
|
||||
)
|
||||
container.addEventListener(
|
||||
'pointerleave',
|
||||
e => this.onEnd(e),
|
||||
false
|
||||
)
|
||||
container.addEventListener('pointerout', e => this.onEnd(e), false)
|
||||
container.addEventListener('mouseup', e => this.onEnd(e), false)
|
||||
container.addEventListener('mousecancel', e => this.onEnd(e), false)
|
||||
@ -233,7 +246,7 @@ export default class Slider extends PIXI.Container {
|
||||
// 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 => {
|
||||
@ -242,7 +255,7 @@ export default class Slider extends PIXI.Container {
|
||||
|
||||
this.sliderObj.on('pointerdown', e => {
|
||||
this.sliderObj.pointerdowned = true
|
||||
TweenLite.to(this.control, this.theme.fast, {alpha: .7})
|
||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
|
||||
})
|
||||
|
||||
// Click on the slider bar
|
||||
@ -250,8 +263,10 @@ 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 })
|
||||
}
|
||||
})
|
||||
|
||||
@ -282,7 +297,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// set position
|
||||
//-----------------
|
||||
this.position.set(this.opts.x, this.opts.y)
|
||||
@ -301,7 +315,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
const r = this.radius
|
||||
const cr = this.opts.controlRadius
|
||||
const w = this.opts.width
|
||||
@ -312,7 +325,11 @@ 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)
|
||||
@ -326,10 +343,20 @@ export default class Slider extends PIXI.Container {
|
||||
|
||||
// Draw control
|
||||
this.control.clear()
|
||||
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
|
||||
this.control.lineStyle(
|
||||
this.opts.controlStrokeWidth,
|
||||
this.opts.controlStroke,
|
||||
this.opts.controlStrokeAlpha
|
||||
)
|
||||
this.control.beginFill(
|
||||
this.opts.controlFill,
|
||||
this.opts.controlFillAlpha
|
||||
)
|
||||
this.control.drawCircle(0, 0, cr - 1)
|
||||
this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha)
|
||||
this.control.beginFill(
|
||||
this.opts.controlStroke,
|
||||
this.opts.controlStrokeAlpha
|
||||
)
|
||||
this.control.drawCircle(0, 0, cr / 6)
|
||||
this.control.endFill()
|
||||
|
||||
@ -343,7 +370,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
onEnd(e) {
|
||||
|
||||
if (this.control.dragging) {
|
||||
this.control.event = null
|
||||
this.control.dragging = false
|
||||
@ -368,7 +394,10 @@ 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)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -384,7 +413,10 @@ 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
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -417,7 +449,6 @@ export default class Slider extends PIXI.Container {
|
||||
return this._disabled
|
||||
}
|
||||
set disabled(value) {
|
||||
|
||||
this._disabled = value
|
||||
|
||||
if (this._disabled) {
|
||||
@ -425,7 +456,7 @@ export default class Slider extends PIXI.Container {
|
||||
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
|
||||
@ -441,7 +472,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.opts.strokeAlpha = 1
|
||||
this.opts.fillAlpha = 1
|
||||
this.opts.controlStrokeAlpha = 1
|
||||
@ -458,7 +488,6 @@ export default class Slider extends PIXI.Container {
|
||||
* @return {Slider} A reference to the slider for chaining.
|
||||
*/
|
||||
hide() {
|
||||
|
||||
this.opts.strokeAlpha = 0
|
||||
this.opts.fillAlpha = 0
|
||||
this.opts.controlStrokeAlpha = 0
|
||||
|
||||
@ -4,7 +4,6 @@ import Events from '../events.js'
|
||||
import { Angle } from '../utils.js'
|
||||
|
||||
class StylusCommand extends Object {
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
}
|
||||
@ -23,7 +22,6 @@ class StylusCommand extends Object {
|
||||
}
|
||||
|
||||
class StrokeCommand extends StylusCommand {
|
||||
|
||||
constructor(stroke) {
|
||||
super()
|
||||
this.stroke = stroke
|
||||
@ -50,7 +48,6 @@ class StrokeCommand extends StylusCommand {
|
||||
}
|
||||
|
||||
class ClearCommand extends StylusCommand {
|
||||
|
||||
do(stylus) {
|
||||
// Clears the command stack
|
||||
stylus.commandStack = []
|
||||
@ -71,20 +68,20 @@ class ClearCommand extends StylusCommand {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default class Stylus extends PIXI.Graphics {
|
||||
|
||||
constructor({ width = window.innerWidth,
|
||||
constructor({
|
||||
width = window.innerWidth,
|
||||
height = window.innerHeight,
|
||||
interactive = true,
|
||||
color = 0x000000,
|
||||
tiltX = 0,
|
||||
tiltY = 0,
|
||||
backgroundAlpha = 1,
|
||||
backgroundFill = 0xFFFFFF,
|
||||
backgroundFill = 0xffffff,
|
||||
colorAlpha = 1,
|
||||
captureEvents = true,
|
||||
acceptMouseEvents = true } = {}) {
|
||||
acceptMouseEvents = true
|
||||
} = {}) {
|
||||
super()
|
||||
this.activePointers = 0
|
||||
this.wantedWidth = width
|
||||
@ -103,8 +100,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||
this.strokes = []
|
||||
this.stroke = []
|
||||
this.minStrokeLength = 4
|
||||
if (captureEvents)
|
||||
this.registerEventHandler(acceptMouseEvents)
|
||||
if (captureEvents) this.registerEventHandler(acceptMouseEvents)
|
||||
this.drawBackground()
|
||||
}
|
||||
|
||||
@ -121,9 +117,12 @@ export default class Stylus extends PIXI.Graphics {
|
||||
|
||||
isStylusPointer(event) {
|
||||
let identifier = event.data.identifier
|
||||
if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
|
||||
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
|
||||
for (let touch of event.data.originalEvent.changedTouches) {
|
||||
if (touch.identifier === identifier && touch.touchType === 'stylus') {
|
||||
if (
|
||||
touch.identifier === identifier &&
|
||||
touch.touchType === 'stylus'
|
||||
) {
|
||||
this.tiltX = Angle.radian2degree(touch.azimuthAngle)
|
||||
this.tiltY = 90.0 - Angle.radian2degree(touch.altitudeAngle)
|
||||
return true
|
||||
@ -141,9 +140,12 @@ export default class Stylus extends PIXI.Graphics {
|
||||
|
||||
isStylusTouch(event) {
|
||||
let identifier = event.data.identifier
|
||||
if (typeof (event.data.originalEvent.changedTouches) !== 'undefined') {
|
||||
if (typeof event.data.originalEvent.changedTouches !== 'undefined') {
|
||||
for (let touch of event.data.originalEvent.changedTouches) {
|
||||
if (touch.identifier === identifier && touch.pointerType === 'touch') {
|
||||
if (
|
||||
touch.identifier === identifier &&
|
||||
touch.pointerType === 'touch'
|
||||
) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
@ -165,7 +167,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||
}
|
||||
|
||||
registerEventHandler() {
|
||||
window.addEventListener('keydown', (e) => {
|
||||
window.addEventListener('keydown', e => {
|
||||
switch (e.keyCode) {
|
||||
case 38: // up arrow
|
||||
this.tiltX += 5
|
||||
@ -180,10 +182,11 @@ export default class Stylus extends PIXI.Graphics {
|
||||
this.tiltY += 5
|
||||
break
|
||||
}
|
||||
if (this.debug) console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
|
||||
if (this.debug)
|
||||
console.log('keydown', e.keyCode, this.tiltX, this.tiltY)
|
||||
})
|
||||
|
||||
this.on('pointerdown', (e) => {
|
||||
this.on('pointerdown', e => {
|
||||
if (this.debug) console.log('pointerdown', e)
|
||||
if (this.eventInside(e)) {
|
||||
this.activePointers += 1
|
||||
@ -193,14 +196,19 @@ export default class Stylus extends PIXI.Graphics {
|
||||
}
|
||||
})
|
||||
|
||||
this.on('pointermove', (e) => {
|
||||
if (Events.isPointerDown(e.data.originalEvent) || this.isStylusPointer(e) || this.isStylusTouch(e)) {
|
||||
if (this.debug) console.log('pointermove', e, this.eventInside(e))
|
||||
this.on('pointermove', e => {
|
||||
if (
|
||||
Events.isPointerDown(e.data.originalEvent) ||
|
||||
this.isStylusPointer(e) ||
|
||||
this.isStylusTouch(e)
|
||||
) {
|
||||
if (this.debug)
|
||||
console.log('pointermove', e, this.eventInside(e))
|
||||
if (this.eventInside(e) && this.singlePointer())
|
||||
this.moveStroke(this.toStroke(e))
|
||||
}
|
||||
})
|
||||
this.on('pointerup', (e) => {
|
||||
this.on('pointerup', e => {
|
||||
if (this.eventInside(e)) {
|
||||
if (this.activePointers > 0) {
|
||||
this.activePointers -= 1
|
||||
@ -209,13 +217,13 @@ export default class Stylus extends PIXI.Graphics {
|
||||
}
|
||||
if (this.debug) console.log('pointerup', this.activePointers)
|
||||
})
|
||||
this.on('pointerleave', (e) => {
|
||||
this.on('pointerleave', e => {
|
||||
if (this.activePointers > 0) {
|
||||
this.activePointers -= 1
|
||||
}
|
||||
this.endStroke(this.toStroke(e))
|
||||
})
|
||||
this.on('pointercancel', (e) => {
|
||||
this.on('pointercancel', e => {
|
||||
if (this.activePointers > 0) {
|
||||
this.activePointers -= 1
|
||||
}
|
||||
@ -246,7 +254,6 @@ export default class Stylus extends PIXI.Graphics {
|
||||
}
|
||||
|
||||
eventInside(event) {
|
||||
|
||||
let local = this.toLocal(event.data.global)
|
||||
for (let child of this.children) {
|
||||
let r = child.getBounds()
|
||||
@ -255,10 +262,8 @@ export default class Stylus extends PIXI.Graphics {
|
||||
return false
|
||||
}
|
||||
}
|
||||
if (local.x < 0 || local.x > this.wantedWidth)
|
||||
return false
|
||||
if (local.y < 0 || local.y > this.wantedHeight)
|
||||
return false
|
||||
if (local.x < 0 || local.x > this.wantedWidth) return false
|
||||
if (local.y < 0 || local.y > this.wantedHeight) return false
|
||||
event.stopPropagation()
|
||||
// if (this.debug) console.log('stopPropagation', event)
|
||||
if (event.data.originalEvent.claimedByScatter) {
|
||||
@ -276,9 +281,11 @@ export default class Stylus extends PIXI.Graphics {
|
||||
let x = Math.max(0, Math.min(local.x, this.wantedWidth))
|
||||
let y = Math.max(0, Math.min(local.y, this.wantedHeight))
|
||||
let desc = {
|
||||
x, y,
|
||||
x,
|
||||
y,
|
||||
pressure: event.pressure || null,
|
||||
tiltX: this.tiltX, tiltY: this.tiltY,
|
||||
tiltX: this.tiltX,
|
||||
tiltY: this.tiltY,
|
||||
color: this.color
|
||||
}
|
||||
return desc
|
||||
@ -313,8 +320,11 @@ export default class Stylus extends PIXI.Graphics {
|
||||
this.moveTo(start.x, start.y)
|
||||
for (let i = 1; i < stroke.length; i++) {
|
||||
let info = stroke[i]
|
||||
this.lineStyle(this.tiltToLineWidth(info.tiltY),
|
||||
info.color, this.colorAlpha)
|
||||
this.lineStyle(
|
||||
this.tiltToLineWidth(info.tiltY),
|
||||
info.color,
|
||||
this.colorAlpha
|
||||
)
|
||||
this.lineTo(info.x, info.y)
|
||||
}
|
||||
this.endFill()
|
||||
@ -329,7 +339,7 @@ export default class Stylus extends PIXI.Graphics {
|
||||
|
||||
drawStrokes() {
|
||||
this.drawBackground()
|
||||
this.lineStyle(1.0, 0xFF0000, 1)
|
||||
this.lineStyle(1.0, 0xff0000, 1)
|
||||
for (let stroke of this.iterStrokes()) {
|
||||
this.drawStroke(stroke)
|
||||
}
|
||||
|
||||
@ -59,7 +59,6 @@ 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.
|
||||
*
|
||||
@ -106,13 +105,14 @@ export default class Switch extends PIXI.Container {
|
||||
* @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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -133,10 +133,10 @@ export default class Switch extends PIXI.Container {
|
||||
controlFillActive: theme.stroke,
|
||||
controlFillActiveAlpha: theme.strokeAlpha,
|
||||
controlStroke: theme.stroke,
|
||||
controlStrokeWidth: theme.strokeWidth * .8,
|
||||
controlStrokeWidth: theme.strokeWidth * 0.8,
|
||||
controlStrokeAlpha: theme.strokeAlpha,
|
||||
controlStrokeActive: theme.stroke,
|
||||
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
|
||||
controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
|
||||
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
|
||||
duration: theme.fast,
|
||||
durationActive: theme.fast,
|
||||
@ -148,10 +148,14 @@ export default class Switch extends PIXI.Container {
|
||||
afterAction: null,
|
||||
tooltip: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
},
|
||||
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
|
||||
//-----------------
|
||||
@ -205,7 +209,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// Switch
|
||||
//-----------------
|
||||
let switchObj = new PIXI.Graphics()
|
||||
@ -228,7 +231,7 @@ export default class Switch extends PIXI.Container {
|
||||
// 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 => {
|
||||
@ -236,11 +239,10 @@ export default class Switch extends PIXI.Container {
|
||||
})
|
||||
|
||||
this.switchObj.on('pointerdown', e => {
|
||||
TweenLite.to(this.control, this.theme.fast, {alpha: .7})
|
||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
|
||||
})
|
||||
|
||||
this.switchObj.on('pointerup', e => {
|
||||
|
||||
if (this.opts.beforeAction) {
|
||||
this.opts.beforeAction.call(this, e, this)
|
||||
}
|
||||
@ -257,7 +259,7 @@ export default class Switch extends PIXI.Container {
|
||||
}
|
||||
}
|
||||
|
||||
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
|
||||
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
|
||||
|
||||
if (this.opts.afterAction) {
|
||||
this.opts.afterAction.call(this, e, this)
|
||||
@ -295,7 +297,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// set position
|
||||
//-----------------
|
||||
this.position.set(this.opts.x, this.opts.y)
|
||||
@ -314,20 +315,42 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
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.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,
|
||||
this.opts.height,
|
||||
this.opts.width - this.radius,
|
||||
this.opts.height,
|
||||
this.radius
|
||||
)
|
||||
this.switchObj.lineTo(this.radius, this.opts.height)
|
||||
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
|
||||
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
|
||||
@ -336,12 +359,26 @@ 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()
|
||||
@ -356,23 +393,48 @@ export default class Switch extends PIXI.Container {
|
||||
* @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.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,
|
||||
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()
|
||||
|
||||
@ -389,11 +451,9 @@ 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.tempAnimated, this.opts.duration, {
|
||||
colorProps: {
|
||||
@ -413,10 +473,10 @@ export default class Switch extends PIXI.Container {
|
||||
onUpdate: () => this.drawAnimated(),
|
||||
onComplete: () => this.draw()
|
||||
})
|
||||
|
||||
|
||||
} else {
|
||||
TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive})
|
||||
TweenLite.to(this.control, this.opts.durationActive, {
|
||||
x: this.xInactive
|
||||
})
|
||||
TweenLite.to(this.tempAnimated, this.opts.durationActive, {
|
||||
colorProps: {
|
||||
fill: this.opts.fill,
|
||||
@ -448,14 +508,13 @@ export default class Switch extends PIXI.Container {
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
|
||||
this._disabled = value
|
||||
|
||||
if (this._disabled) {
|
||||
this.switchObj.interactive = false
|
||||
this.switchObj.buttonMode = false
|
||||
this.switchObj.alpha = .5
|
||||
this.control.alpha = .5
|
||||
this.switchObj.alpha = 0.5
|
||||
this.control.alpha = 0.5
|
||||
} else {
|
||||
this.switchObj.interactive = true
|
||||
this.switchObj.buttonMode = true
|
||||
@ -470,7 +529,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.opts.strokeAlpha = 1
|
||||
this.opts.strokeActiveAlpha = 1
|
||||
this.opts.fillAlpha = 1
|
||||
@ -491,7 +549,6 @@ export default class Switch extends PIXI.Container {
|
||||
* @return {Switch} A reference to the switch for chaining.
|
||||
*/
|
||||
hide() {
|
||||
|
||||
this.opts.strokeAlpha = 0
|
||||
this.opts.strokeActiveAlpha = 0
|
||||
this.opts.fillAlpha = 0
|
||||
|
||||
@ -15,12 +15,11 @@ export class Command extends PIXI.Graphics {
|
||||
this.setup()
|
||||
}
|
||||
|
||||
setup() {
|
||||
}
|
||||
setup() {}
|
||||
|
||||
draw() {
|
||||
this.clear()
|
||||
var color = (this.selected) ? this.selectedColor : 0xFFFFFF
|
||||
var color = this.selected ? this.selectedColor : 0xffffff
|
||||
this.lineStyle(0)
|
||||
this.beginFill(color, 1)
|
||||
this.drawShape(this.shape)
|
||||
@ -108,7 +107,6 @@ export class StopCommand extends Command {
|
||||
}
|
||||
|
||||
export class RecorderTools extends PIXI.Container {
|
||||
|
||||
constructor(renderer) {
|
||||
super(renderer)
|
||||
this.renderer = renderer
|
||||
@ -122,7 +120,9 @@ export class RecorderTools extends PIXI.Container {
|
||||
setup(container) {
|
||||
// Since this delegate might shadow another delegate, we mus avoid
|
||||
// capturing PointerEvents.
|
||||
this.delegate = new InteractionMapper(container, this, { capturePointerEvents: false })
|
||||
this.delegate = new InteractionMapper(container, this, {
|
||||
capturePointerEvents: false
|
||||
})
|
||||
}
|
||||
|
||||
findTarget(event, local, global) {
|
||||
@ -131,13 +131,21 @@ export class RecorderTools extends PIXI.Container {
|
||||
|
||||
setupToolbar() {
|
||||
this.toolbar = new PIXI.Graphics()
|
||||
this.record = new RecordCommand(this, 0xCC0000, new PIXI.Circle(0, 0, 16))
|
||||
this.play = new PlayCommand(this, 0x0000CC, new PIXI.Polygon(0, 16,
|
||||
32, 16 + 16,
|
||||
0, 16 + 32,
|
||||
0, 16))
|
||||
this.stop = new StopCommand(this, 0x0000CC,
|
||||
new PIXI.Rectangle(0, 0, 32, 32))
|
||||
this.record = new RecordCommand(
|
||||
this,
|
||||
0xcc0000,
|
||||
new PIXI.Circle(0, 0, 16)
|
||||
)
|
||||
this.play = new PlayCommand(
|
||||
this,
|
||||
0x0000cc,
|
||||
new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16)
|
||||
)
|
||||
this.stop = new StopCommand(
|
||||
this,
|
||||
0x0000cc,
|
||||
new PIXI.Rectangle(0, 0, 32, 32)
|
||||
)
|
||||
this.toolbar.addChild(this.record).position.set(44, 48)
|
||||
this.toolbar.addChild(this.play).position.set(44 + 44, 16)
|
||||
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32)
|
||||
@ -149,7 +157,7 @@ export class RecorderTools extends PIXI.Container {
|
||||
var graphics = this.toolbar
|
||||
graphics.clear()
|
||||
graphics.beginFill(0x000000, 0.5)
|
||||
graphics.lineStyle(2, 0xFFFFFF, 1)
|
||||
graphics.lineStyle(2, 0xffffff, 1)
|
||||
graphics.drawRoundedRect(16, 16, 44 * 4 + 8, 64, 8)
|
||||
graphics.endFill()
|
||||
}
|
||||
@ -175,7 +183,11 @@ export class RecorderTools extends PIXI.Container {
|
||||
|
||||
mapPositionToPoint(point) {
|
||||
let local = new PIXI.Point()
|
||||
this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y)
|
||||
this.renderer.plugins.interaction.mapPositionToPoint(
|
||||
local,
|
||||
point.x,
|
||||
point.y
|
||||
)
|
||||
return local
|
||||
}
|
||||
|
||||
@ -184,8 +196,7 @@ export class RecorderTools extends PIXI.Container {
|
||||
}
|
||||
|
||||
capture(event) {
|
||||
if (typeof event.mouseDownSubstitute != 'undefined')
|
||||
return false
|
||||
if (typeof event.mouseDownSubstitute != 'undefined') return false
|
||||
return true
|
||||
}
|
||||
|
||||
@ -226,8 +237,7 @@ export class RecorderTools extends PIXI.Container {
|
||||
let local = this.extractLocal(event)
|
||||
if (this.toolbar.containsPoint(local)) {
|
||||
this.onPress(local)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.recordEvent(event)
|
||||
this.updateTouchGraphics(interaction)
|
||||
}
|
||||
@ -244,9 +254,9 @@ export class RecorderTools extends PIXI.Container {
|
||||
}
|
||||
let p = current.get(key)
|
||||
if (key == 'mouse') {
|
||||
graphics.beginFill(0xCC0000, 0.5)
|
||||
graphics.beginFill(0xcc0000, 0.5)
|
||||
} else {
|
||||
graphics.beginFill(0xCCCCCC, 0.5)
|
||||
graphics.beginFill(0xcccccc, 0.5)
|
||||
}
|
||||
graphics.drawCircle(p.x, p.y, 20)
|
||||
}
|
||||
@ -256,7 +266,6 @@ export class RecorderTools extends PIXI.Container {
|
||||
}
|
||||
|
||||
export class AppTest extends PIXIApp {
|
||||
|
||||
constructor(canvas, container) {
|
||||
super({ view: canvas, backgroundColor: 0x000000 })
|
||||
this.container = container
|
||||
@ -277,7 +286,3 @@ export class AppTest extends PIXIApp {
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
|
||||
*/
|
||||
export default class Theme {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Theme.
|
||||
*
|
||||
@ -81,17 +80,19 @@ export default class Theme {
|
||||
* is used for large actived text.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
|
||||
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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
margin: 12,
|
||||
padding: 12,
|
||||
radius: 4,
|
||||
fast: .25,
|
||||
normal: .5,
|
||||
fast: 0.25,
|
||||
normal: 0.5,
|
||||
slow: 1,
|
||||
primaryColor: colorPrimary,
|
||||
color1: color1,
|
||||
@ -101,19 +102,24 @@ export default class Theme {
|
||||
fillActive: color1,
|
||||
fillActiveAlpha: 1,
|
||||
stroke: color2,
|
||||
strokeWidth: .6,
|
||||
strokeWidth: 0.6,
|
||||
strokeAlpha: 1,
|
||||
strokeActive: color2,
|
||||
strokeActiveWidth: .6,
|
||||
strokeActiveWidth: 0.6,
|
||||
strokeActiveAlpha: 1,
|
||||
iconColor: color2,
|
||||
iconColorActive: colorPrimary,
|
||||
background: color1
|
||||
}, opts)
|
||||
},
|
||||
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',
|
||||
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,
|
||||
@ -121,12 +127,39 @@ export default class Theme {
|
||||
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
|
||||
)
|
||||
this.opts.textStyleSmall = Object.assign(
|
||||
{},
|
||||
this.opts.textStyle,
|
||||
{ fontSize: this.opts.textStyle.fontSize - 3 },
|
||||
this.opts.textStyleSmall
|
||||
)
|
||||
this.opts.textStyleLarge = Object.assign(
|
||||
{},
|
||||
this.opts.textStyle,
|
||||
{ fontSize: this.opts.textStyle.fontSize + 3 },
|
||||
this.opts.textStyleLarge
|
||||
)
|
||||
this.opts.textStyleActive = Object.assign(
|
||||
{},
|
||||
this.opts.textStyle,
|
||||
{ fill: this.opts.primaryColor },
|
||||
this.opts.textStyleActive
|
||||
)
|
||||
this.opts.textStyleSmallActive = Object.assign(
|
||||
{},
|
||||
this.opts.textStyleSmall,
|
||||
{ fill: this.opts.primaryColor },
|
||||
this.opts.textStyleSmallActive
|
||||
)
|
||||
this.opts.textStyleLargeActive = Object.assign(
|
||||
{},
|
||||
this.opts.textStyleLarge,
|
||||
{ fill: this.opts.primaryColor },
|
||||
this.opts.textStyleLargeActive
|
||||
)
|
||||
|
||||
Object.assign(this, this.opts)
|
||||
}
|
||||
@ -139,7 +172,6 @@ export default class Theme {
|
||||
* @return {Theme} Returns a newly created Theme object.
|
||||
*/
|
||||
static fromString(theme) {
|
||||
|
||||
if (theme && typeof theme === 'object') {
|
||||
return theme
|
||||
}
|
||||
@ -171,9 +203,7 @@ export default class Theme {
|
||||
* @extends Theme
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
|
||||
*/
|
||||
export class ThemeDark extends Theme {
|
||||
|
||||
}
|
||||
export class ThemeDark extends Theme {}
|
||||
|
||||
/**
|
||||
* Class that represents a PixiJS ThemeLight.
|
||||
@ -193,14 +223,12 @@ 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 })
|
||||
}
|
||||
}
|
||||
@ -223,14 +251,12 @@ export class ThemeLight extends Theme {
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
|
||||
*/
|
||||
export class ThemeRed extends Theme {
|
||||
|
||||
/**
|
||||
* Creates an instance of a ThemeRed.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
constructor() {
|
||||
|
||||
super({ primaryColor: 0xd92f31 })
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,7 @@ import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
|
||||
import { Capabilities } from '../capabilities.js'
|
||||
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
|
||||
|
||||
|
||||
export class Ticks {
|
||||
|
||||
get reservedPrefixes() {
|
||||
return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second']
|
||||
}
|
||||
@ -70,15 +68,19 @@ export class Ticks {
|
||||
visibleLast = end
|
||||
}
|
||||
}
|
||||
if (first == null)
|
||||
return info
|
||||
return { start: first, end: last, visibleStart: visibleFirst, visibleEnd: visibleLast, units: units }
|
||||
if (first == null) return info
|
||||
return {
|
||||
start: first,
|
||||
end: last,
|
||||
visibleStart: visibleFirst,
|
||||
visibleEnd: visibleLast,
|
||||
units: units
|
||||
}
|
||||
}
|
||||
|
||||
drawTick(timeline, x, y, date) {
|
||||
let visible = date > timeline.start && date < timeline.end
|
||||
if (!visible)
|
||||
return false
|
||||
if (!visible) return false
|
||||
timeline.drawTick(x)
|
||||
return true
|
||||
}
|
||||
@ -87,13 +89,24 @@ export class Ticks {
|
||||
return date.toLocaleDateString('de', format)
|
||||
}
|
||||
|
||||
draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks=false) {
|
||||
draw(
|
||||
timeline,
|
||||
range,
|
||||
width,
|
||||
height,
|
||||
available,
|
||||
format,
|
||||
nextFormat,
|
||||
level,
|
||||
extraTicks = false
|
||||
) {
|
||||
let first = null
|
||||
let last = null
|
||||
let keyedFormat = (format) ? format[this.formatKey] : null
|
||||
let keyedNextFormat = (nextFormat) ? nextFormat[this.formatKey] : null
|
||||
let redundant = (nextFormat) ? this.formatKey in nextFormat : false
|
||||
let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
|
||||
let keyedFormat = format ? format[this.formatKey] : null
|
||||
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null
|
||||
let redundant = nextFormat ? this.formatKey in nextFormat : false
|
||||
let fullyRedundant =
|
||||
keyedFormat != null && keyedFormat == keyedNextFormat
|
||||
let y = timeline.getY()
|
||||
for (let { start, end } of this.iterRanges(range)) {
|
||||
let x = timeline.toX(start)
|
||||
@ -110,31 +123,29 @@ export class Ticks {
|
||||
let nextX = timeline.toX(end) - 100
|
||||
if (x < 0 && nextX > -100 && !redundant) {
|
||||
xx = Math.min(4, nextX)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
xx -= 2
|
||||
}
|
||||
}
|
||||
else if (level > 0) {
|
||||
} else if (level > 0) {
|
||||
xx = x + available / 2
|
||||
}
|
||||
|
||||
if (!fullyRedundant) {
|
||||
timeline.ensureLabel(key, text,
|
||||
timeline.ensureLabel(
|
||||
key,
|
||||
text,
|
||||
{ x: xx, y: yy, align },
|
||||
FontInfo.small)
|
||||
FontInfo.small
|
||||
)
|
||||
}
|
||||
if (extraTicks)
|
||||
timeline.drawTick(x, -level)
|
||||
if (extraTicks) timeline.drawTick(x, -level)
|
||||
}
|
||||
if (timeline.visibleRange(start, end)) {
|
||||
if (first == null)
|
||||
first = start
|
||||
if (first == null) first = start
|
||||
last = end
|
||||
}
|
||||
}
|
||||
if (first == null)
|
||||
return null
|
||||
if (first == null) return null
|
||||
return { start: first, end: last }
|
||||
}
|
||||
|
||||
@ -149,7 +160,6 @@ export class Ticks {
|
||||
}
|
||||
|
||||
export class DecadeTicks extends Ticks {
|
||||
|
||||
get milliseconds() {
|
||||
return 10 * 365 * 24 * 60 * 60 * 1000
|
||||
}
|
||||
@ -182,14 +192,12 @@ export class DecadeTicks extends Ticks {
|
||||
}
|
||||
|
||||
export class YearTicks extends Ticks {
|
||||
|
||||
get milliseconds() {
|
||||
return 365 * 24 * 60 * 60 * 1000
|
||||
}
|
||||
|
||||
format(available) {
|
||||
if (available < 44)
|
||||
return { year: '2-digit', timeZone: 'UTC' }
|
||||
if (available < 44) return { year: '2-digit', timeZone: 'UTC' }
|
||||
return { year: 'numeric', timeZone: 'UTC' }
|
||||
}
|
||||
|
||||
@ -211,17 +219,14 @@ export class YearTicks extends Ticks {
|
||||
}
|
||||
|
||||
export class MonthTicks extends Ticks {
|
||||
|
||||
get milliseconds() {
|
||||
return (365 / 12) * 24 * 60 * 60 * 1000
|
||||
}
|
||||
|
||||
format(available) {
|
||||
let format = { month: 'narrow', timeZone: 'UTC' }
|
||||
if (available > 44)
|
||||
format.month = 'short'
|
||||
if (available > 66)
|
||||
format.year = '2-digit'
|
||||
if (available > 44) format.month = 'short'
|
||||
if (available > 66) format.year = '2-digit'
|
||||
if (available > 100) {
|
||||
format.month = 'long'
|
||||
format.year = 'numeric'
|
||||
@ -251,15 +256,13 @@ export class MonthTicks extends Ticks {
|
||||
}
|
||||
|
||||
export class DayTicks extends Ticks {
|
||||
|
||||
get milliseconds() {
|
||||
return 24 * 60 * 60 * 1000
|
||||
}
|
||||
|
||||
format(available) {
|
||||
let format = { day: 'numeric', timeZone: 'UTC' }
|
||||
if (available > 44)
|
||||
format.month = 'short'
|
||||
if (available > 44) format.month = 'short'
|
||||
if (available > 100) {
|
||||
format.month = 'long'
|
||||
format.year = '2-digit'
|
||||
@ -283,7 +286,11 @@ export class DayTicks extends Ticks {
|
||||
}
|
||||
|
||||
iterStart(start) {
|
||||
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
|
||||
return Dates.create(
|
||||
start.getFullYear(),
|
||||
start.getMonth(),
|
||||
start.getDate()
|
||||
)
|
||||
}
|
||||
|
||||
next(date) {
|
||||
@ -292,7 +299,6 @@ export class DayTicks extends Ticks {
|
||||
}
|
||||
|
||||
export class HourTicks extends Ticks {
|
||||
|
||||
get milliseconds() {
|
||||
return 60 * 60 * 1000
|
||||
}
|
||||
@ -325,17 +331,22 @@ export class HourTicks extends Ticks {
|
||||
}
|
||||
|
||||
dateKey(date) {
|
||||
return this.key + date.getFullYear()
|
||||
+ date.getMonth()
|
||||
+ date.getDate()
|
||||
+ date.getHours()
|
||||
return (
|
||||
this.key +
|
||||
date.getFullYear() +
|
||||
date.getMonth() +
|
||||
date.getDate() +
|
||||
date.getHours()
|
||||
)
|
||||
}
|
||||
|
||||
iterStart(start) {
|
||||
return Dates.create(start.getFullYear(),
|
||||
return Dates.create(
|
||||
start.getFullYear(),
|
||||
start.getMonth(),
|
||||
start.getDate(),
|
||||
start.getHours())
|
||||
start.getHours()
|
||||
)
|
||||
}
|
||||
|
||||
next(date) {
|
||||
@ -348,7 +359,6 @@ export class HourTicks extends Ticks {
|
||||
}
|
||||
|
||||
export class MinuteTicks extends Ticks {
|
||||
|
||||
get milliseconds() {
|
||||
return 60 * 1000
|
||||
}
|
||||
@ -378,19 +388,24 @@ export class MinuteTicks extends Ticks {
|
||||
}
|
||||
|
||||
dateKey(date) {
|
||||
return this.key + date.getFullYear()
|
||||
+ date.getMonth()
|
||||
+ date.getDate()
|
||||
+ date.getHours()
|
||||
+ date.getMinutes()
|
||||
return (
|
||||
this.key +
|
||||
date.getFullYear() +
|
||||
date.getMonth() +
|
||||
date.getDate() +
|
||||
date.getHours() +
|
||||
date.getMinutes()
|
||||
)
|
||||
}
|
||||
|
||||
iterStart(start) {
|
||||
return Dates.create(start.getFullYear(),
|
||||
return Dates.create(
|
||||
start.getFullYear(),
|
||||
start.getMonth(),
|
||||
start.getDate(),
|
||||
start.getHours(),
|
||||
start.getMinutes())
|
||||
start.getMinutes()
|
||||
)
|
||||
}
|
||||
|
||||
next(date) {
|
||||
@ -403,7 +418,6 @@ export class MinuteTicks extends Ticks {
|
||||
}
|
||||
|
||||
export class TimeTicks {
|
||||
|
||||
constructor(...ticks) {
|
||||
this.ticks = ticks
|
||||
}
|
||||
@ -435,9 +449,11 @@ export class TimeTicks {
|
||||
let amount = ticks.milliseconds / duration
|
||||
let available = amount * size
|
||||
availables.set(ticks, available)
|
||||
if (available < ticks.minWidth)
|
||||
break
|
||||
formats.set(ticks, (available < ticks.minLabelWidth) ? null : ticks.format(available))
|
||||
if (available < ticks.minWidth) break
|
||||
formats.set(
|
||||
ticks,
|
||||
available < ticks.minLabelWidth ? null : ticks.format(available)
|
||||
)
|
||||
nextFormats.set(previous, formats.get(ticks))
|
||||
previous = ticks
|
||||
visible.push(ticks)
|
||||
@ -445,12 +461,17 @@ export class TimeTicks {
|
||||
let level = 0
|
||||
let ranges = []
|
||||
for (let ticks of visible) {
|
||||
if (range == null)
|
||||
continue
|
||||
range = ticks.draw(timeline, range, width, height,
|
||||
if (range == null) continue
|
||||
range = ticks.draw(
|
||||
timeline,
|
||||
range,
|
||||
width,
|
||||
height,
|
||||
availables.get(ticks),
|
||||
formats.get(ticks),
|
||||
nextFormats.get(ticks), level)
|
||||
nextFormats.get(ticks),
|
||||
level
|
||||
)
|
||||
if (range) {
|
||||
ranges.push({ ticks, range })
|
||||
}
|
||||
@ -475,7 +496,6 @@ export class TimeTicks {
|
||||
}
|
||||
|
||||
export class ColorRanges {
|
||||
|
||||
constructor(label, color, ranges) {
|
||||
this.label = label
|
||||
this.color = color
|
||||
@ -502,9 +522,16 @@ export class ColorRanges {
|
||||
}
|
||||
|
||||
export default class Timeline extends BitmapLabeledGraphics {
|
||||
|
||||
constructor(width, height, { ticks = null,
|
||||
baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
|
||||
constructor(
|
||||
width,
|
||||
height,
|
||||
{
|
||||
ticks = null,
|
||||
baseLine = 0.5,
|
||||
showRange = true,
|
||||
throwDamping = 0.95
|
||||
} = {}
|
||||
) {
|
||||
super()
|
||||
this.wantedWidth = width
|
||||
this.wantedHeight = height
|
||||
@ -521,10 +548,12 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.deltas = []
|
||||
this.labelDates = []
|
||||
this.colorRanges = []
|
||||
this.rangeColors = new Cycle(Colors.eminence,
|
||||
this.rangeColors = new Cycle(
|
||||
Colors.eminence,
|
||||
Colors.steelblue,
|
||||
Colors.ochre,
|
||||
Colors.turquoise)
|
||||
Colors.turquoise
|
||||
)
|
||||
this.callbacks = []
|
||||
this.onTapCallbacks = []
|
||||
this.onDoubleTapCallbacks = []
|
||||
@ -536,18 +565,21 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.autoScroll = false
|
||||
this.direction = -1
|
||||
this.throwDamping = throwDamping
|
||||
this.timeticks = ticks || new TimeTicks(new DecadeTicks(),
|
||||
this.timeticks =
|
||||
ticks ||
|
||||
new TimeTicks(
|
||||
new DecadeTicks(),
|
||||
new YearTicks(),
|
||||
new MonthTicks(),
|
||||
new DayTicks())
|
||||
new DayTicks()
|
||||
)
|
||||
this.labelPrefix = '__'
|
||||
}
|
||||
|
||||
updateSelection() {
|
||||
if (this.visibleDate(this.start) && this.visibleDate(this.end)) {
|
||||
this.selection = [this.start, this.end]
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.timeticks.selectedRange(this)
|
||||
}
|
||||
|
||||
@ -593,8 +625,12 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
let cr = this.colorRanges[i]
|
||||
let label = cr.label
|
||||
cr.draw(this, w, h)
|
||||
let current = this.ensureLabel('colorRange:' + label, label,
|
||||
{ x: xx, y: yy, align: 'right' }, FontInfo.small)
|
||||
let current = this.ensureLabel(
|
||||
'colorRange:' + label,
|
||||
label,
|
||||
{ x: xx, y: yy, align: 'right' },
|
||||
FontInfo.small
|
||||
)
|
||||
let r = current.getBounds()
|
||||
xx -= r.width + 16
|
||||
|
||||
@ -623,7 +659,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.prepareLabels()
|
||||
this.updateColorRanges(w, h)
|
||||
|
||||
this.lineStyle(2, 0xFFFFFF)
|
||||
this.lineStyle(2, 0xffffff)
|
||||
if (this.start != null && this.end != null) {
|
||||
this.moveTo(this.toX(this.start), y)
|
||||
this.lineTo(this.toX(this.end), y)
|
||||
@ -631,32 +667,30 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.updateSelection()
|
||||
let selected = this.selection
|
||||
if (selected[0] != this.start && selected[1] != this.end) {
|
||||
if (this.showRange)
|
||||
this.drawSelectedRamge(selected)
|
||||
if (this.showRange) this.drawSelectedRamge(selected)
|
||||
}
|
||||
for (let callback of this.callbacks) {
|
||||
callback(this.scroll, this.zoom, this.selection)
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.moveTo(this.inset, y)
|
||||
this.lineTo(w - this.inset, y)
|
||||
}
|
||||
|
||||
if (this.progress != null && this.progress < 1) {
|
||||
this.lineStyle(2, 0xCCCCFF)
|
||||
this.lineStyle(2, 0xccccff)
|
||||
this.moveTo(this.inset, y)
|
||||
this.lineTo((w - this.inset) * this.progress, y)
|
||||
}
|
||||
}
|
||||
|
||||
totalWidth(bounded = false) {
|
||||
let w = this.wantedWidth - (2 * this.inset)
|
||||
let w = this.wantedWidth - 2 * this.inset
|
||||
return w * this.validZoom(this.zoom, bounded)
|
||||
}
|
||||
|
||||
validZoom(zoom, bounded = true) {
|
||||
let overshoot = (bounded) ? 1.0 : 2.0
|
||||
let overshoot = bounded ? 1.0 : 2.0
|
||||
zoom = Math.max(zoom, this.minZoom / overshoot)
|
||||
zoom = Math.min(zoom, this.maxZoom * overshoot)
|
||||
return zoom
|
||||
@ -690,7 +724,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
y = this.getY()
|
||||
}
|
||||
this.moveTo(x, y)
|
||||
this.lineTo(x, y - (this.tickHeight * direction * this.direction))
|
||||
this.lineTo(x, y - this.tickHeight * direction * this.direction)
|
||||
}
|
||||
|
||||
prepareLabels() {
|
||||
@ -710,24 +744,22 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
visibleDate(date, offset = 0) {
|
||||
if (date >= this.start && date <= this.end) {
|
||||
let x = this.toX(date) + offset
|
||||
return (x > 0 && x < this.wantedWidth)
|
||||
return x > 0 && x < this.wantedWidth
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
visibleRange(start, end) {
|
||||
let x = this.toX(start)
|
||||
if (x > this.wantedWidth)
|
||||
return false
|
||||
if (x > this.wantedWidth) return false
|
||||
x = this.toX(end)
|
||||
if (x < 0)
|
||||
return false
|
||||
if (x < 0) return false
|
||||
return true
|
||||
}
|
||||
|
||||
tickLabelOffset(direction = 1, level = 0) {
|
||||
let fs = FontInfo.small.fontSize
|
||||
let dh = fs + (level * (fs + 2))
|
||||
let dh = fs + level * (fs + 2)
|
||||
return this.direction * direction * dh
|
||||
}
|
||||
|
||||
@ -740,12 +772,16 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
let [label, date] = this.labelDates[i]
|
||||
let align = 'center' // (last == null) ? 'right' : 'left'
|
||||
let x = this.toX(date)
|
||||
let current = this.ensureLabel(this.labelPrefix + label, label,
|
||||
let current = this.ensureLabel(
|
||||
this.labelPrefix + label,
|
||||
label,
|
||||
{
|
||||
x: x, y: y,
|
||||
x: x,
|
||||
y: y,
|
||||
align
|
||||
},
|
||||
FontInfo.small)
|
||||
FontInfo.small
|
||||
)
|
||||
let r = current.getBounds()
|
||||
current.visible = !(last != null && r.x + r.width > last.x)
|
||||
if (current.visible) {
|
||||
@ -753,12 +789,26 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
last = r
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
let start = this.start.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' })
|
||||
let end = this.end.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' })
|
||||
this.ensureLabel(this.labelPrefix + 'start', start, { x: this.toX(this.start), y: h2 })
|
||||
this.ensureLabel(this.labelPrefix + 'end', end, { x: this.toX(this.end), y: h2, align: 'right' })
|
||||
} else {
|
||||
let start = this.start.toLocaleDateString('de', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric'
|
||||
})
|
||||
let end = this.end.toLocaleDateString('de', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric'
|
||||
})
|
||||
this.ensureLabel(this.labelPrefix + 'start', start, {
|
||||
x: this.toX(this.start),
|
||||
y: h2
|
||||
})
|
||||
this.ensureLabel(this.labelPrefix + 'end', end, {
|
||||
x: this.toX(this.end),
|
||||
y: h2,
|
||||
align: 'right'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -774,7 +824,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.killTweens()
|
||||
this.deltas = []
|
||||
this.validScroll()
|
||||
if (typeof ThrowPropsPlugin != "undefined") {
|
||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
||||
ThrowPropsPlugin.track(this, 'delta')
|
||||
}
|
||||
}
|
||||
@ -796,8 +846,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
}
|
||||
|
||||
onEnd(event, interaction) {
|
||||
|
||||
if (typeof ThrowPropsPlugin != "undefined") {
|
||||
if (typeof ThrowPropsPlugin != 'undefined') {
|
||||
let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
|
||||
ThrowPropsPlugin.untrack(this)
|
||||
}
|
||||
@ -818,11 +867,9 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
for (let key of interaction.ended.keys()) {
|
||||
if (interaction.isDoubleTap(key)) {
|
||||
this.onDoubleTap(event, interaction, key)
|
||||
}
|
||||
else if (interaction.isTap(key)) {
|
||||
} else if (interaction.isTap(key)) {
|
||||
this.onTap(event, interaction, key)
|
||||
}
|
||||
else if (interaction.isLongPress(key)) {
|
||||
} else if (interaction.isLongPress(key)) {
|
||||
this.onLongPress(event, interaction, key)
|
||||
}
|
||||
}
|
||||
@ -854,8 +901,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
_scrollMaximum(bounded) {
|
||||
let total = this.totalWidth(bounded)
|
||||
let limit = this.wantedWidth
|
||||
if (total > limit)
|
||||
return 0
|
||||
if (total > limit) return 0
|
||||
let w = limit - 2 * this.inset
|
||||
return (w - total) / 2
|
||||
}
|
||||
@ -873,7 +919,6 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.autoScroll = false
|
||||
}
|
||||
|
||||
|
||||
validScroll(bounded = true) {
|
||||
let minimum = this.scrollMinimum(bounded)
|
||||
let maximum = this.scrollMaximum(bounded)
|
||||
@ -898,8 +943,7 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
let newX = this.toX(date)
|
||||
tweens.scroll = this.scroll + anchor.x - newX
|
||||
this.zoom = oldZoom
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (this.zoom < this.minZoom) {
|
||||
tweens.zoom = this.minZoom
|
||||
}
|
||||
@ -911,7 +955,9 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
}
|
||||
}
|
||||
if (!isEmpty(tweens)) {
|
||||
tweens.onUpdate = () => { this.redraw() }
|
||||
tweens.onUpdate = () => {
|
||||
this.redraw()
|
||||
}
|
||||
TweenLite.to(this, 0.5, tweens).delay(0.1)
|
||||
return
|
||||
}
|
||||
@ -928,15 +974,14 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
let direction = event.detail < 0 || event.wheelDelta > 0
|
||||
let anchor = { x: event.clientX, y: event.clientY }
|
||||
const zoomFactor = 1.5
|
||||
this.onZoom((direction) ? zoomFactor : 1 / zoomFactor, anchor)
|
||||
this.onZoom(direction ? zoomFactor : 1 / zoomFactor, anchor)
|
||||
this.redraw()
|
||||
this.keepInBounds(0, anchor)
|
||||
}
|
||||
|
||||
showRanges(ranges, label = "Untitled", color = null) {
|
||||
showRanges(ranges, label = 'Untitled', color = null) {
|
||||
for (let cr of this.colorRanges) {
|
||||
if (cr.label == label)
|
||||
return
|
||||
if (cr.label == label) return
|
||||
}
|
||||
while (this.colorRanges.length >= this.rangeColors.length) {
|
||||
this.colorRanges.shift()
|
||||
@ -945,4 +990,3 @@ export default class Timeline extends BitmapLabeledGraphics {
|
||||
this.redraw()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,6 @@ 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.
|
||||
*
|
||||
@ -45,10 +44,11 @@ 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({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
minWidth: 0,
|
||||
minHeight: 0,
|
||||
padding: theme.padding / 2,
|
||||
@ -57,7 +57,9 @@ export default class Tooltip extends AbstractPopup {
|
||||
offsetLeft: 8,
|
||||
offsetTop: -8,
|
||||
delay: 0
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
opts.container = opts.container || opts.object
|
||||
|
||||
@ -79,7 +81,6 @@ export default class Tooltip extends AbstractPopup {
|
||||
* @return {Tooltip} A reference to the tooltip for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
super.setup()
|
||||
|
||||
// bind events this
|
||||
@ -109,7 +110,6 @@ export default class Tooltip extends AbstractPopup {
|
||||
let mouseoverObject = false
|
||||
|
||||
object.on('mouseover', e => {
|
||||
|
||||
this.timeout = window.setTimeout(() => {
|
||||
mouseoverObject = true
|
||||
this.visible = true
|
||||
@ -144,7 +144,6 @@ export default class Tooltip extends AbstractPopup {
|
||||
* @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
|
||||
|
||||
@ -29,7 +29,6 @@ import Theme from './theme.js'
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
|
||||
*/
|
||||
export default class Volatile {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Volatile.
|
||||
*
|
||||
@ -46,11 +45,12 @@ 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({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
object: null,
|
||||
direction: 'top', // top, right, bottom, left
|
||||
@ -60,7 +60,9 @@ export default class Volatile {
|
||||
duration: 1.5,
|
||||
ease: Quad.easeOut,
|
||||
destroyOnComplete: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
@ -90,7 +92,6 @@ export default class Volatile {
|
||||
* @return {Volatile} A reference to the volatile for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -100,7 +101,6 @@ export default class Volatile {
|
||||
* @return {Volatile} A reference to the volatile for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
@ -111,9 +111,7 @@ export default class Volatile {
|
||||
* @return {Volatile} A reference to the volatile for chaining.
|
||||
*/
|
||||
run() {
|
||||
|
||||
for (let object of this.objects) {
|
||||
|
||||
let x = object.x
|
||||
let y = object.y
|
||||
|
||||
@ -144,7 +142,6 @@ export default class Volatile {
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
|
||||
if (this.opts.onComplete) {
|
||||
this.opts.onComplete.call(object, object)
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
* shown.
|
||||
*/
|
||||
export default class Poppable {
|
||||
|
||||
/** Register the poppable element in a context. Closes previously registered ones.
|
||||
* @param {*} context
|
||||
*/
|
||||
@ -65,7 +64,7 @@ export default class Poppable {
|
||||
|
||||
/** All poppable must implement a close method. */
|
||||
close() {
|
||||
console.error("Must be implemented")
|
||||
console.error('Must be implemented')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
371
lib/popup.js
371
lib/popup.js
@ -1,5 +1,5 @@
|
||||
import { Elements } from "./utils.js"
|
||||
import Poppable from "./poppable.js"
|
||||
import { Elements } from './utils.js'
|
||||
import Poppable from './poppable.js'
|
||||
|
||||
/** A Popup that shows text labels, images, or html
|
||||
*/
|
||||
@ -36,16 +36,16 @@ export default class Popup extends Poppable {
|
||||
parent = null,
|
||||
content = null,
|
||||
context = window,
|
||||
fontSize = "1em",
|
||||
fontFamily = "Arial",
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
padding = 16,
|
||||
notchSize = 10,
|
||||
switchPos = false,
|
||||
minWidth = null,
|
||||
maxWidth = 800,
|
||||
backgroundColor = "#EEE",
|
||||
normalColor = "#444",
|
||||
notchPosition = "bottomCenter",
|
||||
backgroundColor = '#EEE',
|
||||
normalColor = '#444',
|
||||
notchPosition = 'bottomCenter',
|
||||
zIndex = 0,
|
||||
keepWithin = null,
|
||||
autoClose = true,
|
||||
@ -60,7 +60,7 @@ export default class Popup extends Poppable {
|
||||
onResize = null,
|
||||
onMove = null,
|
||||
noStyle = false,
|
||||
hideOnUp = true,
|
||||
hideOnUp = true
|
||||
} = {}) {
|
||||
super()
|
||||
this.context = context
|
||||
@ -108,38 +108,38 @@ export default class Popup extends Poppable {
|
||||
//console.log("Popup.setup", this.draggable)
|
||||
this.content = content
|
||||
this.items = {}
|
||||
this.element = document.createElement("div")
|
||||
this.element.classList.add("popup")
|
||||
this.element = document.createElement('div')
|
||||
this.element.classList.add('popup')
|
||||
this.setAlpha(this.element, 0)
|
||||
// this.element.style.opacity = 0
|
||||
Elements.addClass(this.element, "unselectable")
|
||||
this.notch = document.createElement("div")
|
||||
Elements.addClass(this.element, 'unselectable')
|
||||
this.notch = document.createElement('div')
|
||||
Elements.setStyle(this.notch, this.notchStyle())
|
||||
this.notch.className = "notch"
|
||||
this.notch.className = 'notch'
|
||||
this.setupDraggable()
|
||||
if (this.closeIcon) {
|
||||
let img = document.createElement("img")
|
||||
img.setAttribute("draggable", false)
|
||||
let img = document.createElement('img')
|
||||
img.setAttribute('draggable', false)
|
||||
img.src = this.closeIcon
|
||||
img.style.position = "absolute"
|
||||
img.style.right = "0px"
|
||||
img.style.top = "0px"
|
||||
img.style.width = "16px"
|
||||
img.style.height = "16px"
|
||||
img.style.position = 'absolute'
|
||||
img.style.right = '0px'
|
||||
img.style.top = '0px'
|
||||
img.style.width = '16px'
|
||||
img.style.height = '16px'
|
||||
img.onclick = e => {
|
||||
this.close()
|
||||
}
|
||||
this.element.appendChild(img)
|
||||
}
|
||||
if (this.resizeIcon) {
|
||||
let img = document.createElement("img")
|
||||
img.style.position = "absolute"
|
||||
img.style.right = "0px"
|
||||
img.style.bottom = "0px"
|
||||
img.style.width = "16px"
|
||||
img.style.height = "16px"
|
||||
let img = document.createElement('img')
|
||||
img.style.position = 'absolute'
|
||||
img.style.right = '0px'
|
||||
img.style.bottom = '0px'
|
||||
img.style.width = '16px'
|
||||
img.style.height = '16px'
|
||||
img.src = this.resizeIcon
|
||||
img.setAttribute("draggable", true)
|
||||
img.setAttribute('draggable', true)
|
||||
img.ondragstart = e => {
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
return true
|
||||
@ -147,27 +147,27 @@ export default class Popup extends Poppable {
|
||||
img.ondrag = e => {
|
||||
e.preventDefault()
|
||||
|
||||
let target = this.element.querySelector("iframe") || this.element
|
||||
let target =
|
||||
this.element.querySelector('iframe') || this.element
|
||||
let delta = {
|
||||
x: e.clientX - this.currentPos.x,
|
||||
y: e.clientY - this.currentPos.y
|
||||
}
|
||||
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
if (delta.x == 0 && delta.y == 0)
|
||||
return
|
||||
if (delta.x == 0 && delta.y == 0) return
|
||||
|
||||
let rect = target.getBoundingClientRect()
|
||||
let width = rect.width + delta.x
|
||||
let height = rect.height + delta.y
|
||||
target.style.width = width + "px"
|
||||
target.style.height = height + "px"
|
||||
target.style.width = width + 'px'
|
||||
target.style.height = height + 'px'
|
||||
|
||||
switch (this.notchPosition) {
|
||||
case "bottomLeft":
|
||||
case "bottomCenter":
|
||||
case 'bottomLeft':
|
||||
case 'bottomCenter':
|
||||
let bottom = parseFloat(this.element.style.bottom)
|
||||
this.element.style.bottom = bottom - delta.y + "px"
|
||||
this.element.style.bottom = bottom - delta.y + 'px'
|
||||
break
|
||||
default:
|
||||
break
|
||||
@ -181,27 +181,26 @@ export default class Popup extends Poppable {
|
||||
this.element.appendChild(img)
|
||||
}
|
||||
|
||||
|
||||
for (let key in content) {
|
||||
switch (key) {
|
||||
case "selector":
|
||||
case 'selector':
|
||||
break
|
||||
case "text":
|
||||
let text = document.createElement("span")
|
||||
case 'text':
|
||||
let text = document.createElement('span')
|
||||
this.element.appendChild(text)
|
||||
text.innerHTML = content[key]
|
||||
Elements.setStyle(text, { color: this.normalColor })
|
||||
Elements.addClass(text, "unselectable")
|
||||
Elements.addClass(text, "PopupContent")
|
||||
Elements.addClass(text, 'unselectable')
|
||||
Elements.addClass(text, 'PopupContent')
|
||||
this.insertedNode = text
|
||||
this.loaded = true
|
||||
break
|
||||
case "img":
|
||||
alert("img to be implemented")
|
||||
case 'img':
|
||||
alert('img to be implemented')
|
||||
break
|
||||
case "iframe":
|
||||
let iframe = document.createElement("iframe")
|
||||
iframe.setAttribute("frameBorder", 0)
|
||||
case 'iframe':
|
||||
let iframe = document.createElement('iframe')
|
||||
iframe.setAttribute('frameBorder', 0)
|
||||
iframe.src = content[key]
|
||||
iframe.onload = e => {
|
||||
let body = iframe.contentWindow.document.body
|
||||
@ -216,8 +215,8 @@ export default class Popup extends Poppable {
|
||||
})
|
||||
let w = Math.max(body.scrollWidth, body.offsetWidth)
|
||||
let h = Math.max(body.scrollHeight, body.offsetHeight)
|
||||
iframe.style.width = w + "px"
|
||||
iframe.style.height = h + "px"
|
||||
iframe.style.width = w + 'px'
|
||||
iframe.style.height = h + 'px'
|
||||
this.layoutAfterInsert()
|
||||
if (this.onload != null) {
|
||||
this.onload()
|
||||
@ -225,13 +224,13 @@ export default class Popup extends Poppable {
|
||||
this.loaded = true
|
||||
}
|
||||
this.element.appendChild(iframe)
|
||||
Elements.addClass(iframe, "PopupContent")
|
||||
Elements.addClass(iframe, 'PopupContent')
|
||||
this.insertIntoDOM()
|
||||
return
|
||||
case "html":
|
||||
case 'html':
|
||||
this.loaded = false
|
||||
let div = document.createElement("div")
|
||||
Elements.addClass(div, "PopupContent")
|
||||
let div = document.createElement('div')
|
||||
Elements.addClass(div, 'PopupContent')
|
||||
this.element.appendChild(div)
|
||||
div.innerHTML = content.html
|
||||
//console.log("insert", content)
|
||||
@ -242,8 +241,7 @@ export default class Popup extends Poppable {
|
||||
div.innerHTML = `<p style="color:red;">Popup content not found. Missing ${selector}</p>`
|
||||
this.insertedNode = div.firstElementChild
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.insertedNode = div.firstElementChild || div
|
||||
}
|
||||
this.setAlpha(this.insertedNode, 0)
|
||||
@ -252,9 +250,12 @@ export default class Popup extends Poppable {
|
||||
if (images.length > 0) {
|
||||
let count = 0
|
||||
for (let image of images) {
|
||||
if (!image.complete && !image.src.startsWith('data:')) {
|
||||
if (
|
||||
!image.complete &&
|
||||
!image.src.startsWith('data:')
|
||||
) {
|
||||
total += 1
|
||||
console.log("image not complete", image.src)
|
||||
console.log('image not complete', image.src)
|
||||
image.onload = e => {
|
||||
count += 1
|
||||
if (count == total) {
|
||||
@ -271,15 +272,15 @@ export default class Popup extends Poppable {
|
||||
this.loaded = true
|
||||
}
|
||||
break
|
||||
case "node":
|
||||
case 'node':
|
||||
this.loaded = true
|
||||
Elements.addClass(content.node, "PopupContent")
|
||||
Elements.addClass(content.node, 'PopupContent')
|
||||
this.element.appendChild(content.node)
|
||||
this.insertedNode = content.node
|
||||
this.setAlpha(this.insertedNode, 0)
|
||||
break
|
||||
default:
|
||||
alert("Unexpected content type: " + key)
|
||||
alert('Unexpected content type: ' + key)
|
||||
break
|
||||
}
|
||||
}
|
||||
@ -293,8 +294,7 @@ export default class Popup extends Poppable {
|
||||
let closing = this.closingEvent(e)
|
||||
if (closing) {
|
||||
this.close()
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.setupCloseHandler()
|
||||
}
|
||||
}
|
||||
@ -303,18 +303,36 @@ export default class Popup extends Poppable {
|
||||
let close = this.handleClose
|
||||
if (this.hideOnUp) {
|
||||
if (window.PointerEvent)
|
||||
this.parent.addEventListener("pointerup", close.bind(this), { capture: true, once: true })
|
||||
this.parent.addEventListener('pointerup', close.bind(this), {
|
||||
capture: true,
|
||||
once: true
|
||||
})
|
||||
else if (window.TouchEvent)
|
||||
this.parent.addEventListener("touchend", close.bind(this), { capture: true, once: true })
|
||||
this.parent.addEventListener('touchend', close.bind(this), {
|
||||
capture: true,
|
||||
once: true
|
||||
})
|
||||
else
|
||||
this.parent.addEventListener("mouseup", close.bind(this), { capture: true, once: true })
|
||||
this.parent.addEventListener('mouseup', close.bind(this), {
|
||||
capture: true,
|
||||
once: true
|
||||
})
|
||||
} else {
|
||||
if (window.PointerEvent)
|
||||
this.parent.addEventListener("pointerdown", close.bind(this), { capture: true, once: true })
|
||||
this.parent.addEventListener('pointerdown', close.bind(this), {
|
||||
capture: true,
|
||||
once: true
|
||||
})
|
||||
else if (window.TouchEvent)
|
||||
this.parent.addEventListener("touchstart", close.bind(this), { capture: true, once: true })
|
||||
this.parent.addEventListener('touchstart', close.bind(this), {
|
||||
capture: true,
|
||||
once: true
|
||||
})
|
||||
else
|
||||
this.parent.addEventListener("mousedown", close.bind(this), { capture: true, once: true })
|
||||
this.parent.addEventListener('mousedown', close.bind(this), {
|
||||
capture: true,
|
||||
once: true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -326,7 +344,7 @@ export default class Popup extends Poppable {
|
||||
|
||||
closingEvent(e) {
|
||||
if (this.interactive) {
|
||||
let node = e.target.closest(".PopupContent")
|
||||
let node = e.target.closest('.PopupContent')
|
||||
return node == null
|
||||
}
|
||||
return true
|
||||
@ -336,18 +354,19 @@ export default class Popup extends Poppable {
|
||||
let body = iframe.contentWindow.document.body
|
||||
let w = Math.max(body.scrollWidth, body.offsetWidth)
|
||||
let h = Math.max(body.scrollHeight, body.offsetHeight)
|
||||
iframe.style.width = w + "px"
|
||||
iframe.style.height = h + "px"
|
||||
iframe.style.width = w + 'px'
|
||||
iframe.style.height = h + 'px'
|
||||
}
|
||||
|
||||
setupDraggable() {
|
||||
if (this.draggable) {
|
||||
let target = this.element
|
||||
target.setAttribute("draggable", true)
|
||||
target.setAttribute('draggable', true)
|
||||
target.ondragstart = e => {
|
||||
this.currentPos = { x: e.clientX, y: e.clientY }
|
||||
var img = document.createElement('img')
|
||||
img.src = 'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
img.src =
|
||||
'data:image/gifbase64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
e.dataTransfer.setDragImage(img, 0, 0)
|
||||
}
|
||||
target.ondrag = e => {
|
||||
@ -378,9 +397,7 @@ export default class Popup extends Poppable {
|
||||
}
|
||||
}
|
||||
|
||||
moveDragged(target) {
|
||||
|
||||
}
|
||||
moveDragged(target) {}
|
||||
|
||||
insertIntoDOM(layout = true) {
|
||||
this.setAlpha(this.insertedNode, 0)
|
||||
@ -398,7 +415,6 @@ export default class Popup extends Poppable {
|
||||
*/
|
||||
layout() {}
|
||||
|
||||
|
||||
remove() {
|
||||
if (this.parent.contains(this.element))
|
||||
this.parent.removeChild(this.element)
|
||||
@ -412,8 +428,7 @@ export default class Popup extends Poppable {
|
||||
this.unregister(this.context)
|
||||
if (this.closeCommand) {
|
||||
this.closeCommand(this, () => this.remove())
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.remove()
|
||||
}
|
||||
}
|
||||
@ -427,10 +442,10 @@ export default class Popup extends Poppable {
|
||||
* @memberof Popup
|
||||
*/
|
||||
setAlpha(targets, value) {
|
||||
let objs = (targets instanceof Array) ? targets : [targets]
|
||||
let objs = targets instanceof Array ? targets : [targets]
|
||||
for (let obj of objs) {
|
||||
if (value) {
|
||||
obj.style.transition = "opacity 0.2s ease-in"
|
||||
obj.style.transition = 'opacity 0.2s ease-in'
|
||||
}
|
||||
obj.style.opacity = value
|
||||
}
|
||||
@ -459,12 +474,11 @@ export default class Popup extends Poppable {
|
||||
*/
|
||||
showAt(content, point) {
|
||||
this.setup(content)
|
||||
console.log("showAt", this.loaded)
|
||||
console.log('showAt', this.loaded)
|
||||
if (this.loaded) {
|
||||
this.placeAt(point)
|
||||
this.fadeIn()
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.setAlpha([this.element, this.insertedNode], 0)
|
||||
this.onload = () => {
|
||||
this.layoutAfterInsert()
|
||||
@ -483,7 +497,7 @@ export default class Popup extends Poppable {
|
||||
* @memberof Popup
|
||||
*/
|
||||
placeOrigin(x, y) {
|
||||
Elements.setStyle(this.element, { left: x + "px", top: y + "px" })
|
||||
Elements.setStyle(this.element, { left: x + 'px', top: y + 'px' })
|
||||
}
|
||||
|
||||
/**
|
||||
@ -523,25 +537,24 @@ export default class Popup extends Poppable {
|
||||
* @memberof Popup
|
||||
*/
|
||||
notchPositionWithin(x, y) {
|
||||
let horizontal = "Center"
|
||||
let vertical = "center"
|
||||
let horizontal = 'Center'
|
||||
let vertical = 'center'
|
||||
let { width, height } = this.withinDimensions()
|
||||
let local = this.localPointWithin(x, y, width, height)
|
||||
if (local.y < height * 0.33) {
|
||||
vertical = "top"
|
||||
vertical = 'top'
|
||||
}
|
||||
if (local.y > height * 0.66) {
|
||||
vertical = "bottom"
|
||||
vertical = 'bottom'
|
||||
}
|
||||
if (local.x < width * 0.33) {
|
||||
horizontal = "Left"
|
||||
horizontal = 'Left'
|
||||
}
|
||||
if (local.x > width * 0.66) {
|
||||
horizontal = "Right"
|
||||
horizontal = 'Right'
|
||||
}
|
||||
let result = vertical + horizontal
|
||||
if (result == "centerCenter")
|
||||
return this.notchPosition
|
||||
if (result == 'centerCenter') return this.notchPosition
|
||||
return result
|
||||
}
|
||||
|
||||
@ -553,37 +566,39 @@ export default class Popup extends Poppable {
|
||||
notchPosition = this.notchPositionWithin(x, y)
|
||||
}
|
||||
Elements.setStyle(this.notch, this.notchStyle(notchPosition))
|
||||
this.notch.className = "notch " + notchPosition
|
||||
this.notch.className = 'notch ' + notchPosition
|
||||
let { width, height } = this.localDimensions()
|
||||
|
||||
//if targetBoundingBox is set, popup is placed next to the rectangle
|
||||
if (this.targetBoundingBox) {
|
||||
let bbTop = this.targetBoundingBox.y
|
||||
let bbBottom = this.targetBoundingBox.y + this.targetBoundingBox.height
|
||||
let bbBottom =
|
||||
this.targetBoundingBox.y + this.targetBoundingBox.height
|
||||
let bbLeft = this.targetBoundingBox.x
|
||||
let bbRight = this.targetBoundingBox.x + this.targetBoundingBox.width
|
||||
let bbRight =
|
||||
this.targetBoundingBox.x + this.targetBoundingBox.width
|
||||
//console.log("place popup with bb set:", x, y, bbTop, bbBottom, bbLeft, bbRight)
|
||||
switch (notchPosition) {
|
||||
case "bottomLeft":
|
||||
case "bottomRight":
|
||||
case "bottomCenter":
|
||||
case 'bottomLeft':
|
||||
case 'bottomRight':
|
||||
case 'bottomCenter':
|
||||
y = bbTop
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
x = (bbLeft + bbRight) / 2
|
||||
break
|
||||
case "topLeft":
|
||||
case "topRight":
|
||||
case "topCenter":
|
||||
case 'topLeft':
|
||||
case 'topRight':
|
||||
case 'topCenter':
|
||||
y = bbBottom
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
x = (bbLeft + bbRight) / 2
|
||||
break
|
||||
case "centerRight":
|
||||
case 'centerRight':
|
||||
x = bbLeft
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
y = (bbTop + bbBottom) / 2
|
||||
break
|
||||
case "centerLeft":
|
||||
case 'centerLeft':
|
||||
x = bbRight
|
||||
if (!this.useEventPosWithBoundingBox)
|
||||
y = (bbTop + bbBottom) / 2
|
||||
@ -595,14 +610,14 @@ export default class Popup extends Poppable {
|
||||
|
||||
//calculate position depending on several (optional) parameters
|
||||
switch (notchPosition) {
|
||||
case "bottomLeft":
|
||||
case 'bottomLeft':
|
||||
x -= this.padding
|
||||
x -= this.notchSize
|
||||
y -= height
|
||||
y -= this.notchSize * 2
|
||||
y -= this.posOffset
|
||||
break
|
||||
case "bottomRight":
|
||||
case 'bottomRight':
|
||||
x -= width
|
||||
x += this.padding
|
||||
x += this.notchSize
|
||||
@ -610,36 +625,36 @@ export default class Popup extends Poppable {
|
||||
y -= this.notchSize * 2
|
||||
y -= this.posOffset
|
||||
break
|
||||
case "bottomCenter":
|
||||
case 'bottomCenter':
|
||||
x -= width / 2
|
||||
y -= height
|
||||
y -= this.notchSize * 2
|
||||
y -= this.posOffset
|
||||
break
|
||||
case "topLeft":
|
||||
case 'topLeft':
|
||||
x -= this.padding
|
||||
x -= this.notchSize
|
||||
y += this.notchSize * 2
|
||||
y += this.posOffset
|
||||
break
|
||||
case "topRight":
|
||||
case 'topRight':
|
||||
x -= width
|
||||
x += this.padding
|
||||
x += this.notchSize
|
||||
y += this.notchSize * 2
|
||||
y += this.posOffset
|
||||
break
|
||||
case "topCenter":
|
||||
case 'topCenter':
|
||||
x -= width / 2
|
||||
y += this.notchSize * 2
|
||||
y += this.posOffset
|
||||
break
|
||||
case "centerRight":
|
||||
case 'centerRight':
|
||||
x -= width + this.notchSize * 2
|
||||
x -= this.posOffset
|
||||
y -= height / 2
|
||||
break
|
||||
case "centerLeft":
|
||||
case 'centerLeft':
|
||||
//console.log("height", height)
|
||||
y -= height / 2
|
||||
x += this.notchSize * 2
|
||||
@ -667,23 +682,23 @@ export default class Popup extends Poppable {
|
||||
defaultStyle() {
|
||||
let padding = this.padding
|
||||
let style = {
|
||||
maxWidth: this.maxWidth + "px",
|
||||
maxWidth: this.maxWidth + 'px',
|
||||
zIndex: this.zIndex,
|
||||
position: "absolute",
|
||||
position: 'absolute'
|
||||
}
|
||||
if (this.minWidth) {
|
||||
style.minWidth = this.minWidth + "px"
|
||||
style.minWidth = this.minWidth + 'px'
|
||||
}
|
||||
if (!this.noStyle) {
|
||||
Object.assign(style, {
|
||||
borderRadius: Math.round(this.padding / 2) + "px",
|
||||
borderRadius: Math.round(this.padding / 2) + 'px',
|
||||
backgroundColor: this.backgroundColor,
|
||||
padding: this.padding + "px",
|
||||
boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)",
|
||||
padding: this.padding + 'px',
|
||||
boxShadow: '0 10px 15px rgba(0, 0, 0, 0.3)',
|
||||
fontFamily: this.fontFamily,
|
||||
fontSize: this.fontSize,
|
||||
stroke: "black",
|
||||
fill: "white"
|
||||
stroke: 'black',
|
||||
fill: 'white'
|
||||
})
|
||||
}
|
||||
|
||||
@ -700,58 +715,58 @@ export default class Popup extends Poppable {
|
||||
let height = 0
|
||||
let left = this.padding
|
||||
let size = this.localDimensions()
|
||||
if (notchPosition.endsWith("Right")) {
|
||||
if (notchPosition.endsWith('Right')) {
|
||||
left = size.width - this.padding - this.notchSize * 2
|
||||
}
|
||||
if (notchPosition.endsWith("Center")) {
|
||||
if (notchPosition.endsWith('Center')) {
|
||||
left = size.width / 2 - this.notchSize
|
||||
}
|
||||
left = Math.round(left) + 'px'
|
||||
let borderBottom = 0
|
||||
let borderTop = 0
|
||||
|
||||
if (notchPosition.startsWith("bottom")) {
|
||||
if (notchPosition.startsWith('bottom')) {
|
||||
if (this.noStyle) {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
bottom: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderStyle: "solid",
|
||||
borderTopWidth: this.notchSize + "px",
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
bottom: -this.notchSize + 'px',
|
||||
position: 'absolute',
|
||||
borderStyle: 'solid',
|
||||
borderTopWidth: this.notchSize + 'px',
|
||||
borderRight: this.notchSize + 'px solid transparent',
|
||||
borderLeft: this.notchSize + 'px solid transparent',
|
||||
borderBottom: 0
|
||||
}
|
||||
|
||||
} else {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
boxShadow: "0 12px 15px rgba(0, 0, 0, 0.1)",
|
||||
bottom: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderTop: this.notchSize + "px solid " + this.backgroundColor,
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
|
||||
bottom: -this.notchSize + 'px',
|
||||
position: 'absolute',
|
||||
borderTop:
|
||||
this.notchSize + 'px solid ' + this.backgroundColor,
|
||||
borderRight: this.notchSize + 'px solid transparent',
|
||||
borderLeft: this.notchSize + 'px solid transparent',
|
||||
borderBottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
if (notchPosition.startsWith("top")) {
|
||||
if (notchPosition.startsWith('top')) {
|
||||
if (this.noStyle) {
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
top: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderStyle: "solid",
|
||||
borderBottomWidth: this.notchSize + "px",
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
top: -this.notchSize + 'px',
|
||||
position: 'absolute',
|
||||
borderStyle: 'solid',
|
||||
borderBottomWidth: this.notchSize + 'px',
|
||||
borderRight: this.notchSize + 'px solid transparent',
|
||||
borderLeft: this.notchSize + 'px solid transparent',
|
||||
borderTop: 0
|
||||
}
|
||||
} else {
|
||||
@ -759,31 +774,29 @@ export default class Popup extends Poppable {
|
||||
width,
|
||||
height,
|
||||
left,
|
||||
top: -this.notchSize + "px",
|
||||
position: "absolute",
|
||||
borderBottom: this.notchSize + "px solid " + this.backgroundColor,
|
||||
borderRight: this.notchSize + "px solid transparent",
|
||||
borderLeft: this.notchSize + "px solid transparent",
|
||||
top: -this.notchSize + 'px',
|
||||
position: 'absolute',
|
||||
borderBottom:
|
||||
this.notchSize + 'px solid ' + this.backgroundColor,
|
||||
borderRight: this.notchSize + 'px solid transparent',
|
||||
borderLeft: this.notchSize + 'px solid transparent',
|
||||
borderTop: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.noStyle) {
|
||||
|
||||
if (notchPosition.endsWith("Left")) {
|
||||
left = -this.notchSize * 2 + "px"
|
||||
if (notchPosition.endsWith('Left')) {
|
||||
left = -this.notchSize * 2 + 'px'
|
||||
}
|
||||
|
||||
if (notchPosition.endsWith("Right")) {
|
||||
left = size.width + "px"
|
||||
if (notchPosition.endsWith('Right')) {
|
||||
left = size.width + 'px'
|
||||
}
|
||||
|
||||
|
||||
let top = size.height / 2 - this.notchSize
|
||||
top = Math.round(top) + 'px'
|
||||
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
@ -791,29 +804,30 @@ export default class Popup extends Poppable {
|
||||
top,
|
||||
borderRightWidth: this.notchSize,
|
||||
borderLeftWidth: this.notchSize,
|
||||
position: "absolute",
|
||||
borderTop: this.notchSize + "px solid transparent",
|
||||
borderBottom: this.notchSize + "px solid transparent"
|
||||
position: 'absolute',
|
||||
borderTop: this.notchSize + 'px solid transparent',
|
||||
borderBottom: this.notchSize + 'px solid transparent'
|
||||
}
|
||||
|
||||
} else {
|
||||
let borderRight = this.notchSize + "px solid transparent"
|
||||
let borderLeft = this.notchSize + "px solid transparent"
|
||||
let borderRight = this.notchSize + 'px solid transparent'
|
||||
let borderLeft = this.notchSize + 'px solid transparent'
|
||||
let top = size.height / 2 - this.notchSize
|
||||
if (notchPosition.endsWith("Left")) {
|
||||
left = -this.notchSize * 2 + "px"
|
||||
borderRight = this.notchSize + "px solid " + this.backgroundColor
|
||||
this.element.style.boxShadow = "15px 10px 15px rgba(0, 0, 0, 0.3)"
|
||||
if (notchPosition.endsWith('Left')) {
|
||||
left = -this.notchSize * 2 + 'px'
|
||||
borderRight =
|
||||
this.notchSize + 'px solid ' + this.backgroundColor
|
||||
this.element.style.boxShadow =
|
||||
'15px 10px 15px rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
if (notchPosition.endsWith("Right")) {
|
||||
left = size.width + "px"
|
||||
borderLeft = this.notchSize + "px solid " + this.backgroundColor
|
||||
this.element.style.boxShadow = "15px 5px 15px rgba(0, 0, 0, 0.3)"
|
||||
if (notchPosition.endsWith('Right')) {
|
||||
left = size.width + 'px'
|
||||
borderLeft = this.notchSize + 'px solid ' + this.backgroundColor
|
||||
this.element.style.boxShadow =
|
||||
'15px 5px 15px rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
|
||||
top = Math.round(top) + 'px'
|
||||
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
@ -822,9 +836,9 @@ export default class Popup extends Poppable {
|
||||
borderRight,
|
||||
borderLeft,
|
||||
// boxShadow,
|
||||
position: "absolute",
|
||||
borderTop: this.notchSize + "px solid transparent",
|
||||
borderBottom: this.notchSize + "px solid transparent"
|
||||
position: 'absolute',
|
||||
borderTop: this.notchSize + 'px solid transparent',
|
||||
borderBottom: this.notchSize + 'px solid transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -842,16 +856,16 @@ export default class Popup extends Poppable {
|
||||
{
|
||||
parent = null,
|
||||
context = window,
|
||||
fontSize = "1em",
|
||||
fontFamily = "Arial",
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
padding = 16,
|
||||
notchSize = 10,
|
||||
switchPos = false,
|
||||
minWidth = null,
|
||||
maxWidth = 800,
|
||||
backgroundColor = "#EEE",
|
||||
backgroundColor = '#EEE',
|
||||
zIndex = 0,
|
||||
normalColor = "#444",
|
||||
normalColor = '#444',
|
||||
closeIcon = null,
|
||||
resizeIcon = null,
|
||||
closeCommand = null,
|
||||
@ -866,9 +880,8 @@ export default class Popup extends Poppable {
|
||||
onMove = null
|
||||
} = {}
|
||||
) {
|
||||
|
||||
|
||||
let notchPosition = (switchPos && point.y < 50) ? "topCenter" : "bottomCenter"
|
||||
let notchPosition =
|
||||
switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'
|
||||
let popup = new Popup({
|
||||
parent,
|
||||
context,
|
||||
|
||||
113
lib/popupmenu.js
113
lib/popupmenu.js
@ -20,7 +20,8 @@ export default class PopupMenu extends Popup {
|
||||
* @param {DOM Element} keepWithin - The container to stay within
|
||||
* @param {boolean} autoClose - Autoclose the menu after selecting an item
|
||||
*/
|
||||
constructor({ parent = null,
|
||||
constructor({
|
||||
parent = null,
|
||||
commands = null,
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
@ -35,8 +36,20 @@ export default class PopupMenu extends Popup {
|
||||
highlightColor = 'black',
|
||||
notchPosition = 'bottomLeft',
|
||||
keepWithin = null,
|
||||
autoClose = true } = {}) {
|
||||
super({ parent, fontSize, fontFamily, padding, notchSize, notchPosition, backgroundColor, keepWithin, normalColor, autoClose })
|
||||
autoClose = true
|
||||
} = {}) {
|
||||
super({
|
||||
parent,
|
||||
fontSize,
|
||||
fontFamily,
|
||||
padding,
|
||||
notchSize,
|
||||
notchPosition,
|
||||
backgroundColor,
|
||||
keepWithin,
|
||||
normalColor,
|
||||
autoClose
|
||||
})
|
||||
this.commands = commands
|
||||
this.zIndex = zIndex
|
||||
this.switchPos = switchPos
|
||||
@ -50,7 +63,6 @@ export default class PopupMenu extends Popup {
|
||||
* @return {PopupMenu} this
|
||||
*/
|
||||
setup(commands) {
|
||||
|
||||
this.commands = commands
|
||||
this.items = {}
|
||||
this.element = document.createElement('div')
|
||||
@ -63,14 +75,25 @@ export default class PopupMenu extends Popup {
|
||||
this.element.appendChild(item)
|
||||
item.innerHTML = key
|
||||
item.style.paddingBottom = item.style.paddingTop = this.spacing
|
||||
Elements.setStyle(item, { color: this.normalColor, cursor: 'default' })
|
||||
Elements.setStyle(item, {
|
||||
color: this.normalColor,
|
||||
cursor: 'default'
|
||||
})
|
||||
Elements.addClass(item, 'unselectable')
|
||||
Elements.addClass(item, 'popupMenuItem')
|
||||
this.items[key] = item
|
||||
item.onclick = (event) => { this.perform(key) }
|
||||
item.ontap = (event) => { this.perform(key) }
|
||||
item.onmouseover = (event) => { this.over(event, key) }
|
||||
item.onmouseout = (event) => { this.out(event, key) }
|
||||
item.onclick = event => {
|
||||
this.perform(key)
|
||||
}
|
||||
item.ontap = event => {
|
||||
this.perform(key)
|
||||
}
|
||||
item.onmouseover = event => {
|
||||
this.over(event, key)
|
||||
}
|
||||
item.onmouseout = event => {
|
||||
this.out(event, key)
|
||||
}
|
||||
}
|
||||
|
||||
this.element.appendChild(this.notch)
|
||||
@ -100,7 +123,7 @@ export default class PopupMenu extends Popup {
|
||||
*/
|
||||
update(key, highlight = false) {
|
||||
let text = this.items[key]
|
||||
text.style.color = (highlight) ? this.highlightColor : this.normalColor
|
||||
text.style.color = highlight ? this.highlightColor : this.normalColor
|
||||
}
|
||||
|
||||
/** Mouse over handöer.
|
||||
@ -146,7 +169,11 @@ export default class PopupMenu extends Popup {
|
||||
* @param {string} normalColor - The color of normal menu items as CSS value
|
||||
* @param {boolean} autoClose - Autoclose the menu after selecting an item
|
||||
*/
|
||||
static open(commands, point, { parent = null,
|
||||
static open(
|
||||
commands,
|
||||
point,
|
||||
{
|
||||
parent = null,
|
||||
context = window,
|
||||
fontSize = '1em',
|
||||
fontFamily = 'Arial',
|
||||
@ -159,31 +186,54 @@ export default class PopupMenu extends Popup {
|
||||
keepWithin = null,
|
||||
backgroundColor = '#EEE',
|
||||
normalColor = '#444',
|
||||
autoClose = true } = {}) {
|
||||
|
||||
autoClose = true
|
||||
} = {}
|
||||
) {
|
||||
let registered = Poppable.get(context)
|
||||
if (registered) {
|
||||
this.closePopup()
|
||||
return
|
||||
}
|
||||
console.log("open", point)
|
||||
let notchPosition = (point.y < 50 && switchPos) ? 'topCenter' : 'bottomCenter'
|
||||
console.log('open', point)
|
||||
let notchPosition =
|
||||
point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
|
||||
let popup = new PopupMenu({
|
||||
parent, fontSize, padding, zIndex, spacing, switchPos, notchSize,
|
||||
parent,
|
||||
fontSize,
|
||||
padding,
|
||||
zIndex,
|
||||
spacing,
|
||||
switchPos,
|
||||
notchSize,
|
||||
notchPosition,
|
||||
maxWidth, backgroundColor, normalColor,
|
||||
notchPosition, keepWithin, autoClose
|
||||
maxWidth,
|
||||
backgroundColor,
|
||||
normalColor,
|
||||
notchPosition,
|
||||
keepWithin,
|
||||
autoClose
|
||||
})
|
||||
popup.showAt(commands, point)
|
||||
popup.register(context)
|
||||
popup.closeEventListener = (e) => {
|
||||
if (this.eventOutside(e))
|
||||
this.closePopup(context)
|
||||
popup.closeEventListener = e => {
|
||||
if (this.eventOutside(e)) this.closePopup(context)
|
||||
}
|
||||
if (autoClose) {
|
||||
context.addEventListener('mousedown', popup.closeEventListener, true)
|
||||
context.addEventListener('touchstart', popup.closeEventListener, true)
|
||||
context.addEventListener('pointerdown', popup.closeEventListener, true)
|
||||
context.addEventListener(
|
||||
'mousedown',
|
||||
popup.closeEventListener,
|
||||
true
|
||||
)
|
||||
context.addEventListener(
|
||||
'touchstart',
|
||||
popup.closeEventListener,
|
||||
true
|
||||
)
|
||||
context.addEventListener(
|
||||
'pointerdown',
|
||||
popup.closeEventListener,
|
||||
true
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,9 +248,18 @@ export default class PopupMenu extends Popup {
|
||||
let registered = Poppable.get(context)
|
||||
if (registered) {
|
||||
registered.close()
|
||||
context.removeEventListener('mousedown', registered.closeEventListener)
|
||||
context.removeEventListener('touchstart', registered.closeEventListener)
|
||||
context.removeEventListener('pointerdown', registered.closeEventListener)
|
||||
context.removeEventListener(
|
||||
'mousedown',
|
||||
registered.closeEventListener
|
||||
)
|
||||
context.removeEventListener(
|
||||
'touchstart',
|
||||
registered.closeEventListener
|
||||
)
|
||||
context.removeEventListener(
|
||||
'pointerdown',
|
||||
registered.closeEventListener
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
145
lib/scatter.js
145
lib/scatter.js
@ -9,16 +9,11 @@ import { Capabilities } from './capabilities.js'
|
||||
|
||||
/** This interface allows scatters to delegate tap events to other objects. */
|
||||
export class ITapDelegate extends Interface {
|
||||
|
||||
/** This method must be defined by the delegate. It handles the tap event. */
|
||||
tap(event) {
|
||||
|
||||
}
|
||||
tap(event) {}
|
||||
|
||||
/** Tells the delegate that it should handle standard click events. */
|
||||
handleClicks() {
|
||||
|
||||
}
|
||||
handleClicks() {}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -70,7 +65,7 @@ export class ScatterEvent extends BaseEvent {
|
||||
|
||||
toString() {
|
||||
return (
|
||||
'Event(\'scatterTransformed\', scale: ' +
|
||||
"Event('scatterTransformed', scale: " +
|
||||
this.scale +
|
||||
' about: ' +
|
||||
this.about.x +
|
||||
@ -145,7 +140,12 @@ class Throwable {
|
||||
// Avoid division by zero errors later on
|
||||
// and consider the number of involved pointers sind addVelocity will be called by the
|
||||
// onMove events
|
||||
let velocity = { t: t, dt: dt, dx: delta.x / delta.number, dy: delta.y / delta.number }
|
||||
let velocity = {
|
||||
t: t,
|
||||
dt: dt,
|
||||
dx: delta.x / delta.number,
|
||||
dy: delta.y / delta.number
|
||||
}
|
||||
this.velocities.push(velocity)
|
||||
while (this.velocities.length > buffer) {
|
||||
this.velocities.shift()
|
||||
@ -241,8 +241,8 @@ class Throwable {
|
||||
// damping, collison detection, etc. here
|
||||
let next = Points.multiplyScalar(velocity, this.throwDamping)
|
||||
return {
|
||||
x: (this.movableX) ? next.x : 0,
|
||||
y: (this.movableY) ? next.y : 0
|
||||
x: this.movableX ? next.x : 0,
|
||||
y: this.movableY ? next.y : 0
|
||||
}
|
||||
}
|
||||
|
||||
@ -283,7 +283,7 @@ export class AbstractScatter extends Throwable {
|
||||
onClose = null,
|
||||
onThrowFinished = null,
|
||||
scaleAutoClose = false,
|
||||
scaleCloseThreshold = 0.10,
|
||||
scaleCloseThreshold = 0.1,
|
||||
scaleCloseBuffer = 0.05,
|
||||
maxRotation = Angle.degree2radian(5),
|
||||
useLowPassFilter = true
|
||||
@ -395,8 +395,8 @@ export class AbstractScatter extends Throwable {
|
||||
}
|
||||
|
||||
get polygon() {
|
||||
let w2 = this.width * this.scale / 2
|
||||
let h2 = this.height * this.scale / 2
|
||||
let w2 = (this.width * this.scale) / 2
|
||||
let h2 = (this.height * this.scale) / 2
|
||||
let center = this.center
|
||||
let polygon = new Polygon(center)
|
||||
polygon.addPoint({ x: -w2, y: -h2 })
|
||||
@ -409,11 +409,9 @@ export class AbstractScatter extends Throwable {
|
||||
|
||||
isOutside() {
|
||||
let stagePolygon = this.containerPolygon
|
||||
if (stagePolygon == null)
|
||||
return false
|
||||
if (stagePolygon == null) return false
|
||||
let polygon = this.polygon
|
||||
if (polygon == null)
|
||||
return false
|
||||
if (polygon == null) return false
|
||||
let result = stagePolygon.intersectsWith(polygon)
|
||||
return result === false || result.overlap < this.throwVisibility
|
||||
}
|
||||
@ -498,10 +496,18 @@ export class AbstractScatter extends Throwable {
|
||||
|
||||
_checkAutoClose() {
|
||||
if (this.scaleAutoClose)
|
||||
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
|
||||
this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) })
|
||||
if (
|
||||
this.scale <
|
||||
this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
|
||||
) {
|
||||
this.zoom(this.minScale, {
|
||||
animate: 0.2,
|
||||
onComplete: this.close.bind(this)
|
||||
})
|
||||
} else if (this.scale < this.minScale + this.scaleCloseThreshold) {
|
||||
this.zoom(this.minScale + this.scaleCloseThreshold, { animate: 0.4 })
|
||||
this.zoom(this.minScale + this.scaleCloseThreshold, {
|
||||
animate: 0.4
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -609,9 +615,15 @@ export class AbstractScatter extends Throwable {
|
||||
let origin = this.rotationOrigin
|
||||
let beta = Points.angle(origin, anchor)
|
||||
let distance = Points.distance(origin, anchor)
|
||||
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom)
|
||||
let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(
|
||||
zoom
|
||||
)
|
||||
|
||||
let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom)
|
||||
let newOrigin = Points.arc(
|
||||
anchor,
|
||||
beta + rotate,
|
||||
distance * thresholdedZoom
|
||||
)
|
||||
let extra = Points.subtract(newOrigin, origin)
|
||||
let offset = Points.subtract(anchor, origin)
|
||||
this._move(offset)
|
||||
@ -661,8 +673,7 @@ export class AbstractScatter extends Throwable {
|
||||
zoom = scale / this.scale
|
||||
}
|
||||
|
||||
if (this.scaleAutoClose)
|
||||
this._updateTransparency()
|
||||
if (this.scaleAutoClose) this._updateTransparency()
|
||||
|
||||
return { zoom, scale }
|
||||
}
|
||||
@ -675,8 +686,10 @@ export class AbstractScatter extends Throwable {
|
||||
}
|
||||
|
||||
calculateScaleTransparency() {
|
||||
let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold
|
||||
transparency = (transparency > 1) ? 1 : (transparency < 0) ? 0 : transparency
|
||||
let transparency =
|
||||
(this.scale - this.minScale) / this.scaleCloseThreshold
|
||||
transparency =
|
||||
transparency > 1 ? 1 : transparency < 0 ? 0 : transparency
|
||||
return transparency
|
||||
}
|
||||
|
||||
@ -693,7 +706,7 @@ export class AbstractScatter extends Throwable {
|
||||
animateZoomBounce(dt = 1) {
|
||||
if (this.zoomAnchor != null) {
|
||||
let zoom = 1
|
||||
let amount = Math.min(0.01, 0.3 * dt / 100000.0)
|
||||
let amount = Math.min(0.01, (0.3 * dt) / 100000.0)
|
||||
if (this.scale < this.minScale) zoom = 1 + amount
|
||||
if (this.scale > this.maxScale) zoom = 1 - amount
|
||||
if (zoom != 1) {
|
||||
@ -734,8 +747,8 @@ export class AbstractScatter extends Throwable {
|
||||
|
||||
if (this.scaleAutoClose) {
|
||||
if (this.scale <= this.minScale + this.scaleCloseThreshold) {
|
||||
|
||||
if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout)
|
||||
if (this.scaleAutoCloseTimeout)
|
||||
clearTimeout(this.scaleAutoCloseTimeout)
|
||||
this.scaleAutoCloseTimeout = setTimeout(() => {
|
||||
this._checkAutoClose()
|
||||
}, 600)
|
||||
@ -745,7 +758,6 @@ export class AbstractScatter extends Throwable {
|
||||
}
|
||||
|
||||
onStart(event, interaction) {
|
||||
|
||||
if (this.startGesture(interaction)) {
|
||||
this.dragging = true
|
||||
this.interactionAnchor = null
|
||||
@ -864,9 +876,7 @@ export class AbstractScatter extends Throwable {
|
||||
}
|
||||
|
||||
onZoomed(about) {
|
||||
|
||||
if (this.scaleAutoClose)
|
||||
this._updateTransparency()
|
||||
if (this.scaleAutoClose) this._updateTransparency()
|
||||
|
||||
if (this.onTransform != null) {
|
||||
let event = new ScatterEvent(this, {
|
||||
@ -901,7 +911,13 @@ export class DOMScatterContainer {
|
||||
*/
|
||||
constructor(
|
||||
element,
|
||||
{ stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {}
|
||||
{
|
||||
stopEvents = 'auto',
|
||||
claimEvents = true,
|
||||
useCapture = true,
|
||||
touchAction = 'none',
|
||||
debugCanvas = null
|
||||
} = {}
|
||||
) {
|
||||
this.onCapture = null
|
||||
this.element = element
|
||||
@ -1015,7 +1031,10 @@ export class DOMScatterContainer {
|
||||
***/
|
||||
let found = document.elementFromPoint(global.x, global.y)
|
||||
for (let target of this.scatter.values()) {
|
||||
if (target.interactive && this.isDescendant(target.element, found)) {
|
||||
if (
|
||||
target.interactive &&
|
||||
this.isDescendant(target.element, found)
|
||||
) {
|
||||
if (this.stopEvents) Events.stop(event)
|
||||
if (this.claimEvents) event.claimedByScatter = target
|
||||
return target
|
||||
@ -1049,8 +1068,6 @@ export class DOMScatterContainer {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class DOMScatter extends AbstractScatter {
|
||||
constructor(
|
||||
element,
|
||||
@ -1087,7 +1104,7 @@ export class DOMScatter extends AbstractScatter {
|
||||
autoThrow = true,
|
||||
scaleAutoClose = false,
|
||||
onClose = null,
|
||||
scaleCloseThreshold = 0.10,
|
||||
scaleCloseThreshold = 0.1,
|
||||
scaleCloseBuffer = 0.05,
|
||||
useLowPassFilter = true,
|
||||
maxRotation = Angle.degree2radian(15)
|
||||
@ -1166,15 +1183,15 @@ export class DOMScatter extends AbstractScatter {
|
||||
button.className = 'interactiveElement'
|
||||
this.element.appendChild(button)
|
||||
|
||||
button.addEventListener('pointerdown', (e) => {
|
||||
button.addEventListener('pointerdown', e => {
|
||||
this.startResize(e)
|
||||
})
|
||||
|
||||
button.addEventListener('pointermove', (e) => {
|
||||
button.addEventListener('pointermove', e => {
|
||||
this.resize(e)
|
||||
})
|
||||
|
||||
button.addEventListener('pointerup', (e) => {
|
||||
button.addEventListener('pointerup', e => {
|
||||
this.stopResize(e)
|
||||
})
|
||||
this.resizeButton = button
|
||||
@ -1344,7 +1361,7 @@ export class DOMScatter extends AbstractScatter {
|
||||
onTap(event, interaction, point) {
|
||||
if (this.tapDelegate) {
|
||||
Events.stop(event)
|
||||
this.tapDelegate.tap(event, "scatter")
|
||||
this.tapDelegate.tap(event, 'scatter')
|
||||
}
|
||||
}
|
||||
|
||||
@ -1396,12 +1413,18 @@ export class DOMScatter extends AbstractScatter {
|
||||
e.preventDefault()
|
||||
let event = new CustomEvent('resizeStarted')
|
||||
|
||||
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||
let oldPostition = {
|
||||
x: this.element.getBoundingClientRect().left,
|
||||
y: this.element.getBoundingClientRect().top
|
||||
}
|
||||
this.bringToFront()
|
||||
|
||||
this.element.style.transformOrigin = '0% 0%'
|
||||
|
||||
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||
let newPostition = {
|
||||
x: this.element.getBoundingClientRect().left,
|
||||
y: this.element.getBoundingClientRect().top
|
||||
}
|
||||
|
||||
let offset = Points.subtract(oldPostition, newPostition)
|
||||
|
||||
@ -1424,23 +1447,31 @@ export class DOMScatter extends AbstractScatter {
|
||||
rotation = (rotation + 360) % 360
|
||||
let event = new CustomEvent('resized')
|
||||
if (e.target.getAttribute('resizing') == 'true') {
|
||||
|
||||
let deltaX = (e.clientX - this.oldX)
|
||||
let deltaY = (e.clientY - this.oldY)
|
||||
let deltaX = e.clientX - this.oldX
|
||||
let deltaY = e.clientY - this.oldY
|
||||
|
||||
let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2))
|
||||
let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY))
|
||||
|
||||
phi = ((phi) + 630) % 360
|
||||
let rot = ((rotation + 90) + 630) % 360
|
||||
phi = (phi + 630) % 360
|
||||
let rot = (rotation + 90 + 630) % 360
|
||||
|
||||
let diffAngle = ((0 + rot) + 360) % 360
|
||||
let diffAngle = (0 + rot + 360) % 360
|
||||
let phiCorrected = (phi + diffAngle + 360) % 360
|
||||
|
||||
let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected))
|
||||
let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected))
|
||||
|
||||
if ((this.element.offsetWidth + resizeW) / this.scale > this.width * 0.5 / this.scale && (this.element.offsetHeight + resizeH) / this.scale > this.height * 0.3 / this.scale) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale })
|
||||
if (
|
||||
(this.element.offsetWidth + resizeW) / this.scale >
|
||||
(this.width * 0.5) / this.scale &&
|
||||
(this.element.offsetHeight + resizeH) / this.scale >
|
||||
(this.height * 0.3) / this.scale
|
||||
)
|
||||
TweenLite.to(this.element, 0, {
|
||||
width: this.element.offsetWidth + resizeW / this.scale,
|
||||
height: this.element.offsetHeight + resizeH / this.scale
|
||||
})
|
||||
|
||||
this.oldX = e.clientX
|
||||
this.oldY = e.clientY
|
||||
@ -1454,9 +1485,15 @@ export class DOMScatter extends AbstractScatter {
|
||||
e.preventDefault()
|
||||
|
||||
let event = new CustomEvent('resizeEnded')
|
||||
let oldPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||
let oldPostition = {
|
||||
x: this.element.getBoundingClientRect().left,
|
||||
y: this.element.getBoundingClientRect().top
|
||||
}
|
||||
this.element.style.transformOrigin = '50% 50%'
|
||||
let newPostition = { x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top }
|
||||
let newPostition = {
|
||||
x: this.element.getBoundingClientRect().left,
|
||||
y: this.element.getBoundingClientRect().top
|
||||
}
|
||||
let offset = Points.subtract(oldPostition, newPostition)
|
||||
|
||||
TweenLite.to(this.element, 0, { css: { left: '+=' + offset.x + 'px' } })
|
||||
|
||||
313
lib/uitest.js
313
lib/uitest.js
@ -24,7 +24,6 @@
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest}
|
||||
*/
|
||||
export default class UITest {
|
||||
|
||||
/**
|
||||
* Creates an instance of an UITest.
|
||||
*
|
||||
@ -38,19 +37,28 @@ export default class UITest {
|
||||
* @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action.
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
this.opts = Object.assign({}, {
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
timeScale: 1,
|
||||
eventType: 'auto',
|
||||
debug: false,
|
||||
defaultInterval: null
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline = new TimelineMax(Object.assign({}, {
|
||||
this._timeline = new TimelineMax(
|
||||
Object.assign(
|
||||
{},
|
||||
{
|
||||
paused: true
|
||||
}, this.opts))
|
||||
},
|
||||
this.opts
|
||||
)
|
||||
)
|
||||
this._timeline.timeScale(this.opts.timeScale)
|
||||
|
||||
// eventType
|
||||
@ -152,19 +160,26 @@ export default class UITest {
|
||||
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
|
||||
*/
|
||||
tap(element, position, timelinePosition, opts = {}) {
|
||||
|
||||
// arguments
|
||||
//--------------------
|
||||
[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
;[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
this._timelinePositions.push(timelinePosition)
|
||||
|
||||
// debug
|
||||
//--------------------
|
||||
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
|
||||
if (this.opts.debug)
|
||||
console.log('tap params', {
|
||||
element,
|
||||
position,
|
||||
timelinePosition,
|
||||
opts
|
||||
})
|
||||
|
||||
// opts
|
||||
//--------------------
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
onStart: null,
|
||||
onComplete: null,
|
||||
eventTypes: this.resolveEvents(['down', 'up']),
|
||||
@ -172,17 +187,21 @@ export default class UITest {
|
||||
context: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
if (opts.eventType) {
|
||||
opts.eventTypes = opts.eventType
|
||||
}
|
||||
opts.eventTypes = Array.isArray(opts.eventTypes) ? opts.eventTypes : [opts.eventTypes]
|
||||
opts.eventTypes = Array.isArray(opts.eventTypes)
|
||||
? opts.eventTypes
|
||||
: [opts.eventTypes]
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline.addCallback(position => {
|
||||
|
||||
this._timeline.addCallback(
|
||||
position => {
|
||||
// element
|
||||
//--------------------
|
||||
const elem = Util.extractElement(opts.context, element)
|
||||
@ -207,14 +226,22 @@ export default class UITest {
|
||||
|
||||
// event opts
|
||||
//--------------------
|
||||
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable}
|
||||
const eventOpts = {
|
||||
bubbles: opts.bubbles,
|
||||
cancelable: opts.cancelable
|
||||
}
|
||||
|
||||
if (opts.eventTypes[0]) {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', eventStart)
|
||||
const eventStart = Event.create(
|
||||
elem,
|
||||
coords,
|
||||
opts.eventTypes[0],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', eventStart)
|
||||
elem.dispatchEvent(eventStart)
|
||||
|
||||
// onStart
|
||||
@ -226,8 +253,14 @@ export default class UITest {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', eventComplete)
|
||||
const eventComplete = Event.create(
|
||||
elem,
|
||||
coords,
|
||||
opts.eventTypes[1],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', eventComplete)
|
||||
elem.dispatchEvent(eventComplete)
|
||||
|
||||
// onComplete
|
||||
@ -235,8 +268,10 @@ export default class UITest {
|
||||
if (opts.onComplete) {
|
||||
opts.onComplete.call(this, eventComplete)
|
||||
}
|
||||
|
||||
}, timelinePosition, [position])
|
||||
},
|
||||
timelinePosition,
|
||||
[position]
|
||||
)
|
||||
|
||||
this._actions++
|
||||
|
||||
@ -262,19 +297,26 @@ export default class UITest {
|
||||
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
|
||||
*/
|
||||
pan(element, position, timelinePosition, opts = {}) {
|
||||
|
||||
// arguments
|
||||
//--------------------
|
||||
[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
;[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
this._timelinePositions.push(timelinePosition)
|
||||
|
||||
// debug
|
||||
//--------------------
|
||||
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
|
||||
if (this.opts.debug)
|
||||
console.log('tap params', {
|
||||
element,
|
||||
position,
|
||||
timelinePosition,
|
||||
opts
|
||||
})
|
||||
|
||||
// opts
|
||||
//--------------------
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
onStart: null,
|
||||
onUpdate: null,
|
||||
onComplete: null,
|
||||
@ -285,12 +327,14 @@ export default class UITest {
|
||||
context: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline.addCallback(position => {
|
||||
|
||||
this._timeline.addCallback(
|
||||
position => {
|
||||
// element
|
||||
//--------------------
|
||||
const elem = Util.extractElement(opts.context, element)
|
||||
@ -301,16 +345,24 @@ export default class UITest {
|
||||
|
||||
// event opts
|
||||
//--------------------
|
||||
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable}
|
||||
const eventOpts = {
|
||||
bubbles: opts.bubbles,
|
||||
cancelable: opts.cancelable
|
||||
}
|
||||
|
||||
const gsOpts = {
|
||||
ease: opts.ease,
|
||||
onStart: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[0],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onStart
|
||||
@ -320,11 +372,16 @@ export default class UITest {
|
||||
}
|
||||
},
|
||||
onUpdate: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[1],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onUpdate
|
||||
@ -334,11 +391,16 @@ export default class UITest {
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[2],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onComplete
|
||||
@ -357,8 +419,10 @@ export default class UITest {
|
||||
// drag animation
|
||||
//--------------------
|
||||
TweenLite.to(from, opts.duration, gsOpts)
|
||||
|
||||
}, timelinePosition, [position])
|
||||
},
|
||||
timelinePosition,
|
||||
[position]
|
||||
)
|
||||
|
||||
this._actions++
|
||||
|
||||
@ -387,19 +451,26 @@ export default class UITest {
|
||||
* @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
|
||||
*/
|
||||
pinch(element, position, timelinePosition, opts = {}) {
|
||||
|
||||
// arguments
|
||||
//--------------------
|
||||
[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
;[position, timelinePosition, opts] = this.reorderArguments(arguments)
|
||||
this._timelinePositions.push(timelinePosition)
|
||||
|
||||
// debug
|
||||
//--------------------
|
||||
if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
|
||||
if (this.opts.debug)
|
||||
console.log('tap params', {
|
||||
element,
|
||||
position,
|
||||
timelinePosition,
|
||||
opts
|
||||
})
|
||||
|
||||
// opts
|
||||
//--------------------
|
||||
opts = Object.assign({}, {
|
||||
opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
onStart: null,
|
||||
onUpdate: null,
|
||||
onComplete: null,
|
||||
@ -413,12 +484,14 @@ export default class UITest {
|
||||
context: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}, opts)
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
// timeline
|
||||
//--------------------
|
||||
this._timeline.addCallback(position => {
|
||||
|
||||
this._timeline.addCallback(
|
||||
position => {
|
||||
// element
|
||||
//--------------------
|
||||
const elem = Util.extractElement(opts.context, element)
|
||||
@ -442,7 +515,7 @@ export default class UITest {
|
||||
let gsOpts2 = {}
|
||||
|
||||
if (opts.to || opts.bezier) {
|
||||
[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
|
||||
;[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
|
||||
} else {
|
||||
const distance = opts.distance != null ? opts.distance : 100
|
||||
gsOpts1.x = from1.x - distance / 2
|
||||
@ -460,56 +533,84 @@ export default class UITest {
|
||||
// loop
|
||||
//--------------------
|
||||
pointers.forEach((value, key) => {
|
||||
|
||||
// from
|
||||
//--------------------
|
||||
const from = value.element
|
||||
|
||||
// event opts
|
||||
//--------------------
|
||||
const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable, pointerId: key, isPrimary: key === 0}
|
||||
const eventOpts = {
|
||||
bubbles: opts.bubbles,
|
||||
cancelable: opts.cancelable,
|
||||
pointerId: key,
|
||||
isPrimary: key === 0
|
||||
}
|
||||
|
||||
const gsOpts = {
|
||||
ease: opts.ease,
|
||||
onStart: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[0],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onStart
|
||||
//--------------------
|
||||
if (opts.onStart && (opts.doubleCallbacks || key === 0)) {
|
||||
if (
|
||||
opts.onStart &&
|
||||
(opts.doubleCallbacks || key === 0)
|
||||
) {
|
||||
opts.onStart.call(this, event)
|
||||
}
|
||||
},
|
||||
onUpdate: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[1],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onUpdate
|
||||
//--------------------
|
||||
if (opts.onUpdate && (opts.doubleCallbacks || key === 0)) {
|
||||
if (
|
||||
opts.onUpdate &&
|
||||
(opts.doubleCallbacks || key === 0)
|
||||
) {
|
||||
opts.onUpdate.call(this, event)
|
||||
}
|
||||
},
|
||||
onComplete: () => {
|
||||
|
||||
// create and dispatch event
|
||||
//--------------------
|
||||
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
|
||||
if (this.opts.debug) console.log('dispatch event', event)
|
||||
const event = Event.create(
|
||||
elem,
|
||||
from,
|
||||
opts.eventTypes[2],
|
||||
eventOpts
|
||||
)
|
||||
if (this.opts.debug)
|
||||
console.log('dispatch event', event)
|
||||
elem.dispatchEvent(event)
|
||||
|
||||
// onComplete
|
||||
//--------------------
|
||||
if (opts.onComplete && (opts.doubleCallbacks || key === 0)) {
|
||||
if (
|
||||
opts.onComplete &&
|
||||
(opts.doubleCallbacks || key === 0)
|
||||
) {
|
||||
opts.onComplete.call(this, event)
|
||||
}
|
||||
}
|
||||
@ -523,8 +624,10 @@ export default class UITest {
|
||||
//--------------------
|
||||
TweenLite.to(from, opts.duration, gsOpts)
|
||||
})
|
||||
|
||||
}, timelinePosition, [position])
|
||||
},
|
||||
timelinePosition,
|
||||
[position]
|
||||
)
|
||||
|
||||
this._actions++
|
||||
|
||||
@ -575,7 +678,6 @@ export default class UITest {
|
||||
* @returns {array} - Returns an array of the position, the timelinePosition and the opts object.
|
||||
*/
|
||||
reorderArguments(params) {
|
||||
|
||||
// first parameter
|
||||
//--------------------
|
||||
const element = params[0]
|
||||
@ -590,7 +692,11 @@ export default class UITest {
|
||||
//--------------------
|
||||
if (Util.isNumber(params[1])) {
|
||||
timelinePosition = params[1]
|
||||
} else if (Util.isObject(params[1]) && !Util.isPixiDisplayObject(params[1]) && (params[1].x == null || params[1].y == null)) {
|
||||
} else if (
|
||||
Util.isObject(params[1]) &&
|
||||
!Util.isPixiDisplayObject(params[1]) &&
|
||||
(params[1].x == null || params[1].y == null)
|
||||
) {
|
||||
opts = params[1]
|
||||
} else if (params[1] != null) {
|
||||
position = params[1]
|
||||
@ -618,9 +724,13 @@ export default class UITest {
|
||||
|
||||
if (timelinePosition === null) {
|
||||
if (this.opts.defaultInterval === null && this._actions > 1) {
|
||||
throw new Error('No execution time was specified for this action, and a default interval was not set in the class constructor!')
|
||||
throw new Error(
|
||||
'No execution time was specified for this action, and a default interval was not set in the class constructor!'
|
||||
)
|
||||
}
|
||||
timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1)
|
||||
timelinePosition =
|
||||
Math.max(...this._timelinePositions) +
|
||||
(this.opts.defaultInterval || 1)
|
||||
}
|
||||
|
||||
if (opts === null) {
|
||||
@ -637,7 +747,6 @@ export default class UITest {
|
||||
* @param {string[]} events - An array of event types.
|
||||
*/
|
||||
resolveEvents(events) {
|
||||
|
||||
const data = []
|
||||
|
||||
if (this.opts.eventType === 'pointer') {
|
||||
@ -688,7 +797,6 @@ export default class UITest {
|
||||
* @class
|
||||
*/
|
||||
class Util {
|
||||
|
||||
/**
|
||||
* Resolves the element from a specific context.
|
||||
*
|
||||
@ -697,9 +805,12 @@ class Util {
|
||||
* @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method.
|
||||
*/
|
||||
static extractElement(context, element) {
|
||||
|
||||
const cont = Util.isFrame(context) ? context.contentDocument : context.document
|
||||
const elem = Util.isString(element) ? cont.querySelector(element) : element
|
||||
const cont = Util.isFrame(context)
|
||||
? context.contentDocument
|
||||
: context.document
|
||||
const elem = Util.isString(element)
|
||||
? cont.querySelector(element)
|
||||
: element
|
||||
|
||||
return elem
|
||||
}
|
||||
@ -712,7 +823,6 @@ class Util {
|
||||
* @return {object} - Returns an object with the keys x and y.
|
||||
*/
|
||||
static extractPosition(object) {
|
||||
|
||||
// event coords
|
||||
//--------------------
|
||||
const position = { x: 0, y: 0 }
|
||||
@ -745,11 +855,9 @@ class Util {
|
||||
* @return {object} - Returns an object with the to or bezier keys.
|
||||
*/
|
||||
static extractTo(opts) {
|
||||
|
||||
const object = {}
|
||||
|
||||
if (opts.bezier) {
|
||||
|
||||
let bezier = null
|
||||
|
||||
if (Array.isArray(opts.bezier)) {
|
||||
@ -758,7 +866,9 @@ class Util {
|
||||
type: 'thru'
|
||||
}
|
||||
} else {
|
||||
opts.bezier.values = opts.bezier.values.map(it => Util.extractPosition(it))
|
||||
opts.bezier.values = opts.bezier.values.map(it =>
|
||||
Util.extractPosition(it)
|
||||
)
|
||||
bezier = opts.bezier
|
||||
}
|
||||
|
||||
@ -780,13 +890,10 @@ class Util {
|
||||
* @return {object[]} - Returns an array of objects with the keys x and y.
|
||||
*/
|
||||
static extractMultiTo(opts) {
|
||||
|
||||
const objects = []
|
||||
|
||||
if (opts.bezier) {
|
||||
|
||||
opts.bezier.forEach(it => {
|
||||
|
||||
let bezier = null
|
||||
|
||||
if (Array.isArray(it)) {
|
||||
@ -803,9 +910,7 @@ class Util {
|
||||
bezier
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
opts.to.forEach(it => {
|
||||
const to = Util.extractPosition(it)
|
||||
objects.push({
|
||||
@ -859,7 +964,11 @@ class Util {
|
||||
* @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false.
|
||||
*/
|
||||
static isPixiDisplayObject(object) {
|
||||
return typeof object.getBounds === 'function' && typeof object.renderWebGL === 'function' && typeof object.setTransform === 'function'
|
||||
return (
|
||||
typeof object.getBounds === 'function' &&
|
||||
typeof object.renderWebGL === 'function' &&
|
||||
typeof object.setTransform === 'function'
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -886,7 +995,6 @@ class Util {
|
||||
* @class
|
||||
*/
|
||||
class Event {
|
||||
|
||||
/**
|
||||
* Creates an event object.
|
||||
*
|
||||
@ -896,9 +1004,16 @@ class Event {
|
||||
* @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events
|
||||
* @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties.
|
||||
*/
|
||||
static create(target, position = {x: 0, y: 0}, type = 'pointerup', opts = {}) {
|
||||
|
||||
const rect = typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : {x: 0, y: 0}
|
||||
static create(
|
||||
target,
|
||||
position = { x: 0, y: 0 },
|
||||
type = 'pointerup',
|
||||
opts = {}
|
||||
) {
|
||||
const rect =
|
||||
typeof target.getBoundingClientRect === 'function'
|
||||
? target.getBoundingClientRect()
|
||||
: { x: 0, y: 0 }
|
||||
|
||||
// EventInit
|
||||
const eventOpts = {
|
||||
@ -955,11 +1070,27 @@ class Event {
|
||||
}
|
||||
|
||||
if (type.startsWith('pointer')) {
|
||||
return new PointerEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts))
|
||||
return new PointerEvent(
|
||||
type,
|
||||
Object.assign(
|
||||
{},
|
||||
eventOpts,
|
||||
uiEventOpts,
|
||||
mouseEventOpts,
|
||||
pointerEventOpts,
|
||||
opts
|
||||
)
|
||||
)
|
||||
} else if (type.startsWith('touch')) {
|
||||
return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
|
||||
return new TouchEvent(
|
||||
type,
|
||||
Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts)
|
||||
)
|
||||
} else {
|
||||
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
|
||||
return new MouseEvent(
|
||||
type,
|
||||
Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
72
lib/utils.js
72
lib/utils.js
@ -61,31 +61,31 @@ export function sample(population, k) {
|
||||
*/
|
||||
|
||||
if (!Array.isArray(population))
|
||||
throw new TypeError("Population must be an array.")
|
||||
throw new TypeError('Population must be an array.')
|
||||
let n = population.length
|
||||
if (k < 0 || k > n)
|
||||
throw new RangeError("Sample larger than population or is negative")
|
||||
throw new RangeError('Sample larger than population or is negative')
|
||||
|
||||
let result = new Array(k)
|
||||
let setsize = 21 // size of a small set minus size of an empty list
|
||||
|
||||
if (k > 5)
|
||||
setsize += Math.pow(4, Math.ceil(Math.log(k * 3, 4)))
|
||||
if (k > 5) setsize += Math.pow(4, Math.ceil(Math.log(k * 3, 4)))
|
||||
|
||||
if (n <= setsize) {
|
||||
// An n-length list is smaller than a k-length set
|
||||
let pool = population.slice()
|
||||
for (let i = 0; i < k; i++) { // inletiant: non-selected at [0,n-i)
|
||||
let j = Math.random() * (n - i) | 0
|
||||
for (let i = 0; i < k; i++) {
|
||||
// inletiant: non-selected at [0,n-i)
|
||||
let j = (Math.random() * (n - i)) | 0
|
||||
result[i] = pool[j]
|
||||
pool[j] = pool[n - i - 1] // move non-selected item into vacancy
|
||||
}
|
||||
} else {
|
||||
let selected = new Set()
|
||||
for (let i = 0; i < k; i++) {
|
||||
let j = Math.random() * (n - i) | 0
|
||||
let j = (Math.random() * (n - i)) | 0
|
||||
while (selected.has(j)) {
|
||||
j = Math.random() * (n - i) | 0
|
||||
j = (Math.random() * (n - i)) | 0
|
||||
}
|
||||
selected.add(j)
|
||||
result[i] = population[j]
|
||||
@ -95,7 +95,6 @@ export function sample(population, k) {
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
// Returns a function, that, as long as it continues to be invoked, will not
|
||||
// be triggered. The function will be called after it stops being called for
|
||||
// N milliseconds. If `immediate` is passed, trigger the function on the
|
||||
@ -135,7 +134,6 @@ export function randomFloat(min = 0.0, max = 1.0) {
|
||||
}
|
||||
|
||||
export class Dates {
|
||||
|
||||
static create(fullYear, month, day) {
|
||||
return new Date(Date.UTC(fullYear, month, day))
|
||||
}
|
||||
@ -145,7 +143,9 @@ export class Dates {
|
||||
}
|
||||
|
||||
static startYearRange(date) {
|
||||
return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999))
|
||||
return new Date(
|
||||
Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999)
|
||||
)
|
||||
}
|
||||
|
||||
static endYearRange(date) {
|
||||
@ -433,7 +433,6 @@ export class Points {
|
||||
* @class Sets
|
||||
*/
|
||||
export class Sets {
|
||||
|
||||
/**
|
||||
* Returns the intersection of all sets
|
||||
* https://stackoverflow.com/questions/31930894/javascript-set-data-structure-intersect
|
||||
@ -444,12 +443,10 @@ export class Sets {
|
||||
*/
|
||||
static intersect(...sets) {
|
||||
if (!sets.length) return new Set()
|
||||
const i = sets.reduce((m, s, i) => s.size < sets[m].size ? i : m, 0)
|
||||
const i = sets.reduce((m, s, i) => (s.size < sets[m].size ? i : m), 0)
|
||||
const [smallest] = sets.splice(i, 1)
|
||||
const res = new Set()
|
||||
for (let val of smallest)
|
||||
if (sets.every(s => s.has(val)))
|
||||
res.add(val)
|
||||
for (let val of smallest) if (sets.every(s => s.has(val))) res.add(val)
|
||||
return res
|
||||
}
|
||||
|
||||
@ -497,7 +494,6 @@ export class Sets {
|
||||
/** Static methods to compute angles.
|
||||
*/
|
||||
export class Angle {
|
||||
|
||||
static normalize(angle) {
|
||||
let TAU = Math.PI * 2.0
|
||||
while (angle > Math.PI) {
|
||||
@ -544,11 +540,11 @@ export class Angle {
|
||||
}
|
||||
|
||||
static degree2radian(degree) {
|
||||
return Math.PI * degree / 180.0
|
||||
return (Math.PI * degree) / 180.0
|
||||
}
|
||||
|
||||
static radian2degree(rad) {
|
||||
return 180.0 / Math.PI * rad
|
||||
return (180.0 / Math.PI) * rad
|
||||
}
|
||||
}
|
||||
|
||||
@ -742,8 +738,7 @@ export class Polygon {
|
||||
if (
|
||||
verty[i] > testy != verty[j] > testy &&
|
||||
testx <
|
||||
(vertx[j] - vertx[i]) *
|
||||
(testy - verty[i]) /
|
||||
((vertx[j] - vertx[i]) * (testy - verty[i])) /
|
||||
(verty[j] - verty[i]) +
|
||||
vertx[i]
|
||||
)
|
||||
@ -909,13 +904,10 @@ export class Polygon {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Util functions to deal with DOMRects.
|
||||
*/
|
||||
export class Rect {
|
||||
|
||||
|
||||
/**
|
||||
* Test if a given point is contained by the provided Rect.
|
||||
*
|
||||
@ -926,12 +918,14 @@ export class Rect {
|
||||
* @memberof Rect
|
||||
*/
|
||||
static contains(rect, point) {
|
||||
return (point.x > rect.left &&
|
||||
point.x < rect.x + rect.right
|
||||
&& point.y > rect.top && point.y < rect.bottom)
|
||||
return (
|
||||
point.x > rect.left &&
|
||||
point.x < rect.x + rect.right &&
|
||||
point.y > rect.top &&
|
||||
point.y < rect.bottom
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*Returns the position of an rect as point object.
|
||||
*
|
||||
@ -948,7 +942,6 @@ export class Rect {
|
||||
/** String utility functions */
|
||||
|
||||
export class Strings {
|
||||
|
||||
static toUpperCaseFirstChar(str) {
|
||||
return str.substr(0, 1).toUpperCase() + str.substr(1)
|
||||
}
|
||||
@ -958,18 +951,21 @@ export class Strings {
|
||||
}
|
||||
|
||||
static toUpperCaseEachWord(str, delim = ' ') {
|
||||
return str.split(delim).map((v) => v.toUpperCaseFirstChar()).join(delim)
|
||||
return str
|
||||
.split(delim)
|
||||
.map(v => v.toUpperCaseFirstChar())
|
||||
.join(delim)
|
||||
}
|
||||
|
||||
static toLowerCaseEachWord(str, delim = ' ') {
|
||||
return str.split(delim).map((v) => v.toLowerCaseFirstChar()).join(delim)
|
||||
return str
|
||||
.split(delim)
|
||||
.map(v => v.toLowerCaseFirstChar())
|
||||
.join(delim)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export class LowPassFilter {
|
||||
|
||||
constructor(smoothing = 0.5, bufferMaxSize = 10) {
|
||||
this.smoothing = smoothing // must be smaller than 1
|
||||
this.buffer = [] // FIFO queue
|
||||
@ -1007,9 +1003,8 @@ export class LowPassFilter {
|
||||
* @access private
|
||||
*/
|
||||
__push(value) {
|
||||
let removed = (this.buffer.length === this.bufferMaxSize)
|
||||
? this.buffer.shift()
|
||||
: 0
|
||||
let removed =
|
||||
this.buffer.length === this.bufferMaxSize ? this.buffer.shift() : 0
|
||||
|
||||
this.buffer.push(value)
|
||||
return removed
|
||||
@ -1023,7 +1018,6 @@ export class LowPassFilter {
|
||||
* @access public
|
||||
*/
|
||||
next(nextValue) {
|
||||
|
||||
// push new value to the end, and remove oldest one
|
||||
let removed = this.__push(nextValue)
|
||||
// smooth value using all values from buffer
|
||||
@ -1052,5 +1046,3 @@ export class LowPassFilter {
|
||||
return values
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
105
package-lock.json
generated
105
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iwmlib",
|
||||
"version": "1.0.15",
|
||||
"version": "1.0.16",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -465,6 +465,7 @@
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
|
||||
"integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es6-promisify": "^5.0.0"
|
||||
}
|
||||
@ -758,7 +759,8 @@
|
||||
"async-limiter": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
|
||||
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
|
||||
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
|
||||
"dev": true
|
||||
},
|
||||
"async-settle": {
|
||||
"version": "1.0.0",
|
||||
@ -842,7 +844,8 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
||||
"dev": true
|
||||
},
|
||||
"base": {
|
||||
"version": "0.11.2",
|
||||
@ -938,6 +941,7 @@
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -1391,7 +1395,8 @@
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"concat-stream": {
|
||||
"version": "1.6.2",
|
||||
@ -1563,6 +1568,7 @@
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
@ -1910,12 +1916,14 @@
|
||||
"es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
|
||||
"dev": true
|
||||
},
|
||||
"es6-promisify": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
|
||||
"integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es6-promise": "^4.0.3"
|
||||
}
|
||||
@ -2348,6 +2356,7 @@
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
|
||||
"integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"concat-stream": "1.6.2",
|
||||
"debug": "2.6.9",
|
||||
@ -2433,6 +2442,7 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
|
||||
"integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"pend": "~1.2.0"
|
||||
}
|
||||
@ -2601,6 +2611,7 @@
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
|
||||
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^4.0.0",
|
||||
@ -2610,7 +2621,8 @@
|
||||
"graceful-fs": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.0.tgz",
|
||||
"integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg=="
|
||||
"integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -2627,7 +2639,8 @@
|
||||
"fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
|
||||
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
|
||||
"dev": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "1.2.9",
|
||||
@ -3219,6 +3232,7 @@
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
|
||||
"integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
@ -3681,6 +3695,29 @@
|
||||
"vinyl": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"gulp-prettier": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gulp-prettier/-/gulp-prettier-2.1.0.tgz",
|
||||
"integrity": "sha512-6PvGPX+x0d1+PbP7tHF42o6zWzxCXqouTnpwZV1GjF47/wAgWBfPU1E6/6d4uAGM+NhmwWdKvIVumL3wMZZxDg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"plugin-error": "^1.0.1",
|
||||
"prettier": "^1.5.3",
|
||||
"safe-buffer": "^5.1.2",
|
||||
"through2": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"through2": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
|
||||
"integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "2 || 3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"gulp-rename": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
|
||||
@ -3911,6 +3948,7 @@
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
|
||||
"integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"agent-base": "^4.3.0",
|
||||
"debug": "^3.1.0"
|
||||
@ -3920,6 +3958,7 @@
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
|
||||
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
@ -3927,7 +3966,8 @@
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -3984,6 +4024,7 @@
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
|
||||
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"once": "^1.3.0",
|
||||
"wrappy": "1"
|
||||
@ -4577,6 +4618,7 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
@ -5004,7 +5046,8 @@
|
||||
"mime": {
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
|
||||
"integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA=="
|
||||
"integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
|
||||
"dev": true
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.40.0",
|
||||
@ -5036,6 +5079,7 @@
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -5080,6 +5124,7 @@
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
},
|
||||
@ -5087,14 +5132,16 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"murmurhash-js": {
|
||||
"version": "1.0.0",
|
||||
@ -5338,6 +5385,7 @@
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -5538,7 +5586,8 @@
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
|
||||
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
|
||||
"dev": true
|
||||
},
|
||||
"path-key": {
|
||||
"version": "2.0.1",
|
||||
@ -5580,7 +5629,8 @@
|
||||
"pend": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
|
||||
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
|
||||
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
|
||||
"dev": true
|
||||
},
|
||||
"performance-now": {
|
||||
"version": "2.1.0",
|
||||
@ -5695,6 +5745,18 @@
|
||||
"resource-loader": "^2.2.3"
|
||||
}
|
||||
},
|
||||
"plugin-error": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
|
||||
"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-colors": "^1.0.1",
|
||||
"arr-diff": "^4.0.0",
|
||||
"arr-union": "^3.1.0",
|
||||
"extend-shallow": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"posix-character-classes": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
|
||||
@ -5888,7 +5950,8 @@
|
||||
"progress": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
|
||||
"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
|
||||
"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
|
||||
"dev": true
|
||||
},
|
||||
"propagating-hammerjs": {
|
||||
"version": "1.4.6",
|
||||
@ -5901,7 +5964,8 @@
|
||||
"proxy-from-env": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
|
||||
"integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4="
|
||||
"integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
|
||||
"dev": true
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.2.0",
|
||||
@ -5940,6 +6004,7 @@
|
||||
"version": "1.18.1",
|
||||
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz",
|
||||
"integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "^4.1.0",
|
||||
"extract-zip": "^1.6.6",
|
||||
@ -5955,6 +6020,7 @@
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
@ -5962,7 +6028,8 @@
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -6361,6 +6428,7 @@
|
||||
"version": "2.6.3",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
|
||||
"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.1.3"
|
||||
}
|
||||
@ -7594,7 +7662,8 @@
|
||||
"universalify": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
|
||||
"dev": true
|
||||
},
|
||||
"unset-value": {
|
||||
"version": "1.0.0",
|
||||
@ -7857,6 +7926,7 @@
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async-limiter": "~1.0.0"
|
||||
}
|
||||
@ -7918,6 +7988,7 @@
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
|
||||
"integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fd-slicer": "~1.0.1"
|
||||
}
|
||||
|
||||
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "iwmlib",
|
||||
"version": "1.0.15",
|
||||
"version": "1.0.16",
|
||||
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
||||
"main": "index.js",
|
||||
"directories": {
|
||||
@ -11,6 +11,7 @@
|
||||
"build": "rollup --config ./rollup.config.js",
|
||||
"watch": "rollup --watch --config ./rollup.config.js",
|
||||
"3rdparty": "gulp",
|
||||
"prettier": "gulp prettify",
|
||||
"jsdoc": "jsdoc -c ./doc/conf.json"
|
||||
},
|
||||
"repository": {
|
||||
@ -24,18 +25,20 @@
|
||||
"eslint": "^6.0.1",
|
||||
"eslint-config-prettier": "^6.0.0",
|
||||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"fs-extra": "^8.0.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-prettier": "^2.1.0",
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-replace": "^1.0.0",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"htmlhint": "^0.11.0",
|
||||
"prettier": "^1.18.2",
|
||||
"puppeteer": "^1.18.1",
|
||||
"stylelint": "^10.1.0",
|
||||
"stylelint-config-standard": "^18.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"fs-extra": "^8.0.1",
|
||||
"gsap": "^2.1.3",
|
||||
"hammerjs": "^2.0.8",
|
||||
"optimal-select": "^4.0.1",
|
||||
@ -44,7 +47,6 @@
|
||||
"pixi-particles": "^4.1.1",
|
||||
"pixi-projection": "^0.2.8",
|
||||
"pixi.js": "^4.8.8",
|
||||
"propagating-hammerjs": "^1.4.6",
|
||||
"puppeteer": "^1.18.1"
|
||||
"propagating-hammerjs": "^1.4.6"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user