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

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

This commit is contained in:
Severin Opel 2019-08-12 15:57:14 +02:00
parent 4f4215ced5 7f5e0e8e79
commit 98b3b44ed5
137 changed files with 6467 additions and 6486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

@ -22,7 +22,6 @@
"TweenMax": false,
"TimelineLite": false,
"TimelineMax": false,
"d3": false,
"SystemJS": false,
"app": true
},

3
.prettierrc
View File

@ -2,5 +2,6 @@
"singleQuote": true,
"jsxSingleQuote": true,
"tabWidth": 4,
"semi": false
"semi": false,
"printWidth": 120
}

2
css/highlight.css
View File

@ -4,8 +4,6 @@ circle {
stroke-width: 8px;
}
mask circle {
stroke-width: 0;
fill: white;

1184
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

5032
dist/iwmlib.pixi.js vendored
View File

File diff suppressed because it is too large Load Diff

14
doc/out/AbstractPopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2491,7 +2497,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2648,7 +2654,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line192">abstractpopup.js:192</a>
<a href="pixi_abstractpopup.js.html#line184">abstractpopup.js:184</a>
</div>
</div>
@ -2753,7 +2759,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
</div>
</div>
@ -2912,7 +2918,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/Badge.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1939,7 +1945,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2100,7 +2106,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_badge.js.html#line110">badge.js:110</a>
<a href="pixi_badge.js.html#line106">badge.js:106</a>
</div>
</div>
@ -2209,7 +2215,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
</div>
</div>
@ -2368,7 +2374,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/BlurFilter.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1792,7 +1798,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

16
doc/out/Button.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1465,7 +1471,7 @@
<div class="tag-source">
<a href="pixi_button.js.html#line109">button.js:109</a>
<a href="pixi_button.js.html#line110">button.js:110</a>
</div>
</div>
@ -3493,7 +3499,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source">
<a href="pixi_button.js.html#line659">button.js:659</a>
<a href="pixi_button.js.html#line636">button.js:636</a>
</div>
</div>
@ -3598,7 +3604,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source">
<a href="pixi_button.js.html#line402">button.js:402</a>
<a href="pixi_button.js.html#line365">button.js:365</a>
</div>
</div>
@ -3703,7 +3709,7 @@ the tint property of the icon sprite.</p>
<div class="tag-source">
<a href="pixi_button.js.html#line643">button.js:643</a>
<a href="pixi_button.js.html#line620">button.js:620</a>
</div>
</div>
@ -3810,7 +3816,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

382
doc/out/ButtonGroup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1465,7 +1471,7 @@
<div class="tag-source">
<a href="pixi_buttongroup.js.html#line77">buttongroup.js:77</a>
<a href="pixi_buttongroup.js.html#line84">buttongroup.js:84</a>
</div>
</div>
@ -1811,6 +1817,146 @@ or a Theme object.</p></td>
<tr>
<td class="name"><code>maxWidth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.</p></td>
</tr>
<tr>
<td class="name"><code>maxHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.</p></td>
</tr>
<tr>
<td class="name"><code>stackPadding</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="default">
10
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The padding for stacked buttons.</p></td>
</tr>
<tr>
<td class="name"><code>app</code></td>
<td class="type">
<span class="param-type">PIXI.Application</span>
</td>
<td class="default">
window.app
</td>
<td class="description last">
<span class="optional">optional</span>
<p>The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).</p></td>
</tr>
<tr>
<td class="name"><code>padding</code></td>
@ -2859,6 +3005,108 @@ app.scene.addChild(buttonGroup)</code></pre>
</dl>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="maxHeight">
<a class="share-icon" href="#maxHeight"><span class="glyphicon glyphicon-link"></span></a>
<span class="">maxHeight</span>
<span class="type-signature type">number</span>
</h4>
</div>
</dt>
<dd>
<div class="description">
<p>Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.</p>
</div>
<dl class="details">
</dl>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="maxWidth">
<a class="share-icon" href="#maxWidth"><span class="glyphicon glyphicon-link"></span></a>
<span class="">maxWidth</span>
<span class="type-signature type">number</span>
</h4>
</div>
</dt>
<dd>
<div class="description">
<p>Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.</p>
</div>
<dl class="details">
</dl>
@ -2873,6 +3121,130 @@ app.scene.addChild(buttonGroup)</code></pre>
<dl class="list-methods">
<dt>
<div class="nameContainer">
<h4 class="name" id="capture">
<a class="share-icon" href="#capture"><span class="glyphicon glyphicon-link"></span></a>
<span class="">
capture
</span>
<span class="signature">(event)</span>
</h4>
<div class="tag-source">
<a href="pixi_buttongroup.js.html#line590">buttongroup.js:590</a>
</div>
</div>
</dt>
<dd>
<div class="description">
<p>Captures an event to inform InteractionMapper about processed events.</p>
</div>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type">event</span>
|
<span class="param-type">PIXI.InteractionEvent</span>
</td>
<td class="description last">
<p>The PIXI event to capture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<div class="nameContainer">
<h4 class="name" id="hide">
@ -2889,7 +3261,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source">
<a href="pixi_buttongroup.js.html#line367">buttongroup.js:367</a>
<a href="pixi_buttongroup.js.html#line436">buttongroup.js:436</a>
</div>
</div>
@ -2994,7 +3366,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source">
<a href="pixi_buttongroup.js.html#line262">buttongroup.js:262</a>
<a href="pixi_buttongroup.js.html#line311">buttongroup.js:311</a>
</div>
</div>
@ -3099,7 +3471,7 @@ app.scene.addChild(buttonGroup)</code></pre>
<div class="tag-source">
<a href="pixi_buttongroup.js.html#line356">buttongroup.js:356</a>
<a href="pixi_buttongroup.js.html#line425">buttongroup.js:425</a>
</div>
</div>
@ -3206,7 +3578,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

60
doc/out/DeepZoomImage.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1469,7 +1475,7 @@ more detailed tiles at the larger level as fast as possible.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line338">image.js:338</a>
<a href="pixi_deepzoom_image.js.html#line323">image.js:323</a>
</div>
</div>
@ -1922,7 +1928,7 @@ Adds a PIXI.Container if necessary.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line596">image.js:596</a>
<a href="pixi_deepzoom_image.js.html#line578">image.js:578</a>
</div>
</div>
@ -2000,7 +2006,7 @@ rect.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line825">image.js:825</a>
<a href="pixi_deepzoom_image.js.html#line798">image.js:798</a>
</div>
</div>
@ -2152,7 +2158,7 @@ rect.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line1067">image.js:1067</a>
<a href="pixi_deepzoom_image.js.html#line1028">image.js:1028</a>
</div>
</div>
@ -2228,7 +2234,7 @@ rect.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line508">image.js:508</a>
<a href="pixi_deepzoom_image.js.html#line491">image.js:491</a>
</div>
</div>
@ -2372,7 +2378,7 @@ rect.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line624">image.js:624</a>
<a href="pixi_deepzoom_image.js.html#line606">image.js:606</a>
</div>
</div>
@ -2547,7 +2553,7 @@ rect.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line1002">image.js:1002</a>
<a href="pixi_deepzoom_image.js.html#line964">image.js:964</a>
</div>
</div>
@ -2668,7 +2674,7 @@ rect.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line605">image.js:605</a>
<a href="pixi_deepzoom_image.js.html#line587">image.js:587</a>
</div>
</div>
@ -2746,7 +2752,7 @@ the also overwritten _calculateBounds method.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line731">image.js:731</a>
<a href="pixi_deepzoom_image.js.html#line706">image.js:706</a>
</div>
</div>
@ -2921,7 +2927,7 @@ the also overwritten _calculateBounds method.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line1079">image.js:1079</a>
<a href="pixi_deepzoom_image.js.html#line1040">image.js:1040</a>
</div>
</div>
@ -2997,7 +3003,7 @@ the also overwritten _calculateBounds method.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line962">image.js:962</a>
<a href="pixi_deepzoom_image.js.html#line924">image.js:924</a>
</div>
</div>
@ -3073,7 +3079,7 @@ the also overwritten _calculateBounds method.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line977">image.js:977</a>
<a href="pixi_deepzoom_image.js.html#line939">image.js:939</a>
</div>
</div>
@ -3150,7 +3156,7 @@ visible quadTrees</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line908">image.js:908</a>
<a href="pixi_deepzoom_image.js.html#line871">image.js:871</a>
</div>
</div>
@ -3272,7 +3278,7 @@ be reused.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line948">image.js:948</a>
<a href="pixi_deepzoom_image.js.html#line910">image.js:910</a>
</div>
</div>
@ -3348,7 +3354,7 @@ be reused.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line881">image.js:881</a>
<a href="pixi_deepzoom_image.js.html#line844">image.js:844</a>
</div>
</div>
@ -3469,7 +3475,7 @@ be reused.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line858">image.js:858</a>
<a href="pixi_deepzoom_image.js.html#line821">image.js:821</a>
</div>
</div>
@ -3620,7 +3626,7 @@ a new Tiles layer if necessary</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line496">image.js:496</a>
<a href="pixi_deepzoom_image.js.html#line479">image.js:479</a>
</div>
</div>
@ -3741,7 +3747,7 @@ a new Tiles layer if necessary</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line487">image.js:487</a>
<a href="pixi_deepzoom_image.js.html#line470">image.js:470</a>
</div>
</div>
@ -3862,7 +3868,7 @@ a new Tiles layer if necessary</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line658">image.js:658</a>
<a href="pixi_deepzoom_image.js.html#line640">image.js:640</a>
</div>
</div>
@ -4076,7 +4082,7 @@ a new Tiles layer if necessary</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line759">image.js:759</a>
<a href="pixi_deepzoom_image.js.html#line734">image.js:734</a>
</div>
</div>
@ -4220,7 +4226,7 @@ a new Tiles layer if necessary</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line777">image.js:777</a>
<a href="pixi_deepzoom_image.js.html#line752">image.js:752</a>
</div>
</div>
@ -4413,7 +4419,7 @@ Optional parameter:</p></td>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line389">image.js:389</a>
<a href="pixi_deepzoom_image.js.html#line372">image.js:372</a>
</div>
</div>
@ -4560,7 +4566,7 @@ layer.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line425">image.js:425</a>
<a href="pixi_deepzoom_image.js.html#line408">image.js:408</a>
</div>
</div>
@ -4690,7 +4696,7 @@ Can be overwritten in subclasses.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line615">image.js:615</a>
<a href="pixi_deepzoom_image.js.html#line597">image.js:597</a>
</div>
</div>
@ -4796,7 +4802,7 @@ large images.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line932">image.js:932</a>
<a href="pixi_deepzoom_image.js.html#line895">image.js:895</a>
</div>
</div>
@ -4872,7 +4878,7 @@ large images.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line1017">image.js:1017</a>
<a href="pixi_deepzoom_image.js.html#line979">image.js:979</a>
</div>
</div>
@ -5090,7 +5096,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

20
doc/out/DeepZoomInfo.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1631,7 +1637,7 @@ height and width of the overall image, overlap, and image type.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line225">image.js:225</a>
<a href="pixi_deepzoom_image.js.html#line224">image.js:224</a>
</div>
</div>
@ -1781,7 +1787,7 @@ height and width of the overall image, overlap, and image type.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line81">image.js:81</a>
<a href="pixi_deepzoom_image.js.html#line80">image.js:80</a>
</div>
</div>
@ -1931,7 +1937,7 @@ height and width of the overall image, overlap, and image type.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line92">image.js:92</a>
<a href="pixi_deepzoom_image.js.html#line91">image.js:91</a>
</div>
</div>
@ -2081,7 +2087,7 @@ height and width of the overall image, overlap, and image type.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line67">image.js:67</a>
<a href="pixi_deepzoom_image.js.html#line66">image.js:66</a>
</div>
</div>
@ -2231,7 +2237,7 @@ height and width of the overall image, overlap, and image type.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line214">image.js:214</a>
<a href="pixi_deepzoom_image.js.html#line213">image.js:213</a>
</div>
</div>
@ -2405,7 +2411,7 @@ on completion.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line183">image.js:183</a>
<a href="pixi_deepzoom_image.js.html#line182">image.js:182</a>
</div>
</div>
@ -2603,7 +2609,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/Flippable.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2399,7 +2405,7 @@ front.on('click', event => flippable.toggle())</code></pre>
<div class="tag-source">
<a href="pixi_flippable.js.html#line352">flippable.js:352</a>
<a href="pixi_flippable.js.html#line331">flippable.js:331</a>
</div>
</div>
@ -2506,7 +2512,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/FontInfo.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1553,7 +1559,7 @@
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/Hypenate.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1557,7 +1563,7 @@
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line118">labeledgraphics.js:118</a>
<a href="pixi_labeledgraphics.js.html#line112">labeledgraphics.js:112</a>
</div>
</div>
@ -1755,7 +1761,7 @@
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/InteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1910,7 +1916,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2069,7 +2075,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_popup.js.html#line148">popup.js:148</a>
<a href="pixi_popup.js.html#line134">popup.js:134</a>
</div>
</div>
@ -2178,7 +2184,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
</div>
</div>
@ -2337,7 +2343,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1463,7 +1469,7 @@
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line190">labeledgraphics.js:190</a>
<a href="pixi_labeledgraphics.js.html#line179">labeledgraphics.js:179</a>
</div>
</div>
@ -1555,7 +1561,7 @@
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

24
doc/out/LabeledGraphics.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1463,7 +1469,7 @@
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line176">labeledgraphics.js:176</a>
<a href="pixi_labeledgraphics.js.html#line165">labeledgraphics.js:165</a>
</div>
</div>
@ -1571,7 +1577,7 @@ resuse and place labels across different layout variants</p>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line362">labeledgraphics.js:362</a>
<a href="pixi_labeledgraphics.js.html#line341">labeledgraphics.js:341</a>
</div>
</div>
@ -1647,7 +1653,7 @@ resuse and place labels across different layout variants</p>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line374">labeledgraphics.js:374</a>
<a href="pixi_labeledgraphics.js.html#line353">labeledgraphics.js:353</a>
</div>
</div>
@ -1723,7 +1729,7 @@ resuse and place labels across different layout variants</p>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line215">labeledgraphics.js:215</a>
<a href="pixi_labeledgraphics.js.html#line204">labeledgraphics.js:204</a>
</div>
</div>
@ -1996,7 +2002,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line330">labeledgraphics.js:330</a>
<a href="pixi_labeledgraphics.js.html#line309">labeledgraphics.js:309</a>
</div>
</div>
@ -2146,7 +2152,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line339">labeledgraphics.js:339</a>
<a href="pixi_labeledgraphics.js.html#line318">labeledgraphics.js:318</a>
</div>
</div>
@ -2267,7 +2273,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line351">labeledgraphics.js:351</a>
<a href="pixi_labeledgraphics.js.html#line330">labeledgraphics.js:330</a>
</div>
</div>
@ -2388,7 +2394,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line281">labeledgraphics.js:281</a>
<a href="pixi_labeledgraphics.js.html#line270">labeledgraphics.js:270</a>
</div>
</div>
@ -2620,7 +2626,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

16
doc/out/List.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2077,7 +2083,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source">
<a href="pixi_list.js.html#line392">list.js:392</a>
<a href="pixi_list.js.html#line375">list.js:375</a>
</div>
</div>
@ -2201,7 +2207,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source">
<a href="pixi_list.js.html#line150">list.js:150</a>
<a href="pixi_list.js.html#line148">list.js:148</a>
</div>
</div>
@ -2306,7 +2312,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source">
<a href="pixi_list.js.html#line261">list.js:261</a>
<a href="pixi_list.js.html#line251">list.js:251</a>
</div>
</div>
@ -2427,7 +2433,7 @@ app.scene.addChild(list)</code></pre>
<div class="tag-source">
<a href="pixi_list.js.html#line136">list.js:136</a>
<a href="pixi_list.js.html#line134">list.js:134</a>
</div>
</div>
@ -2579,7 +2585,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/Message.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2169,7 +2175,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2435,7 +2441,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/MessageInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/MessageMessageInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

12
doc/out/Modal.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2015,7 +2021,7 @@ a string or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_modal.js.html#line172">modal.js:172</a>
<a href="pixi_modal.js.html#line169">modal.js:169</a>
</div>
</div>
@ -2229,7 +2235,7 @@ a string or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_modal.js.html#line158">modal.js:158</a>
<a href="pixi_modal.js.html#line155">modal.js:155</a>
</div>
</div>
@ -2336,7 +2342,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/ModalInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/ModalModalInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

48
doc/out/PIXIApp.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1466,7 +1472,7 @@ by several functions and makes meaningful pre-assumptions.</p></div>
<div class="tag-source">
<a href="pixi_app.js.html#line90">app.js:90</a>
<a href="pixi_app.js.html#line87">app.js:87</a>
</div>
</div>
@ -2316,7 +2322,7 @@ const app = new PIXIApp({
<div class="tag-source">
<a href="pixi_app.js.html#line293">app.js:293</a>
<a href="pixi_app.js.html#line281">app.js:281</a>
</div>
</div>
@ -2423,7 +2429,7 @@ const app = new PIXIApp({
<div class="tag-source">
<a href="pixi_app.js.html#line227">app.js:227</a>
<a href="pixi_app.js.html#line215">app.js:215</a>
</div>
</div>
@ -2552,7 +2558,7 @@ handler for the orientationchange event.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line707">app.js:707</a>
<a href="pixi_app.js.html#line667">app.js:667</a>
</div>
</div>
@ -2749,7 +2755,7 @@ to browser page coordinates.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line687">app.js:687</a>
<a href="pixi_app.js.html#line647">app.js:647</a>
</div>
</div>
@ -2946,7 +2952,7 @@ to local DisplayObject coordinates.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line265">app.js:265</a>
<a href="pixi_app.js.html#line253">app.js:253</a>
</div>
</div>
@ -3023,7 +3029,7 @@ to the layout method.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line407">app.js:407</a>
<a href="pixi_app.js.html#line385">app.js:385</a>
</div>
</div>
@ -3188,7 +3194,7 @@ to the layout method.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line258">app.js:258</a>
<a href="pixi_app.js.html#line246">app.js:246</a>
</div>
</div>
@ -3347,7 +3353,7 @@ adapt their layout to the new app size.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line485">app.js:485</a>
<a href="pixi_app.js.html#line459">app.js:459</a>
</div>
</div>
@ -3680,7 +3686,7 @@ renderer resolution?</p></td>
<div class="tag-source">
<a href="pixi_app.js.html#line522">app.js:522</a>
<a href="pixi_app.js.html#line492">app.js:492</a>
</div>
</div>
@ -4013,7 +4019,7 @@ renderer resolution?</p></td>
<div class="tag-source">
<a href="pixi_app.js.html#line463">app.js:463</a>
<a href="pixi_app.js.html#line439">app.js:439</a>
</div>
</div>
@ -4170,7 +4176,7 @@ renderer resolution?</p></td>
<div class="tag-source">
<a href="pixi_app.js.html#line448">app.js:448</a>
<a href="pixi_app.js.html#line426">app.js:426</a>
</div>
</div>
@ -4327,7 +4333,7 @@ renderer resolution?</p></td>
<div class="tag-source">
<a href="pixi_app.js.html#line621">app.js:621</a>
<a href="pixi_app.js.html#line581">app.js:581</a>
</div>
</div>
@ -4528,7 +4534,7 @@ rejected with an error.</td>
<div class="tag-source">
<a href="pixi_app.js.html#line217">app.js:217</a>
<a href="pixi_app.js.html#line205">app.js:205</a>
</div>
</div>
@ -4633,7 +4639,7 @@ rejected with an error.</td>
<div class="tag-source">
<a href="pixi_app.js.html#line245">app.js:245</a>
<a href="pixi_app.js.html#line233">app.js:233</a>
</div>
</div>
@ -4769,7 +4775,7 @@ rejected with an error.</td>
<div class="tag-source">
<a href="pixi_app.js.html#line431">app.js:431</a>
<a href="pixi_app.js.html#line409">app.js:409</a>
</div>
</div>
@ -4930,7 +4936,7 @@ called without a parameter.</td>
<div class="tag-source">
<a href="pixi_app.js.html#line590">app.js:590</a>
<a href="pixi_app.js.html#line550">app.js:550</a>
</div>
</div>
@ -5131,7 +5137,7 @@ rejected with an error.</td>
<div class="tag-source">
<a href="pixi_app.js.html#line329">app.js:329</a>
<a href="pixi_app.js.html#line317">app.js:317</a>
</div>
</div>
@ -5428,7 +5434,7 @@ rejected with an error.</td>
<div class="tag-source">
<a href="pixi_app.js.html#line167">app.js:167</a>
<a href="pixi_app.js.html#line161">app.js:161</a>
</div>
</div>
@ -5534,7 +5540,7 @@ Overwrite this method if you need additonal views and components.</p>
<div class="tag-source">
<a href="pixi_app.js.html#line652">app.js:652</a>
<a href="pixi_app.js.html#line612">app.js:612</a>
</div>
</div>
@ -5737,7 +5743,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

16
doc/out/Popup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1465,7 +1471,7 @@
<div class="tag-source">
<a href="pixi_popup.js.html#line226">popup.js:226</a>
<a href="pixi_popup.js.html#line206">popup.js:206</a>
</div>
</div>
@ -1901,7 +1907,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2062,7 +2068,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_popup.js.html#line148">popup.js:148</a>
<a href="pixi_popup.js.html#line134">popup.js:134</a>
</div>
</div>
@ -2171,7 +2177,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
</div>
</div>
@ -2330,7 +2336,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/PopupInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/PopupMenu.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1955,7 +1961,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2116,7 +2122,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_popup.js.html#line148">popup.js:148</a>
<a href="pixi_popup.js.html#line134">popup.js:134</a>
</div>
</div>
@ -2225,7 +2231,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
</div>
</div>
@ -2384,7 +2390,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/PopupMenuPopupInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/PopupMenuPopupPopupInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/PopupPopupInteractivePopup.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1783,7 +1789,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

12
doc/out/Progress.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2552,7 +2558,7 @@ app.scene.addChild(progress)</code></pre>
<div class="tag-source">
<a href="pixi_progress.js.html#line289">progress.js:289</a>
<a href="pixi_progress.js.html#line263">progress.js:263</a>
</div>
</div>
@ -2762,7 +2768,7 @@ app.scene.addChild(progress)</code></pre>
<div class="tag-source">
<a href="pixi_progress.js.html#line278">progress.js:278</a>
<a href="pixi_progress.js.html#line252">progress.js:252</a>
</div>
</div>
@ -2869,7 +2875,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/Scrollview.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1701,7 +1707,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/Slider.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2643,7 +2649,7 @@ app.scene.addChild(slider)</code></pre>
<div class="tag-source">
<a href="pixi_slider.js.html#line492">slider.js:492</a>
<a href="pixi_slider.js.html#line458">slider.js:458</a>
</div>
</div>
@ -2748,7 +2754,7 @@ app.scene.addChild(slider)</code></pre>
<div class="tag-source">
<a href="pixi_slider.js.html#line301">slider.js:301</a>
<a href="pixi_slider.js.html#line287">slider.js:287</a>
</div>
</div>
@ -2853,7 +2859,7 @@ app.scene.addChild(slider)</code></pre>
<div class="tag-source">
<a href="pixi_slider.js.html#line476">slider.js:476</a>
<a href="pixi_slider.js.html#line442">slider.js:442</a>
</div>
</div>
@ -2960,7 +2966,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/Switch.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -3073,7 +3079,7 @@ app.scene.addChild(switch1)</code></pre>
<div class="tag-source">
<a href="pixi_switch.js.html#line553">switch.js:553</a>
<a href="pixi_switch.js.html#line508">switch.js:508</a>
</div>
</div>
@ -3178,7 +3184,7 @@ app.scene.addChild(switch1)</code></pre>
<div class="tag-source">
<a href="pixi_switch.js.html#line301">switch.js:301</a>
<a href="pixi_switch.js.html#line299">switch.js:299</a>
</div>
</div>
@ -3283,7 +3289,7 @@ app.scene.addChild(switch1)</code></pre>
<div class="tag-source">
<a href="pixi_switch.js.html#line533">switch.js:533</a>
<a href="pixi_switch.js.html#line488">switch.js:488</a>
</div>
</div>
@ -3390,7 +3396,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1463,7 +1469,7 @@
<div class="tag-source">
<a href="pixi_labeledgraphics.js.html#line139">labeledgraphics.js:139</a>
<a href="pixi_labeledgraphics.js.html#line133">labeledgraphics.js:133</a>
</div>
</div>
@ -1684,7 +1690,7 @@
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/Theme.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2999,7 +3005,7 @@ const app = new PIXIApp({
<div class="tag-source">
<a href="pixi_theme.js.html#line176">theme.js:176</a>
<a href="pixi_theme.js.html#line175">theme.js:175</a>
</div>
</div>
@ -3159,7 +3165,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/ThemeDark.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1465,7 +1471,7 @@
<div class="tag-source">
<a href="pixi_theme.js.html#line208">theme.js:208</a>
<a href="pixi_theme.js.html#line207">theme.js:207</a>
</div>
</div>
@ -1580,7 +1586,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/ThemeLight.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1466,7 +1472,7 @@ The color1 is set to 0xf6f6f6, color2 to 0x282828.</p></div>
<div class="tag-source">
<a href="pixi_theme.js.html#line233">theme.js:233</a>
<a href="pixi_theme.js.html#line232">theme.js:232</a>
</div>
</div>
@ -1592,7 +1598,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

10
doc/out/ThemeRed.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1466,7 +1472,7 @@ The primaryColor is set to 0xd92f31.</p></div>
<div class="tag-source">
<a href="pixi_theme.js.html#line261">theme.js:261</a>
<a href="pixi_theme.js.html#line260">theme.js:260</a>
</div>
</div>
@ -1592,7 +1598,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

16
doc/out/TileQuadNode.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1472,7 +1478,7 @@ the memory pressure.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line265">image.js:265</a>
<a href="pixi_deepzoom_image.js.html#line256">image.js:256</a>
</div>
</div>
@ -1676,7 +1682,7 @@ the memory pressure.</p></div>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line308">image.js:308</a>
<a href="pixi_deepzoom_image.js.html#line294">image.js:294</a>
</div>
</div>
@ -1844,7 +1850,7 @@ and west flags to address nw, ne, sw, and se.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line280">image.js:280</a>
<a href="pixi_deepzoom_image.js.html#line271">image.js:271</a>
</div>
</div>
@ -1921,7 +1927,7 @@ an indicator of tiles to free.</p>
<div class="tag-source">
<a href="pixi_deepzoom_image.js.html#line294">image.js:294</a>
<a href="pixi_deepzoom_image.js.html#line280">image.js:280</a>
</div>
</div>
@ -2044,7 +2050,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/Tooltip.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2077,7 +2083,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line325">abstractpopup.js:325</a>
<a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
</div>
</div>
@ -2238,7 +2244,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line192">abstractpopup.js:192</a>
<a href="pixi_abstractpopup.js.html#line184">abstractpopup.js:184</a>
</div>
</div>
@ -2347,7 +2353,7 @@ a string, a number or a PIXI.Text object.</p>
<div class="tag-source">
<a href="pixi_abstractpopup.js.html#line306">abstractpopup.js:306</a>
<a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
</div>
</div>
@ -2506,7 +2512,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

12
doc/out/UITest.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1962,7 +1968,7 @@ test.start()</code></pre>
<div class="tag-source">
<a href="uitest.js.html#line301">uitest.js:301</a>
<a href="uitest.js.html#line287">uitest.js:287</a>
</div>
</div>
@ -2596,7 +2602,7 @@ test.start()</code></pre>
<div class="tag-source">
<a href="uitest.js.html#line455">uitest.js:455</a>
<a href="uitest.js.html#line423">uitest.js:423</a>
</div>
</div>
@ -4177,7 +4183,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/Volatile.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -2093,7 +2099,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.3</a> on Thu Jul 18 2019 12:16:19 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

14
doc/out/global.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1655,7 +1661,7 @@
<div class="tag-source">
<a href="pixi_button.js.html#line9">button.js:9</a>
<a href="pixi_button.js.html#line10">button.js:10</a>
</div>
</div>
@ -1943,7 +1949,7 @@
<div class="tag-source">
<a href="pixi_button.js.html#line25">button.js:25</a>
<a href="pixi_button.js.html#line26">button.js:26</a>
</div>
</div>
@ -2231,7 +2237,7 @@
<div class="tag-source">
<a href="pixi_button.js.html#line17">button.js:17</a>
<a href="pixi_button.js.html#line18">button.js:18</a>
</div>
</div>
@ -3314,7 +3320,7 @@
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

8
doc/out/index.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1479,7 +1485,7 @@
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1523,12 +1529,10 @@ 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
@ -1571,10 +1575,7 @@ export default class AbstractPopup extends PIXI.Graphics {
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)
}
@ -1601,10 +1602,7 @@ export default class AbstractPopup extends PIXI.Graphics {
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
}
@ -1675,31 +1673,16 @@ 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 &amp;&amp; diameter === this.wantedWidth) {
this.drawCircle(
this.wantedWidth / 2,
this.wantedHeight / 2,
this.opts.radius
)
this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius)
} else {
this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius)
}
this.endFill()
@ -1825,7 +1808,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1468,10 +1474,7 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
let dy = 0
let canvas = this.renderer.view
let context = canvas.getContext('webgl')
if (
context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; canvas.height
) {
if (context.drawingBufferWidth &lt; canvas.width || context.drawingBufferHeight &lt; canvas.height) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
//dx = wantedWidth - context.drawingBufferWidth
@ -1583,10 +1586,7 @@ 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')
@ -1617,18 +1617,12 @@ export default class PIXIApp extends PIXI.Application {
uri: '/graphql'
})
const wsClient = new subscriptions.SubscriptionClient(
`wss://${location.hostname}/subscriptions`,
{
reconnect: true,
connectionParams: {}
}
)
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true,
connectionParams: {}
})
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface,
wsClient
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
@ -1764,10 +1758,7 @@ 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()
@ -1788,8 +1779,7 @@ 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)
}
@ -1818,8 +1808,7 @@ export default class PIXIApp extends PIXI.Application {
if (
context !== null &amp;&amp;
(context.drawingBufferWidth &lt; canvas.width ||
context.drawingBufferHeight &lt; canvas.height)
(context.drawingBufferWidth &lt; canvas.width || context.drawingBufferHeight &lt; canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
@ -1828,12 +1817,7 @@ 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)
}
/**
@ -1884,9 +1868,7 @@ 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
@ -1899,9 +1881,7 @@ 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
@ -1920,11 +1900,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
loadSprites(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
this.loadTextures(
resources,
textures => {
@ -1957,11 +1933,7 @@ 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]
}
@ -1974,16 +1946,10 @@ export default class PIXIApp extends PIXI.Application {
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)
@ -2148,11 +2114,7 @@ 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)
}
}
@ -2227,7 +2189,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1527,11 +1533,7 @@ export default class Badge extends AbstractPopup {
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)
}
}
@ -1548,12 +1550,8 @@ export default class Badge extends AbstractPopup {
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
}
@ -1571,7 +1569,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1508,9 +1514,7 @@ 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)
}
/**
@ -1629,12 +1633,7 @@ 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)
@ -1668,12 +1667,7 @@ 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) {
@ -1682,12 +1676,7 @@ 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]
}
}
}
@ -1738,7 +1727,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1438,11 +1444,12 @@
</div>
</header>
<article>
<pre id="source-code" class="prettyprint source linenums"><code>/* global PIXI TweenLite */
<pre id="source-code" class="prettyprint source linenums"><code>/* global */
import Theme from './theme.js'
import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Events from '../events.js'
import { Points } from '../utils.js'
/**
* Callback for the button action.
@ -1575,8 +1582,8 @@ export default class Button extends PIXI.Container {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
textStyle: {},
textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: false,
@ -1596,15 +1603,12 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id
if (
typeof this.opts.icon === 'undefined' &amp;&amp;
typeof this.opts.iconActive !== 'undefined'
) {
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
if (typeof this.opts.icon === 'undefined' &amp;&amp; typeof this.opts.iconActive !== 'undefined') {
this.opts.icon = this.opts.iconActive
} else if (
typeof this.opts.icon !== 'undefined' &amp;&amp;
typeof this.opts.iconActive === 'undefined'
) {
} else if (typeof this.opts.icon !== 'undefined' &amp;&amp; typeof this.opts.iconActive === 'undefined') {
this.opts.iconActive = this.opts.icon
}
@ -1620,6 +1624,8 @@ export default class Button extends PIXI.Container {
this._active = null
this._disabled = null
this.__start = { x: null, y: null }
this.iconInactive = null
this.iconActive = null
this.text = null
@ -1674,17 +1680,11 @@ 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
@ -1701,17 +1701,17 @@ export default class Button extends PIXI.Container {
this.capture(e)
})
this.button.on('pointerout', e => {
this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
})
this.button.on('pointerout', this.onEnd.bind(this))
this.button.on('pointercancel', this.onEnd.bind(this))
this.button.on('pointerupoutside', this.onEnd.bind(this))
this.button.on('pointertap', this.onEnd.bind(this))
this.button.on('scroll', this.onEnd.bind(this))
// eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => {
//this.capture(e)
this.__start.x = e.data.global.x
this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
@ -1720,25 +1720,30 @@ export default class Button extends PIXI.Container {
this.button.on('pointerup', e => {
this.capture(e)
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
const distance = Points.distance(e.data.global, this.__start)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (distance &lt; 5) {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
}
}
})
@ -1759,11 +1764,7 @@ export default class Button extends PIXI.Container {
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)
}
}
@ -1787,44 +1788,12 @@ export default class Button extends PIXI.Container {
}
const badge = new Badge(opts)
switch (opts.align) {
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
this.badge = badge
}
this.layout()
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -1909,6 +1878,39 @@ export default class Button extends PIXI.Container {
this.icon = icon
// badge
//--------------------
if (this.badge) {
this.removeChild(this.badge)
const width = this._width
const height = this._height
this.addChild(this.badge)
const badge = this.badge
switch (badge.opts.align) {
case 'left':
badge.x = -badge.width / 2 + badge.opts.offsetLeft
break
case 'center':
badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft
break
case 'right':
badge.x = width - badge.width / 2 + badge.opts.offsetLeft
}
switch (badge.opts.verticalAlign) {
case 'top':
badge.y = -badge.height / 2 + badge.opts.offsetTop
break
case 'middle':
badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop
break
case 'bottom':
badge.y = height - badge.height / 2 + badge.opts.offsetTop
}
}
// draw
//-----------------
this.draw()
@ -1956,8 +1958,7 @@ export default class Button extends PIXI.Container {
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
}
@ -1969,8 +1970,7 @@ 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
}
@ -1986,30 +1986,13 @@ export default class Button extends PIXI.Container {
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
@ -2126,9 +2109,7 @@ export default class Button extends PIXI.Container {
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)
@ -2168,6 +2149,14 @@ export default class Button extends PIXI.Container {
this.icon.tint = value
}
}
onEnd(event) {
this.capture(event)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
}
}
</code></pre>
</article>
@ -2182,7 +2171,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1438,8 +1444,11 @@
</div>
</header>
<article>
<pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
<pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
import Theme from './theme.js'
import Button from './button.js'
import Events from '../events.js'
/**
* Class that represents a PixiJS ButtonGroup.
@ -1463,7 +1472,7 @@ import Button from './button.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
*/
export default class ButtonGroup extends PIXI.Graphics {
export default class ButtonGroup extends PIXI.Container {
/**
* Creates an instance of a ButtonGroup.
*
@ -1479,6 +1488,10 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
* @param {number} [opts.maxWidth] - The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
* @param {number} [opts.maxHeight] - The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
* @param {number} [opts.stackPadding=10] - The padding for stacked buttons.
* @param {PIXI.Application} [opts.app=window.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@ -1527,6 +1540,10 @@ export default class ButtonGroup extends PIXI.Graphics {
buttons: [],
minWidth: 44,
minHeight: 44,
maxWidth: null,
maxHeight: null,
stackPadding: 10,
app: window.app,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
@ -1542,8 +1559,8 @@ export default class ButtonGroup extends PIXI.Graphics {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
textStyle: {},
textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: null,
@ -1556,9 +1573,13 @@ export default class ButtonGroup extends PIXI.Graphics {
opts
)
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
this.buttons = []
this._disabled = null
this.__dragging = false
this.visible = this.opts.visible
@ -1578,9 +1599,16 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Graphics()
this.addChild(container)
this.container = container
// Buttons
//-----------------
let position = 0
let index = 0
for (let it of this.opts.buttons) {
delete it.x
@ -1604,19 +1632,11 @@ 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
@ -1635,10 +1655,7 @@ export default class ButtonGroup extends PIXI.Graphics {
it.align = it.align || this.opts.align
it.verticalAlign = it.verticalAlign || this.opts.verticalAlign
it.afterAction = (event, button) => {
if (
this.opts.type === 'radio' &amp;&amp;
button.opts.type === 'default'
) {
if (this.opts.type === 'radio' &amp;&amp; button.opts.type === 'default') {
this.buttons.forEach(it => {
if (it.opts.type === 'default') {
it.active = false
@ -1655,23 +1672,24 @@ 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)
}
}
let button = new Button(it)
this.addChild(button)
this.container.addChild(button)
this.buttons.push(button)
position +=
(this.opts.orientation === 'horizontal'
? button.width
: button.height) + this.opts.margin
button.__originalPosition = {
x: button.x,
y: button.y
}
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
button.__initIndex = index
index++
}
if (this.opts.orientation === 'vertical') {
@ -1689,6 +1707,43 @@ export default class ButtonGroup extends PIXI.Graphics {
this.disabled = this.opts.disabled
}
// interaction
//--------------------
if (this.opts.margin > 0 &amp;&amp; (this.opts.maxWidth || this.opts.maxHeight)) {
this.interactive = true
this.on('pointerdown', this.onStart.bind(this))
this.on('pointermove', this.onMove.bind(this))
this.on('pointerup', this.onEnd.bind(this))
this.on('pointercancel', this.onEnd.bind(this))
this.on('pointerout', this.onEnd.bind(this))
this.on('pointerupoutside', this.onEnd.bind(this))
this.on('scroll', this.onScroll.bind(this))
// mousewheel
//--------------------
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
event.preventDefault()
this.emit('scroll', event)
}
})
}
const background = new PIXI.Graphics()
background.beginFill(0x000000, 0)
background.drawRect(0, 0, this.width, this.height)
background.endFill()
this.addChildAt(background, 0)
this.__initWidth = this.container.width
this.__initHeight = this.container.height
}
return this
}
@ -1706,6 +1761,12 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.draw()
// stack
//-----------------
if (this.opts.margin > 0 &amp;&amp; (this.opts.maxWidth || this.opts.maxHeight)) {
this.stack()
}
return this
}
@ -1719,41 +1780,27 @@ export default class ButtonGroup extends PIXI.Graphics {
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.beginFill(this.opts.fill, this.opts.fillAlpha)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
this.container.clear()
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
this.container.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.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
this.buttons.forEach((it, i) => {
if (i > 0) {
this.moveTo(it.x, it.y)
this.container.moveTo(it.x, it.y)
if (this.opts.orientation === 'horizontal') {
this.lineTo(it.x, it.height)
this.container.lineTo(it.x, it.height)
} else {
this.lineTo(it.width, it.y)
this.container.lineTo(it.width, it.y)
}
}
})
this.endFill()
this.container.endFill()
}
return this
@ -1774,6 +1821,34 @@ export default class ButtonGroup extends PIXI.Graphics {
this.buttons.forEach(it => (it.disabled = value))
}
/**
* Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
*
* @member {number}
*/
get maxWidth() {
return this.opts.maxWidth
}
set maxWidth(value) {
this.opts.maxWidth = value
this.layout()
}
/**
* Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
*
* @member {number}
*/
get maxHeight() {
return this.opts.maxHeight
}
set maxHeight(value) {
this.opts.maxHeight = value
this.layout()
}
/**
* Searches all buttons of the button group and returns the maximum width of one button.
*
@ -1807,6 +1882,284 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
*
* @private
* @param {*} event
*/
onStart(event) {
if (
(this.opts.maxWidth != null &amp;&amp; this.__initWidth > this.opts.maxWidth) ||
(this.opts.maxHeight != null &amp;&amp; this.__initHeight > this.opts.maxHeight)
) {
this.__dragging = true
this.capture(event)
this.__delta = {
x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
}
/**
*
* @private
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x = event.data.global.x + this.__delta.x
} else {
this.container.position.y = event.data.global.y + this.__delta.y
}
this.stack()
}
}
/**
*
* @private
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
if (this.opts.orientation === 'horizontal') {
if (this.__initWidth > this.opts.maxWidth) {
// stack!
const distanceToLeft = this.container.x
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
if (distanceToLeft > 0) {
throwProps.x.end = 0
} else if (distanceToRight > 0) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth
}
} else {
// just magnetize
throwProps.x.end = 0
}
} else {
if (this.__initHeight > this.opts.maxHeight) {
// stack!
const distanceToTop = this.container.y
const distanceToBottom = this.opts.maxHeight - this.container.y - this.__initHeight
if (distanceToTop > 0) {
throwProps.y.end = 0
} else if (distanceToBottom > 0) {
throwProps.y.end = this.opts.maxHeight - this.__initHeight
}
} else {
// just magnetize
throwProps.y.end = 0
}
}
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
} else {
if (this.opts.orientation === 'horizontal' &amp;&amp; throwProps.x.end != null) {
TweenMax.to(this.container.position, 0.3, { x: throwProps.x.end, onUpdate: this.stack.bind(this) })
} else if (this.opts.orientation === 'vertical' &amp;&amp; throwProps.y.end != null) {
TweenMax.to(this.container.position, 0.3, { y: throwProps.y.end, onUpdate: this.stack.bind(this) })
}
}
}
}
/**
*
* @private
* @param {*} event
*/
onScroll(event) {
if (
(this.opts.maxWidth != null &amp;&amp; this.__initWidth > this.opts.maxWidth) ||
(this.opts.maxHeight != null &amp;&amp; this.__initHeight > this.opts.maxHeight)
) {
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.__initWidth &lt; this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} 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.container.height &lt; this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
}
}
this.stack()
}
}
/**
* Captures an event to inform InteractionMapper about processed events.
*
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data &amp;&amp; event.data.originalEvent ? event.data.originalEvent : event
Events.capturedBy(originalEvent, this)
}
/**
* @private
*/
stack() {
if (this.opts.maxWidth) {
this._stackHorizontal()
} else if (this.opts.maxHeight) {
this._stackVertical()
}
}
/**
* @private
*/
_stackHorizontal() {
const sorted = []
let reverseCounter = this.buttons.length - 1
this.buttons.forEach((it, index) => {
const leftCorner = it.__originalPosition.x + this.container.x
const rightCorner = it.__originalPosition.x + it.button.width
const paddingLeft = index * this.opts.stackPadding
const paddingRight = reverseCounter * this.opts.stackPadding
if (leftCorner &lt; paddingLeft) {
// left border
it.x = -this.container.x + paddingLeft
} else if (rightCorner > -this.container.x + this.opts.maxWidth - paddingRight) {
// right border
it.x = -this.container.x + this.opts.maxWidth - it.button.width - paddingRight
} else {
it.x = it.__originalPosition.x
}
reverseCounter--
sorted.push(it)
})
const min = Math.min(...sorted.map(it => it.x))
const max = Math.max(...sorted.map(it => it.x + it.button.width))
const center = (min + max) / 2
// z-index
sorted
.sort((a, b) => {
const centerA = a.x + a.button.width / 2
const centerB = b.x + b.button.width / 2
if (centerA &lt; center &amp;&amp; centerB &lt; center) {
if (a.x &lt; b.x) {
return -1
} else if (b.x &lt; a.x) {
return 1
}
} else if (centerA > center &amp;&amp; centerB > center) {
if (a.x + a.button.width > b.x + b.button.width) {
return -1
} else if (b.x + b.button.width &lt; a.x + a.button.x) {
return 1
}
}
return 0
})
.forEach(it => it.parent.addChild(it))
}
/**
* @private
*/
_stackVertical() {
const sorted = []
let reverseCounter = this.buttons.length - 1
this.buttons.forEach((it, index) => {
const topCorner = it.__originalPosition.y + this.container.y
const bottomCorner = it.__originalPosition.y + it.button.height
const paddingTop = index * this.opts.stackPadding
const paddingBottom = reverseCounter * this.opts.stackPadding
if (topCorner &lt; paddingTop) {
// top border
it.y = -this.container.y + paddingTop
} else if (bottomCorner > -this.container.y + this.opts.maxHeight - paddingBottom) {
// bottom border
it.y = -this.container.y + this.opts.maxHeight - it.button.height - paddingBottom
} else {
it.y = it.__originalPosition.y
}
reverseCounter--
sorted.push(it)
})
const min = Math.min(...sorted.map(it => it.y))
const max = Math.max(...sorted.map(it => it.y + it.button.height))
const center = (min + max) / 2
// z-index
sorted
.sort((a, b) => {
const centerA = a.y + a.button.height / 2
const centerB = b.y + b.button.height / 2
if (centerA &lt; center &amp;&amp; centerB &lt; center) {
if (a.y &lt; b.y) {
return -1
} else if (b.y &lt; a.y) {
return 1
}
} else if (centerA > center &amp;&amp; centerB > center) {
if (a.y + a.button.height > b.y + b.button.height) {
return -1
} else if (b.y + b.button.height &lt; a.y + a.button.y) {
return 1
}
}
return 0
})
.forEach(it => it.parent.addChild(it))
}
}
</code></pre>
</article>
@ -1821,7 +2174,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

95
doc/out/pixi_deepzoom_image.js.html
View File

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1480,15 +1486,14 @@ export class DeepZoomInfo {
// number in the file system for the folder with tiles
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
this.type = this.type || 'dzi'
this.urlTileTemplate =
this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
this.setupDimensions()
}
/* Computes the needed number of layers from the width and height
* of the image. Note that this includes the level 0, i.e. 0 ... 4
* means that 5 levels exist.
**/
* of the image. Note that this includes the level 0, i.e. 0 ... 4
* means that 5 levels exist.
**/
numLevels() {
let maxDimension = Math.max(this.width, this.height)
let boundary = this.type === 'dzi' ? 1 : this.tileSize
@ -1671,15 +1676,7 @@ export class DeepZoomInfo {
test() {
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
for (let i = 0; i &lt;= this.maxLevel; i++) {
console.log(
' ' +
i +
' -> ' +
this.getScale(i) +
' [' +
this.dimensions(i) +
']'
)
console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
}
console.log(this.urlForTile(this.baseLevel, 0, 0))
}
@ -1719,12 +1716,7 @@ class TileQuadNode {
**/
noQuads() {
if (this.previous === null) return false
return (
this.nw === null &amp;&amp;
this.ne === null &amp;&amp;
this.sw === null &amp;&amp;
this.se === null
)
return this.nw === null &amp;&amp; this.ne === null &amp;&amp; this.sw === null &amp;&amp; this.se === null
}
/** Unlink the given quad node
@ -1763,7 +1755,6 @@ class TileQuadNode {
}
}
/**
* The main class of a deeply zoomable image that is represented by a hierarchy
* of tile layers for each zoom level. This gives the user the impression that
@ -1781,7 +1772,7 @@ export class DeepZoomImage extends PIXI.Container {
debug = false,
shadow = false,
center = false,
world = null, // Defines the world bounds the images lives in
world = null, // Defines the world bounds the images lives in
highResolution = true,
autoLoadTiles = true,
useWorker = '',
@ -1796,9 +1787,7 @@ export class DeepZoomImage extends PIXI.Container {
this.shadow = shadow
this.world = world
this.useWorker = useWorker
this.resolution = highResolution
? Math.round(window.devicePixelRatio)
: 1
this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
this.alpha = alpha
this.fastLoads = 0
this.active = true
@ -1988,7 +1977,7 @@ export class DeepZoomImage extends PIXI.Container {
**/
get maxScale() {
let delta = this.info.maxLevel - this.info.baseLevel
return Math.pow(2, delta) / this.resolution * 2
return (Math.pow(2, delta) / this.resolution) * 2
}
/** Getter for the current width.
@ -2003,7 +1992,6 @@ export class DeepZoomImage extends PIXI.Container {
return this.pixelSize[1]
}
/* Overrides PIXI.Container.hitArea()
* Allows to optimize the hit testing. Container with hit areas are directly
* hit tested without consideration of children.
@ -2111,11 +2099,7 @@ export class DeepZoomImage extends PIXI.Container {
let topLeft = tiles.toLocal(worldTopLeft)
let bottomRight = tiles.toLocal(worldBottomRight)
tiles._centerPoint = tilesCenter
let bounds = new PIXI.Rectangle(
topLeft.x,
topLeft.y,
bottomRight.x - topLeft.x,
bottomRight.y - topLeft.y)
let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
tiles._boundsRect = bounds
@ -2160,9 +2144,6 @@ export class DeepZoomImage extends PIXI.Container {
return { centerCol, centerRow, needed }
}
/** Returns all changed tiles for a given level.
* @param {Tiles} tiles - the grid of tiles
* @param {number} level - The zoom level of the grid
@ -2215,8 +2196,7 @@ export class DeepZoomImage extends PIXI.Container {
* @param {PIXI.Point} about - point of interaction
*/
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
if (tiles.isComplete())
return
if (tiles.isComplete()) return
let referenceCol = -1
let referenceRow = -1
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
@ -2227,8 +2207,7 @@ export class DeepZoomImage extends PIXI.Container {
let scaledTileSize = tiles.tileSize * tiles.tileScale
referenceCol = Math.floor(refPoint.x / scaledTileSize)
referenceRow = Math.floor(refPoint.y / scaledTileSize)
}
else {
} else {
referenceCol = centerCol
referenceRow = centerRow
}
@ -2266,17 +2245,7 @@ export class DeepZoomImage extends PIXI.Container {
let [cols, rows, w, h] = this.info.dimensions(level)
let increasedLevels = level - this.info.baseLevel
let invScale = Math.pow(0.5, increasedLevels)
let tiles = new Tiles(
level,
this,
invScale,
cols,
rows,
w,
h,
this.info.tileSize,
this.info.overlap
)
let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
this.addTiles(key, tiles)
if (this.info.clip) {
let rest = this.info.rests[level]
@ -2379,7 +2348,6 @@ export class DeepZoomImage extends PIXI.Container {
})
}
/**
* Destroy tiles in all layers that are no longer needed
*
@ -2424,8 +2392,8 @@ export class DeepZoomImage extends PIXI.Container {
}
/* Tint all tiles
* @param {number} level - The zoom level of the grid
*/
* @param {number} level - The zoom level of the grid
*/
tintTilesBelowLevel(level) {
Object.keys(this.tileLayers).forEach(key => {
let tiles = this.tileLayers[key]
@ -2471,8 +2439,7 @@ export class DeepZoomImage extends PIXI.Container {
})
if (this.fastLoads == 3) {
this.fastLoads = 0
}
else {
} else {
return
}
}
@ -2500,10 +2467,10 @@ export class DeepZoomImage extends PIXI.Container {
}
/**
*Activates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
*Activates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
activate() {
this.active = true
this.destroyTilesAboveLevel(this.currentLevel)
@ -2512,10 +2479,10 @@ export class DeepZoomImage extends PIXI.Container {
}
/**
*Dectivates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
*Dectivates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
deactivate() {
this.active = false
this.destroyAllTiles()
@ -2545,7 +2512,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1533,12 +1539,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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
//--------------------
@ -1577,9 +1578,7 @@ 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(0.98)
@ -1671,21 +1670,11 @@ 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
@ -1771,15 +1760,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow
//--------------------
new TimelineMax()
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
new TimelineMax().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: 0.2, ease })
new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
}
/**
@ -1793,8 +1778,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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
@ -1861,10 +1845,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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 = [
@ -1925,7 +1906,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1517,15 +1523,9 @@ export class Hypenate {
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 {
newWord += part
@ -1576,12 +1576,7 @@ 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
@ -1730,21 +1725,11 @@ 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 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
) {
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
return { ...data, length: wordWrapWidth }
}
return {
@ -1870,7 +1855,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1438,7 +1444,7 @@
</div>
</header>
<article>
<pre id="source-code" class="prettyprint source linenums"><code>/* globals */
<pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
/* Imports */
import Events from '../events.js'
@ -1548,9 +1554,7 @@ 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)) {
@ -1607,14 +1611,10 @@ 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))
@ -1640,14 +1640,10 @@ export default class List extends PIXI.Container {
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
}
@ -1781,8 +1777,7 @@ export default class List extends PIXI.Container {
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
@ -1803,20 +1798,14 @@ export default class List extends PIXI.Container {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (
this.container.position.x + this.innerWidth &lt;
this.opts.width
) {
} else if (this.container.position.x + this.innerWidth &lt; this.opts.width) {
this.container.position.x = this.opts.width - this.innerWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (
this.container.position.y + this.innerHeight &lt;
this.opts.height
) {
} else if (this.container.position.y + this.innerHeight &lt; this.opts.height) {
this.container.position.y = this.opts.height - this.innerHeight
}
}
@ -1828,10 +1817,7 @@ export default class List extends PIXI.Container {
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent =
event.data &amp;&amp; event.data.originalEvent
? event.data.originalEvent
: event
const originalEvent = event.data &amp;&amp; event.data.originalEvent ? event.data.originalEvent : event
Events.capturedBy(originalEvent, this)
}
}
@ -1848,7 +1834,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1531,8 +1537,7 @@ export default class Message extends InteractivePopup {
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
}
@ -1545,8 +1550,7 @@ export default class Message extends InteractivePopup {
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
}
}
@ -1579,7 +1583,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1574,10 +1580,7 @@ export default class Modal extends PIXI.Container {
// 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()
@ -1661,7 +1664,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1513,10 +1519,7 @@ 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
@ -1540,10 +1543,7 @@ export class InteractivePopup extends AbstractPopup {
//-----------------
if (this.opts.maxWidth) {
const wordWrapWidth =
this.opts.maxWidth -
2 * this.opts.padding -
this.smallPadding -
this._closeButton.width
this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
if (this._header) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} else if (this._content) {
@ -1556,18 +1556,10 @@ 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
)
Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
)
}
this.addChild(this._buttons)
@ -1589,18 +1581,15 @@ export class InteractivePopup extends AbstractPopup {
// 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
@ -1623,10 +1612,7 @@ 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
}
@ -1688,7 +1674,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1514,10 +1520,7 @@ export default class PopupMenu extends Popup {
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
}
@ -1574,7 +1577,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1594,10 +1600,7 @@ 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()
}
@ -1641,20 +1644,10 @@ export default class Progress extends PIXI.Container {
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)
}
@ -1678,24 +1671,11 @@ export default class Progress extends PIXI.Container {
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)
}
@ -1779,7 +1759,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1512,7 +1518,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1616,12 +1622,8 @@ export default class Slider extends PIXI.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
@ -1633,16 +1635,8 @@ 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)
@ -1703,9 +1697,7 @@ 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
)
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}
})
@ -1765,11 +1757,7 @@ 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)
@ -1783,20 +1771,10 @@ 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()
@ -1834,10 +1812,7 @@ 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)
}
/**
@ -1853,10 +1828,7 @@ 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
}
/**
@ -1951,7 +1923,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1592,10 +1598,8 @@ export default class Switch extends PIXI.Container {
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
//-----------------
@ -1757,32 +1761,15 @@ export default class Switch extends PIXI.Container {
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,
@ -1804,21 +1791,11 @@ export default class Switch extends PIXI.Container {
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
this.opts.controlFillActive,
this.opts.controlFillActiveAlpha
)
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()
@ -1834,24 +1811,11 @@ export default class Switch extends PIXI.Container {
*/
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,
@ -1871,10 +1835,7 @@ export default class Switch extends PIXI.Container {
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
this.tempAnimated.controlFill,
this.tempAnimated.controlFillAlpha
)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill()
@ -2016,7 +1977,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1520,8 +1526,7 @@ 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
@ -1713,7 +1718,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1605,7 +1611,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1609,7 +1615,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.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

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

@ -252,6 +252,10 @@
<li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
<li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
<li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
</ul>
<ul class="typedefs itemMembers">
@ -263,6 +267,8 @@
<span class="subtitle">Methods</span>
<li class="parent " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
<li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
<li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@ -1634,9 +1640,7 @@ export default class UITest {
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
//--------------------
@ -1674,14 +1678,8 @@ export default class UITest {
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
@ -1693,14 +1691,8 @@ 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
@ -1795,14 +1787,8 @@ export default class UITest {
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
@ -1814,14 +1800,8 @@ 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
@ -1833,14 +1813,8 @@ 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
@ -1991,66 +1965,39 @@ export default class UITest {
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 &amp;&amp;
(opts.doubleCallbacks || key === 0)
) {
if (opts.onStart &amp;&amp; (opts.doubleCallbacks || key === 0)) {
opts.onStart.call(this, event)
}
},
onUpdate: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[1],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onUpdate
//--------------------
if (
opts.onUpdate &amp;&amp;
(opts.doubleCallbacks || key === 0)
) {
if (opts.onUpdate &amp;&amp; (opts.doubleCallbacks || key === 0)) {
opts.onUpdate.call(this, event)
}
},
onComplete: () => {
// create and dispatch event
//--------------------
const event = Event.create(
elem,
from,
opts.eventTypes[2],
eventOpts
)
if (this.opts.debug)
console.log('dispatch event', event)
const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
if (this.opts.debug) console.log('dispatch event', event)
elem.dispatchEvent(event)
// onComplete
//--------------------
if (
opts.onComplete &amp;&amp;
(opts.doubleCallbacks || key === 0)
) {
if (opts.onComplete &amp;&amp; (opts.doubleCallbacks || key === 0)) {
opts.onComplete.call(this, event)
}
}
@ -2168,9 +2115,7 @@ export default class UITest {
'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) {
@ -2245,12 +2190,8 @@ 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
}
@ -2306,9 +2247,7 @@ 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
}
@ -2444,16 +2383,9 @@ 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 = {}
) {
static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
const rect =
typeof target.getBoundingClientRect === 'function'
? target.getBoundingClientRect()
: { x: 0, y: 0 }
typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }
// EventInit
const eventOpts = {
@ -2512,25 +2444,12 @@ class Event {
if (type.startsWith('pointer')) {
return new PointerEvent(
type,
Object.assign(
{},
eventOpts,
uiEventOpts,
mouseEventOpts,
pointerEventOpts,
opts
)
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))
}
}
}
@ -2547,7 +2466,7 @@ class Event {
<footer class="content-size">
<div class="footer">
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)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Aug 08 2019 14:32:42 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>

20
gulpfile.js
View File

@ -38,13 +38,9 @@ function vendors() {
}
function preload() {
return src(
[
'./node_modules/gsap/src/uncompressed/TweenMax.js',
'./lib/3rdparty/convertPointFromPageToNode.js'
],
{ sourcemaps: false }
)
return src(['./node_modules/gsap/src/uncompressed/TweenMax.js', './lib/3rdparty/convertPointFromPageToNode.js'], {
sourcemaps: false
})
.pipe(concat('iwmlib.3rdparty.preload.js'))
.pipe(replace(/^\/\/# sourceMappingURL=.*$/gim, ''))
.pipe(dest('dist', { sourcemaps: false }))
@ -55,12 +51,7 @@ function preload() {
function prettify() {
return src(
[
'./lib/*.js',
'./lib/card/*.js',
'./lib/pixi/*.js',
'!./lib/bootstrap.babel.js'
],
['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', './lib/pixi/deepzoom/*.js', '!./lib/bootstrap.babel.js'],
{
base: './lib'
}
@ -70,7 +61,8 @@ function prettify() {
singleQuote: true,
jsxSingleQuote: true,
tabWidth: 4,
semi: false
semi: false,
printWidth: 120
})
)
.pipe(dest('./lib'))

14
lib/bootstrap.js vendored
View File

@ -1,9 +1,6 @@
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() {
@ -78,11 +75,7 @@ class Bootstrap extends Object {
},
null
)
} else if (
this.isModernSafari ||
this.isModernChrome ||
this.isModernFirefox
) {
} else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
this.load(src, callback)
} else {
this.load(
@ -129,8 +122,7 @@ class Bootstrap extends Object {
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: {

10
lib/bundle.js
View File

@ -2,15 +2,7 @@ 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'

20
lib/capabilities.js
View File

@ -45,20 +45,12 @@ export class Capabilities {
*/
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
}
@ -126,9 +118,7 @@ export class 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() {
@ -149,9 +139,7 @@ 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
}

223
lib/card/card.js
View File

@ -32,8 +32,7 @@ export default class Card {
console.log('Setup Card...', modules)
context.modules = []
modules.forEach(module => {
if (module.apply(context))
context.modules.push(module.constructor.name)
if (module.apply(context)) context.modules.push(module.constructor.name)
})
}
@ -138,10 +137,7 @@ export default class Card {
event.stopPropagation()
if (callStack) callStack.call(that, ...args)
else {
console.error(
'Could not call callback function ' + attributeVal,
...args
)
console.error('Could not call callback function ' + attributeVal, ...args)
}
})
}
@ -168,9 +164,7 @@ export default class Card {
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) {
let path = that._getRelativePath(arguments[4])
const tag = `<${arguments[1]} ${arguments[2]} ${
arguments[3]
}="${path}" ${arguments[5]}>`
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
/* if (that.debug) */ console.log('Adjusted: ', tag)
return tag
}
@ -328,16 +322,13 @@ export default class Card {
//Test if meanwhile another popup was registered...
this._getPopup(context) ||
// Or if an highlight was loaded, if the highlight already was closed.
(highlight !== null &&
!this._isHighlightActive(context, highlight))
(highlight !== null && !this._isHighlightActive(context, highlight))
) {
//.. if so remove the create popup instantly.
popup.remove()
} else {
// Otherwise set the popup regularly.
let popupParagraphs = popup.element.querySelectorAll(
'.popupContent > *'
)
let popupParagraphs = popup.element.querySelectorAll('.popupContent > *')
// Remove a design error of naming two adjacent elements popup.
// Todo: fix this properly and remove this code.
@ -388,8 +379,7 @@ export default class Card {
* @memberof Card
*/
static _createPopup(context, position, content, options = {}) {
if (this.debug)
console.log('Create Popup.', context, position, content, options)
if (this.debug) console.log('Create Popup.', context, position, content, options)
let popup = new Popup(
Object.assign(
{
@ -482,9 +472,7 @@ export default class Card {
node = event.target
}
if (local == null) {
let globalClick = event.center
? event.center
: { x: event.x, y: event.y }
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
local = Points.fromPageToNode(context, globalClick)
}
if (this.debug) console.log('loadPopup', event)
@ -517,17 +505,11 @@ export default class Card {
// Extract the body from the Popup site.
let parser = new DOMParser()
let popupPage = parser.parseFromString(
xhr.responseText,
'text/html'
)
let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
//Fix the relative path of loaded images in the popup.
popupPage.querySelectorAll('img').forEach(node => {
node.setAttribute(
'src',
that._getRelativePath(node.getAttribute('src'))
)
node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
})
let html = popupPage.body.innerHTML
/**
@ -549,18 +531,10 @@ export default class Card {
Card._cleanup(context)
if (!isSame) {
Card._activateCorrespondingHighlights(
context,
node,
parentArticle
)
Card._activateCorrespondingHighlights(context, node, parentArticle)
let callback = (popup, callback) => {
if (this.debug)
console.log(
'Close popup (Editable = ' + editable + ').',
popup
)
if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup)
if (editable) {
let isDirty = mainController.askSaveNode()
if (isDirty)
@ -596,8 +570,7 @@ export default class Card {
}
//console.log("onreadystatechange", editable)
if (editable) {
if (this.debug)
console.log('pushController', src, popup.insertedNode)
if (this.debug) console.log('pushController', src, popup.insertedNode)
mainController.pushController(popup.insertedNode, src)
}
}
@ -627,10 +600,7 @@ export default class Card {
}
if (correspondingHighlights.length > 0) {
for (let highlight of correspondingHighlights) {
if (
highlight.parentNode &&
highlight.parentNode.nodeName.toLowerCase() == 'g'
) {
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation
})
@ -675,6 +645,22 @@ export default class Card {
return requestedSame
}
static _calculateCenterRelativeTo(target, image) {
console.log('_calculateCenterRelativeTo', target, image)
let bbox = image.getBBox()
let width = bbox.width
let height = bbox.height
let cx = target.getAttribute('cx')
let cy = target.getAttribute('cy')
let r = target.getAttribute('r')
let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r)
let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx
let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx
console.log({ x, y, width, height, radius })
return { x, y }
}
/**
* Opens a popup for a highlight. Typically used as a onlick handler of a link.
*
@ -683,14 +669,16 @@ export default class Card {
* @returns {bool} false - Returns false to prevent default click action
* @memberof Card
*/
static loadHighlightPopup(event) {
if (this.debug) console.log('Load Highlight Popup: ', event)
let node
if (event.firstTarget) {
node = event.firstTarget
} else {
node = event.target
static loadHighlightPopup(event, node = null) {
if (this.debug) console.log('Card.loadHighlightPopup', event, node)
if (node == null) {
if (event.firstTarget) {
node = event.firstTarget
} else {
node = event.target
}
}
let context = this.getContext(node)
event.stopPropagation()
@ -709,11 +697,10 @@ export default class Card {
animation: Card.highlightAnimation,
onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used.
let x = node.getAttribute('cx')
let y = node.getAttribute('cy')
let position = { x, y }
let radius = parseFloat(node.getAttribute('r'))
let svgRoot = node.closest('svg')
let image = svgRoot.querySelector('image')
let position = Card._calculateCenterRelativeTo(node, image)
/*
As the popup is appended directly to the card. We have to
@ -721,18 +708,17 @@ export default class Card {
card space.
*/
let svgRoot = node.closest('svg')
// let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint()
svgPoint.x = position.x
svgPoint.y = position.y - radius
svgPoint.y = position.y
let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix)
let global = Points.fromNodeToPage(
node.closest('div'),
point
)
let closestDiv = node.closest('div')
console.log('closestDiv', closestDiv, point)
let global = Points.fromNodeToPage(closestDiv, point)
let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div')
@ -743,7 +729,7 @@ export default class Card {
// we could load the data while the circle is animating.
// but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
console.log(src)
console.log('loadHighlightPopup', src, position, local)
this._loadPopupContent(src)
.then(content => {
this._openPopup(context, src, local, content, {
@ -778,16 +764,12 @@ export default class Card {
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 0) {
let html = this.postProcessResponseText(
xhr.responseText
)
let html = this.postProcessResponseText(xhr.responseText)
let selector = Card.popupHtmlSelector
let content = { html: html.body.innerHTML, selector }
resolve(content)
} else {
reject(
` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`
)
reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`)
}
}
}
@ -802,8 +784,7 @@ export default class Card {
let editable = Card.isEditable()
if (editable) {
if (node.classList.contains('zoomable-icon'))
this._openZoomable(event)
if (node.classList.contains('zoomable-icon')) this._openZoomable(event)
return
}
this._openZoomable(event)
@ -852,10 +833,7 @@ export default class Card {
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 })
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos)
let relativeBottomRight = Points.fromPageToNode(
zoomable,
globalBottomRight
)
let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight)
let width =
relativeBottomRight.x +
@ -969,12 +947,8 @@ export default class Card {
})
let zoomedFigStyle = window.getComputedStyle(zoomedFig)
let borderX =
parseFloat(zoomedFigStyle.borderLeftWidth) +
parseFloat(zoomedFigStyle.borderRightWidth)
let borderY =
parseFloat(zoomedFigStyle.borderBottomWidth) +
parseFloat(zoomedFigStyle.borderTopWidth)
let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth)
let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth)
const scaleFactor = 2
const transformOrigin = 'bottom right'
@ -1026,14 +1000,7 @@ export default class Card {
.to(zoomCaption, this.animation.fade, {
autoAlpha: 1
})
} else
this._openZoomableEditorBehaviour(
wrapper,
img,
zoomable,
zoomedFig,
current
)
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
}
/**
@ -1066,13 +1033,7 @@ export default class Card {
return parent.querySelector('.icon')
}
static _openZoomableEditorBehaviour(
wrapper,
img,
zoomable,
zoomedFig,
current
) {
static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) {
let zoomContainer = document.createElement('div')
let zoomIcon = zoomable.querySelector('.zoom-icon')
zoomContainer.style.position = 'relative'
@ -1166,8 +1127,7 @@ export default class Card {
* @memberof Card
*/
static closeZoomable(context, zoomable, zoomedFig) {
if (this.debug)
console.log('Close Zoomable', context, zoomable, zoomedFig)
if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig)
if (zoomable) {
this._unsetZoomable(context)
@ -1218,13 +1178,7 @@ export default class Card {
* @param {*} src - The src of the expanded element
* @param {*} callback - A callback that is called when the expanded element is closed
*/
static expandIndexCard(
card,
html,
tagName = 'article',
src = null,
callback = null
) {
static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) {
let editable = Card.isEditable()
let context = this.getContext(card)
@ -1257,10 +1211,7 @@ export default class Card {
let globalPreviewRect = Card._getGlobalRect(card)
let globalIndexCardRect = Card._getGlobalRect(indexbox)
let localOrigin = Points.fromPageToNode(
indexbox,
Rect.getPosition(globalPreviewRect)
)
let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect))
let scaleX = globalPreviewRect.width / globalIndexCardRect.width
let scaleY = globalPreviewRect.height / globalIndexCardRect.height
@ -1331,15 +1282,12 @@ export default class Card {
let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ')
let cardType = strparts[1]
let msg =
'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg)
Logging.log(msg)
}
let desiredBorderBottomWidth = parseInt(
window.getComputedStyle(titlebar).borderBottomWidth
)
let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
TweenLite.to(clone, Card.animation.articleTransition, {
x: -padding,
y: -padding,
@ -1360,8 +1308,7 @@ export default class Card {
})
// Retain the border at same visual thickness.
titlebar.style.borderBottomWidth =
desiredBorderBottomWidth / transform.scaleY + 'px'
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
})
@ -1384,13 +1331,7 @@ export default class Card {
let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ')
let cardType = strparts[1]
let msg =
'Card: ' +
cardID +
': closeTopic: ' +
cardType +
', ' +
cardName
let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg)
Logging.log(msg)
}
@ -1457,8 +1398,7 @@ export default class Card {
})
// Retain the border at same visual thickness.
titlebar.style.borderBottomWidth =
desiredBorderBottomWidth / transform.scaleY + 'px'
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
})
}
@ -1468,9 +1408,7 @@ export default class Card {
if (iconClone == null) {
iconClone = clone.querySelector('.cardicon')
console.warn(
"Legacy selector. Change it to 'card-icon' and find a more suitable name."
)
console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.")
}
if (iconClone.tagName == 'img') {
@ -1478,11 +1416,7 @@ export default class Card {
}
//console.log("ICON: ", iconClone)
iconClone.classList.remove('info')
iconClone.classList.add(
'close',
'view-button',
'transparent-background'
)
iconClone.classList.add('close', 'view-button', 'transparent-background')
// We append the icon clone to the subcard-content.
// Then it's always on the content and not on the background
@ -1589,13 +1523,7 @@ export default class Card {
// card.insertAdjacentElement('afterbegin', article)
// TweenLite.set(article, { autoAlpha: 0 })
Card.expandIndexCard(
card,
parsedHTML,
'article',
relativeSource,
saveCallback
)
Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback)
}
}
xhr.onerror = () => {
@ -1632,9 +1560,7 @@ export default class Card {
let dom = child.closest('.info-card')
if (!dom) {
dom = child.querySelector('.wrapper')
console.warn(
"Change the 'wrapper' class to 'info-card' it's more suitable."
)
console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.")
}
return dom // (dom == null) ? document.body : dom
}
@ -1782,9 +1708,7 @@ export default class Card {
if (indexbox != null) {
// column != null ||
let links = Array.from(indexbox.getElementsByTagName('a'))
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(indexbox, globalClick)
let linkRects = links.map(link => {
@ -1819,16 +1743,9 @@ export default class Card {
let closestLinkIndex = distances.indexOf(Math.min(...distances))
let closestLink = links[closestLinkIndex]
console.log(
'finding closest links',
closestLink,
closestLink.getClientRects()
)
console.log('finding closest links', closestLink, closestLink.getClientRects())
if (
distances[closestLinkIndex] < 44 &&
closestLink.getAttribute('href')
) {
if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) {
// Adapt context and local position
let context = this.getContext(closestLink)
let local = Points.fromPageToNode(context, globalClick)

36
lib/card/highlight.js
View File

@ -60,10 +60,7 @@ 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')
@ -78,10 +75,7 @@ export default class Highlight extends Object {
}
}
static expand(
obj,
{ scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
) {
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return
//console.log("expand")
obj.classList.add('zooming')
@ -166,9 +160,7 @@ export default class Highlight extends Object {
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,10 +180,7 @@ 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
@ -205,10 +194,7 @@ 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)
@ -253,12 +239,7 @@ 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 } = {}) {
@ -293,10 +274,7 @@ 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')

6
lib/card/index.html
View File

@ -71,7 +71,7 @@
</defs>
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
<g>
<circle xlink:href="./popup.html" cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
<circle xlink:href="./popup.html" cx="50%" cy="30%" r="25%" class="highlight" stroke="white" fill="transparent"
stroke-width="4" />
</g>
@ -96,8 +96,8 @@
const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps()
wrapper2.onTap('circle', event => {
Card.loadHighlightPopup(event)
wrapper2.onTap('circle', (event, node) => {
Card.loadHighlightPopup(event, node)
})
wrapper2.onTap('a', event => {

73
lib/card/plugin.js
View File

@ -48,10 +48,7 @@ export class CardPluginBase {
}
_getVerificationFunctions(context) {
return [
this._verifyContext.bind(this, context),
this._verifyRequirements.bind(this, context)
]
return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)]
}
_verifyContext(context) {
@ -139,11 +136,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
constructor(
wrapperSelector,
overlaySelector = null,
{
zoomAnimationDuration = 0.4,
fadeAnimationDuration = 0.4,
interactionType = 'tap'
} = {}
{ zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {}
) {
super()
this.wrapperSelector = wrapperSelector
@ -160,14 +153,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
_getVerificationFunctions(context) {
let arr = super._getVerificationFunctions(context)
let funcs = [
this._verifyElementsExist.bind(
this,
context,
this.wrapperSelector,
this.overlaySelector
)
]
let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)]
return arr.concat(funcs)
}
@ -252,9 +238,7 @@ 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)
context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop)
const max = {
width: context.offsetWidth * maxFillRatio,
@ -284,10 +268,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
// 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
@ -298,10 +279,7 @@ 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,
@ -312,13 +290,9 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
targetDimensions[minorSide.name] = size * ratio
targetOffset[majorSide.axis] =
(context['offset' + capitalize(majorSide.name)] -
targetDimensions[majorSide.name]) /
2
(context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2
targetOffset[minorSide.axis] =
(context['offset' + capitalize(minorSide.name)] -
targetDimensions[minorSide.name]) /
2
(context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2
overlay.appendChild(imageWrapper)
@ -358,18 +332,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
}
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
}
@ -404,16 +374,12 @@ CardPlugin.Ui = class UiPlugin extends CardPluginBase {
_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)
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)
parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container)
let container = document.createElement('div')
container.className = this.className
parent.appendChild(container)
@ -513,15 +479,8 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
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
)
if (this.currentText.substring(0, 5) != node.innerText.substring(0, 5)) {
console.log('text for speech synth changed!', this.currentText, node.innerText)
this._stop()
}
}

24
lib/card/scatter.js
View File

@ -63,11 +63,7 @@ export default class ScatterCard extends Card {
* @returns
* @memberof Card
*/
static createCardScatter(
html,
scatterContainer,
{ basePath = './', modules = [] } = {}
) {
static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) {
let element = document.createElement('div')
scatterContainer.element.appendChild(element)
@ -94,11 +90,7 @@ 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'
@ -106,14 +98,10 @@ export default class ScatterCard extends Card {
this.loadHTML(url)
.then(html => {
console.log('Received', html)
let element = this.createCardScatter(
html,
scatterContainer,
{
basePath,
modules
}
)
let element = this.createCardScatter(html, scatterContainer, {
basePath,
modules
})
if (onClose) this.addOnCloseListener(element, onClose)
resolve(element)
})

18
lib/card/wrapper.js
View File

@ -5,10 +5,7 @@ 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
@ -57,7 +54,7 @@ export default class CardWrapper extends Object {
isClickable(node) {
if (node == null) return false
// console.log("isClickable", node, this.isClickPrevented(node))
// console.log("isClickable", node, this.isClickPrevented(node))
if (this.isClickPrevented(node)) {
return false
}
@ -99,9 +96,7 @@ 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 => {
@ -154,7 +149,7 @@ export default class CardWrapper extends Object {
}
nodeTapped(node, event) {
console.log("nodeTapped", node, this.isClickable(node))
console.log('nodeTapped', node, this.isClickable(node))
if (this.isClickable(node)) {
this.simulateClick(node, event)
return true
@ -165,7 +160,7 @@ export default class CardWrapper extends Object {
return true
}
for (let [selector, handler] of this.tapHandler.entries()) {
console.log("nodeTapped", selector)
console.log('nodeTapped', selector)
for (let obj of this.domNode.querySelectorAll(selector)) {
if (node == obj) {
handler(event, node)
@ -177,10 +172,9 @@ export default class CardWrapper extends Object {
}
tap(event, calledBy = 'unknown') {
if (event.isTrusted) {
let node = this.nearestActive(event)
console.log("tap", node)
console.log('tap', node)
this.nodeTapped(node, event)
/* let node = document.elementFromPoint(event.clientX, event.clientY)

22
lib/doctest.js
View File

@ -30,32 +30,21 @@ export default class Doctest {
static expect(expr, value) {
if (this.pprint(expr) != this.pprint(value)) {
//throw new Error("got `" + expr + "` but expected `" + value + "`.")
throw new Error(
'got `' +
this.pprint(expr) +
'` but expected `' +
this.pprint(value) +
'`.'
)
throw new Error('got `' + this.pprint(expr) + '` but expected `' + this.pprint(value) + '`.')
}
}
static expectError(error, message) {
let index = error.toString().indexOf(message)
if (index < 0) {
throw new Error(
'got `' + message + '` but expected `' + error + '`.'
)
throw new Error('got `' + message + '` but expected `' + error + '`.')
}
}
static expectLog(...messages) {
// if (!docTestLogMessages.equals(messages)) {
docTestLogMessages.forEach((msg, i) => {
if (msg != messages[i])
throw new Error(
'Unexpected log message: `' + messages[i] + '`.'
)
if (msg != messages[i]) throw new Error('Unexpected log message: `' + messages[i] + '`.')
})
// throw new Error('Uups')
//}
@ -104,10 +93,7 @@ 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)

16
lib/events.js
View File

@ -38,8 +38,7 @@ export default class Events {
// be this is a bug or a security feature. Workaround: we introduce
// a mouseDownSubstitute attribute that can be assigned to cloned
// events after instantiation.
if (Reflect.has(event, 'mouseDownSubstitute'))
return event.mouseDownSubstitute
if (Reflect.has(event, 'mouseDownSubstitute')) return event.mouseDownSubstitute
return event.buttons || event.which
}
@ -74,15 +73,7 @@ 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)
@ -166,8 +157,7 @@ export default class Events {
let result = event.type
let selector = this.selector(event.target)
result += ' selector: ' + selector
if (event.target != document.querySelector(selector))
console.log('Cannot resolve', selector)
if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector)
let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY']
for (let key of keys) {
try {

85
lib/flippable.js
View File

@ -1,6 +1,7 @@
/* eslint-disable no-unused-vars */
/* global PDFJS Power1 */
import { getId } from './utils.js'
import { DOMScatter } from './scatter.js'
import { InteractionMapper } from './interaction.js'
export class CardLoader {
constructor(
@ -22,7 +23,7 @@ export class CardLoader {
this.x = x
this.y = y
this.scale = scale
this.rotation = 0
this.rotation = rotation
this.maxScale = maxScale
this.minScale = minScale
this.wantedWidth = width
@ -30,12 +31,6 @@ export class CardLoader {
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
this.addedNode = null
console.log({
width,
height,
maxWidth,
maxHeight
})
}
unload() {
@ -120,7 +115,6 @@ export class FrameLoader extends CardLoader {
return new Promise((resolve, reject) => {
let isFrame = domNode instanceof HTMLIFrameElement
let iframe = isFrame ? domNode : document.createElement('iframe')
console.log('FrameLoader.load', isFrame, iframe, this.src)
iframe.frameBorder = 0
iframe.style.scrolling = false
iframe.width = this.wantedWidth
@ -147,14 +141,9 @@ export class HTMLLoader extends CardLoader {
let xhr = new XMLHttpRequest()
xhr.open('GET', this.src, false)
xhr.onload = e => {
domNode.innerHTML = xhr.response
domNode.innerHTML = this.prepare(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
resolve(this)
@ -166,6 +155,18 @@ export class HTMLLoader extends CardLoader {
})
}
/**
* Preoares the html before it is assigned with innerHTML.
* Can be overwritten in subclasses.
*
* @param {*} html
* @returns
* @memberof HTMLLoader
*/
prepare(html) {
return html
}
/**
* Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes.
@ -258,28 +259,22 @@ export class DOMFlip {
frontLoaded(loader) {
return new Promise((resolve, reject) => {
let scatter = new DOMScatter(
this.cardWrapper,
this.domScatterContainer,
{
x: loader.x,
y: loader.y,
startScale: loader.scale,
scale: loader.scale,
maxScale: loader.maxScale,
minScale: loader.minScale,
width: loader.wantedWidth,
height: loader.wantedHeight,
rotation: loader.rotation,
translatable: this.translatable,
scalable: this.scalable,
rotatable: this.rotatable,
overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory
? this.tapDelegateFactory(this.cardWrapper)
: null
}
)
let scatter = new DOMScatter(this.cardWrapper, this.domScatterContainer, {
x: loader.x,
y: loader.y,
startScale: loader.scale,
scale: loader.scale,
maxScale: loader.maxScale,
minScale: loader.minScale,
width: loader.wantedWidth,
height: loader.wantedHeight,
rotation: loader.rotation,
translatable: this.translatable,
scalable: this.scalable,
rotatable: this.rotatable,
overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory ? this.tapDelegateFactory(this.cardWrapper) : null
})
if (this.center) {
scatter.centerAt(this.center)
@ -296,9 +291,7 @@ 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)
}
}
@ -329,7 +322,6 @@ export class DOMFlip {
}
setupFlippable(flippable, loader) {
console.log('setupFlippable', loader.wantedWidth)
flippable.wantedWidth = loader.wantedWidth
flippable.wantedHeight = loader.wantedHeight
flippable.wantedScale = loader.scale
@ -339,7 +331,6 @@ export class DOMFlip {
}
start({ targetCenter = null } = {}) {
console.log('DOMFlip.start', targetCenter)
if (this.preloadBack) {
this.flippable.start({ duration: this.flipDuration, targetCenter })
} else {
@ -489,7 +480,6 @@ export class DOMFlippable {
clickInfo() {
this.bringToFront()
console.log('clickInfo')
this.infoBtn.click()
}
@ -516,6 +506,7 @@ export class DOMFlippable {
let startScale = this.element._gsTransform.scaleX
let w = this.element.style.width
let h = this.element.style.height
// eslint-disable-next-line no-console
console.log(info, startX, startY, startAngle, startScale, w, h)
}
@ -572,9 +563,7 @@ export class DOMFlippable {
this.flipped = !this.flipped
let targetY = this.flipped ? 180 : 0
let targetZ = this.flipped
? this.startAngle + this.targetRotation(this.startAngle)
: this.startAngle
let targetZ = this.flipped ? this.startAngle + this.targetRotation(this.startAngle) : this.startAngle
let targetScale = this.flipped ? this.wantedScale : this.startScale
let w = this.flipped ? this.wantedWidth : this.startWidth
let h = this.flipped ? this.wantedHeight : this.startHeight
@ -587,14 +576,12 @@ export class DOMFlippable {
let y = this.flipped ? yy : this.startY
let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
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)
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn)
@ -625,8 +612,6 @@ export class DOMFlippable {
},
force3D: true
})
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,

34
lib/frames.js
View File

@ -59,15 +59,7 @@ 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)
@ -102,12 +94,7 @@ export class FrameTarget {
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,
@ -131,9 +118,7 @@ export class FrameTarget {
}
isMouseLikeEvent(event) {
return (
event.type.startsWith('mouse') || event.type.startsWith('pointer')
)
return event.type.startsWith('mouse') || event.type.startsWith('pointer')
}
onStart(event, interaction) {
@ -142,11 +127,7 @@ export class FrameTarget {
if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mousedown', point)
} else {
this.simulateTouchEvent(
'touchstart',
point,
interaction.current
)
this.simulateTouchEvent('touchstart', point, interaction.current)
return
}
}
@ -170,12 +151,7 @@ export class FrameTarget {
if (this.isMouseLikeEvent(event)) {
this.simulateMouseEvent('mouseend', point)
} else {
this.simulateTouchEvent(
'touchend',
point,
interaction.ended,
'changedTouches'
)
this.simulateTouchEvent('touchend', point, interaction.ended, 'changedTouches')
return
}
}

189
lib/interaction.js
View File

@ -205,10 +205,10 @@ export class InteractionPoints {
delta() {
let prev = []
let curr = []
let cm = { x: 0, y: 0}
let pm = { x: 0, y: 0}
let cm = { x: 0, y: 0 }
let pm = { x: 0, y: 0 }
let count = 0
for(let key of this.current.keys()) {
for (let key of this.current.keys()) {
if (this.previous.has(key)) {
let p = this.previous.get(key)
let c = this.current.get(key)
@ -227,7 +227,7 @@ export class InteractionPoints {
let scaled = 0
let alpha = 0
let zoom = 1
for(let i=0; i<count; i++) {
for (let i = 0; i < count; i++) {
let p = prev[i]
let c = curr[i]
let previousAngle = Points.angle(p, pm)
@ -253,17 +253,8 @@ export class InteractionPoints {
let c2 = current[1]
let distance2 = Points.distance(c1, c2)
return new InteractionDelta(
delta.x,
delta.y,
zoom,
alpha,
cm,
count,
distance2
)
}
else {
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, count, distance2)
} else {
return null
}
}
@ -303,33 +294,14 @@ 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,
distance2
)
} else if (
csize == 1 &&
psize == 1 &&
this.current.firstKey() == this.previous.firstKey()
) {
return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm, csize, distance2)
} 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
}
@ -483,11 +455,7 @@ export class Interaction extends InteractionPoints {
isTap(key) {
let ended = this.ended.get(key)
let start = this.start.get(key)
if (
start &&
ended &&
Points.distance(ended, start) < this.tapDistance
) {
if (start && ended && Points.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) {
@ -509,10 +477,7 @@ 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)
}
@ -537,11 +502,7 @@ export class Interaction extends InteractionPoints {
isLongPress(key) {
let ended = this.ended.get(key)
let start = this.start.get(key)
if (
start &&
ended &&
Points.distance(ended, start) < this.tapDistance
) {
if (start && ended && Points.distance(ended, start) < this.tapDistance) {
let t1 = this.timestamps.get(key)
let tookLong = performance.now() > t1 + this.longPressTime
if (tookLong) {
@ -608,9 +569,7 @@ export class InteractionDelegate {
setupInteraction() {
if (this.debug) {
let error = this.targetInterface.implementationError(
this.target.constructor
)
let error = this.targetInterface.implementationError(this.target.constructor)
if (error != null) {
throw new Error('Expected IInteractionTarget: ' + error)
}
@ -648,16 +607,11 @@ 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' ||
(e.pointerType == 'mouse' && Events.isPointerDown(e))
) {
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
// this.capture(e) &&
if (this.debug)
console.log('pointermove captured', e.pointerId)
if (this.debug) console.log('pointermove captured', e.pointerId)
this.onMove(e)
}
},
@ -666,8 +620,7 @@ 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 {
@ -682,11 +635,9 @@ 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)
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
},
useCapture
)
@ -695,12 +646,7 @@ 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
@ -711,12 +657,7 @@ 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
@ -727,13 +668,7 @@ 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)
}
@ -746,8 +681,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchstart',
e => {
if (this.debug)
console.log('touchstart', this.touchPoints(e))
if (this.debug) console.log('touchstart', this.touchPoints(e))
if (this.capture(e)) {
for (let touch of e.changedTouches) {
this.onStart(touch)
@ -759,8 +693,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchmove',
e => {
if (this.debug)
console.log('touchmove', this.touchPoints(e), e)
if (this.debug) console.log('touchmove', this.touchPoints(e), e)
for (let touch of e.changedTouches) {
this.onMove(touch)
}
@ -783,12 +716,7 @@ export class InteractionDelegate {
element.addEventListener(
'touchcancel',
e => {
if (this.debug)
console.log(
'touchcancel',
e.targetTouches.length,
e.changedTouches.length
)
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
for (let touch of e.changedTouches) {
this.onEnd(touch)
}
@ -837,9 +765,7 @@ 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
@ -880,16 +806,8 @@ export class InteractionDelegate {
}
setupMouseWheelInteraction() {
this.mouseWheelElement.addEventListener(
'mousewheel',
this.onMouseWheel.bind(this),
true
)
this.mouseWheelElement.addEventListener(
'DOMMouseScroll',
this.onMouseWheel.bind(this),
true
)
this.mouseWheelElement.addEventListener('mousewheel', this.onMouseWheel.bind(this), true)
this.mouseWheelElement.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this), true)
}
onMouseWheel(event) {
@ -953,10 +871,7 @@ export class InteractionDelegate {
break
}
case 'Touch': {
let id =
event.touchType === 'stylus'
? 'stylus'
: event.identifier.toString()
let id = event.touchType === 'stylus' ? 'stylus' : event.identifier.toString()
result[id] = this.getPosition(event)
break
}
@ -1006,10 +921,7 @@ 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)
}
}
@ -1143,11 +1055,7 @@ export class InteractionMapper extends InteractionDelegate {
onEnd(event) {
let extracted = this.extractPoint(event, 'changedTouches')
this.endInteraction(event, extracted)
let mapped = this.interaction.mapInteraction(
extracted,
['ended'],
this.mapPositionToPoint.bind(this)
)
let mapped = this.interaction.mapInteraction(extracted, ['ended'], this.mapPositionToPoint.bind(this))
for (let [target, interaction] of mapped.entries()) {
target.onEnd(event, interaction)
}
@ -1181,10 +1089,7 @@ 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]
@ -1193,9 +1098,7 @@ export class InteractionMapper extends InteractionDelegate {
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) {
@ -1210,33 +1113,15 @@ 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)
}

6
lib/logging.js
View File

@ -59,11 +59,7 @@ 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

39
lib/pixi/abstractpopup.js
View File

@ -83,12 +83,10 @@ 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
@ -131,10 +129,7 @@ export default class AbstractPopup extends PIXI.Graphics {
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)
}
@ -161,10 +156,7 @@ export default class AbstractPopup extends PIXI.Graphics {
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
}
@ -235,31 +227,16 @@ 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()

80
lib/pixi/app.js
View File

@ -28,10 +28,7 @@ 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
@ -143,10 +140,7 @@ 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')
@ -177,18 +171,12 @@ export default class PIXIApp extends PIXI.Application {
uri: '/graphql'
})
const wsClient = new subscriptions.SubscriptionClient(
`wss://${location.hostname}/subscriptions`,
{
reconnect: true,
connectionParams: {}
}
)
const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
reconnect: true,
connectionParams: {}
})
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
networkInterface,
wsClient
)
const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
this.apolloClient = new apollo.ApolloClient({
networkInterface: networkInterfaceWithSubscriptions
@ -324,10 +312,7 @@ 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()
@ -348,8 +333,7 @@ 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)
}
@ -378,8 +362,7 @@ export default class PIXIApp extends PIXI.Application {
if (
context !== null &&
(context.drawingBufferWidth < canvas.width ||
context.drawingBufferHeight < canvas.height)
(context.drawingBufferWidth < canvas.width || context.drawingBufferHeight < canvas.height)
) {
extendWidth = context.drawingBufferWidth / canvas.width
extendHeight = context.drawingBufferHeight / canvas.height
@ -388,12 +371,7 @@ 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)
}
/**
@ -444,9 +422,7 @@ 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
@ -459,9 +435,7 @@ 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
@ -480,11 +454,7 @@ export default class PIXIApp extends PIXI.Application {
* @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
* @return {PIXIApp} The PIXIApp object for chaining.
*/
loadSprites(
resources,
loaded = null,
{ resolutionDependent = true, progress = false } = {}
) {
loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
this.loadTextures(
resources,
textures => {
@ -517,11 +487,7 @@ 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]
}
@ -534,16 +500,10 @@ export default class PIXIApp extends PIXI.Application {
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)
@ -708,11 +668,7 @@ 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)
}
}

14
lib/pixi/badge.js
View File

@ -87,11 +87,7 @@ export default class Badge extends AbstractPopup {
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)
}
}
@ -108,12 +104,8 @@ export default class Badge extends AbstractPopup {
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
}

25
lib/pixi/blurfilter.js
View File

@ -68,9 +68,7 @@ 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)
}
/**
@ -189,12 +187,7 @@ 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)
@ -228,12 +221,7 @@ 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) {
@ -242,12 +230,7 @@ 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]
}
}
}

106
lib/pixi/button.html
View File

@ -32,13 +32,13 @@
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
height: 600,
transparent: false
}).setup().run()
let button1 = new Button({x: 10, y: 10})
const button1 = new Button({x: 10, y: 10})
let button2 = new Button({
const button2 = new Button({
theme: 'red',
x: 60,
y: 10,
@ -49,7 +49,7 @@ let button2 = new Button({
}
})
let button3 = new Button({
const button3 = new Button({
x: 150,
y: 10,
label: 'Checkbox button',
@ -59,7 +59,7 @@ let button3 = new Button({
}
})
let button4 = new Button({
const button4 = new Button({
x: 330,
y: 10,
label: 'Disabled button',
@ -69,14 +69,14 @@ let button4 = new Button({
}
})
let button5 = new Button({
const button5 = new Button({
x: 500,
y: 10,
label: 'Active button',
active: true
})
let button6 = new Button({
const button6 = new Button({
x: 650,
y: 10,
label: 'Active disabled button',
@ -85,7 +85,7 @@ let button6 = new Button({
disabled: true
})
let button7 = new Button({
const button7 = new Button({
x: 10,
y: 70,
label: 'Icon button',
@ -94,7 +94,7 @@ let button7 = new Button({
icon: 'arrow_back'
})
let button8 = new Button({
const button8 = new Button({
x: 180,
y: 70,
theme: 'light',
@ -104,7 +104,7 @@ let button8 = new Button({
iconPosition: 'right'
})
let button9 = new Button({
const button9 = new Button({
x: 10,
y: 130,
type: 'checkbox',
@ -112,7 +112,7 @@ let button9 = new Button({
iconActive: 'pause'
})
let button10 = new Button({
const button10 = new Button({
x: 60,
y: 130,
icon: 'stop',
@ -121,14 +121,14 @@ let button10 = new Button({
}
})
let button11 = new Button({
const button11 = new Button({
x: 110,
y: 130,
icon: 'star_border',
tooltip: 'Bookmark'
})
let button12 = new Button({
const button12 = new Button({
x: 10,
y: 190,
icon: 'airplay',
@ -141,7 +141,7 @@ let button12 = new Button({
type: 'checkbox'
})
let button13 = new Button({
const button13 = new Button({
x: 50,
y: 190,
label: 'Button',
@ -169,7 +169,7 @@ let button13 = new Button({
type: 'checkbox'
})
let button14 = new Button({
const button14 = new Button({
x: 10,
y: 250,
label: 'Button',
@ -178,7 +178,7 @@ let button14 = new Button({
iconActive: 'add_circle'
})
let button15 = new Button({
const button15 = new Button({
x: 200,
y: 250,
label: 'Button',
@ -187,7 +187,7 @@ let button15 = new Button({
iconActive: null
})
let button16 = new Button({
const button16 = new Button({
x: 400,
y: 250,
label: 'Button',
@ -197,7 +197,7 @@ let button16 = new Button({
active: true
})
let button17 = new Button({
const button17 = new Button({
x: 600,
y: 250,
label: 'Button',
@ -215,7 +215,7 @@ let graphic2 = new PIXI.Graphics()
graphic2.beginFill(0x40c3f2)
graphic2.drawCircle(30, 30, 30)
let button18 = new Button({
const button18 = new Button({
x: 10,
y: 310,
label: 'Button',
@ -232,7 +232,7 @@ let graphic4 = new PIXI.Graphics()
graphic4.beginFill(0xf8ce2d)
graphic4.drawCircle(40, 40, 40)
let button19 = new Button({
const button19 = new Button({
x: 200,
y: 310,
label: 'Button',
@ -243,7 +243,7 @@ let button19 = new Button({
iconPosition: 'right'
})
let button20 = new Button({
const button20 = new Button({
x: 400,
y: 310,
label: 'Link Button',
@ -251,7 +251,7 @@ let button20 = new Button({
style: 'link'
})
let button21 = new Button({
const button21 = new Button({
x: 600,
y: 310,
minWidth: 70,
@ -261,11 +261,73 @@ let button21 = new Button({
style: 'link'
})
const button22 = new Button({
x: 10,
y: 440,
icon: 'play_arrow',
badge: '19'
})
const button23 = new Button({
x: 100,
y: 440,
icon: 'stop',
badge: 'Stop'
})
const button24 = new Button({
x: 200,
y: 440,
icon: 'star_border',
badge: {
content: 'Bookmark',
align: 'center',
verticalAlign: 'bottom',
offsetTop: 8,
radius: 14,
fill: 0xfe832d
}
})
const button25 = new Button({
x: 300,
y: 460,
icon: 'add',
badge: {
content: 'Sweden',
align: 'center',
verticalAlign: 'top',
offsetTop: -20,
radius: 12,
fill: 0x5856d6
}
})
const countries = ['Tajikistan', 'Zambia', 'Dominica', 'Australia', 'Botswana', 'Mozambique', 'Lesotho', 'Thailand', 'Gabon', 'Cuba', 'Mexico', 'Central African Republic', 'Réunion', 'Montenegro', 'Romania', 'Jamaica', 'Thailand', 'Cameroon', 'French Guiana', 'Nigeria', 'Tokelau', 'Slovenia', 'Kuwait', 'Palestinian Territories', 'Estonia', 'Germany', 'Cameroon', 'Somalia', 'El Salvador', 'San Marino', 'Sierra Leone', 'Sierra Leone', 'Gibraltar', 'Benin', 'Russia', 'Iraq', 'Tunisia', 'Greenland', 'Côte d\'Ivoire', 'Tanzania', 'Zambia', 'Bermuda', 'Somalia', 'Malaysia', 'Croatia', 'Togo', 'Belgium', 'Uruguay', 'Equatorial Guinea', 'Nigeria', 'St. Martin', 'Tuvalu', 'South Africa', 'Hong Kong SAR China', 'Palau', 'Canary Islands', 'Algeria', 'Hong Kong SAR China', 'Brunei', 'Dominican Republic', 'Sierra Leone', 'Moldova', 'Indonesia', 'Central African Republic', 'Anguilla', 'Malaysia', 'Bahrain', 'Indonesia', 'Peru', 'Namibia', 'Congo - Brazzaville', 'Micronesia', 'Cambodia', 'Réunion', 'Honduras', 'Hungary', 'Brazil', 'Trinidad & Tobago', 'Hungary', 'Madagascar', 'Sierra Leone', 'Seychelles', 'St. Martin', 'New Caledonia', 'Tokelau', 'Macedonia', 'Netherlands', 'Panama', 'Venezuela', 'Nepal', 'Guernsey', 'Papua New Guinea', 'Finland', 'Malaysia', 'Hong Kong SAR China', 'Trinidad & Tobago', 'Montserrat', 'Comoros', 'Benin', 'South Korea', 'Peru', 'Botswana', 'Cambodia', 'Isle of Man', 'Mozambique']
setInterval(() => {
button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
button25.layout()
}, 1000)
const button26 = new Button({
x: 10,
y: 520,
label: 'add',
type: 'checkbox',
strokeActive: 0x28a745,
textStyleActive: {
fill: 0x28a745
}
})
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(button7, button8)
app.scene.addChild(button9, button10, button11)
app.scene.addChild(button12, button13)
app.scene.addChild(button14, button15, button16, button17)
app.scene.addChild(button18, button19, button20, button21)
app.scene.addChild(button22, button23, button24, button25)
app.scene.addChild(button26)
</script>
</body>
</html>

199
lib/pixi/button.js
View File

@ -1,8 +1,9 @@
/* global PIXI TweenLite */
/* global */
import Theme from './theme.js'
import Tooltip from './tooltip.js'
import Badge from './badge.js'
import Events from '../events.js'
import { Points } from '../utils.js'
/**
* Callback for the button action.
@ -135,8 +136,8 @@ export default class Button extends PIXI.Container {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
textStyle: {},
textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: false,
@ -156,15 +157,12 @@ export default class Button extends PIXI.Container {
this.id = this.opts.id
if (
typeof this.opts.icon === 'undefined' &&
typeof this.opts.iconActive !== 'undefined'
) {
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
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
}
@ -180,6 +178,8 @@ export default class Button extends PIXI.Container {
this._active = null
this._disabled = null
this.__start = { x: null, y: null }
this.iconInactive = null
this.iconActive = null
this.text = null
@ -234,17 +234,11 @@ 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
@ -261,17 +255,17 @@ export default class Button extends PIXI.Container {
this.capture(e)
})
this.button.on('pointerout', e => {
this.capture(e)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
})
this.button.on('pointerout', this.onEnd.bind(this))
this.button.on('pointercancel', this.onEnd.bind(this))
this.button.on('pointerupoutside', this.onEnd.bind(this))
this.button.on('pointertap', this.onEnd.bind(this))
this.button.on('scroll', this.onEnd.bind(this))
// eslint-disable-next-line no-unused-vars
this.button.on('pointerdown', e => {
//this.capture(e)
this.__start.x = e.data.global.x
this.__start.y = e.data.global.y
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.7,
overwrite: 'none'
@ -280,25 +274,30 @@ export default class Button extends PIXI.Container {
this.button.on('pointerup', e => {
this.capture(e)
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
const distance = Points.distance(e.data.global, this.__start)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (distance < 5) {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.action) {
this.opts.action.call(this, e, this)
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 0.83,
overwrite: 'none'
})
if (this.opts.type === 'checkbox') {
this.active = !this.active
}
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
}
}
})
@ -319,11 +318,7 @@ export default class Button extends PIXI.Container {
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)
}
}
@ -347,44 +342,12 @@ export default class Button extends PIXI.Container {
}
const badge = new Badge(opts)
switch (opts.align) {
case 'left':
badge.x = this.x - badge.width / 2 + opts.offsetLeft
break
case 'center':
badge.x =
this.x +
this.width / 2 -
badge.width / 2 +
opts.offsetLeft
break
case 'right':
badge.x =
this.x + this.width - badge.width / 2 + opts.offsetLeft
}
switch (opts.verticalAlign) {
case 'top':
badge.y = this.y - badge.height / 2 + opts.offsetTop
break
case 'middle':
badge.y =
this.y +
this.height / 2 -
badge.height / 2 +
opts.offsetTop
break
case 'bottom':
badge.y =
this.y + this.height - badge.height / 2 + opts.offsetTop
}
this.addChild(badge)
this.badge = badge
}
this.layout()
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@ -469,6 +432,39 @@ export default class Button extends PIXI.Container {
this.icon = icon
// badge
//--------------------
if (this.badge) {
this.removeChild(this.badge)
const width = this._width
const height = this._height
this.addChild(this.badge)
const badge = this.badge
switch (badge.opts.align) {
case 'left':
badge.x = -badge.width / 2 + badge.opts.offsetLeft
break
case 'center':
badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft
break
case 'right':
badge.x = width - badge.width / 2 + badge.opts.offsetLeft
}
switch (badge.opts.verticalAlign) {
case 'top':
badge.y = -badge.height / 2 + badge.opts.offsetTop
break
case 'middle':
badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop
break
case 'bottom':
badge.y = height - badge.height / 2 + badge.opts.offsetTop
}
}
// draw
//-----------------
this.draw()
@ -516,8 +512,7 @@ export default class Button extends PIXI.Container {
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
}
@ -529,8 +524,7 @@ 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
}
@ -546,30 +540,13 @@ export default class Button extends PIXI.Container {
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
@ -686,9 +663,7 @@ export default class Button extends PIXI.Container {
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)
@ -728,4 +703,12 @@ export default class Button extends PIXI.Container {
this.icon.tint = value
}
}
onEnd(event) {
this.capture(event)
TweenLite.to([this.button, this.content], this.theme.fast, {
alpha: 1,
overwrite: 'none'
})
}
}

138
lib/pixi/buttongroup.html
View File

@ -10,6 +10,7 @@
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
@ -29,10 +30,10 @@
const app = new PIXIApp({
view: canvas,
width: 1000,
height: 1000
height: 1700
}).setup().run()
let buttonGroup1 = new ButtonGroup({
const buttonGroup1 = new ButtonGroup({
x: 10,
y: 10,
buttons: [
@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({
]
})
let buttonGroup2 = new ButtonGroup({
const buttonGroup2 = new ButtonGroup({
x: 260,
y: 10,
buttons: [
@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({
strokeWidth: 3
})
let buttonGroup3 = new ButtonGroup({
const buttonGroup3 = new ButtonGroup({
x: 610,
y: 10,
buttons: [
@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({
strokeWidth: 1
})
let buttonGroup4 = new ButtonGroup({
const buttonGroup4 = new ButtonGroup({
x: 10,
y: 90,
buttons: [
@ -93,20 +94,21 @@ let buttonGroup4 = new ButtonGroup({
strokeWidth: 1
})
let buttonGroup5 = new ButtonGroup({
const buttonGroup5 = new ButtonGroup({
x: 10,
y: 180,
buttons: [
{label: 'ButtonGroup'},
{label: 'of', active: true},
{label: 'type'},
{minWidth: 30, style: 'link'},
{label: 'checkbox', active: true}
],
margin: 6,
type: 'checkbox'
})
let buttonGroup6 = new ButtonGroup({
const buttonGroup6 = new ButtonGroup({
x: 450,
y: 180,
buttons: [
@ -119,7 +121,7 @@ let buttonGroup6 = new ButtonGroup({
type: 'radio'
})
let buttonGroup7 = new ButtonGroup({
const buttonGroup7 = new ButtonGroup({
x: 10,
y: 250,
theme: 'light',
@ -134,7 +136,7 @@ let buttonGroup7 = new ButtonGroup({
style: 'link'
})
let buttonGroup8 = new ButtonGroup({
const buttonGroup8 = new ButtonGroup({
x: 610,
y: 250,
buttons: [
@ -147,7 +149,7 @@ let buttonGroup8 = new ButtonGroup({
margin: 0
})
let buttonGroup9 = new ButtonGroup({
const buttonGroup9 = new ButtonGroup({
x: 10,
y: 320,
buttons: [
@ -160,7 +162,7 @@ let buttonGroup9 = new ButtonGroup({
minWidth: 70
})
let buttonGroup10 = new ButtonGroup({
const buttonGroup10 = new ButtonGroup({
x: 100,
y: 320,
buttons: [
@ -176,7 +178,7 @@ let buttonGroup10 = new ButtonGroup({
margin: 0
})
let buttonGroup11 = new ButtonGroup({
const buttonGroup11 = new ButtonGroup({
x: 250,
y: 320,
buttons: [
@ -197,7 +199,7 @@ let buttonGroup11 = new ButtonGroup({
type: 'checkbox'
})
let buttonGroup12 = new ButtonGroup({
const buttonGroup12 = new ButtonGroup({
x: 400,
y: 320,
buttons: [
@ -212,7 +214,7 @@ let buttonGroup12 = new ButtonGroup({
type: 'radio'
})
let buttonGroup13 = new ButtonGroup({
const buttonGroup13 = new ButtonGroup({
x: 520,
y: 320,
buttons: [
@ -231,10 +233,118 @@ let buttonGroup13 = new ButtonGroup({
minHeight: 100
})
const buttonGroup14 = new ButtonGroup({
x: 10,
y: 960,
buttons: [
{label: 'Stacked button 1', action: event => console.log('clicked 1')},
{label: 'Stacked button 2', action: event => console.log('clicked 2')},
{label: 'Stacked button 3', action: event => console.log('clicked 3')},
{label: 'Stacked button 4', action: event => console.log('clicked 4')},
{label: 'Stacked button 5', action: event => console.log('clicked 5')},
{label: 'Stacked button 6', action: event => console.log('clicked 6')},
{label: 'Stacked button 7', action: event => console.log('clicked 7')},
{label: 'Stacked button 8', action: event => console.log('clicked 8')}
],
stackPadding: 6,
maxWidth: 620,
app
})
const buttonGroup15 = new ButtonGroup({
x: 10,
y: 1040,
buttons: [
{icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
{icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
{icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
{icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
{icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
{icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
{icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
],
orientation: 'vertical',
margin: 1,
maxHeight: 200,
app
})
const buttons16 = []
for (let i = 1; i < 101; i++) {
buttons16.push({label: `Button ${i}`, stroke: Math.floor(Math.random() * 16777215), strokeWidth: 3, radius: 16})
}
buttons16.splice(6, 0, {minWidth: 50, style: 'link'})
const buttonGroup16 = new ButtonGroup({
x: 90,
y: 1040,
buttons: buttons16,
stackPadding: 3,
maxWidth: 900,
app
})
const buttonGroup17 = new ButtonGroup({
x: 10,
y: 1270,
buttons: [
{icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport'},
{icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar'},
{icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe'},
{icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash'},
{icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining'},
{icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist'},
{icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station'},
{icon: 'local_grocery_store', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Grocery store'},
{icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall'},
{icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza'},
{icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop'},
{icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy'}
],
margin: 50,
maxWidth: 400,
app
})
const buttonGroup18 = new ButtonGroup({
x: 10,
y: 1340,
buttons: [
{label: 'move'},
{label: 'explanation dried'},
{label: 'out catch'},
{label: 'late either'},
{label: 'tell pour'},
{label: 'willing apart airplane'},
{label: 'high war'},
{label: 'future struck'},
{label: 'sense image'},
{label: 'never'},
{label: 'mark cloth'},
{label: 'everywhere due large'}
],
maxWidth: 500,
app
})
const buttonGroup19 = new ButtonGroup({
x: 10,
y: 1420,
buttons: [
{label: 'move'},
{label: 'explanation dried'},
{label: 'out catch'}
],
maxWidth: 500,
app
})
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
</script>
</body>
</html>

451
lib/pixi/buttongroup.js
View File

@ -1,5 +1,8 @@
/* globals ThrowPropsPlugin, Strong */
import Theme from './theme.js'
import Button from './button.js'
import Events from '../events.js'
/**
* Class that represents a PixiJS ButtonGroup.
@ -23,7 +26,7 @@ import Button from './button.js'
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
*/
export default class ButtonGroup extends PIXI.Graphics {
export default class ButtonGroup extends PIXI.Container {
/**
* Creates an instance of a ButtonGroup.
*
@ -39,6 +42,10 @@ export default class ButtonGroup extends PIXI.Graphics {
* or a Theme object.
* @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
* @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
* @param {number} [opts.maxWidth] - The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
* @param {number} [opts.maxHeight] - The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
* @param {number} [opts.stackPadding=10] - The padding for stacked buttons.
* @param {PIXI.Application} [opts.app=window.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
* @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
* @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
* @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@ -87,6 +94,10 @@ export default class ButtonGroup extends PIXI.Graphics {
buttons: [],
minWidth: 44,
minHeight: 44,
maxWidth: null,
maxHeight: null,
stackPadding: 10,
app: window.app,
padding: theme.padding,
margin: theme.margin,
iconPosition: 'left', // left, right
@ -102,8 +113,8 @@ export default class ButtonGroup extends PIXI.Graphics {
strokeActive: theme.strokeActive,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: theme.textStyle,
textStyleActive: theme.textStyleActive,
textStyle: {},
textStyleActive: {},
style: 'default',
radius: theme.radius,
disabled: null,
@ -116,9 +127,13 @@ export default class ButtonGroup extends PIXI.Graphics {
opts
)
this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
this.buttons = []
this._disabled = null
this.__dragging = false
this.visible = this.opts.visible
@ -138,9 +153,16 @@ export default class ButtonGroup extends PIXI.Graphics {
* @return {ButtonGroup} A reference to the button group for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Graphics()
this.addChild(container)
this.container = container
// Buttons
//-----------------
let position = 0
let index = 0
for (let it of this.opts.buttons) {
delete it.x
@ -164,19 +186,11 @@ 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
@ -195,10 +209,7 @@ 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
@ -215,23 +226,24 @@ 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)
}
}
let button = new Button(it)
this.addChild(button)
this.container.addChild(button)
this.buttons.push(button)
position +=
(this.opts.orientation === 'horizontal'
? button.width
: button.height) + this.opts.margin
button.__originalPosition = {
x: button.x,
y: button.y
}
position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
button.__initIndex = index
index++
}
if (this.opts.orientation === 'vertical') {
@ -249,6 +261,43 @@ export default class ButtonGroup extends PIXI.Graphics {
this.disabled = this.opts.disabled
}
// interaction
//--------------------
if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
this.interactive = true
this.on('pointerdown', this.onStart.bind(this))
this.on('pointermove', this.onMove.bind(this))
this.on('pointerup', this.onEnd.bind(this))
this.on('pointercancel', this.onEnd.bind(this))
this.on('pointerout', this.onEnd.bind(this))
this.on('pointerupoutside', this.onEnd.bind(this))
this.on('scroll', this.onScroll.bind(this))
// mousewheel
//--------------------
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
event.preventDefault()
this.emit('scroll', event)
}
})
}
const background = new PIXI.Graphics()
background.beginFill(0x000000, 0)
background.drawRect(0, 0, this.width, this.height)
background.endFill()
this.addChildAt(background, 0)
this.__initWidth = this.container.width
this.__initHeight = this.container.height
}
return this
}
@ -266,6 +315,12 @@ export default class ButtonGroup extends PIXI.Graphics {
//-----------------
this.draw()
// stack
//-----------------
if (this.opts.margin > 0 && (this.opts.maxWidth || this.opts.maxHeight)) {
this.stack()
}
return this
}
@ -279,41 +334,27 @@ export default class ButtonGroup extends PIXI.Graphics {
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.beginFill(this.opts.fill, this.opts.fillAlpha)
this.drawRoundedRect(
0,
0,
this.width,
this.height,
this.opts.radius
)
this.container.clear()
this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
this.container.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.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
this.buttons.forEach((it, i) => {
if (i > 0) {
this.moveTo(it.x, it.y)
this.container.moveTo(it.x, it.y)
if (this.opts.orientation === 'horizontal') {
this.lineTo(it.x, it.height)
this.container.lineTo(it.x, it.height)
} else {
this.lineTo(it.width, it.y)
this.container.lineTo(it.width, it.y)
}
}
})
this.endFill()
this.container.endFill()
}
return this
@ -334,6 +375,34 @@ export default class ButtonGroup extends PIXI.Graphics {
this.buttons.forEach(it => (it.disabled = value))
}
/**
* Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
*
* @member {number}
*/
get maxWidth() {
return this.opts.maxWidth
}
set maxWidth(value) {
this.opts.maxWidth = value
this.layout()
}
/**
* Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
*
* @member {number}
*/
get maxHeight() {
return this.opts.maxHeight
}
set maxHeight(value) {
this.opts.maxHeight = value
this.layout()
}
/**
* Searches all buttons of the button group and returns the maximum width of one button.
*
@ -367,4 +436,282 @@ export default class ButtonGroup extends PIXI.Graphics {
return this
}
/**
*
* @private
* @param {*} event
*/
onStart(event) {
if (
(this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
(this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
) {
this.__dragging = true
this.capture(event)
this.__delta = {
x: this.container.position.x - event.data.global.x,
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
}
/**
*
* @private
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x = event.data.global.x + this.__delta.x
} else {
this.container.position.y = event.data.global.y + this.__delta.y
}
this.stack()
}
}
/**
*
* @private
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
if (this.opts.orientation === 'horizontal') {
if (this.__initWidth > this.opts.maxWidth) {
// stack!
const distanceToLeft = this.container.x
const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
if (distanceToLeft > 0) {
throwProps.x.end = 0
} else if (distanceToRight > 0) {
throwProps.x.end = this.opts.maxWidth - this.__initWidth
}
} else {
// just magnetize
throwProps.x.end = 0
}
} else {
if (this.__initHeight > this.opts.maxHeight) {
// stack!
const distanceToTop = this.container.y
const distanceToBottom = this.opts.maxHeight - this.container.y - this.__initHeight
if (distanceToTop > 0) {
throwProps.y.end = 0
} else if (distanceToBottom > 0) {
throwProps.y.end = this.opts.maxHeight - this.__initHeight
}
} else {
// just magnetize
throwProps.y.end = 0
}
}
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onUpdate: () => this.stack(),
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
} else {
if (this.opts.orientation === 'horizontal' && throwProps.x.end != null) {
TweenMax.to(this.container.position, 0.3, { x: throwProps.x.end, onUpdate: this.stack.bind(this) })
} else if (this.opts.orientation === 'vertical' && throwProps.y.end != null) {
TweenMax.to(this.container.position, 0.3, { y: throwProps.y.end, onUpdate: this.stack.bind(this) })
}
}
}
}
/**
*
* @private
* @param {*} event
*/
onScroll(event) {
if (
(this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
(this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
) {
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.__initWidth < this.opts.maxWidth) {
this.container.position.x = this.opts.maxWidth - this.__initWidth
}
} 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.container.height < this.opts.maxHeight) {
this.container.position.y = this.opts.maxHeight - this.container.height
}
}
this.stack()
}
}
/**
* Captures an event to inform InteractionMapper about processed events.
*
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
Events.capturedBy(originalEvent, this)
}
/**
* @private
*/
stack() {
if (this.opts.maxWidth) {
this._stackHorizontal()
} else if (this.opts.maxHeight) {
this._stackVertical()
}
}
/**
* @private
*/
_stackHorizontal() {
const sorted = []
let reverseCounter = this.buttons.length - 1
this.buttons.forEach((it, index) => {
const leftCorner = it.__originalPosition.x + this.container.x
const rightCorner = it.__originalPosition.x + it.button.width
const paddingLeft = index * this.opts.stackPadding
const paddingRight = reverseCounter * this.opts.stackPadding
if (leftCorner < paddingLeft) {
// left border
it.x = -this.container.x + paddingLeft
} else if (rightCorner > -this.container.x + this.opts.maxWidth - paddingRight) {
// right border
it.x = -this.container.x + this.opts.maxWidth - it.button.width - paddingRight
} else {
it.x = it.__originalPosition.x
}
reverseCounter--
sorted.push(it)
})
const min = Math.min(...sorted.map(it => it.x))
const max = Math.max(...sorted.map(it => it.x + it.button.width))
const center = (min + max) / 2
// z-index
sorted
.sort((a, b) => {
const centerA = a.x + a.button.width / 2
const centerB = b.x + b.button.width / 2
if (centerA < center && centerB < center) {
if (a.x < b.x) {
return -1
} else if (b.x < a.x) {
return 1
}
} else if (centerA > center && centerB > center) {
if (a.x + a.button.width > b.x + b.button.width) {
return -1
} else if (b.x + b.button.width < a.x + a.button.x) {
return 1
}
}
return 0
})
.forEach(it => it.parent.addChild(it))
}
/**
* @private
*/
_stackVertical() {
const sorted = []
let reverseCounter = this.buttons.length - 1
this.buttons.forEach((it, index) => {
const topCorner = it.__originalPosition.y + this.container.y
const bottomCorner = it.__originalPosition.y + it.button.height
const paddingTop = index * this.opts.stackPadding
const paddingBottom = reverseCounter * this.opts.stackPadding
if (topCorner < paddingTop) {
// top border
it.y = -this.container.y + paddingTop
} else if (bottomCorner > -this.container.y + this.opts.maxHeight - paddingBottom) {
// bottom border
it.y = -this.container.y + this.opts.maxHeight - it.button.height - paddingBottom
} else {
it.y = it.__originalPosition.y
}
reverseCounter--
sorted.push(it)
})
const min = Math.min(...sorted.map(it => it.y))
const max = Math.max(...sorted.map(it => it.y + it.button.height))
const center = (min + max) / 2
// z-index
sorted
.sort((a, b) => {
const centerA = a.y + a.button.height / 2
const centerB = b.y + b.button.height / 2
if (centerA < center && centerB < center) {
if (a.y < b.y) {
return -1
} else if (b.y < a.y) {
return 1
}
} else if (centerA > center && centerB > center) {
if (a.y + a.button.height > b.y + b.button.height) {
return -1
} else if (b.y + b.button.height < a.y + a.button.y) {
return 1
}
}
return 0
})
.forEach(it => it.parent.addChild(it))
}
}

87
lib/pixi/deepzoom/image.js
View File

@ -40,15 +40,14 @@ export class DeepZoomInfo {
// number in the file system for the folder with tiles
this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
this.type = this.type || 'dzi'
this.urlTileTemplate =
this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
this.setupDimensions()
}
/* Computes the needed number of layers from the width and height
* of the image. Note that this includes the level 0, i.e. 0 ... 4
* means that 5 levels exist.
**/
* of the image. Note that this includes the level 0, i.e. 0 ... 4
* means that 5 levels exist.
**/
numLevels() {
let maxDimension = Math.max(this.width, this.height)
let boundary = this.type === 'dzi' ? 1 : this.tileSize
@ -231,15 +230,7 @@ export class DeepZoomInfo {
test() {
//console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
for (let i = 0; i <= this.maxLevel; i++) {
console.log(
' ' +
i +
' -> ' +
this.getScale(i) +
' [' +
this.dimensions(i) +
']'
)
console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
}
console.log(this.urlForTile(this.baseLevel, 0, 0))
}
@ -279,12 +270,7 @@ class TileQuadNode {
**/
noQuads() {
if (this.previous === null) return false
return (
this.nw === null &&
this.ne === null &&
this.sw === null &&
this.se === null
)
return this.nw === null && this.ne === null && this.sw === null && this.se === null
}
/** Unlink the given quad node
@ -323,7 +309,6 @@ class TileQuadNode {
}
}
/**
* The main class of a deeply zoomable image that is represented by a hierarchy
* of tile layers for each zoom level. This gives the user the impression that
@ -341,7 +326,7 @@ export class DeepZoomImage extends PIXI.Container {
debug = false,
shadow = false,
center = false,
world = null, // Defines the world bounds the images lives in
world = null, // Defines the world bounds the images lives in
highResolution = true,
autoLoadTiles = true,
useWorker = '',
@ -356,9 +341,7 @@ export class DeepZoomImage extends PIXI.Container {
this.shadow = shadow
this.world = world
this.useWorker = useWorker
this.resolution = highResolution
? Math.round(window.devicePixelRatio)
: 1
this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
this.alpha = alpha
this.fastLoads = 0
this.active = true
@ -548,7 +531,7 @@ export class DeepZoomImage extends PIXI.Container {
**/
get maxScale() {
let delta = this.info.maxLevel - this.info.baseLevel
return Math.pow(2, delta) / this.resolution * 2
return (Math.pow(2, delta) / this.resolution) * 2
}
/** Getter for the current width.
@ -563,7 +546,6 @@ export class DeepZoomImage extends PIXI.Container {
return this.pixelSize[1]
}
/* Overrides PIXI.Container.hitArea()
* Allows to optimize the hit testing. Container with hit areas are directly
* hit tested without consideration of children.
@ -671,11 +653,7 @@ export class DeepZoomImage extends PIXI.Container {
let topLeft = tiles.toLocal(worldTopLeft)
let bottomRight = tiles.toLocal(worldBottomRight)
tiles._centerPoint = tilesCenter
let bounds = new PIXI.Rectangle(
topLeft.x,
topLeft.y,
bottomRight.x - topLeft.x,
bottomRight.y - topLeft.y)
let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
tiles._boundsRect = bounds
@ -720,9 +698,6 @@ export class DeepZoomImage extends PIXI.Container {
return { centerCol, centerRow, needed }
}
/** Returns all changed tiles for a given level.
* @param {Tiles} tiles - the grid of tiles
* @param {number} level - The zoom level of the grid
@ -775,8 +750,7 @@ export class DeepZoomImage extends PIXI.Container {
* @param {PIXI.Point} about - point of interaction
*/
populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
if (tiles.isComplete())
return
if (tiles.isComplete()) return
let referenceCol = -1
let referenceRow = -1
let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
@ -787,8 +761,7 @@ export class DeepZoomImage extends PIXI.Container {
let scaledTileSize = tiles.tileSize * tiles.tileScale
referenceCol = Math.floor(refPoint.x / scaledTileSize)
referenceRow = Math.floor(refPoint.y / scaledTileSize)
}
else {
} else {
referenceCol = centerCol
referenceRow = centerRow
}
@ -826,17 +799,7 @@ export class DeepZoomImage extends PIXI.Container {
let [cols, rows, w, h] = this.info.dimensions(level)
let increasedLevels = level - this.info.baseLevel
let invScale = Math.pow(0.5, increasedLevels)
let tiles = new Tiles(
level,
this,
invScale,
cols,
rows,
w,
h,
this.info.tileSize,
this.info.overlap
)
let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
this.addTiles(key, tiles)
if (this.info.clip) {
let rest = this.info.rests[level]
@ -939,7 +902,6 @@ export class DeepZoomImage extends PIXI.Container {
})
}
/**
* Destroy tiles in all layers that are no longer needed
*
@ -984,8 +946,8 @@ export class DeepZoomImage extends PIXI.Container {
}
/* Tint all tiles
* @param {number} level - The zoom level of the grid
*/
* @param {number} level - The zoom level of the grid
*/
tintTilesBelowLevel(level) {
Object.keys(this.tileLayers).forEach(key => {
let tiles = this.tileLayers[key]
@ -1031,8 +993,7 @@ export class DeepZoomImage extends PIXI.Container {
})
if (this.fastLoads == 3) {
this.fastLoads = 0
}
else {
} else {
return
}
}
@ -1060,10 +1021,10 @@ export class DeepZoomImage extends PIXI.Container {
}
/**
*Activates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
*Activates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
activate() {
this.active = true
this.destroyTilesAboveLevel(this.currentLevel)
@ -1072,10 +1033,10 @@ export class DeepZoomImage extends PIXI.Container {
}
/**
*Dectivates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
*Dectivates the textures on the DeepZoomImage.
*
* @memberof DeepZoomImage
*/
deactivate() {
this.active = false
this.destroyAllTiles()

46
lib/pixi/deepzoom/loader.js
View File

@ -62,7 +62,7 @@ export class TileLoader {
_textureAvailable(url, col, row, texture) {
let tile = this.loaded.get(url)
if (tile != null) {
console.warn("Tile already loaded")
console.warn('Tile already loaded')
tile.unregister()
}
try {
@ -70,9 +70,8 @@ export class TileLoader {
this.loaded.set(url, tile)
this.tiles.tileAvailable(tile, col, row, url)
} catch (error) {
console.warn("Tile loading error", error)
console.warn('Tile loading error', error)
}
}
}
@ -82,7 +81,6 @@ export class TileLoader {
* Calls the Tiles.tileAvailable method if the texture is available.
**/
export class PIXITileLoader extends TileLoader {
constructor(tiles, compression) {
super(tiles)
this.destroyed = false
@ -124,15 +122,13 @@ export class PIXITileLoader extends TileLoader {
/** Load one and only one of the scheduled tiles **/
loadOneTile() {
if (this.destroyed)
return
if (this.destroyed) return
this._loadOneTile()
}
/** Load all scheduled tiles **/
loadAll() {
if (this.destroyed)
return
if (this.destroyed) return
this._loadAllTiles()
}
@ -143,7 +139,7 @@ export class PIXITileLoader extends TileLoader {
try {
this.loader.reset()
} catch (error) {
console.warn("Error while resetting loader", error)
console.warn('Error while resetting loader', error)
}
}
@ -162,15 +158,14 @@ export class PIXITileLoader extends TileLoader {
let texture = resource.texture
let url = resource.url
Tile.lateTexture(url, texture)
console.warn("Received resource after destroy", texture)
console.warn('Received resource after destroy', texture)
return
}
try {
let [col, row] = this.map.get(resource.url)
this._textureAvailable(resource.url, col, row, resource.texture)
}
catch (err) {
console.warn("Texture unavailable: " + err.message)
} catch (err) {
console.warn('Texture unavailable: ' + err.message)
}
}
@ -216,9 +211,8 @@ export class PIXITileLoader extends TileLoader {
if (!this.loaded.has(url)) {
let resource = this.loader.resources[url]
if (resource) {
console.log("Resource already added", url)
}
else {
console.log('Resource already added', url)
} else {
urls.push(url)
i += 1
}
@ -237,7 +231,6 @@ export class PIXITileLoader extends TileLoader {
* Calls the Tiles.tileAvailable method if the texture is available.
**/
export class RequestTileLoader extends TileLoader {
constructor(tiles, compression) {
super(tiles)
this.compression = compression
@ -255,10 +248,7 @@ export class RequestTileLoader extends TileLoader {
xhr.responseType = 'arraybuffer'
xhr.onload = e => {
let CompressedImage = PIXI.compressedTextures.CompressedImage
let compressed = CompressedImage.loadFromArrayBuffer(
xhr.response,
url
)
let compressed = CompressedImage.loadFromArrayBuffer(xhr.response, url)
let base = new PIXI.BaseTexture(compressed)
let texture = new PIXI.Texture(base)
this._textureAvailable(url, col, row, texture)
@ -319,20 +309,18 @@ export class RequestTileLoader extends TileLoader {
}
}
/**
* Uses Workers but can be replaced with other loaders implementing
* the public methods without underscore.
* Calls the Tiles.tileAvailable method if the texture is available.
**/
export class WorkerTileLoader extends TileLoader {
constructor(tiles, workerPath) {
super(tiles)
let worker = this.worker = new Worker(workerPath)
let worker = (this.worker = new Worker(workerPath))
worker.onmessage = (event) => {
worker.onmessage = event => {
if (event.data.success) {
let { url, col, row, buffer } = event.data
//console.log("WorkerTileLoader.loaded", url, buffer)
@ -350,7 +338,7 @@ export class WorkerTileLoader extends TileLoader {
let url = this.loadQueue.pop()
let [col, row] = this.map.get(url)
let tile = [col, row, url]
this.worker.postMessage({ command: "load", tiles: [tile] })
this.worker.postMessage({ command: 'load', tiles: [tile] })
}
}
@ -361,16 +349,16 @@ export class WorkerTileLoader extends TileLoader {
let [col, row] = this.map.get(url)
tiles.push([col, row, url])
}
this.worker.postMessage({ command: "load", tiles })
this.worker.postMessage({ command: 'load', tiles })
}
cancel() {
super.cancel()
this.worker.postMessage({ command: "abort" })
this.worker.postMessage({ command: 'abort' })
}
destroy() {
this.worker.postMessage({ command: "abort" })
this.worker.postMessage({ command: 'abort' })
this.worker.terminate()
this.worker = null
super.destroy()

34
lib/pixi/deepzoom/tile.js
View File

@ -77,11 +77,10 @@ export default class Tile extends PIXI.Sprite {
if (registeredTiles.has(url)) {
let tiles = registeredTiles.get(url)
tiles.add(this)
if (debug) console.log("Tile.register", url, tiles.size)
}
else {
if (debug) console.log('Tile.register', url, tiles.size)
} else {
registeredTiles.set(url, new Set([this]))
if (debug) console.log("Tile.register", url, 1)
if (debug) console.log('Tile.register', url, 1)
}
}
@ -114,32 +113,31 @@ export default class Tile extends PIXI.Sprite {
keptTextures.push({ url: this.url, texture: this.texture })
let opts = { children: true, texture: false, baseTexture: false }
if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
if (debug) console.log('Tile.destroy', registeredTiles.size, opts)
super.destroy(opts)
while (keptTextures.length > keepTextures) {
let { url, texture } = keptTextures.shift()
if (Tile.isObsolete(url)) {
texture.destroy(true) // Destroy base as well
if (debug) console.log("Destroying texture and baseTexture", url)
if (debug) console.log('Destroying texture and baseTexture', url)
}
}
}
else {
} else {
// No longer registered and not pending
if (count <= 0) { // && !Tile.isPending(this.url)
if (count <= 0) {
// && !Tile.isPending(this.url)
let opts = { children: true, texture: true, baseTexture: true }
super.destroy(opts)
if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
}
else {
if (debug) console.log('Tile.destroy', registeredTiles.size, opts)
} else {
let opts = { children: true, texture: false, baseTexture: false }
if (debug) console.log("Tile.destroy", registeredTiles.size, opts)
if (debug) console.log('Tile.destroy', registeredTiles.size, opts)
super.destroy(opts)
}
if (this.parent != null) {
// UO: Emit warning and remove
console.warn("Destroying tile with parent. Hiding instead")
console.warn('Destroying tile with parent. Hiding instead')
this.visible = false
}
}
@ -172,10 +170,9 @@ export default class Tile extends PIXI.Sprite {
renderWebGL(renderer) {
try {
super.renderWebGL(renderer)
}
catch (e) {
} catch (e) {
// We want persistent logging here
Logging.error("Error in Tile.renderWebGL: " + e.message)
Logging.error('Error in Tile.renderWebGL: ' + e.message)
}
}
@ -201,8 +198,7 @@ export default class Tile extends PIXI.Sprite {
}
}
}
if (count > 0)
console.log("Sweeping textures", count)
if (count > 0) console.log('Sweeping textures', count)
}
}

24
lib/pixi/deepzoom/tileloader.js
View File

@ -4,50 +4,48 @@ const batchSize = 8
const debug = false
function load() {
while(loadQueue.length>0 && pendingRequests.size<batchSize) {
while (loadQueue.length > 0 && pendingRequests.size < batchSize) {
let tile = loadQueue.shift()
let [col, row, url] = tile
let xhr = new XMLHttpRequest()
xhr.responseType = 'arraybuffer'
xhr.onload = (event) => {
xhr.onload = event => {
pendingRequests.delete(url)
let buffer = xhr.response
postMessage({ success: true, url, col, row, buffer}, [buffer])
postMessage({ success: true, url, col, row, buffer }, [buffer])
}
xhr.onerror = (event) => {
xhr.onerror = event => {
pendingRequests.delete(url)
let buffer = null
postMessage({ success: false, url, col, row, buffer})
postMessage({ success: false, url, col, row, buffer })
}
xhr.open('GET', url, true)
xhr.send()
pendingRequests.set(url, xhr)
}
if (loadQueue.length>0)
setTimeout(load, 1000/120)
if (loadQueue.length > 0) setTimeout(load, 1000 / 120)
else {
if (debug) console.log('Ready')
}
}
self.onmessage = (event) => {
self.onmessage = event => {
let msg = event.data
switch(msg.command) {
switch (msg.command) {
case 'load':
for(let tile of msg.tiles) {
for (let tile of msg.tiles) {
loadQueue.push(tile)
}
load()
break
case 'abort':
loadQueue = []
for(let xhr of pendingRequests.values()) {
for (let xhr of pendingRequests.values()) {
xhr.abort()
}
if (debug) console.log('Abort')
break
default:
console.warn('Unknown worker command: ' + msg.command)
console.warn('Unknown worker command: ' + msg.command)
}
}

54
lib/pixi/deepzoom/tiles.js
View File

@ -1,6 +1,5 @@
import { Colors } from '../../utils.js'
import { WorkerTileLoader, PIXITileLoader } from "./loader.js"
import { WorkerTileLoader, PIXITileLoader } from './loader.js'
/**
* A layer of tiles that represents a zoom level of a DeepZoomImage as a grid
@ -18,18 +17,7 @@ import { WorkerTileLoader, PIXITileLoader } from "./loader.js"
* @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set
**/
export class Tiles extends PIXI.Container {
constructor(
level,
view,
scale,
cols,
rows,
width,
height,
tileSize,
overlap,
fadeInTime = 0.33
) {
constructor(level, view, scale, cols, rows, width, height, tileSize, overlap, fadeInTime = 0.33) {
super()
this.debug = false
this.showGrid = false
@ -66,8 +54,6 @@ export class Tiles extends PIXI.Container {
this.destroyed = false
}
/** Tests whether all tiles are loaded. **/
isComplete() {
return this.cols * this.rows === this.children.length
@ -106,19 +92,19 @@ export class Tiles extends PIXI.Container {
if (this.debug)
console.log(
'Tiles level: ' +
this.level +
' scale: ' +
this.scale.x +
' cols: ' +
this.cols +
' rows: ' +
this.rows +
' w: ' +
this.pixelWidth +
' h: ' +
this.pixelHeight +
' tsize:' +
this.tileSize
this.level +
' scale: ' +
this.scale.x +
' cols: ' +
this.cols +
' rows: ' +
this.rows +
' w: ' +
this.pixelWidth +
' h: ' +
this.pixelHeight +
' tsize:' +
this.tileSize
)
}
@ -266,8 +252,8 @@ export class Tiles extends PIXI.Container {
}
/* Destroys the tiles which are not with the bounds of the app to free
* memory.
**/
* memory.
**/
destroyTiles(quadTrees) {
let count = 0
for (let [url, tile] of this.available.entries()) {
@ -276,8 +262,7 @@ export class Tiles extends PIXI.Container {
count += 1
}
}
if (count && this.debug)
console.log('destroyTiles', this.level, count)
if (count && this.debug) console.log('destroyTiles', this.level, count)
}
destroyUnneededTiles() {
@ -288,8 +273,7 @@ export class Tiles extends PIXI.Container {
count += 1
}
}
if (count && this.debug)
console.log('destroyUnneededTiles', this.level, count)
if (count && this.debug) console.log('destroyUnneededTiles', this.level, count)
}
highlightInfos() {

22
lib/pixi/flipeffect.js
View File

@ -112,15 +112,9 @@ export default class FlipEffect {
this.scatter = scatter
this.backLoader = backLoader
this.scatterLoader = new ScatterLoader(scatter)
this.domFlip = new DOMFlip(
domScatterContainer,
flipTemplate,
this.scatterLoader,
backLoader,
{
onBack: this.backCardClosed.bind(this)
}
)
this.domFlip = new DOMFlip(domScatterContainer, flipTemplate, this.scatterLoader, backLoader, {
onBack: this.backCardClosed.bind(this)
})
this.setupInfoButton()
}
@ -147,11 +141,7 @@ export default class FlipEffect {
let center = this.scatter.center
let canvas = app.renderer.view
let domNode = this.domFlip.domScatterContainer.element
let page = window.convertPointFromNodeToPage(
canvas,
center.x * resolution,
center.y * resolution
)
let page = window.convertPointFromNodeToPage(canvas, center.x * resolution, center.y * resolution)
let local = window.convertPointFromPageToNode(domNode, page.x, page.y)
return local
}
@ -231,9 +221,7 @@ 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)

47
lib/pixi/flippable.js
View File

@ -93,12 +93,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// 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
//--------------------
@ -137,9 +132,7 @@ 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(0.98)
@ -231,21 +224,11 @@ 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
@ -331,15 +314,11 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow
//--------------------
new TimelineMax()
.to(shadow, half, { alpha: 0.3, ease })
.to(shadow, half, { alpha: 0.7, ease })
new TimelineMax().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: 0.2, ease })
new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
}
/**
@ -353,8 +332,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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
@ -421,10 +399,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
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 = [

33
lib/pixi/labeledgraphics.js
View File

@ -77,15 +77,9 @@ export class Hypenate {
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 {
newWord += part
@ -136,12 +130,7 @@ 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
@ -290,21 +279,11 @@ 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 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
) {
if (data.length + wordLength + spaceLength >= wordWrapWidth) {
return { ...data, length: wordWrapWidth }
}
return {

40
lib/pixi/list.js
View File

@ -1,4 +1,4 @@
/* globals */
/* globals ThrowPropsPlugin, Strong */
/* Imports */
import Events from '../events.js'
@ -108,9 +108,7 @@ 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)) {
@ -167,14 +165,10 @@ 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))
@ -200,14 +194,10 @@ export default class List extends PIXI.Container {
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
}
@ -341,8 +331,7 @@ export default class List extends PIXI.Container {
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
@ -363,20 +352,14 @@ export default class List extends PIXI.Container {
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
}
}
@ -388,10 +371,7 @@ 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)
}
}

6
lib/pixi/message.js
View File

@ -91,8 +91,7 @@ export default class Message extends InteractivePopup {
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
}
@ -105,8 +104,7 @@ export default class Message extends InteractivePopup {
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
}
}

5
lib/pixi/modal.js
View File

@ -134,10 +134,7 @@ export default class Modal extends PIXI.Container {
// 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()

13
lib/pixi/popover.js
View File

@ -36,12 +36,8 @@ export default class Popover extends PIXI.Graphics {
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()
@ -64,10 +60,7 @@ 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)
}

36
lib/pixi/popup.js
View File

@ -73,10 +73,7 @@ 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
@ -100,10 +97,7 @@ export class InteractivePopup extends AbstractPopup {
//-----------------
if (this.opts.maxWidth) {
const wordWrapWidth =
this.opts.maxWidth -
2 * this.opts.padding -
this.smallPadding -
this._closeButton.width
this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
if (this._header) {
this.headerStyle.wordWrapWidth = wordWrapWidth
} else if (this._content) {
@ -116,18 +110,10 @@ 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
)
Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
)
}
this.addChild(this._buttons)
@ -149,18 +135,15 @@ export class InteractivePopup extends AbstractPopup {
// 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
@ -183,10 +166,7 @@ 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
}

5
lib/pixi/popupmenu.js
View File

@ -74,10 +74,7 @@ export default class PopupMenu extends Popup {
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
}

38
lib/pixi/progress.js
View File

@ -154,10 +154,7 @@ 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()
}
@ -201,20 +198,10 @@ export default class Progress extends PIXI.Container {
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)
}
@ -238,24 +225,11 @@ export default class Progress extends PIXI.Container {
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)
}

47
lib/pixi/scatter.js
View File

@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import Events from '../events.js'
import { AbstractScatter } from '../scatter.js'
import { Angle, Points, Polygon } from '../utils.js'
@ -79,12 +80,8 @@ 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 })
@ -167,14 +164,8 @@ 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
}
}
@ -184,10 +175,7 @@ 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
@ -204,12 +192,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction
let fakeEvent = this.fakeInteractionEvent(local)
interactionManager.processInteractive(
fakeEvent,
this,
this.findHitScatter.bind(this),
true
)
interactionManager.processInteractive(fakeEvent, this, this.findHitScatter.bind(this), true)
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
@ -223,8 +206,7 @@ export class ScatterContainer extends PIXI.Graphics {
this.hitScatter = null
let interactionManager = this.renderer.plugins.interaction
let displayObject = interactionManager.hitTest(local, this)
if (displayObject != null && displayObject.scatter != null)
this.hitScatter = displayObject.scatter
if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
@ -352,15 +334,12 @@ export class DisplayObjectScatter extends AbstractScatter {
roundPixel(value) {
// UO: Should be obsolete because Renderer supports roundPixels by default
return value
let res = this.renderer.resolution
return Math.round(value * res) / res
}
get container() {
// return this.displayObject.parent
let obj = this.displayObject
while (obj.parent != null && !(obj.parent instanceof ScatterContainer))
obj = obj.parent
while (obj.parent != null && !(obj.parent instanceof ScatterContainer)) obj = obj.parent
return obj.parent
}
@ -469,8 +448,7 @@ export class DisplayObjectScatter extends AbstractScatter {
mapPositionToContainerPoint(point) {
// UO: We need the coordinates related to this scatter in case
// of nested scatters
if (this.container != null)
return this.container.mapPositionToPoint(point, this)
if (this.container != null) return this.container.mapPositionToPoint(point, this)
return point
}
@ -483,10 +461,7 @@ 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)
}
}

89
lib/pixi/scrollbox.js
View File

@ -238,10 +238,7 @@ export default class Scrollbox extends PIXI.Container {
* @readonly
*/
get contentWidth() {
return (
this.options.boxWidth -
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
)
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
}
/**
@ -250,10 +247,7 @@ export default class Scrollbox extends PIXI.Container {
* @readonly
*/
get contentHeight() {
return (
this.options.boxHeight -
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
)
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
}
/**
@ -330,19 +324,11 @@ export default class Scrollbox extends PIXI.Container {
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
@ -359,14 +345,9 @@ export default class Scrollbox extends PIXI.Container {
: this.scrollbarWidth
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
@ -375,15 +356,10 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(
0,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
@ -391,14 +367,9 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
@ -407,15 +378,10 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(
this.scrollbarLeft,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
@ -489,10 +455,7 @@ export default class Scrollbox extends PIXI.Container {
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 (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth) {
this.pointerDown = { type: 'horizontal', last: local }
} else {
if (local.x > this.scrollbarLeft) {
@ -511,10 +474,7 @@ export default class Scrollbox extends PIXI.Container {
}
if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) {
if (
local.y >= this.scrollbarTop &&
local.y <= this.scrollbarTop + this.scrollbarWidth
) {
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth) {
this.pointerDown = { type: 'vertical', last: local }
} else {
if (local.y > this.scrollbarTop) {
@ -574,26 +534,15 @@ export default class Scrollbox extends PIXI.Container {
* @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
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) {
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()
}

56
lib/pixi/slider.js
View File

@ -176,12 +176,8 @@ export default class Slider extends PIXI.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
@ -193,16 +189,8 @@ 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)
@ -263,9 +251,7 @@ 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
)
this.value = this.pixelToValue(position.x - this.opts.controlRadius)
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
}
})
@ -325,11 +311,7 @@ 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)
@ -343,20 +325,10 @@ 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()
@ -394,10 +366,7 @@ 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)
}
/**
@ -413,10 +382,7 @@ 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
}
/**

31
lib/pixi/stylus.js
View File

@ -119,10 +119,7 @@ export default class Stylus extends PIXI.Graphics {
let identifier = event.data.identifier
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
@ -142,10 +139,7 @@ export default class Stylus extends PIXI.Graphics {
let identifier = event.data.identifier
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
}
}
@ -182,8 +176,7 @@ 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 => {
@ -197,15 +190,9 @@ 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))
if (this.eventInside(e) && this.singlePointer())
this.moveStroke(this.toStroke(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 => {
@ -320,11 +307,7 @@ 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()

71
lib/pixi/switch.js
View File

@ -152,10 +152,8 @@ export default class Switch extends PIXI.Container {
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
//-----------------
@ -317,32 +315,15 @@ export default class Switch extends PIXI.Container {
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,
@ -364,21 +345,11 @@ export default class Switch extends PIXI.Container {
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
this.opts.controlFillActive,
this.opts.controlFillActiveAlpha
)
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()
@ -394,24 +365,11 @@ export default class Switch extends PIXI.Container {
*/
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,
@ -431,10 +389,7 @@ export default class Switch extends PIXI.Container {
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
this.tempAnimated.controlFill,
this.tempAnimated.controlFillAlpha
)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill()

24
lib/pixi/test.js
View File

@ -131,21 +131,9 @@ 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)
@ -183,11 +171,7 @@ 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
}

1
lib/pixi/theme.html
View File

@ -120,3 +120,4 @@ app.scene.addChild(switchDark, switchLight, switchRed)
app.scene.addChild(buttonYellow)
</script>
</body>
</html>

3
lib/pixi/theme.js
View File

@ -80,8 +80,7 @@ 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

108
lib/pixi/timeline.js
View File

@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars */
import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
import { Capabilities } from '../capabilities.js'
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
@ -89,24 +90,13 @@ 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 fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
let y = timeline.getY()
for (let { start, end } of this.iterRanges(range)) {
let x = timeline.toX(start)
@ -131,12 +121,7 @@ export class Ticks {
}
if (!fullyRedundant) {
timeline.ensureLabel(
key,
text,
{ x: xx, y: yy, align },
FontInfo.small
)
timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small)
}
if (extraTicks) timeline.drawTick(x, -level)
}
@ -286,11 +271,7 @@ 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) {
@ -331,22 +312,11 @@ 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(),
start.getMonth(),
start.getDate(),
start.getHours()
)
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours())
}
next(date) {
@ -388,14 +358,7 @@ 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) {
@ -450,10 +413,7 @@ export class TimeTicks {
let available = amount * size
availables.set(ticks, available)
if (available < ticks.minWidth) break
formats.set(
ticks,
available < ticks.minLabelWidth ? null : ticks.format(available)
)
formats.set(ticks, available < ticks.minLabelWidth ? null : ticks.format(available))
nextFormats.set(previous, formats.get(ticks))
previous = ticks
visible.push(ticks)
@ -522,16 +482,7 @@ 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
@ -545,15 +496,11 @@ export default class Timeline extends BitmapLabeledGraphics {
this.minZoom = 1
this.maxZoom = 12000
this.scroll = 0
this.draggable = false
this.deltas = []
this.labelDates = []
this.colorRanges = []
this.rangeColors = new Cycle(
Colors.eminence,
Colors.steelblue,
Colors.ochre,
Colors.turquoise
)
this.rangeColors = new Cycle(Colors.eminence, Colors.steelblue, Colors.ochre, Colors.turquoise)
this.callbacks = []
this.onTapCallbacks = []
this.onDoubleTapCallbacks = []
@ -565,14 +512,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false
this.direction = -1
this.throwDamping = throwDamping
this.timeticks =
ticks ||
new TimeTicks(
new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks()
)
this.timeticks = ticks || new TimeTicks(new DecadeTicks(), new YearTicks(), new MonthTicks(), new DayTicks())
this.labelPrefix = '__'
}
@ -729,8 +669,7 @@ export default class Timeline extends BitmapLabeledGraphics {
prepareLabels() {
for (let key of this.labels.keys()) {
if (!key.startsWith(this.labelPrefix))
this.labels.get(key).visible = false
if (!key.startsWith(this.labelPrefix)) this.labels.get(key).visible = false
}
}
@ -824,9 +763,9 @@ export default class Timeline extends BitmapLabeledGraphics {
this.killTweens()
this.deltas = []
this.validScroll()
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this, 'delta')
}
// if (typeof ThrowPropsPlugin != 'undefined') {
// ThrowPropsPlugin.track(this, 'delta')
// }
}
onMove(event, interaction) {
@ -835,6 +774,9 @@ export default class Timeline extends BitmapLabeledGraphics {
return
}
this.scroll += delta.x
if (this.draggable) {
this.y += delta.y
}
while (this.deltas.length > 10) {
this.deltas.pop(0)
}
@ -846,11 +788,10 @@ export default class Timeline extends BitmapLabeledGraphics {
}
onEnd(event, interaction) {
if (typeof ThrowPropsPlugin != 'undefined') {
let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
ThrowPropsPlugin.untrack(this)
}
// if (typeof ThrowPropsPlugin != 'undefined') {
// let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
// ThrowPropsPlugin.untrack(this)
// }
this.killTweens()
this.redraw()
let delta = 0
@ -863,7 +804,6 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = true
let anchor = interaction.current.mean()
this.keepInBounds(delta, anchor)
for (let key of interaction.ended.keys()) {
if (interaction.isDoubleTap(key)) {
this.onDoubleTap(event, interaction, key)

60
lib/popup.js
View File

@ -1,3 +1,6 @@
/* eslint-disable no-console */
/* eslint-disable no-case-declarations */
/* eslint-disable no-unused-vars */
import { Elements } from './utils.js'
import Poppable from './poppable.js'
@ -147,8 +150,7 @@ 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
@ -182,6 +184,7 @@ export default class Popup extends Poppable {
}
for (let key in content) {
console.log('using', key, this.loaded)
switch (key) {
case 'selector':
break
@ -250,10 +253,7 @@ 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)
image.onload = e => {
@ -293,7 +293,7 @@ export default class Popup extends Poppable {
handleClose(e) {
let closing = this.closingEvent(e)
if (closing) {
this.close()
this.close(e)
} else {
this.setupCloseHandler()
}
@ -365,8 +365,7 @@ export default class Popup extends Poppable {
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 => {
@ -416,18 +415,17 @@ export default class Popup extends Poppable {
layout() {}
remove() {
if (this.parent.contains(this.element))
this.parent.removeChild(this.element)
if (this.parent.contains(this.element)) this.parent.removeChild(this.element)
this.unregister(this.context)
}
/** Close and remove the Popup from the DOM tree.
*/
close() {
close(event) {
//console.log("Popup.close", this.closeCommand)
this.unregister(this.context)
if (this.closeCommand) {
this.closeCommand(this, () => this.remove())
this.closeCommand(this, () => this.remove(), event)
} else {
this.remove()
}
@ -572,36 +570,30 @@ export default class Popup extends Poppable {
//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':
y = bbTop
if (!this.useEventPosWithBoundingBox)
x = (bbLeft + bbRight) / 2
if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
break
case 'topLeft':
case 'topRight':
case 'topCenter':
y = bbBottom
if (!this.useEventPosWithBoundingBox)
x = (bbLeft + bbRight) / 2
if (!this.useEventPosWithBoundingBox) x = (bbLeft + bbRight) / 2
break
case 'centerRight':
x = bbLeft
if (!this.useEventPosWithBoundingBox)
y = (bbTop + bbBottom) / 2
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
break
case 'centerLeft':
x = bbRight
if (!this.useEventPosWithBoundingBox)
y = (bbTop + bbBottom) / 2
if (!this.useEventPosWithBoundingBox) y = (bbTop + bbBottom) / 2
break
default:
break
@ -747,8 +739,7 @@ export default class Popup extends Poppable {
boxShadow: '0 12px 15px rgba(0, 0, 0, 0.1)',
bottom: -this.notchSize + 'px',
position: 'absolute',
borderTop:
this.notchSize + 'px solid ' + this.backgroundColor,
borderTop: this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent',
borderBottom: 0
@ -776,8 +767,7 @@ export default class Popup extends Poppable {
left,
top: -this.notchSize + 'px',
position: 'absolute',
borderBottom:
this.notchSize + 'px solid ' + this.backgroundColor,
borderBottom: this.notchSize + 'px solid ' + this.backgroundColor,
borderRight: this.notchSize + 'px solid transparent',
borderLeft: this.notchSize + 'px solid transparent',
borderTop: 0
@ -814,16 +804,13 @@ export default class Popup extends Poppable {
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)'
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)'
this.element.style.boxShadow = '15px 5px 15px rgba(0, 0, 0, 0.3)'
}
top = Math.round(top) + 'px'
@ -880,8 +867,7 @@ 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,

36
lib/popupmenu.js
View File

@ -195,8 +195,7 @@ export default class PopupMenu extends Popup {
return
}
console.log('open', point)
let notchPosition =
point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
let notchPosition = point.y < 50 && switchPos ? 'topCenter' : 'bottomCenter'
let popup = new PopupMenu({
parent,
fontSize,
@ -219,21 +218,9 @@ export default class PopupMenu extends Popup {
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)
}
}
@ -248,18 +235,9 @@ 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)
}
}
}

110
lib/scatter.js
View File

@ -1,6 +1,6 @@
/* eslint-disable no-unused-vars */
/* eslint-disable no-console */
/* globals TweenLite debugCanvas */
/* globals debugCanvas */
import Interface from './interface.js'
import { Points, Polygon, Angle, Elements, LowPassFilter } from './utils.js'
import Events from './events.js'
@ -45,14 +45,7 @@ const END = 'onEnd'
export class ScatterEvent extends BaseEvent {
constructor(
target,
{
translate = { x: 0, y: 0 },
scale = null,
rotate = 0,
about = null,
fast = false,
type = null
} = {}
{ translate = { x: 0, y: 0 }, scale = null, rotate = 0, about = null, fast = false, type = null } = {}
) {
super('scatterTransformed', { target: target })
this.translate = translate
@ -65,13 +58,7 @@ export class ScatterEvent extends BaseEvent {
toString() {
return (
"Event('scatterTransformed', scale: " +
this.scale +
' about: ' +
this.about.x +
', ' +
this.about.y +
')'
"Event('scatterTransformed', scale: " + this.scale + ' about: ' + this.about.x + ', ' + this.about.y + ')'
)
}
}
@ -91,13 +78,7 @@ export class ResizeEvent extends BaseEvent {
}
toString() {
return (
'Event(scatterResized width: ' +
this.width +
'height: ' +
this.height +
')'
)
return 'Event(scatterResized width: ' + this.width + 'height: ' + this.height + ')'
}
}
@ -386,9 +367,7 @@ export class AbstractScatter extends Throwable {
}
_removeSelfFromScatterContainer() {
/**
Removes self from container when it's closed.
*/
// Removes self from container when it's closed.
if (this.container) {
this.container.remove(this)
}
@ -524,10 +503,7 @@ export class AbstractScatter extends Throwable {
_checkAutoClose() {
if (this.scaleAutoClose)
if (
this.scale <
this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer
) {
if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
this.zoom(this.minScale, {
animate: 0.2,
onComplete: this.close.bind(this)
@ -582,17 +558,7 @@ export class AbstractScatter extends Throwable {
this.move(delta, { animate: animate })
}
zoom(
scale,
{
animate = 0,
about = null,
delay = 0,
x = null,
y = null,
onComplete = null
} = {}
) {
zoom(scale, { animate = 0, about = null, delay = 0, x = null, y = null, onComplete = null } = {}) {
let anchor = about || this.center
if (scale != this.scale) {
if (animate > 0) {
@ -643,15 +609,9 @@ 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)
@ -714,10 +674,8 @@ 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
}
@ -775,8 +733,7 @@ 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)
@ -939,13 +896,7 @@ 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
@ -956,11 +907,7 @@ export class DOMScatterContainer {
movement of scatter objects, the touchmove event has to be bound again.
*/
if (Capabilities.isSafari) {
document.addEventListener(
'touchmove',
event => this.preventPinch(event),
false
)
document.addEventListener('touchmove', event => this.preventPinch(event), false)
stopEvents = false
} else {
stopEvents = true
@ -996,14 +943,7 @@ export class DOMScatterContainer {
for (let [key, point] of current.entries()) {
let local = point
context.beginPath()
context.arc(
local.x * resolution,
local.y * resolution,
radius,
0,
2 * Math.PI,
false
)
context.arc(local.x * resolution, local.y * resolution, radius, 0, 2 * Math.PI, false)
context.fill()
context.stroke()
}
@ -1026,14 +966,7 @@ export class DOMScatterContainer {
* @memberof DOMScatterContainer
*/
remove(scatter) {
const element = scatter.element
if (!this.scatter.has(element))
console.warn(
`Try removing element that is not in the scatter.`,
element
)
this.scatter.delete(element)
this.scatter.delete(scatter.element)
}
/**
@ -1082,10 +1015,7 @@ 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
@ -1516,10 +1446,8 @@ export class DOMScatter extends AbstractScatter {
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
(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,

145
lib/uitest.js
View File

@ -194,9 +194,7 @@ export default class UITest {
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
//--------------------
@ -234,14 +232,8 @@ export default class UITest {
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
@ -253,14 +245,8 @@ 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
@ -355,14 +341,8 @@ export default class UITest {
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
@ -374,14 +354,8 @@ 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
@ -393,14 +367,8 @@ 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
@ -551,66 +519,39 @@ export default class UITest {
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)
}
}
@ -728,9 +669,7 @@ export default class UITest {
'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) {
@ -805,12 +744,8 @@ 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
}
@ -866,9 +801,7 @@ 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
}
@ -1004,16 +937,9 @@ 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 = {}
) {
static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
const rect =
typeof target.getBoundingClientRect === 'function'
? target.getBoundingClientRect()
: { x: 0, y: 0 }
typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }
// EventInit
const eventOpts = {
@ -1072,25 +998,12 @@ class Event {
if (type.startsWith('pointer')) {
return new PointerEvent(
type,
Object.assign(
{},
eventOpts,
uiEventOpts,
mouseEventOpts,
pointerEventOpts,
opts
)
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))
}
}
}

65
lib/utils.js
View File

@ -1,4 +1,4 @@
/* globals WebKitPoint */
/* globals */
/** Tests whether an object is empty
* @param {Object} obj - the object to be tested
@ -60,11 +60,9 @@ export function sample(population, k) {
set and it doesn't suffer from frequent reselections.
*/
if (!Array.isArray(population))
throw new TypeError('Population must be an array.')
if (!Array.isArray(population)) 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')
if (k < 0 || k > n) 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
@ -143,9 +141,7 @@ 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) {
@ -165,11 +161,7 @@ export class Dates {
}
static nextDay(date) {
return this.create(
date.getFullYear(),
date.getMonth(),
date.getDate() + 1
)
return this.create(date.getFullYear(), date.getMonth(), date.getDate() + 1)
}
static nextHour(date) {
@ -672,15 +664,9 @@ export class Polygon {
*/
draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
context.beginPath()
context.moveTo(
this.points[0].x + this.center.x,
this.points[0].y + this.center.y
)
context.moveTo(this.points[0].x + this.center.x, this.points[0].y + this.center.y)
for (let i = 1; i < this.points.length; i++) {
context.lineTo(
this.points[i].x + this.center.x,
this.points[i].y + this.center.y
)
context.lineTo(this.points[i].x + this.center.x, this.points[i].y + this.center.y)
}
context.closePath()
context.lineWidth = lineWidth
@ -737,10 +723,7 @@ export class Polygon {
for (i = 0, j = nvert - 1; i < nvert; j = i++) {
if (
verty[i] > testy != verty[j] > testy &&
testx <
((vertx[j] - vertx[i]) * (testy - verty[i])) /
(verty[j] - verty[i]) +
vertx[i]
testx < ((vertx[j] - vertx[i]) * (testy - verty[i])) / (verty[j] - verty[i]) + vertx[i]
)
c = !c
}
@ -774,12 +757,8 @@ export class Polygon {
for (side = 0; side < this.getNumberOfSides(); side++) {
/* get the axis that we will project onto */
if (side == 0) {
axis.x =
this.points[this.getNumberOfSides() - 1].y -
this.points[0].y
axis.y =
this.points[0].x -
this.points[this.getNumberOfSides() - 1].x
axis.x = this.points[this.getNumberOfSides() - 1].y - this.points[0].y
axis.y = this.points[0].x - this.points[this.getNumberOfSides() - 1].x
} else {
axis.x = this.points[side - 1].y - this.points[side].y
axis.y = this.points[side].x - this.points[side - 1].x
@ -803,8 +782,7 @@ export class Polygon {
maxA += tmp
/* project polygon B onto axis to determine the min/max */
minB = maxB =
other.points[0].x * axis.x + other.points[0].y * axis.y
minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y
for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
if (tmp > maxB) maxB = tmp
@ -831,12 +809,8 @@ export class Polygon {
for (side = 0; side < other.getNumberOfSides(); side++) {
/* get the axis that we will project onto */
if (side == 0) {
axis.x =
other.points[other.getNumberOfSides() - 1].y -
other.points[0].y
axis.y =
other.points[0].x -
other.points[other.getNumberOfSides() - 1].x
axis.x = other.points[other.getNumberOfSides() - 1].y - other.points[0].y
axis.y = other.points[0].x - other.points[other.getNumberOfSides() - 1].x
} else {
axis.x = other.points[side - 1].y - other.points[side].y
axis.y = other.points[side].x - other.points[side - 1].x
@ -860,8 +834,7 @@ export class Polygon {
maxA += tmp
/* project polygon B onto axis to determine the min/max */
minB = maxB =
other.points[0].x * axis.x + other.points[0].y * axis.y
minB = maxB = other.points[0].x * axis.x + other.points[0].y * axis.y
for (i = 1; i < other.getNumberOfSides(); i++) {
tmp = other.points[i].x * axis.x + other.points[i].y * axis.y
if (tmp > maxB) maxB = tmp
@ -918,12 +891,7 @@ 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
}
/**
@ -1003,8 +971,7 @@ 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

90
package-lock.json generated
View File

@ -1979,9 +1979,9 @@
}
},
"eslint": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.0.1.tgz",
"integrity": "sha512-DyQRaMmORQ+JsWShYsSg4OPTjY56u1nCjAmICrE8vLWqyLKxhFXOthwMj1SA8xwfrv0CofLNVnqbfyhwCkaO0w==",
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.1.0.tgz",
"integrity": "sha512-QhrbdRD7ofuV09IuE2ySWBz0FyXCq0rriLTZXZqaWSI79CVtHVRdkFuFTViiqzZhkCgfOh9USpriuGN2gIpZDQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
@ -1990,7 +1990,7 @@
"cross-spawn": "^6.0.5",
"debug": "^4.0.1",
"doctrine": "^3.0.0",
"eslint-scope": "^4.0.3",
"eslint-scope": "^5.0.0",
"eslint-utils": "^1.3.1",
"eslint-visitor-keys": "^1.0.0",
"espree": "^6.0.0",
@ -1998,34 +1998,35 @@
"esutils": "^2.0.2",
"file-entry-cache": "^5.0.1",
"functional-red-black-tree": "^1.0.1",
"glob-parent": "^3.1.0",
"glob-parent": "^5.0.0",
"globals": "^11.7.0",
"ignore": "^4.0.6",
"import-fresh": "^3.0.0",
"imurmurhash": "^0.1.4",
"inquirer": "^6.2.2",
"inquirer": "^6.4.1",
"is-glob": "^4.0.0",
"js-yaml": "^3.13.1",
"json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.3.0",
"lodash": "^4.17.11",
"lodash": "^4.17.14",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"natural-compare": "^1.4.0",
"optionator": "^0.8.2",
"progress": "^2.0.0",
"regexpp": "^2.0.1",
"semver": "^5.5.1",
"strip-ansi": "^4.0.0",
"strip-json-comments": "^2.0.1",
"semver": "^6.1.2",
"strip-ansi": "^5.2.0",
"strip-json-comments": "^3.0.1",
"table": "^5.2.3",
"text-table": "^0.2.0"
"text-table": "^0.2.0",
"v8-compile-cache": "^2.0.3"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"dev": true
},
"debug": {
@ -2043,20 +2044,41 @@
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"dev": true
},
"glob-parent": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
"integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^3.0.0"
"ansi-regex": "^4.1.0"
}
},
"strip-json-comments": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz",
"integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
"dev": true
}
}
},
@ -2079,9 +2101,9 @@
}
},
"eslint-scope": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
"integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
"integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
"dev": true,
"requires": {
"esrecurse": "^4.1.0",
@ -2123,9 +2145,9 @@
},
"dependencies": {
"acorn": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.0.tgz",
"integrity": "sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==",
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz",
"integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==",
"dev": true
}
}
@ -5954,11 +5976,11 @@
"dev": true
},
"propagating-hammerjs": {
"version": "1.4.6",
"resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz",
"integrity": "sha1-/tAOmwB2f/1C0U9bUxvEk+tnLjc=",
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz",
"integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==",
"requires": {
"hammerjs": "^2.0.6"
"hammerjs": "^2.0.8"
}
},
"proxy-from-env": {
@ -6001,9 +6023,9 @@
"dev": true
},
"puppeteer": {
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.18.1.tgz",
"integrity": "sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==",
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.19.0.tgz",
"integrity": "sha512-2S6E6ygpoqcECaagDbBopoSOPDv0pAZvTbnBgUY+6hq0/XDFDOLEMNlHF/SKJlzcaZ9ckiKjKDuueWI3FN/WXw==",
"dev": true,
"requires": {
"debug": "^4.1.0",
@ -7743,6 +7765,12 @@
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
"dev": true
},
"v8-compile-cache": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
"integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==",
"dev": true
},
"v8flags": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",

9
package.json
View File

@ -8,6 +8,9 @@
},
"scripts": {
"test": "node bin/testrunner.js",
"test-eventlistener": "node ./test/tests/eventlistener/index.js",
"test-eventlistener-remove": "node ./test/tests/eventlistener/remove.js",
"test-eventlistener-hammerjs": "node ./test/tests/eventlistener/hammerjs.js",
"build": "rollup --config ./rollup.config.js",
"watch": "rollup --watch --config ./rollup.config.js",
"3rdparty": "gulp",
@ -22,7 +25,7 @@
"license": "LGPL-3.0-or-later",
"devDependencies": {
"@pixi/jsdoc-template": "^2.4.2",
"eslint": "^6.0.1",
"eslint": "^6.1.0",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"fs-extra": "^8.0.1",
@ -34,7 +37,7 @@
"gulp-uglify": "^3.0.2",
"htmlhint": "^0.11.0",
"prettier": "^1.18.2",
"puppeteer": "^1.18.1",
"puppeteer": "^1.19.0",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0"
},
@ -47,6 +50,6 @@
"pixi-particles": "^4.1.1",
"pixi-projection": "^0.2.8",
"pixi.js": "^4.8.8",
"propagating-hammerjs": "^1.4.6"
"propagating-hammerjs": "^1.4.7"
}
}

7
test/chart/Chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

75
test/chart/data.js Normal file
View File

File diff suppressed because one or more lines are too long

97
test/chart/index.html Normal file
View File

@ -0,0 +1,97 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Metrics Chart</title>
<meta name="description" content="Metrics for functional tests">
<meta name="author" content="Sebastian Kupke">
<style>
canvas {
margin-bottom: 60px;
}
</style>
</head>
<body>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<canvas id="chart3"></canvas>
<canvas id="chart4"></canvas>
<script src="./Chart.min.js"></script>
<script src="./data.js"></script>
<script>
new Chart('chart1', {
type: 'line',
data: data[0],
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '[Seconds]'
}
}]
}
}
})
new Chart('chart2', {
type: 'line',
data: data[1],
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '[Seconds]'
}
}]
}
}
})
new Chart('chart3', {
type: 'line',
data: data[2],
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '[Seconds]'
}
}]
}
}
})
new Chart('chart4', {
type: 'line',
data: data[3],
options: {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '[Seconds]'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '[MegaByte]'
}
}]
}
}
})
</script>
</body>
</html>

92
test/tests/eventlistener/hammerjs.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test EventListener</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Memory Test EventListener with HammerJS
</h1>
<p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<div class="buttons">
<a class="button is-info is-fullwidth" id="add">Add HTML content</a>
<a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
</div>
</div>
<div class="column" id="content"></div>
</div>
</div>
</section>
<script>
const html = `
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="./images/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="./images/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item" id="contentRandom">Random</a>
<a href="#" class="card-footer-item" id="contentDelete">Delete</a>
</footer>
</div>
`
const hammerAdd = new Hammer(document.querySelector('#add'))
hammerAdd.on('tap', function(event) {
document.querySelector('#content').innerHTML = html
const hammerContentRandom = new Hammer(document.querySelector('#contentRandom'))
hammerContentRandom.on('tap', function() {
document.querySelector('.media-content .title').innerHTML = chance.name()
document.querySelector('.media-content .subtitle').innerHTML = chance.email()
document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
})
const hammerContentDelete = new Hammer(document.querySelector('#contentDelete'))
hammerContentDelete.on('tap', function() {
document.querySelector('#content').innerHTML = ''
})
})
const hammerDelete = new Hammer(document.querySelector('#delete'))
hammerDelete.on('tap', function(event) {
document.querySelector('#content').innerHTML = ''
})
</script>
</body>
</html>

155
test/tests/eventlistener/hammerjs.js Normal file
View File

@ -0,0 +1,155 @@
/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
;(async () => {
const browser = await puppeteer.launch({
headless: false,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
height: 1280,
hasTouch: true
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/hammerjs.html`)
console.log('App loaded')
const metrics = []
for (let i = 0; i < CYCLES; i++) {
console.log(`Cycle ${i + 1} of ${CYCLES}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.tap('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
await page.tap('#contentRandom') // button in card
}
await sleep(100)
await page.tap('#delete') // button 2
}
await writeMetrics(metrics)
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
//await browser.close()
})()
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
async function writeMetrics(metrics) {
const first = metrics[0].Timestamp
const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
const documents = metrics.map(it => it.Documents)
const frames = metrics.map(it => it.Frames)
const jsEventListeners = metrics.map(it => it.JSEventListeners)
const nodes = metrics.map(it => it.Nodes)
const layoutCount = metrics.map(it => it.LayoutCount)
const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
const layoutDuration = metrics.map(it => it.LayoutDuration)
const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
const scriptDuration = metrics.map(it => it.ScriptDuration)
const taskDuration = metrics.map(it => it.TaskDuration)
const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)
const labels = `[${timestamp.join(', ')}]`
await fse.outputFile(
`${__dirname}/../../chart/data.js`,
`
var data = [{
labels: ${labels},
datasets: [{
label: 'Documents',
backgroundColor: 'rgba(205, 37, 44, 0.2)',
borderColor: 'rgba(205, 37, 44, 1.00)',
data: [${documents.join(', ')}]
}, {
label: 'Frames',
backgroundColor: 'rgba(239, 116, 55, 0.2)',
borderColor: 'rgba(239, 116, 55, 1.00)',
data: [${frames.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'JSEventListeners',
backgroundColor: 'rgba(248, 189, 64, 0.2)',
borderColor: 'rgba(248, 189, 64, 1.00)',
data: [${jsEventListeners.join(', ')}]
}, {
label: 'Nodes',
backgroundColor: 'rgba(181, 202, 62, 0.2)',
borderColor: 'rgba(181, 202, 62, 1.00)',
data: [${nodes.join(', ')}]
}, {
label: 'LayoutCount',
backgroundColor: 'rgba(50, 184, 79, 0.2)',
borderColor: 'rgba(50, 184, 79, 1.00)',
data: [${layoutCount.join(', ')}]
}, {
label: 'RecalcStyleCount',
backgroundColor: 'rgba(37, 180, 171, 0.2)',
borderColor: 'rgba(37, 180, 171, 1.00)',
data: [${recalcStyleCount.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'LayoutDuration',
backgroundColor: 'rgba(45, 134, 203, 0.2)',
borderColor: 'rgba(45, 134, 203, 1.00)',
data: [${layoutDuration.join(', ')}]
}, {
label: 'RecalcStyleDuration',
backgroundColor: 'rgba(100, 58, 195, 0.2)',
borderColor: 'rgba(100, 58, 195, 1.00)',
data: [${recalcStyleDuration.join(', ')}]
}, {
label: 'ScriptDuration',
backgroundColor: 'rgba(161, 59, 195, 0.2)',
borderColor: 'rgba(161, 59, 195, 1.00)',
data: [${scriptDuration.join(', ')}]
}, {
label: 'TaksDuration',
backgroundColor: 'rgba(221, 65, 150, 0.2)',
borderColor: 'rgba(221, 65, 150, 1.00)',
data: [${taskDuration.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'JSHeapUsedSize',
backgroundColor: 'rgba(163, 104, 70, 0.2)',
borderColor: 'rgba(163, 104, 70, 1.00)',
data: [${jsHeapUsedSize.join(', ')}]
}, {
label: 'JSHeapTotalSize',
backgroundColor: 'rgba(118, 118, 118, 0.2)',
borderColor: 'rgba(118, 118, 118, 1.00)',
data: [${jsHeapTotalSize.join(', ')}]
}]
}]
`
)
}

BIN
test/tests/eventlistener/images/1280x960.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
test/tests/eventlistener/images/96x96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

85
test/tests/eventlistener/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test EventListener</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Memory Test EventListener
</h1>
<p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<div class="buttons">
<a class="button is-info is-fullwidth" id="add">Add HTML content</a>
<a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
</div>
</div>
<div class="column" id="content"></div>
</div>
</div>
</section>
<script>
const html = `
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="./images/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="./images/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item" id="contentRandom">Random</a>
<a href="#" class="card-footer-item" id="contentDelete">Delete</a>
</footer>
</div>
`
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('#content').innerHTML = html
document.querySelector('#contentRandom').addEventListener('click', function() {
document.querySelector('.media-content .title').innerHTML = chance.name()
document.querySelector('.media-content .subtitle').innerHTML = chance.email()
document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
}, false)
document.querySelector('#contentDelete').addEventListener('click', function() {
document.querySelector('#content').innerHTML = ''
}, false)
}, false)
document.querySelector('#delete').addEventListener('click', function() {
document.querySelector('#content').innerHTML = ''
}, false)
</script>
</body>
</html>

155
test/tests/eventlistener/index.js Normal file
View File

@ -0,0 +1,155 @@
/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
;(async () => {
const browser = await puppeteer.launch({
headless: false,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
height: 1280,
hasTouch: false
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/index.html`)
console.log('App loaded')
const metrics = []
for (let i = 0; i < CYCLES; i++) {
console.log(`Cycle ${i + 1} of ${CYCLES}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.click('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
await page.click('#contentRandom') // button in card
}
await sleep(100)
await page.click('#delete') // button 2
}
await writeMetrics(metrics)
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
//await browser.close()
})()
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
async function writeMetrics(metrics) {
const first = metrics[0].Timestamp
const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
const documents = metrics.map(it => it.Documents)
const frames = metrics.map(it => it.Frames)
const jsEventListeners = metrics.map(it => it.JSEventListeners)
const nodes = metrics.map(it => it.Nodes)
const layoutCount = metrics.map(it => it.LayoutCount)
const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
const layoutDuration = metrics.map(it => it.LayoutDuration)
const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
const scriptDuration = metrics.map(it => it.ScriptDuration)
const taskDuration = metrics.map(it => it.TaskDuration)
const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)
const labels = `[${timestamp.join(', ')}]`
await fse.outputFile(
`${__dirname}/../../chart/data.js`,
`
var data = [{
labels: ${labels},
datasets: [{
label: 'Documents',
backgroundColor: 'rgba(205, 37, 44, 0.2)',
borderColor: 'rgba(205, 37, 44, 1.00)',
data: [${documents.join(', ')}]
}, {
label: 'Frames',
backgroundColor: 'rgba(239, 116, 55, 0.2)',
borderColor: 'rgba(239, 116, 55, 1.00)',
data: [${frames.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'JSEventListeners',
backgroundColor: 'rgba(248, 189, 64, 0.2)',
borderColor: 'rgba(248, 189, 64, 1.00)',
data: [${jsEventListeners.join(', ')}]
}, {
label: 'Nodes',
backgroundColor: 'rgba(181, 202, 62, 0.2)',
borderColor: 'rgba(181, 202, 62, 1.00)',
data: [${nodes.join(', ')}]
}, {
label: 'LayoutCount',
backgroundColor: 'rgba(50, 184, 79, 0.2)',
borderColor: 'rgba(50, 184, 79, 1.00)',
data: [${layoutCount.join(', ')}]
}, {
label: 'RecalcStyleCount',
backgroundColor: 'rgba(37, 180, 171, 0.2)',
borderColor: 'rgba(37, 180, 171, 1.00)',
data: [${recalcStyleCount.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'LayoutDuration',
backgroundColor: 'rgba(45, 134, 203, 0.2)',
borderColor: 'rgba(45, 134, 203, 1.00)',
data: [${layoutDuration.join(', ')}]
}, {
label: 'RecalcStyleDuration',
backgroundColor: 'rgba(100, 58, 195, 0.2)',
borderColor: 'rgba(100, 58, 195, 1.00)',
data: [${recalcStyleDuration.join(', ')}]
}, {
label: 'ScriptDuration',
backgroundColor: 'rgba(161, 59, 195, 0.2)',
borderColor: 'rgba(161, 59, 195, 1.00)',
data: [${scriptDuration.join(', ')}]
}, {
label: 'TaksDuration',
backgroundColor: 'rgba(221, 65, 150, 0.2)',
borderColor: 'rgba(221, 65, 150, 1.00)',
data: [${taskDuration.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'JSHeapUsedSize',
backgroundColor: 'rgba(163, 104, 70, 0.2)',
borderColor: 'rgba(163, 104, 70, 1.00)',
data: [${jsHeapUsedSize.join(', ')}]
}, {
label: 'JSHeapTotalSize',
backgroundColor: 'rgba(118, 118, 118, 0.2)',
borderColor: 'rgba(118, 118, 118, 1.00)',
data: [${jsHeapTotalSize.join(', ')}]
}]
}]
`
)
}

91
test/tests/eventlistener/remove.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test EventListener</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Memory Test EventListener with removal
</h1>
<p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<div class="buttons">
<a class="button is-info is-fullwidth" id="add">Add HTML content</a>
<a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
</div>
</div>
<div class="column" id="content"></div>
</div>
</div>
</section>
<script>
const html = `
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="./images/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="./images/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item" id="contentRandom">Random</a>
<a href="#" class="card-footer-item" id="contentDelete">Delete</a>
</footer>
</div>
`
function clickContentRandom() {
document.querySelector('.media-content .title').innerHTML = chance.name()
document.querySelector('.media-content .subtitle').innerHTML = chance.email()
document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
}
function clickContentDelete() {
document.querySelector('#content').innerHTML = ''
}
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('#content').innerHTML = html
document.querySelector('#contentRandom').addEventListener('click', clickContentRandom, false)
document.querySelector('#contentDelete').addEventListener('click', clickContentDelete, false)
}, false)
document.querySelector('#delete').addEventListener('click', function() {
document.querySelector('#contentRandom').removeEventListener('click', clickContentRandom, false)
document.querySelector('#contentDelete').removeEventListener('click', clickContentDelete, false)
document.querySelector('#content').innerHTML = ''
}, false)
</script>
</body>
</html>

155
test/tests/eventlistener/remove.js Normal file
View File

@ -0,0 +1,155 @@
/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
;(async () => {
const browser = await puppeteer.launch({
headless: false,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
height: 1280,
hasTouch: false
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/remove.html`)
console.log('App loaded')
const metrics = []
for (let i = 0; i < CYCLES; i++) {
console.log(`Cycle ${i + 1} of ${CYCLES}`)
await sleep(TIMEOUT)
metrics.push(await page.metrics())
await page.click('#add') // button 1
await sleep(100)
for (let j = 0; j < 10; j++) {
await page.click('#contentRandom') // button in card
}
await sleep(100)
await page.click('#delete') // button 2
}
await writeMetrics(metrics)
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
//await browser.close()
})()
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
async function writeMetrics(metrics) {
const first = metrics[0].Timestamp
const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
const documents = metrics.map(it => it.Documents)
const frames = metrics.map(it => it.Frames)
const jsEventListeners = metrics.map(it => it.JSEventListeners)
const nodes = metrics.map(it => it.Nodes)
const layoutCount = metrics.map(it => it.LayoutCount)
const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
const layoutDuration = metrics.map(it => it.LayoutDuration)
const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
const scriptDuration = metrics.map(it => it.ScriptDuration)
const taskDuration = metrics.map(it => it.TaskDuration)
const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)
const labels = `[${timestamp.join(', ')}]`
await fse.outputFile(
`${__dirname}/../../chart/data.js`,
`
var data = [{
labels: ${labels},
datasets: [{
label: 'Documents',
backgroundColor: 'rgba(205, 37, 44, 0.2)',
borderColor: 'rgba(205, 37, 44, 1.00)',
data: [${documents.join(', ')}]
}, {
label: 'Frames',
backgroundColor: 'rgba(239, 116, 55, 0.2)',
borderColor: 'rgba(239, 116, 55, 1.00)',
data: [${frames.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'JSEventListeners',
backgroundColor: 'rgba(248, 189, 64, 0.2)',
borderColor: 'rgba(248, 189, 64, 1.00)',
data: [${jsEventListeners.join(', ')}]
}, {
label: 'Nodes',
backgroundColor: 'rgba(181, 202, 62, 0.2)',
borderColor: 'rgba(181, 202, 62, 1.00)',
data: [${nodes.join(', ')}]
}, {
label: 'LayoutCount',
backgroundColor: 'rgba(50, 184, 79, 0.2)',
borderColor: 'rgba(50, 184, 79, 1.00)',
data: [${layoutCount.join(', ')}]
}, {
label: 'RecalcStyleCount',
backgroundColor: 'rgba(37, 180, 171, 0.2)',
borderColor: 'rgba(37, 180, 171, 1.00)',
data: [${recalcStyleCount.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'LayoutDuration',
backgroundColor: 'rgba(45, 134, 203, 0.2)',
borderColor: 'rgba(45, 134, 203, 1.00)',
data: [${layoutDuration.join(', ')}]
}, {
label: 'RecalcStyleDuration',
backgroundColor: 'rgba(100, 58, 195, 0.2)',
borderColor: 'rgba(100, 58, 195, 1.00)',
data: [${recalcStyleDuration.join(', ')}]
}, {
label: 'ScriptDuration',
backgroundColor: 'rgba(161, 59, 195, 0.2)',
borderColor: 'rgba(161, 59, 195, 1.00)',
data: [${scriptDuration.join(', ')}]
}, {
label: 'TaksDuration',
backgroundColor: 'rgba(221, 65, 150, 0.2)',
borderColor: 'rgba(221, 65, 150, 1.00)',
data: [${taskDuration.join(', ')}]
}]
}, {
labels: ${labels},
datasets: [{
label: 'JSHeapUsedSize',
backgroundColor: 'rgba(163, 104, 70, 0.2)',
borderColor: 'rgba(163, 104, 70, 1.00)',
data: [${jsHeapUsedSize.join(', ')}]
}, {
label: 'JSHeapTotalSize',
backgroundColor: 'rgba(118, 118, 118, 0.2)',
borderColor: 'rgba(118, 118, 118, 1.00)',
data: [${jsHeapTotalSize.join(', ')}]
}]
}]
`
)
}